@sumaris-net/ngx-components 2.6.4-rc9 → 2.6.5-rc1

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

@@ -23,13 +23,13 @@ import * as i6$2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i9$1 from '@angular/material/expansion';
 import { MatExpansionModule, MatExpansionPanel } from '@angular/material/expansion';
-import * as i8$1 from '@angular/material/toolbar';
+import * as i8$2 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import * as i8 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i9 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i11$2 from '@angular/material/menu';
+import * as i8$1 from '@angular/material/menu';
 import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
 import * as i12 from '@angular/material/select';
 import { MatSelectModule, MAT_SELECT_SCROLL_STRATEGY } from '@angular/material/select';
@@ -4324,7 +4324,7 @@ function addValueInArray(arrayControl, createControl, equals, isEmpty, value, op
             control.disable({ emitEvent: false });
         else if (!disabled && control.disabled)
             control.enable({ emitEvent: false });
-        if (options?.insertAt) {
+        if (isNotNilOrNaN(options?.insertAt)) {
             arrayControl.insert(options.insertAt, control, options);
         }
         else {
@@ -20110,6 +20110,819 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }]
         }] });
 
+class EntityFilter extends Entity {
+    /**
+     * Compose some filter functions: all should return true
+     * @param filterFns
+     */
+    static composeFilters(filterFns) {
+        if (isEmptyArray(filterFns))
+            return undefined;
+        return (entity) => (filterFns || []).every(fn => fn(entity));
+    }
+    static compose(filters) {
+        const filterFns = (filters || []).reduce((res, f) => {
+            const fns = f.buildFilter();
+            if (!fns)
+                return res;
+            return res.concat(fns);
+        }, []);
+        return this.composeFilters(filterFns);
+    }
+    /**
+     * Compose some filter functions: all should return true
+     * @param filterFns
+     */
+    static composeFns(filterFns) {
+        if (isEmptyArray(filterFns))
+            return undefined;
+        return (entity) => (filterFns || []).every(fn => fn(entity));
+    }
+    constructor(__typename) {
+        super(__typename);
+    }
+    /**
+     * Clean a filter, before sending to the pod (e.g convert dates, remove internal properties, etc.)
+     */
+    asPodObject() {
+        return this.asObject(MINIFY_ENTITY_FOR_POD);
+    }
+    isEmpty() {
+        return this.countNotEmptyCriteria() === 0;
+    }
+    countNotEmptyCriteria() {
+        const json = this.asPodObject();
+        return Object.keys(json)
+            .filter(key => this.isCriteriaNotEmpty(key, json[key]))
+            .length;
+    }
+    asFilterFn() {
+        const filterFns = this.buildFilter();
+        return EntityFilter.composeFns(filterFns);
+    }
+    buildFilter() {
+        // Can be completed by subclasses
+        return [];
+    }
+    isCriteriaNotEmpty(key, value) {
+        // Can be overridden by subclasses
+        return value !== undefined
+            && value !== null
+            && (
+            // not empty string
+            (typeof value === 'string' && value.trim() !== '')
+                // valid number
+                || (typeof value === 'number' && !isNaN(value))
+                // valid boolean
+                || (typeof value === 'boolean')
+                // not empty array
+                || (Array.isArray(value) && value.length > 0)
+                // entity with an id
+                || ReferentialUtils.isNotEmpty(value));
+    }
+}
+class EntityFilterUtils {
+    static isEntityFilter(obj) {
+        return obj && obj.asPodObject && obj.asFilterFn && true || false;
+    }
+    static fromObject(source, filterType) {
+        if (!source)
+            return source;
+        if (isInstanceOf(source, filterType))
+            return source;
+        const target = new filterType();
+        if (EntityFilterUtils.isEntityFilter(target)) {
+            target.fromObject(source);
+        }
+        else {
+            Object.assign(target, source);
+        }
+        return target;
+    }
+}
+
+// @dynamic
+// eslint-disable-next-line @angular-eslint/directive-class-suffix
+class BaseEntityService extends BaseGraphqlService {
+    constructor(graphql, platform, dataType, filterType, options) {
+        super(graphql, environment);
+        this.graphql = graphql;
+        this.platform = platform;
+        this.dataType = dataType;
+        this.filterType = filterType;
+        this.queries = options.queries;
+        this.mutations = options.mutations || {};
+        this.subscriptions = options.subscriptions || {};
+        this.equalsFn = options.equalsFn || ((e1, e2) => EntityUtils.equals(e1, e2, 'id'));
+        this.isNewFn = options.isNewFn || ((e) => EntityUtils.isNotEmpty(e, 'id'));
+        this.defaultSortBy = options.defaultSortBy || 'id';
+        this.defaultSortDirection = options.defaultSortDirection || 'asc';
+        this.watchQueriesUpdatePolicy = options.watchQueriesUpdatePolicy || 'update-cache';
+        const obj = new dataType();
+        this._typename = obj.__typename || 'UnknownVO';
+        this._logTypeName = removeEnd(this._typename, 'VO');
+        // For DEV only
+        this._debug = !environment.production;
+    }
+    watch(id, opts) {
+        if (this._debug)
+            console.debug(this._logPrefix + `Watching ${this._logTypeName} {${id}}...`);
+        const variables = opts?.variables || { id };
+        const query = opts && opts.query || this.queries.load;
+        return this.graphql.watchQuery({
+            query,
+            variables,
+            fetchPolicy: opts && opts.fetchPolicy || undefined,
+            error: { code: ErrorCodes.LOAD_DATA_ERROR, message: 'REFERENTIAL.ERROR.LOAD_DATA_ERROR' }
+        })
+            .pipe(map(({ data }) => (!opts || opts.toEntity !== false)
+            ? (data && this.fromObject(data))
+            : data));
+    }
+    async load(id, opts) {
+        if (this._debug)
+            console.debug(this._logPrefix + `Loading ${this._logTypeName} {${id}}...`);
+        const variables = opts?.variables || { id };
+        const query = opts?.query || this.queries.load;
+        const { data } = await this.graphql.query({
+            query,
+            variables,
+            fetchPolicy: opts && opts.fetchPolicy || undefined,
+            error: { code: ErrorCodes.LOAD_DATA_ERROR, message: 'REFERENTIAL.ERROR.LOAD_DATA_ERROR' }
+        });
+        // Convert to entity
+        return (!opts || opts.toEntity !== false)
+            ? (data && this.fromObject(data))
+            : data;
+    }
+    watchAll(offset, size, sortBy, sortDirection, filter, opts) {
+        filter = this.asFilter(filter);
+        const variables = {
+            ...(opts?.variables || {}),
+            offset: offset || 0,
+            size: size || 100,
+            sortBy: sortBy || this.defaultSortBy,
+            sortDirection: sortDirection || this.defaultSortDirection,
+            filter: filter && filter.asPodObject()
+        };
+        let now = this._debug && Date.now();
+        if (this._debug)
+            console.debug(this._logPrefix + `Watching ${this._logTypeName}...`, variables);
+        const withTotal = (!opts || opts.withTotal !== false) && this.queries.loadAllWithTotal && true;
+        const query = (opts && opts.query) // use given query
+            // Or get loadAll or loadAllWithTotal query
+            || (withTotal ? this.queries.loadAllWithTotal : this.queries.loadAll);
+        return this.mutableWatchQuery({
+            query,
+            variables,
+            // Force cached mutable query
+            queryName: withTotal ? 'LoadAllWithTotal' : 'LoadAll',
+            arrayFieldName: 'data',
+            totalFieldName: withTotal ? 'total' : undefined,
+            insertFilterFn: filter && filter.asFilterFn(),
+            error: { code: ErrorCodes.LOAD_DATA_ERROR, message: 'REFERENTIAL.ERROR.LOAD_DATA_ERROR' },
+            fetchPolicy: opts && opts.fetchPolicy || undefined
+        })
+            .pipe(map(({ data, total }) => {
+            // Convert to entity (if need)
+            const entities = (!opts || opts.toEntity !== false)
+                ? (data || []).map(json => this.fromObject(json))
+                : (data || []);
+            if (now) {
+                console.debug(this._logPrefix + `${this._logTypeName} loaded in ${Date.now() - now}ms`, entities);
+                now = null;
+            }
+            return { data: entities, total };
+        }));
+    }
+    async loadAll(offset, size, sortBy, sortDirection, filter, opts) {
+        const debug = this._debug && (!opts || opts.debug !== false);
+        filter = this.asFilter(filter);
+        const variables = {
+            ...(opts?.variables || {}),
+            offset: offset || 0,
+            size: size || 100,
+            sortBy: sortBy || 'id',
+            sortDirection: sortDirection || 'asc',
+            filter: filter && filter.asPodObject()
+        };
+        const now = Date.now();
+        if (debug)
+            console.debug(this._logPrefix + `Loading ${this._logTypeName}...`, variables);
+        const withTotal = (!opts || opts.withTotal !== false) && this.queries.loadAllWithTotal && true;
+        // use given query
+        const query = opts?.query
+            // Or get loadAll or loadAllWithTotal query
+            || (withTotal ? this.queries.loadAllWithTotal : this.queries.loadAll);
+        const { data, total } = await this.graphql.query({
+            query,
+            variables,
+            error: { code: ErrorCodes.LOAD_DATA_ERROR, message: 'ERROR.LOAD_DATA_ERROR' },
+            fetchPolicy: opts && opts.fetchPolicy || 'network-only'
+        });
+        const entities = (!opts || opts.toEntity !== false) ?
+            (data || []).map(json => this.fromObject(json)) :
+            (data || []);
+        if (debug)
+            console.debug(this._logPrefix + `${this._logTypeName} items loaded in ${Date.now() - now}ms`);
+        const result = {
+            data: entities,
+            total: total || entities.length
+        };
+        // Add fetch more capability, if total was fetched
+        if (withTotal) {
+            const nextOffset = (offset || 0) + entities.length;
+            if (nextOffset < result.total) {
+                result.fetchMore = () => this.loadAll(nextOffset, size, sortBy, sortDirection, filter, opts);
+            }
+        }
+        return result;
+    }
+    async countAll(filter, opts) {
+        // If no countAll query
+        if (!this.queries.countAll && !opts?.query) {
+            // Fail if no loadAll (cannot count)
+            if (!this.queries.loadAllWithTotal)
+                throw new Error('Not implemented');
+            // Use loadAll query, with size = 0;
+            return (await this.loadAll(0, 1, null, null, filter, { withTotal: true }))?.total || 0;
+        }
+        filter = this.asFilter(filter);
+        const variables = {
+            ...(opts?.variables || {}),
+            filter: filter && filter.asPodObject()
+        };
+        const query = opts?.query || this.queries.countAll;
+        const res = await this.graphql.query({
+            query,
+            variables,
+            error: { code: ErrorCodes.LOAD_DATA_ERROR, message: 'ERROR.COUNT_DATA_ERROR' },
+            fetchPolicy: opts && opts.fetchPolicy || 'network-only'
+        });
+        return res.total;
+    }
+    canUserWrite(data, opts) {
+        return !!data;
+    }
+    async saveAll(entities, opts) {
+        if (isEmptyArray(entities))
+            return entities; // Nothing to save: skip
+        if (!this.mutations.saveAll) {
+            if (!this.mutations.save)
+                throw new Error('Not implemented');
+            // Save one by one
+            return chainPromises((entities || [])
+                .map(entity => (() => this.save(entity, opts))));
+        }
+        let hasNewEntities = false;
+        const json = entities.map(entity => {
+            hasNewEntities = hasNewEntities || this.isNewFn(entity);
+            this.fillDefaultProperties(entity);
+            return this.asObject(entity);
+        });
+        const now = Date.now();
+        if (this._debug)
+            console.debug(this._logPrefix + `Saving all ${this._logTypeName}...`, json);
+        await this.graphql.mutate({
+            mutation: this.mutations.saveAll,
+            refetchQueries: this.getRefetchQueriesForMutation(opts),
+            awaitRefetchQueries: opts && opts.awaitRefetchQueries,
+            variables: {
+                data: json
+            },
+            error: { code: ErrorCodes.SAVE_DATA_ERROR, message: 'ERROR.SAVE_DATA_ERROR' },
+            update: (proxy, { data }) => {
+                const savedEntities = data && data.data;
+                if (savedEntities) {
+                    // Update entities (id and update date)
+                    entities.forEach(entity => {
+                        const savedEntity = savedEntities.find(e => this.equalsFn(e, entity));
+                        this.copyIdAndUpdateDate(savedEntity, entity);
+                    });
+                    if (hasNewEntities && this.watchQueriesUpdatePolicy === 'update-cache') {
+                        // Update the cache
+                        this.insertIntoMutableCachedQueries(proxy, {
+                            queries: this.getLoadQueries(),
+                            data: savedEntities
+                        });
+                    }
+                }
+                if (opts && opts.update) {
+                    opts.update(proxy, { data });
+                }
+                if (this._debug)
+                    console.debug(`${this._logTypeName} saved in ${Date.now() - now}ms`, entities);
+            }
+        });
+        return entities;
+    }
+    /**
+     * Save a referential entity
+     *
+     * @param entity
+     * @param opts
+     */
+    async save(entity, opts) {
+        if (!this.mutations.save) {
+            if (!this.mutations.saveAll)
+                throw new Error('Not implemented');
+            const data = await this.saveAll([entity], opts);
+            return data && data[0];
+        }
+        // Fill default properties
+        this.fillDefaultProperties(entity);
+        // Transform into json
+        const json = this.asObject(entity);
+        const isNew = this.isNewFn(json);
+        const now = Date.now();
+        if (this._debug)
+            console.debug(this._logPrefix + `Saving ${this._logTypeName}...`, json);
+        await this.graphql.mutate({
+            mutation: this.mutations.save,
+            refetchQueries: this.getRefetchQueriesForMutation(opts),
+            awaitRefetchQueries: opts && opts.awaitRefetchQueries,
+            variables: {
+                data: json
+            },
+            error: { code: ErrorCodes.SAVE_DATA_ERROR, message: 'ERROR.SAVE_DATA_ERROR' },
+            update: (cache, { data }) => {
+                // Update entity
+                const savedEntity = data && data.data;
+                this.copyIdAndUpdateDate(savedEntity, entity);
+                // Insert into the cache
+                if (isNew && this.watchQueriesUpdatePolicy === 'update-cache') {
+                    this.insertIntoMutableCachedQueries(cache, {
+                        queries: this.getLoadQueries(),
+                        data: savedEntity
+                    });
+                }
+                if (opts && opts.update) {
+                    opts.update(cache, { data });
+                }
+                if (this._debug)
+                    console.debug(this._logPrefix + `${entity.__typename} saved in ${Date.now() - now}ms`, entity);
+            }
+        });
+        return entity;
+    }
+    /**
+     * Delete referential entities
+     */
+    async deleteAll(entities, opts) {
+        if (!this.mutations.deleteAll) {
+            if (!this.mutations.delete)
+                throw new Error('Not implemented');
+            // Delete one by one
+            return chainPromises((entities || [])
+                .map(entity => (() => this.delete(entity, opts))));
+        }
+        // Filter saved entities
+        entities = entities && entities.filter(e => isNotNil(e.id));
+        // Nothing to save: skip
+        if (isEmptyArray(entities))
+            return;
+        const ids = entities.map(t => t.id);
+        const now = Date.now();
+        if (this._debug)
+            console.debug(this._logPrefix + `Deleting ${this._logTypeName}...`, ids);
+        await this.graphql.mutate({
+            mutation: this.mutations.deleteAll,
+            refetchQueries: this.getRefetchQueriesForMutation(opts),
+            awaitRefetchQueries: opts && opts.awaitRefetchQueries,
+            variables: { ids },
+            error: { code: ErrorCodes.DELETE_DATA_ERROR, message: 'ERROR.DELETE_DATA_ERROR' },
+            update: (cache, res) => {
+                // Remove from cache
+                if (this.watchQueriesUpdatePolicy === 'update-cache') {
+                    this.removeFromMutableCachedQueriesByIds(cache, {
+                        queries: this.getLoadQueries(),
+                        ids
+                    });
+                }
+                if (opts && opts.update) {
+                    opts.update(cache, res);
+                }
+                if (this._debug)
+                    console.debug(this._logPrefix + `${this._logTypeName} deleted in ${Date.now() - now}ms`);
+            }
+        });
+    }
+    /**
+     * Delete a referential entity
+     */
+    async delete(entity, opts) {
+        if (!this.mutations.delete) {
+            if (!this.mutations.deleteAll)
+                throw new Error('Not implemented');
+            const data = await this.deleteAll([entity], opts);
+            return data && data[0];
+        }
+        // Nothing to save: skip
+        if (!entity || isNil(entity.id))
+            return;
+        const id = entity.id;
+        const now = new Date();
+        if (this._debug)
+            console.debug(this._logPrefix + `Deleting ${this._logTypeName} {${id}}...`);
+        await this.graphql.mutate({
+            mutation: this.mutations.delete,
+            refetchQueries: this.getRefetchQueriesForMutation(opts),
+            awaitRefetchQueries: opts && opts.awaitRefetchQueries,
+            variables: { id },
+            error: { code: ErrorCodes.DELETE_DATA_ERROR, message: 'ERROR.DELETE_DATA_ERROR' },
+            update: (proxy, res) => {
+                // Remove from cache
+                if (this.watchQueriesUpdatePolicy === 'update-cache') {
+                    this.removeFromMutableCachedQueriesByIds(proxy, {
+                        queries: this.getLoadQueries(),
+                        ids: [id]
+                    });
+                }
+                if (opts && opts.update) {
+                    opts.update(proxy, res);
+                }
+                if (this._debug)
+                    console.debug(this._logPrefix + `${this._logTypeName} deleted in ${new Date().getTime() - now.getTime()}ms`);
+            }
+        });
+    }
+    listenChanges(id, opts) {
+        if (isNil(id))
+            throw Error('Missing argument \'id\' ');
+        if (!this.subscriptions.listenChanges) {
+            console.warn(`${this.constructor.name}.listenChanges() not implemented yet. Will empty observable`);
+            return of();
+        }
+        const variables = opts?.variables || {
+            id,
+            interval: toNumber(opts && opts.interval, 0) // no timer by default
+        };
+        if (this._debug)
+            console.debug(this._logPrefix + `[WS] Listening for changes on ${this._logTypeName} {${id}}...`);
+        return this.graphql.subscribe({
+            query: opts?.query || this.subscriptions.listenChanges,
+            fetchPolicy: opts?.fetchPolicy || 'no-cache',
+            variables,
+            error: {
+                code: ErrorCodes.SUBSCRIBE_DATA_ERROR,
+                message: 'ERROR.SUBSCRIBE_DATA_ERROR'
+            }
+        })
+            .pipe(map(({ data }) => {
+            const entity = (!opts || opts.toEntity !== false) ? data && this.fromObject(data) : data;
+            //if (entity && this._debug) console.debug(this._logPrefix + `[WS] Received changes on ${this._logTypeName} {${id}}`, entity);
+            // TODO: missing = deleted ?
+            if (!entity)
+                console.warn(this._logPrefix + `[WS] Received deletion on ${this._logTypeName} {${id}} - TODO check implementation`);
+            return entity;
+        }));
+    }
+    copyIdAndUpdateDate(source, target) {
+        if (!source)
+            return;
+        // Update (id and updateDate)
+        EntityUtils.copyIdAndUpdateDate(source, target);
+    }
+    fromObject(source) {
+        if (!source)
+            return source;
+        const target = new this.dataType();
+        target.fromObject(source);
+        return target;
+    }
+    asFilter(source) {
+        return EntityFilterUtils.fromObject(source, this.filterType);
+    }
+    /* -- protected functions -- */
+    async ngOnStart() {
+        // No limit for updatable watch queries, if desktop
+        if (!this.platform.mobile) {
+            this._mutableWatchQueriesMaxCount = -1;
+        }
+    }
+    fillDefaultProperties(source) {
+        // Can be override by subclasses
+    }
+    asObject(entity, opts) {
+        // Can be override by subclasses
+        return entity.asObject(opts);
+    }
+    getRefetchQueriesForMutation(opts) {
+        if (opts && opts.refetchQueries)
+            return opts.refetchQueries;
+        // Skip if update policy not used refecth queries
+        if (this.watchQueriesUpdatePolicy !== 'refetch-queries')
+            return undefined;
+        const queries = this.getLoadQueries();
+        if (!queries.length)
+            return undefined; // Skip if empty
+        // Find the refetch queries definition
+        return this.findRefetchQueries({ queries });
+    }
+    getLoadQueries() {
+        return [this.queries.loadAll, this.queries.loadAllWithTotal].filter(isNotNil);
+    }
+    getLoadQueryNames() {
+        return ['LoadAll', 'LoadAllWithTotal'];
+    }
+}
+BaseEntityService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BaseEntityService, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+BaseEntityService.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: BaseEntityService, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BaseEntityService, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: GraphqlService }, { type: PlatformService }, { type: undefined }, { type: undefined }, { type: undefined }]; } });
+
+const APP_NAMED_FILTER_SERVICE = new InjectionToken('namedFilterService');
+// @dynamic
+class AbstractNamedFilterService extends BaseEntityService {
+    constructor(graphql, platform, account, dataType, filterType, options) {
+        super(graphql, platform, dataType, filterType, {
+            defaultSortBy: 'name',
+            defaultSortDirection: 'asc',
+            ...options
+        });
+        this.graphql = graphql;
+        this.platform = platform;
+        this.account = account;
+        this.dataType = dataType;
+        this.filterType = filterType;
+        this.options = options;
+        this._logPrefix = '[named-filter-service] ';
+    }
+    async suggest(value, filter) {
+        if (EntityUtils.isNotEmpty(value, 'id'))
+            return { data: [value] };
+        value = (typeof value === 'string' && value !== '*' && value) || undefined;
+        return await this.loadAll(0, 1000, 'name', 'asc', this.asSuggestFilter(value, filter), {
+            withTotal: true,
+        });
+    }
+    asSuggestFilter(searchText, filter) {
+        return {
+            ...filter,
+            searchText
+        };
+    }
+    asFilter(source) {
+        const filter = super.asFilter(source);
+        // Default filter on current user
+        if (isNil(filter.recorderPersonId) && isNil(filter.recorderDepartmentId))
+            filter.recorderPersonId = this.account.person.id;
+        return filter;
+    }
+    fillDefaultProperties(source) {
+        super.fillDefaultProperties(source);
+        // Default recorder
+        if (isNil(source.recorderPersonId) && isNil(source.recorderDepartmentId))
+            source.recorderPersonId = this.account.person.id;
+        // Stringify content
+        if (typeof source.content === 'object') {
+            source.content = JSON.stringify(source.content);
+        }
+    }
+}
+AbstractNamedFilterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AbstractNamedFilterService, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+AbstractNamedFilterService.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: AbstractNamedFilterService, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AbstractNamedFilterService, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: GraphqlService }, { type: PlatformService }, { type: AccountService }, { type: undefined }, { type: undefined }, { type: undefined }]; } });
+
+let NamedFilter = class NamedFilter extends Entity {
+    fromObject(source, opts) {
+        super.fromObject(source, opts);
+        this.name = source.name;
+        this.entityName = source.entityName;
+        this.recorderPersonId = source.recorderPersonId;
+        this.recorderDepartmentId = source.recorderDepartmentId;
+        try {
+            this.content = typeof source?.content === 'string' ? JSON.parse(source?.content) : source?.content || undefined;
+        }
+        catch (e) {
+            console.error(`[named-filter] can't parse content json`, source);
+            throw e;
+        }
+    }
+};
+NamedFilter = __decorate([
+    EntityClass({ typename: 'NamedFilterVO' })
+], NamedFilter);
+let NamedFilterFilter = class NamedFilterFilter extends EntityFilter {
+    constructor() {
+        super(...arguments);
+        this.searchText = null;
+        this.entityName = null;
+        this.recorderPersonId = null;
+        this.recorderDepartmentId = null;
+    }
+    fromObject(source, opts) {
+        super.fromObject(source, opts);
+        this.searchText = source.searchText;
+        this.entityName = source.entityName;
+        this.recorderPersonId = source.recorderPersonId;
+        this.recorderDepartmentId = source.recorderDepartmentId;
+    }
+};
+NamedFilterFilter = __decorate([
+    EntityClass({ typename: 'NamedFilterFilterVO' })
+], NamedFilterFilter);
+
+class NamedFilterSelector extends AppForm {
+    constructor(injector, formBuilder, cd, toastController, popoverController, dataService) {
+        super(injector, formBuilder.group({ namedFilter: [null] }));
+        this.injector = injector;
+        this.formBuilder = formBuilder;
+        this.cd = cd;
+        this.toastController = toastController;
+        this.popoverController = popoverController;
+        this.dataService = dataService;
+        this.logPrefix = '[named-filter-selector]';
+        this._deleteDisabled = false;
+        this.showButtons = true;
+        this.exportFileNamePrefix = 'filter';
+        this.filterSelected = new EventEmitter();
+        this.filterDeleted = new EventEmitter();
+    }
+    get isNew() {
+        return isNilOrNaN(this.value?.namedFilter?.id);
+    }
+    get saveDisabled() {
+        return !this.dirty || isNilOrBlank(this.value.namedFilter);
+    }
+    get deleteDisabled() {
+        return this._deleteDisabled || this.isNew;
+    }
+    get dirty() {
+        return super.dirty || this.filterFormDirty;
+    }
+    ngOnInit() {
+        this.registerAutocompleteField('namedFilter', {
+            suggestFn: (value, filter) => this.dataService.suggest(value, filter),
+            attributes: ['name'],
+            filter: {
+                entityName: this.entityName,
+            },
+        });
+        this.registerSubscription(this.form.controls.namedFilter.valueChanges.pipe(debounceTime(100), distinctUntilChanged()).subscribe((value) => this.onFilterChanges(value)));
+    }
+    markForCheck() {
+        this.cd.markForCheck();
+    }
+    async save() {
+        const filterContent = this.filterContentProvider();
+        if (this.debug)
+            console.debug(`${this.logPrefix} save named filter`, filterContent);
+        if (isNilOrBlank(filterContent))
+            return;
+        const currentSelected = this.value.namedFilter;
+        let result;
+        if (typeof currentSelected === 'string') {
+            result = NamedFilter.fromObject({
+                name: currentSelected,
+                entityName: this.entityName,
+                content: filterContent,
+            });
+        }
+        else {
+            result = {
+                ...currentSelected,
+                content: filterContent,
+            };
+        }
+        const savedEntity = await this.dataService.save(result);
+        this.setControlValue(savedEntity);
+        this.markAsPristine();
+    }
+    async delete() {
+        const data = this.value.namedFilter;
+        if (this.debug)
+            console.debug(`${this.logPrefix} delete named filter`, data);
+        if (typeof data === 'object') {
+            await this.dataService.delete(data);
+            this.reset();
+            this.autocompleteField.blurred.emit();
+            this.filterDeleted.emit(data);
+            Toasts.show(this.toastController, this.translate, {
+                type: 'info',
+                message: 'COMMON.NAMED_FILTER.DELETED',
+            });
+        }
+    }
+    async export() {
+        const id = this.autocompleteField.value?.id;
+        if (this.debug)
+            console.debug(`${this.logPrefix} export named filter`, id);
+        if (!id)
+            return;
+        const data = await this.dataService.load(id, { withContent: true });
+        if (data) {
+            FilesUtils.writeTextToFile(JSON.stringify(data, null, 2), {
+                type: 'application/json',
+                filename: `${this.exportFileNamePrefix}-${data.entityName}-${data.name}.json`,
+            });
+        }
+        else {
+            Toasts.show(this.toastController, this.translate, {
+                type: 'error',
+                message: 'COMMON.NAMED_FILTER.NOT_FOUND',
+            });
+        }
+    }
+    async import(event) {
+        const result = await FilesUtils.showUploadPopover(this.popoverController, event, {
+            uploadFn: (file) => FilesUtils.readAsText(file),
+            title: 'COMMON.NAMED_FILTER.IMPORT',
+            fileExtension: '.json',
+            uniqueFile: true,
+            instantUpload: true,
+        });
+        if (!result)
+            return;
+        try {
+            const data = JSON.parse(result.data[0].response.body);
+            if (this.debug)
+                console.debug(`${this.logPrefix} import named filter`, data);
+            this.setControlValue(data);
+            this.filterSelected.emit(data.content);
+        }
+        catch (e) {
+            console.error(e);
+            Toasts.show(this.toastController, this.translate, {
+                type: 'error',
+                message: 'COMMON.NAMED_FILTER.IMPORT_FAILED',
+            });
+        }
+    }
+    async onFilterChanges(value) {
+        if (this.debug)
+            console.debug(`${this.logPrefix} filter change`, value);
+        if (typeof value === 'object' && value?.id && isNotNil(value.id)) {
+            try {
+                const data = await this.dataService.load(value.id, { withContent: true });
+                this._deleteDisabled = !this.dataService.canUserWrite(data);
+                const filter = isNotNilOrBlank(data?.content) ? data.content : null;
+                if (filter) {
+                    this.filterSelected.emit(filter);
+                    this.markAsPristine();
+                }
+            }
+            catch (e) {
+                Toasts.show(this.toastController, this.translate, {
+                    type: 'error',
+                    message: 'COMMON.NAMED_FILTER.LOAD_FAILED',
+                });
+                this.autocompleteField.applyImplicitValue = false;
+            }
+        }
+        else {
+            this.autocompleteField.applyImplicitValue = false;
+        }
+    }
+    setControlValue(value) {
+        this.setValue({ namedFilter: value });
+        this.autocompleteField.blurred.emit();
+    }
+}
+NamedFilterSelector.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NamedFilterSelector, deps: [{ token: i0.Injector }, { token: i1$3.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: i1.ToastController }, { token: i1.PopoverController }, { token: APP_NAMED_FILTER_SERVICE }], target: i0.ɵɵFactoryTarget.Component });
+NamedFilterSelector.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NamedFilterSelector, selector: "app-named-filter-selector[entityName]", inputs: { entityName: "entityName", filterContentProvider: "filterContentProvider", filterFormDirty: "filterFormDirty", showButtons: "showButtons", exportFileNamePrefix: "exportFileNamePrefix" }, outputs: { filterSelected: "filterSelected", filterDeleted: "filterDeleted" }, viewQueries: [{ propertyName: "autocompleteField", first: true, predicate: MatAutocompleteField, descendants: true }], usesInheritance: true, ngImport: i0, template: "<form class=\"form-container\" [formGroup]=\"form\">\n  <mat-autocomplete-field\n    formControlName=\"namedFilter\"\n    [config]=\"autocompleteFields.namedFilter\"\n    [placeholder]=\"'COMMON.NAMED_FILTER.TITLE' | translate\"\n    [clearable]=\"true\"\n  >\n    <ng-container matSuffix *ngIf=\"showButtons\">\n      <button\n        mat-icon-button\n        [color]=\"'primary'\"\n        [disabled]=\"saveDisabled\"\n        [title]=\"'COMMON.NAMED_FILTER.SAVE' | translate\"\n        (click)=\"save()\"\n      >\n        <mat-icon>save</mat-icon>\n        <mat-icon *ngIf=\"isNew\" class=\"icon-secondary\" style=\"left: 12px; top: 0px\">add</mat-icon>\n      </button>\n      <button\n        mat-icon-button\n        [disabled]=\"deleteDisabled\"\n        [title]=\"'COMMON.NAMED_FILTER.DELETE' | translate\"\n        (click)=\"delete()\"\n      >\n        <mat-icon>delete</mat-icon>\n      </button>\n      <button mat-icon-button [matMenuTriggerFor]=\"moreMenu\">\n        <mat-icon>more_vert</mat-icon>\n      </button>\n      <mat-menu #moreMenu=\"matMenu\">\n        <button mat-menu-item (click)=\"export()\" [disabled]=\"isNew\">\n          <ion-label>\n            <mat-icon>file_download</mat-icon>\n            <span>{{ 'COMMON.NAMED_FILTER.EXPORT' | translate }}</span>\n          </ion-label>\n        </button>\n        <button mat-menu-item (click)=\"import($event)\">\n          <ion-label>\n            <mat-icon>file_upload</mat-icon>\n            <span>{{ 'COMMON.NAMED_FILTER.IMPORT' | translate }}</span>\n          </ion-label>\n        </button>\n      </mat-menu>\n    </ng-container>\n  </mat-autocomplete-field>\n</form>\n", styles: [".filter-name-container{background:transparent!important;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "appearance", "placeholder", "suggestFn", "required", "mobile", "clearable", "debounceTime", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "class", "panelWidth", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keyup.enter"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6$1.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i8$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NamedFilterSelector, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-named-filter-selector[entityName]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<form class=\"form-container\" [formGroup]=\"form\">\n  <mat-autocomplete-field\n    formControlName=\"namedFilter\"\n    [config]=\"autocompleteFields.namedFilter\"\n    [placeholder]=\"'COMMON.NAMED_FILTER.TITLE' | translate\"\n    [clearable]=\"true\"\n  >\n    <ng-container matSuffix *ngIf=\"showButtons\">\n      <button\n        mat-icon-button\n        [color]=\"'primary'\"\n        [disabled]=\"saveDisabled\"\n        [title]=\"'COMMON.NAMED_FILTER.SAVE' | translate\"\n        (click)=\"save()\"\n      >\n        <mat-icon>save</mat-icon>\n        <mat-icon *ngIf=\"isNew\" class=\"icon-secondary\" style=\"left: 12px; top: 0px\">add</mat-icon>\n      </button>\n      <button\n        mat-icon-button\n        [disabled]=\"deleteDisabled\"\n        [title]=\"'COMMON.NAMED_FILTER.DELETE' | translate\"\n        (click)=\"delete()\"\n      >\n        <mat-icon>delete</mat-icon>\n      </button>\n      <button mat-icon-button [matMenuTriggerFor]=\"moreMenu\">\n        <mat-icon>more_vert</mat-icon>\n      </button>\n      <mat-menu #moreMenu=\"matMenu\">\n        <button mat-menu-item (click)=\"export()\" [disabled]=\"isNew\">\n          <ion-label>\n            <mat-icon>file_download</mat-icon>\n            <span>{{ 'COMMON.NAMED_FILTER.EXPORT' | translate }}</span>\n          </ion-label>\n        </button>\n        <button mat-menu-item (click)=\"import($event)\">\n          <ion-label>\n            <mat-icon>file_upload</mat-icon>\n            <span>{{ 'COMMON.NAMED_FILTER.IMPORT' | translate }}</span>\n          </ion-label>\n        </button>\n      </mat-menu>\n    </ng-container>\n  </mat-autocomplete-field>\n</form>\n", styles: [".filter-name-container{background:transparent!important;overflow:hidden}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1$3.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }, { type: i1.ToastController }, { type: i1.PopoverController }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [APP_NAMED_FILTER_SERVICE]
+                }] }]; }, propDecorators: { entityName: [{
+                type: Input
+            }], filterContentProvider: [{
+                type: Input
+            }], filterFormDirty: [{
+                type: Input
+            }], showButtons: [{
+                type: Input
+            }], exportFileNamePrefix: [{
+                type: Input
+            }], filterSelected: [{
+                type: Output
+            }], filterDeleted: [{
+                type: Output
+            }], autocompleteField: [{
+                type: ViewChild,
+                args: [MatAutocompleteField]
+            }] } });
+
+class SharedNamedFilterModule {
+}
+SharedNamedFilterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SharedNamedFilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SharedNamedFilterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: SharedNamedFilterModule, declarations: [NamedFilterSelector], imports: [CommonModule, IonicModule, i1$2.TranslateModule, SharedMatAutocompleteModule, ReactiveFormsModule, SharedMaterialModule], exports: [NamedFilterSelector] });
+SharedNamedFilterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SharedNamedFilterModule, imports: [CommonModule, IonicModule, TranslateModule.forChild(), SharedMatAutocompleteModule, ReactiveFormsModule, SharedMaterialModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SharedNamedFilterModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, IonicModule, TranslateModule.forChild(), SharedMatAutocompleteModule, ReactiveFormsModule, SharedMaterialModule],
+                    declarations: [NamedFilterSelector],
+                    exports: [NamedFilterSelector],
+                }]
+        }] });
+
 function scrollFactory(overlay) {
     return () => overlay.scrollStrategies.close();
 }
@@ -20172,7 +20985,8 @@ SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
         SharedDirectivesModule,
         SharedPipesModule,
         SharedHotkeysModule,
-        SharedToolbarModule], exports: [CommonModule,
+        SharedToolbarModule,
+        SharedNamedFilterModule], exports: [CommonModule,
         IonicModule,
         TranslateModule,
         ReactiveFormsModule,
@@ -20187,6 +21001,7 @@ SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
         SharedPipesModule,
         SharedHotkeysModule,
         SharedToolbarModule,
+        SharedNamedFilterModule,
         // Components
         AppFormField,
         AppLoadingSpinner,
@@ -20207,7 +21022,8 @@ SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
         SharedDirectivesModule,
         SharedPipesModule,
         SharedHotkeysModule,
-        SharedToolbarModule, CommonModule,
+        SharedToolbarModule,
+        SharedNamedFilterModule, CommonModule,
         IonicModule,
         TranslateModule,
         ReactiveFormsModule,
@@ -20221,7 +21037,8 @@ SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
         SharedDirectivesModule,
         SharedPipesModule,
         SharedHotkeysModule,
-        SharedToolbarModule] });
+        SharedToolbarModule,
+        SharedNamedFilterModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SharedModule, decorators: [{
             type: NgModule,
             args: [{
@@ -20239,7 +21056,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         SharedDirectivesModule,
                         SharedPipesModule,
                         SharedHotkeysModule,
-                        SharedToolbarModule
+                        SharedToolbarModule,
+                        SharedNamedFilterModule
                     ],
                     declarations: [
                         // Components
@@ -20266,6 +21084,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         SharedPipesModule,
                         SharedHotkeysModule,
                         SharedToolbarModule,
+                        SharedNamedFilterModule,
                         // Components
                         AppFormField,
                         AppLoadingSpinner,
@@ -21579,157 +22398,66 @@ class ResizableComponent {
             return;
         if (this.debug)
             console.info(`resize:${width}`);
-        this.minWidth = width + 'px';
-        this.maxWidth = width + 'px';
-        if (!opts || opts.emitEvent) {
-            this.sizeChanged.emit(width);
-        }
-    }
-    onFit(opts) {
-        if (!this.resizable)
-            return;
-        if (this.debug)
-            console.info('fit');
-        this.width = 'auto';
-        this.minWidth = null;
-        this.maxWidth = null;
-        if (!opts || opts.emitEvent) {
-            this.sizeChanged.emit(undefined);
-        }
-    }
-}
-ResizableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ResizableComponent, deps: [{ token: i6$5.MatColumnDef, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-ResizableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ResizableComponent, selector: "th[resizable]", inputs: { resizable: "resizable" }, outputs: { sizeChanged: "sizeChanged" }, host: { properties: { "style.width": "this.width", "style.min-width": "this.minWidth", "style.max-width": "this.maxWidth" } }, ngImport: i0, template: "<div class=\"wrapper\">\n  <div class=\"content\">\n    <ng-content></ng-content>\n  </div>\n  <div class=\"bar\" [class.cdk-visually-hidden]=\"!resizable\" (resizable)=\"onResize($event)\" (fit)=\"onFit()\"></div>\n</div>\n", styles: [":host:last-child .bar{display:none}.wrapper{display:flex;justify-content:flex-end;align-items:center}.content{flex:1}.bar{height:var(--app-table-header-height, 55px);width:10px;justify-self:flex-end;border-left:4px solid transparent;border-right:4px solid transparent;background:var(--ion-color-secondary);background-clip:content-box;cursor:ew-resize;opacity:0;transition:opacity .3s}.bar:hover,.bar:active{opacity:1}:host-context(.mat-table-sticky) .bar{width:12px!important}\n"], dependencies: [{ kind: "directive", type: ResizableDirective, selector: "[resizable]", outputs: ["resizable", "fit"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ResizableComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'th[resizable]', template: "<div class=\"wrapper\">\n  <div class=\"content\">\n    <ng-content></ng-content>\n  </div>\n  <div class=\"bar\" [class.cdk-visually-hidden]=\"!resizable\" (resizable)=\"onResize($event)\" (fit)=\"onFit()\"></div>\n</div>\n", styles: [":host:last-child .bar{display:none}.wrapper{display:flex;justify-content:flex-end;align-items:center}.content{flex:1}.bar{height:var(--app-table-header-height, 55px);width:10px;justify-self:flex-end;border-left:4px solid transparent;border-right:4px solid transparent;background:var(--ion-color-secondary);background-clip:content-box;cursor:ew-resize;opacity:0;transition:opacity .3s}.bar:hover,.bar:active{opacity:1}:host-context(.mat-table-sticky) .bar{width:12px!important}\n"] }]
-        }], ctorParameters: function () { return [{ type: i6$5.MatColumnDef, decorators: [{
-                    type: Optional
-                }] }]; }, propDecorators: { resizable: [{
-                type: Input
-            }], sizeChanged: [{
-                type: Output
-            }], width: [{
-                type: HostBinding,
-                args: ['style.width']
-            }], minWidth: [{
-                type: HostBinding,
-                args: ['style.min-width']
-            }], maxWidth: [{
-                type: HostBinding,
-                args: ['style.max-width']
-            }] } });
-
-class ResizableModule {
-}
-ResizableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ResizableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ResizableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: ResizableModule, declarations: [ResizableComponent, ResizableDirective], exports: [ResizableComponent, ResizableDirective] });
-ResizableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ResizableModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ResizableModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [ResizableComponent, ResizableDirective],
-                    exports: [ResizableComponent, ResizableDirective],
-                }]
-        }] });
-
-function mergeLoadResult(res1, res2) {
-    return {
-        data: (res1.data || []).concat(...res2.data),
-        total: ((res1.total || res1.data?.length || 0) + (res2.total || res2.data?.length || 0))
-    };
-}
-
-class EntityFilter extends Entity {
-    /**
-     * Compose some filter functions: all should return true
-     * @param filterFns
-     */
-    static composeFilters(filterFns) {
-        if (isEmptyArray(filterFns))
-            return undefined;
-        return (entity) => (filterFns || []).every(fn => fn(entity));
-    }
-    static compose(filters) {
-        const filterFns = (filters || []).reduce((res, f) => {
-            const fns = f.buildFilter();
-            if (!fns)
-                return res;
-            return res.concat(fns);
-        }, []);
-        return this.composeFilters(filterFns);
-    }
-    /**
-     * Compose some filter functions: all should return true
-     * @param filterFns
-     */
-    static composeFns(filterFns) {
-        if (isEmptyArray(filterFns))
-            return undefined;
-        return (entity) => (filterFns || []).every(fn => fn(entity));
-    }
-    constructor(__typename) {
-        super(__typename);
-    }
-    /**
-     * Clean a filter, before sending to the pod (e.g convert dates, remove internal properties, etc.)
-     */
-    asPodObject() {
-        return this.asObject(MINIFY_ENTITY_FOR_POD);
-    }
-    isEmpty() {
-        return this.countNotEmptyCriteria() === 0;
-    }
-    countNotEmptyCriteria() {
-        const json = this.asPodObject();
-        return Object.keys(json)
-            .filter(key => this.isCriteriaNotEmpty(key, json[key]))
-            .length;
-    }
-    asFilterFn() {
-        const filterFns = this.buildFilter();
-        return EntityFilter.composeFns(filterFns);
-    }
-    buildFilter() {
-        // Can be completed by subclasses
-        return [];
-    }
-    isCriteriaNotEmpty(key, value) {
-        // Can be overridden by subclasses
-        return value !== undefined
-            && value !== null
-            && (
-            // not empty string
-            (typeof value === 'string' && value.trim() !== '')
-                // valid number
-                || (typeof value === 'number' && !isNaN(value))
-                // valid boolean
-                || (typeof value === 'boolean')
-                // not empty array
-                || (Array.isArray(value) && value.length > 0)
-                // entity with an id
-                || ReferentialUtils.isNotEmpty(value));
-    }
-}
-class EntityFilterUtils {
-    static isEntityFilter(obj) {
-        return obj && obj.asPodObject && obj.asFilterFn && true || false;
-    }
-    static fromObject(source, filterType) {
-        if (!source)
-            return source;
-        if (isInstanceOf(source, filterType))
-            return source;
-        const target = new filterType();
-        if (EntityFilterUtils.isEntityFilter(target)) {
-            target.fromObject(source);
+        this.minWidth = width + 'px';
+        this.maxWidth = width + 'px';
+        if (!opts || opts.emitEvent) {
+            this.sizeChanged.emit(width);
         }
-        else {
-            Object.assign(target, source);
+    }
+    onFit(opts) {
+        if (!this.resizable)
+            return;
+        if (this.debug)
+            console.info('fit');
+        this.width = 'auto';
+        this.minWidth = null;
+        this.maxWidth = null;
+        if (!opts || opts.emitEvent) {
+            this.sizeChanged.emit(undefined);
         }
-        return target;
     }
 }
+ResizableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ResizableComponent, deps: [{ token: i6$5.MatColumnDef, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+ResizableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ResizableComponent, selector: "th[resizable]", inputs: { resizable: "resizable" }, outputs: { sizeChanged: "sizeChanged" }, host: { properties: { "style.width": "this.width", "style.min-width": "this.minWidth", "style.max-width": "this.maxWidth" } }, ngImport: i0, template: "<div class=\"wrapper\">\n  <div class=\"content\">\n    <ng-content></ng-content>\n  </div>\n  <div class=\"bar\" [class.cdk-visually-hidden]=\"!resizable\" (resizable)=\"onResize($event)\" (fit)=\"onFit()\"></div>\n</div>\n", styles: [":host:last-child .bar{display:none}.wrapper{display:flex;justify-content:flex-end;align-items:center}.content{flex:1}.bar{height:var(--app-table-header-height, 55px);width:10px;justify-self:flex-end;border-left:4px solid transparent;border-right:4px solid transparent;background:var(--ion-color-secondary);background-clip:content-box;cursor:ew-resize;opacity:0;transition:opacity .3s}.bar:hover,.bar:active{opacity:1}:host-context(.mat-table-sticky) .bar{width:12px!important}\n"], dependencies: [{ kind: "directive", type: ResizableDirective, selector: "[resizable]", outputs: ["resizable", "fit"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ResizableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'th[resizable]', template: "<div class=\"wrapper\">\n  <div class=\"content\">\n    <ng-content></ng-content>\n  </div>\n  <div class=\"bar\" [class.cdk-visually-hidden]=\"!resizable\" (resizable)=\"onResize($event)\" (fit)=\"onFit()\"></div>\n</div>\n", styles: [":host:last-child .bar{display:none}.wrapper{display:flex;justify-content:flex-end;align-items:center}.content{flex:1}.bar{height:var(--app-table-header-height, 55px);width:10px;justify-self:flex-end;border-left:4px solid transparent;border-right:4px solid transparent;background:var(--ion-color-secondary);background-clip:content-box;cursor:ew-resize;opacity:0;transition:opacity .3s}.bar:hover,.bar:active{opacity:1}:host-context(.mat-table-sticky) .bar{width:12px!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: i6$5.MatColumnDef, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { resizable: [{
+                type: Input
+            }], sizeChanged: [{
+                type: Output
+            }], width: [{
+                type: HostBinding,
+                args: ['style.width']
+            }], minWidth: [{
+                type: HostBinding,
+                args: ['style.min-width']
+            }], maxWidth: [{
+                type: HostBinding,
+                args: ['style.max-width']
+            }] } });
+
+class ResizableModule {
+}
+ResizableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ResizableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ResizableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: ResizableModule, declarations: [ResizableComponent, ResizableDirective], exports: [ResizableComponent, ResizableDirective] });
+ResizableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ResizableModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ResizableModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ResizableComponent, ResizableDirective],
+                    exports: [ResizableComponent, ResizableDirective],
+                }]
+        }] });
+
+function mergeLoadResult(res1, res2) {
+    return {
+        data: (res1.data || []).concat(...res2.data),
+        total: ((res1.total || res1.data?.length || 0) + (res2.total || res2.data?.length || 0))
+    };
+}
 
 // @dynamic
 // eslint-disable-next-line @angular-eslint/directive-class-suffix
@@ -22047,1075 +22775,532 @@ class InMemoryEntitiesService extends StartableObservableService {
             this.savingSubject.next(true);
         }
     }
-    markAsSaved() {
-        if (this.savingSubject.value) {
-            this.savingSubject.next(false);
-        }
-    }
-}
-InMemoryEntitiesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: InMemoryEntitiesService, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-InMemoryEntitiesService.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: InMemoryEntitiesService, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: InMemoryEntitiesService, decorators: [{
-            type: Directive
-        }], ctorParameters: function () { return [{ type: undefined }, { type: undefined }, { type: undefined }]; } });
-
-// @dynamic
-class JobUtils {
-    static defers(runnableList, opts) {
-        return runnableList.map(runnable => JobUtils.defer(runnable, opts));
-    }
-    static defer(runnable, opts) {
-        return defer(() => JobUtils.run(runnable, opts));
-    }
-    static run(runnable, opts) {
-        const progression = new BehaviorSubject(0);
-        runnable({ ...opts, progression })
-            .then(() => {
-            if (opts?.maxProgression)
-                progression.next(opts.maxProgression);
-            progression.complete();
-        })
-            .catch(err => progression.error(err));
-        return progression;
-    }
-    static async fetchAllPages(loadPageFn, opts) {
-        const maxProgression = toNumber(opts?.maxProgression, 100);
-        const progression = opts?.progression;
-        let total;
-        let pageCount;
-        let progressionStep;
-        let currentPageDataCount;
-        const fetchSize = toNumber(opts?.fetchSize, 1000);
-        if (fetchSize <= 0)
-            throw new Error('Unable to fetch pages: invalid fetchSize: ' + fetchSize);
-        let offset = 0;
-        let data = [];
-        do {
-            if (opts && opts.logPrefix)
-                console.debug(`${opts.logPrefix} Fetching page #${offset / fetchSize}...`);
-            // Fetch a page
-            const res = await loadPageFn(offset, fetchSize);
-            // Concat to previous result
-            data = data.concat(res.data);
-            // Compute variables, for next loop
-            currentPageDataCount = res.data && res.data.length || 0;
-            offset += currentPageDataCount;
-            // Set total count (only once)
-            if (isNil(total) && isNotNil(res.total)) {
-                total = res.total;
-                // Compute the number of page
-                pageCount = Math.round(res.total / fetchSize + 0.5); // Round to HALF_UP integer
-                // Compute step, by dividing maxProgression by number of page
-                if (progression) {
-                    progressionStep = maxProgression / pageCount;
-                    // DEBUG
-                    if (opts && opts.logPrefix)
-                        console.debug(`${opts.logPrefix} {pageCount: ${pageCount}, progress: ${progression.value?.toFixed(2)}, pageProgressStep: ${progressionStep?.toFixed(1)}}`);
-                }
-            }
-            // Increment progression on each iteration (if possible)
-            if (isNotNil(progressionStep)) {
-                progression.next(progression.value + progressionStep);
-            }
-            if (opts?.onPageLoaded)
-                opts.onPageLoaded(res);
-        } while (currentPageDataCount > 0 && ((isNil(total) && currentPageDataCount === fetchSize) || (isNotNil(total) && (offset < total))));
-        // Complete progression to reach progressionStep value (because of round)
-        if (isNotNil(progressionStep)) {
-            // If total return by loadAll was bad !
-            if (isNotNil(total) && data.length < total) {
-                console.warn(`A function loadAll() returned a bad total (less than all page's data)! Expected ${total} but fetch ${data.length}`);
-                total = data.length;
-                pageCount = Math.round(data.length / fetchSize + 0.5);
-            }
-            // Compute final increment, using the real page count
-            progressionStep = Math.max(0, maxProgression - (progressionStep * pageCount));
-        }
-        // Or increment once (e.g. when total is not known, in received LoadResult)
-        else if (progression) {
-            progressionStep = maxProgression;
-        }
-        // DEBUG
-        if (opts && opts.logPrefix)
-            console.debug(`${opts.logPrefix} All pages fetched - {progress: ${progression.value?.toFixed(2)}, lastProgressStep: ${progressionStep?.toFixed(1)}`);
-        // Final increment
-        if (progression && progressionStep > 0) {
-            progression.next(progression.value + progressionStep);
-        }
-        return {
-            data,
-            total
-        };
-    }
-}
-
-class IPosition {
-}
-class GeolocationUtils {
-    static isNotNilAndValid(position, opts) {
-        if (!position || isNil(position.latitude) || isNil(position.longitude))
-            return false;
-        // Invalid lat/lon
-        if (position.latitude < -90 || position.latitude > 90
-            || position.longitude < -180 || position.longitude > 180) {
-            // /!\ Log in console, because should never occur
-            if (opts?.debug)
-                console.warn('Invalid lat/long position:  ', position);
-            return false;
-        }
-        // OK: valid
-        return true;
-    }
-    static isNilOrInvalid(position, opts) {
-        return !GeolocationUtils.isNotNilAndValid(position, opts);
-    }
-    static computeDistanceInMiles(position1, position2) {
-        // Invalid position(s): skip
-        if (GeolocationUtils.isNilOrInvalid(position1, { debug: true })
-            || GeolocationUtils.isNilOrInvalid(position2, { debug: true }))
-            return;
-        const latitude1Rad = Math.PI * position1.latitude / 180;
-        const longitude1Rad = Math.PI * position1.longitude / 180;
-        const latitude2Rad = Math.PI * position2.latitude / 180;
-        const longitude2Rad = Math.PI * position2.longitude / 180;
-        let distance = 2 * 6371 * Math.asin(Math.sqrt(Math.pow(Math.sin((latitude1Rad - latitude2Rad) / 2), 2)
-            + Math.cos(latitude1Rad) * Math.cos(latitude2Rad) * Math.pow(Math.sin((longitude2Rad - longitude1Rad) / 2), 2)));
-        distance = Math.round((((distance / 1.852) + Number.EPSILON) * 100)) / 100;
-        return distance;
-    }
-    /**
-     * Get the position by geo loc sensor
-     */
-    static async getCurrentPosition(platform, options) {
-        // Use Capacitor plugin
-        try {
-            console.info(`[geolocation-utils] Get current geo location, using Capacitor...(timeout: ${options?.timeout})`);
-            const pos = await Geolocation.getCurrentPosition(options);
-            return {
-                latitude: pos.coords.latitude,
-                longitude: pos.coords.longitude
-            };
-        }
-        catch (err) {
-            // If capacitor : throw error (cannot fallback to browser geolocation, because of browser security limitation)
-            if (platform.is('capacitor')) {
-                console.error(`[geolocation-utils] Cannot get current geo location, using Capacitor: ${err?.message || ''}`);
-                // Detect a permission error, to add code
-                // FIXME - Capacitor use hardcoded strings! (see https://github.com/ionic-team/capacitor-plugins)
-                const message = (err?.message || '').toLowerCase();
-                if (message.includes('location permission was denied') || message.includes('location disabled')) {
-                    throw { ...err, code: GeolocationPositionError.PERMISSION_DENIED };
-                }
-                throw err;
-            }
-        }
-        // Or fallback to navigator
-        console.info('[geolocation-utils] Get current geo location, using browser...');
-        return new Promise((resolve, reject) => {
-            navigator.geolocation.getCurrentPosition((res) => {
-                resolve({
-                    latitude: res.coords.latitude,
-                    longitude: res.coords.longitude
-                });
-            }, (err) => {
-                let message = err?.message || err;
-                message = typeof message === 'string' ? message : JSON.stringify(message);
-                console.error('[geolocation-utils] Cannot get current geo location, using browser:' + message);
-                reject(err);
-            }, options);
-        });
-    }
-}
-
-//@dynamic
-class CsvUtils {
-    static exportToFile(rows, opts) {
-        if (!rows || !rows.length)
-            return; // Skip if empty
-        // Create text content
-        const separator = opts?.separator || ',';
-        const protectCellRegexp = new RegExp("/(\"|" + separator + "|\n)/g");
-        const keys = Object.keys(rows[0]);
-        const headers = opts?.headers || keys;
-        const textContent = 
-        // Header row
-        headers.join(separator) + '\n' +
-            // Data rows
-            rows.map(row => {
-                return keys.map(k => {
-                    const cell = row[k] === null || row[k] === undefined ? '' : row[k];
-                    let cellStr = cell instanceof Date
-                        ? cell.toLocaleString()
-                        : cell.toString().replace(/"/g, '""');
-                    if (protectCellRegexp.test(cellStr)) {
-                        cellStr = `"${cellStr}"`;
-                    }
-                    return cellStr;
-                }).join(separator);
-            }).join('\n');
-        // Write to file
-        FilesUtils.writeTextToFile(textContent, {
-            type: 'text/csv',
-            filename: 'export.csv',
-            ...opts,
-        });
-    }
-    static parseFile(file, opts) {
-        return FilesUtils.readAsText(file, opts?.encoding)
-            .pipe(map(e => {
-            if (e.type === HttpEventType.UploadProgress) {
-                const loaded = Math.round(e.loaded * 0.8);
-                return { ...e, loaded };
-            }
-            else if (e instanceof FileResponse) {
-                const body = e.body;
-                const data = CsvUtils.parseCSV(body, opts);
-                return new FileResponse({ body: data });
-            }
-        }), filter(isNotNil));
-    }
-    static parseCSV(body, opts) {
-        const separator = opts?.separator || ',';
-        const skipEmptyLine = !opts || opts.skipEmptyLine !== false;
-        // Protect special characters (quote and /n)
-        body = body.replace('""', '<quote>') // Protect double quote
-            .replace(/("[^\n"]+)\n\r?/gm, '"$1<br>') // Protect \n inside a quoted expression
-            .replace(/\n\r/gm, '\n'); // Windows CR
-        const headerAndRows = body.split('\n', 2);
-        const headers = headerAndRows[0].split(separator);
-        return body.split('\n') // split into rows
-            .filter(line => !skipEmptyLine || line.trim().length > 0) // Skip empty line
-            .map(line => {
-            const cells = line.split(separator, headers.length) // split into cells
-                .map(cell => cell.replace(/^"([^"]*)"$/, '$1')) // Clean trailing quotes
-                .map(cell => cell.replace('<quote>', '"')) // restore protected quote
-                .map(cell => cell.replace('<br>', '\n')) // restore protected br
-            ;
-            return cells;
-        });
-    }
-}
-
-/**
- * Define here theme colors
- */
-const rgbArrayMap = {
-    white: [255, 255, 255],
-    primary: [20, 67, 145],
-    secondary: [117, 196, 253],
-    tertiary: [91, 94, 244],
-    danger: [245, 61, 61],
-    light: [244, 245, 248],
-    medium: [152, 154, 162],
-    dark: [34, 36, 40],
-    red: [255, 0, 0],
-    green: [0, 255, 0],
-    blue: [0, 0, 255]
-};
-// Fill a map of Color objects
-const colorsMap = {};
-/**
- * Useful class for color conversion
- */
-// @dynamic
-class Color {
-    constructor(_rgbArray, _opacity, _name = 'custom') {
-        this._rgbArray = _rgbArray;
-        this._opacity = _opacity;
-        this._name = _name;
-    }
-    // Helper method, to retrieve a color
-    static get(name) {
-        return colorsMap[name];
-    }
-    static parseRgba(rgba) {
-        if (!rgba || (!rgba.startsWith('rgb(') && !rgba.startsWith('rgba(')))
-            return null;
-        // Parse parts
-        const parts = rgba
-            .replace('rgb(', '')
-            .replace('rgba(', '')
-            .replace(')', '')
-            .split(',');
-        if (parts.length !== 3 && parts.length !== 4)
-            return null;
-        return new Color([+parts[0], +parts[1], +parts[2]], parts.length === 4 && +parts[3] || 1, 'custom');
-    }
-    get name() {
-        return this._name;
-    }
-    get opacity() {
-        return isNotNil(this._opacity) ? this._opacity : 1;
-    }
-    get rgb() {
-        return this._rgbArray;
-    }
-    get r() {
-        return this._rgbArray[0];
-    }
-    get g() {
-        return this._rgbArray[1];
-    }
-    get b() {
-        return this._rgbArray[2];
-    }
-    rgba(opacity) {
-        opacity = isNotNil(opacity) ? opacity : this._opacity;
-        if (isNil(opacity) || opacity < 0 || opacity > 1) {
-            return 'rgb(' + this._rgbArray.join(',') + ')';
-        }
-        return 'rgba(' + this._rgbArray.join(',') + ',' + opacity + ')';
-    }
-}
-Color.transparent = function () {
-    return new Color([0, 0, 0], 0, 'translucent');
-};
-/**
- * Helper class for colors scale
- */
-// @dynamic
-class ColorScale {
-    constructor(colorArray, options) {
-        options = options || {};
-        // reserved last colors for value > max
-        const nbIntervalBeforeUpper = !options.upperMax ? colorArray.length : (colorArray.length - 1);
-        this._min = options.min || 0;
-        this._max = options.max || nbIntervalBeforeUpper;
-        this._rangeSize = Math.round((this._max - this._min) / nbIntervalBeforeUpper);
-        this._legendItems = this.computeLegendItems(colorArray);
-    }
-    static default() {
-        return ColorScale.custom(25);
-    }
-    /**
-     * Create a array with the given color
-     **/
-    static fix(length, colorName) {
-        return Array.apply(null, Array(length || 25))
-            .map(String.prototype.valueOf, Color.get(colorName || 'primary').rgba(0.5));
-    }
-    get min() {
-        return this._min;
-    }
-    get max() {
-        return this._max;
-    }
-    get legend() {
-        return {
-            items: this._legendItems
-        };
-    }
-    getValueColor(value) {
-        return this.getLegendForValue(value).color;
-    }
-    getLegendForValue(value) {
-        if (value <= this._min)
-            return this._legendItems[0];
-        if (value >= this._max)
-            return this._legendItems[this._legendItems.length - 1];
-        const index = Math.floor(value * (this._legendItems.length - 1) / this._max);
-        return this._legendItems[index];
-    }
-    getLegendAtIndex(index) {
-        return this._legendItems[index];
-    }
-    computeLegendItems(colorArray) {
-        return colorArray.map((color, index) => {
-            const start = index * this._rangeSize;
-            const end = start + this._rangeSize;
-            return {
-                color: new Color(color),
-                label: (end < this._max) ? `${start.toLocaleString()} - ${end.toLocaleString()}` : ` >= ${start}`
-            };
-        });
-    }
-}
-ColorScale.custom = (count, options) => {
-    options = options || {};
-    return new ColorScale(linearColorGradientWithIntermediate(count, {
-        startColor: options.startColor || undefined,
-        mainColor: options.mainColor || undefined,
-        mainColorIndex: isNotNil(options.mainColorIndex) ? options.mainColorIndex : undefined,
-        endColor: options.endColor || undefined
-    }), options);
-};
-// Fill colorsMap
-Object.getOwnPropertyNames(rgbArrayMap)
-    .forEach((key) => {
-    colorsMap[key] = new Color(rgbArrayMap[key], 1, key);
-});
-/**
- * Internal function, that create a colors scale, using iteration
- *
- * @param count
- * @param opacity
- * @param startColor
- * @param startState
- * @returns
- */
-function linearColorGradientWithIntermediate(count, options) {
-    options = options || {};
-    // From [0,1]
-    options.startColor = options.startColor || [255, 255, 190]; // default start = creme
-    options.mainColorIndex = options.mainColorIndex && options.mainColorIndex < count - 1 ? options.mainColorIndex : count - 1;
-    options.endColor = options.endColor || [255, 0, 0]; // default main = red
-    if (!options.mainColor) {
-        return linearColorGradient(count, {
-            startColor: options.startColor,
-            endColor: options.endColor
-        });
-    }
-    else {
-        // Step 1: startColor -> mainColor
-        const result = linearColorGradient(options.mainColorIndex + 1, {
-            startColor: options.startColor,
-            endColor: options.mainColor
-        });
-        // Step 2: mainColor -> endColor
-        if (options.mainColorIndex < count - 1) {
-            return result.concat(linearColorGradient(count - options.mainColorIndex, {
-                startColor: options.mainColor,
-                endColor: options.endColor
-            }));
-        }
-        else {
-            return result;
-        }
-    }
-}
-function linearColorGradient(count, options) {
-    options = options || {};
-    // From [0,1]
-    options.startColor = options.startColor || [255, 255, 255]; // default start = white
-    options.endColor = options.endColor || [255, 0, 0]; // default end = red
-    const result = [];
-    const color = options.startColor.slice(); // copy the start color
-    const delta = [
-        Math.round((options.endColor[0] - options.startColor[0]) / count),
-        Math.round((options.endColor[1] - options.startColor[1]) / count),
-        Math.round((options.endColor[2] - options.startColor[2]) / count)
-    ];
-    for (let i = 0; i < count - 1; i++) {
-        for (let j = 0; j < 3; j++) {
-            color[j] += delta[j];
-        }
-        result.push(color.slice());
-    }
-    // Force last color = end color
-    result.push(options.endColor.slice());
-    // Output as array
-    return result;
-}
-
-class DebugComponent {
-    constructor(environment) {
-        this.title = '';
-        this.enable = null;
-        this.expanded = false;
-        this.enable = !environment || !environment.production;
-    }
-    toggle() {
-        this.expansionPanel.toggle();
+    markAsSaved() {
+        if (this.savingSubject.value) {
+            this.savingSubject.next(false);
+        }
     }
 }
-DebugComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DebugComponent, deps: [{ token: ENVIRONMENT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-DebugComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DebugComponent, selector: "app-debug", inputs: { title: "title", enable: "enable", expanded: "expanded" }, viewQueries: [{ propertyName: "expansionPanel", first: true, predicate: ["expansionPanel"], descendants: true }], ngImport: i0, template: "<!-- debug -->\n<ion-item tappable (click)=\"toggle()\" lines=\"none\" color=\"secondary50\">\n  <ion-icon slot=\"start\" name=\"bug\" ></ion-icon>\n  <ion-label color=\"primary\">Debug {{title}}</ion-label>\n  <mat-icon slot=\"end\">{{expansionPanel.expanded ? 'expand_less' : 'expand_more' }}</mat-icon>\n</ion-item>\n<mat-expansion-panel #expansionPanel [(expanded)]=\"expanded\">\n  <ion-text color=\"primary100\" >\n    <div class=\"ion-margin-start\">\n      <ng-content></ng-content>\n    </div>\n  </ion-text>\n</mat-expansion-panel>\n", styles: ["ion-item{cursor:pointer!important}ion-item mat-icon,ion-item ion-icon{color:var(--ion-color-primary)}.mat-expansion-panel{--expansion-panel-padding: 4px;background:var(--ion-color-secondary50)!important}.mat-expansion-panel.mat-expanded{margin-bottom:4px!important}.mat-expansion-panel .mat-expansion-panel-body *{color:var(--ion-color-primary100)}\n"], dependencies: [{ kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.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: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i9$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DebugComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-debug', template: "<!-- debug -->\n<ion-item tappable (click)=\"toggle()\" lines=\"none\" color=\"secondary50\">\n  <ion-icon slot=\"start\" name=\"bug\" ></ion-icon>\n  <ion-label color=\"primary\">Debug {{title}}</ion-label>\n  <mat-icon slot=\"end\">{{expansionPanel.expanded ? 'expand_less' : 'expand_more' }}</mat-icon>\n</ion-item>\n<mat-expansion-panel #expansionPanel [(expanded)]=\"expanded\">\n  <ion-text color=\"primary100\" >\n    <div class=\"ion-margin-start\">\n      <ng-content></ng-content>\n    </div>\n  </ion-text>\n</mat-expansion-panel>\n", styles: ["ion-item{cursor:pointer!important}ion-item mat-icon,ion-item ion-icon{color:var(--ion-color-primary)}.mat-expansion-panel{--expansion-panel-padding: 4px;background:var(--ion-color-secondary50)!important}.mat-expansion-panel.mat-expanded{margin-bottom:4px!important}.mat-expansion-panel .mat-expansion-panel-body *{color:var(--ion-color-primary100)}\n"] }]
-        }], ctorParameters: function () { return [{ type: Environment, decorators: [{
-                    type: Inject,
-                    args: [ENVIRONMENT]
-                }, {
-                    type: Optional
-                }] }]; }, propDecorators: { title: [{
-                type: Input
-            }], enable: [{
-                type: Input
-            }], expanded: [{
-                type: Input
-            }], expansionPanel: [{
-                type: ViewChild,
-                args: ['expansionPanel']
-            }] } });
-
-class SharedDebugModule {
-}
-SharedDebugModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SharedDebugModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SharedDebugModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: SharedDebugModule, declarations: [DebugComponent], imports: [CommonModule,
-        IonicModule,
-        MatExpansionModule,
-        MatIconModule, i1$2.TranslateModule, MatExpansionModule], exports: [DebugComponent,
-        TranslateModule] });
-SharedDebugModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SharedDebugModule, imports: [CommonModule,
-        IonicModule,
-        MatExpansionModule,
-        MatIconModule,
-        TranslateModule.forChild(),
-        MatExpansionModule, TranslateModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SharedDebugModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        IonicModule,
-                        MatExpansionModule,
-                        MatIconModule,
-                        TranslateModule.forChild(),
-                        MatExpansionModule
-                    ],
-                    declarations: [
-                        DebugComponent
-                    ],
-                    exports: [
-                        DebugComponent,
-                        TranslateModule
-                    ]
-                }]
-        }] });
+InMemoryEntitiesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: InMemoryEntitiesService, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+InMemoryEntitiesService.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: InMemoryEntitiesService, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: InMemoryEntitiesService, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: undefined }, { type: undefined }, { type: undefined }]; } });
 
 // @dynamic
-// eslint-disable-next-line @angular-eslint/directive-class-suffix
-class BaseEntityService extends BaseGraphqlService {
-    constructor(graphql, platform, dataType, filterType, options) {
-        super(graphql, environment);
-        this.graphql = graphql;
-        this.platform = platform;
-        this.dataType = dataType;
-        this.filterType = filterType;
-        this.queries = options.queries;
-        this.mutations = options.mutations || {};
-        this.subscriptions = options.subscriptions || {};
-        this.equalsFn = options.equalsFn || ((e1, e2) => EntityUtils.equals(e1, e2, 'id'));
-        this.isNewFn = options.isNewFn || ((e) => EntityUtils.isNotEmpty(e, 'id'));
-        this.defaultSortBy = options.defaultSortBy || 'id';
-        this.defaultSortDirection = options.defaultSortDirection || 'asc';
-        this.watchQueriesUpdatePolicy = options.watchQueriesUpdatePolicy || 'update-cache';
-        const obj = new dataType();
-        this._typename = obj.__typename || 'UnknownVO';
-        this._logTypeName = removeEnd(this._typename, 'VO');
-        // For DEV only
-        this._debug = !environment.production;
-    }
-    watch(id, opts) {
-        if (this._debug)
-            console.debug(this._logPrefix + `Watching ${this._logTypeName} {${id}}...`);
-        const variables = opts?.variables || { id };
-        const query = opts && opts.query || this.queries.load;
-        return this.graphql.watchQuery({
-            query,
-            variables,
-            fetchPolicy: opts && opts.fetchPolicy || undefined,
-            error: { code: ErrorCodes.LOAD_DATA_ERROR, message: 'REFERENTIAL.ERROR.LOAD_DATA_ERROR' }
-        })
-            .pipe(map(({ data }) => (!opts || opts.toEntity !== false)
-            ? (data && this.fromObject(data))
-            : data));
+class JobUtils {
+    static defers(runnableList, opts) {
+        return runnableList.map(runnable => JobUtils.defer(runnable, opts));
     }
-    async load(id, opts) {
-        if (this._debug)
-            console.debug(this._logPrefix + `Loading ${this._logTypeName} {${id}}...`);
-        const variables = opts?.variables || { id };
-        const query = opts?.query || this.queries.load;
-        const { data } = await this.graphql.query({
-            query,
-            variables,
-            fetchPolicy: opts && opts.fetchPolicy || undefined,
-            error: { code: ErrorCodes.LOAD_DATA_ERROR, message: 'REFERENTIAL.ERROR.LOAD_DATA_ERROR' }
-        });
-        // Convert to entity
-        return (!opts || opts.toEntity !== false)
-            ? (data && this.fromObject(data))
-            : data;
+    static defer(runnable, opts) {
+        return defer(() => JobUtils.run(runnable, opts));
     }
-    watchAll(offset, size, sortBy, sortDirection, filter, opts) {
-        filter = this.asFilter(filter);
-        const variables = {
-            ...(opts?.variables || {}),
-            offset: offset || 0,
-            size: size || 100,
-            sortBy: sortBy || this.defaultSortBy,
-            sortDirection: sortDirection || this.defaultSortDirection,
-            filter: filter && filter.asPodObject()
-        };
-        let now = this._debug && Date.now();
-        if (this._debug)
-            console.debug(this._logPrefix + `Watching ${this._logTypeName}...`, variables);
-        const withTotal = (!opts || opts.withTotal !== false) && this.queries.loadAllWithTotal && true;
-        const query = (opts && opts.query) // use given query
-            // Or get loadAll or loadAllWithTotal query
-            || (withTotal ? this.queries.loadAllWithTotal : this.queries.loadAll);
-        return this.mutableWatchQuery({
-            query,
-            variables,
-            // Force cached mutable query
-            queryName: withTotal ? 'LoadAllWithTotal' : 'LoadAll',
-            arrayFieldName: 'data',
-            totalFieldName: withTotal ? 'total' : undefined,
-            insertFilterFn: filter && filter.asFilterFn(),
-            error: { code: ErrorCodes.LOAD_DATA_ERROR, message: 'REFERENTIAL.ERROR.LOAD_DATA_ERROR' },
-            fetchPolicy: opts && opts.fetchPolicy || undefined
+    static run(runnable, opts) {
+        const progression = new BehaviorSubject(0);
+        runnable({ ...opts, progression })
+            .then(() => {
+            if (opts?.maxProgression)
+                progression.next(opts.maxProgression);
+            progression.complete();
         })
-            .pipe(map(({ data, total }) => {
-            // Convert to entity (if need)
-            const entities = (!opts || opts.toEntity !== false)
-                ? (data || []).map(json => this.fromObject(json))
-                : (data || []);
-            if (now) {
-                console.debug(this._logPrefix + `${this._logTypeName} loaded in ${Date.now() - now}ms`, entities);
-                now = null;
-            }
-            return { data: entities, total };
-        }));
+            .catch(err => progression.error(err));
+        return progression;
     }
-    async loadAll(offset, size, sortBy, sortDirection, filter, opts) {
-        const debug = this._debug && (!opts || opts.debug !== false);
-        filter = this.asFilter(filter);
-        const variables = {
-            ...(opts?.variables || {}),
-            offset: offset || 0,
-            size: size || 100,
-            sortBy: sortBy || 'id',
-            sortDirection: sortDirection || 'asc',
-            filter: filter && filter.asPodObject()
-        };
-        const now = Date.now();
-        if (debug)
-            console.debug(this._logPrefix + `Loading ${this._logTypeName}...`, variables);
-        const withTotal = (!opts || opts.withTotal !== false) && this.queries.loadAllWithTotal && true;
-        // use given query
-        const query = opts?.query
-            // Or get loadAll or loadAllWithTotal query
-            || (withTotal ? this.queries.loadAllWithTotal : this.queries.loadAll);
-        const { data, total } = await this.graphql.query({
-            query,
-            variables,
-            error: { code: ErrorCodes.LOAD_DATA_ERROR, message: 'ERROR.LOAD_DATA_ERROR' },
-            fetchPolicy: opts && opts.fetchPolicy || 'network-only'
-        });
-        const entities = (!opts || opts.toEntity !== false) ?
-            (data || []).map(json => this.fromObject(json)) :
-            (data || []);
-        if (debug)
-            console.debug(this._logPrefix + `${this._logTypeName} items loaded in ${Date.now() - now}ms`);
-        const result = {
-            data: entities,
-            total: total || entities.length
-        };
-        // Add fetch more capability, if total was fetched
-        if (withTotal) {
-            const nextOffset = (offset || 0) + entities.length;
-            if (nextOffset < result.total) {
-                result.fetchMore = () => this.loadAll(nextOffset, size, sortBy, sortDirection, filter, opts);
+    static async fetchAllPages(loadPageFn, opts) {
+        const maxProgression = toNumber(opts?.maxProgression, 100);
+        const progression = opts?.progression;
+        let total;
+        let pageCount;
+        let progressionStep;
+        let currentPageDataCount;
+        const fetchSize = toNumber(opts?.fetchSize, 1000);
+        if (fetchSize <= 0)
+            throw new Error('Unable to fetch pages: invalid fetchSize: ' + fetchSize);
+        let offset = 0;
+        let data = [];
+        do {
+            if (opts && opts.logPrefix)
+                console.debug(`${opts.logPrefix} Fetching page #${offset / fetchSize}...`);
+            // Fetch a page
+            const res = await loadPageFn(offset, fetchSize);
+            // Concat to previous result
+            data = data.concat(res.data);
+            // Compute variables, for next loop
+            currentPageDataCount = res.data && res.data.length || 0;
+            offset += currentPageDataCount;
+            // Set total count (only once)
+            if (isNil(total) && isNotNil(res.total)) {
+                total = res.total;
+                // Compute the number of page
+                pageCount = Math.round(res.total / fetchSize + 0.5); // Round to HALF_UP integer
+                // Compute step, by dividing maxProgression by number of page
+                if (progression) {
+                    progressionStep = maxProgression / pageCount;
+                    // DEBUG
+                    if (opts && opts.logPrefix)
+                        console.debug(`${opts.logPrefix} {pageCount: ${pageCount}, progress: ${progression.value?.toFixed(2)}, pageProgressStep: ${progressionStep?.toFixed(1)}}`);
+                }
             }
+            // Increment progression on each iteration (if possible)
+            if (isNotNil(progressionStep)) {
+                progression.next(progression.value + progressionStep);
+            }
+            if (opts?.onPageLoaded)
+                opts.onPageLoaded(res);
+        } while (currentPageDataCount > 0 && ((isNil(total) && currentPageDataCount === fetchSize) || (isNotNil(total) && (offset < total))));
+        // Complete progression to reach progressionStep value (because of round)
+        if (isNotNil(progressionStep)) {
+            // If total return by loadAll was bad !
+            if (isNotNil(total) && data.length < total) {
+                console.warn(`A function loadAll() returned a bad total (less than all page's data)! Expected ${total} but fetch ${data.length}`);
+                total = data.length;
+                pageCount = Math.round(data.length / fetchSize + 0.5);
+            }
+            // Compute final increment, using the real page count
+            progressionStep = Math.max(0, maxProgression - (progressionStep * pageCount));
         }
-        return result;
-    }
-    async countAll(filter, opts) {
-        // If no countAll query
-        if (!this.queries.countAll && !opts?.query) {
-            // Fail if no loadAll (cannot count)
-            if (!this.queries.loadAllWithTotal)
-                throw new Error('Not implemented');
-            // Use loadAll query, with size = 0;
-            return (await this.loadAll(0, 1, null, null, filter, { withTotal: true }))?.total || 0;
+        // Or increment once (e.g. when total is not known, in received LoadResult)
+        else if (progression) {
+            progressionStep = maxProgression;
         }
-        filter = this.asFilter(filter);
-        const variables = {
-            ...(opts?.variables || {}),
-            filter: filter && filter.asPodObject()
+        // DEBUG
+        if (opts && opts.logPrefix)
+            console.debug(`${opts.logPrefix} All pages fetched - {progress: ${progression.value?.toFixed(2)}, lastProgressStep: ${progressionStep?.toFixed(1)}`);
+        // Final increment
+        if (progression && progressionStep > 0) {
+            progression.next(progression.value + progressionStep);
+        }
+        return {
+            data,
+            total
         };
-        const query = opts?.query || this.queries.countAll;
-        const res = await this.graphql.query({
-            query,
-            variables,
-            error: { code: ErrorCodes.LOAD_DATA_ERROR, message: 'ERROR.COUNT_DATA_ERROR' },
-            fetchPolicy: opts && opts.fetchPolicy || 'network-only'
-        });
-        return res.total;
     }
-    canUserWrite(data, opts) {
-        return !!data;
-    }
-    async saveAll(entities, opts) {
-        if (isEmptyArray(entities))
-            return entities; // Nothing to save: skip
-        if (!this.mutations.saveAll) {
-            if (!this.mutations.save)
-                throw new Error('Not implemented');
-            // Save one by one
-            return chainPromises((entities || [])
-                .map(entity => (() => this.save(entity, opts))));
+}
+
+class IPosition {
+}
+class GeolocationUtils {
+    static isNotNilAndValid(position, opts) {
+        if (!position || isNil(position.latitude) || isNil(position.longitude))
+            return false;
+        // Invalid lat/lon
+        if (position.latitude < -90 || position.latitude > 90
+            || position.longitude < -180 || position.longitude > 180) {
+            // /!\ Log in console, because should never occur
+            if (opts?.debug)
+                console.warn('Invalid lat/long position:  ', position);
+            return false;
         }
-        let hasNewEntities = false;
-        const json = entities.map(entity => {
-            hasNewEntities = hasNewEntities || this.isNewFn(entity);
-            this.fillDefaultProperties(entity);
-            return this.asObject(entity);
-        });
-        const now = Date.now();
-        if (this._debug)
-            console.debug(this._logPrefix + `Saving all ${this._logTypeName}...`, json);
-        await this.graphql.mutate({
-            mutation: this.mutations.saveAll,
-            refetchQueries: this.getRefetchQueriesForMutation(opts),
-            awaitRefetchQueries: opts && opts.awaitRefetchQueries,
-            variables: {
-                data: json
-            },
-            error: { code: ErrorCodes.SAVE_DATA_ERROR, message: 'ERROR.SAVE_DATA_ERROR' },
-            update: (proxy, { data }) => {
-                const savedEntities = data && data.data;
-                if (savedEntities) {
-                    // Update entities (id and update date)
-                    entities.forEach(entity => {
-                        const savedEntity = savedEntities.find(e => this.equalsFn(e, entity));
-                        this.copyIdAndUpdateDate(savedEntity, entity);
-                    });
-                    if (hasNewEntities && this.watchQueriesUpdatePolicy === 'update-cache') {
-                        // Update the cache
-                        this.insertIntoMutableCachedQueries(proxy, {
-                            queries: this.getLoadQueries(),
-                            data: savedEntities
-                        });
-                    }
-                }
-                if (opts && opts.update) {
-                    opts.update(proxy, { data });
-                }
-                if (this._debug)
-                    console.debug(`${this._logTypeName} saved in ${Date.now() - now}ms`, entities);
-            }
-        });
-        return entities;
+        // OK: valid
+        return true;
     }
-    /**
-     * Save a referential entity
-     *
-     * @param entity
-     * @param opts
-     */
-    async save(entity, opts) {
-        if (!this.mutations.save) {
-            if (!this.mutations.saveAll)
-                throw new Error('Not implemented');
-            const data = await this.saveAll([entity], opts);
-            return data && data[0];
-        }
-        // Fill default properties
-        this.fillDefaultProperties(entity);
-        // Transform into json
-        const json = this.asObject(entity);
-        const isNew = this.isNewFn(json);
-        const now = Date.now();
-        if (this._debug)
-            console.debug(this._logPrefix + `Saving ${this._logTypeName}...`, json);
-        await this.graphql.mutate({
-            mutation: this.mutations.save,
-            refetchQueries: this.getRefetchQueriesForMutation(opts),
-            awaitRefetchQueries: opts && opts.awaitRefetchQueries,
-            variables: {
-                data: json
-            },
-            error: { code: ErrorCodes.SAVE_DATA_ERROR, message: 'ERROR.SAVE_DATA_ERROR' },
-            update: (cache, { data }) => {
-                // Update entity
-                const savedEntity = data && data.data;
-                this.copyIdAndUpdateDate(savedEntity, entity);
-                // Insert into the cache
-                if (isNew && this.watchQueriesUpdatePolicy === 'update-cache') {
-                    this.insertIntoMutableCachedQueries(cache, {
-                        queries: this.getLoadQueries(),
-                        data: savedEntity
-                    });
-                }
-                if (opts && opts.update) {
-                    opts.update(cache, { data });
-                }
-                if (this._debug)
-                    console.debug(this._logPrefix + `${entity.__typename} saved in ${Date.now() - now}ms`, entity);
-            }
-        });
-        return entity;
+    static isNilOrInvalid(position, opts) {
+        return !GeolocationUtils.isNotNilAndValid(position, opts);
     }
-    /**
-     * Delete referential entities
-     */
-    async deleteAll(entities, opts) {
-        if (!this.mutations.deleteAll) {
-            if (!this.mutations.delete)
-                throw new Error('Not implemented');
-            // Delete one by one
-            return chainPromises((entities || [])
-                .map(entity => (() => this.delete(entity, opts))));
-        }
-        // Filter saved entities
-        entities = entities && entities.filter(e => isNotNil(e.id));
-        // Nothing to save: skip
-        if (isEmptyArray(entities))
+    static computeDistanceInMiles(position1, position2) {
+        // Invalid position(s): skip
+        if (GeolocationUtils.isNilOrInvalid(position1, { debug: true })
+            || GeolocationUtils.isNilOrInvalid(position2, { debug: true }))
             return;
-        const ids = entities.map(t => t.id);
-        const now = Date.now();
-        if (this._debug)
-            console.debug(this._logPrefix + `Deleting ${this._logTypeName}...`, ids);
-        await this.graphql.mutate({
-            mutation: this.mutations.deleteAll,
-            refetchQueries: this.getRefetchQueriesForMutation(opts),
-            awaitRefetchQueries: opts && opts.awaitRefetchQueries,
-            variables: { ids },
-            error: { code: ErrorCodes.DELETE_DATA_ERROR, message: 'ERROR.DELETE_DATA_ERROR' },
-            update: (cache, res) => {
-                // Remove from cache
-                if (this.watchQueriesUpdatePolicy === 'update-cache') {
-                    this.removeFromMutableCachedQueriesByIds(cache, {
-                        queries: this.getLoadQueries(),
-                        ids
-                    });
-                }
-                if (opts && opts.update) {
-                    opts.update(cache, res);
-                }
-                if (this._debug)
-                    console.debug(this._logPrefix + `${this._logTypeName} deleted in ${Date.now() - now}ms`);
-            }
-        });
+        const latitude1Rad = Math.PI * position1.latitude / 180;
+        const longitude1Rad = Math.PI * position1.longitude / 180;
+        const latitude2Rad = Math.PI * position2.latitude / 180;
+        const longitude2Rad = Math.PI * position2.longitude / 180;
+        let distance = 2 * 6371 * Math.asin(Math.sqrt(Math.pow(Math.sin((latitude1Rad - latitude2Rad) / 2), 2)
+            + Math.cos(latitude1Rad) * Math.cos(latitude2Rad) * Math.pow(Math.sin((longitude2Rad - longitude1Rad) / 2), 2)));
+        distance = Math.round((((distance / 1.852) + Number.EPSILON) * 100)) / 100;
+        return distance;
     }
     /**
-     * Delete a referential entity
-     */
-    async delete(entity, opts) {
-        if (!this.mutations.delete) {
-            if (!this.mutations.deleteAll)
-                throw new Error('Not implemented');
-            const data = await this.deleteAll([entity], opts);
-            return data && data[0];
-        }
-        // Nothing to save: skip
-        if (!entity || isNil(entity.id))
-            return;
-        const id = entity.id;
-        const now = new Date();
-        if (this._debug)
-            console.debug(this._logPrefix + `Deleting ${this._logTypeName} {${id}}...`);
-        await this.graphql.mutate({
-            mutation: this.mutations.delete,
-            refetchQueries: this.getRefetchQueriesForMutation(opts),
-            awaitRefetchQueries: opts && opts.awaitRefetchQueries,
-            variables: { id },
-            error: { code: ErrorCodes.DELETE_DATA_ERROR, message: 'ERROR.DELETE_DATA_ERROR' },
-            update: (proxy, res) => {
-                // Remove from cache
-                if (this.watchQueriesUpdatePolicy === 'update-cache') {
-                    this.removeFromMutableCachedQueriesByIds(proxy, {
-                        queries: this.getLoadQueries(),
-                        ids: [id]
-                    });
-                }
-                if (opts && opts.update) {
-                    opts.update(proxy, res);
+     * Get the position by geo loc sensor
+     */
+    static async getCurrentPosition(platform, options) {
+        // Use Capacitor plugin
+        try {
+            console.info(`[geolocation-utils] Get current geo location, using Capacitor...(timeout: ${options?.timeout})`);
+            const pos = await Geolocation.getCurrentPosition(options);
+            return {
+                latitude: pos.coords.latitude,
+                longitude: pos.coords.longitude
+            };
+        }
+        catch (err) {
+            // If capacitor : throw error (cannot fallback to browser geolocation, because of browser security limitation)
+            if (platform.is('capacitor')) {
+                console.error(`[geolocation-utils] Cannot get current geo location, using Capacitor: ${err?.message || ''}`);
+                // Detect a permission error, to add code
+                // FIXME - Capacitor use hardcoded strings! (see https://github.com/ionic-team/capacitor-plugins)
+                const message = (err?.message || '').toLowerCase();
+                if (message.includes('location permission was denied') || message.includes('location disabled')) {
+                    throw { ...err, code: GeolocationPositionError.PERMISSION_DENIED };
                 }
-                if (this._debug)
-                    console.debug(this._logPrefix + `${this._logTypeName} deleted in ${new Date().getTime() - now.getTime()}ms`);
+                throw err;
             }
+        }
+        // Or fallback to navigator
+        console.info('[geolocation-utils] Get current geo location, using browser...');
+        return new Promise((resolve, reject) => {
+            navigator.geolocation.getCurrentPosition((res) => {
+                resolve({
+                    latitude: res.coords.latitude,
+                    longitude: res.coords.longitude
+                });
+            }, (err) => {
+                let message = err?.message || err;
+                message = typeof message === 'string' ? message : JSON.stringify(message);
+                console.error('[geolocation-utils] Cannot get current geo location, using browser:' + message);
+                reject(err);
+            }, options);
         });
     }
-    listenChanges(id, opts) {
-        if (isNil(id))
-            throw Error('Missing argument \'id\' ');
-        if (!this.subscriptions.listenChanges) {
-            console.warn(`${this.constructor.name}.listenChanges() not implemented yet. Will empty observable`);
-            return of();
-        }
-        const variables = opts?.variables || {
-            id,
-            interval: toNumber(opts && opts.interval, 0) // no timer by default
-        };
-        if (this._debug)
-            console.debug(this._logPrefix + `[WS] Listening for changes on ${this._logTypeName} {${id}}...`);
-        return this.graphql.subscribe({
-            query: opts?.query || this.subscriptions.listenChanges,
-            fetchPolicy: opts?.fetchPolicy || 'no-cache',
-            variables,
-            error: {
-                code: ErrorCodes.SUBSCRIBE_DATA_ERROR,
-                message: 'ERROR.SUBSCRIBE_DATA_ERROR'
+}
+
+//@dynamic
+class CsvUtils {
+    static exportToFile(rows, opts) {
+        if (!rows || !rows.length)
+            return; // Skip if empty
+        // Create text content
+        const separator = opts?.separator || ',';
+        const protectCellRegexp = new RegExp("/(\"|" + separator + "|\n)/g");
+        const keys = Object.keys(rows[0]);
+        const headers = opts?.headers || keys;
+        const textContent = 
+        // Header row
+        headers.join(separator) + '\n' +
+            // Data rows
+            rows.map(row => {
+                return keys.map(k => {
+                    const cell = row[k] === null || row[k] === undefined ? '' : row[k];
+                    let cellStr = cell instanceof Date
+                        ? cell.toLocaleString()
+                        : cell.toString().replace(/"/g, '""');
+                    if (protectCellRegexp.test(cellStr)) {
+                        cellStr = `"${cellStr}"`;
+                    }
+                    return cellStr;
+                }).join(separator);
+            }).join('\n');
+        // Write to file
+        FilesUtils.writeTextToFile(textContent, {
+            type: 'text/csv',
+            filename: 'export.csv',
+            ...opts,
+        });
+    }
+    static parseFile(file, opts) {
+        return FilesUtils.readAsText(file, opts?.encoding)
+            .pipe(map(e => {
+            if (e.type === HttpEventType.UploadProgress) {
+                const loaded = Math.round(e.loaded * 0.8);
+                return { ...e, loaded };
             }
-        })
-            .pipe(map(({ data }) => {
-            const entity = (!opts || opts.toEntity !== false) ? data && this.fromObject(data) : data;
-            //if (entity && this._debug) console.debug(this._logPrefix + `[WS] Received changes on ${this._logTypeName} {${id}}`, entity);
-            // TODO: missing = deleted ?
-            if (!entity)
-                console.warn(this._logPrefix + `[WS] Received deletion on ${this._logTypeName} {${id}} - TODO check implementation`);
-            return entity;
-        }));
+            else if (e instanceof FileResponse) {
+                const body = e.body;
+                const data = CsvUtils.parseCSV(body, opts);
+                return new FileResponse({ body: data });
+            }
+        }), filter(isNotNil));
     }
-    copyIdAndUpdateDate(source, target) {
-        if (!source)
-            return;
-        // Update (id and updateDate)
-        EntityUtils.copyIdAndUpdateDate(source, target);
+    static parseCSV(body, opts) {
+        const separator = opts?.separator || ',';
+        const skipEmptyLine = !opts || opts.skipEmptyLine !== false;
+        // Protect special characters (quote and /n)
+        body = body.replace('""', '<quote>') // Protect double quote
+            .replace(/("[^\n"]+)\n\r?/gm, '"$1<br>') // Protect \n inside a quoted expression
+            .replace(/\n\r/gm, '\n'); // Windows CR
+        const headerAndRows = body.split('\n', 2);
+        const headers = headerAndRows[0].split(separator);
+        return body.split('\n') // split into rows
+            .filter(line => !skipEmptyLine || line.trim().length > 0) // Skip empty line
+            .map(line => {
+            const cells = line.split(separator, headers.length) // split into cells
+                .map(cell => cell.replace(/^"([^"]*)"$/, '$1')) // Clean trailing quotes
+                .map(cell => cell.replace('<quote>', '"')) // restore protected quote
+                .map(cell => cell.replace('<br>', '\n')) // restore protected br
+            ;
+            return cells;
+        });
     }
-    fromObject(source) {
-        if (!source)
-            return source;
-        const target = new this.dataType();
-        target.fromObject(source);
-        return target;
+}
+
+/**
+ * Define here theme colors
+ */
+const rgbArrayMap = {
+    white: [255, 255, 255],
+    primary: [20, 67, 145],
+    secondary: [117, 196, 253],
+    tertiary: [91, 94, 244],
+    danger: [245, 61, 61],
+    light: [244, 245, 248],
+    medium: [152, 154, 162],
+    dark: [34, 36, 40],
+    red: [255, 0, 0],
+    green: [0, 255, 0],
+    blue: [0, 0, 255]
+};
+// Fill a map of Color objects
+const colorsMap = {};
+/**
+ * Useful class for color conversion
+ */
+// @dynamic
+class Color {
+    constructor(_rgbArray, _opacity, _name = 'custom') {
+        this._rgbArray = _rgbArray;
+        this._opacity = _opacity;
+        this._name = _name;
     }
-    asFilter(source) {
-        return EntityFilterUtils.fromObject(source, this.filterType);
+    // Helper method, to retrieve a color
+    static get(name) {
+        return colorsMap[name];
     }
-    /* -- protected functions -- */
-    async ngOnStart() {
-        // No limit for updatable watch queries, if desktop
-        if (!this.platform.mobile) {
-            this._mutableWatchQueriesMaxCount = -1;
-        }
+    static parseRgba(rgba) {
+        if (!rgba || (!rgba.startsWith('rgb(') && !rgba.startsWith('rgba(')))
+            return null;
+        // Parse parts
+        const parts = rgba
+            .replace('rgb(', '')
+            .replace('rgba(', '')
+            .replace(')', '')
+            .split(',');
+        if (parts.length !== 3 && parts.length !== 4)
+            return null;
+        return new Color([+parts[0], +parts[1], +parts[2]], parts.length === 4 && +parts[3] || 1, 'custom');
     }
-    fillDefaultProperties(source) {
-        // Can be override by subclasses
+    get name() {
+        return this._name;
     }
-    asObject(entity, opts) {
-        // Can be override by subclasses
-        return entity.asObject(opts);
+    get opacity() {
+        return isNotNil(this._opacity) ? this._opacity : 1;
     }
-    getRefetchQueriesForMutation(opts) {
-        if (opts && opts.refetchQueries)
-            return opts.refetchQueries;
-        // Skip if update policy not used refecth queries
-        if (this.watchQueriesUpdatePolicy !== 'refetch-queries')
-            return undefined;
-        const queries = this.getLoadQueries();
-        if (!queries.length)
-            return undefined; // Skip if empty
-        // Find the refetch queries definition
-        return this.findRefetchQueries({ queries });
+    get rgb() {
+        return this._rgbArray;
     }
-    getLoadQueries() {
-        return [this.queries.loadAll, this.queries.loadAllWithTotal].filter(isNotNil);
+    get r() {
+        return this._rgbArray[0];
     }
-    getLoadQueryNames() {
-        return ['LoadAll', 'LoadAllWithTotal'];
+    get g() {
+        return this._rgbArray[1];
     }
-}
-BaseEntityService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BaseEntityService, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-BaseEntityService.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: BaseEntityService, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BaseEntityService, decorators: [{
-            type: Directive
-        }], ctorParameters: function () { return [{ type: GraphqlService }, { type: PlatformService }, { type: undefined }, { type: undefined }, { type: undefined }]; } });
-
-let NamedFilter = class NamedFilter extends Entity {
-    fromObject(source, opts) {
-        this.name = source.name;
-        this.entityName = source.entityName;
-        this.recorderPersonId = source.recorderPersonId;
-        this.recorderDepartmentId = source.recorderDepartmentId;
-        try {
-            this.content = typeof source?.content === 'string' ? JSON.parse(source?.content) : source?.content || undefined;
-        }
-        catch (e) {
-            console.error('[named-filter] can\'t parse content json', source);
-            throw e;
-        }
+    get b() {
+        return this._rgbArray[2];
     }
-    asObject(opts) {
-        const target = super.asObject(opts);
-        if (opts?.minify) {
-            target.content = JSON.stringify(this.content);
+    rgba(opacity) {
+        opacity = isNotNil(opacity) ? opacity : this._opacity;
+        if (isNil(opacity) || opacity < 0 || opacity > 1) {
+            return 'rgb(' + this._rgbArray.join(',') + ')';
         }
-        return target;
+        return 'rgba(' + this._rgbArray.join(',') + ',' + opacity + ')';
     }
+}
+Color.transparent = function () {
+    return new Color([0, 0, 0], 0, 'translucent');
 };
-NamedFilter = __decorate([
-    EntityClass({ typename: 'NamedFilterVO' })
-], NamedFilter);
-let NamedFilterFilter = class NamedFilterFilter extends EntityFilter {
-    constructor() {
-        super(...arguments);
-        this.searchText = null;
-        this.entityName = null;
-        this.recorderPersonId = null;
-        this.recorderDepartmentId = null;
+/**
+ * Helper class for colors scale
+ */
+// @dynamic
+class ColorScale {
+    constructor(colorArray, options) {
+        options = options || {};
+        // reserved last colors for value > max
+        const nbIntervalBeforeUpper = !options.upperMax ? colorArray.length : (colorArray.length - 1);
+        this._min = options.min || 0;
+        this._max = options.max || nbIntervalBeforeUpper;
+        this._rangeSize = Math.round((this._max - this._min) / nbIntervalBeforeUpper);
+        this._legendItems = this.computeLegendItems(colorArray);
     }
-    fromObject(source, opts) {
-        super.fromObject(source, opts);
-        this.searchText = source.searchText;
-        this.entityName = source.entityName;
-        this.recorderPersonId = source.recorderPersonId;
-        this.recorderDepartmentId = source.recorderDepartmentId;
+    static default() {
+        return ColorScale.custom(25);
+    }
+    /**
+     * Create a array with the given color
+     **/
+    static fix(length, colorName) {
+        return Array.apply(null, Array(length || 25))
+            .map(String.prototype.valueOf, Color.get(colorName || 'primary').rgba(0.5));
+    }
+    get min() {
+        return this._min;
+    }
+    get max() {
+        return this._max;
+    }
+    get legend() {
+        return {
+            items: this._legendItems
+        };
+    }
+    getValueColor(value) {
+        return this.getLegendForValue(value).color;
+    }
+    getLegendForValue(value) {
+        if (value <= this._min)
+            return this._legendItems[0];
+        if (value >= this._max)
+            return this._legendItems[this._legendItems.length - 1];
+        const index = Math.floor(value * (this._legendItems.length - 1) / this._max);
+        return this._legendItems[index];
     }
+    getLegendAtIndex(index) {
+        return this._legendItems[index];
+    }
+    computeLegendItems(colorArray) {
+        return colorArray.map((color, index) => {
+            const start = index * this._rangeSize;
+            const end = start + this._rangeSize;
+            return {
+                color: new Color(color),
+                label: (end < this._max) ? `${start.toLocaleString()} - ${end.toLocaleString()}` : ` >= ${start}`
+            };
+        });
+    }
+}
+ColorScale.custom = (count, options) => {
+    options = options || {};
+    return new ColorScale(linearColorGradientWithIntermediate(count, {
+        startColor: options.startColor || undefined,
+        mainColor: options.mainColor || undefined,
+        mainColorIndex: isNotNil(options.mainColorIndex) ? options.mainColorIndex : undefined,
+        endColor: options.endColor || undefined
+    }), options);
 };
-NamedFilterFilter = __decorate([
-    EntityClass({ typename: 'NamedFilterFilterVO' })
-], NamedFilterFilter);
-const APP_NAMED_FILTER_SERVICE = new InjectionToken('namedFilterService');
-// @dynamic
-class AbstractNamedFilterService extends BaseEntityService {
-    constructor(graphql, platform, dataType, filterType, options) {
-        super(graphql, platform, dataType, filterType, {
-            defaultSortBy: 'name',
-            defaultSortDirection: 'asc',
-            ...options
+// Fill colorsMap
+Object.getOwnPropertyNames(rgbArrayMap)
+    .forEach((key) => {
+    colorsMap[key] = new Color(rgbArrayMap[key], 1, key);
+});
+/**
+ * Internal function, that create a colors scale, using iteration
+ *
+ * @param count
+ * @param opacity
+ * @param startColor
+ * @param startState
+ * @returns
+ */
+function linearColorGradientWithIntermediate(count, options) {
+    options = options || {};
+    // From [0,1]
+    options.startColor = options.startColor || [255, 255, 190]; // default start = creme
+    options.mainColorIndex = options.mainColorIndex && options.mainColorIndex < count - 1 ? options.mainColorIndex : count - 1;
+    options.endColor = options.endColor || [255, 0, 0]; // default main = red
+    if (!options.mainColor) {
+        return linearColorGradient(count, {
+            startColor: options.startColor,
+            endColor: options.endColor
         });
-        this.graphql = graphql;
-        this.platform = platform;
-        this.dataType = dataType;
-        this.filterType = filterType;
-        this.options = options;
-        this._logPrefix = '[named-filter-service] ';
     }
-    watchAll(offset, size, sortBy, sortDirection, filter, options) {
-        if (!filter) {
-            filter = this.defaultFilter();
+    else {
+        // Step 1: startColor -> mainColor
+        const result = linearColorGradient(options.mainColorIndex + 1, {
+            startColor: options.startColor,
+            endColor: options.mainColor
+        });
+        // Step 2: mainColor -> endColor
+        if (options.mainColorIndex < count - 1) {
+            return result.concat(linearColorGradient(count - options.mainColorIndex, {
+                startColor: options.mainColor,
+                endColor: options.endColor
+            }));
         }
-        // Always ask total
-        options = {
-            ...options,
-            withTotal: true
-        };
-        // Set query if content is wanted
-        if (options?.withContent) {
-            options.query = this.queries.loadAllWithContent;
+        else {
+            return result;
         }
-        return super.watchAll(offset, size, sortBy, sortDirection, filter, options);
     }
-    async loadAll(offset, size, sortBy, sortDirection, filter, options) {
-        if (!filter) {
-            filter = this.defaultFilter();
-        }
-        // Always ask total
-        options = {
-            ...options,
-            withTotal: true
-        };
-        // Set query if content is wanted
-        if (options?.withContent) {
-            options.query = this.queries.loadAllWithContent;
+}
+function linearColorGradient(count, options) {
+    options = options || {};
+    // From [0,1]
+    options.startColor = options.startColor || [255, 255, 255]; // default start = white
+    options.endColor = options.endColor || [255, 0, 0]; // default end = red
+    const result = [];
+    const color = options.startColor.slice(); // copy the start color
+    const delta = [
+        Math.round((options.endColor[0] - options.startColor[0]) / count),
+        Math.round((options.endColor[1] - options.startColor[1]) / count),
+        Math.round((options.endColor[2] - options.startColor[2]) / count)
+    ];
+    for (let i = 0; i < count - 1; i++) {
+        for (let j = 0; j < 3; j++) {
+            color[j] += delta[j];
         }
-        return super.loadAll(offset, size, sortBy, sortDirection, filter, options);
+        result.push(color.slice());
     }
-    async suggest(value, filter) {
-        if (EntityUtils.isNotEmpty(value, 'id'))
-            return { data: [value] };
-        value = (typeof value === 'string' && value !== '*' && value) || undefined;
-        return await this.loadAll(0, 1000, 'name', 'asc', this.suggestFilter(value, filter), {
-            withTotal: true,
-            withContent: false
-        });
+    // Force last color = end color
+    result.push(options.endColor.slice());
+    // Output as array
+    return result;
+}
+
+class DebugComponent {
+    constructor(environment) {
+        this.title = '';
+        this.enable = null;
+        this.expanded = false;
+        this.enable = !environment || !environment.production;
     }
-    suggestFilter(searchText, filter) {
-        return {
-            ...filter,
-            searchText
-        };
+    toggle() {
+        this.expansionPanel.toggle();
     }
 }
-AbstractNamedFilterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AbstractNamedFilterService, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-AbstractNamedFilterService.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: AbstractNamedFilterService, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AbstractNamedFilterService, decorators: [{
-            type: Directive
-        }], ctorParameters: function () { return [{ type: GraphqlService }, { type: PlatformService }, { type: undefined }, { type: undefined }, { type: undefined }]; } });
+DebugComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DebugComponent, deps: [{ token: ENVIRONMENT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+DebugComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DebugComponent, selector: "app-debug", inputs: { title: "title", enable: "enable", expanded: "expanded" }, viewQueries: [{ propertyName: "expansionPanel", first: true, predicate: ["expansionPanel"], descendants: true }], ngImport: i0, template: "<!-- debug -->\n<ion-item tappable (click)=\"toggle()\" lines=\"none\" color=\"secondary50\">\n  <ion-icon slot=\"start\" name=\"bug\" ></ion-icon>\n  <ion-label color=\"primary\">Debug {{title}}</ion-label>\n  <mat-icon slot=\"end\">{{expansionPanel.expanded ? 'expand_less' : 'expand_more' }}</mat-icon>\n</ion-item>\n<mat-expansion-panel #expansionPanel [(expanded)]=\"expanded\">\n  <ion-text color=\"primary100\" >\n    <div class=\"ion-margin-start\">\n      <ng-content></ng-content>\n    </div>\n  </ion-text>\n</mat-expansion-panel>\n", styles: ["ion-item{cursor:pointer!important}ion-item mat-icon,ion-item ion-icon{color:var(--ion-color-primary)}.mat-expansion-panel{--expansion-panel-padding: 4px;background:var(--ion-color-secondary50)!important}.mat-expansion-panel.mat-expanded{margin-bottom:4px!important}.mat-expansion-panel .mat-expansion-panel-body *{color:var(--ion-color-primary100)}\n"], dependencies: [{ kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.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: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i9$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DebugComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-debug', template: "<!-- debug -->\n<ion-item tappable (click)=\"toggle()\" lines=\"none\" color=\"secondary50\">\n  <ion-icon slot=\"start\" name=\"bug\" ></ion-icon>\n  <ion-label color=\"primary\">Debug {{title}}</ion-label>\n  <mat-icon slot=\"end\">{{expansionPanel.expanded ? 'expand_less' : 'expand_more' }}</mat-icon>\n</ion-item>\n<mat-expansion-panel #expansionPanel [(expanded)]=\"expanded\">\n  <ion-text color=\"primary100\" >\n    <div class=\"ion-margin-start\">\n      <ng-content></ng-content>\n    </div>\n  </ion-text>\n</mat-expansion-panel>\n", styles: ["ion-item{cursor:pointer!important}ion-item mat-icon,ion-item ion-icon{color:var(--ion-color-primary)}.mat-expansion-panel{--expansion-panel-padding: 4px;background:var(--ion-color-secondary50)!important}.mat-expansion-panel.mat-expanded{margin-bottom:4px!important}.mat-expansion-panel .mat-expansion-panel-body *{color:var(--ion-color-primary100)}\n"] }]
+        }], ctorParameters: function () { return [{ type: Environment, decorators: [{
+                    type: Inject,
+                    args: [ENVIRONMENT]
+                }, {
+                    type: Optional
+                }] }]; }, propDecorators: { title: [{
+                type: Input
+            }], enable: [{
+                type: Input
+            }], expanded: [{
+                type: Input
+            }], expansionPanel: [{
+                type: ViewChild,
+                args: ['expansionPanel']
+            }] } });
+
+class SharedDebugModule {
+}
+SharedDebugModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SharedDebugModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SharedDebugModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: SharedDebugModule, declarations: [DebugComponent], imports: [CommonModule,
+        IonicModule,
+        MatExpansionModule,
+        MatIconModule, i1$2.TranslateModule, MatExpansionModule], exports: [DebugComponent,
+        TranslateModule] });
+SharedDebugModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SharedDebugModule, imports: [CommonModule,
+        IonicModule,
+        MatExpansionModule,
+        MatIconModule,
+        TranslateModule.forChild(),
+        MatExpansionModule, TranslateModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SharedDebugModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        IonicModule,
+                        MatExpansionModule,
+                        MatIconModule,
+                        TranslateModule.forChild(),
+                        MatExpansionModule
+                    ],
+                    declarations: [
+                        DebugComponent
+                    ],
+                    exports: [
+                        DebugComponent,
+                        TranslateModule
+                    ]
+                }]
+        }] });
 
 class AppGraphQLModule {
     constructor() {
@@ -23659,7 +23844,7 @@ class MenuComponent {
     }
 }
 MenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MenuComponent, deps: [{ token: PlatformService }, { token: AccountService }, { token: i1.NavController }, { token: i1.MenuController }, { token: i1.ModalController }, { token: i1.AlertController }, { token: i1$2.TranslateService }, { token: ConfigService }, { token: i0.ChangeDetectorRef }, { token: MenuService }, { token: ENVIRONMENT }, { token: APP_MENU_OPTIONS, optional: true }, { token: APP_MENU_ITEMS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MenuComponent, selector: "app-menu", inputs: { id: "id", menuId: "menuId", side: "side", contentId: "contentId", logo: "logo", appName: "appName", appVersion: "appVersion" }, viewQueries: [{ propertyName: "splitPane", first: true, predicate: ["splitPane"], descendants: true, static: true }], ngImport: i0, template: "<ion-split-pane #splitPane [contentId]=\"contentId\" (swiperight)=\"onSwipeRight($event)\">\n\n  <ion-menu [id]=\"id\" [menuId]=\"menuId\" [contentId]=\"contentId\">\n    <ion-header>\n\n      <ion-toolbar @fadeInAnimation *ngIf=\"isLogin; else notLogin\" class=\"ion-toolbar-top\">\n        <ion-grid>\n          <ion-row>\n            <ion-col size=\"4\">\n              <button type=\"button\" mat-flat-button\n                      class=\"user-avatar\" [class.primary]=\"!accountAvatar\"\n                      [style.background-image]=\"'url('+(accountAvatar||'./assets/img/person.png')+')'\"\n                      [routerLink]=\"['/account']\"\n                      routerDirection=\"root\"\n                      routerLinkActive=\"ion-color-primary\"\n                      (click)=\"close()\"\n                      [title]=\"'MENU.BTN_MY_ACCOUNT'|translate\">\n              </button>\n            </ion-col>\n            <ion-col size=\"8\" class=\"user-logo\">\n              <img *ngIf=\"logo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"108px\"/>\n              <span *ngIf=\"!logo\" style=\"width: 108px;\">{{appName}}</span>\n            </ion-col>\n          </ion-row>\n          <ion-row class=\"ion-no-padding\">\n            <ion-col>\n              <button mat-button type=\"button\"\n                      [routerLink]=\"['/account']\"\n                      routerDirection=\"root\"\n                      routerLinkActive=\"ion-color-primary\"\n                      (click)=\"close()\"\n                      [title]=\"'MENU.BTN_MY_ACCOUNT'|translate\">\n                <ion-label color=\"primary\" class=\"ion-text-wrap ion-text-start\">\n                  <h3 class=\"no-margin username\">\n                    <b>{{accountName}}</b>\n                  </h3>\n                  <h4>{{accountEmail}}</h4>\n                </ion-label>\n              </button>\n            </ion-col>\n\n            <!-- Insertion headerBottomRight -->\n            <ion-col size=\"auto\">\n              <ng-container *ngTemplateOutlet=\"headerBottomRight\"></ng-container>\n            </ion-col>\n          </ion-row>\n        </ion-grid>\n\n      </ion-toolbar>\n\n      <!-- User not logged -->\n      <ng-template #notLogin>\n        <mat-toolbar class=\"ion-padding\" @fadeInAnimation\n                     style=\"height: unset; display: block; margin: auto; text-align: center;\">\n          <img *ngIf=\"logo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"150px;\">\n          <span *ngIf=\"!logo\" style=\"width: 150px\">{{appName}}</span>\n        </mat-toolbar>\n      </ng-template>\n    </ion-header>\n\n    <ion-content [class.has-user-header]=\"isLogin\">\n\n      <ion-list lines=\"none\">\n        <ion-menu-toggle auto-hide=\"false\"\n                         [class.flex-spacer]=\"item.cssClass == 'flex-spacer'\"\n                         *ngFor=\"let item of $items | async\">\n\n          <!-- link -->\n          <ion-item *ngIf=\"!loading && item.path\"\n                    @fadeInAnimation\n                    class=\"{{item.cssClass}} {{item.color}} text-1x\"\n                    tappable\n                    [routerLink]=\"item.path\"\n                    routerDirection=\"root\"\n                    routerLinkActive=\"selected\"\n                    [routerLinkActiveOptions]=\"{exact: (item.path === '/')}\">\n            <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n            <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item>\n\n          <!-- action -->\n          <ion-item *ngIf=\"!loading && item.action\"\n                    @fadeInAnimation\n                    class=\"{{item.cssClass}} {{item.color}} text-1x\"\n                    tappable\n                    (click)=\"doAction(item.action, $event)\">\n            <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n            <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item>\n\n          <!-- divider -->\n          <ion-item-divider @fadeInAnimation\n                            class=\"{{item.cssClass}} {{item.color}}\"\n                            *ngIf=\"!loading && !item.path && !item.action\">\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item-divider>\n\n        </ion-menu-toggle>\n      </ion-list>\n    </ion-content>\n\n    <ion-footer class=\"hidden-xs hidden-sm\">\n      <ion-toolbar>\n\n        <ion-buttons slot=\"start\">\n          <ion-button mat-icon-button color=\"accent\" (click)=\"openAboutModal($event)\">\n            <mat-icon slot=\"icon-only\">help_outline</mat-icon>\n          </ion-button>\n        </ion-buttons>\n\n        <ion-title (click)=\"openAboutModal($event)\" color=\"medium\">\n          {{'MENU.FOOTER_VERSION_ABOUT'| translate: {version: appVersion} }}\n        </ion-title>\n\n        <ion-buttons slot=\"end\">\n          <button mat-icon-button color=\"accent\" (click)=\"toggleSplitPaneShow($event)\"\n                  class=\"hidden-xs hidden-sm hidden-md\"\n                  [title]=\"(splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') |translate\">\n            <mat-icon><span>{{splitPane.when ? '&#xab;' : '&#xbb;'}}</span></mat-icon>\n          </button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-footer>\n\n  </ion-menu>\n\n  <ng-content></ng-content>\n\n</ion-split-pane>\n\n<ng-template #headerBottomRight>\n  <ng-content select=\"[headerBottomRight]\"></ng-content>\n</ng-template>\n", styles: ["ion-menu{--ion-item-background: transparent;--ion-item-divider-background: transparent;--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint);--ion-item-background-selected: var(--ion-color-secondary100);--ion-item-text-color-selected: var(--ion-color-primary);--ion-item-icon-color-selected: var(--ion-color-primary);--ion-item-text-color-disable: var(--ion-color-medium);--ion-item-icon-color-disable: var(--ion-color-medium)}ion-menu ion-header ion-text{color:var(--ion-color-primary)}ion-menu ion-header .user-avatar{background-size:cover;background-repeat:no-repeat;background-position:center;background-color:var(--ion-color-secondary);border:solid 1px rgba(var(--ion-color-secondary-rgb),.5);overflow:hidden!important;font-size:var(--avatar-size, 60px)!important;line-height:var(--avatar-size, 60px);height:var(--avatar-size, 60px)!important;width:var(--avatar-size, 60px)!important;border-radius:50%;display:inline-block}ion-menu ion-header .user-avatar:hover{background-color:var(--ion-color-secondary-shade);border:solid 2px var(--ion-color-secondary-shade)}ion-menu ion-header .user-logo{text-align:right}ion-menu ion-header .user-logo img{max-width:120px;max-height:var(--avatar-size, 60px);width:auto}ion-menu ion-header .username{padding-top:0;margin-top:0;margin-bottom:0;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}ion-menu ion-header button[mat-button]{padding:0;text-align:start!important;width:100%}ion-menu .scroll-content{margin-top:79px!important}ion-menu .has-user-header .scroll-content{margin-top:188px!important}ion-menu ion-content.has-profile-header{--offset-top: 188px}ion-menu ion-content.no-profile-header{--offset-top: 79px}ion-menu ion-content ion-list{min-height:100%;display:flex;flex-direction:column;justify-content:flex-start}ion-menu ion-content ion-list ion-menu-toggle.flex-spacer{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end}ion-menu ion-content ion-list ion-item.primary{--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint)}ion-menu ion-content ion-list ion-item.secondary{--ion-item-icon-color: var(--ion-color-secondary-tint);--ion-item-text-color: var(--ion-color-secondary-tint)}ion-menu ion-content ion-list ion-item.tertiary{--ion-item-icon-color: var(--ion-color-tertiary-tint);--ion-item-text-color: var(--ion-color-tertiary-tint)}ion-menu ion-content ion-list ion-item.danger{--ion-item-icon-color: var(--ion-color-danger-tint);--ion-item-text-color: var(--ion-color-danger-tint)}ion-menu ion-content ion-list ion-item.medium{--ion-item-icon-color: var(--ion-color-medium-shade);--ion-item-text-color: var(--ion-color-medium-shade)}ion-menu ion-content ion-list ion-item.dark{--ion-item-icon-color: var(--ion-color-dark-tint);--ion-item-text-color: var(--ion-color-dark-tint)}ion-menu ion-content ion-list ion-item mat-icon,ion-menu ion-content ion-list ion-item ion-icon{color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item ion-text,ion-menu ion-content ion-list ion-item ion-label{color:var(--ion-item-text-color)!important}ion-menu ion-content ion-list ion-item.selected{background-color:var(--ion-item-background-selected)!important;--color-hover: var(--ion-item-background-selected) !important}ion-menu ion-content ion-list ion-item.selected mat-icon,ion-menu ion-content ion-list ion-item.selected ion-icon{color:var(--ion-item-icon-color-selected)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item.selected ion-text,ion-menu ion-content ion-list ion-item.selected ion-label{color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list ion-item.selected:hover{--color-hover: var(--ion-item-background-selected) !important;--ion-item-icon-color-selected: var(--ion-item-icon-color) !important;--ion-item-text-color-selected: var(--ion-item-text-color) !important}ion-menu ion-footer{display:block!important}ion-menu ion-footer ion-toolbar ion-title{cursor:pointer;font-size:12pt;font-weight:400;text-align:center;padding:0 8px}ion-menu ion-footer ion-toolbar ion-button{--width: 40px}@media screen and (max-width: 767px){ion-menu ion-footer{display:none!important;visibility:hidden!important}}@media screen and (min-width: 768px){ion-menu ion-scroll{overflow-y:auto!important}ion-menu .user-avatar{font-size:var(--avatar-size, 80px)!important;line-height:var(--avatar-size, 80px);height:var(--avatar-size, 80px)!important;width:var(--avatar-size, 80px)!important}ion-menu .user-logo img{max-height:var(--avatar-size, 80px)}}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1.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: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.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: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.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: i1.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i1.IonMenu, selector: "ion-menu", inputs: ["contentId", "disabled", "maxEdgeStart", "menuId", "side", "swipeGesture", "type"] }, { kind: "component", type: i1.IonMenuToggle, selector: "ion-menu-toggle", inputs: ["autoHide", "menu"] }, { kind: "component", type: i1.IonRow, selector: "ion-row" }, { kind: "component", type: i1.IonSplitPane, selector: "ion-split-pane", inputs: ["contentId", "disabled", "when"] }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]", inputs: ["routerDirection", "routerAnimation"] }, { kind: "directive", type: i1$2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i8$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$6.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$6.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], animations: [fadeInAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MenuComponent, selector: "app-menu", inputs: { id: "id", menuId: "menuId", side: "side", contentId: "contentId", logo: "logo", appName: "appName", appVersion: "appVersion" }, viewQueries: [{ propertyName: "splitPane", first: true, predicate: ["splitPane"], descendants: true, static: true }], ngImport: i0, template: "<ion-split-pane #splitPane [contentId]=\"contentId\" (swiperight)=\"onSwipeRight($event)\">\n\n  <ion-menu [id]=\"id\" [menuId]=\"menuId\" [contentId]=\"contentId\">\n    <ion-header>\n\n      <ion-toolbar @fadeInAnimation *ngIf=\"isLogin; else notLogin\" class=\"ion-toolbar-top\">\n        <ion-grid>\n          <ion-row>\n            <ion-col size=\"4\">\n              <button type=\"button\" mat-flat-button\n                      class=\"user-avatar\" [class.primary]=\"!accountAvatar\"\n                      [style.background-image]=\"'url('+(accountAvatar||'./assets/img/person.png')+')'\"\n                      [routerLink]=\"['/account']\"\n                      routerDirection=\"root\"\n                      routerLinkActive=\"ion-color-primary\"\n                      (click)=\"close()\"\n                      [title]=\"'MENU.BTN_MY_ACCOUNT'|translate\">\n              </button>\n            </ion-col>\n            <ion-col size=\"8\" class=\"user-logo\">\n              <img *ngIf=\"logo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"108px\"/>\n              <span *ngIf=\"!logo\" style=\"width: 108px;\">{{appName}}</span>\n            </ion-col>\n          </ion-row>\n          <ion-row class=\"ion-no-padding\">\n            <ion-col>\n              <button mat-button type=\"button\"\n                      [routerLink]=\"['/account']\"\n                      routerDirection=\"root\"\n                      routerLinkActive=\"ion-color-primary\"\n                      (click)=\"close()\"\n                      [title]=\"'MENU.BTN_MY_ACCOUNT'|translate\">\n                <ion-label color=\"primary\" class=\"ion-text-wrap ion-text-start\">\n                  <h3 class=\"no-margin username\">\n                    <b>{{accountName}}</b>\n                  </h3>\n                  <h4>{{accountEmail}}</h4>\n                </ion-label>\n              </button>\n            </ion-col>\n\n            <!-- Insertion headerBottomRight -->\n            <ion-col size=\"auto\">\n              <ng-container *ngTemplateOutlet=\"headerBottomRight\"></ng-container>\n            </ion-col>\n          </ion-row>\n        </ion-grid>\n\n      </ion-toolbar>\n\n      <!-- User not logged -->\n      <ng-template #notLogin>\n        <mat-toolbar class=\"ion-padding\" @fadeInAnimation\n                     style=\"height: unset; display: block; margin: auto; text-align: center;\">\n          <img *ngIf=\"logo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"150px;\">\n          <span *ngIf=\"!logo\" style=\"width: 150px\">{{appName}}</span>\n        </mat-toolbar>\n      </ng-template>\n    </ion-header>\n\n    <ion-content [class.has-user-header]=\"isLogin\">\n\n      <ion-list lines=\"none\">\n        <ion-menu-toggle auto-hide=\"false\"\n                         [class.flex-spacer]=\"item.cssClass == 'flex-spacer'\"\n                         *ngFor=\"let item of $items | async\">\n\n          <!-- link -->\n          <ion-item *ngIf=\"!loading && item.path\"\n                    @fadeInAnimation\n                    class=\"{{item.cssClass}} {{item.color}} text-1x\"\n                    tappable\n                    [routerLink]=\"item.path\"\n                    routerDirection=\"root\"\n                    routerLinkActive=\"selected\"\n                    [routerLinkActiveOptions]=\"{exact: (item.path === '/')}\">\n            <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n            <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item>\n\n          <!-- action -->\n          <ion-item *ngIf=\"!loading && item.action\"\n                    @fadeInAnimation\n                    class=\"{{item.cssClass}} {{item.color}} text-1x\"\n                    tappable\n                    (click)=\"doAction(item.action, $event)\">\n            <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n            <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item>\n\n          <!-- divider -->\n          <ion-item-divider @fadeInAnimation\n                            class=\"{{item.cssClass}} {{item.color}}\"\n                            *ngIf=\"!loading && !item.path && !item.action\">\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item-divider>\n\n        </ion-menu-toggle>\n      </ion-list>\n    </ion-content>\n\n    <ion-footer class=\"hidden-xs hidden-sm\">\n      <ion-toolbar>\n\n        <ion-buttons slot=\"start\">\n          <ion-button mat-icon-button color=\"accent\" (click)=\"openAboutModal($event)\">\n            <mat-icon slot=\"icon-only\">help_outline</mat-icon>\n          </ion-button>\n        </ion-buttons>\n\n        <ion-title (click)=\"openAboutModal($event)\" color=\"medium\">\n          {{'MENU.FOOTER_VERSION_ABOUT'| translate: {version: appVersion} }}\n        </ion-title>\n\n        <ion-buttons slot=\"end\">\n          <button mat-icon-button color=\"accent\" (click)=\"toggleSplitPaneShow($event)\"\n                  class=\"hidden-xs hidden-sm hidden-md\"\n                  [title]=\"(splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') |translate\">\n            <mat-icon><span>{{splitPane.when ? '&#xab;' : '&#xbb;'}}</span></mat-icon>\n          </button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-footer>\n\n  </ion-menu>\n\n  <ng-content></ng-content>\n\n</ion-split-pane>\n\n<ng-template #headerBottomRight>\n  <ng-content select=\"[headerBottomRight]\"></ng-content>\n</ng-template>\n", styles: ["ion-menu{--ion-item-background: transparent;--ion-item-divider-background: transparent;--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint);--ion-item-background-selected: var(--ion-color-secondary100);--ion-item-text-color-selected: var(--ion-color-primary);--ion-item-icon-color-selected: var(--ion-color-primary);--ion-item-text-color-disable: var(--ion-color-medium);--ion-item-icon-color-disable: var(--ion-color-medium)}ion-menu ion-header ion-text{color:var(--ion-color-primary)}ion-menu ion-header .user-avatar{background-size:cover;background-repeat:no-repeat;background-position:center;background-color:var(--ion-color-secondary);border:solid 1px rgba(var(--ion-color-secondary-rgb),.5);overflow:hidden!important;font-size:var(--avatar-size, 60px)!important;line-height:var(--avatar-size, 60px);height:var(--avatar-size, 60px)!important;width:var(--avatar-size, 60px)!important;border-radius:50%;display:inline-block}ion-menu ion-header .user-avatar:hover{background-color:var(--ion-color-secondary-shade);border:solid 2px var(--ion-color-secondary-shade)}ion-menu ion-header .user-logo{text-align:right}ion-menu ion-header .user-logo img{max-width:120px;max-height:var(--avatar-size, 60px);width:auto}ion-menu ion-header .username{padding-top:0;margin-top:0;margin-bottom:0;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}ion-menu ion-header button[mat-button]{padding:0;text-align:start!important;width:100%}ion-menu .scroll-content{margin-top:79px!important}ion-menu .has-user-header .scroll-content{margin-top:188px!important}ion-menu ion-content.has-profile-header{--offset-top: 188px}ion-menu ion-content.no-profile-header{--offset-top: 79px}ion-menu ion-content ion-list{min-height:100%;display:flex;flex-direction:column;justify-content:flex-start}ion-menu ion-content ion-list ion-menu-toggle.flex-spacer{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end}ion-menu ion-content ion-list ion-item.primary{--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint)}ion-menu ion-content ion-list ion-item.secondary{--ion-item-icon-color: var(--ion-color-secondary-tint);--ion-item-text-color: var(--ion-color-secondary-tint)}ion-menu ion-content ion-list ion-item.tertiary{--ion-item-icon-color: var(--ion-color-tertiary-tint);--ion-item-text-color: var(--ion-color-tertiary-tint)}ion-menu ion-content ion-list ion-item.danger{--ion-item-icon-color: var(--ion-color-danger-tint);--ion-item-text-color: var(--ion-color-danger-tint)}ion-menu ion-content ion-list ion-item.medium{--ion-item-icon-color: var(--ion-color-medium-shade);--ion-item-text-color: var(--ion-color-medium-shade)}ion-menu ion-content ion-list ion-item.dark{--ion-item-icon-color: var(--ion-color-dark-tint);--ion-item-text-color: var(--ion-color-dark-tint)}ion-menu ion-content ion-list ion-item mat-icon,ion-menu ion-content ion-list ion-item ion-icon{color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item ion-text,ion-menu ion-content ion-list ion-item ion-label{color:var(--ion-item-text-color)!important}ion-menu ion-content ion-list ion-item.selected{background-color:var(--ion-item-background-selected)!important;--color-hover: var(--ion-item-background-selected) !important}ion-menu ion-content ion-list ion-item.selected mat-icon,ion-menu ion-content ion-list ion-item.selected ion-icon{color:var(--ion-item-icon-color-selected)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item.selected ion-text,ion-menu ion-content ion-list ion-item.selected ion-label{color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list ion-item.selected:hover{--color-hover: var(--ion-item-background-selected) !important;--ion-item-icon-color-selected: var(--ion-item-icon-color) !important;--ion-item-text-color-selected: var(--ion-item-text-color) !important}ion-menu ion-footer{display:block!important}ion-menu ion-footer ion-toolbar ion-title{cursor:pointer;font-size:12pt;font-weight:400;text-align:center;padding:0 8px}ion-menu ion-footer ion-toolbar ion-button{--width: 40px}@media screen and (max-width: 767px){ion-menu ion-footer{display:none!important;visibility:hidden!important}}@media screen and (min-width: 768px){ion-menu ion-scroll{overflow-y:auto!important}ion-menu .user-avatar{font-size:var(--avatar-size, 80px)!important;line-height:var(--avatar-size, 80px);height:var(--avatar-size, 80px)!important;width:var(--avatar-size, 80px)!important}ion-menu .user-logo img{max-height:var(--avatar-size, 80px)}}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1.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: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.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: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.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: i1.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i1.IonMenu, selector: "ion-menu", inputs: ["contentId", "disabled", "maxEdgeStart", "menuId", "side", "swipeGesture", "type"] }, { kind: "component", type: i1.IonMenuToggle, selector: "ion-menu-toggle", inputs: ["autoHide", "menu"] }, { kind: "component", type: i1.IonRow, selector: "ion-row" }, { kind: "component", type: i1.IonSplitPane, selector: "ion-split-pane", inputs: ["contentId", "disabled", "when"] }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]", inputs: ["routerDirection", "routerAnimation"] }, { kind: "directive", type: i1$2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i8$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$6.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$6.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], animations: [fadeInAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-menu', animations: [fadeInAnimation], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-split-pane #splitPane [contentId]=\"contentId\" (swiperight)=\"onSwipeRight($event)\">\n\n  <ion-menu [id]=\"id\" [menuId]=\"menuId\" [contentId]=\"contentId\">\n    <ion-header>\n\n      <ion-toolbar @fadeInAnimation *ngIf=\"isLogin; else notLogin\" class=\"ion-toolbar-top\">\n        <ion-grid>\n          <ion-row>\n            <ion-col size=\"4\">\n              <button type=\"button\" mat-flat-button\n                      class=\"user-avatar\" [class.primary]=\"!accountAvatar\"\n                      [style.background-image]=\"'url('+(accountAvatar||'./assets/img/person.png')+')'\"\n                      [routerLink]=\"['/account']\"\n                      routerDirection=\"root\"\n                      routerLinkActive=\"ion-color-primary\"\n                      (click)=\"close()\"\n                      [title]=\"'MENU.BTN_MY_ACCOUNT'|translate\">\n              </button>\n            </ion-col>\n            <ion-col size=\"8\" class=\"user-logo\">\n              <img *ngIf=\"logo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"108px\"/>\n              <span *ngIf=\"!logo\" style=\"width: 108px;\">{{appName}}</span>\n            </ion-col>\n          </ion-row>\n          <ion-row class=\"ion-no-padding\">\n            <ion-col>\n              <button mat-button type=\"button\"\n                      [routerLink]=\"['/account']\"\n                      routerDirection=\"root\"\n                      routerLinkActive=\"ion-color-primary\"\n                      (click)=\"close()\"\n                      [title]=\"'MENU.BTN_MY_ACCOUNT'|translate\">\n                <ion-label color=\"primary\" class=\"ion-text-wrap ion-text-start\">\n                  <h3 class=\"no-margin username\">\n                    <b>{{accountName}}</b>\n                  </h3>\n                  <h4>{{accountEmail}}</h4>\n                </ion-label>\n              </button>\n            </ion-col>\n\n            <!-- Insertion headerBottomRight -->\n            <ion-col size=\"auto\">\n              <ng-container *ngTemplateOutlet=\"headerBottomRight\"></ng-container>\n            </ion-col>\n          </ion-row>\n        </ion-grid>\n\n      </ion-toolbar>\n\n      <!-- User not logged -->\n      <ng-template #notLogin>\n        <mat-toolbar class=\"ion-padding\" @fadeInAnimation\n                     style=\"height: unset; display: block; margin: auto; text-align: center;\">\n          <img *ngIf=\"logo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"150px;\">\n          <span *ngIf=\"!logo\" style=\"width: 150px\">{{appName}}</span>\n        </mat-toolbar>\n      </ng-template>\n    </ion-header>\n\n    <ion-content [class.has-user-header]=\"isLogin\">\n\n      <ion-list lines=\"none\">\n        <ion-menu-toggle auto-hide=\"false\"\n                         [class.flex-spacer]=\"item.cssClass == 'flex-spacer'\"\n                         *ngFor=\"let item of $items | async\">\n\n          <!-- link -->\n          <ion-item *ngIf=\"!loading && item.path\"\n                    @fadeInAnimation\n                    class=\"{{item.cssClass}} {{item.color}} text-1x\"\n                    tappable\n                    [routerLink]=\"item.path\"\n                    routerDirection=\"root\"\n                    routerLinkActive=\"selected\"\n                    [routerLinkActiveOptions]=\"{exact: (item.path === '/')}\">\n            <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n            <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item>\n\n          <!-- action -->\n          <ion-item *ngIf=\"!loading && item.action\"\n                    @fadeInAnimation\n                    class=\"{{item.cssClass}} {{item.color}} text-1x\"\n                    tappable\n                    (click)=\"doAction(item.action, $event)\">\n            <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n            <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item>\n\n          <!-- divider -->\n          <ion-item-divider @fadeInAnimation\n                            class=\"{{item.cssClass}} {{item.color}}\"\n                            *ngIf=\"!loading && !item.path && !item.action\">\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item-divider>\n\n        </ion-menu-toggle>\n      </ion-list>\n    </ion-content>\n\n    <ion-footer class=\"hidden-xs hidden-sm\">\n      <ion-toolbar>\n\n        <ion-buttons slot=\"start\">\n          <ion-button mat-icon-button color=\"accent\" (click)=\"openAboutModal($event)\">\n            <mat-icon slot=\"icon-only\">help_outline</mat-icon>\n          </ion-button>\n        </ion-buttons>\n\n        <ion-title (click)=\"openAboutModal($event)\" color=\"medium\">\n          {{'MENU.FOOTER_VERSION_ABOUT'| translate: {version: appVersion} }}\n        </ion-title>\n\n        <ion-buttons slot=\"end\">\n          <button mat-icon-button color=\"accent\" (click)=\"toggleSplitPaneShow($event)\"\n                  class=\"hidden-xs hidden-sm hidden-md\"\n                  [title]=\"(splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') |translate\">\n            <mat-icon><span>{{splitPane.when ? '&#xab;' : '&#xbb;'}}</span></mat-icon>\n          </button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-footer>\n\n  </ion-menu>\n\n  <ng-content></ng-content>\n\n</ion-split-pane>\n\n<ng-template #headerBottomRight>\n  <ng-content select=\"[headerBottomRight]\"></ng-content>\n</ng-template>\n", styles: ["ion-menu{--ion-item-background: transparent;--ion-item-divider-background: transparent;--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint);--ion-item-background-selected: var(--ion-color-secondary100);--ion-item-text-color-selected: var(--ion-color-primary);--ion-item-icon-color-selected: var(--ion-color-primary);--ion-item-text-color-disable: var(--ion-color-medium);--ion-item-icon-color-disable: var(--ion-color-medium)}ion-menu ion-header ion-text{color:var(--ion-color-primary)}ion-menu ion-header .user-avatar{background-size:cover;background-repeat:no-repeat;background-position:center;background-color:var(--ion-color-secondary);border:solid 1px rgba(var(--ion-color-secondary-rgb),.5);overflow:hidden!important;font-size:var(--avatar-size, 60px)!important;line-height:var(--avatar-size, 60px);height:var(--avatar-size, 60px)!important;width:var(--avatar-size, 60px)!important;border-radius:50%;display:inline-block}ion-menu ion-header .user-avatar:hover{background-color:var(--ion-color-secondary-shade);border:solid 2px var(--ion-color-secondary-shade)}ion-menu ion-header .user-logo{text-align:right}ion-menu ion-header .user-logo img{max-width:120px;max-height:var(--avatar-size, 60px);width:auto}ion-menu ion-header .username{padding-top:0;margin-top:0;margin-bottom:0;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}ion-menu ion-header button[mat-button]{padding:0;text-align:start!important;width:100%}ion-menu .scroll-content{margin-top:79px!important}ion-menu .has-user-header .scroll-content{margin-top:188px!important}ion-menu ion-content.has-profile-header{--offset-top: 188px}ion-menu ion-content.no-profile-header{--offset-top: 79px}ion-menu ion-content ion-list{min-height:100%;display:flex;flex-direction:column;justify-content:flex-start}ion-menu ion-content ion-list ion-menu-toggle.flex-spacer{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end}ion-menu ion-content ion-list ion-item.primary{--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint)}ion-menu ion-content ion-list ion-item.secondary{--ion-item-icon-color: var(--ion-color-secondary-tint);--ion-item-text-color: var(--ion-color-secondary-tint)}ion-menu ion-content ion-list ion-item.tertiary{--ion-item-icon-color: var(--ion-color-tertiary-tint);--ion-item-text-color: var(--ion-color-tertiary-tint)}ion-menu ion-content ion-list ion-item.danger{--ion-item-icon-color: var(--ion-color-danger-tint);--ion-item-text-color: var(--ion-color-danger-tint)}ion-menu ion-content ion-list ion-item.medium{--ion-item-icon-color: var(--ion-color-medium-shade);--ion-item-text-color: var(--ion-color-medium-shade)}ion-menu ion-content ion-list ion-item.dark{--ion-item-icon-color: var(--ion-color-dark-tint);--ion-item-text-color: var(--ion-color-dark-tint)}ion-menu ion-content ion-list ion-item mat-icon,ion-menu ion-content ion-list ion-item ion-icon{color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item ion-text,ion-menu ion-content ion-list ion-item ion-label{color:var(--ion-item-text-color)!important}ion-menu ion-content ion-list ion-item.selected{background-color:var(--ion-item-background-selected)!important;--color-hover: var(--ion-item-background-selected) !important}ion-menu ion-content ion-list ion-item.selected mat-icon,ion-menu ion-content ion-list ion-item.selected ion-icon{color:var(--ion-item-icon-color-selected)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item.selected ion-text,ion-menu ion-content ion-list ion-item.selected ion-label{color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list ion-item.selected:hover{--color-hover: var(--ion-item-background-selected) !important;--ion-item-icon-color-selected: var(--ion-item-icon-color) !important;--ion-item-text-color-selected: var(--ion-item-text-color) !important}ion-menu ion-footer{display:block!important}ion-menu ion-footer ion-toolbar ion-title{cursor:pointer;font-size:12pt;font-weight:400;text-align:center;padding:0 8px}ion-menu ion-footer ion-toolbar ion-button{--width: 40px}@media screen and (max-width: 767px){ion-menu ion-footer{display:none!important;visibility:hidden!important}}@media screen and (min-width: 768px){ion-menu ion-scroll{overflow-y:auto!important}ion-menu .user-avatar{font-size:var(--avatar-size, 80px)!important;line-height:var(--avatar-size, 80px);height:var(--avatar-size, 80px)!important;width:var(--avatar-size, 80px)!important}ion-menu .user-logo img{max-height:var(--avatar-size, 80px)}}\n"] }]
@@ -24693,10 +24878,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 args: ['form', { static: true }]
             }] } });
 
-function getRandomImage(files) {
+const getRandomImage = (files) => {
     const imgIndex = Math.floor(Math.random() * files.length);
     return files[imgIndex];
-}
+};
 const APP_HOME_BUTTONS = new InjectionToken('homeButton');
 class HomePage {
     constructor(accountService, modalCtrl, translate, toastController, configService, platform, cd, network, settings, environment, locales, buttons) {
@@ -24832,8 +25017,9 @@ class HomePage {
                 && (!this.offline || !img.startsWith('http')));
             // Background image found: select one randomly
             if (backgroundImages.length) {
-                const bgImage = getRandomImage(backgroundImages);
-                this.contentStyle = bgImage && { 'background-image': `url(${bgImage})` } || {};
+                const bgImage = getRandomImage(backgroundImages)?.split('|');
+                this.contentStyle = bgImage?.[0] && { 'background-image': `url(${bgImage?.[0]})` } || {};
+                this.contentCredits = bgImage?.[1];
             }
             // Use background color
             else {
@@ -24902,10 +25088,10 @@ class HomePage {
     }
 }
 HomePage.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: HomePage, deps: [{ token: AccountService }, { token: i1.ModalController }, { token: i1$2.TranslateService }, { token: i1.ToastController }, { token: ConfigService }, { token: PlatformService }, { token: i0.ChangeDetectorRef }, { token: NetworkService }, { token: LocalSettingsService }, { token: ENVIRONMENT }, { token: APP_LOCALES }, { token: APP_HOME_BUTTONS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-HomePage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: HomePage, selector: "app-page-home", ngImport: i0, template: "<app-toolbar [canGoBack]=\"false\"\n             visible-xs visible-sm visible-mobile>\n\n  <!-- change locale button -->\n  <ion-button slot=\"end\" *ngIf=\"currentLocaleCode; let code\"\n              [matMenuTriggerFor]=\"localeMenu\">\n    <ion-label class=\"ion-text-uppercase\">&nbsp;{{ code }}</ion-label>\n    <mat-icon slot=\"end\">arrow_drop_down</mat-icon>\n  </ion-button>\n</app-toolbar>\n\n<!-- change locale menu -->\n<mat-menu #localeMenu=\"matMenu\">\n  <button *ngFor=\"let item of locales\"\n          mat-menu-item\n          (click)=\"changeLanguage(item.key)\">\n    <ion-label>{{item.value}}</ion-label>\n  </button>\n</mat-menu>\n\n<ion-content [ngStyle]=\"contentStyle\" no-padding-xs>\n\n  <!-- loading spinner -->\n  <div class=\"loading-page\" [class.cdk-visually-hidden]=\"!loading\">\n    <div class=\"spinner\" *ngIf=\"loading && showSpinner\">\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  </div>\n\n  <!-- Desktop: translucent top toolbar -->\n  <div hidden-xs hidden-sm hidden-mobile>\n    <ion-toolbar 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        <!-- change locale button -->\n        <ion-button color=\"secondary\" fill=\"solid\"\n                    *ngIf=\"currentLocaleCode; let code\"\n                    [matMenuTriggerFor]=\"localeMenu\">\n          <ion-label class=\"ion-text-uppercase\">&nbsp;{{ code }}</ion-label>\n          <mat-icon slot=\"end\">arrow_drop_down</mat-icon>\n        </ion-button>\n      </ion-buttons>\n    </ion-toolbar>\n  </div>\n\n  <!-- Install (and upgrade) card -->\n  <app-install-upgrade-card [isLogin]=\"isLogin\"\n                            [showInstallButton]=\"true\">\n  </app-install-upgrade-card>\n\n  <!-- Welcome card -->\n  <ion-card *ngIf=\"!loading\"\n            class=\"main welcome ion-padding ion-text-center ion-align-self-center\"\n            @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\">\n      </ion-card-subtitle>\n    </ion-card-header>\n    <ion-card-content class=\"ion-no-padding\">\n      <ion-text color=\"primary\">\n        <img class=\"logo\" *ngIf=\"logo\" src=\"{{ 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\n        <!-- If NOT login -->\n        <ng-container *ngIf=\"!isLogin; else loginButtons;\">\n\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\n        </ng-container>\n\n        <!-- If user login -->\n        <ng-template #loginButtons>\n\n          <!-- Feature buttons -->\n          <ng-container *ngIf=\"$filteredButtons | async as buttons\">\n            <ng-container *ngFor=\"let item of buttons\">\n              <ion-button *ngIf=\"item.path\"\n                          expand=\"block\" color=\"tertiary\"\n                          [class]=\"item.cssClass\"\n                          [routerLink]=\"item.path\"\n                          routerDirection=\"root\">\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\">{{item.matIcon}}</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 [innerHTML]=\"'HOME.NOT_THIS_ACCOUNT_QUESTION' | translate: {displayName: accountName }\"></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\n\n        </ng-template>\n\n      </div>\n    </ion-card-content>\n  </ion-card>\n\n  <!-- Page history -->\n  <ion-grid *ngIf=\"!loading && isLogin && pageHistory.length; else bottomBanner\"\n            class=\"history-container ion-align-self-center\">\n    <ion-row>\n      <ion-col size=\"12\" size-xl=\"\" *ngFor=\"let page of pageHistory; trackBy: getPagePath\"\n               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 type=\"button\" tabindex=\"-1\"\n                      (click)=\"settings.removePageHistory(page.path)\"\n                      mat-icon-button class=\"ion-float-start ion-no-margin\">\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><ion-icon name=\"time-outline\"></ion-icon>&nbsp;{{ page.time|dateFromNow }}</small>&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  detail=\"true\"\n                         tappable class=\"text-1x\"\n                         [routerLink]=\"page.path\"\n                         routerDirection=\"root\" lines=\"none\">\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          <ion-card-content class=\"ion-no-padding ion-padding-start\" *ngIf=\"page.children?.length\">\n            <ion-list class=\"ion-no-padding\">\n              <ion-item  detail=\"true\"\n                         *ngFor=\"let childPage of page.children\"\n                         tappable class=\"text-1x\"\n                        [routerLink]=\"childPage.path\"\n                        routerDirection=\"root\">\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\">{{childPage.matIcon}}</mat-icon>\n\n                <ion-label color=\"dark\" [innerHTML]=\"childPage.title\"></ion-label>\n              </ion-item>\n            </ion-list>\n          </ion-card-content>\n        </ion-card>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n  <!-- Display configured Departments logos -->\n  <ng-template #bottomBanner>\n    <div class=\"bottom-banner ion-text-center ion-padding\" *ngIf=\"!loadingBanner\" @fadeInAnimation>\n      <a href=\"{{ item.siteUrl }}\" *ngFor=\"let item of $partners | async \">\n        <img class=\"logo\" src=\"{{ item.logo }}\" alt=\"{{item.label}}\"  [title]=\"item.label\" />\n      </a>\n    </div>\n  </ng-template>\n\n\n</ion-content>\n", styles: ["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;display:inline-block;padding:15px;background-color:var(--ion-color-primary)}ion-content .loading-page{display:block;height:100%;width:100%;position:absolute;background-color:var(--ion-color-primary);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}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:#ffffffb3}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:#ffffffb3}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]{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{--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%;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{background-color:#ffffffb3;min-width:240px;z-index:0;position:absolute;left:16px;right:16px;bottom:16px}ion-content .bottom-banner img.logo{max-height:50px;margin-left:8px}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{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% - 100px)}}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i1.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: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i1.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: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.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: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i1.IonMenuToggle, selector: "ion-menu-toggle", inputs: ["autoHide", "menu"] }, { kind: "component", type: i1.IonRow, selector: "ion-row" }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]", inputs: ["routerDirection", "routerAnimation"] }, { kind: "directive", type: i1$2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i11$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i11$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "directive", type: i1$6.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: AppInstallUpgradeCard, selector: "app-install-upgrade-card", inputs: ["isLogin", "showUpgradeWarning", "showOfflineWarning", "showInstallButton"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: DateFromNowPipe, name: "dateFromNow" }], animations: [fadeInAnimation, slideUpDownAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+HomePage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: HomePage, selector: "app-page-home", ngImport: i0, template: "<app-toolbar [canGoBack]=\"false\"\n             visible-xs visible-sm visible-mobile>\n\n  <!-- change locale button -->\n  <ion-button slot=\"end\" *ngIf=\"currentLocaleCode; let code\"\n              [matMenuTriggerFor]=\"localeMenu\">\n    <ion-label class=\"ion-text-uppercase\">&nbsp;{{ code }}</ion-label>\n    <mat-icon slot=\"end\">arrow_drop_down</mat-icon>\n  </ion-button>\n</app-toolbar>\n\n<!-- change locale menu -->\n<mat-menu #localeMenu=\"matMenu\">\n  <button *ngFor=\"let item of locales\"\n          mat-menu-item\n          (click)=\"changeLanguage(item.key)\">\n    <ion-label>{{item.value}}</ion-label>\n  </button>\n</mat-menu>\n\n<ion-content [ngStyle]=\"contentStyle\" no-padding-xs>\n\n  <span class=\"content-credits\"><ion-text>{{ contentCredits }}</ion-text></span>\n\n  <!-- loading spinner -->\n  <div class=\"loading-page\" [class.cdk-visually-hidden]=\"!loading\">\n    <div class=\"spinner\" *ngIf=\"loading && showSpinner\">\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  </div>\n\n  <!-- Desktop: translucent top toolbar -->\n  <div hidden-xs hidden-sm hidden-mobile>\n    <ion-toolbar 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        <!-- change locale button -->\n        <ion-button color=\"secondary\" fill=\"solid\"\n                    *ngIf=\"currentLocaleCode; let code\"\n                    [matMenuTriggerFor]=\"localeMenu\">\n          <ion-label class=\"ion-text-uppercase\">&nbsp;{{ code }}</ion-label>\n          <mat-icon slot=\"end\">arrow_drop_down</mat-icon>\n        </ion-button>\n      </ion-buttons>\n    </ion-toolbar>\n  </div>\n\n  <!-- Install (and upgrade) card -->\n  <app-install-upgrade-card [isLogin]=\"isLogin\"\n                            [showInstallButton]=\"true\">\n  </app-install-upgrade-card>\n\n  <!-- Welcome card -->\n  <ion-card *ngIf=\"!loading\"\n            class=\"main welcome ion-padding ion-text-center ion-align-self-center\"\n            @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\">\n      </ion-card-subtitle>\n    </ion-card-header>\n    <ion-card-content class=\"ion-no-padding\">\n      <ion-text color=\"primary\">\n        <img class=\"logo\" *ngIf=\"logo\" src=\"{{ 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\n        <!-- If NOT login -->\n        <ng-container *ngIf=\"!isLogin; else loginButtons;\">\n\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\n        </ng-container>\n\n        <!-- If user login -->\n        <ng-template #loginButtons>\n\n          <!-- Feature buttons -->\n          <ng-container *ngIf=\"$filteredButtons | async as buttons\">\n            <ng-container *ngFor=\"let item of buttons\">\n              <ion-button *ngIf=\"item.path\"\n                          expand=\"block\" color=\"tertiary\"\n                          [class]=\"item.cssClass\"\n                          [routerLink]=\"item.path\"\n                          routerDirection=\"root\">\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\">{{item.matIcon}}</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 [innerHTML]=\"'HOME.NOT_THIS_ACCOUNT_QUESTION' | translate: {displayName: accountName }\"></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\n\n        </ng-template>\n\n      </div>\n    </ion-card-content>\n  </ion-card>\n\n  <!-- Page history -->\n  <ion-grid *ngIf=\"!loading && isLogin && pageHistory.length; else bottomBanner\"\n            class=\"history-container ion-align-self-center\">\n    <ion-row>\n      <ion-col size=\"12\" size-xl=\"\" *ngFor=\"let page of pageHistory; trackBy: getPagePath\"\n               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 type=\"button\" tabindex=\"-1\"\n                      (click)=\"settings.removePageHistory(page.path)\"\n                      mat-icon-button class=\"ion-float-start ion-no-margin\">\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><ion-icon name=\"time-outline\"></ion-icon>&nbsp;{{ page.time|dateFromNow }}</small>&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  detail=\"true\"\n                         tappable class=\"text-1x\"\n                         [routerLink]=\"page.path\"\n                         routerDirection=\"root\" lines=\"none\">\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          <ion-card-content class=\"ion-no-padding ion-padding-start\" *ngIf=\"page.children?.length\">\n            <ion-list class=\"ion-no-padding\">\n              <ion-item  detail=\"true\"\n                         *ngFor=\"let childPage of page.children\"\n                         tappable class=\"text-1x\"\n                        [routerLink]=\"childPage.path\"\n                        routerDirection=\"root\">\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\">{{childPage.matIcon}}</mat-icon>\n\n                <ion-label color=\"dark\" [innerHTML]=\"childPage.title\"></ion-label>\n              </ion-item>\n            </ion-list>\n          </ion-card-content>\n        </ion-card>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n  <!-- Display configured Departments logos -->\n  <ng-template #bottomBanner>\n    <div class=\"bottom-banner ion-text-center ion-padding\" *ngIf=\"!loadingBanner\" @fadeInAnimation>\n      <a href=\"{{ item.siteUrl }}\" *ngFor=\"let item of $partners | async \">\n        <img class=\"logo\" src=\"{{ item.logo }}\" alt=\"{{item.label}}\"  [title]=\"item.label\" />\n      </a>\n    </div>\n  </ng-template>\n\n\n</ion-content>\n", styles: ["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;display:inline-block;padding:15px;background-color:var(--ion-color-primary)}ion-content .loading-page{display:block;height:100%;width:100%;position:absolute;background-color:var(--ion-color-primary);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}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:#ffffffb3}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:#ffffffb3}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]{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{--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%;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{background-color:#ffffffb3;min-width:240px;z-index:0;position:absolute;left:16px;right:16px;bottom:16px}ion-content .bottom-banner img.logo{max-height:50px;margin-left:8px}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{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% - 100px)}}.content-credits{position:absolute;right:5px;bottom:5px}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i1.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: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i1.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: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.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: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i1.IonMenuToggle, selector: "ion-menu-toggle", inputs: ["autoHide", "menu"] }, { kind: "component", type: i1.IonRow, selector: "ion-row" }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]", inputs: ["routerDirection", "routerAnimation"] }, { kind: "directive", type: i1$2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i8$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "directive", type: i1$6.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: AppInstallUpgradeCard, selector: "app-install-upgrade-card", inputs: ["isLogin", "showUpgradeWarning", "showOfflineWarning", "showInstallButton"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: DateFromNowPipe, name: "dateFromNow" }], animations: [fadeInAnimation, slideUpDownAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: HomePage, decorators: [{
             type: Component,
-            args: [{ selector: 'app-page-home', changeDetection: ChangeDetectionStrategy.OnPush, animations: [fadeInAnimation, slideUpDownAnimation], template: "<app-toolbar [canGoBack]=\"false\"\n             visible-xs visible-sm visible-mobile>\n\n  <!-- change locale button -->\n  <ion-button slot=\"end\" *ngIf=\"currentLocaleCode; let code\"\n              [matMenuTriggerFor]=\"localeMenu\">\n    <ion-label class=\"ion-text-uppercase\">&nbsp;{{ code }}</ion-label>\n    <mat-icon slot=\"end\">arrow_drop_down</mat-icon>\n  </ion-button>\n</app-toolbar>\n\n<!-- change locale menu -->\n<mat-menu #localeMenu=\"matMenu\">\n  <button *ngFor=\"let item of locales\"\n          mat-menu-item\n          (click)=\"changeLanguage(item.key)\">\n    <ion-label>{{item.value}}</ion-label>\n  </button>\n</mat-menu>\n\n<ion-content [ngStyle]=\"contentStyle\" no-padding-xs>\n\n  <!-- loading spinner -->\n  <div class=\"loading-page\" [class.cdk-visually-hidden]=\"!loading\">\n    <div class=\"spinner\" *ngIf=\"loading && showSpinner\">\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  </div>\n\n  <!-- Desktop: translucent top toolbar -->\n  <div hidden-xs hidden-sm hidden-mobile>\n    <ion-toolbar 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        <!-- change locale button -->\n        <ion-button color=\"secondary\" fill=\"solid\"\n                    *ngIf=\"currentLocaleCode; let code\"\n                    [matMenuTriggerFor]=\"localeMenu\">\n          <ion-label class=\"ion-text-uppercase\">&nbsp;{{ code }}</ion-label>\n          <mat-icon slot=\"end\">arrow_drop_down</mat-icon>\n        </ion-button>\n      </ion-buttons>\n    </ion-toolbar>\n  </div>\n\n  <!-- Install (and upgrade) card -->\n  <app-install-upgrade-card [isLogin]=\"isLogin\"\n                            [showInstallButton]=\"true\">\n  </app-install-upgrade-card>\n\n  <!-- Welcome card -->\n  <ion-card *ngIf=\"!loading\"\n            class=\"main welcome ion-padding ion-text-center ion-align-self-center\"\n            @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\">\n      </ion-card-subtitle>\n    </ion-card-header>\n    <ion-card-content class=\"ion-no-padding\">\n      <ion-text color=\"primary\">\n        <img class=\"logo\" *ngIf=\"logo\" src=\"{{ 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\n        <!-- If NOT login -->\n        <ng-container *ngIf=\"!isLogin; else loginButtons;\">\n\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\n        </ng-container>\n\n        <!-- If user login -->\n        <ng-template #loginButtons>\n\n          <!-- Feature buttons -->\n          <ng-container *ngIf=\"$filteredButtons | async as buttons\">\n            <ng-container *ngFor=\"let item of buttons\">\n              <ion-button *ngIf=\"item.path\"\n                          expand=\"block\" color=\"tertiary\"\n                          [class]=\"item.cssClass\"\n                          [routerLink]=\"item.path\"\n                          routerDirection=\"root\">\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\">{{item.matIcon}}</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 [innerHTML]=\"'HOME.NOT_THIS_ACCOUNT_QUESTION' | translate: {displayName: accountName }\"></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\n\n        </ng-template>\n\n      </div>\n    </ion-card-content>\n  </ion-card>\n\n  <!-- Page history -->\n  <ion-grid *ngIf=\"!loading && isLogin && pageHistory.length; else bottomBanner\"\n            class=\"history-container ion-align-self-center\">\n    <ion-row>\n      <ion-col size=\"12\" size-xl=\"\" *ngFor=\"let page of pageHistory; trackBy: getPagePath\"\n               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 type=\"button\" tabindex=\"-1\"\n                      (click)=\"settings.removePageHistory(page.path)\"\n                      mat-icon-button class=\"ion-float-start ion-no-margin\">\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><ion-icon name=\"time-outline\"></ion-icon>&nbsp;{{ page.time|dateFromNow }}</small>&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  detail=\"true\"\n                         tappable class=\"text-1x\"\n                         [routerLink]=\"page.path\"\n                         routerDirection=\"root\" lines=\"none\">\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          <ion-card-content class=\"ion-no-padding ion-padding-start\" *ngIf=\"page.children?.length\">\n            <ion-list class=\"ion-no-padding\">\n              <ion-item  detail=\"true\"\n                         *ngFor=\"let childPage of page.children\"\n                         tappable class=\"text-1x\"\n                        [routerLink]=\"childPage.path\"\n                        routerDirection=\"root\">\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\">{{childPage.matIcon}}</mat-icon>\n\n                <ion-label color=\"dark\" [innerHTML]=\"childPage.title\"></ion-label>\n              </ion-item>\n            </ion-list>\n          </ion-card-content>\n        </ion-card>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n  <!-- Display configured Departments logos -->\n  <ng-template #bottomBanner>\n    <div class=\"bottom-banner ion-text-center ion-padding\" *ngIf=\"!loadingBanner\" @fadeInAnimation>\n      <a href=\"{{ item.siteUrl }}\" *ngFor=\"let item of $partners | async \">\n        <img class=\"logo\" src=\"{{ item.logo }}\" alt=\"{{item.label}}\"  [title]=\"item.label\" />\n      </a>\n    </div>\n  </ng-template>\n\n\n</ion-content>\n", styles: ["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;display:inline-block;padding:15px;background-color:var(--ion-color-primary)}ion-content .loading-page{display:block;height:100%;width:100%;position:absolute;background-color:var(--ion-color-primary);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}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:#ffffffb3}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:#ffffffb3}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]{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{--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%;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{background-color:#ffffffb3;min-width:240px;z-index:0;position:absolute;left:16px;right:16px;bottom:16px}ion-content .bottom-banner img.logo{max-height:50px;margin-left:8px}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{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% - 100px)}}\n"] }]
+            args: [{ selector: 'app-page-home', changeDetection: ChangeDetectionStrategy.OnPush, animations: [fadeInAnimation, slideUpDownAnimation], template: "<app-toolbar [canGoBack]=\"false\"\n             visible-xs visible-sm visible-mobile>\n\n  <!-- change locale button -->\n  <ion-button slot=\"end\" *ngIf=\"currentLocaleCode; let code\"\n              [matMenuTriggerFor]=\"localeMenu\">\n    <ion-label class=\"ion-text-uppercase\">&nbsp;{{ code }}</ion-label>\n    <mat-icon slot=\"end\">arrow_drop_down</mat-icon>\n  </ion-button>\n</app-toolbar>\n\n<!-- change locale menu -->\n<mat-menu #localeMenu=\"matMenu\">\n  <button *ngFor=\"let item of locales\"\n          mat-menu-item\n          (click)=\"changeLanguage(item.key)\">\n    <ion-label>{{item.value}}</ion-label>\n  </button>\n</mat-menu>\n\n<ion-content [ngStyle]=\"contentStyle\" no-padding-xs>\n\n  <span class=\"content-credits\"><ion-text>{{ contentCredits }}</ion-text></span>\n\n  <!-- loading spinner -->\n  <div class=\"loading-page\" [class.cdk-visually-hidden]=\"!loading\">\n    <div class=\"spinner\" *ngIf=\"loading && showSpinner\">\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  </div>\n\n  <!-- Desktop: translucent top toolbar -->\n  <div hidden-xs hidden-sm hidden-mobile>\n    <ion-toolbar 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        <!-- change locale button -->\n        <ion-button color=\"secondary\" fill=\"solid\"\n                    *ngIf=\"currentLocaleCode; let code\"\n                    [matMenuTriggerFor]=\"localeMenu\">\n          <ion-label class=\"ion-text-uppercase\">&nbsp;{{ code }}</ion-label>\n          <mat-icon slot=\"end\">arrow_drop_down</mat-icon>\n        </ion-button>\n      </ion-buttons>\n    </ion-toolbar>\n  </div>\n\n  <!-- Install (and upgrade) card -->\n  <app-install-upgrade-card [isLogin]=\"isLogin\"\n                            [showInstallButton]=\"true\">\n  </app-install-upgrade-card>\n\n  <!-- Welcome card -->\n  <ion-card *ngIf=\"!loading\"\n            class=\"main welcome ion-padding ion-text-center ion-align-self-center\"\n            @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\">\n      </ion-card-subtitle>\n    </ion-card-header>\n    <ion-card-content class=\"ion-no-padding\">\n      <ion-text color=\"primary\">\n        <img class=\"logo\" *ngIf=\"logo\" src=\"{{ 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\n        <!-- If NOT login -->\n        <ng-container *ngIf=\"!isLogin; else loginButtons;\">\n\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\n        </ng-container>\n\n        <!-- If user login -->\n        <ng-template #loginButtons>\n\n          <!-- Feature buttons -->\n          <ng-container *ngIf=\"$filteredButtons | async as buttons\">\n            <ng-container *ngFor=\"let item of buttons\">\n              <ion-button *ngIf=\"item.path\"\n                          expand=\"block\" color=\"tertiary\"\n                          [class]=\"item.cssClass\"\n                          [routerLink]=\"item.path\"\n                          routerDirection=\"root\">\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\">{{item.matIcon}}</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 [innerHTML]=\"'HOME.NOT_THIS_ACCOUNT_QUESTION' | translate: {displayName: accountName }\"></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\n\n        </ng-template>\n\n      </div>\n    </ion-card-content>\n  </ion-card>\n\n  <!-- Page history -->\n  <ion-grid *ngIf=\"!loading && isLogin && pageHistory.length; else bottomBanner\"\n            class=\"history-container ion-align-self-center\">\n    <ion-row>\n      <ion-col size=\"12\" size-xl=\"\" *ngFor=\"let page of pageHistory; trackBy: getPagePath\"\n               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 type=\"button\" tabindex=\"-1\"\n                      (click)=\"settings.removePageHistory(page.path)\"\n                      mat-icon-button class=\"ion-float-start ion-no-margin\">\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><ion-icon name=\"time-outline\"></ion-icon>&nbsp;{{ page.time|dateFromNow }}</small>&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  detail=\"true\"\n                         tappable class=\"text-1x\"\n                         [routerLink]=\"page.path\"\n                         routerDirection=\"root\" lines=\"none\">\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          <ion-card-content class=\"ion-no-padding ion-padding-start\" *ngIf=\"page.children?.length\">\n            <ion-list class=\"ion-no-padding\">\n              <ion-item  detail=\"true\"\n                         *ngFor=\"let childPage of page.children\"\n                         tappable class=\"text-1x\"\n                        [routerLink]=\"childPage.path\"\n                        routerDirection=\"root\">\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\">{{childPage.matIcon}}</mat-icon>\n\n                <ion-label color=\"dark\" [innerHTML]=\"childPage.title\"></ion-label>\n              </ion-item>\n            </ion-list>\n          </ion-card-content>\n        </ion-card>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n  <!-- Display configured Departments logos -->\n  <ng-template #bottomBanner>\n    <div class=\"bottom-banner ion-text-center ion-padding\" *ngIf=\"!loadingBanner\" @fadeInAnimation>\n      <a href=\"{{ item.siteUrl }}\" *ngFor=\"let item of $partners | async \">\n        <img class=\"logo\" src=\"{{ item.logo }}\" alt=\"{{item.label}}\"  [title]=\"item.label\" />\n      </a>\n    </div>\n  </ng-template>\n\n\n</ion-content>\n", styles: ["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;display:inline-block;padding:15px;background-color:var(--ion-color-primary)}ion-content .loading-page{display:block;height:100%;width:100%;position:absolute;background-color:var(--ion-color-primary);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}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:#ffffffb3}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:#ffffffb3}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]{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{--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%;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{background-color:#ffffffb3;min-width:240px;z-index:0;position:absolute;left:16px;right:16px;bottom:16px}ion-content .bottom-banner img.logo{max-height:50px;margin-left:8px}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{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% - 100px)}}.content-credits{position:absolute;right:5px;bottom:5px}\n"] }]
         }], ctorParameters: function () { return [{ type: AccountService }, { type: i1.ModalController }, { type: i1$2.TranslateService }, { type: i1.ToastController }, { type: ConfigService }, { type: PlatformService }, { type: i0.ChangeDetectorRef }, { type: NetworkService }, { type: LocalSettingsService }, { type: Environment, decorators: [{
                     type: Inject,
                     args: [ENVIRONMENT]
@@ -25507,7 +25693,7 @@ class SettingsPage extends AppForm {
 SettingsPage.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SettingsPage, deps: [{ token: i0.Injector }, { token: PlatformService }, { token: i1.NavController }, { token: LocalSettingsValidatorService }, { token: i1.AlertController }, { token: i1$2.TranslateService }, { token: i1$3.UntypedFormBuilder }, { token: AccountService }, { token: LocalSettingsService }, { token: i0.ChangeDetectorRef }, { token: NetworkService }, { token: APP_LOCALES }, { token: APP_SETTINGS_MENU_ITEMS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 SettingsPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SettingsPage, selector: "page-settings", providers: [
         { provide: ValidatorService, useExisting: LocalSettingsValidatorService },
-    ], usesInheritance: true, ngImport: i0, template: "<app-toolbar [title]=\"'SETTINGS.TITLE'|translate\" color=\"primary\"\n             [hasValidate]=\"dirty && !saving\"\n             [hasClose]=\"!dirty && !saving\"\n             (onValidate)=\"save($event)\"\n             (onClose)=\"close($event)\">\n\n  <ion-buttons slot=\"end\">\n    <!-- options menu -->\n    <ion-button [matMenuTriggerFor]=\"optionsMenu\"\n                *ngIf=\"!saving\"\n                [disabled]=\"saving\">\n      <mat-icon slot=\"icon-only\">more_vert</mat-icon>\n    </ion-button>\n  </ion-buttons>\n</app-toolbar>\n\n<!-- Options menu -->\n<mat-menu #optionsMenu=\"matMenu\">\n  <!-- Clear cache -->\n  <button mat-menu-item (click)=\"clearCache($event)\">\n    <mat-icon><ion-icon name=\"trash-outline\"></ion-icon></mat-icon>\n    <ion-label translate>SETTINGS.BTN_CLEAR_CACHE</ion-label>\n  </button>\n\n  <!-- Reset -->\n  <button mat-menu-item\n          [disabled]=\"!dirty\"\n          (click)=\"cancel($event)\">\n    <mat-icon><ion-icon name=\"refresh\"></ion-icon></mat-icon>\n    <mat-label translate>COMMON.BTN_RESET</mat-label>\n  </button>\n\n  <!-- additional items -->\n  <ng-container *ngIf=\"!loading\">\n    <ng-container *ngFor=\"let item of menuItems\">\n      <a *ngIf=\"item.path\"\n         mat-menu-item\n         class=\"{{item.cssClass}} {{item.color}}\"\n         (click)=\"executeAction($event, item)\">\n        <mat-icon *ngIf=\"item.icon\"><ion-icon [name]=\"item.icon\"></ion-icon></mat-icon>\n        <mat-icon *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n        <mat-label translate>{{item.title}}</mat-label>\n      </a>\n      <!-- divider -->\n      <mat-divider *ngIf=\"!item.path && !item.action\"\n                   class=\"{{item.cssClass}} {{item.color}}\">\n        <mat-label translate>{{item.title}}</mat-label>\n      </mat-divider>\n    </ng-container>\n  </ng-container>\n</mat-menu>\n\n<ion-content>\n\n  <form [formGroup]=\"form\" novalidate (ngSubmit)=\"save($event)\" class=\"form-container\">\n\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row class=\"ion-no-padding\">\n\n        <!-- left  margin -->\n        <ion-col size=\"0\" size-lg=\"2\">&nbsp;\n        </ion-col>\n\n        <ion-col class=\"ion-padding\">\n\n          <!-- error -->\n          <ion-item *ngIf=\"error\" lines=\"none\">\n            <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n            <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error|translate\"></ion-label>\n          </ion-item>\n\n          <p [innerHTML]=\"'SETTINGS.DESCRIPTION'|translate\"></p>\n\n          <!-- account inheritance (desktop) -->\n          <mat-form-field [hidden]=\"!isLogin\" *ngIf=\"!mobile; else accountInheritanceMobile\">\n            <input matInput hidden formControlName=\"accountInheritance\" type=\"text\">\n\n            <!-- check box (if desktop) -->\n            <mat-checkbox\n              *ngIf=\"!mobile; else accountInheritanceMobile\"\n              (change)=\"setAccountInheritance($event.checked)\"\n              [checked]=\"accountInheritance\">\n              <span translate>SETTINGS.INHERIT_FROM_ACCOUNT</span>\n            </mat-checkbox>\n\n            <mat-error *ngIf=\"form.controls.accountInheritance.hasError('required')\" translate>ERROR.FIELD_REQUIRED\n            </mat-error>\n          </mat-form-field>\n\n          <!-- account inheritance (if mobile) -->\n          <ng-template #accountInheritanceMobile>\n            <mat-form-field [hidden]=\"!isLogin\">\n              <input matInput hidden formControlName=\"accountInheritance\" type=\"text\">\n\n              <!-- slide toggle  -->\n              <ion-text translate>SETTINGS.INHERIT_FROM_ACCOUNT</ion-text>\n              <mat-slide-toggle matSuffix\n                                (change)=\"setAccountInheritance($event.checked)\"\n                                [checked]=\"accountInheritance\">\n\n              </mat-slide-toggle>\n              <mat-error *ngIf=\"form.controls.accountInheritance.hasError('required')\" translate>ERROR.FIELD_REQUIRED\n              </mat-error>\n            </mat-form-field>\n          </ng-template>\n\n          <!-- locale -->\n          <mat-form-field>\n            <mat-select [placeholder]=\"'SETTINGS.LOCALE'|translate\" formControlName=\"locale\" required>\n              <mat-option *ngFor=\"let item of locales\" [value]=\"item.key\">\n                {{item.value}}\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf=\"form.controls.locale.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n\n          <!-- Network entry -->\n          <h3>\n            <ion-text translate>SETTINGS.NETWORK_DIVIDER</ion-text>\n          </h3>\n\n          <!-- Peer address -->\n          <mat-form-field>\n            <input matInput type=\"text\" [placeholder]=\"'SETTINGS.PEER_URL'|translate\"\n                   formControlName=\"peerUrl\"\n                   required>\n\n            <button mat-icon-button type=\"button\" matSuffix (click)=\"showSelectPeerModal()\" tabindex=\"-1\"\n                    [title]=\"'SETTINGS.BTN_CHANGE_PEER'|translate\">\n              <mat-icon>search</mat-icon>\n            </button>\n\n            <mat-error *ngIf=\"form.controls.peerUrl.hasError('required')\"\n                       translate>ERROR.FIELD_REQUIRED\n            </mat-error>\n            <mat-error *ngIf=\"form.controls.peerUrl.hasError('peerAlive')\"\n                       translate>SETTINGS.ERROR.PEER_NOT_REACHABLE\n            </mat-error>\n            <mat-error *ngIf=\"form.controls.peerUrl.hasError('peerNotCompatible')\"\n                       translate>SETTINGS.ERROR.PEER_NOT_COMPATIBLE\n            </mat-error>\n          </mat-form-field>\n\n          <!-- Offline mode (if mobile) -->\n          <mat-form-field *ngIf=\"mobile\">\n            <input matInput hidden formControlName=\"accountInheritance\" type=\"text\">\n\n            <!-- slide toggle  -->\n            <ion-text translate>SETTINGS.OFFLINE_MODE</ion-text>\n            <mat-slide-toggle matSuffix\n                              (change)=\"network.setForceOffline($event.checked)\"\n                              [checked]=\"network.offline\">\n\n            </mat-slide-toggle>\n          </mat-form-field>\n\n          <!-- Data entry -->\n          <h3>\n            <ion-text translate>SETTINGS.DATA_ENTRY_DIVIDER</ion-text>\n          </h3>\n\n          <!-- Usage mode -->\n          <mat-form-field>\n            <mat-select [placeholder]=\"'SETTINGS.USAGE_MODE'|translate\" formControlName=\"usageMode\"\n                        required>\n              <mat-option *ngFor=\"let item of usageModes\" [value]=\"item\">\n                {{'SETTINGS.USAGE_MODES.'+item|translate}}\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf=\"form.controls.usageMode.hasError('required')\"\n                       translate>ERROR.FIELD_REQUIRED\n            </mat-error>\n          </mat-form-field>\n\n          <!-- lat/long format-->\n          <mat-form-field>\n            <mat-select [placeholder]=\"'SETTINGS.LAT_LONG_FORMAT'|translate\" formControlName=\"latLongFormat\"\n                        required>\n              <mat-option *ngFor=\"let item of latLongFormats\" [value]=\"item\">\n                {{'COMMON.LAT_LONG.'+item+'_PLACEHOLDER'|translate}}\n              </mat-option>\n            </mat-select>\n            <mat-error\n              *ngIf=\"form.controls.latLongFormat.hasError('required')\"\n              translate>ERROR.FIELD_REQUIRED\n            </mat-error>\n          </mat-form-field>\n\n          <!-- fields options -->\n          <ion-grid formArrayName=\"properties\" class=\"ion-no-padding\">\n            <ion-row class=\"ion-no-padding\">\n              <ion-col class=\"ion-no-padding ion-align-self-end\" size=\"12\">\n                <span class=\"toolbar-spacer\"></span>\n\n                <!-- Show more options -->\n                <ion-button color=\"light\" *ngIf=\"propertiesForm?.length === 0\"\n                            [title]=\"'SETTINGS.BTN_SHOW_MORE_HELP'|translate\"\n                            (click)=\"propertiesFormHelper.add()\">\n                  <ion-label translate>COMMON.BTN_SHOW_MORE</ion-label>\n                  <mat-icon slot=\"end\">arrow_drop_down</mat-icon>\n                </ion-button>\n              </ion-col>\n            </ion-row>\n\n            <!-- Fields options -->\n            <ng-container *ngFor=\"let propertyForm of propertiesForm?.controls; let i=index\">\n              <ion-row class=\"ion-no-padding\" [formGroupName]=\"i\">\n\n                <!-- property key -->\n                <ion-col class=\"ion-no-padding\">\n                  <mat-form-field>\n                    <mat-select formControlName=\"key\"\n                                [placeholder]=\" 'SETTINGS.PROPERTY_KEY'|translate\">\n                      <mat-option *ngFor=\"let item of propertyDefinitions\" [value]=\"item.key\">{{ item.label | translate }}\n                      </mat-option>\n                    </mat-select>\n                  </mat-form-field>\n                </ion-col>\n\n                <!-- property value -->\n                <ion-col class=\"ion-no-padding\" padding-left>\n                  <app-form-field *ngIf=\"getPropertyDefinition(i); let definition\"\n                                  floatLabel=\"never\"\n                                  [definition]=\"definition\"\n                                  [formControl]=\"propertyForm|formGetControl:'value'\"\n                                  [placeholder]=\"'SETTINGS.PROPERTY_VALUE' | translate\"\n                                  [required]=\"true\">\n                  </app-form-field>\n                </ion-col>\n                <ion-col size=\"2\" class=\"ion-no-padding\">\n                  <button type=\"button\" mat-icon-button color=\"light\"\n                          [disabled]=\"loading\"\n                          [title]=\"'COMMON.BTN_DELETE'|translate\"\n                          (click)=\"removePropertyAt(i)\">\n                    <mat-icon>close</mat-icon>\n                  </button>\n                  <button *ngIf=\"propertiesFormHelper.isLast(i)\"\n                          type=\"button\"\n                          mat-icon-button\n                          color=\"light\"\n                          [disabled]=\"loading\"\n                           [title]=\"'SETTINGS.BTN_ADD_PROPERTY'|translate\"\n                          (click)=\"propertiesFormHelper.add()\">\n                    <mat-icon>add</mat-icon>\n                  </button>\n                </ion-col>\n              </ion-row>\n            </ng-container>\n          </ion-grid>\n        </ion-col>\n\n        <!-- right margin -->\n        <ion-col size=\"0\" size-lg=\"2\">&nbsp;\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n\n  </form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <app-form-buttons-bar (onCancel)=\"cancel()\" (onSave)=\"save($event)\" [disabled]=\"!form.dirty || saving\"></app-form-buttons-bar>\n</ion-footer>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.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: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.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: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.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: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonRow, selector: "ion-row" }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i6$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i11$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i11$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i18.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i14.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "component", type: AppFormField, selector: "app-form-field", inputs: ["definition", "required", "readonly", "disabled", "formControl", "formControlName", "placeholder", "compact", "floatLabel", "tabindex", "autofocus", "clearable", "chipColor", "debug", "class"], outputs: ["keyup.enter"] }, { kind: "component", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: ["disabled", "disabledCancel", "classList"], outputs: ["onCancel", "onSave", "onNext", "onBack"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], usesInheritance: true, ngImport: i0, template: "<app-toolbar [title]=\"'SETTINGS.TITLE'|translate\" color=\"primary\"\n             [hasValidate]=\"dirty && !saving\"\n             [hasClose]=\"!dirty && !saving\"\n             (onValidate)=\"save($event)\"\n             (onClose)=\"close($event)\">\n\n  <ion-buttons slot=\"end\">\n    <!-- options menu -->\n    <ion-button [matMenuTriggerFor]=\"optionsMenu\"\n                *ngIf=\"!saving\"\n                [disabled]=\"saving\">\n      <mat-icon slot=\"icon-only\">more_vert</mat-icon>\n    </ion-button>\n  </ion-buttons>\n</app-toolbar>\n\n<!-- Options menu -->\n<mat-menu #optionsMenu=\"matMenu\">\n  <!-- Clear cache -->\n  <button mat-menu-item (click)=\"clearCache($event)\">\n    <mat-icon><ion-icon name=\"trash-outline\"></ion-icon></mat-icon>\n    <ion-label translate>SETTINGS.BTN_CLEAR_CACHE</ion-label>\n  </button>\n\n  <!-- Reset -->\n  <button mat-menu-item\n          [disabled]=\"!dirty\"\n          (click)=\"cancel($event)\">\n    <mat-icon><ion-icon name=\"refresh\"></ion-icon></mat-icon>\n    <mat-label translate>COMMON.BTN_RESET</mat-label>\n  </button>\n\n  <!-- additional items -->\n  <ng-container *ngIf=\"!loading\">\n    <ng-container *ngFor=\"let item of menuItems\">\n      <a *ngIf=\"item.path\"\n         mat-menu-item\n         class=\"{{item.cssClass}} {{item.color}}\"\n         (click)=\"executeAction($event, item)\">\n        <mat-icon *ngIf=\"item.icon\"><ion-icon [name]=\"item.icon\"></ion-icon></mat-icon>\n        <mat-icon *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n        <mat-label translate>{{item.title}}</mat-label>\n      </a>\n      <!-- divider -->\n      <mat-divider *ngIf=\"!item.path && !item.action\"\n                   class=\"{{item.cssClass}} {{item.color}}\">\n        <mat-label translate>{{item.title}}</mat-label>\n      </mat-divider>\n    </ng-container>\n  </ng-container>\n</mat-menu>\n\n<ion-content>\n\n  <form [formGroup]=\"form\" novalidate (ngSubmit)=\"save($event)\" class=\"form-container\">\n\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row class=\"ion-no-padding\">\n\n        <!-- left  margin -->\n        <ion-col size=\"0\" size-lg=\"2\">&nbsp;\n        </ion-col>\n\n        <ion-col class=\"ion-padding\">\n\n          <!-- error -->\n          <ion-item *ngIf=\"error\" lines=\"none\">\n            <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n            <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error|translate\"></ion-label>\n          </ion-item>\n\n          <p [innerHTML]=\"'SETTINGS.DESCRIPTION'|translate\"></p>\n\n          <!-- account inheritance (desktop) -->\n          <mat-form-field [hidden]=\"!isLogin\" *ngIf=\"!mobile; else accountInheritanceMobile\">\n            <input matInput hidden formControlName=\"accountInheritance\" type=\"text\">\n\n            <!-- check box (if desktop) -->\n            <mat-checkbox\n              *ngIf=\"!mobile; else accountInheritanceMobile\"\n              (change)=\"setAccountInheritance($event.checked)\"\n              [checked]=\"accountInheritance\">\n              <span translate>SETTINGS.INHERIT_FROM_ACCOUNT</span>\n            </mat-checkbox>\n\n            <mat-error *ngIf=\"form.controls.accountInheritance.hasError('required')\" translate>ERROR.FIELD_REQUIRED\n            </mat-error>\n          </mat-form-field>\n\n          <!-- account inheritance (if mobile) -->\n          <ng-template #accountInheritanceMobile>\n            <mat-form-field [hidden]=\"!isLogin\">\n              <input matInput hidden formControlName=\"accountInheritance\" type=\"text\">\n\n              <!-- slide toggle  -->\n              <ion-text translate>SETTINGS.INHERIT_FROM_ACCOUNT</ion-text>\n              <mat-slide-toggle matSuffix\n                                (change)=\"setAccountInheritance($event.checked)\"\n                                [checked]=\"accountInheritance\">\n\n              </mat-slide-toggle>\n              <mat-error *ngIf=\"form.controls.accountInheritance.hasError('required')\" translate>ERROR.FIELD_REQUIRED\n              </mat-error>\n            </mat-form-field>\n          </ng-template>\n\n          <!-- locale -->\n          <mat-form-field>\n            <mat-select [placeholder]=\"'SETTINGS.LOCALE'|translate\" formControlName=\"locale\" required>\n              <mat-option *ngFor=\"let item of locales\" [value]=\"item.key\">\n                {{item.value}}\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf=\"form.controls.locale.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n\n          <!-- Network entry -->\n          <h3>\n            <ion-text translate>SETTINGS.NETWORK_DIVIDER</ion-text>\n          </h3>\n\n          <!-- Peer address -->\n          <mat-form-field>\n            <input matInput type=\"text\" [placeholder]=\"'SETTINGS.PEER_URL'|translate\"\n                   formControlName=\"peerUrl\"\n                   required>\n\n            <button mat-icon-button type=\"button\" matSuffix (click)=\"showSelectPeerModal()\" tabindex=\"-1\"\n                    [title]=\"'SETTINGS.BTN_CHANGE_PEER'|translate\">\n              <mat-icon>search</mat-icon>\n            </button>\n\n            <mat-error *ngIf=\"form.controls.peerUrl.hasError('required')\"\n                       translate>ERROR.FIELD_REQUIRED\n            </mat-error>\n            <mat-error *ngIf=\"form.controls.peerUrl.hasError('peerAlive')\"\n                       translate>SETTINGS.ERROR.PEER_NOT_REACHABLE\n            </mat-error>\n            <mat-error *ngIf=\"form.controls.peerUrl.hasError('peerNotCompatible')\"\n                       translate>SETTINGS.ERROR.PEER_NOT_COMPATIBLE\n            </mat-error>\n          </mat-form-field>\n\n          <!-- Offline mode (if mobile) -->\n          <mat-form-field *ngIf=\"mobile\">\n            <input matInput hidden formControlName=\"accountInheritance\" type=\"text\">\n\n            <!-- slide toggle  -->\n            <ion-text translate>SETTINGS.OFFLINE_MODE</ion-text>\n            <mat-slide-toggle matSuffix\n                              (change)=\"network.setForceOffline($event.checked)\"\n                              [checked]=\"network.offline\">\n\n            </mat-slide-toggle>\n          </mat-form-field>\n\n          <!-- Data entry -->\n          <h3>\n            <ion-text translate>SETTINGS.DATA_ENTRY_DIVIDER</ion-text>\n          </h3>\n\n          <!-- Usage mode -->\n          <mat-form-field>\n            <mat-select [placeholder]=\"'SETTINGS.USAGE_MODE'|translate\" formControlName=\"usageMode\"\n                        required>\n              <mat-option *ngFor=\"let item of usageModes\" [value]=\"item\">\n                {{'SETTINGS.USAGE_MODES.'+item|translate}}\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf=\"form.controls.usageMode.hasError('required')\"\n                       translate>ERROR.FIELD_REQUIRED\n            </mat-error>\n          </mat-form-field>\n\n          <!-- lat/long format-->\n          <mat-form-field>\n            <mat-select [placeholder]=\"'SETTINGS.LAT_LONG_FORMAT'|translate\" formControlName=\"latLongFormat\"\n                        required>\n              <mat-option *ngFor=\"let item of latLongFormats\" [value]=\"item\">\n                {{'COMMON.LAT_LONG.'+item+'_PLACEHOLDER'|translate}}\n              </mat-option>\n            </mat-select>\n            <mat-error\n              *ngIf=\"form.controls.latLongFormat.hasError('required')\"\n              translate>ERROR.FIELD_REQUIRED\n            </mat-error>\n          </mat-form-field>\n\n          <!-- fields options -->\n          <ion-grid formArrayName=\"properties\" class=\"ion-no-padding\">\n            <ion-row class=\"ion-no-padding\">\n              <ion-col class=\"ion-no-padding ion-align-self-end\" size=\"12\">\n                <span class=\"toolbar-spacer\"></span>\n\n                <!-- Show more options -->\n                <ion-button color=\"light\" *ngIf=\"propertiesForm?.length === 0\"\n                            [title]=\"'SETTINGS.BTN_SHOW_MORE_HELP'|translate\"\n                            (click)=\"propertiesFormHelper.add()\">\n                  <ion-label translate>COMMON.BTN_SHOW_MORE</ion-label>\n                  <mat-icon slot=\"end\">arrow_drop_down</mat-icon>\n                </ion-button>\n              </ion-col>\n            </ion-row>\n\n            <!-- Fields options -->\n            <ng-container *ngFor=\"let propertyForm of propertiesForm?.controls; let i=index\">\n              <ion-row class=\"ion-no-padding\" [formGroupName]=\"i\">\n\n                <!-- property key -->\n                <ion-col class=\"ion-no-padding\">\n                  <mat-form-field>\n                    <mat-select formControlName=\"key\"\n                                [placeholder]=\" 'SETTINGS.PROPERTY_KEY'|translate\">\n                      <mat-option *ngFor=\"let item of propertyDefinitions\" [value]=\"item.key\">{{ item.label | translate }}\n                      </mat-option>\n                    </mat-select>\n                  </mat-form-field>\n                </ion-col>\n\n                <!-- property value -->\n                <ion-col class=\"ion-no-padding\" padding-left>\n                  <app-form-field *ngIf=\"getPropertyDefinition(i); let definition\"\n                                  floatLabel=\"never\"\n                                  [definition]=\"definition\"\n                                  [formControl]=\"propertyForm|formGetControl:'value'\"\n                                  [placeholder]=\"'SETTINGS.PROPERTY_VALUE' | translate\"\n                                  [required]=\"true\">\n                  </app-form-field>\n                </ion-col>\n                <ion-col size=\"2\" class=\"ion-no-padding\">\n                  <button type=\"button\" mat-icon-button color=\"light\"\n                          [disabled]=\"loading\"\n                          [title]=\"'COMMON.BTN_DELETE'|translate\"\n                          (click)=\"removePropertyAt(i)\">\n                    <mat-icon>close</mat-icon>\n                  </button>\n                  <button *ngIf=\"propertiesFormHelper.isLast(i)\"\n                          type=\"button\"\n                          mat-icon-button\n                          color=\"light\"\n                          [disabled]=\"loading\"\n                           [title]=\"'SETTINGS.BTN_ADD_PROPERTY'|translate\"\n                          (click)=\"propertiesFormHelper.add()\">\n                    <mat-icon>add</mat-icon>\n                  </button>\n                </ion-col>\n              </ion-row>\n            </ng-container>\n          </ion-grid>\n        </ion-col>\n\n        <!-- right margin -->\n        <ion-col size=\"0\" size-lg=\"2\">&nbsp;\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n\n  </form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <app-form-buttons-bar (onCancel)=\"cancel()\" (onSave)=\"save($event)\" [disabled]=\"!form.dirty || saving\"></app-form-buttons-bar>\n</ion-footer>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.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: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.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: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.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: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonRow, selector: "ion-row" }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i6$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i8$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i18.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i14.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "component", type: AppFormField, selector: "app-form-field", inputs: ["definition", "required", "readonly", "disabled", "formControl", "formControlName", "placeholder", "compact", "floatLabel", "tabindex", "autofocus", "clearable", "chipColor", "debug", "class"], outputs: ["keyup.enter"] }, { kind: "component", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: ["disabled", "disabledCancel", "classList"], outputs: ["onCancel", "onSave", "onNext", "onBack"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SettingsPage, decorators: [{
             type: Component,
             args: [{ selector: 'page-settings', providers: [
@@ -28219,7 +28405,7 @@ class AppPropertiesTable extends AppInMemoryTable {
 AppPropertiesTable.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AppPropertiesTable, deps: [{ token: i0.Injector }, { token: i1$3.UntypedFormBuilder }, { token: PropertyEntityValidator }, { token: ENVIRONMENT }], target: i0.ɵɵFactoryTarget.Component });
 AppPropertiesTable.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AppPropertiesTable, selector: "app-properties-table", inputs: { definitions: "definitions", showToolbar: "showToolbar" }, providers: [
         { provide: PropertyEntityValidator, useClass: PropertyEntityValidator }
-    ], viewQueries: [{ propertyName: "filterExpansionPanel", first: true, predicate: MatExpansionPanel, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-toolbar *ngIf=\"showToolbar\" [class.expanded]=\"filterExpansionPanel.expanded\">\n\n  <!-- Refresh -->\n  <button mat-icon-button *ngIf=\"!mobile\"\n          [title]=\"'COMMON.BTN_REFRESH'|translate\"\n          (click)=\"onRefresh.emit()\">\n    <mat-icon>refresh</mat-icon>\n  </button>\n\n  <ion-item *ngIf=\"!mobile && error; let error\" lines=\"none\">\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" [innerHTML]=\"error|translate\"></ion-label>\n  </ion-item>\n\n  <div class=\"toolbar-spacer\"></div>\n\n  <!-- Reset filter -->\n  <button mat-icon-button (click)=\"resetFilter()\"\n          *ngIf=\"filterCriteriaCount\">\n    <mat-icon color=\"accent\">filter_list_alt</mat-icon>\n    <mat-icon class=\"icon-secondary\" style=\"left: 16px; top: 5px; font-weight: bold;\">close</mat-icon>\n  </button>\n\n  <!-- Show filter -->\n  <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n    <mat-icon [matBadge]=\"filterCriteriaCount\"\n              [matBadgeHidden]=\"filterIsEmpty\"\n              matBadgeColor=\"accent\"\n              matBadgeSize=\"small\"\n              matBadgePosition=\"above after\">filter_list_alt\n    </mat-icon>\n  </button>\n\n</mat-toolbar>\n\n<ion-content class=\"ion-no-padding\">\n\n  <!-- search -->\n  <mat-expansion-panel #filterExpansionPanel\n                       class=\"filter-panel\"\n                       [class.ion-no-padding]=\"mobile\"\n                       [class.filter-panel-floating]=\"filterPanelFloating\">\n    <form class=\"form-container\" [formGroup]=\"filterForm\" (ngSubmit)=\"onRefresh.emit()\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search -->\n            <mat-form-field>\n              <input matInput [placeholder]=\"'SETTINGS.FILTER.SEARCH'|translate\" formControlName=\"searchText\">\n\n              <button mat-icon-button matSuffix tabindex=\"-1\"\n                      type=\"button\"\n                      (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                      [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\">\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n\n          <ion-col>\n            <mat-boolean-field\n              [style]=\"'checkbox'\"\n              formControlName=\"notDefaultOnly\"\n              [placeholder]=\"'SETTINGS.FILTER.ONLY_NOT_DEFAULT' | translate\"\n              floatLabel=\"always\"\n            ></mat-boolean-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <mat-action-row>\n      <!-- Counter  -->\n      <ion-label [hidden]=\"(loadingSubject|async) || filterForm.dirty\"\n                 [color]=\"empty && 'danger'\"\n                 class=\"ion-padding\">\n        {{ (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT') | translate: {\n        count: (totalRowCount |\n          numberFormat)\n      } }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <button mat-icon-button color=\"accent\"\n              *ngIf=\"filterPanelFloating\"\n              (click)=\"toggleFilterPanelFloating()\"\n              class=\"hidden-xs hidden-sm hidden-md\"\n              [title]=\"(filterPanelFloating ? 'COMMON.BTN_EXPAND' : 'COMMON.BTN_HIDE') |translate\">\n        <mat-icon><span style=\"transform: rotate(90deg);\">{{filterPanelFloating ? '&#xbb;' : '&#xab;'}}</span></mat-icon>\n      </button>\n\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\"\n                  (click)=\"closeFilterPanel()\"\n                  [disabled]=\"loadingSubject|async\">\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button mat-button\n                  [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n                  [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n                  (click)=\"applyFilterAndClosePanel($event)\"\n                  [disabled]=\"loadingSubject|async\">\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\n\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <ion-refresher slot=\"fixed\" *ngIf=\"mobile\" (ionRefresh)=\"doRefresh($event)\">\n    <ion-refresher-content></ion-refresher-content>\n  </ion-refresher>\n\n  <!-- table -->\n  <div class=\"table-container\">\n    <table #table mat-table matSort matSortDisableClear\n           [dataSource]=\"dataSource\"\n           [matSortActive]=\"defaultSortBy\"\n           [matSortDirection]=\"defaultSortDirection\"\n           [trackBy]=\"trackByFn\">\n\n      <ng-container matColumnDef=\"select\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"true\"></th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"true\"></td>\n      </ng-container>\n\n      <!-- id column (hidden) -->\n      <ng-container matColumnDef=\"id\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!debug\"></th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!debug\">\n          {{ row.currentData.id }}\n        </td>\n      </ng-container>\n\n      <!-- definition column -->\n      <ng-container matColumnDef=\"definition\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label>{{ i18nColumnPrefix + 'DEFINITION' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n<!--          <mat-autocomplete-field-->\n<!--            *ngIf=\"row.id === -1; else readOnlyDefinition\"-->\n<!--            floatLabel=\"never\"-->\n<!--            [formControl]=\"row.validator | formGetControl : 'definition'\"-->\n<!--            [config]=\"autocompleteFields.definition\"-->\n<!--            [required]=\"true\"-->\n<!--          ></mat-autocomplete-field>-->\n<!--          <ng-template #readOnlyDefinition>-->\n            {{ row.currentData | propertyGet : 'definition.translatedName' }}\n<!--          </ng-template>-->\n        </td>\n      </ng-container>\n\n      <!-- value column -->\n      <ng-container matColumnDef=\"value\">\n        <th mat-header-cell *matHeaderCellDef>\n          <ion-label>{{ i18nColumnPrefix + 'VALUE' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <app-form-field\n            *ngIf=\"row.validator | formGetValue: 'id'\"\n            floatLabel=\"never\"\n            [definition]=\"definitionsMapByKey[row.validator | formGetValue: 'id']\"\n            [formControl]=\"row.validator | formGetControl:'value'\"\n            [placeholder]=\"i18nColumnPrefix + 'VALUE' | translate\"\n            [required]=\"true\">\n          </app-form-field>\n        </td>\n      </ng-container>\n\n      <!-- Actions buttons column -->\n      <app-actions-column\n        [stickyEnd]=\"true\"\n        [canCancel]=\"false\"\n        [canDelete]=\"false\"\n        [dirtyIcon]=\"false\"\n        [cellTemplate]=\"cellInjection\">\n\n        <!-- cell injection-->\n        <ng-template #cellInjection let-row>\n          <button type=\"button\" mat-icon-button\n                  *ngIf=\"!mobile && !disabled && (row.validator | formGetValue : 'value') !== (row.validator | formGetValue : 'definition').defaultValue\"\n                  [class.visible-hover-row]=\"!mobile\"\n                  [tabindex]=\"-1\"\n                  [title]=\"'SETTINGS.BTN_RESET_PROPERTY'|translate\"\n                  (click)=\"resetProperty($event, row)\">\n            <mat-icon>undo</mat-icon>\n          </button>\n\n        </ng-template>\n\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\n          [class.mat-row-selected]=\"row.editing\"\n          [class.mat-row-error]=\"row.validator?.invalid\"\n          [class.mat-row-dirty]=\"row.validator?.dirty\"\n          (click)=\"clickRow($event, row)\"\n          (keydown.escape)=\"escapeEditingRow($event)\"\n          [cdkTrapFocus]=\"row.validator?.invalid\"></tr>\n    </table>\n\n    <ng-container *ngIf=\"loadingSubject|async; else noResult\">\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    </ng-container>\n\n    <ng-template #noResult>\n      <ion-item *ngIf=\"totalRowCount === 0\">\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n      </ion-item>\n    </ng-template>\n\n  </div>\n</ion-content>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.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: i1.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: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.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: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i1.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i1.IonRow, selector: "ion-row" }, { kind: "component", type: i1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6$5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$5.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6$5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i7$3.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7$3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i9$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i9$1.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i8$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i6$6.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MatBooleanField, selector: "mat-boolean-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "readonly", "required", "compact", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "tabindex", "value"], outputs: ["keyup.enter", "onBlur"] }, { kind: "component", type: AppFormField, selector: "app-form-field", inputs: ["definition", "required", "readonly", "disabled", "formControl", "formControlName", "placeholder", "compact", "floatLabel", "tabindex", "autofocus", "clearable", "chipColor", "debug", "class"], outputs: ["keyup.enter"] }, { kind: "component", type: ActionsColumnComponent, selector: "app-actions-column", inputs: ["stickyEnd", "canCancel", "canConfirm", "canDelete", "canBackward", "canForward", "canConfirmAndAdd", "dirtyIcon", "optionsTitle", "class", "cellTemplate"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmEditCreateClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: NumberFormatPipe, name: "numberFormat" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], viewQueries: [{ propertyName: "filterExpansionPanel", first: true, predicate: MatExpansionPanel, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-toolbar *ngIf=\"showToolbar\" [class.expanded]=\"filterExpansionPanel.expanded\">\n\n  <!-- Refresh -->\n  <button mat-icon-button *ngIf=\"!mobile\"\n          [title]=\"'COMMON.BTN_REFRESH'|translate\"\n          (click)=\"onRefresh.emit()\">\n    <mat-icon>refresh</mat-icon>\n  </button>\n\n  <ion-item *ngIf=\"!mobile && error; let error\" lines=\"none\">\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" [innerHTML]=\"error|translate\"></ion-label>\n  </ion-item>\n\n  <div class=\"toolbar-spacer\"></div>\n\n  <!-- Reset filter -->\n  <button mat-icon-button (click)=\"resetFilter()\"\n          *ngIf=\"filterCriteriaCount\">\n    <mat-icon color=\"accent\">filter_list_alt</mat-icon>\n    <mat-icon class=\"icon-secondary\" style=\"left: 16px; top: 5px; font-weight: bold;\">close</mat-icon>\n  </button>\n\n  <!-- Show filter -->\n  <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n    <mat-icon [matBadge]=\"filterCriteriaCount\"\n              [matBadgeHidden]=\"filterIsEmpty\"\n              matBadgeColor=\"accent\"\n              matBadgeSize=\"small\"\n              matBadgePosition=\"above after\">filter_list_alt\n    </mat-icon>\n  </button>\n\n</mat-toolbar>\n\n<ion-content class=\"ion-no-padding\">\n\n  <!-- search -->\n  <mat-expansion-panel #filterExpansionPanel\n                       class=\"filter-panel\"\n                       [class.ion-no-padding]=\"mobile\"\n                       [class.filter-panel-floating]=\"filterPanelFloating\">\n    <form class=\"form-container\" [formGroup]=\"filterForm\" (ngSubmit)=\"onRefresh.emit()\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search -->\n            <mat-form-field>\n              <input matInput [placeholder]=\"'SETTINGS.FILTER.SEARCH'|translate\" formControlName=\"searchText\">\n\n              <button mat-icon-button matSuffix tabindex=\"-1\"\n                      type=\"button\"\n                      (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                      [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\">\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n\n          <ion-col>\n            <mat-boolean-field\n              [style]=\"'checkbox'\"\n              formControlName=\"notDefaultOnly\"\n              [placeholder]=\"'SETTINGS.FILTER.ONLY_NOT_DEFAULT' | translate\"\n              floatLabel=\"always\"\n            ></mat-boolean-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <mat-action-row>\n      <!-- Counter  -->\n      <ion-label [hidden]=\"(loadingSubject|async) || filterForm.dirty\"\n                 [color]=\"empty && 'danger'\"\n                 class=\"ion-padding\">\n        {{ (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT') | translate: {\n        count: (totalRowCount |\n          numberFormat)\n      } }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <button mat-icon-button color=\"accent\"\n              *ngIf=\"filterPanelFloating\"\n              (click)=\"toggleFilterPanelFloating()\"\n              class=\"hidden-xs hidden-sm hidden-md\"\n              [title]=\"(filterPanelFloating ? 'COMMON.BTN_EXPAND' : 'COMMON.BTN_HIDE') |translate\">\n        <mat-icon><span style=\"transform: rotate(90deg);\">{{filterPanelFloating ? '&#xbb;' : '&#xab;'}}</span></mat-icon>\n      </button>\n\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\"\n                  (click)=\"closeFilterPanel()\"\n                  [disabled]=\"loadingSubject|async\">\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button mat-button\n                  [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n                  [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n                  (click)=\"applyFilterAndClosePanel($event)\"\n                  [disabled]=\"loadingSubject|async\">\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\n\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <ion-refresher slot=\"fixed\" *ngIf=\"mobile\" (ionRefresh)=\"doRefresh($event)\">\n    <ion-refresher-content></ion-refresher-content>\n  </ion-refresher>\n\n  <!-- table -->\n  <div class=\"table-container\">\n    <table #table mat-table matSort matSortDisableClear\n           [dataSource]=\"dataSource\"\n           [matSortActive]=\"defaultSortBy\"\n           [matSortDirection]=\"defaultSortDirection\"\n           [trackBy]=\"trackByFn\">\n\n      <ng-container matColumnDef=\"select\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"true\"></th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"true\"></td>\n      </ng-container>\n\n      <!-- id column (hidden) -->\n      <ng-container matColumnDef=\"id\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!debug\"></th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!debug\">\n          {{ row.currentData.id }}\n        </td>\n      </ng-container>\n\n      <!-- definition column -->\n      <ng-container matColumnDef=\"definition\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label>{{ i18nColumnPrefix + 'DEFINITION' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n<!--          <mat-autocomplete-field-->\n<!--            *ngIf=\"row.id === -1; else readOnlyDefinition\"-->\n<!--            floatLabel=\"never\"-->\n<!--            [formControl]=\"row.validator | formGetControl : 'definition'\"-->\n<!--            [config]=\"autocompleteFields.definition\"-->\n<!--            [required]=\"true\"-->\n<!--          ></mat-autocomplete-field>-->\n<!--          <ng-template #readOnlyDefinition>-->\n            {{ row.currentData | propertyGet : 'definition.translatedName' }}\n<!--          </ng-template>-->\n        </td>\n      </ng-container>\n\n      <!-- value column -->\n      <ng-container matColumnDef=\"value\">\n        <th mat-header-cell *matHeaderCellDef>\n          <ion-label>{{ i18nColumnPrefix + 'VALUE' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <app-form-field\n            *ngIf=\"row.validator | formGetValue: 'id'\"\n            floatLabel=\"never\"\n            [definition]=\"definitionsMapByKey[row.validator | formGetValue: 'id']\"\n            [formControl]=\"row.validator | formGetControl:'value'\"\n            [placeholder]=\"i18nColumnPrefix + 'VALUE' | translate\"\n            [required]=\"true\">\n          </app-form-field>\n        </td>\n      </ng-container>\n\n      <!-- Actions buttons column -->\n      <app-actions-column\n        [stickyEnd]=\"true\"\n        [canCancel]=\"false\"\n        [canDelete]=\"false\"\n        [dirtyIcon]=\"false\"\n        [cellTemplate]=\"cellInjection\">\n\n        <!-- cell injection-->\n        <ng-template #cellInjection let-row>\n          <button type=\"button\" mat-icon-button\n                  *ngIf=\"!mobile && !disabled && (row.validator | formGetValue : 'value') !== (row.validator | formGetValue : 'definition').defaultValue\"\n                  [class.visible-hover-row]=\"!mobile\"\n                  [tabindex]=\"-1\"\n                  [title]=\"'SETTINGS.BTN_RESET_PROPERTY'|translate\"\n                  (click)=\"resetProperty($event, row)\">\n            <mat-icon>undo</mat-icon>\n          </button>\n\n        </ng-template>\n\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\n          [class.mat-row-selected]=\"row.editing\"\n          [class.mat-row-error]=\"row.validator?.invalid\"\n          [class.mat-row-dirty]=\"row.validator?.dirty\"\n          (click)=\"clickRow($event, row)\"\n          (keydown.escape)=\"escapeEditingRow($event)\"\n          [cdkTrapFocus]=\"row.validator?.invalid\"></tr>\n    </table>\n\n    <ng-container *ngIf=\"loadingSubject|async; else noResult\">\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    </ng-container>\n\n    <ng-template #noResult>\n      <ion-item *ngIf=\"totalRowCount === 0\">\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n      </ion-item>\n    </ng-template>\n\n  </div>\n</ion-content>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.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: i1.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: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.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: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i1.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i1.IonRow, selector: "ion-row" }, { kind: "component", type: i1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6$5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$5.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6$5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i7$3.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7$3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i9$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i9$1.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i8$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i6$6.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MatBooleanField, selector: "mat-boolean-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "readonly", "required", "compact", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "tabindex", "value"], outputs: ["keyup.enter", "onBlur"] }, { kind: "component", type: AppFormField, selector: "app-form-field", inputs: ["definition", "required", "readonly", "disabled", "formControl", "formControlName", "placeholder", "compact", "floatLabel", "tabindex", "autofocus", "clearable", "chipColor", "debug", "class"], outputs: ["keyup.enter"] }, { kind: "component", type: ActionsColumnComponent, selector: "app-actions-column", inputs: ["stickyEnd", "canCancel", "canConfirm", "canDelete", "canBackward", "canForward", "canConfirmAndAdd", "dirtyIcon", "optionsTitle", "class", "cellTemplate"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmEditCreateClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: NumberFormatPipe, name: "numberFormat" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AppPropertiesTable, decorators: [{
             type: Component,
             args: [{ selector: 'app-properties-table', providers: [
@@ -29990,7 +30176,7 @@ class UserTokenTable extends AppInMemoryTable {
 UserTokenTable.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: UserTokenTable, deps: [{ token: i0.Injector }, { token: i1$3.UntypedFormBuilder }, { token: i2$6.ValidatorService }, { token: ENVIRONMENT }, { token: APP_USER_TOKEN_SCOPES, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 UserTokenTable.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: UserTokenTable, selector: "app-user-token-table", inputs: { useSticky: "useSticky" }, providers: [
         { provide: ValidatorService, useClass: UserTokenValidatorService }
-    ], usesInheritance: true, ngImport: i0, template: "<mat-toolbar>\n\n  <!-- Refresh -->\n  <button mat-icon-button *ngIf=\"!mobile\"\n          [title]=\"'COMMON.BTN_REFRESH'|translate\"\n          (click)=\"onRefresh.emit()\">\n    <mat-icon>refresh</mat-icon>\n  </button>\n\n  <ion-item *ngIf=\"!mobile && error; let error\" lines=\"none\">\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" [innerHTML]=\"error|translate\"></ion-label>\n  </ion-item>\n\n  <div class=\"toolbar-spacer\"></div>\n\n  <ng-container *ngIf=\"selection.isEmpty(); else hasSelection\">\n\n    <button mat-icon-button\n            *ngIf=\"canEdit && !mobile\"\n            [title]=\"'COMMON.BTN_ADD'|translate\"\n            (click)=\"addToken($event)\">\n      <mat-icon>add</mat-icon>\n    </button>\n\n  </ng-container>\n\n  <ng-template #hasSelection>\n\n    <button mat-icon-button\n            [title]=\"'COMMON.BTN_DELETE' | translate\"\n            (click)=\"deleteSelection($event)\">\n      <mat-icon>delete_outline</mat-icon>\n    </button>\n\n  </ng-template>\n\n</mat-toolbar>\n\n<ion-content class=\"ion-no-padding\">\n\n  <ion-refresher slot=\"fixed\" *ngIf=\"mobile\" (ionRefresh)=\"doRefresh($event)\">\n    <ion-refresher-content></ion-refresher-content>\n  </ion-refresher>\n\n  <!-- table -->\n  <div class=\"table-container\">\n    <table #table mat-table matSort matSortDisableClear\n           [dataSource]=\"dataSource\"\n           [matSortActive]=\"defaultSortBy\"\n           [matSortDirection]=\"defaultSortDirection\"\n           [trackBy]=\"trackByFn\">\n\n      <ng-container matColumnDef=\"select\" [sticky]=\"useSticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!inlineEdition\">\n          <mat-checkbox (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\"\n                        [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\n          </mat-checkbox>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!inlineEdition\">\n          <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(row) : null\" [checked]=\"selection.isSelected(row)\">\n          </mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id Column -->\n      <ng-container matColumnDef=\"id\" [sticky]=\"useSticky\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label>#</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">{{ row.currentData.id }}</td>\n      </ng-container>\n\n      <!-- name column -->\n      <ng-container matColumnDef=\"name\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label>{{ i18nColumnPrefix + 'NAME' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          {{ (row.currentData | propertyGet : 'name') || (i18nColumnPrefix + 'UNKNOWN' | translate) }}\n        </td>\n      </ng-container>\n\n<!--      <ng-container matColumnDef=\"flags\">-->\n<!--        <th mat-header-cell *matHeaderCellDef mat-sort-header>-->\n<!--          <ion-label>{{ i18nColumnPrefix + 'FLAGS' | translate }}</ion-label>-->\n<!--        </th>-->\n<!--        <td mat-cell *matCellDef=\"let row\">-->\n<!--          {{ row.currentData | propertyGet : 'flags' }}-->\n<!--        </td>-->\n<!--      </ng-container>-->\n\n      <ng-container matColumnDef=\"scopes\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label>{{ i18nColumnPrefix + 'SCOPES' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          {{ display(row.currentData | propertyGet : 'scopes') }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"creationDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"mat-cell-date-time\">\n          <ion-label>{{ i18nColumnPrefix + 'CREATION_DATE' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-cell-date-time\">\n          {{ row.currentData | propertyGet : 'creationDate' | dateFormat : {time: true} }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"expirationDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"mat-cell-date-time\">\n          <ion-label>{{ i18nColumnPrefix + 'EXPIRATION_DATE' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-cell-date-time\">\n          {{ row.currentData | propertyGet : 'expirationDate' | dateFormat : {time: true} }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"lastUsedDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"mat-cell-date-time\">\n          <ion-label>{{ i18nColumnPrefix + 'LAST_USED_DATE' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-cell-date-time\">\n          {{ row.currentData | propertyGet : 'lastUsedDate' | dateFormat : {time: true} }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"updateDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"mat-cell-date-time\">\n          <ion-label>{{ i18nColumnPrefix + 'UPDATE_DATE' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-cell-date-time\">\n          {{ row.currentData | propertyGet : 'updateDate' | dateFormat : {time: true} }}\n        </td>\n      </ng-container>\n\n      <!-- Actions buttons column -->\n      <app-actions-column [stickyEnd]=\"useSticky\"\n                          (optionsClick)=\"openSelectColumnsModal($event)\"\n                          (cancelOrDeleteClick)=\"cancelOrDelete($event.event, $event.row)\"\n                          (confirmAndAddClick)=\"confirmAndAdd($event.event, $event.row)\"\n                          (backward)=\"confirmAndBackward($event.event, $event.row)\"\n                          (forward)=\"confirmAndForward($event.event, $event.row)\"\n                          [canCancel]=\"false\">\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\n          [class.mat-row-selected]=\"row.editing\"\n          [class.mat-row-error]=\"row.validator?.invalid\"\n          [class.mat-row-dirty]=\"row.validator?.dirty\"\n          (click)=\"clickRow($event, row)\"\n          (keydown.escape)=\"escapeEditingRow($event)\"\n          [cdkTrapFocus]=\"row.validator?.invalid\"></tr>\n    </table>\n\n    <ng-container *ngIf=\"loadingSubject|async; else noResult\">\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    </ng-container>\n\n    <ng-template #noResult>\n      <ion-item *ngIf=\"totalRowCount === 0\">\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n      </ion-item>\n    </ng-template>\n\n  </div>\n</ion-content>\n\n<ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" *ngIf=\"mobile\">\n  <ion-fab-button color=\"tertiary\" (click)=\"addToken($event)\">\n    <ion-icon name=\"add\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n", styles: [".mat-cell-date-time{width:180px}.mat-column-id{width:90px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i1.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.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: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i1.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i6$5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$5.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6$5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i7$3.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7$3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i6$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i8$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: ActionsColumnComponent, selector: "app-actions-column", inputs: ["stickyEnd", "canCancel", "canConfirm", "canDelete", "canBackward", "canForward", "canConfirmAndAdd", "dirtyIcon", "optionsTitle", "class", "cellTemplate"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmEditCreateClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], usesInheritance: true, ngImport: i0, template: "<mat-toolbar>\n\n  <!-- Refresh -->\n  <button mat-icon-button *ngIf=\"!mobile\"\n          [title]=\"'COMMON.BTN_REFRESH'|translate\"\n          (click)=\"onRefresh.emit()\">\n    <mat-icon>refresh</mat-icon>\n  </button>\n\n  <ion-item *ngIf=\"!mobile && error; let error\" lines=\"none\">\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" [innerHTML]=\"error|translate\"></ion-label>\n  </ion-item>\n\n  <div class=\"toolbar-spacer\"></div>\n\n  <ng-container *ngIf=\"selection.isEmpty(); else hasSelection\">\n\n    <button mat-icon-button\n            *ngIf=\"canEdit && !mobile\"\n            [title]=\"'COMMON.BTN_ADD'|translate\"\n            (click)=\"addToken($event)\">\n      <mat-icon>add</mat-icon>\n    </button>\n\n  </ng-container>\n\n  <ng-template #hasSelection>\n\n    <button mat-icon-button\n            [title]=\"'COMMON.BTN_DELETE' | translate\"\n            (click)=\"deleteSelection($event)\">\n      <mat-icon>delete_outline</mat-icon>\n    </button>\n\n  </ng-template>\n\n</mat-toolbar>\n\n<ion-content class=\"ion-no-padding\">\n\n  <ion-refresher slot=\"fixed\" *ngIf=\"mobile\" (ionRefresh)=\"doRefresh($event)\">\n    <ion-refresher-content></ion-refresher-content>\n  </ion-refresher>\n\n  <!-- table -->\n  <div class=\"table-container\">\n    <table #table mat-table matSort matSortDisableClear\n           [dataSource]=\"dataSource\"\n           [matSortActive]=\"defaultSortBy\"\n           [matSortDirection]=\"defaultSortDirection\"\n           [trackBy]=\"trackByFn\">\n\n      <ng-container matColumnDef=\"select\" [sticky]=\"useSticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!inlineEdition\">\n          <mat-checkbox (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\"\n                        [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\n          </mat-checkbox>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!inlineEdition\">\n          <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(row) : null\" [checked]=\"selection.isSelected(row)\">\n          </mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id Column -->\n      <ng-container matColumnDef=\"id\" [sticky]=\"useSticky\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label>#</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">{{ row.currentData.id }}</td>\n      </ng-container>\n\n      <!-- name column -->\n      <ng-container matColumnDef=\"name\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label>{{ i18nColumnPrefix + 'NAME' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          {{ (row.currentData | propertyGet : 'name') || (i18nColumnPrefix + 'UNKNOWN' | translate) }}\n        </td>\n      </ng-container>\n\n<!--      <ng-container matColumnDef=\"flags\">-->\n<!--        <th mat-header-cell *matHeaderCellDef mat-sort-header>-->\n<!--          <ion-label>{{ i18nColumnPrefix + 'FLAGS' | translate }}</ion-label>-->\n<!--        </th>-->\n<!--        <td mat-cell *matCellDef=\"let row\">-->\n<!--          {{ row.currentData | propertyGet : 'flags' }}-->\n<!--        </td>-->\n<!--      </ng-container>-->\n\n      <ng-container matColumnDef=\"scopes\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label>{{ i18nColumnPrefix + 'SCOPES' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          {{ display(row.currentData | propertyGet : 'scopes') }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"creationDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"mat-cell-date-time\">\n          <ion-label>{{ i18nColumnPrefix + 'CREATION_DATE' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-cell-date-time\">\n          {{ row.currentData | propertyGet : 'creationDate' | dateFormat : {time: true} }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"expirationDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"mat-cell-date-time\">\n          <ion-label>{{ i18nColumnPrefix + 'EXPIRATION_DATE' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-cell-date-time\">\n          {{ row.currentData | propertyGet : 'expirationDate' | dateFormat : {time: true} }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"lastUsedDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"mat-cell-date-time\">\n          <ion-label>{{ i18nColumnPrefix + 'LAST_USED_DATE' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-cell-date-time\">\n          {{ row.currentData | propertyGet : 'lastUsedDate' | dateFormat : {time: true} }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"updateDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"mat-cell-date-time\">\n          <ion-label>{{ i18nColumnPrefix + 'UPDATE_DATE' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-cell-date-time\">\n          {{ row.currentData | propertyGet : 'updateDate' | dateFormat : {time: true} }}\n        </td>\n      </ng-container>\n\n      <!-- Actions buttons column -->\n      <app-actions-column [stickyEnd]=\"useSticky\"\n                          (optionsClick)=\"openSelectColumnsModal($event)\"\n                          (cancelOrDeleteClick)=\"cancelOrDelete($event.event, $event.row)\"\n                          (confirmAndAddClick)=\"confirmAndAdd($event.event, $event.row)\"\n                          (backward)=\"confirmAndBackward($event.event, $event.row)\"\n                          (forward)=\"confirmAndForward($event.event, $event.row)\"\n                          [canCancel]=\"false\">\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\n          [class.mat-row-selected]=\"row.editing\"\n          [class.mat-row-error]=\"row.validator?.invalid\"\n          [class.mat-row-dirty]=\"row.validator?.dirty\"\n          (click)=\"clickRow($event, row)\"\n          (keydown.escape)=\"escapeEditingRow($event)\"\n          [cdkTrapFocus]=\"row.validator?.invalid\"></tr>\n    </table>\n\n    <ng-container *ngIf=\"loadingSubject|async; else noResult\">\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    </ng-container>\n\n    <ng-template #noResult>\n      <ion-item *ngIf=\"totalRowCount === 0\">\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n      </ion-item>\n    </ng-template>\n\n  </div>\n</ion-content>\n\n<ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" *ngIf=\"mobile\">\n  <ion-fab-button color=\"tertiary\" (click)=\"addToken($event)\">\n    <ion-icon name=\"add\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n", styles: [".mat-cell-date-time{width:180px}.mat-column-id{width:90px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i1.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.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: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i1.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i6$5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$5.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6$5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i7$3.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7$3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i6$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i8$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: ActionsColumnComponent, selector: "app-actions-column", inputs: ["stickyEnd", "canCancel", "canConfirm", "canDelete", "canBackward", "canForward", "canConfirmAndAdd", "dirtyIcon", "optionsTitle", "class", "cellTemplate"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmEditCreateClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: UserTokenTable, decorators: [{
             type: Component,
             args: [{ selector: 'app-user-token-table', providers: [
@@ -38058,5 +38244,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { APP_ABOUT_DEVELOPERS, APP_ABOUT_PARTNERS, APP_CONFIG_OPTIONS, APP_DEBUG_DATA_SERVICE, APP_FORM_ERROR_I18N_KEYS, APP_GRAPHQL_FRAGMENTS, APP_GRAPHQL_TYPE_POLICIES, APP_HOME_BUTTONS, 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, AbstractDateFormat, AbstractNamedFilterService, AbstractUserEventService, Account, AccountPage, AccountService, AccountToStringPipe, ActionsColumnComponent, AdminModule, AdminRoutingModule, AdminUsersModule, Alerts, AndroidOsEnvironment, AnimationState, AppAboutModalModule, AppAccountModule, AppAsyncTable, AppAuthForm, AppAuthModal, AppAuthModule, AppEditor, AppEditorOptions, AppEntityEditor, AppEntityEditorModal, AppEntityEditorModalOptions, AppEntityFormModule, AppForm, AppFormArray, AppFormButtonsBarModule, AppFormField, AppFormModule, AppFormProvider, AppFormUtils, AppGestureConfig, AppGraphQLModule, AppHelpModal, AppHomePageModule, AppIconComponent, AppIconModule, AppImageGalleryComponent, AppInMemoryTable, AppInstallUpgradeCard, AppInstallUpgradeCardModule, AppListForm, AppListFormModule, AppLoadingSpinner, AppMenuModule, AppNullForm, AppPropertiesForm, AppPropertiesFormModule, AppPropertiesTable, AppRegisterModule, AppSelectPeerModule, AppSettingsPageModule, AppTabEditor, AppTabEditorOptions, AppTable, AppTableModule, AppTableUtils, AppTextPopoverModule, AppUpdateOfflineModeCard, AppUpdateOfflineModeCardModule, AppValidatorService, AppendToInputDirective, ArrayFilterPipe, ArrayFirstPipe, ArrayIncludesPipe, ArrayJoinPipe, ArrayLengthPipe, ArrayPluckPipe, AsAnyPipe, AsArrayPipe, AsObservablePipe, AudioProvider, AudioTestingModule, AudioTestingPage, AuthGuardService, AutoTitleDirective, AutocompleteTestPage, AutofocusDirective, BadgeDirective, Base58, BaseEntityService, BaseGraphqlService, BaseGraphqlServiceOptions, BaseReferential, Beans, CORE_CONFIG_OPTIONS, CORE_TESTING_PAGES, CellValueChangeListener, ChipsTestPage, Color, ColorScale, ComponentDirtyGuard, ConfigService, Configuration, CoreModule, CoreTestingModule, CryptoService, CsvUtils, DATE_ISO_PATTERN, DATE_PATTERN, DATE_UNIX_MS_TIMESTAMP, DATE_UNIX_TIMESTAMP, 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, DragAndDropDirective, DurationPipe, ED25519_SEED_LENGTH, EMPTY_PLACEHOLDER_CHAR, ENTITIES_STORAGE_KEY_PREFIX, ENVIRONMENT, EmptyArrayPipe, EntitiesAsyncTableDataSource, EntitiesStorage, EntitiesTableDataSource, Entity, EntityClass, EntityClasses, EntityFilter, EntityFilterUtils, EntityMetadataComponent, EntityStore, EntityUtils, Environment, ErrorCodes, EvenPipe, FileResponse, FileService, FileSizePipe, FilesUtils, FormArrayHelper, FormButtonsBarComponent, FormButtonsBarToken, FormErrorTranslatePipe, FormErrorTranslator, FormFieldValuesHolder, FormGetArrayPipe, FormGetControlPipe, FormGetGroupPipe, FormGetPipe, FormGetValuePipe, Fragments, 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, IsLoginAccountPipe, IsNilOrBlankPipe, IsNilOrNaNPipe, IsNilPipe, IsNotNilOrBlankPipe, IsNotNilOrNaNPipe, IsNotNilPipe, IsOnDeskPipe, IsOnFieldPipe, JobModule, JobProgression, JobProgressionComponent, JobProgressionIcon, JobProgressionList, JobProgressionService, JobProgressionTestService, JobProgressionTestingPage, JobTestingModule, JobUtils, JsonUtils, KEYBOARD_HIDE_DELAY_MS, LAT_LONG_DEFAULT_MAX_DECIMALS, LAT_LONG_PATTERNS, LatLongFormatPipe, LatLongTestPage, LatitudeFormatPipe, LocalSettingsService, LogLevel, LogUtils, Logger, LoggingService, LoggingServiceModule, LongitudeFormatPipe, MINIFY_ENTITY_FOR_LOCAL_STORAGE, MINIFY_ENTITY_FOR_POD, MOMENT_NO_TIME_PROPERTY, MapGetPipe, MapKeysPipe, MapValuesPipe, MatAutocompleteConfigHolder, MatAutocompleteField, MatAutocompleteFieldUtils, MatBooleanField, MatChipsField, MatColorPipe, MatDate, MatDateShort, MatDateTime, MatDuration, MatLatLongField, MatNumpadComponent, MatNumpadContainerComponent, MatNumpadContent, MatPaginatorI18n, MatStepperI18n, MatSwipeField, MaterialTestingModule, MathAbsPipe, MenuComponent, MenuItems, MenuOptions, MenuService, Message, MessageFilter, MessageForm, MessageModal, MessageModule, MessageService, MessageTypeList, MessageTypes, MimeTypes, ModalToolbarComponent, NamedFilter, NamedFilterFilter, NetworkService, NewTokenModal, NgInitDirective, NgVarDirective, NotEmptyArrayPipe, NumberFormatPipe, NumpadDirective, NumpadTestPage, ObservableTestPage, OddPipe, PEER_URL_REGEXP, PRIORITIZED_AUTHORITIES, PUBKEY_REGEXP, Peer, Person, PersonFilter, PersonFragments, PersonService, PersonToStringPipe, PersonUtils, PersonValidatorService, PlatformService, ProgressBarService, ProgressInterceptor, PropertiesFormTestPage, PropertiesFormTestingModule, PropertyEntity, PropertyEntityFilter, PropertyEntityValidator, PropertyFormatPipe, PropertyGetPipe, RESERVED_END_COLUMNS, RESERVED_START_COLUMNS, Referential, ReferentialFilter, ReferentialRef, ReferentialUtils, ReferentialValidatorService, RegisterConfirmPage, RegisterForm, RegisterModal, ResizableComponent, ResizableDirective, ResizableModule, SCRYPT_PARAMS, 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_TESTING_PAGES, SPACE_PLACEHOLDER_CHAR, SelectPeerModal, ServerErrorCodes, SettingsPage, SharedAsyncValidators, SharedBadgeModule, SharedDebugModule, SharedDirectivesModule, SharedFormArrayValidators, SharedFormGroupValidators, SharedHotkeysModule, SharedMatAutocompleteModule, SharedMatBooleanModule, SharedMatChipsModule, SharedMatDateTimeModule, SharedMatDurationModule, SharedMatLatLongModule, SharedMatNumpadModule, SharedMatSwipeModule, SharedMaterialModule, SharedModule, SharedPipesModule, SharedRoutingModule, SharedTestingModule, SharedTestsPage, SharedToolbarModule, SharedValidators, SocialErrorCodes, SocialModule, SocialModuleOptionsToken, SocialTestingModule, Software, StartableService, StatusById, StatusIds, StatusList, StorageDrivers, StorageExplorerComponent, StorageExplorerModule, StorageService, StrIncludesPipe, StrLengthPipe, SwipeTestPage, TableSelectColumnsComponent, TableTestPage, TableTestingModule, TableValidatorService, TextForm, TextPopover, TextPopoverTestingModule, TextPopoverTestingPage, ToStringPipe, ToastTestingModule, ToastTestingPage, Toasts, TokenScope, ToolbarComponent, ToolbarToken, TranslatablePipe, TranslateContextPipe, TranslateContextService, UploadFile, UploadFileComponent, UploadFilePopover, UploadFileTestingModule, UploadFileTestingPage, UriUtils, UserEventModule, UserEventNotificationIcon, UserEventNotificationList, UserEventTestService, UserEventTestingModule, UserEventTestingPage, UserSettings, UserToken, UserTokenTable, UsersPage, accountToString, adaptValueToControl, addValueInArray, arrayDistinct, arrayGroupBy, arraySize, asInputElement, canHaveFocus, capitalizeFirstLetter, chainPromises, changeCaseToUnderscore, clearValueInArray, collectByProperty, copyEntity2Form, createPromiseEvent, createPromiseEventEmitter, departmentToString, departmentsToString, disableControls, emitPromiseEvent, entityToString, equals, equalsOrNil, escapeRegExp, fadeInAnimation, fadeInOutAnimation, filterFalse, filterNotNil, filterNumberInput, filterTrue, findParentWithClass, firstArrayValue, firstFalse, firstFalsePromise, firstNotNil, firstNotNilPromise, firstTrue, firstTruePromise, focusInput, focusNextInput, focusPreviousInput, formatLatitude, formatLongitude, fromDateISOString, fromScrollEndEvent, fromUnixMsTimestamp, fromUnixTimestamp, getCaretPosition, getColorContrast, getColorShade, getColorTint, getConnectionType, getControlFromPath, getFocusableInputElements, getFormErrors, getFormValueFromEntity, getProperty, getPropertyByPath, getPropertyByPathAsString, getRandomImage, hexToRgb, hexToRgbArray, initArrayControlsFromValues, isAndroid, isBlankString, isCapacitor, isControlHasInput, isEmptyArray, isIOS, isInputElement, isInstanceOf, isInt, isMobile, isNil, isNilOrBlank, isNilOrNaN, isNotEmptyArray, isNotNil, isNotNilBoolean, isNotNilOrBlank, isNotNilOrNaN, isNotNilString, isNumber, isNumberRange, isProgressEvent, isResponseEvent, isStartableService, isTouchUi, isWindows, joinProperties, joinPropertiesPath, logFormErrors, markAllAsTouched, markAsUntouched, markControlAsTouched, markFormGroupAsTouched, matchMedia, matchUpperCase, mergeLoadResult, mixHex, moveInputCaretToSeparator, noTrailingSlash, notNilOrDefault, nullIfUndefined, parseLatitudeOrLongitude, propertiesPathComparator, propertyComparator, propertyPathComparator, referentialToString, referentialsToString, remove, removeAll, removeDiacritics, removeDuplicatesFromArray, removeEnd, removeValueInArray, replaceAll, resetCalculatedValue, resizeArray, rgbArrayToHex, rgbToHex, round, scrollFactory, selectInputContent, selectInputRange, setCalculatedValue, setPropertyByPath, setTabIndex, sleep, slideInOutAnimation, slideUpDownAnimation, sort, splitById, splitByProperty, startsWithUpperCase, suggestFromArray, suggestFromStringArray, tabindexComparator, testUserAgent, toBoolean, toDateISOString, toDuration, toFloat, toInt, toNotNil, toNumber, trimEmptyToNull, uncapitalizeFirstLetter, undefinedIfNull, updateValueAndValidity, waitFor, waitForFalse, waitForTrue, waitIdle, waitWhilePending };
+export { APP_ABOUT_DEVELOPERS, APP_ABOUT_PARTNERS, APP_CONFIG_OPTIONS, APP_DEBUG_DATA_SERVICE, APP_FORM_ERROR_I18N_KEYS, APP_GRAPHQL_FRAGMENTS, APP_GRAPHQL_TYPE_POLICIES, APP_HOME_BUTTONS, 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, AbstractDateFormat, AbstractNamedFilterService, AbstractUserEventService, Account, AccountPage, AccountService, AccountToStringPipe, ActionsColumnComponent, AdminModule, AdminRoutingModule, AdminUsersModule, Alerts, AndroidOsEnvironment, AnimationState, AppAboutModalModule, AppAccountModule, AppAsyncTable, AppAuthForm, AppAuthModal, AppAuthModule, AppEditor, AppEditorOptions, AppEntityEditor, AppEntityEditorModal, AppEntityEditorModalOptions, AppEntityFormModule, AppForm, AppFormArray, AppFormButtonsBarModule, AppFormField, AppFormModule, AppFormProvider, AppFormUtils, AppGestureConfig, AppGraphQLModule, AppHelpModal, AppHomePageModule, AppIconComponent, AppIconModule, AppImageGalleryComponent, AppInMemoryTable, AppInstallUpgradeCard, AppInstallUpgradeCardModule, AppListForm, AppListFormModule, AppLoadingSpinner, AppMenuModule, AppNullForm, AppPropertiesForm, AppPropertiesFormModule, AppPropertiesTable, AppRegisterModule, AppSelectPeerModule, AppSettingsPageModule, AppTabEditor, AppTabEditorOptions, AppTable, AppTableModule, AppTableUtils, AppTextPopoverModule, AppUpdateOfflineModeCard, AppUpdateOfflineModeCardModule, AppValidatorService, AppendToInputDirective, ArrayFilterPipe, ArrayFirstPipe, ArrayIncludesPipe, ArrayJoinPipe, ArrayLengthPipe, ArrayPluckPipe, AsAnyPipe, AsArrayPipe, AsObservablePipe, AudioProvider, AudioTestingModule, AudioTestingPage, AuthGuardService, AutoTitleDirective, AutocompleteTestPage, AutofocusDirective, BadgeDirective, Base58, BaseEntityService, BaseGraphqlService, BaseGraphqlServiceOptions, BaseReferential, Beans, CORE_CONFIG_OPTIONS, CORE_TESTING_PAGES, CellValueChangeListener, ChipsTestPage, Color, ColorScale, ComponentDirtyGuard, ConfigService, Configuration, CoreModule, CoreTestingModule, CryptoService, CsvUtils, DATE_ISO_PATTERN, DATE_PATTERN, DATE_UNIX_MS_TIMESTAMP, DATE_UNIX_TIMESTAMP, 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, DragAndDropDirective, DurationPipe, ED25519_SEED_LENGTH, EMPTY_PLACEHOLDER_CHAR, ENTITIES_STORAGE_KEY_PREFIX, ENVIRONMENT, EmptyArrayPipe, EntitiesAsyncTableDataSource, EntitiesStorage, EntitiesTableDataSource, Entity, EntityClass, EntityClasses, EntityFilter, EntityFilterUtils, EntityMetadataComponent, EntityStore, EntityUtils, Environment, ErrorCodes, EvenPipe, FileResponse, FileService, FileSizePipe, FilesUtils, FormArrayHelper, FormButtonsBarComponent, FormButtonsBarToken, FormErrorTranslatePipe, FormErrorTranslator, FormFieldValuesHolder, FormGetArrayPipe, FormGetControlPipe, FormGetGroupPipe, FormGetPipe, FormGetValuePipe, Fragments, 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, IsLoginAccountPipe, IsNilOrBlankPipe, IsNilOrNaNPipe, IsNilPipe, IsNotNilOrBlankPipe, IsNotNilOrNaNPipe, IsNotNilPipe, IsOnDeskPipe, IsOnFieldPipe, JobModule, JobProgression, JobProgressionComponent, JobProgressionIcon, JobProgressionList, JobProgressionService, JobProgressionTestService, JobProgressionTestingPage, JobTestingModule, JobUtils, JsonUtils, KEYBOARD_HIDE_DELAY_MS, LAT_LONG_DEFAULT_MAX_DECIMALS, LAT_LONG_PATTERNS, LatLongFormatPipe, LatLongTestPage, LatitudeFormatPipe, LocalSettingsService, LogLevel, LogUtils, Logger, LoggingService, LoggingServiceModule, LongitudeFormatPipe, MINIFY_ENTITY_FOR_LOCAL_STORAGE, MINIFY_ENTITY_FOR_POD, MOMENT_NO_TIME_PROPERTY, MapGetPipe, MapKeysPipe, MapValuesPipe, MatAutocompleteConfigHolder, MatAutocompleteField, MatAutocompleteFieldUtils, MatBooleanField, MatChipsField, MatColorPipe, MatDate, MatDateShort, MatDateTime, MatDuration, MatLatLongField, MatNumpadComponent, MatNumpadContainerComponent, MatNumpadContent, MatPaginatorI18n, MatStepperI18n, MatSwipeField, MaterialTestingModule, MathAbsPipe, MenuComponent, MenuItems, MenuOptions, MenuService, Message, MessageFilter, MessageForm, MessageModal, MessageModule, MessageService, MessageTypeList, MessageTypes, MimeTypes, ModalToolbarComponent, NamedFilter, NamedFilterFilter, NamedFilterSelector, NetworkService, NewTokenModal, NgInitDirective, NgVarDirective, NotEmptyArrayPipe, NumberFormatPipe, NumpadDirective, NumpadTestPage, ObservableTestPage, OddPipe, PEER_URL_REGEXP, PRIORITIZED_AUTHORITIES, PUBKEY_REGEXP, Peer, Person, PersonFilter, PersonFragments, PersonService, PersonToStringPipe, PersonUtils, PersonValidatorService, PlatformService, ProgressBarService, ProgressInterceptor, PropertiesFormTestPage, PropertiesFormTestingModule, PropertyEntity, PropertyEntityFilter, PropertyEntityValidator, PropertyFormatPipe, PropertyGetPipe, RESERVED_END_COLUMNS, RESERVED_START_COLUMNS, Referential, ReferentialFilter, ReferentialRef, ReferentialUtils, ReferentialValidatorService, RegisterConfirmPage, RegisterForm, RegisterModal, ResizableComponent, ResizableDirective, ResizableModule, SCRYPT_PARAMS, 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_TESTING_PAGES, SPACE_PLACEHOLDER_CHAR, SelectPeerModal, ServerErrorCodes, SettingsPage, SharedAsyncValidators, SharedBadgeModule, SharedDebugModule, SharedDirectivesModule, SharedFormArrayValidators, SharedFormGroupValidators, SharedHotkeysModule, SharedMatAutocompleteModule, SharedMatBooleanModule, SharedMatChipsModule, SharedMatDateTimeModule, SharedMatDurationModule, SharedMatLatLongModule, SharedMatNumpadModule, SharedMatSwipeModule, SharedMaterialModule, SharedModule, SharedNamedFilterModule, SharedPipesModule, SharedRoutingModule, SharedTestingModule, SharedTestsPage, SharedToolbarModule, SharedValidators, SocialErrorCodes, SocialModule, SocialModuleOptionsToken, SocialTestingModule, Software, StartableService, StatusById, StatusIds, StatusList, StorageDrivers, StorageExplorerComponent, StorageExplorerModule, StorageService, StrIncludesPipe, StrLengthPipe, SwipeTestPage, TableSelectColumnsComponent, TableTestPage, TableTestingModule, TableValidatorService, TextForm, TextPopover, TextPopoverTestingModule, TextPopoverTestingPage, ToStringPipe, ToastTestingModule, ToastTestingPage, Toasts, TokenScope, ToolbarComponent, ToolbarToken, TranslatablePipe, TranslateContextPipe, TranslateContextService, UploadFile, UploadFileComponent, UploadFilePopover, UploadFileTestingModule, UploadFileTestingPage, UriUtils, UserEventModule, UserEventNotificationIcon, UserEventNotificationList, UserEventTestService, UserEventTestingModule, UserEventTestingPage, UserSettings, UserToken, UserTokenTable, UsersPage, accountToString, adaptValueToControl, addValueInArray, arrayDistinct, arrayGroupBy, arraySize, asInputElement, canHaveFocus, capitalizeFirstLetter, chainPromises, changeCaseToUnderscore, clearValueInArray, collectByProperty, copyEntity2Form, createPromiseEvent, createPromiseEventEmitter, departmentToString, departmentsToString, disableControls, emitPromiseEvent, entityToString, equals, equalsOrNil, escapeRegExp, fadeInAnimation, fadeInOutAnimation, filterFalse, filterNotNil, filterNumberInput, filterTrue, findParentWithClass, firstArrayValue, firstFalse, firstFalsePromise, firstNotNil, firstNotNilPromise, firstTrue, firstTruePromise, focusInput, focusNextInput, focusPreviousInput, formatLatitude, formatLongitude, fromDateISOString, fromScrollEndEvent, fromUnixMsTimestamp, fromUnixTimestamp, getCaretPosition, getColorContrast, getColorShade, getColorTint, getConnectionType, getControlFromPath, getFocusableInputElements, getFormErrors, getFormValueFromEntity, getProperty, getPropertyByPath, getPropertyByPathAsString, getRandomImage, hexToRgb, hexToRgbArray, initArrayControlsFromValues, isAndroid, isBlankString, isCapacitor, isControlHasInput, isEmptyArray, isIOS, isInputElement, isInstanceOf, isInt, isMobile, isNil, isNilOrBlank, isNilOrNaN, isNotEmptyArray, isNotNil, isNotNilBoolean, isNotNilOrBlank, isNotNilOrNaN, isNotNilString, isNumber, isNumberRange, isProgressEvent, isResponseEvent, isStartableService, isTouchUi, isWindows, joinProperties, joinPropertiesPath, logFormErrors, markAllAsTouched, markAsUntouched, markControlAsTouched, markFormGroupAsTouched, matchMedia, matchUpperCase, mergeLoadResult, mixHex, moveInputCaretToSeparator, noTrailingSlash, notNilOrDefault, nullIfUndefined, parseLatitudeOrLongitude, propertiesPathComparator, propertyComparator, propertyPathComparator, referentialToString, referentialsToString, remove, removeAll, removeDiacritics, removeDuplicatesFromArray, removeEnd, removeValueInArray, replaceAll, resetCalculatedValue, resizeArray, rgbArrayToHex, rgbToHex, round, scrollFactory, selectInputContent, selectInputRange, setCalculatedValue, setPropertyByPath, setTabIndex, sleep, slideInOutAnimation, slideUpDownAnimation, sort, splitById, splitByProperty, startsWithUpperCase, suggestFromArray, suggestFromStringArray, tabindexComparator, testUserAgent, toBoolean, toDateISOString, toDuration, toFloat, toInt, toNotNil, toNumber, trimEmptyToNull, uncapitalizeFirstLetter, undefinedIfNull, updateValueAndValidity, waitFor, waitForFalse, waitForTrue, waitIdle, waitWhilePending };
 //# sourceMappingURL=sumaris-net.ngx-components.mjs.map