@ecodev/natural 58.0.3 → 58.0.5

package/fesm2022/ecodev-natural.mjs

@@ -2302,14 +2302,16 @@ function money(control) {
  * Cumulate all changes made to an object over time
  */
 class CumulativeChanges {
-    #original = {};
-    #diff = {};
+    constructor() {
+        this.original = {};
+        this.diff = {};
+    }
     /**
      * Initialize the original values, should be called exactly one time per instance
      */
     initialize(originalValues) {
-        this.#original = cloneDeep(originalValues);
-        this.#diff = {};
+        this.original = cloneDeep(originalValues);
+        this.diff = {};
     }
     /**
      * Returns a literal that contains only the keys whose values have been changed by this call or any previous calls.
@@ -2323,25 +2325,25 @@ class CumulativeChanges {
      */
     differences(newValues) {
         Object.keys(newValues).forEach(key => {
-            if (key in this.#diff ||
+            if (key in this.diff ||
                 (newValues[key] !== undefined &&
-                    (!(key in this.#original) || !isEqual(this.#original[key], newValues[key])))) {
-                this.#diff[key] = newValues[key];
+                    (!(key in this.original) || !isEqual(this.original[key], newValues[key])))) {
+                this.diff[key] = newValues[key];
             }
         });
-        return Object.keys(this.#diff).length ? this.#diff : null;
+        return Object.keys(this.diff).length ? this.diff : null;
     }
     /**
      * Commit the given new values, so they are not treated as differences anymore.
      */
     commit(newValues) {
-        this.#original = {
-            ...this.#original,
+        this.original = {
+            ...this.original,
             ...cloneDeep(newValues),
         };
         Object.keys(newValues).forEach(key => {
-            if (key in this.#diff && isEqual(this.#diff[key], newValues[key])) {
-                delete this.#diff[key];
+            if (key in this.diff && isEqual(this.diff[key], newValues[key])) {
+                delete this.diff[key];
             }
         });
     }
@@ -2355,14 +2357,6 @@ function isNaturalDialogTriggerProvidedData(dialogData) {
 }
 // @dynamic
 class NaturalAbstractDetail extends NaturalAbstractPanel {
-    #dialogData;
-    /**
-     * Once set, this must not change anymore, especially not right after the creation mutation,
-     * so the form does not switch from creation mode to update mode without an actual reload of
-     * model from DB (by navigating to update page).
-     */
-    #isUpdatePage;
-    #changes;
     constructor(key, service) {
         super();
         this.key = key;
@@ -2401,14 +2395,14 @@ class NaturalAbstractDetail extends NaturalAbstractPanel {
          * Injected service
          */
         this.route = inject(ActivatedRoute);
-        this.#dialogData = inject(MAT_DIALOG_DATA, { optional: true });
+        this._dialogData = inject(MAT_DIALOG_DATA, { optional: true });
         /**
          * Once set, this must not change anymore, especially not right after the creation mutation,
          * so the form does not switch from creation mode to update mode without an actual reload of
          * model from DB (by navigating to update page).
          */
-        this.#isUpdatePage = false;
-        this.#changes = new CumulativeChanges();
+        this._isUpdatePage = false;
+        this.changes = new CumulativeChanges();
     }
     /**
      * You probably should not override this method. Instead, consider overriding `initForm()`.
@@ -2418,8 +2412,8 @@ class NaturalAbstractDetail extends NaturalAbstractPanel {
             this.initForm();
         }
         else {
-            const route = isNaturalDialogTriggerProvidedData(this.#dialogData)
-                ? this.#dialogData.activatedRoute
+            const route = isNaturalDialogTriggerProvidedData(this._dialogData)
+                ? this._dialogData.activatedRoute
                 : this.route;
             this.#subscribeToModelFromResolvedData(route);
         }
@@ -2455,7 +2449,7 @@ class NaturalAbstractDetail extends NaturalAbstractPanel {
      * This should be used instead of checking `data.model.id` directly, in order to type guard and get proper typing
      */
     isUpdatePage() {
-        return this.#isUpdatePage;
+        return this._isUpdatePage;
     }
     /**
      * Update the object on the server with the values from the form fields that were modified since
@@ -2471,15 +2465,15 @@ class NaturalAbstractDetail extends NaturalAbstractPanel {
         ifValid(this.form).subscribe(() => {
             const newValues = this.form.getRawValue();
             if (submitAllFields) {
-                this.#changes.initialize({});
+                this.changes.initialize({});
             }
             const toSubmit = {
                 id: this.data.model.id,
-                ...this.#changes.differences(newValues),
+                ...this.changes.differences(newValues),
             };
             const update = now ? this.service.updateNow(toSubmit) : this.service.update(toSubmit);
             update.subscribe(model => {
-                this.#changes.commit(newValues);
+                this.changes.commit(newValues);
                 this.alertService.info($localize `Mis à jour`);
                 this.postUpdate(model);
             });
@@ -2565,9 +2559,9 @@ class NaturalAbstractDetail extends NaturalAbstractPanel {
      * will incorrectly be called exactly 1 time per component instance, even if the object changes via route navigation.
      */
     initForm() {
-        this.#isUpdatePage = !!this.data.model.id;
+        this._isUpdatePage = !!this.data.model.id;
         this.form = this.service.getFormGroup(this.data.model);
-        this.#changes.initialize(this.form.getRawValue());
+        this.changes.initialize(this.form.getRawValue());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: NaturalAbstractDetail, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.5", type: NaturalAbstractDetail, usesInheritance: true, ngImport: i0 }); }
@@ -4538,7 +4532,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
         }] });
 
 class NaturalAbstractModelService {
-    #plural;
     /**
      *
      * @param name service and single object query name (eg. userForFront or user).
@@ -4568,7 +4561,7 @@ class NaturalAbstractModelService {
         this.creatingCache = new Map();
         this.apollo = inject(Apollo);
         this.naturalDebounceService = inject(NaturalDebounceService);
-        this.#plural = plural ?? makePlural(this.name);
+        this.plural = plural ?? makePlural(this.name);
     }
     /**
      * List of individual fields validators
@@ -4664,7 +4657,7 @@ class NaturalAbstractModelService {
      * You must subscribe to start getting results (and fetch from network).
      */
     getOne(id) {
-        return this.#prepareOneQuery(id, 'cache-and-network').pipe(takeWhile(result => result.networkStatus !== NetworkStatus.ready, true), map(result => result.data[this.name]));
+        return this.prepareOneQuery(id, 'cache-and-network').pipe(takeWhile(result => result.networkStatus !== NetworkStatus.ready, true), map(result => result.data[this.name]));
     }
     /**
      * Watch a single object
@@ -4677,9 +4670,9 @@ class NaturalAbstractModelService {
      * You **MUST** unsubscribe.
      */
     watchOne(id, fetchPolicy = 'cache-and-network') {
-        return this.#prepareOneQuery(id, fetchPolicy).pipe(map(result => result.data[this.name]));
+        return this.prepareOneQuery(id, fetchPolicy).pipe(map(result => result.data[this.name]));
     }
-    #prepareOneQuery(id, fetchPolicy) {
+    prepareOneQuery(id, fetchPolicy) {
         this.throwIfObservable(id);
         this.throwIfNotQuery(this.oneQuery);
         return this.getVariablesForOne(id).pipe(switchMap(variables => {
@@ -4906,11 +4899,11 @@ class NaturalAbstractModelService {
      * This is used for the unique validator
      */
     count(queryVariablesManager) {
-        const queryName = 'Count' + upperCaseFirstLetter(this.#plural);
+        const queryName = 'Count' + upperCaseFirstLetter(this.plural);
         const filterType = upperCaseFirstLetter(this.name) + 'Filter';
         const query = gql `
             query ${queryName} ($filter: ${filterType}) {
-            count: ${this.#plural} (filter: $filter, pagination: {pageSize: 0, pageIndex: 0}) {
+            count: ${this.plural} (filter: $filter, pagination: {pageSize: 0, pageIndex: 0}) {
             length
             }
             }`;
@@ -4953,7 +4946,7 @@ class NaturalAbstractModelService {
      * This is used to extract only the array of fetched objects out of the entire fetched data
      */
     mapAll() {
-        return map(result => result.data[this.#plural]); // See https://github.com/apollographql/apollo-client/issues/5662
+        return map(result => result.data[this.plural]); // See https://github.com/apollographql/apollo-client/issues/5662
     }
     /**
      * This is used to extract only the created object out of the entire fetched data
@@ -4973,7 +4966,7 @@ class NaturalAbstractModelService {
      * This is used to extract only flag when deleting an object
      */
     mapDelete(result) {
-        const name = this.deleteName ?? 'delete' + upperCaseFirstLetter(this.#plural);
+        const name = this.deleteName ?? 'delete' + upperCaseFirstLetter(this.plural);
         return result.data[name]; // See https://github.com/apollographql/apollo-client/issues/5662
     }
     /**
@@ -5550,7 +5543,6 @@ function getTabId(tab) {
  * </mat-tab-group>
  */
 class NaturalLinkableTabDirective extends NaturalAbstractController {
-    #isLoadingRouteConfig;
     constructor(component, route, router) {
         super();
         this.component = component;
@@ -5560,13 +5552,13 @@ class NaturalLinkableTabDirective extends NaturalAbstractController {
          * If false, disables the persistent navigation
          */
         this.naturalLinkableTab = true;
-        this.#isLoadingRouteConfig = false;
+        this.isLoadingRouteConfig = false;
         router.events.pipe(takeUntilDestroyed()).subscribe(event => {
             if (event instanceof RouteConfigLoadStart) {
-                this.#isLoadingRouteConfig = true;
+                this.isLoadingRouteConfig = true;
             }
             else if (event instanceof RouteConfigLoadEnd) {
-                this.#isLoadingRouteConfig = false;
+                this.isLoadingRouteConfig = false;
             }
         });
     }
@@ -5586,7 +5578,7 @@ class NaturalLinkableTabDirective extends NaturalAbstractController {
         });
         // When mat-tab-groups selected tab change, update url
         this.component.selectedTabChange.pipe(takeUntil$1(this.ngUnsubscribe)).subscribe(event => {
-            if (this.#isLoadingRouteConfig) {
+            if (this.isLoadingRouteConfig) {
                 return;
             }
             const activatedTabName = getTabId(event.tab);
@@ -6262,11 +6254,11 @@ class NaturalDetailHeaderComponent {
         return this.getRootLink().concat([id]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: NaturalDetailHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: NaturalDetailHeaderComponent, isStandalone: true, selector: "natural-detail-header", inputs: { currentBaseUrl: "currentBaseUrl", isPanel: "isPanel", icon: "icon", label: "label", rootLabel: "rootLabel", newLabel: "newLabel", model: "model", breadcrumbs: "breadcrumbs", listRoute: "listRoute", listFragment: "listFragment", link: "link" }, ngImport: i0, template: "<div class=\"breadcrumb\">\n    @if (rootLabel || label) {\n        <a [routerLink]=\"isPanel ? [] : getRootLink()\" [fragment]=\"listFragment\" color=\"primary\" mat-button>{{\n            rootLabel || label\n        }}</a>\n    }\n    @for (parent of breadcrumbs; track parent) {\n        /\n        <a [routerLink]=\"isPanel ? [] : getLink(parent.id)\" color=\"primary\" mat-button>\n            {{ parent?.fullName || parent?.name }}</a\n        >\n    }\n</div>\n\n<div class=\"body\">\n    @if (icon) {\n        <div style=\"width: 30px\">\n            <mat-icon [naturalIcon]=\"icon\" />\n        </div>\n    }\n    @if (!model.id) {\n        <div class=\"mat-headline-5 no-margin newLabel\">{{ newLabel }}</div>\n    }\n    @if (model.id) {\n        <div class=\"mat-headline-5 no-margin label\">{{ model.name || model.fullName || label }}</div>\n    }\n    <div>\n        <ng-content />\n    </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host .breadcrumb,:host .body{display:flex;flex-direction:row;align-items:center}:host .breadcrumb{position:relative;top:5px}:host .body{min-height:40px}:host .body>*:not(:last-child){margin-right:5px}:host .body .label,:host .body .newLabel{flex:1}@media screen and (max-width: 600px){:host .body{flex-direction:column;align-items:flex-start}:host .body>*:not(:last-child){margin-bottom:10px!important}:host .body mat-icon{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: NaturalDetailHeaderComponent, isStandalone: true, selector: "natural-detail-header", inputs: { currentBaseUrl: "currentBaseUrl", isPanel: "isPanel", icon: "icon", label: "label", rootLabel: "rootLabel", newLabel: "newLabel", model: "model", breadcrumbs: "breadcrumbs", listRoute: "listRoute", listFragment: "listFragment", link: "link" }, ngImport: i0, template: "<div class=\"breadcrumb\">\n    @if (rootLabel || label) {\n        <a [routerLink]=\"isPanel ? [] : getRootLink()\" [fragment]=\"listFragment\" color=\"primary\" mat-button>{{\n            rootLabel || label\n        }}</a>\n    }\n    @for (parent of breadcrumbs; track parent) {\n        /\n        <a [routerLink]=\"isPanel ? [] : getLink(parent.id)\" color=\"primary\" mat-button>\n            {{ parent?.fullName || parent?.name }}</a\n        >\n    }\n</div>\n\n<div class=\"body\">\n    @if (icon) {\n        <div style=\"width: 30px\">\n            <mat-icon [naturalIcon]=\"icon\" />\n        </div>\n    }\n    @if (!model.id) {\n        <div class=\"mat-headline-5 nat-no-margin newLabel\">{{ newLabel }}</div>\n    }\n    @if (model.id) {\n        <div class=\"mat-headline-5 nat-no-margin label\">{{ model.name || model.fullName || label }}</div>\n    }\n    <div>\n        <ng-content />\n    </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host .breadcrumb,:host .body{display:flex;flex-direction:row;align-items:center}:host .breadcrumb{position:relative;top:5px}:host .body{min-height:40px}:host .body>*:not(:last-child){margin-right:5px}:host .body .label,:host .body .newLabel{flex:1}@media screen and (max-width: 600px){:host .body{flex-direction:column;align-items:flex-start}:host .body>*:not(:last-child){margin-bottom:10px!important}:host .body mat-icon{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: NaturalDetailHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-detail-header', standalone: true, imports: [MatButtonModule, RouterLink, MatIconModule, NaturalIconDirective], template: "<div class=\"breadcrumb\">\n    @if (rootLabel || label) {\n        <a [routerLink]=\"isPanel ? [] : getRootLink()\" [fragment]=\"listFragment\" color=\"primary\" mat-button>{{\n            rootLabel || label\n        }}</a>\n    }\n    @for (parent of breadcrumbs; track parent) {\n        /\n        <a [routerLink]=\"isPanel ? [] : getLink(parent.id)\" color=\"primary\" mat-button>\n            {{ parent?.fullName || parent?.name }}</a\n        >\n    }\n</div>\n\n<div class=\"body\">\n    @if (icon) {\n        <div style=\"width: 30px\">\n            <mat-icon [naturalIcon]=\"icon\" />\n        </div>\n    }\n    @if (!model.id) {\n        <div class=\"mat-headline-5 no-margin newLabel\">{{ newLabel }}</div>\n    }\n    @if (model.id) {\n        <div class=\"mat-headline-5 no-margin label\">{{ model.name || model.fullName || label }}</div>\n    }\n    <div>\n        <ng-content />\n    </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host .breadcrumb,:host .body{display:flex;flex-direction:row;align-items:center}:host .breadcrumb{position:relative;top:5px}:host .body{min-height:40px}:host .body>*:not(:last-child){margin-right:5px}:host .body .label,:host .body .newLabel{flex:1}@media screen and (max-width: 600px){:host .body{flex-direction:column;align-items:flex-start}:host .body>*:not(:last-child){margin-bottom:10px!important}:host .body mat-icon{display:none}}\n"] }]
+            args: [{ selector: 'natural-detail-header', standalone: true, imports: [MatButtonModule, RouterLink, MatIconModule, NaturalIconDirective], template: "<div class=\"breadcrumb\">\n    @if (rootLabel || label) {\n        <a [routerLink]=\"isPanel ? [] : getRootLink()\" [fragment]=\"listFragment\" color=\"primary\" mat-button>{{\n            rootLabel || label\n        }}</a>\n    }\n    @for (parent of breadcrumbs; track parent) {\n        /\n        <a [routerLink]=\"isPanel ? [] : getLink(parent.id)\" color=\"primary\" mat-button>\n            {{ parent?.fullName || parent?.name }}</a\n        >\n    }\n</div>\n\n<div class=\"body\">\n    @if (icon) {\n        <div style=\"width: 30px\">\n            <mat-icon [naturalIcon]=\"icon\" />\n        </div>\n    }\n    @if (!model.id) {\n        <div class=\"mat-headline-5 nat-no-margin newLabel\">{{ newLabel }}</div>\n    }\n    @if (model.id) {\n        <div class=\"mat-headline-5 nat-no-margin label\">{{ model.name || model.fullName || label }}</div>\n    }\n    <div>\n        <ng-content />\n    </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host .breadcrumb,:host .body{display:flex;flex-direction:row;align-items:center}:host .breadcrumb{position:relative;top:5px}:host .body{min-height:40px}:host .body>*:not(:last-child){margin-right:5px}:host .body .label,:host .body .newLabel{flex:1}@media screen and (max-width: 600px){:host .body{flex-direction:column;align-items:flex-start}:host .body>*:not(:last-child){margin-bottom:10px!important}:host .body mat-icon{display:none}}\n"] }]
         }], propDecorators: { currentBaseUrl: [{
                 type: Input
             }], isPanel: [{
@@ -8292,7 +8284,7 @@ class NaturalHierarchicSelectorComponent extends NaturalAbstractController {
         return model.__typename + '-' + model.id;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: NaturalHierarchicSelectorComponent, deps: [{ token: NaturalHierarchicSelectorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", 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], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [style.margin-bottom.px]=\"20\">\n    <natural-search (selectionChange)=\"search($event)\" [facets]=\"searchFacets\" [selections]=\"searchSelections\" />\n</div>\n\n<div class=\"body\">\n    @if (loading) {\n        <mat-progress-spinner [diameter]=\"36\" mode=\"indeterminate\" style=\"margin: 10px\" />\n    }\n\n    <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n        <mat-tree-node *matTreeNodeDef=\"let node\" [ngClass]=\"{leaf: !node.expandable}\" matTreeNodePadding>\n            @if (node.expandable) {\n                <button\n                    (click)=\"loadChildren(node)\"\n                    [attr.aria-label]=\"'toggle ' + node.name\"\n                    mat-icon-button\n                    matTreeNodeToggle\n                >\n                    @if (node.loading) {\n                        <mat-progress-spinner [diameter]=\"24\" [strokeWidth]=\"5\" mode=\"indeterminate\" />\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                (change)=\"toggleFlatNode(node)\"\n                [checked]=\"flatNodesSelection.isSelected(node)\"\n                [disabled]=\"!isNodeTogglable(node)\"\n                style=\"margin-right: 10px\"\n            >\n                @if (node.node.config.icon) {\n                    <mat-icon [naturalIcon]=\"node.node.config.icon\" style=\"margin-right: 10px\" />\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) {\n            <mat-chip-option (removed)=\"unselectModelNode(node)\" [removable]=\"true\" [selectable]=\"false\">\n                @if (node.config.icon) {\n                    <mat-icon [naturalIcon]=\"node.config.icon\" />\n                }\n                <div class=\"mat-body chip-label\">{{ node.model.name || node.model.fullName }}</div>\n                <button matChipRemove>\n                    <mat-icon naturalIcon=\"cancel\" />\n                </button>\n            </mat-chip-option>\n        }\n    </mat-chip-listbox>\n</div>\n\n@if (!loading && !dataSource.data.length) {\n    <div class=\"margin-v\" 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: i2$5.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: i4$2.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i4$2.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i4$2.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i4$2.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i4$2.MatTreeNode, selector: "mat-tree-node", inputs: ["disabled", "tabIndex"], exportAs: ["matTreeNode"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$5.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: i7.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: MatChipsModule }, { kind: "component", type: i8$1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i8$1.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: i8$1.MatChipRemove, selector: "[matChipRemove]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", 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], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [style.margin-bottom.px]=\"20\">\n    <natural-search (selectionChange)=\"search($event)\" [facets]=\"searchFacets\" [selections]=\"searchSelections\" />\n</div>\n\n<div class=\"body\">\n    @if (loading) {\n        <mat-progress-spinner [diameter]=\"36\" mode=\"indeterminate\" style=\"margin: 10px\" />\n    }\n\n    <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n        <mat-tree-node *matTreeNodeDef=\"let node\" [ngClass]=\"{leaf: !node.expandable}\" matTreeNodePadding>\n            @if (node.expandable) {\n                <button\n                    (click)=\"loadChildren(node)\"\n                    [attr.aria-label]=\"'toggle ' + node.name\"\n                    mat-icon-button\n                    matTreeNodeToggle\n                >\n                    @if (node.loading) {\n                        <mat-progress-spinner [diameter]=\"24\" [strokeWidth]=\"5\" mode=\"indeterminate\" />\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                (change)=\"toggleFlatNode(node)\"\n                [checked]=\"flatNodesSelection.isSelected(node)\"\n                [disabled]=\"!isNodeTogglable(node)\"\n                style=\"margin-right: 10px\"\n            >\n                @if (node.node.config.icon) {\n                    <mat-icon [naturalIcon]=\"node.node.config.icon\" style=\"margin-right: 10px\" />\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) {\n            <mat-chip-option (removed)=\"unselectModelNode(node)\" [removable]=\"true\" [selectable]=\"false\">\n                @if (node.config.icon) {\n                    <mat-icon [naturalIcon]=\"node.config.icon\" />\n                }\n                <div class=\"mat-body chip-label\">{{ node.model.name || node.model.fullName }}</div>\n                <button matChipRemove>\n                    <mat-icon naturalIcon=\"cancel\" />\n                </button>\n            </mat-chip-option>\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: i2$5.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: i4$2.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i4$2.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i4$2.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i4$2.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i4$2.MatTreeNode, selector: "mat-tree-node", inputs: ["disabled", "tabIndex"], exportAs: ["matTreeNode"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$5.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: i7.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: MatChipsModule }, { kind: "component", type: i8$1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i8$1.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: i8$1.MatChipRemove, selector: "[matChipRemove]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: NaturalHierarchicSelectorComponent, decorators: [{
             type: Component,
@@ -8306,7 +8298,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
                         NaturalIconDirective,
                         MatCheckboxModule,
                         MatChipsModule,
-                    ], template: "<div [style.margin-bottom.px]=\"20\">\n    <natural-search (selectionChange)=\"search($event)\" [facets]=\"searchFacets\" [selections]=\"searchSelections\" />\n</div>\n\n<div class=\"body\">\n    @if (loading) {\n        <mat-progress-spinner [diameter]=\"36\" mode=\"indeterminate\" style=\"margin: 10px\" />\n    }\n\n    <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n        <mat-tree-node *matTreeNodeDef=\"let node\" [ngClass]=\"{leaf: !node.expandable}\" matTreeNodePadding>\n            @if (node.expandable) {\n                <button\n                    (click)=\"loadChildren(node)\"\n                    [attr.aria-label]=\"'toggle ' + node.name\"\n                    mat-icon-button\n                    matTreeNodeToggle\n                >\n                    @if (node.loading) {\n                        <mat-progress-spinner [diameter]=\"24\" [strokeWidth]=\"5\" mode=\"indeterminate\" />\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                (change)=\"toggleFlatNode(node)\"\n                [checked]=\"flatNodesSelection.isSelected(node)\"\n                [disabled]=\"!isNodeTogglable(node)\"\n                style=\"margin-right: 10px\"\n            >\n                @if (node.node.config.icon) {\n                    <mat-icon [naturalIcon]=\"node.node.config.icon\" style=\"margin-right: 10px\" />\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) {\n            <mat-chip-option (removed)=\"unselectModelNode(node)\" [removable]=\"true\" [selectable]=\"false\">\n                @if (node.config.icon) {\n                    <mat-icon [naturalIcon]=\"node.config.icon\" />\n                }\n                <div class=\"mat-body chip-label\">{{ node.model.name || node.model.fullName }}</div>\n                <button matChipRemove>\n                    <mat-icon naturalIcon=\"cancel\" />\n                </button>\n            </mat-chip-option>\n        }\n    </mat-chip-listbox>\n</div>\n\n@if (!loading && !dataSource.data.length) {\n    <div class=\"margin-v\" 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 (selectionChange)=\"search($event)\" [facets]=\"searchFacets\" [selections]=\"searchSelections\" />\n</div>\n\n<div class=\"body\">\n    @if (loading) {\n        <mat-progress-spinner [diameter]=\"36\" mode=\"indeterminate\" style=\"margin: 10px\" />\n    }\n\n    <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n        <mat-tree-node *matTreeNodeDef=\"let node\" [ngClass]=\"{leaf: !node.expandable}\" matTreeNodePadding>\n            @if (node.expandable) {\n                <button\n                    (click)=\"loadChildren(node)\"\n                    [attr.aria-label]=\"'toggle ' + node.name\"\n                    mat-icon-button\n                    matTreeNodeToggle\n                >\n                    @if (node.loading) {\n                        <mat-progress-spinner [diameter]=\"24\" [strokeWidth]=\"5\" mode=\"indeterminate\" />\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                (change)=\"toggleFlatNode(node)\"\n                [checked]=\"flatNodesSelection.isSelected(node)\"\n                [disabled]=\"!isNodeTogglable(node)\"\n                style=\"margin-right: 10px\"\n            >\n                @if (node.node.config.icon) {\n                    <mat-icon [naturalIcon]=\"node.node.config.icon\" style=\"margin-right: 10px\" />\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) {\n            <mat-chip-option (removed)=\"unselectModelNode(node)\" [removable]=\"true\" [selectable]=\"false\">\n                @if (node.config.icon) {\n                    <mat-icon [naturalIcon]=\"node.config.icon\" />\n                }\n                <div class=\"mat-body chip-label\">{{ node.model.name || node.model.fullName }}</div>\n                <button matChipRemove>\n                    <mat-icon naturalIcon=\"cancel\" />\n                </button>\n            </mat-chip-option>\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"] }]
         }], ctorParameters: () => [{ type: NaturalHierarchicSelectorService }], propDecorators: { displayWith: [{
                 type: Input
             }], config: [{
@@ -9885,14 +9877,13 @@ const fallbackIfNoOpenedPanels = (segments) => {
  * </natural-relations>
  */
 class NaturalRelationsComponent extends NaturalAbstractController {
-    #service;
     get service() {
-        return this.#service;
+        return this._service;
     }
     set service(service) {
-        this.#service = service;
+        this._service = service;
         this.loading = true;
-        const items$ = this.#service.watchAll(this.variablesManager).pipe(takeUntil(this.ngUnsubscribe), tap({
+        const items$ = this._service.watchAll(this.variablesManager).pipe(takeUntil(this.ngUnsubscribe), tap({
             next: () => (this.loading = false),
             complete: () => (this.loading = false),
             error: () => (this.loading = false),
@@ -10028,7 +10019,7 @@ class NaturalRelationsComponent extends NaturalAbstractController {
         return this.hierarchicSelectorConfig.filter(c => !!c.selectableAtKey)[0].selectableAtKey;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: NaturalRelationsComponent, deps: [{ token: NaturalLinkMutationService }, { token: NaturalHierarchicSelectorDialogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: NaturalRelationsComponent, isStandalone: true, selector: "natural-relations", inputs: { service: "service", placeholder: "placeholder", autocompleteSelectorFilter: "autocompleteSelectorFilter", displayWith: "displayWith", disabled: "disabled", main: "main", hierarchicSelectorFilters: "hierarchicSelectorFilters", hierarchicSelectorConfig: "hierarchicSelectorConfig", otherName: "otherName", filter: "filter" }, outputs: { selectionChange: "selectionChange" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "select", first: true, predicate: NaturalSelectComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"body\">\n    <ng-template #defaultNameCell let-item=\"item\">\n        {{ getDisplayFn()(item) }}\n    </ng-template>\n\n    <table [dataSource]=\"dataSource\" class=\"natural-row-click\" mat-table>\n        <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row style=\"display: none\"></tr>\n        <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row></tr>\n\n        <ng-container matColumnDef=\"name\">\n            <th *matHeaderCellDef i18n mat-header-cell>Titre</th>\n            <td *matCellDef=\"let item\" mat-cell>\n                <ng-template\n                    [ngTemplateOutletContext]=\"{item: item}\"\n                    [ngTemplateOutlet]=\"itemTemplate ? itemTemplate : defaultNameCell\"\n                />\n            </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"unlink\">\n            <th *matHeaderCellDef mat-header-cell></th>\n            <td *matCellDef=\"let element\" mat-cell>\n                @if (!disabled) {\n                    <button\n                        (click)=\"removeRelation(element)\"\n                        [disabled]=\"removing.has(element)\"\n                        color=\"warn\"\n                        mat-icon-button\n                        i18n-matTooltip\n                        matTooltip=\"Dissocier\"\n                    >\n                        <mat-icon naturalIcon=\"link_off\" />\n                    </button>\n                }\n            </td>\n        </ng-container>\n    </table>\n\n    @if (dataSource.data && (dataSource.data.length || 0) > (dataSource.data.pageSize || 0)) {\n        <mat-paginator\n            (page)=\"pagination($event)\"\n            [length]=\"dataSource.data.length || 0\"\n            [pageIndex]=\"dataSource.data.pageIndex || 0\"\n            [pageSizeOptions]=\"pageSizeOptions\"\n            [pageSize]=\"dataSource.data.pageSize || 0\"\n        />\n    }\n\n    @if (!loading && dataSource.data?.length === 0) {\n        <div class=\"margin-v mat-body\">\n            <span i18n>Aucun r\u00E9sultat</span>\n        </div>\n    }\n\n    @if (loading) {\n        <mat-progress-spinner [diameter]=\"40\" class=\"loading\" mode=\"indeterminate\" />\n    }\n</div>\n\n@if (!disabled) {\n    @if (hierarchicSelectorConfig) {\n        <div>\n            <button (click)=\"openNaturalHierarchicSelector()\" color=\"primary\" mat-flat-button>{{ placeholder }}</button>\n        </div>\n    } @else {\n        <natural-select\n            (selectionChange)=\"addRelations([$event])\"\n            [displayWith]=\"$any(getDisplayFn())\"\n            [filter]=\"autocompleteSelectorFilter\"\n            [placeholder]=\"placeholder\"\n            [service]=\"service\"\n            [showIcon]=\"false\"\n        />\n    }\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host .body{display:flex;flex-direction:column}:host .loading{margin:20px auto}:host .mat-column-unlink{width:2.5em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i4$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$5.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: MatPaginatorModule }, { kind: "component", type: i8$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: NaturalSelectComponent, selector: "natural-select", inputs: ["service", "optionRequired", "searchField", "searchOperator", "filter", "disabled"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: NaturalRelationsComponent, isStandalone: true, selector: "natural-relations", inputs: { service: "service", placeholder: "placeholder", autocompleteSelectorFilter: "autocompleteSelectorFilter", displayWith: "displayWith", disabled: "disabled", main: "main", hierarchicSelectorFilters: "hierarchicSelectorFilters", hierarchicSelectorConfig: "hierarchicSelectorConfig", otherName: "otherName", filter: "filter" }, outputs: { selectionChange: "selectionChange" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "select", first: true, predicate: NaturalSelectComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"body\">\n    <ng-template #defaultNameCell let-item=\"item\">\n        {{ getDisplayFn()(item) }}\n    </ng-template>\n\n    <table [dataSource]=\"dataSource\" class=\"natural-row-click\" mat-table>\n        <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row style=\"display: none\"></tr>\n        <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row></tr>\n\n        <ng-container matColumnDef=\"name\">\n            <th *matHeaderCellDef i18n mat-header-cell>Titre</th>\n            <td *matCellDef=\"let item\" mat-cell>\n                <ng-template\n                    [ngTemplateOutletContext]=\"{item: item}\"\n                    [ngTemplateOutlet]=\"itemTemplate ? itemTemplate : defaultNameCell\"\n                />\n            </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"unlink\">\n            <th *matHeaderCellDef mat-header-cell></th>\n            <td *matCellDef=\"let element\" mat-cell>\n                @if (!disabled) {\n                    <button\n                        (click)=\"removeRelation(element)\"\n                        [disabled]=\"removing.has(element)\"\n                        color=\"warn\"\n                        mat-icon-button\n                        i18n-matTooltip\n                        matTooltip=\"Dissocier\"\n                    >\n                        <mat-icon naturalIcon=\"link_off\" />\n                    </button>\n                }\n            </td>\n        </ng-container>\n    </table>\n\n    @if (dataSource.data && (dataSource.data.length || 0) > (dataSource.data.pageSize || 0)) {\n        <mat-paginator\n            (page)=\"pagination($event)\"\n            [length]=\"dataSource.data.length || 0\"\n            [pageIndex]=\"dataSource.data.pageIndex || 0\"\n            [pageSizeOptions]=\"pageSizeOptions\"\n            [pageSize]=\"dataSource.data.pageSize || 0\"\n        />\n    }\n\n    @if (!loading && dataSource.data?.length === 0) {\n        <div class=\"nat-margin-vertical mat-body\">\n            <span i18n>Aucun r\u00E9sultat</span>\n        </div>\n    }\n\n    @if (loading) {\n        <mat-progress-spinner [diameter]=\"40\" class=\"loading\" mode=\"indeterminate\" />\n    }\n</div>\n\n@if (!disabled) {\n    @if (hierarchicSelectorConfig) {\n        <div>\n            <button (click)=\"openNaturalHierarchicSelector()\" color=\"primary\" mat-flat-button>{{ placeholder }}</button>\n        </div>\n    } @else {\n        <natural-select\n            (selectionChange)=\"addRelations([$event])\"\n            [displayWith]=\"$any(getDisplayFn())\"\n            [filter]=\"autocompleteSelectorFilter\"\n            [placeholder]=\"placeholder\"\n            [service]=\"service\"\n            [showIcon]=\"false\"\n        />\n    }\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host .body{display:flex;flex-direction:column}:host .loading{margin:20px auto}:host .mat-column-unlink{width:2.5em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i4$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$5.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: MatPaginatorModule }, { kind: "component", type: i8$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: NaturalSelectComponent, selector: "natural-select", inputs: ["service", "optionRequired", "searchField", "searchOperator", "filter", "disabled"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: NaturalRelationsComponent, decorators: [{
             type: Component,
@@ -10042,7 +10033,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
                         MatPaginatorModule,
                         MatProgressSpinnerModule,
                         NaturalSelectComponent,
-                    ], template: "<div class=\"body\">\n    <ng-template #defaultNameCell let-item=\"item\">\n        {{ getDisplayFn()(item) }}\n    </ng-template>\n\n    <table [dataSource]=\"dataSource\" class=\"natural-row-click\" mat-table>\n        <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row style=\"display: none\"></tr>\n        <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row></tr>\n\n        <ng-container matColumnDef=\"name\">\n            <th *matHeaderCellDef i18n mat-header-cell>Titre</th>\n            <td *matCellDef=\"let item\" mat-cell>\n                <ng-template\n                    [ngTemplateOutletContext]=\"{item: item}\"\n                    [ngTemplateOutlet]=\"itemTemplate ? itemTemplate : defaultNameCell\"\n                />\n            </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"unlink\">\n            <th *matHeaderCellDef mat-header-cell></th>\n            <td *matCellDef=\"let element\" mat-cell>\n                @if (!disabled) {\n                    <button\n                        (click)=\"removeRelation(element)\"\n                        [disabled]=\"removing.has(element)\"\n                        color=\"warn\"\n                        mat-icon-button\n                        i18n-matTooltip\n                        matTooltip=\"Dissocier\"\n                    >\n                        <mat-icon naturalIcon=\"link_off\" />\n                    </button>\n                }\n            </td>\n        </ng-container>\n    </table>\n\n    @if (dataSource.data && (dataSource.data.length || 0) > (dataSource.data.pageSize || 0)) {\n        <mat-paginator\n            (page)=\"pagination($event)\"\n            [length]=\"dataSource.data.length || 0\"\n            [pageIndex]=\"dataSource.data.pageIndex || 0\"\n            [pageSizeOptions]=\"pageSizeOptions\"\n            [pageSize]=\"dataSource.data.pageSize || 0\"\n        />\n    }\n\n    @if (!loading && dataSource.data?.length === 0) {\n        <div class=\"margin-v mat-body\">\n            <span i18n>Aucun r\u00E9sultat</span>\n        </div>\n    }\n\n    @if (loading) {\n        <mat-progress-spinner [diameter]=\"40\" class=\"loading\" mode=\"indeterminate\" />\n    }\n</div>\n\n@if (!disabled) {\n    @if (hierarchicSelectorConfig) {\n        <div>\n            <button (click)=\"openNaturalHierarchicSelector()\" color=\"primary\" mat-flat-button>{{ placeholder }}</button>\n        </div>\n    } @else {\n        <natural-select\n            (selectionChange)=\"addRelations([$event])\"\n            [displayWith]=\"$any(getDisplayFn())\"\n            [filter]=\"autocompleteSelectorFilter\"\n            [placeholder]=\"placeholder\"\n            [service]=\"service\"\n            [showIcon]=\"false\"\n        />\n    }\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host .body{display:flex;flex-direction:column}:host .loading{margin:20px auto}:host .mat-column-unlink{width:2.5em}\n"] }]
+                    ], template: "<div class=\"body\">\n    <ng-template #defaultNameCell let-item=\"item\">\n        {{ getDisplayFn()(item) }}\n    </ng-template>\n\n    <table [dataSource]=\"dataSource\" class=\"natural-row-click\" mat-table>\n        <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row style=\"display: none\"></tr>\n        <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row></tr>\n\n        <ng-container matColumnDef=\"name\">\n            <th *matHeaderCellDef i18n mat-header-cell>Titre</th>\n            <td *matCellDef=\"let item\" mat-cell>\n                <ng-template\n                    [ngTemplateOutletContext]=\"{item: item}\"\n                    [ngTemplateOutlet]=\"itemTemplate ? itemTemplate : defaultNameCell\"\n                />\n            </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"unlink\">\n            <th *matHeaderCellDef mat-header-cell></th>\n            <td *matCellDef=\"let element\" mat-cell>\n                @if (!disabled) {\n                    <button\n                        (click)=\"removeRelation(element)\"\n                        [disabled]=\"removing.has(element)\"\n                        color=\"warn\"\n                        mat-icon-button\n                        i18n-matTooltip\n                        matTooltip=\"Dissocier\"\n                    >\n                        <mat-icon naturalIcon=\"link_off\" />\n                    </button>\n                }\n            </td>\n        </ng-container>\n    </table>\n\n    @if (dataSource.data && (dataSource.data.length || 0) > (dataSource.data.pageSize || 0)) {\n        <mat-paginator\n            (page)=\"pagination($event)\"\n            [length]=\"dataSource.data.length || 0\"\n            [pageIndex]=\"dataSource.data.pageIndex || 0\"\n            [pageSizeOptions]=\"pageSizeOptions\"\n            [pageSize]=\"dataSource.data.pageSize || 0\"\n        />\n    }\n\n    @if (!loading && dataSource.data?.length === 0) {\n        <div class=\"nat-margin-vertical mat-body\">\n            <span i18n>Aucun r\u00E9sultat</span>\n        </div>\n    }\n\n    @if (loading) {\n        <mat-progress-spinner [diameter]=\"40\" class=\"loading\" mode=\"indeterminate\" />\n    }\n</div>\n\n@if (!disabled) {\n    @if (hierarchicSelectorConfig) {\n        <div>\n            <button (click)=\"openNaturalHierarchicSelector()\" color=\"primary\" mat-flat-button>{{ placeholder }}</button>\n        </div>\n    } @else {\n        <natural-select\n            (selectionChange)=\"addRelations([$event])\"\n            [displayWith]=\"$any(getDisplayFn())\"\n            [filter]=\"autocompleteSelectorFilter\"\n            [placeholder]=\"placeholder\"\n            [service]=\"service\"\n            [showIcon]=\"false\"\n        />\n    }\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host .body{display:flex;flex-direction:column}:host .loading{margin:20px auto}:host .mat-column-unlink{width:2.5em}\n"] }]
         }], ctorParameters: () => [{ type: NaturalLinkMutationService }, { type: NaturalHierarchicSelectorDialogService }], propDecorators: { select: [{
                 type: ViewChild,
                 args: [NaturalSelectComponent]
@@ -10319,7 +10310,6 @@ function assert(value) {
  * Maybe the better is to wait next release
  */
 class NaturalSidenavService extends NaturalAbstractController {
-    #isMobileView;
     constructor(breakpointObserver, router, sessionStorage, naturalSidenavStackService) {
         super();
         this.breakpointObserver = breakpointObserver;
@@ -10359,7 +10349,7 @@ class NaturalSidenavService extends NaturalAbstractController {
         this.openedStorageKey = 'menu-opened';
         this.minimizedStorageKeyWithName = null;
         this.openedStorageKeyWithName = null;
-        this.#isMobileView = false;
+        this._isMobileView = false;
     }
     get activeMode() {
         return this.mode;
@@ -10389,8 +10379,8 @@ class NaturalSidenavService extends NaturalAbstractController {
             .observe([Breakpoints.XSmall, Breakpoints.Small])
             .pipe(takeUntil$1(this.ngUnsubscribe))
             .subscribe(r => {
-            this.#isMobileView = r.matches;
-            const isBig = !this.#isMobileView;
+            this._isMobileView = r.matches;
+            const isBig = !this._isMobileView;
             this.mode = isBig ? this.modes[0] : this.modes[1];
             if (oldIsBig === null || isBig !== oldIsBig) {
                 oldIsBig = isBig;
@@ -10415,13 +10405,13 @@ class NaturalSidenavService extends NaturalAbstractController {
         }
     }
     isMobileView() {
-        return this.#isMobileView;
+        return this._isMobileView;
     }
     /**
      * Close nav on mobile view after a click
      */
     navItemClicked() {
-        if (this.#isMobileView) {
+        if (this._isMobileView) {
             this.close();
         }
     }
@@ -10458,7 +10448,7 @@ class NaturalSidenavService extends NaturalAbstractController {
         assert(this.openedStorageKeyWithName);
         const value = this.sessionStorage.getItem(this.openedStorageKeyWithName);
         if (value === null) {
-            return !this.#isMobileView;
+            return !this._isMobileView;
         }
         else {
             return value === 'true';
@@ -10479,10 +10469,10 @@ class NaturalSidenavService extends NaturalAbstractController {
     }
     setOpened(value) {
         this.opened = value;
-        if (this.opened && this.#isMobileView) {
+        if (this.opened && this._isMobileView) {
             this.minimized = false;
         }
-        else if (!this.#isMobileView) {
+        else if (!this._isMobileView) {
             assert(this.openedStorageKeyWithName);
             this.sessionStorage.setItem(this.openedStorageKeyWithName, this.opened ? 'true' : 'false');
         }