npm - @provoly/dashboard - Versions diffs - 1.4.13 → 1.4.15 - Mend

@provoly/dashboard 1.4.13 → 1.4.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (226) hide show

package/fesm2022/provoly-dashboard-search.mjs CHANGED Viewed

@@ -1,7 +1,7 @@
-import * as i2$1 from '@angular/cdk/overlay';
+import * as i2 from '@angular/cdk/overlay';
 import { OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
 import { TemplatePortal, PortalModule } from '@angular/cdk/portal';
-import * as i2 from '@angular/common';
+import * as i2$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { EventEmitter, Component, ViewEncapsulation, ViewChild, Input, Output, Inject, TemplateRef, ChangeDetectionStrategy, HostBinding, HostListener, Injectable, ElementRef, NgModule } from '@angular/core';
@@ -24,7 +24,7 @@ import { map, take, Subscription, BehaviorSubject, combineLatest, combineLatestW
 import { map as map$1, debounceTime, distinctUntilChanged, filter as filter$1, switchMap as switchMap$1, take as take$1, delay, withLatestFrom, mergeMap, first, catchError } from 'rxjs/operators';
 import { v4 } from 'uuid';
 import equal from 'fast-deep-equal/es6';
-import * as i5$1 from '@angular/cdk/bidi';
+import * as i4$1 from '@angular/cdk/bidi';
 class ChooseWidgetComponent extends SubscriptionnerDirective {
     constructor(toolboxMenuService, toolboxManifestService) {
@@ -68,11 +68,11 @@ class ChooseWidgetComponent extends SubscriptionnerDirective {
         this.selected.emit(type.type);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ChooseWidgetComponent, deps: [{ token: i3.ToolboxMenuService }, { token: i3.ToolboxManifestService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: ChooseWidgetComponent, selector: "pry-choose-widget", inputs: { panelOpen: "panelOpen", mode: "mode", width: "width" }, outputs: { selected: "selected" }, viewQueries: [{ propertyName: "chooseWidgets", first: true, predicate: ["chooseWidgets"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div cdkOverlayOrigin #originSearch=\"cdkOverlayOrigin\" class=\"m-choose-widget\">\n  <button\n    type=\"button\"\n    title=\"{{ '@pry.widget.buttonChoice' | i18n }}\"\n    class=\"a-btn a-btn--primary a-btn--icon-text m-choose-widget__buttons-widget\"\n    (click)=\"togglePopup()\"\n    *ngIf=\"mode === 'button'\"\n  >\n    <img\n      [alt]=\"widgetSelected?.label\"\n      [src]=\"widgetSelected?.icon | getSecuredImage | async\"\n      [width]=\"22\"\n      [height]=\"22\"\n    />\n    <span>{{ widgetSelected ? (widgetSelected.label | i18n) : ('@pry.toolbox.table' | i18n) }}</span>\n  </button>\n</div>\n\n<div class=\"m-choose-widget__input\" [class.choose-widget__input__inline]=\"mode === 'inline'\" *ngIf=\"mode !== 'button'\">\n  <ng-content></ng-content>\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayLockPosition\n  [cdkConnectedOverlayOrigin]=\"originSearch\"\n  [cdkConnectedOverlayOpen]=\"panelOpen\"\n  [cdkConnectedOverlayPositions]=\"[BOTTOM_POSITION, TOP_POSITION]\"\n>\n  <div class=\"m-choose-widget__widget_overlay\" (keydown.escape)=\"togglePopup()\" [style.width.px]=\"width\">\n    <div class=\"m-choose-widget__widget_overlay__content\">\n      <div *ngFor=\"let widget of widgets$ | async\">\n        <button\n          #chooseWidgets\n          type=\"button\"\n          class=\"m-choose-widget__widget_overlay__content__item\"\n          [class.choose-widget__widget_overlay__content__item__selected]=\"widget.type === widgetSelected?.type\"\n          (click)=\"onSelectWidget(widget)\"\n        >\n          <img [alt]=\"widget.label | i18n\" [height]=\"22\" [width]=\"22\" [src]=\"widget.icon | getSecuredImage | async\" />\n          <span class=\"m-choose-widget__widget_overlay__content__item__label\">{{ widget.label | i18n }}</span>\n        </button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.GetSecuredImagePipe, name: "getSecuredImage" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: ChooseWidgetComponent, selector: "pry-choose-widget", inputs: { panelOpen: "panelOpen", mode: "mode", width: "width" }, outputs: { selected: "selected" }, viewQueries: [{ propertyName: "chooseWidgets", first: true, predicate: ["chooseWidgets"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div cdkOverlayOrigin #originSearch=\"cdkOverlayOrigin\" class=\"m-choose-widget\">\n  @if (mode === 'button') {\n    <button\n      type=\"button\"\n      title=\"{{ '@pry.widget.buttonChoice' | i18n }}\"\n      class=\"a-btn a-btn--primary a-btn--icon-text m-choose-widget__buttons-widget\"\n      (click)=\"togglePopup()\"\n      >\n      <img\n        [alt]=\"widgetSelected?.label\"\n        [src]=\"widgetSelected?.icon | getSecuredImage | async\"\n        [width]=\"22\"\n        [height]=\"22\"\n        />\n      <span>{{ widgetSelected ? (widgetSelected.label | i18n) : ('@pry.toolbox.table' | i18n) }}</span>\n    </button>\n  }\n</div>\n\n@if (mode !== 'button') {\n  <div class=\"m-choose-widget__input\" [class.choose-widget__input__inline]=\"mode === 'inline'\">\n    <ng-content></ng-content>\n  </div>\n}\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayLockPosition\n  [cdkConnectedOverlayOrigin]=\"originSearch\"\n  [cdkConnectedOverlayOpen]=\"panelOpen\"\n  [cdkConnectedOverlayPositions]=\"[BOTTOM_POSITION, TOP_POSITION]\"\n  >\n  <div class=\"m-choose-widget__widget_overlay\" (keydown.escape)=\"togglePopup()\" [style.width.px]=\"width\">\n    <div class=\"m-choose-widget__widget_overlay__content\">\n      @for (widget of widgets$ | async; track widget) {\n        <div>\n          <button\n            #chooseWidgets\n            type=\"button\"\n            class=\"m-choose-widget__widget_overlay__content__item\"\n            [class.choose-widget__widget_overlay__content__item__selected]=\"widget.type === widgetSelected?.type\"\n            (click)=\"onSelectWidget(widget)\"\n            >\n            <img [alt]=\"widget.label | i18n\" [height]=\"22\" [width]=\"22\" [src]=\"widget.icon | getSecuredImage | async\" />\n            <span class=\"m-choose-widget__widget_overlay__content__item__label\">{{ widget.label | i18n }}</span>\n          </button>\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.GetSecuredImagePipe, name: "getSecuredImage" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ChooseWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-choose-widget', encapsulation: ViewEncapsulation.None, template: "<div cdkOverlayOrigin #originSearch=\"cdkOverlayOrigin\" class=\"m-choose-widget\">\n  <button\n    type=\"button\"\n    title=\"{{ '@pry.widget.buttonChoice' | i18n }}\"\n    class=\"a-btn a-btn--primary a-btn--icon-text m-choose-widget__buttons-widget\"\n    (click)=\"togglePopup()\"\n    *ngIf=\"mode === 'button'\"\n  >\n    <img\n      [alt]=\"widgetSelected?.label\"\n      [src]=\"widgetSelected?.icon | getSecuredImage | async\"\n      [width]=\"22\"\n      [height]=\"22\"\n    />\n    <span>{{ widgetSelected ? (widgetSelected.label | i18n) : ('@pry.toolbox.table' | i18n) }}</span>\n  </button>\n</div>\n\n<div class=\"m-choose-widget__input\" [class.choose-widget__input__inline]=\"mode === 'inline'\" *ngIf=\"mode !== 'button'\">\n  <ng-content></ng-content>\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayLockPosition\n  [cdkConnectedOverlayOrigin]=\"originSearch\"\n  [cdkConnectedOverlayOpen]=\"panelOpen\"\n  [cdkConnectedOverlayPositions]=\"[BOTTOM_POSITION, TOP_POSITION]\"\n>\n  <div class=\"m-choose-widget__widget_overlay\" (keydown.escape)=\"togglePopup()\" [style.width.px]=\"width\">\n    <div class=\"m-choose-widget__widget_overlay__content\">\n      <div *ngFor=\"let widget of widgets$ | async\">\n        <button\n          #chooseWidgets\n          type=\"button\"\n          class=\"m-choose-widget__widget_overlay__content__item\"\n          [class.choose-widget__widget_overlay__content__item__selected]=\"widget.type === widgetSelected?.type\"\n          (click)=\"onSelectWidget(widget)\"\n        >\n          <img [alt]=\"widget.label | i18n\" [height]=\"22\" [width]=\"22\" [src]=\"widget.icon | getSecuredImage | async\" />\n          <span class=\"m-choose-widget__widget_overlay__content__item__label\">{{ widget.label | i18n }}</span>\n        </button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n" }]
+            args: [{ selector: 'pry-choose-widget', encapsulation: ViewEncapsulation.None, template: "<div cdkOverlayOrigin #originSearch=\"cdkOverlayOrigin\" class=\"m-choose-widget\">\n  @if (mode === 'button') {\n    <button\n      type=\"button\"\n      title=\"{{ '@pry.widget.buttonChoice' | i18n }}\"\n      class=\"a-btn a-btn--primary a-btn--icon-text m-choose-widget__buttons-widget\"\n      (click)=\"togglePopup()\"\n      >\n      <img\n        [alt]=\"widgetSelected?.label\"\n        [src]=\"widgetSelected?.icon | getSecuredImage | async\"\n        [width]=\"22\"\n        [height]=\"22\"\n        />\n      <span>{{ widgetSelected ? (widgetSelected.label | i18n) : ('@pry.toolbox.table' | i18n) }}</span>\n    </button>\n  }\n</div>\n\n@if (mode !== 'button') {\n  <div class=\"m-choose-widget__input\" [class.choose-widget__input__inline]=\"mode === 'inline'\">\n    <ng-content></ng-content>\n  </div>\n}\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayLockPosition\n  [cdkConnectedOverlayOrigin]=\"originSearch\"\n  [cdkConnectedOverlayOpen]=\"panelOpen\"\n  [cdkConnectedOverlayPositions]=\"[BOTTOM_POSITION, TOP_POSITION]\"\n  >\n  <div class=\"m-choose-widget__widget_overlay\" (keydown.escape)=\"togglePopup()\" [style.width.px]=\"width\">\n    <div class=\"m-choose-widget__widget_overlay__content\">\n      @for (widget of widgets$ | async; track widget) {\n        <div>\n          <button\n            #chooseWidgets\n            type=\"button\"\n            class=\"m-choose-widget__widget_overlay__content__item\"\n            [class.choose-widget__widget_overlay__content__item__selected]=\"widget.type === widgetSelected?.type\"\n            (click)=\"onSelectWidget(widget)\"\n            >\n            <img [alt]=\"widget.label | i18n\" [height]=\"22\" [width]=\"22\" [src]=\"widget.icon | getSecuredImage | async\" />\n            <span class=\"m-choose-widget__widget_overlay__content__item__label\">{{ widget.label | i18n }}</span>\n          </button>\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i3.ToolboxMenuService }, { type: i3.ToolboxManifestService }], propDecorators: { chooseWidgets: [{
                 type: ViewChild,
                 args: ['chooseWidgets']
@@ -653,13 +653,13 @@ class PrySearchHomeComponent {
     ngOnDestroy() {
         this.subscription.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PrySearchHomeComponent, deps: [{ token: i1.Store }, { token: i2$1.Overlay }, { token: i0.ViewContainerRef }, { token: i3.PryDialogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: PrySearchHomeComponent, selector: "pry-search-home", inputs: { searchFulltextTpl: "searchFulltextTpl", isMoreList: "isMoreList" }, outputs: { changeListView: "changeListView", changeSearchCriteria: "changeSearchCriteria" }, viewQueries: [{ propertyName: "templateSpot", first: true, predicate: ["templateSpot"], descendants: true, read: TemplateRef }, { propertyName: "templateRefresh", first: true, predicate: ["templateRefresh"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<pry-search-css></pry-search-css>\n<div class=\"o-pry-search-home__named-query\">\n  <ng-container *ngIf=\"namedQueryList$ | async as namedQuery\">\n    <ng-container *ngIf=\"namedQuery.length > 0; else noNamedQuery\">\n      <div class=\"o-pry-search-home__named-query__card\">\n        <pry-expand-panel [open]=\"true\">\n          <pry-expand-panel-title>{{ '@pry.search.home.title' | i18n }}</pry-expand-panel-title>\n\n          <pry-card *ngFor=\"let nq of namedQuery.length > 1 && !isMoreList ? namedQuery.slice(0, 2) : namedQuery\">\n            <pry-card-header [marker]=\"true\">\n              <pry-card-icon>\n                <pry-nq-color-selector [datasource]=\"nq\" [disabled]=\"true\"></pry-nq-color-selector>\n                <img\n                  [alt]=\"nq.id | translateId : { type: 'datasource', output: 'name' } | async\"\n                  [height]=\"22\"\n                  [width]=\"22\"\n                  [src]=\"nq.id | translateId : { type: 'datasource', output: 'icon' } | async\"\n                />\n              </pry-card-icon>\n\n              <pry-card-title>\n                <div class=\"o-pry-card-title__text\" aria-describedby=\"infoTooltip_searchHome\">\n                  <div class=\"a-p o-pry-card-title__text__title\">{{ nq.name }}</div>\n                  <div class=\"a-p o-pry-card-title__text__description\" *ngIf=\"nq.description\">{{ nq.description }}</div>\n                </div>\n                <ng-template #infoTooltip>\n                  <div class=\"m-tooltip\" role=\"tooltip\" id=\"infoTooltip_searchHome\">\n                    <span class=\"m-tooltip__text\">\n                      {{ nq.name }}\n                    </span>\n                    <span class=\"m-tooltip__description\" *ngIf=\"nq.description\">\n                      {{ nq.description }}\n                    </span>\n                  </div>\n                </ng-template>\n                <pry-icon\n                  class=\"o-pry-card-title__pin\"\n                  *ngIf=\"nq.favorite\"\n                  [width]=\"18\"\n                  [height]=\"18\"\n                  aria-label=\"favorite\"\n                  iconSvg=\"epingle\"\n                ></pry-icon>\n\n                <button\n                  [attr.data-tooltip]=\"'@pry.search.home.showAssociatedWidget' | i18n\"\n                  data-tooltip-position=\"bottom\"\n                  class=\"a-tooltip a-btn a-btn--secondary -size-sm -override-tooltip-position\"\n                  (click)=\"onSearchNamedQuery(nq.id)\"\n                  *ngIf=\"(layout$ | async) !== DashboardGridLayout.MANUAL\"\n                >\n                  {{ '@pry.search.namedQuery.display' | i18n }}\n                  <span class=\"u-visually-hidden\">{{ '@pry.search.home.associatedWidget' | i18n }}</span>\n                </button>\n              </pry-card-title>\n\n              <pry-card-menu>\n                <div class=\"o-pry-card-menu__nav\">\n                  <button\n                    type=\"button\"\n                    class=\"a-btn a-btn--icon-text o-pry-card-menu__nav__item\"\n                    (click)=\"onFavorite(nq.id, nq.favorite)\"\n                  >\n                    <pry-icon iconSvg=\"epingle\"></pry-icon>\n                    {{ (nq.favorite ? '@pry.search.namedQuery.noFavorite' : '@pry.search.namedQuery.favorite') | i18n }}\n                  </button>\n                  <pry-card-menu (click)=\"refresh(nq.id)\" class=\"refreshbt\">\n                    <button type=\"button\" class=\"a-btn a-btn--icon-text o-pry-card-menu__nav__item\">\n                      <pry-icon iconSvg=\"synchro\"></pry-icon>\n                      {{ '@pry.search.namedQuery.refreshData' | i18n }}\n                    </button>\n                  </pry-card-menu>\n                  <pry-card-menu *ngIf=\"(layout$ | async) !== DashboardGridLayout.MANUAL\">\n                    <button\n                      type=\"button\"\n                      class=\"a-btn a-btn--icon-text o-pry-card-menu__nav__item\"\n                      (click)=\"loadOpened = nq.id; $event.stopPropagation()\"\n                      cdkOverlayOrigin\n                      #triggerLoad=\"cdkOverlayOrigin\"\n                    >\n                      <pry-icon iconSvg=\"file_download\"></pry-icon>\n                      {{ '@pry.search.namedQuery.display' | i18n }}\n                      <pry-icon\n                        iconSvg=\"fleche_haut\"\n                        [ngStyle]=\"{ transform: 'rotate(90deg)', marginLeft: 'auto' }\"\n                      ></pry-icon>\n                    </button>\n\n                    <ng-template\n                      cdkConnectedOverlay\n                      [cdkConnectedOverlayOrigin]=\"triggerLoad\"\n                      [cdkConnectedOverlayOpen]=\"loadOpened === nq.id\"\n                      [cdkConnectedOverlayHasBackdrop]=\"true\"\n                      [cdkConnectedOverlayPositions]=\"[connectedPosition]\"\n                      cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n                      (backdropClick)=\"loadOpened = undefined\"\n                    >\n                      <div class=\"o-draggable-menu -search-home\">\n                        <ul class=\"o-draggable-menu__list\">\n                          <ng-container *ngFor=\"let menu of structure\">\n                            <li class=\"o-draggable-menu__list__item\">\n                              <button class=\"a-btn\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                                <pry-icon [iconSvg]=\"menu.icon\"></pry-icon>\n                                {{ menu.label | i18n }}\n                              </button>\n\n                              <ul class=\"o-draggable-menu__list__submenu\">\n                                <ng-container *ngFor=\"let sub of menu.sub\">\n                                  <li class=\"o-draggable-menu__list__submenu__item\">\n                                    <button class=\"a-btn\" (click)=\"loadWidget(nq.id, sub)\">\n                                      <pry-icon [iconSvg]=\"sub.icon\"></pry-icon>\n                                      {{ sub.label | i18n }}\n                                    </button>\n                                  </li>\n                                </ng-container>\n                              </ul>\n                            </li>\n                          </ng-container>\n                        </ul>\n                      </div>\n                    </ng-template>\n                  </pry-card-menu>\n\n                  <pry-card-menu class=\"o-pry-card-menu__nav__item\">\n                    <pry-nq-color-selector [ngStyle]=\"{ width: '100%' }\" [datasource]=\"nq\"></pry-nq-color-selector>\n                  </pry-card-menu>\n\n                  <pry-card-menu (click)=\"onSpot(nq.id, $event)\">\n                    <button type=\"button\" class=\"a-btn a-btn--icon-text o-pry-card-menu__nav__item\">\n                      <pry-icon iconSvg=\"mode_clic\"></pry-icon>\n                      {{ '@pry.search.namedQuery.spot' | i18n }}\n                      <pry-icon\n                        iconSvg=\"fleche_haut\"\n                        [ngStyle]=\"{ transform: 'rotate(90deg)', marginLeft: 'auto' }\"\n                      ></pry-icon>\n                    </button>\n                  </pry-card-menu>\n                  <pry-card-menu (click)=\"onRefresh(nq.id, $event)\">\n                    <button type=\"button\" class=\"a-btn a-btn--icon-text o-pry-card-menu__nav__item\">\n                      <pry-icon iconSvg=\"history-line\"></pry-icon>\n                      {{ '@pry.search.namedQuery.refresh.title' | i18n }}\n                      <pry-icon\n                        iconSvg=\"fleche_haut\"\n                        [ngStyle]=\"{ transform: 'rotate(90deg)', marginLeft: 'auto' }\"\n                      ></pry-icon>\n                    </button>\n                  </pry-card-menu>\n                  <button\n                    type=\"button\"\n                    class=\"a-btn a-btn--icon-text o-pry-card-menu__nav__item\"\n                    (click)=\"onDelete(nq)\"\n                    *ngIf=\"nq.owner\"\n                  >\n                    <pry-icon iconSvg=\"delete\"></pry-icon>\n                    {{ '@pry.search.namedQuery.delete' | i18n }}\n                  </button>\n                  <button\n                    type=\"button\"\n                    class=\"a-btn a-btn--icon-text o-pry-card-menu__nav__item\"\n                    (click)=\"onRename(nq)\"\n                    *ngIf=\"nq.owner\"\n                  >\n                    <pry-icon iconSvg=\"renamed\"></pry-icon>\n                    {{ '@pry.search.namedQuery.rename' | i18n }}\n                  </button>\n                  <button\n                    type=\"button\"\n                    class=\"a-btn a-btn--icon-text o-pry-card-menu__nav__item\"\n                    (click)=\"onEdit(nq)\"\n                    (keydown.tab)=\"hideSpot()\"\n                  >\n                    <pry-icon iconSvg=\"edit\"></pry-icon>\n                    {{ '@pry.search.namedQuery.edit' | i18n }}\n                  </button>\n                </div>\n              </pry-card-menu>\n            </pry-card-header>\n          </pry-card>\n        </pry-expand-panel>\n      </div>\n      <button\n        class=\"a-btn -link-like\"\n        aria-pressed=\"false\"\n        id=\"btn_view_more\"\n        *ngIf=\"namedQuery.length > 2\"\n        (click)=\"onChangeListView(isMoreList)\"\n      >\n        {{ isMoreList ? ('@pry.search.namedQuery.seeLess' | i18n) : ('@pry.search.namedQuery.seeMore' | i18n) }}\n      </button>\n    </ng-container>\n\n    <ng-template #noNamedQuery>\n      <p class=\"search-home__container-search\">{{ '@pry.search.namedQuery.emptyNamedQuery' | i18n }}</p>\n    </ng-template>\n  </ng-container>\n</div>\n\n<div class=\"o-pry-search-home__search\">\n  <h3 class=\"a-h3\">{{ '@pry.search.home.ssTitle' | i18n }}</h3>\n  <ng-container *ngIf=\"searchFulltextTpl\">\n    <ng-container [ngTemplateOutlet]=\"searchFulltextTpl\"></ng-container>\n    <p class=\"a-p o-pry-search-home__search__or\">{{ '@pry.search.home.or' | i18n }}</p>\n  </ng-container>\n  <button class=\"a-btn a-btn--primary -width-full\" (click)=\"onSearchCriteria()\">\n    <pry-icon [width]=\"20\" [height]=\"20\" iconSvg=\"search-criteria\"></pry-icon>\n    {{ '@pry.search.home.searchByCriteria' | i18n }}\n    <pry-icon iconSvg=\"arrow_right\"></pry-icon>\n  </button>\n</div>\n\n<ng-template #templateSpot>\n  <div (mouseleave)=\"hideSpot()\">\n    {{\n      ((spottingWidget$ | async)?.length ?? 0 > 0\n        ? '@pry.search.namedQuery.spotTitle'\n        : '@pry.search.namedQuery.noSpot'\n      ) | i18n : { length: (spottingWidget$ | async)?.length }\n    }}\n    <div *ngFor=\"let use of spottingWidget$ | async\" class=\"spot-line\">\n      <pry-icon [width]=\"20\" [height]=\"20\" [iconSvg]=\"icons[use.type]\"></pry-icon>\n      {{ '@pry.search.namedQuery.type.' + use.type | i18n }} - {{ '@pry.search.namedQuery.use' | i18n : use }}\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #templateRefresh>\n  <div>\n    <button\n      *ngFor=\"let option of refreshOptions\"\n      class=\"refresh-line a-btn a-btn--icon-text -size-sm\"\n      (click)=\"selectRefresh(option)\"\n    >\n      <pry-icon\n        [width]=\"20\"\n        [height]=\"20\"\n        iconSvg=\"check\"\n        *ngIf=\"(((refreshRates$ | async) ?? {})[refreshId] ?? 0) === option\"\n      ></pry-icon>\n      {{ '@pry.search.namedQuery.refresh.' + option | i18n }}\n    </button>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.PryNqColorSelectorComponent, selector: "pry-nq-color-selector", inputs: ["disabled", "datasource"], outputs: ["colorChanged"] }, { kind: "component", type: i3.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "directive", type: i2$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: i5.PryExpandPanelComponent, selector: "pry-expand-panel", inputs: ["open"] }, { kind: "directive", type: i5.PryExpansionPanelTitleDirective, selector: "pry-expand-panel-title" }, { kind: "component", type: i6.PryCardComponent, selector: "pry-card", inputs: ["selected"], outputs: ["statusChange"] }, { kind: "directive", type: i6.PryCardIconDirective, selector: "pry-card-icon, [pry-card-icon], [pryCardIcon]" }, { kind: "directive", type: i6.PryCardTitleDirective, selector: "pry-card-title, [o-pry-card-title], [pryCardTitle]" }, { kind: "directive", type: i6.PryCardMenuDirective, selector: "pry-card-menu", outputs: ["closeMenu$"], exportAs: ["pryCardMenu"] }, { kind: "component", type: i6.PryCardHeaderComponent, selector: "pry-card-header", inputs: ["marker"] }, { kind: "component", type: PrySearchCssComponent, selector: "pry-search-css" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslateIdPipe, name: "translateId" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PrySearchHomeComponent, deps: [{ token: i1.Store }, { token: i2.Overlay }, { token: i0.ViewContainerRef }, { token: i3.PryDialogService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: PrySearchHomeComponent, selector: "pry-search-home", inputs: { searchFulltextTpl: "searchFulltextTpl", isMoreList: "isMoreList" }, outputs: { changeListView: "changeListView", changeSearchCriteria: "changeSearchCriteria" }, viewQueries: [{ propertyName: "templateSpot", first: true, predicate: ["templateSpot"], descendants: true, read: TemplateRef }, { propertyName: "templateRefresh", first: true, predicate: ["templateRefresh"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<pry-search-css></pry-search-css>\n<div class=\"o-pry-search-home__named-query\">\n  @if (namedQueryList$ | async; as namedQuery) {\n    @if (namedQuery.length > 0) {\n      <div class=\"o-pry-search-home__named-query__card\">\n        <pry-expand-panel [open]=\"true\">\n          <pry-expand-panel-title>{{ '@pry.search.home.title' | i18n }}</pry-expand-panel-title>\n          @for (nq of namedQuery.length > 1 && !isMoreList ? namedQuery.slice(0, 2) : namedQuery; track nq) {\n            <pry-card>\n              <pry-card-header [marker]=\"true\">\n                <pry-card-icon>\n                  <pry-nq-color-selector [datasource]=\"nq\" [disabled]=\"true\"></pry-nq-color-selector>\n                  <img\n                    [alt]=\"nq.id | translateId : { type: 'datasource', output: 'name' } | async\"\n                    [height]=\"22\"\n                    [width]=\"22\"\n                    [src]=\"nq.id | translateId : { type: 'datasource', output: 'icon' } | async\"\n                    />\n                </pry-card-icon>\n                <pry-card-title>\n                  <div class=\"o-pry-card-title__text\" aria-describedby=\"infoTooltip_searchHome\">\n                    <div class=\"a-p o-pry-card-title__text__title\">{{ nq.name }}</div>\n                    @if (nq.description) {\n                      <div class=\"a-p o-pry-card-title__text__description\">{{ nq.description }}</div>\n                    }\n                  </div>\n                  <ng-template #infoTooltip>\n                    <div class=\"m-tooltip\" role=\"tooltip\" id=\"infoTooltip_searchHome\">\n                      <span class=\"m-tooltip__text\">\n                        {{ nq.name }}\n                      </span>\n                      @if (nq.description) {\n                        <span class=\"m-tooltip__description\">\n                          {{ nq.description }}\n                        </span>\n                      }\n                    </div>\n                  </ng-template>\n                  @if (nq.favorite) {\n                    <pry-icon\n                      class=\"o-pry-card-title__pin\"\n                      [width]=\"18\"\n                      [height]=\"18\"\n                      aria-label=\"favorite\"\n                      iconSvg=\"epingle\"\n                    ></pry-icon>\n                  }\n                  @if ((layout$ | async) !== DashboardGridLayout.MANUAL) {\n                    <button\n                      [attr.data-tooltip]=\"'@pry.search.home.showAssociatedWidget' | i18n\"\n                      data-tooltip-position=\"bottom\"\n                      class=\"a-tooltip a-btn a-btn--secondary -size-sm -override-tooltip-position\"\n                      (click)=\"onSearchNamedQuery(nq.id)\"\n                      >\n                      {{ '@pry.search.namedQuery.display' | i18n }}\n                      <span class=\"u-visually-hidden\">{{ '@pry.search.home.associatedWidget' | i18n }}</span>\n                    </button>\n                  }\n                </pry-card-title>\n                <pry-card-menu>\n                  <div class=\"o-pry-card-menu__nav\">\n                    <button\n                      type=\"button\"\n                      class=\"a-btn a-btn--icon-text o-pry-card-menu__nav__item\"\n                      (click)=\"onFavorite(nq.id, nq.favorite)\"\n                      >\n                      <pry-icon iconSvg=\"epingle\"></pry-icon>\n                      {{ (nq.favorite ? '@pry.search.namedQuery.noFavorite' : '@pry.search.namedQuery.favorite') | i18n }}\n                    </button>\n                    <pry-card-menu (click)=\"refresh(nq.id)\" class=\"refreshbt\">\n                      <button type=\"button\" class=\"a-btn a-btn--icon-text o-pry-card-menu__nav__item\">\n                        <pry-icon iconSvg=\"synchro\"></pry-icon>\n                        {{ '@pry.search.namedQuery.refreshData' | i18n }}\n                      </button>\n                    </pry-card-menu>\n                    @if ((layout$ | async) !== DashboardGridLayout.MANUAL) {\n                      <pry-card-menu>\n                        <button\n                          type=\"button\"\n                          class=\"a-btn a-btn--icon-text o-pry-card-menu__nav__item\"\n                          (click)=\"loadOpened = nq.id; $event.stopPropagation()\"\n                          cdkOverlayOrigin\n                          #triggerLoad=\"cdkOverlayOrigin\"\n                          >\n                          <pry-icon iconSvg=\"file_download\"></pry-icon>\n                          {{ '@pry.search.namedQuery.display' | i18n }}\n                          <pry-icon\n                            iconSvg=\"fleche_haut\"\n                            [ngStyle]=\"{ transform: 'rotate(90deg)', marginLeft: 'auto' }\"\n                          ></pry-icon>\n                        </button>\n                        <ng-template\n                          cdkConnectedOverlay\n                          [cdkConnectedOverlayOrigin]=\"triggerLoad\"\n                          [cdkConnectedOverlayOpen]=\"loadOpened === nq.id\"\n                          [cdkConnectedOverlayHasBackdrop]=\"true\"\n                          [cdkConnectedOverlayPositions]=\"[connectedPosition]\"\n                          cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n                          (backdropClick)=\"loadOpened = undefined\"\n                          >\n                          <div class=\"o-draggable-menu -search-home\">\n                            <ul class=\"o-draggable-menu__list\">\n                              @for (menu of structure; track menu) {\n                                <li class=\"o-draggable-menu__list__item\">\n                                  <button class=\"a-btn\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                                    <pry-icon [iconSvg]=\"menu.icon\"></pry-icon>\n                                    {{ menu.label | i18n }}\n                                  </button>\n                                  <ul class=\"o-draggable-menu__list__submenu\">\n                                    @for (sub of menu.sub; track sub) {\n                                      <li class=\"o-draggable-menu__list__submenu__item\">\n                                        <button class=\"a-btn\" (click)=\"loadWidget(nq.id, sub)\">\n                                          <pry-icon [iconSvg]=\"sub.icon\"></pry-icon>\n                                          {{ sub.label | i18n }}\n                                        </button>\n                                      </li>\n                                    }\n                                  </ul>\n                                </li>\n                              }\n                            </ul>\n                          </div>\n                        </ng-template>\n                      </pry-card-menu>\n                    }\n                    <pry-card-menu class=\"o-pry-card-menu__nav__item\">\n                      <pry-nq-color-selector [ngStyle]=\"{ width: '100%' }\" [datasource]=\"nq\"></pry-nq-color-selector>\n                    </pry-card-menu>\n                    <pry-card-menu (click)=\"onSpot(nq.id, $event)\">\n                      <button type=\"button\" class=\"a-btn a-btn--icon-text o-pry-card-menu__nav__item\">\n                        <pry-icon iconSvg=\"mode_clic\"></pry-icon>\n                        {{ '@pry.search.namedQuery.spot' | i18n }}\n                        <pry-icon\n                          iconSvg=\"fleche_haut\"\n                          [ngStyle]=\"{ transform: 'rotate(90deg)', marginLeft: 'auto' }\"\n                        ></pry-icon>\n                      </button>\n                    </pry-card-menu>\n                    <pry-card-menu (click)=\"onRefresh(nq.id, $event)\">\n                      <button type=\"button\" class=\"a-btn a-btn--icon-text o-pry-card-menu__nav__item\">\n                        <pry-icon iconSvg=\"history-line\"></pry-icon>\n                        {{ '@pry.search.namedQuery.refresh.title' | i18n }}\n                        <pry-icon\n                          iconSvg=\"fleche_haut\"\n                          [ngStyle]=\"{ transform: 'rotate(90deg)', marginLeft: 'auto' }\"\n                        ></pry-icon>\n                      </button>\n                    </pry-card-menu>\n                    @if (nq.owner) {\n                      <button\n                        type=\"button\"\n                        class=\"a-btn a-btn--icon-text o-pry-card-menu__nav__item\"\n                        (click)=\"onDelete(nq)\"\n                        >\n                        <pry-icon iconSvg=\"delete\"></pry-icon>\n                        {{ '@pry.search.namedQuery.delete' | i18n }}\n                      </button>\n                    }\n                    @if (nq.owner) {\n                      <button\n                        type=\"button\"\n                        class=\"a-btn a-btn--icon-text o-pry-card-menu__nav__item\"\n                        (click)=\"onRename(nq)\"\n                        >\n                        <pry-icon iconSvg=\"renamed\"></pry-icon>\n                        {{ '@pry.search.namedQuery.rename' | i18n }}\n                      </button>\n                    }\n                    <button\n                      type=\"button\"\n                      class=\"a-btn a-btn--icon-text o-pry-card-menu__nav__item\"\n                      (click)=\"onEdit(nq)\"\n                      (keydown.tab)=\"hideSpot()\"\n                      >\n                      <pry-icon iconSvg=\"edit\"></pry-icon>\n                      {{ '@pry.search.namedQuery.edit' | i18n }}\n                    </button>\n                  </div>\n                </pry-card-menu>\n              </pry-card-header>\n            </pry-card>\n          }\n        </pry-expand-panel>\n      </div>\n      @if (namedQuery.length > 2) {\n        <button\n          class=\"a-btn -link-like\"\n          aria-pressed=\"false\"\n          id=\"btn_view_more\"\n          (click)=\"onChangeListView(isMoreList)\"\n          >\n          {{ isMoreList ? ('@pry.search.namedQuery.seeLess' | i18n) : ('@pry.search.namedQuery.seeMore' | i18n) }}\n        </button>\n      }\n    } @else {\n      <p class=\"search-home__container-search\">{{ '@pry.search.namedQuery.emptyNamedQuery' | i18n }}</p>\n    }\n  }\n</div>\n\n<div class=\"o-pry-search-home__search\">\n  <h3 class=\"a-h3\">{{ '@pry.search.home.ssTitle' | i18n }}</h3>\n  @if (searchFulltextTpl) {\n    <ng-container [ngTemplateOutlet]=\"searchFulltextTpl\"></ng-container>\n    <p class=\"a-p o-pry-search-home__search__or\">{{ '@pry.search.home.or' | i18n }}</p>\n  }\n  <button class=\"a-btn a-btn--primary -width-full\" (click)=\"onSearchCriteria()\">\n    <pry-icon [width]=\"20\" [height]=\"20\" iconSvg=\"search-criteria\"></pry-icon>\n    {{ '@pry.search.home.searchByCriteria' | i18n }}\n    <pry-icon iconSvg=\"arrow_right\"></pry-icon>\n  </button>\n</div>\n\n<ng-template #templateSpot>\n  <div (mouseleave)=\"hideSpot()\">\n    {{\n    ((spottingWidget$ | async)?.length ?? 0 > 0\n    ? '@pry.search.namedQuery.spotTitle'\n    : '@pry.search.namedQuery.noSpot'\n    ) | i18n : { length: (spottingWidget$ | async)?.length }\n    }}\n    @for (use of spottingWidget$ | async; track use) {\n      <div class=\"spot-line\">\n        <pry-icon [width]=\"20\" [height]=\"20\" [iconSvg]=\"icons[use.type]\"></pry-icon>\n        {{ '@pry.search.namedQuery.type.' + use.type | i18n }} - {{ '@pry.search.namedQuery.use' | i18n : use }}\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #templateRefresh>\n  <div>\n    @for (option of refreshOptions; track option) {\n      <button\n        class=\"refresh-line a-btn a-btn--icon-text -size-sm\"\n        (click)=\"selectRefresh(option)\"\n        >\n        @if ((((refreshRates$ | async) ?? {})[refreshId] ?? 0) === option) {\n          <pry-icon\n            [width]=\"20\"\n            [height]=\"20\"\n            iconSvg=\"check\"\n          ></pry-icon>\n        }\n        {{ '@pry.search.namedQuery.refresh.' + option | i18n }}\n      </button>\n    }\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.PryNqColorSelectorComponent, selector: "pry-nq-color-selector", inputs: ["disabled", "datasource"], outputs: ["colorChanged"] }, { kind: "component", type: i3.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: i5.PryExpandPanelComponent, selector: "pry-expand-panel", inputs: ["open"] }, { kind: "directive", type: i5.PryExpansionPanelTitleDirective, selector: "pry-expand-panel-title" }, { kind: "component", type: i6.PryCardComponent, selector: "pry-card", inputs: ["selected"], outputs: ["statusChange"] }, { kind: "directive", type: i6.PryCardIconDirective, selector: "pry-card-icon, [pry-card-icon], [pryCardIcon]" }, { kind: "directive", type: i6.PryCardTitleDirective, selector: "pry-card-title, [o-pry-card-title], [pryCardTitle]" }, { kind: "directive", type: i6.PryCardMenuDirective, selector: "pry-card-menu", outputs: ["closeMenu$"], exportAs: ["pryCardMenu"] }, { kind: "component", type: i6.PryCardHeaderComponent, selector: "pry-card-header", inputs: ["marker"] }, { kind: "component", type: PrySearchCssComponent, selector: "pry-search-css" }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslateIdPipe, name: "translateId" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PrySearchHomeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-search-home', template: "<pry-search-css></pry-search-css>\n<div class=\"o-pry-search-home__named-query\">\n  <ng-container *ngIf=\"namedQueryList$ | async as namedQuery\">\n    <ng-container *ngIf=\"namedQuery.length > 0; else noNamedQuery\">\n      <div class=\"o-pry-search-home__named-query__card\">\n        <pry-expand-panel [open]=\"true\">\n          <pry-expand-panel-title>{{ '@pry.search.home.title' | i18n }}</pry-expand-panel-title>\n\n          <pry-card *ngFor=\"let nq of namedQuery.length > 1 && !isMoreList ? namedQuery.slice(0, 2) : namedQuery\">\n            <pry-card-header [marker]=\"true\">\n              <pry-card-icon>\n                <pry-nq-color-selector [datasource]=\"nq\" [disabled]=\"true\"></pry-nq-color-selector>\n                <img\n                  [alt]=\"nq.id | translateId : { type: 'datasource', output: 'name' } | async\"\n                  [height]=\"22\"\n                  [width]=\"22\"\n                  [src]=\"nq.id | translateId : { type: 'datasource', output: 'icon' } | async\"\n                />\n              </pry-card-icon>\n\n              <pry-card-title>\n                <div class=\"o-pry-card-title__text\" aria-describedby=\"infoTooltip_searchHome\">\n                  <div class=\"a-p o-pry-card-title__text__title\">{{ nq.name }}</div>\n                  <div class=\"a-p o-pry-card-title__text__description\" *ngIf=\"nq.description\">{{ nq.description }}</div>\n                </div>\n                <ng-template #infoTooltip>\n                  <div class=\"m-tooltip\" role=\"tooltip\" id=\"infoTooltip_searchHome\">\n                    <span class=\"m-tooltip__text\">\n                      {{ nq.name }}\n                    </span>\n                    <span class=\"m-tooltip__description\" *ngIf=\"nq.description\">\n                      {{ nq.description }}\n                    </span>\n                  </div>\n                </ng-template>\n                <pry-icon\n                  class=\"o-pry-card-title__pin\"\n                  *ngIf=\"nq.favorite\"\n                  [width]=\"18\"\n                  [height]=\"18\"\n                  aria-label=\"favorite\"\n                  iconSvg=\"epingle\"\n                ></pry-icon>\n\n                <button\n                  [attr.data-tooltip]=\"'@pry.search.home.showAssociatedWidget' | i18n\"\n                  data-tooltip-position=\"bottom\"\n                  class=\"a-tooltip a-btn a-btn--secondary -size-sm -override-tooltip-position\"\n                  (click)=\"onSearchNamedQuery(nq.id)\"\n                  *ngIf=\"(layout$ | async) !== DashboardGridLayout.MANUAL\"\n                >\n                  {{ '@pry.search.namedQuery.display' | i18n }}\n                  <span class=\"u-visually-hidden\">{{ '@pry.search.home.associatedWidget' | i18n }}</span>\n                </button>\n              </pry-card-title>\n\n              <pry-card-menu>\n                <div class=\"o-pry-card-menu__nav\">\n                  <button\n                    type=\"button\"\n                    class=\"a-btn a-btn--icon-text o-pry-card-menu__nav__item\"\n                    (click)=\"onFavorite(nq.id, nq.favorite)\"\n                  >\n                    <pry-icon iconSvg=\"epingle\"></pry-icon>\n                    {{ (nq.favorite ? '@pry.search.namedQuery.noFavorite' : '@pry.search.namedQuery.favorite') | i18n }}\n                  </button>\n                  <pry-card-menu (click)=\"refresh(nq.id)\" class=\"refreshbt\">\n                    <button type=\"button\" class=\"a-btn a-btn--icon-text o-pry-card-menu__nav__item\">\n                      <pry-icon iconSvg=\"synchro\"></pry-icon>\n                      {{ '@pry.search.namedQuery.refreshData' | i18n }}\n                    </button>\n                  </pry-card-menu>\n                  <pry-card-menu *ngIf=\"(layout$ | async) !== DashboardGridLayout.MANUAL\">\n                    <button\n                      type=\"button\"\n                      class=\"a-btn a-btn--icon-text o-pry-card-menu__nav__item\"\n                      (click)=\"loadOpened = nq.id; $event.stopPropagation()\"\n                      cdkOverlayOrigin\n                      #triggerLoad=\"cdkOverlayOrigin\"\n                    >\n                      <pry-icon iconSvg=\"file_download\"></pry-icon>\n                      {{ '@pry.search.namedQuery.display' | i18n }}\n                      <pry-icon\n                        iconSvg=\"fleche_haut\"\n                        [ngStyle]=\"{ transform: 'rotate(90deg)', marginLeft: 'auto' }\"\n                      ></pry-icon>\n                    </button>\n\n                    <ng-template\n                      cdkConnectedOverlay\n                      [cdkConnectedOverlayOrigin]=\"triggerLoad\"\n                      [cdkConnectedOverlayOpen]=\"loadOpened === nq.id\"\n                      [cdkConnectedOverlayHasBackdrop]=\"true\"\n                      [cdkConnectedOverlayPositions]=\"[connectedPosition]\"\n                      cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n                      (backdropClick)=\"loadOpened = undefined\"\n                    >\n                      <div class=\"o-draggable-menu -search-home\">\n                        <ul class=\"o-draggable-menu__list\">\n                          <ng-container *ngFor=\"let menu of structure\">\n                            <li class=\"o-draggable-menu__list__item\">\n                              <button class=\"a-btn\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                                <pry-icon [iconSvg]=\"menu.icon\"></pry-icon>\n                                {{ menu.label | i18n }}\n                              </button>\n\n                              <ul class=\"o-draggable-menu__list__submenu\">\n                                <ng-container *ngFor=\"let sub of menu.sub\">\n                                  <li class=\"o-draggable-menu__list__submenu__item\">\n                                    <button class=\"a-btn\" (click)=\"loadWidget(nq.id, sub)\">\n                                      <pry-icon [iconSvg]=\"sub.icon\"></pry-icon>\n                                      {{ sub.label | i18n }}\n                                    </button>\n                                  </li>\n                                </ng-container>\n                              </ul>\n                            </li>\n                          </ng-container>\n                        </ul>\n                      </div>\n                    </ng-template>\n                  </pry-card-menu>\n\n                  <pry-card-menu class=\"o-pry-card-menu__nav__item\">\n                    <pry-nq-color-selector [ngStyle]=\"{ width: '100%' }\" [datasource]=\"nq\"></pry-nq-color-selector>\n                  </pry-card-menu>\n\n                  <pry-card-menu (click)=\"onSpot(nq.id, $event)\">\n                    <button type=\"button\" class=\"a-btn a-btn--icon-text o-pry-card-menu__nav__item\">\n                      <pry-icon iconSvg=\"mode_clic\"></pry-icon>\n                      {{ '@pry.search.namedQuery.spot' | i18n }}\n                      <pry-icon\n                        iconSvg=\"fleche_haut\"\n                        [ngStyle]=\"{ transform: 'rotate(90deg)', marginLeft: 'auto' }\"\n                      ></pry-icon>\n                    </button>\n                  </pry-card-menu>\n                  <pry-card-menu (click)=\"onRefresh(nq.id, $event)\">\n                    <button type=\"button\" class=\"a-btn a-btn--icon-text o-pry-card-menu__nav__item\">\n                      <pry-icon iconSvg=\"history-line\"></pry-icon>\n                      {{ '@pry.search.namedQuery.refresh.title' | i18n }}\n                      <pry-icon\n                        iconSvg=\"fleche_haut\"\n                        [ngStyle]=\"{ transform: 'rotate(90deg)', marginLeft: 'auto' }\"\n                      ></pry-icon>\n                    </button>\n                  </pry-card-menu>\n                  <button\n                    type=\"button\"\n                    class=\"a-btn a-btn--icon-text o-pry-card-menu__nav__item\"\n                    (click)=\"onDelete(nq)\"\n                    *ngIf=\"nq.owner\"\n                  >\n                    <pry-icon iconSvg=\"delete\"></pry-icon>\n                    {{ '@pry.search.namedQuery.delete' | i18n }}\n                  </button>\n                  <button\n                    type=\"button\"\n                    class=\"a-btn a-btn--icon-text o-pry-card-menu__nav__item\"\n                    (click)=\"onRename(nq)\"\n                    *ngIf=\"nq.owner\"\n                  >\n                    <pry-icon iconSvg=\"renamed\"></pry-icon>\n                    {{ '@pry.search.namedQuery.rename' | i18n }}\n                  </button>\n                  <button\n                    type=\"button\"\n                    class=\"a-btn a-btn--icon-text o-pry-card-menu__nav__item\"\n                    (click)=\"onEdit(nq)\"\n                    (keydown.tab)=\"hideSpot()\"\n                  >\n                    <pry-icon iconSvg=\"edit\"></pry-icon>\n                    {{ '@pry.search.namedQuery.edit' | i18n }}\n                  </button>\n                </div>\n              </pry-card-menu>\n            </pry-card-header>\n          </pry-card>\n        </pry-expand-panel>\n      </div>\n      <button\n        class=\"a-btn -link-like\"\n        aria-pressed=\"false\"\n        id=\"btn_view_more\"\n        *ngIf=\"namedQuery.length > 2\"\n        (click)=\"onChangeListView(isMoreList)\"\n      >\n        {{ isMoreList ? ('@pry.search.namedQuery.seeLess' | i18n) : ('@pry.search.namedQuery.seeMore' | i18n) }}\n      </button>\n    </ng-container>\n\n    <ng-template #noNamedQuery>\n      <p class=\"search-home__container-search\">{{ '@pry.search.namedQuery.emptyNamedQuery' | i18n }}</p>\n    </ng-template>\n  </ng-container>\n</div>\n\n<div class=\"o-pry-search-home__search\">\n  <h3 class=\"a-h3\">{{ '@pry.search.home.ssTitle' | i18n }}</h3>\n  <ng-container *ngIf=\"searchFulltextTpl\">\n    <ng-container [ngTemplateOutlet]=\"searchFulltextTpl\"></ng-container>\n    <p class=\"a-p o-pry-search-home__search__or\">{{ '@pry.search.home.or' | i18n }}</p>\n  </ng-container>\n  <button class=\"a-btn a-btn--primary -width-full\" (click)=\"onSearchCriteria()\">\n    <pry-icon [width]=\"20\" [height]=\"20\" iconSvg=\"search-criteria\"></pry-icon>\n    {{ '@pry.search.home.searchByCriteria' | i18n }}\n    <pry-icon iconSvg=\"arrow_right\"></pry-icon>\n  </button>\n</div>\n\n<ng-template #templateSpot>\n  <div (mouseleave)=\"hideSpot()\">\n    {{\n      ((spottingWidget$ | async)?.length ?? 0 > 0\n        ? '@pry.search.namedQuery.spotTitle'\n        : '@pry.search.namedQuery.noSpot'\n      ) | i18n : { length: (spottingWidget$ | async)?.length }\n    }}\n    <div *ngFor=\"let use of spottingWidget$ | async\" class=\"spot-line\">\n      <pry-icon [width]=\"20\" [height]=\"20\" [iconSvg]=\"icons[use.type]\"></pry-icon>\n      {{ '@pry.search.namedQuery.type.' + use.type | i18n }} - {{ '@pry.search.namedQuery.use' | i18n : use }}\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #templateRefresh>\n  <div>\n    <button\n      *ngFor=\"let option of refreshOptions\"\n      class=\"refresh-line a-btn a-btn--icon-text -size-sm\"\n      (click)=\"selectRefresh(option)\"\n    >\n      <pry-icon\n        [width]=\"20\"\n        [height]=\"20\"\n        iconSvg=\"check\"\n        *ngIf=\"(((refreshRates$ | async) ?? {})[refreshId] ?? 0) === option\"\n      ></pry-icon>\n      {{ '@pry.search.namedQuery.refresh.' + option | i18n }}\n    </button>\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: i1.Store }, { type: i2$1.Overlay }, { type: i0.ViewContainerRef }, { type: i3.PryDialogService }], propDecorators: { templateSpot: [{
+            args: [{ selector: 'pry-search-home', template: "<pry-search-css></pry-search-css>\n<div class=\"o-pry-search-home__named-query\">\n  @if (namedQueryList$ | async; as namedQuery) {\n    @if (namedQuery.length > 0) {\n      <div class=\"o-pry-search-home__named-query__card\">\n        <pry-expand-panel [open]=\"true\">\n          <pry-expand-panel-title>{{ '@pry.search.home.title' | i18n }}</pry-expand-panel-title>\n          @for (nq of namedQuery.length > 1 && !isMoreList ? namedQuery.slice(0, 2) : namedQuery; track nq) {\n            <pry-card>\n              <pry-card-header [marker]=\"true\">\n                <pry-card-icon>\n                  <pry-nq-color-selector [datasource]=\"nq\" [disabled]=\"true\"></pry-nq-color-selector>\n                  <img\n                    [alt]=\"nq.id | translateId : { type: 'datasource', output: 'name' } | async\"\n                    [height]=\"22\"\n                    [width]=\"22\"\n                    [src]=\"nq.id | translateId : { type: 'datasource', output: 'icon' } | async\"\n                    />\n                </pry-card-icon>\n                <pry-card-title>\n                  <div class=\"o-pry-card-title__text\" aria-describedby=\"infoTooltip_searchHome\">\n                    <div class=\"a-p o-pry-card-title__text__title\">{{ nq.name }}</div>\n                    @if (nq.description) {\n                      <div class=\"a-p o-pry-card-title__text__description\">{{ nq.description }}</div>\n                    }\n                  </div>\n                  <ng-template #infoTooltip>\n                    <div class=\"m-tooltip\" role=\"tooltip\" id=\"infoTooltip_searchHome\">\n                      <span class=\"m-tooltip__text\">\n                        {{ nq.name }}\n                      </span>\n                      @if (nq.description) {\n                        <span class=\"m-tooltip__description\">\n                          {{ nq.description }}\n                        </span>\n                      }\n                    </div>\n                  </ng-template>\n                  @if (nq.favorite) {\n                    <pry-icon\n                      class=\"o-pry-card-title__pin\"\n                      [width]=\"18\"\n                      [height]=\"18\"\n                      aria-label=\"favorite\"\n                      iconSvg=\"epingle\"\n                    ></pry-icon>\n                  }\n                  @if ((layout$ | async) !== DashboardGridLayout.MANUAL) {\n                    <button\n                      [attr.data-tooltip]=\"'@pry.search.home.showAssociatedWidget' | i18n\"\n                      data-tooltip-position=\"bottom\"\n                      class=\"a-tooltip a-btn a-btn--secondary -size-sm -override-tooltip-position\"\n                      (click)=\"onSearchNamedQuery(nq.id)\"\n                      >\n                      {{ '@pry.search.namedQuery.display' | i18n }}\n                      <span class=\"u-visually-hidden\">{{ '@pry.search.home.associatedWidget' | i18n }}</span>\n                    </button>\n                  }\n                </pry-card-title>\n                <pry-card-menu>\n                  <div class=\"o-pry-card-menu__nav\">\n                    <button\n                      type=\"button\"\n                      class=\"a-btn a-btn--icon-text o-pry-card-menu__nav__item\"\n                      (click)=\"onFavorite(nq.id, nq.favorite)\"\n                      >\n                      <pry-icon iconSvg=\"epingle\"></pry-icon>\n                      {{ (nq.favorite ? '@pry.search.namedQuery.noFavorite' : '@pry.search.namedQuery.favorite') | i18n }}\n                    </button>\n                    <pry-card-menu (click)=\"refresh(nq.id)\" class=\"refreshbt\">\n                      <button type=\"button\" class=\"a-btn a-btn--icon-text o-pry-card-menu__nav__item\">\n                        <pry-icon iconSvg=\"synchro\"></pry-icon>\n                        {{ '@pry.search.namedQuery.refreshData' | i18n }}\n                      </button>\n                    </pry-card-menu>\n                    @if ((layout$ | async) !== DashboardGridLayout.MANUAL) {\n                      <pry-card-menu>\n                        <button\n                          type=\"button\"\n                          class=\"a-btn a-btn--icon-text o-pry-card-menu__nav__item\"\n                          (click)=\"loadOpened = nq.id; $event.stopPropagation()\"\n                          cdkOverlayOrigin\n                          #triggerLoad=\"cdkOverlayOrigin\"\n                          >\n                          <pry-icon iconSvg=\"file_download\"></pry-icon>\n                          {{ '@pry.search.namedQuery.display' | i18n }}\n                          <pry-icon\n                            iconSvg=\"fleche_haut\"\n                            [ngStyle]=\"{ transform: 'rotate(90deg)', marginLeft: 'auto' }\"\n                          ></pry-icon>\n                        </button>\n                        <ng-template\n                          cdkConnectedOverlay\n                          [cdkConnectedOverlayOrigin]=\"triggerLoad\"\n                          [cdkConnectedOverlayOpen]=\"loadOpened === nq.id\"\n                          [cdkConnectedOverlayHasBackdrop]=\"true\"\n                          [cdkConnectedOverlayPositions]=\"[connectedPosition]\"\n                          cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n                          (backdropClick)=\"loadOpened = undefined\"\n                          >\n                          <div class=\"o-draggable-menu -search-home\">\n                            <ul class=\"o-draggable-menu__list\">\n                              @for (menu of structure; track menu) {\n                                <li class=\"o-draggable-menu__list__item\">\n                                  <button class=\"a-btn\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                                    <pry-icon [iconSvg]=\"menu.icon\"></pry-icon>\n                                    {{ menu.label | i18n }}\n                                  </button>\n                                  <ul class=\"o-draggable-menu__list__submenu\">\n                                    @for (sub of menu.sub; track sub) {\n                                      <li class=\"o-draggable-menu__list__submenu__item\">\n                                        <button class=\"a-btn\" (click)=\"loadWidget(nq.id, sub)\">\n                                          <pry-icon [iconSvg]=\"sub.icon\"></pry-icon>\n                                          {{ sub.label | i18n }}\n                                        </button>\n                                      </li>\n                                    }\n                                  </ul>\n                                </li>\n                              }\n                            </ul>\n                          </div>\n                        </ng-template>\n                      </pry-card-menu>\n                    }\n                    <pry-card-menu class=\"o-pry-card-menu__nav__item\">\n                      <pry-nq-color-selector [ngStyle]=\"{ width: '100%' }\" [datasource]=\"nq\"></pry-nq-color-selector>\n                    </pry-card-menu>\n                    <pry-card-menu (click)=\"onSpot(nq.id, $event)\">\n                      <button type=\"button\" class=\"a-btn a-btn--icon-text o-pry-card-menu__nav__item\">\n                        <pry-icon iconSvg=\"mode_clic\"></pry-icon>\n                        {{ '@pry.search.namedQuery.spot' | i18n }}\n                        <pry-icon\n                          iconSvg=\"fleche_haut\"\n                          [ngStyle]=\"{ transform: 'rotate(90deg)', marginLeft: 'auto' }\"\n                        ></pry-icon>\n                      </button>\n                    </pry-card-menu>\n                    <pry-card-menu (click)=\"onRefresh(nq.id, $event)\">\n                      <button type=\"button\" class=\"a-btn a-btn--icon-text o-pry-card-menu__nav__item\">\n                        <pry-icon iconSvg=\"history-line\"></pry-icon>\n                        {{ '@pry.search.namedQuery.refresh.title' | i18n }}\n                        <pry-icon\n                          iconSvg=\"fleche_haut\"\n                          [ngStyle]=\"{ transform: 'rotate(90deg)', marginLeft: 'auto' }\"\n                        ></pry-icon>\n                      </button>\n                    </pry-card-menu>\n                    @if (nq.owner) {\n                      <button\n                        type=\"button\"\n                        class=\"a-btn a-btn--icon-text o-pry-card-menu__nav__item\"\n                        (click)=\"onDelete(nq)\"\n                        >\n                        <pry-icon iconSvg=\"delete\"></pry-icon>\n                        {{ '@pry.search.namedQuery.delete' | i18n }}\n                      </button>\n                    }\n                    @if (nq.owner) {\n                      <button\n                        type=\"button\"\n                        class=\"a-btn a-btn--icon-text o-pry-card-menu__nav__item\"\n                        (click)=\"onRename(nq)\"\n                        >\n                        <pry-icon iconSvg=\"renamed\"></pry-icon>\n                        {{ '@pry.search.namedQuery.rename' | i18n }}\n                      </button>\n                    }\n                    <button\n                      type=\"button\"\n                      class=\"a-btn a-btn--icon-text o-pry-card-menu__nav__item\"\n                      (click)=\"onEdit(nq)\"\n                      (keydown.tab)=\"hideSpot()\"\n                      >\n                      <pry-icon iconSvg=\"edit\"></pry-icon>\n                      {{ '@pry.search.namedQuery.edit' | i18n }}\n                    </button>\n                  </div>\n                </pry-card-menu>\n              </pry-card-header>\n            </pry-card>\n          }\n        </pry-expand-panel>\n      </div>\n      @if (namedQuery.length > 2) {\n        <button\n          class=\"a-btn -link-like\"\n          aria-pressed=\"false\"\n          id=\"btn_view_more\"\n          (click)=\"onChangeListView(isMoreList)\"\n          >\n          {{ isMoreList ? ('@pry.search.namedQuery.seeLess' | i18n) : ('@pry.search.namedQuery.seeMore' | i18n) }}\n        </button>\n      }\n    } @else {\n      <p class=\"search-home__container-search\">{{ '@pry.search.namedQuery.emptyNamedQuery' | i18n }}</p>\n    }\n  }\n</div>\n\n<div class=\"o-pry-search-home__search\">\n  <h3 class=\"a-h3\">{{ '@pry.search.home.ssTitle' | i18n }}</h3>\n  @if (searchFulltextTpl) {\n    <ng-container [ngTemplateOutlet]=\"searchFulltextTpl\"></ng-container>\n    <p class=\"a-p o-pry-search-home__search__or\">{{ '@pry.search.home.or' | i18n }}</p>\n  }\n  <button class=\"a-btn a-btn--primary -width-full\" (click)=\"onSearchCriteria()\">\n    <pry-icon [width]=\"20\" [height]=\"20\" iconSvg=\"search-criteria\"></pry-icon>\n    {{ '@pry.search.home.searchByCriteria' | i18n }}\n    <pry-icon iconSvg=\"arrow_right\"></pry-icon>\n  </button>\n</div>\n\n<ng-template #templateSpot>\n  <div (mouseleave)=\"hideSpot()\">\n    {{\n    ((spottingWidget$ | async)?.length ?? 0 > 0\n    ? '@pry.search.namedQuery.spotTitle'\n    : '@pry.search.namedQuery.noSpot'\n    ) | i18n : { length: (spottingWidget$ | async)?.length }\n    }}\n    @for (use of spottingWidget$ | async; track use) {\n      <div class=\"spot-line\">\n        <pry-icon [width]=\"20\" [height]=\"20\" [iconSvg]=\"icons[use.type]\"></pry-icon>\n        {{ '@pry.search.namedQuery.type.' + use.type | i18n }} - {{ '@pry.search.namedQuery.use' | i18n : use }}\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #templateRefresh>\n  <div>\n    @for (option of refreshOptions; track option) {\n      <button\n        class=\"refresh-line a-btn a-btn--icon-text -size-sm\"\n        (click)=\"selectRefresh(option)\"\n        >\n        @if ((((refreshRates$ | async) ?? {})[refreshId] ?? 0) === option) {\n          <pry-icon\n            [width]=\"20\"\n            [height]=\"20\"\n            iconSvg=\"check\"\n          ></pry-icon>\n        }\n        {{ '@pry.search.namedQuery.refresh.' + option | i18n }}\n      </button>\n    }\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Overlay }, { type: i0.ViewContainerRef }, { type: i3.PryDialogService }], propDecorators: { templateSpot: [{
                 type: ViewChild,
                 args: ['templateSpot', { read: TemplateRef }]
             }], templateRefresh: [{
@@ -693,11 +693,11 @@ class PrySearchSelectAttributeComponent {
         this.selectAttributeChange.emit(attribute);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PrySearchSelectAttributeComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: PrySearchSelectAttributeComponent, selector: "pry-search-select-attribute", inputs: { id: "id" }, outputs: { selectAttributeChange: "selectAttributeChange" }, ngImport: i0, template: "<ng-container *ngIf=\"_attributes$ | async as attributes\">\n  <ul class=\"m-pry-search-select-attribute\">\n    <li class=\"m-pry-search-select-attribute__item\" *ngFor=\"let attr of attributes\">\n      <button class=\"a-btn\" (click)=\"onSelectAttribute(attr)\">\n        {{ attr.name }}\n      </button>\n    </li>\n  </ul>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: PrySearchSelectAttributeComponent, selector: "pry-search-select-attribute", inputs: { id: "id" }, outputs: { selectAttributeChange: "selectAttributeChange" }, ngImport: i0, template: "@if (_attributes$ | async; as attributes) {\n  <ul class=\"m-pry-search-select-attribute\">\n    @for (attr of attributes; track attr) {\n      <li class=\"m-pry-search-select-attribute__item\">\n        <button class=\"a-btn\" (click)=\"onSelectAttribute(attr)\">\n          {{ attr.name }}\n        </button>\n      </li>\n    }\n  </ul>\n}\n", dependencies: [{ kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PrySearchSelectAttributeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-search-select-attribute', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"_attributes$ | async as attributes\">\n  <ul class=\"m-pry-search-select-attribute\">\n    <li class=\"m-pry-search-select-attribute__item\" *ngFor=\"let attr of attributes\">\n      <button class=\"a-btn\" (click)=\"onSelectAttribute(attr)\">\n        {{ attr.name }}\n      </button>\n    </li>\n  </ul>\n</ng-container>\n" }]
+            args: [{ selector: 'pry-search-select-attribute', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (_attributes$ | async; as attributes) {\n  <ul class=\"m-pry-search-select-attribute\">\n    @for (attr of attributes; track attr) {\n      <li class=\"m-pry-search-select-attribute__item\">\n        <button class=\"a-btn\" (click)=\"onSelectAttribute(attr)\">\n          {{ attr.name }}\n        </button>\n      </li>\n    }\n  </ul>\n}\n" }]
         }], ctorParameters: () => [{ type: i1.Store }], propDecorators: { id: [{
                 type: Input
             }], selectAttributeChange: [{
@@ -817,11 +817,11 @@ class PrySearchConditionComponent {
             .pipe(filter((cond) => cond !== null));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PrySearchConditionComponent, deps: [{ token: i1.Store }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: PrySearchConditionComponent, selector: "pry-search-condition", inputs: { attributeId: "attributeId", id: "id", useTextDateInputs: "useTextDateInputs" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<div class=\"o-pry-search-condition\">\n  <div class=\"o-pry-search-condition__fields\" [class.has-date-picker]=\"isDate && !textDateInputs\">\n    <input class=\"a-form-field\" type=\"text\" [ngModel]=\"attributeName$ | async\" readonly />\n    <pry-select\n      class=\"a-pry-select operator\"\n      [items]=\"operatorOptions$ | async\"\n      bindValue=\"operator\"\n      bindLabel=\"translation\"\n      name=\"operator\"\n      [ngModel]=\"operatorSelectedValue\"\n      (ngModelChange)=\"onSelectedOperator($event)\"\n    ></pry-select>\n    <ng-container *ngIf=\"isDate && !textDateInputs; else textInput\">\n      <pry-date-picker\n        class=\"o-pry-search-condition__date-picker\"\n        [(ngModel)]=\"dateConditionValue\"\n        (ngModelChange)=\"updateDateCondition()\"\n        [rangePicker]=\"twoValues\"\n        [roundSelection]=\"true\"\n        [timePicker]=\"true\"\n        required\n      ></pry-date-picker>\n    </ng-container>\n  </div>\n  <ng-template #textInput>\n    <input\n      class=\"a-form-field\"\n      type=\"text\"\n      [placeholder]=\"(twoValues ? '@pry.search.placeholder.minValue' : '@pry.search.placeholder.search') | i18n\"\n      [ngClass]=\"{ '-half': twoValues }\"\n      [class.pry-search-condition-input-pattern]=\"firstValue.touched && firstValueInvalid\"\n      [class.pry-search-condition-input-required]=\"firstValue.touched && firstValue.invalid\"\n      name=\"value\"\n      [type]=\"isDate ? 'date' : 'text'\"\n      required\n      #firstValue=\"ngModel\"\n      [(ngModel)]=\"conditionValue\"\n      (input)=\"onCheckValidity($event, true)\"\n      (focusout)=\"updateFirstValue()\"\n    />\n    <ng-container *ngIf=\"twoValues\">\n      <input\n        class=\"a-form-field\"\n        type=\"text\"\n        [placeholder]=\"'@pry.search.placeholder.maxValue' | i18n\"\n        required\n        [type]=\"isDate ? 'date' : 'text'\"\n        [(ngModel)]=\"secondConditionValue\"\n        (input)=\"onCheckValidity($event, false)\"\n        (focusout)=\"updateSecondValue()\"\n      />\n    </ng-container>\n  </ng-template>\n  <button\n    type=\"button\"\n    class=\"a-btn a-btn--icon-only -circle -size-xs delete\"\n    (click)=\"onDeleteAttributeCondition()\"\n    [title]=\"'@pry.search.attribute.remove' | i18n\"\n  >\n    <pry-icon iconSvg=\"close\" [width]=\"22\" [height]=\"22\"></pry-icon>\n    <span class=\"u-visually-hidden\">{{ '@pry.search.attribute.remove' | i18n }}</span>\n  </button>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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: i3.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { kind: "component", type: i3.PryDatePickerComponent, selector: "pry-date-picker", inputs: ["rangePicker", "timePicker", "maxYear", "minYear", "roundSelection"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: PrySearchConditionComponent, selector: "pry-search-condition", inputs: { attributeId: "attributeId", id: "id", useTextDateInputs: "useTextDateInputs" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<div class=\"o-pry-search-condition\">\n  <div class=\"o-pry-search-condition__fields\" [class.has-date-picker]=\"isDate && !textDateInputs\">\n    <input class=\"a-form-field\" type=\"text\" [ngModel]=\"attributeName$ | async\" readonly />\n    <pry-select\n      class=\"a-pry-select operator\"\n      [items]=\"operatorOptions$ | async\"\n      bindValue=\"operator\"\n      bindLabel=\"translation\"\n      name=\"operator\"\n      [ngModel]=\"operatorSelectedValue\"\n      (ngModelChange)=\"onSelectedOperator($event)\"\n    ></pry-select>\n    @if (isDate && !textDateInputs) {\n      <pry-date-picker\n        class=\"o-pry-search-condition__date-picker\"\n        [(ngModel)]=\"dateConditionValue\"\n        (ngModelChange)=\"updateDateCondition()\"\n        [rangePicker]=\"twoValues\"\n        [roundSelection]=\"true\"\n        [timePicker]=\"true\"\n        required\n      ></pry-date-picker>\n    } @else {\n      <input\n        class=\"a-form-field\"\n        type=\"text\"\n        [placeholder]=\"(twoValues ? '@pry.search.placeholder.minValue' : '@pry.search.placeholder.search') | i18n\"\n        [ngClass]=\"{ '-half': twoValues }\"\n        [class.pry-search-condition-input-pattern]=\"firstValue.touched && firstValueInvalid\"\n        [class.pry-search-condition-input-required]=\"firstValue.touched && firstValue.invalid\"\n        name=\"value\"\n        [type]=\"isDate ? 'date' : 'text'\"\n        required\n        #firstValue=\"ngModel\"\n        [(ngModel)]=\"conditionValue\"\n        (input)=\"onCheckValidity($event, true)\"\n        (focusout)=\"updateFirstValue()\"\n        />\n      @if (twoValues) {\n        <input\n          class=\"a-form-field\"\n          type=\"text\"\n          [placeholder]=\"'@pry.search.placeholder.maxValue' | i18n\"\n          required\n          [type]=\"isDate ? 'date' : 'text'\"\n          [(ngModel)]=\"secondConditionValue\"\n          (input)=\"onCheckValidity($event, false)\"\n          (focusout)=\"updateSecondValue()\"\n          />\n      }\n    }\n  </div>\n  <button\n    type=\"button\"\n    class=\"a-btn a-btn--icon-only -circle -size-xs delete\"\n    (click)=\"onDeleteAttributeCondition()\"\n    [title]=\"'@pry.search.attribute.remove' | i18n\"\n    >\n    <pry-icon iconSvg=\"close\" [width]=\"22\" [height]=\"22\"></pry-icon>\n    <span class=\"u-visually-hidden\">{{ '@pry.search.attribute.remove' | i18n }}</span>\n  </button>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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: i3.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { kind: "component", type: i3.PryDatePickerComponent, selector: "pry-date-picker", inputs: ["rangePicker", "timePicker", "maxYear", "minYear", "roundSelection"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PrySearchConditionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-search-condition', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"o-pry-search-condition\">\n  <div class=\"o-pry-search-condition__fields\" [class.has-date-picker]=\"isDate && !textDateInputs\">\n    <input class=\"a-form-field\" type=\"text\" [ngModel]=\"attributeName$ | async\" readonly />\n    <pry-select\n      class=\"a-pry-select operator\"\n      [items]=\"operatorOptions$ | async\"\n      bindValue=\"operator\"\n      bindLabel=\"translation\"\n      name=\"operator\"\n      [ngModel]=\"operatorSelectedValue\"\n      (ngModelChange)=\"onSelectedOperator($event)\"\n    ></pry-select>\n    <ng-container *ngIf=\"isDate && !textDateInputs; else textInput\">\n      <pry-date-picker\n        class=\"o-pry-search-condition__date-picker\"\n        [(ngModel)]=\"dateConditionValue\"\n        (ngModelChange)=\"updateDateCondition()\"\n        [rangePicker]=\"twoValues\"\n        [roundSelection]=\"true\"\n        [timePicker]=\"true\"\n        required\n      ></pry-date-picker>\n    </ng-container>\n  </div>\n  <ng-template #textInput>\n    <input\n      class=\"a-form-field\"\n      type=\"text\"\n      [placeholder]=\"(twoValues ? '@pry.search.placeholder.minValue' : '@pry.search.placeholder.search') | i18n\"\n      [ngClass]=\"{ '-half': twoValues }\"\n      [class.pry-search-condition-input-pattern]=\"firstValue.touched && firstValueInvalid\"\n      [class.pry-search-condition-input-required]=\"firstValue.touched && firstValue.invalid\"\n      name=\"value\"\n      [type]=\"isDate ? 'date' : 'text'\"\n      required\n      #firstValue=\"ngModel\"\n      [(ngModel)]=\"conditionValue\"\n      (input)=\"onCheckValidity($event, true)\"\n      (focusout)=\"updateFirstValue()\"\n    />\n    <ng-container *ngIf=\"twoValues\">\n      <input\n        class=\"a-form-field\"\n        type=\"text\"\n        [placeholder]=\"'@pry.search.placeholder.maxValue' | i18n\"\n        required\n        [type]=\"isDate ? 'date' : 'text'\"\n        [(ngModel)]=\"secondConditionValue\"\n        (input)=\"onCheckValidity($event, false)\"\n        (focusout)=\"updateSecondValue()\"\n      />\n    </ng-container>\n  </ng-template>\n  <button\n    type=\"button\"\n    class=\"a-btn a-btn--icon-only -circle -size-xs delete\"\n    (click)=\"onDeleteAttributeCondition()\"\n    [title]=\"'@pry.search.attribute.remove' | i18n\"\n  >\n    <pry-icon iconSvg=\"close\" [width]=\"22\" [height]=\"22\"></pry-icon>\n    <span class=\"u-visually-hidden\">{{ '@pry.search.attribute.remove' | i18n }}</span>\n  </button>\n</div>\n" }]
+            args: [{ selector: 'pry-search-condition', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"o-pry-search-condition\">\n  <div class=\"o-pry-search-condition__fields\" [class.has-date-picker]=\"isDate && !textDateInputs\">\n    <input class=\"a-form-field\" type=\"text\" [ngModel]=\"attributeName$ | async\" readonly />\n    <pry-select\n      class=\"a-pry-select operator\"\n      [items]=\"operatorOptions$ | async\"\n      bindValue=\"operator\"\n      bindLabel=\"translation\"\n      name=\"operator\"\n      [ngModel]=\"operatorSelectedValue\"\n      (ngModelChange)=\"onSelectedOperator($event)\"\n    ></pry-select>\n    @if (isDate && !textDateInputs) {\n      <pry-date-picker\n        class=\"o-pry-search-condition__date-picker\"\n        [(ngModel)]=\"dateConditionValue\"\n        (ngModelChange)=\"updateDateCondition()\"\n        [rangePicker]=\"twoValues\"\n        [roundSelection]=\"true\"\n        [timePicker]=\"true\"\n        required\n      ></pry-date-picker>\n    } @else {\n      <input\n        class=\"a-form-field\"\n        type=\"text\"\n        [placeholder]=\"(twoValues ? '@pry.search.placeholder.minValue' : '@pry.search.placeholder.search') | i18n\"\n        [ngClass]=\"{ '-half': twoValues }\"\n        [class.pry-search-condition-input-pattern]=\"firstValue.touched && firstValueInvalid\"\n        [class.pry-search-condition-input-required]=\"firstValue.touched && firstValue.invalid\"\n        name=\"value\"\n        [type]=\"isDate ? 'date' : 'text'\"\n        required\n        #firstValue=\"ngModel\"\n        [(ngModel)]=\"conditionValue\"\n        (input)=\"onCheckValidity($event, true)\"\n        (focusout)=\"updateFirstValue()\"\n        />\n      @if (twoValues) {\n        <input\n          class=\"a-form-field\"\n          type=\"text\"\n          [placeholder]=\"'@pry.search.placeholder.maxValue' | i18n\"\n          required\n          [type]=\"isDate ? 'date' : 'text'\"\n          [(ngModel)]=\"secondConditionValue\"\n          (input)=\"onCheckValidity($event, false)\"\n          (focusout)=\"updateSecondValue()\"\n          />\n      }\n    }\n  </div>\n  <button\n    type=\"button\"\n    class=\"a-btn a-btn--icon-only -circle -size-xs delete\"\n    (click)=\"onDeleteAttributeCondition()\"\n    [title]=\"'@pry.search.attribute.remove' | i18n\"\n    >\n    <pry-icon iconSvg=\"close\" [width]=\"22\" [height]=\"22\"></pry-icon>\n    <span class=\"u-visually-hidden\">{{ '@pry.search.attribute.remove' | i18n }}</span>\n  </button>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: i0.ChangeDetectorRef }], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class']
@@ -879,11 +879,11 @@ class PrySearchComposedComponent {
         this.store.dispatch(SearchMonoClassActions.deleteNormalizedConditionById({ conditionId }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PrySearchComposedComponent, deps: [{ token: i1.Store }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: PrySearchComposedComponent, selector: "pry-search-composed", inputs: { id: "id" }, host: { listeners: { "mouseover": "onMouseOver($event)", "mouseout": "onMouseOut($event)" }, properties: { "class": "this.class", "class.is-hover": "this.hover" } }, ngImport: i0, template: "<div class=\"o-pry-search-composed\" [ngClass]=\"{ 'pry-search-composed-hover': hover }\">\n  <ng-container *ngIf=\"condition$ | async as cond\">\n    <ng-container *ngIf=\"cond.type === 'ATTRIBUTE'; else composedBlock\">\n      <ng-container *ngIf=\"cond.attribute\">\n        <pry-search-condition [attributeId]=\"cond.attribute\" [id]=\"cond.id\"></pry-search-condition>\n      </ng-container>\n    </ng-container>\n    <ng-template #composedBlock>\n      <div class=\"o-pry-search-composed__condition\">\n        <div class=\"o-pry-search-composed__condition__type -vertical-bar\">\n          <div class=\"o-pry-search-composed__condition__type__content\">\n            <pry-toggle\n              [leftword]=\"'@pry.search.type.or' | i18n\"\n              [rightword]=\"'@pry.search.type.and' | i18n\"\n              [alwaysActive]=\"true\"\n              [ngModel]=\"cond.type === 'OR'\"\n              (ngModelChange)=\"onSelectType(cond.id, cond.type === 'OR' ? 'AND' : 'OR')\"\n            ></pry-toggle>\n          </div>\n        </div>\n        <div class=\"o-pry-search-composed__condition__content\">\n          <ng-container *ngFor=\"let composedId of cond.composed\">\n            <pry-search-composed [id]=\"composedId\"></pry-search-composed>\n          </ng-container>\n\n          <div class=\"o-pry-search-composed__condition__content__footer\">\n            <button\n              type=\"button\"\n              class=\"a-btn a-btn--select -size-sm\"\n              (click)=\"onOpenPanel()\"\n              [pryOverlay]=\"selectAttribute\"\n              [overlayOpen]=\"panelNewAttributeOpen\"\n              (overlayOpenChange)=\"onClosePanel()\"\n              pryOverlayPosition=\"start-bottom\"\n              [pryOverlayNoPadding]=\"true\"\n            >\n              <pry-icon iconSvg=\"add\" [width]=\"15\" [height]=\"15\"></pry-icon>\n              <span>{{ '@pry.search.composed.addCondition' | i18n }}</span>\n            </button>\n            <button type=\"button\" class=\"a-btn a-btn--secondary -size-sm\" (click)=\"onAddNestedCondition(cond.id)\">\n              <pry-icon iconSvg=\"picture-in-picture\" [width]=\"16\" [height]=\"16\"></pry-icon>\n              <span>{{ '@pry.search.composed.addGroup' | i18n }}</span>\n            </button>\n            <ng-container *ngIf=\"masterId$ | async as masterId\">\n              <button\n                type=\"button\"\n                class=\"a-btn a-btn--icon-only -circle -size-sm o-pry-search-composed__condition__content__footer__remove\"\n                *ngIf=\"masterId !== cond.id\"\n                (click)=\"onDeleteNestedCondition(cond.id)\"\n              >\n                <pry-icon iconSvg=\"close\" [width]=\"16\" [height]=\"16\"></pry-icon>\n                <span class=\"u-visually-hidden\">{{ '@pry.search.composed.remove' | i18n }}</span>\n              </button>\n            </ng-container>\n          </div>\n\n          <ng-template #selectAttribute>\n            <pry-search-select-attribute\n              [id]=\"cond.id\"\n              (selectAttributeChange)=\"onAddAttributeCondition($event, cond.id)\"\n            ></pry-search-select-attribute>\n          </ng-template>\n        </div>\n      </div>\n    </ng-template>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.PryToggleComponent, selector: "pry-toggle", inputs: ["alwaysActive", "disabled", "mode", "size", "dir", "leftword", "rightword"] }, { kind: "directive", type: i3.PryOverlayDirective, selector: "[pryOverlay]", inputs: ["pryOverlay", "styleReversed", "pryOverlaySticky", "pryOverlayNoPadding", "pryOverlayPosition", "overlayOpen", "hasBackdrop"], outputs: ["overlayOpenChange"] }, { kind: "component", type: PrySearchComposedComponent, selector: "pry-search-composed", inputs: ["id"] }, { kind: "component", type: PrySearchSelectAttributeComponent, selector: "pry-search-select-attribute", inputs: ["id"], outputs: ["selectAttributeChange"] }, { kind: "component", type: PrySearchConditionComponent, selector: "pry-search-condition", inputs: ["attributeId", "id", "useTextDateInputs"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: PrySearchComposedComponent, selector: "pry-search-composed", inputs: { id: "id" }, host: { listeners: { "mouseover": "onMouseOver($event)", "mouseout": "onMouseOut($event)" }, properties: { "class": "this.class", "class.is-hover": "this.hover" } }, ngImport: i0, template: "<div class=\"o-pry-search-composed\" [ngClass]=\"{ 'pry-search-composed-hover': hover }\">\n  @if (condition$ | async; as cond) {\n    @if (cond.type === 'ATTRIBUTE') {\n      @if (cond.attribute) {\n        <pry-search-condition [attributeId]=\"cond.attribute\" [id]=\"cond.id\"></pry-search-condition>\n      }\n    } @else {\n      <div class=\"o-pry-search-composed__condition\">\n        <div class=\"o-pry-search-composed__condition__type -vertical-bar\">\n          <div class=\"o-pry-search-composed__condition__type__content\">\n            <pry-toggle\n              [leftword]=\"'@pry.search.type.or' | i18n\"\n              [rightword]=\"'@pry.search.type.and' | i18n\"\n              [alwaysActive]=\"true\"\n              [ngModel]=\"cond.type === 'OR'\"\n              (ngModelChange)=\"onSelectType(cond.id, cond.type === 'OR' ? 'AND' : 'OR')\"\n            ></pry-toggle>\n          </div>\n        </div>\n        <div class=\"o-pry-search-composed__condition__content\">\n          @for (composedId of cond.composed; track composedId) {\n            <pry-search-composed [id]=\"composedId\"></pry-search-composed>\n          }\n          <div class=\"o-pry-search-composed__condition__content__footer\">\n            <button\n              type=\"button\"\n              class=\"a-btn a-btn--select -size-sm\"\n              (click)=\"onOpenPanel()\"\n              [pryOverlay]=\"selectAttribute\"\n              [overlayOpen]=\"panelNewAttributeOpen\"\n              (overlayOpenChange)=\"onClosePanel()\"\n              pryOverlayPosition=\"start-bottom\"\n              [pryOverlayNoPadding]=\"true\"\n              >\n              <pry-icon iconSvg=\"add\" [width]=\"15\" [height]=\"15\"></pry-icon>\n              <span>{{ '@pry.search.composed.addCondition' | i18n }}</span>\n            </button>\n            <button type=\"button\" class=\"a-btn a-btn--secondary -size-sm\" (click)=\"onAddNestedCondition(cond.id)\">\n              <pry-icon iconSvg=\"picture-in-picture\" [width]=\"16\" [height]=\"16\"></pry-icon>\n              <span>{{ '@pry.search.composed.addGroup' | i18n }}</span>\n            </button>\n            @if (masterId$ | async; as masterId) {\n              @if (masterId !== cond.id) {\n                <button\n                  type=\"button\"\n                  class=\"a-btn a-btn--icon-only -circle -size-sm o-pry-search-composed__condition__content__footer__remove\"\n                  (click)=\"onDeleteNestedCondition(cond.id)\"\n                  >\n                  <pry-icon iconSvg=\"close\" [width]=\"16\" [height]=\"16\"></pry-icon>\n                  <span class=\"u-visually-hidden\">{{ '@pry.search.composed.remove' | i18n }}</span>\n                </button>\n              }\n            }\n          </div>\n          <ng-template #selectAttribute>\n            <pry-search-select-attribute\n              [id]=\"cond.id\"\n              (selectAttributeChange)=\"onAddAttributeCondition($event, cond.id)\"\n            ></pry-search-select-attribute>\n          </ng-template>\n        </div>\n      </div>\n    }\n  }\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.PryToggleComponent, selector: "pry-toggle", inputs: ["alwaysActive", "disabled", "mode", "size", "dir", "leftword", "rightword"] }, { kind: "directive", type: i3.PryOverlayDirective, selector: "[pryOverlay]", inputs: ["pryOverlay", "styleReversed", "pryOverlaySticky", "pryOverlayNoPadding", "pryOverlayPosition", "overlayOpen", "hasBackdrop"], outputs: ["overlayOpenChange"] }, { kind: "component", type: PrySearchComposedComponent, selector: "pry-search-composed", inputs: ["id"] }, { kind: "component", type: PrySearchSelectAttributeComponent, selector: "pry-search-select-attribute", inputs: ["id"], outputs: ["selectAttributeChange"] }, { kind: "component", type: PrySearchConditionComponent, selector: "pry-search-condition", inputs: ["attributeId", "id", "useTextDateInputs"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PrySearchComposedComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-search-composed', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"o-pry-search-composed\" [ngClass]=\"{ 'pry-search-composed-hover': hover }\">\n  <ng-container *ngIf=\"condition$ | async as cond\">\n    <ng-container *ngIf=\"cond.type === 'ATTRIBUTE'; else composedBlock\">\n      <ng-container *ngIf=\"cond.attribute\">\n        <pry-search-condition [attributeId]=\"cond.attribute\" [id]=\"cond.id\"></pry-search-condition>\n      </ng-container>\n    </ng-container>\n    <ng-template #composedBlock>\n      <div class=\"o-pry-search-composed__condition\">\n        <div class=\"o-pry-search-composed__condition__type -vertical-bar\">\n          <div class=\"o-pry-search-composed__condition__type__content\">\n            <pry-toggle\n              [leftword]=\"'@pry.search.type.or' | i18n\"\n              [rightword]=\"'@pry.search.type.and' | i18n\"\n              [alwaysActive]=\"true\"\n              [ngModel]=\"cond.type === 'OR'\"\n              (ngModelChange)=\"onSelectType(cond.id, cond.type === 'OR' ? 'AND' : 'OR')\"\n            ></pry-toggle>\n          </div>\n        </div>\n        <div class=\"o-pry-search-composed__condition__content\">\n          <ng-container *ngFor=\"let composedId of cond.composed\">\n            <pry-search-composed [id]=\"composedId\"></pry-search-composed>\n          </ng-container>\n\n          <div class=\"o-pry-search-composed__condition__content__footer\">\n            <button\n              type=\"button\"\n              class=\"a-btn a-btn--select -size-sm\"\n              (click)=\"onOpenPanel()\"\n              [pryOverlay]=\"selectAttribute\"\n              [overlayOpen]=\"panelNewAttributeOpen\"\n              (overlayOpenChange)=\"onClosePanel()\"\n              pryOverlayPosition=\"start-bottom\"\n              [pryOverlayNoPadding]=\"true\"\n            >\n              <pry-icon iconSvg=\"add\" [width]=\"15\" [height]=\"15\"></pry-icon>\n              <span>{{ '@pry.search.composed.addCondition' | i18n }}</span>\n            </button>\n            <button type=\"button\" class=\"a-btn a-btn--secondary -size-sm\" (click)=\"onAddNestedCondition(cond.id)\">\n              <pry-icon iconSvg=\"picture-in-picture\" [width]=\"16\" [height]=\"16\"></pry-icon>\n              <span>{{ '@pry.search.composed.addGroup' | i18n }}</span>\n            </button>\n            <ng-container *ngIf=\"masterId$ | async as masterId\">\n              <button\n                type=\"button\"\n                class=\"a-btn a-btn--icon-only -circle -size-sm o-pry-search-composed__condition__content__footer__remove\"\n                *ngIf=\"masterId !== cond.id\"\n                (click)=\"onDeleteNestedCondition(cond.id)\"\n              >\n                <pry-icon iconSvg=\"close\" [width]=\"16\" [height]=\"16\"></pry-icon>\n                <span class=\"u-visually-hidden\">{{ '@pry.search.composed.remove' | i18n }}</span>\n              </button>\n            </ng-container>\n          </div>\n\n          <ng-template #selectAttribute>\n            <pry-search-select-attribute\n              [id]=\"cond.id\"\n              (selectAttributeChange)=\"onAddAttributeCondition($event, cond.id)\"\n            ></pry-search-select-attribute>\n          </ng-template>\n        </div>\n      </div>\n    </ng-template>\n  </ng-container>\n</div>\n" }]
+            args: [{ selector: 'pry-search-composed', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"o-pry-search-composed\" [ngClass]=\"{ 'pry-search-composed-hover': hover }\">\n  @if (condition$ | async; as cond) {\n    @if (cond.type === 'ATTRIBUTE') {\n      @if (cond.attribute) {\n        <pry-search-condition [attributeId]=\"cond.attribute\" [id]=\"cond.id\"></pry-search-condition>\n      }\n    } @else {\n      <div class=\"o-pry-search-composed__condition\">\n        <div class=\"o-pry-search-composed__condition__type -vertical-bar\">\n          <div class=\"o-pry-search-composed__condition__type__content\">\n            <pry-toggle\n              [leftword]=\"'@pry.search.type.or' | i18n\"\n              [rightword]=\"'@pry.search.type.and' | i18n\"\n              [alwaysActive]=\"true\"\n              [ngModel]=\"cond.type === 'OR'\"\n              (ngModelChange)=\"onSelectType(cond.id, cond.type === 'OR' ? 'AND' : 'OR')\"\n            ></pry-toggle>\n          </div>\n        </div>\n        <div class=\"o-pry-search-composed__condition__content\">\n          @for (composedId of cond.composed; track composedId) {\n            <pry-search-composed [id]=\"composedId\"></pry-search-composed>\n          }\n          <div class=\"o-pry-search-composed__condition__content__footer\">\n            <button\n              type=\"button\"\n              class=\"a-btn a-btn--select -size-sm\"\n              (click)=\"onOpenPanel()\"\n              [pryOverlay]=\"selectAttribute\"\n              [overlayOpen]=\"panelNewAttributeOpen\"\n              (overlayOpenChange)=\"onClosePanel()\"\n              pryOverlayPosition=\"start-bottom\"\n              [pryOverlayNoPadding]=\"true\"\n              >\n              <pry-icon iconSvg=\"add\" [width]=\"15\" [height]=\"15\"></pry-icon>\n              <span>{{ '@pry.search.composed.addCondition' | i18n }}</span>\n            </button>\n            <button type=\"button\" class=\"a-btn a-btn--secondary -size-sm\" (click)=\"onAddNestedCondition(cond.id)\">\n              <pry-icon iconSvg=\"picture-in-picture\" [width]=\"16\" [height]=\"16\"></pry-icon>\n              <span>{{ '@pry.search.composed.addGroup' | i18n }}</span>\n            </button>\n            @if (masterId$ | async; as masterId) {\n              @if (masterId !== cond.id) {\n                <button\n                  type=\"button\"\n                  class=\"a-btn a-btn--icon-only -circle -size-sm o-pry-search-composed__condition__content__footer__remove\"\n                  (click)=\"onDeleteNestedCondition(cond.id)\"\n                  >\n                  <pry-icon iconSvg=\"close\" [width]=\"16\" [height]=\"16\"></pry-icon>\n                  <span class=\"u-visually-hidden\">{{ '@pry.search.composed.remove' | i18n }}</span>\n                </button>\n              }\n            }\n          </div>\n          <ng-template #selectAttribute>\n            <pry-search-select-attribute\n              [id]=\"cond.id\"\n              (selectAttributeChange)=\"onAddAttributeCondition($event, cond.id)\"\n            ></pry-search-select-attribute>\n          </ng-template>\n        </div>\n      </div>\n    }\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: i0.ChangeDetectorRef }], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class']
@@ -937,11 +937,11 @@ class PrySearchOrderComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PrySearchOrderComponent, deps: [{ token: i1.Store }, { token: i3.PryI18nService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: PrySearchOrderComponent, selector: "pry-search-order", host: { listeners: { "mouseover": "onMouseOver($event)", "mouseout": "onMouseOut($event)" }, properties: { "class": "this.class", "class.is-hover": "this.hover" } }, ngImport: i0, template: "<div class=\"o-pry-search-order\">\n  <pry-select\n    (ngModelChange)=\"changeProperty($event)\"\n    [items]=\"variableAttributes$ | async\"\n    [ngModel]=\"(order$ | async)?.attribute ?? 'null'\"\n    bindLabel=\"name\"\n    bindValue=\"id\"\n  ></pry-select>\n  <pry-toggle\n    *ngIf=\"(order$ | async)?.attribute\"\n    [ngModel]=\"(order$ | async)?.asc === 'asc'\"\n    (ngModelChange)=\"changeProperty(undefined, $event ? 'asc' : 'desc')\"\n    [alwaysActive]=\"true\"\n    dir=\"ltr\"\n  >\n    {{ ((order$ | async)?.asc === 'asc' ? '@pry.search.composed.orderA' : '@pry.search.composed.orderD') | i18n }}\n  </pry-toggle>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i3.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { kind: "component", type: i3.PryToggleComponent, selector: "pry-toggle", inputs: ["alwaysActive", "disabled", "mode", "size", "dir", "leftword", "rightword"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: PrySearchOrderComponent, selector: "pry-search-order", host: { listeners: { "mouseover": "onMouseOver($event)", "mouseout": "onMouseOut($event)" }, properties: { "class": "this.class", "class.is-hover": "this.hover" } }, ngImport: i0, template: "<div class=\"o-pry-search-order\">\n  <pry-select\n    (ngModelChange)=\"changeProperty($event)\"\n    [items]=\"variableAttributes$ | async\"\n    [ngModel]=\"(order$ | async)?.attribute ?? 'null'\"\n    bindLabel=\"name\"\n    bindValue=\"id\"\n  ></pry-select>\n  @if ((order$ | async)?.attribute) {\n    <pry-toggle\n      [ngModel]=\"(order$ | async)?.asc === 'asc'\"\n      (ngModelChange)=\"changeProperty(undefined, $event ? 'asc' : 'desc')\"\n      [alwaysActive]=\"true\"\n      dir=\"ltr\"\n      >\n      {{ ((order$ | async)?.asc === 'asc' ? '@pry.search.composed.orderA' : '@pry.search.composed.orderD') | i18n }}\n    </pry-toggle>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i3.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { kind: "component", type: i3.PryToggleComponent, selector: "pry-toggle", inputs: ["alwaysActive", "disabled", "mode", "size", "dir", "leftword", "rightword"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PrySearchOrderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-search-order', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"o-pry-search-order\">\n  <pry-select\n    (ngModelChange)=\"changeProperty($event)\"\n    [items]=\"variableAttributes$ | async\"\n    [ngModel]=\"(order$ | async)?.attribute ?? 'null'\"\n    bindLabel=\"name\"\n    bindValue=\"id\"\n  ></pry-select>\n  <pry-toggle\n    *ngIf=\"(order$ | async)?.attribute\"\n    [ngModel]=\"(order$ | async)?.asc === 'asc'\"\n    (ngModelChange)=\"changeProperty(undefined, $event ? 'asc' : 'desc')\"\n    [alwaysActive]=\"true\"\n    dir=\"ltr\"\n  >\n    {{ ((order$ | async)?.asc === 'asc' ? '@pry.search.composed.orderA' : '@pry.search.composed.orderD') | i18n }}\n  </pry-toggle>\n</div>\n" }]
+            args: [{ selector: 'pry-search-order', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"o-pry-search-order\">\n  <pry-select\n    (ngModelChange)=\"changeProperty($event)\"\n    [items]=\"variableAttributes$ | async\"\n    [ngModel]=\"(order$ | async)?.attribute ?? 'null'\"\n    bindLabel=\"name\"\n    bindValue=\"id\"\n  ></pry-select>\n  @if ((order$ | async)?.attribute) {\n    <pry-toggle\n      [ngModel]=\"(order$ | async)?.asc === 'asc'\"\n      (ngModelChange)=\"changeProperty(undefined, $event ? 'asc' : 'desc')\"\n      [alwaysActive]=\"true\"\n      dir=\"ltr\"\n      >\n      {{ ((order$ | async)?.asc === 'asc' ? '@pry.search.composed.orderA' : '@pry.search.composed.orderD') | i18n }}\n    </pry-toggle>\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: i3.PryI18nService }], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class']
@@ -971,11 +971,11 @@ class PrySearchMonoClassComponent {
             .subscribe(() => this.store.dispatch(SearchMonoClassActions.selectMonoClassSearch({ classId })));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PrySearchMonoClassComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: PrySearchMonoClassComponent, selector: "pry-search-mono-class", ngImport: i0, template: "<div class=\"o-search-mono-class\">\n  <div class=\"o-search-mono-class__header search-mono__header\">\n    <div class=\"m-form-label-field\">\n      <label class=\"a-label\" for=\"composed_class\">{{ '@pry.search.composed.class' | i18n }}</label>\n      <pry-select\n        [items]=\"classes$ | async\"\n        bindValue=\"id\"\n        [ngModel]=\"monoClassId$ | async\"\n        (ngModelChange)=\"onChangeClass($event)\"\n        [template]=\"optionTpl\"\n        id=\"composed_class\"\n      >\n      </pry-select>\n    </div>\n\n    <ng-template #optionTpl let-item=\"item\">\n      <div class=\"o-search-mono-class__header__selected search-class-selected__content\">\n        <ng-container *ngIf=\"item.image; else noImg\">\n          <img\n            alt=\"\"\n            [height]=\"25\"\n            [width]=\"25\"\n            [src]=\"item.id | translateId : { type: 'class', output: 'icon' } | async\"\n          />\n        </ng-container>\n        <ng-template #noImg>\n          <img\n            alt=\"\"\n            [height]=\"25\"\n            [width]=\"25\"\n            [src]=\"item.id | translateId : { type: 'class', output: 'icon' } | async\"\n          />\n        </ng-template>\n        <span>{{ item.name }}</span>\n      </div>\n    </ng-template>\n  </div>\n\n  <div class=\"o-search-mono-class__content-wrapper search-mono__content\">\n    <div class=\"o-search-mono-class__content search-mono__content__wrapper\">\n      <ng-container *ngIf=\"monoClassMasterId$ | async as conditionId; else noCondition\">\n        <p class=\"o-search-mono-class__content__title search-mono__content__title\">\n          {{ '@pry.search.composed.title' | i18n }}\n        </p>\n        <ng-container *ngIf=\"monoClass$ | async as clazz\">\n          <pry-search-composed [id]=\"conditionId\"></pry-search-composed>\n          <p class=\"o-search-mono-class__content__title search-mono__content__title\">\n            {{ '@pry.search.composed.order' | i18n }}\n          </p>\n          <pry-search-order></pry-search-order>\n        </ng-container>\n      </ng-container>\n    </div>\n    <ng-template #noCondition>{{ '@pry.search.composed.shouldSelectClass' | i18n }}</ng-template>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { kind: "component", type: PrySearchComposedComponent, selector: "pry-search-composed", inputs: ["id"] }, { kind: "component", type: PrySearchOrderComponent, selector: "pry-search-order" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslateIdPipe, name: "translateId" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: PrySearchMonoClassComponent, selector: "pry-search-mono-class", ngImport: i0, template: "<div class=\"o-search-mono-class\">\n  <div class=\"o-search-mono-class__header search-mono__header\">\n    <div class=\"m-form-label-field\">\n      <label class=\"a-label\" for=\"composed_class\">{{ '@pry.search.composed.class' | i18n }}</label>\n      <pry-select\n        [items]=\"classes$ | async\"\n        bindValue=\"id\"\n        [ngModel]=\"monoClassId$ | async\"\n        (ngModelChange)=\"onChangeClass($event)\"\n        [template]=\"optionTpl\"\n        id=\"composed_class\"\n        >\n      </pry-select>\n    </div>\n\n    <ng-template #optionTpl let-item=\"item\">\n      <div class=\"o-search-mono-class__header__selected search-class-selected__content\">\n        @if (item.image) {\n          <img\n            alt=\"\"\n            [height]=\"25\"\n            [width]=\"25\"\n            [src]=\"item.id | translateId : { type: 'class', output: 'icon' } | async\"\n            />\n        } @else {\n          <img\n            alt=\"\"\n            [height]=\"25\"\n            [width]=\"25\"\n            [src]=\"item.id | translateId : { type: 'class', output: 'icon' } | async\"\n            />\n        }\n        <span>{{ item.name }}</span>\n      </div>\n    </ng-template>\n  </div>\n\n  <div class=\"o-search-mono-class__content-wrapper search-mono__content\">\n    <div class=\"o-search-mono-class__content search-mono__content__wrapper\">\n      @if (monoClassMasterId$ | async; as conditionId) {\n        <p class=\"o-search-mono-class__content__title search-mono__content__title\">\n          {{ '@pry.search.composed.title' | i18n }}\n        </p>\n        @if (monoClass$ | async; as clazz) {\n          <pry-search-composed [id]=\"conditionId\"></pry-search-composed>\n          <p class=\"o-search-mono-class__content__title search-mono__content__title\">\n            {{ '@pry.search.composed.order' | i18n }}\n          </p>\n          <pry-search-order></pry-search-order>\n        }\n      } @else {\n        {{ '@pry.search.composed.shouldSelectClass' | i18n }}\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { kind: "component", type: PrySearchComposedComponent, selector: "pry-search-composed", inputs: ["id"] }, { kind: "component", type: PrySearchOrderComponent, selector: "pry-search-order" }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslateIdPipe, name: "translateId" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PrySearchMonoClassComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-search-mono-class', template: "<div class=\"o-search-mono-class\">\n  <div class=\"o-search-mono-class__header search-mono__header\">\n    <div class=\"m-form-label-field\">\n      <label class=\"a-label\" for=\"composed_class\">{{ '@pry.search.composed.class' | i18n }}</label>\n      <pry-select\n        [items]=\"classes$ | async\"\n        bindValue=\"id\"\n        [ngModel]=\"monoClassId$ | async\"\n        (ngModelChange)=\"onChangeClass($event)\"\n        [template]=\"optionTpl\"\n        id=\"composed_class\"\n      >\n      </pry-select>\n    </div>\n\n    <ng-template #optionTpl let-item=\"item\">\n      <div class=\"o-search-mono-class__header__selected search-class-selected__content\">\n        <ng-container *ngIf=\"item.image; else noImg\">\n          <img\n            alt=\"\"\n            [height]=\"25\"\n            [width]=\"25\"\n            [src]=\"item.id | translateId : { type: 'class', output: 'icon' } | async\"\n          />\n        </ng-container>\n        <ng-template #noImg>\n          <img\n            alt=\"\"\n            [height]=\"25\"\n            [width]=\"25\"\n            [src]=\"item.id | translateId : { type: 'class', output: 'icon' } | async\"\n          />\n        </ng-template>\n        <span>{{ item.name }}</span>\n      </div>\n    </ng-template>\n  </div>\n\n  <div class=\"o-search-mono-class__content-wrapper search-mono__content\">\n    <div class=\"o-search-mono-class__content search-mono__content__wrapper\">\n      <ng-container *ngIf=\"monoClassMasterId$ | async as conditionId; else noCondition\">\n        <p class=\"o-search-mono-class__content__title search-mono__content__title\">\n          {{ '@pry.search.composed.title' | i18n }}\n        </p>\n        <ng-container *ngIf=\"monoClass$ | async as clazz\">\n          <pry-search-composed [id]=\"conditionId\"></pry-search-composed>\n          <p class=\"o-search-mono-class__content__title search-mono__content__title\">\n            {{ '@pry.search.composed.order' | i18n }}\n          </p>\n          <pry-search-order></pry-search-order>\n        </ng-container>\n      </ng-container>\n    </div>\n    <ng-template #noCondition>{{ '@pry.search.composed.shouldSelectClass' | i18n }}</ng-template>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'pry-search-mono-class', template: "<div class=\"o-search-mono-class\">\n  <div class=\"o-search-mono-class__header search-mono__header\">\n    <div class=\"m-form-label-field\">\n      <label class=\"a-label\" for=\"composed_class\">{{ '@pry.search.composed.class' | i18n }}</label>\n      <pry-select\n        [items]=\"classes$ | async\"\n        bindValue=\"id\"\n        [ngModel]=\"monoClassId$ | async\"\n        (ngModelChange)=\"onChangeClass($event)\"\n        [template]=\"optionTpl\"\n        id=\"composed_class\"\n        >\n      </pry-select>\n    </div>\n\n    <ng-template #optionTpl let-item=\"item\">\n      <div class=\"o-search-mono-class__header__selected search-class-selected__content\">\n        @if (item.image) {\n          <img\n            alt=\"\"\n            [height]=\"25\"\n            [width]=\"25\"\n            [src]=\"item.id | translateId : { type: 'class', output: 'icon' } | async\"\n            />\n        } @else {\n          <img\n            alt=\"\"\n            [height]=\"25\"\n            [width]=\"25\"\n            [src]=\"item.id | translateId : { type: 'class', output: 'icon' } | async\"\n            />\n        }\n        <span>{{ item.name }}</span>\n      </div>\n    </ng-template>\n  </div>\n\n  <div class=\"o-search-mono-class__content-wrapper search-mono__content\">\n    <div class=\"o-search-mono-class__content search-mono__content__wrapper\">\n      @if (monoClassMasterId$ | async; as conditionId) {\n        <p class=\"o-search-mono-class__content__title search-mono__content__title\">\n          {{ '@pry.search.composed.title' | i18n }}\n        </p>\n        @if (monoClass$ | async; as clazz) {\n          <pry-search-composed [id]=\"conditionId\"></pry-search-composed>\n          <p class=\"o-search-mono-class__content__title search-mono__content__title\">\n            {{ '@pry.search.composed.order' | i18n }}\n          </p>\n          <pry-search-order></pry-search-order>\n        }\n      } @else {\n        {{ '@pry.search.composed.shouldSelectClass' | i18n }}\n      }\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.Store }] });
 class SearchMultiClassService {
@@ -1137,11 +1137,11 @@ class MultiClassFieldSelectionComponent {
         return availableFields.sort((a, b) => a.name.localeCompare(b.name));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: MultiClassFieldSelectionComponent, deps: [{ token: i1.Store }, { token: SearchMultiClassService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: MultiClassFieldSelectionComponent, selector: "pry-multi-class-field-selection", inputs: { conditionId: "conditionId" }, outputs: { closeModal: "closeModal", selectFieldChange: "selectFieldChange" }, ngImport: i0, template: "<div class=\"o-multi-class-field-selection\" id=\"popin\">\n  <div class=\"o-multi-class-field-selection__header\" data-toggle=\"popin\">\n    <div class=\"o-multi-class-field-selection__header__top\">\n      <div class=\"o-multi-class-field-selection__header__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ '@pry.search.multi.selectField' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-multi-class-field-selection__header__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"closeModal.emit()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.action.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <ng-container *ngIf=\"availableFields$ | async as list\">\n      <ng-container *ngIf=\"list.length > 7\">\n        <div class=\"o-multi-class-field-selection__header__search\">\n          <input class=\"a-form-field\" type=\"text\" [(ngModel)]=\"fieldSearch\" placeholder=\"Filtrer\" />\n        </div>\n      </ng-container>\n    </ng-container>\n  </div>\n  <div class=\"o-multi-class-field-selection__legend\">{{ '@pry.search.multi.legend' | i18n }}</div>\n  <ul class=\"o-multi-class-field-selection__fields\">\n    <ng-container *ngFor=\"let field of availableFields$ | async | pryFilter: 'name' : fieldSearch\">\n      <li class=\"o-multi-class-field-selection__fields__select\" (click)=\"selectFieldChange.emit(field.id)\">\n        <button class=\"a-btn -link-like\">\n          {{ field.name }}\n          <span class=\"o-multi-class-field-selection__fields__select__inside\"\n            >{{ '@pry.search.multi.in' | i18n }}\n            <ng-container> {{ field.classes.join(', ') }} </ng-container>\n          </span>\n        </button>\n      </li>\n    </ng-container>\n  </ul>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i6$1.PryFilterPipe, name: "pryFilter" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: MultiClassFieldSelectionComponent, selector: "pry-multi-class-field-selection", inputs: { conditionId: "conditionId" }, outputs: { closeModal: "closeModal", selectFieldChange: "selectFieldChange" }, ngImport: i0, template: "<div class=\"o-multi-class-field-selection\" id=\"popin\">\n  <div class=\"o-multi-class-field-selection__header\" data-toggle=\"popin\">\n    <div class=\"o-multi-class-field-selection__header__top\">\n      <div class=\"o-multi-class-field-selection__header__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ '@pry.search.multi.selectField' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-multi-class-field-selection__header__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"closeModal.emit()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.action.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    @if (availableFields$ | async; as list) {\n      @if (list.length > 7) {\n        <div class=\"o-multi-class-field-selection__header__search\">\n          <input class=\"a-form-field\" type=\"text\" [(ngModel)]=\"fieldSearch\" placeholder=\"Filtrer\" />\n        </div>\n      }\n    }\n  </div>\n  <div class=\"o-multi-class-field-selection__legend\">{{ '@pry.search.multi.legend' | i18n }}</div>\n  <ul class=\"o-multi-class-field-selection__fields\">\n    @for (field of availableFields$ | async | pryFilter: 'name' : fieldSearch; track field.id) {\n      <li class=\"o-multi-class-field-selection__fields__select\" (click)=\"selectFieldChange.emit(field.id)\">\n        <button class=\"a-btn -link-like\">\n          {{ field.name }}\n          <span class=\"o-multi-class-field-selection__fields__select__inside\"\n            >{{ '@pry.search.multi.in' | i18n }}\n            <ng-container> {{ field.classes.join(', ') }} </ng-container>\n          </span>\n        </button>\n      </li>\n    }\n  </ul>\n</div>\n", dependencies: [{ kind: "component", type: i3.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6$1.PryFilterPipe, name: "pryFilter" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: MultiClassFieldSelectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-multi-class-field-selection', template: "<div class=\"o-multi-class-field-selection\" id=\"popin\">\n  <div class=\"o-multi-class-field-selection__header\" data-toggle=\"popin\">\n    <div class=\"o-multi-class-field-selection__header__top\">\n      <div class=\"o-multi-class-field-selection__header__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ '@pry.search.multi.selectField' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-multi-class-field-selection__header__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"closeModal.emit()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.action.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <ng-container *ngIf=\"availableFields$ | async as list\">\n      <ng-container *ngIf=\"list.length > 7\">\n        <div class=\"o-multi-class-field-selection__header__search\">\n          <input class=\"a-form-field\" type=\"text\" [(ngModel)]=\"fieldSearch\" placeholder=\"Filtrer\" />\n        </div>\n      </ng-container>\n    </ng-container>\n  </div>\n  <div class=\"o-multi-class-field-selection__legend\">{{ '@pry.search.multi.legend' | i18n }}</div>\n  <ul class=\"o-multi-class-field-selection__fields\">\n    <ng-container *ngFor=\"let field of availableFields$ | async | pryFilter: 'name' : fieldSearch\">\n      <li class=\"o-multi-class-field-selection__fields__select\" (click)=\"selectFieldChange.emit(field.id)\">\n        <button class=\"a-btn -link-like\">\n          {{ field.name }}\n          <span class=\"o-multi-class-field-selection__fields__select__inside\"\n            >{{ '@pry.search.multi.in' | i18n }}\n            <ng-container> {{ field.classes.join(', ') }} </ng-container>\n          </span>\n        </button>\n      </li>\n    </ng-container>\n  </ul>\n</div>\n" }]
+            args: [{ selector: 'pry-multi-class-field-selection', template: "<div class=\"o-multi-class-field-selection\" id=\"popin\">\n  <div class=\"o-multi-class-field-selection__header\" data-toggle=\"popin\">\n    <div class=\"o-multi-class-field-selection__header__top\">\n      <div class=\"o-multi-class-field-selection__header__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ '@pry.search.multi.selectField' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-multi-class-field-selection__header__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"closeModal.emit()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.action.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    @if (availableFields$ | async; as list) {\n      @if (list.length > 7) {\n        <div class=\"o-multi-class-field-selection__header__search\">\n          <input class=\"a-form-field\" type=\"text\" [(ngModel)]=\"fieldSearch\" placeholder=\"Filtrer\" />\n        </div>\n      }\n    }\n  </div>\n  <div class=\"o-multi-class-field-selection__legend\">{{ '@pry.search.multi.legend' | i18n }}</div>\n  <ul class=\"o-multi-class-field-selection__fields\">\n    @for (field of availableFields$ | async | pryFilter: 'name' : fieldSearch; track field.id) {\n      <li class=\"o-multi-class-field-selection__fields__select\" (click)=\"selectFieldChange.emit(field.id)\">\n        <button class=\"a-btn -link-like\">\n          {{ field.name }}\n          <span class=\"o-multi-class-field-selection__fields__select__inside\"\n            >{{ '@pry.search.multi.in' | i18n }}\n            <ng-container> {{ field.classes.join(', ') }} </ng-container>\n          </span>\n        </button>\n      </li>\n    }\n  </ul>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: SearchMultiClassService }], propDecorators: { conditionId: [{
                 type: Input
             }], closeModal: [{
@@ -1274,13 +1274,13 @@ class MultiClassConditionComponent {
     get hasTwoFields() {
         return this.form.get('operator')?.value === 'INSIDE' || this.form.get('operator')?.value === 'OUTSIDE';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: MultiClassConditionComponent, deps: [{ token: i1.Store }, { token: SearchMultiClassService }, { token: i2$1.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: MultiClassConditionComponent, selector: "pry-multi-class-condition", inputs: { id: "id" }, viewQueries: [{ propertyName: "fieldSelectionTpl", first: true, predicate: ["fieldSelectionTpl"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<ng-container *ngIf=\"condition$ | async as condition\">\n  <div class=\"o-multi-class-condition\">\n    <div class=\"o-multi-class-condition__content\">\n      <div class=\"o-multi-class-condition__content__action\">\n        <button\n          type=\"button\"\n          class=\"a-btn a-btn--primary -size-sm -width-full\"\n          aria-label=\"selection button\"\n          (click)=\"toggleFieldSelection()\"\n        >\n          <ng-container *ngIf=\"field$ | async as field; else noFieldTpl\">\n            {{ field.name }}\n          </ng-container>\n          <ng-template #noFieldTpl>{{ '@pry.search.multi.selectField' | i18n }}</ng-template>\n        </button>\n\n        <ng-container *ngIf=\"classesLinked$ | async as classesLinked\">\n          <pry-icon\n            iconSvg=\"links_line\"\n            [width]=\"15\"\n            [height]=\"15\"\n            style=\"color: black\"\n            [attr.data-tooltip]=\"('@pry.search.multi.in' | i18n) + ' ' + join(classesLinked)\"\n          ></pry-icon>\n        </ng-container>\n      </div>\n\n      <ng-container [formGroup]=\"form\">\n        <div class=\"m-form-label-field\">\n          <pry-select\n            [items]=\"operators$ | async\"\n            placeholder=\"Op\u00E9rateur\"\n            formControlName=\"operator\"\n            bindValue=\"operator\"\n            bindLabel=\"translation\"\n          ></pry-select>\n        </div>\n        <div class=\"m-form-label-field\">\n          <ng-container *ngIf=\"condition.isDate; else classicInput\">\n            <pry-date-picker\n              formControlName=\"value\"\n              (click)=\"onUpdateValue(condition)\"\n              [rangePicker]=\"hasTwoFields\"\n              [roundSelection]=\"true\"\n              [timePicker]=\"true\"\n            ></pry-date-picker>\n          </ng-container>\n          <ng-template #classicInput>\n            <input\n              type=\"text\"\n              class=\"a-form-field\"\n              [placeholder]=\"\n                (hasTwoFields ? '@pry.search.placeholder.minValue' : '@pry.search.placeholder.search') | i18n\n              \"\n              formControlName=\"value\"\n              (focusout)=\"onUpdateValue(condition)\"\n            />\n            <ng-container *ngIf=\"hasTwoFields\">\n              <input\n                type=\"text\"\n                class=\"a-form-field\"\n                [placeholder]=\"'@pry.search.placeholder.maxValue' | i18n\"\n                formControlName=\"upperValue\"\n                (focusout)=\"onUpdateValue(condition)\"\n              />\n            </ng-container>\n          </ng-template>\n\n          <label class=\"a-label a-label--help -error\" *ngIf=\"formValue?.errors?.['required'] && formValue?.touched\">\n            {{ '@pry.search.multi.requiredError' | i18n }}\n          </label>\n        </div>\n      </ng-container>\n    </div>\n\n    <div class=\"o-multi-class-condition__delete-content\">\n      <ng-container *ngIf=\"notLastCondition$ | async; else cannotDelete\">\n        <button type=\"button\" class=\"a-btn a-btn--icon-only\">\n          <pry-icon\n            iconSvg=\"delete\"\n            [height]=\"20\"\n            [width]=\"20\"\n            [animation]=\"false\"\n            (click)=\"onRemoveCondition(condition)\"\n          ></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.action.delete' | i18n }}</span>\n        </button>\n      </ng-container>\n    </div>\n    <ng-template #cannotDelete>\n      <button type=\"button\" class=\"a-btn a-btn--icon-only\" disabled>\n        <pry-icon [height]=\"20\" [width]=\"20\" iconSvg=\"delete\"></pry-icon>\n        <span class=\"u-visually-hidden\">{{ '@pry.action.delete' | i18n }}</span>\n      </button>\n    </ng-template>\n  </div>\n\n  <ng-template #fieldSelectionTpl>\n    <pry-multi-class-field-selection\n      [conditionId]=\"condition.id\"\n      (closeModal)=\"onCloseModal()\"\n      (selectFieldChange)=\"onChangeField(condition, $event)\"\n    ></pry-multi-class-field-selection>\n  </ng-template>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { kind: "component", type: i3.PryDatePickerComponent, selector: "pry-date-picker", inputs: ["rangePicker", "timePicker", "maxYear", "minYear", "roundSelection"] }, { kind: "component", type: MultiClassFieldSelectionComponent, selector: "pry-multi-class-field-selection", inputs: ["conditionId"], outputs: ["closeModal", "selectFieldChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: MultiClassConditionComponent, deps: [{ token: i1.Store }, { token: SearchMultiClassService }, { token: i2.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: MultiClassConditionComponent, selector: "pry-multi-class-condition", inputs: { id: "id" }, viewQueries: [{ propertyName: "fieldSelectionTpl", first: true, predicate: ["fieldSelectionTpl"], descendants: true, read: TemplateRef }], ngImport: i0, template: "@if (condition$ | async; as condition) {\n  <div class=\"o-multi-class-condition\">\n    <div class=\"o-multi-class-condition__content\">\n      <div class=\"o-multi-class-condition__content__action\">\n        <button\n          type=\"button\"\n          class=\"a-btn a-btn--primary -size-sm -width-full\"\n          aria-label=\"selection button\"\n          (click)=\"toggleFieldSelection()\"\n          >\n          @if (field$ | async; as field) {\n            {{ field.name }}\n          } @else {\n            {{ '@pry.search.multi.selectField' | i18n }}\n          }\n        </button>\n        @if (classesLinked$ | async; as classesLinked) {\n          <pry-icon\n            iconSvg=\"links_line\"\n            [width]=\"15\"\n            [height]=\"15\"\n            style=\"color: black\"\n            [attr.data-tooltip]=\"('@pry.search.multi.in' | i18n) + ' ' + join(classesLinked)\"\n          ></pry-icon>\n        }\n      </div>\n      <ng-container [formGroup]=\"form\">\n        <div class=\"m-form-label-field\">\n          <pry-select\n            [items]=\"operators$ | async\"\n            placeholder=\"Op\u00E9rateur\"\n            formControlName=\"operator\"\n            bindValue=\"operator\"\n            bindLabel=\"translation\"\n          ></pry-select>\n        </div>\n        <div class=\"m-form-label-field\">\n          @if (condition.isDate) {\n            <pry-date-picker\n              formControlName=\"value\"\n              (click)=\"onUpdateValue(condition)\"\n              [rangePicker]=\"hasTwoFields\"\n              [roundSelection]=\"true\"\n              [timePicker]=\"true\"\n            ></pry-date-picker>\n          } @else {\n            <input\n              type=\"text\"\n              class=\"a-form-field\"\n              [placeholder]=\"\n                (hasTwoFields ? '@pry.search.placeholder.minValue' : '@pry.search.placeholder.search') | i18n\n              \"\n              formControlName=\"value\"\n              (focusout)=\"onUpdateValue(condition)\"\n              />\n            @if (hasTwoFields) {\n              <input\n                type=\"text\"\n                class=\"a-form-field\"\n                [placeholder]=\"'@pry.search.placeholder.maxValue' | i18n\"\n                formControlName=\"upperValue\"\n                (focusout)=\"onUpdateValue(condition)\"\n                />\n            }\n          }\n          @if (formValue?.errors?.['required'] && formValue?.touched) {\n            <label class=\"a-label a-label--help -error\">\n              {{ '@pry.search.multi.requiredError' | i18n }}\n            </label>\n          }\n        </div>\n      </ng-container>\n    </div>\n    <div class=\"o-multi-class-condition__delete-content\">\n      @if (notLastCondition$ | async) {\n        <button type=\"button\" class=\"a-btn a-btn--icon-only\">\n          <pry-icon\n            iconSvg=\"delete\"\n            [height]=\"20\"\n            [width]=\"20\"\n            [animation]=\"false\"\n            (click)=\"onRemoveCondition(condition)\"\n          ></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.action.delete' | i18n }}</span>\n        </button>\n      } @else {\n        <button type=\"button\" class=\"a-btn a-btn--icon-only\" disabled>\n          <pry-icon [height]=\"20\" [width]=\"20\" iconSvg=\"delete\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.action.delete' | i18n }}</span>\n        </button>\n      }\n    </div>\n  </div>\n  <ng-template #fieldSelectionTpl>\n    <pry-multi-class-field-selection\n      [conditionId]=\"condition.id\"\n      (closeModal)=\"onCloseModal()\"\n      (selectFieldChange)=\"onChangeField(condition, $event)\"\n    ></pry-multi-class-field-selection>\n  </ng-template>\n}\n", dependencies: [{ kind: "component", type: i3.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { kind: "component", type: i3.PryDatePickerComponent, selector: "pry-date-picker", inputs: ["rangePicker", "timePicker", "maxYear", "minYear", "roundSelection"] }, { kind: "component", type: MultiClassFieldSelectionComponent, selector: "pry-multi-class-field-selection", inputs: ["conditionId"], outputs: ["closeModal", "selectFieldChange"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: MultiClassConditionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-multi-class-condition', template: "<ng-container *ngIf=\"condition$ | async as condition\">\n  <div class=\"o-multi-class-condition\">\n    <div class=\"o-multi-class-condition__content\">\n      <div class=\"o-multi-class-condition__content__action\">\n        <button\n          type=\"button\"\n          class=\"a-btn a-btn--primary -size-sm -width-full\"\n          aria-label=\"selection button\"\n          (click)=\"toggleFieldSelection()\"\n        >\n          <ng-container *ngIf=\"field$ | async as field; else noFieldTpl\">\n            {{ field.name }}\n          </ng-container>\n          <ng-template #noFieldTpl>{{ '@pry.search.multi.selectField' | i18n }}</ng-template>\n        </button>\n\n        <ng-container *ngIf=\"classesLinked$ | async as classesLinked\">\n          <pry-icon\n            iconSvg=\"links_line\"\n            [width]=\"15\"\n            [height]=\"15\"\n            style=\"color: black\"\n            [attr.data-tooltip]=\"('@pry.search.multi.in' | i18n) + ' ' + join(classesLinked)\"\n          ></pry-icon>\n        </ng-container>\n      </div>\n\n      <ng-container [formGroup]=\"form\">\n        <div class=\"m-form-label-field\">\n          <pry-select\n            [items]=\"operators$ | async\"\n            placeholder=\"Op\u00E9rateur\"\n            formControlName=\"operator\"\n            bindValue=\"operator\"\n            bindLabel=\"translation\"\n          ></pry-select>\n        </div>\n        <div class=\"m-form-label-field\">\n          <ng-container *ngIf=\"condition.isDate; else classicInput\">\n            <pry-date-picker\n              formControlName=\"value\"\n              (click)=\"onUpdateValue(condition)\"\n              [rangePicker]=\"hasTwoFields\"\n              [roundSelection]=\"true\"\n              [timePicker]=\"true\"\n            ></pry-date-picker>\n          </ng-container>\n          <ng-template #classicInput>\n            <input\n              type=\"text\"\n              class=\"a-form-field\"\n              [placeholder]=\"\n                (hasTwoFields ? '@pry.search.placeholder.minValue' : '@pry.search.placeholder.search') | i18n\n              \"\n              formControlName=\"value\"\n              (focusout)=\"onUpdateValue(condition)\"\n            />\n            <ng-container *ngIf=\"hasTwoFields\">\n              <input\n                type=\"text\"\n                class=\"a-form-field\"\n                [placeholder]=\"'@pry.search.placeholder.maxValue' | i18n\"\n                formControlName=\"upperValue\"\n                (focusout)=\"onUpdateValue(condition)\"\n              />\n            </ng-container>\n          </ng-template>\n\n          <label class=\"a-label a-label--help -error\" *ngIf=\"formValue?.errors?.['required'] && formValue?.touched\">\n            {{ '@pry.search.multi.requiredError' | i18n }}\n          </label>\n        </div>\n      </ng-container>\n    </div>\n\n    <div class=\"o-multi-class-condition__delete-content\">\n      <ng-container *ngIf=\"notLastCondition$ | async; else cannotDelete\">\n        <button type=\"button\" class=\"a-btn a-btn--icon-only\">\n          <pry-icon\n            iconSvg=\"delete\"\n            [height]=\"20\"\n            [width]=\"20\"\n            [animation]=\"false\"\n            (click)=\"onRemoveCondition(condition)\"\n          ></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.action.delete' | i18n }}</span>\n        </button>\n      </ng-container>\n    </div>\n    <ng-template #cannotDelete>\n      <button type=\"button\" class=\"a-btn a-btn--icon-only\" disabled>\n        <pry-icon [height]=\"20\" [width]=\"20\" iconSvg=\"delete\"></pry-icon>\n        <span class=\"u-visually-hidden\">{{ '@pry.action.delete' | i18n }}</span>\n      </button>\n    </ng-template>\n  </div>\n\n  <ng-template #fieldSelectionTpl>\n    <pry-multi-class-field-selection\n      [conditionId]=\"condition.id\"\n      (closeModal)=\"onCloseModal()\"\n      (selectFieldChange)=\"onChangeField(condition, $event)\"\n    ></pry-multi-class-field-selection>\n  </ng-template>\n</ng-container>\n" }]
-        }], ctorParameters: () => [{ type: i1.Store }, { type: SearchMultiClassService }, { type: i2$1.Overlay }, { type: i0.ViewContainerRef }], propDecorators: { fieldSelectionTpl: [{
+            args: [{ selector: 'pry-multi-class-condition', template: "@if (condition$ | async; as condition) {\n  <div class=\"o-multi-class-condition\">\n    <div class=\"o-multi-class-condition__content\">\n      <div class=\"o-multi-class-condition__content__action\">\n        <button\n          type=\"button\"\n          class=\"a-btn a-btn--primary -size-sm -width-full\"\n          aria-label=\"selection button\"\n          (click)=\"toggleFieldSelection()\"\n          >\n          @if (field$ | async; as field) {\n            {{ field.name }}\n          } @else {\n            {{ '@pry.search.multi.selectField' | i18n }}\n          }\n        </button>\n        @if (classesLinked$ | async; as classesLinked) {\n          <pry-icon\n            iconSvg=\"links_line\"\n            [width]=\"15\"\n            [height]=\"15\"\n            style=\"color: black\"\n            [attr.data-tooltip]=\"('@pry.search.multi.in' | i18n) + ' ' + join(classesLinked)\"\n          ></pry-icon>\n        }\n      </div>\n      <ng-container [formGroup]=\"form\">\n        <div class=\"m-form-label-field\">\n          <pry-select\n            [items]=\"operators$ | async\"\n            placeholder=\"Op\u00E9rateur\"\n            formControlName=\"operator\"\n            bindValue=\"operator\"\n            bindLabel=\"translation\"\n          ></pry-select>\n        </div>\n        <div class=\"m-form-label-field\">\n          @if (condition.isDate) {\n            <pry-date-picker\n              formControlName=\"value\"\n              (click)=\"onUpdateValue(condition)\"\n              [rangePicker]=\"hasTwoFields\"\n              [roundSelection]=\"true\"\n              [timePicker]=\"true\"\n            ></pry-date-picker>\n          } @else {\n            <input\n              type=\"text\"\n              class=\"a-form-field\"\n              [placeholder]=\"\n                (hasTwoFields ? '@pry.search.placeholder.minValue' : '@pry.search.placeholder.search') | i18n\n              \"\n              formControlName=\"value\"\n              (focusout)=\"onUpdateValue(condition)\"\n              />\n            @if (hasTwoFields) {\n              <input\n                type=\"text\"\n                class=\"a-form-field\"\n                [placeholder]=\"'@pry.search.placeholder.maxValue' | i18n\"\n                formControlName=\"upperValue\"\n                (focusout)=\"onUpdateValue(condition)\"\n                />\n            }\n          }\n          @if (formValue?.errors?.['required'] && formValue?.touched) {\n            <label class=\"a-label a-label--help -error\">\n              {{ '@pry.search.multi.requiredError' | i18n }}\n            </label>\n          }\n        </div>\n      </ng-container>\n    </div>\n    <div class=\"o-multi-class-condition__delete-content\">\n      @if (notLastCondition$ | async) {\n        <button type=\"button\" class=\"a-btn a-btn--icon-only\">\n          <pry-icon\n            iconSvg=\"delete\"\n            [height]=\"20\"\n            [width]=\"20\"\n            [animation]=\"false\"\n            (click)=\"onRemoveCondition(condition)\"\n          ></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.action.delete' | i18n }}</span>\n        </button>\n      } @else {\n        <button type=\"button\" class=\"a-btn a-btn--icon-only\" disabled>\n          <pry-icon [height]=\"20\" [width]=\"20\" iconSvg=\"delete\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.action.delete' | i18n }}</span>\n        </button>\n      }\n    </div>\n  </div>\n  <ng-template #fieldSelectionTpl>\n    <pry-multi-class-field-selection\n      [conditionId]=\"condition.id\"\n      (closeModal)=\"onCloseModal()\"\n      (selectFieldChange)=\"onChangeField(condition, $event)\"\n    ></pry-multi-class-field-selection>\n  </ng-template>\n}\n" }]
+        }], ctorParameters: () => [{ type: i1.Store }, { type: SearchMultiClassService }, { type: i2.Overlay }, { type: i0.ViewContainerRef }], propDecorators: { fieldSelectionTpl: [{
                 type: ViewChild,
                 args: ['fieldSelectionTpl', { read: TemplateRef }]
             }], id: [{
@@ -1307,11 +1307,11 @@ class PrySearchMultiClassComponent {
         this.store.dispatch(SearchMultiClassActions.updateMultiType({ multiType }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PrySearchMultiClassComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: PrySearchMultiClassComponent, selector: "pry-search-multi-class", ngImport: i0, template: "<div class=\"o-search-multi-class\">\n  <div class=\"o-search-multi-class__header\">\n    <h3 class=\"a-h3\">{{ '@pry.search.multi.title' | i18n }}</h3>\n    <div\n      class=\"a-tooltip\"\n      [attr.data-tooltip]=\"'@pry.search.multi.extraOptions' | i18n\"\n      data-tooltip-position=\"bottom\"\n      [pryOverlay]=\"optionOverlay\"\n      [(overlayOpen)]=\"optionsOpen\"\n      (click)=\"optionsOpen = !optionsOpen\"\n    >\n      <button class=\"a-btn a-btn--icon-text\">\n        {{ '@pry.search.multi.options' | i18n }}\n        <pry-icon iconSvg=\"tune\" [width]=\"16\" [height]=\"16\" [animation]=\"false\"></pry-icon>\n      </button>\n    </div>\n    <ng-template #optionOverlay>\n      <div class=\"o-search-multi-class__options\">\n        <pry-toggle\n          [ngModel]=\"(multiType$ | async) === 'OR'\"\n          [leftword]=\"'@pry.search.type.or' | i18n\"\n          [rightword]=\"'@pry.search.type.and' | i18n\"\n          [alwaysActive]=\"true\"\n          (ngModelChange)=\"onChangeMultiType($event)\"\n          >{{ '@pry.search.multi.multiType' | i18n }}</pry-toggle\n        >\n      </div>\n    </ng-template>\n  </div>\n\n  <div class=\"o-search-multi-class__conditions-wrapper\">\n    <div class=\"o-search-multi-class__conditions\">\n      <ng-container *ngFor=\"let condition of conditions$ | async\">\n        <pry-multi-class-condition [id]=\"condition.id\"></pry-multi-class-condition>\n      </ng-container>\n    </div>\n    <div class=\"o-search-multi-class__add-condition\">\n      <button (click)=\"onAddCondition()\" class=\"a-btn a-btn--secondary -size-sm\">\n        <pry-icon [height]=\"20\" [width]=\"20\" iconSvg=\"add\"></pry-icon>\n        {{ '@pry.search.multi.addCondition' | i18n }}\n      </button>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.PryToggleComponent, selector: "pry-toggle", inputs: ["alwaysActive", "disabled", "mode", "size", "dir", "leftword", "rightword"] }, { kind: "directive", type: i3.PryOverlayDirective, selector: "[pryOverlay]", inputs: ["pryOverlay", "styleReversed", "pryOverlaySticky", "pryOverlayNoPadding", "pryOverlayPosition", "overlayOpen", "hasBackdrop"], outputs: ["overlayOpenChange"] }, { kind: "component", type: MultiClassConditionComponent, selector: "pry-multi-class-condition", inputs: ["id"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: PrySearchMultiClassComponent, selector: "pry-search-multi-class", ngImport: i0, template: "<div class=\"o-search-multi-class\">\n  <div class=\"o-search-multi-class__header\">\n    <h3 class=\"a-h3\">{{ '@pry.search.multi.title' | i18n }}</h3>\n    <div\n      class=\"a-tooltip\"\n      [attr.data-tooltip]=\"'@pry.search.multi.extraOptions' | i18n\"\n      data-tooltip-position=\"bottom\"\n      [pryOverlay]=\"optionOverlay\"\n      [(overlayOpen)]=\"optionsOpen\"\n      (click)=\"optionsOpen = !optionsOpen\"\n      >\n      <button class=\"a-btn a-btn--icon-text\">\n        {{ '@pry.search.multi.options' | i18n }}\n        <pry-icon iconSvg=\"tune\" [width]=\"16\" [height]=\"16\" [animation]=\"false\"></pry-icon>\n      </button>\n    </div>\n    <ng-template #optionOverlay>\n      <div class=\"o-search-multi-class__options\">\n        <pry-toggle\n          [ngModel]=\"(multiType$ | async) === 'OR'\"\n          [leftword]=\"'@pry.search.type.or' | i18n\"\n          [rightword]=\"'@pry.search.type.and' | i18n\"\n          [alwaysActive]=\"true\"\n          (ngModelChange)=\"onChangeMultiType($event)\"\n          >{{ '@pry.search.multi.multiType' | i18n }}</pry-toggle\n          >\n        </div>\n      </ng-template>\n    </div>\n\n    <div class=\"o-search-multi-class__conditions-wrapper\">\n      <div class=\"o-search-multi-class__conditions\">\n        @for (condition of conditions$ | async; track condition) {\n          <pry-multi-class-condition [id]=\"condition.id\"></pry-multi-class-condition>\n        }\n      </div>\n      <div class=\"o-search-multi-class__add-condition\">\n        <button (click)=\"onAddCondition()\" class=\"a-btn a-btn--secondary -size-sm\">\n          <pry-icon [height]=\"20\" [width]=\"20\" iconSvg=\"add\"></pry-icon>\n          {{ '@pry.search.multi.addCondition' | i18n }}\n        </button>\n      </div>\n    </div>\n  </div>\n", dependencies: [{ kind: "component", type: i3.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.PryToggleComponent, selector: "pry-toggle", inputs: ["alwaysActive", "disabled", "mode", "size", "dir", "leftword", "rightword"] }, { kind: "directive", type: i3.PryOverlayDirective, selector: "[pryOverlay]", inputs: ["pryOverlay", "styleReversed", "pryOverlaySticky", "pryOverlayNoPadding", "pryOverlayPosition", "overlayOpen", "hasBackdrop"], outputs: ["overlayOpenChange"] }, { kind: "component", type: MultiClassConditionComponent, selector: "pry-multi-class-condition", inputs: ["id"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PrySearchMultiClassComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-search-multi-class', template: "<div class=\"o-search-multi-class\">\n  <div class=\"o-search-multi-class__header\">\n    <h3 class=\"a-h3\">{{ '@pry.search.multi.title' | i18n }}</h3>\n    <div\n      class=\"a-tooltip\"\n      [attr.data-tooltip]=\"'@pry.search.multi.extraOptions' | i18n\"\n      data-tooltip-position=\"bottom\"\n      [pryOverlay]=\"optionOverlay\"\n      [(overlayOpen)]=\"optionsOpen\"\n      (click)=\"optionsOpen = !optionsOpen\"\n    >\n      <button class=\"a-btn a-btn--icon-text\">\n        {{ '@pry.search.multi.options' | i18n }}\n        <pry-icon iconSvg=\"tune\" [width]=\"16\" [height]=\"16\" [animation]=\"false\"></pry-icon>\n      </button>\n    </div>\n    <ng-template #optionOverlay>\n      <div class=\"o-search-multi-class__options\">\n        <pry-toggle\n          [ngModel]=\"(multiType$ | async) === 'OR'\"\n          [leftword]=\"'@pry.search.type.or' | i18n\"\n          [rightword]=\"'@pry.search.type.and' | i18n\"\n          [alwaysActive]=\"true\"\n          (ngModelChange)=\"onChangeMultiType($event)\"\n          >{{ '@pry.search.multi.multiType' | i18n }}</pry-toggle\n        >\n      </div>\n    </ng-template>\n  </div>\n\n  <div class=\"o-search-multi-class__conditions-wrapper\">\n    <div class=\"o-search-multi-class__conditions\">\n      <ng-container *ngFor=\"let condition of conditions$ | async\">\n        <pry-multi-class-condition [id]=\"condition.id\"></pry-multi-class-condition>\n      </ng-container>\n    </div>\n    <div class=\"o-search-multi-class__add-condition\">\n      <button (click)=\"onAddCondition()\" class=\"a-btn a-btn--secondary -size-sm\">\n        <pry-icon [height]=\"20\" [width]=\"20\" iconSvg=\"add\"></pry-icon>\n        {{ '@pry.search.multi.addCondition' | i18n }}\n      </button>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'pry-search-multi-class', template: "<div class=\"o-search-multi-class\">\n  <div class=\"o-search-multi-class__header\">\n    <h3 class=\"a-h3\">{{ '@pry.search.multi.title' | i18n }}</h3>\n    <div\n      class=\"a-tooltip\"\n      [attr.data-tooltip]=\"'@pry.search.multi.extraOptions' | i18n\"\n      data-tooltip-position=\"bottom\"\n      [pryOverlay]=\"optionOverlay\"\n      [(overlayOpen)]=\"optionsOpen\"\n      (click)=\"optionsOpen = !optionsOpen\"\n      >\n      <button class=\"a-btn a-btn--icon-text\">\n        {{ '@pry.search.multi.options' | i18n }}\n        <pry-icon iconSvg=\"tune\" [width]=\"16\" [height]=\"16\" [animation]=\"false\"></pry-icon>\n      </button>\n    </div>\n    <ng-template #optionOverlay>\n      <div class=\"o-search-multi-class__options\">\n        <pry-toggle\n          [ngModel]=\"(multiType$ | async) === 'OR'\"\n          [leftword]=\"'@pry.search.type.or' | i18n\"\n          [rightword]=\"'@pry.search.type.and' | i18n\"\n          [alwaysActive]=\"true\"\n          (ngModelChange)=\"onChangeMultiType($event)\"\n          >{{ '@pry.search.multi.multiType' | i18n }}</pry-toggle\n          >\n        </div>\n      </ng-template>\n    </div>\n\n    <div class=\"o-search-multi-class__conditions-wrapper\">\n      <div class=\"o-search-multi-class__conditions\">\n        @for (condition of conditions$ | async; track condition) {\n          <pry-multi-class-condition [id]=\"condition.id\"></pry-multi-class-condition>\n        }\n      </div>\n      <div class=\"o-search-multi-class__add-condition\">\n        <button (click)=\"onAddCondition()\" class=\"a-btn a-btn--secondary -size-sm\">\n          <pry-icon [height]=\"20\" [width]=\"20\" iconSvg=\"add\"></pry-icon>\n          {{ '@pry.search.multi.addCondition' | i18n }}\n        </button>\n      </div>\n    </div>\n  </div>\n" }]
         }], ctorParameters: () => [{ type: i1.Store }] });
 class PrySearchFulltextComponent {
@@ -1471,11 +1471,11 @@ class PrySearchFulltextComponent {
         this.searchChange.emit(payload);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PrySearchFulltextComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: PrySearchFulltextComponent, selector: "pry-search-fulltext", inputs: { mode: "mode", launchButton: "launchButton", currentEdit: "currentEdit" }, outputs: { searchChange: "searchChange" }, host: { listeners: { "document:click": "clickout($event)", "window:keyup.enter": "keyEvent($event)" } }, viewQueries: [{ propertyName: "searchButton", first: true, predicate: ["searchButton"], descendants: true, read: ElementRef }, { propertyName: "searchTrigger", first: true, predicate: ["searchTrigger"], descendants: true, read: ElementRef }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, read: ElementRef }, { propertyName: "searchOverlayRef", first: true, predicate: ["searchOverlay"], descendants: true, read: ElementRef }, { propertyName: "searchClass", first: true, predicate: ["searchClass"], descendants: true }, { propertyName: "chooseClasses", first: true, predicate: ["chooseClasses"], descendants: true }], ngImport: i0, template: "<pry-search-css></pry-search-css>\n<div class=\"o-search-fulltext\" [class.o-search-fulltext--vertical]=\"mode === 'vertical'\">\n  <div class=\"o-search-fulltext__container\">\n    <button\n      #searchClass\n      type=\"button\"\n      class=\"o-search-fulltext__classes\"\n      [class.o-search-fulltext__classes--inline]=\"mode === 'inline'\"\n      [pryOverlay]=\"classesOverlay\"\n      [(overlayOpen)]=\"panelClassesOpen\"\n      pryOverlayPosition=\"start-top\"\n      [pryOverlaySticky]=\"true\"\n      [pryOverlayNoPadding]=\"true\"\n      (click)=\"panelClassesOpen = true\"\n    >\n      <span\n        class=\"o-search-fulltext__classes__content a-tooltip\"\n        [attr.data-tooltip]=\"'@pry.search.fulltext.selectClass' | i18n\"\n        data-tooltip-position=\"bottom\"\n      >\n        <pry-icon\n          [iconSvg]=\"classesSelected.length === 0 ? 'apps' : 'detail'\"\n          [height]=\"20\"\n          [width]=\"20\"\n          [animation]=\"false\"\n        ></pry-icon>\n        <span class=\"o-search-fulltext__classes__content__label\" *ngIf=\"mode === 'inline'\">\n          {{ classesSelectedLabel | i18n : { nb: classesSelected.length } }}\n        </span>\n      </span>\n\n      <span class=\"o-search-fulltext__classes__arrow\">\n        <pry-icon\n          iconSvg=\"fleche_bas\"\n          [width]=\"17\"\n          [height]=\"17\"\n          [animation]=\"false\"\n          class=\"o-search-fulltext__classes__arrow__icon\"\n          [class.is-open]=\"panelClassesOpen\"\n        ></pry-icon>\n      </span>\n    </button>\n\n    <pry-choose-widget\n      [mode]=\"'input'\"\n      [class.m-choose-widget__input__inline]=\"mode === 'inline'\"\n      [panelOpen]=\"panelSearchOpen\"\n      [width]=\"searchPanelWidth ?? 200\"\n      (selected)=\"onSelectWidget($event)\"\n    >\n      <input\n        #searchInput\n        [(ngModel)]=\"search\"\n        (input)=\"onChangeSearch($event)\"\n        (focusin)=\"onOpenSearchPanel()\"\n        (focusout)=\"onFocusOut()\"\n      />\n      <div *ngIf=\"!searchDisabled\" class=\"o-search-fulltext__input__clear\">\n        <div class=\"o-search-fulltext__input__clear__wrapper\" (click)=\"onClearSearch($event)\">\n          <div\n            class=\"a-tooltip\"\n            [attr.data-tooltip]=\"'@pry.search.fulltext.clear' | i18n\"\n            data-tooltip-position=\"bottom\"\n          >\n            <pry-icon iconSvg=\"close\" [height]=\"16\" [width]=\"16\" [animation]=\"false\"></pry-icon>\n            <span class=\"u-visually-hidden\">{{ '@pry.search.fulltext.clear' | i18n }}</span>\n          </div>\n        </div>\n      </div>\n    </pry-choose-widget>\n  </div>\n\n  <button\n    #searchButton\n    class=\"a-btn a-btn--primary a-tooltip\"\n    (click)=\"onSearch()\"\n    [class.o-search-fulltext__button__inline]=\"mode === 'inline'\"\n    [ngClass]=\"{ ' -width-full': mode === 'vertical' }\"\n    [disabled]=\"searchDisabled\"\n    *ngIf=\"launchButton\"\n    [attr.data-tooltip]=\"'@pry.search.fulltext.search' | i18n\"\n    data-tooltip-position=\"bottom\"\n  >\n    <pry-icon iconSvg=\"search-line\" [animation]=\"false\"></pry-icon>\n    <span *ngIf=\"mode === 'vertical'\">{{ '@pry.search.fulltext.search' | i18n }}</span>\n    <span class=\"u-visually-hidden\">{{ '@pry.search.fulltext.search' | i18n }}</span>\n  </button>\n</div>\n\n<ng-template #classesOverlay>\n  <div\n    class=\"o-search-fulltext__classes-overlay\"\n    #chooseClasses\n    (keydown.escape)=\"closeFocus()\"\n    (keydown.arrowDown)=\"onArrowDown()\"\n    (keydown.arrowUp)=\"onArrowUp()\"\n  >\n    <button class=\"o-search-fulltext__classes-overlay__item\" (click)=\"onSelectAllClasses()\">\n      <pry-icon iconSvg=\"apps\" [width]=\"20\" [height]=\"20\"></pry-icon>\n      <span class=\"o-search-fulltext__classes-overlay__item__label\">{{\n        '@pry.search.fulltext.allClasses' | i18n\n      }}</span>\n    </button>\n    <ng-container *ngFor=\"let clazz of classes$ | async; let last = last\">\n      <button\n        type=\"button\"\n        class=\"o-search-fulltext__classes-overlay__item\"\n        (click)=\"onSelectClass(clazz)\"\n        [class.o-search-fulltext__classes-overlay__item__selected]=\"classesSelected.includes(clazz.id)\"\n        (keydown.tab)=\"last ? closeFocus() : null\"\n      >\n        <img\n          alt=\"class\"\n          [height]=\"20\"\n          [width]=\"20\"\n          [src]=\"clazz.id | translateId : { type: 'class', output: 'icon' } | async\"\n        />\n        <span class=\"o-search-fulltext__classes-overlay__item__label\">{{ clazz.name }}</span>\n      </button>\n    </ng-container>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.PryOverlayDirective, selector: "[pryOverlay]", inputs: ["pryOverlay", "styleReversed", "pryOverlaySticky", "pryOverlayNoPadding", "pryOverlayPosition", "overlayOpen", "hasBackdrop"], outputs: ["overlayOpenChange"] }, { kind: "component", type: ChooseWidgetComponent, selector: "pry-choose-widget", inputs: ["panelOpen", "mode", "width"], outputs: ["selected"] }, { kind: "component", type: PrySearchCssComponent, selector: "pry-search-css" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslateIdPipe, name: "translateId" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: PrySearchFulltextComponent, selector: "pry-search-fulltext", inputs: { mode: "mode", launchButton: "launchButton", currentEdit: "currentEdit" }, outputs: { searchChange: "searchChange" }, host: { listeners: { "document:click": "clickout($event)", "window:keyup.enter": "keyEvent($event)" } }, viewQueries: [{ propertyName: "searchButton", first: true, predicate: ["searchButton"], descendants: true, read: ElementRef }, { propertyName: "searchTrigger", first: true, predicate: ["searchTrigger"], descendants: true, read: ElementRef }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, read: ElementRef }, { propertyName: "searchOverlayRef", first: true, predicate: ["searchOverlay"], descendants: true, read: ElementRef }, { propertyName: "searchClass", first: true, predicate: ["searchClass"], descendants: true }, { propertyName: "chooseClasses", first: true, predicate: ["chooseClasses"], descendants: true }], ngImport: i0, template: "<pry-search-css></pry-search-css>\n<div class=\"o-search-fulltext\" [class.o-search-fulltext--vertical]=\"mode === 'vertical'\">\n  <div class=\"o-search-fulltext__container\">\n    <button\n      #searchClass\n      type=\"button\"\n      class=\"o-search-fulltext__classes\"\n      [class.o-search-fulltext__classes--inline]=\"mode === 'inline'\"\n      [pryOverlay]=\"classesOverlay\"\n      [(overlayOpen)]=\"panelClassesOpen\"\n      pryOverlayPosition=\"start-top\"\n      [pryOverlaySticky]=\"true\"\n      [pryOverlayNoPadding]=\"true\"\n      (click)=\"panelClassesOpen = true\"\n      >\n      <span\n        class=\"o-search-fulltext__classes__content a-tooltip\"\n        [attr.data-tooltip]=\"'@pry.search.fulltext.selectClass' | i18n\"\n        data-tooltip-position=\"bottom\"\n        >\n        <pry-icon\n          [iconSvg]=\"classesSelected.length === 0 ? 'apps' : 'detail'\"\n          [height]=\"20\"\n          [width]=\"20\"\n          [animation]=\"false\"\n        ></pry-icon>\n        @if (mode === 'inline') {\n          <span class=\"o-search-fulltext__classes__content__label\">\n            {{ classesSelectedLabel | i18n : { nb: classesSelected.length } }}\n          </span>\n        }\n      </span>\n\n      <span class=\"o-search-fulltext__classes__arrow\">\n        <pry-icon\n          iconSvg=\"fleche_bas\"\n          [width]=\"17\"\n          [height]=\"17\"\n          [animation]=\"false\"\n          class=\"o-search-fulltext__classes__arrow__icon\"\n          [class.is-open]=\"panelClassesOpen\"\n        ></pry-icon>\n      </span>\n    </button>\n\n    <pry-choose-widget\n      [mode]=\"'input'\"\n      [class.m-choose-widget__input__inline]=\"mode === 'inline'\"\n      [panelOpen]=\"panelSearchOpen\"\n      [width]=\"searchPanelWidth ?? 200\"\n      (selected)=\"onSelectWidget($event)\"\n      >\n      <input\n        #searchInput\n        [(ngModel)]=\"search\"\n        (input)=\"onChangeSearch($event)\"\n        (focusin)=\"onOpenSearchPanel()\"\n        (focusout)=\"onFocusOut()\"\n        />\n      @if (!searchDisabled) {\n        <div class=\"o-search-fulltext__input__clear\">\n          <div class=\"o-search-fulltext__input__clear__wrapper\" (click)=\"onClearSearch($event)\">\n            <div\n              class=\"a-tooltip\"\n              [attr.data-tooltip]=\"'@pry.search.fulltext.clear' | i18n\"\n              data-tooltip-position=\"bottom\"\n              >\n              <pry-icon iconSvg=\"close\" [height]=\"16\" [width]=\"16\" [animation]=\"false\"></pry-icon>\n              <span class=\"u-visually-hidden\">{{ '@pry.search.fulltext.clear' | i18n }}</span>\n            </div>\n          </div>\n        </div>\n      }\n    </pry-choose-widget>\n  </div>\n\n  @if (launchButton) {\n    <button\n      #searchButton\n      class=\"a-btn a-btn--primary a-tooltip\"\n      (click)=\"onSearch()\"\n      [class.o-search-fulltext__button__inline]=\"mode === 'inline'\"\n      [ngClass]=\"{ ' -width-full': mode === 'vertical' }\"\n      [disabled]=\"searchDisabled\"\n      [attr.data-tooltip]=\"'@pry.search.fulltext.search' | i18n\"\n      data-tooltip-position=\"bottom\"\n      >\n      <pry-icon iconSvg=\"search-line\" [animation]=\"false\"></pry-icon>\n      @if (mode === 'vertical') {\n        <span>{{ '@pry.search.fulltext.search' | i18n }}</span>\n      }\n      <span class=\"u-visually-hidden\">{{ '@pry.search.fulltext.search' | i18n }}</span>\n    </button>\n  }\n</div>\n\n<ng-template #classesOverlay>\n  <div\n    class=\"o-search-fulltext__classes-overlay\"\n    #chooseClasses\n    (keydown.escape)=\"closeFocus()\"\n    (keydown.arrowDown)=\"onArrowDown()\"\n    (keydown.arrowUp)=\"onArrowUp()\"\n    >\n    <button class=\"o-search-fulltext__classes-overlay__item\" (click)=\"onSelectAllClasses()\">\n      <pry-icon iconSvg=\"apps\" [width]=\"20\" [height]=\"20\"></pry-icon>\n      <span class=\"o-search-fulltext__classes-overlay__item__label\">{{\n        '@pry.search.fulltext.allClasses' | i18n\n      }}</span>\n    </button>\n    @for (clazz of classes$ | async; track clazz; let last = $last) {\n      <button\n        type=\"button\"\n        class=\"o-search-fulltext__classes-overlay__item\"\n        (click)=\"onSelectClass(clazz)\"\n        [class.o-search-fulltext__classes-overlay__item__selected]=\"classesSelected.includes(clazz.id)\"\n        (keydown.tab)=\"last ? closeFocus() : null\"\n        >\n        <img\n          alt=\"class\"\n          [height]=\"20\"\n          [width]=\"20\"\n          [src]=\"clazz.id | translateId : { type: 'class', output: 'icon' } | async\"\n          />\n        <span class=\"o-search-fulltext__classes-overlay__item__label\">{{ clazz.name }}</span>\n      </button>\n    }\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.PryOverlayDirective, selector: "[pryOverlay]", inputs: ["pryOverlay", "styleReversed", "pryOverlaySticky", "pryOverlayNoPadding", "pryOverlayPosition", "overlayOpen", "hasBackdrop"], outputs: ["overlayOpenChange"] }, { kind: "component", type: ChooseWidgetComponent, selector: "pry-choose-widget", inputs: ["panelOpen", "mode", "width"], outputs: ["selected"] }, { kind: "component", type: PrySearchCssComponent, selector: "pry-search-css" }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslateIdPipe, name: "translateId" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PrySearchFulltextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-search-fulltext', template: "<pry-search-css></pry-search-css>\n<div class=\"o-search-fulltext\" [class.o-search-fulltext--vertical]=\"mode === 'vertical'\">\n  <div class=\"o-search-fulltext__container\">\n    <button\n      #searchClass\n      type=\"button\"\n      class=\"o-search-fulltext__classes\"\n      [class.o-search-fulltext__classes--inline]=\"mode === 'inline'\"\n      [pryOverlay]=\"classesOverlay\"\n      [(overlayOpen)]=\"panelClassesOpen\"\n      pryOverlayPosition=\"start-top\"\n      [pryOverlaySticky]=\"true\"\n      [pryOverlayNoPadding]=\"true\"\n      (click)=\"panelClassesOpen = true\"\n    >\n      <span\n        class=\"o-search-fulltext__classes__content a-tooltip\"\n        [attr.data-tooltip]=\"'@pry.search.fulltext.selectClass' | i18n\"\n        data-tooltip-position=\"bottom\"\n      >\n        <pry-icon\n          [iconSvg]=\"classesSelected.length === 0 ? 'apps' : 'detail'\"\n          [height]=\"20\"\n          [width]=\"20\"\n          [animation]=\"false\"\n        ></pry-icon>\n        <span class=\"o-search-fulltext__classes__content__label\" *ngIf=\"mode === 'inline'\">\n          {{ classesSelectedLabel | i18n : { nb: classesSelected.length } }}\n        </span>\n      </span>\n\n      <span class=\"o-search-fulltext__classes__arrow\">\n        <pry-icon\n          iconSvg=\"fleche_bas\"\n          [width]=\"17\"\n          [height]=\"17\"\n          [animation]=\"false\"\n          class=\"o-search-fulltext__classes__arrow__icon\"\n          [class.is-open]=\"panelClassesOpen\"\n        ></pry-icon>\n      </span>\n    </button>\n\n    <pry-choose-widget\n      [mode]=\"'input'\"\n      [class.m-choose-widget__input__inline]=\"mode === 'inline'\"\n      [panelOpen]=\"panelSearchOpen\"\n      [width]=\"searchPanelWidth ?? 200\"\n      (selected)=\"onSelectWidget($event)\"\n    >\n      <input\n        #searchInput\n        [(ngModel)]=\"search\"\n        (input)=\"onChangeSearch($event)\"\n        (focusin)=\"onOpenSearchPanel()\"\n        (focusout)=\"onFocusOut()\"\n      />\n      <div *ngIf=\"!searchDisabled\" class=\"o-search-fulltext__input__clear\">\n        <div class=\"o-search-fulltext__input__clear__wrapper\" (click)=\"onClearSearch($event)\">\n          <div\n            class=\"a-tooltip\"\n            [attr.data-tooltip]=\"'@pry.search.fulltext.clear' | i18n\"\n            data-tooltip-position=\"bottom\"\n          >\n            <pry-icon iconSvg=\"close\" [height]=\"16\" [width]=\"16\" [animation]=\"false\"></pry-icon>\n            <span class=\"u-visually-hidden\">{{ '@pry.search.fulltext.clear' | i18n }}</span>\n          </div>\n        </div>\n      </div>\n    </pry-choose-widget>\n  </div>\n\n  <button\n    #searchButton\n    class=\"a-btn a-btn--primary a-tooltip\"\n    (click)=\"onSearch()\"\n    [class.o-search-fulltext__button__inline]=\"mode === 'inline'\"\n    [ngClass]=\"{ ' -width-full': mode === 'vertical' }\"\n    [disabled]=\"searchDisabled\"\n    *ngIf=\"launchButton\"\n    [attr.data-tooltip]=\"'@pry.search.fulltext.search' | i18n\"\n    data-tooltip-position=\"bottom\"\n  >\n    <pry-icon iconSvg=\"search-line\" [animation]=\"false\"></pry-icon>\n    <span *ngIf=\"mode === 'vertical'\">{{ '@pry.search.fulltext.search' | i18n }}</span>\n    <span class=\"u-visually-hidden\">{{ '@pry.search.fulltext.search' | i18n }}</span>\n  </button>\n</div>\n\n<ng-template #classesOverlay>\n  <div\n    class=\"o-search-fulltext__classes-overlay\"\n    #chooseClasses\n    (keydown.escape)=\"closeFocus()\"\n    (keydown.arrowDown)=\"onArrowDown()\"\n    (keydown.arrowUp)=\"onArrowUp()\"\n  >\n    <button class=\"o-search-fulltext__classes-overlay__item\" (click)=\"onSelectAllClasses()\">\n      <pry-icon iconSvg=\"apps\" [width]=\"20\" [height]=\"20\"></pry-icon>\n      <span class=\"o-search-fulltext__classes-overlay__item__label\">{{\n        '@pry.search.fulltext.allClasses' | i18n\n      }}</span>\n    </button>\n    <ng-container *ngFor=\"let clazz of classes$ | async; let last = last\">\n      <button\n        type=\"button\"\n        class=\"o-search-fulltext__classes-overlay__item\"\n        (click)=\"onSelectClass(clazz)\"\n        [class.o-search-fulltext__classes-overlay__item__selected]=\"classesSelected.includes(clazz.id)\"\n        (keydown.tab)=\"last ? closeFocus() : null\"\n      >\n        <img\n          alt=\"class\"\n          [height]=\"20\"\n          [width]=\"20\"\n          [src]=\"clazz.id | translateId : { type: 'class', output: 'icon' } | async\"\n        />\n        <span class=\"o-search-fulltext__classes-overlay__item__label\">{{ clazz.name }}</span>\n      </button>\n    </ng-container>\n  </div>\n</ng-template>\n" }]
+            args: [{ selector: 'pry-search-fulltext', template: "<pry-search-css></pry-search-css>\n<div class=\"o-search-fulltext\" [class.o-search-fulltext--vertical]=\"mode === 'vertical'\">\n  <div class=\"o-search-fulltext__container\">\n    <button\n      #searchClass\n      type=\"button\"\n      class=\"o-search-fulltext__classes\"\n      [class.o-search-fulltext__classes--inline]=\"mode === 'inline'\"\n      [pryOverlay]=\"classesOverlay\"\n      [(overlayOpen)]=\"panelClassesOpen\"\n      pryOverlayPosition=\"start-top\"\n      [pryOverlaySticky]=\"true\"\n      [pryOverlayNoPadding]=\"true\"\n      (click)=\"panelClassesOpen = true\"\n      >\n      <span\n        class=\"o-search-fulltext__classes__content a-tooltip\"\n        [attr.data-tooltip]=\"'@pry.search.fulltext.selectClass' | i18n\"\n        data-tooltip-position=\"bottom\"\n        >\n        <pry-icon\n          [iconSvg]=\"classesSelected.length === 0 ? 'apps' : 'detail'\"\n          [height]=\"20\"\n          [width]=\"20\"\n          [animation]=\"false\"\n        ></pry-icon>\n        @if (mode === 'inline') {\n          <span class=\"o-search-fulltext__classes__content__label\">\n            {{ classesSelectedLabel | i18n : { nb: classesSelected.length } }}\n          </span>\n        }\n      </span>\n\n      <span class=\"o-search-fulltext__classes__arrow\">\n        <pry-icon\n          iconSvg=\"fleche_bas\"\n          [width]=\"17\"\n          [height]=\"17\"\n          [animation]=\"false\"\n          class=\"o-search-fulltext__classes__arrow__icon\"\n          [class.is-open]=\"panelClassesOpen\"\n        ></pry-icon>\n      </span>\n    </button>\n\n    <pry-choose-widget\n      [mode]=\"'input'\"\n      [class.m-choose-widget__input__inline]=\"mode === 'inline'\"\n      [panelOpen]=\"panelSearchOpen\"\n      [width]=\"searchPanelWidth ?? 200\"\n      (selected)=\"onSelectWidget($event)\"\n      >\n      <input\n        #searchInput\n        [(ngModel)]=\"search\"\n        (input)=\"onChangeSearch($event)\"\n        (focusin)=\"onOpenSearchPanel()\"\n        (focusout)=\"onFocusOut()\"\n        />\n      @if (!searchDisabled) {\n        <div class=\"o-search-fulltext__input__clear\">\n          <div class=\"o-search-fulltext__input__clear__wrapper\" (click)=\"onClearSearch($event)\">\n            <div\n              class=\"a-tooltip\"\n              [attr.data-tooltip]=\"'@pry.search.fulltext.clear' | i18n\"\n              data-tooltip-position=\"bottom\"\n              >\n              <pry-icon iconSvg=\"close\" [height]=\"16\" [width]=\"16\" [animation]=\"false\"></pry-icon>\n              <span class=\"u-visually-hidden\">{{ '@pry.search.fulltext.clear' | i18n }}</span>\n            </div>\n          </div>\n        </div>\n      }\n    </pry-choose-widget>\n  </div>\n\n  @if (launchButton) {\n    <button\n      #searchButton\n      class=\"a-btn a-btn--primary a-tooltip\"\n      (click)=\"onSearch()\"\n      [class.o-search-fulltext__button__inline]=\"mode === 'inline'\"\n      [ngClass]=\"{ ' -width-full': mode === 'vertical' }\"\n      [disabled]=\"searchDisabled\"\n      [attr.data-tooltip]=\"'@pry.search.fulltext.search' | i18n\"\n      data-tooltip-position=\"bottom\"\n      >\n      <pry-icon iconSvg=\"search-line\" [animation]=\"false\"></pry-icon>\n      @if (mode === 'vertical') {\n        <span>{{ '@pry.search.fulltext.search' | i18n }}</span>\n      }\n      <span class=\"u-visually-hidden\">{{ '@pry.search.fulltext.search' | i18n }}</span>\n    </button>\n  }\n</div>\n\n<ng-template #classesOverlay>\n  <div\n    class=\"o-search-fulltext__classes-overlay\"\n    #chooseClasses\n    (keydown.escape)=\"closeFocus()\"\n    (keydown.arrowDown)=\"onArrowDown()\"\n    (keydown.arrowUp)=\"onArrowUp()\"\n    >\n    <button class=\"o-search-fulltext__classes-overlay__item\" (click)=\"onSelectAllClasses()\">\n      <pry-icon iconSvg=\"apps\" [width]=\"20\" [height]=\"20\"></pry-icon>\n      <span class=\"o-search-fulltext__classes-overlay__item__label\">{{\n        '@pry.search.fulltext.allClasses' | i18n\n      }}</span>\n    </button>\n    @for (clazz of classes$ | async; track clazz; let last = $last) {\n      <button\n        type=\"button\"\n        class=\"o-search-fulltext__classes-overlay__item\"\n        (click)=\"onSelectClass(clazz)\"\n        [class.o-search-fulltext__classes-overlay__item__selected]=\"classesSelected.includes(clazz.id)\"\n        (keydown.tab)=\"last ? closeFocus() : null\"\n        >\n        <img\n          alt=\"class\"\n          [height]=\"20\"\n          [width]=\"20\"\n          [src]=\"clazz.id | translateId : { type: 'class', output: 'icon' } | async\"\n          />\n        <span class=\"o-search-fulltext__classes-overlay__item__label\">{{ clazz.name }}</span>\n      </button>\n    }\n  </div>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i1.Store }], propDecorators: { searchButton: [{
                 type: ViewChild,
                 args: ['searchButton', { read: ElementRef }]
@@ -1653,11 +1653,11 @@ class EditNamedQueryComponent extends SubscriptionnerDirective {
         this.widgetType = $event;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: EditNamedQueryComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: EditNamedQueryComponent, selector: "pry-edit-named-query", inputs: { fromWidget: "fromWidget" }, outputs: { searchFulltextChange: "searchFulltextChange", cancelled: "cancelled", searched: "searched" }, host: { properties: { "class": "this.class" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"o-edit-named-query\">\n  <ng-container *ngIf=\"currentEditType$ | async as currentEditType\">\n    <div class=\"o-edit-named-query__content\">\n      <ng-container [ngSwitch]=\"currentEditType\">\n        <ng-container *ngSwitchCase=\"FULL_TEXT\">\n          <pry-search-fulltext\n            mode=\"vertical\"\n            [launchButton]=\"false\"\n            (searchChange)=\"onSearchFulltextChange($event)\"\n            [currentEdit]=\"currentEdit$ | async\"\n          ></pry-search-fulltext>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"MONO_CLASS\">\n          <pry-search-mono-class></pry-search-mono-class>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"MULTI_CLASS\">\n          <pry-search-multi-class></pry-search-multi-class>\n        </ng-container>\n      </ng-container>\n    </div>\n    <div class=\"o-edit-named-query__buttons\">\n      <ng-container *ngIf=\"currentEditType !== FULL_TEXT\">\n        <pry-choose-widget (selected)=\"select($event)\"></pry-choose-widget>\n      </ng-container>\n      <div class=\"m-btn-group\">\n        <button type=\"button\" class=\"a-btn a-btn--primary\" (click)=\"cancel()\" *ngIf=\"currentEditType === FULL_TEXT\">\n          {{ '@pry.search.button.cancel' | i18n }}\n        </button>\n        <button\n          [disabled]=\"\n            (currentEditType === MULTI_CLASS && !(searchMultiClassValid$ | async)) ||\n            (currentEditType === MONO_CLASS && !(searchMonoClassValid$ | async)) ||\n            !(currentEdit$ | async)?.owner\n          \"\n          type=\"button\"\n          class=\"a-btn a-btn--primary a-btn--icon-text\"\n          (click)=\"search()\"\n        >\n          <pry-icon iconSvg=\"search-line\"></pry-icon>\n          {{\n            ((currentEdit$ | async)?.id === DEFAULT_NAMED_QUERY_ID\n              ? '@pry.search.button.search'\n              : '@pry.search.button.update'\n            ) | i18n\n          }}\n        </button>\n      </div>\n    </div>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i3.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: PrySearchMonoClassComponent, selector: "pry-search-mono-class" }, { kind: "component", type: PrySearchMultiClassComponent, selector: "pry-search-multi-class" }, { kind: "component", type: PrySearchFulltextComponent, selector: "pry-search-fulltext", inputs: ["mode", "launchButton", "currentEdit"], outputs: ["searchChange"] }, { kind: "component", type: ChooseWidgetComponent, selector: "pry-choose-widget", inputs: ["panelOpen", "mode", "width"], outputs: ["selected"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: EditNamedQueryComponent, selector: "pry-edit-named-query", inputs: { fromWidget: "fromWidget" }, outputs: { searchFulltextChange: "searchFulltextChange", cancelled: "cancelled", searched: "searched" }, host: { properties: { "class": "this.class" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"o-edit-named-query\">\n  @if (currentEditType$ | async; as currentEditType) {\n    <div class=\"o-edit-named-query__content\">\n      @switch (currentEditType) {\n        @case (FULL_TEXT) {\n          <pry-search-fulltext\n            mode=\"vertical\"\n            [launchButton]=\"false\"\n            (searchChange)=\"onSearchFulltextChange($event)\"\n            [currentEdit]=\"currentEdit$ | async\"\n          ></pry-search-fulltext>\n        }\n        @case (MONO_CLASS) {\n          <pry-search-mono-class></pry-search-mono-class>\n        }\n        @case (MULTI_CLASS) {\n          <pry-search-multi-class></pry-search-multi-class>\n        }\n      }\n    </div>\n    <div class=\"o-edit-named-query__buttons\">\n      @if (currentEditType !== FULL_TEXT) {\n        <pry-choose-widget (selected)=\"select($event)\"></pry-choose-widget>\n      }\n      <div class=\"m-btn-group\">\n        @if (currentEditType === FULL_TEXT) {\n          <button type=\"button\" class=\"a-btn a-btn--primary\" (click)=\"cancel()\">\n            {{ '@pry.search.button.cancel' | i18n }}\n          </button>\n        }\n        <button\n          [disabled]=\"\n            (currentEditType === MULTI_CLASS && !(searchMultiClassValid$ | async)) ||\n            (currentEditType === MONO_CLASS && !(searchMonoClassValid$ | async)) ||\n            !(currentEdit$ | async)?.owner\n          \"\n          type=\"button\"\n          class=\"a-btn a-btn--primary a-btn--icon-text\"\n          (click)=\"search()\"\n          >\n          <pry-icon iconSvg=\"search-line\"></pry-icon>\n          {{\n          ((currentEdit$ | async)?.id === DEFAULT_NAMED_QUERY_ID\n          ? '@pry.search.button.search'\n          : '@pry.search.button.update'\n          ) | i18n\n          }}\n        </button>\n      </div>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: i3.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: PrySearchMonoClassComponent, selector: "pry-search-mono-class" }, { kind: "component", type: PrySearchMultiClassComponent, selector: "pry-search-multi-class" }, { kind: "component", type: PrySearchFulltextComponent, selector: "pry-search-fulltext", inputs: ["mode", "launchButton", "currentEdit"], outputs: ["searchChange"] }, { kind: "component", type: ChooseWidgetComponent, selector: "pry-choose-widget", inputs: ["panelOpen", "mode", "width"], outputs: ["selected"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: EditNamedQueryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-edit-named-query', template: "<div class=\"o-edit-named-query\">\n  <ng-container *ngIf=\"currentEditType$ | async as currentEditType\">\n    <div class=\"o-edit-named-query__content\">\n      <ng-container [ngSwitch]=\"currentEditType\">\n        <ng-container *ngSwitchCase=\"FULL_TEXT\">\n          <pry-search-fulltext\n            mode=\"vertical\"\n            [launchButton]=\"false\"\n            (searchChange)=\"onSearchFulltextChange($event)\"\n            [currentEdit]=\"currentEdit$ | async\"\n          ></pry-search-fulltext>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"MONO_CLASS\">\n          <pry-search-mono-class></pry-search-mono-class>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"MULTI_CLASS\">\n          <pry-search-multi-class></pry-search-multi-class>\n        </ng-container>\n      </ng-container>\n    </div>\n    <div class=\"o-edit-named-query__buttons\">\n      <ng-container *ngIf=\"currentEditType !== FULL_TEXT\">\n        <pry-choose-widget (selected)=\"select($event)\"></pry-choose-widget>\n      </ng-container>\n      <div class=\"m-btn-group\">\n        <button type=\"button\" class=\"a-btn a-btn--primary\" (click)=\"cancel()\" *ngIf=\"currentEditType === FULL_TEXT\">\n          {{ '@pry.search.button.cancel' | i18n }}\n        </button>\n        <button\n          [disabled]=\"\n            (currentEditType === MULTI_CLASS && !(searchMultiClassValid$ | async)) ||\n            (currentEditType === MONO_CLASS && !(searchMonoClassValid$ | async)) ||\n            !(currentEdit$ | async)?.owner\n          \"\n          type=\"button\"\n          class=\"a-btn a-btn--primary a-btn--icon-text\"\n          (click)=\"search()\"\n        >\n          <pry-icon iconSvg=\"search-line\"></pry-icon>\n          {{\n            ((currentEdit$ | async)?.id === DEFAULT_NAMED_QUERY_ID\n              ? '@pry.search.button.search'\n              : '@pry.search.button.update'\n            ) | i18n\n          }}\n        </button>\n      </div>\n    </div>\n  </ng-container>\n</div>\n" }]
+            args: [{ selector: 'pry-edit-named-query', template: "<div class=\"o-edit-named-query\">\n  @if (currentEditType$ | async; as currentEditType) {\n    <div class=\"o-edit-named-query__content\">\n      @switch (currentEditType) {\n        @case (FULL_TEXT) {\n          <pry-search-fulltext\n            mode=\"vertical\"\n            [launchButton]=\"false\"\n            (searchChange)=\"onSearchFulltextChange($event)\"\n            [currentEdit]=\"currentEdit$ | async\"\n          ></pry-search-fulltext>\n        }\n        @case (MONO_CLASS) {\n          <pry-search-mono-class></pry-search-mono-class>\n        }\n        @case (MULTI_CLASS) {\n          <pry-search-multi-class></pry-search-multi-class>\n        }\n      }\n    </div>\n    <div class=\"o-edit-named-query__buttons\">\n      @if (currentEditType !== FULL_TEXT) {\n        <pry-choose-widget (selected)=\"select($event)\"></pry-choose-widget>\n      }\n      <div class=\"m-btn-group\">\n        @if (currentEditType === FULL_TEXT) {\n          <button type=\"button\" class=\"a-btn a-btn--primary\" (click)=\"cancel()\">\n            {{ '@pry.search.button.cancel' | i18n }}\n          </button>\n        }\n        <button\n          [disabled]=\"\n            (currentEditType === MULTI_CLASS && !(searchMultiClassValid$ | async)) ||\n            (currentEditType === MONO_CLASS && !(searchMonoClassValid$ | async)) ||\n            !(currentEdit$ | async)?.owner\n          \"\n          type=\"button\"\n          class=\"a-btn a-btn--primary a-btn--icon-text\"\n          (click)=\"search()\"\n          >\n          <pry-icon iconSvg=\"search-line\"></pry-icon>\n          {{\n          ((currentEdit$ | async)?.id === DEFAULT_NAMED_QUERY_ID\n          ? '@pry.search.button.search'\n          : '@pry.search.button.update'\n          ) | i18n\n          }}\n        </button>\n      </div>\n    </div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.Store }], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class']
@@ -1788,11 +1788,11 @@ class PrySearchToolsComponent {
         this.store.dispatch(DataSourceActions.namedQuery.updateCurrentEdit({ currentEdit: { visibility: $event } }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PrySearchToolsComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: PrySearchToolsComponent, selector: "pry-search-tools", host: { properties: { "class.o-pry-search-tools-wrapper": "this.class", "class.is-close": "this.searchToolsClose" } }, ngImport: i0, template: "<div\n  class=\"o-pry-search-tools\"\n  [class.is-close]=\"searchToolsClose\"\n  [class.is-mono]=\"isNewMono || (isEditMono$ | async)\"\n>\n  <button\n    type=\"button\"\n    class=\"a-btn a-btn--icon-text -back a-tooltip\"\n    (click)=\"onSearchTools()\"\n    aria-pressed=\"false\"\n    *ngIf=\"((editInProgress$ | async) && !(isRename$ | async)) || isSearchCriteria\"\n    [attr.data-tooltip]=\"'@pry.search.button.backSearch' | i18n\"\n    data-tooltip-position=\"bottom\"\n  >\n    <pry-icon iconSvg=\"arrow_back\" [width]=\"24\" [height]=\"24\" [animation]=\"false\"></pry-icon>\n    <span>{{ '@pry.search.button.backSearch' | i18n }}</span>\n  </button>\n  <div class=\"o-pry-search-tools__content\" [class.is-close]=\"searchToolsClose\">\n    <button\n      *ngIf=\"((editInProgress$ | async) && !(isRename$ | async)) || isSearchCriteria\"\n      class=\"a-btn a-btn--icon-text -link-like u-self-end\"\n      (click)=\"reset()\"\n      id=\"btn_reset\"\n    >\n      <pry-icon iconSvg=\"reset\" [width]=\"18\" [height]=\"18\"></pry-icon>\n      {{ '@pry.search.button.reset' | i18n }}\n    </button>\n    <ng-container *ngIf=\"editInProgress$ | async\">\n      <pry-share [ngModel]=\"(currentEdit$ | async)?.visibility\" (ngModelChange)=\"updateVisibility($event)\"></pry-share>\n    </ng-container>\n    <ng-container *ngIf=\"(editInProgress$ | async) && !(isRename$ | async) && !(loading$ | async); else noEdit\">\n      <pry-edit-named-query\n        (searchFulltextChange)=\"onSearchFulltextChange($event)\"\n        (cancelled)=\"onSearchTools()\"\n      ></pry-edit-named-query>\n    </ng-container>\n    <ng-template #noEdit>\n      <ng-container *ngIf=\"isSearchCriteria && !(loading$ | async); else noSearch\">\n        <pry-toggle\n          class=\"o-pry-search-tools__content__toggle\"\n          [ngModel]=\"isSearchMono\"\n          (ngModelChange)=\"onMonoSearch()\"\n          [alwaysActive]=\"true\"\n          mode=\"action\"\n        >\n          {{ (isSearchMono ? '@pry.search.button.mono' : '@pry.search.button.multi') | i18n }}\n        </pry-toggle>\n        <div class=\"o-pry-search-tools__content__full\">\n          <ng-container *ngIf=\"isSearchMono; else isMultiSearch\">\n            <pry-search-mono-class></pry-search-mono-class>\n          </ng-container>\n          <ng-template #isMultiSearch>\n            <pry-search-multi-class></pry-search-multi-class>\n          </ng-template>\n        </div>\n\n        <div class=\"o-pry-search-tools__content__button-search\">\n          <ng-container *ngIf=\"isSearchCriteria\">\n            <pry-choose-widget (selected)=\"selectWidget($event)\"></pry-choose-widget>\n          </ng-container>\n          <button class=\"a-btn a-btn--primary\" (click)=\"onSearchTools()\" *ngIf=\"!isSearchCriteria\">\n            {{ '@pry.search.button.cancel' | i18n }}\n          </button>\n          <button\n            [disabled]=\"\n              (!(searchMultiClassValid$ | async) && !isSearchMono) || (!(searchMonoClassValid$ | async) && isSearchMono)\n            \"\n            class=\"a-btn a-btn--primary\"\n            (click)=\"onSearch()\"\n          >\n            <pry-icon iconSvg=\"search-line\"></pry-icon>\n            {{ '@pry.search.button.search' | i18n }}\n          </button>\n        </div>\n      </ng-container>\n    </ng-template>\n\n    <ng-template #noSearch>\n      <div class=\"o-pry-search-tools__content__full\">\n        <pry-search-home\n          class=\"o-pry-search-home\"\n          [isMoreList]=\"isMoreList\"\n          [searchFulltextTpl]=\"searchFulltextTpl\"\n          (changeListView)=\"onChangeListView($event)\"\n          (changeSearchCriteria)=\"onSearchCriteria()\"\n        ></pry-search-home>\n        <ng-template #searchFulltextTpl>\n          <pry-search-fulltext mode=\"vertical\" (searchChange)=\"onSearchFulltextChange($event)\"></pry-search-fulltext>\n        </ng-template>\n      </div>\n    </ng-template>\n  </div>\n  <div class=\"o-pry-search-tools__footer\" [class.is-close]=\"searchToolsClose\">\n    <pry-save-query-button\n      [editInProgress]=\"editInProgress$ | async\"\n      [currentEdit]=\"currentEdit$ | async\"\n      [currentEditType]=\"currentEditType$ | async\"\n      [fulltextValid]=\"isSearchFulltextValid\"\n      [multiValid]=\"searchMultiClassValid$ | async\"\n      [monoValid]=\"searchMonoClassValid$ | async\"\n      [isNotFulltext]=\"isSearchCriteria\"\n      [isMonoSearch]=\"isSearchMono\"\n      [fulltextSearch]=\"searchFulltextTemp\"\n    ></pry-save-query-button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.PryToggleComponent, selector: "pry-toggle", inputs: ["alwaysActive", "disabled", "mode", "size", "dir", "leftword", "rightword"] }, { kind: "component", type: i3.PryShareComponent, selector: "pry-share", inputs: ["labelProperty", "valueProperty"] }, { kind: "component", type: PrySearchHomeComponent, selector: "pry-search-home", inputs: ["searchFulltextTpl", "isMoreList"], outputs: ["changeListView", "changeSearchCriteria"] }, { kind: "component", type: PrySearchMonoClassComponent, selector: "pry-search-mono-class" }, { kind: "component", type: PrySearchMultiClassComponent, selector: "pry-search-multi-class" }, { kind: "component", type: PrySearchFulltextComponent, selector: "pry-search-fulltext", inputs: ["mode", "launchButton", "currentEdit"], outputs: ["searchChange"] }, { kind: "component", type: PrySaveQueryButtonComponent, selector: "pry-save-query-button", inputs: ["editInProgress", "currentEdit", "currentEditType", "fulltextValid", "multiValid", "monoValid", "isNotFulltext", "isMonoSearch", "fulltextSearch", "saveDisabled"] }, { kind: "component", type: EditNamedQueryComponent, selector: "pry-edit-named-query", inputs: ["fromWidget"], outputs: ["searchFulltextChange", "cancelled", "searched"] }, { kind: "component", type: ChooseWidgetComponent, selector: "pry-choose-widget", inputs: ["panelOpen", "mode", "width"], outputs: ["selected"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: PrySearchToolsComponent, selector: "pry-search-tools", host: { properties: { "class.o-pry-search-tools-wrapper": "this.class", "class.is-close": "this.searchToolsClose" } }, ngImport: i0, template: "<div\n  class=\"o-pry-search-tools\"\n  [class.is-close]=\"searchToolsClose\"\n  [class.is-mono]=\"isNewMono || (isEditMono$ | async)\"\n  >\n  @if (((editInProgress$ | async) && !(isRename$ | async)) || isSearchCriteria) {\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--icon-text -back a-tooltip\"\n      (click)=\"onSearchTools()\"\n      aria-pressed=\"false\"\n      [attr.data-tooltip]=\"'@pry.search.button.backSearch' | i18n\"\n      data-tooltip-position=\"bottom\"\n      >\n      <pry-icon iconSvg=\"arrow_back\" [width]=\"24\" [height]=\"24\" [animation]=\"false\"></pry-icon>\n      <span>{{ '@pry.search.button.backSearch' | i18n }}</span>\n    </button>\n  }\n  <div class=\"o-pry-search-tools__content\" [class.is-close]=\"searchToolsClose\">\n    @if (((editInProgress$ | async) && !(isRename$ | async)) || isSearchCriteria) {\n      <button\n        class=\"a-btn a-btn--icon-text -link-like u-self-end\"\n        (click)=\"reset()\"\n        id=\"btn_reset\"\n        >\n        <pry-icon iconSvg=\"reset\" [width]=\"18\" [height]=\"18\"></pry-icon>\n        {{ '@pry.search.button.reset' | i18n }}\n      </button>\n    }\n    @if (editInProgress$ | async) {\n      <pry-share [ngModel]=\"(currentEdit$ | async)?.visibility\" (ngModelChange)=\"updateVisibility($event)\"></pry-share>\n    }\n    @if ((editInProgress$ | async) && !(isRename$ | async) && !(loading$ | async)) {\n      <pry-edit-named-query\n        (searchFulltextChange)=\"onSearchFulltextChange($event)\"\n        (cancelled)=\"onSearchTools()\"\n      ></pry-edit-named-query>\n    } @else {\n      @if (isSearchCriteria && !(loading$ | async)) {\n        <pry-toggle\n          class=\"o-pry-search-tools__content__toggle\"\n          [ngModel]=\"isSearchMono\"\n          (ngModelChange)=\"onMonoSearch()\"\n          [alwaysActive]=\"true\"\n          mode=\"action\"\n          >\n          {{ (isSearchMono ? '@pry.search.button.mono' : '@pry.search.button.multi') | i18n }}\n        </pry-toggle>\n        <div class=\"o-pry-search-tools__content__full\">\n          @if (isSearchMono) {\n            <pry-search-mono-class></pry-search-mono-class>\n          } @else {\n            <pry-search-multi-class></pry-search-multi-class>\n          }\n        </div>\n        <div class=\"o-pry-search-tools__content__button-search\">\n          @if (isSearchCriteria) {\n            <pry-choose-widget (selected)=\"selectWidget($event)\"></pry-choose-widget>\n          }\n          @if (!isSearchCriteria) {\n            <button class=\"a-btn a-btn--primary\" (click)=\"onSearchTools()\">\n              {{ '@pry.search.button.cancel' | i18n }}\n            </button>\n          }\n          <button\n            [disabled]=\"\n              (!(searchMultiClassValid$ | async) && !isSearchMono) || (!(searchMonoClassValid$ | async) && isSearchMono)\n            \"\n            class=\"a-btn a-btn--primary\"\n            (click)=\"onSearch()\"\n            >\n            <pry-icon iconSvg=\"search-line\"></pry-icon>\n            {{ '@pry.search.button.search' | i18n }}\n          </button>\n        </div>\n      } @else {\n        <div class=\"o-pry-search-tools__content__full\">\n          <pry-search-home\n            class=\"o-pry-search-home\"\n            [isMoreList]=\"isMoreList\"\n            [searchFulltextTpl]=\"searchFulltextTpl\"\n            (changeListView)=\"onChangeListView($event)\"\n            (changeSearchCriteria)=\"onSearchCriteria()\"\n          ></pry-search-home>\n          <ng-template #searchFulltextTpl>\n            <pry-search-fulltext mode=\"vertical\" (searchChange)=\"onSearchFulltextChange($event)\"></pry-search-fulltext>\n          </ng-template>\n        </div>\n      }\n    }\n\n  </div>\n  <div class=\"o-pry-search-tools__footer\" [class.is-close]=\"searchToolsClose\">\n    <pry-save-query-button\n      [editInProgress]=\"editInProgress$ | async\"\n      [currentEdit]=\"currentEdit$ | async\"\n      [currentEditType]=\"currentEditType$ | async\"\n      [fulltextValid]=\"isSearchFulltextValid\"\n      [multiValid]=\"searchMultiClassValid$ | async\"\n      [monoValid]=\"searchMonoClassValid$ | async\"\n      [isNotFulltext]=\"isSearchCriteria\"\n      [isMonoSearch]=\"isSearchMono\"\n      [fulltextSearch]=\"searchFulltextTemp\"\n    ></pry-save-query-button>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: i3.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.PryToggleComponent, selector: "pry-toggle", inputs: ["alwaysActive", "disabled", "mode", "size", "dir", "leftword", "rightword"] }, { kind: "component", type: i3.PryShareComponent, selector: "pry-share", inputs: ["labelProperty", "valueProperty"] }, { kind: "component", type: PrySearchHomeComponent, selector: "pry-search-home", inputs: ["searchFulltextTpl", "isMoreList"], outputs: ["changeListView", "changeSearchCriteria"] }, { kind: "component", type: PrySearchMonoClassComponent, selector: "pry-search-mono-class" }, { kind: "component", type: PrySearchMultiClassComponent, selector: "pry-search-multi-class" }, { kind: "component", type: PrySearchFulltextComponent, selector: "pry-search-fulltext", inputs: ["mode", "launchButton", "currentEdit"], outputs: ["searchChange"] }, { kind: "component", type: PrySaveQueryButtonComponent, selector: "pry-save-query-button", inputs: ["editInProgress", "currentEdit", "currentEditType", "fulltextValid", "multiValid", "monoValid", "isNotFulltext", "isMonoSearch", "fulltextSearch", "saveDisabled"] }, { kind: "component", type: EditNamedQueryComponent, selector: "pry-edit-named-query", inputs: ["fromWidget"], outputs: ["searchFulltextChange", "cancelled", "searched"] }, { kind: "component", type: ChooseWidgetComponent, selector: "pry-choose-widget", inputs: ["panelOpen", "mode", "width"], outputs: ["selected"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PrySearchToolsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-search-tools', template: "<div\n  class=\"o-pry-search-tools\"\n  [class.is-close]=\"searchToolsClose\"\n  [class.is-mono]=\"isNewMono || (isEditMono$ | async)\"\n>\n  <button\n    type=\"button\"\n    class=\"a-btn a-btn--icon-text -back a-tooltip\"\n    (click)=\"onSearchTools()\"\n    aria-pressed=\"false\"\n    *ngIf=\"((editInProgress$ | async) && !(isRename$ | async)) || isSearchCriteria\"\n    [attr.data-tooltip]=\"'@pry.search.button.backSearch' | i18n\"\n    data-tooltip-position=\"bottom\"\n  >\n    <pry-icon iconSvg=\"arrow_back\" [width]=\"24\" [height]=\"24\" [animation]=\"false\"></pry-icon>\n    <span>{{ '@pry.search.button.backSearch' | i18n }}</span>\n  </button>\n  <div class=\"o-pry-search-tools__content\" [class.is-close]=\"searchToolsClose\">\n    <button\n      *ngIf=\"((editInProgress$ | async) && !(isRename$ | async)) || isSearchCriteria\"\n      class=\"a-btn a-btn--icon-text -link-like u-self-end\"\n      (click)=\"reset()\"\n      id=\"btn_reset\"\n    >\n      <pry-icon iconSvg=\"reset\" [width]=\"18\" [height]=\"18\"></pry-icon>\n      {{ '@pry.search.button.reset' | i18n }}\n    </button>\n    <ng-container *ngIf=\"editInProgress$ | async\">\n      <pry-share [ngModel]=\"(currentEdit$ | async)?.visibility\" (ngModelChange)=\"updateVisibility($event)\"></pry-share>\n    </ng-container>\n    <ng-container *ngIf=\"(editInProgress$ | async) && !(isRename$ | async) && !(loading$ | async); else noEdit\">\n      <pry-edit-named-query\n        (searchFulltextChange)=\"onSearchFulltextChange($event)\"\n        (cancelled)=\"onSearchTools()\"\n      ></pry-edit-named-query>\n    </ng-container>\n    <ng-template #noEdit>\n      <ng-container *ngIf=\"isSearchCriteria && !(loading$ | async); else noSearch\">\n        <pry-toggle\n          class=\"o-pry-search-tools__content__toggle\"\n          [ngModel]=\"isSearchMono\"\n          (ngModelChange)=\"onMonoSearch()\"\n          [alwaysActive]=\"true\"\n          mode=\"action\"\n        >\n          {{ (isSearchMono ? '@pry.search.button.mono' : '@pry.search.button.multi') | i18n }}\n        </pry-toggle>\n        <div class=\"o-pry-search-tools__content__full\">\n          <ng-container *ngIf=\"isSearchMono; else isMultiSearch\">\n            <pry-search-mono-class></pry-search-mono-class>\n          </ng-container>\n          <ng-template #isMultiSearch>\n            <pry-search-multi-class></pry-search-multi-class>\n          </ng-template>\n        </div>\n\n        <div class=\"o-pry-search-tools__content__button-search\">\n          <ng-container *ngIf=\"isSearchCriteria\">\n            <pry-choose-widget (selected)=\"selectWidget($event)\"></pry-choose-widget>\n          </ng-container>\n          <button class=\"a-btn a-btn--primary\" (click)=\"onSearchTools()\" *ngIf=\"!isSearchCriteria\">\n            {{ '@pry.search.button.cancel' | i18n }}\n          </button>\n          <button\n            [disabled]=\"\n              (!(searchMultiClassValid$ | async) && !isSearchMono) || (!(searchMonoClassValid$ | async) && isSearchMono)\n            \"\n            class=\"a-btn a-btn--primary\"\n            (click)=\"onSearch()\"\n          >\n            <pry-icon iconSvg=\"search-line\"></pry-icon>\n            {{ '@pry.search.button.search' | i18n }}\n          </button>\n        </div>\n      </ng-container>\n    </ng-template>\n\n    <ng-template #noSearch>\n      <div class=\"o-pry-search-tools__content__full\">\n        <pry-search-home\n          class=\"o-pry-search-home\"\n          [isMoreList]=\"isMoreList\"\n          [searchFulltextTpl]=\"searchFulltextTpl\"\n          (changeListView)=\"onChangeListView($event)\"\n          (changeSearchCriteria)=\"onSearchCriteria()\"\n        ></pry-search-home>\n        <ng-template #searchFulltextTpl>\n          <pry-search-fulltext mode=\"vertical\" (searchChange)=\"onSearchFulltextChange($event)\"></pry-search-fulltext>\n        </ng-template>\n      </div>\n    </ng-template>\n  </div>\n  <div class=\"o-pry-search-tools__footer\" [class.is-close]=\"searchToolsClose\">\n    <pry-save-query-button\n      [editInProgress]=\"editInProgress$ | async\"\n      [currentEdit]=\"currentEdit$ | async\"\n      [currentEditType]=\"currentEditType$ | async\"\n      [fulltextValid]=\"isSearchFulltextValid\"\n      [multiValid]=\"searchMultiClassValid$ | async\"\n      [monoValid]=\"searchMonoClassValid$ | async\"\n      [isNotFulltext]=\"isSearchCriteria\"\n      [isMonoSearch]=\"isSearchMono\"\n      [fulltextSearch]=\"searchFulltextTemp\"\n    ></pry-save-query-button>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'pry-search-tools', template: "<div\n  class=\"o-pry-search-tools\"\n  [class.is-close]=\"searchToolsClose\"\n  [class.is-mono]=\"isNewMono || (isEditMono$ | async)\"\n  >\n  @if (((editInProgress$ | async) && !(isRename$ | async)) || isSearchCriteria) {\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--icon-text -back a-tooltip\"\n      (click)=\"onSearchTools()\"\n      aria-pressed=\"false\"\n      [attr.data-tooltip]=\"'@pry.search.button.backSearch' | i18n\"\n      data-tooltip-position=\"bottom\"\n      >\n      <pry-icon iconSvg=\"arrow_back\" [width]=\"24\" [height]=\"24\" [animation]=\"false\"></pry-icon>\n      <span>{{ '@pry.search.button.backSearch' | i18n }}</span>\n    </button>\n  }\n  <div class=\"o-pry-search-tools__content\" [class.is-close]=\"searchToolsClose\">\n    @if (((editInProgress$ | async) && !(isRename$ | async)) || isSearchCriteria) {\n      <button\n        class=\"a-btn a-btn--icon-text -link-like u-self-end\"\n        (click)=\"reset()\"\n        id=\"btn_reset\"\n        >\n        <pry-icon iconSvg=\"reset\" [width]=\"18\" [height]=\"18\"></pry-icon>\n        {{ '@pry.search.button.reset' | i18n }}\n      </button>\n    }\n    @if (editInProgress$ | async) {\n      <pry-share [ngModel]=\"(currentEdit$ | async)?.visibility\" (ngModelChange)=\"updateVisibility($event)\"></pry-share>\n    }\n    @if ((editInProgress$ | async) && !(isRename$ | async) && !(loading$ | async)) {\n      <pry-edit-named-query\n        (searchFulltextChange)=\"onSearchFulltextChange($event)\"\n        (cancelled)=\"onSearchTools()\"\n      ></pry-edit-named-query>\n    } @else {\n      @if (isSearchCriteria && !(loading$ | async)) {\n        <pry-toggle\n          class=\"o-pry-search-tools__content__toggle\"\n          [ngModel]=\"isSearchMono\"\n          (ngModelChange)=\"onMonoSearch()\"\n          [alwaysActive]=\"true\"\n          mode=\"action\"\n          >\n          {{ (isSearchMono ? '@pry.search.button.mono' : '@pry.search.button.multi') | i18n }}\n        </pry-toggle>\n        <div class=\"o-pry-search-tools__content__full\">\n          @if (isSearchMono) {\n            <pry-search-mono-class></pry-search-mono-class>\n          } @else {\n            <pry-search-multi-class></pry-search-multi-class>\n          }\n        </div>\n        <div class=\"o-pry-search-tools__content__button-search\">\n          @if (isSearchCriteria) {\n            <pry-choose-widget (selected)=\"selectWidget($event)\"></pry-choose-widget>\n          }\n          @if (!isSearchCriteria) {\n            <button class=\"a-btn a-btn--primary\" (click)=\"onSearchTools()\">\n              {{ '@pry.search.button.cancel' | i18n }}\n            </button>\n          }\n          <button\n            [disabled]=\"\n              (!(searchMultiClassValid$ | async) && !isSearchMono) || (!(searchMonoClassValid$ | async) && isSearchMono)\n            \"\n            class=\"a-btn a-btn--primary\"\n            (click)=\"onSearch()\"\n            >\n            <pry-icon iconSvg=\"search-line\"></pry-icon>\n            {{ '@pry.search.button.search' | i18n }}\n          </button>\n        </div>\n      } @else {\n        <div class=\"o-pry-search-tools__content__full\">\n          <pry-search-home\n            class=\"o-pry-search-home\"\n            [isMoreList]=\"isMoreList\"\n            [searchFulltextTpl]=\"searchFulltextTpl\"\n            (changeListView)=\"onChangeListView($event)\"\n            (changeSearchCriteria)=\"onSearchCriteria()\"\n          ></pry-search-home>\n          <ng-template #searchFulltextTpl>\n            <pry-search-fulltext mode=\"vertical\" (searchChange)=\"onSearchFulltextChange($event)\"></pry-search-fulltext>\n          </ng-template>\n        </div>\n      }\n    }\n\n  </div>\n  <div class=\"o-pry-search-tools__footer\" [class.is-close]=\"searchToolsClose\">\n    <pry-save-query-button\n      [editInProgress]=\"editInProgress$ | async\"\n      [currentEdit]=\"currentEdit$ | async\"\n      [currentEditType]=\"currentEditType$ | async\"\n      [fulltextValid]=\"isSearchFulltextValid\"\n      [multiValid]=\"searchMultiClassValid$ | async\"\n      [monoValid]=\"searchMonoClassValid$ | async\"\n      [isNotFulltext]=\"isSearchCriteria\"\n      [isMonoSearch]=\"isSearchMono\"\n      [fulltextSearch]=\"searchFulltextTemp\"\n    ></pry-save-query-button>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.Store }], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class.o-pry-search-tools-wrapper']
@@ -1837,13 +1837,13 @@ class EditNamedQueryModalComponent extends SubscriptionnerDirective {
             document.getElementsByTagName('pry-search-tools').length >
             0);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: EditNamedQueryModalComponent, deps: [{ token: i1.Store }, { token: i2$1.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: EditNamedQueryModalComponent, deps: [{ token: i1.Store }, { token: i2.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: EditNamedQueryModalComponent, selector: "pry-edit-named-query-modal", viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div>\n    <pry-search-tools></pry-search-tools>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: PrySearchToolsComponent, selector: "pry-search-tools" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: EditNamedQueryModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pry-edit-named-query-modal', template: "<ng-template #template>\n  <div>\n    <pry-search-tools></pry-search-tools>\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: i1.Store }, { type: i2$1.Overlay }, { type: i0.ViewContainerRef }], propDecorators: { template: [{
+        }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Overlay }, { type: i0.ViewContainerRef }], propDecorators: { template: [{
                 type: ViewChild,
                 args: ['template', { read: TemplateRef }]
             }] } });
@@ -2280,9 +2280,9 @@ class SearchMonoClassService {
                     id,
                     parentId: parentId ?? null,
                     type: 'ATTRIBUTE',
-                    attribute: cond.attribute,
-                    operator: cond.operator,
-                    value: cond.value,
+                    attribute: cond?.attribute,
+                    operator: cond?.operator,
+                    value: cond?.value,
                     pattern: this.getPatternForField(field),
                     isDate: field.type === FieldType.INSTANT
                 }