@ecodev/natural 66.0.5 → 66.0.6

package/fesm2022/ecodev-natural.mjs

@@ -8368,7 +8368,7 @@ class NaturalHierarchicSelectorComponent {
         this.selectionChange.emit(organizedFlatNodesSelection);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalHierarchicSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: NaturalHierarchicSelectorComponent, isStandalone: true, selector: "natural-hierarchic-selector", inputs: { displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, searchFacets: { classPropertyName: "searchFacets", publicName: "searchFacets", isSignal: true, isRequired: false, transformFunction: null }, searchSelections: { classPropertyName: "searchSelections", publicName: "searchSelections", isSignal: true, 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: "<ng-template #displayTemplate let-node>\n    <div class=\"nat-horizontal nat-gap-5\">\n        @if (node.config.icon) {\n            <mat-icon [naturalIcon]=\"node.config.icon\" />\n        }\n        <span>{{ getDisplayFn(node.config)(node.model) }}</span>\n    </div>\n</ng-template>\n\n<div [style.margin-bottom.px]=\"20\">\n    <natural-search [facets]=\"searchFacets()\" [selections]=\"searchSelections()\" (selectionChange)=\"search($event)\" />\n</div>\n\n@if (allowSelectAll() && multiple()) {\n    <div\n        class=\"select-all\"\n        i18n-matTooltip\n        matTooltip=\"Trop de r\u00E9sultats, veuillez affiner la recherche\"\n        [matTooltipDisabled]=\"!hierarchicSelectorService.isTooBig()\"\n    >\n        <a i18n mat-button [disabled]=\"hierarchicSelectorService.isTooBig()\" (click)=\"selectAll()\">Tout s\u00E9lectionner</a>\n    </div>\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 #tree [dataSource]=\"dataSource\" [childrenAccessor]=\"childrenAccessor\">\n        <mat-nested-tree-node\n            *matTreeNodeDef=\"let node\"\n            matTreeNodePadding\n            [class.leaf]=\"!node.isExpandable\"\n            (expandedChange)=\"$event ? loadChildren(node) : null\"\n        >\n            <div class=\"wrapper nat-horizontal nat-align\" [class.unexpandable]=\"!node.isExpandable\">\n                @if (node.isExpandable) {\n                    <button matIconButton matTreeNodeToggle [attr.aria-label]=\"`toggle ${node.model.name}`\">\n                        @if (node.isLoading) {\n                            <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"24\" [strokeWidth]=\"5\" />\n                        } @else {\n                            <mat-icon [naturalIcon]=\"tree.isExpanded(node) ? 'expand_more' : 'chevron_right'\" />\n                        }\n                    </button>\n                }\n\n                @if (multiple()) {\n                    <mat-checkbox\n                        class=\"selection\"\n                        [checked]=\"selection.isSelected(node)\"\n                        [disabled]=\"!node.isSelectable\"\n                        (change)=\"toggleSelection(node)\"\n                    >\n                        <ng-template *ngTemplateOutlet=\"displayTemplate; context: {$implicit: node}\" />\n                    </mat-checkbox>\n                } @else {\n                    <mat-radio-button\n                        class=\"selection\"\n                        [checked]=\"selection.isSelected(node)\"\n                        [disabled]=\"!node.isSelectable\"\n                        (change)=\"toggleSelection(node)\"\n                    >\n                        <ng-template *ngTemplateOutlet=\"displayTemplate; context: {$implicit: node}\" />\n                    </mat-radio-button>\n                }\n            </div>\n            <div class=\"children\" [class.invisible]=\"!tree.isExpanded(node)\">\n                <ng-container matTreeNodeOutlet />\n            </div>\n        </mat-nested-tree-node>\n    </mat-tree>\n\n    <mat-chip-listbox aria-orientation=\"vertical\" class=\"mat-mdc-chip-set-stacked\">\n        @for (node of selection.selected; track node.model.id) {\n            <mat-chip-option [removable]=\"true\" [selectable]=\"false\" (removed)=\"unselect(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}mat-icon{width:18px;height:18px;font-size:18px}.select-all{display:inline-block;margin-top:-15px;margin-bottom:5px}.mat-tree-node.leaf{margin-left:48px}.body{display:flex;flex-direction:row;justify-content:space-between}.body mat-tree{flex:66;flex-shrink:0}.body mat-chip-listbox{flex:33;margin-left:10px}mat-nested-tree-node{display:block}mat-nested-tree-node,mat-nested-tree-node .wrapper{min-height:48px}mat-nested-tree-node mat-nested-tree-node{display:block;padding-left:40px!important}.invisible{display:none}.unexpandable{padding-left:40px}.selection,.selection .mat-icon{margin-right:10px}\n"], dependencies: [{ kind: "component", type: NaturalSearchComponent, selector: "natural-search", inputs: ["placeholder", "facets", "multipleGroups", "dropdownTitle", "selections"], outputs: ["selectionChange"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], outputs: ["activation", "expandedChange"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "component", type: 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: "directive", type: MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: NaturalHierarchicSelectorComponent, isStandalone: true, selector: "natural-hierarchic-selector", inputs: { displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, searchFacets: { classPropertyName: "searchFacets", publicName: "searchFacets", isSignal: true, isRequired: false, transformFunction: null }, searchSelections: { classPropertyName: "searchSelections", publicName: "searchSelections", isSignal: true, 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: "<ng-template #displayTemplate let-node>\n    <div class=\"nat-horizontal nat-gap-5\">\n        @if (node.config.icon) {\n            <mat-icon [naturalIcon]=\"node.config.icon\" />\n        }\n        <span>{{ getDisplayFn(node.config)(node.model) }}</span>\n    </div>\n</ng-template>\n\n<div [style.margin-bottom.px]=\"20\">\n    <natural-search [facets]=\"searchFacets()\" [selections]=\"searchSelections()\" (selectionChange)=\"search($event)\" />\n</div>\n\n@if (allowSelectAll() && multiple()) {\n    <div\n        class=\"select-all\"\n        i18n-matTooltip\n        matTooltip=\"Trop de r\u00E9sultats, veuillez affiner la recherche\"\n        [matTooltipDisabled]=\"!hierarchicSelectorService.isTooBig()\"\n    >\n        <a i18n mat-button [disabled]=\"hierarchicSelectorService.isTooBig()\" (click)=\"selectAll()\">Tout s\u00E9lectionner</a>\n    </div>\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 #tree [dataSource]=\"dataSource\" [childrenAccessor]=\"childrenAccessor\">\n        <mat-nested-tree-node\n            *matTreeNodeDef=\"let node\"\n            matTreeNodePadding\n            [class.leaf]=\"!node.isExpandable\"\n            (expandedChange)=\"$event ? loadChildren(node) : null\"\n        >\n            <div class=\"wrapper nat-horizontal nat-align\" [class.unexpandable]=\"!node.isExpandable\">\n                @if (node.isExpandable) {\n                    <button matIconButton matTreeNodeToggle [attr.aria-label]=\"`toggle ${node.model.name}`\">\n                        @if (node.isLoading) {\n                            <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"24\" [strokeWidth]=\"5\" />\n                        } @else {\n                            <mat-icon [naturalIcon]=\"tree.isExpanded(node) ? 'expand_more' : 'chevron_right'\" />\n                        }\n                    </button>\n                }\n\n                @if (multiple()) {\n                    <mat-checkbox\n                        class=\"selection\"\n                        [checked]=\"selection.isSelected(node)\"\n                        [disabled]=\"!node.isSelectable\"\n                        (change)=\"toggleSelection(node)\"\n                    >\n                        <ng-template *ngTemplateOutlet=\"displayTemplate; context: {$implicit: node}\" />\n                    </mat-checkbox>\n                } @else {\n                    <mat-radio-button\n                        class=\"selection\"\n                        [checked]=\"selection.isSelected(node)\"\n                        [disabled]=\"!node.isSelectable\"\n                        (change)=\"toggleSelection(node)\"\n                    >\n                        <ng-template *ngTemplateOutlet=\"displayTemplate; context: {$implicit: node}\" />\n                    </mat-radio-button>\n                }\n            </div>\n            <div class=\"children\" [class.invisible]=\"!tree.isExpanded(node)\">\n                <ng-container matTreeNodeOutlet />\n            </div>\n        </mat-nested-tree-node>\n    </mat-tree>\n\n    <mat-chip-listbox aria-orientation=\"vertical\" class=\"mat-mdc-chip-set-stacked\">\n        @for (node of selection.selected; track node.model.id) {\n            <mat-chip-option [removable]=\"true\" [selectable]=\"false\" (removed)=\"unselect(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;--mat-tree-container-background-color: transparent}mat-icon{width:18px;height:18px;font-size:18px}.select-all{display:inline-block;margin-top:-15px;margin-bottom:5px}.mat-tree-node.leaf{margin-left:48px}.body{display:flex;flex-direction:row;justify-content:space-between}.body mat-tree{flex:66;flex-shrink:0}.body mat-chip-listbox{flex:33;margin-left:10px}mat-nested-tree-node{display:block}mat-nested-tree-node,mat-nested-tree-node .wrapper{min-height:48px}mat-nested-tree-node mat-nested-tree-node{display:block;padding-left:40px!important}.invisible{display:none}.unexpandable{padding-left:40px}.selection,.selection .mat-icon{margin-right:10px}\n"], dependencies: [{ kind: "component", type: NaturalSearchComponent, selector: "natural-search", inputs: ["placeholder", "facets", "multipleGroups", "dropdownTitle", "selections"], outputs: ["selectionChange"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], outputs: ["activation", "expandedChange"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "component", type: 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: "directive", type: MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalHierarchicSelectorComponent, decorators: [{
             type: Component,
@@ -8393,7 +8393,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                         MatTooltip,
                         MatRadioButton,
                         NgTemplateOutlet,
-                    ], providers: [NaturalHierarchicSelectorService], template: "<ng-template #displayTemplate let-node>\n    <div class=\"nat-horizontal nat-gap-5\">\n        @if (node.config.icon) {\n            <mat-icon [naturalIcon]=\"node.config.icon\" />\n        }\n        <span>{{ getDisplayFn(node.config)(node.model) }}</span>\n    </div>\n</ng-template>\n\n<div [style.margin-bottom.px]=\"20\">\n    <natural-search [facets]=\"searchFacets()\" [selections]=\"searchSelections()\" (selectionChange)=\"search($event)\" />\n</div>\n\n@if (allowSelectAll() && multiple()) {\n    <div\n        class=\"select-all\"\n        i18n-matTooltip\n        matTooltip=\"Trop de r\u00E9sultats, veuillez affiner la recherche\"\n        [matTooltipDisabled]=\"!hierarchicSelectorService.isTooBig()\"\n    >\n        <a i18n mat-button [disabled]=\"hierarchicSelectorService.isTooBig()\" (click)=\"selectAll()\">Tout s\u00E9lectionner</a>\n    </div>\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 #tree [dataSource]=\"dataSource\" [childrenAccessor]=\"childrenAccessor\">\n        <mat-nested-tree-node\n            *matTreeNodeDef=\"let node\"\n            matTreeNodePadding\n            [class.leaf]=\"!node.isExpandable\"\n            (expandedChange)=\"$event ? loadChildren(node) : null\"\n        >\n            <div class=\"wrapper nat-horizontal nat-align\" [class.unexpandable]=\"!node.isExpandable\">\n                @if (node.isExpandable) {\n                    <button matIconButton matTreeNodeToggle [attr.aria-label]=\"`toggle ${node.model.name}`\">\n                        @if (node.isLoading) {\n                            <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"24\" [strokeWidth]=\"5\" />\n                        } @else {\n                            <mat-icon [naturalIcon]=\"tree.isExpanded(node) ? 'expand_more' : 'chevron_right'\" />\n                        }\n                    </button>\n                }\n\n                @if (multiple()) {\n                    <mat-checkbox\n                        class=\"selection\"\n                        [checked]=\"selection.isSelected(node)\"\n                        [disabled]=\"!node.isSelectable\"\n                        (change)=\"toggleSelection(node)\"\n                    >\n                        <ng-template *ngTemplateOutlet=\"displayTemplate; context: {$implicit: node}\" />\n                    </mat-checkbox>\n                } @else {\n                    <mat-radio-button\n                        class=\"selection\"\n                        [checked]=\"selection.isSelected(node)\"\n                        [disabled]=\"!node.isSelectable\"\n                        (change)=\"toggleSelection(node)\"\n                    >\n                        <ng-template *ngTemplateOutlet=\"displayTemplate; context: {$implicit: node}\" />\n                    </mat-radio-button>\n                }\n            </div>\n            <div class=\"children\" [class.invisible]=\"!tree.isExpanded(node)\">\n                <ng-container matTreeNodeOutlet />\n            </div>\n        </mat-nested-tree-node>\n    </mat-tree>\n\n    <mat-chip-listbox aria-orientation=\"vertical\" class=\"mat-mdc-chip-set-stacked\">\n        @for (node of selection.selected; track node.model.id) {\n            <mat-chip-option [removable]=\"true\" [selectable]=\"false\" (removed)=\"unselect(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}mat-icon{width:18px;height:18px;font-size:18px}.select-all{display:inline-block;margin-top:-15px;margin-bottom:5px}.mat-tree-node.leaf{margin-left:48px}.body{display:flex;flex-direction:row;justify-content:space-between}.body mat-tree{flex:66;flex-shrink:0}.body mat-chip-listbox{flex:33;margin-left:10px}mat-nested-tree-node{display:block}mat-nested-tree-node,mat-nested-tree-node .wrapper{min-height:48px}mat-nested-tree-node mat-nested-tree-node{display:block;padding-left:40px!important}.invisible{display:none}.unexpandable{padding-left:40px}.selection,.selection .mat-icon{margin-right:10px}\n"] }]
+                    ], providers: [NaturalHierarchicSelectorService], template: "<ng-template #displayTemplate let-node>\n    <div class=\"nat-horizontal nat-gap-5\">\n        @if (node.config.icon) {\n            <mat-icon [naturalIcon]=\"node.config.icon\" />\n        }\n        <span>{{ getDisplayFn(node.config)(node.model) }}</span>\n    </div>\n</ng-template>\n\n<div [style.margin-bottom.px]=\"20\">\n    <natural-search [facets]=\"searchFacets()\" [selections]=\"searchSelections()\" (selectionChange)=\"search($event)\" />\n</div>\n\n@if (allowSelectAll() && multiple()) {\n    <div\n        class=\"select-all\"\n        i18n-matTooltip\n        matTooltip=\"Trop de r\u00E9sultats, veuillez affiner la recherche\"\n        [matTooltipDisabled]=\"!hierarchicSelectorService.isTooBig()\"\n    >\n        <a i18n mat-button [disabled]=\"hierarchicSelectorService.isTooBig()\" (click)=\"selectAll()\">Tout s\u00E9lectionner</a>\n    </div>\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 #tree [dataSource]=\"dataSource\" [childrenAccessor]=\"childrenAccessor\">\n        <mat-nested-tree-node\n            *matTreeNodeDef=\"let node\"\n            matTreeNodePadding\n            [class.leaf]=\"!node.isExpandable\"\n            (expandedChange)=\"$event ? loadChildren(node) : null\"\n        >\n            <div class=\"wrapper nat-horizontal nat-align\" [class.unexpandable]=\"!node.isExpandable\">\n                @if (node.isExpandable) {\n                    <button matIconButton matTreeNodeToggle [attr.aria-label]=\"`toggle ${node.model.name}`\">\n                        @if (node.isLoading) {\n                            <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"24\" [strokeWidth]=\"5\" />\n                        } @else {\n                            <mat-icon [naturalIcon]=\"tree.isExpanded(node) ? 'expand_more' : 'chevron_right'\" />\n                        }\n                    </button>\n                }\n\n                @if (multiple()) {\n                    <mat-checkbox\n                        class=\"selection\"\n                        [checked]=\"selection.isSelected(node)\"\n                        [disabled]=\"!node.isSelectable\"\n                        (change)=\"toggleSelection(node)\"\n                    >\n                        <ng-template *ngTemplateOutlet=\"displayTemplate; context: {$implicit: node}\" />\n                    </mat-checkbox>\n                } @else {\n                    <mat-radio-button\n                        class=\"selection\"\n                        [checked]=\"selection.isSelected(node)\"\n                        [disabled]=\"!node.isSelectable\"\n                        (change)=\"toggleSelection(node)\"\n                    >\n                        <ng-template *ngTemplateOutlet=\"displayTemplate; context: {$implicit: node}\" />\n                    </mat-radio-button>\n                }\n            </div>\n            <div class=\"children\" [class.invisible]=\"!tree.isExpanded(node)\">\n                <ng-container matTreeNodeOutlet />\n            </div>\n        </mat-nested-tree-node>\n    </mat-tree>\n\n    <mat-chip-listbox aria-orientation=\"vertical\" class=\"mat-mdc-chip-set-stacked\">\n        @for (node of selection.selected; track node.model.id) {\n            <mat-chip-option [removable]=\"true\" [selectable]=\"false\" (removed)=\"unselect(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;--mat-tree-container-background-color: transparent}mat-icon{width:18px;height:18px;font-size:18px}.select-all{display:inline-block;margin-top:-15px;margin-bottom:5px}.mat-tree-node.leaf{margin-left:48px}.body{display:flex;flex-direction:row;justify-content:space-between}.body mat-tree{flex:66;flex-shrink:0}.body mat-chip-listbox{flex:33;margin-left:10px}mat-nested-tree-node{display:block}mat-nested-tree-node,mat-nested-tree-node .wrapper{min-height:48px}mat-nested-tree-node mat-nested-tree-node{display:block;padding-left:40px!important}.invisible{display:none}.unexpandable{padding-left:40px}.selection,.selection .mat-icon{margin-right:10px}\n"] }]
         }], propDecorators: { displayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayWith", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], searchFacets: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchFacets", required: false }] }], searchSelections: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchSelections", required: false }] }], allowSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowSelectAll", required: false }] }], searchSelectionChange: [{ type: i0.Output, args: ["searchSelectionChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
 
 class TypeHierarchicSelectorComponent extends AbstractAssociationSelectComponent {