@provoly/dashboard 0.22.1 → 0.22.3

package/fesm2022/provoly-dashboard.mjs

@@ -5512,7 +5512,10 @@ class PryBackendAggregationService extends PryAggregationService {
             params = params.set('groupBy', options.groupBy.attribute);
         }
         if (options.graph && options.graph.sort) {
-            params = params.set('sort', `${options.graph.sort.direction},${(options.graph.sort.value ?? '').toUpperCase()}`);
+            params = params.set('order', `${options.graph.sort.direction},${(options.graph.sort.value ?? '').toUpperCase()}`);
+        }
+        if (!!options.graph?.limitItems) {
+            params = params.set('limit', `${options.graph.limitItems}`);
         }
         params = this.searchService.getItemsFilter(targetDatasource, params, false);
         const key = `${this.dataUrl}_${params.toString()}`;
@@ -6735,7 +6738,9 @@ class SelectA11yService {
         toggleFocus();
         switch (origin) {
             case 'mouse':
-                this.toggle(true);
+                if (!autocomplete) {
+                    this.toggle(true);
+                }
                 break;
             case 'keyboard':
                 if (autocomplete) {
@@ -6753,9 +6758,14 @@ class SelectA11yService {
     }
     onKeydownAutocompleteInput(event, open, searchValue, optionsModalRef) {
         if (event.key === 'Tab') {
+            if (open)
+                this.toggle();
             return;
         }
-        if (!open && searchValue?.length > 2 && /[\W]*/.exec(event.key)) {
+        if (!open && searchValue?.length > 2 && event.key.length === 1) {
+            this.toggle();
+        }
+        else if (open && event.key === 'Enter') {
             this.toggle();
         }
         else if (open && event.key === 'ArrowDown') {
@@ -6801,10 +6811,12 @@ class SelectA11yService {
                 break;
         }
     }
-    focusInitialSelection(optionsModalRef) {
-        let selectedOption = optionsModalRef?.rootNodes[0].querySelector('[aria-selected="true"]') ??
-            optionsModalRef?.rootNodes[0].querySelector('[aria-selected="false"]');
-        selectedOption?.setAttribute('cdkFocusInitial', '');
+    focusInitialSelection(autocomplete, optionsModalRef) {
+        if (!autocomplete) {
+            let selectedOption = optionsModalRef?.rootNodes[0].querySelector('[aria-selected="true"]') ??
+                optionsModalRef?.rootNodes[0].querySelector('[aria-selected="false"]');
+            selectedOption?.setAttribute('cdkFocusInitial', '');
+        }
     }
 }
 
@@ -6861,8 +6873,8 @@ class PrySelectComponent extends SubscriptionnerDirective {
         this.onFocusChange = (origin) => this.a11yService.onFocusChange(origin, this.autocomplete, () => this.toggleFocus(), () => this.focusSelect());
         this.onKeydownSelect = (event) => this.a11yService.onKeydownSelect(event, this.autocomplete);
         this.onKeydownAutocompleteInput = (event) => this.a11yService.onKeydownAutocompleteInput(event, this.open, this.search$.getValue(), this.optionsModalRef);
-        this.onKeydownOption = (event, item, index, optionDivRef, first, last) => this.a11yService.onKeydownOption(event, optionDivRef, first, last, this.autocomplete, this.selectElement.nativeElement, () => this.select(event, item, index, !this.multiple));
-        this.focusInitialSelection = () => this.a11yService.focusInitialSelection(this.optionsModalRef);
+        this.onKeydownOption = (event, item, index, optionDivRef, first, last) => this.a11yService.onKeydownOption(event, optionDivRef, first, last, this.autocomplete, this.selectElement.nativeElement, () => this.select(event, item, index));
+        this.focusInitialSelection = () => this.a11yService.focusInitialSelection(this.autocomplete, this.optionsModalRef);
         this.matchingItems$ = combineLatest([this._items$, this.search$, this.searchSelected$]).pipe(map(([items, term, alreadySelected]) => this.autocomplete && term && term.length > 0 && !alreadySelected
             ? items.filter((i) => {
                 const itemValue = this.bindLabel ? i?.[this.bindLabel] : i;
@@ -6934,7 +6946,7 @@ class PrySelectComponent extends SubscriptionnerDirective {
         this.searched.next($event);
         this.searchSelected$.next(false);
     }
-    select($event, item, index, forceClose = true) {
+    select($event, item, index) {
         const itemValue = this.bindValue ? item?.[this.bindValue] : item;
         const keyProp = this.bindValue ?? this.bindLabel ?? 'id';
         if (this.multiple) {
@@ -6958,7 +6970,7 @@ class PrySelectComponent extends SubscriptionnerDirective {
         else {
             this.writeValue(itemValue);
         }
-        if (this.closeOnSelect || forceClose) {
+        if (this.closeOnSelect) {
             this.toggle(false);
         }
         this.activeDescendant = index;
@@ -7039,7 +7051,7 @@ class PrySelectComponent extends SubscriptionnerDirective {
                 multi: true
             },
             SelectA11yService
-        ], viewQueries: [{ propertyName: "optionsModal", first: true, predicate: ["optionsModal"], descendants: true, read: TemplateRef }, { propertyName: "selectElement", first: true, predicate: ["selectElement"], descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"a-pry-select\"\n  [attr.aria-disabled]=\"disabled\"\n  #selectElement\n  [class.-focused]=\"focused\"\n  (click)=\"handleClick()\"\n  role=\"combobox\"\n  [attr.aria-expanded]=\"open\"\n  [attr.aria-owns]=\"open ? modalId : null\"\n  aria-haspopup=\"listbox\"\n  tabindex=\"0\"\n  cdkMonitorElementFocus\n  (cdkFocusChange)=\"onFocusChange($event)\"\n  (keydown)=\"onKeydownSelect($event)\"\n>\n  <div class=\"a-pry-select__content\">\n    <ng-container *ngIf=\"autocomplete; else noAutocomplete\">\n      <input\n        type=\"text\"\n        class=\"a-pry-select__search\"\n        [ngModel]=\"search$.getValue()\"\n        (ngModelChange)=\"search($event)\"\n        aria-autocomplete=\"list\"\n        [attr.aria-controls]=\"open ? modalId : null\"\n        [attr.aria-disabled]=\"disabled\"\n        [disabled]=\"disabled\"\n        (keydown)=\"onKeydownAutocompleteInput($event)\"\n        #input\n      />\n    </ng-container>\n    <ng-template #noAutocomplete>\n      <ng-container *ngIf=\"(valueItems$ | async).length === 0; else selectedValues\">\n        <span class=\"a-pry-select__placeholder\">{{ placeholder }}</span>\n      </ng-container>\n      <ng-template #selectedValues>\n        <ng-container *ngFor=\"let item of valueItems$ | async\">\n          <div class=\"a-pry-select__value\" [class.pry-select-form]=\"isForm\" [class.-multiple]=\"multiple\">\n            <ng-container *ngIf=\"template; else noTemplateLabel\">\n              <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item, clear }\"></ng-container>\n            </ng-container>\n            <ng-template #noTemplateLabel>\n              <pry-icon\n                *ngIf=\"bindIcon\"\n                [iconSvg]=\"item[bindIcon]\"\n                [width]=\"iconSize[0]\"\n                [height]=\"iconSize[1]\"\n              ></pry-icon>\n              <ng-container *ngIf=\"bindLabel ? item?.[bindLabel] : item as value\">\n                {{ (i18nPrefix ?? '') + value | i18n : { warn: false } }}\n                <span\n                  *ngIf=\"multiple && clearable\"\n                  class=\"a-pry-select__clear\"\n                  (click)=\"clear($event, item)\"\n                  aria-hidden=\"true\"\n                  >\u00D7</span\n                >\n              </ng-container>\n            </ng-template>\n          </div>\n        </ng-container>\n      </ng-template>\n      <div class=\"a-pry-select__filler\"></div>\n    </ng-template>\n  </div>\n  <div class=\"a-pry-select__actions\">\n    <span *ngIf=\"clearable\" class=\"a-pry-select__clear\" (click)=\"clearAll($event)\" aria-hidden=\"true\">\u00D7</span>\n    <pry-icon\n      class=\"a-pry-select__toggle\"\n      [iconSvg]=\"open ? 'chevron_top' : 'chevron_bottom'\"\n      [width]=\"iconSize[0]\"\n      [height]=\"iconSize[1]\"\n    ></pry-icon>\n  </div>\n</div>\n<ng-template #optionsModal>\n  <div\n    role=\"listbox\"\n    [attr.aria-label]=\"'@pry.select.label' | i18n\"\n    [id]=\"modalId\"\n    [attr.aria-activedescendant]=\"'select-option-' + activeDescendant\"\n    [attr.aria-multiselectable]=\"multiple\"\n    [attr.required]=\"required\"\n    [attr.aria-readonly]=\"readonly\"\n    cdkTrapFocus=\"!autocomplete\"\n    [cdkTrapFocusAutoCapture]=\"true\"\n  >\n    <div class=\"a-pry-select__options__option -hint\" *ngIf=\"loading\" [style.width.px]=\"modalWidth\">\n      <div class=\"no-widget no-widget__loader\">\n        <pry-icon\n          iconSvg=\"loader\"\n          class=\"no-widget__loading\"\n          [alt]=\"'@pry.widget.target.loading' | i18n\"\n          [width]=\"30\"\n          [height]=\"30\"\n          *ngIf=\"loading\"\n        />\n      </div>\n      <p>{{ '@pry.select.loading' | i18n }}...</p>\n    </div>\n    <ng-container *ngIf=\"!loading\">\n      <ng-container *ngFor=\"let item of matchingItems$ | async; let index = index; let first = first; let last = last\">\n        <div\n          class=\"a-pry-select__options__option\"\n          [attr.aria-selected]=\"(valueItems$ | async).includes(item)\"\n          [attr.aria-checked]=\"(valueItems$ | async).includes(item)\"\n          [attr.aria-disabled]=\"disabled\"\n          (click)=\"select($event, item, index)\"\n          (keydown)=\"onKeydownOption($event, item, index, optionDivRef, first, last)\"\n          [style.width.px]=\"modalWidth\"\n          role=\"option\"\n          [id]=\"'select-option-' + index\"\n          tabindex=\"0\"\n          #optionDivRef\n        >\n          <ng-container *ngIf=\"template; else noTemplate\">\n            <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item, clear }\"></ng-container>\n          </ng-container>\n          <ng-template #noTemplate>\n            <pry-icon\n              *ngIf=\"bindIcon\"\n              [iconSvg]=\"item[bindIcon]\"\n              [width]=\"iconSize[0]\"\n              [height]=\"iconSize[1]\"\n            ></pry-icon>\n            <ng-container *ngIf=\"bindLabel ? item?.[bindLabel] : item as value\">\n              {{ (i18nPrefix ? i18nPrefix : '') + value | i18n : { warn: false } }}\n            </ng-container>\n          </ng-template>\n        </div>\n      </ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3$2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i3$2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
+        ], viewQueries: [{ propertyName: "optionsModal", first: true, predicate: ["optionsModal"], descendants: true, read: TemplateRef }, { propertyName: "selectElement", first: true, predicate: ["selectElement"], descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"a-pry-select\"\n  [attr.aria-disabled]=\"disabled\"\n  #selectElement\n  [class.-focused]=\"focused\"\n  (click)=\"handleClick()\"\n  role=\"combobox\"\n  [attr.aria-expanded]=\"open\"\n  [attr.aria-owns]=\"open ? modalId : null\"\n  aria-haspopup=\"listbox\"\n  tabindex=\"0\"\n  cdkMonitorElementFocus\n  (cdkFocusChange)=\"onFocusChange($event)\"\n  (keydown)=\"onKeydownSelect($event)\"\n>\n  <div class=\"a-pry-select__content\">\n    <ng-container *ngIf=\"autocomplete; else noAutocomplete\">\n      <input\n        type=\"text\"\n        class=\"a-pry-select__search\"\n        [ngModel]=\"search$.getValue()\"\n        (ngModelChange)=\"search($event)\"\n        aria-autocomplete=\"list\"\n        [attr.aria-controls]=\"open ? modalId : null\"\n        [attr.aria-disabled]=\"disabled\"\n        [disabled]=\"disabled\"\n        (keydown)=\"onKeydownAutocompleteInput($event)\"\n        #input\n      />\n    </ng-container>\n    <ng-template #noAutocomplete>\n      <ng-container *ngIf=\"(valueItems$ | async).length === 0; else selectedValues\">\n        <span class=\"a-pry-select__placeholder\">{{ placeholder }}</span>\n      </ng-container>\n      <ng-template #selectedValues>\n        <ng-container *ngFor=\"let item of valueItems$ | async\">\n          <div class=\"a-pry-select__value\" [class.pry-select-form]=\"isForm\" [class.-multiple]=\"multiple\">\n            <ng-container *ngIf=\"template; else noTemplateLabel\">\n              <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item, clear }\"></ng-container>\n            </ng-container>\n            <ng-template #noTemplateLabel>\n              <pry-icon\n                *ngIf=\"bindIcon\"\n                [iconSvg]=\"item[bindIcon]\"\n                [width]=\"iconSize[0]\"\n                [height]=\"iconSize[1]\"\n              ></pry-icon>\n              <ng-container *ngIf=\"bindLabel ? item?.[bindLabel] : item as value\">\n                {{ (i18nPrefix ?? '') + value | i18n : { warn: false } }}\n                <span\n                  *ngIf=\"multiple && clearable\"\n                  class=\"a-pry-select__clear\"\n                  (click)=\"clear($event, item)\"\n                  aria-hidden=\"true\"\n                  >\u00D7</span\n                >\n              </ng-container>\n            </ng-template>\n          </div>\n        </ng-container>\n      </ng-template>\n      <div class=\"a-pry-select__filler\"></div>\n    </ng-template>\n  </div>\n  <div class=\"a-pry-select__actions\">\n    <span *ngIf=\"clearable\" class=\"a-pry-select__clear\" (click)=\"clearAll($event)\" aria-hidden=\"true\">\u00D7</span>\n    <pry-icon\n      class=\"a-pry-select__toggle\"\n      [iconSvg]=\"open ? 'chevron_top' : 'chevron_bottom'\"\n      [width]=\"iconSize[0]\"\n      [height]=\"iconSize[1]\"\n    ></pry-icon>\n  </div>\n</div>\n<ng-template #optionsModal>\n  <div\n    role=\"listbox\"\n    [attr.aria-label]=\"'@pry.select.label' | i18n\"\n    [id]=\"modalId\"\n    [attr.aria-activedescendant]=\"'select-option-' + activeDescendant\"\n    [attr.aria-multiselectable]=\"multiple\"\n    [attr.required]=\"required\"\n    [attr.aria-readonly]=\"readonly\"\n    cdkTrapFocus=\"!autocomplete\"\n    [cdkTrapFocusAutoCapture]=\"!autocomplete\"\n  >\n    <div class=\"a-pry-select__options__option -hint\" *ngIf=\"loading\" [style.width.px]=\"modalWidth\">\n      <div class=\"no-widget no-widget__loader\">\n        <pry-icon\n          iconSvg=\"loader\"\n          class=\"no-widget__loading\"\n          [alt]=\"'@pry.widget.target.loading' | i18n\"\n          [width]=\"30\"\n          [height]=\"30\"\n          *ngIf=\"loading\"\n        />\n      </div>\n      <p>{{ '@pry.select.loading' | i18n }}...</p>\n    </div>\n    <ng-container *ngIf=\"!loading\">\n      <ng-container *ngFor=\"let item of matchingItems$ | async; let index = index; let first = first; let last = last\">\n        <div\n          class=\"a-pry-select__options__option\"\n          [attr.aria-selected]=\"(valueItems$ | async).includes(item)\"\n          [attr.aria-checked]=\"(valueItems$ | async).includes(item)\"\n          [attr.aria-disabled]=\"disabled\"\n          (click)=\"select($event, item, index)\"\n          (keydown)=\"onKeydownOption($event, item, index, optionDivRef, first, last)\"\n          [style.width.px]=\"modalWidth\"\n          role=\"option\"\n          [id]=\"'select-option-' + index\"\n          tabindex=\"0\"\n          #optionDivRef\n        >\n          <ng-container *ngIf=\"template; else noTemplate\">\n            <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item, clear }\"></ng-container>\n          </ng-container>\n          <ng-template #noTemplate>\n            <pry-icon\n              *ngIf=\"bindIcon\"\n              [iconSvg]=\"item[bindIcon]\"\n              [width]=\"iconSize[0]\"\n              [height]=\"iconSize[1]\"\n            ></pry-icon>\n            <ng-container *ngIf=\"bindLabel ? item?.[bindLabel] : item as value\">\n              {{ (i18nPrefix ? i18nPrefix : '') + value | i18n : { warn: false } }}\n            </ng-container>\n          </ng-template>\n        </div>\n      </ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3$2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i3$2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PrySelectComponent, decorators: [{
             type: Component,
@@ -7050,7 +7062,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             multi: true
                         },
                         SelectA11yService
-                    ], template: "<div\n  class=\"a-pry-select\"\n  [attr.aria-disabled]=\"disabled\"\n  #selectElement\n  [class.-focused]=\"focused\"\n  (click)=\"handleClick()\"\n  role=\"combobox\"\n  [attr.aria-expanded]=\"open\"\n  [attr.aria-owns]=\"open ? modalId : null\"\n  aria-haspopup=\"listbox\"\n  tabindex=\"0\"\n  cdkMonitorElementFocus\n  (cdkFocusChange)=\"onFocusChange($event)\"\n  (keydown)=\"onKeydownSelect($event)\"\n>\n  <div class=\"a-pry-select__content\">\n    <ng-container *ngIf=\"autocomplete; else noAutocomplete\">\n      <input\n        type=\"text\"\n        class=\"a-pry-select__search\"\n        [ngModel]=\"search$.getValue()\"\n        (ngModelChange)=\"search($event)\"\n        aria-autocomplete=\"list\"\n        [attr.aria-controls]=\"open ? modalId : null\"\n        [attr.aria-disabled]=\"disabled\"\n        [disabled]=\"disabled\"\n        (keydown)=\"onKeydownAutocompleteInput($event)\"\n        #input\n      />\n    </ng-container>\n    <ng-template #noAutocomplete>\n      <ng-container *ngIf=\"(valueItems$ | async).length === 0; else selectedValues\">\n        <span class=\"a-pry-select__placeholder\">{{ placeholder }}</span>\n      </ng-container>\n      <ng-template #selectedValues>\n        <ng-container *ngFor=\"let item of valueItems$ | async\">\n          <div class=\"a-pry-select__value\" [class.pry-select-form]=\"isForm\" [class.-multiple]=\"multiple\">\n            <ng-container *ngIf=\"template; else noTemplateLabel\">\n              <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item, clear }\"></ng-container>\n            </ng-container>\n            <ng-template #noTemplateLabel>\n              <pry-icon\n                *ngIf=\"bindIcon\"\n                [iconSvg]=\"item[bindIcon]\"\n                [width]=\"iconSize[0]\"\n                [height]=\"iconSize[1]\"\n              ></pry-icon>\n              <ng-container *ngIf=\"bindLabel ? item?.[bindLabel] : item as value\">\n                {{ (i18nPrefix ?? '') + value | i18n : { warn: false } }}\n                <span\n                  *ngIf=\"multiple && clearable\"\n                  class=\"a-pry-select__clear\"\n                  (click)=\"clear($event, item)\"\n                  aria-hidden=\"true\"\n                  >\u00D7</span\n                >\n              </ng-container>\n            </ng-template>\n          </div>\n        </ng-container>\n      </ng-template>\n      <div class=\"a-pry-select__filler\"></div>\n    </ng-template>\n  </div>\n  <div class=\"a-pry-select__actions\">\n    <span *ngIf=\"clearable\" class=\"a-pry-select__clear\" (click)=\"clearAll($event)\" aria-hidden=\"true\">\u00D7</span>\n    <pry-icon\n      class=\"a-pry-select__toggle\"\n      [iconSvg]=\"open ? 'chevron_top' : 'chevron_bottom'\"\n      [width]=\"iconSize[0]\"\n      [height]=\"iconSize[1]\"\n    ></pry-icon>\n  </div>\n</div>\n<ng-template #optionsModal>\n  <div\n    role=\"listbox\"\n    [attr.aria-label]=\"'@pry.select.label' | i18n\"\n    [id]=\"modalId\"\n    [attr.aria-activedescendant]=\"'select-option-' + activeDescendant\"\n    [attr.aria-multiselectable]=\"multiple\"\n    [attr.required]=\"required\"\n    [attr.aria-readonly]=\"readonly\"\n    cdkTrapFocus=\"!autocomplete\"\n    [cdkTrapFocusAutoCapture]=\"true\"\n  >\n    <div class=\"a-pry-select__options__option -hint\" *ngIf=\"loading\" [style.width.px]=\"modalWidth\">\n      <div class=\"no-widget no-widget__loader\">\n        <pry-icon\n          iconSvg=\"loader\"\n          class=\"no-widget__loading\"\n          [alt]=\"'@pry.widget.target.loading' | i18n\"\n          [width]=\"30\"\n          [height]=\"30\"\n          *ngIf=\"loading\"\n        />\n      </div>\n      <p>{{ '@pry.select.loading' | i18n }}...</p>\n    </div>\n    <ng-container *ngIf=\"!loading\">\n      <ng-container *ngFor=\"let item of matchingItems$ | async; let index = index; let first = first; let last = last\">\n        <div\n          class=\"a-pry-select__options__option\"\n          [attr.aria-selected]=\"(valueItems$ | async).includes(item)\"\n          [attr.aria-checked]=\"(valueItems$ | async).includes(item)\"\n          [attr.aria-disabled]=\"disabled\"\n          (click)=\"select($event, item, index)\"\n          (keydown)=\"onKeydownOption($event, item, index, optionDivRef, first, last)\"\n          [style.width.px]=\"modalWidth\"\n          role=\"option\"\n          [id]=\"'select-option-' + index\"\n          tabindex=\"0\"\n          #optionDivRef\n        >\n          <ng-container *ngIf=\"template; else noTemplate\">\n            <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item, clear }\"></ng-container>\n          </ng-container>\n          <ng-template #noTemplate>\n            <pry-icon\n              *ngIf=\"bindIcon\"\n              [iconSvg]=\"item[bindIcon]\"\n              [width]=\"iconSize[0]\"\n              [height]=\"iconSize[1]\"\n            ></pry-icon>\n            <ng-container *ngIf=\"bindLabel ? item?.[bindLabel] : item as value\">\n              {{ (i18nPrefix ? i18nPrefix : '') + value | i18n : { warn: false } }}\n            </ng-container>\n          </ng-template>\n        </div>\n      </ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n" }]
+                    ], template: "<div\n  class=\"a-pry-select\"\n  [attr.aria-disabled]=\"disabled\"\n  #selectElement\n  [class.-focused]=\"focused\"\n  (click)=\"handleClick()\"\n  role=\"combobox\"\n  [attr.aria-expanded]=\"open\"\n  [attr.aria-owns]=\"open ? modalId : null\"\n  aria-haspopup=\"listbox\"\n  tabindex=\"0\"\n  cdkMonitorElementFocus\n  (cdkFocusChange)=\"onFocusChange($event)\"\n  (keydown)=\"onKeydownSelect($event)\"\n>\n  <div class=\"a-pry-select__content\">\n    <ng-container *ngIf=\"autocomplete; else noAutocomplete\">\n      <input\n        type=\"text\"\n        class=\"a-pry-select__search\"\n        [ngModel]=\"search$.getValue()\"\n        (ngModelChange)=\"search($event)\"\n        aria-autocomplete=\"list\"\n        [attr.aria-controls]=\"open ? modalId : null\"\n        [attr.aria-disabled]=\"disabled\"\n        [disabled]=\"disabled\"\n        (keydown)=\"onKeydownAutocompleteInput($event)\"\n        #input\n      />\n    </ng-container>\n    <ng-template #noAutocomplete>\n      <ng-container *ngIf=\"(valueItems$ | async).length === 0; else selectedValues\">\n        <span class=\"a-pry-select__placeholder\">{{ placeholder }}</span>\n      </ng-container>\n      <ng-template #selectedValues>\n        <ng-container *ngFor=\"let item of valueItems$ | async\">\n          <div class=\"a-pry-select__value\" [class.pry-select-form]=\"isForm\" [class.-multiple]=\"multiple\">\n            <ng-container *ngIf=\"template; else noTemplateLabel\">\n              <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item, clear }\"></ng-container>\n            </ng-container>\n            <ng-template #noTemplateLabel>\n              <pry-icon\n                *ngIf=\"bindIcon\"\n                [iconSvg]=\"item[bindIcon]\"\n                [width]=\"iconSize[0]\"\n                [height]=\"iconSize[1]\"\n              ></pry-icon>\n              <ng-container *ngIf=\"bindLabel ? item?.[bindLabel] : item as value\">\n                {{ (i18nPrefix ?? '') + value | i18n : { warn: false } }}\n                <span\n                  *ngIf=\"multiple && clearable\"\n                  class=\"a-pry-select__clear\"\n                  (click)=\"clear($event, item)\"\n                  aria-hidden=\"true\"\n                  >\u00D7</span\n                >\n              </ng-container>\n            </ng-template>\n          </div>\n        </ng-container>\n      </ng-template>\n      <div class=\"a-pry-select__filler\"></div>\n    </ng-template>\n  </div>\n  <div class=\"a-pry-select__actions\">\n    <span *ngIf=\"clearable\" class=\"a-pry-select__clear\" (click)=\"clearAll($event)\" aria-hidden=\"true\">\u00D7</span>\n    <pry-icon\n      class=\"a-pry-select__toggle\"\n      [iconSvg]=\"open ? 'chevron_top' : 'chevron_bottom'\"\n      [width]=\"iconSize[0]\"\n      [height]=\"iconSize[1]\"\n    ></pry-icon>\n  </div>\n</div>\n<ng-template #optionsModal>\n  <div\n    role=\"listbox\"\n    [attr.aria-label]=\"'@pry.select.label' | i18n\"\n    [id]=\"modalId\"\n    [attr.aria-activedescendant]=\"'select-option-' + activeDescendant\"\n    [attr.aria-multiselectable]=\"multiple\"\n    [attr.required]=\"required\"\n    [attr.aria-readonly]=\"readonly\"\n    cdkTrapFocus=\"!autocomplete\"\n    [cdkTrapFocusAutoCapture]=\"!autocomplete\"\n  >\n    <div class=\"a-pry-select__options__option -hint\" *ngIf=\"loading\" [style.width.px]=\"modalWidth\">\n      <div class=\"no-widget no-widget__loader\">\n        <pry-icon\n          iconSvg=\"loader\"\n          class=\"no-widget__loading\"\n          [alt]=\"'@pry.widget.target.loading' | i18n\"\n          [width]=\"30\"\n          [height]=\"30\"\n          *ngIf=\"loading\"\n        />\n      </div>\n      <p>{{ '@pry.select.loading' | i18n }}...</p>\n    </div>\n    <ng-container *ngIf=\"!loading\">\n      <ng-container *ngFor=\"let item of matchingItems$ | async; let index = index; let first = first; let last = last\">\n        <div\n          class=\"a-pry-select__options__option\"\n          [attr.aria-selected]=\"(valueItems$ | async).includes(item)\"\n          [attr.aria-checked]=\"(valueItems$ | async).includes(item)\"\n          [attr.aria-disabled]=\"disabled\"\n          (click)=\"select($event, item, index)\"\n          (keydown)=\"onKeydownOption($event, item, index, optionDivRef, first, last)\"\n          [style.width.px]=\"modalWidth\"\n          role=\"option\"\n          [id]=\"'select-option-' + index\"\n          tabindex=\"0\"\n          #optionDivRef\n        >\n          <ng-container *ngIf=\"template; else noTemplate\">\n            <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item, clear }\"></ng-container>\n          </ng-container>\n          <ng-template #noTemplate>\n            <pry-icon\n              *ngIf=\"bindIcon\"\n              [iconSvg]=\"item[bindIcon]\"\n              [width]=\"iconSize[0]\"\n              [height]=\"iconSize[1]\"\n            ></pry-icon>\n            <ng-container *ngIf=\"bindLabel ? item?.[bindLabel] : item as value\">\n              {{ (i18nPrefix ? i18nPrefix : '') + value | i18n : { warn: false } }}\n            </ng-container>\n          </ng-template>\n        </div>\n      </ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i2.Overlay }, { type: i0.ViewContainerRef }, { type: SelectA11yService }]; }, propDecorators: { items: [{
                 type: Input
             }], clearable: [{
@@ -7567,43 +7579,33 @@ const solvingCollisionOptions = {
     minRows: 0
 };
 function solveCollisions(candidateWidget, initialWidgetManifestList, dashboardManifest) {
-    let rows = dashboardManifest.grid?.rows ?? DEFAULT_ROWS_NUMBER;
     const nextWidgetList = candidateWidget
         ? JSON.parse(JSON.stringify([
             {
                 ...candidateWidget,
-                layout: { ...(candidateWidget?.layout ?? { x: 1, y: 1, width: 1, height: 1 }), weight: 10 }
+                layout: { ...(candidateWidget?.layout ?? { x: 1, y: 1, width: 1, height: 1 }) }
             },
             ...initialWidgetManifestList
         ]))
         : [];
-    let nonBlocking = 10000;
     // Force all layout values to be positive and cannot be outside the grid
-    const actualCols = dashboardManifest.grid?.columns ?? DEFAULT_COLUMNS_NUMBER;
+    const columns = dashboardManifest.grid?.columns ?? DEFAULT_COLUMNS_NUMBER;
     nextWidgetList.forEach((w) => {
         w.layout.height = w.layout.height <= 0 ? 1 : w.layout.height;
         w.layout.width = w.layout.width <= 0 ? 1 : w.layout.width;
         w.layout.x =
-            w.layout.x <= 0 ? 1 : w.layout.x + w.layout.width > actualCols ? actualCols - w.layout.width + 1 : w.layout.x;
+            w.layout.x <= 0 ? 1 : w.layout.x + w.layout.width > columns ? columns - w.layout.width + 1 : w.layout.x;
         w.layout.y = w.layout.y <= 0 ? 1 : w.layout.y;
     });
-    let overlappingWidgets = WidgetPlacementUtils.getOverlaps(nextWidgetList);
-    while (overlappingWidgets.length > 0 && nonBlocking > 0) {
-        overlappingWidgets.forEach((widgets) => {
-            // Keep upmost widget (and leftmost with lower priority)
-            const [stayingWidget, ...movingWidgets] = [...widgets].sort(orderWidgetsAccordingToPlacement);
-            stayingWidget.layout.y = Math.min(...widgets.map((w) => w.layout.y));
-            movingWidgets.forEach((movingWidget) => (movingWidget.layout.y = stayingWidget.layout.y + stayingWidget.layout.height));
-        });
-        overlappingWidgets = WidgetPlacementUtils.getOverlaps(nextWidgetList);
-        nonBlocking--;
+    let rows = dashboardManifest.grid?.rows ?? DEFAULT_ROWS_NUMBER;
+    let overlappingWidgets = WidgetPlacementUtils.getOverlaps(initialWidgetManifestList);
+    if (overlappingWidgets.length > 0) {
+        console.warn('Widgets are already overlapping. We cannot have a correct solution for this.');
     }
-    // Adding rows if needed
-    rows = Math.max(rows, ...nextWidgetList.map((widget) => widget.layout.y + widget.layout.height - 1));
-    nextWidgetList.forEach((widget) => delete widget.layout.weight);
     const layout = dashboardManifest.grid?.layout ?? DashboardGridLayout.MANUAL;
+    let result = undefined;
     if (!solvingCollisionOptions.invertedGravity || layout !== DashboardGridLayout.MANUAL) {
-        return {
+        result = {
             ...dashboardManifest,
             grid: { ...dashboardManifest.grid, rows },
             widgets: nextWidgetList
@@ -7628,15 +7630,16 @@ function solveCollisions(candidateWidget, initialWidgetManifestList, dashboardMa
                 }
             });
         }
-        return {
+        result = {
             ...dashboardManifest,
             grid: {
-                ...dashboardManifest.grid,
-                rows: Math.max(solvingCollisionOptions.minRows, ...nextWidgetList.map((w) => w.layout.y + w.layout.height - 1))
+                ...dashboardManifest.grid
             },
             widgets: nextWidgetList
         };
     }
+    const newOverlaps = WidgetPlacementUtils.getOverlaps(result.widgets);
+    return newOverlaps.length > 0 ? dashboardManifest : result;
 }
 
 class BaseWidgetComponent extends SubscriptionnerDirective {
@@ -7719,12 +7722,36 @@ class WidgetFillerComponent extends BaseWidgetComponent {
         // @ts-ignore
         return this.manifest.options?.index ?? 0;
     }
+    moveToPlace() {
+        // @ts-ignore
+        const startLayout = this.manifest.options?.sourcePlace;
+        // @ts-ignore
+        const targetLayout = this.manifest.options?.targetPlace;
+        // @ts-ignore
+        if (startLayout && targetLayout && this.manifest.options?.windowManifest && this.index !== '-') {
+            // @ts-ignore
+            const newWindowManifest = JSON.parse(JSON.stringify(this.manifest.options?.windowManifest));
+            const targetWidgetIndex = newWindowManifest.widgets.findIndex((w) => w.layout.x === targetLayout.x &&
+                w.layout.y === targetLayout.y &&
+                w.layout.width === targetLayout.width &&
+                w.layout.height === targetLayout.height);
+            const startWidgetIndex = newWindowManifest.widgets.findIndex((w) => w.layout.x === startLayout.x &&
+                w.layout.y === startLayout.y &&
+                w.layout.width === startLayout.width &&
+                w.layout.height === startLayout.height);
+            if (targetWidgetIndex !== -1) {
+                newWindowManifest.widgets[targetWidgetIndex].layout = startLayout;
+            }
+            newWindowManifest.widgets[startWidgetIndex].layout = targetLayout;
+            this.store.dispatch(DashboardActions.updateDashboardManifest({ manifest: newWindowManifest }));
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WidgetFillerComponent, deps: [{ token: i1.Store }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: WidgetFillerComponent, selector: "pry-widget-filler", usesInheritance: true, ngImport: i0, template: "<div class=\"a-indicator-block\">\n  <p>{{ index + 1 }}</p>\n</div>\n" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: WidgetFillerComponent, selector: "pry-widget-filler", usesInheritance: true, ngImport: i0, template: "<div class=\"filler-backdrop\" (click)=\"moveToPlace()\">\n  <div class=\"a-indicator-block\">\n    <p>{{ index === -1 ? '-' : index + 1 }}</p>\n  </div>\n</div>\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WidgetFillerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-widget-filler', template: "<div class=\"a-indicator-block\">\n  <p>{{ index + 1 }}</p>\n</div>\n" }]
+            args: [{ selector: 'pry-widget-filler', template: "<div class=\"filler-backdrop\" (click)=\"moveToPlace()\">\n  <div class=\"a-indicator-block\">\n    <p>{{ index === -1 ? '-' : index + 1 }}</p>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1.Store }, { type: i0.ElementRef }]; } });
 
 const WIDGET_DEFINITION = new InjectionToken('Widgets definition');
@@ -8261,6 +8288,9 @@ class DashboardComponent extends SubscriptionnerDirective {
     set staticDashboard(window) {
         this.staticDashboard$.next(window);
     }
+    set forceModeEdition(mode) {
+        this.forceModeEdition$.next(mode);
+    }
     constructor(store, overlay, viewContainerRef) {
         super();
         this.store = store;
@@ -8272,6 +8302,7 @@ class DashboardComponent extends SubscriptionnerDirective {
         this.stacked$ = new BehaviorSubject(false);
         this.indexForRemoval = -1;
         this.params = {};
+        this.forceModeEdition$ = new BehaviorSubject(undefined);
         this.CloseOnDragOut = true;
         this.noBackground = false;
         this.canCalculateView = false;
@@ -8302,7 +8333,10 @@ class DashboardComponent extends SubscriptionnerDirective {
         this.layout = DashboardGridLayout.MANUAL;
         this.loading$ = this.store.select(DashboardSelectors.loading);
         this.dataFetching$ = this.store.select(SearchSelectors.searchLoading).pipe(delay$1(10));
-        this.modeEdition$ = this.store.select(DashboardSelectors.dashboardEditionMode);
+        this.modeEdition$ = combineLatest([
+            this.store.select(DashboardSelectors.dashboardEditionMode),
+            this.forceModeEdition$
+        ]).pipe(map$1(([storeMode, forceMode]) => (forceMode === undefined ? storeMode : forceMode)));
         this.subscriptions.add(this.modeEdition$.subscribe((mode) => {
             this.modeEdition = mode;
             if (!mode) {
@@ -8385,8 +8419,8 @@ class DashboardComponent extends SubscriptionnerDirective {
             : manifest.grid?.rows ?? DEFAULT_ROWS_NUMBER)));
         this.gridTemplateColumns$ = combineLatest([this.windowManifest$, this.stacked$]).pipe(map$1(([manifest, stacked]) => this.generateColumns(stacked ? 1 : manifest.grid?.columns || DEFAULT_COLUMNS_NUMBER)));
         this.backgroundArea$ = combineLatest([this.windowManifest$, this.stacked$]).pipe(map$1(([manifest, stacked]) => !stacked
-            ? `3/3/${(manifest.grid?.rows ?? DEFAULT_ROWS_NUMBER) - 1}/${(manifest.grid?.columns ?? DEFAULT_COLUMNS_NUMBER) - 1}`
-            : `3/1/${(manifest.grid?.columns ?? DEFAULT_COLUMNS_NUMBER) - 1}/1`));
+            ? `1/1/${(manifest.grid?.rows ?? DEFAULT_ROWS_NUMBER) + 1}/${(manifest.grid?.columns ?? DEFAULT_COLUMNS_NUMBER) + 1}`
+            : `1/1/${(manifest.grid?.columns ?? DEFAULT_COLUMNS_NUMBER) + 1}/1`));
         this.separators$ = this.store
             .select(DashboardSelectors.gridLayout)
             .pipe(map$1((layout) => layout === DashboardGridLayout.MANUAL ? [] : WidgetPlacementUtils.getLayout(layout)?.places ?? []));
@@ -8770,12 +8804,29 @@ class DashboardComponent extends SubscriptionnerDirective {
     trackWidgets(index, widgetManifest) {
         return index + '-' + widgetManifest.type + '-' + JSON.stringify(widgetManifest.layout);
     }
+    changeSize(direction, offset) {
+        const minRows = (this.manifest?.widgets.map((w) => w.layout.height + w.layout.y).reduce((a, b) => (a > b ? a : b), 2) ?? 2) - 1;
+        const minColumns = (this.manifest?.widgets.map((w) => w.layout.width + w.layout.x).reduce((a, b) => (a > b ? a : b), 2) ?? 2) - 1;
+        const futureSize = {
+            rows: Math.max(minRows, (this.manifest.grid?.rows ?? DEFAULT_ROWS_NUMBER) + (direction === 'rows' ? offset : 0)),
+            columns: Math.max(minColumns, (this.manifest.grid?.columns ?? DEFAULT_COLUMNS_NUMBER) + (direction === 'columns' ? offset : 0))
+        };
+        this.store.dispatch(DashboardActions.updateDashboardManifest({
+            manifest: {
+                ...this.manifest,
+                grid: {
+                    ...(this.manifest?.grid ?? {}),
+                    ...futureSize
+                }
+            }
+        }));
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DashboardComponent, deps: [{ token: i1.Store }, { token: i2.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DashboardComponent, selector: "pry-dashboard", inputs: { staticDashboard: "staticDashboard", CloseOnDragOut: "CloseOnDragOut", displayOptions: "displayOptions", noBackground: "noBackground", breakpoint: "breakpoint" }, outputs: { rowHeight: "rowHeight", rows: "rows" }, viewQueries: [{ propertyName: "templateModal", first: true, predicate: ["templateModal"], descendants: true, read: TemplateRef }, { propertyName: "gridRef", first: true, predicate: ["grid"], descendants: true }, { propertyName: "instanciators", predicate: WidgetInstanciatorComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"o-dashboard-grid\"\n  [style.gridTemplateColumns]=\"gridTemplateColumns$ | async\"\n  [style.gridTemplateRows]=\"gridTemplateRows$ | async\"\n  [style.gridGap]=\"dashboardParams.gridGap + 'px'\"\n  [style.padding]=\"'0 ' + dashboardParams.gridGap + 'px'\"\n  #grid\n  (mousemove)=\"movingMouse($event)\"\n  (drop)=\"dropping($event)\"\n  (dragover)=\"dragMove($event)\"\n  (dragleave)=\"dragLeave($event)\"\n  (dragenter)=\"dragEnter($event)\"\n>\n  <ng-container\n    *ngFor=\"\n      let widgetManifest of (windowManifest$ | async)?.widgets || [];\n      let widgetIndex = index;\n      trackBy: trackWidgets\n    \"\n  >\n    <div\n      class=\"o-dashboard-widget\"\n      [class.-edited]=\"modeEdition\"\n      [style.gridColumn]=\"gridColumn(widgetManifest.layout)\"\n      [style.gridRow]=\"gridRow(widgetManifest.layout)\"\n      (drop)=\"droppingInWidget($event, widgetIndex)\"\n    >\n      <ng-container *ngIf=\"modeEdition\">\n        <div class=\"resize nw-resize\" (mousedown)=\"startResize($event, widgetIndex, 'resize-nw')\">\n          <pry-icon iconSvg=\"north_west\" [animation]=\"false\"></pry-icon>\n        </div>\n        <div class=\"resize sw-resize\" (mousedown)=\"startResize($event, widgetIndex, 'resize-sw')\">\n          <pry-icon iconSvg=\"south_west\" [animation]=\"false\"></pry-icon>\n        </div>\n        <div class=\"resize ne-resize\" (mousedown)=\"startResize($event, widgetIndex, 'resize-ne')\">\n          <pry-icon iconSvg=\"north_east\" [animation]=\"false\"></pry-icon>\n        </div>\n        <div class=\"resize se-resize\" (mousedown)=\"startResize($event, widgetIndex, 'resize-se')\">\n          <pry-icon iconSvg=\"south_east\" [animation]=\"false\"></pry-icon>\n        </div>\n        <div class=\"resize delete\" (mousedown)=\"toggleRemoveConfirm($event, widgetIndex)\">\n          <pry-icon iconSvg=\"close\" [animation]=\"false\"></pry-icon>\n        </div>\n        <div class=\"move\" draggable=\"true\" (dragstart)=\"dragStart($event, widgetIndex)\">\n          <div class=\"move-inside move-{{ widgetManifest.type }}\">\n            <span>{{ widgetManifest.title ?? ('@pry.toolbox.' + widgetManifest.type | i18n) }}</span>\n          </div>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"!modeEdition\">\n        <pry-widget-instanciator\n          [staticManifest]=\"widgetManifest\"\n          [widgetIndex]=\"widgetIndex\"\n        ></pry-widget-instanciator>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!noBackground\">\n    <ng-container\n      *ngIf=\"{\n        noWidgets: (nonFillerWidgets$ | async) === 0,\n        globalLoading: loading$ | async,\n        fetchLoading: (dataFetching$ | async)?.length ?? 1 > 0\n      } as data\"\n    >\n      <ng-container *ngIf=\"data.noWidgets\">\n        <div *ngIf=\"data.globalLoading; else notLoading\" class=\"no-widget\" [style.grid-area]=\"backgroundArea$ | async\">\n          <pry-icon\n            iconSvg=\"loader\"\n            class=\"no-widget__loading\"\n            [alt]=\"'@pry.widget.target.loading' | i18n\"\n            [width]=\"100\"\n            [height]=\"100\"\n          />\n          <span class=\"no-widget__text\">{{ '@pry.widget.target.loading' | i18n }}...</span>\n        </div>\n        <ng-template #notLoading>\n          <div class=\"no-widget\" [style.grid-area]=\"backgroundArea$ | async\">\n            <img\n              class=\"no-widget__search\"\n              src=\"../../../assets/svgs/pry_recherche.svg\"\n              alt=\"{{\n                (layout === DashboardGridLayout.MANUAL\n                  ? '@pry.widget.target.none_manual'\n                  : '@pry.widget.target.none_auto'\n                ) | i18n\n              }} {{ backgroundArea$ | async }}\"\n            />\n            <span class=\"no-widget__text\">{{\n              (layout === DashboardGridLayout.MANUAL\n                ? '@pry.widget.target.none_manual'\n                : '@pry.widget.target.none_auto'\n              ) | i18n\n            }}</span>\n          </div>\n        </ng-template>\n      </ng-container>\n      <div\n        class=\"a-page-loader backdrop\"\n        [style.display]=\"data.fetchLoading && !data.globalLoading ? 'flex' : 'none'\"\n        [style.width.px]=\"params.gridWidth\"\n        [style.height.px]=\"params.gridHeight\"\n      >\n        <pry-icon\n          iconSvg=\"loader\"\n          class=\"no-widget__loading\"\n          [alt]=\"'@pry.widget.target.loading' | i18n\"\n          [width]=\"200\"\n          [height]=\"200\"\n        />\n        <p>{{ '@pry.widget.target.loading' | i18n }}...</p>\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n<pry-context-menu></pry-context-menu>\n\n<ng-template #templateModal>\n  <div class=\"o-modal\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ '@pry.widget.modalTitle' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"cancelRemoveConfirm()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <div class=\"m-btn-group\">\n      <button type=\"button\" (click)=\"cancelRemoveConfirm()\" class=\"a-btn a-btn--secondary\">\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n      <button type=\"submit\" (click)=\"confirmRemove()\" class=\"a-btn a-btn--primary\">\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: WidgetInstanciatorComponent, selector: "pry-widget-instanciator", inputs: ["widgetIndex", "staticManifest", "standalone", "open$"], outputs: ["manifestModified"] }, { kind: "component", type: ContextMenuComponent, selector: "pry-context-menu" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DashboardComponent, selector: "pry-dashboard", inputs: { staticDashboard: "staticDashboard", forceModeEdition: "forceModeEdition", CloseOnDragOut: "CloseOnDragOut", displayOptions: "displayOptions", noBackground: "noBackground", breakpoint: "breakpoint" }, outputs: { rowHeight: "rowHeight", rows: "rows" }, viewQueries: [{ propertyName: "templateModal", first: true, predicate: ["templateModal"], descendants: true, read: TemplateRef }, { propertyName: "gridRef", first: true, predicate: ["grid"], descendants: true }, { propertyName: "instanciators", predicate: WidgetInstanciatorComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"o-dashboard-grid\"\n  [style.gridTemplateColumns]=\"gridTemplateColumns$ | async\"\n  [style.gridTemplateRows]=\"gridTemplateRows$ | async\"\n  [style.gridGap]=\"dashboardParams.gridGap + 'px'\"\n  [style.padding]=\"'0 ' + dashboardParams.gridGap + 'px'\"\n  #grid\n  (mousemove)=\"movingMouse($event)\"\n  (drop)=\"dropping($event)\"\n  (dragover)=\"dragMove($event)\"\n  (dragleave)=\"dragLeave($event)\"\n  (dragenter)=\"dragEnter($event)\"\n>\n  <ng-container *ngIf=\"modeEdition$ | async\">\n    <div class=\"o-dashboard-add -rows\" [style.height.px]=\"this.params.gridHeight\">\n      <button class=\"a-btn a-btn--primary a-btn--icon-only\" (click)=\"changeSize('rows', -1)\">\n        <pry-icon iconSvg=\"contract-left\" [width]=\"16\" [height]=\"16\"></pry-icon>\n      </button>\n      <button class=\"a-btn a-btn--primary a-btn--icon-only\" (click)=\"changeSize('rows', +1)\">\n        <pry-icon iconSvg=\"expand-right\" [width]=\"16\" [height]=\"16\"></pry-icon>\n      </button>\n    </div>\n    <div class=\"o-dashboard-add -cols\" [style.width.px]=\"this.params.gridWidth\">\n      <button class=\"a-btn a-btn--primary a-btn--icon-only\" (click)=\"changeSize('columns', -1)\">\n        <pry-icon iconSvg=\"contract-left\" [width]=\"16\" [height]=\"16\"></pry-icon>\n      </button>\n      <button class=\"a-btn a-btn--primary a-btn--icon-only\" (click)=\"changeSize('columns', +1)\">\n        <pry-icon iconSvg=\"expand-right\" [width]=\"16\" [height]=\"16\"></pry-icon>\n      </button>\n    </div>\n  </ng-container>\n  <ng-container\n    *ngFor=\"\n      let widgetManifest of (windowManifest$ | async)?.widgets || [];\n      let widgetIndex = index;\n      trackBy: trackWidgets\n    \"\n  >\n    <div\n      class=\"o-dashboard-widget\"\n      [class.-edited]=\"modeEdition\"\n      [style.gridColumn]=\"gridColumn(widgetManifest.layout)\"\n      [style.gridRow]=\"gridRow(widgetManifest.layout)\"\n      (drop)=\"droppingInWidget($event, widgetIndex)\"\n    >\n      <ng-container *ngIf=\"modeEdition\">\n        <div class=\"resize nw-resize\" (mousedown)=\"startResize($event, widgetIndex, 'resize-nw')\">\n          <pry-icon iconSvg=\"north_west\" [animation]=\"false\"></pry-icon>\n        </div>\n        <div class=\"resize sw-resize\" (mousedown)=\"startResize($event, widgetIndex, 'resize-sw')\">\n          <pry-icon iconSvg=\"south_west\" [animation]=\"false\"></pry-icon>\n        </div>\n        <div class=\"resize ne-resize\" (mousedown)=\"startResize($event, widgetIndex, 'resize-ne')\">\n          <pry-icon iconSvg=\"north_east\" [animation]=\"false\"></pry-icon>\n        </div>\n        <div class=\"resize se-resize\" (mousedown)=\"startResize($event, widgetIndex, 'resize-se')\">\n          <pry-icon iconSvg=\"south_east\" [animation]=\"false\"></pry-icon>\n        </div>\n        <div class=\"resize delete\" (mousedown)=\"toggleRemoveConfirm($event, widgetIndex)\">\n          <pry-icon iconSvg=\"close\" [animation]=\"false\"></pry-icon>\n        </div>\n        <div class=\"move\" draggable=\"true\" (dragstart)=\"dragStart($event, widgetIndex)\">\n          <div class=\"move-inside move-{{ widgetManifest.type }}\">\n            <span>{{ widgetManifest.title ?? ('@pry.toolbox.' + widgetManifest.type | i18n) }}</span>\n          </div>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"!modeEdition\">\n        <pry-widget-instanciator\n          [staticManifest]=\"widgetManifest\"\n          [widgetIndex]=\"widgetIndex\"\n        ></pry-widget-instanciator>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!noBackground\">\n    <ng-container\n      *ngIf=\"{\n        noWidgets: (nonFillerWidgets$ | async) === 0,\n        globalLoading: loading$ | async,\n        fetchLoading: (dataFetching$ | async)?.length ?? 1 > 0\n      } as data\"\n    >\n      <ng-container *ngIf=\"data.noWidgets\">\n        <div *ngIf=\"data.globalLoading; else notLoading\" class=\"no-widget\" [style.grid-area]=\"backgroundArea$ | async\">\n          <pry-icon\n            iconSvg=\"loader\"\n            class=\"no-widget__loading\"\n            [alt]=\"'@pry.widget.target.loading' | i18n\"\n            [width]=\"100\"\n            [height]=\"100\"\n          />\n          <span class=\"no-widget__text\">{{ '@pry.widget.target.loading' | i18n }}...</span>\n        </div>\n        <ng-template #notLoading>\n          <div class=\"no-widget\" [style.grid-area]=\"backgroundArea$ | async\">\n            <img\n              class=\"no-widget__search\"\n              src=\"../../../assets/svgs/pry_recherche.svg\"\n              alt=\"{{\n                (layout === DashboardGridLayout.MANUAL\n                  ? '@pry.widget.target.none_manual'\n                  : '@pry.widget.target.none_auto'\n                ) | i18n\n              }}\"\n            />\n            <span class=\"no-widget__text\">{{\n              (layout === DashboardGridLayout.MANUAL\n                ? '@pry.widget.target.none_manual'\n                : '@pry.widget.target.none_auto'\n              ) | i18n\n            }}</span>\n          </div>\n        </ng-template>\n      </ng-container>\n      <div\n        class=\"a-page-loader backdrop\"\n        [style.display]=\"data.fetchLoading && !data.globalLoading ? 'flex' : 'none'\"\n        [style.width.px]=\"params.gridWidth\"\n        [style.height.px]=\"params.gridHeight\"\n      >\n        <pry-icon\n          iconSvg=\"loader\"\n          class=\"no-widget__loading\"\n          [alt]=\"'@pry.widget.target.loading' | i18n\"\n          [width]=\"200\"\n          [height]=\"200\"\n        />\n        <p>{{ '@pry.widget.target.loading' | i18n }}...</p>\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n<pry-context-menu></pry-context-menu>\n\n<ng-template #templateModal>\n  <div class=\"o-modal\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ '@pry.widget.modalTitle' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"cancelRemoveConfirm()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <div class=\"m-btn-group\">\n      <button type=\"button\" (click)=\"cancelRemoveConfirm()\" class=\"a-btn a-btn--secondary\">\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n      <button type=\"submit\" (click)=\"confirmRemove()\" class=\"a-btn a-btn--primary\">\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: WidgetInstanciatorComponent, selector: "pry-widget-instanciator", inputs: ["widgetIndex", "staticManifest", "standalone", "open$"], outputs: ["manifestModified"] }, { kind: "component", type: ContextMenuComponent, selector: "pry-context-menu" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DashboardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-dashboard', template: "<div\n  class=\"o-dashboard-grid\"\n  [style.gridTemplateColumns]=\"gridTemplateColumns$ | async\"\n  [style.gridTemplateRows]=\"gridTemplateRows$ | async\"\n  [style.gridGap]=\"dashboardParams.gridGap + 'px'\"\n  [style.padding]=\"'0 ' + dashboardParams.gridGap + 'px'\"\n  #grid\n  (mousemove)=\"movingMouse($event)\"\n  (drop)=\"dropping($event)\"\n  (dragover)=\"dragMove($event)\"\n  (dragleave)=\"dragLeave($event)\"\n  (dragenter)=\"dragEnter($event)\"\n>\n  <ng-container\n    *ngFor=\"\n      let widgetManifest of (windowManifest$ | async)?.widgets || [];\n      let widgetIndex = index;\n      trackBy: trackWidgets\n    \"\n  >\n    <div\n      class=\"o-dashboard-widget\"\n      [class.-edited]=\"modeEdition\"\n      [style.gridColumn]=\"gridColumn(widgetManifest.layout)\"\n      [style.gridRow]=\"gridRow(widgetManifest.layout)\"\n      (drop)=\"droppingInWidget($event, widgetIndex)\"\n    >\n      <ng-container *ngIf=\"modeEdition\">\n        <div class=\"resize nw-resize\" (mousedown)=\"startResize($event, widgetIndex, 'resize-nw')\">\n          <pry-icon iconSvg=\"north_west\" [animation]=\"false\"></pry-icon>\n        </div>\n        <div class=\"resize sw-resize\" (mousedown)=\"startResize($event, widgetIndex, 'resize-sw')\">\n          <pry-icon iconSvg=\"south_west\" [animation]=\"false\"></pry-icon>\n        </div>\n        <div class=\"resize ne-resize\" (mousedown)=\"startResize($event, widgetIndex, 'resize-ne')\">\n          <pry-icon iconSvg=\"north_east\" [animation]=\"false\"></pry-icon>\n        </div>\n        <div class=\"resize se-resize\" (mousedown)=\"startResize($event, widgetIndex, 'resize-se')\">\n          <pry-icon iconSvg=\"south_east\" [animation]=\"false\"></pry-icon>\n        </div>\n        <div class=\"resize delete\" (mousedown)=\"toggleRemoveConfirm($event, widgetIndex)\">\n          <pry-icon iconSvg=\"close\" [animation]=\"false\"></pry-icon>\n        </div>\n        <div class=\"move\" draggable=\"true\" (dragstart)=\"dragStart($event, widgetIndex)\">\n          <div class=\"move-inside move-{{ widgetManifest.type }}\">\n            <span>{{ widgetManifest.title ?? ('@pry.toolbox.' + widgetManifest.type | i18n) }}</span>\n          </div>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"!modeEdition\">\n        <pry-widget-instanciator\n          [staticManifest]=\"widgetManifest\"\n          [widgetIndex]=\"widgetIndex\"\n        ></pry-widget-instanciator>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!noBackground\">\n    <ng-container\n      *ngIf=\"{\n        noWidgets: (nonFillerWidgets$ | async) === 0,\n        globalLoading: loading$ | async,\n        fetchLoading: (dataFetching$ | async)?.length ?? 1 > 0\n      } as data\"\n    >\n      <ng-container *ngIf=\"data.noWidgets\">\n        <div *ngIf=\"data.globalLoading; else notLoading\" class=\"no-widget\" [style.grid-area]=\"backgroundArea$ | async\">\n          <pry-icon\n            iconSvg=\"loader\"\n            class=\"no-widget__loading\"\n            [alt]=\"'@pry.widget.target.loading' | i18n\"\n            [width]=\"100\"\n            [height]=\"100\"\n          />\n          <span class=\"no-widget__text\">{{ '@pry.widget.target.loading' | i18n }}...</span>\n        </div>\n        <ng-template #notLoading>\n          <div class=\"no-widget\" [style.grid-area]=\"backgroundArea$ | async\">\n            <img\n              class=\"no-widget__search\"\n              src=\"../../../assets/svgs/pry_recherche.svg\"\n              alt=\"{{\n                (layout === DashboardGridLayout.MANUAL\n                  ? '@pry.widget.target.none_manual'\n                  : '@pry.widget.target.none_auto'\n                ) | i18n\n              }} {{ backgroundArea$ | async }}\"\n            />\n            <span class=\"no-widget__text\">{{\n              (layout === DashboardGridLayout.MANUAL\n                ? '@pry.widget.target.none_manual'\n                : '@pry.widget.target.none_auto'\n              ) | i18n\n            }}</span>\n          </div>\n        </ng-template>\n      </ng-container>\n      <div\n        class=\"a-page-loader backdrop\"\n        [style.display]=\"data.fetchLoading && !data.globalLoading ? 'flex' : 'none'\"\n        [style.width.px]=\"params.gridWidth\"\n        [style.height.px]=\"params.gridHeight\"\n      >\n        <pry-icon\n          iconSvg=\"loader\"\n          class=\"no-widget__loading\"\n          [alt]=\"'@pry.widget.target.loading' | i18n\"\n          [width]=\"200\"\n          [height]=\"200\"\n        />\n        <p>{{ '@pry.widget.target.loading' | i18n }}...</p>\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n<pry-context-menu></pry-context-menu>\n\n<ng-template #templateModal>\n  <div class=\"o-modal\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ '@pry.widget.modalTitle' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"cancelRemoveConfirm()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <div class=\"m-btn-group\">\n      <button type=\"button\" (click)=\"cancelRemoveConfirm()\" class=\"a-btn a-btn--secondary\">\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n      <button type=\"submit\" (click)=\"confirmRemove()\" class=\"a-btn a-btn--primary\">\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n" }]
+            args: [{ selector: 'pry-dashboard', template: "<div\n  class=\"o-dashboard-grid\"\n  [style.gridTemplateColumns]=\"gridTemplateColumns$ | async\"\n  [style.gridTemplateRows]=\"gridTemplateRows$ | async\"\n  [style.gridGap]=\"dashboardParams.gridGap + 'px'\"\n  [style.padding]=\"'0 ' + dashboardParams.gridGap + 'px'\"\n  #grid\n  (mousemove)=\"movingMouse($event)\"\n  (drop)=\"dropping($event)\"\n  (dragover)=\"dragMove($event)\"\n  (dragleave)=\"dragLeave($event)\"\n  (dragenter)=\"dragEnter($event)\"\n>\n  <ng-container *ngIf=\"modeEdition$ | async\">\n    <div class=\"o-dashboard-add -rows\" [style.height.px]=\"this.params.gridHeight\">\n      <button class=\"a-btn a-btn--primary a-btn--icon-only\" (click)=\"changeSize('rows', -1)\">\n        <pry-icon iconSvg=\"contract-left\" [width]=\"16\" [height]=\"16\"></pry-icon>\n      </button>\n      <button class=\"a-btn a-btn--primary a-btn--icon-only\" (click)=\"changeSize('rows', +1)\">\n        <pry-icon iconSvg=\"expand-right\" [width]=\"16\" [height]=\"16\"></pry-icon>\n      </button>\n    </div>\n    <div class=\"o-dashboard-add -cols\" [style.width.px]=\"this.params.gridWidth\">\n      <button class=\"a-btn a-btn--primary a-btn--icon-only\" (click)=\"changeSize('columns', -1)\">\n        <pry-icon iconSvg=\"contract-left\" [width]=\"16\" [height]=\"16\"></pry-icon>\n      </button>\n      <button class=\"a-btn a-btn--primary a-btn--icon-only\" (click)=\"changeSize('columns', +1)\">\n        <pry-icon iconSvg=\"expand-right\" [width]=\"16\" [height]=\"16\"></pry-icon>\n      </button>\n    </div>\n  </ng-container>\n  <ng-container\n    *ngFor=\"\n      let widgetManifest of (windowManifest$ | async)?.widgets || [];\n      let widgetIndex = index;\n      trackBy: trackWidgets\n    \"\n  >\n    <div\n      class=\"o-dashboard-widget\"\n      [class.-edited]=\"modeEdition\"\n      [style.gridColumn]=\"gridColumn(widgetManifest.layout)\"\n      [style.gridRow]=\"gridRow(widgetManifest.layout)\"\n      (drop)=\"droppingInWidget($event, widgetIndex)\"\n    >\n      <ng-container *ngIf=\"modeEdition\">\n        <div class=\"resize nw-resize\" (mousedown)=\"startResize($event, widgetIndex, 'resize-nw')\">\n          <pry-icon iconSvg=\"north_west\" [animation]=\"false\"></pry-icon>\n        </div>\n        <div class=\"resize sw-resize\" (mousedown)=\"startResize($event, widgetIndex, 'resize-sw')\">\n          <pry-icon iconSvg=\"south_west\" [animation]=\"false\"></pry-icon>\n        </div>\n        <div class=\"resize ne-resize\" (mousedown)=\"startResize($event, widgetIndex, 'resize-ne')\">\n          <pry-icon iconSvg=\"north_east\" [animation]=\"false\"></pry-icon>\n        </div>\n        <div class=\"resize se-resize\" (mousedown)=\"startResize($event, widgetIndex, 'resize-se')\">\n          <pry-icon iconSvg=\"south_east\" [animation]=\"false\"></pry-icon>\n        </div>\n        <div class=\"resize delete\" (mousedown)=\"toggleRemoveConfirm($event, widgetIndex)\">\n          <pry-icon iconSvg=\"close\" [animation]=\"false\"></pry-icon>\n        </div>\n        <div class=\"move\" draggable=\"true\" (dragstart)=\"dragStart($event, widgetIndex)\">\n          <div class=\"move-inside move-{{ widgetManifest.type }}\">\n            <span>{{ widgetManifest.title ?? ('@pry.toolbox.' + widgetManifest.type | i18n) }}</span>\n          </div>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"!modeEdition\">\n        <pry-widget-instanciator\n          [staticManifest]=\"widgetManifest\"\n          [widgetIndex]=\"widgetIndex\"\n        ></pry-widget-instanciator>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!noBackground\">\n    <ng-container\n      *ngIf=\"{\n        noWidgets: (nonFillerWidgets$ | async) === 0,\n        globalLoading: loading$ | async,\n        fetchLoading: (dataFetching$ | async)?.length ?? 1 > 0\n      } as data\"\n    >\n      <ng-container *ngIf=\"data.noWidgets\">\n        <div *ngIf=\"data.globalLoading; else notLoading\" class=\"no-widget\" [style.grid-area]=\"backgroundArea$ | async\">\n          <pry-icon\n            iconSvg=\"loader\"\n            class=\"no-widget__loading\"\n            [alt]=\"'@pry.widget.target.loading' | i18n\"\n            [width]=\"100\"\n            [height]=\"100\"\n          />\n          <span class=\"no-widget__text\">{{ '@pry.widget.target.loading' | i18n }}...</span>\n        </div>\n        <ng-template #notLoading>\n          <div class=\"no-widget\" [style.grid-area]=\"backgroundArea$ | async\">\n            <img\n              class=\"no-widget__search\"\n              src=\"../../../assets/svgs/pry_recherche.svg\"\n              alt=\"{{\n                (layout === DashboardGridLayout.MANUAL\n                  ? '@pry.widget.target.none_manual'\n                  : '@pry.widget.target.none_auto'\n                ) | i18n\n              }}\"\n            />\n            <span class=\"no-widget__text\">{{\n              (layout === DashboardGridLayout.MANUAL\n                ? '@pry.widget.target.none_manual'\n                : '@pry.widget.target.none_auto'\n              ) | i18n\n            }}</span>\n          </div>\n        </ng-template>\n      </ng-container>\n      <div\n        class=\"a-page-loader backdrop\"\n        [style.display]=\"data.fetchLoading && !data.globalLoading ? 'flex' : 'none'\"\n        [style.width.px]=\"params.gridWidth\"\n        [style.height.px]=\"params.gridHeight\"\n      >\n        <pry-icon\n          iconSvg=\"loader\"\n          class=\"no-widget__loading\"\n          [alt]=\"'@pry.widget.target.loading' | i18n\"\n          [width]=\"200\"\n          [height]=\"200\"\n        />\n        <p>{{ '@pry.widget.target.loading' | i18n }}...</p>\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n<pry-context-menu></pry-context-menu>\n\n<ng-template #templateModal>\n  <div class=\"o-modal\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ '@pry.widget.modalTitle' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"cancelRemoveConfirm()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <div class=\"m-btn-group\">\n      <button type=\"button\" (click)=\"cancelRemoveConfirm()\" class=\"a-btn a-btn--secondary\">\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n      <button type=\"submit\" (click)=\"confirmRemove()\" class=\"a-btn a-btn--primary\">\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.Overlay }, { type: i0.ViewContainerRef }]; }, propDecorators: { templateModal: [{
                 type: ViewChild,
                 args: ['templateModal', { read: TemplateRef }]
@@ -8784,6 +8835,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: [WidgetInstanciatorComponent]
             }], staticDashboard: [{
                 type: Input
+            }], forceModeEdition: [{
+                type: Input
             }], CloseOnDragOut: [{
                 type: Input
             }], displayOptions: [{
@@ -9740,7 +9793,6 @@ class PryWidgetHeaderComponent extends SubscriptionnerDirective {
         this.windowManifest = null;
         this.menu = false;
         this.type = LibraryTypes.ILLUSTRATION;
-        this.DEFAULT_ICON_URL = DEFAULT_ICON_URL;
         this.windowManifest$ = this.store
             .select(DashboardSelectors.windowManifest)
             .pipe(distinctUntilChanged$1((p, c) => equal(p, c)));
@@ -9980,6 +10032,7 @@ class PryWidgetHeaderComponent extends SubscriptionnerDirective {
     toggleChangeSpot() {
         if (!this.spotRef) {
             this.places = WidgetPlacementUtils.placementOptions({ type: 'icon' }, this.currentLayout);
+            this.placesManifest();
             this.spotRef = this.overlay.create(new OverlayConfig({
                 hasBackdrop: true,
                 panelClass: ['o-modal-wrapper'],
@@ -9996,25 +10049,6 @@ class PryWidgetHeaderComponent extends SubscriptionnerDirective {
             this.menuOpen();
         }
     }
-    moveToPlace(place) {
-        const startLayout = this.manifest$.getValue().layout;
-        const targetLayout = place.layout;
-        const newWindowManifest = JSON.parse(JSON.stringify(this.windowManifest));
-        const targetWidgetIndex = newWindowManifest.widgets.findIndex((w) => w.layout.x === targetLayout.x &&
-            w.layout.y === targetLayout.y &&
-            w.layout.width === targetLayout.width &&
-            w.layout.height === targetLayout.height);
-        const startWidgetIndex = newWindowManifest.widgets.findIndex((w) => w.layout.x === startLayout.x &&
-            w.layout.y === startLayout.y &&
-            w.layout.width === startLayout.width &&
-            w.layout.height === startLayout.height);
-        if (targetWidgetIndex !== -1) {
-            newWindowManifest.widgets[targetWidgetIndex].layout = startLayout;
-        }
-        newWindowManifest.widgets[startWidgetIndex].layout = targetLayout;
-        this.store.dispatch(DashboardActions.updateDashboardManifest({ manifest: newWindowManifest }));
-        this.toggleChangeSpot();
-    }
     focusCrossElement() {
         this.cross?.nativeElement?.focus();
         this.crossCatalog?.nativeElement?.focus();
@@ -10043,17 +10077,43 @@ class PryWidgetHeaderComponent extends SubscriptionnerDirective {
     isGeo(ds) {
         return ds.metadata?.find((m) => m.metadataDef.name === GeoMetadata.NAMESPACE) !== undefined;
     }
+    placesManifest() {
+        const currentLayout = this.manifest$.getValue()?.layout;
+        this.targetManifest = {
+            widgets: this.places.map((place, idx) => ({
+                ...place,
+                type: 'filler',
+                options: {
+                    index: equal(currentLayout, place.layout)
+                        ? -1
+                        : this.places.findIndex((pl) => place.layout.x === pl.layout.x &&
+                            place.layout.y === pl.layout.y &&
+                            place.layout.width === pl.layout.width &&
+                            place.layout.height === pl.layout.height),
+                    sourcePlace: currentLayout,
+                    targetPlace: place.layout,
+                    windowManifest: this.windowManifest
+                }
+            })),
+            grid: {
+                layout: this.currentLayout,
+                rows: this.windowManifest?.grid?.rows ?? DEFAULT_ROWS_NUMBER,
+                columns: this.windowManifest?.grid?.columns ?? DEFAULT_COLUMNS_NUMBER,
+                gap: 3
+            }
+        };
+    }
     ngOnDestroy() {
         super.ngOnDestroy();
         this.subscription?.unsubscribe();
         this.openSub?.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PryWidgetHeaderComponent, deps: [{ token: i1.Store }, { token: i2.Overlay }, { token: i0.ViewContainerRef }, { token: ToolboxMenuService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PryWidgetHeaderComponent, selector: "pry-widget-header", inputs: { manifest: "manifest", openData$: "openData$", additionalOptions: "additionalOptions", headerOptions: "headerOptions", displayCount: "displayCount", datasourceIds: "datasourceIds", widgetIndex: "widgetIndex" }, outputs: { manifestModified: "manifestModified" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, read: TemplateRef }, { propertyName: "templateModal", first: true, predicate: ["templateModal"], descendants: true, read: TemplateRef }, { propertyName: "toggle", first: true, predicate: ["toggle"], descendants: true, read: TemplateRef }, { propertyName: "overlayMenu", first: true, predicate: ["overlayMenu"], descendants: true, read: TemplateRef }, { propertyName: "overlayCatalog", first: true, predicate: ["overlayCatalog"], descendants: true, read: TemplateRef }, { propertyName: "overlaySpot", first: true, predicate: ["overlaySpot"], descendants: true, read: TemplateRef }, { propertyName: "togglePanel", first: true, predicate: ["togglePanel"], descendants: true }, { propertyName: "cross", first: true, predicate: ["cross"], descendants: true }, { propertyName: "validate", first: true, predicate: ["validate"], descendants: true }, { propertyName: "validateCatalog", first: true, predicate: ["validateCatalog"], descendants: true }, { propertyName: "cancel", first: true, predicate: ["cancel"], descendants: true }, { propertyName: "crossCatalog", first: true, predicate: ["crossCatalog"], descendants: true }, { propertyName: "inputCatalog", first: true, predicate: ["inputCatalog"], descendants: true }, { propertyName: "menuList", first: true, predicate: ["menuList"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"o-widget__header\">\n  <div class=\"o-widget__header__content\">\n    <h2 class=\"o-widget__header__content__title\" *ngIf=\"(manifest$ | async)?.title; else querySelector\">\n      {{ (manifest$ | async)?.title }}\n    </h2>\n    <ng-template #querySelector>\n      <div *ngFor=\"let ds of usedDatasources$ | async\" class=\"o-widget__header__content__query\">\n        <ng-container\n          *ngIf=\"ds.id | translateId : { type: 'datasource', output: 'icon', noDefault: true } | async as url\"\n        >\n          <img [height]=\"20\" [src]=\"url\" [width]=\"20\" alt=\"\" class=\"o-widget__header__content__query__icon\" />\n        </ng-container>\n        <h3 class=\"o-widget__header__content__query__name\">{{ ds.name }}</h3>\n        <h3 class=\"o-widget__header__content__query__name\" *ngIf=\"displayCount && !isGeo(ds)\">\n          ({{ [ds.id] | resultSetSize | async }})\n        </h3>\n      </div>\n      <div *ngIf=\"((usedDatasources$ | async) ?? []).length === 0\" class=\"o-widget__header__content__no-data\">\n        <h2 class=\"o-widget__header__content__title\">{{ '@pry.widget.noData' | i18n }}</h2>\n      </div>\n    </ng-template>\n  </div>\n  <div class=\"m-btn-group\" *ngIf=\"displayContextMenu$ | async as options\">\n    <button\n      type=\"button\"\n      id=\"dialog_Menu\"\n      aria-controls=\"menu\"\n      [attr.aria-expanded]=\"this.menu\"\n      #togglePanel\n      class=\"a-btn a-btn--more\"\n      (click)=\"menuOpen($event)\"\n    >\n      <pry-icon [height]=\"25\" [width]=\"25\" iconSvg=\"more_horiz\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.action.openMenuWidget' | i18n }}</span>\n    </button>\n  </div>\n</div>\n\n<ng-template #overlayMenu>\n  <div class=\"m-context-menu\" *ngIf=\"displayContextMenu$ | async as options\">\n    <ul\n      class=\"m-context-menu__list\"\n      #menuList\n      id=\"menu\"\n      role=\"menu\"\n      aria-modal=\"true\"\n      aria-labelledby=\"dialog_Menu\"\n      (keydown.arrowDown)=\"onArrowDown()\"\n      (keydown.arrowUp)=\"onArrowUp()\"\n      (keydown.escape)=\"menuOpen()\"\n    >\n      <li\n        class=\"m-context-menu__list__item\"\n        role=\"none\"\n        *ngIf=\"(manifest$ | async)?.datasource && (options === true || options['datasourceSelection'] === true)\"\n      >\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          tabindex=\"-1\"\n          id=\"toggleActions\"\n          (click)=\"toggleDatasourceSelection()\"\n          *pryAccess=\"{ module: 'dashboard', page: 'widget', action: 'select_named_query' }\"\n          class=\"a-btn\"\n        >\n          <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"stack-fill\"></pry-icon>\n          <span>{{ '@pry.widget.tooltip.readSearch' | i18n }}</span>\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngIf=\"options === true || options!['parameters'] === true\">\n        <ng-content></ng-content>\n      </li>\n      <ng-container *ngIf=\"options === true || options!['window'] === true\">\n        <li class=\"m-context-menu__list__item\" role=\"none\" *ngFor=\"let targetIndex of targetIndexes$ | async\">\n          <button\n            type=\"button\"\n            (click)=\"moveInNewWindow(_widgetIndex, targetIndex)\"\n            class=\"a-btn\"\n            role=\"menuitem\"\n            tabindex=\"-1\"\n          >\n            <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"launch\"></pry-icon>\n            {{\n              (targetIndex !== -1 ? '@pry.widget.target.existing' : '@pry.widget.target.new')\n                | i18n : { targetIndex: this.targetIndex + 1 }\n            }}\n          </button>\n        </li>\n      </ng-container>\n      <li\n        class=\"m-context-menu__list__item\"\n        role=\"none\"\n        *ngIf=\"hasGrid && (options === true || options!['changeSpot'] === true)\"\n      >\n        <button type=\"button\" role=\"menuitem\" (click)=\"toggleChangeSpot()\" class=\"a-btn\" tabindex=\"-1\">\n          <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"move\"></pry-icon>\n          <span>{{ '@pry.widget.tooltip.changeSpot' | i18n }}</span>\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngIf=\"options === true || options!['maximize'] === true\">\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          tabindex=\"-1\"\n          (click)=\"maximize(_widgetIndex)\"\n          class=\"a-btn\"\n          (keydown.escape)=\"menuOpen()\"\n        >\n          <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"fullscreen\"></pry-icon>\n          {{ '@pry.widget.target.maximize' | i18n }}\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngIf=\"options === true || options!['addToCatalog'] === true\">\n        <button type=\"button\" role=\"menuitem\" tabindex=\"-1\" (click)=\"toggleCatalog()\" class=\"a-btn\">\n          <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"library_add\"></pry-icon>\n          <span>{{ '@pry.widget.tooltip.catalogWidget' | i18n }}</span>\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngIf=\"options === true || options!['delete'] === true\">\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          tabindex=\"-1\"\n          (click)=\"toggleRemoveConfirm($event)\"\n          class=\"a-btn\"\n          (keydown.tab)=\"menuOpen()\"\n        >\n          <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"delete\"></pry-icon>\n          <span>{{ '@pry.widget.tooltip.deleteWidget' | i18n }}</span>\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngFor=\"let option of additionalOptions\">\n        <button\n          type=\"button\"\n          class=\"a-btn\"\n          role=\"menuitem\"\n          tabindex=\"-1\"\n          (click)=\"executeAction(option)\"\n          [disabled]=\"isActionDisabled(option)\"\n        >\n          <pry-icon [height]=\"17\" [width]=\"17\" [iconSvg]=\"option.icon\"></pry-icon>\n          {{ option.label | i18n }}\n        </button>\n      </li>\n    </ul>\n  </div>\n</ng-template>\n\n<ng-template #templateModal>\n  <div\n    class=\"o-modal\"\n    (keydown.escape)=\"cancelRemoveConfirm()\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-labelledby=\"dialog confirm delete presentation\"\n  >\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ '@pry.widget.modalTitle' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" #cross (click)=\"cancelRemoveConfirm()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <div class=\"m-btn-group\">\n      <button type=\"button\" (click)=\"cancelRemoveConfirm()\" class=\"a-btn a-btn--secondary\">\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n      <button type=\"submit\" (click)=\"confirmRemove()\" class=\"a-btn a-btn--primary\" (keydown.tab)=\"focusCrossElement()\">\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #template>\n  <pry-datasource-selector\n    bindLabel=\"name\"\n    bindValue=\"id\"\n    translationStringBase=\"@pry.components.chipsSelector.datasource.\"\n    (cancel)=\"toggleDatasourceSelection()\"\n    (validated)=\"emitManifest()\"\n    (nextTab)=\"focusInputCatalog()\"\n    (previousTab)=\"focusValidation()\"\n    (itemsChanged)=\"datasourcesChanged($event)\"\n    [usedItems]=\"(usedDatasources$ | async) ?? []\"\n  ></pry-datasource-selector>\n</ng-template>\n\n<ng-template #overlayCatalog>\n  <div\n    class=\"o-modal\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-labelledby=\"dialog_Catalog\"\n    (keydown.escape)=\"toggleCatalog()\"\n  >\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\">\n          {{ '@pry.widget.defineCatalog' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button\n          class=\"a-btn a-btn--icon-only\"\n          (keydown.shift.tab)=\"focusValidation()\"\n          #crossCatalog\n          (click)=\"toggleCatalog()\"\n        >\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <div class=\"m-form-label-field\">\n      <label class=\"a-label\" for=\"name\">{{ '@pry.toolbox.catalog.label' | i18n }}</label>\n      <input [(ngModel)]=\"catalogInfo.name\" id=\"name\" type=\"text\" class=\"a-form-field\" required />\n    </div>\n    <div class=\"m-form-label-field\">\n      <label class=\"a-label\" for=\"description\">{{ '@pry.toolbox.catalog.description' | i18n }}</label>\n      <input [(ngModel)]=\"catalogInfo.description\" id=\"description\" type=\"text\" class=\"a-form-field\" required />\n    </div>\n    <div class=\"m-form-label-field\">\n      <pry-select-image\n        [iconUrl]=\"catalogInfo.image\"\n        (changed)=\"catalogInfo.image = $event\"\n        [mode]=\"type\"\n      ></pry-select-image>\n    </div>\n    <div class=\"m-btn-group\">\n      <button\n        type=\"button\"\n        (click)=\"toggleCatalog()\"\n        #cancel\n        (keydown.tab)=\"disableValidation()\"\n        class=\"a-btn a-btn--secondary\"\n      >\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n      <button\n        type=\"submit\"\n        #validateCatalog\n        (click)=\"confirmCatalog()\"\n        [disabled]=\"!toolboxMenuService.isValidForCatalog(catalogInfo.name)\"\n        class=\"a-btn a-btn--primary\"\n        (keydown.tab)=\"focusCrossElement()\"\n      >\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #overlaySpot>\n  <div class=\"o-modal\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\">\n          {{ '@pry.widget.tooltip.changeSpot' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"toggleChangeSpot()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <ng-container *ngFor=\"let place of places; let i = index\">\n      <ng-container *ngIf=\"currentPlacementIndex !== i\">\n        <button type=\"button\" class=\"a-btn\" (click)=\"moveToPlace(place)\">\n          <span>{{ '@pry.widget.tooltip.spotName' | i18n : { place: i + 1 } }}</span>\n        </button>\n      </ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "directive", type: PryAccessDirective, selector: "[pryAccess]", inputs: ["pryAccess"] }, { kind: "component", type: PrySelectImageComponent, selector: "pry-select-image", inputs: ["iconUrl", "size", "mode"], outputs: ["toggled", "changed"] }, { kind: "component", type: DatasourceSelectorComponent, selector: "pry-datasource-selector", inputs: ["usedItems", "manifest"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslateIdPipe, name: "translateId" }, { kind: "pipe", type: I18nPipe, name: "i18n" }, { kind: "pipe", type: ResultSetSizePipe, name: "resultSetSize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PryWidgetHeaderComponent, selector: "pry-widget-header", inputs: { manifest: "manifest", openData$: "openData$", additionalOptions: "additionalOptions", headerOptions: "headerOptions", displayCount: "displayCount", datasourceIds: "datasourceIds", widgetIndex: "widgetIndex" }, outputs: { manifestModified: "manifestModified" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, read: TemplateRef }, { propertyName: "templateModal", first: true, predicate: ["templateModal"], descendants: true, read: TemplateRef }, { propertyName: "toggle", first: true, predicate: ["toggle"], descendants: true, read: TemplateRef }, { propertyName: "overlayMenu", first: true, predicate: ["overlayMenu"], descendants: true, read: TemplateRef }, { propertyName: "overlayCatalog", first: true, predicate: ["overlayCatalog"], descendants: true, read: TemplateRef }, { propertyName: "overlaySpot", first: true, predicate: ["overlaySpot"], descendants: true, read: TemplateRef }, { propertyName: "togglePanel", first: true, predicate: ["togglePanel"], descendants: true }, { propertyName: "cross", first: true, predicate: ["cross"], descendants: true }, { propertyName: "validate", first: true, predicate: ["validate"], descendants: true }, { propertyName: "validateCatalog", first: true, predicate: ["validateCatalog"], descendants: true }, { propertyName: "cancel", first: true, predicate: ["cancel"], descendants: true }, { propertyName: "crossCatalog", first: true, predicate: ["crossCatalog"], descendants: true }, { propertyName: "inputCatalog", first: true, predicate: ["inputCatalog"], descendants: true }, { propertyName: "menuList", first: true, predicate: ["menuList"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"o-widget__header\">\n  <div class=\"o-widget__header__content\">\n    <h2 class=\"o-widget__header__content__title\" *ngIf=\"(manifest$ | async)?.title; else querySelector\">\n      {{ (manifest$ | async)?.title }}\n    </h2>\n    <ng-template #querySelector>\n      <div *ngFor=\"let ds of usedDatasources$ | async\" class=\"o-widget__header__content__query\">\n        <ng-container\n          *ngIf=\"ds.id | translateId : { type: 'datasource', output: 'icon', noDefault: true } | async as url\"\n        >\n          <img [height]=\"20\" [src]=\"url\" [width]=\"20\" alt=\"\" class=\"o-widget__header__content__query__icon\" />\n        </ng-container>\n        <h3 class=\"o-widget__header__content__query__name\">{{ ds.name }}</h3>\n        <h3 class=\"o-widget__header__content__query__name\" *ngIf=\"displayCount && !isGeo(ds)\">\n          ({{ [ds.id] | resultSetSize | async }})\n        </h3>\n      </div>\n      <div *ngIf=\"((usedDatasources$ | async) ?? []).length === 0\" class=\"o-widget__header__content__no-data\">\n        <h2 class=\"o-widget__header__content__title\">{{ '@pry.widget.noData' | i18n }}</h2>\n      </div>\n    </ng-template>\n  </div>\n  <div class=\"m-btn-group\" *ngIf=\"displayContextMenu$ | async as options\">\n    <button\n      type=\"button\"\n      id=\"dialog_Menu\"\n      aria-controls=\"menu\"\n      [attr.aria-expanded]=\"this.menu\"\n      #togglePanel\n      class=\"a-btn a-btn--more\"\n      (click)=\"menuOpen($event)\"\n    >\n      <pry-icon [height]=\"25\" [width]=\"25\" iconSvg=\"more_horiz\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.action.openMenuWidget' | i18n }}</span>\n    </button>\n  </div>\n</div>\n\n<ng-template #overlayMenu>\n  <div class=\"m-context-menu\" *ngIf=\"displayContextMenu$ | async as options\">\n    <ul\n      class=\"m-context-menu__list\"\n      #menuList\n      id=\"menu\"\n      role=\"menu\"\n      aria-modal=\"true\"\n      aria-labelledby=\"dialog_Menu\"\n      (keydown.arrowDown)=\"onArrowDown()\"\n      (keydown.arrowUp)=\"onArrowUp()\"\n      (keydown.escape)=\"menuOpen()\"\n    >\n      <li\n        class=\"m-context-menu__list__item\"\n        role=\"none\"\n        *ngIf=\"(manifest$ | async)?.datasource && (options === true || options['datasourceSelection'] === true)\"\n      >\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          tabindex=\"-1\"\n          id=\"toggleActions\"\n          (click)=\"toggleDatasourceSelection()\"\n          *pryAccess=\"{ module: 'dashboard', page: 'widget', action: 'select_named_query' }\"\n          class=\"a-btn\"\n        >\n          <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"stack-fill\"></pry-icon>\n          <span>{{ '@pry.widget.tooltip.readSearch' | i18n }}</span>\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngIf=\"options === true || options!['parameters'] === true\">\n        <ng-content></ng-content>\n      </li>\n      <ng-container *ngIf=\"options === true || options!['window'] === true\">\n        <li class=\"m-context-menu__list__item\" role=\"none\" *ngFor=\"let targetIndex of targetIndexes$ | async\">\n          <button\n            type=\"button\"\n            (click)=\"moveInNewWindow(_widgetIndex, targetIndex)\"\n            class=\"a-btn\"\n            role=\"menuitem\"\n            tabindex=\"-1\"\n          >\n            <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"launch\"></pry-icon>\n            {{\n              (targetIndex !== -1 ? '@pry.widget.target.existing' : '@pry.widget.target.new')\n                | i18n : { targetIndex: this.targetIndex + 1 }\n            }}\n          </button>\n        </li>\n      </ng-container>\n      <li\n        class=\"m-context-menu__list__item\"\n        role=\"none\"\n        *ngIf=\"hasGrid && (options === true || options!['changeSpot'] === true)\"\n      >\n        <button type=\"button\" role=\"menuitem\" (click)=\"toggleChangeSpot()\" class=\"a-btn\" tabindex=\"-1\">\n          <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"move\"></pry-icon>\n          <span>{{ '@pry.widget.tooltip.changeSpot' | i18n }}</span>\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngIf=\"options === true || options!['maximize'] === true\">\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          tabindex=\"-1\"\n          (click)=\"maximize(_widgetIndex)\"\n          class=\"a-btn\"\n          (keydown.escape)=\"menuOpen()\"\n        >\n          <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"fullscreen\"></pry-icon>\n          {{ '@pry.widget.target.maximize' | i18n }}\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngIf=\"options === true || options!['addToCatalog'] === true\">\n        <button type=\"button\" role=\"menuitem\" tabindex=\"-1\" (click)=\"toggleCatalog()\" class=\"a-btn\">\n          <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"library_add\"></pry-icon>\n          <span>{{ '@pry.widget.tooltip.catalogWidget' | i18n }}</span>\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngIf=\"options === true || options!['delete'] === true\">\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          tabindex=\"-1\"\n          (click)=\"toggleRemoveConfirm($event)\"\n          class=\"a-btn\"\n          (keydown.tab)=\"menuOpen()\"\n        >\n          <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"delete\"></pry-icon>\n          <span>{{ '@pry.widget.tooltip.deleteWidget' | i18n }}</span>\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngFor=\"let option of additionalOptions\">\n        <button\n          type=\"button\"\n          class=\"a-btn\"\n          role=\"menuitem\"\n          tabindex=\"-1\"\n          (click)=\"executeAction(option)\"\n          [disabled]=\"isActionDisabled(option)\"\n        >\n          <pry-icon [height]=\"17\" [width]=\"17\" [iconSvg]=\"option.icon\"></pry-icon>\n          {{ option.label | i18n }}\n        </button>\n      </li>\n    </ul>\n  </div>\n</ng-template>\n\n<ng-template #templateModal>\n  <div\n    class=\"o-modal\"\n    (keydown.escape)=\"cancelRemoveConfirm()\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-labelledby=\"dialog confirm delete presentation\"\n  >\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ '@pry.widget.modalTitle' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" #cross (click)=\"cancelRemoveConfirm()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <div class=\"m-btn-group\">\n      <button type=\"button\" (click)=\"cancelRemoveConfirm()\" class=\"a-btn a-btn--secondary\">\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n      <button type=\"submit\" (click)=\"confirmRemove()\" class=\"a-btn a-btn--primary\" (keydown.tab)=\"focusCrossElement()\">\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #template>\n  <pry-datasource-selector\n    bindLabel=\"name\"\n    bindValue=\"id\"\n    translationStringBase=\"@pry.components.chipsSelector.datasource.\"\n    (cancel)=\"toggleDatasourceSelection()\"\n    (validated)=\"emitManifest()\"\n    (nextTab)=\"focusInputCatalog()\"\n    (previousTab)=\"focusValidation()\"\n    (itemsChanged)=\"datasourcesChanged($event)\"\n    [usedItems]=\"(usedDatasources$ | async) ?? []\"\n  ></pry-datasource-selector>\n</ng-template>\n\n<ng-template #overlayCatalog>\n  <div\n    class=\"o-modal\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-labelledby=\"dialog_Catalog\"\n    (keydown.escape)=\"toggleCatalog()\"\n  >\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\">\n          {{ '@pry.widget.defineCatalog' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button\n          class=\"a-btn a-btn--icon-only\"\n          (keydown.shift.tab)=\"focusValidation()\"\n          #crossCatalog\n          (click)=\"toggleCatalog()\"\n        >\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <div class=\"m-form-label-field\">\n      <label class=\"a-label\" for=\"name\">{{ '@pry.toolbox.catalog.label' | i18n }}</label>\n      <input [(ngModel)]=\"catalogInfo.name\" id=\"name\" type=\"text\" class=\"a-form-field\" required />\n    </div>\n    <div class=\"m-form-label-field\">\n      <label class=\"a-label\" for=\"description\">{{ '@pry.toolbox.catalog.description' | i18n }}</label>\n      <input [(ngModel)]=\"catalogInfo.description\" id=\"description\" type=\"text\" class=\"a-form-field\" required />\n    </div>\n    <div class=\"m-form-label-field\">\n      <pry-select-image\n        [iconUrl]=\"catalogInfo.image\"\n        (changed)=\"catalogInfo.image = $event\"\n        [mode]=\"type\"\n      ></pry-select-image>\n    </div>\n    <div class=\"m-btn-group\">\n      <button\n        type=\"button\"\n        (click)=\"toggleCatalog()\"\n        #cancel\n        (keydown.tab)=\"disableValidation()\"\n        class=\"a-btn a-btn--secondary\"\n      >\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n      <button\n        type=\"submit\"\n        #validateCatalog\n        (click)=\"confirmCatalog()\"\n        [disabled]=\"!toolboxMenuService.isValidForCatalog(catalogInfo.name)\"\n        class=\"a-btn a-btn--primary\"\n        (keydown.tab)=\"focusCrossElement()\"\n      >\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #overlaySpot>\n  <div class=\"o-modal -place\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\">\n          {{ '@pry.widget.tooltip.changeSpot' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"toggleChangeSpot()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <pry-dashboard\n      [staticDashboard]=\"targetManifest!\"\n      [breakpoint]=\"10\"\n      [noBackground]=\"true\"\n      [forceModeEdition]=\"false\"\n    ></pry-dashboard>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "directive", type: PryAccessDirective, selector: "[pryAccess]", inputs: ["pryAccess"] }, { kind: "component", type: PrySelectImageComponent, selector: "pry-select-image", inputs: ["iconUrl", "size", "mode"], outputs: ["toggled", "changed"] }, { kind: "component", type: DashboardComponent, selector: "pry-dashboard", inputs: ["staticDashboard", "forceModeEdition", "CloseOnDragOut", "displayOptions", "noBackground", "breakpoint"], outputs: ["rowHeight", "rows"] }, { kind: "component", type: DatasourceSelectorComponent, selector: "pry-datasource-selector", inputs: ["usedItems", "manifest"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslateIdPipe, name: "translateId" }, { kind: "pipe", type: I18nPipe, name: "i18n" }, { kind: "pipe", type: ResultSetSizePipe, name: "resultSetSize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PryWidgetHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-widget-header', template: "<div class=\"o-widget__header\">\n  <div class=\"o-widget__header__content\">\n    <h2 class=\"o-widget__header__content__title\" *ngIf=\"(manifest$ | async)?.title; else querySelector\">\n      {{ (manifest$ | async)?.title }}\n    </h2>\n    <ng-template #querySelector>\n      <div *ngFor=\"let ds of usedDatasources$ | async\" class=\"o-widget__header__content__query\">\n        <ng-container\n          *ngIf=\"ds.id | translateId : { type: 'datasource', output: 'icon', noDefault: true } | async as url\"\n        >\n          <img [height]=\"20\" [src]=\"url\" [width]=\"20\" alt=\"\" class=\"o-widget__header__content__query__icon\" />\n        </ng-container>\n        <h3 class=\"o-widget__header__content__query__name\">{{ ds.name }}</h3>\n        <h3 class=\"o-widget__header__content__query__name\" *ngIf=\"displayCount && !isGeo(ds)\">\n          ({{ [ds.id] | resultSetSize | async }})\n        </h3>\n      </div>\n      <div *ngIf=\"((usedDatasources$ | async) ?? []).length === 0\" class=\"o-widget__header__content__no-data\">\n        <h2 class=\"o-widget__header__content__title\">{{ '@pry.widget.noData' | i18n }}</h2>\n      </div>\n    </ng-template>\n  </div>\n  <div class=\"m-btn-group\" *ngIf=\"displayContextMenu$ | async as options\">\n    <button\n      type=\"button\"\n      id=\"dialog_Menu\"\n      aria-controls=\"menu\"\n      [attr.aria-expanded]=\"this.menu\"\n      #togglePanel\n      class=\"a-btn a-btn--more\"\n      (click)=\"menuOpen($event)\"\n    >\n      <pry-icon [height]=\"25\" [width]=\"25\" iconSvg=\"more_horiz\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.action.openMenuWidget' | i18n }}</span>\n    </button>\n  </div>\n</div>\n\n<ng-template #overlayMenu>\n  <div class=\"m-context-menu\" *ngIf=\"displayContextMenu$ | async as options\">\n    <ul\n      class=\"m-context-menu__list\"\n      #menuList\n      id=\"menu\"\n      role=\"menu\"\n      aria-modal=\"true\"\n      aria-labelledby=\"dialog_Menu\"\n      (keydown.arrowDown)=\"onArrowDown()\"\n      (keydown.arrowUp)=\"onArrowUp()\"\n      (keydown.escape)=\"menuOpen()\"\n    >\n      <li\n        class=\"m-context-menu__list__item\"\n        role=\"none\"\n        *ngIf=\"(manifest$ | async)?.datasource && (options === true || options['datasourceSelection'] === true)\"\n      >\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          tabindex=\"-1\"\n          id=\"toggleActions\"\n          (click)=\"toggleDatasourceSelection()\"\n          *pryAccess=\"{ module: 'dashboard', page: 'widget', action: 'select_named_query' }\"\n          class=\"a-btn\"\n        >\n          <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"stack-fill\"></pry-icon>\n          <span>{{ '@pry.widget.tooltip.readSearch' | i18n }}</span>\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngIf=\"options === true || options!['parameters'] === true\">\n        <ng-content></ng-content>\n      </li>\n      <ng-container *ngIf=\"options === true || options!['window'] === true\">\n        <li class=\"m-context-menu__list__item\" role=\"none\" *ngFor=\"let targetIndex of targetIndexes$ | async\">\n          <button\n            type=\"button\"\n            (click)=\"moveInNewWindow(_widgetIndex, targetIndex)\"\n            class=\"a-btn\"\n            role=\"menuitem\"\n            tabindex=\"-1\"\n          >\n            <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"launch\"></pry-icon>\n            {{\n              (targetIndex !== -1 ? '@pry.widget.target.existing' : '@pry.widget.target.new')\n                | i18n : { targetIndex: this.targetIndex + 1 }\n            }}\n          </button>\n        </li>\n      </ng-container>\n      <li\n        class=\"m-context-menu__list__item\"\n        role=\"none\"\n        *ngIf=\"hasGrid && (options === true || options!['changeSpot'] === true)\"\n      >\n        <button type=\"button\" role=\"menuitem\" (click)=\"toggleChangeSpot()\" class=\"a-btn\" tabindex=\"-1\">\n          <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"move\"></pry-icon>\n          <span>{{ '@pry.widget.tooltip.changeSpot' | i18n }}</span>\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngIf=\"options === true || options!['maximize'] === true\">\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          tabindex=\"-1\"\n          (click)=\"maximize(_widgetIndex)\"\n          class=\"a-btn\"\n          (keydown.escape)=\"menuOpen()\"\n        >\n          <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"fullscreen\"></pry-icon>\n          {{ '@pry.widget.target.maximize' | i18n }}\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngIf=\"options === true || options!['addToCatalog'] === true\">\n        <button type=\"button\" role=\"menuitem\" tabindex=\"-1\" (click)=\"toggleCatalog()\" class=\"a-btn\">\n          <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"library_add\"></pry-icon>\n          <span>{{ '@pry.widget.tooltip.catalogWidget' | i18n }}</span>\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngIf=\"options === true || options!['delete'] === true\">\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          tabindex=\"-1\"\n          (click)=\"toggleRemoveConfirm($event)\"\n          class=\"a-btn\"\n          (keydown.tab)=\"menuOpen()\"\n        >\n          <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"delete\"></pry-icon>\n          <span>{{ '@pry.widget.tooltip.deleteWidget' | i18n }}</span>\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngFor=\"let option of additionalOptions\">\n        <button\n          type=\"button\"\n          class=\"a-btn\"\n          role=\"menuitem\"\n          tabindex=\"-1\"\n          (click)=\"executeAction(option)\"\n          [disabled]=\"isActionDisabled(option)\"\n        >\n          <pry-icon [height]=\"17\" [width]=\"17\" [iconSvg]=\"option.icon\"></pry-icon>\n          {{ option.label | i18n }}\n        </button>\n      </li>\n    </ul>\n  </div>\n</ng-template>\n\n<ng-template #templateModal>\n  <div\n    class=\"o-modal\"\n    (keydown.escape)=\"cancelRemoveConfirm()\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-labelledby=\"dialog confirm delete presentation\"\n  >\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ '@pry.widget.modalTitle' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" #cross (click)=\"cancelRemoveConfirm()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <div class=\"m-btn-group\">\n      <button type=\"button\" (click)=\"cancelRemoveConfirm()\" class=\"a-btn a-btn--secondary\">\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n      <button type=\"submit\" (click)=\"confirmRemove()\" class=\"a-btn a-btn--primary\" (keydown.tab)=\"focusCrossElement()\">\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #template>\n  <pry-datasource-selector\n    bindLabel=\"name\"\n    bindValue=\"id\"\n    translationStringBase=\"@pry.components.chipsSelector.datasource.\"\n    (cancel)=\"toggleDatasourceSelection()\"\n    (validated)=\"emitManifest()\"\n    (nextTab)=\"focusInputCatalog()\"\n    (previousTab)=\"focusValidation()\"\n    (itemsChanged)=\"datasourcesChanged($event)\"\n    [usedItems]=\"(usedDatasources$ | async) ?? []\"\n  ></pry-datasource-selector>\n</ng-template>\n\n<ng-template #overlayCatalog>\n  <div\n    class=\"o-modal\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-labelledby=\"dialog_Catalog\"\n    (keydown.escape)=\"toggleCatalog()\"\n  >\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\">\n          {{ '@pry.widget.defineCatalog' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button\n          class=\"a-btn a-btn--icon-only\"\n          (keydown.shift.tab)=\"focusValidation()\"\n          #crossCatalog\n          (click)=\"toggleCatalog()\"\n        >\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <div class=\"m-form-label-field\">\n      <label class=\"a-label\" for=\"name\">{{ '@pry.toolbox.catalog.label' | i18n }}</label>\n      <input [(ngModel)]=\"catalogInfo.name\" id=\"name\" type=\"text\" class=\"a-form-field\" required />\n    </div>\n    <div class=\"m-form-label-field\">\n      <label class=\"a-label\" for=\"description\">{{ '@pry.toolbox.catalog.description' | i18n }}</label>\n      <input [(ngModel)]=\"catalogInfo.description\" id=\"description\" type=\"text\" class=\"a-form-field\" required />\n    </div>\n    <div class=\"m-form-label-field\">\n      <pry-select-image\n        [iconUrl]=\"catalogInfo.image\"\n        (changed)=\"catalogInfo.image = $event\"\n        [mode]=\"type\"\n      ></pry-select-image>\n    </div>\n    <div class=\"m-btn-group\">\n      <button\n        type=\"button\"\n        (click)=\"toggleCatalog()\"\n        #cancel\n        (keydown.tab)=\"disableValidation()\"\n        class=\"a-btn a-btn--secondary\"\n      >\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n      <button\n        type=\"submit\"\n        #validateCatalog\n        (click)=\"confirmCatalog()\"\n        [disabled]=\"!toolboxMenuService.isValidForCatalog(catalogInfo.name)\"\n        class=\"a-btn a-btn--primary\"\n        (keydown.tab)=\"focusCrossElement()\"\n      >\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #overlaySpot>\n  <div class=\"o-modal\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\">\n          {{ '@pry.widget.tooltip.changeSpot' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"toggleChangeSpot()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <ng-container *ngFor=\"let place of places; let i = index\">\n      <ng-container *ngIf=\"currentPlacementIndex !== i\">\n        <button type=\"button\" class=\"a-btn\" (click)=\"moveToPlace(place)\">\n          <span>{{ '@pry.widget.tooltip.spotName' | i18n : { place: i + 1 } }}</span>\n        </button>\n      </ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n" }]
+            args: [{ selector: 'pry-widget-header', template: "<div class=\"o-widget__header\">\n  <div class=\"o-widget__header__content\">\n    <h2 class=\"o-widget__header__content__title\" *ngIf=\"(manifest$ | async)?.title; else querySelector\">\n      {{ (manifest$ | async)?.title }}\n    </h2>\n    <ng-template #querySelector>\n      <div *ngFor=\"let ds of usedDatasources$ | async\" class=\"o-widget__header__content__query\">\n        <ng-container\n          *ngIf=\"ds.id | translateId : { type: 'datasource', output: 'icon', noDefault: true } | async as url\"\n        >\n          <img [height]=\"20\" [src]=\"url\" [width]=\"20\" alt=\"\" class=\"o-widget__header__content__query__icon\" />\n        </ng-container>\n        <h3 class=\"o-widget__header__content__query__name\">{{ ds.name }}</h3>\n        <h3 class=\"o-widget__header__content__query__name\" *ngIf=\"displayCount && !isGeo(ds)\">\n          ({{ [ds.id] | resultSetSize | async }})\n        </h3>\n      </div>\n      <div *ngIf=\"((usedDatasources$ | async) ?? []).length === 0\" class=\"o-widget__header__content__no-data\">\n        <h2 class=\"o-widget__header__content__title\">{{ '@pry.widget.noData' | i18n }}</h2>\n      </div>\n    </ng-template>\n  </div>\n  <div class=\"m-btn-group\" *ngIf=\"displayContextMenu$ | async as options\">\n    <button\n      type=\"button\"\n      id=\"dialog_Menu\"\n      aria-controls=\"menu\"\n      [attr.aria-expanded]=\"this.menu\"\n      #togglePanel\n      class=\"a-btn a-btn--more\"\n      (click)=\"menuOpen($event)\"\n    >\n      <pry-icon [height]=\"25\" [width]=\"25\" iconSvg=\"more_horiz\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.action.openMenuWidget' | i18n }}</span>\n    </button>\n  </div>\n</div>\n\n<ng-template #overlayMenu>\n  <div class=\"m-context-menu\" *ngIf=\"displayContextMenu$ | async as options\">\n    <ul\n      class=\"m-context-menu__list\"\n      #menuList\n      id=\"menu\"\n      role=\"menu\"\n      aria-modal=\"true\"\n      aria-labelledby=\"dialog_Menu\"\n      (keydown.arrowDown)=\"onArrowDown()\"\n      (keydown.arrowUp)=\"onArrowUp()\"\n      (keydown.escape)=\"menuOpen()\"\n    >\n      <li\n        class=\"m-context-menu__list__item\"\n        role=\"none\"\n        *ngIf=\"(manifest$ | async)?.datasource && (options === true || options['datasourceSelection'] === true)\"\n      >\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          tabindex=\"-1\"\n          id=\"toggleActions\"\n          (click)=\"toggleDatasourceSelection()\"\n          *pryAccess=\"{ module: 'dashboard', page: 'widget', action: 'select_named_query' }\"\n          class=\"a-btn\"\n        >\n          <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"stack-fill\"></pry-icon>\n          <span>{{ '@pry.widget.tooltip.readSearch' | i18n }}</span>\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngIf=\"options === true || options!['parameters'] === true\">\n        <ng-content></ng-content>\n      </li>\n      <ng-container *ngIf=\"options === true || options!['window'] === true\">\n        <li class=\"m-context-menu__list__item\" role=\"none\" *ngFor=\"let targetIndex of targetIndexes$ | async\">\n          <button\n            type=\"button\"\n            (click)=\"moveInNewWindow(_widgetIndex, targetIndex)\"\n            class=\"a-btn\"\n            role=\"menuitem\"\n            tabindex=\"-1\"\n          >\n            <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"launch\"></pry-icon>\n            {{\n              (targetIndex !== -1 ? '@pry.widget.target.existing' : '@pry.widget.target.new')\n                | i18n : { targetIndex: this.targetIndex + 1 }\n            }}\n          </button>\n        </li>\n      </ng-container>\n      <li\n        class=\"m-context-menu__list__item\"\n        role=\"none\"\n        *ngIf=\"hasGrid && (options === true || options!['changeSpot'] === true)\"\n      >\n        <button type=\"button\" role=\"menuitem\" (click)=\"toggleChangeSpot()\" class=\"a-btn\" tabindex=\"-1\">\n          <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"move\"></pry-icon>\n          <span>{{ '@pry.widget.tooltip.changeSpot' | i18n }}</span>\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngIf=\"options === true || options!['maximize'] === true\">\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          tabindex=\"-1\"\n          (click)=\"maximize(_widgetIndex)\"\n          class=\"a-btn\"\n          (keydown.escape)=\"menuOpen()\"\n        >\n          <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"fullscreen\"></pry-icon>\n          {{ '@pry.widget.target.maximize' | i18n }}\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngIf=\"options === true || options!['addToCatalog'] === true\">\n        <button type=\"button\" role=\"menuitem\" tabindex=\"-1\" (click)=\"toggleCatalog()\" class=\"a-btn\">\n          <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"library_add\"></pry-icon>\n          <span>{{ '@pry.widget.tooltip.catalogWidget' | i18n }}</span>\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngIf=\"options === true || options!['delete'] === true\">\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          tabindex=\"-1\"\n          (click)=\"toggleRemoveConfirm($event)\"\n          class=\"a-btn\"\n          (keydown.tab)=\"menuOpen()\"\n        >\n          <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"delete\"></pry-icon>\n          <span>{{ '@pry.widget.tooltip.deleteWidget' | i18n }}</span>\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngFor=\"let option of additionalOptions\">\n        <button\n          type=\"button\"\n          class=\"a-btn\"\n          role=\"menuitem\"\n          tabindex=\"-1\"\n          (click)=\"executeAction(option)\"\n          [disabled]=\"isActionDisabled(option)\"\n        >\n          <pry-icon [height]=\"17\" [width]=\"17\" [iconSvg]=\"option.icon\"></pry-icon>\n          {{ option.label | i18n }}\n        </button>\n      </li>\n    </ul>\n  </div>\n</ng-template>\n\n<ng-template #templateModal>\n  <div\n    class=\"o-modal\"\n    (keydown.escape)=\"cancelRemoveConfirm()\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-labelledby=\"dialog confirm delete presentation\"\n  >\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ '@pry.widget.modalTitle' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" #cross (click)=\"cancelRemoveConfirm()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <div class=\"m-btn-group\">\n      <button type=\"button\" (click)=\"cancelRemoveConfirm()\" class=\"a-btn a-btn--secondary\">\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n      <button type=\"submit\" (click)=\"confirmRemove()\" class=\"a-btn a-btn--primary\" (keydown.tab)=\"focusCrossElement()\">\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #template>\n  <pry-datasource-selector\n    bindLabel=\"name\"\n    bindValue=\"id\"\n    translationStringBase=\"@pry.components.chipsSelector.datasource.\"\n    (cancel)=\"toggleDatasourceSelection()\"\n    (validated)=\"emitManifest()\"\n    (nextTab)=\"focusInputCatalog()\"\n    (previousTab)=\"focusValidation()\"\n    (itemsChanged)=\"datasourcesChanged($event)\"\n    [usedItems]=\"(usedDatasources$ | async) ?? []\"\n  ></pry-datasource-selector>\n</ng-template>\n\n<ng-template #overlayCatalog>\n  <div\n    class=\"o-modal\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-labelledby=\"dialog_Catalog\"\n    (keydown.escape)=\"toggleCatalog()\"\n  >\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\">\n          {{ '@pry.widget.defineCatalog' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button\n          class=\"a-btn a-btn--icon-only\"\n          (keydown.shift.tab)=\"focusValidation()\"\n          #crossCatalog\n          (click)=\"toggleCatalog()\"\n        >\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <div class=\"m-form-label-field\">\n      <label class=\"a-label\" for=\"name\">{{ '@pry.toolbox.catalog.label' | i18n }}</label>\n      <input [(ngModel)]=\"catalogInfo.name\" id=\"name\" type=\"text\" class=\"a-form-field\" required />\n    </div>\n    <div class=\"m-form-label-field\">\n      <label class=\"a-label\" for=\"description\">{{ '@pry.toolbox.catalog.description' | i18n }}</label>\n      <input [(ngModel)]=\"catalogInfo.description\" id=\"description\" type=\"text\" class=\"a-form-field\" required />\n    </div>\n    <div class=\"m-form-label-field\">\n      <pry-select-image\n        [iconUrl]=\"catalogInfo.image\"\n        (changed)=\"catalogInfo.image = $event\"\n        [mode]=\"type\"\n      ></pry-select-image>\n    </div>\n    <div class=\"m-btn-group\">\n      <button\n        type=\"button\"\n        (click)=\"toggleCatalog()\"\n        #cancel\n        (keydown.tab)=\"disableValidation()\"\n        class=\"a-btn a-btn--secondary\"\n      >\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n      <button\n        type=\"submit\"\n        #validateCatalog\n        (click)=\"confirmCatalog()\"\n        [disabled]=\"!toolboxMenuService.isValidForCatalog(catalogInfo.name)\"\n        class=\"a-btn a-btn--primary\"\n        (keydown.tab)=\"focusCrossElement()\"\n      >\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #overlaySpot>\n  <div class=\"o-modal -place\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\">\n          {{ '@pry.widget.tooltip.changeSpot' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"toggleChangeSpot()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <pry-dashboard\n      [staticDashboard]=\"targetManifest!\"\n      [breakpoint]=\"10\"\n      [noBackground]=\"true\"\n      [forceModeEdition]=\"false\"\n    ></pry-dashboard>\n  </div>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.Overlay }, { type: i0.ViewContainerRef }, { type: ToolboxMenuService }]; }, propDecorators: { template: [{
                 type: ViewChild,
                 args: ['template', { read: TemplateRef }]
@@ -10546,7 +10606,7 @@ class PryTitleService {
         this.displayPageNumber = display;
     }
     changeTitle(key) {
-        const nextTitle = !!key ? this.translateService.instant(key) : this.title.getTitle().split('[')[0];
+        const nextTitle = !!key ? this.translateService.instant(key, {}, false) : this.title.getTitle().split('[')[0];
         const pageNumber = this.displayPageNumber && this.pageCount > 1
             ? `[${this.translateService.instant('@pry.view.name', {
                 rank: this.rank + 1
@@ -10807,7 +10867,7 @@ class DashboardEffects {
             DashboardActions.fetchManifestsList(),
             DashboardActions.setInitialPresentation({ initial: manifest })
         ])));
-        this.listManifests$ = createEffect(() => this.actions$.pipe(ofType(DashboardActions.fetchManifestsList), withLatestFrom(this.store.select(DashboardSelectors.rank)), filter$1(([action, rank]) => rank === 0 || rank === -1), mergeMap$1(([action, rank]) => this.manifestService.list().pipe(map$1((manifests) => DashboardActions.updateManifestsList({ manifests }))))));
+        this.listManifests$ = createEffect(() => this.actions$.pipe(ofType(DashboardActions.fetchManifestsList), withLatestFrom(this.store.select(DashboardSelectors.rank)), filter$1(([action, rank]) => rank === 0 || rank === -1), debounceTime$1(100), mergeMap$1(([action, rank]) => this.manifestService.list().pipe(map$1((manifests) => DashboardActions.updateManifestsList({ manifests }))))));
         this.confirmManifestDeletion$ = createEffect(() => this.actions$.pipe(ofType(DashboardActions.confirmManifestDeletion), tap((action) => {
             const data = {
                 title: '@pry.widget.modalTitle',