@sumaris-net/ngx-components 18.16.8 → 18.17.0

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

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, Directive, Pipe, Injectable, EventEmitter, Output, Optional, Inject, inject, NgModule, forwardRef, booleanAttribute, Component, ChangeDetectionStrategy, Input, ViewChildren, HostBinding, HostListener, ElementRef, numberAttribute, ViewChild, ANIMATION_MODULE_TYPE, RendererStyleFlags2, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectorRef, Self, ViewEncapsulation, APP_INITIALIZER, SecurityContext, viewChild, signal, input, model, computed, effect, untracked } from '@angular/core';
 import { firstValueFrom, shareReplay, tap, of, timer, Subject, merge, delay, isObservable, from, Subscription, BehaviorSubject, fromEvent, noop as noop$9, Observable, forkJoin, timeout, defer, combineLatest, debounceTime as debounceTime$1, distinctUntilChanged as distinctUntilChanged$1, interval, mergeMap as mergeMap$1, switchMap as switchMap$1, EMPTY } from 'rxjs';
-import { catchError, map, filter, takeUntil, first, switchMap, tap as tap$1, throttleTime, debounceTime, startWith, distinctUntilChanged, mergeMap, skip, finalize, bufferWhen, distinctUntilKeyChanged, take } from 'rxjs/operators';
+import { catchError, map, filter, takeUntil, first, switchMap, tap as tap$1, throttleTime, debounceTime, startWith, distinctUntilChanged, mergeMap, skip, finalize, distinctUntilKeyChanged, bufferWhen, take } from 'rxjs/operators';
 import * as cloneImported from 'clone';
 import * as i3$1 from '@angular/common';
 import { CommonModule, DOCUMENT, LocationStrategy, Location, AsyncPipe, JsonPipe } from '@angular/common';
@@ -2871,14 +2871,14 @@ class SharedValidators {
     }
     static entity(control) {
         const value = control.value;
-        if (value && (typeof value !== 'object' || value.id === undefined || value.id === null)) {
+        if (value && (typeof value !== 'object' || isNil(value.id))) {
             return { entity: true };
         }
         return null;
     }
     static entities(control) {
         const value = control.value;
-        if (value && (!Array.isArray(value) || value.every((e) => e?.id === undefined || e?.id === null))) {
+        if (value && (!Array.isArray(value) || value.every((e) => isNil(e?.id)))) {
             return { entity: true };
         }
         return null;
@@ -13138,11 +13138,14 @@ const environment = Object.freeze({
                 '/api/feed.json',
                 'https://gitlab.ifremer.fr/sih-public/sumaris/ngx-sumaris-components/-/raw/master/doc/feed/feed-fr.json',
                 // Example with JsonFeed version 1 (and not 1.1)
-                'https://raw.githubusercontent.com/duniter/cesium/master/doc/feed/feed-fr.json',
+                //'https://raw.githubusercontent.com/duniter/cesium/master/doc/feed/feed-fr.json',
                 // Example with discourse API :
-                'https://raw.githubusercontent.com/duniter/cesium/master/doc/feed/1.1/feed-fr-FR.json',
+                //'https://raw.githubusercontent.com/duniter/cesium/master/doc/feed/1.1/feed-fr-FR.json',
+            ],
+            en: [
+                '/api/feed.json',
+                'https://gitlab.ifremer.fr/sih-public/sumaris/ngx-sumaris-components/-/raw/master/doc/feed/feed-en.json'
             ],
-            en: ['https://gitlab.ifremer.fr/sih-public/sumaris/ngx-sumaris-components/-/raw/master/doc/feed/feed-en.json'],
         },
         maxContentLength: 1000,
         maxAgeInMonths: -1,
@@ -19713,6 +19716,9 @@ class NetworkService extends StartableObservableService {
     get connectionParams() {
         return this._connectionParams;
     }
+    get peer$() {
+        return this.dataSubject.pipe(distinctUntilKeyChanged('url'));
+    }
     constructor(_document, platform, modalCtrl, storage, settings, cache, http, environment, loggingService, translate, toastController) {
         super(platform);
         this._document = _document;
@@ -23014,7 +23020,7 @@ const Fragments = {
   `,
 };
 // Account queries
-const Queries = {
+const Queries$1 = {
     load: gql `
     query Account {
       data: account {
@@ -23176,12 +23182,18 @@ class AccountService extends BaseGraphqlService {
     get account() {
         return this._cache.loaded ? this._data : undefined;
     }
+    get account$() {
+        return this.onChange.asObservable().pipe(startWith(this.account));
+    }
     get person() {
         if (this._cache.loaded && !this._cache.person) {
             this._cache.person = this._cache.loaded ? this._data.asPerson() : undefined;
         }
         return this._cache.person;
     }
+    get person$() {
+        return this.onChange.asObservable().pipe(map(() => this.person), startWith(this.person));
+    }
     get department() {
         if (this._cache.loaded && !this._cache.department) {
             this._cache.department = this._cache.loaded ? this._data.asPerson().department : undefined;
@@ -23610,7 +23622,7 @@ class AccountService extends BaseGraphqlService {
         }
         // Load remotely
         else {
-            const query = opts?.query || (this.apiTokenEnabled ? Queries.loadWithTokens : Queries.load);
+            const query = opts?.query || (this.apiTokenEnabled ? Queries$1.loadWithTokens : Queries$1.load);
             const { data } = await this.graphql.query({
                 query,
                 error: { code: ErrorCodes.LOAD_ACCOUNT_ERROR, message: 'ERROR.LOAD_ACCOUNT_ERROR' },
@@ -30020,10 +30032,10 @@ class AboutModal {
     }
     /* -- protected functions -- */
     setConfig(config) {
-        this.forumUrl = config?.getProperty(CORE_CONFIG_OPTIONS.FORUM_URL) || this.environment.forumUrl;
-        this.helpUrl = config?.getProperty(CORE_CONFIG_OPTIONS.HELP_URL) || this.environment.helpUrl;
-        this.reportIssueUrl = config?.getProperty(CORE_CONFIG_OPTIONS.REPORT_ISSUE_URL) || this.environment.reportIssueUrl;
-        this.buildDate = this.environment.buildDate || new Date().toISOString();
+        this.forumUrl = config?.getProperty(CORE_CONFIG_OPTIONS.FORUM_URL) || this.environment?.forumUrl;
+        this.helpUrl = config?.getProperty(CORE_CONFIG_OPTIONS.HELP_URL) || this.environment?.helpUrl;
+        this.reportIssueUrl = config?.getProperty(CORE_CONFIG_OPTIONS.REPORT_ISSUE_URL) || this.environment?.reportIssueUrl;
+        this.buildDate = this.environment?.buildDate;
     }
     async loadNodeInfo() {
         this.nodeInfo = await this.getNodeInfo();
@@ -32720,6 +32732,7 @@ const SocialErrorCodes = {
     SAVE_USER_EVENT_ERROR: 50001,
     COUNT_USER_EVENT_ERROR: 50002,
     SEND_MESSAGE_ERROR: 50003,
+    DELETE_MESSAGE_ERROR: 50004,
     SUBSCRIBE_USER_EVENTS_ERROR: 50005,
     SUBSCRIBE_JOB_PROGRESSION_ERROR: 50010,
     LOAD_JOB_PROGRESSIONS_ERROR: 50011,
@@ -33781,297 +33794,1063 @@ class JsonFeedUtils {
     }
 }
 
-const APP_FEED_SERVICE = new InjectionToken('FeeService');
-class FeedService extends StartableService {
-    settings;
-    environment;
-    _logPrefix = '[feed-service] ';
-    _state = new RxState();
-    network = inject(NetworkService);
-    locale$ = this._state.select('locale');
-    feedUrls$ = this._state.select('feedUrls');
-    get feedUrls() {
-        return this._state.get('feedUrls');
+var PersonFilter_1;
+// @dynamic
+let PersonFilter = class PersonFilter extends EntityFilter {
+    static { PersonFilter_1 = this; }
+    static fromObject;
+    static searchFilter(source) {
+        return source && PersonFilter_1.fromObject(source).asFilterFn();
     }
-    set feedUrls(urls) {
-        this._state.set('feedUrls', () => urls);
+    email;
+    pubkey;
+    searchText;
+    statusIds;
+    userProfiles;
+    includedIds;
+    excludedIds;
+    searchAttribute;
+    searchAttributes;
+    constructor() {
+        super(PersonFilter_1.TYPENAME);
     }
-    constructor(settings, environment) {
-        super(settings);
-        this.settings = settings;
-        this.environment = environment;
-        this._state.connect('locale', this.settings.locale$);
-        this._state.connect('feedUrls', this.locale$.pipe(filter(isNotNilOrBlank), map((locale) => (locale && environment.feed?.jsonFeed?.[locale]) ?? [])));
-        // DEBUG
-        this._debug = !environment.production;
-        if (this._debug)
-            console.debug(`${this._logPrefix}created`);
+    fromObject(source, opts) {
+        super.fromObject(source, opts);
+        this.email = source.email;
+        this.pubkey = source.pubkey;
+        this.searchText = source.searchText;
+        this.statusIds = source.statusIds || (isNotNil(source.statusId) ? [source.statusId] : undefined);
+        this.userProfiles = source.userProfiles;
+        this.excludedIds = source.excludedIds;
+        this.searchAttribute = source.searchAttribute;
+        this.searchAttributes = source.searchAttributes;
     }
-    async ngOnStart() {
-        await Promise.all([this.settings.ready(), this.network.ready()]);
-        return {
-            locale: this.settings.locale,
-        };
+    asObject(opts) {
+        const target = super.asObject(opts);
+        target.email = this.email;
+        target.pubkey = this.pubkey;
+        target.searchText = this.searchText;
+        target.statusIds = this.statusIds;
+        target.userProfiles = this.userProfiles;
+        target.excludedIds = this.excludedIds;
+        target.searchAttribute = this.searchAttribute;
+        target.searchAttributes = this.searchAttributes;
+        return target;
     }
-    watchAll(opts) {
-        if (!this.started) {
-            return from(this.start()).pipe(switchMap$1(() => this.watchAll(opts)));
+    buildFilter() {
+        const filterFns = super.buildFilter();
+        // Filter by status
+        if (isNotEmptyArray(this.statusIds)) {
+            filterFns.push((e) => this.statusIds.includes(e.statusId));
         }
-        if (isNotEmptyArray(opts?.urls)) {
-            return this.locale$.pipe(mergeMap((locale) => this.loadAll(opts.urls, { locale, ...opts })));
+        // Filter included ids
+        const includedIds = this.includedIds;
+        if (isNotEmptyArray(includedIds)) {
+            filterFns.push((e) => isNotNil(e.id) && includedIds.includes(e.id));
         }
-        return this.feedUrls$.pipe(filter(isNotEmptyArray), mergeMap((urls) => this.loadAll(urls, opts)));
-    }
-    getHomeUrl(feed) {
-        const feedUrl = feed?.feed_url ?? firstArrayValue(this.feedUrls);
-        return feedUrl ? UrlUtils.getRootUrl(feedUrl) : undefined;
-    }
-    getTagUrl(feed, tag) {
-        if (!feed || !tag)
-            throw new Error("Missing 'feed' or 'tag' argument");
-        const baseUrl = this.getHomeUrl(feed);
-        return feed.tag_template?.replace('{tag}', tag) ?? baseUrl + '/tag/' + tag;
+        // Filter excluded ids
+        const excludedIds = this.excludedIds;
+        if (isNotEmptyArray(excludedIds)) {
+            filterFns.push((e) => isNil(e.id) || !excludedIds.includes(e.id));
+        }
+        // Search text
+        const searchTextFilter = EntityUtils.searchTextFilter(this.searchAttribute || this.searchAttributes || ['lastName', 'firstName', 'department.name'], this.searchText);
+        if (searchTextFilter)
+            filterFns.push(searchTextFilter);
+        return filterFns;
     }
-    async load(url, opts) {
-        const { data } = await this.loadAll([url], opts);
-        return data?.[0];
+};
+PersonFilter = PersonFilter_1 = __decorate([
+    EntityClass({ typename: 'PersonFilterVO' })
+], PersonFilter);
+
+const MessageTypes = {
+    INBOX_MESSAGE: 'INBOX_MESSAGE',
+    EMAIL: 'EMAIL',
+    FEED: 'FEED',
+};
+const MessageTypeList = Object.freeze([
+    {
+        id: MessageTypes.INBOX_MESSAGE,
+        icon: 'notifications',
+        label: 'SOCIAL.MESSAGE.TYPE_ENUM.INBOX_MESSAGE',
+    },
+    {
+        id: MessageTypes.EMAIL,
+        icon: 'mail',
+        label: 'SOCIAL.MESSAGE.TYPE_ENUM.EMAIL',
+    },
+    {
+        id: MessageTypes.FEED,
+        icon: 'megaphone',
+        label: 'SOCIAL.MESSAGE.TYPE_ENUM.FEED',
+    },
+]);
+// @dynamic
+let Message = class Message extends Entity {
+    static fromObject;
+    type;
+    issuer;
+    recipients;
+    recipientFilter;
+    subject;
+    body;
+    constructor() {
+        super();
     }
-    async loadAll(urls, opts) {
-        await this.ready();
-        urls = urls ?? this.feedUrls;
-        opts = {
-            maxAgeInMonths: opts?.maxAgeInMonths ?? this.environment.feed?.maxAgeInMonths,
-            maxContentLength: opts?.maxContentLength ?? this.environment.feed?.maxContentLength,
-            locale: this.settings.locale,
-            depth: 0,
-            ...opts,
-        };
-        const feeds = await Promise.all((urls || []).map(async (url) => {
-            try {
-                // Get JSON
-                const json = await this.network.get(url);
-                console.debug(`${this._logPrefix}Loaded JSON from ${url}`, json);
-                // Resolve feed
-                return await this.resolveFeed(json, url, opts);
-            }
-            catch (err) {
-                if (err?.status === 404) {
-                    console.error(`${this._logPrefix} Error while fetching feeds at ${url}. 404 (Not found)`);
-                }
-                else {
-                    console.error(`${this._logPrefix} Error while fetching feeds at ${url}`, err);
-                }
-                return Promise.resolve([]);
-            }
-        }));
-        const data = feeds.flat();
-        // Close opened resources
-        if (opts.depth === 0) {
-            this.onAfterLoadAll();
-        }
-        return { data, total: data.length };
+    fromObject(source, opts) {
+        super.fromObject(source, opts);
+        this.type = source.type;
+        this.issuer = source.issuer && Person.fromObject(source.issuer);
+        this.recipients = source.recipients && source.recipients.map(Person.fromObject);
+        this.recipientFilter = (source.recipientFilter && PersonFilter.fromObject(source.recipientFilter)) || undefined;
+        this.subject = source.subject;
+        this.body = source.body;
     }
-    async resolveFeed(json, url, opts) {
-        // Check json is JsonFeed compatible
-        if (JsonFeedUtils.isJsonFeed(json)) {
-            // Migrate from old versions
-            let feed = JsonFeedUtils.migrateFeed(json);
-            // Resolve items (e.g. using feed.next_url)
-            feed = await this.resolveFeedItems(feed, { ...opts, depth: opts?.depth ?? 0 });
-            // Truncate html
-            JsonFeedUtils.truncateFeedItemsHtml(feed, opts);
-            return isNotEmptyArray(feed?.items) ? [feed] : [];
-        }
-        // not resolved (unknown format)
-        return undefined;
+    asObject(opts) {
+        const target = super.asObject(opts);
+        target.recipients = this.recipients && this.recipients.map((p) => p.asObject(opts));
+        target.recipientFilter = (this.recipientFilter && this.recipientFilter.asObject(opts)) || undefined;
+        return target;
     }
-    async resolveFeedItems(json, opts) {
-        if (!json)
-            return json;
-        // Load items
-        if (isEmptyArray(json.items) && isNotNilOrBlank(json.next_url)) {
-            const depth = opts?.depth ?? 0;
-            if (depth >= 3) {
-                console.warn(`${this._logPrefix}Max depth reached (${depth}) for ${json.feed_url}`);
-                return json;
-            }
-            // Load items
-            const feed = await this.load(json.next_url, { ...opts, depth: depth + 1 });
-            if (isEmptyArray(feed?.items)) {
-                return json;
-            }
-            // Merge with the input json
-            return {
-                ...json,
-                title: json.title ?? feed.title,
-                home_page_url: json.home_page_url ?? feed.home_page_url,
-                authors: isNotEmptyArray(json.authors) ? json.authors : feed.authors,
-                items: feed.items,
-                tag_template: json.tag_template ?? feed.tag_template,
-            };
-        }
-        return json;
+};
+Message = __decorate([
+    EntityClass({ typename: 'MessageVO' })
+], Message);
+// @dynamic
+let MessageFilter = class MessageFilter extends EntityFilter {
+    static fromObject;
+    fromObject(source, opts) {
+        super.fromObject(source, opts);
     }
-    onAfterLoadAll() {
-        console.debug(`${this._logPrefix}Feeds loaded`);
+    buildFilter() {
+        return super.buildFilter();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeedService, deps: [{ token: LocalSettingsService }, { token: ENVIRONMENT, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeedService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeedService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: LocalSettingsService }, { type: Environment, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [ENVIRONMENT]
-                }] }] });
+};
+MessageFilter = __decorate([
+    EntityClass({ typename: 'MessageFilterVO' })
+], MessageFilter);
 
-class FeedDirective {
-    element;
-    _subscription = new Subscription();
-    platform = inject(PlatformService);
-    locationStrategy = inject(LocationStrategy);
-    navController = inject(NavController);
-    router = inject(Router);
-    route = inject(ActivatedRoute);
-    _feedUrl;
-    _baseUrl;
-    set feedUrl(value) {
-        this._feedUrl = value;
-        this._baseUrl = value && JsonFeedUtils.removeJsonExtension(value);
+const PersonFragments = {
+    person: gql$1 `
+    fragment PersonFragment on PersonVO {
+      id
+      firstName
+      lastName
+      email
+      pubkey
+      avatar
+      statusId
+      updateDate
+      creationDate
+      profiles
+      username
+      usernameExtranet
+      department {
+        id
+        label
+        name
+        logo
+        __typename
+      }
+      __typename
     }
-    get feedUrl() {
-        return this._feedUrl;
+  `,
+    personFilter: gql$1 `
+    fragment PersonFilterFragment on PersonFilterVO {
+      email
+      pubkey
+      searchText
+      statusIds
+      userProfiles
+      includedIds
+      excludedIds
+      searchAttribute
+      searchAttributes
     }
-    constructor(element) {
-        this.element = element;
-        // DEBUG
-        //console.debug('[feed-directive] Creating feed directive');
+  `,
+};
+// Load persons query
+const PersonQueries = {
+    loadAll: gql$1 `
+    query Persons($offset: Int, $size: Int, $sortBy: String, $sortDirection: String, $filter: PersonFilterVOInput) {
+      data: persons(filter: $filter, offset: $offset, size: $size, sortBy: $sortBy, sortDirection: $sortDirection) {
+        ...PersonFragment
+      }
     }
-    ngAfterViewInit() {
-        console.debug('[feed-directive] Processing anchors');
-        // Listening click events
-        this._subscription.add(this.listenClickEvents(this.element.nativeElement));
+    ${PersonFragments.person}
+  `,
+    loadAllWithTotal: gql$1 `
+    query PersonsWithTotal($offset: Int, $size: Int, $sortBy: String, $sortDirection: String, $filter: PersonFilterVOInput) {
+      data: persons(filter: $filter, offset: $offset, size: $size, sortBy: $sortBy, sortDirection: $sortDirection) {
+        ...PersonFragment
+      }
+      total: personsCount(filter: $filter)
     }
-    ngOnDestroy() {
-        this._subscription.unsubscribe();
+    ${PersonFragments.person}
+  `,
+};
+const PersonMutations = {
+    saveAll: gql$1 `
+    mutation savePersons($data: [PersonVOInput]) {
+      data: savePersons(persons: $data) {
+        ...PersonFragment
+      }
     }
-    listenClickEvents(nativeElement) {
-        console.debug('[feed-directive] Start listening click events...');
-        const subscription = new Subscription();
-        const listener = (event) => this.click(event, nativeElement);
-        const links = nativeElement.querySelectorAll('a');
-        links.forEach((link) => {
-            // DEBUG
-            //console.debug('[feed-directive] Adding click listener to', link);
-            link.addEventListener('click', listener);
-            subscription.add(() => link.removeEventListener('click', listener));
+    ${PersonFragments.person}
+  `,
+    deleteAll: gql$1 `
+    mutation deletePersons($ids: [Int]) {
+      deletePersons(ids: $ids)
+    }
+  `,
+};
+class PersonService extends BaseEntityService {
+    graphql;
+    platform;
+    network;
+    entities;
+    constructor(graphql, platform, network, entities) {
+        super(graphql, platform, Person, PersonFilter, {
+            queries: PersonQueries,
+            mutations: PersonMutations,
+            defaultSortBy: 'lastName',
+            defaultSortDirection: 'asc',
         });
-        // DEBUG
-        subscription.add(() => console.debug('[feed-directive] Stop listening click events'));
-        return subscription;
+        this.graphql = graphql;
+        this.platform = platform;
+        this.network = network;
+        this.entities = entities;
+        // for DEV only -----
+        this._debug = !environment.production;
     }
-    async click(event, containerElement) {
-        console.debug('[feed-directive] Processing click event...', event);
-        if (!(event.target instanceof HTMLAnchorElement) && !(event.target?.['tagName'] === 'A')) {
-            console.warn('[feed-directive] Invalid click event target. Should an anchor <a>', event.target);
-            return;
-        }
-        const element = event.target;
-        let href = element.getAttribute('href');
-        const fragment = UrlUtils.getFragment(href);
-        // Fragment
-        if (href?.startsWith('#') && isNotNilOrBlank(fragment)) {
-            event.preventDefault();
-            this.scrollToAnchor(containerElement, fragment);
-            return true;
-        }
-        const routerLink = element.getAttribute('routerLink');
-        if (isNotNilOrBlank(routerLink)) {
-            event.preventDefault();
-            return this.navController.navigateForward(routerLink);
-        }
-        // Resolve relative URL, if baseUrl has been set
-        if (this._baseUrl && UrlUtils.isRelativeUrl(href)) {
-            // Resolve URL, then open using the platform
-            href = UrlUtils.resolveRelativeUrl(this._baseUrl, href);
-        }
-        // Resolve internal URL as an app route
-        if (UrlUtils.isInternalUrl(href)) {
-            const routePath = this.normalizeUrl(href.startsWith('/') ? href : `/${href}`);
-            const urlTree = this.getUrlTree(routePath);
-            event.preventDefault();
-            this.router.navigated = false;
-            // Opening route
-            return this.navController.navigateForward(urlTree);
+    async loadAll(offset, size, sortBy, sortDirection, filter, opts) {
+        const offline = this.network.offline && (!opts || opts.fetchPolicy !== 'network-only');
+        if (offline) {
+            return this.loadAllLocally(offset, size, sortBy, sortDirection, filter, opts);
         }
-        // External URL: open using the platform
-        event.preventDefault();
-        await this.platform.open(href);
-        return true;
+        return super.loadAll(offset, size, sortBy, sortDirection, filter, opts);
     }
-    scrollToAnchor(containerElement, anchorId) {
-        if (!containerElement || !anchorId) {
-            console.warn("Missing 'containerElement' or 'fragment' argument.");
-            return;
-        }
-        console.debug('[feed-directive-anchor] Scrolling to anchor #' + anchorId);
-        // Find the target element with the specified fragment ID
-        const targetElement = containerElement.querySelector(`#${anchorId}`);
-        if (targetElement) {
-            // Scroll smoothly to the target element
-            // eslint-disable-next-line @rx-angular/prefer-no-layout-sensitive-apis
-            targetElement.scrollIntoView({
-                behavior: 'smooth', // Smooth scrolling behavior
-                block: 'start', // Align the target element to the top of the container
-            });
-        }
-        else {
-            console.warn(`No element found with the ID "${anchorId}" inside the container.`);
+    async loadAllLocally(offset, size, sortBy, sortDirection, filter, opts) {
+        filter = this.asFilter(filter);
+        const variables = {
+            offset: offset || 0,
+            size: size || 100,
+            sortBy: sortBy || this.defaultSortBy,
+            sortDirection: sortDirection || this.defaultSortDirection,
+            filter: filter && filter.asFilterFn(),
+        };
+        const { data, total } = await this.entities.loadAll('PersonVO', variables);
+        const entities = this.fromObjects(data, opts);
+        const res = { data: entities, total };
+        // Add fetch more function
+        const nextOffset = (offset || 0) + entities.length;
+        if (nextOffset < total) {
+            res.fetchMore = () => this.loadAllLocally(nextOffset, size, sortBy, sortDirection, filter, opts);
         }
+        return res;
     }
-    /**
-     * Transform a relative URL to its absolute representation according to current router state.
-     * @param url Relative URL path.
-     * @return Absolute URL based on the current route.
-     */
-    normalizeUrl(url) {
-        if (UrlUtils.isExternalUrl(url)) {
-            return url;
-        }
-        if (this._baseUrl && UrlUtils.isRelativeUrl(url)) {
-            return UrlUtils.resolveRelativeUrl(this._baseUrl, url);
-        }
-        const urlTree = this.getUrlTree(url);
-        const serializedUrl = this.router.serializeUrl(urlTree);
-        return this.locationStrategy.prepareExternalUrl(serializedUrl);
+    async suggest(value, filter, sortBy, sortDirection, opts) {
+        if (EntityUtils.isNotEmpty(value, 'id'))
+            return { data: [value] };
+        value = (typeof value === 'string' && value !== '*' && value) || undefined;
+        sortBy = sortBy || filter.searchAttribute || (filter.searchAttributes && filter.searchAttributes[0]);
+        return this.loadAll(0, !value ? 30 : 10, sortBy, sortDirection, {
+            ...filter,
+            searchText: value,
+            statusIds: (filter && filter.statusIds) || [StatusIds.ENABLE, StatusIds.TEMPORARY],
+            userProfiles: filter && filter.userProfiles,
+        }, {
+            withTotal: true /* need by autocomplete */,
+            ...opts,
+        });
     }
-    getUrlTree(url) {
-        url = UrlUtils.normalizeUrl(url);
-        const urlPath = UrlUtils.stripFragmentAndQuery(url) || UrlUtils.stripFragmentAndQuery(this.router.url);
-        const parsedUrl = this.router.parseUrl(url);
-        const fragment = parsedUrl.fragment;
-        const queryParams = parsedUrl.queryParams;
-        return this.router.createUrlTree([urlPath], { relativeTo: this.route, fragment, queryParams });
+    async executeImport(filter, opts) {
+        const maxProgression = (opts && opts.maxProgression) || 100;
+        filter = {
+            ...filter,
+            statusIds: [StatusIds.ENABLE, StatusIds.TEMPORARY],
+            userProfiles: ['SUPERVISOR', 'USER', 'GUEST'],
+        };
+        console.info('[person-service] Importing persons...');
+        const res = await JobUtils.fetchAllPages((offset, size) => this.loadAll(offset, size, 'id', null, filter, {
+            debug: false,
+            fetchPolicy: 'network-only',
+            withTotal: offset === 0, // Compute total only once
+            toEntity: false,
+        }), { progression: opts?.progression, maxProgression: maxProgression * 0.9 });
+        // Save result locally
+        await this.entities.saveAll(res.data, { entityName: 'PersonVO', reset: true });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeedDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: FeedDirective, selector: "feed,[feed]", inputs: { feedUrl: ["feed", "feedUrl"] }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeedDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'feed,[feed]',
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { feedUrl: [{
-                type: Input,
-                args: [{ alias: 'feed', required: true }]
-            }] } });
-
-const NOOP_ITEM_FILTER = (item) => true;
+    async loadById(id, opts) {
+        const { data } = await this.loadAll(0, 1, null, null, { includedIds: [id] }, { withTotal: false, ...opts });
+        const source = isNotEmptyArray(data) ? data[0] : { id };
+        return this.fromObject(source, opts);
+    }
+    async loadByPubkey(pubkey, opts) {
+        const { data } = await this.loadAll(0, 1, null, null, { pubkey }, { withTotal: false, ...opts });
+        const source = isNotEmptyArray(data) ? data[0] : { pubkey };
+        return this.fromObject(source, opts);
+    }
+    /* -- protected methods -- */
+    asObject(source) {
+        if (!source)
+            return undefined;
+        if (!(source instanceof Person)) {
+            source = Person.fromObject(source);
+        }
+        const target = source.asObject();
+        // Not known in server GraphQL schema
+        delete target.mainProfile;
+        target.department = source.department?.asObject();
+        return target;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PersonService, deps: [{ token: GraphqlService }, { token: PlatformService }, { token: NetworkService }, { token: EntitiesStorage }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PersonService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PersonService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: GraphqlService }, { type: PlatformService }, { type: NetworkService }, { type: EntitiesStorage }] });
+
+class MessageForm extends AppForm {
+    formBuilder;
+    cd;
+    mobile;
+    suggestFn;
+    subjectMinLength = 5;
+    subjectMaxLength = 255;
+    bodyMaxLength = 2000;
+    bodyAutoHeight = true;
+    canSelectType = false;
+    canRecipientFilter = false;
+    recipientFilterCount = 0;
+    types = MessageTypeList;
+    constructor(injector, formBuilder, cd) {
+        super(injector);
+        this.formBuilder = formBuilder;
+        this.cd = cd;
+        this.mobile = this.settings.mobile;
+    }
+    ngOnInit() {
+        this.setForm(this.formBuilder.group({
+            type: [MessageTypes.INBOX_MESSAGE, Validators.required],
+            recipients: [null, Validators.required],
+            recipientFilter: [null],
+            subject: [
+                null,
+                this.subjectMaxLength
+                    ? Validators.compose([Validators.required, Validators.minLength(this.subjectMinLength), Validators.maxLength(this.subjectMaxLength)])
+                    : Validators.required,
+            ],
+            body: [null, this.bodyMaxLength ? Validators.compose([Validators.maxLength(this.bodyMaxLength)]) : Validators.required],
+        }));
+        this.registerSubscription(this._form
+            .get('type')
+            .valueChanges.pipe(filter(isNotNil))
+            .subscribe((type) => this.updateFormGroup(this._form, { type })));
+        // Person combo
+        const personAttributes = this.settings.getFieldDisplayAttributes('person', ['lastName', 'firstName', 'department.name']);
+        this.registerAutocompleteField('recipients', {
+            showAllOnFocus: false,
+            suggestFn: this.suggestFn,
+            filter: {
+                statusIds: [StatusIds.TEMPORARY, StatusIds.ENABLE],
+            },
+            attributes: personAttributes,
+            columnNames: personAttributes.map((attr) => `USER.${changeCaseToUnderscore(attr).toUpperCase()}`),
+            displayWith: PersonUtils.personToString,
+            multiple: true,
+            mobile: this.mobile,
+        });
+    }
+    isSamePerson(o1, o2) {
+        return EntityUtils.equals(o1, o2, 'id');
+    }
+    updateFormGroup(formGroup, opts) {
+        console.debug('[message-form] Updating form group...', opts);
+        // Recipient validator
+        const recipientsRequired = toBoolean(opts?.recipientRequired, opts?.type !== MessageTypes.FEED);
+        {
+            const control = formGroup.get('recipients');
+            if (recipientsRequired) {
+                if (!control.hasValidator(Validators.required)) {
+                    control.addValidators(Validators.required);
+                }
+                control.enable();
+            }
+            else {
+                if (control.hasValidator(Validators.required)) {
+                    control.removeValidators(Validators.required);
+                }
+                control.disable();
+            }
+        }
+        // Recipient filter validator
+        const recipientFilterRequired = this.canRecipientFilter && !recipientsRequired;
+        {
+            const control = formGroup.get('recipientFilter');
+            if (recipientFilterRequired) {
+                if (!control.hasValidator(Validators.required)) {
+                    control.addValidators(Validators.required);
+                }
+                control.enable();
+            }
+            else {
+                if (control.hasValidator(Validators.required)) {
+                    control.removeValidators(Validators.required);
+                }
+                control.disable();
+            }
+        }
+        formGroup.updateValueAndValidity();
+    }
+    markForCheck() {
+        this.cd.markForCheck();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MessageForm, deps: [{ token: i0.Injector }, { token: i1$3.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MessageForm, selector: "app-message-form", inputs: { mobile: "mobile", suggestFn: "suggestFn", subjectMinLength: "subjectMinLength", subjectMaxLength: "subjectMaxLength", bodyMaxLength: "bodyMaxLength", bodyAutoHeight: "bodyAutoHeight", canSelectType: "canSelectType", canRecipientFilter: "canRecipientFilter", recipientFilterCount: "recipientFilterCount" }, usesInheritance: true, ngImport: i0, template: "<!-- debug -->\n@if (debug) {\n  <ng-container *ngTemplateOutlet=\"debugPanel\"></ng-container>\n}\n\n<form [formGroup]=\"form\" class=\"form-container\">\n  <!-- type -->\n  <mat-form-field *ngIf=\"canSelectType\">\n    <mat-label>{{ 'SOCIAL.MESSAGE.TYPE' | translate }}</mat-label>\n    <mat-select formControlName=\"type\">\n      @for (item of types; track item.id) {\n        @if (canRecipientFilter || item.id !== 'FEED') {\n          <mat-option [value]=\"item.id\">\n            <ion-icon [name]=\"item.icon\"></ion-icon>\n            {{ item.label | translate }}\n          </mat-option>\n        }\n      }\n    </mat-select>\n  </mat-form-field>\n\n  <!-- Recipients -->\n  @if ((form | formGetValue: 'type') !== 'FEED') {\n    <mat-chips-field\n      formControlName=\"recipients\"\n      chipColor=\"accent\"\n      [placeholder]=\"'SOCIAL.MESSAGE.RECIPIENTS' | translate\"\n      [config]=\"autocompleteFields.recipients\"\n      [equals]=\"isSamePerson\"\n    ></mat-chips-field>\n  } @else {\n    <mat-form-field>\n      <input matInput hidden formControlName=\"recipients\" type=\"text\" />\n      <mat-chip-grid>\n        <mat-chip-row>\n          {{ 'SOCIAL.MESSAGE.RECIPIENT_FILTER_COUNT' | translate: { count: recipientFilterCount } }}\n        </mat-chip-row>\n      </mat-chip-grid>\n    </mat-form-field>\n  }\n\n  <!-- Subject -->\n  <mat-form-field>\n    <mat-label>{{ 'SOCIAL.MESSAGE.SUBJECT' | translate }}</mat-label>\n    <input matInput type=\"text\" formControlName=\"subject\" autocomplete=\"off\" required />\n    <mat-error *ngIf=\"form.controls.subject.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n    <mat-error *ngIf=\"form.controls.subject.hasError('minlength')\">\n      {{ 'ERROR.FIELD_MIN_LENGTH_COMPACT' | translate }}\n    </mat-error>\n    <mat-error *ngIf=\"form.controls.subject.hasError('maxlength')\">\n      {{ 'ERROR.FIELD_MAX_LENGTH_COMPACT' | translate }}\n    </mat-error>\n    <mat-hint *ngIf=\"subjectMaxLength\" align=\"end\">\n      {{\n        'INFO.TEXT_PROGRESS' | translate: { current: form.controls.subject.value?.length || 0, max: subjectMaxLength }\n      }}\n    </mat-hint>\n  </mat-form-field>\n\n  <!-- Body -->\n  <mat-form-field>\n    <mat-label>{{ 'SOCIAL.MESSAGE.BODY_HELP' | translate }}</mat-label>\n    <textarea\n      matInput\n      type=\"text\"\n      formControlName=\"body\"\n      [class.fixed-height]=\"!bodyAutoHeight\"\n      [cdkTextareaAutosize]=\"bodyAutoHeight\"\n      (keydown.control.enter)=\"doSubmit($event)\"\n    ></textarea>\n    <mat-error *ngIf=\"form.controls.body.hasError('maxlength')\">\n      {{ 'ERROR.FIELD_MAX_LENGTH' | translate: form.controls.body.errors.maxlength }}\n    </mat-error>\n    <mat-hint *ngIf=\"bodyMaxLength\" align=\"end\">\n      {{ 'INFO.TEXT_PROGRESS' | translate: { current: form.controls.body.value?.length || 0, max: bodyMaxLength } }}\n    </mat-hint>\n  </mat-form-field>\n</form>\n\n\n<ng-template #debugPanel>\n  <app-debug title=\"Message form\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          ready: {{ readySubject | async }}\n          <br />\n          loading: {{ loadingSubject | async }}\n          <br />\n          enabled: {{ enabled }}\n          <br />\n          dirty: {{ dirty }}\n          <br />\n          valid: {{ valid }}\n          <br />\n          <br />\n          error: {{ _form | formError | json}}\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </app-debug>\n</ng-template>\n", styles: ["textarea.fixed-height{height:11.5em}textarea{min-height:11.5em}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i1$4.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { 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: MatChipsField, selector: "mat-chips-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "placeholder", "suggestFn", "required", "mobile", "readonly", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "itemSize", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "chipColor", "debug", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "hideRequiredMarker", "colSizes", "separatorKeysCodes", "appearance", "subscriptSizing", "class", "filter", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keyup.enter"] }, { kind: "directive", type: AutoResizeDirective, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMaxRows", "cdkAutosizeMinRows"] }, { kind: "component", type: i11$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "component", type: i11$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: DebugComponent, selector: "app-debug", inputs: ["titlePrefix", "title", "enable", "expanded"] }, { 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: FormErrorPipe, name: "formError" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MessageForm, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-message-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- debug -->\n@if (debug) {\n  <ng-container *ngTemplateOutlet=\"debugPanel\"></ng-container>\n}\n\n<form [formGroup]=\"form\" class=\"form-container\">\n  <!-- type -->\n  <mat-form-field *ngIf=\"canSelectType\">\n    <mat-label>{{ 'SOCIAL.MESSAGE.TYPE' | translate }}</mat-label>\n    <mat-select formControlName=\"type\">\n      @for (item of types; track item.id) {\n        @if (canRecipientFilter || item.id !== 'FEED') {\n          <mat-option [value]=\"item.id\">\n            <ion-icon [name]=\"item.icon\"></ion-icon>\n            {{ item.label | translate }}\n          </mat-option>\n        }\n      }\n    </mat-select>\n  </mat-form-field>\n\n  <!-- Recipients -->\n  @if ((form | formGetValue: 'type') !== 'FEED') {\n    <mat-chips-field\n      formControlName=\"recipients\"\n      chipColor=\"accent\"\n      [placeholder]=\"'SOCIAL.MESSAGE.RECIPIENTS' | translate\"\n      [config]=\"autocompleteFields.recipients\"\n      [equals]=\"isSamePerson\"\n    ></mat-chips-field>\n  } @else {\n    <mat-form-field>\n      <input matInput hidden formControlName=\"recipients\" type=\"text\" />\n      <mat-chip-grid>\n        <mat-chip-row>\n          {{ 'SOCIAL.MESSAGE.RECIPIENT_FILTER_COUNT' | translate: { count: recipientFilterCount } }}\n        </mat-chip-row>\n      </mat-chip-grid>\n    </mat-form-field>\n  }\n\n  <!-- Subject -->\n  <mat-form-field>\n    <mat-label>{{ 'SOCIAL.MESSAGE.SUBJECT' | translate }}</mat-label>\n    <input matInput type=\"text\" formControlName=\"subject\" autocomplete=\"off\" required />\n    <mat-error *ngIf=\"form.controls.subject.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n    <mat-error *ngIf=\"form.controls.subject.hasError('minlength')\">\n      {{ 'ERROR.FIELD_MIN_LENGTH_COMPACT' | translate }}\n    </mat-error>\n    <mat-error *ngIf=\"form.controls.subject.hasError('maxlength')\">\n      {{ 'ERROR.FIELD_MAX_LENGTH_COMPACT' | translate }}\n    </mat-error>\n    <mat-hint *ngIf=\"subjectMaxLength\" align=\"end\">\n      {{\n        'INFO.TEXT_PROGRESS' | translate: { current: form.controls.subject.value?.length || 0, max: subjectMaxLength }\n      }}\n    </mat-hint>\n  </mat-form-field>\n\n  <!-- Body -->\n  <mat-form-field>\n    <mat-label>{{ 'SOCIAL.MESSAGE.BODY_HELP' | translate }}</mat-label>\n    <textarea\n      matInput\n      type=\"text\"\n      formControlName=\"body\"\n      [class.fixed-height]=\"!bodyAutoHeight\"\n      [cdkTextareaAutosize]=\"bodyAutoHeight\"\n      (keydown.control.enter)=\"doSubmit($event)\"\n    ></textarea>\n    <mat-error *ngIf=\"form.controls.body.hasError('maxlength')\">\n      {{ 'ERROR.FIELD_MAX_LENGTH' | translate: form.controls.body.errors.maxlength }}\n    </mat-error>\n    <mat-hint *ngIf=\"bodyMaxLength\" align=\"end\">\n      {{ 'INFO.TEXT_PROGRESS' | translate: { current: form.controls.body.value?.length || 0, max: bodyMaxLength } }}\n    </mat-hint>\n  </mat-form-field>\n</form>\n\n\n<ng-template #debugPanel>\n  <app-debug title=\"Message form\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          ready: {{ readySubject | async }}\n          <br />\n          loading: {{ loadingSubject | async }}\n          <br />\n          enabled: {{ enabled }}\n          <br />\n          dirty: {{ dirty }}\n          <br />\n          valid: {{ valid }}\n          <br />\n          <br />\n          error: {{ _form | formError | json}}\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </app-debug>\n</ng-template>\n", styles: ["textarea.fixed-height{height:11.5em}textarea{min-height:11.5em}\n"] }]
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$3.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }], propDecorators: { mobile: [{
+                type: Input
+            }], suggestFn: [{
+                type: Input
+            }], subjectMinLength: [{
+                type: Input
+            }], subjectMaxLength: [{
+                type: Input
+            }], bodyMaxLength: [{
+                type: Input
+            }], bodyAutoHeight: [{
+                type: Input
+            }], canSelectType: [{
+                type: Input
+            }], canRecipientFilter: [{
+                type: Input
+            }], recipientFilterCount: [{
+                type: Input
+            }] } });
+
+class MessageModal {
+    settings;
+    viewCtrl;
+    accountService;
+    cd;
+    mobile;
+    debug = false;
+    title = 'SOCIAL.MESSAGE.NEW';
+    suggestFn;
+    data;
+    canSelectType;
+    canRecipientFilter;
+    recipientFilterCount;
+    form;
+    constructor(settings, viewCtrl, accountService, cd) {
+        this.settings = settings;
+        this.viewCtrl = viewCtrl;
+        this.accountService = accountService;
+        this.cd = cd;
+        this.mobile = this.settings.mobile;
+    }
+    ngOnInit() {
+        this.canSelectType = toBoolean(this.canSelectType, this.accountService.isAdmin());
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this.form.markAsReady({ emitEvent: false });
+            if (this.data) {
+                this.data.type = this.data.type || MessageTypes.INBOX_MESSAGE;
+                this.form.setValue(this.data);
+            }
+            this.form.markAsLoaded();
+            this.form.enable();
+        });
+    }
+    cancel() {
+        this.viewCtrl.dismiss();
+    }
+    async doSubmit() {
+        if (this.form.disabled)
+            return;
+        if (!this.form.valid) {
+            await AppFormUtils.waitWhilePending(this.form);
+            if (this.form.invalid) {
+                AppFormUtils.logFormErrors(this.form.form, '[message-modal] ');
+                this.form.markAllAsTouched();
+                return;
+            }
+        }
+        this.markAsLoading();
+        try {
+            const data = this.form.value;
+            // Disable the form
+            this.form.disable();
+            const entity = Message.fromObject(data);
+            return this.viewCtrl.dismiss(entity);
+        }
+        catch (err) {
+            this.form.error = (err && err.message) || err;
+            this.markAsLoaded();
+            // Enable the form
+            this.form.enable();
+            // Reset form error on next changes
+            firstNotNilPromise(this.form.form.valueChanges).then(() => {
+                this.form.error = null;
+                this.markForCheck();
+            });
+            return;
+        }
+    }
+    markForCheck() {
+        this.cd.markForCheck();
+    }
+    markAsLoading(opts) {
+        this.form.markAsLoading(opts);
+    }
+    markAsLoaded(opts) {
+        this.form.markAsLoaded(opts);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MessageModal, deps: [{ token: LocalSettingsService }, { token: i2$1.ModalController }, { token: AccountService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MessageModal, selector: "app-message-modal", inputs: { debug: "debug", title: "title", suggestFn: "suggestFn", data: "data", canSelectType: "canSelectType", canRecipientFilter: "canRecipientFilter", recipientFilterCount: "recipientFilterCount" }, viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true, static: true }], ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"secondary\">\n    <ion-buttons slot=\"start\">\n      <ion-button class=\"back-button\" (click)=\"cancel()\" visible-xs visible-sm visible-mobile>\n        <ion-icon slot=\"icon-only\" name=\"arrow-back\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n\n    <ion-title>\n      {{ title | translate }}\n    </ion-title>\n\n    <ion-buttons slot=\"end\">\n      <ion-button\n        class=\"back-button\"\n        (click)=\"doSubmit()\"\n        [disabled]=\"!form.valid\"\n        visible-xs\n        visible-sm\n        visible-mobile\n      >\n        <ion-icon slot=\"icon-only\" name=\"checkmark\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n  <ion-item *ngIf=\"form.error\" visible-xs visible-sm visible-mobile lines=\"none\">\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"form.error | translate\"></ion-label>\n  </ion-item>\n\n  <app-message-form\n    #form\n    (onSubmit)=\"doSubmit()\"\n    (onCancel)=\"cancel()\"\n    [canSelectType]=\"canSelectType\"\n    [canRecipientFilter]=\"canRecipientFilter\"\n    [recipientFilterCount]=\"recipientFilterCount\"\n    [suggestFn]=\"suggestFn\"\n    [debug]=\"debug\">\n  ></app-message-form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <ion-toolbar>\n    <ion-row class=\"ion-no-padding\" nowrap>\n      <ion-col></ion-col>\n\n      <!-- buttons -->\n      <ion-col size=\"auto\">\n        <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n\n        <ion-button\n          [fill]=\"form.invalid ? 'clear' : 'solid'\"\n          [disabled]=\"form.loading || form.invalid\"\n          (keyup.enter)=\"doSubmit()\"\n          (click)=\"doSubmit()\"\n          color=\"tertiary\"\n        >\n          <ion-label translate>COMMON.BTN_SEND</ion-label>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n</ion-footer>\n", dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { 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: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: MessageForm, selector: "app-message-form", inputs: ["mobile", "suggestFn", "subjectMinLength", "subjectMaxLength", "bodyMaxLength", "bodyAutoHeight", "canSelectType", "canRecipientFilter", "recipientFilterCount"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MessageModal, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-message-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-header>\n  <ion-toolbar color=\"secondary\">\n    <ion-buttons slot=\"start\">\n      <ion-button class=\"back-button\" (click)=\"cancel()\" visible-xs visible-sm visible-mobile>\n        <ion-icon slot=\"icon-only\" name=\"arrow-back\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n\n    <ion-title>\n      {{ title | translate }}\n    </ion-title>\n\n    <ion-buttons slot=\"end\">\n      <ion-button\n        class=\"back-button\"\n        (click)=\"doSubmit()\"\n        [disabled]=\"!form.valid\"\n        visible-xs\n        visible-sm\n        visible-mobile\n      >\n        <ion-icon slot=\"icon-only\" name=\"checkmark\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n  <ion-item *ngIf=\"form.error\" visible-xs visible-sm visible-mobile lines=\"none\">\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"form.error | translate\"></ion-label>\n  </ion-item>\n\n  <app-message-form\n    #form\n    (onSubmit)=\"doSubmit()\"\n    (onCancel)=\"cancel()\"\n    [canSelectType]=\"canSelectType\"\n    [canRecipientFilter]=\"canRecipientFilter\"\n    [recipientFilterCount]=\"recipientFilterCount\"\n    [suggestFn]=\"suggestFn\"\n    [debug]=\"debug\">\n  ></app-message-form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <ion-toolbar>\n    <ion-row class=\"ion-no-padding\" nowrap>\n      <ion-col></ion-col>\n\n      <!-- buttons -->\n      <ion-col size=\"auto\">\n        <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n\n        <ion-button\n          [fill]=\"form.invalid ? 'clear' : 'solid'\"\n          [disabled]=\"form.loading || form.invalid\"\n          (keyup.enter)=\"doSubmit()\"\n          (click)=\"doSubmit()\"\n          color=\"tertiary\"\n        >\n          <ion-label translate>COMMON.BTN_SEND</ion-label>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n</ion-footer>\n" }]
+        }], ctorParameters: () => [{ type: LocalSettingsService }, { type: i2$1.ModalController }, { type: AccountService }, { type: i0.ChangeDetectorRef }], propDecorators: { debug: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], suggestFn: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], canSelectType: [{
+                type: Input
+            }], canRecipientFilter: [{
+                type: Input
+            }], recipientFilterCount: [{
+                type: Input
+            }], form: [{
+                type: ViewChild,
+                args: ['form', { static: true }]
+            }] } });
+
+const MessageFragments = {
+    message: gql$1 `
+    fragment MessageFragment on MessageVO {
+      id
+      subject
+      body
+      type
+      recipientFilter {
+        ...PersonFilterFragment
+      }
+      issuer {
+        ...PersonFragment
+      }
+    }
+  `,
+};
+const Queries = {
+    load: gql$1 `
+    mutation LoadMessage($id: Int!) {
+      data: message(id: $id) {
+        ...MessageFragment
+      }
+    }
+    ${MessageFragments.message}
+    ${PersonFragments.person}
+    ${PersonFragments.personFilter}
+  `,
+};
+const Mutations = {
+    send: gql$1 `
+    mutation SendMessage($data: MessageVOInput) {
+      done: sendMessage(message: $data)
+    }
+  `,
+    delete: gql$1 `
+    mutation DeleteMessage($id: Int!) {
+      done: deleteMessage(id: $id)
+    }
+  `,
+};
+class MessageService extends BaseGraphqlService {
+    graphql;
+    translate;
+    modalCtrl;
+    toastController;
+    environment;
+    constructor(graphql, translate, modalCtrl, toastController, environment) {
+        super(graphql, environment);
+        this.graphql = graphql;
+        this.translate = translate;
+        this.modalCtrl = modalCtrl;
+        this.toastController = toastController;
+        this.environment = environment;
+        // For DEV only
+        this._debug = !environment.production;
+    }
+    /**
+     * Send a message to recipient(s)
+     *
+     * @param entity
+     * @param opts
+     */
+    async send(entity, opts) {
+        // Transform into json
+        const data = entity.asObject(MINIFY_ENTITY_FOR_POD);
+        const now = Date.now();
+        if (this._debug)
+            console.debug(`[message-service] Sending message...`);
+        try {
+            const { done } = await this.graphql.mutate({
+                mutation: Mutations.send,
+                variables: { data },
+                error: { code: SocialErrorCodes.SEND_MESSAGE_ERROR, message: 'SOCIAL.ERROR.SEND_MESSAGE_ERROR' },
+            });
+            if (this._debug)
+                console.debug(`[message-service] Send message [OK] in ${Date.now() - now}ms`);
+            if (done && (!opts || opts.showToast !== false)) {
+                await this.showToast({ type: 'info', message: 'SOCIAL.INFO.MESSAGE_SENT' });
+            }
+            return done;
+        }
+        catch (err) {
+            const error = (err && err.message) || err;
+            console.error(error);
+            // Show error
+            if (!opts || opts.showToast !== false) {
+                const message = error || 'SOCIAL.ERROR.SEND_MESSAGE_ERROR';
+                await this.showToast({ type: 'error', message });
+            }
+            return false;
+        }
+    }
+    /**
+     * Delete a message by ID
+     *
+     * @param id
+     * @param opts
+     */
+    async delete(id, opts) {
+        const now = Date.now();
+        if (this._debug)
+            console.debug(`[message-service] Deleting message #${id}...`);
+        try {
+            const { done } = await this.graphql.mutate({
+                mutation: Mutations.delete,
+                variables: { id },
+                error: { code: SocialErrorCodes.DELETE_MESSAGE_ERROR, message: 'SOCIAL.ERROR.DELETE_MESSAGE_ERROR' },
+            });
+            if (this._debug)
+                console.debug(`[message-service] Delete message [OK] in ${Date.now() - now}ms`);
+            if (done && (!opts || opts.showToast !== false)) {
+                await this.showToast({ type: 'info', message: 'SOCIAL.INFO.MESSAGE_DELETED' });
+            }
+            return done;
+        }
+        catch (err) {
+            const error = (err && err.message) || err;
+            console.error(error);
+            // Show error
+            if (!opts || opts.showToast !== false) {
+                const message = error || 'SOCIAL.ERROR.DELETE_MESSAGE_ERROR';
+                await this.showToast({ type: 'error', message });
+            }
+            return false;
+        }
+    }
+    async openComposeModal(options) {
+        const hasTopModal = !!(await this.modalCtrl.getTop());
+        const modal = await this.modalCtrl.create({
+            component: MessageModal,
+            componentProps: options,
+            cssClass: hasTopModal && 'stack-modal',
+        });
+        // Open the modal
+        await modal.present();
+        // On dismiss
+        const { data } = await modal.onDidDismiss();
+        if (!data || !(data instanceof Message))
+            return true; // CANCELLED
+        // Send message
+        return await this.send(data, { showToast: options?.showToast });
+    }
+    async load(id, opts) {
+        const { data } = await this.graphql.query({
+            query: Queries.load,
+            variables: {
+                id,
+            },
+            fetchPolicy: 'no-cache',
+        });
+        const entity = opts?.toEntity !== false ? Message.fromObject(data) : data;
+        console.debug(`[message-service] Loaded message #${id}:`, entity);
+        return entity;
+    }
+    /* -- protected methods -- */
+    async showToast(opts) {
+        return Toasts.show(this.toastController, this.translate, {
+            type: 'info',
+            message: 'SOCIAL.INFO.MESSAGE_SENT',
+            ...opts,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MessageService, deps: [{ token: GraphqlService }, { token: i1$1.TranslateService }, { token: i2$1.ModalController }, { token: i2$1.ToastController }, { token: ENVIRONMENT, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MessageService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MessageService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: GraphqlService }, { type: i1$1.TranslateService }, { type: i2$1.ModalController }, { type: i2$1.ToastController }, { type: Environment, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [ENVIRONMENT]
+                }] }] });
+
+const APP_FEED_SERVICE = new InjectionToken('FeeService');
+class FeedService extends StartableService {
+    settings;
+    environment;
+    _logPrefix = '[feed-service] ';
+    _state = new RxState();
+    network = inject(NetworkService);
+    modalCtrl = inject(ModalController);
+    messageService = inject(MessageService);
+    personService = inject(PersonService);
+    locale$ = this._state.select('locale');
+    feedUrls$ = this._state.select('feedUrls');
+    get feedUrls() {
+        return this._state.get('feedUrls');
+    }
+    set feedUrls(urls) {
+        this._state.set('feedUrls', () => urls);
+    }
+    constructor(settings, environment) {
+        super(settings);
+        this.settings = settings;
+        this.environment = environment;
+        this._state.connect('locale', this.settings.locale$);
+        this._state.connect('feedUrls', this.locale$.pipe(filter(isNotNilOrBlank), map((locale) => (locale && environment.feed?.jsonFeed?.[locale]) ?? [])));
+        // DEBUG
+        this._debug = !environment.production;
+        if (this._debug)
+            console.debug(`${this._logPrefix}created`);
+    }
+    async ngOnStart() {
+        await Promise.all([this.settings.ready(), this.network.ready()]);
+        return {
+            locale: this.settings.locale,
+        };
+    }
+    watchAll(opts) {
+        if (!this.started) {
+            return from(this.start()).pipe(switchMap$1(() => this.watchAll(opts)));
+        }
+        if (isNotEmptyArray(opts?.urls)) {
+            const locale$ = opts.locale ? of(opts.locale) : this.locale$;
+            return locale$.pipe(mergeMap((locale) => this.loadAll({ locale, ...opts })));
+        }
+        return this.feedUrls$.pipe(filter(isNotEmptyArray), mergeMap((urls) => this.loadAll({ ...opts, urls })));
+    }
+    getHomeUrl(feed) {
+        const feedUrl = feed?.feed_url ?? firstArrayValue(this.feedUrls);
+        return feedUrl ? UrlUtils.getRootUrl(feedUrl) : undefined;
+    }
+    getTagUrl(feed, tag) {
+        if (!feed || !tag)
+            throw new Error("Missing 'feed' or 'tag' argument");
+        const baseUrl = this.getHomeUrl(feed);
+        return feed.tag_template?.replace('{tag}', tag) ?? baseUrl + '/tag/' + tag;
+    }
+    async load(url, opts) {
+        if (!url)
+            throw new Error('Missing url argument');
+        const { data } = await this.loadAll({ ...opts, urls: [url] });
+        return firstArrayValue(data);
+    }
+    async loadAll(opts) {
+        await this.ready();
+        const urls = opts?.urls ?? this.feedUrls;
+        opts = {
+            maxAgeInMonths: opts?.maxAgeInMonths ?? this.environment.feed?.maxAgeInMonths,
+            maxContentLength: opts?.maxContentLength ?? this.environment.feed?.maxContentLength,
+            locale: this.settings.locale,
+            depth: 0,
+            ...opts,
+        };
+        const feeds = await Promise.all((urls || []).map(async (url) => {
+            try {
+                // Get JSON
+                const json = await this.network.get(url, { nocache: opts?.cache });
+                console.debug(`${this._logPrefix}Loaded JSON from ${url}`, json);
+                // Resolve feed
+                return await this.resolveFeed(json, url, opts);
+            }
+            catch (err) {
+                if (err?.status === 404) {
+                    console.error(`${this._logPrefix} Error while fetching feeds at ${url}. 404 (Not found)`);
+                }
+                else {
+                    console.error(`${this._logPrefix} Error while fetching feeds at ${url}`, err);
+                }
+                return Promise.resolve([]);
+            }
+        }));
+        const data = feeds.filter(isNotEmptyArray).flat();
+        // Close opened resources
+        if (opts.depth === 0) {
+            this.onAfterLoadAll();
+        }
+        return { data, total: data.length };
+    }
+    async openEditModal(event, feedItem, opts) {
+        const messageId = +feedItem.id;
+        if (isNilOrNaN(messageId))
+            throw new Error(`Cannot load message - invalid id: ${feedItem.id}`);
+        // Fetch the original message
+        const message = await this.messageService.load(messageId);
+        // Count recipients
+        let recipientFilterCount;
+        if (message?.recipientFilter) {
+            recipientFilterCount = await this.personService.countAll(message?.recipientFilter);
+        }
+        const hasTopModal = !!(await this.modalCtrl.getTop());
+        const modal = await this.modalCtrl.create({
+            component: MessageModal,
+            componentProps: {
+                title: 'SOCIAL.FEED.EDIT_TITLE',
+                suggestFn: (value, filter, sortBy, sortDirection, opts) => this.personService.suggest(value, filter, sortBy, sortDirection, opts),
+                canSelectType: false,
+                canRecipientFilter: false,
+                recipientFilterCount,
+                data: message,
+                debug: true,
+            },
+            cssClass: hasTopModal && 'stack-modal',
+        });
+        // Open the modal
+        await modal.present();
+        // On dismiss
+        const { data } = await modal.onDidDismiss();
+        if (!data || !(data instanceof Message))
+            return true; // CANCELLED
+        return await this.messageService.send(data, opts);
+    }
+    async deleteItem(feedItem) {
+        const messageId = +feedItem.id;
+        if (isNilOrNaN(messageId))
+            throw new Error(`Cannot delete message - invalid id: ${feedItem.id}`);
+        return await this.messageService.delete(messageId);
+    }
+    /* -- protected functions -- */
+    async resolveFeed(json, url, opts) {
+        // Check json is JsonFeed compatible
+        if (JsonFeedUtils.isJsonFeed(json)) {
+            // Migrate from old versions
+            let feed = JsonFeedUtils.migrateFeed(json);
+            // Resolve items (e.g. using feed.next_url)
+            feed = await this.resolveFeedItems(feed, { ...opts, depth: opts?.depth ?? 0 });
+            // Truncate html
+            JsonFeedUtils.truncateFeedItemsHtml(feed, opts);
+            return isNotEmptyArray(feed?.items) ? [feed] : [];
+        }
+        // not resolved (unknown format)
+        return [];
+    }
+    async resolveFeedItems(json, opts) {
+        if (!json)
+            return json;
+        // Load items
+        if (isEmptyArray(json.items) && isNotNilOrBlank(json.next_url)) {
+            const depth = opts?.depth ?? 0;
+            if (depth >= 3) {
+                console.warn(`${this._logPrefix}Max depth reached (${depth}) for ${json.feed_url}`);
+                return json;
+            }
+            // Load items
+            const feed = await this.load(json.next_url, { ...opts, depth: depth + 1 });
+            if (isEmptyArray(feed?.items)) {
+                return json;
+            }
+            // Merge with the input json
+            return {
+                ...json,
+                title: json.title ?? feed.title,
+                home_page_url: json.home_page_url ?? feed.home_page_url,
+                authors: isNotEmptyArray(json.authors) ? json.authors : feed.authors,
+                items: feed.items,
+                tag_template: json.tag_template ?? feed.tag_template,
+            };
+        }
+        return json;
+    }
+    onAfterLoadAll() {
+        console.debug(`${this._logPrefix}Feeds loaded`);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeedService, deps: [{ token: LocalSettingsService }, { token: ENVIRONMENT, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeedService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeedService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: LocalSettingsService }, { type: Environment, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [ENVIRONMENT]
+                }] }] });
+
+class FeedDirective {
+    element;
+    _subscription = new Subscription();
+    platform = inject(PlatformService);
+    locationStrategy = inject(LocationStrategy);
+    navController = inject(NavController);
+    router = inject(Router);
+    route = inject(ActivatedRoute);
+    _feedUrl;
+    _baseUrl;
+    set feedUrl(value) {
+        this._feedUrl = value;
+        this._baseUrl = value && JsonFeedUtils.removeJsonExtension(value);
+    }
+    get feedUrl() {
+        return this._feedUrl;
+    }
+    constructor(element) {
+        this.element = element;
+        // DEBUG
+        //console.debug('[feed-directive] Creating feed directive');
+    }
+    ngAfterViewInit() {
+        console.debug('[feed-directive] Processing anchors');
+        // Listening click events
+        this._subscription.add(this.listenClickEvents(this.element.nativeElement));
+    }
+    ngOnDestroy() {
+        this._subscription.unsubscribe();
+    }
+    listenClickEvents(nativeElement) {
+        console.debug('[feed-directive] Start listening click events...');
+        const subscription = new Subscription();
+        const listener = (event) => this.click(event, nativeElement);
+        const links = nativeElement.querySelectorAll('a');
+        links.forEach((link) => {
+            // DEBUG
+            //console.debug('[feed-directive] Adding click listener to', link);
+            link.addEventListener('click', listener);
+            subscription.add(() => link.removeEventListener('click', listener));
+        });
+        // DEBUG
+        subscription.add(() => console.debug('[feed-directive] Stop listening click events'));
+        return subscription;
+    }
+    async click(event, containerElement) {
+        console.debug('[feed-directive] Processing click event...', event);
+        if (!(event.target instanceof HTMLAnchorElement) && !(event.target?.['tagName'] === 'A')) {
+            console.warn('[feed-directive] Invalid click event target. Should an anchor <a>', event.target);
+            return;
+        }
+        const element = event.target;
+        let href = element.getAttribute('href');
+        const fragment = UrlUtils.getFragment(href);
+        // Fragment
+        if (href?.startsWith('#') && isNotNilOrBlank(fragment)) {
+            event.preventDefault();
+            this.scrollToAnchor(containerElement, fragment);
+            return true;
+        }
+        const routerLink = element.getAttribute('routerLink');
+        if (isNotNilOrBlank(routerLink)) {
+            event.preventDefault();
+            return this.navController.navigateForward(routerLink);
+        }
+        // Resolve relative URL, if baseUrl has been set
+        if (this._baseUrl && UrlUtils.isRelativeUrl(href)) {
+            // Resolve URL, then open using the platform
+            href = UrlUtils.resolveRelativeUrl(this._baseUrl, href);
+        }
+        // Resolve internal URL as an app route
+        if (UrlUtils.isInternalUrl(href)) {
+            const routePath = this.normalizeUrl(href.startsWith('/') ? href : `/${href}`);
+            const urlTree = this.getUrlTree(routePath);
+            event.preventDefault();
+            this.router.navigated = false;
+            // Opening route
+            return this.navController.navigateForward(urlTree);
+        }
+        // External URL: open using the platform
+        event.preventDefault();
+        await this.platform.open(href);
+        return true;
+    }
+    scrollToAnchor(containerElement, anchorId) {
+        if (!containerElement || !anchorId) {
+            console.warn("Missing 'containerElement' or 'fragment' argument.");
+            return;
+        }
+        console.debug('[feed-directive-anchor] Scrolling to anchor #' + anchorId);
+        // Find the target element with the specified fragment ID
+        const targetElement = containerElement.querySelector(`#${anchorId}`);
+        if (targetElement) {
+            // Scroll smoothly to the target element
+            // eslint-disable-next-line @rx-angular/prefer-no-layout-sensitive-apis
+            targetElement.scrollIntoView({
+                behavior: 'smooth', // Smooth scrolling behavior
+                block: 'start', // Align the target element to the top of the container
+            });
+        }
+        else {
+            console.warn(`No element found with the ID "${anchorId}" inside the container.`);
+        }
+    }
+    /**
+     * Transform a relative URL to its absolute representation according to current router state.
+     * @param url Relative URL path.
+     * @return Absolute URL based on the current route.
+     */
+    normalizeUrl(url) {
+        if (UrlUtils.isExternalUrl(url)) {
+            return url;
+        }
+        if (this._baseUrl && UrlUtils.isRelativeUrl(url)) {
+            return UrlUtils.resolveRelativeUrl(this._baseUrl, url);
+        }
+        const urlTree = this.getUrlTree(url);
+        const serializedUrl = this.router.serializeUrl(urlTree);
+        return this.locationStrategy.prepareExternalUrl(serializedUrl);
+    }
+    getUrlTree(url) {
+        url = UrlUtils.normalizeUrl(url);
+        const urlPath = UrlUtils.stripFragmentAndQuery(url) || UrlUtils.stripFragmentAndQuery(this.router.url);
+        const parsedUrl = this.router.parseUrl(url);
+        const fragment = parsedUrl.fragment;
+        const queryParams = parsedUrl.queryParams;
+        return this.router.createUrlTree([urlPath], { relativeTo: this.route, fragment, queryParams });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeedDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: FeedDirective, selector: "feed,[feed]", inputs: { feedUrl: ["feed", "feedUrl"] }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeedDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'feed,[feed]',
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { feedUrl: [{
+                type: Input,
+                args: [{ alias: 'feed', required: true }]
+            }] } });
+
 class FeedsComponent {
     environment;
     feedService;
+    accountService;
+    alertCtrl;
     _state = new RxState();
     translate = inject(TranslateService);
     platform = inject(PlatformService);
@@ -34079,9 +34858,11 @@ class FeedsComponent {
     router = inject(Router);
     version;
     modalItemId;
+    onRefresh = new EventEmitter();
     feeds$ = this._state.select('feeds');
-    feedUrls$ = this._state.select('feedUrls');
+    urls$ = this._state.select('urls');
     hasFeeds$ = this._state.select('hasFeeds');
+    userId$ = this._state.select('userId');
     debug = false;
     mobile;
     showHeader = true;
@@ -34092,17 +34873,19 @@ class FeedsComponent {
     class = '';
     itemId;
     filterItem;
+    editItem = new EventEmitter();
+    deleteItem = new EventEmitter();
     set feeds(value) {
         this._state.set('feeds', () => value);
     }
     get feeds() {
         return this._state.get('feeds');
     }
-    set feedUrls(value) {
-        this._state.set('feedUrls', () => value);
+    set urls(value) {
+        this._state.set('urls', () => value);
     }
-    get feedUrls() {
-        return this._state.get('feedUrls');
+    get urls() {
+        return this._state.get('urls');
     }
     get hasFeeds() {
         return this._state.get('hasFeeds');
@@ -34119,6 +34902,9 @@ class FeedsComponent {
     get maxContentLength() {
         return this._state.get('maxContentLength');
     }
+    get peerUrl() {
+        return this._state.get('peerUrl');
+    }
     get hostClass() {
         const classes = [this.class];
         if (this.shape) {
@@ -34127,16 +34913,25 @@ class FeedsComponent {
         return classes.filter((cls) => cls).join(' ');
     }
     modal;
-    constructor(settings, environment, feedService) {
+    constructor(settings, environment, feedService, accountService, alertCtrl) {
         this.environment = environment;
         this.feedService = feedService;
+        this.accountService = accountService;
+        this.alertCtrl = alertCtrl;
         this.mobile = settings.mobile;
+        this._state.connect('locale', settings.locale$);
         this._state.connect('hasFeeds', this.feeds$.pipe(map(isNotEmptyArray)));
+        this._state.connect('userId', this.accountService.person$.pipe(map((person) => person?.id)));
+        this._state.connect('peerUrl', this.networkService.peer$.pipe(map((peer) => peer?.url)));
         if (this.feedService) {
-            this._state.connect('feeds', this._state.select(['feedUrls', 'maxAgeInMonths', 'maxContentLength']).pipe(switchMap(({ feedUrls, maxAgeInMonths, maxContentLength }) => this.feedService.watchAll({
-                urls: feedUrls,
+            this._state.connect('feeds', merge(this.onRefresh.pipe(map(() => ({ ...this._state.get(), cache: false }))), this._state
+                .select(['urls', 'maxAgeInMonths', 'maxContentLength', 'locale'])
+                .pipe(map(({ urls, maxAgeInMonths, maxContentLength, locale }) => ({ urls, maxAgeInMonths, maxContentLength, locale, cache: true })))).pipe(switchMap(({ urls, maxAgeInMonths, maxContentLength, locale, cache }) => this.feedService.watchAll({
+                urls: urls,
                 maxAgeInMonths,
                 maxContentLength,
+                locale,
+                cache,
             })), map(({ data }) => data)
             // DEBUG
             //tap((feeds) => console.debug('[feed-component] feeds', feeds))
@@ -34144,7 +34939,7 @@ class FeedsComponent {
         }
     }
     ngOnInit() {
-        this.feedUrls = this.feedUrls ?? null; // Should set the feedUrls, in order to trigger the select in constructor
+        this.urls = this.urls ?? null; // Should set the urls, in order to trigger the select in constructor
         this.maxAgeInMonths = this.maxAgeInMonths ?? this.environment.feed?.maxAgeInMonths ?? -1;
         this.maxContentLength = this.maxContentLength ?? this.environment.feed?.maxContentLength ?? -1;
         const self = this;
@@ -34220,12 +35015,73 @@ class FeedsComponent {
     getFeedHomeUrl(feed) {
         return feed.home_page_url ?? JsonFeedUtils.removeJsonExtension(feed.feed_url) ?? this.feedService.getHomeUrl();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeedsComponent, deps: [{ token: LocalSettingsService }, { 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", mobile: "mobile", showHeader: "showHeader", showReadMoreButton: "showReadMoreButton", headerColor: "headerColor", cardColor: "cardColor", shape: "shape", class: "class", itemId: "itemId", filterItem: "filterItem", feeds: "feeds", feedUrls: "feedUrls", maxAgeInMonths: "maxAgeInMonths", maxContentLength: "maxContentLength" }, host: { properties: { "class": "this.hostClass" } }, providers: [RxState], viewQueries: [{ propertyName: "modal", first: true, predicate: ["modal"], descendants: true }], ngImport: i0, template: "<!-- debug -->\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@let feeds = feeds$ | async;\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 | arrayFilter: filterItem; 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)=\"openFeedItem(item, feed)\" 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>\n                  <markdown [data]=\"item.content_text\" emoji></markdown>\n                </p>\n              }\n            </ion-text>\n          </ion-card-content>\n\n          @if (showReadMoreButton) {\n            <ion-button (click)=\"openFeedItem(item, feed)\" 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          }\n        </ion-card>\n      }\n    }\n  </div>\n}\n\n<ion-modal #modal [showBackdrop]=\"false\"\n           class=\"stack-modal\" [class.modal-large]=\"!mobile\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar color=\"secondary\">\n        <ion-title>{{ 'SOCIAL.FEED.NEWS' | translate }}</ion-title>\n        <ion-buttons slot=\"end\">\n          <ion-button (click)=\"modal.dismiss()\">\n            <ion-icon slot=\"icon-only\" name=\"close\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content>\n      <div class=\"ion-padding\">\n        <app-feed\n          [feedUrls]=\"feedUrls\"\n          [showHeader]=\"false\"\n          [showReadMoreButton]=\"false\"\n          [maxContentLength]=\"-1\"\n          [maxAgeInMonths]=\"-1\"\n          [itemId]=\"modalItemId\"\n          cardColor=\"light\"\n          [debug]=\"debug\"\n        ></app-feed>\n      </div>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [":host{display:block;height:calc(100% - 10px);max-height:fit-content;overflow:hidden;--feed-header-height: 48px;-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);-webkit-margin-start:10px;margin-inline-start:10px;-webkit-margin-end:10px;margin-inline-end:10px;margin-top:0;margin-bottom:10px;--feed-border-radius: 4px;border-radius:var(--feed-border-radius);--ion-card-background: rgba(var(--ion-background-color-rgb), .6)}: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:auto;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.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.IonChip, selector: "ion-chip", inputs: ["color", "disabled", "mode", "outline"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.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: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonModal, selector: "ion-modal" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i4$2.MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }, { kind: "component", type: DebugComponent, selector: "app-debug", inputs: ["titlePrefix", "title", "enable", "expanded"] }, { kind: "directive", type: MarkdownDirective, selector: "markdown,[markdown]" }, { kind: "component", type: FeedsComponent, selector: "app-feed", inputs: ["debug", "mobile", "showHeader", "showReadMoreButton", "headerColor", "cardColor", "shape", "class", "itemId", "filterItem", "feeds", "feedUrls", "maxAgeInMonths", "maxContentLength"] }, { 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: ArrayFilterPipe, name: "arrayFilter" }, { kind: "pipe", type: MapPipe, name: "map" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    /**
+     * Check if the current user is the author of the feed item
+     */
+    canEditItem = (item, userId, feed) => {
+        if (!item || isNil(userId))
+            return false; // No item, or user not connected
+        // DEBUG
+        //console.debug('[feed-component] canEditItem...');
+        // Check feed URL point on the current peer (/api/feed/ ...)
+        if (!item.url?.startsWith(this.peerUrl))
+            return false;
+        // Check item authors first
+        let isAuthor = false;
+        if (isNotEmptyArray(item.authors)) {
+            isAuthor = item.authors.some((author) => +author.id === userId);
+        }
+        // Check feed authors
+        if (!isAuthor && isNotEmptyArray(feed?.authors)) {
+            isAuthor = feed.authors.some((author) => +author.id === userId);
+        }
+        return isAuthor || this.accountService.isAdmin();
+    };
+    /**
+     * Handle edit item action
+     */
+    async onEditItem(event, item) {
+        if (event) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        if (this.editItem.observed) {
+            this.editItem.emit(item);
+        }
+        const done = await this.feedService?.openEditModal(event, item);
+        if (done) {
+            // force a refresh of the feeds
+            this.onRefresh.emit();
+        }
+    }
+    /**
+     * Handle delete item action
+     */
+    async onDeleteItem(event, item) {
+        if (event) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        // Ask for confirmation before deletion
+        const confirmed = await Alerts.askActionConfirmation(this.alertCtrl, this.translate, true, event);
+        if (confirmed !== true) {
+            return; // User cancelled or dismissed
+        }
+        if (this.deleteItem.observed) {
+            this.deleteItem.emit(item);
+        }
+        const done = await this.feedService?.deleteItem(item);
+        if (done) {
+            // force a refresh of the feeds
+            this.onRefresh.emit();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeedsComponent, deps: [{ token: LocalSettingsService }, { token: ENVIRONMENT }, { token: APP_FEED_SERVICE, optional: true }, { token: AccountService }, { token: i2$1.AlertController }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FeedsComponent, selector: "app-feed", inputs: { debug: "debug", mobile: "mobile", showHeader: "showHeader", showReadMoreButton: "showReadMoreButton", headerColor: "headerColor", cardColor: "cardColor", shape: "shape", class: "class", itemId: "itemId", filterItem: "filterItem", feeds: "feeds", urls: "urls", maxAgeInMonths: "maxAgeInMonths", maxContentLength: "maxContentLength" }, outputs: { editItem: "editItem", deleteItem: "deleteItem" }, host: { properties: { "class": "this.hostClass" } }, providers: [RxState], viewQueries: [{ propertyName: "modal", first: true, predicate: ["modal"], descendants: true }], ngImport: i0, template: "<!-- debug -->\n@if (debug) {\n  <app-debug [title]=\"'Feed'\">\n    <p>\n      hasFeeds?: {{ hasFeeds$ | async }}\n      <br />\n      urls: {{ urls$ | async | json }}\n      <br />\n      shape: {{ shape }}\n    </p>\n  </app-debug>\n}\n\n@let feeds = feeds$ | async;\n@let userId = userId$ | async;\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 | arrayFilter: filterItem; 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          class=\"feed-item-card\"\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)=\"openFeedItem(item, feed)\" 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>\n                  <markdown [data]=\"item.content_text\" emoji></markdown>\n                </p>\n              }\n            </ion-text>\n          </ion-card-content>\n\n          @let editable = canEditItem(item, userId, feed);\n          @if (editable || showReadMoreButton) {\n            @if (editable) {\n\n              <!-- Delete button (visible hover)-->\n              <button\n                mat-icon-button\n                (click)=\"onDeleteItem($event, item)\"\n                class=\"visible-hover ion-float-start\"\n                [title]=\"'COMMON.BTN_DELETE' | translate\"\n              >\n                <mat-icon>delete</mat-icon>\n              </button>\n              <!-- Edit button (visible hover) -->\n              <ion-button\n                (click)=\"onEditItem($event, item)\"\n                class=\"visible-hover ion-float-start\" fill=\"clear\"\n              >\n                <mat-icon slot=\"start\">edit</mat-icon>\n<!--                <ion-icon name=\"pencil\" slot=\"start\"></ion-icon>-->\n                <ion-label translate>COMMON.BTN_EDIT</ion-label>\n              </ion-button>\n            }\n            @if (showReadMoreButton) {\n              <ion-button  (click)=\"openFeedItem(item, feed)\" 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            }\n          }\n        </ion-card>\n      }\n    }\n  </div>\n}\n\n<!-- Details modal -->\n<ion-modal #modal [showBackdrop]=\"false\"\n           class=\"stack-modal\" [class.modal-large]=\"!mobile\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar color=\"secondary\">\n        <ion-title>{{ 'SOCIAL.FEED.NEWS' | translate }}</ion-title>\n        <ion-buttons slot=\"end\">\n          <ion-button (click)=\"modal.dismiss()\">\n            <ion-icon slot=\"icon-only\" name=\"close\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content>\n      <div class=\"ion-padding\">\n        <app-feed\n          [urls]=\"urls\"\n          [showHeader]=\"false\"\n          [showReadMoreButton]=\"false\"\n          [maxContentLength]=\"-1\"\n          [maxAgeInMonths]=\"-1\"\n          [itemId]=\"modalItemId\"\n          cardColor=\"light\"\n          [debug]=\"debug\"\n        ></app-feed>\n      </div>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [":host{display:block;height:calc(100% - 10px);max-height:fit-content;overflow:hidden;--feed-header-height: 48px;-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);-webkit-margin-start:10px;margin-inline-start:10px;-webkit-margin-end:10px;margin-inline-end:10px;margin-top:0;margin-bottom:10px;--feed-border-radius: 4px;border-radius:var(--feed-border-radius);--ion-card-background: rgba(var(--ion-background-color-rgb), .6)}: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:auto;overflow-y:auto;--margin-bottom: 8px}.feed-content.has-header{height:calc(100% - var(--feed-header-height, 0))}.feed-content ion-card.feed-item-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.feed-item-card.first{--top-radius: 0}.feed-content ion-card.feed-item-card.last{--margin-bottom: 0;--bottom-radius: 0}.feed-content ion-card.feed-item-card ion-card-header ion-card-title{--color: rgba(var(--ion-card-color-contrast-rgb), .87)}.feed-content ion-card.feed-item-card ion-card-header ion-card-subtitle ion-chip{--background: transparent;--border-color: transparent;--border-width: 0}.feed-content ion-card.feed-item-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.feed-item-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.feed-item-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.feed-item-card ion-card-header .tags{display:inline}.feed-content ion-card.feed-item-card ion-card-header .tags a{color:rgba(var(--ion-card-color-contrast-rgb),.6)!important}.feed-content ion-card.feed-item-card ion-card-content ion-text ::ng-deep img{max-width:100%;height:auto!important}.feed-content ion-card.feed-item-card .visible-hover{opacity:0;transition:opacity .2s ease-in-out}.feed-content ion-card.feed-item-card:hover .visible-hover{opacity:1}\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.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.IonChip, selector: "ion-chip", inputs: ["color", "disabled", "mode", "outline"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.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: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonModal, selector: "ion-modal" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i4$2.MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }, { 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: DebugComponent, selector: "app-debug", inputs: ["titlePrefix", "title", "enable", "expanded"] }, { kind: "directive", type: MarkdownDirective, selector: "markdown,[markdown]" }, { kind: "component", type: FeedsComponent, selector: "app-feed", inputs: ["debug", "mobile", "showHeader", "showReadMoreButton", "headerColor", "cardColor", "shape", "class", "itemId", "filterItem", "feeds", "urls", "maxAgeInMonths", "maxContentLength"], outputs: ["editItem", "deleteItem"] }, { kind: "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: ArrayFilterPipe, name: "arrayFilter" }, { 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: "<!-- debug -->\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@let feeds = feeds$ | async;\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 | arrayFilter: filterItem; 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)=\"openFeedItem(item, feed)\" 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>\n                  <markdown [data]=\"item.content_text\" emoji></markdown>\n                </p>\n              }\n            </ion-text>\n          </ion-card-content>\n\n          @if (showReadMoreButton) {\n            <ion-button (click)=\"openFeedItem(item, feed)\" 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          }\n        </ion-card>\n      }\n    }\n  </div>\n}\n\n<ion-modal #modal [showBackdrop]=\"false\"\n           class=\"stack-modal\" [class.modal-large]=\"!mobile\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar color=\"secondary\">\n        <ion-title>{{ 'SOCIAL.FEED.NEWS' | translate }}</ion-title>\n        <ion-buttons slot=\"end\">\n          <ion-button (click)=\"modal.dismiss()\">\n            <ion-icon slot=\"icon-only\" name=\"close\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content>\n      <div class=\"ion-padding\">\n        <app-feed\n          [feedUrls]=\"feedUrls\"\n          [showHeader]=\"false\"\n          [showReadMoreButton]=\"false\"\n          [maxContentLength]=\"-1\"\n          [maxAgeInMonths]=\"-1\"\n          [itemId]=\"modalItemId\"\n          cardColor=\"light\"\n          [debug]=\"debug\"\n        ></app-feed>\n      </div>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [":host{display:block;height:calc(100% - 10px);max-height:fit-content;overflow:hidden;--feed-header-height: 48px;-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);-webkit-margin-start:10px;margin-inline-start:10px;-webkit-margin-end:10px;margin-inline-end:10px;margin-top:0;margin-bottom:10px;--feed-border-radius: 4px;border-radius:var(--feed-border-radius);--ion-card-background: rgba(var(--ion-background-color-rgb), .6)}: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:auto;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"] }]
+            args: [{ selector: 'app-feed', providers: [RxState], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- debug -->\n@if (debug) {\n  <app-debug [title]=\"'Feed'\">\n    <p>\n      hasFeeds?: {{ hasFeeds$ | async }}\n      <br />\n      urls: {{ urls$ | async | json }}\n      <br />\n      shape: {{ shape }}\n    </p>\n  </app-debug>\n}\n\n@let feeds = feeds$ | async;\n@let userId = userId$ | async;\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 | arrayFilter: filterItem; 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          class=\"feed-item-card\"\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)=\"openFeedItem(item, feed)\" 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>\n                  <markdown [data]=\"item.content_text\" emoji></markdown>\n                </p>\n              }\n            </ion-text>\n          </ion-card-content>\n\n          @let editable = canEditItem(item, userId, feed);\n          @if (editable || showReadMoreButton) {\n            @if (editable) {\n\n              <!-- Delete button (visible hover)-->\n              <button\n                mat-icon-button\n                (click)=\"onDeleteItem($event, item)\"\n                class=\"visible-hover ion-float-start\"\n                [title]=\"'COMMON.BTN_DELETE' | translate\"\n              >\n                <mat-icon>delete</mat-icon>\n              </button>\n              <!-- Edit button (visible hover) -->\n              <ion-button\n                (click)=\"onEditItem($event, item)\"\n                class=\"visible-hover ion-float-start\" fill=\"clear\"\n              >\n                <mat-icon slot=\"start\">edit</mat-icon>\n<!--                <ion-icon name=\"pencil\" slot=\"start\"></ion-icon>-->\n                <ion-label translate>COMMON.BTN_EDIT</ion-label>\n              </ion-button>\n            }\n            @if (showReadMoreButton) {\n              <ion-button  (click)=\"openFeedItem(item, feed)\" 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            }\n          }\n        </ion-card>\n      }\n    }\n  </div>\n}\n\n<!-- Details modal -->\n<ion-modal #modal [showBackdrop]=\"false\"\n           class=\"stack-modal\" [class.modal-large]=\"!mobile\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar color=\"secondary\">\n        <ion-title>{{ 'SOCIAL.FEED.NEWS' | translate }}</ion-title>\n        <ion-buttons slot=\"end\">\n          <ion-button (click)=\"modal.dismiss()\">\n            <ion-icon slot=\"icon-only\" name=\"close\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content>\n      <div class=\"ion-padding\">\n        <app-feed\n          [urls]=\"urls\"\n          [showHeader]=\"false\"\n          [showReadMoreButton]=\"false\"\n          [maxContentLength]=\"-1\"\n          [maxAgeInMonths]=\"-1\"\n          [itemId]=\"modalItemId\"\n          cardColor=\"light\"\n          [debug]=\"debug\"\n        ></app-feed>\n      </div>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [":host{display:block;height:calc(100% - 10px);max-height:fit-content;overflow:hidden;--feed-header-height: 48px;-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);-webkit-margin-start:10px;margin-inline-start:10px;-webkit-margin-end:10px;margin-inline-end:10px;margin-top:0;margin-bottom:10px;--feed-border-radius: 4px;border-radius:var(--feed-border-radius);--ion-card-background: rgba(var(--ion-background-color-rgb), .6)}: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:auto;overflow-y:auto;--margin-bottom: 8px}.feed-content.has-header{height:calc(100% - var(--feed-header-height, 0))}.feed-content ion-card.feed-item-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.feed-item-card.first{--top-radius: 0}.feed-content ion-card.feed-item-card.last{--margin-bottom: 0;--bottom-radius: 0}.feed-content ion-card.feed-item-card ion-card-header ion-card-title{--color: rgba(var(--ion-card-color-contrast-rgb), .87)}.feed-content ion-card.feed-item-card ion-card-header ion-card-subtitle ion-chip{--background: transparent;--border-color: transparent;--border-width: 0}.feed-content ion-card.feed-item-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.feed-item-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.feed-item-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.feed-item-card ion-card-header .tags{display:inline}.feed-content ion-card.feed-item-card ion-card-header .tags a{color:rgba(var(--ion-card-color-contrast-rgb),.6)!important}.feed-content ion-card.feed-item-card ion-card-content ion-text ::ng-deep img{max-width:100%;height:auto!important}.feed-content ion-card.feed-item-card .visible-hover{opacity:0;transition:opacity .2s ease-in-out}.feed-content ion-card.feed-item-card:hover .visible-hover{opacity:1}\n"] }]
         }], ctorParameters: () => [{ type: LocalSettingsService }, { type: Environment, decorators: [{
                     type: Inject,
                     args: [ENVIRONMENT]
@@ -34234,7 +35090,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }, {
                     type: Inject,
                     args: [APP_FEED_SERVICE]
-                }] }], propDecorators: { debug: [{
+                }] }, { type: AccountService }, { type: i2$1.AlertController }], propDecorators: { debug: [{
                 type: Input
             }], mobile: [{
                 type: Input
@@ -34254,9 +35110,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], filterItem: [{
                 type: Input
+            }], editItem: [{
+                type: Output
+            }], deleteItem: [{
+                type: Output
             }], feeds: [{
                 type: Input
-            }], feedUrls: [{
+            }], urls: [{
                 type: Input
             }], maxAgeInMonths: [{
                 type: Input
@@ -34643,11 +35503,11 @@ class HomePage extends RxState {
         this.cd.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HomePage, deps: [{ token: AccountService }, { token: i2$1.ModalController }, { token: i1$1.TranslateService }, { token: i2$1.ToastController }, { token: ConfigService }, { token: PlatformService }, { token: i0.ChangeDetectorRef }, { token: NetworkService }, { token: LocalSettingsService }, { token: ENVIRONMENT }, { token: APP_LOCALES }, { token: APP_HOME_BUTTONS, optional: true }, { token: APP_HOME_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: HomePage, selector: "app-page-home", viewQueries: [{ propertyName: "content", first: true, predicate: IonContent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar [canGoBack]=\"false\" visible-xs visible-sm visible-mobile>\n  <ion-buttons slot=\"end\">\n    @if (showNotificationIcon) {\n      <app-user-event-notification-icon [autoHide]=\"autoHideNotificationIcon\"></app-user-event-notification-icon>\n    }\n\n    <!-- dark mode (if allow by the environment token) -->\n    @if (settings.allowDarkMode) {\n      <ion-button (click)=\"toggleDarkMode()\">\n        <ion-icon slot=\"icon-only\" [name]=\"(darkMode$ | push) ? 'sunny' : 'moon'\"></ion-icon>\n      </ion-button>\n    }\n\n    <!-- Change locale button -->\n    <ion-button [matMenuTriggerFor]=\"localeMenu\">\n      <ion-icon slot=\"start\" name=\"language\"></ion-icon>\n    </ion-button>\n  </ion-buttons>\n</app-toolbar>\n\n<!-- Change locale menu -->\n<mat-menu #localeMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    @for (item of locales; track item.key) {\n      <button mat-menu-item (click)=\"changeLanguage(item.key)\">\n        <!--<mat-icon>{{ currentLocale === item.key ? 'checkmark' : undefined }}</mat-icon>-->\n        <ion-label>{{ item.value }}</ion-label>\n      </button>\n    }\n  </ng-template>\n</mat-menu>\n\n<ion-content [ngStyle]=\"contentStyle\" [class.has-scrollbar]=\"hasScrollbar\" no-padding-xs>\n  <!-- loading spinner -->\n  <div class=\"loading-page\" [class.cdk-visually-hidden]=\"!(loading$ | push)\">\n    @if (showSpinner) {\n      <div class=\"spinner\">\n        <p [innerHTML]=\"'COMMON.LOADING_DOTS' | translate\"></p>\n        <div class=\"sk-cube1 sk-cube\"></div>\n        <div class=\"sk-cube2 sk-cube\"></div>\n        <div class=\"sk-cube4 sk-cube\"></div>\n        <div class=\"sk-cube3 sk-cube\"></div>\n      </div>\n    }\n  </div>\n\n  <!-- Desktop: translucent top toolbar -->\n  @if (!mobile) {\n    <div class=\"hidden-xs hidden-sm\">\n      <ion-toolbar color=\"traansparent\" translucent>\n        <ion-buttons slot=\"start\">\n          <ion-menu-toggle>\n            <ion-button color=\"light\" fill=\"clear\">\n              <ion-icon slot=\"icon-only\" name=\"menu\"></ion-icon>\n            </ion-button>\n          </ion-menu-toggle>\n        </ion-buttons>\n\n        <ion-buttons slot=\"end\">\n          @if (showNotificationIcon) {\n            <app-user-event-notification-icon\n              [style]=\"'ion-button'\"\n              color=\"secondary\"\n              unreadColor=\"tertiary\"\n              fill=\"solid\"\n              [autoHide]=\"autoHideNotificationIcon\"\n            ></app-user-event-notification-icon>\n          }\n\n          <!-- dark mode (if allow by the environment token) -->\n          @if (settings.allowDarkMode) {\n            <ion-button\n              color=\"secondary\"\n              fill=\"solid\"\n              (click)=\"toggleDarkMode()\"\n              [title]=\"'HOME.BTN_DARK_MODE' | translate\"\n            >\n              <ion-icon slot=\"icon-only\" [name]=\"(darkMode$ | push) ? 'moon' : 'sunny'\"></ion-icon>\n            </ion-button>\n          }\n          <!-- change locale button -->\n          <ion-button\n            color=\"secondary\"\n            fill=\"solid\"\n            [matMenuTriggerFor]=\"localeMenu\"\n            [title]=\"'SETTINGS.LOCALE' | translate\"\n          >\n            <ion-icon slot=\"icon-only\" name=\"language\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </div>\n  }\n\n  <!-- Install (and upgrade) card -->\n  <app-install-upgrade-card [isLogin]=\"isLogin\" [showInstallButton]=\"true\"></app-install-upgrade-card>\n\n  @if (!(loading$ | push)) {\n    @let hasFeed = hasFeed$ | async;\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row>\n        <ion-col size=\"0\" [sizeXl]=\"hasFeed ? 3 : 0\"></ion-col>\n        <ion-col>\n          <!-- Welcome card -->\n          <ion-card class=\"main welcome ion-padding ion-text-center ion-align-self-center\" @fadeInAnimation>\n            <ion-card-header>\n              <ion-card-title class=\"ion-text-center\">\n                <span *ngIf=\"isWeb\" [innerHTML]=\"'HOME.WELCOME_WEB' | translate: { appName: appName }\"></span>\n                <span *ngIf=\"!isWeb\" [innerHTML]=\"'HOME.WELCOME_APP' | translate: { appName: appName }\"></span>\n              </ion-card-title>\n              <ion-card-subtitle [innerHTML]=\"description\"></ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content class=\"ion-no-padding\">\n              <ion-text color=\"primary\">\n                <img *ngIf=\"logo\" [attr.src]=\"logo\" alt=\"Logo\" />\n              </ion-text>\n              <!-- register help text -->\n              <ion-text *ngIf=\"!isLogin && canRegister\">\n                <br />\n                <span translate>HOME.REGISTER_HELP</span>\n              </ion-text>\n              <div class=\"ion-padding-top\">\n                <!-- If NOT login -->\n                <ng-container *ngIf=\"!isLogin; else loginButtons\">\n                  <ion-button *ngIf=\"canRegister\" expand=\"block\" color=\"tertiary\" (click)=\"register()\">\n                    <span translate>HOME.BTN_REGISTER</span>\n                  </ion-button>\n                  <ion-button expand=\"block\" color=\"light\" [routerLink]=\"['/']\" (click)=\"login()\">\n                    <span translate>AUTH.BTN_LOGIN</span>\n                  </ion-button>\n                </ng-container>\n\n                <!-- If user login -->\n                <ng-template #loginButtons>\n                  <!-- Feature buttons -->\n                  <ng-container *rxIf=\"$filteredButtons; let buttons\">\n                    <ng-container *ngFor=\"let item of buttons\">\n                      <ion-button\n                        *ngIf=\"item.path\"\n                        expand=\"block\"\n                        color=\"tertiary\"\n                        [class]=\"item.cssClass\"\n                        [routerLink]=\"item.path\"\n                        routerDirection=\"root\"\n                      >\n                        <ion-icon slot=\"start\" class=\"ion-float-start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n                        <mat-icon slot=\"start\" class=\"ion-float-start\" *ngIf=\"item.matIcon\">\n                          {{ item.matIcon }}\n                        </mat-icon>\n                        <ion-text>{{ 'HOME.BTN_DATA_ENTRY' | translate: { name: (item.title | translate) } }}</ion-text>\n                      </ion-button>\n\n                      <!-- divider -->\n                      <div *ngIf=\"!item.path && !item.action\" [class]=\"item.cssClass\">\n                        <ion-label translate>{{ item.title }}&nbsp;</ion-label>\n                      </div>\n                    </ng-container>\n\n                    <!--<p *ngIf=\"buttons.length\" class=\"visible-mobile\">&nbsp;</p>-->\n                  </ng-container>\n\n                  <ion-button *ngIf=\"showAccountButton\" expand=\"block\" color=\"secondary\" [routerLink]=\"['/account']\">\n                    <ion-icon slot=\"start\" class=\"ion-float-start\" name=\"person-circle\"></ion-icon>\n                    <ion-text translate>HOME.BTN_MY_ACCOUNT</ion-text>\n                  </ion-button>\n\n                  <p hidden-xs hidden-sm hidden-mobile>\n                    <ion-text\n                      [innerHTML]=\"'HOME.NOT_THIS_ACCOUNT_QUESTION' | translate: { displayName: accountName }\"\n                    ></ion-text>\n                    <br />\n                    <ion-text>\n                      <a href=\"#\" (click)=\"logout($event)\">\n                        <span translate>HOME.BTN_DISCONNECT</span>\n                      </a>\n                    </ion-text>\n                  </p>\n                </ng-template>\n              </div>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n        <ion-col size=\"0\" [sizeXl]=\"hasFeed ? 1 : 0\"></ion-col>\n        <ion-col [class.feed]=\"hasFeed\" [size]=\"hasFeed ? 12 : 0\" [sizeXl]=\"hasFeed ? 4 : 0\">\n          @if (showFeed) {\n            @if (mobile) {\n              <app-feed\n                #feed\n                shape=\"round\"\n                [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{height:fit-content;max-height:calc(100vh - var(--ion-toolbar-height) - var(--bottom-banner-height) - var(--ion-padding) * 2);padding-inline-end:calc(var(--ion-padding) - 10px);overflow:hidden}ion-content .bottom-banner.floating{position:fixed;left:0;right:0;bottom:0;overflow-y:auto;max-height:var(--bottom-banner-height);margin-top:0}}.content-credits{float:right}.content-credits.floating{float:unset;position:fixed;bottom:0;right:var(--scrollbar-width, 0)}.content-credits ion-text{padding-inline-start:4px;padding-inline-end:4px;font-size:.7rem;background-color:rgba(var(--ion-background-color-rgb),.5);color:rgba(var(--ion-text-color-rgb),.7)}@media screen and (min-width: 992px){.left-border{border-left:1px solid var(--ion-color-medium)}}\n"], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$1.IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { kind: "component", type: i2$1.IonMenuToggle, selector: "ion-menu-toggle", inputs: ["autoHide", "menu"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i2$1.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i8$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", "mobile", "showHeader", "showReadMoreButton", "headerColor", "cardColor", "shape", "class", "itemId", "filterItem", "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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: HomePage, selector: "app-page-home", viewQueries: [{ propertyName: "content", first: true, predicate: IonContent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar [canGoBack]=\"false\" visible-xs visible-sm visible-mobile>\n  <ion-buttons slot=\"end\">\n    @if (showNotificationIcon) {\n      <app-user-event-notification-icon [autoHide]=\"autoHideNotificationIcon\"></app-user-event-notification-icon>\n    }\n\n    <!-- dark mode (if allow by the environment token) -->\n    @if (settings.allowDarkMode) {\n      <ion-button (click)=\"toggleDarkMode()\">\n        <ion-icon slot=\"icon-only\" [name]=\"(darkMode$ | push) ? 'sunny' : 'moon'\"></ion-icon>\n      </ion-button>\n    }\n\n    <!-- Change locale button -->\n    <ion-button [matMenuTriggerFor]=\"localeMenu\">\n      <ion-icon slot=\"start\" name=\"language\"></ion-icon>\n    </ion-button>\n  </ion-buttons>\n</app-toolbar>\n\n<!-- Change locale menu -->\n<mat-menu #localeMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    @for (item of locales; track item.key) {\n      <button mat-menu-item (click)=\"changeLanguage(item.key)\">\n        <!--<mat-icon>{{ currentLocale === item.key ? 'checkmark' : undefined }}</mat-icon>-->\n        <ion-label>{{ item.value }}</ion-label>\n      </button>\n    }\n  </ng-template>\n</mat-menu>\n\n<ion-content [ngStyle]=\"contentStyle\" [class.has-scrollbar]=\"hasScrollbar\" no-padding-xs>\n  <!-- loading spinner -->\n  <div class=\"loading-page\" [class.cdk-visually-hidden]=\"!(loading$ | push)\">\n    @if (showSpinner) {\n      <div class=\"spinner\">\n        <p [innerHTML]=\"'COMMON.LOADING_DOTS' | translate\"></p>\n        <div class=\"sk-cube1 sk-cube\"></div>\n        <div class=\"sk-cube2 sk-cube\"></div>\n        <div class=\"sk-cube4 sk-cube\"></div>\n        <div class=\"sk-cube3 sk-cube\"></div>\n      </div>\n    }\n  </div>\n\n  <!-- Desktop: translucent top toolbar -->\n  @if (!mobile) {\n    <div class=\"hidden-xs hidden-sm\">\n      <ion-toolbar color=\"traansparent\" translucent>\n        <ion-buttons slot=\"start\">\n          <ion-menu-toggle>\n            <ion-button color=\"light\" fill=\"clear\">\n              <ion-icon slot=\"icon-only\" name=\"menu\"></ion-icon>\n            </ion-button>\n          </ion-menu-toggle>\n        </ion-buttons>\n\n        <ion-buttons slot=\"end\">\n          @if (showNotificationIcon) {\n            <app-user-event-notification-icon\n              [style]=\"'ion-button'\"\n              color=\"secondary\"\n              unreadColor=\"tertiary\"\n              fill=\"solid\"\n              [autoHide]=\"autoHideNotificationIcon\"\n            ></app-user-event-notification-icon>\n          }\n\n          <!-- dark mode (if allow by the environment token) -->\n          @if (settings.allowDarkMode) {\n            <ion-button\n              color=\"secondary\"\n              fill=\"solid\"\n              (click)=\"toggleDarkMode()\"\n              [title]=\"'HOME.BTN_DARK_MODE' | translate\"\n            >\n              <ion-icon slot=\"icon-only\" [name]=\"(darkMode$ | push) ? 'moon' : 'sunny'\"></ion-icon>\n            </ion-button>\n          }\n          <!-- change locale button -->\n          <ion-button\n            color=\"secondary\"\n            fill=\"solid\"\n            [matMenuTriggerFor]=\"localeMenu\"\n            [title]=\"'SETTINGS.LOCALE' | translate\"\n          >\n            <ion-icon slot=\"icon-only\" name=\"language\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </div>\n  }\n\n  <!-- Install (and upgrade) card -->\n  <app-install-upgrade-card [isLogin]=\"isLogin\" [showInstallButton]=\"true\"></app-install-upgrade-card>\n\n  @if (!(loading$ | push)) {\n    @let hasFeed = hasFeed$ | async;\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row>\n        <ion-col size=\"0\" [sizeXl]=\"hasFeed ? 3 : 0\"></ion-col>\n        <ion-col>\n          <!-- Welcome card -->\n          <ion-card class=\"main welcome ion-padding ion-text-center ion-align-self-center\" @fadeInAnimation>\n            <ion-card-header>\n              <ion-card-title class=\"ion-text-center\">\n                <span *ngIf=\"isWeb\" [innerHTML]=\"'HOME.WELCOME_WEB' | translate: { appName: appName }\"></span>\n                <span *ngIf=\"!isWeb\" [innerHTML]=\"'HOME.WELCOME_APP' | translate: { appName: appName }\"></span>\n              </ion-card-title>\n              <ion-card-subtitle [innerHTML]=\"description\"></ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content class=\"ion-no-padding\">\n              <ion-text color=\"primary\">\n                <img *ngIf=\"logo\" [attr.src]=\"logo\" alt=\"Logo\" />\n              </ion-text>\n              <!-- register help text -->\n              <ion-text *ngIf=\"!isLogin && canRegister\">\n                <br />\n                <span translate>HOME.REGISTER_HELP</span>\n              </ion-text>\n              <div class=\"ion-padding-top\">\n                <!-- If NOT login -->\n                <ng-container *ngIf=\"!isLogin; else loginButtons\">\n                  <ion-button *ngIf=\"canRegister\" expand=\"block\" color=\"tertiary\" (click)=\"register()\">\n                    <span translate>HOME.BTN_REGISTER</span>\n                  </ion-button>\n                  <ion-button expand=\"block\" color=\"light\" [routerLink]=\"['/']\" (click)=\"login()\">\n                    <span translate>AUTH.BTN_LOGIN</span>\n                  </ion-button>\n                </ng-container>\n\n                <!-- If user login -->\n                <ng-template #loginButtons>\n                  <!-- Feature buttons -->\n                  <ng-container *rxIf=\"$filteredButtons; let buttons\">\n                    <ng-container *ngFor=\"let item of buttons\">\n                      <ion-button\n                        *ngIf=\"item.path\"\n                        expand=\"block\"\n                        color=\"tertiary\"\n                        [class]=\"item.cssClass\"\n                        [routerLink]=\"item.path\"\n                        routerDirection=\"root\"\n                      >\n                        <ion-icon slot=\"start\" class=\"ion-float-start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n                        <mat-icon slot=\"start\" class=\"ion-float-start\" *ngIf=\"item.matIcon\">\n                          {{ item.matIcon }}\n                        </mat-icon>\n                        <ion-text>{{ 'HOME.BTN_DATA_ENTRY' | translate: { name: (item.title | translate) } }}</ion-text>\n                      </ion-button>\n\n                      <!-- divider -->\n                      <div *ngIf=\"!item.path && !item.action\" [class]=\"item.cssClass\">\n                        <ion-label translate>{{ item.title }}&nbsp;</ion-label>\n                      </div>\n                    </ng-container>\n\n                    <!--<p *ngIf=\"buttons.length\" class=\"visible-mobile\">&nbsp;</p>-->\n                  </ng-container>\n\n                  <ion-button *ngIf=\"showAccountButton\" expand=\"block\" color=\"secondary\" [routerLink]=\"['/account']\">\n                    <ion-icon slot=\"start\" class=\"ion-float-start\" name=\"person-circle\"></ion-icon>\n                    <ion-text translate>HOME.BTN_MY_ACCOUNT</ion-text>\n                  </ion-button>\n\n                  <p hidden-xs hidden-sm hidden-mobile>\n                    <ion-text\n                      [innerHTML]=\"'HOME.NOT_THIS_ACCOUNT_QUESTION' | translate: { displayName: accountName }\"\n                    ></ion-text>\n                    <br />\n                    <ion-text>\n                      <a href=\"#\" (click)=\"logout($event)\">\n                        <span translate>HOME.BTN_DISCONNECT</span>\n                      </a>\n                    </ion-text>\n                  </p>\n                </ng-template>\n              </div>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n        <ion-col size=\"0\" [sizeXl]=\"hasFeed ? 1 : 0\"></ion-col>\n        <ion-col [class.feed]=\"hasFeed\" [size]=\"hasFeed ? 12 : 0\" [sizeXl]=\"hasFeed ? 4 : 0\">\n          @if (showFeed) {\n            @if (mobile) {\n              <app-feed\n                #feed\n                shape=\"round\"\n                [urls]=\"feedUrls\"\n                [maxAgeInMonths]=\"feedMaxAgeInMonths\"\n                [maxContentLength]=\"feedMaxContentLength\"\n                (ngInit)=\"initFeed(feed)\"\n                @fadeInAnimation\n              ></app-feed>\n            } @else {\n              <app-feed\n                #feed\n                shape=\"round\"\n                [debug]=\"false\"\n                [urls]=\"feedUrls\"\n                [maxAgeInMonths]=\"feedMaxAgeInMonths\"\n                [maxContentLength]=\"feedMaxContentLength\"\n                (ngInit)=\"initFeed(feed)\"\n                @slideInAnimation\n                @fadeInAnimation\n              ></app-feed>\n            }\n          }\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n    <!-- Page history -->\n    @let pageHistory = isLogin && (pageHistory$ | push);\n    @if (pageHistory | isNotEmptyArray) {\n      <ion-grid class=\"history-container ion-align-self-center\">\n        <ion-row>\n          @for (page of pageHistory; track page.path) {\n            <ion-col size=\"12\" size-xl=\"\" class=\"ion-text-center\">\n              <ion-card class=\"ion-align-self-start ion-text-start\" @fadeInAnimation>\n                <ion-card-header class=\"ion-no-padding\">\n                  <!-- top bar -->\n                  <ion-card-subtitle>\n                    <button\n                      type=\"button\"\n                      tabindex=\"-1\"\n                      (click)=\"removePageHistory(page.path)\"\n                      mat-icon-button\n                      class=\"ion-float-start ion-no-margin close-button\"\n                    >\n                      <mat-icon>close</mat-icon>\n                    </button>\n                    <ion-label [innerHTML]=\"page.subtitle | translate\"></ion-label>\n                    <ion-text class=\"ion-float-end\" [title]=\"page.time | dateFormat: { time: true }\">\n                      <small>\n                        <ion-icon name=\"time-outline\"></ion-icon>\n                        &nbsp;{{ page.time | dateFromNow }}\n                      </small>\n                      &nbsp;\n                    </ion-text>\n                  </ion-card-subtitle>\n\n                  <!-- main page -->\n                  <ion-card-title class=\"ion-no-margin ion-no-padding\">\n                    <ion-item\n                      detail=\"true\"\n                      tappable\n                      class=\"text-1x\"\n                      [routerLink]=\"page.path\"\n                      routerDirection=\"root\"\n                      lines=\"none\"\n                    >\n                      <!-- page icon-->\n                      <ion-icon *ngIf=\"page.icon\" slot=\"start\" [name]=\"page.icon\"></ion-icon>\n                      <mat-icon *ngIf=\"page.matIcon\" slot=\"start\">{{ page.matIcon }}</mat-icon>\n\n                      <ion-label color=\"primary\" [innerHTML]=\"page.title\"></ion-label>\n                    </ion-item>\n                  </ion-card-title>\n                </ion-card-header>\n\n                <!-- children pages -->\n                @if (page.children | isNotEmptyArray) {\n                  <ion-card-content class=\"ion-no-padding ion-padding-start\">\n                    <ion-list class=\"ion-no-padding\">\n                      @for (childPage of page.children; track childPage.path) {\n                        <ion-item\n                          detail=\"true\"\n                          tappable\n                          class=\"text-1x\"\n                          [routerLink]=\"childPage.path\"\n                          routerDirection=\"root\"\n                        >\n                          <!-- page icon-->\n                          <ion-icon *ngIf=\"childPage.icon\" slot=\"start\" color=\"dark\" [name]=\"childPage.icon\"></ion-icon>\n                          <mat-icon *ngIf=\"childPage.matIcon\" slot=\"start\" color=\"dark\">\n                            {{ childPage.matIcon }}\n                          </mat-icon>\n\n                          <ion-label color=\"dark\" [innerHTML]=\"childPage.title\"></ion-label>\n                        </ion-item>\n                      }\n                    </ion-list>\n                  </ion-card-content>\n                }\n              </ion-card>\n            </ion-col>\n          }\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Bottom banner -->\n    @if (showPartnerBanner || showLegalInformation) {\n      <ion-grid\n        class=\"bottom-banner ion-text-center\"\n        [class.floating]=\"!mobile && (pageHistory | isEmptyArray)\"\n        @fadeInAnimation\n      >\n        <ion-row>\n          <!-- partners logos -->\n          @if (showPartnerBanner) {\n            <ion-col size=\"12\" [sizeLg]=\"partnerBannerSize\" class=\"ion-text-center\">\n              @if (showLegalInformation) {\n                <ion-list class=\"legal-info\">\n                  <ion-list-header>{{ 'HOME.PARTNERS' | translate }}</ion-list-header>\n                </ion-list>\n              }\n              <!-- partners -->\n              @for (item of $partners | async; track $index) {\n                <a href=\"{{ item.siteUrl }}\">\n                  <img class=\"logo\" src=\"{{ item.logo }}\" alt=\"{{ item.label }}\" [title]=\"item.label\" />\n                </a>\n              }\n            </ion-col>\n          }\n\n          <!-- legal information -->\n          @if (showLegalInformation) {\n            <ion-col size=\"12\" size-sm=\"6\" size-lg=\"4\" [class.left-border]=\"showPartnerBanner\">\n              <ion-list class=\"legal-info\">\n                <ion-list-header class=\"ion-text-left\">{{ 'HOME.LEGAL_INFORMATION' | translate }}</ion-list-header>\n                @for (item of legalInformation; track item.path) {\n                  <ion-item (click)=\"openMarkdownModal($event, item)\" lines=\"none\" [button]=\"true\">\n                    <ion-label>\n                      <p>\n                        {{ item.title | translate: item.titleArgs }}\n                      </p>\n                    </ion-label>\n                  </ion-item>\n                }\n              </ion-list>\n            </ion-col>\n            @if (showInstallLinks) {\n              <ion-col size=\"12\" size-lg=\"3\" offset-lg=\"9\" [class.left-border]=\"showPartnerBanner\">\n                <ion-list class=\"legal-info\">\n                  <ion-list-header>{{ 'HOME.INSTALL_APP' | translate }}</ion-list-header>\n                  <!-- TODO -->\n                </ion-list>\n              </ion-col>\n            }\n          }\n        </ion-row>\n      </ion-grid>\n    }\n  }\n\n  <!-- image credits -->\n  @if (contentCredits | isNotNilOrBlank) {\n    <div class=\"content-credits\" [class.floating]=\"!mobile\">\n      <ion-text>{{ contentCredits }}</ion-text>\n    </div>\n  }\n</ion-content>\n", styles: [":host{--ion-card-background-color: rgba(var(--ion-background-color-rgb), .7);--scrollbar-width: 0;--bottom-banner-height: 122px}h1,h2,h3,h4,h5{white-space:normal}.center,ion-content ion-card.welcome img{text-align:center;display:inline-block}ion-content{--background: transparent;background-size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-color:var(--ion-background-color);display:inline-block;padding:15px}ion-content.has-scrollbar{--scrollbar-width: 8px}ion-content .loading-page{display:block;height:100%;width:100%;position:absolute;background-color:transparent;z-index:5;transition:background .5s linear;-webkit-transition:background 1.5s linear}ion-content .loading-page.hidden{background-color:rgba(var(--ion-color-primary),0)}ion-content ion-card{z-index:9;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}ion-content ion-card ion-card-header{display:block}ion-content ion-card ion-card-header ion-card-subtitle,ion-content ion-card ion-card-header ion-card-title{display:block;width:100%}ion-content ion-card.main{min-width:240px;max-width:400px;margin-left:auto;margin-right:auto}ion-content ion-card.welcome{background-color:var(--ion-card-background-color)}ion-content ion-card.welcome button{margin-top:16px}ion-content ion-card.welcome img{max-width:250px}ion-content .history-container{margin-left:auto;margin-right:auto}ion-content .history-container ion-card{display:inline-block;box-sizing:border-box;z-index:8;min-width:240px;max-width:400px;width:100%;margin-left:auto;margin-right:auto;background-color:var(--ion-card-background-color);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}ion-content .history-container ion-card ion-card-header ion-card-subtitle{height:40px}ion-content .history-container ion-card ion-card-header ion-card-subtitle button[float-start]{--mdc-icon-button-state-layer-size: 40px;padding:8px;z-index:99;margin:0}ion-content .history-container ion-card ion-card-header ion-card-subtitle ion-label{line-height:40px}ion-content .history-container ion-card ion-card-header ion-card-subtitle ion-label[float-end]{padding-right:16px;font-weight:400}ion-content .history-container ion-card ion-card-header ion-card-title ion-item{width:100%;--ion-item-background: $transparent;--ion-item-icon-color: var(--ion-color-primary);--ion-item-text-color: var(--ion-color-primary)}ion-content .history-container ion-card ion-card-header ion-card-title ion-item ion-icon[slot=start],ion-content .history-container ion-card ion-card-header ion-card-title ion-item mat-icon[slot=start]{margin-right:unset;margin-inline-end:16px!important;color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor}ion-content .history-container ion-card ion-card-header ion-card-title ion-item ion-text,ion-content .history-container ion-card ion-card-header ion-card-title ion-item ion-label{color:var(--ion-item-text-color)!important;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}ion-content .history-container ion-card ion-card-content ion-list{--ion-item-background: var(--ion-color-transparent)}ion-content .history-container ion-card ion-card-content ion-list ion-item{--ion-item-icon-color: var(--ion-color-dark);--ion-item-text-color: var(--ion-color-dark)}ion-content .history-container ion-card ion-card-content ion-list ion-item ion-icon[slot=start],ion-content .history-container ion-card ion-card-content ion-list ion-item mat-icon[slot=start]{color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor;margin-right:unset;margin-inline-end:16px!important}ion-content .history-container ion-card ion-card-content ion-list ion-item ion-text,ion-content .history-container ion-card ion-card-content ion-list ion-item ion-label{color:var(--ion-item-text-color)!important}ion-content .bottom-banner{--ion-card-background-color: rgba(var(--ion-background-color-rgb), .5);background-color:var(--ion-card-background-color);min-width:240px;z-index:0;border-radius:4px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);margin:16px}ion-content .bottom-banner img.logo{max-height:50px;margin-left:8px}ion-content .bottom-banner ion-list-header{min-height:30px}ion-content .bottom-banner ion-item{--min-height: 28px}ion-content .bottom-banner ion-item ion-label{margin-top:3px!important;margin-bottom:3px!important}ion-content ion-text{text-align:center}@media screen and (max-width: 575px){ion-content ion-card{min-width:160px;width:calc(100% - 20px);max-width:100%;margin-left:10px;margin-right:10px}ion-content ion-card h1{margin-top:0;font-size:20px}ion-content ion-card ion-card-content ion-button{margin-top:8px}ion-content .bottom-banner.floating{display:block;position:unset}ion-content .bottom-banner img.logo{max-height:30px}}@media screen and (max-width: 767px) and (min-width: 576px){ion-content{min-height:555px}ion-content .bottom-banner img.logo{max-height:40px}}@media screen and (min-width: 768px){ion-content{min-height:calc(100% - var(--bottom-banner-height))}}@media screen and (min-width: 1200px){ion-content ion-col.feed{height:fit-content;max-height:calc(100vh - var(--ion-toolbar-height) - var(--bottom-banner-height) - var(--ion-padding) * 2);padding-inline-end:calc(var(--ion-padding) - 10px);overflow:hidden}ion-content .bottom-banner.floating{position:fixed;left:0;right:0;bottom:0;overflow-y:auto;max-height:var(--bottom-banner-height);margin-top:0}}.content-credits{float:right}.content-credits.floating{float:unset;position:fixed;bottom:0;right:var(--scrollbar-width, 0)}.content-credits ion-text{padding-inline-start:4px;padding-inline-end:4px;font-size:.7rem;background-color:rgba(var(--ion-background-color-rgb),.5);color:rgba(var(--ion-text-color-rgb),.7)}@media screen and (min-width: 992px){.left-border{border-left:1px solid var(--ion-color-medium)}}\n"], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$1.IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { kind: "component", type: i2$1.IonMenuToggle, selector: "ion-menu-toggle", inputs: ["autoHide", "menu"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i2$1.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i8$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", "mobile", "showHeader", "showReadMoreButton", "headerColor", "cardColor", "shape", "class", "itemId", "filterItem", "feeds", "urls", "maxAgeInMonths", "maxContentLength"], outputs: ["editItem", "deleteItem"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i19.RxPush, name: "push" }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: DateFromNowPipe, name: "dateFromNow" }, { kind: "pipe", type: NotEmptyArrayPipe, name: "isNotEmptyArray" }, { kind: "pipe", type: EmptyArrayPipe, name: "isEmptyArray" }, { kind: "pipe", type: IsNotNilOrBlankPipe, name: "isNotNilOrBlank" }], animations: [fadeInAnimation, slideUpDownAnimation, slideInAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HomePage, decorators: [{
             type: Component,
-            args: [{ selector: 'app-page-home', changeDetection: ChangeDetectionStrategy.OnPush, animations: [fadeInAnimation, slideUpDownAnimation, slideInAnimation], template: "<app-toolbar [canGoBack]=\"false\" visible-xs visible-sm visible-mobile>\n  <ion-buttons slot=\"end\">\n    @if (showNotificationIcon) {\n      <app-user-event-notification-icon [autoHide]=\"autoHideNotificationIcon\"></app-user-event-notification-icon>\n    }\n\n    <!-- dark mode (if allow by the environment token) -->\n    @if (settings.allowDarkMode) {\n      <ion-button (click)=\"toggleDarkMode()\">\n        <ion-icon slot=\"icon-only\" [name]=\"(darkMode$ | push) ? 'sunny' : 'moon'\"></ion-icon>\n      </ion-button>\n    }\n\n    <!-- Change locale button -->\n    <ion-button [matMenuTriggerFor]=\"localeMenu\">\n      <ion-icon slot=\"start\" name=\"language\"></ion-icon>\n    </ion-button>\n  </ion-buttons>\n</app-toolbar>\n\n<!-- Change locale menu -->\n<mat-menu #localeMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    @for (item of locales; track item.key) {\n      <button mat-menu-item (click)=\"changeLanguage(item.key)\">\n        <!--<mat-icon>{{ currentLocale === item.key ? 'checkmark' : undefined }}</mat-icon>-->\n        <ion-label>{{ item.value }}</ion-label>\n      </button>\n    }\n  </ng-template>\n</mat-menu>\n\n<ion-content [ngStyle]=\"contentStyle\" [class.has-scrollbar]=\"hasScrollbar\" no-padding-xs>\n  <!-- loading spinner -->\n  <div class=\"loading-page\" [class.cdk-visually-hidden]=\"!(loading$ | push)\">\n    @if (showSpinner) {\n      <div class=\"spinner\">\n        <p [innerHTML]=\"'COMMON.LOADING_DOTS' | translate\"></p>\n        <div class=\"sk-cube1 sk-cube\"></div>\n        <div class=\"sk-cube2 sk-cube\"></div>\n        <div class=\"sk-cube4 sk-cube\"></div>\n        <div class=\"sk-cube3 sk-cube\"></div>\n      </div>\n    }\n  </div>\n\n  <!-- Desktop: translucent top toolbar -->\n  @if (!mobile) {\n    <div class=\"hidden-xs hidden-sm\">\n      <ion-toolbar color=\"traansparent\" translucent>\n        <ion-buttons slot=\"start\">\n          <ion-menu-toggle>\n            <ion-button color=\"light\" fill=\"clear\">\n              <ion-icon slot=\"icon-only\" name=\"menu\"></ion-icon>\n            </ion-button>\n          </ion-menu-toggle>\n        </ion-buttons>\n\n        <ion-buttons slot=\"end\">\n          @if (showNotificationIcon) {\n            <app-user-event-notification-icon\n              [style]=\"'ion-button'\"\n              color=\"secondary\"\n              unreadColor=\"tertiary\"\n              fill=\"solid\"\n              [autoHide]=\"autoHideNotificationIcon\"\n            ></app-user-event-notification-icon>\n          }\n\n          <!-- dark mode (if allow by the environment token) -->\n          @if (settings.allowDarkMode) {\n            <ion-button\n              color=\"secondary\"\n              fill=\"solid\"\n              (click)=\"toggleDarkMode()\"\n              [title]=\"'HOME.BTN_DARK_MODE' | translate\"\n            >\n              <ion-icon slot=\"icon-only\" [name]=\"(darkMode$ | push) ? 'moon' : 'sunny'\"></ion-icon>\n            </ion-button>\n          }\n          <!-- change locale button -->\n          <ion-button\n            color=\"secondary\"\n            fill=\"solid\"\n            [matMenuTriggerFor]=\"localeMenu\"\n            [title]=\"'SETTINGS.LOCALE' | translate\"\n          >\n            <ion-icon slot=\"icon-only\" name=\"language\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </div>\n  }\n\n  <!-- Install (and upgrade) card -->\n  <app-install-upgrade-card [isLogin]=\"isLogin\" [showInstallButton]=\"true\"></app-install-upgrade-card>\n\n  @if (!(loading$ | push)) {\n    @let hasFeed = hasFeed$ | async;\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row>\n        <ion-col size=\"0\" [sizeXl]=\"hasFeed ? 3 : 0\"></ion-col>\n        <ion-col>\n          <!-- Welcome card -->\n          <ion-card class=\"main welcome ion-padding ion-text-center ion-align-self-center\" @fadeInAnimation>\n            <ion-card-header>\n              <ion-card-title class=\"ion-text-center\">\n                <span *ngIf=\"isWeb\" [innerHTML]=\"'HOME.WELCOME_WEB' | translate: { appName: appName }\"></span>\n                <span *ngIf=\"!isWeb\" [innerHTML]=\"'HOME.WELCOME_APP' | translate: { appName: appName }\"></span>\n              </ion-card-title>\n              <ion-card-subtitle [innerHTML]=\"description\"></ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content class=\"ion-no-padding\">\n              <ion-text color=\"primary\">\n                <img *ngIf=\"logo\" [attr.src]=\"logo\" alt=\"Logo\" />\n              </ion-text>\n              <!-- register help text -->\n              <ion-text *ngIf=\"!isLogin && canRegister\">\n                <br />\n                <span translate>HOME.REGISTER_HELP</span>\n              </ion-text>\n              <div class=\"ion-padding-top\">\n                <!-- If NOT login -->\n                <ng-container *ngIf=\"!isLogin; else loginButtons\">\n                  <ion-button *ngIf=\"canRegister\" expand=\"block\" color=\"tertiary\" (click)=\"register()\">\n                    <span translate>HOME.BTN_REGISTER</span>\n                  </ion-button>\n                  <ion-button expand=\"block\" color=\"light\" [routerLink]=\"['/']\" (click)=\"login()\">\n                    <span translate>AUTH.BTN_LOGIN</span>\n                  </ion-button>\n                </ng-container>\n\n                <!-- If user login -->\n                <ng-template #loginButtons>\n                  <!-- Feature buttons -->\n                  <ng-container *rxIf=\"$filteredButtons; let buttons\">\n                    <ng-container *ngFor=\"let item of buttons\">\n                      <ion-button\n                        *ngIf=\"item.path\"\n                        expand=\"block\"\n                        color=\"tertiary\"\n                        [class]=\"item.cssClass\"\n                        [routerLink]=\"item.path\"\n                        routerDirection=\"root\"\n                      >\n                        <ion-icon slot=\"start\" class=\"ion-float-start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n                        <mat-icon slot=\"start\" class=\"ion-float-start\" *ngIf=\"item.matIcon\">\n                          {{ item.matIcon }}\n                        </mat-icon>\n                        <ion-text>{{ 'HOME.BTN_DATA_ENTRY' | translate: { name: (item.title | translate) } }}</ion-text>\n                      </ion-button>\n\n                      <!-- divider -->\n                      <div *ngIf=\"!item.path && !item.action\" [class]=\"item.cssClass\">\n                        <ion-label translate>{{ item.title }}&nbsp;</ion-label>\n                      </div>\n                    </ng-container>\n\n                    <!--<p *ngIf=\"buttons.length\" class=\"visible-mobile\">&nbsp;</p>-->\n                  </ng-container>\n\n                  <ion-button *ngIf=\"showAccountButton\" expand=\"block\" color=\"secondary\" [routerLink]=\"['/account']\">\n                    <ion-icon slot=\"start\" class=\"ion-float-start\" name=\"person-circle\"></ion-icon>\n                    <ion-text translate>HOME.BTN_MY_ACCOUNT</ion-text>\n                  </ion-button>\n\n                  <p hidden-xs hidden-sm hidden-mobile>\n                    <ion-text\n                      [innerHTML]=\"'HOME.NOT_THIS_ACCOUNT_QUESTION' | translate: { displayName: accountName }\"\n                    ></ion-text>\n                    <br />\n                    <ion-text>\n                      <a href=\"#\" (click)=\"logout($event)\">\n                        <span translate>HOME.BTN_DISCONNECT</span>\n                      </a>\n                    </ion-text>\n                  </p>\n                </ng-template>\n              </div>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n        <ion-col size=\"0\" [sizeXl]=\"hasFeed ? 1 : 0\"></ion-col>\n        <ion-col [class.feed]=\"hasFeed\" [size]=\"hasFeed ? 12 : 0\" [sizeXl]=\"hasFeed ? 4 : 0\">\n          @if (showFeed) {\n            @if (mobile) {\n              <app-feed\n                #feed\n                shape=\"round\"\n                [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{height:fit-content;max-height:calc(100vh - var(--ion-toolbar-height) - var(--bottom-banner-height) - var(--ion-padding) * 2);padding-inline-end:calc(var(--ion-padding) - 10px);overflow:hidden}ion-content .bottom-banner.floating{position:fixed;left:0;right:0;bottom:0;overflow-y:auto;max-height:var(--bottom-banner-height);margin-top:0}}.content-credits{float:right}.content-credits.floating{float:unset;position:fixed;bottom:0;right:var(--scrollbar-width, 0)}.content-credits ion-text{padding-inline-start:4px;padding-inline-end:4px;font-size:.7rem;background-color:rgba(var(--ion-background-color-rgb),.5);color:rgba(var(--ion-text-color-rgb),.7)}@media screen and (min-width: 992px){.left-border{border-left:1px solid var(--ion-color-medium)}}\n"] }]
+            args: [{ selector: 'app-page-home', changeDetection: ChangeDetectionStrategy.OnPush, animations: [fadeInAnimation, slideUpDownAnimation, slideInAnimation], template: "<app-toolbar [canGoBack]=\"false\" visible-xs visible-sm visible-mobile>\n  <ion-buttons slot=\"end\">\n    @if (showNotificationIcon) {\n      <app-user-event-notification-icon [autoHide]=\"autoHideNotificationIcon\"></app-user-event-notification-icon>\n    }\n\n    <!-- dark mode (if allow by the environment token) -->\n    @if (settings.allowDarkMode) {\n      <ion-button (click)=\"toggleDarkMode()\">\n        <ion-icon slot=\"icon-only\" [name]=\"(darkMode$ | push) ? 'sunny' : 'moon'\"></ion-icon>\n      </ion-button>\n    }\n\n    <!-- Change locale button -->\n    <ion-button [matMenuTriggerFor]=\"localeMenu\">\n      <ion-icon slot=\"start\" name=\"language\"></ion-icon>\n    </ion-button>\n  </ion-buttons>\n</app-toolbar>\n\n<!-- Change locale menu -->\n<mat-menu #localeMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    @for (item of locales; track item.key) {\n      <button mat-menu-item (click)=\"changeLanguage(item.key)\">\n        <!--<mat-icon>{{ currentLocale === item.key ? 'checkmark' : undefined }}</mat-icon>-->\n        <ion-label>{{ item.value }}</ion-label>\n      </button>\n    }\n  </ng-template>\n</mat-menu>\n\n<ion-content [ngStyle]=\"contentStyle\" [class.has-scrollbar]=\"hasScrollbar\" no-padding-xs>\n  <!-- loading spinner -->\n  <div class=\"loading-page\" [class.cdk-visually-hidden]=\"!(loading$ | push)\">\n    @if (showSpinner) {\n      <div class=\"spinner\">\n        <p [innerHTML]=\"'COMMON.LOADING_DOTS' | translate\"></p>\n        <div class=\"sk-cube1 sk-cube\"></div>\n        <div class=\"sk-cube2 sk-cube\"></div>\n        <div class=\"sk-cube4 sk-cube\"></div>\n        <div class=\"sk-cube3 sk-cube\"></div>\n      </div>\n    }\n  </div>\n\n  <!-- Desktop: translucent top toolbar -->\n  @if (!mobile) {\n    <div class=\"hidden-xs hidden-sm\">\n      <ion-toolbar color=\"traansparent\" translucent>\n        <ion-buttons slot=\"start\">\n          <ion-menu-toggle>\n            <ion-button color=\"light\" fill=\"clear\">\n              <ion-icon slot=\"icon-only\" name=\"menu\"></ion-icon>\n            </ion-button>\n          </ion-menu-toggle>\n        </ion-buttons>\n\n        <ion-buttons slot=\"end\">\n          @if (showNotificationIcon) {\n            <app-user-event-notification-icon\n              [style]=\"'ion-button'\"\n              color=\"secondary\"\n              unreadColor=\"tertiary\"\n              fill=\"solid\"\n              [autoHide]=\"autoHideNotificationIcon\"\n            ></app-user-event-notification-icon>\n          }\n\n          <!-- dark mode (if allow by the environment token) -->\n          @if (settings.allowDarkMode) {\n            <ion-button\n              color=\"secondary\"\n              fill=\"solid\"\n              (click)=\"toggleDarkMode()\"\n              [title]=\"'HOME.BTN_DARK_MODE' | translate\"\n            >\n              <ion-icon slot=\"icon-only\" [name]=\"(darkMode$ | push) ? 'moon' : 'sunny'\"></ion-icon>\n            </ion-button>\n          }\n          <!-- change locale button -->\n          <ion-button\n            color=\"secondary\"\n            fill=\"solid\"\n            [matMenuTriggerFor]=\"localeMenu\"\n            [title]=\"'SETTINGS.LOCALE' | translate\"\n          >\n            <ion-icon slot=\"icon-only\" name=\"language\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </div>\n  }\n\n  <!-- Install (and upgrade) card -->\n  <app-install-upgrade-card [isLogin]=\"isLogin\" [showInstallButton]=\"true\"></app-install-upgrade-card>\n\n  @if (!(loading$ | push)) {\n    @let hasFeed = hasFeed$ | async;\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row>\n        <ion-col size=\"0\" [sizeXl]=\"hasFeed ? 3 : 0\"></ion-col>\n        <ion-col>\n          <!-- Welcome card -->\n          <ion-card class=\"main welcome ion-padding ion-text-center ion-align-self-center\" @fadeInAnimation>\n            <ion-card-header>\n              <ion-card-title class=\"ion-text-center\">\n                <span *ngIf=\"isWeb\" [innerHTML]=\"'HOME.WELCOME_WEB' | translate: { appName: appName }\"></span>\n                <span *ngIf=\"!isWeb\" [innerHTML]=\"'HOME.WELCOME_APP' | translate: { appName: appName }\"></span>\n              </ion-card-title>\n              <ion-card-subtitle [innerHTML]=\"description\"></ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content class=\"ion-no-padding\">\n              <ion-text color=\"primary\">\n                <img *ngIf=\"logo\" [attr.src]=\"logo\" alt=\"Logo\" />\n              </ion-text>\n              <!-- register help text -->\n              <ion-text *ngIf=\"!isLogin && canRegister\">\n                <br />\n                <span translate>HOME.REGISTER_HELP</span>\n              </ion-text>\n              <div class=\"ion-padding-top\">\n                <!-- If NOT login -->\n                <ng-container *ngIf=\"!isLogin; else loginButtons\">\n                  <ion-button *ngIf=\"canRegister\" expand=\"block\" color=\"tertiary\" (click)=\"register()\">\n                    <span translate>HOME.BTN_REGISTER</span>\n                  </ion-button>\n                  <ion-button expand=\"block\" color=\"light\" [routerLink]=\"['/']\" (click)=\"login()\">\n                    <span translate>AUTH.BTN_LOGIN</span>\n                  </ion-button>\n                </ng-container>\n\n                <!-- If user login -->\n                <ng-template #loginButtons>\n                  <!-- Feature buttons -->\n                  <ng-container *rxIf=\"$filteredButtons; let buttons\">\n                    <ng-container *ngFor=\"let item of buttons\">\n                      <ion-button\n                        *ngIf=\"item.path\"\n                        expand=\"block\"\n                        color=\"tertiary\"\n                        [class]=\"item.cssClass\"\n                        [routerLink]=\"item.path\"\n                        routerDirection=\"root\"\n                      >\n                        <ion-icon slot=\"start\" class=\"ion-float-start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n                        <mat-icon slot=\"start\" class=\"ion-float-start\" *ngIf=\"item.matIcon\">\n                          {{ item.matIcon }}\n                        </mat-icon>\n                        <ion-text>{{ 'HOME.BTN_DATA_ENTRY' | translate: { name: (item.title | translate) } }}</ion-text>\n                      </ion-button>\n\n                      <!-- divider -->\n                      <div *ngIf=\"!item.path && !item.action\" [class]=\"item.cssClass\">\n                        <ion-label translate>{{ item.title }}&nbsp;</ion-label>\n                      </div>\n                    </ng-container>\n\n                    <!--<p *ngIf=\"buttons.length\" class=\"visible-mobile\">&nbsp;</p>-->\n                  </ng-container>\n\n                  <ion-button *ngIf=\"showAccountButton\" expand=\"block\" color=\"secondary\" [routerLink]=\"['/account']\">\n                    <ion-icon slot=\"start\" class=\"ion-float-start\" name=\"person-circle\"></ion-icon>\n                    <ion-text translate>HOME.BTN_MY_ACCOUNT</ion-text>\n                  </ion-button>\n\n                  <p hidden-xs hidden-sm hidden-mobile>\n                    <ion-text\n                      [innerHTML]=\"'HOME.NOT_THIS_ACCOUNT_QUESTION' | translate: { displayName: accountName }\"\n                    ></ion-text>\n                    <br />\n                    <ion-text>\n                      <a href=\"#\" (click)=\"logout($event)\">\n                        <span translate>HOME.BTN_DISCONNECT</span>\n                      </a>\n                    </ion-text>\n                  </p>\n                </ng-template>\n              </div>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n        <ion-col size=\"0\" [sizeXl]=\"hasFeed ? 1 : 0\"></ion-col>\n        <ion-col [class.feed]=\"hasFeed\" [size]=\"hasFeed ? 12 : 0\" [sizeXl]=\"hasFeed ? 4 : 0\">\n          @if (showFeed) {\n            @if (mobile) {\n              <app-feed\n                #feed\n                shape=\"round\"\n                [urls]=\"feedUrls\"\n                [maxAgeInMonths]=\"feedMaxAgeInMonths\"\n                [maxContentLength]=\"feedMaxContentLength\"\n                (ngInit)=\"initFeed(feed)\"\n                @fadeInAnimation\n              ></app-feed>\n            } @else {\n              <app-feed\n                #feed\n                shape=\"round\"\n                [debug]=\"false\"\n                [urls]=\"feedUrls\"\n                [maxAgeInMonths]=\"feedMaxAgeInMonths\"\n                [maxContentLength]=\"feedMaxContentLength\"\n                (ngInit)=\"initFeed(feed)\"\n                @slideInAnimation\n                @fadeInAnimation\n              ></app-feed>\n            }\n          }\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n    <!-- Page history -->\n    @let pageHistory = isLogin && (pageHistory$ | push);\n    @if (pageHistory | isNotEmptyArray) {\n      <ion-grid class=\"history-container ion-align-self-center\">\n        <ion-row>\n          @for (page of pageHistory; track page.path) {\n            <ion-col size=\"12\" size-xl=\"\" class=\"ion-text-center\">\n              <ion-card class=\"ion-align-self-start ion-text-start\" @fadeInAnimation>\n                <ion-card-header class=\"ion-no-padding\">\n                  <!-- top bar -->\n                  <ion-card-subtitle>\n                    <button\n                      type=\"button\"\n                      tabindex=\"-1\"\n                      (click)=\"removePageHistory(page.path)\"\n                      mat-icon-button\n                      class=\"ion-float-start ion-no-margin close-button\"\n                    >\n                      <mat-icon>close</mat-icon>\n                    </button>\n                    <ion-label [innerHTML]=\"page.subtitle | translate\"></ion-label>\n                    <ion-text class=\"ion-float-end\" [title]=\"page.time | dateFormat: { time: true }\">\n                      <small>\n                        <ion-icon name=\"time-outline\"></ion-icon>\n                        &nbsp;{{ page.time | dateFromNow }}\n                      </small>\n                      &nbsp;\n                    </ion-text>\n                  </ion-card-subtitle>\n\n                  <!-- main page -->\n                  <ion-card-title class=\"ion-no-margin ion-no-padding\">\n                    <ion-item\n                      detail=\"true\"\n                      tappable\n                      class=\"text-1x\"\n                      [routerLink]=\"page.path\"\n                      routerDirection=\"root\"\n                      lines=\"none\"\n                    >\n                      <!-- page icon-->\n                      <ion-icon *ngIf=\"page.icon\" slot=\"start\" [name]=\"page.icon\"></ion-icon>\n                      <mat-icon *ngIf=\"page.matIcon\" slot=\"start\">{{ page.matIcon }}</mat-icon>\n\n                      <ion-label color=\"primary\" [innerHTML]=\"page.title\"></ion-label>\n                    </ion-item>\n                  </ion-card-title>\n                </ion-card-header>\n\n                <!-- children pages -->\n                @if (page.children | isNotEmptyArray) {\n                  <ion-card-content class=\"ion-no-padding ion-padding-start\">\n                    <ion-list class=\"ion-no-padding\">\n                      @for (childPage of page.children; track childPage.path) {\n                        <ion-item\n                          detail=\"true\"\n                          tappable\n                          class=\"text-1x\"\n                          [routerLink]=\"childPage.path\"\n                          routerDirection=\"root\"\n                        >\n                          <!-- page icon-->\n                          <ion-icon *ngIf=\"childPage.icon\" slot=\"start\" color=\"dark\" [name]=\"childPage.icon\"></ion-icon>\n                          <mat-icon *ngIf=\"childPage.matIcon\" slot=\"start\" color=\"dark\">\n                            {{ childPage.matIcon }}\n                          </mat-icon>\n\n                          <ion-label color=\"dark\" [innerHTML]=\"childPage.title\"></ion-label>\n                        </ion-item>\n                      }\n                    </ion-list>\n                  </ion-card-content>\n                }\n              </ion-card>\n            </ion-col>\n          }\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Bottom banner -->\n    @if (showPartnerBanner || showLegalInformation) {\n      <ion-grid\n        class=\"bottom-banner ion-text-center\"\n        [class.floating]=\"!mobile && (pageHistory | isEmptyArray)\"\n        @fadeInAnimation\n      >\n        <ion-row>\n          <!-- partners logos -->\n          @if (showPartnerBanner) {\n            <ion-col size=\"12\" [sizeLg]=\"partnerBannerSize\" class=\"ion-text-center\">\n              @if (showLegalInformation) {\n                <ion-list class=\"legal-info\">\n                  <ion-list-header>{{ 'HOME.PARTNERS' | translate }}</ion-list-header>\n                </ion-list>\n              }\n              <!-- partners -->\n              @for (item of $partners | async; track $index) {\n                <a href=\"{{ item.siteUrl }}\">\n                  <img class=\"logo\" src=\"{{ item.logo }}\" alt=\"{{ item.label }}\" [title]=\"item.label\" />\n                </a>\n              }\n            </ion-col>\n          }\n\n          <!-- legal information -->\n          @if (showLegalInformation) {\n            <ion-col size=\"12\" size-sm=\"6\" size-lg=\"4\" [class.left-border]=\"showPartnerBanner\">\n              <ion-list class=\"legal-info\">\n                <ion-list-header class=\"ion-text-left\">{{ 'HOME.LEGAL_INFORMATION' | translate }}</ion-list-header>\n                @for (item of legalInformation; track item.path) {\n                  <ion-item (click)=\"openMarkdownModal($event, item)\" lines=\"none\" [button]=\"true\">\n                    <ion-label>\n                      <p>\n                        {{ item.title | translate: item.titleArgs }}\n                      </p>\n                    </ion-label>\n                  </ion-item>\n                }\n              </ion-list>\n            </ion-col>\n            @if (showInstallLinks) {\n              <ion-col size=\"12\" size-lg=\"3\" offset-lg=\"9\" [class.left-border]=\"showPartnerBanner\">\n                <ion-list class=\"legal-info\">\n                  <ion-list-header>{{ 'HOME.INSTALL_APP' | translate }}</ion-list-header>\n                  <!-- TODO -->\n                </ion-list>\n              </ion-col>\n            }\n          }\n        </ion-row>\n      </ion-grid>\n    }\n  }\n\n  <!-- image credits -->\n  @if (contentCredits | isNotNilOrBlank) {\n    <div class=\"content-credits\" [class.floating]=\"!mobile\">\n      <ion-text>{{ contentCredits }}</ion-text>\n    </div>\n  }\n</ion-content>\n", styles: [":host{--ion-card-background-color: rgba(var(--ion-background-color-rgb), .7);--scrollbar-width: 0;--bottom-banner-height: 122px}h1,h2,h3,h4,h5{white-space:normal}.center,ion-content ion-card.welcome img{text-align:center;display:inline-block}ion-content{--background: transparent;background-size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-color:var(--ion-background-color);display:inline-block;padding:15px}ion-content.has-scrollbar{--scrollbar-width: 8px}ion-content .loading-page{display:block;height:100%;width:100%;position:absolute;background-color:transparent;z-index:5;transition:background .5s linear;-webkit-transition:background 1.5s linear}ion-content .loading-page.hidden{background-color:rgba(var(--ion-color-primary),0)}ion-content ion-card{z-index:9;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}ion-content ion-card ion-card-header{display:block}ion-content ion-card ion-card-header ion-card-subtitle,ion-content ion-card ion-card-header ion-card-title{display:block;width:100%}ion-content ion-card.main{min-width:240px;max-width:400px;margin-left:auto;margin-right:auto}ion-content ion-card.welcome{background-color:var(--ion-card-background-color)}ion-content ion-card.welcome button{margin-top:16px}ion-content ion-card.welcome img{max-width:250px}ion-content .history-container{margin-left:auto;margin-right:auto}ion-content .history-container ion-card{display:inline-block;box-sizing:border-box;z-index:8;min-width:240px;max-width:400px;width:100%;margin-left:auto;margin-right:auto;background-color:var(--ion-card-background-color);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}ion-content .history-container ion-card ion-card-header ion-card-subtitle{height:40px}ion-content .history-container ion-card ion-card-header ion-card-subtitle button[float-start]{--mdc-icon-button-state-layer-size: 40px;padding:8px;z-index:99;margin:0}ion-content .history-container ion-card ion-card-header ion-card-subtitle ion-label{line-height:40px}ion-content .history-container ion-card ion-card-header ion-card-subtitle ion-label[float-end]{padding-right:16px;font-weight:400}ion-content .history-container ion-card ion-card-header ion-card-title ion-item{width:100%;--ion-item-background: $transparent;--ion-item-icon-color: var(--ion-color-primary);--ion-item-text-color: var(--ion-color-primary)}ion-content .history-container ion-card ion-card-header ion-card-title ion-item ion-icon[slot=start],ion-content .history-container ion-card ion-card-header ion-card-title ion-item mat-icon[slot=start]{margin-right:unset;margin-inline-end:16px!important;color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor}ion-content .history-container ion-card ion-card-header ion-card-title ion-item ion-text,ion-content .history-container ion-card ion-card-header ion-card-title ion-item ion-label{color:var(--ion-item-text-color)!important;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}ion-content .history-container ion-card ion-card-content ion-list{--ion-item-background: var(--ion-color-transparent)}ion-content .history-container ion-card ion-card-content ion-list ion-item{--ion-item-icon-color: var(--ion-color-dark);--ion-item-text-color: var(--ion-color-dark)}ion-content .history-container ion-card ion-card-content ion-list ion-item ion-icon[slot=start],ion-content .history-container ion-card ion-card-content ion-list ion-item mat-icon[slot=start]{color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor;margin-right:unset;margin-inline-end:16px!important}ion-content .history-container ion-card ion-card-content ion-list ion-item ion-text,ion-content .history-container ion-card ion-card-content ion-list ion-item ion-label{color:var(--ion-item-text-color)!important}ion-content .bottom-banner{--ion-card-background-color: rgba(var(--ion-background-color-rgb), .5);background-color:var(--ion-card-background-color);min-width:240px;z-index:0;border-radius:4px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);margin:16px}ion-content .bottom-banner img.logo{max-height:50px;margin-left:8px}ion-content .bottom-banner ion-list-header{min-height:30px}ion-content .bottom-banner ion-item{--min-height: 28px}ion-content .bottom-banner ion-item ion-label{margin-top:3px!important;margin-bottom:3px!important}ion-content ion-text{text-align:center}@media screen and (max-width: 575px){ion-content ion-card{min-width:160px;width:calc(100% - 20px);max-width:100%;margin-left:10px;margin-right:10px}ion-content ion-card h1{margin-top:0;font-size:20px}ion-content ion-card ion-card-content ion-button{margin-top:8px}ion-content .bottom-banner.floating{display:block;position:unset}ion-content .bottom-banner img.logo{max-height:30px}}@media screen and (max-width: 767px) and (min-width: 576px){ion-content{min-height:555px}ion-content .bottom-banner img.logo{max-height:40px}}@media screen and (min-width: 768px){ion-content{min-height:calc(100% - var(--bottom-banner-height))}}@media screen and (min-width: 1200px){ion-content ion-col.feed{height:fit-content;max-height:calc(100vh - var(--ion-toolbar-height) - var(--bottom-banner-height) - var(--ion-padding) * 2);padding-inline-end:calc(var(--ion-padding) - 10px);overflow:hidden}ion-content .bottom-banner.floating{position:fixed;left:0;right:0;bottom:0;overflow-y:auto;max-height:var(--bottom-banner-height);margin-top:0}}.content-credits{float:right}.content-credits.floating{float:unset;position:fixed;bottom:0;right:var(--scrollbar-width, 0)}.content-credits ion-text{padding-inline-start:4px;padding-inline-end:4px;font-size:.7rem;background-color:rgba(var(--ion-background-color-rgb),.5);color:rgba(var(--ion-text-color-rgb),.7)}@media screen and (min-width: 992px){.left-border{border-left:1px solid var(--ion-color-medium)}}\n"] }]
         }], 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]
@@ -34864,11 +35724,11 @@ class FeedPage {
         this.destroySubject.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeedPage, deps: [{ token: LocalSettingsService }, { token: i0.ChangeDetectorRef }, { token: APP_FEED_SERVICE, optional: true }, { token: ENVIRONMENT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FeedPage, selector: "app-feed-page", inputs: { debug: "debug", title: "title", feedUrls: "feedUrls", feedItemId: "feedItemId" }, 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>{{ title | translate }}</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <div class=\"ion-padding\">\n    @if (loadingSubject | async) {\n      <ion-spinner></ion-spinner>\n    } @else {\n      <app-feed [showHeader]=\"false\"\n                [showReadMoreButton]=\"false\"\n                [feedUrls]=\"feedUrls\"\n                cardColor=\"light\"\n                [debug]=\"debug\"\n      ></app-feed>\n    }\n  </div>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { 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: FeedsComponent, selector: "app-feed", inputs: ["debug", "mobile", "showHeader", "showReadMoreButton", "headerColor", "cardColor", "shape", "class", "itemId", "filterItem", "feeds", "feedUrls", "maxAgeInMonths", "maxContentLength"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FeedPage, selector: "app-feed-page", inputs: { debug: "debug", title: "title", feedUrls: "feedUrls", feedItemId: "feedItemId" }, 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>{{ title | translate }}</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <div class=\"ion-padding\">\n    @if (loadingSubject | async) {\n      <ion-spinner></ion-spinner>\n    } @else {\n      <app-feed [showHeader]=\"false\"\n                [showReadMoreButton]=\"false\"\n                [urls]=\"feedUrls\"\n                cardColor=\"light\"\n                [debug]=\"debug\"\n      ></app-feed>\n    }\n  </div>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { 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: FeedsComponent, selector: "app-feed", inputs: ["debug", "mobile", "showHeader", "showReadMoreButton", "headerColor", "cardColor", "shape", "class", "itemId", "filterItem", "feeds", "urls", "maxAgeInMonths", "maxContentLength"], outputs: ["editItem", "deleteItem"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeedPage, decorators: [{
             type: Component,
-            args: [{ selector: 'app-feed-page', changeDetection: ChangeDetectionStrategy.OnPush, 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>{{ title | translate }}</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <div class=\"ion-padding\">\n    @if (loadingSubject | async) {\n      <ion-spinner></ion-spinner>\n    } @else {\n      <app-feed [showHeader]=\"false\"\n                [showReadMoreButton]=\"false\"\n                [feedUrls]=\"feedUrls\"\n                cardColor=\"light\"\n                [debug]=\"debug\"\n      ></app-feed>\n    }\n  </div>\n</ion-content>\n" }]
+            args: [{ selector: 'app-feed-page', changeDetection: ChangeDetectionStrategy.OnPush, 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>{{ title | translate }}</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <div class=\"ion-padding\">\n    @if (loadingSubject | async) {\n      <ion-spinner></ion-spinner>\n    } @else {\n      <app-feed [showHeader]=\"false\"\n                [showReadMoreButton]=\"false\"\n                [urls]=\"feedUrls\"\n                cardColor=\"light\"\n                [debug]=\"debug\"\n      ></app-feed>\n    }\n  </div>\n</ion-content>\n" }]
         }], ctorParameters: () => [{ type: LocalSettingsService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -44334,528 +45194,174 @@ class AppEntityEditor extends AppTabEditor {
         // can be overwritten by subclasses
     }
     computeUsageMode(data) {
-        // can be overwritten by subclasses
-        // Using local settings default value
-        return this.settings.usageMode;
-    }
-    waitWhilePending(opts) {
-        return AppFormUtils.waitWhilePending(this, opts);
-    }
-    async getValue() {
-        const json = await this.getJsonValueToSave();
-        const res = new this.dataType();
-        res.fromObject(json);
-        return res;
-    }
-    getJsonValueToSave() {
-        return Promise.resolve(this.form.value);
-    }
-    /**
-     * Compute the title
-     *
-     * @param data
-     */
-    async updateTitle(data) {
-        data = data || this.data;
-        const title = await this.computeTitle(data);
-        this.titleSubject.next(title);
-        // If NOT data, then add to page history
-        if (!this.isNewData) {
-            const page = await this.computePageHistory(title);
-            if (page)
-                return this.addToPageHistory(page);
-        }
-    }
-    async addToPageHistory(page, opts) {
-        if (!page)
-            return; // Skip
-        return this.settings.addToPageHistory(page, {
-            removePathQueryParams: true,
-            removeTitleSmallTag: true,
-            emitEvent: false,
-            ...opts,
-        });
-    }
-    async computePageHistory(title) {
-        if (this.debug)
-            console.debug('[entity-editor] Computing page history, using url: ' + this.router.url);
-        return {
-            title,
-            path: this.router.url,
-        };
-    }
-    async removePageHistory(opts) {
-        return this.settings.removePageHistory(this.router.url, opts);
-    }
-    computePageUrl(id) {
-        const parentUrl = this.getParentPageUrl();
-        return parentUrl && `${parentUrl}/${id}`;
-    }
-    getParentPageUrl(withQueryParams) {
-        let parentUrl = this.defaultBackHref;
-        // Remove query params
-        if (withQueryParams !== true && parentUrl && parentUrl.indexOf('?') !== -1) {
-            parentUrl = parentUrl.substring(0, parentUrl.indexOf('?'));
-        }
-        return parentUrl;
-    }
-    listenChanges(id, opts) {
-        return this.dataService.listenChanges(this.data.id, {
-            // Make sure to skip cache, because NOT the full graph will be fetched by subscription
-            // When a changes occur, we call reload() to force refetching the full graph
-            fetchPolicy: 'no-cache',
-            ...opts,
-        });
-    }
-    markForCheck() {
-        this.cd.markForCheck();
-    }
-    /**
-     * Update the route, without reloading the component
-     *
-     * @param data
-     * @param queryParams
-     * @protected
-     */
-    async updateRoute(data, queryParams) {
-        data = data || this.data;
-        if (!data || !this.route)
-            return false;
-        const currId = this.route.snapshot.paramMap.get(this.pathIdAttribute);
-        const futureId = isNotNil(data.id) ? data.id.toString() : 'new';
-        if (queryParams) {
-            this.queryParams = {
-                ...this.queryParams,
-                ...queryParams,
-            };
-        }
-        if (currId === futureId) {
-            // Update queryParam only (not the path)
-            // /!\ We should get query Params from the updated route, and not from snapshot that can be outdated
-            const actualQueryParams = await firstNotNilPromise(this.route.queryParams);
-            if (!equals(actualQueryParams, this.queryParams)) {
-                if (this.debug)
-                    console.debug(`${this._logPrefix}Updating route using queryParams: `, this.queryParams);
-                return await this.router.navigate(['.'], {
-                    relativeTo: this.route,
-                    replaceUrl: false,
-                    queryParams: this.queryParams,
-                    state: { animated: false },
-                });
-            }
-        }
-        else {
-            const path = this.computePageUrl(isNotNil(data.id) ? data.id : 'new');
-            const commands = path && typeof path === 'string' ? path.split('/').slice(1) : path;
-            if (isNotEmptyArray(commands)) {
-                // Current route was '/new' => change to '/new?id=:id' (to allow CustomReuseStrategy to detect that route can be reused)
-                if (currId === 'new' && this.queryParams[this.pathIdAttribute] !== futureId) {
-                    if (this.debug)
-                        console.debug(`${this._logPrefix}Updating route /new into /:id, using queryParams: `, queryParams);
-                    this.queryParams[this.pathIdAttribute] = futureId;
-                    const res = await this.router.navigate(['.'], {
-                        relativeTo: this.route,
-                        replaceUrl: true,
-                        queryParams: this.queryParams,
-                        state: { animated: false },
-                    });
-                    if (!res)
-                        return false;
-                }
-                if (this.debug)
-                    console.debug(`${this._logPrefix}Updating route to: ` + path);
-                return await this.router.navigate(commands, {
-                    replaceUrl: true,
-                    queryParams: this.queryParams,
-                    state: { animated: false },
-                });
-            }
-            return Promise.reject('Missing page URL');
-        }
-    }
-    /* -- private functions -- */
-    /**
-     * Open the first tab that is invalid
-     */
-    openFirstInvalidTab() {
-        const invalidTabIndex = this.getFirstInvalidTabIndex();
-        if (invalidTabIndex !== -1 && this.selectedTabIndex !== invalidTabIndex) {
-            this.selectedTabIndex = invalidTabIndex;
-            this.markForCheck();
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppEntityEditor, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: AppEntityEditor, usesInheritance: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppEntityEditor, decorators: [{
-            type: Directive
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: undefined }, { type: undefined }, { type: AppEditorOptions, decorators: [{
-                    type: Optional
-                }] }] });
-
-var PersonFilter_1;
-// @dynamic
-let PersonFilter = class PersonFilter extends EntityFilter {
-    static { PersonFilter_1 = this; }
-    static fromObject;
-    static searchFilter(source) {
-        return source && PersonFilter_1.fromObject(source).asFilterFn();
-    }
-    email;
-    pubkey;
-    searchText;
-    statusIds;
-    userProfiles;
-    includedIds;
-    excludedIds;
-    searchAttribute;
-    searchAttributes;
-    constructor() {
-        super(PersonFilter_1.TYPENAME);
-    }
-    fromObject(source, opts) {
-        super.fromObject(source, opts);
-        this.email = source.email;
-        this.pubkey = source.pubkey;
-        this.searchText = source.searchText;
-        this.statusIds = source.statusIds || (isNotNil(source.statusId) ? [source.statusId] : undefined);
-        this.userProfiles = source.userProfiles;
-        this.excludedIds = source.excludedIds;
-        this.searchAttribute = source.searchAttribute;
-        this.searchAttributes = source.searchAttributes;
-    }
-    asObject(opts) {
-        const target = super.asObject(opts);
-        target.email = this.email;
-        target.pubkey = this.pubkey;
-        target.searchText = this.searchText;
-        target.statusIds = this.statusIds;
-        target.userProfiles = this.userProfiles;
-        target.excludedIds = this.excludedIds;
-        target.searchAttribute = this.searchAttribute;
-        target.searchAttributes = this.searchAttributes;
-        return target;
-    }
-    buildFilter() {
-        const filterFns = super.buildFilter();
-        // Filter by status
-        if (isNotEmptyArray(this.statusIds)) {
-            filterFns.push((e) => this.statusIds.includes(e.statusId));
-        }
-        // Filter included ids
-        const includedIds = this.includedIds;
-        if (isNotEmptyArray(includedIds)) {
-            filterFns.push((e) => isNotNil(e.id) && includedIds.includes(e.id));
-        }
-        // Filter excluded ids
-        const excludedIds = this.excludedIds;
-        if (isNotEmptyArray(excludedIds)) {
-            filterFns.push((e) => isNil(e.id) || !excludedIds.includes(e.id));
-        }
-        // Search text
-        const searchTextFilter = EntityUtils.searchTextFilter(this.searchAttribute || this.searchAttributes || ['lastName', 'firstName', 'department.name'], this.searchText);
-        if (searchTextFilter)
-            filterFns.push(searchTextFilter);
-        return filterFns;
-    }
-};
-PersonFilter = PersonFilter_1 = __decorate([
-    EntityClass({ typename: 'PersonFilterVO' })
-], PersonFilter);
-
-const MessageTypes = {
-    INBOX_MESSAGE: 'INBOX_MESSAGE',
-    EMAIL: 'EMAIL',
-    FEED: 'FEED',
-};
-const MessageTypeList = Object.freeze([
-    {
-        id: MessageTypes.INBOX_MESSAGE,
-        icon: 'notifications',
-        label: 'SOCIAL.MESSAGE.TYPE_ENUM.INBOX_MESSAGE',
-    },
-    {
-        id: MessageTypes.EMAIL,
-        icon: 'mail',
-        label: 'SOCIAL.MESSAGE.TYPE_ENUM.EMAIL',
-    },
-    {
-        id: MessageTypes.FEED,
-        icon: 'megaphone',
-        label: 'SOCIAL.MESSAGE.TYPE_ENUM.FEED',
-    },
-]);
-// @dynamic
-let Message = class Message extends Entity {
-    static fromObject;
-    type;
-    issuer;
-    recipients;
-    recipientFilter;
-    subject;
-    body;
-    constructor() {
-        super();
-    }
-    fromObject(source, opts) {
-        super.fromObject(source, opts);
-        this.type = source.type;
-        this.issuer = source.issuer && Person.fromObject(source.issuer);
-        this.recipients = source.recipients && source.recipients.map(Person.fromObject);
-        this.recipientFilter = (source.recipientFilter && PersonFilter.fromObject(source.recipientFilter)) || undefined;
-        this.subject = source.subject;
-        this.body = source.body;
-    }
-    asObject(opts) {
-        const target = super.asObject(opts);
-        target.recipients = this.recipients && this.recipients.map((p) => p.asObject(opts));
-        target.recipientFilter = (this.recipientFilter && this.recipientFilter.asObject(opts)) || undefined;
-        return target;
-    }
-};
-Message = __decorate([
-    EntityClass({ typename: 'MessageVO' })
-], Message);
-// @dynamic
-let MessageFilter = class MessageFilter extends EntityFilter {
-    static fromObject;
-    fromObject(source, opts) {
-        super.fromObject(source, opts);
-    }
-    buildFilter() {
-        return super.buildFilter();
-    }
-};
-MessageFilter = __decorate([
-    EntityClass({ typename: 'MessageFilterVO' })
-], MessageFilter);
-
-class MessageForm extends AppForm {
-    formBuilder;
-    cd;
-    mobile;
-    suggestFn;
-    subjectMinLength = 5;
-    subjectMaxLength = 255;
-    bodyMaxLength = 2000;
-    bodyAutoHeight = true;
-    canSelectType = false;
-    canRecipientFilter = false;
-    recipientFilterCount = 0;
-    types = MessageTypeList;
-    constructor(injector, formBuilder, cd) {
-        super(injector);
-        this.formBuilder = formBuilder;
-        this.cd = cd;
-        this.mobile = this.settings.mobile;
-    }
-    ngOnInit() {
-        this.setForm(this.formBuilder.group({
-            type: [MessageTypes.INBOX_MESSAGE, Validators.required],
-            recipients: [null, Validators.required],
-            recipientFilter: [null],
-            subject: [
-                null,
-                this.subjectMaxLength
-                    ? Validators.compose([Validators.required, Validators.minLength(this.subjectMinLength), Validators.maxLength(this.subjectMaxLength)])
-                    : Validators.required,
-            ],
-            body: [null, this.bodyMaxLength ? Validators.compose([Validators.maxLength(this.bodyMaxLength)]) : Validators.required],
-        }));
-        this.registerSubscription(this._form
-            .get('type')
-            .valueChanges.pipe(filter(isNotNil))
-            .subscribe((type) => this.updateFormGroup(this._form, { type })));
-        // Person combo
-        const personAttributes = this.settings.getFieldDisplayAttributes('person', ['lastName', 'firstName', 'department.name']);
-        this.registerAutocompleteField('recipients', {
-            showAllOnFocus: false,
-            suggestFn: this.suggestFn,
-            filter: {
-                statusIds: [StatusIds.TEMPORARY, StatusIds.ENABLE],
-            },
-            attributes: personAttributes,
-            columnNames: personAttributes.map((attr) => `USER.${changeCaseToUnderscore(attr).toUpperCase()}`),
-            displayWith: PersonUtils.personToString,
-            multiple: true,
-            mobile: this.mobile,
-        });
-    }
-    isSamePerson(o1, o2) {
-        return EntityUtils.equals(o1, o2, 'id');
-    }
-    updateFormGroup(formGroup, opts) {
-        console.debug('[message-form] Updating form group...', opts);
-        // Recipient validator
-        const recipientsRequired = toBoolean(opts?.recipientRequired, opts?.type !== MessageTypes.FEED);
-        {
-            const control = formGroup.get('recipients');
-            if (recipientsRequired) {
-                if (!control.hasValidator(Validators.required)) {
-                    control.addValidators(Validators.required);
-                }
-                control.enable();
-            }
-            else {
-                if (control.hasValidator(Validators.required)) {
-                    control.removeValidators(Validators.required);
-                }
-                control.disable();
-            }
-        }
-        // Recipient filter validator
-        const recipientFilterRequired = this.canRecipientFilter && !recipientsRequired;
-        {
-            const control = formGroup.get('recipientFilter');
-            if (recipientFilterRequired) {
-                if (!control.hasValidator(Validators.required)) {
-                    control.addValidators(Validators.required);
-                }
-                control.enable();
-            }
-            else {
-                if (control.hasValidator(Validators.required)) {
-                    control.removeValidators(Validators.required);
-                }
-                control.disable();
-            }
-        }
-        formGroup.updateValueAndValidity();
+        // can be overwritten by subclasses
+        // Using local settings default value
+        return this.settings.usageMode;
     }
-    markForCheck() {
-        this.cd.markForCheck();
+    waitWhilePending(opts) {
+        return AppFormUtils.waitWhilePending(this, opts);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MessageForm, deps: [{ token: i0.Injector }, { token: i1$3.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MessageForm, selector: "app-message-form", inputs: { suggestFn: "suggestFn", subjectMinLength: "subjectMinLength", subjectMaxLength: "subjectMaxLength", bodyMaxLength: "bodyMaxLength", bodyAutoHeight: "bodyAutoHeight", canSelectType: "canSelectType", canRecipientFilter: "canRecipientFilter", recipientFilterCount: "recipientFilterCount" }, usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\" class=\"form-container\">\n  <!-- type -->\n  <mat-form-field *ngIf=\"canSelectType\">\n    <mat-label>{{ 'SOCIAL.MESSAGE.TYPE' | translate }}</mat-label>\n    <mat-select formControlName=\"type\">\n      @for (item of types; track item.id) {\n        @if (canRecipientFilter || item.id !== 'FEED') {\n          <mat-option [value]=\"item.id\">\n            <ion-icon [name]=\"item.icon\"></ion-icon>\n            {{ item.label | translate }}\n          </mat-option>\n        }\n      }\n    </mat-select>\n  </mat-form-field>\n\n  <!-- Recipients -->\n  @if ((form | formGetValue: 'type') !== 'FEED') {\n    <mat-chips-field\n      formControlName=\"recipients\"\n      chipColor=\"accent\"\n      [placeholder]=\"'SOCIAL.MESSAGE.RECIPIENTS' | translate\"\n      [config]=\"autocompleteFields.recipients\"\n      [equals]=\"isSamePerson\"\n    ></mat-chips-field>\n  } @else {\n    <mat-form-field>\n      <input matInput hidden formControlName=\"recipients\" type=\"text\" />\n      <mat-chip-grid>\n        <mat-chip-row>\n          {{ 'SOCIAL.MESSAGE.RECIPIENT_FILTER_COUNT' | translate: { count: recipientFilterCount } }}\n        </mat-chip-row>\n      </mat-chip-grid>\n    </mat-form-field>\n  }\n\n  <!-- Subject -->\n  <mat-form-field>\n    <mat-label>{{ 'SOCIAL.MESSAGE.SUBJECT' | translate }}</mat-label>\n    <input matInput type=\"text\" formControlName=\"subject\" autocomplete=\"off\" required />\n    <mat-error *ngIf=\"form.controls.subject.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n    <mat-error *ngIf=\"form.controls.subject.hasError('minlength')\">\n      {{ 'ERROR.FIELD_MIN_LENGTH_COMPACT' | translate }}\n    </mat-error>\n    <mat-error *ngIf=\"form.controls.subject.hasError('maxlength')\">\n      {{ 'ERROR.FIELD_MAX_LENGTH_COMPACT' | translate }}\n    </mat-error>\n    <mat-hint *ngIf=\"subjectMaxLength\" align=\"end\">\n      {{\n        'INFO.TEXT_PROGRESS' | translate: { current: form.controls.subject.value?.length || 0, max: subjectMaxLength }\n      }}\n    </mat-hint>\n  </mat-form-field>\n\n  <!-- Body -->\n  <mat-form-field>\n    <mat-label>{{ 'SOCIAL.MESSAGE.BODY_HELP' | translate }}</mat-label>\n    <textarea\n      matInput\n      type=\"text\"\n      formControlName=\"body\"\n      [class.fixed-height]=\"!bodyAutoHeight\"\n      [cdkTextareaAutosize]=\"bodyAutoHeight\"\n      (keydown.control.enter)=\"doSubmit($event)\"\n    ></textarea>\n    <mat-error *ngIf=\"form.controls.body.hasError('maxlength')\">\n      {{ 'ERROR.FIELD_MAX_LENGTH' | translate: form.controls.body.errors.maxlength }}\n    </mat-error>\n    <mat-hint *ngIf=\"bodyMaxLength\" align=\"end\">\n      {{ 'INFO.TEXT_PROGRESS' | translate: { current: form.controls.body.value?.length || 0, max: bodyMaxLength } }}\n    </mat-hint>\n  </mat-form-field>\n</form>\n", styles: ["textarea.fixed-height{height:11.5em}textarea{min-height:11.5em}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i1$4.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { 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: MatChipsField, selector: "mat-chips-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "placeholder", "suggestFn", "required", "mobile", "readonly", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "itemSize", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "chipColor", "debug", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "hideRequiredMarker", "colSizes", "separatorKeysCodes", "appearance", "subscriptSizing", "class", "filter", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keyup.enter"] }, { kind: "directive", type: AutoResizeDirective, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMaxRows", "cdkAutosizeMinRows"] }, { kind: "component", type: i11$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "component", type: i11$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MessageForm, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-message-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<form [formGroup]=\"form\" class=\"form-container\">\n  <!-- type -->\n  <mat-form-field *ngIf=\"canSelectType\">\n    <mat-label>{{ 'SOCIAL.MESSAGE.TYPE' | translate }}</mat-label>\n    <mat-select formControlName=\"type\">\n      @for (item of types; track item.id) {\n        @if (canRecipientFilter || item.id !== 'FEED') {\n          <mat-option [value]=\"item.id\">\n            <ion-icon [name]=\"item.icon\"></ion-icon>\n            {{ item.label | translate }}\n          </mat-option>\n        }\n      }\n    </mat-select>\n  </mat-form-field>\n\n  <!-- Recipients -->\n  @if ((form | formGetValue: 'type') !== 'FEED') {\n    <mat-chips-field\n      formControlName=\"recipients\"\n      chipColor=\"accent\"\n      [placeholder]=\"'SOCIAL.MESSAGE.RECIPIENTS' | translate\"\n      [config]=\"autocompleteFields.recipients\"\n      [equals]=\"isSamePerson\"\n    ></mat-chips-field>\n  } @else {\n    <mat-form-field>\n      <input matInput hidden formControlName=\"recipients\" type=\"text\" />\n      <mat-chip-grid>\n        <mat-chip-row>\n          {{ 'SOCIAL.MESSAGE.RECIPIENT_FILTER_COUNT' | translate: { count: recipientFilterCount } }}\n        </mat-chip-row>\n      </mat-chip-grid>\n    </mat-form-field>\n  }\n\n  <!-- Subject -->\n  <mat-form-field>\n    <mat-label>{{ 'SOCIAL.MESSAGE.SUBJECT' | translate }}</mat-label>\n    <input matInput type=\"text\" formControlName=\"subject\" autocomplete=\"off\" required />\n    <mat-error *ngIf=\"form.controls.subject.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n    <mat-error *ngIf=\"form.controls.subject.hasError('minlength')\">\n      {{ 'ERROR.FIELD_MIN_LENGTH_COMPACT' | translate }}\n    </mat-error>\n    <mat-error *ngIf=\"form.controls.subject.hasError('maxlength')\">\n      {{ 'ERROR.FIELD_MAX_LENGTH_COMPACT' | translate }}\n    </mat-error>\n    <mat-hint *ngIf=\"subjectMaxLength\" align=\"end\">\n      {{\n        'INFO.TEXT_PROGRESS' | translate: { current: form.controls.subject.value?.length || 0, max: subjectMaxLength }\n      }}\n    </mat-hint>\n  </mat-form-field>\n\n  <!-- Body -->\n  <mat-form-field>\n    <mat-label>{{ 'SOCIAL.MESSAGE.BODY_HELP' | translate }}</mat-label>\n    <textarea\n      matInput\n      type=\"text\"\n      formControlName=\"body\"\n      [class.fixed-height]=\"!bodyAutoHeight\"\n      [cdkTextareaAutosize]=\"bodyAutoHeight\"\n      (keydown.control.enter)=\"doSubmit($event)\"\n    ></textarea>\n    <mat-error *ngIf=\"form.controls.body.hasError('maxlength')\">\n      {{ 'ERROR.FIELD_MAX_LENGTH' | translate: form.controls.body.errors.maxlength }}\n    </mat-error>\n    <mat-hint *ngIf=\"bodyMaxLength\" align=\"end\">\n      {{ 'INFO.TEXT_PROGRESS' | translate: { current: form.controls.body.value?.length || 0, max: bodyMaxLength } }}\n    </mat-hint>\n  </mat-form-field>\n</form>\n", styles: ["textarea.fixed-height{height:11.5em}textarea{min-height:11.5em}\n"] }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$3.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }], propDecorators: { suggestFn: [{
-                type: Input
-            }], subjectMinLength: [{
-                type: Input
-            }], subjectMaxLength: [{
-                type: Input
-            }], bodyMaxLength: [{
-                type: Input
-            }], bodyAutoHeight: [{
-                type: Input
-            }], canSelectType: [{
-                type: Input
-            }], canRecipientFilter: [{
-                type: Input
-            }], recipientFilterCount: [{
-                type: Input
-            }] } });
-
-class MessageModal {
-    settings;
-    viewCtrl;
-    accountService;
-    cd;
-    mobile;
-    suggestFn;
-    data;
-    canSelectType;
-    canRecipientFilter;
-    recipientFilterCount;
-    form;
-    constructor(settings, viewCtrl, accountService, cd) {
-        this.settings = settings;
-        this.viewCtrl = viewCtrl;
-        this.accountService = accountService;
-        this.cd = cd;
-        this.mobile = this.settings.mobile;
+    async getValue() {
+        const json = await this.getJsonValueToSave();
+        const res = new this.dataType();
+        res.fromObject(json);
+        return res;
     }
-    ngOnInit() {
-        this.canSelectType = toBoolean(this.canSelectType, this.accountService.isAdmin());
+    getJsonValueToSave() {
+        return Promise.resolve(this.form.value);
     }
-    ngAfterViewInit() {
-        setTimeout(() => {
-            this.form.markAsReady({ emitEvent: false });
-            if (this.data) {
-                this.data.type = this.data.type || MessageTypes.INBOX_MESSAGE;
-                this.form.setValue(this.data);
-            }
-            this.form.markAsLoaded();
-            this.form.enable();
+    /**
+     * Compute the title
+     *
+     * @param data
+     */
+    async updateTitle(data) {
+        data = data || this.data;
+        const title = await this.computeTitle(data);
+        this.titleSubject.next(title);
+        // If NOT data, then add to page history
+        if (!this.isNewData) {
+            const page = await this.computePageHistory(title);
+            if (page)
+                return this.addToPageHistory(page);
+        }
+    }
+    async addToPageHistory(page, opts) {
+        if (!page)
+            return; // Skip
+        return this.settings.addToPageHistory(page, {
+            removePathQueryParams: true,
+            removeTitleSmallTag: true,
+            emitEvent: false,
+            ...opts,
         });
     }
-    cancel() {
-        this.viewCtrl.dismiss();
+    async computePageHistory(title) {
+        if (this.debug)
+            console.debug('[entity-editor] Computing page history, using url: ' + this.router.url);
+        return {
+            title,
+            path: this.router.url,
+        };
     }
-    async doSubmit() {
-        if (this.form.disabled)
-            return;
-        if (!this.form.valid) {
-            await AppFormUtils.waitWhilePending(this.form);
-            if (this.form.invalid) {
-                AppFormUtils.logFormErrors(this.form.form, '[message-modal] ');
-                this.form.markAllAsTouched();
-                return;
-            }
-        }
-        this.markAsLoading();
-        try {
-            const data = this.form.value;
-            // Disable the form
-            this.form.disable();
-            const entity = Message.fromObject(data);
-            return this.viewCtrl.dismiss(entity);
-        }
-        catch (err) {
-            this.form.error = (err && err.message) || err;
-            this.markAsLoaded();
-            // Enable the form
-            this.form.enable();
-            // Reset form error on next changes
-            firstNotNilPromise(this.form.form.valueChanges).then(() => {
-                this.form.error = null;
-                this.markForCheck();
-            });
-            return;
+    async removePageHistory(opts) {
+        return this.settings.removePageHistory(this.router.url, opts);
+    }
+    computePageUrl(id) {
+        const parentUrl = this.getParentPageUrl();
+        return parentUrl && `${parentUrl}/${id}`;
+    }
+    getParentPageUrl(withQueryParams) {
+        let parentUrl = this.defaultBackHref;
+        // Remove query params
+        if (withQueryParams !== true && parentUrl && parentUrl.indexOf('?') !== -1) {
+            parentUrl = parentUrl.substring(0, parentUrl.indexOf('?'));
         }
+        return parentUrl;
+    }
+    listenChanges(id, opts) {
+        return this.dataService.listenChanges(this.data.id, {
+            // Make sure to skip cache, because NOT the full graph will be fetched by subscription
+            // When a changes occur, we call reload() to force refetching the full graph
+            fetchPolicy: 'no-cache',
+            ...opts,
+        });
     }
     markForCheck() {
         this.cd.markForCheck();
     }
-    markAsLoading(opts) {
-        this.form.markAsLoading(opts);
+    /**
+     * Update the route, without reloading the component
+     *
+     * @param data
+     * @param queryParams
+     * @protected
+     */
+    async updateRoute(data, queryParams) {
+        data = data || this.data;
+        if (!data || !this.route)
+            return false;
+        const currId = this.route.snapshot.paramMap.get(this.pathIdAttribute);
+        const futureId = isNotNil(data.id) ? data.id.toString() : 'new';
+        if (queryParams) {
+            this.queryParams = {
+                ...this.queryParams,
+                ...queryParams,
+            };
+        }
+        if (currId === futureId) {
+            // Update queryParam only (not the path)
+            // /!\ We should get query Params from the updated route, and not from snapshot that can be outdated
+            const actualQueryParams = await firstNotNilPromise(this.route.queryParams);
+            if (!equals(actualQueryParams, this.queryParams)) {
+                if (this.debug)
+                    console.debug(`${this._logPrefix}Updating route using queryParams: `, this.queryParams);
+                return await this.router.navigate(['.'], {
+                    relativeTo: this.route,
+                    replaceUrl: false,
+                    queryParams: this.queryParams,
+                    state: { animated: false },
+                });
+            }
+        }
+        else {
+            const path = this.computePageUrl(isNotNil(data.id) ? data.id : 'new');
+            const commands = path && typeof path === 'string' ? path.split('/').slice(1) : path;
+            if (isNotEmptyArray(commands)) {
+                // Current route was '/new' => change to '/new?id=:id' (to allow CustomReuseStrategy to detect that route can be reused)
+                if (currId === 'new' && this.queryParams[this.pathIdAttribute] !== futureId) {
+                    if (this.debug)
+                        console.debug(`${this._logPrefix}Updating route /new into /:id, using queryParams: `, queryParams);
+                    this.queryParams[this.pathIdAttribute] = futureId;
+                    const res = await this.router.navigate(['.'], {
+                        relativeTo: this.route,
+                        replaceUrl: true,
+                        queryParams: this.queryParams,
+                        state: { animated: false },
+                    });
+                    if (!res)
+                        return false;
+                }
+                if (this.debug)
+                    console.debug(`${this._logPrefix}Updating route to: ` + path);
+                return await this.router.navigate(commands, {
+                    replaceUrl: true,
+                    queryParams: this.queryParams,
+                    state: { animated: false },
+                });
+            }
+            return Promise.reject('Missing page URL');
+        }
     }
-    markAsLoaded(opts) {
-        this.form.markAsLoaded(opts);
+    /* -- private functions -- */
+    /**
+     * Open the first tab that is invalid
+     */
+    openFirstInvalidTab() {
+        const invalidTabIndex = this.getFirstInvalidTabIndex();
+        if (invalidTabIndex !== -1 && this.selectedTabIndex !== invalidTabIndex) {
+            this.selectedTabIndex = invalidTabIndex;
+            this.markForCheck();
+        }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MessageModal, deps: [{ token: LocalSettingsService }, { token: i2$1.ModalController }, { token: AccountService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MessageModal, selector: "app-message-modal", inputs: { suggestFn: "suggestFn", data: "data", canSelectType: "canSelectType", canRecipientFilter: "canRecipientFilter", recipientFilterCount: "recipientFilterCount" }, viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true, static: true }], ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"secondary\">\n    <ion-buttons slot=\"start\">\n      <ion-button class=\"back-button\" (click)=\"cancel()\" visible-xs visible-sm visible-mobile>\n        <ion-icon slot=\"icon-only\" name=\"arrow-back\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n\n    <ion-title>\n      {{ 'SOCIAL.MESSAGE.NEW.TITLE' | translate }}\n    </ion-title>\n\n    <ion-buttons slot=\"end\">\n      <ion-button\n        class=\"back-button\"\n        (click)=\"doSubmit()\"\n        [disabled]=\"!form.valid\"\n        visible-xs\n        visible-sm\n        visible-mobile\n      >\n        <ion-icon slot=\"icon-only\" name=\"checkmark\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n  <ion-item *ngIf=\"form.error\" visible-xs visible-sm visible-mobile lines=\"none\">\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"form.error | translate\"></ion-label>\n  </ion-item>\n\n  <app-message-form\n    #form\n    (onSubmit)=\"doSubmit()\"\n    (onCancel)=\"cancel()\"\n    [canSelectType]=\"canSelectType\"\n    [canRecipientFilter]=\"canRecipientFilter\"\n    [recipientFilterCount]=\"recipientFilterCount\"\n    [suggestFn]=\"suggestFn\"\n  ></app-message-form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <ion-toolbar>\n    <ion-row class=\"ion-no-padding\" nowrap>\n      <ion-col></ion-col>\n\n      <!-- buttons -->\n      <ion-col size=\"auto\">\n        <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n\n        <ion-button\n          [fill]=\"form.invalid ? 'clear' : 'solid'\"\n          [disabled]=\"form.loading || form.invalid\"\n          (keyup.enter)=\"doSubmit()\"\n          (click)=\"doSubmit()\"\n          color=\"tertiary\"\n        >\n          <ion-label translate>COMMON.BTN_SEND</ion-label>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n</ion-footer>\n", dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { 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: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: MessageForm, selector: "app-message-form", inputs: ["suggestFn", "subjectMinLength", "subjectMaxLength", "bodyMaxLength", "bodyAutoHeight", "canSelectType", "canRecipientFilter", "recipientFilterCount"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppEntityEditor, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: AppEntityEditor, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MessageModal, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-message-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-header>\n  <ion-toolbar color=\"secondary\">\n    <ion-buttons slot=\"start\">\n      <ion-button class=\"back-button\" (click)=\"cancel()\" visible-xs visible-sm visible-mobile>\n        <ion-icon slot=\"icon-only\" name=\"arrow-back\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n\n    <ion-title>\n      {{ 'SOCIAL.MESSAGE.NEW.TITLE' | translate }}\n    </ion-title>\n\n    <ion-buttons slot=\"end\">\n      <ion-button\n        class=\"back-button\"\n        (click)=\"doSubmit()\"\n        [disabled]=\"!form.valid\"\n        visible-xs\n        visible-sm\n        visible-mobile\n      >\n        <ion-icon slot=\"icon-only\" name=\"checkmark\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n  <ion-item *ngIf=\"form.error\" visible-xs visible-sm visible-mobile lines=\"none\">\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"form.error | translate\"></ion-label>\n  </ion-item>\n\n  <app-message-form\n    #form\n    (onSubmit)=\"doSubmit()\"\n    (onCancel)=\"cancel()\"\n    [canSelectType]=\"canSelectType\"\n    [canRecipientFilter]=\"canRecipientFilter\"\n    [recipientFilterCount]=\"recipientFilterCount\"\n    [suggestFn]=\"suggestFn\"\n  ></app-message-form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <ion-toolbar>\n    <ion-row class=\"ion-no-padding\" nowrap>\n      <ion-col></ion-col>\n\n      <!-- buttons -->\n      <ion-col size=\"auto\">\n        <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n\n        <ion-button\n          [fill]=\"form.invalid ? 'clear' : 'solid'\"\n          [disabled]=\"form.loading || form.invalid\"\n          (keyup.enter)=\"doSubmit()\"\n          (click)=\"doSubmit()\"\n          color=\"tertiary\"\n        >\n          <ion-label translate>COMMON.BTN_SEND</ion-label>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n</ion-footer>\n" }]
-        }], ctorParameters: () => [{ type: LocalSettingsService }, { type: i2$1.ModalController }, { type: AccountService }, { type: i0.ChangeDetectorRef }], propDecorators: { suggestFn: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }], canSelectType: [{
-                type: Input
-            }], canRecipientFilter: [{
-                type: Input
-            }], recipientFilterCount: [{
-                type: Input
-            }], form: [{
-                type: ViewChild,
-                args: ['form', { static: true }]
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppEntityEditor, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: undefined }, { type: undefined }, { type: AppEditorOptions, decorators: [{
+                    type: Optional
+                }] }] });
 
 class MessageModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MessageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: MessageModule, declarations: [MessageModal, MessageForm], imports: [CommonModule, CoreModule, SharedModule, MatChipsModule], exports: [MessageModal] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MessageModule, imports: [CommonModule, CoreModule, SharedModule, MatChipsModule] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: MessageModule, declarations: [MessageModal, MessageForm], imports: [CommonModule, CoreModule, SharedModule, MatChipsModule, SharedDebugModule], exports: [MessageModal] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MessageModule, imports: [CommonModule, CoreModule, SharedModule, MatChipsModule, SharedDebugModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MessageModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, CoreModule, SharedModule, MatChipsModule],
+                    imports: [CommonModule, CoreModule, SharedModule, MatChipsModule, SharedDebugModule],
                     declarations: [MessageModal, MessageForm],
                     exports: [MessageModal],
                 }]
@@ -45283,271 +45789,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
-const Mutations = {
-    send: gql$1 `
-    mutation SendMessage($data: MessageVOInput) {
-      done: sendMessage(message: $data)
-    }
-  `,
-};
-class MessageService extends BaseGraphqlService {
-    graphql;
-    translate;
-    modalCtrl;
-    toastController;
-    environment;
-    constructor(graphql, translate, modalCtrl, toastController, environment) {
-        super(graphql, environment);
-        this.graphql = graphql;
-        this.translate = translate;
-        this.modalCtrl = modalCtrl;
-        this.toastController = toastController;
-        this.environment = environment;
-        // For DEV only
-        this._debug = !environment.production;
-    }
-    /**
-     * Send a message to recipient(s)
-     *
-     * @param entity
-     * @param opts
-     */
-    async send(entity, opts) {
-        // Transform into json
-        const data = entity.asObject(MINIFY_ENTITY_FOR_POD);
-        const now = Date.now();
-        if (this._debug)
-            console.debug(`[message-service] Sending message...`);
-        try {
-            const { done } = await this.graphql.mutate({
-                mutation: Mutations.send,
-                variables: { data },
-                error: { code: SocialErrorCodes.SEND_MESSAGE_ERROR, message: 'SOCIAL.ERROR.SEND_MESSAGE_ERROR' },
-            });
-            if (this._debug)
-                console.debug(`[message-service] Send message [OK] in ${Date.now() - now}ms`);
-            if (done && (!opts || opts.showToast !== false)) {
-                await this.showToast({ type: 'info', message: 'SOCIAL.INFO.MESSAGE_SENT' });
-            }
-            return done;
-        }
-        catch (err) {
-            const error = (err && err.message) || err;
-            console.error(error);
-            // Show error
-            if (!opts || opts.showToast !== false) {
-                const message = error || 'SOCIAL.ERROR.SEND_MESSAGE_ERROR';
-                await this.showToast({ type: 'error', message });
-            }
-            return false;
-        }
-    }
-    async openComposeModal(options) {
-        const hasTopModal = !!(await this.modalCtrl.getTop());
-        const modal = await this.modalCtrl.create({
-            component: MessageModal,
-            componentProps: options,
-            cssClass: hasTopModal && 'stack-modal',
-        });
-        // Open the modal
-        await modal.present();
-        // On dismiss
-        const { data } = await modal.onDidDismiss();
-        if (!data || !(data instanceof Message))
-            return true; // CANCELLED
-        // Send message
-        return await this.send(data, { showToast: options?.showToast });
-    }
-    /* -- protected methods -- */
-    async showToast(opts) {
-        return Toasts.show(this.toastController, this.translate, {
-            type: 'info',
-            message: 'SOCIAL.INFO.MESSAGE_SENT',
-            ...opts,
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MessageService, deps: [{ token: GraphqlService }, { token: i1$1.TranslateService }, { token: i2$1.ModalController }, { token: i2$1.ToastController }, { token: ENVIRONMENT, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MessageService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MessageService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: GraphqlService }, { type: i1$1.TranslateService }, { type: i2$1.ModalController }, { type: i2$1.ToastController }, { type: Environment, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [ENVIRONMENT]
-                }] }] });
-
-const PersonFragments = {
-    person: gql$1 `
-    fragment PersonFragment on PersonVO {
-      id
-      firstName
-      lastName
-      email
-      pubkey
-      avatar
-      statusId
-      updateDate
-      creationDate
-      profiles
-      username
-      usernameExtranet
-      department {
-        id
-        label
-        name
-        logo
-        __typename
-      }
-      __typename
-    }
-  `,
-};
-// Load persons query
-const PersonQueries = {
-    loadAll: gql$1 `
-    query Persons($offset: Int, $size: Int, $sortBy: String, $sortDirection: String, $filter: PersonFilterVOInput) {
-      data: persons(filter: $filter, offset: $offset, size: $size, sortBy: $sortBy, sortDirection: $sortDirection) {
-        ...PersonFragment
-      }
-    }
-    ${PersonFragments.person}
-  `,
-    loadAllWithTotal: gql$1 `
-    query PersonsWithTotal($offset: Int, $size: Int, $sortBy: String, $sortDirection: String, $filter: PersonFilterVOInput) {
-      data: persons(filter: $filter, offset: $offset, size: $size, sortBy: $sortBy, sortDirection: $sortDirection) {
-        ...PersonFragment
-      }
-      total: personsCount(filter: $filter)
-    }
-    ${PersonFragments.person}
-  `,
-};
-const PersonMutations = {
-    saveAll: gql$1 `
-    mutation savePersons($data: [PersonVOInput]) {
-      data: savePersons(persons: $data) {
-        ...PersonFragment
-      }
-    }
-    ${PersonFragments.person}
-  `,
-    deleteAll: gql$1 `
-    mutation deletePersons($ids: [Int]) {
-      deletePersons(ids: $ids)
-    }
-  `,
-};
-class PersonService extends BaseEntityService {
-    graphql;
-    platform;
-    network;
-    entities;
-    constructor(graphql, platform, network, entities) {
-        super(graphql, platform, Person, PersonFilter, {
-            queries: PersonQueries,
-            mutations: PersonMutations,
-            defaultSortBy: 'lastName',
-            defaultSortDirection: 'asc',
-        });
-        this.graphql = graphql;
-        this.platform = platform;
-        this.network = network;
-        this.entities = entities;
-        // for DEV only -----
-        this._debug = !environment.production;
-    }
-    async loadAll(offset, size, sortBy, sortDirection, filter, opts) {
-        const offline = this.network.offline && (!opts || opts.fetchPolicy !== 'network-only');
-        if (offline) {
-            return this.loadAllLocally(offset, size, sortBy, sortDirection, filter, opts);
-        }
-        return super.loadAll(offset, size, sortBy, sortDirection, filter, opts);
-    }
-    async loadAllLocally(offset, size, sortBy, sortDirection, filter, opts) {
-        filter = this.asFilter(filter);
-        const variables = {
-            offset: offset || 0,
-            size: size || 100,
-            sortBy: sortBy || this.defaultSortBy,
-            sortDirection: sortDirection || this.defaultSortDirection,
-            filter: filter && filter.asFilterFn(),
-        };
-        const { data, total } = await this.entities.loadAll('PersonVO', variables);
-        const entities = this.fromObjects(data, opts);
-        const res = { data: entities, total };
-        // Add fetch more function
-        const nextOffset = (offset || 0) + entities.length;
-        if (nextOffset < total) {
-            res.fetchMore = () => this.loadAllLocally(nextOffset, size, sortBy, sortDirection, filter, opts);
-        }
-        return res;
-    }
-    async suggest(value, filter, sortBy, sortDirection, opts) {
-        if (EntityUtils.isNotEmpty(value, 'id'))
-            return { data: [value] };
-        value = (typeof value === 'string' && value !== '*' && value) || undefined;
-        sortBy = sortBy || filter.searchAttribute || (filter.searchAttributes && filter.searchAttributes[0]);
-        return this.loadAll(0, !value ? 30 : 10, sortBy, sortDirection, {
-            ...filter,
-            searchText: value,
-            statusIds: (filter && filter.statusIds) || [StatusIds.ENABLE, StatusIds.TEMPORARY],
-            userProfiles: filter && filter.userProfiles,
-        }, {
-            withTotal: true /* need by autocomplete */,
-            ...opts,
-        });
-    }
-    async executeImport(filter, opts) {
-        const maxProgression = (opts && opts.maxProgression) || 100;
-        filter = {
-            ...filter,
-            statusIds: [StatusIds.ENABLE, StatusIds.TEMPORARY],
-            userProfiles: ['SUPERVISOR', 'USER', 'GUEST'],
-        };
-        console.info('[person-service] Importing persons...');
-        const res = await JobUtils.fetchAllPages((offset, size) => this.loadAll(offset, size, 'id', null, filter, {
-            debug: false,
-            fetchPolicy: 'network-only',
-            withTotal: offset === 0, // Compute total only once
-            toEntity: false,
-        }), { progression: opts?.progression, maxProgression: maxProgression * 0.9 });
-        // Save result locally
-        await this.entities.saveAll(res.data, { entityName: 'PersonVO', reset: true });
-    }
-    async loadById(id, opts) {
-        const { data } = await this.loadAll(0, 1, null, null, { includedIds: [id] }, { withTotal: false, ...opts });
-        const source = isNotEmptyArray(data) ? data[0] : { id };
-        return this.fromObject(source, opts);
-    }
-    async loadByPubkey(pubkey, opts) {
-        const { data } = await this.loadAll(0, 1, null, null, { pubkey }, { withTotal: false, ...opts });
-        const source = isNotEmptyArray(data) ? data[0] : { pubkey };
-        return this.fromObject(source, opts);
-    }
-    /* -- protected methods -- */
-    asObject(source) {
-        if (!source)
-            return undefined;
-        if (!(source instanceof Person)) {
-            source = Person.fromObject(source);
-        }
-        const target = source.asObject();
-        // Not known in server GraphQL schema
-        delete target.mainProfile;
-        target.department = source.department?.asObject();
-        return target;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PersonService, deps: [{ token: GraphqlService }, { token: PlatformService }, { token: NetworkService }, { token: EntitiesStorage }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PersonService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PersonService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: GraphqlService }, { type: PlatformService }, { type: NetworkService }, { type: EntitiesStorage }] });
-
 class UsersPage extends AppTable {
     accountService;
     validatorService;
@@ -50149,11 +50390,11 @@ 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", "mobile", "showHeader", "showReadMoreButton", "headerColor", "cardColor", "shape", "class", "itemId", "filterItem", "feeds", "feedUrls", "maxAgeInMonths", "maxContentLength"] }], 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      [urls]=\"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", "mobile", "showHeader", "showReadMoreButton", "headerColor", "cardColor", "shape", "class", "itemId", "filterItem", "feeds", "urls", "maxAgeInMonths", "maxContentLength"], outputs: ["editItem", "deleteItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeedTestingPage, decorators: [{
             type: Component,
-            args: [{ selector: 'app-feed-test', changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
+            args: [{ selector: 'app-feed-test', changeDetection: ChangeDetectionStrategy.OnPush, 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      [urls]=\"feedUrls\"\n      [headerColor]=\"headerColor\"\n      [cardColor]=\"cardColor\"\n      [shape]=\"shape\"\n      [debug]=\"debug\"\n    ></app-feed>\n  </div>\n</ion-content>\n" }]
         }], ctorParameters: () => [{ type: LocalSettingsService }, { type: i0.ChangeDetectorRef }, { type: Environment, decorators: [{
                     type: Optional
                 }, {
@@ -50268,5 +50509,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { APP_ABOUT_DEVELOPERS, APP_ABOUT_PARTNERS, APP_CONFIG_OPTIONS, APP_DEBUG_DATA_SERVICE, APP_FEED_SERVICE, APP_FORM_ERROR_I18N_KEYS, APP_GRAPHQL_FRAGMENTS, APP_GRAPHQL_TYPE_POLICIES, APP_HOME_BUTTONS, APP_HOME_CONFIG, APP_HOTKEYS_CONFIG, APP_JOB_PROGRESSION_SERVICE, APP_LOCALES, APP_LOCAL_SETTINGS, APP_LOCAL_SETTINGS_OPTIONS, APP_LOCAL_STORAGE_TYPE_POLICIES, APP_LOGGING_SERVICE, APP_MENU_ITEMS, APP_MENU_OPTIONS, APP_NAMED_FILTER_SERVICE, APP_PROGRESS_BAR_SERVICE, APP_SETTINGS_MENU_ITEMS, APP_STORAGE, APP_STORAGE_EXPLORER_PROTECTED_KEYS, APP_TESTING_PAGES, APP_USER_EVENT_LIST_INFINITE_SCROLL_THRESHOLD, APP_USER_EVENT_SERVICE, APP_USER_SETTINGS_OPTIONS, APP_USER_TOKEN_SCOPES, AboutModal, AbstractNamedFilterService, AbstractSelectionModelPipe, AbstractTableSelectionPipe, AbstractUserEventService, Account, AccountPage, AccountService, AccountToStringPipe, AccountUtils, ActionsColumnComponent, AdminModule, AdminRoutingModule, AdminUsersModule, Alerts, AndroidOsEnvironment, AppAboutModalModule, AppAccountModule, AppAsyncTable, AppAuthForm, AppAuthModal, AppAuthModule, AppChangePasswordModule, AppChangePasswordPage, AppEditor, AppEditorOptions, AppEntityEditor, AppEntityEditorModal, AppEntityEditorModalOptions, AppEntityFormModule, AppForm, AppFormArray, AppFormButtonsBarModule, AppFormContainer, AppFormField, AppFormModule, AppFormProvider, AppFormUtils, AppGestureConfig, AppGraphQLModule, AppHomePageModule, AppIconComponent, AppIconModule, AppImageGalleryComponent, AppInMemoryTable, AppInstallUpgradeCard, AppInstallUpgradeCardModule, AppListForm, AppListFormModule, AppLoadingSpinner, AppMarkdownContent, AppMarkdownModal, AppMenuModule, AppNullForm, AppPropertiesForm, AppPropertiesFormModule, AppPropertiesTable, AppPropertiesUtils, AppPropertyUtils, AppRegisterModule, AppResetPasswordModal, AppRowField, AppSelectPeerModule, AppSettingsPageModule, AppTabEditor, AppTabEditorOptions, AppTable, AppTableModule, AppTableUtils, AppTextPopoverModule, AppUpdateOfflineModeCard, AppUpdateOfflineModeCardModule, AppValidatorService, AppendQueryParamsPipePipe, ArrayDistinctPipe, ArrayFilterPipe, ArrayFindByPropertyPipe, ArrayFirstPipe, ArrayFormTestPage, ArrayIncludesPipe, ArrayJoinPipe, ArrayLastPipe, ArrayLengthPipe, ArrayMapPipe, ArrayPluckPipe, ArraySortPipe, AsAnyPipe, AsArrayPipe, AsBooleanPipe, AsFloatLabelTypePipe, AsObservablePipe, AudioProvider, AudioTestingModule, AudioTestingPage, AuthGuardService, AutoResizeDirective, AutoTitleDirective, AutocompleteTestPage, AutofocusDirective, BadgeDirective, BadgeNumberPipe, Base58, BaseEntityService, BaseGraphqlService, BaseGraphqlServiceOptions, BaseReferential, Beans, BooleanFormatPipe, BooleanTestPage, CORE_CONFIG_OPTIONS, CORE_TESTING_PAGES, CapitalizePipe, CellValueChangeListener, ChangePasswordForm, ChipsTestPage, Color, ColorScale, ComponentDirtyGuard, ConfigFragments, ConfigService, Configuration, CoreModule, CorePipesModule, CoreTestingModule, CryptoService, CsvUtils, DATE_ISO_PATTERN, DATE_MATCH_REGEXP, DATE_PATTERN, DATE_UNIX_MS_TIMESTAMP, DATE_UNIX_TIMESTAMP, DEFAULT_JOIN_ARRAY_VALUES_SEPARATOR, DEFAULT_JOIN_PROPERTIES_SEPARATOR, DEFAULT_MENU_SHOW_WHEN, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLACEHOLDER_CHAR, DEFAULT_REQUIRED_COLUMNS, DateDiffDurationPipe, DateFormatPipe, DateFormatService, DateFromNowPipe, DateShortTestPage, DateTestPage, DateTimeTestPage, DateUtils, DebugComponent, Department, DepartmentToStringPipe, DisplayWithPipe, DragAndDropDirective, DurationPipe, DurationTestPage, ED25519_SEED_LENGTH, EMPTY_PLACEHOLDER_CHAR, EMPTY_PLACEHOLDER_CHAR_REGEXP_GLOBAL, ENTITIES_STORAGE_KEY_PREFIX, ENVIRONMENT, EmptyArrayPipe, EntitiesAsyncTableDataSource, EntitiesStorage, EntitiesTableDataSource, Entity, EntityClass, EntityClasses, EntityFilter, EntityFilterUtils, EntityMetadataComponent, EntityStore, EntityUtils, Environment, EnvironmentHttpLoader, EnvironmentLoader, ErrorCodes, EvenPipe, FeedDirective, FeedModule, FeedPage, FeedService, FeedsComponent, FileResponse, FileService, FileSizePipe, FilesUtils, FirstFalsePipe, FirstPipe, FirstTruePipe, FormArrayHelper, FormArrayTestModule, FormButtonsBarComponent, FormButtonsBarToken, FormErrorPipe, FormErrorTranslatePipe, FormErrorTranslator, FormFieldDefinitionUtils, FormFieldValuesHolder, FormGetArrayPipe, FormGetControlPipe, FormGetGroupPipe, FormGetPipe, FormGetValuePipe, GalleryTestPage, GeolocationUtils, GraphqlService, HAMMER_PRESS_TIME, HAMMER_TAP_TIME, HighlightPipe, HomePage, Hotkeys, HotkeysDialogComponent, IMAGE_DEFAULTS, IPosition, ImageAttachment, ImageAttachmentFilter, ImageAttachmentService, ImageGalleryModule, ImageGalleryTestingModule, ImageModule, ImageService, ImagesUtils, InMemoryEntitiesService, IsAllSelectedPipe, IsEmptySelectionPipe, IsLoginAccountPipe, IsMultipleSelectionPipe, IsNilOrBlankPipe, IsNilOrNaNPipe, IsNilPipe, IsNotAllSelectedPipe, IsNotEmptySelectionPipe, IsNotNilOrBlankPipe, IsNotNilOrNaNPipe, IsNotNilPipe, IsOnDeskPipe, IsOnFieldPipe, IsSelectedPipe, IsSingleSelectionPipe, IsValidDatePipe, JobModule, JobProgression, JobProgressionComponent, JobProgressionIcon, JobProgressionList, JobProgressionService, JobProgressionTestService, JobProgressionTestingPage, JobTestingModule, JobUtils, JsonFeedUtils, JsonUtils, KEYBOARD_HIDE_DELAY_MS, LAT_LONG_PATTERNS, LAT_LONG_PATTERN_MAX_DECIMALS, LAT_LONG_VALUE_MAX_DECIMALS, LatLongFormatPipe, LatLongTestPage, LatitudeFormatPipe, LocalSettingsService, LogLevel, LogUtils, Logger, LoggingService, LoggingServiceModule, LongitudeFormatPipe, MASKS, MASK_RANGES, MAT_FORM_FIELD_DEFAULT_APPEARANCE, MAT_FORM_FIELD_DEFAULT_SUBSCRIPT_SIZING, MINIFY_ENTITY_FOR_LOCAL_STORAGE, MINIFY_ENTITY_FOR_POD, MOMENT_NO_TIME_PROPERTY, MapGetPipe, MapKeysPipe, MapPipe, MapToPipe, MapValuesPipe, MarkdownDirective, MarkdownService, MarkdownTestPage, MarkdownTestingModule, MarkdownUtils, MaskitoPlaceholderPipe, MaskitoTestPage, MatAutocompleteConfigHolder, MatAutocompleteField, MatAutocompleteFieldUtils, MatBadgeTestPage, MatBooleanField, MatChipsField, MatColorPipe, MatCommonTestPage, MatDate, MatDateShort, MatDateTime, MatDuration, MatLatLongField, MatLatLongFieldInput, MatPaginatorI18n, MatStepperI18n, MatSwipeField, MaterialTestingModule, MathAbsPipe, MenuComponent, MenuItem, MenuItems, MenuOptions, MenuService, MenuTestingModule, MenuTestingPage, Message, MessageFilter, MessageForm, MessageModal, MessageModule, MessageService, MessageTypeList, MessageTypes, MimeTypes, ModalToolbarComponent, NETWORK_DEFAULT_CONNECTION_TIMEOUT, NOOP_ITEM_FILTER, NamedFilter, NamedFilterFilter, NamedFilterSelector, NamedFilterSelectorTestingModule, NamedFilterSelectorTestingPage, NavActionsColumnComponent, NetworkService, NetworkUtils, NewTokenForm, NewTokenModal, NgInitDirective, NgVarDirective, NoHtmlPipe, NotEmptyArrayPipe, NumberFormatPipe, ObservableTestPage, OddPipe, OtherMenuTestingPage, PEER_URL_REGEXP, PLUS_PLACEHOLDER_CHAR_REGEXP_GLOBAL, PRINT_ID_QUERY_PARAM, PRINT_LOADING_STORAGE_KEY_PREFIX, PRIORITIZED_AUTHORITIES, PUBKEY_REGEXP, Peer, Person, PersonFilter, PersonFragments, PersonService, PersonToStringPipe, PersonUtils, PersonValidatorService, PlatformService, PrintService, ProgressBarService, ProgressInterceptor, PropertiesFormTestPage, PropertiesFormTestingModule, PropertyEntity, PropertyEntityFilter, PropertyEntityValidator, PropertyFormatPipe, PropertyGetPipe, RESERVED_END_COLUMNS, RESERVED_START_COLUMNS, Referential, ReferentialFilter, ReferentialRef, ReferentialToStringPipe, ReferentialUtils, ReferentialValidatorService, RegExpUtils, RegisterConfirmPage, RegisterForm, RegisterModal, ResizableComponent, ResizableDirective, ResizableModule, RoundPipe, RxStateComputed, RxStateModule, RxStateProperty, RxStateRegister, RxStateSelect, SCRYPT_PARAMS, SETTINGS_COMPACT_ROWS, SETTINGS_DISPLAY_COLUMNS, SETTINGS_FILTER, SETTINGS_PAGE_SIZE, SETTINGS_SORTED_COLUMN, SETTINGS_STORAGE_KEY, SETTINGS_TRANSIENT_PROPERTIES, SHARED_MATERIAL_TESTING_PAGES, SHARED_STORAGE_TESTING_PAGES, SHARED_TESTING_PAGES, SOCIAL_CONFIG_OPTIONS, SOCIAL_TESTING_PAGES, SPACE_PLACEHOLDER_CHAR, SPACE_PLACEHOLDER_CHAR_REGEXP_GLOBAL, SafeHtmlPipe, SafeStylePipe, SelectPeerModal, SelectionLengthPipe, ServerErrorCodes, SettingsPage, SharedAsyncValidators, SharedBadgeModule, SharedDebugModule, SharedDirectivesModule, SharedFormArrayValidators, SharedFormGroupValidators, SharedHotkeysModule, SharedMarkdownModule, SharedMatAutocompleteModule, SharedMatBooleanModule, SharedMatChipsModule, SharedMatDateTimeModule, SharedMatDurationModule, SharedMatLatLongModule, SharedMatSwipeModule, SharedMaterialModule, SharedModule, SharedNamedFilterModule, SharedPipesModule, SharedRoutingModule, SharedTestingModule, SharedTestsPage, SharedTextFormModule, SharedToolbarModule, SharedValidators, SocialErrorCodes, SocialModule, SocialModuleOptionsToken, SocialTestingModule, Software, SplitArrayInChunksPipe, StartableService, StatusById, StatusIds, StatusList, StorageDrivers, StorageExplorerComponent, StorageExplorerModule, StorageExplorerTestingModule, StorageExplorerTestingRoutingModule, StorageService, StrIncludesPipe, StrLengthPipe, StrReplacePipe, SubMenuTabDirective, SwipeTestPage, TABLE_SETTINGS_ENUM, TOOLBAR_HEADER_ID, Table2TestPage, TableSelectColumnsComponent, TableTestPage, TableTestingModule, TableValidatorService, TextForm, TextFormTestingPage, TextPopover, TextPopoverTestingModule, TextPopoverTestingPage, ThrottledClickDirective, ToStringPipe, ToastTestingModule, ToastTestingPage, Toasts, TokenScope, ToolbarComponent, ToolbarToken, TranslatablePipe, TranslateContextPipe, TranslateContextService, TreeItemEntityUtils, TruncHtmlPipe, TruncTextPipe, TruncateHtmlPipe, UploadFile, UploadFileComponent, UploadFilePopover, UploadFileTestingModule, UploadFileTestingPage, UriUtils, UrlUtils, UserEventModule, UserEventNotificationIcon, UserEventNotificationList, UserEventNotificationModal, UserEventTestService, UserEventTestingModule, UserEventTestingPage, UserSettings, UserToken, UserTokenTable, UsersPage, ValueFormatPipe, VersionUtils, accountToString, adaptValueToControl, addValueInArray, arrayDistinct, arrayResize, arraySize, asInputElement, base64ArrayBuffer, booleanToString, canHaveFocus, capitalizeFirstLetter, chainPromises, changeCaseToUnderscore, clearValueInArray, collectByProperty, compareVersionNumbers, computeDecimalDegrees, computeDecimalPart, copyEntity2Form, createPromiseEvent, createPromiseEventEmitter, departmentToString, departmentsToString, disableAndClearControl, disableAndClearControls, disableControl, disableControls, emitPromiseEvent, enableControl, enableControls, enableRxStateProdMode, entityToString, equals, equalsOrNil, escapeRegExp, expansionAnimation, fadeInAnimation, fadeInOutAnimation, fadeInSlowAnimation, filterFalse, filterFormErrors, filterFormErrorsByPath, filterFormErrorsByPrefix, filterNotNil, filterNumberInput, filterTrue, findParentWithClass, firstArrayValue, firstFalse, firstFalsePromise, firstNotNil, firstNotNilPromise, firstTrue, firstTruePromise, focusInput, focusNextInput, focusPreviousInput, formatLatLong, formatLatitude, formatLongitude, fromDateISOString, fromScrollEndEvent, fromUnixMsTimestamp, fromUnixTimestamp, getCaretPosition, getColorContrast, getColorShade, getColorTint, getControlFromPath, getFocusableInputElements, getFormErrors, getFormValueFromEntity, getInputRangeFromCaretIndex, getInputSelectionRangesFromMask, getProperty, getPropertyByPath, getPropertyByPathAsString, getRandomImage, getRandomImageWithCredit, getUserAgent, hexToRgb, hexToRgbArray, initArrayControlsFromValues, interpolateString, intersectArrays, isAndroid, isBlankString, isCapacitor, isChrome, isControlHasInput, isEdge, isEmptyArray, isEntityService, isFirefox, isIOS, isInputElement, isInstanceOf, isInt, isIpad, isMacOS, isMobile, isNil, isNilOrBlank, isNilOrNaN, isNotEmptyArray, isNotNil, isNotNilBoolean, isNotNilObject, isNotNilOrBlank, isNotNilOrNaN, isNotNilString, isNumber, isNumberRange, isOnFieldMode, isPrint, isProgressEvent, isPromise, isResponseEvent, isSafari, isSameVersion, isStartableService, isTouchUi, isVersionCompatible, isWindows, joinProperties, joinPropertiesPath, lastArrayValue, logFormErrors, markAllAsTouched, markAsUntouched, markControlAsTouched, markFormGroupAsTouched, maskitoAutoSelectByMaskPattern, maskitoPrefixPlugin, matchMedia, matchUpperCase, mergeLoadResult, mixHex, moveInputCaretToSeparator, newArray, noHtml, noTrailingSlash, notNilOrDefault, nullIfNilOrBlank, nullIfUndefined, numberOrNilAttribute, numberToString, parseLatitudeOrLongitude, propertiesPathComparator, propertyComparator, propertyPathComparator, referentialToString, referentialsToString, remove, removeAll, removeDiacritics, removeDuplicatesFromArray, removeEnd, removeValueInArray, replaceAll, resetCalculatedValue, resizeArray, rgbArrayToHex, rgbToHex, round, scrollFactory, selectInputContent, selectInputContentFromEvent, selectInputRange, setCalculatedValue, setControlEnabled, setControlsEnabled, setFormErrors, setPropertyByPath, setTabIndex, sleep, slideDownAnimation, slideInAnimation, slideInOutAnimation, slideUpDownAnimation, sort, splitArrayInChunks, splitById, splitByProperty, splitDegreesToDDArray, splitDegreesToDDMMArray, splitDegreesToDDMMSSArray, startsWithUpperCase, suggestFromArray, suggestFromStringArray, tabindexComparator, testUserAgent, toBoolean, toDateISOString, toDuration, toFloat, toInt, toNotNil, toNumber, trimEmptyToNull, truncateHtml, uncapitalizeFirstLetter, undefinedIfNull, underscoreToChangeCase, updateValueAndValidity, waitFor, waitForFalse, waitForTrue, waitIdle, waitWhilePending };
+export { APP_ABOUT_DEVELOPERS, APP_ABOUT_PARTNERS, APP_CONFIG_OPTIONS, APP_DEBUG_DATA_SERVICE, APP_FEED_SERVICE, APP_FORM_ERROR_I18N_KEYS, APP_GRAPHQL_FRAGMENTS, APP_GRAPHQL_TYPE_POLICIES, APP_HOME_BUTTONS, APP_HOME_CONFIG, APP_HOTKEYS_CONFIG, APP_JOB_PROGRESSION_SERVICE, APP_LOCALES, APP_LOCAL_SETTINGS, APP_LOCAL_SETTINGS_OPTIONS, APP_LOCAL_STORAGE_TYPE_POLICIES, APP_LOGGING_SERVICE, APP_MENU_ITEMS, APP_MENU_OPTIONS, APP_NAMED_FILTER_SERVICE, APP_PROGRESS_BAR_SERVICE, APP_SETTINGS_MENU_ITEMS, APP_STORAGE, APP_STORAGE_EXPLORER_PROTECTED_KEYS, APP_TESTING_PAGES, APP_USER_EVENT_LIST_INFINITE_SCROLL_THRESHOLD, APP_USER_EVENT_SERVICE, APP_USER_SETTINGS_OPTIONS, APP_USER_TOKEN_SCOPES, AboutModal, AbstractNamedFilterService, AbstractSelectionModelPipe, AbstractTableSelectionPipe, AbstractUserEventService, Account, AccountPage, AccountService, AccountToStringPipe, AccountUtils, ActionsColumnComponent, AdminModule, AdminRoutingModule, AdminUsersModule, Alerts, AndroidOsEnvironment, AppAboutModalModule, AppAccountModule, AppAsyncTable, AppAuthForm, AppAuthModal, AppAuthModule, AppChangePasswordModule, AppChangePasswordPage, AppEditor, AppEditorOptions, AppEntityEditor, AppEntityEditorModal, AppEntityEditorModalOptions, AppEntityFormModule, AppForm, AppFormArray, AppFormButtonsBarModule, AppFormContainer, AppFormField, AppFormModule, AppFormProvider, AppFormUtils, AppGestureConfig, AppGraphQLModule, AppHomePageModule, AppIconComponent, AppIconModule, AppImageGalleryComponent, AppInMemoryTable, AppInstallUpgradeCard, AppInstallUpgradeCardModule, AppListForm, AppListFormModule, AppLoadingSpinner, AppMarkdownContent, AppMarkdownModal, AppMenuModule, AppNullForm, AppPropertiesForm, AppPropertiesFormModule, AppPropertiesTable, AppPropertiesUtils, AppPropertyUtils, AppRegisterModule, AppResetPasswordModal, AppRowField, AppSelectPeerModule, AppSettingsPageModule, AppTabEditor, AppTabEditorOptions, AppTable, AppTableModule, AppTableUtils, AppTextPopoverModule, AppUpdateOfflineModeCard, AppUpdateOfflineModeCardModule, AppValidatorService, AppendQueryParamsPipePipe, ArrayDistinctPipe, ArrayFilterPipe, ArrayFindByPropertyPipe, ArrayFirstPipe, ArrayFormTestPage, ArrayIncludesPipe, ArrayJoinPipe, ArrayLastPipe, ArrayLengthPipe, ArrayMapPipe, ArrayPluckPipe, ArraySortPipe, AsAnyPipe, AsArrayPipe, AsBooleanPipe, AsFloatLabelTypePipe, AsObservablePipe, AudioProvider, AudioTestingModule, AudioTestingPage, AuthGuardService, AutoResizeDirective, AutoTitleDirective, AutocompleteTestPage, AutofocusDirective, BadgeDirective, BadgeNumberPipe, Base58, BaseEntityService, BaseGraphqlService, BaseGraphqlServiceOptions, BaseReferential, Beans, BooleanFormatPipe, BooleanTestPage, CORE_CONFIG_OPTIONS, CORE_TESTING_PAGES, CapitalizePipe, CellValueChangeListener, ChangePasswordForm, ChipsTestPage, Color, ColorScale, ComponentDirtyGuard, ConfigFragments, ConfigService, Configuration, CoreModule, CorePipesModule, CoreTestingModule, CryptoService, CsvUtils, DATE_ISO_PATTERN, DATE_MATCH_REGEXP, DATE_PATTERN, DATE_UNIX_MS_TIMESTAMP, DATE_UNIX_TIMESTAMP, DEFAULT_JOIN_ARRAY_VALUES_SEPARATOR, DEFAULT_JOIN_PROPERTIES_SEPARATOR, DEFAULT_MENU_SHOW_WHEN, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLACEHOLDER_CHAR, DEFAULT_REQUIRED_COLUMNS, DateDiffDurationPipe, DateFormatPipe, DateFormatService, DateFromNowPipe, DateShortTestPage, DateTestPage, DateTimeTestPage, DateUtils, DebugComponent, Department, DepartmentToStringPipe, DisplayWithPipe, DragAndDropDirective, DurationPipe, DurationTestPage, ED25519_SEED_LENGTH, EMPTY_PLACEHOLDER_CHAR, EMPTY_PLACEHOLDER_CHAR_REGEXP_GLOBAL, ENTITIES_STORAGE_KEY_PREFIX, ENVIRONMENT, EmptyArrayPipe, EntitiesAsyncTableDataSource, EntitiesStorage, EntitiesTableDataSource, Entity, EntityClass, EntityClasses, EntityFilter, EntityFilterUtils, EntityMetadataComponent, EntityStore, EntityUtils, Environment, EnvironmentHttpLoader, EnvironmentLoader, ErrorCodes, EvenPipe, FeedDirective, FeedModule, FeedPage, FeedService, FeedsComponent, FileResponse, FileService, FileSizePipe, FilesUtils, FirstFalsePipe, FirstPipe, FirstTruePipe, FormArrayHelper, FormArrayTestModule, FormButtonsBarComponent, FormButtonsBarToken, FormErrorPipe, FormErrorTranslatePipe, FormErrorTranslator, FormFieldDefinitionUtils, FormFieldValuesHolder, FormGetArrayPipe, FormGetControlPipe, FormGetGroupPipe, FormGetPipe, FormGetValuePipe, GalleryTestPage, GeolocationUtils, GraphqlService, HAMMER_PRESS_TIME, HAMMER_TAP_TIME, HighlightPipe, HomePage, Hotkeys, HotkeysDialogComponent, IMAGE_DEFAULTS, IPosition, ImageAttachment, ImageAttachmentFilter, ImageAttachmentService, ImageGalleryModule, ImageGalleryTestingModule, ImageModule, ImageService, ImagesUtils, InMemoryEntitiesService, IsAllSelectedPipe, IsEmptySelectionPipe, IsLoginAccountPipe, IsMultipleSelectionPipe, IsNilOrBlankPipe, IsNilOrNaNPipe, IsNilPipe, IsNotAllSelectedPipe, IsNotEmptySelectionPipe, IsNotNilOrBlankPipe, IsNotNilOrNaNPipe, IsNotNilPipe, IsOnDeskPipe, IsOnFieldPipe, IsSelectedPipe, IsSingleSelectionPipe, IsValidDatePipe, JobModule, JobProgression, JobProgressionComponent, JobProgressionIcon, JobProgressionList, JobProgressionService, JobProgressionTestService, JobProgressionTestingPage, JobTestingModule, JobUtils, JsonFeedUtils, JsonUtils, KEYBOARD_HIDE_DELAY_MS, LAT_LONG_PATTERNS, LAT_LONG_PATTERN_MAX_DECIMALS, LAT_LONG_VALUE_MAX_DECIMALS, LatLongFormatPipe, LatLongTestPage, LatitudeFormatPipe, LocalSettingsService, LogLevel, LogUtils, Logger, LoggingService, LoggingServiceModule, LongitudeFormatPipe, MASKS, MASK_RANGES, MAT_FORM_FIELD_DEFAULT_APPEARANCE, MAT_FORM_FIELD_DEFAULT_SUBSCRIPT_SIZING, MINIFY_ENTITY_FOR_LOCAL_STORAGE, MINIFY_ENTITY_FOR_POD, MOMENT_NO_TIME_PROPERTY, MapGetPipe, MapKeysPipe, MapPipe, MapToPipe, MapValuesPipe, MarkdownDirective, MarkdownService, MarkdownTestPage, MarkdownTestingModule, MarkdownUtils, MaskitoPlaceholderPipe, MaskitoTestPage, MatAutocompleteConfigHolder, MatAutocompleteField, MatAutocompleteFieldUtils, MatBadgeTestPage, MatBooleanField, MatChipsField, MatColorPipe, MatCommonTestPage, MatDate, MatDateShort, MatDateTime, MatDuration, MatLatLongField, MatLatLongFieldInput, MatPaginatorI18n, MatStepperI18n, MatSwipeField, MaterialTestingModule, MathAbsPipe, MenuComponent, MenuItem, MenuItems, MenuOptions, MenuService, MenuTestingModule, MenuTestingPage, Message, MessageFilter, MessageForm, MessageModal, MessageModule, MessageService, MessageTypeList, MessageTypes, MimeTypes, ModalToolbarComponent, NETWORK_DEFAULT_CONNECTION_TIMEOUT, NamedFilter, NamedFilterFilter, NamedFilterSelector, NamedFilterSelectorTestingModule, NamedFilterSelectorTestingPage, NavActionsColumnComponent, NetworkService, NetworkUtils, NewTokenForm, NewTokenModal, NgInitDirective, NgVarDirective, NoHtmlPipe, NotEmptyArrayPipe, NumberFormatPipe, ObservableTestPage, OddPipe, OtherMenuTestingPage, PEER_URL_REGEXP, PLUS_PLACEHOLDER_CHAR_REGEXP_GLOBAL, PRINT_ID_QUERY_PARAM, PRINT_LOADING_STORAGE_KEY_PREFIX, PRIORITIZED_AUTHORITIES, PUBKEY_REGEXP, Peer, Person, PersonFilter, PersonFragments, PersonService, PersonToStringPipe, PersonUtils, PersonValidatorService, PlatformService, PrintService, ProgressBarService, ProgressInterceptor, PropertiesFormTestPage, PropertiesFormTestingModule, PropertyEntity, PropertyEntityFilter, PropertyEntityValidator, PropertyFormatPipe, PropertyGetPipe, RESERVED_END_COLUMNS, RESERVED_START_COLUMNS, Referential, ReferentialFilter, ReferentialRef, ReferentialToStringPipe, ReferentialUtils, ReferentialValidatorService, RegExpUtils, RegisterConfirmPage, RegisterForm, RegisterModal, ResizableComponent, ResizableDirective, ResizableModule, RoundPipe, RxStateComputed, RxStateModule, RxStateProperty, RxStateRegister, RxStateSelect, SCRYPT_PARAMS, SETTINGS_COMPACT_ROWS, SETTINGS_DISPLAY_COLUMNS, SETTINGS_FILTER, SETTINGS_PAGE_SIZE, SETTINGS_SORTED_COLUMN, SETTINGS_STORAGE_KEY, SETTINGS_TRANSIENT_PROPERTIES, SHARED_MATERIAL_TESTING_PAGES, SHARED_STORAGE_TESTING_PAGES, SHARED_TESTING_PAGES, SOCIAL_CONFIG_OPTIONS, SOCIAL_TESTING_PAGES, SPACE_PLACEHOLDER_CHAR, SPACE_PLACEHOLDER_CHAR_REGEXP_GLOBAL, SafeHtmlPipe, SafeStylePipe, SelectPeerModal, SelectionLengthPipe, ServerErrorCodes, SettingsPage, SharedAsyncValidators, SharedBadgeModule, SharedDebugModule, SharedDirectivesModule, SharedFormArrayValidators, SharedFormGroupValidators, SharedHotkeysModule, SharedMarkdownModule, SharedMatAutocompleteModule, SharedMatBooleanModule, SharedMatChipsModule, SharedMatDateTimeModule, SharedMatDurationModule, SharedMatLatLongModule, SharedMatSwipeModule, SharedMaterialModule, SharedModule, SharedNamedFilterModule, SharedPipesModule, SharedRoutingModule, SharedTestingModule, SharedTestsPage, SharedTextFormModule, SharedToolbarModule, SharedValidators, SocialErrorCodes, SocialModule, SocialModuleOptionsToken, SocialTestingModule, Software, SplitArrayInChunksPipe, StartableService, StatusById, StatusIds, StatusList, StorageDrivers, StorageExplorerComponent, StorageExplorerModule, StorageExplorerTestingModule, StorageExplorerTestingRoutingModule, StorageService, StrIncludesPipe, StrLengthPipe, StrReplacePipe, SubMenuTabDirective, SwipeTestPage, TABLE_SETTINGS_ENUM, TOOLBAR_HEADER_ID, Table2TestPage, TableSelectColumnsComponent, TableTestPage, TableTestingModule, TableValidatorService, TextForm, TextFormTestingPage, TextPopover, TextPopoverTestingModule, TextPopoverTestingPage, ThrottledClickDirective, ToStringPipe, ToastTestingModule, ToastTestingPage, Toasts, TokenScope, ToolbarComponent, ToolbarToken, TranslatablePipe, TranslateContextPipe, TranslateContextService, TreeItemEntityUtils, TruncHtmlPipe, TruncTextPipe, TruncateHtmlPipe, UploadFile, UploadFileComponent, UploadFilePopover, UploadFileTestingModule, UploadFileTestingPage, UriUtils, UrlUtils, UserEventModule, UserEventNotificationIcon, UserEventNotificationList, UserEventNotificationModal, UserEventTestService, UserEventTestingModule, UserEventTestingPage, UserSettings, UserToken, UserTokenTable, UsersPage, ValueFormatPipe, VersionUtils, accountToString, adaptValueToControl, addValueInArray, arrayDistinct, arrayResize, arraySize, asInputElement, base64ArrayBuffer, booleanToString, canHaveFocus, capitalizeFirstLetter, chainPromises, changeCaseToUnderscore, clearValueInArray, collectByProperty, compareVersionNumbers, computeDecimalDegrees, computeDecimalPart, copyEntity2Form, createPromiseEvent, createPromiseEventEmitter, departmentToString, departmentsToString, disableAndClearControl, disableAndClearControls, disableControl, disableControls, emitPromiseEvent, enableControl, enableControls, enableRxStateProdMode, entityToString, equals, equalsOrNil, escapeRegExp, expansionAnimation, fadeInAnimation, fadeInOutAnimation, fadeInSlowAnimation, filterFalse, filterFormErrors, filterFormErrorsByPath, filterFormErrorsByPrefix, filterNotNil, filterNumberInput, filterTrue, findParentWithClass, firstArrayValue, firstFalse, firstFalsePromise, firstNotNil, firstNotNilPromise, firstTrue, firstTruePromise, focusInput, focusNextInput, focusPreviousInput, formatLatLong, formatLatitude, formatLongitude, fromDateISOString, fromScrollEndEvent, fromUnixMsTimestamp, fromUnixTimestamp, getCaretPosition, getColorContrast, getColorShade, getColorTint, getControlFromPath, getFocusableInputElements, getFormErrors, getFormValueFromEntity, getInputRangeFromCaretIndex, getInputSelectionRangesFromMask, getProperty, getPropertyByPath, getPropertyByPathAsString, getRandomImage, getRandomImageWithCredit, getUserAgent, hexToRgb, hexToRgbArray, initArrayControlsFromValues, interpolateString, intersectArrays, isAndroid, isBlankString, isCapacitor, isChrome, isControlHasInput, isEdge, isEmptyArray, isEntityService, isFirefox, isIOS, isInputElement, isInstanceOf, isInt, isIpad, isMacOS, isMobile, isNil, isNilOrBlank, isNilOrNaN, isNotEmptyArray, isNotNil, isNotNilBoolean, isNotNilObject, isNotNilOrBlank, isNotNilOrNaN, isNotNilString, isNumber, isNumberRange, isOnFieldMode, isPrint, isProgressEvent, isPromise, isResponseEvent, isSafari, isSameVersion, isStartableService, isTouchUi, isVersionCompatible, isWindows, joinProperties, joinPropertiesPath, lastArrayValue, logFormErrors, markAllAsTouched, markAsUntouched, markControlAsTouched, markFormGroupAsTouched, maskitoAutoSelectByMaskPattern, maskitoPrefixPlugin, matchMedia, matchUpperCase, mergeLoadResult, mixHex, moveInputCaretToSeparator, newArray, noHtml, noTrailingSlash, notNilOrDefault, nullIfNilOrBlank, nullIfUndefined, numberOrNilAttribute, numberToString, parseLatitudeOrLongitude, propertiesPathComparator, propertyComparator, propertyPathComparator, referentialToString, referentialsToString, remove, removeAll, removeDiacritics, removeDuplicatesFromArray, removeEnd, removeValueInArray, replaceAll, resetCalculatedValue, resizeArray, rgbArrayToHex, rgbToHex, round, scrollFactory, selectInputContent, selectInputContentFromEvent, selectInputRange, setCalculatedValue, setControlEnabled, setControlsEnabled, setFormErrors, setPropertyByPath, setTabIndex, sleep, slideDownAnimation, slideInAnimation, slideInOutAnimation, slideUpDownAnimation, sort, splitArrayInChunks, splitById, splitByProperty, splitDegreesToDDArray, splitDegreesToDDMMArray, splitDegreesToDDMMSSArray, startsWithUpperCase, suggestFromArray, suggestFromStringArray, tabindexComparator, testUserAgent, toBoolean, toDateISOString, toDuration, toFloat, toInt, toNotNil, toNumber, trimEmptyToNull, truncateHtml, uncapitalizeFirstLetter, undefinedIfNull, underscoreToChangeCase, updateValueAndValidity, waitFor, waitForFalse, waitForTrue, waitIdle, waitWhilePending };
 //# sourceMappingURL=sumaris-net.ngx-components.mjs.map