@coreui/angular-pro 4.3.0 → 4.3.2
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/README.md +175 -175
- package/esm2020/lib/dropdown/dropdown/dropdown.component.mjs +1 -1
- package/esm2020/lib/multi-select/multi-select/multi-select.component.mjs +2 -2
- 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/esm2020/lib/toast/toaster/toaster.component.mjs +7 -16
- package/fesm2015/coreui-angular-pro.mjs +87 -48
- package/fesm2015/coreui-angular-pro.mjs.map +1 -1
- package/fesm2020/coreui-angular-pro.mjs +85 -47
- 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/lib/toast/toaster/toaster.component.d.ts +2 -3
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Directive, Input, NgModule, HostBinding, Injectable, Component, EventEmitter, Output, ContentChildren, HostListener, Pipe, ViewChildren, Inject, ViewChild, forwardRef, Optional, ElementRef, ContentChild, ChangeDetectionStrategy, PLATFORM_ID, TemplateRef, ViewContainerRef
|
|
2
|
+
import { Directive, Input, NgModule, HostBinding, Injectable, Component, EventEmitter, Output, ContentChildren, HostListener, Pipe, ViewChildren, Inject, ViewChild, forwardRef, Optional, ElementRef, ContentChild, ChangeDetectionStrategy, PLATFORM_ID, TemplateRef, ViewContainerRef } from '@angular/core';
|
|
3
3
|
import * as i1$1 from '@angular/common';
|
|
4
4
|
import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common';
|
|
5
5
|
import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
|
|
@@ -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';
|
|
@@ -8843,7 +8843,7 @@ class MultiSelectComponent {
|
|
|
8843
8843
|
selectOptions() {
|
|
8844
8844
|
this.multiSelectOptions?.forEach((option, index) => {
|
|
8845
8845
|
option.optionsStyle = this.optionsStyle;
|
|
8846
|
-
option.selected = option.value !== undefined ? this.value.includes(option.value)
|
|
8846
|
+
option.selected = option.value !== undefined ? this.value.includes(option.value) : !!option.selected;
|
|
8847
8847
|
});
|
|
8848
8848
|
}
|
|
8849
8849
|
clearAllOptions($event) {
|
|
@@ -12467,23 +12467,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
|
|
|
12467
12467
|
}]
|
|
12468
12468
|
}] });
|
|
12469
12469
|
|
|
12470
|
+
var _SmartTableFilterComponent_dueTime, _SmartTableFilterComponent_value, _SmartTableFilterComponent_eventType, _SmartTableFilterComponent_lazy, _SmartTableFilterComponent_valueSubscription, _SmartTableFilterComponent_inputSubscription;
|
|
12470
12471
|
class SmartTableFilterComponent {
|
|
12471
12472
|
constructor() {
|
|
12473
|
+
_SmartTableFilterComponent_dueTime.set(this, 300);
|
|
12474
|
+
_SmartTableFilterComponent_value.set(this, '');
|
|
12475
|
+
_SmartTableFilterComponent_eventType.set(this, '');
|
|
12476
|
+
_SmartTableFilterComponent_lazy.set(this, false);
|
|
12477
|
+
_SmartTableFilterComponent_valueSubscription.set(this, void 0);
|
|
12478
|
+
_SmartTableFilterComponent_inputSubscription.set(this, void 0);
|
|
12479
|
+
this.value$ = new BehaviorSubject('');
|
|
12472
12480
|
this.filterLabel = 'Filter:';
|
|
12473
12481
|
this.filterPlaceholder = 'Filter';
|
|
12474
12482
|
this.valueChange = new EventEmitter();
|
|
12475
|
-
this._value = '';
|
|
12476
|
-
this.eventType = '';
|
|
12477
12483
|
}
|
|
12478
|
-
set
|
|
12479
|
-
|
|
12480
|
-
this._value = value;
|
|
12481
|
-
}
|
|
12482
|
-
if (this.eventType)
|
|
12483
|
-
this.valueChange.emit({ value, type: this.eventType });
|
|
12484
|
+
set tableFilter(value) {
|
|
12485
|
+
__classPrivateFieldSet(this, _SmartTableFilterComponent_lazy, (typeof value === 'object' && value.lazy) ? true : false, "f");
|
|
12484
12486
|
}
|
|
12485
|
-
|
|
12486
|
-
|
|
12487
|
+
;
|
|
12488
|
+
set value(value) {
|
|
12489
|
+
this.value$.next(value);
|
|
12487
12490
|
}
|
|
12488
12491
|
get hostClasses() {
|
|
12489
12492
|
return {
|
|
@@ -12491,24 +12494,63 @@ class SmartTableFilterComponent {
|
|
|
12491
12494
|
'mb-2': true
|
|
12492
12495
|
};
|
|
12493
12496
|
}
|
|
12494
|
-
|
|
12495
|
-
this.
|
|
12496
|
-
|
|
12497
|
+
ngAfterViewInit() {
|
|
12498
|
+
this.setSubscription();
|
|
12499
|
+
}
|
|
12500
|
+
ngOnDestroy() {
|
|
12501
|
+
this.setSubscription(false);
|
|
12502
|
+
}
|
|
12503
|
+
setSubscription(subscribe = !__classPrivateFieldGet(this, _SmartTableFilterComponent_valueSubscription, "f")) {
|
|
12504
|
+
if (subscribe) {
|
|
12505
|
+
__classPrivateFieldSet(this, _SmartTableFilterComponent_valueSubscription, this.value$
|
|
12506
|
+
.pipe(distinctUntilChanged())
|
|
12507
|
+
.subscribe(value => {
|
|
12508
|
+
if (__classPrivateFieldGet(this, _SmartTableFilterComponent_value, "f") !== value) {
|
|
12509
|
+
__classPrivateFieldSet(this, _SmartTableFilterComponent_value, value, "f");
|
|
12510
|
+
this.valueChange.emit({ value, type: __classPrivateFieldGet(this, _SmartTableFilterComponent_eventType, "f") });
|
|
12511
|
+
}
|
|
12512
|
+
}), "f");
|
|
12513
|
+
const eventName = __classPrivateFieldGet(this, _SmartTableFilterComponent_lazy, "f") ? 'change' : 'input';
|
|
12514
|
+
let dueTime = __classPrivateFieldGet(this, _SmartTableFilterComponent_dueTime, "f");
|
|
12515
|
+
__classPrivateFieldSet(this, _SmartTableFilterComponent_inputSubscription, fromEvent(this.filterInput.nativeElement, eventName)
|
|
12516
|
+
.pipe(tap((event) => {
|
|
12517
|
+
dueTime = __classPrivateFieldGet(this, _SmartTableFilterComponent_lazy, "f") ? 0 : __classPrivateFieldGet(this, _SmartTableFilterComponent_dueTime, "f");
|
|
12518
|
+
__classPrivateFieldSet(this, _SmartTableFilterComponent_eventType, event.type ?? eventName, "f");
|
|
12519
|
+
}), map(event => {
|
|
12520
|
+
return event.target.value;
|
|
12521
|
+
}), debounceTime(dueTime))
|
|
12522
|
+
.subscribe((value) => {
|
|
12523
|
+
if (value !== __classPrivateFieldGet(this, _SmartTableFilterComponent_value, "f")) {
|
|
12524
|
+
this.value$.next(value);
|
|
12525
|
+
}
|
|
12526
|
+
}), "f");
|
|
12527
|
+
}
|
|
12528
|
+
else {
|
|
12529
|
+
__classPrivateFieldGet(this, _SmartTableFilterComponent_inputSubscription, "f")?.unsubscribe();
|
|
12530
|
+
this.value$.complete();
|
|
12531
|
+
__classPrivateFieldGet(this, _SmartTableFilterComponent_valueSubscription, "f")?.unsubscribe();
|
|
12532
|
+
}
|
|
12497
12533
|
}
|
|
12498
12534
|
}
|
|
12535
|
+
_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
12536
|
SmartTableFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SmartTableFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12500
|
-
SmartTableFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", 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-
|
|
12537
|
+
SmartTableFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", 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
12538
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SmartTableFilterComponent, decorators: [{
|
|
12502
12539
|
type: Component,
|
|
12503
|
-
args: [{ selector: 'c-smart-table-filter', template: "<label cLabel=\"col\" class=\"col-
|
|
12540
|
+
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
12541
|
}], ctorParameters: function () { return []; }, propDecorators: { filterLabel: [{
|
|
12505
12542
|
type: Input
|
|
12506
12543
|
}], filterPlaceholder: [{
|
|
12507
12544
|
type: Input
|
|
12545
|
+
}], tableFilter: [{
|
|
12546
|
+
type: Input
|
|
12508
12547
|
}], value: [{
|
|
12509
12548
|
type: Input
|
|
12510
12549
|
}], valueChange: [{
|
|
12511
12550
|
type: Output
|
|
12551
|
+
}], filterInput: [{
|
|
12552
|
+
type: ViewChild,
|
|
12553
|
+
args: ['filterInput', { static: true }]
|
|
12512
12554
|
}], hostClasses: [{
|
|
12513
12555
|
type: HostBinding,
|
|
12514
12556
|
args: ['class']
|
|
@@ -12739,21 +12781,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
|
|
|
12739
12781
|
args: ['class']
|
|
12740
12782
|
}] } });
|
|
12741
12783
|
|
|
12784
|
+
var _SmartTableItemsPerPageSelectorComponent_itemsPerPage;
|
|
12742
12785
|
class SmartTableItemsPerPageSelectorComponent {
|
|
12743
12786
|
constructor() {
|
|
12744
|
-
this
|
|
12787
|
+
_SmartTableItemsPerPageSelectorComponent_itemsPerPage.set(this, 5);
|
|
12745
12788
|
this.itemsPerPageLabel = 'Items per page:';
|
|
12746
12789
|
this.itemsPerPageOptions = [5, 10, 20, 50];
|
|
12747
12790
|
this.itemsPerPageChange = new EventEmitter();
|
|
12748
12791
|
}
|
|
12749
12792
|
set itemsPerPage(value) {
|
|
12750
|
-
if (this
|
|
12751
|
-
this
|
|
12793
|
+
if (__classPrivateFieldGet(this, _SmartTableItemsPerPageSelectorComponent_itemsPerPage, "f") != value) {
|
|
12794
|
+
__classPrivateFieldSet(this, _SmartTableItemsPerPageSelectorComponent_itemsPerPage, value, "f");
|
|
12752
12795
|
this.itemsPerPageChange.emit(value);
|
|
12753
12796
|
}
|
|
12754
12797
|
}
|
|
12755
12798
|
get itemsPerPage() {
|
|
12756
|
-
return this
|
|
12799
|
+
return __classPrivateFieldGet(this, _SmartTableItemsPerPageSelectorComponent_itemsPerPage, "f");
|
|
12757
12800
|
}
|
|
12758
12801
|
get hostClasses() {
|
|
12759
12802
|
return {
|
|
@@ -12761,6 +12804,7 @@ class SmartTableItemsPerPageSelectorComponent {
|
|
|
12761
12804
|
};
|
|
12762
12805
|
}
|
|
12763
12806
|
}
|
|
12807
|
+
_SmartTableItemsPerPageSelectorComponent_itemsPerPage = new WeakMap();
|
|
12764
12808
|
SmartTableItemsPerPageSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SmartTableItemsPerPageSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12765
12809
|
SmartTableItemsPerPageSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", 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
12810
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SmartTableItemsPerPageSelectorComponent, decorators: [{
|
|
@@ -12874,7 +12918,10 @@ class SmartTableHeadComponent {
|
|
|
12874
12918
|
return typeof column !== 'object' ? true : typeof column.filter === 'undefined' ? true : column.filter;
|
|
12875
12919
|
}
|
|
12876
12920
|
columnSorterEnabled(column) {
|
|
12877
|
-
|
|
12921
|
+
if (!this.columnSorter) {
|
|
12922
|
+
return false;
|
|
12923
|
+
}
|
|
12924
|
+
return (typeof column !== 'object') ? true : typeof column.sorter === 'undefined' ? true : column.sorter;
|
|
12878
12925
|
}
|
|
12879
12926
|
handleColumnFilterValueChange($event, column) {
|
|
12880
12927
|
const columnKey = this.columnKey(column);
|
|
@@ -12896,10 +12943,10 @@ class SmartTableHeadComponent {
|
|
|
12896
12943
|
}
|
|
12897
12944
|
}
|
|
12898
12945
|
SmartTableHeadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SmartTableHeadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12899
|
-
SmartTableHeadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", 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>\
|
|
12946
|
+
SmartTableHeadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", 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
12947
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SmartTableHeadComponent, decorators: [{
|
|
12901
12948
|
type: Component,
|
|
12902
|
-
args: [{ selector: 'c-smart-table-head', template: "<tr>\
|
|
12949
|
+
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
12950
|
}], ctorParameters: function () { return []; }, propDecorators: { columnFilter: [{
|
|
12904
12951
|
type: Input
|
|
12905
12952
|
}], columnFilterState: [{
|
|
@@ -13269,7 +13316,7 @@ class SmartTableComponent {
|
|
|
13269
13316
|
}
|
|
13270
13317
|
handleTableFilterChange($event) {
|
|
13271
13318
|
const { value, type } = $event;
|
|
13272
|
-
const isLazy = typeof this.tableFilter === 'object' && this.tableFilter
|
|
13319
|
+
const isLazy = typeof this.tableFilter === 'object' && this.tableFilter.lazy === true;
|
|
13273
13320
|
if (((isLazy && type === 'input') || (!isLazy && type === 'change')) && value.length !== 0) {
|
|
13274
13321
|
return;
|
|
13275
13322
|
}
|
|
@@ -13335,20 +13382,20 @@ class SmartTableComponent {
|
|
|
13335
13382
|
}
|
|
13336
13383
|
if (changes['tableFilterValue']) {
|
|
13337
13384
|
const tableFilterValueChange = changes['tableFilterValue'];
|
|
13338
|
-
if (tableFilterValueChange.firstChange) {
|
|
13339
|
-
|
|
13340
|
-
|
|
13341
|
-
|
|
13342
|
-
}
|
|
13385
|
+
// if (tableFilterValueChange.firstChange) {
|
|
13386
|
+
const currentValue = tableFilterValueChange.currentValue;
|
|
13387
|
+
if (currentValue.length) {
|
|
13388
|
+
this.setActivePage(1);
|
|
13343
13389
|
}
|
|
13390
|
+
// }
|
|
13344
13391
|
}
|
|
13345
13392
|
}
|
|
13346
13393
|
}
|
|
13347
13394
|
SmartTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", 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: "15.0.4", 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"] }] });
|
|
13395
|
+
SmartTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", 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
13396
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SmartTableComponent, decorators: [{
|
|
13350
13397
|
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
|
|
13398
|
+
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
13399
|
}], ctorParameters: function () { return [{ type: i0.IterableDiffers }, { type: i0.KeyValueDiffers }]; }, propDecorators: { activePage: [{
|
|
13353
13400
|
type: Input
|
|
13354
13401
|
}], cleaner: [{
|
|
@@ -14393,8 +14440,7 @@ var ToasterPlacement;
|
|
|
14393
14440
|
ToasterPlacement["BottomEnd"] = "bottom-end";
|
|
14394
14441
|
})(ToasterPlacement || (ToasterPlacement = {}));
|
|
14395
14442
|
class ToasterComponent {
|
|
14396
|
-
constructor(
|
|
14397
|
-
this.componentFactoryResolver = componentFactoryResolver;
|
|
14443
|
+
constructor(hostElement, renderer, toasterService) {
|
|
14398
14444
|
this.hostElement = hostElement;
|
|
14399
14445
|
this.renderer = renderer;
|
|
14400
14446
|
this.toasterService = toasterService;
|
|
@@ -14424,7 +14470,7 @@ class ToasterComponent {
|
|
|
14424
14470
|
'end-0': this.placement.includes('end'),
|
|
14425
14471
|
'translate-middle-x': this.placement.includes('center') && !this.placement.includes('middle'),
|
|
14426
14472
|
'translate-middle-y': this.placement.includes('middle') && !this.placement.includes('center'),
|
|
14427
|
-
'translate-middle': this.placement.includes('middle') && this.placement.includes('center')
|
|
14473
|
+
'translate-middle': this.placement.includes('middle') && this.placement.includes('center')
|
|
14428
14474
|
};
|
|
14429
14475
|
}
|
|
14430
14476
|
ngOnInit() {
|
|
@@ -14437,15 +14483,7 @@ class ToasterComponent {
|
|
|
14437
14483
|
this.toasts = this.contentToasts;
|
|
14438
14484
|
}
|
|
14439
14485
|
addToast(toast, props, options) {
|
|
14440
|
-
|
|
14441
|
-
if (parseInt(VERSION.major) < 13) {
|
|
14442
|
-
const factory = this.componentFactoryResolver.resolveComponentFactory(toast);
|
|
14443
|
-
componentRef = this.toasterHost.viewContainerRef.createComponent(factory, options?.index, options?.injector, options?.projectableNodes, options?.ngModuleRef);
|
|
14444
|
-
}
|
|
14445
|
-
else {
|
|
14446
|
-
// @ts-ignore
|
|
14447
|
-
componentRef = this.toasterHost.viewContainerRef.createComponent(toast, options);
|
|
14448
|
-
}
|
|
14486
|
+
const componentRef = this.toasterHost.viewContainerRef.createComponent(toast, options);
|
|
14449
14487
|
this.toastsDynamic.push(componentRef);
|
|
14450
14488
|
const index = this.toastsDynamic.indexOf(componentRef);
|
|
14451
14489
|
for (const [key, value] of Object.entries(props)) {
|
|
@@ -14493,12 +14531,12 @@ class ToasterComponent {
|
|
|
14493
14531
|
}
|
|
14494
14532
|
}
|
|
14495
14533
|
}
|
|
14496
|
-
ToasterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ToasterComponent, deps: [{ token: i0.
|
|
14534
|
+
ToasterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ToasterComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: ToasterService }], target: i0.ɵɵFactoryTarget.Component });
|
|
14497
14535
|
ToasterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ToasterComponent, selector: "c-toaster", inputs: { placement: "placement", position: "position" }, host: { properties: { "class": "this.hostClasses" } }, queries: [{ propertyName: "contentToasts", predicate: ToastComponent, read: ViewContainerRef }], viewQueries: [{ propertyName: "toasterHost", first: true, predicate: ToasterHostDirective, descendants: true, static: true }], exportAs: ["cToaster"], ngImport: i0, template: "<ng-template cToasterHost></ng-template>\r\n<ng-content cToasterHost></ng-content>\r\n", dependencies: [{ kind: "directive", type: ToasterHostDirective, selector: "[cToasterHost]", exportAs: ["cToasterHost"] }] });
|
|
14498
14536
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ToasterComponent, decorators: [{
|
|
14499
14537
|
type: Component,
|
|
14500
14538
|
args: [{ selector: 'c-toaster', exportAs: 'cToaster', template: "<ng-template cToasterHost></ng-template>\r\n<ng-content cToasterHost></ng-content>\r\n" }]
|
|
14501
|
-
}], ctorParameters: function () { return [{ type: i0.
|
|
14539
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: ToasterService }]; }, propDecorators: { placement: [{
|
|
14502
14540
|
type: Input
|
|
14503
14541
|
}], position: [{
|
|
14504
14542
|
type: Input
|