@sumaris-net/ngx-components 18.14.12 → 18.14.13

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

@@ -21176,6 +21176,29 @@ const CORE_CONFIG_OPTIONS = Object.freeze({
         label: 'CONFIGURATION.OPTIONS.HOME.BACKGROUND_IMAGES',
         type: 'string',
     },
+    HOME_FEED_ENABLE: {
+        key: 'sumaris.home.feed.enable',
+        label: 'CONFIGURATION.OPTIONS.HOME.FEED_ENABLE',
+        type: 'boolean',
+        defaultValue: false,
+    },
+    HOME_FEED_URLS: {
+        key: 'sumaris.home.feed.urls',
+        label: 'CONFIGURATION.OPTIONS.HOME.FEED_URLS',
+        type: 'string',
+    },
+    HOME_FEED_MAX_AGE_IN_MONTHS: {
+        key: 'sumaris.home.feed.maxAgeInMonths',
+        label: 'CONFIGURATION.OPTIONS.HOME.FEED_MAX_AGE_IN_MONTHS',
+        type: 'integer',
+        defaultValue: -1,
+    },
+    HOME_FEED_MAX_CONTENT_LENGTH: {
+        key: 'sumaris.home.feed.maxContentLength',
+        label: 'CONFIGURATION.OPTIONS.HOME.FEED_MAX_CONTENT_LENGTH',
+        type: 'integer',
+        defaultValue: -1,
+    },
     COLOR_PRIMARY: {
         key: 'sumaris.color.primary',
         label: 'CONFIGURATION.OPTIONS.COLORS.PRIMARY',
@@ -33652,6 +33675,11 @@ class FeedsComponent {
     feedUrls$ = this._state.select('feedUrls');
     hasFeeds$ = this._state.select('hasFeeds');
     debug = false;
+    showHeader = true;
+    headerColor = 'secondary';
+    cardColor = 'light-transparent';
+    shape = 'legacy';
+    class = '';
     set feeds(value) {
         this._state.set('feeds', () => value);
     }
@@ -33667,11 +33695,18 @@ class FeedsComponent {
     get hasFeeds() {
         return this._state.get('hasFeeds');
     }
-    showHeader = true;
-    headerColor = 'secondary';
-    cardColor = 'light-transparent';
-    shape = 'legacy';
-    class = '';
+    set maxAgeInMonths(value) {
+        this._state.set('maxAgeInMonths', () => value);
+    }
+    get maxAgeInMonths() {
+        return this._state.get('maxAgeInMonths');
+    }
+    set maxContentLength(value) {
+        this._state.set('maxContentLength', () => value);
+    }
+    get maxContentLength() {
+        return this._state.get('maxContentLength');
+    }
     get hostClass() {
         const classes = [this.class];
         if (this.shape) {
@@ -33679,9 +33714,6 @@ class FeedsComponent {
         }
         return classes.filter((cls) => cls).join(' ');
     }
-    get borderRadius() {
-        return this.shape === 'round' ? '12px' : '4px';
-    }
     constructor(environment, feedService) {
         this.environment = environment;
         this.feedService = feedService;
@@ -33698,8 +33730,8 @@ class FeedsComponent {
         }
         // Initial state
         this._state.set({
-            maxAgeInMonths: this.environment.feed?.maxAgeInMonths ?? -1 /* all */,
-            maxContentLength: this.environment.feed?.maxContentLength ?? -1 /* no max */,
+            maxAgeInMonths: this.environment.feed?.maxAgeInMonths,
+            maxContentLength: this.environment.feed?.maxContentLength,
         });
         // DEBUG
         this.debug = !environment.production;
@@ -33743,11 +33775,11 @@ class FeedsComponent {
         return [];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeedsComponent, deps: [{ token: ENVIRONMENT }, { token: APP_FEED_SERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FeedsComponent, selector: "app-feed", inputs: { debug: "debug", feeds: "feeds", feedUrls: "feedUrls", showHeader: "showHeader", headerColor: "headerColor", cardColor: "cardColor", shape: "shape", class: "class" }, host: { properties: { "class": "this.hostClass", "class.round": "this.borderRadius" } }, providers: [RxState], ngImport: i0, template: "@let feeds = feeds$ | async;\n\n@if (debug) {\n  <app-debug [title]=\"'Feed'\">\n    <p>\n      hasFeeds?: {{ hasFeeds$ | async }}\n      <br />\n      feedUrls: {{ feedUrls$ | async | json }}\n      <br />\n      shape: {{ shape }}\n    </p>\n  </app-debug>\n}\n\n@if (feeds | isNotEmptyArray) {\n  <!-- top header -->\n  @if (showHeader && (feeds | arrayFirst); as feed) {\n    <ion-item lines=\"none\" [color]=\"headerColor\" class=\"feed-header shape-{{ shape }}\">\n      <ion-icon slot=\"start\" name=\"megaphone\"></ion-icon>\n      <ion-label>\n        <b>{{ feed.title || ('SOCIAL.FEED.NEWS' | translate) }}</b>\n      </ion-label>\n      <ion-button slot=\"end\" fill=\"clear\" (click)=\"openFeedHome()\" shape=\"\">\n        <ion-label translate>SOCIAL.FEED.SHOW_ALL_FEED</ion-label>\n        <ion-icon slot=\"end\" name=\"chevron-forward-outline\"></ion-icon>\n      </ion-button>\n    </ion-item>\n  }\n\n  <div class=\"feed-content shape-{{ shape }} ion-no-padding\" [class.has-header]=\"showHeader\">\n    <!-- feeds -->\n    @for (feed of feeds; track feed.feed_url; let firstFeed = $first; let lastFeed = $last) {\n      <!-- items -->\n      @for (item of feed.items; track item.id; let firstItem = $first; let lastItem = $last) {\n        <ion-card\n          [class.first]=\"firstFeed && firstItem\"\n          [class.last]=\"lastFeed && lastItem\"\n          [color]=\"cardColor !== 'light-transparent' ? cardColor : undefined\"\n        >\n          <ion-card-header>\n            <ion-card-subtitle style=\"vertical-align: middle\">\n              <!-- Authors -->\n              @for (author of item.authors || feed.authors; track author) {\n                @if (author.name || author.avatar) {\n                  <ion-chip (click)=\"openUrl(author.url)\" tappable>\n                    @if (author.avatar) {\n                      <ion-avatar>\n                        <ion-img [src]=\"author.avatar\" [alt]=\"author.name\"></ion-img>\n                      </ion-avatar>\n                    }\n                    @if (author.name) {\n                      <ion-label class=\"author\">{{ author.name }}</ion-label>\n                    }\n                  </ion-chip>\n                }\n              }\n              <ion-note class=\"ion-float-end\">\n                <small>{{ item.date_published | dateFromNow }}</small>\n              </ion-note>\n            </ion-card-subtitle>\n\n            <!-- title -->\n            <ion-card-title (click)=\"openUrl(item.url || feed.feed_url)\" tappable>{{ item?.title }}</ion-card-title>\n\n            <!-- tags -->\n            @let tags = item | map: getTags;\n            @if (tags | isNotEmptyArray) {\n              <ion-text class=\"tags\">\n                @for (tag of tags; track tag; let last = $last) {\n                  <a (click)=\"openTag(feed, tag)\" tappable>\n                    <ion-text>#{{ tag }}</ion-text>\n                  </a>\n                  @if (!last) {\n                    &nbsp;\n                  }\n                }\n              </ion-text>\n            }\n          </ion-card-header>\n\n          <!-- Feed content -->\n          <ion-card-content>\n            <ion-text [feed]=\"item.url || feed.feed_url\">\n              @if (item.content_html) {\n                <p [innerHTML]=\"item.content_html\"></p>\n              } @else if (item.content_text) {\n                <p [innerText]=\"item.content_text\"></p>\n              }\n            </ion-text>\n          </ion-card-content>\n\n          <ion-button (click)=\"openUrl(item.url)\" class=\"ion-float-end\" fill=\"clear\">\n            <ion-label>{{ (item.truncated ? 'SOCIAL.FEED.READ_MORE' : 'COMMON.BTN_SHOW') | translate }}</ion-label>\n            <ion-icon slot=\"end\" name=\"chevron-forward-outline\"></ion-icon>\n          </ion-button>\n        </ion-card>\n      }\n    }\n  </div>\n}\n", styles: [":host{display:block;height:calc(100% - 10px);--feed-header-height: 48px;--feed-border-radius: 4px;--ion-card-background: rgba(var(--ion-background-color-rgb), .6);-webkit-margin-start:10px;margin-inline-start:10px;-webkit-margin-end:10px;margin-inline-end:10px;margin-top:0;margin-bottom:10px;-webkit-box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px rgba(0,0,0,.14),0 1px 5px rgba(0,0,0,.12);border-radius:var(--feed-border-radius);overflow:hidden}:host.shape-round{--feed-border-radius: 12px}ion-button{text-transform:unset;--color: rgba(var(--ion-color-contrast-rgb), .7)}ion-item.feed-header{height:var(--feed-header-height);margin:0;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border-radius:var(--feed-border-radius) var(--feed-border-radius) 0 0}ion-item.feed-header ion-icon[slot=start]{-webkit-margin-end:8px;margin-inline-end:8px}.feed-content{height:100%;overflow-y:auto;--margin-bottom: 8px}.feed-content.has-header{height:calc(100% - var(--feed-header-height, 0))}.feed-content ion-card{--top-radius: 4px;--bottom-radius: 4px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);margin:0 0 var(--margin-bottom) 0;border-radius:var(--top-radius) var(--top-radius) var(--bottom-radius) var(--bottom-radius);--ion-card-color-contrast-rgb: var(--ion-color-contrast-rgb, var(--ion-color-dark-rgb, 0, 0, 0));--color: rgba(var(--ion-card-color-contrast-rgb), .87)}.feed-content ion-card.first{--top-radius: 0}.feed-content ion-card.last{--margin-bottom: 0;--bottom-radius: 0}.feed-content ion-card ion-card-header ion-card-title{--color: rgba(var(--ion-card-color-contrast-rgb), .87)}.feed-content ion-card ion-card-header ion-card-subtitle ion-chip{--background: transparent;--border-color: transparent;--border-width: 0}.feed-content ion-card ion-card-header ion-card-subtitle ion-chip ion-avatar{--color: rgba(var(--ion-card-color-contrast-rgb), .6);border:1px solid var(--color)}.feed-content ion-card ion-card-header ion-card-subtitle ion-chip ion-label{--color: rgba(var(--ion-card-color-contrast-rgb), .8);color:var(--color)}.feed-content ion-card ion-card-header ion-card-subtitle ion-note{--color: rgba(var(--ion-card-color-contrast-rgb), .6);color:var(--color)}.feed-content ion-card ion-card-header .tags{display:inline}.feed-content ion-card ion-card-header .tags a{color:rgba(var(--ion-card-color-contrast-rgb),.6)!important}\n"], dependencies: [{ 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.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.IonChip, selector: "ion-chip", inputs: ["color", "disabled", "mode", "outline"] }, { 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.IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { 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: "component", type: DebugComponent, selector: "app-debug", inputs: ["titlePrefix", "title", "enable", "expanded"] }, { kind: "directive", type: FeedDirective, selector: "feed,[feed]", inputs: ["feed"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.JsonPipe, name: "json" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: DateFromNowPipe, name: "dateFromNow" }, { kind: "pipe", type: NotEmptyArrayPipe, name: "isNotEmptyArray" }, { kind: "pipe", type: ArrayFirstPipe, name: "arrayFirst" }, { kind: "pipe", type: MapPipe, name: "map" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FeedsComponent, selector: "app-feed", inputs: { debug: "debug", showHeader: "showHeader", headerColor: "headerColor", cardColor: "cardColor", shape: "shape", class: "class", feeds: "feeds", feedUrls: "feedUrls", maxAgeInMonths: "maxAgeInMonths", maxContentLength: "maxContentLength" }, host: { properties: { "class": "this.hostClass" } }, providers: [RxState], ngImport: i0, template: "@let feeds = feeds$ | async;\n\n@if (debug) {\n  <app-debug [title]=\"'Feed'\">\n    <p>\n      hasFeeds?: {{ hasFeeds$ | async }}\n      <br />\n      feedUrls: {{ feedUrls$ | async | json }}\n      <br />\n      shape: {{ shape }}\n    </p>\n  </app-debug>\n}\n\n@if (feeds | isNotEmptyArray) {\n  <!-- top header -->\n  @if (showHeader && (feeds | arrayFirst); as feed) {\n    <ion-item lines=\"none\" [color]=\"headerColor\" class=\"feed-header shape-{{ shape }}\">\n      <ion-icon slot=\"start\" name=\"megaphone\"></ion-icon>\n      <ion-label>\n        <b>{{ feed.title || ('SOCIAL.FEED.NEWS' | translate) }}</b>\n      </ion-label>\n      <ion-button slot=\"end\" fill=\"clear\" (click)=\"openFeedHome()\" shape=\"\">\n        <ion-label translate>SOCIAL.FEED.SHOW_ALL_FEED</ion-label>\n        <ion-icon slot=\"end\" name=\"chevron-forward-outline\"></ion-icon>\n      </ion-button>\n    </ion-item>\n  }\n\n  <div class=\"feed-content shape-{{ shape }} ion-no-padding\" [class.has-header]=\"showHeader\">\n    <!-- feeds -->\n    @for (feed of feeds; track feed.feed_url; let firstFeed = $first; let lastFeed = $last) {\n      <!-- items -->\n      @for (item of feed.items; track item.id; let firstItem = $first; let lastItem = $last) {\n        <ion-card\n          [class.first]=\"firstFeed && firstItem\"\n          [class.last]=\"lastFeed && lastItem\"\n          [color]=\"cardColor !== 'light-transparent' ? cardColor : undefined\"\n        >\n          <ion-card-header>\n            <ion-card-subtitle style=\"vertical-align: middle\">\n              <!-- Authors -->\n              @for (author of item.authors || feed.authors; track author) {\n                @if (author.name || author.avatar) {\n                  <ion-chip (click)=\"openUrl(author.url)\" tappable>\n                    @if (author.avatar) {\n                      <ion-avatar>\n                        <ion-img [src]=\"author.avatar\" [alt]=\"author.name\"></ion-img>\n                      </ion-avatar>\n                    }\n                    @if (author.name) {\n                      <ion-label class=\"author\">{{ author.name }}</ion-label>\n                    }\n                  </ion-chip>\n                }\n              }\n              <ion-note class=\"ion-float-end\">\n                <small>{{ item.date_published | dateFromNow }}</small>\n              </ion-note>\n            </ion-card-subtitle>\n\n            <!-- title -->\n            <ion-card-title (click)=\"openUrl(item.url || feed.feed_url)\" tappable>{{ item?.title }}</ion-card-title>\n\n            <!-- tags -->\n            @let tags = item | map: getTags;\n            @if (tags | isNotEmptyArray) {\n              <ion-text class=\"tags\">\n                @for (tag of tags; track tag; let last = $last) {\n                  <a (click)=\"openTag(feed, tag)\" tappable>\n                    <ion-text>#{{ tag }}</ion-text>\n                  </a>\n                  @if (!last) {\n                    &nbsp;\n                  }\n                }\n              </ion-text>\n            }\n          </ion-card-header>\n\n          <!-- Feed content -->\n          <ion-card-content>\n            <ion-text [feed]=\"item.url || feed.feed_url\">\n              @if (item.content_html) {\n                <p [innerHTML]=\"item.content_html\"></p>\n              } @else if (item.content_text) {\n                <p [innerText]=\"item.content_text\"></p>\n              }\n            </ion-text>\n          </ion-card-content>\n\n          <ion-button (click)=\"openUrl(item.url)\" class=\"ion-float-end\" fill=\"clear\">\n            <ion-label>{{ (item.truncated ? 'SOCIAL.FEED.READ_MORE' : 'COMMON.BTN_SHOW') | translate }}</ion-label>\n            <ion-icon slot=\"end\" name=\"chevron-forward-outline\"></ion-icon>\n          </ion-button>\n        </ion-card>\n      }\n    }\n  </div>\n}\n", styles: [":host{display:block;height:calc(100% - 10px);--feed-header-height: 48px;--feed-border-radius: 4px;--ion-card-background: rgba(var(--ion-background-color-rgb), .6);-webkit-margin-start:10px;margin-inline-start:10px;-webkit-margin-end:10px;margin-inline-end:10px;margin-top:0;margin-bottom:10px;-webkit-box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px rgba(0,0,0,.14),0 1px 5px rgba(0,0,0,.12);border-radius:var(--feed-border-radius);overflow:hidden}:host.shape-round{--feed-border-radius: 12px}ion-button{text-transform:unset;--color: rgba(var(--ion-color-contrast-rgb), .7)}ion-item.feed-header{height:var(--feed-header-height);margin:0;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border-radius:var(--feed-border-radius) var(--feed-border-radius) 0 0}ion-item.feed-header ion-icon[slot=start]{-webkit-margin-end:8px;margin-inline-end:8px}.feed-content{height:100%;overflow-y:auto;--margin-bottom: 8px}.feed-content.has-header{height:calc(100% - var(--feed-header-height, 0))}.feed-content ion-card{--top-radius: 4px;--bottom-radius: 4px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);margin:0 0 var(--margin-bottom) 0;border-radius:var(--top-radius) var(--top-radius) var(--bottom-radius) var(--bottom-radius);--ion-card-color-contrast-rgb: var(--ion-color-contrast-rgb, var(--ion-color-dark-rgb, 0, 0, 0));--color: rgba(var(--ion-card-color-contrast-rgb), .87)}.feed-content ion-card.first{--top-radius: 0}.feed-content ion-card.last{--margin-bottom: 0;--bottom-radius: 0}.feed-content ion-card ion-card-header ion-card-title{--color: rgba(var(--ion-card-color-contrast-rgb), .87)}.feed-content ion-card ion-card-header ion-card-subtitle ion-chip{--background: transparent;--border-color: transparent;--border-width: 0}.feed-content ion-card ion-card-header ion-card-subtitle ion-chip ion-avatar{--color: rgba(var(--ion-card-color-contrast-rgb), .6);border:1px solid var(--color)}.feed-content ion-card ion-card-header ion-card-subtitle ion-chip ion-label{--color: rgba(var(--ion-card-color-contrast-rgb), .8);color:var(--color)}.feed-content ion-card ion-card-header ion-card-subtitle ion-note{--color: rgba(var(--ion-card-color-contrast-rgb), .6);color:var(--color)}.feed-content ion-card ion-card-header .tags{display:inline}.feed-content ion-card ion-card-header .tags a{color:rgba(var(--ion-card-color-contrast-rgb),.6)!important}.feed-content ion-card ion-card-content ion-text ::ng-deep img{max-width:100%;height:auto!important}\n"], dependencies: [{ 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.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.IonChip, selector: "ion-chip", inputs: ["color", "disabled", "mode", "outline"] }, { 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.IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { 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: "component", type: DebugComponent, selector: "app-debug", inputs: ["titlePrefix", "title", "enable", "expanded"] }, { kind: "directive", type: FeedDirective, selector: "feed,[feed]", inputs: ["feed"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.JsonPipe, name: "json" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: DateFromNowPipe, name: "dateFromNow" }, { kind: "pipe", type: NotEmptyArrayPipe, name: "isNotEmptyArray" }, { kind: "pipe", type: ArrayFirstPipe, name: "arrayFirst" }, { kind: "pipe", type: MapPipe, name: "map" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeedsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-feed', providers: [RxState], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let feeds = feeds$ | async;\n\n@if (debug) {\n  <app-debug [title]=\"'Feed'\">\n    <p>\n      hasFeeds?: {{ hasFeeds$ | async }}\n      <br />\n      feedUrls: {{ feedUrls$ | async | json }}\n      <br />\n      shape: {{ shape }}\n    </p>\n  </app-debug>\n}\n\n@if (feeds | isNotEmptyArray) {\n  <!-- top header -->\n  @if (showHeader && (feeds | arrayFirst); as feed) {\n    <ion-item lines=\"none\" [color]=\"headerColor\" class=\"feed-header shape-{{ shape }}\">\n      <ion-icon slot=\"start\" name=\"megaphone\"></ion-icon>\n      <ion-label>\n        <b>{{ feed.title || ('SOCIAL.FEED.NEWS' | translate) }}</b>\n      </ion-label>\n      <ion-button slot=\"end\" fill=\"clear\" (click)=\"openFeedHome()\" shape=\"\">\n        <ion-label translate>SOCIAL.FEED.SHOW_ALL_FEED</ion-label>\n        <ion-icon slot=\"end\" name=\"chevron-forward-outline\"></ion-icon>\n      </ion-button>\n    </ion-item>\n  }\n\n  <div class=\"feed-content shape-{{ shape }} ion-no-padding\" [class.has-header]=\"showHeader\">\n    <!-- feeds -->\n    @for (feed of feeds; track feed.feed_url; let firstFeed = $first; let lastFeed = $last) {\n      <!-- items -->\n      @for (item of feed.items; track item.id; let firstItem = $first; let lastItem = $last) {\n        <ion-card\n          [class.first]=\"firstFeed && firstItem\"\n          [class.last]=\"lastFeed && lastItem\"\n          [color]=\"cardColor !== 'light-transparent' ? cardColor : undefined\"\n        >\n          <ion-card-header>\n            <ion-card-subtitle style=\"vertical-align: middle\">\n              <!-- Authors -->\n              @for (author of item.authors || feed.authors; track author) {\n                @if (author.name || author.avatar) {\n                  <ion-chip (click)=\"openUrl(author.url)\" tappable>\n                    @if (author.avatar) {\n                      <ion-avatar>\n                        <ion-img [src]=\"author.avatar\" [alt]=\"author.name\"></ion-img>\n                      </ion-avatar>\n                    }\n                    @if (author.name) {\n                      <ion-label class=\"author\">{{ author.name }}</ion-label>\n                    }\n                  </ion-chip>\n                }\n              }\n              <ion-note class=\"ion-float-end\">\n                <small>{{ item.date_published | dateFromNow }}</small>\n              </ion-note>\n            </ion-card-subtitle>\n\n            <!-- title -->\n            <ion-card-title (click)=\"openUrl(item.url || feed.feed_url)\" tappable>{{ item?.title }}</ion-card-title>\n\n            <!-- tags -->\n            @let tags = item | map: getTags;\n            @if (tags | isNotEmptyArray) {\n              <ion-text class=\"tags\">\n                @for (tag of tags; track tag; let last = $last) {\n                  <a (click)=\"openTag(feed, tag)\" tappable>\n                    <ion-text>#{{ tag }}</ion-text>\n                  </a>\n                  @if (!last) {\n                    &nbsp;\n                  }\n                }\n              </ion-text>\n            }\n          </ion-card-header>\n\n          <!-- Feed content -->\n          <ion-card-content>\n            <ion-text [feed]=\"item.url || feed.feed_url\">\n              @if (item.content_html) {\n                <p [innerHTML]=\"item.content_html\"></p>\n              } @else if (item.content_text) {\n                <p [innerText]=\"item.content_text\"></p>\n              }\n            </ion-text>\n          </ion-card-content>\n\n          <ion-button (click)=\"openUrl(item.url)\" class=\"ion-float-end\" fill=\"clear\">\n            <ion-label>{{ (item.truncated ? 'SOCIAL.FEED.READ_MORE' : 'COMMON.BTN_SHOW') | translate }}</ion-label>\n            <ion-icon slot=\"end\" name=\"chevron-forward-outline\"></ion-icon>\n          </ion-button>\n        </ion-card>\n      }\n    }\n  </div>\n}\n", styles: [":host{display:block;height:calc(100% - 10px);--feed-header-height: 48px;--feed-border-radius: 4px;--ion-card-background: rgba(var(--ion-background-color-rgb), .6);-webkit-margin-start:10px;margin-inline-start:10px;-webkit-margin-end:10px;margin-inline-end:10px;margin-top:0;margin-bottom:10px;-webkit-box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px rgba(0,0,0,.14),0 1px 5px rgba(0,0,0,.12);border-radius:var(--feed-border-radius);overflow:hidden}:host.shape-round{--feed-border-radius: 12px}ion-button{text-transform:unset;--color: rgba(var(--ion-color-contrast-rgb), .7)}ion-item.feed-header{height:var(--feed-header-height);margin:0;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border-radius:var(--feed-border-radius) var(--feed-border-radius) 0 0}ion-item.feed-header ion-icon[slot=start]{-webkit-margin-end:8px;margin-inline-end:8px}.feed-content{height:100%;overflow-y:auto;--margin-bottom: 8px}.feed-content.has-header{height:calc(100% - var(--feed-header-height, 0))}.feed-content ion-card{--top-radius: 4px;--bottom-radius: 4px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);margin:0 0 var(--margin-bottom) 0;border-radius:var(--top-radius) var(--top-radius) var(--bottom-radius) var(--bottom-radius);--ion-card-color-contrast-rgb: var(--ion-color-contrast-rgb, var(--ion-color-dark-rgb, 0, 0, 0));--color: rgba(var(--ion-card-color-contrast-rgb), .87)}.feed-content ion-card.first{--top-radius: 0}.feed-content ion-card.last{--margin-bottom: 0;--bottom-radius: 0}.feed-content ion-card ion-card-header ion-card-title{--color: rgba(var(--ion-card-color-contrast-rgb), .87)}.feed-content ion-card ion-card-header ion-card-subtitle ion-chip{--background: transparent;--border-color: transparent;--border-width: 0}.feed-content ion-card ion-card-header ion-card-subtitle ion-chip ion-avatar{--color: rgba(var(--ion-card-color-contrast-rgb), .6);border:1px solid var(--color)}.feed-content ion-card ion-card-header ion-card-subtitle ion-chip ion-label{--color: rgba(var(--ion-card-color-contrast-rgb), .8);color:var(--color)}.feed-content ion-card ion-card-header ion-card-subtitle ion-note{--color: rgba(var(--ion-card-color-contrast-rgb), .6);color:var(--color)}.feed-content ion-card ion-card-header .tags{display:inline}.feed-content ion-card ion-card-header .tags a{color:rgba(var(--ion-card-color-contrast-rgb),.6)!important}\n"] }]
+            args: [{ selector: 'app-feed', providers: [RxState], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let feeds = feeds$ | async;\n\n@if (debug) {\n  <app-debug [title]=\"'Feed'\">\n    <p>\n      hasFeeds?: {{ hasFeeds$ | async }}\n      <br />\n      feedUrls: {{ feedUrls$ | async | json }}\n      <br />\n      shape: {{ shape }}\n    </p>\n  </app-debug>\n}\n\n@if (feeds | isNotEmptyArray) {\n  <!-- top header -->\n  @if (showHeader && (feeds | arrayFirst); as feed) {\n    <ion-item lines=\"none\" [color]=\"headerColor\" class=\"feed-header shape-{{ shape }}\">\n      <ion-icon slot=\"start\" name=\"megaphone\"></ion-icon>\n      <ion-label>\n        <b>{{ feed.title || ('SOCIAL.FEED.NEWS' | translate) }}</b>\n      </ion-label>\n      <ion-button slot=\"end\" fill=\"clear\" (click)=\"openFeedHome()\" shape=\"\">\n        <ion-label translate>SOCIAL.FEED.SHOW_ALL_FEED</ion-label>\n        <ion-icon slot=\"end\" name=\"chevron-forward-outline\"></ion-icon>\n      </ion-button>\n    </ion-item>\n  }\n\n  <div class=\"feed-content shape-{{ shape }} ion-no-padding\" [class.has-header]=\"showHeader\">\n    <!-- feeds -->\n    @for (feed of feeds; track feed.feed_url; let firstFeed = $first; let lastFeed = $last) {\n      <!-- items -->\n      @for (item of feed.items; track item.id; let firstItem = $first; let lastItem = $last) {\n        <ion-card\n          [class.first]=\"firstFeed && firstItem\"\n          [class.last]=\"lastFeed && lastItem\"\n          [color]=\"cardColor !== 'light-transparent' ? cardColor : undefined\"\n        >\n          <ion-card-header>\n            <ion-card-subtitle style=\"vertical-align: middle\">\n              <!-- Authors -->\n              @for (author of item.authors || feed.authors; track author) {\n                @if (author.name || author.avatar) {\n                  <ion-chip (click)=\"openUrl(author.url)\" tappable>\n                    @if (author.avatar) {\n                      <ion-avatar>\n                        <ion-img [src]=\"author.avatar\" [alt]=\"author.name\"></ion-img>\n                      </ion-avatar>\n                    }\n                    @if (author.name) {\n                      <ion-label class=\"author\">{{ author.name }}</ion-label>\n                    }\n                  </ion-chip>\n                }\n              }\n              <ion-note class=\"ion-float-end\">\n                <small>{{ item.date_published | dateFromNow }}</small>\n              </ion-note>\n            </ion-card-subtitle>\n\n            <!-- title -->\n            <ion-card-title (click)=\"openUrl(item.url || feed.feed_url)\" tappable>{{ item?.title }}</ion-card-title>\n\n            <!-- tags -->\n            @let tags = item | map: getTags;\n            @if (tags | isNotEmptyArray) {\n              <ion-text class=\"tags\">\n                @for (tag of tags; track tag; let last = $last) {\n                  <a (click)=\"openTag(feed, tag)\" tappable>\n                    <ion-text>#{{ tag }}</ion-text>\n                  </a>\n                  @if (!last) {\n                    &nbsp;\n                  }\n                }\n              </ion-text>\n            }\n          </ion-card-header>\n\n          <!-- Feed content -->\n          <ion-card-content>\n            <ion-text [feed]=\"item.url || feed.feed_url\">\n              @if (item.content_html) {\n                <p [innerHTML]=\"item.content_html\"></p>\n              } @else if (item.content_text) {\n                <p [innerText]=\"item.content_text\"></p>\n              }\n            </ion-text>\n          </ion-card-content>\n\n          <ion-button (click)=\"openUrl(item.url)\" class=\"ion-float-end\" fill=\"clear\">\n            <ion-label>{{ (item.truncated ? 'SOCIAL.FEED.READ_MORE' : 'COMMON.BTN_SHOW') | translate }}</ion-label>\n            <ion-icon slot=\"end\" name=\"chevron-forward-outline\"></ion-icon>\n          </ion-button>\n        </ion-card>\n      }\n    }\n  </div>\n}\n", styles: [":host{display:block;height:calc(100% - 10px);--feed-header-height: 48px;--feed-border-radius: 4px;--ion-card-background: rgba(var(--ion-background-color-rgb), .6);-webkit-margin-start:10px;margin-inline-start:10px;-webkit-margin-end:10px;margin-inline-end:10px;margin-top:0;margin-bottom:10px;-webkit-box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px rgba(0,0,0,.14),0 1px 5px rgba(0,0,0,.12);border-radius:var(--feed-border-radius);overflow:hidden}:host.shape-round{--feed-border-radius: 12px}ion-button{text-transform:unset;--color: rgba(var(--ion-color-contrast-rgb), .7)}ion-item.feed-header{height:var(--feed-header-height);margin:0;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border-radius:var(--feed-border-radius) var(--feed-border-radius) 0 0}ion-item.feed-header ion-icon[slot=start]{-webkit-margin-end:8px;margin-inline-end:8px}.feed-content{height:100%;overflow-y:auto;--margin-bottom: 8px}.feed-content.has-header{height:calc(100% - var(--feed-header-height, 0))}.feed-content ion-card{--top-radius: 4px;--bottom-radius: 4px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);margin:0 0 var(--margin-bottom) 0;border-radius:var(--top-radius) var(--top-radius) var(--bottom-radius) var(--bottom-radius);--ion-card-color-contrast-rgb: var(--ion-color-contrast-rgb, var(--ion-color-dark-rgb, 0, 0, 0));--color: rgba(var(--ion-card-color-contrast-rgb), .87)}.feed-content ion-card.first{--top-radius: 0}.feed-content ion-card.last{--margin-bottom: 0;--bottom-radius: 0}.feed-content ion-card ion-card-header ion-card-title{--color: rgba(var(--ion-card-color-contrast-rgb), .87)}.feed-content ion-card ion-card-header ion-card-subtitle ion-chip{--background: transparent;--border-color: transparent;--border-width: 0}.feed-content ion-card ion-card-header ion-card-subtitle ion-chip ion-avatar{--color: rgba(var(--ion-card-color-contrast-rgb), .6);border:1px solid var(--color)}.feed-content ion-card ion-card-header ion-card-subtitle ion-chip ion-label{--color: rgba(var(--ion-card-color-contrast-rgb), .8);color:var(--color)}.feed-content ion-card ion-card-header ion-card-subtitle ion-note{--color: rgba(var(--ion-card-color-contrast-rgb), .6);color:var(--color)}.feed-content ion-card ion-card-header .tags{display:inline}.feed-content ion-card ion-card-header .tags a{color:rgba(var(--ion-card-color-contrast-rgb),.6)!important}.feed-content ion-card ion-card-content ion-text ::ng-deep img{max-width:100%;height:auto!important}\n"] }]
         }], ctorParameters: () => [{ type: Environment, decorators: [{
                     type: Inject,
                     args: [ENVIRONMENT]
@@ -33758,10 +33790,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     args: [APP_FEED_SERVICE]
                 }] }], propDecorators: { debug: [{
                 type: Input
-            }], feeds: [{
-                type: Input
-            }], feedUrls: [{
-                type: Input
             }], showHeader: [{
                 type: Input
             }], headerColor: [{
@@ -33772,12 +33800,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], class: [{
                 type: Input
+            }], feeds: [{
+                type: Input
+            }], feedUrls: [{
+                type: Input
+            }], maxAgeInMonths: [{
+                type: Input
+            }], maxContentLength: [{
+                type: Input
             }], hostClass: [{
                 type: HostBinding,
                 args: ['class']
-            }], borderRadius: [{
-                type: HostBinding,
-                args: ['class.round']
             }] } });
 
 /**
@@ -33821,12 +33854,17 @@ class HomePage extends RxState {
     offline;
     showNotificationIcon;
     autoHideNotificationIcon;
+    showFeed = false;
+    feedUrls;
+    feedMaxAgeInMonths;
+    feedMaxContentLength;
     hasScrollbar = false;
+    loading$ = this.select('loading');
     $partners = new BehaviorSubject(null);
     $filteredButtons = new BehaviorSubject(undefined);
     darkMode$ = this.select('darkMode');
     pageHistory$ = this.select('pageHistory');
-    loading$ = this.select('loading');
+    hasFeed$ = this.select('hasFeed');
     set pageHistory(value) {
         this.set('pageHistory', () => value);
     }
@@ -33993,11 +34031,11 @@ class HomePage extends RxState {
     onConfigLoaded(config) {
         console.debug('[home] Applying configuration', config);
         this._config = config;
-        this.appName = this._config.label || this.environment.defaultAppName || 'SUMARiS';
-        this.logo = this._config.largeLogo || this._config.smallLogo || undefined;
+        this.appName = config.label || this.environment.defaultAppName || 'SUMARiS';
+        this.logo = config.largeLogo || config.smallLogo || undefined;
         this.description = config.name;
         this.isWeb = this.platform.isWeb();
-        this.canRegister = this._config.getPropertyAsBoolean(CORE_CONFIG_OPTIONS.REGISTRATION_ENABLE);
+        this.canRegister = config.getPropertyAsBoolean(CORE_CONFIG_OPTIONS.REGISTRATION_ENABLE);
         const showNotificationIconByConfig = this.config?.showNotificationIcon === true ||
             (this.config?.showNotificationIcon === 'mobile' && this.mobile) ||
             (this.config?.showNotificationIcon === 'desktop' && !this.mobile);
@@ -34007,6 +34045,15 @@ class HomePage extends RxState {
                 (this.config?.autoHideNotificationIcon === 'mobile' && this.mobile) ||
                 (this.config?.autoHideNotificationIcon === 'desktop' && !this.mobile) ||
                 false;
+        // Feed
+        const locale = this.currentLocale;
+        this.showFeed = config.getPropertyAsBoolean(CORE_CONFIG_OPTIONS.HOME_FEED_ENABLE) || !!this.environment?.feed?.jsonFeed;
+        this.feedUrls = config.getPropertyAsStrings(CORE_CONFIG_OPTIONS.HOME_FEED_URLS) ?? this.environment?.feed?.jsonFeed?.[locale];
+        this.feedMaxAgeInMonths =
+            config.getPropertyAsInt(CORE_CONFIG_OPTIONS.HOME_FEED_MAX_AGE_IN_MONTHS) ?? this.environment?.feed?.maxAgeInMonths ?? -1;
+        this.feedMaxContentLength =
+            config.getPropertyAsInt(CORE_CONFIG_OPTIONS.HOME_FEED_MAX_CONTENT_LENGTH) ?? this.environment?.feed?.maxContentLength ?? -1;
+        // Legal information
         this.legalInformation = [
             {
                 title: 'HOME.PRIVACY_POLICY',
@@ -34130,15 +34177,20 @@ class HomePage extends RxState {
         console.debug('[home] Check scrollbar', this.hasScrollbar);
         this.markForCheck();
     }
+    initFeed(feed) {
+        if (!feed)
+            return;
+        this.connect('hasFeed', feed.hasFeeds$);
+    }
     markForCheck() {
         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 hasFeeds = feeds && (feeds.hasFeeds$ | async);\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row>\n        <ion-col size=\"0\" [sizeXl]=\"hasFeeds ? 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]=\"hasFeeds ? 1 : 0\"></ion-col>\n        <ion-col [class.feed]=\"hasFeeds\" [size]=\"hasFeeds ? 12 : 0\" [sizeXl]=\"hasFeeds ? 4 : 0\">\n          <app-feed #feeds shape=\"round\" [debug]=\"false\"></app-feed>\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{max-height:calc(100vh - var(--ion-toolbar-height) - var(--bottom-banner-height) - var(--ion-padding) * 2);padding-inline-end:calc(var(--ion-padding) - 10px)}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$2.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: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$1.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: i8$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8$1.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i8$1.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: 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", "feeds", "feedUrls", "showHeader", "headerColor", "cardColor", "shape", "class"] }, { 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], 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                      <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                [debug]=\"false\"\n                [feedUrls]=\"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                [feedUrls]=\"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{max-height:calc(100vh - var(--ion-toolbar-height) - var(--bottom-banner-height) - var(--ion-padding) * 2);padding-inline-end:calc(var(--ion-padding) - 10px)}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$2.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: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$1.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: i8$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8$1.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i8$1.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", "showHeader", "headerColor", "cardColor", "shape", "class", "feeds", "feedUrls", "maxAgeInMonths", "maxContentLength"] }, { 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], 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 hasFeeds = feeds && (feeds.hasFeeds$ | async);\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row>\n        <ion-col size=\"0\" [sizeXl]=\"hasFeeds ? 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]=\"hasFeeds ? 1 : 0\"></ion-col>\n        <ion-col [class.feed]=\"hasFeeds\" [size]=\"hasFeeds ? 12 : 0\" [sizeXl]=\"hasFeeds ? 4 : 0\">\n          <app-feed #feeds shape=\"round\" [debug]=\"false\"></app-feed>\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{max-height:calc(100vh - var(--ion-toolbar-height) - var(--bottom-banner-height) - var(--ion-padding) * 2);padding-inline-end:calc(var(--ion-padding) - 10px)}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                      <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                [debug]=\"false\"\n                [feedUrls]=\"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                [feedUrls]=\"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{max-height:calc(100vh - var(--ion-toolbar-height) - var(--bottom-banner-height) - var(--ion-padding) * 2);padding-inline-end:calc(var(--ion-padding) - 10px)}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]
@@ -49738,7 +49790,7 @@ class FeedTestingPage {
         this.cd.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeedTestingPage, deps: [{ token: LocalSettingsService }, { token: i0.ChangeDetectorRef }, { token: ENVIRONMENT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FeedTestingPage, selector: "app-feed-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>Feed test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <ion-grid class=\"form-container ion-padding-top\">\n    <ion-row>\n      <ion-col size=\"12\">\n        <mat-form-field [subscriptSizing]=\"'dynamic'\">\n          <mat-label>Feed URL(s)</mat-label>\n          <mat-select [(value)]=\"feedUrls\" multiple>\n            <mat-option *ngFor=\"let feedUrl of availableFeedUrls\" [value]=\"feedUrl\">\n              {{ feedUrl }}\n            </mat-option>\n            <mat-option>(Use environment)</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </ion-col>\n    </ion-row>\n    <ion-row>\n      <ion-col size=\"3\">\n        <mat-form-field [subscriptSizing]=\"'dynamic'\">\n          <mat-label>Header color</mat-label>\n          <mat-select [(value)]=\"headerColor\">\n            <mat-option *ngFor=\"let color of availableColors\" [value]=\"color\">\n              {{ color }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </ion-col>\n      <ion-col size=\"3\">\n        <mat-form-field [subscriptSizing]=\"'dynamic'\">\n          <mat-label>Card color</mat-label>\n          <mat-select [(value)]=\"cardColor\">\n            <mat-option *ngFor=\"let color of availableColors\" [value]=\"color\">\n              {{ color }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </ion-col>\n      <ion-col size=\"3\">\n        <mat-form-field [subscriptSizing]=\"'dynamic'\">\n          <mat-label>Shape</mat-label>\n          <mat-select [(value)]=\"shape\">\n            <mat-option *ngFor=\"let shape of availableShapes\" [value]=\"shape\">\n              {{ shape }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </ion-col>\n      <ion-col size=\"3\">\n        <mat-checkbox (change)=\"debug = $event.checked\" [checked]=\"debug\">Debug ?</mat-checkbox>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n  <div class=\"ion-padding\">\n    <app-feed\n      [feedUrls]=\"feedUrls\"\n      [headerColor]=\"headerColor\"\n      [cardColor]=\"cardColor\"\n      [shape]=\"shape\"\n      [debug]=\"debug\"\n    ></app-feed>\n  </div>\n</ion-content>\n", dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { 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: 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$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: FeedsComponent, selector: "app-feed", inputs: ["debug", "feeds", "feedUrls", "showHeader", "headerColor", "cardColor", "shape", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FeedTestingPage, selector: "app-feed-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>Feed test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <ion-grid class=\"form-container ion-padding-top\">\n    <ion-row>\n      <ion-col size=\"12\">\n        <mat-form-field [subscriptSizing]=\"'dynamic'\">\n          <mat-label>Feed URL(s)</mat-label>\n          <mat-select [(value)]=\"feedUrls\" multiple>\n            <mat-option *ngFor=\"let feedUrl of availableFeedUrls\" [value]=\"feedUrl\">\n              {{ feedUrl }}\n            </mat-option>\n            <mat-option>(Use environment)</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </ion-col>\n    </ion-row>\n    <ion-row>\n      <ion-col size=\"3\">\n        <mat-form-field [subscriptSizing]=\"'dynamic'\">\n          <mat-label>Header color</mat-label>\n          <mat-select [(value)]=\"headerColor\">\n            <mat-option *ngFor=\"let color of availableColors\" [value]=\"color\">\n              {{ color }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </ion-col>\n      <ion-col size=\"3\">\n        <mat-form-field [subscriptSizing]=\"'dynamic'\">\n          <mat-label>Card color</mat-label>\n          <mat-select [(value)]=\"cardColor\">\n            <mat-option *ngFor=\"let color of availableColors\" [value]=\"color\">\n              {{ color }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </ion-col>\n      <ion-col size=\"3\">\n        <mat-form-field [subscriptSizing]=\"'dynamic'\">\n          <mat-label>Shape</mat-label>\n          <mat-select [(value)]=\"shape\">\n            <mat-option *ngFor=\"let shape of availableShapes\" [value]=\"shape\">\n              {{ shape }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </ion-col>\n      <ion-col size=\"3\">\n        <mat-checkbox (change)=\"debug = $event.checked\" [checked]=\"debug\">Debug ?</mat-checkbox>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n  <div class=\"ion-padding\">\n    <app-feed\n      [feedUrls]=\"feedUrls\"\n      [headerColor]=\"headerColor\"\n      [cardColor]=\"cardColor\"\n      [shape]=\"shape\"\n      [debug]=\"debug\"\n    ></app-feed>\n  </div>\n</ion-content>\n", dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { 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: 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$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: FeedsComponent, selector: "app-feed", inputs: ["debug", "showHeader", "headerColor", "cardColor", "shape", "class", "feeds", "feedUrls", "maxAgeInMonths", "maxContentLength"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeedTestingPage, decorators: [{
             type: Component,