@pepperi-addons/ngx-lib 0.5.0-ng16.3 → 0.5.0-ng16.5
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 +8 -8
- package/esm2022/slider/slider.component.mjs +1 -2
- 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 +7 -1126
- package/fesm2022/pepperi-addons-ngx-lib-list.mjs.map +1 -1
- package/fesm2022/pepperi-addons-ngx-lib-slider.mjs +0 -1
- package/fesm2022/pepperi-addons-ngx-lib-slider.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 +17 -17
|
@@ -58,7 +58,6 @@ class PepSliderComponent {
|
|
|
58
58
|
// Get the wrapper for set the background.
|
|
59
59
|
if (!this.sliderWrapper) {
|
|
60
60
|
this.sliderWrapper = this.element.nativeElement.querySelector('.mat-slider-wrapper, .mdc-slider__track');
|
|
61
|
-
debugger;
|
|
62
61
|
}
|
|
63
62
|
if (this.sliderWrapper) {
|
|
64
63
|
this.renderer.setStyle(this.sliderWrapper, 'background', this.background?.length > 0 ? this.background : '');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pepperi-addons-ngx-lib-slider.mjs","sources":["../../../projects/ngx-lib/slider/slider.component.ts","../../../projects/ngx-lib/slider/slider.component.html","../../../projects/ngx-lib/slider/slider.module.ts","../../../projects/ngx-lib/slider/public-api.ts","../../../projects/ngx-lib/slider/pepperi-addons-ngx-lib-slider.ts"],"sourcesContent":["import {\n Component,\n OnDestroy,\n Input,\n Output,\n EventEmitter,\n Renderer2,\n ElementRef,\n OnInit,\n ViewChild,\n} from '@angular/core';\nimport { PepLayoutService, DEFAULT_HORIZONTAL_ALIGNMENT, PepHorizontalAlignment } from '@pepperi-addons/ngx-lib';\n\n/**\n * This is a slider component that support pepperi theme\n * style & state & sizes\n *\n * @export\n * @class PepSliderComponent\n * @implements {OnDestroy}\n */\n@Component({\n selector: 'pep-slider',\n templateUrl: './slider.component.html',\n styleUrls: ['./slider.component.scss', './slider.component.theme.scss'],\n})\nexport class PepSliderComponent implements OnInit {\n @Input() label = '';\n @Input() disabled = false;\n @Input() hint = '';\n\n private _background = '';\n @Input()\n set background(background: string) {\n if (!background) {\n background = '';\n }\n\n this._background = background;\n this.setBackground();\n }\n get background(): string {\n return this._background;\n }\n\n @Input() step = 1;\n @Input() minValue = NaN;\n @Input() maxValue = NaN;\n\n private _value = NaN;\n @Input()\n set value(value: number) {\n this._value = value;\n }\n get value(): number {\n return this._value;\n }\n\n @Output()\n valueChange: EventEmitter<number> = new EventEmitter<number>();\n\n @Output()\n inputChange: EventEmitter<number> = new EventEmitter<number>();\n\n xAlignment: PepHorizontalAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;\n sliderWrapper: any = null;\n\n constructor(private renderer: Renderer2, private element: ElementRef, private pepLayoutService: PepLayoutService) { }\n\n private setBackground(): void {\n // Get the wrapper for set the background.\n if (!this.sliderWrapper) {\n this.sliderWrapper = this.element.nativeElement.querySelector('.mat-slider-wrapper, .mdc-slider__track');\n
|
|
1
|
+
{"version":3,"file":"pepperi-addons-ngx-lib-slider.mjs","sources":["../../../projects/ngx-lib/slider/slider.component.ts","../../../projects/ngx-lib/slider/slider.component.html","../../../projects/ngx-lib/slider/slider.module.ts","../../../projects/ngx-lib/slider/public-api.ts","../../../projects/ngx-lib/slider/pepperi-addons-ngx-lib-slider.ts"],"sourcesContent":["import {\n Component,\n OnDestroy,\n Input,\n Output,\n EventEmitter,\n Renderer2,\n ElementRef,\n OnInit,\n ViewChild,\n} from '@angular/core';\nimport { PepLayoutService, DEFAULT_HORIZONTAL_ALIGNMENT, PepHorizontalAlignment } from '@pepperi-addons/ngx-lib';\n\n/**\n * This is a slider component that support pepperi theme\n * style & state & sizes\n *\n * @export\n * @class PepSliderComponent\n * @implements {OnDestroy}\n */\n@Component({\n selector: 'pep-slider',\n templateUrl: './slider.component.html',\n styleUrls: ['./slider.component.scss', './slider.component.theme.scss'],\n})\nexport class PepSliderComponent implements OnInit {\n @Input() label = '';\n @Input() disabled = false;\n @Input() hint = '';\n\n private _background = '';\n @Input()\n set background(background: string) {\n if (!background) {\n background = '';\n }\n\n this._background = background;\n this.setBackground();\n }\n get background(): string {\n return this._background;\n }\n\n @Input() step = 1;\n @Input() minValue = NaN;\n @Input() maxValue = NaN;\n\n private _value = NaN;\n @Input()\n set value(value: number) {\n this._value = value;\n }\n get value(): number {\n return this._value;\n }\n\n @Output()\n valueChange: EventEmitter<number> = new EventEmitter<number>();\n\n @Output()\n inputChange: EventEmitter<number> = new EventEmitter<number>();\n\n xAlignment: PepHorizontalAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;\n sliderWrapper: any = null;\n\n constructor(private renderer: Renderer2, private element: ElementRef, private pepLayoutService: PepLayoutService) { }\n\n private setBackground(): void {\n // Get the wrapper for set the background.\n if (!this.sliderWrapper) {\n this.sliderWrapper = this.element.nativeElement.querySelector('.mat-slider-wrapper, .mdc-slider__track');\n }\n\n if (this.sliderWrapper) {\n this.renderer.setStyle(this.sliderWrapper, 'background', this.background?.length > 0 ? this.background : '');\n\n if (this.background?.length > 0) {\n this.renderer.removeClass(this.sliderWrapper, 'background-color-dimmed');\n } else {\n this.renderer.addClass(this.sliderWrapper, 'background-color-dimmed');\n }\n }\n }\n\n ngOnInit(): void {\n this.xAlignment = this.pepLayoutService.isRtl() ? 'right' : 'left';\n this.setBackground();\n }\n\n onValueChange(event) {\n this.valueChange.emit(event.value);\n }\n\n onInputChange(event) {\n this.inputChange.emit(event.value);\n }\n}\n","<div class=\"pep-slider-container\">\n <pep-field-title [label]=\"label\" [disabled]=\"disabled\" [hint]=\"hint\" [xAlignment]=\"xAlignment\">\n </pep-field-title>\n <mat-slider [min]=\"minValue\" [max]=\"maxValue\" [step]=\"step\" [disabled]=\"disabled\" [title]=\"value\" #ngSlider><input matSliderThumb [value]=\"value\" (change)=\"onValueChange({source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value})\" #ngSliderThumb=\"matSliderThumb\" (input)=\"onInputChange({source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value})\" />\n </mat-slider>\n</div>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatSliderModule } from '@angular/material/slider';\nimport { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\n\nimport { PepSliderComponent } from './slider.component';\n\n@NgModule({\n imports: [\n CommonModule,\n // Material modules\n MatCommonModule,\n MatSliderModule,\n // ngx-lib modules\n PepNgxLibModule,\n PepFieldTitleModule,\n ],\n exports: [PepSliderComponent],\n declarations: [PepSliderComponent],\n})\nexport class PepSliderModule { }\n","/*\n * Public API Surface of ngx-lib/slider\n */\nexport * from './slider.module';\nexport * from './slider.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -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 {
|