@provoly/dashboard 0.11.0

package/fesm2022/provoly-dashboard-toolbox.mjs

@@ -0,0 +1,774 @@
+import * as i7 from '@angular/cdk/drag-drop';
+import { moveItemInArray, CdkDropList, CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
+import * as i2 from '@angular/cdk/overlay';
+import { OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Component, Input, ViewEncapsulation, TemplateRef, ViewContainerRef, ViewChild, NgModule } from '@angular/core';
+import * as i4 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i3$1 from '@provoly/dashboard';
+import { DashboardActions, ConfigActions, DashboardSelectors, SubscriptionnerDirective, DataSourceSelectors, ClassSelectors, FieldSelectors, FieldType, NamedQueryTypes, DataSourceActions, MIME_TYPE_RESULTSET, PryVisibilityType, LibraryTypes, ViewMode, DashboardGridLayout, WidgetPlacementUtils, PryOverlayModule, PryCoreModule, PryDashboardModule, PrySelectModule, PryIconModule, PryToggleModule, PryShareModule, PryI18nModule } from '@provoly/dashboard';
+import * as i6 from '@provoly/dashboard/components/checkbox';
+import { PryCheckboxModule } from '@provoly/dashboard/components/checkbox';
+import * as i7$1 from '@provoly/dashboard/components/stepper';
+import { PryStepperModule } from '@provoly/dashboard/components/stepper';
+import * as i1 from '@ngrx/store';
+import * as i3$2 from '@angular/cdk/bidi';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { BehaviorSubject, combineLatest, map } from 'rxjs';
+import { withLatestFrom, map as map$1 } from 'rxjs/operators';
+import { v4 } from 'uuid';
+
+class ClearViewComponent {
+    constructor(store) {
+        this.store = store;
+        this.label = true;
+    }
+    clear() {
+        this.store.dispatch(DashboardActions.clearManifest());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: ClearViewComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: ClearViewComponent, selector: "pry-clear-view", inputs: { label: "label" }, ngImport: i0, template: "<div [pryTooltip]=\"infoTooltip\" pryTooltipPosition=\"bottom\" aria-describedby=\"infoTooltip_clearView\">\n  <button type=\"button\" class=\"a-btn a-btn--secondary -size-md\" (click)=\"clear()\">\n    <ng-container *ngIf=\"label\">{{ '@pry.toolbox.clear' | i18n }}</ng-container>\n  </button>\n</div>\n\n<ng-template #infoTooltip>\n  <div class=\"m-tooltip\" role=\"tooltip\" id=\"infoTooltip_clearView\">\n    <span class=\"m-tooltip__text\">{{ '@pry.toolbox.clear' | i18n }}</span>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.PryTooltipDirective, selector: "[pryTooltip]", inputs: ["pryTooltip", "styleReversed", "pryTooltipContext", "pryTooltipPosition", "pryTooltipShowDelay"] }, { kind: "pipe", type: i3$1.I18nPipe, name: "i18n" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: ClearViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pry-clear-view', template: "<div [pryTooltip]=\"infoTooltip\" pryTooltipPosition=\"bottom\" aria-describedby=\"infoTooltip_clearView\">\n  <button type=\"button\" class=\"a-btn a-btn--secondary -size-md\" (click)=\"clear()\">\n    <ng-container *ngIf=\"label\">{{ '@pry.toolbox.clear' | i18n }}</ng-container>\n  </button>\n</div>\n\n<ng-template #infoTooltip>\n  <div class=\"m-tooltip\" role=\"tooltip\" id=\"infoTooltip_clearView\">\n    <span class=\"m-tooltip__text\">{{ '@pry.toolbox.clear' | i18n }}</span>\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: function () { return [{ type: i1.Store }]; }, propDecorators: { label: [{
+                type: Input
+            }] } });
+
+class DragWidgetsComponent {
+    constructor(store, toolboxManifestService, toolboxMenuService) {
+        this.store = store;
+        this.toolboxManifestService = toolboxManifestService;
+        this.toolboxMenuService = toolboxMenuService;
+        this.labels = true;
+        this.mainOpened = false;
+        this.connectedPosition = {
+            originX: 'start',
+            originY: 'bottom',
+            overlayX: 'start',
+            overlayY: 'top'
+        };
+        this.store.dispatch(ConfigActions.loadWidgets());
+        this.menu$ = this.toolboxMenuService.menuStructure$;
+    }
+    dragStart($event, type) {
+        this.toolboxManifestService.dataTransfer($event, type);
+        setTimeout(() => {
+            this.mainOpened = false;
+        }, 100);
+    }
+    openMenu($event) {
+        this.mainOpened = true;
+        $event.stopPropagation();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: DragWidgetsComponent, deps: [{ token: i1.Store }, { token: i3$1.ToolboxManifestService }, { token: i3$1.ToolboxMenuService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: DragWidgetsComponent, selector: "pry-drag-widgets", inputs: { labels: "labels" }, ngImport: i0, template: "<div class=\"toolbox-draggable\">\n  <div [pryTooltip]=\"infoTooltip\" pryTooltipPosition=\"bottom\" aria-describedby=\"infoTooltip_dragWidgets\">\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--secondary -size-md\"\n      (click)=\"openMenu($event)\"\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      id=\"widget_insert\"\n      aria-haspopup\n      aria-controls=\"IDpanel\"\n      aria-expanded=\"false\"\n    >\n      <ng-container *ngIf=\"labels\"\n        ><span class=\"u-visually-hidden\">{{ '@pry.toolbox.dragIndication' | i18n }}</span\n        >{{ '@pry.toolbox.drag' | i18n }}\n      </ng-container>\n    </button>\n  </div>\n</div>\n\n<ng-template #infoTooltip>\n  <div class=\"m-tooltip\" role=\"tooltip\" id=\"infoTooltip_dragWidgets\">\n    <span class=\"m-tooltip__text\"> Ins\u00E9rer un widget </span>\n  </div>\n</ng-template>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"mainOpened\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  [cdkConnectedOverlayPositions]=\"[connectedPosition]\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"mainOpened = false\"\n>\n  <div class=\"o-draggable-menu\" aria-label=\"Ins\u00E9rer un widget (par glisser/d\u00E9poser)\" aria-labelledby=\"widget_insert\">\n    <ul class=\"o-draggable-menu__list\">\n      <ng-container *ngFor=\"let menu of menu$ | async\">\n        <li class=\"o-draggable-menu__list__item\">\n          <button class=\"a-btn\" aria-haspopup=\"true\" aria-expanded=\"false\">\n            <pry-icon [iconSvg]=\"menu.icon\"></pry-icon>\n            <ng-container *ngIf=\"labels\">{{ menu.label | i18n }}</ng-container>\n          </button>\n\n          <ul class=\"o-draggable-menu__list__submenu\">\n            <ng-container *ngFor=\"let sub of menu.sub\">\n              <li class=\"o-draggable-menu__list__submenu__item\">\n                <button class=\"a-btn\" (dragstart)=\"dragStart($event, sub.type)\" draggable=\"true\">\n                  <img [alt]=\"sub.label\" [height]=\"24\" [width]=\"24\" [src]=\"sub.icon | getSecuredImage | async\" />\n                  <ng-container *ngIf=\"labels\">{{ sub.label | i18n }}</ng-container>\n                </button>\n              </li>\n            </ng-container>\n          </ul>\n        </li>\n      </ng-container>\n    </ul>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: 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: "directive", type: i3$1.PryTooltipDirective, selector: "[pryTooltip]", inputs: ["pryTooltip", "styleReversed", "pryTooltipContext", "pryTooltipPosition", "pryTooltipShowDelay"] }, { kind: "component", type: i3$1.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.GetSecuredImagePipe, name: "getSecuredImage" }, { kind: "pipe", type: i3$1.I18nPipe, name: "i18n" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: DragWidgetsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pry-drag-widgets', template: "<div class=\"toolbox-draggable\">\n  <div [pryTooltip]=\"infoTooltip\" pryTooltipPosition=\"bottom\" aria-describedby=\"infoTooltip_dragWidgets\">\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--secondary -size-md\"\n      (click)=\"openMenu($event)\"\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      id=\"widget_insert\"\n      aria-haspopup\n      aria-controls=\"IDpanel\"\n      aria-expanded=\"false\"\n    >\n      <ng-container *ngIf=\"labels\"\n        ><span class=\"u-visually-hidden\">{{ '@pry.toolbox.dragIndication' | i18n }}</span\n        >{{ '@pry.toolbox.drag' | i18n }}\n      </ng-container>\n    </button>\n  </div>\n</div>\n\n<ng-template #infoTooltip>\n  <div class=\"m-tooltip\" role=\"tooltip\" id=\"infoTooltip_dragWidgets\">\n    <span class=\"m-tooltip__text\"> Ins\u00E9rer un widget </span>\n  </div>\n</ng-template>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"mainOpened\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  [cdkConnectedOverlayPositions]=\"[connectedPosition]\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"mainOpened = false\"\n>\n  <div class=\"o-draggable-menu\" aria-label=\"Ins\u00E9rer un widget (par glisser/d\u00E9poser)\" aria-labelledby=\"widget_insert\">\n    <ul class=\"o-draggable-menu__list\">\n      <ng-container *ngFor=\"let menu of menu$ | async\">\n        <li class=\"o-draggable-menu__list__item\">\n          <button class=\"a-btn\" aria-haspopup=\"true\" aria-expanded=\"false\">\n            <pry-icon [iconSvg]=\"menu.icon\"></pry-icon>\n            <ng-container *ngIf=\"labels\">{{ menu.label | i18n }}</ng-container>\n          </button>\n\n          <ul class=\"o-draggable-menu__list__submenu\">\n            <ng-container *ngFor=\"let sub of menu.sub\">\n              <li class=\"o-draggable-menu__list__submenu__item\">\n                <button class=\"a-btn\" (dragstart)=\"dragStart($event, sub.type)\" draggable=\"true\">\n                  <img [alt]=\"sub.label\" [height]=\"24\" [width]=\"24\" [src]=\"sub.icon | getSecuredImage | async\" />\n                  <ng-container *ngIf=\"labels\">{{ sub.label | i18n }}</ng-container>\n                </button>\n              </li>\n            </ng-container>\n          </ul>\n        </li>\n      </ng-container>\n    </ul>\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: function () { return [{ type: i1.Store }, { type: i3$1.ToolboxManifestService }, { type: i3$1.ToolboxMenuService }]; }, propDecorators: { labels: [{
+                type: Input
+            }] } });
+
+class EditModeToggleComponent {
+    constructor(store) {
+        this.store = store;
+        this.label = true;
+        this.modeEdition$ = this.store.select(DashboardSelectors.dashboardEditionMode);
+    }
+    toggleEditionMode() {
+        this.store.dispatch(DashboardActions.toggleEditionMode({}));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: EditModeToggleComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: EditModeToggleComponent, selector: "pry-edit-mode-toggle", inputs: { label: "label" }, ngImport: i0, template: "<pry-toggle\n  [ngModel]=\"modeEdition$ | async\"\n  (ngModelChange)=\"toggleEditionMode()\"\n  [alwaysActive]=\"true\"\n  mode=\"action\"\n  dir=\"ltr\"\n>\n  {{ ((modeEdition$ | async) ? '@pry.toolbox.editOff' : '@pry.toolbox.edit') | i18n }}\n</pry-toggle>\n", dependencies: [{ 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: "directive", type: i3$2.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i3$1.PryToggleComponent, selector: "pry-toggle", inputs: ["alwaysActive", "disabled", "mode", "size", "dir", "leftword", "rightword"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.I18nPipe, name: "i18n" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: EditModeToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pry-edit-mode-toggle', template: "<pry-toggle\n  [ngModel]=\"modeEdition$ | async\"\n  (ngModelChange)=\"toggleEditionMode()\"\n  [alwaysActive]=\"true\"\n  mode=\"action\"\n  dir=\"ltr\"\n>\n  {{ ((modeEdition$ | async) ? '@pry.toolbox.editOff' : '@pry.toolbox.edit') | i18n }}\n</pry-toggle>\n" }]
+        }], ctorParameters: function () { return [{ type: i1.Store }]; }, propDecorators: { label: [{
+                type: Input
+            }] } });
+
+class PrySelectGridLayoutCssComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PrySelectGridLayoutCssComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: PrySelectGridLayoutCssComponent, selector: "pry-select-grid-layout-css", ngImport: i0, template: '', isInline: true, styles: [".o-select-grid-layout{margin:0;padding:0}.o-select-grid-layout li{list-style:none}.o-select-grid-layout-wrapper{overflow-y:auto;max-height:80%}.o-select-grid-layout-modal-wrapper{max-width:80%}.o-select-grid-layout{overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,auto));grid-gap:1.875rem;padding:.25rem .25rem 1.875rem}.o-select-grid-layout__item .a-btn{display:flex;flex-direction:column;align-items:center;justify-content:space-around;width:100%;height:100%;padding:.9375rem;border-radius:0;text-align:left}.o-select-grid-layout__item .a-btn:focus{outline:2px solid #35b99f}.o-select-grid-layout__item .a-btn:focus:not(:focus-visible){outline:0}.o-select-grid-layout__item .a-btn:focus-visible{outline:0;border-radius:.125rem;box-shadow:0 0 0 2px #fff,0 0 0 4px #35b99f}.o-select-grid-layout__item .a-btn strong{display:block}.o-select-grid-layout__item .a-btn .a-p{margin-bottom:0;font-size:13px}\n", ".o-select-grid-layout-wrapper{overflow-y:auto;max-height:80%}.o-select-grid-layout-modal-wrapper{max-width:60%;padding:1.875rem 2.5rem}.backdrop{background-color:#0000004d}.o-filters{width:100%}.o-filters__header{display:flex;justify-content:space-between;align-items:center;padding-bottom:1.875rem;border-bottom:1px solid #dfe5ec}.o-filters__header h2{padding:0}.o-filters__header .back-button{transform:rotate(180deg)}.o-filters__content{display:flex;flex-direction:column;padding-top:1.25rem}.o-filters__content>.a-btn{margin-top:1.25rem;align-self:center}.o-filters__filter td:first-child{min-width:20%;max-width:30%}.o-filters__filter td:nth-child(2){min-width:50%;max-width:60%}.o-filters__filter td:nth-child(3){width:8%}.o-filters__filter td:nth-child(4){width:8%}.o-filters__filter td:last-child{width:4%}.o-filters__filter.cdk-drag-preview{background-color:#fff}.o-filters__filter.cdk-drag-preview td{padding:.75rem .5rem}.o-filters__filter .cdk-drag-handle{pointer-events:auto}.o-filters__filter .cdk-drag-handle:hover{cursor:grab}.o-filters tr.o-filters__filter{cursor:default}.o-filters__no-filters{padding-bottom:1.875rem}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PrySelectGridLayoutCssComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pry-select-grid-layout-css', template: '', encapsulation: ViewEncapsulation.None, styles: [".o-select-grid-layout{margin:0;padding:0}.o-select-grid-layout li{list-style:none}.o-select-grid-layout-wrapper{overflow-y:auto;max-height:80%}.o-select-grid-layout-modal-wrapper{max-width:80%}.o-select-grid-layout{overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,auto));grid-gap:1.875rem;padding:.25rem .25rem 1.875rem}.o-select-grid-layout__item .a-btn{display:flex;flex-direction:column;align-items:center;justify-content:space-around;width:100%;height:100%;padding:.9375rem;border-radius:0;text-align:left}.o-select-grid-layout__item .a-btn:focus{outline:2px solid #35b99f}.o-select-grid-layout__item .a-btn:focus:not(:focus-visible){outline:0}.o-select-grid-layout__item .a-btn:focus-visible{outline:0;border-radius:.125rem;box-shadow:0 0 0 2px #fff,0 0 0 4px #35b99f}.o-select-grid-layout__item .a-btn strong{display:block}.o-select-grid-layout__item .a-btn .a-p{margin-bottom:0;font-size:13px}\n", ".o-select-grid-layout-wrapper{overflow-y:auto;max-height:80%}.o-select-grid-layout-modal-wrapper{max-width:60%;padding:1.875rem 2.5rem}.backdrop{background-color:#0000004d}.o-filters{width:100%}.o-filters__header{display:flex;justify-content:space-between;align-items:center;padding-bottom:1.875rem;border-bottom:1px solid #dfe5ec}.o-filters__header h2{padding:0}.o-filters__header .back-button{transform:rotate(180deg)}.o-filters__content{display:flex;flex-direction:column;padding-top:1.25rem}.o-filters__content>.a-btn{margin-top:1.25rem;align-self:center}.o-filters__filter td:first-child{min-width:20%;max-width:30%}.o-filters__filter td:nth-child(2){min-width:50%;max-width:60%}.o-filters__filter td:nth-child(3){width:8%}.o-filters__filter td:nth-child(4){width:8%}.o-filters__filter td:last-child{width:4%}.o-filters__filter.cdk-drag-preview{background-color:#fff}.o-filters__filter.cdk-drag-preview td{padding:.75rem .5rem}.o-filters__filter .cdk-drag-handle{pointer-events:auto}.o-filters__filter .cdk-drag-handle:hover{cursor:grab}.o-filters tr.o-filters__filter{cursor:default}.o-filters__no-filters{padding-bottom:1.875rem}\n"] }]
+        }] });
+
+var FilterSteps;
+(function (FilterSteps) {
+    FilterSteps["LIST"] = "list";
+    FilterSteps["CREATION"] = "creation";
+    FilterSteps["EDITION"] = "edition";
+})(FilterSteps || (FilterSteps = {}));
+class PryFilterSettingsComponent extends SubscriptionnerDirective {
+    constructor(store, overlay, viewContainerRef, filterFactoryService, injector) {
+        super();
+        this.store = store;
+        this.overlay = overlay;
+        this.viewContainerRef = viewContainerRef;
+        this.filterFactoryService = filterFactoryService;
+        this.injector = injector;
+        this.label = true;
+        this.settingsOpened = false;
+        this.filters = [];
+        this.currentFilterComponentType$ = new BehaviorSubject('');
+        this.currentStep = FilterSteps.LIST;
+        this.steps = FilterSteps;
+        this.filter = {
+            id: v4(),
+            name: '',
+            type: '',
+            attributes: []
+        };
+        this.operators = [
+            { label: '@pry.search.operator.equalsString', value: 'EQUALS' },
+            { label: '@pry.search.operator.notEqualsString', value: 'NOT_EQUALS' },
+            { label: '@pry.search.operator.contains', value: 'CONTAINS' },
+            { label: '@pry.search.operator.startWith', value: 'START_WITH' },
+            { label: '@pry.search.operator.endWith', value: 'END_WITH' },
+            { label: '@pry.search.operator.greaterThanNumber', value: 'GREATER_THAN' },
+            { label: '@pry.search.operator.lowerThanNumber', value: 'LOWER_THAN' },
+            { label: '@pry.search.operator.innerBoundsDate', value: 'INSIDE' },
+            { label: '@pry.search.operator.outerBoundsDate', value: 'OUTSIDE' }
+        ];
+        this.currentOperators$ = new BehaviorSubject(this.operators);
+        this.classes = [];
+        this.selectedAttribute$ = new BehaviorSubject(this.filter.attributes.map((attr) => attr.id));
+        this.FilterSteps = FilterSteps;
+        this.manifest$ = store.select(DashboardSelectors.globalManifest);
+        this.subscriptions.add(this.manifest$.subscribe((manifest) => {
+            this.filters = manifest.filters ? [...manifest.filters] : [];
+        }));
+        this.datasource$ = combineLatest([
+            this.store.select(DataSourceSelectors.getDataSources),
+            store.select(DashboardSelectors.namedQueriesUses)
+        ]).pipe(map(([dataSources, dataSourcesUsed]) => Object.keys(dataSourcesUsed).map((id) => ({
+            label: dataSources.find((dataSource) => dataSource.id === id)?.name,
+            value: id
+        }))));
+        this.types$ = this.filterFactoryService.types$.pipe(map((types) => types.map((type) => ({
+            label: '@pry.filters.types.' + type,
+            value: type
+        }))));
+        this.subscriptions.add(this.currentFilterComponentType$.subscribe(() => {
+            this.currentOperators$.next(this.getOperators());
+        }));
+        this.attributes$ = combineLatest([
+            store.select(DataSourceSelectors.getDataSources),
+            store.select(DashboardSelectors.namedQueriesUses),
+            store.select(ClassSelectors.classes),
+            this.currentFilterComponentType$
+        ]).pipe(withLatestFrom(store.select(FieldSelectors.fields)), map(([[dataSources, currentDataSources, classes, componentType], fields]) => {
+            let dataSourcesInPres = dataSources.filter((dataSource) => Object.keys(currentDataSources).includes(dataSource.id) ? dataSource : false);
+            const attributes = [];
+            dataSourcesInPres.forEach((dataSource) => {
+                const clazz = this.getDatasourceClass(dataSource, classes);
+                clazz?.attributes.forEach((attr) => {
+                    attributes.push({
+                        id: attr.id,
+                        name: attr.name,
+                        label: [attr.name, dataSource.name, clazz.name].join(' / '),
+                        datasource: dataSource.id,
+                        type: fields.find((field) => field.id === attr.field)?.type ?? FieldType.STRING
+                    });
+                });
+            });
+            return this.filterAttributes(componentType, attributes);
+        }));
+    }
+    getDatasourceClass(dataSource, classes) {
+        let clazz = undefined;
+        if (dataSource.sourceType === 'dataset') {
+            clazz = classes.find((clazz) => clazz.id === dataSource.oClass);
+        }
+        else if (dataSource.sourceType === 'namedQuery' &&
+            dataSource.request &&
+            dataSource.request.type === NamedQueryTypes.MONO_CLASS) {
+            clazz = classes.find((clazz) => clazz.id === dataSource.request.oClass);
+        }
+        return clazz;
+    }
+    filterAttributes(componentType, attributes) {
+        switch (componentType) {
+            case 'date':
+                return attributes.filter((attr) => attr.type === FieldType.INSTANT);
+            case 'number':
+                return attributes.filter((attr) => [FieldType.INTEGER, FieldType.DECIMAL, FieldType.LONG].includes(attr.type));
+            case 'text':
+                return attributes.filter((attr) => [FieldType.STRING, FieldType.KEYWORD].includes(attr.type));
+            default:
+                if (this.selectedAttribute$.value.length > 0) {
+                    const attributeType = attributes.find((attr) => attr.id === this.selectedAttribute$.value[0])?.type;
+                    return attributes.filter((attr) => attr.type === attributeType);
+                }
+                return attributes;
+        }
+    }
+    drop(event) {
+        moveItemInArray(this.filters, event.previousIndex, event.currentIndex);
+    }
+    toggleSettings() {
+        this.settingsOpened = !this.settingsOpened;
+        if (this.settingsOpened) {
+            this.openSettings();
+        }
+        else {
+            this.overlayRefSettings?.dispose();
+            this.overlayRefSettings = undefined;
+            this.store.dispatch(ConfigActions.closeOverlay({ id: this.constructor.name }));
+            this.store.dispatch(DashboardActions.setFilters({ filters: this.filters }));
+            this.goBack();
+        }
+    }
+    openSettings() {
+        this.overlayRefSettings = this.overlay.create(new OverlayConfig({
+            hasBackdrop: true,
+            panelClass: ['o-modal-wrapper', 'o-select-grid-layout-modal-wrapper'],
+            backdropClass: 'backdrop'
+        }));
+        this.store.dispatch(ConfigActions.addingOverlay({ id: this.constructor.name }));
+        this.overlayRefSettings.backdropClick().subscribe((_) => {
+            this.goBack();
+            this.toggleSettings();
+        });
+        this.overlayRefSettings.attach(new TemplatePortal(this.templateSettings, this.viewContainerRef));
+    }
+    updateFilterType($event) {
+        this.filter.type = $event;
+        this.filter.operator = $event === 'list' ? 'EQUALS' : this.filter.operator;
+        if (this.filter.type !== '' && this.container) {
+            let component = this.filterFactoryService.generateFilter(this.filter.type, this.injector, this.container);
+            this.subscriptions.add(component.subscribe((componentRef) => {
+                this.currentFilterComponentType$.next(componentRef.instance.type);
+            }));
+        }
+    }
+    getFilterAttributes(filter, attrCount) {
+        attrCount = attrCount <= filter.attributes.length ? attrCount : filter.attributes.length;
+        return filter.attributes
+            .map((attr) => attr.name)
+            .slice(0, attrCount)
+            .join(', ');
+    }
+    goBack() {
+        this.filter = {
+            id: v4(),
+            name: '',
+            type: '',
+            attributes: []
+        };
+        this.currentStep = FilterSteps.LIST;
+    }
+    goToEdition(filter) {
+        this.filter = { ...filter };
+        this.currentStep = FilterSteps.EDITION;
+    }
+    goToCreation() {
+        this.currentFilterComponentType$.next('');
+        this.currentStep = FilterSteps.EDITION;
+    }
+    submitFilter() {
+        this.store.dispatch(DashboardActions.updateFilters({ filter: this.filter }));
+        this.goBack();
+    }
+    selectAttribute($event) {
+        this.filter.attributes = $event;
+        this.selectedAttribute$.next($event.map((attr) => attr.id));
+    }
+    deleteFilter(id) {
+        this.store.dispatch(DashboardActions.removeFilter({ id }));
+    }
+    getOperators() {
+        return this.operators.filter((operator) => {
+            switch (this.currentFilterComponentType$.value) {
+                case 'date':
+                    return this.filter.hasDateRange
+                        ? ['INSIDE', 'OUTSIDE'].includes(operator.value)
+                        : ['EQUALS', 'NOT_EQUALS', 'GREATER_THAN', 'LOWER_THAN'].includes(operator.value);
+                case 'list':
+                    return ['EQUALS'].includes(operator.value);
+                case 'number':
+                    return ['EQUALS', 'NOT_EQUALS', 'GREATER_THAN', 'LOWER_THAN'].includes(operator.value);
+                case 'text':
+                    return ['CONTAINS', 'EQUALS', 'NOT_EQUALS', 'START_WITH', 'END_WITH'].includes(operator.value);
+                default:
+                    return operator;
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PryFilterSettingsComponent, deps: [{ token: i1.Store }, { token: i2.Overlay }, { token: i0.ViewContainerRef }, { token: i3$1.FilterFactoryService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: PryFilterSettingsComponent, selector: "pry-filter-settings", inputs: { label: "label" }, viewQueries: [{ propertyName: "templateSettings", first: true, predicate: ["settings"], descendants: true, read: TemplateRef }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }], usesInheritance: true, ngImport: i0, template: "<pry-select-grid-layout-css></pry-select-grid-layout-css>\n<div class=\"save-manifest-container\">\n  <div style=\"display: none\">\n    <ng-template #container></ng-template>\n  </div>\n  <button\n    type=\"button\"\n    class=\"a-btn a-btn--secondary -size-md\"\n    [disabled]=\"(attributes$ | async)?.length === 0\"\n    (click)=\"toggleSettings()\"\n    aria-haspopup=\"dialog\"\n  >\n    <ng-container *ngIf=\"label\">{{ '@pry.filters.label' | i18n }}</ng-container>\n  </button>\n</div>\n\n<ng-template #settings>\n  <div class=\"o-filters\">\n    <div class=\"o-filters__header\">\n      <ng-container *ngIf=\"currentStep === FilterSteps.LIST\">\n        <h2>Param\u00E9trer les filtres</h2>\n      </ng-container>\n      <ng-container *ngIf=\"currentStep === FilterSteps.CREATION || currentStep === FilterSteps.EDITION\">\n        <div class=\"u-display-flex -row -align-center\">\n          <button (click)=\"goBack()\" type=\"button\" class=\"back-button\">\n            <pry-icon iconSvg=\"chevron_right\"></pry-icon>\n          </button>\n          <h2>\n            {{\n              (currentStep === FilterSteps.CREATION ? '@pry.filters.creation.create' : '@pry.filters.creation.update')\n                | i18n\n            }}\n          </h2>\n        </div>\n      </ng-container>\n      <button (click)=\"toggleSettings()\" type=\"button\">\n        <pry-icon iconSvg=\"close\"></pry-icon>\n      </button>\n    </div>\n    <ng-container *ngIf=\"currentStep === FilterSteps.LIST\">\n      <div class=\"o-filters__content\">\n        <div *ngIf=\"(attributes$ | async)?.length === 0; else attributesExists\" class=\"a-table-wrapper\"></div>\n        <ng-template #attributesExists>\n          <table *ngIf=\"filters.length > 0; else noFilters\" class=\"a-table\">\n            <tbody cdkDropList [cdkDropListData]=\"filters\" (cdkDropListDropped)=\"drop($event)\">\n              <tr *ngFor=\"let filter of filters\" class=\"o-filters__filter\" cdkDrag>\n                <td>\n                  <span>{{ filter.name }}</span>\n                </td>\n                <td>\n                  <span>{{ getFilterAttributes(filter, 3) }}</span>\n                </td>\n                <td>\n                  <button type=\"button\" class=\"a-btn a-btn--primary\" (click)=\"deleteFilter(filter.id)\">\n                    {{ '@pry.action.delete' | i18n }}\n                  </button>\n                </td>\n                <td>\n                  <button type=\"button\" class=\"a-btn a-btn--primary\" (click)=\"goToEdition(filter)\">\n                    {{ '@pry.filters.list.modify' | i18n }}\n                  </button>\n                </td>\n                <td cdkDragHandle>\n                  <pry-icon iconSvg=\"drag_indicator\"></pry-icon>\n                </td>\n              </tr>\n            </tbody>\n          </table>\n          <ng-template #noFilters>\n            <span class=\"o-filters__no-filters\">{{ '@pry.filters.noFilters' | i18n }}</span>\n          </ng-template>\n          <button (click)=\"goToCreation()\" class=\"a-btn a-btn--primary\">{{ '@pry.filters.list.add' | i18n }}</button>\n        </ng-template>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"currentStep === FilterSteps.CREATION || currentStep === FilterSteps.EDITION\">\n      <div class=\"o-filters__content\">\n        <div class=\"m-form-label-field\">\n          <label for=\"filterName\" class=\"a-label\">{{ '@pry.filters.creation.name' | i18n }}</label>\n          <input id=\"filterName\" class=\"a-form-field\" type=\"text\" [(ngModel)]=\"filter.name\" />\n        </div>\n        <div class=\"m-form-label-field\">\n          <label for=\"filterType\" class=\"a-label\">{{ '@pry.filters.creation.type' | i18n }}</label>\n          <pry-select\n            id=\"filterType\"\n            [labelTranslate]=\"true\"\n            [itemsAsOption]=\"true\"\n            [placeholder]=\"'@pry.filters.creation.type' | i18n\"\n            [items]=\"types$ | async\"\n            bindLabel=\"label\"\n            bindValue=\"value\"\n            [(ngModel)]=\"filter.type\"\n            (ngModelChange)=\"updateFilterType($event)\"\n          >\n          </pry-select>\n        </div>\n        <div *ngIf=\"(currentFilterComponentType$ | async) === 'date'\" class=\"m-form-label-field u-display-flex -row\">\n          <label for=\"date-range\" class=\"a-label\">Plage de dates</label>\n          <pry-checkbox\n            id=\"date-range\"\n            [(ngModel)]=\"filter.hasDateRange\"\n            (ngModelChange)=\"this.currentOperators$.next(getOperators())\"\n          />\n        </div>\n        <div *ngIf=\"(currentFilterComponentType$ | async) === 'list'\" class=\"m-form-label-field\">\n          <label for=\"possibleValues\" class=\"a-label\">{{ '@pry.filters.creation.values' | i18n }}</label>\n          <input\n            id=\"possibleValues\"\n            class=\"a-form-field\"\n            type=\"text\"\n            [(ngModel)]=\"filter.possibleValues\"\n            placeholder=\"valeur1, valeur2, valeur3\"\n          />\n        </div>\n        <div class=\"m-form-label-field\">\n          <label for=\"attributes\" class=\"a-label\">{{ '@pry.filters.creation.attributes' | i18n }}</label>\n          <pry-select\n            id=\"attributes\"\n            [labelTranslate]=\"false\"\n            [itemsAsOption]=\"true\"\n            [multiple]=\"true\"\n            [items]=\"attributes$ | async\"\n            [ngModel]=\"filter.attributes\"\n            (ngModelChange)=\"selectAttribute($event)\"\n            [placeholder]=\"'@pry.filters.creation.attributes' | i18n\"\n            [autocomplete]=\"true\"\n            bindLabel=\"label\"\n          >\n          </pry-select>\n        </div>\n        <div class=\"m-form-label-field\">\n          <label for=\"operations\" class=\"a-label\">{{ '@pry.filters.attributes.operator' | i18n }}</label>\n          <pry-select\n            id=\"operations\"\n            [labelTranslate]=\"true\"\n            [itemsAsOption]=\"true\"\n            [items]=\"currentOperators$ | async\"\n            [(ngModel)]=\"filter.operator\"\n            [placeholder]=\"'@pry.filters.attributes.operator' | i18n\"\n            bindLabel=\"label\"\n            bindValue=\"value\"\n            [disabled]=\"(currentFilterComponentType$ | async) === 'list'\"\n          >\n          </pry-select>\n        </div>\n        <button\n          class=\"a-btn a-btn--primary\"\n          (click)=\"submitFilter()\"\n          [disabled]=\"!(filter.name && filter.type && filter.attributes.length !== 0 && filter.operator)\"\n          type=\"submit\"\n        >\n          {{ '@pry.toolbox.manifest.validate' | i18n }}\n        </button>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: 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: i3$1.PrySelectComponent, selector: "pry-select", inputs: ["labelTranslate", "baseTranslate", "translationFn", "translationFnArgs", "clearable", "multiple", "multipleClearRight", "placeholder", "isForm", "required", "name", "readonly", "items", "itemsAsOption", "bindData", "bindValue", "bindLabel", "bindIcon", "iconSize", "templateLabel", "templateOption", "autocomplete"] }, { kind: "component", type: i3$1.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i6.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle"] }, { kind: "directive", type: i7.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i7.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i7.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: PrySelectGridLayoutCssComponent, selector: "pry-select-grid-layout-css" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.I18nPipe, name: "i18n" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PryFilterSettingsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pry-filter-settings', template: "<pry-select-grid-layout-css></pry-select-grid-layout-css>\n<div class=\"save-manifest-container\">\n  <div style=\"display: none\">\n    <ng-template #container></ng-template>\n  </div>\n  <button\n    type=\"button\"\n    class=\"a-btn a-btn--secondary -size-md\"\n    [disabled]=\"(attributes$ | async)?.length === 0\"\n    (click)=\"toggleSettings()\"\n    aria-haspopup=\"dialog\"\n  >\n    <ng-container *ngIf=\"label\">{{ '@pry.filters.label' | i18n }}</ng-container>\n  </button>\n</div>\n\n<ng-template #settings>\n  <div class=\"o-filters\">\n    <div class=\"o-filters__header\">\n      <ng-container *ngIf=\"currentStep === FilterSteps.LIST\">\n        <h2>Param\u00E9trer les filtres</h2>\n      </ng-container>\n      <ng-container *ngIf=\"currentStep === FilterSteps.CREATION || currentStep === FilterSteps.EDITION\">\n        <div class=\"u-display-flex -row -align-center\">\n          <button (click)=\"goBack()\" type=\"button\" class=\"back-button\">\n            <pry-icon iconSvg=\"chevron_right\"></pry-icon>\n          </button>\n          <h2>\n            {{\n              (currentStep === FilterSteps.CREATION ? '@pry.filters.creation.create' : '@pry.filters.creation.update')\n                | i18n\n            }}\n          </h2>\n        </div>\n      </ng-container>\n      <button (click)=\"toggleSettings()\" type=\"button\">\n        <pry-icon iconSvg=\"close\"></pry-icon>\n      </button>\n    </div>\n    <ng-container *ngIf=\"currentStep === FilterSteps.LIST\">\n      <div class=\"o-filters__content\">\n        <div *ngIf=\"(attributes$ | async)?.length === 0; else attributesExists\" class=\"a-table-wrapper\"></div>\n        <ng-template #attributesExists>\n          <table *ngIf=\"filters.length > 0; else noFilters\" class=\"a-table\">\n            <tbody cdkDropList [cdkDropListData]=\"filters\" (cdkDropListDropped)=\"drop($event)\">\n              <tr *ngFor=\"let filter of filters\" class=\"o-filters__filter\" cdkDrag>\n                <td>\n                  <span>{{ filter.name }}</span>\n                </td>\n                <td>\n                  <span>{{ getFilterAttributes(filter, 3) }}</span>\n                </td>\n                <td>\n                  <button type=\"button\" class=\"a-btn a-btn--primary\" (click)=\"deleteFilter(filter.id)\">\n                    {{ '@pry.action.delete' | i18n }}\n                  </button>\n                </td>\n                <td>\n                  <button type=\"button\" class=\"a-btn a-btn--primary\" (click)=\"goToEdition(filter)\">\n                    {{ '@pry.filters.list.modify' | i18n }}\n                  </button>\n                </td>\n                <td cdkDragHandle>\n                  <pry-icon iconSvg=\"drag_indicator\"></pry-icon>\n                </td>\n              </tr>\n            </tbody>\n          </table>\n          <ng-template #noFilters>\n            <span class=\"o-filters__no-filters\">{{ '@pry.filters.noFilters' | i18n }}</span>\n          </ng-template>\n          <button (click)=\"goToCreation()\" class=\"a-btn a-btn--primary\">{{ '@pry.filters.list.add' | i18n }}</button>\n        </ng-template>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"currentStep === FilterSteps.CREATION || currentStep === FilterSteps.EDITION\">\n      <div class=\"o-filters__content\">\n        <div class=\"m-form-label-field\">\n          <label for=\"filterName\" class=\"a-label\">{{ '@pry.filters.creation.name' | i18n }}</label>\n          <input id=\"filterName\" class=\"a-form-field\" type=\"text\" [(ngModel)]=\"filter.name\" />\n        </div>\n        <div class=\"m-form-label-field\">\n          <label for=\"filterType\" class=\"a-label\">{{ '@pry.filters.creation.type' | i18n }}</label>\n          <pry-select\n            id=\"filterType\"\n            [labelTranslate]=\"true\"\n            [itemsAsOption]=\"true\"\n            [placeholder]=\"'@pry.filters.creation.type' | i18n\"\n            [items]=\"types$ | async\"\n            bindLabel=\"label\"\n            bindValue=\"value\"\n            [(ngModel)]=\"filter.type\"\n            (ngModelChange)=\"updateFilterType($event)\"\n          >\n          </pry-select>\n        </div>\n        <div *ngIf=\"(currentFilterComponentType$ | async) === 'date'\" class=\"m-form-label-field u-display-flex -row\">\n          <label for=\"date-range\" class=\"a-label\">Plage de dates</label>\n          <pry-checkbox\n            id=\"date-range\"\n            [(ngModel)]=\"filter.hasDateRange\"\n            (ngModelChange)=\"this.currentOperators$.next(getOperators())\"\n          />\n        </div>\n        <div *ngIf=\"(currentFilterComponentType$ | async) === 'list'\" class=\"m-form-label-field\">\n          <label for=\"possibleValues\" class=\"a-label\">{{ '@pry.filters.creation.values' | i18n }}</label>\n          <input\n            id=\"possibleValues\"\n            class=\"a-form-field\"\n            type=\"text\"\n            [(ngModel)]=\"filter.possibleValues\"\n            placeholder=\"valeur1, valeur2, valeur3\"\n          />\n        </div>\n        <div class=\"m-form-label-field\">\n          <label for=\"attributes\" class=\"a-label\">{{ '@pry.filters.creation.attributes' | i18n }}</label>\n          <pry-select\n            id=\"attributes\"\n            [labelTranslate]=\"false\"\n            [itemsAsOption]=\"true\"\n            [multiple]=\"true\"\n            [items]=\"attributes$ | async\"\n            [ngModel]=\"filter.attributes\"\n            (ngModelChange)=\"selectAttribute($event)\"\n            [placeholder]=\"'@pry.filters.creation.attributes' | i18n\"\n            [autocomplete]=\"true\"\n            bindLabel=\"label\"\n          >\n          </pry-select>\n        </div>\n        <div class=\"m-form-label-field\">\n          <label for=\"operations\" class=\"a-label\">{{ '@pry.filters.attributes.operator' | i18n }}</label>\n          <pry-select\n            id=\"operations\"\n            [labelTranslate]=\"true\"\n            [itemsAsOption]=\"true\"\n            [items]=\"currentOperators$ | async\"\n            [(ngModel)]=\"filter.operator\"\n            [placeholder]=\"'@pry.filters.attributes.operator' | i18n\"\n            bindLabel=\"label\"\n            bindValue=\"value\"\n            [disabled]=\"(currentFilterComponentType$ | async) === 'list'\"\n          >\n          </pry-select>\n        </div>\n        <button\n          class=\"a-btn a-btn--primary\"\n          (click)=\"submitFilter()\"\n          [disabled]=\"!(filter.name && filter.type && filter.attributes.length !== 0 && filter.operator)\"\n          type=\"submit\"\n        >\n          {{ '@pry.toolbox.manifest.validate' | i18n }}\n        </button>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.Overlay }, { type: i0.ViewContainerRef }, { type: i3$1.FilterFactoryService }, { type: i0.Injector }]; }, propDecorators: { label: [{
+                type: Input
+            }], templateSettings: [{
+                type: ViewChild,
+                args: ['settings', { read: TemplateRef }]
+            }], container: [{
+                type: ViewChild,
+                args: ['container', { read: ViewContainerRef }]
+            }] } });
+
+class LaunchTabComponent {
+    constructor(store) {
+        this.store = store;
+        this.label = true;
+    }
+    launchNewWindow() {
+        this.store.dispatch(DashboardActions.createTab());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: LaunchTabComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: LaunchTabComponent, selector: "pry-launch-tab", inputs: { label: "label" }, ngImport: i0, template: "<div [pryTooltip]=\"infoTooltip\" pryTooltipPosition=\"bottom\" aria-describedby=\"infoTooltip_launchTab\">\n  <button type=\"button\" class=\"a-btn a-btn--secondary -size-md\" (click)=\"launchNewWindow()\">\n    <ng-container *ngIf=\"label\"\n      ><span class=\"u-visually-hidden\">{{ '@pry.toolbox.launchIndication' | i18n }}</span\n      >{{ '@pry.toolbox.launch' | i18n }}</ng-container\n    >\n    <pry-icon iconSvg=\"launch\"></pry-icon>\n  </button>\n</div>\n\n<ng-template #infoTooltip>\n  <div class=\"m-tooltip\" role=\"tooltip\" id=\"infoTooltip_launchTab\">\n    <span class=\"m-tooltip__text\">Nouvelle page</span>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.PryTooltipDirective, selector: "[pryTooltip]", inputs: ["pryTooltip", "styleReversed", "pryTooltipContext", "pryTooltipPosition", "pryTooltipShowDelay"] }, { kind: "component", type: i3$1.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: i3$1.I18nPipe, name: "i18n" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: LaunchTabComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pry-launch-tab', template: "<div [pryTooltip]=\"infoTooltip\" pryTooltipPosition=\"bottom\" aria-describedby=\"infoTooltip_launchTab\">\n  <button type=\"button\" class=\"a-btn a-btn--secondary -size-md\" (click)=\"launchNewWindow()\">\n    <ng-container *ngIf=\"label\"\n      ><span class=\"u-visually-hidden\">{{ '@pry.toolbox.launchIndication' | i18n }}</span\n      >{{ '@pry.toolbox.launch' | i18n }}</ng-container\n    >\n    <pry-icon iconSvg=\"launch\"></pry-icon>\n  </button>\n</div>\n\n<ng-template #infoTooltip>\n  <div class=\"m-tooltip\" role=\"tooltip\" id=\"infoTooltip_launchTab\">\n    <span class=\"m-tooltip__text\">Nouvelle page</span>\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: function () { return [{ type: i1.Store }]; }, propDecorators: { label: [{
+                type: Input
+            }] } });
+
+class NamedQueryComponent {
+    constructor(store) {
+        this.store = store;
+        this.label = true;
+        this.displayCombo = false;
+        this.store.dispatch(DataSourceActions.load());
+        this.namedQueries$ = this.store.select(DashboardSelectors.availableNamedQueries);
+    }
+    toggle() {
+        this.displayCombo = !this.displayCombo;
+    }
+    dragStart($event, rs) {
+        if (!!$event && !!$event.dataTransfer && !$event.dataTransfer.types.includes(MIME_TYPE_RESULTSET)) {
+            $event.dataTransfer.setData(MIME_TYPE_RESULTSET, rs);
+        }
+    }
+    dragLeave($event) {
+        this.toggle();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: NamedQueryComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: NamedQueryComponent, selector: "pry-named-query", inputs: { label: "label" }, ngImport: i0, template: "<div class=\"o-named-query\">\n  <div class=\"combobox-container\" (dragleave)=\"dragLeave($event)\">\n    <div [pryTooltip]=\"infoTooltip\" pryTooltipPosition=\"bottom\" aria-describedby=\"infoTooltip_namedQuery\">\n      <button type=\"button\" class=\"a-btn a-btn--action\" (click)=\"toggle()\">\n        <pry-icon iconSvg=\"data_usage\"></pry-icon>\n        <ng-container *ngIf=\"label\">{{ '@pry.toolbox.resultSet' | i18n }}</ng-container>\n      </button>\n    </div>\n\n    <div class=\"combobox\" *ngIf=\"displayCombo\" (mouseleave)=\"toggle()\">\n      <ng-container *ngFor=\"let rs of namedQueries$ | async\">\n        <div draggable=\"true\" (dragstart)=\"dragStart($event, rs)\">\n          {{ rs | translateId: { type: 'datasource', output: 'name' } | async }}\n        </div>\n      </ng-container>\n    </div>\n  </div>\n\n  <ng-template #infoTooltip>\n    <div class=\"m-tooltip\" role=\"tooltip\" id=\"infoTooltip_namedQuery\">\n      <span class=\"m-tooltip__text\"> Recherches nomm\u00E9es </span>\n    </div>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.PryTooltipDirective, selector: "[pryTooltip]", inputs: ["pryTooltip", "styleReversed", "pryTooltipContext", "pryTooltipPosition", "pryTooltipShowDelay"] }, { kind: "component", type: i3$1.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.TranslateIdPipe, name: "translateId" }, { kind: "pipe", type: i3$1.I18nPipe, name: "i18n" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: NamedQueryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pry-named-query', template: "<div class=\"o-named-query\">\n  <div class=\"combobox-container\" (dragleave)=\"dragLeave($event)\">\n    <div [pryTooltip]=\"infoTooltip\" pryTooltipPosition=\"bottom\" aria-describedby=\"infoTooltip_namedQuery\">\n      <button type=\"button\" class=\"a-btn a-btn--action\" (click)=\"toggle()\">\n        <pry-icon iconSvg=\"data_usage\"></pry-icon>\n        <ng-container *ngIf=\"label\">{{ '@pry.toolbox.resultSet' | i18n }}</ng-container>\n      </button>\n    </div>\n\n    <div class=\"combobox\" *ngIf=\"displayCombo\" (mouseleave)=\"toggle()\">\n      <ng-container *ngFor=\"let rs of namedQueries$ | async\">\n        <div draggable=\"true\" (dragstart)=\"dragStart($event, rs)\">\n          {{ rs | translateId: { type: 'datasource', output: 'name' } | async }}\n        </div>\n      </ng-container>\n    </div>\n  </div>\n\n  <ng-template #infoTooltip>\n    <div class=\"m-tooltip\" role=\"tooltip\" id=\"infoTooltip_namedQuery\">\n      <span class=\"m-tooltip__text\"> Recherches nomm\u00E9es </span>\n    </div>\n  </ng-template>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i1.Store }]; }, propDecorators: { label: [{
+                type: Input
+            }] } });
+
+class SaveViewComponent extends SubscriptionnerDirective {
+    constructor(store, overlay, viewContainerRef) {
+        super();
+        this.store = store;
+        this.overlay = overlay;
+        this.viewContainerRef = viewContainerRef;
+        this.label = true;
+        this.mode = 'saveAs';
+        this.saveAsOpened = false;
+        this.visibility = { type: PryVisibilityType.PRIVATE };
+        this.type = LibraryTypes.ILLUSTRATION;
+        this.saveTypeOpened = false;
+        this.nbPages = 0;
+        this.initialNbPages = 0;
+        this.hasInitial = false;
+        this.ViewMode = ViewMode;
+        this.subscriptions.add(this.store.select(DashboardSelectors.presentation).subscribe((presentation) => {
+            this.currentManifest = presentation.current
+                ? JSON.parse(JSON.stringify(presentation.current))
+                : { name: '', image: '', description: '', cover: false };
+            this.initialNbPages = presentation.initial?.windows.length ?? 0;
+            this.hasInitial = !!presentation.initial;
+        }));
+        this.savePresentationActive$ = this.store.select(DashboardSelectors.savePresentationActive);
+        this.subscriptions.add(this.store
+            .select(DashboardSelectors.globalManifest)
+            .subscribe((manifest) => (this.nbPages = manifest.windows.length)));
+    }
+    toggleSaveAs() {
+        this.saveAsOpened = !this.saveAsOpened;
+        if (this.saveAsOpened) {
+            this.store.dispatch(DashboardActions.requestAllRoutes());
+            this.openSaveAs();
+            setTimeout(() => {
+                this.input.nativeElement.focus();
+            }, 10);
+        }
+        else {
+            this.overlayRefSaveAs?.dispose();
+            this.overlayRefSaveAs = undefined;
+            this.store.dispatch(ConfigActions.closeOverlay({ id: this.constructor.name }));
+            this.saveAs.nativeElement.focus();
+        }
+    }
+    save() {
+        this.store.dispatch(DashboardActions.requestAllRoutes());
+        // Give time for routes to be updated
+        setTimeout(() => {
+            let presentation = {
+                name: this.currentManifest.name,
+                id: v4(),
+                description: this.currentManifest.description,
+                image: this.currentManifest.image,
+                visibility: this.visibility,
+                cover: this.currentManifest?.cover ?? false
+            };
+            if (this.mode == 'directSave') {
+                if (this.currentManifest) {
+                    presentation.id = this.currentManifest.id;
+                    presentation.visibility = this.currentManifest.visibility;
+                }
+            }
+            this.store.dispatch(DashboardActions.saveManifest(presentation));
+            this.store.dispatch(DashboardActions.selectPresentation({
+                presentation: presentation,
+                viewMode: ViewMode.CATALOG
+            }));
+        }, 200);
+        this.closeModals();
+    }
+    closeModals() {
+        if (this.saveTypeOpened) {
+            this.toggleDirectSaveType();
+        }
+        if (this.saveAsOpened) {
+            this.toggleSaveAs();
+        }
+    }
+    changeVisibility($event) {
+        this.currentManifest.visibility = $event;
+    }
+    changeValue($event) {
+        this.currentManifest.name = $event;
+    }
+    changeDescr($event) {
+        this.currentManifest.description = $event;
+    }
+    openSaveAs() {
+        this.overlayRefSaveAs = this.overlay.create(new OverlayConfig({
+            hasBackdrop: true,
+            panelClass: ['o-modal-wrapper'],
+            backdropClass: 'backdrop'
+        }));
+        this.store.dispatch(ConfigActions.addingOverlay({ id: this.constructor.name }));
+        this.overlayRefSaveAs.backdropClick().subscribe((_) => this.toggleSaveAs());
+        this.overlayRefSaveAs.attach(new TemplatePortal(this.templateSaveAs, this.viewContainerRef));
+    }
+    isValid() {
+        return (this.currentManifest?.name && 0 < this.currentManifest?.name.length && this.currentManifest?.name.length <= 30);
+    }
+    toggleDirectSaveType() {
+        this.saveTypeOpened = !this.saveTypeOpened;
+        if (this.saveTypeOpened) {
+            this.store.dispatch(DashboardActions.requestAllRoutes());
+            this.overlayRefDirectSaveType = this.overlay.create(new OverlayConfig({
+                hasBackdrop: true,
+                panelClass: ['o-modal-wrapper'],
+                backdropClass: 'backdrop'
+            }));
+            this.store.dispatch(ConfigActions.addingOverlay({ id: this.constructor.name }));
+            this.overlayRefDirectSaveType.backdropClick().subscribe((_) => this.toggleDirectSaveType());
+            this.overlayRefDirectSaveType.attach(new TemplatePortal(this.templateDirectSaveType, this.viewContainerRef));
+            setTimeout(() => {
+                this.firstFocusdirective.nativeElement.focus();
+            }, 10);
+        }
+        else {
+            this.overlayRefDirectSaveType?.dispose();
+            this.overlayRefDirectSaveType = undefined;
+            this.store.dispatch(ConfigActions.closeOverlay({ id: this.constructor.name }));
+            this.directiveSave.nativeElement.focus();
+        }
+    }
+    get mustOpenModal() {
+        return this.hasInitial && this.nbPages !== this.initialNbPages;
+    }
+    directSave() {
+        if (this.mustOpenModal) {
+            this.toggleDirectSaveType();
+        }
+        else {
+            this.save();
+        }
+    }
+    restore() {
+        this.store.dispatch(DashboardActions.restoreInitialManifest());
+        this.closeModals();
+    }
+    focusCrossElement() {
+        this.cross.nativeElement.focus();
+    }
+    focusValidation() {
+        if (!this.currentManifest?.name) {
+            this.cancel.nativeElement.focus();
+        }
+        this.confirm.nativeElement.focus();
+    }
+    rename() {
+        this.toggleSaveAs();
+    }
+    disableNextStep() {
+        if (!this.currentManifest?.name) {
+            this.focusCrossElement();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: SaveViewComponent, 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.1.6", type: SaveViewComponent, selector: "pry-save-view", inputs: { label: "label", mode: "mode" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "saveAs", first: true, predicate: ["saveAs"], descendants: true }, { propertyName: "directiveSave", first: true, predicate: ["directiveSave"], descendants: true }, { propertyName: "firstFocusdirective", first: true, predicate: ["firstFocusdirective"], descendants: true }, { propertyName: "cross", first: true, predicate: ["cross"], descendants: true }, { propertyName: "confirm", first: true, predicate: ["confirm"], descendants: true }, { propertyName: "cancel", first: true, predicate: ["cancel"], descendants: true }, { propertyName: "templateSaveAs", first: true, predicate: ["templateSaveAs"], descendants: true, read: TemplateRef }, { propertyName: "templateDirectSaveType", first: true, predicate: ["templateDirectSaveType"], descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"mode === 'directSave'\">\n  <div\n    [pryTooltip]=\"infoTooltipDirectSave\"\n    pryTooltipPosition=\"bottom\"\n    [attr.aria-expanded]=\"saveTypeOpened\"\n    aria-controls=\"directiveSave\"\n    aria-describedby=\"infoTooltip_directSave\"\n  >\n    <button\n      type=\"button\"\n      #directiveSave\n      class=\"a-btn a-btn--secondary -size-md\"\n      (click)=\"directSave()\"\n      [disabled]=\"!(savePresentationActive$ | async)\"\n    >\n      <ng-container *ngIf=\"label\">{{ '@pry.toolbox.save' | i18n }} ({{ nbPages }})</ng-container>\n    </button>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"mode === 'saveAs'\">\n  <div\n    class=\"save-manifest-container\"\n    [pryTooltip]=\"infoTooltipSaveAs\"\n    pryTooltipPosition=\"bottom\"\n    [attr.aria-expanded]=\"saveAsOpened\"\n    aria-controls=\"saveModal\"\n    aria-describedby=\"infoTooltip_saveAs\"\n  >\n    <button\n      type=\"button\"\n      #saveAs\n      class=\"a-btn a-btn--secondary -size-md\"\n      (click)=\"toggleSaveAs()\"\n      aria-haspopup=\"dialog\"\n    >\n      <ng-container *ngIf=\"label\">{{ '@pry.toolbox.saveView' | i18n }} ({{ nbPages }})</ng-container>\n    </button>\n  </div>\n</ng-container>\n\n<ng-template #templateSaveAs>\n  <div\n    class=\"o-modal\"\n    (click)=\"$event.stopPropagation()\"\n    id=\"saveModal\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-labelledby=\"dialog_saveModal\"\n    (keydown.escape)=\"closeModals()\"\n  >\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">{{ '@pry.toolbox.rename' | i18n }}</h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" #cross (keydown.shift.tab)=\"focusValidation()\" (click)=\"toggleSaveAs()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <pry-stepper #stepper>\n      <pry-step>\n        <h4 class=\"m-stepper-item__title\" *stepTitle>{{ '@pry.presentation.add.info' | i18n }}</h4>\n        <form>\n          <div class=\"m-form-label-field\">\n            <label class=\"a-label\" id=\"label-name\" for=\"input-name\">{{ '@pry.toolbox.manifest.name' | i18n }}</label>\n            <input\n              type=\"text\"\n              id=\"input-name\"\n              name=\"input-name\"\n              class=\"a-form-field\"\n              placeholder=\"{{ '@pry.toolbox.manifest.name' | i18n }}\"\n              [ngModel]=\"currentManifest!.name\"\n              (ngModelChange)=\"changeValue($event)\"\n              aria-labelledby=\"label-name\"\n              maxlength=\"30\"\n              #input\n            />\n          </div>\n          <div class=\"m-form-label-field\">\n            <label class=\"a-label\" id=\"label-descr\" for=\"input-descr\">{{\n              '@pry.toolbox.manifest.description' | i18n\n            }}</label>\n            <input\n              type=\"text\"\n              id=\"input-descr\"\n              name=\"input-descr\"\n              class=\"a-form-field\"\n              placeholder=\"{{ '@pry.toolbox.manifest.description' | i18n }}\"\n              [ngModel]=\"currentManifest!.description\"\n              (ngModelChange)=\"changeDescr($event)\"\n              aria-labelledby=\"label-name\"\n              maxlength=\"200\"\n            />\n          </div>\n          <div class=\"m-form-label-field\">\n            <label class=\"a-label\" for=\"presentation_image\">{{ '@pry.presentation.form.image' | i18n }}</label>\n            <div class=\"o-file-input\">\n              <pry-select-image\n                id=\"presentation_image\"\n                (changed)=\"currentManifest!.image = $event\"\n                [iconUrl]=\"currentManifest!.image\"\n                [mode]=\"type\"\n              ></pry-select-image>\n              <pry-checkbox [(ngModel)]=\"currentManifest!.cover\" name=\"cover\">\n                {{ '@pry.presentation.form.cover' | i18n }}\n              </pry-checkbox>\n            </div>\n          </div>\n\n          <div class=\"m-btn-group\">\n            <button\n              type=\"button\"\n              class=\"a-btn a-btn--secondary\"\n              #cancel\n              (click)=\"toggleSaveAs()\"\n              (keydown.tab)=\"disableNextStep()\"\n            >\n              {{ '@pry.toolbox.manifest.close' | i18n }}\n            </button>\n            <button\n              type=\"submit\"\n              class=\"a-btn a-btn--primary\"\n              (click)=\"stepper.next()\"\n              [disabled]=\"!isValid()\"\n              (keydown.tab)=\"focusCrossElement()\"\n            >\n              {{ '@pry.action.next' | i18n }}\n            </button>\n          </div>\n        </form>\n      </pry-step>\n      <pry-step>\n        <h4 class=\"m-stepper-item__title\" *stepTitle>{{ '@pry.restitution.broadcast' | i18n }}</h4>\n        <pry-share [(ngModel)]=\"visibility\" (ngModelChange)=\"changeVisibility($event)\"></pry-share>\n        <div class=\"m-btn-group\">\n          <button type=\"button\" class=\"a-btn a-btn--secondary\" (click)=\"stepper.prev()\">\n            {{ '@pry.action.back' | i18n }}\n          </button>\n          <button\n            type=\"submit\"\n            class=\"a-btn a-btn--primary\"\n            #confirm\n            (click)=\"save()\"\n            (keydown.tab)=\"focusCrossElement()\"\n          >\n            {{ '@pry.restitution.broadcast' | i18n }}\n          </button>\n        </div>\n      </pry-step>\n    </pry-stepper>\n  </div>\n</ng-template>\n\n<ng-template #infoTooltipSaveAs>\n  <div class=\"m-tooltip\" role=\"tooltip\" id=\"infoTooltip_saveAs\">\n    <span class=\"m-tooltip__text\">{{ '@pry.toolbox.rename' | i18n }}</span>\n  </div>\n</ng-template>\n<ng-template #infoTooltipDirectSave>\n  <div class=\"m-tooltip\" role=\"tooltip\" id=\"infoTooltip_directSave\">\n    <span class=\"m-tooltip__text\">{{ '@pry.toolbox.save' | i18n }}</span>\n  </div>\n</ng-template>\n\n<ng-template #templateDirectSaveType>\n  <div\n    class=\"o-modal\"\n    (click)=\"$event.stopPropagation()\"\n    id=\"directiveSave\"\n    role=\"dialog\"\n    aria-labelledby=\"dialog_title\"\n    (keydown.escape)=\"closeModals()\"\n  >\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title_\">{{ '@pry.toolbox.save' | i18n }}</h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" #firstFocusdirective (click)=\"toggleDirectSaveType()\">\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      <h3>{{ '@pry.snack.pagesChanged' | i18n }}</h3>\n    </div>\n    <div class=\"m-btn-group\">\n      <button class=\"a-btn a-btn--primary\" (click)=\"save()\">\n        {{ '@pry.toolbox.save' | i18n }}\n      </button>\n      <button class=\"a-btn a-btn--primary\" (click)=\"rename()\">\n        {{ '@pry.toolbox.rename' | i18n }}\n      </button>\n      <button class=\"a-btn a-btn--primary\" (click)=\"restore()\" (keydown.tab)=\"closeModals()\">\n        {{ '@pry.toolbox.restore' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.PryTooltipDirective, selector: "[pryTooltip]", inputs: ["pryTooltip", "styleReversed", "pryTooltipContext", "pryTooltipPosition", "pryTooltipShowDelay"] }, { kind: "component", type: i3$1.PrySelectImageComponent, selector: "pry-select-image", inputs: ["iconUrl", "size", "mode"], outputs: ["toggled", "changed"] }, { kind: "component", type: i3$1.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i6.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle"] }, { kind: "component", type: i7$1.PryStepperComponent, selector: "pry-stepper", inputs: ["isConsultMode"], outputs: ["lastStepCompleted"] }, { kind: "component", type: i7$1.PryStepComponent, selector: "pry-step", inputs: ["setActiveState"] }, { kind: "directive", type: i7$1.PryStepTitleDirective, selector: "[stepTitle]" }, { kind: "component", type: i3$1.PryShareComponent, selector: "pry-share", inputs: ["value", "labelProperty", "valueProperty", "users$"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.I18nPipe, name: "i18n" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: SaveViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pry-save-view', template: "<ng-container *ngIf=\"mode === 'directSave'\">\n  <div\n    [pryTooltip]=\"infoTooltipDirectSave\"\n    pryTooltipPosition=\"bottom\"\n    [attr.aria-expanded]=\"saveTypeOpened\"\n    aria-controls=\"directiveSave\"\n    aria-describedby=\"infoTooltip_directSave\"\n  >\n    <button\n      type=\"button\"\n      #directiveSave\n      class=\"a-btn a-btn--secondary -size-md\"\n      (click)=\"directSave()\"\n      [disabled]=\"!(savePresentationActive$ | async)\"\n    >\n      <ng-container *ngIf=\"label\">{{ '@pry.toolbox.save' | i18n }} ({{ nbPages }})</ng-container>\n    </button>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"mode === 'saveAs'\">\n  <div\n    class=\"save-manifest-container\"\n    [pryTooltip]=\"infoTooltipSaveAs\"\n    pryTooltipPosition=\"bottom\"\n    [attr.aria-expanded]=\"saveAsOpened\"\n    aria-controls=\"saveModal\"\n    aria-describedby=\"infoTooltip_saveAs\"\n  >\n    <button\n      type=\"button\"\n      #saveAs\n      class=\"a-btn a-btn--secondary -size-md\"\n      (click)=\"toggleSaveAs()\"\n      aria-haspopup=\"dialog\"\n    >\n      <ng-container *ngIf=\"label\">{{ '@pry.toolbox.saveView' | i18n }} ({{ nbPages }})</ng-container>\n    </button>\n  </div>\n</ng-container>\n\n<ng-template #templateSaveAs>\n  <div\n    class=\"o-modal\"\n    (click)=\"$event.stopPropagation()\"\n    id=\"saveModal\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-labelledby=\"dialog_saveModal\"\n    (keydown.escape)=\"closeModals()\"\n  >\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">{{ '@pry.toolbox.rename' | i18n }}</h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" #cross (keydown.shift.tab)=\"focusValidation()\" (click)=\"toggleSaveAs()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <pry-stepper #stepper>\n      <pry-step>\n        <h4 class=\"m-stepper-item__title\" *stepTitle>{{ '@pry.presentation.add.info' | i18n }}</h4>\n        <form>\n          <div class=\"m-form-label-field\">\n            <label class=\"a-label\" id=\"label-name\" for=\"input-name\">{{ '@pry.toolbox.manifest.name' | i18n }}</label>\n            <input\n              type=\"text\"\n              id=\"input-name\"\n              name=\"input-name\"\n              class=\"a-form-field\"\n              placeholder=\"{{ '@pry.toolbox.manifest.name' | i18n }}\"\n              [ngModel]=\"currentManifest!.name\"\n              (ngModelChange)=\"changeValue($event)\"\n              aria-labelledby=\"label-name\"\n              maxlength=\"30\"\n              #input\n            />\n          </div>\n          <div class=\"m-form-label-field\">\n            <label class=\"a-label\" id=\"label-descr\" for=\"input-descr\">{{\n              '@pry.toolbox.manifest.description' | i18n\n            }}</label>\n            <input\n              type=\"text\"\n              id=\"input-descr\"\n              name=\"input-descr\"\n              class=\"a-form-field\"\n              placeholder=\"{{ '@pry.toolbox.manifest.description' | i18n }}\"\n              [ngModel]=\"currentManifest!.description\"\n              (ngModelChange)=\"changeDescr($event)\"\n              aria-labelledby=\"label-name\"\n              maxlength=\"200\"\n            />\n          </div>\n          <div class=\"m-form-label-field\">\n            <label class=\"a-label\" for=\"presentation_image\">{{ '@pry.presentation.form.image' | i18n }}</label>\n            <div class=\"o-file-input\">\n              <pry-select-image\n                id=\"presentation_image\"\n                (changed)=\"currentManifest!.image = $event\"\n                [iconUrl]=\"currentManifest!.image\"\n                [mode]=\"type\"\n              ></pry-select-image>\n              <pry-checkbox [(ngModel)]=\"currentManifest!.cover\" name=\"cover\">\n                {{ '@pry.presentation.form.cover' | i18n }}\n              </pry-checkbox>\n            </div>\n          </div>\n\n          <div class=\"m-btn-group\">\n            <button\n              type=\"button\"\n              class=\"a-btn a-btn--secondary\"\n              #cancel\n              (click)=\"toggleSaveAs()\"\n              (keydown.tab)=\"disableNextStep()\"\n            >\n              {{ '@pry.toolbox.manifest.close' | i18n }}\n            </button>\n            <button\n              type=\"submit\"\n              class=\"a-btn a-btn--primary\"\n              (click)=\"stepper.next()\"\n              [disabled]=\"!isValid()\"\n              (keydown.tab)=\"focusCrossElement()\"\n            >\n              {{ '@pry.action.next' | i18n }}\n            </button>\n          </div>\n        </form>\n      </pry-step>\n      <pry-step>\n        <h4 class=\"m-stepper-item__title\" *stepTitle>{{ '@pry.restitution.broadcast' | i18n }}</h4>\n        <pry-share [(ngModel)]=\"visibility\" (ngModelChange)=\"changeVisibility($event)\"></pry-share>\n        <div class=\"m-btn-group\">\n          <button type=\"button\" class=\"a-btn a-btn--secondary\" (click)=\"stepper.prev()\">\n            {{ '@pry.action.back' | i18n }}\n          </button>\n          <button\n            type=\"submit\"\n            class=\"a-btn a-btn--primary\"\n            #confirm\n            (click)=\"save()\"\n            (keydown.tab)=\"focusCrossElement()\"\n          >\n            {{ '@pry.restitution.broadcast' | i18n }}\n          </button>\n        </div>\n      </pry-step>\n    </pry-stepper>\n  </div>\n</ng-template>\n\n<ng-template #infoTooltipSaveAs>\n  <div class=\"m-tooltip\" role=\"tooltip\" id=\"infoTooltip_saveAs\">\n    <span class=\"m-tooltip__text\">{{ '@pry.toolbox.rename' | i18n }}</span>\n  </div>\n</ng-template>\n<ng-template #infoTooltipDirectSave>\n  <div class=\"m-tooltip\" role=\"tooltip\" id=\"infoTooltip_directSave\">\n    <span class=\"m-tooltip__text\">{{ '@pry.toolbox.save' | i18n }}</span>\n  </div>\n</ng-template>\n\n<ng-template #templateDirectSaveType>\n  <div\n    class=\"o-modal\"\n    (click)=\"$event.stopPropagation()\"\n    id=\"directiveSave\"\n    role=\"dialog\"\n    aria-labelledby=\"dialog_title\"\n    (keydown.escape)=\"closeModals()\"\n  >\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title_\">{{ '@pry.toolbox.save' | i18n }}</h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" #firstFocusdirective (click)=\"toggleDirectSaveType()\">\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      <h3>{{ '@pry.snack.pagesChanged' | i18n }}</h3>\n    </div>\n    <div class=\"m-btn-group\">\n      <button class=\"a-btn a-btn--primary\" (click)=\"save()\">\n        {{ '@pry.toolbox.save' | i18n }}\n      </button>\n      <button class=\"a-btn a-btn--primary\" (click)=\"rename()\">\n        {{ '@pry.toolbox.rename' | i18n }}\n      </button>\n      <button class=\"a-btn a-btn--primary\" (click)=\"restore()\" (keydown.tab)=\"closeModals()\">\n        {{ '@pry.toolbox.restore' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.Overlay }, { type: i0.ViewContainerRef }]; }, propDecorators: { label: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], input: [{
+                type: ViewChild,
+                args: ['input']
+            }], saveAs: [{
+                type: ViewChild,
+                args: ['saveAs']
+            }], directiveSave: [{
+                type: ViewChild,
+                args: ['directiveSave']
+            }], firstFocusdirective: [{
+                type: ViewChild,
+                args: ['firstFocusdirective']
+            }], cross: [{
+                type: ViewChild,
+                args: ['cross']
+            }], confirm: [{
+                type: ViewChild,
+                args: ['confirm']
+            }], cancel: [{
+                type: ViewChild,
+                args: ['cancel']
+            }], templateSaveAs: [{
+                type: ViewChild,
+                args: ['templateSaveAs', { read: TemplateRef }]
+            }], templateDirectSaveType: [{
+                type: ViewChild,
+                args: ['templateDirectSaveType', { read: TemplateRef }]
+            }] } });
+
+class SelectGridLayoutComponent extends SubscriptionnerDirective {
+    constructor(store, overlay, viewContainerRef) {
+        super();
+        this.store = store;
+        this.overlay = overlay;
+        this.viewContainerRef = viewContainerRef;
+        this.label = true;
+        this.chosenLayout = DashboardGridLayout.MANUAL;
+        this.canDispatch = false;
+        this.modalOpened = false;
+        this.subscriptions.add(this.store.select(DashboardSelectors.gridLayout).subscribe((layout) => (this.chosenLayout = layout)));
+        this.availableLayouts$ = this.store.select(DashboardSelectors.windowManifest).pipe(map$1((manifest) => WidgetPlacementUtils.getLayouts()
+            .filter((layout) => {
+            return WidgetPlacementUtils.placesForLayout(layout.key) >= (manifest.widgets ?? []).length;
+        })
+            .map((layout) => ({
+            value: layout.key,
+            translation: '@pry.toolbox.layout.' + layout.key,
+            image: layout.image
+        }))));
+        setTimeout(() => {
+            this.canDispatch = true;
+        }, 100);
+    }
+    changeLayout(layout) {
+        this.chosenLayout = layout;
+    }
+    toggleGridChoiceModal() {
+        this.modalOpened = !this.modalOpened;
+        if (this.modalOpened) {
+            this.openWithTemplate();
+        }
+        else {
+            this.overlayRef?.dispose();
+            this.store.dispatch(ConfigActions.closeOverlay({ id: this.constructor.name }));
+            this.openModal.nativeElement.focus();
+        }
+    }
+    openWithTemplate() {
+        if (!this.overlayRef) {
+            this.modalOpened = !this.modalOpened;
+            this.overlayRef = this.overlay.create(new OverlayConfig({
+                hasBackdrop: true,
+                panelClass: ['o-modal-wrapper', 'o-select-grid-layout-modal-wrapper'],
+                backdropClass: 'backdrop'
+            }));
+            this.store.dispatch(ConfigActions.addingOverlay({ id: this.constructor.name }));
+            this.overlayRef.backdropClick().subscribe((_) => this.toggleGridChoiceModal());
+            this.overlayRef.attach(new TemplatePortal(this.template, this.viewContainerRef));
+            setTimeout(() => {
+                this.firstButton.nativeElement.focus();
+            }, 10);
+        }
+        else {
+            this.overlayRef.dispose();
+            this.overlayRef = undefined;
+            this.store.dispatch(ConfigActions.closeOverlay({ id: this.constructor.name }));
+            this.openModal.nativeElement.focus();
+            this.modalOpened = !this.modalOpened;
+        }
+    }
+    validate() {
+        if (this.canDispatch) {
+            this.store.dispatch(DashboardActions.setGridLayout({ layout: this.chosenLayout }));
+        }
+        this.toggleGridChoiceModal();
+    }
+    focusCrossElement() {
+        this.cross.nativeElement.focus();
+    }
+    focusValidation() {
+        this.confirm.nativeElement.focus();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: SelectGridLayoutComponent, 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.1.6", type: SelectGridLayoutComponent, selector: "pry-select-grid-layout", inputs: { label: "label" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, read: TemplateRef }, { propertyName: "firstButton", first: true, predicate: ["firstButton"], descendants: true }, { propertyName: "openModal", first: true, predicate: ["openModal"], descendants: true }, { propertyName: "cross", first: true, predicate: ["cross"], descendants: true }, { propertyName: "confirm", first: true, predicate: ["confirm"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<pry-select-grid-layout-css></pry-select-grid-layout-css>\n<div [attr.aria-expanded]=\"modalOpened\" aria-controls=\"grid-layout\">\n  <button type=\"button\" #openModal class=\"a-btn a-btn--secondary -size-md\" (click)=\"toggleGridChoiceModal()\">\n    <ng-container *ngIf=\"label\">\n      {{ '@pry.toolbox.chooseGrid' | i18n }}\n    </ng-container>\n  </button>\n</div>\n<ng-template #template>\n  <div\n    class=\"o-modal\"\n    (click)=\"$event.stopPropagation()\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-labelledby=\"dialog_title\"\n    id=\"grid-layout\"\n    (keydown.escape)=\"toggleGridChoiceModal()\"\n  >\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">{{ '@pry.toolbox.chooseGrid' | i18n }}</h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button\n          class=\"a-btn a-btn--icon-only\"\n          #cross\n          (keydown.shift.tab)=\"focusValidation()\"\n          (click)=\"toggleGridChoiceModal()\"\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=\"o-select-grid-layout-wrapper\">\n      <ul class=\"o-select-grid-layout\">\n        <li *ngFor=\"let layout of availableLayouts$ | async\" class=\"o-select-grid-layout__item\">\n          <button\n            type=\"button\"\n            #firstButton\n            class=\"a-btn\"\n            [attr.aria-pressed]=\"chosenLayout === layout.value\"\n            [class.selected]=\"chosenLayout === layout.value\"\n            (click)=\"changeLayout(layout.value)\"\n          >\n            <div class=\"u-txt-center\">\n              <img [src]=\"layout.image\" />\n              <strong>{{ layout.translation | i18n }}</strong>\n            </div>\n            <p class=\"a-p\">\n              {{ layout.translation + '_detailled' | i18n }}\n            </p>\n          </button>\n        </li>\n      </ul>\n    </div>\n    <div class=\"m-btn-group -space-evenly\">\n      <button (click)=\"toggleGridChoiceModal()\" class=\"a-btn a-btn--secondary\">\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n      <button (click)=\"validate()\" class=\"a-btn a-btn--primary\" #confirm (keydown.tab)=\"focusCrossElement()\">\n        {{ '@pry.toolbox.manifest.validated' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: PrySelectGridLayoutCssComponent, selector: "pry-select-grid-layout-css" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.I18nPipe, name: "i18n" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: SelectGridLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pry-select-grid-layout', template: "<pry-select-grid-layout-css></pry-select-grid-layout-css>\n<div [attr.aria-expanded]=\"modalOpened\" aria-controls=\"grid-layout\">\n  <button type=\"button\" #openModal class=\"a-btn a-btn--secondary -size-md\" (click)=\"toggleGridChoiceModal()\">\n    <ng-container *ngIf=\"label\">\n      {{ '@pry.toolbox.chooseGrid' | i18n }}\n    </ng-container>\n  </button>\n</div>\n<ng-template #template>\n  <div\n    class=\"o-modal\"\n    (click)=\"$event.stopPropagation()\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-labelledby=\"dialog_title\"\n    id=\"grid-layout\"\n    (keydown.escape)=\"toggleGridChoiceModal()\"\n  >\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">{{ '@pry.toolbox.chooseGrid' | i18n }}</h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button\n          class=\"a-btn a-btn--icon-only\"\n          #cross\n          (keydown.shift.tab)=\"focusValidation()\"\n          (click)=\"toggleGridChoiceModal()\"\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=\"o-select-grid-layout-wrapper\">\n      <ul class=\"o-select-grid-layout\">\n        <li *ngFor=\"let layout of availableLayouts$ | async\" class=\"o-select-grid-layout__item\">\n          <button\n            type=\"button\"\n            #firstButton\n            class=\"a-btn\"\n            [attr.aria-pressed]=\"chosenLayout === layout.value\"\n            [class.selected]=\"chosenLayout === layout.value\"\n            (click)=\"changeLayout(layout.value)\"\n          >\n            <div class=\"u-txt-center\">\n              <img [src]=\"layout.image\" />\n              <strong>{{ layout.translation | i18n }}</strong>\n            </div>\n            <p class=\"a-p\">\n              {{ layout.translation + '_detailled' | i18n }}\n            </p>\n          </button>\n        </li>\n      </ul>\n    </div>\n    <div class=\"m-btn-group -space-evenly\">\n      <button (click)=\"toggleGridChoiceModal()\" class=\"a-btn a-btn--secondary\">\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n      <button (click)=\"validate()\" class=\"a-btn a-btn--primary\" #confirm (keydown.tab)=\"focusCrossElement()\">\n        {{ '@pry.toolbox.manifest.validated' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.Overlay }, { type: i0.ViewContainerRef }]; }, propDecorators: { label: [{
+                type: Input
+            }], template: [{
+                type: ViewChild,
+                args: ['template', { read: TemplateRef }]
+            }], firstButton: [{
+                type: ViewChild,
+                args: ['firstButton']
+            }], openModal: [{
+                type: ViewChild,
+                args: ['openModal']
+            }], cross: [{
+                type: ViewChild,
+                args: ['cross']
+            }], confirm: [{
+                type: ViewChild,
+                args: ['confirm']
+            }] } });
+
+class ToolboxComponent {
+    constructor(store) {
+        this.labels = true;
+        this.hasInitialPresentation$ = store.select(DashboardSelectors.presentation).pipe(map((pres) => !!pres.initial));
+        this.isManualMode$ = store
+            .select(DashboardSelectors.windowManifest)
+            .pipe(map((pres) => (pres.grid?.layout ?? DashboardGridLayout.MANUAL) === DashboardGridLayout.MANUAL));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: ToolboxComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: ToolboxComponent, selector: "pry-toolbox", inputs: { labels: "labels" }, ngImport: i0, template: "<ul class=\"m-actions-list\" #input>\n  <li class=\"m-actions-list__item\" *ngIf=\"isManualMode$ | async\">\n    <pry-edit-mode-toggle\n      *pryAccess=\"{ module: 'dashboard', page: 'toolbox', action: 'edit_dashboard' }\"\n      [label]=\"labels\"\n    ></pry-edit-mode-toggle>\n  </li>\n  <li class=\"m-actions-list__item\">\n    <pry-filter-settings\n      *pryAccess=\"{ module: 'dashboard', page: 'toolbox', action: 'default_size' }\"\n      [style.z-index]=\"2\"\n      [label]=\"labels\"\n    ></pry-filter-settings>\n  </li>\n  <li class=\"m-actions-list__item\">\n    <pry-launch-tab\n      *pryAccess=\"{ module: 'dashboard', page: 'toolbox', action: 'new_tab' }\"\n      [label]=\"labels\"\n    ></pry-launch-tab>\n  </li>\n  <li class=\"m-actions-list__item\">\n    <pry-drag-widgets\n      *pryAccess=\"{ module: 'dashboard', page: 'toolbox', action: 'drag_widget' }\"\n      [labels]=\"labels\"\n    ></pry-drag-widgets>\n  </li>\n  <li class=\"m-actions-list__item\">\n    <pry-save-view\n      *pryAccess=\"{ module: 'dashboard', page: 'toolbox', action: 'save_view' }\"\n      [style.z-index]=\"2\"\n      [label]=\"labels\"\n    ></pry-save-view>\n  </li>\n  <li class=\"m-actions-list__item\" *ngIf=\"hasInitialPresentation$ | async\">\n    <pry-save-view\n      *pryAccess=\"{ module: 'dashboard', page: 'toolbox', action: 'save_view' }\"\n      [style.z-index]=\"2\"\n      [label]=\"labels\"\n      mode=\"directSave\"\n    ></pry-save-view>\n  </li>\n  <li class=\"m-actions-list__item\">\n    <pry-clear-view\n      *pryAccess=\"{ module: 'dashboard', page: 'toolbox', action: 'clear_view' }\"\n      [style.z-index]=\"2\"\n      [label]=\"labels\"\n    ></pry-clear-view>\n  </li>\n  <li class=\"m-actions-list__item is-screen-size-select\">\n    <pry-select-grid-layout\n      *pryAccess=\"{ module: 'dashboard', page: 'toolbox', action: 'default_size' }\"\n      [style.z-index]=\"2\"\n      [label]=\"labels\"\n    ></pry-select-grid-layout>\n  </li>\n</ul>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.PryAccessDirective, selector: "[pryAccess]", inputs: ["pryAccess"] }, { kind: "component", type: ClearViewComponent, selector: "pry-clear-view", inputs: ["label"] }, { kind: "component", type: DragWidgetsComponent, selector: "pry-drag-widgets", inputs: ["labels"] }, { kind: "component", type: EditModeToggleComponent, selector: "pry-edit-mode-toggle", inputs: ["label"] }, { kind: "component", type: LaunchTabComponent, selector: "pry-launch-tab", inputs: ["label"] }, { kind: "component", type: SaveViewComponent, selector: "pry-save-view", inputs: ["label", "mode"] }, { kind: "component", type: SelectGridLayoutComponent, selector: "pry-select-grid-layout", inputs: ["label"] }, { kind: "component", type: PryFilterSettingsComponent, selector: "pry-filter-settings", inputs: ["label"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: ToolboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pry-toolbox', template: "<ul class=\"m-actions-list\" #input>\n  <li class=\"m-actions-list__item\" *ngIf=\"isManualMode$ | async\">\n    <pry-edit-mode-toggle\n      *pryAccess=\"{ module: 'dashboard', page: 'toolbox', action: 'edit_dashboard' }\"\n      [label]=\"labels\"\n    ></pry-edit-mode-toggle>\n  </li>\n  <li class=\"m-actions-list__item\">\n    <pry-filter-settings\n      *pryAccess=\"{ module: 'dashboard', page: 'toolbox', action: 'default_size' }\"\n      [style.z-index]=\"2\"\n      [label]=\"labels\"\n    ></pry-filter-settings>\n  </li>\n  <li class=\"m-actions-list__item\">\n    <pry-launch-tab\n      *pryAccess=\"{ module: 'dashboard', page: 'toolbox', action: 'new_tab' }\"\n      [label]=\"labels\"\n    ></pry-launch-tab>\n  </li>\n  <li class=\"m-actions-list__item\">\n    <pry-drag-widgets\n      *pryAccess=\"{ module: 'dashboard', page: 'toolbox', action: 'drag_widget' }\"\n      [labels]=\"labels\"\n    ></pry-drag-widgets>\n  </li>\n  <li class=\"m-actions-list__item\">\n    <pry-save-view\n      *pryAccess=\"{ module: 'dashboard', page: 'toolbox', action: 'save_view' }\"\n      [style.z-index]=\"2\"\n      [label]=\"labels\"\n    ></pry-save-view>\n  </li>\n  <li class=\"m-actions-list__item\" *ngIf=\"hasInitialPresentation$ | async\">\n    <pry-save-view\n      *pryAccess=\"{ module: 'dashboard', page: 'toolbox', action: 'save_view' }\"\n      [style.z-index]=\"2\"\n      [label]=\"labels\"\n      mode=\"directSave\"\n    ></pry-save-view>\n  </li>\n  <li class=\"m-actions-list__item\">\n    <pry-clear-view\n      *pryAccess=\"{ module: 'dashboard', page: 'toolbox', action: 'clear_view' }\"\n      [style.z-index]=\"2\"\n      [label]=\"labels\"\n    ></pry-clear-view>\n  </li>\n  <li class=\"m-actions-list__item is-screen-size-select\">\n    <pry-select-grid-layout\n      *pryAccess=\"{ module: 'dashboard', page: 'toolbox', action: 'default_size' }\"\n      [style.z-index]=\"2\"\n      [label]=\"labels\"\n    ></pry-select-grid-layout>\n  </li>\n</ul>\n" }]
+        }], ctorParameters: function () { return [{ type: i1.Store }]; }, propDecorators: { labels: [{
+                type: Input
+            }] } });
+
+const components = [
+    ClearViewComponent,
+    DragWidgetsComponent,
+    EditModeToggleComponent,
+    LaunchTabComponent,
+    NamedQueryComponent,
+    SaveViewComponent,
+    SelectGridLayoutComponent,
+    ToolboxComponent,
+    PrySelectGridLayoutCssComponent,
+    PryFilterSettingsComponent
+];
+class PryToolboxModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PryToolboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.6", ngImport: i0, type: PryToolboxModule, declarations: [ClearViewComponent,
+            DragWidgetsComponent,
+            EditModeToggleComponent,
+            LaunchTabComponent,
+            NamedQueryComponent,
+            SaveViewComponent,
+            SelectGridLayoutComponent,
+            ToolboxComponent,
+            PrySelectGridLayoutCssComponent,
+            PryFilterSettingsComponent], imports: [CommonModule,
+            FormsModule,
+            OverlayModule,
+            PryOverlayModule,
+            PryCoreModule,
+            PryDashboardModule,
+            PrySelectModule,
+            PryIconModule,
+            PryCheckboxModule,
+            PryToggleModule,
+            PryStepperModule,
+            PryShareModule,
+            PryI18nModule,
+            CdkDropList,
+            CdkDrag,
+            CdkDragHandle], exports: [ClearViewComponent,
+            DragWidgetsComponent,
+            EditModeToggleComponent,
+            LaunchTabComponent,
+            NamedQueryComponent,
+            SaveViewComponent,
+            SelectGridLayoutComponent,
+            ToolboxComponent,
+            PrySelectGridLayoutCssComponent,
+            PryFilterSettingsComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PryToolboxModule, imports: [CommonModule,
+            FormsModule,
+            OverlayModule,
+            PryOverlayModule,
+            PryCoreModule,
+            PryDashboardModule,
+            PrySelectModule,
+            PryIconModule,
+            PryCheckboxModule,
+            PryToggleModule,
+            PryStepperModule,
+            PryShareModule,
+            PryI18nModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PryToolboxModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...components],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        OverlayModule,
+                        PryOverlayModule,
+                        PryCoreModule,
+                        PryDashboardModule,
+                        PrySelectModule,
+                        PryIconModule,
+                        PryCheckboxModule,
+                        PryToggleModule,
+                        PryStepperModule,
+                        PryShareModule,
+                        PryI18nModule,
+                        CdkDropList,
+                        CdkDrag,
+                        CdkDragHandle
+                    ],
+                    exports: [...components]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ClearViewComponent, DragWidgetsComponent, EditModeToggleComponent, FilterSteps, LaunchTabComponent, NamedQueryComponent, PryFilterSettingsComponent, PrySelectGridLayoutCssComponent, PryToolboxModule, SaveViewComponent, SelectGridLayoutComponent, ToolboxComponent };
+//# sourceMappingURL=provoly-dashboard-toolbox.mjs.map