@provoly/dashboard 0.20.3 → 0.20.5

package/fesm2022/provoly-dashboard-search.mjs

@@ -817,11 +817,11 @@ class PrySearchConditionComponent {
             .pipe(filter((cond) => cond !== null));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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: "16.2.12", 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      [labelTranslate]=\"true\"\n      [items]=\"operatorOptions$ | async\"\n      [itemsAsOption]=\"true\"\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: ["labelTranslate", "baseTranslate", "translationFn", "translationFnArgs", "clearable", "multiple", "multipleClearRight", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "items", "itemsAsOption", "bindData", "bindValue", "bindLabel", "bindIcon", "iconSize", "templateLabel", "templateOption", "autocomplete"] }, { kind: "component", type: 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: "14.0.0", version: "16.2.12", 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", "readonly", "autocomplete", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "elementRef"], outputs: ["searched", "cleared"] }, { 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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      [labelTranslate]=\"true\"\n      [items]=\"operatorOptions$ | async\"\n      [itemsAsOption]=\"true\"\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    <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" }]
         }], ctorParameters: function () { return [{ 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: "16.2.12", 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: "16.2.12", 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    [itemsAsOption]=\"true\"\n    [items]=\"variableAttributes$ | async\"\n    [ngModel]=\"(order$ | async)?.attribute ?? 'null'\"\n    bindLabel=\"name\"\n    bindValue=\"id\"\n    class=\"a-pry-select\"\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: ["labelTranslate", "baseTranslate", "translationFn", "translationFnArgs", "clearable", "multiple", "multipleClearRight", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "items", "itemsAsOption", "bindData", "bindValue", "bindLabel", "bindIcon", "iconSize", "templateLabel", "templateOption", "autocomplete"] }, { kind: "component", type: 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: "14.0.0", version: "16.2.12", 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", "readonly", "autocomplete", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "elementRef"], outputs: ["searched", "cleared"] }, { 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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    [itemsAsOption]=\"true\"\n    [items]=\"variableAttributes$ | async\"\n    [ngModel]=\"(order$ | async)?.attribute ?? 'null'\"\n    bindLabel=\"name\"\n    bindValue=\"id\"\n    class=\"a-pry-select\"\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  <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" }]
         }], ctorParameters: function () { return [{ 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: "16.2.12", ngImport: i0, type: PrySearchMonoClassComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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        [itemsAsOption]=\"true\"\n        bindValue=\"id\"\n        [ngModel]=\"monoClassId$ | async\"\n        (ngModelChange)=\"onChangeClass($event)\"\n        [templateLabel]=\"optionTpl\"\n        [templateOption]=\"optionTpl\"\n        class=\"a-pry-select\"\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: ["labelTranslate", "baseTranslate", "translationFn", "translationFnArgs", "clearable", "multiple", "multipleClearRight", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "items", "itemsAsOption", "bindData", "bindValue", "bindLabel", "bindIcon", "iconSize", "templateLabel", "templateOption", "autocomplete"] }, { kind: "component", type: 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: "14.0.0", version: "16.2.12", 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", "readonly", "autocomplete", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "elementRef"], outputs: ["searched", "cleared"] }, { 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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        [itemsAsOption]=\"true\"\n        bindValue=\"id\"\n        [ngModel]=\"monoClassId$ | async\"\n        (ngModelChange)=\"onChangeClass($event)\"\n        [templateLabel]=\"optionTpl\"\n        [templateOption]=\"optionTpl\"\n        class=\"a-pry-select\"\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        <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" }]
         }], ctorParameters: function () { return [{ type: i1.Store }]; } });
 
 class SearchMultiClassService {
@@ -1275,11 +1275,11 @@ class MultiClassConditionComponent {
         return this.form.get('operator')?.value === 'INSIDE' || this.form.get('operator')?.value === 'OUTSIDE';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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: "16.2.12", 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            [itemsAsOption]=\"true\"\n            [labelTranslate]=\"true\"\n            bindValue=\"operator\"\n            bindLabel=\"translation\"\n            class=\"a-pry-select\"\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: ["labelTranslate", "baseTranslate", "translationFn", "translationFnArgs", "clearable", "multiple", "multipleClearRight", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "items", "itemsAsOption", "bindData", "bindValue", "bindLabel", "bindIcon", "iconSize", "templateLabel", "templateOption", "autocomplete"] }, { kind: "component", type: 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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", "readonly", "autocomplete", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "elementRef"], outputs: ["searched", "cleared"] }, { 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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            [itemsAsOption]=\"true\"\n            [labelTranslate]=\"true\"\n            bindValue=\"operator\"\n            bindLabel=\"translation\"\n            class=\"a-pry-select\"\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" }]
+            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: function () { return [{ type: i1.Store }, { type: SearchMultiClassService }, { type: i2$1.Overlay }, { type: i0.ViewContainerRef }]; }, propDecorators: { fieldSelectionTpl: [{
                 type: ViewChild,
                 args: ['fieldSelectionTpl', { read: TemplateRef }]
@@ -1896,6 +1896,7 @@ const enTranslations = {
                 startWith: 'Start with',
                 endWith: 'End with',
                 notEqualsString: 'Different from',
+                notEqualsNumber: 'Different from',
                 equalsString: 'Match',
                 equalsNumber: 'Equal to',
                 greaterThanNumber: 'Greater than',
@@ -2034,6 +2035,7 @@ const frTranslations = {
                 startWith: 'Commence par',
                 endWith: 'Fini par',
                 notEqualsString: 'Différent de',
+                notEqualsNumber: 'Différent de',
                 equalsString: 'Exactement',
                 equalsNumber: 'Egal',
                 greaterThanNumber: 'Supérieur à',