@ecodev/natural 62.1.0 → 62.1.2

package/fesm2022/ecodev-natural.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, Component, Injectable, DestroyRef, Directive, HostBinding, HostListener, InjectionToken, ElementRef, TemplateRef, ViewEncapsulation, ViewChild, Injector, Input, EventEmitter, Output, Pipe, Optional, Inject, LOCALE_ID, APP_INITIALIZER, ContentChild, EnvironmentInjector, createEnvironmentInjector, createComponent, input, computed, runInInjectionContext, PLATFORM_ID, ErrorHandler, importProvidersFrom } from '@angular/core';
+import { inject, Component, Injectable, DestroyRef, Directive, HostBinding, HostListener, InjectionToken, ElementRef, TemplateRef, ViewEncapsulation, ViewChild, Injector, Input, EventEmitter, Output, Pipe, Optional, Inject, LOCALE_ID, APP_INITIALIZER, input, computed, ContentChild, EnvironmentInjector, createEnvironmentInjector, createComponent, runInInjectionContext, PLATFORM_ID, ErrorHandler, importProvidersFrom } from '@angular/core';
 import * as i1$2 from '@angular/forms';
 import { FormGroup, FormArray, Validators, UntypedFormGroup, UntypedFormArray, FormControl, FormsModule, ReactiveFormsModule, UntypedFormControl, NgControl, FormControlDirective, FormControlName } from '@angular/forms';
 import { ActivatedRoute, Router, NavigationStart, NavigationEnd, RouteConfigLoadStart, RouteConfigLoadEnd, PRIMARY_OUTLET, RouterLink, NavigationError, DefaultUrlSerializer, UrlTree } from '@angular/router';
@@ -69,7 +69,6 @@ import { MatPaginatorModule } from '@angular/material/paginator';
 import * as i1$6 from '@angular/material/sidenav';
 import { MatSidenav, MatSidenavModule } from '@angular/material/sidenav';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
-import { HmacSHA256 } from 'crypto-es/lib/sha256';
 
 class NaturalConfirmComponent {
     data = inject(MAT_DIALOG_DATA);
@@ -3826,7 +3825,9 @@ class NaturalAbstractList extends NaturalAbstractPanel {
             .pipe(takeUntilDestroyed(this.destroyRef), filter(event => event instanceof NavigationEnd && isPopState))
             .subscribe(() => {
             isPopState = false; // reset flag
-            this.naturalSearchSelections = fromUrl(this.persistenceService.getFromUrl('ns', this.route));
+            const selections = fromUrl(this.persistenceService.getFromUrl('ns', this.route));
+            this.naturalSearchSelections = selections;
+            this.search(selections);
         });
     }
     /**
@@ -6607,9 +6608,11 @@ class ExternalFormControlMatcher extends ErrorStateMatcher {
 class AbstractSelect {
     placeholder;
     /**
-     * Mat-hint
+     * Mat-hint, if given, and it is non-empty, then `subscriptSizing` will
+     * automatically be set to `dynamic` to allow for long, wrapping text.
      */
-    hint = null;
+    hint = input();
+    subscriptSizing = computed(() => (this.hint() ? 'dynamic' : 'fixed'));
     /**
      * If given an error message, it will be displayed in a `<mat-error>`, but only if the control
      * is actually in an error state via one of its validators.
@@ -6780,15 +6783,13 @@ class AbstractSelect {
         this.internalCtrl.updateValueAndValidity();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: AbstractSelect, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: AbstractSelect, isStandalone: true, inputs: { placeholder: "placeholder", hint: "hint", error: "error", required: "required", navigateTo: "navigateTo", clearLabel: "clearLabel", showIcon: "showIcon", icon: "icon", displayWith: "displayWith", disabled: "disabled" }, outputs: { selectionChange: "selectionChange", blur: "blur" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.3", type: AbstractSelect, isStandalone: true, inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, navigateTo: { classPropertyName: "navigateTo", publicName: "navigateTo", isSignal: false, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: false, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", blur: "blur" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: AbstractSelect, decorators: [{
             type: Directive,
             args: [{ standalone: true }]
         }], ctorParameters: () => [], propDecorators: { placeholder: [{
                 type: Input
-            }], hint: [{
-                type: Input
             }], error: [{
                 type: Input
             }], required: [{
@@ -7052,7 +7053,7 @@ class NaturalSelectComponent extends AbstractSelect {
         return this.variablesManager.variables.value;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalSelectComponent, isStandalone: true, selector: "natural-select", inputs: { service: "service", optionRequired: "optionRequired", searchField: "searchField", searchOperator: "searchOperator", filter: "filter", disabled: "disabled" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "autoTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Autocomplete menu -->\n<mat-autocomplete\n    #ac=\"matAutocomplete\"\n    (optionSelected)=\"propagateValue($event.option.value)\"\n    [displayWith]=\"getDisplayFn()\"\n    panelWidth=\"auto !important\"\n>\n    @for (item of items | async; track $index) {\n        <mat-option [value]=\"item\">\n            <ng-template\n                [ngTemplateOutletContext]=\"{item: item}\"\n                [ngTemplateOutlet]=\"itemTemplate ? itemTemplate : defaultACItem\"\n            />\n        </mat-option>\n    }\n    @if (hasMoreItems) {\n        <div class=\"mat-caption\" i18n style=\"padding: 5px 10px\">Saisir pour chercher parmi {{ nbTotal }} r\u00E9sultats</div>\n    }\n</mat-autocomplete>\n\n<ng-template #defaultACItem let-item=\"item\">\n    <span>{{ getDisplayFn()(item) }}</span>\n</ng-template>\n\n<!-- Input for autocomplete -->\n<mat-form-field>\n    <mat-label>{{ placeholder }}</mat-label>\n\n    <input\n        (blur)=\"onBlur()\"\n        (change)=\"onInternalFormChange()\"\n        (click)=\"autoTrigger.openPanel()\"\n        (focus)=\"startSearch()\"\n        (keydown.esc)=\"reset()\"\n        (keydown.enter)=\"onKeyEnter()\"\n        [formControl]=\"internalCtrl\"\n        [matAutocomplete]=\"ac\"\n        aria-label=\"Recherche et s\u00E9lection\"\n        i18n-aria-label\n        matInput\n        [errorStateMatcher]=\"matcher\"\n    />\n\n    @if (hint) {\n        <mat-hint>{{ hint }}</mat-hint>\n    }\n\n    <!-- Meta data -->\n    @if (!loading && showIcon) {\n        <mat-icon [naturalIcon]=\"icon\" matIconPrefix />\n    }\n\n    @if (loading) {\n        <div class=\"loading-wrapper\" matIconPrefix>\n            <mat-progress-spinner [diameter]=\"21\" [strokeWidth]=\"5\" mode=\"indeterminate\" />\n        </div>\n    }\n\n    <!-- Clear button -->\n    <div matIconSuffix>\n        @if (internalCtrl.pristine && internalCtrl.value && internalCtrl.enabled && !clearLabel) {\n            <button (click)=\"clear()\" mat-icon-button i18n-matTooltip matTooltip=\"D\u00E9s\u00E9lectionner\">\n                <mat-icon naturalIcon=\"close\" />\n            </button>\n        }\n        @if (internalCtrl.dirty && internalCtrl.enabled && optionRequired) {\n            <button (click)=\"reset()\" mat-icon-button i18n-matTooltip matTooltip=\"Annuler la recherche\">\n                <mat-icon naturalIcon=\"undo\" />\n            </button>\n        }\n        @if (internalCtrl.pristine && internalCtrl.value && navigateTo) {\n            <button\n                [routerLink]=\"navigateTo\"\n                (click)=\"$event.stopPropagation()\"\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"Naviguer vers\"\n            >\n                <mat-icon naturalIcon=\"open_in_browser\" />\n            </button>\n        }\n    </div>\n\n    @if (hasRequiredError()) {\n        <mat-error i18n>Ce champ est requis</mat-error>\n    } @else if (error) {\n        <mat-error>{{ error }}</mat-error>\n    }\n</mat-form-field>\n\n<!-- Additional (un)select/(un)link buttons for more visual cohesion with natural-relations --><!-- [clearLabel] and/or [selectLabel] has to be given as attribute input -->\n@if (showClearButton()) {\n    <div class=\"external-buttons\">\n        @if (showClearButton()) {\n            <button (click)=\"clear()\" color=\"warn\" mat-button>{{ clearLabel }}</button>\n        }\n    </div>\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host>mat-autocomplete{margin-bottom:0!important}:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons>*:not(:last-child){margin-right:10px}:host .loading-wrapper{display:flex;justify-content:center;align-items:center;width:48px;height:48px}\n"], dependencies: [{ kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i1$5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1$5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalSelectComponent, isStandalone: true, selector: "natural-select", inputs: { service: "service", optionRequired: "optionRequired", searchField: "searchField", searchOperator: "searchOperator", filter: "filter", disabled: "disabled" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "autoTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Autocomplete menu -->\n<mat-autocomplete\n    #ac=\"matAutocomplete\"\n    (optionSelected)=\"propagateValue($event.option.value)\"\n    [displayWith]=\"getDisplayFn()\"\n    panelWidth=\"auto !important\"\n>\n    @for (item of items | async; track $index) {\n        <mat-option [value]=\"item\">\n            <ng-template\n                [ngTemplateOutletContext]=\"{item: item}\"\n                [ngTemplateOutlet]=\"itemTemplate ? itemTemplate : defaultACItem\"\n            />\n        </mat-option>\n    }\n    @if (hasMoreItems) {\n        <div class=\"mat-caption\" i18n style=\"padding: 5px 10px\">Saisir pour chercher parmi {{ nbTotal }} r\u00E9sultats</div>\n    }\n</mat-autocomplete>\n\n<ng-template #defaultACItem let-item=\"item\">\n    <span>{{ getDisplayFn()(item) }}</span>\n</ng-template>\n\n<!-- Input for autocomplete -->\n<mat-form-field [subscriptSizing]=\"subscriptSizing()\">\n    <mat-label>{{ placeholder }}</mat-label>\n\n    <input\n        (blur)=\"onBlur()\"\n        (change)=\"onInternalFormChange()\"\n        (click)=\"autoTrigger.openPanel()\"\n        (focus)=\"startSearch()\"\n        (keydown.esc)=\"reset()\"\n        (keydown.enter)=\"onKeyEnter()\"\n        [formControl]=\"internalCtrl\"\n        [matAutocomplete]=\"ac\"\n        aria-label=\"Recherche et s\u00E9lection\"\n        i18n-aria-label\n        matInput\n        [errorStateMatcher]=\"matcher\"\n    />\n\n    @if (hint()) {\n        <mat-hint>{{ hint() }}</mat-hint>\n    }\n\n    <!-- Meta data -->\n    @if (!loading && showIcon) {\n        <mat-icon [naturalIcon]=\"icon\" matIconPrefix />\n    }\n\n    @if (loading) {\n        <div class=\"loading-wrapper\" matIconPrefix>\n            <mat-progress-spinner [diameter]=\"21\" [strokeWidth]=\"5\" mode=\"indeterminate\" />\n        </div>\n    }\n\n    <!-- Clear button -->\n    <div matIconSuffix>\n        @if (internalCtrl.pristine && internalCtrl.value && internalCtrl.enabled && !clearLabel) {\n            <button (click)=\"clear()\" mat-icon-button i18n-matTooltip matTooltip=\"D\u00E9s\u00E9lectionner\">\n                <mat-icon naturalIcon=\"close\" />\n            </button>\n        }\n        @if (internalCtrl.dirty && internalCtrl.enabled && optionRequired) {\n            <button (click)=\"reset()\" mat-icon-button i18n-matTooltip matTooltip=\"Annuler la recherche\">\n                <mat-icon naturalIcon=\"undo\" />\n            </button>\n        }\n        @if (internalCtrl.pristine && internalCtrl.value && navigateTo) {\n            <button\n                [routerLink]=\"navigateTo\"\n                (click)=\"$event.stopPropagation()\"\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"Naviguer vers\"\n            >\n                <mat-icon naturalIcon=\"open_in_browser\" />\n            </button>\n        }\n    </div>\n\n    @if (hasRequiredError()) {\n        <mat-error i18n>Ce champ est requis</mat-error>\n    } @else if (error) {\n        <mat-error>{{ error }}</mat-error>\n    }\n</mat-form-field>\n\n<!-- Additional (un)select/(un)link buttons for more visual cohesion with natural-relations --><!-- [clearLabel] and/or [selectLabel] has to be given as attribute input -->\n@if (showClearButton()) {\n    <div class=\"external-buttons\">\n        @if (showClearButton()) {\n            <button (click)=\"clear()\" color=\"warn\" mat-button>{{ clearLabel }}</button>\n        }\n    </div>\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host>mat-autocomplete{margin-bottom:0!important}:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons>*:not(:last-child){margin-right:10px}:host .loading-wrapper{display:flex;justify-content:center;align-items:center;width:48px;height:48px}\n"], dependencies: [{ kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i1$5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1$5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSelectComponent, decorators: [{
             type: Component,
@@ -7070,7 +7071,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
                         MatButtonModule,
                         MatTooltipModule,
                         RouterLink,
-                    ], template: "<!-- Autocomplete menu -->\n<mat-autocomplete\n    #ac=\"matAutocomplete\"\n    (optionSelected)=\"propagateValue($event.option.value)\"\n    [displayWith]=\"getDisplayFn()\"\n    panelWidth=\"auto !important\"\n>\n    @for (item of items | async; track $index) {\n        <mat-option [value]=\"item\">\n            <ng-template\n                [ngTemplateOutletContext]=\"{item: item}\"\n                [ngTemplateOutlet]=\"itemTemplate ? itemTemplate : defaultACItem\"\n            />\n        </mat-option>\n    }\n    @if (hasMoreItems) {\n        <div class=\"mat-caption\" i18n style=\"padding: 5px 10px\">Saisir pour chercher parmi {{ nbTotal }} r\u00E9sultats</div>\n    }\n</mat-autocomplete>\n\n<ng-template #defaultACItem let-item=\"item\">\n    <span>{{ getDisplayFn()(item) }}</span>\n</ng-template>\n\n<!-- Input for autocomplete -->\n<mat-form-field>\n    <mat-label>{{ placeholder }}</mat-label>\n\n    <input\n        (blur)=\"onBlur()\"\n        (change)=\"onInternalFormChange()\"\n        (click)=\"autoTrigger.openPanel()\"\n        (focus)=\"startSearch()\"\n        (keydown.esc)=\"reset()\"\n        (keydown.enter)=\"onKeyEnter()\"\n        [formControl]=\"internalCtrl\"\n        [matAutocomplete]=\"ac\"\n        aria-label=\"Recherche et s\u00E9lection\"\n        i18n-aria-label\n        matInput\n        [errorStateMatcher]=\"matcher\"\n    />\n\n    @if (hint) {\n        <mat-hint>{{ hint }}</mat-hint>\n    }\n\n    <!-- Meta data -->\n    @if (!loading && showIcon) {\n        <mat-icon [naturalIcon]=\"icon\" matIconPrefix />\n    }\n\n    @if (loading) {\n        <div class=\"loading-wrapper\" matIconPrefix>\n            <mat-progress-spinner [diameter]=\"21\" [strokeWidth]=\"5\" mode=\"indeterminate\" />\n        </div>\n    }\n\n    <!-- Clear button -->\n    <div matIconSuffix>\n        @if (internalCtrl.pristine && internalCtrl.value && internalCtrl.enabled && !clearLabel) {\n            <button (click)=\"clear()\" mat-icon-button i18n-matTooltip matTooltip=\"D\u00E9s\u00E9lectionner\">\n                <mat-icon naturalIcon=\"close\" />\n            </button>\n        }\n        @if (internalCtrl.dirty && internalCtrl.enabled && optionRequired) {\n            <button (click)=\"reset()\" mat-icon-button i18n-matTooltip matTooltip=\"Annuler la recherche\">\n                <mat-icon naturalIcon=\"undo\" />\n            </button>\n        }\n        @if (internalCtrl.pristine && internalCtrl.value && navigateTo) {\n            <button\n                [routerLink]=\"navigateTo\"\n                (click)=\"$event.stopPropagation()\"\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"Naviguer vers\"\n            >\n                <mat-icon naturalIcon=\"open_in_browser\" />\n            </button>\n        }\n    </div>\n\n    @if (hasRequiredError()) {\n        <mat-error i18n>Ce champ est requis</mat-error>\n    } @else if (error) {\n        <mat-error>{{ error }}</mat-error>\n    }\n</mat-form-field>\n\n<!-- Additional (un)select/(un)link buttons for more visual cohesion with natural-relations --><!-- [clearLabel] and/or [selectLabel] has to be given as attribute input -->\n@if (showClearButton()) {\n    <div class=\"external-buttons\">\n        @if (showClearButton()) {\n            <button (click)=\"clear()\" color=\"warn\" mat-button>{{ clearLabel }}</button>\n        }\n    </div>\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host>mat-autocomplete{margin-bottom:0!important}:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons>*:not(:last-child){margin-right:10px}:host .loading-wrapper{display:flex;justify-content:center;align-items:center;width:48px;height:48px}\n"] }]
+                    ], template: "<!-- Autocomplete menu -->\n<mat-autocomplete\n    #ac=\"matAutocomplete\"\n    (optionSelected)=\"propagateValue($event.option.value)\"\n    [displayWith]=\"getDisplayFn()\"\n    panelWidth=\"auto !important\"\n>\n    @for (item of items | async; track $index) {\n        <mat-option [value]=\"item\">\n            <ng-template\n                [ngTemplateOutletContext]=\"{item: item}\"\n                [ngTemplateOutlet]=\"itemTemplate ? itemTemplate : defaultACItem\"\n            />\n        </mat-option>\n    }\n    @if (hasMoreItems) {\n        <div class=\"mat-caption\" i18n style=\"padding: 5px 10px\">Saisir pour chercher parmi {{ nbTotal }} r\u00E9sultats</div>\n    }\n</mat-autocomplete>\n\n<ng-template #defaultACItem let-item=\"item\">\n    <span>{{ getDisplayFn()(item) }}</span>\n</ng-template>\n\n<!-- Input for autocomplete -->\n<mat-form-field [subscriptSizing]=\"subscriptSizing()\">\n    <mat-label>{{ placeholder }}</mat-label>\n\n    <input\n        (blur)=\"onBlur()\"\n        (change)=\"onInternalFormChange()\"\n        (click)=\"autoTrigger.openPanel()\"\n        (focus)=\"startSearch()\"\n        (keydown.esc)=\"reset()\"\n        (keydown.enter)=\"onKeyEnter()\"\n        [formControl]=\"internalCtrl\"\n        [matAutocomplete]=\"ac\"\n        aria-label=\"Recherche et s\u00E9lection\"\n        i18n-aria-label\n        matInput\n        [errorStateMatcher]=\"matcher\"\n    />\n\n    @if (hint()) {\n        <mat-hint>{{ hint() }}</mat-hint>\n    }\n\n    <!-- Meta data -->\n    @if (!loading && showIcon) {\n        <mat-icon [naturalIcon]=\"icon\" matIconPrefix />\n    }\n\n    @if (loading) {\n        <div class=\"loading-wrapper\" matIconPrefix>\n            <mat-progress-spinner [diameter]=\"21\" [strokeWidth]=\"5\" mode=\"indeterminate\" />\n        </div>\n    }\n\n    <!-- Clear button -->\n    <div matIconSuffix>\n        @if (internalCtrl.pristine && internalCtrl.value && internalCtrl.enabled && !clearLabel) {\n            <button (click)=\"clear()\" mat-icon-button i18n-matTooltip matTooltip=\"D\u00E9s\u00E9lectionner\">\n                <mat-icon naturalIcon=\"close\" />\n            </button>\n        }\n        @if (internalCtrl.dirty && internalCtrl.enabled && optionRequired) {\n            <button (click)=\"reset()\" mat-icon-button i18n-matTooltip matTooltip=\"Annuler la recherche\">\n                <mat-icon naturalIcon=\"undo\" />\n            </button>\n        }\n        @if (internalCtrl.pristine && internalCtrl.value && navigateTo) {\n            <button\n                [routerLink]=\"navigateTo\"\n                (click)=\"$event.stopPropagation()\"\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"Naviguer vers\"\n            >\n                <mat-icon naturalIcon=\"open_in_browser\" />\n            </button>\n        }\n    </div>\n\n    @if (hasRequiredError()) {\n        <mat-error i18n>Ce champ est requis</mat-error>\n    } @else if (error) {\n        <mat-error>{{ error }}</mat-error>\n    }\n</mat-form-field>\n\n<!-- Additional (un)select/(un)link buttons for more visual cohesion with natural-relations --><!-- [clearLabel] and/or [selectLabel] has to be given as attribute input -->\n@if (showClearButton()) {\n    <div class=\"external-buttons\">\n        @if (showClearButton()) {\n            <button (click)=\"clear()\" color=\"warn\" mat-button>{{ clearLabel }}</button>\n        }\n    </div>\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host>mat-autocomplete{margin-bottom:0!important}:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons>*:not(:last-child){margin-right:10px}:host .loading-wrapper{display:flex;justify-content:center;align-items:center;width:48px;height:48px}\n"] }]
         }], propDecorators: { autoTrigger: [{
                 type: ViewChild,
                 args: [MatAutocompleteTrigger]
@@ -10247,11 +10248,11 @@ class NaturalSelectEnumComponent extends AbstractSelect {
         throw new Error('This should never be called');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSelectEnumComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalSelectEnumComponent, isStandalone: true, selector: "natural-select-enum", inputs: { enumName: "enumName", nullLabel: "nullLabel", optionDisabled: "optionDisabled", multiple: "multiple" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n    <mat-label>{{ placeholder }}</mat-label>\n    <mat-select\n        (selectionChange)=\"propagateValue($event.value)\"\n        [formControl]=\"internalCtrl\"\n        (blur)=\"onBlur()\"\n        [errorStateMatcher]=\"matcher\"\n        [multiple]=\"multiple\"\n    >\n        @if (nullLabel) {\n            <mat-option [value]=\"null\">{{ nullLabel }}</mat-option>\n        }\n        @for (item of items | async; track item.value) {\n            <mat-option [value]=\"item.value\" [disabled]=\"optionDisabled ? optionDisabled(item) : false\">\n                {{ item.name }}\n            </mat-option>\n        }\n    </mat-select>\n\n    @if (hint) {\n        <mat-hint>{{ hint }}</mat-hint>\n    }\n\n    @if (hasRequiredError()) {\n        <mat-error i18n>Ce champ est requis</mat-error>\n    } @else if (error) {\n        <mat-error>{{ error }}</mat-error>\n    }\n</mat-form-field>\n", styles: [":host{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatOptionModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalSelectEnumComponent, isStandalone: true, selector: "natural-select-enum", inputs: { enumName: "enumName", nullLabel: "nullLabel", optionDisabled: "optionDisabled", multiple: "multiple" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field [subscriptSizing]=\"subscriptSizing()\">\n    <mat-label>{{ placeholder }}</mat-label>\n    <mat-select\n        (selectionChange)=\"propagateValue($event.value)\"\n        [formControl]=\"internalCtrl\"\n        (blur)=\"onBlur()\"\n        [errorStateMatcher]=\"matcher\"\n        [multiple]=\"multiple\"\n    >\n        @if (nullLabel) {\n            <mat-option [value]=\"null\">{{ nullLabel }}</mat-option>\n        }\n        @for (item of items | async; track item.value) {\n            <mat-option [value]=\"item.value\" [disabled]=\"optionDisabled ? optionDisabled(item) : false\">\n                {{ item.name }}\n            </mat-option>\n        }\n    </mat-select>\n\n    @if (hint()) {\n        <mat-hint>{{ hint() }}</mat-hint>\n    }\n\n    @if (hasRequiredError()) {\n        <mat-error i18n>Ce champ est requis</mat-error>\n    } @else if (error) {\n        <mat-error>{{ error }}</mat-error>\n    }\n</mat-form-field>\n", styles: [":host{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatOptionModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSelectEnumComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-select-enum', standalone: true, imports: [MatFormFieldModule, MatSelectModule, FormsModule, ReactiveFormsModule, CommonModule, MatOptionModule], template: "<mat-form-field>\n    <mat-label>{{ placeholder }}</mat-label>\n    <mat-select\n        (selectionChange)=\"propagateValue($event.value)\"\n        [formControl]=\"internalCtrl\"\n        (blur)=\"onBlur()\"\n        [errorStateMatcher]=\"matcher\"\n        [multiple]=\"multiple\"\n    >\n        @if (nullLabel) {\n            <mat-option [value]=\"null\">{{ nullLabel }}</mat-option>\n        }\n        @for (item of items | async; track item.value) {\n            <mat-option [value]=\"item.value\" [disabled]=\"optionDisabled ? optionDisabled(item) : false\">\n                {{ item.name }}\n            </mat-option>\n        }\n    </mat-select>\n\n    @if (hint) {\n        <mat-hint>{{ hint }}</mat-hint>\n    }\n\n    @if (hasRequiredError()) {\n        <mat-error i18n>Ce champ est requis</mat-error>\n    } @else if (error) {\n        <mat-error>{{ error }}</mat-error>\n    }\n</mat-form-field>\n", styles: [":host{display:flex;flex-direction:column}\n"] }]
+            args: [{ selector: 'natural-select-enum', standalone: true, imports: [MatFormFieldModule, MatSelectModule, FormsModule, ReactiveFormsModule, CommonModule, MatOptionModule], template: "<mat-form-field [subscriptSizing]=\"subscriptSizing()\">\n    <mat-label>{{ placeholder }}</mat-label>\n    <mat-select\n        (selectionChange)=\"propagateValue($event.value)\"\n        [formControl]=\"internalCtrl\"\n        (blur)=\"onBlur()\"\n        [errorStateMatcher]=\"matcher\"\n        [multiple]=\"multiple\"\n    >\n        @if (nullLabel) {\n            <mat-option [value]=\"null\">{{ nullLabel }}</mat-option>\n        }\n        @for (item of items | async; track item.value) {\n            <mat-option [value]=\"item.value\" [disabled]=\"optionDisabled ? optionDisabled(item) : false\">\n                {{ item.name }}\n            </mat-option>\n        }\n    </mat-select>\n\n    @if (hint()) {\n        <mat-hint>{{ hint() }}</mat-hint>\n    }\n\n    @if (hasRequiredError()) {\n        <mat-error i18n>Ce champ est requis</mat-error>\n    } @else if (error) {\n        <mat-error>{{ error }}</mat-error>\n    }\n</mat-form-field>\n", styles: [":host{display:flex;flex-direction:column}\n"] }]
         }], propDecorators: { enumName: [{
                 type: Input,
                 args: [{ required: true }]
@@ -10377,7 +10378,7 @@ class NaturalSelectHierarchicComponent extends AbstractSelect {
         return this.config?.find(c => !!c.selectableAtKey)?.selectableAtKey;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSelectHierarchicComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalSelectHierarchicComponent, isStandalone: true, selector: "natural-select-hierarchic", inputs: { selectLabel: "selectLabel", config: "config", filters: "filters" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n    <mat-label>{{ placeholder }}</mat-label>\n\n    <!-- Input for hierarchical selector -->\n    <input\n        (blur)=\"blur.emit()\"\n        (focus)=\"openDialog()\"\n        [formControl]=\"internalCtrl\"\n        [errorStateMatcher]=\"matcher\"\n        aria-label=\"Recherche et s\u00E9lection\"\n        i18n-aria-label\n        matInput\n    />\n\n    <!-- Meta data -->\n    @if (showIcon) {\n        <mat-icon [naturalIcon]=\"icon\" matIconPrefix />\n    }\n\n    @if (hint) {\n        <mat-hint>{{ hint }}</mat-hint>\n    }\n\n    <!-- Clear button -->\n    <div matIconSuffix>\n        @if (internalCtrl.value && internalCtrl.enabled && !clearLabel) {\n            <button\n                (click)=\"clear(); $event.stopPropagation()\"\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"D\u00E9s\u00E9lectionner\"\n            >\n                <mat-icon naturalIcon=\"close\" />\n            </button>\n        }\n        @if (internalCtrl.value && navigateTo) {\n            <button\n                [routerLink]=\"navigateTo\"\n                (click)=\"$event.stopPropagation()\"\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"Naviguer vers\"\n            >\n                <mat-icon naturalIcon=\"open_in_browser\" />\n            </button>\n        }\n    </div>\n\n    @if (hasRequiredError()) {\n        <mat-error i18n>Ce champ est requis</mat-error>\n    } @else if (error) {\n        <mat-error>{{ error }}</mat-error>\n    }\n</mat-form-field>\n\n<!--    Additional (un)select/(un)link buttons for more visual cohesion with natural-relations --><!-- [clearLabel] and/or [selectLabel] has to be given as attribute input -->\n@if (showSelectButton() || showClearButton()) {\n    <div class=\"external-buttons\">\n        @if (showSelectButton()) {\n            <button (click)=\"openDialog()\" color=\"primary\" mat-flat-button>{{ selectLabel }}</button>\n        }\n        @if (showClearButton()) {\n            <button (click)=\"clear()\" color=\"warn\" mat-button>{{ clearLabel }}</button>\n        }\n    </div>\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons>*:not(:last-child){margin-right:10px}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalSelectHierarchicComponent, isStandalone: true, selector: "natural-select-hierarchic", inputs: { selectLabel: "selectLabel", config: "config", filters: "filters" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field [subscriptSizing]=\"subscriptSizing()\">\n    <mat-label>{{ placeholder }}</mat-label>\n\n    <!-- Input for hierarchical selector -->\n    <input\n        (blur)=\"blur.emit()\"\n        (focus)=\"openDialog()\"\n        [formControl]=\"internalCtrl\"\n        [errorStateMatcher]=\"matcher\"\n        aria-label=\"Recherche et s\u00E9lection\"\n        i18n-aria-label\n        matInput\n    />\n\n    <!-- Meta data -->\n    @if (showIcon) {\n        <mat-icon [naturalIcon]=\"icon\" matIconPrefix />\n    }\n\n    @if (hint()) {\n        <mat-hint>{{ hint() }}</mat-hint>\n    }\n\n    <!-- Clear button -->\n    <div matIconSuffix>\n        @if (internalCtrl.value && internalCtrl.enabled && !clearLabel) {\n            <button\n                (click)=\"clear(); $event.stopPropagation()\"\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"D\u00E9s\u00E9lectionner\"\n            >\n                <mat-icon naturalIcon=\"close\" />\n            </button>\n        }\n        @if (internalCtrl.value && navigateTo) {\n            <button\n                [routerLink]=\"navigateTo\"\n                (click)=\"$event.stopPropagation()\"\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"Naviguer vers\"\n            >\n                <mat-icon naturalIcon=\"open_in_browser\" />\n            </button>\n        }\n    </div>\n\n    @if (hasRequiredError()) {\n        <mat-error i18n>Ce champ est requis</mat-error>\n    } @else if (error) {\n        <mat-error>{{ error }}</mat-error>\n    }\n</mat-form-field>\n\n<!--    Additional (un)select/(un)link buttons for more visual cohesion with natural-relations --><!-- [clearLabel] and/or [selectLabel] has to be given as attribute input -->\n@if (showSelectButton() || showClearButton()) {\n    <div class=\"external-buttons\">\n        @if (showSelectButton()) {\n            <button (click)=\"openDialog()\" color=\"primary\" mat-flat-button>{{ selectLabel }}</button>\n        }\n        @if (showClearButton()) {\n            <button (click)=\"clear()\" color=\"warn\" mat-button>{{ clearLabel }}</button>\n        }\n    </div>\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons>*:not(:last-child){margin-right:10px}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSelectHierarchicComponent, decorators: [{
             type: Component,
@@ -10391,7 +10392,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
                         MatButtonModule,
                         MatTooltipModule,
                         RouterLink,
-                    ], template: "<mat-form-field>\n    <mat-label>{{ placeholder }}</mat-label>\n\n    <!-- Input for hierarchical selector -->\n    <input\n        (blur)=\"blur.emit()\"\n        (focus)=\"openDialog()\"\n        [formControl]=\"internalCtrl\"\n        [errorStateMatcher]=\"matcher\"\n        aria-label=\"Recherche et s\u00E9lection\"\n        i18n-aria-label\n        matInput\n    />\n\n    <!-- Meta data -->\n    @if (showIcon) {\n        <mat-icon [naturalIcon]=\"icon\" matIconPrefix />\n    }\n\n    @if (hint) {\n        <mat-hint>{{ hint }}</mat-hint>\n    }\n\n    <!-- Clear button -->\n    <div matIconSuffix>\n        @if (internalCtrl.value && internalCtrl.enabled && !clearLabel) {\n            <button\n                (click)=\"clear(); $event.stopPropagation()\"\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"D\u00E9s\u00E9lectionner\"\n            >\n                <mat-icon naturalIcon=\"close\" />\n            </button>\n        }\n        @if (internalCtrl.value && navigateTo) {\n            <button\n                [routerLink]=\"navigateTo\"\n                (click)=\"$event.stopPropagation()\"\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"Naviguer vers\"\n            >\n                <mat-icon naturalIcon=\"open_in_browser\" />\n            </button>\n        }\n    </div>\n\n    @if (hasRequiredError()) {\n        <mat-error i18n>Ce champ est requis</mat-error>\n    } @else if (error) {\n        <mat-error>{{ error }}</mat-error>\n    }\n</mat-form-field>\n\n<!--    Additional (un)select/(un)link buttons for more visual cohesion with natural-relations --><!-- [clearLabel] and/or [selectLabel] has to be given as attribute input -->\n@if (showSelectButton() || showClearButton()) {\n    <div class=\"external-buttons\">\n        @if (showSelectButton()) {\n            <button (click)=\"openDialog()\" color=\"primary\" mat-flat-button>{{ selectLabel }}</button>\n        }\n        @if (showClearButton()) {\n            <button (click)=\"clear()\" color=\"warn\" mat-button>{{ clearLabel }}</button>\n        }\n    </div>\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons>*:not(:last-child){margin-right:10px}\n"] }]
+                    ], template: "<mat-form-field [subscriptSizing]=\"subscriptSizing()\">\n    <mat-label>{{ placeholder }}</mat-label>\n\n    <!-- Input for hierarchical selector -->\n    <input\n        (blur)=\"blur.emit()\"\n        (focus)=\"openDialog()\"\n        [formControl]=\"internalCtrl\"\n        [errorStateMatcher]=\"matcher\"\n        aria-label=\"Recherche et s\u00E9lection\"\n        i18n-aria-label\n        matInput\n    />\n\n    <!-- Meta data -->\n    @if (showIcon) {\n        <mat-icon [naturalIcon]=\"icon\" matIconPrefix />\n    }\n\n    @if (hint()) {\n        <mat-hint>{{ hint() }}</mat-hint>\n    }\n\n    <!-- Clear button -->\n    <div matIconSuffix>\n        @if (internalCtrl.value && internalCtrl.enabled && !clearLabel) {\n            <button\n                (click)=\"clear(); $event.stopPropagation()\"\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"D\u00E9s\u00E9lectionner\"\n            >\n                <mat-icon naturalIcon=\"close\" />\n            </button>\n        }\n        @if (internalCtrl.value && navigateTo) {\n            <button\n                [routerLink]=\"navigateTo\"\n                (click)=\"$event.stopPropagation()\"\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"Naviguer vers\"\n            >\n                <mat-icon naturalIcon=\"open_in_browser\" />\n            </button>\n        }\n    </div>\n\n    @if (hasRequiredError()) {\n        <mat-error i18n>Ce champ est requis</mat-error>\n    } @else if (error) {\n        <mat-error>{{ error }}</mat-error>\n    }\n</mat-form-field>\n\n<!--    Additional (un)select/(un)link buttons for more visual cohesion with natural-relations --><!-- [clearLabel] and/or [selectLabel] has to be given as attribute input -->\n@if (showSelectButton() || showClearButton()) {\n    <div class=\"external-buttons\">\n        @if (showSelectButton()) {\n            <button (click)=\"openDialog()\" color=\"primary\" mat-flat-button>{{ selectLabel }}</button>\n        }\n        @if (showClearButton()) {\n            <button (click)=\"clear()\" color=\"warn\" mat-button>{{ clearLabel }}</button>\n        }\n    </div>\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons>*:not(:last-child){margin-right:10px}\n"] }]
         }], propDecorators: { selectLabel: [{
                 type: Input
             }], config: [{
@@ -10865,211 +10866,27 @@ class Source {
     }
 }
 
-function md5(string) {
-    const x = convertToWordArray(utf8Encode(string));
-    const S11 = 7;
-    const S12 = 12;
-    const S13 = 17;
-    const S14 = 22;
-    const S21 = 5;
-    const S22 = 9;
-    const S23 = 14;
-    const S24 = 20;
-    const S31 = 4;
-    const S32 = 11;
-    const S33 = 16;
-    const S34 = 23;
-    const S41 = 6;
-    const S42 = 10;
-    const S43 = 15;
-    const S44 = 21;
-    let a = 0x67452301;
-    let b = 0xefcdab89;
-    let c = 0x98badcfe;
-    let d = 0x10325476;
-    for (let k = 0; k < x.length; k += 16) {
-        const AA = a;
-        const BB = b;
-        const CC = c;
-        const DD = d;
-        a = FF(a, b, c, d, x[k], S11, 0xd76aa478);
-        d = FF(d, a, b, c, x[k + 1], S12, 0xe8c7b756);
-        c = FF(c, d, a, b, x[k + 2], S13, 0x242070db);
-        b = FF(b, c, d, a, x[k + 3], S14, 0xc1bdceee);
-        a = FF(a, b, c, d, x[k + 4], S11, 0xf57c0faf);
-        d = FF(d, a, b, c, x[k + 5], S12, 0x4787c62a);
-        c = FF(c, d, a, b, x[k + 6], S13, 0xa8304613);
-        b = FF(b, c, d, a, x[k + 7], S14, 0xfd469501);
-        a = FF(a, b, c, d, x[k + 8], S11, 0x698098d8);
-        d = FF(d, a, b, c, x[k + 9], S12, 0x8b44f7af);
-        c = FF(c, d, a, b, x[k + 10], S13, 0xffff5bb1);
-        b = FF(b, c, d, a, x[k + 11], S14, 0x895cd7be);
-        a = FF(a, b, c, d, x[k + 12], S11, 0x6b901122);
-        d = FF(d, a, b, c, x[k + 13], S12, 0xfd987193);
-        c = FF(c, d, a, b, x[k + 14], S13, 0xa679438e);
-        b = FF(b, c, d, a, x[k + 15], S14, 0x49b40821);
-        a = GG(a, b, c, d, x[k + 1], S21, 0xf61e2562);
-        d = GG(d, a, b, c, x[k + 6], S22, 0xc040b340);
-        c = GG(c, d, a, b, x[k + 11], S23, 0x265e5a51);
-        b = GG(b, c, d, a, x[k], S24, 0xe9b6c7aa);
-        a = GG(a, b, c, d, x[k + 5], S21, 0xd62f105d);
-        d = GG(d, a, b, c, x[k + 10], S22, 0x2441453);
-        c = GG(c, d, a, b, x[k + 15], S23, 0xd8a1e681);
-        b = GG(b, c, d, a, x[k + 4], S24, 0xe7d3fbc8);
-        a = GG(a, b, c, d, x[k + 9], S21, 0x21e1cde6);
-        d = GG(d, a, b, c, x[k + 14], S22, 0xc33707d6);
-        c = GG(c, d, a, b, x[k + 3], S23, 0xf4d50d87);
-        b = GG(b, c, d, a, x[k + 8], S24, 0x455a14ed);
-        a = GG(a, b, c, d, x[k + 13], S21, 0xa9e3e905);
-        d = GG(d, a, b, c, x[k + 2], S22, 0xfcefa3f8);
-        c = GG(c, d, a, b, x[k + 7], S23, 0x676f02d9);
-        b = GG(b, c, d, a, x[k + 12], S24, 0x8d2a4c8a);
-        a = HH(a, b, c, d, x[k + 5], S31, 0xfffa3942);
-        d = HH(d, a, b, c, x[k + 8], S32, 0x8771f681);
-        c = HH(c, d, a, b, x[k + 11], S33, 0x6d9d6122);
-        b = HH(b, c, d, a, x[k + 14], S34, 0xfde5380c);
-        a = HH(a, b, c, d, x[k + 1], S31, 0xa4beea44);
-        d = HH(d, a, b, c, x[k + 4], S32, 0x4bdecfa9);
-        c = HH(c, d, a, b, x[k + 7], S33, 0xf6bb4b60);
-        b = HH(b, c, d, a, x[k + 10], S34, 0xbebfbc70);
-        a = HH(a, b, c, d, x[k + 13], S31, 0x289b7ec6);
-        d = HH(d, a, b, c, x[k], S32, 0xeaa127fa);
-        c = HH(c, d, a, b, x[k + 3], S33, 0xd4ef3085);
-        b = HH(b, c, d, a, x[k + 6], S34, 0x4881d05);
-        a = HH(a, b, c, d, x[k + 9], S31, 0xd9d4d039);
-        d = HH(d, a, b, c, x[k + 12], S32, 0xe6db99e5);
-        c = HH(c, d, a, b, x[k + 15], S33, 0x1fa27cf8);
-        b = HH(b, c, d, a, x[k + 2], S34, 0xc4ac5665);
-        a = II(a, b, c, d, x[k], S41, 0xf4292244);
-        d = II(d, a, b, c, x[k + 7], S42, 0x432aff97);
-        c = II(c, d, a, b, x[k + 14], S43, 0xab9423a7);
-        b = II(b, c, d, a, x[k + 5], S44, 0xfc93a039);
-        a = II(a, b, c, d, x[k + 12], S41, 0x655b59c3);
-        d = II(d, a, b, c, x[k + 3], S42, 0x8f0ccc92);
-        c = II(c, d, a, b, x[k + 10], S43, 0xffeff47d);
-        b = II(b, c, d, a, x[k + 1], S44, 0x85845dd1);
-        a = II(a, b, c, d, x[k + 8], S41, 0x6fa87e4f);
-        d = II(d, a, b, c, x[k + 15], S42, 0xfe2ce6e0);
-        c = II(c, d, a, b, x[k + 6], S43, 0xa3014314);
-        b = II(b, c, d, a, x[k + 13], S44, 0x4e0811a1);
-        a = II(a, b, c, d, x[k + 4], S41, 0xf7537e82);
-        d = II(d, a, b, c, x[k + 11], S42, 0xbd3af235);
-        c = II(c, d, a, b, x[k + 2], S43, 0x2ad7d2bb);
-        b = II(b, c, d, a, x[k + 9], S44, 0xeb86d391);
-        a = addUnsigned(a, AA);
-        b = addUnsigned(b, BB);
-        c = addUnsigned(c, CC);
-        d = addUnsigned(d, DD);
-    }
-    const result = wordToHex(a) + wordToHex(b) + wordToHex(c) + wordToHex(d);
-    return result.toLowerCase();
-}
-function addUnsigned(lX, lY) {
-    const lX8 = lX & 0x80000000;
-    const lY8 = lY & 0x80000000;
-    const lX4 = lX & 0x40000000;
-    const lY4 = lY & 0x40000000;
-    const lResult = (lX & 0x3fffffff) + (lY & 0x3fffffff);
-    if (lX4 & lY4) {
-        return lResult ^ 0x80000000 ^ lX8 ^ lY8;
-    }
-    if (lX4 | lY4) {
-        if (lResult & 0x40000000) {
-            return lResult ^ 0xc0000000 ^ lX8 ^ lY8;
-        }
-        else {
-            return lResult ^ 0x40000000 ^ lX8 ^ lY8;
-        }
-    }
-    else {
-        return lResult ^ lX8 ^ lY8;
-    }
-}
-function rotateLeft(lValue, iShiftBits) {
-    return (lValue << iShiftBits) | (lValue >>> (32 - iShiftBits));
-}
-function F(x, y, z) {
-    return (x & y) | (~x & z);
-}
-function G(x, y, z) {
-    return (x & z) | (y & ~z);
-}
-function H(x, y, z) {
-    return x ^ y ^ z;
-}
-function I(x, y, z) {
-    return y ^ (x | ~z);
-}
-function FF(a, b, c, d, x, s, ac) {
-    a = addUnsigned(a, addUnsigned(addUnsigned(F(b, c, d), x), ac));
-    return addUnsigned(rotateLeft(a, s), b);
-}
-function GG(a, b, c, d, x, s, ac) {
-    a = addUnsigned(a, addUnsigned(addUnsigned(G(b, c, d), x), ac));
-    return addUnsigned(rotateLeft(a, s), b);
-}
-function HH(a, b, c, d, x, s, ac) {
-    a = addUnsigned(a, addUnsigned(addUnsigned(H(b, c, d), x), ac));
-    return addUnsigned(rotateLeft(a, s), b);
-}
-function II(a, b, c, d, x, s, ac) {
-    a = addUnsigned(a, addUnsigned(addUnsigned(I(b, c, d), x), ac));
-    return addUnsigned(rotateLeft(a, s), b);
-}
-function convertToWordArray(string) {
-    let lWordCount;
-    const lMessageLength = string.length;
-    const lNumberOfWords_temp1 = lMessageLength + 8;
-    const lNumberOfWords_temp2 = (lNumberOfWords_temp1 - (lNumberOfWords_temp1 % 64)) / 64;
-    const lNumberOfWords = (lNumberOfWords_temp2 + 1) * 16;
-    const lWordArray = Array(lNumberOfWords - 1);
-    let lBytePosition = 0;
-    let lByteCount = 0;
-    while (lByteCount < lMessageLength) {
-        lWordCount = (lByteCount - (lByteCount % 4)) / 4;
-        lBytePosition = (lByteCount % 4) * 8;
-        lWordArray[lWordCount] = lWordArray[lWordCount] | (string.charCodeAt(lByteCount) << lBytePosition);
-        lByteCount++;
-    }
-    lWordCount = (lByteCount - (lByteCount % 4)) / 4;
-    lBytePosition = (lByteCount % 4) * 8;
-    lWordArray[lWordCount] = lWordArray[lWordCount] | (0x80 << lBytePosition);
-    lWordArray[lNumberOfWords - 2] = lMessageLength << 3;
-    lWordArray[lNumberOfWords - 1] = lMessageLength >>> 29;
-    return lWordArray;
-}
-function wordToHex(lValue) {
-    let WordToHexValue = '';
-    let WordToHexValue_temp = '';
-    let lByte;
-    let lCount;
-    for (lCount = 0; lCount <= 3; lCount++) {
-        lByte = (lValue >>> (lCount * 8)) & 255;
-        WordToHexValue_temp = '0' + lByte.toString(16);
-        WordToHexValue = WordToHexValue + WordToHexValue_temp.substr(WordToHexValue_temp.length - 2, 2);
-    }
-    return WordToHexValue;
-}
-function utf8Encode(string) {
-    let utftext = '';
-    let c;
-    string = string.replace(/\r\n/g, '\n');
-    for (let n = 0; n < string.length; n++) {
-        c = string.charCodeAt(n);
-        if (c < 128) {
-            utftext += String.fromCharCode(c);
-        }
-        else if (c > 127 && c < 2048) {
-            utftext += String.fromCharCode((c >> 6) | 192);
-            utftext += String.fromCharCode((c & 63) | 128);
-        }
-        else {
-            utftext += String.fromCharCode((c >> 12) | 224);
-            utftext += String.fromCharCode(((c >> 6) & 63) | 128);
-            utftext += String.fromCharCode((c & 63) | 128);
-        }
-    }
-    return utftext;
+function bufferToHexa(hashBuffer) {
+    const hashArray = new Uint8Array(hashBuffer); // convert buffer to byte array
+    return hashArray.reduce((result, byte) => result + byte.toString(16).padStart(2, '0'), ''); // convert bytes to hex string
+}
+/**
+ * Thin wrapper around browsers' native SubtleCrypto for convenience of use
+ */
+async function sha256(message) {
+    const msgUint8 = new TextEncoder().encode(message); // encode as (utf-8) Uint8Array
+    const hashBuffer = await crypto.subtle.digest('SHA-256', msgUint8); // hash the message
+    return bufferToHexa(hashBuffer);
+}
+/**
+ * Thin wrapper around browsers' native SubtleCrypto for convenience of use
+ */
+async function hmacSha256(secret, payload) {
+    const encoder = new TextEncoder();
+    const algorithm = { name: 'HMAC', hash: 'SHA-256' };
+    const key = await crypto.subtle.importKey('raw', encoder.encode(secret), algorithm, false, ['sign']);
+    const signature = await crypto.subtle.sign(algorithm.name, key, encoder.encode(payload));
+    return bufferToHexa(signature);
 }
 
 function isRetina() {
@@ -11085,12 +10902,12 @@ function isRetina() {
     return !!myWindow?.matchMedia(mediaQuery).matches;
 }
 /**
- * Return URL to Gravatar image from either an email or a MD5
+ * Return URL to Gravatar image from either an email or a MD5 or SHA-256 of an email
  */
 class Gravatar extends Source {
-    getAvatar(size) {
+    async getAvatar(size) {
         const value = this.getValue();
-        const hash = /^[a-f0-9]{32}$/.exec(value) ? value : md5(value.trim().toLowerCase()).toString();
+        const hash = /^([a-f0-9]{32}|[a-f0-9]{64})$/.exec(value) ? value : await sha256(value.trim().toLowerCase());
         const avatarSize = isRetina() ? size * 2 : size;
         return `https://secure.gravatar.com/avatar/${hash}?s=${avatarSize}&d=404`;
     }
@@ -11130,7 +10947,7 @@ function getInitials(name, size) {
  */
 class Initials extends Source {
     getAvatar(size) {
-        return getInitials(this.getValue(), size);
+        return Promise.resolve(getInitials(this.getValue(), size));
     }
     isTextual() {
         return true;
@@ -11142,7 +10959,7 @@ class Initials extends Source {
  */
 class Image extends Source {
     getAvatar() {
-        return this.getValue();
+        return Promise.resolve(this.getValue());
     }
     isTextual() {
         return false;
@@ -11295,12 +11112,12 @@ class NaturalAvatarComponent {
     }
     buildTextAvatar(avatarSource) {
         this.clearAvatar();
-        this.avatarText = avatarSource.getAvatar(+this.textMaximumLength);
+        avatarSource.getAvatar(+this.textMaximumLength).then(avatarText => (this.avatarText = avatarText));
         this.avatarStyle = this.getTextualStyle(avatarSource.getValue());
     }
     buildImageAvatar(avatarSource) {
         this.clearAvatar();
-        this.avatarSrc = avatarSource.getAvatar(+this.size);
+        avatarSource.getAvatar(+this.size).then(avatarSrc => (this.avatarSrc = avatarSrc));
         this.avatarStyle = this.getImageStyle();
     }
     /**
@@ -11690,12 +11507,13 @@ function graphqlQuerySigner(key) {
         const operations = getOperations(req);
         const timestamp = Math.round(Date.now() / 1000);
         const payload = timestamp + operations;
-        const hash = HmacSHA256(payload, key).toString();
-        const header = `v1.${timestamp}.${hash}`;
-        const signedRequest = req.clone({
-            headers: req.headers.set('X-Signature', header),
-        });
-        return next(signedRequest);
+        return from(hmacSha256(key, payload)).pipe(switchMap$1(hash => {
+            const header = `v1.${timestamp}.${hash}`;
+            const signedRequest = req.clone({
+                headers: req.headers.set('X-Signature', header),
+            });
+            return next(signedRequest);
+        }));
     };
 }