@provoly/dashboard 0.13.6 → 0.13.8

package/fesm2022/provoly-dashboard-restitution.mjs

@@ -1,7 +1,7 @@
 import * as i3 from '@angular/common';
 import { CommonModule, DatePipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, ViewEncapsulation, EventEmitter, Input, Output, TemplateRef, ElementRef, ViewChild, NgModule } from '@angular/core';
+import { Component, ViewEncapsulation, EventEmitter, Input, Output, NgModule } from '@angular/core';
 import * as i4 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i1 from '@provoly/dashboard';
@@ -14,11 +14,9 @@ import { PrySinceDateModule } from '@provoly/dashboard/components/sinceDate';
 import * as i5 from '@provoly/dashboard/components/stepper';
 import { PryStepperModule } from '@provoly/dashboard/components/stepper';
 import { PrySearchModule } from '@provoly/dashboard/search';
-import * as i2 from '@angular/cdk/overlay';
-import { OverlayConfig } from '@angular/cdk/overlay';
-import { TemplatePortal } from '@angular/cdk/portal';
 import { Subject, map, BehaviorSubject, combineLatest } from 'rxjs';
 import * as i1$1 from '@ngrx/store';
+import * as i2 from '@angular/cdk/overlay';
 import { v4 } from 'uuid';
 
 class PryCatalogCssComponent {
@@ -200,7 +198,7 @@ class PryRestitutionComponent extends SubscriptionnerDirective {
         this.restitutionCreated.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PryRestitutionComponent, deps: [{ token: i1.ToolboxManifestService }, { token: i1$1.Store }, { token: i1.ToolboxMenuService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: PryRestitutionComponent, selector: "pry-restitution", inputs: { selectedRestitution: "selectedRestitution", edit: "edit", isDataSourceSelected: "isDataSourceSelected", bindId: "bindId" }, outputs: { restitutionCreated: "restitutionCreated" }, usesInheritance: true, ngImport: i0, template: "<pry-restitution-css></pry-restitution-css>\n<div class=\"o-restitution\">\n  <h3 class=\"a-h2 o-restitution__title\">\n    {{ (consultMode ? '@pry.restitution.consult_title' : '@pry.restitution.create_title') | i18n }}\n  </h3>\n  <pry-stepper #stepper [isConsultMode]=\"consultMode || edit\" (lastStepCompleted)=\"lastStepCompleted()\">\n    <pry-step>\n      <h4 class=\"m-stepper-item__title\" *stepTitle>{{ '@pry.restitution.configure' | i18n }}</h4>\n      <div>\n        <div class=\"m-form-label-field\">\n          <label for=\"restitution\" class=\"a-label\">{{ '@pry.restitution.restitution_type' | i18n }}</label>\n          <pry-select\n            id=\"restitution\"\n            class=\"a-pry-select\"\n            [itemsAsOption]=\"true\"\n            [items]=\"types$ | async\"\n            [labelTranslate]=\"true\"\n            [(ngModel)]=\"form.selectedWidget\"\n            [disabled]=\"consultMode\"\n            bindIcon=\"icon\"\n            bindLabel=\"label\"\n            bindValue=\"type\"\n          >\n          </pry-select>\n        </div>\n        <div *ngIf=\"form.selectedWidget !== ''\">\n          <div class=\"m-form-label-field\">\n            <label for=\"graphTitle\" class=\"a-label\">{{ '@pry.restitution.graph_title' | i18n }}</label>\n            <input\n              name=\"title\"\n              id=\"graphTitle\"\n              class=\"a-form-field\"\n              [(ngModel)]=\"form.title\"\n              type=\"text\"\n              [disabled]=\"consultMode\"\n              maxlength=\"30\"\n              ngDefaultControl\n            />\n          </div>\n          <div class=\"m-form-label-field\">\n            <label for=\"description\" class=\"a-label\">{{ '@pry.restitution.description' | i18n }}</label>\n            <textarea\n              name=\"description\"\n              id=\"description\"\n              class=\"a-form-field\"\n              [(ngModel)]=\"form.description\"\n              style=\"resize: none\"\n              [disabled]=\"consultMode\"\n              maxlength=\"255\"\n              ngDefaultControl\n            >\n            </textarea>\n          </div>\n          <div class=\"m-form-label-field -width-full\">\n            <label class=\"a-label\">{{ '@pry.presentation.form.image' | i18n }}</label>\n            <div class=\"o-file-input\">\n              <pry-select-image (changed)=\"image = $event\" [iconUrl]=\"image\" [mode]=\"type\"></pry-select-image>\n              <pry-checkbox [(ngModel)]=\"form.cover\" name=\"cover\"> {{ '@pry.restitution.cover' | i18n }}</pry-checkbox>\n            </div>\n          </div>\n          <div class=\"m-btn-group -space-evenly actions\">\n            <button (click)=\"cancel(stepper)\" type=\"button\" class=\"a-btn a-btn--secondary\">\n              {{ '@pry.restitution.close' | i18n }}\n            </button>\n            <button (click)=\"goNext(stepper)\" [disabled]=\"isSubmitDisabled()\" class=\"a-btn a-btn--primary\">\n              {{ '@pry.restitution.validate' | i18n }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </pry-step>\n    <pry-step>\n      <h4 class=\"m-stepper-item__title\" *stepTitle>{{ '@pry.restitution.dataSource' | i18n }}</h4>\n      <pry-datasource-selector\n        (cancel)=\"prev(stepper)\"\n        (validated)=\"submit(stepper)\"\n        (datasourcesChanged)=\"datasourcesChanged($event)\"\n        [datasourceIds]=\"form.selectedDataSource\"\n      ></pry-datasource-selector>\n    </pry-step>\n    <pry-step>\n      <h4 class=\"m-stepper-item__title\" *stepTitle>{{ '@pry.restitution.visualize' | i18n }}</h4>\n      <div class=\"widget-instanciator\">\n        <pry-widget-instanciator\n          [standalone]=\"true\"\n          [staticManifest]=\"customManifest\"\n          [open$]=\"openSettings$\"\n          (manifestModified)=\"updateManifest($event)\"\n        ></pry-widget-instanciator>\n      </div>\n      <div class=\"m-btn-group -space-evenly actions\" *ngIf=\"!consultMode; else consult\">\n        <button (click)=\"prev(stepper)\" type=\"button\" class=\"a-btn a-btn--secondary\">\n          {{ '@pry.restitution.close' | i18n }}\n        </button>\n        <button (click)=\"goNext(stepper)\" type=\"button\" class=\"a-btn a-btn--primary\">\n          {{ '@pry.restitution.validate' | i18n }}\n        </button>\n      </div>\n    </pry-step>\n    <pry-step>\n      <h4 class=\"m-stepper-item__title\" *stepTitle>{{ '@pry.restitution.broadcast' | i18n }}</h4>\n      <div class=\"\">\n        <h3>{{ '@pry.restitution.access' | i18n }}</h3>\n        {{ '@pry.restitution.choice' | i18n }}\n        <ul>\n          <li>\n            {{ '@pry.restitution.public' | i18n }}\n          </li>\n        </ul>\n        {{ '@pry.restitution.or' | i18n }}\n        <ul>\n          <li>\n            {{ '@pry.restitution.private' | i18n }}\n          </li>\n        </ul>\n      </div>\n      <pry-share\n        [(ngModel)]=\"visibility\"\n        [users$]=\"users$\"\n        labelProperty=\"name\"\n        valueProperty=\"id\"\n        [disabled]=\"consultMode\"\n      ></pry-share>\n      <div class=\"m-btn-group -space-evenly actions\" *ngIf=\"!consultMode; else consult\">\n        <button (click)=\"prev(stepper)\" type=\"button\" class=\"a-btn a-btn--secondary\">\n          {{ '@pry.restitution.close' | i18n }}\n        </button>\n        <button\n          (click)=\"goNext(stepper)\"\n          [disabled]=\"noDataSourceSelected() || isSubmitDisabled()\"\n          type=\"button\"\n          class=\"a-btn a-btn--primary\"\n        >\n          {{ '@pry.restitution.broadcast' | i18n }}\n        </button>\n      </div>\n    </pry-step>\n  </pry-stepper>\n</div>\n\n<ng-template #consult>\n  <div class=\"m-btn-group -space-evenly actions\">\n    <button (click)=\"prev(stepper)\" type=\"button\" class=\"a-btn a-btn--secondary\">\n      {{ '@pry.restitution.close' | i18n }}\n    </button>\n    <button (click)=\"goNext(stepper)\" type=\"button\" class=\"a-btn a-btn--primary\">\n      {{ '@pry.restitution.next' | i18n }}\n    </button>\n  </div>\n</ng-template>\n<ng-template #noDatasource>\n  <p class=\"search-home__container-search\">{{ '@pry.restitution.noDataSource' | i18n }}</p>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.PrySelectImageComponent, selector: "pry-select-image", inputs: ["iconUrl", "size", "mode"], outputs: ["toggled", "changed"] }, { 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.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: "component", type: i5.PryStepperComponent, selector: "pry-stepper", inputs: ["isConsultMode"], outputs: ["lastStepCompleted"] }, { kind: "component", type: i5.PryStepComponent, selector: "pry-step", inputs: ["setActiveState"] }, { kind: "directive", type: i5.PryStepTitleDirective, selector: "[stepTitle]" }, { kind: "component", type: i1.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: i1.WidgetInstanciatorComponent, selector: "pry-widget-instanciator", inputs: ["widgetIndex", "staticManifest", "standalone", "open$"], outputs: ["manifestModified", "widgetInstance"] }, { kind: "component", type: i1.DatasourceSelectorComponent, selector: "pry-datasource-selector", inputs: ["manifest", "datasourceIds"], outputs: ["cancel", "validated", "previousTab", "nextTab", "datasourcesChanged"] }, { kind: "component", type: i1.PryShareComponent, selector: "pry-share", inputs: ["value", "labelProperty", "valueProperty", "users$"] }, { kind: "component", type: i6.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle"] }, { kind: "component", type: PryCatalogCssComponent, selector: "pry-restitution-css" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: PryRestitutionComponent, selector: "pry-restitution", inputs: { selectedRestitution: "selectedRestitution", edit: "edit", isDataSourceSelected: "isDataSourceSelected", bindId: "bindId" }, outputs: { restitutionCreated: "restitutionCreated" }, usesInheritance: true, ngImport: i0, template: "<pry-restitution-css></pry-restitution-css>\n<div class=\"o-restitution\">\n  <h3 class=\"a-h2 o-restitution__title\">\n    {{ (consultMode ? '@pry.restitution.consult_title' : '@pry.restitution.create_title') | i18n }}\n  </h3>\n  <pry-stepper #stepper [isConsultMode]=\"consultMode || edit\" (lastStepCompleted)=\"lastStepCompleted()\">\n    <pry-step>\n      <h4 class=\"m-stepper-item__title\" *stepTitle>{{ '@pry.restitution.configure' | i18n }}</h4>\n      <div>\n        <div class=\"m-form-label-field\">\n          <label for=\"restitution\" class=\"a-label\">{{ '@pry.restitution.restitution_type' | i18n }}</label>\n          <pry-select\n            id=\"restitution\"\n            class=\"a-pry-select\"\n            [itemsAsOption]=\"true\"\n            [items]=\"types$ | async\"\n            [labelTranslate]=\"true\"\n            [(ngModel)]=\"form.selectedWidget\"\n            [disabled]=\"consultMode\"\n            bindIcon=\"icon\"\n            bindLabel=\"label\"\n            bindValue=\"type\"\n          >\n          </pry-select>\n        </div>\n        <div *ngIf=\"form.selectedWidget !== ''\">\n          <div class=\"m-form-label-field\">\n            <label for=\"graphTitle\" class=\"a-label\">{{ '@pry.restitution.graph_title' | i18n }}</label>\n            <input\n              name=\"title\"\n              id=\"graphTitle\"\n              class=\"a-form-field\"\n              [(ngModel)]=\"form.title\"\n              type=\"text\"\n              [disabled]=\"consultMode\"\n              maxlength=\"30\"\n              ngDefaultControl\n            />\n          </div>\n          <div class=\"m-form-label-field\">\n            <label for=\"description\" class=\"a-label\">{{ '@pry.restitution.description' | i18n }}</label>\n            <textarea\n              name=\"description\"\n              id=\"description\"\n              class=\"a-form-field\"\n              [(ngModel)]=\"form.description\"\n              style=\"resize: none\"\n              [disabled]=\"consultMode\"\n              maxlength=\"255\"\n              ngDefaultControl\n            >\n            </textarea>\n          </div>\n          <div class=\"m-form-label-field -width-full\">\n            <label class=\"a-label\">{{ '@pry.presentation.form.image' | i18n }}</label>\n            <div class=\"o-file-input\">\n              <pry-select-image (changed)=\"image = $event\" [iconUrl]=\"image\" [mode]=\"type\"></pry-select-image>\n              <pry-checkbox [(ngModel)]=\"form.cover\" name=\"cover\"> {{ '@pry.restitution.cover' | i18n }}</pry-checkbox>\n            </div>\n          </div>\n          <div class=\"m-btn-group -space-evenly actions\">\n            <button (click)=\"cancel(stepper)\" type=\"button\" class=\"a-btn a-btn--secondary\">\n              {{ '@pry.restitution.close' | i18n }}\n            </button>\n            <button (click)=\"goNext(stepper)\" [disabled]=\"isSubmitDisabled()\" class=\"a-btn a-btn--primary\">\n              {{ '@pry.restitution.validate' | i18n }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </pry-step>\n    <pry-step>\n      <h4 class=\"m-stepper-item__title\" *stepTitle>{{ '@pry.restitution.dataSource' | i18n }}</h4>\n      <pry-datasource-selector\n        (cancel)=\"prev(stepper)\"\n        (validated)=\"submit(stepper)\"\n        (datasourcesChanged)=\"datasourcesChanged($event)\"\n        [datasourceIds]=\"form.selectedDataSource\"\n      ></pry-datasource-selector>\n    </pry-step>\n    <pry-step>\n      <h4 class=\"m-stepper-item__title\" *stepTitle>{{ '@pry.restitution.visualize' | i18n }}</h4>\n      <div class=\"widget-instanciator\">\n        <pry-widget-instanciator\n          [standalone]=\"true\"\n          [staticManifest]=\"customManifest\"\n          [open$]=\"openSettings$\"\n          (manifestModified)=\"updateManifest($event)\"\n        ></pry-widget-instanciator>\n      </div>\n      <div class=\"m-btn-group -space-evenly actions\" *ngIf=\"!consultMode; else consult\">\n        <button (click)=\"prev(stepper)\" type=\"button\" class=\"a-btn a-btn--secondary\">\n          {{ '@pry.restitution.close' | i18n }}\n        </button>\n        <button (click)=\"goNext(stepper)\" type=\"button\" class=\"a-btn a-btn--primary\">\n          {{ '@pry.restitution.validate' | i18n }}\n        </button>\n      </div>\n    </pry-step>\n    <pry-step>\n      <h4 class=\"m-stepper-item__title\" *stepTitle>{{ '@pry.restitution.broadcast' | i18n }}</h4>\n      <div class=\"\">\n        <h3>{{ '@pry.restitution.access' | i18n }}</h3>\n        {{ '@pry.restitution.choice' | i18n }}\n        <ul>\n          <li>\n            {{ '@pry.restitution.public' | i18n }}\n          </li>\n        </ul>\n        {{ '@pry.restitution.or' | i18n }}\n        <ul>\n          <li>\n            {{ '@pry.restitution.private' | i18n }}\n          </li>\n        </ul>\n      </div>\n      <pry-share\n        [(ngModel)]=\"visibility\"\n        [users$]=\"users$\"\n        labelProperty=\"name\"\n        valueProperty=\"id\"\n        [disabled]=\"consultMode\"\n      ></pry-share>\n      <div class=\"m-btn-group -space-evenly actions\" *ngIf=\"!consultMode; else consult\">\n        <button (click)=\"prev(stepper)\" type=\"button\" class=\"a-btn a-btn--secondary\">\n          {{ '@pry.restitution.close' | i18n }}\n        </button>\n        <button\n          (click)=\"goNext(stepper)\"\n          [disabled]=\"noDataSourceSelected() || isSubmitDisabled()\"\n          type=\"button\"\n          class=\"a-btn a-btn--primary\"\n        >\n          {{ '@pry.restitution.broadcast' | i18n }}\n        </button>\n      </div>\n    </pry-step>\n  </pry-stepper>\n</div>\n\n<ng-template #consult>\n  <div class=\"m-btn-group -space-evenly actions\">\n    <button (click)=\"prev(stepper)\" type=\"button\" class=\"a-btn a-btn--secondary\">\n      {{ '@pry.restitution.close' | i18n }}\n    </button>\n    <button (click)=\"goNext(stepper)\" type=\"button\" class=\"a-btn a-btn--primary\">\n      {{ '@pry.restitution.next' | i18n }}\n    </button>\n  </div>\n</ng-template>\n<ng-template #noDatasource>\n  <p class=\"search-home__container-search\">{{ '@pry.restitution.noDataSource' | i18n }}</p>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.PrySelectImageComponent, selector: "pry-select-image", inputs: ["iconUrl", "size", "mode"], outputs: ["toggled", "changed"] }, { 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.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: "component", type: i5.PryStepperComponent, selector: "pry-stepper", inputs: ["isConsultMode"], outputs: ["lastStepCompleted"] }, { kind: "component", type: i5.PryStepComponent, selector: "pry-step", inputs: ["setActiveState"] }, { kind: "directive", type: i5.PryStepTitleDirective, selector: "[stepTitle]" }, { kind: "component", type: i1.PrySelectComponent, selector: "pry-select", inputs: ["labelTranslate", "baseTranslate", "translationFn", "translationFnArgs", "clearable", "multiple", "multipleClearRight", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "items", "itemsAsOption", "bindData", "bindValue", "bindLabel", "bindIcon", "iconSize", "templateLabel", "templateOption", "autocomplete"] }, { kind: "component", type: i1.WidgetInstanciatorComponent, selector: "pry-widget-instanciator", inputs: ["widgetIndex", "staticManifest", "standalone", "open$"], outputs: ["manifestModified", "widgetInstance"] }, { kind: "component", type: i1.DatasourceSelectorComponent, selector: "pry-datasource-selector", inputs: ["manifest", "datasourceIds"], outputs: ["cancel", "validated", "previousTab", "nextTab", "datasourcesChanged"] }, { kind: "component", type: i1.PryShareComponent, selector: "pry-share", inputs: ["value", "labelProperty", "valueProperty", "users$"] }, { kind: "component", type: i6.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle"] }, { kind: "component", type: PryCatalogCssComponent, selector: "pry-restitution-css" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PryRestitutionComponent, decorators: [{
             type: Component,
@@ -223,8 +221,6 @@ class PryRestitutionCatalogComponent {
         this.overlay = overlay;
         this.viewContainerRef = viewContainerRef;
         this.search$ = new BehaviorSubject('');
-        this.modalOpen = false;
-        this.isOverlayOpen = false;
         this.mode = ViewMode;
         this.selectedMode = ViewMode.CATALOG;
         this.selectedRestitution = null;
@@ -247,75 +243,23 @@ class PryRestitutionCatalogComponent {
         this.selectedRestitution = null;
         this.selectMode(this.mode.CATALOG);
     }
-    deleteRestitution(restitution) {
-        this.store.dispatch(ConfigActions.deleteRestitution({ id: restitution.id }));
-        this.confirmRemoveRef?.dispose();
-        this.confirmRemoveRef = undefined;
-        this.store.dispatch(ConfigActions.closeOverlay({ id: this.constructor.name + '-modal' }));
+    deleteRestitution(id) {
+        this.store.dispatch(ConfigActions.confirmRestitutionDeletion({ id }));
     }
     editRestitution(restitution) {
         this.selectedRestitution = restitution;
         this.selectMode(ViewMode.EDITION);
     }
-    toggleRemoveConfirm($event, restitution) {
-        if (!this.confirmRemoveRef) {
-            this.restitution = restitution;
-            this.confirmRemoveRef = this.overlay.create(new OverlayConfig({
-                hasBackdrop: true,
-                panelClass: ['o-modal-wrapper'],
-                backdropClass: 'backdrop'
-            }));
-            this.store.dispatch(ConfigActions.addingOverlay({ id: this.constructor.name + '-modal' }));
-            this.confirmRemoveRef?.backdropClick().subscribe(() => this.toggleRemoveConfirm($event, restitution));
-            this.confirmRemoveRef?.attach(new TemplatePortal(this.templateModal, this.viewContainerRef));
-            setTimeout(() => {
-                this.cancelRemove.nativeElement.focus();
-            }, 10);
-        }
-        else {
-            this.confirmRemoveRef.dispose();
-            this.confirmRemoveRef = undefined;
-            this.store.dispatch(ConfigActions.closeOverlay({ id: this.constructor.name + '-modal' }));
-            this.openModal?.nativeElement.focus();
-        }
-    }
-    cancelRemoveConfirm() {
-        this.confirmRemoveRef?.dispose();
-        this.confirmRemoveRef = undefined;
-        this.store.dispatch(ConfigActions.closeOverlay({ id: this.constructor.name + '-modal' }));
-    }
-    focusCrossElement() {
-        if (this.cross) {
-            this.cross?.nativeElement.focus();
-        }
-    }
-    focusValidation() {
-        this.confirm.nativeElement.focus();
+    focusElement(element) {
+        element.focus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PryRestitutionCatalogComponent, deps: [{ token: i1$1.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: PryRestitutionCatalogComponent, selector: "pry-restitution-catalog", inputs: { modalOpen: "modalOpen" }, viewQueries: [{ propertyName: "templateModal", first: true, predicate: ["templateModal"], descendants: true, read: TemplateRef }, { propertyName: "openModal", first: true, predicate: ["openModal"], descendants: true, read: ElementRef }, { propertyName: "cancelRemove", first: true, predicate: ["cancelRemove"], descendants: true }, { propertyName: "cross", first: true, predicate: ["cross"], descendants: true }, { propertyName: "confirm", first: true, predicate: ["confirm"], descendants: true }], ngImport: i0, template: "<pry-restitution-css></pry-restitution-css>\n<div class=\"o-manifest-layout o-restitution-catalog\">\n  <ng-template [ngIf]=\"selectedMode === mode.CATALOG\">\n    <div class=\"o-manifest-layout__toolbox\">\n      <button\n        type=\"button\"\n        (click)=\"selectMode(mode.CREATION)\"\n        [pryTooltip]=\"infoTooltipCreateRestitution\"\n        class=\"a-btn a-btn--primary\"\n        *pryAccess=\"{ module: 'dashboard', page: 'restitution', action: 'create' }\"\n      >\n        {{ '@pry.restitution.create_title' | i18n }}\n      </button>\n      <div>\n        <div class=\"o-catalog__search\">\n          <label id=\"catalog-search-label\" for=\"catalog-search\" class=\"u-visually-hidden\">\n            <span>{{ '@pry.toolbox.catalog.filter.name' | i18n }}</span>\n          </label>\n          <input\n            id=\"catalog-search\"\n            type=\"text\"\n            class=\"a-form-field\"\n            [placeholder]=\"'@pry.restitution.search' | i18n\"\n            [ngModel]=\"search$ | async\"\n            (ngModelChange)=\"this.search$.next($event)\"\n          />\n\n          <pry-icon iconSvg=\"search\" [width]=\"17\" [height]=\"17\"></pry-icon>\n        </div>\n      </div>\n    </div>\n    <div class=\"o-manifest-layout__content\">\n      <h1 class=\"a-h1\">{{ '@pry.restitution.catalog' | i18n }}</h1>\n\n      <div class=\"o-presentation-wrapper\">\n        <ul class=\"o-presentation\">\n          <li class=\"o-presentation__item\" *ngFor=\"let restitution of filteredRestitution$ | async\">\n            <div class=\"o-presentation__item__header\">\n              <ng-container *ngIf=\"restitution.visibility?.type === PryVisibilityType.PRIVATE\">\n                <pry-icon\n                  iconSvg=\"private\"\n                  [pryTooltip]=\"private\"\n                  class=\"is-private\"\n                  [height]=\"17\"\n                  [width]=\"17\"\n                ></pry-icon>\n              </ng-container>\n              <img\n                alt=\"\"\n                [height]=\"restitution.cover ? 600 : 128\"\n                [width]=\"restitution.cover ? 600 : 128\"\n                [class.is-full-width]=\"restitution.cover\"\n                [src]=\"restitution.image | getSecuredImage : [600, 600] | async\"\n                class=\"pointer\"\n                (click)=\"selectRestitution(restitution)\"\n                [pryTooltip]=\"infoTooltipEye\"\n              />\n            </div>\n\n            <div class=\"o-presentation__item__txt\">\n              <h3 class=\"a-h3\">{{ restitution.name }}</h3>\n              <p class=\"a-p -date\">{{ restitution.modificationDate | sinceDate }}</p>\n            </div>\n\n            <div class=\"o-presentation__item__footer\">\n              <ul class=\"m-actions-list\">\n                <li>\n                  <button\n                    type=\"button\"\n                    class=\"a-btn a-btn icon-only\"\n                    (click)=\"selectRestitution(restitution)\"\n                    *pryAccess=\"{ module: 'dashboard', page: 'restitution', action: 'consult' }\"\n                  >\n                    <pry-icon iconSvg=\"eye\" [pryTooltip]=\"infoTooltipEye\"></pry-icon>\n                  </button>\n                </li>\n                <li>\n                  <button\n                    type=\"button\"\n                    class=\"a-btn a-btn&#45;&#45;icon-only\"\n                    (click)=\"editRestitution(restitution)\"\n                    [disabled]=\"!restitution.owner\"\n                    *pryAccess=\"{ module: 'dashboard', page: 'restitution', action: 'edit' }\"\n                  >\n                    <pry-icon iconSvg=\"edit\" [pryTooltip]=\"infoTooltipUpdate\"></pry-icon>\n                  </button>\n                </li>\n                <li>\n                  <button\n                    type=\"button\"\n                    class=\"a-btn a-btn&#45;&#45;icon-only\"\n                    (click)=\"toggleRemoveConfirm($event, restitution)\"\n                    [disabled]=\"!restitution.owner\"\n                    *pryAccess=\"{ module: 'dashboard', page: 'restitution', action: 'delete' }\"\n                  >\n                    <pry-icon iconSvg=\"delete\" [pryTooltip]=\"infoTooltipDelete\"></pry-icon>\n                  </button>\n                </li>\n              </ul>\n            </div>\n          </li>\n        </ul>\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-template [ngIf]=\"selectedMode === mode.CONSULT\">\n    <div class=\"o-manifest-layout__toolbox\">\n      <button type=\"button\" (click)=\"selectMode(mode.CATALOG)\" class=\"a-btn a-btn--primary\">\n        {{ '@pry.restitution.backToCatalog' | i18n }}\n      </button>\n    </div>\n    <div class=\"o-manifest-layout__content\">\n      <pry-restitution\n        [selectedRestitution]=\"selectedRestitution\"\n        [edit]=\"false\"\n        (restitutionCreated)=\"closeRestitution($event)\"\n        class=\"restitution\"\n      ></pry-restitution>\n    </div>\n  </ng-template>\n  <ng-template [ngIf]=\"selectedMode === mode.CREATION\">\n    <div class=\"o-manifest-layout__toolbox\">\n      <button type=\"button\" (click)=\"selectMode(mode.CATALOG)\" class=\"a-btn a-btn--primary\">\n        {{ '@pry.restitution.backToCatalog' | i18n }}\n      </button>\n    </div>\n    <div class=\"o-manifest-layout__content\">\n      <pry-restitution (restitutionCreated)=\"closeRestitution($event)\" class=\"restitution\"></pry-restitution>\n    </div>\n  </ng-template>\n  <ng-template [ngIf]=\"selectedMode === mode.EDITION\">\n    <div class=\"o-manifest-layout__toolbox\">\n      <button type=\"button\" (click)=\"selectMode(mode.CATALOG)\" class=\"a-btn a-btn--primary\">\n        {{ '@pry.restitution.backToCatalog' | i18n }}\n      </button>\n    </div>\n    <div class=\"o-manifest-layout__content\">\n      <pry-restitution\n        (restitutionCreated)=\"closeRestitution($event)\"\n        [selectedRestitution]=\"selectedRestitution\"\n        class=\"restitution\"\n      ></pry-restitution>\n    </div>\n  </ng-template>\n</div>\n\n<ng-template #templateModal>\n  <div\n    class=\"o-modal\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-labelledby=\"dialog confirm delete presentation\"\n    tabindex=\"0\"\n    #deleteModal\n    *ngIf=\"restitution\"\n    (keydown.escape)=\"toggleRemoveConfirm($event, restitution)\"\n  >\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\">\n          {{ '@pry.widget.modalTitle' | i18n }}\n        </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)=\"cancelRemoveConfirm()\"\n        >\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <div class=\"m-btn-group\">\n      <button type=\"button\" #cancelRemove (click)=\"cancelRemoveConfirm()\" class=\"a-btn a-btn--secondary\">\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n      <button\n        type=\"submit\"\n        class=\"a-btn a-btn--primary\"\n        #confirm\n        (click)=\"deleteRestitution(restitution)\"\n        (keydown.tab)=\"focusCrossElement()\"\n      >\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #infoTooltipEye>\n  <div class=\"card-title-tooltip__wrapper\">\n    <span class=\"card-title-tooltip__name\">{{ '@pry.restitution.consult' | i18n }}</span>\n  </div>\n</ng-template>\n\n<ng-template #infoTooltipUpdate>\n  <div class=\"card-title-tooltip__wrapper\">\n    <span class=\"card-title-tooltip__name\">{{ '@pry.restitution.update' | i18n }}</span>\n  </div>\n</ng-template>\n\n<ng-template #infoTooltipDelete>\n  <div class=\"card-title-tooltip__wrapper\">\n    <span class=\"card-title-tooltip__name\">{{ '@pry.restitution.delete' | i18n }}</span>\n  </div>\n</ng-template>\n\n<ng-template #infoTooltipCreateRestitution>\n  <div class=\"card-title-tooltip__wrapper\">\n    <span class=\"card-title-tooltip__name\">{{ '@pry.restitution.create_title' | i18n }}</span>\n  </div>\n</ng-template>\n<ng-template #private>\n  <div class=\"m-tooltip\" role=\"tooltip\">\n    <span class=\"m-tooltip__text\">{{ '@pry.restitution.lock' | i18n }}</span>\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: i1.PryAccessDirective, selector: "[pryAccess]", inputs: ["pryAccess"] }, { kind: "component", type: i1.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.PryTooltipDirective, selector: "[pryTooltip]", inputs: ["pryTooltip", "styleReversed", "pryTooltipContext", "pryTooltipPosition", "pryTooltipShowDelay"] }, { kind: "component", type: PryRestitutionComponent, selector: "pry-restitution", inputs: ["selectedRestitution", "edit", "isDataSourceSelected", "bindId"], outputs: ["restitutionCreated"] }, { kind: "component", type: PryCatalogCssComponent, selector: "pry-restitution-css" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.GetSecuredImagePipe, name: "getSecuredImage" }, { kind: "pipe", type: i1.I18nPipe, name: "i18n" }, { kind: "pipe", type: i8.PrySinceDatePipe, name: "sinceDate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: PryRestitutionCatalogComponent, selector: "pry-restitution-catalog", ngImport: i0, template: "<pry-restitution-css></pry-restitution-css>\n<div class=\"o-manifest-layout o-restitution-catalog\">\n  <ng-template [ngIf]=\"selectedMode === mode.CATALOG\">\n    <div class=\"o-manifest-layout__toolbox\">\n      <button\n        type=\"button\"\n        (click)=\"selectMode(mode.CREATION)\"\n        [pryTooltip]=\"infoTooltipCreateRestitution\"\n        class=\"a-btn a-btn--primary\"\n        *pryAccess=\"{ module: 'dashboard', page: 'restitution', action: 'create' }\"\n      >\n        {{ '@pry.restitution.create_title' | i18n }}\n      </button>\n      <div>\n        <div class=\"o-catalog__search\">\n          <label id=\"catalog-search-label\" for=\"catalog-search\" class=\"u-visually-hidden\">\n            <span>{{ '@pry.toolbox.catalog.filter.name' | i18n }}</span>\n          </label>\n          <input\n            id=\"catalog-search\"\n            type=\"text\"\n            class=\"a-form-field\"\n            [placeholder]=\"'@pry.restitution.search' | i18n\"\n            [ngModel]=\"search$ | async\"\n            (ngModelChange)=\"this.search$.next($event)\"\n          />\n\n          <pry-icon iconSvg=\"search\" [width]=\"17\" [height]=\"17\"></pry-icon>\n        </div>\n      </div>\n    </div>\n    <div class=\"o-manifest-layout__content\">\n      <h1 class=\"a-h1\">{{ '@pry.restitution.catalog' | i18n }}</h1>\n\n      <div class=\"o-presentation-wrapper\">\n        <ul class=\"o-presentation\">\n          <li class=\"o-presentation__item\" *ngFor=\"let restitution of filteredRestitution$ | async\">\n            <div class=\"o-presentation__item__header\">\n              <ng-container *ngIf=\"restitution.visibility?.type === PryVisibilityType.PRIVATE\">\n                <pry-icon\n                  iconSvg=\"private\"\n                  [pryTooltip]=\"private\"\n                  class=\"is-private\"\n                  [height]=\"17\"\n                  [width]=\"17\"\n                ></pry-icon>\n              </ng-container>\n              <img\n                alt=\"\"\n                [height]=\"restitution.cover ? 600 : 128\"\n                [width]=\"restitution.cover ? 600 : 128\"\n                [class.is-full-width]=\"restitution.cover\"\n                [src]=\"restitution.image | getSecuredImage : [600, 600] | async\"\n                class=\"pointer\"\n                (click)=\"selectRestitution(restitution)\"\n                [pryTooltip]=\"infoTooltipEye\"\n              />\n            </div>\n\n            <div class=\"o-presentation__item__txt\">\n              <h3 class=\"a-h3\">{{ restitution.name }}</h3>\n              <p class=\"a-p -date\">{{ restitution.modificationDate | sinceDate }}</p>\n            </div>\n\n            <div class=\"o-presentation__item__footer\">\n              <ul class=\"m-actions-list\">\n                <li>\n                  <button\n                    type=\"button\"\n                    class=\"a-btn a-btn icon-only\"\n                    (click)=\"selectRestitution(restitution)\"\n                    *pryAccess=\"{ module: 'dashboard', page: 'restitution', action: 'consult' }\"\n                  >\n                    <pry-icon iconSvg=\"eye\" [pryTooltip]=\"infoTooltipEye\"></pry-icon>\n                  </button>\n                </li>\n                <li>\n                  <button\n                    type=\"button\"\n                    class=\"a-btn a-btn&#45;&#45;icon-only\"\n                    (click)=\"editRestitution(restitution)\"\n                    [disabled]=\"!restitution.owner\"\n                    *pryAccess=\"{ module: 'dashboard', page: 'restitution', action: 'edit' }\"\n                  >\n                    <pry-icon iconSvg=\"edit\" [pryTooltip]=\"infoTooltipUpdate\"></pry-icon>\n                  </button>\n                </li>\n                <li>\n                  <button\n                    type=\"button\"\n                    class=\"a-btn a-btn&#45;&#45;icon-only\"\n                    (click)=\"deleteRestitution(restitution.id)\"\n                    [disabled]=\"!restitution.owner\"\n                    *pryAccess=\"{ module: 'dashboard', page: 'restitution', action: 'delete' }\"\n                  >\n                    <pry-icon iconSvg=\"delete\" [pryTooltip]=\"infoTooltipDelete\"></pry-icon>\n                  </button>\n                </li>\n              </ul>\n            </div>\n          </li>\n        </ul>\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-template [ngIf]=\"selectedMode === mode.CONSULT\">\n    <div class=\"o-manifest-layout__toolbox\">\n      <button type=\"button\" (click)=\"selectMode(mode.CATALOG)\" class=\"a-btn a-btn--primary\">\n        {{ '@pry.restitution.backToCatalog' | i18n }}\n      </button>\n    </div>\n    <div class=\"o-manifest-layout__content\">\n      <pry-restitution\n        [selectedRestitution]=\"selectedRestitution\"\n        [edit]=\"false\"\n        (restitutionCreated)=\"closeRestitution($event)\"\n        class=\"restitution\"\n      ></pry-restitution>\n    </div>\n  </ng-template>\n  <ng-template [ngIf]=\"selectedMode === mode.CREATION\">\n    <div class=\"o-manifest-layout__toolbox\">\n      <button type=\"button\" (click)=\"selectMode(mode.CATALOG)\" class=\"a-btn a-btn--primary\">\n        {{ '@pry.restitution.backToCatalog' | i18n }}\n      </button>\n    </div>\n    <div class=\"o-manifest-layout__content\">\n      <pry-restitution (restitutionCreated)=\"closeRestitution($event)\" class=\"restitution\"></pry-restitution>\n    </div>\n  </ng-template>\n  <ng-template [ngIf]=\"selectedMode === mode.EDITION\">\n    <div class=\"o-manifest-layout__toolbox\">\n      <button type=\"button\" (click)=\"selectMode(mode.CATALOG)\" class=\"a-btn a-btn--primary\">\n        {{ '@pry.restitution.backToCatalog' | i18n }}\n      </button>\n    </div>\n    <div class=\"o-manifest-layout__content\">\n      <pry-restitution\n        (restitutionCreated)=\"closeRestitution($event)\"\n        [selectedRestitution]=\"selectedRestitution\"\n        class=\"restitution\"\n      ></pry-restitution>\n    </div>\n  </ng-template>\n</div>\n\n<ng-template #infoTooltipEye>\n  <div class=\"card-title-tooltip__wrapper\">\n    <span class=\"card-title-tooltip__name\">{{ '@pry.restitution.consult' | i18n }}</span>\n  </div>\n</ng-template>\n\n<ng-template #infoTooltipUpdate>\n  <div class=\"card-title-tooltip__wrapper\">\n    <span class=\"card-title-tooltip__name\">{{ '@pry.restitution.update' | i18n }}</span>\n  </div>\n</ng-template>\n\n<ng-template #infoTooltipDelete>\n  <div class=\"card-title-tooltip__wrapper\">\n    <span class=\"card-title-tooltip__name\">{{ '@pry.restitution.delete' | i18n }}</span>\n  </div>\n</ng-template>\n\n<ng-template #infoTooltipCreateRestitution>\n  <div class=\"card-title-tooltip__wrapper\">\n    <span class=\"card-title-tooltip__name\">{{ '@pry.restitution.create_title' | i18n }}</span>\n  </div>\n</ng-template>\n<ng-template #private>\n  <div class=\"m-tooltip\" role=\"tooltip\">\n    <span class=\"m-tooltip__text\">{{ '@pry.restitution.lock' | i18n }}</span>\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: i1.PryAccessDirective, selector: "[pryAccess]", inputs: ["pryAccess"] }, { kind: "component", type: i1.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.PryTooltipDirective, selector: "[pryTooltip]", inputs: ["pryTooltip", "styleReversed", "pryTooltipContext", "pryTooltipPosition", "pryTooltipShowDelay"] }, { kind: "component", type: PryRestitutionComponent, selector: "pry-restitution", inputs: ["selectedRestitution", "edit", "isDataSourceSelected", "bindId"], outputs: ["restitutionCreated"] }, { kind: "component", type: PryCatalogCssComponent, selector: "pry-restitution-css" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.GetSecuredImagePipe, name: "getSecuredImage" }, { kind: "pipe", type: i1.I18nPipe, name: "i18n" }, { kind: "pipe", type: i8.PrySinceDatePipe, name: "sinceDate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PryRestitutionCatalogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-restitution-catalog', template: "<pry-restitution-css></pry-restitution-css>\n<div class=\"o-manifest-layout o-restitution-catalog\">\n  <ng-template [ngIf]=\"selectedMode === mode.CATALOG\">\n    <div class=\"o-manifest-layout__toolbox\">\n      <button\n        type=\"button\"\n        (click)=\"selectMode(mode.CREATION)\"\n        [pryTooltip]=\"infoTooltipCreateRestitution\"\n        class=\"a-btn a-btn--primary\"\n        *pryAccess=\"{ module: 'dashboard', page: 'restitution', action: 'create' }\"\n      >\n        {{ '@pry.restitution.create_title' | i18n }}\n      </button>\n      <div>\n        <div class=\"o-catalog__search\">\n          <label id=\"catalog-search-label\" for=\"catalog-search\" class=\"u-visually-hidden\">\n            <span>{{ '@pry.toolbox.catalog.filter.name' | i18n }}</span>\n          </label>\n          <input\n            id=\"catalog-search\"\n            type=\"text\"\n            class=\"a-form-field\"\n            [placeholder]=\"'@pry.restitution.search' | i18n\"\n            [ngModel]=\"search$ | async\"\n            (ngModelChange)=\"this.search$.next($event)\"\n          />\n\n          <pry-icon iconSvg=\"search\" [width]=\"17\" [height]=\"17\"></pry-icon>\n        </div>\n      </div>\n    </div>\n    <div class=\"o-manifest-layout__content\">\n      <h1 class=\"a-h1\">{{ '@pry.restitution.catalog' | i18n }}</h1>\n\n      <div class=\"o-presentation-wrapper\">\n        <ul class=\"o-presentation\">\n          <li class=\"o-presentation__item\" *ngFor=\"let restitution of filteredRestitution$ | async\">\n            <div class=\"o-presentation__item__header\">\n              <ng-container *ngIf=\"restitution.visibility?.type === PryVisibilityType.PRIVATE\">\n                <pry-icon\n                  iconSvg=\"private\"\n                  [pryTooltip]=\"private\"\n                  class=\"is-private\"\n                  [height]=\"17\"\n                  [width]=\"17\"\n                ></pry-icon>\n              </ng-container>\n              <img\n                alt=\"\"\n                [height]=\"restitution.cover ? 600 : 128\"\n                [width]=\"restitution.cover ? 600 : 128\"\n                [class.is-full-width]=\"restitution.cover\"\n                [src]=\"restitution.image | getSecuredImage : [600, 600] | async\"\n                class=\"pointer\"\n                (click)=\"selectRestitution(restitution)\"\n                [pryTooltip]=\"infoTooltipEye\"\n              />\n            </div>\n\n            <div class=\"o-presentation__item__txt\">\n              <h3 class=\"a-h3\">{{ restitution.name }}</h3>\n              <p class=\"a-p -date\">{{ restitution.modificationDate | sinceDate }}</p>\n            </div>\n\n            <div class=\"o-presentation__item__footer\">\n              <ul class=\"m-actions-list\">\n                <li>\n                  <button\n                    type=\"button\"\n                    class=\"a-btn a-btn icon-only\"\n                    (click)=\"selectRestitution(restitution)\"\n                    *pryAccess=\"{ module: 'dashboard', page: 'restitution', action: 'consult' }\"\n                  >\n                    <pry-icon iconSvg=\"eye\" [pryTooltip]=\"infoTooltipEye\"></pry-icon>\n                  </button>\n                </li>\n                <li>\n                  <button\n                    type=\"button\"\n                    class=\"a-btn a-btn&#45;&#45;icon-only\"\n                    (click)=\"editRestitution(restitution)\"\n                    [disabled]=\"!restitution.owner\"\n                    *pryAccess=\"{ module: 'dashboard', page: 'restitution', action: 'edit' }\"\n                  >\n                    <pry-icon iconSvg=\"edit\" [pryTooltip]=\"infoTooltipUpdate\"></pry-icon>\n                  </button>\n                </li>\n                <li>\n                  <button\n                    type=\"button\"\n                    class=\"a-btn a-btn&#45;&#45;icon-only\"\n                    (click)=\"toggleRemoveConfirm($event, restitution)\"\n                    [disabled]=\"!restitution.owner\"\n                    *pryAccess=\"{ module: 'dashboard', page: 'restitution', action: 'delete' }\"\n                  >\n                    <pry-icon iconSvg=\"delete\" [pryTooltip]=\"infoTooltipDelete\"></pry-icon>\n                  </button>\n                </li>\n              </ul>\n            </div>\n          </li>\n        </ul>\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-template [ngIf]=\"selectedMode === mode.CONSULT\">\n    <div class=\"o-manifest-layout__toolbox\">\n      <button type=\"button\" (click)=\"selectMode(mode.CATALOG)\" class=\"a-btn a-btn--primary\">\n        {{ '@pry.restitution.backToCatalog' | i18n }}\n      </button>\n    </div>\n    <div class=\"o-manifest-layout__content\">\n      <pry-restitution\n        [selectedRestitution]=\"selectedRestitution\"\n        [edit]=\"false\"\n        (restitutionCreated)=\"closeRestitution($event)\"\n        class=\"restitution\"\n      ></pry-restitution>\n    </div>\n  </ng-template>\n  <ng-template [ngIf]=\"selectedMode === mode.CREATION\">\n    <div class=\"o-manifest-layout__toolbox\">\n      <button type=\"button\" (click)=\"selectMode(mode.CATALOG)\" class=\"a-btn a-btn--primary\">\n        {{ '@pry.restitution.backToCatalog' | i18n }}\n      </button>\n    </div>\n    <div class=\"o-manifest-layout__content\">\n      <pry-restitution (restitutionCreated)=\"closeRestitution($event)\" class=\"restitution\"></pry-restitution>\n    </div>\n  </ng-template>\n  <ng-template [ngIf]=\"selectedMode === mode.EDITION\">\n    <div class=\"o-manifest-layout__toolbox\">\n      <button type=\"button\" (click)=\"selectMode(mode.CATALOG)\" class=\"a-btn a-btn--primary\">\n        {{ '@pry.restitution.backToCatalog' | i18n }}\n      </button>\n    </div>\n    <div class=\"o-manifest-layout__content\">\n      <pry-restitution\n        (restitutionCreated)=\"closeRestitution($event)\"\n        [selectedRestitution]=\"selectedRestitution\"\n        class=\"restitution\"\n      ></pry-restitution>\n    </div>\n  </ng-template>\n</div>\n\n<ng-template #templateModal>\n  <div\n    class=\"o-modal\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-labelledby=\"dialog confirm delete presentation\"\n    tabindex=\"0\"\n    #deleteModal\n    *ngIf=\"restitution\"\n    (keydown.escape)=\"toggleRemoveConfirm($event, restitution)\"\n  >\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\">\n          {{ '@pry.widget.modalTitle' | i18n }}\n        </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)=\"cancelRemoveConfirm()\"\n        >\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <div class=\"m-btn-group\">\n      <button type=\"button\" #cancelRemove (click)=\"cancelRemoveConfirm()\" class=\"a-btn a-btn--secondary\">\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n      <button\n        type=\"submit\"\n        class=\"a-btn a-btn--primary\"\n        #confirm\n        (click)=\"deleteRestitution(restitution)\"\n        (keydown.tab)=\"focusCrossElement()\"\n      >\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #infoTooltipEye>\n  <div class=\"card-title-tooltip__wrapper\">\n    <span class=\"card-title-tooltip__name\">{{ '@pry.restitution.consult' | i18n }}</span>\n  </div>\n</ng-template>\n\n<ng-template #infoTooltipUpdate>\n  <div class=\"card-title-tooltip__wrapper\">\n    <span class=\"card-title-tooltip__name\">{{ '@pry.restitution.update' | i18n }}</span>\n  </div>\n</ng-template>\n\n<ng-template #infoTooltipDelete>\n  <div class=\"card-title-tooltip__wrapper\">\n    <span class=\"card-title-tooltip__name\">{{ '@pry.restitution.delete' | i18n }}</span>\n  </div>\n</ng-template>\n\n<ng-template #infoTooltipCreateRestitution>\n  <div class=\"card-title-tooltip__wrapper\">\n    <span class=\"card-title-tooltip__name\">{{ '@pry.restitution.create_title' | i18n }}</span>\n  </div>\n</ng-template>\n<ng-template #private>\n  <div class=\"m-tooltip\" role=\"tooltip\">\n    <span class=\"m-tooltip__text\">{{ '@pry.restitution.lock' | i18n }}</span>\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: i1$1.Store }, { type: i2.Overlay }, { type: i0.ViewContainerRef }]; }, propDecorators: { templateModal: [{
-                type: ViewChild,
-                args: ['templateModal', { read: TemplateRef, static: false }]
-            }], openModal: [{
-                type: ViewChild,
-                args: ['openModal', { read: ElementRef }]
-            }], cancelRemove: [{
-                type: ViewChild,
-                args: ['cancelRemove']
-            }], cross: [{
-                type: ViewChild,
-                args: ['cross', { static: false }]
-            }], confirm: [{
-                type: ViewChild,
-                args: ['confirm']
-            }], modalOpen: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'pry-restitution-catalog', template: "<pry-restitution-css></pry-restitution-css>\n<div class=\"o-manifest-layout o-restitution-catalog\">\n  <ng-template [ngIf]=\"selectedMode === mode.CATALOG\">\n    <div class=\"o-manifest-layout__toolbox\">\n      <button\n        type=\"button\"\n        (click)=\"selectMode(mode.CREATION)\"\n        [pryTooltip]=\"infoTooltipCreateRestitution\"\n        class=\"a-btn a-btn--primary\"\n        *pryAccess=\"{ module: 'dashboard', page: 'restitution', action: 'create' }\"\n      >\n        {{ '@pry.restitution.create_title' | i18n }}\n      </button>\n      <div>\n        <div class=\"o-catalog__search\">\n          <label id=\"catalog-search-label\" for=\"catalog-search\" class=\"u-visually-hidden\">\n            <span>{{ '@pry.toolbox.catalog.filter.name' | i18n }}</span>\n          </label>\n          <input\n            id=\"catalog-search\"\n            type=\"text\"\n            class=\"a-form-field\"\n            [placeholder]=\"'@pry.restitution.search' | i18n\"\n            [ngModel]=\"search$ | async\"\n            (ngModelChange)=\"this.search$.next($event)\"\n          />\n\n          <pry-icon iconSvg=\"search\" [width]=\"17\" [height]=\"17\"></pry-icon>\n        </div>\n      </div>\n    </div>\n    <div class=\"o-manifest-layout__content\">\n      <h1 class=\"a-h1\">{{ '@pry.restitution.catalog' | i18n }}</h1>\n\n      <div class=\"o-presentation-wrapper\">\n        <ul class=\"o-presentation\">\n          <li class=\"o-presentation__item\" *ngFor=\"let restitution of filteredRestitution$ | async\">\n            <div class=\"o-presentation__item__header\">\n              <ng-container *ngIf=\"restitution.visibility?.type === PryVisibilityType.PRIVATE\">\n                <pry-icon\n                  iconSvg=\"private\"\n                  [pryTooltip]=\"private\"\n                  class=\"is-private\"\n                  [height]=\"17\"\n                  [width]=\"17\"\n                ></pry-icon>\n              </ng-container>\n              <img\n                alt=\"\"\n                [height]=\"restitution.cover ? 600 : 128\"\n                [width]=\"restitution.cover ? 600 : 128\"\n                [class.is-full-width]=\"restitution.cover\"\n                [src]=\"restitution.image | getSecuredImage : [600, 600] | async\"\n                class=\"pointer\"\n                (click)=\"selectRestitution(restitution)\"\n                [pryTooltip]=\"infoTooltipEye\"\n              />\n            </div>\n\n            <div class=\"o-presentation__item__txt\">\n              <h3 class=\"a-h3\">{{ restitution.name }}</h3>\n              <p class=\"a-p -date\">{{ restitution.modificationDate | sinceDate }}</p>\n            </div>\n\n            <div class=\"o-presentation__item__footer\">\n              <ul class=\"m-actions-list\">\n                <li>\n                  <button\n                    type=\"button\"\n                    class=\"a-btn a-btn icon-only\"\n                    (click)=\"selectRestitution(restitution)\"\n                    *pryAccess=\"{ module: 'dashboard', page: 'restitution', action: 'consult' }\"\n                  >\n                    <pry-icon iconSvg=\"eye\" [pryTooltip]=\"infoTooltipEye\"></pry-icon>\n                  </button>\n                </li>\n                <li>\n                  <button\n                    type=\"button\"\n                    class=\"a-btn a-btn&#45;&#45;icon-only\"\n                    (click)=\"editRestitution(restitution)\"\n                    [disabled]=\"!restitution.owner\"\n                    *pryAccess=\"{ module: 'dashboard', page: 'restitution', action: 'edit' }\"\n                  >\n                    <pry-icon iconSvg=\"edit\" [pryTooltip]=\"infoTooltipUpdate\"></pry-icon>\n                  </button>\n                </li>\n                <li>\n                  <button\n                    type=\"button\"\n                    class=\"a-btn a-btn&#45;&#45;icon-only\"\n                    (click)=\"deleteRestitution(restitution.id)\"\n                    [disabled]=\"!restitution.owner\"\n                    *pryAccess=\"{ module: 'dashboard', page: 'restitution', action: 'delete' }\"\n                  >\n                    <pry-icon iconSvg=\"delete\" [pryTooltip]=\"infoTooltipDelete\"></pry-icon>\n                  </button>\n                </li>\n              </ul>\n            </div>\n          </li>\n        </ul>\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-template [ngIf]=\"selectedMode === mode.CONSULT\">\n    <div class=\"o-manifest-layout__toolbox\">\n      <button type=\"button\" (click)=\"selectMode(mode.CATALOG)\" class=\"a-btn a-btn--primary\">\n        {{ '@pry.restitution.backToCatalog' | i18n }}\n      </button>\n    </div>\n    <div class=\"o-manifest-layout__content\">\n      <pry-restitution\n        [selectedRestitution]=\"selectedRestitution\"\n        [edit]=\"false\"\n        (restitutionCreated)=\"closeRestitution($event)\"\n        class=\"restitution\"\n      ></pry-restitution>\n    </div>\n  </ng-template>\n  <ng-template [ngIf]=\"selectedMode === mode.CREATION\">\n    <div class=\"o-manifest-layout__toolbox\">\n      <button type=\"button\" (click)=\"selectMode(mode.CATALOG)\" class=\"a-btn a-btn--primary\">\n        {{ '@pry.restitution.backToCatalog' | i18n }}\n      </button>\n    </div>\n    <div class=\"o-manifest-layout__content\">\n      <pry-restitution (restitutionCreated)=\"closeRestitution($event)\" class=\"restitution\"></pry-restitution>\n    </div>\n  </ng-template>\n  <ng-template [ngIf]=\"selectedMode === mode.EDITION\">\n    <div class=\"o-manifest-layout__toolbox\">\n      <button type=\"button\" (click)=\"selectMode(mode.CATALOG)\" class=\"a-btn a-btn--primary\">\n        {{ '@pry.restitution.backToCatalog' | i18n }}\n      </button>\n    </div>\n    <div class=\"o-manifest-layout__content\">\n      <pry-restitution\n        (restitutionCreated)=\"closeRestitution($event)\"\n        [selectedRestitution]=\"selectedRestitution\"\n        class=\"restitution\"\n      ></pry-restitution>\n    </div>\n  </ng-template>\n</div>\n\n<ng-template #infoTooltipEye>\n  <div class=\"card-title-tooltip__wrapper\">\n    <span class=\"card-title-tooltip__name\">{{ '@pry.restitution.consult' | i18n }}</span>\n  </div>\n</ng-template>\n\n<ng-template #infoTooltipUpdate>\n  <div class=\"card-title-tooltip__wrapper\">\n    <span class=\"card-title-tooltip__name\">{{ '@pry.restitution.update' | i18n }}</span>\n  </div>\n</ng-template>\n\n<ng-template #infoTooltipDelete>\n  <div class=\"card-title-tooltip__wrapper\">\n    <span class=\"card-title-tooltip__name\">{{ '@pry.restitution.delete' | i18n }}</span>\n  </div>\n</ng-template>\n\n<ng-template #infoTooltipCreateRestitution>\n  <div class=\"card-title-tooltip__wrapper\">\n    <span class=\"card-title-tooltip__name\">{{ '@pry.restitution.create_title' | i18n }}</span>\n  </div>\n</ng-template>\n<ng-template #private>\n  <div class=\"m-tooltip\" role=\"tooltip\">\n    <span class=\"m-tooltip__text\">{{ '@pry.restitution.lock' | i18n }}</span>\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: function () { return [{ type: i1$1.Store }, { type: i2.Overlay }, { type: i0.ViewContainerRef }]; } });
 
 class PryRestitutionListItemComponent extends SubscriptionnerDirective {
     constructor(store, toolboxManifestService) {