@ecodev/natural 63.8.0 → 63.9.0

package/fesm2022/ecodev-natural.mjs

@@ -56,10 +56,10 @@ import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i8 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { FlatTreeControl } from '@angular/cdk/tree';
-import * as i3$2 from '@angular/material/tree';
-import { MatTreeFlattener, MatTreeFlatDataSource, MatTreeModule } from '@angular/material/tree';
 import * as i7 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
+import * as i3$2 from '@angular/material/tree';
+import { MatTreeFlattener, MatTreeFlatDataSource, MatTreeModule } from '@angular/material/tree';
 import { MatDividerModule } from '@angular/material/divider';
 import * as i2$2 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
@@ -7304,367 +7304,100 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
             args: [{ imports: [FormsModule, ReactiveFormsModule, MatFormFieldModule, MatSelectModule, MatOptionModule, MatInputModule], template: "<form [formGroup]=\"form\">\n    <mat-form-field style=\"max-width: 4em; margin-right: 1em\">\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select panelWidth=\"\" [formControl]=\"operatorCtrl\" [required]=\"true\">\n            @for (item of operators; track item) {\n                <mat-option [value]=\"item.key\">\n                    {{ item.label }}\n                </mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    <mat-form-field>\n        <mat-label i18n>Valeur</mat-label>\n        <input\n            matInput\n            type=\"number\"\n            [errorStateMatcher]=\"matcher\"\n            [formControl]=\"valueCtrl\"\n            [attr.max]=\"configuration.max\"\n            [attr.min]=\"configuration.min\"\n            [required]=\"true\"\n            [step]=\"configuration.step\"\n            (keydown.enter)=\"close()\"\n        />\n        @if (valueCtrl.hasError('min')) {\n            <mat-error>< {{ configuration.min }}</mat-error>\n        }\n        @if (valueCtrl.hasError('max')) {\n            <mat-error>> {{ configuration.max }}</mat-error>\n        }\n    </mat-form-field>\n</form>\n", styles: [":host input::-webkit-outer-spin-button,:host input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
         }], ctorParameters: () => [] });
 
-class HierarchicFlatNode {
-    node;
-    name;
-    level;
-    expandable;
-    selectable;
-    deselectable;
-    loading = false;
-    constructor(node, name, level = 0, expandable = false, selectable = true, deselectable = true) {
-        this.node = node;
-        this.name = name;
-        this.level = level;
-        this.expandable = expandable;
-        this.selectable = selectable;
-        this.deselectable = deselectable;
+class FacetSelectorComponent {
+    data = inject(NATURAL_DROPDOWN_DATA);
+    dropdownRef = inject(NaturalDropdownRef);
+    // Never has a real value
+    renderedValue = new BehaviorSubject('');
+    facets = this.data.configuration.facets;
+    selection = null;
+    /**
+     * Get value, including rich object types
+     */
+    getCondition() {
+        return {};
     }
-}
-
-class HierarchicModelNode {
-    model;
-    config;
-    childrenChange = new BehaviorSubject([]);
-    constructor(model, config) {
-        this.model = model;
-        this.config = config;
+    /**
+     * Allow to close the dropdown with a valid value
+     */
+    close() {
+        if (this.selection) {
+            this.dropdownRef.close({
+                condition: {},
+                facet: this.selection,
+            });
+        }
     }
-    get children() {
-        return this.childrenChange.value;
+    isValid() {
+        return !!this.selection;
+    }
+    isDirty() {
+        return true;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: FacetSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: FacetSelectorComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "@if (data.title) {\n    <div class=\"dropdown-title mat-body-2\">{{ data.title }}</div>\n}\n<mat-nav-list>\n    @for (facet of facets; track $index) {\n        <mat-list-item (click)=\"selection = facet; close()\">\n            <a>{{ facet.display }}</a>\n        </mat-list-item>\n    }\n</mat-nav-list>\n", styles: [".mat-nav-list{padding:0}.dropdown-title{opacity:.7;padding:5px;font-variant:all-small-caps;font-size:18px}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "component", type: i4$1.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i4$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }] });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: FacetSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [MatListModule], template: "@if (data.title) {\n    <div class=\"dropdown-title mat-body-2\">{{ data.title }}</div>\n}\n<mat-nav-list>\n    @for (facet of facets; track $index) {\n        <mat-list-item (click)=\"selection = facet; close()\">\n            <a>{{ facet.display }}</a>\n        </mat-list-item>\n    }\n</mat-nav-list>\n", styles: [".mat-nav-list{padding:0}.dropdown-title{opacity:.7;padding:5px;font-variant:all-small-caps;font-size:18px}\n"] }]
+        }] });
 
-class NaturalHierarchicSelectorService {
-    injector = inject(Injector);
+// Required to check invalid fields when initializing natural-search
+class AlwaysErrorStateMatcher {
+    isErrorState(control) {
+        return !!control && control.invalid;
+    }
+}
+function isComponentValid(component) {
+    return () => {
+        if (!component.isValid()) {
+            return { component: true };
+        }
+        return null;
+    };
+}
+class NaturalInputComponent {
+    element = inject(ElementRef);
+    dropdownService = inject(NaturalDropdownService);
+    injector = inject(EnvironmentInjector);
     /**
-     * Stores the global result of the tree
-     * This observable contains Node.
-     * When it's updated, the TreeController and TreeFlattener process the new array to generate the flat tree.
+     * Controls the ripple effect, used when opening a dropdown
      */
-    dataChange = new BehaviorSubject([]);
+    ripple = viewChild.required(MatRipple);
     /**
-     * Configuration for relations and selection constraints
-     *
-     * The list should be sorted in the order of the hierarchic (list first parent rules, then child rules)
+     * Native element ref for <input> related to this <natural-input> component
      */
-    configuration = [];
+    input = viewChild.required('input');
     /**
-     * Init component by saving the complete configuration, and then retrieving root elements.
-     * Updates **another** observable (this.dataChange) when data is retrieved.
+     * Label for this field
      */
-    init(config, contextFilter = null, searchVariables = null) {
-        this.validateConfiguration(config);
-        this.configuration = config;
-        return this.getList(null, contextFilter, searchVariables).pipe(map(data => this.dataChange.next(data)));
-    }
+    placeholder;
     /**
-     * Get list of children, considering given FlatNode id as a parent.
-     * Mark loading status individually on nodes.
+     * Name of the field on which do a global search (without facet)
      */
-    loadChildren(flatNode, contextFilter = null) {
-        // Dont refetch children. Improve performances
-        // Prevents interferences between HierarchicModelNode structure and angular components navigation.
-        // Prevents a bug where grand children were lost if closing root
-        if (flatNode.node.children.length) {
-            return;
-        }
-        flatNode.loading = true;
-        this.getList(flatNode, contextFilter)
-            .pipe(finalize$1(() => (flatNode.loading = false)))
-            .subscribe(items => {
-            flatNode.node.childrenChange.next(items);
-            this.dataChange.next(this.dataChange.value);
-        });
-    }
-    search(searchVariables, contextFilter = null) {
-        this.getList(null, contextFilter, searchVariables).subscribe(items => {
-            this.dataChange.next(items);
-        });
-    }
+    searchFieldName = 'search';
     /**
-     * Retrieve elements from the server
-     * Get root elements if node is null, or child elements if node is given
+     * Selected setted for this component
      */
-    getList(node = null, contextFilters = null, searchVariables = null) {
-        const configurations = this.getContextualizedConfigs(node, contextFilters, searchVariables);
-        const observables = configurations.map(c => c.injectedService.getAll(c.variablesManager));
-        // Fire queries, and merge results, transforming apollo items into Node Object.
-        return forkJoin(observables).pipe(map(results => {
-            const listing = [];
-            // For each result of an observable
-            for (let i = 0; i < results.length; i++) {
-                // For each item of the result, convert into Node object
-                for (const item of results[i].items) {
-                    listing.push(this.getOrCreateModelNode(item, configurations[i].configuration));
-                }
-            }
-            return listing;
-        }));
-    }
-    countItems(node, contextFilters = null) {
-        const configurations = this.getContextualizedConfigs(node, contextFilters, null);
-        const observables = configurations.map(c => c.injectedService.count(c.variablesManager).pipe(first$1()));
-        forkJoin(observables).subscribe(results => {
-            const totalItems = results.reduce((total, length) => total + length, 0);
-            node.expandable = totalItems > 0;
-        });
-    }
-    getContextualizedConfigs(node = null, contextFilters = null, searchVariables = null) {
-        const configsAndServices = [];
-        // Considering the whole configuration may cause queries with no/wrong results we have imperatively to avoid !
-        // e.g there are cross dependencies between equipments and taxonomies filters. Both have "parents" and "taxonomies" filters...
-        // When clicking on a equipment, the configuration of taxonomies with match "parents" filter, but use the id of the equipment
-        // To fix this, we should only consider configuration after the one given by the node passed as argument.
-        // That would mean : no child can affect parent.
-        // That would mean : sorting in the configuration have semantic/hierarchy implications
-        const configs = node ? this.getNextConfigs(node.node.config) : this.configuration;
-        const pagination = { pageIndex: 0, pageSize: 999 };
-        for (const config of configs) {
-            const contextFilter = this.getFilterByService(config, contextFilters);
-            const filter = this.getServiceFilter(node, config, contextFilter, !!searchVariables);
-            if (!filter) {
-                continue;
-            }
-            const variablesManager = new NaturalQueryVariablesManager();
-            variablesManager.set('variables', { filter: filter, pagination: pagination });
-            variablesManager.set('config-filter', { filter: config.filter });
-            if (searchVariables) {
-                variablesManager.set('natural-search', searchVariables);
-            }
-            const injectedService = this.injector.get(config.service);
-            configsAndServices.push({
-                configuration: config,
-                injectedService: injectedService,
-                variablesManager: variablesManager,
-            });
-        }
-        return configsAndServices;
-    }
+    selection = null;
     /**
-     * Return models matching given FlatNodes
-     * Returns a Literal of models grouped by their configuration attribute "selectableAtKey"
+     * Available facets, allows the user to pick one, than generated then a selection
      */
-    toOrganizedSelection(nodes) {
-        const selection = this.configuration.reduce((group, config) => {
-            if (config.selectableAtKey) {
-                group[config.selectableAtKey] = [];
-            }
-            return group;
-        }, {});
-        for (const node of nodes) {
-            if (node.config.selectableAtKey) {
-                selection[node.config.selectableAtKey].push(node.model);
-            }
-        }
-        return selection;
-    }
+    facets;
     /**
-     * Transforms an OrganizedModelSelection into a list of ModelNodes
+     * Text display in the dropdown to select the facet
      */
-    fromOrganizedSelection(organizedModelSelection) {
-        if (!organizedModelSelection) {
-            return [];
-        }
-        const result = [];
-        for (const selectableAtKey of Object.keys(organizedModelSelection)) {
-            const config = this.getConfigurationBySelectableKey(selectableAtKey);
-            if (config) {
-                for (const model of organizedModelSelection[selectableAtKey]) {
-                    result.push(new HierarchicModelNode(model, config));
-                }
-            }
-        }
-        return result;
-    }
+    dropdownTitle = '';
     /**
-     * Checks that each configuration.selectableAtKey attribute is unique
+     * Emits when user a added/updated/deleted a search (from global context or from facet)
      */
-    validateConfiguration(configurations) {
-        const selectableAtKeyAttributes = [];
-        for (const config of configurations) {
-            if (config.selectableAtKey) {
-                const keyIndex = selectableAtKeyAttributes.indexOf(config.selectableAtKey);
-                if (keyIndex === -1 && config.selectableAtKey) {
-                    selectableAtKeyAttributes.push(config.selectableAtKey);
-                }
-                // TODO : remove ?
-                // This behavior maybe dangerous in case we re-open hierarchical selector with the last returned config having non-unique
-                // keys
-                if (keyIndex < -1) {
-                    console.warn('Invalid hierarchic configuration : selectableAtKey attribute should be unique');
-                }
-            }
-        }
-    }
+    selectionChange = output();
     /**
-     * Return configurations setup in the list after the given one
+     * Emits when user removes the search by pressing the cross icon
      */
-    getNextConfigs(config) {
-        const configIndex = this.configuration.findIndex(c => c === config);
-        return this.configuration.slice(configIndex);
-    }
+    cleared = output();
     /**
-     * Builds queryVariables filter for children query
-     */
-    getServiceFilter(flatNode, config, contextFilter = null, allDeeps = false) {
-        const fieldCondition = {};
-        // if no parent, filter empty elements
-        if (!flatNode) {
-            if (!config.parentsRelationNames) {
-                return contextFilter ? contextFilter : {};
-            }
-            if (!allDeeps) {
-                config.parentsRelationNames.forEach(f => {
-                    fieldCondition[f] = { empty: {} };
-                });
-            }
-        }
-        else {
-            if (!flatNode.node.config.childrenRelationNames || !config.parentsRelationNames) {
-                return null;
-            }
-            const matchingFilters = intersection(flatNode.node.config.childrenRelationNames, config.parentsRelationNames);
-            if (!matchingFilters.length) {
-                return null;
-            }
-            fieldCondition[matchingFilters[0]] = { have: { values: [flatNode.node.model.id] } };
-        }
-        const filters = { groups: [{ conditions: [fieldCondition] }] };
-        // todo : is it right ? shouldn't it be managed with QueryVariablesManager's channels ? ?
-        if (contextFilter) {
-            filters.groups.push(...contextFilter.groups);
-        }
-        return filters;
-    }
-    /**
-     * Return a context filter applicable to the service for given config
-     *
-     * @param config Applicable config
-     * @param contextFilters List of context filters
-     */
-    getFilterByService(config, contextFilters) {
-        if (!contextFilters || !config) {
-            return null;
-        }
-        const filter = contextFilters.find(f => f.service === config.service);
-        return filter ? filter.filter : null;
-    }
-    /**
-     * Search in configurations.selectableAtKey attribute to find given key and return the configuration
-     */
-    getConfigurationBySelectableKey(key) {
-        if (!this.configuration) {
-            return null;
-        }
-        return this.configuration.find(conf => conf.selectableAtKey === key) || null;
-    }
-    getOrCreateModelNode(item, configuration) {
-        const node = this.dataChange.value.find(n => n.model.id === item.id && n.model.__typename === item.__typename);
-        return node || new HierarchicModelNode(item, configuration);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalHierarchicSelectorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalHierarchicSelectorService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalHierarchicSelectorService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
-class FacetSelectorComponent {
-    data = inject(NATURAL_DROPDOWN_DATA);
-    dropdownRef = inject(NaturalDropdownRef);
-    // Never has a real value
-    renderedValue = new BehaviorSubject('');
-    facets = this.data.configuration.facets;
-    selection = null;
-    /**
-     * Get value, including rich object types
-     */
-    getCondition() {
-        return {};
-    }
-    /**
-     * Allow to close the dropdown with a valid value
-     */
-    close() {
-        if (this.selection) {
-            this.dropdownRef.close({
-                condition: {},
-                facet: this.selection,
-            });
-        }
-    }
-    isValid() {
-        return !!this.selection;
-    }
-    isDirty() {
-        return true;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: FacetSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: FacetSelectorComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "@if (data.title) {\n    <div class=\"dropdown-title mat-body-2\">{{ data.title }}</div>\n}\n<mat-nav-list>\n    @for (facet of facets; track $index) {\n        <mat-list-item (click)=\"selection = facet; close()\">\n            <a>{{ facet.display }}</a>\n        </mat-list-item>\n    }\n</mat-nav-list>\n", styles: [".mat-nav-list{padding:0}.dropdown-title{opacity:.7;padding:5px;font-variant:all-small-caps;font-size:18px}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "component", type: i4$1.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i4$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: FacetSelectorComponent, decorators: [{
-            type: Component,
-            args: [{ imports: [MatListModule], template: "@if (data.title) {\n    <div class=\"dropdown-title mat-body-2\">{{ data.title }}</div>\n}\n<mat-nav-list>\n    @for (facet of facets; track $index) {\n        <mat-list-item (click)=\"selection = facet; close()\">\n            <a>{{ facet.display }}</a>\n        </mat-list-item>\n    }\n</mat-nav-list>\n", styles: [".mat-nav-list{padding:0}.dropdown-title{opacity:.7;padding:5px;font-variant:all-small-caps;font-size:18px}\n"] }]
-        }] });
-
-// Required to check invalid fields when initializing natural-search
-class AlwaysErrorStateMatcher {
-    isErrorState(control) {
-        return !!control && control.invalid;
-    }
-}
-function isComponentValid(component) {
-    return () => {
-        if (!component.isValid()) {
-            return { component: true };
-        }
-        return null;
-    };
-}
-class NaturalInputComponent {
-    element = inject(ElementRef);
-    dropdownService = inject(NaturalDropdownService);
-    injector = inject(EnvironmentInjector);
-    /**
-     * Controls the ripple effect, used when opening a dropdown
-     */
-    ripple = viewChild.required(MatRipple);
-    /**
-     * Native element ref for <input> related to this <natural-input> component
-     */
-    input = viewChild.required('input');
-    /**
-     * Label for this field
-     */
-    placeholder;
-    /**
-     * Name of the field on which do a global search (without facet)
-     */
-    searchFieldName = 'search';
-    /**
-     * Selected setted for this component
-     */
-    selection = null;
-    /**
-     * Available facets, allows the user to pick one, than generated then a selection
-     */
-    facets;
-    /**
-     * Text display in the dropdown to select the facet
-     */
-    dropdownTitle = '';
-    /**
-     * Emits when user a added/updated/deleted a search (from global context or from facet)
-     */
-    selectionChange = output();
-    /**
-     * Emits when user removes the search by pressing the cross icon
-     */
-    cleared = output();
-    /**
-     * Selected facet from the list of available facets
+     * Selected facet from the list of available facets
      */
     facet = null;
     /**
@@ -8082,6 +7815,273 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                 type: Input
             }] } });
 
+class HierarchicFlatNode {
+    node;
+    name;
+    level;
+    expandable;
+    selectable;
+    deselectable;
+    loading = false;
+    constructor(node, name, level = 0, expandable = false, selectable = true, deselectable = true) {
+        this.node = node;
+        this.name = name;
+        this.level = level;
+        this.expandable = expandable;
+        this.selectable = selectable;
+        this.deselectable = deselectable;
+    }
+}
+
+class HierarchicModelNode {
+    model;
+    config;
+    childrenChange = new BehaviorSubject([]);
+    constructor(model, config) {
+        this.model = model;
+        this.config = config;
+    }
+    get children() {
+        return this.childrenChange.value;
+    }
+}
+
+class NaturalHierarchicSelectorService {
+    injector = inject(Injector);
+    /**
+     * Stores the global result of the tree
+     * This observable contains Node.
+     * When it's updated, the TreeController and TreeFlattener process the new array to generate the flat tree.
+     */
+    dataChange = new BehaviorSubject([]);
+    /**
+     * Configuration for relations and selection constraints
+     *
+     * The list should be sorted in the order of the hierarchic (list first parent rules, then child rules)
+     */
+    configuration = [];
+    /**
+     * Init component by saving the complete configuration, and then retrieving root elements.
+     * Updates **another** observable (this.dataChange) when data is retrieved.
+     */
+    init(config, contextFilter = null, searchVariables = null) {
+        this.validateConfiguration(config);
+        this.configuration = config;
+        return this.getList(null, contextFilter, searchVariables).pipe(map(data => this.dataChange.next(data)));
+    }
+    /**
+     * Get list of children, considering given FlatNode id as a parent.
+     * Mark loading status individually on nodes.
+     */
+    loadChildren(flatNode, contextFilter = null) {
+        // Dont refetch children. Improve performances
+        // Prevents interferences between HierarchicModelNode structure and angular components navigation.
+        // Prevents a bug where grand children were lost if closing root
+        if (flatNode.node.children.length) {
+            return;
+        }
+        flatNode.loading = true;
+        this.getList(flatNode, contextFilter)
+            .pipe(finalize$1(() => (flatNode.loading = false)))
+            .subscribe(items => {
+            flatNode.node.childrenChange.next(items);
+            this.dataChange.next(this.dataChange.value);
+        });
+    }
+    search(searchVariables, contextFilter = null) {
+        this.getList(null, contextFilter, searchVariables).subscribe(items => {
+            this.dataChange.next(items);
+        });
+    }
+    /**
+     * Retrieve elements from the server
+     * Get root elements if node is null, or child elements if node is given
+     */
+    getList(node = null, contextFilters = null, searchVariables = null) {
+        const configurations = this.getContextualizedConfigs(node, contextFilters, searchVariables);
+        const observables = configurations.map(c => c.injectedService.getAll(c.variablesManager));
+        // Fire queries, and merge results, transforming apollo items into Node Object.
+        return forkJoin(observables).pipe(map(results => {
+            const listing = [];
+            // For each result of an observable
+            for (let i = 0; i < results.length; i++) {
+                // For each item of the result, convert into Node object
+                for (const item of results[i].items) {
+                    listing.push(this.getOrCreateModelNode(item, configurations[i].configuration));
+                }
+            }
+            return listing;
+        }));
+    }
+    countItems(node, contextFilters = null) {
+        const configurations = this.getContextualizedConfigs(node, contextFilters, null);
+        const observables = configurations.map(c => c.injectedService.count(c.variablesManager).pipe(first$1()));
+        forkJoin(observables).subscribe(results => {
+            const totalItems = results.reduce((total, length) => total + length, 0);
+            node.expandable = totalItems > 0;
+        });
+    }
+    getContextualizedConfigs(node = null, contextFilters = null, searchVariables = null) {
+        const configsAndServices = [];
+        // Considering the whole configuration may cause queries with no/wrong results we have imperatively to avoid !
+        // e.g there are cross dependencies between equipments and taxonomies filters. Both have "parents" and "taxonomies" filters...
+        // When clicking on a equipment, the configuration of taxonomies with match "parents" filter, but use the id of the equipment
+        // To fix this, we should only consider configuration after the one given by the node passed as argument.
+        // That would mean : no child can affect parent.
+        // That would mean : sorting in the configuration have semantic/hierarchy implications
+        const configs = node ? this.getNextConfigs(node.node.config) : this.configuration;
+        const pagination = { pageIndex: 0, pageSize: 999 };
+        for (const config of configs) {
+            const contextFilter = this.getFilterByService(config, contextFilters);
+            const filter = this.getServiceFilter(node, config, contextFilter, !!searchVariables);
+            if (!filter) {
+                continue;
+            }
+            const variablesManager = new NaturalQueryVariablesManager();
+            variablesManager.set('variables', { filter: filter, pagination: pagination });
+            variablesManager.set('config-filter', { filter: config.filter });
+            if (searchVariables) {
+                variablesManager.set('natural-search', searchVariables);
+            }
+            const injectedService = this.injector.get(config.service);
+            configsAndServices.push({
+                configuration: config,
+                injectedService: injectedService,
+                variablesManager: variablesManager,
+            });
+        }
+        return configsAndServices;
+    }
+    /**
+     * Return models matching given FlatNodes
+     * Returns a Literal of models grouped by their configuration attribute "selectableAtKey"
+     */
+    toOrganizedSelection(nodes) {
+        const selection = this.configuration.reduce((group, config) => {
+            if (config.selectableAtKey) {
+                group[config.selectableAtKey] = [];
+            }
+            return group;
+        }, {});
+        for (const node of nodes) {
+            if (node.config.selectableAtKey) {
+                selection[node.config.selectableAtKey].push(node.model);
+            }
+        }
+        return selection;
+    }
+    /**
+     * Transforms an OrganizedModelSelection into a list of ModelNodes
+     */
+    fromOrganizedSelection(organizedModelSelection) {
+        if (!organizedModelSelection) {
+            return [];
+        }
+        const result = [];
+        for (const selectableAtKey of Object.keys(organizedModelSelection)) {
+            const config = this.getConfigurationBySelectableKey(selectableAtKey);
+            if (config) {
+                for (const model of organizedModelSelection[selectableAtKey]) {
+                    result.push(new HierarchicModelNode(model, config));
+                }
+            }
+        }
+        return result;
+    }
+    /**
+     * Checks that each configuration.selectableAtKey attribute is unique
+     */
+    validateConfiguration(configurations) {
+        const selectableAtKeyAttributes = [];
+        for (const config of configurations) {
+            if (config.selectableAtKey) {
+                const keyIndex = selectableAtKeyAttributes.indexOf(config.selectableAtKey);
+                if (keyIndex === -1 && config.selectableAtKey) {
+                    selectableAtKeyAttributes.push(config.selectableAtKey);
+                }
+                // TODO : remove ?
+                // This behavior maybe dangerous in case we re-open hierarchical selector with the last returned config having non-unique
+                // keys
+                if (keyIndex < -1) {
+                    console.warn('Invalid hierarchic configuration : selectableAtKey attribute should be unique');
+                }
+            }
+        }
+    }
+    /**
+     * Return configurations setup in the list after the given one
+     */
+    getNextConfigs(config) {
+        const configIndex = this.configuration.findIndex(c => c === config);
+        return this.configuration.slice(configIndex);
+    }
+    /**
+     * Builds queryVariables filter for children query
+     */
+    getServiceFilter(flatNode, config, contextFilter = null, allDeeps = false) {
+        const fieldCondition = {};
+        // if no parent, filter empty elements
+        if (!flatNode) {
+            if (!config.parentsRelationNames) {
+                return contextFilter ? contextFilter : {};
+            }
+            if (!allDeeps) {
+                config.parentsRelationNames.forEach(f => {
+                    fieldCondition[f] = { empty: {} };
+                });
+            }
+        }
+        else {
+            if (!flatNode.node.config.childrenRelationNames || !config.parentsRelationNames) {
+                return null;
+            }
+            const matchingFilters = intersection(flatNode.node.config.childrenRelationNames, config.parentsRelationNames);
+            if (!matchingFilters.length) {
+                return null;
+            }
+            fieldCondition[matchingFilters[0]] = { have: { values: [flatNode.node.model.id] } };
+        }
+        const filters = { groups: [{ conditions: [fieldCondition] }] };
+        // todo : is it right ? shouldn't it be managed with QueryVariablesManager's channels ? ?
+        if (contextFilter) {
+            filters.groups.push(...contextFilter.groups);
+        }
+        return filters;
+    }
+    /**
+     * Return a context filter applicable to the service for given config
+     *
+     * @param config Applicable config
+     * @param contextFilters List of context filters
+     */
+    getFilterByService(config, contextFilters) {
+        if (!contextFilters || !config) {
+            return null;
+        }
+        const filter = contextFilters.find(f => f.service === config.service);
+        return filter ? filter.filter : null;
+    }
+    /**
+     * Search in configurations.selectableAtKey attribute to find given key and return the configuration
+     */
+    getConfigurationBySelectableKey(key) {
+        if (!this.configuration) {
+            return null;
+        }
+        return this.configuration.find(conf => conf.selectableAtKey === key) || null;
+    }
+    getOrCreateModelNode(item, configuration) {
+        const node = this.dataChange.value.find(n => n.model.id === item.id && n.model.__typename === item.__typename);
+        return node || new HierarchicModelNode(item, configuration);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalHierarchicSelectorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalHierarchicSelectorService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalHierarchicSelectorService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 class NaturalHierarchicSelectorComponent {
     destroyRef = inject(DestroyRef);
     hierarchicSelectorService = inject(NaturalHierarchicSelectorService);
@@ -8118,6 +8118,14 @@ class NaturalHierarchicSelectorComponent {
      * Selections to apply on natural-search on component initialisation
      */
     searchSelections = [];
+    /**
+     * Select all fetched items of the current search result
+     *
+     * Use very carefully as recursivity is ignored. The selection includes children (if any) even if the child list has been closed
+     *
+     * Should be used __only__ for non-recursive use cases. Avoid with recursive because it's not intuitive for end user
+     */
+    allowSelectAll = input(false);
     /**
      * Emits when natural-search selections change
      */
@@ -8209,6 +8217,14 @@ class NaturalHierarchicSelectorComponent {
             }
         }
     }
+    selectAll() {
+        this.flatNodeMap.forEach(flatNode => {
+            if (!this.isNodeSelected(flatNode.node)) {
+                this.selectFlatNode(flatNode);
+            }
+        });
+        this.updateSelection(this.selectedNodes);
+    }
     /**
      * When unselecting an element from the mat-chips, it can be deep in the hierarchy, and the tree element may not exist...
      * ... but we still need to remove the element from the mat-chips list.
@@ -8385,8 +8401,8 @@ class NaturalHierarchicSelectorComponent {
         replaceObjectKeepingReference(this.selected, organizedFlatNodesSelection);
         this.selectionChange.emit(organizedFlatNodesSelection);
     }
-    isNodeSelected(node) {
-        const key = this.getMapKey(node.model);
+    isNodeSelected(modelNode) {
+        const key = this.getMapKey(modelNode.model);
         return this.selectedNodes.some(n => this.getMapKey(n.model) === key);
     }
     getFlatNode(node) {
@@ -8422,7 +8438,7 @@ class NaturalHierarchicSelectorComponent {
         return model.__typename + '-' + model.id;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalHierarchicSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: NaturalHierarchicSelectorComponent, isStandalone: true, selector: "natural-hierarchic-selector", inputs: { displayWith: "displayWith", config: "config", multiple: "multiple", selected: "selected", allowUnselect: "allowUnselect", filters: "filters", searchFacets: "searchFacets", searchSelections: "searchSelections" }, outputs: { searchSelectionChange: "searchSelectionChange", selectionChange: "selectionChange" }, providers: [NaturalHierarchicSelectorService], usesOnChanges: true, ngImport: i0, template: "<div [style.margin-bottom.px]=\"20\">\n    <natural-search [facets]=\"searchFacets\" [selections]=\"searchSelections\" (selectionChange)=\"search($event)\" />\n</div>\n\n<div class=\"body\">\n    @if (loading) {\n        <mat-progress-spinner mode=\"indeterminate\" style=\"margin: 10px\" [diameter]=\"36\" />\n    }\n\n    <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n        <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding [ngClass]=\"{leaf: !node.expandable}\">\n            @if (node.expandable) {\n                <button\n                    mat-icon-button\n                    matTreeNodeToggle\n                    [attr.aria-label]=\"'toggle ' + node.name\"\n                    (click)=\"loadChildren(node)\"\n                >\n                    @if (node.loading) {\n                        <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"24\" [strokeWidth]=\"5\" />\n                    }\n                    @if (!node.loading) {\n                        <mat-icon [naturalIcon]=\"treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'\" />\n                    }\n                </button>\n            }\n\n            <mat-checkbox\n                style=\"margin-right: 10px\"\n                [checked]=\"flatNodesSelection.isSelected(node)\"\n                [disabled]=\"!isNodeTogglable(node)\"\n                (change)=\"toggleFlatNode(node)\"\n            >\n                @if (node.node.config.icon) {\n                    <mat-icon style=\"margin-right: 10px\" [naturalIcon]=\"node.node.config.icon\" />\n                }\n                <span>{{ node.name }}</span>\n            </mat-checkbox>\n        </mat-tree-node>\n    </mat-tree>\n\n    <mat-chip-listbox aria-orientation=\"vertical\" class=\"mat-mdc-chip-set-stacked\">\n        @for (node of selectedNodes; track node.model.id) {\n            <mat-chip-option [removable]=\"true\" [selectable]=\"false\" (removed)=\"unselectModelNode(node)\">\n                @if (node.config.icon) {\n                    <mat-icon matChipAvatar [naturalIcon]=\"node.config.icon\" />\n                }\n                {{ node.model.name || node.model.fullName }}\n                <button matChipRemove>\n                    <mat-icon naturalIcon=\"cancel\" />\n                </button>\n            </mat-chip-option>\n        } @empty {\n            <p class=\"mat-body nat-padding-horizontal\" i18n>Aucune s\u00E9lection</p>\n        }\n    </mat-chip-listbox>\n</div>\n\n@if (!loading && !dataSource.data.length) {\n    <div i18n>Aucun r\u00E9sultat</div>\n}\n", styles: [":host{display:block}:host ul,:host li{-webkit-margin-before:0;-webkit-margin-after:0;list-style-type:none}:host mat-icon{width:18px;height:18px;font-size:18px}:host .mat-tree-node.leaf{margin-left:48px}:host .body{display:flex;flex-direction:row;justify-content:space-between}:host .body mat-tree{flex:66}:host .body mat-chip-listbox{flex:33}:host mat-tree{flex-shrink:0}:host mat-chip-listbox{margin-left:10px}\n"], dependencies: [{ kind: "component", type: NaturalSearchComponent, selector: "natural-search", inputs: ["placeholder", "facets", "multipleGroups", "dropdownTitle", "selections"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i3$2.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i3$2.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i3$2.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i3$2.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i3$2.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "directive", type: i7.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: i7.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i7.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: i7.MatChipRemove, selector: "[matChipRemove]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: NaturalHierarchicSelectorComponent, isStandalone: true, selector: "natural-hierarchic-selector", inputs: { displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: false, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: false, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, allowUnselect: { classPropertyName: "allowUnselect", publicName: "allowUnselect", isSignal: false, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: false, isRequired: false, transformFunction: null }, searchFacets: { classPropertyName: "searchFacets", publicName: "searchFacets", isSignal: false, isRequired: false, transformFunction: null }, searchSelections: { classPropertyName: "searchSelections", publicName: "searchSelections", isSignal: false, isRequired: false, transformFunction: null }, allowSelectAll: { classPropertyName: "allowSelectAll", publicName: "allowSelectAll", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchSelectionChange: "searchSelectionChange", selectionChange: "selectionChange" }, providers: [NaturalHierarchicSelectorService], usesOnChanges: true, ngImport: i0, template: "<div [style.margin-bottom.px]=\"20\">\n    <natural-search [facets]=\"searchFacets\" [selections]=\"searchSelections\" (selectionChange)=\"search($event)\" />\n</div>\n\n@if (allowSelectAll() && multiple) {\n    <a i18n mat-button (click)=\"selectAll()\">Tout s\u00E9lectionner</a>\n}\n\n<div class=\"body\">\n    @if (loading) {\n        <mat-progress-spinner mode=\"indeterminate\" style=\"margin: 10px\" [diameter]=\"36\" />\n    }\n\n    <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n        <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding [ngClass]=\"{leaf: !node.expandable}\">\n            @if (node.expandable) {\n                <button\n                    mat-icon-button\n                    matTreeNodeToggle\n                    [attr.aria-label]=\"'toggle ' + node.name\"\n                    (click)=\"loadChildren(node)\"\n                >\n                    @if (node.loading) {\n                        <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"24\" [strokeWidth]=\"5\" />\n                    }\n                    @if (!node.loading) {\n                        <mat-icon [naturalIcon]=\"treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'\" />\n                    }\n                </button>\n            }\n\n            <mat-checkbox\n                style=\"margin-right: 10px\"\n                [checked]=\"flatNodesSelection.isSelected(node)\"\n                [disabled]=\"!isNodeTogglable(node)\"\n                (change)=\"toggleFlatNode(node)\"\n            >\n                @if (node.node.config.icon) {\n                    <mat-icon style=\"margin-right: 10px\" [naturalIcon]=\"node.node.config.icon\" />\n                }\n                <span>{{ node.name }}</span>\n            </mat-checkbox>\n        </mat-tree-node>\n    </mat-tree>\n\n    <mat-chip-listbox aria-orientation=\"vertical\" class=\"mat-mdc-chip-set-stacked\">\n        @for (node of selectedNodes; track node.model.id) {\n            <mat-chip-option [removable]=\"true\" [selectable]=\"false\" (removed)=\"unselectModelNode(node)\">\n                @if (node.config.icon) {\n                    <mat-icon matChipAvatar [naturalIcon]=\"node.config.icon\" />\n                }\n                {{ node.model.name || node.model.fullName }}\n                <button matChipRemove>\n                    <mat-icon naturalIcon=\"cancel\" />\n                </button>\n            </mat-chip-option>\n        } @empty {\n            <p class=\"mat-body nat-padding-horizontal\" i18n>Aucune s\u00E9lection</p>\n        }\n    </mat-chip-listbox>\n</div>\n\n@if (!loading && !dataSource.data.length) {\n    <div i18n>Aucun r\u00E9sultat</div>\n}\n", styles: [":host{display:block}:host ul,:host li{-webkit-margin-before:0;-webkit-margin-after:0;list-style-type:none}:host mat-icon{width:18px;height:18px;font-size:18px}:host .select-all{margin-bottom:5px}:host .mat-tree-node.leaf{margin-left:48px}:host .body{display:flex;flex-direction:row;justify-content:space-between}:host .body mat-tree{flex:66}:host .body mat-chip-listbox{flex:33}:host mat-tree{flex-shrink:0}:host mat-chip-listbox{margin-left:10px}\n"], dependencies: [{ kind: "component", type: NaturalSearchComponent, selector: "natural-search", inputs: ["placeholder", "facets", "multipleGroups", "dropdownTitle", "selections"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i3$2.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i3$2.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i3$2.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i3$2.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i3$2.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "directive", type: i7.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: i7.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i7.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: i7.MatChipRemove, selector: "[matChipRemove]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalHierarchicSelectorComponent, decorators: [{
             type: Component,
@@ -8436,7 +8452,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                         NaturalIconDirective,
                         MatCheckboxModule,
                         MatChipsModule,
-                    ], template: "<div [style.margin-bottom.px]=\"20\">\n    <natural-search [facets]=\"searchFacets\" [selections]=\"searchSelections\" (selectionChange)=\"search($event)\" />\n</div>\n\n<div class=\"body\">\n    @if (loading) {\n        <mat-progress-spinner mode=\"indeterminate\" style=\"margin: 10px\" [diameter]=\"36\" />\n    }\n\n    <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n        <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding [ngClass]=\"{leaf: !node.expandable}\">\n            @if (node.expandable) {\n                <button\n                    mat-icon-button\n                    matTreeNodeToggle\n                    [attr.aria-label]=\"'toggle ' + node.name\"\n                    (click)=\"loadChildren(node)\"\n                >\n                    @if (node.loading) {\n                        <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"24\" [strokeWidth]=\"5\" />\n                    }\n                    @if (!node.loading) {\n                        <mat-icon [naturalIcon]=\"treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'\" />\n                    }\n                </button>\n            }\n\n            <mat-checkbox\n                style=\"margin-right: 10px\"\n                [checked]=\"flatNodesSelection.isSelected(node)\"\n                [disabled]=\"!isNodeTogglable(node)\"\n                (change)=\"toggleFlatNode(node)\"\n            >\n                @if (node.node.config.icon) {\n                    <mat-icon style=\"margin-right: 10px\" [naturalIcon]=\"node.node.config.icon\" />\n                }\n                <span>{{ node.name }}</span>\n            </mat-checkbox>\n        </mat-tree-node>\n    </mat-tree>\n\n    <mat-chip-listbox aria-orientation=\"vertical\" class=\"mat-mdc-chip-set-stacked\">\n        @for (node of selectedNodes; track node.model.id) {\n            <mat-chip-option [removable]=\"true\" [selectable]=\"false\" (removed)=\"unselectModelNode(node)\">\n                @if (node.config.icon) {\n                    <mat-icon matChipAvatar [naturalIcon]=\"node.config.icon\" />\n                }\n                {{ node.model.name || node.model.fullName }}\n                <button matChipRemove>\n                    <mat-icon naturalIcon=\"cancel\" />\n                </button>\n            </mat-chip-option>\n        } @empty {\n            <p class=\"mat-body nat-padding-horizontal\" i18n>Aucune s\u00E9lection</p>\n        }\n    </mat-chip-listbox>\n</div>\n\n@if (!loading && !dataSource.data.length) {\n    <div i18n>Aucun r\u00E9sultat</div>\n}\n", styles: [":host{display:block}:host ul,:host li{-webkit-margin-before:0;-webkit-margin-after:0;list-style-type:none}:host mat-icon{width:18px;height:18px;font-size:18px}:host .mat-tree-node.leaf{margin-left:48px}:host .body{display:flex;flex-direction:row;justify-content:space-between}:host .body mat-tree{flex:66}:host .body mat-chip-listbox{flex:33}:host mat-tree{flex-shrink:0}:host mat-chip-listbox{margin-left:10px}\n"] }]
+                    ], template: "<div [style.margin-bottom.px]=\"20\">\n    <natural-search [facets]=\"searchFacets\" [selections]=\"searchSelections\" (selectionChange)=\"search($event)\" />\n</div>\n\n@if (allowSelectAll() && multiple) {\n    <a i18n mat-button (click)=\"selectAll()\">Tout s\u00E9lectionner</a>\n}\n\n<div class=\"body\">\n    @if (loading) {\n        <mat-progress-spinner mode=\"indeterminate\" style=\"margin: 10px\" [diameter]=\"36\" />\n    }\n\n    <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n        <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding [ngClass]=\"{leaf: !node.expandable}\">\n            @if (node.expandable) {\n                <button\n                    mat-icon-button\n                    matTreeNodeToggle\n                    [attr.aria-label]=\"'toggle ' + node.name\"\n                    (click)=\"loadChildren(node)\"\n                >\n                    @if (node.loading) {\n                        <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"24\" [strokeWidth]=\"5\" />\n                    }\n                    @if (!node.loading) {\n                        <mat-icon [naturalIcon]=\"treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'\" />\n                    }\n                </button>\n            }\n\n            <mat-checkbox\n                style=\"margin-right: 10px\"\n                [checked]=\"flatNodesSelection.isSelected(node)\"\n                [disabled]=\"!isNodeTogglable(node)\"\n                (change)=\"toggleFlatNode(node)\"\n            >\n                @if (node.node.config.icon) {\n                    <mat-icon style=\"margin-right: 10px\" [naturalIcon]=\"node.node.config.icon\" />\n                }\n                <span>{{ node.name }}</span>\n            </mat-checkbox>\n        </mat-tree-node>\n    </mat-tree>\n\n    <mat-chip-listbox aria-orientation=\"vertical\" class=\"mat-mdc-chip-set-stacked\">\n        @for (node of selectedNodes; track node.model.id) {\n            <mat-chip-option [removable]=\"true\" [selectable]=\"false\" (removed)=\"unselectModelNode(node)\">\n                @if (node.config.icon) {\n                    <mat-icon matChipAvatar [naturalIcon]=\"node.config.icon\" />\n                }\n                {{ node.model.name || node.model.fullName }}\n                <button matChipRemove>\n                    <mat-icon naturalIcon=\"cancel\" />\n                </button>\n            </mat-chip-option>\n        } @empty {\n            <p class=\"mat-body nat-padding-horizontal\" i18n>Aucune s\u00E9lection</p>\n        }\n    </mat-chip-listbox>\n</div>\n\n@if (!loading && !dataSource.data.length) {\n    <div i18n>Aucun r\u00E9sultat</div>\n}\n", styles: [":host{display:block}:host ul,:host li{-webkit-margin-before:0;-webkit-margin-after:0;list-style-type:none}:host mat-icon{width:18px;height:18px;font-size:18px}:host .select-all{margin-bottom:5px}:host .mat-tree-node.leaf{margin-left:48px}:host .body{display:flex;flex-direction:row;justify-content:space-between}:host .body mat-tree{flex:66}:host .body mat-chip-listbox{flex:33}:host mat-tree{flex-shrink:0}:host mat-chip-listbox{margin-left:10px}\n"] }]
         }], propDecorators: { displayWith: [{
                 type: Input
             }], config: [{
@@ -8507,7 +8523,7 @@ class TypeHierarchicSelectorComponent extends AbstractAssociationSelectComponent
         return selection[this.configuration.key].length ? selection : null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: TypeHierarchicSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: TypeHierarchicSelectorComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n    <mat-form-field style=\"max-width: 7em; margin-right: 1em\">\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select panelWidth=\"\" [formControl]=\"operatorCtrl\" [required]=\"true\">\n            @for (item of operators; track item) {\n                <mat-option [value]=\"item.key\">\n                    {{ item.label }}\n                </mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    @if (requireValueCtrl) {\n        <natural-hierarchic-selector\n            style=\"margin-right: 20px\"\n            [config]=\"configuration.config\"\n            [filters]=\"configuration.filters\"\n            [multiple]=\"true\"\n            [selected]=\"valueCtrl.value || {}\"\n            (selectionChange)=\"selectionChange($event)\"\n        />\n    }\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.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", "canSelectNullableOptions"], 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: "ngmodule", type: MatOptionModule }, { kind: "component", type: NaturalHierarchicSelectorComponent, selector: "natural-hierarchic-selector", inputs: ["displayWith", "config", "multiple", "selected", "allowUnselect", "filters", "searchFacets", "searchSelections"], outputs: ["searchSelectionChange", "selectionChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: TypeHierarchicSelectorComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n    <mat-form-field style=\"max-width: 7em; margin-right: 1em\">\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select panelWidth=\"\" [formControl]=\"operatorCtrl\" [required]=\"true\">\n            @for (item of operators; track item) {\n                <mat-option [value]=\"item.key\">\n                    {{ item.label }}\n                </mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    @if (requireValueCtrl) {\n        <natural-hierarchic-selector\n            style=\"margin-right: 20px\"\n            [config]=\"configuration.config\"\n            [filters]=\"configuration.filters\"\n            [multiple]=\"true\"\n            [selected]=\"valueCtrl.value || {}\"\n            (selectionChange)=\"selectionChange($event)\"\n        />\n    }\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.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", "canSelectNullableOptions"], 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: "ngmodule", type: MatOptionModule }, { kind: "component", type: NaturalHierarchicSelectorComponent, selector: "natural-hierarchic-selector", inputs: ["displayWith", "config", "multiple", "selected", "allowUnselect", "filters", "searchFacets", "searchSelections", "allowSelectAll"], outputs: ["searchSelectionChange", "selectionChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: TypeHierarchicSelectorComponent, decorators: [{
             type: Component,
@@ -9502,11 +9518,11 @@ class NaturalHierarchicSelectorDialogComponent {
         this.dialogRef.close(result);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalHierarchicSelectorDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: NaturalHierarchicSelectorDialogComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<h2 i18n mat-dialog-title>S\u00E9lection</h2>\n\n<mat-dialog-content>\n    <natural-hierarchic-selector\n        [selected]=\"config.hierarchicSelection ?? {}\"\n        [config]=\"config.hierarchicConfig\"\n        [filters]=\"config.hierarchicFilters\"\n        [multiple]=\"config.multiple ?? false\"\n        [allowUnselect]=\"config.allowUnselect ?? true\"\n        [searchFacets]=\"config.searchFacets ?? []\"\n        [searchSelections]=\"config.searchSelections ?? []\"\n        (selectionChange)=\"config.hierarchicSelection = $event\"\n        (searchSelectionChange)=\"searchSelectionsOutput = $event\"\n    />\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n    <button mat-dialog-close mat-button i18n>Annuler</button>\n    <button color=\"primary\" mat-raised-button (click)=\"close(config.hierarchicSelection)\"\n        ><span i18n>Valider</span>\n    </button>\n</mat-dialog-actions>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: NaturalHierarchicSelectorComponent, selector: "natural-hierarchic-selector", inputs: ["displayWith", "config", "multiple", "selected", "allowUnselect", "filters", "searchFacets", "searchSelections"], outputs: ["searchSelectionChange", "selectionChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: NaturalHierarchicSelectorDialogComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<h2 i18n mat-dialog-title>S\u00E9lection</h2>\n\n<mat-dialog-content>\n    <natural-hierarchic-selector\n        [selected]=\"config.hierarchicSelection ?? {}\"\n        [config]=\"config.hierarchicConfig\"\n        [filters]=\"config.hierarchicFilters\"\n        [multiple]=\"config.multiple ?? false\"\n        [allowUnselect]=\"config.allowUnselect ?? true\"\n        [allowSelectAll]=\"config.allowSelectAll ?? false\"\n        [searchFacets]=\"config.searchFacets ?? []\"\n        [searchSelections]=\"config.searchSelections ?? []\"\n        (selectionChange)=\"config.hierarchicSelection = $event\"\n        (searchSelectionChange)=\"searchSelectionsOutput = $event\"\n    />\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n    <button mat-dialog-close mat-button i18n>Annuler</button>\n    <button color=\"primary\" mat-raised-button (click)=\"close(config.hierarchicSelection)\"\n        ><span i18n>Valider</span>\n    </button>\n</mat-dialog-actions>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: NaturalHierarchicSelectorComponent, selector: "natural-hierarchic-selector", inputs: ["displayWith", "config", "multiple", "selected", "allowUnselect", "filters", "searchFacets", "searchSelections", "allowSelectAll"], outputs: ["searchSelectionChange", "selectionChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalHierarchicSelectorDialogComponent, decorators: [{
             type: Component,
-            args: [{ imports: [MatDialogModule, NaturalHierarchicSelectorComponent, MatButtonModule], template: "<h2 i18n mat-dialog-title>S\u00E9lection</h2>\n\n<mat-dialog-content>\n    <natural-hierarchic-selector\n        [selected]=\"config.hierarchicSelection ?? {}\"\n        [config]=\"config.hierarchicConfig\"\n        [filters]=\"config.hierarchicFilters\"\n        [multiple]=\"config.multiple ?? false\"\n        [allowUnselect]=\"config.allowUnselect ?? true\"\n        [searchFacets]=\"config.searchFacets ?? []\"\n        [searchSelections]=\"config.searchSelections ?? []\"\n        (selectionChange)=\"config.hierarchicSelection = $event\"\n        (searchSelectionChange)=\"searchSelectionsOutput = $event\"\n    />\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n    <button mat-dialog-close mat-button i18n>Annuler</button>\n    <button color=\"primary\" mat-raised-button (click)=\"close(config.hierarchicSelection)\"\n        ><span i18n>Valider</span>\n    </button>\n</mat-dialog-actions>\n" }]
+            args: [{ imports: [MatDialogModule, NaturalHierarchicSelectorComponent, MatButtonModule], template: "<h2 i18n mat-dialog-title>S\u00E9lection</h2>\n\n<mat-dialog-content>\n    <natural-hierarchic-selector\n        [selected]=\"config.hierarchicSelection ?? {}\"\n        [config]=\"config.hierarchicConfig\"\n        [filters]=\"config.hierarchicFilters\"\n        [multiple]=\"config.multiple ?? false\"\n        [allowUnselect]=\"config.allowUnselect ?? true\"\n        [allowSelectAll]=\"config.allowSelectAll ?? false\"\n        [searchFacets]=\"config.searchFacets ?? []\"\n        [searchSelections]=\"config.searchSelections ?? []\"\n        (selectionChange)=\"config.hierarchicSelection = $event\"\n        (searchSelectionChange)=\"searchSelectionsOutput = $event\"\n    />\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n    <button mat-dialog-close mat-button i18n>Annuler</button>\n    <button color=\"primary\" mat-raised-button (click)=\"close(config.hierarchicSelection)\"\n        ><span i18n>Valider</span>\n    </button>\n</mat-dialog-actions>\n" }]
         }], ctorParameters: () => [] });
 
 class NaturalHierarchicSelectorDialogService {