@indice/ng-components 0.3.4 → 0.3.5-beta.1
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/lib/controls/advanced-search/advanced-search.component.mjs +29 -21
- package/esm2022/lib/controls/list-view/list-view.component.mjs +8 -9
- package/fesm2022/indice-ng-components.mjs +35 -28
- package/fesm2022/indice-ng-components.mjs.map +1 -1
- package/lib/controls/advanced-search/advanced-search.component.d.ts +5 -1
- package/lib/controls/list-view/list-view.component.d.ts +4 -3
- package/package.json +1 -1
|
@@ -1276,28 +1276,35 @@ class AdvancedSearchComponent {
|
|
|
1276
1276
|
this.menuOptionsDictionary = {};
|
|
1277
1277
|
}
|
|
1278
1278
|
ngOnInit() {
|
|
1279
|
-
this.searchOptions
|
|
1280
|
-
this.
|
|
1279
|
+
this.searchOptions$?.subscribe(options => {
|
|
1280
|
+
this.searchOptions = options;
|
|
1281
|
+
this.setSearchOptions(options);
|
|
1282
|
+
});
|
|
1283
|
+
this.filters$?.subscribe(filters => {
|
|
1284
|
+
this.filters = filters;
|
|
1285
|
+
});
|
|
1286
|
+
}
|
|
1287
|
+
setSearchOptions(options) {
|
|
1288
|
+
const updatedSearchOptions = [];
|
|
1289
|
+
for (const searchOption of options) {
|
|
1290
|
+
updatedSearchOptions.push({
|
|
1281
1291
|
text: searchOption.name,
|
|
1282
1292
|
value: searchOption.field,
|
|
1283
1293
|
data: searchOption.dataType,
|
|
1284
1294
|
description: searchOption.placeholder,
|
|
1285
1295
|
icon: undefined
|
|
1286
1296
|
});
|
|
1287
|
-
if (searchOption.dataType === 'array') {
|
|
1288
|
-
|
|
1289
|
-
|
|
1290
|
-
|
|
1291
|
-
|
|
1292
|
-
|
|
1293
|
-
|
|
1294
|
-
|
|
1295
|
-
icon: undefined
|
|
1296
|
-
});
|
|
1297
|
-
});
|
|
1298
|
-
this.menuOptionsDictionary[searchOption.field] = menuOpts;
|
|
1297
|
+
if (searchOption.dataType === 'array' && searchOption.options) {
|
|
1298
|
+
this.menuOptionsDictionary[searchOption.field] = searchOption.options.map(option => ({
|
|
1299
|
+
text: option.label,
|
|
1300
|
+
value: option.value,
|
|
1301
|
+
data: undefined,
|
|
1302
|
+
description: option.description,
|
|
1303
|
+
icon: undefined
|
|
1304
|
+
}));
|
|
1299
1305
|
}
|
|
1300
|
-
}
|
|
1306
|
+
}
|
|
1307
|
+
this.menuOptions = updatedSearchOptions;
|
|
1301
1308
|
}
|
|
1302
1309
|
selectedFieldChanged(field) {
|
|
1303
1310
|
this.selectedField = this.searchOptions.find((searchOption) => searchOption.field === field);
|
|
@@ -1395,21 +1402,22 @@ class AdvancedSearchComponent {
|
|
|
1395
1402
|
this.advancedSearchChanged.emit(this.filters);
|
|
1396
1403
|
}
|
|
1397
1404
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: AdvancedSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1398
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: AdvancedSearchComponent, selector: "lib-advanced-search", inputs: { searchOptions
|
|
1405
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: AdvancedSearchComponent, selector: "lib-advanced-search", inputs: { searchOptions$: ["search-options$", "searchOptions$"], operatorsDisabled: ["operators-disabled", "operatorsDisabled"], filters$: "filters$" }, outputs: { advancedSearchChanged: "advancedSearchChanged" }, ngImport: i0, template: "<div class=\"advanced-search-container\">\r\n <div class=\"advanced-search-filter\">\r\n <!--SEARCH FIELDS-->\r\n <div class=\"advanced-search-filter-field-container\">\r\n <label class=\"advanced-search-filter-field-label\"\r\n for=\"selectedField\">\r\n \u0391\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7 \u03B1\u03BD\u03AC:\r\n </label>\r\n <lib-drop-down-menu [options]=\"menuOptions\"\r\n (selectedChanged)=\"selectedFieldChanged($event)\"></lib-drop-down-menu>\r\n </div>\r\n <!--SEARCH FIELDS OPERATOR MENU-->\r\n <div *ngIf=\"!operatorsDisabled && selectedField\"\r\n class=\"advanced-search-filter-operator-container\">\r\n <div *ngIf=\"selectedField.dataType === 'array' || selectedField.dataType === 'string'\">\r\n <label class=\"advanced-search-filter-operator-label\"\r\n for=\"selectedOperator\">\r\n \r\n </label>\r\n <lib-drop-down-menu [options]=\"operatorMenuOptions\"\r\n [selected]=\"selectedOperator\"\r\n (selectedChanged)=\"selectedOperatorChanged($event)\"></lib-drop-down-menu>\r\n </div>\r\n </div>\r\n <!--SEARCH FIELDS INPUT-->\r\n <div *ngIf=\"selectedField\"\r\n class=\"advanced-search-filter-value-container\">\r\n <div *ngIf=\"selectedField.dataType === 'array'\">\r\n <label class=\"advanced-search-filter-value-label\"\r\n for=\"fieldValue\">\r\n \r\n </label>\r\n <lib-drop-down-menu [options]=\"menuOptionsDictionary[selectedField.field]\"\r\n [selected]=\"fieldValue\"\r\n (selectedChanged)=\"selectedFieldValueChanged($event)\"></lib-drop-down-menu>\r\n </div>\r\n <div *ngIf=\"selectedField.dataType === 'string'\">\r\n <label class=\"advanced-search-filter-value-label\"\r\n for=\"fieldValue\">\r\n \r\n </label>\r\n <input (keyup.enter)=\"search()\"\r\n [(ngModel)]=\"fieldValue\"\r\n name=\"fieldValue\"\r\n type=\"text\"\r\n placeholder=\"\u0391\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7\"\r\n maxlength=\"300\"\r\n class=\"advanced-search-filter-value-input\">\r\n </div>\r\n <ng-container *ngIf=\"selectedField.dataType === 'daterange'\">\r\n <div>\r\n <span class=\"advanced-search-filter-value-input-daterange-from\">\r\n \u0391\u03C0\u03CC:\r\n </span>\r\n <lib-date-picker [maxDate]=\"fieldValueDateTo\"\r\n [(ngModel)]=\"fieldValueDateFrom\"\r\n [placeholder]=\"'01/01/2022'\"></lib-date-picker>\r\n </div>\r\n <div *ngIf=\"selectedField.dataType === 'daterange'\">\r\n <span class=\"advanced-search-filter-value-input-daterange-to\">\r\n \u0388\u03C9\u03C2:\r\n </span>\r\n <lib-date-picker [minDate]=\"fieldValueDateFrom\"\r\n [(ngModel)]=\"fieldValueDateTo\"\r\n [placeholder]=\"'01/01/2022'\"></lib-date-picker>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <ng-container *ngIf=\"selectedField\">\r\n <!--DO SEARCH-->\r\n <button type=\"button\"\r\n [ngClass]=\"{'opacity-50 cursor-not-allowed': isDateValueUnpicked() && isFieldAndOperatorUnpicked()}\"\r\n [disabled]=\"isDateValueUnpicked() && isFieldAndOperatorUnpicked()\"\r\n (click)=\"search()\">\r\n <i [class]=\"'ms-Icon ms-Icon--Search'\"></i>\r\n </button>\r\n <!--CLEAR-->\r\n <button type=\"button\"\r\n (click)=\"clear()\">\r\n <i [class]=\"'ms-Icon ms-Icon--Cancel'\"></i>\r\n </button>\r\n </ng-container>\r\n </div>\r\n <!--FILTER CHIPS-->\r\n <!-- This example requires Tailwind CSS v2.0+ -->\r\n <ng-container *ngFor=\"let filter of filters; let i = index\">\r\n <span *ngIf=\"filter && filter.member\"\r\n class=\"advanced-search-chips\">\r\n {{ filter.uiName }} {{ filter.uiOperator }} '{{ filter.uiValue }}'\r\n <button (click)=\"removeFilter(i)\"\r\n type=\"button\"\r\n class=\"advanced-search-chips-remove-filter\">\r\n <span class=\"sr-only\">Remove large option</span>\r\n <svg class=\"h-2 w-2\"\r\n stroke=\"currentColor\"\r\n fill=\"none\"\r\n viewBox=\"0 0 8 8\">\r\n <path stroke-linecap=\"round\"\r\n stroke-width=\"1.5\"\r\n d=\"M1 1l6 6m0-6L1 7\" />\r\n </svg>\r\n </button>\r\n </span>\r\n </ng-container>\r\n</div>", 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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DatepickerComponent, selector: "lib-date-picker", inputs: ["readonly", "disabled", "inline", "display-format", "placeholder", "value", "minDate", "maxDate"], outputs: ["valueChange"] }, { kind: "component", type: DropDownMenuComponent, selector: "lib-drop-down-menu", inputs: ["options", "selected", "multiple", "placeholder", "show-icons"], outputs: ["selectedChange", "selectedChanged"] }] }); }
|
|
1399
1406
|
}
|
|
1400
1407
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: AdvancedSearchComponent, decorators: [{
|
|
1401
1408
|
type: Component,
|
|
1402
1409
|
args: [{ selector: 'lib-advanced-search', template: "<div class=\"advanced-search-container\">\r\n <div class=\"advanced-search-filter\">\r\n <!--SEARCH FIELDS-->\r\n <div class=\"advanced-search-filter-field-container\">\r\n <label class=\"advanced-search-filter-field-label\"\r\n for=\"selectedField\">\r\n \u0391\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7 \u03B1\u03BD\u03AC:\r\n </label>\r\n <lib-drop-down-menu [options]=\"menuOptions\"\r\n (selectedChanged)=\"selectedFieldChanged($event)\"></lib-drop-down-menu>\r\n </div>\r\n <!--SEARCH FIELDS OPERATOR MENU-->\r\n <div *ngIf=\"!operatorsDisabled && selectedField\"\r\n class=\"advanced-search-filter-operator-container\">\r\n <div *ngIf=\"selectedField.dataType === 'array' || selectedField.dataType === 'string'\">\r\n <label class=\"advanced-search-filter-operator-label\"\r\n for=\"selectedOperator\">\r\n \r\n </label>\r\n <lib-drop-down-menu [options]=\"operatorMenuOptions\"\r\n [selected]=\"selectedOperator\"\r\n (selectedChanged)=\"selectedOperatorChanged($event)\"></lib-drop-down-menu>\r\n </div>\r\n </div>\r\n <!--SEARCH FIELDS INPUT-->\r\n <div *ngIf=\"selectedField\"\r\n class=\"advanced-search-filter-value-container\">\r\n <div *ngIf=\"selectedField.dataType === 'array'\">\r\n <label class=\"advanced-search-filter-value-label\"\r\n for=\"fieldValue\">\r\n \r\n </label>\r\n <lib-drop-down-menu [options]=\"menuOptionsDictionary[selectedField.field]\"\r\n [selected]=\"fieldValue\"\r\n (selectedChanged)=\"selectedFieldValueChanged($event)\"></lib-drop-down-menu>\r\n </div>\r\n <div *ngIf=\"selectedField.dataType === 'string'\">\r\n <label class=\"advanced-search-filter-value-label\"\r\n for=\"fieldValue\">\r\n \r\n </label>\r\n <input (keyup.enter)=\"search()\"\r\n [(ngModel)]=\"fieldValue\"\r\n name=\"fieldValue\"\r\n type=\"text\"\r\n placeholder=\"\u0391\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7\"\r\n maxlength=\"300\"\r\n class=\"advanced-search-filter-value-input\">\r\n </div>\r\n <ng-container *ngIf=\"selectedField.dataType === 'daterange'\">\r\n <div>\r\n <span class=\"advanced-search-filter-value-input-daterange-from\">\r\n \u0391\u03C0\u03CC:\r\n </span>\r\n <lib-date-picker [maxDate]=\"fieldValueDateTo\"\r\n [(ngModel)]=\"fieldValueDateFrom\"\r\n [placeholder]=\"'01/01/2022'\"></lib-date-picker>\r\n </div>\r\n <div *ngIf=\"selectedField.dataType === 'daterange'\">\r\n <span class=\"advanced-search-filter-value-input-daterange-to\">\r\n \u0388\u03C9\u03C2:\r\n </span>\r\n <lib-date-picker [minDate]=\"fieldValueDateFrom\"\r\n [(ngModel)]=\"fieldValueDateTo\"\r\n [placeholder]=\"'01/01/2022'\"></lib-date-picker>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <ng-container *ngIf=\"selectedField\">\r\n <!--DO SEARCH-->\r\n <button type=\"button\"\r\n [ngClass]=\"{'opacity-50 cursor-not-allowed': isDateValueUnpicked() && isFieldAndOperatorUnpicked()}\"\r\n [disabled]=\"isDateValueUnpicked() && isFieldAndOperatorUnpicked()\"\r\n (click)=\"search()\">\r\n <i [class]=\"'ms-Icon ms-Icon--Search'\"></i>\r\n </button>\r\n <!--CLEAR-->\r\n <button type=\"button\"\r\n (click)=\"clear()\">\r\n <i [class]=\"'ms-Icon ms-Icon--Cancel'\"></i>\r\n </button>\r\n </ng-container>\r\n </div>\r\n <!--FILTER CHIPS-->\r\n <!-- This example requires Tailwind CSS v2.0+ -->\r\n <ng-container *ngFor=\"let filter of filters; let i = index\">\r\n <span *ngIf=\"filter && filter.member\"\r\n class=\"advanced-search-chips\">\r\n {{ filter.uiName }} {{ filter.uiOperator }} '{{ filter.uiValue }}'\r\n <button (click)=\"removeFilter(i)\"\r\n type=\"button\"\r\n class=\"advanced-search-chips-remove-filter\">\r\n <span class=\"sr-only\">Remove large option</span>\r\n <svg class=\"h-2 w-2\"\r\n stroke=\"currentColor\"\r\n fill=\"none\"\r\n viewBox=\"0 0 8 8\">\r\n <path stroke-linecap=\"round\"\r\n stroke-width=\"1.5\"\r\n d=\"M1 1l6 6m0-6L1 7\" />\r\n </svg>\r\n </button>\r\n </span>\r\n </ng-container>\r\n</div>" }]
|
|
1403
1410
|
}], ctorParameters: () => [], propDecorators: { advancedSearchChanged: [{
|
|
1404
1411
|
type: Output
|
|
1405
|
-
}], searchOptions
|
|
1412
|
+
}], searchOptions$: [{
|
|
1406
1413
|
type: Input,
|
|
1407
|
-
args: ['search-options']
|
|
1414
|
+
args: ['search-options$']
|
|
1408
1415
|
}], operatorsDisabled: [{
|
|
1409
1416
|
type: Input,
|
|
1410
1417
|
args: ['operators-disabled']
|
|
1411
|
-
}], filters
|
|
1412
|
-
type: Input
|
|
1418
|
+
}], filters$: [{
|
|
1419
|
+
type: Input,
|
|
1420
|
+
args: ['filters$']
|
|
1413
1421
|
}] } });
|
|
1414
1422
|
|
|
1415
1423
|
class ListViewEmptyStateComponent {
|
|
@@ -1489,8 +1497,6 @@ class ListViewComponent {
|
|
|
1489
1497
|
}
|
|
1490
1498
|
}
|
|
1491
1499
|
constructor() {
|
|
1492
|
-
this.searchOptions = [];
|
|
1493
|
-
this.filters = [];
|
|
1494
1500
|
// BUSY STATE
|
|
1495
1501
|
this.busy = false;
|
|
1496
1502
|
// PAGING - pass through for pager component
|
|
@@ -1590,16 +1596,17 @@ class ListViewComponent {
|
|
|
1590
1596
|
}
|
|
1591
1597
|
}
|
|
1592
1598
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1593
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: ListViewComponent, selector: "lib-list-view", inputs: { searchOptions: ["search-options", "searchOptions"], filters: "filters", busy: "busy", items: "items", count: "count", page: "page", view: "view", sort: "sort", pageSize: ["page-size", "pageSize"], pageSizeOptions: ["page-size-options", "pageSizeOptions"], sortOptions: ["sort-options", "sortOptions"], operatorsDisabled: ["operators-disabled", "operatorsDisabled"], sortdir: ["sort-dir", "sortdir"], tilesCount: ["tiles-count", "tilesCount"], showPager: ["show-pager", "showPager"], pagerPosition: ["pager-position", "pagerPosition"], detailsSectionPropertyCount: ["details-section-property-count", "detailsSectionPropertyCount"] }, outputs: { pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", detailsOpened: "detailsOpened", sortChanged: "sortChanged", sortdirChanged: "sortdirChanged", advancedSearchChanged: "advancedSearchChanged" }, queries: [{ propertyName: "tiles", first: true, predicate: ListTileComponent, descendants: true, read: ListTileComponent }, { propertyName: "details", first: true, predicate: ListDetailsSectionComponent, descendants: true, read: ListDetailsSectionComponent }, { propertyName: "cols", predicate: ListColumnComponent, read: ListColumnComponent }], usesOnChanges: true, ngImport: i0, template: "<div>\r\n <lib-advanced-search *ngIf=\"searchOptions && searchOptions.length > 0\"\r\n [search-options]=\"searchOptions\"\r\n [operators-disabled]=\"operatorsDisabled\"\r\n [filters]=\"filters\"\r\n (advancedSearchChanged)=\"emitAdvancedSearchChanged($event)\">\r\n </lib-advanced-search>\r\n\r\n <lib-pager *ngIf=\"showPager && (pagerPosition == 'top' || pagerPosition == 'both')\"\r\n [page]=\"page\"\r\n [page-size]=\"pageSize\"\r\n [count]=\"count\"\r\n [sort-options]=\"sortOptions\"\r\n [sort]=\"sort\"\r\n [sort-dir]=\"sortdir\"\r\n [busy]=\"busy\"\r\n (pageChanged)=\"emitPageChanged($event)\"\r\n (pageSizeChanged)=\"emitPageSizeChanged($event)\"\r\n (sortChanged)=\"emitSortChanged($event)\"\r\n (sortdirChanged)=\"emitSortdirChanged($event)\">\r\n <ng-content select=\"[pager-near-content]\" ngProjectAs=\"[pager-near-content]\"></ng-content>\r\n </lib-pager>\r\n</div>\r\n\r\n<ng-container [ngSwitch]=\"view\">\r\n\r\n <ng-container *ngSwitchCase=\"'tiles'\">\r\n <div [class]=\"busy ? 'cards-deck-1' : tilesDeckClass\">\r\n\r\n <lib-skeleton-loader *ngIf=\"busy\" [deck-class]=\"tilesDeckClass\" [count]=\"7\" [type]=\"'tiles'\"></lib-skeleton-loader>\r\n\r\n <ng-container *ngIf=\"!busy && items && items.length > 0\">\r\n <ng-container *ngFor=\"let item of items\">\r\n <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\r\n <ng-template [ngTemplateOutlet]=\"tileTemplate.template\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n </ng-container>\r\n\r\n\r\n <!-- *ngSwitchCase=\"'gallery'\" -->\r\n <ng-container *ngSwitchCase=\"'gallery'\">\r\n <ul role=\"list\" role=\"list\" [class]=\"tilesDeckClass\">\r\n\r\n <lib-skeleton-loader *ngIf=\"busy\" [count]=\"5\" [type]=\"'tiles'\"></lib-skeleton-loader>\r\n\r\n <ng-container *ngIf=\"!busy && items && items.length > 0\">\r\n <ng-container *ngFor=\"let item of items\" role=\"listitem\">\r\n <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\r\n <ng-template [ngTemplateOutlet]=\"tileTemplate.template\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </ul>\r\n </ng-container>\r\n\r\n <!-- *ngSwitchCase=\"'table'\" -->\r\n <ng-container *ngSwitchDefault>\r\n\r\n <div class=\"list-view-container\">\r\n <div class=\"list-view-container-inner\">\r\n <table class=\"list-view-table\">\r\n <thead class=\"list-view-thead\">\r\n <tr>\r\n <ng-container *ngIf=\"detailsSectionSupported\">\r\n <th class=\"list-view-th-details\"></th>\r\n </ng-container>\r\n <ng-container *ngFor=\"let col of columns\">\r\n <th scope=\"col\"\r\n [class]=\"col.fullWidth ? fullWidthTHClass : 'list-view-th'\">\r\n {{col.title}}\r\n </th>\r\n </ng-container>\r\n </tr>\r\n </thead>\r\n <tbody class=\"list-view-tbody\"\r\n *ngIf=\"busy\">\r\n <ng-container *ngFor=\"let item of loaderItems;let i=index\">\r\n <tr class=\"list-view-tr\">\r\n <ng-container *ngIf=\"detailsSectionSupported\">\r\n <td class=\"list-view-td-details\"\r\n *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\r\n <button disabled\r\n title=\"expand-collapse\"\r\n type=\"button\"\r\n class=\"expand-collapse-button\">\r\n <!-- Heroicon name: solid/plus -->\r\n <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\r\n </button>\r\n </td>\r\n <ng-template #hiddenDetailsButton>\r\n <td class=\"list-view-td-details\"></td>\r\n </ng-template>\r\n </ng-container>\r\n <td *ngFor=\"let col of columns\"\r\n [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\r\n <div class=\"w-full animate-pulse h-8 bg-gray-200 rounded\"></div>\r\n </td>\r\n </tr>\r\n <ng-container *ngIf=\"detailsSectionSupported\">\r\n <tr *ngIf=\"item.detailsExpanded\">\r\n <td [colSpan]=\"columns.length + 1\"\r\n class=\"list-view-td bg-gray-100\">\r\n <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </ng-container>\r\n </tbody>\r\n <tbody class=\"list-view-tbody\"\r\n *ngIf=\"!busy\">\r\n <ng-container *ngFor=\"let item of items;let i=index\">\r\n <tr class=\"list-view-tr\">\r\n <ng-container *ngIf=\"detailsSectionSupported\">\r\n <td class=\"list-view-td-details\"\r\n *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\r\n <button (click)=\"toggleDetails(item)\"\r\n title=\"toggleDetails\"\r\n type=\"button\"\r\n class=\"expand-collapse-button\">\r\n <!-- Heroicon name: solid/plus -->\r\n <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\r\n </button>\r\n </td>\r\n <ng-template #hiddenDetailsButton>\r\n <td class=\"list-view-td-details\"></td>\r\n </ng-template>\r\n </ng-container>\r\n <td *ngFor=\"let col of columns\"\r\n [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\r\n <ng-template [ngTemplateOutlet]=\"col.template\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n </td>\r\n </tr>\r\n <ng-container *ngIf=\"detailsSectionSupported\">\r\n <tr *ngIf=\"item.detailsExpanded\">\r\n <td [colSpan]=\"columns.length + 1\"\r\n class=\"list-view-td bg-gray-100\">\r\n <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </ng-container>\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!busy && items && items.length === 0\">\r\n <div class=\"cards-deck-1\">\r\n <lib-list-view-empty-state></lib-list-view-empty-state>\r\n </div>\r\n </ng-container>\r\n</ng-container>\r\n\r\n<ng-content></ng-content>\r\n\r\n<div class=\"px-2 mt-2\"\r\n *ngIf=\"items && items.length !== 0 && showPager && (pagerPosition == 'bottom' || pagerPosition == 'both')\">\r\n <lib-pager [page]=\"page\"\r\n [page-size]=\"pageSize\"\r\n [count]=\"count\"\r\n [sort-options]=\"sortOptions\"\r\n [sort]=\"sort\"\r\n [sort-dir]=\"sortdir\"\r\n [busy]=\"busy\"\r\n (pageChanged)=\"emitPageChanged($event)\"\r\n (pageSizeChanged)=\"emitPageSizeChanged($event)\"\r\n (sortChanged)=\"emitSortChanged($event)\"\r\n (sortdirChanged)=\"emitSortdirChanged($event)\">\r\n </lib-pager>\r\n</div>", 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: AdvancedSearchComponent, selector: "lib-advanced-search", inputs: ["search-options", "operators-disabled", "filters"], outputs: ["advancedSearchChanged"] }, { kind: "component", type: ListViewEmptyStateComponent, selector: "lib-list-view-empty-state", inputs: ["title", "sub-title", "new-item-label"] }, { kind: "component", type: PagerComponent, selector: "lib-pager", inputs: ["busy", "count", "page", "page-size", "page-size-options", "sort-options", "sort", "sort-dir"], outputs: ["pageChanged", "pageSizeChanged", "sortChanged", "sortdirChanged"] }, { kind: "component", type: SkeletonLoaderComponent, selector: "lib-skeleton-loader", inputs: ["count", "type", "deck-class"] }] }); }
|
|
1599
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: ListViewComponent, selector: "lib-list-view", inputs: { searchOptions$: ["search-options$", "searchOptions$"], filters$: "filters$", busy: "busy", items: "items", count: "count", page: "page", view: "view", sort: "sort", pageSize: ["page-size", "pageSize"], pageSizeOptions: ["page-size-options", "pageSizeOptions"], sortOptions: ["sort-options", "sortOptions"], operatorsDisabled: ["operators-disabled", "operatorsDisabled"], sortdir: ["sort-dir", "sortdir"], tilesCount: ["tiles-count", "tilesCount"], showPager: ["show-pager", "showPager"], pagerPosition: ["pager-position", "pagerPosition"], detailsSectionPropertyCount: ["details-section-property-count", "detailsSectionPropertyCount"] }, outputs: { pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", detailsOpened: "detailsOpened", sortChanged: "sortChanged", sortdirChanged: "sortdirChanged", advancedSearchChanged: "advancedSearchChanged" }, queries: [{ propertyName: "tiles", first: true, predicate: ListTileComponent, descendants: true, read: ListTileComponent }, { propertyName: "details", first: true, predicate: ListDetailsSectionComponent, descendants: true, read: ListDetailsSectionComponent }, { propertyName: "cols", predicate: ListColumnComponent, read: ListColumnComponent }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"searchOptions$ | async as searchOptions\">\r\n <lib-advanced-search *ngIf=\"searchOptions && searchOptions.length > 0\"\r\n [search-options$]=\"searchOptions$\"\r\n [operators-disabled]=\"operatorsDisabled\"\r\n [filters$]=\"filters$\"\r\n (advancedSearchChanged)=\"emitAdvancedSearchChanged($event)\">\r\n </lib-advanced-search>\r\n\r\n <lib-pager *ngIf=\"showPager && (pagerPosition == 'top' || pagerPosition == 'both')\"\r\n [page]=\"page\"\r\n [page-size]=\"pageSize\"\r\n [count]=\"count\"\r\n [sort-options]=\"sortOptions\"\r\n [sort]=\"sort\"\r\n [sort-dir]=\"sortdir\"\r\n [busy]=\"busy\"\r\n (pageChanged)=\"emitPageChanged($event)\"\r\n (pageSizeChanged)=\"emitPageSizeChanged($event)\"\r\n (sortChanged)=\"emitSortChanged($event)\"\r\n (sortdirChanged)=\"emitSortdirChanged($event)\">\r\n <ng-content select=\"[pager-near-content]\" ngProjectAs=\"[pager-near-content]\"></ng-content>\r\n </lib-pager>\r\n</div>\r\n\r\n<ng-container [ngSwitch]=\"view\">\r\n\r\n <ng-container *ngSwitchCase=\"'tiles'\">\r\n <div [class]=\"busy ? 'cards-deck-1' : tilesDeckClass\">\r\n\r\n <lib-skeleton-loader *ngIf=\"busy\" [deck-class]=\"tilesDeckClass\" [count]=\"7\" [type]=\"'tiles'\"></lib-skeleton-loader>\r\n\r\n <ng-container *ngIf=\"!busy && items && items.length > 0\">\r\n <ng-container *ngFor=\"let item of items\">\r\n <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\r\n <ng-template [ngTemplateOutlet]=\"tileTemplate.template\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n </ng-container>\r\n\r\n\r\n <!-- *ngSwitchCase=\"'gallery'\" -->\r\n <ng-container *ngSwitchCase=\"'gallery'\">\r\n <ul role=\"list\" role=\"list\" [class]=\"tilesDeckClass\">\r\n\r\n <lib-skeleton-loader *ngIf=\"busy\" [count]=\"5\" [type]=\"'tiles'\"></lib-skeleton-loader>\r\n\r\n <ng-container *ngIf=\"!busy && items && items.length > 0\">\r\n <ng-container *ngFor=\"let item of items\" role=\"listitem\">\r\n <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\r\n <ng-template [ngTemplateOutlet]=\"tileTemplate.template\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </ul>\r\n </ng-container>\r\n\r\n <!-- *ngSwitchCase=\"'table'\" -->\r\n <ng-container *ngSwitchDefault>\r\n\r\n <div class=\"list-view-container\">\r\n <div class=\"list-view-container-inner\">\r\n <table class=\"list-view-table\">\r\n <thead class=\"list-view-thead\">\r\n <tr>\r\n <ng-container *ngIf=\"detailsSectionSupported\">\r\n <th class=\"list-view-th-details\"></th>\r\n </ng-container>\r\n <ng-container *ngFor=\"let col of columns\">\r\n <th scope=\"col\"\r\n [class]=\"col.fullWidth ? fullWidthTHClass : 'list-view-th'\">\r\n {{col.title}}\r\n </th>\r\n </ng-container>\r\n </tr>\r\n </thead>\r\n <tbody class=\"list-view-tbody\"\r\n *ngIf=\"busy\">\r\n <ng-container *ngFor=\"let item of loaderItems;let i=index\">\r\n <tr class=\"list-view-tr\">\r\n <ng-container *ngIf=\"detailsSectionSupported\">\r\n <td class=\"list-view-td-details\"\r\n *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\r\n <button disabled\r\n title=\"expand-collapse\"\r\n type=\"button\"\r\n class=\"expand-collapse-button\">\r\n <!-- Heroicon name: solid/plus -->\r\n <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\r\n </button>\r\n </td>\r\n <ng-template #hiddenDetailsButton>\r\n <td class=\"list-view-td-details\"></td>\r\n </ng-template>\r\n </ng-container>\r\n <td *ngFor=\"let col of columns\"\r\n [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\r\n <div class=\"w-full animate-pulse h-8 bg-gray-200 rounded\"></div>\r\n </td>\r\n </tr>\r\n <ng-container *ngIf=\"detailsSectionSupported\">\r\n <tr *ngIf=\"item.detailsExpanded\">\r\n <td [colSpan]=\"columns.length + 1\"\r\n class=\"list-view-td bg-gray-100\">\r\n <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </ng-container>\r\n </tbody>\r\n <tbody class=\"list-view-tbody\"\r\n *ngIf=\"!busy\">\r\n <ng-container *ngFor=\"let item of items;let i=index\">\r\n <tr class=\"list-view-tr\">\r\n <ng-container *ngIf=\"detailsSectionSupported\">\r\n <td class=\"list-view-td-details\"\r\n *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\r\n <button (click)=\"toggleDetails(item)\"\r\n title=\"toggleDetails\"\r\n type=\"button\"\r\n class=\"expand-collapse-button\">\r\n <!-- Heroicon name: solid/plus -->\r\n <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\r\n </button>\r\n </td>\r\n <ng-template #hiddenDetailsButton>\r\n <td class=\"list-view-td-details\"></td>\r\n </ng-template>\r\n </ng-container>\r\n <td *ngFor=\"let col of columns\"\r\n [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\r\n <ng-template [ngTemplateOutlet]=\"col.template\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n </td>\r\n </tr>\r\n <ng-container *ngIf=\"detailsSectionSupported\">\r\n <tr *ngIf=\"item.detailsExpanded\">\r\n <td [colSpan]=\"columns.length + 1\"\r\n class=\"list-view-td bg-gray-100\">\r\n <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </ng-container>\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!busy && items && items.length === 0\">\r\n <div class=\"cards-deck-1\">\r\n <lib-list-view-empty-state></lib-list-view-empty-state>\r\n </div>\r\n </ng-container>\r\n</ng-container>\r\n\r\n<ng-content></ng-content>\r\n\r\n<div class=\"px-2 mt-2\"\r\n *ngIf=\"items && items.length !== 0 && showPager && (pagerPosition == 'bottom' || pagerPosition == 'both')\">\r\n <lib-pager [page]=\"page\"\r\n [page-size]=\"pageSize\"\r\n [count]=\"count\"\r\n [sort-options]=\"sortOptions\"\r\n [sort]=\"sort\"\r\n [sort-dir]=\"sortdir\"\r\n [busy]=\"busy\"\r\n (pageChanged)=\"emitPageChanged($event)\"\r\n (pageSizeChanged)=\"emitPageSizeChanged($event)\"\r\n (sortChanged)=\"emitSortChanged($event)\"\r\n (sortdirChanged)=\"emitSortdirChanged($event)\">\r\n </lib-pager>\r\n</div>\r\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: AdvancedSearchComponent, selector: "lib-advanced-search", inputs: ["search-options$", "operators-disabled", "filters$"], outputs: ["advancedSearchChanged"] }, { kind: "component", type: ListViewEmptyStateComponent, selector: "lib-list-view-empty-state", inputs: ["title", "sub-title", "new-item-label"] }, { kind: "component", type: PagerComponent, selector: "lib-pager", inputs: ["busy", "count", "page", "page-size", "page-size-options", "sort-options", "sort", "sort-dir"], outputs: ["pageChanged", "pageSizeChanged", "sortChanged", "sortdirChanged"] }, { kind: "component", type: SkeletonLoaderComponent, selector: "lib-skeleton-loader", inputs: ["count", "type", "deck-class"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
|
|
1594
1600
|
}
|
|
1595
1601
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ListViewComponent, decorators: [{
|
|
1596
1602
|
type: Component,
|
|
1597
|
-
args: [{ selector: 'lib-list-view', template: "<div>\r\n <lib-advanced-search *ngIf=\"searchOptions && searchOptions.length > 0\"\r\n [search-options]=\"searchOptions
|
|
1598
|
-
}], ctorParameters: () => [], propDecorators: { searchOptions
|
|
1603
|
+
args: [{ selector: 'lib-list-view', template: "<div *ngIf=\"searchOptions$ | async as searchOptions\">\r\n <lib-advanced-search *ngIf=\"searchOptions && searchOptions.length > 0\"\r\n [search-options$]=\"searchOptions$\"\r\n [operators-disabled]=\"operatorsDisabled\"\r\n [filters$]=\"filters$\"\r\n (advancedSearchChanged)=\"emitAdvancedSearchChanged($event)\">\r\n </lib-advanced-search>\r\n\r\n <lib-pager *ngIf=\"showPager && (pagerPosition == 'top' || pagerPosition == 'both')\"\r\n [page]=\"page\"\r\n [page-size]=\"pageSize\"\r\n [count]=\"count\"\r\n [sort-options]=\"sortOptions\"\r\n [sort]=\"sort\"\r\n [sort-dir]=\"sortdir\"\r\n [busy]=\"busy\"\r\n (pageChanged)=\"emitPageChanged($event)\"\r\n (pageSizeChanged)=\"emitPageSizeChanged($event)\"\r\n (sortChanged)=\"emitSortChanged($event)\"\r\n (sortdirChanged)=\"emitSortdirChanged($event)\">\r\n <ng-content select=\"[pager-near-content]\" ngProjectAs=\"[pager-near-content]\"></ng-content>\r\n </lib-pager>\r\n</div>\r\n\r\n<ng-container [ngSwitch]=\"view\">\r\n\r\n <ng-container *ngSwitchCase=\"'tiles'\">\r\n <div [class]=\"busy ? 'cards-deck-1' : tilesDeckClass\">\r\n\r\n <lib-skeleton-loader *ngIf=\"busy\" [deck-class]=\"tilesDeckClass\" [count]=\"7\" [type]=\"'tiles'\"></lib-skeleton-loader>\r\n\r\n <ng-container *ngIf=\"!busy && items && items.length > 0\">\r\n <ng-container *ngFor=\"let item of items\">\r\n <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\r\n <ng-template [ngTemplateOutlet]=\"tileTemplate.template\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n </ng-container>\r\n\r\n\r\n <!-- *ngSwitchCase=\"'gallery'\" -->\r\n <ng-container *ngSwitchCase=\"'gallery'\">\r\n <ul role=\"list\" role=\"list\" [class]=\"tilesDeckClass\">\r\n\r\n <lib-skeleton-loader *ngIf=\"busy\" [count]=\"5\" [type]=\"'tiles'\"></lib-skeleton-loader>\r\n\r\n <ng-container *ngIf=\"!busy && items && items.length > 0\">\r\n <ng-container *ngFor=\"let item of items\" role=\"listitem\">\r\n <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\r\n <ng-template [ngTemplateOutlet]=\"tileTemplate.template\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </ul>\r\n </ng-container>\r\n\r\n <!-- *ngSwitchCase=\"'table'\" -->\r\n <ng-container *ngSwitchDefault>\r\n\r\n <div class=\"list-view-container\">\r\n <div class=\"list-view-container-inner\">\r\n <table class=\"list-view-table\">\r\n <thead class=\"list-view-thead\">\r\n <tr>\r\n <ng-container *ngIf=\"detailsSectionSupported\">\r\n <th class=\"list-view-th-details\"></th>\r\n </ng-container>\r\n <ng-container *ngFor=\"let col of columns\">\r\n <th scope=\"col\"\r\n [class]=\"col.fullWidth ? fullWidthTHClass : 'list-view-th'\">\r\n {{col.title}}\r\n </th>\r\n </ng-container>\r\n </tr>\r\n </thead>\r\n <tbody class=\"list-view-tbody\"\r\n *ngIf=\"busy\">\r\n <ng-container *ngFor=\"let item of loaderItems;let i=index\">\r\n <tr class=\"list-view-tr\">\r\n <ng-container *ngIf=\"detailsSectionSupported\">\r\n <td class=\"list-view-td-details\"\r\n *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\r\n <button disabled\r\n title=\"expand-collapse\"\r\n type=\"button\"\r\n class=\"expand-collapse-button\">\r\n <!-- Heroicon name: solid/plus -->\r\n <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\r\n </button>\r\n </td>\r\n <ng-template #hiddenDetailsButton>\r\n <td class=\"list-view-td-details\"></td>\r\n </ng-template>\r\n </ng-container>\r\n <td *ngFor=\"let col of columns\"\r\n [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\r\n <div class=\"w-full animate-pulse h-8 bg-gray-200 rounded\"></div>\r\n </td>\r\n </tr>\r\n <ng-container *ngIf=\"detailsSectionSupported\">\r\n <tr *ngIf=\"item.detailsExpanded\">\r\n <td [colSpan]=\"columns.length + 1\"\r\n class=\"list-view-td bg-gray-100\">\r\n <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </ng-container>\r\n </tbody>\r\n <tbody class=\"list-view-tbody\"\r\n *ngIf=\"!busy\">\r\n <ng-container *ngFor=\"let item of items;let i=index\">\r\n <tr class=\"list-view-tr\">\r\n <ng-container *ngIf=\"detailsSectionSupported\">\r\n <td class=\"list-view-td-details\"\r\n *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\r\n <button (click)=\"toggleDetails(item)\"\r\n title=\"toggleDetails\"\r\n type=\"button\"\r\n class=\"expand-collapse-button\">\r\n <!-- Heroicon name: solid/plus -->\r\n <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\r\n </button>\r\n </td>\r\n <ng-template #hiddenDetailsButton>\r\n <td class=\"list-view-td-details\"></td>\r\n </ng-template>\r\n </ng-container>\r\n <td *ngFor=\"let col of columns\"\r\n [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\r\n <ng-template [ngTemplateOutlet]=\"col.template\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n </td>\r\n </tr>\r\n <ng-container *ngIf=\"detailsSectionSupported\">\r\n <tr *ngIf=\"item.detailsExpanded\">\r\n <td [colSpan]=\"columns.length + 1\"\r\n class=\"list-view-td bg-gray-100\">\r\n <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </ng-container>\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!busy && items && items.length === 0\">\r\n <div class=\"cards-deck-1\">\r\n <lib-list-view-empty-state></lib-list-view-empty-state>\r\n </div>\r\n </ng-container>\r\n</ng-container>\r\n\r\n<ng-content></ng-content>\r\n\r\n<div class=\"px-2 mt-2\"\r\n *ngIf=\"items && items.length !== 0 && showPager && (pagerPosition == 'bottom' || pagerPosition == 'both')\">\r\n <lib-pager [page]=\"page\"\r\n [page-size]=\"pageSize\"\r\n [count]=\"count\"\r\n [sort-options]=\"sortOptions\"\r\n [sort]=\"sort\"\r\n [sort-dir]=\"sortdir\"\r\n [busy]=\"busy\"\r\n (pageChanged)=\"emitPageChanged($event)\"\r\n (pageSizeChanged)=\"emitPageSizeChanged($event)\"\r\n (sortChanged)=\"emitSortChanged($event)\"\r\n (sortdirChanged)=\"emitSortdirChanged($event)\">\r\n </lib-pager>\r\n</div>\r\n" }]
|
|
1604
|
+
}], ctorParameters: () => [], propDecorators: { searchOptions$: [{
|
|
1599
1605
|
type: Input,
|
|
1600
|
-
args: ['search-options']
|
|
1601
|
-
}], filters
|
|
1602
|
-
type: Input
|
|
1606
|
+
args: ['search-options$']
|
|
1607
|
+
}], filters$: [{
|
|
1608
|
+
type: Input,
|
|
1609
|
+
args: ['filters$']
|
|
1603
1610
|
}], busy: [{
|
|
1604
1611
|
type: Input
|
|
1605
1612
|
}], items: [{
|