@coreui/angular-pro 4.2.20 → 4.2.22
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/esm2020/lib/dropdown/dropdown/dropdown.component.mjs +1 -1
- package/esm2020/lib/multi-select/multi-select-option/multi-select-option.component.mjs +1 -1
- package/esm2020/lib/sidebar/sidebar/sidebar.component.mjs +14 -7
- package/esm2020/lib/smart-table/smart-table/smart-table.component.mjs +9 -9
- package/esm2020/lib/smart-table/smart-table-filter/smart-table-filter.component.mjs +64 -19
- package/esm2020/lib/smart-table/smart-table-head/smart-table-head.component.mjs +7 -4
- package/esm2020/lib/smart-table/smart-table-items-per-page-selector/smart-table-items-per-page-selector.component.mjs +8 -5
- package/esm2020/lib/smart-table/smart-table.module.mjs +1 -1
- package/fesm2015/coreui-angular-pro.mjs +94 -38
- package/fesm2015/coreui-angular-pro.mjs.map +1 -1
- package/fesm2020/coreui-angular-pro.mjs +91 -37
- package/fesm2020/coreui-angular-pro.mjs.map +1 -1
- package/lib/smart-table/smart-table-filter/smart-table-filter.component.d.ts +13 -8
- package/lib/smart-table/smart-table-items-per-page-selector/smart-table-items-per-page-selector.component.d.ts +2 -2
- package/package.json +2 -2
|
@@ -7,7 +7,7 @@ import * as i1 from '@angular/animations';
|
|
|
7
7
|
import { animation, animate, style, useAnimation, trigger, state, transition, group, query } from '@angular/animations';
|
|
8
8
|
import * as i3 from '@angular/router';
|
|
9
9
|
import { NavigationEnd, RouterModule } from '@angular/router';
|
|
10
|
-
import { BehaviorSubject, Observable, fromEvent, zipWith, withLatestFrom, Subject } from 'rxjs';
|
|
10
|
+
import { BehaviorSubject, Observable, fromEvent, zipWith, withLatestFrom, Subject, distinctUntilChanged, tap, map, debounceTime } from 'rxjs';
|
|
11
11
|
import { filter } from 'rxjs/operators';
|
|
12
12
|
import { isValid, format } from 'date-fns';
|
|
13
13
|
import * as i2 from '@angular/forms';
|
|
@@ -11350,8 +11350,11 @@ class SidebarComponent {
|
|
|
11350
11350
|
* Toggle the visibility of sidebar component. [docs]
|
|
11351
11351
|
*/
|
|
11352
11352
|
set visible(value) {
|
|
11353
|
-
|
|
11354
|
-
|
|
11353
|
+
const visible = coerceBooleanProperty(value);
|
|
11354
|
+
if (this._visible !== visible) {
|
|
11355
|
+
this._visible = visible;
|
|
11356
|
+
this.visibleChange.emit(this._visible);
|
|
11357
|
+
}
|
|
11355
11358
|
}
|
|
11356
11359
|
get visible() {
|
|
11357
11360
|
return this._visible;
|
|
@@ -11368,6 +11371,9 @@ class SidebarComponent {
|
|
|
11368
11371
|
this.unfoldable = newState.unfoldable;
|
|
11369
11372
|
}
|
|
11370
11373
|
}
|
|
11374
|
+
else {
|
|
11375
|
+
this.visible = (newState.visible ?? this.visible) && !this.overlaid;
|
|
11376
|
+
}
|
|
11371
11377
|
this.state = {
|
|
11372
11378
|
...this.state,
|
|
11373
11379
|
...newState
|
|
@@ -11389,7 +11395,7 @@ class SidebarComponent {
|
|
|
11389
11395
|
sidebar: true,
|
|
11390
11396
|
'sidebar-fixed': this.position === 'fixed' && !mobile,
|
|
11391
11397
|
'sidebar-narrow': this.narrow && !this.unfoldable,
|
|
11392
|
-
'sidebar-narrow-unfoldable': unfoldable,
|
|
11398
|
+
'sidebar-narrow-unfoldable': this.unfoldable,
|
|
11393
11399
|
'sidebar-overlaid': this.overlaid,
|
|
11394
11400
|
[`sidebar-${this.placement}`]: !!this.placement,
|
|
11395
11401
|
[`sidebar-${this.colorScheme}`]: !!this.colorScheme,
|
|
@@ -11453,12 +11459,13 @@ class SidebarComponent {
|
|
|
11453
11459
|
const layoutChanges = this.breakpointObserver.observe([onMobile]);
|
|
11454
11460
|
this.layoutChangeSubscription = layoutChanges.subscribe((result) => {
|
|
11455
11461
|
const isOnMobile = result.breakpoints[onMobile];
|
|
11462
|
+
const isUnfoldable = isOnMobile ? false : this.unfoldable;
|
|
11456
11463
|
if (this.onMobile !== isOnMobile) {
|
|
11457
11464
|
this.onMobile = isOnMobile;
|
|
11458
11465
|
this.sidebarService.toggle({
|
|
11459
11466
|
mobile: isOnMobile,
|
|
11460
|
-
unfoldable:
|
|
11461
|
-
visible: isOnMobile
|
|
11467
|
+
unfoldable: isUnfoldable,
|
|
11468
|
+
visible: (!isOnMobile) || isUnfoldable,
|
|
11462
11469
|
sidebar: this
|
|
11463
11470
|
});
|
|
11464
11471
|
}
|
|
@@ -11476,7 +11483,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
11476
11483
|
args: [{
|
|
11477
11484
|
selector: 'c-sidebar',
|
|
11478
11485
|
exportAs: 'cSidebar',
|
|
11479
|
-
template: '<ng-content></ng-content>'
|
|
11486
|
+
template: '<ng-content></ng-content>'
|
|
11480
11487
|
}]
|
|
11481
11488
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
11482
11489
|
type: Inject,
|
|
@@ -12467,23 +12474,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
12467
12474
|
}]
|
|
12468
12475
|
}] });
|
|
12469
12476
|
|
|
12477
|
+
var _SmartTableFilterComponent_dueTime, _SmartTableFilterComponent_value, _SmartTableFilterComponent_eventType, _SmartTableFilterComponent_lazy, _SmartTableFilterComponent_valueSubscription, _SmartTableFilterComponent_inputSubscription;
|
|
12470
12478
|
class SmartTableFilterComponent {
|
|
12471
12479
|
constructor() {
|
|
12480
|
+
_SmartTableFilterComponent_dueTime.set(this, 300);
|
|
12481
|
+
_SmartTableFilterComponent_value.set(this, '');
|
|
12482
|
+
_SmartTableFilterComponent_eventType.set(this, '');
|
|
12483
|
+
_SmartTableFilterComponent_lazy.set(this, false);
|
|
12484
|
+
_SmartTableFilterComponent_valueSubscription.set(this, void 0);
|
|
12485
|
+
_SmartTableFilterComponent_inputSubscription.set(this, void 0);
|
|
12486
|
+
this.value$ = new BehaviorSubject('');
|
|
12472
12487
|
this.filterLabel = 'Filter:';
|
|
12473
12488
|
this.filterPlaceholder = 'Filter';
|
|
12474
12489
|
this.valueChange = new EventEmitter();
|
|
12475
|
-
this._value = '';
|
|
12476
|
-
this.eventType = '';
|
|
12477
12490
|
}
|
|
12478
|
-
set
|
|
12479
|
-
|
|
12480
|
-
this._value = value;
|
|
12481
|
-
}
|
|
12482
|
-
if (this.eventType)
|
|
12483
|
-
this.valueChange.emit({ value, type: this.eventType });
|
|
12491
|
+
set tableFilter(value) {
|
|
12492
|
+
__classPrivateFieldSet(this, _SmartTableFilterComponent_lazy, (typeof value === 'object' && value.lazy) ? true : false, "f");
|
|
12484
12493
|
}
|
|
12485
|
-
|
|
12486
|
-
|
|
12494
|
+
;
|
|
12495
|
+
set value(value) {
|
|
12496
|
+
this.value$.next(value);
|
|
12487
12497
|
}
|
|
12488
12498
|
get hostClasses() {
|
|
12489
12499
|
return {
|
|
@@ -12491,24 +12501,63 @@ class SmartTableFilterComponent {
|
|
|
12491
12501
|
'mb-2': true
|
|
12492
12502
|
};
|
|
12493
12503
|
}
|
|
12494
|
-
|
|
12495
|
-
this.
|
|
12496
|
-
|
|
12504
|
+
ngAfterViewInit() {
|
|
12505
|
+
this.setSubscription();
|
|
12506
|
+
}
|
|
12507
|
+
ngOnDestroy() {
|
|
12508
|
+
this.setSubscription(false);
|
|
12509
|
+
}
|
|
12510
|
+
setSubscription(subscribe = !__classPrivateFieldGet(this, _SmartTableFilterComponent_valueSubscription, "f")) {
|
|
12511
|
+
if (subscribe) {
|
|
12512
|
+
__classPrivateFieldSet(this, _SmartTableFilterComponent_valueSubscription, this.value$
|
|
12513
|
+
.pipe(distinctUntilChanged())
|
|
12514
|
+
.subscribe(value => {
|
|
12515
|
+
if (__classPrivateFieldGet(this, _SmartTableFilterComponent_value, "f") !== value) {
|
|
12516
|
+
__classPrivateFieldSet(this, _SmartTableFilterComponent_value, value, "f");
|
|
12517
|
+
this.valueChange.emit({ value, type: __classPrivateFieldGet(this, _SmartTableFilterComponent_eventType, "f") });
|
|
12518
|
+
}
|
|
12519
|
+
}), "f");
|
|
12520
|
+
const eventName = __classPrivateFieldGet(this, _SmartTableFilterComponent_lazy, "f") ? 'change' : 'input';
|
|
12521
|
+
let dueTime = __classPrivateFieldGet(this, _SmartTableFilterComponent_dueTime, "f");
|
|
12522
|
+
__classPrivateFieldSet(this, _SmartTableFilterComponent_inputSubscription, fromEvent(this.filterInput.nativeElement, eventName)
|
|
12523
|
+
.pipe(tap((event) => {
|
|
12524
|
+
dueTime = __classPrivateFieldGet(this, _SmartTableFilterComponent_lazy, "f") ? 0 : __classPrivateFieldGet(this, _SmartTableFilterComponent_dueTime, "f");
|
|
12525
|
+
__classPrivateFieldSet(this, _SmartTableFilterComponent_eventType, event.type ?? eventName, "f");
|
|
12526
|
+
}), map(event => {
|
|
12527
|
+
return event.target.value;
|
|
12528
|
+
}), debounceTime(dueTime))
|
|
12529
|
+
.subscribe((value) => {
|
|
12530
|
+
if (value !== __classPrivateFieldGet(this, _SmartTableFilterComponent_value, "f")) {
|
|
12531
|
+
this.value$.next(value);
|
|
12532
|
+
}
|
|
12533
|
+
}), "f");
|
|
12534
|
+
}
|
|
12535
|
+
else {
|
|
12536
|
+
__classPrivateFieldGet(this, _SmartTableFilterComponent_inputSubscription, "f")?.unsubscribe();
|
|
12537
|
+
this.value$.complete();
|
|
12538
|
+
__classPrivateFieldGet(this, _SmartTableFilterComponent_valueSubscription, "f")?.unsubscribe();
|
|
12539
|
+
}
|
|
12497
12540
|
}
|
|
12498
12541
|
}
|
|
12542
|
+
_SmartTableFilterComponent_dueTime = new WeakMap(), _SmartTableFilterComponent_value = new WeakMap(), _SmartTableFilterComponent_eventType = new WeakMap(), _SmartTableFilterComponent_lazy = new WeakMap(), _SmartTableFilterComponent_valueSubscription = new WeakMap(), _SmartTableFilterComponent_inputSubscription = new WeakMap();
|
|
12499
12543
|
SmartTableFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SmartTableFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12500
|
-
SmartTableFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: SmartTableFilterComponent, selector: "c-smart-table-filter", inputs: { filterLabel: "filterLabel", filterPlaceholder: "filterPlaceholder", value: "value" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<label cLabel=\"col\" class=\"col-
|
|
12544
|
+
SmartTableFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: SmartTableFilterComponent, selector: "c-smart-table-filter", inputs: { filterLabel: "filterLabel", filterPlaceholder: "filterPlaceholder", tableFilter: "tableFilter", value: "value" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class": "this.hostClasses" } }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true, static: true }], ngImport: i0, template: "<label *ngIf=\"!!filterLabel\" cLabel=\"col\" class=\"col-auto\">{{filterLabel}}</label>\r\n<div class=\"col-auto\">\r\n <input\r\n [placeholder]=\"filterPlaceholder\"\r\n [value]=\"(value$ | async)\"\r\n cFormControl\r\n size=\"10\"\r\n #filterInput\r\n />\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "directive", type: FormLabelDirective, selector: "[cLabel]", inputs: ["cLabel", "sizing"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
12501
12545
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SmartTableFilterComponent, decorators: [{
|
|
12502
12546
|
type: Component,
|
|
12503
|
-
args: [{ selector: 'c-smart-table-filter', template: "<label cLabel=\"col\" class=\"col-
|
|
12547
|
+
args: [{ selector: 'c-smart-table-filter', changeDetection: ChangeDetectionStrategy.OnPush, template: "<label *ngIf=\"!!filterLabel\" cLabel=\"col\" class=\"col-auto\">{{filterLabel}}</label>\r\n<div class=\"col-auto\">\r\n <input\r\n [placeholder]=\"filterPlaceholder\"\r\n [value]=\"(value$ | async)\"\r\n cFormControl\r\n size=\"10\"\r\n #filterInput\r\n />\r\n</div>\r\n" }]
|
|
12504
12548
|
}], ctorParameters: function () { return []; }, propDecorators: { filterLabel: [{
|
|
12505
12549
|
type: Input
|
|
12506
12550
|
}], filterPlaceholder: [{
|
|
12507
12551
|
type: Input
|
|
12552
|
+
}], tableFilter: [{
|
|
12553
|
+
type: Input
|
|
12508
12554
|
}], value: [{
|
|
12509
12555
|
type: Input
|
|
12510
12556
|
}], valueChange: [{
|
|
12511
12557
|
type: Output
|
|
12558
|
+
}], filterInput: [{
|
|
12559
|
+
type: ViewChild,
|
|
12560
|
+
args: ['filterInput', { static: true }]
|
|
12512
12561
|
}], hostClasses: [{
|
|
12513
12562
|
type: HostBinding,
|
|
12514
12563
|
args: ['class']
|
|
@@ -12739,21 +12788,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
12739
12788
|
args: ['class']
|
|
12740
12789
|
}] } });
|
|
12741
12790
|
|
|
12791
|
+
var _SmartTableItemsPerPageSelectorComponent_itemsPerPage;
|
|
12742
12792
|
class SmartTableItemsPerPageSelectorComponent {
|
|
12743
12793
|
constructor() {
|
|
12744
|
-
this
|
|
12794
|
+
_SmartTableItemsPerPageSelectorComponent_itemsPerPage.set(this, 5);
|
|
12745
12795
|
this.itemsPerPageLabel = 'Items per page:';
|
|
12746
12796
|
this.itemsPerPageOptions = [5, 10, 20, 50];
|
|
12747
12797
|
this.itemsPerPageChange = new EventEmitter();
|
|
12748
12798
|
}
|
|
12749
12799
|
set itemsPerPage(value) {
|
|
12750
|
-
if (this
|
|
12751
|
-
this
|
|
12800
|
+
if (__classPrivateFieldGet(this, _SmartTableItemsPerPageSelectorComponent_itemsPerPage, "f") != value) {
|
|
12801
|
+
__classPrivateFieldSet(this, _SmartTableItemsPerPageSelectorComponent_itemsPerPage, value, "f");
|
|
12752
12802
|
this.itemsPerPageChange.emit(value);
|
|
12753
12803
|
}
|
|
12754
12804
|
}
|
|
12755
12805
|
get itemsPerPage() {
|
|
12756
|
-
return this
|
|
12806
|
+
return __classPrivateFieldGet(this, _SmartTableItemsPerPageSelectorComponent_itemsPerPage, "f");
|
|
12757
12807
|
}
|
|
12758
12808
|
get hostClasses() {
|
|
12759
12809
|
return {
|
|
@@ -12761,6 +12811,7 @@ class SmartTableItemsPerPageSelectorComponent {
|
|
|
12761
12811
|
};
|
|
12762
12812
|
}
|
|
12763
12813
|
}
|
|
12814
|
+
_SmartTableItemsPerPageSelectorComponent_itemsPerPage = new WeakMap();
|
|
12764
12815
|
SmartTableItemsPerPageSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SmartTableItemsPerPageSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12765
12816
|
SmartTableItemsPerPageSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: SmartTableItemsPerPageSelectorComponent, selector: "c-smart-table-items-per-page-selector", inputs: { itemsPerPage: "itemsPerPage", itemsPerPageLabel: "itemsPerPageLabel", itemsPerPageOptions: "itemsPerPageOptions" }, outputs: { itemsPerPageChange: "itemsPerPageChange" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<label cLabel=\"col\" class=\"col-sm-auto\">{{itemsPerPageLabel}}</label>\r\n<div class=\"col-auto\">\r\n <select [(ngModel)]=\"itemsPerPage\" cSelect name=\"itemsPerPageSelector\">\r\n <option *ngFor=\"let option of itemsPerPageOptions; let i = index\" [ngValue]=\"option\">{{option}}</option>\r\n </select>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: FormLabelDirective, selector: "[cLabel]", inputs: ["cLabel", "sizing"] }, { kind: "directive", type: FormSelectDirective, selector: "select[cSelect]", inputs: ["sizing", "valid"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
12766
12817
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SmartTableItemsPerPageSelectorComponent, decorators: [{
|
|
@@ -12874,7 +12925,10 @@ class SmartTableHeadComponent {
|
|
|
12874
12925
|
return typeof column !== 'object' ? true : typeof column.filter === 'undefined' ? true : column.filter;
|
|
12875
12926
|
}
|
|
12876
12927
|
columnSorterEnabled(column) {
|
|
12877
|
-
|
|
12928
|
+
if (!this.columnSorter) {
|
|
12929
|
+
return false;
|
|
12930
|
+
}
|
|
12931
|
+
return (typeof column !== 'object') ? true : typeof column.sorter === 'undefined' ? true : column.sorter;
|
|
12878
12932
|
}
|
|
12879
12933
|
handleColumnFilterValueChange($event, column) {
|
|
12880
12934
|
const columnKey = this.columnKey(column);
|
|
@@ -12896,10 +12950,10 @@ class SmartTableHeadComponent {
|
|
|
12896
12950
|
}
|
|
12897
12951
|
}
|
|
12898
12952
|
SmartTableHeadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SmartTableHeadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12899
|
-
SmartTableHeadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: SmartTableHeadComponent, selector: "c-smart-table-head", inputs: { columnFilter: "columnFilter", columnFilterState: "columnFilterState", columnSorter: "columnSorter", component: "component", columns: "columns", selectable: "selectable", selectAll: "selectAll", sorterValue: "sorterValue", columnFilterTemplates: "columnFilterTemplates" }, outputs: { columnFilterStateChange: "columnFilterStateChange", sorterStateChange: "sorterStateChange", selectAllChange: "selectAllChange" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<tr>\
|
|
12953
|
+
SmartTableHeadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: SmartTableHeadComponent, selector: "c-smart-table-head", inputs: { columnFilter: "columnFilter", columnFilterState: "columnFilterState", columnSorter: "columnSorter", component: "component", columns: "columns", selectable: "selectable", selectAll: "selectAll", sorterValue: "sorterValue", columnFilterTemplates: "columnFilterTemplates" }, outputs: { columnFilterStateChange: "columnFilterStateChange", sorterStateChange: "sorterStateChange", selectAllChange: "selectAllChange" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<tr>\n <th *ngIf=\"selectable\">\n <input (change)=\"handleSelectAllChecked($event)\"\n [checked]=\"selectAll === true\"\n [indeterminate]=\"selectAll === 'indeterminate'\"\n cFormCheckInput>\n </th>\n <th\n (click)=\"handleSortClick(column, i)\"\n *ngFor=\"let column of columns; let i = index\"\n [cHtmlAttr]=\"tableHeaderCellProps(column)\"\n [cTableColor]=\"tableHeaderCellColor(column)\"\n [ngStyle]=\"tableHeaderCellStyles(column)\"\n >\n <div class=\"d-inline\">{{ columnLabel(column) }}</div>\n <ng-template [ngIf]=\"columnSorter && columnSorterEnabled(column)\">\n <ng-container\n *ngTemplateOutlet=\"columnSorterIconTemplate; context: { $implicit: getColumnSorterState(column) }\"\n ></ng-container>\n </ng-template>\n </th>\n</tr>\n<tr *ngIf=\"columnFilter\">\n <th *ngIf=\"selectable\"></th>\n <th *ngFor=\"let column of columns; let i = index\"\n [cHtmlAttr]=\"tableHeaderCellProps(column)\"\n [cTableColor]=\"tableHeaderCellColor(column)\"\n [ngStyle]=\"tableHeaderCellStyles(column)\"\n >\n <ng-container *ngTemplateOutlet=\"columnFilterTemplates[getColumnFilter(column)] ?? defaultColumnFilter; context: {$implicit: column, header: this}\"></ng-container>\n <ng-template #defaultColumnFilter let-column>\n <input\n (change)=\"handleColumnFilterValueChange($event, column)\"\n (input)=\"handleColumnFilterValueChange($event, column)\"\n *ngIf=\"columnFilterEnabled(column)\"\n [value]=\"columnFilterState[columnKey(column)] ?? ''\"\n cFormControl\n sizing=\"sm\"\n />\n </ng-template>\n </th>\n</tr>\n\n<ng-template #columnSorterIconTemplate let-columnSorterState>\n <ng-container [ngSwitch]=\"columnSorterState\">\n <span *ngSwitchCase=\"'asc'\" class=\"float-end me-1\">\n <ng-container *ngTemplateOutlet=\"sortingIconAscendingTemplate\"></ng-container>\n </span>\n <span *ngSwitchCase=\"'desc'\" class=\"float-end me-1\">\n <ng-container *ngTemplateOutlet=\"sortingIconDescendingTemplate\"></ng-container>\n </span>\n <span *ngSwitchDefault class=\"opacity-25 float-end me-1\">\n <ng-container *ngTemplateOutlet=\"sortingIconTemplate\"></ng-container>\n </span>\n </ng-container>\n</ng-template>\n\n<!--todo: sortingIconCustom Templates-->\n<ng-template #sortingIconTemplate>\n <svg\n class=\"icon icon-custom-size\"\n role=\"img\"\n viewBox=\"0 0 512 512\"\n width=\"18\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <polygon\n class=\"ci-primary\"\n fill=\"var(--ci-primary-color, currentColor)\"\n points=\"384 433.373 384 160 352 160 352 434.51 282.177 364.687 259.55 387.313 367.432 495.196 475.313 387.313 452.687 364.687 384 433.373\"\n ></polygon>\n <polygon\n class=\"ci-primary\"\n fill=\"var(--ci-primary-color, currentColor)\"\n points=\"159.432 17.372 51.55 125.255 74.177 147.882 144 78.059 144 352 176 352 176 79.195 244.687 147.882 267.313 125.255 159.432 17.372\"\n ></polygon>\n </svg>\n</ng-template>\n\n<ng-template #sortingIconAscendingTemplate>\n <svg\n class=\"icon icon-custom-size\"\n role=\"img\"\n viewBox=\"0 0 512 512\"\n width=\"18\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <polygon\n class=\"ci-primary\"\n fill=\"var(--ci-primary-color, currentColor)\"\n points=\"390.624 150.625 256 16 121.376 150.625 144.004 173.252 240.001 77.254 240.001 495.236 272.001 495.236 272.001 77.257 367.996 173.252 390.624 150.625\"\n ></polygon>\n </svg>\n</ng-template>\n\n<ng-template #sortingIconDescendingTemplate>\n <svg\n class=\"icon icon-custom-size\"\n role=\"img\"\n viewBox=\"0 0 512 512\"\n width=\"18\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <polygon\n class=\"ci-primary\"\n fill=\"var(--ci-primary-color, currentColor)\"\n points=\"367.997 338.75 271.999 434.747 271.999 17.503 239.999 17.503 239.999 434.745 144.003 338.75 121.376 361.377 256 496 390.624 361.377 367.997 338.75\"\n ></polygon>\n </svg>\n</ng-template>\n", styles: [":host{-webkit-user-select:none;user-select:none}:host.thead{display:table-header-group;vertical-align:middle;border-color:inherit}:host.tfoot{display:table-footer-group;vertical-align:middle;border-color:inherit}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: TableColorDirective, selector: "[cTableColor]", inputs: ["cTableColor"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "directive", type: FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }] });
|
|
12900
12954
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SmartTableHeadComponent, decorators: [{
|
|
12901
12955
|
type: Component,
|
|
12902
|
-
args: [{ selector: 'c-smart-table-head', template: "<tr>\
|
|
12956
|
+
args: [{ selector: 'c-smart-table-head', template: "<tr>\n <th *ngIf=\"selectable\">\n <input (change)=\"handleSelectAllChecked($event)\"\n [checked]=\"selectAll === true\"\n [indeterminate]=\"selectAll === 'indeterminate'\"\n cFormCheckInput>\n </th>\n <th\n (click)=\"handleSortClick(column, i)\"\n *ngFor=\"let column of columns; let i = index\"\n [cHtmlAttr]=\"tableHeaderCellProps(column)\"\n [cTableColor]=\"tableHeaderCellColor(column)\"\n [ngStyle]=\"tableHeaderCellStyles(column)\"\n >\n <div class=\"d-inline\">{{ columnLabel(column) }}</div>\n <ng-template [ngIf]=\"columnSorter && columnSorterEnabled(column)\">\n <ng-container\n *ngTemplateOutlet=\"columnSorterIconTemplate; context: { $implicit: getColumnSorterState(column) }\"\n ></ng-container>\n </ng-template>\n </th>\n</tr>\n<tr *ngIf=\"columnFilter\">\n <th *ngIf=\"selectable\"></th>\n <th *ngFor=\"let column of columns; let i = index\"\n [cHtmlAttr]=\"tableHeaderCellProps(column)\"\n [cTableColor]=\"tableHeaderCellColor(column)\"\n [ngStyle]=\"tableHeaderCellStyles(column)\"\n >\n <ng-container *ngTemplateOutlet=\"columnFilterTemplates[getColumnFilter(column)] ?? defaultColumnFilter; context: {$implicit: column, header: this}\"></ng-container>\n <ng-template #defaultColumnFilter let-column>\n <input\n (change)=\"handleColumnFilterValueChange($event, column)\"\n (input)=\"handleColumnFilterValueChange($event, column)\"\n *ngIf=\"columnFilterEnabled(column)\"\n [value]=\"columnFilterState[columnKey(column)] ?? ''\"\n cFormControl\n sizing=\"sm\"\n />\n </ng-template>\n </th>\n</tr>\n\n<ng-template #columnSorterIconTemplate let-columnSorterState>\n <ng-container [ngSwitch]=\"columnSorterState\">\n <span *ngSwitchCase=\"'asc'\" class=\"float-end me-1\">\n <ng-container *ngTemplateOutlet=\"sortingIconAscendingTemplate\"></ng-container>\n </span>\n <span *ngSwitchCase=\"'desc'\" class=\"float-end me-1\">\n <ng-container *ngTemplateOutlet=\"sortingIconDescendingTemplate\"></ng-container>\n </span>\n <span *ngSwitchDefault class=\"opacity-25 float-end me-1\">\n <ng-container *ngTemplateOutlet=\"sortingIconTemplate\"></ng-container>\n </span>\n </ng-container>\n</ng-template>\n\n<!--todo: sortingIconCustom Templates-->\n<ng-template #sortingIconTemplate>\n <svg\n class=\"icon icon-custom-size\"\n role=\"img\"\n viewBox=\"0 0 512 512\"\n width=\"18\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <polygon\n class=\"ci-primary\"\n fill=\"var(--ci-primary-color, currentColor)\"\n points=\"384 433.373 384 160 352 160 352 434.51 282.177 364.687 259.55 387.313 367.432 495.196 475.313 387.313 452.687 364.687 384 433.373\"\n ></polygon>\n <polygon\n class=\"ci-primary\"\n fill=\"var(--ci-primary-color, currentColor)\"\n points=\"159.432 17.372 51.55 125.255 74.177 147.882 144 78.059 144 352 176 352 176 79.195 244.687 147.882 267.313 125.255 159.432 17.372\"\n ></polygon>\n </svg>\n</ng-template>\n\n<ng-template #sortingIconAscendingTemplate>\n <svg\n class=\"icon icon-custom-size\"\n role=\"img\"\n viewBox=\"0 0 512 512\"\n width=\"18\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <polygon\n class=\"ci-primary\"\n fill=\"var(--ci-primary-color, currentColor)\"\n points=\"390.624 150.625 256 16 121.376 150.625 144.004 173.252 240.001 77.254 240.001 495.236 272.001 495.236 272.001 77.257 367.996 173.252 390.624 150.625\"\n ></polygon>\n </svg>\n</ng-template>\n\n<ng-template #sortingIconDescendingTemplate>\n <svg\n class=\"icon icon-custom-size\"\n role=\"img\"\n viewBox=\"0 0 512 512\"\n width=\"18\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <polygon\n class=\"ci-primary\"\n fill=\"var(--ci-primary-color, currentColor)\"\n points=\"367.997 338.75 271.999 434.747 271.999 17.503 239.999 17.503 239.999 434.745 144.003 338.75 121.376 361.377 256 496 390.624 361.377 367.997 338.75\"\n ></polygon>\n </svg>\n</ng-template>\n", styles: [":host{-webkit-user-select:none;user-select:none}:host.thead{display:table-header-group;vertical-align:middle;border-color:inherit}:host.tfoot{display:table-footer-group;vertical-align:middle;border-color:inherit}\n"] }]
|
|
12903
12957
|
}], ctorParameters: function () { return []; }, propDecorators: { columnFilter: [{
|
|
12904
12958
|
type: Input
|
|
12905
12959
|
}], columnFilterState: [{
|
|
@@ -13269,7 +13323,7 @@ class SmartTableComponent {
|
|
|
13269
13323
|
}
|
|
13270
13324
|
handleTableFilterChange($event) {
|
|
13271
13325
|
const { value, type } = $event;
|
|
13272
|
-
const isLazy = typeof this.tableFilter === 'object' && this.tableFilter
|
|
13326
|
+
const isLazy = typeof this.tableFilter === 'object' && this.tableFilter.lazy === true;
|
|
13273
13327
|
if (((isLazy && type === 'input') || (!isLazy && type === 'change')) && value.length !== 0) {
|
|
13274
13328
|
return;
|
|
13275
13329
|
}
|
|
@@ -13335,20 +13389,20 @@ class SmartTableComponent {
|
|
|
13335
13389
|
}
|
|
13336
13390
|
if (changes['tableFilterValue']) {
|
|
13337
13391
|
const tableFilterValueChange = changes['tableFilterValue'];
|
|
13338
|
-
if (tableFilterValueChange.firstChange) {
|
|
13339
|
-
|
|
13340
|
-
|
|
13341
|
-
|
|
13342
|
-
}
|
|
13392
|
+
// if (tableFilterValueChange.firstChange) {
|
|
13393
|
+
const currentValue = tableFilterValueChange.currentValue;
|
|
13394
|
+
if (currentValue.length) {
|
|
13395
|
+
this.setActivePage(1);
|
|
13343
13396
|
}
|
|
13397
|
+
// }
|
|
13344
13398
|
}
|
|
13345
13399
|
}
|
|
13346
13400
|
}
|
|
13347
13401
|
SmartTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SmartTableComponent, deps: [{ token: i0.IterableDiffers }, { token: i0.KeyValueDiffers }], target: i0.ɵɵFactoryTarget.Component });
|
|
13348
|
-
SmartTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: SmartTableComponent, selector: "c-smart-table", inputs: { activePage: "activePage", cleaner: "cleaner", clickableRows: "clickableRows", columns: "columns", columnFilter: "columnFilter", columnFilterValue: "columnFilterValue", columnSorter: "columnSorter", footer: "footer", header: "header", items: "items", itemsPerPage: "itemsPerPage", itemsPerPageLabel: "itemsPerPageLabel", itemsPerPageOptions: "itemsPerPageOptions", itemsPerPageSelect: "itemsPerPageSelect", loading: "loading", noItemsLabel: "noItemsLabel", pagination: "pagination", selectable: "selectable", sorterValue: "sorterValue", tableFilter: "tableFilter", tableFilterLabel: "tableFilterLabel", tableFilterPlaceholder: "tableFilterPlaceholder", tableFilterValue: "tableFilterValue", tableBodyProps: "tableBodyProps", tableFootProps: "tableFootProps", tableHeadProps: "tableHeadProps", tableProps: "tableProps" }, outputs: { selectedItemsChange: "selectedItemsChange", sorterValueChange: "sorterValueChange", activePageChange: "activePageChange", itemsPerPageChange: "itemsPerPageChange", rowClick: "rowClick", columnFilterValueChange: "columnFilterValueChange", filteredItemsChange: "filteredItemsChange", tableFilterValueChange: "tableFilterValueChange" }, queries: [{ propertyName: "columnTemplates", predicate: TemplateIdDirective }], exportAs: ["cSmartTable"], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"itemsPerPageSelect || tableFilter || cleaner\" class=\"row my-2 mx-0\">\r\n <ng-template [ngIf]=\"tableFilter || cleaner\">\r\n <div class=\"col-auto p-0\">\r\n <c-smart-table-filter\r\n (valueChange)=\"handleTableFilterChange($event)\"\r\n *ngIf=\"tableFilter\"\r\n [filterLabel]=\"tableFilterLabel\"\r\n [filterPlaceholder]=\"tableFilterPlaceholder\"\r\n [value]=\"tableFilterState\"\r\n >\r\n </c-smart-table-filter>\r\n </div>\r\n <div class=\"col-auto p-0\">\r\n <button\r\n (click)=\"clean($event)\"\r\n *ngIf=\"cleaner\"\r\n [disabled]=\"!isFiltered\"\r\n [ngClass]=\"{'ms-1': tableFilter}\"\r\n [tabindex]=\"0\"\r\n cButton\r\n color=\"transparent\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"filterIconTemplate\"></ng-container>\r\n </button>\r\n </div>\r\n </ng-template>\r\n</div>\r\n<div class=\"position-relative\">\r\n <table [align]=\"tableProps?.align\"\r\n [borderColor]=\"tableProps?.borderColor\"\r\n [bordered]=\"tableProps?.bordered\"\r\n [borderless]=\"tableProps?.borderless\"\r\n [caption]=\"tableProps?.caption\"\r\n [color]=\"tableProps?.color\"\r\n [hover]=\"tableProps?.hover\"\r\n [responsive]=\"tableProps?.responsive\"\r\n [small]=\"tableProps?.small\"\r\n [striped]=\"tableProps?.striped\"\r\n [cHtmlAttr]=\"tableProps?.attributes ?? {}\"\r\n [cTableColor]=\"tableProps?.color\"\r\n cTable\r\n >\r\n <c-smart-table-head\r\n (columnFilterStateChange)=\"handleColumnFilterChange($event)\"\r\n (selectAllChange)=\"handleSelectAllChange($event)\"\r\n (sorterStateChange)=\"handleSortChange($event)\"\r\n *ngIf=\"header\"\r\n [columnFilterState]=\"columnFilterState\"\r\n [columnFilter]=\"columnFilter\"\r\n [columns]=\"columns\"\r\n [selectAll]=\"selectedAll\"\r\n [selectable]=\"selectable\"\r\n [sorterValue]=\"sorterValue\"\r\n [cHtmlAttr]=\"tableHeadProps?.attributes ?? {}\"\r\n [cTableColor]=\"tableHeadProps?.color\"\r\n [cAlign]=\"tableHeadProps?.align\"\r\n [columnFilterTemplates]=\"columnFilterTemplates\"\r\n ></c-smart-table-head>\r\n\r\n <ng-container *ngTemplateOutlet=\"tbodyDefaultTemplate\"></ng-container>\r\n\r\n <c-smart-table-head\r\n (selectAllChange)=\"handleSelectAllChange($event)\"\r\n (sorterStateChange)=\"handleSortChange($event)\"\r\n *ngIf=\"footer\"\r\n [columns]=\"columns\"\r\n [selectAll]=\"selectedAll\"\r\n [selectable]=\"selectable\"\r\n [sorterValue]=\"sorterValue\"\r\n [cHtmlAttr]=\"tableFootProps?.attributes ?? {}\"\r\n [cTableColor]=\"tableFootProps?.color\"\r\n [cAlign]=\"tableFootProps?.align\"\r\n component=\"tfoot\"\r\n [columnFilterTemplates]=\"columnFilterTemplates\"\r\n ></c-smart-table-head>\r\n\r\n </table>\r\n <c-element-cover\r\n *ngIf=\"loading\"\r\n [boundaries]=\"[\r\n { sides: ['top'], query: 'td' },\r\n { sides: ['bottom'], query: 'tbody' }\r\n ]\"\r\n ></c-element-cover>\r\n</div>\r\n<ng-template [ngIf]=\"pagination || itemsPerPageSelect\">\r\n <div class=\"row\">\r\n <div class=\"col\">\r\n <c-smart-pagination\r\n (activePageChange)=\"setActivePage($event)\"\r\n *ngIf=\"pagination && numberOfPages > 1\"\r\n [activePage]=\"activePage\"\r\n [pages]=\"numberOfPages\">\r\n </c-smart-pagination>\r\n </div>\r\n <div class=\"col-auto ms-auto\">\r\n <c-smart-table-items-per-page-selector\r\n (itemsPerPageChange)=\"handleItemsPerPageChange($event)\"\r\n *ngIf=\"itemsPerPageSelect\"\r\n [itemsPerPageLabel]=\"itemsPerPageLabel\"\r\n [itemsPerPageOptions]=\"itemsPerPageOptions\"\r\n [itemsPerPage]=\"itemsPerPage\"\r\n >\r\n </c-smart-table-items-per-page-selector>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #tbodyDefaultTemplate>\r\n <tbody [cHtmlAttr]=\"tableBodyProps?.attributes ?? {}\"\r\n [cTableColor]=\"tableBodyProps?.color\"\r\n [cAlign]=\"tableBodyProps?.align\"\r\n >\r\n <ng-template ngFor let-item [ngForOf]=\"currentItems\" let-cnt=\"count\" let-i=\"index\" let-isEven=\"even\" let-isOdd=\"odd\">\r\n <tr [tabindex]=\"clickableRows ? 0 : -1\"\r\n [ngStyle]=\"{cursor: clickableRows ? 'pointer' : 'auto'}\"\r\n (click)=\"handleRowClick({$event, item, i})\"\r\n [cTableActive]=\"item._props?.active\"\r\n [cTableColor]=\"item._props?.color\"\r\n [cAlign]=\"item._props?.align\"\r\n >\r\n <td *ngIf=\"selectable\"\r\n [cTableActive]=\"item?.['_cellProps']?._all?.active\"\r\n [cTableColor]=\"item?.['_cellProps']?._all?.color\"\r\n [cAlign]=\"item?.['_cellProps']?._all?.align\"\r\n >\r\n <input (change)=\"handleRowChecked($event, item)\" [checked]=\"item._selected ?? false\" cFormCheckInput>\r\n </td>\r\n <ng-template ngFor let-columnName [ngForOf]=\"rawColumnNames\" let-i=\"index\" >\r\n <ng-container *ngTemplateOutlet=\"templates['tableData'] || columnDefaultTemplate; context: {item, columnName, tdContent: item[columnName] }\"></ng-container>\r\n </ng-template>\r\n </tr>\r\n <ng-template [ngIf]=\"templates['tableDetails']\">\r\n <!-- <ng-container *ngTemplateOutlet=\"rowDetailsDefaultTemplate\"></ng-container>-->\r\n <tr><td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td></tr>\r\n <tr class=\"p-0\">\r\n <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">\r\n <ng-container *ngTemplateOutlet=\"templates['tableDetails']; context: {item, index: i}\"></ng-container>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n </ng-template>\r\n <ng-container *ngTemplateOutlet=\"noItemsDefaultTemplate\"></ng-container>\r\n </tbody>\r\n</ng-template>\r\n\r\n<ng-template #columnDefaultTemplate let-item=\"item\" let-columnName=\"columnName\" let-tdContent=\"tdContent\">\r\n <td\r\n [cTableActive]=\"tableDataCellProps(item, columnName)?.['active']\"\r\n [cTableColor]=\"tableDataCellProps(item, columnName)?.color\"\r\n [cAlign]=\"tableDataCellProps(item, columnName)?.align\"\r\n [ngClass]=\"tableDataCellClasses(item, columnName)\"\r\n >\r\n {{tdContent}}\r\n </td>\r\n</ng-template>\r\n\r\n<!--<ng-template #rowDetailsDefaultTemplate let-item let-index>-->\r\n<!-- <tr><td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td></tr>-->\r\n<!-- <tr class=\"p-0\">-->\r\n<!-- <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">-->\r\n<!-- <ng-container *ngTemplateOutlet=\"templates?.tableDetails\"></ng-container>-->\r\n<!-- </td>-->\r\n<!-- </tr>-->\r\n<!--</ng-template>-->\r\n\r\n<ng-template #noItemsDefaultTemplate>\r\n <tr *ngIf=\"!currentItems.length\">\r\n <td [colSpan]=\"colspan\" class=\"justify-content-center\">{{noItemsLabel}}</td>\r\n </tr>\r\n</ng-template>\r\n\r\n<!--todo: filterIconCustomTemplate-->\r\n<ng-template #filterIconTemplate>\r\n <svg class=\"icon icon-custom-size\" role=\"img\" viewBox=\"0 0 512 512\" width=\"18\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <polygon class=\"ci-primary\"\r\n fill=\"var(--ci-primary-color, currentColor)\"\r\n points=\"40 16 40 53.828 109.024 136 150.815 136 76.896 48 459.51 48 304 242.388 304 401.373 241.373 464 240 464 240 368 208 368 208 496 254.627 496 336 414.627 336 253.612 496 53.612 496 16 40 16\"></polygon>\r\n <polygon class=\"ci-primary\"\r\n fill=\"var(--ci-primary-color, currentColor)\"\r\n points=\"166.403 248.225 226.864 187.763 204.237 165.135 143.775 225.597 83.313 165.135 60.687 187.763 121.148 248.225 60.687 308.687 83.313 331.314 143.775 270.852 204.237 331.314 226.864 308.687 166.403 248.225\"></polygon>\r\n </svg>\r\n</ng-template>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ElementCoverComponent, selector: "c-element-cover, [cElementCover]", inputs: ["boundaries", "opacity"] }, { kind: "directive", type: TableDirective, selector: "table[cTable]", inputs: ["align", "borderColor", "bordered", "borderless", "caption", "color", "hover", "responsive", "small", "striped", "stripedColumns"] }, { kind: "directive", type: TableColorDirective, selector: "[cTableColor]", inputs: ["cTableColor"] }, { kind: "directive", type: TableActiveDirective, selector: "[cTableActive]", inputs: ["cTableActive"] }, { kind: "component", type: SmartPaginationComponent, selector: "c-smart-pagination", inputs: ["activePage", "arrows", "doubleArrows", "dots", "limit", "pages", "firstButton", "lastButton", "nextButton", "previousButton", "align", "size", "role"], outputs: ["activePageChange"], exportAs: ["cSmartPagination"] }, { kind: "directive", type: FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "directive", type: AlignDirective, selector: "[cAlign]", inputs: ["cAlign"] }, { kind: "component", type: SmartTableFilterComponent, selector: "c-smart-table-filter", inputs: ["filterLabel", "filterPlaceholder", "value"], outputs: ["valueChange"] }, { kind: "component", type: SmartTableItemsPerPageSelectorComponent, selector: "c-smart-table-items-per-page-selector", inputs: ["itemsPerPage", "itemsPerPageLabel", "itemsPerPageOptions"], outputs: ["itemsPerPageChange"] }, { kind: "component", type: SmartTableHeadComponent, selector: "c-smart-table-head", inputs: ["columnFilter", "columnFilterState", "columnSorter", "component", "columns", "selectable", "selectAll", "sorterValue", "columnFilterTemplates"], outputs: ["columnFilterStateChange", "sorterStateChange", "selectAllChange"] }] });
|
|
13402
|
+
SmartTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: SmartTableComponent, selector: "c-smart-table", inputs: { activePage: "activePage", cleaner: "cleaner", clickableRows: "clickableRows", columns: "columns", columnFilter: "columnFilter", columnFilterValue: "columnFilterValue", columnSorter: "columnSorter", footer: "footer", header: "header", items: "items", itemsPerPage: "itemsPerPage", itemsPerPageLabel: "itemsPerPageLabel", itemsPerPageOptions: "itemsPerPageOptions", itemsPerPageSelect: "itemsPerPageSelect", loading: "loading", noItemsLabel: "noItemsLabel", pagination: "pagination", selectable: "selectable", sorterValue: "sorterValue", tableFilter: "tableFilter", tableFilterLabel: "tableFilterLabel", tableFilterPlaceholder: "tableFilterPlaceholder", tableFilterValue: "tableFilterValue", tableBodyProps: "tableBodyProps", tableFootProps: "tableFootProps", tableHeadProps: "tableHeadProps", tableProps: "tableProps" }, outputs: { selectedItemsChange: "selectedItemsChange", sorterValueChange: "sorterValueChange", activePageChange: "activePageChange", itemsPerPageChange: "itemsPerPageChange", rowClick: "rowClick", columnFilterValueChange: "columnFilterValueChange", filteredItemsChange: "filteredItemsChange", tableFilterValueChange: "tableFilterValueChange" }, queries: [{ propertyName: "columnTemplates", predicate: TemplateIdDirective }], exportAs: ["cSmartTable"], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"itemsPerPageSelect || tableFilter || cleaner\" class=\"row my-2 mx-0\">\r\n <ng-template [ngIf]=\"tableFilter || cleaner\">\r\n <div class=\"col-auto p-0\">\r\n <ng-container *ngTemplateOutlet=\"tableFilterTemplate\"></ng-container>\r\n </div>\r\n <div class=\"col-auto p-0\">\r\n <ng-container *ngTemplateOutlet=\"tableCleanerTemplate\"></ng-container>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template #tableFilterTemplate>\r\n <c-smart-table-filter\r\n (valueChange)=\"handleTableFilterChange($event)\"\r\n *ngIf=\"tableFilter\"\r\n [filterLabel]=\"tableFilterLabel\"\r\n [filterPlaceholder]=\"tableFilterPlaceholder\"\r\n [tableFilter]=\"tableFilter\"\r\n [value]=\"tableFilterState\"\r\n >\r\n </c-smart-table-filter>\r\n </ng-template>\r\n\r\n <ng-template #tableCleanerTemplate>\r\n <button\r\n (click)=\"clean($event)\"\r\n *ngIf=\"cleaner\"\r\n [disabled]=\"!isFiltered\"\r\n [ngClass]=\"{'ms-1': tableFilter}\"\r\n [tabindex]=\"0\"\r\n cButton\r\n variant=\"ghost\"\r\n color=\"transparent\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"filterIconTemplate\"></ng-container>\r\n </button>\r\n </ng-template>\r\n</div>\r\n<div class=\"position-relative\">\r\n <table [align]=\"tableProps?.align\"\r\n [borderColor]=\"tableProps?.borderColor\"\r\n [bordered]=\"tableProps?.bordered\"\r\n [borderless]=\"tableProps?.borderless\"\r\n [caption]=\"tableProps?.caption\"\r\n [color]=\"tableProps?.color\"\r\n [hover]=\"tableProps?.hover\"\r\n [responsive]=\"tableProps?.responsive\"\r\n [small]=\"tableProps?.small\"\r\n [striped]=\"tableProps?.striped\"\r\n [cHtmlAttr]=\"tableProps?.attributes ?? {}\"\r\n [cTableColor]=\"tableProps?.color\"\r\n cTable\r\n >\r\n <c-smart-table-head\r\n (columnFilterStateChange)=\"handleColumnFilterChange($event)\"\r\n (selectAllChange)=\"handleSelectAllChange($event)\"\r\n (sorterStateChange)=\"handleSortChange($event)\"\r\n *ngIf=\"header\"\r\n [columnFilterState]=\"columnFilterState\"\r\n [columnFilter]=\"columnFilter\"\r\n [columns]=\"columns\"\r\n [selectAll]=\"selectedAll\"\r\n [selectable]=\"selectable\"\r\n [columnSorter]=\"columnSorter\"\r\n [sorterValue]=\"sorterValue\"\r\n [cHtmlAttr]=\"tableHeadProps?.attributes ?? {}\"\r\n [cTableColor]=\"tableHeadProps?.color\"\r\n [cAlign]=\"tableHeadProps?.align\"\r\n [columnFilterTemplates]=\"columnFilterTemplates\"\r\n ></c-smart-table-head>\r\n\r\n <ng-container *ngTemplateOutlet=\"tbodyDefaultTemplate\"></ng-container>\r\n\r\n <c-smart-table-head\r\n (selectAllChange)=\"handleSelectAllChange($event)\"\r\n (sorterStateChange)=\"handleSortChange($event)\"\r\n *ngIf=\"footer\"\r\n [columns]=\"columns\"\r\n [selectAll]=\"selectedAll\"\r\n [selectable]=\"selectable\"\r\n [columnSorter]=\"columnSorter\"\r\n [sorterValue]=\"sorterValue\"\r\n [cHtmlAttr]=\"tableFootProps?.attributes ?? {}\"\r\n [cTableColor]=\"tableFootProps?.color\"\r\n [cAlign]=\"tableFootProps?.align\"\r\n component=\"tfoot\"\r\n [columnFilterTemplates]=\"columnFilterTemplates\"\r\n ></c-smart-table-head>\r\n\r\n </table>\r\n <c-element-cover\r\n *ngIf=\"loading\"\r\n [boundaries]=\"[\r\n { sides: ['top'], query: 'td' },\r\n { sides: ['bottom'], query: 'tbody' }\r\n ]\"\r\n ></c-element-cover>\r\n</div>\r\n<ng-template [ngIf]=\"pagination || itemsPerPageSelect\">\r\n <div class=\"row\">\r\n <div class=\"col\">\r\n <c-smart-pagination\r\n (activePageChange)=\"setActivePage($event)\"\r\n *ngIf=\"pagination && numberOfPages > 1\"\r\n [activePage]=\"activePage\"\r\n [pages]=\"numberOfPages\">\r\n </c-smart-pagination>\r\n </div>\r\n <div class=\"col-auto ms-auto\">\r\n <c-smart-table-items-per-page-selector\r\n (itemsPerPageChange)=\"handleItemsPerPageChange($event)\"\r\n *ngIf=\"itemsPerPageSelect\"\r\n [itemsPerPageLabel]=\"itemsPerPageLabel\"\r\n [itemsPerPageOptions]=\"itemsPerPageOptions\"\r\n [itemsPerPage]=\"itemsPerPage\"\r\n >\r\n </c-smart-table-items-per-page-selector>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #tbodyDefaultTemplate>\r\n <tbody [cHtmlAttr]=\"tableBodyProps?.attributes ?? {}\"\r\n [cTableColor]=\"tableBodyProps?.color\"\r\n [cAlign]=\"tableBodyProps?.align\"\r\n >\r\n <ng-template ngFor let-item [ngForOf]=\"currentItems\" let-cnt=\"count\" let-i=\"index\" let-isEven=\"even\" let-isOdd=\"odd\">\r\n <tr [tabindex]=\"clickableRows ? 0 : -1\"\r\n [ngStyle]=\"{cursor: clickableRows ? 'pointer' : 'auto'}\"\r\n (click)=\"handleRowClick({$event, item, i})\"\r\n [cTableActive]=\"item._props?.active\"\r\n [cTableColor]=\"item._props?.color\"\r\n [cAlign]=\"item._props?.align\"\r\n >\r\n <td *ngIf=\"selectable\"\r\n [cTableActive]=\"item?.['_cellProps']?._all?.active\"\r\n [cTableColor]=\"item?.['_cellProps']?._all?.color\"\r\n [cAlign]=\"item?.['_cellProps']?._all?.align\"\r\n >\r\n <input (change)=\"handleRowChecked($event, item)\" [checked]=\"item._selected ?? false\" cFormCheckInput>\r\n </td>\r\n <ng-template ngFor let-columnName [ngForOf]=\"rawColumnNames\" let-i=\"index\">\r\n <ng-container\r\n *ngTemplateOutlet=\"templates['tableData'] || columnDefaultTemplate; context: {item, columnName, tdContent: item[columnName] }\"></ng-container>\r\n </ng-template>\r\n </tr>\r\n <ng-template [ngIf]=\"templates['tableDetails']\">\r\n <!-- <ng-container *ngTemplateOutlet=\"rowDetailsDefaultTemplate\"></ng-container>-->\r\n <tr>\r\n <td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td>\r\n </tr>\r\n <tr class=\"p-0\">\r\n <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">\r\n <ng-container *ngTemplateOutlet=\"templates['tableDetails']; context: {item, index: i}\"></ng-container>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n </ng-template>\r\n <ng-container *ngTemplateOutlet=\"noItemsDefaultTemplate\"></ng-container>\r\n </tbody>\r\n</ng-template>\r\n\r\n<ng-template #columnDefaultTemplate let-item=\"item\" let-columnName=\"columnName\" let-tdContent=\"tdContent\">\r\n <td\r\n [cTableActive]=\"tableDataCellProps(item, columnName)?.['active']\"\r\n [cTableColor]=\"tableDataCellProps(item, columnName)?.color\"\r\n [cAlign]=\"tableDataCellProps(item, columnName)?.align\"\r\n [ngClass]=\"tableDataCellClasses(item, columnName)\"\r\n >\r\n {{tdContent}}\r\n </td>\r\n</ng-template>\r\n\r\n<!--<ng-template #rowDetailsDefaultTemplate let-item let-index>-->\r\n<!-- <tr><td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td></tr>-->\r\n<!-- <tr class=\"p-0\">-->\r\n<!-- <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">-->\r\n<!-- <ng-container *ngTemplateOutlet=\"templates?.tableDetails\"></ng-container>-->\r\n<!-- </td>-->\r\n<!-- </tr>-->\r\n<!--</ng-template>-->\r\n\r\n<ng-template #noItemsDefaultTemplate>\r\n <tr *ngIf=\"!currentItems.length\">\r\n <td [colSpan]=\"colspan\" class=\"justify-content-center\">{{noItemsLabel}}</td>\r\n </tr>\r\n</ng-template>\r\n\r\n<!--todo: filterIconCustomTemplate-->\r\n<ng-template #filterIconTemplate>\r\n <svg viewBox=\"0 0 512 512\" xmlns=\"http://www.w3.org/2000/svg\" pointer-events=\"none\" role=\"img\"\r\n class=\"icon icon-custom-size\" width=\"18\">\r\n <polygon\r\n fill=\"var(--ci-primary-color, currentColor)\"\r\n points=\"40 16 40 53.828 109.024 136 150.815 136 76.896 48 459.51 48 304 242.388 304 401.373 241.373 464 240 464 240 368 208 368 208 496 254.627 496 336 414.627 336 253.612 496 53.612 496 16 40 16\"\r\n class=\"ci-primary\">\r\n </polygon>\r\n <polygon\r\n fill=\"var(--ci-primary-color, currentColor)\"\r\n points=\"166.403 248.225 226.864 187.763 204.237 165.135 143.775 225.597 83.313 165.135 60.687 187.763 121.148 248.225 60.687 308.687 83.313 331.314 143.775 270.852 204.237 331.314 226.864 308.687 166.403 248.225\"\r\n class=\"ci-primary\">\r\n </polygon>\r\n </svg>\r\n</ng-template>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ElementCoverComponent, selector: "c-element-cover, [cElementCover]", inputs: ["boundaries", "opacity"] }, { kind: "directive", type: TableDirective, selector: "table[cTable]", inputs: ["align", "borderColor", "bordered", "borderless", "caption", "color", "hover", "responsive", "small", "striped", "stripedColumns"] }, { kind: "directive", type: TableColorDirective, selector: "[cTableColor]", inputs: ["cTableColor"] }, { kind: "directive", type: TableActiveDirective, selector: "[cTableActive]", inputs: ["cTableActive"] }, { kind: "component", type: SmartPaginationComponent, selector: "c-smart-pagination", inputs: ["activePage", "arrows", "doubleArrows", "dots", "limit", "pages", "firstButton", "lastButton", "nextButton", "previousButton", "align", "size", "role"], outputs: ["activePageChange"], exportAs: ["cSmartPagination"] }, { kind: "directive", type: FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "directive", type: AlignDirective, selector: "[cAlign]", inputs: ["cAlign"] }, { kind: "component", type: SmartTableFilterComponent, selector: "c-smart-table-filter", inputs: ["filterLabel", "filterPlaceholder", "tableFilter", "value"], outputs: ["valueChange"] }, { kind: "component", type: SmartTableItemsPerPageSelectorComponent, selector: "c-smart-table-items-per-page-selector", inputs: ["itemsPerPage", "itemsPerPageLabel", "itemsPerPageOptions"], outputs: ["itemsPerPageChange"] }, { kind: "component", type: SmartTableHeadComponent, selector: "c-smart-table-head", inputs: ["columnFilter", "columnFilterState", "columnSorter", "component", "columns", "selectable", "selectAll", "sorterValue", "columnFilterTemplates"], outputs: ["columnFilterStateChange", "sorterStateChange", "selectAllChange"] }] });
|
|
13349
13403
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SmartTableComponent, decorators: [{
|
|
13350
13404
|
type: Component,
|
|
13351
|
-
args: [{ selector: 'c-smart-table', exportAs: 'cSmartTable', template: "<div *ngIf=\"itemsPerPageSelect || tableFilter || cleaner\" class=\"row my-2 mx-0\">\r\n <ng-template [ngIf]=\"tableFilter || cleaner\">\r\n <div class=\"col-auto p-0\">\r\n <c-smart-table-filter\r\n
|
|
13405
|
+
args: [{ selector: 'c-smart-table', exportAs: 'cSmartTable', template: "<div *ngIf=\"itemsPerPageSelect || tableFilter || cleaner\" class=\"row my-2 mx-0\">\r\n <ng-template [ngIf]=\"tableFilter || cleaner\">\r\n <div class=\"col-auto p-0\">\r\n <ng-container *ngTemplateOutlet=\"tableFilterTemplate\"></ng-container>\r\n </div>\r\n <div class=\"col-auto p-0\">\r\n <ng-container *ngTemplateOutlet=\"tableCleanerTemplate\"></ng-container>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template #tableFilterTemplate>\r\n <c-smart-table-filter\r\n (valueChange)=\"handleTableFilterChange($event)\"\r\n *ngIf=\"tableFilter\"\r\n [filterLabel]=\"tableFilterLabel\"\r\n [filterPlaceholder]=\"tableFilterPlaceholder\"\r\n [tableFilter]=\"tableFilter\"\r\n [value]=\"tableFilterState\"\r\n >\r\n </c-smart-table-filter>\r\n </ng-template>\r\n\r\n <ng-template #tableCleanerTemplate>\r\n <button\r\n (click)=\"clean($event)\"\r\n *ngIf=\"cleaner\"\r\n [disabled]=\"!isFiltered\"\r\n [ngClass]=\"{'ms-1': tableFilter}\"\r\n [tabindex]=\"0\"\r\n cButton\r\n variant=\"ghost\"\r\n color=\"transparent\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"filterIconTemplate\"></ng-container>\r\n </button>\r\n </ng-template>\r\n</div>\r\n<div class=\"position-relative\">\r\n <table [align]=\"tableProps?.align\"\r\n [borderColor]=\"tableProps?.borderColor\"\r\n [bordered]=\"tableProps?.bordered\"\r\n [borderless]=\"tableProps?.borderless\"\r\n [caption]=\"tableProps?.caption\"\r\n [color]=\"tableProps?.color\"\r\n [hover]=\"tableProps?.hover\"\r\n [responsive]=\"tableProps?.responsive\"\r\n [small]=\"tableProps?.small\"\r\n [striped]=\"tableProps?.striped\"\r\n [cHtmlAttr]=\"tableProps?.attributes ?? {}\"\r\n [cTableColor]=\"tableProps?.color\"\r\n cTable\r\n >\r\n <c-smart-table-head\r\n (columnFilterStateChange)=\"handleColumnFilterChange($event)\"\r\n (selectAllChange)=\"handleSelectAllChange($event)\"\r\n (sorterStateChange)=\"handleSortChange($event)\"\r\n *ngIf=\"header\"\r\n [columnFilterState]=\"columnFilterState\"\r\n [columnFilter]=\"columnFilter\"\r\n [columns]=\"columns\"\r\n [selectAll]=\"selectedAll\"\r\n [selectable]=\"selectable\"\r\n [columnSorter]=\"columnSorter\"\r\n [sorterValue]=\"sorterValue\"\r\n [cHtmlAttr]=\"tableHeadProps?.attributes ?? {}\"\r\n [cTableColor]=\"tableHeadProps?.color\"\r\n [cAlign]=\"tableHeadProps?.align\"\r\n [columnFilterTemplates]=\"columnFilterTemplates\"\r\n ></c-smart-table-head>\r\n\r\n <ng-container *ngTemplateOutlet=\"tbodyDefaultTemplate\"></ng-container>\r\n\r\n <c-smart-table-head\r\n (selectAllChange)=\"handleSelectAllChange($event)\"\r\n (sorterStateChange)=\"handleSortChange($event)\"\r\n *ngIf=\"footer\"\r\n [columns]=\"columns\"\r\n [selectAll]=\"selectedAll\"\r\n [selectable]=\"selectable\"\r\n [columnSorter]=\"columnSorter\"\r\n [sorterValue]=\"sorterValue\"\r\n [cHtmlAttr]=\"tableFootProps?.attributes ?? {}\"\r\n [cTableColor]=\"tableFootProps?.color\"\r\n [cAlign]=\"tableFootProps?.align\"\r\n component=\"tfoot\"\r\n [columnFilterTemplates]=\"columnFilterTemplates\"\r\n ></c-smart-table-head>\r\n\r\n </table>\r\n <c-element-cover\r\n *ngIf=\"loading\"\r\n [boundaries]=\"[\r\n { sides: ['top'], query: 'td' },\r\n { sides: ['bottom'], query: 'tbody' }\r\n ]\"\r\n ></c-element-cover>\r\n</div>\r\n<ng-template [ngIf]=\"pagination || itemsPerPageSelect\">\r\n <div class=\"row\">\r\n <div class=\"col\">\r\n <c-smart-pagination\r\n (activePageChange)=\"setActivePage($event)\"\r\n *ngIf=\"pagination && numberOfPages > 1\"\r\n [activePage]=\"activePage\"\r\n [pages]=\"numberOfPages\">\r\n </c-smart-pagination>\r\n </div>\r\n <div class=\"col-auto ms-auto\">\r\n <c-smart-table-items-per-page-selector\r\n (itemsPerPageChange)=\"handleItemsPerPageChange($event)\"\r\n *ngIf=\"itemsPerPageSelect\"\r\n [itemsPerPageLabel]=\"itemsPerPageLabel\"\r\n [itemsPerPageOptions]=\"itemsPerPageOptions\"\r\n [itemsPerPage]=\"itemsPerPage\"\r\n >\r\n </c-smart-table-items-per-page-selector>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #tbodyDefaultTemplate>\r\n <tbody [cHtmlAttr]=\"tableBodyProps?.attributes ?? {}\"\r\n [cTableColor]=\"tableBodyProps?.color\"\r\n [cAlign]=\"tableBodyProps?.align\"\r\n >\r\n <ng-template ngFor let-item [ngForOf]=\"currentItems\" let-cnt=\"count\" let-i=\"index\" let-isEven=\"even\" let-isOdd=\"odd\">\r\n <tr [tabindex]=\"clickableRows ? 0 : -1\"\r\n [ngStyle]=\"{cursor: clickableRows ? 'pointer' : 'auto'}\"\r\n (click)=\"handleRowClick({$event, item, i})\"\r\n [cTableActive]=\"item._props?.active\"\r\n [cTableColor]=\"item._props?.color\"\r\n [cAlign]=\"item._props?.align\"\r\n >\r\n <td *ngIf=\"selectable\"\r\n [cTableActive]=\"item?.['_cellProps']?._all?.active\"\r\n [cTableColor]=\"item?.['_cellProps']?._all?.color\"\r\n [cAlign]=\"item?.['_cellProps']?._all?.align\"\r\n >\r\n <input (change)=\"handleRowChecked($event, item)\" [checked]=\"item._selected ?? false\" cFormCheckInput>\r\n </td>\r\n <ng-template ngFor let-columnName [ngForOf]=\"rawColumnNames\" let-i=\"index\">\r\n <ng-container\r\n *ngTemplateOutlet=\"templates['tableData'] || columnDefaultTemplate; context: {item, columnName, tdContent: item[columnName] }\"></ng-container>\r\n </ng-template>\r\n </tr>\r\n <ng-template [ngIf]=\"templates['tableDetails']\">\r\n <!-- <ng-container *ngTemplateOutlet=\"rowDetailsDefaultTemplate\"></ng-container>-->\r\n <tr>\r\n <td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td>\r\n </tr>\r\n <tr class=\"p-0\">\r\n <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">\r\n <ng-container *ngTemplateOutlet=\"templates['tableDetails']; context: {item, index: i}\"></ng-container>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n </ng-template>\r\n <ng-container *ngTemplateOutlet=\"noItemsDefaultTemplate\"></ng-container>\r\n </tbody>\r\n</ng-template>\r\n\r\n<ng-template #columnDefaultTemplate let-item=\"item\" let-columnName=\"columnName\" let-tdContent=\"tdContent\">\r\n <td\r\n [cTableActive]=\"tableDataCellProps(item, columnName)?.['active']\"\r\n [cTableColor]=\"tableDataCellProps(item, columnName)?.color\"\r\n [cAlign]=\"tableDataCellProps(item, columnName)?.align\"\r\n [ngClass]=\"tableDataCellClasses(item, columnName)\"\r\n >\r\n {{tdContent}}\r\n </td>\r\n</ng-template>\r\n\r\n<!--<ng-template #rowDetailsDefaultTemplate let-item let-index>-->\r\n<!-- <tr><td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td></tr>-->\r\n<!-- <tr class=\"p-0\">-->\r\n<!-- <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">-->\r\n<!-- <ng-container *ngTemplateOutlet=\"templates?.tableDetails\"></ng-container>-->\r\n<!-- </td>-->\r\n<!-- </tr>-->\r\n<!--</ng-template>-->\r\n\r\n<ng-template #noItemsDefaultTemplate>\r\n <tr *ngIf=\"!currentItems.length\">\r\n <td [colSpan]=\"colspan\" class=\"justify-content-center\">{{noItemsLabel}}</td>\r\n </tr>\r\n</ng-template>\r\n\r\n<!--todo: filterIconCustomTemplate-->\r\n<ng-template #filterIconTemplate>\r\n <svg viewBox=\"0 0 512 512\" xmlns=\"http://www.w3.org/2000/svg\" pointer-events=\"none\" role=\"img\"\r\n class=\"icon icon-custom-size\" width=\"18\">\r\n <polygon\r\n fill=\"var(--ci-primary-color, currentColor)\"\r\n points=\"40 16 40 53.828 109.024 136 150.815 136 76.896 48 459.51 48 304 242.388 304 401.373 241.373 464 240 464 240 368 208 368 208 496 254.627 496 336 414.627 336 253.612 496 53.612 496 16 40 16\"\r\n class=\"ci-primary\">\r\n </polygon>\r\n <polygon\r\n fill=\"var(--ci-primary-color, currentColor)\"\r\n points=\"166.403 248.225 226.864 187.763 204.237 165.135 143.775 225.597 83.313 165.135 60.687 187.763 121.148 248.225 60.687 308.687 83.313 331.314 143.775 270.852 204.237 331.314 226.864 308.687 166.403 248.225\"\r\n class=\"ci-primary\">\r\n </polygon>\r\n </svg>\r\n</ng-template>\r\n", styles: [":host{display:block}\n"] }]
|
|
13352
13406
|
}], ctorParameters: function () { return [{ type: i0.IterableDiffers }, { type: i0.KeyValueDiffers }]; }, propDecorators: { activePage: [{
|
|
13353
13407
|
type: Input
|
|
13354
13408
|
}], cleaner: [{
|