@igo2/common 16.3.0 → 17.0.0-next.10

package/fesm2022/igo2-common-entity.mjs

@@ -0,0 +1,3036 @@
+import { t } from 'typy';
+import { ReplaySubject, BehaviorSubject, combineLatest, of, Observable } from 'rxjs';
+import { uuid, ObjectUtils, StringUtils } from '@igo2/utils';
+import { map, skip, debounceTime, catchError, tap } from 'rxjs/operators';
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, NgModule, ViewChild, Directive, HostListener, Optional, Self } from '@angular/core';
+import { NgIf, NgFor, AsyncPipe, NgClass, NgStyle } from '@angular/common';
+import * as i3 from '@angular/material/core';
+import { MatOptionModule, MatNativeDateModule } from '@angular/material/core';
+import * as i1 from '@angular/material/form-field';
+import { MatFormFieldModule, MatFormFieldControl } from '@angular/material/form-field';
+import * as i2 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i2$2 from '@angular/cdk/a11y';
+import * as i1$2 from '@angular/forms';
+import { UntypedFormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { provideMomentDateAdapter } from '@angular/material-moment-adapter';
+import * as i4 from '@angular/material/autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import * as i5 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i6 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i7 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import * as i9 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i10 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i3$1 from '@angular/material/paginator';
+import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import * as i12 from '@angular/material/sort';
+import { MatSortModule } from '@angular/material/sort';
+import * as i13 from '@angular/material/table';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import * as i14 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { SanitizeHtmlPipe } from '@igo2/common/custom-html';
+import { ImageErrorDirective, SecureImagePipe } from '@igo2/common/image';
+import { StopPropagationDirective } from '@igo2/common/stop-propagation';
+import * as i1$1 from '@igo2/core/language';
+import { IgoLanguageModule } from '@igo2/core/language';
+import moment from 'moment';
+import * as i2$1 from '@igo2/core/media';
+import scrollIntoView from 'scroll-into-view-if-needed';
+import * as i15 from '@ngx-translate/core';
+
+var EntityOperationType;
+(function (EntityOperationType) {
+    EntityOperationType["Insert"] = "Insert";
+    EntityOperationType["Update"] = "Update";
+    EntityOperationType["Delete"] = "Delete";
+})(EntityOperationType || (EntityOperationType = {}));
+var EntityTableColumnRenderer;
+(function (EntityTableColumnRenderer) {
+    EntityTableColumnRenderer["Default"] = "Default";
+    EntityTableColumnRenderer["HTML"] = "HTML";
+    EntityTableColumnRenderer["UnsanitizedHTML"] = "UnsanitizedHTML";
+    EntityTableColumnRenderer["Editable"] = "Editable";
+    EntityTableColumnRenderer["Icon"] = "Icon";
+    EntityTableColumnRenderer["ButtonGroup"] = "ButtonGroup";
+})(EntityTableColumnRenderer || (EntityTableColumnRenderer = {}));
+var EntityTableScrollBehavior;
+(function (EntityTableScrollBehavior) {
+    EntityTableScrollBehavior["Auto"] = "auto";
+    EntityTableScrollBehavior["Instant"] = "instant";
+    EntityTableScrollBehavior["Smooth"] = "smooth";
+})(EntityTableScrollBehavior || (EntityTableScrollBehavior = {}));
+var EntityTableSelectionState;
+(function (EntityTableSelectionState) {
+    EntityTableSelectionState["None"] = "None";
+    EntityTableSelectionState["All"] = "All";
+    EntityTableSelectionState["Some"] = "Some";
+})(EntityTableSelectionState || (EntityTableSelectionState = {}));
+
+/**
+ * Get an entity's named property. Nested properties are supported
+ * with the dotted notation. (i.e 'author.name')
+ *
+ * Note: this method is a 'best attempt' at getting an entity's property.
+ * It fits the most common cases but you might need to explicitely define
+ * a property getter when using an EntityStore, for example.
+ * @param entity Entity
+ * @param property Property name
+ * @returns Property value
+ */
+function getEntityProperty(entity, property) {
+    return t(entity, property).safeObject;
+}
+/**
+ * Get an entity's id. An entity's id can be one of:
+ * 'entity.meta.id', 'entity.meta.idProperty' or 'entity.id'.
+ *
+ * Note: See the note in the 'getEntityProperty' documentation.
+ * @param entity Entity
+ * @returns Entity id
+ */
+function getEntityId(entity) {
+    const meta = entity.meta || {};
+    return meta.id ? meta.id : getEntityProperty(entity, meta.idProperty || 'id');
+}
+/**
+ * Get an entity's title. An entity's title can be one of:
+ * 'entity.meta.title', 'entity.meta.titleProperty' or 'entity.title'.
+ * @param entity Entity
+ * @returns Entity title
+ */
+function getEntityTitle(entity) {
+    const meta = entity.meta || {};
+    return meta.title
+        ? meta.title
+        : getEntityProperty(entity, meta.titleProperty || 'title');
+}
+/**
+ * Get an entity's HTML title. An entity's HTML title can be one of:
+ * 'entity.meta.titleHtml', 'entity.meta.titleHtmlProperty' or 'entity.titleHtml'.
+ * @param entity Entity
+ * @returns Entity HTML title
+ */
+function getEntityTitleHtml(entity) {
+    const meta = entity.meta || {};
+    return meta.titleHtml
+        ? meta.titleHtml
+        : getEntityProperty(entity, meta.titleHtmlProperty || 'titleHtml');
+}
+/**
+ * Get an entity's icon. An entity's icon can be one of:
+ * 'entity.meta.icon', 'entity.meta.iconProperty' or 'entity.icon'.
+ * @param entity Entity
+ * @returns Entity icon
+ */
+function getEntityIcon(entity) {
+    const meta = entity.meta || {};
+    return meta.icon
+        ? meta.icon
+        : getEntityProperty(entity, meta.iconProperty || 'icon');
+}
+/**
+ * Get an entity's revision.
+ * @param entity Entity
+ * @returns Entity revision
+ */
+function getEntityRevision(entity) {
+    const meta = entity.meta || {};
+    return meta.revision || 0;
+}
+
+/**
+ * This class is used to track a store's entities state
+ */
+class EntityStateManager {
+    options;
+    /**
+     * State index
+     */
+    index = new Map();
+    /**
+     * Change emitter
+     */
+    change$ = new ReplaySubject(1);
+    /**
+     * Method to get an entity's id
+     */
+    getKey;
+    constructor(options = {}) {
+        this.options = options;
+        this.getKey = options.getKey ? options.getKey : getEntityId;
+        this.next();
+    }
+    /**
+     * Clear state
+     */
+    clear() {
+        if (this.index.size > 0) {
+            this.index.clear();
+            this.next();
+        }
+    }
+    /**
+     * Get an entity's state
+     * @param entity Entity
+     * @returns State
+     */
+    get(entity) {
+        return (this.index.get(this.getKey(entity)) || {});
+    }
+    /**
+     * Set an entity's state
+     * @param entity Entity
+     * @param state State
+     */
+    set(entity, state) {
+        this.setMany([entity], state);
+    }
+    /**
+     * Set many entitie's state
+     * @param entitie Entities
+     * @param state State
+     */
+    setMany(entities, state) {
+        entities.forEach((entity) => {
+            this.index.set(this.getKey(entity), Object.assign({}, state));
+        });
+        this.next();
+    }
+    /**
+     * Set state of all entities that already have a state. This is not
+     * the same as setting the state of all the store's entities.
+     * @param state State
+     */
+    setAll(state) {
+        Array.from(this.index.keys()).forEach((key) => {
+            this.index.set(key, Object.assign({}, state));
+        });
+        this.next();
+    }
+    /**
+     * Update an entity's state
+     * @param entity Entity
+     * @param changes State changes
+     */
+    update(entity, changes, exclusive = false) {
+        this.updateMany([entity], changes, exclusive);
+    }
+    /**
+     * Update many entitie's state
+     * @param entitie Entities
+     * @param changes State changes
+     */
+    updateMany(entities, changes, exclusive = false) {
+        if (exclusive === true) {
+            return this.updateManyExclusive(entities, changes);
+        }
+        entities.forEach((entity) => {
+            const state = Object.assign({}, this.get(entity), changes);
+            this.index.set(this.getKey(entity), state);
+        });
+        this.next();
+    }
+    /**
+     * Reversee an entity's state
+     * @param entity Entity
+     * @param keys State keys to reverse
+     */
+    reverse(entity, keys) {
+        this.reverseMany([entity], keys);
+    }
+    /**
+     * Reverse many entitie's state
+     * @param entitie Entities
+     * @param keys State keys to reverse
+     */
+    reverseMany(entities, keys) {
+        entities.forEach((entity) => {
+            const currentState = this.get(entity);
+            const changes = keys.reduce((acc, key) => {
+                acc[key] = currentState[key] || false;
+                return acc;
+            }, {});
+            const reversedChanges = this.reverseChanges(changes);
+            const state = Object.assign({}, currentState, reversedChanges);
+            this.index.set(this.getKey(entity), state);
+        });
+        this.next();
+    }
+    /**
+     * Update state of all entities that already have a state. This is not
+     * the same as updating the state of all the store's entities.
+     * @param changes State
+     */
+    updateAll(changes) {
+        const allKeys = this.getAllKeys();
+        Array.from(allKeys).forEach((key) => {
+            const state = Object.assign({}, this.index.get(key), changes);
+            this.index.set(key, state);
+        });
+        this.next();
+    }
+    /**
+     * When some state changes are flagged as 'exclusive', reverse
+     * the state of all other entities. Changes are reversable when
+     * they are boolean.
+     * @param entitie Entities
+     * @param changes State changes
+     */
+    updateManyExclusive(entities, changes) {
+        const reverseChanges = this.reverseChanges(changes);
+        const keys = entities.map((entity) => this.getKey(entity));
+        const allKeys = new Set(keys.concat(Array.from(this.getAllKeys())));
+        allKeys.forEach((key) => {
+            const state = this.index.get(key) || {};
+            if (keys.indexOf(key) >= 0) {
+                this.index.set(key, Object.assign({}, state, changes));
+            }
+            else {
+                // Update only if the reverse changes would modify
+                // a key already present in the current state
+                const shouldUpdate = Object.keys(reverseChanges).some((changeKey) => {
+                    return (state[changeKey] !== undefined &&
+                        state[changeKey] !== reverseChanges[changeKey]);
+                });
+                if (shouldUpdate === true) {
+                    this.index.set(key, Object.assign({}, state, reverseChanges));
+                }
+            }
+        });
+        this.next();
+    }
+    /**
+     * Compute a 'reversed' version of some state changes.
+     * Changes are reversable when they are boolean.
+     * @param changes State changes
+     * @returns Reversed state changes
+     */
+    reverseChanges(changes) {
+        return Object.entries(changes).reduce((reverseChanges, bunch) => {
+            const [changeKey, value] = bunch;
+            if (typeof value === typeof true) {
+                reverseChanges[changeKey] = !value;
+            }
+            return reverseChanges;
+        }, {});
+    }
+    /**
+     * Return all the keys in that state and in the store it's bound to, if any.
+     * @returns Set of keys
+     */
+    getAllKeys() {
+        const storeKeys = Array.from(this.options?.index?.keys() ?? []);
+        return new Set(Array.from(this.index.keys()).concat(storeKeys));
+    }
+    /**
+     * Emit 'change' event
+     */
+    next() {
+        this.change$.next();
+    }
+}
+
+/**
+ * An entity view streams entities from an observable source. These entities
+ * can be filtered or sorted without affecting the source. A view can also
+ * combine data from multiple sources, joined together.
+ */
+class EntityView {
+    source$;
+    /**
+     * Observable stream of values
+     */
+    values$ = new BehaviorSubject([]);
+    /**
+     * Subscription to the source (and joined sources) values
+     */
+    values$$;
+    /**
+     * Whether this view has been lifted
+     */
+    lifted = false;
+    /**
+     * Join clauses
+     */
+    joins = [];
+    /**
+     * Observable of a filter clause
+     */
+    filter$ = new BehaviorSubject(undefined);
+    /**
+     * Observable of filter clauses
+     */
+    filters$ = new BehaviorSubject([]);
+    /**
+     * Filters index
+     */
+    filterIndex = new Map();
+    /**
+     * Observable of a sort clause
+     */
+    sort$ = new BehaviorSubject(undefined);
+    /**
+     * Method for indexing
+     */
+    get getKey() {
+        return this.getKey$.value;
+    }
+    getKey$ = new BehaviorSubject(undefined);
+    /**
+     * Number of entities
+     */
+    count$ = new BehaviorSubject(0);
+    get count() {
+        return this.count$.value;
+    }
+    /**
+     * Whether the store is empty
+     */
+    empty$ = new BehaviorSubject(true);
+    get empty() {
+        return this.empty$.value;
+    }
+    /**
+     * Store index
+     */
+    get index() {
+        return this._index;
+    }
+    _index;
+    constructor(source$) {
+        this.source$ = source$;
+    }
+    /**
+     * Get a value from the view by key
+     * @param key Key
+     * @returns Value
+     */
+    get(key) {
+        if (this._index === undefined) {
+            throw new Error('This view has no index, therefore, this method is unavailable.');
+        }
+        return this.index.get(key);
+    }
+    /**
+     * Get all the values
+     * @returns Array of values
+     */
+    all() {
+        return this.values$.value;
+    }
+    /**
+     * Observe all the values
+     * @returns Observable of values
+     */
+    all$() {
+        return this.values$;
+    }
+    /**
+     * Get the first value that respects a criteria
+     * @returns A value
+     */
+    firstBy(clause) {
+        return this.values$.value.find(clause);
+    }
+    /**
+     * Observe the first value that respects a criteria
+     * @returns Observable of a value
+     */
+    firstBy$(clause) {
+        return this.values$.pipe(map((values) => values.find(clause)));
+    }
+    /**
+     * Get all the values that respect a criteria
+     * @returns Array of values
+     */
+    manyBy(clause) {
+        return this.values$.value.filter(clause);
+    }
+    /**
+     * Observe all the values that respect a criteria
+     * @returns Observable of values
+     */
+    manyBy$(clause) {
+        return this.values$.pipe(map((values) => values.filter(clause)));
+    }
+    /**
+     * Clear the filter and sort and unsubscribe from the source
+     */
+    clear() {
+        this.filter(undefined);
+        this.sort(undefined);
+    }
+    destroy() {
+        if (this.values$$ !== undefined) {
+            this.values$$.unsubscribe();
+        }
+        this.clear();
+    }
+    /**
+     * Create an index
+     * @param getKey Method to get a value's id
+     * @returns The view
+     */
+    createIndex(getKey) {
+        this._index = new Map();
+        this.getKey$.next(getKey);
+        return this;
+    }
+    /**
+     * Join another source to the stream (chainable)
+     * @param clause Join clause
+     * @returns The view
+     */
+    join(clause) {
+        if (this.lifted === true) {
+            throw new Error('This view has already been lifted, therefore, no join is allowed.');
+        }
+        this.joins.push(clause);
+        return this;
+    }
+    /**
+     * Filter values (chainable)
+     * @param clause Filter clause
+     * @returns The view
+     */
+    filter(clause) {
+        this.filter$.next(clause);
+        return this;
+    }
+    /**
+     * @param clause Filter clause
+     * @returns The filter id
+     */
+    addFilter(clause) {
+        const id = uuid();
+        this.filterIndex.set(id, clause);
+        this.filters$.next(Array.from(this.filterIndex.values()));
+        return id;
+    }
+    /**
+     * Remove a filter by id
+     * @param clause Filter clause
+     */
+    removeFilter(id) {
+        this.filterIndex.delete(id);
+        this.filters$.next(Array.from(this.filterIndex.values()));
+    }
+    /**
+     * Sort values (chainable)
+     * @param clauseSort clause
+     * @returns The view
+     */
+    sort(clause) {
+        this.sort$.next(clause);
+        return this;
+    }
+    /**
+     * Create the final observable
+     * @returns Observable
+     */
+    lift() {
+        this.lifted = true;
+        const source$ = this.joins.length > 0 ? this.liftJoinedSource() : this.liftSource();
+        const observables$ = [
+            source$,
+            this.filters$,
+            this.filter$,
+            this.sort$,
+            this.getKey$
+        ];
+        this.values$$ = combineLatest(observables$)
+            .pipe(skip(1), debounceTime(5))
+            .subscribe((bunch) => {
+            const [_values, filters, filter, sort, getKey] = bunch;
+            const values = this.processValues(_values, filters, filter, sort);
+            const generateIndex = getKey !== undefined;
+            this.setValues(values, generateIndex);
+        });
+    }
+    /**
+     * Create the source observable when no joins are defined
+     * @returns Observable
+     */
+    liftSource() {
+        return this.source$;
+    }
+    /**
+     * Create the source observable when joins are defined
+     * @returns Observable
+     */
+    liftJoinedSource() {
+        const sources$ = [
+            this.source$,
+            combineLatest(this.joins.map((join) => join.source))
+        ];
+        return combineLatest(sources$).pipe(map((bunch) => {
+            const [entities, joinData] = bunch;
+            return entities.reduce((values, entity) => {
+                const value = this.computeJoinedValue(entity, joinData);
+                if (value !== undefined) {
+                    values.push(value);
+                }
+                return values;
+            }, []);
+        }));
+    }
+    /**
+     * Apply joins to a source's entity and return the final value
+     * @returns Final value
+     */
+    computeJoinedValue(entity, joinData) {
+        let value = entity;
+        let joinIndex = 0;
+        while (value !== undefined && joinIndex < this.joins.length) {
+            value = this.joins[joinIndex].reduce(value, joinData[joinIndex]);
+            joinIndex += 1;
+        }
+        return value;
+    }
+    /**
+     * Filter and sort values before streaming them
+     * @param values Values
+     * @param filters Filter clauses
+     * @param filter Filter clause
+     * @param sort Sort clause
+     * @returns Filtered and sorted values
+     */
+    processValues(values, filters, filter, sort) {
+        values = values.slice(0);
+        values = this.filterValues(values, filters.concat([filter]));
+        values = this.sortValues(values, sort);
+        return values;
+    }
+    /**
+     * Filter values
+     * @param values Values
+     * @param filters Filter clauses
+     * @returns Filtered values
+     */
+    filterValues(values, clauses) {
+        if (clauses.length === 0) {
+            return values;
+        }
+        return values.filter((value) => {
+            return clauses
+                .filter((clause) => clause !== undefined)
+                .every((clause) => clause(value));
+        });
+    }
+    /**
+     * Sort values
+     * @param values Values
+     * @param sort Sort clause
+     * @returns Sorted values
+     */
+    sortValues(values, clause) {
+        if (clause === undefined) {
+            return values;
+        }
+        return values.sort((v1, v2) => {
+            return ObjectUtils.naturalCompare(clause.valueAccessor(v1), clause.valueAccessor(v2), clause.direction, clause.nullsFirst);
+        });
+    }
+    /**
+     * Set value and optionally generate an index
+     * @param values Values
+     * @param generateIndex boolean
+     */
+    setValues(values, generateIndex) {
+        if (generateIndex === true) {
+            this._index = this.generateIndex(values);
+        }
+        this.values$.next(values);
+        const count = values.length;
+        const empty = count === 0;
+        this.count$.next(count);
+        this.empty$.next(empty);
+    }
+    /**
+     * Generate a complete index of all the values
+     * @param entities Entities
+     * @returns Index
+     */
+    generateIndex(values) {
+        const entries = values.map((value) => [this.getKey(value), value]);
+        return new Map(entries);
+    }
+}
+
+/**
+ * An entity store class holds any number of entities
+ * as well as their state. It can be observed, filtered and sorted and
+ * provides methods to insert, update or delete entities.
+ */
+class EntityStore {
+    /**
+     * Observable of the raw entities
+     */
+    entities$ = new BehaviorSubject([]);
+    /**
+     * Number of entities
+     */
+    count$ = new BehaviorSubject(0);
+    get count() {
+        return this.count$.value;
+    }
+    /**
+     * Whether the store is empty
+     */
+    empty$ = new BehaviorSubject(true);
+    get empty() {
+        return this.empty$.value;
+    }
+    /**
+     * Entity store state
+     */
+    state;
+    /**
+     * View of all the entities
+     */
+    view;
+    /**
+     * View of all the entities and their state
+     */
+    stateView;
+    /**
+     * Method to get an entity's id
+     */
+    getKey;
+    /**
+     * Method to get an entity's named property
+     */
+    getProperty;
+    /**
+     * Store index
+     */
+    get index() {
+        return this._index;
+    }
+    _index;
+    /**
+     * Store index
+     */
+    get pristine() {
+        return this._pristine;
+    }
+    _pristine = true;
+    /**
+     * Strategies
+     */
+    strategies = [];
+    constructor(entities, options = {}) {
+        this.getKey = options.getKey ? options.getKey : getEntityId;
+        this.getProperty = options.getProperty
+            ? options.getProperty
+            : getEntityProperty;
+        this.state = this.createStateManager();
+        this.view = this.createDataView();
+        this.stateView = this.createStateView();
+        this.view.lift();
+        this.stateView.lift();
+        if (entities.length > 0) {
+            this.load(entities);
+        }
+        else {
+            this._index = this.generateIndex(entities);
+        }
+    }
+    /**
+     * Get an entity from the store by key
+     * @param key Key
+     * @returns Entity
+     */
+    get(key) {
+        return this.index.get(key);
+    }
+    /**
+     * Get all entities in the store
+     * @returns Array of entities
+     */
+    all() {
+        return this.entities$.value;
+    }
+    /**
+     * Set this store's entities
+     * @param entities Entities
+     */
+    load(entities, pristine = true) {
+        this._index = this.generateIndex(entities);
+        this._pristine = pristine;
+        this.next();
+    }
+    /**
+     * Clear the store's entities but keep the state and views intact.
+     * Views won't return any data but future data will be subject to the
+     * current views filter and sort
+     */
+    softClear() {
+        if (this.index && this.index.size > 0) {
+            this.index.clear();
+            this._pristine = true;
+            this.next();
+        }
+        else if (this.index) {
+            this.updateCount();
+        }
+    }
+    /**
+     * Clear the store's entities, state and views
+     */
+    clear() {
+        this.stateView.clear();
+        this.view.clear();
+        this.state.clear();
+        this.softClear();
+    }
+    destroy() {
+        this.stateView.destroy();
+        this.view.destroy();
+        this.clear();
+    }
+    /**
+     * Insert an entity into the store
+     * @param entity Entity
+     */
+    insert(entity) {
+        this.insertMany([entity]);
+    }
+    /**
+     * Insert many entities into the store
+     * @param entities Entities
+     */
+    insertMany(entities) {
+        entities.forEach((entity) => this.index.set(this.getKey(entity), entity));
+        this._pristine = false;
+        this.next();
+    }
+    /**
+     * Update or insert an entity into the store
+     * @param entity Entity
+     */
+    update(entity) {
+        this.updateMany([entity]);
+    }
+    /**
+     * Update or insert many entities into the store
+     * @param entities Entities
+     */
+    updateMany(entities) {
+        entities.forEach((entity) => this.index.set(this.getKey(entity), entity));
+        this._pristine = false;
+        this.next();
+    }
+    /**
+     * Add a strategy to this store
+     * @param strategy Entity store strategy
+     * @returns Entity store
+     */
+    addStrategy(strategy, activate = false) {
+        const existingStrategy = this.strategies.find((_strategy) => {
+            return strategy.constructor === _strategy.constructor;
+        });
+        if (existingStrategy !== undefined) {
+            throw new Error('A strategy of this type already exists on that EntityStore.');
+        }
+        this.strategies.push(strategy);
+        strategy.bindStore(this);
+        if (activate === true) {
+            strategy.activate();
+        }
+        return this;
+    }
+    /**
+     * Remove a strategy from this store
+     * @param strategy Entity store strategy
+     * @returns Entity store
+     */
+    removeStrategy(strategy) {
+        const index = this.strategies.indexOf(strategy);
+        if (index >= 0) {
+            this.strategies.splice(index, 1);
+            strategy.unbindStore(this);
+        }
+        return this;
+    }
+    /**
+     * Return strategies of a given type
+     * @param type Entity store strategy class
+     * @returns Strategies
+     */
+    getStrategyOfType(type) {
+        return this.strategies.find((strategy) => {
+            return strategy instanceof type;
+        });
+    }
+    /**
+     * Activate strategies of a given type
+     * @param type Entity store strategy class
+     */
+    activateStrategyOfType(type) {
+        const strategy = this.getStrategyOfType(type);
+        if (strategy !== undefined) {
+            strategy.activate();
+        }
+    }
+    /**
+     * Deactivate strategies of a given type
+     * @param type Entity store strategy class
+     */
+    deactivateStrategyOfType(type) {
+        const strategy = this.getStrategyOfType(type);
+        if (strategy !== undefined) {
+            strategy.deactivate();
+        }
+    }
+    /**
+     * Delete an entity from the store
+     * @param entity Entity
+     */
+    delete(entity) {
+        this.deleteMany([entity]);
+    }
+    /**
+     * Delete many entities from the store
+     * @param entities Entities
+     */
+    deleteMany(entities) {
+        entities.forEach((entity) => this.index.delete(this.getKey(entity)));
+        this._pristine = false;
+        this.next();
+    }
+    /**
+     * Generate a complete index of all the entities
+     * @param entities Entities
+     * @returns Index
+     */
+    generateIndex(entities) {
+        const entries = entities.map((entity) => [this.getKey(entity), entity]);
+        return new Map(entries);
+    }
+    /**
+     * Push the index's entities into the entities$ observable
+     */
+    next() {
+        this.entities$.next(Array.from(this.index.values()));
+        this.updateCount();
+    }
+    /**
+     * Update the store's count and empty
+     */
+    updateCount() {
+        const count = this.index.size;
+        const empty = count === 0;
+        this.count$.next(count);
+        this.empty$.next(empty);
+    }
+    /**
+     * Create the entity state manager
+     * @returns EntityStateManager
+     */
+    createStateManager() {
+        return new EntityStateManager({
+            getKey: this.getKey,
+            index: this.index
+        });
+    }
+    /**
+     * Create the data view
+     * @returns EntityView<E>
+     */
+    createDataView() {
+        return new EntityView(this.entities$);
+    }
+    /**
+     * Create the state view
+     * @returns EntityView<EntityRecord<E>>
+     */
+    createStateView() {
+        return new EntityView(this.view.all$())
+            .join({
+            source: this.state.change$,
+            reduce: (entity) => {
+                const key = this.getKey(entity);
+                const state = this.state.get(entity);
+                const currentRecord = this.stateView.get(key);
+                if (currentRecord !== undefined &&
+                    currentRecord.entity === entity &&
+                    this.statesAreTheSame(currentRecord.state, state)) {
+                    return currentRecord;
+                }
+                const revision = currentRecord ? currentRecord.revision + 1 : 1;
+                const ref = `${key}-${revision}`;
+                return { entity, state, revision, ref };
+            }
+        })
+            .createIndex((record) => this.getKey(record.entity));
+    }
+    statesAreTheSame(currentState, newState) {
+        if (currentState === newState) {
+            return true;
+        }
+        const currentStateIsEmpty = Object.keys(currentState).length === 0;
+        const newStateIsEmpty = Object.keys(newState).length === 0;
+        return currentStateIsEmpty && newStateIsEmpty;
+    }
+}
+
+/**
+ * This class is used to synchronize a component's changes
+ * detection with an EntityStore changes. For example, it is frequent
+ * to have a component subscribe to a store's selected entity and, at the same time,
+ * this component provides a way to select an entity with, let's say, a click.
+ *
+ * This class automatically handles those case and triggers the compoent's
+ * change detection when needed.
+ *
+ * Note: If the component observes the store's stateView, a workspace is
+ * probably not required because the stateView catches any changes to the
+ * entities and their state.
+ */
+class EntityStoreWatcher {
+    /**
+     * Component change detector
+     */
+    cdRef;
+    /**
+     * Entity store
+     */
+    store;
+    /**
+     * Component inner state
+     */
+    innerStateIndex = new Map();
+    /**
+     * Subscription to the store's entities
+     */
+    entities$$;
+    /**
+     * Subscription to the store's state
+     */
+    state$$;
+    constructor(store, cdRef) {
+        this.setChangeDetector(cdRef);
+        this.setStore(store);
+    }
+    destroy() {
+        this.setChangeDetector(undefined);
+        this.setStore(undefined);
+    }
+    /**
+     * Bind this workspace to a store and start watching for changes
+     * @param store Entity store
+     */
+    setStore(store) {
+        if (store === undefined) {
+            this.teardownObservers();
+            this.innerStateIndex.clear();
+            this.store = undefined;
+            return;
+        }
+        this.setStore(undefined);
+        this.store = store;
+        this.setupObservers();
+        this.detectChanges();
+    }
+    /**
+     * Bind this workspace to a component's change detector
+     * @param cdRef Change detector
+     */
+    setChangeDetector(cdRef) {
+        this.cdRef = cdRef;
+    }
+    /**
+     * Set up observers on a store's entities and their state
+     * @param store Entity store
+     */
+    setupObservers() {
+        this.teardownObservers();
+        this.entities$$ = this.store.entities$.subscribe((entities) => this.onEntitiesChange(entities));
+        this.state$$ = this.store.state.change$
+            .pipe(skip(1))
+            .subscribe(() => this.onStateChange());
+    }
+    /**
+     * Teardown store observers
+     */
+    teardownObservers() {
+        if (this.entities$$ !== undefined) {
+            this.entities$$.unsubscribe();
+        }
+        if (this.state$$ !== undefined) {
+            this.state$$.unsubscribe();
+        }
+        this.entities$$ = undefined;
+        this.state$$ = undefined;
+    }
+    /**
+     * When the entities change, always trigger the changes detection
+     */
+    onEntitiesChange(entities) {
+        this.detectChanges();
+    }
+    /**
+     * When the entities state change, trigger the change detection
+     * only if the component has not handled these changes yet. For example,
+     * the component might have initiated thoses changes itself.
+     */
+    onStateChange() {
+        let changesDetected = false;
+        const storeIndex = this.store.state.index;
+        const innerIndex = this.innerStateIndex;
+        if (storeIndex.size !== innerIndex.size) {
+            changesDetected = this.detectChanges();
+        }
+        const storeKeys = Array.from(storeIndex.keys());
+        for (const key of storeKeys) {
+            const storeValue = storeIndex.get(key);
+            const innerValue = innerIndex.get(key);
+            if (changesDetected === false) {
+                if (innerValue === undefined) {
+                    changesDetected = this.detectChanges();
+                }
+                else if (!ObjectUtils.objectsAreEquivalent(storeValue, innerValue)) {
+                    changesDetected = this.detectChanges();
+                }
+            }
+            this.innerStateIndex.set(key, Object.assign({}, storeValue));
+        }
+    }
+    /**
+     * Trigger the change detection of the workspace is bound to a change detector
+     */
+    detectChanges() {
+        if (this.cdRef !== undefined) {
+            this.cdRef.detectChanges();
+        }
+        return true;
+    }
+}
+
+/**
+ * This class holds a reference to the insert, update and delete
+ * operations performed on a store. This is useful to commit
+ * these operations in a single pass or to cancel them.
+ */
+class EntityTransaction {
+    /**
+     * Store holding the operations on another store
+     */
+    operations;
+    /**
+     * Method to get an entity's id
+     */
+    getKey;
+    /**
+     * Whether there are pending operations
+     */
+    get empty$() {
+        return this.operations.empty$;
+    }
+    /**
+     * Whether there are pending operations
+     */
+    get empty() {
+        return this.empty$.value;
+    }
+    /**
+     * Whether thise store is in commit phase
+     */
+    get inCommitPhase() {
+        return this.inCommitPhase$.value;
+    }
+    inCommitPhase$ = new BehaviorSubject(false);
+    constructor(options = {}) {
+        this.getKey = options.getKey ? options.getKey : getEntityId;
+        this.operations = new EntityStore([], {
+            getKey: (operation) => operation.key
+        });
+    }
+    destroy() {
+        this.operations.destroy();
+    }
+    /**
+     * Insert an entity into a store. If no store is specified, an insert
+     * operation is still created but the transaction won't add the new
+     * entity to the store.
+     * @param current The entity to insert
+     * @param store Optional: The store to insert the entity into
+     * @param meta Optional: Any metadata on the operation
+     */
+    insert(current, store, meta) {
+        const existingOperation = this.getOperationByEntity(current);
+        if (existingOperation !== undefined) {
+            this.removeOperation(existingOperation);
+        }
+        this.doInsert(current, store, meta);
+    }
+    /**
+     * Update an entity in a store. If no store is specified, an update
+     * operation is still created but the transaction won't update the
+     * entity into the store.
+     * @param previous The entity before update
+     * @param current The entity after update
+     * @param store Optional: The store to update the entity into
+     * @param meta Optional: Any metadata on the operation
+     */
+    update(previous, current, store, meta) {
+        const existingOperation = this.getOperationByEntity(current);
+        if (existingOperation !== undefined) {
+            this.removeOperation(existingOperation);
+            if (existingOperation.type === EntityOperationType.Insert) {
+                this.doInsert(current, store, meta);
+                return;
+            }
+            else if (existingOperation.type === EntityOperationType.Update) {
+                previous = existingOperation.previous;
+            }
+        }
+        this.doUpdate(previous, current, store, meta);
+    }
+    /**
+     * Delete an entity from a store. If no store is specified, a delete
+     * operation is still created but the transaction won't remove the
+     * entity from the store.
+     * @param previous The entity before delete
+     * @param store Optional: The store to delete the entity from
+     * @param meta Optional: Any metadata on the operation
+     */
+    delete(previous, store, meta) {
+        const existingOperation = this.getOperationByEntity(previous);
+        if (existingOperation !== undefined) {
+            this.removeOperation(existingOperation);
+            if (existingOperation.type === EntityOperationType.Insert) {
+                if (store !== undefined) {
+                    store.delete(previous);
+                }
+                return;
+            }
+        }
+        this.doDelete(previous, store, meta);
+    }
+    /**
+     * Commit operations the transaction. This method doesn't do much
+     * in itself. The handler it receives does the hard work and it's
+     * implementation is left to the caller. This method simply wraps
+     * the handler into an error catching mechanism to update
+     * the transaction afterward. The caller needs to subscribe to this
+     * method's output (observable) for the commit to be performed.
+     * @param operations Operations to commit
+     * @param handler Function that handles the commit operation
+     * @returns The handler output (observable)
+     */
+    commit(operations, handler) {
+        this.inCommitPhase$.next(true);
+        return handler(this, operations).pipe(catchError(() => of(new Error())), tap((result) => {
+            if (result instanceof Error) {
+                this.onCommitError(operations);
+            }
+            else {
+                this.onCommitSuccess(operations);
+            }
+        }));
+    }
+    /**
+     * Commit all the operations of the transaction.
+     * @param handler Function that handles the commit operation
+     * @returns The handler output (observable)
+     */
+    commitAll(handler) {
+        const operations = this.getOperationsInCommit();
+        return this.commit(operations, handler);
+    }
+    /**
+     * Rollback this transaction
+     */
+    rollback() {
+        this.rollbackOperations(this.operations.all());
+    }
+    /**
+     * Rollback specific operations
+     */
+    rollbackOperations(operations) {
+        this.checkInCommitPhase();
+        const operationsFactory = () => new Map([
+            [EntityOperationType.Delete, []],
+            [EntityOperationType.Update, []],
+            [EntityOperationType.Insert, []]
+        ]);
+        const storesOperations = new Map();
+        // Group operations by store and by operation type.
+        // Grouping operations allows us to revert them in bacth, thus, triggering
+        // observables only one per operation type.
+        for (const operation of operations) {
+            const store = operation.store;
+            if (operation.store === undefined) {
+                continue;
+            }
+            let storeOperations = storesOperations.get(store);
+            if (storeOperations === undefined) {
+                storeOperations = operationsFactory();
+                storesOperations.set(store, storeOperations);
+            }
+            storeOperations.get(operation.type).push(operation);
+        }
+        Array.from(storesOperations.keys()).forEach((store) => {
+            const storeOperations = storesOperations.get(store);
+            const deletes = storeOperations.get(EntityOperationType.Delete);
+            store.insertMany(deletes.map((_delete) => _delete.previous));
+            const updates = storeOperations.get(EntityOperationType.Update);
+            store.updateMany(updates.map((_update) => _update.previous));
+            const inserts = storeOperations.get(EntityOperationType.Insert);
+            store.deleteMany(inserts.map((_insert) => _insert.current));
+        });
+        this.operations.deleteMany(operations);
+        this.inCommitPhase$.next(false);
+    }
+    /**
+     * Clear this transaction
+     * @todo Raise event and synchronize stores?
+     */
+    clear() {
+        this.operations.clear();
+        this.inCommitPhase$.next(false);
+    }
+    /**
+     * Get any existing operation on an entity
+     * @param entity Entity
+     * @returns Either an insert, update or delete operation
+     */
+    getOperationByEntity(entity) {
+        return this.operations.get(this.getKey(entity));
+    }
+    /**
+     * Merge another transaction in this one
+     * @param transaction Another transaction
+     */
+    mergeTransaction(transaction) {
+        this.checkInCommitPhase();
+        const operations = transaction.operations.all();
+        operations.forEach((operation) => {
+            this.addOperation(operation);
+        });
+    }
+    /**
+     * Create an insert operation and add an entity to the store
+     * @param current The entity to insert
+     * @param store Optional: The store to insert the entity into
+     * @param meta Optional: Any metadata on the operation
+     */
+    doInsert(current, store, meta) {
+        this.addOperation({
+            key: this.getKey(current),
+            type: EntityOperationType.Insert,
+            previous: undefined,
+            current,
+            store,
+            meta
+        });
+        if (store !== undefined) {
+            store.insert(current);
+        }
+    }
+    /**
+     * Create an update operation and update an entity into the store
+     * @param previous The entity before update
+     * @param current The entity after update
+     * @param store Optional: The store to update the entity into
+     * @param meta Optional: Any metadata on the operation
+     */
+    doUpdate(previous, current, store, meta) {
+        this.addOperation({
+            key: this.getKey(current),
+            type: EntityOperationType.Update,
+            previous,
+            current,
+            store,
+            meta
+        });
+        if (store !== undefined) {
+            store.update(current);
+        }
+    }
+    /**
+     * Create a delete operation and delete an entity from the store
+     * @param previous The entity before delete
+     * @param store Optional: The store to delete the entity from
+     * @param meta Optional: Any metadata on the operation
+     */
+    doDelete(previous, store, meta) {
+        this.addOperation({
+            key: this.getKey(previous),
+            type: EntityOperationType.Delete,
+            previous,
+            current: undefined,
+            store,
+            meta
+        });
+        if (store !== undefined) {
+            store.delete(previous);
+        }
+    }
+    /**
+     * Remove committed operations from store
+     * @param operations Commited operations
+     * @todo Raise event and synchronize stores?
+     */
+    resolveOperations(operations) {
+        this.operations.deleteMany(operations);
+    }
+    /**
+     * On commit success, resolve commited operations and exit commit phase
+     * @param operations Commited operations
+     */
+    onCommitSuccess(operations) {
+        this.resolveOperations(operations);
+        this.inCommitPhase$.next(false);
+    }
+    /**
+     * On commit error, abort transaction
+     * @param operations Commited operations
+     */
+    onCommitError(operations) {
+        this.inCommitPhase$.next(false);
+    }
+    /**
+     * Add an operation to the operations store
+     * @param operation Operation to add
+     */
+    addOperation(operation) {
+        this.checkInCommitPhase();
+        this.operations.insert(operation);
+        this.operations.state.update(operation, { added: true });
+    }
+    /**
+     * Remove an operation from the operations store
+     * @param operation Operation to remove
+     */
+    removeOperation(operation) {
+        this.checkInCommitPhase();
+        this.operations.delete(operation);
+        this.operations.state.update(operation, { added: false });
+    }
+    /**
+     * Get all the operations to commit
+     * @returns Operations to commit
+     */
+    getOperationsInCommit() {
+        return this.operations.stateView
+            .manyBy((value) => {
+            return value.state.added === true;
+        })
+            .map((value) => value.entity);
+    }
+    /**
+     * Check if the transaction is in the commit phase and throw an error if it is
+     */
+    checkInCommitPhase() {
+        if (this.inCommitPhase === true) {
+            throw new Error('This transaction is in the commit phase. Cannot complete this operation.');
+        }
+    }
+}
+
+/**
+ * Entity store strategies. They can do pretty much anything during a store's
+ * lifetime. For example, they may act as triggers when something happens.
+ * Sharing a strategy is a good idea when multiple strategies would have
+ * on cancelling effect on each other.
+ *
+ * At creation, strategy is inactive and needs to be manually activated.
+ */
+class EntityStoreStrategy {
+    options;
+    /**
+     * Feature store
+     * @internal
+     */
+    stores = [];
+    /**
+     * Whether this strategy is active
+     * @internal
+     */
+    get active() {
+        return this.active$.value;
+    }
+    active$ = new BehaviorSubject(false);
+    constructor(options = {}) {
+        this.options = options;
+        this.options = options;
+    }
+    /**
+     * Activate the strategy. If it's already active, it'll be deactivated
+     * and activated again.
+     */
+    activate() {
+        if (this.active === true) {
+            this.doDeactivate();
+        }
+        this.active$.next(true);
+        this.doActivate();
+    }
+    /**
+     * Activate the strategy. If it's already active, it'll be deactivated
+     * and activated again.
+     */
+    deactivate() {
+        this.active$.next(false);
+        this.doDeactivate();
+    }
+    /**
+     * Bind this strategy to a store
+     * @param store Feature store
+     */
+    bindStore(store) {
+        if (this.stores.indexOf(store) < 0) {
+            this.stores.push(store);
+        }
+    }
+    /**
+     * Unbind this strategy from store
+     * @param store Feature store
+     */
+    unbindStore(store) {
+        const index = this.stores.indexOf(store);
+        if (index >= 0) {
+            this.stores.splice(index, 1);
+        }
+    }
+    /**
+     * Do the stataegy activation
+     * @internal
+     */
+    doActivate() { }
+    /**
+     * Do the strategy deactivation
+     * @internal
+     */
+    doDeactivate() { }
+}
+
+/**
+ * When active, this strategy filters a store's stateView to return
+ * selected entities only.
+ */
+class EntityStoreFilterCustomFuncStrategy extends EntityStoreStrategy {
+    options;
+    constructor(options) {
+        super(options);
+        this.options = options;
+    }
+    /**
+     * Store / filter ids map
+     */
+    filters = new Map();
+    /**
+     * Bind this strategy to a store and start filtering it
+     * @param store Entity store
+     */
+    bindStore(store) {
+        super.bindStore(store);
+        if (this.active === true) {
+            this.filterStore(store);
+        }
+    }
+    /**
+     * Unbind this strategy from a store and stop filtering it
+     * @param store Entity store
+     */
+    unbindStore(store) {
+        super.unbindStore(store);
+        if (this.active === true) {
+            this.unfilterStore(store);
+        }
+    }
+    /**
+     * Start filtering all stores
+     * @internal
+     */
+    doActivate() {
+        this.filterAll();
+    }
+    /**
+     * Stop filtering all stores
+     * @internal
+     */
+    doDeactivate() {
+        this.unfilterAll();
+    }
+    /**
+     * Filter all stores
+     */
+    filterAll() {
+        this.stores.forEach((store) => this.filterStore(store));
+    }
+    /**
+     * Unfilter all stores
+     */
+    unfilterAll() {
+        this.stores.forEach((store) => this.unfilterStore(store));
+    }
+    /**
+     * Filter a store and add it to the filters map
+     */
+    filterStore(store) {
+        this.filters.set(store, store.stateView.addFilter(this.options.filterClauseFunc));
+    }
+    /**
+     * Unfilter a store and delete it from the filters map
+     */
+    unfilterStore(store) {
+        const filterId = this.filters.get(store);
+        if (filterId === undefined) {
+            return;
+        }
+        store.stateView.removeFilter(filterId);
+        this.filters.delete(store);
+    }
+}
+
+/**
+ * When active, this strategy filters a store's stateView to return
+ * selected entities only.
+ */
+class EntityStoreFilterSelectionStrategy extends EntityStoreStrategy {
+    /**
+     * Store / filter ids map
+     */
+    filters = new Map();
+    /**
+     * Bind this strategy to a store and start filtering it
+     * @param store Entity store
+     */
+    bindStore(store) {
+        super.bindStore(store);
+        if (this.active === true) {
+            this.filterStore(store);
+        }
+    }
+    /**
+     * Unbind this strategy from a store and stop filtering it
+     * @param store Entity store
+     */
+    unbindStore(store) {
+        super.unbindStore(store);
+        if (this.active === true) {
+            this.unfilterStore(store);
+        }
+    }
+    /**
+     * Start filtering all stores
+     * @internal
+     */
+    doActivate() {
+        this.filterAll();
+    }
+    /**
+     * Stop filtering all stores
+     * @internal
+     */
+    doDeactivate() {
+        this.unfilterAll();
+    }
+    /**
+     * Filter all stores
+     */
+    filterAll() {
+        this.stores.forEach((store) => this.filterStore(store));
+    }
+    /**
+     * Unfilter all stores
+     */
+    unfilterAll() {
+        this.stores.forEach((store) => this.unfilterStore(store));
+    }
+    /**
+     * Filter a store and add it to the filters map
+     */
+    filterStore(store) {
+        if (this.filters.has(store)) {
+            return;
+        }
+        const filter = (record) => {
+            return record.state.selected === true;
+        };
+        this.filters.set(store, store.stateView.addFilter(filter));
+    }
+    /**
+     * Unfilter a store and delete it from the filters map
+     */
+    unfilterStore(store) {
+        const filterId = this.filters.get(store);
+        if (filterId === undefined) {
+            return;
+        }
+        store.stateView.removeFilter(filterId);
+        this.filters.delete(store);
+    }
+}
+
+class EntitySelectorComponent {
+    cdRef;
+    /**
+     * The selected entity
+     * @internal
+     */
+    selected$ = new BehaviorSubject(undefined);
+    /**
+     * The current multi select option text
+     * @internal
+     */
+    multiText$ = new BehaviorSubject(undefined);
+    multiSelectValue = { id: 'IGO_MULTI_SELECT' };
+    emptyValue = { id: 'IGO_EMPTY_SELECT' };
+    /**
+     * Subscription to the selected entity
+     */
+    selected$$;
+    /**
+     * Store watcher
+     */
+    watcher;
+    /**
+     * Entity store
+     */
+    store;
+    /**
+     * Title accessor
+     */
+    titleAccessor = getEntityTitle;
+    /**
+     * Text to display when nothing is selected
+     */
+    emptyText = undefined;
+    /**
+     * Wheter selecting many entities is allowed
+     */
+    multi = false;
+    /**
+     * Text to display for the select all option
+     */
+    multiAllText = 'All';
+    /**
+     * Text to display for the select none option
+     */
+    multiNoneText = 'None';
+    /**
+     * Field placeholder
+     */
+    placeholder;
+    /**
+     * Wheter the selector is disabled or not
+     */
+    disabled = false;
+    /**
+     * Event emitted when the selection changes
+     */
+    selectedChange = new EventEmitter();
+    constructor(cdRef) {
+        this.cdRef = cdRef;
+    }
+    /**
+     * Create a store watcher and subscribe to the selected entity
+     * @internal
+     */
+    ngOnInit() {
+        this.watcher = new EntityStoreWatcher(this.store, this.cdRef);
+        this.selected$$ = this.store.stateView
+            .manyBy$((record) => record.state.selected === true)
+            .subscribe((records) => {
+            const entities = records.map((record) => record.entity);
+            this.onSelectFromStore(entities);
+        });
+    }
+    /**
+     * Unsubscribe to the selected entity and destroy the store watcher
+     * @internal
+     */
+    ngOnDestroy() {
+        this.watcher.destroy();
+        this.selected$$.unsubscribe();
+    }
+    /**
+     * On selection change, update the store's state and emit an event
+     * @internal
+     */
+    onSelectionChange(event) {
+        const values = event.value instanceof Array ? event.value : [event.value];
+        const multiSelect = values.find((_value) => _value === this.multiSelectValue);
+        let entities = values.filter((_value) => _value !== this.multiSelectValue);
+        if (multiSelect !== undefined) {
+            if (entities.length === this.store.count) {
+                entities = [];
+            }
+            else if (entities.length < this.store.count) {
+                entities = this.store.all();
+            }
+        }
+        entities = entities.filter((entity) => entity !== this.emptyValue);
+        if (entities.length === 0) {
+            this.store.state.updateAll({ selected: false });
+        }
+        else {
+            this.store.state.updateMany(entities, { selected: true }, true);
+        }
+        const value = this.multi ? entities : event.value;
+        this.selectedChange.emit({ selected: true, value });
+    }
+    onSelectFromStore(entities) {
+        if (this.multi === true) {
+            this.selected$.next(entities);
+        }
+        else {
+            const entity = entities.length > 0 ? entities[0] : undefined;
+            this.selected$.next(entity);
+        }
+        this.updateMultiToggleWithEntities(entities);
+    }
+    updateMultiToggleWithEntities(entities) {
+        if (entities.length === this.store.count &&
+            this.multiText$.value !== this.multiNoneText) {
+            this.multiText$.next(this.multiNoneText);
+        }
+        else if (entities.length < this.store.count &&
+            this.multiText$.value !== this.multiAllText) {
+            this.multiText$.next(this.multiAllText);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: EntitySelectorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: EntitySelectorComponent, isStandalone: true, selector: "igo-entity-selector", inputs: { store: "store", titleAccessor: "titleAccessor", emptyText: "emptyText", multi: "multi", multiAllText: "multiAllText", multiNoneText: "multiNoneText", placeholder: "placeholder", disabled: "disabled" }, outputs: { selectedChange: "selectedChange" }, ngImport: i0, template: "<mat-form-field class=\"igo-entity-selector\" subscriptSizing=\"dynamic\">\n  <mat-select\n    [disabled]=\"disabled\"\n    [value]=\"selected$ | async\"\n    [multiple]=\"multi\"\n    [placeholder]=\"placeholder\"\n    (selectionChange)=\"onSelectionChange($event)\"\n  >\n    <mat-option\n      *ngIf=\"emptyText !== undefined && multi === false\"\n      [value]=\"emptyValue\"\n      >{{ emptyText }}</mat-option\n    >\n    <mat-option *ngIf=\"multi === true\" [value]=\"multiSelectValue\">{{\n      multiText$ | async\n    }}</mat-option>\n    <ng-template ngFor let-record [ngForOf]=\"store.stateView.all$() | async\">\n      <mat-option [value]=\"record.entity\">\n        {{ titleAccessor(record.entity) }}\n      </mat-option>\n    </ng-template>\n  </mat-select>\n</mat-form-field>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: EntitySelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'igo-entity-selector', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        MatFormFieldModule,
+                        MatSelectModule,
+                        NgIf,
+                        MatOptionModule,
+                        NgFor,
+                        AsyncPipe
+                    ], template: "<mat-form-field class=\"igo-entity-selector\" subscriptSizing=\"dynamic\">\n  <mat-select\n    [disabled]=\"disabled\"\n    [value]=\"selected$ | async\"\n    [multiple]=\"multi\"\n    [placeholder]=\"placeholder\"\n    (selectionChange)=\"onSelectionChange($event)\"\n  >\n    <mat-option\n      *ngIf=\"emptyText !== undefined && multi === false\"\n      [value]=\"emptyValue\"\n      >{{ emptyText }}</mat-option\n    >\n    <mat-option *ngIf=\"multi === true\" [value]=\"multiSelectValue\">{{\n      multiText$ | async\n    }}</mat-option>\n    <ng-template ngFor let-record [ngForOf]=\"store.stateView.all$() | async\">\n      <mat-option [value]=\"record.entity\">\n        {{ titleAccessor(record.entity) }}\n      </mat-option>\n    </ng-template>\n  </mat-select>\n</mat-form-field>\n", styles: ["mat-form-field{width:100%}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { store: [{
+                type: Input
+            }], titleAccessor: [{
+                type: Input
+            }], emptyText: [{
+                type: Input
+            }], multi: [{
+                type: Input
+            }], multiAllText: [{
+                type: Input
+            }], multiNoneText: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], selectedChange: [{
+                type: Output
+            }] } });
+
+/**
+ * @deprecated import the EntitySelectorComponent directly
+ */
+class IgoEntitySelectorModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: IgoEntitySelectorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: IgoEntitySelectorModule, imports: [EntitySelectorComponent], exports: [EntitySelectorComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: IgoEntitySelectorModule, imports: [EntitySelectorComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: IgoEntitySelectorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [EntitySelectorComponent],
+                    exports: [EntitySelectorComponent]
+                }]
+        }] });
+
+class EntityTablePaginatorComponent {
+    languageService;
+    mediaService;
+    disabled = false;
+    hidePageSize = false;
+    pageIndex = 0;
+    pageSize = 50;
+    pageSizeOptions = [5, 10, 20, 50, 100, 200];
+    showFirstLastButtons = true;
+    count$$;
+    entitySortChange$$;
+    paginationLabelTranslation$$ = [];
+    entitySortChange$ = new BehaviorSubject(false);
+    /**
+     * Entity store
+     */
+    store;
+    /**
+     * Paginator options
+     */
+    paginatorOptions;
+    /**
+     * Event emitted when the paginator changes the page size or page index.
+     */
+    page;
+    length = 0;
+    /**
+     * Paginator emitted.
+     */
+    paginatorChange = new EventEmitter();
+    constructor(languageService, mediaService) {
+        this.languageService = languageService;
+        this.mediaService = mediaService;
+    }
+    paginator;
+    ngOnChanges() {
+        this.unsubscribeAll();
+        this.count$$ = this.store.stateView.count$.subscribe((count) => {
+            this.length = count;
+            this.emitPaginator();
+        });
+        this.entitySortChange$$ = this.entitySortChange$.subscribe(() => {
+            if (this.paginator) {
+                this.paginator.firstPage();
+            }
+        });
+        this.initPaginatorOptions();
+        this.translateLabels();
+    }
+    initPaginatorOptions() {
+        this.disabled = this.paginatorOptions?.disabled || this.disabled;
+        this.pageIndex = this.paginatorOptions?.pageIndex || this.pageIndex;
+        this.pageSize = this.paginatorOptions?.pageSize || this.pageSize;
+        this.pageSizeOptions =
+            this.paginatorOptions?.pageSizeOptions || this.pageSizeOptions;
+        if (this.mediaService.isMobile()) {
+            this.showFirstLastButtons = false;
+            this.hidePageSize = true;
+        }
+        else {
+            this.showFirstLastButtons =
+                this.paginatorOptions?.showFirstLastButtons ||
+                    this.showFirstLastButtons;
+            this.hidePageSize =
+                this.paginatorOptions?.hidePageSize || this.hidePageSize;
+        }
+    }
+    translateLabels() {
+        this.paginationLabelTranslation$$.push(this.languageService.translate
+            .get('igo.common.paginator.firstPageLabel')
+            .subscribe((label) => {
+            this.paginator._intl.firstPageLabel = label;
+        }));
+        this.paginator._intl.getRangeLabel = this.rangeLabel;
+        this.paginationLabelTranslation$$.push(this.languageService.translate
+            .get('igo.common.paginator.itemsPerPageLabel')
+            .subscribe((label) => {
+            this.paginator._intl.itemsPerPageLabel = label;
+        }));
+        this.paginationLabelTranslation$$.push(this.languageService.translate
+            .get('igo.common.paginator.lastPageLabel')
+            .subscribe((label) => {
+            this.paginator._intl.lastPageLabel = label;
+        }));
+        this.paginationLabelTranslation$$.push(this.languageService.translate
+            .get('igo.common.paginator.nextPageLabel')
+            .subscribe((label) => {
+            this.paginator._intl.nextPageLabel = label;
+        }));
+        this.paginationLabelTranslation$$.push(this.languageService.translate
+            .get('igo.common.paginator.previousPageLabel')
+            .subscribe((label) => {
+            this.paginator._intl.previousPageLabel = label;
+        }));
+    }
+    rangeLabel = (page, pageSize, length) => {
+        const of = new BehaviorSubject('');
+        this.paginationLabelTranslation$$.push(this.languageService.translate
+            .get('igo.common.paginator.of')
+            .subscribe((label) => {
+            of.next(label);
+        }));
+        if (length === 0 || pageSize === 0) {
+            return `0 ${of.value} ${length}`;
+        }
+        length = Math.max(length, 0);
+        const startIndex = page * pageSize;
+        const endIndex = startIndex < length
+            ? Math.min(startIndex + pageSize, length)
+            : startIndex + pageSize;
+        return `${startIndex + 1} - ${endIndex} ${of.value} ${length}`;
+    };
+    unsubscribeAll() {
+        this.paginationLabelTranslation$$.map((sub) => sub.unsubscribe());
+        if (this.count$$) {
+            this.count$$.unsubscribe();
+        }
+        if (this.entitySortChange$$) {
+            this.entitySortChange$$.unsubscribe();
+        }
+    }
+    ngOnDestroy() {
+        this.unsubscribeAll();
+    }
+    emitPaginator() {
+        this.paginatorChange.emit(this.paginator);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: EntityTablePaginatorComponent, deps: [{ token: i1$1.LanguageService }, { token: i2$1.MediaService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: EntityTablePaginatorComponent, isStandalone: true, selector: "igo-entity-table-paginator", inputs: { entitySortChange$: "entitySortChange$", store: "store", paginatorOptions: "paginatorOptions" }, outputs: { page: "page", paginatorChange: "paginatorChange" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<mat-paginator\n  [disabled]=\"disabled\"\n  [hidePageSize]=\"hidePageSize\"\n  [length]=\"length\"\n  [pageIndex]=\"pageIndex\"\n  [pageSize]=\"pageSize\"\n  [pageSizeOptions]=\"pageSizeOptions\"\n  [showFirstLastButtons]=\"showFirstLastButtons\"\n  (page)=\"emitPaginator()\"\n>\n</mat-paginator>\n", styles: [":host ::ng-deep .mat-mdc-paginator-container{min-height:unset}\n"], dependencies: [{ kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i3$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: EntityTablePaginatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'igo-entity-table-paginator', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatPaginatorModule], template: "<mat-paginator\n  [disabled]=\"disabled\"\n  [hidePageSize]=\"hidePageSize\"\n  [length]=\"length\"\n  [pageIndex]=\"pageIndex\"\n  [pageSize]=\"pageSize\"\n  [pageSizeOptions]=\"pageSizeOptions\"\n  [showFirstLastButtons]=\"showFirstLastButtons\"\n  (page)=\"emitPaginator()\"\n>\n</mat-paginator>\n", styles: [":host ::ng-deep .mat-mdc-paginator-container{min-height:unset}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.LanguageService }, { type: i2$1.MediaService }], propDecorators: { entitySortChange$: [{
+                type: Input
+            }], store: [{
+                type: Input
+            }], paginatorOptions: [{
+                type: Input
+            }], page: [{
+                type: Output
+            }], paginatorChange: [{
+                type: Output
+            }], paginator: [{
+                type: ViewChild,
+                args: [MatPaginator, { static: true }]
+            }] } });
+
+/**
+ * Directive that handles an entity table row click and selection.
+ */
+class EntityTableRowDirective {
+    renderer;
+    el;
+    /**
+     * Class added to a selected row
+     */
+    static selectedCls = 'igo-entity-table-row-selected';
+    /**
+     * Class added to a highlighted row
+     */
+    static highlightedCls = 'igo-entity-table-row-highlighted';
+    /**
+     * Whether a row supports selection
+     */
+    selection = false;
+    /**
+     * Whether clicking a row should select it (if selection is true)
+     */
+    selectOnClick = true;
+    /**
+     * Whether the selected row should be highlighted
+     */
+    highlightSelection = true;
+    /**
+     * Whether a row is selected
+     */
+    set selected(value) {
+        if (this.selection === false) {
+            return;
+        }
+        if (value === this._selected) {
+            return;
+        }
+        this.toggleSelected(value);
+        this.scroll();
+    }
+    get selected() {
+        return this._selected;
+    }
+    _selected = false;
+    /**
+     * Scroll behavior on selection
+     */
+    scrollBehavior = EntityTableScrollBehavior.Auto;
+    /**
+     * Event emitted when a row is selected
+     */
+    select = new EventEmitter();
+    /**
+     * When a row is clicked, select it if it's supported
+     * @ignore
+     */
+    onClick() {
+        if (this.selection === false || this.selectOnClick === false) {
+            return;
+        }
+        this.toggleSelected(true);
+        this.select.emit(this);
+    }
+    constructor(renderer, el) {
+        this.renderer = renderer;
+        this.el = el;
+    }
+    /**
+     * Select a row and add or remove the selected class from it
+     * @param selected Whether the row should be selected
+     */
+    toggleSelected(selected) {
+        this._selected = selected;
+        if (selected === true) {
+            this.addCls(EntityTableRowDirective.selectedCls);
+            if (this.highlightSelection === true) {
+                this.addCls(EntityTableRowDirective.highlightedCls);
+            }
+        }
+        else {
+            this.removeCls(EntityTableRowDirective.selectedCls);
+            this.removeCls(EntityTableRowDirective.highlightedCls);
+        }
+    }
+    /**
+     * Scroll to the selected row
+     */
+    scroll() {
+        if (this._selected === true) {
+            scrollIntoView(this.el.nativeElement, {
+                scrollMode: 'if-needed',
+                behavior: 'smooth',
+                block: 'end',
+                inline: 'nearest'
+            });
+        }
+    }
+    /**
+     * Add the selected CSS class
+     */
+    addCls(cls) {
+        this.renderer.addClass(this.el.nativeElement, cls);
+    }
+    /**
+     * Remove the selected CSS class
+     */
+    removeCls(cls) {
+        this.renderer.removeClass(this.el.nativeElement, cls);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: EntityTableRowDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: EntityTableRowDirective, isStandalone: true, selector: "[igoEntityTableRow]", inputs: { selection: "selection", selectOnClick: "selectOnClick", highlightSelection: "highlightSelection", selected: "selected", scrollBehavior: "scrollBehavior" }, outputs: { select: "select" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: EntityTableRowDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[igoEntityTableRow]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { selection: [{
+                type: Input
+            }], selectOnClick: [{
+                type: Input
+            }], highlightSelection: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], scrollBehavior: [{
+                type: Input
+            }], select: [{
+                type: Output
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class EntityTableComponent {
+    cdRef;
+    formBuilder;
+    _focusMonitor;
+    _elementRef;
+    ngControl;
+    _parentForm;
+    _controlName;
+    _defaultErrorStateMatcher;
+    dateAdapter;
+    entitySortChange$ = new BehaviorSubject(false);
+    formGroup = new UntypedFormGroup({});
+    filteredOptions = {};
+    /**
+     * Reference to the column renderer types
+     * @internal
+     */
+    entityTableColumnRenderer = EntityTableColumnRenderer;
+    /**
+     * Reference to the selection's state
+     * @internal
+     */
+    entityTableSelectionState = EntityTableSelectionState;
+    /**
+     * Observable of the selection,s state
+     * @internal
+     */
+    selectionState$ = new BehaviorSubject(undefined);
+    /**
+     * Subscription to the store's selection
+     */
+    selection$$;
+    /**
+     * Subscription to the dataSource
+     */
+    dataSource$$;
+    /**
+     * The last record checked. Useful for selecting
+     * multiple records by holding the shift key and checking
+     * checkboxes.
+     */
+    lastRecordCheckedKey;
+    /**
+     * Entity store
+     */
+    store;
+    /**
+     * Table paginator
+     */
+    set paginator(value) {
+        this._paginator = value;
+        this.dataSource.paginator = value;
+    }
+    get paginator() {
+        return this._paginator;
+    }
+    _paginator;
+    /**
+     * Table template
+     */
+    template;
+    /**
+     * Scroll behavior on selection
+     */
+    scrollBehavior = EntityTableScrollBehavior.Auto;
+    /**
+     * Whether nulls should be first when sorting
+     */
+    sortNullsFirst = false;
+    /**
+     * Show the table paginator or not. False by default.
+     */
+    withPaginator = false;
+    /**
+     * Paginator options
+     */
+    paginatorOptions;
+    /**
+     * Event emitted when an entity (row) is clicked
+     */
+    entityClick = new EventEmitter();
+    /**
+     * Event emitted when an entity (row) is selected
+     */
+    entitySelectChange = new EventEmitter();
+    /**
+     * Event emitted when the table sort is changed.
+     */
+    entitySortChange = new EventEmitter(undefined);
+    /**
+     * Table headers
+     * @internal
+     */
+    get headers() {
+        let columns = this.template.columns
+            .filter((column) => column.visible !== false)
+            .map((column) => column.name);
+        if (this.selectionCheckbox === true) {
+            columns = ['selectionCheckbox'].concat(columns);
+        }
+        return columns;
+    }
+    /**
+     * Data source consumable by the underlying material table
+     * @internal
+     */
+    dataSource = new MatTableDataSource();
+    /**
+     * Whether selection is supported
+     * @internal
+     */
+    get selection() {
+        return this.template.selection || false;
+    }
+    /**
+     * Whether a selection checkbox should be displayed
+     * @internal
+     */
+    get selectionCheckbox() {
+        return this.template.selectionCheckbox || false;
+    }
+    /**
+     * Whether selection many entities should eb supported
+     * @internal
+     */
+    get selectMany() {
+        return this.template.selectMany || false;
+    }
+    /**
+     * Whether selection many entities should eb supported
+     * @internal
+     */
+    get fixedHeader() {
+        return this.template.fixedHeader === undefined
+            ? true
+            : this.template.fixedHeader;
+    }
+    get tableHeight() {
+        return this.template.tableHeight ? this.template.tableHeight : 'auto';
+    }
+    constructor(cdRef, formBuilder, _focusMonitor, _elementRef, ngControl, _parentForm, _controlName, _defaultErrorStateMatcher, dateAdapter) {
+        this.cdRef = cdRef;
+        this.formBuilder = formBuilder;
+        this._focusMonitor = _focusMonitor;
+        this._elementRef = _elementRef;
+        this.ngControl = ngControl;
+        this._parentForm = _parentForm;
+        this._controlName = _controlName;
+        this._defaultErrorStateMatcher = _defaultErrorStateMatcher;
+        this.dateAdapter = dateAdapter;
+        this.dateAdapter.setLocale('fr-CA');
+    }
+    /**
+     * Track the selection state to properly display the selection checkboxes
+     * @internal
+     */
+    ngOnInit() {
+        this.handleDatasource();
+        this.dataSource.paginator = this.paginator;
+        this.store.state.change$.pipe(debounceTime(100)).subscribe(() => {
+            this.handleDatasource();
+            this.refresh();
+        });
+    }
+    /**
+     * @internal
+     */
+    ngOnChanges(changes) {
+        const store = changes.store;
+        if (store && store.currentValue !== store.previousValue) {
+            this.handleDatasource();
+        }
+    }
+    /**
+     * Process text or number value change (edition)
+     */
+    onValueChange(column, record, event) {
+        const key = this.getColumnKeyWithoutPropertiesTag(column);
+        record.entity.properties[key] = event.target.value;
+    }
+    /**
+     * Process boolean value change (edition)
+     */
+    onBooleanValueChange(column, record, event) {
+        const key = this.getColumnKeyWithoutPropertiesTag(column);
+        record.entity.properties[key] = event.checked;
+    }
+    /**
+     * Process select value change (edition)
+     */
+    onSelectValueChange(column, record, event) {
+        const key = this.getColumnKeyWithoutPropertiesTag(column);
+        record.entity.properties[key] = event.value;
+    }
+    /**
+     * Process autocomplete value change (edition)
+     */
+    onAutocompleteValueChange(column, record, event) {
+        this.formGroup.controls[column.name].setValue(event.option.viewValue);
+        const key = this.getColumnKeyWithoutPropertiesTag(column.name);
+        record.entity.properties[key] = event.option.value;
+    }
+    /**
+     * Process date value change (edition)
+     */
+    onDateChange(column, record, event) {
+        const format = 'YYYY-MM-DD';
+        const value = moment(event.value).format(format);
+        const key = this.getColumnKeyWithoutPropertiesTag(column);
+        record.entity.properties[key] = value;
+    }
+    /**
+     * Enable edition mode for one row
+     * More than one row can be edited at the same time
+     */
+    enableEdit(record) {
+        const item = record.entity.properties || record.entity;
+        this.template.columns.forEach((column) => {
+            column.title =
+                column.validation?.mandatory && !column.title.includes('*')
+                    ? column.title + ' *'
+                    : column.title;
+            const key = this.getColumnKeyWithoutPropertiesTag(column.name);
+            if (column.type === 'boolean') {
+                if (!item[key] || item[key] === null) {
+                    item[key] = false;
+                }
+                else if (typeof item[key] === 'string') {
+                    item[key] = JSON.parse(item[key].toLowerCase());
+                }
+                this.formGroup.setControl(column.name, this.formBuilder.control(item[key]));
+            }
+            else if (column.type === 'list') {
+                if (column.multiple) {
+                    this.formGroup.setControl(column.name, this.formBuilder.control([item[key]]));
+                }
+                else {
+                    this.formGroup.setControl(column.name, this.formBuilder.control(item[key]));
+                    typeof item[key] === 'string'
+                        ? this.formGroup.controls[column.name].setValue(parseInt(item[key]))
+                        : this.formGroup.controls[column.name].setValue(item[key]);
+                }
+            }
+            else if (column.type === 'autocomplete') {
+                this.formGroup.setControl(column.name, this.formBuilder.control(item[key]));
+                this.filteredOptions[column.name] = new Observable();
+                this.filteredOptions[column.name] = this.formGroup.controls[column.name].valueChanges.pipe(map((value) => {
+                    if (value?.length) {
+                        return column.domainValues?.filter((option) => {
+                            const filterNormalized = value
+                                ? value
+                                    .toLowerCase()
+                                    .normalize('NFD')
+                                    .replace(/[\u0300-\u036f]/g, '')
+                                : '';
+                            const featureNameNormalized = option.value
+                                .toLowerCase()
+                                .normalize('NFD')
+                                .replace(/[\u0300-\u036f]/g, '');
+                            return featureNameNormalized.includes(filterNormalized);
+                        });
+                    }
+                }));
+                let formControlValue = item[key];
+                column.domainValues.forEach((option) => {
+                    if (typeof formControlValue === 'string' &&
+                        StringUtils.isValidNumber(formControlValue) &&
+                        !StringUtils.isOctalNumber(formControlValue)) {
+                        formControlValue = parseInt(formControlValue);
+                    }
+                    if (option.value === formControlValue ||
+                        option.id === formControlValue) {
+                        formControlValue = option.value;
+                    }
+                });
+                this.formGroup.controls[column.name].setValue(formControlValue);
+                if (this.isEdition(record) && column.linkColumnForce) {
+                    const entity = record.entity;
+                    this.formGroup.controls[column.name].setValue(entity?.properties[this.getColumnKeyWithoutPropertiesTag(column.linkColumnForce)]);
+                }
+            }
+            else if (column.type === 'date') {
+                if (column.visible !== false) {
+                    if (item[key]) {
+                        let date = moment(item[key]);
+                        item[key] = date.utc().format('YYYY-MM-DD');
+                        this.formGroup.setControl(column.name, this.formBuilder.control(item[key]));
+                    }
+                    else {
+                        const newKey = this.getColumnKeyWithoutPropertiesTag(column.name);
+                        record.entity.properties[newKey] = null;
+                        this.formGroup.setControl(column.name, this.formBuilder.control(null));
+                    }
+                }
+            }
+            else {
+                this.formGroup.setControl(column.name, this.formBuilder.control(item[key]));
+            }
+            if (this.formGroup.controls[column.name] &&
+                this.getValidationAttributeValue(column, 'readonly')) {
+                this.formGroup.controls[column.name].disable();
+            }
+        });
+    }
+    handleDatasource() {
+        this.unsubscribeStore();
+        this.selection$$ = this.store.stateView
+            .manyBy$((record) => record.state.selected === true)
+            .subscribe((records) => {
+            const firstSelected = records[0];
+            const firstSelectedStateviewPosition = this.store.stateView
+                .all()
+                .indexOf(firstSelected);
+            const pageMax = this.paginator
+                ? this.paginator.pageSize * (this.paginator.pageIndex + 1)
+                : 0;
+            const pageMin = this.paginator ? pageMax - this.paginator.pageSize : 0;
+            if (this.paginator &&
+                (firstSelectedStateviewPosition < pageMin ||
+                    firstSelectedStateviewPosition >= pageMax)) {
+                const pageToReach = Math.floor(firstSelectedStateviewPosition / this.paginator.pageSize);
+                this.dataSource.paginator.pageIndex = pageToReach;
+            }
+            this.selectionState$.next(this.computeSelectionState(records));
+        });
+        this.dataSource$$ = this.store.stateView.all$().subscribe((all) => {
+            if (all[0]) {
+                this.enableEdit(all[0]);
+            }
+            this.dataSource.data = all.map((record) => {
+                return {
+                    record,
+                    cellData: this.template.columns.reduce((cellData, column) => {
+                        const value = this.getValue(record, column);
+                        cellData[column.name] = {
+                            class: this.getCellClass(record, column),
+                            value,
+                            isUrl: this.isUrl(value),
+                            isImg: this.isImg(value)
+                        };
+                        return cellData;
+                    }, {})
+                };
+            });
+        });
+    }
+    /**
+     * Unbind the store watcher
+     * @internal
+     */
+    ngOnDestroy() {
+        this.unsubscribeStore();
+    }
+    unsubscribeStore() {
+        if (this.selection$$) {
+            this.selection$$.unsubscribe();
+        }
+        if (this.dataSource$$) {
+            this.dataSource$$.unsubscribe();
+        }
+    }
+    /**
+     * Trackby function
+     * @param record Record
+     * @param index Record index
+     * @internal
+     */
+    getTrackByFunction() {
+        return (_index, row) => row.record.ref;
+    }
+    /**
+     * Trigger a refresh of the table. This can be useful when
+     * the data source doesn't emit a new value but for some reason
+     * the records need an update.
+     * @internal
+     */
+    refresh() {
+        this.cdRef.detectChanges();
+    }
+    paginatorChange(event) {
+        this.paginator = event;
+    }
+    /**
+     * On sort, sort the store
+     * @param event Sort event
+     * @internal
+     */
+    onSort(event) {
+        const direction = event.direction;
+        const column = this.template.columns.find((c) => c.name === event.active);
+        if (direction === 'asc' || direction === 'desc') {
+            this.store.stateView.sort({
+                valueAccessor: (record) => this.getValue(record, column),
+                direction,
+                nullsFirst: this.sortNullsFirst
+            });
+            this.entitySortChange.emit({ column, direction });
+            this.entitySortChange$.next(true);
+        }
+        else {
+            this.store.stateView.sort(undefined);
+        }
+    }
+    /**
+     * When an entity is clicked, emit an event
+     * @param record Record
+     * @internal
+     */
+    onRowClick(record) {
+        this.lastRecordCheckedKey = this.store.stateView.getKey(record);
+        this.entityClick.emit(record.entity);
+    }
+    /**
+     * When an entity is selected, select it in the store and emit an event. Even if
+     * "many" is set to true, this method always select a single, exclusive row. Selecting
+     * multiple rows should be achieved by using the checkboxes.
+     * @param record Record
+     * @internal
+     */
+    onRowSelect(record) {
+        if (this.selection === false) {
+            return;
+        }
+        const entity = record.entity;
+        this.store.state.update(entity, { selected: true }, true);
+        this.entitySelectChange.emit({ added: [entity] });
+    }
+    /**
+     * Select or unselect all rows at once. On select, emit an event.
+     * @param toggle Select or unselect
+     * @internal
+     */
+    onToggleRows(toggle) {
+        if (this.selection === false) {
+            return;
+        }
+        const entities = this.store.view.all();
+        this.entitySelectChange.emit({ added: [entities] });
+        this.store.state.updateMany(entities, { selected: toggle });
+    }
+    /**
+     * When an entity is toggled, select or unselect it in the store. On select,
+     * emit an event.
+     * @param toggle Select or unselect
+     * @param record Record
+     * @internal
+     */
+    onToggleRow(toggle, record) {
+        if (this.selection === false) {
+            return;
+        }
+        const entity = record.entity;
+        const exclusive = toggle === true && !this.selectMany;
+        this.store.state.update(entity, { selected: toggle }, exclusive);
+        if (toggle === true) {
+            this.entitySelectChange.emit({ added: [entity] });
+        }
+        this.lastRecordCheckedKey = this.store.stateView.getKey(record);
+    }
+    /**
+     * When an entity is toggled, select or unselect it in the store. On select,
+     * emit an event.
+     * @param toggle Select or unselect
+     * @param record Record
+     * @internal
+     */
+    onShiftToggleRow(toggle, record, event) {
+        if (this.selection === false) {
+            return;
+        }
+        if (this.selectMany === false || this.lastRecordCheckedKey === undefined) {
+            this.onToggleRow(toggle, record);
+            return;
+        }
+        // This is a workaround mat checkbox wrong behavior
+        // when the shift key is held.
+        // See https://github.com/angular/components/issues/6232
+        const range = window.document.createRange();
+        range.selectNode(event.target);
+        window.getSelection().removeAllRanges();
+        window.getSelection().addRange(range);
+        event.stopImmediatePropagation();
+        const records = this.store.stateView.all();
+        const recordIndex = records.indexOf(record);
+        const lastRecordChecked = this.store.stateView.get(this.lastRecordCheckedKey);
+        const lastRecordIndex = records.indexOf(lastRecordChecked);
+        const indexes = [recordIndex, lastRecordIndex];
+        const selectRecords = records.slice(Math.min(...indexes), Math.max(...indexes) + 1);
+        const entities = selectRecords.map((_record) => _record.entity);
+        this.store.state.updateMany(entities, { selected: toggle });
+        if (toggle === true) {
+            this.entitySelectChange.emit({ added: entities });
+        }
+        this.lastRecordCheckedKey = this.store.stateView.getKey(record);
+    }
+    /**
+     * Compute the selection state
+     * @returns Whether all, some or no rows are selected
+     * @internal
+     */
+    computeSelectionState(selectedRecords) {
+        const states = EntityTableSelectionState;
+        const selectionCount = selectedRecords.length;
+        return selectionCount === 0
+            ? states.None
+            : selectionCount === this.store.stateView.count
+                ? states.All
+                : states.Some;
+    }
+    /**
+     * Whether a column is sortable
+     * @param column Column
+     * @returns True if a column is sortable
+     * @internal
+     */
+    columnIsSortable(column) {
+        let sortable = column.sort;
+        if (sortable === undefined) {
+            sortable = this.template.sort === undefined ? false : this.template.sort;
+        }
+        return sortable;
+    }
+    /**
+     * Whether a row is should be selected based on the underlying entity state
+     * @param record Record
+     * @returns True if a row should be selected
+     * @internal
+     */
+    rowIsSelected(record) {
+        const state = record.state;
+        return state.selected ? state.selected : false;
+    }
+    isImg(value) {
+        if (this.isUrl(value)) {
+            return (['jpg', 'png', 'gif'].indexOf(value.split('.').pop().toLowerCase()) !==
+                -1);
+        }
+        else {
+            return false;
+        }
+    }
+    isUrl(value) {
+        if (typeof value === 'string') {
+            return (value.slice(0, 8) === 'https://' || value.slice(0, 7) === 'http://');
+        }
+        else {
+            return false;
+        }
+    }
+    /**
+     * Method to access an entity's values
+     * @param record Record
+     * @param column Column
+     * @returns Any value
+     * @internal
+     */
+    getValue(record, column) {
+        const entity = record.entity;
+        let value;
+        if (column.valueAccessor !== undefined) {
+            return column.valueAccessor(entity, record);
+        }
+        if (this.template.valueAccessor !== undefined) {
+            return this.template.valueAccessor(entity, column.name, record);
+        }
+        value = this.store.getProperty(entity, column.name);
+        if (column.type === 'boolean') {
+            if (value === undefined || value === null || value === '') {
+                value = false;
+            }
+            else if (typeof value !== 'boolean' && value !== undefined) {
+                if (typeof value === 'number') {
+                    value = Boolean(value);
+                }
+                else {
+                    value = JSON.parse(value.toLowerCase());
+                }
+            }
+            if (!this.isEdition(record)) {
+                value = value ? '&#10003;' : ''; // check mark
+            }
+        }
+        else if (column.type === 'list' && value && column.domainValues) {
+            const entity = record.entity;
+            if (column.multiple) {
+                let list_id;
+                typeof value === 'string'
+                    ? (list_id = value.match(/[\w.-]+/g).map(Number))
+                    : (list_id = value);
+                let list_option = [];
+                column.domainValues.forEach((option) => {
+                    if (list_id.includes(option.id)) {
+                        if (record.edition) {
+                            list_option.push(option.id);
+                        }
+                        else {
+                            list_option.push(option.value);
+                        }
+                    }
+                });
+                this.isEdition(record) ? (value = list_id) : (value = list_option);
+            }
+            else {
+                if (!this.isEdition(record) && column.linkColumnForce) {
+                    value =
+                        entity?.properties[this.getColumnKeyWithoutPropertiesTag(column.linkColumnForce)];
+                }
+                else {
+                    column.domainValues.forEach((option) => {
+                        if (typeof value === 'string' &&
+                            StringUtils.isValidNumber(value) &&
+                            !StringUtils.isOctalNumber(value)) {
+                            value = parseInt(value);
+                        }
+                        if (option.value === value || option.id === value) {
+                            this.isEdition(record)
+                                ? (value = option.id)
+                                : (value = option.value);
+                        }
+                    });
+                }
+            }
+        }
+        else if (column.type === 'autocomplete' && value && column.domainValues) {
+            const entity = record.entity;
+            if (!this.isEdition(record) && column.linkColumnForce) {
+                value =
+                    entity?.properties[this.getColumnKeyWithoutPropertiesTag(column.linkColumnForce)];
+            }
+            else {
+                column.domainValues.forEach((option) => {
+                    if (typeof value === 'string' &&
+                        StringUtils.isValidNumber(value) &&
+                        !StringUtils.isOctalNumber(value)) {
+                        value = parseInt(value);
+                    }
+                    if (option.value === value || option.id === value) {
+                        value = option.value;
+                    }
+                });
+            }
+        }
+        else if (column.type === 'date') {
+            if (this.isEdition(record)) {
+                if (value) {
+                    let date = moment(value);
+                    value = date.format();
+                    this.formGroup.controls[column.name].setValue(value);
+                }
+            }
+            else if (!this.isEdition(record) && value === null) {
+                value = '';
+            }
+        }
+        if (value === undefined) {
+            value = '';
+        }
+        return value;
+    }
+    /**
+     * Method to access an entity's validation values
+     * @param column Column
+     * @param validationType string
+     * @returns Any value (false if no validation or not the one concerned)
+     * @internal
+     */
+    getValidationAttributeValue(column, validationType) {
+        if (column.validation !== undefined &&
+            column.validation[validationType] !== undefined) {
+            return column.validation[validationType];
+        }
+        else {
+            return false;
+        }
+    }
+    isEdition(record) {
+        return record.entity.edition ? true : false;
+    }
+    /**
+     * Return the type of renderer of a column
+     * @param column Column
+     * @returns Renderer type
+     * @internal
+     */
+    getColumnRenderer(column) {
+        if (column.renderer !== undefined) {
+            return column.renderer;
+        }
+        return EntityTableColumnRenderer.Default;
+    }
+    /**
+     * Return the table ngClass
+     * @returns ngClass
+     * @internal
+     */
+    getTableClass() {
+        return {
+            'igo-entity-table-with-selection': this.selection
+        };
+    }
+    /**
+     * Return a header ngClass
+     * @returns ngClass
+     * @internal
+     */
+    getHeaderClass() {
+        const func = this.template.headerClassFunc;
+        if (func instanceof Function) {
+            return func();
+        }
+        return {};
+    }
+    /**
+     * Return a row ngClass
+     * @param record Record
+     * @returns ngClass
+     * @internal
+     */
+    getRowClass(record) {
+        const entity = record.entity;
+        const func = this.template.rowClassFunc;
+        if (func instanceof Function) {
+            return func(entity, record);
+        }
+        return {};
+    }
+    /**
+     * Return a row ngClass
+     * @param record Record
+     * @param column Column
+     * @returns ngClass
+     * @internal
+     */
+    getCellClass(record, column) {
+        const entity = record.entity;
+        const cls = {};
+        const tableFunc = this.template.cellClassFunc;
+        if (tableFunc instanceof Function) {
+            Object.assign(cls, tableFunc(entity, column, record));
+        }
+        const columnFunc = column.cellClassFunc;
+        if (columnFunc instanceof Function) {
+            Object.assign(cls, columnFunc(entity, record));
+        }
+        return cls;
+    }
+    /**
+     * When a button is clicked
+     * @param func Function
+     * @param record Record
+     * @internal
+     */
+    onButtonClick(clickFunc, record) {
+        this.enableEdit(record);
+        if (typeof clickFunc === 'function') {
+            clickFunc(record.entity, record);
+        }
+    }
+    /**
+     * Retrieve column name without his "properties" tag (useful for edition workspace properties)
+     */
+    getColumnKeyWithoutPropertiesTag(column) {
+        if (column.includes('properties.')) {
+            return column.split('.')[1];
+        }
+        return column;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: EntityTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.UntypedFormBuilder }, { token: i2$2.FocusMonitor }, { token: i0.ElementRef }, { token: i1$2.NgControl, optional: true, self: true }, { token: i1$2.NgForm, optional: true }, { token: i1$2.FormControlName, optional: true }, { token: i3.ErrorStateMatcher }, { token: i3.DateAdapter }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: EntityTableComponent, isStandalone: true, selector: "igo-entity-table", inputs: { store: "store", paginator: "paginator", template: "template", scrollBehavior: "scrollBehavior", sortNullsFirst: "sortNullsFirst", withPaginator: "withPaginator", paginatorOptions: "paginatorOptions" }, outputs: { entityClick: "entityClick", entitySelectChange: "entitySelectChange", entitySortChange: "entitySortChange" }, providers: [
+            { provide: MatFormFieldControl, useExisting: EntityTableComponent },
+            provideMomentDateAdapter()
+        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"table-container\" [ngStyle]=\"{ height: tableHeight }\">\n  <table\n    id=\"currentWorkspaceTable\"\n    mat-table\n    matSort\n    [ngClass]=\"getTableClass()\"\n    [dataSource]=\"dataSource\"\n    [trackBy]=\"getTrackByFunction()\"\n    (matSortChange)=\"onSort($event)\"\n  >\n    <ng-container matColumnDef=\"selectionCheckbox\" class=\"mat-cell-checkbox\">\n      <th mat-header-cell *matHeaderCellDef>\n        <ng-container *ngIf=\"selectMany\">\n          <ng-container *ngIf=\"selectionState$ | async as selectionState\">\n            <mat-checkbox\n              (change)=\"onToggleRows($event.checked)\"\n              [checked]=\"selectionState === entityTableSelectionState.All\"\n              [indeterminate]=\"\n                selectionState === entityTableSelectionState.Some\n              \"\n            >\n            </mat-checkbox>\n          </ng-container>\n        </ng-container>\n      </th>\n      <td mat-cell *matCellDef=\"let row\">\n        <mat-checkbox\n          (mousedown)=\"$event.shiftKey ? $event.preventDefault() : null\"\n          (click)=\"\n            $event.shiftKey\n              ? onShiftToggleRow(!rowIsSelected(row.record), row.record, $event)\n              : $event.stopPropagation()\n          \"\n          (change)=\"onToggleRow($event.checked, row.record)\"\n          [checked]=\"rowIsSelected(row.record)\"\n        >\n        </mat-checkbox>\n      </td>\n    </ng-container>\n\n    <ng-container\n      [matColumnDef]=\"column.name\"\n      *ngFor=\"let column of template.columns\"\n    >\n      <ng-container *ngIf=\"columnIsSortable(column)\">\n        <th\n          mat-header-cell\n          *matHeaderCellDef\n          mat-sort-header\n          [matTooltip]=\"column.tooltip ? column.tooltip : undefined\"\n        >\n          {{ column.title }}\n        </th>\n      </ng-container>\n\n      <ng-container *ngIf=\"!columnIsSortable(column)\">\n        <th\n          mat-header-cell\n          *matHeaderCellDef\n          [matTooltip]=\"column.tooltip ? column.tooltip : undefined\"\n        >\n          {{ column.title }}\n        </th>\n      </ng-container>\n\n      <ng-container *ngIf=\"getColumnRenderer(column) as columnRenderer\">\n        <ng-container\n          *ngIf=\"columnRenderer === entityTableColumnRenderer.Default\"\n        >\n          <ng-container *matCellDef=\"let row\">\n            <td\n              mat-cell\n              class=\"mat-cell-text\"\n              *ngIf=\"!row.cellData[column.name].isUrl; else isAnUrlDefault\"\n              [ngClass]=\"row.cellData[column.name].class\"\n            >\n              {{ row.cellData[column.name].value }}\n            </td>\n            <ng-template #isAnUrlDefault>\n              <td\n                mat-cell\n                class=\"mat-cell-text\"\n                [ngClass]=\"row.cellData[column.name].class\"\n              >\n                <a\n                  href=\"{{ row.cellData[column.name].value }}\"\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                  (click)=\"$event.stopPropagation()\"\n                >\n                  <img\n                    igoImageError\n                    *ngIf=\"row.cellData[column.name].isImg; else notImg\"\n                    src=\"{{\n                      row.cellData[column.name].value | secureImage | async\n                    }}\"\n                    width=\"50\"\n                    heigth=\"auto\"\n                  />\n                  <ng-template #notImg\n                    ><span\n                      >{{ 'igo.common.entity-table.targetHtmlUrl' | translate }}\n                    </span></ng-template\n                  >\n                </a>\n              </td>\n            </ng-template>\n          </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"columnRenderer === entityTableColumnRenderer.HTML\">\n          <ng-container *matCellDef=\"let row\">\n            <td\n              mat-cell\n              class=\"mat-cell-text\"\n              *ngIf=\"!row.cellData[column.name].isUrl; else isAnUrlHTML\"\n              [ngClass]=\"row.cellData[column.name].class\"\n              [innerHTML]=\"row.cellData[column.name].value\"\n            ></td>\n            <ng-template #isAnUrlHTML>\n              <td\n                mat-cell\n                class=\"mat-cell-text\"\n                [ngClass]=\"row.cellData[column.name].class\"\n              >\n                <a\n                  href=\"{{ row.cellData[column.name].value }}\"\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                  (click)=\"$event.stopPropagation()\"\n                >\n                  <img\n                    igoImageError\n                    *ngIf=\"row.cellData[column.name].isImg; else notImg\"\n                    src=\"{{\n                      row.cellData[column.name].value | secureImage | async\n                    }}\"\n                    width=\"50\"\n                    heigth=\"auto\"\n                  />\n                  <ng-template #notImg\n                    ><span\n                      >{{ 'igo.geo.targetHtmlUrl' | translate }}\n                    </span></ng-template\n                  >\n                </a>\n              </td>\n            </ng-template>\n          </ng-container>\n        </ng-container>\n        <ng-container\n          *ngIf=\"columnRenderer === entityTableColumnRenderer.UnsanitizedHTML\"\n        >\n          <ng-container *matCellDef=\"let row\">\n            <td\n              mat-cell\n              class=\"mat-cell-text edition\"\n              [formGroup]=\"formGroup\"\n              *ngIf=\"isEdition(row.record); else isUnsanitizedHTML\"\n              [ngClass]=\"row.cellData[column.name].class\"\n            >\n              <div class=\"date-picker\" *ngIf=\"column.type === 'date'\">\n                <mat-datepicker-toggle\n                  matSuffix\n                  [for]=\"picker\"\n                ></mat-datepicker-toggle>\n                <input\n                  matInput\n                  [matDatepicker]=\"picker\"\n                  [formControlName]=\"column.name\"\n                  value=\"{{ row.cellData[column.name].value }}\"\n                  (dateChange)=\"onDateChange(column.name, row.record, $event)\"\n                />\n                <mat-datepicker #picker></mat-datepicker>\n              </div>\n              <input\n                matInput\n                type=\"time\"\n                *ngIf=\"column.type === 'time'\"\n                [formControlName]=\"column.name\"\n                step=\"900\"\n                (focus)=\"column.onFocus($event)\"\n                (keypress)=\"column.onChange($event)\"\n                (blur)=\"column.onBlur($event)\"\n              />\n              <input\n                matInput\n                type=\"number\"\n                class=\"class_number_edition\"\n                *ngIf=\"column.type === 'number'\"\n                [formControlName]=\"column.name\"\n                step=\"{{ column.step }}\"\n                value=\"{{ row.cellData[column.name].value }}\"\n                (input)=\"onValueChange(column.name, row.record, $event)\"\n                readonly=\"{{ getValidationAttributeValue(column, 'readonly') }}\"\n                required=\"{{\n                  getValidationAttributeValue(column, 'mandatory')\n                }}\"\n                min=\"{{ getValidationAttributeValue(column, 'minValue') }}\"\n                max=\"{{ getValidationAttributeValue(column, 'maxValue') }}\"\n              />\n              <input\n                matInput\n                type=\"text\"\n                *ngIf=\"!column.type || column.type === 'string'\"\n                [formControlName]=\"column.name\"\n                value=\"{{ row.cellData[column.name].value }}\"\n                (input)=\"onValueChange(column.name, row.record, $event)\"\n                readonly=\"{{ getValidationAttributeValue(column, 'readonly') }}\"\n                required=\"{{\n                  getValidationAttributeValue(column, 'mandatory')\n                }}\"\n              />\n              <mat-checkbox\n                *ngIf=\"column.type === 'boolean'\"\n                [formControlName]=\"column.name\"\n                [checked]=\"row.cellData[column.name].value\"\n                (change)=\"onBooleanValueChange(column.name, row.record, $event)\"\n              ></mat-checkbox>\n              <mat-select\n                *ngIf=\"column.type === 'list'\"\n                required=\"{{\n                  getValidationAttributeValue(column, 'mandatory')\n                }}\"\n                [formControlName]=\"column.name\"\n                [multiple]=\"column.multiple\"\n                (selectionChange)=\"\n                  onSelectValueChange(column.name, row.record, $event)\n                \"\n                [value]=\"row.cellData[column.name].value\"\n              >\n                <mat-option\n                  *ngFor=\"let option of column.domainValues\"\n                  [value]=\"option.id\"\n                  [disabled]=\"option.disabled\"\n                >\n                  {{ option.value }}\n                </mat-option>\n              </mat-select>\n              <input\n                matInput\n                type=\"text\"\n                [formControlName]=\"column.name\"\n                *ngIf=\"column.type === 'autocomplete'\"\n                [matAutocomplete]=\"auto\"\n                required=\"{{\n                  getValidationAttributeValue(column, 'mandatory')\n                }}\"\n                value=\"{{ row.cellData[column.name].value }}\"\n                readonly=\"{{ getValidationAttributeValue(column, 'readonly') }}\"\n              />\n              <mat-autocomplete\n                #auto=\"matAutocomplete\"\n                (optionSelected)=\"\n                  onAutocompleteValueChange(column, row.record, $event)\n                \"\n                panelWidth=\"430px\"\n              >\n                <mat-option\n                  *ngFor=\"let option of filteredOptions[column.name] | async\"\n                  [value]=\"option.id\"\n                >\n                  {{ option.value }}\n                </mat-option>\n              </mat-autocomplete>\n            </td>\n            <ng-template #isUnsanitizedHTML>\n              <td\n                mat-cell\n                class=\"mat-cell-text\"\n                *ngIf=\"\n                  !row.cellData[column.name].isUrl;\n                  else isAnUrlUnsanitizedHTML\n                \"\n                [ngClass]=\"row.cellData[column.name].class\"\n                [innerHTML]=\"row.cellData[column.name].value | sanitizeHtml\"\n              ></td>\n              <ng-template #isAnUrlUnsanitizedHTML>\n                <td\n                  mat-cell\n                  class=\"mat-cell-text\"\n                  [ngClass]=\"row.cellData[column.name].class\"\n                >\n                  <a\n                    href=\"{{ row.cellData[column.name].value }}\"\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                    (click)=\"$event.stopPropagation()\"\n                  >\n                    <img\n                      igoImageError\n                      *ngIf=\"row.cellData[column.name].isImg; else notImg\"\n                      src=\"{{\n                        row.cellData[column.name].value | secureImage | async\n                      }}\"\n                      width=\"50\"\n                      heigth=\"auto\"\n                    />\n                    <ng-template #notImg\n                      ><span\n                        >{{ 'igo.geo.targetHtmlUrl' | translate }}\n                      </span></ng-template\n                    >\n                  </a>\n                </td>\n              </ng-template>\n            </ng-template>\n          </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"columnRenderer === entityTableColumnRenderer.Icon\">\n          <td\n            mat-cell\n            *matCellDef=\"let row\"\n            class=\"mat-cell-text\"\n            [ngClass]=\"row.cellData[column.name].class\"\n          >\n            <mat-icon *ngIf=\"column.onClick\" (click)=\"column.onClick($event)\">{{\n              row.cellData[column.name].value || column.icon\n            }}</mat-icon>\n            <mat-icon *ngIf=\"!column.onClick\">{{\n              row.cellData[column.name].value || column.icon\n            }}</mat-icon>\n          </td>\n        </ng-container>\n        <ng-container\n          *ngIf=\"columnRenderer === entityTableColumnRenderer.ButtonGroup\"\n        >\n          <ng-container *matCellDef=\"let row\">\n            <td\n              mat-cell\n              class=\"mat-cell-text\"\n              [ngClass]=\"row.cellData[column.name].class\"\n            >\n              <span *ngFor=\"let button of row.cellData[column.name].value\">\n                <ng-container\n                  *ngIf=\"\n                    isEdition(row.record) === button.editMode ||\n                    button.editMode === undefined\n                  \"\n                >\n                  <button\n                    *ngIf=\"button.style === 'mat-icon-button'\"\n                    igoStopPropagation\n                    mat-icon-button\n                    [color]=\"button.color\"\n                    (mousedown)=\"onButtonClick(button.click, row.record)\"\n                    [disabled]=\"button.disabled\"\n                  >\n                    <mat-icon>{{ button.icon }}</mat-icon>\n                  </button>\n                  <button\n                    *ngIf=\"button.style !== 'mat-icon-button'\"\n                    igoStopPropagation\n                    mat-mini-fab\n                    [color]=\"button.color\"\n                    (mousedown)=\"onButtonClick(button.click, row.record)\"\n                    [disabled]=\"button.disabled\"\n                  >\n                    <mat-icon>{{ button.icon }}</mat-icon>\n                  </button>\n                </ng-container>\n              </span>\n            </td>\n          </ng-container>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n\n    <tr\n      mat-header-row\n      *matHeaderRowDef=\"headers; sticky: fixedHeader\"\n      [ngClass]=\"getHeaderClass()\"\n    ></tr>\n    <tr\n      mat-row\n      igoEntityTableRow\n      *matRowDef=\"let row; columns: headers\"\n      [scrollBehavior]=\"scrollBehavior\"\n      [ngClass]=\"getRowClass(row.record)\"\n      [selection]=\"selection\"\n      [selected]=\"rowIsSelected(row.record)\"\n      (select)=\"onRowSelect(row.record)\"\n      (click)=\"onRowClick(row.record)\"\n    ></tr>\n  </table>\n  <igo-entity-table-paginator\n    *ngIf=\"withPaginator\"\n    [store]=\"store\"\n    [paginatorOptions]=\"paginatorOptions\"\n    [entitySortChange$]=\"entitySortChange$\"\n    (paginatorChange)=\"paginatorChange($event)\"\n  >\n  </igo-entity-table-paginator>\n</div>\n", styles: [":host{width:100%;height:100%;display:block}:host.table-compact tr.mat-mdc-header-row,:host.table-compact ::ng-deep mat-checkbox .mat-ripple{height:36px}:host.table-compact tr.mat-mdc-row,:host.table-compact ::ng-deep mat-checkbox .mat-ripple{height:28px}:host .table-container{display:flex;flex-direction:column;height:100%;overflow:auto;flex:1 1 auto}:host .mat-cell-text{overflow:hidden;word-wrap:break-word}:host entity-table table.igo-entity-table-with-selection tr:hover{-moz-box-shadow:2px 0px 2px 0px #dddddd;-webkit-box-shadow:2px 0px 2px 0px #dddddd;-o-box-shadow:2px 0px 2px 0px #dddddd;box-shadow:2px 0 2px #ddd;cursor:pointer}:host table button{margin:7px}:host .class_hidden{visibility:hidden}:host .class_display_none{display:none}:host .class_boolean,:host .class_icon,:host .class_number{text-align:center;padding-right:35px!important}:host .class_string,:host .class_text,:host .class_number_edition{text-align:left}:host td.edition{background:#a6a6a633}:host input{border-bottom:1px solid darkgrey}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: EntityTablePaginatorComponent, selector: "igo-entity-table-paginator", inputs: ["entitySortChange$", "store", "paginatorOptions"], outputs: ["page", "paginatorChange"] }, { kind: "directive", type: EntityTableRowDirective, selector: "[igoEntityTableRow]", inputs: ["selection", "selectOnClick", "highlightSelection", "selected", "scrollBehavior"], outputs: ["select"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: ImageErrorDirective, selector: "[igoImageError]", inputs: ["errorImageUrl", "hideError"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5.MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i10.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: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: // For the DateAdapter provider
+                MatOptionModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i13.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i13.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i13.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i13.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i13.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i13.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i13.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i13.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i13.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i13.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i14.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "pipe", type: SecureImagePipe, name: "secureImage" }, { kind: "directive", type: StopPropagationDirective, selector: "[igoStopPropagation]" }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i15.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: EntityTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'igo-entity-table', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        { provide: MatFormFieldControl, useExisting: EntityTableComponent },
+                        provideMomentDateAdapter()
+                    ], standalone: true, imports: [
+                        AsyncPipe,
+                        EntityTablePaginatorComponent,
+                        EntityTableRowDirective,
+                        FormsModule,
+                        ImageErrorDirective,
+                        MatAutocompleteModule,
+                        MatButtonModule,
+                        MatCheckboxModule,
+                        MatDatepickerModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatInputModule,
+                        MatNativeDateModule, // For the DateAdapter provider
+                        MatOptionModule,
+                        MatSelectModule,
+                        MatSortModule,
+                        MatTableModule,
+                        MatTooltipModule,
+                        NgClass,
+                        NgFor,
+                        NgIf,
+                        NgStyle,
+                        ReactiveFormsModule,
+                        SanitizeHtmlPipe,
+                        SecureImagePipe,
+                        StopPropagationDirective,
+                        IgoLanguageModule
+                    ], template: "<div class=\"table-container\" [ngStyle]=\"{ height: tableHeight }\">\n  <table\n    id=\"currentWorkspaceTable\"\n    mat-table\n    matSort\n    [ngClass]=\"getTableClass()\"\n    [dataSource]=\"dataSource\"\n    [trackBy]=\"getTrackByFunction()\"\n    (matSortChange)=\"onSort($event)\"\n  >\n    <ng-container matColumnDef=\"selectionCheckbox\" class=\"mat-cell-checkbox\">\n      <th mat-header-cell *matHeaderCellDef>\n        <ng-container *ngIf=\"selectMany\">\n          <ng-container *ngIf=\"selectionState$ | async as selectionState\">\n            <mat-checkbox\n              (change)=\"onToggleRows($event.checked)\"\n              [checked]=\"selectionState === entityTableSelectionState.All\"\n              [indeterminate]=\"\n                selectionState === entityTableSelectionState.Some\n              \"\n            >\n            </mat-checkbox>\n          </ng-container>\n        </ng-container>\n      </th>\n      <td mat-cell *matCellDef=\"let row\">\n        <mat-checkbox\n          (mousedown)=\"$event.shiftKey ? $event.preventDefault() : null\"\n          (click)=\"\n            $event.shiftKey\n              ? onShiftToggleRow(!rowIsSelected(row.record), row.record, $event)\n              : $event.stopPropagation()\n          \"\n          (change)=\"onToggleRow($event.checked, row.record)\"\n          [checked]=\"rowIsSelected(row.record)\"\n        >\n        </mat-checkbox>\n      </td>\n    </ng-container>\n\n    <ng-container\n      [matColumnDef]=\"column.name\"\n      *ngFor=\"let column of template.columns\"\n    >\n      <ng-container *ngIf=\"columnIsSortable(column)\">\n        <th\n          mat-header-cell\n          *matHeaderCellDef\n          mat-sort-header\n          [matTooltip]=\"column.tooltip ? column.tooltip : undefined\"\n        >\n          {{ column.title }}\n        </th>\n      </ng-container>\n\n      <ng-container *ngIf=\"!columnIsSortable(column)\">\n        <th\n          mat-header-cell\n          *matHeaderCellDef\n          [matTooltip]=\"column.tooltip ? column.tooltip : undefined\"\n        >\n          {{ column.title }}\n        </th>\n      </ng-container>\n\n      <ng-container *ngIf=\"getColumnRenderer(column) as columnRenderer\">\n        <ng-container\n          *ngIf=\"columnRenderer === entityTableColumnRenderer.Default\"\n        >\n          <ng-container *matCellDef=\"let row\">\n            <td\n              mat-cell\n              class=\"mat-cell-text\"\n              *ngIf=\"!row.cellData[column.name].isUrl; else isAnUrlDefault\"\n              [ngClass]=\"row.cellData[column.name].class\"\n            >\n              {{ row.cellData[column.name].value }}\n            </td>\n            <ng-template #isAnUrlDefault>\n              <td\n                mat-cell\n                class=\"mat-cell-text\"\n                [ngClass]=\"row.cellData[column.name].class\"\n              >\n                <a\n                  href=\"{{ row.cellData[column.name].value }}\"\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                  (click)=\"$event.stopPropagation()\"\n                >\n                  <img\n                    igoImageError\n                    *ngIf=\"row.cellData[column.name].isImg; else notImg\"\n                    src=\"{{\n                      row.cellData[column.name].value | secureImage | async\n                    }}\"\n                    width=\"50\"\n                    heigth=\"auto\"\n                  />\n                  <ng-template #notImg\n                    ><span\n                      >{{ 'igo.common.entity-table.targetHtmlUrl' | translate }}\n                    </span></ng-template\n                  >\n                </a>\n              </td>\n            </ng-template>\n          </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"columnRenderer === entityTableColumnRenderer.HTML\">\n          <ng-container *matCellDef=\"let row\">\n            <td\n              mat-cell\n              class=\"mat-cell-text\"\n              *ngIf=\"!row.cellData[column.name].isUrl; else isAnUrlHTML\"\n              [ngClass]=\"row.cellData[column.name].class\"\n              [innerHTML]=\"row.cellData[column.name].value\"\n            ></td>\n            <ng-template #isAnUrlHTML>\n              <td\n                mat-cell\n                class=\"mat-cell-text\"\n                [ngClass]=\"row.cellData[column.name].class\"\n              >\n                <a\n                  href=\"{{ row.cellData[column.name].value }}\"\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                  (click)=\"$event.stopPropagation()\"\n                >\n                  <img\n                    igoImageError\n                    *ngIf=\"row.cellData[column.name].isImg; else notImg\"\n                    src=\"{{\n                      row.cellData[column.name].value | secureImage | async\n                    }}\"\n                    width=\"50\"\n                    heigth=\"auto\"\n                  />\n                  <ng-template #notImg\n                    ><span\n                      >{{ 'igo.geo.targetHtmlUrl' | translate }}\n                    </span></ng-template\n                  >\n                </a>\n              </td>\n            </ng-template>\n          </ng-container>\n        </ng-container>\n        <ng-container\n          *ngIf=\"columnRenderer === entityTableColumnRenderer.UnsanitizedHTML\"\n        >\n          <ng-container *matCellDef=\"let row\">\n            <td\n              mat-cell\n              class=\"mat-cell-text edition\"\n              [formGroup]=\"formGroup\"\n              *ngIf=\"isEdition(row.record); else isUnsanitizedHTML\"\n              [ngClass]=\"row.cellData[column.name].class\"\n            >\n              <div class=\"date-picker\" *ngIf=\"column.type === 'date'\">\n                <mat-datepicker-toggle\n                  matSuffix\n                  [for]=\"picker\"\n                ></mat-datepicker-toggle>\n                <input\n                  matInput\n                  [matDatepicker]=\"picker\"\n                  [formControlName]=\"column.name\"\n                  value=\"{{ row.cellData[column.name].value }}\"\n                  (dateChange)=\"onDateChange(column.name, row.record, $event)\"\n                />\n                <mat-datepicker #picker></mat-datepicker>\n              </div>\n              <input\n                matInput\n                type=\"time\"\n                *ngIf=\"column.type === 'time'\"\n                [formControlName]=\"column.name\"\n                step=\"900\"\n                (focus)=\"column.onFocus($event)\"\n                (keypress)=\"column.onChange($event)\"\n                (blur)=\"column.onBlur($event)\"\n              />\n              <input\n                matInput\n                type=\"number\"\n                class=\"class_number_edition\"\n                *ngIf=\"column.type === 'number'\"\n                [formControlName]=\"column.name\"\n                step=\"{{ column.step }}\"\n                value=\"{{ row.cellData[column.name].value }}\"\n                (input)=\"onValueChange(column.name, row.record, $event)\"\n                readonly=\"{{ getValidationAttributeValue(column, 'readonly') }}\"\n                required=\"{{\n                  getValidationAttributeValue(column, 'mandatory')\n                }}\"\n                min=\"{{ getValidationAttributeValue(column, 'minValue') }}\"\n                max=\"{{ getValidationAttributeValue(column, 'maxValue') }}\"\n              />\n              <input\n                matInput\n                type=\"text\"\n                *ngIf=\"!column.type || column.type === 'string'\"\n                [formControlName]=\"column.name\"\n                value=\"{{ row.cellData[column.name].value }}\"\n                (input)=\"onValueChange(column.name, row.record, $event)\"\n                readonly=\"{{ getValidationAttributeValue(column, 'readonly') }}\"\n                required=\"{{\n                  getValidationAttributeValue(column, 'mandatory')\n                }}\"\n              />\n              <mat-checkbox\n                *ngIf=\"column.type === 'boolean'\"\n                [formControlName]=\"column.name\"\n                [checked]=\"row.cellData[column.name].value\"\n                (change)=\"onBooleanValueChange(column.name, row.record, $event)\"\n              ></mat-checkbox>\n              <mat-select\n                *ngIf=\"column.type === 'list'\"\n                required=\"{{\n                  getValidationAttributeValue(column, 'mandatory')\n                }}\"\n                [formControlName]=\"column.name\"\n                [multiple]=\"column.multiple\"\n                (selectionChange)=\"\n                  onSelectValueChange(column.name, row.record, $event)\n                \"\n                [value]=\"row.cellData[column.name].value\"\n              >\n                <mat-option\n                  *ngFor=\"let option of column.domainValues\"\n                  [value]=\"option.id\"\n                  [disabled]=\"option.disabled\"\n                >\n                  {{ option.value }}\n                </mat-option>\n              </mat-select>\n              <input\n                matInput\n                type=\"text\"\n                [formControlName]=\"column.name\"\n                *ngIf=\"column.type === 'autocomplete'\"\n                [matAutocomplete]=\"auto\"\n                required=\"{{\n                  getValidationAttributeValue(column, 'mandatory')\n                }}\"\n                value=\"{{ row.cellData[column.name].value }}\"\n                readonly=\"{{ getValidationAttributeValue(column, 'readonly') }}\"\n              />\n              <mat-autocomplete\n                #auto=\"matAutocomplete\"\n                (optionSelected)=\"\n                  onAutocompleteValueChange(column, row.record, $event)\n                \"\n                panelWidth=\"430px\"\n              >\n                <mat-option\n                  *ngFor=\"let option of filteredOptions[column.name] | async\"\n                  [value]=\"option.id\"\n                >\n                  {{ option.value }}\n                </mat-option>\n              </mat-autocomplete>\n            </td>\n            <ng-template #isUnsanitizedHTML>\n              <td\n                mat-cell\n                class=\"mat-cell-text\"\n                *ngIf=\"\n                  !row.cellData[column.name].isUrl;\n                  else isAnUrlUnsanitizedHTML\n                \"\n                [ngClass]=\"row.cellData[column.name].class\"\n                [innerHTML]=\"row.cellData[column.name].value | sanitizeHtml\"\n              ></td>\n              <ng-template #isAnUrlUnsanitizedHTML>\n                <td\n                  mat-cell\n                  class=\"mat-cell-text\"\n                  [ngClass]=\"row.cellData[column.name].class\"\n                >\n                  <a\n                    href=\"{{ row.cellData[column.name].value }}\"\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                    (click)=\"$event.stopPropagation()\"\n                  >\n                    <img\n                      igoImageError\n                      *ngIf=\"row.cellData[column.name].isImg; else notImg\"\n                      src=\"{{\n                        row.cellData[column.name].value | secureImage | async\n                      }}\"\n                      width=\"50\"\n                      heigth=\"auto\"\n                    />\n                    <ng-template #notImg\n                      ><span\n                        >{{ 'igo.geo.targetHtmlUrl' | translate }}\n                      </span></ng-template\n                    >\n                  </a>\n                </td>\n              </ng-template>\n            </ng-template>\n          </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"columnRenderer === entityTableColumnRenderer.Icon\">\n          <td\n            mat-cell\n            *matCellDef=\"let row\"\n            class=\"mat-cell-text\"\n            [ngClass]=\"row.cellData[column.name].class\"\n          >\n            <mat-icon *ngIf=\"column.onClick\" (click)=\"column.onClick($event)\">{{\n              row.cellData[column.name].value || column.icon\n            }}</mat-icon>\n            <mat-icon *ngIf=\"!column.onClick\">{{\n              row.cellData[column.name].value || column.icon\n            }}</mat-icon>\n          </td>\n        </ng-container>\n        <ng-container\n          *ngIf=\"columnRenderer === entityTableColumnRenderer.ButtonGroup\"\n        >\n          <ng-container *matCellDef=\"let row\">\n            <td\n              mat-cell\n              class=\"mat-cell-text\"\n              [ngClass]=\"row.cellData[column.name].class\"\n            >\n              <span *ngFor=\"let button of row.cellData[column.name].value\">\n                <ng-container\n                  *ngIf=\"\n                    isEdition(row.record) === button.editMode ||\n                    button.editMode === undefined\n                  \"\n                >\n                  <button\n                    *ngIf=\"button.style === 'mat-icon-button'\"\n                    igoStopPropagation\n                    mat-icon-button\n                    [color]=\"button.color\"\n                    (mousedown)=\"onButtonClick(button.click, row.record)\"\n                    [disabled]=\"button.disabled\"\n                  >\n                    <mat-icon>{{ button.icon }}</mat-icon>\n                  </button>\n                  <button\n                    *ngIf=\"button.style !== 'mat-icon-button'\"\n                    igoStopPropagation\n                    mat-mini-fab\n                    [color]=\"button.color\"\n                    (mousedown)=\"onButtonClick(button.click, row.record)\"\n                    [disabled]=\"button.disabled\"\n                  >\n                    <mat-icon>{{ button.icon }}</mat-icon>\n                  </button>\n                </ng-container>\n              </span>\n            </td>\n          </ng-container>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n\n    <tr\n      mat-header-row\n      *matHeaderRowDef=\"headers; sticky: fixedHeader\"\n      [ngClass]=\"getHeaderClass()\"\n    ></tr>\n    <tr\n      mat-row\n      igoEntityTableRow\n      *matRowDef=\"let row; columns: headers\"\n      [scrollBehavior]=\"scrollBehavior\"\n      [ngClass]=\"getRowClass(row.record)\"\n      [selection]=\"selection\"\n      [selected]=\"rowIsSelected(row.record)\"\n      (select)=\"onRowSelect(row.record)\"\n      (click)=\"onRowClick(row.record)\"\n    ></tr>\n  </table>\n  <igo-entity-table-paginator\n    *ngIf=\"withPaginator\"\n    [store]=\"store\"\n    [paginatorOptions]=\"paginatorOptions\"\n    [entitySortChange$]=\"entitySortChange$\"\n    (paginatorChange)=\"paginatorChange($event)\"\n  >\n  </igo-entity-table-paginator>\n</div>\n", styles: [":host{width:100%;height:100%;display:block}:host.table-compact tr.mat-mdc-header-row,:host.table-compact ::ng-deep mat-checkbox .mat-ripple{height:36px}:host.table-compact tr.mat-mdc-row,:host.table-compact ::ng-deep mat-checkbox .mat-ripple{height:28px}:host .table-container{display:flex;flex-direction:column;height:100%;overflow:auto;flex:1 1 auto}:host .mat-cell-text{overflow:hidden;word-wrap:break-word}:host entity-table table.igo-entity-table-with-selection tr:hover{-moz-box-shadow:2px 0px 2px 0px #dddddd;-webkit-box-shadow:2px 0px 2px 0px #dddddd;-o-box-shadow:2px 0px 2px 0px #dddddd;box-shadow:2px 0 2px #ddd;cursor:pointer}:host table button{margin:7px}:host .class_hidden{visibility:hidden}:host .class_display_none{display:none}:host .class_boolean,:host .class_icon,:host .class_number{text-align:center;padding-right:35px!important}:host .class_string,:host .class_text,:host .class_number_edition{text-align:left}:host td.edition{background:#a6a6a633}:host input{border-bottom:1px solid darkgrey}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.UntypedFormBuilder }, { type: i2$2.FocusMonitor }, { type: i0.ElementRef }, { type: i1$2.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }, { type: i1$2.NgForm, decorators: [{
+                    type: Optional
+                }] }, { type: i1$2.FormControlName, decorators: [{
+                    type: Optional
+                }] }, { type: i3.ErrorStateMatcher }, { type: i3.DateAdapter }], propDecorators: { store: [{
+                type: Input
+            }], paginator: [{
+                type: Input
+            }], template: [{
+                type: Input
+            }], scrollBehavior: [{
+                type: Input
+            }], sortNullsFirst: [{
+                type: Input
+            }], withPaginator: [{
+                type: Input
+            }], paginatorOptions: [{
+                type: Input
+            }], entityClick: [{
+                type: Output
+            }], entitySelectChange: [{
+                type: Output
+            }], entitySortChange: [{
+                type: Output
+            }] } });
+
+/**
+ * @deprecated import the EntityTableComponent directly
+ */
+class IgoEntityTableModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: IgoEntityTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: IgoEntityTableModule, imports: [EntityTableComponent], exports: [EntityTableComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: IgoEntityTableModule, imports: [EntityTableComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: IgoEntityTableModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [EntityTableComponent],
+                    exports: [EntityTableComponent]
+                }]
+        }] });
+
+/**
+ * @deprecated import the EntityTablePaginatorComponent directly
+ */
+class IgoEntityTablePaginatorModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: IgoEntityTablePaginatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: IgoEntityTablePaginatorModule, imports: [EntityTablePaginatorComponent], exports: [EntityTablePaginatorComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: IgoEntityTablePaginatorModule, imports: [EntityTablePaginatorComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: IgoEntityTablePaginatorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [EntityTablePaginatorComponent],
+                    exports: [EntityTablePaginatorComponent]
+                }]
+        }] });
+
+const ENTITY_DIRECTIVES = [
+    EntitySelectorComponent,
+    EntityTableComponent,
+    EntityTablePaginatorComponent
+];
+/**
+ * @deprecated import the components directly or ENTITY_DIRECTIVES for every components/directives
+ */
+class IgoEntityModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: IgoEntityModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: IgoEntityModule, imports: [EntitySelectorComponent,
+            EntityTableComponent,
+            EntityTablePaginatorComponent], exports: [EntitySelectorComponent,
+            EntityTableComponent,
+            EntityTablePaginatorComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: IgoEntityModule, imports: [ENTITY_DIRECTIVES] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: IgoEntityModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...ENTITY_DIRECTIVES],
+                    exports: [...ENTITY_DIRECTIVES]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ENTITY_DIRECTIVES, EntityOperationType, EntitySelectorComponent, EntityStateManager, EntityStore, EntityStoreFilterCustomFuncStrategy, EntityStoreFilterSelectionStrategy, EntityStoreStrategy, EntityStoreWatcher, EntityTableColumnRenderer, EntityTableComponent, EntityTablePaginatorComponent, EntityTableScrollBehavior, EntityTableSelectionState, EntityTransaction, EntityView, IgoEntityModule, IgoEntitySelectorModule, IgoEntityTableModule, IgoEntityTablePaginatorModule, getEntityIcon, getEntityId, getEntityProperty, getEntityRevision, getEntityTitle, getEntityTitleHtml };
+//# sourceMappingURL=igo2-common-entity.mjs.map