@provoly/dashboard 1.4.13 → 1.4.15

package/fesm2022/provoly-dashboard.mjs

@@ -1,18 +1,18 @@
-import * as i2 from '@angular/cdk/overlay';
+import * as i2$1 from '@angular/cdk/overlay';
 import { OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
-import * as i1$1 from '@angular/common';
+import * as i3 from '@angular/common';
 import { CommonModule, AsyncPipe, DOCUMENT } from '@angular/common';
-import * as i1$2 from '@angular/common/http';
+import * as i1$1 from '@angular/common/http';
 import { HttpHeaders, HttpUrlEncodingCodec, HttpParams, HttpClientModule } from '@angular/common/http';
 import * as i0 from '@angular/core';
 import { InjectionToken, Injectable, Directive, Optional, Inject, Input, Component, Pipe, ChangeDetectionStrategy, HostBinding, NgModule, Injector, EventEmitter, Output, TemplateRef, ViewChild, SecurityContext, ContentChildren, forwardRef, HostListener, ViewContainerRef, ViewChildren, ViewEncapsulation, createNgModule } from '@angular/core';
-import * as i3 from '@angular/router';
+import * as i2 from '@angular/router';
 import { NavigationEnd, RouterModule } from '@angular/router';
-import * as i1$3 from '@ngrx/effects';
+import * as i1$2 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, windowTime, switchMap, mergeMap, from as from$1, forkJoin, catchError as catchError$1, startWith, throwError, tap as tap$1, combineLatestWith, merge, distinctUntilChanged as distinctUntilChanged$1, withLatestFrom as withLatestFrom$1, groupBy, EMPTY, share, ReplaySubject, delay, fromEvent, auditTime, interval } from 'rxjs';
+import { of, Subscription, filter, combineLatest, debounceTime, BehaviorSubject, map, Subject, windowTime, switchMap, mergeMap, from as from$1, forkJoin, catchError as catchError$1, startWith, throwError, take, withLatestFrom as withLatestFrom$1, tap as tap$1, combineLatestWith, merge, distinctUntilChanged as distinctUntilChanged$1, groupBy, EMPTY, share, ReplaySubject, delay, fromEvent, auditTime, interval } from 'rxjs';
 import * as i3$1 from '@angular/platform-browser';
 import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
 import * as i3$2 from '@angular/cdk/a11y';
@@ -22,9 +22,9 @@ import { distinctUntilChanged, filter as filter$1, debounceTime as debounceTime$
 import { animation, style, animate, trigger, transition, useAnimation } from '@angular/animations';
 import { Style, Icon } from 'ol/style';
 import { createEntityAdapter } from '@ngrx/entity';
-import * as i1$4 from '@angular/cdk/accordion';
+import * as i1$3 from '@angular/cdk/accordion';
 import { CdkAccordionModule } from '@angular/cdk/accordion';
-import * as i3$3 from '@angular/forms';
+import * as i2$2 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i7 from '@provoly/dashboard/components/checkbox';
 import { PryCheckboxModule } from '@provoly/dashboard/components/checkbox';
@@ -163,13 +163,13 @@ class BaseLayoutComponent extends SubscriptionnerDirective {
     highlightMenu(menu) {
         console.error('Must override highLightMenu function');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: BaseLayoutComponent, deps: [{ token: i1.Store }, { token: i3.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: BaseLayoutComponent, deps: [{ token: i1.Store }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: BaseLayoutComponent, selector: "pry-base-layout", usesInheritance: true, ngImport: i0, template: "<div>\n  <ng-container #componentRef></ng-container>\n</div>\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: BaseLayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pry-base-layout', template: "<div>\n  <ng-container #componentRef></ng-container>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1.Store }, { type: i3.Router }] });
+        }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Router }] });
 
 function deepMerge(target, source) {
     const isObject = (obj) => obj && typeof obj === 'object';
@@ -1253,11 +1253,11 @@ class BaseMenuComponent extends SubscriptionnerDirective {
         console.error('Must override init function');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: BaseMenuComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: BaseMenuComponent, selector: "pry-base-menu", usesInheritance: true, ngImport: i0, template: "<nav class=\"m-nav-links\">\n  <ng-container *ngFor=\"let sub of subMenu$ | async\">\n    <ul class=\"m-nav-links__list\">\n      <ng-container *ngFor=\"let menu of sub.subMenus\">\n        <li\n          *pryAccess=\"{ module: menu.module, page: menu.page, subMenu: menu.subMenu }\"\n          class=\"m-nav-links__list__item\"\n        >\n          <a [routerLink]=\"menu.menu\" class=\"a-btn -width-full\" [routerLinkActive]=\"'is-active'\">\n            {{ baseMenuTranslation + menu.menu | i18n }}\n          </a>\n        </li>\n      </ng-container>\n    </ul>\n  </ng-container>\n</nav>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: PryAccessDirective, selector: "[pryAccess]", inputs: ["pryAccess"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: BaseMenuComponent, selector: "pry-base-menu", usesInheritance: true, ngImport: i0, template: "<nav class=\"m-nav-links\">\n  @for (sub of subMenu$ | async; track sub) {\n    <ul class=\"m-nav-links__list\">\n      @for (menu of sub.subMenus; track menu) {\n        <li\n          *pryAccess=\"{ module: menu.module, page: menu.page, subMenu: menu.subMenu }\"\n          class=\"m-nav-links__list__item\"\n          >\n          <a [routerLink]=\"menu.menu\" class=\"a-btn -width-full\" [routerLinkActive]=\"'is-active'\">\n            {{ baseMenuTranslation + menu.menu | i18n }}\n          </a>\n        </li>\n      }\n    </ul>\n  }\n</nav>\n", dependencies: [{ kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: PryAccessDirective, selector: "[pryAccess]", inputs: ["pryAccess"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: BaseMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-base-menu', template: "<nav class=\"m-nav-links\">\n  <ng-container *ngFor=\"let sub of subMenu$ | async\">\n    <ul class=\"m-nav-links__list\">\n      <ng-container *ngFor=\"let menu of sub.subMenus\">\n        <li\n          *pryAccess=\"{ module: menu.module, page: menu.page, subMenu: menu.subMenu }\"\n          class=\"m-nav-links__list__item\"\n        >\n          <a [routerLink]=\"menu.menu\" class=\"a-btn -width-full\" [routerLinkActive]=\"'is-active'\">\n            {{ baseMenuTranslation + menu.menu | i18n }}\n          </a>\n        </li>\n      </ng-container>\n    </ul>\n  </ng-container>\n</nav>\n" }]
+            args: [{ selector: 'pry-base-menu', template: "<nav class=\"m-nav-links\">\n  @for (sub of subMenu$ | async; track sub) {\n    <ul class=\"m-nav-links__list\">\n      @for (menu of sub.subMenus; track menu) {\n        <li\n          *pryAccess=\"{ module: menu.module, page: menu.page, subMenu: menu.subMenu }\"\n          class=\"m-nav-links__list__item\"\n          >\n          <a [routerLink]=\"menu.menu\" class=\"a-btn -width-full\" [routerLinkActive]=\"'is-active'\">\n            {{ baseMenuTranslation + menu.menu | i18n }}\n          </a>\n        </li>\n      }\n    </ul>\n  }\n</nav>\n" }]
         }], ctorParameters: () => [{ type: i1.Store }] });
 
 const DEFAULT_ICON_URL = '/assets/svgs/default.svg';
@@ -1345,11 +1345,11 @@ class PryIconComponent {
         this.baseStyle = this.sanitizer.bypassSecurityTrustStyle(safeStyle);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryIconComponent, deps: [{ token: i3$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: PryIconComponent, selector: "pry-icon", inputs: { color: "color", iconSvg: "iconSvg", animation: "animation", iconImage: "iconImage", alt: "alt", width: "width", height: "height", classes: "classes" }, host: { properties: { "style": "this.baseStyle" } }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"iconSvgUrl\">\n  <span\n    class=\"a-icon\"\n    [ngClass]=\"color!\"\n    [ngClass]=\"classes\"\n    [ngStyle]=\"{\n      'width.px': width,\n      'height.px': height,\n      'mask-image': 'url(' + iconSvgUrl + ')',\n      '-webkit-mask-image': 'url(' + iconSvgUrl + ')'\n    }\"\n    aria-hidden=\"true\"\n    focusable=\"false\"\n  ></span>\n</ng-container>\n<ng-container *ngIf=\"iconImageUrl\">\n  <img class=\"a-icon-img\" [src]=\"iconImageUrl\" [style.height.px]=\"height\" [style.width.px]=\"width\" [alt]=\"alt\" />\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: PryIconComponent, selector: "pry-icon", inputs: { color: "color", iconSvg: "iconSvg", animation: "animation", iconImage: "iconImage", alt: "alt", width: "width", height: "height", classes: "classes" }, host: { properties: { "style": "this.baseStyle" } }, usesOnChanges: true, ngImport: i0, template: "@if (iconSvgUrl) {\n  <span\n    class=\"a-icon\"\n    [ngClass]=\"color!\"\n    [ngClass]=\"classes\"\n    [ngStyle]=\"{\n      'width.px': width,\n      'height.px': height,\n      'mask-image': 'url(' + iconSvgUrl + ')',\n      '-webkit-mask-image': 'url(' + iconSvgUrl + ')'\n    }\"\n    aria-hidden=\"true\"\n    focusable=\"false\"\n  ></span>\n}\n@if (iconImageUrl) {\n  <img class=\"a-icon-img\" [src]=\"iconImageUrl\" [style.height.px]=\"height\" [style.width.px]=\"width\" [alt]=\"alt\" />\n}\n", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-icon', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"iconSvgUrl\">\n  <span\n    class=\"a-icon\"\n    [ngClass]=\"color!\"\n    [ngClass]=\"classes\"\n    [ngStyle]=\"{\n      'width.px': width,\n      'height.px': height,\n      'mask-image': 'url(' + iconSvgUrl + ')',\n      '-webkit-mask-image': 'url(' + iconSvgUrl + ')'\n    }\"\n    aria-hidden=\"true\"\n    focusable=\"false\"\n  ></span>\n</ng-container>\n<ng-container *ngIf=\"iconImageUrl\">\n  <img class=\"a-icon-img\" [src]=\"iconImageUrl\" [style.height.px]=\"height\" [style.width.px]=\"width\" [alt]=\"alt\" />\n</ng-container>\n" }]
+            args: [{ selector: 'pry-icon', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (iconSvgUrl) {\n  <span\n    class=\"a-icon\"\n    [ngClass]=\"color!\"\n    [ngClass]=\"classes\"\n    [ngStyle]=\"{\n      'width.px': width,\n      'height.px': height,\n      'mask-image': 'url(' + iconSvgUrl + ')',\n      '-webkit-mask-image': 'url(' + iconSvgUrl + ')'\n    }\"\n    aria-hidden=\"true\"\n    focusable=\"false\"\n  ></span>\n}\n@if (iconImageUrl) {\n  <img class=\"a-icon-img\" [src]=\"iconImageUrl\" [style.height.px]=\"height\" [style.width.px]=\"width\" [alt]=\"alt\" />\n}\n" }]
         }], ctorParameters: () => [{ type: i3$1.DomSanitizer }], propDecorators: { baseStyle: [{
                 type: HostBinding,
                 args: ['style']
@@ -1415,11 +1415,11 @@ class BaseToolboxActionComponent {
         this._cd.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: BaseToolboxActionComponent, deps: [{ token: i1.Store }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: BaseToolboxActionComponent, selector: "pry-base-toolbox-action", inputs: { baseToolboxTranslation: "baseToolboxTranslation", action: "action", iconAction: "iconAction" }, ngImport: i0, template: "<ng-container *ngIf=\"action\">\n  <ul>\n    <li class=\"m-actions-list__item\">\n      <button\n        class=\"a-btn a-btn--secondary\"\n        [class.is-active]=\"panelOpen\"\n        (click)=\"select(action)\"\n        [disabled]=\"action.disabled\"\n        cdkOverlayOrigin\n        #origin=\"cdkOverlayOrigin\"\n      >\n        <ng-container *ngIf=\"!iconAction; else iconActionTpl\">\n          <pry-icon *ngIf=\"action.icon\" [iconSvg]=\"action.icon\" [height]=\"20\" [width]=\"20\"></pry-icon>\n          {{ baseToolboxTranslation + action.label | i18n }}\n          <pry-icon *ngIf=\"action.actions\" iconSvg=\"fleche_bas\"></pry-icon>\n        </ng-container>\n        <ng-template #iconActionTpl>\n          <pry-icon\n            *ngIf=\"action.icon\"\n            [iconSvg]=\"action.icon\"\n            [title]=\"baseToolboxTranslation + action.label | i18n\"\n          ></pry-icon>\n        </ng-template>\n      </button>\n    </li>\n  </ul>\n  <ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayHasBackdrop\n    cdkConnectedOverlayLockPosition\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    [cdkConnectedOverlayOrigin]=\"origin\"\n    [cdkConnectedOverlayOpen]=\"panelOpen\"\n    [cdkConnectedOverlayPositions]=\"connectedPositions\"\n    (backdropClick)=\"onClosePanel()\"\n  >\n    <div class=\"m-pry-overlay-panel-wrapper\">\n      <div class=\"m-pry-overlay-panel\">\n        <ng-container *ngFor=\"let act of action.actions\">\n          <button class=\"m-pry-overlay-panel-item\" (click)=\"select(act)\">\n            {{ baseToolboxTranslation + act.label | i18n }}\n          </button>\n        </ng-container>\n      </div>\n    </div>\n  </ng-template>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: BaseToolboxActionComponent, selector: "pry-base-toolbox-action", inputs: { baseToolboxTranslation: "baseToolboxTranslation", action: "action", iconAction: "iconAction" }, ngImport: i0, template: "@if (action) {\n  <ul>\n    <li class=\"m-actions-list__item\">\n      <button\n        class=\"a-btn a-btn--secondary\"\n        [class.is-active]=\"panelOpen\"\n        (click)=\"select(action)\"\n        [disabled]=\"action.disabled\"\n        cdkOverlayOrigin\n        #origin=\"cdkOverlayOrigin\"\n        >\n        @if (!iconAction) {\n          @if (action.icon) {\n            <pry-icon [iconSvg]=\"action.icon\" [height]=\"20\" [width]=\"20\"></pry-icon>\n          }\n          {{ baseToolboxTranslation + action.label | i18n }}\n          @if (action.actions) {\n            <pry-icon iconSvg=\"fleche_bas\"></pry-icon>\n          }\n        } @else {\n          @if (action.icon) {\n            <pry-icon\n              [iconSvg]=\"action.icon\"\n              [title]=\"baseToolboxTranslation + action.label | i18n\"\n            ></pry-icon>\n          }\n        }\n      </button>\n    </li>\n  </ul>\n  <ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayHasBackdrop\n    cdkConnectedOverlayLockPosition\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    [cdkConnectedOverlayOrigin]=\"origin\"\n    [cdkConnectedOverlayOpen]=\"panelOpen\"\n    [cdkConnectedOverlayPositions]=\"connectedPositions\"\n    (backdropClick)=\"onClosePanel()\"\n    >\n    <div class=\"m-pry-overlay-panel-wrapper\">\n      <div class=\"m-pry-overlay-panel\">\n        @for (act of action.actions; track act) {\n          <button class=\"m-pry-overlay-panel-item\" (click)=\"select(act)\">\n            {{ baseToolboxTranslation + act.label | i18n }}\n          </button>\n        }\n      </div>\n    </div>\n  </ng-template>\n}\n", dependencies: [{ kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "directive", type: i2$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: BaseToolboxActionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-base-toolbox-action', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"action\">\n  <ul>\n    <li class=\"m-actions-list__item\">\n      <button\n        class=\"a-btn a-btn--secondary\"\n        [class.is-active]=\"panelOpen\"\n        (click)=\"select(action)\"\n        [disabled]=\"action.disabled\"\n        cdkOverlayOrigin\n        #origin=\"cdkOverlayOrigin\"\n      >\n        <ng-container *ngIf=\"!iconAction; else iconActionTpl\">\n          <pry-icon *ngIf=\"action.icon\" [iconSvg]=\"action.icon\" [height]=\"20\" [width]=\"20\"></pry-icon>\n          {{ baseToolboxTranslation + action.label | i18n }}\n          <pry-icon *ngIf=\"action.actions\" iconSvg=\"fleche_bas\"></pry-icon>\n        </ng-container>\n        <ng-template #iconActionTpl>\n          <pry-icon\n            *ngIf=\"action.icon\"\n            [iconSvg]=\"action.icon\"\n            [title]=\"baseToolboxTranslation + action.label | i18n\"\n          ></pry-icon>\n        </ng-template>\n      </button>\n    </li>\n  </ul>\n  <ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayHasBackdrop\n    cdkConnectedOverlayLockPosition\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    [cdkConnectedOverlayOrigin]=\"origin\"\n    [cdkConnectedOverlayOpen]=\"panelOpen\"\n    [cdkConnectedOverlayPositions]=\"connectedPositions\"\n    (backdropClick)=\"onClosePanel()\"\n  >\n    <div class=\"m-pry-overlay-panel-wrapper\">\n      <div class=\"m-pry-overlay-panel\">\n        <ng-container *ngFor=\"let act of action.actions\">\n          <button class=\"m-pry-overlay-panel-item\" (click)=\"select(act)\">\n            {{ baseToolboxTranslation + act.label | i18n }}\n          </button>\n        </ng-container>\n      </div>\n    </div>\n  </ng-template>\n</ng-container>\n" }]
+            args: [{ selector: 'pry-base-toolbox-action', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (action) {\n  <ul>\n    <li class=\"m-actions-list__item\">\n      <button\n        class=\"a-btn a-btn--secondary\"\n        [class.is-active]=\"panelOpen\"\n        (click)=\"select(action)\"\n        [disabled]=\"action.disabled\"\n        cdkOverlayOrigin\n        #origin=\"cdkOverlayOrigin\"\n        >\n        @if (!iconAction) {\n          @if (action.icon) {\n            <pry-icon [iconSvg]=\"action.icon\" [height]=\"20\" [width]=\"20\"></pry-icon>\n          }\n          {{ baseToolboxTranslation + action.label | i18n }}\n          @if (action.actions) {\n            <pry-icon iconSvg=\"fleche_bas\"></pry-icon>\n          }\n        } @else {\n          @if (action.icon) {\n            <pry-icon\n              [iconSvg]=\"action.icon\"\n              [title]=\"baseToolboxTranslation + action.label | i18n\"\n            ></pry-icon>\n          }\n        }\n      </button>\n    </li>\n  </ul>\n  <ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayHasBackdrop\n    cdkConnectedOverlayLockPosition\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    [cdkConnectedOverlayOrigin]=\"origin\"\n    [cdkConnectedOverlayOpen]=\"panelOpen\"\n    [cdkConnectedOverlayPositions]=\"connectedPositions\"\n    (backdropClick)=\"onClosePanel()\"\n    >\n    <div class=\"m-pry-overlay-panel-wrapper\">\n      <div class=\"m-pry-overlay-panel\">\n        @for (act of action.actions; track act) {\n          <button class=\"m-pry-overlay-panel-item\" (click)=\"select(act)\">\n            {{ baseToolboxTranslation + act.label | i18n }}\n          </button>\n        }\n      </div>\n    </div>\n  </ng-template>\n}\n" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: i0.ChangeDetectorRef }], propDecorators: { baseToolboxTranslation: [{
                 type: Input
             }], action: [{
@@ -1433,11 +1433,11 @@ class BaseToolboxComponent {
         this.baseToolboxTranslation = '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: BaseToolboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: BaseToolboxComponent, selector: "pry-base-toolbox", inputs: { baseToolboxTranslation: "baseToolboxTranslation", actions$: "actions$", subActions$: "subActions$" }, ngImport: i0, template: "<div class=\"o-base-layout__toolbox__actions\">\n  <ul class=\"m-actions-list\">\n    <ng-container *ngFor=\"let action of actions$ | async\">\n      <pry-base-toolbox-action\n        *pryAccess=\"{ module: action.moduleAccess, page: action.pageAccess, action: action.actionAccess }\"\n        [action]=\"action\"\n        [baseToolboxTranslation]=\"baseToolboxTranslation\"\n      >\n      </pry-base-toolbox-action>\n    </ng-container>\n  </ul>\n\n  <ul class=\"m-actions-list\">\n    <ng-container *ngFor=\"let action of subActions$ | async\">\n      <pry-base-toolbox-action\n        *pryAccess=\"{ module: action.moduleAccess, page: action.pageAccess, action: action.actionAccess }\"\n        [action]=\"action\"\n        [baseToolboxTranslation]=\"baseToolboxTranslation\"\n        [iconAction]=\"true\"\n      >\n      </pry-base-toolbox-action>\n    </ng-container>\n  </ul>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: PryAccessDirective, selector: "[pryAccess]", inputs: ["pryAccess"] }, { kind: "component", type: BaseToolboxActionComponent, selector: "pry-base-toolbox-action", inputs: ["baseToolboxTranslation", "action", "iconAction"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: BaseToolboxComponent, selector: "pry-base-toolbox", inputs: { baseToolboxTranslation: "baseToolboxTranslation", actions$: "actions$", subActions$: "subActions$" }, ngImport: i0, template: "<div class=\"o-base-layout__toolbox__actions\">\n  <ul class=\"m-actions-list\">\n    @for (action of actions$ | async; track action) {\n      <pry-base-toolbox-action\n        *pryAccess=\"{ module: action.moduleAccess, page: action.pageAccess, action: action.actionAccess }\"\n        [action]=\"action\"\n        [baseToolboxTranslation]=\"baseToolboxTranslation\"\n        >\n      </pry-base-toolbox-action>\n    }\n  </ul>\n\n  <ul class=\"m-actions-list\">\n    @for (action of subActions$ | async; track action) {\n      <pry-base-toolbox-action\n        *pryAccess=\"{ module: action.moduleAccess, page: action.pageAccess, action: action.actionAccess }\"\n        [action]=\"action\"\n        [baseToolboxTranslation]=\"baseToolboxTranslation\"\n        [iconAction]=\"true\"\n        >\n      </pry-base-toolbox-action>\n    }\n  </ul>\n</div>\n", dependencies: [{ kind: "directive", type: PryAccessDirective, selector: "[pryAccess]", inputs: ["pryAccess"] }, { kind: "component", type: BaseToolboxActionComponent, selector: "pry-base-toolbox-action", inputs: ["baseToolboxTranslation", "action", "iconAction"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: BaseToolboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-base-toolbox', template: "<div class=\"o-base-layout__toolbox__actions\">\n  <ul class=\"m-actions-list\">\n    <ng-container *ngFor=\"let action of actions$ | async\">\n      <pry-base-toolbox-action\n        *pryAccess=\"{ module: action.moduleAccess, page: action.pageAccess, action: action.actionAccess }\"\n        [action]=\"action\"\n        [baseToolboxTranslation]=\"baseToolboxTranslation\"\n      >\n      </pry-base-toolbox-action>\n    </ng-container>\n  </ul>\n\n  <ul class=\"m-actions-list\">\n    <ng-container *ngFor=\"let action of subActions$ | async\">\n      <pry-base-toolbox-action\n        *pryAccess=\"{ module: action.moduleAccess, page: action.pageAccess, action: action.actionAccess }\"\n        [action]=\"action\"\n        [baseToolboxTranslation]=\"baseToolboxTranslation\"\n        [iconAction]=\"true\"\n      >\n      </pry-base-toolbox-action>\n    </ng-container>\n  </ul>\n</div>\n" }]
+            args: [{ selector: 'pry-base-toolbox', template: "<div class=\"o-base-layout__toolbox__actions\">\n  <ul class=\"m-actions-list\">\n    @for (action of actions$ | async; track action) {\n      <pry-base-toolbox-action\n        *pryAccess=\"{ module: action.moduleAccess, page: action.pageAccess, action: action.actionAccess }\"\n        [action]=\"action\"\n        [baseToolboxTranslation]=\"baseToolboxTranslation\"\n        >\n      </pry-base-toolbox-action>\n    }\n  </ul>\n\n  <ul class=\"m-actions-list\">\n    @for (action of subActions$ | async; track action) {\n      <pry-base-toolbox-action\n        *pryAccess=\"{ module: action.moduleAccess, page: action.pageAccess, action: action.actionAccess }\"\n        [action]=\"action\"\n        [baseToolboxTranslation]=\"baseToolboxTranslation\"\n        [iconAction]=\"true\"\n        >\n      </pry-base-toolbox-action>\n    }\n  </ul>\n</div>\n" }]
         }], propDecorators: { baseToolboxTranslation: [{
                 type: Input
             }], actions$: [{
@@ -2011,13 +2011,13 @@ class PryDialogService {
         });
         return overlay;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryDialogService, deps: [{ token: i0.Injector }, { token: i2.Overlay }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryDialogService, deps: [{ token: i0.Injector }, { token: i2$1.Overlay }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryDialogService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryDialogService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: i2.Overlay }, { type: i1.Store }] });
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i2$1.Overlay }, { type: i1.Store }] });
 
 class PryStatusModalComponent {
     constructor(store, dialogRef, data) {
@@ -2044,11 +2044,11 @@ class PryStatusModalComponent {
         this.dialogRef.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryStatusModalComponent, deps: [{ token: i1.Store }, { token: PryDialogRef }, { token: PRY_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: PryStatusModalComponent, selector: "pry-status-modal", outputs: { gotoConsult: "gotoConsult" }, ngImport: i0, template: "<div class=\"o-modal-wrapper__backdrop\" (click)=\"close()\">\n  <div class=\"o-modal-wrapper -extra-large\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\">\n          {{\n            '@pry.dataset.error.modalTitle.' +\n              (_version?.state !== 'ERROR' && _version?.hasWarnings ? 'WARNING' : 'ERROR') | i18n\n          }}\n          ({{ messageCount$ | async }})\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"close()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <table class=\"a-table\" [attr.aria-describedby]=\"'@pry.a11y.modalStatusTableDescr' | i18n\">\n      <thead>\n        <tr>\n          <th>{{ '@pry.dataset.error.type' | i18n }}</th>\n          <th>{{ '@pry.dataset.error.elements' | i18n }}</th>\n          <th>{{ '@pry.dataset.error.message' | i18n }}</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr *ngFor=\"let preview of datasetPreviews$ | async | slice : 0 : 5\">\n          <td>\n            {{ '@pry.dataset.error.level.' + preview.level | i18n }}\n          </td>\n          <td>\n            {{ preview.recordId }}\n          </td>\n          <td>\n            {{\n              '@pry.dataset.error.code.' + preview.extractMessageCode\n                | i18n\n                  : { plural: preview.name.includes(',') ? 's' : '', name: preview.name, recordId: preview.recordId }\n            }}\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: PryStatusModalComponent, selector: "pry-status-modal", outputs: { gotoConsult: "gotoConsult" }, ngImport: i0, template: "<div class=\"o-modal-wrapper__backdrop\" (click)=\"close()\">\n  <div class=\"o-modal-wrapper -extra-large\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\">\n          {{\n          '@pry.dataset.error.modalTitle.' +\n          (_version?.state !== 'ERROR' && _version?.hasWarnings ? 'WARNING' : 'ERROR') | i18n\n          }}\n          ({{ messageCount$ | async }})\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"close()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <table class=\"a-table\" [attr.aria-describedby]=\"'@pry.a11y.modalStatusTableDescr' | i18n\">\n      <thead>\n        <tr>\n          <th>{{ '@pry.dataset.error.type' | i18n }}</th>\n          <th>{{ '@pry.dataset.error.elements' | i18n }}</th>\n          <th>{{ '@pry.dataset.error.message' | i18n }}</th>\n        </tr>\n      </thead>\n      <tbody>\n        @for (preview of datasetPreviews$ | async | slice : 0 : 5; track preview) {\n          <tr>\n            <td>\n              {{ '@pry.dataset.error.level.' + preview.level | i18n }}\n            </td>\n            <td>\n              {{ preview.recordId }}\n            </td>\n            <td>\n              {{\n              '@pry.dataset.error.code.' + preview.extractMessageCode\n              | i18n\n              : { plural: preview.name.includes(',') ? 's' : '', name: preview.name, recordId: preview.recordId }\n              }}\n            </td>\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.SlicePipe, name: "slice" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryStatusModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-status-modal', template: "<div class=\"o-modal-wrapper__backdrop\" (click)=\"close()\">\n  <div class=\"o-modal-wrapper -extra-large\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\">\n          {{\n            '@pry.dataset.error.modalTitle.' +\n              (_version?.state !== 'ERROR' && _version?.hasWarnings ? 'WARNING' : 'ERROR') | i18n\n          }}\n          ({{ messageCount$ | async }})\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"close()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <table class=\"a-table\" [attr.aria-describedby]=\"'@pry.a11y.modalStatusTableDescr' | i18n\">\n      <thead>\n        <tr>\n          <th>{{ '@pry.dataset.error.type' | i18n }}</th>\n          <th>{{ '@pry.dataset.error.elements' | i18n }}</th>\n          <th>{{ '@pry.dataset.error.message' | i18n }}</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr *ngFor=\"let preview of datasetPreviews$ | async | slice : 0 : 5\">\n          <td>\n            {{ '@pry.dataset.error.level.' + preview.level | i18n }}\n          </td>\n          <td>\n            {{ preview.recordId }}\n          </td>\n          <td>\n            {{\n              '@pry.dataset.error.code.' + preview.extractMessageCode\n                | i18n\n                  : { plural: preview.name.includes(',') ? 's' : '', name: preview.name, recordId: preview.recordId }\n            }}\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'pry-status-modal', template: "<div class=\"o-modal-wrapper__backdrop\" (click)=\"close()\">\n  <div class=\"o-modal-wrapper -extra-large\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\">\n          {{\n          '@pry.dataset.error.modalTitle.' +\n          (_version?.state !== 'ERROR' && _version?.hasWarnings ? 'WARNING' : 'ERROR') | i18n\n          }}\n          ({{ messageCount$ | async }})\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"close()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <table class=\"a-table\" [attr.aria-describedby]=\"'@pry.a11y.modalStatusTableDescr' | i18n\">\n      <thead>\n        <tr>\n          <th>{{ '@pry.dataset.error.type' | i18n }}</th>\n          <th>{{ '@pry.dataset.error.elements' | i18n }}</th>\n          <th>{{ '@pry.dataset.error.message' | i18n }}</th>\n        </tr>\n      </thead>\n      <tbody>\n        @for (preview of datasetPreviews$ | async | slice : 0 : 5; track preview) {\n          <tr>\n            <td>\n              {{ '@pry.dataset.error.level.' + preview.level | i18n }}\n            </td>\n            <td>\n              {{ preview.recordId }}\n            </td>\n            <td>\n              {{\n              '@pry.dataset.error.code.' + preview.extractMessageCode\n              | i18n\n              : { plural: preview.name.includes(',') ? 's' : '', name: preview.name, recordId: preview.recordId }\n              }}\n            </td>\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: PryDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [PRY_DIALOG_DATA]
@@ -2452,13 +2452,13 @@ class PryNqColorSelectorComponent {
         }
         this.toggleColorChoice();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryNqColorSelectorComponent, deps: [{ token: i1.Store }, { token: i2.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: PryNqColorSelectorComponent, selector: "pry-nq-color-selector", inputs: { disabled: "disabled", datasource: "datasource" }, outputs: { colorChanged: "colorChanged" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<button (click)=\"toggleColorChoice($event)\" class=\"a-btn a-btn--icon-text o-pry-card-menu__nav__item\" role=\"button\">\n  <div\n    aria-hidden=\"true\"\n    [style.background-color]=\"dsColor ?? '#FFFFFF'\"\n    [class]=\"disabled ? 'm-color-selector__point__disabled' : 'm-color-selector__point'\"\n  ></div>\n  <ng-container *ngIf=\"!disabled\">\n    <span>{{ '@pry.search.namedQuery.color' | i18n }}</span>\n    <pry-icon class=\"container__point__icon\" iconSvg=\"chevron_right\"></pry-icon>\n  </ng-container>\n</button>\n\n<ng-template #template>\n  <div class=\"m-color-selector-overlay\">\n    <div\n      *ngFor=\"let color of possibleColors$ | async\"\n      [style.background-color]=\"color\"\n      class=\"m-color-selector-overlay__point\"\n      (click)=\"changeForColor(color)\"\n    >\n      <pry-icon *ngIf=\"dsColor === color\" class=\"m-color-selector-overlay__point__check\" iconSvg=\"check\"></pry-icon>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryNqColorSelectorComponent, deps: [{ token: i1.Store }, { token: i2$1.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: PryNqColorSelectorComponent, selector: "pry-nq-color-selector", inputs: { disabled: "disabled", datasource: "datasource" }, outputs: { colorChanged: "colorChanged" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<button (click)=\"toggleColorChoice($event)\" class=\"a-btn a-btn--icon-text o-pry-card-menu__nav__item\" role=\"button\">\n  <div\n    aria-hidden=\"true\"\n    [style.background-color]=\"dsColor ?? '#FFFFFF'\"\n    [class]=\"disabled ? 'm-color-selector__point__disabled' : 'm-color-selector__point'\"\n  ></div>\n  @if (!disabled) {\n    <span>{{ '@pry.search.namedQuery.color' | i18n }}</span>\n    <pry-icon class=\"container__point__icon\" iconSvg=\"chevron_right\"></pry-icon>\n  }\n</button>\n\n<ng-template #template>\n  <div class=\"m-color-selector-overlay\">\n    @for (color of possibleColors$ | async; track color) {\n      <div\n        [style.background-color]=\"color\"\n        class=\"m-color-selector-overlay__point\"\n        (click)=\"changeForColor(color)\"\n        >\n        @if (dsColor === color) {\n          <pry-icon class=\"m-color-selector-overlay__point__check\" iconSvg=\"check\"></pry-icon>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryNqColorSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-nq-color-selector', template: "<button (click)=\"toggleColorChoice($event)\" class=\"a-btn a-btn--icon-text o-pry-card-menu__nav__item\" role=\"button\">\n  <div\n    aria-hidden=\"true\"\n    [style.background-color]=\"dsColor ?? '#FFFFFF'\"\n    [class]=\"disabled ? 'm-color-selector__point__disabled' : 'm-color-selector__point'\"\n  ></div>\n  <ng-container *ngIf=\"!disabled\">\n    <span>{{ '@pry.search.namedQuery.color' | i18n }}</span>\n    <pry-icon class=\"container__point__icon\" iconSvg=\"chevron_right\"></pry-icon>\n  </ng-container>\n</button>\n\n<ng-template #template>\n  <div class=\"m-color-selector-overlay\">\n    <div\n      *ngFor=\"let color of possibleColors$ | async\"\n      [style.background-color]=\"color\"\n      class=\"m-color-selector-overlay__point\"\n      (click)=\"changeForColor(color)\"\n    >\n      <pry-icon *ngIf=\"dsColor === color\" class=\"m-color-selector-overlay__point__check\" iconSvg=\"check\"></pry-icon>\n    </div>\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Overlay }, { type: i0.ViewContainerRef }], propDecorators: { disabled: [{
+            args: [{ selector: 'pry-nq-color-selector', template: "<button (click)=\"toggleColorChoice($event)\" class=\"a-btn a-btn--icon-text o-pry-card-menu__nav__item\" role=\"button\">\n  <div\n    aria-hidden=\"true\"\n    [style.background-color]=\"dsColor ?? '#FFFFFF'\"\n    [class]=\"disabled ? 'm-color-selector__point__disabled' : 'm-color-selector__point'\"\n  ></div>\n  @if (!disabled) {\n    <span>{{ '@pry.search.namedQuery.color' | i18n }}</span>\n    <pry-icon class=\"container__point__icon\" iconSvg=\"chevron_right\"></pry-icon>\n  }\n</button>\n\n<ng-template #template>\n  <div class=\"m-color-selector-overlay\">\n    @for (color of possibleColors$ | async; track color) {\n      <div\n        [style.background-color]=\"color\"\n        class=\"m-color-selector-overlay__point\"\n        (click)=\"changeForColor(color)\"\n        >\n        @if (dsColor === color) {\n          <pry-icon class=\"m-color-selector-overlay__point__check\" iconSvg=\"check\"></pry-icon>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: i1.Store }, { type: i2$1.Overlay }, { type: i0.ViewContainerRef }], propDecorators: { disabled: [{
                 type: Input
             }], datasource: [{
                 type: Input
@@ -2493,11 +2493,11 @@ class PryDialogConfirmComponent {
         this.cross.nativeElement.focus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryDialogConfirmComponent, deps: [{ token: PryDialogRef }, { token: PRY_DIALOG_DATA }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: PryDialogConfirmComponent, selector: "pry-dialog-confirm", viewQueries: [{ propertyName: "cross", first: true, predicate: ["cross"], descendants: true }, { propertyName: "buttonAction", first: true, predicate: ["buttonAction"], descendants: true }], ngImport: i0, template: "<div\n  class=\"o-modal-wrapper\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  aria-labelledby=\"dialog_confirmDelete\"\n  (keydown.escape)=\"onClick()\"\n  cdkTrapFocus\n  [cdkTrapFocusAutoCapture]=\"true\"\n>\n  <div class=\"o-modal\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ data.title | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"closeDialog()\" #cross>\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <div>\n      <p *ngIf=\"data?.message as message\" class=\"a-p\">{{ message | i18n }}</p>\n    </div>\n    <div class=\"m-btn-group\">\n      <ng-container *ngFor=\"let action of data.actions\" #buttonAction>\n        <button\n          (click)=\"onClick(action)\"\n          class=\"a-btn\"\n          type=\"button\"\n          [class.a-btn--primary]=\"action.color === 'primary' || action.color === undefined\"\n          [class.a-btn--secondary]=\"action.color === 'secondary'\"\n          [ngClass]=\"{ 'a-btn--icon-text': action.icon }\"\n        >\n          <pry-icon *ngIf=\"action.icon\" [iconSvg]=\"action.icon\"></pry-icon>\n          {{ action.label | i18n }}\n        </button>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: i3$2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: PryDialogConfirmComponent, selector: "pry-dialog-confirm", viewQueries: [{ propertyName: "cross", first: true, predicate: ["cross"], descendants: true }, { propertyName: "buttonAction", first: true, predicate: ["buttonAction"], descendants: true }], ngImport: i0, template: "<div\n  class=\"o-modal-wrapper\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  aria-labelledby=\"dialog_confirmDelete\"\n  (keydown.escape)=\"onClick()\"\n  cdkTrapFocus\n  [cdkTrapFocusAutoCapture]=\"true\"\n  >\n  <div class=\"o-modal\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ data.title | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"closeDialog()\" #cross>\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <div>\n      @if (data?.message; as message) {\n        <p class=\"a-p\">{{ message | i18n }}</p>\n      }\n    </div>\n    <div class=\"m-btn-group\">\n      @for (action of data.actions; track action) {\n        <ng-container #buttonAction>\n          <button\n            (click)=\"onClick(action)\"\n            class=\"a-btn\"\n            type=\"button\"\n            [class.a-btn--primary]=\"action.color === 'primary' || action.color === undefined\"\n            [class.a-btn--secondary]=\"action.color === 'secondary'\"\n            [ngClass]=\"{ 'a-btn--icon-text': action.icon }\"\n            >\n            @if (action.icon) {\n              <pry-icon [iconSvg]=\"action.icon\"></pry-icon>\n            }\n            {{ action.label | i18n }}\n          </button>\n        </ng-container>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "directive", type: i3$2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryDialogConfirmComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-dialog-confirm', template: "<div\n  class=\"o-modal-wrapper\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  aria-labelledby=\"dialog_confirmDelete\"\n  (keydown.escape)=\"onClick()\"\n  cdkTrapFocus\n  [cdkTrapFocusAutoCapture]=\"true\"\n>\n  <div class=\"o-modal\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ data.title | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"closeDialog()\" #cross>\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <div>\n      <p *ngIf=\"data?.message as message\" class=\"a-p\">{{ message | i18n }}</p>\n    </div>\n    <div class=\"m-btn-group\">\n      <ng-container *ngFor=\"let action of data.actions\" #buttonAction>\n        <button\n          (click)=\"onClick(action)\"\n          class=\"a-btn\"\n          type=\"button\"\n          [class.a-btn--primary]=\"action.color === 'primary' || action.color === undefined\"\n          [class.a-btn--secondary]=\"action.color === 'secondary'\"\n          [ngClass]=\"{ 'a-btn--icon-text': action.icon }\"\n        >\n          <pry-icon *ngIf=\"action.icon\" [iconSvg]=\"action.icon\"></pry-icon>\n          {{ action.label | i18n }}\n        </button>\n      </ng-container>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'pry-dialog-confirm', template: "<div\n  class=\"o-modal-wrapper\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  aria-labelledby=\"dialog_confirmDelete\"\n  (keydown.escape)=\"onClick()\"\n  cdkTrapFocus\n  [cdkTrapFocusAutoCapture]=\"true\"\n  >\n  <div class=\"o-modal\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ data.title | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"closeDialog()\" #cross>\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <div>\n      @if (data?.message; as message) {\n        <p class=\"a-p\">{{ message | i18n }}</p>\n      }\n    </div>\n    <div class=\"m-btn-group\">\n      @for (action of data.actions; track action) {\n        <ng-container #buttonAction>\n          <button\n            (click)=\"onClick(action)\"\n            class=\"a-btn\"\n            type=\"button\"\n            [class.a-btn--primary]=\"action.color === 'primary' || action.color === undefined\"\n            [class.a-btn--secondary]=\"action.color === 'secondary'\"\n            [ngClass]=\"{ 'a-btn--icon-text': action.icon }\"\n            >\n            @if (action.icon) {\n              <pry-icon [iconSvg]=\"action.icon\"></pry-icon>\n            }\n            {{ action.label | i18n }}\n          </button>\n        </ng-container>\n      }\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: PryDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [PRY_DIALOG_DATA]
@@ -2614,13 +2614,13 @@ class PryOverlayDirective {
                 break;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryOverlayDirective, deps: [{ token: i2.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryOverlayDirective, deps: [{ token: i2$1.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: PryOverlayDirective, selector: "[pryOverlay]", inputs: { pryOverlay: "pryOverlay", styleReversed: "styleReversed", pryOverlaySticky: "pryOverlaySticky", pryOverlayNoPadding: "pryOverlayNoPadding", pryOverlayPosition: "pryOverlayPosition", overlayOpen: "overlayOpen", hasBackdrop: "hasBackdrop" }, outputs: { overlayOpenChange: "overlayOpenChange" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryOverlayDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[pryOverlay]' }]
-        }], ctorParameters: () => [{ type: i2.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }], propDecorators: { pryOverlay: [{
+        }], ctorParameters: () => [{ type: i2$1.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }], propDecorators: { pryOverlay: [{
                 type: Input
             }], styleReversed: [{
                 type: Input
@@ -2736,7 +2736,7 @@ class PrySnackbarComponent {
         this.hiddenFromAction = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PrySnackbarComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: PrySnackbarComponent, selector: "pry-snackbar", inputs: { data: "data", listIndex: "listIndex", actionClicked: "actionClicked" }, ngImport: i0, template: "<div\n  class=\"m-snackbar -bottom\"\n  [ngClass]=\"typeClass\"\n  [@panelState]=\"{ value: 'visible', params: { transform: transformOptions, transition: transitionOptions } }\"\n  *ngIf=\"!hiddenFromAction\"\n  [style.bottom.px]=\"listIndex * 60\"\n>\n  <div class=\"m-snackbar__content\">\n    <pry-icon [iconSvg]=\"icon\"></pry-icon>\n    <p class=\"a-p\">{{ data.message }}</p>\n    <button class=\"m-snackbar__action\" *ngIf=\"!!data.action\" (click)=\"actionClick()\">{{ data.action }}</button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: PrySnackbarComponent, selector: "pry-snackbar", inputs: { data: "data", listIndex: "listIndex", actionClicked: "actionClicked" }, ngImport: i0, template: "@if (!hiddenFromAction) {\n  <div\n    class=\"m-snackbar -bottom\"\n    [ngClass]=\"typeClass\"\n    [@panelState]=\"{ value: 'visible', params: { transform: transformOptions, transition: transitionOptions } }\"\n    [style.bottom.px]=\"listIndex * 60\"\n    >\n    <div class=\"m-snackbar__content\">\n      <pry-icon [iconSvg]=\"icon\"></pry-icon>\n      <p class=\"a-p\">{{ data.message }}</p>\n      @if (!!data.action) {\n        <button class=\"m-snackbar__action\" (click)=\"actionClick()\">{{ data.action }}</button>\n      }\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }], animations: [
             trigger('panelState', [
                 transition('void => visible', [useAnimation(showAnimation)]),
                 transition('visible => void', [useAnimation(hideAnimation)])
@@ -2750,7 +2750,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                             transition('void => visible', [useAnimation(showAnimation)]),
                             transition('visible => void', [useAnimation(hideAnimation)])
                         ])
-                    ], template: "<div\n  class=\"m-snackbar -bottom\"\n  [ngClass]=\"typeClass\"\n  [@panelState]=\"{ value: 'visible', params: { transform: transformOptions, transition: transitionOptions } }\"\n  *ngIf=\"!hiddenFromAction\"\n  [style.bottom.px]=\"listIndex * 60\"\n>\n  <div class=\"m-snackbar__content\">\n    <pry-icon [iconSvg]=\"icon\"></pry-icon>\n    <p class=\"a-p\">{{ data.message }}</p>\n    <button class=\"m-snackbar__action\" *ngIf=\"!!data.action\" (click)=\"actionClick()\">{{ data.action }}</button>\n  </div>\n</div>\n" }]
+                    ], template: "@if (!hiddenFromAction) {\n  <div\n    class=\"m-snackbar -bottom\"\n    [ngClass]=\"typeClass\"\n    [@panelState]=\"{ value: 'visible', params: { transform: transformOptions, transition: transitionOptions } }\"\n    [style.bottom.px]=\"listIndex * 60\"\n    >\n    <div class=\"m-snackbar__content\">\n      <pry-icon [iconSvg]=\"icon\"></pry-icon>\n      <p class=\"a-p\">{{ data.message }}</p>\n      @if (!!data.action) {\n        <button class=\"m-snackbar__action\" (click)=\"actionClick()\">{{ data.action }}</button>\n      }\n    </div>\n  </div>\n}\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { data: [{
                 type: Input
             }], listIndex: [{
@@ -2810,7 +2810,7 @@ class PrySnackbarService {
     open(message) {
         this.messageEvents$.next(message);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PrySnackbarService, deps: [{ token: i2.Overlay }, { token: PryI18nService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PrySnackbarService, deps: [{ token: i2$1.Overlay }, { token: PryI18nService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PrySnackbarService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PrySnackbarService, decorators: [{
@@ -2818,7 +2818,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i2.Overlay }, { type: PryI18nService }] });
+        }], ctorParameters: () => [{ type: i2$1.Overlay }, { type: PryI18nService }] });
 
 const INTERNALLY_STORED_IMAGE_PREFIX = 'internal:';
 var LibraryTypes;
@@ -2873,7 +2873,7 @@ class ImageService {
             });
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ImageService, deps: [{ token: i1$2.HttpClient }, { token: i1.Store }, { token: i3$1.DomSanitizer }, { token: PrySnackbarService }, { token: PryI18nService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ImageService, deps: [{ token: i1$1.HttpClient }, { token: i1.Store }, { token: i3$1.DomSanitizer }, { token: PrySnackbarService }, { token: PryI18nService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ImageService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ImageService, decorators: [{
@@ -2881,7 +2881,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$2.HttpClient }, { type: i1.Store }, { type: i3$1.DomSanitizer }, { type: PrySnackbarService }, { type: PryI18nService }] });
+        }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: i1.Store }, { type: i3$1.DomSanitizer }, { type: PrySnackbarService }, { type: PryI18nService }] });
 
 class RawService {
     constructor(httpClient, store, domSanitizer) {
@@ -2915,7 +2915,7 @@ class RawService {
             headers: new HttpHeaders({ 'File-Content-Type': mimeType })
         })));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RawService, deps: [{ token: i1$2.HttpClient }, { token: i1.Store }, { token: i3$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RawService, deps: [{ token: i1$1.HttpClient }, { token: i1.Store }, { token: i3$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RawService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RawService, decorators: [{
@@ -2923,7 +2923,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$2.HttpClient }, { type: i1.Store }, { type: i3$1.DomSanitizer }] });
+        }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: i1.Store }, { type: i3$1.DomSanitizer }] });
 
 class PryUploadComponent {
     constructor(store, rawService) {
@@ -3355,13 +3355,13 @@ class PrySelectImageComponent {
             this.toggleImageChoice();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PrySelectImageComponent, deps: [{ token: i1.Store }, { token: i2.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: PrySelectImageComponent, selector: "pry-select-image", inputs: { iconUrl: "iconUrl", size: "size", mode: "mode" }, outputs: { toggled: "toggled", changed: "changed" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<div class=\"select-image\">\n  <div class=\"select-image__select\">\n    <button type=\"button\" class=\"a-btn a-btn--icon-only\" id=\"button-{{ id }}\" (click)=\"toggleImageChoice($event)\">\n      <img alt=\"\" [height]=\"size\" [width]=\"size\" [src]=\"iconUrl | getSecuredImage | async\" />\n      <span class=\"u-visually-hidden\">{{ '@pry.action.selectPicture' | i18n }}</span>\n    </button>\n  </div>\n\n  <div class=\"select-image__add\">\n    <div class=\"m-file-upload\">\n      <pry-upload (uploaded)=\"changeForImage($event)\" [mode]=\"mode\"></pry-upload>\n    </div>\n  </div>\n</div>\n\n<ng-template #template>\n  <ul class=\"overlay overlay--icons\" *ngIf=\"images$ | async as images\">\n    <ng-container *ngIf=\"!(loading$ | async)?.loading\">\n      <li class=\"overlay__point\" *ngFor=\"let image of images\">\n        <button class=\"a-btn a-btn--icon-only\" type=\"button\" (click)=\"changeForImage(image.image)\">\n          <img [alt]=\"image.image\" [height]=\"size\" [width]=\"size\" [src]=\"image.image | getSecuredImage | async\" />\n        </button>\n      </li>\n    </ng-container>\n  </ul>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PryUploadComponent, selector: "pry-upload", inputs: ["mode", "accept", "labelTranslate"], outputs: ["uploaded", "uploadedFile"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }, { kind: "pipe", type: GetSecuredImagePipe, name: "getSecuredImage" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PrySelectImageComponent, deps: [{ token: i1.Store }, { token: i2$1.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: PrySelectImageComponent, selector: "pry-select-image", inputs: { iconUrl: "iconUrl", size: "size", mode: "mode" }, outputs: { toggled: "toggled", changed: "changed" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<div class=\"select-image\">\n  <div class=\"select-image__select\">\n    <button type=\"button\" class=\"a-btn a-btn--icon-only\" id=\"button-{{ id }}\" (click)=\"toggleImageChoice($event)\">\n      <img alt=\"\" [height]=\"size\" [width]=\"size\" [src]=\"iconUrl | getSecuredImage | async\" />\n      <span class=\"u-visually-hidden\">{{ '@pry.action.selectPicture' | i18n }}</span>\n    </button>\n  </div>\n\n  <div class=\"select-image__add\">\n    <div class=\"m-file-upload\">\n      <pry-upload (uploaded)=\"changeForImage($event)\" [mode]=\"mode\"></pry-upload>\n    </div>\n  </div>\n</div>\n\n<ng-template #template>\n  @if (images$ | async; as images) {\n    <ul class=\"overlay overlay--icons\">\n      @if (!(loading$ | async)?.loading) {\n        @for (image of images; track image) {\n          <li class=\"overlay__point\">\n            <button class=\"a-btn a-btn--icon-only\" type=\"button\" (click)=\"changeForImage(image.image)\">\n              <img [alt]=\"image.image\" [height]=\"size\" [width]=\"size\" [src]=\"image.image | getSecuredImage | async\" />\n            </button>\n          </li>\n        }\n      }\n    </ul>\n  }\n</ng-template>\n", dependencies: [{ kind: "component", type: PryUploadComponent, selector: "pry-upload", inputs: ["mode", "accept", "labelTranslate"], outputs: ["uploaded", "uploadedFile"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }, { kind: "pipe", type: GetSecuredImagePipe, name: "getSecuredImage" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PrySelectImageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-select-image', template: "<div class=\"select-image\">\n  <div class=\"select-image__select\">\n    <button type=\"button\" class=\"a-btn a-btn--icon-only\" id=\"button-{{ id }}\" (click)=\"toggleImageChoice($event)\">\n      <img alt=\"\" [height]=\"size\" [width]=\"size\" [src]=\"iconUrl | getSecuredImage | async\" />\n      <span class=\"u-visually-hidden\">{{ '@pry.action.selectPicture' | i18n }}</span>\n    </button>\n  </div>\n\n  <div class=\"select-image__add\">\n    <div class=\"m-file-upload\">\n      <pry-upload (uploaded)=\"changeForImage($event)\" [mode]=\"mode\"></pry-upload>\n    </div>\n  </div>\n</div>\n\n<ng-template #template>\n  <ul class=\"overlay overlay--icons\" *ngIf=\"images$ | async as images\">\n    <ng-container *ngIf=\"!(loading$ | async)?.loading\">\n      <li class=\"overlay__point\" *ngFor=\"let image of images\">\n        <button class=\"a-btn a-btn--icon-only\" type=\"button\" (click)=\"changeForImage(image.image)\">\n          <img [alt]=\"image.image\" [height]=\"size\" [width]=\"size\" [src]=\"image.image | getSecuredImage | async\" />\n        </button>\n      </li>\n    </ng-container>\n  </ul>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Overlay }, { type: i0.ViewContainerRef }], propDecorators: { template: [{
+            args: [{ selector: 'pry-select-image', template: "<div class=\"select-image\">\n  <div class=\"select-image__select\">\n    <button type=\"button\" class=\"a-btn a-btn--icon-only\" id=\"button-{{ id }}\" (click)=\"toggleImageChoice($event)\">\n      <img alt=\"\" [height]=\"size\" [width]=\"size\" [src]=\"iconUrl | getSecuredImage | async\" />\n      <span class=\"u-visually-hidden\">{{ '@pry.action.selectPicture' | i18n }}</span>\n    </button>\n  </div>\n\n  <div class=\"select-image__add\">\n    <div class=\"m-file-upload\">\n      <pry-upload (uploaded)=\"changeForImage($event)\" [mode]=\"mode\"></pry-upload>\n    </div>\n  </div>\n</div>\n\n<ng-template #template>\n  @if (images$ | async; as images) {\n    <ul class=\"overlay overlay--icons\">\n      @if (!(loading$ | async)?.loading) {\n        @for (image of images; track image) {\n          <li class=\"overlay__point\">\n            <button class=\"a-btn a-btn--icon-only\" type=\"button\" (click)=\"changeForImage(image.image)\">\n              <img [alt]=\"image.image\" [height]=\"size\" [width]=\"size\" [src]=\"image.image | getSecuredImage | async\" />\n            </button>\n          </li>\n        }\n      }\n    </ul>\n  }\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: i1.Store }, { type: i2$1.Overlay }, { type: i0.ViewContainerRef }], propDecorators: { template: [{
                 type: ViewChild,
                 args: ['template', { read: TemplateRef }]
             }], toggled: [{
@@ -3392,7 +3392,7 @@ class CategoryService {
             .select(ConfigSelectors.refUrl)
             .pipe(mergeMap((url) => this.httpClient.get(encodeURI(`${url}/model/categories`))));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CategoryService, deps: [{ token: i1$2.HttpClient }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CategoryService, deps: [{ token: i1$1.HttpClient }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CategoryService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CategoryService, decorators: [{
@@ -3400,7 +3400,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$2.HttpClient }, { type: i1.Store }] });
+        }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: i1.Store }] });
 
 class CategoryEffects {
     constructor(actions$, categoryService) {
@@ -3408,12 +3408,12 @@ class CategoryEffects {
         this.categoryService = categoryService;
         this.loadCategories$ = createEffect(() => this.actions$.pipe(ofType(CategoryActions.load), debounceTime$1(200), mergeMap$1((action) => this.categoryService.getCategories().pipe(map$1((categories) => CategoryActions.loadSuccess({ categories })), catchError((error) => [CategoryActions.loadFailure({ error: error })])))));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CategoryEffects, deps: [{ token: i1$3.Actions }, { token: CategoryService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CategoryEffects, deps: [{ token: i1$2.Actions }, { token: CategoryService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CategoryEffects }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CategoryEffects, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$3.Actions }, { type: CategoryService }] });
+        }], ctorParameters: () => [{ type: i1$2.Actions }, { type: CategoryService }] });
 
 const categoriesFeatureKey = '@pry/model/categories';
 function sortByName$1(a, b) {
@@ -3449,7 +3449,7 @@ class ClassService {
             .select(ConfigSelectors.refUrl)
             .pipe(mergeMap((url) => this.httpClient.get(encodeURI(`${url}/model/class/datasets/count`))));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ClassService, deps: [{ token: i1$2.HttpClient }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ClassService, deps: [{ token: i1$1.HttpClient }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ClassService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ClassService, decorators: [{
@@ -3457,7 +3457,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$2.HttpClient }, { type: i1.Store }] });
+        }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: i1.Store }] });
 
 class ClassEffects {
     constructor(actions$, classService) {
@@ -3468,12 +3468,12 @@ class ClassEffects {
             return ClassActions.loadDatasetCountSuccess({ datasetCounts: datasetCounts });
         }), catchError((error) => [ClassActions.loadDatasetCountFailure({ error: error })])))));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ClassEffects, deps: [{ token: i1$3.Actions }, { token: ClassService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ClassEffects, deps: [{ token: i1$2.Actions }, { token: ClassService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ClassEffects }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ClassEffects, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$3.Actions }, { type: ClassService }] });
+        }], ctorParameters: () => [{ type: i1$2.Actions }, { type: ClassService }] });
 
 const SYMBOL_DOMAIN = 'symbol';
 const TABLE_ATTR_DOMAIN = 'tableAttr';
@@ -3606,12 +3606,12 @@ class ConfigService {
             .select(ConfigSelectors.refUrl)
             .pipe(mergeMap((url) => this.httpClient.get(encodeURI(`${url}/groups`))));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ConfigService, deps: [{ token: i1$2.HttpClient }, { token: i1.Store }, { token: PrySnackbarService }, { token: PryI18nService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ConfigService, deps: [{ token: i1$1.HttpClient }, { token: i1.Store }, { token: PrySnackbarService }, { token: PryI18nService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ConfigService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ConfigService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$2.HttpClient }, { type: i1.Store }, { type: PrySnackbarService }, { type: PryI18nService }] });
+        }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: i1.Store }, { type: PrySnackbarService }, { type: PryI18nService }] });
 
 class OpenMapTilesService {
     constructor(httpClient, store) {
@@ -3633,7 +3633,7 @@ class OpenMapTilesService {
             })) ?? []).sort((a, b) => a.label.localeCompare(b.label));
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: OpenMapTilesService, deps: [{ token: i1$2.HttpClient }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: OpenMapTilesService, deps: [{ token: i1$1.HttpClient }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: OpenMapTilesService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: OpenMapTilesService, decorators: [{
@@ -3641,7 +3641,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$2.HttpClient }, { type: i1.Store }] });
+        }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: i1.Store }] });
 
 class ConfigEffects {
     constructor(actions$, openMapTilesService, store, configService, snackBar, translateService, pryDialog) {
@@ -3750,23 +3750,23 @@ class ConfigEffects {
             return throwError(() => error);
         })))));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ConfigEffects, deps: [{ token: i1$3.Actions }, { token: OpenMapTilesService }, { token: i1.Store }, { token: ConfigService }, { token: PrySnackbarService }, { token: PryI18nService }, { token: PryDialogService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ConfigEffects, deps: [{ token: i1$2.Actions }, { token: OpenMapTilesService }, { token: i1.Store }, { token: ConfigService }, { token: PrySnackbarService }, { token: PryI18nService }, { token: PryDialogService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ConfigEffects }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ConfigEffects, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$3.Actions }, { type: OpenMapTilesService }, { type: i1.Store }, { type: ConfigService }, { type: PrySnackbarService }, { type: PryI18nService }, { type: PryDialogService }] });
+        }], ctorParameters: () => [{ type: i1$2.Actions }, { type: OpenMapTilesService }, { type: i1.Store }, { type: ConfigService }, { type: PrySnackbarService }, { type: PryI18nService }, { type: PryDialogService }] });
 
 class ContextMenuEffects {
     constructor(actions$) {
         this.actions$ = actions$;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ContextMenuEffects, deps: [{ token: i1$3.Actions }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ContextMenuEffects, deps: [{ token: i1$2.Actions }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ContextMenuEffects }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ContextMenuEffects, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$3.Actions }] });
+        }], ctorParameters: () => [{ type: i1$2.Actions }] });
 
 const ContextMenuActions = {
     open: createAction('[ContextMenu] open', props()),
@@ -3851,6 +3851,7 @@ const DashboardActions = {
     assertResultSets: createAction('[Dashboard] assert resultSet', props()),
     updateResultSet: createAction('[Dashboard] (bus) received named resultSet (not-active-action)', props()),
     addRelationsToResultSets: createAction('[Dashboard] (bus) add relations to resultSet', props()),
+    removeRelationsFromResultSets: createAction('[Dashboard] (bus) remove relations from resultSet', props()),
     addItemToResultSets: createAction('[Dashboard] (bus) add item to resultSet', props()),
     startingMissingViews: createAction('[Dashboard] opening missing views for manifest'),
     setAvailableNamedQueries: createAction('[Dashboard] (bus) set available rs names', props()),
@@ -4212,7 +4213,7 @@ class SearchService {
             this.datasources = datasources;
         });
     }
-    getItems(id, quickOrder, excludeGeo, searchAfter) {
+    getItems(id, quickOrder, excludeGeo, searchAfter, linkedItems = []) {
         const params = this.getItemsFilter(id, this.getOrder(quickOrder));
         if (!id) {
             console.warn('Not sending items request with no datasource attached.');
@@ -4223,9 +4224,10 @@ class SearchService {
             return this.httpClient.post(encodeURI(`${url}/data-sources/id/${id}/items`), {
                 type: ds?.sourceType === 'namedQuery' ? ds.request.type : NamedQueryTypes.MONO_CLASS,
                 excludeGeo: excludeGeo ?? false,
-                searchAfter: searchAfter ?? undefined
+                searchAfter: searchAfter ?? undefined,
+                linkedItems
             }, { params });
-        }), map((rs) => this.applyTransformations('current', rs)));
+        }), map((rs) => this.applyTransformations(id, rs)));
     }
     getItemsSerializedParams(id, quickOrder = {}) {
         return '|' + this.getItemsFilter(id, this.getOrder(quickOrder[id])).toString() + '|';
@@ -4277,19 +4279,24 @@ class SearchService {
      * Launch a search request (and saves it as current search)
      * @param condition
      */
-    search(condition) {
-        return combineLatest([
-            this.store.select(ConfigSelectors.dataUrl),
-            this.store.select(DashboardSelectors.quickOrder),
-            this.store.select(ConfigSelectors.limits)
-        ]).pipe(mergeMap(([url, quickOrder, limits]) => {
+    search(condition, id, withLinkedItems = []) {
+        return this.store.select(ConfigSelectors.dataUrl).pipe(filter((url) => !!url), take(1), withLatestFrom$1(this.store.select(DashboardSelectors.quickOrder), this.store.select(ConfigSelectors.limits)), mergeMap(([url, quickOrder, limits]) => {
             const params = {};
             if (quickOrder[DEFAULT_NAMED_QUERY_ID]) {
                 params['order'] = `${quickOrder[DEFAULT_NAMED_QUERY_ID]?.attribute},${quickOrder[DEFAULT_NAMED_QUERY_ID]?.asc ?? ''}`;
             }
-            const _condition = { ...condition, limit: limits[DEFAULT_NAMED_QUERY_ID] ?? limits['default'] };
+            const otherParams = {};
+            if (withLinkedItems.length > 0) {
+                if (withLinkedItems.includes('destination')) {
+                    otherParams['withDestinationItems'] = 'true';
+                }
+                if (withLinkedItems.includes('source')) {
+                    otherParams['withSourceItems'] = 'true';
+                }
+            }
+            const _condition = { ...condition, limit: limits[DEFAULT_NAMED_QUERY_ID] ?? limits['default'], ...otherParams };
             return this.httpClient.post(encodeURI(`${url}/items/search`), _condition, { params });
-        }), map((rs) => this.applyTransformations(DEFAULT_NAMED_QUERY_ID, rs)));
+        }), map((rs) => this.applyTransformations(id ?? DEFAULT_NAMED_QUERY_ID, rs)));
     }
     /**
      * Allows to add a transformation function when getting results from backend
@@ -4315,7 +4322,7 @@ class SearchService {
             limit
         })));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SearchService, deps: [{ token: i1$2.HttpClient }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SearchService, deps: [{ token: i1$1.HttpClient }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SearchService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SearchService, decorators: [{
@@ -4323,7 +4330,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$2.HttpClient }, { type: i1.Store }] });
+        }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: i1.Store }] });
 
 class DataSourceService {
     constructor(store, httpClient, translateService) {
@@ -4439,7 +4446,7 @@ class DataSourceService {
             .select(ConfigSelectors.refUrl)
             .pipe(mergeMap((url) => this.httpClient.get(encodeURI(`${url}/datasets/categories`))));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DataSourceService, deps: [{ token: i1.Store }, { token: i1$2.HttpClient }, { token: PryI18nService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DataSourceService, deps: [{ token: i1.Store }, { token: i1$1.HttpClient }, { token: PryI18nService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DataSourceService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DataSourceService, decorators: [{
@@ -4447,7 +4454,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1.Store }, { type: i1$2.HttpClient }, { type: PryI18nService }] });
+        }], ctorParameters: () => [{ type: i1.Store }, { type: i1$1.HttpClient }, { type: PryI18nService }] });
 
 class DataSourceEffects {
     constructor(actions$, searchService, dataSourceService, snackBar, translate, store, pryDialog) {
@@ -4503,22 +4510,22 @@ class DataSourceEffects {
         this.updateWidgetAfterSave$ = createEffect(() => this.actions$.pipe(
         // Using strings to prevent having core module depending on search module
         ofType('[SearchMonoClass] save', '[SearchMultiClass] launch save', '[Search Fulltext] save'), withLatestFrom(this.store.select(DataSourceSelectors.editFromWidget), this.store.select(DataSourceSelectors.currentEdit), this.store.select(DashboardSelectors.windowManifest)), filter(([action, fromWidget, currentEdit, windowManifest]) => fromWidget !== undefined), map(([action, fromWidget, currentEdit, windowManifest]) => {
-            const widgetManifestCopy = JSON.parse(JSON.stringify(windowManifest.widgets[fromWidget?.widgetIndex ?? 0]));
+            const widgetManifestCopy = structuredClone(windowManifest.widgets[fromWidget?.widgetIndex ?? 0]);
             // Replacing updated query id by new query id
-            const arrayOfNamedQuery = Array.isArray(widgetManifestCopy.namedQuery)
-                ? widgetManifestCopy.namedQuery
-                : [widgetManifestCopy.namedQuery];
+            const arrayOfdatasource = Array.isArray(widgetManifestCopy.datasource)
+                ? widgetManifestCopy.datasource
+                : [widgetManifestCopy.datasource].filter((d) => d);
             // @ts-ignore : we don't want to make core depending on search
             const newQueryId = action.id;
-            const previousNqIndex = arrayOfNamedQuery.indexOf(fromWidget?.editedQuery);
+            const previousNqIndex = arrayOfdatasource.indexOf(fromWidget?.editedQuery ?? '');
             if (previousNqIndex >= 0) {
-                arrayOfNamedQuery[previousNqIndex] = newQueryId;
+                arrayOfdatasource[previousNqIndex] = newQueryId;
             }
             else {
                 // Editing a request that's not in the widget. Adding it
-                arrayOfNamedQuery.push(newQueryId);
+                arrayOfdatasource.push(newQueryId);
             }
-            widgetManifestCopy.namedQuery = arrayOfNamedQuery;
+            widgetManifestCopy.datasource = arrayOfdatasource;
             return DashboardActions.updateWidgetManifest({
                 index: fromWidget?.widgetIndex ?? 0,
                 manifest: widgetManifestCopy
@@ -4567,12 +4574,12 @@ class DataSourceEffects {
             .getCategories()
             .pipe(map((categories) => DataSourceActions.dataset.getCategoriesSuccess({ categories }))))));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DataSourceEffects, deps: [{ token: i1$3.Actions }, { token: SearchService }, { token: DataSourceService }, { token: PrySnackbarService }, { token: PryI18nService }, { token: i1.Store }, { token: PryDialogService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DataSourceEffects, deps: [{ token: i1$2.Actions }, { token: SearchService }, { token: DataSourceService }, { token: PrySnackbarService }, { token: PryI18nService }, { token: i1.Store }, { token: PryDialogService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DataSourceEffects }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DataSourceEffects, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$3.Actions }, { type: SearchService }, { type: DataSourceService }, { type: PrySnackbarService }, { type: PryI18nService }, { type: i1.Store }, { type: PryDialogService }] });
+        }], ctorParameters: () => [{ type: i1$2.Actions }, { type: SearchService }, { type: DataSourceService }, { type: PrySnackbarService }, { type: PryI18nService }, { type: i1.Store }, { type: PryDialogService }] });
 
 const FieldActions = {
     load: createAction('[Field] Load Fields'),
@@ -4605,7 +4612,7 @@ class FieldService {
             .select(ConfigSelectors.refUrl)
             .pipe(mergeMap((url) => this.httpClient.delete(encodeURI(`${url}/model/fields/${id}`))));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FieldService, deps: [{ token: i1$2.HttpClient }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FieldService, deps: [{ token: i1$1.HttpClient }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FieldService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FieldService, decorators: [{
@@ -4613,7 +4620,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$2.HttpClient }, { type: i1.Store }] });
+        }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: i1.Store }] });
 
 class FieldEffects {
     constructor(actions$, fieldService) {
@@ -4621,12 +4628,12 @@ class FieldEffects {
         this.fieldService = fieldService;
         this.loadFields$ = createEffect(() => this.actions$.pipe(ofType(FieldActions.load), debounceTime$1(200), mergeMap$1((action) => this.fieldService.getFields().pipe(map$1((fields) => FieldActions.loadSuccess({ fields })), catchError((error) => [FieldActions.loadFailure({ error: error })])))));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FieldEffects, deps: [{ token: i1$3.Actions }, { token: FieldService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FieldEffects, deps: [{ token: i1$2.Actions }, { token: FieldService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FieldEffects }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FieldEffects, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$3.Actions }, { type: FieldService }] });
+        }], ctorParameters: () => [{ type: i1$2.Actions }, { type: FieldService }] });
 
 const fieldsFeatureKey = '@pry/model/fields';
 function sortByName(a, b) {
@@ -4651,12 +4658,12 @@ class ImageEffects {
         this.loadImages$ = createEffect(() => this.actions$.pipe(ofType(ImageActions.load), debounceTime$1(50), mergeMap$1(() => this.imageService.getImages().pipe(map$1((images) => ImageActions.loadSuccess({ images })), catchError((error) => [ImageActions.loadFailure({ error })])))));
         this.addImages$ = createEffect(() => this.actions$.pipe(ofType(ImageActions.add), mergeMap$1((action) => this.imageService.upload(action.file, action.mediaType, action.imageType).pipe(mergeMap$1((name) => [ImageActions.load(), ImageActions.added({ name })]), catchError((error) => [ImageActions.loadFailure({ error })])))));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ImageEffects, deps: [{ token: i1$3.Actions }, { token: ImageService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ImageEffects, deps: [{ token: i1$2.Actions }, { token: ImageService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ImageEffects }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ImageEffects, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$3.Actions }, { type: ImageService }] });
+        }], ctorParameters: () => [{ type: i1$2.Actions }, { type: ImageService }] });
 
 const feature$4 = createFeatureSelector(contextMenuFeatureKey);
 const opened = createSelector(feature$4, (state) => state?.opened);
@@ -4853,7 +4860,7 @@ class ItemService {
             .select(ConfigSelectors.dataUrl)
             .pipe(mergeMap((url) => this.httpClient.post(`${url}/items`, [toSendItem])));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ItemService, deps: [{ token: i1.Store }, { token: i1$2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ItemService, deps: [{ token: i1.Store }, { token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ItemService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ItemService, decorators: [{
@@ -4861,7 +4868,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1.Store }, { type: i1$2.HttpClient }] });
+        }], ctorParameters: () => [{ type: i1.Store }, { type: i1$1.HttpClient }] });
 
 class ItemEffects {
     constructor(actions$, service, store, snackBar, translateService) {
@@ -4888,12 +4895,12 @@ class ItemEffects {
             });
         })), { dispatch: false });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ItemEffects, deps: [{ token: i1$3.Actions }, { token: ItemService }, { token: i1.Store }, { token: PrySnackbarService }, { token: PryI18nService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ItemEffects, deps: [{ token: i1$2.Actions }, { token: ItemService }, { token: i1.Store }, { token: PrySnackbarService }, { token: PryI18nService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ItemEffects }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ItemEffects, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$3.Actions }, { type: ItemService }, { type: i1.Store }, { type: PrySnackbarService }, { type: PryI18nService }] });
+        }], ctorParameters: () => [{ type: i1$2.Actions }, { type: ItemService }, { type: i1.Store }, { type: PrySnackbarService }, { type: PryI18nService }] });
 
 const RelationTypesActions = {
     load: createAction('[Relation Types] Load Relation Types'),
@@ -4908,6 +4915,7 @@ const RelationTypesActions = {
     deleteRelationTypeSuccess: createAction('[Relation Types Api] Delete Relation Types Success'),
     deleteRelationTypeFailure: createAction('[Relation Types Api] Delete Relation Types Failure', props()),
     createRelation: createAction('[Relation Types Api] Create Relation', props()),
+    deleteRelation: createAction('[Relation Types Api] Delete Relation', props()),
     createRelationSuccess: createAction('[Relation Types Api] Create Relation success'),
     createRelationFailure: createAction('[Relation Types Api] Create Relation failure', props()),
     openModal: createAction('[Relation Types] Open modal'),
@@ -4946,7 +4954,11 @@ class RelationTypesService {
         }
         return this.store.select(ConfigSelectors.dataUrl).pipe(mergeMap((url) => this.httpClient.post(`${url}/relations`, relations)), map(() => relations));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RelationTypesService, deps: [{ token: i1.Store }, { token: i1$2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    deleteRelation(source, destination, relationType) {
+        const relation = { source, destination, relationType };
+        return this.store.select(ConfigSelectors.dataUrl).pipe(mergeMap((url) => this.httpClient.delete(`${url}/relations`, { body: relation })), map(() => relation));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RelationTypesService, deps: [{ token: i1.Store }, { token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RelationTypesService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RelationTypesService, decorators: [{
@@ -4954,7 +4966,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1.Store }, { type: i1$2.HttpClient }] });
+        }], ctorParameters: () => [{ type: i1.Store }, { type: i1$1.HttpClient }] });
 
 class RelationTypesEffects {
     constructor(actions$, service, router, pryDialog) {
@@ -4985,13 +4997,14 @@ class RelationTypesEffects {
             RelationTypesActions.createRelationSuccess(),
             DashboardActions.addRelationsToResultSets({ relations })
         ]), catchError((error) => [RelationTypesActions.createRelationFailure({ error })])))));
+        this.deleteRelation$ = createEffect(() => this.actions$.pipe(ofType(RelationTypesActions.deleteRelation), mergeMap$1((action) => this.service.deleteRelation(action.from, action.to, action.typeId).pipe(map$1((relation) => DashboardActions.removeRelationsFromResultSets({ relation })), catchError((error) => [RelationTypesActions.createRelationFailure({ error })])))));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RelationTypesEffects, deps: [{ token: i1$3.Actions }, { token: RelationTypesService }, { token: i3.Router }, { token: PryDialogService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RelationTypesEffects, deps: [{ token: i1$2.Actions }, { token: RelationTypesService }, { token: i2.Router }, { token: PryDialogService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RelationTypesEffects }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RelationTypesEffects, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$3.Actions }, { type: RelationTypesService }, { type: i3.Router }, { type: PryDialogService }] });
+        }], ctorParameters: () => [{ type: i1$2.Actions }, { type: RelationTypesService }, { type: i2.Router }, { type: PryDialogService }] });
 
 const relationTypesFeatureKey = '@pry/relation-types';
 const initialRelationTypeState = {
@@ -5104,7 +5117,7 @@ class WidgetFillerComponent extends BaseWidgetComponent {
         // @ts-ignore
         if (startLayout && targetLayout && this.manifest.options?.windowManifest && this.index !== '-') {
             // @ts-ignore
-            const newWindowManifest = JSON.parse(JSON.stringify(this.manifest.options?.windowManifest));
+            const newWindowManifest = structuredClone(this.manifest.options?.windowManifest);
             const targetWidgetIndex = newWindowManifest.widgets.findIndex((w) => w.layout.x === targetLayout.x &&
                 w.layout.y === targetLayout.y &&
                 w.layout.width === targetLayout.width &&
@@ -5264,7 +5277,7 @@ class SearchEffects {
         this.store = store;
         this.widgetFactoryService = widgetFactoryService;
         this.searchNamed$ = createEffect(() => this.actions$.pipe(ofType(SearchActions.getDatasourceItems), withLatestFrom$1(this.store.select(DashboardSelectors.rank), this.store.select(DashboardSelectors.quickOrder), this.store.select(DashboardSelectors.resultSets)), filter(([_, rank]) => rank === 0), filter(([props, rank]) => props.id !== DEFAULT_NAMED_QUERY_ID && props.id !== EXPLORE_NAMED_QUERY_ID), groupBy(([props, rank, quickOrder, rs]) => props.id), mergeMap((group$) => group$.pipe(debounceTime(100), switchMap(([props, rank, quickOrder, rs]) => this.searchService
-            .getItems(props.id, quickOrder[props.id], props.excludeGeo, props.next ? rs[props.id].searchAfter : undefined)
+            .getItems(props.id, quickOrder[props.id], props.excludeGeo, props.next ? rs[props.id].searchAfter : undefined, props.linkedItems)
             .pipe(map((resultSet) => SearchActions.searchSuccess({
             resultSet,
             id: props.id,
@@ -5288,7 +5301,9 @@ class SearchEffects {
                 return EMPTY;
             }
         })));
-        this.search$ = createEffect(() => this.actions$.pipe(ofType(SearchActions.search), mergeMap((props) => this.searchService.search(props.payload).pipe(map((resultSet) => SearchActions.searchSuccess({ resultSet, id: props.id })), catchError$1((error) => [SearchActions.searchFailure({ error, id: props.id })])))));
+        this.search$ = createEffect(() => this.actions$.pipe(ofType(SearchActions.search), mergeMap((props) => this.searchService.search(props.payload, props.id, props.linkedItems).pipe(map((resultSet) => {
+            return SearchActions.searchSuccess({ resultSet, id: props.id });
+        }), catchError$1((error) => [SearchActions.searchFailure({ error, id: props.id })])))));
         this.searchSuccess$ = createEffect(() => this.actions$.pipe(ofType(SearchActions.searchSuccess), map((action) => DashboardActions.updateResultSet({
             id: action.id ?? DEFAULT_NAMED_QUERY_ID,
             resultSet: action.resultSet,
@@ -5299,12 +5314,12 @@ class SearchEffects {
             .autocomplete(action.attributes, '', action.limit)
             .pipe(map((values) => SearchActions.setPossibleFilterValues({ filterId: action.filterId, values }))))));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SearchEffects, deps: [{ token: i1$3.Actions }, { token: SearchService }, { token: i1.Store }, { token: WidgetFactoryService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SearchEffects, deps: [{ token: i1$2.Actions }, { token: SearchService }, { token: i1.Store }, { token: WidgetFactoryService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SearchEffects }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SearchEffects, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$3.Actions }, { type: SearchService }, { type: i1.Store }, { type: WidgetFactoryService }] });
+        }], ctorParameters: () => [{ type: i1$2.Actions }, { type: SearchService }, { type: i1.Store }, { type: WidgetFactoryService }] });
 
 const searchFeatureKey = '@pry/search';
 const initialSearchState = {
@@ -5343,7 +5358,7 @@ const searchReducer = createReducer(initialSearchState, on(SearchActions.search,
 class AccordionComponent {
     constructor() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", 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$3.CdkAccordion, selector: "cdk-accordion, [cdkAccordion]", inputs: ["multi"], exportAs: ["cdkAccordion"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AccordionComponent, decorators: [{
             type: Component,
@@ -5362,11 +5377,11 @@ class AccordionItemComponent {
         this.search.emit({ ...this.search$.getValue(), [item]: $event });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", 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$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", 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        @if (length) {\n          &nbsp;({{ length }})\n        }\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  @if (accordionItem.expanded) {\n    <div\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      @if (showSearchBar) {\n        <div 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      }\n      <ng-content></ng-content>\n    </div>\n  }\n</cdk-accordion-item>\n", dependencies: [{ kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "directive", type: i1$3.CdkAccordionItem, selector: "cdk-accordion-item, [cdkAccordionItem]", inputs: ["expanded", "disabled"], outputs: ["closed", "opened", "destroyed", "expandedChange"], exportAs: ["cdkAccordionItem"] }, { kind: "directive", type: i2$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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", 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" }]
+            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        @if (length) {\n          &nbsp;({{ length }})\n        }\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  @if (accordionItem.expanded) {\n    <div\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      @if (showSearchBar) {\n        <div 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      }\n      <ng-content></ng-content>\n    </div>\n  }\n</cdk-accordion-item>\n" }]
         }], ctorParameters: () => [], propDecorators: { item: [{
                 type: Input
             }], borderColor: [{
@@ -5427,11 +5442,11 @@ class TabGroupComponent {
         this.clickedTabIdx.emit(index);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: TabGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: TabGroupComponent, selector: "pry-tab-group", inputs: { translationStringBase: "translationStringBase" }, outputs: { clickedTabIdx: "clickedTabIdx" }, queries: [{ propertyName: "tabs", predicate: TabComponent }], ngImport: i0, template: "<div class=\"o-tabs\">\n  <div class=\"o-tabs__list\" role=\"tablist\" [attr.aria-label]=\"'tab-panel-' + instanceId\">\n    <button\n      *ngFor=\"let tab of tabs; let index = index\"\n      type=\"button\"\n      class=\"o-tabs__list__btn\"\n      role=\"tab\"\n      [id]=\"'tab-' + instanceId + '-' + index\"\n      [attr.aria-selected]=\"index === currentTabIndex\"\n      [attr.tabindex]=\"index === currentTabIndex ? 0 : -1\"\n      [attr.aria-controls]=\"'tabpanel-' + instanceId + '-' + index\"\n      (click)=\"switch(tab, index)\"\n    >\n      {{ translationStringBase + tab.name | i18n }}\n    </button>\n  </div>\n  <div\n    class=\"o-tabs__panel\"\n    [id]=\"'tabpanel-' + instanceId + '-' + currentTabIndex\"\n    role=\"tabpanel\"\n    [attr.aria-labelledby]=\"'tab-' + instanceId + '-' + currentTabIndex\"\n  >\n    <div class=\"o-tabs__panel__content\">\n      <ng-template [ngTemplateOutlet]=\"currentTab.templateRef\"></ng-template>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: TabGroupComponent, selector: "pry-tab-group", inputs: { translationStringBase: "translationStringBase" }, outputs: { clickedTabIdx: "clickedTabIdx" }, queries: [{ propertyName: "tabs", predicate: TabComponent }], ngImport: i0, template: "<div class=\"o-tabs\">\n  <div class=\"o-tabs__list\" role=\"tablist\" [attr.aria-label]=\"'tab-panel-' + instanceId\">\n    @for (tab of tabs; track tab; let index = $index) {\n      <button\n        type=\"button\"\n        class=\"o-tabs__list__btn\"\n        role=\"tab\"\n        [id]=\"'tab-' + instanceId + '-' + index\"\n        [attr.aria-selected]=\"index === currentTabIndex\"\n        [attr.tabindex]=\"index === currentTabIndex ? 0 : -1\"\n        [attr.aria-controls]=\"'tabpanel-' + instanceId + '-' + index\"\n        (click)=\"switch(tab, index)\"\n        >\n        {{ translationStringBase + tab.name | i18n }}\n      </button>\n    }\n  </div>\n  <div\n    class=\"o-tabs__panel\"\n    [id]=\"'tabpanel-' + instanceId + '-' + currentTabIndex\"\n    role=\"tabpanel\"\n    [attr.aria-labelledby]=\"'tab-' + instanceId + '-' + currentTabIndex\"\n    >\n    <div class=\"o-tabs__panel__content\">\n      <ng-template [ngTemplateOutlet]=\"currentTab.templateRef\"></ng-template>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: TabGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-tab-group', template: "<div class=\"o-tabs\">\n  <div class=\"o-tabs__list\" role=\"tablist\" [attr.aria-label]=\"'tab-panel-' + instanceId\">\n    <button\n      *ngFor=\"let tab of tabs; let index = index\"\n      type=\"button\"\n      class=\"o-tabs__list__btn\"\n      role=\"tab\"\n      [id]=\"'tab-' + instanceId + '-' + index\"\n      [attr.aria-selected]=\"index === currentTabIndex\"\n      [attr.tabindex]=\"index === currentTabIndex ? 0 : -1\"\n      [attr.aria-controls]=\"'tabpanel-' + instanceId + '-' + index\"\n      (click)=\"switch(tab, index)\"\n    >\n      {{ translationStringBase + tab.name | i18n }}\n    </button>\n  </div>\n  <div\n    class=\"o-tabs__panel\"\n    [id]=\"'tabpanel-' + instanceId + '-' + currentTabIndex\"\n    role=\"tabpanel\"\n    [attr.aria-labelledby]=\"'tab-' + instanceId + '-' + currentTabIndex\"\n  >\n    <div class=\"o-tabs__panel__content\">\n      <ng-template [ngTemplateOutlet]=\"currentTab.templateRef\"></ng-template>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'pry-tab-group', template: "<div class=\"o-tabs\">\n  <div class=\"o-tabs__list\" role=\"tablist\" [attr.aria-label]=\"'tab-panel-' + instanceId\">\n    @for (tab of tabs; track tab; let index = $index) {\n      <button\n        type=\"button\"\n        class=\"o-tabs__list__btn\"\n        role=\"tab\"\n        [id]=\"'tab-' + instanceId + '-' + index\"\n        [attr.aria-selected]=\"index === currentTabIndex\"\n        [attr.tabindex]=\"index === currentTabIndex ? 0 : -1\"\n        [attr.aria-controls]=\"'tabpanel-' + instanceId + '-' + index\"\n        (click)=\"switch(tab, index)\"\n        >\n        {{ translationStringBase + tab.name | i18n }}\n      </button>\n    }\n  </div>\n  <div\n    class=\"o-tabs__panel\"\n    [id]=\"'tabpanel-' + instanceId + '-' + currentTabIndex\"\n    role=\"tabpanel\"\n    [attr.aria-labelledby]=\"'tab-' + instanceId + '-' + currentTabIndex\"\n    >\n    <div class=\"o-tabs__panel__content\">\n      <ng-template [ngTemplateOutlet]=\"currentTab.templateRef\"></ng-template>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { translationStringBase: [{
                 type: Input
             }], tabs: [{
@@ -5476,12 +5491,12 @@ class PryDefaultGeoAuthService extends PryGeoAuthService {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryDefaultGeoAuthService, deps: [{ token: i1$2.HttpClient }, { token: PrySnackbarService }, { token: PryI18nService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryDefaultGeoAuthService, deps: [{ token: i1$1.HttpClient }, { token: PrySnackbarService }, { token: PryI18nService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryDefaultGeoAuthService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryDefaultGeoAuthService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$2.HttpClient }, { type: PrySnackbarService }, { type: PryI18nService }] });
+        }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: PrySnackbarService }, { type: PryI18nService }] });
 
 class EllipsisDirective {
     constructor(elementRef, renderer) {
@@ -5693,7 +5708,7 @@ class PryCoreModule {
             TabComponent,
             EllipsisDirective, BaseToolboxActionComponent], 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,
+            HttpClientModule, i1.StoreFeatureModule, i1.StoreFeatureModule, i1.StoreFeatureModule, i1.StoreFeatureModule, i1.StoreFeatureModule, i1.StoreFeatureModule, i1.StoreFeatureModule, i1.StoreFeatureModule, i1.StoreFeatureModule, i1$2.EffectsFeatureModule, i1$2.EffectsFeatureModule, i1$2.EffectsFeatureModule, i1$2.EffectsFeatureModule, i1$2.EffectsFeatureModule, i1$2.EffectsFeatureModule, i1$2.EffectsFeatureModule, i1$2.EffectsFeatureModule, i1$2.EffectsFeatureModule, PryIconModule,
             OverlayModule,
             PryOverlayModule,
             PryI18nModule,
@@ -5988,7 +6003,7 @@ class PryBackendAggregationService extends PryAggregationService {
         }
         return this.cache[key].response;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryBackendAggregationService, deps: [{ token: i1.Store }, { token: PrySnackbarService }, { token: PryI18nService }, { token: i1$2.HttpClient }, { token: SearchService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryBackendAggregationService, deps: [{ token: i1.Store }, { token: PrySnackbarService }, { token: PryI18nService }, { token: i1$1.HttpClient }, { token: SearchService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryBackendAggregationService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryBackendAggregationService, decorators: [{
@@ -5996,7 +6011,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1.Store }, { type: PrySnackbarService }, { type: PryI18nService }, { type: i1$2.HttpClient }, { type: SearchService }] });
+        }], ctorParameters: () => [{ type: i1.Store }, { type: PrySnackbarService }, { type: PryI18nService }, { type: i1$1.HttpClient }, { type: SearchService }] });
 
 class ResultsetUtils {
     static mergeResultSets(rs1, rs2) {
@@ -6004,28 +6019,26 @@ class ResultsetUtils {
             return rs2;
         if (!rs2)
             return rs1;
-        const rs1Copy = JSON.parse(JSON.stringify(rs1));
+        const rs1Copy = structuredClone(rs1);
         Object.keys(rs2.items ?? {}).forEach((key) => {
             if (!rs1Copy.items[key]) {
                 rs1Copy.items[key] = [];
             }
             rs1Copy.items[key].push(...rs2.items[key]);
         });
-        rs1Copy.relations = [...(rs1Copy.relations ?? []), ...(rs2.relations ?? [])];
         /* Make items and relations unique in resulted dataset */
         Object.keys(rs1Copy.items).forEach((key) => {
             const uniqueList = [...new Set(rs1Copy.items[key].map((it) => it.id))];
             rs1Copy.items[key] = uniqueList.map((id) => rs1Copy.items[key].find((it) => it.id === id));
         });
-        const uniqueRelations = [
+        rs1Copy.relations = [
             ...new Set([
-                ...(rs1Copy.relations ?? []).map((rel) => `${rel.relationType}|${rel.source}|${rel.destination}`),
+                ...([...(rs1Copy.relations ?? []), ...(rs2.relations ?? [])] ?? []).map((rel) => `${rel.relationType}|${rel.source}|${rel.destination}`),
                 ...(rs2.relations ?? []).map((rel) => `${rel.relationType}|${rel.source}|${rel.destination}`)
             ])
-        ];
-        rs1Copy.relations = uniqueRelations.map((key) => {
+        ].map((key) => {
             const splittedKey = key.split('|');
-            return rs1Copy.relations.find((rel) => rel.relationType === splittedKey[0] && rel.source === splittedKey[1] && rel.destination === splittedKey[2]);
+            return { relationType: splittedKey[0], source: splittedKey[1], destination: splittedKey[2] };
         });
         if (!rs1Copy.count) {
             rs1Copy.count = {};
@@ -6039,6 +6052,7 @@ class ResultsetUtils {
                 accurate: rs1Copy.count[key].accurate && rs2.count[key].accurate
             };
         });
+        rs1Copy.searchAfter = rs2.searchAfter ?? rs1Copy.searchAfter;
         return rs1Copy;
     }
 }
@@ -6444,11 +6458,11 @@ class LoopScrollColumnComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: LoopScrollColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: LoopScrollColumnComponent, selector: "loop-scroll-column", inputs: { list: "list", selectedItem: "selectedItem" }, outputs: { selection: "selection" }, viewQueries: [{ propertyName: "column", first: true, predicate: ["column"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ul class=\"m-time-picker__list\" (scroll)=\"onScroll()\" [class.disable-scroll]=\"disableScroll\" #column>\n  <ng-container *ngFor=\"let index of LOOP_COUNTER\">\n    <li *ngFor=\"let item of list\" class=\"m-time-picker__list__item\" [class.is-clone]=\"index === 0\">\n      <button (click)=\"select(item)\" [class.-selected]=\"selectedItem === item\">{{ item }}</button>\n    </li>\n  </ng-container>\n</ul>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: LoopScrollColumnComponent, selector: "loop-scroll-column", inputs: { list: "list", selectedItem: "selectedItem" }, outputs: { selection: "selection" }, viewQueries: [{ propertyName: "column", first: true, predicate: ["column"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ul class=\"m-time-picker__list\" (scroll)=\"onScroll()\" [class.disable-scroll]=\"disableScroll\" #column>\n  @for (index of LOOP_COUNTER; track index) {\n    @for (item of list; track item) {\n      <li class=\"m-time-picker__list__item\" [class.is-clone]=\"index === 0\">\n        <button (click)=\"select(item)\" [class.-selected]=\"selectedItem === item\">{{ item }}</button>\n      </li>\n    }\n  }\n</ul>\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: LoopScrollColumnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'loop-scroll-column', template: "<ul class=\"m-time-picker__list\" (scroll)=\"onScroll()\" [class.disable-scroll]=\"disableScroll\" #column>\n  <ng-container *ngFor=\"let index of LOOP_COUNTER\">\n    <li *ngFor=\"let item of list\" class=\"m-time-picker__list__item\" [class.is-clone]=\"index === 0\">\n      <button (click)=\"select(item)\" [class.-selected]=\"selectedItem === item\">{{ item }}</button>\n    </li>\n  </ng-container>\n</ul>\n" }]
+            args: [{ selector: 'loop-scroll-column', template: "<ul class=\"m-time-picker__list\" (scroll)=\"onScroll()\" [class.disable-scroll]=\"disableScroll\" #column>\n  @for (index of LOOP_COUNTER; track index) {\n    @for (item of list; track item) {\n      <li class=\"m-time-picker__list__item\" [class.is-clone]=\"index === 0\">\n        <button (click)=\"select(item)\" [class.-selected]=\"selectedItem === item\">{{ item }}</button>\n      </li>\n    }\n  }\n</ul>\n" }]
         }], ctorParameters: () => [], propDecorators: { column: [{
                 type: ViewChild,
                 args: ['column']
@@ -6508,13 +6522,13 @@ class PryTimePickerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryTimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: PryTimePickerComponent, selector: "pry-time-picker", inputs: { AMPMFormat: "AMPMFormat" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: PryTimePickerComponent, selector: "pry-time-picker", inputs: { AMPMFormat: "AMPMFormat" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => PryTimePickerComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "hourInput", first: true, predicate: ["hourInput"], descendants: true }, { propertyName: "minuteInput", first: true, predicate: ["minuteInput"], descendants: true }], ngImport: i0, template: "<div class=\"m-time-picker\" *ngIf=\"{ hour: selectedHour | async, minute: selectedMinute | async } as time\">\n  <loop-scroll-column\n    [list]=\"HOURS\"\n    [selectedItem]=\"time.hour\"\n    (selection)=\"selectHour($event)\"\n    #hourInput\n  ></loop-scroll-column>\n  <loop-scroll-column\n    [list]=\"MINUTES\"\n    [selectedItem]=\"time.minute\"\n    (selection)=\"selectMinute($event)\"\n    #minuteInput\n  ></loop-scroll-column>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoopScrollColumnComponent, selector: "loop-scroll-column", inputs: ["list", "selectedItem"], outputs: ["selection"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
+        ], viewQueries: [{ propertyName: "hourInput", first: true, predicate: ["hourInput"], descendants: true }, { propertyName: "minuteInput", first: true, predicate: ["minuteInput"], descendants: true }], ngImport: i0, template: "@if ({ hour: selectedHour | async, minute: selectedMinute | async }; as time) {\n  <div class=\"m-time-picker\">\n    <loop-scroll-column\n      [list]=\"HOURS\"\n      [selectedItem]=\"time.hour\"\n      (selection)=\"selectHour($event)\"\n      #hourInput\n    ></loop-scroll-column>\n    <loop-scroll-column\n      [list]=\"MINUTES\"\n      [selectedItem]=\"time.minute\"\n      (selection)=\"selectMinute($event)\"\n      #minuteInput\n    ></loop-scroll-column>\n  </div>\n}\n", dependencies: [{ kind: "component", type: LoopScrollColumnComponent, selector: "loop-scroll-column", inputs: ["list", "selectedItem"], outputs: ["selection"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryTimePickerComponent, decorators: [{
             type: Component,
@@ -6524,7 +6538,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                             useExisting: forwardRef(() => PryTimePickerComponent),
                             multi: true
                         }
-                    ], template: "<div class=\"m-time-picker\" *ngIf=\"{ hour: selectedHour | async, minute: selectedMinute | async } as time\">\n  <loop-scroll-column\n    [list]=\"HOURS\"\n    [selectedItem]=\"time.hour\"\n    (selection)=\"selectHour($event)\"\n    #hourInput\n  ></loop-scroll-column>\n  <loop-scroll-column\n    [list]=\"MINUTES\"\n    [selectedItem]=\"time.minute\"\n    (selection)=\"selectMinute($event)\"\n    #minuteInput\n  ></loop-scroll-column>\n</div>\n" }]
+                    ], template: "@if ({ hour: selectedHour | async, minute: selectedMinute | async }; as time) {\n  <div class=\"m-time-picker\">\n    <loop-scroll-column\n      [list]=\"HOURS\"\n      [selectedItem]=\"time.hour\"\n      (selection)=\"selectHour($event)\"\n      #hourInput\n    ></loop-scroll-column>\n    <loop-scroll-column\n      [list]=\"MINUTES\"\n      [selectedItem]=\"time.minute\"\n      (selection)=\"selectMinute($event)\"\n      #minuteInput\n    ></loop-scroll-column>\n  </div>\n}\n" }]
         }], propDecorators: { AMPMFormat: [{
                 type: Input
             }], hourInput: [{
@@ -6742,13 +6756,13 @@ class PryDatePickerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryDatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: PryDatePickerComponent, selector: "pry-date-picker", inputs: { rangePicker: "rangePicker", timePicker: "timePicker", maxYear: "maxYear", minYear: "minYear", roundSelection: "roundSelection" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: PryDatePickerComponent, selector: "pry-date-picker", inputs: { rangePicker: "rangePicker", timePicker: "timePicker", maxYear: "maxYear", minYear: "minYear", roundSelection: "roundSelection" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => PryDatePickerComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<div class=\"o-date-picker-wrapper\">\n  <div\n    class=\"o-date-picker\"\n    *ngIf=\"{\n      month: currentMonth | async,\n      year: currentYear | async,\n      firstDay: firstDay | async,\n      count: dayCount | async\n    } as data\"\n  >\n    <div class=\"o-date-picker__header\">\n      <div>\n        <select\n          class=\"o-date-picker__header__dropdown\"\n          name=\"months\"\n          id=\"months\"\n          [ngModel]=\"data.month\"\n          (ngModelChange)=\"changeMonth($event)\"\n        >\n          <option *ngFor=\"let month of MONTHS\" [ngValue]=\"month\" [selected]=\"month === data.month\">\n            {{ '@pry.theme.months.' + month | i18n }}\n          </option>\n        </select>\n        <select\n          class=\"o-date-picker__header__dropdown\"\n          name=\"year\"\n          id=\"year\"\n          [ngModel]=\"data.year\"\n          (ngModelChange)=\"changeYear($event)\"\n        >\n          <option *ngFor=\"let year of YEARS\" [ngValue]=\"year\" [selected]=\"data.year === year\">\n            {{ year }}\n          </option>\n        </select>\n      </div>\n      <div>\n        <button\n          type=\"button\"\n          class=\"a-arrow a-arrow--left\"\n          (click)=\"goBack()\"\n          [disabled]=\"data.year === minYear && data.month === 0\"\n          [class.disabled]=\"disabled\"\n        >\n          <pry-icon iconSvg=\"fleche_bas\" [width]=\"15\" [height]=\"15\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.theme.previousMonth' | i18n }}</span>\n        </button>\n        <button\n          type=\"button\"\n          class=\"a-arrow a-arrow--right\"\n          (click)=\"goForward()\"\n          [disabled]=\"data.year === maxYear && data.month === 11\"\n          [class.disabled]=\"disabled\"\n        >\n          <pry-icon iconSvg=\"fleche_bas\" [width]=\"15\" [height]=\"15\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.theme.nextMonth' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n\n    <ul class=\"o-date-picker__weekdays\">\n      <li *ngFor=\"let weekday of WEEKDAYS\" class=\"o-date-picker__weekdays__item\">\n        <span>{{ '@pry.theme.shortWeekdays.' + weekday | i18n }}</span>\n      </li>\n    </ul>\n\n    <div class=\"o-date-picker__days-grid\" *ngIf=\"data.month !== null && data.year !== null\">\n      <button\n        *ngFor=\"let day of DAY$ | async; first as first\"\n        (click)=\"setDateRange(day + 1); onClick()\"\n        class=\"o-date-picker__days-grid__item\"\n        [ngClass]=\"[\n          roundSelection ? 'round' : '',\n          first ? 'start-' + data.firstDay : '',\n          day | dateRangeHighlight: data.month : data.year : dateRangeStart : dateRangeEnd\n        ]\"\n      >\n        <time class=\"a-time\" [dateTime]=\"data.year + '-' + addLeadingZero(data.year) + '-' + addLeadingZero(day)\">{{\n          day + 1\n        }}</time>\n      </button>\n    </div>\n  </div>\n\n  <div class=\"m-time-picker-wrapper\" *ngIf=\"timePicker && !rangePicker\">\n    <pry-time-picker (click)=\"onClick()\" [ngModel]=\"time | async\" (ngModelChange)=\"setTime($event)\"></pry-time-picker>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.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: "component", type: PryTimePickerComponent, selector: "pry-time-picker", inputs: ["AMPMFormat"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }, { kind: "pipe", type: DateRangeHighlightPipe, name: "dateRangeHighlight" }] }); }
+        ], ngImport: i0, template: "<div class=\"o-date-picker-wrapper\">\n  @if ({\n    month: currentMonth | async,\n    year: currentYear | async,\n    firstDay: firstDay | async,\n    count: dayCount | async\n    }; as data) {\n    <div\n      class=\"o-date-picker\"\n      >\n      <div class=\"o-date-picker__header\">\n        <div>\n          <select\n            class=\"o-date-picker__header__dropdown\"\n            name=\"months\"\n            id=\"months\"\n            [ngModel]=\"data.month\"\n            (ngModelChange)=\"changeMonth($event)\"\n            >\n            @for (month of MONTHS; track month) {\n              <option [ngValue]=\"month\" [selected]=\"month === data.month\">\n                {{ '@pry.theme.months.' + month | i18n }}\n              </option>\n            }\n          </select>\n          <select\n            class=\"o-date-picker__header__dropdown\"\n            name=\"year\"\n            id=\"year\"\n            [ngModel]=\"data.year\"\n            (ngModelChange)=\"changeYear($event)\"\n            >\n            @for (year of YEARS; track year) {\n              <option [ngValue]=\"year\" [selected]=\"data.year === year\">\n                {{ year }}\n              </option>\n            }\n          </select>\n        </div>\n        <div>\n          <button\n            type=\"button\"\n            class=\"a-arrow a-arrow--left\"\n            (click)=\"goBack()\"\n            [disabled]=\"data.year === minYear && data.month === 0\"\n            [class.disabled]=\"disabled\"\n            >\n            <pry-icon iconSvg=\"fleche_bas\" [width]=\"15\" [height]=\"15\"></pry-icon>\n            <span class=\"u-visually-hidden\">{{ '@pry.theme.previousMonth' | i18n }}</span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"a-arrow a-arrow--right\"\n            (click)=\"goForward()\"\n            [disabled]=\"data.year === maxYear && data.month === 11\"\n            [class.disabled]=\"disabled\"\n            >\n            <pry-icon iconSvg=\"fleche_bas\" [width]=\"15\" [height]=\"15\"></pry-icon>\n            <span class=\"u-visually-hidden\">{{ '@pry.theme.nextMonth' | i18n }}</span>\n          </button>\n        </div>\n      </div>\n      <ul class=\"o-date-picker__weekdays\">\n        @for (weekday of WEEKDAYS; track weekday) {\n          <li class=\"o-date-picker__weekdays__item\">\n            <span>{{ '@pry.theme.shortWeekdays.' + weekday | i18n }}</span>\n          </li>\n        }\n      </ul>\n      @if (data.month !== null && data.year !== null) {\n        <div class=\"o-date-picker__days-grid\">\n          @for (day of DAY$ | async; track day; let first = $first) {\n            <button\n              (click)=\"setDateRange(day + 1); onClick()\"\n              class=\"o-date-picker__days-grid__item\"\n        [ngClass]=\"[\n          roundSelection ? 'round' : '',\n          first ? 'start-' + data.firstDay : '',\n          day | dateRangeHighlight: data.month : data.year : dateRangeStart : dateRangeEnd\n        ]\"\n              >\n              <time class=\"a-time\" [dateTime]=\"data.year + '-' + addLeadingZero(data.year) + '-' + addLeadingZero(day)\">{{\n                day + 1\n              }}</time>\n            </button>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (timePicker && !rangePicker) {\n    <div class=\"m-time-picker-wrapper\">\n      <pry-time-picker (click)=\"onClick()\" [ngModel]=\"time | async\" (ngModelChange)=\"setTime($event)\"></pry-time-picker>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.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: "component", type: PryTimePickerComponent, selector: "pry-time-picker", inputs: ["AMPMFormat"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }, { kind: "pipe", type: DateRangeHighlightPipe, name: "dateRangeHighlight" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryDatePickerComponent, decorators: [{
             type: Component,
@@ -6758,7 +6772,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                             useExisting: forwardRef(() => PryDatePickerComponent),
                             multi: true
                         }
-                    ], template: "<div class=\"o-date-picker-wrapper\">\n  <div\n    class=\"o-date-picker\"\n    *ngIf=\"{\n      month: currentMonth | async,\n      year: currentYear | async,\n      firstDay: firstDay | async,\n      count: dayCount | async\n    } as data\"\n  >\n    <div class=\"o-date-picker__header\">\n      <div>\n        <select\n          class=\"o-date-picker__header__dropdown\"\n          name=\"months\"\n          id=\"months\"\n          [ngModel]=\"data.month\"\n          (ngModelChange)=\"changeMonth($event)\"\n        >\n          <option *ngFor=\"let month of MONTHS\" [ngValue]=\"month\" [selected]=\"month === data.month\">\n            {{ '@pry.theme.months.' + month | i18n }}\n          </option>\n        </select>\n        <select\n          class=\"o-date-picker__header__dropdown\"\n          name=\"year\"\n          id=\"year\"\n          [ngModel]=\"data.year\"\n          (ngModelChange)=\"changeYear($event)\"\n        >\n          <option *ngFor=\"let year of YEARS\" [ngValue]=\"year\" [selected]=\"data.year === year\">\n            {{ year }}\n          </option>\n        </select>\n      </div>\n      <div>\n        <button\n          type=\"button\"\n          class=\"a-arrow a-arrow--left\"\n          (click)=\"goBack()\"\n          [disabled]=\"data.year === minYear && data.month === 0\"\n          [class.disabled]=\"disabled\"\n        >\n          <pry-icon iconSvg=\"fleche_bas\" [width]=\"15\" [height]=\"15\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.theme.previousMonth' | i18n }}</span>\n        </button>\n        <button\n          type=\"button\"\n          class=\"a-arrow a-arrow--right\"\n          (click)=\"goForward()\"\n          [disabled]=\"data.year === maxYear && data.month === 11\"\n          [class.disabled]=\"disabled\"\n        >\n          <pry-icon iconSvg=\"fleche_bas\" [width]=\"15\" [height]=\"15\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.theme.nextMonth' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n\n    <ul class=\"o-date-picker__weekdays\">\n      <li *ngFor=\"let weekday of WEEKDAYS\" class=\"o-date-picker__weekdays__item\">\n        <span>{{ '@pry.theme.shortWeekdays.' + weekday | i18n }}</span>\n      </li>\n    </ul>\n\n    <div class=\"o-date-picker__days-grid\" *ngIf=\"data.month !== null && data.year !== null\">\n      <button\n        *ngFor=\"let day of DAY$ | async; first as first\"\n        (click)=\"setDateRange(day + 1); onClick()\"\n        class=\"o-date-picker__days-grid__item\"\n        [ngClass]=\"[\n          roundSelection ? 'round' : '',\n          first ? 'start-' + data.firstDay : '',\n          day | dateRangeHighlight: data.month : data.year : dateRangeStart : dateRangeEnd\n        ]\"\n      >\n        <time class=\"a-time\" [dateTime]=\"data.year + '-' + addLeadingZero(data.year) + '-' + addLeadingZero(day)\">{{\n          day + 1\n        }}</time>\n      </button>\n    </div>\n  </div>\n\n  <div class=\"m-time-picker-wrapper\" *ngIf=\"timePicker && !rangePicker\">\n    <pry-time-picker (click)=\"onClick()\" [ngModel]=\"time | async\" (ngModelChange)=\"setTime($event)\"></pry-time-picker>\n  </div>\n</div>\n" }]
+                    ], template: "<div class=\"o-date-picker-wrapper\">\n  @if ({\n    month: currentMonth | async,\n    year: currentYear | async,\n    firstDay: firstDay | async,\n    count: dayCount | async\n    }; as data) {\n    <div\n      class=\"o-date-picker\"\n      >\n      <div class=\"o-date-picker__header\">\n        <div>\n          <select\n            class=\"o-date-picker__header__dropdown\"\n            name=\"months\"\n            id=\"months\"\n            [ngModel]=\"data.month\"\n            (ngModelChange)=\"changeMonth($event)\"\n            >\n            @for (month of MONTHS; track month) {\n              <option [ngValue]=\"month\" [selected]=\"month === data.month\">\n                {{ '@pry.theme.months.' + month | i18n }}\n              </option>\n            }\n          </select>\n          <select\n            class=\"o-date-picker__header__dropdown\"\n            name=\"year\"\n            id=\"year\"\n            [ngModel]=\"data.year\"\n            (ngModelChange)=\"changeYear($event)\"\n            >\n            @for (year of YEARS; track year) {\n              <option [ngValue]=\"year\" [selected]=\"data.year === year\">\n                {{ year }}\n              </option>\n            }\n          </select>\n        </div>\n        <div>\n          <button\n            type=\"button\"\n            class=\"a-arrow a-arrow--left\"\n            (click)=\"goBack()\"\n            [disabled]=\"data.year === minYear && data.month === 0\"\n            [class.disabled]=\"disabled\"\n            >\n            <pry-icon iconSvg=\"fleche_bas\" [width]=\"15\" [height]=\"15\"></pry-icon>\n            <span class=\"u-visually-hidden\">{{ '@pry.theme.previousMonth' | i18n }}</span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"a-arrow a-arrow--right\"\n            (click)=\"goForward()\"\n            [disabled]=\"data.year === maxYear && data.month === 11\"\n            [class.disabled]=\"disabled\"\n            >\n            <pry-icon iconSvg=\"fleche_bas\" [width]=\"15\" [height]=\"15\"></pry-icon>\n            <span class=\"u-visually-hidden\">{{ '@pry.theme.nextMonth' | i18n }}</span>\n          </button>\n        </div>\n      </div>\n      <ul class=\"o-date-picker__weekdays\">\n        @for (weekday of WEEKDAYS; track weekday) {\n          <li class=\"o-date-picker__weekdays__item\">\n            <span>{{ '@pry.theme.shortWeekdays.' + weekday | i18n }}</span>\n          </li>\n        }\n      </ul>\n      @if (data.month !== null && data.year !== null) {\n        <div class=\"o-date-picker__days-grid\">\n          @for (day of DAY$ | async; track day; let first = $first) {\n            <button\n              (click)=\"setDateRange(day + 1); onClick()\"\n              class=\"o-date-picker__days-grid__item\"\n        [ngClass]=\"[\n          roundSelection ? 'round' : '',\n          first ? 'start-' + data.firstDay : '',\n          day | dateRangeHighlight: data.month : data.year : dateRangeStart : dateRangeEnd\n        ]\"\n              >\n              <time class=\"a-time\" [dateTime]=\"data.year + '-' + addLeadingZero(data.year) + '-' + addLeadingZero(day)\">{{\n                day + 1\n              }}</time>\n            </button>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (timePicker && !rangePicker) {\n    <div class=\"m-time-picker-wrapper\">\n      <pry-time-picker (click)=\"onClick()\" [ngModel]=\"time | async\" (ngModelChange)=\"setTime($event)\"></pry-time-picker>\n    </div>\n  }\n</div>\n" }]
         }], propDecorators: { rangePicker: [{
                 type: Input
             }], timePicker: [{
@@ -6841,13 +6855,13 @@ class PryEditInputComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryEditInputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: PryEditInputComponent, selector: "pry-edit-input", inputs: { label: "label", editButtonTooltip: "editButtonTooltip", confirmButtonTooltip: "confirmButtonTooltip" }, outputs: { validated: "validated" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: PryEditInputComponent, selector: "pry-edit-input", inputs: { label: "label", editButtonTooltip: "editButtonTooltip", confirmButtonTooltip: "confirmButtonTooltip" }, outputs: { validated: "validated" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => PryEditInputComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div class=\"o-pry-edit\" [class.-edit]=\"editMode\">\n  <label id=\"edit-input-label-{{ id }}\" for=\"edit-input-{{ id }}\" class=\"a-label\">\n    {{ label | i18n }}\n    <span class=\"u-visually-hidden\">({{ label | i18n }})</span>\n  </label>\n  <div class=\"o-pry-edit__wrapper\" (mouseenter)=\"showButton = true\" (mouseleave)=\"showButton = false\">\n    <div class=\"o-pry-edit__value u-display-flex -align-center\" *ngIf=\"!editMode\">\n      {{ value }}\n    </div>\n    <input\n      *ngIf=\"editMode\"\n      id=\"edit-input-{{ id }}\"\n      type=\"text\"\n      class=\"a-form-field o-pry-edit__input\"\n      [ngModel]=\"value\"\n      (ngModelChange)=\"writeValue($event)\"\n      #input\n    />\n    <button\n      [class.-button-visible]=\"showButton || editMode\"\n      type=\"button\"\n      class=\"a-btn a-btn--icon-only -size-xs a-tooltip\"\n      (click)=\"toggle()\"\n      [attr.data-tooltip]=\"(editMode ? confirmButtonTooltip : editButtonTooltip) | i18n\"\n      data-tooltip-position=\"left\"\n    >\n      <pry-icon [width]=\"16\" [height]=\"16\" [iconSvg]=\"editMode ? 'check' : 'edit'\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.theme.editInput.toggle' | i18n }}</span>\n    </button>\n  </div>\n</div>\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: i3$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div class=\"o-pry-edit\" [class.-edit]=\"editMode\">\n  <label id=\"edit-input-label-{{ id }}\" for=\"edit-input-{{ id }}\" class=\"a-label\">\n    {{ label | i18n }}\n    <span class=\"u-visually-hidden\">({{ label | i18n }})</span>\n  </label>\n  <div class=\"o-pry-edit__wrapper\" (mouseenter)=\"showButton = true\" (mouseleave)=\"showButton = false\">\n    @if (!editMode) {\n      <div class=\"o-pry-edit__value u-display-flex -align-center\">\n        {{ value }}\n      </div>\n    }\n    @if (editMode) {\n      <input\n        id=\"edit-input-{{ id }}\"\n        type=\"text\"\n        class=\"a-form-field o-pry-edit__input\"\n        [ngModel]=\"value\"\n        (ngModelChange)=\"writeValue($event)\"\n        #input\n        />\n    }\n    <button\n      [class.-button-visible]=\"showButton || editMode\"\n      type=\"button\"\n      class=\"a-btn a-btn--icon-only -size-xs a-tooltip\"\n      (click)=\"toggle()\"\n      [attr.data-tooltip]=\"(editMode ? confirmButtonTooltip : editButtonTooltip) | i18n\"\n      data-tooltip-position=\"left\"\n      >\n      <pry-icon [width]=\"16\" [height]=\"16\" [iconSvg]=\"editMode ? 'check' : 'edit'\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.theme.editInput.toggle' | i18n }}</span>\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "directive", type: i2$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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryEditInputComponent, decorators: [{
             type: Component,
@@ -6857,7 +6871,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                             useExisting: forwardRef(() => PryEditInputComponent),
                             multi: true
                         }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"o-pry-edit\" [class.-edit]=\"editMode\">\n  <label id=\"edit-input-label-{{ id }}\" for=\"edit-input-{{ id }}\" class=\"a-label\">\n    {{ label | i18n }}\n    <span class=\"u-visually-hidden\">({{ label | i18n }})</span>\n  </label>\n  <div class=\"o-pry-edit__wrapper\" (mouseenter)=\"showButton = true\" (mouseleave)=\"showButton = false\">\n    <div class=\"o-pry-edit__value u-display-flex -align-center\" *ngIf=\"!editMode\">\n      {{ value }}\n    </div>\n    <input\n      *ngIf=\"editMode\"\n      id=\"edit-input-{{ id }}\"\n      type=\"text\"\n      class=\"a-form-field o-pry-edit__input\"\n      [ngModel]=\"value\"\n      (ngModelChange)=\"writeValue($event)\"\n      #input\n    />\n    <button\n      [class.-button-visible]=\"showButton || editMode\"\n      type=\"button\"\n      class=\"a-btn a-btn--icon-only -size-xs a-tooltip\"\n      (click)=\"toggle()\"\n      [attr.data-tooltip]=\"(editMode ? confirmButtonTooltip : editButtonTooltip) | i18n\"\n      data-tooltip-position=\"left\"\n    >\n      <pry-icon [width]=\"16\" [height]=\"16\" [iconSvg]=\"editMode ? 'check' : 'edit'\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.theme.editInput.toggle' | i18n }}</span>\n    </button>\n  </div>\n</div>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"o-pry-edit\" [class.-edit]=\"editMode\">\n  <label id=\"edit-input-label-{{ id }}\" for=\"edit-input-{{ id }}\" class=\"a-label\">\n    {{ label | i18n }}\n    <span class=\"u-visually-hidden\">({{ label | i18n }})</span>\n  </label>\n  <div class=\"o-pry-edit__wrapper\" (mouseenter)=\"showButton = true\" (mouseleave)=\"showButton = false\">\n    @if (!editMode) {\n      <div class=\"o-pry-edit__value u-display-flex -align-center\">\n        {{ value }}\n      </div>\n    }\n    @if (editMode) {\n      <input\n        id=\"edit-input-{{ id }}\"\n        type=\"text\"\n        class=\"a-form-field o-pry-edit__input\"\n        [ngModel]=\"value\"\n        (ngModelChange)=\"writeValue($event)\"\n        #input\n        />\n    }\n    <button\n      [class.-button-visible]=\"showButton || editMode\"\n      type=\"button\"\n      class=\"a-btn a-btn--icon-only -size-xs a-tooltip\"\n      (click)=\"toggle()\"\n      [attr.data-tooltip]=\"(editMode ? confirmButtonTooltip : editButtonTooltip) | i18n\"\n      data-tooltip-position=\"left\"\n      >\n      <pry-icon [width]=\"16\" [height]=\"16\" [iconSvg]=\"editMode ? 'check' : 'edit'\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.theme.editInput.toggle' | i18n }}</span>\n    </button>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { label: [{
                 type: Input
             }], editButtonTooltip: [{
@@ -6936,11 +6950,11 @@ class PryModalComponent {
         this.cancelAction = () => { };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: PryModalComponent, selector: "pry-modal", inputs: { titleModal: "titleModal", opened: "opened", validateLabel: "validateLabel", validateAction: "validateAction", cancelLabel: "cancelLabel", cancelAction: "cancelAction" }, ngImport: i0, template: "<div class=\"o-modal-wrapper\" *ngIf=\"opened\">\n  <div class=\"o-modal backdrop\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ titleModal }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"cancelAction()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n\n    <ng-content></ng-content>\n\n    <div class=\"m-btn-group\">\n      <button type=\"button\" class=\"a-btn a-btn--secondary\" (click)=\"cancelAction()\">\n        {{ cancelLabel }}\n      </button>\n      <button type=\"button\" class=\"a-btn a-btn--primary\" (click)=\"validateAction()\">\n        {{ validateLabel }}\n      </button>\n    </div>\n  </div>\n</div>\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: "pipe", type: I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: PryModalComponent, selector: "pry-modal", inputs: { titleModal: "titleModal", opened: "opened", validateLabel: "validateLabel", validateAction: "validateAction", cancelLabel: "cancelLabel", cancelAction: "cancelAction" }, ngImport: i0, template: "@if (opened) {\n  <div class=\"o-modal-wrapper\">\n    <div class=\"o-modal backdrop\">\n      <div class=\"o-modal__top\">\n        <div class=\"o-modal__top__title\">\n          <h2 class=\"a-h2\" id=\"dialog_title\">\n            {{ titleModal }}\n          </h2>\n        </div>\n        <div class=\"o-modal__top__close\">\n          <button class=\"a-btn a-btn--icon-only\" (click)=\"cancelAction()\">\n            <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n            <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n          </button>\n        </div>\n      </div>\n      <ng-content></ng-content>\n      <div class=\"m-btn-group\">\n        <button type=\"button\" class=\"a-btn a-btn--secondary\" (click)=\"cancelAction()\">\n          {{ cancelLabel }}\n        </button>\n        <button type=\"button\" class=\"a-btn a-btn--primary\" (click)=\"validateAction()\">\n          {{ validateLabel }}\n        </button>\n      </div>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-modal', template: "<div class=\"o-modal-wrapper\" *ngIf=\"opened\">\n  <div class=\"o-modal backdrop\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ titleModal }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"cancelAction()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n\n    <ng-content></ng-content>\n\n    <div class=\"m-btn-group\">\n      <button type=\"button\" class=\"a-btn a-btn--secondary\" (click)=\"cancelAction()\">\n        {{ cancelLabel }}\n      </button>\n      <button type=\"button\" class=\"a-btn a-btn--primary\" (click)=\"validateAction()\">\n        {{ validateLabel }}\n      </button>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'pry-modal', template: "@if (opened) {\n  <div class=\"o-modal-wrapper\">\n    <div class=\"o-modal backdrop\">\n      <div class=\"o-modal__top\">\n        <div class=\"o-modal__top__title\">\n          <h2 class=\"a-h2\" id=\"dialog_title\">\n            {{ titleModal }}\n          </h2>\n        </div>\n        <div class=\"o-modal__top__close\">\n          <button class=\"a-btn a-btn--icon-only\" (click)=\"cancelAction()\">\n            <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n            <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n          </button>\n        </div>\n      </div>\n      <ng-content></ng-content>\n      <div class=\"m-btn-group\">\n        <button type=\"button\" class=\"a-btn a-btn--secondary\" (click)=\"cancelAction()\">\n          {{ cancelLabel }}\n        </button>\n        <button type=\"button\" class=\"a-btn a-btn--primary\" (click)=\"validateAction()\">\n          {{ validateLabel }}\n        </button>\n      </div>\n    </div>\n  </div>\n}\n" }]
         }], propDecorators: { titleModal: [{
                 type: Input
             }], opened: [{
@@ -7025,13 +7039,13 @@ class PryToggleComponent {
         return !!this.leftword || !!this.rightword;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryToggleComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: PryToggleComponent, selector: "pry-toggle", inputs: { alwaysActive: "alwaysActive", disabled: "disabled", mode: "mode", size: "size", dir: "dir", leftword: "leftword", rightword: "rightword" }, host: { properties: { "class": "this.class" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: PryToggleComponent, selector: "pry-toggle", inputs: { alwaysActive: "alwaysActive", disabled: "disabled", mode: "mode", size: "size", dir: "dir", leftword: "leftword", rightword: "rightword" }, host: { properties: { "class": "this.class" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => PryToggleComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"mode !== 'action'\">\n  <label\n    class=\"a-toggle a-tooltip\"\n    [for]=\"'toggle-' + _id\"\n    [dir]=\"dir\"\n    [ngClass]=\"{\n      '-disabled': disabled,\n      '-always-active': alwaysActive,\n      '-size-sm': size === 'sm',\n      '-txt-inside': hasTextInside\n    }\"\n    [attr.data-tooltip]=\"'@pry.toolbox.edit' | i18n\"\n    data-tooltip-position=\"bottom\"\n  >\n    <input\n      #input\n      type=\"checkbox\"\n      name=\"toggle\"\n      [id]=\"'toggle-' + _id\"\n      class=\"a-toggle__input\"\n      [checked]=\"checked\"\n      [disabled]=\"disabled\"\n      (change)=\"onChangeValue($event)\"\n      (click)=\"onInputClick($event)\"\n    />\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </label>\n</ng-container>\n<ng-container *ngIf=\"mode === 'action'\">\n  <button\n    type=\"button\"\n    class=\"a-toggle\"\n    [dir]=\"dir\"\n    [ngClass]=\"{\n      '-disabled': disabled,\n      '-always-active': alwaysActive,\n      '-size-sm': size === 'sm',\n      '-txt-inside': hasTextInside\n    }\"\n    [attr.aria-pressed]=\"checked\"\n    [disabled]=\"disabled\"\n    (change)=\"onChangeValue($event)\"\n    (click)=\"onInputClick($event)\"\n    #button\n  >\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </button>\n</ng-container>\n\n<ng-template #contentTpl>\n  <span class=\"a-toggle__display\" aria-hidden=\"true\">\n    <span class=\"a-toggle__display__txtleft\">{{ leftword }}</span>\n    <span class=\"a-toggle__display__txtright\">{{ rightword }}</span>\n  </span>\n  <span class=\"a-toggle__wording\">\n    <ng-content></ng-content>\n  </span>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "pipe", type: I18nPipe, name: "i18n" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "@if (mode !== 'action') {\n  <label\n    class=\"a-toggle a-tooltip\"\n    [for]=\"'toggle-' + _id\"\n    [dir]=\"dir\"\n    [ngClass]=\"{\n      '-disabled': disabled,\n      '-always-active': alwaysActive,\n      '-size-sm': size === 'sm',\n      '-txt-inside': hasTextInside\n    }\"\n    [attr.data-tooltip]=\"'@pry.toolbox.edit' | i18n\"\n    data-tooltip-position=\"bottom\"\n    >\n    <input\n      #input\n      type=\"checkbox\"\n      name=\"toggle\"\n      [id]=\"'toggle-' + _id\"\n      class=\"a-toggle__input\"\n      [checked]=\"checked\"\n      [disabled]=\"disabled\"\n      (change)=\"onChangeValue($event)\"\n      (click)=\"onInputClick($event)\"\n      />\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </label>\n}\n@if (mode === 'action') {\n  <button\n    type=\"button\"\n    class=\"a-toggle\"\n    [dir]=\"dir\"\n    [ngClass]=\"{\n      '-disabled': disabled,\n      '-always-active': alwaysActive,\n      '-size-sm': size === 'sm',\n      '-txt-inside': hasTextInside\n    }\"\n    [attr.aria-pressed]=\"checked\"\n    [disabled]=\"disabled\"\n    (change)=\"onChangeValue($event)\"\n    (click)=\"onInputClick($event)\"\n    #button\n    >\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </button>\n}\n\n<ng-template #contentTpl>\n  <span class=\"a-toggle__display\" aria-hidden=\"true\">\n    <span class=\"a-toggle__display__txtleft\">{{ leftword }}</span>\n    <span class=\"a-toggle__display__txtright\">{{ rightword }}</span>\n  </span>\n  <span class=\"a-toggle__wording\">\n    <ng-content></ng-content>\n  </span>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryToggleComponent, decorators: [{
             type: Component,
@@ -7041,7 +7055,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                             useExisting: forwardRef(() => PryToggleComponent),
                             multi: true
                         }
-                    ], template: "<ng-container *ngIf=\"mode !== 'action'\">\n  <label\n    class=\"a-toggle a-tooltip\"\n    [for]=\"'toggle-' + _id\"\n    [dir]=\"dir\"\n    [ngClass]=\"{\n      '-disabled': disabled,\n      '-always-active': alwaysActive,\n      '-size-sm': size === 'sm',\n      '-txt-inside': hasTextInside\n    }\"\n    [attr.data-tooltip]=\"'@pry.toolbox.edit' | i18n\"\n    data-tooltip-position=\"bottom\"\n  >\n    <input\n      #input\n      type=\"checkbox\"\n      name=\"toggle\"\n      [id]=\"'toggle-' + _id\"\n      class=\"a-toggle__input\"\n      [checked]=\"checked\"\n      [disabled]=\"disabled\"\n      (change)=\"onChangeValue($event)\"\n      (click)=\"onInputClick($event)\"\n    />\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </label>\n</ng-container>\n<ng-container *ngIf=\"mode === 'action'\">\n  <button\n    type=\"button\"\n    class=\"a-toggle\"\n    [dir]=\"dir\"\n    [ngClass]=\"{\n      '-disabled': disabled,\n      '-always-active': alwaysActive,\n      '-size-sm': size === 'sm',\n      '-txt-inside': hasTextInside\n    }\"\n    [attr.aria-pressed]=\"checked\"\n    [disabled]=\"disabled\"\n    (change)=\"onChangeValue($event)\"\n    (click)=\"onInputClick($event)\"\n    #button\n  >\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </button>\n</ng-container>\n\n<ng-template #contentTpl>\n  <span class=\"a-toggle__display\" aria-hidden=\"true\">\n    <span class=\"a-toggle__display__txtleft\">{{ leftword }}</span>\n    <span class=\"a-toggle__display__txtright\">{{ rightword }}</span>\n  </span>\n  <span class=\"a-toggle__wording\">\n    <ng-content></ng-content>\n  </span>\n</ng-template>\n" }]
+                    ], template: "@if (mode !== 'action') {\n  <label\n    class=\"a-toggle a-tooltip\"\n    [for]=\"'toggle-' + _id\"\n    [dir]=\"dir\"\n    [ngClass]=\"{\n      '-disabled': disabled,\n      '-always-active': alwaysActive,\n      '-size-sm': size === 'sm',\n      '-txt-inside': hasTextInside\n    }\"\n    [attr.data-tooltip]=\"'@pry.toolbox.edit' | i18n\"\n    data-tooltip-position=\"bottom\"\n    >\n    <input\n      #input\n      type=\"checkbox\"\n      name=\"toggle\"\n      [id]=\"'toggle-' + _id\"\n      class=\"a-toggle__input\"\n      [checked]=\"checked\"\n      [disabled]=\"disabled\"\n      (change)=\"onChangeValue($event)\"\n      (click)=\"onInputClick($event)\"\n      />\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </label>\n}\n@if (mode === 'action') {\n  <button\n    type=\"button\"\n    class=\"a-toggle\"\n    [dir]=\"dir\"\n    [ngClass]=\"{\n      '-disabled': disabled,\n      '-always-active': alwaysActive,\n      '-size-sm': size === 'sm',\n      '-txt-inside': hasTextInside\n    }\"\n    [attr.aria-pressed]=\"checked\"\n    [disabled]=\"disabled\"\n    (change)=\"onChangeValue($event)\"\n    (click)=\"onInputClick($event)\"\n    #button\n    >\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </button>\n}\n\n<ng-template #contentTpl>\n  <span class=\"a-toggle__display\" aria-hidden=\"true\">\n    <span class=\"a-toggle__display__txtleft\">{{ leftword }}</span>\n    <span class=\"a-toggle__display__txtright\">{{ rightword }}</span>\n  </span>\n  <span class=\"a-toggle__wording\">\n    <ng-content></ng-content>\n  </span>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class']
@@ -7626,7 +7640,7 @@ class PrySelectComponent extends SubscriptionnerDirective {
     enterPressed($event) {
         this.pressedEnter.next();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PrySelectComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i2.Overlay }, { token: i0.ViewContainerRef }, { token: SelectA11yService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PrySelectComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i2$1.Overlay }, { token: i0.ViewContainerRef }, { token: SelectA11yService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: PrySelectComponent, selector: "pry-select", inputs: { items: "items", clearable: "clearable", multiple: "multiple", closeOnSelect: "closeOnSelect", placeholder: "placeholder", isForm: "isForm", required: "required", name: "name", autocomplete: "autocomplete", alwaysShowAutosuggestedValues: "alwaysShowAutosuggestedValues", externalAutocompleteService: "externalAutocompleteService", bindValue: "bindValue", bindLabel: "bindLabel", iconSize: "iconSize", bindIcon: "bindIcon", template: "template", i18nPrefix: "i18nPrefix", bindClasses: "bindClasses", loading: "loading", elementRef: "elementRef" }, outputs: { searched: "searched", cleared: "cleared", clicked: "clicked", pressedEnter: "pressedEnter" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -7634,7 +7648,7 @@ class PrySelectComponent extends SubscriptionnerDirective {
                 multi: true
             },
             SelectA11yService
-        ], viewQueries: [{ propertyName: "optionsModal", first: true, predicate: ["optionsModal"], descendants: true, read: TemplateRef }, { propertyName: "selectElement", first: true, predicate: ["selectElement"], descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"a-pry-select\"\n  [attr.aria-disabled]=\"disabled\"\n  #selectElement\n  [class.-focused]=\"focused\"\n  (click)=\"handleClick()\"\n  role=\"combobox\"\n  [attr.aria-expanded]=\"open\"\n  [attr.aria-owns]=\"open ? modalId : null\"\n  aria-haspopup=\"listbox\"\n  tabindex=\"0\"\n  cdkMonitorElementFocus\n  (cdkFocusChange)=\"onFocusChange($event)\"\n  (keydown)=\"onKeydownSelect($event)\"\n>\n  <div class=\"a-pry-select__content\">\n    @if (autocomplete) {\n      <input\n        type=\"text\"\n        class=\"a-pry-select__search\"\n        [ngModel]=\"search$.getValue()\"\n        (ngModelChange)=\"search($event, true)\"\n        aria-autocomplete=\"list\"\n        [attr.aria-controls]=\"open ? modalId : null\"\n        [attr.aria-disabled]=\"disabled\"\n        [disabled]=\"disabled\"\n        (keydown)=\"onKeydownAutocompleteInput($event)\"\n        [placeholder]=\"placeholder ?? ''\"\n        (keydown.enter)=\"enterPressed($event)\"\n        #input\n      />\n    } @else if ((valueItems$ | async).length === 0) {\n      <span class=\"a-pry-select__placeholder\">{{ placeholder }}</span>\n      <div class=\"a-pry-select__filler\"></div>\n    } @else {\n      @for (item of valueItems$ | async; track !!item && !!item.id ? item.id : item) {\n        <div\n          class=\"a-pry-select__value\"\n          [class.pry-select-form]=\"isForm\"\n          [class.-multiple]=\"multiple\"\n          [ngClass]=\"item ? item[bindClasses ?? ''] ?? {} : {}\"\n        >\n          @if (template) {\n            <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item, clear }\"></ng-container>\n          } @else {\n            <pry-icon\n              *ngIf=\"bindIcon\"\n              [iconSvg]=\"item[bindIcon]\"\n              [width]=\"iconSize[0]\"\n              [height]=\"iconSize[1]\"\n            ></pry-icon>\n            @if (bindLabel ? item?.[bindLabel] : item; as value) {\n              {{ (i18nPrefix ?? '') + value | i18n: { warn: false } }}\n              <span\n                *ngIf=\"multiple && clearable\"\n                class=\"a-pry-select__clear\"\n                (click)=\"clear($event, item)\"\n                aria-hidden=\"true\"\n                >\u00D7</span\n              >\n            }\n          }\n        </div>\n      }\n      <div class=\"a-pry-select__filler\"></div>\n    }\n  </div>\n  <div class=\"a-pry-select__actions\">\n    <div class=\"a-pry-select__actions__clear-button\">\n      @if (clearable && (search$ | async)) {\n        <span class=\"a-pry-select__clear\" (click)=\"clearAll($event)\" aria-hidden=\"true\">\u00D7</span>\n      }\n    </div>\n    <pry-icon\n      class=\"a-pry-select__toggle\"\n      [iconSvg]=\"open ? 'chevron_top' : 'chevron_bottom'\"\n      [width]=\"iconSize[0]\"\n      [height]=\"iconSize[1]\"\n    ></pry-icon>\n  </div>\n</div>\n<ng-template #optionsModal>\n  <div\n    role=\"listbox\"\n    [attr.aria-label]=\"'@pry.select.label' | i18n\"\n    [id]=\"modalId\"\n    [attr.aria-activedescendant]=\"'select-option-' + activeDescendant\"\n    [attr.aria-multiselectable]=\"multiple\"\n    [attr.required]=\"required\"\n    [attr.aria-readonly]=\"disabled\"\n    cdkTrapFocus=\"!autocomplete\"\n    [cdkTrapFocusAutoCapture]=\"!autocomplete\"\n  >\n    @if (loading) {\n      <div class=\"a-pry-select__options__option -hint\" [style.width.px]=\"modalWidth\">\n        <div class=\"no-widget no-widget__loader\">\n          <pry-page-loader></pry-page-loader>\n        </div>\n        <p>{{ '@pry.select.loading' | i18n }}...</p>\n      </div>\n    } @else {\n      @for (\n        item of matchingItems$ | async;\n        track !!item && !!item.id ? item.id : item;\n        let index = $index;\n        let first = $first;\n        let last = $last\n      ) {\n        <div\n          class=\"a-pry-select__options__option\"\n          [attr.aria-selected]=\"(valueItems$ | async).includes(item)\"\n          [attr.aria-checked]=\"(valueItems$ | async).includes(item)\"\n          [attr.aria-disabled]=\"disabled\"\n          (click)=\"select($event, item, index)\"\n          (keydown)=\"onKeydownOption($event, item, index, optionDivRef, first, last)\"\n          [style.width.px]=\"modalWidth\"\n          role=\"option\"\n          [id]=\"'select-option-' + index\"\n          tabindex=\"0\"\n          #optionDivRef\n        >\n          @if (template) {\n            <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item, clear }\"></ng-container>\n          } @else {\n            @if (multiple) {\n              <pry-checkbox\n                (click)=\"$event.preventDefault()\"\n                [ngModel]=\"(valueItems$ | async).includes(item)\"\n              ></pry-checkbox>\n            }\n            @if (bindIcon) {\n              <pry-icon [iconSvg]=\"item[bindIcon]\" [width]=\"iconSize[0]\" [height]=\"iconSize[1]\"></pry-icon>\n            }\n            @if (bindLabel ? item?.[bindLabel] : item; as value) {\n              {{ (i18nPrefix ? i18nPrefix : '') + value | i18n: { warn: false } }}\n            }\n          }\n        </div>\n      } @empty {\n        <div class=\"a-pry-select__options__option -hint\" [style.width.px]=\"modalWidth\">\n          <p>{{ '@pry.select.empty' | i18n }}</p>\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3$2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i3$2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "directive", type: i3$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.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: "component", type: i7.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle", "name", "inputId", "inhibit"] }, { kind: "component", type: i8.PryPageLoaderComponent, selector: "pry-page-loader", inputs: ["image", "imageAltText"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
+        ], viewQueries: [{ propertyName: "optionsModal", first: true, predicate: ["optionsModal"], descendants: true, read: TemplateRef }, { propertyName: "selectElement", first: true, predicate: ["selectElement"], descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"a-pry-select\"\n  [attr.aria-disabled]=\"disabled\"\n  #selectElement\n  [class.-focused]=\"focused\"\n  (click)=\"handleClick()\"\n  role=\"combobox\"\n  [attr.aria-expanded]=\"open\"\n  [attr.aria-owns]=\"open ? modalId : null\"\n  aria-haspopup=\"listbox\"\n  tabindex=\"0\"\n  cdkMonitorElementFocus\n  (cdkFocusChange)=\"onFocusChange($event)\"\n  (keydown)=\"onKeydownSelect($event)\"\n  >\n  <div class=\"a-pry-select__content\">\n    @if (autocomplete) {\n      <input\n        type=\"text\"\n        class=\"a-pry-select__search\"\n        [ngModel]=\"search$.getValue()\"\n        (ngModelChange)=\"search($event, true)\"\n        aria-autocomplete=\"list\"\n        [attr.aria-controls]=\"open ? modalId : null\"\n        [attr.aria-disabled]=\"disabled\"\n        [disabled]=\"disabled\"\n        (keydown)=\"onKeydownAutocompleteInput($event)\"\n        [placeholder]=\"placeholder ?? ''\"\n        (keydown.enter)=\"enterPressed($event)\"\n        #input\n        />\n    } @else if ((valueItems$ | async).length === 0) {\n      <span class=\"a-pry-select__placeholder\">{{ placeholder }}</span>\n      <div class=\"a-pry-select__filler\"></div>\n    } @else {\n      @for (item of valueItems$ | async; track !!item && !!item.id ? item.id : item) {\n        <div\n          class=\"a-pry-select__value\"\n          [class.pry-select-form]=\"isForm\"\n          [class.-multiple]=\"multiple\"\n          [ngClass]=\"item ? item[bindClasses ?? ''] ?? {} : {}\"\n          >\n          @if (template) {\n            <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item, clear }\"></ng-container>\n          } @else {\n            @if (bindIcon) {\n              <pry-icon\n                [iconSvg]=\"item[bindIcon]\"\n                [width]=\"iconSize[0]\"\n                [height]=\"iconSize[1]\"\n              ></pry-icon>\n            }\n            @if (bindLabel ? item?.[bindLabel] : item; as value) {\n              {{ (i18nPrefix ?? '') + value | i18n: { warn: false } }}\n              @if (multiple && clearable) {\n                <span\n                  class=\"a-pry-select__clear\"\n                  (click)=\"clear($event, item)\"\n                  aria-hidden=\"true\"\n                  >\u00D7</span\n                  >\n                }\n              }\n            }\n          </div>\n        }\n        <div class=\"a-pry-select__filler\"></div>\n      }\n    </div>\n    <div class=\"a-pry-select__actions\">\n      <div class=\"a-pry-select__actions__clear-button\">\n        @if (clearable && (search$ | async)) {\n          <span class=\"a-pry-select__clear\" (click)=\"clearAll($event)\" aria-hidden=\"true\">\u00D7</span>\n        }\n      </div>\n      <pry-icon\n        class=\"a-pry-select__toggle\"\n        [iconSvg]=\"open ? 'chevron_top' : 'chevron_bottom'\"\n        [width]=\"iconSize[0]\"\n        [height]=\"iconSize[1]\"\n      ></pry-icon>\n    </div>\n  </div>\n  <ng-template #optionsModal>\n    <div\n      role=\"listbox\"\n      [attr.aria-label]=\"'@pry.select.label' | i18n\"\n      [id]=\"modalId\"\n      [attr.aria-activedescendant]=\"'select-option-' + activeDescendant\"\n      [attr.aria-multiselectable]=\"multiple\"\n      [attr.required]=\"required\"\n      [attr.aria-readonly]=\"disabled\"\n      cdkTrapFocus=\"!autocomplete\"\n      [cdkTrapFocusAutoCapture]=\"!autocomplete\"\n      >\n      @if (loading) {\n        <div class=\"a-pry-select__options__option -hint\" [style.width.px]=\"modalWidth\">\n          <div class=\"no-widget no-widget__loader\">\n            <pry-page-loader></pry-page-loader>\n          </div>\n          <p>{{ '@pry.select.loading' | i18n }}...</p>\n        </div>\n      } @else {\n        @for (\n          item of matchingItems$ | async;\n          track !!item && !!item.id ? item.id : item;\n          let index = $index;\n          let first = $first;\n          let last = $last\n          ) {\n          <div\n            class=\"a-pry-select__options__option\"\n            [attr.aria-selected]=\"(valueItems$ | async).includes(item)\"\n            [attr.aria-checked]=\"(valueItems$ | async).includes(item)\"\n            [attr.aria-disabled]=\"disabled\"\n            (click)=\"select($event, item, index)\"\n            (keydown)=\"onKeydownOption($event, item, index, optionDivRef, first, last)\"\n            [style.width.px]=\"modalWidth\"\n            role=\"option\"\n            [id]=\"'select-option-' + index\"\n            tabindex=\"0\"\n            #optionDivRef\n            >\n            @if (template) {\n              <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item, clear }\"></ng-container>\n            } @else {\n              @if (multiple) {\n                <pry-checkbox\n                  (click)=\"$event.preventDefault()\"\n                  [ngModel]=\"(valueItems$ | async).includes(item)\"\n                ></pry-checkbox>\n              }\n              @if (bindIcon) {\n                <pry-icon [iconSvg]=\"item[bindIcon]\" [width]=\"iconSize[0]\" [height]=\"iconSize[1]\"></pry-icon>\n              }\n              @if (bindLabel ? item?.[bindLabel] : item; as value) {\n                {{ (i18nPrefix ? i18nPrefix : '') + value | i18n: { warn: false } }}\n              }\n            }\n          </div>\n          } @empty {\n          <div class=\"a-pry-select__options__option -hint\" [style.width.px]=\"modalWidth\">\n            <p>{{ '@pry.select.empty' | i18n }}</p>\n          </div>\n        }\n      }\n    </div>\n  </ng-template>\n", dependencies: [{ kind: "directive", type: i3$2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i3$2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.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: "component", type: i7.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle", "name", "inputId", "inhibit"] }, { kind: "component", type: i8.PryPageLoaderComponent, selector: "pry-page-loader", inputs: ["image", "imageAltText"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PrySelectComponent, decorators: [{
             type: Component,
@@ -7645,8 +7659,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                             multi: true
                         },
                         SelectA11yService
-                    ], template: "<div\n  class=\"a-pry-select\"\n  [attr.aria-disabled]=\"disabled\"\n  #selectElement\n  [class.-focused]=\"focused\"\n  (click)=\"handleClick()\"\n  role=\"combobox\"\n  [attr.aria-expanded]=\"open\"\n  [attr.aria-owns]=\"open ? modalId : null\"\n  aria-haspopup=\"listbox\"\n  tabindex=\"0\"\n  cdkMonitorElementFocus\n  (cdkFocusChange)=\"onFocusChange($event)\"\n  (keydown)=\"onKeydownSelect($event)\"\n>\n  <div class=\"a-pry-select__content\">\n    @if (autocomplete) {\n      <input\n        type=\"text\"\n        class=\"a-pry-select__search\"\n        [ngModel]=\"search$.getValue()\"\n        (ngModelChange)=\"search($event, true)\"\n        aria-autocomplete=\"list\"\n        [attr.aria-controls]=\"open ? modalId : null\"\n        [attr.aria-disabled]=\"disabled\"\n        [disabled]=\"disabled\"\n        (keydown)=\"onKeydownAutocompleteInput($event)\"\n        [placeholder]=\"placeholder ?? ''\"\n        (keydown.enter)=\"enterPressed($event)\"\n        #input\n      />\n    } @else if ((valueItems$ | async).length === 0) {\n      <span class=\"a-pry-select__placeholder\">{{ placeholder }}</span>\n      <div class=\"a-pry-select__filler\"></div>\n    } @else {\n      @for (item of valueItems$ | async; track !!item && !!item.id ? item.id : item) {\n        <div\n          class=\"a-pry-select__value\"\n          [class.pry-select-form]=\"isForm\"\n          [class.-multiple]=\"multiple\"\n          [ngClass]=\"item ? item[bindClasses ?? ''] ?? {} : {}\"\n        >\n          @if (template) {\n            <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item, clear }\"></ng-container>\n          } @else {\n            <pry-icon\n              *ngIf=\"bindIcon\"\n              [iconSvg]=\"item[bindIcon]\"\n              [width]=\"iconSize[0]\"\n              [height]=\"iconSize[1]\"\n            ></pry-icon>\n            @if (bindLabel ? item?.[bindLabel] : item; as value) {\n              {{ (i18nPrefix ?? '') + value | i18n: { warn: false } }}\n              <span\n                *ngIf=\"multiple && clearable\"\n                class=\"a-pry-select__clear\"\n                (click)=\"clear($event, item)\"\n                aria-hidden=\"true\"\n                >\u00D7</span\n              >\n            }\n          }\n        </div>\n      }\n      <div class=\"a-pry-select__filler\"></div>\n    }\n  </div>\n  <div class=\"a-pry-select__actions\">\n    <div class=\"a-pry-select__actions__clear-button\">\n      @if (clearable && (search$ | async)) {\n        <span class=\"a-pry-select__clear\" (click)=\"clearAll($event)\" aria-hidden=\"true\">\u00D7</span>\n      }\n    </div>\n    <pry-icon\n      class=\"a-pry-select__toggle\"\n      [iconSvg]=\"open ? 'chevron_top' : 'chevron_bottom'\"\n      [width]=\"iconSize[0]\"\n      [height]=\"iconSize[1]\"\n    ></pry-icon>\n  </div>\n</div>\n<ng-template #optionsModal>\n  <div\n    role=\"listbox\"\n    [attr.aria-label]=\"'@pry.select.label' | i18n\"\n    [id]=\"modalId\"\n    [attr.aria-activedescendant]=\"'select-option-' + activeDescendant\"\n    [attr.aria-multiselectable]=\"multiple\"\n    [attr.required]=\"required\"\n    [attr.aria-readonly]=\"disabled\"\n    cdkTrapFocus=\"!autocomplete\"\n    [cdkTrapFocusAutoCapture]=\"!autocomplete\"\n  >\n    @if (loading) {\n      <div class=\"a-pry-select__options__option -hint\" [style.width.px]=\"modalWidth\">\n        <div class=\"no-widget no-widget__loader\">\n          <pry-page-loader></pry-page-loader>\n        </div>\n        <p>{{ '@pry.select.loading' | i18n }}...</p>\n      </div>\n    } @else {\n      @for (\n        item of matchingItems$ | async;\n        track !!item && !!item.id ? item.id : item;\n        let index = $index;\n        let first = $first;\n        let last = $last\n      ) {\n        <div\n          class=\"a-pry-select__options__option\"\n          [attr.aria-selected]=\"(valueItems$ | async).includes(item)\"\n          [attr.aria-checked]=\"(valueItems$ | async).includes(item)\"\n          [attr.aria-disabled]=\"disabled\"\n          (click)=\"select($event, item, index)\"\n          (keydown)=\"onKeydownOption($event, item, index, optionDivRef, first, last)\"\n          [style.width.px]=\"modalWidth\"\n          role=\"option\"\n          [id]=\"'select-option-' + index\"\n          tabindex=\"0\"\n          #optionDivRef\n        >\n          @if (template) {\n            <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item, clear }\"></ng-container>\n          } @else {\n            @if (multiple) {\n              <pry-checkbox\n                (click)=\"$event.preventDefault()\"\n                [ngModel]=\"(valueItems$ | async).includes(item)\"\n              ></pry-checkbox>\n            }\n            @if (bindIcon) {\n              <pry-icon [iconSvg]=\"item[bindIcon]\" [width]=\"iconSize[0]\" [height]=\"iconSize[1]\"></pry-icon>\n            }\n            @if (bindLabel ? item?.[bindLabel] : item; as value) {\n              {{ (i18nPrefix ? i18nPrefix : '') + value | i18n: { warn: false } }}\n            }\n          }\n        </div>\n      } @empty {\n        <div class=\"a-pry-select__options__option -hint\" [style.width.px]=\"modalWidth\">\n          <p>{{ '@pry.select.empty' | i18n }}</p>\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i2.Overlay }, { type: i0.ViewContainerRef }, { type: SelectA11yService }], propDecorators: { items: [{
+                    ], template: "<div\n  class=\"a-pry-select\"\n  [attr.aria-disabled]=\"disabled\"\n  #selectElement\n  [class.-focused]=\"focused\"\n  (click)=\"handleClick()\"\n  role=\"combobox\"\n  [attr.aria-expanded]=\"open\"\n  [attr.aria-owns]=\"open ? modalId : null\"\n  aria-haspopup=\"listbox\"\n  tabindex=\"0\"\n  cdkMonitorElementFocus\n  (cdkFocusChange)=\"onFocusChange($event)\"\n  (keydown)=\"onKeydownSelect($event)\"\n  >\n  <div class=\"a-pry-select__content\">\n    @if (autocomplete) {\n      <input\n        type=\"text\"\n        class=\"a-pry-select__search\"\n        [ngModel]=\"search$.getValue()\"\n        (ngModelChange)=\"search($event, true)\"\n        aria-autocomplete=\"list\"\n        [attr.aria-controls]=\"open ? modalId : null\"\n        [attr.aria-disabled]=\"disabled\"\n        [disabled]=\"disabled\"\n        (keydown)=\"onKeydownAutocompleteInput($event)\"\n        [placeholder]=\"placeholder ?? ''\"\n        (keydown.enter)=\"enterPressed($event)\"\n        #input\n        />\n    } @else if ((valueItems$ | async).length === 0) {\n      <span class=\"a-pry-select__placeholder\">{{ placeholder }}</span>\n      <div class=\"a-pry-select__filler\"></div>\n    } @else {\n      @for (item of valueItems$ | async; track !!item && !!item.id ? item.id : item) {\n        <div\n          class=\"a-pry-select__value\"\n          [class.pry-select-form]=\"isForm\"\n          [class.-multiple]=\"multiple\"\n          [ngClass]=\"item ? item[bindClasses ?? ''] ?? {} : {}\"\n          >\n          @if (template) {\n            <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item, clear }\"></ng-container>\n          } @else {\n            @if (bindIcon) {\n              <pry-icon\n                [iconSvg]=\"item[bindIcon]\"\n                [width]=\"iconSize[0]\"\n                [height]=\"iconSize[1]\"\n              ></pry-icon>\n            }\n            @if (bindLabel ? item?.[bindLabel] : item; as value) {\n              {{ (i18nPrefix ?? '') + value | i18n: { warn: false } }}\n              @if (multiple && clearable) {\n                <span\n                  class=\"a-pry-select__clear\"\n                  (click)=\"clear($event, item)\"\n                  aria-hidden=\"true\"\n                  >\u00D7</span\n                  >\n                }\n              }\n            }\n          </div>\n        }\n        <div class=\"a-pry-select__filler\"></div>\n      }\n    </div>\n    <div class=\"a-pry-select__actions\">\n      <div class=\"a-pry-select__actions__clear-button\">\n        @if (clearable && (search$ | async)) {\n          <span class=\"a-pry-select__clear\" (click)=\"clearAll($event)\" aria-hidden=\"true\">\u00D7</span>\n        }\n      </div>\n      <pry-icon\n        class=\"a-pry-select__toggle\"\n        [iconSvg]=\"open ? 'chevron_top' : 'chevron_bottom'\"\n        [width]=\"iconSize[0]\"\n        [height]=\"iconSize[1]\"\n      ></pry-icon>\n    </div>\n  </div>\n  <ng-template #optionsModal>\n    <div\n      role=\"listbox\"\n      [attr.aria-label]=\"'@pry.select.label' | i18n\"\n      [id]=\"modalId\"\n      [attr.aria-activedescendant]=\"'select-option-' + activeDescendant\"\n      [attr.aria-multiselectable]=\"multiple\"\n      [attr.required]=\"required\"\n      [attr.aria-readonly]=\"disabled\"\n      cdkTrapFocus=\"!autocomplete\"\n      [cdkTrapFocusAutoCapture]=\"!autocomplete\"\n      >\n      @if (loading) {\n        <div class=\"a-pry-select__options__option -hint\" [style.width.px]=\"modalWidth\">\n          <div class=\"no-widget no-widget__loader\">\n            <pry-page-loader></pry-page-loader>\n          </div>\n          <p>{{ '@pry.select.loading' | i18n }}...</p>\n        </div>\n      } @else {\n        @for (\n          item of matchingItems$ | async;\n          track !!item && !!item.id ? item.id : item;\n          let index = $index;\n          let first = $first;\n          let last = $last\n          ) {\n          <div\n            class=\"a-pry-select__options__option\"\n            [attr.aria-selected]=\"(valueItems$ | async).includes(item)\"\n            [attr.aria-checked]=\"(valueItems$ | async).includes(item)\"\n            [attr.aria-disabled]=\"disabled\"\n            (click)=\"select($event, item, index)\"\n            (keydown)=\"onKeydownOption($event, item, index, optionDivRef, first, last)\"\n            [style.width.px]=\"modalWidth\"\n            role=\"option\"\n            [id]=\"'select-option-' + index\"\n            tabindex=\"0\"\n            #optionDivRef\n            >\n            @if (template) {\n              <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item, clear }\"></ng-container>\n            } @else {\n              @if (multiple) {\n                <pry-checkbox\n                  (click)=\"$event.preventDefault()\"\n                  [ngModel]=\"(valueItems$ | async).includes(item)\"\n                ></pry-checkbox>\n              }\n              @if (bindIcon) {\n                <pry-icon [iconSvg]=\"item[bindIcon]\" [width]=\"iconSize[0]\" [height]=\"iconSize[1]\"></pry-icon>\n              }\n              @if (bindLabel ? item?.[bindLabel] : item; as value) {\n                {{ (i18nPrefix ? i18nPrefix : '') + value | i18n: { warn: false } }}\n              }\n            }\n          </div>\n          } @empty {\n          <div class=\"a-pry-select__options__option -hint\" [style.width.px]=\"modalWidth\">\n            <p>{{ '@pry.select.empty' | i18n }}</p>\n          </div>\n        }\n      }\n    </div>\n  </ng-template>\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i2$1.Overlay }, { type: i0.ViewContainerRef }, { type: SelectA11yService }], propDecorators: { items: [{
                 type: Input
             }], clearable: [{
                 type: Input
@@ -7805,13 +7819,13 @@ class PryRangeComponent {
         this.updateView();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryRangeComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: PryRangeComponent, selector: "pry-range", inputs: { min: "min", max: "max", step: "step", disabled: "disabled", labelTranslate: "labelTranslate" }, host: { listeners: { "window:resize": "ngDoCheck()" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: PryRangeComponent, selector: "pry-range", inputs: { min: "min", max: "max", step: "step", disabled: "disabled", labelTranslate: "labelTranslate" }, host: { listeners: { "window:resize": "ngDoCheck()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => PryRangeComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div class=\"m-form-label-field\">\n  <label class=\"a-label\" for=\"range-{{ id }}\" *ngIf=\"labelTranslate\">{{ labelTranslate | i18n }}</label>\n  <div class=\"a-range-slider-wrapper\">\n    <span aria-hidden=\"true\" class=\"a-range-slider__min\">{{ min }}</span>\n    <input\n      (input)=\"writeValueEvent($event)\"\n      [value]=\"value\"\n      class=\"a-range-slider\"\n      [min]=\"min\"\n      [max]=\"max\"\n      [step]=\"step\"\n      [disabled]=\"disabled\"\n      type=\"range\"\n      id=\"range-{{ id }}\"\n      [style.background-size]=\"info.backgroundSize + '% 100%'\"\n      #input\n    />\n    <output\n      aria-hidden=\"true\"\n      for=\"range-{{ id }}\"\n      class=\"a-range-slider__selected-value\"\n      [style.left.px]=\"info.left\"\n      >{{ info.text }}</output\n    >\n    <span aria-hidden=\"true\" class=\"a-range-slider__max\">{{ max }}</span>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
+        ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div class=\"m-form-label-field\">\n  @if (labelTranslate) {\n    <label class=\"a-label\" for=\"range-{{ id }}\">{{ labelTranslate | i18n }}</label>\n  }\n  <div class=\"a-range-slider-wrapper\">\n    <span aria-hidden=\"true\" class=\"a-range-slider__min\">{{ min }}</span>\n    <input\n      (input)=\"writeValueEvent($event)\"\n      [value]=\"value\"\n      class=\"a-range-slider\"\n      [min]=\"min\"\n      [max]=\"max\"\n      [step]=\"step\"\n      [disabled]=\"disabled\"\n      type=\"range\"\n      id=\"range-{{ id }}\"\n      [style.background-size]=\"info.backgroundSize + '% 100%'\"\n      #input\n      />\n    <output\n      aria-hidden=\"true\"\n      for=\"range-{{ id }}\"\n      class=\"a-range-slider__selected-value\"\n      [style.left.px]=\"info.left\"\n      >{{ info.text }}</output\n      >\n      <span aria-hidden=\"true\" class=\"a-range-slider__max\">{{ max }}</span>\n    </div>\n  </div>\n", dependencies: [{ kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryRangeComponent, decorators: [{
             type: Component,
@@ -7821,7 +7835,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                             useExisting: forwardRef(() => PryRangeComponent),
                             multi: true
                         }
-                    ], template: "<div class=\"m-form-label-field\">\n  <label class=\"a-label\" for=\"range-{{ id }}\" *ngIf=\"labelTranslate\">{{ labelTranslate | i18n }}</label>\n  <div class=\"a-range-slider-wrapper\">\n    <span aria-hidden=\"true\" class=\"a-range-slider__min\">{{ min }}</span>\n    <input\n      (input)=\"writeValueEvent($event)\"\n      [value]=\"value\"\n      class=\"a-range-slider\"\n      [min]=\"min\"\n      [max]=\"max\"\n      [step]=\"step\"\n      [disabled]=\"disabled\"\n      type=\"range\"\n      id=\"range-{{ id }}\"\n      [style.background-size]=\"info.backgroundSize + '% 100%'\"\n      #input\n    />\n    <output\n      aria-hidden=\"true\"\n      for=\"range-{{ id }}\"\n      class=\"a-range-slider__selected-value\"\n      [style.left.px]=\"info.left\"\n      >{{ info.text }}</output\n    >\n    <span aria-hidden=\"true\" class=\"a-range-slider__max\">{{ max }}</span>\n  </div>\n</div>\n" }]
+                    ], template: "<div class=\"m-form-label-field\">\n  @if (labelTranslate) {\n    <label class=\"a-label\" for=\"range-{{ id }}\">{{ labelTranslate | i18n }}</label>\n  }\n  <div class=\"a-range-slider-wrapper\">\n    <span aria-hidden=\"true\" class=\"a-range-slider__min\">{{ min }}</span>\n    <input\n      (input)=\"writeValueEvent($event)\"\n      [value]=\"value\"\n      class=\"a-range-slider\"\n      [min]=\"min\"\n      [max]=\"max\"\n      [step]=\"step\"\n      [disabled]=\"disabled\"\n      type=\"range\"\n      id=\"range-{{ id }}\"\n      [style.background-size]=\"info.backgroundSize + '% 100%'\"\n      #input\n      />\n    <output\n      aria-hidden=\"true\"\n      for=\"range-{{ id }}\"\n      class=\"a-range-slider__selected-value\"\n      [style.left.px]=\"info.left\"\n      >{{ info.text }}</output\n      >\n      <span aria-hidden=\"true\" class=\"a-range-slider__max\">{{ max }}</span>\n    </div>\n  </div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { min: [{
                 type: Input
             }], max: [{
@@ -7918,7 +7932,7 @@ class ChipsSelectorComponent extends SubscriptionnerDirective {
             : (this.usedItems$.getValue() ?? []).find((usedItem) => this.areItemsEqual(usedItem, item));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ChipsSelectorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: PryI18nService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: ChipsSelectorComponent, selector: "pry-chips-selector", inputs: { bindValue: "bindValue", bindLabel: "bindLabel", translationStringBase: "translationStringBase", itemTranslationStringBase: "itemTranslationStringBase", showActionButtons: "showActionButtons", showSearchbar: "showSearchbar", items: "items", usedItems: "usedItems" }, outputs: { itemsChanged: "itemsChanged" }, usesInheritance: true, ngImport: i0, template: "<div class=\"o-chips-selector\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"dialog_namedqueries\">\n  @if (showSearchbar) {\n    <div class=\"o-widget__search\">\n      <input\n        id=\"catalog-search\"\n        type=\"text\"\n        class=\"a-form-field\"\n        [placeholder]=\"'@pry.components.searchData' | i18n\"\n        [ngModel]=\"search$ | async\"\n        (ngModelChange)=\"search($event)\"\n      />\n      <pry-icon iconSvg=\"search\" [width]=\"17\" [height]=\"17\"></pry-icon>\n    </div>\n  }\n\n  <div class=\"o-chips-selector__items\">\n    @if (((usedItems$ | async) ?? []).length > 0) {\n      <div class=\"o-chips-selector__used-items\">\n        <h4 class=\"a-h4\">{{ translationStringBase + 'selection' | i18n }}</h4>\n        <ul class=\"o-chips-selector__list\">\n          @for (item of usedItems$ | async; track item) {\n            <li class=\"o-chips-selector__item\">\n              <button class=\"a-chip -md o-chips-selector__chip\" (click)=\"toggleItemSelection(item)\" type=\"button\">\n                <p>{{ getItemLabel(item) }}</p>\n                <pry-icon [iconSvg]=\"'close'\" [width]=\"17\" [height]=\"17\"></pry-icon>\n              </button>\n            </li>\n          }\n        </ul>\n      </div>\n    } @else {\n      <span class=\"-no-items\">{{ translationStringBase + 'noItemSelected' | i18n }}</span>\n    }\n\n    <div class=\"o-chips-selector__unused-items\">\n      <h4 class=\"a-h4\">{{ translationStringBase + 'select' | i18n }}</h4>\n      <ul class=\"o-chips-selector__list\">\n        @for (item of unusedItems$ | async; track item) {\n          <li class=\"o-chips-selector__item\">\n            <button class=\"a-chip a-chip--light -md o-chips-selector__chip\" (click)=\"toggleItemSelection(item)\">\n              <span class=\"u-visually-hidden\">{{ translationStringBase + 'selectItem' | i18n }}</span>\n              <p class=\"a-p\">{{ getItemLabel(item) }}</p>\n            </button>\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "directive", type: i3$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: ChipsSelectorComponent, selector: "pry-chips-selector", inputs: { bindValue: "bindValue", bindLabel: "bindLabel", translationStringBase: "translationStringBase", itemTranslationStringBase: "itemTranslationStringBase", showActionButtons: "showActionButtons", showSearchbar: "showSearchbar", items: "items", usedItems: "usedItems" }, outputs: { itemsChanged: "itemsChanged" }, usesInheritance: true, ngImport: i0, template: "<div class=\"o-chips-selector\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"dialog_namedqueries\">\n  @if (showSearchbar) {\n    <div class=\"o-widget__search\">\n      <input\n        id=\"catalog-search\"\n        type=\"text\"\n        class=\"a-form-field\"\n        [placeholder]=\"'@pry.components.searchData' | i18n\"\n        [ngModel]=\"search$ | async\"\n        (ngModelChange)=\"search($event)\"\n      />\n      <pry-icon iconSvg=\"search\" [width]=\"17\" [height]=\"17\"></pry-icon>\n    </div>\n  }\n\n  <div class=\"o-chips-selector__items\">\n    @if (((usedItems$ | async) ?? []).length > 0) {\n      <div class=\"o-chips-selector__used-items\">\n        <h4 class=\"a-h4\">{{ translationStringBase + 'selection' | i18n }}</h4>\n        <ul class=\"o-chips-selector__list\">\n          @for (item of usedItems$ | async; track item) {\n            <li class=\"o-chips-selector__item\">\n              <button class=\"a-chip -md o-chips-selector__chip\" (click)=\"toggleItemSelection(item)\" type=\"button\">\n                <p>{{ getItemLabel(item) }}</p>\n                <pry-icon [iconSvg]=\"'close'\" [width]=\"17\" [height]=\"17\"></pry-icon>\n              </button>\n            </li>\n          }\n        </ul>\n      </div>\n    } @else {\n      <span class=\"-no-items\">{{ translationStringBase + 'noItemSelected' | i18n }}</span>\n    }\n\n    <div class=\"o-chips-selector__unused-items\">\n      <h4 class=\"a-h4\">{{ translationStringBase + 'select' | i18n }}</h4>\n      <ul class=\"o-chips-selector__list\">\n        @for (item of unusedItems$ | async; track item) {\n          <li class=\"o-chips-selector__item\">\n            <button class=\"a-chip a-chip--light -md o-chips-selector__chip\" (click)=\"toggleItemSelection(item)\">\n              <span class=\"u-visually-hidden\">{{ translationStringBase + 'selectItem' | i18n }}</span>\n              <p class=\"a-p\">{{ getItemLabel(item) }}</p>\n            </button>\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "directive", type: i2$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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ChipsSelectorComponent, decorators: [{
             type: Component,
@@ -8040,7 +8054,7 @@ class PryGroupShareComponent extends SubscriptionnerDirective {
                 useExisting: forwardRef(() => PryGroupShareComponent),
                 multi: true
             }
-        ], usesInheritance: true, ngImport: i0, template: "@if (templateData$ | async; as data) {\n  <div class=\"m-form-radio-group\">\n    <div *ngFor=\"let shareMode of shareModes\" class=\"m-form-radio-group__item\">\n      <input\n        type=\"radio\"\n        name=\"visibility\"\n        [id]=\"'radio_share_' + shareMode\"\n        [value]=\"shareMode\"\n        [ngModel]=\"radioValue\"\n        (ngModelChange)=\"onRadioValueChange($event)\"\n        [disabled]=\"data.disableRadios[shareMode]\"\n      />\n      <label [for]=\"'radio_share_' + shareMode\" class=\"a-label\" [class.a-label--disabled]=\"data.disableRadios[shareMode]\">\n        {{ '@pry.share.radioLabel.' + shareMode | i18n }}\n      </label>\n    </div>\n  </div>\n  @if (radioValue === PryShareMode.GROUPS) {\n    <pry-chips-selector\n      bindLabel=\"name\"\n      bindValue=\"name\"\n      translationStringBase=\"@pry.components.chipsSelector.share.\"\n      itemTranslationStringBase=\"@pry.components.chipsSelector.share.groups.\"\n      [items]=\"data.groups\"\n      (itemsChanged)=\"changeGroups($event, 'groupSelectionChange')\"\n      [usedItems]=\"data.assignedGroups\"\n      [showSearchbar]=\"data.groups.length > 6\"\n    ></pry-chips-selector>\n  }\n}\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$3.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$3.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ChipsSelectorComponent, selector: "pry-chips-selector", inputs: ["bindValue", "bindLabel", "translationStringBase", "itemTranslationStringBase", "showActionButtons", "showSearchbar", "items", "usedItems"], outputs: ["itemsChanged"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesInheritance: true, ngImport: i0, template: "@if (templateData$ | async; as data) {\n  <div class=\"m-form-radio-group\">\n    @for (shareMode of shareModes; track shareMode) {\n      <div class=\"m-form-radio-group__item\">\n        <input\n          type=\"radio\"\n          name=\"visibility\"\n          [id]=\"'radio_share_' + shareMode\"\n          [value]=\"shareMode\"\n          [ngModel]=\"radioValue\"\n          (ngModelChange)=\"onRadioValueChange($event)\"\n          [disabled]=\"data.disableRadios[shareMode]\"\n          />\n        <label [for]=\"'radio_share_' + shareMode\" class=\"a-label\" [class.a-label--disabled]=\"data.disableRadios[shareMode]\">\n          {{ '@pry.share.radioLabel.' + shareMode | i18n }}\n        </label>\n      </div>\n    }\n  </div>\n  @if (radioValue === PryShareMode.GROUPS) {\n    <pry-chips-selector\n      bindLabel=\"name\"\n      bindValue=\"name\"\n      translationStringBase=\"@pry.components.chipsSelector.share.\"\n      itemTranslationStringBase=\"@pry.components.chipsSelector.share.groups.\"\n      [items]=\"data.groups\"\n      (itemsChanged)=\"changeGroups($event, 'groupSelectionChange')\"\n      [usedItems]=\"data.assignedGroups\"\n      [showSearchbar]=\"data.groups.length > 6\"\n    ></pry-chips-selector>\n  }\n}\n", dependencies: [{ kind: "directive", type: i2$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: i2$2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ChipsSelectorComponent, selector: "pry-chips-selector", inputs: ["bindValue", "bindLabel", "translationStringBase", "itemTranslationStringBase", "showActionButtons", "showSearchbar", "items", "usedItems"], outputs: ["itemsChanged"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryGroupShareComponent, decorators: [{
             type: Component,
@@ -8050,7 +8064,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                             useExisting: forwardRef(() => PryGroupShareComponent),
                             multi: true
                         }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (templateData$ | async; as data) {\n  <div class=\"m-form-radio-group\">\n    <div *ngFor=\"let shareMode of shareModes\" class=\"m-form-radio-group__item\">\n      <input\n        type=\"radio\"\n        name=\"visibility\"\n        [id]=\"'radio_share_' + shareMode\"\n        [value]=\"shareMode\"\n        [ngModel]=\"radioValue\"\n        (ngModelChange)=\"onRadioValueChange($event)\"\n        [disabled]=\"data.disableRadios[shareMode]\"\n      />\n      <label [for]=\"'radio_share_' + shareMode\" class=\"a-label\" [class.a-label--disabled]=\"data.disableRadios[shareMode]\">\n        {{ '@pry.share.radioLabel.' + shareMode | i18n }}\n      </label>\n    </div>\n  </div>\n  @if (radioValue === PryShareMode.GROUPS) {\n    <pry-chips-selector\n      bindLabel=\"name\"\n      bindValue=\"name\"\n      translationStringBase=\"@pry.components.chipsSelector.share.\"\n      itemTranslationStringBase=\"@pry.components.chipsSelector.share.groups.\"\n      [items]=\"data.groups\"\n      (itemsChanged)=\"changeGroups($event, 'groupSelectionChange')\"\n      [usedItems]=\"data.assignedGroups\"\n      [showSearchbar]=\"data.groups.length > 6\"\n    ></pry-chips-selector>\n  }\n}\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (templateData$ | async; as data) {\n  <div class=\"m-form-radio-group\">\n    @for (shareMode of shareModes; track shareMode) {\n      <div class=\"m-form-radio-group__item\">\n        <input\n          type=\"radio\"\n          name=\"visibility\"\n          [id]=\"'radio_share_' + shareMode\"\n          [value]=\"shareMode\"\n          [ngModel]=\"radioValue\"\n          (ngModelChange)=\"onRadioValueChange($event)\"\n          [disabled]=\"data.disableRadios[shareMode]\"\n          />\n        <label [for]=\"'radio_share_' + shareMode\" class=\"a-label\" [class.a-label--disabled]=\"data.disableRadios[shareMode]\">\n          {{ '@pry.share.radioLabel.' + shareMode | i18n }}\n        </label>\n      </div>\n    }\n  </div>\n  @if (radioValue === PryShareMode.GROUPS) {\n    <pry-chips-selector\n      bindLabel=\"name\"\n      bindValue=\"name\"\n      translationStringBase=\"@pry.components.chipsSelector.share.\"\n      itemTranslationStringBase=\"@pry.components.chipsSelector.share.groups.\"\n      [items]=\"data.groups\"\n      (itemsChanged)=\"changeGroups($event, 'groupSelectionChange')\"\n      [usedItems]=\"data.assignedGroups\"\n      [showSearchbar]=\"data.groups.length > 6\"\n    ></pry-chips-selector>\n  }\n}\n" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: i0.ChangeDetectorRef }], propDecorators: { disableRadios: [{
                 type: Input
             }], allowedGroups: [{
@@ -8193,7 +8207,7 @@ class PryShareComponent {
                 useExisting: forwardRef(() => PryShareComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<div class=\"m-form-label-field\">\n  <label class=\"a-label\" for=\"share_type\">{{ '@pry.share.type' | i18n }}</label>\n  <pry-select\n    (ngModelChange)=\"onChange($event)\"\n    [items]=\"visibilityTypes\"\n    [ngModel]=\"stringValue\"\n    [disabled]=\"_disabled\"\n    i18nPrefix=\"@pry.share.radioLabel.\"\n    bindValue=\"name\"\n    bindLabel=\"name\"\n    bindIcon=\"icon\"\n    id=\"share_type\"\n    [iconSize]=\"[21, 18]\"\n  ></pry-select>\n</div>\n", dependencies: [{ kind: "directive", type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<div class=\"m-form-label-field\">\n  <label class=\"a-label\" for=\"share_type\">{{ '@pry.share.type' | i18n }}</label>\n  <pry-select\n    (ngModelChange)=\"onChange($event)\"\n    [items]=\"visibilityTypes\"\n    [ngModel]=\"stringValue\"\n    [disabled]=\"_disabled\"\n    i18nPrefix=\"@pry.share.radioLabel.\"\n    bindValue=\"name\"\n    bindLabel=\"name\"\n    bindIcon=\"icon\"\n    id=\"share_type\"\n    [iconSize]=\"[21, 18]\"\n  ></pry-select>\n</div>\n", dependencies: [{ kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryShareComponent, decorators: [{
             type: Component,
@@ -8320,7 +8334,7 @@ class PryAccessRightsShareComponent extends SubscriptionnerDirective {
                 useExisting: forwardRef(() => PryAccessRightsShareComponent),
                 multi: true
             }
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"o-access-rights-share\">\n  <label for=\"share-group-select\" class=\"a-h4\">{{ '@pry.share.dashboardAccess' | i18n }}</label>\n  <form class=\"u-display-flex\">\n    <fieldset class=\"m-grouped-select u-display-flex\" name=\"add-access-rights\">\n      <legend class=\"u-visually-hidden\">{{ '@pry.share.shareAccessRights' | i18n }}</legend>\n      <pry-select\n        id=\"share-group-select\"\n        class=\"o-access-rights-share__group-select\"\n        name=\"share-group-select\"\n        [(ngModel)]=\"selectedGroups\"\n        (ngModelChange)=\"filterAvailableAccessRights()\"\n        [items]=\"groups$ | async\"\n        bindLabel=\"label\"\n        placeholder=\"{{ ((groups$ | async)?.length === 0 ? '@pry.share.noGroups' : '@pry.share.placeholder') | i18n }}\"\n        [multiple]=\"true\"\n        [closeOnSelect]=\"false\"\n      ></pry-select>\n      <pry-select\n        id=\"share-access-rights-select\"\n        class=\"o-access-rights-share__access-rights-select\"\n        name=\"share-access-rights-select\"\n        [(ngModel)]=\"selectedAccessRight\"\n        [items]=\"accessRights\"\n        bindValue=\"value\"\n        bindLabel=\"label\"\n      ></pry-select>\n    </fieldset>\n    <button type=\"button\" class=\"a-btn a-btn--primary\" (click)=\"addAccess()\" [disabled]=\"isAddingDisabled()\">\n      {{ '@pry.action.add' | i18n }}\n    </button>\n  </form>\n  <label for=\"share-access-rights-select\" class=\"a-label\">{{ '@pry.share.accessDescription' | i18n }}</label>\n  <div class=\"o-access-rights-share__groups\">\n    @if (manifestDescription?.owner) {\n      <div class=\"o-access-rights-share__group u-display-flex -justify-space-between -align-center\">\n        <span class=\"o-access-rights-share__group-name a-h4\">{{ '@pry.share.me' | i18n }}</span>\n        <span class=\"o-access-rights-share__owner\">{{ '@pry.share.owner' | i18n }}</span>\n      </div>\n    }\n    @for (group of value | keyvalue; track group.key) {\n      <div class=\"o-access-rights-share__group u-display-flex -justify-space-between -align-center\">\n        <label class=\"o-access-rights-share__group-name a-h4\" for=\"modify-{{ group.key }}-access-rights-select\">\n          {{ getGroupLabelByName(group.key, i18n) }}\n          {{\n            (userBelongsToGroup(group.key) | async) && group.key !== PUBLIC_GROUP\n              ? ' (' + ('@pry.share.me' | i18n) + ')'\n              : ''\n          }}\n        </label>\n        <div class=\"u-display-flex -align-center\">\n          @if (group.key === PUBLIC_GROUP || group.key === AUTHENTICATED_USERS_GROUP) {\n            <span class=\"o-access-rights-share__access-rights\">{{ '@pry.share.read' | i18n }}</span>\n          } @else {\n            <pry-select\n              id=\"modify-{{ group.key }}-access-rights-select\"\n              class=\"o-access-rights-share__modify-access-rights\"\n              name=\"modify-group-access-rights-select\"\n              [(ngModel)]=\"group.value\"\n              (ngModelChange)=\"modifyGroupAccess(group.key, group.value)\"\n              [items]=\"accessRights\"\n              bindValue=\"value\"\n              bindLabel=\"label\"\n            ></pry-select>\n          }\n          <button\n            type=\"button\"\n            class=\"a-btn a-btn--icon-only a-tooltip\"\n            [attr.data-tooltip]=\"'@pry.action.delete' | i18n\"\n            (click)=\"removeGroupAccess(group.key)\"\n            (keydown.enter)=\"removeGroupAccess(group.key)\"\n          >\n            <pry-icon iconSvg=\"close\" [height]=\"15\" [width]=\"15\"></pry-icon>\n          </button>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i3$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: I18nPipe, name: "i18n" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"o-access-rights-share\">\n  <label for=\"share-group-select\" class=\"a-h4\">{{ '@pry.share.dashboardAccess' | i18n }}</label>\n  <form class=\"u-display-flex\">\n    <fieldset class=\"m-grouped-select u-display-flex\" name=\"add-access-rights\">\n      <legend class=\"u-visually-hidden\">{{ '@pry.share.shareAccessRights' | i18n }}</legend>\n      <pry-select\n        id=\"share-group-select\"\n        class=\"o-access-rights-share__group-select\"\n        name=\"share-group-select\"\n        [(ngModel)]=\"selectedGroups\"\n        (ngModelChange)=\"filterAvailableAccessRights()\"\n        [items]=\"groups$ | async\"\n        bindLabel=\"label\"\n        placeholder=\"{{ ((groups$ | async)?.length === 0 ? '@pry.share.noGroups' : '@pry.share.placeholder') | i18n }}\"\n        [multiple]=\"true\"\n        [closeOnSelect]=\"false\"\n      ></pry-select>\n      <pry-select\n        id=\"share-access-rights-select\"\n        class=\"o-access-rights-share__access-rights-select\"\n        name=\"share-access-rights-select\"\n        [(ngModel)]=\"selectedAccessRight\"\n        [items]=\"accessRights\"\n        bindValue=\"value\"\n        bindLabel=\"label\"\n      ></pry-select>\n    </fieldset>\n    <button type=\"button\" class=\"a-btn a-btn--primary\" (click)=\"addAccess()\" [disabled]=\"isAddingDisabled()\">\n      {{ '@pry.action.add' | i18n }}\n    </button>\n  </form>\n  <label for=\"share-access-rights-select\" class=\"a-label\">{{ '@pry.share.accessDescription' | i18n }}</label>\n  <div class=\"o-access-rights-share__groups\">\n    @if (manifestDescription?.owner) {\n      <div class=\"o-access-rights-share__group u-display-flex -justify-space-between -align-center\">\n        <span class=\"o-access-rights-share__group-name a-h4\">{{ '@pry.share.me' | i18n }}</span>\n        <span class=\"o-access-rights-share__owner\">{{ '@pry.share.owner' | i18n }}</span>\n      </div>\n    }\n    @for (group of value | keyvalue; track group.key) {\n      <div class=\"o-access-rights-share__group u-display-flex -justify-space-between -align-center\">\n        <label class=\"o-access-rights-share__group-name a-h4\" for=\"modify-{{ group.key }}-access-rights-select\">\n          {{ getGroupLabelByName(group.key, i18n) }}\n          {{\n            (userBelongsToGroup(group.key) | async) && group.key !== PUBLIC_GROUP\n              ? ' (' + ('@pry.share.me' | i18n) + ')'\n              : ''\n          }}\n        </label>\n        <div class=\"u-display-flex -align-center\">\n          @if (group.key === PUBLIC_GROUP || group.key === AUTHENTICATED_USERS_GROUP) {\n            <span class=\"o-access-rights-share__access-rights\">{{ '@pry.share.read' | i18n }}</span>\n          } @else {\n            <pry-select\n              id=\"modify-{{ group.key }}-access-rights-select\"\n              class=\"o-access-rights-share__modify-access-rights\"\n              name=\"modify-group-access-rights-select\"\n              [(ngModel)]=\"group.value\"\n              (ngModelChange)=\"modifyGroupAccess(group.key, group.value)\"\n              [items]=\"accessRights\"\n              bindValue=\"value\"\n              bindLabel=\"label\"\n            ></pry-select>\n          }\n          <button\n            type=\"button\"\n            class=\"a-btn a-btn--icon-only a-tooltip\"\n            [attr.data-tooltip]=\"'@pry.action.delete' | i18n\"\n            (click)=\"removeGroupAccess(group.key)\"\n            (keydown.enter)=\"removeGroupAccess(group.key)\"\n          >\n            <pry-icon iconSvg=\"close\" [height]=\"15\" [width]=\"15\"></pry-icon>\n          </button>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: I18nPipe, name: "i18n" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryAccessRightsShareComponent, decorators: [{
             type: Component,
@@ -8402,7 +8416,7 @@ class PryAccessRightsShareModalComponent {
         this.submit.nativeElement.focus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryAccessRightsShareModalComponent, deps: [{ token: i1.Store }, { token: PryDialogRef }, { token: PRY_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: PryAccessRightsShareModalComponent, selector: "pry-access-rights-share-modal", viewQueries: [{ propertyName: "confirm", first: true, predicate: ["confirm"], descendants: true }, { propertyName: "submit", first: true, predicate: ["submit"], descendants: true }, { propertyName: "cross", first: true, predicate: ["cross"], descendants: true }, { propertyName: "crossVisibility", first: true, predicate: ["crossVisibility"], descendants: true }], ngImport: i0, template: "<div class=\"o-modal\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"dialog share access rights\">\n  <div class=\"o-modal__top\">\n    <div class=\"o-modal__top__title\">\n      <h2 class=\"a-h2\" id=\"dialog_title\">{{ '@pry.toolbox.shareAccessRights' | i18n }}</h2>\n    </div>\n    <div class=\"o-modal__top__close\">\n      <button\n        class=\"a-btn a-btn--icon-only\"\n        (click)=\"toggleModal()\"\n        #crossVisibility\n        (keydown.shift.tab)=\"focusValidation()\"\n      >\n        <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n        <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n      </button>\n    </div>\n  </div>\n  <pry-access-rights-share\n    [(ngModel)]=\"accessRightsByGroup\"\n    (ngModelChange)=\"updateAccessRights($event)\"\n    [manifestDescription]=\"manifest\"\n    [allowedGroups]=\"allowedShareGroups$ | async\"\n  ></pry-access-rights-share>\n  <div class=\"u-display-flex m-btn-group -justify-center\">\n    <button type=\"button\" class=\"a-btn a-btn--secondary\" (click)=\"toggleModal()\">\n      {{ '@pry.toolbox.manifest.close' | i18n }}\n    </button>\n    <button\n      type=\"submit\"\n      class=\"a-btn a-btn--primary\"\n      #submit\n      (keydown.tab)=\"focusCrossElement()\"\n      (click)=\"validate()\"\n      [disabled]=\"this.disableShareButton$ | async\"\n    >\n      {{ '@pry.toolbox.manifest.validate' | i18n }}\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.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: "component", type: PryAccessRightsShareComponent, selector: "pry-access-rights-share", inputs: ["manifestDescription", "allowedGroups"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: PryAccessRightsShareModalComponent, selector: "pry-access-rights-share-modal", viewQueries: [{ propertyName: "confirm", first: true, predicate: ["confirm"], descendants: true }, { propertyName: "submit", first: true, predicate: ["submit"], descendants: true }, { propertyName: "cross", first: true, predicate: ["cross"], descendants: true }, { propertyName: "crossVisibility", first: true, predicate: ["crossVisibility"], descendants: true }], ngImport: i0, template: "<div class=\"o-modal\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"dialog share access rights\">\n  <div class=\"o-modal__top\">\n    <div class=\"o-modal__top__title\">\n      <h2 class=\"a-h2\" id=\"dialog_title\">{{ '@pry.toolbox.shareAccessRights' | i18n }}</h2>\n    </div>\n    <div class=\"o-modal__top__close\">\n      <button\n        class=\"a-btn a-btn--icon-only\"\n        (click)=\"toggleModal()\"\n        #crossVisibility\n        (keydown.shift.tab)=\"focusValidation()\"\n      >\n        <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n        <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n      </button>\n    </div>\n  </div>\n  <pry-access-rights-share\n    [(ngModel)]=\"accessRightsByGroup\"\n    (ngModelChange)=\"updateAccessRights($event)\"\n    [manifestDescription]=\"manifest\"\n    [allowedGroups]=\"allowedShareGroups$ | async\"\n  ></pry-access-rights-share>\n  <div class=\"u-display-flex m-btn-group -justify-center\">\n    <button type=\"button\" class=\"a-btn a-btn--secondary\" (click)=\"toggleModal()\">\n      {{ '@pry.toolbox.manifest.close' | i18n }}\n    </button>\n    <button\n      type=\"submit\"\n      class=\"a-btn a-btn--primary\"\n      #submit\n      (keydown.tab)=\"focusCrossElement()\"\n      (click)=\"validate()\"\n      [disabled]=\"this.disableShareButton$ | async\"\n    >\n      {{ '@pry.toolbox.manifest.validate' | i18n }}\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.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: "component", type: PryAccessRightsShareComponent, selector: "pry-access-rights-share", inputs: ["manifestDescription", "allowedGroups"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryAccessRightsShareModalComponent, decorators: [{
             type: Component,
@@ -8670,7 +8684,7 @@ const arrayOf = (item, num) => {
     return [...new Array(num)].map(() => item);
 };
 const createPlacedWidgetCopy = (widget, position) => {
-    const tmp = JSON.parse(JSON.stringify(widget));
+    const tmp = structuredClone(widget);
     if (!tmp.layout) {
         tmp.layout = {};
     }
@@ -9189,13 +9203,13 @@ class PryObjectEditionComponent extends SubscriptionnerDirective {
     toggleInversion() {
         this.inversion = !this.inversion;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryObjectEditionComponent, deps: [{ token: i2.Overlay }, { token: i0.ViewContainerRef }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: PryObjectEditionComponent, selector: "pry-object-creation", inputs: { link: "link", object: "object", menu: "menu" }, outputs: { closed: "closed" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: "<button type=\"button\" class=\"a-btn -link-like\" (click)=\"openCreateObjectPanel($event)\" *ngIf=\"menu\">\n  {{ '@pry.context.createObject.title.' + (link && object ? 'linkedObject' : link ? 'link' : 'object') | i18n }}\n</button>\n<button\n  id=\"object_creator_link\"\n  type=\"button\"\n  (click)=\"openCreateObjectPanel($event)\"\n  *ngIf=\"!menu\"\n  class=\"a-btn a-btn--secondary -circle u-floating u-floating--bottom-right\"\n  [title]=\"'@pry.context.createObject.title.object' | i18n\"\n>\n  <span class=\"u-visually-hidden\">{{ '@pry.context.createObject.title.object' | i18n }}</span>\n  <pry-icon iconSvg=\"add_column\" [width]=\"24\" [height]=\"24\" aria-hidden=\"true\"></pry-icon>\n</button>\n\n<ng-template #template>\n  <div class=\"o-settings__popup\">\n    <div class=\"o-settings__popup__content\">\n      <ng-container *ngIf=\"link\">\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label\" for=\"createobject_link\">{{ '@pry.context.createObject.title.link' | i18n }}</label>\n          <pry-select\n            [(ngModel)]=\"relation.typeId\"\n            [items]=\"relations$ | async\"\n            bindLabel=\"label\"\n            bindValue=\"id\"\n            id=\"createobject_link\"\n          ></pry-select>\n        </div>\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label\" for=\"createobject_inversion\">{{\n            '@pry.context.createObject.title.inversion' | i18n\n          }}</label>\n          <pry-checkbox\n            id=\"createobject_inversion\"\n            [ngModel]=\"inversion\"\n            (ngModelChange)=\"toggleInversion()\"\n          ></pry-checkbox>\n        </div>\n      </ng-container>\n\n      <div class=\"o-object-panel\" *ngIf=\"object\">\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label\" for=\"createobject_class\">{{ '@pry.context.createObject.class' | i18n }}</label>\n          <pry-select\n            [ngModel]=\"tmpObject.oClass\"\n            (ngModelChange)=\"changeClass($event)\"\n            [items]=\"classes\"\n            bindValue=\"id\"\n            bindLabel=\"name\"\n            id=\"createobject_class\"\n          ></pry-select>\n        </div>\n\n        <ng-container *ngFor=\"let attribute of attributes\" [class.multi-value]=\"attribute.multiValued\">\n          <div class=\"m-form-label-field\">\n            <label class=\"a-label\">{{ attribute.name }}</label>\n            <ng-container *ngIf=\"!attribute.multiValued\">\n              <ng-container [ngSwitch]=\"fieldType(attribute)\">\n                <ng-container *ngSwitchCase=\"FieldType.INSTANT\">\n                  <div class=\"a-date-input\" tabindex=\"-1\" (blur)=\"closeDatePicker($event)\">\n                    <input\n                      type=\"datetime-local\"\n                      class=\"a-form-field\"\n                      [ngModel]=\"value(attribute)\"\n                      (ngModelChange)=\"assignValue(attribute, $event)\"\n                    />\n                    <div class=\"a-open-date-picker\" (mousedown)=\"toggleDatePicker($event, attribute.id)\"></div>\n                    <div class=\"date-picker-container\" *ngIf=\"selectedDatePicker === attribute.id\">\n                      <pry-date-picker\n                        [ngModel]=\"value(attribute)\"\n                        (ngModelChange)=\"assignValue(attribute, $event)\"\n                        [roundSelection]=\"true\"\n                        [timePicker]=\"true\"\n                      ></pry-date-picker>\n                    </div>\n                  </div>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"FieldType.DECIMAL\">\n                  <input\n                    type=\"number\"\n                    step=\"any\"\n                    class=\"a-form-field\"\n                    [ngModel]=\"value(attribute)\"\n                    (ngModelChange)=\"assignValue(attribute, $event)\"\n                  />\n                </ng-container>\n                <ng-container *ngSwitchCase=\"FieldType.INTEGER\">\n                  <input\n                    type=\"number\"\n                    class=\"a-form-field\"\n                    [ngModel]=\"value(attribute)\"\n                    (ngModelChange)=\"assignValue(attribute, $event)\"\n                  />\n                </ng-container>\n                <ng-container *ngSwitchDefault>\n                  <input\n                    type=\"text\"\n                    class=\"a-form-field\"\n                    [ngModel]=\"value(attribute)\"\n                    (ngModelChange)=\"assignValue(attribute, $event)\"\n                  />\n                </ng-container>\n                <ng-container *ngSwitchCase=\"FieldType.RAW\">\n                  <pry-select\n                    [ngModel]=\"method\"\n                    (ngModelChange)=\"setRawMethod(attribute, $event)\"\n                    [items]=\"rawMethods\"\n                    bindValue=\"id\"\n                    bindLabel=\"name\"\n                  ></pry-select>\n                  <input\n                    type=\"text\"\n                    class=\"a-form-field\"\n                    *ngIf=\"method === HTTP_ORIGIN_METHOD\"\n                    [ngModel]=\"valueMetadata(attribute, HTTP_ORIGIN_METADATA)\"\n                    (ngModelChange)=\"assignMetadata(attribute, $event, HTTP_ORIGIN_METADATA)\"\n                  />\n                  <ng-container *ngIf=\"method === UPLOAD_METHOD\">\n                    <pry-upload\n                      mode=\"doc\"\n                      accept=\"image/*,video/*\"\n                      (uploaded)=\"assignValue(attribute, $event)\"\n                    ></pry-upload>\n                  </ng-container>\n                </ng-container>\n              </ng-container>\n            </ng-container>\n          </div>\n\n          <div class=\"multi-value-container\" *ngIf=\"attribute.multiValued\">\n            <button\n              class=\"button-add a-btn a-btn--secondary a-btn--icon-text -size-sm\"\n              (click)=\"addMultiValued(attribute)\"\n            >\n              <pry-icon iconSvg=\"add\"></pry-icon>\n              <span>{{ '@pry.context.createObject.addMultiField' | i18n : { name: attribute.name } }}</span>\n            </button>\n            <div class=\"multi-value\" *ngFor=\"let multiValue of multiValues(attribute); let i = index\">\n              <ng-container [ngSwitch]=\"fieldType(attribute)\">\n                <ng-container *ngSwitchCase=\"FieldType.INSTANT\">\n                  <input\n                    type=\"datetime-local\"\n                    [ngModel]=\"valueMulti(attribute, i)\"\n                    (focusout)=\"assignValueMulti(attribute, $event, i)\"\n                  />\n                </ng-container>\n                <ng-container *ngSwitchCase=\"FieldType.DECIMAL\">\n                  <input\n                    type=\"number\"\n                    step=\"any\"\n                    [ngModel]=\"valueMulti(attribute, i)\"\n                    (ngModelChange)=\"assignValueMulti(attribute, $event, i)\"\n                  />\n                </ng-container>\n                <ng-container *ngSwitchCase=\"FieldType.INTEGER\">\n                  <input\n                    type=\"number\"\n                    [ngModel]=\"valueMulti(attribute, i)\"\n                    (ngModelChange)=\"assignValueMulti(attribute, $event, i)\"\n                  />\n                </ng-container>\n                <ng-container *ngSwitchDefault>\n                  <input\n                    type=\"text\"\n                    [ngModel]=\"valueMulti(attribute, i)\"\n                    (ngModelChange)=\"assignValueMulti(attribute, $event, i)\"\n                  />\n                </ng-container>\n                <button (click)=\"removeMultiValued(attribute, i)\">\n                  <pry-icon iconSvg=\"delete\"></pry-icon>\n                </button>\n              </ng-container>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n    <div class=\"m-btn-group\">\n      <button type=\"button\" class=\"a-btn a-btn--secondary\" (click)=\"hide()\">\n        {{ '@pry.context.cancel' | i18n }}\n      </button>\n      <button type=\"button\" class=\"a-btn a-btn--primary\" (click)=\"createObjects()\" [disabled]=\"!valid\">\n        {{ '@pry.context.create' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i3$3.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$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: PryUploadComponent, selector: "pry-upload", inputs: ["mode", "accept", "labelTranslate"], outputs: ["uploaded", "uploadedFile"] }, { kind: "component", type: i7.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle", "name", "inputId", "inhibit"] }, { kind: "component", type: PryDatePickerComponent, selector: "pry-date-picker", inputs: ["rangePicker", "timePicker", "maxYear", "minYear", "roundSelection"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryObjectEditionComponent, deps: [{ token: i2$1.Overlay }, { token: i0.ViewContainerRef }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: PryObjectEditionComponent, selector: "pry-object-creation", inputs: { link: "link", object: "object", menu: "menu" }, outputs: { closed: "closed" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: "<button type=\"button\" class=\"a-btn -link-like\" (click)=\"openCreateObjectPanel($event)\" *ngIf=\"menu\">\n  {{ '@pry.context.createObject.title.' + (link && object ? 'linkedObject' : link ? 'link' : 'object') | i18n }}\n</button>\n<button\n  id=\"object_creator_link\"\n  type=\"button\"\n  (click)=\"openCreateObjectPanel($event)\"\n  *ngIf=\"!menu\"\n  class=\"a-btn a-btn--secondary -circle u-floating u-floating--bottom-right\"\n  [title]=\"'@pry.context.createObject.title.object' | i18n\"\n>\n  <span class=\"u-visually-hidden\">{{ '@pry.context.createObject.title.object' | i18n }}</span>\n  <pry-icon iconSvg=\"add_column\" [width]=\"24\" [height]=\"24\" aria-hidden=\"true\"></pry-icon>\n</button>\n\n<ng-template #template>\n  <div class=\"o-settings__popup\">\n    <div class=\"o-settings__popup__content\">\n      <ng-container *ngIf=\"link\">\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label\" for=\"createobject_link\">{{ '@pry.context.createObject.title.link' | i18n }}</label>\n          <pry-select\n            [(ngModel)]=\"relation.typeId\"\n            [items]=\"relations$ | async\"\n            bindLabel=\"label\"\n            bindValue=\"id\"\n            id=\"createobject_link\"\n          ></pry-select>\n        </div>\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label\" for=\"createobject_inversion\">{{\n            '@pry.context.createObject.title.inversion' | i18n\n          }}</label>\n          <pry-checkbox\n            id=\"createobject_inversion\"\n            [ngModel]=\"inversion\"\n            (ngModelChange)=\"toggleInversion()\"\n          ></pry-checkbox>\n        </div>\n      </ng-container>\n\n      <div class=\"o-object-panel\" *ngIf=\"object\">\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label\" for=\"createobject_class\">{{ '@pry.context.createObject.class' | i18n }}</label>\n          <pry-select\n            [ngModel]=\"tmpObject.oClass\"\n            (ngModelChange)=\"changeClass($event)\"\n            [items]=\"classes\"\n            bindValue=\"id\"\n            bindLabel=\"name\"\n            id=\"createobject_class\"\n          ></pry-select>\n        </div>\n\n        <ng-container *ngFor=\"let attribute of attributes\" [class.multi-value]=\"attribute.multiValued\">\n          <div class=\"m-form-label-field\">\n            <label class=\"a-label\">{{ attribute.name }}</label>\n            <ng-container *ngIf=\"!attribute.multiValued\">\n              <ng-container [ngSwitch]=\"fieldType(attribute)\">\n                <ng-container *ngSwitchCase=\"FieldType.INSTANT\">\n                  <div class=\"a-date-input\" tabindex=\"-1\" (blur)=\"closeDatePicker($event)\">\n                    <input\n                      type=\"datetime-local\"\n                      class=\"a-form-field\"\n                      [ngModel]=\"value(attribute)\"\n                      (ngModelChange)=\"assignValue(attribute, $event)\"\n                    />\n                    <div class=\"a-open-date-picker\" (mousedown)=\"toggleDatePicker($event, attribute.id)\"></div>\n                    <div class=\"date-picker-container\" *ngIf=\"selectedDatePicker === attribute.id\">\n                      <pry-date-picker\n                        [ngModel]=\"value(attribute)\"\n                        (ngModelChange)=\"assignValue(attribute, $event)\"\n                        [roundSelection]=\"true\"\n                        [timePicker]=\"true\"\n                      ></pry-date-picker>\n                    </div>\n                  </div>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"FieldType.DECIMAL\">\n                  <input\n                    type=\"number\"\n                    step=\"any\"\n                    class=\"a-form-field\"\n                    [ngModel]=\"value(attribute)\"\n                    (ngModelChange)=\"assignValue(attribute, $event)\"\n                  />\n                </ng-container>\n                <ng-container *ngSwitchCase=\"FieldType.INTEGER\">\n                  <input\n                    type=\"number\"\n                    class=\"a-form-field\"\n                    [ngModel]=\"value(attribute)\"\n                    (ngModelChange)=\"assignValue(attribute, $event)\"\n                  />\n                </ng-container>\n                <ng-container *ngSwitchDefault>\n                  <input\n                    type=\"text\"\n                    class=\"a-form-field\"\n                    [ngModel]=\"value(attribute)\"\n                    (ngModelChange)=\"assignValue(attribute, $event)\"\n                  />\n                </ng-container>\n                <ng-container *ngSwitchCase=\"FieldType.RAW\">\n                  <pry-select\n                    [ngModel]=\"method\"\n                    (ngModelChange)=\"setRawMethod(attribute, $event)\"\n                    [items]=\"rawMethods\"\n                    bindValue=\"id\"\n                    bindLabel=\"name\"\n                  ></pry-select>\n                  <input\n                    type=\"text\"\n                    class=\"a-form-field\"\n                    *ngIf=\"method === HTTP_ORIGIN_METHOD\"\n                    [ngModel]=\"valueMetadata(attribute, HTTP_ORIGIN_METADATA)\"\n                    (ngModelChange)=\"assignMetadata(attribute, $event, HTTP_ORIGIN_METADATA)\"\n                  />\n                  <ng-container *ngIf=\"method === UPLOAD_METHOD\">\n                    <pry-upload\n                      mode=\"doc\"\n                      accept=\"image/*,video/*\"\n                      (uploaded)=\"assignValue(attribute, $event)\"\n                    ></pry-upload>\n                  </ng-container>\n                </ng-container>\n              </ng-container>\n            </ng-container>\n          </div>\n\n          <div class=\"multi-value-container\" *ngIf=\"attribute.multiValued\">\n            <button\n              class=\"button-add a-btn a-btn--secondary a-btn--icon-text -size-sm\"\n              (click)=\"addMultiValued(attribute)\"\n            >\n              <pry-icon iconSvg=\"add\"></pry-icon>\n              <span>{{ '@pry.context.createObject.addMultiField' | i18n : { name: attribute.name } }}</span>\n            </button>\n            <div class=\"multi-value\" *ngFor=\"let multiValue of multiValues(attribute); let i = index\">\n              <ng-container [ngSwitch]=\"fieldType(attribute)\">\n                <ng-container *ngSwitchCase=\"FieldType.INSTANT\">\n                  <input\n                    type=\"datetime-local\"\n                    [ngModel]=\"valueMulti(attribute, i)\"\n                    (focusout)=\"assignValueMulti(attribute, $event, i)\"\n                  />\n                </ng-container>\n                <ng-container *ngSwitchCase=\"FieldType.DECIMAL\">\n                  <input\n                    type=\"number\"\n                    step=\"any\"\n                    [ngModel]=\"valueMulti(attribute, i)\"\n                    (ngModelChange)=\"assignValueMulti(attribute, $event, i)\"\n                  />\n                </ng-container>\n                <ng-container *ngSwitchCase=\"FieldType.INTEGER\">\n                  <input\n                    type=\"number\"\n                    [ngModel]=\"valueMulti(attribute, i)\"\n                    (ngModelChange)=\"assignValueMulti(attribute, $event, i)\"\n                  />\n                </ng-container>\n                <ng-container *ngSwitchDefault>\n                  <input\n                    type=\"text\"\n                    [ngModel]=\"valueMulti(attribute, i)\"\n                    (ngModelChange)=\"assignValueMulti(attribute, $event, i)\"\n                  />\n                </ng-container>\n                <button (click)=\"removeMultiValued(attribute, i)\">\n                  <pry-icon iconSvg=\"delete\"></pry-icon>\n                </button>\n              </ng-container>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n    <div class=\"m-btn-group\">\n      <button type=\"button\" class=\"a-btn a-btn--secondary\" (click)=\"hide()\">\n        {{ '@pry.context.cancel' | i18n }}\n      </button>\n      <button type=\"button\" class=\"a-btn a-btn--primary\" (click)=\"createObjects()\" [disabled]=\"!valid\">\n        {{ '@pry.context.create' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$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: i2$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: PryUploadComponent, selector: "pry-upload", inputs: ["mode", "accept", "labelTranslate"], outputs: ["uploaded", "uploadedFile"] }, { kind: "component", type: i7.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle", "name", "inputId", "inhibit"] }, { kind: "component", type: PryDatePickerComponent, selector: "pry-date-picker", inputs: ["rangePicker", "timePicker", "maxYear", "minYear", "roundSelection"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryObjectEditionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pry-object-creation', template: "<button type=\"button\" class=\"a-btn -link-like\" (click)=\"openCreateObjectPanel($event)\" *ngIf=\"menu\">\n  {{ '@pry.context.createObject.title.' + (link && object ? 'linkedObject' : link ? 'link' : 'object') | i18n }}\n</button>\n<button\n  id=\"object_creator_link\"\n  type=\"button\"\n  (click)=\"openCreateObjectPanel($event)\"\n  *ngIf=\"!menu\"\n  class=\"a-btn a-btn--secondary -circle u-floating u-floating--bottom-right\"\n  [title]=\"'@pry.context.createObject.title.object' | i18n\"\n>\n  <span class=\"u-visually-hidden\">{{ '@pry.context.createObject.title.object' | i18n }}</span>\n  <pry-icon iconSvg=\"add_column\" [width]=\"24\" [height]=\"24\" aria-hidden=\"true\"></pry-icon>\n</button>\n\n<ng-template #template>\n  <div class=\"o-settings__popup\">\n    <div class=\"o-settings__popup__content\">\n      <ng-container *ngIf=\"link\">\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label\" for=\"createobject_link\">{{ '@pry.context.createObject.title.link' | i18n }}</label>\n          <pry-select\n            [(ngModel)]=\"relation.typeId\"\n            [items]=\"relations$ | async\"\n            bindLabel=\"label\"\n            bindValue=\"id\"\n            id=\"createobject_link\"\n          ></pry-select>\n        </div>\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label\" for=\"createobject_inversion\">{{\n            '@pry.context.createObject.title.inversion' | i18n\n          }}</label>\n          <pry-checkbox\n            id=\"createobject_inversion\"\n            [ngModel]=\"inversion\"\n            (ngModelChange)=\"toggleInversion()\"\n          ></pry-checkbox>\n        </div>\n      </ng-container>\n\n      <div class=\"o-object-panel\" *ngIf=\"object\">\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label\" for=\"createobject_class\">{{ '@pry.context.createObject.class' | i18n }}</label>\n          <pry-select\n            [ngModel]=\"tmpObject.oClass\"\n            (ngModelChange)=\"changeClass($event)\"\n            [items]=\"classes\"\n            bindValue=\"id\"\n            bindLabel=\"name\"\n            id=\"createobject_class\"\n          ></pry-select>\n        </div>\n\n        <ng-container *ngFor=\"let attribute of attributes\" [class.multi-value]=\"attribute.multiValued\">\n          <div class=\"m-form-label-field\">\n            <label class=\"a-label\">{{ attribute.name }}</label>\n            <ng-container *ngIf=\"!attribute.multiValued\">\n              <ng-container [ngSwitch]=\"fieldType(attribute)\">\n                <ng-container *ngSwitchCase=\"FieldType.INSTANT\">\n                  <div class=\"a-date-input\" tabindex=\"-1\" (blur)=\"closeDatePicker($event)\">\n                    <input\n                      type=\"datetime-local\"\n                      class=\"a-form-field\"\n                      [ngModel]=\"value(attribute)\"\n                      (ngModelChange)=\"assignValue(attribute, $event)\"\n                    />\n                    <div class=\"a-open-date-picker\" (mousedown)=\"toggleDatePicker($event, attribute.id)\"></div>\n                    <div class=\"date-picker-container\" *ngIf=\"selectedDatePicker === attribute.id\">\n                      <pry-date-picker\n                        [ngModel]=\"value(attribute)\"\n                        (ngModelChange)=\"assignValue(attribute, $event)\"\n                        [roundSelection]=\"true\"\n                        [timePicker]=\"true\"\n                      ></pry-date-picker>\n                    </div>\n                  </div>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"FieldType.DECIMAL\">\n                  <input\n                    type=\"number\"\n                    step=\"any\"\n                    class=\"a-form-field\"\n                    [ngModel]=\"value(attribute)\"\n                    (ngModelChange)=\"assignValue(attribute, $event)\"\n                  />\n                </ng-container>\n                <ng-container *ngSwitchCase=\"FieldType.INTEGER\">\n                  <input\n                    type=\"number\"\n                    class=\"a-form-field\"\n                    [ngModel]=\"value(attribute)\"\n                    (ngModelChange)=\"assignValue(attribute, $event)\"\n                  />\n                </ng-container>\n                <ng-container *ngSwitchDefault>\n                  <input\n                    type=\"text\"\n                    class=\"a-form-field\"\n                    [ngModel]=\"value(attribute)\"\n                    (ngModelChange)=\"assignValue(attribute, $event)\"\n                  />\n                </ng-container>\n                <ng-container *ngSwitchCase=\"FieldType.RAW\">\n                  <pry-select\n                    [ngModel]=\"method\"\n                    (ngModelChange)=\"setRawMethod(attribute, $event)\"\n                    [items]=\"rawMethods\"\n                    bindValue=\"id\"\n                    bindLabel=\"name\"\n                  ></pry-select>\n                  <input\n                    type=\"text\"\n                    class=\"a-form-field\"\n                    *ngIf=\"method === HTTP_ORIGIN_METHOD\"\n                    [ngModel]=\"valueMetadata(attribute, HTTP_ORIGIN_METADATA)\"\n                    (ngModelChange)=\"assignMetadata(attribute, $event, HTTP_ORIGIN_METADATA)\"\n                  />\n                  <ng-container *ngIf=\"method === UPLOAD_METHOD\">\n                    <pry-upload\n                      mode=\"doc\"\n                      accept=\"image/*,video/*\"\n                      (uploaded)=\"assignValue(attribute, $event)\"\n                    ></pry-upload>\n                  </ng-container>\n                </ng-container>\n              </ng-container>\n            </ng-container>\n          </div>\n\n          <div class=\"multi-value-container\" *ngIf=\"attribute.multiValued\">\n            <button\n              class=\"button-add a-btn a-btn--secondary a-btn--icon-text -size-sm\"\n              (click)=\"addMultiValued(attribute)\"\n            >\n              <pry-icon iconSvg=\"add\"></pry-icon>\n              <span>{{ '@pry.context.createObject.addMultiField' | i18n : { name: attribute.name } }}</span>\n            </button>\n            <div class=\"multi-value\" *ngFor=\"let multiValue of multiValues(attribute); let i = index\">\n              <ng-container [ngSwitch]=\"fieldType(attribute)\">\n                <ng-container *ngSwitchCase=\"FieldType.INSTANT\">\n                  <input\n                    type=\"datetime-local\"\n                    [ngModel]=\"valueMulti(attribute, i)\"\n                    (focusout)=\"assignValueMulti(attribute, $event, i)\"\n                  />\n                </ng-container>\n                <ng-container *ngSwitchCase=\"FieldType.DECIMAL\">\n                  <input\n                    type=\"number\"\n                    step=\"any\"\n                    [ngModel]=\"valueMulti(attribute, i)\"\n                    (ngModelChange)=\"assignValueMulti(attribute, $event, i)\"\n                  />\n                </ng-container>\n                <ng-container *ngSwitchCase=\"FieldType.INTEGER\">\n                  <input\n                    type=\"number\"\n                    [ngModel]=\"valueMulti(attribute, i)\"\n                    (ngModelChange)=\"assignValueMulti(attribute, $event, i)\"\n                  />\n                </ng-container>\n                <ng-container *ngSwitchDefault>\n                  <input\n                    type=\"text\"\n                    [ngModel]=\"valueMulti(attribute, i)\"\n                    (ngModelChange)=\"assignValueMulti(attribute, $event, i)\"\n                  />\n                </ng-container>\n                <button (click)=\"removeMultiValued(attribute, i)\">\n                  <pry-icon iconSvg=\"delete\"></pry-icon>\n                </button>\n              </ng-container>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n    <div class=\"m-btn-group\">\n      <button type=\"button\" class=\"a-btn a-btn--secondary\" (click)=\"hide()\">\n        {{ '@pry.context.cancel' | i18n }}\n      </button>\n      <button type=\"button\" class=\"a-btn a-btn--primary\" (click)=\"createObjects()\" [disabled]=\"!valid\">\n        {{ '@pry.context.create' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: i2.Overlay }, { type: i0.ViewContainerRef }, { type: i1.Store }], propDecorators: { link: [{
+        }], ctorParameters: () => [{ type: i2$1.Overlay }, { type: i0.ViewContainerRef }, { type: i1.Store }], propDecorators: { link: [{
                 type: Input
             }], object: [{
                 type: Input
@@ -9306,13 +9320,13 @@ class ContextMenuComponent extends SubscriptionnerDirective {
         this.overlayDetailRef?.dispose();
         this.store.dispatch(ConfigActions.closeOverlay({ id: this.constructor.name + '-detail' }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ContextMenuComponent, deps: [{ token: i1.Store }, { token: i2.Overlay }, { token: i0.ViewContainerRef }, { token: WidgetFactoryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: ContextMenuComponent, selector: "pry-context-menu", viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, read: TemplateRef }, { propertyName: "detailTemplate", first: true, predicate: ["detailTemplate"], descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <ul class=\"m-context-menu__list\">\n    <ng-container *ngIf=\"!!itemId\">\n      <li class=\"m-context-menu__list__item\">\n        <button type=\"button\" class=\"a-btn -link-like\" (click)=\"selectionAddOrRemove()\">\n          {{ ((isSelected$ | async) ? '@pry.context.remove' : '@pry.context.add') | i18n }}\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\">\n        <button type=\"button\" class=\"a-btn -link-like\" (click)=\"selectionInvert()\">\n          {{ '@pry.context.invert' | i18n }}\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" *ngIf=\"!!resultSet\">\n        <button type=\"button\" class=\"a-btn -link-like\" (click)=\"proximity()\" *ngIf=\"!!resultSet\">\n          {{ '@pry.context.proximity' | i18n }}\n        </button>\n      </li>\n      <ng-container *ngIf=\"isModuleLoaded['graph']\">\n        <li class=\"m-context-menu__list__item\">\n          <button type=\"button\" class=\"a-btn -link-like\" (click)=\"explore()\">\n            {{ '@pry.context.explore' | i18n }}\n          </button>\n        </li>\n      </ng-container>\n      <ng-container *ngIf=\"isModuleLoaded['detail']\">\n        <li class=\"m-context-menu__list__item\">\n          <button type=\"button\" class=\"a-btn -link-like\" (click)=\"detail()\">\n            {{ '@pry.context.detail' | i18n }}\n          </button>\n        </li>\n        <li class=\"m-context-menu__list__item\">\n          <button type=\"button\" class=\"a-btn -link-like\" (click)=\"flyingDetail()\">\n            {{ '@pry.context.flyingDetail' | i18n }}\n          </button>\n        </li>\n      </ng-container>\n      <ng-container *pryAccess=\"{ module: 'dashboard', page: 'dashboard', action: 'edit_object' }\">\n        <li class=\"m-context-menu__list__item\">\n          <pry-object-creation\n            (closed)=\"hide()\"\n            [link]=\"true\"\n            [object]=\"false\"\n            [menu]=\"true\"\n            *ngIf=\"(selectedItemsIds?.length ?? 0) > 0\"\n          ></pry-object-creation>\n          <ng-container *ngIf=\"allowObjectCreation$ | async\">\n            <pry-object-creation (closed)=\"hide()\" [link]=\"true\" [object]=\"true\" [menu]=\"true\"></pry-object-creation>\n          </ng-container>\n        </li>\n      </ng-container>\n    </ng-container>\n    <ng-container *pryAccess=\"{ module: 'dashboard', page: 'dashboard', action: 'edit_object' }\">\n      <li *ngIf=\"allowObjectCreation$| async\" class=\"m-context-menu__list__item\">\n        <pry-object-creation (closed)=\"hide()\" [object]=\"true\" [menu]=\"true\"></pry-object-creation>\n      </li>\n    </ng-container>\n  </ul>\n</ng-template>\n<ng-template #detailTemplate>\n  <div class=\"o-settings__popup__header\">\n    <h2 class=\"a-h2\">{{ '@pry.context.flyingDetail' | i18n }}</h2>\n    <button type=\"button\" (click)=\"hideDetail()\" class=\"a-btn a-btn--icon-only -close\">\n      <pry-icon iconSvg=\"close\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.action.close' | i18n }}</span>\n    </button>\n  </div>\n  <div class=\"o-settings__popup__content\">\n    <pry-widget-instanciator [staticManifest]=\"detailManifest\"></pry-widget-instanciator>\n  </div>\n  <div class=\"o-settings__popup__footer\">\n    <button (click)=\"hideDetail()\" class=\"a-btn a-btn--primary\">\n      {{ '@pry.action.close' | i18n }}\n    </button>\n  </div>\n</ng-template>\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: PryAccessDirective, selector: "[pryAccess]", inputs: ["pryAccess"] }, { kind: "component", type: WidgetInstanciatorComponent, selector: "pry-widget-instanciator", inputs: ["widgetIndex", "staticManifest", "standalone", "open$"], outputs: ["manifestModified"] }, { kind: "component", type: PryObjectEditionComponent, selector: "pry-object-creation", inputs: ["link", "object", "menu"], outputs: ["closed"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ContextMenuComponent, deps: [{ token: i1.Store }, { token: i2$1.Overlay }, { token: i0.ViewContainerRef }, { token: WidgetFactoryService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: ContextMenuComponent, selector: "pry-context-menu", viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, read: TemplateRef }, { propertyName: "detailTemplate", first: true, predicate: ["detailTemplate"], descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <ul class=\"m-context-menu__list\">\n    @if (!!itemId) {\n      <li class=\"m-context-menu__list__item\">\n        <button type=\"button\" class=\"a-btn -link-like\" (click)=\"selectionAddOrRemove()\">\n          {{ ((isSelected$ | async) ? '@pry.context.remove' : '@pry.context.add') | i18n }}\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\">\n        <button type=\"button\" class=\"a-btn -link-like\" (click)=\"selectionInvert()\">\n          {{ '@pry.context.invert' | i18n }}\n        </button>\n      </li>\n      @if (!!resultSet) {\n        <li class=\"m-context-menu__list__item\">\n          @if (!!resultSet) {\n            <button type=\"button\" class=\"a-btn -link-like\" (click)=\"proximity()\">\n              {{ '@pry.context.proximity' | i18n }}\n            </button>\n          }\n        </li>\n      }\n      @if (isModuleLoaded['graph']) {\n        <li class=\"m-context-menu__list__item\">\n          <button type=\"button\" class=\"a-btn -link-like\" (click)=\"explore()\">\n            {{ '@pry.context.explore' | i18n }}\n          </button>\n        </li>\n      }\n      @if (isModuleLoaded['detail']) {\n        <li class=\"m-context-menu__list__item\">\n          <button type=\"button\" class=\"a-btn -link-like\" (click)=\"detail()\">\n            {{ '@pry.context.detail' | i18n }}\n          </button>\n        </li>\n        <li class=\"m-context-menu__list__item\">\n          <button type=\"button\" class=\"a-btn -link-like\" (click)=\"flyingDetail()\">\n            {{ '@pry.context.flyingDetail' | i18n }}\n          </button>\n        </li>\n      }\n      <ng-container *pryAccess=\"{ module: 'dashboard', page: 'dashboard', action: 'edit_object' }\">\n        <li class=\"m-context-menu__list__item\">\n          @if ((selectedItemsIds?.length ?? 0) > 0) {\n            <pry-object-creation\n              (closed)=\"hide()\"\n              [link]=\"true\"\n              [object]=\"false\"\n              [menu]=\"true\"\n            ></pry-object-creation>\n          }\n          @if (allowObjectCreation$ | async) {\n            <pry-object-creation (closed)=\"hide()\" [link]=\"true\" [object]=\"true\" [menu]=\"true\"></pry-object-creation>\n          }\n        </li>\n      </ng-container>\n    }\n    <ng-container *pryAccess=\"{ module: 'dashboard', page: 'dashboard', action: 'edit_object' }\">\n      @if (allowObjectCreation$| async) {\n        <li class=\"m-context-menu__list__item\">\n          <pry-object-creation (closed)=\"hide()\" [object]=\"true\" [menu]=\"true\"></pry-object-creation>\n        </li>\n      }\n    </ng-container>\n  </ul>\n</ng-template>\n<ng-template #detailTemplate>\n  <div class=\"o-settings__popup__header\">\n    <h2 class=\"a-h2\">{{ '@pry.context.flyingDetail' | i18n }}</h2>\n    <button type=\"button\" (click)=\"hideDetail()\" class=\"a-btn a-btn--icon-only -close\">\n      <pry-icon iconSvg=\"close\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.action.close' | i18n }}</span>\n    </button>\n  </div>\n  <div class=\"o-settings__popup__content\">\n    <pry-widget-instanciator [staticManifest]=\"detailManifest\"></pry-widget-instanciator>\n  </div>\n  <div class=\"o-settings__popup__footer\">\n    <button (click)=\"hideDetail()\" class=\"a-btn a-btn--primary\">\n      {{ '@pry.action.close' | i18n }}\n    </button>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "directive", type: PryAccessDirective, selector: "[pryAccess]", inputs: ["pryAccess"] }, { kind: "component", type: WidgetInstanciatorComponent, selector: "pry-widget-instanciator", inputs: ["widgetIndex", "staticManifest", "standalone", "open$"], outputs: ["manifestModified"] }, { kind: "component", type: PryObjectEditionComponent, selector: "pry-object-creation", inputs: ["link", "object", "menu"], outputs: ["closed"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ContextMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-context-menu', template: "<ng-template #template>\n  <ul class=\"m-context-menu__list\">\n    <ng-container *ngIf=\"!!itemId\">\n      <li class=\"m-context-menu__list__item\">\n        <button type=\"button\" class=\"a-btn -link-like\" (click)=\"selectionAddOrRemove()\">\n          {{ ((isSelected$ | async) ? '@pry.context.remove' : '@pry.context.add') | i18n }}\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\">\n        <button type=\"button\" class=\"a-btn -link-like\" (click)=\"selectionInvert()\">\n          {{ '@pry.context.invert' | i18n }}\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" *ngIf=\"!!resultSet\">\n        <button type=\"button\" class=\"a-btn -link-like\" (click)=\"proximity()\" *ngIf=\"!!resultSet\">\n          {{ '@pry.context.proximity' | i18n }}\n        </button>\n      </li>\n      <ng-container *ngIf=\"isModuleLoaded['graph']\">\n        <li class=\"m-context-menu__list__item\">\n          <button type=\"button\" class=\"a-btn -link-like\" (click)=\"explore()\">\n            {{ '@pry.context.explore' | i18n }}\n          </button>\n        </li>\n      </ng-container>\n      <ng-container *ngIf=\"isModuleLoaded['detail']\">\n        <li class=\"m-context-menu__list__item\">\n          <button type=\"button\" class=\"a-btn -link-like\" (click)=\"detail()\">\n            {{ '@pry.context.detail' | i18n }}\n          </button>\n        </li>\n        <li class=\"m-context-menu__list__item\">\n          <button type=\"button\" class=\"a-btn -link-like\" (click)=\"flyingDetail()\">\n            {{ '@pry.context.flyingDetail' | i18n }}\n          </button>\n        </li>\n      </ng-container>\n      <ng-container *pryAccess=\"{ module: 'dashboard', page: 'dashboard', action: 'edit_object' }\">\n        <li class=\"m-context-menu__list__item\">\n          <pry-object-creation\n            (closed)=\"hide()\"\n            [link]=\"true\"\n            [object]=\"false\"\n            [menu]=\"true\"\n            *ngIf=\"(selectedItemsIds?.length ?? 0) > 0\"\n          ></pry-object-creation>\n          <ng-container *ngIf=\"allowObjectCreation$ | async\">\n            <pry-object-creation (closed)=\"hide()\" [link]=\"true\" [object]=\"true\" [menu]=\"true\"></pry-object-creation>\n          </ng-container>\n        </li>\n      </ng-container>\n    </ng-container>\n    <ng-container *pryAccess=\"{ module: 'dashboard', page: 'dashboard', action: 'edit_object' }\">\n      <li *ngIf=\"allowObjectCreation$| async\" class=\"m-context-menu__list__item\">\n        <pry-object-creation (closed)=\"hide()\" [object]=\"true\" [menu]=\"true\"></pry-object-creation>\n      </li>\n    </ng-container>\n  </ul>\n</ng-template>\n<ng-template #detailTemplate>\n  <div class=\"o-settings__popup__header\">\n    <h2 class=\"a-h2\">{{ '@pry.context.flyingDetail' | i18n }}</h2>\n    <button type=\"button\" (click)=\"hideDetail()\" class=\"a-btn a-btn--icon-only -close\">\n      <pry-icon iconSvg=\"close\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.action.close' | i18n }}</span>\n    </button>\n  </div>\n  <div class=\"o-settings__popup__content\">\n    <pry-widget-instanciator [staticManifest]=\"detailManifest\"></pry-widget-instanciator>\n  </div>\n  <div class=\"o-settings__popup__footer\">\n    <button (click)=\"hideDetail()\" class=\"a-btn a-btn--primary\">\n      {{ '@pry.action.close' | i18n }}\n    </button>\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Overlay }, { type: i0.ViewContainerRef }, { type: WidgetFactoryService }], propDecorators: { template: [{
+            args: [{ selector: 'pry-context-menu', template: "<ng-template #template>\n  <ul class=\"m-context-menu__list\">\n    @if (!!itemId) {\n      <li class=\"m-context-menu__list__item\">\n        <button type=\"button\" class=\"a-btn -link-like\" (click)=\"selectionAddOrRemove()\">\n          {{ ((isSelected$ | async) ? '@pry.context.remove' : '@pry.context.add') | i18n }}\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\">\n        <button type=\"button\" class=\"a-btn -link-like\" (click)=\"selectionInvert()\">\n          {{ '@pry.context.invert' | i18n }}\n        </button>\n      </li>\n      @if (!!resultSet) {\n        <li class=\"m-context-menu__list__item\">\n          @if (!!resultSet) {\n            <button type=\"button\" class=\"a-btn -link-like\" (click)=\"proximity()\">\n              {{ '@pry.context.proximity' | i18n }}\n            </button>\n          }\n        </li>\n      }\n      @if (isModuleLoaded['graph']) {\n        <li class=\"m-context-menu__list__item\">\n          <button type=\"button\" class=\"a-btn -link-like\" (click)=\"explore()\">\n            {{ '@pry.context.explore' | i18n }}\n          </button>\n        </li>\n      }\n      @if (isModuleLoaded['detail']) {\n        <li class=\"m-context-menu__list__item\">\n          <button type=\"button\" class=\"a-btn -link-like\" (click)=\"detail()\">\n            {{ '@pry.context.detail' | i18n }}\n          </button>\n        </li>\n        <li class=\"m-context-menu__list__item\">\n          <button type=\"button\" class=\"a-btn -link-like\" (click)=\"flyingDetail()\">\n            {{ '@pry.context.flyingDetail' | i18n }}\n          </button>\n        </li>\n      }\n      <ng-container *pryAccess=\"{ module: 'dashboard', page: 'dashboard', action: 'edit_object' }\">\n        <li class=\"m-context-menu__list__item\">\n          @if ((selectedItemsIds?.length ?? 0) > 0) {\n            <pry-object-creation\n              (closed)=\"hide()\"\n              [link]=\"true\"\n              [object]=\"false\"\n              [menu]=\"true\"\n            ></pry-object-creation>\n          }\n          @if (allowObjectCreation$ | async) {\n            <pry-object-creation (closed)=\"hide()\" [link]=\"true\" [object]=\"true\" [menu]=\"true\"></pry-object-creation>\n          }\n        </li>\n      </ng-container>\n    }\n    <ng-container *pryAccess=\"{ module: 'dashboard', page: 'dashboard', action: 'edit_object' }\">\n      @if (allowObjectCreation$| async) {\n        <li class=\"m-context-menu__list__item\">\n          <pry-object-creation (closed)=\"hide()\" [object]=\"true\" [menu]=\"true\"></pry-object-creation>\n        </li>\n      }\n    </ng-container>\n  </ul>\n</ng-template>\n<ng-template #detailTemplate>\n  <div class=\"o-settings__popup__header\">\n    <h2 class=\"a-h2\">{{ '@pry.context.flyingDetail' | i18n }}</h2>\n    <button type=\"button\" (click)=\"hideDetail()\" class=\"a-btn a-btn--icon-only -close\">\n      <pry-icon iconSvg=\"close\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.action.close' | i18n }}</span>\n    </button>\n  </div>\n  <div class=\"o-settings__popup__content\">\n    <pry-widget-instanciator [staticManifest]=\"detailManifest\"></pry-widget-instanciator>\n  </div>\n  <div class=\"o-settings__popup__footer\">\n    <button (click)=\"hideDetail()\" class=\"a-btn a-btn--primary\">\n      {{ '@pry.action.close' | i18n }}\n    </button>\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: i1.Store }, { type: i2$1.Overlay }, { type: i0.ViewContainerRef }, { type: WidgetFactoryService }], propDecorators: { template: [{
                 type: ViewChild,
                 args: ['template', { read: TemplateRef }]
             }], detailTemplate: [{
@@ -9389,7 +9403,7 @@ class DashboardComponent extends SubscriptionnerDirective {
         this.targetIndexes$ = this.store.select(DashboardSelectors.targetTenantsIndexes);
         this.subscriptions.add(this.store.select(DashboardSelectors.dashboardCellParams).subscribe((params) => (this.dashboardParams = params)));
         this.windowManifest$ = this.store.select(DashboardSelectors.windowManifest).pipe(combineLatestWith(this.staticDashboard$), switchMap(([windowManifest, staticDashboard]) => (!staticDashboard ? of(windowManifest) : of(staticDashboard))), map$1((_wManifest) => {
-            const wManifest = JSON.parse(JSON.stringify(_wManifest));
+            const wManifest = structuredClone(_wManifest);
             if (wManifest.grid?.layout && wManifest.grid.layout !== DashboardGridLayout.MANUAL) {
                 // Complete with placeholders
                 const size = WidgetPlacementUtils.getLayout(wManifest.grid.layout)?.places.length ?? 0;
@@ -9579,7 +9593,7 @@ class DashboardComponent extends SubscriptionnerDirective {
     prepareModification($event, indexManifest) {
         this.move.initialX = $event.clientX;
         this.move.initialY = $event.clientY;
-        this.initialWidgetManifestList = JSON.parse(JSON.stringify((this.manifest || { widgets: [] }).widgets));
+        this.initialWidgetManifestList = structuredClone((this.manifest || { widgets: [] }).widgets);
         this.currentlyModifiedManifest = this.initialWidgetManifestList.splice(indexManifest, 1)[0];
         // console.log('prepare', this.currentlyModifiedManifest, this.initialWidgetManifestList);
     }
@@ -9627,7 +9641,7 @@ class DashboardComponent extends SubscriptionnerDirective {
                     type: 'placeholder',
                     layout: { x: target?.x ?? 0, y: target?.y ?? 0, width: 1, height: 1 }
                 };
-                this.initialWidgetManifestList = JSON.parse(JSON.stringify((this.manifest || { widgets: [] }).widgets));
+                this.initialWidgetManifestList = structuredClone((this.manifest || { widgets: [] }).widgets);
                 // console.log('create placeholder', this.currentlyModifiedManifest, this.initialWidgetManifestList);
                 // We passed widget size as a mimetype so that we can still read it without security issues
                 const widgetSizeMimeType = types.find((type) => type.includes(MIME_TYPE_WIDGET_SIZE));
@@ -9682,7 +9696,7 @@ class DashboardComponent extends SubscriptionnerDirective {
             const target = this.getTarget($event, optimize);
             if (target !== null) {
                 this.checkForDragEnter($event);
-                const candidateWidget = JSON.parse(JSON.stringify(this.currentlyModifiedManifest));
+                const candidateWidget = structuredClone(this.currentlyModifiedManifest);
                 switch (this.actionType) {
                     case 'resize-nw':
                         if (candidateWidget.layout.x + target.x > 0 && candidateWidget.layout.height - target.y > 0) {
@@ -9863,13 +9877,13 @@ class DashboardComponent extends SubscriptionnerDirective {
             }
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DashboardComponent, deps: [{ token: i1.Store }, { token: i2.Overlay }, { token: i0.ViewContainerRef }, { token: WidgetFactoryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: DashboardComponent, selector: "pry-dashboard", inputs: { staticDashboard: "staticDashboard", forceModeEdition: "forceModeEdition", CloseOnDragOut: "CloseOnDragOut", displayOptions: "displayOptions", noBackground: "noBackground", breakpoint: "breakpoint" }, outputs: { rowHeight: "rowHeight", rows: "rows" }, viewQueries: [{ propertyName: "templateModal", first: true, predicate: ["templateModal"], descendants: true, read: TemplateRef }, { propertyName: "gridRef", first: true, predicate: ["grid"], descendants: true }, { propertyName: "instanciators", predicate: WidgetInstanciatorComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"o-dashboard-edit\" [class.-edit]=\"modeEdition$ | async\">\n  <div class=\"o-dashboard-add -rows\">\n    <button (click)=\"changeSize('rows', -1)\">\n      <pry-icon iconSvg=\"remove\" [width]=\"12\" [height]=\"12\"></pry-icon>\n    </button>\n    <button (click)=\"changeSize('rows', +1)\">\n      <pry-icon iconSvg=\"add\" [width]=\"12\" [height]=\"12\"></pry-icon>\n    </button>\n    <p>{{ '@pry.grid.rows' | i18n }}</p>\n  </div>\n  <div class=\"o-dashboard-add -cols\">\n    <p>{{ '@pry.grid.columns' | i18n }}</p>\n    <button (click)=\"changeSize('columns', -1)\">\n      <pry-icon iconSvg=\"remove\" [width]=\"12\" [height]=\"12\"></pry-icon>\n    </button>\n    <button (click)=\"changeSize('columns', +1)\">\n      <pry-icon iconSvg=\"add\" [width]=\"12\" [height]=\"12\"></pry-icon>\n    </button>\n  </div>\n  <div\n    class=\"o-dashboard-grid\"\n    [style.gridTemplateColumns]=\"gridTemplateColumns$ | async\"\n    [style.gridTemplateRows]=\"gridTemplateRows$ | async\"\n    [style.gridGap]=\"dashboardParams.gridGap + 'px'\"\n    #grid\n    (mousemove)=\"movingMouse($event)\"\n    (drop)=\"dropping($event)\"\n    (dragover)=\"dragMove($event)\"\n    (dragleave)=\"dragLeave($event)\"\n    (dragenter)=\"dragEnter($event)\"\n  >\n    <ng-container\n      *ngFor=\"\n        let widgetManifest of (windowManifest$ | async)?.widgets || [];\n        let widgetIndex = index;\n        trackBy: trackWidgets\n      \"\n    >\n      <div\n        class=\"o-dashboard-widget\"\n        [class.-edited]=\"modeEdition\"\n        [style.gridColumn]=\"gridColumn(widgetManifest.layout)\"\n        [style.gridRow]=\"gridRow(widgetManifest.layout)\"\n        (drop)=\"droppingInWidget($event, widgetIndex)\"\n      >\n        <ng-container *ngIf=\"modeEdition\">\n          <div class=\"resize nw-resize\" (mousedown)=\"startResize($event, widgetIndex, 'resize-nw')\">\n            <pry-icon iconSvg=\"north_west\" [animation]=\"false\"></pry-icon>\n          </div>\n          <div class=\"resize sw-resize\" (mousedown)=\"startResize($event, widgetIndex, 'resize-sw')\">\n            <pry-icon iconSvg=\"south_west\" [animation]=\"false\"></pry-icon>\n          </div>\n          <div class=\"resize ne-resize\" (mousedown)=\"startResize($event, widgetIndex, 'resize-ne')\">\n            <pry-icon iconSvg=\"north_east\" [animation]=\"false\"></pry-icon>\n          </div>\n          <div class=\"resize se-resize\" (mousedown)=\"startResize($event, widgetIndex, 'resize-se')\">\n            <pry-icon iconSvg=\"south_east\" [animation]=\"false\"></pry-icon>\n          </div>\n          <div class=\"resize delete\" (mousedown)=\"toggleRemoveConfirm($event, widgetIndex)\">\n            <pry-icon iconSvg=\"close\" [animation]=\"false\"></pry-icon>\n          </div>\n          <div class=\"move\" draggable=\"true\" (dragstart)=\"dragStart($event, widgetIndex)\">\n            <div class=\"move-inside move-{{ widgetManifest.type }}\">\n              <span>{{ widgetManifest.title ?? ('@pry.toolbox.' + widgetManifest.type | i18n) }}</span>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngIf=\"!modeEdition\">\n          <pry-widget-instanciator\n            [staticManifest]=\"widgetManifest\"\n            [widgetIndex]=\"widgetIndex\"\n          ></pry-widget-instanciator>\n        </ng-container>\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!noBackground\">\n      <ng-container\n        *ngIf=\"{\n          noWidgets: (nonFillerWidgets$ | async) === 0,\n          globalLoading: loading$ | async,\n          fetchLoading: (dataFetching$ | async)?.length ?? 1 > 0\n        } as data\"\n      >\n        <ng-container *ngIf=\"data.noWidgets\">\n          <div\n            *ngIf=\"data.globalLoading; else notLoading\"\n            class=\"no-widget\"\n            [style.grid-area]=\"backgroundArea$ | async\"\n          >\n            <pry-page-loader></pry-page-loader>\n            <span class=\"no-widget__text\">{{ '@pry.widget.target.loading' | i18n }}...</span>\n          </div>\n          <ng-template #notLoading>\n            <div class=\"no-widget\" [style.grid-area]=\"backgroundArea$ | async\">\n              <img\n                class=\"no-widget__search\"\n                src=\"../../../assets/svgs/pry_recherche.svg\"\n                alt=\"{{\n                  (layout === DashboardGridLayout.MANUAL\n                    ? '@pry.widget.target.none_manual'\n                    : '@pry.widget.target.none_auto'\n                  ) | i18n\n                }}\"\n              />\n              <span class=\"no-widget__text\">{{\n                (layout === DashboardGridLayout.MANUAL\n                  ? '@pry.widget.target.none_manual'\n                  : '@pry.widget.target.none_auto'\n                ) | i18n\n              }}</span>\n            </div>\n          </ng-template>\n        </ng-container>\n        <div\n          class=\"a-page-loader backdrop\"\n          [style.display]=\"data.fetchLoading && !data.globalLoading ? 'flex' : 'none'\"\n          [style.width.px]=\"params.gridWidth\"\n          [style.height.px]=\"params.gridHeight\"\n        >\n          <pry-page-loader></pry-page-loader>\n          <p>{{ '@pry.widget.target.loading' | i18n }}...</p>\n        </div>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>\n<pry-context-menu></pry-context-menu>\n\n<ng-template #templateModal>\n  <div class=\"o-modal\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ '@pry.widget.modalTitle' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"cancelRemoveConfirm()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <div class=\"m-btn-group\">\n      <button type=\"button\" (click)=\"cancelRemoveConfirm()\" class=\"a-btn a-btn--secondary\">\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n      <button type=\"submit\" (click)=\"confirmRemove()\" class=\"a-btn a-btn--primary\">\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "component", type: i8.PryPageLoaderComponent, selector: "pry-page-loader", inputs: ["image", "imageAltText"] }, { kind: "component", type: WidgetInstanciatorComponent, selector: "pry-widget-instanciator", inputs: ["widgetIndex", "staticManifest", "standalone", "open$"], outputs: ["manifestModified"] }, { kind: "component", type: ContextMenuComponent, selector: "pry-context-menu" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DashboardComponent, deps: [{ token: i1.Store }, { token: i2$1.Overlay }, { token: i0.ViewContainerRef }, { token: WidgetFactoryService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: DashboardComponent, selector: "pry-dashboard", inputs: { staticDashboard: "staticDashboard", forceModeEdition: "forceModeEdition", CloseOnDragOut: "CloseOnDragOut", displayOptions: "displayOptions", noBackground: "noBackground", breakpoint: "breakpoint" }, outputs: { rowHeight: "rowHeight", rows: "rows" }, viewQueries: [{ propertyName: "templateModal", first: true, predicate: ["templateModal"], descendants: true, read: TemplateRef }, { propertyName: "gridRef", first: true, predicate: ["grid"], descendants: true }, { propertyName: "instanciators", predicate: WidgetInstanciatorComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"o-dashboard-edit\" [class.-edit]=\"modeEdition$ | async\">\n  <div class=\"o-dashboard-add -rows\">\n    <button (click)=\"changeSize('rows', -1)\">\n      <pry-icon iconSvg=\"remove\" [width]=\"12\" [height]=\"12\"></pry-icon>\n    </button>\n    <button (click)=\"changeSize('rows', +1)\">\n      <pry-icon iconSvg=\"add\" [width]=\"12\" [height]=\"12\"></pry-icon>\n    </button>\n    <p>{{ '@pry.grid.rows' | i18n }}</p>\n  </div>\n  <div class=\"o-dashboard-add -cols\">\n    <p>{{ '@pry.grid.columns' | i18n }}</p>\n    <button (click)=\"changeSize('columns', -1)\">\n      <pry-icon iconSvg=\"remove\" [width]=\"12\" [height]=\"12\"></pry-icon>\n    </button>\n    <button (click)=\"changeSize('columns', +1)\">\n      <pry-icon iconSvg=\"add\" [width]=\"12\" [height]=\"12\"></pry-icon>\n    </button>\n  </div>\n  <div\n    class=\"o-dashboard-grid\"\n    [style.gridTemplateColumns]=\"gridTemplateColumns$ | async\"\n    [style.gridTemplateRows]=\"gridTemplateRows$ | async\"\n    [style.gridGap]=\"dashboardParams.gridGap + 'px'\"\n    #grid\n    (mousemove)=\"movingMouse($event)\"\n    (drop)=\"dropping($event)\"\n    (dragover)=\"dragMove($event)\"\n    (dragleave)=\"dragLeave($event)\"\n    (dragenter)=\"dragEnter($event)\"\n    >\n    @for (\n      widgetManifest of (windowManifest$ | async)?.widgets || []; track trackWidgets(widgetIndex,\n      widgetManifest); let widgetIndex = $index) {\n      <div\n        class=\"o-dashboard-widget\"\n        [class.-edited]=\"modeEdition\"\n        [style.gridColumn]=\"gridColumn(widgetManifest.layout)\"\n        [style.gridRow]=\"gridRow(widgetManifest.layout)\"\n        (drop)=\"droppingInWidget($event, widgetIndex)\"\n        >\n        @if (modeEdition) {\n          <div class=\"resize nw-resize\" (mousedown)=\"startResize($event, widgetIndex, 'resize-nw')\">\n            <pry-icon iconSvg=\"north_west\" [animation]=\"false\"></pry-icon>\n          </div>\n          <div class=\"resize sw-resize\" (mousedown)=\"startResize($event, widgetIndex, 'resize-sw')\">\n            <pry-icon iconSvg=\"south_west\" [animation]=\"false\"></pry-icon>\n          </div>\n          <div class=\"resize ne-resize\" (mousedown)=\"startResize($event, widgetIndex, 'resize-ne')\">\n            <pry-icon iconSvg=\"north_east\" [animation]=\"false\"></pry-icon>\n          </div>\n          <div class=\"resize se-resize\" (mousedown)=\"startResize($event, widgetIndex, 'resize-se')\">\n            <pry-icon iconSvg=\"south_east\" [animation]=\"false\"></pry-icon>\n          </div>\n          <div class=\"resize delete\" (mousedown)=\"toggleRemoveConfirm($event, widgetIndex)\">\n            <pry-icon iconSvg=\"close\" [animation]=\"false\"></pry-icon>\n          </div>\n          <div class=\"move\" draggable=\"true\" (dragstart)=\"dragStart($event, widgetIndex)\">\n            <div class=\"move-inside move-{{ widgetManifest.type }}\">\n              <span>{{ widgetManifest.title ?? ('@pry.toolbox.' + widgetManifest.type | i18n) }}</span>\n            </div>\n          </div>\n        }\n        @if (!modeEdition) {\n          <pry-widget-instanciator\n            [staticManifest]=\"widgetManifest\"\n            [widgetIndex]=\"widgetIndex\"\n          ></pry-widget-instanciator>\n        }\n      </div>\n    }\n\n    @if (!noBackground) {\n      @if ({\n        noWidgets: (nonFillerWidgets$ | async) === 0,\n        globalLoading: loading$ | async,\n        fetchLoading: (dataFetching$ | async)?.length ?? 1 > 0\n        }; as data) {\n        @if (data.noWidgets) {\n          @if (data.globalLoading) {\n            <div\n              class=\"no-widget\"\n              [style.grid-area]=\"backgroundArea$ | async\"\n              >\n              <pry-page-loader></pry-page-loader>\n              <span class=\"no-widget__text\">{{ '@pry.widget.target.loading' | i18n }}...</span>\n            </div>\n          } @else {\n            <div class=\"no-widget\" [style.grid-area]=\"backgroundArea$ | async\">\n              <img\n                class=\"no-widget__search\"\n                src=\"../../../assets/svgs/pry_recherche.svg\"\n                alt=\"{{\n                  (layout === DashboardGridLayout.MANUAL\n                    ? '@pry.widget.target.none_manual'\n                    : '@pry.widget.target.none_auto'\n                  ) | i18n\n                }}\"\n                />\n              <span class=\"no-widget__text\">{{\n                (layout === DashboardGridLayout.MANUAL\n                ? '@pry.widget.target.none_manual'\n                : '@pry.widget.target.none_auto'\n                ) | i18n\n              }}</span>\n            </div>\n          }\n        }\n        <div\n          class=\"a-page-loader backdrop\"\n          [style.display]=\"data.fetchLoading && !data.globalLoading ? 'flex' : 'none'\"\n          [style.width.px]=\"params.gridWidth\"\n          [style.height.px]=\"params.gridHeight\"\n          >\n          <pry-page-loader></pry-page-loader>\n          <p>{{ '@pry.widget.target.loading' | i18n }}...</p>\n        </div>\n      }\n    }\n  </div>\n</div>\n<pry-context-menu></pry-context-menu>\n\n<ng-template #templateModal>\n  <div class=\"o-modal\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ '@pry.widget.modalTitle' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"cancelRemoveConfirm()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <div class=\"m-btn-group\">\n      <button type=\"button\" (click)=\"cancelRemoveConfirm()\" class=\"a-btn a-btn--secondary\">\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n      <button type=\"submit\" (click)=\"confirmRemove()\" class=\"a-btn a-btn--primary\">\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i8.PryPageLoaderComponent, selector: "pry-page-loader", inputs: ["image", "imageAltText"] }, { kind: "component", type: WidgetInstanciatorComponent, selector: "pry-widget-instanciator", inputs: ["widgetIndex", "staticManifest", "standalone", "open$"], outputs: ["manifestModified"] }, { kind: "component", type: ContextMenuComponent, selector: "pry-context-menu" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DashboardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-dashboard', template: "<div class=\"o-dashboard-edit\" [class.-edit]=\"modeEdition$ | async\">\n  <div class=\"o-dashboard-add -rows\">\n    <button (click)=\"changeSize('rows', -1)\">\n      <pry-icon iconSvg=\"remove\" [width]=\"12\" [height]=\"12\"></pry-icon>\n    </button>\n    <button (click)=\"changeSize('rows', +1)\">\n      <pry-icon iconSvg=\"add\" [width]=\"12\" [height]=\"12\"></pry-icon>\n    </button>\n    <p>{{ '@pry.grid.rows' | i18n }}</p>\n  </div>\n  <div class=\"o-dashboard-add -cols\">\n    <p>{{ '@pry.grid.columns' | i18n }}</p>\n    <button (click)=\"changeSize('columns', -1)\">\n      <pry-icon iconSvg=\"remove\" [width]=\"12\" [height]=\"12\"></pry-icon>\n    </button>\n    <button (click)=\"changeSize('columns', +1)\">\n      <pry-icon iconSvg=\"add\" [width]=\"12\" [height]=\"12\"></pry-icon>\n    </button>\n  </div>\n  <div\n    class=\"o-dashboard-grid\"\n    [style.gridTemplateColumns]=\"gridTemplateColumns$ | async\"\n    [style.gridTemplateRows]=\"gridTemplateRows$ | async\"\n    [style.gridGap]=\"dashboardParams.gridGap + 'px'\"\n    #grid\n    (mousemove)=\"movingMouse($event)\"\n    (drop)=\"dropping($event)\"\n    (dragover)=\"dragMove($event)\"\n    (dragleave)=\"dragLeave($event)\"\n    (dragenter)=\"dragEnter($event)\"\n  >\n    <ng-container\n      *ngFor=\"\n        let widgetManifest of (windowManifest$ | async)?.widgets || [];\n        let widgetIndex = index;\n        trackBy: trackWidgets\n      \"\n    >\n      <div\n        class=\"o-dashboard-widget\"\n        [class.-edited]=\"modeEdition\"\n        [style.gridColumn]=\"gridColumn(widgetManifest.layout)\"\n        [style.gridRow]=\"gridRow(widgetManifest.layout)\"\n        (drop)=\"droppingInWidget($event, widgetIndex)\"\n      >\n        <ng-container *ngIf=\"modeEdition\">\n          <div class=\"resize nw-resize\" (mousedown)=\"startResize($event, widgetIndex, 'resize-nw')\">\n            <pry-icon iconSvg=\"north_west\" [animation]=\"false\"></pry-icon>\n          </div>\n          <div class=\"resize sw-resize\" (mousedown)=\"startResize($event, widgetIndex, 'resize-sw')\">\n            <pry-icon iconSvg=\"south_west\" [animation]=\"false\"></pry-icon>\n          </div>\n          <div class=\"resize ne-resize\" (mousedown)=\"startResize($event, widgetIndex, 'resize-ne')\">\n            <pry-icon iconSvg=\"north_east\" [animation]=\"false\"></pry-icon>\n          </div>\n          <div class=\"resize se-resize\" (mousedown)=\"startResize($event, widgetIndex, 'resize-se')\">\n            <pry-icon iconSvg=\"south_east\" [animation]=\"false\"></pry-icon>\n          </div>\n          <div class=\"resize delete\" (mousedown)=\"toggleRemoveConfirm($event, widgetIndex)\">\n            <pry-icon iconSvg=\"close\" [animation]=\"false\"></pry-icon>\n          </div>\n          <div class=\"move\" draggable=\"true\" (dragstart)=\"dragStart($event, widgetIndex)\">\n            <div class=\"move-inside move-{{ widgetManifest.type }}\">\n              <span>{{ widgetManifest.title ?? ('@pry.toolbox.' + widgetManifest.type | i18n) }}</span>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngIf=\"!modeEdition\">\n          <pry-widget-instanciator\n            [staticManifest]=\"widgetManifest\"\n            [widgetIndex]=\"widgetIndex\"\n          ></pry-widget-instanciator>\n        </ng-container>\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!noBackground\">\n      <ng-container\n        *ngIf=\"{\n          noWidgets: (nonFillerWidgets$ | async) === 0,\n          globalLoading: loading$ | async,\n          fetchLoading: (dataFetching$ | async)?.length ?? 1 > 0\n        } as data\"\n      >\n        <ng-container *ngIf=\"data.noWidgets\">\n          <div\n            *ngIf=\"data.globalLoading; else notLoading\"\n            class=\"no-widget\"\n            [style.grid-area]=\"backgroundArea$ | async\"\n          >\n            <pry-page-loader></pry-page-loader>\n            <span class=\"no-widget__text\">{{ '@pry.widget.target.loading' | i18n }}...</span>\n          </div>\n          <ng-template #notLoading>\n            <div class=\"no-widget\" [style.grid-area]=\"backgroundArea$ | async\">\n              <img\n                class=\"no-widget__search\"\n                src=\"../../../assets/svgs/pry_recherche.svg\"\n                alt=\"{{\n                  (layout === DashboardGridLayout.MANUAL\n                    ? '@pry.widget.target.none_manual'\n                    : '@pry.widget.target.none_auto'\n                  ) | i18n\n                }}\"\n              />\n              <span class=\"no-widget__text\">{{\n                (layout === DashboardGridLayout.MANUAL\n                  ? '@pry.widget.target.none_manual'\n                  : '@pry.widget.target.none_auto'\n                ) | i18n\n              }}</span>\n            </div>\n          </ng-template>\n        </ng-container>\n        <div\n          class=\"a-page-loader backdrop\"\n          [style.display]=\"data.fetchLoading && !data.globalLoading ? 'flex' : 'none'\"\n          [style.width.px]=\"params.gridWidth\"\n          [style.height.px]=\"params.gridHeight\"\n        >\n          <pry-page-loader></pry-page-loader>\n          <p>{{ '@pry.widget.target.loading' | i18n }}...</p>\n        </div>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>\n<pry-context-menu></pry-context-menu>\n\n<ng-template #templateModal>\n  <div class=\"o-modal\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ '@pry.widget.modalTitle' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"cancelRemoveConfirm()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <div class=\"m-btn-group\">\n      <button type=\"button\" (click)=\"cancelRemoveConfirm()\" class=\"a-btn a-btn--secondary\">\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n      <button type=\"submit\" (click)=\"confirmRemove()\" class=\"a-btn a-btn--primary\">\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Overlay }, { type: i0.ViewContainerRef }, { type: WidgetFactoryService }], propDecorators: { templateModal: [{
+            args: [{ selector: 'pry-dashboard', template: "<div class=\"o-dashboard-edit\" [class.-edit]=\"modeEdition$ | async\">\n  <div class=\"o-dashboard-add -rows\">\n    <button (click)=\"changeSize('rows', -1)\">\n      <pry-icon iconSvg=\"remove\" [width]=\"12\" [height]=\"12\"></pry-icon>\n    </button>\n    <button (click)=\"changeSize('rows', +1)\">\n      <pry-icon iconSvg=\"add\" [width]=\"12\" [height]=\"12\"></pry-icon>\n    </button>\n    <p>{{ '@pry.grid.rows' | i18n }}</p>\n  </div>\n  <div class=\"o-dashboard-add -cols\">\n    <p>{{ '@pry.grid.columns' | i18n }}</p>\n    <button (click)=\"changeSize('columns', -1)\">\n      <pry-icon iconSvg=\"remove\" [width]=\"12\" [height]=\"12\"></pry-icon>\n    </button>\n    <button (click)=\"changeSize('columns', +1)\">\n      <pry-icon iconSvg=\"add\" [width]=\"12\" [height]=\"12\"></pry-icon>\n    </button>\n  </div>\n  <div\n    class=\"o-dashboard-grid\"\n    [style.gridTemplateColumns]=\"gridTemplateColumns$ | async\"\n    [style.gridTemplateRows]=\"gridTemplateRows$ | async\"\n    [style.gridGap]=\"dashboardParams.gridGap + 'px'\"\n    #grid\n    (mousemove)=\"movingMouse($event)\"\n    (drop)=\"dropping($event)\"\n    (dragover)=\"dragMove($event)\"\n    (dragleave)=\"dragLeave($event)\"\n    (dragenter)=\"dragEnter($event)\"\n    >\n    @for (\n      widgetManifest of (windowManifest$ | async)?.widgets || []; track trackWidgets(widgetIndex,\n      widgetManifest); let widgetIndex = $index) {\n      <div\n        class=\"o-dashboard-widget\"\n        [class.-edited]=\"modeEdition\"\n        [style.gridColumn]=\"gridColumn(widgetManifest.layout)\"\n        [style.gridRow]=\"gridRow(widgetManifest.layout)\"\n        (drop)=\"droppingInWidget($event, widgetIndex)\"\n        >\n        @if (modeEdition) {\n          <div class=\"resize nw-resize\" (mousedown)=\"startResize($event, widgetIndex, 'resize-nw')\">\n            <pry-icon iconSvg=\"north_west\" [animation]=\"false\"></pry-icon>\n          </div>\n          <div class=\"resize sw-resize\" (mousedown)=\"startResize($event, widgetIndex, 'resize-sw')\">\n            <pry-icon iconSvg=\"south_west\" [animation]=\"false\"></pry-icon>\n          </div>\n          <div class=\"resize ne-resize\" (mousedown)=\"startResize($event, widgetIndex, 'resize-ne')\">\n            <pry-icon iconSvg=\"north_east\" [animation]=\"false\"></pry-icon>\n          </div>\n          <div class=\"resize se-resize\" (mousedown)=\"startResize($event, widgetIndex, 'resize-se')\">\n            <pry-icon iconSvg=\"south_east\" [animation]=\"false\"></pry-icon>\n          </div>\n          <div class=\"resize delete\" (mousedown)=\"toggleRemoveConfirm($event, widgetIndex)\">\n            <pry-icon iconSvg=\"close\" [animation]=\"false\"></pry-icon>\n          </div>\n          <div class=\"move\" draggable=\"true\" (dragstart)=\"dragStart($event, widgetIndex)\">\n            <div class=\"move-inside move-{{ widgetManifest.type }}\">\n              <span>{{ widgetManifest.title ?? ('@pry.toolbox.' + widgetManifest.type | i18n) }}</span>\n            </div>\n          </div>\n        }\n        @if (!modeEdition) {\n          <pry-widget-instanciator\n            [staticManifest]=\"widgetManifest\"\n            [widgetIndex]=\"widgetIndex\"\n          ></pry-widget-instanciator>\n        }\n      </div>\n    }\n\n    @if (!noBackground) {\n      @if ({\n        noWidgets: (nonFillerWidgets$ | async) === 0,\n        globalLoading: loading$ | async,\n        fetchLoading: (dataFetching$ | async)?.length ?? 1 > 0\n        }; as data) {\n        @if (data.noWidgets) {\n          @if (data.globalLoading) {\n            <div\n              class=\"no-widget\"\n              [style.grid-area]=\"backgroundArea$ | async\"\n              >\n              <pry-page-loader></pry-page-loader>\n              <span class=\"no-widget__text\">{{ '@pry.widget.target.loading' | i18n }}...</span>\n            </div>\n          } @else {\n            <div class=\"no-widget\" [style.grid-area]=\"backgroundArea$ | async\">\n              <img\n                class=\"no-widget__search\"\n                src=\"../../../assets/svgs/pry_recherche.svg\"\n                alt=\"{{\n                  (layout === DashboardGridLayout.MANUAL\n                    ? '@pry.widget.target.none_manual'\n                    : '@pry.widget.target.none_auto'\n                  ) | i18n\n                }}\"\n                />\n              <span class=\"no-widget__text\">{{\n                (layout === DashboardGridLayout.MANUAL\n                ? '@pry.widget.target.none_manual'\n                : '@pry.widget.target.none_auto'\n                ) | i18n\n              }}</span>\n            </div>\n          }\n        }\n        <div\n          class=\"a-page-loader backdrop\"\n          [style.display]=\"data.fetchLoading && !data.globalLoading ? 'flex' : 'none'\"\n          [style.width.px]=\"params.gridWidth\"\n          [style.height.px]=\"params.gridHeight\"\n          >\n          <pry-page-loader></pry-page-loader>\n          <p>{{ '@pry.widget.target.loading' | i18n }}...</p>\n        </div>\n      }\n    }\n  </div>\n</div>\n<pry-context-menu></pry-context-menu>\n\n<ng-template #templateModal>\n  <div class=\"o-modal\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ '@pry.widget.modalTitle' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"cancelRemoveConfirm()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <div class=\"m-btn-group\">\n      <button type=\"button\" (click)=\"cancelRemoveConfirm()\" class=\"a-btn a-btn--secondary\">\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n      <button type=\"submit\" (click)=\"confirmRemove()\" class=\"a-btn a-btn--primary\">\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: i1.Store }, { type: i2$1.Overlay }, { type: i0.ViewContainerRef }, { type: WidgetFactoryService }], propDecorators: { templateModal: [{
                 type: ViewChild,
                 args: ['templateModal', { read: TemplateRef }]
             }], instanciators: [{
@@ -10164,7 +10178,7 @@ class ToolboxManifestService extends SubscriptionnerDirective {
         if (!manifest) {
             return manifest;
         }
-        const copy = JSON.parse(JSON.stringify(manifest));
+        const copy = structuredClone(manifest);
         if (instanciate && !!copy && copy.datasource === USE_CURRENT_RESULTSET) {
             copy.datasource = [];
         }
@@ -10174,7 +10188,7 @@ class ToolboxManifestService extends SubscriptionnerDirective {
         this.initialManifests$.next({ ...this.initialManifests$.getValue(), [id]: manifest });
     }
     setAllLayouts(layout) {
-        Object.keys(this.initialManifests$.getValue()).forEach((key) => (this.initialManifests$.getValue()[key].layout = JSON.parse(JSON.stringify(layout))));
+        Object.keys(this.initialManifests$.getValue()).forEach((key) => (this.initialManifests$.getValue()[key].layout = structuredClone(layout)));
     }
     isModel(id) {
         const manifest = this.get(id, false);
@@ -10480,11 +10494,11 @@ class PryAboutComponent {
         return !!value && (!!backVersion.chartVersion || !!frontVersion.libVersion);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryAboutComponent, deps: [{ token: i1.Store }, { token: PryI18nService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: PryAboutComponent, selector: "pry-about", inputs: { tooltipPosition: "tooltipPosition" }, ngImport: i0, template: "<div class=\"o-about\">\n  <div class=\"m-info-icon\">\n    <span>i</span>\n  </div>\n  <div class=\"o-about__tooltip -position-{{ tooltipPosition }}\">\n    <ng-container *ngFor=\"let version of (version$ | async) ?? {} | keyvalue\">\n      <div class=\"o-about__line\">\n        {{ '@pry.about.' + version.key | i18n }}\n        <p class=\"a-chip -md -no-wrap\" [class.-not-found]=\"!hasVersion(version.value)\">\n          {{ displayVersion(version.value) }}\n        </p>\n      </div>\n    </ng-container>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: PryAboutComponent, selector: "pry-about", inputs: { tooltipPosition: "tooltipPosition" }, ngImport: i0, template: "<div class=\"o-about\">\n  <div class=\"m-info-icon\">\n    <span>i</span>\n  </div>\n  <div class=\"o-about__tooltip -position-{{ tooltipPosition }}\">\n    @for (version of (version$ | async) ?? {} | keyvalue; track version) {\n      <div class=\"o-about__line\">\n        {{ '@pry.about.' + version.key | i18n }}\n        <p class=\"a-chip -md -no-wrap\" [class.-not-found]=\"!hasVersion(version.value)\">\n          {{ displayVersion(version.value) }}\n        </p>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryAboutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-about', template: "<div class=\"o-about\">\n  <div class=\"m-info-icon\">\n    <span>i</span>\n  </div>\n  <div class=\"o-about__tooltip -position-{{ tooltipPosition }}\">\n    <ng-container *ngFor=\"let version of (version$ | async) ?? {} | keyvalue\">\n      <div class=\"o-about__line\">\n        {{ '@pry.about.' + version.key | i18n }}\n        <p class=\"a-chip -md -no-wrap\" [class.-not-found]=\"!hasVersion(version.value)\">\n          {{ displayVersion(version.value) }}\n        </p>\n      </div>\n    </ng-container>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'pry-about', template: "<div class=\"o-about\">\n  <div class=\"m-info-icon\">\n    <span>i</span>\n  </div>\n  <div class=\"o-about__tooltip -position-{{ tooltipPosition }}\">\n    @for (version of (version$ | async) ?? {} | keyvalue; track version) {\n      <div class=\"o-about__line\">\n        {{ '@pry.about.' + version.key | i18n }}\n        <p class=\"a-chip -md -no-wrap\" [class.-not-found]=\"!hasVersion(version.value)\">\n          {{ displayVersion(version.value) }}\n        </p>\n      </div>\n    }\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: PryI18nService }], propDecorators: { tooltipPosition: [{
                 type: Input
             }] } });
@@ -10542,7 +10556,7 @@ class BusService {
         if (!action.sender) {
             // Send only non bus-received messages
             this.dataChannel.postMessage({
-                ...JSON.parse(JSON.stringify(action)),
+                ...structuredClone(action),
                 sender: this.sender,
                 target
             });
@@ -10594,12 +10608,12 @@ class ActionBusEffects {
         // For actions with type containing "(bus)", automatically transfer it on the data-bus to propagate to other windows
         filter$1((action) => action.type.includes('(bus)')), tap((action) => this.busService.postData(action))), { dispatch: false });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ActionBusEffects, deps: [{ token: i1$3.Actions }, { token: i1.Store }, { token: BusService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ActionBusEffects, deps: [{ token: i1$2.Actions }, { token: i1.Store }, { token: BusService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ActionBusEffects }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ActionBusEffects, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$3.Actions }, { type: i1.Store }, { type: BusService }] });
+        }], ctorParameters: () => [{ type: i1$2.Actions }, { type: i1.Store }, { type: BusService }] });
 
 class ManifestsComponent {
     constructor(store) {
@@ -10640,11 +10654,11 @@ class ManifestsComponent {
         this.fileInput.nativeElement.click();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ManifestsComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: ManifestsComponent, selector: "pry-manifests", viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"o-manifest-layout\">\n  <div class=\"o-manifest-layout__toolbox\">\n    <button\n      class=\"a-btn a-btn--action\"\n      type=\"button\"\n      (click)=\"triggerFileInput()\"\n      title=\"{{ '@pry.manifest.importAlt' | i18n }}\"\n    >\n      <pry-icon iconSvg=\"upload\"></pry-icon>\n      {{ '@pry.manifest.import' | i18n }}\n    </button>\n    <input\n      type=\"file\"\n      id=\"file\"\n      (change)=\"handleFileInput($event)\"\n      #fileInput\n      multiple=\"true\"\n      class=\"u-visually-hidden\"\n    />\n  </div>\n\n  <div class=\"o-manifest-layout__content\">\n    <h1 class=\"a-h1\">{{ '@pry.manifest.title' | i18n }}</h1>\n\n    <div class=\"o-card-manifest\" *ngFor=\"let manifest of manifests$ | async\">\n      <div class=\"o-card-manifest__content\">\n        <p class=\"a-p\">\n          <span class=\"a-p__title\">{{ '@pry.manifest.name' | i18n }}</span>\n          {{ manifest.name }}\n        </p>\n        <p class=\"a-p\">\n          <span class=\"a-p__title\">{{ '@pry.manifest.description' | i18n }}</span>\n          {{ manifest.description }}\n        </p>\n        <p class=\"a-p\">\n          <span class=\"a-p__title\">{{ '@pry.manifest.modification' | i18n }}</span>\n          {{ manifest.modificationDate | date: ('@pry.format.datetime' | i18n) }}\n        </p>\n        <p class=\"a-p\">\n          <span class=\"a-p__title\">{{ '@pry.manifest.creation' | i18n }}</span>\n          {{ manifest.creationDate | date: ('@pry.format.datetime' | i18n) }}\n        </p>\n      </div>\n\n      <div class=\"m-btn-group\">\n        <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"download(manifest.id, manifest.name)\">\n          <pry-icon iconSvg=\"download\"></pry-icon>\n          <span class=\"u-visually-hidden\">TODO</span>\n        </button>\n\n        <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"fetch(manifest.id)\">\n          <pry-icon iconSvg=\"eye\"></pry-icon>\n          <span class=\"u-visually-hidden\">TODO</span>\n        </button>\n\n        <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"delete(manifest.id)\">\n          <pry-icon iconSvg=\"delete\"></pry-icon>\n          <span class=\"u-visually-hidden\">TODO</span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: ManifestsComponent, selector: "pry-manifests", viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"o-manifest-layout\">\n  <div class=\"o-manifest-layout__toolbox\">\n    <button\n      class=\"a-btn a-btn--action\"\n      type=\"button\"\n      (click)=\"triggerFileInput()\"\n      title=\"{{ '@pry.manifest.importAlt' | i18n }}\"\n      >\n      <pry-icon iconSvg=\"upload\"></pry-icon>\n      {{ '@pry.manifest.import' | i18n }}\n    </button>\n    <input\n      type=\"file\"\n      id=\"file\"\n      (change)=\"handleFileInput($event)\"\n      #fileInput\n      multiple=\"true\"\n      class=\"u-visually-hidden\"\n      />\n  </div>\n\n  <div class=\"o-manifest-layout__content\">\n    <h1 class=\"a-h1\">{{ '@pry.manifest.title' | i18n }}</h1>\n\n    @for (manifest of manifests$ | async; track manifest) {\n      <div class=\"o-card-manifest\">\n        <div class=\"o-card-manifest__content\">\n          <p class=\"a-p\">\n            <span class=\"a-p__title\">{{ '@pry.manifest.name' | i18n }}</span>\n            {{ manifest.name }}\n          </p>\n          <p class=\"a-p\">\n            <span class=\"a-p__title\">{{ '@pry.manifest.description' | i18n }}</span>\n            {{ manifest.description }}\n          </p>\n          <p class=\"a-p\">\n            <span class=\"a-p__title\">{{ '@pry.manifest.modification' | i18n }}</span>\n            {{ manifest.modificationDate | date: ('@pry.format.datetime' | i18n) }}\n          </p>\n          <p class=\"a-p\">\n            <span class=\"a-p__title\">{{ '@pry.manifest.creation' | i18n }}</span>\n            {{ manifest.creationDate | date: ('@pry.format.datetime' | i18n) }}\n          </p>\n        </div>\n        <div class=\"m-btn-group\">\n          <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"download(manifest.id, manifest.name)\">\n            <pry-icon iconSvg=\"download\"></pry-icon>\n            <span class=\"u-visually-hidden\">TODO</span>\n          </button>\n          <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"fetch(manifest.id)\">\n            <pry-icon iconSvg=\"eye\"></pry-icon>\n            <span class=\"u-visually-hidden\">TODO</span>\n          </button>\n          <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"delete(manifest.id)\">\n            <pry-icon iconSvg=\"delete\"></pry-icon>\n            <span class=\"u-visually-hidden\">TODO</span>\n          </button>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ManifestsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-manifests', template: "<div class=\"o-manifest-layout\">\n  <div class=\"o-manifest-layout__toolbox\">\n    <button\n      class=\"a-btn a-btn--action\"\n      type=\"button\"\n      (click)=\"triggerFileInput()\"\n      title=\"{{ '@pry.manifest.importAlt' | i18n }}\"\n    >\n      <pry-icon iconSvg=\"upload\"></pry-icon>\n      {{ '@pry.manifest.import' | i18n }}\n    </button>\n    <input\n      type=\"file\"\n      id=\"file\"\n      (change)=\"handleFileInput($event)\"\n      #fileInput\n      multiple=\"true\"\n      class=\"u-visually-hidden\"\n    />\n  </div>\n\n  <div class=\"o-manifest-layout__content\">\n    <h1 class=\"a-h1\">{{ '@pry.manifest.title' | i18n }}</h1>\n\n    <div class=\"o-card-manifest\" *ngFor=\"let manifest of manifests$ | async\">\n      <div class=\"o-card-manifest__content\">\n        <p class=\"a-p\">\n          <span class=\"a-p__title\">{{ '@pry.manifest.name' | i18n }}</span>\n          {{ manifest.name }}\n        </p>\n        <p class=\"a-p\">\n          <span class=\"a-p__title\">{{ '@pry.manifest.description' | i18n }}</span>\n          {{ manifest.description }}\n        </p>\n        <p class=\"a-p\">\n          <span class=\"a-p__title\">{{ '@pry.manifest.modification' | i18n }}</span>\n          {{ manifest.modificationDate | date: ('@pry.format.datetime' | i18n) }}\n        </p>\n        <p class=\"a-p\">\n          <span class=\"a-p__title\">{{ '@pry.manifest.creation' | i18n }}</span>\n          {{ manifest.creationDate | date: ('@pry.format.datetime' | i18n) }}\n        </p>\n      </div>\n\n      <div class=\"m-btn-group\">\n        <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"download(manifest.id, manifest.name)\">\n          <pry-icon iconSvg=\"download\"></pry-icon>\n          <span class=\"u-visually-hidden\">TODO</span>\n        </button>\n\n        <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"fetch(manifest.id)\">\n          <pry-icon iconSvg=\"eye\"></pry-icon>\n          <span class=\"u-visually-hidden\">TODO</span>\n        </button>\n\n        <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"delete(manifest.id)\">\n          <pry-icon iconSvg=\"delete\"></pry-icon>\n          <span class=\"u-visually-hidden\">TODO</span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'pry-manifests', template: "<div class=\"o-manifest-layout\">\n  <div class=\"o-manifest-layout__toolbox\">\n    <button\n      class=\"a-btn a-btn--action\"\n      type=\"button\"\n      (click)=\"triggerFileInput()\"\n      title=\"{{ '@pry.manifest.importAlt' | i18n }}\"\n      >\n      <pry-icon iconSvg=\"upload\"></pry-icon>\n      {{ '@pry.manifest.import' | i18n }}\n    </button>\n    <input\n      type=\"file\"\n      id=\"file\"\n      (change)=\"handleFileInput($event)\"\n      #fileInput\n      multiple=\"true\"\n      class=\"u-visually-hidden\"\n      />\n  </div>\n\n  <div class=\"o-manifest-layout__content\">\n    <h1 class=\"a-h1\">{{ '@pry.manifest.title' | i18n }}</h1>\n\n    @for (manifest of manifests$ | async; track manifest) {\n      <div class=\"o-card-manifest\">\n        <div class=\"o-card-manifest__content\">\n          <p class=\"a-p\">\n            <span class=\"a-p__title\">{{ '@pry.manifest.name' | i18n }}</span>\n            {{ manifest.name }}\n          </p>\n          <p class=\"a-p\">\n            <span class=\"a-p__title\">{{ '@pry.manifest.description' | i18n }}</span>\n            {{ manifest.description }}\n          </p>\n          <p class=\"a-p\">\n            <span class=\"a-p__title\">{{ '@pry.manifest.modification' | i18n }}</span>\n            {{ manifest.modificationDate | date: ('@pry.format.datetime' | i18n) }}\n          </p>\n          <p class=\"a-p\">\n            <span class=\"a-p__title\">{{ '@pry.manifest.creation' | i18n }}</span>\n            {{ manifest.creationDate | date: ('@pry.format.datetime' | i18n) }}\n          </p>\n        </div>\n        <div class=\"m-btn-group\">\n          <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"download(manifest.id, manifest.name)\">\n            <pry-icon iconSvg=\"download\"></pry-icon>\n            <span class=\"u-visually-hidden\">TODO</span>\n          </button>\n          <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"fetch(manifest.id)\">\n            <pry-icon iconSvg=\"eye\"></pry-icon>\n            <span class=\"u-visually-hidden\">TODO</span>\n          </button>\n          <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"delete(manifest.id)\">\n            <pry-icon iconSvg=\"delete\"></pry-icon>\n            <span class=\"u-visually-hidden\">TODO</span>\n          </button>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.Store }], propDecorators: { fileInput: [{
                 type: ViewChild,
                 args: ['fileInput']
@@ -10669,11 +10683,11 @@ class MetadataComponent {
         this.opened = !this.opened;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: MetadataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: MetadataComponent, selector: "pry-metadata", inputs: { item: "item" }, ngImport: i0, template: "<div class=\"m-metadata-tag\">\n  <button\n    type=\"button\"\n    class=\"a-btn a-btn--icon-text -link-like\"\n    [attr.aria-expanded]=\"opened\"\n    [attr.aria-controls]=\"'metadata_' + id\"\n    (click)=\"toggle()\"\n  >\n    <pry-icon [width]=\"18\" [height]=\"18\" iconSvg=\"tags\"></pry-icon>\n    {{ '@pry.metadata.view' | i18n }}\n  </button>\n\n  <ul [id]=\"'metadata_' + id\" class=\"m-metadata-tag__list\">\n    <li *ngFor=\"let meta of metadata\" class=\"m-metadata-tag__list__item\">\n      <p class=\"m-metadata-tag__chip\" [title]=\"meta.name + ': ' + meta.value\">\n        <span class=\"m-metadata-tag__chip__label\">{{ meta.name }}: </span>\n        {{ meta.value }}\n      </p>\n    </li>\n  </ul>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: MetadataComponent, selector: "pry-metadata", inputs: { item: "item" }, ngImport: i0, template: "<div class=\"m-metadata-tag\">\n  <button\n    type=\"button\"\n    class=\"a-btn a-btn--icon-text -link-like\"\n    [attr.aria-expanded]=\"opened\"\n    [attr.aria-controls]=\"'metadata_' + id\"\n    (click)=\"toggle()\"\n    >\n    <pry-icon [width]=\"18\" [height]=\"18\" iconSvg=\"tags\"></pry-icon>\n    {{ '@pry.metadata.view' | i18n }}\n  </button>\n\n  <ul [id]=\"'metadata_' + id\" class=\"m-metadata-tag__list\">\n    @for (meta of metadata; track meta) {\n      <li class=\"m-metadata-tag__list__item\">\n        <p class=\"m-metadata-tag__chip\" [title]=\"meta.name + ': ' + meta.value\">\n          <span class=\"m-metadata-tag__chip__label\">{{ meta.name }}: </span>\n          {{ meta.value }}\n        </p>\n      </li>\n    }\n  </ul>\n</div>\n", dependencies: [{ kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: MetadataComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-metadata', template: "<div class=\"m-metadata-tag\">\n  <button\n    type=\"button\"\n    class=\"a-btn a-btn--icon-text -link-like\"\n    [attr.aria-expanded]=\"opened\"\n    [attr.aria-controls]=\"'metadata_' + id\"\n    (click)=\"toggle()\"\n  >\n    <pry-icon [width]=\"18\" [height]=\"18\" iconSvg=\"tags\"></pry-icon>\n    {{ '@pry.metadata.view' | i18n }}\n  </button>\n\n  <ul [id]=\"'metadata_' + id\" class=\"m-metadata-tag__list\">\n    <li *ngFor=\"let meta of metadata\" class=\"m-metadata-tag__list__item\">\n      <p class=\"m-metadata-tag__chip\" [title]=\"meta.name + ': ' + meta.value\">\n        <span class=\"m-metadata-tag__chip__label\">{{ meta.name }}: </span>\n        {{ meta.value }}\n      </p>\n    </li>\n  </ul>\n</div>\n" }]
+            args: [{ selector: 'pry-metadata', template: "<div class=\"m-metadata-tag\">\n  <button\n    type=\"button\"\n    class=\"a-btn a-btn--icon-text -link-like\"\n    [attr.aria-expanded]=\"opened\"\n    [attr.aria-controls]=\"'metadata_' + id\"\n    (click)=\"toggle()\"\n    >\n    <pry-icon [width]=\"18\" [height]=\"18\" iconSvg=\"tags\"></pry-icon>\n    {{ '@pry.metadata.view' | i18n }}\n  </button>\n\n  <ul [id]=\"'metadata_' + id\" class=\"m-metadata-tag__list\">\n    @for (meta of metadata; track meta) {\n      <li class=\"m-metadata-tag__list__item\">\n        <p class=\"m-metadata-tag__chip\" [title]=\"meta.name + ': ' + meta.value\">\n          <span class=\"m-metadata-tag__chip__label\">{{ meta.name }}: </span>\n          {{ meta.value }}\n        </p>\n      </li>\n    }\n  </ul>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { item: [{
                 type: Input
             }] } });
@@ -10705,11 +10719,11 @@ class VizualizeRawComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: VizualizeRawComponent, deps: [{ token: RawService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: VizualizeRawComponent, selector: "pry-vizualize-raw", inputs: { item: "item", propertyName: "propertyName", alt: "alt" }, ngImport: i0, template: "<ng-container *ngIf=\"rawDatas[item?.id + '@' + propertyName] as rawData\">\n  <ng-container *ngIf=\"rawData.type.includes('image')\">\n    <img [src]=\"rawData.url\" [alt]=\"altValue\" />\n  </ng-container>\n  <ng-container *ngIf=\"rawData.type.includes('video')\">\n    <video [preload]=\"true\" class=\"preview\" controls>\n      <source [src]=\"rawData.url\" [type]=\"rawData.type\" />\n    </video>\n  </ng-container>\n</ng-container>\n<ng-container *ngIf=\"!rawDatas[item?.id + '@' + propertyName]\">\n  <ng-container *ngIf=\"getRawData(item?.id ?? '', propertyName) | async\"> Downloading...</ng-container>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: VizualizeRawComponent, selector: "pry-vizualize-raw", inputs: { item: "item", propertyName: "propertyName", alt: "alt" }, ngImport: i0, template: "@if (rawDatas[item?.id + '@' + propertyName]; as rawData) {\n  @if (rawData.type.includes('image')) {\n    <img [src]=\"rawData.url\" [alt]=\"altValue\" />\n  }\n  @if (rawData.type.includes('video')) {\n    <video [preload]=\"true\" class=\"preview\" controls>\n      <source [src]=\"rawData.url\" [type]=\"rawData.type\" />\n    </video>\n  }\n}\n@if (!rawDatas[item?.id + '@' + propertyName]) {\n  @if (getRawData(item?.id ?? '', propertyName) | async) {\n    Downloading...\n  }\n}\n", dependencies: [{ kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: VizualizeRawComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-vizualize-raw', template: "<ng-container *ngIf=\"rawDatas[item?.id + '@' + propertyName] as rawData\">\n  <ng-container *ngIf=\"rawData.type.includes('image')\">\n    <img [src]=\"rawData.url\" [alt]=\"altValue\" />\n  </ng-container>\n  <ng-container *ngIf=\"rawData.type.includes('video')\">\n    <video [preload]=\"true\" class=\"preview\" controls>\n      <source [src]=\"rawData.url\" [type]=\"rawData.type\" />\n    </video>\n  </ng-container>\n</ng-container>\n<ng-container *ngIf=\"!rawDatas[item?.id + '@' + propertyName]\">\n  <ng-container *ngIf=\"getRawData(item?.id ?? '', propertyName) | async\"> Downloading...</ng-container>\n</ng-container>\n" }]
+            args: [{ selector: 'pry-vizualize-raw', template: "@if (rawDatas[item?.id + '@' + propertyName]; as rawData) {\n  @if (rawData.type.includes('image')) {\n    <img [src]=\"rawData.url\" [alt]=\"altValue\" />\n  }\n  @if (rawData.type.includes('video')) {\n    <video [preload]=\"true\" class=\"preview\" controls>\n      <source [src]=\"rawData.url\" [type]=\"rawData.type\" />\n    </video>\n  }\n}\n@if (!rawDatas[item?.id + '@' + propertyName]) {\n  @if (getRawData(item?.id ?? '', propertyName) | async) {\n    Downloading...\n  }\n}\n" }]
         }], ctorParameters: () => [{ type: RawService }], propDecorators: { item: [{
                 type: Input
             }], propertyName: [{
@@ -10793,7 +10807,7 @@ class PryDatasourceCardComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryDatasourceCardComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: PryDatasourceCardComponent, selector: "pry-datasource-card", inputs: { datasource: "datasource", showFooter: "showFooter", isSelectable: "isSelectable", isSelected: "isSelected" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div\n  class=\"o-datasource-card\"\n  [class.-no-footer]=\"!showFooter\"\n  [class.-is-selectable]=\"isSelectable\"\n  (click)=\"onClick()\"\n>\n  <div class=\"o-datasource-card__header\">\n    <img\n      alt=\"\"\n      [height]=\"25\"\n      [width]=\"25\"\n      [src]=\"datasource.id | translateId: { type: 'datasource', output: 'icon' } | async\"\n    />\n    <div class=\"o-datasource-card__title\" ellipsis textElementSelector=\".a-h4\">\n      <p class=\"a-h4\">{{ datasource.name }}</p>\n    </div>\n    @if (isSelectable) {\n      <pry-checkbox\n        (click)=\"$event.preventDefault()\"\n        class=\"o-datasource-card__checkbox\"\n        [ngModel]=\"isSelected\"\n      ></pry-checkbox>\n    }\n  </div>\n  <div class=\"o-datasource-card__content u-display-flex -column -gap-10\">\n    @if (datasource.description) {\n      <div class=\"o-datasource-card__description\" ellipsis textElementSelector=\".description\">\n        <div class=\"description\">{{ truncateDescription(datasource.description, 100) }}</div>\n      </div>\n    } @else {\n      <div class=\"o-datasource-card__description -italic\">{{ '@pry.dataset.noDescription' | i18n }}</div>\n    }\n\n    <span class=\"o-datasource-card__date\">\n      @if (datasource.sourceType === 'dataset') {\n        @if (datasource.activeVersion) {\n          {{ '@pry.dataset.since_day' | i18n }} {{ datasource.activeVersion.lastModified! | sinceDate }}\n        } @else {\n          <span class=\"-italic\">{{ '@pry.dataset.noActiveVersion' | i18n }}</span>\n        }\n      }\n    </span>\n    @if (datasource.sourceType === 'dataset' && datasource.categories && datasource.categories.length > 0) {\n      <div class=\"o-datasource-card__categories u-display-flex -wrap\">\n        @for (category of datasource.categories; track category.id) {\n          <span class=\"a-chip -md\">{{ category.name }}</span>\n        }\n      </div>\n    }\n  </div>\n\n  @if (showFooter) {\n    <div class=\"o-datasource-card__footer\">\n      <button class=\"a-btn\">\n        {{ '@pry.dataset.consult' | i18n }}\n        <pry-icon [width]=\"20\" [height]=\"20\" iconSvg=\"arrow_right\"></pry-icon>\n      </button>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.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: "directive", type: EllipsisDirective, selector: "[ellipsis]", inputs: ["textElementSelector"] }, { kind: "component", type: i7.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle", "name", "inputId", "inhibit"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslateIdPipe, name: "translateId" }, { kind: "pipe", type: I18nPipe, name: "i18n" }, { kind: "pipe", type: SinceDatePipe, name: "sinceDate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: PryDatasourceCardComponent, selector: "pry-datasource-card", inputs: { datasource: "datasource", showFooter: "showFooter", isSelectable: "isSelectable", isSelected: "isSelected" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div\n  class=\"o-datasource-card\"\n  [class.-no-footer]=\"!showFooter\"\n  [class.-is-selectable]=\"isSelectable\"\n  (click)=\"onClick()\"\n>\n  <div class=\"o-datasource-card__header\">\n    <img\n      alt=\"\"\n      [height]=\"25\"\n      [width]=\"25\"\n      [src]=\"datasource.id | translateId: { type: 'datasource', output: 'icon' } | async\"\n    />\n    <div class=\"o-datasource-card__title\" ellipsis textElementSelector=\".a-h4\">\n      <p class=\"a-h4\">{{ datasource.name }}</p>\n    </div>\n    @if (isSelectable) {\n      <pry-checkbox\n        (click)=\"$event.preventDefault()\"\n        class=\"o-datasource-card__checkbox\"\n        [ngModel]=\"isSelected\"\n      ></pry-checkbox>\n    }\n  </div>\n  <div class=\"o-datasource-card__content u-display-flex -column -gap-10\">\n    @if (datasource.description) {\n      <div class=\"o-datasource-card__description\" ellipsis textElementSelector=\".description\">\n        <div class=\"description\">{{ truncateDescription(datasource.description, 100) }}</div>\n      </div>\n    } @else {\n      <div class=\"o-datasource-card__description -italic\">{{ '@pry.dataset.noDescription' | i18n }}</div>\n    }\n\n    <span class=\"o-datasource-card__date\">\n      @if (datasource.sourceType === 'dataset') {\n        @if (datasource.activeVersion) {\n          {{ '@pry.dataset.since_day' | i18n }} {{ datasource.activeVersion.lastModified! | sinceDate }}\n        } @else {\n          <span class=\"-italic\">{{ '@pry.dataset.noActiveVersion' | i18n }}</span>\n        }\n      }\n    </span>\n    @if (datasource.sourceType === 'dataset' && datasource.categories && datasource.categories.length > 0) {\n      <div class=\"o-datasource-card__categories u-display-flex -wrap\">\n        @for (category of datasource.categories; track category.id) {\n          <span class=\"a-chip -md\">{{ category.name }}</span>\n        }\n      </div>\n    }\n  </div>\n\n  @if (showFooter) {\n    <div class=\"o-datasource-card__footer\">\n      <button class=\"a-btn\">\n        {{ '@pry.dataset.consult' | i18n }}\n        <pry-icon [width]=\"20\" [height]=\"20\" iconSvg=\"arrow_right\"></pry-icon>\n      </button>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.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: "directive", type: EllipsisDirective, selector: "[ellipsis]", inputs: ["textElementSelector"] }, { kind: "component", type: i7.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle", "name", "inputId", "inhibit"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslateIdPipe, name: "translateId" }, { kind: "pipe", type: I18nPipe, name: "i18n" }, { kind: "pipe", type: SinceDatePipe, name: "sinceDate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryDatasourceCardComponent, decorators: [{
             type: Component,
@@ -10882,7 +10896,7 @@ class PryDatasourceListComponent extends SubscriptionnerDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryDatasourceListComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: PryDatasourceListComponent, selector: "pry-datasource-list", inputs: { mode: "mode", selectedDatasources: "selectedDatasources" }, outputs: { consultedDataset: "consultedDataset", datasourceSelected: "datasourceSelected", searchOrCategoryChanged: "searchOrCategoryChanged" }, usesInheritance: true, ngImport: i0, template: "<div class=\"o-datasource-list__header u-display-flex\">\n  <div class=\"o-datasource-list__search m-form-label-field\">\n    <label class=\"a-label\" id=\"catalog-search-label\" for=\"catalog-search\">{{ '@pry.dataset.search' | i18n }}</label>\n    <input\n      id=\"catalog-search\"\n      type=\"text\"\n      class=\"a-form-field\"\n      [placeholder]=\"'@pry.dataset.searchPlaceholder' | i18n\"\n      [ngModel]=\"search$ | async\"\n      (ngModelChange)=\"this.search$.next($event)\"\n    />\n    <pry-icon class=\"search-icon\" iconSvg=\"search\" [width]=\"20\" [height]=\"20\"></pry-icon>\n  </div>\n  <div class=\"o-datasource-list__categories m-form-label-field\">\n    <label class=\"a-label\" id=\"tags-label\" for=\"catalog-category-search\">{{ '@pry.dataset.filter' | i18n }}</label>\n    <pry-select\n      id=\"catalog-category-search\"\n      [ngModel]=\"selectedCategories\"\n      (ngModelChange)=\"this.selectedCategories$.next($event)\"\n      [items]=\"categories$ | async\"\n      bindLabel=\"name\"\n      aria-labelledby=\"tags-label\"\n      [multiple]=\"true\"\n      [closeOnSelect]=\"false\"\n      [placeholder]=\"'@pry.dataset.filterPlaceholder' | i18n\"\n    ></pry-select>\n  </div>\n</div>\n<div class=\"o-datasource-list__content\">\n  @if ((_mode$ | async) === 'list') {\n    @for (datasource of filteredDatasources$ | async; track datasource.id) {\n      <pry-datasource-card\n        [datasource]=\"datasource\"\n        [isSelectable]=\"false\"\n        [showFooter]=\"true\"\n        (clicked)=\"onDatasourceClick($event)\"\n      ></pry-datasource-card>\n    }\n  } @else if ((_mode$ | async) === 'selector') {\n    @for (datasource of filteredDatasources$ | async; track datasource.id) {\n      <pry-datasource-card\n        [datasource]=\"datasource\"\n        [isSelectable]=\"true\"\n        [showFooter]=\"false\"\n        (clicked)=\"onDatasourceClick($event)\"\n        [isSelected]=\"datasource.isSelected ?? false\"\n      ></pry-datasource-card>\n    }\n  }\n</div>\n", dependencies: [{ kind: "directive", type: i3$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: PryDatasourceCardComponent, selector: "pry-datasource-card", inputs: ["datasource", "showFooter", "isSelectable", "isSelected"], outputs: ["clicked"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: PryDatasourceListComponent, selector: "pry-datasource-list", inputs: { mode: "mode", selectedDatasources: "selectedDatasources" }, outputs: { consultedDataset: "consultedDataset", datasourceSelected: "datasourceSelected", searchOrCategoryChanged: "searchOrCategoryChanged" }, usesInheritance: true, ngImport: i0, template: "<div class=\"o-datasource-list__header u-display-flex\">\n  <div class=\"o-datasource-list__search m-form-label-field\">\n    <label class=\"a-label\" id=\"catalog-search-label\" for=\"catalog-search\">{{ '@pry.dataset.search' | i18n }}</label>\n    <input\n      id=\"catalog-search\"\n      type=\"text\"\n      class=\"a-form-field\"\n      [placeholder]=\"'@pry.dataset.searchPlaceholder' | i18n\"\n      [ngModel]=\"search$ | async\"\n      (ngModelChange)=\"this.search$.next($event)\"\n    />\n    <pry-icon class=\"search-icon\" iconSvg=\"search\" [width]=\"20\" [height]=\"20\"></pry-icon>\n  </div>\n  <div class=\"o-datasource-list__categories m-form-label-field\">\n    <label class=\"a-label\" id=\"tags-label\" for=\"catalog-category-search\">{{ '@pry.dataset.filter' | i18n }}</label>\n    <pry-select\n      id=\"catalog-category-search\"\n      [ngModel]=\"selectedCategories\"\n      (ngModelChange)=\"this.selectedCategories$.next($event)\"\n      [items]=\"categories$ | async\"\n      bindLabel=\"name\"\n      aria-labelledby=\"tags-label\"\n      [multiple]=\"true\"\n      [closeOnSelect]=\"false\"\n      [placeholder]=\"'@pry.dataset.filterPlaceholder' | i18n\"\n    ></pry-select>\n  </div>\n</div>\n<div class=\"o-datasource-list__content\">\n  @if ((_mode$ | async) === 'list') {\n    @for (datasource of filteredDatasources$ | async; track datasource.id) {\n      <pry-datasource-card\n        [datasource]=\"datasource\"\n        [isSelectable]=\"false\"\n        [showFooter]=\"true\"\n        (clicked)=\"onDatasourceClick($event)\"\n      ></pry-datasource-card>\n    }\n  } @else if ((_mode$ | async) === 'selector') {\n    @for (datasource of filteredDatasources$ | async; track datasource.id) {\n      <pry-datasource-card\n        [datasource]=\"datasource\"\n        [isSelectable]=\"true\"\n        [showFooter]=\"false\"\n        (clicked)=\"onDatasourceClick($event)\"\n        [isSelected]=\"datasource.isSelected ?? false\"\n      ></pry-datasource-card>\n    }\n  }\n</div>\n", dependencies: [{ kind: "directive", type: i2$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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: PryDatasourceCardComponent, selector: "pry-datasource-card", inputs: ["datasource", "showFooter", "isSelectable", "isSelected"], outputs: ["clicked"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryDatasourceListComponent, decorators: [{
             type: Component,
@@ -10949,11 +10963,11 @@ class DatasourceSelectorComponent extends SubscriptionnerDirective {
         this.cdr.detectChanges();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DatasourceSelectorComponent, deps: [{ token: i1.Store }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: DatasourceSelectorComponent, selector: "pry-datasource-selector", inputs: { showButtons: "showButtons", showTitle: "showTitle", manifest: "manifest" }, outputs: { previousTab: "previousTab", nextTab: "nextTab", cancel: "cancel", validated: "validated", itemsChanged: "itemsChanged" }, usesInheritance: true, ngImport: i0, template: "<div class=\"o-datasource-selector u-display-flex -column\">\n  @if (showTitle) {\n    <h2 class=\"u-self-center\">{{ '@pry.components.datasourceSelector.select' | i18n }}</h2>\n  }\n  <div>\n    <h3>\n      {{ '@pry.components.datasourceSelector.selection' | i18n }} ({{ ((selectedDatasources$ | async) ?? []).length }})\n    </h3>\n    <div class=\"o-datasource-selector__chips u-display-flex -wrap -gap-10\">\n      @if ((selectedDatasources$ | async)?.length === 0) {\n        <span class=\"a-label -italic\">{{ '@pry.components.datasourceSelector.noItemSelected' | i18n }}</span>\n      } @else {\n        @for (datasource of selectedDatasources$ | async; track datasource.id) {\n          <button\n            class=\"a-chip a-chip--ghost -lg a-tooltip\"\n            [attr.data-tooltip]=\"'@pry.components.datasourceSelector.unselectItem' | i18n\"\n            type=\"button\"\n            (click)=\"toggleSelection(datasource.id)\"\n          >\n            <pry-icon iconSvg=\"close\" [width]=\"15\" [height]=\"15\"></pry-icon>\n            {{ datasource.name }}\n            <pry-icon *ngIf=\"isGeo(datasource)\" iconSvg=\"globe\" [width]=\"18\" [height]=\"18\"></pry-icon>\n          </button>\n        }\n      }\n    </div>\n  </div>\n  <pry-datasource-list\n    mode=\"selector\"\n    [selectedDatasources]=\"(selectedIds$ | async) ?? []\"\n    (datasourceSelected)=\"updateDatasourceList($event)\"\n    (searchOrCategoryChanged)=\"searchOrCategoryChanged$.next()\"\n  ></pry-datasource-list>\n  @if (showButtons) {\n    <div class=\"m-btn-group o-datasource-selector__footer\">\n      <button type=\"button\" (click)=\"cancel.emit()\" class=\"a-btn a-btn--secondary\">\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n      <button\n        type=\"button\"\n        (click)=\"validated.emit()\"\n        #validate\n        (keydown.tab)=\"nextTab.emit()\"\n        class=\"a-btn a-btn--primary\"\n      >\n        {{ '@pry.toolbox.manifest.validated' | i18n }}\n      </button>\n    </div>\n  }\n</div>\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: "component", type: PryDatasourceListComponent, selector: "pry-datasource-list", inputs: ["mode", "selectedDatasources"], outputs: ["consultedDataset", "datasourceSelected", "searchOrCategoryChanged"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: DatasourceSelectorComponent, selector: "pry-datasource-selector", inputs: { showButtons: "showButtons", showTitle: "showTitle", manifest: "manifest" }, outputs: { previousTab: "previousTab", nextTab: "nextTab", cancel: "cancel", validated: "validated", itemsChanged: "itemsChanged" }, usesInheritance: true, ngImport: i0, template: "<div class=\"o-datasource-selector u-display-flex -column\">\n  @if (showTitle) {\n    <h2 class=\"u-self-center\">{{ '@pry.components.datasourceSelector.select' | i18n }}</h2>\n  }\n  <div>\n    <h3>\n      {{ '@pry.components.datasourceSelector.selection' | i18n }} ({{ ((selectedDatasources$ | async) ?? []).length }})\n    </h3>\n    <div class=\"o-datasource-selector__chips u-display-flex -wrap -gap-10\">\n      @if ((selectedDatasources$ | async)?.length === 0) {\n        <span class=\"a-label -italic\">{{ '@pry.components.datasourceSelector.noItemSelected' | i18n }}</span>\n      } @else {\n        @for (datasource of selectedDatasources$ | async; track datasource.id) {\n          <button\n            class=\"a-chip a-chip--ghost -lg a-tooltip\"\n            [attr.data-tooltip]=\"'@pry.components.datasourceSelector.unselectItem' | i18n\"\n            type=\"button\"\n            (click)=\"toggleSelection(datasource.id)\"\n            >\n            <pry-icon iconSvg=\"close\" [width]=\"15\" [height]=\"15\"></pry-icon>\n            {{ datasource.name }}\n            @if (isGeo(datasource)) {\n              <pry-icon iconSvg=\"globe\" [width]=\"18\" [height]=\"18\"></pry-icon>\n            }\n          </button>\n        }\n      }\n    </div>\n  </div>\n  <pry-datasource-list\n    mode=\"selector\"\n    [selectedDatasources]=\"(selectedIds$ | async) ?? []\"\n    (datasourceSelected)=\"updateDatasourceList($event)\"\n    (searchOrCategoryChanged)=\"searchOrCategoryChanged$.next()\"\n  ></pry-datasource-list>\n  @if (showButtons) {\n    <div class=\"m-btn-group o-datasource-selector__footer\">\n      <button type=\"button\" (click)=\"cancel.emit()\" class=\"a-btn a-btn--secondary\">\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n      <button\n        type=\"button\"\n        (click)=\"validated.emit()\"\n        #validate\n        (keydown.tab)=\"nextTab.emit()\"\n        class=\"a-btn a-btn--primary\"\n        >\n        {{ '@pry.toolbox.manifest.validated' | i18n }}\n      </button>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: PryDatasourceListComponent, selector: "pry-datasource-list", inputs: ["mode", "selectedDatasources"], outputs: ["consultedDataset", "datasourceSelected", "searchOrCategoryChanged"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DatasourceSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-datasource-selector', template: "<div class=\"o-datasource-selector u-display-flex -column\">\n  @if (showTitle) {\n    <h2 class=\"u-self-center\">{{ '@pry.components.datasourceSelector.select' | i18n }}</h2>\n  }\n  <div>\n    <h3>\n      {{ '@pry.components.datasourceSelector.selection' | i18n }} ({{ ((selectedDatasources$ | async) ?? []).length }})\n    </h3>\n    <div class=\"o-datasource-selector__chips u-display-flex -wrap -gap-10\">\n      @if ((selectedDatasources$ | async)?.length === 0) {\n        <span class=\"a-label -italic\">{{ '@pry.components.datasourceSelector.noItemSelected' | i18n }}</span>\n      } @else {\n        @for (datasource of selectedDatasources$ | async; track datasource.id) {\n          <button\n            class=\"a-chip a-chip--ghost -lg a-tooltip\"\n            [attr.data-tooltip]=\"'@pry.components.datasourceSelector.unselectItem' | i18n\"\n            type=\"button\"\n            (click)=\"toggleSelection(datasource.id)\"\n          >\n            <pry-icon iconSvg=\"close\" [width]=\"15\" [height]=\"15\"></pry-icon>\n            {{ datasource.name }}\n            <pry-icon *ngIf=\"isGeo(datasource)\" iconSvg=\"globe\" [width]=\"18\" [height]=\"18\"></pry-icon>\n          </button>\n        }\n      }\n    </div>\n  </div>\n  <pry-datasource-list\n    mode=\"selector\"\n    [selectedDatasources]=\"(selectedIds$ | async) ?? []\"\n    (datasourceSelected)=\"updateDatasourceList($event)\"\n    (searchOrCategoryChanged)=\"searchOrCategoryChanged$.next()\"\n  ></pry-datasource-list>\n  @if (showButtons) {\n    <div class=\"m-btn-group o-datasource-selector__footer\">\n      <button type=\"button\" (click)=\"cancel.emit()\" class=\"a-btn a-btn--secondary\">\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n      <button\n        type=\"button\"\n        (click)=\"validated.emit()\"\n        #validate\n        (keydown.tab)=\"nextTab.emit()\"\n        class=\"a-btn a-btn--primary\"\n      >\n        {{ '@pry.toolbox.manifest.validated' | i18n }}\n      </button>\n    </div>\n  }\n</div>\n" }]
+            args: [{ selector: 'pry-datasource-selector', template: "<div class=\"o-datasource-selector u-display-flex -column\">\n  @if (showTitle) {\n    <h2 class=\"u-self-center\">{{ '@pry.components.datasourceSelector.select' | i18n }}</h2>\n  }\n  <div>\n    <h3>\n      {{ '@pry.components.datasourceSelector.selection' | i18n }} ({{ ((selectedDatasources$ | async) ?? []).length }})\n    </h3>\n    <div class=\"o-datasource-selector__chips u-display-flex -wrap -gap-10\">\n      @if ((selectedDatasources$ | async)?.length === 0) {\n        <span class=\"a-label -italic\">{{ '@pry.components.datasourceSelector.noItemSelected' | i18n }}</span>\n      } @else {\n        @for (datasource of selectedDatasources$ | async; track datasource.id) {\n          <button\n            class=\"a-chip a-chip--ghost -lg a-tooltip\"\n            [attr.data-tooltip]=\"'@pry.components.datasourceSelector.unselectItem' | i18n\"\n            type=\"button\"\n            (click)=\"toggleSelection(datasource.id)\"\n            >\n            <pry-icon iconSvg=\"close\" [width]=\"15\" [height]=\"15\"></pry-icon>\n            {{ datasource.name }}\n            @if (isGeo(datasource)) {\n              <pry-icon iconSvg=\"globe\" [width]=\"18\" [height]=\"18\"></pry-icon>\n            }\n          </button>\n        }\n      }\n    </div>\n  </div>\n  <pry-datasource-list\n    mode=\"selector\"\n    [selectedDatasources]=\"(selectedIds$ | async) ?? []\"\n    (datasourceSelected)=\"updateDatasourceList($event)\"\n    (searchOrCategoryChanged)=\"searchOrCategoryChanged$.next()\"\n  ></pry-datasource-list>\n  @if (showButtons) {\n    <div class=\"m-btn-group o-datasource-selector__footer\">\n      <button type=\"button\" (click)=\"cancel.emit()\" class=\"a-btn a-btn--secondary\">\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n      <button\n        type=\"button\"\n        (click)=\"validated.emit()\"\n        #validate\n        (keydown.tab)=\"nextTab.emit()\"\n        class=\"a-btn a-btn--primary\"\n        >\n        {{ '@pry.toolbox.manifest.validated' | i18n }}\n      </button>\n    </div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: i0.ChangeDetectorRef }], propDecorators: { showButtons: [{
                 type: Input
             }], showTitle: [{
@@ -11372,13 +11386,13 @@ class PryWidgetHeaderComponent extends SubscriptionnerDirective {
         this.subscription?.unsubscribe();
         this.openSub?.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryWidgetHeaderComponent, deps: [{ token: i1.Store }, { token: i2.Overlay }, { token: i0.ViewContainerRef }, { token: ToolboxMenuService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: PryWidgetHeaderComponent, selector: "pry-widget-header", inputs: { manifest: "manifest", openData$: "openData$", additionalOptions: "additionalOptions", headerOptions: "headerOptions", displayCount: "displayCount", datasourceIds: "datasourceIds", widgetIndex: "widgetIndex" }, outputs: { manifestModified: "manifestModified" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, read: TemplateRef }, { propertyName: "templateModal", first: true, predicate: ["templateModal"], descendants: true, read: TemplateRef }, { propertyName: "toggle", first: true, predicate: ["toggle"], descendants: true, read: TemplateRef }, { propertyName: "overlayMenu", first: true, predicate: ["overlayMenu"], descendants: true, read: TemplateRef }, { propertyName: "overlayCatalog", first: true, predicate: ["overlayCatalog"], descendants: true, read: TemplateRef }, { propertyName: "overlaySpot", first: true, predicate: ["overlaySpot"], descendants: true, read: TemplateRef }, { propertyName: "togglePanel", first: true, predicate: ["togglePanel"], descendants: true }, { propertyName: "cross", first: true, predicate: ["cross"], descendants: true }, { propertyName: "validate", first: true, predicate: ["validate"], descendants: true }, { propertyName: "validateCatalog", first: true, predicate: ["validateCatalog"], descendants: true }, { propertyName: "cancel", first: true, predicate: ["cancel"], descendants: true }, { propertyName: "crossCatalog", first: true, predicate: ["crossCatalog"], descendants: true }, { propertyName: "inputCatalog", first: true, predicate: ["inputCatalog"], descendants: true }, { propertyName: "menuList", first: true, predicate: ["menuList"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"o-widget__header\">\n  <div class=\"o-widget__header__content\">\n    <h2 class=\"o-widget__header__content__title\" *ngIf=\"(manifest$ | async)?.title; else querySelector\">\n      {{ (manifest$ | async)?.title }}\n    </h2>\n    <ng-template #querySelector>\n      <div *ngFor=\"let ds of usedDatasources$ | async\" class=\"o-widget__header__content__query\">\n        <ng-container\n          *ngIf=\"ds.id | translateId: { type: 'datasource', output: 'icon', noDefault: true } | async as url\"\n        >\n          <img [height]=\"20\" [src]=\"url\" [width]=\"20\" alt=\"\" class=\"o-widget__header__content__query__icon\" />\n        </ng-container>\n        <h3 class=\"o-widget__header__content__query__name\">{{ ds.name }}</h3>\n        <h3 class=\"o-widget__header__content__query__name\" *ngIf=\"displayCount && !isGeo(ds)\">\n          ({{ [ds.id] | resultSetSize | async }})\n        </h3>\n      </div>\n      <div *ngIf=\"((usedDatasources$ | async) ?? []).length === 0\" class=\"o-widget__header__content__no-data\">\n        <h2 class=\"o-widget__header__content__title\">{{ '@pry.widget.noData' | i18n }}</h2>\n      </div>\n    </ng-template>\n  </div>\n  <div class=\"m-btn-group\" *ngIf=\"displayContextMenu$ | async as options\">\n    <button\n      type=\"button\"\n      id=\"dialog_Menu\"\n      aria-controls=\"menu\"\n      [attr.aria-expanded]=\"this.menu\"\n      #togglePanel\n      class=\"a-btn a-btn--more\"\n      (click)=\"menuOpen($event)\"\n    >\n      <pry-icon [height]=\"25\" [width]=\"25\" iconSvg=\"more_horiz\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.action.openMenuWidget' | i18n }}</span>\n    </button>\n  </div>\n</div>\n\n<ng-template #overlayMenu>\n  <div class=\"m-context-menu\" *ngIf=\"displayContextMenu$ | async as options\">\n    <ul\n      class=\"m-context-menu__list\"\n      #menuList\n      id=\"menu\"\n      role=\"menu\"\n      aria-modal=\"true\"\n      aria-labelledby=\"dialog_Menu\"\n      (keydown.arrowDown)=\"onArrowDown()\"\n      (keydown.arrowUp)=\"onArrowUp()\"\n      (keydown.escape)=\"menuOpen()\"\n    >\n      <li\n        class=\"m-context-menu__list__item\"\n        role=\"none\"\n        *ngIf=\"options === true || options['datasourceSelection'] === true\"\n      >\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          tabindex=\"-1\"\n          id=\"toggleActions\"\n          (click)=\"toggleDatasourceSelection()\"\n          *pryAccess=\"{ module: 'dashboard', page: 'widget', action: 'select_named_query' }\"\n          class=\"a-btn\"\n        >\n          <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"stack-fill\"></pry-icon>\n          <span>{{ '@pry.widget.tooltip.readSearch' | i18n }}</span>\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngIf=\"options === true || options!['parameters'] === true\">\n        <ng-content></ng-content>\n      </li>\n      <ng-container *ngIf=\"options === true || options!['window'] === true\">\n        <li class=\"m-context-menu__list__item\" role=\"none\" *ngFor=\"let targetIndex of targetIndexes$ | async\">\n          <button\n            type=\"button\"\n            (click)=\"moveInNewWindow(_widgetIndex, targetIndex)\"\n            class=\"a-btn\"\n            role=\"menuitem\"\n            tabindex=\"-1\"\n          >\n            <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"launch\"></pry-icon>\n            {{\n              (targetIndex !== -1 ? '@pry.widget.target.existing' : '@pry.widget.target.new')\n                | i18n: { targetIndex: this.targetIndex + 1 }\n            }}\n          </button>\n        </li>\n      </ng-container>\n      <li\n        class=\"m-context-menu__list__item\"\n        role=\"none\"\n        *ngIf=\"hasGrid && (options === true || options!['changeSpot'] === true)\"\n      >\n        <button type=\"button\" role=\"menuitem\" (click)=\"toggleChangeSpot()\" class=\"a-btn\" tabindex=\"-1\">\n          <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"move\"></pry-icon>\n          <span>{{ '@pry.widget.tooltip.changeSpot' | i18n }}</span>\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngIf=\"options === true || options!['maximize'] === true\">\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          tabindex=\"-1\"\n          (click)=\"maximize(_widgetIndex)\"\n          class=\"a-btn\"\n          (keydown.escape)=\"menuOpen()\"\n        >\n          <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"fullscreen\"></pry-icon>\n          {{ '@pry.widget.target.maximize' | i18n }}\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngIf=\"options === true || options!['addToCatalog'] === true\">\n        <button type=\"button\" role=\"menuitem\" tabindex=\"-1\" (click)=\"toggleCatalog()\" class=\"a-btn\">\n          <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"library_add\"></pry-icon>\n          <span>{{ '@pry.widget.tooltip.catalogWidget' | i18n }}</span>\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngIf=\"options === true || options!['delete'] === true\">\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          tabindex=\"-1\"\n          (click)=\"toggleRemoveConfirm($event)\"\n          class=\"a-btn\"\n          (keydown.tab)=\"menuOpen()\"\n        >\n          <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"delete\"></pry-icon>\n          <span>{{ '@pry.widget.tooltip.deleteWidget' | i18n }}</span>\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngFor=\"let option of additionalOptions\">\n        <button\n          type=\"button\"\n          class=\"a-btn\"\n          role=\"menuitem\"\n          tabindex=\"-1\"\n          (click)=\"executeAction(option)\"\n          [disabled]=\"isActionDisabled(option)\"\n        >\n          <pry-icon [height]=\"17\" [width]=\"17\" [iconSvg]=\"option.icon\"></pry-icon>\n          {{ option.label | i18n }}\n        </button>\n      </li>\n    </ul>\n  </div>\n</ng-template>\n\n<ng-template #templateModal>\n  <div\n    class=\"o-modal\"\n    (keydown.escape)=\"cancelRemoveConfirm()\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-labelledby=\"dialog confirm delete presentation\"\n  >\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ '@pry.widget.modalTitle' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" #cross (click)=\"cancelRemoveConfirm()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <div class=\"m-btn-group\">\n      <button type=\"button\" (click)=\"cancelRemoveConfirm()\" class=\"a-btn a-btn--secondary\">\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n      <button type=\"submit\" (click)=\"confirmRemove()\" class=\"a-btn a-btn--primary\" (keydown.tab)=\"focusCrossElement()\">\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #template>\n  <pry-datasource-selector\n    [manifest]=\"manifest$ | async\"\n    (cancel)=\"toggleDatasourceSelection()\"\n    (validated)=\"emitManifest()\"\n    (nextTab)=\"focusInputCatalog()\"\n    (previousTab)=\"focusValidation()\"\n    (itemsChanged)=\"datasourcesChanged($event)\"\n  ></pry-datasource-selector>\n</ng-template>\n\n<ng-template #overlayCatalog>\n  <div\n    class=\"o-modal\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-labelledby=\"dialog_Catalog\"\n    (keydown.escape)=\"toggleCatalog()\"\n  >\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\">\n          {{ '@pry.widget.defineCatalog' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button\n          class=\"a-btn a-btn--icon-only\"\n          (keydown.shift.tab)=\"focusValidation()\"\n          #crossCatalog\n          (click)=\"toggleCatalog()\"\n        >\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <div class=\"m-form-label-field\">\n      <label class=\"a-label\" for=\"name\">{{ '@pry.toolbox.catalog.label' | i18n }}</label>\n      <input [(ngModel)]=\"catalogInfo.name\" id=\"name\" type=\"text\" class=\"a-form-field\" required />\n    </div>\n    <div class=\"m-form-label-field\">\n      <label class=\"a-label\" for=\"description\">{{ '@pry.toolbox.catalog.description' | i18n }}</label>\n      <input [(ngModel)]=\"catalogInfo.description\" id=\"description\" type=\"text\" class=\"a-form-field\" required />\n    </div>\n    <div class=\"m-form-label-field\">\n      <pry-select-image\n        [iconUrl]=\"catalogInfo.image\"\n        (changed)=\"catalogInfo.image = $event\"\n        [mode]=\"type\"\n      ></pry-select-image>\n    </div>\n    <div class=\"m-btn-group\">\n      <button\n        type=\"button\"\n        (click)=\"toggleCatalog()\"\n        #cancel\n        (keydown.tab)=\"disableValidation()\"\n        class=\"a-btn a-btn--secondary\"\n      >\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n      <button\n        type=\"submit\"\n        #validateCatalog\n        (click)=\"confirmCatalog()\"\n        [disabled]=\"!toolboxMenuService.isValidForCatalog(catalogInfo.name)\"\n        class=\"a-btn a-btn--primary\"\n        (keydown.tab)=\"focusCrossElement()\"\n      >\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #overlaySpot>\n  <div class=\"o-modal -place\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\">\n          {{ '@pry.widget.tooltip.changeSpot' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"toggleChangeSpot()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <pry-dashboard\n      [staticDashboard]=\"targetManifest!\"\n      [breakpoint]=\"10\"\n      [noBackground]=\"true\"\n      [forceModeEdition]=\"false\"\n    ></pry-dashboard>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$3.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: "directive", type: PryAccessDirective, selector: "[pryAccess]", inputs: ["pryAccess"] }, { kind: "component", type: PrySelectImageComponent, selector: "pry-select-image", inputs: ["iconUrl", "size", "mode"], outputs: ["toggled", "changed"] }, { kind: "component", type: DashboardComponent, selector: "pry-dashboard", inputs: ["staticDashboard", "forceModeEdition", "CloseOnDragOut", "displayOptions", "noBackground", "breakpoint"], outputs: ["rowHeight", "rows"] }, { kind: "component", type: DatasourceSelectorComponent, selector: "pry-datasource-selector", inputs: ["showButtons", "showTitle", "manifest"], outputs: ["previousTab", "nextTab", "cancel", "validated", "itemsChanged"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslateIdPipe, name: "translateId" }, { kind: "pipe", type: I18nPipe, name: "i18n" }, { kind: "pipe", type: ResultSetSizePipe, name: "resultSetSize" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryWidgetHeaderComponent, deps: [{ token: i1.Store }, { token: i2$1.Overlay }, { token: i0.ViewContainerRef }, { token: ToolboxMenuService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: PryWidgetHeaderComponent, selector: "pry-widget-header", inputs: { manifest: "manifest", openData$: "openData$", additionalOptions: "additionalOptions", headerOptions: "headerOptions", displayCount: "displayCount", datasourceIds: "datasourceIds", widgetIndex: "widgetIndex" }, outputs: { manifestModified: "manifestModified" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, read: TemplateRef }, { propertyName: "templateModal", first: true, predicate: ["templateModal"], descendants: true, read: TemplateRef }, { propertyName: "toggle", first: true, predicate: ["toggle"], descendants: true, read: TemplateRef }, { propertyName: "overlayMenu", first: true, predicate: ["overlayMenu"], descendants: true, read: TemplateRef }, { propertyName: "overlayCatalog", first: true, predicate: ["overlayCatalog"], descendants: true, read: TemplateRef }, { propertyName: "overlaySpot", first: true, predicate: ["overlaySpot"], descendants: true, read: TemplateRef }, { propertyName: "togglePanel", first: true, predicate: ["togglePanel"], descendants: true }, { propertyName: "cross", first: true, predicate: ["cross"], descendants: true }, { propertyName: "validate", first: true, predicate: ["validate"], descendants: true }, { propertyName: "validateCatalog", first: true, predicate: ["validateCatalog"], descendants: true }, { propertyName: "cancel", first: true, predicate: ["cancel"], descendants: true }, { propertyName: "crossCatalog", first: true, predicate: ["crossCatalog"], descendants: true }, { propertyName: "inputCatalog", first: true, predicate: ["inputCatalog"], descendants: true }, { propertyName: "menuList", first: true, predicate: ["menuList"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"o-widget__header\">\n  <div class=\"o-widget__header__content\">\n    @if ((manifest$ | async)?.title) {\n      <h2 class=\"o-widget__header__content__title\">\n        {{ (manifest$ | async)?.title }}\n      </h2>\n    } @else {\n      @for (ds of usedDatasources$ | async; track ds) {\n        <div class=\"o-widget__header__content__query\">\n          @if (ds.id | translateId: { type: 'datasource', output: 'icon', noDefault: true } | async; as url) {\n            <img [height]=\"20\" [src]=\"url\" [width]=\"20\" alt=\"\" class=\"o-widget__header__content__query__icon\" />\n          }\n          <h3 class=\"o-widget__header__content__query__name\">{{ ds.name }}</h3>\n          @if (displayCount && !isGeo(ds)) {\n            <h3 class=\"o-widget__header__content__query__name\">\n              ({{ [ds.id] | resultSetSize | async }})\n            </h3>\n          }\n        </div>\n      }\n      @if (((usedDatasources$ | async) ?? []).length === 0) {\n        <div class=\"o-widget__header__content__no-data\">\n          <h2 class=\"o-widget__header__content__title\">{{ '@pry.widget.noData' | i18n }}</h2>\n        </div>\n      }\n    }\n  </div>\n  @if (displayContextMenu$ | async; as options) {\n    <div class=\"m-btn-group\">\n      <button\n        type=\"button\"\n        id=\"dialog_Menu\"\n        aria-controls=\"menu\"\n        [attr.aria-expanded]=\"this.menu\"\n        #togglePanel\n        class=\"a-btn a-btn--more\"\n        (click)=\"menuOpen($event)\"\n        >\n        <pry-icon [height]=\"25\" [width]=\"25\" iconSvg=\"more_horiz\"></pry-icon>\n        <span class=\"u-visually-hidden\">{{ '@pry.action.openMenuWidget' | i18n }}</span>\n      </button>\n    </div>\n  }\n</div>\n\n<ng-template #overlayMenu>\n  @if (displayContextMenu$ | async; as options) {\n    <div class=\"m-context-menu\">\n      <ul\n        class=\"m-context-menu__list\"\n        #menuList\n        id=\"menu\"\n        role=\"menu\"\n        aria-modal=\"true\"\n        aria-labelledby=\"dialog_Menu\"\n        (keydown.arrowDown)=\"onArrowDown()\"\n        (keydown.arrowUp)=\"onArrowUp()\"\n        (keydown.escape)=\"menuOpen()\"\n        >\n        @if (options === true || options['datasourceSelection'] === true) {\n          <li\n            class=\"m-context-menu__list__item\"\n            role=\"none\"\n            >\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              tabindex=\"-1\"\n              id=\"toggleActions\"\n              (click)=\"toggleDatasourceSelection()\"\n              *pryAccess=\"{ module: 'dashboard', page: 'widget', action: 'select_named_query' }\"\n              class=\"a-btn\"\n              >\n              <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"stack-fill\"></pry-icon>\n              <span>{{ '@pry.widget.tooltip.readSearch' | i18n }}</span>\n            </button>\n          </li>\n        }\n        @if (options === true || options!['parameters'] === true) {\n          <li class=\"m-context-menu__list__item\" role=\"none\">\n            <ng-content></ng-content>\n          </li>\n        }\n        @if (options === true || options!['window'] === true) {\n          @for (targetIndex of targetIndexes$ | async; track targetIndex) {\n            <li class=\"m-context-menu__list__item\" role=\"none\">\n              <button\n                type=\"button\"\n                (click)=\"moveInNewWindow(_widgetIndex, targetIndex)\"\n                class=\"a-btn\"\n                role=\"menuitem\"\n                tabindex=\"-1\"\n                >\n                <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"launch\"></pry-icon>\n                {{\n                (targetIndex !== -1 ? '@pry.widget.target.existing' : '@pry.widget.target.new')\n                | i18n: { targetIndex: this.targetIndex + 1 }\n                }}\n              </button>\n            </li>\n          }\n        }\n        @if (hasGrid && (options === true || options!['changeSpot'] === true)) {\n          <li\n            class=\"m-context-menu__list__item\"\n            role=\"none\"\n            >\n            <button type=\"button\" role=\"menuitem\" (click)=\"toggleChangeSpot()\" class=\"a-btn\" tabindex=\"-1\">\n              <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"move\"></pry-icon>\n              <span>{{ '@pry.widget.tooltip.changeSpot' | i18n }}</span>\n            </button>\n          </li>\n        }\n        @if (options === true || options!['maximize'] === true) {\n          <li class=\"m-context-menu__list__item\" role=\"none\">\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              tabindex=\"-1\"\n              (click)=\"maximize(_widgetIndex)\"\n              class=\"a-btn\"\n              (keydown.escape)=\"menuOpen()\"\n              >\n              <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"fullscreen\"></pry-icon>\n              {{ '@pry.widget.target.maximize' | i18n }}\n            </button>\n          </li>\n        }\n        @if (options === true || options!['addToCatalog'] === true) {\n          <li class=\"m-context-menu__list__item\" role=\"none\">\n            <button type=\"button\" role=\"menuitem\" tabindex=\"-1\" (click)=\"toggleCatalog()\" class=\"a-btn\">\n              <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"library_add\"></pry-icon>\n              <span>{{ '@pry.widget.tooltip.catalogWidget' | i18n }}</span>\n            </button>\n          </li>\n        }\n        @if (options === true || options!['delete'] === true) {\n          <li class=\"m-context-menu__list__item\" role=\"none\">\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              tabindex=\"-1\"\n              (click)=\"toggleRemoveConfirm($event)\"\n              class=\"a-btn\"\n              (keydown.tab)=\"menuOpen()\"\n              >\n              <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"delete\"></pry-icon>\n              <span>{{ '@pry.widget.tooltip.deleteWidget' | i18n }}</span>\n            </button>\n          </li>\n        }\n        @for (option of additionalOptions; track option) {\n          <li class=\"m-context-menu__list__item\" role=\"none\">\n            <button\n              type=\"button\"\n              class=\"a-btn\"\n              role=\"menuitem\"\n              tabindex=\"-1\"\n              (click)=\"executeAction(option)\"\n              [disabled]=\"isActionDisabled(option)\"\n              >\n              <pry-icon [height]=\"17\" [width]=\"17\" [iconSvg]=\"option.icon\"></pry-icon>\n              {{ option.label | i18n }}\n            </button>\n          </li>\n        }\n      </ul>\n    </div>\n  }\n</ng-template>\n\n<ng-template #templateModal>\n  <div\n    class=\"o-modal\"\n    (keydown.escape)=\"cancelRemoveConfirm()\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-labelledby=\"dialog confirm delete presentation\"\n    >\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ '@pry.widget.modalTitle' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" #cross (click)=\"cancelRemoveConfirm()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <div class=\"m-btn-group\">\n      <button type=\"button\" (click)=\"cancelRemoveConfirm()\" class=\"a-btn a-btn--secondary\">\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n      <button type=\"submit\" (click)=\"confirmRemove()\" class=\"a-btn a-btn--primary\" (keydown.tab)=\"focusCrossElement()\">\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #template>\n  <pry-datasource-selector\n    [manifest]=\"manifest$ | async\"\n    (cancel)=\"toggleDatasourceSelection()\"\n    (validated)=\"emitManifest()\"\n    (nextTab)=\"focusInputCatalog()\"\n    (previousTab)=\"focusValidation()\"\n    (itemsChanged)=\"datasourcesChanged($event)\"\n  ></pry-datasource-selector>\n</ng-template>\n\n<ng-template #overlayCatalog>\n  <div\n    class=\"o-modal\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-labelledby=\"dialog_Catalog\"\n    (keydown.escape)=\"toggleCatalog()\"\n    >\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\">\n          {{ '@pry.widget.defineCatalog' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button\n          class=\"a-btn a-btn--icon-only\"\n          (keydown.shift.tab)=\"focusValidation()\"\n          #crossCatalog\n          (click)=\"toggleCatalog()\"\n          >\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <div class=\"m-form-label-field\">\n      <label class=\"a-label\" for=\"name\">{{ '@pry.toolbox.catalog.label' | i18n }}</label>\n      <input [(ngModel)]=\"catalogInfo.name\" id=\"name\" type=\"text\" class=\"a-form-field\" required />\n    </div>\n    <div class=\"m-form-label-field\">\n      <label class=\"a-label\" for=\"description\">{{ '@pry.toolbox.catalog.description' | i18n }}</label>\n      <input [(ngModel)]=\"catalogInfo.description\" id=\"description\" type=\"text\" class=\"a-form-field\" required />\n    </div>\n    <div class=\"m-form-label-field\">\n      <pry-select-image\n        [iconUrl]=\"catalogInfo.image\"\n        (changed)=\"catalogInfo.image = $event\"\n        [mode]=\"type\"\n      ></pry-select-image>\n    </div>\n    <div class=\"m-btn-group\">\n      <button\n        type=\"button\"\n        (click)=\"toggleCatalog()\"\n        #cancel\n        (keydown.tab)=\"disableValidation()\"\n        class=\"a-btn a-btn--secondary\"\n        >\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n      <button\n        type=\"submit\"\n        #validateCatalog\n        (click)=\"confirmCatalog()\"\n        [disabled]=\"!toolboxMenuService.isValidForCatalog(catalogInfo.name)\"\n        class=\"a-btn a-btn--primary\"\n        (keydown.tab)=\"focusCrossElement()\"\n        >\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #overlaySpot>\n  <div class=\"o-modal -place\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\">\n          {{ '@pry.widget.tooltip.changeSpot' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"toggleChangeSpot()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <pry-dashboard\n      [staticDashboard]=\"targetManifest!\"\n      [breakpoint]=\"10\"\n      [noBackground]=\"true\"\n      [forceModeEdition]=\"false\"\n    ></pry-dashboard>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2$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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.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: "directive", type: PryAccessDirective, selector: "[pryAccess]", inputs: ["pryAccess"] }, { kind: "component", type: PrySelectImageComponent, selector: "pry-select-image", inputs: ["iconUrl", "size", "mode"], outputs: ["toggled", "changed"] }, { kind: "component", type: DashboardComponent, selector: "pry-dashboard", inputs: ["staticDashboard", "forceModeEdition", "CloseOnDragOut", "displayOptions", "noBackground", "breakpoint"], outputs: ["rowHeight", "rows"] }, { kind: "component", type: DatasourceSelectorComponent, selector: "pry-datasource-selector", inputs: ["showButtons", "showTitle", "manifest"], outputs: ["previousTab", "nextTab", "cancel", "validated", "itemsChanged"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslateIdPipe, name: "translateId" }, { kind: "pipe", type: I18nPipe, name: "i18n" }, { kind: "pipe", type: ResultSetSizePipe, name: "resultSetSize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryWidgetHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-widget-header', template: "<div class=\"o-widget__header\">\n  <div class=\"o-widget__header__content\">\n    <h2 class=\"o-widget__header__content__title\" *ngIf=\"(manifest$ | async)?.title; else querySelector\">\n      {{ (manifest$ | async)?.title }}\n    </h2>\n    <ng-template #querySelector>\n      <div *ngFor=\"let ds of usedDatasources$ | async\" class=\"o-widget__header__content__query\">\n        <ng-container\n          *ngIf=\"ds.id | translateId: { type: 'datasource', output: 'icon', noDefault: true } | async as url\"\n        >\n          <img [height]=\"20\" [src]=\"url\" [width]=\"20\" alt=\"\" class=\"o-widget__header__content__query__icon\" />\n        </ng-container>\n        <h3 class=\"o-widget__header__content__query__name\">{{ ds.name }}</h3>\n        <h3 class=\"o-widget__header__content__query__name\" *ngIf=\"displayCount && !isGeo(ds)\">\n          ({{ [ds.id] | resultSetSize | async }})\n        </h3>\n      </div>\n      <div *ngIf=\"((usedDatasources$ | async) ?? []).length === 0\" class=\"o-widget__header__content__no-data\">\n        <h2 class=\"o-widget__header__content__title\">{{ '@pry.widget.noData' | i18n }}</h2>\n      </div>\n    </ng-template>\n  </div>\n  <div class=\"m-btn-group\" *ngIf=\"displayContextMenu$ | async as options\">\n    <button\n      type=\"button\"\n      id=\"dialog_Menu\"\n      aria-controls=\"menu\"\n      [attr.aria-expanded]=\"this.menu\"\n      #togglePanel\n      class=\"a-btn a-btn--more\"\n      (click)=\"menuOpen($event)\"\n    >\n      <pry-icon [height]=\"25\" [width]=\"25\" iconSvg=\"more_horiz\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.action.openMenuWidget' | i18n }}</span>\n    </button>\n  </div>\n</div>\n\n<ng-template #overlayMenu>\n  <div class=\"m-context-menu\" *ngIf=\"displayContextMenu$ | async as options\">\n    <ul\n      class=\"m-context-menu__list\"\n      #menuList\n      id=\"menu\"\n      role=\"menu\"\n      aria-modal=\"true\"\n      aria-labelledby=\"dialog_Menu\"\n      (keydown.arrowDown)=\"onArrowDown()\"\n      (keydown.arrowUp)=\"onArrowUp()\"\n      (keydown.escape)=\"menuOpen()\"\n    >\n      <li\n        class=\"m-context-menu__list__item\"\n        role=\"none\"\n        *ngIf=\"options === true || options['datasourceSelection'] === true\"\n      >\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          tabindex=\"-1\"\n          id=\"toggleActions\"\n          (click)=\"toggleDatasourceSelection()\"\n          *pryAccess=\"{ module: 'dashboard', page: 'widget', action: 'select_named_query' }\"\n          class=\"a-btn\"\n        >\n          <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"stack-fill\"></pry-icon>\n          <span>{{ '@pry.widget.tooltip.readSearch' | i18n }}</span>\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngIf=\"options === true || options!['parameters'] === true\">\n        <ng-content></ng-content>\n      </li>\n      <ng-container *ngIf=\"options === true || options!['window'] === true\">\n        <li class=\"m-context-menu__list__item\" role=\"none\" *ngFor=\"let targetIndex of targetIndexes$ | async\">\n          <button\n            type=\"button\"\n            (click)=\"moveInNewWindow(_widgetIndex, targetIndex)\"\n            class=\"a-btn\"\n            role=\"menuitem\"\n            tabindex=\"-1\"\n          >\n            <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"launch\"></pry-icon>\n            {{\n              (targetIndex !== -1 ? '@pry.widget.target.existing' : '@pry.widget.target.new')\n                | i18n: { targetIndex: this.targetIndex + 1 }\n            }}\n          </button>\n        </li>\n      </ng-container>\n      <li\n        class=\"m-context-menu__list__item\"\n        role=\"none\"\n        *ngIf=\"hasGrid && (options === true || options!['changeSpot'] === true)\"\n      >\n        <button type=\"button\" role=\"menuitem\" (click)=\"toggleChangeSpot()\" class=\"a-btn\" tabindex=\"-1\">\n          <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"move\"></pry-icon>\n          <span>{{ '@pry.widget.tooltip.changeSpot' | i18n }}</span>\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngIf=\"options === true || options!['maximize'] === true\">\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          tabindex=\"-1\"\n          (click)=\"maximize(_widgetIndex)\"\n          class=\"a-btn\"\n          (keydown.escape)=\"menuOpen()\"\n        >\n          <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"fullscreen\"></pry-icon>\n          {{ '@pry.widget.target.maximize' | i18n }}\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngIf=\"options === true || options!['addToCatalog'] === true\">\n        <button type=\"button\" role=\"menuitem\" tabindex=\"-1\" (click)=\"toggleCatalog()\" class=\"a-btn\">\n          <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"library_add\"></pry-icon>\n          <span>{{ '@pry.widget.tooltip.catalogWidget' | i18n }}</span>\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngIf=\"options === true || options!['delete'] === true\">\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          tabindex=\"-1\"\n          (click)=\"toggleRemoveConfirm($event)\"\n          class=\"a-btn\"\n          (keydown.tab)=\"menuOpen()\"\n        >\n          <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"delete\"></pry-icon>\n          <span>{{ '@pry.widget.tooltip.deleteWidget' | i18n }}</span>\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngFor=\"let option of additionalOptions\">\n        <button\n          type=\"button\"\n          class=\"a-btn\"\n          role=\"menuitem\"\n          tabindex=\"-1\"\n          (click)=\"executeAction(option)\"\n          [disabled]=\"isActionDisabled(option)\"\n        >\n          <pry-icon [height]=\"17\" [width]=\"17\" [iconSvg]=\"option.icon\"></pry-icon>\n          {{ option.label | i18n }}\n        </button>\n      </li>\n    </ul>\n  </div>\n</ng-template>\n\n<ng-template #templateModal>\n  <div\n    class=\"o-modal\"\n    (keydown.escape)=\"cancelRemoveConfirm()\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-labelledby=\"dialog confirm delete presentation\"\n  >\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ '@pry.widget.modalTitle' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" #cross (click)=\"cancelRemoveConfirm()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <div class=\"m-btn-group\">\n      <button type=\"button\" (click)=\"cancelRemoveConfirm()\" class=\"a-btn a-btn--secondary\">\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n      <button type=\"submit\" (click)=\"confirmRemove()\" class=\"a-btn a-btn--primary\" (keydown.tab)=\"focusCrossElement()\">\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #template>\n  <pry-datasource-selector\n    [manifest]=\"manifest$ | async\"\n    (cancel)=\"toggleDatasourceSelection()\"\n    (validated)=\"emitManifest()\"\n    (nextTab)=\"focusInputCatalog()\"\n    (previousTab)=\"focusValidation()\"\n    (itemsChanged)=\"datasourcesChanged($event)\"\n  ></pry-datasource-selector>\n</ng-template>\n\n<ng-template #overlayCatalog>\n  <div\n    class=\"o-modal\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-labelledby=\"dialog_Catalog\"\n    (keydown.escape)=\"toggleCatalog()\"\n  >\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\">\n          {{ '@pry.widget.defineCatalog' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button\n          class=\"a-btn a-btn--icon-only\"\n          (keydown.shift.tab)=\"focusValidation()\"\n          #crossCatalog\n          (click)=\"toggleCatalog()\"\n        >\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <div class=\"m-form-label-field\">\n      <label class=\"a-label\" for=\"name\">{{ '@pry.toolbox.catalog.label' | i18n }}</label>\n      <input [(ngModel)]=\"catalogInfo.name\" id=\"name\" type=\"text\" class=\"a-form-field\" required />\n    </div>\n    <div class=\"m-form-label-field\">\n      <label class=\"a-label\" for=\"description\">{{ '@pry.toolbox.catalog.description' | i18n }}</label>\n      <input [(ngModel)]=\"catalogInfo.description\" id=\"description\" type=\"text\" class=\"a-form-field\" required />\n    </div>\n    <div class=\"m-form-label-field\">\n      <pry-select-image\n        [iconUrl]=\"catalogInfo.image\"\n        (changed)=\"catalogInfo.image = $event\"\n        [mode]=\"type\"\n      ></pry-select-image>\n    </div>\n    <div class=\"m-btn-group\">\n      <button\n        type=\"button\"\n        (click)=\"toggleCatalog()\"\n        #cancel\n        (keydown.tab)=\"disableValidation()\"\n        class=\"a-btn a-btn--secondary\"\n      >\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n      <button\n        type=\"submit\"\n        #validateCatalog\n        (click)=\"confirmCatalog()\"\n        [disabled]=\"!toolboxMenuService.isValidForCatalog(catalogInfo.name)\"\n        class=\"a-btn a-btn--primary\"\n        (keydown.tab)=\"focusCrossElement()\"\n      >\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #overlaySpot>\n  <div class=\"o-modal -place\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\">\n          {{ '@pry.widget.tooltip.changeSpot' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"toggleChangeSpot()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <pry-dashboard\n      [staticDashboard]=\"targetManifest!\"\n      [breakpoint]=\"10\"\n      [noBackground]=\"true\"\n      [forceModeEdition]=\"false\"\n    ></pry-dashboard>\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Overlay }, { type: i0.ViewContainerRef }, { type: ToolboxMenuService }], propDecorators: { template: [{
+            args: [{ selector: 'pry-widget-header', template: "<div class=\"o-widget__header\">\n  <div class=\"o-widget__header__content\">\n    @if ((manifest$ | async)?.title) {\n      <h2 class=\"o-widget__header__content__title\">\n        {{ (manifest$ | async)?.title }}\n      </h2>\n    } @else {\n      @for (ds of usedDatasources$ | async; track ds) {\n        <div class=\"o-widget__header__content__query\">\n          @if (ds.id | translateId: { type: 'datasource', output: 'icon', noDefault: true } | async; as url) {\n            <img [height]=\"20\" [src]=\"url\" [width]=\"20\" alt=\"\" class=\"o-widget__header__content__query__icon\" />\n          }\n          <h3 class=\"o-widget__header__content__query__name\">{{ ds.name }}</h3>\n          @if (displayCount && !isGeo(ds)) {\n            <h3 class=\"o-widget__header__content__query__name\">\n              ({{ [ds.id] | resultSetSize | async }})\n            </h3>\n          }\n        </div>\n      }\n      @if (((usedDatasources$ | async) ?? []).length === 0) {\n        <div class=\"o-widget__header__content__no-data\">\n          <h2 class=\"o-widget__header__content__title\">{{ '@pry.widget.noData' | i18n }}</h2>\n        </div>\n      }\n    }\n  </div>\n  @if (displayContextMenu$ | async; as options) {\n    <div class=\"m-btn-group\">\n      <button\n        type=\"button\"\n        id=\"dialog_Menu\"\n        aria-controls=\"menu\"\n        [attr.aria-expanded]=\"this.menu\"\n        #togglePanel\n        class=\"a-btn a-btn--more\"\n        (click)=\"menuOpen($event)\"\n        >\n        <pry-icon [height]=\"25\" [width]=\"25\" iconSvg=\"more_horiz\"></pry-icon>\n        <span class=\"u-visually-hidden\">{{ '@pry.action.openMenuWidget' | i18n }}</span>\n      </button>\n    </div>\n  }\n</div>\n\n<ng-template #overlayMenu>\n  @if (displayContextMenu$ | async; as options) {\n    <div class=\"m-context-menu\">\n      <ul\n        class=\"m-context-menu__list\"\n        #menuList\n        id=\"menu\"\n        role=\"menu\"\n        aria-modal=\"true\"\n        aria-labelledby=\"dialog_Menu\"\n        (keydown.arrowDown)=\"onArrowDown()\"\n        (keydown.arrowUp)=\"onArrowUp()\"\n        (keydown.escape)=\"menuOpen()\"\n        >\n        @if (options === true || options['datasourceSelection'] === true) {\n          <li\n            class=\"m-context-menu__list__item\"\n            role=\"none\"\n            >\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              tabindex=\"-1\"\n              id=\"toggleActions\"\n              (click)=\"toggleDatasourceSelection()\"\n              *pryAccess=\"{ module: 'dashboard', page: 'widget', action: 'select_named_query' }\"\n              class=\"a-btn\"\n              >\n              <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"stack-fill\"></pry-icon>\n              <span>{{ '@pry.widget.tooltip.readSearch' | i18n }}</span>\n            </button>\n          </li>\n        }\n        @if (options === true || options!['parameters'] === true) {\n          <li class=\"m-context-menu__list__item\" role=\"none\">\n            <ng-content></ng-content>\n          </li>\n        }\n        @if (options === true || options!['window'] === true) {\n          @for (targetIndex of targetIndexes$ | async; track targetIndex) {\n            <li class=\"m-context-menu__list__item\" role=\"none\">\n              <button\n                type=\"button\"\n                (click)=\"moveInNewWindow(_widgetIndex, targetIndex)\"\n                class=\"a-btn\"\n                role=\"menuitem\"\n                tabindex=\"-1\"\n                >\n                <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"launch\"></pry-icon>\n                {{\n                (targetIndex !== -1 ? '@pry.widget.target.existing' : '@pry.widget.target.new')\n                | i18n: { targetIndex: this.targetIndex + 1 }\n                }}\n              </button>\n            </li>\n          }\n        }\n        @if (hasGrid && (options === true || options!['changeSpot'] === true)) {\n          <li\n            class=\"m-context-menu__list__item\"\n            role=\"none\"\n            >\n            <button type=\"button\" role=\"menuitem\" (click)=\"toggleChangeSpot()\" class=\"a-btn\" tabindex=\"-1\">\n              <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"move\"></pry-icon>\n              <span>{{ '@pry.widget.tooltip.changeSpot' | i18n }}</span>\n            </button>\n          </li>\n        }\n        @if (options === true || options!['maximize'] === true) {\n          <li class=\"m-context-menu__list__item\" role=\"none\">\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              tabindex=\"-1\"\n              (click)=\"maximize(_widgetIndex)\"\n              class=\"a-btn\"\n              (keydown.escape)=\"menuOpen()\"\n              >\n              <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"fullscreen\"></pry-icon>\n              {{ '@pry.widget.target.maximize' | i18n }}\n            </button>\n          </li>\n        }\n        @if (options === true || options!['addToCatalog'] === true) {\n          <li class=\"m-context-menu__list__item\" role=\"none\">\n            <button type=\"button\" role=\"menuitem\" tabindex=\"-1\" (click)=\"toggleCatalog()\" class=\"a-btn\">\n              <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"library_add\"></pry-icon>\n              <span>{{ '@pry.widget.tooltip.catalogWidget' | i18n }}</span>\n            </button>\n          </li>\n        }\n        @if (options === true || options!['delete'] === true) {\n          <li class=\"m-context-menu__list__item\" role=\"none\">\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              tabindex=\"-1\"\n              (click)=\"toggleRemoveConfirm($event)\"\n              class=\"a-btn\"\n              (keydown.tab)=\"menuOpen()\"\n              >\n              <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"delete\"></pry-icon>\n              <span>{{ '@pry.widget.tooltip.deleteWidget' | i18n }}</span>\n            </button>\n          </li>\n        }\n        @for (option of additionalOptions; track option) {\n          <li class=\"m-context-menu__list__item\" role=\"none\">\n            <button\n              type=\"button\"\n              class=\"a-btn\"\n              role=\"menuitem\"\n              tabindex=\"-1\"\n              (click)=\"executeAction(option)\"\n              [disabled]=\"isActionDisabled(option)\"\n              >\n              <pry-icon [height]=\"17\" [width]=\"17\" [iconSvg]=\"option.icon\"></pry-icon>\n              {{ option.label | i18n }}\n            </button>\n          </li>\n        }\n      </ul>\n    </div>\n  }\n</ng-template>\n\n<ng-template #templateModal>\n  <div\n    class=\"o-modal\"\n    (keydown.escape)=\"cancelRemoveConfirm()\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-labelledby=\"dialog confirm delete presentation\"\n    >\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ '@pry.widget.modalTitle' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" #cross (click)=\"cancelRemoveConfirm()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <div class=\"m-btn-group\">\n      <button type=\"button\" (click)=\"cancelRemoveConfirm()\" class=\"a-btn a-btn--secondary\">\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n      <button type=\"submit\" (click)=\"confirmRemove()\" class=\"a-btn a-btn--primary\" (keydown.tab)=\"focusCrossElement()\">\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #template>\n  <pry-datasource-selector\n    [manifest]=\"manifest$ | async\"\n    (cancel)=\"toggleDatasourceSelection()\"\n    (validated)=\"emitManifest()\"\n    (nextTab)=\"focusInputCatalog()\"\n    (previousTab)=\"focusValidation()\"\n    (itemsChanged)=\"datasourcesChanged($event)\"\n  ></pry-datasource-selector>\n</ng-template>\n\n<ng-template #overlayCatalog>\n  <div\n    class=\"o-modal\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-labelledby=\"dialog_Catalog\"\n    (keydown.escape)=\"toggleCatalog()\"\n    >\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\">\n          {{ '@pry.widget.defineCatalog' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button\n          class=\"a-btn a-btn--icon-only\"\n          (keydown.shift.tab)=\"focusValidation()\"\n          #crossCatalog\n          (click)=\"toggleCatalog()\"\n          >\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <div class=\"m-form-label-field\">\n      <label class=\"a-label\" for=\"name\">{{ '@pry.toolbox.catalog.label' | i18n }}</label>\n      <input [(ngModel)]=\"catalogInfo.name\" id=\"name\" type=\"text\" class=\"a-form-field\" required />\n    </div>\n    <div class=\"m-form-label-field\">\n      <label class=\"a-label\" for=\"description\">{{ '@pry.toolbox.catalog.description' | i18n }}</label>\n      <input [(ngModel)]=\"catalogInfo.description\" id=\"description\" type=\"text\" class=\"a-form-field\" required />\n    </div>\n    <div class=\"m-form-label-field\">\n      <pry-select-image\n        [iconUrl]=\"catalogInfo.image\"\n        (changed)=\"catalogInfo.image = $event\"\n        [mode]=\"type\"\n      ></pry-select-image>\n    </div>\n    <div class=\"m-btn-group\">\n      <button\n        type=\"button\"\n        (click)=\"toggleCatalog()\"\n        #cancel\n        (keydown.tab)=\"disableValidation()\"\n        class=\"a-btn a-btn--secondary\"\n        >\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n      <button\n        type=\"submit\"\n        #validateCatalog\n        (click)=\"confirmCatalog()\"\n        [disabled]=\"!toolboxMenuService.isValidForCatalog(catalogInfo.name)\"\n        class=\"a-btn a-btn--primary\"\n        (keydown.tab)=\"focusCrossElement()\"\n        >\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #overlaySpot>\n  <div class=\"o-modal -place\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\">\n          {{ '@pry.widget.tooltip.changeSpot' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"toggleChangeSpot()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <pry-dashboard\n      [staticDashboard]=\"targetManifest!\"\n      [breakpoint]=\"10\"\n      [noBackground]=\"true\"\n      [forceModeEdition]=\"false\"\n    ></pry-dashboard>\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: i1.Store }, { type: i2$1.Overlay }, { type: i0.ViewContainerRef }, { type: ToolboxMenuService }], propDecorators: { template: [{
                 type: ViewChild,
                 args: ['template', { read: TemplateRef }]
             }], templateModal: [{
@@ -11510,13 +11524,13 @@ class SettingsComponent extends SubscriptionnerDirective {
         this.openSub?.unsubscribe();
         this.subscriptions.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SettingsComponent, deps: [{ token: i1.Store }, { token: i2.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SettingsComponent, deps: [{ token: i1.Store }, { token: i2$1.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: SettingsComponent, selector: "pry-settings", inputs: { widgetIndex: "widgetIndex", isDisable: "isDisable", headerPresent: "headerPresent", open$: "open$", header: "header" }, outputs: { triggerClick: "triggerClick", saveTriggered: "saveTriggered", changeTitle: "changeTitle" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, read: TemplateRef }, { propertyName: "cross", first: true, predicate: ["cross"], descendants: true }, { propertyName: "validate", first: true, predicate: ["validate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<button type=\"button\" (click)=\"toggle()\" class=\"a-btn a-btn--icon-text -settings\">\n  <pry-icon [height]=\"20\" [width]=\"20\" iconSvg=\"control\"></pry-icon>\n  <span>{{ '@pry.widget.settings.title' | i18n }}</span>\n</button>\n\n<ng-template #template>\n  <div class=\"o-settings__popup\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"dialog_setting\">\n    <div class=\"o-settings__popup__header\">\n      <h2 class=\"a-h2\">{{ '@pry.widget.settings.title' | i18n }}</h2>\n      <button\n        type=\"button\"\n        #cross\n        (keydown.shift.tab)=\"focusElement(this.validate)\"\n        (click)=\"toggle()\"\n        class=\"a-btn a-btn--icon-only -close\"\n      >\n        <pry-icon iconSvg=\"close\"></pry-icon>\n        <span class=\"u-visually-hidden\">{{ '@pry.action.close' | i18n }}</span>\n      </button>\n    </div>\n\n    <div class=\"o-settings__popup__content\" (click)=\"this.triggerClick.next()\">\n      <div class=\"m-form-label-field\">\n        <label class=\"a-label\" for=\"widget_title\">{{ '@pry.widget.settings.changeTitle' | i18n }} :</label>\n        <input\n          class=\"a-form-field\"\n          id=\"widget_title\"\n          type=\"text\"\n          [value]=\"manifest?.title ?? ''\"\n          (input)=\"emitTitle($event)\"\n        />\n      </div>\n      <ng-content></ng-content>\n    </div>\n\n    <div class=\"o-settings__popup__footer\">\n      <button\n        (click)=\"saveAndClose()\"\n        [class.btn-primary__disable]=\"isDisable\"\n        [disabled]=\"isDisable\"\n        (keydown.tab)=\"focusElement(this.cross)\"\n        class=\"a-btn a-btn--primary\"\n        #validate\n      >\n        {{ '@pry.widget.settings.validateUpdating' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SettingsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pry-settings', template: "<button type=\"button\" (click)=\"toggle()\" class=\"a-btn a-btn--icon-text -settings\">\n  <pry-icon [height]=\"20\" [width]=\"20\" iconSvg=\"control\"></pry-icon>\n  <span>{{ '@pry.widget.settings.title' | i18n }}</span>\n</button>\n\n<ng-template #template>\n  <div class=\"o-settings__popup\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"dialog_setting\">\n    <div class=\"o-settings__popup__header\">\n      <h2 class=\"a-h2\">{{ '@pry.widget.settings.title' | i18n }}</h2>\n      <button\n        type=\"button\"\n        #cross\n        (keydown.shift.tab)=\"focusElement(this.validate)\"\n        (click)=\"toggle()\"\n        class=\"a-btn a-btn--icon-only -close\"\n      >\n        <pry-icon iconSvg=\"close\"></pry-icon>\n        <span class=\"u-visually-hidden\">{{ '@pry.action.close' | i18n }}</span>\n      </button>\n    </div>\n\n    <div class=\"o-settings__popup__content\" (click)=\"this.triggerClick.next()\">\n      <div class=\"m-form-label-field\">\n        <label class=\"a-label\" for=\"widget_title\">{{ '@pry.widget.settings.changeTitle' | i18n }} :</label>\n        <input\n          class=\"a-form-field\"\n          id=\"widget_title\"\n          type=\"text\"\n          [value]=\"manifest?.title ?? ''\"\n          (input)=\"emitTitle($event)\"\n        />\n      </div>\n      <ng-content></ng-content>\n    </div>\n\n    <div class=\"o-settings__popup__footer\">\n      <button\n        (click)=\"saveAndClose()\"\n        [class.btn-primary__disable]=\"isDisable\"\n        [disabled]=\"isDisable\"\n        (keydown.tab)=\"focusElement(this.cross)\"\n        class=\"a-btn a-btn--primary\"\n        #validate\n      >\n        {{ '@pry.widget.settings.validateUpdating' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Overlay }, { type: i0.ViewContainerRef }], propDecorators: { triggerClick: [{
+        }], ctorParameters: () => [{ type: i1.Store }, { type: i2$1.Overlay }, { type: i0.ViewContainerRef }], propDecorators: { triggerClick: [{
                 type: Output
             }], widgetIndex: [{
                 type: Input
@@ -11752,11 +11766,11 @@ class FilterGroupComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FilterGroupComponent, deps: [{ token: i1.Store }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FilterGroupComponent, selector: "pry-filter-group", inputs: { enterTriggerFilter: "enterTriggerFilter", clearTriggerFilter: "clearTriggerFilter" }, ngImport: i0, template: "<pry-filter-group-css></pry-filter-group-css>\n<ng-container *ngIf=\"globalManifest$ | async as manifest\">\n  <div class=\"o-container__filters\" *ngIf=\"manifest.filters && manifest.filters.length > 0\">\n    <div class=\"o-container__filter-container\" (click)=\"openSelect()\">\n      @for (filterDescription of manifest.filters; track filterDescription.id) {\n        <pry-filter-instanciator\n          [filter]=\"filterDescription\"\n          [applyFilter$]=\"apply$\"\n          (pressedEnter)=\"enterPressed()\"\n          (cleared)=\"cleared()\"\n        ></pry-filter-instanciator>\n      }\n    </div>\n    <div class=\"o-container__filter-actions\">\n      <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"clearFilters()\">\n        <pry-icon iconSvg=\"clear_filter\" [width]=\"30\" [height]=\"30\"></pry-icon>\n      </button>\n      <button type=\"button\" class=\"a-btn a-btn--primary\" (click)=\"filter()\">\n        {{ '@pry.toolbox.apply' | i18n }}\n        <pry-icon iconSvg=\"refresh_filter\" [width]=\"18\" [height]=\"18\"></pry-icon>\n      </button>\n    </div>\n  </div>\n</ng-container>\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: "component", type: FilterInstanciatorComponent, selector: "pry-filter-instanciator", inputs: ["filter", "applyFilter$"], outputs: ["pressedEnter", "cleared"] }, { kind: "component", type: PryFilterGroupCssComponent, selector: "pry-filter-group-css" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FilterGroupComponent, selector: "pry-filter-group", inputs: { enterTriggerFilter: "enterTriggerFilter", clearTriggerFilter: "clearTriggerFilter" }, ngImport: i0, template: "<pry-filter-group-css></pry-filter-group-css>\n@if (globalManifest$ | async; as manifest) {\n  @if (manifest.filters && manifest.filters.length > 0) {\n    <div class=\"o-container__filters\">\n      <div class=\"o-container__filter-container\" (click)=\"openSelect()\">\n        @for (filterDescription of manifest.filters; track filterDescription.id) {\n          <pry-filter-instanciator\n            [filter]=\"filterDescription\"\n            [applyFilter$]=\"apply$\"\n            (pressedEnter)=\"enterPressed()\"\n            (cleared)=\"cleared()\"\n          ></pry-filter-instanciator>\n        }\n      </div>\n      <div class=\"o-container__filter-actions\">\n        <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"clearFilters()\">\n          <pry-icon iconSvg=\"clear_filter\" [width]=\"30\" [height]=\"30\"></pry-icon>\n        </button>\n        <button type=\"button\" class=\"a-btn a-btn--primary\" (click)=\"filter()\">\n          {{ '@pry.toolbox.apply' | i18n }}\n          <pry-icon iconSvg=\"refresh_filter\" [width]=\"18\" [height]=\"18\"></pry-icon>\n        </button>\n      </div>\n    </div>\n  }\n}\n", dependencies: [{ kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: FilterInstanciatorComponent, selector: "pry-filter-instanciator", inputs: ["filter", "applyFilter$"], outputs: ["pressedEnter", "cleared"] }, { kind: "component", type: PryFilterGroupCssComponent, selector: "pry-filter-group-css" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FilterGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-filter-group', template: "<pry-filter-group-css></pry-filter-group-css>\n<ng-container *ngIf=\"globalManifest$ | async as manifest\">\n  <div class=\"o-container__filters\" *ngIf=\"manifest.filters && manifest.filters.length > 0\">\n    <div class=\"o-container__filter-container\" (click)=\"openSelect()\">\n      @for (filterDescription of manifest.filters; track filterDescription.id) {\n        <pry-filter-instanciator\n          [filter]=\"filterDescription\"\n          [applyFilter$]=\"apply$\"\n          (pressedEnter)=\"enterPressed()\"\n          (cleared)=\"cleared()\"\n        ></pry-filter-instanciator>\n      }\n    </div>\n    <div class=\"o-container__filter-actions\">\n      <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"clearFilters()\">\n        <pry-icon iconSvg=\"clear_filter\" [width]=\"30\" [height]=\"30\"></pry-icon>\n      </button>\n      <button type=\"button\" class=\"a-btn a-btn--primary\" (click)=\"filter()\">\n        {{ '@pry.toolbox.apply' | i18n }}\n        <pry-icon iconSvg=\"refresh_filter\" [width]=\"18\" [height]=\"18\"></pry-icon>\n      </button>\n    </div>\n  </div>\n</ng-container>\n" }]
+            args: [{ selector: 'pry-filter-group', template: "<pry-filter-group-css></pry-filter-group-css>\n@if (globalManifest$ | async; as manifest) {\n  @if (manifest.filters && manifest.filters.length > 0) {\n    <div class=\"o-container__filters\">\n      <div class=\"o-container__filter-container\" (click)=\"openSelect()\">\n        @for (filterDescription of manifest.filters; track filterDescription.id) {\n          <pry-filter-instanciator\n            [filter]=\"filterDescription\"\n            [applyFilter$]=\"apply$\"\n            (pressedEnter)=\"enterPressed()\"\n            (cleared)=\"cleared()\"\n          ></pry-filter-instanciator>\n        }\n      </div>\n      <div class=\"o-container__filter-actions\">\n        <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"clearFilters()\">\n          <pry-icon iconSvg=\"clear_filter\" [width]=\"30\" [height]=\"30\"></pry-icon>\n        </button>\n        <button type=\"button\" class=\"a-btn a-btn--primary\" (click)=\"filter()\">\n          {{ '@pry.toolbox.apply' | i18n }}\n          <pry-icon iconSvg=\"refresh_filter\" [width]=\"18\" [height]=\"18\"></pry-icon>\n        </button>\n      </div>\n    </div>\n  }\n}\n" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -11788,7 +11802,7 @@ class DashboardInitService {
             this.router.config.push({ path: this.baseConfig.path, component: DashboardComponent });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DashboardInitService, deps: [{ token: i1.Store }, { token: i3.Router }, { token: BASE_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DashboardInitService, deps: [{ token: i1.Store }, { token: i2.Router }, { token: BASE_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DashboardInitService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DashboardInitService, decorators: [{
@@ -11796,7 +11810,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1.Store }, { type: i3.Router }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Router }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [BASE_CONFIG]
                 }] }] });
@@ -11919,7 +11933,7 @@ class ManifestService {
             .select(ConfigSelectors.refUrl)
             .pipe(mergeMap((url) => this.httpClient.delete(encodeURI(`${url}/users/me/dashboards/id/${presentationId}/metadata/id/${metadataId}`))));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ManifestService, deps: [{ token: i1$2.HttpClient }, { token: i1.Store }, { token: PrySnackbarService }, { token: PryI18nService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ManifestService, deps: [{ token: i1$1.HttpClient }, { token: i1.Store }, { token: PrySnackbarService }, { token: PryI18nService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ManifestService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ManifestService, decorators: [{
@@ -11927,7 +11941,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$2.HttpClient }, { type: i1.Store }, { type: PrySnackbarService }, { type: PryI18nService }] });
+        }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: i1.Store }, { type: PrySnackbarService }, { type: PryI18nService }] });
 
 class PryTitleService {
     constructor(title, translateService, store) {
@@ -12044,7 +12058,7 @@ class WmsService {
         const url = wfsUrlBuilder(wmsUrl, bbox);
         return this.httpClient.get(url).pipe(map((json) => json));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: WmsService, deps: [{ token: i1$2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: WmsService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: WmsService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: WmsService, decorators: [{
@@ -12052,7 +12066,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$2.HttpClient }] });
+        }], ctorParameters: () => [{ type: i1$1.HttpClient }] });
 const BBOX_ENHANCE_DISTANCE = 0.0001;
 const wfsUrlBuilder = (wmsUrl, bbox, params) => {
     const enhancedBbox = [
@@ -12327,7 +12341,7 @@ class DashboardEffects {
             return result;
         })));
         this.addWidgetToPresentation$ = createEffect(() => this.actions$.pipe(ofType(DashboardActions.addWidgetToPresentation), withLatestFrom(this.store.select(DashboardSelectors.gridLayout), this.store.select(DashboardSelectors.globalManifest), this.store.select(DashboardSelectors.rank), this.store.select(DashboardSelectors.dashboardCellParams), this.store.select(DashboardSelectors.selectedItemIds)), map$1(([action, layout, _globalManifest, rank, params, selectedIds]) => {
-            const manifestGlobal = JSON.parse(JSON.stringify(_globalManifest));
+            const manifestGlobal = structuredClone(_globalManifest);
             // Create new configuration
             const newOptions = this.toolboxManifestService.get(action.widgetType) ?? {
                 options: {},
@@ -12398,7 +12412,7 @@ class DashboardEffects {
             return DashboardActions.updateManifest({ manifest: manifestGlobal, selectedIds });
         })));
         this.moveWidget$ = createEffect(() => this.actions$.pipe(ofType(DashboardActions.moveWidget), withLatestFrom(this.store.select(DashboardSelectors.gridLayout), this.store.select(DashboardSelectors.globalManifest), this.store.select(DashboardSelectors.rank), this.store.select(DashboardSelectors.dashboardCellParams), this.store.select(DashboardSelectors.selectedItemIds)), map$1(([action, layout, _globalManifest, rank, params, selectedIds]) => {
-            const manifestGlobal = JSON.parse(JSON.stringify(_globalManifest));
+            const manifestGlobal = structuredClone(_globalManifest);
             const newWindows = [...manifestGlobal.windows];
             // Creating new current window manifest, without moved widget
             const myNewWindow = {
@@ -12554,12 +12568,12 @@ class DashboardEffects {
         dashboardInitService.init();
         refreshService.start();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DashboardEffects, deps: [{ token: DashboardInitService }, { token: i1$3.Actions }, { token: i1.Store }, { token: ManifestService }, { token: ItemService }, { token: PryTitleService }, { token: PryI18nService }, { token: PrySnackbarService }, { token: i3.Router }, { token: RefreshService }, { token: ToolboxManifestService }, { token: BusService }, { token: SearchService }, { token: PryDialogService }, { token: WmsService }, { token: WidgetFactoryService }, { token: PryI18nService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DashboardEffects, deps: [{ token: DashboardInitService }, { token: i1$2.Actions }, { token: i1.Store }, { token: ManifestService }, { token: ItemService }, { token: PryTitleService }, { token: PryI18nService }, { token: PrySnackbarService }, { token: i2.Router }, { token: RefreshService }, { token: ToolboxManifestService }, { token: BusService }, { token: SearchService }, { token: PryDialogService }, { token: WmsService }, { token: WidgetFactoryService }, { token: PryI18nService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DashboardEffects }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DashboardEffects, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: DashboardInitService }, { type: i1$3.Actions }, { type: i1.Store }, { type: ManifestService }, { type: ItemService }, { type: PryTitleService }, { type: PryI18nService }, { type: PrySnackbarService }, { type: i3.Router }, { type: RefreshService }, { type: ToolboxManifestService }, { type: BusService }, { type: SearchService }, { type: PryDialogService }, { type: WmsService }, { type: WidgetFactoryService }, { type: PryI18nService }] });
+        }], ctorParameters: () => [{ type: DashboardInitService }, { type: i1$2.Actions }, { type: i1.Store }, { type: ManifestService }, { type: ItemService }, { type: PryTitleService }, { type: PryI18nService }, { type: PrySnackbarService }, { type: i2.Router }, { type: RefreshService }, { type: ToolboxManifestService }, { type: BusService }, { type: SearchService }, { type: PryDialogService }, { type: WmsService }, { type: WidgetFactoryService }, { type: PryI18nService }] });
 
 const dashboardFeatureKey = '@pry/dashboard';
 const dashboardInitialState = {
@@ -12682,7 +12696,7 @@ const internalReducer = createReducer(dashboardInitialState, on(DashboardActions
     };
 }), on(DashboardActions.updateWidgetManifest, (state, action) => {
     const myRank = state.manifests.tenants.indexOf(state.manifests.sender);
-    const newWindows = JSON.parse(JSON.stringify(state.manifests.manifest.windows));
+    const newWindows = structuredClone(state.manifests.manifest.windows);
     (newWindows[myRank] ?? { widgets: [] }).widgets[action.index] = action.manifest;
     return {
         ...state,
@@ -12702,19 +12716,7 @@ const internalReducer = createReducer(dashboardInitialState, on(DashboardActions
             ...state.results.resultSets,
             [action.id]: !action.next
                 ? action.resultSet
-                : {
-                    items: [
-                        ...new Set(Object.keys(action.resultSet.items).concat(Object.keys(state.results.resultSets[action.id].items)))
-                    ]
-                        .map((key) => ({
-                        [key]: [...action.resultSet.items[key], ...state.results.resultSets[action.id].items[key]]
-                    }))
-                        .reduce((p, c) => ({ ...p, ...c }), {}),
-                    count: action.resultSet.count,
-                    relations: [...state.results.resultSets[action.id].relations, ...action.resultSet.relations],
-                    autoRefreshInterval: action.resultSet.autoRefreshInterval,
-                    searchAfter: action.resultSet.searchAfter
-                }
+                : ResultsetUtils.mergeResultSets(state.results.resultSets[action.id], action.resultSet)
         },
         resultSetsParams: {
             ...state.results.resultSetsParams,
@@ -12723,7 +12725,7 @@ const internalReducer = createReducer(dashboardInitialState, on(DashboardActions
     }
 })), on(DashboardActions.maximizeWidget, (state, action) => {
     const myRank = state.manifests.tenants.indexOf(state.manifests.sender);
-    const newWindows = JSON.parse(JSON.stringify(state.manifests.manifest.windows));
+    const newWindows = structuredClone(state.manifests.manifest.windows);
     newWindows[myRank].widgets[action.widgetIndex].layout = {
         x: 1,
         y: 1,
@@ -12908,7 +12910,7 @@ const internalReducer = createReducer(dashboardInitialState, on(DashboardActions
         }
     };
 }), on(DashboardActions.addRelationsToResultSets, (state, action) => {
-    const updatedResultSets = JSON.parse(JSON.stringify(state.results.resultSets));
+    const updatedResultSets = structuredClone(state.results.resultSets);
     action.relations.forEach((relation) => {
         Object.keys(updatedResultSets).forEach((rsId) => {
             const isConcerned = Object.keys(updatedResultSets[rsId].items).map((classId) => {
@@ -12926,8 +12928,27 @@ const internalReducer = createReducer(dashboardInitialState, on(DashboardActions
             resultSets: updatedResultSets
         }
     };
+}), on(DashboardActions.removeRelationsFromResultSets, (state, action) => {
+    const updatedResultSets = structuredClone(state.results.resultSets);
+    Object.keys(updatedResultSets).forEach((rsId) => {
+        const isConcerned = Object.keys(updatedResultSets[rsId].items).map((classId) => {
+            return updatedResultSets[rsId].items[classId].map((item) => item.id === action.relation.source || item.id === action.relation.destination);
+        });
+        if (isConcerned) {
+            updatedResultSets[rsId].relations.filter((rel) => rel.relationType !== action.relation.relationType ||
+                rel.source !== action.relation.source ||
+                rel.destination !== action.relation.destination);
+        }
+    });
+    return {
+        ...state,
+        results: {
+            ...state.results,
+            resultSets: updatedResultSets
+        }
+    };
 }), on(DashboardActions.addItemToResultSets, (state, action) => {
-    const updatedResultSets = JSON.parse(JSON.stringify(state.results.resultSets));
+    const updatedResultSets = structuredClone(state.results.resultSets);
     if (!!action.resultSet) {
         if (!updatedResultSets[action.resultSet].items[action.item.oClass]) {
             updatedResultSets[action.resultSet].items[action.item.oClass] = [action.item];
@@ -12974,7 +12995,7 @@ const internalReducer = createReducer(dashboardInitialState, on(DashboardActions
     };
 }), on(DashboardActions.setGridLayout, (state, action) => {
     const myRank = state.manifests.tenants.indexOf(state.manifests.sender);
-    const newWindows = JSON.parse(JSON.stringify(state.manifests.manifest.windows ?? []));
+    const newWindows = structuredClone(state.manifests.manifest.windows ?? []);
     if (!newWindows[myRank]) {
         newWindows[myRank] = { widgets: [] };
     }
@@ -13016,7 +13037,7 @@ const internalReducer = createReducer(dashboardInitialState, on(DashboardActions
 }), on(DashboardActions.createTab, (state, action) => {
     const myRank = state.manifests.tenants.indexOf(state.manifests.sender);
     const myLayout = state.manifests.manifest.windows[myRank].grid?.layout ?? DashboardGridLayout.MANUAL;
-    const newWindows = JSON.parse(JSON.stringify(state.manifests.manifest.windows));
+    const newWindows = structuredClone(state.manifests.manifest.windows);
     newWindows.push({ grid: { layout: myLayout }, widgets: [] });
     return {
         ...state,
@@ -13033,11 +13054,11 @@ const internalReducer = createReducer(dashboardInitialState, on(DashboardActions
         ...state,
         manifests: {
             ...state.manifests,
-            manifest: JSON.parse(JSON.stringify(state.presentation.initial))
+            manifest: structuredClone(state.presentation.initial)
         }
     };
 }), on(DashboardActions.propagateGridLayout, (state, action) => {
-    const newWindows = JSON.parse(JSON.stringify(state.manifests.manifest.windows));
+    const newWindows = structuredClone(state.manifests.manifest.windows);
     newWindows[action.rank] = action.manifest;
     return {
         ...state,
@@ -13103,7 +13124,7 @@ const internalReducer = createReducer(dashboardInitialState, on(DashboardActions
         }
     }
 })), on(DashboardActions.updateFilterValue, (state, action) => {
-    const filters = JSON.parse(JSON.stringify(state.manifests.manifest.filters ?? []));
+    const filters = structuredClone(state.manifests.manifest.filters ?? []);
     const filterToUpdate = filters.find((filter) => filter.id === action.id);
     if (filterToUpdate) {
         if (!action.value) {
@@ -13211,11 +13232,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
 
 class DefaultTooltipComponent extends BaseTooltipComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DefaultTooltipComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: DefaultTooltipComponent, selector: "pry-default-tooltip", usesInheritance: true, ngImport: i0, template: "<div class=\"m-tooltip__item__content\">\n  <ng-container *ngIf=\"data.item.properties; else defaultTooltip\">\n    <p *ngFor=\"let property of data.item.properties\">\n      <span>{{ property.key | titlecase }} :</span> {{ property.value }}\n    </p>\n  </ng-container>\n</div>\n<ng-template #defaultTooltip>\n  <h3 class=\"a-h3 -attribute\">\n    <img\n      [src]=\"data.item | translateItemToSymbol | async\"\n      [alt]=\"data.item.oClass | translateId: { type: 'class', output: 'name' } | async\"\n      width=\"32\"\n      aria-hidden=\"true\"\n    />\n    <span>{{ data.item.oClass | translateId: { type: 'class', output: 'name' } | async }}</span>\n  </h3>\n  <p>\n    <span>{{ '@pry.widget.itemId' | i18n }} :</span> {{ data.item?.id }}\n  </p>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: TranslateIdPipe, name: "translateId" }, { kind: "pipe", type: TranslateItemToSymbolPipe, name: "translateItemToSymbol" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: DefaultTooltipComponent, selector: "pry-default-tooltip", usesInheritance: true, ngImport: i0, template: "<div class=\"m-tooltip__item__content\">\n  @if (data.item.properties) {\n    @for (property of data.item.properties; track property) {\n      <p>\n        <span>{{ property.key | titlecase }} :</span> {{ property.value }}\n      </p>\n    }\n  } @else {\n    <h3 class=\"a-h3 -attribute\">\n      <img\n        [src]=\"data.item | translateItemToSymbol | async\"\n        [alt]=\"data.item.oClass | translateId: { type: 'class', output: 'name' } | async\"\n        width=\"32\"\n        aria-hidden=\"true\"\n        />\n      <span>{{ data.item.oClass | translateId: { type: 'class', output: 'name' } | async }}</span>\n    </h3>\n    <p>\n      <span>{{ '@pry.widget.itemId' | i18n }} :</span> {{ data.item?.id }}\n    </p>\n  }\n</div>\n", dependencies: [{ kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: TranslateIdPipe, name: "translateId" }, { kind: "pipe", type: TranslateItemToSymbolPipe, name: "translateItemToSymbol" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DefaultTooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-default-tooltip', template: "<div class=\"m-tooltip__item__content\">\n  <ng-container *ngIf=\"data.item.properties; else defaultTooltip\">\n    <p *ngFor=\"let property of data.item.properties\">\n      <span>{{ property.key | titlecase }} :</span> {{ property.value }}\n    </p>\n  </ng-container>\n</div>\n<ng-template #defaultTooltip>\n  <h3 class=\"a-h3 -attribute\">\n    <img\n      [src]=\"data.item | translateItemToSymbol | async\"\n      [alt]=\"data.item.oClass | translateId: { type: 'class', output: 'name' } | async\"\n      width=\"32\"\n      aria-hidden=\"true\"\n    />\n    <span>{{ data.item.oClass | translateId: { type: 'class', output: 'name' } | async }}</span>\n  </h3>\n  <p>\n    <span>{{ '@pry.widget.itemId' | i18n }} :</span> {{ data.item?.id }}\n  </p>\n</ng-template>\n" }]
+            args: [{ selector: 'pry-default-tooltip', template: "<div class=\"m-tooltip__item__content\">\n  @if (data.item.properties) {\n    @for (property of data.item.properties; track property) {\n      <p>\n        <span>{{ property.key | titlecase }} :</span> {{ property.value }}\n      </p>\n    }\n  } @else {\n    <h3 class=\"a-h3 -attribute\">\n      <img\n        [src]=\"data.item | translateItemToSymbol | async\"\n        [alt]=\"data.item.oClass | translateId: { type: 'class', output: 'name' } | async\"\n        width=\"32\"\n        aria-hidden=\"true\"\n        />\n      <span>{{ data.item.oClass | translateId: { type: 'class', output: 'name' } | async }}</span>\n    </h3>\n    <p>\n      <span>{{ '@pry.widget.itemId' | i18n }} :</span> {{ data.item?.id }}\n    </p>\n  }\n</div>\n" }]
         }] });
 
 const TOOLTIP_DEFINITION = new InjectionToken('Tooltip definition');
@@ -13368,7 +13389,7 @@ class PryDashboardModule {
             PryCoreModule,
             PryCheckboxModule,
             PryToggleModule,
-            PryOverlayModule, i1.StoreFeatureModule, i1$3.EffectsFeatureModule, PryDatePickerModule,
+            PryOverlayModule, i1.StoreFeatureModule, i1$2.EffectsFeatureModule, PryDatePickerModule,
             PryI18nModule,
             PrySinceDateModule,
             PryPageLoaderModule], exports: [DashboardComponent,