@idea-ionic/uncommon 8.11.0 → 8.11.2

package/fesm2022/idea-ionic-uncommon.mjs

@@ -1017,6 +1017,7 @@ class IDEAOldAttachmentsComponent {
         this._message = inject(IDEAMessageService);
         this._tc = inject(IDEATinCanService);
         this._api = inject(IDEAAWSAPIService);
+        this._cd = inject(ChangeDetectorRef);
         this._offline = inject(IDEAOfflineService);
         this._translate = inject(IDEATranslationsService);
         /**
@@ -1124,6 +1125,9 @@ class IDEAOldAttachmentsComponent {
             this.removeAttachment(attachment);
             this._message.error('IDEA_TEAMS.ATTACHMENTS.ERROR_UPLOADING_ATTACHMENT');
         }
+        finally {
+            this._cd.markForCheck(); // zoneless: re-check after the awaited upload settles
+        }
     }
     removeAttachment(attachment) {
         const index = this.attachments().indexOf(attachment);
@@ -1594,26 +1598,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 class ColorsPaletteComponent {
     constructor() {
         this._popover = inject(PopoverController);
-        /**
-         * The pickable colors.
-         */
-        this.colors = input(/* @ts-ignore */
-        ...(ngDevMode ? [undefined, { debugName: "colors" }] : /* istanbul ignore next */ []));
-        /**
-         * The current color.
-         */
-        this.current = input(/* @ts-ignore */
-        ...(ngDevMode ? [undefined, { debugName: "current" }] : /* istanbul ignore next */ []));
     }
     pick(color) {
         this._popover.dismiss(color);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ColorsPaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: ColorsPaletteComponent, isStandalone: true, selector: "idea-colors-palette", inputs: { colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null }, current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", 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) {
+          @for (c of colors; track c) {
             <ion-col [size]="2">
               <ion-avatar
                 class="colorCircle tappable"
@@ -1621,7 +1615,7 @@ class ColorsPaletteComponent {
                 [title]="c.name || c.hex"
                 (click)="pick(c.hex)"
               >
-                @if (c.hex === current()) {
+                @if (c.hex === current) {
                   <ion-icon name="checkmark" />
                 }
               </ion-avatar>
@@ -1638,7 +1632,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
     <ion-content>
       <ion-grid>
         <ion-row>
-          @for (c of colors(); track c) {
+          @for (c of colors; track c) {
             <ion-col [size]="2">
               <ion-avatar
                 class="colorCircle tappable"
@@ -1646,7 +1640,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 [title]="c.name || c.hex"
                 (click)="pick(c.hex)"
               >
-                @if (c.hex === current()) {
+                @if (c.hex === current) {
                   <ion-icon name="checkmark" />
                 }
               </ion-avatar>
@@ -1656,7 +1650,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
       </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: i0.Input, args: [{ isSignal: true, alias: "colors", required: false }] }], current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: false }] }] } });
+        }], propDecorators: { colors: [{
+                type: Input
+            }], current: [{
+                type: Input
+            }] } });
 
 class IDEAContactsComponent {
     constructor() {
@@ -1852,30 +1850,19 @@ class IDEACalendarPickerComponent {
         this._modal = inject(ModalController);
         this._alert = inject(AlertController);
         this._translate = inject(IDEATranslationsService);
-        this.inputDate = input(/* @ts-ignore */
-        ...(ngDevMode ? [undefined, { debugName: "inputDate" }] : /* istanbul ignore next */ []));
-        this.timePicker = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "timePicker" }] : /* istanbul ignore next */ []));
-        this.manualTimePicker = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "manualTimePicker" }] : /* istanbul ignore next */ []));
-        this.title = input(/* @ts-ignore */
-        ...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
-        this.hideClearButton = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "hideClearButton" }] : /* istanbul ignore next */ []));
-        this.min = input(/* @ts-ignore */
-        ...(ngDevMode ? [undefined, { debugName: "min" }] : /* istanbul ignore next */ []));
-        this.max = input(/* @ts-ignore */
-        ...(ngDevMode ? [undefined, { debugName: "max" }] : /* istanbul ignore next */ []));
+        this.timePicker = false;
+        this.manualTimePicker = false;
+        this.hideClearButton = false;
     }
     ngOnInit() {
         this.today = new Date();
-        const inputDate = this.inputDate();
+        const inputDate = this.inputDate;
         this.refDate = inputDate ? new Date(inputDate) : new Date(this.today);
         this.selectedDate = new Date(this.refDate);
         this.hour = 12; // to endure timezones
         this.minute = 0;
-        const manualTimePicker = this.manualTimePicker();
-        if (this.timePicker() || manualTimePicker) {
+        const manualTimePicker = this.manualTimePicker;
+        if (this.timePicker || manualTimePicker) {
             this.hour = this.selectedDate.getHours();
             if (manualTimePicker)
                 this.minute = this.selectedDate.getMinutes();
@@ -1896,10 +1883,10 @@ class IDEACalendarPickerComponent {
             this.weekDays.push(refDateForWeekDays.toLocaleDateString(this._translate.getCurrentLang(), { weekday: 'short' }));
             refDateForWeekDays.setDate(refDateForWeekDays.getDate() + 1);
         }
-        const min = this.min();
+        const min = this.min;
         if (min)
             this.dateMin = new Date(min);
-        const max = this.max();
+        const max = this.max;
         if (max)
             this.dateMax = new Date(max);
     }
@@ -2026,7 +2013,7 @@ class IDEACalendarPickerComponent {
         this._modal.dismiss();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEACalendarPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: IDEACalendarPickerComponent, isStandalone: true, selector: "idea-calendar-picker", inputs: { inputDate: { classPropertyName: "inputDate", publicName: "inputDate", isSignal: true, isRequired: false, transformFunction: null }, timePicker: { classPropertyName: "timePicker", publicName: "timePicker", isSignal: true, isRequired: false, transformFunction: null }, manualTimePicker: { classPropertyName: "manualTimePicker", publicName: "manualTimePicker", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, hideClearButton: { classPropertyName: "hideClearButton", publicName: "hideClearButton", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"ideaToolbar\">\n    <ion-title>{{ title() }}</ion-title>\n    <ion-buttons slot=\"end\">\n      @if (!hideClearButton()) {\n        <ion-button [title]=\"'IDEA_UNCOMMON.CALENDAR.RESET' | translate\" (click)=\"save(true)\">\n          <ion-icon slot=\"icon-only\" name=\"arrow-undo\" />\n        </ion-button>\n      }\n      <ion-button [title]=\"'IDEA_UNCOMMON.CALENDAR.CLOSE_WITHOUT_SAVING' | translate\" (click)=\"close()\">\n        <ion-icon slot=\"icon-only\" name=\"close\" />\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n<ion-content>\n  <ion-grid fixed class=\"ion-no-padding\">\n    <ion-row>\n      <h1 class=\"headerLabel\">{{ 'IDEA_UNCOMMON.CALENDAR.SET_DATE' | translate }}</h1>\n    </ion-row>\n    <ion-row style=\"margin-bottom: 8px\">\n      <ion-col class=\"ion-text-center ion-no-padding\" [size]=\"5\">\n        <ion-row class=\"ion-align-items-center ion-justify-content-center\">\n          <ion-col class=\"ion-text-right ion-no-padding\" [size]=\"3\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"addYears(-1)\">\n              <ion-icon slot=\"icon-only\" name=\"chevron-back\" />\n            </ion-button>\n          </ion-col>\n          <ion-col class=\"ion-text-center ion-no-padding tappable\" [size]=\"6\">\n            <ion-input\n              type=\"text\"\n              [placeholder]=\"'IDEA_UNCOMMON.CALENDAR.YEAR' | translate\"\n              [value]=\"refDate.getFullYear()\"\n              (ionFocus)=\"$event.target.value = ''\"\n              (ionChange)=\"setYear($event?.target?.value)\"\n            >\n            </ion-input>\n          </ion-col>\n          <ion-col class=\"ion-text-left ion-no-padding\" [size]=\"3\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"addYears(+1)\">\n              <ion-icon slot=\"icon-only\" name=\"chevron-forward\" />\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-col>\n      <ion-col class=\"ion-text-center ion-no-padding\" [size]=\"7\">\n        <ion-row class=\"ion-align-items-center\">\n          <ion-col class=\"ion-text-right ion-no-padding\" [size]=\"3\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"addMonths(-1)\">\n              <ion-icon slot=\"icon-only\" name=\"chevron-back\" />\n            </ion-button>\n          </ion-col>\n          <ion-col class=\"ion-text-center ion-no-padding tappable\" [size]=\"6\" (click)=\"showMonths()\">\n            {{ refDate | dateLocale: 'MMMM' }}\n          </ion-col>\n          <ion-col class=\"ion-text-left ion-no-padding\" [size]=\"3\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"addMonths(+1)\">\n              <ion-icon slot=\"icon-only\" name=\"chevron-forward\" />\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-col>\n    </ion-row>\n    <ion-row style=\"margin-bottom: 8px\" class=\"headerLabel\">\n      @for (ddd of weekDays; track ddd) {\n        <ion-col class=\"ion-text-center ion-no-padding\">\n          {{ ddd }}\n        </ion-col>\n      }\n    </ion-row>\n    @for (row of calendarGrid; track row; let i = $index) {\n      <ion-row class=\"ion-align-items-center\">\n        @for (col of row; track col; let j = $index) {\n          <ion-col class=\"ion-text-center ion-no-padding\">\n            <ion-button\n              size=\"small\"\n              shape=\"round\"\n              [color]=\"\n                isSameDay(calendarGrid[i][j], today) || isSameDay(calendarGrid[i][j], selectedDate)\n                  ? 'primary'\n                  : isSameMonth(calendarGrid[i][j], refDate)\n                    ? 'dark'\n                    : 'medium'\n              \"\n              [fill]=\"\n                isSameDay(calendarGrid[i][j], selectedDate)\n                  ? 'solid'\n                  : isSameDay(calendarGrid[i][j], today)\n                    ? 'outline'\n                    : 'clear'\n              \"\n              [disabled]=\"!isDateSelectable(calendarGrid[i][j])\"\n              (click)=\"selectDate(calendarGrid[i][j])\"\n            >\n              {{ calendarGrid[i][j] | date: 'd' }}\n            </ion-button>\n          </ion-col>\n        }\n      </ion-row>\n    }\n    @if (timePicker() || manualTimePicker()) {\n      <ion-row>\n        <h1 class=\"headerLabel\">\n          {{ 'IDEA_UNCOMMON.CALENDAR.SET_TIME' | translate }}\n        </h1>\n      </ion-row>\n    }\n    @if (timePicker()) {\n      <ion-row class=\"ion-align-items-center\">\n        <ion-col class=\"ion-no-padding\" [size]=\"7\">\n          <ion-row>\n            @for (hour of hours; track hour) {\n              <ion-col class=\"ion-text-center ion-no-padding\" [size]=\"2\">\n                <ion-button\n                  size=\"small\"\n                  shape=\"round\"\n                  [color]=\"isSameHour(hour) ? 'primary' : 'dark'\"\n                  [fill]=\"isSameHour(hour) ? 'solid' : 'clear'\"\n                  (click)=\"selectHour(hour)\"\n                >\n                  {{ hour }}\n                </ion-button>\n              </ion-col>\n            }\n          </ion-row>\n        </ion-col>\n        <ion-col class=\"ion-text-center ion-no-padding\" [size]=\"1\"> : </ion-col>\n        <ion-col class=\"ion-no-padding\" [size]=\"4\">\n          <ion-row>\n            @for (minute of minutes; track minute) {\n              <ion-col class=\"ion-text-center ion-no-padding\" [size]=\"4\">\n                <ion-button\n                  size=\"small\"\n                  shape=\"round\"\n                  [color]=\"isSameMinute(minute) ? 'primary' : 'dark'\"\n                  [fill]=\"isSameMinute(minute) ? 'solid' : 'clear'\"\n                  (click)=\"selectMinute(minute)\"\n                >\n                  {{ minute }}\n                </ion-button>\n              </ion-col>\n            }\n          </ion-row>\n        </ion-col>\n      </ion-row>\n    }\n    @if (manualTimePicker()) {\n      <ion-row class=\"ion-align-items-center manualTimePicker\">\n        <ion-col class=\"ion-text-center\" [size]=\"12\">\n          <input type=\"number\" min=\"0\" max=\"23\" [value]=\"hour\" (change)=\"selectHour($event.target.value)\" />\n          <span>:</span>\n          <input type=\"number\" min=\"0\" max=\"59\" [value]=\"minute\" (change)=\"selectMinute($event.target.value)\" />\n        </ion-col>\n      </ion-row>\n    }\n  </ion-grid>\n</ion-content>\n<ion-footer>\n  <ion-toolbar color=\"ideaToolbar\" class=\"tappable\" (click)=\"save()\">\n    <ion-title class=\"ion-text-center\">\n      <ion-icon name=\"checkmark\" />\n    </ion-title>\n  </ion-toolbar>\n</ion-footer>\n", styles: ["ion-content{--background: var(--ion-color-white)}h1{margin:10px}.headerLabel{font-size:.7em;font-weight:700;text-transform:uppercase}ion-col,ion-button{font-size:.95em}ion-button{margin:3px 0}ion-footer ion-toolbar{--min-height: 40px}.tappable{cursor:pointer}.manualTimePicker{padding:20px}.manualTimePicker input[type=number],.manualTimePicker span{font-size:2.5em}.manualTimePicker input[type=number]{border:none;border-bottom:2px solid var(--ion-color-dark);text-align:center}.manualTimePicker span{padding-left:4px;padding-right:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: IonRow, selector: "ion-row" }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: IDEATranslatePipe, name: "translate" }, { kind: "pipe", type: IDEALocalizedDatePipe, name: "dateLocale" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: IDEACalendarPickerComponent, isStandalone: true, selector: "idea-calendar-picker", inputs: { inputDate: "inputDate", timePicker: "timePicker", manualTimePicker: "manualTimePicker", title: "title", hideClearButton: "hideClearButton", min: "min", max: "max" }, ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"ideaToolbar\">\n    <ion-title>{{ title }}</ion-title>\n    <ion-buttons slot=\"end\">\n      @if (!hideClearButton) {\n        <ion-button [title]=\"'IDEA_UNCOMMON.CALENDAR.RESET' | translate\" (click)=\"save(true)\">\n          <ion-icon slot=\"icon-only\" name=\"arrow-undo\" />\n        </ion-button>\n      }\n      <ion-button [title]=\"'IDEA_UNCOMMON.CALENDAR.CLOSE_WITHOUT_SAVING' | translate\" (click)=\"close()\">\n        <ion-icon slot=\"icon-only\" name=\"close\" />\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n<ion-content>\n  <ion-grid fixed class=\"ion-no-padding\">\n    <ion-row>\n      <h1 class=\"headerLabel\">{{ 'IDEA_UNCOMMON.CALENDAR.SET_DATE' | translate }}</h1>\n    </ion-row>\n    <ion-row style=\"margin-bottom: 8px\">\n      <ion-col class=\"ion-text-center ion-no-padding\" [size]=\"5\">\n        <ion-row class=\"ion-align-items-center ion-justify-content-center\">\n          <ion-col class=\"ion-text-right ion-no-padding\" [size]=\"3\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"addYears(-1)\">\n              <ion-icon slot=\"icon-only\" name=\"chevron-back\" />\n            </ion-button>\n          </ion-col>\n          <ion-col class=\"ion-text-center ion-no-padding tappable\" [size]=\"6\">\n            <ion-input\n              type=\"text\"\n              [placeholder]=\"'IDEA_UNCOMMON.CALENDAR.YEAR' | translate\"\n              [value]=\"refDate.getFullYear()\"\n              (ionFocus)=\"$event.target.value = ''\"\n              (ionChange)=\"setYear($event?.target?.value)\"\n            >\n            </ion-input>\n          </ion-col>\n          <ion-col class=\"ion-text-left ion-no-padding\" [size]=\"3\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"addYears(+1)\">\n              <ion-icon slot=\"icon-only\" name=\"chevron-forward\" />\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-col>\n      <ion-col class=\"ion-text-center ion-no-padding\" [size]=\"7\">\n        <ion-row class=\"ion-align-items-center\">\n          <ion-col class=\"ion-text-right ion-no-padding\" [size]=\"3\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"addMonths(-1)\">\n              <ion-icon slot=\"icon-only\" name=\"chevron-back\" />\n            </ion-button>\n          </ion-col>\n          <ion-col class=\"ion-text-center ion-no-padding tappable\" [size]=\"6\" (click)=\"showMonths()\">\n            {{ refDate | dateLocale: 'MMMM' }}\n          </ion-col>\n          <ion-col class=\"ion-text-left ion-no-padding\" [size]=\"3\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"addMonths(+1)\">\n              <ion-icon slot=\"icon-only\" name=\"chevron-forward\" />\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-col>\n    </ion-row>\n    <ion-row style=\"margin-bottom: 8px\" class=\"headerLabel\">\n      @for (ddd of weekDays; track ddd) {\n        <ion-col class=\"ion-text-center ion-no-padding\">\n          {{ ddd }}\n        </ion-col>\n      }\n    </ion-row>\n    @for (row of calendarGrid; track row; let i = $index) {\n      <ion-row class=\"ion-align-items-center\">\n        @for (col of row; track col; let j = $index) {\n          <ion-col class=\"ion-text-center ion-no-padding\">\n            <ion-button\n              size=\"small\"\n              shape=\"round\"\n              [color]=\"\n                isSameDay(calendarGrid[i][j], today) || isSameDay(calendarGrid[i][j], selectedDate)\n                  ? 'primary'\n                  : isSameMonth(calendarGrid[i][j], refDate)\n                    ? 'dark'\n                    : 'medium'\n              \"\n              [fill]=\"\n                isSameDay(calendarGrid[i][j], selectedDate)\n                  ? 'solid'\n                  : isSameDay(calendarGrid[i][j], today)\n                    ? 'outline'\n                    : 'clear'\n              \"\n              [disabled]=\"!isDateSelectable(calendarGrid[i][j])\"\n              (click)=\"selectDate(calendarGrid[i][j])\"\n            >\n              {{ calendarGrid[i][j] | date: 'd' }}\n            </ion-button>\n          </ion-col>\n        }\n      </ion-row>\n    }\n    @if (timePicker || manualTimePicker) {\n      <ion-row>\n        <h1 class=\"headerLabel\">\n          {{ 'IDEA_UNCOMMON.CALENDAR.SET_TIME' | translate }}\n        </h1>\n      </ion-row>\n    }\n    @if (timePicker) {\n      <ion-row class=\"ion-align-items-center\">\n        <ion-col class=\"ion-no-padding\" [size]=\"7\">\n          <ion-row>\n            @for (hour of hours; track hour) {\n              <ion-col class=\"ion-text-center ion-no-padding\" [size]=\"2\">\n                <ion-button\n                  size=\"small\"\n                  shape=\"round\"\n                  [color]=\"isSameHour(hour) ? 'primary' : 'dark'\"\n                  [fill]=\"isSameHour(hour) ? 'solid' : 'clear'\"\n                  (click)=\"selectHour(hour)\"\n                >\n                  {{ hour }}\n                </ion-button>\n              </ion-col>\n            }\n          </ion-row>\n        </ion-col>\n        <ion-col class=\"ion-text-center ion-no-padding\" [size]=\"1\"> : </ion-col>\n        <ion-col class=\"ion-no-padding\" [size]=\"4\">\n          <ion-row>\n            @for (minute of minutes; track minute) {\n              <ion-col class=\"ion-text-center ion-no-padding\" [size]=\"4\">\n                <ion-button\n                  size=\"small\"\n                  shape=\"round\"\n                  [color]=\"isSameMinute(minute) ? 'primary' : 'dark'\"\n                  [fill]=\"isSameMinute(minute) ? 'solid' : 'clear'\"\n                  (click)=\"selectMinute(minute)\"\n                >\n                  {{ minute }}\n                </ion-button>\n              </ion-col>\n            }\n          </ion-row>\n        </ion-col>\n      </ion-row>\n    }\n    @if (manualTimePicker) {\n      <ion-row class=\"ion-align-items-center manualTimePicker\">\n        <ion-col class=\"ion-text-center\" [size]=\"12\">\n          <input type=\"number\" min=\"0\" max=\"23\" [value]=\"hour\" (change)=\"selectHour($event.target.value)\" />\n          <span>:</span>\n          <input type=\"number\" min=\"0\" max=\"59\" [value]=\"minute\" (change)=\"selectMinute($event.target.value)\" />\n        </ion-col>\n      </ion-row>\n    }\n  </ion-grid>\n</ion-content>\n<ion-footer>\n  <ion-toolbar color=\"ideaToolbar\" class=\"tappable\" (click)=\"save()\">\n    <ion-title class=\"ion-text-center\">\n      <ion-icon name=\"checkmark\" />\n    </ion-title>\n  </ion-toolbar>\n</ion-footer>\n", styles: ["ion-content{--background: var(--ion-color-white)}h1{margin:10px}.headerLabel{font-size:.7em;font-weight:700;text-transform:uppercase}ion-col,ion-button{font-size:.95em}ion-button{margin:3px 0}ion-footer ion-toolbar{--min-height: 40px}.tappable{cursor:pointer}.manualTimePicker{padding:20px}.manualTimePicker input[type=number],.manualTimePicker span{font-size:2.5em}.manualTimePicker input[type=number]{border:none;border-bottom:2px solid var(--ion-color-dark);text-align:center}.manualTimePicker span{padding-left:4px;padding-right:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: IonRow, selector: "ion-row" }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: IDEATranslatePipe, name: "translate" }, { kind: "pipe", type: IDEALocalizedDatePipe, name: "dateLocale" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEACalendarPickerComponent, decorators: [{
             type: Component,
@@ -2047,8 +2034,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         IonTitle,
                         IonToolbar,
                         IonHeader
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-header>\n  <ion-toolbar color=\"ideaToolbar\">\n    <ion-title>{{ title() }}</ion-title>\n    <ion-buttons slot=\"end\">\n      @if (!hideClearButton()) {\n        <ion-button [title]=\"'IDEA_UNCOMMON.CALENDAR.RESET' | translate\" (click)=\"save(true)\">\n          <ion-icon slot=\"icon-only\" name=\"arrow-undo\" />\n        </ion-button>\n      }\n      <ion-button [title]=\"'IDEA_UNCOMMON.CALENDAR.CLOSE_WITHOUT_SAVING' | translate\" (click)=\"close()\">\n        <ion-icon slot=\"icon-only\" name=\"close\" />\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n<ion-content>\n  <ion-grid fixed class=\"ion-no-padding\">\n    <ion-row>\n      <h1 class=\"headerLabel\">{{ 'IDEA_UNCOMMON.CALENDAR.SET_DATE' | translate }}</h1>\n    </ion-row>\n    <ion-row style=\"margin-bottom: 8px\">\n      <ion-col class=\"ion-text-center ion-no-padding\" [size]=\"5\">\n        <ion-row class=\"ion-align-items-center ion-justify-content-center\">\n          <ion-col class=\"ion-text-right ion-no-padding\" [size]=\"3\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"addYears(-1)\">\n              <ion-icon slot=\"icon-only\" name=\"chevron-back\" />\n            </ion-button>\n          </ion-col>\n          <ion-col class=\"ion-text-center ion-no-padding tappable\" [size]=\"6\">\n            <ion-input\n              type=\"text\"\n              [placeholder]=\"'IDEA_UNCOMMON.CALENDAR.YEAR' | translate\"\n              [value]=\"refDate.getFullYear()\"\n              (ionFocus)=\"$event.target.value = ''\"\n              (ionChange)=\"setYear($event?.target?.value)\"\n            >\n            </ion-input>\n          </ion-col>\n          <ion-col class=\"ion-text-left ion-no-padding\" [size]=\"3\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"addYears(+1)\">\n              <ion-icon slot=\"icon-only\" name=\"chevron-forward\" />\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-col>\n      <ion-col class=\"ion-text-center ion-no-padding\" [size]=\"7\">\n        <ion-row class=\"ion-align-items-center\">\n          <ion-col class=\"ion-text-right ion-no-padding\" [size]=\"3\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"addMonths(-1)\">\n              <ion-icon slot=\"icon-only\" name=\"chevron-back\" />\n            </ion-button>\n          </ion-col>\n          <ion-col class=\"ion-text-center ion-no-padding tappable\" [size]=\"6\" (click)=\"showMonths()\">\n            {{ refDate | dateLocale: 'MMMM' }}\n          </ion-col>\n          <ion-col class=\"ion-text-left ion-no-padding\" [size]=\"3\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"addMonths(+1)\">\n              <ion-icon slot=\"icon-only\" name=\"chevron-forward\" />\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-col>\n    </ion-row>\n    <ion-row style=\"margin-bottom: 8px\" class=\"headerLabel\">\n      @for (ddd of weekDays; track ddd) {\n        <ion-col class=\"ion-text-center ion-no-padding\">\n          {{ ddd }}\n        </ion-col>\n      }\n    </ion-row>\n    @for (row of calendarGrid; track row; let i = $index) {\n      <ion-row class=\"ion-align-items-center\">\n        @for (col of row; track col; let j = $index) {\n          <ion-col class=\"ion-text-center ion-no-padding\">\n            <ion-button\n              size=\"small\"\n              shape=\"round\"\n              [color]=\"\n                isSameDay(calendarGrid[i][j], today) || isSameDay(calendarGrid[i][j], selectedDate)\n                  ? 'primary'\n                  : isSameMonth(calendarGrid[i][j], refDate)\n                    ? 'dark'\n                    : 'medium'\n              \"\n              [fill]=\"\n                isSameDay(calendarGrid[i][j], selectedDate)\n                  ? 'solid'\n                  : isSameDay(calendarGrid[i][j], today)\n                    ? 'outline'\n                    : 'clear'\n              \"\n              [disabled]=\"!isDateSelectable(calendarGrid[i][j])\"\n              (click)=\"selectDate(calendarGrid[i][j])\"\n            >\n              {{ calendarGrid[i][j] | date: 'd' }}\n            </ion-button>\n          </ion-col>\n        }\n      </ion-row>\n    }\n    @if (timePicker() || manualTimePicker()) {\n      <ion-row>\n        <h1 class=\"headerLabel\">\n          {{ 'IDEA_UNCOMMON.CALENDAR.SET_TIME' | translate }}\n        </h1>\n      </ion-row>\n    }\n    @if (timePicker()) {\n      <ion-row class=\"ion-align-items-center\">\n        <ion-col class=\"ion-no-padding\" [size]=\"7\">\n          <ion-row>\n            @for (hour of hours; track hour) {\n              <ion-col class=\"ion-text-center ion-no-padding\" [size]=\"2\">\n                <ion-button\n                  size=\"small\"\n                  shape=\"round\"\n                  [color]=\"isSameHour(hour) ? 'primary' : 'dark'\"\n                  [fill]=\"isSameHour(hour) ? 'solid' : 'clear'\"\n                  (click)=\"selectHour(hour)\"\n                >\n                  {{ hour }}\n                </ion-button>\n              </ion-col>\n            }\n          </ion-row>\n        </ion-col>\n        <ion-col class=\"ion-text-center ion-no-padding\" [size]=\"1\"> : </ion-col>\n        <ion-col class=\"ion-no-padding\" [size]=\"4\">\n          <ion-row>\n            @for (minute of minutes; track minute) {\n              <ion-col class=\"ion-text-center ion-no-padding\" [size]=\"4\">\n                <ion-button\n                  size=\"small\"\n                  shape=\"round\"\n                  [color]=\"isSameMinute(minute) ? 'primary' : 'dark'\"\n                  [fill]=\"isSameMinute(minute) ? 'solid' : 'clear'\"\n                  (click)=\"selectMinute(minute)\"\n                >\n                  {{ minute }}\n                </ion-button>\n              </ion-col>\n            }\n          </ion-row>\n        </ion-col>\n      </ion-row>\n    }\n    @if (manualTimePicker()) {\n      <ion-row class=\"ion-align-items-center manualTimePicker\">\n        <ion-col class=\"ion-text-center\" [size]=\"12\">\n          <input type=\"number\" min=\"0\" max=\"23\" [value]=\"hour\" (change)=\"selectHour($event.target.value)\" />\n          <span>:</span>\n          <input type=\"number\" min=\"0\" max=\"59\" [value]=\"minute\" (change)=\"selectMinute($event.target.value)\" />\n        </ion-col>\n      </ion-row>\n    }\n  </ion-grid>\n</ion-content>\n<ion-footer>\n  <ion-toolbar color=\"ideaToolbar\" class=\"tappable\" (click)=\"save()\">\n    <ion-title class=\"ion-text-center\">\n      <ion-icon name=\"checkmark\" />\n    </ion-title>\n  </ion-toolbar>\n</ion-footer>\n", styles: ["ion-content{--background: var(--ion-color-white)}h1{margin:10px}.headerLabel{font-size:.7em;font-weight:700;text-transform:uppercase}ion-col,ion-button{font-size:.95em}ion-button{margin:3px 0}ion-footer ion-toolbar{--min-height: 40px}.tappable{cursor:pointer}.manualTimePicker{padding:20px}.manualTimePicker input[type=number],.manualTimePicker span{font-size:2.5em}.manualTimePicker input[type=number]{border:none;border-bottom:2px solid var(--ion-color-dark);text-align:center}.manualTimePicker span{padding-left:4px;padding-right:4px}\n"] }]
-        }], propDecorators: { inputDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputDate", required: false }] }], timePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "timePicker", required: false }] }], manualTimePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "manualTimePicker", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], hideClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideClearButton", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-header>\n  <ion-toolbar color=\"ideaToolbar\">\n    <ion-title>{{ title }}</ion-title>\n    <ion-buttons slot=\"end\">\n      @if (!hideClearButton) {\n        <ion-button [title]=\"'IDEA_UNCOMMON.CALENDAR.RESET' | translate\" (click)=\"save(true)\">\n          <ion-icon slot=\"icon-only\" name=\"arrow-undo\" />\n        </ion-button>\n      }\n      <ion-button [title]=\"'IDEA_UNCOMMON.CALENDAR.CLOSE_WITHOUT_SAVING' | translate\" (click)=\"close()\">\n        <ion-icon slot=\"icon-only\" name=\"close\" />\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n<ion-content>\n  <ion-grid fixed class=\"ion-no-padding\">\n    <ion-row>\n      <h1 class=\"headerLabel\">{{ 'IDEA_UNCOMMON.CALENDAR.SET_DATE' | translate }}</h1>\n    </ion-row>\n    <ion-row style=\"margin-bottom: 8px\">\n      <ion-col class=\"ion-text-center ion-no-padding\" [size]=\"5\">\n        <ion-row class=\"ion-align-items-center ion-justify-content-center\">\n          <ion-col class=\"ion-text-right ion-no-padding\" [size]=\"3\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"addYears(-1)\">\n              <ion-icon slot=\"icon-only\" name=\"chevron-back\" />\n            </ion-button>\n          </ion-col>\n          <ion-col class=\"ion-text-center ion-no-padding tappable\" [size]=\"6\">\n            <ion-input\n              type=\"text\"\n              [placeholder]=\"'IDEA_UNCOMMON.CALENDAR.YEAR' | translate\"\n              [value]=\"refDate.getFullYear()\"\n              (ionFocus)=\"$event.target.value = ''\"\n              (ionChange)=\"setYear($event?.target?.value)\"\n            >\n            </ion-input>\n          </ion-col>\n          <ion-col class=\"ion-text-left ion-no-padding\" [size]=\"3\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"addYears(+1)\">\n              <ion-icon slot=\"icon-only\" name=\"chevron-forward\" />\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-col>\n      <ion-col class=\"ion-text-center ion-no-padding\" [size]=\"7\">\n        <ion-row class=\"ion-align-items-center\">\n          <ion-col class=\"ion-text-right ion-no-padding\" [size]=\"3\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"addMonths(-1)\">\n              <ion-icon slot=\"icon-only\" name=\"chevron-back\" />\n            </ion-button>\n          </ion-col>\n          <ion-col class=\"ion-text-center ion-no-padding tappable\" [size]=\"6\" (click)=\"showMonths()\">\n            {{ refDate | dateLocale: 'MMMM' }}\n          </ion-col>\n          <ion-col class=\"ion-text-left ion-no-padding\" [size]=\"3\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"addMonths(+1)\">\n              <ion-icon slot=\"icon-only\" name=\"chevron-forward\" />\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-col>\n    </ion-row>\n    <ion-row style=\"margin-bottom: 8px\" class=\"headerLabel\">\n      @for (ddd of weekDays; track ddd) {\n        <ion-col class=\"ion-text-center ion-no-padding\">\n          {{ ddd }}\n        </ion-col>\n      }\n    </ion-row>\n    @for (row of calendarGrid; track row; let i = $index) {\n      <ion-row class=\"ion-align-items-center\">\n        @for (col of row; track col; let j = $index) {\n          <ion-col class=\"ion-text-center ion-no-padding\">\n            <ion-button\n              size=\"small\"\n              shape=\"round\"\n              [color]=\"\n                isSameDay(calendarGrid[i][j], today) || isSameDay(calendarGrid[i][j], selectedDate)\n                  ? 'primary'\n                  : isSameMonth(calendarGrid[i][j], refDate)\n                    ? 'dark'\n                    : 'medium'\n              \"\n              [fill]=\"\n                isSameDay(calendarGrid[i][j], selectedDate)\n                  ? 'solid'\n                  : isSameDay(calendarGrid[i][j], today)\n                    ? 'outline'\n                    : 'clear'\n              \"\n              [disabled]=\"!isDateSelectable(calendarGrid[i][j])\"\n              (click)=\"selectDate(calendarGrid[i][j])\"\n            >\n              {{ calendarGrid[i][j] | date: 'd' }}\n            </ion-button>\n          </ion-col>\n        }\n      </ion-row>\n    }\n    @if (timePicker || manualTimePicker) {\n      <ion-row>\n        <h1 class=\"headerLabel\">\n          {{ 'IDEA_UNCOMMON.CALENDAR.SET_TIME' | translate }}\n        </h1>\n      </ion-row>\n    }\n    @if (timePicker) {\n      <ion-row class=\"ion-align-items-center\">\n        <ion-col class=\"ion-no-padding\" [size]=\"7\">\n          <ion-row>\n            @for (hour of hours; track hour) {\n              <ion-col class=\"ion-text-center ion-no-padding\" [size]=\"2\">\n                <ion-button\n                  size=\"small\"\n                  shape=\"round\"\n                  [color]=\"isSameHour(hour) ? 'primary' : 'dark'\"\n                  [fill]=\"isSameHour(hour) ? 'solid' : 'clear'\"\n                  (click)=\"selectHour(hour)\"\n                >\n                  {{ hour }}\n                </ion-button>\n              </ion-col>\n            }\n          </ion-row>\n        </ion-col>\n        <ion-col class=\"ion-text-center ion-no-padding\" [size]=\"1\"> : </ion-col>\n        <ion-col class=\"ion-no-padding\" [size]=\"4\">\n          <ion-row>\n            @for (minute of minutes; track minute) {\n              <ion-col class=\"ion-text-center ion-no-padding\" [size]=\"4\">\n                <ion-button\n                  size=\"small\"\n                  shape=\"round\"\n                  [color]=\"isSameMinute(minute) ? 'primary' : 'dark'\"\n                  [fill]=\"isSameMinute(minute) ? 'solid' : 'clear'\"\n                  (click)=\"selectMinute(minute)\"\n                >\n                  {{ minute }}\n                </ion-button>\n              </ion-col>\n            }\n          </ion-row>\n        </ion-col>\n      </ion-row>\n    }\n    @if (manualTimePicker) {\n      <ion-row class=\"ion-align-items-center manualTimePicker\">\n        <ion-col class=\"ion-text-center\" [size]=\"12\">\n          <input type=\"number\" min=\"0\" max=\"23\" [value]=\"hour\" (change)=\"selectHour($event.target.value)\" />\n          <span>:</span>\n          <input type=\"number\" min=\"0\" max=\"59\" [value]=\"minute\" (change)=\"selectMinute($event.target.value)\" />\n        </ion-col>\n      </ion-row>\n    }\n  </ion-grid>\n</ion-content>\n<ion-footer>\n  <ion-toolbar color=\"ideaToolbar\" class=\"tappable\" (click)=\"save()\">\n    <ion-title class=\"ion-text-center\">\n      <ion-icon name=\"checkmark\" />\n    </ion-title>\n  </ion-toolbar>\n</ion-footer>\n", styles: ["ion-content{--background: var(--ion-color-white)}h1{margin:10px}.headerLabel{font-size:.7em;font-weight:700;text-transform:uppercase}ion-col,ion-button{font-size:.95em}ion-button{margin:3px 0}ion-footer ion-toolbar{--min-height: 40px}.tappable{cursor:pointer}.manualTimePicker{padding:20px}.manualTimePicker input[type=number],.manualTimePicker span{font-size:2.5em}.manualTimePicker input[type=number]{border:none;border-bottom:2px solid var(--ion-color-dark);text-align:center}.manualTimePicker span{padding-left:4px;padding-right:4px}\n"] }]
+        }], propDecorators: { inputDate: [{
+                type: Input
+            }], timePicker: [{
+                type: Input
+            }], manualTimePicker: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], hideClearButton: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }] } });
 
 class IDEADateTimeComponent {
     constructor() {
@@ -3596,6 +3597,7 @@ class IDEASentimentComponent {
         this._env = inject(IDEAEnvironment);
         this._API = inject(IDEAAWSAPIService);
         this._translate = inject(IDEATranslationsService);
+        this._cd = inject(ChangeDetectorRef);
         this._offline = inject(IDEAOfflineService);
         /**
          * The input text.
@@ -3637,6 +3639,7 @@ class IDEASentimentComponent {
                 this.sentiment = null;
             }
         }
+        this._cd.markForCheck(); // zoneless: re-check after the awaited detection settles
     }
     getColorBySentiment(sentiment) {
         sentiment = sentiment || this.sentiment;
@@ -3706,39 +3709,19 @@ class IDEAFromTimeToTimeComponent {
     constructor() {
         this._modal = inject(ModalController);
         this._translate = inject(IDEATranslationsService);
-        /**
-         * The time interval to set.
-         */
-        this.timeInterval = input(/* @ts-ignore */
-        ...(ngDevMode ? [undefined, { debugName: "timeInterval" }] : /* istanbul ignore next */ []));
         /**
          * Whether we should start picking the time displaying the afternoon (PM) or the morning (AM, default).
          */
         // TODO: Skipped for migration because:
         //  Your application code writes to the input. This prevents migration.
         this.period = Periods.AM;
-        /**
-         * A time to use as lower limit for the possible choices.
-         */
-        this.notEarlierThan = input(/* @ts-ignore */
-        ...(ngDevMode ? [undefined, { debugName: "notEarlierThan" }] : /* istanbul ignore next */ []));
-        /**
-         * A time to use as upper limit for the possible choices.
-         */
-        this.notLaterThan = input(/* @ts-ignore */
-        ...(ngDevMode ? [undefined, { debugName: "notLaterThan" }] : /* istanbul ignore next */ []));
-        /**
-         * The title of the component.
-         */
-        this.title = input(/* @ts-ignore */
-        ...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
         this.Segments = Segments;
         this.Periods = Periods;
     }
     ngOnInit() {
         this.segment = Segments.FROM;
         this.minutes = 30;
-        this.timeIntervalWC = new TimeInterval(this.timeInterval());
+        this.timeIntervalWC = new TimeInterval(this.timeInterval);
     }
     setInterval(hours, minutes) {
         // adjust the hour based on the start of the interval and the settings of am/pm
@@ -3801,8 +3784,8 @@ class IDEAFromTimeToTimeComponent {
         // adjust the hour based on the start of the interval and the settings of am/pm
         hours = this.contextualizeHour(hours, minutes);
         // check whether the selected time is inside the given boundaries
-        const notEarlierThan = this.notEarlierThan();
-        const notLaterThan = this.notLaterThan();
+        const notEarlierThan = this.notEarlierThan;
+        const notLaterThan = this.notLaterThan;
         return ((!notEarlierThan || this.timeToMs(hours, minutes) >= notEarlierThan || this.timeToMs(hours, minutes) === 0) &&
             (!notLaterThan || this.timeToMs(hours, minutes) <= notLaterThan));
     }
@@ -3828,18 +3811,18 @@ class IDEAFromTimeToTimeComponent {
         return refDate.toLocaleTimeString(this._translate.getCurrentLang(), dateOpts);
     }
     save() {
-        this.timeInterval().load(this.timeIntervalWC);
+        this.timeInterval.load(this.timeIntervalWC);
         this._modal.dismiss(true);
     }
     reset() {
-        this.timeInterval().reset();
+        this.timeInterval.reset();
         this._modal.dismiss(false);
     }
     close() {
         this._modal.dismiss();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEAFromTimeToTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: IDEAFromTimeToTimeComponent, isStandalone: true, selector: "idea-from-time-to-time", inputs: { timeInterval: { classPropertyName: "timeInterval", publicName: "timeInterval", isSignal: true, isRequired: false, transformFunction: null }, period: { classPropertyName: "period", publicName: "period", isSignal: false, isRequired: false, transformFunction: null }, notEarlierThan: { classPropertyName: "notEarlierThan", publicName: "notEarlierThan", isSignal: true, isRequired: false, transformFunction: null }, notLaterThan: { classPropertyName: "notLaterThan", publicName: "notLaterThan", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"ideaToolbar\">\n    <ion-buttons slot=\"start\">\n      <ion-button [title]=\"'COMMON.CLOSE' | translate\" (click)=\"close()\">\n        <ion-icon name=\"close\" slot=\"icon-only\" />\n      </ion-button>\n    </ion-buttons>\n    <ion-title>{{ title() }}</ion-title>\n    <ion-buttons slot=\"end\">\n      <ion-button [title]=\"'COMMON.RESET' | translate\" (click)=\"reset()\">\n        <ion-icon name=\"arrow-undo\" slot=\"icon-only\" />\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n<ion-content>\n  <ion-grid class=\"clockGrid\">\n    <ion-row class=\"ion-align-items-center\">\n      <ion-col [size]=\"5\">&nbsp;</ion-col>\n      <ion-col class=\"ion-text-center\" [size]=\"2\">\n        <ion-button\n          size=\"large\"\n          shape=\"round\"\n          [color]=\"equalsFrom(12) ? 'primary' : 'dark'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(12)\"\n          [disabled]=\"!isAllowed(12)\"\n          (click)=\"setInterval(12)\"\n        >\n          {{ getClockButtonContent(12) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-left\" [size]=\"2\">\n        <ion-button\n          size=\"small\"\n          [color]=\"equalsFrom(12, minutes) ? 'primary' : 'light'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(12, minutes)\"\n          [disabled]=\"!isAllowed(12, minutes)\"\n          (click)=\"setInterval(12, minutes)\"\n        >\n          {{ getClockButtonContent(12, minutes) }}\n        </ion-button>\n      </ion-col>\n      <ion-col [size]=\"3\">&nbsp;</ion-col>\n    </ion-row>\n    <ion-row class=\"ion-align-items-center\">\n      <ion-col [size]=\"2\">&nbsp;</ion-col>\n      <ion-col class=\"ion-text-center\" [size]=\"2\">\n        <ion-button\n          size=\"small\"\n          [color]=\"equalsFrom(11, minutes) ? 'primary' : 'light'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(11, minutes)\"\n          [disabled]=\"!isAllowed(11, minutes)\"\n          (click)=\"setInterval(11, minutes)\"\n        >\n          {{ getClockButtonContent(11, minutes) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-left\" [size]=\"2\">\n        <ion-button\n          size=\"large\"\n          shape=\"round\"\n          [color]=\"equalsFrom(11) ? 'primary' : 'dark'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(11)\"\n          [disabled]=\"!isAllowed(11)\"\n          (click)=\"setInterval(11)\"\n        >\n          {{ getClockButtonContent(11) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-right\" [size]=\"2\">\n        <ion-button\n          size=\"large\"\n          shape=\"round\"\n          [color]=\"equalsFrom(1) ? 'primary' : 'dark'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(1)\"\n          [disabled]=\"!isAllowed(1)\"\n          (click)=\"setInterval(1)\"\n        >\n          {{ getClockButtonContent(1) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-center\" [size]=\"2\">\n        <ion-button\n          size=\"small\"\n          [color]=\"equalsFrom(1, minutes) ? 'primary' : 'light'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(1, minutes)\"\n          [disabled]=\"!isAllowed(1, minutes)\"\n          (click)=\"setInterval(1, minutes)\"\n        >\n          {{ getClockButtonContent(1, minutes) }}\n        </ion-button>\n      </ion-col>\n      <ion-col [size]=\"2\">&nbsp;</ion-col>\n    </ion-row>\n    <ion-row class=\"ion-align-items-center\">\n      <ion-col [size]=\"1\">&nbsp;</ion-col>\n      <ion-col class=\"ion-text-center\" [size]=\"2\">\n        <ion-button\n          size=\"small\"\n          [color]=\"equalsFrom(10, minutes) ? 'primary' : 'light'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(10, minutes)\"\n          [disabled]=\"!isAllowed(10, minutes)\"\n          (click)=\"setInterval(10, minutes)\"\n        >\n          {{ getClockButtonContent(10, minutes) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-left\" [size]=\"2\">\n        <ion-button\n          size=\"large\"\n          shape=\"round\"\n          [color]=\"equalsFrom(10) ? 'primary' : 'dark'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(10)\"\n          [disabled]=\"!isAllowed(10)\"\n          (click)=\"setInterval(10)\"\n        >\n          {{ getClockButtonContent(10) }}\n        </ion-button>\n      </ion-col>\n      <ion-col [size]=\"2\">&nbsp;</ion-col>\n      <ion-col class=\"ion-text-right\" [size]=\"2\">\n        <ion-button\n          size=\"large\"\n          shape=\"round\"\n          [color]=\"equalsFrom(2) ? 'primary' : 'dark'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(2)\"\n          [disabled]=\"!isAllowed(2)\"\n          (click)=\"setInterval(2)\"\n        >\n          {{ getClockButtonContent(2) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-center\" [size]=\"2\">\n        <ion-button\n          size=\"small\"\n          [color]=\"equalsFrom(2, minutes) ? 'primary' : 'light'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(2, minutes)\"\n          [disabled]=\"!isAllowed(2, minutes)\"\n          (click)=\"setInterval(2, minutes)\"\n        >\n          {{ getClockButtonContent(2, minutes) }}\n        </ion-button>\n      </ion-col>\n      <ion-col [size]=\"1\">&nbsp;</ion-col>\n    </ion-row>\n    <ion-row class=\"ion-align-items-center\">\n      <ion-col class=\"ion-text-center\" [size]=\"2\">\n        <ion-button\n          size=\"small\"\n          [color]=\"equalsFrom(9, minutes) ? 'primary' : 'light'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(9, minutes)\"\n          [disabled]=\"!isAllowed(9, minutes)\"\n          (click)=\"setInterval(9, minutes)\"\n        >\n          {{ getClockButtonContent(9, minutes) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-left\" [size]=\"2\">\n        <ion-button\n          size=\"large\"\n          shape=\"round\"\n          [color]=\"equalsFrom(9) ? 'primary' : 'dark'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(9)\"\n          [disabled]=\"!isAllowed(9)\"\n          (click)=\"setInterval(9)\"\n        >\n          {{ getClockButtonContent(9) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-center displayText\" [size]=\"4\">\n        <ion-text [class.fromSelected]=\"segment === Segments.TO\">\n          {{ 'IDEA_UNCOMMON.FTTT.FROM' | translate }}\n          @if (segment === Segments.TO) {\n            <span>{{ msToTimeString(timeIntervalWC.from) }}</span>\n          }\n        </ion-text>\n        @if (segment === Segments.TO) {\n          <ion-text>{{ 'IDEA_UNCOMMON.FTTT.TO' | translate }}</ion-text>\n        }\n      </ion-col>\n      <ion-col class=\"ion-text-right\" [size]=\"2\">\n        <ion-button\n          size=\"large\"\n          shape=\"round\"\n          [color]=\"equalsFrom(3) ? 'primary' : 'dark'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(3)\"\n          [disabled]=\"!isAllowed(3)\"\n          (click)=\"setInterval(3)\"\n        >\n          {{ getClockButtonContent(3) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-center\" [size]=\"2\">\n        <ion-button\n          size=\"small\"\n          [color]=\"equalsFrom(3, minutes) ? 'primary' : 'light'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(3, minutes)\"\n          [disabled]=\"!isAllowed(3, minutes)\"\n          (click)=\"setInterval(3, minutes)\"\n        >\n          {{ getClockButtonContent(3, minutes) }}\n        </ion-button>\n      </ion-col>\n    </ion-row>\n    <ion-row class=\"ion-align-items-center\">\n      <ion-col [size]=\"1\">&nbsp;</ion-col>\n      <ion-col class=\"ion-text-center\" [size]=\"2\">\n        <ion-button\n          size=\"small\"\n          [color]=\"equalsFrom(8, minutes) ? 'primary' : 'light'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(8, minutes)\"\n          [disabled]=\"!isAllowed(8, minutes)\"\n          (click)=\"setInterval(8, minutes)\"\n        >\n          {{ getClockButtonContent(8, minutes) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-left\" [size]=\"2\">\n        <ion-button\n          size=\"large\"\n          shape=\"round\"\n          [color]=\"equalsFrom(8) ? 'primary' : 'dark'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(8)\"\n          [disabled]=\"!isAllowed(8)\"\n          (click)=\"setInterval(8)\"\n        >\n          {{ getClockButtonContent(8) }}\n        </ion-button>\n      </ion-col>\n      <ion-col [size]=\"2\">&nbsp;</ion-col>\n      <ion-col class=\"ion-text-right\" [size]=\"2\">\n        <ion-button\n          size=\"large\"\n          shape=\"round\"\n          [color]=\"equalsFrom(4) ? 'primary' : 'dark'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(4)\"\n          [disabled]=\"!isAllowed(4)\"\n          (click)=\"setInterval(4)\"\n        >\n          {{ getClockButtonContent(4) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-center\" [size]=\"2\">\n        <ion-button\n          size=\"small\"\n          [color]=\"equalsFrom(4, minutes) ? 'primary' : 'light'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(4, minutes)\"\n          [disabled]=\"!isAllowed(4, minutes)\"\n          (click)=\"setInterval(4, minutes)\"\n        >\n          {{ getClockButtonContent(4, minutes) }}\n        </ion-button>\n      </ion-col>\n      <ion-col [size]=\"1\">&nbsp;</ion-col>\n    </ion-row>\n    <ion-row class=\"ion-align-items-center\">\n      <ion-col [size]=\"2\">&nbsp;</ion-col>\n      <ion-col class=\"ion-text-center\" [size]=\"2\">\n        <ion-button\n          size=\"small\"\n          [color]=\"equalsFrom(7, minutes) ? 'primary' : 'light'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(7, minutes)\"\n          [disabled]=\"!isAllowed(7, minutes)\"\n          (click)=\"setInterval(7, minutes)\"\n        >\n          {{ getClockButtonContent(7, minutes) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-left\" [size]=\"2\">\n        <ion-button\n          size=\"large\"\n          shape=\"round\"\n          [color]=\"equalsFrom(7) ? 'primary' : 'dark'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(7)\"\n          [disabled]=\"!isAllowed(7)\"\n          (click)=\"setInterval(7)\"\n        >\n          {{ getClockButtonContent(7) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-right\" [size]=\"2\">\n        <ion-button\n          size=\"large\"\n          shape=\"round\"\n          [color]=\"equalsFrom(5) ? 'primary' : 'dark'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(5)\"\n          [disabled]=\"!isAllowed(5)\"\n          (click)=\"setInterval(5)\"\n        >\n          {{ getClockButtonContent(5) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-center\" [size]=\"2\">\n        <ion-button\n          size=\"small\"\n          [color]=\"equalsFrom(5, minutes) ? 'primary' : 'light'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(5, minutes)\"\n          [disabled]=\"!isAllowed(5, minutes)\"\n          (click)=\"setInterval(5, minutes)\"\n        >\n          {{ getClockButtonContent(5, minutes) }}\n        </ion-button>\n      </ion-col>\n      <ion-col [size]=\"2\">&nbsp;</ion-col>\n    </ion-row>\n    <ion-row class=\"ion-align-items-center\">\n      <ion-col [size]=\"3\">&nbsp;</ion-col>\n      <ion-col class=\"ion-text-right\" [size]=\"2\">\n        <ion-button\n          size=\"small\"\n          [color]=\"equalsFrom(6, minutes) ? 'primary' : 'light'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(6, minutes)\"\n          [disabled]=\"!isAllowed(6, minutes)\"\n          (click)=\"setInterval(6, minutes)\"\n        >\n          {{ getClockButtonContent(6, minutes) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-center\" [size]=\"2\">\n        <ion-button\n          size=\"large\"\n          shape=\"round\"\n          [color]=\"equalsFrom(6) ? 'primary' : 'dark'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(6)\"\n          [disabled]=\"!isAllowed(6)\"\n          (click)=\"setInterval(6)\"\n        >\n          {{ getClockButtonContent(6) }}\n        </ion-button>\n      </ion-col>\n      <ion-col [size]=\"5\">&nbsp;</ion-col>\n    </ion-row>\n    <ion-row class=\"ion-align-items-center\">\n      <ion-col class=\"ion-text-right\" [size]=\"3\" [sizeSm]=\"7\">\n        <ion-text class=\"prefLabel\">{{ 'IDEA_UNCOMMON.FTTT.PERIOD' | translate }}:</ion-text>\n      </ion-col>\n      <ion-col [size]=\"9\" [sizeSm]=\"5\">\n        <ion-segment [value]=\"period\" (ionChange)=\"period = $any($event?.detail?.value) || period\">\n          <ion-segment-button [value]=\"Periods.AM\">\n            <ion-label>{{ 'IDEA_UNCOMMON.FTTT.AM' | translate }}</ion-label>\n          </ion-segment-button>\n          <ion-segment-button [value]=\"Periods.PM\">\n            <ion-label>{{ 'IDEA_UNCOMMON.FTTT.PM' | translate }}</ion-label>\n          </ion-segment-button>\n        </ion-segment>\n      </ion-col>\n    </ion-row>\n    <ion-row class=\"ion-align-items-center\">\n      <ion-col class=\"ion-text-right\" [size]=\"3\" [sizeSm]=\"7\">\n        <ion-text class=\"prefLabel\">{{ 'IDEA_UNCOMMON.FTTT.MINUTES_PREFERENCE' | translate }}:</ion-text>\n      </ion-col>\n      <ion-col [size]=\"9\" [sizeSm]=\"5\">\n        <ion-segment [value]=\"minutes\" (ionChange)=\"minutes = $any($event?.detail?.value) || minutes\">\n          <ion-segment-button value=\"15\">\n            <ion-label>15</ion-label>\n          </ion-segment-button>\n          <ion-segment-button value=\"30\">\n            <ion-label>30</ion-label>\n          </ion-segment-button>\n          <ion-segment-button value=\"45\">\n            <ion-label>45</ion-label>\n          </ion-segment-button>\n        </ion-segment>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n</ion-content>\n", styles: ["ion-grid.clockGrid ion-button[size=large]{width:50px;height:50px;font-size:1.1em;font-weight:700}ion-grid.clockGrid ion-button[size=small]{font-size:.75em}ion-grid.clockGrid ion-button.oppositeMeridian{--border-color: var(--ion-color-medium);--border-style: dashed;--border-width: 1px}ion-grid.clockGrid .displayText ion-text{font-size:1.3em;font-weight:700}ion-grid.clockGrid .displayText ion-text.fromSelected{display:block;padding-bottom:3px;font-size:.9em}ion-grid.clockGrid ion-segment ion-segment-button{min-width:50px;--color-checked: var(--ion-color-dark);--border-color: var(--ion-color-dark)}ion-grid.clockGrid .prefLabel{font-size:.6em;font-weight:700;text-transform:uppercase}\n"], dependencies: [{ kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonSegmentButton, selector: "ion-segment-button", inputs: ["contentId", "disabled", "layout", "mode", "type", "value"] }, { kind: "component", type: IonSegment, selector: "ion-segment", inputs: ["color", "disabled", "mode", "scrollable", "selectOnFocus", "swipeGesture", "value"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { 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: IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: 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: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "pipe", type: IDEATranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: IDEAFromTimeToTimeComponent, isStandalone: true, selector: "idea-from-time-to-time", inputs: { timeInterval: "timeInterval", period: "period", notEarlierThan: "notEarlierThan", notLaterThan: "notLaterThan", title: "title" }, ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"ideaToolbar\">\n    <ion-buttons slot=\"start\">\n      <ion-button [title]=\"'COMMON.CLOSE' | translate\" (click)=\"close()\">\n        <ion-icon name=\"close\" slot=\"icon-only\" />\n      </ion-button>\n    </ion-buttons>\n    <ion-title>{{ title }}</ion-title>\n    <ion-buttons slot=\"end\">\n      <ion-button [title]=\"'COMMON.RESET' | translate\" (click)=\"reset()\">\n        <ion-icon name=\"arrow-undo\" slot=\"icon-only\" />\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n<ion-content>\n  <ion-grid class=\"clockGrid\">\n    <ion-row class=\"ion-align-items-center\">\n      <ion-col [size]=\"5\">&nbsp;</ion-col>\n      <ion-col class=\"ion-text-center\" [size]=\"2\">\n        <ion-button\n          size=\"large\"\n          shape=\"round\"\n          [color]=\"equalsFrom(12) ? 'primary' : 'dark'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(12)\"\n          [disabled]=\"!isAllowed(12)\"\n          (click)=\"setInterval(12)\"\n        >\n          {{ getClockButtonContent(12) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-left\" [size]=\"2\">\n        <ion-button\n          size=\"small\"\n          [color]=\"equalsFrom(12, minutes) ? 'primary' : 'light'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(12, minutes)\"\n          [disabled]=\"!isAllowed(12, minutes)\"\n          (click)=\"setInterval(12, minutes)\"\n        >\n          {{ getClockButtonContent(12, minutes) }}\n        </ion-button>\n      </ion-col>\n      <ion-col [size]=\"3\">&nbsp;</ion-col>\n    </ion-row>\n    <ion-row class=\"ion-align-items-center\">\n      <ion-col [size]=\"2\">&nbsp;</ion-col>\n      <ion-col class=\"ion-text-center\" [size]=\"2\">\n        <ion-button\n          size=\"small\"\n          [color]=\"equalsFrom(11, minutes) ? 'primary' : 'light'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(11, minutes)\"\n          [disabled]=\"!isAllowed(11, minutes)\"\n          (click)=\"setInterval(11, minutes)\"\n        >\n          {{ getClockButtonContent(11, minutes) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-left\" [size]=\"2\">\n        <ion-button\n          size=\"large\"\n          shape=\"round\"\n          [color]=\"equalsFrom(11) ? 'primary' : 'dark'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(11)\"\n          [disabled]=\"!isAllowed(11)\"\n          (click)=\"setInterval(11)\"\n        >\n          {{ getClockButtonContent(11) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-right\" [size]=\"2\">\n        <ion-button\n          size=\"large\"\n          shape=\"round\"\n          [color]=\"equalsFrom(1) ? 'primary' : 'dark'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(1)\"\n          [disabled]=\"!isAllowed(1)\"\n          (click)=\"setInterval(1)\"\n        >\n          {{ getClockButtonContent(1) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-center\" [size]=\"2\">\n        <ion-button\n          size=\"small\"\n          [color]=\"equalsFrom(1, minutes) ? 'primary' : 'light'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(1, minutes)\"\n          [disabled]=\"!isAllowed(1, minutes)\"\n          (click)=\"setInterval(1, minutes)\"\n        >\n          {{ getClockButtonContent(1, minutes) }}\n        </ion-button>\n      </ion-col>\n      <ion-col [size]=\"2\">&nbsp;</ion-col>\n    </ion-row>\n    <ion-row class=\"ion-align-items-center\">\n      <ion-col [size]=\"1\">&nbsp;</ion-col>\n      <ion-col class=\"ion-text-center\" [size]=\"2\">\n        <ion-button\n          size=\"small\"\n          [color]=\"equalsFrom(10, minutes) ? 'primary' : 'light'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(10, minutes)\"\n          [disabled]=\"!isAllowed(10, minutes)\"\n          (click)=\"setInterval(10, minutes)\"\n        >\n          {{ getClockButtonContent(10, minutes) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-left\" [size]=\"2\">\n        <ion-button\n          size=\"large\"\n          shape=\"round\"\n          [color]=\"equalsFrom(10) ? 'primary' : 'dark'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(10)\"\n          [disabled]=\"!isAllowed(10)\"\n          (click)=\"setInterval(10)\"\n        >\n          {{ getClockButtonContent(10) }}\n        </ion-button>\n      </ion-col>\n      <ion-col [size]=\"2\">&nbsp;</ion-col>\n      <ion-col class=\"ion-text-right\" [size]=\"2\">\n        <ion-button\n          size=\"large\"\n          shape=\"round\"\n          [color]=\"equalsFrom(2) ? 'primary' : 'dark'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(2)\"\n          [disabled]=\"!isAllowed(2)\"\n          (click)=\"setInterval(2)\"\n        >\n          {{ getClockButtonContent(2) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-center\" [size]=\"2\">\n        <ion-button\n          size=\"small\"\n          [color]=\"equalsFrom(2, minutes) ? 'primary' : 'light'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(2, minutes)\"\n          [disabled]=\"!isAllowed(2, minutes)\"\n          (click)=\"setInterval(2, minutes)\"\n        >\n          {{ getClockButtonContent(2, minutes) }}\n        </ion-button>\n      </ion-col>\n      <ion-col [size]=\"1\">&nbsp;</ion-col>\n    </ion-row>\n    <ion-row class=\"ion-align-items-center\">\n      <ion-col class=\"ion-text-center\" [size]=\"2\">\n        <ion-button\n          size=\"small\"\n          [color]=\"equalsFrom(9, minutes) ? 'primary' : 'light'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(9, minutes)\"\n          [disabled]=\"!isAllowed(9, minutes)\"\n          (click)=\"setInterval(9, minutes)\"\n        >\n          {{ getClockButtonContent(9, minutes) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-left\" [size]=\"2\">\n        <ion-button\n          size=\"large\"\n          shape=\"round\"\n          [color]=\"equalsFrom(9) ? 'primary' : 'dark'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(9)\"\n          [disabled]=\"!isAllowed(9)\"\n          (click)=\"setInterval(9)\"\n        >\n          {{ getClockButtonContent(9) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-center displayText\" [size]=\"4\">\n        <ion-text [class.fromSelected]=\"segment === Segments.TO\">\n          {{ 'IDEA_UNCOMMON.FTTT.FROM' | translate }}\n          @if (segment === Segments.TO) {\n            <span>{{ msToTimeString(timeIntervalWC.from) }}</span>\n          }\n        </ion-text>\n        @if (segment === Segments.TO) {\n          <ion-text>{{ 'IDEA_UNCOMMON.FTTT.TO' | translate }}</ion-text>\n        }\n      </ion-col>\n      <ion-col class=\"ion-text-right\" [size]=\"2\">\n        <ion-button\n          size=\"large\"\n          shape=\"round\"\n          [color]=\"equalsFrom(3) ? 'primary' : 'dark'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(3)\"\n          [disabled]=\"!isAllowed(3)\"\n          (click)=\"setInterval(3)\"\n        >\n          {{ getClockButtonContent(3) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-center\" [size]=\"2\">\n        <ion-button\n          size=\"small\"\n          [color]=\"equalsFrom(3, minutes) ? 'primary' : 'light'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(3, minutes)\"\n          [disabled]=\"!isAllowed(3, minutes)\"\n          (click)=\"setInterval(3, minutes)\"\n        >\n          {{ getClockButtonContent(3, minutes) }}\n        </ion-button>\n      </ion-col>\n    </ion-row>\n    <ion-row class=\"ion-align-items-center\">\n      <ion-col [size]=\"1\">&nbsp;</ion-col>\n      <ion-col class=\"ion-text-center\" [size]=\"2\">\n        <ion-button\n          size=\"small\"\n          [color]=\"equalsFrom(8, minutes) ? 'primary' : 'light'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(8, minutes)\"\n          [disabled]=\"!isAllowed(8, minutes)\"\n          (click)=\"setInterval(8, minutes)\"\n        >\n          {{ getClockButtonContent(8, minutes) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-left\" [size]=\"2\">\n        <ion-button\n          size=\"large\"\n          shape=\"round\"\n          [color]=\"equalsFrom(8) ? 'primary' : 'dark'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(8)\"\n          [disabled]=\"!isAllowed(8)\"\n          (click)=\"setInterval(8)\"\n        >\n          {{ getClockButtonContent(8) }}\n        </ion-button>\n      </ion-col>\n      <ion-col [size]=\"2\">&nbsp;</ion-col>\n      <ion-col class=\"ion-text-right\" [size]=\"2\">\n        <ion-button\n          size=\"large\"\n          shape=\"round\"\n          [color]=\"equalsFrom(4) ? 'primary' : 'dark'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(4)\"\n          [disabled]=\"!isAllowed(4)\"\n          (click)=\"setInterval(4)\"\n        >\n          {{ getClockButtonContent(4) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-center\" [size]=\"2\">\n        <ion-button\n          size=\"small\"\n          [color]=\"equalsFrom(4, minutes) ? 'primary' : 'light'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(4, minutes)\"\n          [disabled]=\"!isAllowed(4, minutes)\"\n          (click)=\"setInterval(4, minutes)\"\n        >\n          {{ getClockButtonContent(4, minutes) }}\n        </ion-button>\n      </ion-col>\n      <ion-col [size]=\"1\">&nbsp;</ion-col>\n    </ion-row>\n    <ion-row class=\"ion-align-items-center\">\n      <ion-col [size]=\"2\">&nbsp;</ion-col>\n      <ion-col class=\"ion-text-center\" [size]=\"2\">\n        <ion-button\n          size=\"small\"\n          [color]=\"equalsFrom(7, minutes) ? 'primary' : 'light'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(7, minutes)\"\n          [disabled]=\"!isAllowed(7, minutes)\"\n          (click)=\"setInterval(7, minutes)\"\n        >\n          {{ getClockButtonContent(7, minutes) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-left\" [size]=\"2\">\n        <ion-button\n          size=\"large\"\n          shape=\"round\"\n          [color]=\"equalsFrom(7) ? 'primary' : 'dark'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(7)\"\n          [disabled]=\"!isAllowed(7)\"\n          (click)=\"setInterval(7)\"\n        >\n          {{ getClockButtonContent(7) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-right\" [size]=\"2\">\n        <ion-button\n          size=\"large\"\n          shape=\"round\"\n          [color]=\"equalsFrom(5) ? 'primary' : 'dark'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(5)\"\n          [disabled]=\"!isAllowed(5)\"\n          (click)=\"setInterval(5)\"\n        >\n          {{ getClockButtonContent(5) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-center\" [size]=\"2\">\n        <ion-button\n          size=\"small\"\n          [color]=\"equalsFrom(5, minutes) ? 'primary' : 'light'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(5, minutes)\"\n          [disabled]=\"!isAllowed(5, minutes)\"\n          (click)=\"setInterval(5, minutes)\"\n        >\n          {{ getClockButtonContent(5, minutes) }}\n        </ion-button>\n      </ion-col>\n      <ion-col [size]=\"2\">&nbsp;</ion-col>\n    </ion-row>\n    <ion-row class=\"ion-align-items-center\">\n      <ion-col [size]=\"3\">&nbsp;</ion-col>\n      <ion-col class=\"ion-text-right\" [size]=\"2\">\n        <ion-button\n          size=\"small\"\n          [color]=\"equalsFrom(6, minutes) ? 'primary' : 'light'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(6, minutes)\"\n          [disabled]=\"!isAllowed(6, minutes)\"\n          (click)=\"setInterval(6, minutes)\"\n        >\n          {{ getClockButtonContent(6, minutes) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-center\" [size]=\"2\">\n        <ion-button\n          size=\"large\"\n          shape=\"round\"\n          [color]=\"equalsFrom(6) ? 'primary' : 'dark'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(6)\"\n          [disabled]=\"!isAllowed(6)\"\n          (click)=\"setInterval(6)\"\n        >\n          {{ getClockButtonContent(6) }}\n        </ion-button>\n      </ion-col>\n      <ion-col [size]=\"5\">&nbsp;</ion-col>\n    </ion-row>\n    <ion-row class=\"ion-align-items-center\">\n      <ion-col class=\"ion-text-right\" [size]=\"3\" [sizeSm]=\"7\">\n        <ion-text class=\"prefLabel\">{{ 'IDEA_UNCOMMON.FTTT.PERIOD' | translate }}:</ion-text>\n      </ion-col>\n      <ion-col [size]=\"9\" [sizeSm]=\"5\">\n        <ion-segment [value]=\"period\" (ionChange)=\"period = $any($event?.detail?.value) || period\">\n          <ion-segment-button [value]=\"Periods.AM\">\n            <ion-label>{{ 'IDEA_UNCOMMON.FTTT.AM' | translate }}</ion-label>\n          </ion-segment-button>\n          <ion-segment-button [value]=\"Periods.PM\">\n            <ion-label>{{ 'IDEA_UNCOMMON.FTTT.PM' | translate }}</ion-label>\n          </ion-segment-button>\n        </ion-segment>\n      </ion-col>\n    </ion-row>\n    <ion-row class=\"ion-align-items-center\">\n      <ion-col class=\"ion-text-right\" [size]=\"3\" [sizeSm]=\"7\">\n        <ion-text class=\"prefLabel\">{{ 'IDEA_UNCOMMON.FTTT.MINUTES_PREFERENCE' | translate }}:</ion-text>\n      </ion-col>\n      <ion-col [size]=\"9\" [sizeSm]=\"5\">\n        <ion-segment [value]=\"minutes\" (ionChange)=\"minutes = $any($event?.detail?.value) || minutes\">\n          <ion-segment-button value=\"15\">\n            <ion-label>15</ion-label>\n          </ion-segment-button>\n          <ion-segment-button value=\"30\">\n            <ion-label>30</ion-label>\n          </ion-segment-button>\n          <ion-segment-button value=\"45\">\n            <ion-label>45</ion-label>\n          </ion-segment-button>\n        </ion-segment>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n</ion-content>\n", styles: ["ion-grid.clockGrid ion-button[size=large]{width:50px;height:50px;font-size:1.1em;font-weight:700}ion-grid.clockGrid ion-button[size=small]{font-size:.75em}ion-grid.clockGrid ion-button.oppositeMeridian{--border-color: var(--ion-color-medium);--border-style: dashed;--border-width: 1px}ion-grid.clockGrid .displayText ion-text{font-size:1.3em;font-weight:700}ion-grid.clockGrid .displayText ion-text.fromSelected{display:block;padding-bottom:3px;font-size:.9em}ion-grid.clockGrid ion-segment ion-segment-button{min-width:50px;--color-checked: var(--ion-color-dark);--border-color: var(--ion-color-dark)}ion-grid.clockGrid .prefLabel{font-size:.6em;font-weight:700;text-transform:uppercase}\n"], dependencies: [{ kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonSegmentButton, selector: "ion-segment-button", inputs: ["contentId", "disabled", "layout", "mode", "type", "value"] }, { kind: "component", type: IonSegment, selector: "ion-segment", inputs: ["color", "disabled", "mode", "scrollable", "selectOnFocus", "swipeGesture", "value"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { 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: IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: 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: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "pipe", type: IDEATranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEAFromTimeToTimeComponent, decorators: [{
             type: Component,
@@ -3859,10 +3842,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         IonButtons,
                         IonToolbar,
                         IonHeader
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-header>\n  <ion-toolbar color=\"ideaToolbar\">\n    <ion-buttons slot=\"start\">\n      <ion-button [title]=\"'COMMON.CLOSE' | translate\" (click)=\"close()\">\n        <ion-icon name=\"close\" slot=\"icon-only\" />\n      </ion-button>\n    </ion-buttons>\n    <ion-title>{{ title() }}</ion-title>\n    <ion-buttons slot=\"end\">\n      <ion-button [title]=\"'COMMON.RESET' | translate\" (click)=\"reset()\">\n        <ion-icon name=\"arrow-undo\" slot=\"icon-only\" />\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n<ion-content>\n  <ion-grid class=\"clockGrid\">\n    <ion-row class=\"ion-align-items-center\">\n      <ion-col [size]=\"5\">&nbsp;</ion-col>\n      <ion-col class=\"ion-text-center\" [size]=\"2\">\n        <ion-button\n          size=\"large\"\n          shape=\"round\"\n          [color]=\"equalsFrom(12) ? 'primary' : 'dark'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(12)\"\n          [disabled]=\"!isAllowed(12)\"\n          (click)=\"setInterval(12)\"\n        >\n          {{ getClockButtonContent(12) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-left\" [size]=\"2\">\n        <ion-button\n          size=\"small\"\n          [color]=\"equalsFrom(12, minutes) ? 'primary' : 'light'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(12, minutes)\"\n          [disabled]=\"!isAllowed(12, minutes)\"\n          (click)=\"setInterval(12, minutes)\"\n        >\n          {{ getClockButtonContent(12, minutes) }}\n        </ion-button>\n      </ion-col>\n      <ion-col [size]=\"3\">&nbsp;</ion-col>\n    </ion-row>\n    <ion-row class=\"ion-align-items-center\">\n      <ion-col [size]=\"2\">&nbsp;</ion-col>\n      <ion-col class=\"ion-text-center\" [size]=\"2\">\n        <ion-button\n          size=\"small\"\n          [color]=\"equalsFrom(11, minutes) ? 'primary' : 'light'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(11, minutes)\"\n          [disabled]=\"!isAllowed(11, minutes)\"\n          (click)=\"setInterval(11, minutes)\"\n        >\n          {{ getClockButtonContent(11, minutes) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-left\" [size]=\"2\">\n        <ion-button\n          size=\"large\"\n          shape=\"round\"\n          [color]=\"equalsFrom(11) ? 'primary' : 'dark'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(11)\"\n          [disabled]=\"!isAllowed(11)\"\n          (click)=\"setInterval(11)\"\n        >\n          {{ getClockButtonContent(11) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-right\" [size]=\"2\">\n        <ion-button\n          size=\"large\"\n          shape=\"round\"\n          [color]=\"equalsFrom(1) ? 'primary' : 'dark'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(1)\"\n          [disabled]=\"!isAllowed(1)\"\n          (click)=\"setInterval(1)\"\n        >\n          {{ getClockButtonContent(1) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-center\" [size]=\"2\">\n        <ion-button\n          size=\"small\"\n          [color]=\"equalsFrom(1, minutes) ? 'primary' : 'light'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(1, minutes)\"\n          [disabled]=\"!isAllowed(1, minutes)\"\n          (click)=\"setInterval(1, minutes)\"\n        >\n          {{ getClockButtonContent(1, minutes) }}\n        </ion-button>\n      </ion-col>\n      <ion-col [size]=\"2\">&nbsp;</ion-col>\n    </ion-row>\n    <ion-row class=\"ion-align-items-center\">\n      <ion-col [size]=\"1\">&nbsp;</ion-col>\n      <ion-col class=\"ion-text-center\" [size]=\"2\">\n        <ion-button\n          size=\"small\"\n          [color]=\"equalsFrom(10, minutes) ? 'primary' : 'light'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(10, minutes)\"\n          [disabled]=\"!isAllowed(10, minutes)\"\n          (click)=\"setInterval(10, minutes)\"\n        >\n          {{ getClockButtonContent(10, minutes) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-left\" [size]=\"2\">\n        <ion-button\n          size=\"large\"\n          shape=\"round\"\n          [color]=\"equalsFrom(10) ? 'primary' : 'dark'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(10)\"\n          [disabled]=\"!isAllowed(10)\"\n          (click)=\"setInterval(10)\"\n        >\n          {{ getClockButtonContent(10) }}\n        </ion-button>\n      </ion-col>\n      <ion-col [size]=\"2\">&nbsp;</ion-col>\n      <ion-col class=\"ion-text-right\" [size]=\"2\">\n        <ion-button\n          size=\"large\"\n          shape=\"round\"\n          [color]=\"equalsFrom(2) ? 'primary' : 'dark'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(2)\"\n          [disabled]=\"!isAllowed(2)\"\n          (click)=\"setInterval(2)\"\n        >\n          {{ getClockButtonContent(2) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-center\" [size]=\"2\">\n        <ion-button\n          size=\"small\"\n          [color]=\"equalsFrom(2, minutes) ? 'primary' : 'light'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(2, minutes)\"\n          [disabled]=\"!isAllowed(2, minutes)\"\n          (click)=\"setInterval(2, minutes)\"\n        >\n          {{ getClockButtonContent(2, minutes) }}\n        </ion-button>\n      </ion-col>\n      <ion-col [size]=\"1\">&nbsp;</ion-col>\n    </ion-row>\n    <ion-row class=\"ion-align-items-center\">\n      <ion-col class=\"ion-text-center\" [size]=\"2\">\n        <ion-button\n          size=\"small\"\n          [color]=\"equalsFrom(9, minutes) ? 'primary' : 'light'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(9, minutes)\"\n          [disabled]=\"!isAllowed(9, minutes)\"\n          (click)=\"setInterval(9, minutes)\"\n        >\n          {{ getClockButtonContent(9, minutes) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-left\" [size]=\"2\">\n        <ion-button\n          size=\"large\"\n          shape=\"round\"\n          [color]=\"equalsFrom(9) ? 'primary' : 'dark'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(9)\"\n          [disabled]=\"!isAllowed(9)\"\n          (click)=\"setInterval(9)\"\n        >\n          {{ getClockButtonContent(9) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-center displayText\" [size]=\"4\">\n        <ion-text [class.fromSelected]=\"segment === Segments.TO\">\n          {{ 'IDEA_UNCOMMON.FTTT.FROM' | translate }}\n          @if (segment === Segments.TO) {\n            <span>{{ msToTimeString(timeIntervalWC.from) }}</span>\n          }\n        </ion-text>\n        @if (segment === Segments.TO) {\n          <ion-text>{{ 'IDEA_UNCOMMON.FTTT.TO' | translate }}</ion-text>\n        }\n      </ion-col>\n      <ion-col class=\"ion-text-right\" [size]=\"2\">\n        <ion-button\n          size=\"large\"\n          shape=\"round\"\n          [color]=\"equalsFrom(3) ? 'primary' : 'dark'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(3)\"\n          [disabled]=\"!isAllowed(3)\"\n          (click)=\"setInterval(3)\"\n        >\n          {{ getClockButtonContent(3) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-center\" [size]=\"2\">\n        <ion-button\n          size=\"small\"\n          [color]=\"equalsFrom(3, minutes) ? 'primary' : 'light'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(3, minutes)\"\n          [disabled]=\"!isAllowed(3, minutes)\"\n          (click)=\"setInterval(3, minutes)\"\n        >\n          {{ getClockButtonContent(3, minutes) }}\n        </ion-button>\n      </ion-col>\n    </ion-row>\n    <ion-row class=\"ion-align-items-center\">\n      <ion-col [size]=\"1\">&nbsp;</ion-col>\n      <ion-col class=\"ion-text-center\" [size]=\"2\">\n        <ion-button\n          size=\"small\"\n          [color]=\"equalsFrom(8, minutes) ? 'primary' : 'light'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(8, minutes)\"\n          [disabled]=\"!isAllowed(8, minutes)\"\n          (click)=\"setInterval(8, minutes)\"\n        >\n          {{ getClockButtonContent(8, minutes) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-left\" [size]=\"2\">\n        <ion-button\n          size=\"large\"\n          shape=\"round\"\n          [color]=\"equalsFrom(8) ? 'primary' : 'dark'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(8)\"\n          [disabled]=\"!isAllowed(8)\"\n          (click)=\"setInterval(8)\"\n        >\n          {{ getClockButtonContent(8) }}\n        </ion-button>\n      </ion-col>\n      <ion-col [size]=\"2\">&nbsp;</ion-col>\n      <ion-col class=\"ion-text-right\" [size]=\"2\">\n        <ion-button\n          size=\"large\"\n          shape=\"round\"\n          [color]=\"equalsFrom(4) ? 'primary' : 'dark'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(4)\"\n          [disabled]=\"!isAllowed(4)\"\n          (click)=\"setInterval(4)\"\n        >\n          {{ getClockButtonContent(4) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-center\" [size]=\"2\">\n        <ion-button\n          size=\"small\"\n          [color]=\"equalsFrom(4, minutes) ? 'primary' : 'light'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(4, minutes)\"\n          [disabled]=\"!isAllowed(4, minutes)\"\n          (click)=\"setInterval(4, minutes)\"\n        >\n          {{ getClockButtonContent(4, minutes) }}\n        </ion-button>\n      </ion-col>\n      <ion-col [size]=\"1\">&nbsp;</ion-col>\n    </ion-row>\n    <ion-row class=\"ion-align-items-center\">\n      <ion-col [size]=\"2\">&nbsp;</ion-col>\n      <ion-col class=\"ion-text-center\" [size]=\"2\">\n        <ion-button\n          size=\"small\"\n          [color]=\"equalsFrom(7, minutes) ? 'primary' : 'light'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(7, minutes)\"\n          [disabled]=\"!isAllowed(7, minutes)\"\n          (click)=\"setInterval(7, minutes)\"\n        >\n          {{ getClockButtonContent(7, minutes) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-left\" [size]=\"2\">\n        <ion-button\n          size=\"large\"\n          shape=\"round\"\n          [color]=\"equalsFrom(7) ? 'primary' : 'dark'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(7)\"\n          [disabled]=\"!isAllowed(7)\"\n          (click)=\"setInterval(7)\"\n        >\n          {{ getClockButtonContent(7) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-right\" [size]=\"2\">\n        <ion-button\n          size=\"large\"\n          shape=\"round\"\n          [color]=\"equalsFrom(5) ? 'primary' : 'dark'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(5)\"\n          [disabled]=\"!isAllowed(5)\"\n          (click)=\"setInterval(5)\"\n        >\n          {{ getClockButtonContent(5) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-center\" [size]=\"2\">\n        <ion-button\n          size=\"small\"\n          [color]=\"equalsFrom(5, minutes) ? 'primary' : 'light'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(5, minutes)\"\n          [disabled]=\"!isAllowed(5, minutes)\"\n          (click)=\"setInterval(5, minutes)\"\n        >\n          {{ getClockButtonContent(5, minutes) }}\n        </ion-button>\n      </ion-col>\n      <ion-col [size]=\"2\">&nbsp;</ion-col>\n    </ion-row>\n    <ion-row class=\"ion-align-items-center\">\n      <ion-col [size]=\"3\">&nbsp;</ion-col>\n      <ion-col class=\"ion-text-right\" [size]=\"2\">\n        <ion-button\n          size=\"small\"\n          [color]=\"equalsFrom(6, minutes) ? 'primary' : 'light'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(6, minutes)\"\n          [disabled]=\"!isAllowed(6, minutes)\"\n          (click)=\"setInterval(6, minutes)\"\n        >\n          {{ getClockButtonContent(6, minutes) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-center\" [size]=\"2\">\n        <ion-button\n          size=\"large\"\n          shape=\"round\"\n          [color]=\"equalsFrom(6) ? 'primary' : 'dark'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(6)\"\n          [disabled]=\"!isAllowed(6)\"\n          (click)=\"setInterval(6)\"\n        >\n          {{ getClockButtonContent(6) }}\n        </ion-button>\n      </ion-col>\n      <ion-col [size]=\"5\">&nbsp;</ion-col>\n    </ion-row>\n    <ion-row class=\"ion-align-items-center\">\n      <ion-col class=\"ion-text-right\" [size]=\"3\" [sizeSm]=\"7\">\n        <ion-text class=\"prefLabel\">{{ 'IDEA_UNCOMMON.FTTT.PERIOD' | translate }}:</ion-text>\n      </ion-col>\n      <ion-col [size]=\"9\" [sizeSm]=\"5\">\n        <ion-segment [value]=\"period\" (ionChange)=\"period = $any($event?.detail?.value) || period\">\n          <ion-segment-button [value]=\"Periods.AM\">\n            <ion-label>{{ 'IDEA_UNCOMMON.FTTT.AM' | translate }}</ion-label>\n          </ion-segment-button>\n          <ion-segment-button [value]=\"Periods.PM\">\n            <ion-label>{{ 'IDEA_UNCOMMON.FTTT.PM' | translate }}</ion-label>\n          </ion-segment-button>\n        </ion-segment>\n      </ion-col>\n    </ion-row>\n    <ion-row class=\"ion-align-items-center\">\n      <ion-col class=\"ion-text-right\" [size]=\"3\" [sizeSm]=\"7\">\n        <ion-text class=\"prefLabel\">{{ 'IDEA_UNCOMMON.FTTT.MINUTES_PREFERENCE' | translate }}:</ion-text>\n      </ion-col>\n      <ion-col [size]=\"9\" [sizeSm]=\"5\">\n        <ion-segment [value]=\"minutes\" (ionChange)=\"minutes = $any($event?.detail?.value) || minutes\">\n          <ion-segment-button value=\"15\">\n            <ion-label>15</ion-label>\n          </ion-segment-button>\n          <ion-segment-button value=\"30\">\n            <ion-label>30</ion-label>\n          </ion-segment-button>\n          <ion-segment-button value=\"45\">\n            <ion-label>45</ion-label>\n          </ion-segment-button>\n        </ion-segment>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n</ion-content>\n", styles: ["ion-grid.clockGrid ion-button[size=large]{width:50px;height:50px;font-size:1.1em;font-weight:700}ion-grid.clockGrid ion-button[size=small]{font-size:.75em}ion-grid.clockGrid ion-button.oppositeMeridian{--border-color: var(--ion-color-medium);--border-style: dashed;--border-width: 1px}ion-grid.clockGrid .displayText ion-text{font-size:1.3em;font-weight:700}ion-grid.clockGrid .displayText ion-text.fromSelected{display:block;padding-bottom:3px;font-size:.9em}ion-grid.clockGrid ion-segment ion-segment-button{min-width:50px;--color-checked: var(--ion-color-dark);--border-color: var(--ion-color-dark)}ion-grid.clockGrid .prefLabel{font-size:.6em;font-weight:700;text-transform:uppercase}\n"] }]
-        }], propDecorators: { timeInterval: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeInterval", required: false }] }], period: [{
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-header>\n  <ion-toolbar color=\"ideaToolbar\">\n    <ion-buttons slot=\"start\">\n      <ion-button [title]=\"'COMMON.CLOSE' | translate\" (click)=\"close()\">\n        <ion-icon name=\"close\" slot=\"icon-only\" />\n      </ion-button>\n    </ion-buttons>\n    <ion-title>{{ title }}</ion-title>\n    <ion-buttons slot=\"end\">\n      <ion-button [title]=\"'COMMON.RESET' | translate\" (click)=\"reset()\">\n        <ion-icon name=\"arrow-undo\" slot=\"icon-only\" />\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n<ion-content>\n  <ion-grid class=\"clockGrid\">\n    <ion-row class=\"ion-align-items-center\">\n      <ion-col [size]=\"5\">&nbsp;</ion-col>\n      <ion-col class=\"ion-text-center\" [size]=\"2\">\n        <ion-button\n          size=\"large\"\n          shape=\"round\"\n          [color]=\"equalsFrom(12) ? 'primary' : 'dark'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(12)\"\n          [disabled]=\"!isAllowed(12)\"\n          (click)=\"setInterval(12)\"\n        >\n          {{ getClockButtonContent(12) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-left\" [size]=\"2\">\n        <ion-button\n          size=\"small\"\n          [color]=\"equalsFrom(12, minutes) ? 'primary' : 'light'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(12, minutes)\"\n          [disabled]=\"!isAllowed(12, minutes)\"\n          (click)=\"setInterval(12, minutes)\"\n        >\n          {{ getClockButtonContent(12, minutes) }}\n        </ion-button>\n      </ion-col>\n      <ion-col [size]=\"3\">&nbsp;</ion-col>\n    </ion-row>\n    <ion-row class=\"ion-align-items-center\">\n      <ion-col [size]=\"2\">&nbsp;</ion-col>\n      <ion-col class=\"ion-text-center\" [size]=\"2\">\n        <ion-button\n          size=\"small\"\n          [color]=\"equalsFrom(11, minutes) ? 'primary' : 'light'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(11, minutes)\"\n          [disabled]=\"!isAllowed(11, minutes)\"\n          (click)=\"setInterval(11, minutes)\"\n        >\n          {{ getClockButtonContent(11, minutes) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-left\" [size]=\"2\">\n        <ion-button\n          size=\"large\"\n          shape=\"round\"\n          [color]=\"equalsFrom(11) ? 'primary' : 'dark'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(11)\"\n          [disabled]=\"!isAllowed(11)\"\n          (click)=\"setInterval(11)\"\n        >\n          {{ getClockButtonContent(11) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-right\" [size]=\"2\">\n        <ion-button\n          size=\"large\"\n          shape=\"round\"\n          [color]=\"equalsFrom(1) ? 'primary' : 'dark'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(1)\"\n          [disabled]=\"!isAllowed(1)\"\n          (click)=\"setInterval(1)\"\n        >\n          {{ getClockButtonContent(1) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-center\" [size]=\"2\">\n        <ion-button\n          size=\"small\"\n          [color]=\"equalsFrom(1, minutes) ? 'primary' : 'light'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(1, minutes)\"\n          [disabled]=\"!isAllowed(1, minutes)\"\n          (click)=\"setInterval(1, minutes)\"\n        >\n          {{ getClockButtonContent(1, minutes) }}\n        </ion-button>\n      </ion-col>\n      <ion-col [size]=\"2\">&nbsp;</ion-col>\n    </ion-row>\n    <ion-row class=\"ion-align-items-center\">\n      <ion-col [size]=\"1\">&nbsp;</ion-col>\n      <ion-col class=\"ion-text-center\" [size]=\"2\">\n        <ion-button\n          size=\"small\"\n          [color]=\"equalsFrom(10, minutes) ? 'primary' : 'light'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(10, minutes)\"\n          [disabled]=\"!isAllowed(10, minutes)\"\n          (click)=\"setInterval(10, minutes)\"\n        >\n          {{ getClockButtonContent(10, minutes) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-left\" [size]=\"2\">\n        <ion-button\n          size=\"large\"\n          shape=\"round\"\n          [color]=\"equalsFrom(10) ? 'primary' : 'dark'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(10)\"\n          [disabled]=\"!isAllowed(10)\"\n          (click)=\"setInterval(10)\"\n        >\n          {{ getClockButtonContent(10) }}\n        </ion-button>\n      </ion-col>\n      <ion-col [size]=\"2\">&nbsp;</ion-col>\n      <ion-col class=\"ion-text-right\" [size]=\"2\">\n        <ion-button\n          size=\"large\"\n          shape=\"round\"\n          [color]=\"equalsFrom(2) ? 'primary' : 'dark'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(2)\"\n          [disabled]=\"!isAllowed(2)\"\n          (click)=\"setInterval(2)\"\n        >\n          {{ getClockButtonContent(2) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-center\" [size]=\"2\">\n        <ion-button\n          size=\"small\"\n          [color]=\"equalsFrom(2, minutes) ? 'primary' : 'light'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(2, minutes)\"\n          [disabled]=\"!isAllowed(2, minutes)\"\n          (click)=\"setInterval(2, minutes)\"\n        >\n          {{ getClockButtonContent(2, minutes) }}\n        </ion-button>\n      </ion-col>\n      <ion-col [size]=\"1\">&nbsp;</ion-col>\n    </ion-row>\n    <ion-row class=\"ion-align-items-center\">\n      <ion-col class=\"ion-text-center\" [size]=\"2\">\n        <ion-button\n          size=\"small\"\n          [color]=\"equalsFrom(9, minutes) ? 'primary' : 'light'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(9, minutes)\"\n          [disabled]=\"!isAllowed(9, minutes)\"\n          (click)=\"setInterval(9, minutes)\"\n        >\n          {{ getClockButtonContent(9, minutes) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-left\" [size]=\"2\">\n        <ion-button\n          size=\"large\"\n          shape=\"round\"\n          [color]=\"equalsFrom(9) ? 'primary' : 'dark'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(9)\"\n          [disabled]=\"!isAllowed(9)\"\n          (click)=\"setInterval(9)\"\n        >\n          {{ getClockButtonContent(9) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-center displayText\" [size]=\"4\">\n        <ion-text [class.fromSelected]=\"segment === Segments.TO\">\n          {{ 'IDEA_UNCOMMON.FTTT.FROM' | translate }}\n          @if (segment === Segments.TO) {\n            <span>{{ msToTimeString(timeIntervalWC.from) }}</span>\n          }\n        </ion-text>\n        @if (segment === Segments.TO) {\n          <ion-text>{{ 'IDEA_UNCOMMON.FTTT.TO' | translate }}</ion-text>\n        }\n      </ion-col>\n      <ion-col class=\"ion-text-right\" [size]=\"2\">\n        <ion-button\n          size=\"large\"\n          shape=\"round\"\n          [color]=\"equalsFrom(3) ? 'primary' : 'dark'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(3)\"\n          [disabled]=\"!isAllowed(3)\"\n          (click)=\"setInterval(3)\"\n        >\n          {{ getClockButtonContent(3) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-center\" [size]=\"2\">\n        <ion-button\n          size=\"small\"\n          [color]=\"equalsFrom(3, minutes) ? 'primary' : 'light'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(3, minutes)\"\n          [disabled]=\"!isAllowed(3, minutes)\"\n          (click)=\"setInterval(3, minutes)\"\n        >\n          {{ getClockButtonContent(3, minutes) }}\n        </ion-button>\n      </ion-col>\n    </ion-row>\n    <ion-row class=\"ion-align-items-center\">\n      <ion-col [size]=\"1\">&nbsp;</ion-col>\n      <ion-col class=\"ion-text-center\" [size]=\"2\">\n        <ion-button\n          size=\"small\"\n          [color]=\"equalsFrom(8, minutes) ? 'primary' : 'light'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(8, minutes)\"\n          [disabled]=\"!isAllowed(8, minutes)\"\n          (click)=\"setInterval(8, minutes)\"\n        >\n          {{ getClockButtonContent(8, minutes) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-left\" [size]=\"2\">\n        <ion-button\n          size=\"large\"\n          shape=\"round\"\n          [color]=\"equalsFrom(8) ? 'primary' : 'dark'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(8)\"\n          [disabled]=\"!isAllowed(8)\"\n          (click)=\"setInterval(8)\"\n        >\n          {{ getClockButtonContent(8) }}\n        </ion-button>\n      </ion-col>\n      <ion-col [size]=\"2\">&nbsp;</ion-col>\n      <ion-col class=\"ion-text-right\" [size]=\"2\">\n        <ion-button\n          size=\"large\"\n          shape=\"round\"\n          [color]=\"equalsFrom(4) ? 'primary' : 'dark'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(4)\"\n          [disabled]=\"!isAllowed(4)\"\n          (click)=\"setInterval(4)\"\n        >\n          {{ getClockButtonContent(4) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-center\" [size]=\"2\">\n        <ion-button\n          size=\"small\"\n          [color]=\"equalsFrom(4, minutes) ? 'primary' : 'light'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(4, minutes)\"\n          [disabled]=\"!isAllowed(4, minutes)\"\n          (click)=\"setInterval(4, minutes)\"\n        >\n          {{ getClockButtonContent(4, minutes) }}\n        </ion-button>\n      </ion-col>\n      <ion-col [size]=\"1\">&nbsp;</ion-col>\n    </ion-row>\n    <ion-row class=\"ion-align-items-center\">\n      <ion-col [size]=\"2\">&nbsp;</ion-col>\n      <ion-col class=\"ion-text-center\" [size]=\"2\">\n        <ion-button\n          size=\"small\"\n          [color]=\"equalsFrom(7, minutes) ? 'primary' : 'light'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(7, minutes)\"\n          [disabled]=\"!isAllowed(7, minutes)\"\n          (click)=\"setInterval(7, minutes)\"\n        >\n          {{ getClockButtonContent(7, minutes) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-left\" [size]=\"2\">\n        <ion-button\n          size=\"large\"\n          shape=\"round\"\n          [color]=\"equalsFrom(7) ? 'primary' : 'dark'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(7)\"\n          [disabled]=\"!isAllowed(7)\"\n          (click)=\"setInterval(7)\"\n        >\n          {{ getClockButtonContent(7) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-right\" [size]=\"2\">\n        <ion-button\n          size=\"large\"\n          shape=\"round\"\n          [color]=\"equalsFrom(5) ? 'primary' : 'dark'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(5)\"\n          [disabled]=\"!isAllowed(5)\"\n          (click)=\"setInterval(5)\"\n        >\n          {{ getClockButtonContent(5) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-center\" [size]=\"2\">\n        <ion-button\n          size=\"small\"\n          [color]=\"equalsFrom(5, minutes) ? 'primary' : 'light'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(5, minutes)\"\n          [disabled]=\"!isAllowed(5, minutes)\"\n          (click)=\"setInterval(5, minutes)\"\n        >\n          {{ getClockButtonContent(5, minutes) }}\n        </ion-button>\n      </ion-col>\n      <ion-col [size]=\"2\">&nbsp;</ion-col>\n    </ion-row>\n    <ion-row class=\"ion-align-items-center\">\n      <ion-col [size]=\"3\">&nbsp;</ion-col>\n      <ion-col class=\"ion-text-right\" [size]=\"2\">\n        <ion-button\n          size=\"small\"\n          [color]=\"equalsFrom(6, minutes) ? 'primary' : 'light'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(6, minutes)\"\n          [disabled]=\"!isAllowed(6, minutes)\"\n          (click)=\"setInterval(6, minutes)\"\n        >\n          {{ getClockButtonContent(6, minutes) }}\n        </ion-button>\n      </ion-col>\n      <ion-col class=\"ion-text-center\" [size]=\"2\">\n        <ion-button\n          size=\"large\"\n          shape=\"round\"\n          [color]=\"equalsFrom(6) ? 'primary' : 'dark'\"\n          [class.oppositeMeridian]=\"isHourOfOppositeMeridian(6)\"\n          [disabled]=\"!isAllowed(6)\"\n          (click)=\"setInterval(6)\"\n        >\n          {{ getClockButtonContent(6) }}\n        </ion-button>\n      </ion-col>\n      <ion-col [size]=\"5\">&nbsp;</ion-col>\n    </ion-row>\n    <ion-row class=\"ion-align-items-center\">\n      <ion-col class=\"ion-text-right\" [size]=\"3\" [sizeSm]=\"7\">\n        <ion-text class=\"prefLabel\">{{ 'IDEA_UNCOMMON.FTTT.PERIOD' | translate }}:</ion-text>\n      </ion-col>\n      <ion-col [size]=\"9\" [sizeSm]=\"5\">\n        <ion-segment [value]=\"period\" (ionChange)=\"period = $any($event?.detail?.value) || period\">\n          <ion-segment-button [value]=\"Periods.AM\">\n            <ion-label>{{ 'IDEA_UNCOMMON.FTTT.AM' | translate }}</ion-label>\n          </ion-segment-button>\n          <ion-segment-button [value]=\"Periods.PM\">\n            <ion-label>{{ 'IDEA_UNCOMMON.FTTT.PM' | translate }}</ion-label>\n          </ion-segment-button>\n        </ion-segment>\n      </ion-col>\n    </ion-row>\n    <ion-row class=\"ion-align-items-center\">\n      <ion-col class=\"ion-text-right\" [size]=\"3\" [sizeSm]=\"7\">\n        <ion-text class=\"prefLabel\">{{ 'IDEA_UNCOMMON.FTTT.MINUTES_PREFERENCE' | translate }}:</ion-text>\n      </ion-col>\n      <ion-col [size]=\"9\" [sizeSm]=\"5\">\n        <ion-segment [value]=\"minutes\" (ionChange)=\"minutes = $any($event?.detail?.value) || minutes\">\n          <ion-segment-button value=\"15\">\n            <ion-label>15</ion-label>\n          </ion-segment-button>\n          <ion-segment-button value=\"30\">\n            <ion-label>30</ion-label>\n          </ion-segment-button>\n          <ion-segment-button value=\"45\">\n            <ion-label>45</ion-label>\n          </ion-segment-button>\n        </ion-segment>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n</ion-content>\n", styles: ["ion-grid.clockGrid ion-button[size=large]{width:50px;height:50px;font-size:1.1em;font-weight:700}ion-grid.clockGrid ion-button[size=small]{font-size:.75em}ion-grid.clockGrid ion-button.oppositeMeridian{--border-color: var(--ion-color-medium);--border-style: dashed;--border-width: 1px}ion-grid.clockGrid .displayText ion-text{font-size:1.3em;font-weight:700}ion-grid.clockGrid .displayText ion-text.fromSelected{display:block;padding-bottom:3px;font-size:.9em}ion-grid.clockGrid ion-segment ion-segment-button{min-width:50px;--color-checked: var(--ion-color-dark);--border-color: var(--ion-color-dark)}ion-grid.clockGrid .prefLabel{font-size:.6em;font-weight:700;text-transform:uppercase}\n"] }]
+        }], propDecorators: { timeInterval: [{
+                type: Input
+            }], period: [{
+                type: Input
+            }], notEarlierThan: [{
                 type: Input
-            }], notEarlierThan: [{ type: i0.Input, args: [{ isSignal: true, alias: "notEarlierThan", required: false }] }], notLaterThan: [{ type: i0.Input, args: [{ isSignal: true, alias: "notLaterThan", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }] } });
+            }], notLaterThan: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }] } });
 /**
  * The two stages of the component, to pick the start and the end of the interval.
  */