@idea-ionic/uncommon 8.10.2 → 8.11.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/fesm2022/idea-ionic-uncommon.mjs +753 -634
  2. package/fesm2022/idea-ionic-uncommon.mjs.map +1 -1
  3. package/package.json +15 -15
  4. package/{index.d.ts → types/idea-ionic-uncommon.d.ts} +153 -150
package/fesm2022/idea-ionic-uncommon.mjs CHANGED
@@ -1,7 +1,5 @@
1
- import * as i1$1 from '@angular/common';
2
- import { CommonModule } from '@angular/common';
3
1
  import * as i0 from '@angular/core';
4
- import { EventEmitter, ViewChild, Input, Output, Component, inject, Injectable } from '@angular/core';
2
+ import { output, input, viewChild, Input, ChangeDetectionStrategy, Component, inject, Injectable, ChangeDetectorRef } from '@angular/core';
5
3
  import * as i1 from '@angular/forms';
6
4
  import { FormsModule } from '@angular/forms';
7
5
  import { IonText, IonList, IonInput, IonItem, IonAccordion, IonAccordionGroup, Platform, IonButton, IonIcon, IonLabel, IonSpinner, IonCardContent, IonCard, PopoverController, IonAvatar, IonContent, IonGrid, IonRow, IonCol, AlertController, ModalController, IonFooter, IonButtons, IonTitle, IonToolbar, IonHeader, IonCardTitle, IonCardHeader, IonImg, IonTextarea, IonListHeader, IonFab, IonFabButton, IonBadge, IonSegmentButton, IonSegment } from '@ionic/angular/standalone';
@@ -14,47 +12,78 @@ import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
14
12
  import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
15
13
  import { Observable } from 'rxjs';
16
14
  import { Network } from '@capacitor/network';
15
+ import * as i1$1 from '@angular/common';
16
+ import { CommonModule } from '@angular/common';
17
17
  import { ActivatedRoute } from '@angular/router';
18
18
  import { PushNotifications } from '@capacitor/push-notifications';
19
19
 
20
20
  class IDEAAddressComponent {
21
21
  constructor() {
22
- this.addressChange = new EventEmitter();
22
+ this.addressChange = output();
23
23
  /**
24
24
  * If true, show the field `contact`.
25
25
  */
26
- this.showContact = false;
26
+ this.showContact = input(false, /* @ts-ignore */
27
+ ...(ngDevMode ? [{ debugName: "showContact" }] : /* istanbul ignore next */ []));
27
28
  /**
28
29
  * If true, show the field `address2`.
29
30
  */
30
- this.showAddress2 = false;
31
+ this.showAddress2 = input(false, /* @ts-ignore */
32
+ ...(ngDevMode ? [{ debugName: "showAddress2" }] : /* istanbul ignore next */ []));
31
33
  /**
32
34
  * If true, show the field `phone`.
33
35
  */
34
- this.showPhone = false;
36
+ this.showPhone = input(false, /* @ts-ignore */
37
+ ...(ngDevMode ? [{ debugName: "showPhone" }] : /* istanbul ignore next */ []));
35
38
  /**
36
39
  * If true, show the field `email`.
37
40
  */
38
- this.showEmail = false;
41
+ this.showEmail = input(false, /* @ts-ignore */
42
+ ...(ngDevMode ? [{ debugName: "showEmail" }] : /* istanbul ignore next */ []));
39
43
  /**
40
44
  * Whether the fields are editable or disabled.
41
45
  */
42
- this.editMode = true;
46
+ this.editMode = input(true, /* @ts-ignore */
47
+ ...(ngDevMode ? [{ debugName: "editMode" }] : /* istanbul ignore next */ []));
43
48
  /**
44
49
  * If true, show obligatory dots.
45
50
  */
46
- this.obligatory = false;
51
+ this.obligatory = input(false, /* @ts-ignore */
52
+ ...(ngDevMode ? [{ debugName: "obligatory" }] : /* istanbul ignore next */ []));
53
+ /**
54
+ * The lines attribute of the item.
55
+ */
56
+ this.lines = input(/* @ts-ignore */
57
+ ...(ngDevMode ? [undefined, { debugName: "lines" }] : /* istanbul ignore next */ []));
58
+ /**
59
+ * The color for the component.
60
+ */
61
+ this.color = input(/* @ts-ignore */
62
+ ...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
63
+ /**
64
+ * The label to show for the field; if not set, it has a default value.
65
+ */
66
+ this.label = input(/* @ts-ignore */
67
+ ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
68
+ /**
69
+ * The placeholder to show for the field.
70
+ */
71
+ this.placeholder = input(/* @ts-ignore */
72
+ ...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
47
73
  /**
48
74
  * To toggle the detailed view.
49
75
  */
50
- this.openByDefault = false;
76
+ this.openByDefault = input(false, /* @ts-ignore */
77
+ ...(ngDevMode ? [{ debugName: "openByDefault" }] : /* istanbul ignore next */ []));
51
78
  this.Countries = Countries;
79
+ this.accordion = viewChild('accordion', /* @ts-ignore */
80
+ ...(ngDevMode ? [{ debugName: "accordion" }] : /* istanbul ignore next */ []));
52
81
  }
53
82
  ngOnInit() {
54
83
  this.countriesSuggestions = Object.keys(Countries).map(k => new Suggestion({ value: Countries[k], name: k }));
55
84
  }
56
85
  isCollapsed() {
57
- return this.accordion?.value !== 'open';
86
+ return this.accordion()?.value !== 'open';
58
87
  }
59
88
  getCountryName(countryCode) {
60
89
  if (!countryCode)
@@ -68,32 +97,32 @@ class IDEAAddressComponent {
68
97
  this.address.country = suggestion.value;
69
98
  this.addressChange.emit(this.address);
70
99
  }
71
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEAAddressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
72
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: IDEAAddressComponent, isStandalone: true, selector: "idea-address", inputs: { address: "address", showContact: "showContact", showAddress2: "showAddress2", showPhone: "showPhone", showEmail: "showEmail", editMode: "editMode", obligatory: "obligatory", lines: "lines", color: "color", label: "label", placeholder: "placeholder", openByDefault: "openByDefault" }, outputs: { addressChange: "addressChange" }, viewQueries: [{ propertyName: "accordion", first: true, predicate: ["accordion"], descendants: true }], ngImport: i0, template: `
100
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEAAddressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
101
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: IDEAAddressComponent, isStandalone: true, selector: "idea-address", inputs: { address: { classPropertyName: "address", publicName: "address", isSignal: false, isRequired: false, transformFunction: null }, showContact: { classPropertyName: "showContact", publicName: "showContact", isSignal: true, isRequired: false, transformFunction: null }, showAddress2: { classPropertyName: "showAddress2", publicName: "showAddress2", isSignal: true, isRequired: false, transformFunction: null }, showPhone: { classPropertyName: "showPhone", publicName: "showPhone", isSignal: true, isRequired: false, transformFunction: null }, showEmail: { classPropertyName: "showEmail", publicName: "showEmail", isSignal: true, isRequired: false, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null }, obligatory: { classPropertyName: "obligatory", publicName: "obligatory", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, openByDefault: { classPropertyName: "openByDefault", publicName: "openByDefault", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { addressChange: "addressChange" }, viewQueries: [{ propertyName: "accordion", first: true, predicate: ["accordion"], descendants: true, isSignal: true }], ngImport: i0, template: `
73
102
  @if (address) {
74
103
  <ion-accordion-group #accordion>
75
104
  <ion-accordion value="open">
76
- <ion-item slot="header" button [color]="color" [lines]="lines">
105
+ <ion-item slot="header" button [color]="color()" [lines]="lines()">
77
106
  @if (isCollapsed()) {
78
107
  <ion-input
79
108
  readonly
80
109
  [labelPlacement]="isCollapsed() ? 'stacked' : ''"
81
- [label]="label || ('IDEA_UNCOMMON.ADDRESS.COMPLETE_ADDRESS' | translate)"
110
+ [label]="label() || ('IDEA_UNCOMMON.ADDRESS.COMPLETE_ADDRESS' | translate)"
82
111
  [title]="'IDEA_UNCOMMON.ADDRESS.COMPLETE_ADDRESS_HINT' | translate"
83
- [placeholder]="placeholder"
112
+ [placeholder]="placeholder()"
84
113
  [value]="address.getFullAddress()"
85
114
  (ionChange)="addressChange.emit(address)"
86
115
  />
87
116
  }
88
117
  </ion-item>
89
118
  <ion-list slot="content">
90
- @if (showContact) {
91
- <ion-item [color]="color">
119
+ @if (showContact()) {
120
+ <ion-item [color]="color()">
92
121
  <ion-input
93
122
  autocomplete="new"
94
123
  labelPlacement="stacked"
95
124
  [label]="'IDEA_UNCOMMON.ADDRESS.CONTACT' | translate"
96
- [disabled]="!editMode"
125
+ [disabled]="!editMode()"
97
126
  [placeholder]="'IDEA_UNCOMMON.ADDRESS.CONTACT_HINT' | translate"
98
127
  [title]="'IDEA_UNCOMMON.ADDRESS.CONTACT_HINT' | translate"
99
128
  [(ngModel)]="address.contact"
@@ -101,13 +130,13 @@ class IDEAAddressComponent {
101
130
  />
102
131
  </ion-item>
103
132
  }
104
- @if (showEmail) {
105
- <ion-item [color]="color">
133
+ @if (showEmail()) {
134
+ <ion-item [color]="color()">
106
135
  <ion-input
107
136
  autocomplete="new"
108
137
  labelPlacement="stacked"
109
138
  [label]="'IDEA_UNCOMMON.ADDRESS.EMAIL' | translate"
110
- [disabled]="!editMode"
139
+ [disabled]="!editMode()"
111
140
  [placeholder]="'IDEA_UNCOMMON.ADDRESS.EMAIL_HINT' | translate"
112
141
  [title]="'IDEA_UNCOMMON.ADDRESS.EMAIL_HINT' | translate"
113
142
  [(ngModel)]="address.email"
@@ -115,13 +144,13 @@ class IDEAAddressComponent {
115
144
  />
116
145
  </ion-item>
117
146
  }
118
- @if (showPhone) {
119
- <ion-item [color]="color">
147
+ @if (showPhone()) {
148
+ <ion-item [color]="color()">
120
149
  <ion-input
121
150
  autocomplete="new"
122
151
  labelPlacement="stacked"
123
152
  [label]="'IDEA_UNCOMMON.ADDRESS.PHONE' | translate"
124
- [disabled]="!editMode"
153
+ [disabled]="!editMode()"
125
154
  [placeholder]="'IDEA_UNCOMMON.ADDRESS.PHONE_HINT' | translate"
126
155
  [title]="'IDEA_UNCOMMON.ADDRESS.PHONE_HINT' | translate"
127
156
  [(ngModel)]="address.phone"
@@ -129,11 +158,11 @@ class IDEAAddressComponent {
129
158
  />
130
159
  </ion-item>
131
160
  }
132
- <ion-item [color]="color">
161
+ <ion-item [color]="color()">
133
162
  <ion-input
134
163
  autocomplete="new"
135
164
  labelPlacement="stacked"
136
- [disabled]="!editMode"
165
+ [disabled]="!editMode()"
137
166
  [placeholder]="'IDEA_UNCOMMON.ADDRESS.ADDRESS_HINT' | translate"
138
167
  [title]="'IDEA_UNCOMMON.ADDRESS.ADDRESS_HINT' | translate"
139
168
  [(ngModel)]="address.address"
@@ -141,19 +170,19 @@ class IDEAAddressComponent {
141
170
  >
142
171
  <div slot="label">
143
172
  {{ 'IDEA_UNCOMMON.ADDRESS.ADDRESS' | translate }}
144
- @if (editMode && obligatory) {
173
+ @if (editMode() && obligatory()) {
145
174
  <ion-text class="obligatoryDot" />
146
175
  }
147
176
  </div>
148
177
  </ion-input>
149
178
  </ion-item>
150
- @if (showAddress2) {
151
- <ion-item [color]="color">
179
+ @if (showAddress2()) {
180
+ <ion-item [color]="color()">
152
181
  <ion-input
153
182
  autocomplete="new"
154
183
  labelPlacement="stacked"
155
184
  [label]="'IDEA_UNCOMMON.ADDRESS.ADDRESS2' | translate"
156
- [disabled]="!editMode"
185
+ [disabled]="!editMode()"
157
186
  [placeholder]="'IDEA_UNCOMMON.ADDRESS.ADDRESS2_HINT' | translate"
158
187
  [title]="'IDEA_UNCOMMON.ADDRESS.ADDRESS2_HINT' | translate"
159
188
  [(ngModel)]="address.address2"
@@ -161,22 +190,22 @@ class IDEAAddressComponent {
161
190
  />
162
191
  </ion-item>
163
192
  }
164
- <ion-item [color]="color">
193
+ <ion-item [color]="color()">
165
194
  <ion-input
166
195
  autocomplete="new"
167
196
  labelPlacement="stacked"
168
197
  [label]="'IDEA_UNCOMMON.ADDRESS.POSTCODE' | translate"
169
- [disabled]="!editMode"
198
+ [disabled]="!editMode()"
170
199
  [placeholder]="'IDEA_UNCOMMON.ADDRESS.POSTCODE_HINT' | translate"
171
200
  [title]="'IDEA_UNCOMMON.ADDRESS.POSTCODE_HINT' | translate"
172
201
  [(ngModel)]="address.postcode"
173
202
  (ionChange)="addressChange.emit(address)"
174
203
  />
175
204
  </ion-item>
176
- <ion-item [color]="color">
205
+ <ion-item [color]="color()">
177
206
  <ion-input
178
207
  autocomplete="new"
179
- [disabled]="!editMode"
208
+ [disabled]="!editMode()"
180
209
  labelPlacement="stacked"
181
210
  [placeholder]="'IDEA_UNCOMMON.ADDRESS.CITY_HINT' | translate"
182
211
  [title]="'IDEA_UNCOMMON.ADDRESS.CITY_HINT' | translate"
@@ -185,18 +214,18 @@ class IDEAAddressComponent {
185
214
  >
186
215
  <div slot="label">
187
216
  {{ 'IDEA_UNCOMMON.ADDRESS.CITY' | translate }}
188
- @if (editMode && obligatory) {
217
+ @if (editMode() && obligatory()) {
189
218
  <ion-text class="obligatoryDot" />
190
219
  }
191
220
  </div>
192
221
  </ion-input>
193
222
  </ion-item>
194
- <ion-item [color]="color">
223
+ <ion-item [color]="color()">
195
224
  <ion-input
196
225
  autocomplete="new"
197
226
  labelPlacement="stacked"
198
227
  [label]="'IDEA_UNCOMMON.ADDRESS.PROVINCE' | translate"
199
- [disabled]="!editMode"
228
+ [disabled]="!editMode()"
200
229
  [placeholder]="'IDEA_UNCOMMON.ADDRESS.PROVINCE_HINT' | translate"
201
230
  [title]="'IDEA_UNCOMMON.ADDRESS.PROVINCE_HINT' | translate"
202
231
  [(ngModel)]="address.province"
@@ -204,28 +233,27 @@ class IDEAAddressComponent {
204
233
  />
205
234
  </ion-item>
206
235
  <idea-select
207
- [color]="color"
236
+ [color]="color()"
208
237
  [data]="countriesSuggestions"
209
238
  [label]="'IDEA_UNCOMMON.ADDRESS.COUNTRY' | translate"
210
- [lines]="editMode ? lines : null"
239
+ [lines]="editMode() ? lines() : null"
211
240
  [description]="getCountryName(address.country)"
212
241
  [placeholder]="'IDEA_UNCOMMON.ADDRESS.COUNTRY_HINT' | translate"
213
242
  [searchPlaceholder]="'IDEA_UNCOMMON.ADDRESS.COUNTRY_HINT' | translate"
214
243
  [hideIdFromUI]="true"
215
244
  [avoidAutoSelection]="true"
216
- [disabled]="!editMode"
245
+ [disabled]="!editMode()"
217
246
  (select)="setCountryFromSuggestion($event)"
218
247
  />
219
248
  </ion-list>
220
249
  </ion-accordion>
221
250
  </ion-accordion-group>
222
251
  }
223
- `, isInline: true, styles: ["ion-item[slot=header] ion-input{--highlight-color-focused: transparent;--highlight-color-valid: transparent;--highlight-color-invalid: transparent}ion-list[slot=content]{padding-top:0;padding-left:20px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IDEASelectComponent, selector: "idea-select", inputs: ["description", "data", "dataProvider", "label", "icon", "iconColor", "placeholder", "searchPlaceholder", "noElementsFoundText", "disabled", "tappableWhenDisabled", "obligatory", "lines", "color", "allowUnlistedValues", "allowUnlistedValuesPrefix", "sortData", "clearValueAfterSelection", "hideIdFromUI", "hideClearButton", "mustChoose", "category1", "category2", "showCategoriesFilters", "avoidAutoSelection"], outputs: ["select", "iconSelect", "selectWhenDisabled"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { 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: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonAccordion, selector: "ion-accordion", inputs: ["disabled", "mode", "readonly", "toggleIcon", "toggleIconSlot", "value"] }, { kind: "component", type: IonAccordionGroup, selector: "ion-accordion-group", inputs: ["animated", "disabled", "expand", "mode", "multiple", "readonly", "value"] }, { kind: "pipe", type: IDEATranslatePipe, name: "translate" }] }); }
252
+ `, isInline: true, styles: ["ion-item[slot=header] ion-input{--highlight-color-focused: transparent;--highlight-color-valid: transparent;--highlight-color-invalid: transparent}ion-list[slot=content]{padding-top:0;padding-left:20px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IDEASelectComponent, selector: "idea-select", inputs: ["description", "data", "dataProvider", "label", "icon", "iconColor", "placeholder", "searchPlaceholder", "noElementsFoundText", "disabled", "tappableWhenDisabled", "obligatory", "lines", "color", "allowUnlistedValues", "allowUnlistedValuesPrefix", "sortData", "clearValueAfterSelection", "hideIdFromUI", "hideClearButton", "mustChoose", "category1", "category2", "showCategoriesFilters", "avoidAutoSelection"], outputs: ["select", "iconSelect", "selectWhenDisabled"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { 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: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonAccordion, selector: "ion-accordion", inputs: ["disabled", "mode", "readonly", "toggleIcon", "toggleIconSlot", "value"] }, { kind: "component", type: IonAccordionGroup, selector: "ion-accordion-group", inputs: ["animated", "disabled", "expand", "mode", "multiple", "readonly", "value"] }, { kind: "pipe", type: IDEATranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
224
253
  }
225
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEAAddressComponent, decorators: [{
254
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEAAddressComponent, decorators: [{
226
255
  type: Component,
227
256
  args: [{ selector: 'idea-address', imports: [
228
- CommonModule,
229
257
  FormsModule,
230
258
  IDEATranslatePipe,
231
259
  IDEASelectComponent,
@@ -235,31 +263,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
235
263
  IonItem,
236
264
  IonAccordion,
237
265
  IonAccordionGroup
238
- ], template: `
266
+ ], changeDetection: ChangeDetectionStrategy.OnPush, template: `
239
267
  @if (address) {
240
268
  <ion-accordion-group #accordion>
241
269
  <ion-accordion value="open">
242
- <ion-item slot="header" button [color]="color" [lines]="lines">
270
+ <ion-item slot="header" button [color]="color()" [lines]="lines()">
243
271
  @if (isCollapsed()) {
244
272
  <ion-input
245
273
  readonly
246
274
  [labelPlacement]="isCollapsed() ? 'stacked' : ''"
247
- [label]="label || ('IDEA_UNCOMMON.ADDRESS.COMPLETE_ADDRESS' | translate)"
275
+ [label]="label() || ('IDEA_UNCOMMON.ADDRESS.COMPLETE_ADDRESS' | translate)"
248
276
  [title]="'IDEA_UNCOMMON.ADDRESS.COMPLETE_ADDRESS_HINT' | translate"
249
- [placeholder]="placeholder"
277
+ [placeholder]="placeholder()"
250
278
  [value]="address.getFullAddress()"
251
279
  (ionChange)="addressChange.emit(address)"
252
280
  />
253
281
  }
254
282
  </ion-item>
255
283
  <ion-list slot="content">
256
- @if (showContact) {
257
- <ion-item [color]="color">
284
+ @if (showContact()) {
285
+ <ion-item [color]="color()">
258
286
  <ion-input
259
287
  autocomplete="new"
260
288
  labelPlacement="stacked"
261
289
  [label]="'IDEA_UNCOMMON.ADDRESS.CONTACT' | translate"
262
- [disabled]="!editMode"
290
+ [disabled]="!editMode()"
263
291
  [placeholder]="'IDEA_UNCOMMON.ADDRESS.CONTACT_HINT' | translate"
264
292
  [title]="'IDEA_UNCOMMON.ADDRESS.CONTACT_HINT' | translate"
265
293
  [(ngModel)]="address.contact"
@@ -267,13 +295,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
267
295
  />
268
296
  </ion-item>
269
297
  }
270
- @if (showEmail) {
271
- <ion-item [color]="color">
298
+ @if (showEmail()) {
299
+ <ion-item [color]="color()">
272
300
  <ion-input
273
301
  autocomplete="new"
274
302
  labelPlacement="stacked"
275
303
  [label]="'IDEA_UNCOMMON.ADDRESS.EMAIL' | translate"
276
- [disabled]="!editMode"
304
+ [disabled]="!editMode()"
277
305
  [placeholder]="'IDEA_UNCOMMON.ADDRESS.EMAIL_HINT' | translate"
278
306
  [title]="'IDEA_UNCOMMON.ADDRESS.EMAIL_HINT' | translate"
279
307
  [(ngModel)]="address.email"
@@ -281,13 +309,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
281
309
  />
282
310
  </ion-item>
283
311
  }
284
- @if (showPhone) {
285
- <ion-item [color]="color">
312
+ @if (showPhone()) {
313
+ <ion-item [color]="color()">
286
314
  <ion-input
287
315
  autocomplete="new"
288
316
  labelPlacement="stacked"
289
317
  [label]="'IDEA_UNCOMMON.ADDRESS.PHONE' | translate"
290
- [disabled]="!editMode"
318
+ [disabled]="!editMode()"
291
319
  [placeholder]="'IDEA_UNCOMMON.ADDRESS.PHONE_HINT' | translate"
292
320
  [title]="'IDEA_UNCOMMON.ADDRESS.PHONE_HINT' | translate"
293
321
  [(ngModel)]="address.phone"
@@ -295,11 +323,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
295
323
  />
296
324
  </ion-item>
297
325
  }
298
- <ion-item [color]="color">
326
+ <ion-item [color]="color()">
299
327
  <ion-input
300
328
  autocomplete="new"
301
329
  labelPlacement="stacked"
302
- [disabled]="!editMode"
330
+ [disabled]="!editMode()"
303
331
  [placeholder]="'IDEA_UNCOMMON.ADDRESS.ADDRESS_HINT' | translate"
304
332
  [title]="'IDEA_UNCOMMON.ADDRESS.ADDRESS_HINT' | translate"
305
333
  [(ngModel)]="address.address"
@@ -307,19 +335,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
307
335
  >
308
336
  <div slot="label">
309
337
  {{ 'IDEA_UNCOMMON.ADDRESS.ADDRESS' | translate }}
310
- @if (editMode && obligatory) {
338
+ @if (editMode() && obligatory()) {
311
339
  <ion-text class="obligatoryDot" />
312
340
  }
313
341
  </div>
314
342
  </ion-input>
315
343
  </ion-item>
316
- @if (showAddress2) {
317
- <ion-item [color]="color">
344
+ @if (showAddress2()) {
345
+ <ion-item [color]="color()">
318
346
  <ion-input
319
347
  autocomplete="new"
320
348
  labelPlacement="stacked"
321
349
  [label]="'IDEA_UNCOMMON.ADDRESS.ADDRESS2' | translate"
322
- [disabled]="!editMode"
350
+ [disabled]="!editMode()"
323
351
  [placeholder]="'IDEA_UNCOMMON.ADDRESS.ADDRESS2_HINT' | translate"
324
352
  [title]="'IDEA_UNCOMMON.ADDRESS.ADDRESS2_HINT' | translate"
325
353
  [(ngModel)]="address.address2"
@@ -327,22 +355,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
327
355
  />
328
356
  </ion-item>
329
357
  }
330
- <ion-item [color]="color">
358
+ <ion-item [color]="color()">
331
359
  <ion-input
332
360
  autocomplete="new"
333
361
  labelPlacement="stacked"
334
362
  [label]="'IDEA_UNCOMMON.ADDRESS.POSTCODE' | translate"
335
- [disabled]="!editMode"
363
+ [disabled]="!editMode()"
336
364
  [placeholder]="'IDEA_UNCOMMON.ADDRESS.POSTCODE_HINT' | translate"
337
365
  [title]="'IDEA_UNCOMMON.ADDRESS.POSTCODE_HINT' | translate"
338
366
  [(ngModel)]="address.postcode"
339
367
  (ionChange)="addressChange.emit(address)"
340
368
  />
341
369
  </ion-item>
342
- <ion-item [color]="color">
370
+ <ion-item [color]="color()">
343
371
  <ion-input
344
372
  autocomplete="new"
345
- [disabled]="!editMode"
373
+ [disabled]="!editMode()"
346
374
  labelPlacement="stacked"
347
375
  [placeholder]="'IDEA_UNCOMMON.ADDRESS.CITY_HINT' | translate"
348
376
  [title]="'IDEA_UNCOMMON.ADDRESS.CITY_HINT' | translate"
@@ -351,18 +379,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
351
379
  >
352
380
  <div slot="label">
353
381
  {{ 'IDEA_UNCOMMON.ADDRESS.CITY' | translate }}
354
- @if (editMode && obligatory) {
382
+ @if (editMode() && obligatory()) {
355
383
  <ion-text class="obligatoryDot" />
356
384
  }
357
385
  </div>
358
386
  </ion-input>
359
387
  </ion-item>
360
- <ion-item [color]="color">
388
+ <ion-item [color]="color()">
361
389
  <ion-input
362
390
  autocomplete="new"
363
391
  labelPlacement="stacked"
364
392
  [label]="'IDEA_UNCOMMON.ADDRESS.PROVINCE' | translate"
365
- [disabled]="!editMode"
393
+ [disabled]="!editMode()"
366
394
  [placeholder]="'IDEA_UNCOMMON.ADDRESS.PROVINCE_HINT' | translate"
367
395
  [title]="'IDEA_UNCOMMON.ADDRESS.PROVINCE_HINT' | translate"
368
396
  [(ngModel)]="address.province"
@@ -370,16 +398,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
370
398
  />
371
399
  </ion-item>
372
400
  <idea-select
373
- [color]="color"
401
+ [color]="color()"
374
402
  [data]="countriesSuggestions"
375
403
  [label]="'IDEA_UNCOMMON.ADDRESS.COUNTRY' | translate"
376
- [lines]="editMode ? lines : null"
404
+ [lines]="editMode() ? lines() : null"
377
405
  [description]="getCountryName(address.country)"
378
406
  [placeholder]="'IDEA_UNCOMMON.ADDRESS.COUNTRY_HINT' | translate"
379
407
  [searchPlaceholder]="'IDEA_UNCOMMON.ADDRESS.COUNTRY_HINT' | translate"
380
408
  [hideIdFromUI]="true"
381
409
  [avoidAutoSelection]="true"
382
- [disabled]="!editMode"
410
+ [disabled]="!editMode()"
383
411
  (select)="setCountryFromSuggestion($event)"
384
412
  />
385
413
  </ion-list>
@@ -389,34 +417,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
389
417
  `, styles: ["ion-item[slot=header] ion-input{--highlight-color-focused: transparent;--highlight-color-valid: transparent;--highlight-color-invalid: transparent}ion-list[slot=content]{padding-top:0;padding-left:20px}\n"] }]
390
418
  }], propDecorators: { address: [{
391
419
  type: Input
392
- }], addressChange: [{
393
- type: Output
394
- }], showContact: [{
395
- type: Input
396
- }], showAddress2: [{
397
- type: Input
398
- }], showPhone: [{
399
- type: Input
400
- }], showEmail: [{
401
- type: Input
402
- }], editMode: [{
403
- type: Input
404
- }], obligatory: [{
405
- type: Input
406
- }], lines: [{
407
- type: Input
408
- }], color: [{
409
- type: Input
410
- }], label: [{
411
- type: Input
412
- }], placeholder: [{
413
- type: Input
414
- }], openByDefault: [{
415
- type: Input
416
- }], accordion: [{
417
- type: ViewChild,
418
- args: ['accordion']
419
- }] } });
420
+ }], addressChange: [{ type: i0.Output, args: ["addressChange"] }], showContact: [{ type: i0.Input, args: [{ isSignal: true, alias: "showContact", required: false }] }], showAddress2: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAddress2", required: false }] }], showPhone: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPhone", required: false }] }], showEmail: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEmail", required: false }] }], editMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "editMode", required: false }] }], obligatory: [{ type: i0.Input, args: [{ isSignal: true, alias: "obligatory", required: false }] }], lines: [{ type: i0.Input, args: [{ isSignal: true, alias: "lines", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], openByDefault: [{ type: i0.Input, args: [{ isSignal: true, alias: "openByDefault", required: false }] }], accordion: [{ type: i0.ViewChild, args: ['accordion', { isSignal: true }] }] } });
420
421
 
421
422
  class IDEAErrorReportingService {
422
423
  constructor() {
@@ -473,10 +474,10 @@ class IDEAErrorReportingService {
473
474
  userAgent: navigator.userAgent
474
475
  });
475
476
  }
476
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEAErrorReportingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
477
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEAErrorReportingService, providedIn: 'root' }); }
477
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEAErrorReportingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
478
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEAErrorReportingService, providedIn: 'root' }); }
478
479
  }
479
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEAErrorReportingService, decorators: [{
480
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEAErrorReportingService, decorators: [{
480
481
  type: Injectable,
481
482
  args: [{ providedIn: 'root' }]
482
483
  }], ctorParameters: () => [] });
@@ -520,10 +521,10 @@ class IDEATinCanService {
520
521
  clear() {
521
522
  this.data = {};
522
523
  }
523
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEATinCanService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
524
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEATinCanService, providedIn: 'root' }); }
524
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEATinCanService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
525
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEATinCanService, providedIn: 'root' }); }
525
526
  }
526
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEATinCanService, decorators: [{
527
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEATinCanService, decorators: [{
527
528
  type: Injectable,
528
529
  args: [{ providedIn: 'root' }]
529
530
  }], ctorParameters: () => [] });
@@ -579,10 +580,10 @@ class IDEAOfflineService {
579
580
  this._isOffline = !status.connected;
580
581
  return status.connected;
581
582
  }
582
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEAOfflineService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
583
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEAOfflineService, providedIn: 'root' }); }
583
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEAOfflineService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
584
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEAOfflineService, providedIn: 'root' }); }
584
585
  }
585
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEAOfflineService, decorators: [{
586
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEAOfflineService, decorators: [{
586
587
  type: Injectable,
587
588
  args: [{ providedIn: 'root' }]
588
589
  }], ctorParameters: () => [] });
@@ -974,10 +975,10 @@ class IDEAAWSAPIService {
974
975
  deleteResource(resource, options) {
975
976
  return this.request(resource, 'DELETE', options);
976
977
  }
977
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEAAWSAPIService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
978
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEAAWSAPIService, providedIn: 'root' }); }
978
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEAAWSAPIService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
979
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEAAWSAPIService, providedIn: 'root' }); }
979
980
  }
980
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEAAWSAPIService, decorators: [{
981
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEAAWSAPIService, decorators: [{
981
982
  type: Injectable,
982
983
  args: [{ providedIn: 'root' }]
983
984
  }], ctorParameters: () => [] });
@@ -1021,27 +1022,34 @@ class IDEAOldAttachmentsComponent {
1021
1022
  /**
1022
1023
  * The team from which we want to load the resources. Default: try to guess current team.
1023
1024
  */
1025
+ // TODO: Skipped for migration because:
1026
+ // Your application code writes to the input. This prevents migration.
1024
1027
  this.team = null;
1025
1028
  /**
1026
1029
  * The path to the online API resource, as an array. Don't include the team. E.g. `['entities', entityId]`.
1027
1030
  */
1028
- this.pathResource = [];
1031
+ this.pathResource = input([], /* @ts-ignore */
1032
+ ...(ngDevMode ? [{ debugName: "pathResource" }] : /* istanbul ignore next */ []));
1029
1033
  /**
1030
1034
  * The array in which we want to add/remove attachments.
1031
1035
  */
1032
- this.attachments = null;
1036
+ this.attachments = input(null, /* @ts-ignore */
1037
+ ...(ngDevMode ? [{ debugName: "attachments" }] : /* istanbul ignore next */ []));
1033
1038
  /**
1034
1039
  * Regulate the mode (view/edit).
1035
1040
  */
1041
+ // TODO: Skipped for migration because: This input is used in a control flow expression (e.g. `@if` or `*ngIf`) and migrating would break narrowing currently.
1036
1042
  this.editMode = false;
1037
1043
  /**
1038
1044
  * Show errors as reported from the parent component.
1039
1045
  */
1040
- this.errors = new Set();
1046
+ this.errors = input(new Set(), /* @ts-ignore */
1047
+ ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
1041
1048
  /**
1042
1049
  * The lines attribute of the item.
1043
1050
  */
1044
- this.lines = 'none';
1051
+ this.lines = input('none', /* @ts-ignore */
1052
+ ...(ngDevMode ? [{ debugName: "lines" }] : /* istanbul ignore next */ []));
1045
1053
  /**
1046
1054
  * Stack of errors from the last upload.
1047
1055
  */
@@ -1051,14 +1059,15 @@ class IDEAOldAttachmentsComponent {
1051
1059
  // if the team isn't specified, try to guess it in the usual IDEA's paths
1052
1060
  this.team = this.team || this._tc.get('membership').teamId || this._tc.get('teamId');
1053
1061
  this.requestURL = `teams/${this.team}/`;
1054
- if (this.pathResource && this.pathResource.length)
1055
- this.requestURL = this.requestURL.concat(this.pathResource.filter(x => x).join('/'));
1062
+ const pathResource = this.pathResource();
1063
+ if (pathResource && pathResource.length)
1064
+ this.requestURL = this.requestURL.concat(pathResource.filter(x => x).join('/'));
1056
1065
  }
1057
1066
  isCapacitor() {
1058
1067
  return this._platform.is('capacitor');
1059
1068
  }
1060
1069
  hasFieldAnError(field) {
1061
- return this.errors.has(field);
1070
+ return this.errors().has(field);
1062
1071
  }
1063
1072
  browseFiles() {
1064
1073
  document.getElementById('attachmentPicker').click();
@@ -1102,7 +1111,7 @@ class IDEAOldAttachmentsComponent {
1102
1111
  content = await heic2any({ blob: content, toType: 'image/jpeg' });
1103
1112
  }
1104
1113
  const attachment = new Attachment({ name, format });
1105
- this.attachments.push(attachment);
1114
+ this.attachments().push(attachment);
1106
1115
  try {
1107
1116
  const signedURL = await this._api.patchResource(this.requestURL, {
1108
1117
  body: { action: 'ATTACHMENTS_PUT', attachmentId: attachment.attachmentId }
@@ -1117,9 +1126,9 @@ class IDEAOldAttachmentsComponent {
1117
1126
  }
1118
1127
  }
1119
1128
  removeAttachment(attachment) {
1120
- const index = this.attachments.indexOf(attachment);
1129
+ const index = this.attachments().indexOf(attachment);
1121
1130
  if (index !== -1)
1122
- this.attachments.splice(index, 1);
1131
+ this.attachments().splice(index, 1);
1123
1132
  }
1124
1133
  async openAttachment(attachment) {
1125
1134
  try {
@@ -1148,14 +1157,14 @@ class IDEAOldAttachmentsComponent {
1148
1157
  return 'help';
1149
1158
  }
1150
1159
  }
1151
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEAOldAttachmentsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1152
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: IDEAOldAttachmentsComponent, isStandalone: true, selector: "idea-old-attachments", inputs: { team: "team", pathResource: "pathResource", attachments: "attachments", editMode: "editMode", errors: "errors", lines: "lines" }, ngImport: i0, template: `
1153
- @for (att of attachments; track att; let index = $index; let odd = $odd) {
1160
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEAOldAttachmentsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1161
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: IDEAOldAttachmentsComponent, isStandalone: true, selector: "idea-old-attachments", inputs: { team: { classPropertyName: "team", publicName: "team", isSignal: false, isRequired: false, transformFunction: null }, pathResource: { classPropertyName: "pathResource", publicName: "pathResource", isSignal: true, isRequired: false, transformFunction: null }, attachments: { classPropertyName: "attachments", publicName: "attachments", isSignal: true, isRequired: false, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: false, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
1162
+ @for (att of attachments(); track att; let index = $index; let odd = $odd) {
1154
1163
  <ion-item
1155
1164
  class="attachments"
1156
1165
  [class.fieldHasError]="hasFieldAnError('attachments[' + index + '].attachmentId')"
1157
1166
  [class.odd]="odd"
1158
- [lines]="lines"
1167
+ [lines]="lines()"
1159
1168
  >
1160
1169
  @if (att.attachmentId && _offline.isOnline()) {
1161
1170
  <ion-button fill="clear" size="small" slot="start" (click)="openAttachment(att)">
@@ -1196,7 +1205,7 @@ class IDEAOldAttachmentsComponent {
1196
1205
  </ion-item>
1197
1206
  }
1198
1207
  <!----->
1199
- @if (!editMode && !attachments?.length) {
1208
+ @if (!editMode && !attachments()?.length) {
1200
1209
  <ion-item lines="none" class="noAttachments">
1201
1210
  <ion-label>
1202
1211
  {{ 'IDEA_TEAMS.ATTACHMENTS.NO_ATTACHMENT' | translate }}
@@ -1207,7 +1216,7 @@ class IDEAOldAttachmentsComponent {
1207
1216
  @if (editMode) {
1208
1217
  <div>
1209
1218
  @for (err of uploadErrors; track err) {
1210
- <ion-item class="attachments" [lines]="lines">
1219
+ <ion-item class="attachments" [lines]="lines()">
1211
1220
  <ion-icon name="alert-circle" slot="start" color="danger" />
1212
1221
  <ion-label color="danger">
1213
1222
  {{ err }}
@@ -1247,17 +1256,17 @@ class IDEAOldAttachmentsComponent {
1247
1256
  }
1248
1257
  </ion-item>
1249
1258
  }
1250
- `, isInline: true, styles: [".attachments ion-button[slot=start],.attachments ion-icon[slot=start]{margin-right:10px}.attachments .loadingWarning{font-style:italic;font-size:.8em;color:var(--ion-color-medium)}.noAttachments{font-style:italic}.selectIcon{margin:0;padding-left:4px;font-size:.8em;color:var(--ion-color-medium)}.selectable{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "pipe", type: IDEATranslatePipe, name: "translate" }] }); }
1259
+ `, isInline: true, styles: [".attachments ion-button[slot=start],.attachments ion-icon[slot=start]{margin-right:10px}.attachments .loadingWarning{font-style:italic;font-size:.8em;color:var(--ion-color-medium)}.noAttachments{font-style:italic}.selectIcon{margin:0;padding-left:4px;font-size:.8em;color:var(--ion-color-medium)}.selectable{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "pipe", type: IDEATranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1251
1260
  }
1252
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEAOldAttachmentsComponent, decorators: [{
1261
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEAOldAttachmentsComponent, decorators: [{
1253
1262
  type: Component,
1254
- args: [{ selector: 'idea-old-attachments', imports: [FormsModule, IDEATranslatePipe, IonItem, IonButton, IonIcon, IonInput, IonLabel, IonSpinner], template: `
1255
- @for (att of attachments; track att; let index = $index; let odd = $odd) {
1263
+ args: [{ selector: 'idea-old-attachments', imports: [FormsModule, IDEATranslatePipe, IonItem, IonButton, IonIcon, IonInput, IonLabel, IonSpinner], changeDetection: ChangeDetectionStrategy.OnPush, template: `
1264
+ @for (att of attachments(); track att; let index = $index; let odd = $odd) {
1256
1265
  <ion-item
1257
1266
  class="attachments"
1258
1267
  [class.fieldHasError]="hasFieldAnError('attachments[' + index + '].attachmentId')"
1259
1268
  [class.odd]="odd"
1260
- [lines]="lines"
1269
+ [lines]="lines()"
1261
1270
  >
1262
1271
  @if (att.attachmentId && _offline.isOnline()) {
1263
1272
  <ion-button fill="clear" size="small" slot="start" (click)="openAttachment(att)">
@@ -1298,7 +1307,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
1298
1307
  </ion-item>
1299
1308
  }
1300
1309
  <!----->
1301
- @if (!editMode && !attachments?.length) {
1310
+ @if (!editMode && !attachments()?.length) {
1302
1311
  <ion-item lines="none" class="noAttachments">
1303
1312
  <ion-label>
1304
1313
  {{ 'IDEA_TEAMS.ATTACHMENTS.NO_ATTACHMENT' | translate }}
@@ -1309,7 +1318,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
1309
1318
  @if (editMode) {
1310
1319
  <div>
1311
1320
  @for (err of uploadErrors; track err) {
1312
- <ion-item class="attachments" [lines]="lines">
1321
+ <ion-item class="attachments" [lines]="lines()">
1313
1322
  <ion-icon name="alert-circle" slot="start" color="danger" />
1314
1323
  <ion-label color="danger">
1315
1324
  {{ err }}
@@ -1352,17 +1361,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
1352
1361
  `, styles: [".attachments ion-button[slot=start],.attachments ion-icon[slot=start]{margin-right:10px}.attachments .loadingWarning{font-style:italic;font-size:.8em;color:var(--ion-color-medium)}.noAttachments{font-style:italic}.selectIcon{margin:0;padding-left:4px;font-size:.8em;color:var(--ion-color-medium)}.selectable{cursor:pointer}\n"] }]
1353
1362
  }], propDecorators: { team: [{
1354
1363
  type: Input
1355
- }], pathResource: [{
1356
- type: Input
1357
- }], attachments: [{
1358
- type: Input
1359
- }], editMode: [{
1360
- type: Input
1361
- }], errors: [{
1362
- type: Input
1363
- }], lines: [{
1364
+ }], pathResource: [{ type: i0.Input, args: [{ isSignal: true, alias: "pathResource", required: false }] }], attachments: [{ type: i0.Input, args: [{ isSignal: true, alias: "attachments", required: false }] }], editMode: [{
1364
1365
  type: Input
1365
- }] } });
1366
+ }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], lines: [{ type: i0.Input, args: [{ isSignal: true, alias: "lines", required: false }] }] } });
1366
1367
  /**
1367
1368
  * The possibile file types (formats).
1368
1369
  */
@@ -1383,6 +1384,7 @@ class IDEAAnnouncementComponent {
1383
1384
  this._env = inject(IDEAEnvironment);
1384
1385
  this._tc = inject(IDEATinCanService);
1385
1386
  this._storage = inject(IDEAStorageService);
1387
+ this._cdr = inject(ChangeDetectorRef);
1386
1388
  this.storageKey = (this._env.idea.project || 'app').concat('_LAST_ANNOUNCEMENT');
1387
1389
  this.color = 'dark';
1388
1390
  }
@@ -1393,14 +1395,16 @@ class IDEAAnnouncementComponent {
1393
1395
  const lastRead = await this._storage.get(this.storageKey);
1394
1396
  if (!lastRead || this.announcement.content !== lastRead)
1395
1397
  this.htmlContent = mdToHtml(this.announcement.content);
1398
+ this._cdr.markForCheck();
1396
1399
  }
1397
1400
  }
1398
1401
  async markAsRead() {
1399
1402
  await this._storage.set(this.storageKey, this.announcement.content);
1400
1403
  this.htmlContent = null;
1404
+ this._cdr.markForCheck();
1401
1405
  }
1402
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEAAnnouncementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1403
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: IDEAAnnouncementComponent, isStandalone: true, selector: "idea-announcement", inputs: { color: "color" }, ngImport: i0, template: `
1406
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEAAnnouncementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1407
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: IDEAAnnouncementComponent, isStandalone: true, selector: "idea-announcement", inputs: { color: "color" }, ngImport: i0, template: `
1404
1408
  @if (htmlContent) {
1405
1409
  <ion-card class="announcementCard" [color]="color">
1406
1410
  <ion-card-content>
@@ -1413,13 +1417,14 @@ class IDEAAnnouncementComponent {
1413
1417
  </ion-card-content>
1414
1418
  </ion-card>
1415
1419
  }
1416
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "pipe", type: IDEATranslatePipe, name: "translate" }] }); }
1420
+ `, isInline: true, dependencies: [{ kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "pipe", type: IDEATranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1417
1421
  }
1418
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEAAnnouncementComponent, decorators: [{
1422
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEAAnnouncementComponent, decorators: [{
1419
1423
  type: Component,
1420
1424
  args: [{
1421
1425
  selector: 'idea-announcement',
1422
- imports: [CommonModule, IDEATranslatePipe, IonButton, IonCardContent, IonCard],
1426
+ imports: [IDEATranslatePipe, IonButton, IonCardContent, IonCard],
1427
+ changeDetection: ChangeDetectionStrategy.OnPush,
1423
1428
  template: `
1424
1429
  @if (htmlContent) {
1425
1430
  <ion-card class="announcementCard" [color]="color">
@@ -1447,21 +1452,67 @@ class IDEAColorPickerComponent {
1447
1452
  /**
1448
1453
  * The pickable colors.
1449
1454
  */
1450
- this.colors = COLORS;
1455
+ this.colors = input(COLORS, /* @ts-ignore */
1456
+ ...(ngDevMode ? [{ debugName: "colors" }] : /* istanbul ignore next */ []));
1457
+ /**
1458
+ * The current color.
1459
+ */
1460
+ this.current = input(/* @ts-ignore */
1461
+ ...(ngDevMode ? [undefined, { debugName: "current" }] : /* istanbul ignore next */ []));
1462
+ /**
1463
+ * The label for the field.
1464
+ */
1465
+ this.label = input(/* @ts-ignore */
1466
+ ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
1467
+ /**
1468
+ * A placeholder for the field.
1469
+ */
1470
+ this.placeholder = input(/* @ts-ignore */
1471
+ ...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
1472
+ /**
1473
+ * The icon for the field.
1474
+ */
1475
+ this.icon = input(/* @ts-ignore */
1476
+ ...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
1477
+ /**
1478
+ * The color of the icon.
1479
+ */
1480
+ this.iconColor = input(/* @ts-ignore */
1481
+ ...(ngDevMode ? [undefined, { debugName: "iconColor" }] : /* istanbul ignore next */ []));
1482
+ /**
1483
+ * If true, the component is disabled.
1484
+ */
1485
+ this.disabled = input(/* @ts-ignore */
1486
+ ...(ngDevMode ? [undefined, { debugName: "disabled" }] : /* istanbul ignore next */ []));
1487
+ /**
1488
+ * If true, the obligatory dot is shown.
1489
+ */
1490
+ this.obligatory = input(/* @ts-ignore */
1491
+ ...(ngDevMode ? [undefined, { debugName: "obligatory" }] : /* istanbul ignore next */ []));
1492
+ /**
1493
+ * Lines preferences for the item.
1494
+ */
1495
+ this.lines = input(/* @ts-ignore */
1496
+ ...(ngDevMode ? [undefined, { debugName: "lines" }] : /* istanbul ignore next */ []));
1497
+ /**
1498
+ * The color for the component.
1499
+ */
1500
+ this.color = input(/* @ts-ignore */
1501
+ ...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
1451
1502
  /**
1452
1503
  * On select event.
1453
1504
  */
1454
- this.select = new EventEmitter();
1505
+ this.select = output();
1455
1506
  /**
1456
1507
  * Icon select.
1457
1508
  */
1458
- this.iconSelect = new EventEmitter();
1509
+ this.iconSelect = output();
1459
1510
  this._popover = inject(PopoverController);
1460
1511
  }
1461
1512
  async openPalette(event) {
1462
- if (this.disabled)
1513
+ if (this.disabled())
1463
1514
  return;
1464
- const componentProps = { colors: this.colors, current: this.current };
1515
+ const componentProps = { colors: this.colors(), current: this.current() };
1465
1516
  const popover = await this._popover.create({ component: ColorsPaletteComponent, componentProps, event });
1466
1517
  popover.onDidDismiss().then(res => {
1467
1518
  if (res && res.data)
@@ -1474,93 +1525,69 @@ class IDEAColorPickerComponent {
1474
1525
  event.stopPropagation();
1475
1526
  this.iconSelect.emit(event);
1476
1527
  }
1477
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEAColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1478
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: IDEAColorPickerComponent, isStandalone: true, selector: "idea-color-picker", inputs: { colors: "colors", current: "current", label: "label", placeholder: "placeholder", icon: "icon", iconColor: "iconColor", disabled: "disabled", obligatory: "obligatory", lines: "lines", color: "color" }, outputs: { select: "select", iconSelect: "iconSelect" }, ngImport: i0, template: `
1528
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEAColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1529
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: IDEAColorPickerComponent, isStandalone: true, selector: "idea-color-picker", inputs: { colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null }, current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, obligatory: { classPropertyName: "obligatory", publicName: "obligatory", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "select", iconSelect: "iconSelect" }, ngImport: i0, template: `
1479
1530
  <ion-item
1480
1531
  class="colorPickerItem"
1481
- [color]="color"
1482
- [lines]="lines"
1483
- [button]="!disabled"
1484
- [title]="placeholder || ''"
1485
- [class.withLabel]="label"
1532
+ [color]="color()"
1533
+ [lines]="lines()"
1534
+ [button]="!disabled()"
1535
+ [title]="placeholder() || ''"
1536
+ [class.withLabel]="label()"
1486
1537
  (click)="openPalette($event)"
1487
1538
  >
1488
- @if (icon) {
1489
- <ion-button fill="clear" slot="start" [color]="iconColor" (click)="doIconSelect($event)">
1490
- <ion-icon [name]="icon" slot="icon-only" />
1539
+ @if (icon()) {
1540
+ <ion-button fill="clear" slot="start" [color]="iconColor()" (click)="doIconSelect($event)">
1541
+ <ion-icon [name]="icon()" slot="icon-only" />
1491
1542
  </ion-button>
1492
1543
  }
1493
- @if (label) {
1494
- <ion-label [class.selectable]="!disabled">
1495
- {{ label }}
1496
- @if (obligatory && !disabled) {
1544
+ @if (label()) {
1545
+ <ion-label [class.selectable]="!disabled()">
1546
+ {{ label() }}
1547
+ @if (obligatory() && !disabled()) {
1497
1548
  <ion-text class="obligatoryDot" />
1498
1549
  }
1499
1550
  </ion-label>
1500
1551
  }
1501
- <ion-avatar slot="end" class="colorCircle" [style.background-color]="current" />
1502
- @if (!disabled) {
1503
- <ion-icon slot="end" name="caret-down" class="selectIcon" [class.selectable]="!disabled" />
1552
+ <ion-avatar slot="end" class="colorCircle" [style.background-color]="current()" />
1553
+ @if (!disabled()) {
1554
+ <ion-icon slot="end" name="caret-down" class="selectIcon" [class.selectable]="!disabled()" />
1504
1555
  }
1505
1556
  </ion-item>
1506
- `, isInline: true, styles: [".colorPickerItem{min-height:48px;height:auto}.colorPickerItem .placeholder{color:var(--ion-color-medium)}.colorPickerItem .selectIcon{margin:0;padding-left:4px;font-size:.8em;color:var(--ion-color-medium)}.selectItem.withLabel{min-height:58px;height:auto}.selectItem.withLabel .selectIcon{padding-top:25px}.selectItem.withLabel ion-button[slot=start]{margin-top:16px}.selectable{cursor:pointer}ion-avatar.colorCircle{width:20px;height:20px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonAvatar, selector: "ion-avatar" }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }] }); }
1557
+ `, isInline: true, styles: [".colorPickerItem{min-height:48px;height:auto}.colorPickerItem .placeholder{color:var(--ion-color-medium)}.colorPickerItem .selectIcon{margin:0;padding-left:4px;font-size:.8em;color:var(--ion-color-medium)}.selectItem.withLabel{min-height:58px;height:auto}.selectItem.withLabel .selectIcon{padding-top:25px}.selectItem.withLabel ion-button[slot=start]{margin-top:16px}.selectable{cursor:pointer}ion-avatar.colorCircle{width:20px;height:20px}\n"], dependencies: [{ kind: "component", type: IonAvatar, selector: "ion-avatar" }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1507
1558
  }
1508
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEAColorPickerComponent, decorators: [{
1559
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEAColorPickerComponent, decorators: [{
1509
1560
  type: Component,
1510
- args: [{ selector: 'idea-color-picker', imports: [CommonModule, IonAvatar, IonText, IonLabel, IonIcon, IonButton, IonItem], template: `
1561
+ args: [{ selector: 'idea-color-picker', imports: [IonAvatar, IonText, IonLabel, IonIcon, IonButton, IonItem], changeDetection: ChangeDetectionStrategy.OnPush, template: `
1511
1562
  <ion-item
1512
1563
  class="colorPickerItem"
1513
- [color]="color"
1514
- [lines]="lines"
1515
- [button]="!disabled"
1516
- [title]="placeholder || ''"
1517
- [class.withLabel]="label"
1564
+ [color]="color()"
1565
+ [lines]="lines()"
1566
+ [button]="!disabled()"
1567
+ [title]="placeholder() || ''"
1568
+ [class.withLabel]="label()"
1518
1569
  (click)="openPalette($event)"
1519
1570
  >
1520
- @if (icon) {
1521
- <ion-button fill="clear" slot="start" [color]="iconColor" (click)="doIconSelect($event)">
1522
- <ion-icon [name]="icon" slot="icon-only" />
1571
+ @if (icon()) {
1572
+ <ion-button fill="clear" slot="start" [color]="iconColor()" (click)="doIconSelect($event)">
1573
+ <ion-icon [name]="icon()" slot="icon-only" />
1523
1574
  </ion-button>
1524
1575
  }
1525
- @if (label) {
1526
- <ion-label [class.selectable]="!disabled">
1527
- {{ label }}
1528
- @if (obligatory && !disabled) {
1576
+ @if (label()) {
1577
+ <ion-label [class.selectable]="!disabled()">
1578
+ {{ label() }}
1579
+ @if (obligatory() && !disabled()) {
1529
1580
  <ion-text class="obligatoryDot" />
1530
1581
  }
1531
1582
  </ion-label>
1532
1583
  }
1533
- <ion-avatar slot="end" class="colorCircle" [style.background-color]="current" />
1534
- @if (!disabled) {
1535
- <ion-icon slot="end" name="caret-down" class="selectIcon" [class.selectable]="!disabled" />
1584
+ <ion-avatar slot="end" class="colorCircle" [style.background-color]="current()" />
1585
+ @if (!disabled()) {
1586
+ <ion-icon slot="end" name="caret-down" class="selectIcon" [class.selectable]="!disabled()" />
1536
1587
  }
1537
1588
  </ion-item>
1538
1589
  `, styles: [".colorPickerItem{min-height:48px;height:auto}.colorPickerItem .placeholder{color:var(--ion-color-medium)}.colorPickerItem .selectIcon{margin:0;padding-left:4px;font-size:.8em;color:var(--ion-color-medium)}.selectItem.withLabel{min-height:58px;height:auto}.selectItem.withLabel .selectIcon{padding-top:25px}.selectItem.withLabel ion-button[slot=start]{margin-top:16px}.selectable{cursor:pointer}ion-avatar.colorCircle{width:20px;height:20px}\n"] }]
1539
- }], propDecorators: { colors: [{
1540
- type: Input
1541
- }], current: [{
1542
- type: Input
1543
- }], label: [{
1544
- type: Input
1545
- }], placeholder: [{
1546
- type: Input
1547
- }], icon: [{
1548
- type: Input
1549
- }], iconColor: [{
1550
- type: Input
1551
- }], disabled: [{
1552
- type: Input
1553
- }], obligatory: [{
1554
- type: Input
1555
- }], lines: [{
1556
- type: Input
1557
- }], color: [{
1558
- type: Input
1559
- }], select: [{
1560
- type: Output
1561
- }], iconSelect: [{
1562
- type: Output
1563
- }] } });
1590
+ }], propDecorators: { colors: [{ type: i0.Input, args: [{ isSignal: true, alias: "colors", required: false }] }], current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], obligatory: [{ type: i0.Input, args: [{ isSignal: true, alias: "obligatory", required: false }] }], lines: [{ type: i0.Input, args: [{ isSignal: true, alias: "lines", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], select: [{ type: i0.Output, args: ["select"] }], iconSelect: [{ type: i0.Output, args: ["iconSelect"] }] } });
1564
1591
  /**
1565
1592
  * Component to open in a popover for displaying the colors available.
1566
1593
  */
@@ -1571,8 +1598,8 @@ class ColorsPaletteComponent {
1571
1598
  pick(color) {
1572
1599
  this._popover.dismiss(color);
1573
1600
  }
1574
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ColorsPaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1575
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ColorsPaletteComponent, isStandalone: true, selector: "idea-colors-palette", inputs: { colors: "colors", current: "current" }, ngImport: i0, template: `
1601
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ColorsPaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1602
+ 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: `
1576
1603
  <ion-content>
1577
1604
  <ion-grid>
1578
1605
  <ion-row>
@@ -1593,11 +1620,11 @@ class ColorsPaletteComponent {
1593
1620
  </ion-row>
1594
1621
  </ion-grid>
1595
1622
  </ion-content>
1596
- `, isInline: true, styles: ["ion-content{--background: var(--ion-color-white)}ion-avatar.colorCircle{width:20px;height:20px}.tappable{cursor:pointer}ion-avatar.colorCircle ion-icon{color:#fff;font-size:1.2em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: IonRow, selector: "ion-row" }, { kind: "component", type: IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: IonAvatar, selector: "ion-avatar" }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
1623
+ `, isInline: true, styles: ["ion-content{--background: var(--ion-color-white)}ion-avatar.colorCircle{width:20px;height:20px}.tappable{cursor:pointer}ion-avatar.colorCircle ion-icon{color:#fff;font-size:1.2em}\n"], dependencies: [{ kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: IonRow, selector: "ion-row" }, { kind: "component", type: IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: IonAvatar, selector: "ion-avatar" }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1597
1624
  }
1598
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ColorsPaletteComponent, decorators: [{
1625
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ColorsPaletteComponent, decorators: [{
1599
1626
  type: Component,
1600
- args: [{ selector: 'idea-colors-palette', imports: [CommonModule, IonContent, IonGrid, IonRow, IonCol, IonAvatar, IonIcon], template: `
1627
+ args: [{ selector: 'idea-colors-palette', imports: [IonContent, IonGrid, IonRow, IonCol, IonAvatar, IonIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: `
1601
1628
  <ion-content>
1602
1629
  <ion-grid>
1603
1630
  <ion-row>
@@ -1632,27 +1659,42 @@ class IDEAContactsComponent {
1632
1659
  /**
1633
1660
  * The contacts to manage.
1634
1661
  */
1635
- this.contacts = new Contacts();
1662
+ this.contacts = input(new Contacts(), /* @ts-ignore */
1663
+ ...(ngDevMode ? [{ debugName: "contacts" }] : /* istanbul ignore next */ []));
1636
1664
  /**
1637
1665
  * If true, show the field `name`.
1638
1666
  */
1639
- this.showName = false;
1667
+ this.showName = input(false, /* @ts-ignore */
1668
+ ...(ngDevMode ? [{ debugName: "showName" }] : /* istanbul ignore next */ []));
1640
1669
  /**
1641
1670
  * Whether the fields are editable or disabled.
1642
1671
  */
1643
- this.editMode = true;
1672
+ this.editMode = input(true, /* @ts-ignore */
1673
+ ...(ngDevMode ? [{ debugName: "editMode" }] : /* istanbul ignore next */ []));
1674
+ /**
1675
+ * The lines attribute of the item.
1676
+ */
1677
+ this.lines = input(/* @ts-ignore */
1678
+ ...(ngDevMode ? [undefined, { debugName: "lines" }] : /* istanbul ignore next */ []));
1679
+ /**
1680
+ * The color for the component.
1681
+ */
1682
+ this.color = input(/* @ts-ignore */
1683
+ ...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
1644
1684
  }
1645
1685
  sendEmail() {
1646
- if (!this.contacts.email)
1686
+ const contacts = this.contacts();
1687
+ if (!contacts.email)
1647
1688
  return;
1648
- const url = `mailto:${this.contacts.email}`;
1649
- this.preExternalAction(this.contacts.email, () => window.open(url, '_system'));
1689
+ const url = `mailto:${contacts.email}`;
1690
+ this.preExternalAction(contacts.email, () => window.open(url, '_system'));
1650
1691
  }
1651
1692
  call() {
1652
- if (!this.contacts.phone)
1693
+ const contacts = this.contacts();
1694
+ if (!contacts.phone)
1653
1695
  return;
1654
- const url = `tel:${this.contacts.phone}`;
1655
- this.preExternalAction(this.contacts.phone, () => window.open(url, '_system'));
1696
+ const url = `tel:${contacts.phone}`;
1697
+ this.preExternalAction(contacts.phone, () => window.open(url, '_system'));
1656
1698
  }
1657
1699
  preExternalAction(message, cb) {
1658
1700
  const header = this._translate._('COMMON.DO_YOU_WANT_TO_PROCEED');
@@ -1663,33 +1705,33 @@ class IDEAContactsComponent {
1663
1705
  const cssClass = 'selectableAlertMessage';
1664
1706
  this._alert.create({ header, message, buttons, cssClass }).then(alert => alert.present());
1665
1707
  }
1666
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEAContactsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1667
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: IDEAContactsComponent, isStandalone: true, selector: "idea-contacts", inputs: { contacts: "contacts", showName: "showName", editMode: "editMode", lines: "lines", color: "color" }, ngImport: i0, template: `
1708
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEAContactsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1709
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: IDEAContactsComponent, isStandalone: true, selector: "idea-contacts", inputs: { contacts: { classPropertyName: "contacts", publicName: "contacts", isSignal: true, isRequired: false, transformFunction: null }, showName: { classPropertyName: "showName", publicName: "showName", isSignal: true, isRequired: false, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
1668
1710
  <div class="contacts">
1669
- @if (showName) {
1670
- <ion-item [lines]="lines" [color]="color">
1711
+ @if (showName()) {
1712
+ <ion-item [lines]="lines()" [color]="color()">
1671
1713
  <ion-input
1672
1714
  autocomplete="new"
1673
1715
  labelPlacement="stacked"
1674
1716
  [label]="'IDEA_UNCOMMON.CONTACTS.NAME' | translate"
1675
- [disabled]="!editMode"
1717
+ [disabled]="!editMode()"
1676
1718
  [placeholder]="'IDEA_UNCOMMON.CONTACTS.NAME_HINT' | translate"
1677
1719
  [title]="'IDEA_UNCOMMON.CONTACTS.NAME_HINT' | translate"
1678
- [(ngModel)]="contacts.name"
1720
+ [(ngModel)]="contacts().name"
1679
1721
  />
1680
1722
  </ion-item>
1681
1723
  }
1682
- <ion-item [lines]="lines" [color]="color">
1724
+ <ion-item [lines]="lines()" [color]="color()">
1683
1725
  <ion-input
1684
1726
  autocomplete="new"
1685
1727
  labelPlacement="stacked"
1686
1728
  [label]="'IDEA_UNCOMMON.CONTACTS.PHONE' | translate"
1687
- [disabled]="!editMode"
1729
+ [disabled]="!editMode()"
1688
1730
  [placeholder]="'IDEA_UNCOMMON.CONTACTS.PHONE_HINT' | translate"
1689
1731
  [title]="'IDEA_UNCOMMON.CONTACTS.PHONE_HINT' | translate"
1690
- [(ngModel)]="contacts.phone"
1732
+ [(ngModel)]="contacts().phone"
1691
1733
  />
1692
- @if (!editMode) {
1734
+ @if (!editMode()) {
1693
1735
  <ion-button
1694
1736
  slot="end"
1695
1737
  fill="clear"
@@ -1702,17 +1744,17 @@ class IDEAContactsComponent {
1702
1744
  </ion-button>
1703
1745
  }
1704
1746
  </ion-item>
1705
- <ion-item [lines]="lines" [color]="color">
1747
+ <ion-item [lines]="lines()" [color]="color()">
1706
1748
  <ion-input
1707
1749
  autocomplete="new"
1708
1750
  labelPlacement="stacked"
1709
1751
  [label]="'IDEA_UNCOMMON.CONTACTS.EMAIL' | translate"
1710
- [disabled]="!editMode"
1752
+ [disabled]="!editMode()"
1711
1753
  [placeholder]="'IDEA_UNCOMMON.CONTACTS.EMAIL_HINT' | translate"
1712
1754
  [title]="'IDEA_UNCOMMON.CONTACTS.EMAIL_HINT' | translate"
1713
- [(ngModel)]="contacts.email"
1755
+ [(ngModel)]="contacts().email"
1714
1756
  />
1715
- @if (!editMode) {
1757
+ @if (!editMode()) {
1716
1758
  <ion-button
1717
1759
  slot="end"
1718
1760
  fill="clear"
@@ -1726,36 +1768,36 @@ class IDEAContactsComponent {
1726
1768
  }
1727
1769
  </ion-item>
1728
1770
  </div>
1729
- `, isInline: true, styles: [".marginTop{margin-top:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "pipe", type: IDEATranslatePipe, name: "translate" }] }); }
1771
+ `, isInline: true, styles: [".marginTop{margin-top:14px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "pipe", type: IDEATranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1730
1772
  }
1731
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEAContactsComponent, decorators: [{
1773
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEAContactsComponent, decorators: [{
1732
1774
  type: Component,
1733
- args: [{ selector: 'idea-contacts', imports: [CommonModule, FormsModule, IDEATranslatePipe, IonInput, IonIcon, IonButton, IonItem], template: `
1775
+ args: [{ selector: 'idea-contacts', imports: [FormsModule, IDEATranslatePipe, IonInput, IonIcon, IonButton, IonItem], changeDetection: ChangeDetectionStrategy.OnPush, template: `
1734
1776
  <div class="contacts">
1735
- @if (showName) {
1736
- <ion-item [lines]="lines" [color]="color">
1777
+ @if (showName()) {
1778
+ <ion-item [lines]="lines()" [color]="color()">
1737
1779
  <ion-input
1738
1780
  autocomplete="new"
1739
1781
  labelPlacement="stacked"
1740
1782
  [label]="'IDEA_UNCOMMON.CONTACTS.NAME' | translate"
1741
- [disabled]="!editMode"
1783
+ [disabled]="!editMode()"
1742
1784
  [placeholder]="'IDEA_UNCOMMON.CONTACTS.NAME_HINT' | translate"
1743
1785
  [title]="'IDEA_UNCOMMON.CONTACTS.NAME_HINT' | translate"
1744
- [(ngModel)]="contacts.name"
1786
+ [(ngModel)]="contacts().name"
1745
1787
  />
1746
1788
  </ion-item>
1747
1789
  }
1748
- <ion-item [lines]="lines" [color]="color">
1790
+ <ion-item [lines]="lines()" [color]="color()">
1749
1791
  <ion-input
1750
1792
  autocomplete="new"
1751
1793
  labelPlacement="stacked"
1752
1794
  [label]="'IDEA_UNCOMMON.CONTACTS.PHONE' | translate"
1753
- [disabled]="!editMode"
1795
+ [disabled]="!editMode()"
1754
1796
  [placeholder]="'IDEA_UNCOMMON.CONTACTS.PHONE_HINT' | translate"
1755
1797
  [title]="'IDEA_UNCOMMON.CONTACTS.PHONE_HINT' | translate"
1756
- [(ngModel)]="contacts.phone"
1798
+ [(ngModel)]="contacts().phone"
1757
1799
  />
1758
- @if (!editMode) {
1800
+ @if (!editMode()) {
1759
1801
  <ion-button
1760
1802
  slot="end"
1761
1803
  fill="clear"
@@ -1768,17 +1810,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
1768
1810
  </ion-button>
1769
1811
  }
1770
1812
  </ion-item>
1771
- <ion-item [lines]="lines" [color]="color">
1813
+ <ion-item [lines]="lines()" [color]="color()">
1772
1814
  <ion-input
1773
1815
  autocomplete="new"
1774
1816
  labelPlacement="stacked"
1775
1817
  [label]="'IDEA_UNCOMMON.CONTACTS.EMAIL' | translate"
1776
- [disabled]="!editMode"
1818
+ [disabled]="!editMode()"
1777
1819
  [placeholder]="'IDEA_UNCOMMON.CONTACTS.EMAIL_HINT' | translate"
1778
1820
  [title]="'IDEA_UNCOMMON.CONTACTS.EMAIL_HINT' | translate"
1779
- [(ngModel)]="contacts.email"
1821
+ [(ngModel)]="contacts().email"
1780
1822
  />
1781
- @if (!editMode) {
1823
+ @if (!editMode()) {
1782
1824
  <ion-button
1783
1825
  slot="end"
1784
1826
  fill="clear"
@@ -1793,17 +1835,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
1793
1835
  </ion-item>
1794
1836
  </div>
1795
1837
  `, styles: [".marginTop{margin-top:14px}\n"] }]
1796
- }], propDecorators: { contacts: [{
1797
- type: Input
1798
- }], showName: [{
1799
- type: Input
1800
- }], editMode: [{
1801
- type: Input
1802
- }], lines: [{
1803
- type: Input
1804
- }], color: [{
1805
- type: Input
1806
- }] } });
1838
+ }], propDecorators: { contacts: [{ type: i0.Input, args: [{ isSignal: true, alias: "contacts", required: false }] }], showName: [{ type: i0.Input, args: [{ isSignal: true, alias: "showName", required: false }] }], editMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "editMode", required: false }] }], lines: [{ type: i0.Input, args: [{ isSignal: true, alias: "lines", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
1807
1839
 
1808
1840
  /**
1809
1841
  * A random sunday, used as reference to calculate the week days.
@@ -1820,13 +1852,15 @@ class IDEACalendarPickerComponent {
1820
1852
  }
1821
1853
  ngOnInit() {
1822
1854
  this.today = new Date();
1823
- this.refDate = this.inputDate ? new Date(this.inputDate) : new Date(this.today);
1855
+ const inputDate = this.inputDate;
1856
+ this.refDate = inputDate ? new Date(inputDate) : new Date(this.today);
1824
1857
  this.selectedDate = new Date(this.refDate);
1825
1858
  this.hour = 12; // to endure timezones
1826
1859
  this.minute = 0;
1827
- if (this.timePicker || this.manualTimePicker) {
1860
+ const manualTimePicker = this.manualTimePicker;
1861
+ if (this.timePicker || manualTimePicker) {
1828
1862
  this.hour = this.selectedDate.getHours();
1829
- if (this.manualTimePicker)
1863
+ if (manualTimePicker)
1830
1864
  this.minute = this.selectedDate.getMinutes();
1831
1865
  else {
1832
1866
  // round the minutes a multiple of 5
@@ -1845,10 +1879,12 @@ class IDEACalendarPickerComponent {
1845
1879
  this.weekDays.push(refDateForWeekDays.toLocaleDateString(this._translate.getCurrentLang(), { weekday: 'short' }));
1846
1880
  refDateForWeekDays.setDate(refDateForWeekDays.getDate() + 1);
1847
1881
  }
1848
- if (this.min)
1849
- this.dateMin = new Date(this.min);
1850
- if (this.max)
1851
- this.dateMax = new Date(this.max);
1882
+ const min = this.min;
1883
+ if (min)
1884
+ this.dateMin = new Date(min);
1885
+ const max = this.max;
1886
+ if (max)
1887
+ this.dateMax = new Date(max);
1852
1888
  }
1853
1889
  getLocalisedDay(date) {
1854
1890
  let n = date.getDay();
@@ -1972,10 +2008,10 @@ class IDEACalendarPickerComponent {
1972
2008
  close() {
1973
2009
  this._modal.dismiss();
1974
2010
  }
1975
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEACalendarPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1976
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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" }] }); }
2011
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEACalendarPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2012
+ 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 }); }
1977
2013
  }
1978
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEACalendarPickerComponent, decorators: [{
2014
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEACalendarPickerComponent, decorators: [{
1979
2015
  type: Component,
1980
2016
  args: [{ selector: 'idea-calendar-picker', imports: [
1981
2017
  CommonModule,
@@ -1994,7 +2030,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
1994
2030
  IonTitle,
1995
2031
  IonToolbar,
1996
2032
  IonHeader
1997
- ], 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"] }]
2033
+ ], 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"] }]
1998
2034
  }], propDecorators: { inputDate: [{
1999
2035
  type: Input
2000
2036
  }], timePicker: [{
@@ -2015,37 +2051,90 @@ class IDEADateTimeComponent {
2015
2051
  constructor() {
2016
2052
  this._modal = inject(ModalController);
2017
2053
  this._translate = inject(IDEATranslationsService);
2054
+ this._cdr = inject(ChangeDetectorRef);
2055
+ /**
2056
+ * The date to show/pick.
2057
+ */
2058
+ this.date = input(/* @ts-ignore */
2059
+ ...(ngDevMode ? [undefined, { debugName: "date" }] : /* istanbul ignore next */ []));
2018
2060
  /**
2019
2061
  * Whether to show the time picker (datetime) or not (date).
2020
2062
  */
2021
- this.timePicker = false;
2063
+ this.timePicker = input(false, /* @ts-ignore */
2064
+ ...(ngDevMode ? [{ debugName: "timePicker" }] : /* istanbul ignore next */ []));
2022
2065
  /**
2023
2066
  * Whether to show the MANUAL time picker (datetime) or not (date).
2024
2067
  */
2025
- this.manualTimePicker = false;
2068
+ this.manualTimePicker = input(false, /* @ts-ignore */
2069
+ ...(ngDevMode ? [{ debugName: "manualTimePicker" }] : /* istanbul ignore next */ []));
2026
2070
  /**
2027
2071
  * Whether to use the `epochISOString` format instead of `epochDateTime`.
2028
2072
  */
2029
- this.useISOFormat = false;
2073
+ this.useISOFormat = input(false, /* @ts-ignore */
2074
+ ...(ngDevMode ? [{ debugName: "useISOFormat" }] : /* istanbul ignore next */ []));
2075
+ /**
2076
+ * The label for the field.
2077
+ */
2078
+ this.label = input(/* @ts-ignore */
2079
+ ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
2080
+ /**
2081
+ * The icon for the field.
2082
+ */
2083
+ this.icon = input(/* @ts-ignore */
2084
+ ...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
2085
+ /**
2086
+ * The color of the icon.
2087
+ */
2088
+ this.iconColor = input(/* @ts-ignore */
2089
+ ...(ngDevMode ? [undefined, { debugName: "iconColor" }] : /* istanbul ignore next */ []));
2090
+ /**
2091
+ * Lines preferences for the item.
2092
+ */
2093
+ this.lines = input(/* @ts-ignore */
2094
+ ...(ngDevMode ? [undefined, { debugName: "lines" }] : /* istanbul ignore next */ []));
2095
+ /**
2096
+ * The color for the component.
2097
+ */
2098
+ this.color = input(/* @ts-ignore */
2099
+ ...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
2100
+ /**
2101
+ * A placeholder for the field.
2102
+ */
2103
+ this.placeholder = input(/* @ts-ignore */
2104
+ ...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
2030
2105
  /**
2031
2106
  * If true, the component is disabled.
2032
2107
  */
2033
- this.disabled = false;
2108
+ this.disabled = input(false, /* @ts-ignore */
2109
+ ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
2034
2110
  /**
2035
2111
  * If true, the obligatory dot is shown.
2036
2112
  */
2037
- this.obligatory = false;
2113
+ this.obligatory = input(false, /* @ts-ignore */
2114
+ ...(ngDevMode ? [{ debugName: "obligatory" }] : /* istanbul ignore next */ []));
2038
2115
  /**
2039
2116
  * If true, hidew the clear button in the header.
2040
2117
  */
2041
- this.hideClearButton = false;
2042
- this.dateChange = new EventEmitter();
2043
- this.iconSelect = new EventEmitter();
2118
+ this.hideClearButton = input(false, /* @ts-ignore */
2119
+ ...(ngDevMode ? [{ debugName: "hideClearButton" }] : /* istanbul ignore next */ []));
2120
+ /**
2121
+ * If set, is the minimum date selectable.
2122
+ */
2123
+ this.min = input(/* @ts-ignore */
2124
+ ...(ngDevMode ? [undefined, { debugName: "min" }] : /* istanbul ignore next */ []));
2125
+ /**
2126
+ * If set, is the maximum date selectable.
2127
+ */
2128
+ this.max = input(/* @ts-ignore */
2129
+ ...(ngDevMode ? [undefined, { debugName: "max" }] : /* istanbul ignore next */ []));
2130
+ this.dateChange = output();
2131
+ this.iconSelect = output();
2044
2132
  this.isOpening = false;
2045
2133
  }
2046
2134
  ngOnInit() {
2047
2135
  this.langChangeSubscription = this._translate.onLangChange.subscribe(() => {
2048
- this.valueToDisplay = this.getValueToDisplay(this.date);
2136
+ this.valueToDisplay = this.getValueToDisplay(this.date());
2137
+ this._cdr.markForCheck();
2049
2138
  });
2050
2139
  }
2051
2140
  ngOnDestroy() {
@@ -2054,22 +2143,22 @@ class IDEADateTimeComponent {
2054
2143
  }
2055
2144
  ngOnChanges(changes) {
2056
2145
  if (changes.date || changes.timePicker)
2057
- this.valueToDisplay = this.getValueToDisplay(this.date);
2146
+ this.valueToDisplay = this.getValueToDisplay(this.date());
2058
2147
  }
2059
2148
  async openCalendarPicker() {
2060
- if (this.disabled || this.isOpening)
2149
+ if (this.disabled() || this.isOpening)
2061
2150
  return;
2062
2151
  this.isOpening = true;
2063
2152
  const modal = await this._modal.create({
2064
2153
  component: IDEACalendarPickerComponent,
2065
2154
  componentProps: {
2066
- inputDate: this.date,
2067
- title: this.label,
2068
- timePicker: this.timePicker,
2069
- manualTimePicker: this.manualTimePicker,
2070
- hideClearButton: this.hideClearButton,
2071
- min: this.min,
2072
- max: this.max
2155
+ inputDate: this.date(),
2156
+ title: this.label(),
2157
+ timePicker: this.timePicker(),
2158
+ manualTimePicker: this.manualTimePicker(),
2159
+ hideClearButton: this.hideClearButton(),
2160
+ min: this.min(),
2161
+ max: this.max()
2073
2162
  }
2074
2163
  });
2075
2164
  modal.onDidDismiss().then(({ data }) => {
@@ -2086,148 +2175,149 @@ class IDEADateTimeComponent {
2086
2175
  getValueToDisplay(date) {
2087
2176
  return !date
2088
2177
  ? ''
2089
- : this._translate.formatDate(date, this.timePicker || this.manualTimePicker ? 'd MMM yyyy, HH:mm' : 'mediumDate');
2178
+ : this._translate.formatDate(date, this.timePicker() || this.manualTimePicker() ? 'd MMM yyyy, HH:mm' : 'mediumDate');
2090
2179
  }
2091
2180
  doSelect(date) {
2092
- this.dateChange.emit(date ? (this.useISOFormat ? date.toISOString() : date.valueOf()) : null);
2181
+ this.dateChange.emit(date ? (this.useISOFormat() ? date.toISOString() : date.valueOf()) : null);
2093
2182
  }
2094
2183
  doIconSelect(event) {
2095
2184
  if (event)
2096
2185
  event.stopPropagation();
2097
2186
  this.iconSelect.emit();
2098
2187
  }
2099
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEADateTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2100
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: IDEADateTimeComponent, isStandalone: true, selector: "idea-date-time", inputs: { date: "date", timePicker: "timePicker", manualTimePicker: "manualTimePicker", useISOFormat: "useISOFormat", label: "label", icon: "icon", iconColor: "iconColor", lines: "lines", color: "color", placeholder: "placeholder", disabled: "disabled", obligatory: "obligatory", hideClearButton: "hideClearButton", min: "min", max: "max" }, outputs: { dateChange: "dateChange", iconSelect: "iconSelect" }, usesOnChanges: true, ngImport: i0, template: `
2188
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEADateTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2189
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: IDEADateTimeComponent, isStandalone: true, selector: "idea-date-time", inputs: { date: { classPropertyName: "date", publicName: "date", 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 }, useISOFormat: { classPropertyName: "useISOFormat", publicName: "useISOFormat", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, obligatory: { classPropertyName: "obligatory", publicName: "obligatory", 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 } }, outputs: { dateChange: "dateChange", iconSelect: "iconSelect" }, usesOnChanges: true, ngImport: i0, template: `
2101
2190
  <ion-item
2102
2191
  class="dateTimeItem"
2103
- [color]="color"
2104
- [lines]="lines"
2105
- [title]="placeholder || label || ''"
2106
- [button]="!disabled"
2192
+ [color]="color()"
2193
+ [lines]="lines()"
2194
+ [title]="placeholder() || label() || ''"
2195
+ [button]="!disabled()"
2107
2196
  [disabled]="isOpening"
2108
- [class.withLabel]="label"
2197
+ [class.withLabel]="label()"
2109
2198
  (click)="openCalendarPicker()"
2110
2199
  >
2111
- @if (icon) {
2200
+ @if (icon()) {
2112
2201
  <ion-button
2113
2202
  fill="clear"
2114
2203
  slot="start"
2115
- [color]="iconColor"
2116
- [class.marginTop]="label"
2204
+ [color]="iconColor()"
2205
+ [class.marginTop]="label()"
2117
2206
  (click)="doIconSelect($event)"
2118
2207
  >
2119
- <ion-icon [icon]="icon" slot="icon-only" />
2208
+ <ion-icon [icon]="icon()" slot="icon-only" />
2120
2209
  </ion-button>
2121
2210
  }
2122
- @if (label) {
2123
- <ion-label position="stacked" [class.selectable]="!disabled">
2124
- {{ label }}
2125
- @if (obligatory && !disabled) {
2211
+ @if (label()) {
2212
+ <ion-label position="stacked" [class.selectable]="!disabled()">
2213
+ {{ label() }}
2214
+ @if (obligatory() && !disabled()) {
2126
2215
  <ion-text class="obligatoryDot" />
2127
2216
  }
2128
2217
  </ion-label>
2129
2218
  }
2130
- <ion-label class="value" [class.selectable]="!disabled">
2131
- @if (!valueToDisplay && !disabled) {
2132
- <ion-text class="placeholder" [class.selectable]="!disabled">
2133
- {{ placeholder }}
2219
+ <ion-label class="value" [class.selectable]="!disabled()">
2220
+ @if (!valueToDisplay && !disabled()) {
2221
+ <ion-text class="placeholder" [class.selectable]="!disabled()">
2222
+ {{ placeholder() }}
2134
2223
  </ion-text>
2135
2224
  }
2136
2225
  {{ valueToDisplay }}
2137
2226
  </ion-label>
2138
- @if (!disabled) {
2139
- <ion-icon slot="end" icon="caret-down" class="selectIcon" [class.selectable]="!disabled" />
2227
+ @if (!disabled()) {
2228
+ <ion-icon slot="end" icon="caret-down" class="selectIcon" [class.selectable]="!disabled()" />
2140
2229
  }
2141
2230
  </ion-item>
2142
- `, isInline: true, styles: [".dateTimeItem{min-height:48px;height:auto}.dateTimeItem .description{margin:10px 0;height:20px;line-height:20px;width:100%}.dateTimeItem .placeholder{color:var(--ion-color-medium)}.dateTimeItem .value{white-space:nowrap}.dateTimeItem .selectIcon{margin:0;padding-left:4px;font-size:.8em;color:var(--ion-color-medium)}.dateTimeItem.withLabel{min-height:58px;height:auto}.dateTimeItem.withLabel .selectIcon{padding-top:25px}.dateTimeItem.withLabel ion-button[slot=start]{margin-top:16px}.selectable{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }] }); }
2231
+ `, isInline: true, styles: [".dateTimeItem{min-height:48px;height:auto}.dateTimeItem .description{margin:10px 0;height:20px;line-height:20px;width:100%}.dateTimeItem .placeholder{color:var(--ion-color-medium)}.dateTimeItem .value{white-space:nowrap}.dateTimeItem .selectIcon{margin:0;padding-left:4px;font-size:.8em;color:var(--ion-color-medium)}.dateTimeItem.withLabel{min-height:58px;height:auto}.dateTimeItem.withLabel .selectIcon{padding-top:25px}.dateTimeItem.withLabel ion-button[slot=start]{margin-top:16px}.selectable{cursor:pointer}\n"], dependencies: [{ kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2143
2232
  }
2144
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEADateTimeComponent, decorators: [{
2233
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEADateTimeComponent, decorators: [{
2145
2234
  type: Component,
2146
- args: [{ selector: 'idea-date-time', imports: [CommonModule, IonText, IonLabel, IonIcon, IonButton, IonItem], template: `
2235
+ args: [{ selector: 'idea-date-time', imports: [IonText, IonLabel, IonIcon, IonButton, IonItem], changeDetection: ChangeDetectionStrategy.OnPush, template: `
2147
2236
  <ion-item
2148
2237
  class="dateTimeItem"
2149
- [color]="color"
2150
- [lines]="lines"
2151
- [title]="placeholder || label || ''"
2152
- [button]="!disabled"
2238
+ [color]="color()"
2239
+ [lines]="lines()"
2240
+ [title]="placeholder() || label() || ''"
2241
+ [button]="!disabled()"
2153
2242
  [disabled]="isOpening"
2154
- [class.withLabel]="label"
2243
+ [class.withLabel]="label()"
2155
2244
  (click)="openCalendarPicker()"
2156
2245
  >
2157
- @if (icon) {
2246
+ @if (icon()) {
2158
2247
  <ion-button
2159
2248
  fill="clear"
2160
2249
  slot="start"
2161
- [color]="iconColor"
2162
- [class.marginTop]="label"
2250
+ [color]="iconColor()"
2251
+ [class.marginTop]="label()"
2163
2252
  (click)="doIconSelect($event)"
2164
2253
  >
2165
- <ion-icon [icon]="icon" slot="icon-only" />
2254
+ <ion-icon [icon]="icon()" slot="icon-only" />
2166
2255
  </ion-button>
2167
2256
  }
2168
- @if (label) {
2169
- <ion-label position="stacked" [class.selectable]="!disabled">
2170
- {{ label }}
2171
- @if (obligatory && !disabled) {
2257
+ @if (label()) {
2258
+ <ion-label position="stacked" [class.selectable]="!disabled()">
2259
+ {{ label() }}
2260
+ @if (obligatory() && !disabled()) {
2172
2261
  <ion-text class="obligatoryDot" />
2173
2262
  }
2174
2263
  </ion-label>
2175
2264
  }
2176
- <ion-label class="value" [class.selectable]="!disabled">
2177
- @if (!valueToDisplay && !disabled) {
2178
- <ion-text class="placeholder" [class.selectable]="!disabled">
2179
- {{ placeholder }}
2265
+ <ion-label class="value" [class.selectable]="!disabled()">
2266
+ @if (!valueToDisplay && !disabled()) {
2267
+ <ion-text class="placeholder" [class.selectable]="!disabled()">
2268
+ {{ placeholder() }}
2180
2269
  </ion-text>
2181
2270
  }
2182
2271
  {{ valueToDisplay }}
2183
2272
  </ion-label>
2184
- @if (!disabled) {
2185
- <ion-icon slot="end" icon="caret-down" class="selectIcon" [class.selectable]="!disabled" />
2273
+ @if (!disabled()) {
2274
+ <ion-icon slot="end" icon="caret-down" class="selectIcon" [class.selectable]="!disabled()" />
2186
2275
  }
2187
2276
  </ion-item>
2188
2277
  `, styles: [".dateTimeItem{min-height:48px;height:auto}.dateTimeItem .description{margin:10px 0;height:20px;line-height:20px;width:100%}.dateTimeItem .placeholder{color:var(--ion-color-medium)}.dateTimeItem .value{white-space:nowrap}.dateTimeItem .selectIcon{margin:0;padding-left:4px;font-size:.8em;color:var(--ion-color-medium)}.dateTimeItem.withLabel{min-height:58px;height:auto}.dateTimeItem.withLabel .selectIcon{padding-top:25px}.dateTimeItem.withLabel ion-button[slot=start]{margin-top:16px}.selectable{cursor:pointer}\n"] }]
2189
- }], propDecorators: { date: [{
2190
- type: Input
2191
- }], timePicker: [{
2192
- type: Input
2193
- }], manualTimePicker: [{
2194
- type: Input
2195
- }], useISOFormat: [{
2196
- type: Input
2197
- }], label: [{
2198
- type: Input
2199
- }], icon: [{
2200
- type: Input
2201
- }], iconColor: [{
2202
- type: Input
2203
- }], lines: [{
2204
- type: Input
2205
- }], color: [{
2206
- type: Input
2207
- }], placeholder: [{
2208
- type: Input
2209
- }], disabled: [{
2210
- type: Input
2211
- }], obligatory: [{
2212
- type: Input
2213
- }], hideClearButton: [{
2214
- type: Input
2215
- }], min: [{
2216
- type: Input
2217
- }], max: [{
2218
- type: Input
2219
- }], dateChange: [{
2220
- type: Output
2221
- }], iconSelect: [{
2222
- type: Output
2223
- }] } });
2278
+ }], propDecorators: { date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: false }] }], timePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "timePicker", required: false }] }], manualTimePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "manualTimePicker", required: false }] }], useISOFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "useISOFormat", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }], lines: [{ type: i0.Input, args: [{ isSignal: true, alias: "lines", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], obligatory: [{ type: i0.Input, args: [{ isSignal: true, alias: "obligatory", 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 }] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }], iconSelect: [{ type: i0.Output, args: ["iconSelect"] }] } });
2224
2279
 
2225
2280
  class IDEADurationComponent {
2226
2281
  constructor() {
2282
+ /**
2283
+ * The title (hint) for the field.
2284
+ */
2285
+ this.title = input(/* @ts-ignore */
2286
+ ...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
2287
+ /**
2288
+ * If true, the component is disabled.
2289
+ */
2290
+ this.disabled = input(/* @ts-ignore */
2291
+ ...(ngDevMode ? [undefined, { debugName: "disabled" }] : /* istanbul ignore next */ []));
2292
+ /**
2293
+ * If true, the obligatory dot is shown.
2294
+ */
2295
+ this.obligatory = input(/* @ts-ignore */
2296
+ ...(ngDevMode ? [undefined, { debugName: "obligatory" }] : /* istanbul ignore next */ []));
2297
+ /**
2298
+ * Lines preferences for the item.
2299
+ */
2300
+ this.lines = input(/* @ts-ignore */
2301
+ ...(ngDevMode ? [undefined, { debugName: "lines" }] : /* istanbul ignore next */ []));
2302
+ /**
2303
+ * The color for the component.
2304
+ */
2305
+ this.color = input(/* @ts-ignore */
2306
+ ...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
2307
+ /**
2308
+ * Whether to show or hide the seconds input.
2309
+ */
2310
+ this.hideSeconds = input(/* @ts-ignore */
2311
+ ...(ngDevMode ? [undefined, { debugName: "hideSeconds" }] : /* istanbul ignore next */ []));
2312
+ /**
2313
+ * Whether to show a shortened version of the labels.
2314
+ */
2315
+ this.shortLabels = input(/* @ts-ignore */
2316
+ ...(ngDevMode ? [undefined, { debugName: "shortLabels" }] : /* istanbul ignore next */ []));
2227
2317
  /**
2228
2318
  * On change event. It emits a number of seconds representing the duration.
2229
2319
  */
2230
- this.set = new EventEmitter();
2320
+ this.set = output();
2231
2321
  this.default = this.hours = this.minutes = this.seconds = 0;
2232
2322
  }
2233
2323
  ngOnChanges(changes) {
@@ -2238,7 +2328,7 @@ class IDEADurationComponent {
2238
2328
  refDate.setSeconds(refDate.getSeconds() + this.default);
2239
2329
  this.hours = refDate.getHours();
2240
2330
  this.minutes = refDate.getMinutes();
2241
- this.seconds = this.hideSeconds ? 0 : refDate.getSeconds();
2331
+ this.seconds = this.hideSeconds() ? 0 : refDate.getSeconds();
2242
2332
  }
2243
2333
  }
2244
2334
  /**
@@ -2256,7 +2346,7 @@ class IDEADurationComponent {
2256
2346
  break;
2257
2347
  case 'seconds':
2258
2348
  const ss = Number(this.seconds) || 0;
2259
- if (this.hideSeconds)
2349
+ if (this.hideSeconds())
2260
2350
  this.seconds = 0;
2261
2351
  else
2262
2352
  this.seconds = ss > 59 ? 59 : ss < 0 ? 0 : ss;
@@ -2264,16 +2354,16 @@ class IDEADurationComponent {
2264
2354
  }
2265
2355
  this.set.emit(this.hours * 3600 + this.minutes * 60 + this.seconds);
2266
2356
  }
2267
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEADurationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2268
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: IDEADurationComponent, isStandalone: true, selector: "idea-duration", inputs: { default: "default", label: "label", icon: "icon", title: "title", disabled: "disabled", obligatory: "obligatory", lines: "lines", color: "color", hideSeconds: "hideSeconds", shortLabels: "shortLabels" }, outputs: { set: "set" }, usesOnChanges: true, ngImport: i0, template: `
2269
- <ion-item class="durationItem" [lines]="lines" [color]="color" [title]="title || label">
2357
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEADurationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2358
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: IDEADurationComponent, isStandalone: true, selector: "idea-duration", inputs: { default: { classPropertyName: "default", publicName: "default", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, obligatory: { classPropertyName: "obligatory", publicName: "obligatory", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, hideSeconds: { classPropertyName: "hideSeconds", publicName: "hideSeconds", isSignal: true, isRequired: false, transformFunction: null }, shortLabels: { classPropertyName: "shortLabels", publicName: "shortLabels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { set: "set" }, usesOnChanges: true, ngImport: i0, template: `
2359
+ <ion-item class="durationItem" [lines]="lines()" [color]="color()" [title]="title() || label">
2270
2360
  @if (icon) {
2271
2361
  <ion-icon slot="start" [name]="icon" />
2272
2362
  }
2273
2363
  @if (!icon && label) {
2274
2364
  <ion-label position="stacked">
2275
2365
  {{ label }}
2276
- @if (obligatory && !disabled) {
2366
+ @if (obligatory() && !disabled()) {
2277
2367
  <ion-text class="obligatoryDot" />
2278
2368
  }
2279
2369
  </ion-label>
@@ -2284,58 +2374,60 @@ class IDEADurationComponent {
2284
2374
  min="0"
2285
2375
  max="23"
2286
2376
  inputmode="numeric"
2287
- [disabled]="disabled"
2377
+ [disabled]="disabled()"
2288
2378
  [(ngModel)]="hours"
2289
2379
  (ionChange)="setDuration('hours')"
2290
2380
  />
2291
2381
  <ion-text>{{
2292
- ((shortLabels ? 'IDEA_UNCOMMON.DURATION.HH' : 'IDEA_UNCOMMON.DURATION.HOURS') | translate).toLowerCase()
2382
+ ((shortLabels() ? 'IDEA_UNCOMMON.DURATION.HH' : 'IDEA_UNCOMMON.DURATION.HOURS') | translate).toLowerCase()
2293
2383
  }}</ion-text>
2294
2384
  <ion-input
2295
2385
  type="number"
2296
2386
  min="0"
2297
2387
  max="59"
2298
2388
  inputmode="numeric"
2299
- [disabled]="disabled"
2389
+ [disabled]="disabled()"
2300
2390
  [(ngModel)]="minutes"
2301
2391
  (ionChange)="setDuration('minutes')"
2302
2392
  />
2303
2393
  <ion-text>{{
2304
- ((shortLabels ? 'IDEA_UNCOMMON.DURATION.MM' : 'IDEA_UNCOMMON.DURATION.MINUTES') | translate).toLowerCase()
2394
+ ((shortLabels() ? 'IDEA_UNCOMMON.DURATION.MM' : 'IDEA_UNCOMMON.DURATION.MINUTES') | translate).toLowerCase()
2305
2395
  }}</ion-text>
2306
- @if (!hideSeconds) {
2396
+ @if (!hideSeconds()) {
2307
2397
  <ion-input
2308
2398
  type="number"
2309
2399
  min="0"
2310
2400
  max="59"
2311
2401
  inputmode="numeric"
2312
- [disabled]="disabled"
2402
+ [disabled]="disabled()"
2313
2403
  [(ngModel)]="seconds"
2314
2404
  (ionChange)="setDuration('seconds')"
2315
2405
  />
2316
2406
  }
2317
- @if (!hideSeconds) {
2407
+ @if (!hideSeconds()) {
2318
2408
  <ion-text>
2319
2409
  {{
2320
- ((shortLabels ? 'IDEA_UNCOMMON.DURATION.SS' : 'IDEA_UNCOMMON.DURATION.SECONDS') | translate).toLowerCase()
2410
+ (
2411
+ (shortLabels() ? 'IDEA_UNCOMMON.DURATION.SS' : 'IDEA_UNCOMMON.DURATION.SECONDS') | translate
2412
+ ).toLowerCase()
2321
2413
  }}
2322
2414
  </ion-text>
2323
2415
  }
2324
2416
  </ion-label>
2325
2417
  </ion-item>
2326
- `, isInline: true, styles: [".durationItem .value{max-width:none;width:100%;pointer-events:all}.durationItem .value ion-input{display:inline-block;max-width:35px;text-align:right}.durationItem .value ion-text{margin-left:10px;margin-right:20px;font-size:.8em}\n"], dependencies: [{ kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: IDEATranslatePipe, name: "translate" }] }); }
2418
+ `, isInline: true, styles: [".durationItem .value{max-width:none;width:100%;pointer-events:all}.durationItem .value ion-input{display:inline-block;max-width:35px;text-align:right}.durationItem .value ion-text{margin-left:10px;margin-right:20px;font-size:.8em}\n"], dependencies: [{ kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: IDEATranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2327
2419
  }
2328
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEADurationComponent, decorators: [{
2420
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEADurationComponent, decorators: [{
2329
2421
  type: Component,
2330
- args: [{ selector: 'idea-duration', imports: [IonText, IonLabel, IonIcon, IonItem, CommonModule, FormsModule, IDEATranslatePipe], template: `
2331
- <ion-item class="durationItem" [lines]="lines" [color]="color" [title]="title || label">
2422
+ args: [{ selector: 'idea-duration', imports: [IonText, IonLabel, IonIcon, IonItem, FormsModule, IDEATranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: `
2423
+ <ion-item class="durationItem" [lines]="lines()" [color]="color()" [title]="title() || label">
2332
2424
  @if (icon) {
2333
2425
  <ion-icon slot="start" [name]="icon" />
2334
2426
  }
2335
2427
  @if (!icon && label) {
2336
2428
  <ion-label position="stacked">
2337
2429
  {{ label }}
2338
- @if (obligatory && !disabled) {
2430
+ @if (obligatory() && !disabled()) {
2339
2431
  <ion-text class="obligatoryDot" />
2340
2432
  }
2341
2433
  </ion-label>
@@ -2346,40 +2438,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
2346
2438
  min="0"
2347
2439
  max="23"
2348
2440
  inputmode="numeric"
2349
- [disabled]="disabled"
2441
+ [disabled]="disabled()"
2350
2442
  [(ngModel)]="hours"
2351
2443
  (ionChange)="setDuration('hours')"
2352
2444
  />
2353
2445
  <ion-text>{{
2354
- ((shortLabels ? 'IDEA_UNCOMMON.DURATION.HH' : 'IDEA_UNCOMMON.DURATION.HOURS') | translate).toLowerCase()
2446
+ ((shortLabels() ? 'IDEA_UNCOMMON.DURATION.HH' : 'IDEA_UNCOMMON.DURATION.HOURS') | translate).toLowerCase()
2355
2447
  }}</ion-text>
2356
2448
  <ion-input
2357
2449
  type="number"
2358
2450
  min="0"
2359
2451
  max="59"
2360
2452
  inputmode="numeric"
2361
- [disabled]="disabled"
2453
+ [disabled]="disabled()"
2362
2454
  [(ngModel)]="minutes"
2363
2455
  (ionChange)="setDuration('minutes')"
2364
2456
  />
2365
2457
  <ion-text>{{
2366
- ((shortLabels ? 'IDEA_UNCOMMON.DURATION.MM' : 'IDEA_UNCOMMON.DURATION.MINUTES') | translate).toLowerCase()
2458
+ ((shortLabels() ? 'IDEA_UNCOMMON.DURATION.MM' : 'IDEA_UNCOMMON.DURATION.MINUTES') | translate).toLowerCase()
2367
2459
  }}</ion-text>
2368
- @if (!hideSeconds) {
2460
+ @if (!hideSeconds()) {
2369
2461
  <ion-input
2370
2462
  type="number"
2371
2463
  min="0"
2372
2464
  max="59"
2373
2465
  inputmode="numeric"
2374
- [disabled]="disabled"
2466
+ [disabled]="disabled()"
2375
2467
  [(ngModel)]="seconds"
2376
2468
  (ionChange)="setDuration('seconds')"
2377
2469
  />
2378
2470
  }
2379
- @if (!hideSeconds) {
2471
+ @if (!hideSeconds()) {
2380
2472
  <ion-text>
2381
2473
  {{
2382
- ((shortLabels ? 'IDEA_UNCOMMON.DURATION.SS' : 'IDEA_UNCOMMON.DURATION.SECONDS') | translate).toLowerCase()
2474
+ (
2475
+ (shortLabels() ? 'IDEA_UNCOMMON.DURATION.SS' : 'IDEA_UNCOMMON.DURATION.SECONDS') | translate
2476
+ ).toLowerCase()
2383
2477
  }}
2384
2478
  </ion-text>
2385
2479
  }
@@ -2392,23 +2486,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
2392
2486
  type: Input
2393
2487
  }], icon: [{
2394
2488
  type: Input
2395
- }], title: [{
2396
- type: Input
2397
- }], disabled: [{
2398
- type: Input
2399
- }], obligatory: [{
2400
- type: Input
2401
- }], lines: [{
2402
- type: Input
2403
- }], color: [{
2404
- type: Input
2405
- }], hideSeconds: [{
2406
- type: Input
2407
- }], shortLabels: [{
2408
- type: Input
2409
- }], set: [{
2410
- type: Output
2411
- }] } });
2489
+ }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], obligatory: [{ type: i0.Input, args: [{ isSignal: true, alias: "obligatory", required: false }] }], lines: [{ type: i0.Input, args: [{ isSignal: true, alias: "lines", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], hideSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideSeconds", required: false }] }], shortLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "shortLabels", required: false }] }], set: [{ type: i0.Output, args: ["set"] }] } });
2412
2490
 
2413
2491
  class IDEAEchoPage {
2414
2492
  constructor() {
@@ -2547,8 +2625,8 @@ class IDEAEchoPage {
2547
2625
  this._loading.hide();
2548
2626
  }
2549
2627
  }
2550
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEAEchoPage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2551
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: IDEAEchoPage, isStandalone: true, selector: "idea-echo", ngImport: i0, template: `
2628
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEAEchoPage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2629
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: IDEAEchoPage, isStandalone: true, selector: "idea-echo", ngImport: i0, template: `
2552
2630
  <ion-content>
2553
2631
  <div class="flexBox">
2554
2632
  <ion-card class="echoCard maxWidthContainer">
@@ -2577,21 +2655,11 @@ class IDEAEchoPage {
2577
2655
  </ion-card>
2578
2656
  </div>
2579
2657
  </ion-content>
2580
- `, isInline: true, styles: [".echoCard{min-width:300px;padding:30px 20px;text-align:center}.echoCard ion-img{width:80px;display:block;margin:0 auto}.echoCard ion-icon{font-size:1.8em}.echoCard ion-card-content{margin-bottom:20px;font-size:1.2em}.echoCard ion-card-content p.youCanCloseMe{margin-top:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: IonImg, selector: "ion-img", inputs: ["alt", "src"] }, { kind: "component", type: IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "pipe", type: IDEATranslatePipe, name: "translate" }] }); }
2658
+ `, isInline: true, styles: [".echoCard{min-width:300px;padding:30px 20px;text-align:center}.echoCard ion-img{width:80px;display:block;margin:0 auto}.echoCard ion-icon{font-size:1.8em}.echoCard ion-card-content{margin-bottom:20px;font-size:1.2em}.echoCard ion-card-content p.youCanCloseMe{margin-top:12px}\n"], dependencies: [{ kind: "component", type: IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: IonImg, selector: "ion-img", inputs: ["alt", "src"] }, { kind: "component", type: IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "pipe", type: IDEATranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2581
2659
  }
2582
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEAEchoPage, decorators: [{
2660
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEAEchoPage, decorators: [{
2583
2661
  type: Component,
2584
- args: [{ selector: 'idea-echo', imports: [
2585
- CommonModule,
2586
- IDEATranslatePipe,
2587
- IonCardContent,
2588
- IonIcon,
2589
- IonCardTitle,
2590
- IonCardHeader,
2591
- IonImg,
2592
- IonCard,
2593
- IonContent
2594
- ], template: `
2662
+ args: [{ selector: 'idea-echo', imports: [IDEATranslatePipe, IonCardContent, IonIcon, IonCardTitle, IonCardHeader, IonImg, IonCard, IonContent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
2595
2663
  <ion-content>
2596
2664
  <div class="flexBox">
2597
2665
  <ion-card class="echoCard maxWidthContainer">
@@ -2640,18 +2708,18 @@ const ideaEchoRoutes = [
2640
2708
  ];
2641
2709
 
2642
2710
  class IDEAMDEToolbarComponent {
2643
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEAMDEToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2644
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: IDEAMDEToolbarComponent, isStandalone: true, selector: "idea-mde-toolbar", ngImport: i0, template: `
2711
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEAMDEToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2712
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: IDEAMDEToolbarComponent, isStandalone: true, selector: "idea-mde-toolbar", ngImport: i0, template: `
2645
2713
  <div class="mdeToolbar">
2646
2714
  <b>**{{ 'IDEA_UNCOMMON.MDE.TOOLBAR.BOLD' | translate }}**</b>
2647
2715
  <i>*{{ 'IDEA_UNCOMMON.MDE.TOOLBAR.ITALIC' | translate }}*</i>
2648
2716
  ~{{ 'IDEA_UNCOMMON.MDE.TOOLBAR.STRIKE' | translate }}~
2649
2717
  </div>
2650
- `, isInline: true, styles: [".mdeToolbar{text-align:right;color:#aaa;padding:5px 0;font-size:.9em}.mdeToolbar b,.mdeToolbar i{padding-right:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: IDEATranslatePipe, name: "translate" }] }); }
2718
+ `, isInline: true, styles: [".mdeToolbar{text-align:right;color:#aaa;padding:5px 0;font-size:.9em}.mdeToolbar b,.mdeToolbar i{padding-right:5px}\n"], dependencies: [{ kind: "pipe", type: IDEATranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2651
2719
  }
2652
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEAMDEToolbarComponent, decorators: [{
2720
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEAMDEToolbarComponent, decorators: [{
2653
2721
  type: Component,
2654
- args: [{ selector: 'idea-mde-toolbar', imports: [CommonModule, IDEATranslatePipe], template: `
2722
+ args: [{ selector: 'idea-mde-toolbar', imports: [IDEATranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: `
2655
2723
  <div class="mdeToolbar">
2656
2724
  <b>**{{ 'IDEA_UNCOMMON.MDE.TOOLBAR.BOLD' | translate }}**</b>
2657
2725
  <i>*{{ 'IDEA_UNCOMMON.MDE.TOOLBAR.ITALIC' | translate }}*</i>
@@ -2663,11 +2731,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
2663
2731
  class IDEAMDEComponent {
2664
2732
  constructor() {
2665
2733
  this._modal = inject(ModalController);
2734
+ /**
2735
+ * The title of the modal.
2736
+ */
2737
+ this.title = input(/* @ts-ignore */
2738
+ ...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
2739
+ /**
2740
+ * If set, will customize the initial value of the editor.
2741
+ */
2742
+ this.initialValue = input(/* @ts-ignore */
2743
+ ...(ngDevMode ? [undefined, { debugName: "initialValue" }] : /* istanbul ignore next */ []));
2744
+ /**
2745
+ * Custom placeholder that should be displayed.
2746
+ */
2747
+ this.placeholder = input(/* @ts-ignore */
2748
+ ...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
2666
2749
  }
2667
2750
  ngOnInit() {
2668
2751
  this.id = this.id || 'mde';
2669
2752
  this.variables = this.variables || new Array();
2670
- this.value = this.initialValue;
2753
+ this.value = this.initialValue();
2671
2754
  }
2672
2755
  close() {
2673
2756
  this._modal.dismiss();
@@ -2675,8 +2758,8 @@ class IDEAMDEComponent {
2675
2758
  confirm() {
2676
2759
  this._modal.dismiss(this.value);
2677
2760
  }
2678
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEAMDEComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2679
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: IDEAMDEComponent, isStandalone: true, selector: "idea-mde", inputs: { id: "id", title: "title", header: "header", description: "description", variables: "variables", initialValue: "initialValue", placeholder: "placeholder" }, ngImport: i0, template: `
2761
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEAMDEComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2762
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: IDEAMDEComponent, isStandalone: true, selector: "idea-mde", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: false, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: false, isRequired: false, transformFunction: null }, variables: { classPropertyName: "variables", publicName: "variables", isSignal: false, isRequired: false, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
2680
2763
  <ion-header>
2681
2764
  <ion-toolbar color="ideaToolbar">
2682
2765
  <ion-buttons slot="start">
@@ -2685,7 +2768,7 @@ class IDEAMDEComponent {
2685
2768
  </ion-button>
2686
2769
  </ion-buttons>
2687
2770
  <ion-title>
2688
- {{ title || ('IDEA_UNCOMMON.MDE.TITLE' | translate) }}
2771
+ {{ title() || ('IDEA_UNCOMMON.MDE.TITLE' | translate) }}
2689
2772
  </ion-title>
2690
2773
  <ion-buttons slot="end">
2691
2774
  <ion-button [title]="'IDEA_UNCOMMON.MDE.SAVE_AND_CLOSE' | translate" (click)="confirm()">
@@ -2715,15 +2798,14 @@ class IDEAMDEComponent {
2715
2798
  }
2716
2799
  </p>
2717
2800
  }
2718
- <ion-textarea rows="12" [id]="id" [placeholder]="placeholder" [(ngModel)]="value" />
2801
+ <ion-textarea rows="12" [id]="id" [placeholder]="placeholder()" [(ngModel)]="value" />
2719
2802
  <idea-mde-toolbar />
2720
2803
  </ion-content>
2721
- `, isInline: true, styles: ["ion-content{--ion-background-color: #f4f4f4}h2.header{margin:0;font-size:.7em;font-weight:700;text-transform:uppercase}.description{margin-top:5px;margin-bottom:20px;font-size:.9em}.variables{margin:10px 5px;font-size:.8em}ion-textarea{--background: var(--ion-color-white);padding:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IDEAMDEToolbarComponent, selector: "idea-mde-toolbar" }, { kind: "component", type: IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "shape", "spellcheck", "value", "wrap"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: 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" }] }); }
2804
+ `, isInline: true, styles: ["ion-content{--ion-background-color: #f4f4f4}h2.header{margin:0;font-size:.7em;font-weight:700;text-transform:uppercase}.description{margin-top:5px;margin-bottom:20px;font-size:.9em}.variables{margin:10px 5px;font-size:.8em}ion-textarea{--background: var(--ion-color-white);padding:10px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IDEAMDEToolbarComponent, selector: "idea-mde-toolbar" }, { kind: "component", type: IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "shape", "spellcheck", "value", "wrap"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: 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 }); }
2722
2805
  }
2723
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEAMDEComponent, decorators: [{
2806
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEAMDEComponent, decorators: [{
2724
2807
  type: Component,
2725
2808
  args: [{ selector: 'idea-mde', imports: [
2726
- CommonModule,
2727
2809
  FormsModule,
2728
2810
  IDEATranslatePipe,
2729
2811
  IDEAMDEToolbarComponent,
@@ -2736,7 +2818,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
2736
2818
  IonButtons,
2737
2819
  IonToolbar,
2738
2820
  IonHeader
2739
- ], template: `
2821
+ ], changeDetection: ChangeDetectionStrategy.OnPush, template: `
2740
2822
  <ion-header>
2741
2823
  <ion-toolbar color="ideaToolbar">
2742
2824
  <ion-buttons slot="start">
@@ -2745,7 +2827,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
2745
2827
  </ion-button>
2746
2828
  </ion-buttons>
2747
2829
  <ion-title>
2748
- {{ title || ('IDEA_UNCOMMON.MDE.TITLE' | translate) }}
2830
+ {{ title() || ('IDEA_UNCOMMON.MDE.TITLE' | translate) }}
2749
2831
  </ion-title>
2750
2832
  <ion-buttons slot="end">
2751
2833
  <ion-button [title]="'IDEA_UNCOMMON.MDE.SAVE_AND_CLOSE' | translate" (click)="confirm()">
@@ -2775,25 +2857,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
2775
2857
  }
2776
2858
  </p>
2777
2859
  }
2778
- <ion-textarea rows="12" [id]="id" [placeholder]="placeholder" [(ngModel)]="value" />
2860
+ <ion-textarea rows="12" [id]="id" [placeholder]="placeholder()" [(ngModel)]="value" />
2779
2861
  <idea-mde-toolbar />
2780
2862
  </ion-content>
2781
2863
  `, styles: ["ion-content{--ion-background-color: #f4f4f4}h2.header{margin:0;font-size:.7em;font-weight:700;text-transform:uppercase}.description{margin-top:5px;margin-bottom:20px;font-size:.9em}.variables{margin:10px 5px;font-size:.8em}ion-textarea{--background: var(--ion-color-white);padding:10px}\n"] }]
2782
2864
  }], propDecorators: { id: [{
2783
2865
  type: Input
2784
- }], title: [{
2785
- type: Input
2786
- }], header: [{
2866
+ }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], header: [{
2787
2867
  type: Input
2788
2868
  }], description: [{
2789
2869
  type: Input
2790
2870
  }], variables: [{
2791
2871
  type: Input
2792
- }], initialValue: [{
2793
- type: Input
2794
- }], placeholder: [{
2795
- type: Input
2796
- }] } });
2872
+ }], initialValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialValue", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
2797
2873
 
2798
2874
  /**
2799
2875
  * After how much time we need to request a synchronisation to keep the contents up-to-date.
@@ -3249,10 +3325,10 @@ class IDEAOfflineDataService {
3249
3325
  forceFullSync() {
3250
3326
  this._storage.clear().then(() => this.synchronize(true));
3251
3327
  }
3252
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEAOfflineDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
3253
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEAOfflineDataService, providedIn: 'root' }); }
3328
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEAOfflineDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
3329
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEAOfflineDataService, providedIn: 'root' }); }
3254
3330
  }
3255
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEAOfflineDataService, decorators: [{
3331
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEAOfflineDataService, decorators: [{
3256
3332
  type: Injectable,
3257
3333
  args: [{ providedIn: 'root' }]
3258
3334
  }], ctorParameters: () => [] });
@@ -3273,52 +3349,56 @@ class CacheableResource {
3273
3349
  class IDEACacheableResourceComponent {
3274
3350
  constructor() {
3275
3351
  this._offline = inject(IDEAOfflineDataService);
3352
+ /**
3353
+ * The resouece to manage.
3354
+ */
3355
+ this.resource = input(/* @ts-ignore */
3356
+ ...(ngDevMode ? [undefined, { debugName: "resource" }] : /* istanbul ignore next */ []));
3276
3357
  }
3277
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEACacheableResourceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3278
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: IDEACacheableResourceComponent, isStandalone: true, selector: "idea-cacheable-resource", inputs: { resource: "resource" }, ngImport: i0, template: `
3358
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEACacheableResourceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3359
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: IDEACacheableResourceComponent, isStandalone: true, selector: "idea-cacheable-resource", inputs: { resource: { classPropertyName: "resource", publicName: "resource", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
3279
3360
  <ion-item class="cacheableResourceItem">
3280
- <ion-label>{{ resource.description }}</ion-label>
3281
- @if (resource.error) {
3361
+ <ion-label>{{ resource().description }}</ion-label>
3362
+ @if (resource().error) {
3282
3363
  <ion-icon slot="end" name="alert-circle" color="danger" />
3283
3364
  }
3284
- @if (!resource.error && _offline.synchronizing && resource.synchronizing) {
3365
+ @if (!resource().error && _offline.synchronizing && resource().synchronizing) {
3285
3366
  <ion-spinner slot="end" name="dots" />
3286
3367
  }
3287
- @if (!resource.error && !resource.synchronizing && !_offline.requiresManualConfirmation) {
3368
+ @if (!resource().error && !resource().synchronizing && !_offline.requiresManualConfirmation) {
3288
3369
  <ion-icon slot="end" name="checkmark" color="success" />
3289
3370
  }
3290
- @if (!resource.error && !resource.synchronizing && _offline.requiresManualConfirmation) {
3371
+ @if (!resource().error && !resource().synchronizing && _offline.requiresManualConfirmation) {
3291
3372
  <ion-icon slot="end" name="pause" color="dark" />
3292
3373
  }
3293
3374
  </ion-item>
3294
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }] }); }
3375
+ `, isInline: true, dependencies: [{ kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
3295
3376
  }
3296
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEACacheableResourceComponent, decorators: [{
3377
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEACacheableResourceComponent, decorators: [{
3297
3378
  type: Component,
3298
3379
  args: [{
3299
3380
  selector: 'idea-cacheable-resource',
3300
- imports: [CommonModule, IonSpinner, IonIcon, IonLabel, IonItem],
3381
+ imports: [IonSpinner, IonIcon, IonLabel, IonItem],
3382
+ changeDetection: ChangeDetectionStrategy.OnPush,
3301
3383
  template: `
3302
3384
  <ion-item class="cacheableResourceItem">
3303
- <ion-label>{{ resource.description }}</ion-label>
3304
- @if (resource.error) {
3385
+ <ion-label>{{ resource().description }}</ion-label>
3386
+ @if (resource().error) {
3305
3387
  <ion-icon slot="end" name="alert-circle" color="danger" />
3306
3388
  }
3307
- @if (!resource.error && _offline.synchronizing && resource.synchronizing) {
3389
+ @if (!resource().error && _offline.synchronizing && resource().synchronizing) {
3308
3390
  <ion-spinner slot="end" name="dots" />
3309
3391
  }
3310
- @if (!resource.error && !resource.synchronizing && !_offline.requiresManualConfirmation) {
3392
+ @if (!resource().error && !resource().synchronizing && !_offline.requiresManualConfirmation) {
3311
3393
  <ion-icon slot="end" name="checkmark" color="success" />
3312
3394
  }
3313
- @if (!resource.error && !resource.synchronizing && _offline.requiresManualConfirmation) {
3395
+ @if (!resource().error && !resource().synchronizing && _offline.requiresManualConfirmation) {
3314
3396
  <ion-icon slot="end" name="pause" color="dark" />
3315
3397
  }
3316
3398
  </ion-item>
3317
3399
  `
3318
3400
  }]
3319
- }], propDecorators: { resource: [{
3320
- type: Input
3321
- }] } });
3401
+ }], propDecorators: { resource: [{ type: i0.Input, args: [{ isSignal: true, alias: "resource", required: false }] }] } });
3322
3402
 
3323
3403
  class IDEAOfflineManagerComponent {
3324
3404
  constructor() {
@@ -3387,10 +3467,10 @@ class IDEAOfflineManagerComponent {
3387
3467
  close() {
3388
3468
  this._modal.dismiss();
3389
3469
  }
3390
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEAOfflineManagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3391
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: IDEAOfflineManagerComponent, isStandalone: true, selector: "idea-offline-manager", ngImport: i0, template: "<ion-header>\n <ion-toolbar color=\"ideaToolbar\">\n <ion-buttons slot=\"start\">\n <ion-button (click)=\"close()\">\n <ion-icon name=\"close\" slot=\"icon-only\" />\n </ion-button>\n </ion-buttons>\n <ion-title>\n {{ 'IDEA_UNCOMMON.OFFLINE.OFFLINE_MANAGER' | translate }}\n </ion-title>\n <ion-buttons slot=\"end\">\n <ion-button [title]=\"'IDEA_UNCOMMON.OFFLINE.ADVANCED_ACTIONS' | translate\" (click)=\"actions()\">\n <ion-icon slot=\"icon-only\" name=\"ellipsis-vertical\" />\n </ion-button>\n </ion-buttons>\n </ion-toolbar>\n</ion-header>\n<ion-content>\n <ion-list class=\"aList\">\n @if (!_offline.synchronizing && _offline.requiresManualConfirmation) {\n <ion-list-header>\n <ion-label>\n <h2>{{ 'IDEA_UNCOMMON.OFFLINE.HUGE_SYNC_NEED_MANUAL_CONFIRMATION' | translate }}</h2>\n </ion-label>\n </ion-list-header>\n }\n @if (!_offline.synchronizing) {\n <ion-list-header>\n <ion-label class=\"ion-text-wrap\">\n <h3 class=\"lastSyncAt\">\n {{ 'IDEA_UNCOMMON.OFFLINE.LAST_SYNC' | translate }}:\n <ion-text>\n {{\n _offline.lastSyncAt\n ? (_offline.lastSyncAt | dateLocale: 'medium')\n : ('IDEA_UNCOMMON.OFFLINE.NEVER' | translate)\n }}\n </ion-text>\n </h3>\n @if (_offline.errorInLastSync) {\n <p>\n <ion-text color=\"danger\">\n <b>{{ 'IDEA_UNCOMMON.OFFLINE.ERROR_DURING_LAST_SYNC' | translate }}</b>\n </ion-text>\n </p>\n }\n </ion-label>\n <ion-button\n size=\"small\"\n fill=\"solid\"\n [color]=\"_offline.errorInLastSync ? 'danger' : 'dark'\"\n [disabled]=\"_offline.isOffline()\"\n (click)=\"sync()\"\n >\n <ion-icon slot=\"start\" name=\"sync\" /> {{ 'IDEA_UNCOMMON.OFFLINE.SYNC_NOW' | translate }}\n </ion-button>\n </ion-list-header>\n }\n </ion-list>\n @if (_offline.synchronizing) {\n <ion-list class=\"aList\">\n <ion-item>\n <ion-label class=\"ion-text-center\">\n <ion-spinner name=\"crescent\" color=\"primary\" />\n </ion-label>\n </ion-item>\n </ion-list>\n }\n @if (_offline.useQueueAPIRequests) {\n <ion-list class=\"aList\">\n <ion-list-header>\n <ion-label>\n <h2>{{ 'IDEA_UNCOMMON.OFFLINE.UPLOAD' | translate }}</h2>\n <p>{{ 'IDEA_UNCOMMON.OFFLINE.UPLOAD_QUEUE_REQUESTS_EXPLANATION' | translate }}</p>\n </ion-label>\n </ion-list-header>\n @if (!_offline.queueAPIRequests.length) {\n <ion-item>\n <i>{{ 'IDEA_UNCOMMON.OFFLINE.NO_ELEMENTS_TO_UPLOAD' | translate }}</i>\n <ion-icon slot=\"end\" size=\"small\" name=\"checkmark\" color=\"success\" />\n </ion-item>\n }\n @for (r of _offline.queueAPIRequests; track r; let odd = $odd) {\n <ion-item [class.oddItem]=\"odd\">\n <ion-label class=\"ion-text-wrap\">\n {{ r.description }}\n @if (r.error) {\n <p>\n <ion-text color=\"danger\">\n <b>{{ 'IDEA_UNCOMMON.OFFLINE.ERROR_CODE' | translate }}: {{ r.error }}</b>\n </ion-text>\n <br />\n {{ 'IDEA_UNCOMMON.OFFLINE.REQUEST_FAILED_EXPLANATION_I' | translate }}<br />\n {{ 'IDEA_UNCOMMON.OFFLINE.REQUEST_FAILED_EXPLANATION_II' | translate }}<br />\n {{ 'IDEA_UNCOMMON.OFFLINE.REQUEST_FAILED_EXPLANATION_III' | translate }}\n </p>\n }\n </ion-label>\n @if (r.error) {\n <ion-button\n fill=\"clear\"\n slot=\"end\"\n color=\"danger\"\n [title]=\"'IDEA_UNCOMMON.OFFLINE.CANCEL_REQUEST' | translate\"\n (click)=\"deleteRequest(r)\"\n >\n <ion-icon slot=\"icon-only\" name=\"trash\" />\n </ion-button>\n }\n @if (r.error) {\n <ion-button\n fill=\"clear\"\n slot=\"end\"\n color=\"medium\"\n [title]=\"'IDEA_UNCOMMON.OFFLINE.DOWNLOAD_LOG' | translate\"\n (click)=\"downloadRequestLog(r)\"\n >\n <ion-icon slot=\"icon-only\" name=\"download\" />\n </ion-button>\n }\n @if (_offline.synchronizing) {\n <ion-spinner slot=\"end\" name=\"dots\" />\n }\n </ion-item>\n }\n </ion-list>\n }\n @if (_offline.getResources().length) {\n <ion-list class=\"aList\">\n <ion-list-header>\n <ion-label>\n <h2>{{ 'IDEA_UNCOMMON.OFFLINE.DOWNLOAD' | translate }}</h2>\n <p>{{ 'IDEA_UNCOMMON.OFFLINE.DOWNLOAD_RESOURCES_EXPLANATION' | translate }}</p>\n </ion-label>\n </ion-list-header>\n @for (r of _offline.getResources(); track r) {\n <idea-cacheable-resource [resource]=\"_offline.getCacheableResource(r)\" />\n }\n </ion-list>\n }\n</ion-content>\n", styles: [".aList{max-width:500px;margin:0 auto}.aList ion-list-header{padding-right:10px}.aList ion-list-header h3.lastSyncAt{margin-top:6px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IDEACacheableResourceComponent, selector: "idea-cacheable-resource", inputs: ["resource"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "pipe", type: IDEATranslatePipe, name: "translate" }, { kind: "pipe", type: IDEALocalizedDatePipe, name: "dateLocale" }] }); }
3470
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEAOfflineManagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3471
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: IDEAOfflineManagerComponent, isStandalone: true, selector: "idea-offline-manager", ngImport: i0, template: "<ion-header>\n <ion-toolbar color=\"ideaToolbar\">\n <ion-buttons slot=\"start\">\n <ion-button (click)=\"close()\">\n <ion-icon name=\"close\" slot=\"icon-only\" />\n </ion-button>\n </ion-buttons>\n <ion-title>\n {{ 'IDEA_UNCOMMON.OFFLINE.OFFLINE_MANAGER' | translate }}\n </ion-title>\n <ion-buttons slot=\"end\">\n <ion-button [title]=\"'IDEA_UNCOMMON.OFFLINE.ADVANCED_ACTIONS' | translate\" (click)=\"actions()\">\n <ion-icon slot=\"icon-only\" name=\"ellipsis-vertical\" />\n </ion-button>\n </ion-buttons>\n </ion-toolbar>\n</ion-header>\n<ion-content>\n <ion-list class=\"aList\">\n @if (!_offline.synchronizing && _offline.requiresManualConfirmation) {\n <ion-list-header>\n <ion-label>\n <h2>{{ 'IDEA_UNCOMMON.OFFLINE.HUGE_SYNC_NEED_MANUAL_CONFIRMATION' | translate }}</h2>\n </ion-label>\n </ion-list-header>\n }\n @if (!_offline.synchronizing) {\n <ion-list-header>\n <ion-label class=\"ion-text-wrap\">\n <h3 class=\"lastSyncAt\">\n {{ 'IDEA_UNCOMMON.OFFLINE.LAST_SYNC' | translate }}:\n <ion-text>\n {{\n _offline.lastSyncAt\n ? (_offline.lastSyncAt | dateLocale: 'medium')\n : ('IDEA_UNCOMMON.OFFLINE.NEVER' | translate)\n }}\n </ion-text>\n </h3>\n @if (_offline.errorInLastSync) {\n <p>\n <ion-text color=\"danger\">\n <b>{{ 'IDEA_UNCOMMON.OFFLINE.ERROR_DURING_LAST_SYNC' | translate }}</b>\n </ion-text>\n </p>\n }\n </ion-label>\n <ion-button\n size=\"small\"\n fill=\"solid\"\n [color]=\"_offline.errorInLastSync ? 'danger' : 'dark'\"\n [disabled]=\"_offline.isOffline()\"\n (click)=\"sync()\"\n >\n <ion-icon slot=\"start\" name=\"sync\" /> {{ 'IDEA_UNCOMMON.OFFLINE.SYNC_NOW' | translate }}\n </ion-button>\n </ion-list-header>\n }\n </ion-list>\n @if (_offline.synchronizing) {\n <ion-list class=\"aList\">\n <ion-item>\n <ion-label class=\"ion-text-center\">\n <ion-spinner name=\"crescent\" color=\"primary\" />\n </ion-label>\n </ion-item>\n </ion-list>\n }\n @if (_offline.useQueueAPIRequests) {\n <ion-list class=\"aList\">\n <ion-list-header>\n <ion-label>\n <h2>{{ 'IDEA_UNCOMMON.OFFLINE.UPLOAD' | translate }}</h2>\n <p>{{ 'IDEA_UNCOMMON.OFFLINE.UPLOAD_QUEUE_REQUESTS_EXPLANATION' | translate }}</p>\n </ion-label>\n </ion-list-header>\n @if (!_offline.queueAPIRequests.length) {\n <ion-item>\n <i>{{ 'IDEA_UNCOMMON.OFFLINE.NO_ELEMENTS_TO_UPLOAD' | translate }}</i>\n <ion-icon slot=\"end\" size=\"small\" name=\"checkmark\" color=\"success\" />\n </ion-item>\n }\n @for (r of _offline.queueAPIRequests; track r; let odd = $odd) {\n <ion-item [class.oddItem]=\"odd\">\n <ion-label class=\"ion-text-wrap\">\n {{ r.description }}\n @if (r.error) {\n <p>\n <ion-text color=\"danger\">\n <b>{{ 'IDEA_UNCOMMON.OFFLINE.ERROR_CODE' | translate }}: {{ r.error }}</b>\n </ion-text>\n <br />\n {{ 'IDEA_UNCOMMON.OFFLINE.REQUEST_FAILED_EXPLANATION_I' | translate }}<br />\n {{ 'IDEA_UNCOMMON.OFFLINE.REQUEST_FAILED_EXPLANATION_II' | translate }}<br />\n {{ 'IDEA_UNCOMMON.OFFLINE.REQUEST_FAILED_EXPLANATION_III' | translate }}\n </p>\n }\n </ion-label>\n @if (r.error) {\n <ion-button\n fill=\"clear\"\n slot=\"end\"\n color=\"danger\"\n [title]=\"'IDEA_UNCOMMON.OFFLINE.CANCEL_REQUEST' | translate\"\n (click)=\"deleteRequest(r)\"\n >\n <ion-icon slot=\"icon-only\" name=\"trash\" />\n </ion-button>\n }\n @if (r.error) {\n <ion-button\n fill=\"clear\"\n slot=\"end\"\n color=\"medium\"\n [title]=\"'IDEA_UNCOMMON.OFFLINE.DOWNLOAD_LOG' | translate\"\n (click)=\"downloadRequestLog(r)\"\n >\n <ion-icon slot=\"icon-only\" name=\"download\" />\n </ion-button>\n }\n @if (_offline.synchronizing) {\n <ion-spinner slot=\"end\" name=\"dots\" />\n }\n </ion-item>\n }\n </ion-list>\n }\n @if (_offline.getResources().length) {\n <ion-list class=\"aList\">\n <ion-list-header>\n <ion-label>\n <h2>{{ 'IDEA_UNCOMMON.OFFLINE.DOWNLOAD' | translate }}</h2>\n <p>{{ 'IDEA_UNCOMMON.OFFLINE.DOWNLOAD_RESOURCES_EXPLANATION' | translate }}</p>\n </ion-label>\n </ion-list-header>\n @for (r of _offline.getResources(); track r) {\n <idea-cacheable-resource [resource]=\"_offline.getCacheableResource(r)\" />\n }\n </ion-list>\n }\n</ion-content>\n", styles: [".aList{max-width:500px;margin:0 auto}.aList ion-list-header{padding-right:10px}.aList ion-list-header h3.lastSyncAt{margin-top:6px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IDEACacheableResourceComponent, selector: "idea-cacheable-resource", inputs: ["resource"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "pipe", type: IDEATranslatePipe, name: "translate" }, { kind: "pipe", type: IDEALocalizedDatePipe, name: "dateLocale" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
3392
3472
  }
3393
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEAOfflineManagerComponent, decorators: [{
3473
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEAOfflineManagerComponent, decorators: [{
3394
3474
  type: Component,
3395
3475
  args: [{ selector: 'idea-offline-manager', imports: [
3396
3476
  CommonModule,
@@ -3410,7 +3490,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
3410
3490
  IonButton,
3411
3491
  IonToolbar,
3412
3492
  IonHeader
3413
- ], template: "<ion-header>\n <ion-toolbar color=\"ideaToolbar\">\n <ion-buttons slot=\"start\">\n <ion-button (click)=\"close()\">\n <ion-icon name=\"close\" slot=\"icon-only\" />\n </ion-button>\n </ion-buttons>\n <ion-title>\n {{ 'IDEA_UNCOMMON.OFFLINE.OFFLINE_MANAGER' | translate }}\n </ion-title>\n <ion-buttons slot=\"end\">\n <ion-button [title]=\"'IDEA_UNCOMMON.OFFLINE.ADVANCED_ACTIONS' | translate\" (click)=\"actions()\">\n <ion-icon slot=\"icon-only\" name=\"ellipsis-vertical\" />\n </ion-button>\n </ion-buttons>\n </ion-toolbar>\n</ion-header>\n<ion-content>\n <ion-list class=\"aList\">\n @if (!_offline.synchronizing && _offline.requiresManualConfirmation) {\n <ion-list-header>\n <ion-label>\n <h2>{{ 'IDEA_UNCOMMON.OFFLINE.HUGE_SYNC_NEED_MANUAL_CONFIRMATION' | translate }}</h2>\n </ion-label>\n </ion-list-header>\n }\n @if (!_offline.synchronizing) {\n <ion-list-header>\n <ion-label class=\"ion-text-wrap\">\n <h3 class=\"lastSyncAt\">\n {{ 'IDEA_UNCOMMON.OFFLINE.LAST_SYNC' | translate }}:\n <ion-text>\n {{\n _offline.lastSyncAt\n ? (_offline.lastSyncAt | dateLocale: 'medium')\n : ('IDEA_UNCOMMON.OFFLINE.NEVER' | translate)\n }}\n </ion-text>\n </h3>\n @if (_offline.errorInLastSync) {\n <p>\n <ion-text color=\"danger\">\n <b>{{ 'IDEA_UNCOMMON.OFFLINE.ERROR_DURING_LAST_SYNC' | translate }}</b>\n </ion-text>\n </p>\n }\n </ion-label>\n <ion-button\n size=\"small\"\n fill=\"solid\"\n [color]=\"_offline.errorInLastSync ? 'danger' : 'dark'\"\n [disabled]=\"_offline.isOffline()\"\n (click)=\"sync()\"\n >\n <ion-icon slot=\"start\" name=\"sync\" /> {{ 'IDEA_UNCOMMON.OFFLINE.SYNC_NOW' | translate }}\n </ion-button>\n </ion-list-header>\n }\n </ion-list>\n @if (_offline.synchronizing) {\n <ion-list class=\"aList\">\n <ion-item>\n <ion-label class=\"ion-text-center\">\n <ion-spinner name=\"crescent\" color=\"primary\" />\n </ion-label>\n </ion-item>\n </ion-list>\n }\n @if (_offline.useQueueAPIRequests) {\n <ion-list class=\"aList\">\n <ion-list-header>\n <ion-label>\n <h2>{{ 'IDEA_UNCOMMON.OFFLINE.UPLOAD' | translate }}</h2>\n <p>{{ 'IDEA_UNCOMMON.OFFLINE.UPLOAD_QUEUE_REQUESTS_EXPLANATION' | translate }}</p>\n </ion-label>\n </ion-list-header>\n @if (!_offline.queueAPIRequests.length) {\n <ion-item>\n <i>{{ 'IDEA_UNCOMMON.OFFLINE.NO_ELEMENTS_TO_UPLOAD' | translate }}</i>\n <ion-icon slot=\"end\" size=\"small\" name=\"checkmark\" color=\"success\" />\n </ion-item>\n }\n @for (r of _offline.queueAPIRequests; track r; let odd = $odd) {\n <ion-item [class.oddItem]=\"odd\">\n <ion-label class=\"ion-text-wrap\">\n {{ r.description }}\n @if (r.error) {\n <p>\n <ion-text color=\"danger\">\n <b>{{ 'IDEA_UNCOMMON.OFFLINE.ERROR_CODE' | translate }}: {{ r.error }}</b>\n </ion-text>\n <br />\n {{ 'IDEA_UNCOMMON.OFFLINE.REQUEST_FAILED_EXPLANATION_I' | translate }}<br />\n {{ 'IDEA_UNCOMMON.OFFLINE.REQUEST_FAILED_EXPLANATION_II' | translate }}<br />\n {{ 'IDEA_UNCOMMON.OFFLINE.REQUEST_FAILED_EXPLANATION_III' | translate }}\n </p>\n }\n </ion-label>\n @if (r.error) {\n <ion-button\n fill=\"clear\"\n slot=\"end\"\n color=\"danger\"\n [title]=\"'IDEA_UNCOMMON.OFFLINE.CANCEL_REQUEST' | translate\"\n (click)=\"deleteRequest(r)\"\n >\n <ion-icon slot=\"icon-only\" name=\"trash\" />\n </ion-button>\n }\n @if (r.error) {\n <ion-button\n fill=\"clear\"\n slot=\"end\"\n color=\"medium\"\n [title]=\"'IDEA_UNCOMMON.OFFLINE.DOWNLOAD_LOG' | translate\"\n (click)=\"downloadRequestLog(r)\"\n >\n <ion-icon slot=\"icon-only\" name=\"download\" />\n </ion-button>\n }\n @if (_offline.synchronizing) {\n <ion-spinner slot=\"end\" name=\"dots\" />\n }\n </ion-item>\n }\n </ion-list>\n }\n @if (_offline.getResources().length) {\n <ion-list class=\"aList\">\n <ion-list-header>\n <ion-label>\n <h2>{{ 'IDEA_UNCOMMON.OFFLINE.DOWNLOAD' | translate }}</h2>\n <p>{{ 'IDEA_UNCOMMON.OFFLINE.DOWNLOAD_RESOURCES_EXPLANATION' | translate }}</p>\n </ion-label>\n </ion-list-header>\n @for (r of _offline.getResources(); track r) {\n <idea-cacheable-resource [resource]=\"_offline.getCacheableResource(r)\" />\n }\n </ion-list>\n }\n</ion-content>\n", styles: [".aList{max-width:500px;margin:0 auto}.aList ion-list-header{padding-right:10px}.aList ion-list-header h3.lastSyncAt{margin-top:6px}\n"] }]
3493
+ ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-header>\n <ion-toolbar color=\"ideaToolbar\">\n <ion-buttons slot=\"start\">\n <ion-button (click)=\"close()\">\n <ion-icon name=\"close\" slot=\"icon-only\" />\n </ion-button>\n </ion-buttons>\n <ion-title>\n {{ 'IDEA_UNCOMMON.OFFLINE.OFFLINE_MANAGER' | translate }}\n </ion-title>\n <ion-buttons slot=\"end\">\n <ion-button [title]=\"'IDEA_UNCOMMON.OFFLINE.ADVANCED_ACTIONS' | translate\" (click)=\"actions()\">\n <ion-icon slot=\"icon-only\" name=\"ellipsis-vertical\" />\n </ion-button>\n </ion-buttons>\n </ion-toolbar>\n</ion-header>\n<ion-content>\n <ion-list class=\"aList\">\n @if (!_offline.synchronizing && _offline.requiresManualConfirmation) {\n <ion-list-header>\n <ion-label>\n <h2>{{ 'IDEA_UNCOMMON.OFFLINE.HUGE_SYNC_NEED_MANUAL_CONFIRMATION' | translate }}</h2>\n </ion-label>\n </ion-list-header>\n }\n @if (!_offline.synchronizing) {\n <ion-list-header>\n <ion-label class=\"ion-text-wrap\">\n <h3 class=\"lastSyncAt\">\n {{ 'IDEA_UNCOMMON.OFFLINE.LAST_SYNC' | translate }}:\n <ion-text>\n {{\n _offline.lastSyncAt\n ? (_offline.lastSyncAt | dateLocale: 'medium')\n : ('IDEA_UNCOMMON.OFFLINE.NEVER' | translate)\n }}\n </ion-text>\n </h3>\n @if (_offline.errorInLastSync) {\n <p>\n <ion-text color=\"danger\">\n <b>{{ 'IDEA_UNCOMMON.OFFLINE.ERROR_DURING_LAST_SYNC' | translate }}</b>\n </ion-text>\n </p>\n }\n </ion-label>\n <ion-button\n size=\"small\"\n fill=\"solid\"\n [color]=\"_offline.errorInLastSync ? 'danger' : 'dark'\"\n [disabled]=\"_offline.isOffline()\"\n (click)=\"sync()\"\n >\n <ion-icon slot=\"start\" name=\"sync\" /> {{ 'IDEA_UNCOMMON.OFFLINE.SYNC_NOW' | translate }}\n </ion-button>\n </ion-list-header>\n }\n </ion-list>\n @if (_offline.synchronizing) {\n <ion-list class=\"aList\">\n <ion-item>\n <ion-label class=\"ion-text-center\">\n <ion-spinner name=\"crescent\" color=\"primary\" />\n </ion-label>\n </ion-item>\n </ion-list>\n }\n @if (_offline.useQueueAPIRequests) {\n <ion-list class=\"aList\">\n <ion-list-header>\n <ion-label>\n <h2>{{ 'IDEA_UNCOMMON.OFFLINE.UPLOAD' | translate }}</h2>\n <p>{{ 'IDEA_UNCOMMON.OFFLINE.UPLOAD_QUEUE_REQUESTS_EXPLANATION' | translate }}</p>\n </ion-label>\n </ion-list-header>\n @if (!_offline.queueAPIRequests.length) {\n <ion-item>\n <i>{{ 'IDEA_UNCOMMON.OFFLINE.NO_ELEMENTS_TO_UPLOAD' | translate }}</i>\n <ion-icon slot=\"end\" size=\"small\" name=\"checkmark\" color=\"success\" />\n </ion-item>\n }\n @for (r of _offline.queueAPIRequests; track r; let odd = $odd) {\n <ion-item [class.oddItem]=\"odd\">\n <ion-label class=\"ion-text-wrap\">\n {{ r.description }}\n @if (r.error) {\n <p>\n <ion-text color=\"danger\">\n <b>{{ 'IDEA_UNCOMMON.OFFLINE.ERROR_CODE' | translate }}: {{ r.error }}</b>\n </ion-text>\n <br />\n {{ 'IDEA_UNCOMMON.OFFLINE.REQUEST_FAILED_EXPLANATION_I' | translate }}<br />\n {{ 'IDEA_UNCOMMON.OFFLINE.REQUEST_FAILED_EXPLANATION_II' | translate }}<br />\n {{ 'IDEA_UNCOMMON.OFFLINE.REQUEST_FAILED_EXPLANATION_III' | translate }}\n </p>\n }\n </ion-label>\n @if (r.error) {\n <ion-button\n fill=\"clear\"\n slot=\"end\"\n color=\"danger\"\n [title]=\"'IDEA_UNCOMMON.OFFLINE.CANCEL_REQUEST' | translate\"\n (click)=\"deleteRequest(r)\"\n >\n <ion-icon slot=\"icon-only\" name=\"trash\" />\n </ion-button>\n }\n @if (r.error) {\n <ion-button\n fill=\"clear\"\n slot=\"end\"\n color=\"medium\"\n [title]=\"'IDEA_UNCOMMON.OFFLINE.DOWNLOAD_LOG' | translate\"\n (click)=\"downloadRequestLog(r)\"\n >\n <ion-icon slot=\"icon-only\" name=\"download\" />\n </ion-button>\n }\n @if (_offline.synchronizing) {\n <ion-spinner slot=\"end\" name=\"dots\" />\n }\n </ion-item>\n }\n </ion-list>\n }\n @if (_offline.getResources().length) {\n <ion-list class=\"aList\">\n <ion-list-header>\n <ion-label>\n <h2>{{ 'IDEA_UNCOMMON.OFFLINE.DOWNLOAD' | translate }}</h2>\n <p>{{ 'IDEA_UNCOMMON.OFFLINE.DOWNLOAD_RESOURCES_EXPLANATION' | translate }}</p>\n </ion-label>\n </ion-list-header>\n @for (r of _offline.getResources(); track r) {\n <idea-cacheable-resource [resource]=\"_offline.getCacheableResource(r)\" />\n }\n </ion-list>\n }\n</ion-content>\n", styles: [".aList{max-width:500px;margin:0 auto}.aList ion-list-header{padding-right:10px}.aList ion-list-header h3.lastSyncAt{margin-top:6px}\n"] }]
3414
3494
  }] });
3415
3495
 
3416
3496
  class IDEAOfflineIndicatorComponent {
@@ -3423,15 +3503,18 @@ class IDEAOfflineIndicatorComponent {
3423
3503
  /**
3424
3504
  * Vertical position.
3425
3505
  */
3426
- this.vertical = 'bottom';
3506
+ this.vertical = input('bottom', /* @ts-ignore */
3507
+ ...(ngDevMode ? [{ debugName: "vertical" }] : /* istanbul ignore next */ []));
3427
3508
  /**
3428
3509
  * Horizontal position.
3429
3510
  */
3430
- this.horizontal = 'start';
3511
+ this.horizontal = input('start', /* @ts-ignore */
3512
+ ...(ngDevMode ? [{ debugName: "horizontal" }] : /* istanbul ignore next */ []));
3431
3513
  /**
3432
3514
  * Whether it is positionated on an edge.
3433
3515
  */
3434
- this.edge = false;
3516
+ this.edge = input(false, /* @ts-ignore */
3517
+ ...(ngDevMode ? [{ debugName: "edge" }] : /* istanbul ignore next */ []));
3435
3518
  }
3436
3519
  async showStatus() {
3437
3520
  if (this._offline.isOffline()) {
@@ -3450,12 +3533,12 @@ class IDEAOfflineIndicatorComponent {
3450
3533
  modal.present();
3451
3534
  }
3452
3535
  }
3453
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEAOfflineIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3454
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: IDEAOfflineIndicatorComponent, isStandalone: true, selector: "idea-offline-indicator", inputs: { vertical: "vertical", horizontal: "horizontal", edge: "edge" }, ngImport: i0, template: `
3536
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEAOfflineIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3537
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: IDEAOfflineIndicatorComponent, isStandalone: true, selector: "idea-offline-indicator", inputs: { vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null }, edge: { classPropertyName: "edge", publicName: "edge", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
3455
3538
  @if (
3456
3539
  _platform.is('mobile') && (_offline.isOffline() || _offline.synchronizing || _offline.requiresManualConfirmation)
3457
3540
  ) {
3458
- <ion-fab [vertical]="vertical" [horizontal]="horizontal" [edge]="edge">
3541
+ <ion-fab [vertical]="vertical()" [horizontal]="horizontal()" [edge]="edge()">
3459
3542
  <ion-fab-button color="dark" size="small" (click)="showStatus()">
3460
3543
  <!-- OFFLINE -->
3461
3544
  @if (_offline.isOffline()) {
@@ -3472,18 +3555,19 @@ class IDEAOfflineIndicatorComponent {
3472
3555
  </ion-fab-button>
3473
3556
  </ion-fab>
3474
3557
  }
3475
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
3558
+ `, isInline: true, dependencies: [{ kind: "component", type: IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
3476
3559
  }
3477
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEAOfflineIndicatorComponent, decorators: [{
3560
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEAOfflineIndicatorComponent, decorators: [{
3478
3561
  type: Component,
3479
3562
  args: [{
3480
3563
  selector: 'idea-offline-indicator',
3481
- imports: [CommonModule, IonFab, IonFabButton, IonIcon],
3564
+ imports: [IonFab, IonFabButton, IonIcon],
3565
+ changeDetection: ChangeDetectionStrategy.OnPush,
3482
3566
  template: `
3483
3567
  @if (
3484
3568
  _platform.is('mobile') && (_offline.isOffline() || _offline.synchronizing || _offline.requiresManualConfirmation)
3485
3569
  ) {
3486
- <ion-fab [vertical]="vertical" [horizontal]="horizontal" [edge]="edge">
3570
+ <ion-fab [vertical]="vertical()" [horizontal]="horizontal()" [edge]="edge()">
3487
3571
  <ion-fab-button color="dark" size="small" (click)="showStatus()">
3488
3572
  <!-- OFFLINE -->
3489
3573
  @if (_offline.isOffline()) {
@@ -3502,13 +3586,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
3502
3586
  }
3503
3587
  `
3504
3588
  }]
3505
- }], propDecorators: { vertical: [{
3506
- type: Input
3507
- }], horizontal: [{
3508
- type: Input
3509
- }], edge: [{
3510
- type: Input
3511
- }] } });
3589
+ }], propDecorators: { vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], horizontal: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontal", required: false }] }], edge: [{ type: i0.Input, args: [{ isSignal: true, alias: "edge", required: false }] }] } });
3512
3590
 
3513
3591
  class IDEASentimentComponent {
3514
3592
  constructor() {
@@ -3516,10 +3594,25 @@ class IDEASentimentComponent {
3516
3594
  this._API = inject(IDEAAWSAPIService);
3517
3595
  this._translate = inject(IDEATranslationsService);
3518
3596
  this._offline = inject(IDEAOfflineService);
3597
+ /**
3598
+ * The input text.
3599
+ */
3600
+ this.text = input(/* @ts-ignore */
3601
+ ...(ngDevMode ? [undefined, { debugName: "text" }] : /* istanbul ignore next */ []));
3602
+ /**
3603
+ * Lines preferences for the item.
3604
+ */
3605
+ this.lines = input(/* @ts-ignore */
3606
+ ...(ngDevMode ? [undefined, { debugName: "lines" }] : /* istanbul ignore next */ []));
3607
+ /**
3608
+ * The color for the component.
3609
+ */
3610
+ this.color = input(/* @ts-ignore */
3611
+ ...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
3519
3612
  /**
3520
3613
  * Triggers when the sentiment change.
3521
3614
  */
3522
- this.change = new EventEmitter();
3615
+ this.change = output();
3523
3616
  }
3524
3617
  ngOnChanges(changes) {
3525
3618
  if (changes.text.previousValue !== changes.text.currentValue)
@@ -3532,7 +3625,7 @@ class IDEASentimentComponent {
3532
3625
  try {
3533
3626
  const { sentiment } = await this._API.postResource('sentiment', {
3534
3627
  idea: true,
3535
- body: { project: this._env.idea.project, language: this._translate.getCurrentLang(), text: this.text }
3628
+ body: { project: this._env.idea.project, language: this._translate.getCurrentLang(), text: this.text() }
3536
3629
  });
3537
3630
  this.sentiment = sentiment;
3538
3631
  this.change.emit(this.sentiment);
@@ -3557,10 +3650,10 @@ class IDEASentimentComponent {
3557
3650
  return 'light';
3558
3651
  }
3559
3652
  }
3560
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEASentimentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3561
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: IDEASentimentComponent, isStandalone: true, selector: "idea-sentiment", inputs: { text: "text", lines: "lines", color: "color" }, outputs: { change: "change" }, usesOnChanges: true, ngImport: i0, template: `
3562
- @if (text && _offline.isOnline()) {
3563
- <ion-item [lines]="lines" [color]="color">
3653
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEASentimentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3654
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: IDEASentimentComponent, isStandalone: true, selector: "idea-sentiment", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, usesOnChanges: true, ngImport: i0, template: `
3655
+ @if (text() && _offline.isOnline()) {
3656
+ <ion-item [lines]="lines()" [color]="color()">
3564
3657
  @if (!sentiment) {
3565
3658
  <ion-spinner slot="end" size="small" />
3566
3659
  }
@@ -3576,16 +3669,17 @@ class IDEASentimentComponent {
3576
3669
  }
3577
3670
  </ion-item>
3578
3671
  }
3579
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "pipe", type: IDEATranslatePipe, name: "translate" }] }); }
3672
+ `, isInline: true, dependencies: [{ kind: "component", type: IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "pipe", type: IDEATranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
3580
3673
  }
3581
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEASentimentComponent, decorators: [{
3674
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEASentimentComponent, decorators: [{
3582
3675
  type: Component,
3583
3676
  args: [{
3584
3677
  selector: 'idea-sentiment',
3585
- imports: [CommonModule, IDEATranslatePipe, IonBadge, IonSpinner, IonItem],
3678
+ imports: [IDEATranslatePipe, IonBadge, IonSpinner, IonItem],
3679
+ changeDetection: ChangeDetectionStrategy.OnPush,
3586
3680
  template: `
3587
- @if (text && _offline.isOnline()) {
3588
- <ion-item [lines]="lines" [color]="color">
3681
+ @if (text() && _offline.isOnline()) {
3682
+ <ion-item [lines]="lines()" [color]="color()">
3589
3683
  @if (!sentiment) {
3590
3684
  <ion-spinner slot="end" size="small" />
3591
3685
  }
@@ -3603,15 +3697,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
3603
3697
  }
3604
3698
  `
3605
3699
  }]
3606
- }], propDecorators: { text: [{
3607
- type: Input
3608
- }], lines: [{
3609
- type: Input
3610
- }], color: [{
3611
- type: Input
3612
- }], change: [{
3613
- type: Output
3614
- }] } });
3700
+ }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], lines: [{ type: i0.Input, args: [{ isSignal: true, alias: "lines", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], change: [{ type: i0.Output, args: ["change"] }] } });
3615
3701
 
3616
3702
  class IDEAFromTimeToTimeComponent {
3617
3703
  constructor() {
@@ -3620,6 +3706,8 @@ class IDEAFromTimeToTimeComponent {
3620
3706
  /**
3621
3707
  * Whether we should start picking the time displaying the afternoon (PM) or the morning (AM, default).
3622
3708
  */
3709
+ // TODO: Skipped for migration because:
3710
+ // Your application code writes to the input. This prevents migration.
3623
3711
  this.period = Periods.AM;
3624
3712
  this.Segments = Segments;
3625
3713
  this.Periods = Periods;
@@ -3690,10 +3778,10 @@ class IDEAFromTimeToTimeComponent {
3690
3778
  // adjust the hour based on the start of the interval and the settings of am/pm
3691
3779
  hours = this.contextualizeHour(hours, minutes);
3692
3780
  // check whether the selected time is inside the given boundaries
3693
- return ((!this.notEarlierThan ||
3694
- this.timeToMs(hours, minutes) >= this.notEarlierThan ||
3695
- this.timeToMs(hours, minutes) === 0) &&
3696
- (!this.notLaterThan || this.timeToMs(hours, minutes) <= this.notLaterThan));
3781
+ const notEarlierThan = this.notEarlierThan;
3782
+ const notLaterThan = this.notLaterThan;
3783
+ return ((!notEarlierThan || this.timeToMs(hours, minutes) >= notEarlierThan || this.timeToMs(hours, minutes) === 0) &&
3784
+ (!notLaterThan || this.timeToMs(hours, minutes) <= notLaterThan));
3697
3785
  }
3698
3786
  isHourOfOppositeMeridian(hours, minutes) {
3699
3787
  // if the start of the interval hasn't been selected yet, skip it
@@ -3727,13 +3815,12 @@ class IDEAFromTimeToTimeComponent {
3727
3815
  close() {
3728
3816
  this._modal.dismiss();
3729
3817
  }
3730
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEAFromTimeToTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3731
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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 = $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 = $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: "ngmodule", type: CommonModule }, { 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" }] }); }
3818
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEAFromTimeToTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3819
+ 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 }); }
3732
3820
  }
3733
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEAFromTimeToTimeComponent, decorators: [{
3821
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEAFromTimeToTimeComponent, decorators: [{
3734
3822
  type: Component,
3735
3823
  args: [{ selector: 'idea-from-time-to-time', imports: [
3736
- CommonModule,
3737
3824
  IDEATranslatePipe,
3738
3825
  IonLabel,
3739
3826
  IonSegmentButton,
@@ -3749,7 +3836,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
3749
3836
  IonButtons,
3750
3837
  IonToolbar,
3751
3838
  IonHeader
3752
- ], 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 = $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 = $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"] }]
3839
+ ], 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"] }]
3753
3840
  }], propDecorators: { timeInterval: [{
3754
3841
  type: Input
3755
3842
  }], period: [{
@@ -3782,28 +3869,91 @@ class IDEATimeIntervalComponent {
3782
3869
  constructor() {
3783
3870
  this._modal = inject(ModalController);
3784
3871
  this._translate = inject(IDEATranslationsService);
3872
+ this._cdr = inject(ChangeDetectorRef);
3873
+ /**
3874
+ * The time interval to set.
3875
+ */
3876
+ this.timeInterval = input(/* @ts-ignore */
3877
+ ...(ngDevMode ? [undefined, { debugName: "timeInterval" }] : /* istanbul ignore next */ []));
3785
3878
  /**
3786
3879
  * Whether we should start picking the time displaying the afternoon (PM) or the morning (AM, default).
3787
3880
  */
3788
- this.period = Periods.AM;
3881
+ this.period = input(Periods.AM, /* @ts-ignore */
3882
+ ...(ngDevMode ? [{ debugName: "period" }] : /* istanbul ignore next */ []));
3883
+ /**
3884
+ * A time to use as lower limit for the possible choices.
3885
+ */
3886
+ this.notEarlierThan = input(/* @ts-ignore */
3887
+ ...(ngDevMode ? [undefined, { debugName: "notEarlierThan" }] : /* istanbul ignore next */ []));
3888
+ /**
3889
+ * A time to use as upper limit for the possible choices.
3890
+ */
3891
+ this.notLaterThan = input(/* @ts-ignore */
3892
+ ...(ngDevMode ? [undefined, { debugName: "notLaterThan" }] : /* istanbul ignore next */ []));
3893
+ /**
3894
+ * The label for the field.
3895
+ */
3896
+ this.label = input(/* @ts-ignore */
3897
+ ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
3898
+ /**
3899
+ * The icon for the field.
3900
+ */
3901
+ this.icon = input(/* @ts-ignore */
3902
+ ...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
3903
+ /**
3904
+ * The color of the icon.
3905
+ */
3906
+ this.iconColor = input(/* @ts-ignore */
3907
+ ...(ngDevMode ? [undefined, { debugName: "iconColor" }] : /* istanbul ignore next */ []));
3908
+ /**
3909
+ * A placeholder for the field.
3910
+ */
3911
+ this.placeholder = input(/* @ts-ignore */
3912
+ ...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
3913
+ /**
3914
+ * If true, the component is disabled.
3915
+ */
3916
+ this.disabled = input(/* @ts-ignore */
3917
+ ...(ngDevMode ? [undefined, { debugName: "disabled" }] : /* istanbul ignore next */ []));
3918
+ /**
3919
+ * If true, the field has a tappable effect when disabled.
3920
+ */
3921
+ this.tappableWhenDisabled = input(/* @ts-ignore */
3922
+ ...(ngDevMode ? [undefined, { debugName: "tappableWhenDisabled" }] : /* istanbul ignore next */ []));
3923
+ /**
3924
+ * If true, the obligatory dot is shown.
3925
+ */
3926
+ this.obligatory = input(/* @ts-ignore */
3927
+ ...(ngDevMode ? [undefined, { debugName: "obligatory" }] : /* istanbul ignore next */ []));
3928
+ /**
3929
+ * Lines preferences for the item.
3930
+ */
3931
+ this.lines = input(/* @ts-ignore */
3932
+ ...(ngDevMode ? [undefined, { debugName: "lines" }] : /* istanbul ignore next */ []));
3933
+ /**
3934
+ * The color for the component.
3935
+ */
3936
+ this.color = input(/* @ts-ignore */
3937
+ ...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
3789
3938
  /**
3790
3939
  * On select event.
3791
3940
  */
3792
- this.select = new EventEmitter();
3941
+ this.select = output();
3793
3942
  /**
3794
3943
  * Icon select.
3795
3944
  */
3796
- this.iconSelect = new EventEmitter();
3945
+ this.iconSelect = output();
3797
3946
  /**
3798
3947
  * On select (with the field disabled) event.
3799
3948
  */
3800
- this.selectWhenDisabled = new EventEmitter();
3949
+ this.selectWhenDisabled = output();
3801
3950
  this.isOpening = false;
3802
3951
  }
3803
3952
  ngOnInit() {
3804
3953
  // when the language changes, set the locale
3805
3954
  this.langChangeSubscription = this._translate.onLangChange.subscribe(() => {
3806
- this.valueToDisplay = this.getValueToDisplay(this.timeInterval);
3955
+ this.valueToDisplay = this.getValueToDisplay(this.timeInterval());
3956
+ this._cdr.markForCheck();
3807
3957
  });
3808
3958
  }
3809
3959
  ngOnDestroy() {
@@ -3828,25 +3978,26 @@ class IDEATimeIntervalComponent {
3828
3978
  const modal = await this._modal.create({
3829
3979
  component: IDEAFromTimeToTimeComponent,
3830
3980
  componentProps: {
3831
- timeInterval: this.timeInterval,
3832
- period: this.period,
3833
- notEarlierThan: this.notEarlierThan,
3834
- notLaterThan: this.notLaterThan,
3835
- title: this.label
3981
+ timeInterval: this.timeInterval(),
3982
+ period: this.period(),
3983
+ notEarlierThan: this.notEarlierThan(),
3984
+ notLaterThan: this.notLaterThan(),
3985
+ title: this.label()
3836
3986
  }
3837
3987
  });
3838
3988
  modal.onDidDismiss().then((res) => {
3839
3989
  // if the content changed, update the internal values and notify the parent component
3840
3990
  if (res.data === true || res.data === false) {
3841
- this.valueToDisplay = this.getValueToDisplay(this.timeInterval);
3991
+ this.valueToDisplay = this.getValueToDisplay(this.timeInterval());
3842
3992
  this.select.emit();
3993
+ this._cdr.markForCheck();
3843
3994
  }
3844
3995
  });
3845
3996
  modal.present();
3846
3997
  this.isOpening = false;
3847
3998
  }
3848
3999
  doSelectWhenDisabled() {
3849
- if (this.disabled)
4000
+ if (this.disabled())
3850
4001
  this.selectWhenDisabled.emit();
3851
4002
  }
3852
4003
  doIconSelect(event) {
@@ -3854,129 +4005,97 @@ class IDEATimeIntervalComponent {
3854
4005
  event.stopPropagation();
3855
4006
  this.iconSelect.emit(event);
3856
4007
  }
3857
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEATimeIntervalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3858
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: IDEATimeIntervalComponent, isStandalone: true, selector: "idea-time-interval", inputs: { timeInterval: "timeInterval", period: "period", notEarlierThan: "notEarlierThan", notLaterThan: "notLaterThan", label: "label", icon: "icon", iconColor: "iconColor", placeholder: "placeholder", disabled: "disabled", tappableWhenDisabled: "tappableWhenDisabled", obligatory: "obligatory", lines: "lines", color: "color" }, outputs: { select: "select", iconSelect: "iconSelect", selectWhenDisabled: "selectWhenDisabled" }, usesOnChanges: true, ngImport: i0, template: `
4008
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEATimeIntervalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4009
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: IDEATimeIntervalComponent, isStandalone: true, selector: "idea-time-interval", inputs: { timeInterval: { classPropertyName: "timeInterval", publicName: "timeInterval", isSignal: true, isRequired: false, transformFunction: null }, period: { classPropertyName: "period", publicName: "period", isSignal: true, 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 }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, tappableWhenDisabled: { classPropertyName: "tappableWhenDisabled", publicName: "tappableWhenDisabled", isSignal: true, isRequired: false, transformFunction: null }, obligatory: { classPropertyName: "obligatory", publicName: "obligatory", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "select", iconSelect: "iconSelect", selectWhenDisabled: "selectWhenDisabled" }, usesOnChanges: true, ngImport: i0, template: `
3859
4010
  <ion-item
3860
4011
  class="timeIntervalItem"
3861
- [color]="color"
3862
- [lines]="lines"
3863
- [button]="!disabled"
4012
+ [color]="color()"
4013
+ [lines]="lines()"
4014
+ [button]="!disabled()"
3864
4015
  [disabled]="isOpening"
3865
- [title]="placeholder || valueToDisplay || ''"
3866
- [class.withLabel]="label"
3867
- (click)="disabled ? doSelectWhenDisabled() : pickTimeInterval()"
4016
+ [title]="placeholder() || valueToDisplay || ''"
4017
+ [class.withLabel]="label()"
4018
+ (click)="disabled() ? doSelectWhenDisabled() : pickTimeInterval()"
3868
4019
  >
3869
- @if (icon) {
4020
+ @if (icon()) {
3870
4021
  <ion-button
3871
4022
  fill="clear"
3872
4023
  slot="start"
3873
- [color]="iconColor"
3874
- [class.marginTop]="label"
4024
+ [color]="iconColor()"
4025
+ [class.marginTop]="label()"
3875
4026
  (click)="doIconSelect($event)"
3876
4027
  >
3877
- <ion-icon [name]="icon" slot="icon-only" />
4028
+ <ion-icon [name]="icon()" slot="icon-only" />
3878
4029
  </ion-button>
3879
4030
  }
3880
- @if (label) {
3881
- <ion-label position="stacked" [class.selectable]="!disabled || tappableWhenDisabled">
3882
- {{ label }}
3883
- @if (obligatory && !disabled) {
4031
+ @if (label()) {
4032
+ <ion-label position="stacked" [class.selectable]="!disabled() || tappableWhenDisabled()">
4033
+ {{ label() }}
4034
+ @if (obligatory() && !disabled()) {
3884
4035
  <ion-text class="obligatoryDot" />
3885
4036
  }
3886
4037
  </ion-label>
3887
4038
  }
3888
- <ion-label class="description" [class.selectable]="!disabled || tappableWhenDisabled">
3889
- @if (!valueToDisplay && !disabled) {
3890
- <ion-text class="placeholder" [class.selectable]="!disabled">
3891
- {{ placeholder }}
4039
+ <ion-label class="description" [class.selectable]="!disabled() || tappableWhenDisabled()">
4040
+ @if (!valueToDisplay && !disabled()) {
4041
+ <ion-text class="placeholder" [class.selectable]="!disabled()">
4042
+ {{ placeholder() }}
3892
4043
  </ion-text>
3893
4044
  }
3894
4045
  {{ valueToDisplay }}
3895
4046
  </ion-label>
3896
- @if (!disabled) {
3897
- <ion-icon slot="end" name="caret-down" class="selectIcon" [class.selectable]="!disabled" />
4047
+ @if (!disabled()) {
4048
+ <ion-icon slot="end" name="caret-down" class="selectIcon" [class.selectable]="!disabled()" />
3898
4049
  }
3899
4050
  </ion-item>
3900
- `, isInline: true, styles: [".timeIntervalItem{min-height:48px;height:auto}.timeIntervalItem .description{margin:10px 0;height:20px;line-height:20px;width:100%}.timeIntervalItem .placeholder{color:var(--ion-color-medium)}.timeIntervalItem .selectIcon{margin:0;padding-left:4px;font-size:.8em;color:var(--ion-color-medium)}.timeIntervalItem.withLabel{min-height:58px;height:auto}.timeIntervalItem.withLabel .selectIcon{padding-top:25px}.timeIntervalItem.withLabel ion-button[slot=start]{margin-top:16px}.selectable{cursor:pointer}\n"], dependencies: [{ kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "ngmodule", type: CommonModule }] }); }
4051
+ `, isInline: true, styles: [".timeIntervalItem{min-height:48px;height:auto}.timeIntervalItem .description{margin:10px 0;height:20px;line-height:20px;width:100%}.timeIntervalItem .placeholder{color:var(--ion-color-medium)}.timeIntervalItem .selectIcon{margin:0;padding-left:4px;font-size:.8em;color:var(--ion-color-medium)}.timeIntervalItem.withLabel{min-height:58px;height:auto}.timeIntervalItem.withLabel .selectIcon{padding-top:25px}.timeIntervalItem.withLabel ion-button[slot=start]{margin-top:16px}.selectable{cursor:pointer}\n"], dependencies: [{ kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
3901
4052
  }
3902
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEATimeIntervalComponent, decorators: [{
4053
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEATimeIntervalComponent, decorators: [{
3903
4054
  type: Component,
3904
- args: [{ selector: 'idea-time-interval', imports: [IonLabel, IonText, IonIcon, IonButton, IonItem, CommonModule], template: `
4055
+ args: [{ selector: 'idea-time-interval', imports: [IonLabel, IonText, IonIcon, IonButton, IonItem], changeDetection: ChangeDetectionStrategy.OnPush, template: `
3905
4056
  <ion-item
3906
4057
  class="timeIntervalItem"
3907
- [color]="color"
3908
- [lines]="lines"
3909
- [button]="!disabled"
4058
+ [color]="color()"
4059
+ [lines]="lines()"
4060
+ [button]="!disabled()"
3910
4061
  [disabled]="isOpening"
3911
- [title]="placeholder || valueToDisplay || ''"
3912
- [class.withLabel]="label"
3913
- (click)="disabled ? doSelectWhenDisabled() : pickTimeInterval()"
4062
+ [title]="placeholder() || valueToDisplay || ''"
4063
+ [class.withLabel]="label()"
4064
+ (click)="disabled() ? doSelectWhenDisabled() : pickTimeInterval()"
3914
4065
  >
3915
- @if (icon) {
4066
+ @if (icon()) {
3916
4067
  <ion-button
3917
4068
  fill="clear"
3918
4069
  slot="start"
3919
- [color]="iconColor"
3920
- [class.marginTop]="label"
4070
+ [color]="iconColor()"
4071
+ [class.marginTop]="label()"
3921
4072
  (click)="doIconSelect($event)"
3922
4073
  >
3923
- <ion-icon [name]="icon" slot="icon-only" />
4074
+ <ion-icon [name]="icon()" slot="icon-only" />
3924
4075
  </ion-button>
3925
4076
  }
3926
- @if (label) {
3927
- <ion-label position="stacked" [class.selectable]="!disabled || tappableWhenDisabled">
3928
- {{ label }}
3929
- @if (obligatory && !disabled) {
4077
+ @if (label()) {
4078
+ <ion-label position="stacked" [class.selectable]="!disabled() || tappableWhenDisabled()">
4079
+ {{ label() }}
4080
+ @if (obligatory() && !disabled()) {
3930
4081
  <ion-text class="obligatoryDot" />
3931
4082
  }
3932
4083
  </ion-label>
3933
4084
  }
3934
- <ion-label class="description" [class.selectable]="!disabled || tappableWhenDisabled">
3935
- @if (!valueToDisplay && !disabled) {
3936
- <ion-text class="placeholder" [class.selectable]="!disabled">
3937
- {{ placeholder }}
4085
+ <ion-label class="description" [class.selectable]="!disabled() || tappableWhenDisabled()">
4086
+ @if (!valueToDisplay && !disabled()) {
4087
+ <ion-text class="placeholder" [class.selectable]="!disabled()">
4088
+ {{ placeholder() }}
3938
4089
  </ion-text>
3939
4090
  }
3940
4091
  {{ valueToDisplay }}
3941
4092
  </ion-label>
3942
- @if (!disabled) {
3943
- <ion-icon slot="end" name="caret-down" class="selectIcon" [class.selectable]="!disabled" />
4093
+ @if (!disabled()) {
4094
+ <ion-icon slot="end" name="caret-down" class="selectIcon" [class.selectable]="!disabled()" />
3944
4095
  }
3945
4096
  </ion-item>
3946
4097
  `, styles: [".timeIntervalItem{min-height:48px;height:auto}.timeIntervalItem .description{margin:10px 0;height:20px;line-height:20px;width:100%}.timeIntervalItem .placeholder{color:var(--ion-color-medium)}.timeIntervalItem .selectIcon{margin:0;padding-left:4px;font-size:.8em;color:var(--ion-color-medium)}.timeIntervalItem.withLabel{min-height:58px;height:auto}.timeIntervalItem.withLabel .selectIcon{padding-top:25px}.timeIntervalItem.withLabel ion-button[slot=start]{margin-top:16px}.selectable{cursor:pointer}\n"] }]
3947
- }], propDecorators: { timeInterval: [{
3948
- type: Input
3949
- }], period: [{
3950
- type: Input
3951
- }], notEarlierThan: [{
3952
- type: Input
3953
- }], notLaterThan: [{
3954
- type: Input
3955
- }], label: [{
3956
- type: Input
3957
- }], icon: [{
3958
- type: Input
3959
- }], iconColor: [{
3960
- type: Input
3961
- }], placeholder: [{
3962
- type: Input
3963
- }], disabled: [{
3964
- type: Input
3965
- }], tappableWhenDisabled: [{
3966
- type: Input
3967
- }], obligatory: [{
3968
- type: Input
3969
- }], lines: [{
3970
- type: Input
3971
- }], color: [{
3972
- type: Input
3973
- }], select: [{
3974
- type: Output
3975
- }], iconSelect: [{
3976
- type: Output
3977
- }], selectWhenDisabled: [{
3978
- type: Output
3979
- }] } });
4098
+ }], propDecorators: { timeInterval: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeInterval", required: false }] }], period: [{ type: i0.Input, args: [{ isSignal: true, alias: "period", required: false }] }], notEarlierThan: [{ type: i0.Input, args: [{ isSignal: true, alias: "notEarlierThan", required: false }] }], notLaterThan: [{ type: i0.Input, args: [{ isSignal: true, alias: "notLaterThan", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], tappableWhenDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "tappableWhenDisabled", required: false }] }], obligatory: [{ type: i0.Input, args: [{ isSignal: true, alias: "obligatory", required: false }] }], lines: [{ type: i0.Input, args: [{ isSignal: true, alias: "lines", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], select: [{ type: i0.Output, args: ["select"] }], iconSelect: [{ type: i0.Output, args: ["iconSelect"] }], selectWhenDisabled: [{ type: i0.Output, args: ["selectWhenDisabled"] }] } });
3980
4099
 
3981
4100
  /**
3982
4101
  * To communicate with an AWS API Gateway websocket istance.
@@ -4152,10 +4271,10 @@ class IDEAAWSAPISocketService {
4152
4271
  minutesToMS(minutes) {
4153
4272
  return minutes * 60 * 1000;
4154
4273
  }
4155
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEAAWSAPISocketService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
4156
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEAAWSAPISocketService, providedIn: 'root' }); }
4274
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEAAWSAPISocketService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
4275
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEAAWSAPISocketService, providedIn: 'root' }); }
4157
4276
  }
4158
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEAAWSAPISocketService, decorators: [{
4277
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEAAWSAPISocketService, decorators: [{
4159
4278
  type: Injectable,
4160
4279
  args: [{ providedIn: 'root' }]
4161
4280
  }], ctorParameters: () => [] });
@@ -4204,10 +4323,10 @@ class IDEACachedResourcesService {
4204
4323
  this.cacheKey = String(key);
4205
4324
  await this.storage.set(this.cacheKeyIndex, key);
4206
4325
  }
4207
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEACachedResourcesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
4208
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEACachedResourcesService, providedIn: 'root' }); }
4326
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEACachedResourcesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
4327
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEACachedResourcesService, providedIn: 'root' }); }
4209
4328
  }
4210
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEACachedResourcesService, decorators: [{
4329
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEACachedResourcesService, decorators: [{
4211
4330
  type: Injectable,
4212
4331
  args: [{ providedIn: 'root' }]
4213
4332
  }], ctorParameters: () => [] });
@@ -4254,10 +4373,10 @@ class IDEAPushNotificationsService {
4254
4373
  if (permStatus.receive === 'granted')
4255
4374
  PushNotifications.register();
4256
4375
  }
4257
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEAPushNotificationsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
4258
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEAPushNotificationsService, providedIn: 'root' }); }
4376
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEAPushNotificationsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
4377
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEAPushNotificationsService, providedIn: 'root' }); }
4259
4378
  }
4260
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IDEAPushNotificationsService, decorators: [{
4379
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEAPushNotificationsService, decorators: [{
4261
4380
  type: Injectable,
4262
4381
  args: [{ providedIn: 'root' }]
4263
4382
  }], ctorParameters: () => [] });