@sumaris-net/ngx-components 18.19.7 → 18.20.0

package/fesm2022/sumaris-net.ngx-components.mjs

@@ -23,7 +23,7 @@ import { MatIcon, MatIconModule } from '@angular/material/icon';
 import * as i12$2 from '@angular/material/stepper';
 import { MatStepperModule, MatStepperIntl } from '@angular/material/stepper';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import * as i8 from '@angular/material/badge';
+import * as i9 from '@angular/material/badge';
 import { MatBadge, MatBadgeModule } from '@angular/material/badge';
 import * as i1$1 from '@ngx-translate/core';
 import { TranslateService, TranslateModule, TranslateDirective, TranslatePipe } from '@ngx-translate/core';
@@ -55,11 +55,11 @@ import * as i5 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i11$1 from '@angular/material/button';
 import { MatIconButton, MatButtonModule } from '@angular/material/button';
-import * as i9 from '@angular/material/divider';
+import * as i9$1 from '@angular/material/divider';
 import { MatDividerModule, MatDivider } from '@angular/material/divider';
 import * as i1$7 from '@angular/material/table';
 import { MatTableModule, MatTable, MatColumnDef } from '@angular/material/table';
-import * as i9$2 from '@angular/material/paginator';
+import * as i9$3 from '@angular/material/paginator';
 import { MatPaginatorModule, MatPaginatorIntl, MAT_PAGINATOR_DEFAULT_OPTIONS, MatPaginator } from '@angular/material/paginator';
 import * as i3$2 from '@angular/material/dialog';
 import { MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog';
@@ -68,7 +68,7 @@ import { MatMenuModule, MatMenuTrigger, MatMenu, MatMenuContent, MatMenuItem } f
 import * as i6$3 from '@angular/material/select';
 import { MatSelectModule, MAT_SELECT_SCROLL_STRATEGY } from '@angular/material/select';
 import { MatCardModule } from '@angular/material/card';
-import * as i7 from '@angular/material/tabs';
+import * as i8 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatListModule } from '@angular/material/list';
 import * as i4$4 from '@angular/material/progress-spinner';
@@ -87,7 +87,7 @@ import * as i12$1 from '@rx-angular/template/for';
 import { RxFor } from '@rx-angular/template/for';
 import * as i8$1 from '@rx-angular/template/if';
 import { RxIf } from '@rx-angular/template/if';
-import * as i9$1 from '@rx-angular/template/let';
+import * as i9$2 from '@rx-angular/template/let';
 import { RxLet } from '@rx-angular/template/let';
 import * as i10 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
@@ -19562,7 +19562,7 @@ class SelectPeerModal extends RxState {
         this.cd.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectPeerModal, deps: [{ token: i2$1.ModalController }, { token: i2$1.PopoverController }, { token: i1$1.TranslateService }, { token: i2$3.HttpClient }, { token: i0.ChangeDetectorRef }, { token: ENVIRONMENT }, { token: APP_LOGGING_SERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SelectPeerModal, selector: "select-peer-modal", inputs: { selectedTabIndex: ["selectedTabIndex", "selectedTabIndex", numberAttribute], selectedPeer: "selectedPeer", peerFilter: "peerFilter", title: "title", canCancel: ["canCancel", "canCancel", booleanAttribute], allowSelectDownPeer: ["allowSelectDownPeer", "allowSelectDownPeer", booleanAttribute], showSetManuallyButton: ["showSetManuallyButton", "showSetManuallyButton", booleanAttribute], showSearchBar: ["showSearchBar", "showSearchBar", booleanAttribute], tabGroupAnimationDuration: "tabGroupAnimationDuration", onRefresh: "onRefresh", defaultPeers: "defaultPeers" }, viewQueries: [{ propertyName: "searchbar", first: true, predicate: ["searchbar"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"light\" style=\"z-index: 900\">\n    <ion-buttons slot=\"start\">\n      @if (canCancel) {\n        <ion-button (click)=\"cancel()\" visible-mobile visible-sm visible-xs>\n          <ion-icon name=\"arrow-back\" slot=\"icon-only\"></ion-icon>\n        </ion-button>\n      }\n    </ion-buttons>\n\n    <ion-title>\n      {{ title | translate }}\n    </ion-title>\n\n    <ion-buttons slot=\"end\">\n      <!-- loader -->\n      @if (loading) {\n        <ion-spinner></ion-spinner>\n      } @else {\n        <!-- refresh button -->\n        <ion-button\n          (click)=\"refresh($event)\"\n          *ngIf=\"onRefresh.observed\"\n          [matTooltip]=\"'COMMON.BTN_REFRESH' | translate\"\n        >\n          <mat-icon slot=\"icon-only\">refresh</mat-icon>\n        </ion-button>\n      }\n      <!-- search button -->\n      @if (!showSearchBar) {\n        <ion-button (click)=\"toggleSearchBar()\">\n          <ion-icon slot=\"icon-only\" name=\"search\"></ion-icon>\n        </ion-button>\n      }\n    </ion-buttons>\n  </ion-toolbar>\n\n  <!-- search bar -->\n  <ion-toolbar *ngIf=\"showSearchBar\">\n    <ion-searchbar\n      #searchbar\n      animated\n      type=\"search\"\n      [class.cdk-visually-hidden]=\"!showSearchBar\"\n      show-clear-button=\"always\"\n      [placeholder]=\"'COMMON.BTN_SEARCH' | translate\"\n      [cancelButtonText]=\"'COMMON.BTN_CANCEL' | translate\"\n      [(ngModel)]=\"searchText\"\n      (ionCancel)=\"toggleSearchBar()\"\n    ></ion-searchbar>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <mat-tab-group\n    #tabGroup\n    [(selectedIndex)]=\"selectedTabIndex\"\n    class=\"mat-mdc-tab-disabled-hidden\"\n    [class.mat-mdc-tab-group-header-hidden]=\"!enableSelectPeerByFeature\"\n    [dynamicHeight]=\"false\"\n    [mat-stretch-tabs]=\"mobile\"\n    [animationDuration]=\"mobile ? tabGroupAnimationDuration : '0s'\"\n  >\n    <mat-tab>\n      <ng-template mat-tab-label>\n        <ion-label\n          [matBadge]=\"filteredPeerCount$ | async | badgeNumber\"\n          [matBadgeHidden]=\"filteredPeerCount$ | async | isNil\"\n          [matBadgeColor]=\"(filteredPeerCount$ | async) ? 'primary' : 'accent'\"\n          matBadgeOverlap=\"false\"\n          matBadgeColor=\"primary\"\n          matBadgeSize=\"small\"\n          matBadgePosition=\"above after\"\n        >\n          {{ 'NETWORK.PEER.SELECT_MODAL.TAB_NETWORK' | translate }}\n        </ion-label>\n      </ng-template>\n      <ion-list>\n        <ion-list-header>\n          <ion-label class=\"ion-text-wrap ion-padding-end\">\n            <p [innerHTML]=\"'NETWORK.PEER.SELECT_MODAL.NETWORK_HELP' | translate\"></p>\n          </ion-label>\n        </ion-list-header>\n\n        @for (peer of filteredPeers$ | async; track $index) {\n          <ion-item\n            (click)=\"selectPeer(peer)\"\n            @fadeInAnimation\n            [class.selected]=\"selectedPeer && selectedPeer === peer.url\"\n            detail\n            matRipple\n            tappable\n          >\n            <!-- Peer is UP -->\n            @if (peer.reachable) {\n              <!-- icon -->\n              @if (peer.favicon != 'skip') {\n                <ion-avatar slot=\"start\">\n                  <ion-img [src]=\"peer.favicon || peer.url + '/api/favicon'\" (ionError)=\"clearLogo(peer)\"></ion-img>\n                  <ion-icon name=\"server\" class=\"icon-secondary\" style=\"top: 12px; left: 44px\" color=\"dark\"></ion-icon>\n                </ion-avatar>\n              } @else {\n                <ion-icon slot=\"start\" name=\"server\" class=\"ion-icon-avatar\" color=\"dark\"></ion-icon>\n              }\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <ion-label class=\"ion-text-wrap\">\n                      <ion-text>\n                        @let url = peer.hostAndPort + peer.path;\n                        <h3 [innerHTML]=\"url | highlight: searchText\"></h3>\n                      </ion-text>\n                      <ion-text color=\"primary\">\n                        <h4 [innerHTML]=\"peer.label | highlight: searchText\"></h4>\n                      </ion-text>\n                    </ion-label>\n                  </ion-col>\n                  <ion-col size=\"12\" size-sm=\"4\">\n                    <ion-label class=\"ion-text-wrap ion-text-sm-center\" color=\"medium\">\n                      <h4>\n                        <small>{{ peer.softwareName }}&nbsp;</small>\n                        <br class=\"hidden-xxs hidden-xs\" />\n                        <!-- Compatible -->\n                        @if (!peerMinVersion || isCompatible(peer)) {\n                          <small>v{{ peer.softwareVersion }}</small>\n                        } @else {\n                          <!-- Incompatible -->\n                          <ion-text\n                            color=\"danger\"\n                            [matTooltip]=\"\n                              'NETWORK.PEER.SELECT_MODAL.NOT_COMPATIBLE_HELP' | translate: { version: peerMinVersion }\n                            \"\n                          >\n                            <small class=\"ion-color-danger\">\n                              <mat-icon>warning</mat-icon>\n                              v{{ peer.softwareVersion }}\n                            </small>\n                          </ion-text>\n                        }\n                      </h4>\n                    </ion-label>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            } @else {\n              <!-- Peer is DOWN -->\n              <ion-icon slot=\"start\" name=\"server\" class=\"disabled ion-icon-avatar\"></ion-icon>\n\n              <ion-label class=\"ion-text-wrap\">\n                <ion-text color=\"medium\">\n                  <h3>{{ peer.hostAndPort }}{{ peer.path }}</h3>\n                </ion-text>\n                <ion-text color=\"danger\">\n                  <h4>\n                    <small>\n                      <ion-icon size=\"small\" name=\"close-circle\"></ion-icon>\n                    </small>\n                    <span translate>NETWORK.PEER.OFFLINE</span>\n                  </h4>\n                </ion-text>\n              </ion-label>\n            }\n          </ion-item>\n        }\n\n        <!-- no result -->\n        @if ((filteredPeerCount$ | async) === 0) {\n          <ion-item>\n            <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n          </ion-item>\n        }\n      </ion-list>\n    </mat-tab>\n\n    <!-- Select by features -->\n    <mat-tab [disabled]=\"!enableSelectPeerByFeature\">\n      <ng-template mat-tab-label>\n        <ion-label\n          [matBadge]=\"filteredFeaturesCount$ | async | badgeNumber\"\n          [matBadgeHidden]=\"filteredFeaturesCount$ | async | isNil\"\n          [matBadgeColor]=\"(filteredFeaturesCount$ | async) ? 'primary' : 'accent'\"\n          matBadgeOverlap=\"false\"\n          matBadgeSize=\"small\"\n          matBadgePosition=\"above after\"\n        >\n          {{ 'NETWORK.PEER.SELECT_MODAL.TAB_FEATURES' | translate }}\n        </ion-label>\n      </ng-template>\n      <ion-list>\n        <ion-list-header>\n          <ion-label class=\"ion-text-wrap ion-padding-end\">\n            <p [innerHTML]=\"'NETWORK.PEER.SELECT_MODAL.FEATURES_HELP' | translate\"></p>\n          </ion-label>\n        </ion-list-header>\n\n        @for (peer of filteredPeersByFeatures$ | async; track $index) {\n          @let peerUrl = peer.hostAndPort + peer.path;\n          <!-- Peer is UP -->\n          @if (peer.reachable && peer.features | isNotEmptyArray) {\n            @let collapsed = collapsedPeers[peerUrl];\n\n            <ion-item-divider (click)=\"togglePeerFeatures(peerUrl)\" tappable @fadeInAnimation>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <ion-label>\n                      <h4>\n                        <ion-icon name=\"server\" color=\"medium\"></ion-icon>\n                        {{ peer.hostAndPort }}{{ peer.path }}\n                      </h4>\n                      @if (peerMinVersion && !isCompatible(peer)) {\n                        <ion-text\n                          color=\"danger\"\n                          [matTooltip]=\"\n                            'NETWORK.PEER.SELECT_MODAL.NOT_COMPATIBLE_HELP' | translate: { version: peerMinVersion }\n                          \"\n                        >\n                          <h4 class=\"ion-color-danger\">\n                            <small>\n                              <mat-icon>warning</mat-icon>\n                              v{{ peer.softwareVersion }}\n                            </small>\n                          </h4>\n                        </ion-text>\n                      }\n                    </ion-label>\n                  </ion-col>\n                  <ion-col size=\"4\" class=\"ion-text-end\">\n                    <ion-label class=\"text-italic\">\n                      <h4>({{ 'COMMON.RESULT_COUNT' | translate: { count: peer.features.length } }})</h4>\n                    </ion-label>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n\n              <mat-icon slot=\"end\">\n                @if (collapsed) {\n                  {{ mobile ? 'arrow_drop_down' : 'keyboard_arrow_down' }}\n                } @else {\n                  {{ mobile ? 'arrow_drop_up' : 'keyboard_arrow_up' }}\n                }\n              </mat-icon>\n            </ion-item-divider>\n\n            @if (!collapsed) {\n              @for (feature of peer.features; track feature.label) {\n                <ion-item (click)=\"selectPeer(peer)\" tappable matRipple detail @fadeInAnimation>\n                  <!-- icon -->\n                  @if (feature.logo && feature.logo != 'skip') {\n                    <ion-avatar slot=\"start\">\n                      <ion-img [src]=\"feature.logo\" (ionError)=\"clearLogo(feature)\"></ion-img>\n                    </ion-avatar>\n                  } @else if (peer.favicon != 'skip') {\n                    <ion-avatar slot=\"start\">\n                      <ion-img [src]=\"peer.favicon || peer.url + '/api/favicon'\" (ionError)=\"clearLogo(peer)\"></ion-img>\n                      <ion-icon\n                        name=\"contract\"\n                        class=\"icon-secondary\"\n                        style=\"top: 12px; left: 44px\"\n                        color=\"dark\"\n                      ></ion-icon>\n                    </ion-avatar>\n                  } @else {\n                    <ion-icon slot=\"start\" name=\"contract\" class=\"ion-icon-avatar\" color=\"dark\"></ion-icon>\n                  }\n\n                  <ion-label class=\"ion-text-wrap\">\n                    <ion-text color=\"primary\">\n                      <h3 [innerHTML]=\"feature | referentialToString | highlight: searchText\"></h3>\n                    </ion-text>\n                    <ion-text>\n                      <p [innerHTML]=\"feature.description | highlight: searchText\"></p>\n                    </ion-text>\n                  </ion-label>\n                </ion-item>\n              }\n            }\n          }\n        }\n\n        <!-- no result -->\n        @if ((filteredFeaturesCount$ | async) === 0) {\n          <ion-item>\n            <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n          </ion-item>\n        }\n      </ion-list>\n    </mat-tab>\n  </mat-tab-group>\n</ion-content>\n\n@if ((canCancel && !mobile) || showSetManuallyButton) {\n  <ion-footer>\n    <ion-toolbar>\n      <ion-row class=\"ion-no-padding ion-text-nowrap\">\n        <ion-col></ion-col>\n\n        <!-- buttons -->\n        @if (showSetManuallyButton) {\n          <ion-col size=\"auto\">\n            <ion-button fill=\"clear\" (click)=\"clickSetManually($event)\">\n              <ion-label translate>NETWORK.PEER.SELECT_MODAL.BTN_SET_MANUALLY</ion-label>\n            </ion-button>\n          </ion-col>\n        }\n\n        @if (canCancel) {\n          <ion-col size=\"auto\" hidden-xs hidden-sm hidden-mobile>\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n              <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n            </ion-button>\n          </ion-col>\n        }\n      </ion-row>\n    </ion-toolbar>\n  </ion-footer>\n}\n", styles: [".mat-mdc-tab-group{height:100%}.mat-mdc-tab-group .mat-tab-body-wrapper{height:calc(100% - var(--mat-tab-header-height))}ion-item-divider .ion-icon-avatar,ion-item .ion-icon-avatar{-webkit-margin-end:16px;margin-inline-end:16px;font-size:40px;width:40px;height:40px}ion-item-divider .ion-icon-avatar.disabled,ion-item .ion-icon-avatar.disabled{color:rgba(var(--ion-color-medium-rgb),.7)}ion-item-divider h4 ion-icon,ion-item-divider h4 mat-icon,ion-item h4 ion-icon,ion-item h4 mat-icon{height:14px;width:14px;font-size:14px;line-height:14px}ion-item-divider h4 small ion-icon,ion-item-divider h4 small mat-icon,ion-item h4 small ion-icon,ion-item h4 small mat-icon{height:12px;width:12px;font-size:12px;line-height:12px}ion-item-divider.selected,ion-item.selected{--ion-color-base: var(--ion-color-secondary100-contrast) !important;--ion-item-background: var(--ion-color-secondary100)}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonAvatar, selector: "ion-avatar" }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonImg, selector: "ion-img", inputs: ["alt", "src"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$1.IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocapitalize", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "maxlength", "minlength", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }, { kind: "component", type: i2$1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i2$1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar,ion-range" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i7.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i7.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i8.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: i10$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: HighlightPipe, name: "highlight" }, { kind: "pipe", type: NotEmptyArrayPipe, name: "isNotEmptyArray" }, { kind: "pipe", type: IsNilPipe, name: "isNil" }, { kind: "pipe", type: BadgeNumberPipe, name: "badgeNumber" }, { kind: "pipe", type: ReferentialToStringPipe, name: "referentialToString" }], animations: [fadeInAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SelectPeerModal, selector: "select-peer-modal", inputs: { selectedTabIndex: ["selectedTabIndex", "selectedTabIndex", numberAttribute], selectedPeer: "selectedPeer", peerFilter: "peerFilter", title: "title", canCancel: ["canCancel", "canCancel", booleanAttribute], allowSelectDownPeer: ["allowSelectDownPeer", "allowSelectDownPeer", booleanAttribute], showSetManuallyButton: ["showSetManuallyButton", "showSetManuallyButton", booleanAttribute], showSearchBar: ["showSearchBar", "showSearchBar", booleanAttribute], tabGroupAnimationDuration: "tabGroupAnimationDuration", onRefresh: "onRefresh", defaultPeers: "defaultPeers" }, viewQueries: [{ propertyName: "searchbar", first: true, predicate: ["searchbar"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"light\" style=\"z-index: 900\">\n    <ion-buttons slot=\"start\">\n      @if (canCancel) {\n        <ion-button (click)=\"cancel()\" visible-mobile visible-sm visible-xs>\n          <ion-icon name=\"arrow-back\" slot=\"icon-only\"></ion-icon>\n        </ion-button>\n      }\n    </ion-buttons>\n\n    <ion-title>\n      {{ title | translate }}\n    </ion-title>\n\n    <ion-buttons slot=\"end\">\n      <!-- loader -->\n      @if (loading) {\n        <ion-spinner></ion-spinner>\n      } @else {\n        <!-- refresh button -->\n        <ion-button\n          (click)=\"refresh($event)\"\n          *ngIf=\"onRefresh.observed\"\n          [matTooltip]=\"'COMMON.BTN_REFRESH' | translate\"\n        >\n          <mat-icon slot=\"icon-only\">refresh</mat-icon>\n        </ion-button>\n      }\n      <!-- search button -->\n      @if (!showSearchBar) {\n        <ion-button (click)=\"toggleSearchBar()\">\n          <ion-icon slot=\"icon-only\" name=\"search\"></ion-icon>\n        </ion-button>\n      }\n    </ion-buttons>\n  </ion-toolbar>\n\n  <!-- search bar -->\n  <ion-toolbar *ngIf=\"showSearchBar\">\n    <ion-searchbar\n      #searchbar\n      animated\n      type=\"search\"\n      [class.cdk-visually-hidden]=\"!showSearchBar\"\n      show-clear-button=\"always\"\n      [placeholder]=\"'COMMON.BTN_SEARCH' | translate\"\n      [cancelButtonText]=\"'COMMON.BTN_CANCEL' | translate\"\n      [(ngModel)]=\"searchText\"\n      (ionCancel)=\"toggleSearchBar()\"\n    ></ion-searchbar>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <mat-tab-group\n    #tabGroup\n    [(selectedIndex)]=\"selectedTabIndex\"\n    class=\"mat-mdc-tab-disabled-hidden\"\n    [class.mat-mdc-tab-group-header-hidden]=\"!enableSelectPeerByFeature\"\n    [dynamicHeight]=\"false\"\n    [mat-stretch-tabs]=\"mobile\"\n    [animationDuration]=\"mobile ? tabGroupAnimationDuration : '0s'\"\n  >\n    <mat-tab>\n      <ng-template mat-tab-label>\n        <ion-label\n          [matBadge]=\"filteredPeerCount$ | async | badgeNumber\"\n          [matBadgeHidden]=\"filteredPeerCount$ | async | isNil\"\n          [matBadgeColor]=\"(filteredPeerCount$ | async) ? 'primary' : 'accent'\"\n          matBadgeOverlap=\"false\"\n          matBadgeColor=\"primary\"\n          matBadgeSize=\"small\"\n          matBadgePosition=\"above after\"\n        >\n          {{ 'NETWORK.PEER.SELECT_MODAL.TAB_NETWORK' | translate }}\n        </ion-label>\n      </ng-template>\n      <ion-list>\n        <ion-list-header>\n          <ion-label class=\"ion-text-wrap ion-padding-end\">\n            <p [innerHTML]=\"'NETWORK.PEER.SELECT_MODAL.NETWORK_HELP' | translate\"></p>\n          </ion-label>\n        </ion-list-header>\n\n        @for (peer of filteredPeers$ | async; track $index) {\n          <ion-item\n            (click)=\"selectPeer(peer)\"\n            @fadeInAnimation\n            [class.selected]=\"selectedPeer && selectedPeer === peer.url\"\n            detail\n            matRipple\n            tappable\n          >\n            <!-- Peer is UP -->\n            @if (peer.reachable) {\n              <!-- icon -->\n              @if (peer.favicon != 'skip') {\n                <ion-avatar slot=\"start\">\n                  <ion-img [src]=\"peer.favicon || peer.url + '/api/favicon'\" (ionError)=\"clearLogo(peer)\"></ion-img>\n                  <ion-icon name=\"server\" class=\"icon-secondary\" style=\"top: 12px; left: 44px\" color=\"dark\"></ion-icon>\n                </ion-avatar>\n              } @else {\n                <ion-icon slot=\"start\" name=\"server\" class=\"ion-icon-avatar\" color=\"dark\"></ion-icon>\n              }\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <ion-label class=\"ion-text-wrap\">\n                      <ion-text>\n                        @let url = peer.hostAndPort + peer.path;\n                        <h3 [innerHTML]=\"url | highlight: searchText\"></h3>\n                      </ion-text>\n                      <ion-text color=\"primary\">\n                        <h4 [innerHTML]=\"peer.label | highlight: searchText\"></h4>\n                      </ion-text>\n                    </ion-label>\n                  </ion-col>\n                  <ion-col size=\"12\" size-sm=\"4\">\n                    <ion-label class=\"ion-text-wrap ion-text-sm-center\" color=\"medium\">\n                      <h4>\n                        <small>{{ peer.softwareName }}&nbsp;</small>\n                        <br class=\"hidden-xxs hidden-xs\" />\n                        <!-- Compatible -->\n                        @if (!peerMinVersion || isCompatible(peer)) {\n                          <small>v{{ peer.softwareVersion }}</small>\n                        } @else {\n                          <!-- Incompatible -->\n                          <ion-text\n                            color=\"danger\"\n                            [matTooltip]=\"\n                              'NETWORK.PEER.SELECT_MODAL.NOT_COMPATIBLE_HELP' | translate: { version: peerMinVersion }\n                            \"\n                          >\n                            <small class=\"ion-color-danger\">\n                              <mat-icon>warning</mat-icon>\n                              v{{ peer.softwareVersion }}\n                            </small>\n                          </ion-text>\n                        }\n                      </h4>\n                    </ion-label>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            } @else {\n              <!-- Peer is DOWN -->\n              <ion-icon slot=\"start\" name=\"server\" class=\"disabled ion-icon-avatar\"></ion-icon>\n\n              <ion-label class=\"ion-text-wrap\">\n                <ion-text color=\"medium\">\n                  <h3>{{ peer.hostAndPort }}{{ peer.path }}</h3>\n                </ion-text>\n                <ion-text color=\"danger\">\n                  <h4>\n                    <small>\n                      <ion-icon size=\"small\" name=\"close-circle\"></ion-icon>\n                    </small>\n                    <span translate>NETWORK.PEER.OFFLINE</span>\n                  </h4>\n                </ion-text>\n              </ion-label>\n            }\n          </ion-item>\n        }\n\n        <!-- no result -->\n        @if ((filteredPeerCount$ | async) === 0) {\n          <ion-item>\n            <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n          </ion-item>\n        }\n      </ion-list>\n    </mat-tab>\n\n    <!-- Select by features -->\n    <mat-tab [disabled]=\"!enableSelectPeerByFeature\">\n      <ng-template mat-tab-label>\n        <ion-label\n          [matBadge]=\"filteredFeaturesCount$ | async | badgeNumber\"\n          [matBadgeHidden]=\"filteredFeaturesCount$ | async | isNil\"\n          [matBadgeColor]=\"(filteredFeaturesCount$ | async) ? 'primary' : 'accent'\"\n          matBadgeOverlap=\"false\"\n          matBadgeSize=\"small\"\n          matBadgePosition=\"above after\"\n        >\n          {{ 'NETWORK.PEER.SELECT_MODAL.TAB_FEATURES' | translate }}\n        </ion-label>\n      </ng-template>\n      <ion-list>\n        <ion-list-header>\n          <ion-label class=\"ion-text-wrap ion-padding-end\">\n            <p [innerHTML]=\"'NETWORK.PEER.SELECT_MODAL.FEATURES_HELP' | translate\"></p>\n          </ion-label>\n        </ion-list-header>\n\n        @for (peer of filteredPeersByFeatures$ | async; track $index) {\n          @let peerUrl = peer.hostAndPort + peer.path;\n          <!-- Peer is UP -->\n          @if (peer.reachable && peer.features | isNotEmptyArray) {\n            @let collapsed = collapsedPeers[peerUrl];\n\n            <ion-item-divider (click)=\"togglePeerFeatures(peerUrl)\" tappable @fadeInAnimation>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <ion-label>\n                      <h4>\n                        <ion-icon name=\"server\" color=\"medium\"></ion-icon>\n                        {{ peer.hostAndPort }}{{ peer.path }}\n                      </h4>\n                      @if (peerMinVersion && !isCompatible(peer)) {\n                        <ion-text\n                          color=\"danger\"\n                          [matTooltip]=\"\n                            'NETWORK.PEER.SELECT_MODAL.NOT_COMPATIBLE_HELP' | translate: { version: peerMinVersion }\n                          \"\n                        >\n                          <h4 class=\"ion-color-danger\">\n                            <small>\n                              <mat-icon>warning</mat-icon>\n                              v{{ peer.softwareVersion }}\n                            </small>\n                          </h4>\n                        </ion-text>\n                      }\n                    </ion-label>\n                  </ion-col>\n                  <ion-col size=\"4\" class=\"ion-text-end\">\n                    <ion-label class=\"text-italic\">\n                      <h4>({{ 'COMMON.RESULT_COUNT' | translate: { count: peer.features.length } }})</h4>\n                    </ion-label>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n\n              <mat-icon slot=\"end\">\n                @if (collapsed) {\n                  {{ mobile ? 'arrow_drop_down' : 'keyboard_arrow_down' }}\n                } @else {\n                  {{ mobile ? 'arrow_drop_up' : 'keyboard_arrow_up' }}\n                }\n              </mat-icon>\n            </ion-item-divider>\n\n            @if (!collapsed) {\n              @for (feature of peer.features; track feature.label) {\n                <ion-item (click)=\"selectPeer(peer)\" tappable matRipple detail @fadeInAnimation>\n                  <!-- icon -->\n                  @if (feature.logo && feature.logo != 'skip') {\n                    <ion-avatar slot=\"start\">\n                      <ion-img [src]=\"feature.logo\" (ionError)=\"clearLogo(feature)\"></ion-img>\n                    </ion-avatar>\n                  } @else if (peer.favicon != 'skip') {\n                    <ion-avatar slot=\"start\">\n                      <ion-img [src]=\"peer.favicon || peer.url + '/api/favicon'\" (ionError)=\"clearLogo(peer)\"></ion-img>\n                      <ion-icon\n                        name=\"contract\"\n                        class=\"icon-secondary\"\n                        style=\"top: 12px; left: 44px\"\n                        color=\"dark\"\n                      ></ion-icon>\n                    </ion-avatar>\n                  } @else {\n                    <ion-icon slot=\"start\" name=\"contract\" class=\"ion-icon-avatar\" color=\"dark\"></ion-icon>\n                  }\n\n                  <ion-label class=\"ion-text-wrap\">\n                    <ion-text color=\"primary\">\n                      <h3 [innerHTML]=\"feature | referentialToString | highlight: searchText\"></h3>\n                    </ion-text>\n                    <ion-text>\n                      <p [innerHTML]=\"feature.description | highlight: searchText\"></p>\n                    </ion-text>\n                  </ion-label>\n                </ion-item>\n              }\n            }\n          }\n        }\n\n        <!-- no result -->\n        @if ((filteredFeaturesCount$ | async) === 0) {\n          <ion-item>\n            <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n          </ion-item>\n        }\n      </ion-list>\n    </mat-tab>\n  </mat-tab-group>\n</ion-content>\n\n@if ((canCancel && !mobile) || showSetManuallyButton) {\n  <ion-footer>\n    <ion-toolbar>\n      <ion-row class=\"ion-no-padding ion-text-nowrap\">\n        <ion-col></ion-col>\n\n        <!-- buttons -->\n        @if (showSetManuallyButton) {\n          <ion-col size=\"auto\">\n            <ion-button fill=\"clear\" (click)=\"clickSetManually($event)\">\n              <ion-label translate>NETWORK.PEER.SELECT_MODAL.BTN_SET_MANUALLY</ion-label>\n            </ion-button>\n          </ion-col>\n        }\n\n        @if (canCancel) {\n          <ion-col size=\"auto\" hidden-xs hidden-sm hidden-mobile>\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n              <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n            </ion-button>\n          </ion-col>\n        }\n      </ion-row>\n    </ion-toolbar>\n  </ion-footer>\n}\n", styles: [".mat-mdc-tab-group{height:100%}.mat-mdc-tab-group .mat-tab-body-wrapper{height:calc(100% - var(--mat-tab-header-height))}ion-item-divider .ion-icon-avatar,ion-item .ion-icon-avatar{-webkit-margin-end:16px;margin-inline-end:16px;font-size:40px;width:40px;height:40px}ion-item-divider .ion-icon-avatar.disabled,ion-item .ion-icon-avatar.disabled{color:rgba(var(--ion-color-medium-rgb),.7)}ion-item-divider h4 ion-icon,ion-item-divider h4 mat-icon,ion-item h4 ion-icon,ion-item h4 mat-icon{height:14px;width:14px;font-size:14px;line-height:14px}ion-item-divider h4 small ion-icon,ion-item-divider h4 small mat-icon,ion-item h4 small ion-icon,ion-item h4 small mat-icon{height:12px;width:12px;font-size:12px;line-height:12px}ion-item-divider.selected,ion-item.selected{--ion-color-base: var(--ion-color-secondary100-contrast) !important;--ion-item-background: var(--ion-color-secondary100)}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonAvatar, selector: "ion-avatar" }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonImg, selector: "ion-img", inputs: ["alt", "src"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$1.IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocapitalize", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "maxlength", "minlength", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }, { kind: "component", type: i2$1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i2$1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar,ion-range" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i8.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i8.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i9.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: i10$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: HighlightPipe, name: "highlight" }, { kind: "pipe", type: NotEmptyArrayPipe, name: "isNotEmptyArray" }, { kind: "pipe", type: IsNilPipe, name: "isNil" }, { kind: "pipe", type: BadgeNumberPipe, name: "badgeNumber" }, { kind: "pipe", type: ReferentialToStringPipe, name: "referentialToString" }], animations: [fadeInAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectPeerModal, decorators: [{
             type: Component,
@@ -26185,7 +26185,7 @@ class NamedFilterSelector extends AppForm {
         this.autocompleteField.blurred.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NamedFilterSelector, deps: [{ token: i0.Injector }, { token: i1$3.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: i2$1.ToastController }, { token: i2$1.PopoverController }, { token: APP_NAMED_FILTER_SERVICE }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: NamedFilterSelector, selector: "app-named-filter-selector", inputs: { mobile: "mobile", entityName: "entityName", appearance: "appearance", subscriptSizing: "subscriptSizing", filterContentProvider: "filterContentProvider", filterImportCallback: "filterImportCallback", filterFormDirty: "filterFormDirty", showButtons: "showButtons", exportFileNamePrefix: "exportFileNamePrefix", autocompleteConfig: "autocompleteConfig", dropButtonTitle: "dropButtonTitle", clearButtonTitle: "clearButtonTitle", detectChangeOnSelectFilter: "detectChangeOnSelectFilter", buttonsPosition: "buttonsPosition", disabled: "disabled" }, outputs: { filterSelected: "filterSelected", filterDeleted: "filterDeleted", filterCleared: "filterCleared" }, viewQueries: [{ propertyName: "autocompleteField", first: true, predicate: MatAutocompleteField, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ion-grid class=\"ion-no-padding\">\n  <ion-row class=\"ion-no-padding\">\n    <ion-col class=\"ion-no-padding\">\n      <form class=\"form-container\" [formGroup]=\"form\">\n        <mat-autocomplete-field\n          formControlName=\"namedFilter\"\n          [config]=\"autocompleteFields.namedFilter\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"subscriptSizing\"\n          [placeholder]=\"'COMMON.NAMED_FILTER.TITLE' | translate\"\n          [clearable]=\"true\"\n          [dropButtonTitle]=\"dropButtonTitle\"\n          [clearButtonTitle]=\"clearButtonTitle\"\n        >\n          @if (showButtons && buttonsPosition === 'matSuffix') {\n            <ng-container matSuffix>\n              <ng-container *ngTemplateOutlet=\"buttons\"></ng-container>\n            </ng-container>\n          }\n        </mat-autocomplete-field>\n      </form>\n    </ion-col>\n    @if (showButtons && buttonsPosition === 'after') {\n      <ion-col size=\"auto\" class=\"ion-no-padding\">\n        <ng-container *ngTemplateOutlet=\"buttons\"></ng-container>\n      </ion-col>\n    }\n  </ion-row>\n</ion-grid>\n\n<ng-template #buttons>\n  <!-- save -->\n  <button\n    mat-icon-button\n    [color]=\"'primary'\"\n    [disabled]=\"saveDisabled\"\n    [title]=\"'COMMON.NAMED_FILTER.SAVE' | translate\"\n    (click)=\"save($event)\"\n  >\n    <mat-icon>save</mat-icon>\n    <mat-icon *ngIf=\"isNew\" class=\"icon-secondary\" style=\"left: 12px; top: 0\">add</mat-icon>\n  </button>\n\n  <!-- delete -->\n  <button\n    mat-icon-button\n    [disabled]=\"deleteDisabled\"\n    [title]=\"'COMMON.NAMED_FILTER.DELETE' | translate\"\n    (click)=\"delete($event)\"\n  >\n    <mat-icon>delete</mat-icon>\n  </button>\n\n  <!-- more '...' -->\n  <button mat-icon-button [matMenuTriggerFor]=\"moreMenu\" (click)=\"onMoreOptionsClick($event)\">\n    <mat-icon>more_vert</mat-icon>\n  </button>\n\n  <!-- more menu -->\n  <mat-menu #moreMenu=\"matMenu\">\n    <ng-template matMenuContent>\n      <!-- import -->\n      <button mat-menu-item (click)=\"import($event)\">\n        <mat-icon>file_upload</mat-icon>\n        <ion-label>{{ 'COMMON.NAMED_FILTER.IMPORT' | translate }}</ion-label>\n      </button>\n\n      <mat-divider></mat-divider>\n\n      <!-- export -->\n      <button mat-menu-item (click)=\"export($event)\" [disabled]=\"isNew\">\n        <mat-icon>file_download</mat-icon>\n        <ion-label>{{ 'COMMON.NAMED_FILTER.EXPORT' | translate }}</ion-label>\n      </button>\n    </ng-template>\n  </mat-menu>\n</ng-template>\n", styles: [":host{max-width:100%}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "label", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "hideRequiredMarker", "mobile", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "reloadItemsOnFocus", "clearInvalidValueOnBlur", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "splitSearchText", "selectInputContentOnFocus", "selectInputContentOnFocusDelay", "previewImplicitValue", "showFavorites", "toggleFavoriteTitle", "favoriteItems", "colSizes", "class", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keydown.backspace", "keyup.enter", "selectionChange", "openedChange", "toggleFavorite"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i12.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i12.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i12.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i12.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i9.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: NamedFilterSelector, selector: "app-named-filter-selector", inputs: { mobile: "mobile", entityName: "entityName", appearance: "appearance", subscriptSizing: "subscriptSizing", filterContentProvider: "filterContentProvider", filterImportCallback: "filterImportCallback", filterFormDirty: "filterFormDirty", showButtons: "showButtons", exportFileNamePrefix: "exportFileNamePrefix", autocompleteConfig: "autocompleteConfig", dropButtonTitle: "dropButtonTitle", clearButtonTitle: "clearButtonTitle", detectChangeOnSelectFilter: "detectChangeOnSelectFilter", buttonsPosition: "buttonsPosition", disabled: "disabled" }, outputs: { filterSelected: "filterSelected", filterDeleted: "filterDeleted", filterCleared: "filterCleared" }, viewQueries: [{ propertyName: "autocompleteField", first: true, predicate: MatAutocompleteField, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ion-grid class=\"ion-no-padding\">\n  <ion-row class=\"ion-no-padding\">\n    <ion-col class=\"ion-no-padding\">\n      <form class=\"form-container\" [formGroup]=\"form\">\n        <mat-autocomplete-field\n          formControlName=\"namedFilter\"\n          [config]=\"autocompleteFields.namedFilter\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"subscriptSizing\"\n          [placeholder]=\"'COMMON.NAMED_FILTER.TITLE' | translate\"\n          [clearable]=\"true\"\n          [dropButtonTitle]=\"dropButtonTitle\"\n          [clearButtonTitle]=\"clearButtonTitle\"\n        >\n          @if (showButtons && buttonsPosition === 'matSuffix') {\n            <ng-container matSuffix>\n              <ng-container *ngTemplateOutlet=\"buttons\"></ng-container>\n            </ng-container>\n          }\n        </mat-autocomplete-field>\n      </form>\n    </ion-col>\n    @if (showButtons && buttonsPosition === 'after') {\n      <ion-col size=\"auto\" class=\"ion-no-padding\">\n        <ng-container *ngTemplateOutlet=\"buttons\"></ng-container>\n      </ion-col>\n    }\n  </ion-row>\n</ion-grid>\n\n<ng-template #buttons>\n  <!-- save -->\n  <button\n    mat-icon-button\n    [color]=\"'primary'\"\n    [disabled]=\"saveDisabled\"\n    [title]=\"'COMMON.NAMED_FILTER.SAVE' | translate\"\n    (click)=\"save($event)\"\n  >\n    <mat-icon>save</mat-icon>\n    <mat-icon *ngIf=\"isNew\" class=\"icon-secondary\" style=\"left: 12px; top: 0\">add</mat-icon>\n  </button>\n\n  <!-- delete -->\n  <button\n    mat-icon-button\n    [disabled]=\"deleteDisabled\"\n    [title]=\"'COMMON.NAMED_FILTER.DELETE' | translate\"\n    (click)=\"delete($event)\"\n  >\n    <mat-icon>delete</mat-icon>\n  </button>\n\n  <!-- more '...' -->\n  <button mat-icon-button [matMenuTriggerFor]=\"moreMenu\" (click)=\"onMoreOptionsClick($event)\">\n    <mat-icon>more_vert</mat-icon>\n  </button>\n\n  <!-- more menu -->\n  <mat-menu #moreMenu=\"matMenu\">\n    <ng-template matMenuContent>\n      <!-- import -->\n      <button mat-menu-item (click)=\"import($event)\">\n        <mat-icon>file_upload</mat-icon>\n        <ion-label>{{ 'COMMON.NAMED_FILTER.IMPORT' | translate }}</ion-label>\n      </button>\n\n      <mat-divider></mat-divider>\n\n      <!-- export -->\n      <button mat-menu-item (click)=\"export($event)\" [disabled]=\"isNew\">\n        <mat-icon>file_download</mat-icon>\n        <ion-label>{{ 'COMMON.NAMED_FILTER.EXPORT' | translate }}</ion-label>\n      </button>\n    </ng-template>\n  </mat-menu>\n</ng-template>\n", styles: [":host{max-width:100%}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "label", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "hideRequiredMarker", "mobile", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "reloadItemsOnFocus", "clearInvalidValueOnBlur", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "splitSearchText", "selectInputContentOnFocus", "selectInputContentOnFocusDelay", "previewImplicitValue", "showFavorites", "toggleFavoriteTitle", "favoriteItems", "colSizes", "class", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keydown.backspace", "keyup.enter", "selectionChange", "openedChange", "toggleFavorite"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i12.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i12.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i12.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i12.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i9$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NamedFilterSelector, decorators: [{
             type: Component,
@@ -30224,6 +30224,8 @@ let MenuItem = class MenuItem extends Entity {
     $title = new BehaviorSubject(undefined);
     titleProperty; // A config property, to override the title
     titleArgs;
+    $badge = new BehaviorSubject(undefined);
+    $badgeColor = new BehaviorSubject(undefined);
     path;
     pathParams;
     parentPath;
@@ -30248,6 +30250,8 @@ let MenuItem = class MenuItem extends Entity {
         this.title = source.title;
         this.titleProperty = source.titleProperty;
         this.titleArgs = source.titleArgs;
+        this.badge = source.badge;
+        this.badgeColor = source.badgeColor;
         // Clean path
         if (source.path) {
             const { path, params } = MenuItems.parsePathWithQuery(source.path);
@@ -30314,6 +30318,22 @@ let MenuItem = class MenuItem extends Entity {
             this.$title.next(value);
         }
     }
+    get badge() {
+        return this.$badge.value;
+    }
+    set badge(value) {
+        if (this.$badge.value !== value) {
+            this.$badge.next(value);
+        }
+    }
+    get badgeColor() {
+        return this.$badgeColor.value;
+    }
+    set badgeColor(value) {
+        if (this.$badgeColor.value !== value) {
+            this.$badgeColor.next(value);
+        }
+    }
     get detached() {
         return !this.parentPath || !this.parent;
     }
@@ -31327,11 +31347,11 @@ class MenuComponent {
         this.menuService.togglePinned(item);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenuComponent, deps: [{ token: AccountService }, { token: i2$1.NavController }, { token: i2$1.MenuController }, { token: i2$1.ModalController }, { token: i1$1.TranslateService }, { token: i0.ChangeDetectorRef }, { token: MenuService }, { token: i1$6.Router }, { token: ENVIRONMENT }, { token: i1$6.ActivatedRoute, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MenuComponent, selector: "app-menu", inputs: { id: "id", menuId: "menuId", side: "side", contentId: "contentId", logo: "logo", appName: "appName", rxStrategy: "rxStrategy", appVersion: "appVersion" }, viewQueries: [{ propertyName: "splitPane", first: true, predicate: ["splitPane"], descendants: true, static: true }], ngImport: i0, template: "<ion-split-pane #splitPane [contentId]=\"contentId\" (swiperight)=\"onSwipeRight($event)\">\n  <ion-menu [id]=\"id\" [menuId]=\"menuId\" [contentId]=\"contentId\">\n    <ion-header>\n      <ion-toolbar *ngIf=\"!loading && isLogin; else notLogin\" @fadeInSlowAnimation class=\"user-toolbar\">\n        <ion-grid>\n          <ion-row>\n            <ion-col size=\"4\">\n              <button\n                type=\"button\"\n                mat-flat-button\n                class=\"user-avatar\"\n                [class.primary]=\"!accountAvatar\"\n                [style.background-image]=\"'url(' + (accountAvatar || './assets/img/person.png') + ')'\"\n                [routerLink]=\"['/account']\"\n                routerDirection=\"root\"\n                routerLinkActive=\"ion-color-primary\"\n                (click)=\"close()\"\n                [title]=\"'MENU.BTN_MY_ACCOUNT' | translate\"\n              ></button>\n            </ion-col>\n            <ion-col size=\"8\" class=\"user-logo\">\n              <img\n                *ngIf=\"logo; else noLogo\"\n                [attr.src]=\"logo\"\n                [title]=\"'APP_NAME' | translate: { appName: appName }\"\n                alt=\"Logo\"\n                width=\"108px\"\n              />\n              <ng-template #noLogo>\n                <span style=\"width: 108px\">{{ appName }}</span>\n              </ng-template>\n            </ion-col>\n          </ion-row>\n          <ion-row class=\"ion-no-padding\">\n            <ion-col>\n              <button\n                mat-button\n                type=\"button\"\n                [routerLink]=\"['/account']\"\n                routerDirection=\"root\"\n                routerLinkActive=\"selected\"\n                (click)=\"close()\"\n                [title]=\"'MENU.BTN_MY_ACCOUNT' | translate\"\n              >\n                <ion-label class=\"ion-text-wrap ion-text-start\">\n                  <h3 class=\"no-margin username\">\n                    <b>{{ accountName }}</b>\n                  </h3>\n                  <h4>{{ accountEmail }}</h4>\n                </ion-label>\n              </button>\n            </ion-col>\n\n            <!-- Insertion headerBottomRight -->\n            <ion-col size=\"auto\">\n              <ng-container *ngTemplateOutlet=\"headerBottomRight\"></ng-container>\n            </ion-col>\n          </ion-row>\n        </ion-grid>\n      </ion-toolbar>\n\n      <!-- User not logged -->\n      <ng-template #notLogin>\n        <mat-toolbar\n          class=\"ion-padding\"\n          *ngIf=\"!loading\"\n          style=\"height: unset; display: block; margin: auto; text-align: center\"\n        >\n          <img\n            *ngIf=\"logo\"\n            [attr.src]=\"logo\"\n            [title]=\"'APP_NAME' | translate: { appName: appName }\"\n            width=\"150px;\"\n            alt=\"logo\"\n          />\n          <span *ngIf=\"!logo\" style=\"width: 150px\">{{ appName }}</span>\n        </mat-toolbar>\n      </ng-template>\n    </ion-header>\n\n    <ion-content [class.has-user-header]=\"isLogin\">\n      <!-- will close the menu, after a click, in mobile -->\n      <ion-menu-toggle auto-hide=\"false\">\n        <ion-list lines=\"none\" *ngIf=\"!loading\">\n          <ng-container *rxFor=\"let item of menuService.dataSubject; strategy: rxStrategy; trackBy: trackByFn\">\n            <ng-container *ngTemplateOutlet=\"menuItem; context: { $implicit: item, level: 0 }\"></ng-container>\n          </ng-container>\n        </ion-list>\n      </ion-menu-toggle>\n    </ion-content>\n\n    <ion-footer class=\"hidden-xs hidden-sm\">\n      <ion-toolbar>\n        <ion-buttons slot=\"start\">\n          <ion-button mat-icon-button color=\"accent\" (click)=\"menuService.openAboutModal()\">\n            <mat-icon slot=\"icon-only\">help_outline</mat-icon>\n          </ion-button>\n        </ion-buttons>\n\n        <ion-title (click)=\"menuService.openAboutModal()\" color=\"medium\">\n          {{ 'MENU.FOOTER_VERSION_ABOUT' | translate: { version: appVersion } }}\n        </ion-title>\n\n        <ion-buttons slot=\"end\">\n          <button\n            mat-icon-button\n            color=\"accent\"\n            (click)=\"toggleSplitPaneShow($event)\"\n            class=\"hidden-xs hidden-sm hidden-md\"\n            [title]=\"(splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') | translate\"\n          >\n            <mat-icon>\n              <span>{{ splitPane.when ? '&#xab;' : '&#xbb;' }}</span>\n            </mat-icon>\n          </button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-footer>\n  </ion-menu>\n\n  <ng-content></ng-content>\n</ion-split-pane>\n\n<ng-template #headerBottomRight>\n  <ng-content select=\"[headerBottomRight]\"></ng-content>\n</ng-template>\n\n<ng-template #menuItem let-item let-level=\"level\">\n  @if (item.divider) {\n    <!-- divider -->\n    <ion-item-divider class=\"{{ item.cssClass }} {{ item.color }}\" @fadeInSlowAnimation>\n      <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n      <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{ item.matIcon }}</mat-icon>\n      <ion-label *ngIf=\"item.cssClass !== 'flex-spacer'\">\n        <span *rxIf=\"item.$title; let title; else: skeletonText\" [innerHTML]=\"title | translate\"></span>\n      </ion-label>\n    </ion-item-divider>\n  } @else if (item.path && !item.action) {\n    <!-- tappable link -->\n    <ion-item\n      @fadeInSlowAnimation\n      class=\"{{ item.cssClass }} {{ item.color }}\"\n      [class.menu-item-sub]=\"level !== 0\"\n      tappable\n      [routerLink]=\"item.path\"\n      [queryParams]=\"item.pathParams\"\n      routerDirection=\"root\"\n      routerLinkActive=\"selected\"\n      [routerLinkActiveOptions]=\"{\n        paths: item.path === '/' || level !== 0 ? 'exact' : 'subset',\n        queryParams: item.pathParams?.tab || level === 0 ? 'subset' : 'exact',\n        matrixParams: 'exact',\n        fragment: 'ignored',\n      }\"\n    >\n      @if (item.icon) {\n        <ion-icon slot=\"start\" [name]=\"item.icon\"></ion-icon>\n      } @else if (item.matIcon) {\n        <mat-icon slot=\"start\">{{ item.matIcon }}</mat-icon>\n      }\n      <ion-label *rxLet=\"item.$title; let title\">\n        <span *ngIf=\"title; else skeletonText\" [innerHTML]=\"title | translate\"></span>\n        <!--<span *ngIf=\"_debug\"> {{item.id}}</span>-->\n      </ion-label>\n\n      <!-- pin button -->\n      <ng-container *ngTemplateOutlet=\"pinButton; context: { $implicit: item, level: level }\"></ng-container>\n    </ion-item>\n  } @else if (item.action) {\n    <!-- action -->\n    <ion-item\n      @fadeInSlowAnimation\n      class=\"{{ item.cssClass }} {{ item.color }} text-1x\"\n      [class.menu-item-sub]=\"level !== 0\"\n      tappable\n      (click)=\"executeAction($event, item)\"\n    >\n      <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n      <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{ item.matIcon }}</mat-icon>\n      <ion-label>\n        <span *rxIf=\"item.$title; let title; else: skeletonText\" [innerHTML]=\"title | translate\"></span>\n        <!--<span *ngIf=\"_debug\"> {{item.id}}</span>-->\n      </ion-label>\n\n      <!-- pin button -->\n      <ng-container *ngTemplateOutlet=\"pinButton; context: { $implicit: item, level: level }\"></ng-container>\n    </ion-item>\n  }\n\n  <!-- children -->\n  @if (item.$children) {\n    <div class=\"sub-menu-container\">\n      <ng-container *rxFor=\"let child of item.$children; strategy: rxStrategy; trackBy: trackByFn\">\n        <ng-container *ngTemplateOutlet=\"menuItem; context: { $implicit: child, level: level + 1 }\"></ng-container>\n      </ng-container>\n    </div>\n  }\n</ng-template>\n\n<ng-template #pinButton let-item let-level=\"level\">\n  <!-- pin button -->\n  @if (level && item.pinnable) {\n    <ion-button\n      slot=\"end\"\n      shape=\"round\"\n      fill=\"clear\"\n      size=\"small\"\n      [class.visible-hover]=\"!item.pinned\"\n      (click)=\"togglePinned($event, item)\"\n    >\n      <!--<mat-icon slot=\"icon-only\" [color]=\"item.pinned ? 'primary' : undefined\">push_pin</mat-icon>-->\n      <ion-icon slot=\"icon-only\" [name]=\"item.pinned ? 'pin' : 'pin-outline'\"></ion-icon>\n    </ion-button>\n  }\n</ng-template>\n\n<ng-template #skeletonText let-width let-animated>\n  <ion-skeleton-text [animated]=\"animated\" [style.width.%]=\"width || 60\"></ion-skeleton-text>\n</ng-template>\n", styles: [":host{--menu-item-margin: 0;--ion-item-background: transparent;--ion-item-divider-background: transparent;--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint);--ion-item-background-selected: var(--ion-color-secondary100);--ion-item-text-color-selected: var(--ion-color-primary);--ion-item-icon-color-selected: var(--ion-color-primary);--ion-item-text-color-disable: var(--ion-color-medium);--ion-item-icon-color-disable: var(--ion-color-medium);--menu-item-background-selected-sub: var(--ion-color-secondary50);--menu-item-border-width-sub: 0 0 1px 0;--menu-item-margin-start-sub: 16px}@keyframes fadeinout{0%{opacity:0;display:none}75%{opacity:0;display:none}to{opacity:1;display:flex}}ion-menu ion-header ion-text{color:var(--ion-color-primary)}ion-menu ion-header ion-toolbar.user-toolbar{--ion-toolbar-height: 128px}ion-menu ion-header .user-avatar{-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-repeat:no-repeat;background-position:center;background-color:var(--ion-color-secondary);border:solid 1px rgba(var(--ion-color-secondary-rgb),.5);overflow:hidden!important;font-size:var(--avatar-size, 60px)!important;line-height:var(--avatar-size, 60px);height:var(--avatar-size, 60px)!important;width:var(--avatar-size, 60px)!important;border-radius:50%;display:inline-block}ion-menu ion-header .user-avatar:hover{background-color:var(--ion-color-secondary-shade);border:solid 2px var(--ion-color-secondary-shade)}ion-menu ion-header .user-logo{text-align:right}ion-menu ion-header .user-logo img{max-width:120px;max-height:var(--avatar-size, 60px);width:auto}ion-menu ion-header .username{padding-top:0;margin-top:0;margin-bottom:0;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}ion-menu ion-header button[mat-button]{padding:0;width:100%;justify-content:flex-start;text-align:start!important;color:var(--ion-item-text-color)}ion-menu ion-header button[mat-button].selected{background-color:var(--ion-item-background-selected);color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list{min-height:100%;display:flex;flex-direction:column;justify-content:flex-start}ion-menu ion-content ion-list ion-menu-toggle.flex-spacer{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end}ion-menu ion-content ion-list ion-item.primary{--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint)}ion-menu ion-content ion-list ion-item.secondary{--ion-item-icon-color: var(--ion-color-secondary-tint);--ion-item-text-color: var(--ion-color-secondary-tint)}ion-menu ion-content ion-list ion-item.tertiary{--ion-item-icon-color: var(--ion-color-tertiary-tint);--ion-item-text-color: var(--ion-color-tertiary-tint)}ion-menu ion-content ion-list ion-item.danger{--ion-item-icon-color: var(--ion-color-danger-tint);--ion-item-text-color: var(--ion-color-danger-tint)}ion-menu ion-content ion-list ion-item.medium{--ion-item-icon-color: var(--ion-color-medium-shade);--ion-item-text-color: var(--ion-color-medium-shade)}ion-menu ion-content ion-list ion-item.dark{--ion-item-icon-color: var(--ion-color-dark-tint);--ion-item-text-color: var(--ion-color-dark-tint)}ion-menu ion-content ion-list ion-item mat-icon,ion-menu ion-content ion-list ion-item ion-icon{color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item ion-text,ion-menu ion-content ion-list ion-item ion-label{color:var(--ion-item-text-color)!important}ion-menu ion-content ion-list ion-item span{margin-left:var(--menu-item-margin)}ion-menu ion-content ion-list ion-item.selected{background-color:var(--ion-item-background-selected)!important;--color-hover: var(--ion-item-background-selected) !important}ion-menu ion-content ion-list ion-item.selected mat-icon,ion-menu ion-content ion-list ion-item.selected ion-icon{color:var(--ion-item-icon-color-selected)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item.selected ion-text,ion-menu ion-content ion-list ion-item.selected ion-label{color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list ion-item.selected:hover{--color-hover: var(--ion-item-background-selected) !important;--ion-item-icon-color-selected: var(--ion-item-icon-color) !important;--ion-item-text-color-selected: var(--ion-item-text-color) !important}ion-menu ion-content ion-list ion-item.selected.menu-item-sub{background-color:var(--menu-item-background-selected-sub)!important}ion-menu ion-content ion-list ion-item.menu-item-sub{--min-height: 34px;--padding-vertical: 8px;--padding-start: 8px;--padding-horizontal: 8px;--inner-border-width: var(--menu-item-border-width-sub);font-size:.8em;overflow:unset}ion-menu ion-content ion-list ion-item.menu-item-sub ion-icon[slot],ion-menu ion-content ion-list ion-item.menu-item-sub mat-icon[slot]{font-size:calc(var(--min-height) / 2 - 1px);height:calc(var(--min-height) / 2 - 1px);margin-top:calc(var(--padding-vertical) + 2px);margin-inline-end:calc(var(--padding-horizontal) + 2px);margin-bottom:calc(var(--padding-vertical) + 2px)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-label{margin-top:var(--padding-vertical);margin-bottom:var(--padding-vertical)}ion-menu ion-content ion-list ion-item.menu-item-sub .item-inner{border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);box-shadow:var(--inner-box-shadow)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end] mat-icon[slot=icon-only],ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end] ion-icon[slot=icon-only]{margin:0}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end].visible-hover{opacity:0;display:none;animation:fadeinout 1s linear 1 backwards}ion-menu ion-content ion-list ion-item.menu-item-sub:hover ion-button.visible-hover{opacity:1;display:flex}ion-menu ion-content ion-list .sub-menu-container{margin-inline-start:var(--menu-item-margin-start-sub, 16px)}ion-menu ion-footer{display:block!important}ion-menu ion-footer ion-toolbar ion-title{cursor:pointer;font-size:12pt;font-weight:400;text-align:center;padding:0 8px}ion-menu ion-footer ion-toolbar ion-button{--width: 40px}@media screen and (max-width: 767px){ion-menu ion-footer{display:none!important;visibility:hidden!important}}@media screen and (min-width: 768px){ion-menu ion-scroll{overflow-y:auto!important}ion-menu .user-avatar{font-size:var(--avatar-size, 80px)!important;line-height:var(--avatar-size, 80px);height:var(--avatar-size, 80px)!important;width:var(--avatar-size, 80px)!important}ion-menu .user-logo img{max-height:var(--avatar-size, 80px)}}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$1.IonMenu, selector: "ion-menu", inputs: ["contentId", "disabled", "maxEdgeStart", "menuId", "side", "swipeGesture", "type"] }, { kind: "component", type: i2$1.IonMenuToggle, selector: "ion-menu-toggle", inputs: ["autoHide", "menu"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$1.IonSplitPane, selector: "ion-split-pane", inputs: ["contentId", "disabled", "when"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i2$1.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]" }, { kind: "directive", type: i12$1.RxFor, selector: "[rxFor][rxForOf]", inputs: ["rxForOf", "rxForTemplate", "rxForStrategy", "rxForParent", "rxForPatchZone", "rxForTrackBy", "rxForRenderCallback"] }, { kind: "directive", type: i8$1.RxIf, selector: "[rxIf]", inputs: ["rxIf", "rxIfStrategy", "rxIfElse", "rxIfThen", "rxIfSuspense", "rxIfComplete", "rxIfError", "rxIfContextTrigger", "rxIfNextTrigger", "rxIfSuspenseTrigger", "rxIfErrorTrigger", "rxIfCompleteTrigger", "rxIfParent", "rxIfPatchZone", "rxIfRenderCallback"] }, { kind: "directive", type: i9$1.RxLet, selector: "[rxLet]", inputs: ["rxLet", "rxLetStrategy", "rxLetComplete", "rxLetError", "rxLetSuspense", "rxLetContextTrigger", "rxLetCompleteTrigger", "rxLetErrorTrigger", "rxLetSuspenseTrigger", "rxLetNextTrigger", "rxLetRenderCallback", "rxLetParent", "rxLetPatchZone"], outputs: ["rendered"] }, { kind: "component", type: i10$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i1$6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$6.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], animations: [fadeInSlowAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MenuComponent, selector: "app-menu", inputs: { id: "id", menuId: "menuId", side: "side", contentId: "contentId", logo: "logo", appName: "appName", rxStrategy: "rxStrategy", appVersion: "appVersion" }, viewQueries: [{ propertyName: "splitPane", first: true, predicate: ["splitPane"], descendants: true, static: true }], ngImport: i0, template: "<ion-split-pane #splitPane [contentId]=\"contentId\" (swiperight)=\"onSwipeRight($event)\">\n  <ion-menu [id]=\"id\" [menuId]=\"menuId\" [contentId]=\"contentId\">\n    <ion-header>\n      <ion-toolbar *ngIf=\"!loading && isLogin; else notLogin\" @fadeInSlowAnimation class=\"user-toolbar\">\n        <ion-grid>\n          <ion-row>\n            <ion-col size=\"4\">\n              <button\n                type=\"button\"\n                mat-flat-button\n                class=\"user-avatar\"\n                [class.primary]=\"!accountAvatar\"\n                [style.background-image]=\"'url(' + (accountAvatar || './assets/img/person.png') + ')'\"\n                [routerLink]=\"['/account']\"\n                routerDirection=\"root\"\n                routerLinkActive=\"ion-color-primary\"\n                (click)=\"close()\"\n                [title]=\"'MENU.BTN_MY_ACCOUNT' | translate\"\n              ></button>\n            </ion-col>\n            <ion-col size=\"8\" class=\"user-logo\">\n              <img\n                *ngIf=\"logo; else noLogo\"\n                [attr.src]=\"logo\"\n                [title]=\"'APP_NAME' | translate: { appName: appName }\"\n                alt=\"Logo\"\n                width=\"108px\"\n              />\n              <ng-template #noLogo>\n                <span style=\"width: 108px\">{{ appName }}</span>\n              </ng-template>\n            </ion-col>\n          </ion-row>\n          <ion-row class=\"ion-no-padding\">\n            <ion-col>\n              <button\n                mat-button\n                type=\"button\"\n                [routerLink]=\"['/account']\"\n                routerDirection=\"root\"\n                routerLinkActive=\"selected\"\n                (click)=\"close()\"\n                [title]=\"'MENU.BTN_MY_ACCOUNT' | translate\"\n              >\n                <ion-label class=\"ion-text-wrap ion-text-start\">\n                  <h3 class=\"no-margin username\">\n                    <b>{{ accountName }}</b>\n                  </h3>\n                  <h4>{{ accountEmail }}</h4>\n                </ion-label>\n              </button>\n            </ion-col>\n\n            <!-- Insertion headerBottomRight -->\n            <ion-col size=\"auto\">\n              <ng-container *ngTemplateOutlet=\"headerBottomRight\"></ng-container>\n            </ion-col>\n          </ion-row>\n        </ion-grid>\n      </ion-toolbar>\n\n      <!-- User not logged -->\n      <ng-template #notLogin>\n        <mat-toolbar\n          class=\"ion-padding\"\n          *ngIf=\"!loading\"\n          style=\"height: unset; display: block; margin: auto; text-align: center\"\n        >\n          <img\n            *ngIf=\"logo\"\n            [attr.src]=\"logo\"\n            [title]=\"'APP_NAME' | translate: { appName: appName }\"\n            width=\"150px;\"\n            alt=\"logo\"\n          />\n          <span *ngIf=\"!logo\" style=\"width: 150px\">{{ appName }}</span>\n        </mat-toolbar>\n      </ng-template>\n    </ion-header>\n\n    <ion-content [class.has-user-header]=\"isLogin\">\n      <!-- will close the menu, after a click, in mobile -->\n      <ion-menu-toggle auto-hide=\"false\">\n        <ion-list lines=\"none\" *ngIf=\"!loading\">\n          <ng-container *rxFor=\"let item of menuService.dataSubject; strategy: rxStrategy; trackBy: trackByFn\">\n            <ng-container *ngTemplateOutlet=\"menuItem; context: { $implicit: item, level: 0 }\"></ng-container>\n          </ng-container>\n        </ion-list>\n      </ion-menu-toggle>\n    </ion-content>\n\n    <ion-footer class=\"hidden-xs hidden-sm\">\n      <ion-toolbar>\n        <ion-buttons slot=\"start\">\n          <ion-button mat-icon-button color=\"accent\" (click)=\"menuService.openAboutModal()\">\n            <mat-icon slot=\"icon-only\">help_outline</mat-icon>\n          </ion-button>\n        </ion-buttons>\n\n        <ion-title (click)=\"menuService.openAboutModal()\" color=\"medium\">\n          {{ 'MENU.FOOTER_VERSION_ABOUT' | translate: { version: appVersion } }}\n        </ion-title>\n\n        <ion-buttons slot=\"end\">\n          <button\n            mat-icon-button\n            color=\"accent\"\n            (click)=\"toggleSplitPaneShow($event)\"\n            class=\"hidden-xs hidden-sm hidden-md\"\n            [title]=\"(splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') | translate\"\n          >\n            <mat-icon>\n              <span>{{ splitPane.when ? '&#xab;' : '&#xbb;' }}</span>\n            </mat-icon>\n          </button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-footer>\n  </ion-menu>\n\n  <ng-content></ng-content>\n</ion-split-pane>\n\n<ng-template #headerBottomRight>\n  <ng-content select=\"[headerBottomRight]\"></ng-content>\n</ng-template>\n\n<ng-template #menuItem let-item let-level=\"level\">\n  @if (item.divider) {\n    <!-- divider -->\n    <ion-item-divider class=\"{{ item.cssClass }} {{ item.color }}\" @fadeInSlowAnimation>\n      <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n      <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{ item.matIcon }}</mat-icon>\n      <ion-label *ngIf=\"item.cssClass !== 'flex-spacer'\">\n        <span *rxIf=\"item.$title; let title; else: skeletonText\" [innerHTML]=\"title | translate\"></span>\n      </ion-label>\n    </ion-item-divider>\n  } @else if (item.path && !item.action) {\n    <!-- tappable link -->\n    <ion-item\n      @fadeInSlowAnimation\n      class=\"{{ item.cssClass }} {{ item.color }}\"\n      [class.menu-item-sub]=\"level !== 0\"\n      tappable\n      [routerLink]=\"item.path\"\n      [queryParams]=\"item.pathParams\"\n      routerDirection=\"root\"\n      routerLinkActive=\"selected\"\n      [routerLinkActiveOptions]=\"{\n        paths: item.path === '/' || level !== 0 ? 'exact' : 'subset',\n        queryParams: item.pathParams?.tab || level === 0 ? 'subset' : 'exact',\n        matrixParams: 'exact',\n        fragment: 'ignored',\n      }\"\n    >\n      @if (item.icon) {\n        <ion-icon slot=\"start\" [name]=\"item.icon\"></ion-icon>\n      } @else if (item.matIcon) {\n        <mat-icon slot=\"start\">{{ item.matIcon }}</mat-icon>\n      }\n      <ion-label *rxLet=\"item.$title; let title\">\n        <span *ngIf=\"title; else skeletonText\" [innerHTML]=\"title | translate\"></span>\n        <!--<span *ngIf=\"_debug\"> {{item.id}}</span>-->\n      </ion-label>\n\n      <ion-badge *rxIf=\"item.$badge; let badge\" [color]=\"item.$badgeColor | push\">\n        {{badge}}\n      </ion-badge>\n\n      <!-- pin button -->\n      <ng-container *ngTemplateOutlet=\"pinButton; context: { $implicit: item, level: level }\"></ng-container>\n    </ion-item>\n  } @else if (item.action) {\n    <!-- action -->\n    <ion-item\n      @fadeInSlowAnimation\n      class=\"{{ item.cssClass }} {{ item.color }} text-1x\"\n      [class.menu-item-sub]=\"level !== 0\"\n      tappable\n      (click)=\"executeAction($event, item)\"\n    >\n      <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n      <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{ item.matIcon }}</mat-icon>\n      <ion-label>\n        <span *rxIf=\"item.$title; let title; else: skeletonText\" [innerHTML]=\"title | translate\"></span>\n        <!--<span *ngIf=\"_debug\"> {{item.id}}</span>-->\n      </ion-label>\n\n      <ion-badge *rxIf=\"item.$badge; let badge\" [color]=\"item.$badgeColor | push\">\n        {{badge}}\n      </ion-badge>\n\n      <!-- pin button -->\n      <ng-container *ngTemplateOutlet=\"pinButton; context: { $implicit: item, level: level }\"></ng-container>\n    </ion-item>\n  }\n\n  <!-- children -->\n  @if (item.$children) {\n    <div class=\"sub-menu-container\">\n      <ng-container *rxFor=\"let child of item.$children; strategy: rxStrategy; trackBy: trackByFn\">\n        <ng-container *ngTemplateOutlet=\"menuItem; context: { $implicit: child, level: level + 1 }\"></ng-container>\n      </ng-container>\n    </div>\n  }\n</ng-template>\n\n<ng-template #pinButton let-item let-level=\"level\">\n  <!-- pin button -->\n  @if (level && item.pinnable) {\n    <ion-button\n      slot=\"end\"\n      shape=\"round\"\n      fill=\"clear\"\n      size=\"small\"\n      [class.visible-hover]=\"!item.pinned\"\n      (click)=\"togglePinned($event, item)\"\n    >\n      <!--<mat-icon slot=\"icon-only\" [color]=\"item.pinned ? 'primary' : undefined\">push_pin</mat-icon>-->\n      <ion-icon slot=\"icon-only\" [name]=\"item.pinned ? 'pin' : 'pin-outline'\"></ion-icon>\n    </ion-button>\n  }\n</ng-template>\n\n<ng-template #skeletonText let-width let-animated>\n  <ion-skeleton-text [animated]=\"animated\" [style.width.%]=\"width || 60\"></ion-skeleton-text>\n</ng-template>\n", styles: [":host{--menu-item-margin: 0;--ion-item-background: transparent;--ion-item-divider-background: transparent;--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint);--ion-item-background-selected: var(--ion-color-secondary100);--ion-item-text-color-selected: var(--ion-color-primary);--ion-item-icon-color-selected: var(--ion-color-primary);--ion-item-text-color-disable: var(--ion-color-medium);--ion-item-icon-color-disable: var(--ion-color-medium);--menu-item-background-selected-sub: var(--ion-color-secondary50);--menu-item-border-width-sub: 0 0 1px 0;--menu-item-margin-start-sub: 16px}@keyframes fadeinout{0%{opacity:0;display:none}75%{opacity:0;display:none}to{opacity:1;display:flex}}ion-menu ion-header ion-text{color:var(--ion-color-primary)}ion-menu ion-header ion-toolbar.user-toolbar{--ion-toolbar-height: 128px}ion-menu ion-header .user-avatar{-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-repeat:no-repeat;background-position:center;background-color:var(--ion-color-secondary);border:solid 1px rgba(var(--ion-color-secondary-rgb),.5);overflow:hidden!important;font-size:var(--avatar-size, 60px)!important;line-height:var(--avatar-size, 60px);height:var(--avatar-size, 60px)!important;width:var(--avatar-size, 60px)!important;border-radius:50%;display:inline-block}ion-menu ion-header .user-avatar:hover{background-color:var(--ion-color-secondary-shade);border:solid 2px var(--ion-color-secondary-shade)}ion-menu ion-header .user-logo{text-align:right}ion-menu ion-header .user-logo img{max-width:120px;max-height:var(--avatar-size, 60px);width:auto}ion-menu ion-header .username{padding-top:0;margin-top:0;margin-bottom:0;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}ion-menu ion-header button[mat-button]{padding:0;width:100%;justify-content:flex-start;text-align:start!important;color:var(--ion-item-text-color)}ion-menu ion-header button[mat-button].selected{background-color:var(--ion-item-background-selected);color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list{min-height:100%;display:flex;flex-direction:column;justify-content:flex-start}ion-menu ion-content ion-list ion-menu-toggle.flex-spacer{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end}ion-menu ion-content ion-list ion-item.primary{--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint)}ion-menu ion-content ion-list ion-item.secondary{--ion-item-icon-color: var(--ion-color-secondary-tint);--ion-item-text-color: var(--ion-color-secondary-tint)}ion-menu ion-content ion-list ion-item.tertiary{--ion-item-icon-color: var(--ion-color-tertiary-tint);--ion-item-text-color: var(--ion-color-tertiary-tint)}ion-menu ion-content ion-list ion-item.danger{--ion-item-icon-color: var(--ion-color-danger-tint);--ion-item-text-color: var(--ion-color-danger-tint)}ion-menu ion-content ion-list ion-item.medium{--ion-item-icon-color: var(--ion-color-medium-shade);--ion-item-text-color: var(--ion-color-medium-shade)}ion-menu ion-content ion-list ion-item.dark{--ion-item-icon-color: var(--ion-color-dark-tint);--ion-item-text-color: var(--ion-color-dark-tint)}ion-menu ion-content ion-list ion-item mat-icon,ion-menu ion-content ion-list ion-item ion-icon{color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item ion-text,ion-menu ion-content ion-list ion-item ion-label{color:var(--ion-item-text-color)!important}ion-menu ion-content ion-list ion-item span{margin-left:var(--menu-item-margin)}ion-menu ion-content ion-list ion-item.selected{background-color:var(--ion-item-background-selected)!important;--color-hover: var(--ion-item-background-selected) !important}ion-menu ion-content ion-list ion-item.selected mat-icon,ion-menu ion-content ion-list ion-item.selected ion-icon{color:var(--ion-item-icon-color-selected)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item.selected ion-text,ion-menu ion-content ion-list ion-item.selected ion-label{color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list ion-item.selected:hover{--color-hover: var(--ion-item-background-selected) !important;--ion-item-icon-color-selected: var(--ion-item-icon-color) !important;--ion-item-text-color-selected: var(--ion-item-text-color) !important}ion-menu ion-content ion-list ion-item.selected.menu-item-sub{background-color:var(--menu-item-background-selected-sub)!important}ion-menu ion-content ion-list ion-item.menu-item-sub{--min-height: 34px;--padding-vertical: 8px;--padding-start: 8px;--padding-horizontal: 8px;--inner-border-width: var(--menu-item-border-width-sub);font-size:.8em;overflow:unset}ion-menu ion-content ion-list ion-item.menu-item-sub ion-icon[slot],ion-menu ion-content ion-list ion-item.menu-item-sub mat-icon[slot]{font-size:calc(var(--min-height) / 2 - 1px);height:calc(var(--min-height) / 2 - 1px);margin-top:calc(var(--padding-vertical) + 2px);margin-inline-end:calc(var(--padding-horizontal) + 2px);margin-bottom:calc(var(--padding-vertical) + 2px)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-label{margin-top:var(--padding-vertical);margin-bottom:var(--padding-vertical)}ion-menu ion-content ion-list ion-item.menu-item-sub .item-inner{border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);box-shadow:var(--inner-box-shadow)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end]{-webkit-margin-start:unset;margin-inline-start:unset}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end] mat-icon[slot=icon-only],ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end] ion-icon[slot=icon-only]{margin:0}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end].visible-hover{opacity:0;display:none;animation:fadeinout 1s linear 1 backwards}ion-menu ion-content ion-list ion-item.menu-item-sub:hover ion-button.visible-hover{opacity:1;display:flex}ion-menu ion-content ion-list .sub-menu-container{margin-inline-start:var(--menu-item-margin-start-sub, 16px)}ion-menu ion-footer{display:block!important}ion-menu ion-footer ion-toolbar ion-title{cursor:pointer;font-size:12pt;font-weight:400;text-align:center;padding:0 8px}ion-menu ion-footer ion-toolbar ion-button{--width: 40px}@media screen and (max-width: 767px){ion-menu ion-footer{display:none!important;visibility:hidden!important}}@media screen and (min-width: 768px){ion-menu ion-scroll{overflow-y:auto!important}ion-menu .user-avatar{font-size:var(--avatar-size, 80px)!important;line-height:var(--avatar-size, 80px);height:var(--avatar-size, 80px)!important;width:var(--avatar-size, 80px)!important}ion-menu .user-logo img{max-height:var(--avatar-size, 80px)}}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$1.IonMenu, selector: "ion-menu", inputs: ["contentId", "disabled", "maxEdgeStart", "menuId", "side", "swipeGesture", "type"] }, { kind: "component", type: i2$1.IonMenuToggle, selector: "ion-menu-toggle", inputs: ["autoHide", "menu"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$1.IonSplitPane, selector: "ion-split-pane", inputs: ["contentId", "disabled", "when"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i2$1.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]" }, { kind: "directive", type: i12$1.RxFor, selector: "[rxFor][rxForOf]", inputs: ["rxForOf", "rxForTemplate", "rxForStrategy", "rxForParent", "rxForPatchZone", "rxForTrackBy", "rxForRenderCallback"] }, { kind: "directive", type: i8$1.RxIf, selector: "[rxIf]", inputs: ["rxIf", "rxIfStrategy", "rxIfElse", "rxIfThen", "rxIfSuspense", "rxIfComplete", "rxIfError", "rxIfContextTrigger", "rxIfNextTrigger", "rxIfSuspenseTrigger", "rxIfErrorTrigger", "rxIfCompleteTrigger", "rxIfParent", "rxIfPatchZone", "rxIfRenderCallback"] }, { kind: "directive", type: i9$2.RxLet, selector: "[rxLet]", inputs: ["rxLet", "rxLetStrategy", "rxLetComplete", "rxLetError", "rxLetSuspense", "rxLetContextTrigger", "rxLetCompleteTrigger", "rxLetErrorTrigger", "rxLetSuspenseTrigger", "rxLetNextTrigger", "rxLetRenderCallback", "rxLetParent", "rxLetPatchZone"], outputs: ["rendered"] }, { kind: "component", type: i10$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i1$6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$6.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i19.RxPush, name: "push" }], animations: [fadeInSlowAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-menu', animations: [fadeInSlowAnimation], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-split-pane #splitPane [contentId]=\"contentId\" (swiperight)=\"onSwipeRight($event)\">\n  <ion-menu [id]=\"id\" [menuId]=\"menuId\" [contentId]=\"contentId\">\n    <ion-header>\n      <ion-toolbar *ngIf=\"!loading && isLogin; else notLogin\" @fadeInSlowAnimation class=\"user-toolbar\">\n        <ion-grid>\n          <ion-row>\n            <ion-col size=\"4\">\n              <button\n                type=\"button\"\n                mat-flat-button\n                class=\"user-avatar\"\n                [class.primary]=\"!accountAvatar\"\n                [style.background-image]=\"'url(' + (accountAvatar || './assets/img/person.png') + ')'\"\n                [routerLink]=\"['/account']\"\n                routerDirection=\"root\"\n                routerLinkActive=\"ion-color-primary\"\n                (click)=\"close()\"\n                [title]=\"'MENU.BTN_MY_ACCOUNT' | translate\"\n              ></button>\n            </ion-col>\n            <ion-col size=\"8\" class=\"user-logo\">\n              <img\n                *ngIf=\"logo; else noLogo\"\n                [attr.src]=\"logo\"\n                [title]=\"'APP_NAME' | translate: { appName: appName }\"\n                alt=\"Logo\"\n                width=\"108px\"\n              />\n              <ng-template #noLogo>\n                <span style=\"width: 108px\">{{ appName }}</span>\n              </ng-template>\n            </ion-col>\n          </ion-row>\n          <ion-row class=\"ion-no-padding\">\n            <ion-col>\n              <button\n                mat-button\n                type=\"button\"\n                [routerLink]=\"['/account']\"\n                routerDirection=\"root\"\n                routerLinkActive=\"selected\"\n                (click)=\"close()\"\n                [title]=\"'MENU.BTN_MY_ACCOUNT' | translate\"\n              >\n                <ion-label class=\"ion-text-wrap ion-text-start\">\n                  <h3 class=\"no-margin username\">\n                    <b>{{ accountName }}</b>\n                  </h3>\n                  <h4>{{ accountEmail }}</h4>\n                </ion-label>\n              </button>\n            </ion-col>\n\n            <!-- Insertion headerBottomRight -->\n            <ion-col size=\"auto\">\n              <ng-container *ngTemplateOutlet=\"headerBottomRight\"></ng-container>\n            </ion-col>\n          </ion-row>\n        </ion-grid>\n      </ion-toolbar>\n\n      <!-- User not logged -->\n      <ng-template #notLogin>\n        <mat-toolbar\n          class=\"ion-padding\"\n          *ngIf=\"!loading\"\n          style=\"height: unset; display: block; margin: auto; text-align: center\"\n        >\n          <img\n            *ngIf=\"logo\"\n            [attr.src]=\"logo\"\n            [title]=\"'APP_NAME' | translate: { appName: appName }\"\n            width=\"150px;\"\n            alt=\"logo\"\n          />\n          <span *ngIf=\"!logo\" style=\"width: 150px\">{{ appName }}</span>\n        </mat-toolbar>\n      </ng-template>\n    </ion-header>\n\n    <ion-content [class.has-user-header]=\"isLogin\">\n      <!-- will close the menu, after a click, in mobile -->\n      <ion-menu-toggle auto-hide=\"false\">\n        <ion-list lines=\"none\" *ngIf=\"!loading\">\n          <ng-container *rxFor=\"let item of menuService.dataSubject; strategy: rxStrategy; trackBy: trackByFn\">\n            <ng-container *ngTemplateOutlet=\"menuItem; context: { $implicit: item, level: 0 }\"></ng-container>\n          </ng-container>\n        </ion-list>\n      </ion-menu-toggle>\n    </ion-content>\n\n    <ion-footer class=\"hidden-xs hidden-sm\">\n      <ion-toolbar>\n        <ion-buttons slot=\"start\">\n          <ion-button mat-icon-button color=\"accent\" (click)=\"menuService.openAboutModal()\">\n            <mat-icon slot=\"icon-only\">help_outline</mat-icon>\n          </ion-button>\n        </ion-buttons>\n\n        <ion-title (click)=\"menuService.openAboutModal()\" color=\"medium\">\n          {{ 'MENU.FOOTER_VERSION_ABOUT' | translate: { version: appVersion } }}\n        </ion-title>\n\n        <ion-buttons slot=\"end\">\n          <button\n            mat-icon-button\n            color=\"accent\"\n            (click)=\"toggleSplitPaneShow($event)\"\n            class=\"hidden-xs hidden-sm hidden-md\"\n            [title]=\"(splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') | translate\"\n          >\n            <mat-icon>\n              <span>{{ splitPane.when ? '&#xab;' : '&#xbb;' }}</span>\n            </mat-icon>\n          </button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-footer>\n  </ion-menu>\n\n  <ng-content></ng-content>\n</ion-split-pane>\n\n<ng-template #headerBottomRight>\n  <ng-content select=\"[headerBottomRight]\"></ng-content>\n</ng-template>\n\n<ng-template #menuItem let-item let-level=\"level\">\n  @if (item.divider) {\n    <!-- divider -->\n    <ion-item-divider class=\"{{ item.cssClass }} {{ item.color }}\" @fadeInSlowAnimation>\n      <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n      <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{ item.matIcon }}</mat-icon>\n      <ion-label *ngIf=\"item.cssClass !== 'flex-spacer'\">\n        <span *rxIf=\"item.$title; let title; else: skeletonText\" [innerHTML]=\"title | translate\"></span>\n      </ion-label>\n    </ion-item-divider>\n  } @else if (item.path && !item.action) {\n    <!-- tappable link -->\n    <ion-item\n      @fadeInSlowAnimation\n      class=\"{{ item.cssClass }} {{ item.color }}\"\n      [class.menu-item-sub]=\"level !== 0\"\n      tappable\n      [routerLink]=\"item.path\"\n      [queryParams]=\"item.pathParams\"\n      routerDirection=\"root\"\n      routerLinkActive=\"selected\"\n      [routerLinkActiveOptions]=\"{\n        paths: item.path === '/' || level !== 0 ? 'exact' : 'subset',\n        queryParams: item.pathParams?.tab || level === 0 ? 'subset' : 'exact',\n        matrixParams: 'exact',\n        fragment: 'ignored',\n      }\"\n    >\n      @if (item.icon) {\n        <ion-icon slot=\"start\" [name]=\"item.icon\"></ion-icon>\n      } @else if (item.matIcon) {\n        <mat-icon slot=\"start\">{{ item.matIcon }}</mat-icon>\n      }\n      <ion-label *rxLet=\"item.$title; let title\">\n        <span *ngIf=\"title; else skeletonText\" [innerHTML]=\"title | translate\"></span>\n        <!--<span *ngIf=\"_debug\"> {{item.id}}</span>-->\n      </ion-label>\n\n      <!-- pin button -->\n      <ng-container *ngTemplateOutlet=\"pinButton; context: { $implicit: item, level: level }\"></ng-container>\n    </ion-item>\n  } @else if (item.action) {\n    <!-- action -->\n    <ion-item\n      @fadeInSlowAnimation\n      class=\"{{ item.cssClass }} {{ item.color }} text-1x\"\n      [class.menu-item-sub]=\"level !== 0\"\n      tappable\n      (click)=\"executeAction($event, item)\"\n    >\n      <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n      <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{ item.matIcon }}</mat-icon>\n      <ion-label>\n        <span *rxIf=\"item.$title; let title; else: skeletonText\" [innerHTML]=\"title | translate\"></span>\n        <!--<span *ngIf=\"_debug\"> {{item.id}}</span>-->\n      </ion-label>\n\n      <!-- pin button -->\n      <ng-container *ngTemplateOutlet=\"pinButton; context: { $implicit: item, level: level }\"></ng-container>\n    </ion-item>\n  }\n\n  <!-- children -->\n  @if (item.$children) {\n    <div class=\"sub-menu-container\">\n      <ng-container *rxFor=\"let child of item.$children; strategy: rxStrategy; trackBy: trackByFn\">\n        <ng-container *ngTemplateOutlet=\"menuItem; context: { $implicit: child, level: level + 1 }\"></ng-container>\n      </ng-container>\n    </div>\n  }\n</ng-template>\n\n<ng-template #pinButton let-item let-level=\"level\">\n  <!-- pin button -->\n  @if (level && item.pinnable) {\n    <ion-button\n      slot=\"end\"\n      shape=\"round\"\n      fill=\"clear\"\n      size=\"small\"\n      [class.visible-hover]=\"!item.pinned\"\n      (click)=\"togglePinned($event, item)\"\n    >\n      <!--<mat-icon slot=\"icon-only\" [color]=\"item.pinned ? 'primary' : undefined\">push_pin</mat-icon>-->\n      <ion-icon slot=\"icon-only\" [name]=\"item.pinned ? 'pin' : 'pin-outline'\"></ion-icon>\n    </ion-button>\n  }\n</ng-template>\n\n<ng-template #skeletonText let-width let-animated>\n  <ion-skeleton-text [animated]=\"animated\" [style.width.%]=\"width || 60\"></ion-skeleton-text>\n</ng-template>\n", styles: [":host{--menu-item-margin: 0;--ion-item-background: transparent;--ion-item-divider-background: transparent;--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint);--ion-item-background-selected: var(--ion-color-secondary100);--ion-item-text-color-selected: var(--ion-color-primary);--ion-item-icon-color-selected: var(--ion-color-primary);--ion-item-text-color-disable: var(--ion-color-medium);--ion-item-icon-color-disable: var(--ion-color-medium);--menu-item-background-selected-sub: var(--ion-color-secondary50);--menu-item-border-width-sub: 0 0 1px 0;--menu-item-margin-start-sub: 16px}@keyframes fadeinout{0%{opacity:0;display:none}75%{opacity:0;display:none}to{opacity:1;display:flex}}ion-menu ion-header ion-text{color:var(--ion-color-primary)}ion-menu ion-header ion-toolbar.user-toolbar{--ion-toolbar-height: 128px}ion-menu ion-header .user-avatar{-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-repeat:no-repeat;background-position:center;background-color:var(--ion-color-secondary);border:solid 1px rgba(var(--ion-color-secondary-rgb),.5);overflow:hidden!important;font-size:var(--avatar-size, 60px)!important;line-height:var(--avatar-size, 60px);height:var(--avatar-size, 60px)!important;width:var(--avatar-size, 60px)!important;border-radius:50%;display:inline-block}ion-menu ion-header .user-avatar:hover{background-color:var(--ion-color-secondary-shade);border:solid 2px var(--ion-color-secondary-shade)}ion-menu ion-header .user-logo{text-align:right}ion-menu ion-header .user-logo img{max-width:120px;max-height:var(--avatar-size, 60px);width:auto}ion-menu ion-header .username{padding-top:0;margin-top:0;margin-bottom:0;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}ion-menu ion-header button[mat-button]{padding:0;width:100%;justify-content:flex-start;text-align:start!important;color:var(--ion-item-text-color)}ion-menu ion-header button[mat-button].selected{background-color:var(--ion-item-background-selected);color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list{min-height:100%;display:flex;flex-direction:column;justify-content:flex-start}ion-menu ion-content ion-list ion-menu-toggle.flex-spacer{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end}ion-menu ion-content ion-list ion-item.primary{--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint)}ion-menu ion-content ion-list ion-item.secondary{--ion-item-icon-color: var(--ion-color-secondary-tint);--ion-item-text-color: var(--ion-color-secondary-tint)}ion-menu ion-content ion-list ion-item.tertiary{--ion-item-icon-color: var(--ion-color-tertiary-tint);--ion-item-text-color: var(--ion-color-tertiary-tint)}ion-menu ion-content ion-list ion-item.danger{--ion-item-icon-color: var(--ion-color-danger-tint);--ion-item-text-color: var(--ion-color-danger-tint)}ion-menu ion-content ion-list ion-item.medium{--ion-item-icon-color: var(--ion-color-medium-shade);--ion-item-text-color: var(--ion-color-medium-shade)}ion-menu ion-content ion-list ion-item.dark{--ion-item-icon-color: var(--ion-color-dark-tint);--ion-item-text-color: var(--ion-color-dark-tint)}ion-menu ion-content ion-list ion-item mat-icon,ion-menu ion-content ion-list ion-item ion-icon{color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item ion-text,ion-menu ion-content ion-list ion-item ion-label{color:var(--ion-item-text-color)!important}ion-menu ion-content ion-list ion-item span{margin-left:var(--menu-item-margin)}ion-menu ion-content ion-list ion-item.selected{background-color:var(--ion-item-background-selected)!important;--color-hover: var(--ion-item-background-selected) !important}ion-menu ion-content ion-list ion-item.selected mat-icon,ion-menu ion-content ion-list ion-item.selected ion-icon{color:var(--ion-item-icon-color-selected)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item.selected ion-text,ion-menu ion-content ion-list ion-item.selected ion-label{color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list ion-item.selected:hover{--color-hover: var(--ion-item-background-selected) !important;--ion-item-icon-color-selected: var(--ion-item-icon-color) !important;--ion-item-text-color-selected: var(--ion-item-text-color) !important}ion-menu ion-content ion-list ion-item.selected.menu-item-sub{background-color:var(--menu-item-background-selected-sub)!important}ion-menu ion-content ion-list ion-item.menu-item-sub{--min-height: 34px;--padding-vertical: 8px;--padding-start: 8px;--padding-horizontal: 8px;--inner-border-width: var(--menu-item-border-width-sub);font-size:.8em;overflow:unset}ion-menu ion-content ion-list ion-item.menu-item-sub ion-icon[slot],ion-menu ion-content ion-list ion-item.menu-item-sub mat-icon[slot]{font-size:calc(var(--min-height) / 2 - 1px);height:calc(var(--min-height) / 2 - 1px);margin-top:calc(var(--padding-vertical) + 2px);margin-inline-end:calc(var(--padding-horizontal) + 2px);margin-bottom:calc(var(--padding-vertical) + 2px)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-label{margin-top:var(--padding-vertical);margin-bottom:var(--padding-vertical)}ion-menu ion-content ion-list ion-item.menu-item-sub .item-inner{border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);box-shadow:var(--inner-box-shadow)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end] mat-icon[slot=icon-only],ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end] ion-icon[slot=icon-only]{margin:0}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end].visible-hover{opacity:0;display:none;animation:fadeinout 1s linear 1 backwards}ion-menu ion-content ion-list ion-item.menu-item-sub:hover ion-button.visible-hover{opacity:1;display:flex}ion-menu ion-content ion-list .sub-menu-container{margin-inline-start:var(--menu-item-margin-start-sub, 16px)}ion-menu ion-footer{display:block!important}ion-menu ion-footer ion-toolbar ion-title{cursor:pointer;font-size:12pt;font-weight:400;text-align:center;padding:0 8px}ion-menu ion-footer ion-toolbar ion-button{--width: 40px}@media screen and (max-width: 767px){ion-menu ion-footer{display:none!important;visibility:hidden!important}}@media screen and (min-width: 768px){ion-menu ion-scroll{overflow-y:auto!important}ion-menu .user-avatar{font-size:var(--avatar-size, 80px)!important;line-height:var(--avatar-size, 80px);height:var(--avatar-size, 80px)!important;width:var(--avatar-size, 80px)!important}ion-menu .user-logo img{max-height:var(--avatar-size, 80px)}}\n"] }]
+            args: [{ selector: 'app-menu', animations: [fadeInSlowAnimation], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-split-pane #splitPane [contentId]=\"contentId\" (swiperight)=\"onSwipeRight($event)\">\n  <ion-menu [id]=\"id\" [menuId]=\"menuId\" [contentId]=\"contentId\">\n    <ion-header>\n      <ion-toolbar *ngIf=\"!loading && isLogin; else notLogin\" @fadeInSlowAnimation class=\"user-toolbar\">\n        <ion-grid>\n          <ion-row>\n            <ion-col size=\"4\">\n              <button\n                type=\"button\"\n                mat-flat-button\n                class=\"user-avatar\"\n                [class.primary]=\"!accountAvatar\"\n                [style.background-image]=\"'url(' + (accountAvatar || './assets/img/person.png') + ')'\"\n                [routerLink]=\"['/account']\"\n                routerDirection=\"root\"\n                routerLinkActive=\"ion-color-primary\"\n                (click)=\"close()\"\n                [title]=\"'MENU.BTN_MY_ACCOUNT' | translate\"\n              ></button>\n            </ion-col>\n            <ion-col size=\"8\" class=\"user-logo\">\n              <img\n                *ngIf=\"logo; else noLogo\"\n                [attr.src]=\"logo\"\n                [title]=\"'APP_NAME' | translate: { appName: appName }\"\n                alt=\"Logo\"\n                width=\"108px\"\n              />\n              <ng-template #noLogo>\n                <span style=\"width: 108px\">{{ appName }}</span>\n              </ng-template>\n            </ion-col>\n          </ion-row>\n          <ion-row class=\"ion-no-padding\">\n            <ion-col>\n              <button\n                mat-button\n                type=\"button\"\n                [routerLink]=\"['/account']\"\n                routerDirection=\"root\"\n                routerLinkActive=\"selected\"\n                (click)=\"close()\"\n                [title]=\"'MENU.BTN_MY_ACCOUNT' | translate\"\n              >\n                <ion-label class=\"ion-text-wrap ion-text-start\">\n                  <h3 class=\"no-margin username\">\n                    <b>{{ accountName }}</b>\n                  </h3>\n                  <h4>{{ accountEmail }}</h4>\n                </ion-label>\n              </button>\n            </ion-col>\n\n            <!-- Insertion headerBottomRight -->\n            <ion-col size=\"auto\">\n              <ng-container *ngTemplateOutlet=\"headerBottomRight\"></ng-container>\n            </ion-col>\n          </ion-row>\n        </ion-grid>\n      </ion-toolbar>\n\n      <!-- User not logged -->\n      <ng-template #notLogin>\n        <mat-toolbar\n          class=\"ion-padding\"\n          *ngIf=\"!loading\"\n          style=\"height: unset; display: block; margin: auto; text-align: center\"\n        >\n          <img\n            *ngIf=\"logo\"\n            [attr.src]=\"logo\"\n            [title]=\"'APP_NAME' | translate: { appName: appName }\"\n            width=\"150px;\"\n            alt=\"logo\"\n          />\n          <span *ngIf=\"!logo\" style=\"width: 150px\">{{ appName }}</span>\n        </mat-toolbar>\n      </ng-template>\n    </ion-header>\n\n    <ion-content [class.has-user-header]=\"isLogin\">\n      <!-- will close the menu, after a click, in mobile -->\n      <ion-menu-toggle auto-hide=\"false\">\n        <ion-list lines=\"none\" *ngIf=\"!loading\">\n          <ng-container *rxFor=\"let item of menuService.dataSubject; strategy: rxStrategy; trackBy: trackByFn\">\n            <ng-container *ngTemplateOutlet=\"menuItem; context: { $implicit: item, level: 0 }\"></ng-container>\n          </ng-container>\n        </ion-list>\n      </ion-menu-toggle>\n    </ion-content>\n\n    <ion-footer class=\"hidden-xs hidden-sm\">\n      <ion-toolbar>\n        <ion-buttons slot=\"start\">\n          <ion-button mat-icon-button color=\"accent\" (click)=\"menuService.openAboutModal()\">\n            <mat-icon slot=\"icon-only\">help_outline</mat-icon>\n          </ion-button>\n        </ion-buttons>\n\n        <ion-title (click)=\"menuService.openAboutModal()\" color=\"medium\">\n          {{ 'MENU.FOOTER_VERSION_ABOUT' | translate: { version: appVersion } }}\n        </ion-title>\n\n        <ion-buttons slot=\"end\">\n          <button\n            mat-icon-button\n            color=\"accent\"\n            (click)=\"toggleSplitPaneShow($event)\"\n            class=\"hidden-xs hidden-sm hidden-md\"\n            [title]=\"(splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') | translate\"\n          >\n            <mat-icon>\n              <span>{{ splitPane.when ? '&#xab;' : '&#xbb;' }}</span>\n            </mat-icon>\n          </button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-footer>\n  </ion-menu>\n\n  <ng-content></ng-content>\n</ion-split-pane>\n\n<ng-template #headerBottomRight>\n  <ng-content select=\"[headerBottomRight]\"></ng-content>\n</ng-template>\n\n<ng-template #menuItem let-item let-level=\"level\">\n  @if (item.divider) {\n    <!-- divider -->\n    <ion-item-divider class=\"{{ item.cssClass }} {{ item.color }}\" @fadeInSlowAnimation>\n      <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n      <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{ item.matIcon }}</mat-icon>\n      <ion-label *ngIf=\"item.cssClass !== 'flex-spacer'\">\n        <span *rxIf=\"item.$title; let title; else: skeletonText\" [innerHTML]=\"title | translate\"></span>\n      </ion-label>\n    </ion-item-divider>\n  } @else if (item.path && !item.action) {\n    <!-- tappable link -->\n    <ion-item\n      @fadeInSlowAnimation\n      class=\"{{ item.cssClass }} {{ item.color }}\"\n      [class.menu-item-sub]=\"level !== 0\"\n      tappable\n      [routerLink]=\"item.path\"\n      [queryParams]=\"item.pathParams\"\n      routerDirection=\"root\"\n      routerLinkActive=\"selected\"\n      [routerLinkActiveOptions]=\"{\n        paths: item.path === '/' || level !== 0 ? 'exact' : 'subset',\n        queryParams: item.pathParams?.tab || level === 0 ? 'subset' : 'exact',\n        matrixParams: 'exact',\n        fragment: 'ignored',\n      }\"\n    >\n      @if (item.icon) {\n        <ion-icon slot=\"start\" [name]=\"item.icon\"></ion-icon>\n      } @else if (item.matIcon) {\n        <mat-icon slot=\"start\">{{ item.matIcon }}</mat-icon>\n      }\n      <ion-label *rxLet=\"item.$title; let title\">\n        <span *ngIf=\"title; else skeletonText\" [innerHTML]=\"title | translate\"></span>\n        <!--<span *ngIf=\"_debug\"> {{item.id}}</span>-->\n      </ion-label>\n\n      <ion-badge *rxIf=\"item.$badge; let badge\" [color]=\"item.$badgeColor | push\">\n        {{badge}}\n      </ion-badge>\n\n      <!-- pin button -->\n      <ng-container *ngTemplateOutlet=\"pinButton; context: { $implicit: item, level: level }\"></ng-container>\n    </ion-item>\n  } @else if (item.action) {\n    <!-- action -->\n    <ion-item\n      @fadeInSlowAnimation\n      class=\"{{ item.cssClass }} {{ item.color }} text-1x\"\n      [class.menu-item-sub]=\"level !== 0\"\n      tappable\n      (click)=\"executeAction($event, item)\"\n    >\n      <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n      <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{ item.matIcon }}</mat-icon>\n      <ion-label>\n        <span *rxIf=\"item.$title; let title; else: skeletonText\" [innerHTML]=\"title | translate\"></span>\n        <!--<span *ngIf=\"_debug\"> {{item.id}}</span>-->\n      </ion-label>\n\n      <ion-badge *rxIf=\"item.$badge; let badge\" [color]=\"item.$badgeColor | push\">\n        {{badge}}\n      </ion-badge>\n\n      <!-- pin button -->\n      <ng-container *ngTemplateOutlet=\"pinButton; context: { $implicit: item, level: level }\"></ng-container>\n    </ion-item>\n  }\n\n  <!-- children -->\n  @if (item.$children) {\n    <div class=\"sub-menu-container\">\n      <ng-container *rxFor=\"let child of item.$children; strategy: rxStrategy; trackBy: trackByFn\">\n        <ng-container *ngTemplateOutlet=\"menuItem; context: { $implicit: child, level: level + 1 }\"></ng-container>\n      </ng-container>\n    </div>\n  }\n</ng-template>\n\n<ng-template #pinButton let-item let-level=\"level\">\n  <!-- pin button -->\n  @if (level && item.pinnable) {\n    <ion-button\n      slot=\"end\"\n      shape=\"round\"\n      fill=\"clear\"\n      size=\"small\"\n      [class.visible-hover]=\"!item.pinned\"\n      (click)=\"togglePinned($event, item)\"\n    >\n      <!--<mat-icon slot=\"icon-only\" [color]=\"item.pinned ? 'primary' : undefined\">push_pin</mat-icon>-->\n      <ion-icon slot=\"icon-only\" [name]=\"item.pinned ? 'pin' : 'pin-outline'\"></ion-icon>\n    </ion-button>\n  }\n</ng-template>\n\n<ng-template #skeletonText let-width let-animated>\n  <ion-skeleton-text [animated]=\"animated\" [style.width.%]=\"width || 60\"></ion-skeleton-text>\n</ng-template>\n", styles: [":host{--menu-item-margin: 0;--ion-item-background: transparent;--ion-item-divider-background: transparent;--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint);--ion-item-background-selected: var(--ion-color-secondary100);--ion-item-text-color-selected: var(--ion-color-primary);--ion-item-icon-color-selected: var(--ion-color-primary);--ion-item-text-color-disable: var(--ion-color-medium);--ion-item-icon-color-disable: var(--ion-color-medium);--menu-item-background-selected-sub: var(--ion-color-secondary50);--menu-item-border-width-sub: 0 0 1px 0;--menu-item-margin-start-sub: 16px}@keyframes fadeinout{0%{opacity:0;display:none}75%{opacity:0;display:none}to{opacity:1;display:flex}}ion-menu ion-header ion-text{color:var(--ion-color-primary)}ion-menu ion-header ion-toolbar.user-toolbar{--ion-toolbar-height: 128px}ion-menu ion-header .user-avatar{-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-repeat:no-repeat;background-position:center;background-color:var(--ion-color-secondary);border:solid 1px rgba(var(--ion-color-secondary-rgb),.5);overflow:hidden!important;font-size:var(--avatar-size, 60px)!important;line-height:var(--avatar-size, 60px);height:var(--avatar-size, 60px)!important;width:var(--avatar-size, 60px)!important;border-radius:50%;display:inline-block}ion-menu ion-header .user-avatar:hover{background-color:var(--ion-color-secondary-shade);border:solid 2px var(--ion-color-secondary-shade)}ion-menu ion-header .user-logo{text-align:right}ion-menu ion-header .user-logo img{max-width:120px;max-height:var(--avatar-size, 60px);width:auto}ion-menu ion-header .username{padding-top:0;margin-top:0;margin-bottom:0;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}ion-menu ion-header button[mat-button]{padding:0;width:100%;justify-content:flex-start;text-align:start!important;color:var(--ion-item-text-color)}ion-menu ion-header button[mat-button].selected{background-color:var(--ion-item-background-selected);color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list{min-height:100%;display:flex;flex-direction:column;justify-content:flex-start}ion-menu ion-content ion-list ion-menu-toggle.flex-spacer{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end}ion-menu ion-content ion-list ion-item.primary{--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint)}ion-menu ion-content ion-list ion-item.secondary{--ion-item-icon-color: var(--ion-color-secondary-tint);--ion-item-text-color: var(--ion-color-secondary-tint)}ion-menu ion-content ion-list ion-item.tertiary{--ion-item-icon-color: var(--ion-color-tertiary-tint);--ion-item-text-color: var(--ion-color-tertiary-tint)}ion-menu ion-content ion-list ion-item.danger{--ion-item-icon-color: var(--ion-color-danger-tint);--ion-item-text-color: var(--ion-color-danger-tint)}ion-menu ion-content ion-list ion-item.medium{--ion-item-icon-color: var(--ion-color-medium-shade);--ion-item-text-color: var(--ion-color-medium-shade)}ion-menu ion-content ion-list ion-item.dark{--ion-item-icon-color: var(--ion-color-dark-tint);--ion-item-text-color: var(--ion-color-dark-tint)}ion-menu ion-content ion-list ion-item mat-icon,ion-menu ion-content ion-list ion-item ion-icon{color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item ion-text,ion-menu ion-content ion-list ion-item ion-label{color:var(--ion-item-text-color)!important}ion-menu ion-content ion-list ion-item span{margin-left:var(--menu-item-margin)}ion-menu ion-content ion-list ion-item.selected{background-color:var(--ion-item-background-selected)!important;--color-hover: var(--ion-item-background-selected) !important}ion-menu ion-content ion-list ion-item.selected mat-icon,ion-menu ion-content ion-list ion-item.selected ion-icon{color:var(--ion-item-icon-color-selected)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item.selected ion-text,ion-menu ion-content ion-list ion-item.selected ion-label{color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list ion-item.selected:hover{--color-hover: var(--ion-item-background-selected) !important;--ion-item-icon-color-selected: var(--ion-item-icon-color) !important;--ion-item-text-color-selected: var(--ion-item-text-color) !important}ion-menu ion-content ion-list ion-item.selected.menu-item-sub{background-color:var(--menu-item-background-selected-sub)!important}ion-menu ion-content ion-list ion-item.menu-item-sub{--min-height: 34px;--padding-vertical: 8px;--padding-start: 8px;--padding-horizontal: 8px;--inner-border-width: var(--menu-item-border-width-sub);font-size:.8em;overflow:unset}ion-menu ion-content ion-list ion-item.menu-item-sub ion-icon[slot],ion-menu ion-content ion-list ion-item.menu-item-sub mat-icon[slot]{font-size:calc(var(--min-height) / 2 - 1px);height:calc(var(--min-height) / 2 - 1px);margin-top:calc(var(--padding-vertical) + 2px);margin-inline-end:calc(var(--padding-horizontal) + 2px);margin-bottom:calc(var(--padding-vertical) + 2px)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-label{margin-top:var(--padding-vertical);margin-bottom:var(--padding-vertical)}ion-menu ion-content ion-list ion-item.menu-item-sub .item-inner{border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);box-shadow:var(--inner-box-shadow)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end]{-webkit-margin-start:unset;margin-inline-start:unset}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end] mat-icon[slot=icon-only],ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end] ion-icon[slot=icon-only]{margin:0}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end].visible-hover{opacity:0;display:none;animation:fadeinout 1s linear 1 backwards}ion-menu ion-content ion-list ion-item.menu-item-sub:hover ion-button.visible-hover{opacity:1;display:flex}ion-menu ion-content ion-list .sub-menu-container{margin-inline-start:var(--menu-item-margin-start-sub, 16px)}ion-menu ion-footer{display:block!important}ion-menu ion-footer ion-toolbar ion-title{cursor:pointer;font-size:12pt;font-weight:400;text-align:center;padding:0 8px}ion-menu ion-footer ion-toolbar ion-button{--width: 40px}@media screen and (max-width: 767px){ion-menu ion-footer{display:none!important;visibility:hidden!important}}@media screen and (min-width: 768px){ion-menu ion-scroll{overflow-y:auto!important}ion-menu .user-avatar{font-size:var(--avatar-size, 80px)!important;line-height:var(--avatar-size, 80px);height:var(--avatar-size, 80px)!important;width:var(--avatar-size, 80px)!important}ion-menu .user-logo img{max-height:var(--avatar-size, 80px)}}\n"] }]
         }], ctorParameters: () => [{ type: AccountService }, { type: i2$1.NavController }, { type: i2$1.MenuController }, { type: i2$1.ModalController }, { type: i1$1.TranslateService }, { type: i0.ChangeDetectorRef }, { type: MenuService }, { type: i1$6.Router }, { type: Environment, decorators: [{
                     type: Inject,
                     args: [ENVIRONMENT]
@@ -31363,14 +31383,14 @@ class SubMenuTabDirective {
     tabGroup;
     tab;
     router;
+    _menuItem;
     label;
     disabled;
     parentPath;
     path;
     subMenuTitle;
+    subMenuBadge;
     subMenuIcon = null; // { icon: 'none' };
-    _menuItem;
-    _enable;
     constructor(menuService, tabGroup, tab, router) {
         this.menuService = menuService;
         this.tabGroup = tabGroup;
@@ -31383,7 +31403,7 @@ class SubMenuTabDirective {
             this._addToMenu();
     }
     ngOnChanges(changes) {
-        if (changes.disabled || changes.label || changes.subMenuTitle || changes.parentPath || changes.path) {
+        if (changes.disabled || changes.label || changes.subMenuTitle || changes.parentPath || changes.path || changes.subMenuBadge) {
             if (this.disabled) {
                 this._removeToMenu();
             }
@@ -31418,6 +31438,7 @@ class SubMenuTabDirective {
                 path: this.path,
                 pathParams: tabParams,
                 parentPath,
+                badge: this.subMenuBadge,
             });
         }
         // Update existing
@@ -31429,6 +31450,7 @@ class SubMenuTabDirective {
         // Update item (title and icon)
         if (this._menuItem) {
             this._menuItem.title = this.title;
+            this._menuItem.badge = this.subMenuBadge;
             if (this.subMenuIcon) {
                 Object.assign(this._menuItem, this.subMenuIcon);
             }
@@ -31438,15 +31460,15 @@ class SubMenuTabDirective {
     get title() {
         return isNotNil(this.subMenuTitle) ? this.subMenuTitle : this.label;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SubMenuTabDirective, deps: [{ token: MenuService }, { token: i7.MatTabGroup }, { token: i7.MatTab }, { token: i1$6.Router }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: SubMenuTabDirective, selector: "[appSubMenuTab]", inputs: { label: "label", disabled: "disabled", parentPath: "parentPath", path: "path", subMenuTitle: "subMenuTitle", subMenuIcon: "subMenuIcon" }, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SubMenuTabDirective, deps: [{ token: MenuService }, { token: i8.MatTabGroup }, { token: i8.MatTab }, { token: i1$6.Router }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: SubMenuTabDirective, selector: "[appSubMenuTab]", inputs: { label: "label", disabled: "disabled", parentPath: "parentPath", path: "path", subMenuTitle: "subMenuTitle", subMenuBadge: "subMenuBadge", subMenuIcon: "subMenuIcon" }, usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SubMenuTabDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[appSubMenuTab]',
                 }]
-        }], ctorParameters: () => [{ type: MenuService }, { type: i7.MatTabGroup }, { type: i7.MatTab }, { type: i1$6.Router }], propDecorators: { label: [{
+        }], ctorParameters: () => [{ type: MenuService }, { type: i8.MatTabGroup }, { type: i8.MatTab }, { type: i1$6.Router }], propDecorators: { label: [{
                 type: Input
             }], disabled: [{
                 type: Input
@@ -31456,6 +31478,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], subMenuTitle: [{
                 type: Input
+            }], subMenuBadge: [{
+                type: Input
             }], subMenuIcon: [{
                 type: Input
             }] } });
@@ -33836,7 +33860,7 @@ class UserEventNotificationIcon {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserEventNotificationIcon, deps: [{ token: APP_USER_EVENT_SERVICE, optional: true }, { token: AccountService }, { token: i2$1.PopoverController }, { token: i2$1.ModalController }, { token: LocalSettingsService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: UserEventNotificationIcon, selector: "app-user-event-notification-icon", inputs: { titleI18n: "titleI18n", disabled: "disabled", filter: "filter", autoHide: "autoHide", headerActions: "headerActions", footerActions: "footerActions", style: "style", color: "color", unreadColor: "unreadColor", fill: "fill", mobile: "mobile", listStyle: "listStyle", debug: "debug" }, outputs: { onShowList: "showList" }, ngImport: i0, template: "@let count = (count$ | async);\n@if (visible) {\n  @switch (style) {\n    <!-- mat icon button (e.g. for home toolbar) -->\n    @case ('mat-button') {\n      <button\n        mat-icon-button\n        [color]=\"(count && unreadColor || color) | matColor\"\n        [title]=\"titleI18n | translate\"\n        [disabled]=\"disabled\"\n        (click)=\"showList($event)\"\n      >\n        <mat-icon\n          [matBadge]=\"count | badgeNumber\"\n          [matBadgeHidden]=\"!count\"\n          matBadgeColor=\"accent\"\n          matBadgeSize=\"small\"\n          matBadgePosition=\"above after\"\n          aria-hidden=\"false\"\n        >\n          notifications\n        </mat-icon>\n      </button>\n    }\n\n    <!-- ion button (e.g. for home toolbar) -->\n    @case ('ion-button') {\n      <ion-button\n        [fill]=\"fill\"\n        [color]=\"count && unreadColor || color\"\n        [title]=\"titleI18n | translate\"\n        [disabled]=\"disabled\"\n        (click)=\"showList($event)\"\n      >\n        <mat-icon\n          slot=\"icon-only\"\n          [matBadge]=\"count | badgeNumber\"\n          [matBadgeHidden]=\"!count\"\n          matBadgeColor=\"accent\"\n          matBadgeSize=\"small\"\n          matBadgePosition=\"above after\"\n          aria-hidden=\"false\"\n        >\n          notifications\n        </mat-icon>\n      </ion-button>\n    }\n  }\n}\n", styles: ["ion-button{--overflow: visible}\n"], dependencies: [{ kind: "component", type: i2$1.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: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i8.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: MatColorPipe, name: "matColor" }, { kind: "pipe", type: BadgeNumberPipe, name: "badgeNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: UserEventNotificationIcon, selector: "app-user-event-notification-icon", inputs: { titleI18n: "titleI18n", disabled: "disabled", filter: "filter", autoHide: "autoHide", headerActions: "headerActions", footerActions: "footerActions", style: "style", color: "color", unreadColor: "unreadColor", fill: "fill", mobile: "mobile", listStyle: "listStyle", debug: "debug" }, outputs: { onShowList: "showList" }, ngImport: i0, template: "@let count = (count$ | async);\n@if (visible) {\n  @switch (style) {\n    <!-- mat icon button (e.g. for home toolbar) -->\n    @case ('mat-button') {\n      <button\n        mat-icon-button\n        [color]=\"(count && unreadColor || color) | matColor\"\n        [title]=\"titleI18n | translate\"\n        [disabled]=\"disabled\"\n        (click)=\"showList($event)\"\n      >\n        <mat-icon\n          [matBadge]=\"count | badgeNumber\"\n          [matBadgeHidden]=\"!count\"\n          matBadgeColor=\"accent\"\n          matBadgeSize=\"small\"\n          matBadgePosition=\"above after\"\n          aria-hidden=\"false\"\n        >\n          notifications\n        </mat-icon>\n      </button>\n    }\n\n    <!-- ion button (e.g. for home toolbar) -->\n    @case ('ion-button') {\n      <ion-button\n        [fill]=\"fill\"\n        [color]=\"count && unreadColor || color\"\n        [title]=\"titleI18n | translate\"\n        [disabled]=\"disabled\"\n        (click)=\"showList($event)\"\n      >\n        <mat-icon\n          slot=\"icon-only\"\n          [matBadge]=\"count | badgeNumber\"\n          [matBadgeHidden]=\"!count\"\n          matBadgeColor=\"accent\"\n          matBadgeSize=\"small\"\n          matBadgePosition=\"above after\"\n          aria-hidden=\"false\"\n        >\n          notifications\n        </mat-icon>\n      </ion-button>\n    }\n  }\n}\n", styles: ["ion-button{--overflow: visible}\n"], dependencies: [{ kind: "component", type: i2$1.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: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i9.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: MatColorPipe, name: "matColor" }, { kind: "pipe", type: BadgeNumberPipe, name: "badgeNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserEventNotificationIcon, decorators: [{
             type: Component,
@@ -35415,7 +35439,6 @@ class HomePage extends RxState {
     settings;
     environment;
     locales;
-    buttons;
     config;
     _subscription = new Subscription();
     _config;
@@ -35441,6 +35464,7 @@ class HomePage extends RxState {
     feedMaxAgeInMonths;
     feedMaxContentLength;
     hasScrollbar = false;
+    buttons;
     loading$ = this.select('loading');
     $partners = new BehaviorSubject(null);
     $filteredButtons = new BehaviorSubject(undefined);
@@ -35509,7 +35533,6 @@ class HomePage extends RxState {
         this.settings = settings;
         this.environment = environment;
         this.locales = locales;
-        this.buttons = buttons;
         this.config = config;
         this.set({
             loading: true,
@@ -35517,6 +35540,7 @@ class HomePage extends RxState {
             showSpinner: !this.platform.started,
             darkMode: this.settings.isDarkMode,
         });
+        this.buttons = (buttons || [])?.map(item => MenuItem.fromObject(item));
         this.mobile = this.platform.is('mobile');
         this.platform.ready().then(() => this.start());
         this.showAccountButton = environment.account?.showAccountButton ?? true;
@@ -35713,9 +35737,12 @@ class HomePage extends RxState {
             .map((item) => {
             // Replace title using properties
             if (isNotNilOrBlank(item.titleProperty) && this._config) {
-                const title = this._config.properties[item.titleProperty];
-                if (title)
-                    return { ...item, title }; // Create a copy, to keep the original item.title
+                const title = this._config.properties[item.titleProperty] ?? item.title;
+                if (item.title !== title) {
+                    // Clone before changing, to be able to restore the original title (e.g. if config property changed)
+                    item.clone();
+                    item.title = title;
+                }
             }
             return item;
         });
@@ -35768,11 +35795,11 @@ class HomePage extends RxState {
         this.cd.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HomePage, deps: [{ token: AccountService }, { token: i2$1.ModalController }, { token: i1$1.TranslateService }, { token: i2$1.ToastController }, { token: ConfigService }, { token: PlatformService }, { token: i0.ChangeDetectorRef }, { token: NetworkService }, { token: LocalSettingsService }, { token: ENVIRONMENT }, { token: APP_LOCALES }, { token: APP_HOME_BUTTONS, optional: true }, { token: APP_HOME_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: HomePage, selector: "app-page-home", viewQueries: [{ propertyName: "content", first: true, predicate: IonContent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar [canGoBack]=\"false\" visible-xs visible-sm visible-mobile>\n  <ion-buttons slot=\"end\">\n    @if (showNotificationIcon) {\n      <app-user-event-notification-icon [autoHide]=\"autoHideNotificationIcon\"></app-user-event-notification-icon>\n    }\n\n    <!-- dark mode (if allow by the environment token) -->\n    @if (settings.allowDarkMode) {\n      <ion-button (click)=\"toggleDarkMode()\">\n        <ion-icon slot=\"icon-only\" [name]=\"(darkMode$ | push) ? 'sunny' : 'moon'\"></ion-icon>\n      </ion-button>\n    }\n\n    <!-- Change locale button -->\n    <ion-button [matMenuTriggerFor]=\"localeMenu\">\n      <ion-icon slot=\"start\" name=\"language\"></ion-icon>\n    </ion-button>\n  </ion-buttons>\n</app-toolbar>\n\n<!-- Change locale menu -->\n<mat-menu #localeMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    @for (item of locales; track item.key) {\n      <button mat-menu-item (click)=\"changeLanguage(item.key)\">\n        <!--<mat-icon>{{ currentLocale === item.key ? 'checkmark' : undefined }}</mat-icon>-->\n        <ion-label>{{ item.value }}</ion-label>\n      </button>\n    }\n  </ng-template>\n</mat-menu>\n\n<ion-content [ngStyle]=\"contentStyle\" [class.has-scrollbar]=\"hasScrollbar\" no-padding-xs>\n  <!-- loading spinner -->\n  <div class=\"loading-page\" [class.cdk-visually-hidden]=\"!(loading$ | push)\">\n    @if (showSpinner) {\n      <div class=\"spinner\">\n        <p [innerHTML]=\"'COMMON.LOADING_DOTS' | translate\"></p>\n        <div class=\"sk-cube1 sk-cube\"></div>\n        <div class=\"sk-cube2 sk-cube\"></div>\n        <div class=\"sk-cube4 sk-cube\"></div>\n        <div class=\"sk-cube3 sk-cube\"></div>\n      </div>\n    }\n  </div>\n\n  <!-- Desktop: translucent top toolbar -->\n  @if (!mobile) {\n    <div class=\"hidden-xs hidden-sm\">\n      <ion-toolbar color=\"traansparent\" translucent>\n        <ion-buttons slot=\"start\">\n          <ion-menu-toggle>\n            <ion-button color=\"light\" fill=\"clear\">\n              <ion-icon slot=\"icon-only\" name=\"menu\"></ion-icon>\n            </ion-button>\n          </ion-menu-toggle>\n        </ion-buttons>\n\n        <ion-buttons slot=\"end\">\n          @if (showNotificationIcon) {\n            <app-user-event-notification-icon\n              [style]=\"'ion-button'\"\n              color=\"secondary\"\n              unreadColor=\"tertiary\"\n              fill=\"solid\"\n              [autoHide]=\"autoHideNotificationIcon\"\n            ></app-user-event-notification-icon>\n          }\n\n          <!-- dark mode (if allow by the environment token) -->\n          @if (settings.allowDarkMode) {\n            <ion-button\n              color=\"secondary\"\n              fill=\"solid\"\n              (click)=\"toggleDarkMode()\"\n              [title]=\"'HOME.BTN_DARK_MODE' | translate\"\n            >\n              <ion-icon slot=\"icon-only\" [name]=\"(darkMode$ | push) ? 'moon' : 'sunny'\"></ion-icon>\n            </ion-button>\n          }\n          <!-- change locale button -->\n          <ion-button\n            color=\"secondary\"\n            fill=\"solid\"\n            [matMenuTriggerFor]=\"localeMenu\"\n            [title]=\"'SETTINGS.LOCALE' | translate\"\n          >\n            <ion-icon slot=\"icon-only\" name=\"language\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </div>\n  }\n\n  <!-- Install (and upgrade) card -->\n  <app-install-upgrade-card [isLogin]=\"isLogin\" [showInstallButton]=\"true\"></app-install-upgrade-card>\n\n  @if (!(loading$ | push)) {\n    @let hasFeed = hasFeed$ | async;\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row>\n        <ion-col size=\"0\" [sizeXl]=\"hasFeed ? 3 : 0\"></ion-col>\n        <ion-col>\n          <!-- Welcome card -->\n          <ion-card class=\"main welcome ion-padding ion-text-center ion-align-self-center\" @fadeInAnimation>\n            <ion-card-header>\n              <ion-card-title class=\"ion-text-center\">\n                <span *ngIf=\"isWeb\" [innerHTML]=\"'HOME.WELCOME_WEB' | translate: { appName: appName }\"></span>\n                <span *ngIf=\"!isWeb\" [innerHTML]=\"'HOME.WELCOME_APP' | translate: { appName: appName }\"></span>\n              </ion-card-title>\n              <ion-card-subtitle [innerHTML]=\"description\"></ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content class=\"ion-no-padding\">\n              <ion-text color=\"primary\">\n                <img *ngIf=\"logo\" [attr.src]=\"logo\" alt=\"Logo\" />\n              </ion-text>\n              <!-- register help text -->\n              <ion-text *ngIf=\"!isLogin && canRegister\">\n                <br />\n                <span translate>HOME.REGISTER_HELP</span>\n              </ion-text>\n              <div class=\"ion-padding-top\">\n                <!-- If NOT login -->\n                <ng-container *ngIf=\"!isLogin; else loginButtons\">\n                  <ion-button *ngIf=\"canRegister\" expand=\"block\" color=\"tertiary\" (click)=\"register()\">\n                    <span translate>HOME.BTN_REGISTER</span>\n                  </ion-button>\n                  <ion-button expand=\"block\" color=\"light\" [routerLink]=\"['/']\" (click)=\"login()\">\n                    <span translate>AUTH.BTN_LOGIN</span>\n                  </ion-button>\n                </ng-container>\n\n                <!-- If user login -->\n                <ng-template #loginButtons>\n                  <!-- Feature buttons -->\n                  <ng-container *rxIf=\"$filteredButtons; let buttons\">\n                    <ng-container *ngFor=\"let item of buttons\">\n                      <ion-button\n                        *ngIf=\"item.path\"\n                        expand=\"block\"\n                        color=\"tertiary\"\n                        [class]=\"item.cssClass\"\n                        [routerLink]=\"item.path\"\n                        routerDirection=\"root\"\n                      >\n                        <ion-icon slot=\"start\" class=\"ion-float-start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n                        <mat-icon slot=\"start\" class=\"ion-float-start\" *ngIf=\"item.matIcon\">\n                          {{ item.matIcon }}\n                        </mat-icon>\n                        <ion-text>{{ 'HOME.BTN_DATA_ENTRY' | translate: { name: (item.title | translate) } }}</ion-text>\n                      </ion-button>\n\n                      <!-- divider -->\n                      <div *ngIf=\"!item.path && !item.action\" [class]=\"item.cssClass\">\n                        <ion-label translate>{{ item.title }}&nbsp;</ion-label>\n                      </div>\n                    </ng-container>\n\n                    <!--<p *ngIf=\"buttons.length\" class=\"visible-mobile\">&nbsp;</p>-->\n                  </ng-container>\n\n                  <ion-button *ngIf=\"showAccountButton\" expand=\"block\" color=\"secondary\" [routerLink]=\"['/account']\">\n                    <ion-icon slot=\"start\" class=\"ion-float-start\" name=\"person-circle\"></ion-icon>\n                    <ion-text translate>HOME.BTN_MY_ACCOUNT</ion-text>\n                  </ion-button>\n\n                  <p hidden-xs hidden-sm hidden-mobile>\n                    <ion-text\n                      [innerHTML]=\"'HOME.NOT_THIS_ACCOUNT_QUESTION' | translate: { displayName: accountName }\"\n                    ></ion-text>\n                    <br />\n                    <ion-text>\n                      <a href=\"#\" (click)=\"logout($event)\">\n                        <span translate>HOME.BTN_DISCONNECT</span>\n                      </a>\n                    </ion-text>\n                  </p>\n                </ng-template>\n              </div>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n        <ion-col size=\"0\" [sizeXl]=\"hasFeed ? 1 : 0\"></ion-col>\n        <ion-col [class.feed]=\"hasFeed\" [size]=\"hasFeed ? 12 : 0\" [sizeXl]=\"hasFeed ? 4 : 0\">\n          @if (showFeed) {\n            @if (mobile) {\n              <app-feed\n                #feed\n                shape=\"round\"\n                [urls]=\"feedUrls\"\n                [maxAgeInMonths]=\"feedMaxAgeInMonths\"\n                [maxContentLength]=\"feedMaxContentLength\"\n                (ngInit)=\"initFeed(feed)\"\n                @fadeInAnimation\n              ></app-feed>\n            } @else {\n              <app-feed\n                #feed\n                shape=\"round\"\n                [debug]=\"false\"\n                [urls]=\"feedUrls\"\n                [maxAgeInMonths]=\"feedMaxAgeInMonths\"\n                [maxContentLength]=\"feedMaxContentLength\"\n                (ngInit)=\"initFeed(feed)\"\n                @slideInAnimation\n                @fadeInAnimation\n              ></app-feed>\n            }\n          }\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n    <!-- Page history -->\n    @let pageHistory = isLogin && (pageHistory$ | push);\n    @if (pageHistory | isNotEmptyArray) {\n      <ion-grid class=\"history-container ion-align-self-center\">\n        <ion-row>\n          @for (page of pageHistory; track page.path) {\n            <ion-col size=\"12\" size-xl=\"\" class=\"ion-text-center\">\n              <ion-card class=\"ion-align-self-start ion-text-start\" @fadeInAnimation>\n                <ion-card-header class=\"ion-no-padding\">\n                  <!-- top bar -->\n                  <ion-card-subtitle>\n                    <button\n                      type=\"button\"\n                      tabindex=\"-1\"\n                      (click)=\"removePageHistory(page.path)\"\n                      mat-icon-button\n                      class=\"ion-float-start ion-no-margin close-button\"\n                    >\n                      <mat-icon>close</mat-icon>\n                    </button>\n                    <ion-label [innerHTML]=\"page.subtitle | translate\"></ion-label>\n                    <ion-text class=\"ion-float-end\" [title]=\"page.time | dateFormat: { time: true }\">\n                      <small>\n                        <ion-icon name=\"time-outline\"></ion-icon>\n                        &nbsp;{{ page.time | dateFromNow }}\n                      </small>\n                      &nbsp;\n                    </ion-text>\n                  </ion-card-subtitle>\n\n                  <!-- main page -->\n                  <ion-card-title class=\"ion-no-margin ion-no-padding\">\n                    <ion-item\n                      detail=\"true\"\n                      tappable\n                      class=\"text-1x\"\n                      [routerLink]=\"page.path\"\n                      routerDirection=\"root\"\n                      lines=\"none\"\n                    >\n                      <!-- page icon-->\n                      <ion-icon *ngIf=\"page.icon\" slot=\"start\" [name]=\"page.icon\"></ion-icon>\n                      <mat-icon *ngIf=\"page.matIcon\" slot=\"start\">{{ page.matIcon }}</mat-icon>\n\n                      <ion-label color=\"primary\" [innerHTML]=\"page.title\"></ion-label>\n                    </ion-item>\n                  </ion-card-title>\n                </ion-card-header>\n\n                <!-- children pages -->\n                @if (page.children | isNotEmptyArray) {\n                  <ion-card-content class=\"ion-no-padding ion-padding-start\">\n                    <ion-list class=\"ion-no-padding\">\n                      @for (childPage of page.children; track childPage.path) {\n                        <ion-item\n                          detail=\"true\"\n                          tappable\n                          class=\"text-1x\"\n                          [routerLink]=\"childPage.path\"\n                          routerDirection=\"root\"\n                        >\n                          <!-- page icon-->\n                          <ion-icon *ngIf=\"childPage.icon\" slot=\"start\" color=\"dark\" [name]=\"childPage.icon\"></ion-icon>\n                          <mat-icon *ngIf=\"childPage.matIcon\" slot=\"start\" color=\"dark\">\n                            {{ childPage.matIcon }}\n                          </mat-icon>\n\n                          <ion-label color=\"dark\" [innerHTML]=\"childPage.title\"></ion-label>\n                        </ion-item>\n                      }\n                    </ion-list>\n                  </ion-card-content>\n                }\n              </ion-card>\n            </ion-col>\n          }\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Bottom banner -->\n    @if (showPartnerBanner || showLegalInformation) {\n      <ion-grid\n        class=\"bottom-banner ion-text-center\"\n        [class.floating]=\"!mobile && (pageHistory | isEmptyArray)\"\n        @fadeInAnimation\n      >\n        <ion-row>\n          <!-- partners logos -->\n          @if (showPartnerBanner) {\n            <ion-col size=\"12\" [sizeLg]=\"partnerBannerSize\" class=\"ion-text-center\">\n              @if (showLegalInformation) {\n                <ion-list class=\"legal-info\">\n                  <ion-list-header>{{ 'HOME.PARTNERS' | translate }}</ion-list-header>\n                </ion-list>\n              }\n              <!-- partners -->\n              @for (item of $partners | async; track $index) {\n                <a href=\"{{ item.siteUrl }}\">\n                  <img class=\"logo\" src=\"{{ item.logo }}\" alt=\"{{ item.label }}\" [title]=\"item.label\" />\n                </a>\n              }\n            </ion-col>\n          }\n\n          <!-- legal information -->\n          @if (showLegalInformation) {\n            <ion-col size=\"12\" size-sm=\"6\" size-lg=\"4\" [class.left-border]=\"showPartnerBanner\">\n              <ion-list class=\"legal-info\">\n                <ion-list-header class=\"ion-text-left\">{{ 'HOME.LEGAL_INFORMATION' | translate }}</ion-list-header>\n                @for (item of legalInformation; track item.path) {\n                  <ion-item (click)=\"openMarkdownModal($event, item)\" lines=\"none\" [button]=\"true\">\n                    <ion-label>\n                      <p>\n                        {{ item.title | translate: item.titleArgs }}\n                      </p>\n                    </ion-label>\n                  </ion-item>\n                }\n              </ion-list>\n            </ion-col>\n            @if (showInstallLinks) {\n              <ion-col size=\"12\" size-lg=\"3\" offset-lg=\"9\" [class.left-border]=\"showPartnerBanner\">\n                <ion-list class=\"legal-info\">\n                  <ion-list-header>{{ 'HOME.INSTALL_APP' | translate }}</ion-list-header>\n                  <!-- TODO -->\n                </ion-list>\n              </ion-col>\n            }\n          }\n        </ion-row>\n      </ion-grid>\n    }\n  }\n\n  <!-- image credits -->\n  @if (contentCredits | isNotNilOrBlank) {\n    <div class=\"content-credits\" [class.floating]=\"!mobile\">\n      <ion-text>{{ contentCredits }}</ion-text>\n    </div>\n  }\n</ion-content>\n", styles: [":host{--ion-card-background-color: rgba(var(--ion-background-color-rgb), .7);--scrollbar-width: 0;--bottom-banner-height: 122px}h1,h2,h3,h4,h5{white-space:normal}.center,ion-content ion-card.welcome img{text-align:center;display:inline-block}ion-content{--background: transparent;background-size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-color:var(--ion-background-color);display:inline-block;padding:15px}ion-content.has-scrollbar{--scrollbar-width: 8px}ion-content .loading-page{display:block;height:100%;width:100%;position:absolute;background-color:transparent;z-index:5;transition:background .5s linear;-webkit-transition:background 1.5s linear}ion-content .loading-page.hidden{background-color:rgba(var(--ion-color-primary),0)}ion-content ion-card{z-index:9;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}ion-content ion-card ion-card-header{display:block}ion-content ion-card ion-card-header ion-card-subtitle,ion-content ion-card ion-card-header ion-card-title{display:block;width:100%}ion-content ion-card.main{min-width:240px;max-width:400px;margin-left:auto;margin-right:auto}ion-content ion-card.welcome{background-color:var(--ion-card-background-color)}ion-content ion-card.welcome button{margin-top:16px}ion-content ion-card.welcome img{max-width:250px}ion-content .history-container{margin-left:auto;margin-right:auto}ion-content .history-container ion-card{display:inline-block;box-sizing:border-box;z-index:8;min-width:240px;max-width:400px;width:100%;margin-left:auto;margin-right:auto;background-color:var(--ion-card-background-color);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}ion-content .history-container ion-card ion-card-header ion-card-subtitle{height:40px}ion-content .history-container ion-card ion-card-header ion-card-subtitle button[float-start]{--mdc-icon-button-state-layer-size: 40px;padding:8px;z-index:99;margin:0}ion-content .history-container ion-card ion-card-header ion-card-subtitle ion-label{line-height:40px}ion-content .history-container ion-card ion-card-header ion-card-subtitle ion-label[float-end]{padding-right:16px;font-weight:400}ion-content .history-container ion-card ion-card-header ion-card-title ion-item{width:100%;--ion-item-background: $transparent;--ion-item-icon-color: var(--ion-color-primary);--ion-item-text-color: var(--ion-color-primary)}ion-content .history-container ion-card ion-card-header ion-card-title ion-item ion-icon[slot=start],ion-content .history-container ion-card ion-card-header ion-card-title ion-item mat-icon[slot=start]{margin-right:unset;margin-inline-end:16px!important;color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor}ion-content .history-container ion-card ion-card-header ion-card-title ion-item ion-text,ion-content .history-container ion-card ion-card-header ion-card-title ion-item ion-label{color:var(--ion-item-text-color)!important;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}ion-content .history-container ion-card ion-card-content ion-list{--ion-item-background: var(--ion-color-transparent)}ion-content .history-container ion-card ion-card-content ion-list ion-item{--ion-item-icon-color: var(--ion-color-dark);--ion-item-text-color: var(--ion-color-dark)}ion-content .history-container ion-card ion-card-content ion-list ion-item ion-icon[slot=start],ion-content .history-container ion-card ion-card-content ion-list ion-item mat-icon[slot=start]{color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor;margin-right:unset;margin-inline-end:16px!important}ion-content .history-container ion-card ion-card-content ion-list ion-item ion-text,ion-content .history-container ion-card ion-card-content ion-list ion-item ion-label{color:var(--ion-item-text-color)!important}ion-content .bottom-banner{--ion-card-background-color: rgba(var(--ion-background-color-rgb), .5);background-color:var(--ion-card-background-color);min-width:240px;z-index:0;border-radius:4px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);margin:16px}ion-content .bottom-banner img.logo{max-height:50px;margin-left:8px}ion-content .bottom-banner ion-list-header{min-height:30px}ion-content .bottom-banner ion-item{--min-height: 28px}ion-content .bottom-banner ion-item ion-label{margin-top:3px!important;margin-bottom:3px!important}ion-content ion-text{text-align:center}@media screen and (max-width: 575px){ion-content ion-card{min-width:160px;width:calc(100% - 20px);max-width:100%;margin-left:10px;margin-right:10px}ion-content ion-card h1{margin-top:0;font-size:20px}ion-content ion-card ion-card-content ion-button{margin-top:8px}ion-content .bottom-banner.floating{display:block;position:unset}ion-content .bottom-banner img.logo{max-height:30px}}@media screen and (max-width: 767px) and (min-width: 576px){ion-content{min-height:555px}ion-content .bottom-banner img.logo{max-height:40px}}@media screen and (min-width: 768px){ion-content{min-height:calc(100% - var(--bottom-banner-height))}}@media screen and (min-width: 1200px){ion-content ion-col.feed{height:fit-content;max-height:calc(100vh - var(--ion-toolbar-height) - var(--bottom-banner-height) - var(--ion-padding) * 2);padding-inline-end:calc(var(--ion-padding) - 10px);overflow:hidden}ion-content .bottom-banner.floating{position:fixed;left:0;right:0;bottom:0;overflow-y:auto;max-height:var(--bottom-banner-height);margin-top:0}}.content-credits{float:right}.content-credits.floating{float:unset;position:fixed;bottom:0;right:var(--scrollbar-width, 0)}.content-credits ion-text{padding-inline-start:4px;padding-inline-end:4px;font-size:.7rem;background-color:rgba(var(--ion-background-color-rgb),.5);color:rgba(var(--ion-text-color-rgb),.7)}@media screen and (min-width: 992px){.left-border{border-left:1px solid var(--ion-color-medium)}}\n"], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$1.IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { kind: "component", type: i2$1.IonMenuToggle, selector: "ion-menu-toggle", inputs: ["autoHide", "menu"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i2$1.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i8$1.RxIf, selector: "[rxIf]", inputs: ["rxIf", "rxIfStrategy", "rxIfElse", "rxIfThen", "rxIfSuspense", "rxIfComplete", "rxIfError", "rxIfContextTrigger", "rxIfNextTrigger", "rxIfSuspenseTrigger", "rxIfErrorTrigger", "rxIfCompleteTrigger", "rxIfParent", "rxIfPatchZone", "rxIfRenderCallback"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i12.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i12.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i12.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i12.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: NgInitDirective, selector: "[ngInit]", outputs: ["ngInit"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "id", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "directive", type: i1$6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: AppInstallUpgradeCard, selector: "app-install-upgrade-card", inputs: ["isLogin", "showUpgradeWarning", "showOfflineWarning", "showInstallButton", "debug"] }, { kind: "component", type: UserEventNotificationIcon, selector: "app-user-event-notification-icon", inputs: ["titleI18n", "disabled", "filter", "autoHide", "headerActions", "footerActions", "style", "color", "unreadColor", "fill", "mobile", "listStyle", "debug"], outputs: ["showList"] }, { kind: "component", type: FeedsComponent, selector: "app-feed", inputs: ["debug", "mobile", "showHeader", "showReadMoreButton", "headerColor", "cardColor", "shape", "class", "itemId", "filterItem", "feeds", "urls", "maxAgeInMonths", "maxContentLength"], outputs: ["editItem", "deleteItem"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i19.RxPush, name: "push" }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: DateFromNowPipe, name: "dateFromNow" }, { kind: "pipe", type: NotEmptyArrayPipe, name: "isNotEmptyArray" }, { kind: "pipe", type: EmptyArrayPipe, name: "isEmptyArray" }, { kind: "pipe", type: IsNotNilOrBlankPipe, name: "isNotNilOrBlank" }], animations: [fadeInAnimation, slideUpDownAnimation, slideInAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: HomePage, selector: "app-page-home", viewQueries: [{ propertyName: "content", first: true, predicate: IonContent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar [canGoBack]=\"false\" visible-xs visible-sm visible-mobile>\n  <ion-buttons slot=\"end\">\n    @if (showNotificationIcon) {\n      <app-user-event-notification-icon [autoHide]=\"autoHideNotificationIcon\"></app-user-event-notification-icon>\n    }\n\n    <!-- dark mode (if allow by the environment token) -->\n    @if (settings.allowDarkMode) {\n      <ion-button (click)=\"toggleDarkMode()\">\n        <ion-icon slot=\"icon-only\" [name]=\"(darkMode$ | push) ? 'sunny' : 'moon'\"></ion-icon>\n      </ion-button>\n    }\n\n    <!-- Change locale button -->\n    <ion-button [matMenuTriggerFor]=\"localeMenu\">\n      <ion-icon slot=\"start\" name=\"language\"></ion-icon>\n    </ion-button>\n  </ion-buttons>\n</app-toolbar>\n\n<!-- Change locale menu -->\n<mat-menu #localeMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    @for (item of locales; track item.key) {\n      <button mat-menu-item (click)=\"changeLanguage(item.key)\">\n        <!--<mat-icon>{{ currentLocale === item.key ? 'checkmark' : undefined }}</mat-icon>-->\n        <ion-label>{{ item.value }}</ion-label>\n      </button>\n    }\n  </ng-template>\n</mat-menu>\n\n<ion-content [ngStyle]=\"contentStyle\" [class.has-scrollbar]=\"hasScrollbar\" no-padding-xs>\n  <!-- loading spinner -->\n  <div class=\"loading-page\" [class.cdk-visually-hidden]=\"!(loading$ | push)\">\n    @if (showSpinner) {\n      <div class=\"spinner\">\n        <p [innerHTML]=\"'COMMON.LOADING_DOTS' | translate\"></p>\n        <div class=\"sk-cube1 sk-cube\"></div>\n        <div class=\"sk-cube2 sk-cube\"></div>\n        <div class=\"sk-cube4 sk-cube\"></div>\n        <div class=\"sk-cube3 sk-cube\"></div>\n      </div>\n    }\n  </div>\n\n  <!-- Desktop: translucent top toolbar -->\n  @if (!mobile) {\n    <div class=\"hidden-xs hidden-sm\">\n      <ion-toolbar color=\"traansparent\" translucent>\n        <ion-buttons slot=\"start\">\n          <ion-menu-toggle>\n            <ion-button color=\"light\" fill=\"clear\">\n              <ion-icon slot=\"icon-only\" name=\"menu\"></ion-icon>\n            </ion-button>\n          </ion-menu-toggle>\n        </ion-buttons>\n\n        <ion-buttons slot=\"end\">\n          @if (showNotificationIcon) {\n            <app-user-event-notification-icon\n              [style]=\"'ion-button'\"\n              color=\"secondary\"\n              unreadColor=\"tertiary\"\n              fill=\"solid\"\n              [autoHide]=\"autoHideNotificationIcon\"\n            ></app-user-event-notification-icon>\n          }\n\n          <!-- dark mode (if allow by the environment token) -->\n          @if (settings.allowDarkMode) {\n            <ion-button\n              color=\"secondary\"\n              fill=\"solid\"\n              (click)=\"toggleDarkMode()\"\n              [title]=\"'HOME.BTN_DARK_MODE' | translate\"\n            >\n              <ion-icon slot=\"icon-only\" [name]=\"(darkMode$ | push) ? 'moon' : 'sunny'\"></ion-icon>\n            </ion-button>\n          }\n          <!-- change locale button -->\n          <ion-button\n            color=\"secondary\"\n            fill=\"solid\"\n            [matMenuTriggerFor]=\"localeMenu\"\n            [title]=\"'SETTINGS.LOCALE' | translate\"\n          >\n            <ion-icon slot=\"icon-only\" name=\"language\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </div>\n  }\n\n  <!-- Install (and upgrade) card -->\n  <app-install-upgrade-card [isLogin]=\"isLogin\" [showInstallButton]=\"true\"></app-install-upgrade-card>\n\n  @if (!(loading$ | push)) {\n    @let hasFeed = hasFeed$ | async;\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row>\n        <ion-col size=\"0\" [sizeXl]=\"hasFeed ? 3 : 0\"></ion-col>\n        <ion-col>\n          <!-- Welcome card -->\n          <ion-card class=\"main welcome ion-padding ion-text-center ion-align-self-center\" @fadeInAnimation>\n            <ion-card-header>\n              <ion-card-title class=\"ion-text-center\">\n                <span *ngIf=\"isWeb\" [innerHTML]=\"'HOME.WELCOME_WEB' | translate: { appName: appName }\"></span>\n                <span *ngIf=\"!isWeb\" [innerHTML]=\"'HOME.WELCOME_APP' | translate: { appName: appName }\"></span>\n              </ion-card-title>\n              <ion-card-subtitle [innerHTML]=\"description\"></ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content class=\"ion-no-padding\">\n              <ion-text color=\"primary\">\n                <img *ngIf=\"logo\" [attr.src]=\"logo\" alt=\"Logo\" />\n              </ion-text>\n              <!-- register help text -->\n              <ion-text *ngIf=\"!isLogin && canRegister\">\n                <br />\n                <span translate>HOME.REGISTER_HELP</span>\n              </ion-text>\n              <div class=\"ion-padding-top\">\n                <!-- If NOT login -->\n                <ng-container *ngIf=\"!isLogin; else loginButtons\">\n                  <ion-button *ngIf=\"canRegister\" expand=\"block\" color=\"tertiary\" (click)=\"register()\">\n                    <span translate>HOME.BTN_REGISTER</span>\n                  </ion-button>\n                  <ion-button expand=\"block\" color=\"light\" [routerLink]=\"['/']\" (click)=\"login()\">\n                    <span translate>AUTH.BTN_LOGIN</span>\n                  </ion-button>\n                </ng-container>\n\n                <!-- If user login -->\n                <ng-template #loginButtons>\n                  <!-- Feature buttons -->\n                  <ng-container *rxIf=\"$filteredButtons; let buttons\">\n                    <ng-container *ngFor=\"let item of buttons\">\n                      @if (item.path) {\n                        <ion-button\n                          expand=\"block\"\n                          color=\"tertiary\"\n                          [class]=\"item.cssClass\"\n                          [routerLink]=\"item.path\"\n                          routerDirection=\"root\"\n                        >\n                          <ion-icon slot=\"start\" class=\"ion-float-start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n                          <mat-icon slot=\"start\" class=\"ion-float-start\" *ngIf=\"item.matIcon\">\n                            {{ item.matIcon }}\n                          </mat-icon>\n                          <ion-label>{{ 'HOME.BTN_DATA_ENTRY' | translate: { name: (item.title | translate) } }}</ion-label>\n                          <ion-badge *rxIf=\"item.$badge; let badge\"\n                                     slot=\"end\"\n                                     [color]=\"(item.$badgeColor | push) || 'accent'\">\n                            {{badge}}\n                          </ion-badge>\n                        </ion-button>\n                      } @else {\n                        <!-- divider -->\n                        <div *ngIf=\"!item.action\" [class]=\"item.cssClass\" class=\"button-divider\">\n                          <ion-label translate>{{ item.title }}&nbsp;</ion-label>\n                        </div>\n                      }\n                    </ng-container>\n\n                    <!--<p *ngIf=\"buttons.length\" class=\"visible-mobile\">&nbsp;</p>-->\n                  </ng-container>\n\n                  <ion-button *ngIf=\"showAccountButton\" expand=\"block\" color=\"secondary\" [routerLink]=\"['/account']\">\n                    <ion-icon slot=\"start\" class=\"ion-float-start\" name=\"person-circle\"></ion-icon>\n                    <ion-text translate>HOME.BTN_MY_ACCOUNT</ion-text>\n                  </ion-button>\n\n                  <p hidden-xs hidden-sm hidden-mobile>\n                    <ion-text\n                      [innerHTML]=\"'HOME.NOT_THIS_ACCOUNT_QUESTION' | translate: { displayName: accountName }\"\n                    ></ion-text>\n                    <br />\n                    <ion-text>\n                      <a href=\"#\" (click)=\"logout($event)\">\n                        <span translate>HOME.BTN_DISCONNECT</span>\n                      </a>\n                    </ion-text>\n                  </p>\n                </ng-template>\n              </div>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n        <ion-col size=\"0\" [sizeXl]=\"hasFeed ? 1 : 0\"></ion-col>\n        <ion-col [class.feed]=\"hasFeed\" [size]=\"hasFeed ? 12 : 0\" [sizeXl]=\"hasFeed ? 4 : 0\">\n          @if (showFeed) {\n            @if (mobile) {\n              <app-feed\n                #feed\n                shape=\"round\"\n                [urls]=\"feedUrls\"\n                [maxAgeInMonths]=\"feedMaxAgeInMonths\"\n                [maxContentLength]=\"feedMaxContentLength\"\n                (ngInit)=\"initFeed(feed)\"\n                @fadeInAnimation\n              ></app-feed>\n            } @else {\n              <app-feed\n                #feed\n                shape=\"round\"\n                [debug]=\"false\"\n                [urls]=\"feedUrls\"\n                [maxAgeInMonths]=\"feedMaxAgeInMonths\"\n                [maxContentLength]=\"feedMaxContentLength\"\n                (ngInit)=\"initFeed(feed)\"\n                @slideInAnimation\n                @fadeInAnimation\n              ></app-feed>\n            }\n          }\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n    <!-- Page history -->\n    @let pageHistory = isLogin && (pageHistory$ | push);\n    @if (pageHistory | isNotEmptyArray) {\n      <ion-grid class=\"history-container ion-align-self-center\">\n        <ion-row>\n          @for (page of pageHistory; track page.path) {\n            <ion-col size=\"12\" size-xl=\"\" class=\"ion-text-center\">\n              <ion-card class=\"ion-align-self-start ion-text-start\" @fadeInAnimation>\n                <ion-card-header class=\"ion-no-padding\">\n                  <!-- top bar -->\n                  <ion-card-subtitle>\n                    <button\n                      type=\"button\"\n                      tabindex=\"-1\"\n                      (click)=\"removePageHistory(page.path)\"\n                      mat-icon-button\n                      class=\"ion-float-start ion-no-margin close-button\"\n                    >\n                      <mat-icon>close</mat-icon>\n                    </button>\n                    <ion-label [innerHTML]=\"page.subtitle | translate\"></ion-label>\n                    <ion-text class=\"ion-float-end\" [title]=\"page.time | dateFormat: { time: true }\">\n                      <small>\n                        <ion-icon name=\"time-outline\"></ion-icon>\n                        &nbsp;{{ page.time | dateFromNow }}\n                      </small>\n                      &nbsp;\n                    </ion-text>\n                  </ion-card-subtitle>\n\n                  <!-- main page -->\n                  <ion-card-title class=\"ion-no-margin ion-no-padding\">\n                    <ion-item\n                      detail=\"true\"\n                      tappable\n                      class=\"text-1x\"\n                      [routerLink]=\"page.path\"\n                      routerDirection=\"root\"\n                      lines=\"none\"\n                    >\n                      <!-- page icon-->\n                      <ion-icon *ngIf=\"page.icon\" slot=\"start\" [name]=\"page.icon\"></ion-icon>\n                      <mat-icon *ngIf=\"page.matIcon\" slot=\"start\">{{ page.matIcon }}</mat-icon>\n\n                      <ion-label color=\"primary\" [innerHTML]=\"page.title\"></ion-label>\n                    </ion-item>\n                  </ion-card-title>\n                </ion-card-header>\n\n                <!-- children pages -->\n                @if (page.children | isNotEmptyArray) {\n                  <ion-card-content class=\"ion-no-padding ion-padding-start\">\n                    <ion-list class=\"ion-no-padding\">\n                      @for (childPage of page.children; track childPage.path) {\n                        <ion-item\n                          detail=\"true\"\n                          tappable\n                          class=\"text-1x\"\n                          [routerLink]=\"childPage.path\"\n                          routerDirection=\"root\"\n                        >\n                          <!-- page icon-->\n                          <ion-icon *ngIf=\"childPage.icon\" slot=\"start\" color=\"dark\" [name]=\"childPage.icon\"></ion-icon>\n                          <mat-icon *ngIf=\"childPage.matIcon\" slot=\"start\" color=\"dark\">\n                            {{ childPage.matIcon }}\n                          </mat-icon>\n\n                          <ion-label color=\"dark\" [innerHTML]=\"childPage.title\"></ion-label>\n                        </ion-item>\n                      }\n                    </ion-list>\n                  </ion-card-content>\n                }\n              </ion-card>\n            </ion-col>\n          }\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Bottom banner -->\n    @if (showPartnerBanner || showLegalInformation) {\n      <ion-grid\n        class=\"bottom-banner ion-text-center\"\n        [class.floating]=\"!mobile && (pageHistory | isEmptyArray)\"\n        @fadeInAnimation\n      >\n        <ion-row>\n          <!-- partners logos -->\n          @if (showPartnerBanner) {\n            <ion-col size=\"12\" [sizeLg]=\"partnerBannerSize\" class=\"ion-text-center\">\n              @if (showLegalInformation) {\n                <ion-list class=\"legal-info\">\n                  <ion-list-header>{{ 'HOME.PARTNERS' | translate }}</ion-list-header>\n                </ion-list>\n              }\n              <!-- partners -->\n              @for (item of $partners | async; track $index) {\n                <a href=\"{{ item.siteUrl }}\">\n                  <img class=\"logo\" src=\"{{ item.logo }}\" alt=\"{{ item.label }}\" [title]=\"item.label\" />\n                </a>\n              }\n            </ion-col>\n          }\n\n          <!-- legal information -->\n          @if (showLegalInformation) {\n            <ion-col size=\"12\" size-sm=\"6\" size-lg=\"4\" [class.left-border]=\"showPartnerBanner\">\n              <ion-list class=\"legal-info\">\n                <ion-list-header class=\"ion-text-left\">{{ 'HOME.LEGAL_INFORMATION' | translate }}</ion-list-header>\n                @for (item of legalInformation; track item.path) {\n                  <ion-item (click)=\"openMarkdownModal($event, item)\" lines=\"none\" [button]=\"true\">\n                    <ion-label>\n                      <p>\n                        {{ item.title | translate: item.titleArgs }}\n                      </p>\n                    </ion-label>\n                  </ion-item>\n                }\n              </ion-list>\n            </ion-col>\n            @if (showInstallLinks) {\n              <ion-col size=\"12\" size-lg=\"3\" offset-lg=\"9\" [class.left-border]=\"showPartnerBanner\">\n                <ion-list class=\"legal-info\">\n                  <ion-list-header>{{ 'HOME.INSTALL_APP' | translate }}</ion-list-header>\n                  <!-- TODO -->\n                </ion-list>\n              </ion-col>\n            }\n          }\n        </ion-row>\n      </ion-grid>\n    }\n  }\n\n  <!-- image credits -->\n  @if (contentCredits | isNotNilOrBlank) {\n    <div class=\"content-credits\" [class.floating]=\"!mobile\">\n      <ion-text>{{ contentCredits }}</ion-text>\n    </div>\n  }\n</ion-content>\n", styles: [":host{--ion-card-background-color: rgba(var(--ion-background-color-rgb), .7);--scrollbar-width: 0;--bottom-banner-height: 122px}h1,h2,h3,h4,h5{white-space:normal}.center,ion-content ion-card.welcome img{text-align:center;display:inline-block}ion-content{--background: transparent;background-size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-color:var(--ion-background-color);display:inline-block;padding:15px}ion-content.has-scrollbar{--scrollbar-width: 8px}ion-content .loading-page{display:block;height:100%;width:100%;position:absolute;background-color:transparent;z-index:5;transition:background .5s linear;-webkit-transition:background 1.5s linear}ion-content .loading-page.hidden{background-color:rgba(var(--ion-color-primary),0)}ion-content ion-card{z-index:9;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}ion-content ion-card ion-card-header{display:block}ion-content ion-card ion-card-header ion-card-subtitle,ion-content ion-card ion-card-header ion-card-title{display:block;width:100%}ion-content ion-card.main{min-width:240px;max-width:400px;margin-left:auto;margin-right:auto}ion-content ion-card.welcome{background-color:var(--ion-card-background-color)}ion-content ion-card.welcome .button-divider{margin-top:16px}ion-content ion-card.welcome img{max-width:250px}ion-content .history-container{margin-left:auto;margin-right:auto}ion-content .history-container ion-card{display:inline-block;box-sizing:border-box;z-index:8;min-width:240px;max-width:400px;width:100%;margin-left:auto;margin-right:auto;background-color:var(--ion-card-background-color);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}ion-content .history-container ion-card ion-card-header ion-card-subtitle{height:40px}ion-content .history-container ion-card ion-card-header ion-card-subtitle button[float-start]{--mdc-icon-button-state-layer-size: 40px;padding:8px;z-index:99;margin:0}ion-content .history-container ion-card ion-card-header ion-card-subtitle ion-label{line-height:40px}ion-content .history-container ion-card ion-card-header ion-card-subtitle ion-label[float-end]{padding-right:16px;font-weight:400}ion-content .history-container ion-card ion-card-header ion-card-title ion-item{width:100%;--ion-item-background: $transparent;--ion-item-icon-color: var(--ion-color-primary);--ion-item-text-color: var(--ion-color-primary)}ion-content .history-container ion-card ion-card-header ion-card-title ion-item ion-icon[slot=start],ion-content .history-container ion-card ion-card-header ion-card-title ion-item mat-icon[slot=start]{margin-right:unset;margin-inline-end:16px!important;color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor}ion-content .history-container ion-card ion-card-header ion-card-title ion-item ion-text,ion-content .history-container ion-card ion-card-header ion-card-title ion-item ion-label{color:var(--ion-item-text-color)!important;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}ion-content .history-container ion-card ion-card-content ion-list{--ion-item-background: var(--ion-color-transparent)}ion-content .history-container ion-card ion-card-content ion-list ion-item{--ion-item-icon-color: var(--ion-color-dark);--ion-item-text-color: var(--ion-color-dark)}ion-content .history-container ion-card ion-card-content ion-list ion-item ion-icon[slot=start],ion-content .history-container ion-card ion-card-content ion-list ion-item mat-icon[slot=start]{color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor;margin-right:unset;margin-inline-end:16px!important}ion-content .history-container ion-card ion-card-content ion-list ion-item ion-text,ion-content .history-container ion-card ion-card-content ion-list ion-item ion-label{color:var(--ion-item-text-color)!important}ion-content .bottom-banner{--ion-card-background-color: rgba(var(--ion-background-color-rgb), .5);background-color:var(--ion-card-background-color);min-width:240px;z-index:0;border-radius:4px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);margin:16px}ion-content .bottom-banner img.logo{max-height:50px;margin-left:8px}ion-content .bottom-banner ion-list-header{min-height:30px}ion-content .bottom-banner ion-item{--min-height: 28px}ion-content .bottom-banner ion-item ion-label{margin-top:3px!important;margin-bottom:3px!important}ion-content ion-text{text-align:center}@media screen and (max-width: 575px){ion-content ion-card{min-width:160px;width:calc(100% - 20px);max-width:100%;margin-left:10px;margin-right:10px}ion-content ion-card h1{margin-top:0;font-size:20px}ion-content ion-card ion-card-content ion-button{margin-top:8px}ion-content .bottom-banner.floating{display:block;position:unset}ion-content .bottom-banner img.logo{max-height:30px}}@media screen and (max-width: 767px) and (min-width: 576px){ion-content{min-height:555px}ion-content .bottom-banner img.logo{max-height:40px}}@media screen and (min-width: 768px){ion-content{min-height:calc(100% - var(--bottom-banner-height))}}@media screen and (min-width: 1200px){ion-content ion-col.feed{height:fit-content;max-height:calc(100vh - var(--ion-toolbar-height) - var(--bottom-banner-height) - var(--ion-padding) * 2);padding-inline-end:calc(var(--ion-padding) - 10px);overflow:hidden}ion-content .bottom-banner.floating{position:fixed;left:0;right:0;bottom:0;overflow-y:auto;max-height:var(--bottom-banner-height);margin-top:0}}.content-credits{float:right}.content-credits.floating{float:unset;position:fixed;bottom:0;right:var(--scrollbar-width, 0)}.content-credits ion-text{padding-inline-start:4px;padding-inline-end:4px;font-size:.7rem;background-color:rgba(var(--ion-background-color-rgb),.5);color:rgba(var(--ion-text-color-rgb),.7)}@media screen and (min-width: 992px){.left-border{border-left:1px solid var(--ion-color-medium)}}\n"], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$1.IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$1.IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { kind: "component", type: i2$1.IonMenuToggle, selector: "ion-menu-toggle", inputs: ["autoHide", "menu"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i2$1.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i8$1.RxIf, selector: "[rxIf]", inputs: ["rxIf", "rxIfStrategy", "rxIfElse", "rxIfThen", "rxIfSuspense", "rxIfComplete", "rxIfError", "rxIfContextTrigger", "rxIfNextTrigger", "rxIfSuspenseTrigger", "rxIfErrorTrigger", "rxIfCompleteTrigger", "rxIfParent", "rxIfPatchZone", "rxIfRenderCallback"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i12.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i12.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i12.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i12.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: NgInitDirective, selector: "[ngInit]", outputs: ["ngInit"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "id", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "directive", type: i1$6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: AppInstallUpgradeCard, selector: "app-install-upgrade-card", inputs: ["isLogin", "showUpgradeWarning", "showOfflineWarning", "showInstallButton", "debug"] }, { kind: "component", type: UserEventNotificationIcon, selector: "app-user-event-notification-icon", inputs: ["titleI18n", "disabled", "filter", "autoHide", "headerActions", "footerActions", "style", "color", "unreadColor", "fill", "mobile", "listStyle", "debug"], outputs: ["showList"] }, { kind: "component", type: FeedsComponent, selector: "app-feed", inputs: ["debug", "mobile", "showHeader", "showReadMoreButton", "headerColor", "cardColor", "shape", "class", "itemId", "filterItem", "feeds", "urls", "maxAgeInMonths", "maxContentLength"], outputs: ["editItem", "deleteItem"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i19.RxPush, name: "push" }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: DateFromNowPipe, name: "dateFromNow" }, { kind: "pipe", type: NotEmptyArrayPipe, name: "isNotEmptyArray" }, { kind: "pipe", type: EmptyArrayPipe, name: "isEmptyArray" }, { kind: "pipe", type: IsNotNilOrBlankPipe, name: "isNotNilOrBlank" }], animations: [fadeInAnimation, slideUpDownAnimation, slideInAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HomePage, decorators: [{
             type: Component,
-            args: [{ selector: 'app-page-home', changeDetection: ChangeDetectionStrategy.OnPush, animations: [fadeInAnimation, slideUpDownAnimation, slideInAnimation], template: "<app-toolbar [canGoBack]=\"false\" visible-xs visible-sm visible-mobile>\n  <ion-buttons slot=\"end\">\n    @if (showNotificationIcon) {\n      <app-user-event-notification-icon [autoHide]=\"autoHideNotificationIcon\"></app-user-event-notification-icon>\n    }\n\n    <!-- dark mode (if allow by the environment token) -->\n    @if (settings.allowDarkMode) {\n      <ion-button (click)=\"toggleDarkMode()\">\n        <ion-icon slot=\"icon-only\" [name]=\"(darkMode$ | push) ? 'sunny' : 'moon'\"></ion-icon>\n      </ion-button>\n    }\n\n    <!-- Change locale button -->\n    <ion-button [matMenuTriggerFor]=\"localeMenu\">\n      <ion-icon slot=\"start\" name=\"language\"></ion-icon>\n    </ion-button>\n  </ion-buttons>\n</app-toolbar>\n\n<!-- Change locale menu -->\n<mat-menu #localeMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    @for (item of locales; track item.key) {\n      <button mat-menu-item (click)=\"changeLanguage(item.key)\">\n        <!--<mat-icon>{{ currentLocale === item.key ? 'checkmark' : undefined }}</mat-icon>-->\n        <ion-label>{{ item.value }}</ion-label>\n      </button>\n    }\n  </ng-template>\n</mat-menu>\n\n<ion-content [ngStyle]=\"contentStyle\" [class.has-scrollbar]=\"hasScrollbar\" no-padding-xs>\n  <!-- loading spinner -->\n  <div class=\"loading-page\" [class.cdk-visually-hidden]=\"!(loading$ | push)\">\n    @if (showSpinner) {\n      <div class=\"spinner\">\n        <p [innerHTML]=\"'COMMON.LOADING_DOTS' | translate\"></p>\n        <div class=\"sk-cube1 sk-cube\"></div>\n        <div class=\"sk-cube2 sk-cube\"></div>\n        <div class=\"sk-cube4 sk-cube\"></div>\n        <div class=\"sk-cube3 sk-cube\"></div>\n      </div>\n    }\n  </div>\n\n  <!-- Desktop: translucent top toolbar -->\n  @if (!mobile) {\n    <div class=\"hidden-xs hidden-sm\">\n      <ion-toolbar color=\"traansparent\" translucent>\n        <ion-buttons slot=\"start\">\n          <ion-menu-toggle>\n            <ion-button color=\"light\" fill=\"clear\">\n              <ion-icon slot=\"icon-only\" name=\"menu\"></ion-icon>\n            </ion-button>\n          </ion-menu-toggle>\n        </ion-buttons>\n\n        <ion-buttons slot=\"end\">\n          @if (showNotificationIcon) {\n            <app-user-event-notification-icon\n              [style]=\"'ion-button'\"\n              color=\"secondary\"\n              unreadColor=\"tertiary\"\n              fill=\"solid\"\n              [autoHide]=\"autoHideNotificationIcon\"\n            ></app-user-event-notification-icon>\n          }\n\n          <!-- dark mode (if allow by the environment token) -->\n          @if (settings.allowDarkMode) {\n            <ion-button\n              color=\"secondary\"\n              fill=\"solid\"\n              (click)=\"toggleDarkMode()\"\n              [title]=\"'HOME.BTN_DARK_MODE' | translate\"\n            >\n              <ion-icon slot=\"icon-only\" [name]=\"(darkMode$ | push) ? 'moon' : 'sunny'\"></ion-icon>\n            </ion-button>\n          }\n          <!-- change locale button -->\n          <ion-button\n            color=\"secondary\"\n            fill=\"solid\"\n            [matMenuTriggerFor]=\"localeMenu\"\n            [title]=\"'SETTINGS.LOCALE' | translate\"\n          >\n            <ion-icon slot=\"icon-only\" name=\"language\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </div>\n  }\n\n  <!-- Install (and upgrade) card -->\n  <app-install-upgrade-card [isLogin]=\"isLogin\" [showInstallButton]=\"true\"></app-install-upgrade-card>\n\n  @if (!(loading$ | push)) {\n    @let hasFeed = hasFeed$ | async;\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row>\n        <ion-col size=\"0\" [sizeXl]=\"hasFeed ? 3 : 0\"></ion-col>\n        <ion-col>\n          <!-- Welcome card -->\n          <ion-card class=\"main welcome ion-padding ion-text-center ion-align-self-center\" @fadeInAnimation>\n            <ion-card-header>\n              <ion-card-title class=\"ion-text-center\">\n                <span *ngIf=\"isWeb\" [innerHTML]=\"'HOME.WELCOME_WEB' | translate: { appName: appName }\"></span>\n                <span *ngIf=\"!isWeb\" [innerHTML]=\"'HOME.WELCOME_APP' | translate: { appName: appName }\"></span>\n              </ion-card-title>\n              <ion-card-subtitle [innerHTML]=\"description\"></ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content class=\"ion-no-padding\">\n              <ion-text color=\"primary\">\n                <img *ngIf=\"logo\" [attr.src]=\"logo\" alt=\"Logo\" />\n              </ion-text>\n              <!-- register help text -->\n              <ion-text *ngIf=\"!isLogin && canRegister\">\n                <br />\n                <span translate>HOME.REGISTER_HELP</span>\n              </ion-text>\n              <div class=\"ion-padding-top\">\n                <!-- If NOT login -->\n                <ng-container *ngIf=\"!isLogin; else loginButtons\">\n                  <ion-button *ngIf=\"canRegister\" expand=\"block\" color=\"tertiary\" (click)=\"register()\">\n                    <span translate>HOME.BTN_REGISTER</span>\n                  </ion-button>\n                  <ion-button expand=\"block\" color=\"light\" [routerLink]=\"['/']\" (click)=\"login()\">\n                    <span translate>AUTH.BTN_LOGIN</span>\n                  </ion-button>\n                </ng-container>\n\n                <!-- If user login -->\n                <ng-template #loginButtons>\n                  <!-- Feature buttons -->\n                  <ng-container *rxIf=\"$filteredButtons; let buttons\">\n                    <ng-container *ngFor=\"let item of buttons\">\n                      <ion-button\n                        *ngIf=\"item.path\"\n                        expand=\"block\"\n                        color=\"tertiary\"\n                        [class]=\"item.cssClass\"\n                        [routerLink]=\"item.path\"\n                        routerDirection=\"root\"\n                      >\n                        <ion-icon slot=\"start\" class=\"ion-float-start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n                        <mat-icon slot=\"start\" class=\"ion-float-start\" *ngIf=\"item.matIcon\">\n                          {{ item.matIcon }}\n                        </mat-icon>\n                        <ion-text>{{ 'HOME.BTN_DATA_ENTRY' | translate: { name: (item.title | translate) } }}</ion-text>\n                      </ion-button>\n\n                      <!-- divider -->\n                      <div *ngIf=\"!item.path && !item.action\" [class]=\"item.cssClass\">\n                        <ion-label translate>{{ item.title }}&nbsp;</ion-label>\n                      </div>\n                    </ng-container>\n\n                    <!--<p *ngIf=\"buttons.length\" class=\"visible-mobile\">&nbsp;</p>-->\n                  </ng-container>\n\n                  <ion-button *ngIf=\"showAccountButton\" expand=\"block\" color=\"secondary\" [routerLink]=\"['/account']\">\n                    <ion-icon slot=\"start\" class=\"ion-float-start\" name=\"person-circle\"></ion-icon>\n                    <ion-text translate>HOME.BTN_MY_ACCOUNT</ion-text>\n                  </ion-button>\n\n                  <p hidden-xs hidden-sm hidden-mobile>\n                    <ion-text\n                      [innerHTML]=\"'HOME.NOT_THIS_ACCOUNT_QUESTION' | translate: { displayName: accountName }\"\n                    ></ion-text>\n                    <br />\n                    <ion-text>\n                      <a href=\"#\" (click)=\"logout($event)\">\n                        <span translate>HOME.BTN_DISCONNECT</span>\n                      </a>\n                    </ion-text>\n                  </p>\n                </ng-template>\n              </div>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n        <ion-col size=\"0\" [sizeXl]=\"hasFeed ? 1 : 0\"></ion-col>\n        <ion-col [class.feed]=\"hasFeed\" [size]=\"hasFeed ? 12 : 0\" [sizeXl]=\"hasFeed ? 4 : 0\">\n          @if (showFeed) {\n            @if (mobile) {\n              <app-feed\n                #feed\n                shape=\"round\"\n                [urls]=\"feedUrls\"\n                [maxAgeInMonths]=\"feedMaxAgeInMonths\"\n                [maxContentLength]=\"feedMaxContentLength\"\n                (ngInit)=\"initFeed(feed)\"\n                @fadeInAnimation\n              ></app-feed>\n            } @else {\n              <app-feed\n                #feed\n                shape=\"round\"\n                [debug]=\"false\"\n                [urls]=\"feedUrls\"\n                [maxAgeInMonths]=\"feedMaxAgeInMonths\"\n                [maxContentLength]=\"feedMaxContentLength\"\n                (ngInit)=\"initFeed(feed)\"\n                @slideInAnimation\n                @fadeInAnimation\n              ></app-feed>\n            }\n          }\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n    <!-- Page history -->\n    @let pageHistory = isLogin && (pageHistory$ | push);\n    @if (pageHistory | isNotEmptyArray) {\n      <ion-grid class=\"history-container ion-align-self-center\">\n        <ion-row>\n          @for (page of pageHistory; track page.path) {\n            <ion-col size=\"12\" size-xl=\"\" class=\"ion-text-center\">\n              <ion-card class=\"ion-align-self-start ion-text-start\" @fadeInAnimation>\n                <ion-card-header class=\"ion-no-padding\">\n                  <!-- top bar -->\n                  <ion-card-subtitle>\n                    <button\n                      type=\"button\"\n                      tabindex=\"-1\"\n                      (click)=\"removePageHistory(page.path)\"\n                      mat-icon-button\n                      class=\"ion-float-start ion-no-margin close-button\"\n                    >\n                      <mat-icon>close</mat-icon>\n                    </button>\n                    <ion-label [innerHTML]=\"page.subtitle | translate\"></ion-label>\n                    <ion-text class=\"ion-float-end\" [title]=\"page.time | dateFormat: { time: true }\">\n                      <small>\n                        <ion-icon name=\"time-outline\"></ion-icon>\n                        &nbsp;{{ page.time | dateFromNow }}\n                      </small>\n                      &nbsp;\n                    </ion-text>\n                  </ion-card-subtitle>\n\n                  <!-- main page -->\n                  <ion-card-title class=\"ion-no-margin ion-no-padding\">\n                    <ion-item\n                      detail=\"true\"\n                      tappable\n                      class=\"text-1x\"\n                      [routerLink]=\"page.path\"\n                      routerDirection=\"root\"\n                      lines=\"none\"\n                    >\n                      <!-- page icon-->\n                      <ion-icon *ngIf=\"page.icon\" slot=\"start\" [name]=\"page.icon\"></ion-icon>\n                      <mat-icon *ngIf=\"page.matIcon\" slot=\"start\">{{ page.matIcon }}</mat-icon>\n\n                      <ion-label color=\"primary\" [innerHTML]=\"page.title\"></ion-label>\n                    </ion-item>\n                  </ion-card-title>\n                </ion-card-header>\n\n                <!-- children pages -->\n                @if (page.children | isNotEmptyArray) {\n                  <ion-card-content class=\"ion-no-padding ion-padding-start\">\n                    <ion-list class=\"ion-no-padding\">\n                      @for (childPage of page.children; track childPage.path) {\n                        <ion-item\n                          detail=\"true\"\n                          tappable\n                          class=\"text-1x\"\n                          [routerLink]=\"childPage.path\"\n                          routerDirection=\"root\"\n                        >\n                          <!-- page icon-->\n                          <ion-icon *ngIf=\"childPage.icon\" slot=\"start\" color=\"dark\" [name]=\"childPage.icon\"></ion-icon>\n                          <mat-icon *ngIf=\"childPage.matIcon\" slot=\"start\" color=\"dark\">\n                            {{ childPage.matIcon }}\n                          </mat-icon>\n\n                          <ion-label color=\"dark\" [innerHTML]=\"childPage.title\"></ion-label>\n                        </ion-item>\n                      }\n                    </ion-list>\n                  </ion-card-content>\n                }\n              </ion-card>\n            </ion-col>\n          }\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Bottom banner -->\n    @if (showPartnerBanner || showLegalInformation) {\n      <ion-grid\n        class=\"bottom-banner ion-text-center\"\n        [class.floating]=\"!mobile && (pageHistory | isEmptyArray)\"\n        @fadeInAnimation\n      >\n        <ion-row>\n          <!-- partners logos -->\n          @if (showPartnerBanner) {\n            <ion-col size=\"12\" [sizeLg]=\"partnerBannerSize\" class=\"ion-text-center\">\n              @if (showLegalInformation) {\n                <ion-list class=\"legal-info\">\n                  <ion-list-header>{{ 'HOME.PARTNERS' | translate }}</ion-list-header>\n                </ion-list>\n              }\n              <!-- partners -->\n              @for (item of $partners | async; track $index) {\n                <a href=\"{{ item.siteUrl }}\">\n                  <img class=\"logo\" src=\"{{ item.logo }}\" alt=\"{{ item.label }}\" [title]=\"item.label\" />\n                </a>\n              }\n            </ion-col>\n          }\n\n          <!-- legal information -->\n          @if (showLegalInformation) {\n            <ion-col size=\"12\" size-sm=\"6\" size-lg=\"4\" [class.left-border]=\"showPartnerBanner\">\n              <ion-list class=\"legal-info\">\n                <ion-list-header class=\"ion-text-left\">{{ 'HOME.LEGAL_INFORMATION' | translate }}</ion-list-header>\n                @for (item of legalInformation; track item.path) {\n                  <ion-item (click)=\"openMarkdownModal($event, item)\" lines=\"none\" [button]=\"true\">\n                    <ion-label>\n                      <p>\n                        {{ item.title | translate: item.titleArgs }}\n                      </p>\n                    </ion-label>\n                  </ion-item>\n                }\n              </ion-list>\n            </ion-col>\n            @if (showInstallLinks) {\n              <ion-col size=\"12\" size-lg=\"3\" offset-lg=\"9\" [class.left-border]=\"showPartnerBanner\">\n                <ion-list class=\"legal-info\">\n                  <ion-list-header>{{ 'HOME.INSTALL_APP' | translate }}</ion-list-header>\n                  <!-- TODO -->\n                </ion-list>\n              </ion-col>\n            }\n          }\n        </ion-row>\n      </ion-grid>\n    }\n  }\n\n  <!-- image credits -->\n  @if (contentCredits | isNotNilOrBlank) {\n    <div class=\"content-credits\" [class.floating]=\"!mobile\">\n      <ion-text>{{ contentCredits }}</ion-text>\n    </div>\n  }\n</ion-content>\n", styles: [":host{--ion-card-background-color: rgba(var(--ion-background-color-rgb), .7);--scrollbar-width: 0;--bottom-banner-height: 122px}h1,h2,h3,h4,h5{white-space:normal}.center,ion-content ion-card.welcome img{text-align:center;display:inline-block}ion-content{--background: transparent;background-size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-color:var(--ion-background-color);display:inline-block;padding:15px}ion-content.has-scrollbar{--scrollbar-width: 8px}ion-content .loading-page{display:block;height:100%;width:100%;position:absolute;background-color:transparent;z-index:5;transition:background .5s linear;-webkit-transition:background 1.5s linear}ion-content .loading-page.hidden{background-color:rgba(var(--ion-color-primary),0)}ion-content ion-card{z-index:9;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}ion-content ion-card ion-card-header{display:block}ion-content ion-card ion-card-header ion-card-subtitle,ion-content ion-card ion-card-header ion-card-title{display:block;width:100%}ion-content ion-card.main{min-width:240px;max-width:400px;margin-left:auto;margin-right:auto}ion-content ion-card.welcome{background-color:var(--ion-card-background-color)}ion-content ion-card.welcome button{margin-top:16px}ion-content ion-card.welcome img{max-width:250px}ion-content .history-container{margin-left:auto;margin-right:auto}ion-content .history-container ion-card{display:inline-block;box-sizing:border-box;z-index:8;min-width:240px;max-width:400px;width:100%;margin-left:auto;margin-right:auto;background-color:var(--ion-card-background-color);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}ion-content .history-container ion-card ion-card-header ion-card-subtitle{height:40px}ion-content .history-container ion-card ion-card-header ion-card-subtitle button[float-start]{--mdc-icon-button-state-layer-size: 40px;padding:8px;z-index:99;margin:0}ion-content .history-container ion-card ion-card-header ion-card-subtitle ion-label{line-height:40px}ion-content .history-container ion-card ion-card-header ion-card-subtitle ion-label[float-end]{padding-right:16px;font-weight:400}ion-content .history-container ion-card ion-card-header ion-card-title ion-item{width:100%;--ion-item-background: $transparent;--ion-item-icon-color: var(--ion-color-primary);--ion-item-text-color: var(--ion-color-primary)}ion-content .history-container ion-card ion-card-header ion-card-title ion-item ion-icon[slot=start],ion-content .history-container ion-card ion-card-header ion-card-title ion-item mat-icon[slot=start]{margin-right:unset;margin-inline-end:16px!important;color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor}ion-content .history-container ion-card ion-card-header ion-card-title ion-item ion-text,ion-content .history-container ion-card ion-card-header ion-card-title ion-item ion-label{color:var(--ion-item-text-color)!important;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}ion-content .history-container ion-card ion-card-content ion-list{--ion-item-background: var(--ion-color-transparent)}ion-content .history-container ion-card ion-card-content ion-list ion-item{--ion-item-icon-color: var(--ion-color-dark);--ion-item-text-color: var(--ion-color-dark)}ion-content .history-container ion-card ion-card-content ion-list ion-item ion-icon[slot=start],ion-content .history-container ion-card ion-card-content ion-list ion-item mat-icon[slot=start]{color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor;margin-right:unset;margin-inline-end:16px!important}ion-content .history-container ion-card ion-card-content ion-list ion-item ion-text,ion-content .history-container ion-card ion-card-content ion-list ion-item ion-label{color:var(--ion-item-text-color)!important}ion-content .bottom-banner{--ion-card-background-color: rgba(var(--ion-background-color-rgb), .5);background-color:var(--ion-card-background-color);min-width:240px;z-index:0;border-radius:4px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);margin:16px}ion-content .bottom-banner img.logo{max-height:50px;margin-left:8px}ion-content .bottom-banner ion-list-header{min-height:30px}ion-content .bottom-banner ion-item{--min-height: 28px}ion-content .bottom-banner ion-item ion-label{margin-top:3px!important;margin-bottom:3px!important}ion-content ion-text{text-align:center}@media screen and (max-width: 575px){ion-content ion-card{min-width:160px;width:calc(100% - 20px);max-width:100%;margin-left:10px;margin-right:10px}ion-content ion-card h1{margin-top:0;font-size:20px}ion-content ion-card ion-card-content ion-button{margin-top:8px}ion-content .bottom-banner.floating{display:block;position:unset}ion-content .bottom-banner img.logo{max-height:30px}}@media screen and (max-width: 767px) and (min-width: 576px){ion-content{min-height:555px}ion-content .bottom-banner img.logo{max-height:40px}}@media screen and (min-width: 768px){ion-content{min-height:calc(100% - var(--bottom-banner-height))}}@media screen and (min-width: 1200px){ion-content ion-col.feed{height:fit-content;max-height:calc(100vh - var(--ion-toolbar-height) - var(--bottom-banner-height) - var(--ion-padding) * 2);padding-inline-end:calc(var(--ion-padding) - 10px);overflow:hidden}ion-content .bottom-banner.floating{position:fixed;left:0;right:0;bottom:0;overflow-y:auto;max-height:var(--bottom-banner-height);margin-top:0}}.content-credits{float:right}.content-credits.floating{float:unset;position:fixed;bottom:0;right:var(--scrollbar-width, 0)}.content-credits ion-text{padding-inline-start:4px;padding-inline-end:4px;font-size:.7rem;background-color:rgba(var(--ion-background-color-rgb),.5);color:rgba(var(--ion-text-color-rgb),.7)}@media screen and (min-width: 992px){.left-border{border-left:1px solid var(--ion-color-medium)}}\n"] }]
+            args: [{ selector: 'app-page-home', changeDetection: ChangeDetectionStrategy.OnPush, animations: [fadeInAnimation, slideUpDownAnimation, slideInAnimation], template: "<app-toolbar [canGoBack]=\"false\" visible-xs visible-sm visible-mobile>\n  <ion-buttons slot=\"end\">\n    @if (showNotificationIcon) {\n      <app-user-event-notification-icon [autoHide]=\"autoHideNotificationIcon\"></app-user-event-notification-icon>\n    }\n\n    <!-- dark mode (if allow by the environment token) -->\n    @if (settings.allowDarkMode) {\n      <ion-button (click)=\"toggleDarkMode()\">\n        <ion-icon slot=\"icon-only\" [name]=\"(darkMode$ | push) ? 'sunny' : 'moon'\"></ion-icon>\n      </ion-button>\n    }\n\n    <!-- Change locale button -->\n    <ion-button [matMenuTriggerFor]=\"localeMenu\">\n      <ion-icon slot=\"start\" name=\"language\"></ion-icon>\n    </ion-button>\n  </ion-buttons>\n</app-toolbar>\n\n<!-- Change locale menu -->\n<mat-menu #localeMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    @for (item of locales; track item.key) {\n      <button mat-menu-item (click)=\"changeLanguage(item.key)\">\n        <!--<mat-icon>{{ currentLocale === item.key ? 'checkmark' : undefined }}</mat-icon>-->\n        <ion-label>{{ item.value }}</ion-label>\n      </button>\n    }\n  </ng-template>\n</mat-menu>\n\n<ion-content [ngStyle]=\"contentStyle\" [class.has-scrollbar]=\"hasScrollbar\" no-padding-xs>\n  <!-- loading spinner -->\n  <div class=\"loading-page\" [class.cdk-visually-hidden]=\"!(loading$ | push)\">\n    @if (showSpinner) {\n      <div class=\"spinner\">\n        <p [innerHTML]=\"'COMMON.LOADING_DOTS' | translate\"></p>\n        <div class=\"sk-cube1 sk-cube\"></div>\n        <div class=\"sk-cube2 sk-cube\"></div>\n        <div class=\"sk-cube4 sk-cube\"></div>\n        <div class=\"sk-cube3 sk-cube\"></div>\n      </div>\n    }\n  </div>\n\n  <!-- Desktop: translucent top toolbar -->\n  @if (!mobile) {\n    <div class=\"hidden-xs hidden-sm\">\n      <ion-toolbar color=\"traansparent\" translucent>\n        <ion-buttons slot=\"start\">\n          <ion-menu-toggle>\n            <ion-button color=\"light\" fill=\"clear\">\n              <ion-icon slot=\"icon-only\" name=\"menu\"></ion-icon>\n            </ion-button>\n          </ion-menu-toggle>\n        </ion-buttons>\n\n        <ion-buttons slot=\"end\">\n          @if (showNotificationIcon) {\n            <app-user-event-notification-icon\n              [style]=\"'ion-button'\"\n              color=\"secondary\"\n              unreadColor=\"tertiary\"\n              fill=\"solid\"\n              [autoHide]=\"autoHideNotificationIcon\"\n            ></app-user-event-notification-icon>\n          }\n\n          <!-- dark mode (if allow by the environment token) -->\n          @if (settings.allowDarkMode) {\n            <ion-button\n              color=\"secondary\"\n              fill=\"solid\"\n              (click)=\"toggleDarkMode()\"\n              [title]=\"'HOME.BTN_DARK_MODE' | translate\"\n            >\n              <ion-icon slot=\"icon-only\" [name]=\"(darkMode$ | push) ? 'moon' : 'sunny'\"></ion-icon>\n            </ion-button>\n          }\n          <!-- change locale button -->\n          <ion-button\n            color=\"secondary\"\n            fill=\"solid\"\n            [matMenuTriggerFor]=\"localeMenu\"\n            [title]=\"'SETTINGS.LOCALE' | translate\"\n          >\n            <ion-icon slot=\"icon-only\" name=\"language\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </div>\n  }\n\n  <!-- Install (and upgrade) card -->\n  <app-install-upgrade-card [isLogin]=\"isLogin\" [showInstallButton]=\"true\"></app-install-upgrade-card>\n\n  @if (!(loading$ | push)) {\n    @let hasFeed = hasFeed$ | async;\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row>\n        <ion-col size=\"0\" [sizeXl]=\"hasFeed ? 3 : 0\"></ion-col>\n        <ion-col>\n          <!-- Welcome card -->\n          <ion-card class=\"main welcome ion-padding ion-text-center ion-align-self-center\" @fadeInAnimation>\n            <ion-card-header>\n              <ion-card-title class=\"ion-text-center\">\n                <span *ngIf=\"isWeb\" [innerHTML]=\"'HOME.WELCOME_WEB' | translate: { appName: appName }\"></span>\n                <span *ngIf=\"!isWeb\" [innerHTML]=\"'HOME.WELCOME_APP' | translate: { appName: appName }\"></span>\n              </ion-card-title>\n              <ion-card-subtitle [innerHTML]=\"description\"></ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content class=\"ion-no-padding\">\n              <ion-text color=\"primary\">\n                <img *ngIf=\"logo\" [attr.src]=\"logo\" alt=\"Logo\" />\n              </ion-text>\n              <!-- register help text -->\n              <ion-text *ngIf=\"!isLogin && canRegister\">\n                <br />\n                <span translate>HOME.REGISTER_HELP</span>\n              </ion-text>\n              <div class=\"ion-padding-top\">\n                <!-- If NOT login -->\n                <ng-container *ngIf=\"!isLogin; else loginButtons\">\n                  <ion-button *ngIf=\"canRegister\" expand=\"block\" color=\"tertiary\" (click)=\"register()\">\n                    <span translate>HOME.BTN_REGISTER</span>\n                  </ion-button>\n                  <ion-button expand=\"block\" color=\"light\" [routerLink]=\"['/']\" (click)=\"login()\">\n                    <span translate>AUTH.BTN_LOGIN</span>\n                  </ion-button>\n                </ng-container>\n\n                <!-- If user login -->\n                <ng-template #loginButtons>\n                  <!-- Feature buttons -->\n                  <ng-container *rxIf=\"$filteredButtons; let buttons\">\n                    <ng-container *ngFor=\"let item of buttons\">\n                      @if (item.path) {\n                        <ion-button\n                          expand=\"block\"\n                          color=\"tertiary\"\n                          [class]=\"item.cssClass\"\n                          [routerLink]=\"item.path\"\n                          routerDirection=\"root\"\n                        >\n                          <ion-icon slot=\"start\" class=\"ion-float-start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n                          <mat-icon slot=\"start\" class=\"ion-float-start\" *ngIf=\"item.matIcon\">\n                            {{ item.matIcon }}\n                          </mat-icon>\n                          <ion-label>{{ 'HOME.BTN_DATA_ENTRY' | translate: { name: (item.title | translate) } }}</ion-label>\n                          <ion-badge *rxIf=\"item.$badge; let badge\"\n                                     slot=\"end\"\n                                     [color]=\"(item.$badgeColor | push) || 'accent'\">\n                            {{badge}}\n                          </ion-badge>\n                        </ion-button>\n                      } @else {\n                        <!-- divider -->\n                        <div *ngIf=\"!item.action\" [class]=\"item.cssClass\" class=\"button-divider\">\n                          <ion-label translate>{{ item.title }}&nbsp;</ion-label>\n                        </div>\n                      }\n                    </ng-container>\n\n                    <!--<p *ngIf=\"buttons.length\" class=\"visible-mobile\">&nbsp;</p>-->\n                  </ng-container>\n\n                  <ion-button *ngIf=\"showAccountButton\" expand=\"block\" color=\"secondary\" [routerLink]=\"['/account']\">\n                    <ion-icon slot=\"start\" class=\"ion-float-start\" name=\"person-circle\"></ion-icon>\n                    <ion-text translate>HOME.BTN_MY_ACCOUNT</ion-text>\n                  </ion-button>\n\n                  <p hidden-xs hidden-sm hidden-mobile>\n                    <ion-text\n                      [innerHTML]=\"'HOME.NOT_THIS_ACCOUNT_QUESTION' | translate: { displayName: accountName }\"\n                    ></ion-text>\n                    <br />\n                    <ion-text>\n                      <a href=\"#\" (click)=\"logout($event)\">\n                        <span translate>HOME.BTN_DISCONNECT</span>\n                      </a>\n                    </ion-text>\n                  </p>\n                </ng-template>\n              </div>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n        <ion-col size=\"0\" [sizeXl]=\"hasFeed ? 1 : 0\"></ion-col>\n        <ion-col [class.feed]=\"hasFeed\" [size]=\"hasFeed ? 12 : 0\" [sizeXl]=\"hasFeed ? 4 : 0\">\n          @if (showFeed) {\n            @if (mobile) {\n              <app-feed\n                #feed\n                shape=\"round\"\n                [urls]=\"feedUrls\"\n                [maxAgeInMonths]=\"feedMaxAgeInMonths\"\n                [maxContentLength]=\"feedMaxContentLength\"\n                (ngInit)=\"initFeed(feed)\"\n                @fadeInAnimation\n              ></app-feed>\n            } @else {\n              <app-feed\n                #feed\n                shape=\"round\"\n                [debug]=\"false\"\n                [urls]=\"feedUrls\"\n                [maxAgeInMonths]=\"feedMaxAgeInMonths\"\n                [maxContentLength]=\"feedMaxContentLength\"\n                (ngInit)=\"initFeed(feed)\"\n                @slideInAnimation\n                @fadeInAnimation\n              ></app-feed>\n            }\n          }\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n    <!-- Page history -->\n    @let pageHistory = isLogin && (pageHistory$ | push);\n    @if (pageHistory | isNotEmptyArray) {\n      <ion-grid class=\"history-container ion-align-self-center\">\n        <ion-row>\n          @for (page of pageHistory; track page.path) {\n            <ion-col size=\"12\" size-xl=\"\" class=\"ion-text-center\">\n              <ion-card class=\"ion-align-self-start ion-text-start\" @fadeInAnimation>\n                <ion-card-header class=\"ion-no-padding\">\n                  <!-- top bar -->\n                  <ion-card-subtitle>\n                    <button\n                      type=\"button\"\n                      tabindex=\"-1\"\n                      (click)=\"removePageHistory(page.path)\"\n                      mat-icon-button\n                      class=\"ion-float-start ion-no-margin close-button\"\n                    >\n                      <mat-icon>close</mat-icon>\n                    </button>\n                    <ion-label [innerHTML]=\"page.subtitle | translate\"></ion-label>\n                    <ion-text class=\"ion-float-end\" [title]=\"page.time | dateFormat: { time: true }\">\n                      <small>\n                        <ion-icon name=\"time-outline\"></ion-icon>\n                        &nbsp;{{ page.time | dateFromNow }}\n                      </small>\n                      &nbsp;\n                    </ion-text>\n                  </ion-card-subtitle>\n\n                  <!-- main page -->\n                  <ion-card-title class=\"ion-no-margin ion-no-padding\">\n                    <ion-item\n                      detail=\"true\"\n                      tappable\n                      class=\"text-1x\"\n                      [routerLink]=\"page.path\"\n                      routerDirection=\"root\"\n                      lines=\"none\"\n                    >\n                      <!-- page icon-->\n                      <ion-icon *ngIf=\"page.icon\" slot=\"start\" [name]=\"page.icon\"></ion-icon>\n                      <mat-icon *ngIf=\"page.matIcon\" slot=\"start\">{{ page.matIcon }}</mat-icon>\n\n                      <ion-label color=\"primary\" [innerHTML]=\"page.title\"></ion-label>\n                    </ion-item>\n                  </ion-card-title>\n                </ion-card-header>\n\n                <!-- children pages -->\n                @if (page.children | isNotEmptyArray) {\n                  <ion-card-content class=\"ion-no-padding ion-padding-start\">\n                    <ion-list class=\"ion-no-padding\">\n                      @for (childPage of page.children; track childPage.path) {\n                        <ion-item\n                          detail=\"true\"\n                          tappable\n                          class=\"text-1x\"\n                          [routerLink]=\"childPage.path\"\n                          routerDirection=\"root\"\n                        >\n                          <!-- page icon-->\n                          <ion-icon *ngIf=\"childPage.icon\" slot=\"start\" color=\"dark\" [name]=\"childPage.icon\"></ion-icon>\n                          <mat-icon *ngIf=\"childPage.matIcon\" slot=\"start\" color=\"dark\">\n                            {{ childPage.matIcon }}\n                          </mat-icon>\n\n                          <ion-label color=\"dark\" [innerHTML]=\"childPage.title\"></ion-label>\n                        </ion-item>\n                      }\n                    </ion-list>\n                  </ion-card-content>\n                }\n              </ion-card>\n            </ion-col>\n          }\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Bottom banner -->\n    @if (showPartnerBanner || showLegalInformation) {\n      <ion-grid\n        class=\"bottom-banner ion-text-center\"\n        [class.floating]=\"!mobile && (pageHistory | isEmptyArray)\"\n        @fadeInAnimation\n      >\n        <ion-row>\n          <!-- partners logos -->\n          @if (showPartnerBanner) {\n            <ion-col size=\"12\" [sizeLg]=\"partnerBannerSize\" class=\"ion-text-center\">\n              @if (showLegalInformation) {\n                <ion-list class=\"legal-info\">\n                  <ion-list-header>{{ 'HOME.PARTNERS' | translate }}</ion-list-header>\n                </ion-list>\n              }\n              <!-- partners -->\n              @for (item of $partners | async; track $index) {\n                <a href=\"{{ item.siteUrl }}\">\n                  <img class=\"logo\" src=\"{{ item.logo }}\" alt=\"{{ item.label }}\" [title]=\"item.label\" />\n                </a>\n              }\n            </ion-col>\n          }\n\n          <!-- legal information -->\n          @if (showLegalInformation) {\n            <ion-col size=\"12\" size-sm=\"6\" size-lg=\"4\" [class.left-border]=\"showPartnerBanner\">\n              <ion-list class=\"legal-info\">\n                <ion-list-header class=\"ion-text-left\">{{ 'HOME.LEGAL_INFORMATION' | translate }}</ion-list-header>\n                @for (item of legalInformation; track item.path) {\n                  <ion-item (click)=\"openMarkdownModal($event, item)\" lines=\"none\" [button]=\"true\">\n                    <ion-label>\n                      <p>\n                        {{ item.title | translate: item.titleArgs }}\n                      </p>\n                    </ion-label>\n                  </ion-item>\n                }\n              </ion-list>\n            </ion-col>\n            @if (showInstallLinks) {\n              <ion-col size=\"12\" size-lg=\"3\" offset-lg=\"9\" [class.left-border]=\"showPartnerBanner\">\n                <ion-list class=\"legal-info\">\n                  <ion-list-header>{{ 'HOME.INSTALL_APP' | translate }}</ion-list-header>\n                  <!-- TODO -->\n                </ion-list>\n              </ion-col>\n            }\n          }\n        </ion-row>\n      </ion-grid>\n    }\n  }\n\n  <!-- image credits -->\n  @if (contentCredits | isNotNilOrBlank) {\n    <div class=\"content-credits\" [class.floating]=\"!mobile\">\n      <ion-text>{{ contentCredits }}</ion-text>\n    </div>\n  }\n</ion-content>\n", styles: [":host{--ion-card-background-color: rgba(var(--ion-background-color-rgb), .7);--scrollbar-width: 0;--bottom-banner-height: 122px}h1,h2,h3,h4,h5{white-space:normal}.center,ion-content ion-card.welcome img{text-align:center;display:inline-block}ion-content{--background: transparent;background-size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-color:var(--ion-background-color);display:inline-block;padding:15px}ion-content.has-scrollbar{--scrollbar-width: 8px}ion-content .loading-page{display:block;height:100%;width:100%;position:absolute;background-color:transparent;z-index:5;transition:background .5s linear;-webkit-transition:background 1.5s linear}ion-content .loading-page.hidden{background-color:rgba(var(--ion-color-primary),0)}ion-content ion-card{z-index:9;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}ion-content ion-card ion-card-header{display:block}ion-content ion-card ion-card-header ion-card-subtitle,ion-content ion-card ion-card-header ion-card-title{display:block;width:100%}ion-content ion-card.main{min-width:240px;max-width:400px;margin-left:auto;margin-right:auto}ion-content ion-card.welcome{background-color:var(--ion-card-background-color)}ion-content ion-card.welcome .button-divider{margin-top:16px}ion-content ion-card.welcome img{max-width:250px}ion-content .history-container{margin-left:auto;margin-right:auto}ion-content .history-container ion-card{display:inline-block;box-sizing:border-box;z-index:8;min-width:240px;max-width:400px;width:100%;margin-left:auto;margin-right:auto;background-color:var(--ion-card-background-color);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}ion-content .history-container ion-card ion-card-header ion-card-subtitle{height:40px}ion-content .history-container ion-card ion-card-header ion-card-subtitle button[float-start]{--mdc-icon-button-state-layer-size: 40px;padding:8px;z-index:99;margin:0}ion-content .history-container ion-card ion-card-header ion-card-subtitle ion-label{line-height:40px}ion-content .history-container ion-card ion-card-header ion-card-subtitle ion-label[float-end]{padding-right:16px;font-weight:400}ion-content .history-container ion-card ion-card-header ion-card-title ion-item{width:100%;--ion-item-background: $transparent;--ion-item-icon-color: var(--ion-color-primary);--ion-item-text-color: var(--ion-color-primary)}ion-content .history-container ion-card ion-card-header ion-card-title ion-item ion-icon[slot=start],ion-content .history-container ion-card ion-card-header ion-card-title ion-item mat-icon[slot=start]{margin-right:unset;margin-inline-end:16px!important;color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor}ion-content .history-container ion-card ion-card-header ion-card-title ion-item ion-text,ion-content .history-container ion-card ion-card-header ion-card-title ion-item ion-label{color:var(--ion-item-text-color)!important;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}ion-content .history-container ion-card ion-card-content ion-list{--ion-item-background: var(--ion-color-transparent)}ion-content .history-container ion-card ion-card-content ion-list ion-item{--ion-item-icon-color: var(--ion-color-dark);--ion-item-text-color: var(--ion-color-dark)}ion-content .history-container ion-card ion-card-content ion-list ion-item ion-icon[slot=start],ion-content .history-container ion-card ion-card-content ion-list ion-item mat-icon[slot=start]{color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor;margin-right:unset;margin-inline-end:16px!important}ion-content .history-container ion-card ion-card-content ion-list ion-item ion-text,ion-content .history-container ion-card ion-card-content ion-list ion-item ion-label{color:var(--ion-item-text-color)!important}ion-content .bottom-banner{--ion-card-background-color: rgba(var(--ion-background-color-rgb), .5);background-color:var(--ion-card-background-color);min-width:240px;z-index:0;border-radius:4px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);margin:16px}ion-content .bottom-banner img.logo{max-height:50px;margin-left:8px}ion-content .bottom-banner ion-list-header{min-height:30px}ion-content .bottom-banner ion-item{--min-height: 28px}ion-content .bottom-banner ion-item ion-label{margin-top:3px!important;margin-bottom:3px!important}ion-content ion-text{text-align:center}@media screen and (max-width: 575px){ion-content ion-card{min-width:160px;width:calc(100% - 20px);max-width:100%;margin-left:10px;margin-right:10px}ion-content ion-card h1{margin-top:0;font-size:20px}ion-content ion-card ion-card-content ion-button{margin-top:8px}ion-content .bottom-banner.floating{display:block;position:unset}ion-content .bottom-banner img.logo{max-height:30px}}@media screen and (max-width: 767px) and (min-width: 576px){ion-content{min-height:555px}ion-content .bottom-banner img.logo{max-height:40px}}@media screen and (min-width: 768px){ion-content{min-height:calc(100% - var(--bottom-banner-height))}}@media screen and (min-width: 1200px){ion-content ion-col.feed{height:fit-content;max-height:calc(100vh - var(--ion-toolbar-height) - var(--bottom-banner-height) - var(--ion-padding) * 2);padding-inline-end:calc(var(--ion-padding) - 10px);overflow:hidden}ion-content .bottom-banner.floating{position:fixed;left:0;right:0;bottom:0;overflow-y:auto;max-height:var(--bottom-banner-height);margin-top:0}}.content-credits{float:right}.content-credits.floating{float:unset;position:fixed;bottom:0;right:var(--scrollbar-width, 0)}.content-credits ion-text{padding-inline-start:4px;padding-inline-end:4px;font-size:.7rem;background-color:rgba(var(--ion-background-color-rgb),.5);color:rgba(var(--ion-text-color-rgb),.7)}@media screen and (min-width: 992px){.left-border{border-left:1px solid var(--ion-color-medium)}}\n"] }]
         }], ctorParameters: () => [{ type: AccountService }, { type: i2$1.ModalController }, { type: i1$1.TranslateService }, { type: i2$1.ToastController }, { type: ConfigService }, { type: PlatformService }, { type: i0.ChangeDetectorRef }, { type: NetworkService }, { type: LocalSettingsService }, { type: Environment, decorators: [{
                     type: Inject,
                     args: [ENVIRONMENT]
@@ -36716,7 +36743,7 @@ class AppPropertiesForm extends AppForm {
         return isNil(obj?.key) || isNil(obj.value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppPropertiesForm, deps: [{ token: i0.Injector }, { token: i1$3.UntypedFormBuilder }, { token: i2.DateAdapter }, { token: i0.ChangeDetectorRef }, { token: PropertyValidator }, { token: i1$3.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AppPropertiesForm, selector: "app-properties-form", inputs: { showToolbar: ["showToolbar", "showToolbar", booleanAttribute], formArrayName: "formArrayName", formArray: "formArray", options: "options", chipColor: "chipColor", mobile: ["mobile", "mobile", booleanAttribute], appearance: "appearance", subscriptSizing: "subscriptSizing", showHintKey: ["showHintKey", "showHintKey", booleanAttribute], hintKeyPrefix: "hintKeyPrefix", showMoreButton: ["showMoreButton", "showMoreButton", booleanAttribute], addButtonText: "addButtonText", addButtonTitle: "addButtonTitle", showAddButton: ["showAddButton", "showAddButton", booleanAttribute], panelClass: "panelClass", panelWidth: "panelWidth", canDownload: ["canDownload", "canDownload", booleanAttribute], canImport: ["canImport", "canImport", booleanAttribute], showMoreButtonTitle: "showMoreButtonTitle", definitions: "definitions", importPolicy: "importPolicy" }, providers: [{ provide: PropertyValidator, useClass: PropertyValidator }, RxState], usesInheritance: true, ngImport: i0, template: "@if (showToolbar) {\n  <mat-toolbar>\n    <div class=\"toolbar-spacer\"></div>\n\n    <ion-item lines=\"none\" (click)=\"toggleShowHintKeys()\">\n      <ion-label color=\"dark\">{{ 'FILE.PROPERTIES.BTN_SHOW_HINT_KEY' | translate }}</ion-label>\n      <ion-toggle color=\"primary\" [checked]=\"showHintKey\"></ion-toggle>\n    </ion-item>\n\n    <!-- options sub menu -->\n    @if (canDownload || canImport) {\n      <button slot=\"end\" mat-icon-button [matMenuTriggerFor]=\"optionsMenu\" [title]=\"'COMMON.BTN_OPTIONS' | translate\">\n        <mat-icon>more_vert</mat-icon>\n      </button>\n    }\n\n  </mat-toolbar>\n}\n\n<!-- Options menu -->\n<mat-menu #optionsMenu=\"matMenu\">\n  <!-- Download as CSV -->\n  @if (canDownload) {\n    <button mat-menu-item [disabled]=\"loading\" [matMenuTriggerFor]=\"downloadMenu\">\n      <mat-icon>download</mat-icon>\n      <ion-label translate>COMMON.BTN_DOWNLOAD_DOTS</ion-label>\n    </button>\n  }\n\n  <!-- Import from file -->\n  @if (canImport) {\n    <button mat-menu-item [disabled]=\"loading || disabled\" [matMenuTriggerFor]=\"importMenu\">\n      <mat-icon>upload</mat-icon>\n      <ion-label translate>COMMON.BTN_IMPORT_FROM_FILE_DOTS</ion-label>\n    </button>\n  }\n</mat-menu>\n\n<!-- Download menu -->\n<mat-menu #downloadMenu=\"matMenu\">\n  <button mat-menu-item [disabled]=\"loading\" (click)=\"exportToCsv()\">\n    <ion-label translate>FILE.PROPERTIES.BTN_DOWNLOAD_AS_CSV</ion-label>\n  </button>\n</mat-menu>\n\n<!-- Import menu -->\n<mat-menu #importMenu=\"matMenu\">\n  <!-- import from file -->\n  <button mat-menu-item (click)=\"importFromCsv($event)\">\n    <ion-label translate>FILE.PROPERTIES.BTN_IMPORT_FROM_CSV</ion-label>\n  </button>\n\n  <!-- import policy -->\n  <mat-divider></mat-divider>\n  <button mat-menu-item [matMenuTriggerFor]=\"importPolicyMenu\">\n    <ion-label translate>FILE.UPLOAD.BTN_IMPORT_POLICY_DOTS</ion-label>\n  </button>\n</mat-menu>\n\n<!-- Import policy menu -->\n<mat-menu #importPolicyMenu=\"matMenu\" class=\"ion-no-padding\">\n  <ng-template matMenuContent>\n    <!-- header-->\n    <ion-row class=\"mat-menu-header ion-no-padding column\">\n      <ion-col>\n        <ion-label translate>FILE.UPLOAD.IMPORT_POLICY.TITLE</ion-label>\n      </ion-col>\n    </ion-row>\n    @for (policy of _importPolicies; track policy) {\n      <button mat-menu-item (click)=\"importPolicy = policy\">\n        <mat-icon>{{ importPolicy === policy ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n        <ion-label>{{ 'FILE.UPLOAD.IMPORT_POLICY.' + policy | uppercase | translate }}</ion-label>\n      </button>\n    }\n  </ng-template>\n</mat-menu>\n\n<!-- Properties -->\n<form [formGroup]=\"form\" class=\"form-container\">\n  @if (loadingSubject | async) {\n    <ion-list [inset]=\"mobile\">\n      <ng-container *ngTemplateOutlet=\"propertyRowSkeleton\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"propertyRowSkeleton\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"propertyRowSkeleton\"></ng-container>\n    </ion-list>\n  } @else {\n    <ion-list formArrayName=\"properties\" [inset]=\"mobile\">\n      <!-- Show more options -->\n      @if ((_definitionKeys$ | async | isNotEmptyArray) && formArray?.length === 0) {\n        <ion-item lines=\"none\">\n          <ion-button color=\"light\" [title]=\"addButtonTitle | translate\" (click)=\"_helper.add()\">\n            <ion-label>{{ addButtonText | translate }}</ion-label>\n            <mat-icon slot=\"end\">arrow_drop_down</mat-icon>\n          </ion-button>\n        </ion-item>\n      }\n\n      @for (fieldForm of fieldForms; track i; let i = $index) {\n        <ion-item lines=\"none\" [class.outline]=\"appearance === 'outline'\">\n          <ion-grid class=\"ion-no-padding\">\n            <ion-row [formGroupName]=\"i\" class=\"ion-no-padding\">\n              @let definition = getDefinitionAt(i);\n\n              <!-- property key -->\n              @if (fieldForm | formGetControl: 'key'; as control) {\n                <ion-col\n                  size=\"12\"\n                  size-sm=\"6\"\n                  [title]=\"(definition | propertyGet: 'label' | translate) || ''\"\n                  class=\"ion-no-padding\"\n                >\n                  <mat-autocomplete-field\n                    floatLabel=\"auto\"\n                    [formControl]=\"control\"\n                    [appearance]=\"appearance\"\n                    [subscriptSizing]=\"showHintKey ? 'fixed' : subscriptSizing\"\n                    (selectionChange)=\"updateDefinitionAt(i)\"\n                    [tabindex]=\"tabindex + i * 2\"\n                    [config]=\"_autocompleteConfig\"\n                    [placeholder]=\"'SETTINGS.PROPERTY_KEY' | translate\"\n                    [required]=\"true\"\n                    (focus)=\"_focusedControlIndex = i\"\n                    [readonly]=\"definition?.disabled\"\n                    [mobile]=\"mobile\"\n                    [panelClass]=\"panelClass\"\n                    [panelWidth]=\"panelWidth\"\n                  >\n                    <mat-hint [class.cdk-visually-hidden]=\"!showHintKey\">\n                      @let keyValue = control.value;\n                      {{ hintKeyPrefix || '' }}{{ keyValue?.key || keyValue || '' }}\n                    </mat-hint>\n                  </mat-autocomplete-field>\n                </ion-col>\n              }\n\n              <!-- property value -->\n              <ion-col size=\"\" size-sm=\"\" class=\"ion-no-padding ion-padding-start-xs\">\n                @if (definition) {\n                  <app-form-field\n                    floatLabel=\"auto\"\n                    [label]=\"mobile ? ('SETTINGS.PROPERTY_VALUE' | translate) : ' '\"\n                    [appearance]=\"appearance\"\n                    [subscriptSizing]=\"subscriptSizing\"\n                    [definition]=\"definition\"\n                    [formControl]=\"fieldForm | formGetControl: 'value'\"\n                    [placeholder]=\"'SETTINGS.PROPERTY_VALUE' | translate\"\n                    [chipColor]=\"chipColor\"\n                    [required]=\"true\"\n                    [hideRequiredMarker]=\"true\"\n                    [tabindex]=\"tabindex + i * 2 + 1\"\n                    [readonly]=\"definition?.disabled\"\n                    [panelClass]=\"panelClass\"\n                    [panelWidth]=\"panelWidth\"\n                  ></app-form-field>\n                } @else {\n                  <!-- unknown definition -->\n                  <mat-form-field [appearance]=\"appearance\" [subscriptSizing]=\"subscriptSizing\">\n                    @if (mobile) {\n                      <mat-label>{{ 'SETTINGS.PROPERTY_VALUE' | translate }}</mat-label>\n                    }\n                    <input\n                      type=\"text\"\n                      matInput\n                      [formControl]=\"fieldForm | formGetControl: 'value'\"\n                      [placeholder]=\"mobile ? '' : ('SETTINGS.PROPERTY_VALUE' | translate)\"\n                      [required]=\"true\"\n                      [tabindex]=\"20 + i * 2 + 1\"\n                    />\n                  </mat-form-field>\n                }\n              </ion-col>\n\n              <ion-col size=\"auto\" class=\"ion-no-padding\">\n                @if (_helper.isLast(i)) {\n                  <button\n                    type=\"button\"\n                    mat-icon-button\n                    color=\"light\"\n                    [disabled]=\"\n                      disabled || (fieldForm.value | asBoolean: isEmptyProperty) || (_definitionKeys | isEmptyArray)\n                    \"\n                    [title]=\"'SETTINGS.BTN_ADD_PROPERTY' | translate\"\n                    (click)=\"_helper.add()\"\n                    [tabindex]=\"20 + i * 2 + 2\"\n                  >\n                    <mat-icon>add</mat-icon>\n                  </button>\n                }\n                <button\n                  type=\"button\"\n                  mat-icon-button\n                  color=\"light\"\n                  [disabled]=\"definition?.disabled || disabled\"\n                  [title]=\"'COMMON.BTN_DELETE' | translate\"\n                  (click)=\"removeAt(i)\"\n                  [tabindex]=\"-1\"\n                >\n                  <mat-icon>close</mat-icon>\n                </button>\n              </ion-col>\n            </ion-row>\n          </ion-grid>\n        </ion-item>\n      }\n    </ion-list>\n  }\n</form>\n\n<ng-template #propertyRowSkeleton>\n  <ion-item lines=\"none\">\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row class=\"ion-no-padding\">\n        <!-- property key -->\n        <ion-col size=\"6\" class=\"ion-no-padding\">\n          <mat-form-field [subscriptSizing]=\"subscriptSizing\">\n            <input matInput hidden disabled />\n            <ion-skeleton-text [animated]=\"true\" style=\"width: 60%\"></ion-skeleton-text>\n            <ion-icon name=\"arrow-dropdown\" matSuffix></ion-icon>\n          </mat-form-field>\n        </ion-col>\n        <!-- value -->\n        <ion-col class=\"ion-no-padding\">\n          <mat-form-field [subscriptSizing]=\"subscriptSizing\">\n            <input matInput hidden disabled />\n            <ion-skeleton-text [animated]=\"true\" style=\"width: 60%\"></ion-skeleton-text>\n          </mat-form-field>\n        </ion-col>\n        <!-- buttons -->\n        <ion-col size=\"auto\">\n          <button type=\"button\" mat-icon-button color=\"light\" disabled>\n            <mat-icon>close</mat-icon>\n          </button>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </ion-item>\n</ng-template>\n", styles: [":host ion-item ion-row ion-col{--ion-padding-start: 0;min-width:48px}:host ion-item.outline{overflow:visible}:host ion-item.outline ion-grid,:host ion-item.outline ion-row,:host ion-item.outline ion-col{overflow:visible}\n"], dependencies: [{ kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$1.IonToggle, selector: "ion-toggle", inputs: ["alignment", "checked", "color", "disabled", "enableOnOffLabels", "justify", "labelPlacement", "legacy", "mode", "name", "value"] }, { kind: "directive", type: i2$1.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i12.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i12.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i12.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i12.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i9.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "label", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "hideRequiredMarker", "mobile", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "reloadItemsOnFocus", "clearInvalidValueOnBlur", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "splitSearchText", "selectInputContentOnFocus", "selectInputContentOnFocusDelay", "previewImplicitValue", "showFavorites", "toggleFavoriteTitle", "favoriteItems", "colSizes", "class", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keydown.backspace", "keyup.enter", "selectionChange", "openedChange", "toggleFavorite"] }, { kind: "component", type: AppFormField, selector: "app-form-field", inputs: ["definition", "readonly", "disabled", "formControl", "formControlName", "placeholder", "compact", "required", "hideRequiredMarker", "floatLabel", "label", "appearance", "subscriptSizing", "tabindex", "autofocus", "clearable", "chipColor", "class", "debug", "panelClass", "panelWidth"], outputs: ["keyup.enter"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: NotEmptyArrayPipe, name: "isNotEmptyArray" }, { kind: "pipe", type: EmptyArrayPipe, name: "isEmptyArray" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: AsBooleanPipe, name: "asBoolean" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AppPropertiesForm, selector: "app-properties-form", inputs: { showToolbar: ["showToolbar", "showToolbar", booleanAttribute], formArrayName: "formArrayName", formArray: "formArray", options: "options", chipColor: "chipColor", mobile: ["mobile", "mobile", booleanAttribute], appearance: "appearance", subscriptSizing: "subscriptSizing", showHintKey: ["showHintKey", "showHintKey", booleanAttribute], hintKeyPrefix: "hintKeyPrefix", showMoreButton: ["showMoreButton", "showMoreButton", booleanAttribute], addButtonText: "addButtonText", addButtonTitle: "addButtonTitle", showAddButton: ["showAddButton", "showAddButton", booleanAttribute], panelClass: "panelClass", panelWidth: "panelWidth", canDownload: ["canDownload", "canDownload", booleanAttribute], canImport: ["canImport", "canImport", booleanAttribute], showMoreButtonTitle: "showMoreButtonTitle", definitions: "definitions", importPolicy: "importPolicy" }, providers: [{ provide: PropertyValidator, useClass: PropertyValidator }, RxState], usesInheritance: true, ngImport: i0, template: "@if (showToolbar) {\n  <mat-toolbar>\n    <div class=\"toolbar-spacer\"></div>\n\n    <ion-item lines=\"none\" (click)=\"toggleShowHintKeys()\">\n      <ion-label color=\"dark\">{{ 'FILE.PROPERTIES.BTN_SHOW_HINT_KEY' | translate }}</ion-label>\n      <ion-toggle color=\"primary\" [checked]=\"showHintKey\"></ion-toggle>\n    </ion-item>\n\n    <!-- options sub menu -->\n    @if (canDownload || canImport) {\n      <button slot=\"end\" mat-icon-button [matMenuTriggerFor]=\"optionsMenu\" [title]=\"'COMMON.BTN_OPTIONS' | translate\">\n        <mat-icon>more_vert</mat-icon>\n      </button>\n    }\n\n  </mat-toolbar>\n}\n\n<!-- Options menu -->\n<mat-menu #optionsMenu=\"matMenu\">\n  <!-- Download as CSV -->\n  @if (canDownload) {\n    <button mat-menu-item [disabled]=\"loading\" [matMenuTriggerFor]=\"downloadMenu\">\n      <mat-icon>download</mat-icon>\n      <ion-label translate>COMMON.BTN_DOWNLOAD_DOTS</ion-label>\n    </button>\n  }\n\n  <!-- Import from file -->\n  @if (canImport) {\n    <button mat-menu-item [disabled]=\"loading || disabled\" [matMenuTriggerFor]=\"importMenu\">\n      <mat-icon>upload</mat-icon>\n      <ion-label translate>COMMON.BTN_IMPORT_FROM_FILE_DOTS</ion-label>\n    </button>\n  }\n</mat-menu>\n\n<!-- Download menu -->\n<mat-menu #downloadMenu=\"matMenu\">\n  <button mat-menu-item [disabled]=\"loading\" (click)=\"exportToCsv()\">\n    <ion-label translate>FILE.PROPERTIES.BTN_DOWNLOAD_AS_CSV</ion-label>\n  </button>\n</mat-menu>\n\n<!-- Import menu -->\n<mat-menu #importMenu=\"matMenu\">\n  <!-- import from file -->\n  <button mat-menu-item (click)=\"importFromCsv($event)\">\n    <ion-label translate>FILE.PROPERTIES.BTN_IMPORT_FROM_CSV</ion-label>\n  </button>\n\n  <!-- import policy -->\n  <mat-divider></mat-divider>\n  <button mat-menu-item [matMenuTriggerFor]=\"importPolicyMenu\">\n    <ion-label translate>FILE.UPLOAD.BTN_IMPORT_POLICY_DOTS</ion-label>\n  </button>\n</mat-menu>\n\n<!-- Import policy menu -->\n<mat-menu #importPolicyMenu=\"matMenu\" class=\"ion-no-padding\">\n  <ng-template matMenuContent>\n    <!-- header-->\n    <ion-row class=\"mat-menu-header ion-no-padding column\">\n      <ion-col>\n        <ion-label translate>FILE.UPLOAD.IMPORT_POLICY.TITLE</ion-label>\n      </ion-col>\n    </ion-row>\n    @for (policy of _importPolicies; track policy) {\n      <button mat-menu-item (click)=\"importPolicy = policy\">\n        <mat-icon>{{ importPolicy === policy ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n        <ion-label>{{ 'FILE.UPLOAD.IMPORT_POLICY.' + policy | uppercase | translate }}</ion-label>\n      </button>\n    }\n  </ng-template>\n</mat-menu>\n\n<!-- Properties -->\n<form [formGroup]=\"form\" class=\"form-container\">\n  @if (loadingSubject | async) {\n    <ion-list [inset]=\"mobile\">\n      <ng-container *ngTemplateOutlet=\"propertyRowSkeleton\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"propertyRowSkeleton\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"propertyRowSkeleton\"></ng-container>\n    </ion-list>\n  } @else {\n    <ion-list formArrayName=\"properties\" [inset]=\"mobile\">\n      <!-- Show more options -->\n      @if ((_definitionKeys$ | async | isNotEmptyArray) && formArray?.length === 0) {\n        <ion-item lines=\"none\">\n          <ion-button color=\"light\" [title]=\"addButtonTitle | translate\" (click)=\"_helper.add()\">\n            <ion-label>{{ addButtonText | translate }}</ion-label>\n            <mat-icon slot=\"end\">arrow_drop_down</mat-icon>\n          </ion-button>\n        </ion-item>\n      }\n\n      @for (fieldForm of fieldForms; track i; let i = $index) {\n        <ion-item lines=\"none\" [class.outline]=\"appearance === 'outline'\">\n          <ion-grid class=\"ion-no-padding\">\n            <ion-row [formGroupName]=\"i\" class=\"ion-no-padding\">\n              @let definition = getDefinitionAt(i);\n\n              <!-- property key -->\n              @if (fieldForm | formGetControl: 'key'; as control) {\n                <ion-col\n                  size=\"12\"\n                  size-sm=\"6\"\n                  [title]=\"(definition | propertyGet: 'label' | translate) || ''\"\n                  class=\"ion-no-padding\"\n                >\n                  <mat-autocomplete-field\n                    floatLabel=\"auto\"\n                    [formControl]=\"control\"\n                    [appearance]=\"appearance\"\n                    [subscriptSizing]=\"showHintKey ? 'fixed' : subscriptSizing\"\n                    (selectionChange)=\"updateDefinitionAt(i)\"\n                    [tabindex]=\"tabindex + i * 2\"\n                    [config]=\"_autocompleteConfig\"\n                    [placeholder]=\"'SETTINGS.PROPERTY_KEY' | translate\"\n                    [required]=\"true\"\n                    (focus)=\"_focusedControlIndex = i\"\n                    [readonly]=\"definition?.disabled\"\n                    [mobile]=\"mobile\"\n                    [panelClass]=\"panelClass\"\n                    [panelWidth]=\"panelWidth\"\n                  >\n                    <mat-hint [class.cdk-visually-hidden]=\"!showHintKey\">\n                      @let keyValue = control.value;\n                      {{ hintKeyPrefix || '' }}{{ keyValue?.key || keyValue || '' }}\n                    </mat-hint>\n                  </mat-autocomplete-field>\n                </ion-col>\n              }\n\n              <!-- property value -->\n              <ion-col size=\"\" size-sm=\"\" class=\"ion-no-padding ion-padding-start-xs\">\n                @if (definition) {\n                  <app-form-field\n                    floatLabel=\"auto\"\n                    [label]=\"mobile ? ('SETTINGS.PROPERTY_VALUE' | translate) : ' '\"\n                    [appearance]=\"appearance\"\n                    [subscriptSizing]=\"subscriptSizing\"\n                    [definition]=\"definition\"\n                    [formControl]=\"fieldForm | formGetControl: 'value'\"\n                    [placeholder]=\"'SETTINGS.PROPERTY_VALUE' | translate\"\n                    [chipColor]=\"chipColor\"\n                    [required]=\"true\"\n                    [hideRequiredMarker]=\"true\"\n                    [tabindex]=\"tabindex + i * 2 + 1\"\n                    [readonly]=\"definition?.disabled\"\n                    [panelClass]=\"panelClass\"\n                    [panelWidth]=\"panelWidth\"\n                  ></app-form-field>\n                } @else {\n                  <!-- unknown definition -->\n                  <mat-form-field [appearance]=\"appearance\" [subscriptSizing]=\"subscriptSizing\">\n                    @if (mobile) {\n                      <mat-label>{{ 'SETTINGS.PROPERTY_VALUE' | translate }}</mat-label>\n                    }\n                    <input\n                      type=\"text\"\n                      matInput\n                      [formControl]=\"fieldForm | formGetControl: 'value'\"\n                      [placeholder]=\"mobile ? '' : ('SETTINGS.PROPERTY_VALUE' | translate)\"\n                      [required]=\"true\"\n                      [tabindex]=\"20 + i * 2 + 1\"\n                    />\n                  </mat-form-field>\n                }\n              </ion-col>\n\n              <ion-col size=\"auto\" class=\"ion-no-padding\">\n                @if (_helper.isLast(i)) {\n                  <button\n                    type=\"button\"\n                    mat-icon-button\n                    color=\"light\"\n                    [disabled]=\"\n                      disabled || (fieldForm.value | asBoolean: isEmptyProperty) || (_definitionKeys | isEmptyArray)\n                    \"\n                    [title]=\"'SETTINGS.BTN_ADD_PROPERTY' | translate\"\n                    (click)=\"_helper.add()\"\n                    [tabindex]=\"20 + i * 2 + 2\"\n                  >\n                    <mat-icon>add</mat-icon>\n                  </button>\n                }\n                <button\n                  type=\"button\"\n                  mat-icon-button\n                  color=\"light\"\n                  [disabled]=\"definition?.disabled || disabled\"\n                  [title]=\"'COMMON.BTN_DELETE' | translate\"\n                  (click)=\"removeAt(i)\"\n                  [tabindex]=\"-1\"\n                >\n                  <mat-icon>close</mat-icon>\n                </button>\n              </ion-col>\n            </ion-row>\n          </ion-grid>\n        </ion-item>\n      }\n    </ion-list>\n  }\n</form>\n\n<ng-template #propertyRowSkeleton>\n  <ion-item lines=\"none\">\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row class=\"ion-no-padding\">\n        <!-- property key -->\n        <ion-col size=\"6\" class=\"ion-no-padding\">\n          <mat-form-field [subscriptSizing]=\"subscriptSizing\">\n            <input matInput hidden disabled />\n            <ion-skeleton-text [animated]=\"true\" style=\"width: 60%\"></ion-skeleton-text>\n            <ion-icon name=\"arrow-dropdown\" matSuffix></ion-icon>\n          </mat-form-field>\n        </ion-col>\n        <!-- value -->\n        <ion-col class=\"ion-no-padding\">\n          <mat-form-field [subscriptSizing]=\"subscriptSizing\">\n            <input matInput hidden disabled />\n            <ion-skeleton-text [animated]=\"true\" style=\"width: 60%\"></ion-skeleton-text>\n          </mat-form-field>\n        </ion-col>\n        <!-- buttons -->\n        <ion-col size=\"auto\">\n          <button type=\"button\" mat-icon-button color=\"light\" disabled>\n            <mat-icon>close</mat-icon>\n          </button>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </ion-item>\n</ng-template>\n", styles: [":host ion-item ion-row ion-col{--ion-padding-start: 0;min-width:48px}:host ion-item.outline{overflow:visible}:host ion-item.outline ion-grid,:host ion-item.outline ion-row,:host ion-item.outline ion-col{overflow:visible}\n"], dependencies: [{ kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$1.IonToggle, selector: "ion-toggle", inputs: ["alignment", "checked", "color", "disabled", "enableOnOffLabels", "justify", "labelPlacement", "legacy", "mode", "name", "value"] }, { kind: "directive", type: i2$1.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i12.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i12.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i12.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i12.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i9$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "label", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "hideRequiredMarker", "mobile", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "reloadItemsOnFocus", "clearInvalidValueOnBlur", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "splitSearchText", "selectInputContentOnFocus", "selectInputContentOnFocusDelay", "previewImplicitValue", "showFavorites", "toggleFavoriteTitle", "favoriteItems", "colSizes", "class", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keydown.backspace", "keyup.enter", "selectionChange", "openedChange", "toggleFavorite"] }, { kind: "component", type: AppFormField, selector: "app-form-field", inputs: ["definition", "readonly", "disabled", "formControl", "formControlName", "placeholder", "compact", "required", "hideRequiredMarker", "floatLabel", "label", "appearance", "subscriptSizing", "tabindex", "autofocus", "clearable", "chipColor", "class", "debug", "panelClass", "panelWidth"], outputs: ["keyup.enter"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: NotEmptyArrayPipe, name: "isNotEmptyArray" }, { kind: "pipe", type: EmptyArrayPipe, name: "isEmptyArray" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: AsBooleanPipe, name: "asBoolean" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppPropertiesForm, decorators: [{
             type: Component,
@@ -37123,7 +37150,7 @@ class SettingsPage extends AppForm {
         this.cd.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SettingsPage, deps: [{ token: i0.Injector }, { token: PlatformService }, { token: i2$1.NavController }, { token: LocalSettingsValidatorService }, { token: i2$1.AlertController }, { token: i1$1.TranslateService }, { token: i1$3.UntypedFormBuilder }, { token: AccountService }, { token: LocalSettingsService }, { token: i0.ChangeDetectorRef }, { token: NetworkService }, { token: APP_LOCALES }, { token: APP_SETTINGS_MENU_ITEMS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SettingsPage, selector: "page-settings", host: { listeners: { "window:beforeunload": "handleRefresh($event)" } }, providers: [{ provide: ValidatorService, useExisting: LocalSettingsValidatorService }], viewQueries: [{ propertyName: "propertiesForm", first: true, predicate: ["propertiesForm"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "@let hasValidate = !loading && (dirty || saving);\n<app-toolbar\n  [title]=\"'SETTINGS.TITLE' | translate\"\n  color=\"primary\"\n  [hasValidate]=\"hasValidate\"\n  [hasClose]=\"!hasValidate\"\n  (onValidate)=\"save($event)\"\n  (onClose)=\"close($event)\"\n>\n  <ion-buttons slot=\"end\">\n    <!-- options menu -->\n    <ion-button [matMenuTriggerFor]=\"optionsMenu\" [disabled]=\"loading || saving\">\n      <mat-icon slot=\"icon-only\">more_vert</mat-icon>\n    </ion-button>\n  </ion-buttons>\n</app-toolbar>\n\n<!-- Options menu -->\n<mat-menu #optionsMenu=\"matMenu\">\n  <!-- Clear cache -->\n  <button mat-menu-item [disabled]=\"saving\" (click)=\"clearCache($event)\">\n    <mat-icon><ion-icon name=\"trash-outline\"></ion-icon></mat-icon>\n    <ion-label translate>SETTINGS.BTN_CLEAR_CACHE</ion-label>\n  </button>\n\n  <!-- Reset -->\n  <button mat-menu-item [disabled]=\"saving || !dirty\" (click)=\"cancel($event)\">\n    <mat-icon><ion-icon name=\"refresh\"></ion-icon></mat-icon>\n    <mat-label translate>COMMON.BTN_RESET</mat-label>\n  </button>\n\n  <!-- additional items -->\n  @if (!loading) {\n    @for (item of menuItems; track item) {\n      @if (item.path) {\n        <a mat-menu-item class=\"{{ item.cssClass }} {{ item.color }}\" (click)=\"executeAction($event, item)\">\n          <mat-icon *ngIf=\"item.icon\"><ion-icon [name]=\"item.icon\"></ion-icon></mat-icon>\n          <mat-icon *ngIf=\"item.matIcon\">{{ item.matIcon }}</mat-icon>\n          <mat-label translate>{{ item.title }}</mat-label>\n        </a>\n      } @else if (!item.action) {\n        <!-- divider -->\n        <mat-divider class=\"{{ item.cssClass }} {{ item.color }}\">\n          <mat-label translate>{{ item.title }}</mat-label>\n        </mat-divider>\n      }\n    }\n  }\n\n  <!-- debug -->\n  @if (isAdmin) {\n    <mat-divider></mat-divider>\n\n    <button\n      mat-menu-item\n      #menuTrigger=\"matMenuTrigger\"\n      (mouseenter)=\"menuTrigger.openMenu()\"\n      [matMenuTriggerFor]=\"debugMenu\"\n    >\n      <mat-icon><ion-icon name=\"bug\"></ion-icon></mat-icon>\n      <ion-label translate>COMMON.DEBUG.BTN_DEBUG_DOTS</ion-label>\n    </button>\n\n    <mat-menu #debugMenu=\"matMenu\">\n      <!-- enable debug -->\n      <button mat-menu-item (click)=\"devToggleDebug()\">\n        <mat-icon>{{ debug ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n        <mat-label translate>COMMON.DEBUG.BTN_ENABLE_DEBUG</mat-label>\n      </button>\n\n      <!-- show option key-->\n      <button mat-menu-item (click)=\"toggleShowOptionKeys()\">\n        <mat-icon>{{ showOptionKeys ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n        <mat-label translate>SETTINGS.BTN_SHOW_OPTION_KEY</mat-label>\n      </button>\n    </mat-menu>\n  }\n</mat-menu>\n\n<ion-content>\n  <form [formGroup]=\"form\" novalidate (ngSubmit)=\"save($event)\" class=\"form-container\">\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row>\n        <!-- left  margin -->\n        <ion-col size=\"0\" size-lg=\"1\" size-xl=\"2\">&nbsp;</ion-col>\n\n        <ion-col class=\"ion-padding\">\n          <!-- error -->\n          <ion-item *ngIf=\"errorSubject | async; let error\" lines=\"none\">\n            <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n            <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n          </ion-item>\n\n          <ion-list-header class=\"hidden-xs hidden-xxs\" translate>SETTINGS.DESCRIPTION</ion-list-header>\n\n          <ion-list [inset]=\"mobile\" [class.cdk-visually-hidden]=\"!isLogin\">\n            <ion-item lines=\"none\">\n              <!-- account inheritance (desktop) -->\n              @if (!mobile) {\n                <mat-form-field>\n                  <input matInput hidden formControlName=\"accountInheritance\" type=\"text\" />\n\n                  <!-- check box (if desktop) -->\n                  <mat-checkbox (change)=\"setAccountInheritance($event.checked)\" [checked]=\"accountInheritance\">\n                    <span translate>SETTINGS.INHERIT_FROM_ACCOUNT</span>\n                  </mat-checkbox>\n\n                  <mat-error *ngIf=\"form.controls.accountInheritance.hasError('required')\" translate>\n                    ERROR.FIELD_REQUIRED\n                  </mat-error>\n                </mat-form-field>\n              } @else {\n                <!-- account inheritance (if mobile) -->\n                <mat-form-field>\n                  <input matInput hidden formControlName=\"accountInheritance\" type=\"text\" />\n\n                  <!-- slide toggle  -->\n                  <ion-text translate>SETTINGS.INHERIT_FROM_ACCOUNT</ion-text>\n                  <mat-slide-toggle\n                    matSuffix\n                    (change)=\"setAccountInheritance($event.checked)\"\n                    [checked]=\"accountInheritance\"\n                  ></mat-slide-toggle>\n                  <mat-error *ngIf=\"form.controls.accountInheritance.hasError('required')\" translate>\n                    ERROR.FIELD_REQUIRED\n                  </mat-error>\n                </mat-form-field>\n              }\n            </ion-item>\n\n            <!-- help on account -->\n            @if (accountInheritance) {\n              <ion-item [button]=\"true\" lines=\"none\" (click)=\"openAccountPage()\">\n                @if (!mobile) {\n                  <ion-icon slot=\"start\" name=\"help-circle-outline\"></ion-icon>\n                }\n                <ion-label>\n                  <small [innerHTML]=\"'SETTINGS.INHERIT_FROM_ACCOUNT_HELP' | translate\"></small>\n                </ion-label>\n                <ion-text color=\"tertiary\" translate>SETTINGS.BTN_SHOW_ACCOUNT</ion-text>\n                <ion-icon slot=\"end\" color=\"tertiary\" name=\"chevron-forward\"></ion-icon>\n              </ion-item>\n            }\n          </ion-list>\n\n          <ion-list-header><h3 translate>SETTINGS.DISPLAY_DIVIDER</h3></ion-list-header>\n\n          <ion-list [inset]=\"mobile\">\n            <!-- locale -->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"language\"></ion-icon>\n                <mat-label>{{ 'SETTINGS.LOCALE' | translate }}</mat-label>\n                <mat-select formControlName=\"locale\" required>\n                  <mat-option *ngFor=\"let item of locales\" [value]=\"item.key\">\n                    {{ item.value }}\n                  </mat-option>\n                </mat-select>\n                <mat-error *ngIf=\"form.controls.locale.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n              </mat-form-field>\n            </ion-item>\n\n            <!-- dark mode (if allow by the environment token) -->\n            @if (settings.allowDarkMode) {\n              <ion-item lines=\"none\">\n                <mat-form-field>\n                  <ion-icon matPrefix name=\"moon\"></ion-icon>\n\n                  <input matInput hidden formControlName=\"darkMode\" type=\"text\" />\n\n                  <!-- slide toggle  -->\n                  <ion-text translate>SETTINGS.BTN_DARK_MODE</ion-text>\n                  <mat-slide-toggle\n                    matSuffix\n                    (change)=\"toggleDarkMode($event.checked)\"\n                    [checked]=\"darkMode\"\n                  ></mat-slide-toggle>\n                </mat-form-field>\n              </ion-item>\n            }\n          </ion-list>\n\n          <!-- Network entry -->\n          <ion-list-header><h3 translate>SETTINGS.NETWORK_DIVIDER</h3></ion-list-header>\n\n          <ion-list [inset]=\"mobile\">\n            <!-- Peer address -->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"cloud\"></ion-icon>\n\n                <mat-label>{{ 'SETTINGS.PEER_URL' | translate }}</mat-label>\n                <input matInput type=\"text\" formControlName=\"peerUrl\" required />\n\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  matSuffix\n                  (click)=\"showSelectPeerModal()\"\n                  tabindex=\"-1\"\n                  [title]=\"'SETTINGS.BTN_CHANGE_PEER' | translate\"\n                >\n                  <mat-icon>search</mat-icon>\n                </button>\n\n                <mat-error *ngIf=\"form.controls.peerUrl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n                <mat-error *ngIf=\"form.controls.peerUrl.hasError('peerAlive')\" translate>\n                  SETTINGS.ERROR.PEER_NOT_REACHABLE\n                </mat-error>\n                <mat-error *ngIf=\"form.controls.peerUrl.hasError('peerNotCompatible')\" translate>\n                  SETTINGS.ERROR.PEER_NOT_COMPATIBLE\n                </mat-error>\n              </mat-form-field>\n            </ion-item>\n\n            <!-- Offline mode (if mobile) -->\n            @if (mobile) {\n              <ion-item lines=\"none\">\n                <mat-form-field>\n                  <input matInput hidden formControlName=\"accountInheritance\" type=\"text\" />\n\n                  <!-- slide toggle  -->\n                  <ion-text translate>SETTINGS.OFFLINE_MODE</ion-text>\n                  <mat-slide-toggle\n                    matSuffix\n                    (change)=\"setForceOffline($event.checked)\"\n                    [checked]=\"network.offline\"\n                  ></mat-slide-toggle>\n                </mat-form-field>\n              </ion-item>\n            }\n          </ion-list>\n\n          <!-- Data entry -->\n          <ion-list-header>\n            <h3 translate>SETTINGS.DATA_ENTRY_DIVIDER</h3>\n          </ion-list-header>\n\n          <ion-list [inset]=\"mobile\">\n            <!-- Usage mode -->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"id-card\"></ion-icon>\n                <mat-label>{{ 'SETTINGS.USAGE_MODE' | translate }}</mat-label>\n                <mat-select formControlName=\"usageMode\" required>\n                  <mat-option *ngFor=\"let item of usageModes\" [value]=\"item\">\n                    {{ 'SETTINGS.USAGE_MODES.' + item | translate }}\n                  </mat-option>\n                </mat-select>\n                <mat-error *ngIf=\"form.controls.usageMode.hasError('required')\" translate>\n                  ERROR.FIELD_REQUIRED\n                </mat-error>\n              </mat-form-field>\n            </ion-item>\n\n            <!-- lat/long format-->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"locate\"></ion-icon>\n                <mat-label>{{ 'SETTINGS.LAT_LONG_FORMAT' | translate }}</mat-label>\n                <mat-select formControlName=\"latLongFormat\" required>\n                  <mat-option *ngFor=\"let item of latLongFormats\" [value]=\"item\">\n                    {{ 'COMMON.LAT_LONG.ENUM.' + item | uppercase | translate }}\n                  </mat-option>\n                </mat-select>\n                <mat-error *ngIf=\"form.controls.latLongFormat.hasError('required')\" translate>\n                  ERROR.FIELD_REQUIRED\n                </mat-error>\n              </mat-form-field>\n            </ion-item>\n          </ion-list>\n\n          <!-- fields options -->\n          <app-properties-form\n            #propertiesForm\n            formArrayName=\"properties\"\n            [definitions]=\"propertyDefinitions\"\n            [options]=\"{ allowEmptyArray: true }\"\n            [mobile]=\"mobile\"\n            [showHintKey]=\"showOptionKeys\"\n            addButtonText=\"COMMON.BTN_SHOW_MORE\"\n            addButtonTitle=\"SETTINGS.BTN_SHOW_MORE_HELP\"\n            [debug]=\"debug\"\n          ></app-properties-form>\n        </ion-col>\n\n        <!-- right margin -->\n        <ion-col size=\"0\" size-lg=\"1\" size-xl=\"2\">&nbsp;</ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <app-form-buttons-bar\n    (onCancel)=\"cancel()\"\n    (onSave)=\"save($event)\"\n    [disabled]=\"!form.dirty || saving\"\n  ></app-form-buttons-bar>\n</ion-footer>\n", dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$1.IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i12.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i12.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i12.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i6$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i12$3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "id", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "component", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: ["disabled", "disabledCancel", "disabledEscape", "classList", "saveButtonColor", "backText", "cancelText", "nextText", "showBack", "showCancel", "showNext", "showSave"], outputs: ["onCancel", "onSave", "onNext", "onBack", "onSaveAndClose", "onSaveAndNext"] }, { kind: "component", type: AppPropertiesForm, selector: "app-properties-form", inputs: ["showToolbar", "formArrayName", "formArray", "options", "chipColor", "mobile", "appearance", "subscriptSizing", "showHintKey", "hintKeyPrefix", "showMoreButton", "addButtonText", "addButtonTitle", "showAddButton", "panelClass", "panelWidth", "canDownload", "canImport", "showMoreButtonTitle", "definitions", "importPolicy"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SettingsPage, selector: "page-settings", host: { listeners: { "window:beforeunload": "handleRefresh($event)" } }, providers: [{ provide: ValidatorService, useExisting: LocalSettingsValidatorService }], viewQueries: [{ propertyName: "propertiesForm", first: true, predicate: ["propertiesForm"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "@let hasValidate = !loading && (dirty || saving);\n<app-toolbar\n  [title]=\"'SETTINGS.TITLE' | translate\"\n  color=\"primary\"\n  [hasValidate]=\"hasValidate\"\n  [hasClose]=\"!hasValidate\"\n  (onValidate)=\"save($event)\"\n  (onClose)=\"close($event)\"\n>\n  <ion-buttons slot=\"end\">\n    <!-- options menu -->\n    <ion-button [matMenuTriggerFor]=\"optionsMenu\" [disabled]=\"loading || saving\">\n      <mat-icon slot=\"icon-only\">more_vert</mat-icon>\n    </ion-button>\n  </ion-buttons>\n</app-toolbar>\n\n<!-- Options menu -->\n<mat-menu #optionsMenu=\"matMenu\">\n  <!-- Clear cache -->\n  <button mat-menu-item [disabled]=\"saving\" (click)=\"clearCache($event)\">\n    <mat-icon><ion-icon name=\"trash-outline\"></ion-icon></mat-icon>\n    <ion-label translate>SETTINGS.BTN_CLEAR_CACHE</ion-label>\n  </button>\n\n  <!-- Reset -->\n  <button mat-menu-item [disabled]=\"saving || !dirty\" (click)=\"cancel($event)\">\n    <mat-icon><ion-icon name=\"refresh\"></ion-icon></mat-icon>\n    <mat-label translate>COMMON.BTN_RESET</mat-label>\n  </button>\n\n  <!-- additional items -->\n  @if (!loading) {\n    @for (item of menuItems; track item) {\n      @if (item.path) {\n        <a mat-menu-item class=\"{{ item.cssClass }} {{ item.color }}\" (click)=\"executeAction($event, item)\">\n          <mat-icon *ngIf=\"item.icon\"><ion-icon [name]=\"item.icon\"></ion-icon></mat-icon>\n          <mat-icon *ngIf=\"item.matIcon\">{{ item.matIcon }}</mat-icon>\n          <mat-label translate>{{ item.title }}</mat-label>\n        </a>\n      } @else if (!item.action) {\n        <!-- divider -->\n        <mat-divider class=\"{{ item.cssClass }} {{ item.color }}\">\n          <mat-label translate>{{ item.title }}</mat-label>\n        </mat-divider>\n      }\n    }\n  }\n\n  <!-- debug -->\n  @if (isAdmin) {\n    <mat-divider></mat-divider>\n\n    <button\n      mat-menu-item\n      #menuTrigger=\"matMenuTrigger\"\n      (mouseenter)=\"menuTrigger.openMenu()\"\n      [matMenuTriggerFor]=\"debugMenu\"\n    >\n      <mat-icon><ion-icon name=\"bug\"></ion-icon></mat-icon>\n      <ion-label translate>COMMON.DEBUG.BTN_DEBUG_DOTS</ion-label>\n    </button>\n\n    <mat-menu #debugMenu=\"matMenu\">\n      <!-- enable debug -->\n      <button mat-menu-item (click)=\"devToggleDebug()\">\n        <mat-icon>{{ debug ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n        <mat-label translate>COMMON.DEBUG.BTN_ENABLE_DEBUG</mat-label>\n      </button>\n\n      <!-- show option key-->\n      <button mat-menu-item (click)=\"toggleShowOptionKeys()\">\n        <mat-icon>{{ showOptionKeys ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n        <mat-label translate>SETTINGS.BTN_SHOW_OPTION_KEY</mat-label>\n      </button>\n    </mat-menu>\n  }\n</mat-menu>\n\n<ion-content>\n  <form [formGroup]=\"form\" novalidate (ngSubmit)=\"save($event)\" class=\"form-container\">\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row>\n        <!-- left  margin -->\n        <ion-col size=\"0\" size-lg=\"1\" size-xl=\"2\">&nbsp;</ion-col>\n\n        <ion-col class=\"ion-padding\">\n          <!-- error -->\n          <ion-item *ngIf=\"errorSubject | async; let error\" lines=\"none\">\n            <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n            <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n          </ion-item>\n\n          <ion-list-header class=\"hidden-xs hidden-xxs\" translate>SETTINGS.DESCRIPTION</ion-list-header>\n\n          <ion-list [inset]=\"mobile\" [class.cdk-visually-hidden]=\"!isLogin\">\n            <ion-item lines=\"none\">\n              <!-- account inheritance (desktop) -->\n              @if (!mobile) {\n                <mat-form-field>\n                  <input matInput hidden formControlName=\"accountInheritance\" type=\"text\" />\n\n                  <!-- check box (if desktop) -->\n                  <mat-checkbox (change)=\"setAccountInheritance($event.checked)\" [checked]=\"accountInheritance\">\n                    <span translate>SETTINGS.INHERIT_FROM_ACCOUNT</span>\n                  </mat-checkbox>\n\n                  <mat-error *ngIf=\"form.controls.accountInheritance.hasError('required')\" translate>\n                    ERROR.FIELD_REQUIRED\n                  </mat-error>\n                </mat-form-field>\n              } @else {\n                <!-- account inheritance (if mobile) -->\n                <mat-form-field>\n                  <input matInput hidden formControlName=\"accountInheritance\" type=\"text\" />\n\n                  <!-- slide toggle  -->\n                  <ion-text translate>SETTINGS.INHERIT_FROM_ACCOUNT</ion-text>\n                  <mat-slide-toggle\n                    matSuffix\n                    (change)=\"setAccountInheritance($event.checked)\"\n                    [checked]=\"accountInheritance\"\n                  ></mat-slide-toggle>\n                  <mat-error *ngIf=\"form.controls.accountInheritance.hasError('required')\" translate>\n                    ERROR.FIELD_REQUIRED\n                  </mat-error>\n                </mat-form-field>\n              }\n            </ion-item>\n\n            <!-- help on account -->\n            @if (accountInheritance) {\n              <ion-item [button]=\"true\" lines=\"none\" (click)=\"openAccountPage()\">\n                @if (!mobile) {\n                  <ion-icon slot=\"start\" name=\"help-circle-outline\"></ion-icon>\n                }\n                <ion-label>\n                  <small [innerHTML]=\"'SETTINGS.INHERIT_FROM_ACCOUNT_HELP' | translate\"></small>\n                </ion-label>\n                <ion-text color=\"tertiary\" translate>SETTINGS.BTN_SHOW_ACCOUNT</ion-text>\n                <ion-icon slot=\"end\" color=\"tertiary\" name=\"chevron-forward\"></ion-icon>\n              </ion-item>\n            }\n          </ion-list>\n\n          <ion-list-header><h3 translate>SETTINGS.DISPLAY_DIVIDER</h3></ion-list-header>\n\n          <ion-list [inset]=\"mobile\">\n            <!-- locale -->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"language\"></ion-icon>\n                <mat-label>{{ 'SETTINGS.LOCALE' | translate }}</mat-label>\n                <mat-select formControlName=\"locale\" required>\n                  <mat-option *ngFor=\"let item of locales\" [value]=\"item.key\">\n                    {{ item.value }}\n                  </mat-option>\n                </mat-select>\n                <mat-error *ngIf=\"form.controls.locale.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n              </mat-form-field>\n            </ion-item>\n\n            <!-- dark mode (if allow by the environment token) -->\n            @if (settings.allowDarkMode) {\n              <ion-item lines=\"none\">\n                <mat-form-field>\n                  <ion-icon matPrefix name=\"moon\"></ion-icon>\n\n                  <input matInput hidden formControlName=\"darkMode\" type=\"text\" />\n\n                  <!-- slide toggle  -->\n                  <ion-text translate>SETTINGS.BTN_DARK_MODE</ion-text>\n                  <mat-slide-toggle\n                    matSuffix\n                    (change)=\"toggleDarkMode($event.checked)\"\n                    [checked]=\"darkMode\"\n                  ></mat-slide-toggle>\n                </mat-form-field>\n              </ion-item>\n            }\n          </ion-list>\n\n          <!-- Network entry -->\n          <ion-list-header><h3 translate>SETTINGS.NETWORK_DIVIDER</h3></ion-list-header>\n\n          <ion-list [inset]=\"mobile\">\n            <!-- Peer address -->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"cloud\"></ion-icon>\n\n                <mat-label>{{ 'SETTINGS.PEER_URL' | translate }}</mat-label>\n                <input matInput type=\"text\" formControlName=\"peerUrl\" required />\n\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  matSuffix\n                  (click)=\"showSelectPeerModal()\"\n                  tabindex=\"-1\"\n                  [title]=\"'SETTINGS.BTN_CHANGE_PEER' | translate\"\n                >\n                  <mat-icon>search</mat-icon>\n                </button>\n\n                <mat-error *ngIf=\"form.controls.peerUrl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n                <mat-error *ngIf=\"form.controls.peerUrl.hasError('peerAlive')\" translate>\n                  SETTINGS.ERROR.PEER_NOT_REACHABLE\n                </mat-error>\n                <mat-error *ngIf=\"form.controls.peerUrl.hasError('peerNotCompatible')\" translate>\n                  SETTINGS.ERROR.PEER_NOT_COMPATIBLE\n                </mat-error>\n              </mat-form-field>\n            </ion-item>\n\n            <!-- Offline mode (if mobile) -->\n            @if (mobile) {\n              <ion-item lines=\"none\">\n                <mat-form-field>\n                  <input matInput hidden formControlName=\"accountInheritance\" type=\"text\" />\n\n                  <!-- slide toggle  -->\n                  <ion-text translate>SETTINGS.OFFLINE_MODE</ion-text>\n                  <mat-slide-toggle\n                    matSuffix\n                    (change)=\"setForceOffline($event.checked)\"\n                    [checked]=\"network.offline\"\n                  ></mat-slide-toggle>\n                </mat-form-field>\n              </ion-item>\n            }\n          </ion-list>\n\n          <!-- Data entry -->\n          <ion-list-header>\n            <h3 translate>SETTINGS.DATA_ENTRY_DIVIDER</h3>\n          </ion-list-header>\n\n          <ion-list [inset]=\"mobile\">\n            <!-- Usage mode -->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"id-card\"></ion-icon>\n                <mat-label>{{ 'SETTINGS.USAGE_MODE' | translate }}</mat-label>\n                <mat-select formControlName=\"usageMode\" required>\n                  <mat-option *ngFor=\"let item of usageModes\" [value]=\"item\">\n                    {{ 'SETTINGS.USAGE_MODES.' + item | translate }}\n                  </mat-option>\n                </mat-select>\n                <mat-error *ngIf=\"form.controls.usageMode.hasError('required')\" translate>\n                  ERROR.FIELD_REQUIRED\n                </mat-error>\n              </mat-form-field>\n            </ion-item>\n\n            <!-- lat/long format-->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"locate\"></ion-icon>\n                <mat-label>{{ 'SETTINGS.LAT_LONG_FORMAT' | translate }}</mat-label>\n                <mat-select formControlName=\"latLongFormat\" required>\n                  <mat-option *ngFor=\"let item of latLongFormats\" [value]=\"item\">\n                    {{ 'COMMON.LAT_LONG.ENUM.' + item | uppercase | translate }}\n                  </mat-option>\n                </mat-select>\n                <mat-error *ngIf=\"form.controls.latLongFormat.hasError('required')\" translate>\n                  ERROR.FIELD_REQUIRED\n                </mat-error>\n              </mat-form-field>\n            </ion-item>\n          </ion-list>\n\n          <!-- fields options -->\n          <app-properties-form\n            #propertiesForm\n            formArrayName=\"properties\"\n            [definitions]=\"propertyDefinitions\"\n            [options]=\"{ allowEmptyArray: true }\"\n            [mobile]=\"mobile\"\n            [showHintKey]=\"showOptionKeys\"\n            addButtonText=\"COMMON.BTN_SHOW_MORE\"\n            addButtonTitle=\"SETTINGS.BTN_SHOW_MORE_HELP\"\n            [debug]=\"debug\"\n          ></app-properties-form>\n        </ion-col>\n\n        <!-- right margin -->\n        <ion-col size=\"0\" size-lg=\"1\" size-xl=\"2\">&nbsp;</ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <app-form-buttons-bar\n    (onCancel)=\"cancel()\"\n    (onSave)=\"save($event)\"\n    [disabled]=\"!form.dirty || saving\"\n  ></app-form-buttons-bar>\n</ion-footer>\n", dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$1.IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i12.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i12.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i12.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i6$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i12$3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "id", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "component", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: ["disabled", "disabledCancel", "disabledEscape", "classList", "saveButtonColor", "backText", "cancelText", "nextText", "showBack", "showCancel", "showNext", "showSave"], outputs: ["onCancel", "onSave", "onNext", "onBack", "onSaveAndClose", "onSaveAndNext"] }, { kind: "component", type: AppPropertiesForm, selector: "app-properties-form", inputs: ["showToolbar", "formArrayName", "formArray", "options", "chipColor", "mobile", "appearance", "subscriptSizing", "showHintKey", "hintKeyPrefix", "showMoreButton", "addButtonText", "addButtonTitle", "showAddButton", "panelClass", "panelWidth", "canDownload", "canImport", "showMoreButtonTitle", "definitions", "importPolicy"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SettingsPage, decorators: [{
             type: Component,
@@ -39988,7 +40015,7 @@ class AppPropertiesTable extends AppInMemoryTable {
         this.markRowAsDirty();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppPropertiesTable, deps: [{ token: i0.Injector }, { token: i1$3.UntypedFormBuilder }, { token: PropertyEntityValidator }, { token: ENVIRONMENT }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AppPropertiesTable, selector: "app-properties-table", inputs: { definitions: "definitions", showToolbar: "showToolbar" }, providers: [{ provide: PropertyEntityValidator, useClass: PropertyEntityValidator }], viewQueries: [{ propertyName: "filterExpansionPanel", first: true, predicate: MatExpansionPanel, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-toolbar *ngIf=\"showToolbar\" [class.expanded]=\"filterExpansionPanel.expanded\">\n  <!-- Refresh -->\n  <button mat-icon-button *ngIf=\"!mobile\" [title]=\"'COMMON.BTN_REFRESH' | translate\" (click)=\"emitRefresh()\">\n    <mat-icon>refresh</mat-icon>\n  </button>\n\n  <ion-item *ngIf=\"!mobile && error; let error\" lines=\"none\">\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" [innerHTML]=\"error | translate\"></ion-label>\n  </ion-item>\n\n  <div class=\"toolbar-spacer\"></div>\n\n  <!-- Reset filter -->\n  <button mat-icon-button (click)=\"resetFilter()\" *ngIf=\"filterCriteriaCount\">\n    <mat-icon color=\"accent\">filter_list_alt</mat-icon>\n    <mat-icon class=\"icon-secondary\" style=\"left: 16px; top: 5px; font-weight: bold\">close</mat-icon>\n  </button>\n\n  <!-- Show filter -->\n  <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n    <mat-icon\n      [matBadge]=\"filterCriteriaCount\"\n      [matBadgeHidden]=\"filterIsEmpty\"\n      matBadgeColor=\"accent\"\n      matBadgeSize=\"small\"\n      matBadgePosition=\"above after\"\n      aria-hidden=\"false\"\n    >\n      filter_list_alt\n    </mat-icon>\n  </button>\n</mat-toolbar>\n\n<ion-content class=\"ion-no-padding\">\n  <!-- search -->\n  <mat-expansion-panel\n    #filterExpansionPanel\n    class=\"filter-panel\"\n    [class.ion-no-padding]=\"mobile\"\n    [class.filter-panel-floating]=\"filterPanelFloating\"\n  >\n    <form class=\"form-container\" [formGroup]=\"filterForm\" (ngSubmit)=\"emitRefresh()\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search -->\n            <mat-form-field>\n              <mat-label>{{ 'SETTINGS.FILTER.SEARCH' | translate }}</mat-label>\n              <input matInput formControlName=\"searchText\" />\n\n              <button\n                mat-icon-button\n                matSuffix\n                tabindex=\"-1\"\n                type=\"button\"\n                (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\"\n              >\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n\n          <ion-col>\n            <mat-boolean-field\n              [style]=\"'checkbox'\"\n              formControlName=\"notDefaultOnly\"\n              [placeholder]=\"'SETTINGS.FILTER.ONLY_NOT_DEFAULT' | translate\"\n              floatLabel=\"always\"\n            ></mat-boolean-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <mat-action-row>\n      <!-- Counter  -->\n      <ion-label\n        [hidden]=\"(loadingSubject | async) || filterForm.dirty\"\n        [color]=\"empty && 'danger'\"\n        class=\"ion-padding\"\n      >\n        {{\n          (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT')\n            | translate\n              : {\n                  count: (totalRowCount | numberFormat),\n                }\n        }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <button\n        mat-icon-button\n        color=\"accent\"\n        *ngIf=\"filterPanelFloating\"\n        (click)=\"toggleFilterPanelFloating()\"\n        class=\"hidden-xs hidden-sm hidden-md\"\n        [title]=\"(filterPanelFloating ? 'COMMON.BTN_EXPAND' : 'COMMON.BTN_HIDE') | translate\"\n      >\n        <mat-icon>\n          <span style=\"transform: rotate(90deg)\">{{ filterPanelFloating ? '&#xbb;' : '&#xab;' }}</span>\n        </mat-icon>\n      </button>\n\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\" (click)=\"closeFilterPanel()\" [disabled]=\"loadingSubject | async\">\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button\n        mat-button\n        [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n        [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n        (click)=\"applyFilterAndClosePanel($event)\"\n        [disabled]=\"loadingSubject | async\"\n      >\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <ion-refresher slot=\"fixed\" *ngIf=\"mobile\" (ionRefresh)=\"doRefresh($event)\">\n    <ion-refresher-content></ion-refresher-content>\n  </ion-refresher>\n\n  <!-- table -->\n  <div class=\"table-container\">\n    <table\n      #table\n      mat-table\n      matSort\n      matSortDisableClear\n      [dataSource]=\"dataSource\"\n      [matSortActive]=\"defaultSortBy\"\n      [matSortDirection]=\"defaultSortDirection\"\n      [trackBy]=\"trackByFn\"\n      [style.--mat-row-height]=\"'52px'\"\n    >\n      <ng-container matColumnDef=\"select\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"true\"></th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"true\"></td>\n      </ng-container>\n\n      <!-- id column (hidden) -->\n      <ng-container matColumnDef=\"id\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!debug\"></th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!debug\">\n          {{ row.currentData.id }}\n        </td>\n      </ng-container>\n\n      <!-- definition column -->\n      <ng-container matColumnDef=\"definition\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"ion-padding-start\">\n          <ion-label>{{ i18nColumnPrefix + 'DEFINITION' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"ion-padding-start\">\n          {{ row.currentData | propertyGet: 'definition.label' }}\n        </td>\n      </ng-container>\n\n      <!-- value column -->\n      <app-row-field\n        name=\"value\"\n        floatLabel=\"never\"\n        [definitionFn]=\"definitionByRow\"\n        [headerI18n]=\"i18nColumnPrefix + 'VALUE'\"\n        [required]=\"true\"\n      ></app-row-field>\n\n      <!-- Actions buttons column -->\n      <app-actions-column\n        [stickyEnd]=\"true\"\n        [canCancel]=\"false\"\n        [canDelete]=\"false\"\n        [dirtyIcon]=\"false\"\n        [cellTemplate]=\"cellInjection\"\n      >\n        <!-- cell injection-->\n        <ng-template #cellInjection let-row>\n          <button\n            type=\"button\"\n            mat-icon-button\n            *ngIf=\"\n              !mobile &&\n              !disabled &&\n              (row.validator | formGetValue: 'value') !== (row.validator | formGetValue: 'definition').defaultValue\n            \"\n            [class.visible-hover-row]=\"!mobile\"\n            [tabindex]=\"-1\"\n            [title]=\"'SETTINGS.BTN_RESET_PROPERTY' | translate\"\n            (click)=\"resetProperty($event, row)\"\n          >\n            <mat-icon>undo</mat-icon>\n          </button>\n        </ng-template>\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr\n        mat-row\n        *matRowDef=\"let row; columns: displayedColumns\"\n        [class.mat-row-selected]=\"row.editing\"\n        [class.mat-row-error]=\"row.validator?.invalid\"\n        [class.mat-row-dirty]=\"row.validator?.dirty\"\n        (click)=\"clickRow($event, row)\"\n        (keydown.escape)=\"escapeEditingRow($event)\"\n        [cdkTrapFocus]=\"row.validator?.invalid\"\n      ></tr>\n    </table>\n\n    <ng-container *ngIf=\"loadingSubject | async; else noResult\">\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    </ng-container>\n\n    <ng-template #noResult>\n      <ion-item *ngIf=\"totalRowCount === 0\">\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n      </ion-item>\n    </ng-template>\n  </div>\n</ion-content>\n", styles: [""], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i2$1.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1$7.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$7.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$7.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$7.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$7.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$7.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i8$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i13$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i13$2.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i10$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i8.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MatBooleanField, selector: "mat-boolean-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "subscriptSizing", "readonly", "required", "compact", "autofocus", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "clearable", "labelPosition", "tabindex", "showRadio", "value"], outputs: ["keyup.enter", "focus", "blur"] }, { kind: "component", type: ActionsColumnComponent, selector: "app-actions-column", inputs: ["matColumnDef", "style", "stickyEnd", "canCancel", "canConfirm", "canDelete", "canBackward", "canForward", "canConfirmAndAdd", "dirtyIcon", "optionsTitle", "class", "cellTemplateStart", "cellTemplate"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmEditCreateClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "component", type: AppRowField, selector: "app-row-field", inputs: ["name", "definition", "definitionFn", "headerI18n", "sortable", "resizable", "required", "readonly", "sticky", "draggable", "disabled", "placeholder", "compact", "floatLabel", "appearance", "tabindex", "autofocus", "clearable", "chipColor", "class", "debug"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: NumberFormatPipe, name: "numberFormat" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AppPropertiesTable, selector: "app-properties-table", inputs: { definitions: "definitions", showToolbar: "showToolbar" }, providers: [{ provide: PropertyEntityValidator, useClass: PropertyEntityValidator }], viewQueries: [{ propertyName: "filterExpansionPanel", first: true, predicate: MatExpansionPanel, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-toolbar *ngIf=\"showToolbar\" [class.expanded]=\"filterExpansionPanel.expanded\">\n  <!-- Refresh -->\n  <button mat-icon-button *ngIf=\"!mobile\" [title]=\"'COMMON.BTN_REFRESH' | translate\" (click)=\"emitRefresh()\">\n    <mat-icon>refresh</mat-icon>\n  </button>\n\n  <ion-item *ngIf=\"!mobile && error; let error\" lines=\"none\">\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" [innerHTML]=\"error | translate\"></ion-label>\n  </ion-item>\n\n  <div class=\"toolbar-spacer\"></div>\n\n  <!-- Reset filter -->\n  <button mat-icon-button (click)=\"resetFilter()\" *ngIf=\"filterCriteriaCount\">\n    <mat-icon color=\"accent\">filter_list_alt</mat-icon>\n    <mat-icon class=\"icon-secondary\" style=\"left: 16px; top: 5px; font-weight: bold\">close</mat-icon>\n  </button>\n\n  <!-- Show filter -->\n  <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n    <mat-icon\n      [matBadge]=\"filterCriteriaCount\"\n      [matBadgeHidden]=\"filterIsEmpty\"\n      matBadgeColor=\"accent\"\n      matBadgeSize=\"small\"\n      matBadgePosition=\"above after\"\n      aria-hidden=\"false\"\n    >\n      filter_list_alt\n    </mat-icon>\n  </button>\n</mat-toolbar>\n\n<ion-content class=\"ion-no-padding\">\n  <!-- search -->\n  <mat-expansion-panel\n    #filterExpansionPanel\n    class=\"filter-panel\"\n    [class.ion-no-padding]=\"mobile\"\n    [class.filter-panel-floating]=\"filterPanelFloating\"\n  >\n    <form class=\"form-container\" [formGroup]=\"filterForm\" (ngSubmit)=\"emitRefresh()\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search -->\n            <mat-form-field>\n              <mat-label>{{ 'SETTINGS.FILTER.SEARCH' | translate }}</mat-label>\n              <input matInput formControlName=\"searchText\" />\n\n              <button\n                mat-icon-button\n                matSuffix\n                tabindex=\"-1\"\n                type=\"button\"\n                (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\"\n              >\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n\n          <ion-col>\n            <mat-boolean-field\n              [style]=\"'checkbox'\"\n              formControlName=\"notDefaultOnly\"\n              [placeholder]=\"'SETTINGS.FILTER.ONLY_NOT_DEFAULT' | translate\"\n              floatLabel=\"always\"\n            ></mat-boolean-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <mat-action-row>\n      <!-- Counter  -->\n      <ion-label\n        [hidden]=\"(loadingSubject | async) || filterForm.dirty\"\n        [color]=\"empty && 'danger'\"\n        class=\"ion-padding\"\n      >\n        {{\n          (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT')\n            | translate\n              : {\n                  count: (totalRowCount | numberFormat),\n                }\n        }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <button\n        mat-icon-button\n        color=\"accent\"\n        *ngIf=\"filterPanelFloating\"\n        (click)=\"toggleFilterPanelFloating()\"\n        class=\"hidden-xs hidden-sm hidden-md\"\n        [title]=\"(filterPanelFloating ? 'COMMON.BTN_EXPAND' : 'COMMON.BTN_HIDE') | translate\"\n      >\n        <mat-icon>\n          <span style=\"transform: rotate(90deg)\">{{ filterPanelFloating ? '&#xbb;' : '&#xab;' }}</span>\n        </mat-icon>\n      </button>\n\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\" (click)=\"closeFilterPanel()\" [disabled]=\"loadingSubject | async\">\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button\n        mat-button\n        [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n        [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n        (click)=\"applyFilterAndClosePanel($event)\"\n        [disabled]=\"loadingSubject | async\"\n      >\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <ion-refresher slot=\"fixed\" *ngIf=\"mobile\" (ionRefresh)=\"doRefresh($event)\">\n    <ion-refresher-content></ion-refresher-content>\n  </ion-refresher>\n\n  <!-- table -->\n  <div class=\"table-container\">\n    <table\n      #table\n      mat-table\n      matSort\n      matSortDisableClear\n      [dataSource]=\"dataSource\"\n      [matSortActive]=\"defaultSortBy\"\n      [matSortDirection]=\"defaultSortDirection\"\n      [trackBy]=\"trackByFn\"\n      [style.--mat-row-height]=\"'52px'\"\n    >\n      <ng-container matColumnDef=\"select\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"true\"></th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"true\"></td>\n      </ng-container>\n\n      <!-- id column (hidden) -->\n      <ng-container matColumnDef=\"id\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!debug\"></th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!debug\">\n          {{ row.currentData.id }}\n        </td>\n      </ng-container>\n\n      <!-- definition column -->\n      <ng-container matColumnDef=\"definition\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"ion-padding-start\">\n          <ion-label>{{ i18nColumnPrefix + 'DEFINITION' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"ion-padding-start\">\n          {{ row.currentData | propertyGet: 'definition.label' }}\n        </td>\n      </ng-container>\n\n      <!-- value column -->\n      <app-row-field\n        name=\"value\"\n        floatLabel=\"never\"\n        [definitionFn]=\"definitionByRow\"\n        [headerI18n]=\"i18nColumnPrefix + 'VALUE'\"\n        [required]=\"true\"\n      ></app-row-field>\n\n      <!-- Actions buttons column -->\n      <app-actions-column\n        [stickyEnd]=\"true\"\n        [canCancel]=\"false\"\n        [canDelete]=\"false\"\n        [dirtyIcon]=\"false\"\n        [cellTemplate]=\"cellInjection\"\n      >\n        <!-- cell injection-->\n        <ng-template #cellInjection let-row>\n          <button\n            type=\"button\"\n            mat-icon-button\n            *ngIf=\"\n              !mobile &&\n              !disabled &&\n              (row.validator | formGetValue: 'value') !== (row.validator | formGetValue: 'definition').defaultValue\n            \"\n            [class.visible-hover-row]=\"!mobile\"\n            [tabindex]=\"-1\"\n            [title]=\"'SETTINGS.BTN_RESET_PROPERTY' | translate\"\n            (click)=\"resetProperty($event, row)\"\n          >\n            <mat-icon>undo</mat-icon>\n          </button>\n        </ng-template>\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr\n        mat-row\n        *matRowDef=\"let row; columns: displayedColumns\"\n        [class.mat-row-selected]=\"row.editing\"\n        [class.mat-row-error]=\"row.validator?.invalid\"\n        [class.mat-row-dirty]=\"row.validator?.dirty\"\n        (click)=\"clickRow($event, row)\"\n        (keydown.escape)=\"escapeEditingRow($event)\"\n        [cdkTrapFocus]=\"row.validator?.invalid\"\n      ></tr>\n    </table>\n\n    <ng-container *ngIf=\"loadingSubject | async; else noResult\">\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    </ng-container>\n\n    <ng-template #noResult>\n      <ion-item *ngIf=\"totalRowCount === 0\">\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n      </ion-item>\n    </ng-template>\n  </div>\n</ion-content>\n", styles: [""], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i2$1.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1$7.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$7.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$7.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$7.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$7.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$7.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i8$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i13$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i13$2.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i10$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i9.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MatBooleanField, selector: "mat-boolean-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "subscriptSizing", "readonly", "required", "compact", "autofocus", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "clearable", "labelPosition", "tabindex", "showRadio", "value"], outputs: ["keyup.enter", "focus", "blur"] }, { kind: "component", type: ActionsColumnComponent, selector: "app-actions-column", inputs: ["matColumnDef", "style", "stickyEnd", "canCancel", "canConfirm", "canDelete", "canBackward", "canForward", "canConfirmAndAdd", "dirtyIcon", "optionsTitle", "class", "cellTemplateStart", "cellTemplate"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmEditCreateClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "component", type: AppRowField, selector: "app-row-field", inputs: ["name", "definition", "definitionFn", "headerI18n", "sortable", "resizable", "required", "readonly", "sticky", "draggable", "disabled", "placeholder", "compact", "floatLabel", "appearance", "tabindex", "autofocus", "clearable", "chipColor", "class", "debug"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: NumberFormatPipe, name: "numberFormat" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppPropertiesTable, decorators: [{
             type: Component,
@@ -44693,7 +44720,7 @@ class AccountPage extends AppForm {
         this.navController.navigateForward('account/password');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AccountPage, deps: [{ token: i0.Injector }, { token: i1$3.UntypedFormBuilder }, { token: AccountService }, { token: NetworkService }, { token: i2$1.NavController }, { token: AccountValidatorService }, { token: ConfigService }, { token: i0.ChangeDetectorRef }, { token: APP_LOCALES }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AccountPage, selector: "app-account-page", host: { listeners: { "window:beforeunload": "handleRefresh($event)" } }, viewQueries: [{ propertyName: "tabGroup", first: true, predicate: ["tabGroup"], descendants: true, static: true }, { propertyName: "propertiesTable", first: true, predicate: ["propertiesTable"], descendants: true, static: true }, { propertyName: "tokensTable", first: true, predicate: ["tokensTable"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar\n  [title]=\"'ACCOUNT.TITLE' | translate\"\n  color=\"primary\"\n  [hasValidate]=\"dirty && !saving\"\n  [hasClose]=\"!dirty && !saving\"\n  (onValidate)=\"save()\"\n  (onClose)=\"close($event)\"\n>\n  <ion-buttons slot=\"end\">\n    @if (loading || saving) {\n      <!-- loader -->\n      <ion-spinner></ion-spinner>\n    } @else if (network.online) {\n      <!-- refresh button (if online) -->\n      <ion-button [matTooltip]=\"'COMMON.BTN_REFRESH' | translate\" (click)=\"refresh($event)\">\n        <mat-icon slot=\"icon-only\">refresh</mat-icon>\n      </ion-button>\n    }\n  </ion-buttons>\n</app-toolbar>\n\n<ion-content>\n  <!-- Install (and upgrade) card -->\n  <app-install-upgrade-card [isLogin]=\"isLogin\" [showInstallButton]=\"true\"></app-install-upgrade-card>\n\n  <!-- error -->\n  @if (mobile && errorSubject | async; as error) {\n    <ion-item lines=\"none\">\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n    </ion-item>\n  }\n\n  <form [formGroup]=\"form\" novalidate class=\"form-container\">\n    <mat-tab-group\n      #tabGroup\n      [(selectedIndex)]=\"selectedTabIndex\"\n      class=\"mat-mdc-tab-disabled-hidden\"\n      [mat-stretch-tabs]=\"mobile\"\n      dynamicHeight\n    >\n      <!-- TAB: user details -->\n      <mat-tab [label]=\"'ACCOUNT.USER_DETAILS.TITLE' | translate\" class=\"ion-padding\">\n        <ng-template mat-tab-label>\n          <mat-icon>\n            <ion-icon matPrefix slot=\"start\" name=\"person-circle\"></ion-icon>\n          </mat-icon>\n          <ion-label>{{ 'ACCOUNT.USER_DETAILS.TITLE' | translate }}</ion-label>\n          <ion-icon slot=\"end\" name=\"alert-circle\" color=\"danger\" *ngIf=\"submitted && form.invalid\"></ion-icon>\n        </ng-template>\n        <ion-grid class=\"ion-no-padding\">\n          <ion-row>\n            <!-- left  margin -->\n            <ion-col size=\"0\" size-lg=\"1\" size-xl=\"2\">&nbsp;</ion-col>\n\n            <ion-col class=\"ion-padding\">\n              <ion-list-header><p [innerHTML]=\"'ACCOUNT.USER_DETAILS.DESCRIPTION' | translate\"></p></ion-list-header>\n\n              <ion-list [inset]=\"mobile\">\n                <!-- Email -->\n                <ion-item lines=\"none\">\n                  <mat-form-field>\n                    <mat-label>{{ 'USER.EMAIL' | translate }}</mat-label>\n                    <input matInput formControlName=\"email\" autocomplete=\"section-red email\" />\n                    <mat-error *ngIf=\"form.controls.email.hasError('required') && form.controls.email.dirty\" translate>\n                      ERROR.FIELD_REQUIRED\n                    </mat-error>\n                    <mat-error *ngIf=\"form.controls.email.hasError('email') && form.controls.email.dirty\">\n                      <span>{{ 'ERROR.FIELD_NOT_VALID_EMAIL' | translate }}</span>\n                    </mat-error>\n                  </mat-form-field>\n                </ion-item>\n\n                @if (email?.notConfirmed) {\n                  <ion-item lines=\"none\">\n                    <ion-grid class=\"ion-no-padding ion-padding-bottom\">\n                      <ion-row>\n                        <ion-col color=\"danger\">\n                          <ion-icon slot=\"start\" color=\"danger\" name=\"alert-circle\"></ion-icon>\n                          <ion-text [innerHTML]=\"'ACCOUNT.EMAIL_NOT_CONFIRMED_LABEL' | translate\"></ion-text>\n                        </ion-col>\n                      </ion-row>\n\n                      <ion-row style=\"height: 51px\">\n                        <ion-col style=\"text-align: right\">\n                          <ion-text>\n                            <small [innerHTML]=\"'ACCOUNT.EMAIL_NOT_RECEIVED_QUESTION' | translate\"></small>\n                          </ion-text>\n                        </ion-col>\n                        <ion-col size=\"auto\">\n                          @if (!email.sending) {\n                            <ion-button fill=\"solid\" color=\"secondary\" (click)=\"sendConfirmationEmail($event)\">\n                              {{ 'ACCOUNT.BTN_RESEND' | translate }}\n                            </ion-button>\n                          } @else {\n                            <ion-spinner class=\"ion-no-padding\"></ion-spinner>\n                          }\n                        </ion-col>\n                      </ion-row>\n\n                      <ion-row *ngIf=\"email.error && !email.sending\">\n                        <ion-col>\n                          <span *ngIf=\"email.error && !email.sending\" [innerHTML]=\"email.error | translate\"></span>\n                        </ion-col>\n                      </ion-row>\n                    </ion-grid>\n                  </ion-item>\n                }\n                <!-- Last name -->\n                <ion-item lines=\"none\">\n                  <mat-form-field>\n                    <mat-label>{{ 'USER.LAST_NAME' | translate }}</mat-label>\n                    <input\n                      matInput\n                      [appAutofocus]=\"true\"\n                      [autofocusDelay]=\"500\"\n                      formControlName=\"lastName\"\n                      autocomplete=\"section-blue family-name\"\n                      required\n                    />\n                    <mat-error\n                      *ngIf=\"form.controls.lastName.hasError('required') && form.controls.lastName.dirty\"\n                      translate\n                    >\n                      ERROR.FIELD_REQUIRED\n                    </mat-error>\n                    <mat-error *ngIf=\"form.controls.lastName.hasError('minlength') && form.controls.lastName.dirty\">\n                      <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: { requiredLength: 2 } }}</span>\n                    </mat-error>\n                  </mat-form-field>\n                </ion-item>\n\n                <!-- First name -->\n                <ion-item lines=\"none\">\n                  <mat-form-field>\n                    <mat-label>{{ 'USER.FIRST_NAME' | translate }}</mat-label>\n                    <input matInput formControlName=\"firstName\" autocomplete=\"section-blue given-name\" required />\n                    <mat-error\n                      *ngIf=\"form.controls.firstName.hasError('required') && form.controls.firstName.dirty\"\n                      translate\n                    >\n                      ERROR.FIELD_REQUIRED\n                    </mat-error>\n                    <mat-error *ngIf=\"form.controls.firstName.hasError('minlength') && form.controls.firstName.dirty\">\n                      <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: { requiredLength: 2 } }}</span>\n                    </mat-error>\n                  </mat-form-field>\n                </ion-item>\n\n                <!-- Additional fields -->\n                @for (definition of additionalFields; track definition.key) {\n                  <ion-item lines=\"none\">\n                    <app-form-field\n                      [definition]=\"definition\"\n                      [formControlName]=\"definition.key\"\n                      [required]=\"\n                        (definition.extra && definition.extra.account && definition.extra.account.required) || false\n                      \"\n                    ></app-form-field>\n                  </ion-item>\n                }\n              </ion-list>\n\n              <!-- Security -->\n              @if (showSecurityDetails) {\n                <ion-list-header><h3 translate>ACCOUNT.SECURITY.TITLE</h3></ion-list-header>\n\n                <ion-list [inset]=\"mobile\">\n                  <ion-item\n                    [button]=\"mobile\"\n                    routerDirection=\"forward\"\n                    lines=\"none\"\n                    (click)=\"openChangePasswordPage()\"\n                    [disabled]=\"disabled\"\n                  >\n                    @if (!mobile) {\n                      <ion-icon slot=\"start\" name=\"keypad\"></ion-icon>\n                      <ion-label>{{ 'ACCOUNT.SECURITY.PASSWORD' | translate }}</ion-label>\n                    }\n                    <ion-text color=\"tertiary\">{{ 'ACCOUNT.SECURITY.BTN_CHANGE_PASSWORD' | translate }}</ion-text>\n                    @if (!mobile) {\n                      <ion-icon slot=\"end\" color=\"tertiary\" name=\"chevron-forward\"></ion-icon>\n                    }\n                  </ion-item>\n                </ion-list>\n              }\n\n              <!-- Technical details -->\n              @if (showTechnicalDetails) {\n                <ion-list-header><h3 translate>ACCOUNT.USER_DETAILS.TECHNICAL_DIVIDER</h3></ion-list-header>\n\n                <ion-list [inset]=\"mobile\">\n                  <!-- profile -->\n                  <ion-item lines=\"none\">\n                    <mat-form-field>\n                      <mat-label>{{ 'ACCOUNT.USER_DETAILS.PROFILE' | translate }}</mat-label>\n                      <input matInput hidden readonly=\"true\" formControlName=\"mainProfile\" required />\n                      <span>{{ 'USER.PROFILE_ENUM.' + form.controls.mainProfile.value | translate }}</span>\n                      <mat-error\n                        *ngIf=\"form.controls.firstName.hasError('mainProfile') && form.controls.mainProfile.dirty\"\n                        translate\n                      >\n                        ERROR.FIELD_REQUIRED\n                      </mat-error>\n                    </mat-form-field>\n                  </ion-item>\n\n                  <!-- pubkey -->\n                  <ion-item lines=\"none\">\n                    <mat-form-field>\n                      <mat-label>{{ 'ACCOUNT.USER_DETAILS.PUBKEY' | translate }}</mat-label>\n                      <input matInput readonly=\"true\" formControlName=\"pubkey\" required />\n                      <mat-error\n                        *ngIf=\"form.controls.firstName.hasError('pubkey') && form.controls.firstName.dirty\"\n                        translate\n                      >\n                        ERROR.FIELD_REQUIRED\n                      </mat-error>\n                      <mat-error *ngIf=\"form.controls.firstName.hasError('pubkey') && form.controls.firstName.dirty\">\n                        <span translate>ERROR.FIELD_NOT_VALID_PUBKEY</span>\n                      </mat-error>\n                    </mat-form-field>\n                  </ion-item>\n                </ion-list>\n              }\n            </ion-col>\n\n            <!-- right margin -->\n            <ion-col size=\"0\" size-lg=\"1\" size-xl=\"2\">&nbsp;</ion-col>\n          </ion-row>\n        </ion-grid>\n      </mat-tab>\n\n      <!-- TAB: settings -->\n      <mat-tab [label]=\"'ACCOUNT.SETTINGS.TITLE' | translate\" formGroupName=\"settings\">\n        <ng-template mat-tab-label>\n          <mat-icon>\n            <ion-icon matPrefix slot=\"start\" name=\"settings\"></ion-icon>\n          </mat-icon>\n          <ion-label translate>ACCOUNT.SETTINGS.TITLE</ion-label>\n        </ng-template>\n\n        <div class=\"ion-padding\">\n          <p [innerHTML]=\"'ACCOUNT.SETTINGS.DESCRIPTION' | translate\"></p>\n\n          <mat-form-field>\n            <mat-label>{{ 'ACCOUNT.SETTINGS.LOCALE' | translate }}</mat-label>\n            <mat-select formControlName=\"locale\" required>\n              <mat-option *ngFor=\"let item of locales\" [value]=\"item.key\">\n                {{ item.value }}\n              </mat-option>\n            </mat-select>\n            <mat-error\n              *ngIf=\"settingsForm?.controls.locale.hasError('required') && settingsForm?.controls.locale.dirty\"\n              translate\n            >\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n          </mat-form-field>\n\n          <!-- lat/long format-->\n          @if (showLatLonFormat) {\n            @let control = settingsForm | formGetControl: 'latLongFormat';\n            <mat-form-field>\n              <mat-label>{{ 'ACCOUNT.SETTINGS.LAT_LONG_FORMAT' | translate }}</mat-label>\n              <mat-select [formControl]=\"control\" required>\n                @for (item of latLongFormats; track item) {\n                  <mat-option [value]=\"item\">\n                    {{ 'COMMON.LAT_LONG.ENUM.' + item | uppercase | translate }}\n                  </mat-option>\n                }\n              </mat-select>\n              @if (control.dirty && control.hasError('required')) {\n                <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n              }\n            </mat-form-field>\n          }\n        </div>\n\n        <!-- Options table -->\n        <div class=\"options-table\" [class.cdk-visually-hidden]=\"optionDefinitions | isEmptyArray\">\n          <app-properties-table\n            #propertiesTable\n            i18nColumnPrefix=\"ACCOUNT.SETTINGS.OPTIONS.\"\n            [definitions]=\"optionDefinitions\"\n            [disabled]=\"disabled\"\n            [canEdit]=\"true\"\n            [debug]=\"debug\"\n            (onDirty)=\"$event ? markAsDirty() : undefined\"\n          ></app-properties-table>\n        </div>\n      </mat-tab>\n\n      <!-- TAB: tokens -->\n      <mat-tab [label]=\"'ACCOUNT.TOKENS.TITLE' | translate\" formGroupName=\"tokens\" [disabled]=\"!showApiTokens\">\n        <ng-template mat-tab-label>\n          <mat-icon>\n            <ion-icon matPrefix slot=\"start\" name=\"ticket\"></ion-icon>\n          </mat-icon>\n          <ion-label translate>ACCOUNT.TOKENS.TITLE</ion-label>\n        </ng-template>\n\n        <div class=\"ion-padding\">\n          <p [innerHTML]=\"'ACCOUNT.TOKENS.DESCRIPTION' | translate\"></p>\n        </div>\n        <!-- Tokens table -->\n        <div class=\"tokens-table\">\n          <app-user-token-table\n            #tokensTable\n            [disabled]=\"disabled\"\n            [canEdit]=\"true\"\n            [debug]=\"debug\"\n            (onDirty)=\"$event ? markAsDirty() : undefined\"\n          ></app-user-token-table>\n        </div>\n      </mat-tab>\n    </mat-tab-group>\n  </form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <app-form-buttons-bar (onCancel)=\"cancel()\" (onSave)=\"save()\" [disabled]=\"!form.dirty || !valid || saving\">\n    <!-- error -->\n    <ion-item *ngIf=\"error && !mobile\" lines=\"none\">\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n    </ion-item>\n  </app-form-buttons-bar>\n</ion-footer>\n", styles: ["mat-tab-group .mat-tab-body-content{padding:var(--ion-grid-padding);display:grid}form{width:100%}form mat-form-field{width:100%}div.options-table{height:calc(100vh - 380px)}div.tokens-table{height:calc(100vh - 250px)}\n"], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$1.IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i7.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i7.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i7.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i10$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "id", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "component", type: AppFormField, selector: "app-form-field", inputs: ["definition", "readonly", "disabled", "formControl", "formControlName", "placeholder", "compact", "required", "hideRequiredMarker", "floatLabel", "label", "appearance", "subscriptSizing", "tabindex", "autofocus", "clearable", "chipColor", "class", "debug", "panelClass", "panelWidth"], outputs: ["keyup.enter"] }, { kind: "component", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: ["disabled", "disabledCancel", "disabledEscape", "classList", "saveButtonColor", "backText", "cancelText", "nextText", "showBack", "showCancel", "showNext", "showSave"], outputs: ["onCancel", "onSave", "onNext", "onBack", "onSaveAndClose", "onSaveAndNext"] }, { kind: "component", type: AppPropertiesTable, selector: "app-properties-table", inputs: ["definitions", "showToolbar"] }, { kind: "component", type: AppInstallUpgradeCard, selector: "app-install-upgrade-card", inputs: ["isLogin", "showUpgradeWarning", "showOfflineWarning", "showInstallButton", "debug"] }, { kind: "component", type: UserTokenTable, selector: "app-user-token-table", inputs: ["useSticky"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: EmptyArrayPipe, name: "isEmptyArray" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AccountPage, selector: "app-account-page", host: { listeners: { "window:beforeunload": "handleRefresh($event)" } }, viewQueries: [{ propertyName: "tabGroup", first: true, predicate: ["tabGroup"], descendants: true, static: true }, { propertyName: "propertiesTable", first: true, predicate: ["propertiesTable"], descendants: true, static: true }, { propertyName: "tokensTable", first: true, predicate: ["tokensTable"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar\n  [title]=\"'ACCOUNT.TITLE' | translate\"\n  color=\"primary\"\n  [hasValidate]=\"dirty && !saving\"\n  [hasClose]=\"!dirty && !saving\"\n  (onValidate)=\"save()\"\n  (onClose)=\"close($event)\"\n>\n  <ion-buttons slot=\"end\">\n    @if (loading || saving) {\n      <!-- loader -->\n      <ion-spinner></ion-spinner>\n    } @else if (network.online) {\n      <!-- refresh button (if online) -->\n      <ion-button [matTooltip]=\"'COMMON.BTN_REFRESH' | translate\" (click)=\"refresh($event)\">\n        <mat-icon slot=\"icon-only\">refresh</mat-icon>\n      </ion-button>\n    }\n  </ion-buttons>\n</app-toolbar>\n\n<ion-content>\n  <!-- Install (and upgrade) card -->\n  <app-install-upgrade-card [isLogin]=\"isLogin\" [showInstallButton]=\"true\"></app-install-upgrade-card>\n\n  <!-- error -->\n  @if (mobile && errorSubject | async; as error) {\n    <ion-item lines=\"none\">\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n    </ion-item>\n  }\n\n  <form [formGroup]=\"form\" novalidate class=\"form-container\">\n    <mat-tab-group\n      #tabGroup\n      [(selectedIndex)]=\"selectedTabIndex\"\n      class=\"mat-mdc-tab-disabled-hidden\"\n      [mat-stretch-tabs]=\"mobile\"\n      dynamicHeight\n    >\n      <!-- TAB: user details -->\n      <mat-tab [label]=\"'ACCOUNT.USER_DETAILS.TITLE' | translate\" class=\"ion-padding\">\n        <ng-template mat-tab-label>\n          <mat-icon>\n            <ion-icon matPrefix slot=\"start\" name=\"person-circle\"></ion-icon>\n          </mat-icon>\n          <ion-label>{{ 'ACCOUNT.USER_DETAILS.TITLE' | translate }}</ion-label>\n          <ion-icon slot=\"end\" name=\"alert-circle\" color=\"danger\" *ngIf=\"submitted && form.invalid\"></ion-icon>\n        </ng-template>\n        <ion-grid class=\"ion-no-padding\">\n          <ion-row>\n            <!-- left  margin -->\n            <ion-col size=\"0\" size-lg=\"1\" size-xl=\"2\">&nbsp;</ion-col>\n\n            <ion-col class=\"ion-padding\">\n              <ion-list-header><p [innerHTML]=\"'ACCOUNT.USER_DETAILS.DESCRIPTION' | translate\"></p></ion-list-header>\n\n              <ion-list [inset]=\"mobile\">\n                <!-- Email -->\n                <ion-item lines=\"none\">\n                  <mat-form-field>\n                    <mat-label>{{ 'USER.EMAIL' | translate }}</mat-label>\n                    <input matInput formControlName=\"email\" autocomplete=\"section-red email\" />\n                    <mat-error *ngIf=\"form.controls.email.hasError('required') && form.controls.email.dirty\" translate>\n                      ERROR.FIELD_REQUIRED\n                    </mat-error>\n                    <mat-error *ngIf=\"form.controls.email.hasError('email') && form.controls.email.dirty\">\n                      <span>{{ 'ERROR.FIELD_NOT_VALID_EMAIL' | translate }}</span>\n                    </mat-error>\n                  </mat-form-field>\n                </ion-item>\n\n                @if (email?.notConfirmed) {\n                  <ion-item lines=\"none\">\n                    <ion-grid class=\"ion-no-padding ion-padding-bottom\">\n                      <ion-row>\n                        <ion-col color=\"danger\">\n                          <ion-icon slot=\"start\" color=\"danger\" name=\"alert-circle\"></ion-icon>\n                          <ion-text [innerHTML]=\"'ACCOUNT.EMAIL_NOT_CONFIRMED_LABEL' | translate\"></ion-text>\n                        </ion-col>\n                      </ion-row>\n\n                      <ion-row style=\"height: 51px\">\n                        <ion-col style=\"text-align: right\">\n                          <ion-text>\n                            <small [innerHTML]=\"'ACCOUNT.EMAIL_NOT_RECEIVED_QUESTION' | translate\"></small>\n                          </ion-text>\n                        </ion-col>\n                        <ion-col size=\"auto\">\n                          @if (!email.sending) {\n                            <ion-button fill=\"solid\" color=\"secondary\" (click)=\"sendConfirmationEmail($event)\">\n                              {{ 'ACCOUNT.BTN_RESEND' | translate }}\n                            </ion-button>\n                          } @else {\n                            <ion-spinner class=\"ion-no-padding\"></ion-spinner>\n                          }\n                        </ion-col>\n                      </ion-row>\n\n                      <ion-row *ngIf=\"email.error && !email.sending\">\n                        <ion-col>\n                          <span *ngIf=\"email.error && !email.sending\" [innerHTML]=\"email.error | translate\"></span>\n                        </ion-col>\n                      </ion-row>\n                    </ion-grid>\n                  </ion-item>\n                }\n                <!-- Last name -->\n                <ion-item lines=\"none\">\n                  <mat-form-field>\n                    <mat-label>{{ 'USER.LAST_NAME' | translate }}</mat-label>\n                    <input\n                      matInput\n                      [appAutofocus]=\"true\"\n                      [autofocusDelay]=\"500\"\n                      formControlName=\"lastName\"\n                      autocomplete=\"section-blue family-name\"\n                      required\n                    />\n                    <mat-error\n                      *ngIf=\"form.controls.lastName.hasError('required') && form.controls.lastName.dirty\"\n                      translate\n                    >\n                      ERROR.FIELD_REQUIRED\n                    </mat-error>\n                    <mat-error *ngIf=\"form.controls.lastName.hasError('minlength') && form.controls.lastName.dirty\">\n                      <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: { requiredLength: 2 } }}</span>\n                    </mat-error>\n                  </mat-form-field>\n                </ion-item>\n\n                <!-- First name -->\n                <ion-item lines=\"none\">\n                  <mat-form-field>\n                    <mat-label>{{ 'USER.FIRST_NAME' | translate }}</mat-label>\n                    <input matInput formControlName=\"firstName\" autocomplete=\"section-blue given-name\" required />\n                    <mat-error\n                      *ngIf=\"form.controls.firstName.hasError('required') && form.controls.firstName.dirty\"\n                      translate\n                    >\n                      ERROR.FIELD_REQUIRED\n                    </mat-error>\n                    <mat-error *ngIf=\"form.controls.firstName.hasError('minlength') && form.controls.firstName.dirty\">\n                      <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: { requiredLength: 2 } }}</span>\n                    </mat-error>\n                  </mat-form-field>\n                </ion-item>\n\n                <!-- Additional fields -->\n                @for (definition of additionalFields; track definition.key) {\n                  <ion-item lines=\"none\">\n                    <app-form-field\n                      [definition]=\"definition\"\n                      [formControlName]=\"definition.key\"\n                      [required]=\"\n                        (definition.extra && definition.extra.account && definition.extra.account.required) || false\n                      \"\n                    ></app-form-field>\n                  </ion-item>\n                }\n              </ion-list>\n\n              <!-- Security -->\n              @if (showSecurityDetails) {\n                <ion-list-header><h3 translate>ACCOUNT.SECURITY.TITLE</h3></ion-list-header>\n\n                <ion-list [inset]=\"mobile\">\n                  <ion-item\n                    [button]=\"mobile\"\n                    routerDirection=\"forward\"\n                    lines=\"none\"\n                    (click)=\"openChangePasswordPage()\"\n                    [disabled]=\"disabled\"\n                  >\n                    @if (!mobile) {\n                      <ion-icon slot=\"start\" name=\"keypad\"></ion-icon>\n                      <ion-label>{{ 'ACCOUNT.SECURITY.PASSWORD' | translate }}</ion-label>\n                    }\n                    <ion-text color=\"tertiary\">{{ 'ACCOUNT.SECURITY.BTN_CHANGE_PASSWORD' | translate }}</ion-text>\n                    @if (!mobile) {\n                      <ion-icon slot=\"end\" color=\"tertiary\" name=\"chevron-forward\"></ion-icon>\n                    }\n                  </ion-item>\n                </ion-list>\n              }\n\n              <!-- Technical details -->\n              @if (showTechnicalDetails) {\n                <ion-list-header><h3 translate>ACCOUNT.USER_DETAILS.TECHNICAL_DIVIDER</h3></ion-list-header>\n\n                <ion-list [inset]=\"mobile\">\n                  <!-- profile -->\n                  <ion-item lines=\"none\">\n                    <mat-form-field>\n                      <mat-label>{{ 'ACCOUNT.USER_DETAILS.PROFILE' | translate }}</mat-label>\n                      <input matInput hidden readonly=\"true\" formControlName=\"mainProfile\" required />\n                      <span>{{ 'USER.PROFILE_ENUM.' + form.controls.mainProfile.value | translate }}</span>\n                      <mat-error\n                        *ngIf=\"form.controls.firstName.hasError('mainProfile') && form.controls.mainProfile.dirty\"\n                        translate\n                      >\n                        ERROR.FIELD_REQUIRED\n                      </mat-error>\n                    </mat-form-field>\n                  </ion-item>\n\n                  <!-- pubkey -->\n                  <ion-item lines=\"none\">\n                    <mat-form-field>\n                      <mat-label>{{ 'ACCOUNT.USER_DETAILS.PUBKEY' | translate }}</mat-label>\n                      <input matInput readonly=\"true\" formControlName=\"pubkey\" required />\n                      <mat-error\n                        *ngIf=\"form.controls.firstName.hasError('pubkey') && form.controls.firstName.dirty\"\n                        translate\n                      >\n                        ERROR.FIELD_REQUIRED\n                      </mat-error>\n                      <mat-error *ngIf=\"form.controls.firstName.hasError('pubkey') && form.controls.firstName.dirty\">\n                        <span translate>ERROR.FIELD_NOT_VALID_PUBKEY</span>\n                      </mat-error>\n                    </mat-form-field>\n                  </ion-item>\n                </ion-list>\n              }\n            </ion-col>\n\n            <!-- right margin -->\n            <ion-col size=\"0\" size-lg=\"1\" size-xl=\"2\">&nbsp;</ion-col>\n          </ion-row>\n        </ion-grid>\n      </mat-tab>\n\n      <!-- TAB: settings -->\n      <mat-tab [label]=\"'ACCOUNT.SETTINGS.TITLE' | translate\" formGroupName=\"settings\">\n        <ng-template mat-tab-label>\n          <mat-icon>\n            <ion-icon matPrefix slot=\"start\" name=\"settings\"></ion-icon>\n          </mat-icon>\n          <ion-label translate>ACCOUNT.SETTINGS.TITLE</ion-label>\n        </ng-template>\n\n        <div class=\"ion-padding\">\n          <p [innerHTML]=\"'ACCOUNT.SETTINGS.DESCRIPTION' | translate\"></p>\n\n          <mat-form-field>\n            <mat-label>{{ 'ACCOUNT.SETTINGS.LOCALE' | translate }}</mat-label>\n            <mat-select formControlName=\"locale\" required>\n              <mat-option *ngFor=\"let item of locales\" [value]=\"item.key\">\n                {{ item.value }}\n              </mat-option>\n            </mat-select>\n            <mat-error\n              *ngIf=\"settingsForm?.controls.locale.hasError('required') && settingsForm?.controls.locale.dirty\"\n              translate\n            >\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n          </mat-form-field>\n\n          <!-- lat/long format-->\n          @if (showLatLonFormat) {\n            @let control = settingsForm | formGetControl: 'latLongFormat';\n            <mat-form-field>\n              <mat-label>{{ 'ACCOUNT.SETTINGS.LAT_LONG_FORMAT' | translate }}</mat-label>\n              <mat-select [formControl]=\"control\" required>\n                @for (item of latLongFormats; track item) {\n                  <mat-option [value]=\"item\">\n                    {{ 'COMMON.LAT_LONG.ENUM.' + item | uppercase | translate }}\n                  </mat-option>\n                }\n              </mat-select>\n              @if (control.dirty && control.hasError('required')) {\n                <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n              }\n            </mat-form-field>\n          }\n        </div>\n\n        <!-- Options table -->\n        <div class=\"options-table\" [class.cdk-visually-hidden]=\"optionDefinitions | isEmptyArray\">\n          <app-properties-table\n            #propertiesTable\n            i18nColumnPrefix=\"ACCOUNT.SETTINGS.OPTIONS.\"\n            [definitions]=\"optionDefinitions\"\n            [disabled]=\"disabled\"\n            [canEdit]=\"true\"\n            [debug]=\"debug\"\n            (onDirty)=\"$event ? markAsDirty() : undefined\"\n          ></app-properties-table>\n        </div>\n      </mat-tab>\n\n      <!-- TAB: tokens -->\n      <mat-tab [label]=\"'ACCOUNT.TOKENS.TITLE' | translate\" formGroupName=\"tokens\" [disabled]=\"!showApiTokens\">\n        <ng-template mat-tab-label>\n          <mat-icon>\n            <ion-icon matPrefix slot=\"start\" name=\"ticket\"></ion-icon>\n          </mat-icon>\n          <ion-label translate>ACCOUNT.TOKENS.TITLE</ion-label>\n        </ng-template>\n\n        <div class=\"ion-padding\">\n          <p [innerHTML]=\"'ACCOUNT.TOKENS.DESCRIPTION' | translate\"></p>\n        </div>\n        <!-- Tokens table -->\n        <div class=\"tokens-table\">\n          <app-user-token-table\n            #tokensTable\n            [disabled]=\"disabled\"\n            [canEdit]=\"true\"\n            [debug]=\"debug\"\n            (onDirty)=\"$event ? markAsDirty() : undefined\"\n          ></app-user-token-table>\n        </div>\n      </mat-tab>\n    </mat-tab-group>\n  </form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <app-form-buttons-bar (onCancel)=\"cancel()\" (onSave)=\"save()\" [disabled]=\"!form.dirty || !valid || saving\">\n    <!-- error -->\n    <ion-item *ngIf=\"error && !mobile\" lines=\"none\">\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n    </ion-item>\n  </app-form-buttons-bar>\n</ion-footer>\n", styles: ["mat-tab-group .mat-tab-body-content{padding:var(--ion-grid-padding);display:grid}form{width:100%}form mat-form-field{width:100%}div.options-table{height:calc(100vh - 380px)}div.tokens-table{height:calc(100vh - 250px)}\n"], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$1.IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i8.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i8.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i8.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i10$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "id", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "component", type: AppFormField, selector: "app-form-field", inputs: ["definition", "readonly", "disabled", "formControl", "formControlName", "placeholder", "compact", "required", "hideRequiredMarker", "floatLabel", "label", "appearance", "subscriptSizing", "tabindex", "autofocus", "clearable", "chipColor", "class", "debug", "panelClass", "panelWidth"], outputs: ["keyup.enter"] }, { kind: "component", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: ["disabled", "disabledCancel", "disabledEscape", "classList", "saveButtonColor", "backText", "cancelText", "nextText", "showBack", "showCancel", "showNext", "showSave"], outputs: ["onCancel", "onSave", "onNext", "onBack", "onSaveAndClose", "onSaveAndNext"] }, { kind: "component", type: AppPropertiesTable, selector: "app-properties-table", inputs: ["definitions", "showToolbar"] }, { kind: "component", type: AppInstallUpgradeCard, selector: "app-install-upgrade-card", inputs: ["isLogin", "showUpgradeWarning", "showOfflineWarning", "showInstallButton", "debug"] }, { kind: "component", type: UserTokenTable, selector: "app-user-token-table", inputs: ["useSticky"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: EmptyArrayPipe, name: "isEmptyArray" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AccountPage, decorators: [{
             type: Component,
@@ -46278,7 +46305,7 @@ class JobProgressionIcon extends RxState {
         this.cd.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: JobProgressionIcon, deps: [{ token: APP_JOB_PROGRESSION_SERVICE, optional: true }, { token: i2$1.PopoverController }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: JobProgressionIcon, selector: "app-job-progression-icon", inputs: { debug: "debug", titleI18n: "titleI18n", options: "options", autoHide: "autoHide", headerActions: "headerActions" }, outputs: { jobFinished: "jobFinished" }, usesInheritance: true, ngImport: i0, template: "@let count = (jobCount$ | async);\n@if (visible$ | async) {\n  <button\n    #button\n    mat-icon-button\n    [title]=\"titleI18n | translate\"\n    [disabled]=\"disabled\"\n    (click)=\"showList($event)\"\n  >\n    <mat-icon\n      [matBadge]=\"count | badgeNumber\"\n      [matBadgeHidden]=\"!count\"\n      matBadgeColor=\"accent\"\n      matBadgeSize=\"small\"\n      matBadgePosition=\"above after\"\n      aria-hidden=\"false\"\n    >\n      {{ disabled || count ? 'schedule' : 'task_alt' }}\n    </mat-icon>\n    @if (count) {\n      <mat-spinner\n        #spinner\n        class=\"floating-spinner\"\n        [color]=\"color\"\n        [mode]=\"mode$ | push\"\n        [value]=\"value$ | push\"\n        diameter=\"30\"\n        strokeWidth=\"3\"\n      ></mat-spinner>\n    }\n  </button>\n}\n", styles: [".floating-spinner{position:absolute;height:24px!important;width:24px!important;top:12px;left:12px}\n"], dependencies: [{ kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4$4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i8.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i19.RxPush, name: "push" }, { kind: "pipe", type: BadgeNumberPipe, name: "badgeNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: JobProgressionIcon, selector: "app-job-progression-icon", inputs: { debug: "debug", titleI18n: "titleI18n", options: "options", autoHide: "autoHide", headerActions: "headerActions" }, outputs: { jobFinished: "jobFinished" }, usesInheritance: true, ngImport: i0, template: "@let count = (jobCount$ | async);\n@if (visible$ | async) {\n  <button\n    #button\n    mat-icon-button\n    [title]=\"titleI18n | translate\"\n    [disabled]=\"disabled\"\n    (click)=\"showList($event)\"\n  >\n    <mat-icon\n      [matBadge]=\"count | badgeNumber\"\n      [matBadgeHidden]=\"!count\"\n      matBadgeColor=\"accent\"\n      matBadgeSize=\"small\"\n      matBadgePosition=\"above after\"\n      aria-hidden=\"false\"\n    >\n      {{ disabled || count ? 'schedule' : 'task_alt' }}\n    </mat-icon>\n    @if (count) {\n      <mat-spinner\n        #spinner\n        class=\"floating-spinner\"\n        [color]=\"color\"\n        [mode]=\"mode$ | push\"\n        [value]=\"value$ | push\"\n        diameter=\"30\"\n        strokeWidth=\"3\"\n      ></mat-spinner>\n    }\n  </button>\n}\n", styles: [".floating-spinner{position:absolute;height:24px!important;width:24px!important;top:12px;left:12px}\n"], dependencies: [{ kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4$4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i9.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i19.RxPush, name: "push" }, { kind: "pipe", type: BadgeNumberPipe, name: "badgeNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: JobProgressionIcon, decorators: [{
             type: Component,
@@ -46702,7 +46729,7 @@ class UsersPage extends AppTable {
     }
     getDisplayValueFn = FormFieldDefinitionUtils.getDisplayValueFn;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UsersPage, deps: [{ token: i0.Injector }, { token: i1$3.UntypedFormBuilder }, { token: AccountService }, { token: i1$8.ValidatorService }, { token: ConfigService }, { token: PersonService }, { token: MessageService }, { token: MenuService }, { token: i2$1.ModalController }, { token: ENVIRONMENT }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: UsersPage, selector: "app-users-table", inputs: { showUsernameColumn: "showUsernameColumn", showUsernameExtranetColumn: "showUsernameExtranetColumn", showEmailColumn: "showEmailColumn", showPubkeyColumn: "showPubkeyColumn", showCreationDateColumn: "showCreationDateColumn", showUpdateDateColumn: "showUpdateDateColumn", title: "title", canSendMessage: ["canSendMessage", "canSendMessage", booleanAttribute], canEdit: ["canEdit", "canEdit", booleanAttribute], compact: ["compact", "compact", booleanAttribute], usePageSettings: ["usePageSettings", "usePageSettings", booleanAttribute], sticky: ["sticky", "sticky", booleanAttribute], stickyEnd: ["stickyEnd", "stickyEnd", booleanAttribute], canDownload: ["canDownload", "canDownload", booleanAttribute], inModal: ["inModal", "inModal", booleanAttribute], showFooter: ["showFooter", "showFooter", booleanAttribute], showToolbar: ["showToolbar", "showToolbar", booleanAttribute], showPaginator: ["showPaginator", "showPaginator", booleanAttribute] }, providers: [{ provide: ValidatorService, useExisting: PersonValidatorService }], viewQueries: [{ propertyName: "filterExpansionPanel", first: true, predicate: MatExpansionPanel, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar\n  [title]=\"(title || 'USER.LIST.TITLE') | translate\"\n  color=\"primary\"\n  [canGoBack]=\"false\"\n  [class.cdk-visible-hidden]=\"!showToolbar\"\n  [hasValidate]=\"(loadingSubject | async) !== true && (dirtySubject | async) === true\"\n  (onValidate)=\"save()\"\n>\n  <ion-buttons slot=\"end\">\n    <!-- Compose message -->\n    <button\n      mat-icon-button\n      *ngIf=\"canSendMessage\"\n      [title]=\"'USER.LIST.BTN_SEND_MESSAGE' | translate\"\n      (click)=\"openComposeMessageModal($event)\"\n    >\n      <ion-icon name=\"mail\" slot=\"icon-only\"></ion-icon>\n    </button>\n\n    @if (selection | isEmptySelection) {\n      <!-- Add -->\n      <button mat-icon-button *ngIf=\"canEdit && !mobile\" [title]=\"'COMMON.BTN_ADD' | translate\" (click)=\"addRow()\">\n        <mat-icon>add</mat-icon>\n      </button>\n\n      <!-- Refresh -->\n      <button mat-icon-button *ngIf=\"!mobile\" [title]=\"'COMMON.BTN_REFRESH' | translate\" (click)=\"emitRefresh()\">\n        <mat-icon>refresh</mat-icon>\n      </button>\n\n      <!-- reset filter -->\n      <button mat-icon-button (click)=\"resetFilter()\" *ngIf=\"filterCriteriaCount\">\n        <mat-icon color=\"accent\">filter_list_alt</mat-icon>\n        <mat-icon class=\"icon-secondary\" style=\"left: 16px; top: 5px; font-weight: bold\">close</mat-icon>\n      </button>\n\n      <!-- show filter -->\n      <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n        <mat-icon\n          *ngIf=\"filterCriteriaCount; else emptyFilter\"\n          [matBadge]=\"filterCriteriaCount\"\n          matBadgeColor=\"accent\"\n          matBadgeSize=\"small\"\n          matBadgePosition=\"above after\"\n          aria-hidden=\"false\"\n        >\n          filter_list_alt\n        </mat-icon>\n        <ng-template #emptyFilter>\n          <mat-icon>filter_list_alt</mat-icon>\n        </ng-template>\n      </button>\n    } @else {\n      <!-- delete -->\n      <button\n        mat-icon-button\n        class=\"hidden-xs hidden-sm\"\n        [title]=\"'COMMON.BTN_DELETE' | translate\"\n        (click)=\"deleteSelection($event)\"\n      >\n        <mat-icon>delete</mat-icon>\n      </button>\n    }\n\n    @if (!mobile && (canDownload || canDebug)) {\n      <button mat-icon-button [title]=\"'COMMON.BTN_OPTIONS' | translate\" [matMenuTriggerFor]=\"toolbarOptionsMenu\">\n        <mat-icon>more_vert</mat-icon>\n      </button>\n    }\n  </ion-buttons>\n</app-toolbar>\n\n<!-- Toolbar option menu -->\n<mat-menu #toolbarOptionsMenu=\"matMenu\" xPosition=\"after\">\n  <ng-template matMenuContent>\n  <!-- export button -->\n  @if (canDownload) {\n    <button mat-menu-item (click)=\"exportToCsv($event)\">\n      <mat-icon>download</mat-icon>\n      <ion-label translate>FILE.CSV.BTN_DOWNLOAD_HELP</ion-label>\n    </button>\n  }\n\n  <!-- Debug only: Test select users modal -->\n  @if (canDebug) {\n    <mat-divider></mat-divider>\n\n    <button mat-menu-item #menuTrigger=\"matMenuTrigger\" (mouseenter)=\"menuTrigger.openMenu()\" [matMenuTriggerFor]=\"debugMenu\">\n      <mat-icon><ion-icon name=\"bug\"></ion-icon></mat-icon>\n      <ion-label translate>COMMON.DEBUG.BTN_DEBUG_DOTS</ion-label>\n    </button>\n  }\n  </ng-template>\n</mat-menu>\n\n<!-- debug menu -->\n<mat-menu #debugMenu=\"matMenu\">\n  <ng-template matMenuContent>\n\n    <button mat-menu-item (click)=\"devToggleDebug()\">\n      <mat-icon>{{ debug ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n      <ion-label translate>COMMON.DEBUG.BTN_ENABLE_DEBUG</ion-label>\n    </button>\n  </ng-template>\n</mat-menu>\n\n<ion-content class=\"ion-no-padding\">\n  <!-- error -->\n  <ion-item\n    *ngIf=\"errorSubject | async; let error\"\n    lines=\"none\"\n    class=\"hidden-sm hidden-xs hidden-mobile\"\n    @slideUpDownAnimation\n  >\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n  </ion-item>\n\n  <!-- debug -->\n  <app-debug *ngIf=\"debug\">\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row>\n        <ion-col>\n          focusColumn: {{ focusColumn }}\n          <br />\n          loadingSubject: {{ loading }}\n          <br />\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </app-debug>\n\n  <!-- search -->\n  <mat-expansion-panel #filterExpansionPanel class=\"ion-no-padding filter-panel filter-panel-floating\">\n    <form class=\"form-container ion-padding\" [formGroup]=\"filterForm\" (ngSubmit)=\"emitRefresh()\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search -->\n            <mat-form-field>\n              <mat-label>{{ 'USER.LIST.FILTER.SEARCH' | translate }}</mat-label>\n              <input matInput formControlName=\"searchText\" />\n              <button\n                mat-icon-button\n                matSuffix\n                tabindex=\"-1\"\n                type=\"button\"\n                (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\"\n              >\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n\n          <ion-col>\n            <!-- status -->\n            <mat-form-field>\n              <mat-label>{{ 'USER.STATUS' | translate }}</mat-label>\n              <mat-select formControlName=\"statusId\">\n                <mat-option [value]=\"null\">\n                  <i><span translate>COMMON.EMPTY_OPTION</span></i>\n                </mat-option>\n                <mat-option *ngFor=\"let item of statusList\" [value]=\"item.id\">\n                  <ion-icon [name]=\"item.icon\"></ion-icon>\n                  {{ item.label | translate }}\n                </mat-option>\n              </mat-select>\n\n              <button\n                mat-icon-button\n                matSuffix\n                tabindex=\"-1\"\n                type=\"button\"\n                (click)=\"clearControlValue($event, filterForm.controls.statusId)\"\n                [hidden]=\"filterForm.controls.statusId.disabled || !filterForm.controls.statusId.value\"\n              >\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n\n          <ion-col>\n            <!-- user profiles -->\n            <mat-chips-field\n              formControlName=\"userProfiles\"\n              [placeholder]=\"'USER.PROFILES' | translate\"\n              chipColor=\"accent\"\n              [items]=\"userProfileList\"\n              [displayAttributes]=\"['name']\"\n              [clearable]=\"true\">\n            </mat-chips-field>\n          </ion-col>\n        </ion-row>\n\n        <!-- Additional fields filters -->\n        <ion-row *ngIf=\"filterableAdditionalFields && filterableAdditionalFields.length > 0\">\n          <ion-col *ngFor=\"let field of filterableAdditionalFields\" size=\"12\" size-md=\"6\" size-lg=\"4\">\n            <app-form-field\n              [definition]=\"field\"\n              [formControlName]=\"field.key\"\n              [clearable]=\"true\"\n              floatLabel=\"auto\">\n            </app-form-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <mat-action-row>\n      <!-- Counter  -->\n      <ion-label\n        [hidden]=\"(loadingSubject | async) === true || filterForm.dirty\"\n        [color]=\"empty && 'danger'\"\n        class=\"ion-padding\"\n      >\n        {{\n          (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT')\n            | translate\n              : {\n                  count: (totalRowCount | numberFormat),\n                }\n        }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <!-- Close panel -->\n      <ion-button\n        mat-button\n        fill=\"clear\"\n        color=\"dark\"\n        (click)=\"filterExpansionPanel.close()\"\n        [disabled]=\"loadingSubject | async\"\n      >\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button\n        mat-button\n        [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n        [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n        (click)=\"applyFilterAndClosePanel($event)\"\n        [disabled]=\"loadingSubject | async\"\n      >\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <!-- error -->\n  @if (mobile && (errorSubject | async); as error) {\n    <ion-item lines=\"none\">\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n    </ion-item>\n  }\n\n  <div class=\"table-container\" [class.has-toolbar]=\"showToolbar\"\n       [class.has-paginator]=\"showPaginator\" [class.has-form-buttons]=\"showFormButtons\">\n    <table\n      #table\n      mat-table\n      matSort\n      [class.compact]=\"compact\"\n      [dataSource]=\"dataSource\"\n      [matSortActive]=\"defaultSortBy\"\n      [matSortDirection]=\"defaultSortDirection\"\n      matSortDisableClear\n      [trackBy]=\"trackByFn\"\n    >\n      <ng-container matColumnDef=\"select\" [sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!inlineEdition\">\n          <mat-checkbox\n            (change)=\"$event ? masterToggle() : null\"\n            [checked]=\"this | isAllSelected\"\n            [indeterminate]=\"this | isNotAllSelected\"\n          ></mat-checkbox>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!inlineEdition\">\n          <mat-checkbox (click)=\"toggleSelectRow($event, row)\" [checked]=\"selection | isSelected: row\"></mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id Column -->\n      <ng-container matColumnDef=\"id\" [sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label>#</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <ion-label>{{ row.currentData.id }}</ion-label>\n        </td>\n      </ng-container>\n\n      <!-- avatar Column -->\n      <ng-container matColumnDef=\"avatar\" [sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef></th>\n        <td mat-cell *matCellDef=\"let row\">\n          <ion-avatar [style.background-color]=\"'white'\">\n            @if (row.currentData.avatar; as avatarUrl) {\n              <ion-img [src]=\"avatarUrl\"></ion-img>\n            } @else {\n              <svg width=\"39\" height=\"39\" [data-jdenticon-value]=\"row.currentData.id\"></svg>\n            }\n          </ion-avatar>\n        </td>\n      </ng-container>\n\n      <!-- lastName  -->\n      <ng-container matColumnDef=\"lastName\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.LAST_NAME</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'lastName'\">\n          @if (row.editing) {\n            <mat-form-field>\n              <input\n                matInput\n                [formControl]=\"row.validator.controls['lastName']\"\n                [placeholder]=\"'USER.LAST_NAME' | translate\"\n                [readonly]=\"!row.editing\"\n                [appAutofocus]=\"row.editing && focusColumn === 'lastName'\"\n              />\n              <mat-error *ngIf=\"row.validator.controls['lastName'].hasError('required')\" translate>\n                ERROR.FIELD_REQUIRED\n              </mat-error>\n              <mat-error *ngIf=\"row.validator.controls['lastName'].hasError('minlength')\">\n                <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: { requiredLength: 2 } }}</span>\n              </mat-error>\n            </mat-form-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'lastName' }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- firstname -->\n      <ng-container matColumnDef=\"firstName\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.FIRST_NAME</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'firstName'\">\n          @if (row.editing) {\n            <mat-form-field>\n              <input\n                matInput\n                [formControl]=\"row.validator.controls['firstName']\"\n                [placeholder]=\"'USER.FIRST_NAME' | translate\"\n                [readonly]=\"!row.editing\"\n                [appAutofocus]=\"row.editing && focusColumn === 'firstName'\"\n              />\n              <mat-error *ngIf=\"row.validator.controls['firstName'].hasError('required')\" translate>\n                ERROR.FIELD_REQUIRED\n              </mat-error>\n              <mat-error *ngIf=\"row.validator.controls['firstName'].hasError('minlength')\">\n                <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: { requiredLength: 2 } }}</span>\n              </mat-error>\n            </mat-form-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'firstName' }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- email  -->\n      <ng-container matColumnDef=\"email\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.EMAIL</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'email'\">\n          @if (row.editing) {\n            <mat-form-field>\n              <input\n                matInput\n                [formControl]=\"row.validator.controls['email']\"\n                [placeholder]=\"'USER.EMAIL' | translate\"\n                [readonly]=\"!row.editing\"\n                [appAutofocus]=\"row.editing && focusColumn === 'email'\"\n              />\n              <mat-error *ngIf=\"row.validator.controls['email'].hasError('required')\" translate>\n                ERROR.FIELD_REQUIRED\n              </mat-error>\n              <mat-error *ngIf=\"row.validator.controls['email'].hasError('email')\">\n                <span translate>ERROR.FIELD_NOT_VALID_EMAIL</span>\n              </mat-error>\n            </mat-form-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'email' }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- additional fields -->\n      @for (definition of additionalFields; track definition.key) {\n        <ng-container [matColumnDef]=\"definition.key\">\n          <th mat-header-cell *matHeaderCellDef>\n            <span>{{ definition.label | translate }}</span>\n          </th>\n          <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = definition.key\">\n            @if (row.editing) {\n              <app-form-field\n                floatLabel=\"never\"\n                [definition]=\"definition\"\n                [formControl]=\"row.validator.controls[definition.key]\"\n                [required]=\"definition.extra?.users?.required\"\n                [autofocus]=\"row.editing && focusColumn === definition.key\"\n              ></app-form-field>\n            }\n            @else {\n              <ion-label appAutoTitle>{{ row.validator | formGetValue: definition.key | displayWith: getDisplayValueFn(definition) }}</ion-label>\n            }\n          </td>\n        </ng-container>\n      }\n\n      <!-- profile column  -->\n      <ng-container matColumnDef=\"profile\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span translate>USER.PROFILE</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'profile'\">\n          @if (row.editing) {\n            <mat-form-field>\n              <mat-select\n                [formControl]=\"row.validator | formGetControl: 'mainProfile'\"\n                [placeholder]=\"'USER.PROFILE' | translate\"\n              >\n                <mat-option *ngFor=\"let item of profiles\" [value]=\"item\">\n                  {{ 'USER.PROFILE_ENUM.' + item | uppercase | translate }}\n                </mat-option>\n              </mat-select>\n              <mat-error *ngIf=\"row.validator.controls['mainProfile'].hasError('required')\" translate>\n                ERROR.FIELD_REQUIRED\n              </mat-error>\n            </mat-form-field>\n          } @else {\n            @let profile = row.validator | formGetValue: 'mainProfile';\n            @if (profile) {\n              <ion-label appAutoTitle>{{ 'USER.PROFILE_ENUM.' + profile | uppercase | translate }}</ion-label>\n            }\n          }\n\n        </td>\n      </ng-container>\n\n      <!-- Status column  -->\n      <ng-container matColumnDef=\"status\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span translate>USER.STATUS</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'status'\">\n          @if (row.editing) {\n            @let control = row.validator | formGetControl: 'statusId';\n            <mat-form-field>\n              <mat-select\n                [formControl]=\"control\"\n                [placeholder]=\"'REFERENTIAL.STATUS' | translate\"\n              >\n                <mat-select-trigger>\n                  <span *ngIf=\"control.value >= 0\">\n                    {{ statusById[control.value]?.label | translate }}\n                  </span>\n                </mat-select-trigger>\n                @for (item of statusList; track item.id) {\n                  <mat-option [value]=\"item.id\">\n                    <mat-icon><ion-icon [name]=\"item.icon\"></ion-icon></mat-icon>\n                    {{ item.label | translate }}\n                  </mat-option>\n                }\n              </mat-select>\n              <mat-error *ngIf=\"control.hasError('required')\" translate>\n                ERROR.FIELD_REQUIRED\n              </mat-error>\n            </mat-form-field>\n          } @else {\n            @let statusId = row.validator | formGetValue: 'statusId';\n            @if (statusId >= 0) {\n              <ion-label appAutoTitle>\n                {{ (statusById | mapGet: statusId)?.label | translate }}\n              </ion-label>\n            }\n          }\n        </td>\n      </ng-container>\n\n      <!-- username -->\n      <ng-container matColumnDef=\"username\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.USERNAME</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'username'\">\n          @if (row.editing) {\n            <mat-form-field>\n              <input\n                matInput\n                [formControl]=\"row.validator.controls.username\"\n                [placeholder]=\"'USER.USERNAME' | translate\"\n                [readonly]=\"!row.editing\"\n                [appAutofocus]=\"row.editing && focusColumn === 'username'\"\n              />\n              <mat-error *ngIf=\"row.validator.controls.username.hasError('required')\" translate>\n                ERROR.FIELD_REQUIRED\n              </mat-error>\n            </mat-form-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'username' }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- username extranet -->\n      <ng-container matColumnDef=\"usernameExtranet\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.USERNAME_EXTRANET</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'usernameExtranet'\">\n          <mat-form-field *ngIf=\"row.editing; else readonlyCell\">\n            <input\n              matInput\n              [formControl]=\"row.validator.controls.usernameExtranet\"\n              [placeholder]=\"'USER.USERNAME_EXTRANET' | translate\"\n              [readonly]=\"!row.editing\"\n              [appAutofocus]=\"row.editing && focusColumn === 'usernameExtranet'\"\n            />\n            <mat-error *ngIf=\"row.validator.controls.usernameExtranet.hasError('required')\" translate>\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n          </mat-form-field>\n          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'usernameExtranet' }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- pubkey  -->\n      <ng-container matColumnDef=\"pubkey\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.PUBKEY</span>\n        </th>\n        <td\n          mat-cell\n          *matCellDef=\"let row\"\n          [title]=\"row.validator.controls.pubkey.valueChanges | async\"\n          (click)=\"focusColumn = 'pubkey'\"\n        >\n          <mat-form-field *ngIf=\"row.editing; else readonlyCell\">\n            <input\n              matInput\n              [formControl]=\"row.validator.controls['pubkey']\"\n              [placeholder]=\"'USER.PUBKEY' | translate\"\n              [readonly]=\"!row.editing\"\n              autocomplete=\"off\"\n            />\n            <mat-error *ngIf=\"row.validator.controls.pubkey.hasError('required')\" translate>\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n            <mat-error *ngIf=\"row.validator.controls.pubkey.hasError('pubkey')\">\n              <span translate>ERROR.FIELD_NOT_VALID_PUBKEY</span>\n            </mat-error>\n          </mat-form-field>\n          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'pubkey' }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Creation date column -->\n      <ng-container matColumnDef=\"creationDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>USER.CREATION_DATE</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-form-field-disabled\">\n          <ion-text class=\"ion-text-end\" color=\"medium\" *ngIf=\"row.id !== -1\">\n            {{ row.currentData.creationDate | dateFormat: { time: true } }}\n          </ion-text>\n        </td>\n      </ng-container>\n\n      <!-- Update date column -->\n      <ng-container matColumnDef=\"updateDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>USER.UPDATE_DATE</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-form-field-disabled\">\n          <ion-text class=\"ion-text-end\" color=\"medium\" *ngIf=\"row.id !== -1\">\n            {{ row.currentData.updateDate | dateFormat: { time: true } }}\n          </ion-text>\n        </td>\n      </ng-container>\n\n      <!-- Actions buttons column -->\n      <app-actions-column\n        [stickyEnd]=\"stickyEnd\"\n        (cancelOrDeleteClick)=\"cancelOrDelete($event.event, $event.row)\"\n        (confirmEditCreateClick)=\"confirmEditCreate($event.event, $event.row)\"\n        (confirmAndAddClick)=\"confirmAndAdd($event.event, $event.row)\"\n        (backward)=\"confirmAndBackward($event.event, $event.row)\"\n        (forward)=\"confirmAndForward($event.event, $event.row)\"\n        [canCancel]=\"false\"\n      >\n        <!-- table options menu -->\n        <button\n          matHeader\n          mat-icon-button\n          [title]=\"'COMMON.BTN_OPTIONS' | translate\"\n          [matMenuTriggerFor]=\"tableOptionsMenu\"\n        >\n          <mat-icon>more_vert</mat-icon>\n        </button>\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr\n        mat-row\n        *matRowDef=\"let row; columns: displayedColumns\"\n        [class.mat-row-error]=\"row.validator.invalid\"\n        [class.mat-row-dirty]=\"row.currentData.dirty\"\n        [class.mat-row-disabled]=\"!row.editing\"\n        [class.mat-mdc-row-selected]=\"row.editing || (!canEdit && selection | isSelected: row)\"\n        (click)=\"clickRow($event, row)\"\n        (keydown.escape)=\"escapeEditingRow($event)\"\n        [cdkTrapFocus]=\"!row.validator?.valid\"\n      ></tr>\n    </table>\n\n    <!-- D\u00E9clencheur invisible pour le mat-menu -->\n\n    @if (loadingSubject | async) {\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    } @else if (totalRowCount === 0) {\n      <ion-item>\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n      </ion-item>\n    }\n  </div>\n</ion-content>\n\n<!-- Table options menu -->\n<mat-menu #tableOptionsMenu=\"matMenu\" xPosition=\"after\">\n  <!-- display columns -->\n  <button mat-menu-item (click)=\"openSelectColumnsModal($event)\">\n    <mat-icon>view_column</mat-icon>\n    <ion-label translate>COMMON.DISPLAYED_COLUMNS_DOTS</ion-label>\n  </button>\n\n  @if (usePageSettings) {\n    <mat-divider></mat-divider>\n\n    <!-- Compact mode -->\n    <button mat-menu-item (click)=\"toggleCompactMode()\">\n      <mat-icon>{{ compact ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n      <ion-label translate>COMMON.BTN_COMPACT_ROWS</ion-label>\n    </button>\n  }\n</mat-menu>\n\n<ion-footer>\n  <mat-paginator *ngIf=\"showPaginator\"\n    [length]=\"totalRowCount\"\n    [pageSize]=\"defaultPageSize\"\n    [pageSizeOptions]=\"defaultPageSizeOptions\"\n    showFirstLastButtons\n  ></mat-paginator>\n\n  <app-form-buttons-bar\n    *ngIf=\"showFormButtons\"\n    (onCancel)=\"cancel($event)\"\n    (onSave)=\"save()\"\n    [disabled]=\"(loadingSubject | async) === true || (dirtySubject | async) !== true\"\n  >\n    <!-- error -->\n    <ion-item *ngIf=\"errorSubject | async; let error\" lines=\"none\">\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-label color=\"danger\" [innerHTML]=\"error | translate\"></ion-label>\n    </ion-item>\n  </app-form-buttons-bar>\n</ion-footer>\n\n<ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" *ngIf=\"mobile\">\n  <ion-fab-button color=\"tertiary\" (click)=\"addRow()\">\n    <ion-icon name=\"add\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n", styles: [".mat-expansion-panel{margin-bottom:5px}.mat-expansion-panel .form-container mat-form-field{width:100%}.mat-expansion-panel mat-action-row ion-label{line-height:36px}ion-content{height:calc(100% - var(--table-offset, 0px))}.table-container{height:100%}.table-container.has-toolbar{--table-toolbar-height: var(--mat-toolbar-height, 64px)}.table-container.has-paginator{--table-paginator-height: var(--app-paginator-height, 34px)}.table-container.has-form-buttons{--form-buttons-height: var(--ion-toolbar-height, 56px)}.mat-mdc-table .mat-column-avatar{--avatar-width: 40px;--avatar-height: 40px;width:calc(var(--avatar-width) + 10px)}.mat-mdc-table .mat-column-avatar ion-avatar{--border-radius: 5px !important;--border-width: 1px !important;--border-color: rgba(var(--ion-color-secondary-rgb), .5) !important;height:var(--avatar-height);max-height:var(--avatar-height);width:var(--avatar-width);max-width:var(--avatar-width);border:solid var(--border-width) var(--border-color);margin:0 2px}.mat-mdc-table .mat-column-avatar ion-avatar svg{max-height:calc(var(--avatar-height) - 1px);max-width:calc(var(--avatar-width) - 1px)}.mat-mdc-table.compact{--mat-row-height: 33px}.mat-mdc-table.compact .mat-column-avatar{--avatar-width: calc(var(--mat-row-height, 33px) - 4px);--avatar-height: calc(var(--mat-row-height, 33px) - 4px)}.mat-mdc-table .mat-column-id{min-width:50px;max-width:120px;padding-right:var(--mat-cell-horizontal-padding, 4px)}.mat-mdc-table .mat-column-lastName,.mat-mdc-table .mat-column-firstName{min-width:80px}.mat-mdc-table .mat-column-email,.mat-mdc-table .mat-column-pubkey,.mat-mdc-table .mat-column-department{min-width:180px}.mat-mdc-table .mat-column-profile{min-width:110px}.mat-mdc-table .mat-column-status,.mat-mdc-table .mat-column-creationDate,.mat-mdc-table .mat-column-updateDate{min-width:130px}\n"], dependencies: [{ kind: "directive", type: i4$3.SvgJdenticonDirective, selector: "svg[data-jdenticon-hash],svg[data-jdenticon-value]", inputs: ["data-jdenticon-hash", "data-jdenticon-value", "width", "height"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonAvatar, selector: "ion-avatar" }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$1.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonImg, selector: "ion-img", inputs: ["alt", "src"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1$7.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$7.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$7.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$7.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$7.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$7.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i8$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i13$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i13$2.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i12.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i12.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i12.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i12.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i6$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i6$3.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i8.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MatChipsField, selector: "mat-chips-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "placeholder", "suggestFn", "required", "mobile", "readonly", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "itemSize", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "chipColor", "debug", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "hideRequiredMarker", "colSizes", "separatorKeysCodes", "appearance", "subscriptSizing", "class", "filter", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keyup.enter"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "directive", type: AutoTitleDirective, selector: "ion-label[appAutoTitle], mat-label[appAutoTitle]", inputs: ["appAutoTitle"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "id", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "component", type: AppFormField, selector: "app-form-field", inputs: ["definition", "readonly", "disabled", "formControl", "formControlName", "placeholder", "compact", "required", "hideRequiredMarker", "floatLabel", "label", "appearance", "subscriptSizing", "tabindex", "autofocus", "clearable", "chipColor", "class", "debug", "panelClass", "panelWidth"], outputs: ["keyup.enter"] }, { kind: "component", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: ["disabled", "disabledCancel", "disabledEscape", "classList", "saveButtonColor", "backText", "cancelText", "nextText", "showBack", "showCancel", "showNext", "showSave"], outputs: ["onCancel", "onSave", "onNext", "onBack", "onSaveAndClose", "onSaveAndNext"] }, { kind: "component", type: ActionsColumnComponent, selector: "app-actions-column", inputs: ["matColumnDef", "style", "stickyEnd", "canCancel", "canConfirm", "canDelete", "canBackward", "canForward", "canConfirmAndAdd", "dirtyIcon", "optionsTitle", "class", "cellTemplateStart", "cellTemplate"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmEditCreateClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "component", type: DebugComponent, selector: "app-debug", inputs: ["titlePrefix", "title", "enable", "expanded"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: NumberFormatPipe, name: "numberFormat" }, { kind: "pipe", type: MapGetPipe, name: "mapGet" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }, { kind: "pipe", type: IsEmptySelectionPipe, name: "isEmptySelection" }, { kind: "pipe", type: DisplayWithPipe, name: "displayWith" }, { kind: "pipe", type: IsAllSelectedPipe, name: "isAllSelected" }, { kind: "pipe", type: IsNotAllSelectedPipe, name: "isNotAllSelected" }], animations: [slideUpDownAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: UsersPage, selector: "app-users-table", inputs: { showUsernameColumn: "showUsernameColumn", showUsernameExtranetColumn: "showUsernameExtranetColumn", showEmailColumn: "showEmailColumn", showPubkeyColumn: "showPubkeyColumn", showCreationDateColumn: "showCreationDateColumn", showUpdateDateColumn: "showUpdateDateColumn", title: "title", canSendMessage: ["canSendMessage", "canSendMessage", booleanAttribute], canEdit: ["canEdit", "canEdit", booleanAttribute], compact: ["compact", "compact", booleanAttribute], usePageSettings: ["usePageSettings", "usePageSettings", booleanAttribute], sticky: ["sticky", "sticky", booleanAttribute], stickyEnd: ["stickyEnd", "stickyEnd", booleanAttribute], canDownload: ["canDownload", "canDownload", booleanAttribute], inModal: ["inModal", "inModal", booleanAttribute], showFooter: ["showFooter", "showFooter", booleanAttribute], showToolbar: ["showToolbar", "showToolbar", booleanAttribute], showPaginator: ["showPaginator", "showPaginator", booleanAttribute] }, providers: [{ provide: ValidatorService, useExisting: PersonValidatorService }], viewQueries: [{ propertyName: "filterExpansionPanel", first: true, predicate: MatExpansionPanel, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar\n  [title]=\"(title || 'USER.LIST.TITLE') | translate\"\n  color=\"primary\"\n  [canGoBack]=\"false\"\n  [class.cdk-visible-hidden]=\"!showToolbar\"\n  [hasValidate]=\"(loadingSubject | async) !== true && (dirtySubject | async) === true\"\n  (onValidate)=\"save()\"\n>\n  <ion-buttons slot=\"end\">\n    <!-- Compose message -->\n    <button\n      mat-icon-button\n      *ngIf=\"canSendMessage\"\n      [title]=\"'USER.LIST.BTN_SEND_MESSAGE' | translate\"\n      (click)=\"openComposeMessageModal($event)\"\n    >\n      <ion-icon name=\"mail\" slot=\"icon-only\"></ion-icon>\n    </button>\n\n    @if (selection | isEmptySelection) {\n      <!-- Add -->\n      <button mat-icon-button *ngIf=\"canEdit && !mobile\" [title]=\"'COMMON.BTN_ADD' | translate\" (click)=\"addRow()\">\n        <mat-icon>add</mat-icon>\n      </button>\n\n      <!-- Refresh -->\n      <button mat-icon-button *ngIf=\"!mobile\" [title]=\"'COMMON.BTN_REFRESH' | translate\" (click)=\"emitRefresh()\">\n        <mat-icon>refresh</mat-icon>\n      </button>\n\n      <!-- reset filter -->\n      <button mat-icon-button (click)=\"resetFilter()\" *ngIf=\"filterCriteriaCount\">\n        <mat-icon color=\"accent\">filter_list_alt</mat-icon>\n        <mat-icon class=\"icon-secondary\" style=\"left: 16px; top: 5px; font-weight: bold\">close</mat-icon>\n      </button>\n\n      <!-- show filter -->\n      <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n        <mat-icon\n          *ngIf=\"filterCriteriaCount; else emptyFilter\"\n          [matBadge]=\"filterCriteriaCount\"\n          matBadgeColor=\"accent\"\n          matBadgeSize=\"small\"\n          matBadgePosition=\"above after\"\n          aria-hidden=\"false\"\n        >\n          filter_list_alt\n        </mat-icon>\n        <ng-template #emptyFilter>\n          <mat-icon>filter_list_alt</mat-icon>\n        </ng-template>\n      </button>\n    } @else {\n      <!-- delete -->\n      <button\n        mat-icon-button\n        class=\"hidden-xs hidden-sm\"\n        [title]=\"'COMMON.BTN_DELETE' | translate\"\n        (click)=\"deleteSelection($event)\"\n      >\n        <mat-icon>delete</mat-icon>\n      </button>\n    }\n\n    @if (!mobile && (canDownload || canDebug)) {\n      <button mat-icon-button [title]=\"'COMMON.BTN_OPTIONS' | translate\" [matMenuTriggerFor]=\"toolbarOptionsMenu\">\n        <mat-icon>more_vert</mat-icon>\n      </button>\n    }\n  </ion-buttons>\n</app-toolbar>\n\n<!-- Toolbar option menu -->\n<mat-menu #toolbarOptionsMenu=\"matMenu\" xPosition=\"after\">\n  <ng-template matMenuContent>\n  <!-- export button -->\n  @if (canDownload) {\n    <button mat-menu-item (click)=\"exportToCsv($event)\">\n      <mat-icon>download</mat-icon>\n      <ion-label translate>FILE.CSV.BTN_DOWNLOAD_HELP</ion-label>\n    </button>\n  }\n\n  <!-- Debug only: Test select users modal -->\n  @if (canDebug) {\n    <mat-divider></mat-divider>\n\n    <button mat-menu-item #menuTrigger=\"matMenuTrigger\" (mouseenter)=\"menuTrigger.openMenu()\" [matMenuTriggerFor]=\"debugMenu\">\n      <mat-icon><ion-icon name=\"bug\"></ion-icon></mat-icon>\n      <ion-label translate>COMMON.DEBUG.BTN_DEBUG_DOTS</ion-label>\n    </button>\n  }\n  </ng-template>\n</mat-menu>\n\n<!-- debug menu -->\n<mat-menu #debugMenu=\"matMenu\">\n  <ng-template matMenuContent>\n\n    <button mat-menu-item (click)=\"devToggleDebug()\">\n      <mat-icon>{{ debug ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n      <ion-label translate>COMMON.DEBUG.BTN_ENABLE_DEBUG</ion-label>\n    </button>\n  </ng-template>\n</mat-menu>\n\n<ion-content class=\"ion-no-padding\">\n  <!-- error -->\n  <ion-item\n    *ngIf=\"errorSubject | async; let error\"\n    lines=\"none\"\n    class=\"hidden-sm hidden-xs hidden-mobile\"\n    @slideUpDownAnimation\n  >\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n  </ion-item>\n\n  <!-- debug -->\n  <app-debug *ngIf=\"debug\">\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row>\n        <ion-col>\n          focusColumn: {{ focusColumn }}\n          <br />\n          loadingSubject: {{ loading }}\n          <br />\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </app-debug>\n\n  <!-- search -->\n  <mat-expansion-panel #filterExpansionPanel class=\"ion-no-padding filter-panel filter-panel-floating\">\n    <form class=\"form-container ion-padding\" [formGroup]=\"filterForm\" (ngSubmit)=\"emitRefresh()\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search -->\n            <mat-form-field>\n              <mat-label>{{ 'USER.LIST.FILTER.SEARCH' | translate }}</mat-label>\n              <input matInput formControlName=\"searchText\" />\n              <button\n                mat-icon-button\n                matSuffix\n                tabindex=\"-1\"\n                type=\"button\"\n                (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\"\n              >\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n\n          <ion-col>\n            <!-- status -->\n            <mat-form-field>\n              <mat-label>{{ 'USER.STATUS' | translate }}</mat-label>\n              <mat-select formControlName=\"statusId\">\n                <mat-option [value]=\"null\">\n                  <i><span translate>COMMON.EMPTY_OPTION</span></i>\n                </mat-option>\n                <mat-option *ngFor=\"let item of statusList\" [value]=\"item.id\">\n                  <ion-icon [name]=\"item.icon\"></ion-icon>\n                  {{ item.label | translate }}\n                </mat-option>\n              </mat-select>\n\n              <button\n                mat-icon-button\n                matSuffix\n                tabindex=\"-1\"\n                type=\"button\"\n                (click)=\"clearControlValue($event, filterForm.controls.statusId)\"\n                [hidden]=\"filterForm.controls.statusId.disabled || !filterForm.controls.statusId.value\"\n              >\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n\n          <ion-col>\n            <!-- user profiles -->\n            <mat-chips-field\n              formControlName=\"userProfiles\"\n              [placeholder]=\"'USER.PROFILES' | translate\"\n              chipColor=\"accent\"\n              [items]=\"userProfileList\"\n              [displayAttributes]=\"['name']\"\n              [clearable]=\"true\">\n            </mat-chips-field>\n          </ion-col>\n        </ion-row>\n\n        <!-- Additional fields filters -->\n        <ion-row *ngIf=\"filterableAdditionalFields && filterableAdditionalFields.length > 0\">\n          <ion-col *ngFor=\"let field of filterableAdditionalFields\" size=\"12\" size-md=\"6\" size-lg=\"4\">\n            <app-form-field\n              [definition]=\"field\"\n              [formControlName]=\"field.key\"\n              [clearable]=\"true\"\n              floatLabel=\"auto\">\n            </app-form-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <mat-action-row>\n      <!-- Counter  -->\n      <ion-label\n        [hidden]=\"(loadingSubject | async) === true || filterForm.dirty\"\n        [color]=\"empty && 'danger'\"\n        class=\"ion-padding\"\n      >\n        {{\n          (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT')\n            | translate\n              : {\n                  count: (totalRowCount | numberFormat),\n                }\n        }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <!-- Close panel -->\n      <ion-button\n        mat-button\n        fill=\"clear\"\n        color=\"dark\"\n        (click)=\"filterExpansionPanel.close()\"\n        [disabled]=\"loadingSubject | async\"\n      >\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button\n        mat-button\n        [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n        [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n        (click)=\"applyFilterAndClosePanel($event)\"\n        [disabled]=\"loadingSubject | async\"\n      >\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <!-- error -->\n  @if (mobile && (errorSubject | async); as error) {\n    <ion-item lines=\"none\">\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n    </ion-item>\n  }\n\n  <div class=\"table-container\" [class.has-toolbar]=\"showToolbar\"\n       [class.has-paginator]=\"showPaginator\" [class.has-form-buttons]=\"showFormButtons\">\n    <table\n      #table\n      mat-table\n      matSort\n      [class.compact]=\"compact\"\n      [dataSource]=\"dataSource\"\n      [matSortActive]=\"defaultSortBy\"\n      [matSortDirection]=\"defaultSortDirection\"\n      matSortDisableClear\n      [trackBy]=\"trackByFn\"\n    >\n      <ng-container matColumnDef=\"select\" [sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!inlineEdition\">\n          <mat-checkbox\n            (change)=\"$event ? masterToggle() : null\"\n            [checked]=\"this | isAllSelected\"\n            [indeterminate]=\"this | isNotAllSelected\"\n          ></mat-checkbox>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!inlineEdition\">\n          <mat-checkbox (click)=\"toggleSelectRow($event, row)\" [checked]=\"selection | isSelected: row\"></mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id Column -->\n      <ng-container matColumnDef=\"id\" [sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label>#</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <ion-label>{{ row.currentData.id }}</ion-label>\n        </td>\n      </ng-container>\n\n      <!-- avatar Column -->\n      <ng-container matColumnDef=\"avatar\" [sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef></th>\n        <td mat-cell *matCellDef=\"let row\">\n          <ion-avatar [style.background-color]=\"'white'\">\n            @if (row.currentData.avatar; as avatarUrl) {\n              <ion-img [src]=\"avatarUrl\"></ion-img>\n            } @else {\n              <svg width=\"39\" height=\"39\" [data-jdenticon-value]=\"row.currentData.id\"></svg>\n            }\n          </ion-avatar>\n        </td>\n      </ng-container>\n\n      <!-- lastName  -->\n      <ng-container matColumnDef=\"lastName\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.LAST_NAME</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'lastName'\">\n          @if (row.editing) {\n            <mat-form-field>\n              <input\n                matInput\n                [formControl]=\"row.validator.controls['lastName']\"\n                [placeholder]=\"'USER.LAST_NAME' | translate\"\n                [readonly]=\"!row.editing\"\n                [appAutofocus]=\"row.editing && focusColumn === 'lastName'\"\n              />\n              <mat-error *ngIf=\"row.validator.controls['lastName'].hasError('required')\" translate>\n                ERROR.FIELD_REQUIRED\n              </mat-error>\n              <mat-error *ngIf=\"row.validator.controls['lastName'].hasError('minlength')\">\n                <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: { requiredLength: 2 } }}</span>\n              </mat-error>\n            </mat-form-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'lastName' }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- firstname -->\n      <ng-container matColumnDef=\"firstName\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.FIRST_NAME</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'firstName'\">\n          @if (row.editing) {\n            <mat-form-field>\n              <input\n                matInput\n                [formControl]=\"row.validator.controls['firstName']\"\n                [placeholder]=\"'USER.FIRST_NAME' | translate\"\n                [readonly]=\"!row.editing\"\n                [appAutofocus]=\"row.editing && focusColumn === 'firstName'\"\n              />\n              <mat-error *ngIf=\"row.validator.controls['firstName'].hasError('required')\" translate>\n                ERROR.FIELD_REQUIRED\n              </mat-error>\n              <mat-error *ngIf=\"row.validator.controls['firstName'].hasError('minlength')\">\n                <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: { requiredLength: 2 } }}</span>\n              </mat-error>\n            </mat-form-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'firstName' }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- email  -->\n      <ng-container matColumnDef=\"email\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.EMAIL</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'email'\">\n          @if (row.editing) {\n            <mat-form-field>\n              <input\n                matInput\n                [formControl]=\"row.validator.controls['email']\"\n                [placeholder]=\"'USER.EMAIL' | translate\"\n                [readonly]=\"!row.editing\"\n                [appAutofocus]=\"row.editing && focusColumn === 'email'\"\n              />\n              <mat-error *ngIf=\"row.validator.controls['email'].hasError('required')\" translate>\n                ERROR.FIELD_REQUIRED\n              </mat-error>\n              <mat-error *ngIf=\"row.validator.controls['email'].hasError('email')\">\n                <span translate>ERROR.FIELD_NOT_VALID_EMAIL</span>\n              </mat-error>\n            </mat-form-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'email' }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- additional fields -->\n      @for (definition of additionalFields; track definition.key) {\n        <ng-container [matColumnDef]=\"definition.key\">\n          <th mat-header-cell *matHeaderCellDef>\n            <span>{{ definition.label | translate }}</span>\n          </th>\n          <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = definition.key\">\n            @if (row.editing) {\n              <app-form-field\n                floatLabel=\"never\"\n                [definition]=\"definition\"\n                [formControl]=\"row.validator.controls[definition.key]\"\n                [required]=\"definition.extra?.users?.required\"\n                [autofocus]=\"row.editing && focusColumn === definition.key\"\n              ></app-form-field>\n            }\n            @else {\n              <ion-label appAutoTitle>{{ row.validator | formGetValue: definition.key | displayWith: getDisplayValueFn(definition) }}</ion-label>\n            }\n          </td>\n        </ng-container>\n      }\n\n      <!-- profile column  -->\n      <ng-container matColumnDef=\"profile\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span translate>USER.PROFILE</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'profile'\">\n          @if (row.editing) {\n            <mat-form-field>\n              <mat-select\n                [formControl]=\"row.validator | formGetControl: 'mainProfile'\"\n                [placeholder]=\"'USER.PROFILE' | translate\"\n              >\n                <mat-option *ngFor=\"let item of profiles\" [value]=\"item\">\n                  {{ 'USER.PROFILE_ENUM.' + item | uppercase | translate }}\n                </mat-option>\n              </mat-select>\n              <mat-error *ngIf=\"row.validator.controls['mainProfile'].hasError('required')\" translate>\n                ERROR.FIELD_REQUIRED\n              </mat-error>\n            </mat-form-field>\n          } @else {\n            @let profile = row.validator | formGetValue: 'mainProfile';\n            @if (profile) {\n              <ion-label appAutoTitle>{{ 'USER.PROFILE_ENUM.' + profile | uppercase | translate }}</ion-label>\n            }\n          }\n\n        </td>\n      </ng-container>\n\n      <!-- Status column  -->\n      <ng-container matColumnDef=\"status\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span translate>USER.STATUS</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'status'\">\n          @if (row.editing) {\n            @let control = row.validator | formGetControl: 'statusId';\n            <mat-form-field>\n              <mat-select\n                [formControl]=\"control\"\n                [placeholder]=\"'REFERENTIAL.STATUS' | translate\"\n              >\n                <mat-select-trigger>\n                  <span *ngIf=\"control.value >= 0\">\n                    {{ statusById[control.value]?.label | translate }}\n                  </span>\n                </mat-select-trigger>\n                @for (item of statusList; track item.id) {\n                  <mat-option [value]=\"item.id\">\n                    <mat-icon><ion-icon [name]=\"item.icon\"></ion-icon></mat-icon>\n                    {{ item.label | translate }}\n                  </mat-option>\n                }\n              </mat-select>\n              <mat-error *ngIf=\"control.hasError('required')\" translate>\n                ERROR.FIELD_REQUIRED\n              </mat-error>\n            </mat-form-field>\n          } @else {\n            @let statusId = row.validator | formGetValue: 'statusId';\n            @if (statusId >= 0) {\n              <ion-label appAutoTitle>\n                {{ (statusById | mapGet: statusId)?.label | translate }}\n              </ion-label>\n            }\n          }\n        </td>\n      </ng-container>\n\n      <!-- username -->\n      <ng-container matColumnDef=\"username\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.USERNAME</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'username'\">\n          @if (row.editing) {\n            <mat-form-field>\n              <input\n                matInput\n                [formControl]=\"row.validator.controls.username\"\n                [placeholder]=\"'USER.USERNAME' | translate\"\n                [readonly]=\"!row.editing\"\n                [appAutofocus]=\"row.editing && focusColumn === 'username'\"\n              />\n              <mat-error *ngIf=\"row.validator.controls.username.hasError('required')\" translate>\n                ERROR.FIELD_REQUIRED\n              </mat-error>\n            </mat-form-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'username' }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- username extranet -->\n      <ng-container matColumnDef=\"usernameExtranet\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.USERNAME_EXTRANET</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'usernameExtranet'\">\n          <mat-form-field *ngIf=\"row.editing; else readonlyCell\">\n            <input\n              matInput\n              [formControl]=\"row.validator.controls.usernameExtranet\"\n              [placeholder]=\"'USER.USERNAME_EXTRANET' | translate\"\n              [readonly]=\"!row.editing\"\n              [appAutofocus]=\"row.editing && focusColumn === 'usernameExtranet'\"\n            />\n            <mat-error *ngIf=\"row.validator.controls.usernameExtranet.hasError('required')\" translate>\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n          </mat-form-field>\n          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'usernameExtranet' }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- pubkey  -->\n      <ng-container matColumnDef=\"pubkey\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.PUBKEY</span>\n        </th>\n        <td\n          mat-cell\n          *matCellDef=\"let row\"\n          [title]=\"row.validator.controls.pubkey.valueChanges | async\"\n          (click)=\"focusColumn = 'pubkey'\"\n        >\n          <mat-form-field *ngIf=\"row.editing; else readonlyCell\">\n            <input\n              matInput\n              [formControl]=\"row.validator.controls['pubkey']\"\n              [placeholder]=\"'USER.PUBKEY' | translate\"\n              [readonly]=\"!row.editing\"\n              autocomplete=\"off\"\n            />\n            <mat-error *ngIf=\"row.validator.controls.pubkey.hasError('required')\" translate>\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n            <mat-error *ngIf=\"row.validator.controls.pubkey.hasError('pubkey')\">\n              <span translate>ERROR.FIELD_NOT_VALID_PUBKEY</span>\n            </mat-error>\n          </mat-form-field>\n          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'pubkey' }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Creation date column -->\n      <ng-container matColumnDef=\"creationDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>USER.CREATION_DATE</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-form-field-disabled\">\n          <ion-text class=\"ion-text-end\" color=\"medium\" *ngIf=\"row.id !== -1\">\n            {{ row.currentData.creationDate | dateFormat: { time: true } }}\n          </ion-text>\n        </td>\n      </ng-container>\n\n      <!-- Update date column -->\n      <ng-container matColumnDef=\"updateDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>USER.UPDATE_DATE</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-form-field-disabled\">\n          <ion-text class=\"ion-text-end\" color=\"medium\" *ngIf=\"row.id !== -1\">\n            {{ row.currentData.updateDate | dateFormat: { time: true } }}\n          </ion-text>\n        </td>\n      </ng-container>\n\n      <!-- Actions buttons column -->\n      <app-actions-column\n        [stickyEnd]=\"stickyEnd\"\n        (cancelOrDeleteClick)=\"cancelOrDelete($event.event, $event.row)\"\n        (confirmEditCreateClick)=\"confirmEditCreate($event.event, $event.row)\"\n        (confirmAndAddClick)=\"confirmAndAdd($event.event, $event.row)\"\n        (backward)=\"confirmAndBackward($event.event, $event.row)\"\n        (forward)=\"confirmAndForward($event.event, $event.row)\"\n        [canCancel]=\"false\"\n      >\n        <!-- table options menu -->\n        <button\n          matHeader\n          mat-icon-button\n          [title]=\"'COMMON.BTN_OPTIONS' | translate\"\n          [matMenuTriggerFor]=\"tableOptionsMenu\"\n        >\n          <mat-icon>more_vert</mat-icon>\n        </button>\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr\n        mat-row\n        *matRowDef=\"let row; columns: displayedColumns\"\n        [class.mat-row-error]=\"row.validator.invalid\"\n        [class.mat-row-dirty]=\"row.currentData.dirty\"\n        [class.mat-row-disabled]=\"!row.editing\"\n        [class.mat-mdc-row-selected]=\"row.editing || (!canEdit && selection | isSelected: row)\"\n        (click)=\"clickRow($event, row)\"\n        (keydown.escape)=\"escapeEditingRow($event)\"\n        [cdkTrapFocus]=\"!row.validator?.valid\"\n      ></tr>\n    </table>\n\n    <!-- D\u00E9clencheur invisible pour le mat-menu -->\n\n    @if (loadingSubject | async) {\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    } @else if (totalRowCount === 0) {\n      <ion-item>\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n      </ion-item>\n    }\n  </div>\n</ion-content>\n\n<!-- Table options menu -->\n<mat-menu #tableOptionsMenu=\"matMenu\" xPosition=\"after\">\n  <!-- display columns -->\n  <button mat-menu-item (click)=\"openSelectColumnsModal($event)\">\n    <mat-icon>view_column</mat-icon>\n    <ion-label translate>COMMON.DISPLAYED_COLUMNS_DOTS</ion-label>\n  </button>\n\n  @if (usePageSettings) {\n    <mat-divider></mat-divider>\n\n    <!-- Compact mode -->\n    <button mat-menu-item (click)=\"toggleCompactMode()\">\n      <mat-icon>{{ compact ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n      <ion-label translate>COMMON.BTN_COMPACT_ROWS</ion-label>\n    </button>\n  }\n</mat-menu>\n\n<ion-footer>\n  <mat-paginator *ngIf=\"showPaginator\"\n    [length]=\"totalRowCount\"\n    [pageSize]=\"defaultPageSize\"\n    [pageSizeOptions]=\"defaultPageSizeOptions\"\n    showFirstLastButtons\n  ></mat-paginator>\n\n  <app-form-buttons-bar\n    *ngIf=\"showFormButtons\"\n    (onCancel)=\"cancel($event)\"\n    (onSave)=\"save()\"\n    [disabled]=\"(loadingSubject | async) === true || (dirtySubject | async) !== true\"\n  >\n    <!-- error -->\n    <ion-item *ngIf=\"errorSubject | async; let error\" lines=\"none\">\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-label color=\"danger\" [innerHTML]=\"error | translate\"></ion-label>\n    </ion-item>\n  </app-form-buttons-bar>\n</ion-footer>\n\n<ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" *ngIf=\"mobile\">\n  <ion-fab-button color=\"tertiary\" (click)=\"addRow()\">\n    <ion-icon name=\"add\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n", styles: [".mat-expansion-panel{margin-bottom:5px}.mat-expansion-panel .form-container mat-form-field{width:100%}.mat-expansion-panel mat-action-row ion-label{line-height:36px}ion-content{height:calc(100% - var(--table-offset, 0px))}.table-container{height:100%}.table-container.has-toolbar{--table-toolbar-height: var(--mat-toolbar-height, 64px)}.table-container.has-paginator{--table-paginator-height: var(--app-paginator-height, 34px)}.table-container.has-form-buttons{--form-buttons-height: var(--ion-toolbar-height, 56px)}.mat-mdc-table .mat-column-avatar{--avatar-width: 40px;--avatar-height: 40px;width:calc(var(--avatar-width) + 10px)}.mat-mdc-table .mat-column-avatar ion-avatar{--border-radius: 5px !important;--border-width: 1px !important;--border-color: rgba(var(--ion-color-secondary-rgb), .5) !important;height:var(--avatar-height);max-height:var(--avatar-height);width:var(--avatar-width);max-width:var(--avatar-width);border:solid var(--border-width) var(--border-color);margin:0 2px}.mat-mdc-table .mat-column-avatar ion-avatar svg{max-height:calc(var(--avatar-height) - 1px);max-width:calc(var(--avatar-width) - 1px)}.mat-mdc-table.compact{--mat-row-height: 33px}.mat-mdc-table.compact .mat-column-avatar{--avatar-width: calc(var(--mat-row-height, 33px) - 4px);--avatar-height: calc(var(--mat-row-height, 33px) - 4px)}.mat-mdc-table .mat-column-id{min-width:50px;max-width:120px;padding-right:var(--mat-cell-horizontal-padding, 4px)}.mat-mdc-table .mat-column-lastName,.mat-mdc-table .mat-column-firstName{min-width:80px}.mat-mdc-table .mat-column-email,.mat-mdc-table .mat-column-pubkey,.mat-mdc-table .mat-column-department{min-width:180px}.mat-mdc-table .mat-column-profile{min-width:110px}.mat-mdc-table .mat-column-status,.mat-mdc-table .mat-column-creationDate,.mat-mdc-table .mat-column-updateDate{min-width:130px}\n"], dependencies: [{ kind: "directive", type: i4$3.SvgJdenticonDirective, selector: "svg[data-jdenticon-hash],svg[data-jdenticon-value]", inputs: ["data-jdenticon-hash", "data-jdenticon-value", "width", "height"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonAvatar, selector: "ion-avatar" }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$1.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonImg, selector: "ion-img", inputs: ["alt", "src"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1$7.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$7.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$7.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$7.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$7.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$7.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i8$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9$3.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i13$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i13$2.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i12.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i12.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i12.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i12.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i6$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i6$3.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i9.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MatChipsField, selector: "mat-chips-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "placeholder", "suggestFn", "required", "mobile", "readonly", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "itemSize", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "chipColor", "debug", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "hideRequiredMarker", "colSizes", "separatorKeysCodes", "appearance", "subscriptSizing", "class", "filter", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keyup.enter"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "directive", type: AutoTitleDirective, selector: "ion-label[appAutoTitle], mat-label[appAutoTitle]", inputs: ["appAutoTitle"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "id", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "component", type: AppFormField, selector: "app-form-field", inputs: ["definition", "readonly", "disabled", "formControl", "formControlName", "placeholder", "compact", "required", "hideRequiredMarker", "floatLabel", "label", "appearance", "subscriptSizing", "tabindex", "autofocus", "clearable", "chipColor", "class", "debug", "panelClass", "panelWidth"], outputs: ["keyup.enter"] }, { kind: "component", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: ["disabled", "disabledCancel", "disabledEscape", "classList", "saveButtonColor", "backText", "cancelText", "nextText", "showBack", "showCancel", "showNext", "showSave"], outputs: ["onCancel", "onSave", "onNext", "onBack", "onSaveAndClose", "onSaveAndNext"] }, { kind: "component", type: ActionsColumnComponent, selector: "app-actions-column", inputs: ["matColumnDef", "style", "stickyEnd", "canCancel", "canConfirm", "canDelete", "canBackward", "canForward", "canConfirmAndAdd", "dirtyIcon", "optionsTitle", "class", "cellTemplateStart", "cellTemplate"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmEditCreateClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "component", type: DebugComponent, selector: "app-debug", inputs: ["titlePrefix", "title", "enable", "expanded"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: NumberFormatPipe, name: "numberFormat" }, { kind: "pipe", type: MapGetPipe, name: "mapGet" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }, { kind: "pipe", type: IsEmptySelectionPipe, name: "isEmptySelection" }, { kind: "pipe", type: DisplayWithPipe, name: "displayWith" }, { kind: "pipe", type: IsAllSelectedPipe, name: "isAllSelected" }, { kind: "pipe", type: IsNotAllSelectedPipe, name: "isNotAllSelected" }], animations: [slideUpDownAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UsersPage, decorators: [{
             type: Component,
@@ -47156,7 +47183,7 @@ class DateTimeTestPage {
     }
     stringify = JSON.stringify;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateTimeTestPage, deps: [{ token: i2$1.Platform }, { token: i1$3.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DateTimeTestPage, selector: "app-data-time-test", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Date/Time field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'memory'\" (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container ion-padding\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    <!-- debugging something -->\n    @if (mode === 'temp') {\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Required, but allow no time</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-label>\n        <small>\n          <pre>\nValue: {{ stringify(form.controls.noTime.value) }}\nErrors: {{ stringify(form.controls.noTime.errors) }}\nFocus: {{ hasFocus }}\n          </pre>\n        </small>\n      </ion-label>\n      <mat-date-time-field #tempField\n        formControlName=\"noTime\"\n        placeholder=\"Date/Time\"\n        [mobile]=\"false\"\n        [clearable]=\"true\"\n        [required]=\"true\"\n        [debug]=\"true\"\n        (focus)=\"hasFocus=true\"\n        (blur)=\"hasFocus=false\"\n      >\n        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n      </mat-date-time-field>\n\n      <ion-button (click)=\"tempField.focus()\">Focus</ion-button>\n    }\n\n    <!-- debugging memory leak -->\n    @if (mode === 'memory') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Debug memory leak</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col size=\"auto\">\n            @if (!memoryTimer) {\n              <ion-button (click)=\"startMemoryTimer()\">Start timer</ion-button>\n            }\n            @if (memoryTimer) {\n              <ion-button (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n            }\n          </ion-col>\n          <ion-col size=\"4\">\n            <mat-form-field floatLabel=\"auto\">\n              <input matInput type=\"text\" hidden />\n              <mat-checkbox (change)=\"memoryMobile = $event.checked\" [checked]=\"memoryMobile\">Mobile ?</mat-checkbox>\n            </mat-form-field>\n          </ion-col>\n          <ion-col>\n            @if (!memoryHide) {\n              <mat-date-time-field\n                formControlName=\"emptyRequired\"\n                placeholder=\"Date/Time\"\n                [required]=\"true\"\n                [mobile]=\"memoryMobile\"\n                [clearable]=\"true\"\n              >\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            }\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Mobile mode -->\n    @if (mode === 'mobile') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <mat-checkbox (change)=\"toggleAppearance($event)\">Change apparence</mat-checkbox>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.empty.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"empty\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [appearance]=\"appearance\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Empty value + required -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value + required</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [appearance]=\"appearance\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.enable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"enable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [appearance]=\"appearance\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.disable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"disable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [appearance]=\"appearance\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Readonly  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"mobileReadonlyField.readonly = $event.checked\"\n                        [checked]=\"mobileReadonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showReadonlyHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        #mobileReadonlyField\n                        formControlName=\"readonly\"\n                        placeholder=\"Date/Time\"\n                        [readonly]=\"true\"\n                        [mobile]=\"true\"\n                        [clearable]=\"true\"\n                        [appearance]=\"appearance\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showReadonlyHint.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <!-- Date diff -->\n        <ion-row>\n          <ion-col>\n            <ion-text><h5>Date diff</h5></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Start date time</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.startDateTime.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"startDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [required]=\"true\"\n                  [appearance]=\"appearance\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">End date time</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.endDateTime.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"endDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [required]=\"true\"\n                  [appearance]=\"appearance\"\n                  [subscriptSizing]=\"'fixed'\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                  <!-- duration -->\n                  @if (form.controls.startDateTime.valid && form.controls.endDateTime.value; as value) {\n                    <mat-hint align=\"end\">\n                      <span translate>COMMON.DURATION_DOTS</span>\n                      &nbsp;{{\n                        {\n                          startValue: form.controls.startDateTime.value,\n                          endValue: value,\n                        } | dateDiffDuration\n                      }}\n                    </mat-hint>\n                  }\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Hint -->\n          <ion-col size=\"12\" size-md=\"6\" size-lg=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #hintAlignEnd [checked]=\"false\" [disabled]=\"!showHint.checked\">\n                        Align end ?\n                      </mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        formControlName=\"hint\"\n                        placeholder=\"Date/Time\"\n                        [mobile]=\"true\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showHint.checked && !hintAlignEnd.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        } @else if (showHint.checked && hintAlignEnd.checked) {\n                          <mat-hint align=\"end\">End hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Compact mode -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Compact mode (for table)</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"empty\"\n                  floatLabel=\"never\"\n                  [mobile]=\"false\"\n                  [compact]=\"true\"\n                ></mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <!-- debug console -->\n        <ion-row>\n          <!-- buttons -->\n          <ion-col size=\"2\">\n            <!-- submit form -->\n            <ion-button (click)=\"doSubmit($event)\" fill=\"outline\">\n              <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n            <!-- clear log  -->\n            <ion-button (click)=\"clearLogPanel()\" fill=\"outline\">\n              <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n          </ion-col>\n          @if (showLogPanel) {\n            <ion-col size=\"10\">\n              <ion-text color=\"primary\">\n                Log:\n                <br />\n              </ion-text>\n              <div class=\"ion-padding-start\">\n                <ion-text color=\"medium\">\n                  <small [innerHTML]=\"logContent\"></small>\n                </ion-text>\n              </div>\n            </ion-col>\n          }\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Desktop mode -->\n    @if (mode === 'desktop') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Desktop mode</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.empty.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"empty\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Empty required value -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value + required</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.enable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"enable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.disable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"disable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- NoTime  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value (No time)</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{\n                        stringify(form.controls.noTime.value) +\n                          ' noTime:' +\n                          (form.controls.noTime.value && form.controls.noTime.value[noTimeProperty])\n                      }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"noTime\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Readonly  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"desktopReadonlyField.readonly = $event.checked\"\n                        [checked]=\"desktopReadonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showDesktopReadonlyHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        #desktopReadonlyField\n                        formControlName=\"readonly\"\n                        placeholder=\"Date/Time\"\n                        [readonly]=\"true\"\n                        [mobile]=\"false\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showDesktopReadonlyHint.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <!-- Date diff -->\n        <ion-row>\n          <ion-col>\n            <ion-text><h5>Date diff</h5></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Start date time</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.startDateTime.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"startDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"false\"\n                  [required]=\"true\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">End date time</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.endDateTime.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"endDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                  [required]=\"true\"\n                  [subscriptSizing]=\"'fixed'\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                  <!-- duration -->\n                  @if (form.controls.startDateTime.valid && form.controls.endDateTime.value; as value) {\n                    <mat-hint align=\"end\">\n                      <span translate>COMMON.DURATION_DOTS</span>\n                      &nbsp;{{\n                        {\n                          startValue: form.controls.startDateTime.value,\n                          endValue: value,\n                        } | dateDiffDuration\n                      }}\n                    </mat-hint>\n                  }\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Hint -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showDesktopHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #desktopHintAlignEnd [checked]=\"false\" [disabled]=\"!showDesktopHint.checked\">\n                        Align end ?\n                      </mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        formControlName=\"hint\"\n                        placeholder=\"Date/Time\"\n                        [mobile]=\"false\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showDesktopHint.checked && !desktopHintAlignEnd.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        } @else if (showDesktopHint.checked && desktopHintAlignEnd.checked) {\n                          <mat-hint align=\"end\">End hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Compact mode -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Compact mode (for table)</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"empty\"\n                  floatLabel=\"never\"\n                  [mobile]=\"false\"\n                  [compact]=\"true\"\n                ></mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n  </form>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: MatDateTime, selector: "mat-date-time-field", inputs: ["logPrefix", "placeholder", "floatLabel", "mobile", "compact", "autofocus", "clearable", "startDate", "datePickerFilter", "allowNoTime", "dottedMinutesInGap", "timeHoursOnly", "debug", "appearance", "subscriptSizing", "formControl", "formControlName", "required", "readonly", "tabindex"], outputs: ["focus", "blur", "keydown.escape", "keyup.enter"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: DateDiffDurationPipe, name: "dateDiffDuration" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DateTimeTestPage, selector: "app-data-time-test", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Date/Time field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'memory'\" (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container ion-padding\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    <!-- debugging something -->\n    @if (mode === 'temp') {\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Required, but allow no time</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-label>\n        <small>\n          <pre>\nValue: {{ stringify(form.controls.noTime.value) }}\nErrors: {{ stringify(form.controls.noTime.errors) }}\nFocus: {{ hasFocus }}\n          </pre>\n        </small>\n      </ion-label>\n      <mat-date-time-field #tempField\n        formControlName=\"noTime\"\n        placeholder=\"Date/Time\"\n        [mobile]=\"false\"\n        [clearable]=\"true\"\n        [required]=\"true\"\n        [debug]=\"true\"\n        (focus)=\"hasFocus=true\"\n        (blur)=\"hasFocus=false\"\n      >\n        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n      </mat-date-time-field>\n\n      <ion-button (click)=\"tempField.focus()\">Focus</ion-button>\n    }\n\n    <!-- debugging memory leak -->\n    @if (mode === 'memory') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Debug memory leak</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col size=\"auto\">\n            @if (!memoryTimer) {\n              <ion-button (click)=\"startMemoryTimer()\">Start timer</ion-button>\n            }\n            @if (memoryTimer) {\n              <ion-button (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n            }\n          </ion-col>\n          <ion-col size=\"4\">\n            <mat-form-field floatLabel=\"auto\">\n              <input matInput type=\"text\" hidden />\n              <mat-checkbox (change)=\"memoryMobile = $event.checked\" [checked]=\"memoryMobile\">Mobile ?</mat-checkbox>\n            </mat-form-field>\n          </ion-col>\n          <ion-col>\n            @if (!memoryHide) {\n              <mat-date-time-field\n                formControlName=\"emptyRequired\"\n                placeholder=\"Date/Time\"\n                [required]=\"true\"\n                [mobile]=\"memoryMobile\"\n                [clearable]=\"true\"\n              >\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            }\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Mobile mode -->\n    @if (mode === 'mobile') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <mat-checkbox (change)=\"toggleAppearance($event)\">Change apparence</mat-checkbox>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.empty.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"empty\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [appearance]=\"appearance\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Empty value + required -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value + required</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [appearance]=\"appearance\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.enable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"enable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [appearance]=\"appearance\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.disable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"disable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [appearance]=\"appearance\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Readonly  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"mobileReadonlyField.readonly = $event.checked\"\n                        [checked]=\"mobileReadonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showReadonlyHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        #mobileReadonlyField\n                        formControlName=\"readonly\"\n                        placeholder=\"Date/Time\"\n                        [readonly]=\"true\"\n                        [mobile]=\"true\"\n                        [clearable]=\"true\"\n                        [appearance]=\"appearance\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showReadonlyHint.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <!-- Date diff -->\n        <ion-row>\n          <ion-col>\n            <ion-text><h5>Date diff</h5></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Start date time</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.startDateTime.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"startDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [required]=\"true\"\n                  [appearance]=\"appearance\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">End date time</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.endDateTime.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"endDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [required]=\"true\"\n                  [appearance]=\"appearance\"\n                  [subscriptSizing]=\"'fixed'\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                  <!-- duration -->\n                  @if (form.controls.startDateTime.valid && form.controls.endDateTime.value; as value) {\n                    <mat-hint align=\"end\">\n                      <span translate>COMMON.DURATION_DOTS</span>\n                      &nbsp;{{\n                        {\n                          startValue: form.controls.startDateTime.value,\n                          endValue: value,\n                        } | dateDiffDuration\n                      }}\n                    </mat-hint>\n                  }\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Hint -->\n          <ion-col size=\"12\" size-md=\"6\" size-lg=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #hintAlignEnd [checked]=\"false\" [disabled]=\"!showHint.checked\">\n                        Align end ?\n                      </mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        formControlName=\"hint\"\n                        placeholder=\"Date/Time\"\n                        [mobile]=\"true\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showHint.checked && !hintAlignEnd.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        } @else if (showHint.checked && hintAlignEnd.checked) {\n                          <mat-hint align=\"end\">End hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Compact mode -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Compact mode (for table)</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"empty\"\n                  floatLabel=\"never\"\n                  [mobile]=\"false\"\n                  [compact]=\"true\"\n                ></mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <!-- debug console -->\n        <ion-row>\n          <!-- buttons -->\n          <ion-col size=\"2\">\n            <!-- submit form -->\n            <ion-button (click)=\"doSubmit($event)\" fill=\"outline\">\n              <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n            <!-- clear log  -->\n            <ion-button (click)=\"clearLogPanel()\" fill=\"outline\">\n              <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n          </ion-col>\n          @if (showLogPanel) {\n            <ion-col size=\"10\">\n              <ion-text color=\"primary\">\n                Log:\n                <br />\n              </ion-text>\n              <div class=\"ion-padding-start\">\n                <ion-text color=\"medium\">\n                  <small [innerHTML]=\"logContent\"></small>\n                </ion-text>\n              </div>\n            </ion-col>\n          }\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Desktop mode -->\n    @if (mode === 'desktop') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Desktop mode</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.empty.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"empty\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Empty required value -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value + required</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.enable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"enable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.disable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"disable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- NoTime  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value (No time)</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{\n                        stringify(form.controls.noTime.value) +\n                          ' noTime:' +\n                          (form.controls.noTime.value && form.controls.noTime.value[noTimeProperty])\n                      }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"noTime\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Readonly  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"desktopReadonlyField.readonly = $event.checked\"\n                        [checked]=\"desktopReadonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showDesktopReadonlyHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        #desktopReadonlyField\n                        formControlName=\"readonly\"\n                        placeholder=\"Date/Time\"\n                        [readonly]=\"true\"\n                        [mobile]=\"false\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showDesktopReadonlyHint.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <!-- Date diff -->\n        <ion-row>\n          <ion-col>\n            <ion-text><h5>Date diff</h5></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Start date time</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.startDateTime.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"startDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"false\"\n                  [required]=\"true\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">End date time</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.endDateTime.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"endDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                  [required]=\"true\"\n                  [subscriptSizing]=\"'fixed'\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                  <!-- duration -->\n                  @if (form.controls.startDateTime.valid && form.controls.endDateTime.value; as value) {\n                    <mat-hint align=\"end\">\n                      <span translate>COMMON.DURATION_DOTS</span>\n                      &nbsp;{{\n                        {\n                          startValue: form.controls.startDateTime.value,\n                          endValue: value,\n                        } | dateDiffDuration\n                      }}\n                    </mat-hint>\n                  }\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Hint -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showDesktopHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #desktopHintAlignEnd [checked]=\"false\" [disabled]=\"!showDesktopHint.checked\">\n                        Align end ?\n                      </mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        formControlName=\"hint\"\n                        placeholder=\"Date/Time\"\n                        [mobile]=\"false\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showDesktopHint.checked && !desktopHintAlignEnd.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        } @else if (showDesktopHint.checked && desktopHintAlignEnd.checked) {\n                          <mat-hint align=\"end\">End hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Compact mode -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Compact mode (for table)</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"empty\"\n                  floatLabel=\"never\"\n                  [mobile]=\"false\"\n                  [compact]=\"true\"\n                ></mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n  </form>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i8.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i8.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: MatDateTime, selector: "mat-date-time-field", inputs: ["logPrefix", "placeholder", "floatLabel", "mobile", "compact", "autofocus", "clearable", "startDate", "datePickerFilter", "allowNoTime", "dottedMinutesInGap", "timeHoursOnly", "debug", "appearance", "subscriptSizing", "formControl", "formControlName", "required", "readonly", "tabindex"], outputs: ["focus", "blur", "keydown.escape", "keyup.enter"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: DateDiffDurationPipe, name: "dateDiffDuration" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateTimeTestPage, decorators: [{
             type: Component,
@@ -47265,7 +47292,7 @@ class DateTestPage {
     }
     stringify = JSON.stringify;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateTestPage, deps: [{ token: i1$3.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DateTestPage, selector: "app-data-test", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Date field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'memory'\" (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    <!-- debugging memory leak -->\n    @if (mode === 'memory') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Debug memory leak</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col size=\"auto\">\n            @if (!memoryTimer) {\n              <ion-button (click)=\"startMemoryTimer()\">Start timer</ion-button>\n            }\n            @if (memoryTimer) {\n              <ion-button (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n            }\n          </ion-col>\n          <ion-col size=\"4\">\n            <mat-form-field floatLabel=\"auto\">\n              <input matInput type=\"text\" hidden />\n              <mat-checkbox (change)=\"memoryMobile = $event.checked\" [checked]=\"memoryMobile\">Mobile ?</mat-checkbox>\n            </mat-form-field>\n          </ion-col>\n          <ion-col>\n            @if (!memoryHide) {\n              <mat-date-field\n                formControlName=\"empty\"\n                placeholder=\"Date\"\n                [required]=\"true\"\n                [mobile]=\"memoryMobile\"\n                [clearable]=\"true\"\n              >\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-field>\n            }\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Mobile mode -->\n    @if (mode === 'mobile') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Mobile mode</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.empty.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-field formControlName=\"empty\" placeholder=\"Date\" [mobile]=\"true\" [clearable]=\"true\">\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value (required)</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-field\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.enable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-field\n                  formControlName=\"enable\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.disable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-field formControlName=\"disable\" placeholder=\"Date\" [required]=\"true\" [mobile]=\"true\">\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- TimeZone  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">TimeZone</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>timezone=\"{{ timezone }}\" value=\"{{ stringify(form.controls.timezone.value) }}\"</pre>\n                    </small>\n                    <pre>Should display using the browser TZ,<br/>but serialize/deserialize for the given TZ</pre>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-field\n                  formControlName=\"timezone\"\n                  placeholder=\"Date\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [timezone]=\"timezone\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Readonly  -->\n          <ion-col size=\"12\" size-lg=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"mobileReadonlyField.readonly = $event.checked\"\n                        [checked]=\"mobileReadonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showReadonlyHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showReadonlyIcons [checked]=\"true\">Icons ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-field\n                        #mobileReadonlyField\n                        formControlName=\"readonly\"\n                        placeholder=\"Date\"\n                        [readonly]=\"true\"\n                        [mobile]=\"true\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showReadonlyIcons.checked) {\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showReadonlyHint.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-date-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Hint -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHintEnd [checked]=\"false\">Align end ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-field formControlName=\"hint\" placeholder=\"Date\" [mobile]=\"true\" [clearable]=\"true\">\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (!showHintEnd.checked) {\n                          <mat-hint>Start hint</mat-hint>\n                        } @else {\n                          <mat-hint align=\"end\">End hint</mat-hint>\n                        }\n                      </mat-date-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <!-- debug console -->\n        <ion-row>\n          <!-- buttons -->\n          <ion-col size=\"2\">\n            <!-- submit form -->\n            <ion-button (click)=\"doSubmit($event)\" fill=\"outline\">\n              <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n            <!-- clear log  -->\n            <ion-button (click)=\"clearLogPanel()\" fill=\"outline\">\n              <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n          </ion-col>\n          @if (showLogPanel) {\n            <ion-col size=\"10\">\n              <ion-text color=\"primary\">\n                Log:\n                <br />\n              </ion-text>\n              <div class=\"ion-padding-start\">\n                <ion-text color=\"medium\">\n                  <small [innerHTML]=\"logContent\"></small>\n                </ion-text>\n              </div>\n            </ion-col>\n          }\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Desktop mode -->\n    @if (mode === 'desktop') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Desktop mode</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.empty.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-field formControlName=\"empty\" placeholder=\"Date\" [mobile]=\"false\" [clearable]=\"true\">\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value (required)</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-field\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.enable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-field\n                  formControlName=\"enable\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.disable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-field formControlName=\"disable\" placeholder=\"Date\" [required]=\"true\" [mobile]=\"false\">\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- TimeZone  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">TimeZone</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>timezone=\"{{ timezone }}\" value={{ stringify(form.controls.timezone.value) }}</pre>\n                    </small>\n                    <pre>Should display using the browser TZ,<br/>but serialize/deserialize for the given TZ</pre>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-field\n                  formControlName=\"timezone\"\n                  placeholder=\"Date\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                  [timezone]=\"timezone\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Readonly  -->\n          <ion-col size=\"12\" size-lg=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"desktopReadonlyField.readonly = $event.checked\"\n                        [checked]=\"desktopReadonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showDesktopHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-field\n                        #desktopReadonlyField\n                        formControlName=\"readonly\"\n                        placeholder=\"Date\"\n                        [readonly]=\"true\"\n                        [mobile]=\"false\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showDesktopHint.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-date-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Hint -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showDesktopHintEnd [checked]=\"false\">Align end ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-field formControlName=\"hint\" placeholder=\"Date\" [mobile]=\"false\" [clearable]=\"true\">\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (!showDesktopHintEnd.checked) {\n                          <mat-hint>Start hint</mat-hint>\n                        } @else {\n                          <mat-hint align=\"end\">End hint</mat-hint>\n                        }\n                      </mat-date-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n  </form>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: MatDate, selector: "mat-date-field", inputs: ["formControl", "formControlName", "placeholder", "floatLabel", "mobile", "compact", "autofocus", "clearable", "required", "startDate", "timezone", "datePickerFilter", "appearance", "subscriptSizing", "readonly", "tabindex"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DateTestPage, selector: "app-data-test", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Date field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'memory'\" (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    <!-- debugging memory leak -->\n    @if (mode === 'memory') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Debug memory leak</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col size=\"auto\">\n            @if (!memoryTimer) {\n              <ion-button (click)=\"startMemoryTimer()\">Start timer</ion-button>\n            }\n            @if (memoryTimer) {\n              <ion-button (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n            }\n          </ion-col>\n          <ion-col size=\"4\">\n            <mat-form-field floatLabel=\"auto\">\n              <input matInput type=\"text\" hidden />\n              <mat-checkbox (change)=\"memoryMobile = $event.checked\" [checked]=\"memoryMobile\">Mobile ?</mat-checkbox>\n            </mat-form-field>\n          </ion-col>\n          <ion-col>\n            @if (!memoryHide) {\n              <mat-date-field\n                formControlName=\"empty\"\n                placeholder=\"Date\"\n                [required]=\"true\"\n                [mobile]=\"memoryMobile\"\n                [clearable]=\"true\"\n              >\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-field>\n            }\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Mobile mode -->\n    @if (mode === 'mobile') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Mobile mode</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.empty.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-field formControlName=\"empty\" placeholder=\"Date\" [mobile]=\"true\" [clearable]=\"true\">\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value (required)</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-field\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.enable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-field\n                  formControlName=\"enable\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.disable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-field formControlName=\"disable\" placeholder=\"Date\" [required]=\"true\" [mobile]=\"true\">\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- TimeZone  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">TimeZone</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>timezone=\"{{ timezone }}\" value=\"{{ stringify(form.controls.timezone.value) }}\"</pre>\n                    </small>\n                    <pre>Should display using the browser TZ,<br/>but serialize/deserialize for the given TZ</pre>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-field\n                  formControlName=\"timezone\"\n                  placeholder=\"Date\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [timezone]=\"timezone\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Readonly  -->\n          <ion-col size=\"12\" size-lg=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"mobileReadonlyField.readonly = $event.checked\"\n                        [checked]=\"mobileReadonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showReadonlyHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showReadonlyIcons [checked]=\"true\">Icons ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-field\n                        #mobileReadonlyField\n                        formControlName=\"readonly\"\n                        placeholder=\"Date\"\n                        [readonly]=\"true\"\n                        [mobile]=\"true\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showReadonlyIcons.checked) {\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showReadonlyHint.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-date-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Hint -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHintEnd [checked]=\"false\">Align end ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-field formControlName=\"hint\" placeholder=\"Date\" [mobile]=\"true\" [clearable]=\"true\">\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (!showHintEnd.checked) {\n                          <mat-hint>Start hint</mat-hint>\n                        } @else {\n                          <mat-hint align=\"end\">End hint</mat-hint>\n                        }\n                      </mat-date-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <!-- debug console -->\n        <ion-row>\n          <!-- buttons -->\n          <ion-col size=\"2\">\n            <!-- submit form -->\n            <ion-button (click)=\"doSubmit($event)\" fill=\"outline\">\n              <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n            <!-- clear log  -->\n            <ion-button (click)=\"clearLogPanel()\" fill=\"outline\">\n              <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n          </ion-col>\n          @if (showLogPanel) {\n            <ion-col size=\"10\">\n              <ion-text color=\"primary\">\n                Log:\n                <br />\n              </ion-text>\n              <div class=\"ion-padding-start\">\n                <ion-text color=\"medium\">\n                  <small [innerHTML]=\"logContent\"></small>\n                </ion-text>\n              </div>\n            </ion-col>\n          }\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Desktop mode -->\n    @if (mode === 'desktop') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Desktop mode</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.empty.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-field formControlName=\"empty\" placeholder=\"Date\" [mobile]=\"false\" [clearable]=\"true\">\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value (required)</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-field\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.enable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-field\n                  formControlName=\"enable\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.disable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-field formControlName=\"disable\" placeholder=\"Date\" [required]=\"true\" [mobile]=\"false\">\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- TimeZone  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">TimeZone</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>timezone=\"{{ timezone }}\" value={{ stringify(form.controls.timezone.value) }}</pre>\n                    </small>\n                    <pre>Should display using the browser TZ,<br/>but serialize/deserialize for the given TZ</pre>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-field\n                  formControlName=\"timezone\"\n                  placeholder=\"Date\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                  [timezone]=\"timezone\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Readonly  -->\n          <ion-col size=\"12\" size-lg=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"desktopReadonlyField.readonly = $event.checked\"\n                        [checked]=\"desktopReadonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showDesktopHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-field\n                        #desktopReadonlyField\n                        formControlName=\"readonly\"\n                        placeholder=\"Date\"\n                        [readonly]=\"true\"\n                        [mobile]=\"false\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showDesktopHint.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-date-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Hint -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showDesktopHintEnd [checked]=\"false\">Align end ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-field formControlName=\"hint\" placeholder=\"Date\" [mobile]=\"false\" [clearable]=\"true\">\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (!showDesktopHintEnd.checked) {\n                          <mat-hint>Start hint</mat-hint>\n                        } @else {\n                          <mat-hint align=\"end\">End hint</mat-hint>\n                        }\n                      </mat-date-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n  </form>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i8.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: MatDate, selector: "mat-date-field", inputs: ["formControl", "formControlName", "placeholder", "floatLabel", "mobile", "compact", "autofocus", "clearable", "required", "startDate", "timezone", "datePickerFilter", "appearance", "subscriptSizing", "readonly", "tabindex"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateTestPage, decorators: [{
             type: Component,
@@ -47451,7 +47478,7 @@ class DateShortTestPage {
     }
     stringify = JSON.stringify;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateShortTestPage, deps: [{ token: i1$3.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DateShortTestPage, selector: "app-data-short-test", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Date short field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'memory'\" (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container ion-padding\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    @if (mode === 'memory') {\n      <ion-grid>\n        <!-- debugging memory leak -->\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Debug memory leak</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col size=\"auto\">\n            @if (!memoryTimer) {\n              <ion-button (click)=\"startMemoryTimer()\">Start timer</ion-button>\n            }\n            @if (memoryTimer) {\n              <ion-button (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n            }\n          </ion-col>\n          <ion-col size=\"4\">\n            <mat-form-field floatLabel=\"auto\">\n              <input matInput type=\"text\" hidden />\n              <mat-checkbox (change)=\"memoryMobile = $event.checked\" [checked]=\"memoryMobile\">Mobile ?</mat-checkbox>\n            </mat-form-field>\n          </ion-col>\n          <ion-col>\n            @if (!memoryHide) {\n              <mat-date-short-field\n                formControlName=\"empty\"\n                placeholder=\"Date\"\n                [required]=\"true\"\n                [mobile]=\"memoryMobile\"\n                [clearable]=\"true\"\n              >\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-short-field>\n            }\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    @if (mode === 'mobile') {\n      <ion-grid>\n        <!-- Mobile mode -->\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Mobile mode</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.empty.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-short-field formControlName=\"empty\" placeholder=\"Date\" [mobile]=\"true\" [clearable]=\"true\">\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-short-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value (required)</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-short-field\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-short-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.enable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-short-field\n                  formControlName=\"enable\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-short-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.disable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-short-field formControlName=\"disable\" placeholder=\"Date\" [required]=\"true\" [mobile]=\"true\">\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-short-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Readonly  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"mobileReadonlyField.readonly = $event.checked\"\n                        [checked]=\"mobileReadonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showReadonlyHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showReadonlyIcons [checked]=\"true\">Icons ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-short-field\n                        #mobileReadonlyField\n                        formControlName=\"readonly\"\n                        placeholder=\"Date\"\n                        [readonly]=\"true\"\n                        [mobile]=\"true\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showReadonlyIcons.checked) {\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showReadonlyHint.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-date-short-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n\n          <!-- Hint -->\n          <ion-col size=\"12\" size-md=\"6\" size-lg=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHintAlignEnd [checked]=\"false\" [disabled]=\"!showHint.checked\">\n                        Align end ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showIcons [checked]=\"true\">Suffix icon ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-short-field\n                        formControlName=\"hint\"\n                        placeholder=\"Date\"\n                        [mobile]=\"true\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showIcons.checked) {\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showHint.checked) {\n                          <mat-hint [align]=\"showHintAlignEnd.checked ? 'end' : 'start'\">Some hint</mat-hint>\n                        }\n                      </mat-date-short-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <!-- debug console -->\n        <ion-row>\n          <!-- buttons -->\n          <ion-col size=\"2\">\n            <!-- submit form -->\n            <ion-button (click)=\"doSubmit($event)\" fill=\"outline\">\n              <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n            <!-- clear log  -->\n            <ion-button (click)=\"clearLogPanel()\" fill=\"outline\">\n              <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n          </ion-col>\n          @if (showLogPanel) {\n            <ion-col size=\"10\">\n              <ion-text color=\"primary\">\n                Log:\n                <br />\n              </ion-text>\n              <div class=\"ion-padding-start\">\n                <ion-text color=\"medium\">\n                  <small [innerHTML]=\"logContent\"></small>\n                </ion-text>\n              </div>\n            </ion-col>\n          }\n        </ion-row>\n      </ion-grid>\n    }\n\n    @if (mode === 'desktop') {\n      <ion-grid>\n        <!-- Desktop mode -->\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Desktop mode</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>\n                        {{ stringify(form.controls.empty.value) }}\n                      </pre>\n                      <br />\n                      <pre>\n                        formControl.valid? {{ form.controls.empty?.valid }}\n                      </pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-short-field\n                  formControlName=\"empty\"\n                  #desktopEmptyField\n                  placeholder=\"Date\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-short-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <!-- Empty value + required -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value (required)</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-short-field\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-short-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.enable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-short-field\n                  formControlName=\"enable\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-short-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.disable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-short-field formControlName=\"disable\" placeholder=\"Date\" [required]=\"true\" [mobile]=\"false\">\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-short-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Readonly  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-checkbox\n                  (change)=\"desktopReadonlyField.readonly = $event.checked\"\n                  [checked]=\"desktopReadonlyField.readonly\"\n                ></mat-checkbox>\n                <mat-date-short-field\n                  #desktopReadonlyField\n                  formControlName=\"readonly\"\n                  placeholder=\"Date\"\n                  [readonly]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-short-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n\n          <!-- Hint -->\n          <ion-col size=\"12\" size-md=\"6\" size-lg=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHintAlignEnd [checked]=\"false\" [disabled]=\"!showHint.checked\">\n                        Align end ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showIcons [checked]=\"true\">Suffix icon ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-short-field\n                        formControlName=\"hint\"\n                        placeholder=\"Date\"\n                        [mobile]=\"false\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showIcons.checked) {\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showHint.checked) {\n                          <mat-hint [align]=\"showHintAlignEnd.checked ? 'end' : 'start'\">Some hint</mat-hint>\n                        }\n                      </mat-date-short-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n  </form>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: MatDateShort, selector: "mat-date-short-field", inputs: ["formControl", "formControlName", "placeholder", "floatLabel", "mobile", "compact", "autofocus", "clearable", "required", "startDate", "datePickerFilter", "appearance", "subscriptSizing", "readonly", "tabindex"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DateShortTestPage, selector: "app-data-short-test", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Date short field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'memory'\" (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container ion-padding\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    @if (mode === 'memory') {\n      <ion-grid>\n        <!-- debugging memory leak -->\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Debug memory leak</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col size=\"auto\">\n            @if (!memoryTimer) {\n              <ion-button (click)=\"startMemoryTimer()\">Start timer</ion-button>\n            }\n            @if (memoryTimer) {\n              <ion-button (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n            }\n          </ion-col>\n          <ion-col size=\"4\">\n            <mat-form-field floatLabel=\"auto\">\n              <input matInput type=\"text\" hidden />\n              <mat-checkbox (change)=\"memoryMobile = $event.checked\" [checked]=\"memoryMobile\">Mobile ?</mat-checkbox>\n            </mat-form-field>\n          </ion-col>\n          <ion-col>\n            @if (!memoryHide) {\n              <mat-date-short-field\n                formControlName=\"empty\"\n                placeholder=\"Date\"\n                [required]=\"true\"\n                [mobile]=\"memoryMobile\"\n                [clearable]=\"true\"\n              >\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-short-field>\n            }\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    @if (mode === 'mobile') {\n      <ion-grid>\n        <!-- Mobile mode -->\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Mobile mode</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.empty.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-short-field formControlName=\"empty\" placeholder=\"Date\" [mobile]=\"true\" [clearable]=\"true\">\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-short-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value (required)</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-short-field\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-short-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.enable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-short-field\n                  formControlName=\"enable\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-short-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.disable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-short-field formControlName=\"disable\" placeholder=\"Date\" [required]=\"true\" [mobile]=\"true\">\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-short-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Readonly  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"mobileReadonlyField.readonly = $event.checked\"\n                        [checked]=\"mobileReadonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showReadonlyHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showReadonlyIcons [checked]=\"true\">Icons ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-short-field\n                        #mobileReadonlyField\n                        formControlName=\"readonly\"\n                        placeholder=\"Date\"\n                        [readonly]=\"true\"\n                        [mobile]=\"true\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showReadonlyIcons.checked) {\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showReadonlyHint.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-date-short-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n\n          <!-- Hint -->\n          <ion-col size=\"12\" size-md=\"6\" size-lg=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHintAlignEnd [checked]=\"false\" [disabled]=\"!showHint.checked\">\n                        Align end ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showIcons [checked]=\"true\">Suffix icon ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-short-field\n                        formControlName=\"hint\"\n                        placeholder=\"Date\"\n                        [mobile]=\"true\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showIcons.checked) {\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showHint.checked) {\n                          <mat-hint [align]=\"showHintAlignEnd.checked ? 'end' : 'start'\">Some hint</mat-hint>\n                        }\n                      </mat-date-short-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <!-- debug console -->\n        <ion-row>\n          <!-- buttons -->\n          <ion-col size=\"2\">\n            <!-- submit form -->\n            <ion-button (click)=\"doSubmit($event)\" fill=\"outline\">\n              <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n            <!-- clear log  -->\n            <ion-button (click)=\"clearLogPanel()\" fill=\"outline\">\n              <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n          </ion-col>\n          @if (showLogPanel) {\n            <ion-col size=\"10\">\n              <ion-text color=\"primary\">\n                Log:\n                <br />\n              </ion-text>\n              <div class=\"ion-padding-start\">\n                <ion-text color=\"medium\">\n                  <small [innerHTML]=\"logContent\"></small>\n                </ion-text>\n              </div>\n            </ion-col>\n          }\n        </ion-row>\n      </ion-grid>\n    }\n\n    @if (mode === 'desktop') {\n      <ion-grid>\n        <!-- Desktop mode -->\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Desktop mode</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>\n                        {{ stringify(form.controls.empty.value) }}\n                      </pre>\n                      <br />\n                      <pre>\n                        formControl.valid? {{ form.controls.empty?.valid }}\n                      </pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-short-field\n                  formControlName=\"empty\"\n                  #desktopEmptyField\n                  placeholder=\"Date\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-short-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <!-- Empty value + required -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value (required)</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-short-field\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-short-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.enable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-short-field\n                  formControlName=\"enable\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-short-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.disable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-short-field formControlName=\"disable\" placeholder=\"Date\" [required]=\"true\" [mobile]=\"false\">\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-short-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Readonly  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-checkbox\n                  (change)=\"desktopReadonlyField.readonly = $event.checked\"\n                  [checked]=\"desktopReadonlyField.readonly\"\n                ></mat-checkbox>\n                <mat-date-short-field\n                  #desktopReadonlyField\n                  formControlName=\"readonly\"\n                  placeholder=\"Date\"\n                  [readonly]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-short-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n\n          <!-- Hint -->\n          <ion-col size=\"12\" size-md=\"6\" size-lg=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHintAlignEnd [checked]=\"false\" [disabled]=\"!showHint.checked\">\n                        Align end ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showIcons [checked]=\"true\">Suffix icon ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-short-field\n                        formControlName=\"hint\"\n                        placeholder=\"Date\"\n                        [mobile]=\"false\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showIcons.checked) {\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showHint.checked) {\n                          <mat-hint [align]=\"showHintAlignEnd.checked ? 'end' : 'start'\">Some hint</mat-hint>\n                        }\n                      </mat-date-short-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n  </form>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i8.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: MatDateShort, selector: "mat-date-short-field", inputs: ["formControl", "formControlName", "placeholder", "floatLabel", "mobile", "compact", "autofocus", "clearable", "required", "startDate", "datePickerFilter", "appearance", "subscriptSizing", "readonly", "tabindex"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateShortTestPage, decorators: [{
             type: Component,
@@ -47668,7 +47695,7 @@ class AutocompleteTestPage {
         return JSON.stringify(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutocompleteTestPage, deps: [{ token: i1$3.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AutocompleteTestPage, selector: "app-autocomplete-test", viewQueries: [{ propertyName: "farEntityField", first: true, predicate: ["farEntityField"], descendants: true }, { propertyName: "ionModal", first: true, predicate: IonModal, descendants: true }], ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Autocomplete field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'memory'\" (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    @if (mode === 'temp') {\n      <ion-grid>\n        <ion-row>\n          <!-- Autocomplete medium panel class - see issue sumaris-app#943\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Autocomplete with class 'min-width-medium'</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>\n                        class=\"min-width-medium\"\n                      </pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  placeholder=\"With panel class\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  panelClass=\"min-width-medium\"\n                  [mobile]=\"false\"\n                  [logPrefix]=\"'[combo-temp-min-width-medium]'\"\n                  [showAllOnFocus]=\"true\"\n                  [debug]=\"true\"\n                >\n                  <button matAfter type=\"button\" mat-icon-button tabindex=\"-1\" title=\"Filter\" [color]=\"'primary'\">\n                    <mat-icon>filter_list_alt</mat-icon>\n                  </button>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>-->\n\n          <!-- Autocomplete with button\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Autocomplete with button</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre style=\"white-space: normal !important\">\n                        value: {{ stringify(form.controls.withButton.value) }}</pre\n                      >\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"withButton\"\n                  placeholder=\"With button\"\n                  [config]=\"autocompleteFields.get('entity-with-button')\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-temp-with-button]'\"\n                  [required]=\"true\"\n                  [clearable]=\"true\"\n                  [clearInvalidValueOnBlur]=\"true\"\n                  [reloadItemsOnFocus]=\"true\"\n                  [showAllOnFocus]=\"true\"\n                  [selectInputContentOnFocus]=\"true\"\n                  [debug]=\"true\"\n                >\n                  <button matAfter type=\"button\" mat-icon-button tabindex=\"-1\" title=\"Filter\" [color]=\"'primary'\">\n                    <mat-icon>filter_list_alt</mat-icon>\n                  </button>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col> -->\n\n          <!--<ion-col size=\"3\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">panelClass + suggestLengthThreshold</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>\nsuggestLengthThreshold: '3'\npanelClass=\"mat-select-panel-fit-content\"\n                      </pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"emptyEntity\"\n                  [config]=\"autocompleteFields.get('entity-items-filter')\"\n                  [placeholder]=\"'Entity'\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [suggestLengthThreshold]=\"3\"\n                  [logPrefix]=\"'[combo-desktop-suggestLengthThreshold]'\"\n                  [debug]=\"true\"\n                  [showAllOnFocus]=\"true\"\n                  panelClass=\"mat-select-panel-fit-content\"\n                >\n                  <mat-icon matPrefix>keyboard_arrow_right</mat-icon>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>-->\n\n          <!-- showAllOnFocus + required + NO searchbar\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">showAllOnFocus + required + NO searchbar</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>mobile: true, showSearchBar: false, showAllOnFocus: true, required: true</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  #field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                  [placeholder]=\"'Entity'\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-no-searchbar]'\"\n                  [debug]=\"true\"\n                  [mobile]=\"true\"\n                  [required]=\"true\"\n                  placeholder=\"No search bar\"\n                  showSearchBar=\"true\"\n                  [showAllOnFocus]=\"false\"\n                >\n                  <ion-spinner matSuffix *ngIf=\"field.loading\"></ion-spinner>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>-->\n        </ion-row>\n      </ion-grid>\n    }\n\n    @if (mode === 'memory') {\n      <ion-grid>\n        <!-- debugging memory leak -->\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Debug memory leak</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col size=\"2\">\n            <mat-form-field floatLabel=\"always\">\n              <mat-label>Items type</mat-label>\n              <input matInput type=\"text\" hidden />\n              <mat-select\n                (selectionChange)=\"memoryAutocompleteFieldName = $event.value\"\n                [value]=\"memoryAutocompleteFieldName\"\n              >\n                <mat-option value=\"entity-$items\">Observable</mat-option>\n                <mat-option value=\"entity-suggestFn\">Suggest function</mat-option>\n              </mat-select>\n            </mat-form-field>\n          </ion-col>\n          <ion-col size=\"1\" class=\"ion-no-padding\">\n            <mat-form-field floatLabel=\"always\">\n              <mat-label>Mobile ?</mat-label>\n              <input matInput type=\"text\" hidden />\n              <mat-checkbox (change)=\"memoryMobile = $event.checked\" [checked]=\"memoryMobile\"></mat-checkbox>\n            </mat-form-field>\n          </ion-col>\n          <ion-col size=\"2\">\n            @if (!memoryTimer) {\n              <ion-button (click)=\"startMemoryTimer()\" color=\"tertiary\">Start</ion-button>\n            }\n            @if (memoryTimer) {\n              <ion-button (click)=\"stopMemoryTimer()\" color=\"tertiary\">Stop</ion-button>\n            }\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            @if (!memoryHide && memoryAutocompleteFieldName) {\n              <span>OK {{ memoryHide }}</span>\n              <mat-autocomplete-field\n                formControlName=\"entity\"\n                [config]=\"autocompleteFields.get(memoryAutocompleteFieldName)\"\n                [mobile]=\"memoryMobile\"\n                [equals]=\"equals\"\n                [logPrefix]=\"'[combo-memory-leak]'\"\n              ></mat-autocomplete-field>\n            }\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Mobile mode -->\n    @if (mode === 'mobile') {\n      <ion-grid>\n        <ion-row>\n          <!-- using suggestFn (and favorites) -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">suggestFn</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>mobile: true, suggestFn: (searchText, filter) =&gt; any[], favoriteItems: any[]</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                  [favoriteItems]=\"_favoriteItems\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-1]'\"\n                  [required]=\"true\"\n                  placeholder=\"Suggest field\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n\n          <!-- Far items (not in the first page) -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Entity far in the list (not in first page)</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre style=\"white-space: normal !important\">\n                        value: {{ stringify(form.controls.farEntity.value) }}</pre\n                      >\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"farEntity\"\n                  #farEntityField\n                  [config]=\"autocompleteFields.get('entity-far')\"\n                  [favoriteItems]=\"_favoriteFarItems\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-far]'\"\n                  [debug]=\"true\"\n                  [required]=\"true\"\n                  [clearable]=\"true\"\n                  placeholder=\"Far item (in the list)\"\n                >\n                  <ion-icon matPrefix name=\"contract\"></ion-icon>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Items is an Observable</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>mobile: true, items: Observable&lt;any[]&gt;</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [placeholder]=\"'Item from observable'\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-observable]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">showAllOnFocus + required + NO searchbar</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>mobile: true, showSearchBar: false, showAllOnFocus: true, required: true</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  showSearchBar=\"false\"\n                  showAllOnFocus=\"true\"\n                  [logPrefix]=\"'[combo-mobile-no-searchbar]'\"\n                  [required]=\"true\"\n                  placeholder=\"No search bar\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Control value if missing in items</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>mobile: true, items: Observable&lt;any[]&gt;</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"missingEntity\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [clearable]=\"true\"\n                  [logPrefix]=\"'[combo-mobile-2]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">search with a suggestLengthThreshold</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>\n                          suggest: (value, filter) => LoadResult&lt;any&gt;\n                          suggestLengthThreshold: '3'</pre\n                      >\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"emptyEntity\"\n                  [config]=\"autocompleteFields.get('entity-items-filter')\"\n                  [placeholder]=\"'Entity'\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [suggestLengthThreshold]=\"3\"\n                  [logPrefix]=\"'[combo-mobile-suggestLengthThreshold]'\"\n                  [required]=\"true\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Multiple value</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>multiple: true</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entities\"\n                  [config]=\"autocompleteFields.get('entities-items-filter')\"\n                  [placeholder]=\"'Multiple'\"\n                  [mobile]=\"true\"\n                  [multiple]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-multiple]'\"\n                  [debug]=\"true\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disabled control</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"disableEntity\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-2]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">In modal</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-button (click)=\"ionModal.present()\">Open modal</ion-button>\n                <ion-modal>\n                  <ng-template>\n                    <ion-header>\n                      <ion-toolbar>\n                        <ion-title>Modal with embed auto complete field</ion-title>\n                        <ion-buttons slot=\"end\">\n                          <ion-button (click)=\"ionModal.dismiss()\">Close</ion-button>\n                        </ion-buttons>\n                      </ion-toolbar>\n                    </ion-header>\n                    <ion-content class=\"ion-padding\">\n                      <div class=\"form-container\">\n                        <ion-card>\n                          <ion-card-content>\n                            <mat-autocomplete-field\n                              formControlName=\"entity\"\n                              [tabindex]=\"10000\"\n                              [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                              [mobile]=\"true\"\n                              [equals]=\"equals\"\n                              [logPrefix]=\"'[combo-mobile-modal]'\"\n                              [required]=\"true\"\n                              placeholder=\"Suggest field\"\n                            ></mat-autocomplete-field>\n                          </ion-card-content>\n                        </ion-card>\n                        <ion-card>\n                          <ion-card-content>\n                            <mat-autocomplete-field\n                              formControlName=\"entity\"\n                              [tabindex]=\"10000\"\n                              [config]=\"autocompleteFields.get('entity-items-filter')\"\n                              [mobile]=\"true\"\n                              [equals]=\"equals\"\n                              [suggestLengthThreshold]=\"3\"\n                              [logPrefix]=\"'[combo-mobile-modal-suggestLengthThreshold]'\"\n                              [required]=\"true\"\n                              placeholder=\"Suggest field\"\n                            ></mat-autocomplete-field>\n                          </ion-card-content>\n                        </ion-card>\n                      </div>\n                    </ion-content>\n                  </ng-template>\n                </ion-modal>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col size=\"9\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Change filter</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre></pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid class=\"ion-no-padding\">\n                  <ion-row>\n                    <ion-col>\n                      <ion-button (click)=\"updateFilter(filterChangeField, 'entity-items-filter')\">\n                        Filter on: {{ autocompleteFields.get('entity-items-filter').filter?.searchAttribute }}\n                      </ion-button>\n                    </ion-col>\n                    <ion-col>\n                      <mat-autocomplete-field\n                        formControlName=\"entity\"\n                        #filterChangeField\n                        [config]=\"autocompleteFields.get('entity-items-filter')\"\n                        [mobile]=\"true\"\n                        [equals]=\"equals\"\n                        [logPrefix]=\"'[combo-mobile-filter]'\"\n                      ></mat-autocomplete-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"3\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Large combo</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>\nmobile: true\npanelWidth=\"500px\"</pre\n                        >\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"true\"\n                  [panelWidth]=\"'500px'\"\n                  [matAutocompletePosition]=\"'auto'\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-large]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n\n          <ion-col size=\"3\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Fit content combo</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>\nmobile: true\npanelClass=\"mat-select-panel-fit-content\"</pre\n                        >\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"true\"\n                  [matAutocompletePosition]=\"'auto'\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-panelClass]'\"\n                  panelClass=\"mat-select-panel-fit-content\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Readonly toggle</ion-text>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"readonlyField.readonly = $event.checked\"\n                        [checked]=\"readonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showIcons [checked]=\"false\">Icons ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHint [checked]=\"false\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-autocomplete-field\n                        #readonlyField\n                        formControlName=\"entity\"\n                        [config]=\"autocompleteFields.get('entity-items')\"\n                        [placeholder]=\"'Entity'\"\n                        [mobile]=\"true\"\n                        [equals]=\"equals\"\n                        [logPrefix]=\"'[combo-mobile-readonly]'\"\n                        [readonly]=\"true\"\n                        [clearable]=\"!readonlyField.readonly\"\n                      >\n                        @if (showIcons.checked) {\n                          <mat-icon matPrefix>keyboard_arrow_right</mat-icon>\n                        }\n                        @if (showIcons.checked) {\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showHint.checked) {\n                          <mat-hint matHint>Some hint</mat-hint>\n                        }\n                      </mat-autocomplete-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Full size panel</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>panelClass: 'full-size'</pre>\n                      or\n                      <pre>panelWidth: '100vw'</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"true\"\n                  panelClass=\"full-size\"\n                  panelWidth=\"100vw\"\n                  [matAutocompletePosition]=\"'above'\"\n                  [logPrefix]=\"'[combo-mobile-full-size]'\"\n                  [debug]=\"true\"\n                  [showAllOnFocus]=\"true\"\n                  [showPanelOnFocus]=\"true\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Autocomplete with button</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre style=\"white-space: normal !important\">\n                        value: {{ stringify(form.controls.withButton.value) }}</pre\n                      >\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"withButton\"\n                  [config]=\"autocompleteFields.get('entity-with-button')\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-with-button]'\"\n                  [debug]=\"true\"\n                  [required]=\"true\"\n                  [clearable]=\"true\"\n                  placeholder=\"With button\"\n                >\n                  <button matAfter type=\"button\" mat-icon-button tabindex=\"-1\" title=\"Filter\" [color]=\"'primary'\">\n                    <mat-icon>filter_list_alt</mat-icon>\n                  </button>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Desktop mode -->\n    @if (mode === 'desktop') {\n      <ion-grid>\n        <ion-row>\n          <!-- Using suggestFn (and favorites) -->\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">suggestFn</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>\nshowAllOnFocus=true, suggestFn: (searchText, filter) => LoadResult&lt;any&gt;, favoriteItems: any[]\n                      </pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                  [favoriteItems]=\"_favoriteItems\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [clearable]=\"true\"\n                  [logPrefix]=\"'[combo-desktop-suggest]'\"\n                  placeholder=\"Suggest field\"\n                  [debug]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"contract\"></ion-icon>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n\n          <!-- Using service -->\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Service</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>Service with suggest: (searchText, filter) => LoadResult&lt;any&gt;</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-items-filter')\"\n                  [placeholder]=\"'Filtered field'\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [clearable]=\"true\"\n                  [logPrefix]=\"'[combo-desktop-service]'\"\n                  [debug]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"contract\"></ion-icon>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">search with a suggestLengthThreshold</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>\n                            suggest: (value, filter) => LoadResult&lt;any&gt;\n                            suggestLengthThreshold: '3'</pre\n                      >\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"emptyEntity\"\n                  [config]=\"autocompleteFields.get('entity-items-filter')\"\n                  [placeholder]=\"'Filtered field'\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [suggestLengthThreshold]=\"3\"\n                  [logPrefix]=\"'[combo-desktop-suggestLengthThreshold]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Items is an array</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>items: [], value: {{ stringify(form.controls.entity.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Item from array'\"\n                  [config]=\"autocompleteFields.get('entity-items')\"\n                  [logPrefix]=\"'[combo-desktop-array-1]'\"\n                  [equals]=\"equals\"\n                  [mobile]=\"false\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Items is an Observable</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>items: Observable&lt;any[]&gt;</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Item from observable'\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [logPrefix]=\"'[combo-desktop-2]'\"\n                  [equals]=\"equals\"\n                  [mobile]=\"false\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Multiple value</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>multiple: true</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entities\"\n                  [config]=\"autocompleteFields.get('entities-items-filter')\"\n                  [placeholder]=\"'Multiple'\"\n                  [mobile]=\"false\"\n                  [multiple]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-multiple]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Control value if missing in items</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>items: Observable&lt;any[]&gt;</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"missingEntity\"\n                  [placeholder]=\"'Missing item'\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-missing]'\"\n                  [mobile]=\"false\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Full size panel</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>panelClass: 'full-size'</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Full size panel'\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"false\"\n                  [panelClass]=\"'full-size'\"\n                  [matAutocompletePosition]=\"'above'\"\n                  [logPrefix]=\"'[combo-desktop-full-size]'\"\n                  [debug]=\"true\"\n                  [showAllOnFocus]=\"true\"\n                  [showPanelOnFocus]=\"true\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disabled control</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"disableEntity\"\n                  [placeholder]=\"'Disable field'\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-disable]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly control</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Readonly field'\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-readonly]'\"\n                  [readonly]=\"true\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col size=\"9\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Full size combo</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>panelClass: 'full-size'</pre>\n                        or\n                        <pre>panelWidth: '100vw'</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Full size panel'\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"false\"\n                  panelClass=\"full-size\"\n                  panelWidth=\"100vw\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-full-size]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"3\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Large combo</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>panelWidth: string</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Fixed panel width (500px)'\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"false\"\n                  panelWidth=\"500px\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-large]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"3\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Fit content</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>panelClass=\"mat-select-panel-fit-content\"</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Fit content'\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-panelClass]'\"\n                  panelClass=\"mat-select-panel-fit-content\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Readonly toggle</ion-text>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"readonlyField.readonly = $event.checked\"\n                        [checked]=\"readonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showIcons2 [checked]=\"false\">Icons ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHint2 [checked]=\"false\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-autocomplete-field\n                        #readonlyField\n                        formControlName=\"entity\"\n                        [config]=\"autocompleteFields.get('entity-items-filter')\"\n                        [placeholder]=\"'Filtered field'\"\n                        [mobile]=\"false\"\n                        [equals]=\"equals\"\n                        [logPrefix]=\"'[combo-desktop-readonly]'\"\n                        [readonly]=\"true\"\n                        [clearable]=\"!readonlyField.readonly\"\n                      >\n                        @if (showIcons2.checked) {\n                          <mat-icon matPrefix>keyboard_arrow_right</mat-icon>\n                        }\n                        @if (showIcons2.checked) {\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showHint2.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-autocomplete-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n  </form>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonModal, selector: "ion-modal" }, { kind: "component", type: i2$1.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "label", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "hideRequiredMarker", "mobile", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "reloadItemsOnFocus", "clearInvalidValueOnBlur", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "splitSearchText", "selectInputContentOnFocus", "selectInputContentOnFocusDelay", "previewImplicitValue", "showFavorites", "toggleFavoriteTitle", "favoriteItems", "colSizes", "class", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keydown.backspace", "keyup.enter", "selectionChange", "openedChange", "toggleFavorite"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AutocompleteTestPage, selector: "app-autocomplete-test", viewQueries: [{ propertyName: "farEntityField", first: true, predicate: ["farEntityField"], descendants: true }, { propertyName: "ionModal", first: true, predicate: IonModal, descendants: true }], ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Autocomplete field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'memory'\" (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    @if (mode === 'temp') {\n      <ion-grid>\n        <ion-row>\n          <!-- Autocomplete medium panel class - see issue sumaris-app#943\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Autocomplete with class 'min-width-medium'</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>\n                        class=\"min-width-medium\"\n                      </pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  placeholder=\"With panel class\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  panelClass=\"min-width-medium\"\n                  [mobile]=\"false\"\n                  [logPrefix]=\"'[combo-temp-min-width-medium]'\"\n                  [showAllOnFocus]=\"true\"\n                  [debug]=\"true\"\n                >\n                  <button matAfter type=\"button\" mat-icon-button tabindex=\"-1\" title=\"Filter\" [color]=\"'primary'\">\n                    <mat-icon>filter_list_alt</mat-icon>\n                  </button>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>-->\n\n          <!-- Autocomplete with button\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Autocomplete with button</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre style=\"white-space: normal !important\">\n                        value: {{ stringify(form.controls.withButton.value) }}</pre\n                      >\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"withButton\"\n                  placeholder=\"With button\"\n                  [config]=\"autocompleteFields.get('entity-with-button')\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-temp-with-button]'\"\n                  [required]=\"true\"\n                  [clearable]=\"true\"\n                  [clearInvalidValueOnBlur]=\"true\"\n                  [reloadItemsOnFocus]=\"true\"\n                  [showAllOnFocus]=\"true\"\n                  [selectInputContentOnFocus]=\"true\"\n                  [debug]=\"true\"\n                >\n                  <button matAfter type=\"button\" mat-icon-button tabindex=\"-1\" title=\"Filter\" [color]=\"'primary'\">\n                    <mat-icon>filter_list_alt</mat-icon>\n                  </button>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col> -->\n\n          <!--<ion-col size=\"3\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">panelClass + suggestLengthThreshold</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>\nsuggestLengthThreshold: '3'\npanelClass=\"mat-select-panel-fit-content\"\n                      </pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"emptyEntity\"\n                  [config]=\"autocompleteFields.get('entity-items-filter')\"\n                  [placeholder]=\"'Entity'\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [suggestLengthThreshold]=\"3\"\n                  [logPrefix]=\"'[combo-desktop-suggestLengthThreshold]'\"\n                  [debug]=\"true\"\n                  [showAllOnFocus]=\"true\"\n                  panelClass=\"mat-select-panel-fit-content\"\n                >\n                  <mat-icon matPrefix>keyboard_arrow_right</mat-icon>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>-->\n\n          <!-- showAllOnFocus + required + NO searchbar\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">showAllOnFocus + required + NO searchbar</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>mobile: true, showSearchBar: false, showAllOnFocus: true, required: true</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  #field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                  [placeholder]=\"'Entity'\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-no-searchbar]'\"\n                  [debug]=\"true\"\n                  [mobile]=\"true\"\n                  [required]=\"true\"\n                  placeholder=\"No search bar\"\n                  showSearchBar=\"true\"\n                  [showAllOnFocus]=\"false\"\n                >\n                  <ion-spinner matSuffix *ngIf=\"field.loading\"></ion-spinner>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>-->\n        </ion-row>\n      </ion-grid>\n    }\n\n    @if (mode === 'memory') {\n      <ion-grid>\n        <!-- debugging memory leak -->\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Debug memory leak</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col size=\"2\">\n            <mat-form-field floatLabel=\"always\">\n              <mat-label>Items type</mat-label>\n              <input matInput type=\"text\" hidden />\n              <mat-select\n                (selectionChange)=\"memoryAutocompleteFieldName = $event.value\"\n                [value]=\"memoryAutocompleteFieldName\"\n              >\n                <mat-option value=\"entity-$items\">Observable</mat-option>\n                <mat-option value=\"entity-suggestFn\">Suggest function</mat-option>\n              </mat-select>\n            </mat-form-field>\n          </ion-col>\n          <ion-col size=\"1\" class=\"ion-no-padding\">\n            <mat-form-field floatLabel=\"always\">\n              <mat-label>Mobile ?</mat-label>\n              <input matInput type=\"text\" hidden />\n              <mat-checkbox (change)=\"memoryMobile = $event.checked\" [checked]=\"memoryMobile\"></mat-checkbox>\n            </mat-form-field>\n          </ion-col>\n          <ion-col size=\"2\">\n            @if (!memoryTimer) {\n              <ion-button (click)=\"startMemoryTimer()\" color=\"tertiary\">Start</ion-button>\n            }\n            @if (memoryTimer) {\n              <ion-button (click)=\"stopMemoryTimer()\" color=\"tertiary\">Stop</ion-button>\n            }\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            @if (!memoryHide && memoryAutocompleteFieldName) {\n              <span>OK {{ memoryHide }}</span>\n              <mat-autocomplete-field\n                formControlName=\"entity\"\n                [config]=\"autocompleteFields.get(memoryAutocompleteFieldName)\"\n                [mobile]=\"memoryMobile\"\n                [equals]=\"equals\"\n                [logPrefix]=\"'[combo-memory-leak]'\"\n              ></mat-autocomplete-field>\n            }\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Mobile mode -->\n    @if (mode === 'mobile') {\n      <ion-grid>\n        <ion-row>\n          <!-- using suggestFn (and favorites) -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">suggestFn</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>mobile: true, suggestFn: (searchText, filter) =&gt; any[], favoriteItems: any[]</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                  [favoriteItems]=\"_favoriteItems\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-1]'\"\n                  [required]=\"true\"\n                  placeholder=\"Suggest field\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n\n          <!-- Far items (not in the first page) -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Entity far in the list (not in first page)</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre style=\"white-space: normal !important\">\n                        value: {{ stringify(form.controls.farEntity.value) }}</pre\n                      >\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"farEntity\"\n                  #farEntityField\n                  [config]=\"autocompleteFields.get('entity-far')\"\n                  [favoriteItems]=\"_favoriteFarItems\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-far]'\"\n                  [debug]=\"true\"\n                  [required]=\"true\"\n                  [clearable]=\"true\"\n                  placeholder=\"Far item (in the list)\"\n                >\n                  <ion-icon matPrefix name=\"contract\"></ion-icon>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Items is an Observable</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>mobile: true, items: Observable&lt;any[]&gt;</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [placeholder]=\"'Item from observable'\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-observable]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">showAllOnFocus + required + NO searchbar</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>mobile: true, showSearchBar: false, showAllOnFocus: true, required: true</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  showSearchBar=\"false\"\n                  showAllOnFocus=\"true\"\n                  [logPrefix]=\"'[combo-mobile-no-searchbar]'\"\n                  [required]=\"true\"\n                  placeholder=\"No search bar\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Control value if missing in items</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>mobile: true, items: Observable&lt;any[]&gt;</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"missingEntity\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [clearable]=\"true\"\n                  [logPrefix]=\"'[combo-mobile-2]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">search with a suggestLengthThreshold</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>\n                          suggest: (value, filter) => LoadResult&lt;any&gt;\n                          suggestLengthThreshold: '3'</pre\n                      >\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"emptyEntity\"\n                  [config]=\"autocompleteFields.get('entity-items-filter')\"\n                  [placeholder]=\"'Entity'\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [suggestLengthThreshold]=\"3\"\n                  [logPrefix]=\"'[combo-mobile-suggestLengthThreshold]'\"\n                  [required]=\"true\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Multiple value</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>multiple: true</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entities\"\n                  [config]=\"autocompleteFields.get('entities-items-filter')\"\n                  [placeholder]=\"'Multiple'\"\n                  [mobile]=\"true\"\n                  [multiple]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-multiple]'\"\n                  [debug]=\"true\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disabled control</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"disableEntity\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-2]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">In modal</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-button (click)=\"ionModal.present()\">Open modal</ion-button>\n                <ion-modal>\n                  <ng-template>\n                    <ion-header>\n                      <ion-toolbar>\n                        <ion-title>Modal with embed auto complete field</ion-title>\n                        <ion-buttons slot=\"end\">\n                          <ion-button (click)=\"ionModal.dismiss()\">Close</ion-button>\n                        </ion-buttons>\n                      </ion-toolbar>\n                    </ion-header>\n                    <ion-content class=\"ion-padding\">\n                      <div class=\"form-container\">\n                        <ion-card>\n                          <ion-card-content>\n                            <mat-autocomplete-field\n                              formControlName=\"entity\"\n                              [tabindex]=\"10000\"\n                              [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                              [mobile]=\"true\"\n                              [equals]=\"equals\"\n                              [logPrefix]=\"'[combo-mobile-modal]'\"\n                              [required]=\"true\"\n                              placeholder=\"Suggest field\"\n                            ></mat-autocomplete-field>\n                          </ion-card-content>\n                        </ion-card>\n                        <ion-card>\n                          <ion-card-content>\n                            <mat-autocomplete-field\n                              formControlName=\"entity\"\n                              [tabindex]=\"10000\"\n                              [config]=\"autocompleteFields.get('entity-items-filter')\"\n                              [mobile]=\"true\"\n                              [equals]=\"equals\"\n                              [suggestLengthThreshold]=\"3\"\n                              [logPrefix]=\"'[combo-mobile-modal-suggestLengthThreshold]'\"\n                              [required]=\"true\"\n                              placeholder=\"Suggest field\"\n                            ></mat-autocomplete-field>\n                          </ion-card-content>\n                        </ion-card>\n                      </div>\n                    </ion-content>\n                  </ng-template>\n                </ion-modal>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col size=\"9\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Change filter</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre></pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid class=\"ion-no-padding\">\n                  <ion-row>\n                    <ion-col>\n                      <ion-button (click)=\"updateFilter(filterChangeField, 'entity-items-filter')\">\n                        Filter on: {{ autocompleteFields.get('entity-items-filter').filter?.searchAttribute }}\n                      </ion-button>\n                    </ion-col>\n                    <ion-col>\n                      <mat-autocomplete-field\n                        formControlName=\"entity\"\n                        #filterChangeField\n                        [config]=\"autocompleteFields.get('entity-items-filter')\"\n                        [mobile]=\"true\"\n                        [equals]=\"equals\"\n                        [logPrefix]=\"'[combo-mobile-filter]'\"\n                      ></mat-autocomplete-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"3\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Large combo</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>\nmobile: true\npanelWidth=\"500px\"</pre\n                        >\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"true\"\n                  [panelWidth]=\"'500px'\"\n                  [matAutocompletePosition]=\"'auto'\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-large]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n\n          <ion-col size=\"3\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Fit content combo</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>\nmobile: true\npanelClass=\"mat-select-panel-fit-content\"</pre\n                        >\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"true\"\n                  [matAutocompletePosition]=\"'auto'\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-panelClass]'\"\n                  panelClass=\"mat-select-panel-fit-content\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Readonly toggle</ion-text>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"readonlyField.readonly = $event.checked\"\n                        [checked]=\"readonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showIcons [checked]=\"false\">Icons ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHint [checked]=\"false\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-autocomplete-field\n                        #readonlyField\n                        formControlName=\"entity\"\n                        [config]=\"autocompleteFields.get('entity-items')\"\n                        [placeholder]=\"'Entity'\"\n                        [mobile]=\"true\"\n                        [equals]=\"equals\"\n                        [logPrefix]=\"'[combo-mobile-readonly]'\"\n                        [readonly]=\"true\"\n                        [clearable]=\"!readonlyField.readonly\"\n                      >\n                        @if (showIcons.checked) {\n                          <mat-icon matPrefix>keyboard_arrow_right</mat-icon>\n                        }\n                        @if (showIcons.checked) {\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showHint.checked) {\n                          <mat-hint matHint>Some hint</mat-hint>\n                        }\n                      </mat-autocomplete-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Full size panel</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>panelClass: 'full-size'</pre>\n                      or\n                      <pre>panelWidth: '100vw'</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"true\"\n                  panelClass=\"full-size\"\n                  panelWidth=\"100vw\"\n                  [matAutocompletePosition]=\"'above'\"\n                  [logPrefix]=\"'[combo-mobile-full-size]'\"\n                  [debug]=\"true\"\n                  [showAllOnFocus]=\"true\"\n                  [showPanelOnFocus]=\"true\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Autocomplete with button</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre style=\"white-space: normal !important\">\n                        value: {{ stringify(form.controls.withButton.value) }}</pre\n                      >\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"withButton\"\n                  [config]=\"autocompleteFields.get('entity-with-button')\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-with-button]'\"\n                  [debug]=\"true\"\n                  [required]=\"true\"\n                  [clearable]=\"true\"\n                  placeholder=\"With button\"\n                >\n                  <button matAfter type=\"button\" mat-icon-button tabindex=\"-1\" title=\"Filter\" [color]=\"'primary'\">\n                    <mat-icon>filter_list_alt</mat-icon>\n                  </button>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Desktop mode -->\n    @if (mode === 'desktop') {\n      <ion-grid>\n        <ion-row>\n          <!-- Using suggestFn (and favorites) -->\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">suggestFn</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>\nshowAllOnFocus=true, suggestFn: (searchText, filter) => LoadResult&lt;any&gt;, favoriteItems: any[]\n                      </pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                  [favoriteItems]=\"_favoriteItems\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [clearable]=\"true\"\n                  [logPrefix]=\"'[combo-desktop-suggest]'\"\n                  placeholder=\"Suggest field\"\n                  [debug]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"contract\"></ion-icon>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n\n          <!-- Using service -->\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Service</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>Service with suggest: (searchText, filter) => LoadResult&lt;any&gt;</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-items-filter')\"\n                  [placeholder]=\"'Filtered field'\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [clearable]=\"true\"\n                  [logPrefix]=\"'[combo-desktop-service]'\"\n                  [debug]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"contract\"></ion-icon>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">search with a suggestLengthThreshold</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>\n                            suggest: (value, filter) => LoadResult&lt;any&gt;\n                            suggestLengthThreshold: '3'</pre\n                      >\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"emptyEntity\"\n                  [config]=\"autocompleteFields.get('entity-items-filter')\"\n                  [placeholder]=\"'Filtered field'\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [suggestLengthThreshold]=\"3\"\n                  [logPrefix]=\"'[combo-desktop-suggestLengthThreshold]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Items is an array</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>items: [], value: {{ stringify(form.controls.entity.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Item from array'\"\n                  [config]=\"autocompleteFields.get('entity-items')\"\n                  [logPrefix]=\"'[combo-desktop-array-1]'\"\n                  [equals]=\"equals\"\n                  [mobile]=\"false\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Items is an Observable</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>items: Observable&lt;any[]&gt;</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Item from observable'\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [logPrefix]=\"'[combo-desktop-2]'\"\n                  [equals]=\"equals\"\n                  [mobile]=\"false\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Multiple value</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>multiple: true</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entities\"\n                  [config]=\"autocompleteFields.get('entities-items-filter')\"\n                  [placeholder]=\"'Multiple'\"\n                  [mobile]=\"false\"\n                  [multiple]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-multiple]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Control value if missing in items</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>items: Observable&lt;any[]&gt;</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"missingEntity\"\n                  [placeholder]=\"'Missing item'\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-missing]'\"\n                  [mobile]=\"false\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Full size panel</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>panelClass: 'full-size'</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Full size panel'\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"false\"\n                  [panelClass]=\"'full-size'\"\n                  [matAutocompletePosition]=\"'above'\"\n                  [logPrefix]=\"'[combo-desktop-full-size]'\"\n                  [debug]=\"true\"\n                  [showAllOnFocus]=\"true\"\n                  [showPanelOnFocus]=\"true\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disabled control</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"disableEntity\"\n                  [placeholder]=\"'Disable field'\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-disable]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly control</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Readonly field'\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-readonly]'\"\n                  [readonly]=\"true\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col size=\"9\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Full size combo</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>panelClass: 'full-size'</pre>\n                        or\n                        <pre>panelWidth: '100vw'</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Full size panel'\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"false\"\n                  panelClass=\"full-size\"\n                  panelWidth=\"100vw\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-full-size]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"3\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Large combo</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>panelWidth: string</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Fixed panel width (500px)'\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"false\"\n                  panelWidth=\"500px\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-large]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"3\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Fit content</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>panelClass=\"mat-select-panel-fit-content\"</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Fit content'\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-panelClass]'\"\n                  panelClass=\"mat-select-panel-fit-content\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Readonly toggle</ion-text>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"readonlyField.readonly = $event.checked\"\n                        [checked]=\"readonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showIcons2 [checked]=\"false\">Icons ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHint2 [checked]=\"false\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-autocomplete-field\n                        #readonlyField\n                        formControlName=\"entity\"\n                        [config]=\"autocompleteFields.get('entity-items-filter')\"\n                        [placeholder]=\"'Filtered field'\"\n                        [mobile]=\"false\"\n                        [equals]=\"equals\"\n                        [logPrefix]=\"'[combo-desktop-readonly]'\"\n                        [readonly]=\"true\"\n                        [clearable]=\"!readonlyField.readonly\"\n                      >\n                        @if (showIcons2.checked) {\n                          <mat-icon matPrefix>keyboard_arrow_right</mat-icon>\n                        }\n                        @if (showIcons2.checked) {\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showHint2.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-autocomplete-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n  </form>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonModal, selector: "ion-modal" }, { kind: "component", type: i2$1.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i8.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i8.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "label", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "hideRequiredMarker", "mobile", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "reloadItemsOnFocus", "clearInvalidValueOnBlur", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "splitSearchText", "selectInputContentOnFocus", "selectInputContentOnFocusDelay", "previewImplicitValue", "showFavorites", "toggleFavoriteTitle", "favoriteItems", "colSizes", "class", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keydown.backspace", "keyup.enter", "selectionChange", "openedChange", "toggleFavorite"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutocompleteTestPage, decorators: [{
             type: Component,
@@ -47794,7 +47821,7 @@ class LatLongTestPage {
     }
     stringify = JSON.stringify;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LatLongTestPage, deps: [{ token: i1$3.UntypedFormBuilder }, { token: PlatformService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LatLongTestPage, selector: "app-latlong-test", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Lat/Long field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <!-- Tab nav - desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'dev'\" (click)=\"toggleMode('dev')\">\n      <mat-label>Dev</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container ion-padding\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    @if (mode === 'mobile') {\n      <ng-container *ngTemplateOutlet=\"mainTest; context: { mobile: true }\"></ng-container>\n    } @else if (mode === 'desktop') {\n      <ng-container *ngTemplateOutlet=\"mainTest; context: { mobile: false }\"></ng-container>\n    } @else if (mode === 'dev') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <ion-button [disabled]=\"testUpdateDefaultSign === '-'\" (click)=\"testUpdateDefaultSign = '-'\">\n              Set default sign to \"-\"\n            </ion-button>\n          </ion-col>\n          <ion-col>\n            <ion-button [disabled]=\"testUpdateDefaultSign === '+'\" (click)=\"testUpdateDefaultSign = '+'\">\n              Set default sign to \"+\"\n            </ion-button>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <mat-checkbox (change)=\"toggleAppearance($event)\">Change apparence</mat-checkbox>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <mat-form-field [appearance]=\"appearance\" [subscriptSizing]=\"'dynamic'\">\n              <mat-label>LatLongFormat</mat-label>\n              <mat-select #selectLatLongFormat [(value)]=\"selectedFormat\">\n                <mat-option value=\"DDMM\" selected>DDMM</mat-option>\n                <mat-option value=\"DDMMSS\">DDMMSS</mat-option>\n                <mat-option value=\"DD\">DD</mat-option>\n              </mat-select>\n            </mat-form-field>\n          </ion-col>\n        </ion-row>\n        @switch (selectedFormat) {\n          @case ('DDMM') {\n            <ion-row>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: {\n                      formGroup: 'empty',\n                      latLongPattern: 'DDMM',\n                      required: false,\n                      defaultSign: testUpdateDefaultSign,\n                    }\n                  \"\n                  jjj\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: {\n                      formGroup: 'enable',\n                      latLongPattern: 'DDMM',\n                      required: true,\n                      defaultSign: testUpdateDefaultSign,\n                    }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <!-- <ion-col> -->\n              <!--   <ng-container -->\n              <!--     *ngTemplateOutlet=\"testV2; context: { formGroup: 'disable', latLongPattern: 'DDMM', required: true }\" -->\n              <!--   ></ng-container> -->\n              <!-- </ion-col> -->\n            </ion-row>\n          }\n          @case ('DDMMSS') {\n            <ion-row>\n              <!-- DDMMSS -->\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: {\n                      formGroup: 'empty',\n                      latLongPattern: 'DDMMSS',\n                      required: false,\n                      defaultSign: testUpdateDefaultSign,\n                    }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: {\n                      formGroup: 'enable',\n                      latLongPattern: 'DDMMSS',\n                      required: true,\n                      defaultSign: testUpdateDefaultSign,\n                    }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: {\n                      formGroup: 'disable',\n                      latLongPattern: 'DDMMSS',\n                      required: true,\n                      defaultSign: testUpdateDefaultSign,\n                    }\n                  \"\n                ></ng-container>\n              </ion-col>\n            </ion-row>\n          }\n          @case ('DD') {\n            <ion-row>\n              <!-- DDMMSS -->\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: {\n                      formGroup: 'empty',\n                      latLongPattern: 'DD',\n                      required: false,\n                      defaultSign: testUpdateDefaultSign,\n                    }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: {\n                      formGroup: 'enable',\n                      latLongPattern: 'DD',\n                      required: true,\n                      defaultSign: testUpdateDefaultSign,\n                    }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: {\n                      formGroup: 'disable',\n                      latLongPattern: 'DD',\n                      required: true,\n                      defaultSign: testUpdateDefaultSign,\n                    }\n                  \"\n                ></ng-container>\n              </ion-col>\n            </ion-row>\n          }\n        }\n      </ion-grid>\n\n      <ion-grid></ion-grid>\n    } @else {\n      <!-- Temporay TAB (for DEV) -->\n      <form *ngIf=\"form | formGetGroup: 'enable' as formGroup\" [formGroup]=\"formGroup\">\n        <ion-card>\n          <ion-card-header>\n            <ion-card-title>\n              <ion-label color=\"primary\">Required</ion-label>\n            </ion-card-title>\n            <ion-card-subtitle>\n              <ion-text color=\"medium\">\n                <small>\n                  <pre>formGroup.value: {{ formGroup.value | json }}</pre>\n                </small>\n              </ion-text>\n            </ion-card-subtitle>\n          </ion-card-header>\n          <ion-card-content>\n            <ion-grid class=\"ion-no-padding\">\n              <ion-row>\n                <ion-col>\n                  <mat-latlong-field\n                    formControlName=\"latitude\"\n                    type=\"latitude\"\n                    latLongPattern=\"DDMMSS\"\n                    placeholder=\"Latitude\"\n                    [appearance]=\"appearance\"\n                    [required]=\"true\"\n                    [clearable]=\"true\"\n                  >\n                    <mat-icon matPrefix>room</mat-icon>\n                    <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                      <mat-icon>gps_fixed</mat-icon>\n                    </button>\n                  </mat-latlong-field>\n                </ion-col>\n                <ion-col>\n                  <mat-latlong-field\n                    formControlName=\"longitude\"\n                    type=\"longitude\"\n                    latLongPattern=\"DDMMSS\"\n                    placeholder=\"Longitude\"\n                    [appearance]=\"appearance\"\n                    [required]=\"true\"\n                    [clearable]=\"true\"\n                  >\n                    <mat-icon matPrefix>room</mat-icon>\n                    <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                      <mat-icon>gps_fixed</mat-icon>\n                    </button>\n                  </mat-latlong-field>\n                </ion-col>\n              </ion-row>\n              <ion-row *ngIf=\"geoPositionMessage\">\n                <ion-col>{{ geoPositionMessage }}</ion-col>\n              </ion-row>\n            </ion-grid>\n          </ion-card-content>\n        </ion-card>\n      </form>\n    }\n  </form>\n</ion-content>\n\n<ng-template #mainTest let-mobile=\"mobile\">\n  <!-- Empty value -->\n  <form *ngIf=\"form | formGetGroup: 'empty' as formGroup\" [formGroup]=\"formGroup\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <mat-checkbox (change)=\"toggleAppearance($event)\">Change apparence</mat-checkbox>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Empty, with defaults</h4></ion-text>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <!-- DD Default sign -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DD, defaultSign '-'</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DD\"\n                      defaultSign=\"-\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DD\"\n                      defaultSign=\"-\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n                <ion-row *ngIf=\"geoPositionMessage\">\n                  <ion-col>{{ geoPositionMessage }}</ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- DDMM Default sign -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMM, defaultSign '+'</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMM\"\n                      defaultSign=\"+\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMM\"\n                      defaultSign=\"+\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- DDMMSS Default sign -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMMSS, defaultSign '+'</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMMSS\"\n                      defaultSign=\"+\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMMSS\"\n                      defaultSign=\"+\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n\n  <!-- Empty value -->\n  <form *ngIf=\"form | formGetGroup: 'emptyRequired' as formGroup\" [formGroup]=\"formGroup\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Empty, required (no defaults)</h4></ion-text>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <!-- DD -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DD, required</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DD\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"true\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DD\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"true\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n                <ion-row *ngIf=\"geoPositionMessage\">\n                  <ion-col>{{ geoPositionMessage }}</ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- DDMM  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMM, required</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"true\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"true\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n  <form *ngIf=\"form | formGetGroup: 'notRequired' as formGroup\" [formGroup]=\"formGroup\">\n    <ion-grid>\n      <!-- With value -->\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Empty, not required</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <!-- DD -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DD, not required</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DD\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"false\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DD\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"false\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n                <ion-row *ngIf=\"geoPositionMessage\">\n                  <ion-col>{{ geoPositionMessage }}</ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- DDMM -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMM, not required</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"false\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"false\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n                <ion-row *ngIf=\"geoPositionMessage\">\n                  <ion-col>{{ geoPositionMessage }}</ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n  <form *ngIf=\"form | formGetGroup: 'enable' as formGroup\" [formGroup]=\"formGroup\">\n    <ion-grid>\n      <!-- With value -->\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>With value</h4></ion-text>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <!-- DD -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DD</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DD\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    ></mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DD\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    ></mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- DDMMSS -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMM</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    ></mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    ></mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- DDMMSS -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMMSS</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMMSS\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    ></mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMMSS\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    ></mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n\n  <!-- Disable  -->\n  <form *ngIf=\"form | formGetGroup: 'disable' as formGroup\" [formGroup]=\"formGroup\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Disabled control</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Disabled control</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"false\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <mat-icon matSuffix>gps_fixed</mat-icon>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Readonly (control is enable)</ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-checkbox\n                (change)=\"readonlyField.readonly = $event.checked\"\n                [checked]=\"readonlyField.readonly\"\n              ></mat-checkbox>\n\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      #readonlyField\n                      [formControl]=\"form | formGetControl: 'enable.latitude'\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Latitude\"\n                      [readonly]=\"true\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <mat-icon matSuffix>gps_fixed</mat-icon>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">With hint</ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-latlong-field\n                #readonlyField\n                [formControl]=\"form | formGetControl: 'enable.latitude'\"\n                type=\"latitude\"\n                latLongPattern=\"DDMM\"\n                placeholder=\"Latitude\"\n                [appearance]=\"appearance\"\n                [mobile]=\"mobile\"\n              >\n                <mat-hint align=\"end\">This is a long long hint</mat-hint>\n              </mat-latlong-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n</ng-template>\n\n<ng-template\n  #newComponent\n  let-formGroupName=\"formGroup\"\n  let-pattern=\"latLongPattern\"\n  let-required=\"required\"\n  let-defaultSign=\"defaultSign\"\n>\n  <form *ngIf=\"form | formGetGroup: formGroupName as formGroup\" [formGroup]=\"formGroup\">\n    <ion-card>\n      <ion-card-header>\n        <ion-card-title>\n          <ion-label color=\"primary\">{{ formGroupName }}</ion-label>\n        </ion-card-title>\n        <ion-card-subtitle>\n          <ion-grid class=\"ion-no-padding\">\n            <ion-row class=\"ion-no-padding\">\n              <ion-col class=\"ion-no-padding\">\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ formGroup.value | json }}</pre>\n                    <pre>invalid ? : {{ (formGroup | formGetControl: 'latitude').invalid }}</pre>\n                    <pre>touched ? : {{ (formGroup | formGetControl: 'latitude').touched }}</pre>\n                    <pre>errors : {{ formGroup | formGetGroup: 'latitude' | formError }}</pre>\n                    <pre>defaultSign : {{ defaultSign }}</pre>\n                  </small>\n                </ion-text>\n              </ion-col>\n            </ion-row>\n            <ion-row class=\"ion-no-padding\">\n              <ion-col class=\"ion-no-padding\" sizeLg=\"6\">\n                <mat-latlong-field\n                  formControlName=\"latitude\"\n                  type=\"latitude\"\n                  [readonly]=\"true\"\n                  [latLongPattern]=\"pattern\"\n                  [defaultSign]=\"defaultSign\"\n                  placeholder=\"Latitude\"\n                  [appearance]=\"appearance\"\n                ></mat-latlong-field>\n              </ion-col>\n              <ion-col sizeLg=\"6\">\n                <mat-latlong-field\n                  formControlName=\"longitude\"\n                  type=\"longitude\"\n                  [readonly]=\"true\"\n                  [latLongPattern]=\"pattern\"\n                  [defaultSign]=\"defaultSign\"\n                  placeholder=\"Longitude\"\n                  [appearance]=\"appearance\"\n                ></mat-latlong-field>\n              </ion-col>\n            </ion-row>\n          </ion-grid>\n        </ion-card-subtitle>\n      </ion-card-header>\n      <ion-card-content>\n        <ion-grid class=\"ion-no-padding\">\n          <ion-row>\n            <ion-col class=\"ion-no-padding\" sizeLg=\"6\">\n              <mat-latlong-field\n                formControlName=\"latitude\"\n                type=\"latitude\"\n                [latLongPattern]=\"pattern\"\n                [defaultSign]=\"defaultSign\"\n                placeholder=\"Latitude\"\n                [appearance]=\"appearance\"\n                [required]=\"required\"\n              >\n                <mat-icon matPrefix>room</mat-icon>\n                <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                  <mat-icon>gps_fixed</mat-icon>\n                </button>\n              </mat-latlong-field>\n            </ion-col>\n            <ion-col class=\"ion-no-padding\" sizeLg=\"6\">\n              <mat-latlong-field\n                formControlName=\"longitude\"\n                type=\"longitude\"\n                [latLongPattern]=\"pattern\"\n                [defaultSign]=\"defaultSign\"\n                placeholder=\"Longitude\"\n                [appearance]=\"appearance\"\n                [required]=\"required\"\n              >\n                <mat-icon matPrefix>room</mat-icon>\n                <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                  <mat-icon>gps_fixed</mat-icon>\n                </button>\n              </mat-latlong-field>\n            </ion-col>\n          </ion-row>\n          <ion-row *ngIf=\"geoPositionMessage\">\n            <ion-col>{{ geoPositionMessage }}</ion-col>\n          </ion-row>\n        </ion-grid>\n      </ion-card-content>\n    </ion-card>\n  </form>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: MatLatLongField, selector: "mat-latlong-field", inputs: ["formControl", "formControlName", "type", "latLongPattern", "maxDecimals", "required", "floatLabel", "placeholder", "defaultSign", "autofocus", "mobile", "clearable", "class", "tabindex", "appearance", "readonly", "subscriptSizing"] }, { kind: "pipe", type: i3$1.JsonPipe, name: "json" }, { kind: "pipe", type: FormErrorPipe, name: "formError" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: FormGetGroupPipe, name: "formGetGroup" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LatLongTestPage, selector: "app-latlong-test", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Lat/Long field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <!-- Tab nav - desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'dev'\" (click)=\"toggleMode('dev')\">\n      <mat-label>Dev</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container ion-padding\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    @if (mode === 'mobile') {\n      <ng-container *ngTemplateOutlet=\"mainTest; context: { mobile: true }\"></ng-container>\n    } @else if (mode === 'desktop') {\n      <ng-container *ngTemplateOutlet=\"mainTest; context: { mobile: false }\"></ng-container>\n    } @else if (mode === 'dev') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <ion-button [disabled]=\"testUpdateDefaultSign === '-'\" (click)=\"testUpdateDefaultSign = '-'\">\n              Set default sign to \"-\"\n            </ion-button>\n          </ion-col>\n          <ion-col>\n            <ion-button [disabled]=\"testUpdateDefaultSign === '+'\" (click)=\"testUpdateDefaultSign = '+'\">\n              Set default sign to \"+\"\n            </ion-button>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <mat-checkbox (change)=\"toggleAppearance($event)\">Change apparence</mat-checkbox>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <mat-form-field [appearance]=\"appearance\" [subscriptSizing]=\"'dynamic'\">\n              <mat-label>LatLongFormat</mat-label>\n              <mat-select #selectLatLongFormat [(value)]=\"selectedFormat\">\n                <mat-option value=\"DDMM\" selected>DDMM</mat-option>\n                <mat-option value=\"DDMMSS\">DDMMSS</mat-option>\n                <mat-option value=\"DD\">DD</mat-option>\n              </mat-select>\n            </mat-form-field>\n          </ion-col>\n        </ion-row>\n        @switch (selectedFormat) {\n          @case ('DDMM') {\n            <ion-row>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: {\n                      formGroup: 'empty',\n                      latLongPattern: 'DDMM',\n                      required: false,\n                      defaultSign: testUpdateDefaultSign,\n                    }\n                  \"\n                  jjj\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: {\n                      formGroup: 'enable',\n                      latLongPattern: 'DDMM',\n                      required: true,\n                      defaultSign: testUpdateDefaultSign,\n                    }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <!-- <ion-col> -->\n              <!--   <ng-container -->\n              <!--     *ngTemplateOutlet=\"testV2; context: { formGroup: 'disable', latLongPattern: 'DDMM', required: true }\" -->\n              <!--   ></ng-container> -->\n              <!-- </ion-col> -->\n            </ion-row>\n          }\n          @case ('DDMMSS') {\n            <ion-row>\n              <!-- DDMMSS -->\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: {\n                      formGroup: 'empty',\n                      latLongPattern: 'DDMMSS',\n                      required: false,\n                      defaultSign: testUpdateDefaultSign,\n                    }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: {\n                      formGroup: 'enable',\n                      latLongPattern: 'DDMMSS',\n                      required: true,\n                      defaultSign: testUpdateDefaultSign,\n                    }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: {\n                      formGroup: 'disable',\n                      latLongPattern: 'DDMMSS',\n                      required: true,\n                      defaultSign: testUpdateDefaultSign,\n                    }\n                  \"\n                ></ng-container>\n              </ion-col>\n            </ion-row>\n          }\n          @case ('DD') {\n            <ion-row>\n              <!-- DDMMSS -->\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: {\n                      formGroup: 'empty',\n                      latLongPattern: 'DD',\n                      required: false,\n                      defaultSign: testUpdateDefaultSign,\n                    }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: {\n                      formGroup: 'enable',\n                      latLongPattern: 'DD',\n                      required: true,\n                      defaultSign: testUpdateDefaultSign,\n                    }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: {\n                      formGroup: 'disable',\n                      latLongPattern: 'DD',\n                      required: true,\n                      defaultSign: testUpdateDefaultSign,\n                    }\n                  \"\n                ></ng-container>\n              </ion-col>\n            </ion-row>\n          }\n        }\n      </ion-grid>\n\n      <ion-grid></ion-grid>\n    } @else {\n      <!-- Temporay TAB (for DEV) -->\n      <form *ngIf=\"form | formGetGroup: 'enable' as formGroup\" [formGroup]=\"formGroup\">\n        <ion-card>\n          <ion-card-header>\n            <ion-card-title>\n              <ion-label color=\"primary\">Required</ion-label>\n            </ion-card-title>\n            <ion-card-subtitle>\n              <ion-text color=\"medium\">\n                <small>\n                  <pre>formGroup.value: {{ formGroup.value | json }}</pre>\n                </small>\n              </ion-text>\n            </ion-card-subtitle>\n          </ion-card-header>\n          <ion-card-content>\n            <ion-grid class=\"ion-no-padding\">\n              <ion-row>\n                <ion-col>\n                  <mat-latlong-field\n                    formControlName=\"latitude\"\n                    type=\"latitude\"\n                    latLongPattern=\"DDMMSS\"\n                    placeholder=\"Latitude\"\n                    [appearance]=\"appearance\"\n                    [required]=\"true\"\n                    [clearable]=\"true\"\n                  >\n                    <mat-icon matPrefix>room</mat-icon>\n                    <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                      <mat-icon>gps_fixed</mat-icon>\n                    </button>\n                  </mat-latlong-field>\n                </ion-col>\n                <ion-col>\n                  <mat-latlong-field\n                    formControlName=\"longitude\"\n                    type=\"longitude\"\n                    latLongPattern=\"DDMMSS\"\n                    placeholder=\"Longitude\"\n                    [appearance]=\"appearance\"\n                    [required]=\"true\"\n                    [clearable]=\"true\"\n                  >\n                    <mat-icon matPrefix>room</mat-icon>\n                    <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                      <mat-icon>gps_fixed</mat-icon>\n                    </button>\n                  </mat-latlong-field>\n                </ion-col>\n              </ion-row>\n              <ion-row *ngIf=\"geoPositionMessage\">\n                <ion-col>{{ geoPositionMessage }}</ion-col>\n              </ion-row>\n            </ion-grid>\n          </ion-card-content>\n        </ion-card>\n      </form>\n    }\n  </form>\n</ion-content>\n\n<ng-template #mainTest let-mobile=\"mobile\">\n  <!-- Empty value -->\n  <form *ngIf=\"form | formGetGroup: 'empty' as formGroup\" [formGroup]=\"formGroup\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <mat-checkbox (change)=\"toggleAppearance($event)\">Change apparence</mat-checkbox>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Empty, with defaults</h4></ion-text>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <!-- DD Default sign -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DD, defaultSign '-'</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DD\"\n                      defaultSign=\"-\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DD\"\n                      defaultSign=\"-\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n                <ion-row *ngIf=\"geoPositionMessage\">\n                  <ion-col>{{ geoPositionMessage }}</ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- DDMM Default sign -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMM, defaultSign '+'</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMM\"\n                      defaultSign=\"+\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMM\"\n                      defaultSign=\"+\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- DDMMSS Default sign -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMMSS, defaultSign '+'</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMMSS\"\n                      defaultSign=\"+\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMMSS\"\n                      defaultSign=\"+\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n\n  <!-- Empty value -->\n  <form *ngIf=\"form | formGetGroup: 'emptyRequired' as formGroup\" [formGroup]=\"formGroup\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Empty, required (no defaults)</h4></ion-text>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <!-- DD -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DD, required</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DD\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"true\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DD\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"true\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n                <ion-row *ngIf=\"geoPositionMessage\">\n                  <ion-col>{{ geoPositionMessage }}</ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- DDMM  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMM, required</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"true\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"true\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n  <form *ngIf=\"form | formGetGroup: 'notRequired' as formGroup\" [formGroup]=\"formGroup\">\n    <ion-grid>\n      <!-- With value -->\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Empty, not required</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <!-- DD -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DD, not required</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DD\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"false\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DD\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"false\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n                <ion-row *ngIf=\"geoPositionMessage\">\n                  <ion-col>{{ geoPositionMessage }}</ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- DDMM -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMM, not required</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"false\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"false\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n                <ion-row *ngIf=\"geoPositionMessage\">\n                  <ion-col>{{ geoPositionMessage }}</ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n  <form *ngIf=\"form | formGetGroup: 'enable' as formGroup\" [formGroup]=\"formGroup\">\n    <ion-grid>\n      <!-- With value -->\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>With value</h4></ion-text>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <!-- DD -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DD</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DD\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    ></mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DD\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    ></mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- DDMMSS -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMM</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    ></mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    ></mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- DDMMSS -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMMSS</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMMSS\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    ></mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMMSS\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    ></mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n\n  <!-- Disable  -->\n  <form *ngIf=\"form | formGetGroup: 'disable' as formGroup\" [formGroup]=\"formGroup\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Disabled control</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Disabled control</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"false\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <mat-icon matSuffix>gps_fixed</mat-icon>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Readonly (control is enable)</ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-checkbox\n                (change)=\"readonlyField.readonly = $event.checked\"\n                [checked]=\"readonlyField.readonly\"\n              ></mat-checkbox>\n\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      #readonlyField\n                      [formControl]=\"form | formGetControl: 'enable.latitude'\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Latitude\"\n                      [readonly]=\"true\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <mat-icon matSuffix>gps_fixed</mat-icon>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">With hint</ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-latlong-field\n                #readonlyField\n                [formControl]=\"form | formGetControl: 'enable.latitude'\"\n                type=\"latitude\"\n                latLongPattern=\"DDMM\"\n                placeholder=\"Latitude\"\n                [appearance]=\"appearance\"\n                [mobile]=\"mobile\"\n              >\n                <mat-hint align=\"end\">This is a long long hint</mat-hint>\n              </mat-latlong-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n</ng-template>\n\n<ng-template\n  #newComponent\n  let-formGroupName=\"formGroup\"\n  let-pattern=\"latLongPattern\"\n  let-required=\"required\"\n  let-defaultSign=\"defaultSign\"\n>\n  <form *ngIf=\"form | formGetGroup: formGroupName as formGroup\" [formGroup]=\"formGroup\">\n    <ion-card>\n      <ion-card-header>\n        <ion-card-title>\n          <ion-label color=\"primary\">{{ formGroupName }}</ion-label>\n        </ion-card-title>\n        <ion-card-subtitle>\n          <ion-grid class=\"ion-no-padding\">\n            <ion-row class=\"ion-no-padding\">\n              <ion-col class=\"ion-no-padding\">\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ formGroup.value | json }}</pre>\n                    <pre>invalid ? : {{ (formGroup | formGetControl: 'latitude').invalid }}</pre>\n                    <pre>touched ? : {{ (formGroup | formGetControl: 'latitude').touched }}</pre>\n                    <pre>errors : {{ formGroup | formGetGroup: 'latitude' | formError }}</pre>\n                    <pre>defaultSign : {{ defaultSign }}</pre>\n                  </small>\n                </ion-text>\n              </ion-col>\n            </ion-row>\n            <ion-row class=\"ion-no-padding\">\n              <ion-col class=\"ion-no-padding\" sizeLg=\"6\">\n                <mat-latlong-field\n                  formControlName=\"latitude\"\n                  type=\"latitude\"\n                  [readonly]=\"true\"\n                  [latLongPattern]=\"pattern\"\n                  [defaultSign]=\"defaultSign\"\n                  placeholder=\"Latitude\"\n                  [appearance]=\"appearance\"\n                ></mat-latlong-field>\n              </ion-col>\n              <ion-col sizeLg=\"6\">\n                <mat-latlong-field\n                  formControlName=\"longitude\"\n                  type=\"longitude\"\n                  [readonly]=\"true\"\n                  [latLongPattern]=\"pattern\"\n                  [defaultSign]=\"defaultSign\"\n                  placeholder=\"Longitude\"\n                  [appearance]=\"appearance\"\n                ></mat-latlong-field>\n              </ion-col>\n            </ion-row>\n          </ion-grid>\n        </ion-card-subtitle>\n      </ion-card-header>\n      <ion-card-content>\n        <ion-grid class=\"ion-no-padding\">\n          <ion-row>\n            <ion-col class=\"ion-no-padding\" sizeLg=\"6\">\n              <mat-latlong-field\n                formControlName=\"latitude\"\n                type=\"latitude\"\n                [latLongPattern]=\"pattern\"\n                [defaultSign]=\"defaultSign\"\n                placeholder=\"Latitude\"\n                [appearance]=\"appearance\"\n                [required]=\"required\"\n              >\n                <mat-icon matPrefix>room</mat-icon>\n                <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                  <mat-icon>gps_fixed</mat-icon>\n                </button>\n              </mat-latlong-field>\n            </ion-col>\n            <ion-col class=\"ion-no-padding\" sizeLg=\"6\">\n              <mat-latlong-field\n                formControlName=\"longitude\"\n                type=\"longitude\"\n                [latLongPattern]=\"pattern\"\n                [defaultSign]=\"defaultSign\"\n                placeholder=\"Longitude\"\n                [appearance]=\"appearance\"\n                [required]=\"required\"\n              >\n                <mat-icon matPrefix>room</mat-icon>\n                <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                  <mat-icon>gps_fixed</mat-icon>\n                </button>\n              </mat-latlong-field>\n            </ion-col>\n          </ion-row>\n          <ion-row *ngIf=\"geoPositionMessage\">\n            <ion-col>{{ geoPositionMessage }}</ion-col>\n          </ion-row>\n        </ion-grid>\n      </ion-card-content>\n    </ion-card>\n  </form>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i8.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i8.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: MatLatLongField, selector: "mat-latlong-field", inputs: ["formControl", "formControlName", "type", "latLongPattern", "maxDecimals", "required", "floatLabel", "placeholder", "defaultSign", "autofocus", "mobile", "clearable", "class", "tabindex", "appearance", "readonly", "subscriptSizing"] }, { kind: "pipe", type: i3$1.JsonPipe, name: "json" }, { kind: "pipe", type: FormErrorPipe, name: "formError" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: FormGetGroupPipe, name: "formGetGroup" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LatLongTestPage, decorators: [{
             type: Component,
@@ -48015,7 +48042,7 @@ class MatBadgeTestPage {
         this.cd.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatBadgeTestPage, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MatBadgeTestPage, selector: "mat-badge-test", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>matBadgeIcon directive</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n  <!-- small badge -->\n  <p>\n    <ion-text color=\"tertiary\">\n      <span appBadge appBadgeMatIcon=\"check\" appBadgeSize=\"small\" appBadgeColor=\"accent\" appBadgeOverlap=\"false\">\n        Small badge\n      </span>\n    </ion-text>\n  </p>\n\n  <!-- small badge with text -->\n  <p>\n    <ion-text color=\"tertiary\">\n      <span [appBadge]=\"0\" appBadgeSize=\"small\" appBadgeColor=\"accent\" appBadgeOverlap=\"false\">\n        Small badge with text 0\n      </span>\n    </ion-text>\n  </p>\n\n  <!-- medium badge -->\n  <p>\n    <ion-text\n      appBadge\n      appBadgeMatIcon=\"check\"\n      appBadgeSize=\"medium\"\n      [appBadgeColor]=\"'tertiary' | matColor\"\n      appBadgeOverlap=\"false\"\n    >\n      Medium badge\n    </ion-text>\n  </p>\n\n  <!-- small badge -->\n  <p>\n    <ion-label appBadge appBadgeMatIcon=\"close\" appBadgeSize=\"large\" appBadgeOverlap=\"false\">Large badge</ion-label>\n  </p>\n\n  <!-- default size badge -->\n  <p>\n    <ion-label appBadge appBadgeMatIcon=\"check\" [appBadgeColor]=\"'success' | matColor\" appBadgeOverlap=\"false\">\n      Badge (no size, no color)\n    </ion-label>\n  </p>\n\n  <!-- ion icon -->\n  <p>\n    <ion-label appBadge appBadgeIcon=\"checkmark\" [appBadgeColor]=\"'success' | matColor\" appBadgeOverlap=\"false\">\n      Badge with ion-icon\n    </ion-label>\n  </p>\n\n  <!-- ion icon clear -->\n  <p>\n    <ion-label\n      appBadge\n      appBadgeIcon=\"checkmark-circle\"\n      [appBadgeColor]=\"'tertiary' | matColor\"\n      appBadgeFill=\"clear\"\n      appBadgeOverlap=\"false\"\n    >\n      Badge with clear icon\n    </ion-label>\n  </p>\n\n  <!-- changing text-->\n  <ion-row>\n    <ion-col>\n      <ion-label\n        appBadge\n        appBadgeIcon=\"checkmark-circle\"\n        [appBadgeColor]=\"'tertiary' | matColor\"\n        appBadgeFill=\"clear\"\n        appBadgeOverlap=\"false\"\n      >\n        {{ userText }}\n      </ion-label>\n    </ion-col>\n    <ion-col>\n      <input type=\"text\" [value]=\"userText\" (input)=\"onInputChanged($event)\" />\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col>Configurable example :</ion-col>\n  </ion-row>\n  <ion-row class=\"ion-no-padding\">\n    <ion-col size=\"auto\">\n      <mat-icon\n        [style.color]=\"'var(--ion-color-secondary)'\"\n        appBadge\n        [appBadgeIcon]=\"$icon | async\"\n        [appBadgeColor]=\"$color | async | matColor\"\n        [appBadgeHidden]=\"$hidden | async\"\n        [appBadgeFill]=\"$fill | async\"\n        [appBadgeSize]=\"$size | async\"\n        appBadgeOverlap=\"true\"\n        appBadgePosition=\"above before\"\n      >\n        <ion-icon slot=\"icon-only\" [color]=\"'secondary'\" name=\"navigate\"></ion-icon>\n      </mat-icon>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeColor</mat-label>\n        <mat-select [value]=\"$color.value\" (selectionChange)=\"this.$color.next($event.value)\">\n          <mat-option [value]=\"'primary'\">primary</mat-option>\n          <mat-option [value]=\"'secondary'\">secondary</mat-option>\n          <mat-option [value]=\"'tertiary'\">tertiary</mat-option>\n          <mat-option [value]=\"'danger'\">danger</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeIcon</mat-label>\n        <mat-select [value]=\"$icon.value\" (selectionChange)=\"this.$icon.next($event.value)\">\n          <mat-option [value]=\"'checkmark-circle'\">checkmark-circle</mat-option>\n          <mat-option [value]=\"'alert-circle'\">alert-circle</mat-option>\n          <mat-option [value]=\"'alert'\">alert</mat-option>\n          <mat-option [value]=\"'flag'\">flag</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeSize</mat-label>\n        <mat-select [value]=\"$size.value\" (selectionChange)=\"this.$size.next($event.value)\">\n          <mat-option [value]=\"'large'\">large</mat-option>\n          <mat-option [value]=\"'medium'\">medium</mat-option>\n          <mat-option [value]=\"'small'\">small</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeFill</mat-label>\n        <mat-select [value]=\"$fill.value\" (selectionChange)=\"this.$fill.next($event.value)\">\n          <mat-option [value]=\"'clear'\">clear</mat-option>\n          <mat-option [value]=\"'solid'\">solid</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeHidden</mat-label>\n        <mat-select [value]=\"$hidden.value\" (selectionChange)=\"this.$hidden.next($event.value)\">\n          <mat-option [value]=\"true\">true</mat-option>\n          <mat-option [value]=\"false\">false</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-raised-button:</p>\n    </ion-col>\n    <ion-col>\n      <button\n        mat-raised-button\n        color=\"primary\"\n        [appBadgeIcon]=\"$icon | async\"\n        [appBadgeColor]=\"$color | async | matColor\"\n        [appBadgeHidden]=\"$hidden | async\"\n        [appBadgeFill]=\"$fill | async\"\n        [appBadgeSize]=\"$size | async\"\n        appBadgeOverlap=\"true\"\n        appBadgePosition=\"below after\"\n      >\n        {{ userText }}\n      </button>\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-button with mat-label:</p>\n    </ion-col>\n    <ion-col>\n      <button\n        mat-button\n        color=\"primary\"\n        class=\"ion-no-padding\"\n        [appBadgeIcon]=\"$icon | async\"\n        [appBadgeColor]=\"$color | async | matColor\"\n        [appBadgeHidden]=\"$hidden | async\"\n        [appBadgeFill]=\"$fill | async\"\n        [appBadgeSize]=\"$size | async\"\n        matBadgeOverlap=\"true\"\n        matBadgePosition=\"above after\"\n      >\n        {{ userText }}\n      </button>\n    </ion-col>\n  </ion-row>\n\n  <h4>Angular Material Badge (standard way)</h4>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-icon:</p>\n    </ion-col>\n    <ion-col>\n      <mat-icon\n        [style.color]=\"'var(--ion-color-secondary)'\"\n        [matBadge]=\"'!'\"\n        [matBadgeColor]=\"$color | async | matColor\"\n        [matBadgeHidden]=\"$hidden | async\"\n        [matBadgeSize]=\"$size | async\"\n        matBadgeOverlap=\"true\"\n      >\n        <ion-icon slot=\"icon-only\" [color]=\"'secondary'\" name=\"navigate\"></ion-icon>\n      </mat-icon>\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-button:</p>\n    </ion-col>\n    <ion-col>\n      <button\n        mat-raised-button\n        color=\"primary\"\n        [matBadge]=\"matBadgeContent\"\n        [matBadgeColor]=\"$color | async | matColor\"\n        [matBadgeHidden]=\"$hidden | async\"\n        [matBadgeSize]=\"$size | async\"\n        matBadgeOverlap=\"true\"\n        matBadgePosition=\"above after\"\n      >\n        {{ userText }}\n      </button>\n    </ion-col>\n\n    <ion-col>\n      <input type=\"text\" [value]=\"matBadgeContent\" (input)=\"onMatBadgeContentChanged($event)\" />\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-button</p>\n    </ion-col>\n    <ion-col>\n      <button\n        mat-button\n        color=\"primary\"\n        [matBadge]=\"matBadgeContent\"\n        [matBadgeColor]=\"$color | async | matColor\"\n        [matBadgeHidden]=\"$hidden | async\"\n        [matBadgeSize]=\"$size | async\"\n        matBadgeOverlap=\"true\"\n        matBadgePosition=\"after\"\n      >\n        {{ userText }}\n      </button>\n    </ion-col>\n  </ion-row>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonBackButton, selector: "ion-back-button" }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i8.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: BadgeDirective, selector: "[appBadge], [appBadgeIcon], [appBadgeMatIcon]", inputs: ["appBadge", "appBadgeDisabled", "appBadgeSize", "appBadgeColor", "appBadgeFill", "appBadgeMatIcon", "appBadgeIcon", "appBadgeHidden", "appBadgeOverlap", "appBadgePosition"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: MatColorPipe, name: "matColor" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MatBadgeTestPage, selector: "mat-badge-test", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>matBadgeIcon directive</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n  <!-- small badge -->\n  <p>\n    <ion-text color=\"tertiary\">\n      <span appBadge appBadgeMatIcon=\"check\" appBadgeSize=\"small\" appBadgeColor=\"accent\" appBadgeOverlap=\"false\">\n        Small badge\n      </span>\n    </ion-text>\n  </p>\n\n  <!-- small badge with text -->\n  <p>\n    <ion-text color=\"tertiary\">\n      <span [appBadge]=\"0\" appBadgeSize=\"small\" appBadgeColor=\"accent\" appBadgeOverlap=\"false\">\n        Small badge with text 0\n      </span>\n    </ion-text>\n  </p>\n\n  <!-- medium badge -->\n  <p>\n    <ion-text\n      appBadge\n      appBadgeMatIcon=\"check\"\n      appBadgeSize=\"medium\"\n      [appBadgeColor]=\"'tertiary' | matColor\"\n      appBadgeOverlap=\"false\"\n    >\n      Medium badge\n    </ion-text>\n  </p>\n\n  <!-- small badge -->\n  <p>\n    <ion-label appBadge appBadgeMatIcon=\"close\" appBadgeSize=\"large\" appBadgeOverlap=\"false\">Large badge</ion-label>\n  </p>\n\n  <!-- default size badge -->\n  <p>\n    <ion-label appBadge appBadgeMatIcon=\"check\" [appBadgeColor]=\"'success' | matColor\" appBadgeOverlap=\"false\">\n      Badge (no size, no color)\n    </ion-label>\n  </p>\n\n  <!-- ion icon -->\n  <p>\n    <ion-label appBadge appBadgeIcon=\"checkmark\" [appBadgeColor]=\"'success' | matColor\" appBadgeOverlap=\"false\">\n      Badge with ion-icon\n    </ion-label>\n  </p>\n\n  <!-- ion icon clear -->\n  <p>\n    <ion-label\n      appBadge\n      appBadgeIcon=\"checkmark-circle\"\n      [appBadgeColor]=\"'tertiary' | matColor\"\n      appBadgeFill=\"clear\"\n      appBadgeOverlap=\"false\"\n    >\n      Badge with clear icon\n    </ion-label>\n  </p>\n\n  <!-- changing text-->\n  <ion-row>\n    <ion-col>\n      <ion-label\n        appBadge\n        appBadgeIcon=\"checkmark-circle\"\n        [appBadgeColor]=\"'tertiary' | matColor\"\n        appBadgeFill=\"clear\"\n        appBadgeOverlap=\"false\"\n      >\n        {{ userText }}\n      </ion-label>\n    </ion-col>\n    <ion-col>\n      <input type=\"text\" [value]=\"userText\" (input)=\"onInputChanged($event)\" />\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col>Configurable example :</ion-col>\n  </ion-row>\n  <ion-row class=\"ion-no-padding\">\n    <ion-col size=\"auto\">\n      <mat-icon\n        [style.color]=\"'var(--ion-color-secondary)'\"\n        appBadge\n        [appBadgeIcon]=\"$icon | async\"\n        [appBadgeColor]=\"$color | async | matColor\"\n        [appBadgeHidden]=\"$hidden | async\"\n        [appBadgeFill]=\"$fill | async\"\n        [appBadgeSize]=\"$size | async\"\n        appBadgeOverlap=\"true\"\n        appBadgePosition=\"above before\"\n      >\n        <ion-icon slot=\"icon-only\" [color]=\"'secondary'\" name=\"navigate\"></ion-icon>\n      </mat-icon>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeColor</mat-label>\n        <mat-select [value]=\"$color.value\" (selectionChange)=\"this.$color.next($event.value)\">\n          <mat-option [value]=\"'primary'\">primary</mat-option>\n          <mat-option [value]=\"'secondary'\">secondary</mat-option>\n          <mat-option [value]=\"'tertiary'\">tertiary</mat-option>\n          <mat-option [value]=\"'danger'\">danger</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeIcon</mat-label>\n        <mat-select [value]=\"$icon.value\" (selectionChange)=\"this.$icon.next($event.value)\">\n          <mat-option [value]=\"'checkmark-circle'\">checkmark-circle</mat-option>\n          <mat-option [value]=\"'alert-circle'\">alert-circle</mat-option>\n          <mat-option [value]=\"'alert'\">alert</mat-option>\n          <mat-option [value]=\"'flag'\">flag</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeSize</mat-label>\n        <mat-select [value]=\"$size.value\" (selectionChange)=\"this.$size.next($event.value)\">\n          <mat-option [value]=\"'large'\">large</mat-option>\n          <mat-option [value]=\"'medium'\">medium</mat-option>\n          <mat-option [value]=\"'small'\">small</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeFill</mat-label>\n        <mat-select [value]=\"$fill.value\" (selectionChange)=\"this.$fill.next($event.value)\">\n          <mat-option [value]=\"'clear'\">clear</mat-option>\n          <mat-option [value]=\"'solid'\">solid</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeHidden</mat-label>\n        <mat-select [value]=\"$hidden.value\" (selectionChange)=\"this.$hidden.next($event.value)\">\n          <mat-option [value]=\"true\">true</mat-option>\n          <mat-option [value]=\"false\">false</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-raised-button:</p>\n    </ion-col>\n    <ion-col>\n      <button\n        mat-raised-button\n        color=\"primary\"\n        [appBadgeIcon]=\"$icon | async\"\n        [appBadgeColor]=\"$color | async | matColor\"\n        [appBadgeHidden]=\"$hidden | async\"\n        [appBadgeFill]=\"$fill | async\"\n        [appBadgeSize]=\"$size | async\"\n        appBadgeOverlap=\"true\"\n        appBadgePosition=\"below after\"\n      >\n        {{ userText }}\n      </button>\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-button with mat-label:</p>\n    </ion-col>\n    <ion-col>\n      <button\n        mat-button\n        color=\"primary\"\n        class=\"ion-no-padding\"\n        [appBadgeIcon]=\"$icon | async\"\n        [appBadgeColor]=\"$color | async | matColor\"\n        [appBadgeHidden]=\"$hidden | async\"\n        [appBadgeFill]=\"$fill | async\"\n        [appBadgeSize]=\"$size | async\"\n        matBadgeOverlap=\"true\"\n        matBadgePosition=\"above after\"\n      >\n        {{ userText }}\n      </button>\n    </ion-col>\n  </ion-row>\n\n  <h4>Angular Material Badge (standard way)</h4>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-icon:</p>\n    </ion-col>\n    <ion-col>\n      <mat-icon\n        [style.color]=\"'var(--ion-color-secondary)'\"\n        [matBadge]=\"'!'\"\n        [matBadgeColor]=\"$color | async | matColor\"\n        [matBadgeHidden]=\"$hidden | async\"\n        [matBadgeSize]=\"$size | async\"\n        matBadgeOverlap=\"true\"\n      >\n        <ion-icon slot=\"icon-only\" [color]=\"'secondary'\" name=\"navigate\"></ion-icon>\n      </mat-icon>\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-button:</p>\n    </ion-col>\n    <ion-col>\n      <button\n        mat-raised-button\n        color=\"primary\"\n        [matBadge]=\"matBadgeContent\"\n        [matBadgeColor]=\"$color | async | matColor\"\n        [matBadgeHidden]=\"$hidden | async\"\n        [matBadgeSize]=\"$size | async\"\n        matBadgeOverlap=\"true\"\n        matBadgePosition=\"above after\"\n      >\n        {{ userText }}\n      </button>\n    </ion-col>\n\n    <ion-col>\n      <input type=\"text\" [value]=\"matBadgeContent\" (input)=\"onMatBadgeContentChanged($event)\" />\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-button</p>\n    </ion-col>\n    <ion-col>\n      <button\n        mat-button\n        color=\"primary\"\n        [matBadge]=\"matBadgeContent\"\n        [matBadgeColor]=\"$color | async | matColor\"\n        [matBadgeHidden]=\"$hidden | async\"\n        [matBadgeSize]=\"$size | async\"\n        matBadgeOverlap=\"true\"\n        matBadgePosition=\"after\"\n      >\n        {{ userText }}\n      </button>\n    </ion-col>\n  </ion-row>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonBackButton, selector: "ion-back-button" }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i9.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: BadgeDirective, selector: "[appBadge], [appBadgeIcon], [appBadgeMatIcon]", inputs: ["appBadge", "appBadgeDisabled", "appBadgeSize", "appBadgeColor", "appBadgeFill", "appBadgeMatIcon", "appBadgeIcon", "appBadgeHidden", "appBadgeOverlap", "appBadgePosition"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: MatColorPipe, name: "matColor" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatBadgeTestPage, decorators: [{
             type: Component,
@@ -48087,7 +48114,7 @@ class DurationTestPage {
     /* -- protected methods -- */
     Number = Number;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DurationTestPage, deps: [{ token: i1$3.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DurationTestPage, selector: "app-duration-test", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Duration field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <!-- Tab nav - desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    @if (mode === 'desktop') {\n      <ion-grid>\n        <!-- Desktop mode -->\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Desktop mode</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>\n                        {{ stringify(form.controls.empty.value) }}\n                      </pre>\n                      <br />\n                      <pre>\n                        formControl.valid? {{ form.controls.empty?.valid }}\n                        textControl.valid? {{ desktopEmptyField.textControl?.valid }}\n                      </pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-duration-field formControlName=\"empty\" #desktopEmptyField placeholder=\"Duration\" [clearable]=\"true\">\n                  <ion-icon matPrefix name=\"hourglass\"></ion-icon>\n                </mat-duration-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.enable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-duration-field formControlName=\"enable\" placeholder=\"Duration\" [required]=\"true\" [clearable]=\"true\">\n                  <ion-icon matPrefix name=\"hourglass\"></ion-icon>\n                </mat-duration-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.disable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-duration-field formControlName=\"disable\" placeholder=\"Duration\" [required]=\"true\">\n                  <ion-icon matPrefix name=\"hourglass\"></ion-icon>\n                </mat-duration-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Readonly  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-checkbox\n                  (change)=\"desktopReadonlyField.readonly = $event.checked\"\n                  [checked]=\"desktopReadonlyField.readonly\"\n                ></mat-checkbox>\n                <mat-duration-field\n                  #desktopReadonlyField\n                  formControlName=\"readonly\"\n                  placeholder=\"Duration\"\n                  [readonly]=\"true\"\n                  [clearable]=\"true\"\n                  >\n                  <ion-icon matPrefix name=\"hourglass\"></ion-icon>\n                </mat-duration-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Duration to hours format</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>Value sexagesimal mode: {{ form.controls.duration.value | duration }}</pre>\n                      <pre>Value set: {{ stringify(form.controls.duration.value) }}</pre>\n                      <pre>dirty: {{ form.controls.duration.dirty }}</pre>\n                      <pre>valid: {{ form.controls.duration.valid }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-duration-field\n                  #duration\n                  formControlName=\"duration\"\n                  placeholder=\"Duration\"\n                >\n                </mat-duration-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n  </form>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: MatDuration, selector: "mat-duration-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "readonly", "required", "compact", "maxDecimals", "placeholderChar", "tabindex", "clearable"] }, { kind: "pipe", type: DurationPipe, name: "duration" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DurationTestPage, selector: "app-duration-test", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Duration field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <!-- Tab nav - desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    @if (mode === 'desktop') {\n      <ion-grid>\n        <!-- Desktop mode -->\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Desktop mode</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>\n                        {{ stringify(form.controls.empty.value) }}\n                      </pre>\n                      <br />\n                      <pre>\n                        formControl.valid? {{ form.controls.empty?.valid }}\n                        textControl.valid? {{ desktopEmptyField.textControl?.valid }}\n                      </pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-duration-field formControlName=\"empty\" #desktopEmptyField placeholder=\"Duration\" [clearable]=\"true\">\n                  <ion-icon matPrefix name=\"hourglass\"></ion-icon>\n                </mat-duration-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.enable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-duration-field formControlName=\"enable\" placeholder=\"Duration\" [required]=\"true\" [clearable]=\"true\">\n                  <ion-icon matPrefix name=\"hourglass\"></ion-icon>\n                </mat-duration-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.disable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-duration-field formControlName=\"disable\" placeholder=\"Duration\" [required]=\"true\">\n                  <ion-icon matPrefix name=\"hourglass\"></ion-icon>\n                </mat-duration-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Readonly  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-checkbox\n                  (change)=\"desktopReadonlyField.readonly = $event.checked\"\n                  [checked]=\"desktopReadonlyField.readonly\"\n                ></mat-checkbox>\n                <mat-duration-field\n                  #desktopReadonlyField\n                  formControlName=\"readonly\"\n                  placeholder=\"Duration\"\n                  [readonly]=\"true\"\n                  [clearable]=\"true\"\n                  >\n                  <ion-icon matPrefix name=\"hourglass\"></ion-icon>\n                </mat-duration-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Duration to hours format</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>Value sexagesimal mode: {{ form.controls.duration.value | duration }}</pre>\n                      <pre>Value set: {{ stringify(form.controls.duration.value) }}</pre>\n                      <pre>dirty: {{ form.controls.duration.dirty }}</pre>\n                      <pre>valid: {{ form.controls.duration.valid }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-duration-field\n                  #duration\n                  formControlName=\"duration\"\n                  placeholder=\"Duration\"\n                >\n                </mat-duration-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n  </form>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i8.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i8.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: MatDuration, selector: "mat-duration-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "readonly", "required", "compact", "maxDecimals", "placeholderChar", "tabindex", "clearable"] }, { kind: "pipe", type: DurationPipe, name: "duration" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DurationTestPage, decorators: [{
             type: Component,
@@ -48234,7 +48261,7 @@ class BooleanTestPage extends AppForm {
         this.form.get(path)?.setValue(null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BooleanTestPage, deps: [{ token: i0.Injector }, { token: i1$3.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: BooleanTestPage, selector: "app-boolean-test-page", usesInheritance: true, ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Boolean field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    @for (style of styles; track style) {\n      <a mat-tab-link [active]=\"mode === style\" (click)=\"toggleMode(style)\">\n        <mat-label>{{ style | capitalize }}</mat-label>\n      </a>\n    }\n\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temp</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel [formGroup]=\"form\" class=\"form-container ion-padding\">\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row>\n        <ion-col size=\"4\">\n          <mat-form-field>\n            <mat-label>Float label</mat-label>\n            <mat-select [(value)]=\"floatLabel\">\n              @for (floatLabel of floatLabels; track floatLabel) {\n                <mat-option [value]=\"floatLabel\">{{ floatLabel | capitalize }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n    @if (mode === 'temp') {\n      <ng-container [ngTemplateOutlet]=\"temp\"></ng-container>\n    } @else {\n      @for (style of styles; track style) {\n        <ng-container [ngTemplateOutlet]=\"components\" [ngTemplateOutletContext]=\"{ style: style }\"></ng-container>\n      }\n    }\n\n    <ng-template #components let-style=\"style\">\n      @if (style === mode) {\n        <ion-grid>\n          <ion-row>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Disabled empty</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.disabledEmpty?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    [floatLabel]=\"floatLabel\"\n                    formControlName=\"disabledEmpty\"\n                    placeholder=\"Placeholder\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Disabled false</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.disabledFalse?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    [floatLabel]=\"floatLabel\"\n                    formControlName=\"disabledFalse\"\n                    placeholder=\"Placeholder\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Disabled true</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.disabledTrue?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    [floatLabel]=\"floatLabel\"\n                    formControlName=\"disabledTrue\"\n                    placeholder=\"Placeholder\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Disabled + readonly</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.disabledTrue?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    [floatLabel]=\"floatLabel\"\n                    formControlName=\"disabledTrue\"\n                    placeholder=\"Placeholder\"\n                    readonly=\"true\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n          </ion-row>\n          <ion-row>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled empty</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledEmpty?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    [floatLabel]=\"floatLabel\"\n                    formControlName=\"enabledEmpty\"\n                    placeholder=\"Placeholder\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled empty + required</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{\n                          form.controls.enabledEmptyRequired?.value | json\n                        }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    [floatLabel]=\"floatLabel\"\n                    formControlName=\"enabledEmptyRequired\"\n                    placeholder=\"Placeholder\"\n                    [required]=\"true\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled false</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledFalse?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    [floatLabel]=\"floatLabel\"\n                    formControlName=\"enabledFalse\"\n                    placeholder=\"Placeholder\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled true</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledTrue?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    [floatLabel]=\"floatLabel\"\n                    formControlName=\"enabledTrue\"\n                    placeholder=\"Placeholder\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n          </ion-row>\n          <ion-row>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled empty (no placeholder)</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledEmpty?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    [floatLabel]=\"floatLabel\"\n                    formControlName=\"enabledEmpty\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled false (no placeholder)</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledFalse?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    [floatLabel]=\"floatLabel\"\n                    formControlName=\"enabledFalse\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled true (no placeholder)</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledTrue?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    [floatLabel]=\"floatLabel\"\n                    formControlName=\"enabledTrue\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n          </ion-row>\n\n          <ion-row>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled empty + clearable</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledEmpty?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    [floatLabel]=\"floatLabel\"\n                    formControlName=\"enabledEmpty\"\n                    placeholder=\"Placeholder\"\n                    [clearable]=\"true\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled false + floatLabel=\"always\"</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledFalse?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    [floatLabel]=\"floatLabel\"\n                    formControlName=\"enabledFalse\"\n                    placeholder=\"Placeholder\"\n                    floatLabel=\"always\"\n                    [clearable]=\"true\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">appearance=\"outline\" + icon + clearable</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledTrue?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    [floatLabel]=\"floatLabel\"\n                    formControlName=\"enabledTrue\"\n                    placeholder=\"Placeholder\"\n                    appearance=\"outline\"\n                    [clearable]=\"true\"\n                  >\n                    <mat-icon matPrefix>room</mat-icon>\n                  </mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n\n            @if (style === 'button') {\n              <ion-col size=\"4\">\n                <ion-card>\n                  <ion-card-header>\n                    <ion-card-title>\n                      <ion-label color=\"primary\">Enabled empty + showButtonIcons: false</ion-label>\n                    </ion-card-title>\n                    <ion-card-subtitle>\n                      <ion-text color=\"medium\">\n                        <small>\n                          <pre style=\"white-space: break-spaces\">{{ form.controls.enabledEmpty?.value | json }}</pre>\n                        </small>\n                      </ion-text>\n                    </ion-card-subtitle>\n                  </ion-card-header>\n                  <ion-card-content>\n                    <mat-boolean-field\n                      [style]=\"style\"\n                      [floatLabel]=\"floatLabel\"\n                      formControlName=\"enabledEmpty\"\n                      placeholder=\"Placeholder\"\n                      [showButtonIcons]=\"false\"\n                    ></mat-boolean-field>\n                  </ion-card-content>\n                </ion-card>\n              </ion-col>\n            }\n          </ion-row>\n        </ion-grid>\n      }\n    </ng-template>\n\n    <ng-template #temp>\n      <ion-grid>\n        <ion-row>\n          <ion-col size=\"4\">\n            <mat-boolean-field\n              [style]=\"'radio'\"\n              [floatLabel]=\"floatLabel\"\n              formControlName=\"enabledEmpty\"\n              placeholder=\"Placeholder\"\n            ></mat-boolean-field>\n          </ion-col>\n          <ion-col size=\"4\">\n            <mat-boolean-field\n              [style]=\"'checkbox'\"\n              [floatLabel]=\"floatLabel\"\n              formControlName=\"enabledEmpty\"\n              placeholder=\"Placeholder\"\n            ></mat-boolean-field>\n          </ion-col>\n          <ion-col size=\"4\">\n            <mat-boolean-field\n              [style]=\"'button'\"\n              [floatLabel]=\"floatLabel\"\n              formControlName=\"enabledEmpty\"\n              placeholder=\"Placeholder\"\n            ></mat-boolean-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </ng-template>\n  </form>\n</ion-content>\n", dependencies: [{ kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: MatBooleanField, selector: "mat-boolean-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "subscriptSizing", "readonly", "required", "compact", "autofocus", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "clearable", "labelPosition", "tabindex", "showRadio", "value"], outputs: ["keyup.enter", "focus", "blur"] }, { kind: "pipe", type: i3$1.JsonPipe, name: "json" }, { kind: "pipe", type: CapitalizePipe, name: "capitalize" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: BooleanTestPage, selector: "app-boolean-test-page", usesInheritance: true, ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Boolean field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    @for (style of styles; track style) {\n      <a mat-tab-link [active]=\"mode === style\" (click)=\"toggleMode(style)\">\n        <mat-label>{{ style | capitalize }}</mat-label>\n      </a>\n    }\n\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temp</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel [formGroup]=\"form\" class=\"form-container ion-padding\">\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row>\n        <ion-col size=\"4\">\n          <mat-form-field>\n            <mat-label>Float label</mat-label>\n            <mat-select [(value)]=\"floatLabel\">\n              @for (floatLabel of floatLabels; track floatLabel) {\n                <mat-option [value]=\"floatLabel\">{{ floatLabel | capitalize }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n    @if (mode === 'temp') {\n      <ng-container [ngTemplateOutlet]=\"temp\"></ng-container>\n    } @else {\n      @for (style of styles; track style) {\n        <ng-container [ngTemplateOutlet]=\"components\" [ngTemplateOutletContext]=\"{ style: style }\"></ng-container>\n      }\n    }\n\n    <ng-template #components let-style=\"style\">\n      @if (style === mode) {\n        <ion-grid>\n          <ion-row>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Disabled empty</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.disabledEmpty?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    [floatLabel]=\"floatLabel\"\n                    formControlName=\"disabledEmpty\"\n                    placeholder=\"Placeholder\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Disabled false</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.disabledFalse?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    [floatLabel]=\"floatLabel\"\n                    formControlName=\"disabledFalse\"\n                    placeholder=\"Placeholder\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Disabled true</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.disabledTrue?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    [floatLabel]=\"floatLabel\"\n                    formControlName=\"disabledTrue\"\n                    placeholder=\"Placeholder\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Disabled + readonly</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.disabledTrue?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    [floatLabel]=\"floatLabel\"\n                    formControlName=\"disabledTrue\"\n                    placeholder=\"Placeholder\"\n                    readonly=\"true\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n          </ion-row>\n          <ion-row>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled empty</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledEmpty?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    [floatLabel]=\"floatLabel\"\n                    formControlName=\"enabledEmpty\"\n                    placeholder=\"Placeholder\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled empty + required</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{\n                          form.controls.enabledEmptyRequired?.value | json\n                        }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    [floatLabel]=\"floatLabel\"\n                    formControlName=\"enabledEmptyRequired\"\n                    placeholder=\"Placeholder\"\n                    [required]=\"true\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled false</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledFalse?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    [floatLabel]=\"floatLabel\"\n                    formControlName=\"enabledFalse\"\n                    placeholder=\"Placeholder\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled true</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledTrue?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    [floatLabel]=\"floatLabel\"\n                    formControlName=\"enabledTrue\"\n                    placeholder=\"Placeholder\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n          </ion-row>\n          <ion-row>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled empty (no placeholder)</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledEmpty?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    [floatLabel]=\"floatLabel\"\n                    formControlName=\"enabledEmpty\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled false (no placeholder)</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledFalse?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    [floatLabel]=\"floatLabel\"\n                    formControlName=\"enabledFalse\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled true (no placeholder)</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledTrue?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    [floatLabel]=\"floatLabel\"\n                    formControlName=\"enabledTrue\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n          </ion-row>\n\n          <ion-row>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled empty + clearable</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledEmpty?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    [floatLabel]=\"floatLabel\"\n                    formControlName=\"enabledEmpty\"\n                    placeholder=\"Placeholder\"\n                    [clearable]=\"true\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled false + floatLabel=\"always\"</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledFalse?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    [floatLabel]=\"floatLabel\"\n                    formControlName=\"enabledFalse\"\n                    placeholder=\"Placeholder\"\n                    floatLabel=\"always\"\n                    [clearable]=\"true\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">appearance=\"outline\" + icon + clearable</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledTrue?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    [floatLabel]=\"floatLabel\"\n                    formControlName=\"enabledTrue\"\n                    placeholder=\"Placeholder\"\n                    appearance=\"outline\"\n                    [clearable]=\"true\"\n                  >\n                    <mat-icon matPrefix>room</mat-icon>\n                  </mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n\n            @if (style === 'button') {\n              <ion-col size=\"4\">\n                <ion-card>\n                  <ion-card-header>\n                    <ion-card-title>\n                      <ion-label color=\"primary\">Enabled empty + showButtonIcons: false</ion-label>\n                    </ion-card-title>\n                    <ion-card-subtitle>\n                      <ion-text color=\"medium\">\n                        <small>\n                          <pre style=\"white-space: break-spaces\">{{ form.controls.enabledEmpty?.value | json }}</pre>\n                        </small>\n                      </ion-text>\n                    </ion-card-subtitle>\n                  </ion-card-header>\n                  <ion-card-content>\n                    <mat-boolean-field\n                      [style]=\"style\"\n                      [floatLabel]=\"floatLabel\"\n                      formControlName=\"enabledEmpty\"\n                      placeholder=\"Placeholder\"\n                      [showButtonIcons]=\"false\"\n                    ></mat-boolean-field>\n                  </ion-card-content>\n                </ion-card>\n              </ion-col>\n            }\n          </ion-row>\n        </ion-grid>\n      }\n    </ng-template>\n\n    <ng-template #temp>\n      <ion-grid>\n        <ion-row>\n          <ion-col size=\"4\">\n            <mat-boolean-field\n              [style]=\"'radio'\"\n              [floatLabel]=\"floatLabel\"\n              formControlName=\"enabledEmpty\"\n              placeholder=\"Placeholder\"\n            ></mat-boolean-field>\n          </ion-col>\n          <ion-col size=\"4\">\n            <mat-boolean-field\n              [style]=\"'checkbox'\"\n              [floatLabel]=\"floatLabel\"\n              formControlName=\"enabledEmpty\"\n              placeholder=\"Placeholder\"\n            ></mat-boolean-field>\n          </ion-col>\n          <ion-col size=\"4\">\n            <mat-boolean-field\n              [style]=\"'button'\"\n              [floatLabel]=\"floatLabel\"\n              formControlName=\"enabledEmpty\"\n              placeholder=\"Placeholder\"\n            ></mat-boolean-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </ng-template>\n  </form>\n</ion-content>\n", dependencies: [{ kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i8.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i8.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: MatBooleanField, selector: "mat-boolean-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "subscriptSizing", "readonly", "required", "compact", "autofocus", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "clearable", "labelPosition", "tabindex", "showRadio", "value"], outputs: ["keyup.enter", "focus", "blur"] }, { kind: "pipe", type: i3$1.JsonPipe, name: "json" }, { kind: "pipe", type: CapitalizePipe, name: "capitalize" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BooleanTestPage, decorators: [{
             type: Component,
@@ -49105,6 +49132,7 @@ class MenuTestingPage extends AppTabEditor {
     showThirdTab = false;
     $title = new Subject();
     $secondTabTitle = new Subject();
+    $thirdTabBadge = new BehaviorSubject(1);
     _subSelectedTabIndex = 0;
     subTabCount;
     set subSelectedTabIndex(value) {
@@ -49131,6 +49159,7 @@ class MenuTestingPage extends AppTabEditor {
     ngOnInit() {
         console.debug(`${this.logPrefix} Init page...`);
         super.ngOnInit();
+        this.showThirdTab = this.route.snapshot.queryParamMap.get('tab') === '2';
     }
     ngAfterViewInit() {
         super.ngAfterViewInit();
@@ -49222,12 +49251,16 @@ class MenuTestingPage extends AppTabEditor {
             setTimeout(() => this.subTabGroup.realignInkBar(), 200);
         }
     }
+    incrementThirdTabBadge() {
+        console.log('incrementThirdTabBadge');
+        this.$thirdTabBadge.next(this.$thirdTabBadge.value + 1);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenuTestingPage, deps: [{ token: i1$6.ActivatedRoute }, { token: i1$6.Router }, { token: i2$1.NavController }, { token: i2$1.AlertController }, { token: i1$1.TranslateService }, { token: MenuService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MenuTestingPage, selector: "app-testing-menu", inputs: { subSelectedTabIndex: "subSelectedTabIndex" }, outputs: { subSelectedTabIndexChange: "subSelectedTabIndexChange" }, viewQueries: [{ propertyName: "subTabGroup", first: true, predicate: ["subTabGroup"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar [defaultBackHref]=\"parentPath\">\n  <ion-title [innerHTML]=\"$title | async\"></ion-title>\n</app-toolbar>\n\n<ion-content>\n  <mat-tab-group\n    #tabGroup\n    [(selectedIndex)]=\"selectedTabIndex\"\n    (selectedTabChange)=\"onTabChange($event)\"\n    class=\"mat-mdc-tab-disabled-hidden\"\n    dynamicHeight\n    [mat-stretch-tabs]=\"toggleStretchTab.checked\"\n  >\n    <!-- TAB: 1 -->\n    <mat-tab\n      label=\"Details\"\n      class=\"ion-padding\"\n      appSubMenuTab\n      [subMenuTitle]=\"($title | async) || ''\"\n      [parentPath]=\"parentPath\"\n    >\n      <ng-template mat-tab-label>\n        <ion-label>Details</ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        <p>A first tab</p>\n\n        <p [class.cdk-visually-hidden]=\"showThirdTab\">\n          <ion-toggle #toggleThird>Toggle Third Tab</ion-toggle>\n        </p>\n\n        <p>\n          <ion-toggle #toggleStretchTab>Stretch Tabs</ion-toggle>\n        </p>\n\n        <p>\n          <ion-button (click)=\"changeTitle($event)\">Change page title</ion-button>\n\n          <ion-button (click)=\"addSubMenuItem($event)\">Add sub menu other 3</ion-button>\n\n          <ion-button (click)=\"addOutsideRouteSubMenuItem($event, true)\">\n            Add sub menu (outside route) - pinned\n          </ion-button>\n\n          <ion-button (click)=\"addOutsideRouteSubMenuItem($event, false)\">\n            Add sub menu (outside route) - not pinned\n          </ion-button>\n        </p>\n\n        <p>\n          &nbsp;&nbsp;\n          <ion-button (click)=\"enableMenu(false)\" *ngIf=\"menuService.enabled | async\">Disable menu</ion-button>\n          <ion-button (click)=\"enableMenu(true)\" *ngIf=\"(menuService.enabled | async) !== true\">Enable menu</ion-button>\n          <ion-button (click)=\"toggleSplitPaneWhen()\" [disabled]=\"(menuService.enabled | async) !== true\">\n            Toggle split pane\n          </ion-button>\n        </p>\n      </div>\n    </mat-tab>\n\n    <!-- TAB: 2 -->\n    <mat-tab\n      label=\"Second\"\n      class=\"ion-padding\"\n      appSubMenuTab\n      [subMenuIcon]=\"{ icon: 'settings' }\"\n      [subMenuTitle]=\"$secondTabTitle | async\"\n    >\n      <ng-template mat-tab-label>\n        <ion-label [innerHTML]=\"$secondTabTitle | async\"></ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        <p>A second tab</p>\n\n        <p *ngIf=\"showOtherLinks\">\n          Navigate to :\n          <a [routerLink]=\"childPath + '/1'\">{{ childPath }}/1</a>\n          <br />\n          Navigate to :\n          <a [routerLink]=\"childPath + '/2'\">{{ childPath }}/2</a>\n        </p>\n\n        <p>\n          <ion-button (click)=\"changeSecondTabTitle($event)\">Change tab label</ion-button>\n        </p>\n      </div>\n    </mat-tab>\n\n    <!-- TAB: 3 -->\n    <mat-tab\n      [label]=\"thirdTabTitle\"\n      class=\"ion-padding\"\n      [disabled]=\"!showThirdTab && !toggleThird.checked\"\n      appSubMenuTab\n      [subMenuIcon]=\"{ icon: 'none' }\"\n    >\n      <ng-template mat-tab-label>\n        <ion-label matBadge=\"1\" matBadgeColor=\"primary\" matBadgeOverlap=\"false\" matBadgeSize=\"small\">\n          {{ thirdTabTitle }}\n        </ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">A third tab</div>\n    </mat-tab>\n\n    <!-- TAB: 4 -->\n    <mat-tab appSubMenuTab [subMenuIcon]=\"{ icon: 'person' }\" label=\"Sub Tab\" class=\"ion-padding\">\n      <ng-template mat-tab-label>\n        <ion-label>Sub Tab</ion-label>\n      </ng-template>\n\n      <mat-tab-group\n        #subTabGroup\n        [(selectedIndex)]=\"subSelectedTabIndex\"\n        (selectedTabChange)=\"onTabChange($event, 'subtab')\"\n        class=\"mat-mdc-tab-disabled-hidden\"\n        dynamicHeight\n      >\n        <mat-tab label=\"Sub1\" class=\"ion-padding\">\n          <ng-template mat-tab-label>\n            <ion-label>Sub1</ion-label>\n          </ng-template>\n\n          <div class=\"ion-padding\">\n            <p>First SubTab</p>\n          </div>\n        </mat-tab>\n\n        <mat-tab label=\"Sub2\" class=\"ion-padding\">\n          <ng-template mat-tab-label>\n            <ion-label>Sub2</ion-label>\n          </ng-template>\n\n          <div class=\"ion-padding\">\n            <p>Second SubTab</p>\n          </div>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-tab>\n  </mat-tab-group>\n</ion-content>\n", styles: [".menu-item{padding-left:0 px}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: SubMenuTabDirective, selector: "[appSubMenuTab]", inputs: ["label", "disabled", "parentPath", "path", "subMenuTitle", "subMenuIcon"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToggle, selector: "ion-toggle", inputs: ["alignment", "checked", "color", "disabled", "enableOnOffLabels", "justify", "labelPlacement", "legacy", "mode", "name", "value"] }, { kind: "directive", type: i2$1.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "directive", type: i2$1.RouterLinkWithHrefDelegate, selector: "a[routerLink],area[routerLink]" }, { kind: "directive", type: i7.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i7.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i7.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i8.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "id", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MenuTestingPage, selector: "app-testing-menu", inputs: { subSelectedTabIndex: "subSelectedTabIndex" }, outputs: { subSelectedTabIndexChange: "subSelectedTabIndexChange" }, viewQueries: [{ propertyName: "subTabGroup", first: true, predicate: ["subTabGroup"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar [defaultBackHref]=\"parentPath\">\n  <ion-title [innerHTML]=\"$title | async\"></ion-title>\n</app-toolbar>\n\n<ion-content>\n  <mat-tab-group\n    #tabGroup\n    [(selectedIndex)]=\"selectedTabIndex\"\n    (selectedTabChange)=\"onTabChange($event)\"\n    class=\"mat-mdc-tab-disabled-hidden\"\n    dynamicHeight\n    [mat-stretch-tabs]=\"toggleStretchTab.checked\"\n  >\n    <!-- TAB: 1 -->\n    <mat-tab\n      label=\"Details\"\n      class=\"ion-padding\"\n      appSubMenuTab\n      [subMenuTitle]=\"($title | async) || ''\"\n      [parentPath]=\"parentPath\"\n    >\n      <ng-template mat-tab-label>\n        <mat-icon>information-circle</mat-icon>\n        <ion-label>Details</ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        <p>A first tab</p>\n\n        <p [class.cdk-visually-hidden]=\"showThirdTab\">\n          <ion-toggle #toggleThird>Toggle Third Tab</ion-toggle>\n        </p>\n\n        <p>\n          <ion-toggle #toggleStretchTab>Stretch Tabs</ion-toggle>\n        </p>\n\n        <p>\n          <ion-button (click)=\"changeTitle($event)\">Change page title</ion-button>\n\n          <ion-button (click)=\"addSubMenuItem($event)\">Add sub menu other 3</ion-button>\n\n          <ion-button (click)=\"addOutsideRouteSubMenuItem($event, true)\">\n            Add sub menu (outside route) - pinned\n          </ion-button>\n\n          <ion-button (click)=\"addOutsideRouteSubMenuItem($event, false)\">\n            Add sub menu (outside route) - not pinned\n          </ion-button>\n        </p>\n\n        <p>\n          &nbsp;&nbsp;\n          <ion-button (click)=\"enableMenu(false)\" *ngIf=\"menuService.enabled | async\">Disable menu</ion-button>\n          <ion-button (click)=\"enableMenu(true)\" *ngIf=\"(menuService.enabled | async) !== true\">Enable menu</ion-button>\n          <ion-button (click)=\"toggleSplitPaneWhen()\" [disabled]=\"(menuService.enabled | async) !== true\">\n            Toggle split pane\n          </ion-button>\n        </p>\n      </div>\n    </mat-tab>\n\n    <!-- TAB: 2 -->\n    <mat-tab\n      label=\"Second\"\n      class=\"ion-padding\"\n      appSubMenuTab\n      [subMenuIcon]=\"{ icon: 'settings' }\"\n      [subMenuTitle]=\"$secondTabTitle | async\"\n    >\n      <ng-template mat-tab-label>\n        <mat-icon><ion-icon name=\"settings\"></ion-icon></mat-icon>\n        <ion-label [innerHTML]=\"$secondTabTitle | async\"></ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        <p>A second tab</p>\n\n        <p *ngIf=\"showOtherLinks\">\n          Navigate to :\n          <a [routerLink]=\"childPath + '/1'\">{{ childPath }}/1</a>\n          <br />\n          Navigate to :\n          <a [routerLink]=\"childPath + '/2'\">{{ childPath }}/2</a>\n        </p>\n\n        <p>\n          <ion-button (click)=\"changeSecondTabTitle($event)\">Change tab label</ion-button>\n        </p>\n      </div>\n    </mat-tab>\n\n    <!-- TAB: 3 -->\n    <mat-tab\n      [label]=\"thirdTabTitle\"\n      class=\"ion-padding\"\n      [disabled]=\"!showThirdTab && !toggleThird.checked\"\n      appSubMenuTab\n      [subMenuBadge]=\"$thirdTabBadge | async\"\n      [subMenuIcon]=\"{ icon: 'none' }\"\n    >\n      <ng-template mat-tab-label>\n        <ion-label [matBadge]=\"$thirdTabBadge | async\" matBadgeColor=\"primary\" matBadgeOverlap=\"false\" matBadgeSize=\"small\">\n          {{ thirdTabTitle }}\n        </ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        <p>\n          A third tab (with a badge)\n        </p>\n        <ion-button (click)=\"incrementThirdTabBadge()\">Increment badge count</ion-button>\n      </div>\n    </mat-tab>\n\n    <!-- TAB: 4 -->\n    <mat-tab appSubMenuTab [subMenuIcon]=\"{ icon: 'person' }\" label=\"Sub Tab\" class=\"ion-padding\">\n      <ng-template mat-tab-label>\n        <mat-icon><ion-icon name=\"person\"></ion-icon></mat-icon>\n        <ion-label>Sub Tab</ion-label>\n      </ng-template>\n\n      <mat-tab-group\n        #subTabGroup\n        [(selectedIndex)]=\"subSelectedTabIndex\"\n        (selectedTabChange)=\"onTabChange($event, 'subtab')\"\n        class=\"mat-mdc-tab-disabled-hidden\"\n        dynamicHeight\n      >\n        <mat-tab label=\"Sub1\" class=\"ion-padding\">\n          <ng-template mat-tab-label>\n            <ion-label>Sub1</ion-label>\n          </ng-template>\n\n          <div class=\"ion-padding\">\n            <p>First SubTab</p>\n          </div>\n        </mat-tab>\n\n        <mat-tab label=\"Sub2\" class=\"ion-padding\">\n          <ng-template mat-tab-label>\n            <ion-label>Sub2</ion-label>\n          </ng-template>\n\n          <div class=\"ion-padding\">\n            <p>Second SubTab</p>\n          </div>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-tab>\n  </mat-tab-group>\n</ion-content>\n", styles: [".menu-item{padding-left:0 px}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: SubMenuTabDirective, selector: "[appSubMenuTab]", inputs: ["label", "disabled", "parentPath", "path", "subMenuTitle", "subMenuBadge", "subMenuIcon"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToggle, selector: "ion-toggle", inputs: ["alignment", "checked", "color", "disabled", "enableOnOffLabels", "justify", "labelPlacement", "legacy", "mode", "name", "value"] }, { kind: "directive", type: i2$1.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "directive", type: i2$1.RouterLinkWithHrefDelegate, selector: "a[routerLink],area[routerLink]" }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i8.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i8.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i9.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "id", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenuTestingPage, decorators: [{
             type: Component,
-            args: [{ selector: 'app-testing-menu', template: "<app-toolbar [defaultBackHref]=\"parentPath\">\n  <ion-title [innerHTML]=\"$title | async\"></ion-title>\n</app-toolbar>\n\n<ion-content>\n  <mat-tab-group\n    #tabGroup\n    [(selectedIndex)]=\"selectedTabIndex\"\n    (selectedTabChange)=\"onTabChange($event)\"\n    class=\"mat-mdc-tab-disabled-hidden\"\n    dynamicHeight\n    [mat-stretch-tabs]=\"toggleStretchTab.checked\"\n  >\n    <!-- TAB: 1 -->\n    <mat-tab\n      label=\"Details\"\n      class=\"ion-padding\"\n      appSubMenuTab\n      [subMenuTitle]=\"($title | async) || ''\"\n      [parentPath]=\"parentPath\"\n    >\n      <ng-template mat-tab-label>\n        <ion-label>Details</ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        <p>A first tab</p>\n\n        <p [class.cdk-visually-hidden]=\"showThirdTab\">\n          <ion-toggle #toggleThird>Toggle Third Tab</ion-toggle>\n        </p>\n\n        <p>\n          <ion-toggle #toggleStretchTab>Stretch Tabs</ion-toggle>\n        </p>\n\n        <p>\n          <ion-button (click)=\"changeTitle($event)\">Change page title</ion-button>\n\n          <ion-button (click)=\"addSubMenuItem($event)\">Add sub menu other 3</ion-button>\n\n          <ion-button (click)=\"addOutsideRouteSubMenuItem($event, true)\">\n            Add sub menu (outside route) - pinned\n          </ion-button>\n\n          <ion-button (click)=\"addOutsideRouteSubMenuItem($event, false)\">\n            Add sub menu (outside route) - not pinned\n          </ion-button>\n        </p>\n\n        <p>\n          &nbsp;&nbsp;\n          <ion-button (click)=\"enableMenu(false)\" *ngIf=\"menuService.enabled | async\">Disable menu</ion-button>\n          <ion-button (click)=\"enableMenu(true)\" *ngIf=\"(menuService.enabled | async) !== true\">Enable menu</ion-button>\n          <ion-button (click)=\"toggleSplitPaneWhen()\" [disabled]=\"(menuService.enabled | async) !== true\">\n            Toggle split pane\n          </ion-button>\n        </p>\n      </div>\n    </mat-tab>\n\n    <!-- TAB: 2 -->\n    <mat-tab\n      label=\"Second\"\n      class=\"ion-padding\"\n      appSubMenuTab\n      [subMenuIcon]=\"{ icon: 'settings' }\"\n      [subMenuTitle]=\"$secondTabTitle | async\"\n    >\n      <ng-template mat-tab-label>\n        <ion-label [innerHTML]=\"$secondTabTitle | async\"></ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        <p>A second tab</p>\n\n        <p *ngIf=\"showOtherLinks\">\n          Navigate to :\n          <a [routerLink]=\"childPath + '/1'\">{{ childPath }}/1</a>\n          <br />\n          Navigate to :\n          <a [routerLink]=\"childPath + '/2'\">{{ childPath }}/2</a>\n        </p>\n\n        <p>\n          <ion-button (click)=\"changeSecondTabTitle($event)\">Change tab label</ion-button>\n        </p>\n      </div>\n    </mat-tab>\n\n    <!-- TAB: 3 -->\n    <mat-tab\n      [label]=\"thirdTabTitle\"\n      class=\"ion-padding\"\n      [disabled]=\"!showThirdTab && !toggleThird.checked\"\n      appSubMenuTab\n      [subMenuIcon]=\"{ icon: 'none' }\"\n    >\n      <ng-template mat-tab-label>\n        <ion-label matBadge=\"1\" matBadgeColor=\"primary\" matBadgeOverlap=\"false\" matBadgeSize=\"small\">\n          {{ thirdTabTitle }}\n        </ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">A third tab</div>\n    </mat-tab>\n\n    <!-- TAB: 4 -->\n    <mat-tab appSubMenuTab [subMenuIcon]=\"{ icon: 'person' }\" label=\"Sub Tab\" class=\"ion-padding\">\n      <ng-template mat-tab-label>\n        <ion-label>Sub Tab</ion-label>\n      </ng-template>\n\n      <mat-tab-group\n        #subTabGroup\n        [(selectedIndex)]=\"subSelectedTabIndex\"\n        (selectedTabChange)=\"onTabChange($event, 'subtab')\"\n        class=\"mat-mdc-tab-disabled-hidden\"\n        dynamicHeight\n      >\n        <mat-tab label=\"Sub1\" class=\"ion-padding\">\n          <ng-template mat-tab-label>\n            <ion-label>Sub1</ion-label>\n          </ng-template>\n\n          <div class=\"ion-padding\">\n            <p>First SubTab</p>\n          </div>\n        </mat-tab>\n\n        <mat-tab label=\"Sub2\" class=\"ion-padding\">\n          <ng-template mat-tab-label>\n            <ion-label>Sub2</ion-label>\n          </ng-template>\n\n          <div class=\"ion-padding\">\n            <p>Second SubTab</p>\n          </div>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-tab>\n  </mat-tab-group>\n</ion-content>\n", styles: [".menu-item{padding-left:0 px}\n"] }]
+            args: [{ selector: 'app-testing-menu', template: "<app-toolbar [defaultBackHref]=\"parentPath\">\n  <ion-title [innerHTML]=\"$title | async\"></ion-title>\n</app-toolbar>\n\n<ion-content>\n  <mat-tab-group\n    #tabGroup\n    [(selectedIndex)]=\"selectedTabIndex\"\n    (selectedTabChange)=\"onTabChange($event)\"\n    class=\"mat-mdc-tab-disabled-hidden\"\n    dynamicHeight\n    [mat-stretch-tabs]=\"toggleStretchTab.checked\"\n  >\n    <!-- TAB: 1 -->\n    <mat-tab\n      label=\"Details\"\n      class=\"ion-padding\"\n      appSubMenuTab\n      [subMenuTitle]=\"($title | async) || ''\"\n      [parentPath]=\"parentPath\"\n    >\n      <ng-template mat-tab-label>\n        <mat-icon>information-circle</mat-icon>\n        <ion-label>Details</ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        <p>A first tab</p>\n\n        <p [class.cdk-visually-hidden]=\"showThirdTab\">\n          <ion-toggle #toggleThird>Toggle Third Tab</ion-toggle>\n        </p>\n\n        <p>\n          <ion-toggle #toggleStretchTab>Stretch Tabs</ion-toggle>\n        </p>\n\n        <p>\n          <ion-button (click)=\"changeTitle($event)\">Change page title</ion-button>\n\n          <ion-button (click)=\"addSubMenuItem($event)\">Add sub menu other 3</ion-button>\n\n          <ion-button (click)=\"addOutsideRouteSubMenuItem($event, true)\">\n            Add sub menu (outside route) - pinned\n          </ion-button>\n\n          <ion-button (click)=\"addOutsideRouteSubMenuItem($event, false)\">\n            Add sub menu (outside route) - not pinned\n          </ion-button>\n        </p>\n\n        <p>\n          &nbsp;&nbsp;\n          <ion-button (click)=\"enableMenu(false)\" *ngIf=\"menuService.enabled | async\">Disable menu</ion-button>\n          <ion-button (click)=\"enableMenu(true)\" *ngIf=\"(menuService.enabled | async) !== true\">Enable menu</ion-button>\n          <ion-button (click)=\"toggleSplitPaneWhen()\" [disabled]=\"(menuService.enabled | async) !== true\">\n            Toggle split pane\n          </ion-button>\n        </p>\n      </div>\n    </mat-tab>\n\n    <!-- TAB: 2 -->\n    <mat-tab\n      label=\"Second\"\n      class=\"ion-padding\"\n      appSubMenuTab\n      [subMenuIcon]=\"{ icon: 'settings' }\"\n      [subMenuTitle]=\"$secondTabTitle | async\"\n    >\n      <ng-template mat-tab-label>\n        <mat-icon><ion-icon name=\"settings\"></ion-icon></mat-icon>\n        <ion-label [innerHTML]=\"$secondTabTitle | async\"></ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        <p>A second tab</p>\n\n        <p *ngIf=\"showOtherLinks\">\n          Navigate to :\n          <a [routerLink]=\"childPath + '/1'\">{{ childPath }}/1</a>\n          <br />\n          Navigate to :\n          <a [routerLink]=\"childPath + '/2'\">{{ childPath }}/2</a>\n        </p>\n\n        <p>\n          <ion-button (click)=\"changeSecondTabTitle($event)\">Change tab label</ion-button>\n        </p>\n      </div>\n    </mat-tab>\n\n    <!-- TAB: 3 -->\n    <mat-tab\n      [label]=\"thirdTabTitle\"\n      class=\"ion-padding\"\n      [disabled]=\"!showThirdTab && !toggleThird.checked\"\n      appSubMenuTab\n      [subMenuBadge]=\"$thirdTabBadge | async\"\n      [subMenuIcon]=\"{ icon: 'none' }\"\n    >\n      <ng-template mat-tab-label>\n        <ion-label [matBadge]=\"$thirdTabBadge | async\" matBadgeColor=\"primary\" matBadgeOverlap=\"false\" matBadgeSize=\"small\">\n          {{ thirdTabTitle }}\n        </ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        <p>\n          A third tab (with a badge)\n        </p>\n        <ion-button (click)=\"incrementThirdTabBadge()\">Increment badge count</ion-button>\n      </div>\n    </mat-tab>\n\n    <!-- TAB: 4 -->\n    <mat-tab appSubMenuTab [subMenuIcon]=\"{ icon: 'person' }\" label=\"Sub Tab\" class=\"ion-padding\">\n      <ng-template mat-tab-label>\n        <mat-icon><ion-icon name=\"person\"></ion-icon></mat-icon>\n        <ion-label>Sub Tab</ion-label>\n      </ng-template>\n\n      <mat-tab-group\n        #subTabGroup\n        [(selectedIndex)]=\"subSelectedTabIndex\"\n        (selectedTabChange)=\"onTabChange($event, 'subtab')\"\n        class=\"mat-mdc-tab-disabled-hidden\"\n        dynamicHeight\n      >\n        <mat-tab label=\"Sub1\" class=\"ion-padding\">\n          <ng-template mat-tab-label>\n            <ion-label>Sub1</ion-label>\n          </ng-template>\n\n          <div class=\"ion-padding\">\n            <p>First SubTab</p>\n          </div>\n        </mat-tab>\n\n        <mat-tab label=\"Sub2\" class=\"ion-padding\">\n          <ng-template mat-tab-label>\n            <ion-label>Sub2</ion-label>\n          </ng-template>\n\n          <div class=\"ion-padding\">\n            <p>Second SubTab</p>\n          </div>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-tab>\n  </mat-tab-group>\n</ion-content>\n", styles: [".menu-item{padding-left:0 px}\n"] }]
         }], ctorParameters: () => [{ type: i1$6.ActivatedRoute }, { type: i1$6.Router }, { type: i2$1.NavController }, { type: i2$1.AlertController }, { type: i1$1.TranslateService }, { type: MenuService }], propDecorators: { subSelectedTabIndex: [{
                 type: Input
             }], subSelectedTabIndexChange: [{
@@ -49267,11 +49300,11 @@ class OtherMenuTestingPage extends MenuTestingPage {
         return this.getDefaultTitle() + ' ' + otherId;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OtherMenuTestingPage, deps: [{ token: i1$6.ActivatedRoute }, { token: i1$6.Router }, { token: i2$1.NavController }, { token: i2$1.AlertController }, { token: i1$1.TranslateService }, { token: MenuService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OtherMenuTestingPage, selector: "app-testing-menu-other", usesInheritance: true, ngImport: i0, template: "<app-toolbar [defaultBackHref]=\"parentPath\">\n  <ion-title [innerHTML]=\"$title | async\"></ion-title>\n</app-toolbar>\n\n<ion-content>\n  <mat-tab-group\n    #tabGroup\n    [(selectedIndex)]=\"selectedTabIndex\"\n    (selectedTabChange)=\"onTabChange($event)\"\n    class=\"mat-mdc-tab-disabled-hidden\"\n    dynamicHeight\n    [mat-stretch-tabs]=\"toggleStretchTab.checked\"\n  >\n    <!-- TAB: 1 -->\n    <mat-tab\n      label=\"Details\"\n      class=\"ion-padding\"\n      appSubMenuTab\n      [subMenuTitle]=\"($title | async) || ''\"\n      [parentPath]=\"parentPath\"\n    >\n      <ng-template mat-tab-label>\n        <ion-label>Details</ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        <p>A first tab</p>\n\n        <p [class.cdk-visually-hidden]=\"showThirdTab\">\n          <ion-toggle #toggleThird>Toggle Third Tab</ion-toggle>\n        </p>\n\n        <p>\n          <ion-toggle #toggleStretchTab>Stretch Tabs</ion-toggle>\n        </p>\n\n        <p>\n          <ion-button (click)=\"changeTitle($event)\">Change page title</ion-button>\n\n          <ion-button (click)=\"addSubMenuItem($event)\">Add sub menu other 3</ion-button>\n\n          <ion-button (click)=\"addOutsideRouteSubMenuItem($event, true)\">\n            Add sub menu (outside route) - pinned\n          </ion-button>\n\n          <ion-button (click)=\"addOutsideRouteSubMenuItem($event, false)\">\n            Add sub menu (outside route) - not pinned\n          </ion-button>\n        </p>\n\n        <p>\n          &nbsp;&nbsp;\n          <ion-button (click)=\"enableMenu(false)\" *ngIf=\"menuService.enabled | async\">Disable menu</ion-button>\n          <ion-button (click)=\"enableMenu(true)\" *ngIf=\"(menuService.enabled | async) !== true\">Enable menu</ion-button>\n          <ion-button (click)=\"toggleSplitPaneWhen()\" [disabled]=\"(menuService.enabled | async) !== true\">\n            Toggle split pane\n          </ion-button>\n        </p>\n      </div>\n    </mat-tab>\n\n    <!-- TAB: 2 -->\n    <mat-tab\n      label=\"Second\"\n      class=\"ion-padding\"\n      appSubMenuTab\n      [subMenuIcon]=\"{ icon: 'settings' }\"\n      [subMenuTitle]=\"$secondTabTitle | async\"\n    >\n      <ng-template mat-tab-label>\n        <ion-label [innerHTML]=\"$secondTabTitle | async\"></ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        <p>A second tab</p>\n\n        <p *ngIf=\"showOtherLinks\">\n          Navigate to :\n          <a [routerLink]=\"childPath + '/1'\">{{ childPath }}/1</a>\n          <br />\n          Navigate to :\n          <a [routerLink]=\"childPath + '/2'\">{{ childPath }}/2</a>\n        </p>\n\n        <p>\n          <ion-button (click)=\"changeSecondTabTitle($event)\">Change tab label</ion-button>\n        </p>\n      </div>\n    </mat-tab>\n\n    <!-- TAB: 3 -->\n    <mat-tab\n      [label]=\"thirdTabTitle\"\n      class=\"ion-padding\"\n      [disabled]=\"!showThirdTab && !toggleThird.checked\"\n      appSubMenuTab\n      [subMenuIcon]=\"{ icon: 'none' }\"\n    >\n      <ng-template mat-tab-label>\n        <ion-label matBadge=\"1\" matBadgeColor=\"primary\" matBadgeOverlap=\"false\" matBadgeSize=\"small\">\n          {{ thirdTabTitle }}\n        </ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">A third tab</div>\n    </mat-tab>\n\n    <!-- TAB: 4 -->\n    <mat-tab appSubMenuTab [subMenuIcon]=\"{ icon: 'person' }\" label=\"Sub Tab\" class=\"ion-padding\">\n      <ng-template mat-tab-label>\n        <ion-label>Sub Tab</ion-label>\n      </ng-template>\n\n      <mat-tab-group\n        #subTabGroup\n        [(selectedIndex)]=\"subSelectedTabIndex\"\n        (selectedTabChange)=\"onTabChange($event, 'subtab')\"\n        class=\"mat-mdc-tab-disabled-hidden\"\n        dynamicHeight\n      >\n        <mat-tab label=\"Sub1\" class=\"ion-padding\">\n          <ng-template mat-tab-label>\n            <ion-label>Sub1</ion-label>\n          </ng-template>\n\n          <div class=\"ion-padding\">\n            <p>First SubTab</p>\n          </div>\n        </mat-tab>\n\n        <mat-tab label=\"Sub2\" class=\"ion-padding\">\n          <ng-template mat-tab-label>\n            <ion-label>Sub2</ion-label>\n          </ng-template>\n\n          <div class=\"ion-padding\">\n            <p>Second SubTab</p>\n          </div>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-tab>\n  </mat-tab-group>\n</ion-content>\n", styles: [".menu-item{padding-left:0 px}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: SubMenuTabDirective, selector: "[appSubMenuTab]", inputs: ["label", "disabled", "parentPath", "path", "subMenuTitle", "subMenuIcon"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToggle, selector: "ion-toggle", inputs: ["alignment", "checked", "color", "disabled", "enableOnOffLabels", "justify", "labelPlacement", "legacy", "mode", "name", "value"] }, { kind: "directive", type: i2$1.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "directive", type: i2$1.RouterLinkWithHrefDelegate, selector: "a[routerLink],area[routerLink]" }, { kind: "directive", type: i7.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i7.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i7.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i8.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "id", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OtherMenuTestingPage, selector: "app-testing-menu-other", usesInheritance: true, ngImport: i0, template: "<app-toolbar [defaultBackHref]=\"parentPath\">\n  <ion-title [innerHTML]=\"$title | async\"></ion-title>\n</app-toolbar>\n\n<ion-content>\n  <mat-tab-group\n    #tabGroup\n    [(selectedIndex)]=\"selectedTabIndex\"\n    (selectedTabChange)=\"onTabChange($event)\"\n    class=\"mat-mdc-tab-disabled-hidden\"\n    dynamicHeight\n    [mat-stretch-tabs]=\"toggleStretchTab.checked\"\n  >\n    <!-- TAB: 1 -->\n    <mat-tab\n      label=\"Details\"\n      class=\"ion-padding\"\n      appSubMenuTab\n      [subMenuTitle]=\"($title | async) || ''\"\n      [parentPath]=\"parentPath\"\n    >\n      <ng-template mat-tab-label>\n        <mat-icon>information-circle</mat-icon>\n        <ion-label>Details</ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        <p>A first tab</p>\n\n        <p [class.cdk-visually-hidden]=\"showThirdTab\">\n          <ion-toggle #toggleThird>Toggle Third Tab</ion-toggle>\n        </p>\n\n        <p>\n          <ion-toggle #toggleStretchTab>Stretch Tabs</ion-toggle>\n        </p>\n\n        <p>\n          <ion-button (click)=\"changeTitle($event)\">Change page title</ion-button>\n\n          <ion-button (click)=\"addSubMenuItem($event)\">Add sub menu other 3</ion-button>\n\n          <ion-button (click)=\"addOutsideRouteSubMenuItem($event, true)\">\n            Add sub menu (outside route) - pinned\n          </ion-button>\n\n          <ion-button (click)=\"addOutsideRouteSubMenuItem($event, false)\">\n            Add sub menu (outside route) - not pinned\n          </ion-button>\n        </p>\n\n        <p>\n          &nbsp;&nbsp;\n          <ion-button (click)=\"enableMenu(false)\" *ngIf=\"menuService.enabled | async\">Disable menu</ion-button>\n          <ion-button (click)=\"enableMenu(true)\" *ngIf=\"(menuService.enabled | async) !== true\">Enable menu</ion-button>\n          <ion-button (click)=\"toggleSplitPaneWhen()\" [disabled]=\"(menuService.enabled | async) !== true\">\n            Toggle split pane\n          </ion-button>\n        </p>\n      </div>\n    </mat-tab>\n\n    <!-- TAB: 2 -->\n    <mat-tab\n      label=\"Second\"\n      class=\"ion-padding\"\n      appSubMenuTab\n      [subMenuIcon]=\"{ icon: 'settings' }\"\n      [subMenuTitle]=\"$secondTabTitle | async\"\n    >\n      <ng-template mat-tab-label>\n        <mat-icon><ion-icon name=\"settings\"></ion-icon></mat-icon>\n        <ion-label [innerHTML]=\"$secondTabTitle | async\"></ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        <p>A second tab</p>\n\n        <p *ngIf=\"showOtherLinks\">\n          Navigate to :\n          <a [routerLink]=\"childPath + '/1'\">{{ childPath }}/1</a>\n          <br />\n          Navigate to :\n          <a [routerLink]=\"childPath + '/2'\">{{ childPath }}/2</a>\n        </p>\n\n        <p>\n          <ion-button (click)=\"changeSecondTabTitle($event)\">Change tab label</ion-button>\n        </p>\n      </div>\n    </mat-tab>\n\n    <!-- TAB: 3 -->\n    <mat-tab\n      [label]=\"thirdTabTitle\"\n      class=\"ion-padding\"\n      [disabled]=\"!showThirdTab && !toggleThird.checked\"\n      appSubMenuTab\n      [subMenuBadge]=\"$thirdTabBadge | async\"\n      [subMenuIcon]=\"{ icon: 'none' }\"\n    >\n      <ng-template mat-tab-label>\n        <ion-label [matBadge]=\"$thirdTabBadge | async\" matBadgeColor=\"primary\" matBadgeOverlap=\"false\" matBadgeSize=\"small\">\n          {{ thirdTabTitle }}\n        </ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        <p>\n          A third tab (with a badge)\n        </p>\n        <ion-button (click)=\"incrementThirdTabBadge()\">Increment badge count</ion-button>\n      </div>\n    </mat-tab>\n\n    <!-- TAB: 4 -->\n    <mat-tab appSubMenuTab [subMenuIcon]=\"{ icon: 'person' }\" label=\"Sub Tab\" class=\"ion-padding\">\n      <ng-template mat-tab-label>\n        <mat-icon><ion-icon name=\"person\"></ion-icon></mat-icon>\n        <ion-label>Sub Tab</ion-label>\n      </ng-template>\n\n      <mat-tab-group\n        #subTabGroup\n        [(selectedIndex)]=\"subSelectedTabIndex\"\n        (selectedTabChange)=\"onTabChange($event, 'subtab')\"\n        class=\"mat-mdc-tab-disabled-hidden\"\n        dynamicHeight\n      >\n        <mat-tab label=\"Sub1\" class=\"ion-padding\">\n          <ng-template mat-tab-label>\n            <ion-label>Sub1</ion-label>\n          </ng-template>\n\n          <div class=\"ion-padding\">\n            <p>First SubTab</p>\n          </div>\n        </mat-tab>\n\n        <mat-tab label=\"Sub2\" class=\"ion-padding\">\n          <ng-template mat-tab-label>\n            <ion-label>Sub2</ion-label>\n          </ng-template>\n\n          <div class=\"ion-padding\">\n            <p>Second SubTab</p>\n          </div>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-tab>\n  </mat-tab-group>\n</ion-content>\n", styles: [".menu-item{padding-left:0 px}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: SubMenuTabDirective, selector: "[appSubMenuTab]", inputs: ["label", "disabled", "parentPath", "path", "subMenuTitle", "subMenuBadge", "subMenuIcon"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToggle, selector: "ion-toggle", inputs: ["alignment", "checked", "color", "disabled", "enableOnOffLabels", "justify", "labelPlacement", "legacy", "mode", "name", "value"] }, { kind: "directive", type: i2$1.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "directive", type: i2$1.RouterLinkWithHrefDelegate, selector: "a[routerLink],area[routerLink]" }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i8.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i8.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i9.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "id", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OtherMenuTestingPage, decorators: [{
             type: Component,
-            args: [{ selector: 'app-testing-menu-other', template: "<app-toolbar [defaultBackHref]=\"parentPath\">\n  <ion-title [innerHTML]=\"$title | async\"></ion-title>\n</app-toolbar>\n\n<ion-content>\n  <mat-tab-group\n    #tabGroup\n    [(selectedIndex)]=\"selectedTabIndex\"\n    (selectedTabChange)=\"onTabChange($event)\"\n    class=\"mat-mdc-tab-disabled-hidden\"\n    dynamicHeight\n    [mat-stretch-tabs]=\"toggleStretchTab.checked\"\n  >\n    <!-- TAB: 1 -->\n    <mat-tab\n      label=\"Details\"\n      class=\"ion-padding\"\n      appSubMenuTab\n      [subMenuTitle]=\"($title | async) || ''\"\n      [parentPath]=\"parentPath\"\n    >\n      <ng-template mat-tab-label>\n        <ion-label>Details</ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        <p>A first tab</p>\n\n        <p [class.cdk-visually-hidden]=\"showThirdTab\">\n          <ion-toggle #toggleThird>Toggle Third Tab</ion-toggle>\n        </p>\n\n        <p>\n          <ion-toggle #toggleStretchTab>Stretch Tabs</ion-toggle>\n        </p>\n\n        <p>\n          <ion-button (click)=\"changeTitle($event)\">Change page title</ion-button>\n\n          <ion-button (click)=\"addSubMenuItem($event)\">Add sub menu other 3</ion-button>\n\n          <ion-button (click)=\"addOutsideRouteSubMenuItem($event, true)\">\n            Add sub menu (outside route) - pinned\n          </ion-button>\n\n          <ion-button (click)=\"addOutsideRouteSubMenuItem($event, false)\">\n            Add sub menu (outside route) - not pinned\n          </ion-button>\n        </p>\n\n        <p>\n          &nbsp;&nbsp;\n          <ion-button (click)=\"enableMenu(false)\" *ngIf=\"menuService.enabled | async\">Disable menu</ion-button>\n          <ion-button (click)=\"enableMenu(true)\" *ngIf=\"(menuService.enabled | async) !== true\">Enable menu</ion-button>\n          <ion-button (click)=\"toggleSplitPaneWhen()\" [disabled]=\"(menuService.enabled | async) !== true\">\n            Toggle split pane\n          </ion-button>\n        </p>\n      </div>\n    </mat-tab>\n\n    <!-- TAB: 2 -->\n    <mat-tab\n      label=\"Second\"\n      class=\"ion-padding\"\n      appSubMenuTab\n      [subMenuIcon]=\"{ icon: 'settings' }\"\n      [subMenuTitle]=\"$secondTabTitle | async\"\n    >\n      <ng-template mat-tab-label>\n        <ion-label [innerHTML]=\"$secondTabTitle | async\"></ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        <p>A second tab</p>\n\n        <p *ngIf=\"showOtherLinks\">\n          Navigate to :\n          <a [routerLink]=\"childPath + '/1'\">{{ childPath }}/1</a>\n          <br />\n          Navigate to :\n          <a [routerLink]=\"childPath + '/2'\">{{ childPath }}/2</a>\n        </p>\n\n        <p>\n          <ion-button (click)=\"changeSecondTabTitle($event)\">Change tab label</ion-button>\n        </p>\n      </div>\n    </mat-tab>\n\n    <!-- TAB: 3 -->\n    <mat-tab\n      [label]=\"thirdTabTitle\"\n      class=\"ion-padding\"\n      [disabled]=\"!showThirdTab && !toggleThird.checked\"\n      appSubMenuTab\n      [subMenuIcon]=\"{ icon: 'none' }\"\n    >\n      <ng-template mat-tab-label>\n        <ion-label matBadge=\"1\" matBadgeColor=\"primary\" matBadgeOverlap=\"false\" matBadgeSize=\"small\">\n          {{ thirdTabTitle }}\n        </ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">A third tab</div>\n    </mat-tab>\n\n    <!-- TAB: 4 -->\n    <mat-tab appSubMenuTab [subMenuIcon]=\"{ icon: 'person' }\" label=\"Sub Tab\" class=\"ion-padding\">\n      <ng-template mat-tab-label>\n        <ion-label>Sub Tab</ion-label>\n      </ng-template>\n\n      <mat-tab-group\n        #subTabGroup\n        [(selectedIndex)]=\"subSelectedTabIndex\"\n        (selectedTabChange)=\"onTabChange($event, 'subtab')\"\n        class=\"mat-mdc-tab-disabled-hidden\"\n        dynamicHeight\n      >\n        <mat-tab label=\"Sub1\" class=\"ion-padding\">\n          <ng-template mat-tab-label>\n            <ion-label>Sub1</ion-label>\n          </ng-template>\n\n          <div class=\"ion-padding\">\n            <p>First SubTab</p>\n          </div>\n        </mat-tab>\n\n        <mat-tab label=\"Sub2\" class=\"ion-padding\">\n          <ng-template mat-tab-label>\n            <ion-label>Sub2</ion-label>\n          </ng-template>\n\n          <div class=\"ion-padding\">\n            <p>Second SubTab</p>\n          </div>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-tab>\n  </mat-tab-group>\n</ion-content>\n", styles: [".menu-item{padding-left:0 px}\n"] }]
+            args: [{ selector: 'app-testing-menu-other', template: "<app-toolbar [defaultBackHref]=\"parentPath\">\n  <ion-title [innerHTML]=\"$title | async\"></ion-title>\n</app-toolbar>\n\n<ion-content>\n  <mat-tab-group\n    #tabGroup\n    [(selectedIndex)]=\"selectedTabIndex\"\n    (selectedTabChange)=\"onTabChange($event)\"\n    class=\"mat-mdc-tab-disabled-hidden\"\n    dynamicHeight\n    [mat-stretch-tabs]=\"toggleStretchTab.checked\"\n  >\n    <!-- TAB: 1 -->\n    <mat-tab\n      label=\"Details\"\n      class=\"ion-padding\"\n      appSubMenuTab\n      [subMenuTitle]=\"($title | async) || ''\"\n      [parentPath]=\"parentPath\"\n    >\n      <ng-template mat-tab-label>\n        <mat-icon>information-circle</mat-icon>\n        <ion-label>Details</ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        <p>A first tab</p>\n\n        <p [class.cdk-visually-hidden]=\"showThirdTab\">\n          <ion-toggle #toggleThird>Toggle Third Tab</ion-toggle>\n        </p>\n\n        <p>\n          <ion-toggle #toggleStretchTab>Stretch Tabs</ion-toggle>\n        </p>\n\n        <p>\n          <ion-button (click)=\"changeTitle($event)\">Change page title</ion-button>\n\n          <ion-button (click)=\"addSubMenuItem($event)\">Add sub menu other 3</ion-button>\n\n          <ion-button (click)=\"addOutsideRouteSubMenuItem($event, true)\">\n            Add sub menu (outside route) - pinned\n          </ion-button>\n\n          <ion-button (click)=\"addOutsideRouteSubMenuItem($event, false)\">\n            Add sub menu (outside route) - not pinned\n          </ion-button>\n        </p>\n\n        <p>\n          &nbsp;&nbsp;\n          <ion-button (click)=\"enableMenu(false)\" *ngIf=\"menuService.enabled | async\">Disable menu</ion-button>\n          <ion-button (click)=\"enableMenu(true)\" *ngIf=\"(menuService.enabled | async) !== true\">Enable menu</ion-button>\n          <ion-button (click)=\"toggleSplitPaneWhen()\" [disabled]=\"(menuService.enabled | async) !== true\">\n            Toggle split pane\n          </ion-button>\n        </p>\n      </div>\n    </mat-tab>\n\n    <!-- TAB: 2 -->\n    <mat-tab\n      label=\"Second\"\n      class=\"ion-padding\"\n      appSubMenuTab\n      [subMenuIcon]=\"{ icon: 'settings' }\"\n      [subMenuTitle]=\"$secondTabTitle | async\"\n    >\n      <ng-template mat-tab-label>\n        <mat-icon><ion-icon name=\"settings\"></ion-icon></mat-icon>\n        <ion-label [innerHTML]=\"$secondTabTitle | async\"></ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        <p>A second tab</p>\n\n        <p *ngIf=\"showOtherLinks\">\n          Navigate to :\n          <a [routerLink]=\"childPath + '/1'\">{{ childPath }}/1</a>\n          <br />\n          Navigate to :\n          <a [routerLink]=\"childPath + '/2'\">{{ childPath }}/2</a>\n        </p>\n\n        <p>\n          <ion-button (click)=\"changeSecondTabTitle($event)\">Change tab label</ion-button>\n        </p>\n      </div>\n    </mat-tab>\n\n    <!-- TAB: 3 -->\n    <mat-tab\n      [label]=\"thirdTabTitle\"\n      class=\"ion-padding\"\n      [disabled]=\"!showThirdTab && !toggleThird.checked\"\n      appSubMenuTab\n      [subMenuBadge]=\"$thirdTabBadge | async\"\n      [subMenuIcon]=\"{ icon: 'none' }\"\n    >\n      <ng-template mat-tab-label>\n        <ion-label [matBadge]=\"$thirdTabBadge | async\" matBadgeColor=\"primary\" matBadgeOverlap=\"false\" matBadgeSize=\"small\">\n          {{ thirdTabTitle }}\n        </ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        <p>\n          A third tab (with a badge)\n        </p>\n        <ion-button (click)=\"incrementThirdTabBadge()\">Increment badge count</ion-button>\n      </div>\n    </mat-tab>\n\n    <!-- TAB: 4 -->\n    <mat-tab appSubMenuTab [subMenuIcon]=\"{ icon: 'person' }\" label=\"Sub Tab\" class=\"ion-padding\">\n      <ng-template mat-tab-label>\n        <mat-icon><ion-icon name=\"person\"></ion-icon></mat-icon>\n        <ion-label>Sub Tab</ion-label>\n      </ng-template>\n\n      <mat-tab-group\n        #subTabGroup\n        [(selectedIndex)]=\"subSelectedTabIndex\"\n        (selectedTabChange)=\"onTabChange($event, 'subtab')\"\n        class=\"mat-mdc-tab-disabled-hidden\"\n        dynamicHeight\n      >\n        <mat-tab label=\"Sub1\" class=\"ion-padding\">\n          <ng-template mat-tab-label>\n            <ion-label>Sub1</ion-label>\n          </ng-template>\n\n          <div class=\"ion-padding\">\n            <p>First SubTab</p>\n          </div>\n        </mat-tab>\n\n        <mat-tab label=\"Sub2\" class=\"ion-padding\">\n          <ng-template mat-tab-label>\n            <ion-label>Sub2</ion-label>\n          </ng-template>\n\n          <div class=\"ion-padding\">\n            <p>Second SubTab</p>\n          </div>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-tab>\n  </mat-tab-group>\n</ion-content>\n", styles: [".menu-item{padding-left:0 px}\n"] }]
         }], ctorParameters: () => [{ type: i1$6.ActivatedRoute }, { type: i1$6.Router }, { type: i2$1.NavController }, { type: i2$1.AlertController }, { type: i1$1.TranslateService }, { type: MenuService }] });
 
 const routes$5 = [
@@ -49901,7 +49934,7 @@ class Table2TestPage extends AppTable {
                 provide: AppTable,
                 useExisting: forwardRef(() => Table2TestPage),
             },
-        ], viewQueries: [{ propertyName: "filterExpansionPanel", first: true, predicate: MatExpansionPanel, descendants: true, static: true }, { propertyName: "infiniteScroll", first: true, predicate: IonInfiniteScroll, descendants: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar\n  color=\"primary\"\n  [canGoBack]=\"true\"\n  [hasValidate]=\"(loadingSubject | async) !== true && (dirtySubject | async) === true\"\n  (onValidate)=\"save()\"\n  [backHref]=\"'/testing'\"\n>\n  <ion-title>Table 2 (click to select)</ion-title>\n\n  <ion-buttons slot=\"end\">\n    @if (selection | isEmptySelection) {\n      <input matInput type=\"number\" step=\"1\" style=\"color: black; width: 50px\" [(ngModel)]=\"rowHeight\" />\n\n      <!-- Add -->\n      <button mat-icon-button *ngIf=\"canEdit && !mobile\" [title]=\"'COMMON.BTN_ADD' | translate\" (click)=\"addRow()\">\n        <mat-icon>add</mat-icon>\n      </button>\n\n      <!-- reset filter -->\n      <button mat-icon-button (click)=\"resetFilter()\" *ngIf=\"filterCriteriaCount\">\n        <mat-icon color=\"accent\">filter_list_alt</mat-icon>\n        <mat-icon class=\"icon-secondary\" style=\"left: 16px; top: 5px; font-weight: bold\">close</mat-icon>\n      </button>\n\n      <!-- show filter -->\n      <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n        <mat-icon\n          *ngIf=\"filterCriteriaCount; else emptyFilter\"\n          [matBadge]=\"filterCriteriaCount\"\n          matBadgeColor=\"accent\"\n          matBadgeSize=\"small\"\n          matBadgePosition=\"above after\"\n          aria-hidden=\"false\"\n        >\n          filter_list_alt\n        </mat-icon>\n        <ng-template #emptyFilter>\n          <mat-icon>filter_list_alt</mat-icon>\n        </ng-template>\n      </button>\n\n      <!-- save -->\n      <button mat-icon-button *ngIf=\"mobile\" [disabled]=\"(dirtySubject | async) !== true\" (click)=\"save()\">\n        <mat-icon>save</mat-icon>\n      </button>\n    } @else {\n      <!-- if row selection -->\n      <!-- delete -->\n      <button\n        mat-icon-button\n        *ngIf=\"canEdit\"\n        [title]=\"'COMMON.BTN_DELETE' | translate\"\n        (click)=\"deleteSelection($event)\"\n      >\n        <mat-icon>delete</mat-icon>\n      </button>\n\n      <!-- duplicate -->\n      <button\n        mat-icon-button\n        *ngIf=\"canEdit && selection.selected | isArrayLength: { equals: 1 }\"\n        [title]=\"'COMMON.BTN_DUPLICATE' | translate\"\n        (click)=\"duplicateRow($event, selection.selected[0])\"\n      >\n        <mat-icon>file_copy</mat-icon>\n      </button>\n    }\n  </ion-buttons>\n</app-toolbar>\n<ion-content class=\"ion-no-padding\">\n  <ion-refresher slot=\"fixed\" *ngIf=\"mobile\" (ionRefresh)=\"doRefresh($event)\">\n    <ion-refresher-content></ion-refresher-content>\n  </ion-refresher>\n\n  <!-- error -->\n  <ion-item *ngIf=\"mobile && error\" lines=\"none\" @slideUpDownAnimation>\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n  </ion-item>\n\n  <!-- search -->\n  <mat-expansion-panel\n    #filterExpansionPanel\n    class=\"filter-panel\"\n    [class.filter-panel-floating]=\"filterPanelFloating\"\n    [class.filter-panel-pinned]=\"!filterPanelFloating\"\n  >\n    <form class=\"form-container ion-padding-top\" [formGroup]=\"filterForm\" (ngSubmit)=\"applyFilterAndClosePanel($event)\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search text -->\n            <mat-form-field>\n              <mat-label>{{ 'TABLE.TESTING.SEARCH_TEXT' | translate }}</mat-label>\n              <ion-icon matPrefix name=\"search\"></ion-icon>\n              <input matInput formControlName=\"searchText\" autocomplete=\"off\" />\n              <button\n                mat-icon-button\n                matSuffix\n                tabindex=\"-1\"\n                type=\"button\"\n                (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\"\n              >\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <mat-action-row>\n      <!-- Counter  -->\n      <ion-label\n        [hidden]=\"(loadingSubject | async) || filterForm.dirty\"\n        [color]=\"empty && 'danger'\"\n        class=\"ion-padding\"\n      >\n        {{\n          (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT')\n            | translate\n              : {\n                  count: (totalRowCount | numberFormat),\n                }\n        }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <button\n        mat-icon-button\n        color=\"accent\"\n        *ngIf=\"filterPanelFloating\"\n        (click)=\"toggleFilterPanelFloating()\"\n        class=\"hidden-xs hidden-sm hidden-md\"\n        [title]=\"(filterPanelFloating ? 'COMMON.BTN_EXPAND' : 'COMMON.BTN_HIDE') | translate\"\n      >\n        <mat-icon>\n          <span style=\"transform: rotate(90deg)\">{{ filterPanelFloating ? '&#xbb;' : '&#xab;' }}</span>\n        </mat-icon>\n      </button>\n\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\" (click)=\"closeFilterPanel()\" [disabled]=\"loadingSubject | async\">\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button\n        mat-button\n        [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n        [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n        (click)=\"applyFilterAndClosePanel($event)\"\n      >\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <!-- table -->\n  <div [class.table-container]=\"!enableInfiniteScroll\">\n    <table\n      #table\n      mat-table\n      matSort\n      matSortDisableClear\n      [dataSource]=\"dataSource\"\n      [matSortActive]=\"defaultSortBy\"\n      [matSortDirection]=\"defaultSortDirection\"\n      [trackBy]=\"trackByFn\"\n      [style.--mat-row-height]=\"rowHeight + 'px'\"\n    >\n      <ng-container matColumnDef=\"select\" [sticky]=\"checkBoxSelection\" [class.mat-column-sticky]=\"checkBoxSelection\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!checkBoxSelection\">\n          @if (selection | isMultipleSelection) {\n            <mat-checkbox\n              [checked]=\"this | isAllSelected\"\n              [indeterminate]=\"this | isNotAllSelected\"\n              (change)=\"$event ? masterToggle() : null\"\n            ></mat-checkbox>\n          }\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!checkBoxSelection\">\n          <mat-checkbox [checked]=\"selection | isSelected: row\" (click)=\"toggleSelectRow($event, row)\"></mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id column -->\n      <ng-container matColumnDef=\"id\" [sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span mat-sort-header>\n            <ion-label title=\"Id\">#</ion-label>\n            <ion-label color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-form-field *ngIf=\"!readOnly && row.id === -1 && row.editing; else readOnlyId\">\n            <input\n              matInput\n              autocomplete=\"off\"\n              required\n              [formControl]=\"row.validator | formGetControl: 'id'\"\n              placeholder=\"Id\"\n              [appAutofocus]=\"true\"\n            />\n            <mat-error *ngIf=\"(row.validator | formGetControl: 'id').hasError('required')\" translate>\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n            <mat-error *ngIf=\"(row.validator | formGetControl: 'id').hasError('alreadyExists')\" translate>\n              ERROR.FIELD_NOT_UNIQUE_ID\n            </mat-error>\n          </mat-form-field>\n\n          <ng-template #readOnlyId>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue: 'id') || (row.currentData | propertyGet: 'id') }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Name column -->\n      <ng-container matColumnDef=\"name\">\n        <th mat-header-cell *matHeaderCellDef [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label [title]=\"'TABLE.TESTING.NAME' | translate\">{{ 'TABLE.TESTING.NAME' | translate }}</ion-label>\n            <ion-label color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'name'\">\n          <mat-form-field *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\">\n            <input\n              matInput\n              autocomplete=\"off\"\n              [required]=\"true\"\n              [formControl]=\"row.validator | formGetControl: 'name'\"\n              [placeholder]=\"'TABLE.TESTING.NAME' | translate\"\n              [appAutofocus]=\"row.id === -1 || focusColumn === 'name'\"\n            />\n            <ng-content select=\"[suffix]\"></ng-content>\n            <mat-error *ngIf=\"(row.validator | formGetControl: 'name').hasError('required')\" translate>\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n            <mat-error *ngIf=\"(row.validator | formGetControl: 'name').hasError('maxlength')\" translate>\n              ERROR.FIELD_MAX_LENGTH_COMPACT\n            </mat-error>\n            <mat-error *ngIf=\"(row.validator | formGetControl: 'name').hasError('minlength')\" translate>\n              ERROR.FIELD_MIN_LENGTH_COMPACT\n            </mat-error>\n          </mat-form-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue: 'name') || (row.currentData | propertyGet: 'name') }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Level column -->\n      <ng-container matColumnDef=\"levelId\">\n        <th mat-header-cell *matHeaderCellDef [resizable]=\"resizable\">\n          <span mat-sort-header>\n            <ion-label>{{ 'TABLE.TESTING.LEVEL_ID' | translate }}</ion-label>\n            <ion-label color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-autocomplete-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            panelWidth=\"750px\"\n            [formControl]=\"row.validator | formGetControl: 'levelId'\"\n            [placeholder]=\"'TABLE.TESTING.LEVEL_ID' | translate\"\n            floatLabel=\"never\"\n            [required]=\"true\"\n            [config]=\"autocompleteFields.level\"\n            [highlightAccent]=\"true\"\n          >\n            <mat-error matError *ngIf=\"(row.validator | formGetControl: 'levelId').hasError('invalid')\" translate>\n              ERROR.FIELD_INVALID\n            </mat-error>\n          </mat-autocomplete-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTitle>\n              {{\n                autocompleteFields.level?.displayWith(\n                  (row.validator | formGetValue: 'levelId') || (row.currentData | propertyGet: 'levelId')\n                ) ||\n                  ((row.validator | formGetValue: 'levelId') || (row.currentData | propertyGet: 'levelId')\n                    | referentialToString)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"boolean\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Boolean</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-boolean-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            floatLabel=\"never\"\n            [style]=\"'checkbox'\"\n            [formControl]=\"\n              (row.validator | formGetControl: 'boolean') || formBuilder.control(row.currentData['boolean'])\n            \"\n            [compact]=\"true\"\n          ></mat-boolean-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTitle>\n              {{\n                (row.validator | formGetValue: 'boolean') || (row.currentData | propertyGet: 'boolean')\n                  ? ('COMMON.YES' | translate)\n                  : ('COMMON.NO' | translate)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"boolean2\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Boolean 2</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-boolean-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            [floatLabel]=\"'never'\"\n            [style]=\"'radio'\"\n            [showRadio]=\"true\"\n            [formControl]=\"\n              (row.validator | formGetControl: 'boolean2') || formBuilder.control(row.currentData['boolean2'])\n            \"\n          ></mat-boolean-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTitle>\n              {{\n                (row.validator | formGetValue: 'boolean2') || (row.currentData | propertyGet: 'boolean2')\n                  ? ('COMMON.YES' | translate)\n                  : ('COMMON.NO' | translate)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"boolean3\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Boolean 3</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-boolean-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            floatLabel=\"never\"\n            [style]=\"'button'\"\n            [formControl]=\"\n              (row.validator | formGetControl: 'boolean2') || formBuilder.control(row.currentData['boolean2'])\n            \"\n          ></mat-boolean-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTitle>\n              {{\n                (row.validator | formGetValue: 'boolean2') || (row.currentData | propertyGet: 'boolean2')\n                  ? ('COMMON.YES' | translate)\n                  : ('COMMON.NO' | translate)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Actions buttons column -->\n      <app-actions-column\n        [stickyEnd]=\"stickyEnd\"\n        [canCancel]=\"false\"\n        [style]=\"'table'\"\n        (optionsClick)=\"openSelectColumnsModal($event)\"\n        (cancelOrDeleteClick)=\"cancelOrDelete($event.event, $event.row)\"\n        (confirmAndAddClick)=\"confirmAndAdd($event.event, $event.row)\"\n        (backward)=\"confirmAndBackward($event.event, $event.row)\"\n        (forward)=\"confirmAndForward($event.event, $event.row)\"\n        [cellTemplate]=\"cellInjection\"\n      >\n        <!-- cell injection-->\n        <ng-template #cellInjection let-row>\n          <span *ngIf=\"row.editing && !row.validator.dirty\">-</span>\n        </ng-template>\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr\n        mat-row\n        *matRowDef=\"let row; columns: displayedColumns\"\n        [class.mat-row-selected]=\"row.editing\"\n        [class.mat-row-error]=\"row.invalid\"\n        [class.mat-row-disabled]=\"!row.editing\"\n        [class.mat-row-dirty]=\"row.dirty\"\n        (click)=\"clickRow($event, row)\"\n        (keydown.escape)=\"escapeEditingRow($event)\"\n        [cdkTrapFocus]=\"row.invalid\"\n      ></tr>\n    </table>\n\n    <ng-container *ngIf=\"loadingSubject | async; else noResult\">\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    </ng-container>\n\n    <ng-template #noResult>\n      <ion-item *ngIf=\"totalRowCount === 0\">\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n      </ion-item>\n    </ng-template>\n\n    <ion-infinite-scroll\n      *ngIf=\"enableInfiniteScroll\"\n      [threshold]=\"mobile ? '10%' : '2%'\"\n      position=\"bottom\"\n      (ionInfinite)=\"fetchMore($event)\"\n    >\n      <ion-infinite-scroll-content\n        loadingSpinner=\"circles\"\n        [loadingText]=\"'COMMON.LOADING_DOTS' | translate\"\n      ></ion-infinite-scroll-content>\n    </ion-infinite-scroll>\n  </div>\n</ion-content>\n\n<ion-footer>\n  <!-- Paginator  -->\n  <mat-paginator\n    *ngIf=\"!enableInfiniteScroll\"\n    [length]=\"totalRowCount\"\n    [pageSize]=\"defaultPageSize\"\n    [pageSizeOptions]=\"defaultPageSizeOptions\"\n    showFirstLastButtons\n  ></mat-paginator>\n\n  <app-form-buttons-bar\n    *ngIf=\"canEdit && !mobile\"\n    (onCancel)=\"load()\"\n    (onSave)=\"save()\"\n    [disabled]=\"(loadingSubject | async) || !dirty\"\n  >\n    <!-- error -->\n    <ion-item *ngIf=\"error$ | async\" lines=\"none\">\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-label color=\"danger\" [innerHTML]=\"error | translate\"></ion-label>\n    </ion-item>\n  </app-form-buttons-bar>\n</ion-footer>\n\n<ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" *ngIf=\"canEdit && mobile\">\n  <ion-fab-button color=\"tertiary\" (click)=\"addRow($event)\">\n    <ion-icon name=\"add\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n", styles: [".table-container .mat-mdc-table .mat-column-select{min-width:30px}.table-container .mat-mdc-table .mat-column-id{min-width:30px;max-width:30px}.table-container .mat-mdc-table .mat-column-label,.table-container .mat-mdc-table .mat-column-name,.table-container .mat-mdc-table .mat-column-levelId,.table-container .mat-mdc-table .mat-column-statusId{min-width:150px}.table-container .mat-mdc-table .mat-column-comments{min-width:100px;max-width:100px}.table-container .mat-mdc-table .mat-column-updateDate{min-width:110px;max-width:110px}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$1.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: i2$1.IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i2$1.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i1$7.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$7.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$7.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$7.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$7.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$7.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i8$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i13$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i13$2.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i8.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "label", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "hideRequiredMarker", "mobile", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "reloadItemsOnFocus", "clearInvalidValueOnBlur", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "splitSearchText", "selectInputContentOnFocus", "selectInputContentOnFocusDelay", "previewImplicitValue", "showFavorites", "toggleFavoriteTitle", "favoriteItems", "colSizes", "class", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keydown.backspace", "keyup.enter", "selectionChange", "openedChange", "toggleFavorite"] }, { kind: "component", type: MatBooleanField, selector: "mat-boolean-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "subscriptSizing", "readonly", "required", "compact", "autofocus", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "clearable", "labelPosition", "tabindex", "showRadio", "value"], outputs: ["keyup.enter", "focus", "blur"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "directive", type: AutoTitleDirective, selector: "ion-label[appAutoTitle], mat-label[appAutoTitle]", inputs: ["appAutoTitle"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "id", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "component", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: ["disabled", "disabledCancel", "disabledEscape", "classList", "saveButtonColor", "backText", "cancelText", "nextText", "showBack", "showCancel", "showNext", "showSave"], outputs: ["onCancel", "onSave", "onNext", "onBack", "onSaveAndClose", "onSaveAndNext"] }, { kind: "component", type: ActionsColumnComponent, selector: "app-actions-column", inputs: ["matColumnDef", "style", "stickyEnd", "canCancel", "canConfirm", "canDelete", "canBackward", "canForward", "canConfirmAndAdd", "dirtyIcon", "optionsTitle", "class", "cellTemplateStart", "cellTemplate"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmEditCreateClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ResizableComponent, selector: "th[resizable]", inputs: ["resizable"], outputs: ["sizeChanged"] }, { kind: "directive", type: ResizableDirective, selector: "[resizable]", outputs: ["resizable", "fit"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: NumberFormatPipe, name: "numberFormat" }, { kind: "pipe", type: ArrayLengthPipe, name: "isArrayLength" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }, { kind: "pipe", type: IsEmptySelectionPipe, name: "isEmptySelection" }, { kind: "pipe", type: IsMultipleSelectionPipe, name: "isMultipleSelection" }, { kind: "pipe", type: IsAllSelectedPipe, name: "isAllSelected" }, { kind: "pipe", type: IsNotAllSelectedPipe, name: "isNotAllSelected" }, { kind: "pipe", type: ReferentialToStringPipe, name: "referentialToString" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "filterExpansionPanel", first: true, predicate: MatExpansionPanel, descendants: true, static: true }, { propertyName: "infiniteScroll", first: true, predicate: IonInfiniteScroll, descendants: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar\n  color=\"primary\"\n  [canGoBack]=\"true\"\n  [hasValidate]=\"(loadingSubject | async) !== true && (dirtySubject | async) === true\"\n  (onValidate)=\"save()\"\n  [backHref]=\"'/testing'\"\n>\n  <ion-title>Table 2 (click to select)</ion-title>\n\n  <ion-buttons slot=\"end\">\n    @if (selection | isEmptySelection) {\n      <input matInput type=\"number\" step=\"1\" style=\"color: black; width: 50px\" [(ngModel)]=\"rowHeight\" />\n\n      <!-- Add -->\n      <button mat-icon-button *ngIf=\"canEdit && !mobile\" [title]=\"'COMMON.BTN_ADD' | translate\" (click)=\"addRow()\">\n        <mat-icon>add</mat-icon>\n      </button>\n\n      <!-- reset filter -->\n      <button mat-icon-button (click)=\"resetFilter()\" *ngIf=\"filterCriteriaCount\">\n        <mat-icon color=\"accent\">filter_list_alt</mat-icon>\n        <mat-icon class=\"icon-secondary\" style=\"left: 16px; top: 5px; font-weight: bold\">close</mat-icon>\n      </button>\n\n      <!-- show filter -->\n      <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n        <mat-icon\n          *ngIf=\"filterCriteriaCount; else emptyFilter\"\n          [matBadge]=\"filterCriteriaCount\"\n          matBadgeColor=\"accent\"\n          matBadgeSize=\"small\"\n          matBadgePosition=\"above after\"\n          aria-hidden=\"false\"\n        >\n          filter_list_alt\n        </mat-icon>\n        <ng-template #emptyFilter>\n          <mat-icon>filter_list_alt</mat-icon>\n        </ng-template>\n      </button>\n\n      <!-- save -->\n      <button mat-icon-button *ngIf=\"mobile\" [disabled]=\"(dirtySubject | async) !== true\" (click)=\"save()\">\n        <mat-icon>save</mat-icon>\n      </button>\n    } @else {\n      <!-- if row selection -->\n      <!-- delete -->\n      <button\n        mat-icon-button\n        *ngIf=\"canEdit\"\n        [title]=\"'COMMON.BTN_DELETE' | translate\"\n        (click)=\"deleteSelection($event)\"\n      >\n        <mat-icon>delete</mat-icon>\n      </button>\n\n      <!-- duplicate -->\n      <button\n        mat-icon-button\n        *ngIf=\"canEdit && selection.selected | isArrayLength: { equals: 1 }\"\n        [title]=\"'COMMON.BTN_DUPLICATE' | translate\"\n        (click)=\"duplicateRow($event, selection.selected[0])\"\n      >\n        <mat-icon>file_copy</mat-icon>\n      </button>\n    }\n  </ion-buttons>\n</app-toolbar>\n<ion-content class=\"ion-no-padding\">\n  <ion-refresher slot=\"fixed\" *ngIf=\"mobile\" (ionRefresh)=\"doRefresh($event)\">\n    <ion-refresher-content></ion-refresher-content>\n  </ion-refresher>\n\n  <!-- error -->\n  <ion-item *ngIf=\"mobile && error\" lines=\"none\" @slideUpDownAnimation>\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n  </ion-item>\n\n  <!-- search -->\n  <mat-expansion-panel\n    #filterExpansionPanel\n    class=\"filter-panel\"\n    [class.filter-panel-floating]=\"filterPanelFloating\"\n    [class.filter-panel-pinned]=\"!filterPanelFloating\"\n  >\n    <form class=\"form-container ion-padding-top\" [formGroup]=\"filterForm\" (ngSubmit)=\"applyFilterAndClosePanel($event)\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search text -->\n            <mat-form-field>\n              <mat-label>{{ 'TABLE.TESTING.SEARCH_TEXT' | translate }}</mat-label>\n              <ion-icon matPrefix name=\"search\"></ion-icon>\n              <input matInput formControlName=\"searchText\" autocomplete=\"off\" />\n              <button\n                mat-icon-button\n                matSuffix\n                tabindex=\"-1\"\n                type=\"button\"\n                (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\"\n              >\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <mat-action-row>\n      <!-- Counter  -->\n      <ion-label\n        [hidden]=\"(loadingSubject | async) || filterForm.dirty\"\n        [color]=\"empty && 'danger'\"\n        class=\"ion-padding\"\n      >\n        {{\n          (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT')\n            | translate\n              : {\n                  count: (totalRowCount | numberFormat),\n                }\n        }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <button\n        mat-icon-button\n        color=\"accent\"\n        *ngIf=\"filterPanelFloating\"\n        (click)=\"toggleFilterPanelFloating()\"\n        class=\"hidden-xs hidden-sm hidden-md\"\n        [title]=\"(filterPanelFloating ? 'COMMON.BTN_EXPAND' : 'COMMON.BTN_HIDE') | translate\"\n      >\n        <mat-icon>\n          <span style=\"transform: rotate(90deg)\">{{ filterPanelFloating ? '&#xbb;' : '&#xab;' }}</span>\n        </mat-icon>\n      </button>\n\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\" (click)=\"closeFilterPanel()\" [disabled]=\"loadingSubject | async\">\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button\n        mat-button\n        [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n        [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n        (click)=\"applyFilterAndClosePanel($event)\"\n      >\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <!-- table -->\n  <div [class.table-container]=\"!enableInfiniteScroll\">\n    <table\n      #table\n      mat-table\n      matSort\n      matSortDisableClear\n      [dataSource]=\"dataSource\"\n      [matSortActive]=\"defaultSortBy\"\n      [matSortDirection]=\"defaultSortDirection\"\n      [trackBy]=\"trackByFn\"\n      [style.--mat-row-height]=\"rowHeight + 'px'\"\n    >\n      <ng-container matColumnDef=\"select\" [sticky]=\"checkBoxSelection\" [class.mat-column-sticky]=\"checkBoxSelection\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!checkBoxSelection\">\n          @if (selection | isMultipleSelection) {\n            <mat-checkbox\n              [checked]=\"this | isAllSelected\"\n              [indeterminate]=\"this | isNotAllSelected\"\n              (change)=\"$event ? masterToggle() : null\"\n            ></mat-checkbox>\n          }\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!checkBoxSelection\">\n          <mat-checkbox [checked]=\"selection | isSelected: row\" (click)=\"toggleSelectRow($event, row)\"></mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id column -->\n      <ng-container matColumnDef=\"id\" [sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span mat-sort-header>\n            <ion-label title=\"Id\">#</ion-label>\n            <ion-label color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-form-field *ngIf=\"!readOnly && row.id === -1 && row.editing; else readOnlyId\">\n            <input\n              matInput\n              autocomplete=\"off\"\n              required\n              [formControl]=\"row.validator | formGetControl: 'id'\"\n              placeholder=\"Id\"\n              [appAutofocus]=\"true\"\n            />\n            <mat-error *ngIf=\"(row.validator | formGetControl: 'id').hasError('required')\" translate>\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n            <mat-error *ngIf=\"(row.validator | formGetControl: 'id').hasError('alreadyExists')\" translate>\n              ERROR.FIELD_NOT_UNIQUE_ID\n            </mat-error>\n          </mat-form-field>\n\n          <ng-template #readOnlyId>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue: 'id') || (row.currentData | propertyGet: 'id') }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Name column -->\n      <ng-container matColumnDef=\"name\">\n        <th mat-header-cell *matHeaderCellDef [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label [title]=\"'TABLE.TESTING.NAME' | translate\">{{ 'TABLE.TESTING.NAME' | translate }}</ion-label>\n            <ion-label color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'name'\">\n          <mat-form-field *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\">\n            <input\n              matInput\n              autocomplete=\"off\"\n              [required]=\"true\"\n              [formControl]=\"row.validator | formGetControl: 'name'\"\n              [placeholder]=\"'TABLE.TESTING.NAME' | translate\"\n              [appAutofocus]=\"row.id === -1 || focusColumn === 'name'\"\n            />\n            <ng-content select=\"[suffix]\"></ng-content>\n            <mat-error *ngIf=\"(row.validator | formGetControl: 'name').hasError('required')\" translate>\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n            <mat-error *ngIf=\"(row.validator | formGetControl: 'name').hasError('maxlength')\" translate>\n              ERROR.FIELD_MAX_LENGTH_COMPACT\n            </mat-error>\n            <mat-error *ngIf=\"(row.validator | formGetControl: 'name').hasError('minlength')\" translate>\n              ERROR.FIELD_MIN_LENGTH_COMPACT\n            </mat-error>\n          </mat-form-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue: 'name') || (row.currentData | propertyGet: 'name') }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Level column -->\n      <ng-container matColumnDef=\"levelId\">\n        <th mat-header-cell *matHeaderCellDef [resizable]=\"resizable\">\n          <span mat-sort-header>\n            <ion-label>{{ 'TABLE.TESTING.LEVEL_ID' | translate }}</ion-label>\n            <ion-label color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-autocomplete-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            panelWidth=\"750px\"\n            [formControl]=\"row.validator | formGetControl: 'levelId'\"\n            [placeholder]=\"'TABLE.TESTING.LEVEL_ID' | translate\"\n            floatLabel=\"never\"\n            [required]=\"true\"\n            [config]=\"autocompleteFields.level\"\n            [highlightAccent]=\"true\"\n          >\n            <mat-error matError *ngIf=\"(row.validator | formGetControl: 'levelId').hasError('invalid')\" translate>\n              ERROR.FIELD_INVALID\n            </mat-error>\n          </mat-autocomplete-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTitle>\n              {{\n                autocompleteFields.level?.displayWith(\n                  (row.validator | formGetValue: 'levelId') || (row.currentData | propertyGet: 'levelId')\n                ) ||\n                  ((row.validator | formGetValue: 'levelId') || (row.currentData | propertyGet: 'levelId')\n                    | referentialToString)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"boolean\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Boolean</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-boolean-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            floatLabel=\"never\"\n            [style]=\"'checkbox'\"\n            [formControl]=\"\n              (row.validator | formGetControl: 'boolean') || formBuilder.control(row.currentData['boolean'])\n            \"\n            [compact]=\"true\"\n          ></mat-boolean-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTitle>\n              {{\n                (row.validator | formGetValue: 'boolean') || (row.currentData | propertyGet: 'boolean')\n                  ? ('COMMON.YES' | translate)\n                  : ('COMMON.NO' | translate)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"boolean2\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Boolean 2</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-boolean-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            [floatLabel]=\"'never'\"\n            [style]=\"'radio'\"\n            [showRadio]=\"true\"\n            [formControl]=\"\n              (row.validator | formGetControl: 'boolean2') || formBuilder.control(row.currentData['boolean2'])\n            \"\n          ></mat-boolean-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTitle>\n              {{\n                (row.validator | formGetValue: 'boolean2') || (row.currentData | propertyGet: 'boolean2')\n                  ? ('COMMON.YES' | translate)\n                  : ('COMMON.NO' | translate)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"boolean3\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Boolean 3</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-boolean-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            floatLabel=\"never\"\n            [style]=\"'button'\"\n            [formControl]=\"\n              (row.validator | formGetControl: 'boolean2') || formBuilder.control(row.currentData['boolean2'])\n            \"\n          ></mat-boolean-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTitle>\n              {{\n                (row.validator | formGetValue: 'boolean2') || (row.currentData | propertyGet: 'boolean2')\n                  ? ('COMMON.YES' | translate)\n                  : ('COMMON.NO' | translate)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Actions buttons column -->\n      <app-actions-column\n        [stickyEnd]=\"stickyEnd\"\n        [canCancel]=\"false\"\n        [style]=\"'table'\"\n        (optionsClick)=\"openSelectColumnsModal($event)\"\n        (cancelOrDeleteClick)=\"cancelOrDelete($event.event, $event.row)\"\n        (confirmAndAddClick)=\"confirmAndAdd($event.event, $event.row)\"\n        (backward)=\"confirmAndBackward($event.event, $event.row)\"\n        (forward)=\"confirmAndForward($event.event, $event.row)\"\n        [cellTemplate]=\"cellInjection\"\n      >\n        <!-- cell injection-->\n        <ng-template #cellInjection let-row>\n          <span *ngIf=\"row.editing && !row.validator.dirty\">-</span>\n        </ng-template>\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr\n        mat-row\n        *matRowDef=\"let row; columns: displayedColumns\"\n        [class.mat-row-selected]=\"row.editing\"\n        [class.mat-row-error]=\"row.invalid\"\n        [class.mat-row-disabled]=\"!row.editing\"\n        [class.mat-row-dirty]=\"row.dirty\"\n        (click)=\"clickRow($event, row)\"\n        (keydown.escape)=\"escapeEditingRow($event)\"\n        [cdkTrapFocus]=\"row.invalid\"\n      ></tr>\n    </table>\n\n    <ng-container *ngIf=\"loadingSubject | async; else noResult\">\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    </ng-container>\n\n    <ng-template #noResult>\n      <ion-item *ngIf=\"totalRowCount === 0\">\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n      </ion-item>\n    </ng-template>\n\n    <ion-infinite-scroll\n      *ngIf=\"enableInfiniteScroll\"\n      [threshold]=\"mobile ? '10%' : '2%'\"\n      position=\"bottom\"\n      (ionInfinite)=\"fetchMore($event)\"\n    >\n      <ion-infinite-scroll-content\n        loadingSpinner=\"circles\"\n        [loadingText]=\"'COMMON.LOADING_DOTS' | translate\"\n      ></ion-infinite-scroll-content>\n    </ion-infinite-scroll>\n  </div>\n</ion-content>\n\n<ion-footer>\n  <!-- Paginator  -->\n  <mat-paginator\n    *ngIf=\"!enableInfiniteScroll\"\n    [length]=\"totalRowCount\"\n    [pageSize]=\"defaultPageSize\"\n    [pageSizeOptions]=\"defaultPageSizeOptions\"\n    showFirstLastButtons\n  ></mat-paginator>\n\n  <app-form-buttons-bar\n    *ngIf=\"canEdit && !mobile\"\n    (onCancel)=\"load()\"\n    (onSave)=\"save()\"\n    [disabled]=\"(loadingSubject | async) || !dirty\"\n  >\n    <!-- error -->\n    <ion-item *ngIf=\"error$ | async\" lines=\"none\">\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-label color=\"danger\" [innerHTML]=\"error | translate\"></ion-label>\n    </ion-item>\n  </app-form-buttons-bar>\n</ion-footer>\n\n<ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" *ngIf=\"canEdit && mobile\">\n  <ion-fab-button color=\"tertiary\" (click)=\"addRow($event)\">\n    <ion-icon name=\"add\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n", styles: [".table-container .mat-mdc-table .mat-column-select{min-width:30px}.table-container .mat-mdc-table .mat-column-id{min-width:30px;max-width:30px}.table-container .mat-mdc-table .mat-column-label,.table-container .mat-mdc-table .mat-column-name,.table-container .mat-mdc-table .mat-column-levelId,.table-container .mat-mdc-table .mat-column-statusId{min-width:150px}.table-container .mat-mdc-table .mat-column-comments{min-width:100px;max-width:100px}.table-container .mat-mdc-table .mat-column-updateDate{min-width:110px;max-width:110px}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$1.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: i2$1.IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i2$1.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i1$7.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$7.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$7.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$7.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$7.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$7.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i8$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9$3.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i13$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i13$2.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i9.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "label", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "hideRequiredMarker", "mobile", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "reloadItemsOnFocus", "clearInvalidValueOnBlur", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "splitSearchText", "selectInputContentOnFocus", "selectInputContentOnFocusDelay", "previewImplicitValue", "showFavorites", "toggleFavoriteTitle", "favoriteItems", "colSizes", "class", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keydown.backspace", "keyup.enter", "selectionChange", "openedChange", "toggleFavorite"] }, { kind: "component", type: MatBooleanField, selector: "mat-boolean-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "subscriptSizing", "readonly", "required", "compact", "autofocus", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "clearable", "labelPosition", "tabindex", "showRadio", "value"], outputs: ["keyup.enter", "focus", "blur"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "directive", type: AutoTitleDirective, selector: "ion-label[appAutoTitle], mat-label[appAutoTitle]", inputs: ["appAutoTitle"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "id", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "component", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: ["disabled", "disabledCancel", "disabledEscape", "classList", "saveButtonColor", "backText", "cancelText", "nextText", "showBack", "showCancel", "showNext", "showSave"], outputs: ["onCancel", "onSave", "onNext", "onBack", "onSaveAndClose", "onSaveAndNext"] }, { kind: "component", type: ActionsColumnComponent, selector: "app-actions-column", inputs: ["matColumnDef", "style", "stickyEnd", "canCancel", "canConfirm", "canDelete", "canBackward", "canForward", "canConfirmAndAdd", "dirtyIcon", "optionsTitle", "class", "cellTemplateStart", "cellTemplate"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmEditCreateClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ResizableComponent, selector: "th[resizable]", inputs: ["resizable"], outputs: ["sizeChanged"] }, { kind: "directive", type: ResizableDirective, selector: "[resizable]", outputs: ["resizable", "fit"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: NumberFormatPipe, name: "numberFormat" }, { kind: "pipe", type: ArrayLengthPipe, name: "isArrayLength" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }, { kind: "pipe", type: IsEmptySelectionPipe, name: "isEmptySelection" }, { kind: "pipe", type: IsMultipleSelectionPipe, name: "isMultipleSelection" }, { kind: "pipe", type: IsAllSelectedPipe, name: "isAllSelected" }, { kind: "pipe", type: IsNotAllSelectedPipe, name: "isNotAllSelected" }, { kind: "pipe", type: ReferentialToStringPipe, name: "referentialToString" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: Table2TestPage, decorators: [{
             type: Component,
@@ -50172,7 +50205,7 @@ class TableTestPage extends AppTable {
                 provide: AppTable,
                 useExisting: forwardRef(() => TableTestPage),
             },
-        ], viewQueries: [{ propertyName: "filterExpansionPanel", first: true, predicate: MatExpansionPanel, descendants: true, static: true }, { propertyName: "infiniteScroll", first: true, predicate: IonInfiniteScroll, descendants: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar\n  color=\"primary\"\n  [canGoBack]=\"true\"\n  [hasValidate]=\"(loadingSubject | async) !== true && (dirtySubject | async) === true\"\n  (onValidate)=\"save()\"\n  [backHref]=\"'/testing'\"\n>\n  <ion-title>Table (click to edit)</ion-title>\n  <ion-buttons slot=\"end\">\n    @if (selection | isEmptySelection) {\n      <input matInput type=\"number\" step=\"1\" style=\"color: black; width: 50px\" [(ngModel)]=\"rowHeight\" />\n\n      <!-- Add -->\n      <button mat-icon-button *ngIf=\"canEdit && !mobile\" [title]=\"'COMMON.BTN_ADD' | translate\" (click)=\"addRow()\">\n        <mat-icon>add</mat-icon>\n      </button>\n\n      <!-- reset filter -->\n      <button mat-icon-button (click)=\"resetFilter()\" *ngIf=\"filterCriteriaCount\">\n        <mat-icon color=\"accent\">filter_list_alt</mat-icon>\n        <mat-icon class=\"icon-secondary\" style=\"left: 16px; top: 5px; font-weight: bold\">close</mat-icon>\n      </button>\n\n      <!-- show filter -->\n      <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n        <mat-icon\n          *ngIf=\"filterCriteriaCount; else emptyFilter\"\n          [matBadge]=\"filterCriteriaCount\"\n          matBadgeColor=\"accent\"\n          matBadgeSize=\"small\"\n          matBadgePosition=\"above after\"\n          aria-hidden=\"false\"\n        >\n          filter_list_alt\n        </mat-icon>\n        <ng-template #emptyFilter>\n          <mat-icon>filter_list_alt</mat-icon>\n        </ng-template>\n      </button>\n\n      <!-- save -->\n      <button mat-icon-button *ngIf=\"mobile\" [disabled]=\"(dirtySubject | async) !== true\" (click)=\"save()\">\n        <mat-icon>save</mat-icon>\n      </button>\n\n      <!-- start/stop timer to auto-load data -->\n      <ion-button *ngIf=\"!timer\" (click)=\"startTimer()\">Start reload</ion-button>\n      <ion-button *ngIf=\"timer\" (click)=\"stopTimer()\" color=\"accent\">Stop reload</ion-button>\n    } @else {\n      <!-- if row selection -->\n      <!-- delete -->\n      <button\n        mat-icon-button\n        *ngIf=\"canEdit\"\n        [title]=\"'COMMON.BTN_DELETE' | translate\"\n        (click)=\"deleteSelection($event)\"\n      >\n        <mat-icon>delete</mat-icon>\n      </button>\n\n      <!-- duplicate -->\n      <button\n        mat-icon-button\n        *ngIf=\"canEdit && selection.selected | isArrayLength: { equals: 1 }\"\n        [title]=\"'COMMON.BTN_DUPLICATE' | translate\"\n        (click)=\"duplicateRow($event, selection.selected[0])\"\n      >\n        <mat-icon>file_copy</mat-icon>\n      </button>\n    }\n  </ion-buttons>\n</app-toolbar>\n<ion-content class=\"ion-no-padding\">\n  <ion-refresher slot=\"fixed\" *ngIf=\"mobile\" (ionRefresh)=\"doRefresh($event)\">\n    <ion-refresher-content></ion-refresher-content>\n  </ion-refresher>\n\n  <!-- error -->\n  <ion-item *ngIf=\"mobile && error\" lines=\"none\" @slideUpDownAnimation>\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n  </ion-item>\n\n  <!-- search -->\n  <mat-expansion-panel\n    #filterExpansionPanel\n    class=\"filter-panel\"\n    [class.filter-panel-floating]=\"filterPanelFloating\"\n    [class.filter-panel-pinned]=\"!filterPanelFloating\"\n  >\n    <form class=\"form-container ion-padding-top\" [formGroup]=\"filterForm\" (ngSubmit)=\"applyFilterAndClosePanel($event)\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search text -->\n            <mat-form-field>\n              <mat-label>{{ 'TABLE.TESTING.SEARCH_TEXT' | translate }}</mat-label>\n              <ion-icon matPrefix name=\"search\"></ion-icon>\n              <input matInput formControlName=\"searchText\" autocomplete=\"off\" />\n              <button\n                mat-icon-button\n                matSuffix\n                tabindex=\"-1\"\n                type=\"button\"\n                (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\"\n              >\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <mat-action-row>\n      <!-- Counter  -->\n      <ion-label\n        [hidden]=\"(loadingSubject | async) || filterForm.dirty\"\n        [color]=\"empty && 'danger'\"\n        class=\"ion-padding\"\n      >\n        {{\n          (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT')\n            | translate\n              : {\n                  count: (totalRowCount | numberFormat),\n                }\n        }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <button\n        mat-icon-button\n        color=\"accent\"\n        *ngIf=\"filterPanelFloating\"\n        (click)=\"toggleFilterPanelFloating()\"\n        class=\"hidden-xs hidden-sm hidden-md\"\n        [title]=\"(filterPanelFloating ? 'COMMON.BTN_EXPAND' : 'COMMON.BTN_HIDE') | translate\"\n      >\n        <mat-icon>\n          <span style=\"transform: rotate(90deg)\">{{ filterPanelFloating ? '&#xbb;' : '&#xab;' }}</span>\n        </mat-icon>\n      </button>\n\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\" (click)=\"closeFilterPanel()\" [disabled]=\"loadingSubject | async\">\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button\n        mat-button\n        [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n        [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n        (click)=\"applyFilterAndClosePanel($event)\"\n      >\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <!-- table -->\n  <div [class.table-container]=\"!enableInfiniteScroll\">\n    <table\n      #table\n      mat-table\n      matSort\n      matSortDisableClear\n      [dataSource]=\"dataSource\"\n      [matSortActive]=\"defaultSortBy\"\n      [matSortDirection]=\"defaultSortDirection\"\n      [trackBy]=\"trackByFn\"\n      [style.--mat-row-height]=\"rowHeight + 'px'\"\n    >\n      <!-- group header cells -->\n      <ng-container matColumnDef=\"top-start\" [sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!canEdit\" [attr.colspan]=\"2\">\n          <!-- start spacer -->\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"group-1\">\n        <th mat-header-cell *matHeaderCellDef [attr.colspan]=\"3\">\n          <ion-label translate>{{ i18nColumnPrefix + 'GROUP_1' }}</ion-label>\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"group-2\">\n        <th mat-header-cell *matHeaderCellDef [attr.colspan]=\"displayedColumns.length - 6\">\n          <ion-label translate>{{ i18nColumnPrefix + 'GROUP_2' }}</ion-label>\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"top-end\" [stickyEnd]=\"stickyEnd\">\n        <th mat-header-cell *matHeaderCellDef>\n          <!-- end spacer -->\n          <ion-label></ion-label>\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"select\" [sticky]=\"sticky\" [class.mat-column-sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!canEdit\">\n          @if (selection | isMultipleSelection) {\n            <mat-checkbox\n              [checked]=\"this | isAllSelected\"\n              [indeterminate]=\"this | isNotAllSelected\"\n              (change)=\"$event ? masterToggle() : null\"\n            ></mat-checkbox>\n          }\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!canEdit\">\n          <mat-checkbox\n            (click)=\"toggleSelectRow($event, row)\"\n            [checked]=\"selection | isSelected: row\"\n            tabindex=\"-1\"\n          ></mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id column -->\n      <ng-container matColumnDef=\"id\" [sticky]=\"sticky\" [class.mat-column-sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label>#</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">{{ row.currentData?.id }}</td>\n      </ng-container>\n\n      <!-- Label column -->\n      <ng-container matColumnDef=\"label\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.LABEL</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'label'\">\n          @if (row.editing) {\n            <mat-form-field>\n              <input\n                matInput\n                autocomplete=\"off\"\n                [formControl]=\"row.validator.controls['label']\"\n                [placeholder]=\"'TABLE.TESTING.LABEL' | translate\"\n                [appAutofocus]=\"focusColumn === 'label'\"\n                [readonly]=\"!row.editing\"\n              />\n              <mat-error *ngIf=\"row.validator.controls['label'].hasError('required')\" translate>\n                ERROR.FIELD_REQUIRED\n              </mat-error>\n            </mat-form-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'label' }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- Name column -->\n      <ng-container matColumnDef=\"name\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.NAME</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'name'\">\n          @if (row.editing) {\n            <mat-form-field>\n              <input\n                matInput\n                [formControl]=\"row.validator?.controls.name\"\n                [placeholder]=\"'TABLE.TESTING.NAME' | translate\"\n                [appAutofocus]=\"focusColumn === 'name'\"\n              />\n              <mat-error *ngIf=\"row.validator?.controls.name.hasError('required')\" translate>\n                ERROR.FIELD_REQUIRED\n              </mat-error>\n            </mat-form-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'name' }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- Level column -->\n      <ng-container matColumnDef=\"levelId\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.LEVEL_ID</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'levelId'\">\n          @if (row.editing) {\n            <mat-autocomplete-field\n              [formControl]=\"row.validator.controls.levelId\"\n              [placeholder]=\"'TABLE.TESTING.LEVEL_ID' | translate\"\n              floatLabel=\"never\"\n              [config]=\"autocompleteFields.level\"\n              [readonly]=\"!row.editing\"\n              [autofocus]=\"focusColumn === 'levelId'\"\n              [required]=\"true\"\n            ></mat-autocomplete-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'levelId' | referentialToString: autocompleteFields.level.attributes }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- Status column  -->\n      <ng-container matColumnDef=\"statusId\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span translate>USER.STATUS</span>\n        </th>\n        <td\n          mat-cell\n          *matCellDef=\"let row\"\n          [class.mat-form-field-disabled]=\"!row.editing\"\n          (click)=\"focusColumn = 'statusId'\"\n        >\n          <mat-form-field>\n            <mat-select\n              [formControl]=\"row.validator.controls['statusId']\"\n              [placeholder]=\"i18nColumnPrefix + 'STATUS_ID' | translate\"\n            >\n              <mat-option *ngFor=\"let item of statusList\" [value]=\"item.id\">\n                <mat-icon><ion-icon [name]=\"item.icon\"></ion-icon></mat-icon>\n                <mat-label>{{ item.label | translate }}</mat-label>\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf=\"row.validator.controls['statusId'].hasError('required')\" translate>\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n      <!-- Enum column  -->\n      <!-- NOTE : Never used in table  -->\n      <!--      <ng-container matColumnDef=\"values\">-->\n      <!--        <th mat-header-cell *matHeaderCellDef>-->\n      <!--          <span translate>Enums</span>-->\n      <!--        </th>-->\n      <!--        <td mat-cell *matCellDef=\"let row\" [class.mat-form-field-disabled]=\"!row.editing\">-->\n      <!--          <app-form-field-->\n      <!--            [formControl]=\"row.validator|formGetControl:'properties.values'\"-->\n      <!--            [definition]=\"columnDefinitions['values']\"-->\n      <!--          ></app-form-field>-->\n      <!--        </td>-->\n      <!--      </ng-container>-->\n\n      <!-- boolean (as checkbox) -->\n      <ng-container matColumnDef=\"boolean\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"true\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Boolean</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          @if (!readOnly && row.editing) {\n            <mat-boolean-field\n              floatLabel=\"never\"\n              [style]=\"'checkbox'\"\n              placeholder=\"Oui/Non\"\n              [formControl]=\"row.validator | formGetControl: 'properties.boolean'\"\n              [compact]=\"true\"\n            ></mat-boolean-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue: 'properties.boolean') ? '&#x2714;' : '&#x2718;' }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- date -->\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"true\" class=\"mat-cell-date-time\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Date</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-cell-date-time\" (click)=\"focusColumn = 'date'\">\n          @if (!readOnly && row.editing) {\n            <mat-date-time-field\n              floatLabel=\"never\"\n              [formControl]=\"row.validator | formGetControl: 'properties.date'\"\n              [autofocus]=\"focusColumn === 'date'\"\n              placeholder=\"Date/Time\"\n              [compact]=\"true\"\n            ></mat-date-time-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'properties.date' | dateFormat: { time: true } }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- latitude -->\n      <ng-container matColumnDef=\"latitude\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"true\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Latitude</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'latitude'\">\n          @if (!readOnly && row.editing) {\n            <mat-latlong-field\n              floatLabel=\"never\"\n              [formControl]=\"row.validator | formGetControl: 'properties.latitude'\"\n              placeholder=\"Latitude\"\n              [latLongPattern]=\"'DDMM'\"\n              [type]=\"'latitude'\"\n              [autofocus]=\"focusColumn === 'latitude'\"\n            ></mat-latlong-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{\n                row.validator\n                  | formGetValue: 'properties.latitude'\n                  | latitudeFormat: { pattern: 'DDMM', placeholderChar: '0' }\n              }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- Creation date column -->\n      <ng-container matColumnDef=\"updateDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.UPDATE_DATE</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-form-field-disabled\">\n          <ion-text color=\"medium\" *ngIf=\"row.id !== -1\">\n            <small>\n              {{ row.validator | formGetValue: 'creationDate' | dateFormat: { time: true } }}\n            </small>\n          </ion-text>\n        </td>\n      </ng-container>\n\n      <!-- Comment column -->\n      <ng-container matColumnDef=\"comments\">\n        <th mat-header-cell *matHeaderCellDef>\n          <ion-label translate>TABLE.TESTING.COMMENTS</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-form-field *ngIf=\"row.editing; else iconComment\">\n            <!--<textarea matInput [formControl]=\"row.validator?.controls.comments\"\n                      [placeholder]=\"'TABLE.TESTING.COMMENTS'|translate\"\n                      [readonly]=\"!row.editing\"></textarea>-->\n\n            <input\n              type=\"text\"\n              matInput\n              [formControl]=\"row.validator?.controls.comments\"\n              [placeholder]=\"'TABLE.TESTING.COMMENTS' | translate\"\n              [readonly]=\"!row.editing\"\n            />\n          </mat-form-field>\n\n          <ng-template #iconComment>\n            <ion-icon\n              [color]=\"row.validator?.controls.comments.value ? 'tertiary' : 'medium'\"\n              name=\"chatbox\"\n              slot=\"icon-only\"\n            ></ion-icon>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Actions column -->\n      <app-nav-actions-column\n        [stickyEnd]=\"stickyEnd\"\n        (optionsClick)=\"openSelectColumnsModal($event)\"\n        [cellTemplate]=\"cellInjection\"\n        [showPending]=\"true\"\n      >\n        <!-- cell injection-->\n        <ng-template #cellInjection let-row>\n          <span *ngIf=\"row.editing && !row.validator.dirty\">-</span>\n        </ng-template>\n      </app-nav-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"groupColumns\"></tr>\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr\n        mat-row\n        *matRowDef=\"let row; columns: displayedColumns\"\n        [class.mat-mdc-row-selected]=\"row.editing\"\n        [class.mat-mdc-row-error]=\"row.invalid\"\n        [class.mat-mdc-row-disabled]=\"!row.editing\"\n        [class.mat-mdc-row-dirty]=\"row.dirty\"\n        (click)=\"clickRow($event, row)\"\n        (keydown.escape)=\"escapeEditingRow($event)\"\n        [cdkTrapFocus]=\"row.invalid\"\n      ></tr>\n    </table>\n\n    <ng-container *ngIf=\"loadingSubject | async; else noResult\">\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    </ng-container>\n\n    <ng-template #noResult>\n      <ion-item *ngIf=\"totalRowCount === 0\">\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n      </ion-item>\n    </ng-template>\n\n    <ion-infinite-scroll\n      *ngIf=\"enableInfiniteScroll\"\n      [threshold]=\"mobile ? '10%' : '2%'\"\n      position=\"bottom\"\n      (ionInfinite)=\"fetchMore($event)\"\n    >\n      <ion-infinite-scroll-content\n        loadingSpinner=\"circles\"\n        [loadingText]=\"'COMMON.LOADING_DOTS' | translate\"\n      ></ion-infinite-scroll-content>\n    </ion-infinite-scroll>\n  </div>\n</ion-content>\n\n<ion-footer>\n  <!-- Paginator  -->\n  <mat-paginator\n    *ngIf=\"!enableInfiniteScroll\"\n    [length]=\"totalRowCount\"\n    [pageSize]=\"defaultPageSize\"\n    [pageSizeOptions]=\"defaultPageSizeOptions\"\n    showFirstLastButtons\n  ></mat-paginator>\n\n  <app-form-buttons-bar\n    *ngIf=\"canEdit && !mobile\"\n    (onCancel)=\"load()\"\n    (onSave)=\"save()\"\n    [disabled]=\"(loadingSubject | async) || !dirty\"\n  >\n    <!-- error -->\n    <ion-item *ngIf=\"error$ | async\" lines=\"none\">\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-label color=\"danger\" [innerHTML]=\"error | translate\"></ion-label>\n    </ion-item>\n  </app-form-buttons-bar>\n</ion-footer>\n\n<ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" *ngIf=\"canEdit && mobile\">\n  <ion-fab-button color=\"tertiary\" (click)=\"addRow($event)\">\n    <ion-icon name=\"add\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n", styles: [".table-container .mat-mdc-table{--mat-column-actions-min-width: 62px;--mat-column-actions-max-width: 62px}.table-container .mat-mdc-table .mat-row-selected{padding:3px}.table-container .mat-mdc-table .mat-column-select{min-width:30px}.table-container .mat-mdc-table .mat-column-id{min-width:30px;max-width:30px}.table-container .mat-mdc-table .mat-column-label,.table-container .mat-mdc-table .mat-column-name,.table-container .mat-mdc-table .mat-column-levelId,.table-container .mat-mdc-table .mat-column-statusId{min-width:150px}.table-container .mat-mdc-table .mat-column-comments{min-width:100px;max-width:100px}.table-container .mat-mdc-table .mat-column-updateDate{min-width:110px;max-width:110px}\n"], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$1.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: i2$1.IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i2$1.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i1$7.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$7.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$7.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$7.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$7.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$7.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i8$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i13$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i13$2.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i8.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "label", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "hideRequiredMarker", "mobile", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "reloadItemsOnFocus", "clearInvalidValueOnBlur", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "splitSearchText", "selectInputContentOnFocus", "selectInputContentOnFocusDelay", "previewImplicitValue", "showFavorites", "toggleFavoriteTitle", "favoriteItems", "colSizes", "class", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keydown.backspace", "keyup.enter", "selectionChange", "openedChange", "toggleFavorite"] }, { kind: "component", type: MatLatLongField, selector: "mat-latlong-field", inputs: ["formControl", "formControlName", "type", "latLongPattern", "maxDecimals", "required", "floatLabel", "placeholder", "defaultSign", "autofocus", "mobile", "clearable", "class", "tabindex", "appearance", "readonly", "subscriptSizing"] }, { kind: "component", type: MatDateTime, selector: "mat-date-time-field", inputs: ["logPrefix", "placeholder", "floatLabel", "mobile", "compact", "autofocus", "clearable", "startDate", "datePickerFilter", "allowNoTime", "dottedMinutesInGap", "timeHoursOnly", "debug", "appearance", "subscriptSizing", "formControl", "formControlName", "required", "readonly", "tabindex"], outputs: ["focus", "blur", "keydown.escape", "keyup.enter"] }, { kind: "component", type: MatBooleanField, selector: "mat-boolean-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "subscriptSizing", "readonly", "required", "compact", "autofocus", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "clearable", "labelPosition", "tabindex", "showRadio", "value"], outputs: ["keyup.enter", "focus", "blur"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "directive", type: AutoTitleDirective, selector: "ion-label[appAutoTitle], mat-label[appAutoTitle]", inputs: ["appAutoTitle"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "id", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "component", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: ["disabled", "disabledCancel", "disabledEscape", "classList", "saveButtonColor", "backText", "cancelText", "nextText", "showBack", "showCancel", "showNext", "showSave"], outputs: ["onCancel", "onSave", "onNext", "onBack", "onSaveAndClose", "onSaveAndNext"] }, { kind: "component", type: NavActionsColumnComponent, selector: "app-nav-actions-column", inputs: ["appTable", "matColumnDef", "style", "stickyEnd", "showPending", "dirtyIcon", "optionsTitle", "class", "cellTemplate", "throttleTime"], outputs: ["optionsClick"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ResizableComponent, selector: "th[resizable]", inputs: ["resizable"], outputs: ["sizeChanged"] }, { kind: "directive", type: ResizableDirective, selector: "[resizable]", outputs: ["resizable", "fit"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: LatitudeFormatPipe, name: "latitudeFormat" }, { kind: "pipe", type: NumberFormatPipe, name: "numberFormat" }, { kind: "pipe", type: ArrayLengthPipe, name: "isArrayLength" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }, { kind: "pipe", type: IsEmptySelectionPipe, name: "isEmptySelection" }, { kind: "pipe", type: IsMultipleSelectionPipe, name: "isMultipleSelection" }, { kind: "pipe", type: IsAllSelectedPipe, name: "isAllSelected" }, { kind: "pipe", type: IsNotAllSelectedPipe, name: "isNotAllSelected" }, { kind: "pipe", type: ReferentialToStringPipe, name: "referentialToString" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "filterExpansionPanel", first: true, predicate: MatExpansionPanel, descendants: true, static: true }, { propertyName: "infiniteScroll", first: true, predicate: IonInfiniteScroll, descendants: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar\n  color=\"primary\"\n  [canGoBack]=\"true\"\n  [hasValidate]=\"(loadingSubject | async) !== true && (dirtySubject | async) === true\"\n  (onValidate)=\"save()\"\n  [backHref]=\"'/testing'\"\n>\n  <ion-title>Table (click to edit)</ion-title>\n  <ion-buttons slot=\"end\">\n    @if (selection | isEmptySelection) {\n      <input matInput type=\"number\" step=\"1\" style=\"color: black; width: 50px\" [(ngModel)]=\"rowHeight\" />\n\n      <!-- Add -->\n      <button mat-icon-button *ngIf=\"canEdit && !mobile\" [title]=\"'COMMON.BTN_ADD' | translate\" (click)=\"addRow()\">\n        <mat-icon>add</mat-icon>\n      </button>\n\n      <!-- reset filter -->\n      <button mat-icon-button (click)=\"resetFilter()\" *ngIf=\"filterCriteriaCount\">\n        <mat-icon color=\"accent\">filter_list_alt</mat-icon>\n        <mat-icon class=\"icon-secondary\" style=\"left: 16px; top: 5px; font-weight: bold\">close</mat-icon>\n      </button>\n\n      <!-- show filter -->\n      <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n        <mat-icon\n          *ngIf=\"filterCriteriaCount; else emptyFilter\"\n          [matBadge]=\"filterCriteriaCount\"\n          matBadgeColor=\"accent\"\n          matBadgeSize=\"small\"\n          matBadgePosition=\"above after\"\n          aria-hidden=\"false\"\n        >\n          filter_list_alt\n        </mat-icon>\n        <ng-template #emptyFilter>\n          <mat-icon>filter_list_alt</mat-icon>\n        </ng-template>\n      </button>\n\n      <!-- save -->\n      <button mat-icon-button *ngIf=\"mobile\" [disabled]=\"(dirtySubject | async) !== true\" (click)=\"save()\">\n        <mat-icon>save</mat-icon>\n      </button>\n\n      <!-- start/stop timer to auto-load data -->\n      <ion-button *ngIf=\"!timer\" (click)=\"startTimer()\">Start reload</ion-button>\n      <ion-button *ngIf=\"timer\" (click)=\"stopTimer()\" color=\"accent\">Stop reload</ion-button>\n    } @else {\n      <!-- if row selection -->\n      <!-- delete -->\n      <button\n        mat-icon-button\n        *ngIf=\"canEdit\"\n        [title]=\"'COMMON.BTN_DELETE' | translate\"\n        (click)=\"deleteSelection($event)\"\n      >\n        <mat-icon>delete</mat-icon>\n      </button>\n\n      <!-- duplicate -->\n      <button\n        mat-icon-button\n        *ngIf=\"canEdit && selection.selected | isArrayLength: { equals: 1 }\"\n        [title]=\"'COMMON.BTN_DUPLICATE' | translate\"\n        (click)=\"duplicateRow($event, selection.selected[0])\"\n      >\n        <mat-icon>file_copy</mat-icon>\n      </button>\n    }\n  </ion-buttons>\n</app-toolbar>\n<ion-content class=\"ion-no-padding\">\n  <ion-refresher slot=\"fixed\" *ngIf=\"mobile\" (ionRefresh)=\"doRefresh($event)\">\n    <ion-refresher-content></ion-refresher-content>\n  </ion-refresher>\n\n  <!-- error -->\n  <ion-item *ngIf=\"mobile && error\" lines=\"none\" @slideUpDownAnimation>\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n  </ion-item>\n\n  <!-- search -->\n  <mat-expansion-panel\n    #filterExpansionPanel\n    class=\"filter-panel\"\n    [class.filter-panel-floating]=\"filterPanelFloating\"\n    [class.filter-panel-pinned]=\"!filterPanelFloating\"\n  >\n    <form class=\"form-container ion-padding-top\" [formGroup]=\"filterForm\" (ngSubmit)=\"applyFilterAndClosePanel($event)\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search text -->\n            <mat-form-field>\n              <mat-label>{{ 'TABLE.TESTING.SEARCH_TEXT' | translate }}</mat-label>\n              <ion-icon matPrefix name=\"search\"></ion-icon>\n              <input matInput formControlName=\"searchText\" autocomplete=\"off\" />\n              <button\n                mat-icon-button\n                matSuffix\n                tabindex=\"-1\"\n                type=\"button\"\n                (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\"\n              >\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <mat-action-row>\n      <!-- Counter  -->\n      <ion-label\n        [hidden]=\"(loadingSubject | async) || filterForm.dirty\"\n        [color]=\"empty && 'danger'\"\n        class=\"ion-padding\"\n      >\n        {{\n          (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT')\n            | translate\n              : {\n                  count: (totalRowCount | numberFormat),\n                }\n        }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <button\n        mat-icon-button\n        color=\"accent\"\n        *ngIf=\"filterPanelFloating\"\n        (click)=\"toggleFilterPanelFloating()\"\n        class=\"hidden-xs hidden-sm hidden-md\"\n        [title]=\"(filterPanelFloating ? 'COMMON.BTN_EXPAND' : 'COMMON.BTN_HIDE') | translate\"\n      >\n        <mat-icon>\n          <span style=\"transform: rotate(90deg)\">{{ filterPanelFloating ? '&#xbb;' : '&#xab;' }}</span>\n        </mat-icon>\n      </button>\n\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\" (click)=\"closeFilterPanel()\" [disabled]=\"loadingSubject | async\">\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button\n        mat-button\n        [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n        [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n        (click)=\"applyFilterAndClosePanel($event)\"\n      >\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <!-- table -->\n  <div [class.table-container]=\"!enableInfiniteScroll\">\n    <table\n      #table\n      mat-table\n      matSort\n      matSortDisableClear\n      [dataSource]=\"dataSource\"\n      [matSortActive]=\"defaultSortBy\"\n      [matSortDirection]=\"defaultSortDirection\"\n      [trackBy]=\"trackByFn\"\n      [style.--mat-row-height]=\"rowHeight + 'px'\"\n    >\n      <!-- group header cells -->\n      <ng-container matColumnDef=\"top-start\" [sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!canEdit\" [attr.colspan]=\"2\">\n          <!-- start spacer -->\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"group-1\">\n        <th mat-header-cell *matHeaderCellDef [attr.colspan]=\"3\">\n          <ion-label translate>{{ i18nColumnPrefix + 'GROUP_1' }}</ion-label>\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"group-2\">\n        <th mat-header-cell *matHeaderCellDef [attr.colspan]=\"displayedColumns.length - 6\">\n          <ion-label translate>{{ i18nColumnPrefix + 'GROUP_2' }}</ion-label>\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"top-end\" [stickyEnd]=\"stickyEnd\">\n        <th mat-header-cell *matHeaderCellDef>\n          <!-- end spacer -->\n          <ion-label></ion-label>\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"select\" [sticky]=\"sticky\" [class.mat-column-sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!canEdit\">\n          @if (selection | isMultipleSelection) {\n            <mat-checkbox\n              [checked]=\"this | isAllSelected\"\n              [indeterminate]=\"this | isNotAllSelected\"\n              (change)=\"$event ? masterToggle() : null\"\n            ></mat-checkbox>\n          }\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!canEdit\">\n          <mat-checkbox\n            (click)=\"toggleSelectRow($event, row)\"\n            [checked]=\"selection | isSelected: row\"\n            tabindex=\"-1\"\n          ></mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id column -->\n      <ng-container matColumnDef=\"id\" [sticky]=\"sticky\" [class.mat-column-sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label>#</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">{{ row.currentData?.id }}</td>\n      </ng-container>\n\n      <!-- Label column -->\n      <ng-container matColumnDef=\"label\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.LABEL</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'label'\">\n          @if (row.editing) {\n            <mat-form-field>\n              <input\n                matInput\n                autocomplete=\"off\"\n                [formControl]=\"row.validator.controls['label']\"\n                [placeholder]=\"'TABLE.TESTING.LABEL' | translate\"\n                [appAutofocus]=\"focusColumn === 'label'\"\n                [readonly]=\"!row.editing\"\n              />\n              <mat-error *ngIf=\"row.validator.controls['label'].hasError('required')\" translate>\n                ERROR.FIELD_REQUIRED\n              </mat-error>\n            </mat-form-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'label' }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- Name column -->\n      <ng-container matColumnDef=\"name\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.NAME</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'name'\">\n          @if (row.editing) {\n            <mat-form-field>\n              <input\n                matInput\n                [formControl]=\"row.validator?.controls.name\"\n                [placeholder]=\"'TABLE.TESTING.NAME' | translate\"\n                [appAutofocus]=\"focusColumn === 'name'\"\n              />\n              <mat-error *ngIf=\"row.validator?.controls.name.hasError('required')\" translate>\n                ERROR.FIELD_REQUIRED\n              </mat-error>\n            </mat-form-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'name' }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- Level column -->\n      <ng-container matColumnDef=\"levelId\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.LEVEL_ID</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'levelId'\">\n          @if (row.editing) {\n            <mat-autocomplete-field\n              [formControl]=\"row.validator.controls.levelId\"\n              [placeholder]=\"'TABLE.TESTING.LEVEL_ID' | translate\"\n              floatLabel=\"never\"\n              [config]=\"autocompleteFields.level\"\n              [readonly]=\"!row.editing\"\n              [autofocus]=\"focusColumn === 'levelId'\"\n              [required]=\"true\"\n            ></mat-autocomplete-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'levelId' | referentialToString: autocompleteFields.level.attributes }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- Status column  -->\n      <ng-container matColumnDef=\"statusId\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span translate>USER.STATUS</span>\n        </th>\n        <td\n          mat-cell\n          *matCellDef=\"let row\"\n          [class.mat-form-field-disabled]=\"!row.editing\"\n          (click)=\"focusColumn = 'statusId'\"\n        >\n          <mat-form-field>\n            <mat-select\n              [formControl]=\"row.validator.controls['statusId']\"\n              [placeholder]=\"i18nColumnPrefix + 'STATUS_ID' | translate\"\n            >\n              <mat-option *ngFor=\"let item of statusList\" [value]=\"item.id\">\n                <mat-icon><ion-icon [name]=\"item.icon\"></ion-icon></mat-icon>\n                <mat-label>{{ item.label | translate }}</mat-label>\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf=\"row.validator.controls['statusId'].hasError('required')\" translate>\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n      <!-- Enum column  -->\n      <!-- NOTE : Never used in table  -->\n      <!--      <ng-container matColumnDef=\"values\">-->\n      <!--        <th mat-header-cell *matHeaderCellDef>-->\n      <!--          <span translate>Enums</span>-->\n      <!--        </th>-->\n      <!--        <td mat-cell *matCellDef=\"let row\" [class.mat-form-field-disabled]=\"!row.editing\">-->\n      <!--          <app-form-field-->\n      <!--            [formControl]=\"row.validator|formGetControl:'properties.values'\"-->\n      <!--            [definition]=\"columnDefinitions['values']\"-->\n      <!--          ></app-form-field>-->\n      <!--        </td>-->\n      <!--      </ng-container>-->\n\n      <!-- boolean (as checkbox) -->\n      <ng-container matColumnDef=\"boolean\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"true\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Boolean</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          @if (!readOnly && row.editing) {\n            <mat-boolean-field\n              floatLabel=\"never\"\n              [style]=\"'checkbox'\"\n              placeholder=\"Oui/Non\"\n              [formControl]=\"row.validator | formGetControl: 'properties.boolean'\"\n              [compact]=\"true\"\n            ></mat-boolean-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue: 'properties.boolean') ? '&#x2714;' : '&#x2718;' }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- date -->\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"true\" class=\"mat-cell-date-time\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Date</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-cell-date-time\" (click)=\"focusColumn = 'date'\">\n          @if (!readOnly && row.editing) {\n            <mat-date-time-field\n              floatLabel=\"never\"\n              [formControl]=\"row.validator | formGetControl: 'properties.date'\"\n              [autofocus]=\"focusColumn === 'date'\"\n              placeholder=\"Date/Time\"\n              [compact]=\"true\"\n            ></mat-date-time-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'properties.date' | dateFormat: { time: true } }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- latitude -->\n      <ng-container matColumnDef=\"latitude\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"true\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Latitude</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'latitude'\">\n          @if (!readOnly && row.editing) {\n            <mat-latlong-field\n              floatLabel=\"never\"\n              [formControl]=\"row.validator | formGetControl: 'properties.latitude'\"\n              placeholder=\"Latitude\"\n              [latLongPattern]=\"'DDMM'\"\n              [type]=\"'latitude'\"\n              [autofocus]=\"focusColumn === 'latitude'\"\n            ></mat-latlong-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{\n                row.validator\n                  | formGetValue: 'properties.latitude'\n                  | latitudeFormat: { pattern: 'DDMM', placeholderChar: '0' }\n              }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- Creation date column -->\n      <ng-container matColumnDef=\"updateDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.UPDATE_DATE</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-form-field-disabled\">\n          <ion-text color=\"medium\" *ngIf=\"row.id !== -1\">\n            <small>\n              {{ row.validator | formGetValue: 'creationDate' | dateFormat: { time: true } }}\n            </small>\n          </ion-text>\n        </td>\n      </ng-container>\n\n      <!-- Comment column -->\n      <ng-container matColumnDef=\"comments\">\n        <th mat-header-cell *matHeaderCellDef>\n          <ion-label translate>TABLE.TESTING.COMMENTS</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-form-field *ngIf=\"row.editing; else iconComment\">\n            <!--<textarea matInput [formControl]=\"row.validator?.controls.comments\"\n                      [placeholder]=\"'TABLE.TESTING.COMMENTS'|translate\"\n                      [readonly]=\"!row.editing\"></textarea>-->\n\n            <input\n              type=\"text\"\n              matInput\n              [formControl]=\"row.validator?.controls.comments\"\n              [placeholder]=\"'TABLE.TESTING.COMMENTS' | translate\"\n              [readonly]=\"!row.editing\"\n            />\n          </mat-form-field>\n\n          <ng-template #iconComment>\n            <ion-icon\n              [color]=\"row.validator?.controls.comments.value ? 'tertiary' : 'medium'\"\n              name=\"chatbox\"\n              slot=\"icon-only\"\n            ></ion-icon>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Actions column -->\n      <app-nav-actions-column\n        [stickyEnd]=\"stickyEnd\"\n        (optionsClick)=\"openSelectColumnsModal($event)\"\n        [cellTemplate]=\"cellInjection\"\n        [showPending]=\"true\"\n      >\n        <!-- cell injection-->\n        <ng-template #cellInjection let-row>\n          <span *ngIf=\"row.editing && !row.validator.dirty\">-</span>\n        </ng-template>\n      </app-nav-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"groupColumns\"></tr>\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr\n        mat-row\n        *matRowDef=\"let row; columns: displayedColumns\"\n        [class.mat-mdc-row-selected]=\"row.editing\"\n        [class.mat-mdc-row-error]=\"row.invalid\"\n        [class.mat-mdc-row-disabled]=\"!row.editing\"\n        [class.mat-mdc-row-dirty]=\"row.dirty\"\n        (click)=\"clickRow($event, row)\"\n        (keydown.escape)=\"escapeEditingRow($event)\"\n        [cdkTrapFocus]=\"row.invalid\"\n      ></tr>\n    </table>\n\n    <ng-container *ngIf=\"loadingSubject | async; else noResult\">\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    </ng-container>\n\n    <ng-template #noResult>\n      <ion-item *ngIf=\"totalRowCount === 0\">\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n      </ion-item>\n    </ng-template>\n\n    <ion-infinite-scroll\n      *ngIf=\"enableInfiniteScroll\"\n      [threshold]=\"mobile ? '10%' : '2%'\"\n      position=\"bottom\"\n      (ionInfinite)=\"fetchMore($event)\"\n    >\n      <ion-infinite-scroll-content\n        loadingSpinner=\"circles\"\n        [loadingText]=\"'COMMON.LOADING_DOTS' | translate\"\n      ></ion-infinite-scroll-content>\n    </ion-infinite-scroll>\n  </div>\n</ion-content>\n\n<ion-footer>\n  <!-- Paginator  -->\n  <mat-paginator\n    *ngIf=\"!enableInfiniteScroll\"\n    [length]=\"totalRowCount\"\n    [pageSize]=\"defaultPageSize\"\n    [pageSizeOptions]=\"defaultPageSizeOptions\"\n    showFirstLastButtons\n  ></mat-paginator>\n\n  <app-form-buttons-bar\n    *ngIf=\"canEdit && !mobile\"\n    (onCancel)=\"load()\"\n    (onSave)=\"save()\"\n    [disabled]=\"(loadingSubject | async) || !dirty\"\n  >\n    <!-- error -->\n    <ion-item *ngIf=\"error$ | async\" lines=\"none\">\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-label color=\"danger\" [innerHTML]=\"error | translate\"></ion-label>\n    </ion-item>\n  </app-form-buttons-bar>\n</ion-footer>\n\n<ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" *ngIf=\"canEdit && mobile\">\n  <ion-fab-button color=\"tertiary\" (click)=\"addRow($event)\">\n    <ion-icon name=\"add\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n", styles: [".table-container .mat-mdc-table{--mat-column-actions-min-width: 62px;--mat-column-actions-max-width: 62px}.table-container .mat-mdc-table .mat-row-selected{padding:3px}.table-container .mat-mdc-table .mat-column-select{min-width:30px}.table-container .mat-mdc-table .mat-column-id{min-width:30px;max-width:30px}.table-container .mat-mdc-table .mat-column-label,.table-container .mat-mdc-table .mat-column-name,.table-container .mat-mdc-table .mat-column-levelId,.table-container .mat-mdc-table .mat-column-statusId{min-width:150px}.table-container .mat-mdc-table .mat-column-comments{min-width:100px;max-width:100px}.table-container .mat-mdc-table .mat-column-updateDate{min-width:110px;max-width:110px}\n"], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$1.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: i2$1.IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i2$1.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i1$7.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$7.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$7.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$7.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$7.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$7.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i8$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9$3.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i13$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i13$2.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i9.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "label", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "hideRequiredMarker", "mobile", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "reloadItemsOnFocus", "clearInvalidValueOnBlur", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "splitSearchText", "selectInputContentOnFocus", "selectInputContentOnFocusDelay", "previewImplicitValue", "showFavorites", "toggleFavoriteTitle", "favoriteItems", "colSizes", "class", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keydown.backspace", "keyup.enter", "selectionChange", "openedChange", "toggleFavorite"] }, { kind: "component", type: MatLatLongField, selector: "mat-latlong-field", inputs: ["formControl", "formControlName", "type", "latLongPattern", "maxDecimals", "required", "floatLabel", "placeholder", "defaultSign", "autofocus", "mobile", "clearable", "class", "tabindex", "appearance", "readonly", "subscriptSizing"] }, { kind: "component", type: MatDateTime, selector: "mat-date-time-field", inputs: ["logPrefix", "placeholder", "floatLabel", "mobile", "compact", "autofocus", "clearable", "startDate", "datePickerFilter", "allowNoTime", "dottedMinutesInGap", "timeHoursOnly", "debug", "appearance", "subscriptSizing", "formControl", "formControlName", "required", "readonly", "tabindex"], outputs: ["focus", "blur", "keydown.escape", "keyup.enter"] }, { kind: "component", type: MatBooleanField, selector: "mat-boolean-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "subscriptSizing", "readonly", "required", "compact", "autofocus", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "clearable", "labelPosition", "tabindex", "showRadio", "value"], outputs: ["keyup.enter", "focus", "blur"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "directive", type: AutoTitleDirective, selector: "ion-label[appAutoTitle], mat-label[appAutoTitle]", inputs: ["appAutoTitle"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "id", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "component", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: ["disabled", "disabledCancel", "disabledEscape", "classList", "saveButtonColor", "backText", "cancelText", "nextText", "showBack", "showCancel", "showNext", "showSave"], outputs: ["onCancel", "onSave", "onNext", "onBack", "onSaveAndClose", "onSaveAndNext"] }, { kind: "component", type: NavActionsColumnComponent, selector: "app-nav-actions-column", inputs: ["appTable", "matColumnDef", "style", "stickyEnd", "showPending", "dirtyIcon", "optionsTitle", "class", "cellTemplate", "throttleTime"], outputs: ["optionsClick"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ResizableComponent, selector: "th[resizable]", inputs: ["resizable"], outputs: ["sizeChanged"] }, { kind: "directive", type: ResizableDirective, selector: "[resizable]", outputs: ["resizable", "fit"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: LatitudeFormatPipe, name: "latitudeFormat" }, { kind: "pipe", type: NumberFormatPipe, name: "numberFormat" }, { kind: "pipe", type: ArrayLengthPipe, name: "isArrayLength" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }, { kind: "pipe", type: IsEmptySelectionPipe, name: "isEmptySelection" }, { kind: "pipe", type: IsMultipleSelectionPipe, name: "isMultipleSelection" }, { kind: "pipe", type: IsAllSelectedPipe, name: "isAllSelected" }, { kind: "pipe", type: IsNotAllSelectedPipe, name: "isNotAllSelected" }, { kind: "pipe", type: ReferentialToStringPipe, name: "referentialToString" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableTestPage, decorators: [{
             type: Component,