@pepperi-addons/ngx-lib 0.5.0-ng16.3 → 0.5.0-ng16.4
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/chips/chips.component.mjs +3 -3
- package/esm2022/list/list.component.mjs +6 -7
- package/esm2022/smart-filters/multi-select-filter/multi-select-filter.component.mjs +11 -9
- package/fesm2022/pepperi-addons-ngx-lib-chips.mjs +2 -2
- package/fesm2022/pepperi-addons-ngx-lib-chips.mjs.map +1 -1
- package/fesm2022/pepperi-addons-ngx-lib-list.mjs +6 -1125
- package/fesm2022/pepperi-addons-ngx-lib-list.mjs.map +1 -1
- package/fesm2022/pepperi-addons-ngx-lib-smart-filters.mjs +10 -8
- package/fesm2022/pepperi-addons-ngx-lib-smart-filters.mjs.map +1 -1
- package/package.json +13 -13
|
@@ -36,7 +36,6 @@ import * as i3$2 from '@angular/cdk/bidi';
|
|
|
36
36
|
import { distinctUntilChanged, startWith, map } from 'rxjs/operators';
|
|
37
37
|
import * as i2$1 from '@ngx-translate/core';
|
|
38
38
|
import * as i3$1 from '@ngbracket/ngx-layout/flex';
|
|
39
|
-
import { VirtualScrollerComponent } from 'ngx-virtual-scroller';
|
|
40
39
|
import * as i4$1 from '@ngbracket/ngx-layout/extended';
|
|
41
40
|
|
|
42
41
|
class IPepSmartFilterOperator {
|
|
@@ -978,6 +977,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
978
977
|
args: [{ selector: 'pep-date-filter', 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" }]
|
|
979
978
|
}] });
|
|
980
979
|
|
|
980
|
+
//import { VirtualScrollerComponent } from 'ngx-virtual-scroller';
|
|
981
981
|
class PepMultiSelectFilterOption {
|
|
982
982
|
value;
|
|
983
983
|
count;
|
|
@@ -996,7 +996,10 @@ class PepMultiSelectFilterComponent extends BaseFilterComponent {
|
|
|
996
996
|
valueWidth;
|
|
997
997
|
optionsContainer;
|
|
998
998
|
MAX_OPTIONS_TO_SHOW = 6.35;
|
|
999
|
-
|
|
999
|
+
// TODO Avner: Remove this when the virtual scroller is implemented
|
|
1000
|
+
//@ViewChild(VirtualScrollerComponent)
|
|
1001
|
+
//private virtualScroller: VirtualScrollerComponent;
|
|
1002
|
+
virtualScroller = undefined;
|
|
1000
1003
|
numberOptionsToShowSearch = 10;
|
|
1001
1004
|
ngOnInit() {
|
|
1002
1005
|
super.ngOnInit;
|
|
@@ -1046,8 +1049,10 @@ class PepMultiSelectFilterComponent extends BaseFilterComponent {
|
|
|
1046
1049
|
this.filteredOptions$.subscribe((filterdOptions) => {
|
|
1047
1050
|
this.calcOptionsHeight(filterdOptions.length);
|
|
1048
1051
|
setTimeout(() => {
|
|
1049
|
-
|
|
1050
|
-
|
|
1052
|
+
if (this.virtualScroller) {
|
|
1053
|
+
// 8 is the padding top of the multi-select-options
|
|
1054
|
+
this.virtualScroller.scrollToPosition(-8);
|
|
1055
|
+
}
|
|
1051
1056
|
}, 125);
|
|
1052
1057
|
});
|
|
1053
1058
|
}
|
|
@@ -1149,7 +1154,7 @@ class PepMultiSelectFilterComponent extends BaseFilterComponent {
|
|
|
1149
1154
|
}
|
|
1150
1155
|
}
|
|
1151
1156
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepMultiSelectFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
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 }
|
|
1157
|
+
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 }], 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" }] });
|
|
1153
1158
|
}
|
|
1154
1159
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepMultiSelectFilterComponent, decorators: [{
|
|
1155
1160
|
type: Component,
|
|
@@ -1157,9 +1162,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1157
1162
|
}], propDecorators: { optionsContainer: [{
|
|
1158
1163
|
type: ViewChild,
|
|
1159
1164
|
args: ['optionsContainer']
|
|
1160
|
-
}], virtualScroller: [{
|
|
1161
|
-
type: ViewChild,
|
|
1162
|
-
args: [VirtualScrollerComponent]
|
|
1163
1165
|
}] } });
|
|
1164
1166
|
|
|
1165
1167
|
class PepNumberFilterComponent extends BaseFilterComponent {
|