@idea-ionic/uncommon 8.6.6 → 8.6.8

package/fesm2022/idea-ionic-uncommon.mjs

@@ -1,17 +1,20 @@
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, ViewChild, Input, Output, Component, Injectable, inject } from '@angular/core';
+import { EventEmitter, ViewChild, Input, Output, Component, inject, Injectable } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import { IonText, IonList, IonInput, IonItem, IonAccordion, IonAccordionGroup, IonButton, IonCardContent, IonCard, PopoverController, IonAvatar, IonLabel, IonIcon, IonContent, IonGrid, IonRow, IonCol, AlertController, ModalController, IonFooter, IonButtons, IonTitle, IonToolbar, IonHeader, Platform, IonCardTitle, IonCardHeader, IonImg, IonTextarea, IonSpinner, IonListHeader, IonFab, IonFabButton, IonBadge, IonSegmentButton, IonSegment } from '@ionic/angular/standalone';
-import { Countries, Suggestion, mdToHtml, COLORS, Contacts, ErrorReport, ClientInfo, ExternalCalendarSources, Sentiment, TimeInterval, PushNotificationsDevice, PushNotificationsPlatforms } from 'idea-toolbox';
-import { IDEASelectComponent, IDEATranslatePipe, IDEAEnvironment, IDEAStorageService, IDEATranslationsService, IDEALocalizedDatePipe, IDEALoadingService, IDEAActionSheetController } from '@idea-ionic/common';
-import { ActivatedRoute } from '@angular/router';
+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';
+import { Countries, Suggestion, ErrorReport, ClientInfo, Attachment, mdToHtml, COLORS, Contacts, ExternalCalendarSources, Sentiment, TimeInterval, PushNotificationsDevice, PushNotificationsPlatforms } from 'idea-toolbox';
+import { IDEASelectComponent, IDEATranslatePipe, IDEAEnvironment, IDEAStorageService, IDEALoadingService, IDEAMessageService, IDEATranslationsService, IDEALocalizedDatePipe, IDEAActionSheetController } from '@idea-ionic/common';
+import heic2any from 'heic2any';
+import { Platform as Platform$1 } from '@ionic/angular';
+import { Browser } from '@capacitor/browser';
+import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
 import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { Network } from '@capacitor/network';
-import { Browser } from '@capacitor/browser';
+import { ActivatedRoute } from '@angular/router';
 import { PushNotifications } from '@capacitor/push-notifications';
 
 class IDEAAddressComponent {
@@ -415,6 +418,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                 args: ['accordion']
             }] } });
 
+class IDEAErrorReportingService {
+    constructor() {
+        this._env = inject(IDEAEnvironment);
+        this._http = inject(HttpClient);
+        this._platform = inject(Platform);
+        this.apiStage = this._env.idea.ideaApi?.stage || this._env.idea.ideaApi?.version;
+        this.apiUrl = 'https://'.concat([this._env.idea.ideaApi?.url, this.apiStage].filter(x => x).join('/'));
+    }
+    /**
+     * Send the error report to the back-end.
+     */
+    sendReport(error, forceSend) {
+        return new Promise(resolve => {
+            // skip in case we don't want to send the report or the report is useless (blank error)
+            if ((!this.shouldSend() && !forceSend) || !error?.name)
+                return resolve();
+            // prepare and send the report
+            const report = new ErrorReport({
+                version: this._env.idea.app.version,
+                stage: this.apiStage,
+                client: this.getClientInfo(),
+                type: error.name,
+                error: error.message,
+                stack: error.stack
+            });
+            this._http
+                .post(this.apiUrl.concat(`/projects/${this._env.idea.project}/errorReporting`), report)
+                .toPromise()
+                .catch(() => { }) // note: never throw an error when reporting an error
+                .finally(() => resolve());
+        });
+    }
+    /**
+     * Whether we should send the reporting or we are in a scenario in which we should skip it.
+     */
+    shouldSend() {
+        return this.apiStage === 'prod';
+    }
+    /**
+     * Acquire the client's info.
+     */
+    getClientInfo() {
+        return new ClientInfo({
+            timestamp: new Date().toISOString(),
+            platform: this._platform.platforms().join(' '),
+            screenWidth: this._platform.width(),
+            screenHeight: this._platform.height(),
+            isLandScape: this._platform.isLandscape(),
+            url: this._platform.url(),
+            referrer: document.referrer,
+            isOnline: navigator.onLine,
+            language: navigator.language,
+            userAgent: navigator.userAgent
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: IDEAErrorReportingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: IDEAErrorReportingService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: IDEAErrorReportingService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
 /**
  * @deprecated use a specific App service instead.
  */
@@ -463,1584 +529,1887 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
         }], ctorParameters: () => [] });
 
 /**
- * Announcement card that can be set in any interface to show the alert for this project.
+ * Utility to monitor the network connection.
+ * Note: don't use it directly, if you're also using IDEAOfflineDataService.
  */
-class IDEAAnnouncementComponent {
+class IDEAOfflineService {
     constructor() {
-        this._env = inject(IDEAEnvironment);
-        this._tc = inject(IDEATinCanService);
-        this._storage = inject(IDEAStorageService);
-        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
-        this.announcement = this._tc.get('idea-announcement');
-        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);
+        // get an instant status
+        this._isOffline = !navigator.onLine;
+        if (Network) {
+            // set the basic listener for changes
+            this.listenerHandler = Network.addListener('networkStatusChange', status => (this._isOffline = !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;
+                    if (observer)
+                        observer.next(status.connected);
+                });
+            });
         }
     }
-    async markAsRead() {
-        await this._storage.set(this.storageKey, this.announcement.content);
-        this.htmlContent = null;
+    /**
+     * Subscribe to be notified when the connection status changes.
+     */
+    subscribe(callback) {
+        return this.observable.subscribe(callback);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: IDEAAnnouncementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: IDEAAnnouncementComponent, isStandalone: true, selector: "idea-announcement", inputs: { color: "color" }, ngImport: i0, template: `
-    @if (htmlContent) {
-      <ion-card class="announcementCard" [color]="color">
-        <ion-card-content>
-          <p class="htmlContent" [innerHTML]="htmlContent"></p>
-          <p class="ion-text-right">
-            <ion-button color="primary" (click)="markAsRead()">
-              {{ 'COMMON.GOT_IT' | translate }}
-            </ion-button>
-          </p>
-        </ion-card-content>
-      </ion-card>
+    /**
+     * Quickly check the connection status.
+     */
+    isOnline() {
+        return !this._isOffline;
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "pipe", type: IDEATranslatePipe, name: "translate" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: IDEAAnnouncementComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'idea-announcement',
-                    standalone: true,
-                    imports: [CommonModule, IDEATranslatePipe, IonButton, IonCardContent, IonCard],
-                    template: `
-    @if (htmlContent) {
-      <ion-card class="announcementCard" [color]="color">
-        <ion-card-content>
-          <p class="htmlContent" [innerHTML]="htmlContent"></p>
-          <p class="ion-text-right">
-            <ion-button color="primary" (click)="markAsRead()">
-              {{ 'COMMON.GOT_IT' | translate }}
-            </ion-button>
-          </p>
-        </ion-card-content>
-      </ion-card>
+    /**
+     * Quickly check the connection status.
+     */
+    isOffline() {
+        return this._isOffline;
     }
-  `
-                }]
-        }], ctorParameters: () => [], propDecorators: { color: [{
-                type: Input
-            }] } });
+    /**
+     * Quickly check for online connection.
+     */
+    async check() {
+        if (!Network)
+            return false;
+        const status = await Network.getStatus();
+        this._isOffline = !status.connected;
+        return status.connected;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: IDEAOfflineService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: IDEAOfflineService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: IDEAOfflineService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
 
 /**
- * Pick a color from a defined set.
+ * To communicate with an AWS's API Gateway istance.
+ *
+ * Includes a rundimental cache on GET requests, until Android doesn't support SWs on local files.
+ *
+ * Note: requires an `AWSAPIAuthToken` variable to be set by IDEATinCanService service.
  */
-class IDEAColorPickerComponent {
+class IDEAAWSAPIService {
     constructor() {
-        /**
-         * The pickable colors.
-         */
-        this.colors = COLORS;
-        /**
-         * On select event.
-         */
-        this.select = new EventEmitter();
-        /**
-         * Icon select.
-         */
-        this.iconSelect = new EventEmitter();
-        this._popover = inject(PopoverController);
-    }
-    async openPalette(event) {
-        if (this.disabled)
-            return;
-        const componentProps = { colors: this.colors, current: this.current };
-        const popover = await this._popover.create({ component: ColorsPaletteComponent, componentProps, event });
-        popover.onDidDismiss().then(res => {
-            if (res && res.data)
-                this.select.emit(res.data);
-        });
-        popover.present();
-    }
-    doIconSelect(event) {
-        if (event)
-            event.stopPropagation();
-        this.iconSelect.emit(event);
+        this._env = inject(IDEAEnvironment);
+        this._http = inject(HttpClient);
+        this._platform = inject(Platform);
+        this._tc = inject(IDEATinCanService);
+        this._storage = inject(IDEAStorageService);
+        this._errorReporting = inject(IDEAErrorReportingService);
+        this._offline = inject(IDEAOfflineService);
+        this.apiStage = this._env.idea.api?.stage || this._env.idea.api?.version;
+        this.apiUrlProject = 'https://'.concat([this._env.idea.api?.url, this.apiStage].filter(x => x).join('/'));
+        this.ideaApiStage = this._env.idea.ideaApi?.stage || this._env.idea.ideaApi?.version;
+        this.apiUrlIDEA = 'https://'.concat([this._env.idea.ideaApi?.url, this.ideaApiStage].filter(x => x).join('/'));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: IDEAColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: IDEAColorPickerComponent, isStandalone: true, selector: "idea-color-picker", inputs: { colors: "colors", current: "current", label: "label", placeholder: "placeholder", icon: "icon", iconColor: "iconColor", disabled: "disabled", obligatory: "obligatory", lines: "lines", color: "color" }, outputs: { select: "select", iconSelect: "iconSelect" }, ngImport: i0, template: `
-    <ion-item
-      class="colorPickerItem"
-      [color]="color"
-      [lines]="lines"
-      [button]="!disabled"
-      [title]="placeholder || ''"
-      [class.withLabel]="label"
-      (click)="openPalette($event)"
-    >
-      @if (icon) {
-        <ion-button fill="clear" slot="start" [color]="iconColor" (click)="doIconSelect($event)">
-          <ion-icon [name]="icon" slot="icon-only" />
-        </ion-button>
-      }
-      @if (label) {
-        <ion-label [class.selectable]="!disabled">
-          {{ label }}
-          @if (obligatory && !disabled) {
-            <ion-text class="obligatoryDot" />
-          }
-        </ion-label>
-      }
-      <ion-avatar slot="end" class="colorCircle" [style.background-color]="current" />
-      @if (!disabled) {
-        <ion-icon slot="end" name="caret-down" class="selectIcon" [class.selectable]="!disabled" />
-      }
-    </ion-item>
-  `, isInline: true, styles: [".colorPickerItem{min-height:48px;height:auto}.colorPickerItem .placeholder{color:var(--ion-color-medium)}.colorPickerItem .selectIcon{margin:0;padding-left:4px;font-size:.8em;color:var(--ion-color-medium)}.selectItem.withLabel{min-height:58px;height:auto}.selectItem.withLabel .selectIcon{padding-top:25px}.selectItem.withLabel ion-button[slot=start]{margin-top:16px}.selectable{cursor:pointer}ion-avatar.colorCircle{width:20px;height:20px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonAvatar, selector: "ion-avatar" }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { 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: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: IDEAColorPickerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'idea-color-picker', standalone: true, imports: [CommonModule, IonAvatar, IonText, IonLabel, IonIcon, IonButton, IonItem], template: `
-    <ion-item
-      class="colorPickerItem"
-      [color]="color"
-      [lines]="lines"
-      [button]="!disabled"
-      [title]="placeholder || ''"
-      [class.withLabel]="label"
-      (click)="openPalette($event)"
-    >
-      @if (icon) {
-        <ion-button fill="clear" slot="start" [color]="iconColor" (click)="doIconSelect($event)">
-          <ion-icon [name]="icon" slot="icon-only" />
-        </ion-button>
-      }
-      @if (label) {
-        <ion-label [class.selectable]="!disabled">
-          {{ label }}
-          @if (obligatory && !disabled) {
-            <ion-text class="obligatoryDot" />
-          }
-        </ion-label>
-      }
-      <ion-avatar slot="end" class="colorCircle" [style.background-color]="current" />
-      @if (!disabled) {
-        <ion-icon slot="end" name="caret-down" class="selectIcon" [class.selectable]="!disabled" />
-      }
-    </ion-item>
-  `, styles: [".colorPickerItem{min-height:48px;height:auto}.colorPickerItem .placeholder{color:var(--ion-color-medium)}.colorPickerItem .selectIcon{margin:0;padding-left:4px;font-size:.8em;color:var(--ion-color-medium)}.selectItem.withLabel{min-height:58px;height:auto}.selectItem.withLabel .selectIcon{padding-top:25px}.selectItem.withLabel ion-button[slot=start]{margin-top:16px}.selectable{cursor:pointer}ion-avatar.colorCircle{width:20px;height:20px}\n"] }]
-        }], propDecorators: { colors: [{
-                type: Input
-            }], current: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], iconColor: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], obligatory: [{
-                type: Input
-            }], lines: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], select: [{
-                type: Output
-            }], iconSelect: [{
-                type: Output
-            }] } });
-/**
- * Component to open in a popover for displaying the colors available.
- */
-class ColorsPaletteComponent {
-    constructor() {
-        this._popover = inject(PopoverController);
+    /**
+     * Execute an online API request.
+     * @param resource resource name (e.g. `users`)
+     * @param method enum HTTP methods
+     * @param options the request options
+     */
+    request(resource, method, options) {
+        return new Promise((resolve, reject) => {
+            const opt = options || {};
+            // prepare the url
+            const url = this.prepareURL(resource, opt);
+            // prepare the headers and set the Authorization token
+            const headers = this.prepareHeaders(opt.headers);
+            // prepare the query params and add some info about the client
+            const params = this.prepareQueryParams(opt.params, true);
+            // execute the request
+            let req;
+            switch (method) {
+                case 'HEAD':
+                    req = this._http.head(url, { headers, params });
+                    break;
+                case 'POST':
+                    req = this._http.post(url, opt.body, { headers, params });
+                    break;
+                case 'PUT':
+                    req = this._http.put(url, opt.body, { headers, params });
+                    break;
+                case 'PATCH':
+                    req = this._http.patch(url, opt.body, { headers, params });
+                    break;
+                case 'DELETE':
+                    req = this._http.delete(url, { headers, params });
+                    break;
+                case 'GET':
+                default:
+                    req = this._http.get(url, { headers, params });
+            }
+            // handle the request response
+            req.subscribe((res) => resolve(res), async (err) => {
+                // check if the request failed for network reasons (to trigger offline mode if needed)
+                await this._offline.check();
+                // (async) send a report, if wanted
+                if (opt.reportError)
+                    this._errorReporting.sendReport(err);
+                // fix and return the error
+                this.fixErrMessageBeforeReject(err, reject);
+            });
+        });
+    }
+    /**
+     * Prepare the URL to which execute the request.
+     */
+    prepareURL(resource, opt) {
+        // decide whether to use IDEA's API or the project's API (or an alternative API)
+        let url = opt.idea ? this.apiUrlIDEA : opt.alternativeAPI || this.apiUrlProject;
+        // prepare a single-resource request (by id) or a normal one
+        url = `${url}/${resource}`;
+        if (opt.resourceId)
+            url = `${url}/${encodeURIComponent(opt.resourceId)}`;
+        return url;
+    }
+    /**
+     * Prepare the headers object to send with a request.
+     * Note: it always adds the Authorization token (`AWSAPIAuthToken`) and the API key (`AWSAPIKey`), if set.
+     */
+    prepareHeaders(h) {
+        // preare the headers; note: HttpHeaders is immutable!
+        let headers = new HttpHeaders(h || null);
+        // set the Authorization token
+        if (!headers.get('Authorization') && this._tc.get('AWSAPIAuthToken'))
+            headers = headers.set('Authorization', this._tc.get('AWSAPIAuthToken'));
+        // set the API key
+        if (!headers.get('X-API-Key') && this._tc.get('AWSAPIKey'))
+            headers = headers.set('X-API-Key', this._tc.get('AWSAPIKey'));
+        return headers;
+    }
+    /**
+     * Prepare the queryParams object to send with a request; if requested, add some info about the client.
+     */
+    prepareQueryParams(qp, addClientInfo) {
+        // prepare the query params; note: HttpParams is immutable!
+        let searchParams = new HttpParams();
+        if (qp && qp instanceof HttpParams)
+            searchParams = qp;
+        else if (qp)
+            for (const prop in qp)
+                if (qp[prop])
+                    searchParams = searchParams.set(prop, qp[prop]);
+        // if requested, add app version and client platform to the info we send to the back-end
+        if (addClientInfo) {
+            searchParams = searchParams.set('_v', this._env.idea.app.version);
+            searchParams = searchParams.set('_p', this._platform.platforms().join(' '));
+        }
+        return searchParams;
+    }
+    /**
+     * Converts the error message to be readable.
+     */
+    fixErrMessageBeforeReject(err, reject) {
+        let e;
+        try {
+            if (!err || !err.error)
+                e = {};
+            else if (typeof err.error === 'string')
+                e = JSON.parse(err.error);
+            else
+                e = err.error;
+        }
+        catch (_) {
+            e = {};
+        }
+        reject(new Error(e.message || 'Unknown error!'));
+    }
+    /**
+     * Use the HttpClient to execute a raw request.
+     */
+    rawRequest() {
+        return this._http;
+    }
+    /**
+     * HEAD request.
+     * @param resource resource name (e.g. `users`)
+     * @param options the request options
+     */
+    headResource(resource, options) {
+        return this.request(resource, 'HEAD', options);
+    }
+    /**
+     * GET request. Include options to cache the requests (`options.useCache`), to work also offline.
+     * @param resource resource name (e.g. `users`)
+     * @param options the request options
+     */
+    getResource(resource, options) {
+        return new Promise((resolve, reject) => {
+            const opt = options || {};
+            // if offline and with a cache mode set, force the request to the cache
+            if (!navigator.onLine && opt.useCache)
+                opt.useCache = CacheModes.CACHE_ONLY;
+            // execute the GET request online or through the cache, depending on the chosen mode
+            switch (opt.useCache) {
+                case CacheModes.CACHE_ONLY:
+                    // return the result from the cache, without retrying online if a result wasn't found
+                    this.getFromCache(resource, opt).then((res) => {
+                        if (res)
+                            resolve(res);
+                        else
+                            reject();
+                    });
+                    break;
+                case CacheModes.CACHE_FIRST:
+                    // return the result from the cache
+                    this.getFromCache(resource, opt).then((localRes) => {
+                        // check whether the local resource is present (element or list)
+                        if (localRes && (opt.resourceId || localRes.length)) {
+                            resolve(localRes);
+                            // asynchrounously execute the request online, to update the cache with latest data
+                            this.request(resource, 'GET', opt)
+                                .then((cloudRes) => {
+                                // update the cache (if it fails, it's ok)
+                                this.putInCache(resource, cloudRes, opt).catch(() => { });
+                            })
+                                .catch(() => { }); // we already returned the result, an error is acceptable
+                        }
+                        else {
+                            // if the result isn't found in the cache, return the result of the online request
+                            this.request(resource, 'GET', opt)
+                                .then((res) => {
+                                resolve(res);
+                                // update the cache (if it fails, it's ok)
+                                this.putInCache(resource, res, opt).catch(() => { });
+                            })
+                                .catch((err) => reject(err)); // element not found
+                        }
+                    });
+                    break;
+                case CacheModes.NETWORK_FIRST:
+                    // return the result from an online request
+                    this.request(resource, 'GET', opt)
+                        .then((cloudRes) => {
+                        resolve(cloudRes);
+                        // asynchrounously get the same element from cache and decide whether to update or not
+                        this.getFromCache(resource, opt).then(() => {
+                            // update the cache (if it fails, it's ok)
+                            this.putInCache(resource, cloudRes, opt).catch(() => { });
+                        });
+                    })
+                        .catch(() => {
+                        // if a request to the network fails, check in cache
+                        this.getFromCache(resource, opt).then((res) => {
+                            if (res)
+                                resolve(res);
+                            else
+                                reject();
+                        });
+                    });
+                    break;
+                default:
+                    /* CacheModes.NO_CACHE */
+                    // return the result from an online request, with no cache involved
+                    this.request(resource, 'GET', opt)
+                        .then((res) => resolve(res))
+                        .catch((err) => reject(err));
+            }
+        });
+    }
+    /**
+     * Observe a GET request. Include options to cache the requests (`options.useCache`), to work also offline.
+     * @param resource resource name (e.g. `users`)
+     * @param options the request options
+     */
+    getResourceObserver(resource, options) {
+        return new Observable(observer => {
+            const opt = options || {};
+            // if offline and with a cache mode set, force the request to the cache
+            if (!navigator.onLine && opt.useCache)
+                opt.useCache = CacheModes.CACHE_ONLY;
+            // execute the GET request online or through the cache, depending on the chosen mode
+            switch (opt.useCache) {
+                case CacheModes.CACHE_ONLY:
+                    // return the result from the cache, without retrying online if a result wasn't found
+                    this.getFromCache(resource, opt).then((res) => {
+                        if (res)
+                            observer.next(res);
+                        else
+                            observer.error();
+                    });
+                    break;
+                case CacheModes.CACHE_FIRST:
+                    // return the result from the cache
+                    this.getFromCache(resource, opt).then((localRes) => {
+                        if (localRes) {
+                            observer.next(localRes);
+                            // asynchrounously execute the request online, to update the cache with latest data
+                            this.request(resource, 'GET', opt)
+                                .then((cloudRes) => {
+                                observer.next(cloudRes);
+                                // update the cache (if it fails, it's ok)
+                                this.putInCache(resource, cloudRes, opt).catch(() => { });
+                            })
+                                .catch(() => { }); // we already returned the result, an error is acceptable
+                        }
+                        else {
+                            // if the result isn't found in the cache, return the result of the online request
+                            this.request(resource, 'GET', opt)
+                                .then((res) => {
+                                observer.next(res);
+                                // update the cache (if it fails, it's ok)
+                                this.putInCache(resource, res, opt).catch(() => { });
+                            })
+                                .catch((err) => observer.error(err)); // element not found
+                        }
+                    });
+                    break;
+                case CacheModes.NETWORK_FIRST:
+                    // return the result from an online request
+                    this.request(resource, 'GET', opt)
+                        .then((cloudRes) => {
+                        observer.next(cloudRes);
+                        // update the cache (if it fails, it's ok)
+                        this.putInCache(resource, cloudRes, opt).catch(() => { });
+                    })
+                        .catch(() => {
+                        // if a request to the network fails, check in cache
+                        this.getFromCache(resource, opt).then((res) => {
+                            if (res)
+                                observer.next(res);
+                            else
+                                observer.error();
+                        });
+                    });
+                    break;
+                default:
+                    /* CacheModes.NO_CACHE */
+                    // return the result from an online request, with no cache involved
+                    this.request(resource, 'GET', opt)
+                        .then((res) => observer.next(res))
+                        .catch((err) => observer.error(err));
+            }
+        });
+    }
+    /**
+     * Execute a GET request from the local storage.
+     * @param resource resource name (e.g. `users`)
+     * @param options the request options
+     */
+    getFromCache(resource, options) {
+        return new Promise(resolve => {
+            const opt = options || {};
+            // prepare the url and the query params
+            const url = this.prepareURL(resource, opt);
+            const queryParams = this.prepareQueryParams(opt.params);
+            // get from storage, by the complete url
+            this._storage
+                .get(url.concat(queryParams.toString()))
+                .then((res) => (res ? resolve(res) : opt.resourceId ? resolve(null) : resolve([])));
+        });
     }
-    pick(color) {
-        this._popover.dismiss(color);
+    /**
+     * Execute a PUT request in the local storage.
+     * @param resource resource name (e.g. `users`)
+     * @param data resource data
+     * @param options the request options
+     */
+    putInCache(resource, data, options) {
+        return new Promise((resolve, reject) => {
+            const opt = options || {};
+            // prepare the url and the query params
+            const url = this.prepareURL(resource, opt);
+            const queryParams = this.prepareQueryParams(opt.params);
+            // put in the storage, by the complete url
+            this._storage
+                .set(url.concat(queryParams.toString()), data)
+                .then(() => resolve())
+                .catch((err) => reject(err));
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ColorsPaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: ColorsPaletteComponent, isStandalone: true, selector: "idea-colors-palette", inputs: { colors: "colors", current: "current" }, ngImport: i0, template: `
-    <ion-content>
-      <ion-grid>
-        <ion-row>
-          @for (c of colors; track c) {
-            <ion-col [size]="2">
-              <ion-avatar
-                class="colorCircle tappable"
-                [style.background-color]="c.hex"
-                [title]="c.name || c.hex"
-                (click)="pick(c.hex)"
-              >
-                @if (c.hex === current) {
-                  <ion-icon name="checkmark" />
-                }
-              </ion-avatar>
-            </ion-col>
-          }
-        </ion-row>
-      </ion-grid>
-    </ion-content>
-  `, isInline: true, styles: ["ion-content{--background: var(--ion-color-white)}ion-avatar.colorCircle{width:20px;height:20px}.tappable{cursor:pointer}ion-avatar.colorCircle ion-icon{color:#fff;font-size:1.2em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: IonRow, selector: "ion-row" }, { 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: IonAvatar, selector: "ion-avatar" }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
+    /**
+     * Execute a DELETE request in the local storage.
+     * @param resource resource name (e.g. `users`)
+     * @param options the request options
+     */
+    deleteFromCache(resource, options) {
+        return new Promise((resolve, reject) => {
+            const opt = options || {};
+            // prepare the url and the query params
+            const url = this.prepareURL(resource, opt);
+            const queryParams = this.prepareQueryParams(opt.params);
+            // delete from storage, by the complete url
+            this._storage
+                .remove(url.concat(queryParams.toString()))
+                .then(() => resolve())
+                .catch((err) => reject(err));
+        });
+    }
+    /**
+     * POST request.
+     * @param resource resource name (e.g. `users`)
+     * @param options the request options
+     */
+    postResource(resource, options) {
+        return this.request(resource, 'POST', options);
+    }
+    /**
+     * PUT request.
+     * @param resource resource name (e.g. `users`)
+     * @param options the request options
+     */
+    putResource(resource, options) {
+        return this.request(resource, 'PUT', options);
+    }
+    /**
+     * PATCH request.
+     * @param resource resource name (e.g. `users`)
+     * @param options the request options
+     */
+    patchResource(resource, options) {
+        return this.request(resource, 'PATCH', options);
+    }
+    /**
+     * DELETE request.
+     * @param resource resource name (e.g. `users`)
+     * @param options the request options
+     */
+    deleteResource(resource, options) {
+        return this.request(resource, 'DELETE', options);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: IDEAAWSAPIService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: IDEAAWSAPIService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ColorsPaletteComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'idea-colors-palette', standalone: true, imports: [CommonModule, IonContent, IonGrid, IonRow, IonCol, IonAvatar, IonIcon], template: `
-    <ion-content>
-      <ion-grid>
-        <ion-row>
-          @for (c of colors; track c) {
-            <ion-col [size]="2">
-              <ion-avatar
-                class="colorCircle tappable"
-                [style.background-color]="c.hex"
-                [title]="c.name || c.hex"
-                (click)="pick(c.hex)"
-              >
-                @if (c.hex === current) {
-                  <ion-icon name="checkmark" />
-                }
-              </ion-avatar>
-            </ion-col>
-          }
-        </ion-row>
-      </ion-grid>
-    </ion-content>
-  `, styles: ["ion-content{--background: var(--ion-color-white)}ion-avatar.colorCircle{width:20px;height:20px}.tappable{cursor:pointer}ion-avatar.colorCircle ion-icon{color:#fff;font-size:1.2em}\n"] }]
-        }], propDecorators: { colors: [{
-                type: Input
-            }], current: [{
-                type: Input
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: IDEAAWSAPIService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+/**
+ * The options of an API request.
+ */
+class APIRequestOption {
+}
+/**
+ * Set of usable cache modes.
+ */
+var CacheModes;
+(function (CacheModes) {
+    /**
+     * Return the result from an online request, with no cache involved.
+     */
+    CacheModes[CacheModes["NO_CACHE"] = 0] = "NO_CACHE";
+    /**
+     * Return the result from an online request, storing the result in the cache, to update it with the latest data.
+     */
+    CacheModes[CacheModes["NETWORK_FIRST"] = 1] = "NETWORK_FIRST";
+    /**
+     * Return the result from the cache, but also execute the request online, to update the cache with the latest data.
+     */
+    CacheModes[CacheModes["CACHE_FIRST"] = 2] = "CACHE_FIRST";
+    /**
+     * Return the result from the cache, without retrying online if a result wasn't found.
+     */
+    CacheModes[CacheModes["CACHE_ONLY"] = 3] = "CACHE_ONLY";
+})(CacheModes || (CacheModes = {}));
 
-class IDEAContactsComponent {
+class IDEAOldAttachmentsComponent {
     constructor() {
-        this._alert = inject(AlertController);
+        this._platform = inject(Platform$1);
+        this._loading = inject(IDEALoadingService);
+        this._message = inject(IDEAMessageService);
+        this._tc = inject(IDEATinCanService);
+        this._api = inject(IDEAAWSAPIService);
+        this._offline = inject(IDEAOfflineService);
         this._translate = inject(IDEATranslationsService);
         /**
-         * The contacts to manage.
+         * The team from which we want to load the resources. Default: try to guess current team.
          */
-        this.contacts = new Contacts();
+        this.team = null;
         /**
-         * If true, show the field `name`.
+         * The path to the online API resource, as an array. Don't include the team. E.g. `['entities', entityId]`.
          */
-        this.showName = false;
+        this.pathResource = [];
         /**
-         * Whether the fields are editable or disabled.
+         * The array in which we want to add/remove attachments.
          */
-        this.editMode = true;
+        this.attachments = null;
+        /**
+         * Regulate the mode (view/edit).
+         */
+        this.editMode = false;
+        /**
+         * Show errors as reported from the parent component.
+         */
+        this.errors = new Set();
+        /**
+         * The lines attribute of the item.
+         */
+        this.lines = 'none';
+        /**
+         * Stack of errors from the last upload.
+         */
+        this.uploadErrors = [];
     }
-    sendEmail() {
-        if (!this.contacts.email)
-            return;
-        const url = `mailto:${this.contacts.email}`;
-        this.preExternalAction(this.contacts.email, () => window.open(url, '_system'));
+    ngOnInit() {
+        // if the team isn't specified, try to guess it in the usual IDEA's paths
+        this.team = this.team || this._tc.get('membership').teamId || this._tc.get('teamId');
+        this.requestURL = `teams/${this.team}/`;
+        if (this.pathResource && this.pathResource.length)
+            this.requestURL = this.requestURL.concat(this.pathResource.filter(x => x).join('/'));
+    }
+    isCapacitor() {
+        return this._platform.is('capacitor');
+    }
+    hasFieldAnError(field) {
+        return this.errors.has(field);
+    }
+    browseFiles() {
+        document.getElementById('attachmentPicker').click();
+    }
+    addAttachmentFromFile(ev) {
+        this.uploadErrors = new Array();
+        const files = ev.target ? ev.target.files : {};
+        for (let i = 0; i < files.length; i++) {
+            const file = files.item(i);
+            const fullName = file.name.split('.');
+            const format = fullName.pop();
+            const name = fullName.join('.');
+            this.addAttachment(name, format, file);
+        }
     }
-    call() {
-        if (!this.contacts.phone)
+    async takePictureAndAttach(ev) {
+        if (ev)
+            ev.stopPropagation();
+        if (!this._platform.is('capacitor') || !Camera)
             return;
-        const url = `tel:${this.contacts.phone}`;
-        this.preExternalAction(this.contacts.phone, () => window.open(url, '_system'));
+        const image = await Camera.getPhoto({
+            quality: 90,
+            allowEditing: false,
+            source: CameraSource.Camera,
+            resultType: CameraResultType.Base64
+        });
+        const filename = new Date().toISOString();
+        const content = this.base64toBlob(image.base64String, 'image/jpeg');
+        this.addAttachment(filename, image.format, content);
+    }
+    base64toBlob(base64str, type) {
+        const binary = atob(base64str);
+        const array = [];
+        for (let i = 0; i < binary.length; i++)
+            array.push(binary.charCodeAt(i));
+        return new Blob([new Uint8Array(array)], { type });
+    }
+    async addAttachment(name, format, content) {
+        if (format === FileFormatTypes.HEIC) {
+            format = FileFormatTypes.JPEG;
+            content = await heic2any({ blob: content, toType: 'image/jpeg' });
+        }
+        const attachment = new Attachment({ name, format });
+        this.attachments.push(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;
+        }
+        catch (error) {
+            this.uploadErrors.push(name);
+            this.removeAttachment(attachment);
+            this._message.error('IDEA_TEAMS.ATTACHMENTS.ERROR_UPLOADING_ATTACHMENT');
+        }
     }
-    preExternalAction(message, cb) {
-        const header = this._translate._('COMMON.DO_YOU_WANT_TO_PROCEED');
-        const buttons = [
-            { text: this._translate._('COMMON.CANCEL') },
-            { text: this._translate._('COMMON.CONFIRM'), handler: () => cb() }
-        ];
-        const cssClass = 'selectableAlertMessage';
-        this._alert.create({ header, message, buttons, cssClass }).then(alert => alert.present());
+    removeAttachment(attachment) {
+        const index = this.attachments.indexOf(attachment);
+        if (index !== -1)
+            this.attachments.splice(index, 1);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: IDEAContactsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: IDEAContactsComponent, isStandalone: true, selector: "idea-contacts", inputs: { contacts: "contacts", showName: "showName", editMode: "editMode", lines: "lines", color: "color" }, ngImport: i0, template: `
-    <div class="contacts">
-      @if (showName) {
-        <ion-item [lines]="lines" [color]="color">
-          <ion-input
-            autocomplete="new"
-            labelPlacement="stacked"
-            [label]="'IDEA_UNCOMMON.CONTACTS.NAME' | translate"
-            [disabled]="!editMode"
-            [placeholder]="'IDEA_UNCOMMON.CONTACTS.NAME_HINT' | translate"
-            [title]="'IDEA_UNCOMMON.CONTACTS.NAME_HINT' | translate"
-            [(ngModel)]="contacts.name"
-          />
-        </ion-item>
-      }
-      <ion-item [lines]="lines" [color]="color">
-        <ion-input
-          autocomplete="new"
-          labelPlacement="stacked"
-          [label]="'IDEA_UNCOMMON.CONTACTS.PHONE' | translate"
-          [disabled]="!editMode"
-          [placeholder]="'IDEA_UNCOMMON.CONTACTS.PHONE_HINT' | translate"
-          [title]="'IDEA_UNCOMMON.CONTACTS.PHONE_HINT' | translate"
-          [(ngModel)]="contacts.phone"
-        />
-        @if (!editMode) {
-          <ion-button
-            slot="end"
-            fill="clear"
-            color="dark"
-            class="marginTop"
-            [title]="'IDEA_UNCOMMON.CONTACTS.CALL' | translate"
-            (click)="call()"
-          >
-            <ion-icon name="call" slot="icon-only" />
-          </ion-button>
+    async openAttachment(attachment) {
+        try {
+            await this._loading.show();
+            const { url } = await this._api.patchResource(this.requestURL, {
+                body: { action: 'ATTACHMENTS_GET', attachmentId: attachment.attachmentId }
+            });
+            await Browser.open({ url });
+        }
+        catch (error) {
+            this._message.error('IDEA_TEAMS.ATTACHMENTS.ERROR_OPENING_ATTACHMENT');
+        }
+        finally {
+            this._loading.hide();
         }
-      </ion-item>
-      <ion-item [lines]="lines" [color]="color">
-        <ion-input
-          autocomplete="new"
-          labelPlacement="stacked"
-          [label]="'IDEA_UNCOMMON.CONTACTS.EMAIL' | translate"
-          [disabled]="!editMode"
-          [placeholder]="'IDEA_UNCOMMON.CONTACTS.EMAIL_HINT' | translate"
-          [title]="'IDEA_UNCOMMON.CONTACTS.EMAIL_HINT' | translate"
-          [(ngModel)]="contacts.email"
-        />
-        @if (!editMode) {
-          <ion-button
-            slot="end"
-            fill="clear"
-            color="dark"
-            class="marginTop"
-            [title]="'IDEA_UNCOMMON.CONTACTS.SEND_EMAIL' | translate"
-            (click)="sendEmail()"
-          >
-            <ion-icon name="mail" slot="icon-only" />
+    }
+    getFormatIcon(format) {
+        switch (format) {
+            case FileFormatTypes.JPG:
+            case FileFormatTypes.JPEG:
+            case FileFormatTypes.PNG:
+                return 'image';
+            case FileFormatTypes.PDF:
+                return 'document';
+            default:
+                return 'help';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: IDEAOldAttachmentsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: IDEAOldAttachmentsComponent, isStandalone: true, selector: "idea-old-attachments", inputs: { team: "team", pathResource: "pathResource", attachments: "attachments", editMode: "editMode", errors: "errors", lines: "lines" }, ngImport: i0, template: `
+    @for (att of attachments; track att; let index = $index; let odd = $odd) {
+      <ion-item
+        class="attachments"
+        [class.fieldHasError]="hasFieldAnError('attachments[' + index + '].attachmentId')"
+        [class.odd]="odd"
+        [lines]="lines"
+      >
+        @if (att.attachmentId && _offline.isOnline()) {
+          <ion-button fill="clear" size="small" slot="start" (click)="openAttachment(att)">
+            <ion-icon name="open-outline" slot="icon-only" size="small" />
           </ion-button>
         }
-      </ion-item>
-    </div>
-  `, isInline: true, styles: [".marginTop{margin-top:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: 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: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "pipe", type: IDEATranslatePipe, name: "translate" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: IDEAContactsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'idea-contacts', standalone: true, imports: [CommonModule, FormsModule, IDEATranslatePipe, IonInput, IonIcon, IonButton, IonItem], template: `
-    <div class="contacts">
-      @if (showName) {
-        <ion-item [lines]="lines" [color]="color">
+        @if (!editMode && att.attachmentId) {
+          <ion-icon slot="start" color="medium" [name]="getFormatIcon(att.format)" [title]="att.format" />
+        }
+        @if (editMode && att.attachmentId) {
           <ion-input
-            autocomplete="new"
-            labelPlacement="stacked"
-            [label]="'IDEA_UNCOMMON.CONTACTS.NAME' | translate"
-            [disabled]="!editMode"
-            [placeholder]="'IDEA_UNCOMMON.CONTACTS.NAME_HINT' | translate"
-            [title]="'IDEA_UNCOMMON.CONTACTS.NAME_HINT' | translate"
-            [(ngModel)]="contacts.name"
+            [(ngModel)]="att.name"
+            (ionBlur)="$event.target.value = $event.target.value || _translate._('IDEA_TEAMS.ATTACHMENTS.NO_NAME')"
           />
-        </ion-item>
-      }
-      <ion-item [lines]="lines" [color]="color">
-        <ion-input
-          autocomplete="new"
-          labelPlacement="stacked"
-          [label]="'IDEA_UNCOMMON.CONTACTS.PHONE' | translate"
-          [disabled]="!editMode"
-          [placeholder]="'IDEA_UNCOMMON.CONTACTS.PHONE_HINT' | translate"
-          [title]="'IDEA_UNCOMMON.CONTACTS.PHONE_HINT' | translate"
-          [(ngModel)]="contacts.phone"
-        />
-        @if (!editMode) {
-          <ion-button
-            slot="end"
-            fill="clear"
-            color="dark"
-            class="marginTop"
-            [title]="'IDEA_UNCOMMON.CONTACTS.CALL' | translate"
-            (click)="call()"
-          >
-            <ion-icon name="call" slot="icon-only" />
-          </ion-button>
         }
-      </ion-item>
-      <ion-item [lines]="lines" [color]="color">
-        <ion-input
-          autocomplete="new"
-          labelPlacement="stacked"
-          [label]="'IDEA_UNCOMMON.CONTACTS.EMAIL' | translate"
-          [disabled]="!editMode"
-          [placeholder]="'IDEA_UNCOMMON.CONTACTS.EMAIL_HINT' | translate"
-          [title]="'IDEA_UNCOMMON.CONTACTS.EMAIL_HINT' | translate"
-          [(ngModel)]="contacts.email"
-        />
+        @if (editMode && !att.attachmentId) {
+          <ion-label class="loadingWarning">
+            {{ 'IDEA_TEAMS.ATTACHMENTS.UPLOADING_ATTACHMENT_WARNING' | translate }}
+          </ion-label>
+        }
         @if (!editMode) {
+          <ion-label>{{ att.name }}.{{ att.format }}</ion-label>
+        }
+        @if (!att.attachmentId) {
+          <ion-spinner slot="end" [title]="'IDEA_TEAMS.ATTACHMENTS.UPLOADING' | translate" />
+        }
+        @if (editMode) {
           <ion-button
             slot="end"
+            color="danger"
             fill="clear"
-            color="dark"
-            class="marginTop"
-            [title]="'IDEA_UNCOMMON.CONTACTS.SEND_EMAIL' | translate"
-            (click)="sendEmail()"
+            [title]="'IDEA_TEAMS.ATTACHMENTS.REMOVE_ATTACHMENT' | translate"
+            (click)="removeAttachment(att)"
           >
-            <ion-icon name="mail" slot="icon-only" />
+            <ion-icon name="remove" slot="icon-only" />
           </ion-button>
         }
       </ion-item>
-    </div>
-  `, styles: [".marginTop{margin-top:14px}\n"] }]
-        }], propDecorators: { contacts: [{
-                type: Input
-            }], showName: [{
-                type: Input
-            }], editMode: [{
-                type: Input
-            }], lines: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }] } });
-
-/**
- * A random sunday, used as reference to calculate the week days.
- */
-const SUNDAY = 259200000;
-class IDEACalendarPickerComponent {
-    constructor() {
-        this._modal = inject(ModalController);
-        this._alert = inject(AlertController);
-        this._translate = inject(IDEATranslationsService);
-        this.timePicker = false;
-        this.manualTimePicker = false;
-        this.hideClearButton = false;
     }
-    ngOnInit() {
-        this.today = new Date();
-        this.refDate = this.inputDate ? new Date(this.inputDate) : new Date(this.today);
-        this.selectedDate = new Date(this.refDate);
-        this.hour = 12; // to endure timezones
-        this.minute = 0;
-        if (this.timePicker || this.manualTimePicker) {
-            this.hour = this.selectedDate.getHours();
-            if (this.manualTimePicker)
-                this.minute = this.selectedDate.getMinutes();
-            else {
-                // round the minutes a multiple of 5
-                this.minute = Math.ceil(this.selectedDate.getMinutes() / 5) * 5;
-                this.selectedDate.setMinutes(this.minute);
-            }
-        }
-        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
-        this.weekDays = new Array();
-        const refDateForWeekDays = new Date(SUNDAY);
-        refDateForWeekDays.setDate(refDateForWeekDays.getDate() - this.getLocalisedDay(refDateForWeekDays));
-        for (let i = 0; i < 7; i++) {
-            this.weekDays.push(refDateForWeekDays.toLocaleDateString(this._translate.getCurrentLang(), { weekday: 'short' }));
-            refDateForWeekDays.setDate(refDateForWeekDays.getDate() + 1);
-        }
-        if (this.min)
-            this.dateMin = new Date(this.min);
-        if (this.max)
-            this.dateMax = new Date(this.max);
+    <!----->
+    @if (!editMode && !attachments?.length) {
+      <ion-item lines="none" class="noAttachments">
+        <ion-label>
+          {{ 'IDEA_TEAMS.ATTACHMENTS.NO_ATTACHMENT' | translate }}
+        </ion-label>
+      </ion-item>
     }
-    getLocalisedDay(date) {
-        let n = date.getDay();
-        switch (this._translate.getCurrentLang()) {
-            case 'it':
-                n = --n < 0 ? 6 : n;
-                break;
+    <!----->
+    @if (editMode) {
+      <div>
+        @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">
+              {{ err }}
+              <p>{{ 'IDEA_TEAMS.ATTACHMENTS.ERROR_UPLOADING_ATTACHMENT' | translate }}</p>
+            </ion-label>
+            <ion-button
+              slot="end"
+              color="danger"
+              fill="clear"
+              [title]="'IDEA_TEAMS.ATTACHMENTS.HIDE_ERROR' | translate"
+              (click)="uploadErrors.splice(uploadErrors.indexOf(err), 1)"
+            >
+              <ion-icon name="close" slot="icon-only" />
+            </ion-button>
+          </ion-item>
         }
-        return n;
+      </div>
     }
-    buildCalendarGrid(refDate) {
-        // find the first day in the month: the important data here is the day of the week
-        const firstDateOfMonth = new Date(refDate.getFullYear(), refDate.getMonth(), 1);
-        // the following flag is used to divide the logic so I can fill the calendar
-        // also with the dates from the previous month, until there's space in the grid
-        let haventFoundFirstDay = true;
-        // index used to build the dates of the month, starting from the first one
-        let index = 1;
-        this.calendarGrid = new Array();
-        for (let i = 0; i < 6; i++) {
-            this.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);
-                        // 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;
-                        }
-                    }
-                }
-                else {
-                    // 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;
-                }
-            }
+    <!----->
+    @if (editMode) {
+      <ion-item lines="none" class="selectable" (click)="browseFiles()">
+        <ion-label color="medium">{{ 'IDEA_TEAMS.ATTACHMENTS.TAP_TO_ADD_ATTACHMENT' | translate }}</ion-label>
+        <input
+          id="attachmentPicker"
+          type="file"
+          multiple
+          style="display: none"
+          (change)="addAttachmentFromFile($event)"
+        />
+        @if (editMode) {
+          <ion-icon slot="end" name="caret-down" class="selectIcon" />
         }
-    }
-    addYears(offset) {
-        this.refDate.setFullYear(this.refDate.getFullYear() + offset);
-        this.buildCalendarGrid(this.refDate);
-    }
-    setYear(year) {
-        if (!year)
-            return;
-        this.refDate.setFullYear(Number(year));
-        this.buildCalendarGrid(this.refDate);
-    }
-    addMonths(offset) {
-        this.refDate.setMonth(this.refDate.getMonth() + offset);
-        this.buildCalendarGrid(this.refDate);
-    }
-    async showMonths() {
-        const buttons = [];
-        const inputs = [];
-        const month = new Date(0);
-        for (let i = 1; i <= 12; i++) {
-            inputs.push({
-                type: 'radio',
-                label: month.toLocaleDateString(this._translate.getCurrentLang(), { month: 'long' }),
-                value: i.toString(),
-                checked: i === this.refDate.getMonth() + 1
-            });
-            month.setMonth(month.getMonth() + 1);
+        @if (editMode && isCapacitor()) {
+          <ion-button slot="end" fill="clear" color="dark" (click)="takePictureAndAttach($event)">
+            <ion-icon slot="icon-only" name="camera" />
+          </ion-button>
         }
-        buttons.push({ text: this._translate._('COMMON.CANCEL'), role: 'cancel' });
-        buttons.push({
-            text: this._translate._('COMMON.SELECT'),
-            handler: (m) => {
-                this.refDate.setMonth(parseInt(m, 10) - 1);
-                this.buildCalendarGrid(this.refDate);
-            }
-        });
-        const alert = await this._alert.create({
-            header: this._translate._('IDEA_UNCOMMON.CALENDAR.MONTH'),
-            buttons,
-            inputs
-        });
-        alert.present();
-    }
-    isDateSelectable(date) {
-        if (this.dateMin && date < this.dateMin)
-            return false;
-        if (this.dateMax && date > this.dateMax)
-            return false;
-        return true;
-    }
-    selectDate(date) {
-        this.selectedDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), this.hour, this.minute);
-    }
-    selectHour(hour) {
-        this.hour = Number(hour);
-        this.selectedDate.setHours(this.hour);
-    }
-    selectMinute(minute) {
-        this.minute = Number(minute);
-        this.selectedDate.setMinutes(this.minute);
-    }
-    isSameDay(a, b) {
-        return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
-    }
-    isSameMonth(a, b) {
-        return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
+      </ion-item>
     }
-    isSameHour(hour) {
-        return this.selectedDate.getHours() === Number(hour);
+  `, isInline: true, 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"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: 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: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { 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: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "pipe", type: IDEATranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: IDEAOldAttachmentsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'idea-old-attachments', imports: [FormsModule, IDEATranslatePipe, IonItem, IonButton, IonIcon, IonInput, IonLabel, IonSpinner], template: `
+    @for (att of attachments; track att; let index = $index; let odd = $odd) {
+      <ion-item
+        class="attachments"
+        [class.fieldHasError]="hasFieldAnError('attachments[' + index + '].attachmentId')"
+        [class.odd]="odd"
+        [lines]="lines"
+      >
+        @if (att.attachmentId && _offline.isOnline()) {
+          <ion-button fill="clear" size="small" slot="start" (click)="openAttachment(att)">
+            <ion-icon name="open-outline" slot="icon-only" size="small" />
+          </ion-button>
+        }
+        @if (!editMode && att.attachmentId) {
+          <ion-icon slot="start" color="medium" [name]="getFormatIcon(att.format)" [title]="att.format" />
+        }
+        @if (editMode && att.attachmentId) {
+          <ion-input
+            [(ngModel)]="att.name"
+            (ionBlur)="$event.target.value = $event.target.value || _translate._('IDEA_TEAMS.ATTACHMENTS.NO_NAME')"
+          />
+        }
+        @if (editMode && !att.attachmentId) {
+          <ion-label class="loadingWarning">
+            {{ 'IDEA_TEAMS.ATTACHMENTS.UPLOADING_ATTACHMENT_WARNING' | translate }}
+          </ion-label>
+        }
+        @if (!editMode) {
+          <ion-label>{{ att.name }}.{{ att.format }}</ion-label>
+        }
+        @if (!att.attachmentId) {
+          <ion-spinner slot="end" [title]="'IDEA_TEAMS.ATTACHMENTS.UPLOADING' | translate" />
+        }
+        @if (editMode) {
+          <ion-button
+            slot="end"
+            color="danger"
+            fill="clear"
+            [title]="'IDEA_TEAMS.ATTACHMENTS.REMOVE_ATTACHMENT' | translate"
+            (click)="removeAttachment(att)"
+          >
+            <ion-icon name="remove" slot="icon-only" />
+          </ion-button>
+        }
+      </ion-item>
     }
-    isSameMinute(minute) {
-        return this.selectedDate.getMinutes() === Number(minute);
+    <!----->
+    @if (!editMode && !attachments?.length) {
+      <ion-item lines="none" class="noAttachments">
+        <ion-label>
+          {{ 'IDEA_TEAMS.ATTACHMENTS.NO_ATTACHMENT' | translate }}
+        </ion-label>
+      </ion-item>
     }
-    save(reset) {
-        this._modal.dismiss(reset ? '' : this.selectedDate);
+    <!----->
+    @if (editMode) {
+      <div>
+        @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">
+              {{ err }}
+              <p>{{ 'IDEA_TEAMS.ATTACHMENTS.ERROR_UPLOADING_ATTACHMENT' | translate }}</p>
+            </ion-label>
+            <ion-button
+              slot="end"
+              color="danger"
+              fill="clear"
+              [title]="'IDEA_TEAMS.ATTACHMENTS.HIDE_ERROR' | translate"
+              (click)="uploadErrors.splice(uploadErrors.indexOf(err), 1)"
+            >
+              <ion-icon name="close" slot="icon-only" />
+            </ion-button>
+          </ion-item>
+        }
+      </div>
     }
-    close() {
-        this._modal.dismiss();
+    <!----->
+    @if (editMode) {
+      <ion-item lines="none" class="selectable" (click)="browseFiles()">
+        <ion-label color="medium">{{ 'IDEA_TEAMS.ATTACHMENTS.TAP_TO_ADD_ATTACHMENT' | translate }}</ion-label>
+        <input
+          id="attachmentPicker"
+          type="file"
+          multiple
+          style="display: none"
+          (change)="addAttachmentFromFile($event)"
+        />
+        @if (editMode) {
+          <ion-icon slot="end" name="caret-down" class="selectIcon" />
+        }
+        @if (editMode && isCapacitor()) {
+          <ion-button slot="end" fill="clear" color="dark" (click)="takePictureAndAttach($event)">
+            <ion-icon slot="icon-only" name="camera" />
+          </ion-button>
+        }
+      </ion-item>
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: IDEACalendarPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", 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" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: IDEACalendarPickerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'idea-calendar-picker', standalone: true, imports: [
-                        CommonModule,
-                        FormsModule,
-                        IDEATranslatePipe,
-                        IDEALocalizedDatePipe,
-                        IonFooter,
-                        IonInput,
-                        IonCol,
-                        IonRow,
-                        IonContent,
-                        IonGrid,
-                        IonIcon,
-                        IonButton,
-                        IonButtons,
-                        IonTitle,
-                        IonToolbar,
-                        IonHeader
-                    ], 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: [{
+  `, 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
-            }], timePicker: [{
+            }], pathResource: [{
                 type: Input
-            }], manualTimePicker: [{
+            }], attachments: [{
                 type: Input
-            }], title: [{
+            }], editMode: [{
                 type: Input
-            }], hideClearButton: [{
+            }], errors: [{
                 type: Input
-            }], min: [{
+            }], lines: [{
                 type: Input
-            }], max: [{
+            }] } });
+/**
+ * The possibile file types (formats).
+ */
+var FileFormatTypes;
+(function (FileFormatTypes) {
+    FileFormatTypes["JPG"] = "jpg";
+    FileFormatTypes["JPEG"] = "jpeg";
+    FileFormatTypes["PNG"] = "png";
+    FileFormatTypes["PDF"] = "pdf";
+    FileFormatTypes["HEIC"] = "heic";
+})(FileFormatTypes || (FileFormatTypes = {}));
+
+/**
+ * Announcement card that can be set in any interface to show the alert for this project.
+ */
+class IDEAAnnouncementComponent {
+    constructor() {
+        this._env = inject(IDEAEnvironment);
+        this._tc = inject(IDEATinCanService);
+        this._storage = inject(IDEAStorageService);
+        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
+        this.announcement = this._tc.get('idea-announcement');
+        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);
+        }
+    }
+    async markAsRead() {
+        await this._storage.set(this.storageKey, this.announcement.content);
+        this.htmlContent = null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: IDEAAnnouncementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: IDEAAnnouncementComponent, isStandalone: true, selector: "idea-announcement", inputs: { color: "color" }, ngImport: i0, template: `
+    @if (htmlContent) {
+      <ion-card class="announcementCard" [color]="color">
+        <ion-card-content>
+          <p class="htmlContent" [innerHTML]="htmlContent"></p>
+          <p class="ion-text-right">
+            <ion-button color="primary" (click)="markAsRead()">
+              {{ 'COMMON.GOT_IT' | translate }}
+            </ion-button>
+          </p>
+        </ion-card-content>
+      </ion-card>
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "pipe", type: IDEATranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: IDEAAnnouncementComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'idea-announcement',
+                    standalone: true,
+                    imports: [CommonModule, IDEATranslatePipe, IonButton, IonCardContent, IonCard],
+                    template: `
+    @if (htmlContent) {
+      <ion-card class="announcementCard" [color]="color">
+        <ion-card-content>
+          <p class="htmlContent" [innerHTML]="htmlContent"></p>
+          <p class="ion-text-right">
+            <ion-button color="primary" (click)="markAsRead()">
+              {{ 'COMMON.GOT_IT' | translate }}
+            </ion-button>
+          </p>
+        </ion-card-content>
+      </ion-card>
+    }
+  `
+                }]
+        }], ctorParameters: () => [], propDecorators: { color: [{
                 type: Input
             }] } });
 
-class IDEADateTimeComponent {
+/**
+ * Pick a color from a defined set.
+ */
+class IDEAColorPickerComponent {
     constructor() {
-        this._modal = inject(ModalController);
-        this._translate = inject(IDEATranslationsService);
-        /**
-         * Whether to show the time picker (datetime) or not (date).
-         */
-        this.timePicker = false;
-        /**
-         * Whether to show the MANUAL time picker (datetime) or not (date).
-         */
-        this.manualTimePicker = false;
-        /**
-         * Whether to use the `epochISOString` format instead of `epochDateTime`.
-         */
-        this.useISOFormat = false;
         /**
-         * If true, the component is disabled.
+         * The pickable colors.
          */
-        this.disabled = false;
+        this.colors = COLORS;
         /**
-         * If true, the obligatory dot is shown.
+         * On select event.
          */
-        this.obligatory = false;
+        this.select = new EventEmitter();
         /**
-         * If true, hidew the clear button in the header.
+         * Icon select.
          */
-        this.hideClearButton = false;
-        this.dateChange = new EventEmitter();
         this.iconSelect = new EventEmitter();
-        this.isOpening = false;
-    }
-    ngOnInit() {
-        this.langChangeSubscription = this._translate.onLangChange.subscribe(() => {
-            this.valueToDisplay = this.getValueToDisplay(this.date);
-        });
-    }
-    ngOnDestroy() {
-        if (this.langChangeSubscription)
-            this.langChangeSubscription.unsubscribe();
-    }
-    ngOnChanges(changes) {
-        if (changes.date || changes.timePicker)
-            this.valueToDisplay = this.getValueToDisplay(this.date);
+        this._popover = inject(PopoverController);
     }
-    async openCalendarPicker() {
-        if (this.disabled || this.isOpening)
+    async openPalette(event) {
+        if (this.disabled)
             return;
-        this.isOpening = true;
-        const modal = await this._modal.create({
-            component: IDEACalendarPickerComponent,
-            componentProps: {
-                inputDate: this.date,
-                title: this.label,
-                timePicker: this.timePicker,
-                manualTimePicker: this.manualTimePicker,
-                hideClearButton: this.hideClearButton,
-                min: this.min,
-                max: this.max
-            }
-        });
-        modal.onDidDismiss().then(({ data }) => {
-            if (data !== undefined && data !== null) {
-                if (data === '')
-                    this.doSelect(null);
-                else
-                    this.doSelect(data);
-            }
+        const componentProps = { colors: this.colors, current: this.current };
+        const popover = await this._popover.create({ component: ColorsPaletteComponent, componentProps, event });
+        popover.onDidDismiss().then(res => {
+            if (res && res.data)
+                this.select.emit(res.data);
         });
-        modal.present();
-        this.isOpening = false;
-    }
-    getValueToDisplay(date) {
-        return !date
-            ? ''
-            : this._translate.formatDate(date, this.timePicker || this.manualTimePicker ? 'd MMM yyyy, HH:mm' : 'mediumDate');
-    }
-    doSelect(date) {
-        this.dateChange.emit(date ? (this.useISOFormat ? date.toISOString() : date.valueOf()) : null);
+        popover.present();
     }
     doIconSelect(event) {
         if (event)
             event.stopPropagation();
-        this.iconSelect.emit();
+        this.iconSelect.emit(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: IDEADateTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: IDEADateTimeComponent, isStandalone: true, selector: "idea-date-time", inputs: { date: "date", timePicker: "timePicker", manualTimePicker: "manualTimePicker", useISOFormat: "useISOFormat", label: "label", icon: "icon", iconColor: "iconColor", lines: "lines", color: "color", placeholder: "placeholder", disabled: "disabled", obligatory: "obligatory", hideClearButton: "hideClearButton", min: "min", max: "max" }, outputs: { dateChange: "dateChange", iconSelect: "iconSelect" }, usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: IDEAColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: IDEAColorPickerComponent, isStandalone: true, selector: "idea-color-picker", inputs: { colors: "colors", current: "current", label: "label", placeholder: "placeholder", icon: "icon", iconColor: "iconColor", disabled: "disabled", obligatory: "obligatory", lines: "lines", color: "color" }, outputs: { select: "select", iconSelect: "iconSelect" }, ngImport: i0, template: `
     <ion-item
-      class="dateTimeItem"
+      class="colorPickerItem"
       [color]="color"
       [lines]="lines"
-      [title]="placeholder || label || ''"
       [button]="!disabled"
-      [disabled]="isOpening"
+      [title]="placeholder || ''"
       [class.withLabel]="label"
-      (click)="openCalendarPicker()"
+      (click)="openPalette($event)"
     >
       @if (icon) {
-        <ion-button
-          fill="clear"
-          slot="start"
-          [color]="iconColor"
-          [class.marginTop]="label"
-          (click)="doIconSelect($event)"
-        >
-          <ion-icon [icon]="icon" slot="icon-only" />
+        <ion-button fill="clear" slot="start" [color]="iconColor" (click)="doIconSelect($event)">
+          <ion-icon [name]="icon" slot="icon-only" />
         </ion-button>
       }
       @if (label) {
-        <ion-label position="stacked" [class.selectable]="!disabled">
+        <ion-label [class.selectable]="!disabled">
           {{ label }}
           @if (obligatory && !disabled) {
             <ion-text class="obligatoryDot" />
           }
         </ion-label>
-      }
-      <ion-label class="value" [class.selectable]="!disabled">
-        @if (!valueToDisplay && !disabled) {
-          <ion-text class="placeholder" [class.selectable]="!disabled">
-            {{ placeholder }}
-          </ion-text>
-        }
-        {{ valueToDisplay }}
-      </ion-label>
+      }
+      <ion-avatar slot="end" class="colorCircle" [style.background-color]="current" />
       @if (!disabled) {
-        <ion-icon slot="end" icon="caret-down" class="selectIcon" [class.selectable]="!disabled" />
+        <ion-icon slot="end" name="caret-down" class="selectIcon" [class.selectable]="!disabled" />
       }
     </ion-item>
-  `, isInline: true, styles: [".dateTimeItem{min-height:48px;height:auto}.dateTimeItem .description{margin:10px 0;height:20px;line-height:20px;width:100%}.dateTimeItem .placeholder{color:var(--ion-color-medium)}.dateTimeItem .value{white-space:nowrap}.dateTimeItem .selectIcon{margin:0;padding-left:4px;font-size:.8em;color:var(--ion-color-medium)}.dateTimeItem.withLabel{min-height:58px;height:auto}.dateTimeItem.withLabel .selectIcon{padding-top:25px}.dateTimeItem.withLabel ion-button[slot=start]{margin-top:16px}.selectable{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { 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: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }] }); }
+  `, isInline: true, styles: [".colorPickerItem{min-height:48px;height:auto}.colorPickerItem .placeholder{color:var(--ion-color-medium)}.colorPickerItem .selectIcon{margin:0;padding-left:4px;font-size:.8em;color:var(--ion-color-medium)}.selectItem.withLabel{min-height:58px;height:auto}.selectItem.withLabel .selectIcon{padding-top:25px}.selectItem.withLabel ion-button[slot=start]{margin-top:16px}.selectable{cursor:pointer}ion-avatar.colorCircle{width:20px;height:20px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonAvatar, selector: "ion-avatar" }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { 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: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: IDEADateTimeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: IDEAColorPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'idea-date-time', standalone: true, imports: [CommonModule, IonText, IonLabel, IonIcon, IonButton, IonItem], template: `
+            args: [{ selector: 'idea-color-picker', standalone: true, imports: [CommonModule, IonAvatar, IonText, IonLabel, IonIcon, IonButton, IonItem], template: `
     <ion-item
-      class="dateTimeItem"
+      class="colorPickerItem"
       [color]="color"
       [lines]="lines"
-      [title]="placeholder || label || ''"
       [button]="!disabled"
-      [disabled]="isOpening"
+      [title]="placeholder || ''"
       [class.withLabel]="label"
-      (click)="openCalendarPicker()"
+      (click)="openPalette($event)"
     >
       @if (icon) {
-        <ion-button
-          fill="clear"
-          slot="start"
-          [color]="iconColor"
-          [class.marginTop]="label"
-          (click)="doIconSelect($event)"
-        >
-          <ion-icon [icon]="icon" slot="icon-only" />
+        <ion-button fill="clear" slot="start" [color]="iconColor" (click)="doIconSelect($event)">
+          <ion-icon [name]="icon" slot="icon-only" />
         </ion-button>
       }
       @if (label) {
-        <ion-label position="stacked" [class.selectable]="!disabled">
+        <ion-label [class.selectable]="!disabled">
           {{ label }}
           @if (obligatory && !disabled) {
             <ion-text class="obligatoryDot" />
           }
         </ion-label>
       }
-      <ion-label class="value" [class.selectable]="!disabled">
-        @if (!valueToDisplay && !disabled) {
-          <ion-text class="placeholder" [class.selectable]="!disabled">
-            {{ placeholder }}
-          </ion-text>
-        }
-        {{ valueToDisplay }}
-      </ion-label>
+      <ion-avatar slot="end" class="colorCircle" [style.background-color]="current" />
       @if (!disabled) {
-        <ion-icon slot="end" icon="caret-down" class="selectIcon" [class.selectable]="!disabled" />
+        <ion-icon slot="end" name="caret-down" class="selectIcon" [class.selectable]="!disabled" />
       }
     </ion-item>
-  `, styles: [".dateTimeItem{min-height:48px;height:auto}.dateTimeItem .description{margin:10px 0;height:20px;line-height:20px;width:100%}.dateTimeItem .placeholder{color:var(--ion-color-medium)}.dateTimeItem .value{white-space:nowrap}.dateTimeItem .selectIcon{margin:0;padding-left:4px;font-size:.8em;color:var(--ion-color-medium)}.dateTimeItem.withLabel{min-height:58px;height:auto}.dateTimeItem.withLabel .selectIcon{padding-top:25px}.dateTimeItem.withLabel ion-button[slot=start]{margin-top:16px}.selectable{cursor:pointer}\n"] }]
-        }], propDecorators: { date: [{
-                type: Input
-            }], timePicker: [{
-                type: Input
-            }], manualTimePicker: [{
+  `, styles: [".colorPickerItem{min-height:48px;height:auto}.colorPickerItem .placeholder{color:var(--ion-color-medium)}.colorPickerItem .selectIcon{margin:0;padding-left:4px;font-size:.8em;color:var(--ion-color-medium)}.selectItem.withLabel{min-height:58px;height:auto}.selectItem.withLabel .selectIcon{padding-top:25px}.selectItem.withLabel ion-button[slot=start]{margin-top:16px}.selectable{cursor:pointer}ion-avatar.colorCircle{width:20px;height:20px}\n"] }]
+        }], propDecorators: { colors: [{
                 type: Input
-            }], useISOFormat: [{
+            }], current: [{
                 type: Input
             }], label: [{
                 type: Input
+            }], placeholder: [{
+                type: Input
             }], icon: [{
                 type: Input
             }], iconColor: [{
                 type: Input
-            }], lines: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
             }], disabled: [{
                 type: Input
             }], obligatory: [{
                 type: Input
-            }], hideClearButton: [{
-                type: Input
-            }], min: [{
+            }], lines: [{
                 type: Input
-            }], max: [{
+            }], color: [{
                 type: Input
-            }], dateChange: [{
+            }], select: [{
                 type: Output
             }], iconSelect: [{
                 type: Output
             }] } });
+/**
+ * Component to open in a popover for displaying the colors available.
+ */
+class ColorsPaletteComponent {
+    constructor() {
+        this._popover = inject(PopoverController);
+    }
+    pick(color) {
+        this._popover.dismiss(color);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ColorsPaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: ColorsPaletteComponent, isStandalone: true, selector: "idea-colors-palette", inputs: { colors: "colors", current: "current" }, ngImport: i0, template: `
+    <ion-content>
+      <ion-grid>
+        <ion-row>
+          @for (c of colors; track c) {
+            <ion-col [size]="2">
+              <ion-avatar
+                class="colorCircle tappable"
+                [style.background-color]="c.hex"
+                [title]="c.name || c.hex"
+                (click)="pick(c.hex)"
+              >
+                @if (c.hex === current) {
+                  <ion-icon name="checkmark" />
+                }
+              </ion-avatar>
+            </ion-col>
+          }
+        </ion-row>
+      </ion-grid>
+    </ion-content>
+  `, isInline: true, styles: ["ion-content{--background: var(--ion-color-white)}ion-avatar.colorCircle{width:20px;height:20px}.tappable{cursor:pointer}ion-avatar.colorCircle ion-icon{color:#fff;font-size:1.2em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: IonRow, selector: "ion-row" }, { 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: IonAvatar, selector: "ion-avatar" }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ColorsPaletteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'idea-colors-palette', standalone: true, imports: [CommonModule, IonContent, IonGrid, IonRow, IonCol, IonAvatar, IonIcon], template: `
+    <ion-content>
+      <ion-grid>
+        <ion-row>
+          @for (c of colors; track c) {
+            <ion-col [size]="2">
+              <ion-avatar
+                class="colorCircle tappable"
+                [style.background-color]="c.hex"
+                [title]="c.name || c.hex"
+                (click)="pick(c.hex)"
+              >
+                @if (c.hex === current) {
+                  <ion-icon name="checkmark" />
+                }
+              </ion-avatar>
+            </ion-col>
+          }
+        </ion-row>
+      </ion-grid>
+    </ion-content>
+  `, styles: ["ion-content{--background: var(--ion-color-white)}ion-avatar.colorCircle{width:20px;height:20px}.tappable{cursor:pointer}ion-avatar.colorCircle ion-icon{color:#fff;font-size:1.2em}\n"] }]
+        }], propDecorators: { colors: [{
+                type: Input
+            }], current: [{
+                type: Input
+            }] } });
 
-class IDEADurationComponent {
+class IDEAContactsComponent {
     constructor() {
+        this._alert = inject(AlertController);
+        this._translate = inject(IDEATranslationsService);
         /**
-         * On change event. It emits a number of seconds representing the duration.
+         * The contacts to manage.
          */
-        this.set = new EventEmitter();
-        this.default = this.hours = this.minutes = this.seconds = 0;
+        this.contacts = new Contacts();
+        /**
+         * If true, show the field `name`.
+         */
+        this.showName = false;
+        /**
+         * Whether the fields are editable or disabled.
+         */
+        this.editMode = true;
     }
-    ngOnChanges(changes) {
-        // assign a default value to the duration
-        if (changes['default'] && changes['default'].isFirstChange()) {
-            const refDate = new Date(0);
-            refDate.setHours(0, 0, 0);
-            refDate.setSeconds(refDate.getSeconds() + this.default);
-            this.hours = refDate.getHours();
-            this.minutes = refDate.getMinutes();
-            this.seconds = this.hideSeconds ? 0 : refDate.getSeconds();
-        }
+    sendEmail() {
+        if (!this.contacts.email)
+            return;
+        const url = `mailto:${this.contacts.email}`;
+        this.preExternalAction(this.contacts.email, () => window.open(url, '_system'));
     }
-    /**
-     * When one of the parts changes, emit the new duration.
-     */
-    setDuration(type) {
-        switch (type) {
-            case 'hours':
-                const hh = Number(this.hours) || 0;
-                this.hours = hh > 23 ? 23 : hh < 0 ? 0 : hh;
-                break;
-            case 'minutes':
-                const mm = Number(this.minutes) || 0;
-                this.minutes = mm > 59 ? 59 : mm < 0 ? 0 : mm;
-                break;
-            case 'seconds':
-                const ss = Number(this.seconds) || 0;
-                if (this.hideSeconds)
-                    this.seconds = 0;
-                else
-                    this.seconds = ss > 59 ? 59 : ss < 0 ? 0 : ss;
-                break;
-        }
-        this.set.emit(this.hours * 3600 + this.minutes * 60 + this.seconds);
+    call() {
+        if (!this.contacts.phone)
+            return;
+        const url = `tel:${this.contacts.phone}`;
+        this.preExternalAction(this.contacts.phone, () => window.open(url, '_system'));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: IDEADurationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: IDEADurationComponent, isStandalone: true, selector: "idea-duration", inputs: { default: "default", label: "label", icon: "icon", title: "title", disabled: "disabled", obligatory: "obligatory", lines: "lines", color: "color", hideSeconds: "hideSeconds", shortLabels: "shortLabels" }, outputs: { set: "set" }, usesOnChanges: true, ngImport: i0, template: `
-    <ion-item class="durationItem" [lines]="lines" [color]="color" [title]="title || label">
-      @if (icon) {
-        <ion-icon slot="start" [name]="icon" />
-      }
-      @if (!icon && label) {
-        <ion-label position="stacked">
-          {{ label }}
-          @if (obligatory && !disabled) {
-            <ion-text class="obligatoryDot" />
-          }
-        </ion-label>
-      }
-      <ion-label class="value">
-        <ion-input
-          type="number"
-          min="0"
-          max="23"
-          inputmode="numeric"
-          [disabled]="disabled"
-          [(ngModel)]="hours"
-          (ionChange)="setDuration('hours')"
-        />
-        <ion-text>{{
-          ((shortLabels ? 'IDEA_UNCOMMON.DURATION.HH' : 'IDEA_UNCOMMON.DURATION.HOURS') | translate).toLowerCase()
-        }}</ion-text>
-        <ion-input
-          type="number"
-          min="0"
-          max="59"
-          inputmode="numeric"
-          [disabled]="disabled"
-          [(ngModel)]="minutes"
-          (ionChange)="setDuration('minutes')"
-        />
-        <ion-text>{{
-          ((shortLabels ? 'IDEA_UNCOMMON.DURATION.MM' : 'IDEA_UNCOMMON.DURATION.MINUTES') | translate).toLowerCase()
-        }}</ion-text>
-        @if (!hideSeconds) {
+    preExternalAction(message, cb) {
+        const header = this._translate._('COMMON.DO_YOU_WANT_TO_PROCEED');
+        const buttons = [
+            { text: this._translate._('COMMON.CANCEL') },
+            { text: this._translate._('COMMON.CONFIRM'), handler: () => cb() }
+        ];
+        const cssClass = 'selectableAlertMessage';
+        this._alert.create({ header, message, buttons, cssClass }).then(alert => alert.present());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: IDEAContactsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: IDEAContactsComponent, isStandalone: true, selector: "idea-contacts", inputs: { contacts: "contacts", showName: "showName", editMode: "editMode", lines: "lines", color: "color" }, ngImport: i0, template: `
+    <div class="contacts">
+      @if (showName) {
+        <ion-item [lines]="lines" [color]="color">
           <ion-input
-            type="number"
-            min="0"
-            max="59"
-            inputmode="numeric"
-            [disabled]="disabled"
-            [(ngModel)]="seconds"
-            (ionChange)="setDuration('seconds')"
+            autocomplete="new"
+            labelPlacement="stacked"
+            [label]="'IDEA_UNCOMMON.CONTACTS.NAME' | translate"
+            [disabled]="!editMode"
+            [placeholder]="'IDEA_UNCOMMON.CONTACTS.NAME_HINT' | translate"
+            [title]="'IDEA_UNCOMMON.CONTACTS.NAME_HINT' | translate"
+            [(ngModel)]="contacts.name"
           />
+        </ion-item>
+      }
+      <ion-item [lines]="lines" [color]="color">
+        <ion-input
+          autocomplete="new"
+          labelPlacement="stacked"
+          [label]="'IDEA_UNCOMMON.CONTACTS.PHONE' | translate"
+          [disabled]="!editMode"
+          [placeholder]="'IDEA_UNCOMMON.CONTACTS.PHONE_HINT' | translate"
+          [title]="'IDEA_UNCOMMON.CONTACTS.PHONE_HINT' | translate"
+          [(ngModel)]="contacts.phone"
+        />
+        @if (!editMode) {
+          <ion-button
+            slot="end"
+            fill="clear"
+            color="dark"
+            class="marginTop"
+            [title]="'IDEA_UNCOMMON.CONTACTS.CALL' | translate"
+            (click)="call()"
+          >
+            <ion-icon name="call" slot="icon-only" />
+          </ion-button>
         }
-        @if (!hideSeconds) {
-          <ion-text>
-            {{
-              ((shortLabels ? 'IDEA_UNCOMMON.DURATION.SS' : 'IDEA_UNCOMMON.DURATION.SECONDS') | translate).toLowerCase()
-            }}
-          </ion-text>
+      </ion-item>
+      <ion-item [lines]="lines" [color]="color">
+        <ion-input
+          autocomplete="new"
+          labelPlacement="stacked"
+          [label]="'IDEA_UNCOMMON.CONTACTS.EMAIL' | translate"
+          [disabled]="!editMode"
+          [placeholder]="'IDEA_UNCOMMON.CONTACTS.EMAIL_HINT' | translate"
+          [title]="'IDEA_UNCOMMON.CONTACTS.EMAIL_HINT' | translate"
+          [(ngModel)]="contacts.email"
+        />
+        @if (!editMode) {
+          <ion-button
+            slot="end"
+            fill="clear"
+            color="dark"
+            class="marginTop"
+            [title]="'IDEA_UNCOMMON.CONTACTS.SEND_EMAIL' | translate"
+            (click)="sendEmail()"
+          >
+            <ion-icon name="mail" slot="icon-only" />
+          </ion-button>
         }
-      </ion-label>
-    </ion-item>
-  `, isInline: true, styles: [".durationItem .value{max-width:none;width:100%;pointer-events:all}.durationItem .value ion-input{display:inline-block;max-width:35px;text-align:right}.durationItem .value ion-text{margin-left:10px;margin-right:20px;font-size:.8em}\n"], dependencies: [{ kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: IDEATranslatePipe, name: "translate" }] }); }
+      </ion-item>
+    </div>
+  `, isInline: true, styles: [".marginTop{margin-top:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: 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: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "pipe", type: IDEATranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: IDEADurationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: IDEAContactsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'idea-duration', standalone: true, imports: [IonText, IonLabel, IonIcon, IonItem, CommonModule, FormsModule, IDEATranslatePipe], template: `
-    <ion-item class="durationItem" [lines]="lines" [color]="color" [title]="title || label">
-      @if (icon) {
-        <ion-icon slot="start" [name]="icon" />
-      }
-      @if (!icon && label) {
-        <ion-label position="stacked">
-          {{ label }}
-          @if (obligatory && !disabled) {
-            <ion-text class="obligatoryDot" />
-          }
-        </ion-label>
+            args: [{ selector: 'idea-contacts', standalone: true, imports: [CommonModule, FormsModule, IDEATranslatePipe, IonInput, IonIcon, IonButton, IonItem], template: `
+    <div class="contacts">
+      @if (showName) {
+        <ion-item [lines]="lines" [color]="color">
+          <ion-input
+            autocomplete="new"
+            labelPlacement="stacked"
+            [label]="'IDEA_UNCOMMON.CONTACTS.NAME' | translate"
+            [disabled]="!editMode"
+            [placeholder]="'IDEA_UNCOMMON.CONTACTS.NAME_HINT' | translate"
+            [title]="'IDEA_UNCOMMON.CONTACTS.NAME_HINT' | translate"
+            [(ngModel)]="contacts.name"
+          />
+        </ion-item>
       }
-      <ion-label class="value">
+      <ion-item [lines]="lines" [color]="color">
         <ion-input
-          type="number"
-          min="0"
-          max="23"
-          inputmode="numeric"
-          [disabled]="disabled"
-          [(ngModel)]="hours"
-          (ionChange)="setDuration('hours')"
+          autocomplete="new"
+          labelPlacement="stacked"
+          [label]="'IDEA_UNCOMMON.CONTACTS.PHONE' | translate"
+          [disabled]="!editMode"
+          [placeholder]="'IDEA_UNCOMMON.CONTACTS.PHONE_HINT' | translate"
+          [title]="'IDEA_UNCOMMON.CONTACTS.PHONE_HINT' | translate"
+          [(ngModel)]="contacts.phone"
         />
-        <ion-text>{{
-          ((shortLabels ? 'IDEA_UNCOMMON.DURATION.HH' : 'IDEA_UNCOMMON.DURATION.HOURS') | translate).toLowerCase()
-        }}</ion-text>
+        @if (!editMode) {
+          <ion-button
+            slot="end"
+            fill="clear"
+            color="dark"
+            class="marginTop"
+            [title]="'IDEA_UNCOMMON.CONTACTS.CALL' | translate"
+            (click)="call()"
+          >
+            <ion-icon name="call" slot="icon-only" />
+          </ion-button>
+        }
+      </ion-item>
+      <ion-item [lines]="lines" [color]="color">
         <ion-input
-          type="number"
-          min="0"
-          max="59"
-          inputmode="numeric"
-          [disabled]="disabled"
-          [(ngModel)]="minutes"
-          (ionChange)="setDuration('minutes')"
+          autocomplete="new"
+          labelPlacement="stacked"
+          [label]="'IDEA_UNCOMMON.CONTACTS.EMAIL' | translate"
+          [disabled]="!editMode"
+          [placeholder]="'IDEA_UNCOMMON.CONTACTS.EMAIL_HINT' | translate"
+          [title]="'IDEA_UNCOMMON.CONTACTS.EMAIL_HINT' | translate"
+          [(ngModel)]="contacts.email"
         />
-        <ion-text>{{
-          ((shortLabels ? 'IDEA_UNCOMMON.DURATION.MM' : 'IDEA_UNCOMMON.DURATION.MINUTES') | translate).toLowerCase()
-        }}</ion-text>
-        @if (!hideSeconds) {
-          <ion-input
-            type="number"
-            min="0"
-            max="59"
-            inputmode="numeric"
-            [disabled]="disabled"
-            [(ngModel)]="seconds"
-            (ionChange)="setDuration('seconds')"
-          />
-        }
-        @if (!hideSeconds) {
-          <ion-text>
-            {{
-              ((shortLabels ? 'IDEA_UNCOMMON.DURATION.SS' : 'IDEA_UNCOMMON.DURATION.SECONDS') | translate).toLowerCase()
-            }}
-          </ion-text>
+        @if (!editMode) {
+          <ion-button
+            slot="end"
+            fill="clear"
+            color="dark"
+            class="marginTop"
+            [title]="'IDEA_UNCOMMON.CONTACTS.SEND_EMAIL' | translate"
+            (click)="sendEmail()"
+          >
+            <ion-icon name="mail" slot="icon-only" />
+          </ion-button>
         }
-      </ion-label>
-    </ion-item>
-  `, styles: [".durationItem .value{max-width:none;width:100%;pointer-events:all}.durationItem .value ion-input{display:inline-block;max-width:35px;text-align:right}.durationItem .value ion-text{margin-left:10px;margin-right:20px;font-size:.8em}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { default: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], obligatory: [{
-                type: Input
-            }], lines: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], hideSeconds: [{
+      </ion-item>
+    </div>
+  `, styles: [".marginTop{margin-top:14px}\n"] }]
+        }], propDecorators: { contacts: [{
                 type: Input
-            }], shortLabels: [{
+            }], showName: [{
                 type: Input
-            }], set: [{
-                type: Output
-            }] } });
-
-class IDEAErrorReportingService {
-    constructor() {
-        this._env = inject(IDEAEnvironment);
-        this._http = inject(HttpClient);
-        this._platform = inject(Platform);
-        this.apiStage = this._env.idea.ideaApi?.stage || this._env.idea.ideaApi?.version;
-        this.apiUrl = 'https://'.concat([this._env.idea.ideaApi?.url, this.apiStage].filter(x => x).join('/'));
-    }
-    /**
-     * Send the error report to the back-end.
-     */
-    sendReport(error, forceSend) {
-        return new Promise(resolve => {
-            // skip in case we don't want to send the report or the report is useless (blank error)
-            if ((!this.shouldSend() && !forceSend) || !error?.name)
-                return resolve();
-            // prepare and send the report
-            const report = new ErrorReport({
-                version: this._env.idea.app.version,
-                stage: this.apiStage,
-                client: this.getClientInfo(),
-                type: error.name,
-                error: error.message,
-                stack: error.stack
-            });
-            this._http
-                .post(this.apiUrl.concat(`/projects/${this._env.idea.project}/errorReporting`), report)
-                .toPromise()
-                .catch(() => { }) // note: never throw an error when reporting an error
-                .finally(() => resolve());
-        });
-    }
-    /**
-     * Whether we should send the reporting or we are in a scenario in which we should skip it.
-     */
-    shouldSend() {
-        return this.apiStage === 'prod';
-    }
-    /**
-     * Acquire the client's info.
-     */
-    getClientInfo() {
-        return new ClientInfo({
-            timestamp: new Date().toISOString(),
-            platform: this._platform.platforms().join(' '),
-            screenWidth: this._platform.width(),
-            screenHeight: this._platform.height(),
-            isLandScape: this._platform.isLandscape(),
-            url: this._platform.url(),
-            referrer: document.referrer,
-            isOnline: navigator.onLine,
-            language: navigator.language,
-            userAgent: navigator.userAgent
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: IDEAErrorReportingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: IDEAErrorReportingService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: IDEAErrorReportingService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [] });
+            }], editMode: [{
+                type: Input
+            }], lines: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }] } });
 
 /**
- * Utility to monitor the network connection.
- * Note: don't use it directly, if you're also using IDEAOfflineDataService.
+ * A random sunday, used as reference to calculate the week days.
  */
-class IDEAOfflineService {
+const SUNDAY = 259200000;
+class IDEACalendarPickerComponent {
     constructor() {
-        // get an instant status
-        this._isOffline = !navigator.onLine;
-        if (Network) {
-            // set the basic listener for changes
-            this.listenerHandler = Network.addListener('networkStatusChange', status => (this._isOffline = !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;
-                    if (observer)
-                        observer.next(status.connected);
-                });
-            });
+        this._modal = inject(ModalController);
+        this._alert = inject(AlertController);
+        this._translate = inject(IDEATranslationsService);
+        this.timePicker = false;
+        this.manualTimePicker = false;
+        this.hideClearButton = false;
+    }
+    ngOnInit() {
+        this.today = new Date();
+        this.refDate = this.inputDate ? new Date(this.inputDate) : new Date(this.today);
+        this.selectedDate = new Date(this.refDate);
+        this.hour = 12; // to endure timezones
+        this.minute = 0;
+        if (this.timePicker || this.manualTimePicker) {
+            this.hour = this.selectedDate.getHours();
+            if (this.manualTimePicker)
+                this.minute = this.selectedDate.getMinutes();
+            else {
+                // round the minutes a multiple of 5
+                this.minute = Math.ceil(this.selectedDate.getMinutes() / 5) * 5;
+                this.selectedDate.setMinutes(this.minute);
+            }
+        }
+        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
+        this.weekDays = new Array();
+        const refDateForWeekDays = new Date(SUNDAY);
+        refDateForWeekDays.setDate(refDateForWeekDays.getDate() - this.getLocalisedDay(refDateForWeekDays));
+        for (let i = 0; i < 7; i++) {
+            this.weekDays.push(refDateForWeekDays.toLocaleDateString(this._translate.getCurrentLang(), { weekday: 'short' }));
+            refDateForWeekDays.setDate(refDateForWeekDays.getDate() + 1);
         }
+        if (this.min)
+            this.dateMin = new Date(this.min);
+        if (this.max)
+            this.dateMax = new Date(this.max);
     }
-    /**
-     * Subscribe to be notified when the connection status changes.
-     */
-    subscribe(callback) {
-        return this.observable.subscribe(callback);
+    getLocalisedDay(date) {
+        let n = date.getDay();
+        switch (this._translate.getCurrentLang()) {
+            case 'it':
+                n = --n < 0 ? 6 : n;
+                break;
+        }
+        return n;
     }
-    /**
-     * Quickly check the connection status.
-     */
-    isOnline() {
-        return !this._isOffline;
+    buildCalendarGrid(refDate) {
+        // find the first day in the month: the important data here is the day of the week
+        const firstDateOfMonth = new Date(refDate.getFullYear(), refDate.getMonth(), 1);
+        // the following flag is used to divide the logic so I can fill the calendar
+        // also with the dates from the previous month, until there's space in the grid
+        let haventFoundFirstDay = true;
+        // index used to build the dates of the month, starting from the first one
+        let index = 1;
+        this.calendarGrid = new Array();
+        for (let i = 0; i < 6; i++) {
+            this.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);
+                        // 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;
+                        }
+                    }
+                }
+                else {
+                    // 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;
+                }
+            }
+        }
     }
-    /**
-     * Quickly check the connection status.
-     */
-    isOffline() {
-        return this._isOffline;
+    addYears(offset) {
+        this.refDate.setFullYear(this.refDate.getFullYear() + offset);
+        this.buildCalendarGrid(this.refDate);
     }
-    /**
-     * Quickly check for online connection.
-     */
-    async check() {
-        if (!Network)
-            return false;
-        const status = await Network.getStatus();
-        this._isOffline = !status.connected;
-        return status.connected;
+    setYear(year) {
+        if (!year)
+            return;
+        this.refDate.setFullYear(Number(year));
+        this.buildCalendarGrid(this.refDate);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: IDEAOfflineService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: IDEAOfflineService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: IDEAOfflineService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [] });
-
-/**
- * To communicate with an AWS's API Gateway istance.
- *
- * Includes a rundimental cache on GET requests, until Android doesn't support SWs on local files.
- *
- * Note: requires an `AWSAPIAuthToken` variable to be set by IDEATinCanService service.
- */
-class IDEAAWSAPIService {
-    constructor() {
-        this._env = inject(IDEAEnvironment);
-        this._http = inject(HttpClient);
-        this._platform = inject(Platform);
-        this._tc = inject(IDEATinCanService);
-        this._storage = inject(IDEAStorageService);
-        this._errorReporting = inject(IDEAErrorReportingService);
-        this._offline = inject(IDEAOfflineService);
-        this.apiStage = this._env.idea.api?.stage || this._env.idea.api?.version;
-        this.apiUrlProject = 'https://'.concat([this._env.idea.api?.url, this.apiStage].filter(x => x).join('/'));
-        this.ideaApiStage = this._env.idea.ideaApi?.stage || this._env.idea.ideaApi?.version;
-        this.apiUrlIDEA = 'https://'.concat([this._env.idea.ideaApi?.url, this.ideaApiStage].filter(x => x).join('/'));
+    addMonths(offset) {
+        this.refDate.setMonth(this.refDate.getMonth() + offset);
+        this.buildCalendarGrid(this.refDate);
     }
-    /**
-     * Execute an online API request.
-     * @param resource resource name (e.g. `users`)
-     * @param method enum HTTP methods
-     * @param options the request options
-     */
-    request(resource, method, options) {
-        return new Promise((resolve, reject) => {
-            const opt = options || {};
-            // prepare the url
-            const url = this.prepareURL(resource, opt);
-            // prepare the headers and set the Authorization token
-            const headers = this.prepareHeaders(opt.headers);
-            // prepare the query params and add some info about the client
-            const params = this.prepareQueryParams(opt.params, true);
-            // execute the request
-            let req;
-            switch (method) {
-                case 'HEAD':
-                    req = this._http.head(url, { headers, params });
-                    break;
-                case 'POST':
-                    req = this._http.post(url, opt.body, { headers, params });
-                    break;
-                case 'PUT':
-                    req = this._http.put(url, opt.body, { headers, params });
-                    break;
-                case 'PATCH':
-                    req = this._http.patch(url, opt.body, { headers, params });
-                    break;
-                case 'DELETE':
-                    req = this._http.delete(url, { headers, params });
-                    break;
-                case 'GET':
-                default:
-                    req = this._http.get(url, { headers, params });
-            }
-            // handle the request response
-            req.subscribe((res) => resolve(res), async (err) => {
-                // check if the request failed for network reasons (to trigger offline mode if needed)
-                await this._offline.check();
-                // (async) send a report, if wanted
-                if (opt.reportError)
-                    this._errorReporting.sendReport(err);
-                // fix and return the error
-                this.fixErrMessageBeforeReject(err, reject);
+    async showMonths() {
+        const buttons = [];
+        const inputs = [];
+        const month = new Date(0);
+        for (let i = 1; i <= 12; i++) {
+            inputs.push({
+                type: 'radio',
+                label: month.toLocaleDateString(this._translate.getCurrentLang(), { month: 'long' }),
+                value: i.toString(),
+                checked: i === this.refDate.getMonth() + 1
             });
+            month.setMonth(month.getMonth() + 1);
+        }
+        buttons.push({ text: this._translate._('COMMON.CANCEL'), role: 'cancel' });
+        buttons.push({
+            text: this._translate._('COMMON.SELECT'),
+            handler: (m) => {
+                this.refDate.setMonth(parseInt(m, 10) - 1);
+                this.buildCalendarGrid(this.refDate);
+            }
+        });
+        const alert = await this._alert.create({
+            header: this._translate._('IDEA_UNCOMMON.CALENDAR.MONTH'),
+            buttons,
+            inputs
         });
+        alert.present();
+    }
+    isDateSelectable(date) {
+        if (this.dateMin && date < this.dateMin)
+            return false;
+        if (this.dateMax && date > this.dateMax)
+            return false;
+        return true;
+    }
+    selectDate(date) {
+        this.selectedDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), this.hour, this.minute);
+    }
+    selectHour(hour) {
+        this.hour = Number(hour);
+        this.selectedDate.setHours(this.hour);
+    }
+    selectMinute(minute) {
+        this.minute = Number(minute);
+        this.selectedDate.setMinutes(this.minute);
     }
-    /**
-     * Prepare the URL to which execute the request.
-     */
-    prepareURL(resource, opt) {
-        // decide whether to use IDEA's API or the project's API (or an alternative API)
-        let url = opt.idea ? this.apiUrlIDEA : opt.alternativeAPI || this.apiUrlProject;
-        // prepare a single-resource request (by id) or a normal one
-        url = `${url}/${resource}`;
-        if (opt.resourceId)
-            url = `${url}/${encodeURIComponent(opt.resourceId)}`;
-        return url;
+    isSameDay(a, b) {
+        return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
     }
-    /**
-     * Prepare the headers object to send with a request.
-     * Note: it always adds the Authorization token (`AWSAPIAuthToken`) and the API key (`AWSAPIKey`), if set.
-     */
-    prepareHeaders(h) {
-        // preare the headers; note: HttpHeaders is immutable!
-        let headers = new HttpHeaders(h || null);
-        // set the Authorization token
-        if (!headers.get('Authorization') && this._tc.get('AWSAPIAuthToken'))
-            headers = headers.set('Authorization', this._tc.get('AWSAPIAuthToken'));
-        // set the API key
-        if (!headers.get('X-API-Key') && this._tc.get('AWSAPIKey'))
-            headers = headers.set('X-API-Key', this._tc.get('AWSAPIKey'));
-        return headers;
+    isSameMonth(a, b) {
+        return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
     }
-    /**
-     * Prepare the queryParams object to send with a request; if requested, add some info about the client.
-     */
-    prepareQueryParams(qp, addClientInfo) {
-        // prepare the query params; note: HttpParams is immutable!
-        let searchParams = new HttpParams();
-        if (qp && qp instanceof HttpParams)
-            searchParams = qp;
-        else if (qp)
-            for (const prop in qp)
-                if (qp[prop])
-                    searchParams = searchParams.set(prop, qp[prop]);
-        // if requested, add app version and client platform to the info we send to the back-end
-        if (addClientInfo) {
-            searchParams = searchParams.set('_v', this._env.idea.app.version);
-            searchParams = searchParams.set('_p', this._platform.platforms().join(' '));
-        }
-        return searchParams;
+    isSameHour(hour) {
+        return this.selectedDate.getHours() === Number(hour);
     }
-    /**
-     * Converts the error message to be readable.
-     */
-    fixErrMessageBeforeReject(err, reject) {
-        let e;
-        try {
-            if (!err || !err.error)
-                e = {};
-            else if (typeof err.error === 'string')
-                e = JSON.parse(err.error);
-            else
-                e = err.error;
-        }
-        catch (_) {
-            e = {};
-        }
-        reject(new Error(e.message || 'Unknown error!'));
+    isSameMinute(minute) {
+        return this.selectedDate.getMinutes() === Number(minute);
     }
-    /**
-     * Use the HttpClient to execute a raw request.
-     */
-    rawRequest() {
-        return this._http;
+    save(reset) {
+        this._modal.dismiss(reset ? '' : this.selectedDate);
     }
-    /**
-     * HEAD request.
-     * @param resource resource name (e.g. `users`)
-     * @param options the request options
-     */
-    headResource(resource, options) {
-        return this.request(resource, 'HEAD', options);
+    close() {
+        this._modal.dismiss();
     }
-    /**
-     * GET request. Include options to cache the requests (`options.useCache`), to work also offline.
-     * @param resource resource name (e.g. `users`)
-     * @param options the request options
-     */
-    getResource(resource, options) {
-        return new Promise((resolve, reject) => {
-            const opt = options || {};
-            // if offline and with a cache mode set, force the request to the cache
-            if (!navigator.onLine && opt.useCache)
-                opt.useCache = CacheModes.CACHE_ONLY;
-            // execute the GET request online or through the cache, depending on the chosen mode
-            switch (opt.useCache) {
-                case CacheModes.CACHE_ONLY:
-                    // return the result from the cache, without retrying online if a result wasn't found
-                    this.getFromCache(resource, opt).then((res) => {
-                        if (res)
-                            resolve(res);
-                        else
-                            reject();
-                    });
-                    break;
-                case CacheModes.CACHE_FIRST:
-                    // return the result from the cache
-                    this.getFromCache(resource, opt).then((localRes) => {
-                        // check whether the local resource is present (element or list)
-                        if (localRes && (opt.resourceId || localRes.length)) {
-                            resolve(localRes);
-                            // asynchrounously execute the request online, to update the cache with latest data
-                            this.request(resource, 'GET', opt)
-                                .then((cloudRes) => {
-                                // update the cache (if it fails, it's ok)
-                                this.putInCache(resource, cloudRes, opt).catch(() => { });
-                            })
-                                .catch(() => { }); // we already returned the result, an error is acceptable
-                        }
-                        else {
-                            // if the result isn't found in the cache, return the result of the online request
-                            this.request(resource, 'GET', opt)
-                                .then((res) => {
-                                resolve(res);
-                                // update the cache (if it fails, it's ok)
-                                this.putInCache(resource, res, opt).catch(() => { });
-                            })
-                                .catch((err) => reject(err)); // element not found
-                        }
-                    });
-                    break;
-                case CacheModes.NETWORK_FIRST:
-                    // return the result from an online request
-                    this.request(resource, 'GET', opt)
-                        .then((cloudRes) => {
-                        resolve(cloudRes);
-                        // asynchrounously get the same element from cache and decide whether to update or not
-                        this.getFromCache(resource, opt).then(() => {
-                            // update the cache (if it fails, it's ok)
-                            this.putInCache(resource, cloudRes, opt).catch(() => { });
-                        });
-                    })
-                        .catch(() => {
-                        // if a request to the network fails, check in cache
-                        this.getFromCache(resource, opt).then((res) => {
-                            if (res)
-                                resolve(res);
-                            else
-                                reject();
-                        });
-                    });
-                    break;
-                default:
-                    /* CacheModes.NO_CACHE */
-                    // return the result from an online request, with no cache involved
-                    this.request(resource, 'GET', opt)
-                        .then((res) => resolve(res))
-                        .catch((err) => reject(err));
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: IDEACalendarPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", 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" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: IDEACalendarPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'idea-calendar-picker', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        IDEATranslatePipe,
+                        IDEALocalizedDatePipe,
+                        IonFooter,
+                        IonInput,
+                        IonCol,
+                        IonRow,
+                        IonContent,
+                        IonGrid,
+                        IonIcon,
+                        IonButton,
+                        IonButtons,
+                        IonTitle,
+                        IonToolbar,
+                        IonHeader
+                    ], 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: [{
+                type: Input
+            }], manualTimePicker: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], hideClearButton: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }] } });
+
+class IDEADateTimeComponent {
+    constructor() {
+        this._modal = inject(ModalController);
+        this._translate = inject(IDEATranslationsService);
+        /**
+         * Whether to show the time picker (datetime) or not (date).
+         */
+        this.timePicker = false;
+        /**
+         * Whether to show the MANUAL time picker (datetime) or not (date).
+         */
+        this.manualTimePicker = false;
+        /**
+         * Whether to use the `epochISOString` format instead of `epochDateTime`.
+         */
+        this.useISOFormat = false;
+        /**
+         * If true, the component is disabled.
+         */
+        this.disabled = false;
+        /**
+         * If true, the obligatory dot is shown.
+         */
+        this.obligatory = false;
+        /**
+         * If true, hidew the clear button in the header.
+         */
+        this.hideClearButton = false;
+        this.dateChange = new EventEmitter();
+        this.iconSelect = new EventEmitter();
+        this.isOpening = false;
+    }
+    ngOnInit() {
+        this.langChangeSubscription = this._translate.onLangChange.subscribe(() => {
+            this.valueToDisplay = this.getValueToDisplay(this.date);
+        });
+    }
+    ngOnDestroy() {
+        if (this.langChangeSubscription)
+            this.langChangeSubscription.unsubscribe();
+    }
+    ngOnChanges(changes) {
+        if (changes.date || changes.timePicker)
+            this.valueToDisplay = this.getValueToDisplay(this.date);
+    }
+    async openCalendarPicker() {
+        if (this.disabled || this.isOpening)
+            return;
+        this.isOpening = true;
+        const modal = await this._modal.create({
+            component: IDEACalendarPickerComponent,
+            componentProps: {
+                inputDate: this.date,
+                title: this.label,
+                timePicker: this.timePicker,
+                manualTimePicker: this.manualTimePicker,
+                hideClearButton: this.hideClearButton,
+                min: this.min,
+                max: this.max
             }
         });
-    }
-    /**
-     * Observe a GET request. Include options to cache the requests (`options.useCache`), to work also offline.
-     * @param resource resource name (e.g. `users`)
-     * @param options the request options
-     */
-    getResourceObserver(resource, options) {
-        return new Observable(observer => {
-            const opt = options || {};
-            // if offline and with a cache mode set, force the request to the cache
-            if (!navigator.onLine && opt.useCache)
-                opt.useCache = CacheModes.CACHE_ONLY;
-            // execute the GET request online or through the cache, depending on the chosen mode
-            switch (opt.useCache) {
-                case CacheModes.CACHE_ONLY:
-                    // return the result from the cache, without retrying online if a result wasn't found
-                    this.getFromCache(resource, opt).then((res) => {
-                        if (res)
-                            observer.next(res);
-                        else
-                            observer.error();
-                    });
-                    break;
-                case CacheModes.CACHE_FIRST:
-                    // return the result from the cache
-                    this.getFromCache(resource, opt).then((localRes) => {
-                        if (localRes) {
-                            observer.next(localRes);
-                            // asynchrounously execute the request online, to update the cache with latest data
-                            this.request(resource, 'GET', opt)
-                                .then((cloudRes) => {
-                                observer.next(cloudRes);
-                                // update the cache (if it fails, it's ok)
-                                this.putInCache(resource, cloudRes, opt).catch(() => { });
-                            })
-                                .catch(() => { }); // we already returned the result, an error is acceptable
-                        }
-                        else {
-                            // if the result isn't found in the cache, return the result of the online request
-                            this.request(resource, 'GET', opt)
-                                .then((res) => {
-                                observer.next(res);
-                                // update the cache (if it fails, it's ok)
-                                this.putInCache(resource, res, opt).catch(() => { });
-                            })
-                                .catch((err) => observer.error(err)); // element not found
-                        }
-                    });
-                    break;
-                case CacheModes.NETWORK_FIRST:
-                    // return the result from an online request
-                    this.request(resource, 'GET', opt)
-                        .then((cloudRes) => {
-                        observer.next(cloudRes);
-                        // update the cache (if it fails, it's ok)
-                        this.putInCache(resource, cloudRes, opt).catch(() => { });
-                    })
-                        .catch(() => {
-                        // if a request to the network fails, check in cache
-                        this.getFromCache(resource, opt).then((res) => {
-                            if (res)
-                                observer.next(res);
-                            else
-                                observer.error();
-                        });
-                    });
-                    break;
-                default:
-                    /* CacheModes.NO_CACHE */
-                    // return the result from an online request, with no cache involved
-                    this.request(resource, 'GET', opt)
-                        .then((res) => observer.next(res))
-                        .catch((err) => observer.error(err));
+        modal.onDidDismiss().then(({ data }) => {
+            if (data !== undefined && data !== null) {
+                if (data === '')
+                    this.doSelect(null);
+                else
+                    this.doSelect(data);
             }
         });
+        modal.present();
+        this.isOpening = false;
     }
-    /**
-     * Execute a GET request from the local storage.
-     * @param resource resource name (e.g. `users`)
-     * @param options the request options
-     */
-    getFromCache(resource, options) {
-        return new Promise(resolve => {
-            const opt = options || {};
-            // prepare the url and the query params
-            const url = this.prepareURL(resource, opt);
-            const queryParams = this.prepareQueryParams(opt.params);
-            // get from storage, by the complete url
-            this._storage
-                .get(url.concat(queryParams.toString()))
-                .then((res) => (res ? resolve(res) : opt.resourceId ? resolve(null) : resolve([])));
-        });
-    }
-    /**
-     * Execute a PUT request in the local storage.
-     * @param resource resource name (e.g. `users`)
-     * @param data resource data
-     * @param options the request options
-     */
-    putInCache(resource, data, options) {
-        return new Promise((resolve, reject) => {
-            const opt = options || {};
-            // prepare the url and the query params
-            const url = this.prepareURL(resource, opt);
-            const queryParams = this.prepareQueryParams(opt.params);
-            // put in the storage, by the complete url
-            this._storage
-                .set(url.concat(queryParams.toString()), data)
-                .then(() => resolve())
-                .catch((err) => reject(err));
-        });
+    getValueToDisplay(date) {
+        return !date
+            ? ''
+            : this._translate.formatDate(date, this.timePicker || this.manualTimePicker ? 'd MMM yyyy, HH:mm' : 'mediumDate');
     }
-    /**
-     * Execute a DELETE request in the local storage.
-     * @param resource resource name (e.g. `users`)
-     * @param options the request options
-     */
-    deleteFromCache(resource, options) {
-        return new Promise((resolve, reject) => {
-            const opt = options || {};
-            // prepare the url and the query params
-            const url = this.prepareURL(resource, opt);
-            const queryParams = this.prepareQueryParams(opt.params);
-            // delete from storage, by the complete url
-            this._storage
-                .remove(url.concat(queryParams.toString()))
-                .then(() => resolve())
-                .catch((err) => reject(err));
-        });
+    doSelect(date) {
+        this.dateChange.emit(date ? (this.useISOFormat ? date.toISOString() : date.valueOf()) : null);
     }
-    /**
-     * POST request.
-     * @param resource resource name (e.g. `users`)
-     * @param options the request options
-     */
-    postResource(resource, options) {
-        return this.request(resource, 'POST', options);
+    doIconSelect(event) {
+        if (event)
+            event.stopPropagation();
+        this.iconSelect.emit();
     }
-    /**
-     * PUT request.
-     * @param resource resource name (e.g. `users`)
-     * @param options the request options
-     */
-    putResource(resource, options) {
-        return this.request(resource, 'PUT', options);
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: IDEADateTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: IDEADateTimeComponent, isStandalone: true, selector: "idea-date-time", inputs: { date: "date", timePicker: "timePicker", manualTimePicker: "manualTimePicker", useISOFormat: "useISOFormat", label: "label", icon: "icon", iconColor: "iconColor", lines: "lines", color: "color", placeholder: "placeholder", disabled: "disabled", obligatory: "obligatory", hideClearButton: "hideClearButton", min: "min", max: "max" }, outputs: { dateChange: "dateChange", iconSelect: "iconSelect" }, usesOnChanges: true, ngImport: i0, template: `
+    <ion-item
+      class="dateTimeItem"
+      [color]="color"
+      [lines]="lines"
+      [title]="placeholder || label || ''"
+      [button]="!disabled"
+      [disabled]="isOpening"
+      [class.withLabel]="label"
+      (click)="openCalendarPicker()"
+    >
+      @if (icon) {
+        <ion-button
+          fill="clear"
+          slot="start"
+          [color]="iconColor"
+          [class.marginTop]="label"
+          (click)="doIconSelect($event)"
+        >
+          <ion-icon [icon]="icon" slot="icon-only" />
+        </ion-button>
+      }
+      @if (label) {
+        <ion-label position="stacked" [class.selectable]="!disabled">
+          {{ label }}
+          @if (obligatory && !disabled) {
+            <ion-text class="obligatoryDot" />
+          }
+        </ion-label>
+      }
+      <ion-label class="value" [class.selectable]="!disabled">
+        @if (!valueToDisplay && !disabled) {
+          <ion-text class="placeholder" [class.selectable]="!disabled">
+            {{ placeholder }}
+          </ion-text>
+        }
+        {{ valueToDisplay }}
+      </ion-label>
+      @if (!disabled) {
+        <ion-icon slot="end" icon="caret-down" class="selectIcon" [class.selectable]="!disabled" />
+      }
+    </ion-item>
+  `, isInline: true, styles: [".dateTimeItem{min-height:48px;height:auto}.dateTimeItem .description{margin:10px 0;height:20px;line-height:20px;width:100%}.dateTimeItem .placeholder{color:var(--ion-color-medium)}.dateTimeItem .value{white-space:nowrap}.dateTimeItem .selectIcon{margin:0;padding-left:4px;font-size:.8em;color:var(--ion-color-medium)}.dateTimeItem.withLabel{min-height:58px;height:auto}.dateTimeItem.withLabel .selectIcon{padding-top:25px}.dateTimeItem.withLabel ion-button[slot=start]{margin-top:16px}.selectable{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { 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: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: IDEADateTimeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'idea-date-time', standalone: true, imports: [CommonModule, IonText, IonLabel, IonIcon, IonButton, IonItem], template: `
+    <ion-item
+      class="dateTimeItem"
+      [color]="color"
+      [lines]="lines"
+      [title]="placeholder || label || ''"
+      [button]="!disabled"
+      [disabled]="isOpening"
+      [class.withLabel]="label"
+      (click)="openCalendarPicker()"
+    >
+      @if (icon) {
+        <ion-button
+          fill="clear"
+          slot="start"
+          [color]="iconColor"
+          [class.marginTop]="label"
+          (click)="doIconSelect($event)"
+        >
+          <ion-icon [icon]="icon" slot="icon-only" />
+        </ion-button>
+      }
+      @if (label) {
+        <ion-label position="stacked" [class.selectable]="!disabled">
+          {{ label }}
+          @if (obligatory && !disabled) {
+            <ion-text class="obligatoryDot" />
+          }
+        </ion-label>
+      }
+      <ion-label class="value" [class.selectable]="!disabled">
+        @if (!valueToDisplay && !disabled) {
+          <ion-text class="placeholder" [class.selectable]="!disabled">
+            {{ placeholder }}
+          </ion-text>
+        }
+        {{ valueToDisplay }}
+      </ion-label>
+      @if (!disabled) {
+        <ion-icon slot="end" icon="caret-down" class="selectIcon" [class.selectable]="!disabled" />
+      }
+    </ion-item>
+  `, styles: [".dateTimeItem{min-height:48px;height:auto}.dateTimeItem .description{margin:10px 0;height:20px;line-height:20px;width:100%}.dateTimeItem .placeholder{color:var(--ion-color-medium)}.dateTimeItem .value{white-space:nowrap}.dateTimeItem .selectIcon{margin:0;padding-left:4px;font-size:.8em;color:var(--ion-color-medium)}.dateTimeItem.withLabel{min-height:58px;height:auto}.dateTimeItem.withLabel .selectIcon{padding-top:25px}.dateTimeItem.withLabel ion-button[slot=start]{margin-top:16px}.selectable{cursor:pointer}\n"] }]
+        }], propDecorators: { date: [{
+                type: Input
+            }], timePicker: [{
+                type: Input
+            }], manualTimePicker: [{
+                type: Input
+            }], useISOFormat: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], iconColor: [{
+                type: Input
+            }], lines: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], obligatory: [{
+                type: Input
+            }], hideClearButton: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], dateChange: [{
+                type: Output
+            }], iconSelect: [{
+                type: Output
+            }] } });
+
+class IDEADurationComponent {
+    constructor() {
+        /**
+         * On change event. It emits a number of seconds representing the duration.
+         */
+        this.set = new EventEmitter();
+        this.default = this.hours = this.minutes = this.seconds = 0;
     }
-    /**
-     * PATCH request.
-     * @param resource resource name (e.g. `users`)
-     * @param options the request options
-     */
-    patchResource(resource, options) {
-        return this.request(resource, 'PATCH', options);
+    ngOnChanges(changes) {
+        // assign a default value to the duration
+        if (changes['default'] && changes['default'].isFirstChange()) {
+            const refDate = new Date(0);
+            refDate.setHours(0, 0, 0);
+            refDate.setSeconds(refDate.getSeconds() + this.default);
+            this.hours = refDate.getHours();
+            this.minutes = refDate.getMinutes();
+            this.seconds = this.hideSeconds ? 0 : refDate.getSeconds();
+        }
     }
     /**
-     * DELETE request.
-     * @param resource resource name (e.g. `users`)
-     * @param options the request options
+     * When one of the parts changes, emit the new duration.
      */
-    deleteResource(resource, options) {
-        return this.request(resource, 'DELETE', options);
+    setDuration(type) {
+        switch (type) {
+            case 'hours':
+                const hh = Number(this.hours) || 0;
+                this.hours = hh > 23 ? 23 : hh < 0 ? 0 : hh;
+                break;
+            case 'minutes':
+                const mm = Number(this.minutes) || 0;
+                this.minutes = mm > 59 ? 59 : mm < 0 ? 0 : mm;
+                break;
+            case 'seconds':
+                const ss = Number(this.seconds) || 0;
+                if (this.hideSeconds)
+                    this.seconds = 0;
+                else
+                    this.seconds = ss > 59 ? 59 : ss < 0 ? 0 : ss;
+                break;
+        }
+        this.set.emit(this.hours * 3600 + this.minutes * 60 + this.seconds);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: IDEAAWSAPIService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: IDEAAWSAPIService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: IDEAAWSAPIService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [] });
-/**
- * The options of an API request.
- */
-class APIRequestOption {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: IDEADurationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: IDEADurationComponent, isStandalone: true, selector: "idea-duration", inputs: { default: "default", label: "label", icon: "icon", title: "title", disabled: "disabled", obligatory: "obligatory", lines: "lines", color: "color", hideSeconds: "hideSeconds", shortLabels: "shortLabels" }, outputs: { set: "set" }, usesOnChanges: true, ngImport: i0, template: `
+    <ion-item class="durationItem" [lines]="lines" [color]="color" [title]="title || label">
+      @if (icon) {
+        <ion-icon slot="start" [name]="icon" />
+      }
+      @if (!icon && label) {
+        <ion-label position="stacked">
+          {{ label }}
+          @if (obligatory && !disabled) {
+            <ion-text class="obligatoryDot" />
+          }
+        </ion-label>
+      }
+      <ion-label class="value">
+        <ion-input
+          type="number"
+          min="0"
+          max="23"
+          inputmode="numeric"
+          [disabled]="disabled"
+          [(ngModel)]="hours"
+          (ionChange)="setDuration('hours')"
+        />
+        <ion-text>{{
+          ((shortLabels ? 'IDEA_UNCOMMON.DURATION.HH' : 'IDEA_UNCOMMON.DURATION.HOURS') | translate).toLowerCase()
+        }}</ion-text>
+        <ion-input
+          type="number"
+          min="0"
+          max="59"
+          inputmode="numeric"
+          [disabled]="disabled"
+          [(ngModel)]="minutes"
+          (ionChange)="setDuration('minutes')"
+        />
+        <ion-text>{{
+          ((shortLabels ? 'IDEA_UNCOMMON.DURATION.MM' : 'IDEA_UNCOMMON.DURATION.MINUTES') | translate).toLowerCase()
+        }}</ion-text>
+        @if (!hideSeconds) {
+          <ion-input
+            type="number"
+            min="0"
+            max="59"
+            inputmode="numeric"
+            [disabled]="disabled"
+            [(ngModel)]="seconds"
+            (ionChange)="setDuration('seconds')"
+          />
+        }
+        @if (!hideSeconds) {
+          <ion-text>
+            {{
+              ((shortLabels ? 'IDEA_UNCOMMON.DURATION.SS' : 'IDEA_UNCOMMON.DURATION.SECONDS') | translate).toLowerCase()
+            }}
+          </ion-text>
+        }
+      </ion-label>
+    </ion-item>
+  `, isInline: true, styles: [".durationItem .value{max-width:none;width:100%;pointer-events:all}.durationItem .value ion-input{display:inline-block;max-width:35px;text-align:right}.durationItem .value ion-text{margin-left:10px;margin-right:20px;font-size:.8em}\n"], dependencies: [{ kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: IDEATranslatePipe, name: "translate" }] }); }
 }
-/**
- * Set of usable cache modes.
- */
-var CacheModes;
-(function (CacheModes) {
-    /**
-     * Return the result from an online request, with no cache involved.
-     */
-    CacheModes[CacheModes["NO_CACHE"] = 0] = "NO_CACHE";
-    /**
-     * Return the result from an online request, storing the result in the cache, to update it with the latest data.
-     */
-    CacheModes[CacheModes["NETWORK_FIRST"] = 1] = "NETWORK_FIRST";
-    /**
-     * Return the result from the cache, but also execute the request online, to update the cache with the latest data.
-     */
-    CacheModes[CacheModes["CACHE_FIRST"] = 2] = "CACHE_FIRST";
-    /**
-     * Return the result from the cache, without retrying online if a result wasn't found.
-     */
-    CacheModes[CacheModes["CACHE_ONLY"] = 3] = "CACHE_ONLY";
-})(CacheModes || (CacheModes = {}));
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: IDEADurationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'idea-duration', standalone: true, imports: [IonText, IonLabel, IonIcon, IonItem, CommonModule, FormsModule, IDEATranslatePipe], template: `
+    <ion-item class="durationItem" [lines]="lines" [color]="color" [title]="title || label">
+      @if (icon) {
+        <ion-icon slot="start" [name]="icon" />
+      }
+      @if (!icon && label) {
+        <ion-label position="stacked">
+          {{ label }}
+          @if (obligatory && !disabled) {
+            <ion-text class="obligatoryDot" />
+          }
+        </ion-label>
+      }
+      <ion-label class="value">
+        <ion-input
+          type="number"
+          min="0"
+          max="23"
+          inputmode="numeric"
+          [disabled]="disabled"
+          [(ngModel)]="hours"
+          (ionChange)="setDuration('hours')"
+        />
+        <ion-text>{{
+          ((shortLabels ? 'IDEA_UNCOMMON.DURATION.HH' : 'IDEA_UNCOMMON.DURATION.HOURS') | translate).toLowerCase()
+        }}</ion-text>
+        <ion-input
+          type="number"
+          min="0"
+          max="59"
+          inputmode="numeric"
+          [disabled]="disabled"
+          [(ngModel)]="minutes"
+          (ionChange)="setDuration('minutes')"
+        />
+        <ion-text>{{
+          ((shortLabels ? 'IDEA_UNCOMMON.DURATION.MM' : 'IDEA_UNCOMMON.DURATION.MINUTES') | translate).toLowerCase()
+        }}</ion-text>
+        @if (!hideSeconds) {
+          <ion-input
+            type="number"
+            min="0"
+            max="59"
+            inputmode="numeric"
+            [disabled]="disabled"
+            [(ngModel)]="seconds"
+            (ionChange)="setDuration('seconds')"
+          />
+        }
+        @if (!hideSeconds) {
+          <ion-text>
+            {{
+              ((shortLabels ? 'IDEA_UNCOMMON.DURATION.SS' : 'IDEA_UNCOMMON.DURATION.SECONDS') | translate).toLowerCase()
+            }}
+          </ion-text>
+        }
+      </ion-label>
+    </ion-item>
+  `, styles: [".durationItem .value{max-width:none;width:100%;pointer-events:all}.durationItem .value ion-input{display:inline-block;max-width:35px;text-align:right}.durationItem .value ion-text{margin-left:10px;margin-right:20px;font-size:.8em}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { default: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], obligatory: [{
+                type: Input
+            }], lines: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], hideSeconds: [{
+                type: Input
+            }], shortLabels: [{
+                type: Input
+            }], set: [{
+                type: Output
+            }] } });
 
 class IDEAEchoPage {
     constructor() {
@@ -3901,5 +4270,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { APIRequestOption, CacheModes, CacheableResource, ColorsPaletteComponent, EchoRequests, IDEAAWSAPIService, IDEAAWSAPISocketService, IDEAAddressComponent, IDEAAnnouncementComponent, IDEACacheableResourceComponent, IDEACachedResourcesService, IDEACalendarPickerComponent, IDEAColorPickerComponent, IDEAContactsComponent, IDEADateTimeComponent, IDEADurationComponent, IDEAEchoPage, IDEAErrorReportingService, IDEAFromTimeToTimeComponent, IDEAMDEComponent, IDEAMDEToolbarComponent, IDEAOfflineDataService, IDEAOfflineIndicatorComponent, IDEAOfflineManagerComponent, IDEAOfflineService, IDEAPushNotificationsService, IDEASentimentComponent, IDEATimeIntervalComponent, IDEATinCanService, LAST_SYNC_KEY, NUM_ELEMENTS_WITHOUT_MANUAL_SYNC, NUM_ELEMENTS_WITH_MANUAL_SYNC, Periods, QUEUE_API_REQUESTS_KEY, SYNC_EXPIRATION_INTERVAL, ideaEchoRoutes };
+export { APIRequestOption, CacheModes, CacheableResource, ColorsPaletteComponent, EchoRequests, IDEAAWSAPIService, IDEAAWSAPISocketService, IDEAAddressComponent, IDEAAnnouncementComponent, IDEACacheableResourceComponent, IDEACachedResourcesService, IDEACalendarPickerComponent, IDEAColorPickerComponent, IDEAContactsComponent, IDEADateTimeComponent, IDEADurationComponent, IDEAEchoPage, IDEAErrorReportingService, IDEAFromTimeToTimeComponent, IDEAMDEComponent, IDEAMDEToolbarComponent, IDEAOfflineDataService, IDEAOfflineIndicatorComponent, IDEAOfflineManagerComponent, IDEAOfflineService, IDEAOldAttachmentsComponent, IDEAPushNotificationsService, IDEASentimentComponent, IDEATimeIntervalComponent, IDEATinCanService, LAST_SYNC_KEY, NUM_ELEMENTS_WITHOUT_MANUAL_SYNC, NUM_ELEMENTS_WITH_MANUAL_SYNC, Periods, QUEUE_API_REQUESTS_KEY, SYNC_EXPIRATION_INTERVAL, ideaEchoRoutes };
 //# sourceMappingURL=idea-ionic-uncommon.mjs.map