@provoly/dashboard 0.21.10 → 0.22.1

package/fesm2022/provoly-dashboard.mjs

@@ -1,14 +1,14 @@
-import * as i2$1 from '@angular/cdk/overlay';
+import * as i2 from '@angular/cdk/overlay';
 import { OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
-import * as i2 from '@angular/common';
+import * as i1$1 from '@angular/common';
 import { CommonModule, AsyncPipe, DOCUMENT } from '@angular/common';
-import * as i1$1 from '@angular/common/http';
+import * as i1$2 from '@angular/common/http';
 import { HttpHeaders, HttpParams, HttpClientModule } from '@angular/common/http';
 import * as i0 from '@angular/core';
 import { InjectionToken, Injectable, Directive, Optional, Inject, Input, Component, Pipe, ChangeDetectionStrategy, HostBinding, SecurityContext, NgModule, EventEmitter, Output, TemplateRef, ViewChild, Injector, ContentChildren, forwardRef, HostListener, ViewContainerRef, ViewChildren, ViewEncapsulation, createNgModule } from '@angular/core';
 import * as i3 from '@angular/router';
 import { NavigationEnd, RouterModule } from '@angular/router';
-import * as i1$2 from '@ngrx/effects';
+import * as i1$3 from '@ngrx/effects';
 import { createEffect, ofType, EffectsModule } from '@ngrx/effects';
 import * as i1 from '@ngrx/store';
 import { createAction, props, createReducer, on, createFeatureSelector, createSelector, StoreModule } from '@ngrx/store';
@@ -20,9 +20,9 @@ import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
 import equal from 'fast-deep-equal/es6';
 import { distinctUntilChanged, filter as filter$1, debounceTime as debounceTime$1, mergeMap as mergeMap$1, map as map$1, catchError, withLatestFrom, tap, delay as delay$1 } from 'rxjs/operators';
 import { animation, style, animate, trigger, transition, useAnimation } from '@angular/animations';
-import * as i5 from '@angular/cdk/a11y';
+import * as i3$2 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
-import * as i1$3 from '@angular/cdk/accordion';
+import * as i1$4 from '@angular/cdk/accordion';
 import { CdkAccordionModule } from '@angular/cdk/accordion';
 import * as i4 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -1095,7 +1095,7 @@ class BaseMenuComponent extends SubscriptionnerDirective {
         console.error('Must override init function');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BaseMenuComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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 a-btn--secondary -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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "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: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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 a-btn--secondary -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", "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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BaseMenuComponent, decorators: [{
             type: Component,
@@ -1186,7 +1186,7 @@ class PryIconComponent {
         this.baseStyle = this.sanitizer.bypassSecurityTrustStyle(safeStyle);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PryIconComponent, deps: [{ token: i3$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PryIconComponent, decorators: [{
             type: Component,
@@ -1256,7 +1256,7 @@ class BaseToolboxActionComponent {
         this._cd.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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: "16.2.12", 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\"></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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.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$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"], 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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\"></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"], 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BaseToolboxActionComponent, decorators: [{
             type: Component,
@@ -1274,7 +1274,7 @@ class BaseToolboxComponent {
         this.baseToolboxTranslation = '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BaseToolboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: i2.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: i2.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BaseToolboxComponent, decorators: [{
             type: Component,
@@ -1759,7 +1759,7 @@ class PrySnackbarComponent {
         this.hiddenFromAction = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PrySnackbarComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.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: "14.0.0", version: "16.2.12", 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: [
             trigger('panelState', [
                 transition('void => visible', [useAnimation(showAnimation)]),
                 transition('visible => void', [useAnimation(hideAnimation)])
@@ -1833,7 +1833,7 @@ class PrySnackbarService {
     open(message) {
         this.messageEvents$.next(message);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PrySnackbarService, deps: [{ token: i2$1.Overlay }, { token: PryI18nService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PrySnackbarService, deps: [{ token: i2.Overlay }, { token: PryI18nService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PrySnackbarService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PrySnackbarService, decorators: [{
@@ -1841,7 +1841,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i2$1.Overlay }, { type: PryI18nService }]; } });
+        }], ctorParameters: function () { return [{ type: i2.Overlay }, { type: PryI18nService }]; } });
 
 const INTERNALLY_STORED_IMAGE_PREFIX = 'internal:';
 var LibraryTypes;
@@ -1895,7 +1895,7 @@ class ImageService {
             });
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ImageService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ImageService, decorators: [{
@@ -1903,7 +1903,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.HttpClient }, { type: i1.Store }, { type: i3$1.DomSanitizer }, { type: PrySnackbarService }, { type: PryI18nService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$2.HttpClient }, { type: i1.Store }, { type: i3$1.DomSanitizer }, { type: PrySnackbarService }, { type: PryI18nService }]; } });
 
 const defaultImage = new Image();
 defaultImage.src = DEFAULT_ICON_URL;
@@ -2595,7 +2595,7 @@ class PryModalStatusComponent {
         this.gotoConsult.emit(this.version);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PryModalStatusComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PryModalStatusComponent, selector: "pry-modal-status", inputs: { version: "version" }, outputs: { gotoConsult: "gotoConsult" }, ngImport: i0, template: "<div class=\"o-modal-wrapper__backdrop\" (click)=\"goBack()\">\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)=\"goBack()\">\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\">\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: i2.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: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PryModalStatusComponent, selector: "pry-modal-status", inputs: { version: "version" }, outputs: { gotoConsult: "gotoConsult" }, ngImport: i0, template: "<div class=\"o-modal-wrapper__backdrop\" (click)=\"goBack()\">\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)=\"goBack()\">\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\">\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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PryModalStatusComponent, decorators: [{
             type: Component,
@@ -2673,13 +2673,13 @@ class PryNqColorSelectorComponent {
         }
         this.toggleColorChoice();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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: "14.0.0", version: "16.2.12", 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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.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: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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: "16.2.12", 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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: function () { return [{ type: i1.Store }, { type: i2$1.Overlay }, { type: i0.ViewContainerRef }]; }, propDecorators: { disabled: [{
+        }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.Overlay }, { type: i0.ViewContainerRef }]; }, propDecorators: { disabled: [{
                 type: Input
             }], datasource: [{
                 type: Input
@@ -2759,13 +2759,13 @@ class PryDialogService {
         });
         return overlay;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PryDialogService, deps: [{ token: i0.Injector }, { token: i2$1.Overlay }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PryDialogService, deps: [{ token: i0.Injector }, { token: i2.Overlay }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PryDialogService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PryDialogService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i2$1.Overlay }, { type: i1.Store }]; } });
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i2.Overlay }, { type: i1.Store }]; } });
 
 class PryDialogConfirmComponent {
     constructor(dialog, data, store) {
@@ -2791,7 +2791,7 @@ class PryDialogConfirmComponent {
         this.cross.nativeElement.focus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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: "16.2.12", 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          [class.a-btn--tertiary]=\"action.color === 'tertiary'\"\n          [class.a-btn--ghost]=\"action.color === 'ghost'\"\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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.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: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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          [class.a-btn--tertiary]=\"action.color === 'tertiary'\"\n          [class.a-btn--ghost]=\"action.color === 'ghost'\"\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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PryDialogConfirmComponent, decorators: [{
             type: Component,
@@ -2912,13 +2912,13 @@ class PryOverlayDirective {
                 break;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PryOverlayDirective, deps: [{ token: i2$1.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PryOverlayDirective, deps: [{ token: i2.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", 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: "16.2.12", ngImport: i0, type: PryOverlayDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[pryOverlay]' }]
-        }], ctorParameters: function () { return [{ type: i2$1.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }]; }, propDecorators: { pryOverlay: [{
+        }], ctorParameters: function () { return [{ type: i2.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }]; }, propDecorators: { pryOverlay: [{
                 type: Input
             }], styleReversed: [{
                 type: Input
@@ -3029,7 +3029,7 @@ class RawService {
             headers: new HttpHeaders({ 'File-Content-Type': mimeType })
         })));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RawService, deps: [{ token: i1$1.HttpClient }, { token: i1.Store }, { token: i3$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RawService, deps: [{ token: i1$2.HttpClient }, { token: i1.Store }, { token: i3$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RawService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RawService, decorators: [{
@@ -3037,7 +3037,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.HttpClient }, { type: i1.Store }, { type: i3$1.DomSanitizer }]; } });
+        }], ctorParameters: function () { return [{ type: i1$2.HttpClient }, { type: i1.Store }, { type: i3$1.DomSanitizer }]; } });
 
 class PryUploadComponent {
     constructor(store, rawService) {
@@ -3166,13 +3166,13 @@ class PrySelectImageComponent {
             this.toggleImageChoice();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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: "14.0.0", version: "16.2.12", 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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PryUploadComponent, selector: "pry-upload", inputs: ["mode", "accept", "labelTranslate"], outputs: ["uploaded", "uploadedFile"] }, { kind: "pipe", type: i2.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: "16.2.12", 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: "16.2.12", 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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: function () { return [{ type: i1.Store }, { type: i2$1.Overlay }, { type: i0.ViewContainerRef }]; }, propDecorators: { template: [{
+        }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.Overlay }, { type: i0.ViewContainerRef }]; }, propDecorators: { template: [{
                 type: ViewChild,
                 args: ['template', { read: TemplateRef }]
             }], toggled: [{
@@ -3364,7 +3364,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: "16.2.12", ngImport: i0, type: CategoryService, deps: [{ token: i1$1.HttpClient }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CategoryService, deps: [{ token: i1$2.HttpClient }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CategoryService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CategoryService, decorators: [{
@@ -3372,7 +3372,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.HttpClient }, { type: i1.Store }]; } });
+        }], ctorParameters: function () { return [{ type: i1$2.HttpClient }, { type: i1.Store }]; } });
 
 class CategoryEffects {
     constructor(actions$, categoryService) {
@@ -3380,12 +3380,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: "16.2.12", ngImport: i0, type: CategoryEffects, deps: [{ token: i1$2.Actions }, { token: CategoryService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CategoryEffects, deps: [{ token: i1$3.Actions }, { token: CategoryService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CategoryEffects }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CategoryEffects, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$2.Actions }, { type: CategoryService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$3.Actions }, { type: CategoryService }]; } });
 
 const categoriesFeatureKey = '@pry/model/categories';
 function sortByName(a, b) {
@@ -3421,7 +3421,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: "16.2.12", ngImport: i0, type: ClassService, deps: [{ token: i1$1.HttpClient }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ClassService, deps: [{ token: i1$2.HttpClient }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ClassService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ClassService, decorators: [{
@@ -3429,7 +3429,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.HttpClient }, { type: i1.Store }]; } });
+        }], ctorParameters: function () { return [{ type: i1$2.HttpClient }, { type: i1.Store }]; } });
 
 class ClassEffects {
     constructor(actions$, classService) {
@@ -3440,12 +3440,12 @@ class ClassEffects {
             return ClassActions.loadDatasetCountSuccess({ datasetCounts: datasetCounts });
         }), catchError((error) => [ClassActions.loadDatasetCountFailure({ error: error })])))));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ClassEffects, deps: [{ token: i1$2.Actions }, { token: ClassService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ClassEffects, deps: [{ token: i1$3.Actions }, { token: ClassService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ClassEffects }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ClassEffects, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$2.Actions }, { type: ClassService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$3.Actions }, { type: ClassService }]; } });
 
 const SYMBOL_DOMAIN = 'symbol';
 const TABLE_ATTR_DOMAIN = 'tableAttr';
@@ -3573,12 +3573,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: "16.2.12", ngImport: i0, type: ConfigService, deps: [{ token: i1$1.HttpClient }, { token: i1.Store }, { token: PrySnackbarService }, { token: PryI18nService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigService, deps: [{ token: i1$2.HttpClient }, { token: i1.Store }, { token: PrySnackbarService }, { token: PryI18nService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$1.HttpClient }, { type: i1.Store }, { type: PrySnackbarService }, { type: PryI18nService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$2.HttpClient }, { type: i1.Store }, { type: PrySnackbarService }, { type: PryI18nService }]; } });
 
 class OpenMapTilesService {
     constructor(httpClient, store) {
@@ -3600,7 +3600,7 @@ class OpenMapTilesService {
             })) ?? []).sort((a, b) => a.label.localeCompare(b.label));
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OpenMapTilesService, deps: [{ token: i1$1.HttpClient }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OpenMapTilesService, deps: [{ token: i1$2.HttpClient }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OpenMapTilesService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OpenMapTilesService, decorators: [{
@@ -3608,7 +3608,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.HttpClient }, { type: i1.Store }]; } });
+        }], ctorParameters: function () { return [{ type: i1$2.HttpClient }, { type: i1.Store }]; } });
 
 class ConfigEffects {
     constructor(actions$, openMapTilesService, store, configService, snackBar, translateService, pryDialog) {
@@ -3717,23 +3717,23 @@ class ConfigEffects {
             return throwError(() => error);
         })))));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigEffects }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigEffects, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$2.Actions }, { type: OpenMapTilesService }, { type: i1.Store }, { type: ConfigService }, { type: PrySnackbarService }, { type: PryI18nService }, { type: PryDialogService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$3.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: "16.2.12", ngImport: i0, type: ContextMenuEffects, deps: [{ token: i1$2.Actions }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContextMenuEffects, deps: [{ token: i1$3.Actions }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContextMenuEffects }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContextMenuEffects, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$2.Actions }]; } });
+        }], ctorParameters: function () { return [{ type: i1$3.Actions }]; } });
 
 const ContextMenuActions = {
     open: createAction('[ContextMenu] open', props()),
@@ -3880,108 +3880,6 @@ class ManifestUtils {
     }
 }
 
-const SearchActions = {
-    search: createAction('[Search] search', props()),
-    getDatasourceItems: createAction('[Search] (bus) get datasource items', props()),
-    // result Search
-    searchSuccess: createAction('[Search Api] (bus) Search Success', props()),
-    searchFailure: createAction('[Search Api] (bus) Search Failure', props()),
-    setSearchLoading: createAction('[Search Api] (bus) set Search loading datasource status', props())
-};
-
-const searchFeatureKey = '@pry/search';
-const initialSearchState = {
-    searchLoading: [],
-    payload: undefined,
-    id: undefined
-};
-const searchReducer = createReducer(initialSearchState, on(SearchActions.search, (state, action) => ({
-    ...state,
-    searchLoading: [...new Set([...state.searchLoading, action.id ?? DEFAULT_NAMED_QUERY_ID])],
-    payload: action.payload,
-    id: action.id
-})), on(SearchActions.getDatasourceItems, (state, action) => ({
-    ...state,
-    searchLoading: [...new Set([...state.searchLoading, action.id])]
-})), on(SearchActions.searchSuccess, (state, action) => ({
-    ...state,
-    searchLoading: [...state.searchLoading.filter((id) => id !== (action.id ?? DEFAULT_NAMED_QUERY_ID))]
-})), on(SearchActions.searchFailure, (state, action) => ({
-    ...state,
-    searchLoading: [...state.searchLoading.filter((id) => id !== (action.id ?? DEFAULT_NAMED_QUERY_ID))]
-})), on(SearchActions.setSearchLoading, (state, action) => ({
-    ...state,
-    searchLoading: action.start
-        ? [...new Set([...state.searchLoading, ...action.datasources])]
-        : [...state.searchLoading.filter((id) => !action.datasources.includes(id))]
-})));
-
-const feature$4 = createFeatureSelector(searchFeatureKey);
-const searchLoading = createSelector(feature$4, (state) => state.searchLoading);
-const SearchSelectors = {
-    feature: feature$4,
-    searchLoading
-};
-
-class ProxyUtils {
-    static { this.requested = {}; }
-    static init(store) {
-        this.store = store;
-        store.select(SearchSelectors.searchLoading).subscribe((searchLoading) => {
-            this.currentlyLoading = searchLoading;
-        });
-    }
-    static ResultSets(rss) {
-        return Object.entries(rss)
-            .map(([key, value]) => ({ key, proxy: ProxyUtils.ResultSet(value, key) }))
-            .reduce((p, c) => ({ ...p, [c.key]: c.proxy }), {});
-    }
-    static ResultSet(rs, rsId) {
-        return {
-            relations: rs.relations ?? [],
-            autoRefreshInterval: rs.autoRefreshInterval,
-            merged: rs.merged,
-            count: rs.count,
-            items: Object.keys(rs.items ?? {})
-                .map((classId) => ({
-                classId: classId,
-                items: rs.items[classId].map((item) => ProxyUtils.Item(item, rsId))
-            }))
-                .reduce((p, c) => ({ ...p, [c.classId]: c.items }), {})
-        };
-    }
-    static Item(item, rsId) {
-        return {
-            id: item.id,
-            oClass: item.oClass,
-            metadata: item.metadata,
-            attributes: new Proxy(JSON.parse(JSON.stringify(item.attributes)), {
-                get: (original, prop, proxy) => {
-                    if (prop === 'toJSON') {
-                        return () => original;
-                    }
-                    else {
-                        if (original[prop]) {
-                            return original[prop];
-                        }
-                        else {
-                            if (!this.currentlyLoading.includes(rsId) && this.requested[prop] !== false) {
-                                this.requested[prop] = false;
-                                this.store.dispatch(SearchActions.getDatasourceItems({ id: rsId, excludeGeo: false, from: 'ProxyUtils.Item()' }));
-                            }
-                        }
-                    }
-                    return {
-                        type: 'VALUE',
-                        value: '',
-                        visible: false
-                    };
-                }
-            })
-        };
-    }
-}
-
 const BASE_DISPLAY_OPTIONS = {
     presentationTitle: true,
     search: false,
@@ -4063,8 +3961,8 @@ function getDisplayOptions(mode) {
 }
 
 const NEW_WINDOW_TARGET = -1;
-const feature$3 = createFeatureSelector('@pry/dashboard');
-const manifests = createSelector(feature$3, (state) => state?.manifests);
+const feature$4 = createFeatureSelector('@pry/dashboard');
+const manifests = createSelector(feature$4, (state) => state?.manifests);
 const rank = createSelector(manifests, (manifests) => manifests?.tenants.indexOf(manifests.sender));
 const currentManifestId = createSelector(manifests, (manifests) => manifests.currentId);
 const globalManifest = createSelector(manifests, 
@@ -4077,7 +3975,7 @@ const staticManifest = createSelector(manifests,
 const loading = createSelector(manifests, (manifests) => !!manifests?.loading);
 const refreshRates = createSelector(globalManifest, (manifests) => manifests.refreshRates ?? {});
 const windowManifest = createSelector(globalManifest, rank, (manifest, rank) => manifest.windows[rank] ?? { widgets: [] });
-const gridLayout = createSelector(windowManifest, (manifest) => (manifest.grid ?? {}).layout ?? DashboardGridLayout.MANUAL);
+const gridLayout = createSelector(windowManifest, (manifest) => ((manifest.grid ?? {}).layout ?? DashboardGridLayout.MANUAL));
 const memoizeWidgetManifest = {};
 const widgetManifest = (index) => {
     if (!memoizeWidgetManifest[index]) {
@@ -4095,8 +3993,8 @@ const targetTenantsIndexes = createSelector(manifests, rank, (manifests, rank) =
     NEW_WINDOW_TARGET,
     ...(manifests.tenants ?? []).map((ten, idx) => idx).filter((idx) => idx !== rank)
 ]);
-const results = createSelector(feature$3, (state) => state?.results);
-const resultSets = createSelector(results, (results) => ProxyUtils.ResultSets(results.resultSets) ?? {});
+const results = createSelector(feature$4, (state) => state?.results);
+const resultSets = createSelector(results, (results) => results.resultSets ?? {});
 const resultSetsParams = createSelector(results, (results) => results.resultSetsParams ?? {});
 const namedQueriesNames = createSelector(resultSets, (state) => Object.keys(state) ?? []);
 const availableNamedQueries = createSelector(results, (results) => {
@@ -4113,7 +4011,7 @@ const allItems = createSelector(results, (results) => Object.keys(results.result
     .reduce((p, c) => [...p, ...c], []));
 const getItemsByIds = (ids) => createSelector(allItems, (items) => items.filter((item) => ids.includes(item.id)));
 const selectedItems = createSelector(selectedItemIds, allItems, (itemNames, allItems) => itemNames.map((name) => allItems.find((it) => it.id === name)) ?? []);
-const dashboard = createSelector(feature$3, (state) => state?.dashboard ?? {});
+const dashboard = createSelector(feature$4, (state) => state?.dashboard ?? {});
 const dashboardCellParams = createSelector(dashboard, (dashboard) => dashboard.params ?? {});
 const dashboardEditionMode = createSelector(dashboard, (dashboard) => dashboard.editionMode ?? false);
 const namedQueriesUses = createSelector(globalManifest, (manifest) => manifest.windows
@@ -4129,11 +4027,11 @@ const namedQueriesUses = createSelector(globalManifest, (manifest) => manifest.w
     .reduce((p, c) => [...p, ...c], [])
     .reduce((p, c) => [...p, ...c], [])
     .reduce((p, c) => ({ ...p, [c.rsName ?? '']: [...(p[c.rsName ?? ''] || []), { ...c }] }), {}));
-const presentation = createSelector(feature$3, (state) => state?.presentation);
+const presentation = createSelector(feature$4, (state) => state?.presentation);
 const isCurrentPresentationModified = createSelector(presentation, globalManifest, (state, global) => !equal(global, state.initial));
 const isCurrentPresentationOwner = createSelector(presentation, (state) => !!state.current && state.current.owner);
-const filters = createSelector(feature$3, (state) => state?.manifests.manifest.filters ?? []);
-const datasourceFilters = createSelector(feature$3, (state) => state?.manifests.manifest.filters
+const filters = createSelector(feature$4, (state) => state?.manifests.manifest.filters ?? []);
+const datasourceFilters = createSelector(feature$4, (state) => state?.manifests.manifest.filters
     ? state?.manifests.manifest.filters.reduce((obj, filter) => (filter.attributes.forEach((attribute) => (obj[attribute.datasource] || (obj[attribute.datasource] = [])).push({
         attribute: attribute.id,
         operator: filter.operator ?? '',
@@ -4141,11 +4039,11 @@ const datasourceFilters = createSelector(feature$3, (state) => state?.manifests.
     })),
         obj), {})
     : {});
-const wmsFeatures = createSelector(feature$3, (state) => state?.wmsFeatures);
-const displayOptions = createSelector(feature$3, (state) => state?.display ?? BASE_DISPLAY_OPTIONS);
-const capabilities = createSelector(feature$3, (state) => state?.capabilities);
+const wmsFeatures = createSelector(feature$4, (state) => state?.wmsFeatures);
+const displayOptions = createSelector(feature$4, (state) => state?.display ?? BASE_DISPLAY_OPTIONS);
+const capabilities = createSelector(feature$4, (state) => state?.capabilities);
 const DashboardSelectors = {
-    feature: feature$3,
+    feature: feature$4,
     rank,
     currentManifestId,
     globalManifest,
@@ -4184,6 +4082,15 @@ const DashboardSelectors = {
     capabilities
 };
 
+const SearchActions = {
+    search: createAction('[Search] search', props()),
+    getDatasourceItems: createAction('[Search] (bus) get datasource items', props()),
+    // result Search
+    searchSuccess: createAction('[Search Api] (bus) Search Success', props()),
+    searchFailure: createAction('[Search Api] (bus) Search Failure', props()),
+    setSearchLoading: createAction('[Search Api] (bus) set Search loading datasource status', props())
+};
+
 class SearchService {
     constructor(httpClient, store) {
         this.httpClient = httpClient;
@@ -4273,7 +4180,7 @@ class SearchService {
             limit
         })));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchService, deps: [{ token: i1$1.HttpClient }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchService, deps: [{ token: i1$2.HttpClient }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchService, decorators: [{
@@ -4281,7 +4188,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.HttpClient }, { type: i1.Store }]; } });
+        }], ctorParameters: function () { return [{ type: i1$2.HttpClient }, { type: i1.Store }]; } });
 
 class DataSourceService {
     constructor(store, httpClient, translateService) {
@@ -4393,7 +4300,7 @@ class DataSourceService {
             .select(ConfigSelectors.refUrl)
             .pipe(switchMap((url) => this.httpClient.post(encodeURI(`${url}/dataset-versions/id/${versionId}/activate`), null)));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataSourceService, deps: [{ token: i1.Store }, { token: i1$1.HttpClient }, { token: PryI18nService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataSourceService, deps: [{ token: i1.Store }, { token: i1$2.HttpClient }, { token: PryI18nService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataSourceService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataSourceService, decorators: [{
@@ -4401,7 +4308,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1.Store }, { type: i1$1.HttpClient }, { type: PryI18nService }]; } });
+        }], ctorParameters: function () { return [{ type: i1.Store }, { type: i1$2.HttpClient }, { type: PryI18nService }]; } });
 
 class DataSourceEffects {
     constructor(actions$, searchService, dataSourceService, snackBar, translate, store, pryDialog) {
@@ -4530,12 +4437,12 @@ class DataSourceEffects {
         this.activateOrDeactivateDatasetVersionSuccess$ = createEffect(() => this.actions$.pipe(ofType(DataSourceActions.dataset.activateDatasetVersionSuccess, DataSourceActions.dataset.deactivateDatasetVersionSuccess), map((action) => DataSourceActions.dataset.listVersions())));
         this.previewsGetById$ = createEffect(() => this.actions$.pipe(ofType(DataSourceActions.dataset.previews.getById), switchMap((action) => this.dataSourceService.getPreviews(action.id).pipe(map((previews) => DataSourceActions.dataset.previews.getByIdSuccess({ previews })), catchError((error) => [DataSourceActions.dataset.previews.getByIdFailure({ error })])))));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataSourceEffects }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataSourceEffects, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$2.Actions }, { type: SearchService }, { type: DataSourceService }, { type: PrySnackbarService }, { type: PryI18nService }, { type: i1.Store }, { type: PryDialogService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$3.Actions }, { type: SearchService }, { type: DataSourceService }, { type: PrySnackbarService }, { type: PryI18nService }, { type: i1.Store }, { type: PryDialogService }]; } });
 
 class FieldService {
     constructor(httpClient, store) {
@@ -4557,7 +4464,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: "16.2.12", ngImport: i0, type: FieldService, deps: [{ token: i1$1.HttpClient }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FieldService, deps: [{ token: i1$2.HttpClient }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FieldService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FieldService, decorators: [{
@@ -4565,7 +4472,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.HttpClient }, { type: i1.Store }]; } });
+        }], ctorParameters: function () { return [{ type: i1$2.HttpClient }, { type: i1.Store }]; } });
 
 class FieldEffects {
     constructor(actions$, fieldService) {
@@ -4573,12 +4480,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: "16.2.12", ngImport: i0, type: FieldEffects, deps: [{ token: i1$2.Actions }, { token: FieldService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FieldEffects, deps: [{ token: i1$3.Actions }, { token: FieldService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FieldEffects }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FieldEffects, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$2.Actions }, { type: FieldService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$3.Actions }, { type: FieldService }]; } });
 
 class ImageEffects {
     constructor(actions$, imageService) {
@@ -4587,23 +4494,23 @@ 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: "16.2.12", ngImport: i0, type: ImageEffects, deps: [{ token: i1$2.Actions }, { token: ImageService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ImageEffects, deps: [{ token: i1$3.Actions }, { token: ImageService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ImageEffects }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ImageEffects, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$2.Actions }, { type: ImageService }]; } });
-
-const feature$2 = createFeatureSelector(contextMenuFeatureKey);
-const opened = createSelector(feature$2, (state) => state?.opened);
-const position = createSelector(feature$2, (state) => ({ clientX: state?.clientX ?? 0, clientY: state?.clientY ?? 0 }));
-const itemId = createSelector(feature$2, (state) => state.itemId);
-const from = createSelector(feature$2, (state) => state.from);
-const coordinates = createSelector(feature$2, (state) => state.coordinates);
-const resultSet = createSelector(feature$2, (state) => state.resultSet);
-const allowObjectCreation = createSelector(feature$2, (state) => state.allowObjectCreation);
+        }], ctorParameters: function () { return [{ type: i1$3.Actions }, { type: ImageService }]; } });
+
+const feature$3 = createFeatureSelector(contextMenuFeatureKey);
+const opened = createSelector(feature$3, (state) => state?.opened);
+const position = createSelector(feature$3, (state) => ({ clientX: state?.clientX ?? 0, clientY: state?.clientY ?? 0 }));
+const itemId = createSelector(feature$3, (state) => state.itemId);
+const from = createSelector(feature$3, (state) => state.from);
+const coordinates = createSelector(feature$3, (state) => state.coordinates);
+const resultSet = createSelector(feature$3, (state) => state.resultSet);
+const allowObjectCreation = createSelector(feature$3, (state) => state.allowObjectCreation);
 const ContextMenuSelectors = {
-    feature: feature$2,
+    feature: feature$3,
     opened,
     position,
     itemId,
@@ -4791,7 +4698,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: "16.2.12", ngImport: i0, type: ItemService, deps: [{ token: i1.Store }, { token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ItemService, deps: [{ token: i1.Store }, { token: i1$2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ItemService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ItemService, decorators: [{
@@ -4799,7 +4706,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1.Store }, { type: i1$1.HttpClient }]; } });
+        }], ctorParameters: function () { return [{ type: i1.Store }, { type: i1$2.HttpClient }]; } });
 
 class ItemEffects {
     constructor(actions$, service, store, snackBar, translateService) {
@@ -4826,12 +4733,12 @@ class ItemEffects {
             });
         })), { dispatch: false });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ItemEffects, deps: [{ token: i1$2.Actions }, { token: ItemService }, { token: i1.Store }, { token: PrySnackbarService }, { token: PryI18nService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ItemEffects, deps: [{ token: i1$3.Actions }, { token: ItemService }, { token: i1.Store }, { token: PrySnackbarService }, { token: PryI18nService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ItemEffects }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ItemEffects, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$2.Actions }, { type: ItemService }, { type: i1.Store }, { type: PrySnackbarService }, { type: PryI18nService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$3.Actions }, { type: ItemService }, { type: i1.Store }, { type: PrySnackbarService }, { type: PryI18nService }]; } });
 
 const RelationTypesActions = {
     load: createAction('[Relation Types] Load Relation Types'),
@@ -4884,7 +4791,7 @@ 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: "16.2.12", ngImport: i0, type: RelationTypesService, deps: [{ token: i1.Store }, { token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RelationTypesService, deps: [{ token: i1.Store }, { token: i1$2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RelationTypesService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RelationTypesService, decorators: [{
@@ -4892,7 +4799,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1.Store }, { type: i1$1.HttpClient }]; } });
+        }], ctorParameters: function () { return [{ type: i1.Store }, { type: i1$2.HttpClient }]; } });
 
 class RelationTypesEffects {
     constructor(actions$, service, router, pryDialog) {
@@ -4924,12 +4831,12 @@ class RelationTypesEffects {
             DashboardActions.addRelationsToResultSets({ relations })
         ]), catchError((error) => [RelationTypesActions.createRelationFailure({ error })])))));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RelationTypesEffects, deps: [{ token: i1$2.Actions }, { token: RelationTypesService }, { token: i3.Router }, { token: PryDialogService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RelationTypesEffects, deps: [{ token: i1$3.Actions }, { token: RelationTypesService }, { token: i3.Router }, { token: PryDialogService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RelationTypesEffects }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RelationTypesEffects, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$2.Actions }, { type: RelationTypesService }, { type: i3.Router }, { type: PryDialogService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$3.Actions }, { type: RelationTypesService }, { type: i3.Router }, { type: PryDialogService }]; } });
 
 const relationTypesFeatureKey = '@pry/relation-types';
 const initialRelationTypeState = {
@@ -4979,17 +4886,44 @@ class SearchEffects {
             params: action.params
         }))));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchEffects, deps: [{ token: i1$2.Actions }, { token: SearchService }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchEffects, deps: [{ token: i1$3.Actions }, { token: SearchService }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchEffects }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchEffects, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$2.Actions }, { type: SearchService }, { type: i1.Store }]; } });
+        }], ctorParameters: function () { return [{ type: i1$3.Actions }, { type: SearchService }, { type: i1.Store }]; } });
+
+const searchFeatureKey = '@pry/search';
+const initialSearchState = {
+    searchLoading: [],
+    payload: undefined,
+    id: undefined
+};
+const searchReducer = createReducer(initialSearchState, on(SearchActions.search, (state, action) => ({
+    ...state,
+    searchLoading: [...new Set([...state.searchLoading, action.id ?? DEFAULT_NAMED_QUERY_ID])],
+    payload: action.payload,
+    id: action.id
+})), on(SearchActions.getDatasourceItems, (state, action) => ({
+    ...state,
+    searchLoading: [...new Set([...state.searchLoading, action.id])]
+})), on(SearchActions.searchSuccess, (state, action) => ({
+    ...state,
+    searchLoading: [...state.searchLoading.filter((id) => id !== (action.id ?? DEFAULT_NAMED_QUERY_ID))]
+})), on(SearchActions.searchFailure, (state, action) => ({
+    ...state,
+    searchLoading: [...state.searchLoading.filter((id) => id !== (action.id ?? DEFAULT_NAMED_QUERY_ID))]
+})), on(SearchActions.setSearchLoading, (state, action) => ({
+    ...state,
+    searchLoading: action.start
+        ? [...new Set([...state.searchLoading, ...action.datasources])]
+        : [...state.searchLoading.filter((id) => !action.datasources.includes(id))]
+})));
 
 class AccordionComponent {
     constructor() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AccordionComponent, selector: "pry-accordion", ngImport: i0, template: "<cdk-accordion class=\"o-accordion\">\n  <ng-content></ng-content>\n</cdk-accordion>\n", dependencies: [{ kind: "directive", type: i1$4.CdkAccordion, selector: "cdk-accordion, [cdkAccordion]", inputs: ["multi"], exportAs: ["cdkAccordion"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AccordionComponent, decorators: [{
             type: Component,
@@ -5008,7 +4942,7 @@ class AccordionItemComponent {
         this.search.emit({ ...this.search$.getValue(), [item]: $event });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: i2.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$3.CdkAccordionItem, selector: "cdk-accordion-item, [cdkAccordionItem]", inputs: ["expanded", "disabled"], outputs: ["closed", "opened", "destroyed", "expandedChange"], exportAs: ["cdkAccordionItem"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AccordionItemComponent, decorators: [{
             type: Component,
@@ -5071,7 +5005,7 @@ class TabGroupComponent {
         this.currentTabIndex = index;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TabGroupComponent, selector: "pry-tab-group", inputs: { translationStringBase: "translationStringBase" }, 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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TabGroupComponent, selector: "pry-tab-group", inputs: { translationStringBase: "translationStringBase" }, 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabGroupComponent, decorators: [{
             type: Component,
@@ -5118,12 +5052,12 @@ class PryDefaultGeoAuthService extends PryGeoAuthService {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PryDefaultGeoAuthService, deps: [{ token: i1$1.HttpClient }, { token: PrySnackbarService }, { token: PryI18nService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PryDefaultGeoAuthService, deps: [{ token: i1$2.HttpClient }, { token: PrySnackbarService }, { token: PryI18nService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PryDefaultGeoAuthService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PryDefaultGeoAuthService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$1.HttpClient }, { type: PrySnackbarService }, { type: PryI18nService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$2.HttpClient }, { type: PrySnackbarService }, { type: PryI18nService }]; } });
 
 class EllipsisDirective {
     constructor(elementRef, renderer) {
@@ -5224,7 +5158,7 @@ class ChipsSelectorComponent extends SubscriptionnerDirective {
             : this.usedItems$.getValue().find((usedItem) => this.areItemsEqual(usedItem, item));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipsSelectorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: PryI18nService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChipsSelectorComponent, selector: "pry-chips-selector", inputs: { bindValue: "bindValue", bindLabel: "bindLabel", translationStringBase: "translationStringBase", itemTranslationStringBase: "itemTranslationStringBase", showActionButtons: "showActionButtons", items: "items", usedItems: "usedItems" }, outputs: { cancel: "cancel", validated: "validated", previousTab: "previousTab", nextTab: "nextTab", itemsChanged: "itemsChanged" }, usesInheritance: true, ngImport: i0, template: "<div class=\"m-namedqueries-wrapper\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"dialog_namedqueries\">\n  <div class=\"o-widget__search\">\n    <input\n      id=\"catalog-search\"\n      (keydown.shift.tab)=\"previousTab.emit()\"\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  <div *ngIf=\"((usedItems$ | async) ?? []).length > 0; else noItems\">\n    <h4 class=\"a-h4\">{{ translationStringBase + 'selection' | i18n }}</h4>\n    <div>\n      <ul class=\"o-datasources__list o-datasources__list--selected\">\n        <li *ngFor=\"let item of usedItems$ | async\" class=\"o-datasources__item\">\n          <button class=\"o-datasources__card -selected\" (click)=\"toggleItemSelection(item)\" type=\"button\">\n            <p>\n              {{ getItemLabel(item) }}\n            </p>\n            <pry-icon *ngIf=\"isGeo(item)\" iconSvg=\"globe\"></pry-icon>\n            <div class=\"a-btn a-btn--primary a-btn--icon-only\">\n              <pry-icon [iconSvg]=\"'close'\" [width]=\"17\" [height]=\"17\"></pry-icon>\n              <span class=\"u-visually-hidden\">{{ translationStringBase + 'unselectItem' | i18n }}</span>\n            </div>\n          </button>\n        </li>\n      </ul>\n    </div>\n  </div>\n  <ng-template #noItems>\n    <h4 class=\"a-h4\">{{ translationStringBase + 'noItemSelected' | i18n }}</h4>\n  </ng-template>\n  <h4 class=\"a-h4\">{{ translationStringBase + 'select' | i18n }}</h4>\n  <div class=\"o-datasources__main\">\n    <ul class=\"o-datasources__list\">\n      <li *ngFor=\"let item of unusedItems$ | async\" class=\"o-datasources__item\">\n        <button class=\"o-datasources__card\" (click)=\"toggleItemSelection(item)\">\n          <span class=\"u-visually-hidden\">{{ translationStringBase + 'selectItem' | i18n }}</span>\n          <p class=\"a-p\">{{ getItemLabel(item) }}</p>\n          <pry-icon *ngIf=\"isGeo(item)\" iconSvg=\"globe\"></pry-icon>\n        </button>\n      </li>\n    </ul>\n  </div>\n  <div *ngIf=\"showActionButtons\" class=\"m-btn-group o-datasources__bottom\">\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</div>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.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: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChipsSelectorComponent, selector: "pry-chips-selector", inputs: { bindValue: "bindValue", bindLabel: "bindLabel", translationStringBase: "translationStringBase", itemTranslationStringBase: "itemTranslationStringBase", showActionButtons: "showActionButtons", items: "items", usedItems: "usedItems" }, outputs: { cancel: "cancel", validated: "validated", previousTab: "previousTab", nextTab: "nextTab", itemsChanged: "itemsChanged" }, usesInheritance: true, ngImport: i0, template: "<div class=\"m-namedqueries-wrapper\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"dialog_namedqueries\">\n  <div class=\"o-widget__search\">\n    <input\n      id=\"catalog-search\"\n      (keydown.shift.tab)=\"previousTab.emit()\"\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  <div *ngIf=\"((usedItems$ | async) ?? []).length > 0; else noItems\">\n    <h4 class=\"a-h4\">{{ translationStringBase + 'selection' | i18n }}</h4>\n    <div>\n      <ul class=\"o-datasources__list o-datasources__list--selected\">\n        <li *ngFor=\"let item of usedItems$ | async\" class=\"o-datasources__item\">\n          <button class=\"o-datasources__card -selected\" (click)=\"toggleItemSelection(item)\" type=\"button\">\n            <p>\n              {{ getItemLabel(item) }}\n            </p>\n            <pry-icon *ngIf=\"isGeo(item)\" iconSvg=\"globe\"></pry-icon>\n            <div class=\"a-btn a-btn--primary a-btn--icon-only\">\n              <pry-icon [iconSvg]=\"'close'\" [width]=\"17\" [height]=\"17\"></pry-icon>\n              <span class=\"u-visually-hidden\">{{ translationStringBase + 'unselectItem' | i18n }}</span>\n            </div>\n          </button>\n        </li>\n      </ul>\n    </div>\n  </div>\n  <ng-template #noItems>\n    <h4 class=\"a-h4\">{{ translationStringBase + 'noItemSelected' | i18n }}</h4>\n  </ng-template>\n  <h4 class=\"a-h4\">{{ translationStringBase + 'select' | i18n }}</h4>\n  <div class=\"o-datasources__main\">\n    <ul class=\"o-datasources__list\">\n      <li *ngFor=\"let item of unusedItems$ | async\" class=\"o-datasources__item\">\n        <button class=\"o-datasources__card\" (click)=\"toggleItemSelection(item)\">\n          <span class=\"u-visually-hidden\">{{ translationStringBase + 'selectItem' | i18n }}</span>\n          <p class=\"a-p\">{{ getItemLabel(item) }}</p>\n          <pry-icon *ngIf=\"isGeo(item)\" iconSvg=\"globe\"></pry-icon>\n        </button>\n      </li>\n    </ul>\n  </div>\n  <div *ngIf=\"showActionButtons\" class=\"m-btn-group o-datasources__bottom\">\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</div>\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: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipsSelectorComponent, decorators: [{
             type: Component,
@@ -5309,7 +5243,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$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,
+            HttpClientModule, i1.StoreFeatureModule, i1.StoreFeatureModule, i1.StoreFeatureModule, i1.StoreFeatureModule, i1.StoreFeatureModule, i1.StoreFeatureModule, i1.StoreFeatureModule, i1.StoreFeatureModule, i1.StoreFeatureModule, i1$3.EffectsFeatureModule, i1$3.EffectsFeatureModule, i1$3.EffectsFeatureModule, i1$3.EffectsFeatureModule, i1$3.EffectsFeatureModule, i1$3.EffectsFeatureModule, i1$3.EffectsFeatureModule, i1$3.EffectsFeatureModule, i1$3.EffectsFeatureModule, PryIconModule,
             OverlayModule,
             PryOverlayModule,
             PryI18nModule,
@@ -5399,6 +5333,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: PryI18nService }]; } });
 
+const feature$2 = createFeatureSelector(searchFeatureKey);
+const searchLoading = createSelector(feature$2, (state) => state.searchLoading);
+const SearchSelectors = {
+    feature: feature$2,
+    searchLoading
+};
+
 const latLonToGeographicFieldTransformation = (latAttrName, lonAttrName, locAttrName, datasetIds = []) => (id, result) => {
     if (datasetIds.length > 0 && !datasetIds.includes(id)) {
         return result;
@@ -5590,7 +5531,7 @@ class PryBackendAggregationService extends PryAggregationService {
         }
         return this.cache[key].response;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PryBackendAggregationService, deps: [{ token: i1.Store }, { token: PrySnackbarService }, { token: PryI18nService }, { token: i1$1.HttpClient }, { token: SearchService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PryBackendAggregationService, deps: [{ token: i1.Store }, { token: PrySnackbarService }, { token: PryI18nService }, { token: i1$2.HttpClient }, { token: SearchService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PryBackendAggregationService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PryBackendAggregationService, decorators: [{
@@ -5598,7 +5539,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1.Store }, { type: PrySnackbarService }, { type: PryI18nService }, { type: i1$1.HttpClient }, { type: SearchService }]; } });
+        }], ctorParameters: function () { return [{ type: i1.Store }, { type: PrySnackbarService }, { type: PryI18nService }, { type: i1$2.HttpClient }, { type: SearchService }]; } });
 
 class ResultsetUtils {
     static mergeResultSets(rs1, rs2) {
@@ -5982,7 +5923,7 @@ class LoopScrollColumnComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoopScrollColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoopScrollColumnComponent, decorators: [{
             type: Component,
@@ -6052,7 +5993,7 @@ class PryTimePickerComponent {
                 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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoopScrollColumnComponent, selector: "loop-scroll-column", inputs: ["list", "selectedItem"], outputs: ["selection"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
+        ], 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PryTimePickerComponent, decorators: [{
             type: Component,
@@ -6286,7 +6227,7 @@ class PryDatePickerComponent {
                 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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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: i2.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  <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: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PryDatePickerComponent, decorators: [{
             type: Component,
@@ -6373,7 +6314,7 @@ class PryEditInputComponent {
                 useExisting: forwardRef(() => PryEditInputComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<div class=\"o-pry-edit\" [class.-edit]=\"editMode\">\n  <div class=\"m-form-label-field\">\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=\"m-form-label-field__edit-inline\">\n      <p class=\"m-form-label-field__edit-inline__txtvalue\" *ngIf=\"!editMode\">\n        {{ value }}\n      </p>\n      <input\n        id=\"edit-input-{{ id }}\"\n        type=\"text\"\n        class=\"a-form-field\"\n        [ngModel]=\"value\"\n        (ngModelChange)=\"writeValue($event)\"\n        *ngIf=\"editMode\"\n      />\n      <button type=\"button\" class=\"a-btn a-btn--secondary a-btn--icon-only -circle -size-xs\" (click)=\"toggle()\">\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</div>\n", dependencies: [{ kind: "directive", type: i2.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: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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 }); }
+        ], ngImport: i0, template: "<div class=\"o-pry-edit\" [class.-edit]=\"editMode\">\n  <div class=\"m-form-label-field\">\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=\"m-form-label-field__edit-inline\">\n      <p class=\"m-form-label-field__edit-inline__txtvalue\" *ngIf=\"!editMode\">\n        {{ value }}\n      </p>\n      <input\n        id=\"edit-input-{{ id }}\"\n        type=\"text\"\n        class=\"a-form-field\"\n        [ngModel]=\"value\"\n        (ngModelChange)=\"writeValue($event)\"\n        *ngIf=\"editMode\"\n      />\n      <button type=\"button\" class=\"a-btn a-btn--secondary a-btn--icon-only -circle -size-xs\" (click)=\"toggle()\">\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</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: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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: "16.2.12", ngImport: i0, type: PryEditInputComponent, decorators: [{
             type: Component,
@@ -6453,7 +6394,7 @@ class PryModalComponent {
         this.cancelAction = () => { };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PryModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: i2.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: "14.0.0", version: "16.2.12", 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PryModalComponent, decorators: [{
             type: Component,
@@ -6548,7 +6489,7 @@ class PryToggleComponent {
                 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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: "<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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PryToggleComponent, decorators: [{
             type: Component,
@@ -6783,6 +6724,90 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
+class SelectA11yService {
+    constructor() {
+        this.toggle = (...args) => { };
+    }
+    setToggle(toggleCallback) {
+        this.toggle = toggleCallback;
+    }
+    onFocusChange(origin, autocomplete, toggleFocus, focusSelect) {
+        toggleFocus();
+        switch (origin) {
+            case 'mouse':
+                this.toggle(true);
+                break;
+            case 'keyboard':
+                if (autocomplete) {
+                    focusSelect();
+                }
+                break;
+        }
+    }
+    onKeydownSelect(event, autocomplete) {
+        if (!autocomplete) {
+            if (event.key === 'Enter' || event.code === 'Space') {
+                this.toggle();
+            }
+        }
+    }
+    onKeydownAutocompleteInput(event, open, searchValue, optionsModalRef) {
+        if (event.key === 'Tab') {
+            return;
+        }
+        if (!open && searchValue?.length > 2 && /[\W]*/.exec(event.key)) {
+            this.toggle();
+        }
+        else if (open && event.key === 'ArrowDown') {
+            optionsModalRef?.rootNodes[0].querySelector('[aria-selected="false"]').focus();
+        }
+    }
+    onKeydownOption(event, optionDivRef, first, last, autocomplete, selectElement, select) {
+        switch (event.key) {
+            case 'Enter':
+            case 'Space':
+            case ' ':
+                event.preventDefault();
+                select();
+                break;
+            case 'ArrowUp':
+                if (!first) {
+                    event.preventDefault();
+                    optionDivRef.previousElementSibling.focus();
+                }
+                if (first && autocomplete) {
+                    selectElement.focus();
+                }
+                break;
+            case 'ArrowDown':
+                if (!last) {
+                    event.preventDefault();
+                    optionDivRef.nextElementSibling.focus();
+                }
+                if (last && autocomplete) {
+                    // with autocomplete=true, focus is not trapped, so prevent tabbing out of list
+                    event.preventDefault();
+                }
+                break;
+            case 'Tab':
+                if (last && autocomplete) {
+                    event.preventDefault();
+                }
+                break;
+            case 'Escape':
+                this.toggle();
+                break;
+            default:
+                break;
+        }
+    }
+    focusInitialSelection(optionsModalRef) {
+        let selectedOption = optionsModalRef?.rootNodes[0].querySelector('[aria-selected="true"]') ??
+            optionsModalRef?.rootNodes[0].querySelector('[aria-selected="false"]');
+        selectedOption?.setAttribute('cdkFocusInitial', '');
+    }
+}
+
 let uniqueId$1 = 0;
 class PrySelectComponent extends SubscriptionnerDirective {
     set items(items) {
@@ -6803,11 +6828,12 @@ class PrySelectComponent extends SubscriptionnerDirective {
     get modalId() {
         return 'select-modal-' + this.id;
     }
-    constructor(_cd, overlay, viewContainerRef) {
+    constructor(_cd, overlay, viewContainerRef, a11yService) {
         super();
         this._cd = _cd;
         this.overlay = overlay;
         this.viewContainerRef = viewContainerRef;
+        this.a11yService = a11yService;
         this.id = uniqueId$1++;
         this._items$ = new BehaviorSubject([]);
         this.open = false;
@@ -6832,6 +6858,11 @@ class PrySelectComponent extends SubscriptionnerDirective {
         this._disabled = false;
         this.focused = false;
         this.modalWidth = 200;
+        this.onFocusChange = (origin) => this.a11yService.onFocusChange(origin, this.autocomplete, () => this.toggleFocus(), () => this.focusSelect());
+        this.onKeydownSelect = (event) => this.a11yService.onKeydownSelect(event, this.autocomplete);
+        this.onKeydownAutocompleteInput = (event) => this.a11yService.onKeydownAutocompleteInput(event, this.open, this.search$.getValue(), this.optionsModalRef);
+        this.onKeydownOption = (event, item, index, optionDivRef, first, last) => this.a11yService.onKeydownOption(event, optionDivRef, first, last, this.autocomplete, this.selectElement.nativeElement, () => this.select(event, item, index, !this.multiple));
+        this.focusInitialSelection = () => this.a11yService.focusInitialSelection(this.optionsModalRef);
         this.matchingItems$ = combineLatest([this._items$, this.search$, this.searchSelected$]).pipe(map(([items, term, alreadySelected]) => this.autocomplete && term && term.length > 0 && !alreadySelected
             ? items.filter((i) => {
                 const itemValue = this.bindLabel ? i?.[this.bindLabel] : i;
@@ -6857,6 +6888,7 @@ class PrySelectComponent extends SubscriptionnerDirective {
                 }
             }
         }));
+        this.a11yService.setToggle((force) => this.toggle(force));
     }
     registerOnChange(fn) {
         this._onChange = fn;
@@ -6902,7 +6934,7 @@ class PrySelectComponent extends SubscriptionnerDirective {
         this.searched.next($event);
         this.searchSelected$.next(false);
     }
-    select($event, item, index) {
+    select($event, item, index, forceClose = true) {
         const itemValue = this.bindValue ? item?.[this.bindValue] : item;
         const keyProp = this.bindValue ?? this.bindLabel ?? 'id';
         if (this.multiple) {
@@ -6926,7 +6958,7 @@ class PrySelectComponent extends SubscriptionnerDirective {
         else {
             this.writeValue(itemValue);
         }
-        if (this.closeOnSelect) {
+        if (this.closeOnSelect || forceClose) {
             this.toggle(false);
         }
         this.activeDescendant = index;
@@ -6947,24 +6979,26 @@ class PrySelectComponent extends SubscriptionnerDirective {
                             this.writeValue(this.search$.getValue());
                         }
                     });
-                    this.overlayRef.attach(new TemplatePortal(this.optionsModal, this.viewContainerRef));
+                    this.optionsModalRef = this.overlayRef.attach(new TemplatePortal(this.optionsModal, this.viewContainerRef));
+                    this.focusInitialSelection();
                 }
                 else {
                     this.overlayRef?.dispose();
                     this.overlayRef = undefined;
-                    this.focused = false;
+                    this.focusSelect();
                 }
             }
         }
     }
     handleClick() {
-        if (!this.focused) {
-            this.onInputFocus();
-        }
-    }
-    onInputFocus(force) {
-        this.toggle(force);
         this.focused = true;
+        this.toggle();
+    }
+    toggleFocus() {
+        this.focused = !this.focused;
+    }
+    focusSelect() {
+        return this.autocomplete ? this.input?.nativeElement.focus() : this.selectElement?.nativeElement.focus();
     }
     getOverlayConfig() {
         const positionStrategy = this.overlay
@@ -6997,14 +7031,15 @@ class PrySelectComponent extends SubscriptionnerDirective {
     get _elementRef() {
         return this.elementRef ?? this.selectElement.nativeElement;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PrySelectComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i2$1.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PrySelectComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i2.Overlay }, { token: i0.ViewContainerRef }, { token: SelectA11yService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PrySelectComponent, selector: "pry-select", inputs: { items: "items", clearable: "clearable", multiple: "multiple", closeOnSelect: "closeOnSelect", placeholder: "placeholder", isForm: "isForm", required: "required", name: "name", readonly: "readonly", autocomplete: "autocomplete", bindValue: "bindValue", bindLabel: "bindLabel", iconSize: "iconSize", bindIcon: "bindIcon", template: "template", i18nPrefix: "i18nPrefix", loading: "loading", elementRef: "elementRef" }, outputs: { searched: "searched", cleared: "cleared" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => PrySelectComponent),
                 multi: true
-            }
-        ], viewQueries: [{ propertyName: "optionsModal", first: true, predicate: ["optionsModal"], descendants: true, read: TemplateRef }, { propertyName: "selectElement", first: true, predicate: ["selectElement"], 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>\n  <div class=\"a-pry-select__content\">\n    <ng-container *ngIf=\"autocomplete; else noAutocomplete\">\n      <input\n        type=\"text\"\n        class=\"a-pry-select__search\"\n        [ngModel]=\"search$.getValue()\"\n        (ngModelChange)=\"search($event)\"\n        (focus)=\"onInputFocus(true)\"\n        aria-autocomplete=\"list\"\n        [attr.aria-controls]=\"open ? modalId : null\"\n        [attr.aria-disabled]=\"disabled\"\n        [disabled]=\"disabled\"\n      />\n    </ng-container>\n    <ng-template #noAutocomplete>\n      <ng-container *ngIf=\"(valueItems$ | async).length === 0; else selectedValues\">\n        <span class=\"a-pry-select__placeholder\">{{ placeholder }}</span>\n      </ng-container>\n      <ng-template #selectedValues>\n        <ng-container *ngFor=\"let item of valueItems$ | async\">\n          <div class=\"a-pry-select__value\" [class.pry-select-form]=\"isForm\" [class.-multiple]=\"multiple\">\n            <ng-container *ngIf=\"template; else noTemplateLabel\">\n              <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item, clear }\"></ng-container>\n            </ng-container>\n            <ng-template #noTemplateLabel>\n              <pry-icon\n                *ngIf=\"bindIcon\"\n                [iconSvg]=\"item[bindIcon]\"\n                [width]=\"iconSize[0]\"\n                [height]=\"iconSize[1]\"\n              ></pry-icon>\n              <ng-container *ngIf=\"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              </ng-container>\n            </ng-template>\n          </div>\n        </ng-container>\n      </ng-template>\n      <div class=\"a-pry-select__filler\"></div>\n    </ng-template>\n  </div>\n  <div class=\"a-pry-select__actions\">\n    <span *ngIf=\"clearable\" class=\"a-pry-select__clear\" (click)=\"clearAll($event)\" aria-hidden=\"true\">\u00D7</span>\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]=\"readonly\"\n  >\n    <div class=\"a-pry-select__options__option -hint\" *ngIf=\"loading\" [style.width.px]=\"modalWidth\">\n      <div class=\"no-widget no-widget__loader\">\n        <pry-icon\n          iconSvg=\"loader\"\n          class=\"no-widget__loading\"\n          [alt]=\"'@pry.widget.target.loading' | i18n\"\n          [width]=\"30\"\n          [height]=\"30\"\n          *ngIf=\"loading\"\n        />\n      </div>\n      <p>{{ '@pry.select.loading' | i18n }}...</p>\n    </div>\n    <ng-container *ngIf=\"!loading\">\n      <ng-container *ngFor=\"let item of matchingItems$ | async; let index = index\">\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          [style.width.px]=\"modalWidth\"\n          role=\"option\"\n          [id]=\"'select-option-' + index\"\n        >\n          <ng-container *ngIf=\"template; else noTemplate\">\n            <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item, clear }\"></ng-container>\n          </ng-container>\n          <ng-template #noTemplate>\n            <pry-icon\n              *ngIf=\"bindIcon\"\n              [iconSvg]=\"item[bindIcon]\"\n              [width]=\"iconSize[0]\"\n              [height]=\"iconSize[1]\"\n            ></pry-icon>\n            <ng-container *ngIf=\"bindLabel ? item?.[bindLabel] : item as value\">\n              {{ (i18nPrefix ? i18nPrefix : '') + value | i18n : { warn: false } }}\n            </ng-container>\n          </ng-template>\n        </div>\n      </ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
+            },
+            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    <ng-container *ngIf=\"autocomplete; else noAutocomplete\">\n      <input\n        type=\"text\"\n        class=\"a-pry-select__search\"\n        [ngModel]=\"search$.getValue()\"\n        (ngModelChange)=\"search($event)\"\n        aria-autocomplete=\"list\"\n        [attr.aria-controls]=\"open ? modalId : null\"\n        [attr.aria-disabled]=\"disabled\"\n        [disabled]=\"disabled\"\n        (keydown)=\"onKeydownAutocompleteInput($event)\"\n        #input\n      />\n    </ng-container>\n    <ng-template #noAutocomplete>\n      <ng-container *ngIf=\"(valueItems$ | async).length === 0; else selectedValues\">\n        <span class=\"a-pry-select__placeholder\">{{ placeholder }}</span>\n      </ng-container>\n      <ng-template #selectedValues>\n        <ng-container *ngFor=\"let item of valueItems$ | async\">\n          <div class=\"a-pry-select__value\" [class.pry-select-form]=\"isForm\" [class.-multiple]=\"multiple\">\n            <ng-container *ngIf=\"template; else noTemplateLabel\">\n              <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item, clear }\"></ng-container>\n            </ng-container>\n            <ng-template #noTemplateLabel>\n              <pry-icon\n                *ngIf=\"bindIcon\"\n                [iconSvg]=\"item[bindIcon]\"\n                [width]=\"iconSize[0]\"\n                [height]=\"iconSize[1]\"\n              ></pry-icon>\n              <ng-container *ngIf=\"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              </ng-container>\n            </ng-template>\n          </div>\n        </ng-container>\n      </ng-template>\n      <div class=\"a-pry-select__filler\"></div>\n    </ng-template>\n  </div>\n  <div class=\"a-pry-select__actions\">\n    <span *ngIf=\"clearable\" class=\"a-pry-select__clear\" (click)=\"clearAll($event)\" aria-hidden=\"true\">\u00D7</span>\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]=\"readonly\"\n    cdkTrapFocus=\"!autocomplete\"\n    [cdkTrapFocusAutoCapture]=\"true\"\n  >\n    <div class=\"a-pry-select__options__option -hint\" *ngIf=\"loading\" [style.width.px]=\"modalWidth\">\n      <div class=\"no-widget no-widget__loader\">\n        <pry-icon\n          iconSvg=\"loader\"\n          class=\"no-widget__loading\"\n          [alt]=\"'@pry.widget.target.loading' | i18n\"\n          [width]=\"30\"\n          [height]=\"30\"\n          *ngIf=\"loading\"\n        />\n      </div>\n      <p>{{ '@pry.select.loading' | i18n }}...</p>\n    </div>\n    <ng-container *ngIf=\"!loading\">\n      <ng-container *ngFor=\"let item of matchingItems$ | async; let index = index; let first = first; let last = last\">\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          <ng-container *ngIf=\"template; else noTemplate\">\n            <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item, clear }\"></ng-container>\n          </ng-container>\n          <ng-template #noTemplate>\n            <pry-icon\n              *ngIf=\"bindIcon\"\n              [iconSvg]=\"item[bindIcon]\"\n              [width]=\"iconSize[0]\"\n              [height]=\"iconSize[1]\"\n            ></pry-icon>\n            <ng-container *ngIf=\"bindLabel ? item?.[bindLabel] : item as value\">\n              {{ (i18nPrefix ? i18nPrefix : '') + value | i18n : { warn: false } }}\n            </ng-container>\n          </ng-template>\n        </div>\n      </ng-container>\n    </ng-container>\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.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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PrySelectComponent, decorators: [{
             type: Component,
@@ -7013,9 +7048,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => PrySelectComponent),
                             multi: true
-                        }
-                    ], 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>\n  <div class=\"a-pry-select__content\">\n    <ng-container *ngIf=\"autocomplete; else noAutocomplete\">\n      <input\n        type=\"text\"\n        class=\"a-pry-select__search\"\n        [ngModel]=\"search$.getValue()\"\n        (ngModelChange)=\"search($event)\"\n        (focus)=\"onInputFocus(true)\"\n        aria-autocomplete=\"list\"\n        [attr.aria-controls]=\"open ? modalId : null\"\n        [attr.aria-disabled]=\"disabled\"\n        [disabled]=\"disabled\"\n      />\n    </ng-container>\n    <ng-template #noAutocomplete>\n      <ng-container *ngIf=\"(valueItems$ | async).length === 0; else selectedValues\">\n        <span class=\"a-pry-select__placeholder\">{{ placeholder }}</span>\n      </ng-container>\n      <ng-template #selectedValues>\n        <ng-container *ngFor=\"let item of valueItems$ | async\">\n          <div class=\"a-pry-select__value\" [class.pry-select-form]=\"isForm\" [class.-multiple]=\"multiple\">\n            <ng-container *ngIf=\"template; else noTemplateLabel\">\n              <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item, clear }\"></ng-container>\n            </ng-container>\n            <ng-template #noTemplateLabel>\n              <pry-icon\n                *ngIf=\"bindIcon\"\n                [iconSvg]=\"item[bindIcon]\"\n                [width]=\"iconSize[0]\"\n                [height]=\"iconSize[1]\"\n              ></pry-icon>\n              <ng-container *ngIf=\"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              </ng-container>\n            </ng-template>\n          </div>\n        </ng-container>\n      </ng-template>\n      <div class=\"a-pry-select__filler\"></div>\n    </ng-template>\n  </div>\n  <div class=\"a-pry-select__actions\">\n    <span *ngIf=\"clearable\" class=\"a-pry-select__clear\" (click)=\"clearAll($event)\" aria-hidden=\"true\">\u00D7</span>\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]=\"readonly\"\n  >\n    <div class=\"a-pry-select__options__option -hint\" *ngIf=\"loading\" [style.width.px]=\"modalWidth\">\n      <div class=\"no-widget no-widget__loader\">\n        <pry-icon\n          iconSvg=\"loader\"\n          class=\"no-widget__loading\"\n          [alt]=\"'@pry.widget.target.loading' | i18n\"\n          [width]=\"30\"\n          [height]=\"30\"\n          *ngIf=\"loading\"\n        />\n      </div>\n      <p>{{ '@pry.select.loading' | i18n }}...</p>\n    </div>\n    <ng-container *ngIf=\"!loading\">\n      <ng-container *ngFor=\"let item of matchingItems$ | async; let index = index\">\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          [style.width.px]=\"modalWidth\"\n          role=\"option\"\n          [id]=\"'select-option-' + index\"\n        >\n          <ng-container *ngIf=\"template; else noTemplate\">\n            <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item, clear }\"></ng-container>\n          </ng-container>\n          <ng-template #noTemplate>\n            <pry-icon\n              *ngIf=\"bindIcon\"\n              [iconSvg]=\"item[bindIcon]\"\n              [width]=\"iconSize[0]\"\n              [height]=\"iconSize[1]\"\n            ></pry-icon>\n            <ng-container *ngIf=\"bindLabel ? item?.[bindLabel] : item as value\">\n              {{ (i18nPrefix ? i18nPrefix : '') + value | i18n : { warn: false } }}\n            </ng-container>\n          </ng-template>\n        </div>\n      </ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i2$1.Overlay }, { type: i0.ViewContainerRef }]; }, propDecorators: { items: [{
+                        },
+                        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    <ng-container *ngIf=\"autocomplete; else noAutocomplete\">\n      <input\n        type=\"text\"\n        class=\"a-pry-select__search\"\n        [ngModel]=\"search$.getValue()\"\n        (ngModelChange)=\"search($event)\"\n        aria-autocomplete=\"list\"\n        [attr.aria-controls]=\"open ? modalId : null\"\n        [attr.aria-disabled]=\"disabled\"\n        [disabled]=\"disabled\"\n        (keydown)=\"onKeydownAutocompleteInput($event)\"\n        #input\n      />\n    </ng-container>\n    <ng-template #noAutocomplete>\n      <ng-container *ngIf=\"(valueItems$ | async).length === 0; else selectedValues\">\n        <span class=\"a-pry-select__placeholder\">{{ placeholder }}</span>\n      </ng-container>\n      <ng-template #selectedValues>\n        <ng-container *ngFor=\"let item of valueItems$ | async\">\n          <div class=\"a-pry-select__value\" [class.pry-select-form]=\"isForm\" [class.-multiple]=\"multiple\">\n            <ng-container *ngIf=\"template; else noTemplateLabel\">\n              <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item, clear }\"></ng-container>\n            </ng-container>\n            <ng-template #noTemplateLabel>\n              <pry-icon\n                *ngIf=\"bindIcon\"\n                [iconSvg]=\"item[bindIcon]\"\n                [width]=\"iconSize[0]\"\n                [height]=\"iconSize[1]\"\n              ></pry-icon>\n              <ng-container *ngIf=\"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              </ng-container>\n            </ng-template>\n          </div>\n        </ng-container>\n      </ng-template>\n      <div class=\"a-pry-select__filler\"></div>\n    </ng-template>\n  </div>\n  <div class=\"a-pry-select__actions\">\n    <span *ngIf=\"clearable\" class=\"a-pry-select__clear\" (click)=\"clearAll($event)\" aria-hidden=\"true\">\u00D7</span>\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]=\"readonly\"\n    cdkTrapFocus=\"!autocomplete\"\n    [cdkTrapFocusAutoCapture]=\"true\"\n  >\n    <div class=\"a-pry-select__options__option -hint\" *ngIf=\"loading\" [style.width.px]=\"modalWidth\">\n      <div class=\"no-widget no-widget__loader\">\n        <pry-icon\n          iconSvg=\"loader\"\n          class=\"no-widget__loading\"\n          [alt]=\"'@pry.widget.target.loading' | i18n\"\n          [width]=\"30\"\n          [height]=\"30\"\n          *ngIf=\"loading\"\n        />\n      </div>\n      <p>{{ '@pry.select.loading' | i18n }}...</p>\n    </div>\n    <ng-container *ngIf=\"!loading\">\n      <ng-container *ngFor=\"let item of matchingItems$ | async; let index = index; let first = first; let last = last\">\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          <ng-container *ngIf=\"template; else noTemplate\">\n            <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item, clear }\"></ng-container>\n          </ng-container>\n          <ng-template #noTemplate>\n            <pry-icon\n              *ngIf=\"bindIcon\"\n              [iconSvg]=\"item[bindIcon]\"\n              [width]=\"iconSize[0]\"\n              [height]=\"iconSize[1]\"\n            ></pry-icon>\n            <ng-container *ngIf=\"bindLabel ? item?.[bindLabel] : item as value\">\n              {{ (i18nPrefix ? i18nPrefix : '') + value | i18n : { warn: false } }}\n            </ng-container>\n          </ng-template>\n        </div>\n      </ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i2.Overlay }, { type: i0.ViewContainerRef }, { type: SelectA11yService }]; }, propDecorators: { items: [{
                 type: Input
             }], clearable: [{
                 type: Input
@@ -7061,17 +7097,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['selectElement']
             }], elementRef: [{
                 type: Input
+            }], input: [{
+                type: ViewChild,
+                args: ['input']
             }] } });
 
 class PrySelectModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PrySelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: PrySelectModule, declarations: [PrySelectComponent], imports: [CommonModule, FormsModule, PryIconModule, PryI18nModule], exports: [PrySelectComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PrySelectModule, imports: [CommonModule, FormsModule, PryIconModule, PryI18nModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: PrySelectModule, declarations: [PrySelectComponent], imports: [A11yModule, CommonModule, FormsModule, PryIconModule, PryI18nModule], exports: [PrySelectComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PrySelectModule, imports: [A11yModule, CommonModule, FormsModule, PryIconModule, PryI18nModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PrySelectModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, FormsModule, PryIconModule, PryI18nModule],
+                    imports: [A11yModule, CommonModule, FormsModule, PryIconModule, PryI18nModule],
                     declarations: [PrySelectComponent],
                     exports: [PrySelectComponent]
                 }]
@@ -7149,7 +7188,7 @@ class PryRangeComponent {
                 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: i2.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  <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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PryRangeComponent, decorators: [{
             type: Component,
@@ -7252,7 +7291,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)=\"writeValueType($event)\"\n    [items]=\"visibilityTypes\"\n    [ngModel]=\"value?.type\"\n    [disabled]=\"_disabled\"\n    i18nPrefix=\"@pry.share.\"\n    bindValue=\"value\"\n    bindLabel=\"label\"\n    id=\"share_type\"\n    bindIcon=\"icon\"\n    [iconSize]=\"[21, 18]\"\n  ></pry-select>\n</div>\n\n<ng-container *ngIf=\"value?.type === PryVisibilityType.RESTRICTED\">\n  <div class=\"m-form-label-field\">\n    <label class=\"a-label\" for=\"users\">{{ '@pry.share.users' | i18n }}</label>\n    <pry-select\n      (ngModelChange)=\"writeValueUsers($event)\"\n      [items]=\"users$ | async\"\n      [multiple]=\"true\"\n      [closeOnSelect]=\"false\"\n      [ngModel]=\"value?.users\"\n      [disabled]=\"_disabled\"\n      [bindLabel]=\"labelProperty\"\n      [bindValue]=\"valueProperty\"\n      [autocomplete]=\"true\"\n      id=\"users\"\n    ></pry-select>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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", "readonly", "autocomplete", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "loading", "elementRef"], outputs: ["searched", "cleared"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { 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)=\"writeValueType($event)\"\n    [items]=\"visibilityTypes\"\n    [ngModel]=\"value?.type\"\n    [disabled]=\"_disabled\"\n    i18nPrefix=\"@pry.share.\"\n    bindValue=\"value\"\n    bindLabel=\"label\"\n    id=\"share_type\"\n    bindIcon=\"icon\"\n    [iconSize]=\"[21, 18]\"\n  ></pry-select>\n</div>\n\n<ng-container *ngIf=\"value?.type === PryVisibilityType.RESTRICTED\">\n  <div class=\"m-form-label-field\">\n    <label class=\"a-label\" for=\"users\">{{ '@pry.share.users' | i18n }}</label>\n    <pry-select\n      (ngModelChange)=\"writeValueUsers($event)\"\n      [items]=\"users$ | async\"\n      [multiple]=\"true\"\n      [closeOnSelect]=\"false\"\n      [ngModel]=\"value?.users\"\n      [disabled]=\"_disabled\"\n      [bindLabel]=\"labelProperty\"\n      [bindValue]=\"valueProperty\"\n      [autocomplete]=\"true\"\n      id=\"users\"\n    ></pry-select>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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", "readonly", "autocomplete", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "loading", "elementRef"], outputs: ["searched", "cleared"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PryShareComponent, decorators: [{
             type: Component,
@@ -7359,7 +7398,7 @@ class PryGroupShareComponent extends SubscriptionnerDirective {
                 useExisting: forwardRef(() => PryGroupShareComponent),
                 multi: true
             }
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"m-form-radio-group\">\n  <div *ngFor=\"let type of visibilityTypes\" class=\"m-form-radio-group__item\">\n    <input\n      type=\"radio\"\n      name=\"visibility\"\n      [id]=\"type.label\"\n      [value]=\"type.value\"\n      [ngModel]=\"radioValue\"\n      (ngModelChange)=\"changeGroupsBasedOnRadioValue($event)\"\n      [disabled]=\"_disabled\"\n    />\n    <label [for]=\"type.label\" class=\"a-label\">{{ '@pry.share.' + type.label | i18n }}</label>\n  </div>\n</div>\n\n<ng-container *ngIf=\"radioValue === PryVisibilityType.RESTRICTED\">\n  <pry-chips-selector\n    bindLabel=\"name\"\n    bindValue=\"name\"\n    translationStringBase=\"@pry.components.chipsSelector.share.\"\n    itemTranslationStringBase=\"@pry.components.chipsSelector.share.groups.\"\n    [showActionButtons]=\"false\"\n    [items]=\"(groups$ | async) ?? []\"\n    (itemsChanged)=\"changeGroups($event)\"\n    [usedItems]=\"(assignedGroups$ | async) ?? []\"\n  ></pry-chips-selector>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.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: i4.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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", "items", "usedItems"], outputs: ["cancel", "validated", "previousTab", "nextTab", "itemsChanged"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"m-form-radio-group\">\n  <div *ngFor=\"let type of visibilityTypes\" class=\"m-form-radio-group__item\">\n    <input\n      type=\"radio\"\n      name=\"visibility\"\n      [id]=\"type.label\"\n      [value]=\"type.value\"\n      [ngModel]=\"radioValue\"\n      (ngModelChange)=\"changeGroupsBasedOnRadioValue($event)\"\n      [disabled]=\"_disabled\"\n    />\n    <label [for]=\"type.label\" class=\"a-label\">{{ '@pry.share.' + type.label | i18n }}</label>\n  </div>\n</div>\n\n<ng-container *ngIf=\"radioValue === PryVisibilityType.RESTRICTED\">\n  <pry-chips-selector\n    bindLabel=\"name\"\n    bindValue=\"name\"\n    translationStringBase=\"@pry.components.chipsSelector.share.\"\n    itemTranslationStringBase=\"@pry.components.chipsSelector.share.groups.\"\n    [showActionButtons]=\"false\"\n    [items]=\"(groups$ | async) ?? []\"\n    (itemsChanged)=\"changeGroups($event)\"\n    [usedItems]=\"(assignedGroups$ | async) ?? []\"\n  ></pry-chips-selector>\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: "directive", type: i4.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: i4.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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", "items", "usedItems"], outputs: ["cancel", "validated", "previousTab", "nextTab", "itemsChanged"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PryGroupShareComponent, decorators: [{
             type: Component,
@@ -7374,11 +7413,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 const MIME_TYPE_RESULTSET = 'application/resultset';
 
-const DEFAULT_GAP_PX = 15;
-const DEFAULT_COLUMNS_NUMBER = 12;
-const DEFAULT_ROWS_NUMBER = 12;
-const DEFAULT_ROW_HEIGHT_PX = 50;
-
 const arrayOf = (item, num) => {
     return [...new Array(num)].map(() => item);
 };
@@ -7394,143 +7428,98 @@ const createPlacedWidgetCopy = (widget, position) => {
     return tmp;
 };
 const WidgetPlacementUtils = {
-    layoutSizeImplementations: {
-        [DashboardGridLayout.MANUAL]: (outLayout, params) => {
-            outLayout.height = params.rows ?? DEFAULT_ROWS_NUMBER;
-            outLayout.width = params.columns ?? DEFAULT_COLUMNS_NUMBER;
-            return arrayOf(outLayout, 20);
+    layouts: [
+        {
+            type: DashboardGridLayout.MANUAL,
+            places: [],
+            label: '@pry.toolbox.layout.0',
+            description: '@pry.toolbox.layout.0_detailled',
+            rows: 12,
+            columns: 12
         },
-        [DashboardGridLayout.FULL]: (outLayout, params) => {
-            outLayout.height = params.rows ?? DEFAULT_ROWS_NUMBER;
-            outLayout.width = params.columns ?? DEFAULT_COLUMNS_NUMBER;
-            return [outLayout];
+        {
+            type: DashboardGridLayout.FULL,
+            places: [{ x: 1, y: 1, width: 12, height: 12 }],
+            label: '@pry.toolbox.layout.1',
+            description: '@pry.toolbox.layout.1_detailled',
+            rows: 12,
+            columns: 12
         },
-        [DashboardGridLayout.QUARTER]: (outLayout, params) => {
-            outLayout.height = Math.floor((params.rows ?? DEFAULT_ROWS_NUMBER) / 2);
-            outLayout.width = Math.floor((params.columns ?? DEFAULT_COLUMNS_NUMBER) / 2);
-            return [outLayout, outLayout, outLayout, outLayout];
+        {
+            type: DashboardGridLayout.HALF_HORIZONTAL,
+            places: [
+                { x: 1, y: 1, width: 12, height: 6 },
+                { x: 1, y: 7, width: 12, height: 6 }
+            ],
+            label: '@pry.toolbox.layout.1/2h',
+            description: '@pry.toolbox.layout.1/2h_detailled',
+            rows: 12,
+            columns: 12
         },
-        [DashboardGridLayout.HALF_HORIZONTAL]: (outLayout, params) => {
-            outLayout.height = Math.floor((params.rows ?? DEFAULT_ROWS_NUMBER) / 2);
-            outLayout.width = params.columns ?? DEFAULT_COLUMNS_NUMBER;
-            return [outLayout, outLayout];
+        {
+            type: DashboardGridLayout.HALF_VERTICAL,
+            places: [
+                { x: 1, y: 1, width: 6, height: 12 },
+                { x: 7, y: 1, width: 6, height: 12 }
+            ],
+            label: '@pry.toolbox.layout.1/2v',
+            description: '@pry.toolbox.layout.1/2v_detailled',
+            rows: 12,
+            columns: 12
         },
-        [DashboardGridLayout.HALF_VERTICAL]: (outLayout, params) => {
-            outLayout.height = params.rows ?? DEFAULT_ROWS_NUMBER;
-            outLayout.width = Math.floor((params.columns ?? DEFAULT_COLUMNS_NUMBER) / 2);
-            return [outLayout, outLayout];
+        {
+            type: DashboardGridLayout.THIRD_HORIZONTAL,
+            places: [
+                { x: 1, y: 1, width: 12, height: 4 },
+                { x: 1, y: 5, width: 12, height: 4 },
+                { x: 1, y: 9, width: 12, height: 4 }
+            ],
+            label: '@pry.toolbox.layout.1/3h',
+            description: '@pry.toolbox.layout.1/3h_detailled',
+            rows: 12,
+            columns: 12
         },
-        [DashboardGridLayout.THIRD_HORIZONTAL]: (outLayout, params) => {
-            outLayout.height = Math.floor((params.rows ?? DEFAULT_ROWS_NUMBER) / 3);
-            outLayout.width = params.columns ?? DEFAULT_COLUMNS_NUMBER;
-            return [outLayout, outLayout, outLayout];
+        {
+            type: DashboardGridLayout.THIRD_VERTICAL,
+            places: [
+                { x: 1, y: 1, width: 4, height: 12 },
+                { x: 5, y: 1, width: 4, height: 12 },
+                { x: 9, y: 1, width: 4, height: 12 }
+            ],
+            label: '@pry.toolbox.layout.1/3v',
+            description: '@pry.toolbox.layout.1/3v_detailled',
+            rows: 12,
+            columns: 12
         },
-        [DashboardGridLayout.THIRD_VERTICAL]: (outLayout, params) => {
-            outLayout.height = params.rows ?? DEFAULT_ROWS_NUMBER;
-            outLayout.width = Math.floor((params.columns ?? DEFAULT_COLUMNS_NUMBER) / 3);
-            return [outLayout, outLayout, outLayout];
-        }
+        {
+            type: DashboardGridLayout.QUARTER,
+            places: [
+                { x: 1, y: 1, width: 6, height: 6 },
+                { x: 1, y: 7, width: 6, height: 6 },
+                { x: 7, y: 1, width: 6, height: 6 },
+                { x: 7, y: 7, width: 6, height: 6 }
+            ],
+            label: '@pry.toolbox.layout.1/4',
+            description: '@pry.toolbox.layout.1/4_detailled',
+            rows: 12,
+            columns: 12
+        }
+    ],
+    addGridLayout(layout) {
+        this.layouts.push(layout);
     },
-    placementOptionsImplementations: {
-        // Manual mode do not offer automatic placement solutions... propose fullscreen
-        [DashboardGridLayout.MANUAL]: (widgetToPlace, sizes, params) => [createPlacedWidgetCopy(widgetToPlace, { ...sizes[0], x: 1, y: 1 })],
-        [DashboardGridLayout.FULL]: (widgetToPlace, sizes, params) => [createPlacedWidgetCopy(widgetToPlace, { ...sizes[0], x: 1, y: 1 })],
-        [DashboardGridLayout.HALF_VERTICAL]: (widgetToPlace, sizes, params) => [
-            createPlacedWidgetCopy(widgetToPlace, { ...sizes[0], x: 1, y: 1 }),
-            createPlacedWidgetCopy(widgetToPlace, {
-                ...sizes[1],
-                x: Math.floor((params.columns ?? DEFAULT_COLUMNS_NUMBER) / 2) + 1,
-                y: 1
-            })
-        ],
-        [DashboardGridLayout.HALF_HORIZONTAL]: (widgetToPlace, sizes, params) => [
-            createPlacedWidgetCopy(widgetToPlace, { ...sizes[0], x: 1, y: 1 }),
-            createPlacedWidgetCopy(widgetToPlace, {
-                ...sizes[1],
-                x: 1,
-                y: Math.ceil((params.rows ?? DEFAULT_ROWS_NUMBER) / 2) + 1
-            })
-        ],
-        [DashboardGridLayout.THIRD_VERTICAL]: (widgetToPlace, sizes, params) => [
-            createPlacedWidgetCopy(widgetToPlace, { ...sizes[0], x: 1, y: 1 }),
-            createPlacedWidgetCopy(widgetToPlace, {
-                ...sizes[1],
-                x: Math.ceil((params.columns ?? DEFAULT_COLUMNS_NUMBER) / 3) + 1,
-                y: 1
-            }),
-            createPlacedWidgetCopy(widgetToPlace, {
-                ...sizes[2],
-                x: Math.ceil(((params.columns ?? DEFAULT_COLUMNS_NUMBER) * 2) / 3) + 1,
-                y: 1
-            })
-        ],
-        [DashboardGridLayout.THIRD_HORIZONTAL]: (widgetToPlace, sizes, params) => [
-            createPlacedWidgetCopy(widgetToPlace, { ...sizes[0], x: 1, y: 1 }),
-            createPlacedWidgetCopy(widgetToPlace, {
-                ...sizes[1],
-                x: 1,
-                y: Math.ceil((params.rows ?? DEFAULT_ROWS_NUMBER) / 3) + 1
-            }),
-            createPlacedWidgetCopy(widgetToPlace, {
-                ...sizes[2],
-                x: 1,
-                y: Math.ceil(((params.rows ?? DEFAULT_ROWS_NUMBER) * 2) / 3) + 1
-            })
-        ],
-        [DashboardGridLayout.QUARTER]: (widgetToPlace, sizes, params) => [
-            createPlacedWidgetCopy(widgetToPlace, { ...sizes[0], x: 1, y: 1 }),
-            createPlacedWidgetCopy(widgetToPlace, {
-                ...sizes[2],
-                x: Math.ceil((params.columns ?? DEFAULT_COLUMNS_NUMBER) / 2) + 1,
-                y: 1
-            }),
-            createPlacedWidgetCopy(widgetToPlace, {
-                ...sizes[1],
-                x: 1,
-                y: Math.ceil((params.rows ?? DEFAULT_ROWS_NUMBER ?? DEFAULT_ROWS_NUMBER) / 2) + 1
-            }),
-            createPlacedWidgetCopy(widgetToPlace, {
-                ...sizes[3],
-                x: Math.ceil((params.columns ?? DEFAULT_COLUMNS_NUMBER) / 2) + 1,
-                y: Math.ceil((params.rows ?? DEFAULT_ROWS_NUMBER) / 2) + 1
-            })
-        ]
-    },
-    layoutImages: {
-        [DashboardGridLayout.MANUAL]: 'assets/svgs/grid_composition_libre.svg',
-        [DashboardGridLayout.THIRD_VERTICAL]: 'assets/svgs/grid_1_3_vertical.svg',
-        [DashboardGridLayout.THIRD_HORIZONTAL]: 'assets/svgs/grid_1_3_horizontal.svg',
-        [DashboardGridLayout.HALF_VERTICAL]: 'assets/svgs/grid_1_2_vertical.svg',
-        [DashboardGridLayout.HALF_HORIZONTAL]: 'assets/svgs/grid_1_2_horizontal.svg',
-        [DashboardGridLayout.QUARTER]: 'assets/svgs/grid_1_4.svg',
-        [DashboardGridLayout.FULL]: 'assets/svgs/grid_full.svg'
-    },
-    addLayoutImplementation: (type, fnSizeImplementation, fnPlacementOptionImplementation, image) => {
-        WidgetPlacementUtils.layoutSizeImplementations[type] = fnSizeImplementation;
-        WidgetPlacementUtils.placementOptionsImplementations[type] = fnPlacementOptionImplementation;
-        WidgetPlacementUtils.layoutImages[type] = image ?? 'assets/svgs/default.svg';
-    },
-    getLayouts: () => Object.keys(WidgetPlacementUtils.placementOptionsImplementations).map((layout) => ({
-        key: layout,
-        image: WidgetPlacementUtils.layoutImages[layout]
-    })),
     isLeft: (w1, w2) => w2.layout.x + w2.layout.width <= w1.layout.x,
     isBelow: (w1, w2) => w2.layout.y + w2.layout.height <= w1.layout.y,
     areDisjoint: (w1, w2) => WidgetPlacementUtils.isLeft(w1, w2) ||
         WidgetPlacementUtils.isLeft(w2, w1) ||
         WidgetPlacementUtils.isBelow(w1, w2) ||
         WidgetPlacementUtils.isBelow(w2, w1),
-    placementOptions: (widgetToPlace, layout, params) => {
-        if (!WidgetPlacementUtils.placementOptionsImplementations[layout]) {
-            return [];
-        }
-        return WidgetPlacementUtils.placementOptionsImplementations[layout](widgetToPlace, WidgetPlacementUtils.getLayoutSize(layout, params), params);
-    },
-    getLayoutSize(layout, params) {
-        if (!WidgetPlacementUtils.layoutSizeImplementations[layout]) {
+    placementOptions: (widgetToPlace, layout) => {
+        const layoutO = WidgetPlacementUtils.getLayout(layout);
+        if (!layoutO) {
             return [];
         }
-        return WidgetPlacementUtils.layoutSizeImplementations[layout]({ x: 1, y: 1, height: 1, width: 1 }, params);
+        return layoutO.places.map((place) => ({ ...widgetToPlace, layout: place }));
     },
     swapArrayElements: (arr, x, y) => {
         if (arr.length === 1)
@@ -7555,11 +7544,16 @@ const WidgetPlacementUtils = {
         problems.sort((a, b) => a[0].layout.y * 100000 - b[0].layout.y * 100000 + a[0].layout.x - b[0].layout.y);
         return problems;
     },
-    placesForLayout(layout) {
-        return this.getLayoutSize(layout, { rows: 1, columns: 1 }).length;
+    getLayout(layout) {
+        return this.layouts.find((lay) => lay.type === layout);
     }
 };
 
+const DEFAULT_GAP_PX = 15;
+const DEFAULT_COLUMNS_NUMBER = 12;
+const DEFAULT_ROWS_NUMBER = 12;
+const DEFAULT_ROW_HEIGHT_PX = 50;
+
 function orderWidgetsAccordingToPlacement(a, b) {
     return ((b.layout.weight ?? 0) * 1000000 -
         (a.layout.weight ?? 0) * 1000000 +
@@ -8126,13 +8120,13 @@ class PryObjectEditionComponent extends SubscriptionnerDirective {
     toggleInversion() {
         this.inversion = !this.inversion;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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: "16.2.12", 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--ghost -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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i4.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: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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", "readonly", "autocomplete", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "loading", "elementRef"], outputs: ["searched", "cleared"] }, { 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: i8.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle"] }, { kind: "component", type: PryDatePickerComponent, selector: "pry-date-picker", inputs: ["rangePicker", "timePicker", "maxYear", "minYear", "roundSelection"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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: "16.2.12", 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--ghost -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: i4.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: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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", "readonly", "autocomplete", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "loading", "elementRef"], outputs: ["searched", "cleared"] }, { 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: i8.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle"] }, { 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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--ghost -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: function () { return [{ type: i2$1.Overlay }, { type: i0.ViewContainerRef }, { type: i1.Store }]; }, propDecorators: { link: [{
+        }], ctorParameters: function () { return [{ type: i2.Overlay }, { type: i0.ViewContainerRef }, { type: i1.Store }]; }, propDecorators: { link: [{
                 type: Input
             }], object: [{
                 type: Input
@@ -8243,13 +8237,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: "16.2.12", 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: "14.0.0", version: "16.2.12", 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: i2.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: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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: "16.2.12", 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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: function () { return [{ type: i1.Store }, { type: i2$1.Overlay }, { type: i0.ViewContainerRef }, { type: WidgetFactoryService }]; }, propDecorators: { template: [{
+        }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.Overlay }, { type: i0.ViewContainerRef }, { type: WidgetFactoryService }]; }, propDecorators: { template: [{
                 type: ViewChild,
                 args: ['template', { read: TemplateRef }]
             }], detailTemplate: [{
@@ -8279,6 +8273,7 @@ class DashboardComponent extends SubscriptionnerDirective {
         this.indexForRemoval = -1;
         this.params = {};
         this.CloseOnDragOut = true;
+        this.noBackground = false;
         this.canCalculateView = false;
         this.dashboardParams = {
             gridWidth: 1,
@@ -8320,8 +8315,8 @@ class DashboardComponent extends SubscriptionnerDirective {
             const wManifest = JSON.parse(JSON.stringify(_wManifest));
             if (wManifest.grid?.layout && wManifest.grid.layout !== DashboardGridLayout.MANUAL) {
                 // Complete with placeholders
-                const size = WidgetPlacementUtils.placesForLayout(wManifest.grid.layout);
-                const places = WidgetPlacementUtils.placementOptions({ type: 'filler', layout: { x: 1, y: 1, width: 1, height: 1 } }, wManifest.grid.layout, wManifest.grid);
+                const size = WidgetPlacementUtils.getLayout(wManifest.grid.layout)?.places.length ?? 0;
+                const places = WidgetPlacementUtils.placementOptions({ type: 'filler', layout: { x: 1, y: 1, width: 1, height: 1 } }, wManifest.grid.layout);
                 let added = true;
                 while (wManifest.widgets.length < size && added) {
                     added = false;
@@ -8394,9 +8389,7 @@ class DashboardComponent extends SubscriptionnerDirective {
             : `3/1/${(manifest.grid?.columns ?? DEFAULT_COLUMNS_NUMBER) - 1}/1`));
         this.separators$ = this.store
             .select(DashboardSelectors.gridLayout)
-            .pipe(map$1((layout) => layout === DashboardGridLayout.MANUAL
-            ? []
-            : WidgetPlacementUtils.getLayoutSize(layout, { rows: 1, columns: 1 })));
+            .pipe(map$1((layout) => layout === DashboardGridLayout.MANUAL ? [] : WidgetPlacementUtils.getLayout(layout)?.places ?? []));
     }
     ngOnInit() {
         if (this.displayOptions)
@@ -8455,7 +8448,7 @@ class DashboardComponent extends SubscriptionnerDirective {
             return '1 / 1';
         }
         if (layout.width > 1) {
-            return `${Math.min(layout.x, this.dashboardParams.columns - layout.width + 1)} / ${Math.min(layout.x + layout.width, this.dashboardParams.columns + 1)}`;
+            return `${Math.min(layout.x, this.params.columns - layout.width + 1)} / ${Math.min(layout.x + layout.width, this.params.columns + 1)}`;
         }
         else {
             return `${layout.x}`;
@@ -8472,7 +8465,7 @@ class DashboardComponent extends SubscriptionnerDirective {
             return `${previousHeight ?? 1} / ${(previousHeight ?? 1) + layout.height}`;
         }
         if (layout.height > 1) {
-            return `${Math.max(1, Math.min(layout.y, this.dashboardParams.rows - layout.height + 1))} / ${Math.min(layout.y + layout.height, this.dashboardParams.rows + 1)}`;
+            return `${Math.max(1, Math.min(layout.y, this.params.rows - layout.height + 1))} / ${Math.min(layout.y + layout.height, this.params.rows + 1)}`;
         }
         else {
             return `${layout.y}`;
@@ -8569,7 +8562,10 @@ class DashboardComponent extends SubscriptionnerDirective {
                 }
                 else {
                     // Use grid size
-                    const layout = WidgetPlacementUtils.getLayoutSize(this.layout, this.dashboardParams)[this.initialWidgetManifestList.length];
+                    const layout = (WidgetPlacementUtils.getLayout(this.layout)?.places ?? [])[this.initialWidgetManifestList.length] ?? {
+                        width: 1,
+                        height: 1
+                    };
                     this.currentlyModifiedManifest.layout.width = layout.width;
                     this.currentlyModifiedManifest.layout.height = layout.height;
                 }
@@ -8774,13 +8770,13 @@ class DashboardComponent extends SubscriptionnerDirective {
     trackWidgets(index, widgetManifest) {
         return index + '-' + widgetManifest.type + '-' + JSON.stringify(widgetManifest.layout);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DashboardComponent, 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: "16.2.12", type: DashboardComponent, selector: "pry-dashboard", inputs: { staticDashboard: "staticDashboard", CloseOnDragOut: "CloseOnDragOut", displayOptions: "displayOptions" }, 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\n  class=\"o-dashboard-grid\"\n  [style.gridTemplateColumns]=\"gridTemplateColumns$ | async\"\n  [style.gridTemplateRows]=\"gridTemplateRows$ | async\"\n  [style.gridGap]=\"dashboardParams.gridGap + 'px'\"\n  [style.padding]=\"'0 ' + 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\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 *ngIf=\"data.globalLoading; else notLoading\" class=\"no-widget\" [style.grid-area]=\"backgroundArea$ | async\">\n        <pry-icon\n          iconSvg=\"loader\"\n          class=\"no-widget__loading\"\n          [alt]=\"'@pry.widget.target.loading' | i18n\"\n          [width]=\"100\"\n          [height]=\"100\"\n        />\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            }} {{ backgroundArea$ | async }}\"\n          />\n          <span class=\"no-widget__text\">{{\n            (layout === DashboardGridLayout.MANUAL ? '@pry.widget.target.none_manual' : '@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-icon\n        iconSvg=\"loader\"\n        class=\"no-widget__loading\"\n        [alt]=\"'@pry.widget.target.loading' | i18n\"\n        [width]=\"200\"\n        [height]=\"200\"\n      />\n      <p>{{ '@pry.widget.target.loading' | i18n }}...</p>\n    </div>\n  </ng-container>\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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.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: WidgetInstanciatorComponent, selector: "pry-widget-instanciator", inputs: ["widgetIndex", "staticManifest", "standalone", "open$"], outputs: ["manifestModified"] }, { kind: "component", type: ContextMenuComponent, selector: "pry-context-menu" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DashboardComponent, deps: [{ token: i1.Store }, { token: i2.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DashboardComponent, selector: "pry-dashboard", inputs: { staticDashboard: "staticDashboard", 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\n  class=\"o-dashboard-grid\"\n  [style.gridTemplateColumns]=\"gridTemplateColumns$ | async\"\n  [style.gridTemplateRows]=\"gridTemplateRows$ | async\"\n  [style.gridGap]=\"dashboardParams.gridGap + 'px'\"\n  [style.padding]=\"'0 ' + 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 *ngIf=\"data.globalLoading; else notLoading\" class=\"no-widget\" [style.grid-area]=\"backgroundArea$ | async\">\n          <pry-icon\n            iconSvg=\"loader\"\n            class=\"no-widget__loading\"\n            [alt]=\"'@pry.widget.target.loading' | i18n\"\n            [width]=\"100\"\n            [height]=\"100\"\n          />\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              }} {{ backgroundArea$ | async }}\"\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-icon\n          iconSvg=\"loader\"\n          class=\"no-widget__loading\"\n          [alt]=\"'@pry.widget.target.loading' | i18n\"\n          [width]=\"200\"\n          [height]=\"200\"\n        />\n        <p>{{ '@pry.widget.target.loading' | i18n }}...</p>\n      </div>\n    </ng-container>\n  </ng-container>\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: 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DashboardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-dashboard', template: "<div\n  class=\"o-dashboard-grid\"\n  [style.gridTemplateColumns]=\"gridTemplateColumns$ | async\"\n  [style.gridTemplateRows]=\"gridTemplateRows$ | async\"\n  [style.gridGap]=\"dashboardParams.gridGap + 'px'\"\n  [style.padding]=\"'0 ' + 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\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 *ngIf=\"data.globalLoading; else notLoading\" class=\"no-widget\" [style.grid-area]=\"backgroundArea$ | async\">\n        <pry-icon\n          iconSvg=\"loader\"\n          class=\"no-widget__loading\"\n          [alt]=\"'@pry.widget.target.loading' | i18n\"\n          [width]=\"100\"\n          [height]=\"100\"\n        />\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            }} {{ backgroundArea$ | async }}\"\n          />\n          <span class=\"no-widget__text\">{{\n            (layout === DashboardGridLayout.MANUAL ? '@pry.widget.target.none_manual' : '@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-icon\n        iconSvg=\"loader\"\n        class=\"no-widget__loading\"\n        [alt]=\"'@pry.widget.target.loading' | i18n\"\n        [width]=\"200\"\n        [height]=\"200\"\n      />\n      <p>{{ '@pry.widget.target.loading' | i18n }}...</p>\n    </div>\n  </ng-container>\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: function () { return [{ type: i1.Store }, { type: i2$1.Overlay }, { type: i0.ViewContainerRef }]; }, propDecorators: { templateModal: [{
+            args: [{ selector: 'pry-dashboard', template: "<div\n  class=\"o-dashboard-grid\"\n  [style.gridTemplateColumns]=\"gridTemplateColumns$ | async\"\n  [style.gridTemplateRows]=\"gridTemplateRows$ | async\"\n  [style.gridGap]=\"dashboardParams.gridGap + 'px'\"\n  [style.padding]=\"'0 ' + 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 *ngIf=\"data.globalLoading; else notLoading\" class=\"no-widget\" [style.grid-area]=\"backgroundArea$ | async\">\n          <pry-icon\n            iconSvg=\"loader\"\n            class=\"no-widget__loading\"\n            [alt]=\"'@pry.widget.target.loading' | i18n\"\n            [width]=\"100\"\n            [height]=\"100\"\n          />\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              }} {{ backgroundArea$ | async }}\"\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-icon\n          iconSvg=\"loader\"\n          class=\"no-widget__loading\"\n          [alt]=\"'@pry.widget.target.loading' | i18n\"\n          [width]=\"200\"\n          [height]=\"200\"\n        />\n        <p>{{ '@pry.widget.target.loading' | i18n }}...</p>\n      </div>\n    </ng-container>\n  </ng-container>\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: function () { return [{ type: i1.Store }, { type: i2.Overlay }, { type: i0.ViewContainerRef }]; }, propDecorators: { templateModal: [{
                 type: ViewChild,
                 args: ['templateModal', { read: TemplateRef }]
             }], instanciators: [{
@@ -8792,9 +8788,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], displayOptions: [{
                 type: Input
+            }], noBackground: [{
+                type: Input
             }], gridRef: [{
                 type: ViewChild,
                 args: ['grid']
+            }], breakpoint: [{
+                type: Input
             }], rowHeight: [{
                 type: Output
             }], rows: [{
@@ -9269,12 +9269,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: "16.2.12", ngImport: i0, type: ActionBusEffects, deps: [{ token: i1$2.Actions }, { token: i1.Store }, { token: BusService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionBusEffects, deps: [{ token: i1$3.Actions }, { token: i1.Store }, { token: BusService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionBusEffects }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionBusEffects, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$2.Actions }, { type: i1.Store }, { type: BusService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$3.Actions }, { type: i1.Store }, { type: BusService }]; } });
 
 class ManifestsComponent {
     constructor(store) {
@@ -9315,7 +9315,7 @@ class ManifestsComponent {
         this.fileInput.nativeElement.click();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ManifestsComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: i2.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: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ManifestsComponent, decorators: [{
             type: Component,
@@ -9344,7 +9344,7 @@ class MetadataComponent {
         this.opened = !this.opened;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MetadataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: i2.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: "14.0.0", version: "16.2.12", 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MetadataComponent, decorators: [{
             type: Component,
@@ -9380,7 +9380,7 @@ class VizualizeRawComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VizualizeRawComponent, deps: [{ token: RawService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VizualizeRawComponent, decorators: [{
             type: Component,
@@ -9486,7 +9486,7 @@ class DatasourceSelectorComponent extends ChipsSelectorComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DatasourceSelectorComponent, deps: [{ token: i1.Store }, { token: i0.ChangeDetectorRef }, { token: PryI18nService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DatasourceSelectorComponent, selector: "pry-datasource-selector", inputs: { usedItems: "usedItems", manifest: "manifest" }, usesInheritance: true, ngImport: i0, template: "<div class=\"m-namedqueries-wrapper\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"dialog_namedqueries\">\n  <div class=\"o-widget__search\">\n    <input\n      id=\"catalog-search\"\n      (keydown.shift.tab)=\"previousTab.emit()\"\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  <div *ngIf=\"((usedItems$ | async) ?? []).length > 0; else noItems\">\n    <h4 class=\"a-h4\">{{ translationStringBase + 'selection' | i18n }}</h4>\n    <div>\n      <ul class=\"o-datasources__list o-datasources__list--selected\">\n        <li *ngFor=\"let item of usedItems$ | async\" class=\"o-datasources__item\">\n          <button class=\"o-datasources__card -selected\" (click)=\"toggleItemSelection(item)\" type=\"button\">\n            <p>\n              {{ getItemLabel(item) }}\n            </p>\n            <pry-icon *ngIf=\"isGeo(item)\" iconSvg=\"globe\"></pry-icon>\n            <div class=\"a-btn a-btn--primary a-btn--icon-only\">\n              <pry-icon [iconSvg]=\"'close'\" [width]=\"17\" [height]=\"17\"></pry-icon>\n              <span class=\"u-visually-hidden\">{{ translationStringBase + 'unselectItem' | i18n }}</span>\n            </div>\n          </button>\n        </li>\n      </ul>\n    </div>\n  </div>\n  <ng-template #noItems>\n    <h4 class=\"a-h4\">{{ translationStringBase + 'noItemSelected' | i18n }}</h4>\n  </ng-template>\n  <h4 class=\"a-h4\">{{ translationStringBase + 'select' | i18n }}</h4>\n  <div class=\"o-datasources__main\">\n    <ul class=\"o-datasources__list\">\n      <li *ngFor=\"let item of unusedItems$ | async\" class=\"o-datasources__item\">\n        <button class=\"o-datasources__card\" (click)=\"toggleItemSelection(item)\">\n          <span class=\"u-visually-hidden\">{{ translationStringBase + 'selectItem' | i18n }}</span>\n          <p class=\"a-p\">{{ getItemLabel(item) }}</p>\n          <pry-icon *ngIf=\"isGeo(item)\" iconSvg=\"globe\"></pry-icon>\n        </button>\n      </li>\n    </ul>\n  </div>\n  <div *ngIf=\"showActionButtons\" class=\"m-btn-group o-datasources__bottom\">\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</div>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DatasourceSelectorComponent, selector: "pry-datasource-selector", inputs: { usedItems: "usedItems", manifest: "manifest" }, usesInheritance: true, ngImport: i0, template: "<div class=\"m-namedqueries-wrapper\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"dialog_namedqueries\">\n  <div class=\"o-widget__search\">\n    <input\n      id=\"catalog-search\"\n      (keydown.shift.tab)=\"previousTab.emit()\"\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  <div *ngIf=\"((usedItems$ | async) ?? []).length > 0; else noItems\">\n    <h4 class=\"a-h4\">{{ translationStringBase + 'selection' | i18n }}</h4>\n    <div>\n      <ul class=\"o-datasources__list o-datasources__list--selected\">\n        <li *ngFor=\"let item of usedItems$ | async\" class=\"o-datasources__item\">\n          <button class=\"o-datasources__card -selected\" (click)=\"toggleItemSelection(item)\" type=\"button\">\n            <p>\n              {{ getItemLabel(item) }}\n            </p>\n            <pry-icon *ngIf=\"isGeo(item)\" iconSvg=\"globe\"></pry-icon>\n            <div class=\"a-btn a-btn--primary a-btn--icon-only\">\n              <pry-icon [iconSvg]=\"'close'\" [width]=\"17\" [height]=\"17\"></pry-icon>\n              <span class=\"u-visually-hidden\">{{ translationStringBase + 'unselectItem' | i18n }}</span>\n            </div>\n          </button>\n        </li>\n      </ul>\n    </div>\n  </div>\n  <ng-template #noItems>\n    <h4 class=\"a-h4\">{{ translationStringBase + 'noItemSelected' | i18n }}</h4>\n  </ng-template>\n  <h4 class=\"a-h4\">{{ translationStringBase + 'select' | i18n }}</h4>\n  <div class=\"o-datasources__main\">\n    <ul class=\"o-datasources__list\">\n      <li *ngFor=\"let item of unusedItems$ | async\" class=\"o-datasources__item\">\n        <button class=\"o-datasources__card\" (click)=\"toggleItemSelection(item)\">\n          <span class=\"u-visually-hidden\">{{ translationStringBase + 'selectItem' | i18n }}</span>\n          <p class=\"a-p\">{{ getItemLabel(item) }}</p>\n          <pry-icon *ngIf=\"isGeo(item)\" iconSvg=\"globe\"></pry-icon>\n        </button>\n      </li>\n    </ul>\n  </div>\n  <div *ngIf=\"showActionButtons\" class=\"m-btn-group o-datasources__bottom\">\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</div>\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: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DatasourceSelectorComponent, decorators: [{
             type: Component,
@@ -9979,9 +9979,7 @@ class PryWidgetHeaderComponent extends SubscriptionnerDirective {
     }
     toggleChangeSpot() {
         if (!this.spotRef) {
-            this.places = WidgetPlacementUtils.placementOptions({ type: 'icon' }, this.currentLayout, {
-                ...this.windowManifest?.grid
-            });
+            this.places = WidgetPlacementUtils.placementOptions({ type: 'icon' }, this.currentLayout);
             this.spotRef = this.overlay.create(new OverlayConfig({
                 hasBackdrop: true,
                 panelClass: ['o-modal-wrapper'],
@@ -10050,13 +10048,13 @@ class PryWidgetHeaderComponent extends SubscriptionnerDirective {
         this.subscription?.unsubscribe();
         this.openSub?.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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: "14.0.0", version: "16.2.12", 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=\"(manifest$ | async)?.datasource && (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    bindLabel=\"name\"\n    bindValue=\"id\"\n    translationStringBase=\"@pry.components.chipsSelector.datasource.\"\n    (cancel)=\"toggleDatasourceSelection()\"\n    (validated)=\"emitManifest()\"\n    (nextTab)=\"focusInputCatalog()\"\n    (previousTab)=\"focusValidation()\"\n    (itemsChanged)=\"datasourcesChanged($event)\"\n    [usedItems]=\"(usedDatasources$ | async) ?? []\"\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\">\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    <ng-container *ngFor=\"let place of places; let i = index\">\n      <ng-container *ngIf=\"currentPlacementIndex !== i\">\n        <button type=\"button\" class=\"a-btn\" (click)=\"moveToPlace(place)\">\n          <span>{{ '@pry.widget.tooltip.spotName' | i18n : { place: i + 1 } }}</span>\n        </button>\n      </ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.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: DatasourceSelectorComponent, selector: "pry-datasource-selector", inputs: ["usedItems", "manifest"] }, { kind: "pipe", type: i2.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: "16.2.12", 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: "16.2.12", 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=\"(manifest$ | async)?.datasource && (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    bindLabel=\"name\"\n    bindValue=\"id\"\n    translationStringBase=\"@pry.components.chipsSelector.datasource.\"\n    (cancel)=\"toggleDatasourceSelection()\"\n    (validated)=\"emitManifest()\"\n    (nextTab)=\"focusInputCatalog()\"\n    (previousTab)=\"focusValidation()\"\n    (itemsChanged)=\"datasourcesChanged($event)\"\n    [usedItems]=\"(usedDatasources$ | async) ?? []\"\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\">\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    <ng-container *ngFor=\"let place of places; let i = index\">\n      <ng-container *ngIf=\"currentPlacementIndex !== i\">\n        <button type=\"button\" class=\"a-btn\" (click)=\"moveToPlace(place)\">\n          <span>{{ '@pry.widget.tooltip.spotName' | i18n : { place: i + 1 } }}</span>\n        </button>\n      </ng-container>\n    </ng-container>\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: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.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: DatasourceSelectorComponent, selector: "pry-datasource-selector", inputs: ["usedItems", "manifest"] }, { 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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=\"(manifest$ | async)?.datasource && (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    bindLabel=\"name\"\n    bindValue=\"id\"\n    translationStringBase=\"@pry.components.chipsSelector.datasource.\"\n    (cancel)=\"toggleDatasourceSelection()\"\n    (validated)=\"emitManifest()\"\n    (nextTab)=\"focusInputCatalog()\"\n    (previousTab)=\"focusValidation()\"\n    (itemsChanged)=\"datasourcesChanged($event)\"\n    [usedItems]=\"(usedDatasources$ | async) ?? []\"\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\">\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    <ng-container *ngFor=\"let place of places; let i = index\">\n      <ng-container *ngIf=\"currentPlacementIndex !== i\">\n        <button type=\"button\" class=\"a-btn\" (click)=\"moveToPlace(place)\">\n          <span>{{ '@pry.widget.tooltip.spotName' | i18n : { place: i + 1 } }}</span>\n        </button>\n      </ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2$1.Overlay }, { type: i0.ViewContainerRef }, { type: ToolboxMenuService }]; }, propDecorators: { template: [{
+        }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.Overlay }, { type: i0.ViewContainerRef }, { type: ToolboxMenuService }]; }, propDecorators: { template: [{
                 type: ViewChild,
                 args: ['template', { read: TemplateRef }]
             }], templateModal: [{
@@ -10188,13 +10186,13 @@ class SettingsComponent extends SubscriptionnerDirective {
         this.openSub?.unsubscribe();
         this.subscriptions.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SettingsComponent, deps: [{ token: i1.Store }, { token: i2$1.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SettingsComponent, deps: [{ token: i1.Store }, { token: i2.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: "16.2.12", 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: function () { return [{ type: i1.Store }, { type: i2$1.Overlay }, { type: i0.ViewContainerRef }]; }, propDecorators: { triggerClick: [{
+        }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.Overlay }, { type: i0.ViewContainerRef }]; }, propDecorators: { triggerClick: [{
                 type: Output
             }], widgetIndex: [{
                 type: Input
@@ -10396,7 +10394,7 @@ class FilterGroupComponent {
                 ?.contains(document.querySelector('ng-dropdown-panel.ng-dropdown-panel')) || false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterGroupComponent, deps: [{ token: i1.Store }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FilterGroupComponent, selector: "pry-filter-group", 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      <pry-filter-instanciator\n        *ngFor=\"let filter of manifest.filters\"\n        [filter]=\"filter\"\n        [applyFilter$]=\"apply$\"\n      ></pry-filter-instanciator>\n    </div>\n    <div class=\"o-container__filter-actions\">\n      <button type=\"button\" class=\"a-btn a-btn--secondary a-btn--icon-only -size-md\" (click)=\"clearFilters()\">\n        <pry-icon iconSvg=\"clear_filter\"></pry-icon>\n      </button>\n      <button type=\"button\" class=\"a-btn a-btn--primary -size-md\" (click)=\"filter()\">\n        {{ '@pry.toolbox.filter' | i18n }}\n        <pry-icon iconSvg=\"refresh_filter\"></pry-icon>\n      </button>\n    </div>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.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$"] }, { kind: "component", type: PryFilterGroupCssComponent, selector: "pry-filter-group-css" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FilterGroupComponent, selector: "pry-filter-group", 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      <pry-filter-instanciator\n        *ngFor=\"let filter of manifest.filters\"\n        [filter]=\"filter\"\n        [applyFilter$]=\"apply$\"\n      ></pry-filter-instanciator>\n    </div>\n    <div class=\"o-container__filter-actions\">\n      <button type=\"button\" class=\"a-btn a-btn--secondary a-btn--icon-only -size-md\" (click)=\"clearFilters()\">\n        <pry-icon iconSvg=\"clear_filter\"></pry-icon>\n      </button>\n      <button type=\"button\" class=\"a-btn a-btn--primary -size-md\" (click)=\"filter()\">\n        {{ '@pry.toolbox.filter' | i18n }}\n        <pry-icon iconSvg=\"refresh_filter\"></pry-icon>\n      </button>\n    </div>\n  </div>\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: "component", type: FilterInstanciatorComponent, selector: "pry-filter-instanciator", inputs: ["filter", "applyFilter$"] }, { kind: "component", type: PryFilterGroupCssComponent, selector: "pry-filter-group-css" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterGroupComponent, decorators: [{
             type: Component,
@@ -10523,7 +10521,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: "16.2.12", ngImport: i0, type: ManifestService, deps: [{ token: i1$1.HttpClient }, { token: i1.Store }, { token: PrySnackbarService }, { token: PryI18nService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ManifestService, deps: [{ token: i1$2.HttpClient }, { token: i1.Store }, { token: PrySnackbarService }, { token: PryI18nService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ManifestService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ManifestService, decorators: [{
@@ -10531,7 +10529,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.HttpClient }, { type: i1.Store }, { type: PrySnackbarService }, { type: PryI18nService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$2.HttpClient }, { type: i1.Store }, { type: PrySnackbarService }, { type: PryI18nService }]; } });
 
 class PryTitleService {
     constructor(title, translateService, store) {
@@ -10640,7 +10638,7 @@ class WmsService {
     getWmsFeatures(url) {
         return this.httpClient.get(url).pipe(map((json) => json));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WmsService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WmsService, deps: [{ token: i1$2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WmsService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WmsService, decorators: [{
@@ -10648,7 +10646,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.HttpClient }]; } });
+        }], ctorParameters: function () { return [{ type: i1$2.HttpClient }]; } });
 
 class DashboardEffects {
     constructor(dashboardInitService, actions$, store, manifestService, itemService, titleService, translateService, snackBar, router, refreshService, toolboxManifestService, busService, searchService, pryDialog, wmsService, widgetFactoryService) {
@@ -10904,7 +10902,7 @@ class DashboardEffects {
             // Trying all placement options
             for (const actualRank of sequence) {
                 const windowLayout = manifestGlobal.windows[actualRank].grid?.layout ?? DashboardGridLayout.FULL;
-                const options = WidgetPlacementUtils.placementOptions(newWidgetManifest, windowLayout, params);
+                const options = WidgetPlacementUtils.placementOptions(newWidgetManifest, windowLayout);
                 if (!found) {
                     for (const option of options) {
                         if (!found) {
@@ -10927,7 +10925,7 @@ class DashboardEffects {
             else {
                 const currentWindowLayout = manifestGlobal.windows[rank].grid?.layout ?? DashboardGridLayout.FULL;
                 // si non trouvé : nouvelle page, première position suggérée
-                const firstProposedLayout = WidgetPlacementUtils.placementOptions(newWidgetManifest, currentWindowLayout, params)[0];
+                const firstProposedLayout = WidgetPlacementUtils.placementOptions(newWidgetManifest, currentWindowLayout)[0];
                 manifestGlobal.windows.push({ widgets: [firstProposedLayout], grid: { layout: currentWindowLayout } });
             }
             if (action.alert === undefined || action.alert === true) {
@@ -11010,12 +11008,12 @@ class DashboardEffects {
         dashboardInitService.init();
         refreshService.start();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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: i3.Router }, { token: RefreshService }, { token: ToolboxManifestService }, { token: BusService }, { token: SearchService }, { token: PryDialogService }, { token: WmsService }, { token: WidgetFactoryService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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 }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DashboardEffects }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DashboardEffects, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: DashboardInitService }, { type: i1$2.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 }]; } });
+        }], ctorParameters: function () { return [{ 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 }]; } });
 
 const dashboardFeatureKey = '@pry/dashboard';
 const dashboardInitialState = {
@@ -11471,12 +11469,14 @@ const internalReducer = createReducer(dashboardInitialState, on(DashboardActions
     }
     newWindows[myRank].grid.layout = action.layout;
     if (action.layout !== DashboardGridLayout.MANUAL) {
+        const layout = WidgetPlacementUtils.getLayout(action.layout);
         // Reorder layouts
-        const params = {
-            rows: newWindows[myRank].grid.rows,
-            columns: newWindows[myRank].grid.columns
+        newWindows[myRank].grid = {
+            ...newWindows[myRank].grid,
+            rows: layout?.rows ?? DEFAULT_ROWS_NUMBER,
+            columns: layout?.columns ?? DEFAULT_COLUMNS_NUMBER
         };
-        const places = WidgetPlacementUtils.placementOptions({}, action.layout, params);
+        const places = WidgetPlacementUtils.placementOptions({}, action.layout);
         newWindows[myRank].widgets.forEach((widget, idx) => {
             let targetLayout = places[idx]?.layout;
             if (!targetLayout) {
@@ -11686,7 +11686,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 class DefaultTooltipComponent extends BaseTooltipComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DefaultTooltipComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.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: "14.0.0", version: "16.2.12", 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DefaultTooltipComponent, decorators: [{
             type: Component,
@@ -11786,9 +11786,9 @@ const components = [
     DatasourceSelectorComponent
 ];
 class PryDashboardModule {
-    static forRoot(widgetReference, options, tooltipReference, filterReference, additionalGridImplementations = []) {
-        additionalGridImplementations.forEach((impl) => {
-            WidgetPlacementUtils.addLayoutImplementation(impl.type, impl.sizeImpl, impl.placementImpl, impl.image);
+    static forRoot(widgetReference, options, tooltipReference, filterReference, additionalGridLayouts = []) {
+        additionalGridLayouts.forEach((impl) => {
+            WidgetPlacementUtils.addGridLayout(impl);
         });
         return {
             ngModule: PryDashboardModule,
@@ -11808,9 +11808,7 @@ class PryDashboardModule {
             ]
         };
     }
-    constructor(store) {
-        ProxyUtils.init(store);
-    }
+    constructor(store) { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PryDashboardModule, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: PryDashboardModule, declarations: [DashboardComponent,
             WidgetInstanciatorComponent,
@@ -11838,7 +11836,7 @@ class PryDashboardModule {
             PryCoreModule,
             PryCheckboxModule,
             PryToggleModule,
-            PryOverlayModule, i1.StoreFeatureModule, i1$2.EffectsFeatureModule, PryDatePickerModule,
+            PryOverlayModule, i1.StoreFeatureModule, i1$3.EffectsFeatureModule, PryDatePickerModule,
             PryI18nModule], exports: [DashboardComponent,
             WidgetInstanciatorComponent,
             WidgetPlaceholderComponent,
@@ -12187,7 +12185,7 @@ class PryAboutComponent {
         return !!value && (!!backVersion.chartVersion || !!frontVersion.libVersion);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PryAboutComponent, deps: [{ token: i1.Store }, { token: PryI18nService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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-chips -md\" [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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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-chips -md\" [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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PryAboutComponent, decorators: [{
             type: Component,