@provoly/dashboard 0.12.9 → 0.13.1

package/fesm2022/provoly-dashboard.mjs

@@ -12,19 +12,21 @@ import * as i1$3 from '@ngrx/effects';
 import { createEffect, ofType, EffectsModule } from '@ngrx/effects';
 import * as i1 from '@ngrx/store';
 import { createAction, props, createReducer, on, createFeatureSelector, createSelector, StoreModule } from '@ngrx/store';
-import { of, Subscription, filter, combineLatest, debounceTime, BehaviorSubject, map, Subject, mergeMap, from as from$1, forkJoin, catchError as catchError$1, throwError, switchMap, tap as tap$1, merge, ReplaySubject, combineLatestWith, distinctUntilChanged as distinctUntilChanged$1, startWith, fromEvent, auditTime, interval } from 'rxjs';
+import { of, Subscription, filter, combineLatest, debounceTime, BehaviorSubject, map, Subject, mergeMap, from as from$1, forkJoin, catchError as catchError$1, throwError, switchMap, tap as tap$1, merge, ReplaySubject, combineLatestWith, distinctUntilChanged as distinctUntilChanged$1, startWith, delay, fromEvent, auditTime, interval } from 'rxjs';
 import * as i3 from '@angular/platform-browser';
 import { Style, Icon } from 'ol/style';
 import { createEntityAdapter } from '@ngrx/entity';
 import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
 import equal from 'fast-deep-equal/es6';
-import { distinctUntilChanged, filter as filter$1, debounceTime as debounceTime$1, mergeMap as mergeMap$1, map as map$1, catchError, withLatestFrom, tap, delay } from 'rxjs/operators';
+import { distinctUntilChanged, filter as filter$1, debounceTime as debounceTime$1, mergeMap as mergeMap$1, map as map$1, catchError, withLatestFrom, tap, delay as delay$1 } from 'rxjs/operators';
 import { animation, style, animate, trigger, transition, useAnimation } from '@angular/animations';
 import { v4 } from 'uuid';
 import { GeoJSON } from 'ol/format';
 import { fromLonLat } from 'ol/proj';
+import * as i1$4 from '@angular/cdk/accordion';
+import { CdkAccordionModule } from '@angular/cdk/accordion';
 import * as i3$1 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i2$2 from '@ng-select/ng-select';
 import { NgSelectModule } from '@ng-select/ng-select';
 import { webSocket } from 'rxjs/webSocket';
@@ -298,7 +300,7 @@ const enTranslations$1 = {
             },
             tile: 'Tiles',
             now: 'Today',
-            since_day: 'Since {{day}} days',
+            since_day: 'Since {{day}} day{{plural}}',
             layout: {
                 '0': 'Free layout',
                 '0_detailled': 'Free mode display, rendering size and positioning fully customizable by the user.',
@@ -473,6 +475,7 @@ const enTranslations$1 = {
             label: 'Filters settings',
             noAttributes: 'Presentation had no available attributes',
             noFilters: 'No filters set up for this presentation yet.',
+            clear: 'Clear all',
             list: {
                 attributes: 'Attributes: ',
                 add: 'Add filter',
@@ -625,7 +628,7 @@ const frTranslations$1 = {
             },
             tile: 'Tuiles',
             now: "Aujourd'hui",
-            since_day: 'Il y a {{day}} jours',
+            since_day: 'Il y a {{day}} jour{{plural}}',
             layout: {
                 '0': 'Composition libre',
                 '0_detailled': "Affichage en mode libre, la taille et le positionnement des restitutions sont entièrement paramétrables par l'utilisateur.",
@@ -800,6 +803,7 @@ const frTranslations$1 = {
             label: 'Paramétrer les filtres',
             noAttributes: "La présentation en cours ne dispose d'aucune attribut sur lequel filtrer",
             noFilters: "Vous n'avez pas encore paramétré de filtre.",
+            clear: 'Effacer',
             list: {
                 attributes: 'Attributs: ',
                 add: 'Créer un filtre',
@@ -1851,22 +1855,51 @@ class SymbolService {
         this.imageService = imageService;
         this.definitions = {};
         this.classes = [];
+        this.imageCache = {};
         this.cache = {};
-        this.store.select(ConfigSelectors.iconDefinitions).subscribe((defs) => (this.definitions = defs));
         this.store.select(ClassSelectors.classes).subscribe((classes) => (this.classes = classes));
+        this.store.select(ConfigSelectors.iconDefinitions).subscribe((defs) => {
+            this.definitions = defs;
+            // For each class, generate all icons for ruleset
+            Object.keys(this.definitions).forEach((classId) => {
+                if (!this.imageCache[classId]) {
+                    this.imageCache[classId] = { images: {}, borderedImages: {}, ruleSignature: '--init--' };
+                }
+                if (!this.imageCache[classId] ||
+                    this.imageCache[classId].ruleSignature !== JSON.stringify(this.definitions[classId])) {
+                    this.imageCache[classId].ruleSignature = JSON.stringify(this.definitions[classId]);
+                    this.imageCache[classId].images = this.generateAllRulesCombinaisonImages(this.definitions[classId]);
+                    this.imageCache[classId].borderedImages = this.generateAllRulesCombinaisonImages(this.definitions[classId], '#8cd560');
+                }
+            });
+        });
+    }
+    generateAllRulesCombinaisonImages(definition, borderColor) {
+        return this.recursiveRuleMatches(definition)
+            .map((ruleMatch) => ({ [ruleMatch]: this.generateImageForRuleMatch(ruleMatch, definition, borderColor) }))
+            .reduce((p, c) => ({ ...p, ...c }), {});
     }
-    getSymbol(item, borderColor) {
+    recursiveRuleMatches(definition) {
+        const [rule, ...otherRules] = definition;
+        if (!rule) {
+            return [''];
+        }
+        return this.recursiveRuleMatches(otherRules)
+            .map((rule) => ['0' + rule, '1' + rule])
+            .flat();
+    }
+    generateImageForRuleMatch(ruleMatch, definition, borderColor) {
         const canvas = document.createElement('canvas');
         const ctx = canvas.getContext('2d') ?? null;
+        let applicableRules = definition.filter((_, idx) => ruleMatch[idx] === '1');
+        if (applicableRules.length === 0) {
+            // If no rule match, then apply default rule only
+            applicableRules = definition.filter((def) => !!def.isDefault);
+        }
+        const promiseImages = Promise.all(applicableRules.map((rule) => this.downloadImage(rule.iconUrl)));
         return new Promise((resolve, reject) => {
-            // First, we try to apply non-default rules
-            let appliableRules = (this.definitions[item.oClass] ?? this.definitions['default']).filter((def) => this.matchRule(item, def.rule) && !def.isDefault);
-            if (appliableRules.length === 0) {
-                // If no rule match, then apply default rule
-                appliableRules = (this.definitions[item.oClass] ?? this.definitions['default']).filter((def) => !!def.isDefault);
-            }
-            const promiseImages = Promise.all(appliableRules.map((rule) => this.downloadImage(rule.iconUrl)));
-            promiseImages.then((images) => {
+            promiseImages
+                .then((images) => {
                 canvas.width = 600;
                 canvas.height = 600;
                 const subSize = {
@@ -1876,7 +1909,7 @@ class SymbolService {
                     offsetToBottom: 600 * (1 - SUB_ICON_SIZE_PERCENT)
                 };
                 // Then draw everything
-                appliableRules.forEach((def, idx, arr) => {
+                applicableRules.forEach((def, idx, arr) => {
                     const image = images[idx];
                     switch (def.position) {
                         case IconPosition.BOTTOM_RIGHT:
@@ -1921,9 +1954,18 @@ class SymbolService {
                     }
                 });
                 resolve(canvas);
-            });
+            })
+                .catch((err) => reject(err));
         });
     }
+    getSymbol(item, bordered) {
+        // First, we try to apply non-default rules
+        let ruleMatch = (this.definitions[item.oClass] ?? this.definitions['default'])
+            .map((def) => (this.matchRule(item, def.rule) && !def.isDefault ? '1' : '0'))
+            .join('');
+        const imageSet = this.imageCache[item.oClass] ?? this.imageCache['default'];
+        return imageSet[bordered ? 'borderedImages' : 'images'][ruleMatch];
+    }
     getSymbolOfClass(id) {
         const definitionsForClass = (this.definitions[id] || []).find((def) => def.isDefault);
         return this.downloadAsUrl(definitionsForClass?.iconUrl ?? DEFAULT_ICON_URL);
@@ -1941,9 +1983,9 @@ class SymbolService {
             });
         });
     }
-    getSymbolAsIconStyle(item, borderColor) {
+    getSymbolAsIconStyle(item, bordered) {
         return new Promise((resolve, reject) => {
-            this.getSymbol(item, borderColor)
+            this.getSymbol(item, bordered)
                 .then((canvas) => {
                 const size = (this.definitions[item.oClass] ?? this.definitions['default'])[0].iconSize;
                 const scale = [size[0] / canvas.width, size[1] / canvas.height];
@@ -2054,6 +2096,8 @@ const enTranslations = {
             status: 'Status',
             versionHistory: 'Version history',
             data: 'Data',
+            table: 'Table',
+            map: 'Map',
             export: 'Export',
             api: 'API',
             returnToList: 'Back to catalog',
@@ -2088,9 +2132,10 @@ const frTranslations = {
             search: 'Rechercher',
             date: 'Date',
             status: 'Statut',
-            data: 'Données',
             versionHistory: 'Historique de versions',
+            data: 'Données',
             table: 'Tableau',
+            map: 'Carte',
             export: 'Export',
             api: 'API',
             returnToList: 'Retour au catalogue',
@@ -2101,7 +2146,7 @@ const frTranslations = {
                 INACTIVE: 'Invalide',
                 ERROR: 'En erreur',
                 ACTIVE: 'Disponible',
-                currentlyActive: 'Active'
+                currentlyActive: 'Actif'
             },
             buttonAction: {
                 ACTIVE: 'Invalider',
@@ -4722,6 +4767,51 @@ const searchReducer = createReducer(initialSearchState, on(SearchActions.search,
     searchLoading: [...state.searchLoading.filter((id) => id !== (action.id ?? DEFAULT_NAMED_QUERY_ID))]
 })));
 
+class AccordionComponent {
+    constructor() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AccordionComponent, selector: "pry-accordion", ngImport: i0, template: "<cdk-accordion class=\"o-accordion\">\n  <ng-content></ng-content>\n</cdk-accordion>\n", dependencies: [{ kind: "directive", type: i1$4.CdkAccordion, selector: "cdk-accordion, [cdkAccordion]", inputs: ["multi"], exportAs: ["cdkAccordion"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AccordionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pry-accordion', template: "<cdk-accordion class=\"o-accordion\">\n  <ng-content></ng-content>\n</cdk-accordion>\n" }]
+        }], ctorParameters: function () { return []; } });
+
+class AccordionItemComponent {
+    constructor() {
+        this.item = '';
+        this.borderColor = '';
+        this.translationStringBase = '';
+        this.showSearchBar = false;
+        this.search = new EventEmitter();
+    }
+    onSearch(item, $event) {
+        this.search.emit({ ...this.search$.getValue(), [item]: $event });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AccordionItemComponent, selector: "pry-accordion-item", inputs: { item: "item", borderColor: "borderColor", index: "index", translationStringBase: "translationStringBase", length: "length", showSearchBar: "showSearchBar", search$: "search$" }, outputs: { search: "search" }, ngImport: i0, template: "<cdk-accordion-item\n  #accordionItem=\"cdkAccordionItem\"\n  [id]=\"'button_' + item\"\n  role=\"tab\"\n  [attr.aria-controls]=\"'panel_' + item\"\n  [attr.aria-selected]=\"accordionItem.expanded\"\n  [attr.aria-expanded]=\"accordionItem.expanded\"\n>\n  <div class=\"o-accordion__title\" [class.is-active]=\"accordionItem.expanded\" [style.--border-color]=\"borderColor\">\n    <button type=\"button\" class=\"o-accordion__title__btn\" (click)=\"accordionItem.toggle()\">\n      <span>\n        {{ translationStringBase + item | i18n }}\n        <ng-container *ngIf=\"length\">&nbsp;({{ length }}) </ng-container>\n      </span>\n      <pry-icon\n        [width]=\"15\"\n        [height]=\"15\"\n        [iconSvg]=\"accordionItem.expanded ? 'chevron_top_rounded' : 'chevron_bottom_rounded'\"\n      ></pry-icon>\n    </button>\n  </div>\n  <div\n    *ngIf=\"accordionItem.expanded\"\n    class=\"o-accordion__panel\"\n    role=\"tabpanel\"\n    [attr.aria-labelledby]=\"'button_' + item\"\n    [id]=\"'panel_' + item\"\n    [attr.aria-hidden]=\"!accordionItem.expanded\"\n    [style.--border-color]=\"borderColor\"\n  >\n    <div *ngIf=\"showSearchBar\" class=\"o-accordion__panel__head\">\n      <input\n        type=\"text\"\n        class=\"a-form-field\"\n        [placeholder]=\"'@pry.toolbox.catalog.filter.name' | i18n\"\n        [ngModel]=\"(search$ | async)[item]\"\n        (ngModelChange)=\"onSearch(item, $event)\"\n      />\n      <pry-icon iconSvg=\"search\" [width]=\"17\" [height]=\"17\"></pry-icon>\n    </div>\n    <ng-content></ng-content>\n  </div>\n</cdk-accordion-item>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "directive", type: i1$4.CdkAccordionItem, selector: "cdk-accordion-item, [cdkAccordionItem]", inputs: ["expanded", "disabled"], outputs: ["closed", "opened", "destroyed", "expandedChange"], exportAs: ["cdkAccordionItem"] }, { kind: "directive", type: i3$1.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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AccordionItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pry-accordion-item', template: "<cdk-accordion-item\n  #accordionItem=\"cdkAccordionItem\"\n  [id]=\"'button_' + item\"\n  role=\"tab\"\n  [attr.aria-controls]=\"'panel_' + item\"\n  [attr.aria-selected]=\"accordionItem.expanded\"\n  [attr.aria-expanded]=\"accordionItem.expanded\"\n>\n  <div class=\"o-accordion__title\" [class.is-active]=\"accordionItem.expanded\" [style.--border-color]=\"borderColor\">\n    <button type=\"button\" class=\"o-accordion__title__btn\" (click)=\"accordionItem.toggle()\">\n      <span>\n        {{ translationStringBase + item | i18n }}\n        <ng-container *ngIf=\"length\">&nbsp;({{ length }}) </ng-container>\n      </span>\n      <pry-icon\n        [width]=\"15\"\n        [height]=\"15\"\n        [iconSvg]=\"accordionItem.expanded ? 'chevron_top_rounded' : 'chevron_bottom_rounded'\"\n      ></pry-icon>\n    </button>\n  </div>\n  <div\n    *ngIf=\"accordionItem.expanded\"\n    class=\"o-accordion__panel\"\n    role=\"tabpanel\"\n    [attr.aria-labelledby]=\"'button_' + item\"\n    [id]=\"'panel_' + item\"\n    [attr.aria-hidden]=\"!accordionItem.expanded\"\n    [style.--border-color]=\"borderColor\"\n  >\n    <div *ngIf=\"showSearchBar\" class=\"o-accordion__panel__head\">\n      <input\n        type=\"text\"\n        class=\"a-form-field\"\n        [placeholder]=\"'@pry.toolbox.catalog.filter.name' | i18n\"\n        [ngModel]=\"(search$ | async)[item]\"\n        (ngModelChange)=\"onSearch(item, $event)\"\n      />\n      <pry-icon iconSvg=\"search\" [width]=\"17\" [height]=\"17\"></pry-icon>\n    </div>\n    <ng-content></ng-content>\n  </div>\n</cdk-accordion-item>\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { item: [{
+                type: Input
+            }], borderColor: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], translationStringBase: [{
+                type: Input
+            }], length: [{
+                type: Input
+            }], showSearchBar: [{
+                type: Input
+            }], search$: [{
+                type: Input
+            }], search: [{
+                type: Output
+            }] } });
+
 class PryCoreModule {
     constructor(pryTranslateService) {
         this.pryTranslateService = pryTranslateService;
@@ -4746,13 +4836,17 @@ class PryCoreModule {
             PryNqColorSelectorComponent,
             PryAccessDirective,
             PryUploadComponent,
-            PrySelectImageComponent], imports: [CommonModule,
+            PrySelectImageComponent,
+            AccordionComponent,
+            AccordionItemComponent], imports: [CommonModule,
             RouterModule,
             HttpClientModule, i1.StoreFeatureModule, i1.StoreFeatureModule, i1.StoreFeatureModule, i1.StoreFeatureModule, i1.StoreFeatureModule, i1.StoreFeatureModule, i1.StoreFeatureModule, i1.StoreFeatureModule, i1.StoreFeatureModule, i1$3.EffectsFeatureModule, i1$3.EffectsFeatureModule, i1$3.EffectsFeatureModule, i1$3.EffectsFeatureModule, i1$3.EffectsFeatureModule, i1$3.EffectsFeatureModule, i1$3.EffectsFeatureModule, i1$3.EffectsFeatureModule, i1$3.EffectsFeatureModule, PryIconModule,
             OverlayModule,
             PryOverlayModule,
             PryI18nModule,
-            PryModalStatusModule], exports: [TranslateIdPipe,
+            PryModalStatusModule,
+            CdkAccordionModule,
+            FormsModule], exports: [TranslateIdPipe,
             TranslateItemToSymbolPipe,
             GetSecuredImagePipe,
             BaseLayoutComponent,
@@ -4761,7 +4855,9 @@ class PryCoreModule {
             PryNqColorSelectorComponent,
             PryAccessDirective,
             PryUploadComponent,
-            PrySelectImageComponent] }); }
+            PrySelectImageComponent,
+            AccordionComponent,
+            AccordionItemComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PryCoreModule, providers: [AsyncPipe, TranslateIdPipe, TranslateItemToSymbolPipe], imports: [CommonModule,
             RouterModule,
             HttpClientModule,
@@ -4787,7 +4883,9 @@ class PryCoreModule {
             OverlayModule,
             PryOverlayModule,
             PryI18nModule,
-            PryModalStatusModule] }); }
+            PryModalStatusModule,
+            CdkAccordionModule,
+            FormsModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PryCoreModule, decorators: [{
             type: NgModule,
@@ -4803,7 +4901,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
                         PryNqColorSelectorComponent,
                         PryAccessDirective,
                         PryUploadComponent,
-                        PrySelectImageComponent
+                        PrySelectImageComponent,
+                        AccordionComponent,
+                        AccordionItemComponent
                     ],
                     imports: [
                         CommonModule,
@@ -4831,7 +4931,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
                         OverlayModule,
                         PryOverlayModule,
                         PryI18nModule,
-                        PryModalStatusModule
+                        PryModalStatusModule,
+                        CdkAccordionModule,
+                        FormsModule
                     ],
                     providers: [AsyncPipe, TranslateIdPipe, TranslateItemToSymbolPipe],
                     exports: [
@@ -4844,7 +4946,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
                         PryNqColorSelectorComponent,
                         PryAccessDirective,
                         PryUploadComponent,
-                        PrySelectImageComponent
+                        PrySelectImageComponent,
+                        AccordionComponent,
+                        AccordionItemComponent
                     ]
                 }]
         }], ctorParameters: function () { return [{ type: PryI18nService }]; } });
@@ -5842,7 +5946,7 @@ class PrySelectComponent {
                 useExisting: forwardRef(() => PrySelectComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<ng-container *ngIf=\"itemsAsOption; else itemAsInput\">\n  <ng-select\n    class=\"a-pry-select\"\n    [class.pry-select-form]=\"isForm\"\n    [multiple]=\"multiple\"\n    [closeOnSelect]=\"!multiple\"\n    [items]=\"items\"\n    [bindValue]=\"bindData ? undefined : bindValue\"\n    [bindLabel]=\"bindData ? undefined : bindLabel\"\n    [clearable]=\"clearable\"\n    [ngModel]=\"value\"\n    (ngModelChange)=\"writeValue($event)\"\n    [searchable]=\"autocomplete\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [required]=\"required\"\n    [name]=\"name\"\n    [placeholder]=\"placeholder!\"\n  >\n    <!-- Label part -->\n    <ng-container *ngIf=\"templateLabel; else noTemplateLabel\">\n      <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\n        <ng-container [ngTemplateOutlet]=\"templateLabel\" [ngTemplateOutletContext]=\"{ item, clear }\"></ng-container>\n      </ng-template>\n    </ng-container>\n    <ng-template #noTemplateLabel>\n      <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\n        <span\n          *ngIf=\"multiple && !multipleClearRight\"\n          class=\"ng-value-icon left\"\n          (click)=\"clear(item)\"\n          aria-hidden=\"true\"\n          >\u00D7</span\n        >\n        <span class=\"ng-value-label\">\n          <ng-container *ngIf=\"bindIcon\">\n            <pry-icon\n              style=\"margin-right: 0.25em\"\n              [iconSvg]=\"item[bindIcon]\"\n              [width]=\"iconSize[0]\"\n              [height]=\"iconSize[1]\"\n              [animation]=\"false\"\n            ></pry-icon>\n          </ng-container>\n          <ng-container *ngIf=\"labelTranslate; else noTranslate\">\n            <ng-container *ngIf=\"translationFn; else noTranslationFn\">\n              {{ translationFn(bindData ? item : item?.[bindLabel], translationFnArgs) | i18n }}\n            </ng-container>\n            <ng-template #noTranslationFn>\n              <ng-container *ngIf=\"baseTranslate + (bindData ? item : item?.[bindLabel]) !== 'null'\">\n                {{ baseTranslate + (bindData ? item : item?.[bindLabel]) | i18n }}\n              </ng-container>\n            </ng-template>\n          </ng-container>\n          <ng-template #noTranslate>\n            {{ bindData ? item : item?.[bindLabel] }}\n          </ng-template>\n        </span>\n        <span\n          *ngIf=\"multiple && multipleClearRight\"\n          class=\"ng-value-icon right\"\n          (click)=\"clear(item)\"\n          aria-hidden=\"true\"\n          >\u00D7</span\n        >\n      </ng-template>\n    </ng-template>\n\n    <!-- Option part -->\n    <ng-container *ngIf=\"templateOption; else noTemplateOption\">\n      <ng-template ng-option-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"templateOption\" [ngTemplateOutletContext]=\"{ item }\"></ng-container>\n      </ng-template>\n    </ng-container>\n    <ng-template #noTemplateOption>\n      <ng-template ng-option-tmp let-item=\"item\">\n        <span class=\"ng-option-label\">\n          <pry-icon\n            *ngIf=\"bindIcon\"\n            [iconSvg]=\"item[bindIcon]\"\n            [width]=\"iconSize[0]\"\n            [height]=\"iconSize[1]\"\n            [animation]=\"false\"\n          ></pry-icon>\n          <ng-container *ngIf=\"labelTranslate; else noTranslateOption\">\n            <ng-container *ngIf=\"translationFn; else noTranslationFnOption\">\n              {{ translationFn(bindData ? item : item?.[bindLabel], translationFnArgs) | i18n }}\n            </ng-container>\n            <ng-template #noTranslationFnOption>\n              {{ baseTranslate + (bindData ? item : item?.[bindLabel]) | i18n }}\n            </ng-template>\n          </ng-container>\n          <ng-template #noTranslateOption>\n            {{ bindData ? item : item?.[bindLabel] }}\n          </ng-template>\n        </span>\n      </ng-template>\n    </ng-template>\n  </ng-select>\n</ng-container>\n<ng-template #itemAsInput>\n  <ng-select\n    #select\n    class=\"pry-select\"\n    [class.pry-select-form]=\"isForm\"\n    [multiple]=\"multiple\"\n    [closeOnSelect]=\"!multiple\"\n    [items]=\"items\"\n    [bindValue]=\"bindValue\"\n    [bindLabel]=\"bindLabel\"\n    [clearable]=\"clearable\"\n    [searchable]=\"autocomplete\"\n    [ngModel]=\"value\"\n    (ngModelChange)=\"writeValue($event)\"\n    [readonly]=\"readonly\"\n    [disabled]=\"disabled\"\n    [required]=\"required\"\n    [name]=\"name\"\n    [placeholder]=\"placeholder!\"\n  >\n  </ng-select>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i2$2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i2$2.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<ng-container *ngIf=\"itemsAsOption; else itemAsInput\">\n  <ng-select\n    class=\"a-pry-select\"\n    [class.pry-select-form]=\"isForm\"\n    [multiple]=\"multiple\"\n    [closeOnSelect]=\"!multiple\"\n    [items]=\"items\"\n    [bindValue]=\"bindData ? undefined : bindValue\"\n    [bindLabel]=\"bindData ? undefined : bindLabel\"\n    [clearable]=\"clearable\"\n    [ngModel]=\"value\"\n    (ngModelChange)=\"writeValue($event)\"\n    [searchable]=\"autocomplete\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [required]=\"required\"\n    [name]=\"name\"\n    [placeholder]=\"placeholder!\"\n    [clearAllText]=\"'@pry.filters.clear' | i18n\"\n  >\n    <!-- Label part -->\n    <ng-container *ngIf=\"templateLabel; else noTemplateLabel\">\n      <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\n        <ng-container [ngTemplateOutlet]=\"templateLabel\" [ngTemplateOutletContext]=\"{ item, clear }\"></ng-container>\n      </ng-template>\n    </ng-container>\n    <ng-template #noTemplateLabel>\n      <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\n        <span\n          *ngIf=\"multiple && !multipleClearRight\"\n          class=\"ng-value-icon left\"\n          (click)=\"clear(item)\"\n          aria-hidden=\"true\"\n          >\u00D7</span\n        >\n        <span class=\"ng-value-label\">\n          <ng-container *ngIf=\"bindIcon\">\n            <pry-icon\n              style=\"margin-right: 0.25em\"\n              [iconSvg]=\"item[bindIcon]\"\n              [width]=\"iconSize[0]\"\n              [height]=\"iconSize[1]\"\n              [animation]=\"false\"\n            ></pry-icon>\n          </ng-container>\n          <ng-container *ngIf=\"labelTranslate; else noTranslate\">\n            <ng-container *ngIf=\"translationFn; else noTranslationFn\">\n              {{ translationFn(bindData ? item : item?.[bindLabel], translationFnArgs) | i18n }}\n            </ng-container>\n            <ng-template #noTranslationFn>\n              <ng-container *ngIf=\"baseTranslate + (bindData ? item : item?.[bindLabel]) !== 'null'\">\n                {{ baseTranslate + (bindData ? item : item?.[bindLabel]) | i18n }}\n              </ng-container>\n            </ng-template>\n          </ng-container>\n          <ng-template #noTranslate>\n            {{ bindData ? item : item?.[bindLabel] }}\n          </ng-template>\n        </span>\n        <span\n          *ngIf=\"multiple && multipleClearRight\"\n          class=\"ng-value-icon right\"\n          (click)=\"clear(item)\"\n          aria-hidden=\"true\"\n          >\u00D7</span\n        >\n      </ng-template>\n    </ng-template>\n\n    <!-- Option part -->\n    <ng-container *ngIf=\"templateOption; else noTemplateOption\">\n      <ng-template ng-option-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"templateOption\" [ngTemplateOutletContext]=\"{ item }\"></ng-container>\n      </ng-template>\n    </ng-container>\n    <ng-template #noTemplateOption>\n      <ng-template ng-option-tmp let-item=\"item\">\n        <span class=\"ng-option-label\">\n          <pry-icon\n            *ngIf=\"bindIcon\"\n            [iconSvg]=\"item[bindIcon]\"\n            [width]=\"iconSize[0]\"\n            [height]=\"iconSize[1]\"\n            [animation]=\"false\"\n          ></pry-icon>\n          <ng-container *ngIf=\"labelTranslate; else noTranslateOption\">\n            <ng-container *ngIf=\"translationFn; else noTranslationFnOption\">\n              {{ translationFn(bindData ? item : item?.[bindLabel], translationFnArgs) | i18n }}\n            </ng-container>\n            <ng-template #noTranslationFnOption>\n              {{ baseTranslate + (bindData ? item : item?.[bindLabel]) | i18n }}\n            </ng-template>\n          </ng-container>\n          <ng-template #noTranslateOption>\n            {{ bindData ? item : item?.[bindLabel] }}\n          </ng-template>\n        </span>\n      </ng-template>\n    </ng-template>\n  </ng-select>\n</ng-container>\n<ng-template #itemAsInput>\n  <ng-select\n    #select\n    class=\"pry-select\"\n    [class.pry-select-form]=\"isForm\"\n    [multiple]=\"multiple\"\n    [closeOnSelect]=\"!multiple\"\n    [items]=\"items\"\n    [bindValue]=\"bindValue\"\n    [bindLabel]=\"bindLabel\"\n    [clearable]=\"clearable\"\n    [searchable]=\"autocomplete\"\n    [ngModel]=\"value\"\n    (ngModelChange)=\"writeValue($event)\"\n    [readonly]=\"readonly\"\n    [disabled]=\"disabled\"\n    [required]=\"required\"\n    [name]=\"name\"\n    [placeholder]=\"placeholder!\"\n    [clearAllText]=\"'@pry.filters.clear' | i18n\"\n  >\n  </ng-select>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i2$2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i2$2.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PrySelectComponent, decorators: [{
             type: Component,
@@ -5852,7 +5956,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
                             useExisting: forwardRef(() => PrySelectComponent),
                             multi: true
                         }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"itemsAsOption; else itemAsInput\">\n  <ng-select\n    class=\"a-pry-select\"\n    [class.pry-select-form]=\"isForm\"\n    [multiple]=\"multiple\"\n    [closeOnSelect]=\"!multiple\"\n    [items]=\"items\"\n    [bindValue]=\"bindData ? undefined : bindValue\"\n    [bindLabel]=\"bindData ? undefined : bindLabel\"\n    [clearable]=\"clearable\"\n    [ngModel]=\"value\"\n    (ngModelChange)=\"writeValue($event)\"\n    [searchable]=\"autocomplete\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [required]=\"required\"\n    [name]=\"name\"\n    [placeholder]=\"placeholder!\"\n  >\n    <!-- Label part -->\n    <ng-container *ngIf=\"templateLabel; else noTemplateLabel\">\n      <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\n        <ng-container [ngTemplateOutlet]=\"templateLabel\" [ngTemplateOutletContext]=\"{ item, clear }\"></ng-container>\n      </ng-template>\n    </ng-container>\n    <ng-template #noTemplateLabel>\n      <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\n        <span\n          *ngIf=\"multiple && !multipleClearRight\"\n          class=\"ng-value-icon left\"\n          (click)=\"clear(item)\"\n          aria-hidden=\"true\"\n          >\u00D7</span\n        >\n        <span class=\"ng-value-label\">\n          <ng-container *ngIf=\"bindIcon\">\n            <pry-icon\n              style=\"margin-right: 0.25em\"\n              [iconSvg]=\"item[bindIcon]\"\n              [width]=\"iconSize[0]\"\n              [height]=\"iconSize[1]\"\n              [animation]=\"false\"\n            ></pry-icon>\n          </ng-container>\n          <ng-container *ngIf=\"labelTranslate; else noTranslate\">\n            <ng-container *ngIf=\"translationFn; else noTranslationFn\">\n              {{ translationFn(bindData ? item : item?.[bindLabel], translationFnArgs) | i18n }}\n            </ng-container>\n            <ng-template #noTranslationFn>\n              <ng-container *ngIf=\"baseTranslate + (bindData ? item : item?.[bindLabel]) !== 'null'\">\n                {{ baseTranslate + (bindData ? item : item?.[bindLabel]) | i18n }}\n              </ng-container>\n            </ng-template>\n          </ng-container>\n          <ng-template #noTranslate>\n            {{ bindData ? item : item?.[bindLabel] }}\n          </ng-template>\n        </span>\n        <span\n          *ngIf=\"multiple && multipleClearRight\"\n          class=\"ng-value-icon right\"\n          (click)=\"clear(item)\"\n          aria-hidden=\"true\"\n          >\u00D7</span\n        >\n      </ng-template>\n    </ng-template>\n\n    <!-- Option part -->\n    <ng-container *ngIf=\"templateOption; else noTemplateOption\">\n      <ng-template ng-option-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"templateOption\" [ngTemplateOutletContext]=\"{ item }\"></ng-container>\n      </ng-template>\n    </ng-container>\n    <ng-template #noTemplateOption>\n      <ng-template ng-option-tmp let-item=\"item\">\n        <span class=\"ng-option-label\">\n          <pry-icon\n            *ngIf=\"bindIcon\"\n            [iconSvg]=\"item[bindIcon]\"\n            [width]=\"iconSize[0]\"\n            [height]=\"iconSize[1]\"\n            [animation]=\"false\"\n          ></pry-icon>\n          <ng-container *ngIf=\"labelTranslate; else noTranslateOption\">\n            <ng-container *ngIf=\"translationFn; else noTranslationFnOption\">\n              {{ translationFn(bindData ? item : item?.[bindLabel], translationFnArgs) | i18n }}\n            </ng-container>\n            <ng-template #noTranslationFnOption>\n              {{ baseTranslate + (bindData ? item : item?.[bindLabel]) | i18n }}\n            </ng-template>\n          </ng-container>\n          <ng-template #noTranslateOption>\n            {{ bindData ? item : item?.[bindLabel] }}\n          </ng-template>\n        </span>\n      </ng-template>\n    </ng-template>\n  </ng-select>\n</ng-container>\n<ng-template #itemAsInput>\n  <ng-select\n    #select\n    class=\"pry-select\"\n    [class.pry-select-form]=\"isForm\"\n    [multiple]=\"multiple\"\n    [closeOnSelect]=\"!multiple\"\n    [items]=\"items\"\n    [bindValue]=\"bindValue\"\n    [bindLabel]=\"bindLabel\"\n    [clearable]=\"clearable\"\n    [searchable]=\"autocomplete\"\n    [ngModel]=\"value\"\n    (ngModelChange)=\"writeValue($event)\"\n    [readonly]=\"readonly\"\n    [disabled]=\"disabled\"\n    [required]=\"required\"\n    [name]=\"name\"\n    [placeholder]=\"placeholder!\"\n  >\n  </ng-select>\n</ng-template>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"itemsAsOption; else itemAsInput\">\n  <ng-select\n    class=\"a-pry-select\"\n    [class.pry-select-form]=\"isForm\"\n    [multiple]=\"multiple\"\n    [closeOnSelect]=\"!multiple\"\n    [items]=\"items\"\n    [bindValue]=\"bindData ? undefined : bindValue\"\n    [bindLabel]=\"bindData ? undefined : bindLabel\"\n    [clearable]=\"clearable\"\n    [ngModel]=\"value\"\n    (ngModelChange)=\"writeValue($event)\"\n    [searchable]=\"autocomplete\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [required]=\"required\"\n    [name]=\"name\"\n    [placeholder]=\"placeholder!\"\n    [clearAllText]=\"'@pry.filters.clear' | i18n\"\n  >\n    <!-- Label part -->\n    <ng-container *ngIf=\"templateLabel; else noTemplateLabel\">\n      <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\n        <ng-container [ngTemplateOutlet]=\"templateLabel\" [ngTemplateOutletContext]=\"{ item, clear }\"></ng-container>\n      </ng-template>\n    </ng-container>\n    <ng-template #noTemplateLabel>\n      <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\n        <span\n          *ngIf=\"multiple && !multipleClearRight\"\n          class=\"ng-value-icon left\"\n          (click)=\"clear(item)\"\n          aria-hidden=\"true\"\n          >\u00D7</span\n        >\n        <span class=\"ng-value-label\">\n          <ng-container *ngIf=\"bindIcon\">\n            <pry-icon\n              style=\"margin-right: 0.25em\"\n              [iconSvg]=\"item[bindIcon]\"\n              [width]=\"iconSize[0]\"\n              [height]=\"iconSize[1]\"\n              [animation]=\"false\"\n            ></pry-icon>\n          </ng-container>\n          <ng-container *ngIf=\"labelTranslate; else noTranslate\">\n            <ng-container *ngIf=\"translationFn; else noTranslationFn\">\n              {{ translationFn(bindData ? item : item?.[bindLabel], translationFnArgs) | i18n }}\n            </ng-container>\n            <ng-template #noTranslationFn>\n              <ng-container *ngIf=\"baseTranslate + (bindData ? item : item?.[bindLabel]) !== 'null'\">\n                {{ baseTranslate + (bindData ? item : item?.[bindLabel]) | i18n }}\n              </ng-container>\n            </ng-template>\n          </ng-container>\n          <ng-template #noTranslate>\n            {{ bindData ? item : item?.[bindLabel] }}\n          </ng-template>\n        </span>\n        <span\n          *ngIf=\"multiple && multipleClearRight\"\n          class=\"ng-value-icon right\"\n          (click)=\"clear(item)\"\n          aria-hidden=\"true\"\n          >\u00D7</span\n        >\n      </ng-template>\n    </ng-template>\n\n    <!-- Option part -->\n    <ng-container *ngIf=\"templateOption; else noTemplateOption\">\n      <ng-template ng-option-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"templateOption\" [ngTemplateOutletContext]=\"{ item }\"></ng-container>\n      </ng-template>\n    </ng-container>\n    <ng-template #noTemplateOption>\n      <ng-template ng-option-tmp let-item=\"item\">\n        <span class=\"ng-option-label\">\n          <pry-icon\n            *ngIf=\"bindIcon\"\n            [iconSvg]=\"item[bindIcon]\"\n            [width]=\"iconSize[0]\"\n            [height]=\"iconSize[1]\"\n            [animation]=\"false\"\n          ></pry-icon>\n          <ng-container *ngIf=\"labelTranslate; else noTranslateOption\">\n            <ng-container *ngIf=\"translationFn; else noTranslationFnOption\">\n              {{ translationFn(bindData ? item : item?.[bindLabel], translationFnArgs) | i18n }}\n            </ng-container>\n            <ng-template #noTranslationFnOption>\n              {{ baseTranslate + (bindData ? item : item?.[bindLabel]) | i18n }}\n            </ng-template>\n          </ng-container>\n          <ng-template #noTranslateOption>\n            {{ bindData ? item : item?.[bindLabel] }}\n          </ng-template>\n        </span>\n      </ng-template>\n    </ng-template>\n  </ng-select>\n</ng-container>\n<ng-template #itemAsInput>\n  <ng-select\n    #select\n    class=\"pry-select\"\n    [class.pry-select-form]=\"isForm\"\n    [multiple]=\"multiple\"\n    [closeOnSelect]=\"!multiple\"\n    [items]=\"items\"\n    [bindValue]=\"bindValue\"\n    [bindLabel]=\"bindLabel\"\n    [clearable]=\"clearable\"\n    [searchable]=\"autocomplete\"\n    [ngModel]=\"value\"\n    (ngModelChange)=\"writeValue($event)\"\n    [readonly]=\"readonly\"\n    [disabled]=\"disabled\"\n    [required]=\"required\"\n    [name]=\"name\"\n    [placeholder]=\"placeholder!\"\n    [clearAllText]=\"'@pry.filters.clear' | i18n\"\n  >\n  </ng-select>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { labelTranslate: [{
                 type: Input
             }], baseTranslate: [{
@@ -6743,7 +6847,9 @@ class WidgetInstanciatorComponent extends SubscriptionnerDirective {
     ngAfterViewInit() {
         // Dynamically create associated component
         this.widgetManifest$ = combineLatest([this.staticManifest$, this._widgetIndex$]).pipe(distinctUntilChanged$1(), switchMap(([staticManifest, index]) => !!staticManifest ? of(staticManifest) : this.store.select(DashboardSelectors.widgetManifest(index))), distinctUntilChanged$1((p, c) => equal(p, c)));
-        this.subscriptions.add(this.widgetManifest$.subscribe((widgetManifest) => {
+        this.subscriptions.add(this.widgetManifest$
+            .pipe(map((widgetManifest) => ({ type: widgetManifest.type, layout: widgetManifest.layout })), distinctUntilChanged$1((p, c) => equal(p, c)), withLatestFrom(this.widgetManifest$), map(([triggering, widgetManifest]) => widgetManifest))
+            .subscribe((widgetManifest) => {
             this.componentRef.clear();
             this.instanceSubscription?.unsubscribe();
             this.widgetFactoryService
@@ -7711,7 +7817,6 @@ var GraphType;
 
 var TooltipMode;
 (function (TooltipMode) {
-    TooltipMode["HOVER"] = "hover";
     TooltipMode["CLICK"] = "click";
     TooltipMode["NONE"] = "none";
 })(TooltipMode || (TooltipMode = {}));
@@ -7748,7 +7853,7 @@ class ToolboxManifestService extends SubscriptionnerDirective {
                             type: 'heatmap'
                         }
                     ],
-                    tooltipMode: TooltipMode.HOVER
+                    tooltipMode: TooltipMode.CLICK
                 },
                 datasource: USE_CURRENT_RESULTSET
             },
@@ -7767,7 +7872,7 @@ class ToolboxManifestService extends SubscriptionnerDirective {
                             type: 'bubble'
                         }
                     ],
-                    tooltipMode: TooltipMode.HOVER
+                    tooltipMode: TooltipMode.CLICK
                 },
                 datasource: USE_CURRENT_RESULTSET
             },
@@ -7786,7 +7891,7 @@ class ToolboxManifestService extends SubscriptionnerDirective {
                             type: 'marker'
                         }
                     ],
-                    tooltipMode: TooltipMode.HOVER
+                    tooltipMode: TooltipMode.CLICK
                 },
                 datasource: USE_CURRENT_RESULTSET
             },
@@ -8786,7 +8891,7 @@ class PryWidgetHeaderComponent extends SubscriptionnerDirective {
         this.type = LibraryTypes.ILLUSTRATION;
         this.windowManifest$ = this.store
             .select(DashboardSelectors.windowManifest)
-            .pipe(distinctUntilChanged$1((p, c) => JSON.stringify(p) === JSON.stringify(c)));
+            .pipe(distinctUntilChanged$1((p, c) => equal(p, c)));
         this.targetIndexes$ = this.store.select(DashboardSelectors.targetTenantsIndexes);
         this.subscriptions.add(this.windowManifest$.subscribe((manifest) => {
             this.windowManifest = manifest;
@@ -9583,7 +9688,7 @@ class DashboardEffects {
         this.fetchStaticManifest$ = createEffect(() => this.actions$.pipe(ofType(DashboardActions.fetchStaticManifest), withLatestFrom(this.store.select(DashboardSelectors.rank), this.store.select(DashboardSelectors.selectedItemIds)), filter$1(([action, rank]) => rank === 0), mergeMap$1(([action, rank]) => this.manifestService
             .get(action.id)
             .pipe(map$1((staticManifest) => DashboardActions.updateStaticManifest({ staticManifest }))))));
-        this.fetchStaticManifestLoading$ = createEffect(() => this.actions$.pipe(ofType(DashboardActions.fetchStaticManifest), delay(5000), map$1((action) => DashboardActions.endLoading())));
+        this.fetchStaticManifestLoading$ = createEffect(() => this.actions$.pipe(ofType(DashboardActions.fetchStaticManifest), delay$1(5000), map$1((action) => DashboardActions.endLoading())));
         this.loadAndActivateManifest$ = createEffect(() => this.actions$.pipe(ofType(DashboardActions.loadAndActivateManifest, DashboardActions.loadManifest), withLatestFrom(this.store.select(DashboardSelectors.rank), this.store.select(DashboardSelectors.selectedItemIds)), filter$1(([action, rank]) => rank === 0), mergeMap$1(([action, rank, selectedIds]) => this.manifestService.get(action.id).pipe(mergeMap$1((manifest) => {
             return action.type === DashboardActions.loadAndActivateManifest.type
                 ? [
@@ -10784,5 +10889,5 @@ function filterLoader(module, prop) {
  * Generated bundle index. Do not edit.
  */
 
-export { Aggregation, BaseFilterComponent, BaseFilterModule, BaseLayoutComponent, BaseMenuComponent, BaseToolboxComponent, BaseTooltipComponent, BaseTooltipModule, BaseWidgetComponent, BaseWidgetModule, BusService, CategoryActions, CategorySelectors, CategoryService, ChartOptionDefault, ClassActions, ClassSelectors, ClassService, ConfigActions, ConfigSelectors, ConfigService, ContextMenuActions, ContextMenuComponent, ContextMenuSelectors, DEFAULT_CATEGORY_UUID, DEFAULT_COLUMNS_NUMBER, DEFAULT_GAP_PX, DEFAULT_ICON_URL, DEFAULT_MSG_TIMEOUT, DEFAULT_NAMED_QUERY_ID, DEFAULT_RESTITUTION_ICON_URL, DEFAULT_ROWS_NUMBER, DEFAULT_ROW_HEIGHT_PX, DELAY_FOR_HIDE, DashboardActions, DashboardComponent, DashboardGridLayout, DashboardSelectors, DataSourceActions, DataSourceSelectors, DataSourceService, DataWidgetComponent, DatasourceSelectorComponent, DateRangeHighlightPipe, DateUtils, DefaultTooltipComponent, DefaultViewGuard, ENV_OPTIONS, EXPLORE_NAMED_QUERY_ID, FIELD_OPTIONS, FIELD_UUID, FILTERS_DOMAIN, FILTER_DEFINITION, FieldActions, FieldSelectors, FieldService, FieldType, FilterFactoryService, FilterInstanciatorComponent, GeoMetadata, GeocodingService, GetSecuredImagePipe, GraphType, HTTP_ORIGIN_METADATA, I18nPipe, INTERNALLY_STORED_IMAGE_PREFIX, IconPosition, ImageActions, ImageService, ImagesSelectors, ItemUtils, LibraryTypes, LoopScrollColumnComponent, METADATA_TYPE, META_OPTIONS, MIME_TYPE_RESULTSET, MIME_TYPE_WIDGET_MANIFEST, MIME_TYPE_WIDGET_SIZE, MIME_TYPE_WIDGET_TYPE, ManifestService, ManifestsComponent, MarkSubType, MarkType, MetadataComponent, NamedQueryTypes, NamedQueryUtils, OPERATOR_OPTIONS, Operation, PRY_ACCESS_GUARD, PRY_ACCESS_TOKEN, PRY_CUSTOMEVENT_TYPE, PRY_DIALOG_DATA, PryAccessDirective, PryAccessUtils, PryBaseAccess, PryBaseAccessGuard, PryCoreModule, PryDashboardModule, PryDatasetType, PryDatePickerComponent, PryDatePickerModule, PryDefaultAccessGuard, PryDefaultAccessService, PryDialogConfirmComponent, PryDialogRef, PryDialogService, PryEditInputComponent, PryEditInputModule, PryHiddenWhenOverlay, PryHiddenWhenOverlayDirective, PryHttpErrorInterceptorService, PryI18nModule, PryI18nService, PryIconComponent, PryIconModule, PryModalComponent, PryModalModule, PryModalStatusComponent, PryModalStatusModule, PryNqColorSelectorComponent, PryObjectEditionComponent, PryOverlayDirective, PryOverlayModule, PryRangeComponent, PryRangeModule, PrySelectComponent, PrySelectImageComponent, PrySelectModule, PryShareComponent, PryShareModule, PrySnackbarComponent, PrySnackbarModule, PrySnackbarService, PrySortDataPipe, PrySortHeaderComponent, PrySortHeaderDirective, PrySortModule, PrySortTableDirective, PryTimePickerComponent, PryTitleService, PryToggleComponent, PryToggleModule, PryTooltipDirective, PryUploadComponent, PryVisibilityType, PryWidgetHeaderComponent, RawService, RelationTypesActions, RelationTypesSelectors, RelationTypesService, ResultSetSizePipe, ResultsetUtils, SYMBOL_DOMAIN, SearchActions, SearchSelectors, SearchService, SettingsComponent, SubscriptionnerDirective, SymbolService, TABLE_ATTR_DOMAIN, TILE_ATTR_DOMAIN, TOOLTIPS_DOMAIN, TOOLTIP_DEFINITION, ToolboxManifestService, ToolboxMenuService, TooltipFactoryService, TooltipMode, TranslateIdPipe, TranslateItemToSymbolPipe, UNKNOWN_DATASOURCE, USE_CURRENT_RESULTSET, VARIABLE_TYPE, VegaColorType, VegaType, ViewMode, VizualizeRawComponent, WIDGET_DEFINITION, WIDGET_HEADER_HEIGHT, WebsocketService, WidgetFactoryService, WidgetInstanciatorComponent, WidgetPlaceholderComponent, WidgetPlacementUtils, adapter$2 as adapter, aggregationDefault, baseItemProperties, classReducer, classesFeatureKey, compareOperationFunctions, contextMenuFeatureKey, contextMenuReducer, createPlacedWidgetCopy, dashboardFeatureKey, dashboardInitialState, dashboardReducer, dataSourceFeatureKey, dataSourceReducer, deepMerge, defaultColors, defaultMenuStructure, enTranslations$1 as enTranslations, filterLoader, frTranslations$1 as frTranslations, httpErrorOptions, imageFeatureKey, imageReducer, initialClassState, initialContextMenuState, initialDataSourceState, initialImageState, initialSearchState, latLonToGeographicFieldTransformation, markTypesDefault, notificationFeatureKey, orderWidgetsAccordingToPlacement, searchFeatureKey, searchReducer, selectAll$2 as selectAll, selectEntities$2 as selectEntities, selectIds$2 as selectIds, selectTotal$2 as selectTotal, solveCollisions, solvingCollisionOptions, sortByName$2 as sortByName, subTypesDefault, tooltipLoader, vegaColorSchemesDefault, widgetLoader, widgetMapConfig };
+export { AccordionComponent, AccordionItemComponent, Aggregation, BaseFilterComponent, BaseFilterModule, BaseLayoutComponent, BaseMenuComponent, BaseToolboxComponent, BaseTooltipComponent, BaseTooltipModule, BaseWidgetComponent, BaseWidgetModule, BusService, CategoryActions, CategorySelectors, CategoryService, ChartOptionDefault, ClassActions, ClassSelectors, ClassService, ConfigActions, ConfigSelectors, ConfigService, ContextMenuActions, ContextMenuComponent, ContextMenuSelectors, DEFAULT_CATEGORY_UUID, DEFAULT_COLUMNS_NUMBER, DEFAULT_GAP_PX, DEFAULT_ICON_URL, DEFAULT_MSG_TIMEOUT, DEFAULT_NAMED_QUERY_ID, DEFAULT_RESTITUTION_ICON_URL, DEFAULT_ROWS_NUMBER, DEFAULT_ROW_HEIGHT_PX, DELAY_FOR_HIDE, DashboardActions, DashboardComponent, DashboardGridLayout, DashboardSelectors, DataSourceActions, DataSourceSelectors, DataSourceService, DataWidgetComponent, DatasourceSelectorComponent, DateRangeHighlightPipe, DateUtils, DefaultTooltipComponent, DefaultViewGuard, ENV_OPTIONS, EXPLORE_NAMED_QUERY_ID, FIELD_OPTIONS, FIELD_UUID, FILTERS_DOMAIN, FILTER_DEFINITION, FieldActions, FieldSelectors, FieldService, FieldType, FilterFactoryService, FilterInstanciatorComponent, GeoMetadata, GeocodingService, GetSecuredImagePipe, GraphType, HTTP_ORIGIN_METADATA, I18nPipe, INTERNALLY_STORED_IMAGE_PREFIX, IconPosition, ImageActions, ImageService, ImagesSelectors, ItemUtils, LibraryTypes, LoopScrollColumnComponent, METADATA_TYPE, META_OPTIONS, MIME_TYPE_RESULTSET, MIME_TYPE_WIDGET_MANIFEST, MIME_TYPE_WIDGET_SIZE, MIME_TYPE_WIDGET_TYPE, ManifestService, ManifestsComponent, MarkSubType, MarkType, MetadataComponent, NamedQueryTypes, NamedQueryUtils, OPERATOR_OPTIONS, Operation, PRY_ACCESS_GUARD, PRY_ACCESS_TOKEN, PRY_CUSTOMEVENT_TYPE, PRY_DIALOG_DATA, PryAccessDirective, PryAccessUtils, PryBaseAccess, PryBaseAccessGuard, PryCoreModule, PryDashboardModule, PryDatasetType, PryDatePickerComponent, PryDatePickerModule, PryDefaultAccessGuard, PryDefaultAccessService, PryDialogConfirmComponent, PryDialogRef, PryDialogService, PryEditInputComponent, PryEditInputModule, PryHiddenWhenOverlay, PryHiddenWhenOverlayDirective, PryHttpErrorInterceptorService, PryI18nModule, PryI18nService, PryIconComponent, PryIconModule, PryModalComponent, PryModalModule, PryModalStatusComponent, PryModalStatusModule, PryNqColorSelectorComponent, PryObjectEditionComponent, PryOverlayDirective, PryOverlayModule, PryRangeComponent, PryRangeModule, PrySelectComponent, PrySelectImageComponent, PrySelectModule, PryShareComponent, PryShareModule, PrySnackbarComponent, PrySnackbarModule, PrySnackbarService, PrySortDataPipe, PrySortHeaderComponent, PrySortHeaderDirective, PrySortModule, PrySortTableDirective, PryTimePickerComponent, PryTitleService, PryToggleComponent, PryToggleModule, PryTooltipDirective, PryUploadComponent, PryVisibilityType, PryWidgetHeaderComponent, RawService, RelationTypesActions, RelationTypesSelectors, RelationTypesService, ResultSetSizePipe, ResultsetUtils, SYMBOL_DOMAIN, SearchActions, SearchSelectors, SearchService, SettingsComponent, SubscriptionnerDirective, SymbolService, TABLE_ATTR_DOMAIN, TILE_ATTR_DOMAIN, TOOLTIPS_DOMAIN, TOOLTIP_DEFINITION, ToolboxManifestService, ToolboxMenuService, TooltipFactoryService, TooltipMode, TranslateIdPipe, TranslateItemToSymbolPipe, UNKNOWN_DATASOURCE, USE_CURRENT_RESULTSET, VARIABLE_TYPE, VegaColorType, VegaType, ViewMode, VizualizeRawComponent, WIDGET_DEFINITION, WIDGET_HEADER_HEIGHT, WebsocketService, WidgetFactoryService, WidgetInstanciatorComponent, WidgetPlaceholderComponent, WidgetPlacementUtils, adapter$2 as adapter, aggregationDefault, baseItemProperties, classReducer, classesFeatureKey, compareOperationFunctions, contextMenuFeatureKey, contextMenuReducer, createPlacedWidgetCopy, dashboardFeatureKey, dashboardInitialState, dashboardReducer, dataSourceFeatureKey, dataSourceReducer, deepMerge, defaultColors, defaultMenuStructure, enTranslations$1 as enTranslations, filterLoader, frTranslations$1 as frTranslations, httpErrorOptions, imageFeatureKey, imageReducer, initialClassState, initialContextMenuState, initialDataSourceState, initialImageState, initialSearchState, latLonToGeographicFieldTransformation, markTypesDefault, notificationFeatureKey, orderWidgetsAccordingToPlacement, searchFeatureKey, searchReducer, selectAll$2 as selectAll, selectEntities$2 as selectEntities, selectIds$2 as selectIds, selectTotal$2 as selectTotal, solveCollisions, solvingCollisionOptions, sortByName$2 as sortByName, subTypesDefault, tooltipLoader, vegaColorSchemesDefault, widgetLoader, widgetMapConfig };
 //# sourceMappingURL=provoly-dashboard.mjs.map