@pepperi-addons/ngx-lib 0.5.0-ng16.2 → 0.5.0-ng16.3
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.
- package/esm2022/list/list.component.mjs +5 -6
- package/esm2022/list/list.module.mjs +5 -7
- package/esm2022/smart-filters/multi-select-filter/multi-select-filter.component.mjs +7 -9
- package/esm2022/smart-filters/smart-filters.module.mjs +5 -5
- package/fesm2022/pepperi-addons-ngx-lib-list.mjs +6 -7
- package/fesm2022/pepperi-addons-ngx-lib-list.mjs.map +1 -1
- package/fesm2022/pepperi-addons-ngx-lib-smart-filters.mjs +17 -19
- package/fesm2022/pepperi-addons-ngx-lib-smart-filters.mjs.map +1 -1
- package/list/list.module.d.ts +1 -2
- package/package.json +17 -17
- package/smart-filters/smart-filters.module.d.ts +10 -11
|
@@ -6,30 +6,27 @@ import * as i2 from '@angular/forms';
|
|
|
6
6
|
import { Validators, FormControl, ReactiveFormsModule, FormBuilder } from '@angular/forms';
|
|
7
7
|
import { FlexLayoutModule } from '@ngbracket/ngx-layout';
|
|
8
8
|
import { MatCommonModule } from '@angular/material/core';
|
|
9
|
-
import * as i5$2 from '@angular/material/checkbox';
|
|
10
9
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
11
|
-
import * as i4$
|
|
10
|
+
import * as i4$2 from '@angular/material/chips';
|
|
12
11
|
import { MatChipsModule } from '@angular/material/chips';
|
|
13
|
-
import * as i5$
|
|
12
|
+
import * as i5$2 from '@angular/material/expansion';
|
|
14
13
|
import { MatExpansionModule } from '@angular/material/expansion';
|
|
15
14
|
import * as i6$1 from '@angular/material/icon';
|
|
16
15
|
import { MatIconModule } from '@angular/material/icon';
|
|
17
16
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
18
17
|
import { MatInputModule } from '@angular/material/input';
|
|
19
|
-
import * as i4
|
|
18
|
+
import * as i4 from '@angular/material/radio';
|
|
20
19
|
import { MatRadioModule } from '@angular/material/radio';
|
|
21
|
-
import * as i6 from 'ngx-virtual-scroller';
|
|
22
|
-
import { VirtualScrollerComponent, VirtualScrollerModule } from 'ngx-virtual-scroller';
|
|
23
20
|
import * as i3 from '@pepperi-addons/ngx-lib';
|
|
24
21
|
import { BaseDestroyerDirective, PepNgxLibModule } from '@pepperi-addons/ngx-lib';
|
|
25
22
|
import { PepCheckboxModule } from '@pepperi-addons/ngx-lib/checkbox';
|
|
26
23
|
import * as i5$1 from '@pepperi-addons/ngx-lib/date';
|
|
27
24
|
import { PepDateModule } from '@pepperi-addons/ngx-lib/date';
|
|
28
|
-
import * as
|
|
25
|
+
import * as i6 from '@pepperi-addons/ngx-lib/select';
|
|
29
26
|
import { PepSelectModule } from '@pepperi-addons/ngx-lib/select';
|
|
30
27
|
import * as i5 from '@pepperi-addons/ngx-lib/textbox';
|
|
31
28
|
import { PepTextboxModule } from '@pepperi-addons/ngx-lib/textbox';
|
|
32
|
-
import * as
|
|
29
|
+
import * as i7 from '@pepperi-addons/ngx-lib/search';
|
|
33
30
|
import { PepSearchModule } from '@pepperi-addons/ngx-lib/search';
|
|
34
31
|
import { PepButtonModule } from '@pepperi-addons/ngx-lib/button';
|
|
35
32
|
import * as i1$1 from '@pepperi-addons/ngx-lib/icon';
|
|
@@ -39,7 +36,8 @@ import * as i3$2 from '@angular/cdk/bidi';
|
|
|
39
36
|
import { distinctUntilChanged, startWith, map } from 'rxjs/operators';
|
|
40
37
|
import * as i2$1 from '@ngx-translate/core';
|
|
41
38
|
import * as i3$1 from '@ngbracket/ngx-layout/flex';
|
|
42
|
-
import
|
|
39
|
+
import { VirtualScrollerComponent } from 'ngx-virtual-scroller';
|
|
40
|
+
import * as i4$1 from '@ngbracket/ngx-layout/extended';
|
|
43
41
|
|
|
44
42
|
class IPepSmartFilterOperator {
|
|
45
43
|
id;
|
|
@@ -741,7 +739,7 @@ class PepTextFilterComponent extends BaseFilterComponent {
|
|
|
741
739
|
}
|
|
742
740
|
}
|
|
743
741
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepTextFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
744
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PepTextFilterComponent, selector: "pep-text-filter", usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" [fxLayout]=\"inline ? 'row' : 'column'\" [fxLayoutGap]=\"inline ? '.5rem' : '0rem'\">\n <pep-select [fxFlex]=\"inline ? operatorWidth : null\" [key]=\"'typeOperator'\" [value]=\"operator.id\"\n [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n [options]=\"chooseTypeOptions\" (valueChange)=\"onOperatorChanged($event)\">\n </pep-select>\n <ng-container *ngIf=\"operator !== PepSmartFilterVariableOperators.EqualsToVariable && \n operator !== PepSmartFilterVariableOperators.InVariable &&\n operator !== PepSmartFilterVariableOperators.IsEmpty &&\n operator !== PepSmartFilterVariableOperators.IsNotEmpty\">\n <pep-textbox [fxFlex]=\"inline ? firstControlWidth : null\" [form]=\"form\" [key]=\"firstControlKey\"\n [label]=\"'SMART_FILTERS.VALUE' | translate\" [renderError]=\"false\" [renderTitle]=\"renderTitle\"\n [type]=\"field.type\" [value]=\"firstControl?.value || ''\"\n (valueChange)=\"onValueChanged()\">\n </pep-textbox>\n </ng-container>\n <ng-container *ngIf=\"operator === PepSmartFilterVariableOperators.EqualsToVariable ||\n operator === PepSmartFilterVariableOperators.InVariable\">\n <pep-select [fxFlex]=\"inline ? firstControlWidth : null\" [key]=\"firstControlKey\"\n [value]=\"firstControl?.value || ''\" [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\"\n [emptyOption]=\"false\" [options]=\"variableFieldOptions\" (valueChange)=\"onVariableChanged($event)\">\n </pep-select>\n </ng-container>\n <!-- <ng-container *ngIf=\"operator === PepSmartFilterVariableOperators.IsEmpty || \n operator === PepSmartFilterVariableOperators.IsNotEmpty\">\n\n </ng-container> -->\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3$1.DefaultLayoutGapDirective, selector: " [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md], [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md], [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i3$1.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type:
|
|
742
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PepTextFilterComponent, selector: "pep-text-filter", usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" [fxLayout]=\"inline ? 'row' : 'column'\" [fxLayoutGap]=\"inline ? '.5rem' : '0rem'\">\n <pep-select [fxFlex]=\"inline ? operatorWidth : null\" [key]=\"'typeOperator'\" [value]=\"operator.id\"\n [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n [options]=\"chooseTypeOptions\" (valueChange)=\"onOperatorChanged($event)\">\n </pep-select>\n <ng-container *ngIf=\"operator !== PepSmartFilterVariableOperators.EqualsToVariable && \n operator !== PepSmartFilterVariableOperators.InVariable &&\n operator !== PepSmartFilterVariableOperators.IsEmpty &&\n operator !== PepSmartFilterVariableOperators.IsNotEmpty\">\n <pep-textbox [fxFlex]=\"inline ? firstControlWidth : null\" [form]=\"form\" [key]=\"firstControlKey\"\n [label]=\"'SMART_FILTERS.VALUE' | translate\" [renderError]=\"false\" [renderTitle]=\"renderTitle\"\n [type]=\"field.type\" [value]=\"firstControl?.value || ''\"\n (valueChange)=\"onValueChanged()\">\n </pep-textbox>\n </ng-container>\n <ng-container *ngIf=\"operator === PepSmartFilterVariableOperators.EqualsToVariable ||\n operator === PepSmartFilterVariableOperators.InVariable\">\n <pep-select [fxFlex]=\"inline ? firstControlWidth : null\" [key]=\"firstControlKey\"\n [value]=\"firstControl?.value || ''\" [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\"\n [emptyOption]=\"false\" [options]=\"variableFieldOptions\" (valueChange)=\"onVariableChanged($event)\">\n </pep-select>\n </ng-container>\n <!-- <ng-container *ngIf=\"operator === PepSmartFilterVariableOperators.IsEmpty || \n operator === PepSmartFilterVariableOperators.IsNotEmpty\">\n\n </ng-container> -->\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3$1.DefaultLayoutGapDirective, selector: " [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md], [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md], [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i3$1.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i6.PepSelectComponent, selector: "pep-select", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "placeholder", "placeholderWhenDisabled", "autoSortOptions", "options", "visible", "emptyOption", "form", "layoutType", "parentFieldKey", "isActive", "showTitle", "renderTitle", "typeaheadDebounceInterval", "addValueToOptionsIfNotExist"], outputs: ["valueChange", "validationChange"] }, { kind: "component", type: i5.PepTextboxComponent, selector: "pep-textbox", inputs: ["key", "value", "minFractionDigits", "maxFractionDigits", "accessory", "label", "placeholder", "type", "mandatory", "disabled", "readonly", "maxFieldCharacters", "hint", "textColor", "xAlignment", "rowSpan", "minValue", "maxValue", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType", "parentFieldKey", "regex", "regexError", "isInFocus"], outputs: ["valueChange", "keyup", "validationChange"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
|
|
745
743
|
}
|
|
746
744
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepTextFilterComponent, decorators: [{
|
|
747
745
|
type: Component,
|
|
@@ -803,7 +801,7 @@ class PepBooleanFilterComponent extends BaseFilterComponent {
|
|
|
803
801
|
}
|
|
804
802
|
}
|
|
805
803
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepBooleanFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
806
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PepBooleanFilterComponent, selector: "pep-boolean-filter", inputs: { options: "options" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"inline; then inlineBlock; else notInlineBlock\"></ng-container>\n<ng-template #inlineBlock>\n <ng-container *ngIf=\"variableFieldOptions?.length\">\n <div fxLayout=\"row\" fxLayoutGap=\".5rem\">\n <pep-select [fxFlex]=\"operatorWidth\" [key]=\"'typeOperator'\" [value]=\"operator.id\"\n [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n [options]=\"chooseTypeOptions\" (valueChange)=\"onOperatorChanged($event)\">\n </pep-select>\n <ng-container *ngIf=\"operator === PepSmartFilterVariableOperators.EqualsToVariable || \n operator === PepSmartFilterVariableOperators.NotEqualsToVariable\">\n <pep-select [fxFlex]=\"valueWidth\" [key]=\"firstControlKey\" [value]=\"firstControl?.value || ''\"\n [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n [options]=\"variableFieldOptions\" (valueChange)=\"onValueChanged($event)\">\n </pep-select>\n </ng-container>\n <ng-container *ngIf=\"operator !== PepSmartFilterVariableOperators.EqualsToVariable && \n operator !== PepSmartFilterVariableOperators.NotEqualsToVariable\">\n <pep-select [fxFlex]=\"valueWidth\" [value]=\"firstControl?.value || ''\" xAlignment=\"left\"\n [options]=\"options\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n (valueChange)=\"onValueChanged($event)\">\n </pep-select>\n </ng-container>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!variableFieldOptions || !variableFieldOptions.length\">\n <pep-select [fxFlex]=\"valueWidth\" [value]=\"firstControl?.value || ''\" xAlignment=\"left\" [options]=\"options\"\n [renderTitle]=\"renderTitle\" [emptyOption]=\"false\" (valueChange)=\"onValueChanged($event)\">\n </pep-select>\n </ng-container>\n</ng-template>\n<ng-template #notInlineBlock>\n <div [formGroup]=\"form\">\n <mat-radio-group class=\"radio-group \" [formControlName]=\"firstControlKey\">\n <mat-radio-button class=\"pep-radio-button md pep-input no-default-background\" value=\"true\">\n <span class=\"body-sm ellipsis\">{{ 'CHECKBOX.TRUE' | translate }}</span>\n </mat-radio-button>\n <mat-radio-button class=\"pep-radio-button md pep-input no-default-background\" value=\"false\">\n <span class=\"body-sm ellipsis\">{{ 'CHECKBOX.FALSE' | translate }}</span>\n </mat-radio-button>\n </mat-radio-group>\n </div>\n</ng-template>", styles: [".radio-group{display:flex;flex-direction:column}.radio-group .pep-radio-button.pep-input{height:2.25rem;display:flex}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3$1.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3$1.DefaultLayoutGapDirective, selector: " [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md], [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md], [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i3$1.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i4
|
|
804
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PepBooleanFilterComponent, selector: "pep-boolean-filter", inputs: { options: "options" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"inline; then inlineBlock; else notInlineBlock\"></ng-container>\n<ng-template #inlineBlock>\n <ng-container *ngIf=\"variableFieldOptions?.length\">\n <div fxLayout=\"row\" fxLayoutGap=\".5rem\">\n <pep-select [fxFlex]=\"operatorWidth\" [key]=\"'typeOperator'\" [value]=\"operator.id\"\n [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n [options]=\"chooseTypeOptions\" (valueChange)=\"onOperatorChanged($event)\">\n </pep-select>\n <ng-container *ngIf=\"operator === PepSmartFilterVariableOperators.EqualsToVariable || \n operator === PepSmartFilterVariableOperators.NotEqualsToVariable\">\n <pep-select [fxFlex]=\"valueWidth\" [key]=\"firstControlKey\" [value]=\"firstControl?.value || ''\"\n [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n [options]=\"variableFieldOptions\" (valueChange)=\"onValueChanged($event)\">\n </pep-select>\n </ng-container>\n <ng-container *ngIf=\"operator !== PepSmartFilterVariableOperators.EqualsToVariable && \n operator !== PepSmartFilterVariableOperators.NotEqualsToVariable\">\n <pep-select [fxFlex]=\"valueWidth\" [value]=\"firstControl?.value || ''\" xAlignment=\"left\"\n [options]=\"options\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n (valueChange)=\"onValueChanged($event)\">\n </pep-select>\n </ng-container>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!variableFieldOptions || !variableFieldOptions.length\">\n <pep-select [fxFlex]=\"valueWidth\" [value]=\"firstControl?.value || ''\" xAlignment=\"left\" [options]=\"options\"\n [renderTitle]=\"renderTitle\" [emptyOption]=\"false\" (valueChange)=\"onValueChanged($event)\">\n </pep-select>\n </ng-container>\n</ng-template>\n<ng-template #notInlineBlock>\n <div [formGroup]=\"form\">\n <mat-radio-group class=\"radio-group \" [formControlName]=\"firstControlKey\">\n <mat-radio-button class=\"pep-radio-button md pep-input no-default-background\" value=\"true\">\n <span class=\"body-sm ellipsis\">{{ 'CHECKBOX.TRUE' | translate }}</span>\n </mat-radio-button>\n <mat-radio-button class=\"pep-radio-button md pep-input no-default-background\" value=\"false\">\n <span class=\"body-sm ellipsis\">{{ 'CHECKBOX.FALSE' | translate }}</span>\n </mat-radio-button>\n </mat-radio-group>\n </div>\n</ng-template>", styles: [".radio-group{display:flex;flex-direction:column}.radio-group .pep-radio-button.pep-input{height:2.25rem;display:flex}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3$1.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3$1.DefaultLayoutGapDirective, selector: " [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md], [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md], [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i3$1.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i4.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i4.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i6.PepSelectComponent, selector: "pep-select", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "placeholder", "placeholderWhenDisabled", "autoSortOptions", "options", "visible", "emptyOption", "form", "layoutType", "parentFieldKey", "isActive", "showTitle", "renderTitle", "typeaheadDebounceInterval", "addValueToOptionsIfNotExist"], outputs: ["valueChange", "validationChange"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
|
|
807
805
|
}
|
|
808
806
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepBooleanFilterComponent, decorators: [{
|
|
809
807
|
type: Component,
|
|
@@ -973,7 +971,7 @@ class PepDateFilterComponent extends BaseFilterComponent {
|
|
|
973
971
|
}
|
|
974
972
|
}
|
|
975
973
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepDateFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
976
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PepDateFilterComponent, selector: "pep-date-filter", usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" [fxLayout]=\"inline ? 'row' : 'column'\" [fxLayoutGap]=\"inline ? '.5rem' : '0rem'\">\n <ng-container>\n <pep-select [key]=\"'timeOperator'\" [value]=\"operator.id\" [label]=\"'SMART_FILTERS.CHOOSE_TIME' | translate\"\n [renderTitle]=\"renderTitle\" [emptyOption]=\"false\" [options]=\"chooseTimeOptions\"\n [fxFlex]=\"inline ? operatorWidth : null\" (valueChange)=\"onOperatorChanged($event)\">\n </pep-select>\n </ng-container>\n <div *ngIf=\"operator === PepSmartFilterOperators.InTheLast ||\n operator === PepSmartFilterAdditionalOperators.InTheLastCalendar || \n operator === PepSmartFilterOperators.NotInTheLast ||\n operator === PepSmartFilterAdditionalOperators.NotInTheLastCalendar || \n operator === PepSmartFilterOperators.DueIn ||\n operator === PepSmartFilterOperators.NotDueIn\" fxLayout=\"row\" fxLayout.xs=\"column\"\n [fxLayoutGap]=\"inline ? '.5rem' : '1rem'\" [fxFlex]=\"inline ? fieldsWidth : null\">\n <!-- Amount -->\n <pep-textbox [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.AMOUNT' | translate\"\n [renderError]=\"false\" [renderTitle]=\"renderTitle\" fxFlex=\"50%\" [type]=\"'int'\"\n [value]=\"firstControl?.value || ''\"\n (valueChange)=\"onDateValueChanged()\">\n </pep-textbox>\n <!-- Time unit -->\n <pep-select [form]=\"form\" [key]=\"'timeUnit'\" [value]=\"operatorUnit?.id\"\n [label]=\"'SMART_FILTERS.TIME_UNIT' | translate\" [renderTitle]=\"renderTitle\" fxFlex=\"50%\"\n [emptyOption]=\"false\" [options]=\"chooseTimeUnitOptions\" (valueChange)=\"onTimeUnitChanged($event)\">\n </pep-select>\n </div>\n <div pepRtlDirection *ngIf=\"operator === PepSmartFilterOperators.DateRange\" fxLayout=\"row\" fxLayout.xs=\"column\"\n [fxLayoutGap]=\"inline ? '.5rem' : '1rem'\" [fxFlex]=\"inline ? fieldsWidth : null\">\n <!-- Start date -->\n <pep-date [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.START_DATE' | translate\"\n [renderError]=\"false\" [renderTitle]=\"renderTitle\" fxFlex=\"50%\"\n [type]=\"field.type === 'date' ? 'date' : 'datetime'\" [value]=\"firstControl?.value || ''\"\n [maxDateValue]=\"secondControl?.value\" (valueChange)=\"onDateValueChanged()\">\n </pep-date>\n <!-- End date -->\n <pep-date [form]=\"form\" [key]=\"secondControlKey\" [label]=\"'SMART_FILTERS.END_DATE' | translate\"\n [renderError]=\"false\" [renderTitle]=\"renderTitle\" fxFlex=\"50%\"\n [type]=\"field.type === 'date' ? 'date' : 'datetime'\" [value]=\"secondControl?.value || ''\"\n [minDateValue]=\"firstControl?.value\" (valueChange)=\"onDateValueChanged()\">\n </pep-date>\n </div>\n <ng-container *ngIf=\"operator === PepSmartFilterOperators.On\">\n <!-- Choose a date -->\n <pep-date [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.CHOOSE_DATE' | translate\"\n [renderError]=\"false\" [renderTitle]=\"renderTitle\" [type]=\"field.type === 'date' ? 'date' : 'datetime'\"\n [fxFlex]=\"inline ? fieldsWidth : null\" [value]=\"firstControl?.value || ''\"\n (valueChange)=\"onDateValueChanged()\">\n </pep-date>\n </ng-container>\n <div pepRtlDirection *ngIf=\"operator === PepSmartFilterVariableOperators.DateRangeVariable\" fxLayout=\"row\"\n fxLayout.xs=\"column\" fxLayoutGap=\".5rem\" fxFlex=\"fieldsWidth\">\n <pep-select fxFlex=\"50%\" [key]=\"firstControlKey\" [value]=\"firstControl?.value || ''\"\n [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n [options]=\"variableFieldOptions\" (valueChange)=\"onVariableChanged($event)\"></pep-select>\n <pep-select fxFlex=\"50%\" [key]=\"secondControlKey\" [value]=\"secondControl?.value || ''\"\n [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n [options]=\"variableFieldOptions\" (valueChange)=\"onSecondVariableChanged($event)\"></pep-select>\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3$1.DefaultLayoutGapDirective, selector: " [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md], [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md], [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i3$1.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i3.PepRtlDirectionDirective, selector: "[pepRtlDirection]" }, { kind: "component", type: i5$1.PepDateComponent, selector: "pep-date", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "textColor", "xAlignment", "rowSpan", "chooseTime", "visible", "minValue", "maxValue", "minDateValue", "maxDateValue", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType"], outputs: ["valueChange", "validationChange"] }, { kind: "component", type:
|
|
974
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PepDateFilterComponent, selector: "pep-date-filter", usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" [fxLayout]=\"inline ? 'row' : 'column'\" [fxLayoutGap]=\"inline ? '.5rem' : '0rem'\">\n <ng-container>\n <pep-select [key]=\"'timeOperator'\" [value]=\"operator.id\" [label]=\"'SMART_FILTERS.CHOOSE_TIME' | translate\"\n [renderTitle]=\"renderTitle\" [emptyOption]=\"false\" [options]=\"chooseTimeOptions\"\n [fxFlex]=\"inline ? operatorWidth : null\" (valueChange)=\"onOperatorChanged($event)\">\n </pep-select>\n </ng-container>\n <div *ngIf=\"operator === PepSmartFilterOperators.InTheLast ||\n operator === PepSmartFilterAdditionalOperators.InTheLastCalendar || \n operator === PepSmartFilterOperators.NotInTheLast ||\n operator === PepSmartFilterAdditionalOperators.NotInTheLastCalendar || \n operator === PepSmartFilterOperators.DueIn ||\n operator === PepSmartFilterOperators.NotDueIn\" fxLayout=\"row\" fxLayout.xs=\"column\"\n [fxLayoutGap]=\"inline ? '.5rem' : '1rem'\" [fxFlex]=\"inline ? fieldsWidth : null\">\n <!-- Amount -->\n <pep-textbox [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.AMOUNT' | translate\"\n [renderError]=\"false\" [renderTitle]=\"renderTitle\" fxFlex=\"50%\" [type]=\"'int'\"\n [value]=\"firstControl?.value || ''\"\n (valueChange)=\"onDateValueChanged()\">\n </pep-textbox>\n <!-- Time unit -->\n <pep-select [form]=\"form\" [key]=\"'timeUnit'\" [value]=\"operatorUnit?.id\"\n [label]=\"'SMART_FILTERS.TIME_UNIT' | translate\" [renderTitle]=\"renderTitle\" fxFlex=\"50%\"\n [emptyOption]=\"false\" [options]=\"chooseTimeUnitOptions\" (valueChange)=\"onTimeUnitChanged($event)\">\n </pep-select>\n </div>\n <div pepRtlDirection *ngIf=\"operator === PepSmartFilterOperators.DateRange\" fxLayout=\"row\" fxLayout.xs=\"column\"\n [fxLayoutGap]=\"inline ? '.5rem' : '1rem'\" [fxFlex]=\"inline ? fieldsWidth : null\">\n <!-- Start date -->\n <pep-date [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.START_DATE' | translate\"\n [renderError]=\"false\" [renderTitle]=\"renderTitle\" fxFlex=\"50%\"\n [type]=\"field.type === 'date' ? 'date' : 'datetime'\" [value]=\"firstControl?.value || ''\"\n [maxDateValue]=\"secondControl?.value\" (valueChange)=\"onDateValueChanged()\">\n </pep-date>\n <!-- End date -->\n <pep-date [form]=\"form\" [key]=\"secondControlKey\" [label]=\"'SMART_FILTERS.END_DATE' | translate\"\n [renderError]=\"false\" [renderTitle]=\"renderTitle\" fxFlex=\"50%\"\n [type]=\"field.type === 'date' ? 'date' : 'datetime'\" [value]=\"secondControl?.value || ''\"\n [minDateValue]=\"firstControl?.value\" (valueChange)=\"onDateValueChanged()\">\n </pep-date>\n </div>\n <ng-container *ngIf=\"operator === PepSmartFilterOperators.On\">\n <!-- Choose a date -->\n <pep-date [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.CHOOSE_DATE' | translate\"\n [renderError]=\"false\" [renderTitle]=\"renderTitle\" [type]=\"field.type === 'date' ? 'date' : 'datetime'\"\n [fxFlex]=\"inline ? fieldsWidth : null\" [value]=\"firstControl?.value || ''\"\n (valueChange)=\"onDateValueChanged()\">\n </pep-date>\n </ng-container>\n <div pepRtlDirection *ngIf=\"operator === PepSmartFilterVariableOperators.DateRangeVariable\" fxLayout=\"row\"\n fxLayout.xs=\"column\" fxLayoutGap=\".5rem\" fxFlex=\"fieldsWidth\">\n <pep-select fxFlex=\"50%\" [key]=\"firstControlKey\" [value]=\"firstControl?.value || ''\"\n [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n [options]=\"variableFieldOptions\" (valueChange)=\"onVariableChanged($event)\"></pep-select>\n <pep-select fxFlex=\"50%\" [key]=\"secondControlKey\" [value]=\"secondControl?.value || ''\"\n [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n [options]=\"variableFieldOptions\" (valueChange)=\"onSecondVariableChanged($event)\"></pep-select>\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3$1.DefaultLayoutGapDirective, selector: " [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md], [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md], [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i3$1.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i3.PepRtlDirectionDirective, selector: "[pepRtlDirection]" }, { kind: "component", type: i5$1.PepDateComponent, selector: "pep-date", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "textColor", "xAlignment", "rowSpan", "chooseTime", "visible", "minValue", "maxValue", "minDateValue", "maxDateValue", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType"], outputs: ["valueChange", "validationChange"] }, { kind: "component", type: i6.PepSelectComponent, selector: "pep-select", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "placeholder", "placeholderWhenDisabled", "autoSortOptions", "options", "visible", "emptyOption", "form", "layoutType", "parentFieldKey", "isActive", "showTitle", "renderTitle", "typeaheadDebounceInterval", "addValueToOptionsIfNotExist"], outputs: ["valueChange", "validationChange"] }, { kind: "component", type: i5.PepTextboxComponent, selector: "pep-textbox", inputs: ["key", "value", "minFractionDigits", "maxFractionDigits", "accessory", "label", "placeholder", "type", "mandatory", "disabled", "readonly", "maxFieldCharacters", "hint", "textColor", "xAlignment", "rowSpan", "minValue", "maxValue", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType", "parentFieldKey", "regex", "regexError", "isInFocus"], outputs: ["valueChange", "keyup", "validationChange"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
|
|
977
975
|
}
|
|
978
976
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepDateFilterComponent, decorators: [{
|
|
979
977
|
type: Component,
|
|
@@ -1151,11 +1149,11 @@ class PepMultiSelectFilterComponent extends BaseFilterComponent {
|
|
|
1151
1149
|
}
|
|
1152
1150
|
}
|
|
1153
1151
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepMultiSelectFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1154
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PepMultiSelectFilterComponent, selector: "pep-multi-select-filter", viewQueries: [{ propertyName: "optionsContainer", first: true, predicate: ["optionsContainer"], descendants: true }, { propertyName: "virtualScroller", first: true, predicate: VirtualScrollerComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"inline\">\n <ng-container *ngIf=\"variableFieldOptions?.length\">\n <div fxLayout=\"row\" fxLayoutGap=\".5rem\">\n <pep-select [fxFlex]=\"operatorWidth\" [key]=\"'typeOperator'\" [value]=\"operator.id\"\n [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n [options]=\"chooseTypeOptions\" (valueChange)=\"onOperatorChanged($event)\">\n </pep-select>\n <ng-container *ngIf=\"operator === PepSmartFilterVariableOperators.EqualsToVariable || \n operator === PepSmartFilterVariableOperators.NotEqualsToVariable || \n operator === PepSmartFilterVariableOperators.InVariable\">\n <pep-select [fxFlex]=\"valueWidth\" [key]=\"firstControlKey\" [value]=\"firstControl?.value || ''\"\n [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n [options]=\"variableFieldOptions\" (valueChange)=\"onValueChanged($event)\">\n </pep-select>\n </ng-container>\n <ng-container *ngIf=\"operator !== PepSmartFilterVariableOperators.EqualsToVariable && \n operator !== PepSmartFilterVariableOperators.NotEqualsToVariable &&\n operator !== PepSmartFilterVariableOperators.InVariable\">\n <pep-select [fxFlex]=\"valueWidth\" [label]=\"'Pepperi Multi Select'\" [type]=\"'multi'\"\n [value]=\"selected\" [xAlignment]=\"'left'\" [renderTitle]=\"renderTitle\" [options]='inlineOptions'\n (valueChange)=\"onMultiSelectChanged($event)\">\n </pep-select>\n </ng-container>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!variableFieldOptions || !variableFieldOptions.length\">\n <pep-select [label]=\"'Pepperi Multi Select'\" [type]=\"'multi'\" [value]=\"selected\"\n [xAlignment]=\"'left'\" [renderTitle]=\"renderTitle\" [options]='inlineOptions'\n (valueChange)=\"onMultiSelectChanged($event)\">\n </pep-select>\n </ng-container>\n</ng-container>\n<div *ngIf=\"!inline\" [formGroup]=\"form\">\n <pep-search *ngIf=\"options?.length > numberOptionsToShowSearch\" [searchControl]=\"searchControl\"\n [triggerOn]=\"'keydown'\" shrink=\"never\"></pep-search>\n <div pepRtlClass class=\"multi-select-options pep-border-top pep-border-bottom\"\n [ngClass]=\"{'with-no-search': options?.length <= numberOptionsToShowSearch}\">\n <div #optionsContainer class=\"flip-scroll\" pepRtlClass>\n <virtual-scroller #scroll [items]=\"filteredOptions$ | async\" [parentScroll]=\"optionsContainer\">\n <mat-checkbox *ngFor=\"let opt of scroll.viewPortItems\"\n class=\"pep-checkbox-container pep-input no-default-background md\" [title]=\"opt.value\"\n [checked]=\"opt.selected\" (change)=\"onOptionChange(opt, $event)\">\n <div class=\"title\">\n <span class=\"body-sm ellipsis\">{{ opt.value }}</span>\n <span *ngIf=\"opt.count\" class=\"color-dimmed body-xs ellipsis\">({{opt.count}})</span>\n </div>\n </mat-checkbox>\n <ng-container *ngIf=\"scroll.viewPortItems?.length === 0\">\n <span class=\"no-options body-sm ellipsis\" [title]=\"field.name\">\n {{ ( options.length > 0 ? \"SMART_FILTERS.NO_SEARCH_RESULTS\" : \"SMART_FILTERS.NO_OPTIONS\") |\n translate }}\n </span>\n </ng-container>\n </virtual-scroller>\n </div>\n </div>\n</div>", styles: [".multi-select-options{margin:var(--pep-spacing-sm, .5rem) calc(var(--pep-spacing-xs, .25rem) * -1) 0}.multi-select-options.with-no-search{margin:calc(var(--pep-spacing-sm, .5rem) * -1) calc(var(--pep-spacing-xs, .25rem) * -1) 0}.multi-select-options .no-options{display:flex;padding:var(--pep-spacing-sm, .5rem) var(--pep-spacing-md, .75rem)}.multi-select-options .flip-scroll{padding:var(--pep-spacing-sm, .5rem) var(--pep-spacing-xs, .25rem);min-height:3.25rem;max-height:34.75rem;direction:rtl}.multi-select-options .flip-scroll virtual-scroller{direction:ltr}.multi-select-options .flip-scroll.rtl{direction:ltr}.multi-select-options .flip-scroll.rtl virtual-scroller{direction:rtl}.multi-select-options .pep-checkbox-container{height:2.25rem;padding-inline-end:0}.multi-select-options .pep-checkbox-container ::ng-deep .mat-checkbox-layout,.multi-select-options .pep-checkbox-container ::ng-deep .mat-mdc-checkbox-layout{width:100%;height:100%;grid-template-columns:auto 1fr}.multi-select-options .pep-checkbox-container ::ng-deep .mat-checkbox-layout .mat-checkbox-label,.multi-select-options .pep-checkbox-container ::ng-deep .mat-checkbox-layout .mat-mdc-checkbox-label,.multi-select-options .pep-checkbox-container ::ng-deep .mat-mdc-checkbox-layout .mat-checkbox-label,.multi-select-options .pep-checkbox-container ::ng-deep .mat-mdc-checkbox-layout .mat-mdc-checkbox-label{align-self:center}.multi-select-options .pep-checkbox-container .title{display:grid;grid-auto-flow:column;justify-content:space-between;align-items:center;margin:0 var(--pep-spacing-xs, .25rem)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3$1.DefaultLayoutGapDirective, selector: " [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md], [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md], [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i3$1.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i4$2.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i5$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6.VirtualScrollerComponent, selector: "virtual-scroller,[virtualScroller]", inputs: ["executeRefreshOutsideAngularZone", "RTL", "useMarginInsteadOfTranslate", "ssrViewportWidth", "ssrViewportHeight", "compareItems", "checkResizeInterval", "modifyOverflowStyleOfParentScroll", "resizeBypassRefreshThreshold", "scrollAnimationTime", "scrollDebounceTime", "scrollThrottlingTime", "scrollbarHeight", "scrollbarWidth", "stripedTable", "horizontal", "enableUnequalChildrenSizes", "bufferAmount", "items", "parentScroll", "childWidth", "childHeight", "ssrChildWidth", "ssrChildHeight"], outputs: ["vsUpdate", "vsChange", "vsStart", "vsEnd"], exportAs: ["virtualScroller"] }, { kind: "directive", type: i3.PepRtlClassDirective, selector: "[pepRtlClass]" }, { kind: "component", type: i4.PepSelectComponent, selector: "pep-select", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "placeholder", "placeholderWhenDisabled", "autoSortOptions", "options", "visible", "emptyOption", "form", "layoutType", "parentFieldKey", "isActive", "showTitle", "renderTitle", "typeaheadDebounceInterval", "addValueToOptionsIfNotExist"], outputs: ["valueChange", "validationChange"] }, { kind: "component", type: i9.PepSearchComponent, selector: "pep-search", inputs: ["triggerOn", "autoCompleteTop", "autoCompleteValues", "shrink", "value", "searchControl", "useAsWebComponent", "sizeType"], outputs: ["search", "autocompleteChange", "stateChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
|
|
1152
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PepMultiSelectFilterComponent, selector: "pep-multi-select-filter", viewQueries: [{ propertyName: "optionsContainer", first: true, predicate: ["optionsContainer"], descendants: true }, { propertyName: "virtualScroller", first: true, predicate: VirtualScrollerComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"inline\">\n <ng-container *ngIf=\"variableFieldOptions?.length\">\n <div fxLayout=\"row\" fxLayoutGap=\".5rem\">\n <pep-select [fxFlex]=\"operatorWidth\" [key]=\"'typeOperator'\" [value]=\"operator.id\"\n [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n [options]=\"chooseTypeOptions\" (valueChange)=\"onOperatorChanged($event)\">\n </pep-select>\n <ng-container *ngIf=\"operator === PepSmartFilterVariableOperators.EqualsToVariable || \n operator === PepSmartFilterVariableOperators.NotEqualsToVariable || \n operator === PepSmartFilterVariableOperators.InVariable\">\n <pep-select [fxFlex]=\"valueWidth\" [key]=\"firstControlKey\" [value]=\"firstControl?.value || ''\"\n [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n [options]=\"variableFieldOptions\" (valueChange)=\"onValueChanged($event)\">\n </pep-select>\n </ng-container>\n <ng-container *ngIf=\"operator !== PepSmartFilterVariableOperators.EqualsToVariable && \n operator !== PepSmartFilterVariableOperators.NotEqualsToVariable &&\n operator !== PepSmartFilterVariableOperators.InVariable\">\n <pep-select [fxFlex]=\"valueWidth\" [label]=\"'Pepperi Multi Select'\" [type]=\"'multi'\"\n [value]=\"selected\" [xAlignment]=\"'left'\" [renderTitle]=\"renderTitle\" [options]='inlineOptions'\n (valueChange)=\"onMultiSelectChanged($event)\">\n </pep-select>\n </ng-container>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!variableFieldOptions || !variableFieldOptions.length\">\n <pep-select [label]=\"'Pepperi Multi Select'\" [type]=\"'multi'\" [value]=\"selected\"\n [xAlignment]=\"'left'\" [renderTitle]=\"renderTitle\" [options]='inlineOptions'\n (valueChange)=\"onMultiSelectChanged($event)\">\n </pep-select>\n </ng-container>\n</ng-container>\n<div *ngIf=\"!inline\" [formGroup]=\"form\">\n <pep-search *ngIf=\"options?.length > numberOptionsToShowSearch\" [searchControl]=\"searchControl\"\n [triggerOn]=\"'keydown'\" shrink=\"never\"></pep-search>\n <div pepRtlClass class=\"multi-select-options pep-border-top pep-border-bottom\"\n [ngClass]=\"{'with-no-search': options?.length <= numberOptionsToShowSearch}\">\n <div #optionsContainer class=\"flip-scroll\" pepRtlClass>\n <!-- <virtual-scroller #scroll [items]=\"filteredOptions$ | async\" [parentScroll]=\"optionsContainer\">\n <mat-checkbox *ngFor=\"let opt of scroll.viewPortItems\"\n class=\"pep-checkbox-container pep-input no-default-background md\" [title]=\"opt.value\"\n [checked]=\"opt.selected\" (change)=\"onOptionChange(opt, $event)\">\n <div class=\"title\">\n <span class=\"body-sm ellipsis\">{{ opt.value }}</span>\n <span *ngIf=\"opt.count\" class=\"color-dimmed body-xs ellipsis\">({{opt.count}})</span>\n </div>\n </mat-checkbox>\n <ng-container *ngIf=\"scroll.viewPortItems?.length === 0\">\n <span class=\"no-options body-sm ellipsis\" [title]=\"field.name\">\n {{ ( options.length > 0 ? \"SMART_FILTERS.NO_SEARCH_RESULTS\" : \"SMART_FILTERS.NO_OPTIONS\") |\n translate }}\n </span>\n </ng-container>\n </virtual-scroller> -->\n </div>\n </div>\n</div>", styles: [".multi-select-options{margin:var(--pep-spacing-sm, .5rem) calc(var(--pep-spacing-xs, .25rem) * -1) 0}.multi-select-options.with-no-search{margin:calc(var(--pep-spacing-sm, .5rem) * -1) calc(var(--pep-spacing-xs, .25rem) * -1) 0}.multi-select-options .no-options{display:flex;padding:var(--pep-spacing-sm, .5rem) var(--pep-spacing-md, .75rem)}.multi-select-options .flip-scroll{padding:var(--pep-spacing-sm, .5rem) var(--pep-spacing-xs, .25rem);min-height:3.25rem;max-height:34.75rem;direction:rtl}.multi-select-options .flip-scroll virtual-scroller{direction:ltr}.multi-select-options .flip-scroll.rtl{direction:ltr}.multi-select-options .flip-scroll.rtl virtual-scroller{direction:rtl}.multi-select-options .pep-checkbox-container{height:2.25rem;padding-inline-end:0}.multi-select-options .pep-checkbox-container ::ng-deep .mat-checkbox-layout,.multi-select-options .pep-checkbox-container ::ng-deep .mat-mdc-checkbox-layout{width:100%;height:100%;grid-template-columns:auto 1fr}.multi-select-options .pep-checkbox-container ::ng-deep .mat-checkbox-layout .mat-checkbox-label,.multi-select-options .pep-checkbox-container ::ng-deep .mat-checkbox-layout .mat-mdc-checkbox-label,.multi-select-options .pep-checkbox-container ::ng-deep .mat-mdc-checkbox-layout .mat-checkbox-label,.multi-select-options .pep-checkbox-container ::ng-deep .mat-mdc-checkbox-layout .mat-mdc-checkbox-label{align-self:center}.multi-select-options .pep-checkbox-container .title{display:grid;grid-auto-flow:column;justify-content:space-between;align-items:center;margin:0 var(--pep-spacing-xs, .25rem)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3$1.DefaultLayoutGapDirective, selector: " [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md], [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md], [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i3$1.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i4$1.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i3.PepRtlClassDirective, selector: "[pepRtlClass]" }, { kind: "component", type: i6.PepSelectComponent, selector: "pep-select", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "placeholder", "placeholderWhenDisabled", "autoSortOptions", "options", "visible", "emptyOption", "form", "layoutType", "parentFieldKey", "isActive", "showTitle", "renderTitle", "typeaheadDebounceInterval", "addValueToOptionsIfNotExist"], outputs: ["valueChange", "validationChange"] }, { kind: "component", type: i7.PepSearchComponent, selector: "pep-search", inputs: ["triggerOn", "autoCompleteTop", "autoCompleteValues", "shrink", "value", "searchControl", "useAsWebComponent", "sizeType"], outputs: ["search", "autocompleteChange", "stateChange"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
|
|
1155
1153
|
}
|
|
1156
1154
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepMultiSelectFilterComponent, decorators: [{
|
|
1157
1155
|
type: Component,
|
|
1158
|
-
args: [{ selector: 'pep-multi-select-filter', template: "<ng-container *ngIf=\"inline\">\n <ng-container *ngIf=\"variableFieldOptions?.length\">\n <div fxLayout=\"row\" fxLayoutGap=\".5rem\">\n <pep-select [fxFlex]=\"operatorWidth\" [key]=\"'typeOperator'\" [value]=\"operator.id\"\n [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n [options]=\"chooseTypeOptions\" (valueChange)=\"onOperatorChanged($event)\">\n </pep-select>\n <ng-container *ngIf=\"operator === PepSmartFilterVariableOperators.EqualsToVariable || \n operator === PepSmartFilterVariableOperators.NotEqualsToVariable || \n operator === PepSmartFilterVariableOperators.InVariable\">\n <pep-select [fxFlex]=\"valueWidth\" [key]=\"firstControlKey\" [value]=\"firstControl?.value || ''\"\n [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n [options]=\"variableFieldOptions\" (valueChange)=\"onValueChanged($event)\">\n </pep-select>\n </ng-container>\n <ng-container *ngIf=\"operator !== PepSmartFilterVariableOperators.EqualsToVariable && \n operator !== PepSmartFilterVariableOperators.NotEqualsToVariable &&\n operator !== PepSmartFilterVariableOperators.InVariable\">\n <pep-select [fxFlex]=\"valueWidth\" [label]=\"'Pepperi Multi Select'\" [type]=\"'multi'\"\n [value]=\"selected\" [xAlignment]=\"'left'\" [renderTitle]=\"renderTitle\" [options]='inlineOptions'\n (valueChange)=\"onMultiSelectChanged($event)\">\n </pep-select>\n </ng-container>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!variableFieldOptions || !variableFieldOptions.length\">\n <pep-select [label]=\"'Pepperi Multi Select'\" [type]=\"'multi'\" [value]=\"selected\"\n [xAlignment]=\"'left'\" [renderTitle]=\"renderTitle\" [options]='inlineOptions'\n (valueChange)=\"onMultiSelectChanged($event)\">\n </pep-select>\n </ng-container>\n</ng-container>\n<div *ngIf=\"!inline\" [formGroup]=\"form\">\n <pep-search *ngIf=\"options?.length > numberOptionsToShowSearch\" [searchControl]=\"searchControl\"\n [triggerOn]=\"'keydown'\" shrink=\"never\"></pep-search>\n <div pepRtlClass class=\"multi-select-options pep-border-top pep-border-bottom\"\n [ngClass]=\"{'with-no-search': options?.length <= numberOptionsToShowSearch}\">\n <div #optionsContainer class=\"flip-scroll\" pepRtlClass>\n <virtual-scroller #scroll [items]=\"filteredOptions$ | async\" [parentScroll]=\"optionsContainer\">\n <mat-checkbox *ngFor=\"let opt of scroll.viewPortItems\"\n class=\"pep-checkbox-container pep-input no-default-background md\" [title]=\"opt.value\"\n [checked]=\"opt.selected\" (change)=\"onOptionChange(opt, $event)\">\n <div class=\"title\">\n <span class=\"body-sm ellipsis\">{{ opt.value }}</span>\n <span *ngIf=\"opt.count\" class=\"color-dimmed body-xs ellipsis\">({{opt.count}})</span>\n </div>\n </mat-checkbox>\n <ng-container *ngIf=\"scroll.viewPortItems?.length === 0\">\n <span class=\"no-options body-sm ellipsis\" [title]=\"field.name\">\n {{ ( options.length > 0 ? \"SMART_FILTERS.NO_SEARCH_RESULTS\" : \"SMART_FILTERS.NO_OPTIONS\") |\n translate }}\n </span>\n </ng-container>\n </virtual-scroller
|
|
1156
|
+
args: [{ selector: 'pep-multi-select-filter', template: "<ng-container *ngIf=\"inline\">\n <ng-container *ngIf=\"variableFieldOptions?.length\">\n <div fxLayout=\"row\" fxLayoutGap=\".5rem\">\n <pep-select [fxFlex]=\"operatorWidth\" [key]=\"'typeOperator'\" [value]=\"operator.id\"\n [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n [options]=\"chooseTypeOptions\" (valueChange)=\"onOperatorChanged($event)\">\n </pep-select>\n <ng-container *ngIf=\"operator === PepSmartFilterVariableOperators.EqualsToVariable || \n operator === PepSmartFilterVariableOperators.NotEqualsToVariable || \n operator === PepSmartFilterVariableOperators.InVariable\">\n <pep-select [fxFlex]=\"valueWidth\" [key]=\"firstControlKey\" [value]=\"firstControl?.value || ''\"\n [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n [options]=\"variableFieldOptions\" (valueChange)=\"onValueChanged($event)\">\n </pep-select>\n </ng-container>\n <ng-container *ngIf=\"operator !== PepSmartFilterVariableOperators.EqualsToVariable && \n operator !== PepSmartFilterVariableOperators.NotEqualsToVariable &&\n operator !== PepSmartFilterVariableOperators.InVariable\">\n <pep-select [fxFlex]=\"valueWidth\" [label]=\"'Pepperi Multi Select'\" [type]=\"'multi'\"\n [value]=\"selected\" [xAlignment]=\"'left'\" [renderTitle]=\"renderTitle\" [options]='inlineOptions'\n (valueChange)=\"onMultiSelectChanged($event)\">\n </pep-select>\n </ng-container>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!variableFieldOptions || !variableFieldOptions.length\">\n <pep-select [label]=\"'Pepperi Multi Select'\" [type]=\"'multi'\" [value]=\"selected\"\n [xAlignment]=\"'left'\" [renderTitle]=\"renderTitle\" [options]='inlineOptions'\n (valueChange)=\"onMultiSelectChanged($event)\">\n </pep-select>\n </ng-container>\n</ng-container>\n<div *ngIf=\"!inline\" [formGroup]=\"form\">\n <pep-search *ngIf=\"options?.length > numberOptionsToShowSearch\" [searchControl]=\"searchControl\"\n [triggerOn]=\"'keydown'\" shrink=\"never\"></pep-search>\n <div pepRtlClass class=\"multi-select-options pep-border-top pep-border-bottom\"\n [ngClass]=\"{'with-no-search': options?.length <= numberOptionsToShowSearch}\">\n <div #optionsContainer class=\"flip-scroll\" pepRtlClass>\n <!-- <virtual-scroller #scroll [items]=\"filteredOptions$ | async\" [parentScroll]=\"optionsContainer\">\n <mat-checkbox *ngFor=\"let opt of scroll.viewPortItems\"\n class=\"pep-checkbox-container pep-input no-default-background md\" [title]=\"opt.value\"\n [checked]=\"opt.selected\" (change)=\"onOptionChange(opt, $event)\">\n <div class=\"title\">\n <span class=\"body-sm ellipsis\">{{ opt.value }}</span>\n <span *ngIf=\"opt.count\" class=\"color-dimmed body-xs ellipsis\">({{opt.count}})</span>\n </div>\n </mat-checkbox>\n <ng-container *ngIf=\"scroll.viewPortItems?.length === 0\">\n <span class=\"no-options body-sm ellipsis\" [title]=\"field.name\">\n {{ ( options.length > 0 ? \"SMART_FILTERS.NO_SEARCH_RESULTS\" : \"SMART_FILTERS.NO_OPTIONS\") |\n translate }}\n </span>\n </ng-container>\n </virtual-scroller> -->\n </div>\n </div>\n</div>", styles: [".multi-select-options{margin:var(--pep-spacing-sm, .5rem) calc(var(--pep-spacing-xs, .25rem) * -1) 0}.multi-select-options.with-no-search{margin:calc(var(--pep-spacing-sm, .5rem) * -1) calc(var(--pep-spacing-xs, .25rem) * -1) 0}.multi-select-options .no-options{display:flex;padding:var(--pep-spacing-sm, .5rem) var(--pep-spacing-md, .75rem)}.multi-select-options .flip-scroll{padding:var(--pep-spacing-sm, .5rem) var(--pep-spacing-xs, .25rem);min-height:3.25rem;max-height:34.75rem;direction:rtl}.multi-select-options .flip-scroll virtual-scroller{direction:ltr}.multi-select-options .flip-scroll.rtl{direction:ltr}.multi-select-options .flip-scroll.rtl virtual-scroller{direction:rtl}.multi-select-options .pep-checkbox-container{height:2.25rem;padding-inline-end:0}.multi-select-options .pep-checkbox-container ::ng-deep .mat-checkbox-layout,.multi-select-options .pep-checkbox-container ::ng-deep .mat-mdc-checkbox-layout{width:100%;height:100%;grid-template-columns:auto 1fr}.multi-select-options .pep-checkbox-container ::ng-deep .mat-checkbox-layout .mat-checkbox-label,.multi-select-options .pep-checkbox-container ::ng-deep .mat-checkbox-layout .mat-mdc-checkbox-label,.multi-select-options .pep-checkbox-container ::ng-deep .mat-mdc-checkbox-layout .mat-checkbox-label,.multi-select-options .pep-checkbox-container ::ng-deep .mat-mdc-checkbox-layout .mat-mdc-checkbox-label{align-self:center}.multi-select-options .pep-checkbox-container .title{display:grid;grid-auto-flow:column;justify-content:space-between;align-items:center;margin:0 var(--pep-spacing-xs, .25rem)}\n"] }]
|
|
1159
1157
|
}], propDecorators: { optionsContainer: [{
|
|
1160
1158
|
type: ViewChild,
|
|
1161
1159
|
args: ['optionsContainer']
|
|
@@ -1278,7 +1276,7 @@ class PepNumberFilterComponent extends BaseFilterComponent {
|
|
|
1278
1276
|
}
|
|
1279
1277
|
}
|
|
1280
1278
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepNumberFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1281
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PepNumberFilterComponent, selector: "pep-number-filter", usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" [fxLayout]=\"inline ? 'row' : 'column'\" [fxLayoutGap]=\"inline ? '.5rem' : '0rem'\">\n <ng-container>\n <pep-select [fxFlex]=\"inline ? operatorWidth : null\" [key]=\"'typeOperator'\" [value]=\"operator.id\"\n [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n [options]=\"chooseTypeOptions\" (valueChange)=\"onOperatorChanged($event)\">\n </pep-select>\n </ng-container>\n <ng-container *ngIf=\"operator === PepSmartFilterOperators.NumberRange\">\n <div fxLayout=\"row\" fxLayout.xs=\"column\" [fxLayoutGap]=\"inline ? '.5rem' : '1rem'\"\n [fxFlex]=\"inline ? fieldsWidth : null\">\n <!-- Min number -->\n <pep-textbox [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.MIN' | translate\"\n [renderError]=\"false\" [renderTitle]=\"renderTitle\" [type]=\"field.type\" fxFlex=\"50%\"\n [value]=\"firstControl?.value || ''\"\n [maxValue]=\"secondControl?.value || ''\" (valueChange)=\"onValueChanged()\">\n </pep-textbox>\n <!-- Max number -->\n <pep-textbox [form]=\"form\" [key]=\"secondControlKey\" [label]=\"'SMART_FILTERS.MAX' | translate\"\n [renderError]=\"false\" [renderTitle]=\"renderTitle\" [type]=\"field.type\" fxFlex=\"50%\"\n [value]=\"secondControl?.value || ''\"\n [minValue]=\"firstControl?.value || ''\" (valueChange)=\"onValueChanged()\">\n </pep-textbox>\n </div>\n </ng-container>\n <ng-container *ngIf=\"operator === PepSmartFilterVariableOperators.LessThanVariable || \n operator === PepSmartFilterVariableOperators.GreaterThanVariable || \n operator === PepSmartFilterVariableOperators.EqualsToVariable\">\n <pep-select [fxFlex]=\"inline ? fieldsWidth : null\" [key]=\"firstControlKey\" [value]=\"firstControl?.value || ''\"\n [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n [options]=\"variableFieldOptions\" (valueChange)=\"onVariableChanged($event)\">\n </pep-select>\n </ng-container>\n <ng-container *ngIf=\"operator !== PepSmartFilterOperators.NumberRange && operator !== PepSmartFilterVariableOperators.LessThanVariable &&\n operator !== PepSmartFilterVariableOperators.GreaterThanVariable && \n operator !== PepSmartFilterVariableOperators.EqualsToVariable\">\n <div [fxFlex]=\"inline ? fieldsWidth : null\">\n <!-- Amount -->\n <pep-textbox [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.AMOUNT' | translate\"\n [renderError]=\"false\" [renderTitle]=\"renderTitle\" [type]=\"field.type\"\n [value]=\"firstControl?.value || ''\" \n (valueChange)=\"onValueChanged()\">\n </pep-textbox>\n </div>\n </ng-container>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3$1.DefaultLayoutGapDirective, selector: " [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md], [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md], [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i3$1.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type:
|
|
1279
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PepNumberFilterComponent, selector: "pep-number-filter", usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" [fxLayout]=\"inline ? 'row' : 'column'\" [fxLayoutGap]=\"inline ? '.5rem' : '0rem'\">\n <ng-container>\n <pep-select [fxFlex]=\"inline ? operatorWidth : null\" [key]=\"'typeOperator'\" [value]=\"operator.id\"\n [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n [options]=\"chooseTypeOptions\" (valueChange)=\"onOperatorChanged($event)\">\n </pep-select>\n </ng-container>\n <ng-container *ngIf=\"operator === PepSmartFilterOperators.NumberRange\">\n <div fxLayout=\"row\" fxLayout.xs=\"column\" [fxLayoutGap]=\"inline ? '.5rem' : '1rem'\"\n [fxFlex]=\"inline ? fieldsWidth : null\">\n <!-- Min number -->\n <pep-textbox [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.MIN' | translate\"\n [renderError]=\"false\" [renderTitle]=\"renderTitle\" [type]=\"field.type\" fxFlex=\"50%\"\n [value]=\"firstControl?.value || ''\"\n [maxValue]=\"secondControl?.value || ''\" (valueChange)=\"onValueChanged()\">\n </pep-textbox>\n <!-- Max number -->\n <pep-textbox [form]=\"form\" [key]=\"secondControlKey\" [label]=\"'SMART_FILTERS.MAX' | translate\"\n [renderError]=\"false\" [renderTitle]=\"renderTitle\" [type]=\"field.type\" fxFlex=\"50%\"\n [value]=\"secondControl?.value || ''\"\n [minValue]=\"firstControl?.value || ''\" (valueChange)=\"onValueChanged()\">\n </pep-textbox>\n </div>\n </ng-container>\n <ng-container *ngIf=\"operator === PepSmartFilterVariableOperators.LessThanVariable || \n operator === PepSmartFilterVariableOperators.GreaterThanVariable || \n operator === PepSmartFilterVariableOperators.EqualsToVariable\">\n <pep-select [fxFlex]=\"inline ? fieldsWidth : null\" [key]=\"firstControlKey\" [value]=\"firstControl?.value || ''\"\n [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n [options]=\"variableFieldOptions\" (valueChange)=\"onVariableChanged($event)\">\n </pep-select>\n </ng-container>\n <ng-container *ngIf=\"operator !== PepSmartFilterOperators.NumberRange && operator !== PepSmartFilterVariableOperators.LessThanVariable &&\n operator !== PepSmartFilterVariableOperators.GreaterThanVariable && \n operator !== PepSmartFilterVariableOperators.EqualsToVariable\">\n <div [fxFlex]=\"inline ? fieldsWidth : null\">\n <!-- Amount -->\n <pep-textbox [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.AMOUNT' | translate\"\n [renderError]=\"false\" [renderTitle]=\"renderTitle\" [type]=\"field.type\"\n [value]=\"firstControl?.value || ''\" \n (valueChange)=\"onValueChanged()\">\n </pep-textbox>\n </div>\n </ng-container>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3$1.DefaultLayoutGapDirective, selector: " [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md], [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md], [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i3$1.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i6.PepSelectComponent, selector: "pep-select", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "placeholder", "placeholderWhenDisabled", "autoSortOptions", "options", "visible", "emptyOption", "form", "layoutType", "parentFieldKey", "isActive", "showTitle", "renderTitle", "typeaheadDebounceInterval", "addValueToOptionsIfNotExist"], outputs: ["valueChange", "validationChange"] }, { kind: "component", type: i5.PepTextboxComponent, selector: "pep-textbox", inputs: ["key", "value", "minFractionDigits", "maxFractionDigits", "accessory", "label", "placeholder", "type", "mandatory", "disabled", "readonly", "maxFieldCharacters", "hint", "textColor", "xAlignment", "rowSpan", "minValue", "maxValue", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType", "parentFieldKey", "regex", "regexError", "isInFocus"], outputs: ["valueChange", "keyup", "validationChange"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
|
|
1282
1280
|
}
|
|
1283
1281
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepNumberFilterComponent, decorators: [{
|
|
1284
1282
|
type: Component,
|
|
@@ -1394,7 +1392,7 @@ class PepSmartFiltersComponent {
|
|
|
1394
1392
|
this.raiseFiltersChange();
|
|
1395
1393
|
}
|
|
1396
1394
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepSmartFiltersComponent, deps: [{ token: i0.ElementRef }, { token: i3.PepLayoutService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1397
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PepSmartFiltersComponent, selector: "pep-smart-filters", inputs: { title: "title", filters: "filters", fields: "fields", useAsWebComponent: "useAsWebComponent" }, outputs: { filtersChange: "filtersChange", fieldToggleChange: "fieldToggleChange" }, ngImport: i0, template: "<div class=\"smart-filters-container\" dir=\"{{ layoutService.isRtl() ? 'rtl' : 'ltr' }}\">\n <div *ngIf=\"fields?.length > 0\" class=\"title\">\n <span class=\"body-md bold\">{{ title?.length > 0 ? title : (\"SMART_FILTERS.TITLE\" | translate)}}</span>\n <mat-chip-option *ngIf=\"filtersDataMap.size > 0\" [selectable]=\"false\" [removable]=\"true\" (click)=\"onFiltersClear()\"\n class=\"clear-filter pep-button chip xs weak\">\n <span class=\"body-xs ellipsis \">\n {{ \"ACTIONS.CLEAR\" | translate}}\n </span>\n </mat-chip-option>\n </div>\n\n <mat-accordion [displayMode]=\"'flat'\" [multi]=\"true\" class=\"pep-accordion2\">\n <mat-expansion-panel *ngFor=\"let field of fields; let i = index\" hideToggle=\"true\" [expanded]=\"field.isOpen\"\n (opened)=\"toggleField(i, true)\" (closed)=\"toggleField(i, false)\">\n <mat-expansion-panel-header [collapsedHeight]=\"expansionPanelHeaderHeight\"\n [expandedHeight]=\"expansionPanelHeaderHeight\">\n <mat-panel-title class=\"pep-spacing-element-negative\">\n <div class=\"smart-filter-title-container\">\n <mat-icon class=\"pep-spacing-element\">\n <pep-icon [name]=\"field.isOpen ? 'number_minus' : 'number_plus'\"></pep-icon>\n </mat-icon>\n <span class=\"body-sm ellipsis\" [title]=\"field.name\">\n {{ field.name }}\n </span>\n <mat-chip-option *ngIf=\"filtersDataMap.get(field.id)\" [selectable]=\"false\" [removable]=\"true\"\n (click)=\"onFilterClear(field)\" class=\"clear-filter pep-button chip xs weak\">\n <span *ngIf=\"field.componentType === 'multi-select'\" class=\"body-xs pep-spacing-element\">\n {{ filtersDataMap.get(field.id).value?.first?.length }}\n <!-- {{ field.componentType === 'multi-select' ?\n filtersDataMap.get(field.id).value?.first?.length : 1 }} -->\n </span>\n <mat-icon>\n <pep-icon name=\"system_close\"></pep-icon>\n </mat-icon>\n </mat-chip-option>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div class=\"expansion-content smart-filter-content\">\n <ng-container [ngSwitch]=\"field.componentType\">\n <ng-container *ngSwitchCase=\"'boolean'\">\n <pep-boolean-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n </pep-boolean-filter>\n </ng-container>\n <ng-container *ngSwitchCase=\"'date'\">\n <pep-date-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n </pep-date-filter>\n </ng-container>\n <ng-container *ngSwitchCase=\"'multi-select'\">\n <pep-multi-select-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n </pep-multi-select-filter>\n </ng-container>\n <ng-container *ngSwitchCase=\"'number'\">\n <pep-number-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n </pep-number-filter>\n </ng-container>\n <ng-container *ngSwitchCase=\"'text'\">\n <pep-text-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n </pep-text-filter>\n </ng-container>\n <!-- <div *ngSwitchDefault>\n </div> -->\n </ng-container>\n </div>\n </mat-expansion-panel>\n </mat-accordion>\n</div>", styles: [".smart-filters-container .title{height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));display:flex;flex-flow:wrap;align-items:center;justify-content:space-between}.smart-filters-container .title .clear-filter{display:flex;flex-direction:row;align-items:center;justify-content:center;margin:0 var(--pep-spacing-xs, .25rem);padding:0 var(--pep-spacing-md, .75rem)}.smart-filters-container .title .clear-filter:after{background-color:transparent}.smart-filters-container .smart-filter-title-container{display:grid;grid-auto-flow:column;grid-template-columns:auto 1fr auto;width:100%}.smart-filters-container .smart-filter-title-container>*{align-self:center}.smart-filters-container .smart-filter-title-container .clear-filter{display:flex;flex-direction:row;align-items:center;justify-content:center;margin-inline-end:var(--pep-spacing-sm, .5rem)}.smart-filters-container .smart-filter-title-container .clear-filter:after{background-color:transparent}.smart-filters-container .smart-filter-title-container .mat-icon pep-icon{height:.75rem;width:.75rem}\n", ".smart-filters-container .clear-filter.weak{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.08)}.smart-filters-container .clear-filter.weak:hover{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.16)}.smart-filters-container .clear-filter.weak:focus{box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);position:relative;box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.smart-filters-container .clear-filter.weak:focus:not(.keep-background-on-focus){background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.smart-filters-container .clear-filter.weak:focus:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;inset:0;border-radius:inherit;border:1px solid hsl(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%))}.smart-filters-container .clear-filter.weak:active{box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);position:relative}.smart-filters-container .clear-filter.weak:active:not(.keep-background-on-focus){background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.smart-filters-container .clear-filter.weak:active:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;inset:0;border-radius:inherit;border:1px solid hsl(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%))}.smart-filters-container .clear-filter.weak:disabled:not(.ignore-disabled){box-shadow:unset;border:unset}.smart-filters-container .clear-filter.weak:disabled:not(.ignore-disabled):after{border:unset}.smart-filters-container .clear-filter.weak:disabled:not(.ignore-disabled) .svg-icon{fill:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}.smart-filters-container .clear-filter.weak:disabled:not(.ignore-disabled) .svg-icon.stroke{fill:unset;stroke:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}.smart-filters-container .clear-filter.weak:disabled:not(.ignore-disabled):not(.disabled-no-background-no-color){color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)!important;background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.04)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3$2.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i4$3.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: i5$3.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i5$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i5$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i1$1.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: PepTextFilterComponent, selector: "pep-text-filter" }, { kind: "component", type: PepBooleanFilterComponent, selector: "pep-boolean-filter", inputs: ["options"] }, { kind: "component", type: PepDateFilterComponent, selector: "pep-date-filter" }, { kind: "component", type: PepMultiSelectFilterComponent, selector: "pep-multi-select-filter" }, { kind: "component", type: PepNumberFilterComponent, selector: "pep-number-filter" }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1395
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PepSmartFiltersComponent, selector: "pep-smart-filters", inputs: { title: "title", filters: "filters", fields: "fields", useAsWebComponent: "useAsWebComponent" }, outputs: { filtersChange: "filtersChange", fieldToggleChange: "fieldToggleChange" }, ngImport: i0, template: "<div class=\"smart-filters-container\" dir=\"{{ layoutService.isRtl() ? 'rtl' : 'ltr' }}\">\n <div *ngIf=\"fields?.length > 0\" class=\"title\">\n <span class=\"body-md bold\">{{ title?.length > 0 ? title : (\"SMART_FILTERS.TITLE\" | translate)}}</span>\n <mat-chip-option *ngIf=\"filtersDataMap.size > 0\" [selectable]=\"false\" [removable]=\"true\" (click)=\"onFiltersClear()\"\n class=\"clear-filter pep-button chip xs weak\">\n <span class=\"body-xs ellipsis \">\n {{ \"ACTIONS.CLEAR\" | translate}}\n </span>\n </mat-chip-option>\n </div>\n\n <mat-accordion [displayMode]=\"'flat'\" [multi]=\"true\" class=\"pep-accordion2\">\n <mat-expansion-panel *ngFor=\"let field of fields; let i = index\" hideToggle=\"true\" [expanded]=\"field.isOpen\"\n (opened)=\"toggleField(i, true)\" (closed)=\"toggleField(i, false)\">\n <mat-expansion-panel-header [collapsedHeight]=\"expansionPanelHeaderHeight\"\n [expandedHeight]=\"expansionPanelHeaderHeight\">\n <mat-panel-title class=\"pep-spacing-element-negative\">\n <div class=\"smart-filter-title-container\">\n <mat-icon class=\"pep-spacing-element\">\n <pep-icon [name]=\"field.isOpen ? 'number_minus' : 'number_plus'\"></pep-icon>\n </mat-icon>\n <span class=\"body-sm ellipsis\" [title]=\"field.name\">\n {{ field.name }}\n </span>\n <mat-chip-option *ngIf=\"filtersDataMap.get(field.id)\" [selectable]=\"false\" [removable]=\"true\"\n (click)=\"onFilterClear(field)\" class=\"clear-filter pep-button chip xs weak\">\n <span *ngIf=\"field.componentType === 'multi-select'\" class=\"body-xs pep-spacing-element\">\n {{ filtersDataMap.get(field.id).value?.first?.length }}\n <!-- {{ field.componentType === 'multi-select' ?\n filtersDataMap.get(field.id).value?.first?.length : 1 }} -->\n </span>\n <mat-icon>\n <pep-icon name=\"system_close\"></pep-icon>\n </mat-icon>\n </mat-chip-option>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div class=\"expansion-content smart-filter-content\">\n <ng-container [ngSwitch]=\"field.componentType\">\n <ng-container *ngSwitchCase=\"'boolean'\">\n <pep-boolean-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n </pep-boolean-filter>\n </ng-container>\n <ng-container *ngSwitchCase=\"'date'\">\n <pep-date-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n </pep-date-filter>\n </ng-container>\n <ng-container *ngSwitchCase=\"'multi-select'\">\n <pep-multi-select-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n </pep-multi-select-filter>\n </ng-container>\n <ng-container *ngSwitchCase=\"'number'\">\n <pep-number-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n </pep-number-filter>\n </ng-container>\n <ng-container *ngSwitchCase=\"'text'\">\n <pep-text-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n </pep-text-filter>\n </ng-container>\n <!-- <div *ngSwitchDefault>\n </div> -->\n </ng-container>\n </div>\n </mat-expansion-panel>\n </mat-accordion>\n</div>", styles: [".smart-filters-container .title{height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));display:flex;flex-flow:wrap;align-items:center;justify-content:space-between}.smart-filters-container .title .clear-filter{display:flex;flex-direction:row;align-items:center;justify-content:center;margin:0 var(--pep-spacing-xs, .25rem);padding:0 var(--pep-spacing-md, .75rem)}.smart-filters-container .title .clear-filter:after{background-color:transparent}.smart-filters-container .smart-filter-title-container{display:grid;grid-auto-flow:column;grid-template-columns:auto 1fr auto;width:100%}.smart-filters-container .smart-filter-title-container>*{align-self:center}.smart-filters-container .smart-filter-title-container .clear-filter{display:flex;flex-direction:row;align-items:center;justify-content:center;margin-inline-end:var(--pep-spacing-sm, .5rem)}.smart-filters-container .smart-filter-title-container .clear-filter:after{background-color:transparent}.smart-filters-container .smart-filter-title-container .mat-icon pep-icon{height:.75rem;width:.75rem}\n", ".smart-filters-container .clear-filter.weak{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.08)}.smart-filters-container .clear-filter.weak:hover{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.16)}.smart-filters-container .clear-filter.weak:focus{box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);position:relative;box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.smart-filters-container .clear-filter.weak:focus:not(.keep-background-on-focus){background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.smart-filters-container .clear-filter.weak:focus:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;inset:0;border-radius:inherit;border:1px solid hsl(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%))}.smart-filters-container .clear-filter.weak:active{box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);position:relative}.smart-filters-container .clear-filter.weak:active:not(.keep-background-on-focus){background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.smart-filters-container .clear-filter.weak:active:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;inset:0;border-radius:inherit;border:1px solid hsl(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%))}.smart-filters-container .clear-filter.weak:disabled:not(.ignore-disabled){box-shadow:unset;border:unset}.smart-filters-container .clear-filter.weak:disabled:not(.ignore-disabled):after{border:unset}.smart-filters-container .clear-filter.weak:disabled:not(.ignore-disabled) .svg-icon{fill:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}.smart-filters-container .clear-filter.weak:disabled:not(.ignore-disabled) .svg-icon.stroke{fill:unset;stroke:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}.smart-filters-container .clear-filter.weak:disabled:not(.ignore-disabled):not(.disabled-no-background-no-color){color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)!important;background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.04)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3$2.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i4$2.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: i5$2.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i5$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5$2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i5$2.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i1$1.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: PepTextFilterComponent, selector: "pep-text-filter" }, { kind: "component", type: PepBooleanFilterComponent, selector: "pep-boolean-filter", inputs: ["options"] }, { kind: "component", type: PepDateFilterComponent, selector: "pep-date-filter" }, { kind: "component", type: PepMultiSelectFilterComponent, selector: "pep-multi-select-filter" }, { kind: "component", type: PepNumberFilterComponent, selector: "pep-number-filter" }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1398
1396
|
}
|
|
1399
1397
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepSmartFiltersComponent, decorators: [{
|
|
1400
1398
|
type: Component,
|
|
@@ -1444,7 +1442,7 @@ class PepSmartFiltersModule {
|
|
|
1444
1442
|
MatInputModule,
|
|
1445
1443
|
MatRadioModule,
|
|
1446
1444
|
// External modules
|
|
1447
|
-
VirtualScrollerModule,
|
|
1445
|
+
//VirtualScrollerModule,
|
|
1448
1446
|
// ngx-lib modules
|
|
1449
1447
|
PepNgxLibModule,
|
|
1450
1448
|
PepCheckboxModule,
|
|
@@ -1475,7 +1473,7 @@ class PepSmartFiltersModule {
|
|
|
1475
1473
|
MatInputModule,
|
|
1476
1474
|
MatRadioModule,
|
|
1477
1475
|
// External modules
|
|
1478
|
-
VirtualScrollerModule,
|
|
1476
|
+
//VirtualScrollerModule,
|
|
1479
1477
|
// ngx-lib modules
|
|
1480
1478
|
PepNgxLibModule,
|
|
1481
1479
|
PepCheckboxModule,
|
|
@@ -1504,7 +1502,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1504
1502
|
MatInputModule,
|
|
1505
1503
|
MatRadioModule,
|
|
1506
1504
|
// External modules
|
|
1507
|
-
VirtualScrollerModule,
|
|
1505
|
+
//VirtualScrollerModule,
|
|
1508
1506
|
// ngx-lib modules
|
|
1509
1507
|
PepNgxLibModule,
|
|
1510
1508
|
PepCheckboxModule,
|