@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';
|
|
@@ -8921,7 +8921,7 @@ class MultiSelectComponent {
|
|
|
8921
8921
|
var _a;
|
|
8922
8922
|
(_a = this.multiSelectOptions) === null || _a === void 0 ? void 0 : _a.forEach((option, index) => {
|
|
8923
8923
|
option.optionsStyle = this.optionsStyle;
|
|
8924
|
-
option.selected = option.value !== undefined ? this.value.includes(option.value)
|
|
8924
|
+
option.selected = option.value !== undefined ? this.value.includes(option.value) : !!option.selected;
|
|
8925
8925
|
});
|
|
8926
8926
|
}
|
|
8927
8927
|
clearAllOptions($event) {
|
|
@@ -12574,23 +12574,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
|
|
|
12574
12574
|
}]
|
|
12575
12575
|
}] });
|
|
12576
12576
|
|
|
12577
|
+
var _SmartTableFilterComponent_dueTime, _SmartTableFilterComponent_value, _SmartTableFilterComponent_eventType, _SmartTableFilterComponent_lazy, _SmartTableFilterComponent_valueSubscription, _SmartTableFilterComponent_inputSubscription;
|
|
12577
12578
|
class SmartTableFilterComponent {
|
|
12578
12579
|
constructor() {
|
|
12580
|
+
_SmartTableFilterComponent_dueTime.set(this, 300);
|
|
12581
|
+
_SmartTableFilterComponent_value.set(this, '');
|
|
12582
|
+
_SmartTableFilterComponent_eventType.set(this, '');
|
|
12583
|
+
_SmartTableFilterComponent_lazy.set(this, false);
|
|
12584
|
+
_SmartTableFilterComponent_valueSubscription.set(this, void 0);
|
|
12585
|
+
_SmartTableFilterComponent_inputSubscription.set(this, void 0);
|
|
12586
|
+
this.value$ = new BehaviorSubject('');
|
|
12579
12587
|
this.filterLabel = 'Filter:';
|
|
12580
12588
|
this.filterPlaceholder = 'Filter';
|
|
12581
12589
|
this.valueChange = new EventEmitter();
|
|
12582
|
-
this._value = '';
|
|
12583
|
-
this.eventType = '';
|
|
12584
12590
|
}
|
|
12585
|
-
set
|
|
12586
|
-
|
|
12587
|
-
this._value = value;
|
|
12588
|
-
}
|
|
12589
|
-
if (this.eventType)
|
|
12590
|
-
this.valueChange.emit({ value, type: this.eventType });
|
|
12591
|
+
set tableFilter(value) {
|
|
12592
|
+
__classPrivateFieldSet(this, _SmartTableFilterComponent_lazy, (typeof value === 'object' && value.lazy) ? true : false, "f");
|
|
12591
12593
|
}
|
|
12592
|
-
|
|
12593
|
-
|
|
12594
|
+
;
|
|
12595
|
+
set value(value) {
|
|
12596
|
+
this.value$.next(value);
|
|
12594
12597
|
}
|
|
12595
12598
|
get hostClasses() {
|
|
12596
12599
|
return {
|
|
@@ -12598,24 +12601,65 @@ class SmartTableFilterComponent {
|
|
|
12598
12601
|
'mb-2': true
|
|
12599
12602
|
};
|
|
12600
12603
|
}
|
|
12601
|
-
|
|
12602
|
-
this.
|
|
12603
|
-
|
|
12604
|
+
ngAfterViewInit() {
|
|
12605
|
+
this.setSubscription();
|
|
12606
|
+
}
|
|
12607
|
+
ngOnDestroy() {
|
|
12608
|
+
this.setSubscription(false);
|
|
12609
|
+
}
|
|
12610
|
+
setSubscription(subscribe = !__classPrivateFieldGet(this, _SmartTableFilterComponent_valueSubscription, "f")) {
|
|
12611
|
+
var _a, _b;
|
|
12612
|
+
if (subscribe) {
|
|
12613
|
+
__classPrivateFieldSet(this, _SmartTableFilterComponent_valueSubscription, this.value$
|
|
12614
|
+
.pipe(distinctUntilChanged())
|
|
12615
|
+
.subscribe(value => {
|
|
12616
|
+
if (__classPrivateFieldGet(this, _SmartTableFilterComponent_value, "f") !== value) {
|
|
12617
|
+
__classPrivateFieldSet(this, _SmartTableFilterComponent_value, value, "f");
|
|
12618
|
+
this.valueChange.emit({ value, type: __classPrivateFieldGet(this, _SmartTableFilterComponent_eventType, "f") });
|
|
12619
|
+
}
|
|
12620
|
+
}), "f");
|
|
12621
|
+
const eventName = __classPrivateFieldGet(this, _SmartTableFilterComponent_lazy, "f") ? 'change' : 'input';
|
|
12622
|
+
let dueTime = __classPrivateFieldGet(this, _SmartTableFilterComponent_dueTime, "f");
|
|
12623
|
+
__classPrivateFieldSet(this, _SmartTableFilterComponent_inputSubscription, fromEvent(this.filterInput.nativeElement, eventName)
|
|
12624
|
+
.pipe(tap((event) => {
|
|
12625
|
+
var _a;
|
|
12626
|
+
dueTime = __classPrivateFieldGet(this, _SmartTableFilterComponent_lazy, "f") ? 0 : __classPrivateFieldGet(this, _SmartTableFilterComponent_dueTime, "f");
|
|
12627
|
+
__classPrivateFieldSet(this, _SmartTableFilterComponent_eventType, (_a = event.type) !== null && _a !== void 0 ? _a : eventName, "f");
|
|
12628
|
+
}), map(event => {
|
|
12629
|
+
return event.target.value;
|
|
12630
|
+
}), debounceTime(dueTime))
|
|
12631
|
+
.subscribe((value) => {
|
|
12632
|
+
if (value !== __classPrivateFieldGet(this, _SmartTableFilterComponent_value, "f")) {
|
|
12633
|
+
this.value$.next(value);
|
|
12634
|
+
}
|
|
12635
|
+
}), "f");
|
|
12636
|
+
}
|
|
12637
|
+
else {
|
|
12638
|
+
(_a = __classPrivateFieldGet(this, _SmartTableFilterComponent_inputSubscription, "f")) === null || _a === void 0 ? void 0 : _a.unsubscribe();
|
|
12639
|
+
this.value$.complete();
|
|
12640
|
+
(_b = __classPrivateFieldGet(this, _SmartTableFilterComponent_valueSubscription, "f")) === null || _b === void 0 ? void 0 : _b.unsubscribe();
|
|
12641
|
+
}
|
|
12604
12642
|
}
|
|
12605
12643
|
}
|
|
12644
|
+
_SmartTableFilterComponent_dueTime = new WeakMap(), _SmartTableFilterComponent_value = new WeakMap(), _SmartTableFilterComponent_eventType = new WeakMap(), _SmartTableFilterComponent_lazy = new WeakMap(), _SmartTableFilterComponent_valueSubscription = new WeakMap(), _SmartTableFilterComponent_inputSubscription = new WeakMap();
|
|
12606
12645
|
SmartTableFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SmartTableFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12607
|
-
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-
|
|
12646
|
+
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 });
|
|
12608
12647
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SmartTableFilterComponent, decorators: [{
|
|
12609
12648
|
type: Component,
|
|
12610
|
-
args: [{ selector: 'c-smart-table-filter', template: "<label cLabel=\"col\" class=\"col-
|
|
12649
|
+
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" }]
|
|
12611
12650
|
}], ctorParameters: function () { return []; }, propDecorators: { filterLabel: [{
|
|
12612
12651
|
type: Input
|
|
12613
12652
|
}], filterPlaceholder: [{
|
|
12614
12653
|
type: Input
|
|
12654
|
+
}], tableFilter: [{
|
|
12655
|
+
type: Input
|
|
12615
12656
|
}], value: [{
|
|
12616
12657
|
type: Input
|
|
12617
12658
|
}], valueChange: [{
|
|
12618
12659
|
type: Output
|
|
12660
|
+
}], filterInput: [{
|
|
12661
|
+
type: ViewChild,
|
|
12662
|
+
args: ['filterInput', { static: true }]
|
|
12619
12663
|
}], hostClasses: [{
|
|
12620
12664
|
type: HostBinding,
|
|
12621
12665
|
args: ['class']
|
|
@@ -12846,21 +12890,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
|
|
|
12846
12890
|
args: ['class']
|
|
12847
12891
|
}] } });
|
|
12848
12892
|
|
|
12893
|
+
var _SmartTableItemsPerPageSelectorComponent_itemsPerPage;
|
|
12849
12894
|
class SmartTableItemsPerPageSelectorComponent {
|
|
12850
12895
|
constructor() {
|
|
12851
|
-
this
|
|
12896
|
+
_SmartTableItemsPerPageSelectorComponent_itemsPerPage.set(this, 5);
|
|
12852
12897
|
this.itemsPerPageLabel = 'Items per page:';
|
|
12853
12898
|
this.itemsPerPageOptions = [5, 10, 20, 50];
|
|
12854
12899
|
this.itemsPerPageChange = new EventEmitter();
|
|
12855
12900
|
}
|
|
12856
12901
|
set itemsPerPage(value) {
|
|
12857
|
-
if (this
|
|
12858
|
-
this
|
|
12902
|
+
if (__classPrivateFieldGet(this, _SmartTableItemsPerPageSelectorComponent_itemsPerPage, "f") != value) {
|
|
12903
|
+
__classPrivateFieldSet(this, _SmartTableItemsPerPageSelectorComponent_itemsPerPage, value, "f");
|
|
12859
12904
|
this.itemsPerPageChange.emit(value);
|
|
12860
12905
|
}
|
|
12861
12906
|
}
|
|
12862
12907
|
get itemsPerPage() {
|
|
12863
|
-
return this
|
|
12908
|
+
return __classPrivateFieldGet(this, _SmartTableItemsPerPageSelectorComponent_itemsPerPage, "f");
|
|
12864
12909
|
}
|
|
12865
12910
|
get hostClasses() {
|
|
12866
12911
|
return {
|
|
@@ -12868,6 +12913,7 @@ class SmartTableItemsPerPageSelectorComponent {
|
|
|
12868
12913
|
};
|
|
12869
12914
|
}
|
|
12870
12915
|
}
|
|
12916
|
+
_SmartTableItemsPerPageSelectorComponent_itemsPerPage = new WeakMap();
|
|
12871
12917
|
SmartTableItemsPerPageSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SmartTableItemsPerPageSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12872
12918
|
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"] }] });
|
|
12873
12919
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SmartTableItemsPerPageSelectorComponent, decorators: [{
|
|
@@ -12984,7 +13030,10 @@ class SmartTableHeadComponent {
|
|
|
12984
13030
|
return typeof column !== 'object' ? true : typeof column.filter === 'undefined' ? true : column.filter;
|
|
12985
13031
|
}
|
|
12986
13032
|
columnSorterEnabled(column) {
|
|
12987
|
-
|
|
13033
|
+
if (!this.columnSorter) {
|
|
13034
|
+
return false;
|
|
13035
|
+
}
|
|
13036
|
+
return (typeof column !== 'object') ? true : typeof column.sorter === 'undefined' ? true : column.sorter;
|
|
12988
13037
|
}
|
|
12989
13038
|
handleColumnFilterValueChange($event, column) {
|
|
12990
13039
|
const columnKey = this.columnKey(column);
|
|
@@ -13007,10 +13056,10 @@ class SmartTableHeadComponent {
|
|
|
13007
13056
|
}
|
|
13008
13057
|
}
|
|
13009
13058
|
SmartTableHeadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SmartTableHeadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13010
|
-
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>\
|
|
13059
|
+
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"] }] });
|
|
13011
13060
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SmartTableHeadComponent, decorators: [{
|
|
13012
13061
|
type: Component,
|
|
13013
|
-
args: [{ selector: 'c-smart-table-head', template: "<tr>\
|
|
13062
|
+
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"] }]
|
|
13014
13063
|
}], ctorParameters: function () { return []; }, propDecorators: { columnFilter: [{
|
|
13015
13064
|
type: Input
|
|
13016
13065
|
}], columnFilterState: [{
|
|
@@ -13382,9 +13431,8 @@ class SmartTableComponent {
|
|
|
13382
13431
|
this.columnFilterValue = Object.assign(Object.assign({}, this.columnFilterValue), { [`${column}`]: value });
|
|
13383
13432
|
}
|
|
13384
13433
|
handleTableFilterChange($event) {
|
|
13385
|
-
var _a;
|
|
13386
13434
|
const { value, type } = $event;
|
|
13387
|
-
const isLazy = typeof this.tableFilter === 'object' &&
|
|
13435
|
+
const isLazy = typeof this.tableFilter === 'object' && this.tableFilter.lazy === true;
|
|
13388
13436
|
if (((isLazy && type === 'input') || (!isLazy && type === 'change')) && value.length !== 0) {
|
|
13389
13437
|
return;
|
|
13390
13438
|
}
|
|
@@ -13448,20 +13496,20 @@ class SmartTableComponent {
|
|
|
13448
13496
|
}
|
|
13449
13497
|
if (changes['tableFilterValue']) {
|
|
13450
13498
|
const tableFilterValueChange = changes['tableFilterValue'];
|
|
13451
|
-
if (tableFilterValueChange.firstChange) {
|
|
13452
|
-
|
|
13453
|
-
|
|
13454
|
-
|
|
13455
|
-
}
|
|
13499
|
+
// if (tableFilterValueChange.firstChange) {
|
|
13500
|
+
const currentValue = tableFilterValueChange.currentValue;
|
|
13501
|
+
if (currentValue.length) {
|
|
13502
|
+
this.setActivePage(1);
|
|
13456
13503
|
}
|
|
13504
|
+
// }
|
|
13457
13505
|
}
|
|
13458
13506
|
}
|
|
13459
13507
|
}
|
|
13460
13508
|
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 });
|
|
13461
|
-
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"] }] });
|
|
13509
|
+
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"] }] });
|
|
13462
13510
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SmartTableComponent, decorators: [{
|
|
13463
13511
|
type: Component,
|
|
13464
|
-
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
|
|
13512
|
+
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"] }]
|
|
13465
13513
|
}], ctorParameters: function () { return [{ type: i0.IterableDiffers }, { type: i0.KeyValueDiffers }]; }, propDecorators: { activePage: [{
|
|
13466
13514
|
type: Input
|
|
13467
13515
|
}], cleaner: [{
|
|
@@ -14506,8 +14554,7 @@ var ToasterPlacement;
|
|
|
14506
14554
|
ToasterPlacement["BottomEnd"] = "bottom-end";
|
|
14507
14555
|
})(ToasterPlacement || (ToasterPlacement = {}));
|
|
14508
14556
|
class ToasterComponent {
|
|
14509
|
-
constructor(
|
|
14510
|
-
this.componentFactoryResolver = componentFactoryResolver;
|
|
14557
|
+
constructor(hostElement, renderer, toasterService) {
|
|
14511
14558
|
this.hostElement = hostElement;
|
|
14512
14559
|
this.renderer = renderer;
|
|
14513
14560
|
this.toasterService = toasterService;
|
|
@@ -14537,7 +14584,7 @@ class ToasterComponent {
|
|
|
14537
14584
|
'end-0': this.placement.includes('end'),
|
|
14538
14585
|
'translate-middle-x': this.placement.includes('center') && !this.placement.includes('middle'),
|
|
14539
14586
|
'translate-middle-y': this.placement.includes('middle') && !this.placement.includes('center'),
|
|
14540
|
-
'translate-middle': this.placement.includes('middle') && this.placement.includes('center')
|
|
14587
|
+
'translate-middle': this.placement.includes('middle') && this.placement.includes('center')
|
|
14541
14588
|
};
|
|
14542
14589
|
}
|
|
14543
14590
|
ngOnInit() {
|
|
@@ -14551,15 +14598,7 @@ class ToasterComponent {
|
|
|
14551
14598
|
}
|
|
14552
14599
|
addToast(toast, props, options) {
|
|
14553
14600
|
var _a;
|
|
14554
|
-
|
|
14555
|
-
if (parseInt(VERSION.major) < 13) {
|
|
14556
|
-
const factory = this.componentFactoryResolver.resolveComponentFactory(toast);
|
|
14557
|
-
componentRef = this.toasterHost.viewContainerRef.createComponent(factory, options === null || options === void 0 ? void 0 : options.index, options === null || options === void 0 ? void 0 : options.injector, options === null || options === void 0 ? void 0 : options.projectableNodes, options === null || options === void 0 ? void 0 : options.ngModuleRef);
|
|
14558
|
-
}
|
|
14559
|
-
else {
|
|
14560
|
-
// @ts-ignore
|
|
14561
|
-
componentRef = this.toasterHost.viewContainerRef.createComponent(toast, options);
|
|
14562
|
-
}
|
|
14601
|
+
const componentRef = this.toasterHost.viewContainerRef.createComponent(toast, options);
|
|
14563
14602
|
this.toastsDynamic.push(componentRef);
|
|
14564
14603
|
const index = this.toastsDynamic.indexOf(componentRef);
|
|
14565
14604
|
for (const [key, value] of Object.entries(props)) {
|
|
@@ -14611,12 +14650,12 @@ class ToasterComponent {
|
|
|
14611
14650
|
}
|
|
14612
14651
|
}
|
|
14613
14652
|
}
|
|
14614
|
-
ToasterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ToasterComponent, deps: [{ token: i0.
|
|
14653
|
+
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 });
|
|
14615
14654
|
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"] }] });
|
|
14616
14655
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ToasterComponent, decorators: [{
|
|
14617
14656
|
type: Component,
|
|
14618
14657
|
args: [{ selector: 'c-toaster', exportAs: 'cToaster', template: "<ng-template cToasterHost></ng-template>\r\n<ng-content cToasterHost></ng-content>\r\n" }]
|
|
14619
|
-
}], ctorParameters: function () { return [{ type: i0.
|
|
14658
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: ToasterService }]; }, propDecorators: { placement: [{
|
|
14620
14659
|
type: Input
|
|
14621
14660
|
}], position: [{
|
|
14622
14661
|
type: Input
|