@webilix/ngx-table-m3 0.0.6 → 0.0.7
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/fesm2022/webilix-ngx-table-m3.mjs +81 -59
- package/fesm2022/webilix-ngx-table-m3.mjs.map +1 -1
- package/lib/columns/file-size/column-file-size.component.d.ts +10 -0
- package/lib/columns/file-size/column-file-size.interface.d.ts +10 -0
- package/lib/columns/index.d.ts +2 -0
- package/lib/ngx-table.interface.d.ts +2 -2
- package/lib/views/value/view-value.component.d.ts +4 -0
- package/ngx-table-m3.css +9 -0
- package/package.json +6 -6
|
@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { InjectionToken, inject, Component, HostBinding, ViewChild, Injector, Injectable, Input, EventEmitter, Output, makeEnvironmentProviders, Optional, Inject } from '@angular/core';
|
|
3
3
|
import { Helper } from '@webilix/helper-library';
|
|
4
4
|
import * as i2 from '@webilix/ngx-helper-m3';
|
|
5
|
-
import { NGX_HELPER_CONTAINER_DATA, NGX_HELPER_CONTAINER_CLOSE, NgxHelperDatePipe, NgxHelperDurationPipe, NgxHelperMobilePipe, NgxHelperNumberPipe, NgxHelperMultiLinePipe, NgxHelperLoaderComponent } from '@webilix/ngx-helper-m3';
|
|
5
|
+
import { NGX_HELPER_CONTAINER_DATA, NGX_HELPER_CONTAINER_CLOSE, NgxHelperDatePipe, NgxHelperDurationPipe, NgxHelperFileSizePipe, NgxHelperMobilePipe, NgxHelperNumberPipe, NgxHelperMultiLinePipe, NgxHelperLoaderComponent } from '@webilix/ngx-helper-m3';
|
|
6
6
|
import { MatIcon } from '@angular/material/icon';
|
|
7
7
|
import { NgComponentOutlet, DecimalPipe } from '@angular/common';
|
|
8
8
|
import { MatButton, MatIconButton } from '@angular/material/button';
|
|
@@ -30,10 +30,10 @@ class FilterDateComponent {
|
|
|
30
30
|
data = inject(FILTER_DATA);
|
|
31
31
|
value = inject(FILTER_VALUE);
|
|
32
32
|
onChange = inject(FILTER_CHANGE);
|
|
33
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
34
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.
|
|
33
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FilterDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
34
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: FilterDateComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "filter-date" } }, ngImport: i0, template: "<ngx-calendar-date\n [value]=\"this.value\"\n [minDate]=\"this.data.filter.minDate\"\n [maxDate]=\"this.data.filter.maxDate\"\n (onChange)=\"onChange($event.date)\"\n></ngx-calendar-date>\n", styles: [""], dependencies: [{ kind: "component", type: NgxCalendarDateComponent, selector: "ngx-calendar-date", inputs: ["value", "minDate", "maxDate"], outputs: ["onChange"] }] });
|
|
35
35
|
}
|
|
36
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
36
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FilterDateComponent, decorators: [{
|
|
37
37
|
type: Component,
|
|
38
38
|
args: [{ host: { selector: 'filter-date' }, imports: [NgxCalendarDateComponent], template: "<ngx-calendar-date\n [value]=\"this.value\"\n [minDate]=\"this.data.filter.minDate\"\n [maxDate]=\"this.data.filter.maxDate\"\n (onChange)=\"onChange($event.date)\"\n></ngx-calendar-date>\n" }]
|
|
39
39
|
}] });
|
|
@@ -78,10 +78,10 @@ class FilterMultiSelectComponent {
|
|
|
78
78
|
this.value.push(id);
|
|
79
79
|
this.onChange(this.value.length === 0 ? undefined : this.value);
|
|
80
80
|
}
|
|
81
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
82
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.
|
|
81
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FilterMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
82
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: FilterMultiSelectComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "filter-multi-select" }, properties: { "className": "this.className" } }, ngImport: i0, template: "@if (data.filter.options.length > 20) {\n<div class=\"filter-item-search\">\n <input\n type=\"text\"\n [placeholder]=\"'\u062C\u0633\u062A\u062C\u0648'\"\n [class.ngx-table-m3-en]=\"data.filter.english\"\n (input)=\"searchQuery = searchInput.value.trim()\"\n #searchInput\n />\n</div>\n}\n\n<div class=\"filter-items\">\n @for (item of data.filter.options; track $index) {\n <!-- CHECK VIEW -->\n @if ((value || []).includes(item.id) || !searchQuery || item.title.includes(searchQuery)) {\n <mat-checkbox [checked]=\"(value || []).includes(item.id)\" (change)=\"updateValue(item.id, $event.checked)\">\n <div class=\"title\" [class.ngx-table-m3-en]=\"data.filter.english\">{{ item.title }}</div>\n </mat-checkbox>\n } }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }] });
|
|
83
83
|
}
|
|
84
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
84
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FilterMultiSelectComponent, decorators: [{
|
|
85
85
|
type: Component,
|
|
86
86
|
args: [{ host: { selector: 'filter-multi-select' }, imports: [MatCheckbox], template: "@if (data.filter.options.length > 20) {\n<div class=\"filter-item-search\">\n <input\n type=\"text\"\n [placeholder]=\"'\u062C\u0633\u062A\u062C\u0648'\"\n [class.ngx-table-m3-en]=\"data.filter.english\"\n (input)=\"searchQuery = searchInput.value.trim()\"\n #searchInput\n />\n</div>\n}\n\n<div class=\"filter-items\">\n @for (item of data.filter.options; track $index) {\n <!-- CHECK VIEW -->\n @if ((value || []).includes(item.id) || !searchQuery || item.title.includes(searchQuery)) {\n <mat-checkbox [checked]=\"(value || []).includes(item.id)\" (change)=\"updateValue(item.id, $event.checked)\">\n <div class=\"title\" [class.ngx-table-m3-en]=\"data.filter.english\">{{ item.title }}</div>\n </mat-checkbox>\n } }\n</div>\n" }]
|
|
87
87
|
}], propDecorators: { className: [{
|
|
@@ -138,10 +138,10 @@ class FilterSearchComponent {
|
|
|
138
138
|
this.mode = mode;
|
|
139
139
|
this.onChange(this.query ? { query: this.query, mode: this.mode || 'PHRASE' } : undefined);
|
|
140
140
|
}
|
|
141
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
142
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.
|
|
141
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FilterSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
142
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: FilterSearchComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "filter-search" }, properties: { "className": "this.className" } }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div class=\"filter-search\">\n <input\n type=\"text\"\n [ngModel]=\"query || ''\"\n [placeholder]=\"'\u062C\u0633\u062A\u062C\u0648'\"\n [class.ngx-table-m3-en]=\"data.filter.english\"\n (input)=\"updateQuery(searchInput.value)\"\n #searchInput\n />\n</div>\n\n@if (!data.filter.mode) {\n<div class=\"filter-items\">\n <mat-radio-group (change)=\"updateMode($event.value)\">\n <mat-radio-button [value]=\"'PHRASE'\" [checked]=\"mode === 'PHRASE'\">\n <div class=\"title\">\u0639\u0628\u0627\u0631\u062A \u06A9\u0627\u0645\u0644</div>\n </mat-radio-button>\n <mat-radio-button [value]=\"'ALL'\" [checked]=\"mode === 'ALL'\">\n <div class=\"title\">\u0647\u0645\u0647 \u06A9\u0644\u0645\u0627\u062A</div>\n </mat-radio-button>\n <mat-radio-button [value]=\"'EACH'\" [checked]=\"mode === 'EACH'\">\n <div class=\"title\">\u0647\u0631 \u06A9\u062F\u0627\u0645 \u0627\u0632 \u06A9\u0644\u0645\u0627\u062A</div>\n </mat-radio-button>\n </mat-radio-group>\n</div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }] });
|
|
143
143
|
}
|
|
144
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
144
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FilterSearchComponent, decorators: [{
|
|
145
145
|
type: Component,
|
|
146
146
|
args: [{ host: { selector: 'filter-search' }, imports: [FormsModule, MatRadioButton, MatRadioGroup], template: "<div class=\"filter-search\">\n <input\n type=\"text\"\n [ngModel]=\"query || ''\"\n [placeholder]=\"'\u062C\u0633\u062A\u062C\u0648'\"\n [class.ngx-table-m3-en]=\"data.filter.english\"\n (input)=\"updateQuery(searchInput.value)\"\n #searchInput\n />\n</div>\n\n@if (!data.filter.mode) {\n<div class=\"filter-items\">\n <mat-radio-group (change)=\"updateMode($event.value)\">\n <mat-radio-button [value]=\"'PHRASE'\" [checked]=\"mode === 'PHRASE'\">\n <div class=\"title\">\u0639\u0628\u0627\u0631\u062A \u06A9\u0627\u0645\u0644</div>\n </mat-radio-button>\n <mat-radio-button [value]=\"'ALL'\" [checked]=\"mode === 'ALL'\">\n <div class=\"title\">\u0647\u0645\u0647 \u06A9\u0644\u0645\u0627\u062A</div>\n </mat-radio-button>\n <mat-radio-button [value]=\"'EACH'\" [checked]=\"mode === 'EACH'\">\n <div class=\"title\">\u0647\u0631 \u06A9\u062F\u0627\u0645 \u0627\u0632 \u06A9\u0644\u0645\u0627\u062A</div>\n </mat-radio-button>\n </mat-radio-group>\n</div>\n}\n" }]
|
|
147
147
|
}], propDecorators: { className: [{
|
|
@@ -190,10 +190,10 @@ class FilterSelectComponent {
|
|
|
190
190
|
this.value = id;
|
|
191
191
|
this.onChange(this.value);
|
|
192
192
|
}
|
|
193
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
194
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.
|
|
193
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FilterSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
194
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: FilterSelectComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "filter-select" }, properties: { "className": "this.className" } }, ngImport: i0, template: "@if (data.filter.options.length > 20) {\n<div class=\"filter-item-search\">\n <input\n type=\"text\"\n [placeholder]=\"'\u062C\u0633\u062A\u062C\u0648'\"\n [class.ngx-table-m3-en]=\"data.filter.english\"\n (input)=\"searchQuery = searchInput.value.trim()\"\n #searchInput\n />\n</div>\n}\n\n<div class=\"filter-items\">\n <mat-radio-group (change)=\"updateValue($event.value)\">\n @for (item of data.filter.options; track $index) {\n <!-- CHECK VIEW -->\n @if (value === item.id || !searchQuery || item.title.includes(searchQuery)) {\n <mat-radio-button [value]=\"item.id\" [checked]=\"item.id === value\">\n <div class=\"title\" [class.ngx-table-m3-en]=\"data.filter.english\">{{ item.title }}</div>\n </mat-radio-button>\n } }\n </mat-radio-group>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }] });
|
|
195
195
|
}
|
|
196
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
196
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FilterSelectComponent, decorators: [{
|
|
197
197
|
type: Component,
|
|
198
198
|
args: [{ host: { selector: 'filter-select' }, imports: [MatRadioButton, MatRadioGroup], template: "@if (data.filter.options.length > 20) {\n<div class=\"filter-item-search\">\n <input\n type=\"text\"\n [placeholder]=\"'\u062C\u0633\u062A\u062C\u0648'\"\n [class.ngx-table-m3-en]=\"data.filter.english\"\n (input)=\"searchQuery = searchInput.value.trim()\"\n #searchInput\n />\n</div>\n}\n\n<div class=\"filter-items\">\n <mat-radio-group (change)=\"updateValue($event.value)\">\n @for (item of data.filter.options; track $index) {\n <!-- CHECK VIEW -->\n @if (value === item.id || !searchQuery || item.title.includes(searchQuery)) {\n <mat-radio-button [value]=\"item.id\" [checked]=\"item.id === value\">\n <div class=\"title\" [class.ngx-table-m3-en]=\"data.filter.english\">{{ item.title }}</div>\n </mat-radio-button>\n } }\n </mat-radio-group>\n</div>\n" }]
|
|
199
199
|
}], propDecorators: { className: [{
|
|
@@ -249,10 +249,10 @@ class FilterComponent {
|
|
|
249
249
|
if (event.code === 'Enter' && this.value)
|
|
250
250
|
this.closeContainer({ value: this.value });
|
|
251
251
|
}
|
|
252
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
253
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.
|
|
252
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
253
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: FilterComponent, isStandalone: true, selector: "filter", host: { listeners: { "window:keydown": "onKeydown($event)" }, properties: { "className": "this.className" } }, ngImport: i0, template: "<div class=\"filter-content\">\n <ng-container *ngComponentOutlet=\"filterInfo[data.filter.filter.type].component; injector: injector\"></ng-container>\n</div>\n\n<div class=\"filter-footer\">\n <button mat-stroked-button type=\"button\" [disabled]=\"!value\" (click)=\"closeContainer({ value: undefined })\">\n \u0644\u063A\u0648 \u0641\u06CC\u0644\u062A\u0631\n </button>\n <button mat-flat-button type=\"button\" class=\"confirm\" [disabled]=\"!value\" (click)=\"closeContainer({value})\">\n \u062A\u0627\u06CC\u06CC\u062F\n </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host .filter-content{display:block;overflow-x:hidden;overflow-y:auto;max-height:60vh}\n"], dependencies: [{ kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }] });
|
|
254
254
|
}
|
|
255
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
255
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FilterComponent, decorators: [{
|
|
256
256
|
type: Component,
|
|
257
257
|
args: [{ selector: 'filter', host: { '(window:keydown)': 'onKeydown($event)' }, imports: [MatButton, NgComponentOutlet], template: "<div class=\"filter-content\">\n <ng-container *ngComponentOutlet=\"filterInfo[data.filter.filter.type].component; injector: injector\"></ng-container>\n</div>\n\n<div class=\"filter-footer\">\n <button mat-stroked-button type=\"button\" [disabled]=\"!value\" (click)=\"closeContainer({ value: undefined })\">\n \u0644\u063A\u0648 \u0641\u06CC\u0644\u062A\u0631\n </button>\n <button mat-flat-button type=\"button\" class=\"confirm\" [disabled]=\"!value\" (click)=\"closeContainer({value})\">\n \u062A\u0627\u06CC\u06CC\u062F\n </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host .filter-content{display:block;overflow-x:hidden;overflow-y:auto;max-height:60vh}\n"] }]
|
|
258
258
|
}], propDecorators: { className: [{
|
|
@@ -300,10 +300,10 @@ class FilterService {
|
|
|
300
300
|
.bottomSheet((response) => resolve({ ...filter, value: response.value }), () => resolve(undefined));
|
|
301
301
|
});
|
|
302
302
|
}
|
|
303
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
304
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.
|
|
303
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FilterService, deps: [{ token: i1$1.ActivatedRoute }, { token: i2.NgxHelperContainerService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
304
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FilterService });
|
|
305
305
|
}
|
|
306
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
306
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FilterService, decorators: [{
|
|
307
307
|
type: Injectable
|
|
308
308
|
}], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: i2.NgxHelperContainerService }] });
|
|
309
309
|
|
|
@@ -392,10 +392,10 @@ class ViewActionComponent {
|
|
|
392
392
|
if (result)
|
|
393
393
|
this.router.navigate(result);
|
|
394
394
|
}
|
|
395
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
396
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.
|
|
395
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ViewActionComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
396
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ViewActionComponent, isStandalone: true, selector: "view-action", inputs: { actions: "actions", item: "item", viewConfig: "viewConfig", isMobile: "isMobile" }, host: { properties: { "className": "this.className" } }, usesOnChanges: true, ngImport: i0, template: "<!-- ROW -->\n@for (item of inRow; track $index) {\n<!-- DESKTOP -->\n@if (!isMobile) {\n<button\n mat-button\n type=\"button\"\n class=\"desktop-view\"\n [style.color]=\"item.isDisabled ? '' : item.color\"\n [disabled]=\"item.isDisabled\"\n (click)=\"onClick(item.action)\"\n>\n {{ item.title }}\n</button>\n}\n<!-- MOBILE -->\n@else {\n<button mat-icon-button type=\"button\" [disabled]=\"item.isDisabled\" (click)=\"onClick(item.action)\">\n <mat-icon [style.color]=\"item.isDisabled ? '' : item.color\" [class.disabled]=\"item.isDisabled\">{{ item.icon }}</mat-icon>\n</button>\n} }\n\n<!-- MENU -->\n@if (this.inMenu.length > 0) {\n<!-- DESKTOP -->\n@if (!isMobile) {\n<button mat-button type=\"button\" class=\"desktop-view\" [matMenuTriggerFor]=\"actionMenu\">\n {{ viewConfig.actionMenuTitle }}\n</button>\n}\n<!-- MOBILE -->\n@else {\n<button mat-icon-button type=\"button\" [matMenuTriggerFor]=\"actionMenu\">\n <mat-icon>more_vert</mat-icon>\n</button>\n}\n\n<mat-menu #actionMenu=\"matMenu\" [xPosition]=\"'before'\" class=\"ngx-table-action-menu\">\n @for (item of inMenu; track $index) {\n <!-- DIVIDER -->\n @if (item === 'DIVIDER') {\n <mat-divider></mat-divider>\n }\n\n <!-- MENU ITEM -->\n @else {\n <button\n mat-menu-item\n type=\"button\"\n [class.disabled]=\"item.isDisabled\"\n [style.color]=\"item.isDisabled ? '' : item.color\"\n (click)=\"onClick(item.action)\"\n [disabled]=\"item.isDisabled\"\n >\n <span class=\"title\">{{ item.title }}</span>\n <mat-icon [style.color]=\"item.isDisabled ? '' : item.color\">{{ item.icon }}</mat-icon>\n </button>\n } }\n</mat-menu>\n}\n", styles: ["::ng-deep .ngx-table-action-menu .title{font-size:90%!important}::ng-deep .ngx-table-action-menu mat-icon{font-size:120%;margin:0 0 0 .75rem!important}::ng-deep .ngx-table-action-menu .mat-mdc-menu-content{padding:0}::ng-deep .ngx-table-action-menu .mat-mdc-menu-item{direction:rtl;text-align:right}::ng-deep .ngx-table-action-menu .mat-divider{margin:0;border-top-color:var(--outline-variant)}\n"], dependencies: [{ kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] });
|
|
397
397
|
}
|
|
398
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
398
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ViewActionComponent, decorators: [{
|
|
399
399
|
type: Component,
|
|
400
400
|
args: [{ selector: 'view-action', imports: [MatButton, MatDivider, MatIconButton, MatIcon, MatMenuModule], template: "<!-- ROW -->\n@for (item of inRow; track $index) {\n<!-- DESKTOP -->\n@if (!isMobile) {\n<button\n mat-button\n type=\"button\"\n class=\"desktop-view\"\n [style.color]=\"item.isDisabled ? '' : item.color\"\n [disabled]=\"item.isDisabled\"\n (click)=\"onClick(item.action)\"\n>\n {{ item.title }}\n</button>\n}\n<!-- MOBILE -->\n@else {\n<button mat-icon-button type=\"button\" [disabled]=\"item.isDisabled\" (click)=\"onClick(item.action)\">\n <mat-icon [style.color]=\"item.isDisabled ? '' : item.color\" [class.disabled]=\"item.isDisabled\">{{ item.icon }}</mat-icon>\n</button>\n} }\n\n<!-- MENU -->\n@if (this.inMenu.length > 0) {\n<!-- DESKTOP -->\n@if (!isMobile) {\n<button mat-button type=\"button\" class=\"desktop-view\" [matMenuTriggerFor]=\"actionMenu\">\n {{ viewConfig.actionMenuTitle }}\n</button>\n}\n<!-- MOBILE -->\n@else {\n<button mat-icon-button type=\"button\" [matMenuTriggerFor]=\"actionMenu\">\n <mat-icon>more_vert</mat-icon>\n</button>\n}\n\n<mat-menu #actionMenu=\"matMenu\" [xPosition]=\"'before'\" class=\"ngx-table-action-menu\">\n @for (item of inMenu; track $index) {\n <!-- DIVIDER -->\n @if (item === 'DIVIDER') {\n <mat-divider></mat-divider>\n }\n\n <!-- MENU ITEM -->\n @else {\n <button\n mat-menu-item\n type=\"button\"\n [class.disabled]=\"item.isDisabled\"\n [style.color]=\"item.isDisabled ? '' : item.color\"\n (click)=\"onClick(item.action)\"\n [disabled]=\"item.isDisabled\"\n >\n <span class=\"title\">{{ item.title }}</span>\n <mat-icon [style.color]=\"item.isDisabled ? '' : item.color\">{{ item.icon }}</mat-icon>\n </button>\n } }\n</mat-menu>\n}\n", styles: ["::ng-deep .ngx-table-action-menu .title{font-size:90%!important}::ng-deep .ngx-table-action-menu mat-icon{font-size:120%;margin:0 0 0 .75rem!important}::ng-deep .ngx-table-action-menu .mat-mdc-menu-content{padding:0}::ng-deep .ngx-table-action-menu .mat-mdc-menu-item{direction:rtl;text-align:right}::ng-deep .ngx-table-action-menu .mat-divider{margin:0;border-top-color:var(--outline-variant)}\n"] }]
|
|
401
401
|
}], ctorParameters: () => [{ type: i1$1.Router }], propDecorators: { className: [{
|
|
@@ -425,10 +425,10 @@ class ColumnDateComponent {
|
|
|
425
425
|
column = inject(COLUMN_TYPE);
|
|
426
426
|
value = inject(COLUMN_VALUE);
|
|
427
427
|
config = inject(COLUMN_CONFIG);
|
|
428
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
429
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.
|
|
428
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ColumnDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
429
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ColumnDateComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "column-date" } }, ngImport: i0, template: "<div [style.display]=\"'inline-block'\" [class.ngx-table-m3-deactive]=\"config.isDeactive\">\n {{ value | ngxHelperDate : { format: column.format } }}\n</div>\n", styles: [""], dependencies: [{ kind: "pipe", type: NgxHelperDatePipe, name: "ngxHelperDate" }] });
|
|
430
430
|
}
|
|
431
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
431
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ColumnDateComponent, decorators: [{
|
|
432
432
|
type: Component,
|
|
433
433
|
args: [{ host: { selector: 'column-date' }, imports: [NgxHelperDatePipe], template: "<div [style.display]=\"'inline-block'\" [class.ngx-table-m3-deactive]=\"config.isDeactive\">\n {{ value | ngxHelperDate : { format: column.format } }}\n</div>\n" }]
|
|
434
434
|
}] });
|
|
@@ -446,10 +446,10 @@ class ColumnDurationComponent {
|
|
|
446
446
|
column = inject(COLUMN_TYPE);
|
|
447
447
|
value = inject(COLUMN_VALUE);
|
|
448
448
|
config = inject(COLUMN_CONFIG);
|
|
449
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
450
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.
|
|
449
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ColumnDurationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
450
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ColumnDurationComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "column-duration" } }, ngImport: i0, template: "<div\n [style.display]=\"'inline-block'\"\n [class.ngx-table-m3-en]=\"config.isEN\"\n [class.ngx-table-m3-deactive]=\"config.isDeactive\"\n>\n {{ value | ngxHelperDuration : { english: config.isEN, format: column.format } }}\n</div>\n", styles: [""], dependencies: [{ kind: "pipe", type: NgxHelperDurationPipe, name: "ngxHelperDuration" }] });
|
|
451
451
|
}
|
|
452
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
452
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ColumnDurationComponent, decorators: [{
|
|
453
453
|
type: Component,
|
|
454
454
|
args: [{ host: { selector: 'column-duration' }, imports: [NgxHelperDurationPipe], template: "<div\n [style.display]=\"'inline-block'\"\n [class.ngx-table-m3-en]=\"config.isEN\"\n [class.ngx-table-m3-deactive]=\"config.isDeactive\"\n>\n {{ value | ngxHelperDuration : { english: config.isEN, format: column.format } }}\n</div>\n" }]
|
|
455
455
|
}] });
|
|
@@ -474,14 +474,35 @@ class ColumnDurationMethods extends ColumnMethods {
|
|
|
474
474
|
}
|
|
475
475
|
}
|
|
476
476
|
|
|
477
|
+
class ColumnFileSizeComponent {
|
|
478
|
+
column = inject(COLUMN_TYPE);
|
|
479
|
+
value = inject(COLUMN_VALUE);
|
|
480
|
+
config = inject(COLUMN_CONFIG);
|
|
481
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ColumnFileSizeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
482
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ColumnFileSizeComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "column-file-size" } }, ngImport: i0, template: "<div\n [style.display]=\"'inline-block'\"\n [class.ngx-table-m3-en]=\"config.isEN\"\n [class.ngx-table-m3-deactive]=\"config.isDeactive\"\n>\n {{ value | ngxHelperFileSize : { english: config.isEN } }}\n</div>\n", styles: [""], dependencies: [{ kind: "pipe", type: NgxHelperFileSizePipe, name: "ngxHelperFileSize" }] });
|
|
483
|
+
}
|
|
484
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ColumnFileSizeComponent, decorators: [{
|
|
485
|
+
type: Component,
|
|
486
|
+
args: [{ host: { selector: 'column-file-size' }, imports: [NgxHelperFileSizePipe], template: "<div\n [style.display]=\"'inline-block'\"\n [class.ngx-table-m3-en]=\"config.isEN\"\n [class.ngx-table-m3-deactive]=\"config.isDeactive\"\n>\n {{ value | ngxHelperFileSize : { english: config.isEN } }}\n</div>\n" }]
|
|
487
|
+
}] });
|
|
488
|
+
|
|
489
|
+
class ColumnFileSizeMethods extends ColumnMethods {
|
|
490
|
+
column(column) {
|
|
491
|
+
return { ...column, title: column.title || 'حجم فایل' };
|
|
492
|
+
}
|
|
493
|
+
value(value, column) {
|
|
494
|
+
return Helper.IS.number(value) && value >= 0 ? value : undefined;
|
|
495
|
+
}
|
|
496
|
+
}
|
|
497
|
+
|
|
477
498
|
class ColumnMobileComponent {
|
|
478
499
|
column = inject(COLUMN_TYPE);
|
|
479
500
|
value = inject(COLUMN_VALUE);
|
|
480
501
|
config = inject(COLUMN_CONFIG);
|
|
481
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
482
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.
|
|
502
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ColumnMobileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
503
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ColumnMobileComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "column-mobile" } }, ngImport: i0, template: "<div\n [style.display]=\"'inline-block'\"\n [style.direction]=\"'ltr'\"\n [class.ngx-table-m3-en]=\"config.isEN\"\n [class.ngx-table-m3-deactive]=\"config.isDeactive\"\n>\n {{ value | ngxHelperMobile }}\n</div>\n", styles: [""], dependencies: [{ kind: "pipe", type: NgxHelperMobilePipe, name: "ngxHelperMobile" }] });
|
|
483
504
|
}
|
|
484
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
505
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ColumnMobileComponent, decorators: [{
|
|
485
506
|
type: Component,
|
|
486
507
|
args: [{ host: { selector: 'column-mobile' }, imports: [NgxHelperMobilePipe], template: "<div\n [style.display]=\"'inline-block'\"\n [style.direction]=\"'ltr'\"\n [class.ngx-table-m3-en]=\"config.isEN\"\n [class.ngx-table-m3-deactive]=\"config.isDeactive\"\n>\n {{ value | ngxHelperMobile }}\n</div>\n" }]
|
|
487
508
|
}] });
|
|
@@ -499,10 +520,10 @@ class ColumnNumberComponent {
|
|
|
499
520
|
column = inject(COLUMN_TYPE);
|
|
500
521
|
value = inject(COLUMN_VALUE);
|
|
501
522
|
config = inject(COLUMN_CONFIG);
|
|
502
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
503
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.
|
|
523
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ColumnNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
524
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ColumnNumberComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "column-number" } }, ngImport: i0, template: "<div\n [style.display]=\"'inline-block'\"\n [style.direction]=\"'ltr'\"\n [class.ngx-table-m3-en]=\"config.isEN\"\n [class.ngx-table-m3-deactive]=\"config.isDeactive\"\n>\n {{ value | ngxHelperNumber : { english: config.isEN, fractionDigits: column.fractionDigits } }}\n</div>\n", styles: [""], dependencies: [{ kind: "pipe", type: NgxHelperNumberPipe, name: "ngxHelperNumber" }] });
|
|
504
525
|
}
|
|
505
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
526
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ColumnNumberComponent, decorators: [{
|
|
506
527
|
type: Component,
|
|
507
528
|
args: [{ host: { selector: 'column-number' }, imports: [NgxHelperNumberPipe], template: "<div\n [style.display]=\"'inline-block'\"\n [style.direction]=\"'ltr'\"\n [class.ngx-table-m3-en]=\"config.isEN\"\n [class.ngx-table-m3-deactive]=\"config.isDeactive\"\n>\n {{ value | ngxHelperNumber : { english: config.isEN, fractionDigits: column.fractionDigits } }}\n</div>\n" }]
|
|
508
529
|
}] });
|
|
@@ -520,10 +541,10 @@ class ColumnTextComponent {
|
|
|
520
541
|
column = inject(COLUMN_TYPE);
|
|
521
542
|
value = inject(COLUMN_VALUE);
|
|
522
543
|
config = inject(COLUMN_CONFIG);
|
|
523
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
524
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.
|
|
544
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ColumnTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
545
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ColumnTextComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "column-text" } }, ngImport: i0, template: "<div\n [style.display]=\"'inline-block'\"\n [class.ngx-table-m3-en]=\"config.isEN\"\n [class.ngx-table-m3-deactive]=\"config.isDeactive\"\n>\n {{ value }}\n</div>\n", styles: [""] });
|
|
525
546
|
}
|
|
526
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
547
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ColumnTextComponent, decorators: [{
|
|
527
548
|
type: Component,
|
|
528
549
|
args: [{ host: { selector: 'column-text' }, imports: [], template: "<div\n [style.display]=\"'inline-block'\"\n [class.ngx-table-m3-en]=\"config.isEN\"\n [class.ngx-table-m3-deactive]=\"config.isDeactive\"\n>\n {{ value }}\n</div>\n" }]
|
|
529
550
|
}] });
|
|
@@ -540,6 +561,7 @@ class ColumnTextMethods extends ColumnMethods {
|
|
|
540
561
|
const ColumnInfo = {
|
|
541
562
|
DATE: { methods: new ColumnDateMethods(), component: ColumnDateComponent },
|
|
542
563
|
DURATION: { methods: new ColumnDurationMethods(), component: ColumnDurationComponent },
|
|
564
|
+
'FILE-SIZE': { methods: new ColumnFileSizeMethods(), component: ColumnFileSizeComponent },
|
|
543
565
|
MOBILE: { methods: new ColumnMobileMethods(), component: ColumnMobileComponent },
|
|
544
566
|
NUMBER: { methods: new ColumnNumberMethods(), component: ColumnNumberComponent },
|
|
545
567
|
TEXT: { methods: new ColumnTextMethods(), component: ColumnTextComponent },
|
|
@@ -640,10 +662,10 @@ class ViewValueComponent {
|
|
|
640
662
|
this.copyTimeout = undefined;
|
|
641
663
|
}, 2000);
|
|
642
664
|
}
|
|
643
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
644
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.
|
|
665
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ViewValueComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
666
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ViewValueComponent, isStandalone: true, selector: "view-value", inputs: { column: "column", item: "item", viewConfig: "viewConfig", isDeactive: "isDeactive", isCard: "isCard", isCardTitle: "isCardTitle", isCardSubTitle: "isCardSubTitle" }, host: { properties: { "className": "this.className", "style.text-align": "this.textAlign" } }, usesOnChanges: true, ngImport: i0, template: "<!-- EMPTY VALUE -->\n@if (value === undefined) { }\n\n<!-- SHOW VALUE -->\n@else {\n<div class=\"value-container\" [style.color]=\"color\" [class.card-title]=\"isCardTitle\" [class.card-sub-title]=\"isCardSubTitle\">\n <div\n class=\"value\"\n [style.cursor]=\"hasClick || copyText ? 'pointer' : 'default'\"\n (click)=\"hasClick ? onClick() : copyText ? onCopy() : null\"\n [cdkCopyToClipboard]=\"copyText || ''\"\n >\n <ng-container *ngComponentOutlet=\"columnInfo[column.type].component; injector: injector\"></ng-container>\n <!-- CLICK -->\n @if (hasClick) { <mat-icon>open_in_new</mat-icon> }\n <!-- COPY -->\n @if (copyText) { <mat-icon>{{ isCopied ? 'done_all' : 'copy' }}</mat-icon> }\n </div>\n\n <!-- SUB VALUE -->\n @if (subValue) {\n <div class=\"sub-value\" [class.ngx-table-m3-en]=\"subValue.isEN\">{{ subValue.value }}</div>\n }\n</div>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "ngmodule", type: ClipboardModule }, { kind: "directive", type: i2$1.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
645
667
|
}
|
|
646
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
668
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ViewValueComponent, decorators: [{
|
|
647
669
|
type: Component,
|
|
648
670
|
args: [{ selector: 'view-value', imports: [NgComponentOutlet, ClipboardModule, MatIcon], template: "<!-- EMPTY VALUE -->\n@if (value === undefined) { }\n\n<!-- SHOW VALUE -->\n@else {\n<div class=\"value-container\" [style.color]=\"color\" [class.card-title]=\"isCardTitle\" [class.card-sub-title]=\"isCardSubTitle\">\n <div\n class=\"value\"\n [style.cursor]=\"hasClick || copyText ? 'pointer' : 'default'\"\n (click)=\"hasClick ? onClick() : copyText ? onCopy() : null\"\n [cdkCopyToClipboard]=\"copyText || ''\"\n >\n <ng-container *ngComponentOutlet=\"columnInfo[column.type].component; injector: injector\"></ng-container>\n <!-- CLICK -->\n @if (hasClick) { <mat-icon>open_in_new</mat-icon> }\n <!-- COPY -->\n @if (copyText) { <mat-icon>{{ isCopied ? 'done_all' : 'copy' }}</mat-icon> }\n </div>\n\n <!-- SUB VALUE -->\n @if (subValue) {\n <div class=\"sub-value\" [class.ngx-table-m3-en]=\"subValue.isEN\">{{ subValue.value }}</div>\n }\n</div>\n}\n" }]
|
|
649
671
|
}], ctorParameters: () => [{ type: i1$1.Router }], propDecorators: { className: [{
|
|
@@ -754,10 +776,10 @@ class ViewService {
|
|
|
754
776
|
}
|
|
755
777
|
return orders;
|
|
756
778
|
}
|
|
757
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
758
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.
|
|
779
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ViewService, deps: [{ token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
780
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ViewService });
|
|
759
781
|
}
|
|
760
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
782
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ViewService, decorators: [{
|
|
761
783
|
type: Injectable
|
|
762
784
|
}], ctorParameters: () => [{ type: i1$1.ActivatedRoute }] });
|
|
763
785
|
|
|
@@ -814,10 +836,10 @@ class ViewCardToolbarComponent {
|
|
|
814
836
|
break;
|
|
815
837
|
}
|
|
816
838
|
}
|
|
817
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
818
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.
|
|
839
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ViewCardToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
840
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ViewCardToolbarComponent, isStandalone: true, selector: "view-card-toolbar", inputs: { orders: "orders", filters: "filters", viewConfig: "viewConfig" }, outputs: { orderChanged: "orderChanged", updateFilter: "updateFilter", clearFilter: "clearFilter" }, host: { properties: { "className": "this.className" } }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"toolbar-container\"\n [style.position]=\"viewConfig.stickyView?.top ? 'sticky' : 'static'\"\n [style.top]=\"viewConfig.stickyView?.top?.mobileView || undefined\"\n (mousedown)=\"swipe($event, 'START', toolbarContainer, toolbarItems)\"\n (mousemove)=\"swipe($event, 'MOVE', toolbarContainer, toolbarItems)\"\n (mouseup)=\"swipe($event, 'END', toolbarContainer, toolbarItems)\"\n (touchstart)=\"swipe($event, 'START', toolbarContainer, toolbarItems)\"\n (touchmove)=\"swipe($event, 'MOVE', toolbarContainer, toolbarItems)\"\n (touchend)=\"swipe($event, 'END', toolbarContainer, toolbarItems)\"\n #toolbarContainer\n>\n <div class=\"toolbar-items\" #toolbarItems>\n <!-- ORDER -->\n @if (orderKeys.length > 0) {\n <div class=\"item\" [matMenuTriggerFor]=\"orderMenu\">\n <mat-icon>swap_vert</mat-icon>\n <span>\u062A\u0631\u062A\u06CC\u0628 \u0646\u0645\u0627\u06CC\u0634</span>\n </div>\n <mat-menu #orderMenu=\"matMenu\" [xPosition]=\"'before'\" class=\"ngx-table-order-menu\">\n @for (item of orderKeys; track $index) {\n <!-- DIVIDER -->\n @if ($index !== 0) {<mat-divider></mat-divider>}\n\n <!-- TYPES -->\n @switch (orders[item].type) {\n <!-- ORDR -->\n @case ('ORDER') {\n <button\n mat-menu-item\n type=\"button\"\n [disabled]=\"orders[item].current === 'ASC'\"\n (click)=\"updateOrder(item, 'ASC')\"\n >\n <mat-icon>north</mat-icon>\n <span>{{ orders[item].title }}</span>\n </button>\n <button\n mat-menu-item\n type=\"button\"\n [disabled]=\"orders[item].current === 'DESC'\"\n (click)=\"updateOrder(item, 'DESC')\"\n >\n <mat-icon>south</mat-icon>\n <span>{{ orders[item].title }}</span>\n </button>\n }\n <!-- ASC, DESC -->\n @default {\n <button\n mat-menu-item\n type=\"button\"\n [disabled]=\"orders[item].current\"\n (click)=\"updateOrder(item, orders[item].type)\"\n >\n <mat-icon>{{ orders[item].type === 'ASC' ? 'north' : 'south' }}</mat-icon>\n <span>{{ orders[item].title }}</span>\n </button>\n } } }\n </mat-menu>\n }\n\n <!-- CLEAR -->\n @if (showClear) {\n <div class=\"item clear\" (click)=\"clearFilter.next()\">\n <span>\u0644\u063A\u0648 \u0641\u06CC\u0644\u062A\u0631\u0647\u0627</span>\n <mat-icon>filter_alt_off</mat-icon>\n </div>\n\n }\n\n <!-- FILTER -->\n @for (item of filterKeys; track $index) {\n <div class=\"item\" [class.active]=\"filters[item].value\" (click)=\"updateFilter.next(item)\">\n <mat-icon>filter_alt</mat-icon>\n <span>{{ filters[item].title }}</span>\n </div>\n }\n </div>\n</div>\n\n<div\n class=\"toolbar-seperator\"\n [style.position]=\"viewConfig.stickyView?.top ? 'sticky' : 'static'\"\n [style.top]=\"\n 'calc(' + (viewConfig.stickyView?.top?.mobileView || undefined) + ' + var(--ngx-table-m3-toolbar-height) + 2px)'\n \"\n></div>\n", styles: ["::ng-deep .ngx-table-order-menu mat-icon{font-size:100%;margin:0 0 0 .75rem!important}::ng-deep .ngx-table-order-menu .mat-mdc-menu-content{padding:0}::ng-deep .ngx-table-order-menu .mat-mdc-menu-item{direction:rtl;text-align:right}::ng-deep .ngx-table-order-menu .mat-mdc-menu-item .mat-mdc-menu-item-text{font-size:90%!important}::ng-deep .ngx-table-order-menu .mat-divider{margin:0!important;border-top-color:var(--outline-variant)}\n"], dependencies: [{ kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] });
|
|
819
841
|
}
|
|
820
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
842
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ViewCardToolbarComponent, decorators: [{
|
|
821
843
|
type: Component,
|
|
822
844
|
args: [{ selector: 'view-card-toolbar', imports: [MatDivider, MatIcon, MatMenuModule], template: "<div\n class=\"toolbar-container\"\n [style.position]=\"viewConfig.stickyView?.top ? 'sticky' : 'static'\"\n [style.top]=\"viewConfig.stickyView?.top?.mobileView || undefined\"\n (mousedown)=\"swipe($event, 'START', toolbarContainer, toolbarItems)\"\n (mousemove)=\"swipe($event, 'MOVE', toolbarContainer, toolbarItems)\"\n (mouseup)=\"swipe($event, 'END', toolbarContainer, toolbarItems)\"\n (touchstart)=\"swipe($event, 'START', toolbarContainer, toolbarItems)\"\n (touchmove)=\"swipe($event, 'MOVE', toolbarContainer, toolbarItems)\"\n (touchend)=\"swipe($event, 'END', toolbarContainer, toolbarItems)\"\n #toolbarContainer\n>\n <div class=\"toolbar-items\" #toolbarItems>\n <!-- ORDER -->\n @if (orderKeys.length > 0) {\n <div class=\"item\" [matMenuTriggerFor]=\"orderMenu\">\n <mat-icon>swap_vert</mat-icon>\n <span>\u062A\u0631\u062A\u06CC\u0628 \u0646\u0645\u0627\u06CC\u0634</span>\n </div>\n <mat-menu #orderMenu=\"matMenu\" [xPosition]=\"'before'\" class=\"ngx-table-order-menu\">\n @for (item of orderKeys; track $index) {\n <!-- DIVIDER -->\n @if ($index !== 0) {<mat-divider></mat-divider>}\n\n <!-- TYPES -->\n @switch (orders[item].type) {\n <!-- ORDR -->\n @case ('ORDER') {\n <button\n mat-menu-item\n type=\"button\"\n [disabled]=\"orders[item].current === 'ASC'\"\n (click)=\"updateOrder(item, 'ASC')\"\n >\n <mat-icon>north</mat-icon>\n <span>{{ orders[item].title }}</span>\n </button>\n <button\n mat-menu-item\n type=\"button\"\n [disabled]=\"orders[item].current === 'DESC'\"\n (click)=\"updateOrder(item, 'DESC')\"\n >\n <mat-icon>south</mat-icon>\n <span>{{ orders[item].title }}</span>\n </button>\n }\n <!-- ASC, DESC -->\n @default {\n <button\n mat-menu-item\n type=\"button\"\n [disabled]=\"orders[item].current\"\n (click)=\"updateOrder(item, orders[item].type)\"\n >\n <mat-icon>{{ orders[item].type === 'ASC' ? 'north' : 'south' }}</mat-icon>\n <span>{{ orders[item].title }}</span>\n </button>\n } } }\n </mat-menu>\n }\n\n <!-- CLEAR -->\n @if (showClear) {\n <div class=\"item clear\" (click)=\"clearFilter.next()\">\n <span>\u0644\u063A\u0648 \u0641\u06CC\u0644\u062A\u0631\u0647\u0627</span>\n <mat-icon>filter_alt_off</mat-icon>\n </div>\n\n }\n\n <!-- FILTER -->\n @for (item of filterKeys; track $index) {\n <div class=\"item\" [class.active]=\"filters[item].value\" (click)=\"updateFilter.next(item)\">\n <mat-icon>filter_alt</mat-icon>\n <span>{{ filters[item].title }}</span>\n </div>\n }\n </div>\n</div>\n\n<div\n class=\"toolbar-seperator\"\n [style.position]=\"viewConfig.stickyView?.top ? 'sticky' : 'static'\"\n [style.top]=\"\n 'calc(' + (viewConfig.stickyView?.top?.mobileView || undefined) + ' + var(--ngx-table-m3-toolbar-height) + 2px)'\n \"\n></div>\n", styles: ["::ng-deep .ngx-table-order-menu mat-icon{font-size:100%;margin:0 0 0 .75rem!important}::ng-deep .ngx-table-order-menu .mat-mdc-menu-content{padding:0}::ng-deep .ngx-table-order-menu .mat-mdc-menu-item{direction:rtl;text-align:right}::ng-deep .ngx-table-order-menu .mat-mdc-menu-item .mat-mdc-menu-item-text{font-size:90%!important}::ng-deep .ngx-table-order-menu .mat-divider{margin:0!important;border-top-color:var(--outline-variant)}\n"] }]
|
|
823
845
|
}], propDecorators: { className: [{
|
|
@@ -894,10 +916,10 @@ class ViewCardComponent {
|
|
|
894
916
|
this.filterChanged.next({ id, value: filter.value });
|
|
895
917
|
});
|
|
896
918
|
}
|
|
897
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
898
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.
|
|
919
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ViewCardComponent, deps: [{ token: FilterService }, { token: ViewService }], target: i0.ɵɵFactoryTarget.Component });
|
|
920
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ViewCardComponent, isStandalone: true, selector: "view-card", inputs: { ngxTable: "ngxTable", data: "data", viewConfig: "viewConfig" }, outputs: { orderChanged: "orderChanged", filterChanged: "filterChanged", filterCleared: "filterCleared" }, host: { properties: { "className": "this.className" } }, providers: [FilterService, ViewService], usesOnChanges: true, ngImport: i0, template: "<!-- TOOLBAR -->\n@if (hasToolbar) {\n<view-card-toolbar\n [orders]=\"orders\"\n [filters]=\"filters\"\n [viewConfig]=\"viewConfig\"\n (orderChanged)=\"orderChanged.next($event)\"\n (updateFilter)=\"updateFilter($event)\"\n (clearFilter)=\"filterCleared.next()\"\n></view-card-toolbar>\n}\n\n<!-- DATA -->\n<div class=\"card-container\">\n @for (item of data; track $index; let dataIndex = $index) {\n <div class=\"card\">\n <div class=\"card-header\" [style.position]=\"viewConfig.stickyView?.top ? 'sticky' : 'static'\" [style.top]=\"top\">\n <!-- ICON -->\n @if (hasIcon) {\n <mat-icon class=\"icon\" [style.color]=\"icons[$index].color\" [style.font-size]=\"viewConfig.iconSize\">\n {{ icons[$index].icon }}\n </mat-icon>\n }\n\n <!-- TITLE -->\n <div class=\"title\" [style.color]=\"colors[dataIndex]\">\n <view-value\n [column]=\"ngxTable.columns[this.titleIndex]\"\n [item]=\"item\"\n [viewConfig]=\"viewConfig\"\n [isDeactive]=\"deactives.includes(dataIndex)\"\n [isCard]=\"true\"\n [isCardTitle]=\"true\"\n ></view-value>\n <!-- SUB TITLE -->\n @if (subTitleIndex) {\n <view-value\n [column]=\"ngxTable.columns[this.subTitleIndex]\"\n [item]=\"item\"\n [viewConfig]=\"viewConfig\"\n [isCard]=\"true\"\n [isCardSubTitle]=\"true\"\n ></view-value>\n }\n </div>\n\n <!-- ACTION -->\n @if (hasAction) {\n <view-action\n [actions]=\"ngxTable.actions || []\"\n [item]=\"item\"\n [viewConfig]=\"viewConfig\"\n [isMobile]=\"true\"\n ></view-action>\n }\n </div>\n\n <!-- CONTENT -->\n @if (hasContent) {\n <div class=\"card-content\" [style.color]=\"colors[dataIndex]\">\n @for (column of ngxTable.columns; track $index; let columnIndex = $index) {\n <!-- CHECK TITLE AND SUBTITLE -->\n @if (columnIndex !== titleIndex && columnIndex !== subTitleIndex) {\n <div class=\"item\">\n <div class=\"title\">{{ column.title }}:</div>\n <div class=\"value\">\n <view-value [column]=\"column\" [item]=\"item\" [viewConfig]=\"viewConfig\" [isCard]=\"true\"></view-value>\n </div>\n </div>\n } }\n\n <!-- DESCRIPTION -->\n @if (descriptions[dataIndex]) {\n <div class=\"description\" [innerHTML]=\"descriptions[dataIndex] || '' | ngxHelperMultiLine\"></div>\n }\n </div>\n }\n </div>\n }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: NgxHelperMultiLinePipe, name: "ngxHelperMultiLine" }, { kind: "component", type: ViewActionComponent, selector: "view-action", inputs: ["actions", "item", "viewConfig", "isMobile"] }, { kind: "component", type: ViewValueComponent, selector: "view-value", inputs: ["column", "item", "viewConfig", "isDeactive", "isCard", "isCardTitle", "isCardSubTitle"] }, { kind: "component", type: ViewCardToolbarComponent, selector: "view-card-toolbar", inputs: ["orders", "filters", "viewConfig"], outputs: ["orderChanged", "updateFilter", "clearFilter"] }] });
|
|
899
921
|
}
|
|
900
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
922
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ViewCardComponent, decorators: [{
|
|
901
923
|
type: Component,
|
|
902
924
|
args: [{ selector: 'view-card', imports: [MatIcon, NgxHelperMultiLinePipe, ViewActionComponent, ViewValueComponent, ViewCardToolbarComponent], providers: [FilterService, ViewService], template: "<!-- TOOLBAR -->\n@if (hasToolbar) {\n<view-card-toolbar\n [orders]=\"orders\"\n [filters]=\"filters\"\n [viewConfig]=\"viewConfig\"\n (orderChanged)=\"orderChanged.next($event)\"\n (updateFilter)=\"updateFilter($event)\"\n (clearFilter)=\"filterCleared.next()\"\n></view-card-toolbar>\n}\n\n<!-- DATA -->\n<div class=\"card-container\">\n @for (item of data; track $index; let dataIndex = $index) {\n <div class=\"card\">\n <div class=\"card-header\" [style.position]=\"viewConfig.stickyView?.top ? 'sticky' : 'static'\" [style.top]=\"top\">\n <!-- ICON -->\n @if (hasIcon) {\n <mat-icon class=\"icon\" [style.color]=\"icons[$index].color\" [style.font-size]=\"viewConfig.iconSize\">\n {{ icons[$index].icon }}\n </mat-icon>\n }\n\n <!-- TITLE -->\n <div class=\"title\" [style.color]=\"colors[dataIndex]\">\n <view-value\n [column]=\"ngxTable.columns[this.titleIndex]\"\n [item]=\"item\"\n [viewConfig]=\"viewConfig\"\n [isDeactive]=\"deactives.includes(dataIndex)\"\n [isCard]=\"true\"\n [isCardTitle]=\"true\"\n ></view-value>\n <!-- SUB TITLE -->\n @if (subTitleIndex) {\n <view-value\n [column]=\"ngxTable.columns[this.subTitleIndex]\"\n [item]=\"item\"\n [viewConfig]=\"viewConfig\"\n [isCard]=\"true\"\n [isCardSubTitle]=\"true\"\n ></view-value>\n }\n </div>\n\n <!-- ACTION -->\n @if (hasAction) {\n <view-action\n [actions]=\"ngxTable.actions || []\"\n [item]=\"item\"\n [viewConfig]=\"viewConfig\"\n [isMobile]=\"true\"\n ></view-action>\n }\n </div>\n\n <!-- CONTENT -->\n @if (hasContent) {\n <div class=\"card-content\" [style.color]=\"colors[dataIndex]\">\n @for (column of ngxTable.columns; track $index; let columnIndex = $index) {\n <!-- CHECK TITLE AND SUBTITLE -->\n @if (columnIndex !== titleIndex && columnIndex !== subTitleIndex) {\n <div class=\"item\">\n <div class=\"title\">{{ column.title }}:</div>\n <div class=\"value\">\n <view-value [column]=\"column\" [item]=\"item\" [viewConfig]=\"viewConfig\" [isCard]=\"true\"></view-value>\n </div>\n </div>\n } }\n\n <!-- DESCRIPTION -->\n @if (descriptions[dataIndex]) {\n <div class=\"description\" [innerHTML]=\"descriptions[dataIndex] || '' | ngxHelperMultiLine\"></div>\n }\n </div>\n }\n </div>\n }\n</div>\n" }]
|
|
903
925
|
}], ctorParameters: () => [{ type: FilterService }, { type: ViewService }], propDecorators: { className: [{
|
|
@@ -964,10 +986,10 @@ class ViewPaginationComponent {
|
|
|
964
986
|
const parentHeight = element.parentElement?.offsetHeight;
|
|
965
987
|
this.hasShadow = !!parentHeight && elementPosition < parentHeight;
|
|
966
988
|
}
|
|
967
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
968
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.
|
|
989
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ViewPaginationComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
990
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ViewPaginationComponent, isStandalone: true, selector: "view-pagination", inputs: { type: "type", pagination: "pagination", viewConfig: "viewConfig", isMobile: "isMobile", stickyBottom: "stickyBottom" }, outputs: { pageChanged: "pageChanged" }, host: { listeners: { "window:scroll": "onScroll($event)" }, properties: { "className": "this.className", "style.position": "this.stylePosition", "style.bottom": "this.styleBottom" } }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"pagination-content\"\n [class.desktop-view]=\"!isMobile\"\n [class.mobile-view]=\"isMobile\"\n [class.has-shadow]=\"hasShadow\"\n>\n <div class=\"counts\">\n <div class=\"title\">\u0635\u0641\u062D\u0647 {{ pagination.page.current | number }} \u0627\u0632 {{ pagination.page.total | number }}</div>\n <div class=\"total\">{{ pagination.item.total | number }} {{ type }}</div>\n </div>\n\n <button\n mat-icon-button\n type=\"button\"\n [disabled]=\"pagination.page.current === pagination.page.total\"\n (click)=\"pageChanged.next(pagination.page.total)\"\n >\n <mat-icon>keyboard_double_arrow_right</mat-icon>\n </button>\n <button\n mat-icon-button\n type=\"button\"\n [disabled]=\"pagination.page.current === pagination.page.total\"\n (click)=\"pageChanged.next(pagination.page.current + 1)\"\n >\n <mat-icon>chevron_right</mat-icon>\n </button>\n\n <button mat-icon-button [matMenuTriggerFor]=\"pageMenu\"><mat-icon>tag</mat-icon></button>\n <mat-menu #pageMenu=\"matMenu\" class=\"ngx-table-m3-pagination\">\n @for (page of pages; track $index) {\n <button\n mat-menu-item\n type=\"button\"\n [disabled]=\"page === pagination.page.current\"\n class=\"ngx-table-m3-pagination-item\"\n (click)=\"pageChanged.next(page)\"\n >\n {{ page | number }}\n </button>\n }\n </mat-menu>\n\n <button\n mat-icon-button\n type=\"button\"\n [disabled]=\"pagination.page.current === 1\"\n (click)=\"pageChanged.next(pagination.page.current - 1)\"\n >\n <mat-icon>chevron_left</mat-icon>\n </button>\n <button mat-icon-button type=\"button\" [disabled]=\"pagination.page.current === 1\" (click)=\"pageChanged.next(1)\">\n <mat-icon>keyboard_double_arrow_left</mat-icon>\n </button>\n</div>\n", styles: ["::ng-deep .ngx-table-m3-pagination .mat-mdc-menu-content{padding:0}::ng-deep .ngx-table-m3-pagination-item{text-align:center!important}\n"], dependencies: [{ kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] });
|
|
969
991
|
}
|
|
970
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
992
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ViewPaginationComponent, decorators: [{
|
|
971
993
|
type: Component,
|
|
972
994
|
args: [{ selector: 'view-pagination', host: { '(window:scroll)': 'onScroll($event)' }, imports: [DecimalPipe, MatIconButton, MatIcon, MatMenuModule], template: "<div\n class=\"pagination-content\"\n [class.desktop-view]=\"!isMobile\"\n [class.mobile-view]=\"isMobile\"\n [class.has-shadow]=\"hasShadow\"\n>\n <div class=\"counts\">\n <div class=\"title\">\u0635\u0641\u062D\u0647 {{ pagination.page.current | number }} \u0627\u0632 {{ pagination.page.total | number }}</div>\n <div class=\"total\">{{ pagination.item.total | number }} {{ type }}</div>\n </div>\n\n <button\n mat-icon-button\n type=\"button\"\n [disabled]=\"pagination.page.current === pagination.page.total\"\n (click)=\"pageChanged.next(pagination.page.total)\"\n >\n <mat-icon>keyboard_double_arrow_right</mat-icon>\n </button>\n <button\n mat-icon-button\n type=\"button\"\n [disabled]=\"pagination.page.current === pagination.page.total\"\n (click)=\"pageChanged.next(pagination.page.current + 1)\"\n >\n <mat-icon>chevron_right</mat-icon>\n </button>\n\n <button mat-icon-button [matMenuTriggerFor]=\"pageMenu\"><mat-icon>tag</mat-icon></button>\n <mat-menu #pageMenu=\"matMenu\" class=\"ngx-table-m3-pagination\">\n @for (page of pages; track $index) {\n <button\n mat-menu-item\n type=\"button\"\n [disabled]=\"page === pagination.page.current\"\n class=\"ngx-table-m3-pagination-item\"\n (click)=\"pageChanged.next(page)\"\n >\n {{ page | number }}\n </button>\n }\n </mat-menu>\n\n <button\n mat-icon-button\n type=\"button\"\n [disabled]=\"pagination.page.current === 1\"\n (click)=\"pageChanged.next(pagination.page.current - 1)\"\n >\n <mat-icon>chevron_left</mat-icon>\n </button>\n <button mat-icon-button type=\"button\" [disabled]=\"pagination.page.current === 1\" (click)=\"pageChanged.next(1)\">\n <mat-icon>keyboard_double_arrow_left</mat-icon>\n </button>\n</div>\n", styles: ["::ng-deep .ngx-table-m3-pagination .mat-mdc-menu-content{padding:0}::ng-deep .ngx-table-m3-pagination-item{text-align:center!important}\n"] }]
|
|
973
995
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { className: [{
|
|
@@ -1067,20 +1089,20 @@ class ViewTableComponent {
|
|
|
1067
1089
|
this.filters[id] = { ...this.filters[id], value: undefined };
|
|
1068
1090
|
this.filterChanged.next({ id, value: undefined });
|
|
1069
1091
|
}
|
|
1070
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
1071
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.
|
|
1092
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ViewTableComponent, deps: [{ token: ViewService }, { token: FilterService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1093
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ViewTableComponent, isStandalone: true, selector: "view-table", inputs: { ngxTable: "ngxTable", data: "data", viewConfig: "viewConfig" }, outputs: { orderChanged: "orderChanged", filterChanged: "filterChanged", filterCleared: "filterCleared" }, host: { properties: { "className": "this.className" } }, providers: [FilterService, ViewService], usesOnChanges: true, ngImport: i0, template: "<table [cellPadding]=\"0\" [cellSpacing]=\"0\" [width]=\"'100%'\" [border]=\"0\">\n <!-- HEADER -->\n\n <thead\n [style.position]=\"viewConfig.stickyView?.top ? 'sticky' : 'static'\"\n [style.top]=\"viewConfig.stickyView?.top?.desktopView || undefined\"\n >\n <!-- ACTIVE FILTERS -->\n @if (activeFilters.length > 0) {\n <tr>\n <!-- ICON -->\n @if (hasIcon) {\n <th class=\"active-filters\"></th>\n }\n\n <!-- TOOLBAR -->\n <th class=\"active-filters\" [colSpan]=\"ngxTable.columns.length + (this.hasAction ? 1 : 0)\">\n <div class=\"toolbar\" [@toolbar]>\n @for (item of activeFilters; track $index) {\n <div class=\"item\">\n <div class=\"title\" (click)=\"updateFilter(item.id)\">{{ item.title }}:</div>\n <div class=\"value\" (click)=\"updateFilter(item.id)\" [class.ngx-table-m3-en]=\"item.english\">\n {{ item.value }}\n </div>\n <div class=\"icon\" (click)=\"clearFilter(item.id)\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n }\n\n <!-- CLEAR ALL -->\n @if (activeFilters.length > 2) {\n <div class=\"item clear\" (click)=\"filterCleared.next()\">\n <div class=\"title\">\u0644\u063A\u0648 \u0641\u06CC\u0644\u062A\u0631\u0647\u0627</div>\n <div class=\"icon\"><mat-icon>filter_alt_off</mat-icon></div>\n </div>\n }\n </div>\n </th>\n </tr>\n }\n\n <tr>\n <!-- ICON -->\n @if (hasIcon) {\n <th></th>\n }\n\n <!-- COLUMNS -->\n @for (column of ngxTable.columns; track $index) {\n <th [style.text-align]=\"(column.textAlign || 'RIGHT').toLowerCase()\">\n <div\n class=\"column\"\n [class.flex-end]=\"column.textAlign === 'LEFT'\"\n [class.flex-center]=\"column.textAlign === 'CENTER'\"\n >\n <div class=\"title\">{{ column.title }}</div>\n\n <!-- ORDER -->\n @if (column.tools && orders[column.tools.id]) {\n <mat-icon\n (click)=\"updateOrder(column.tools.id)\"\n [style.cursor]=\"\n orders[column.tools.id].type === 'ORDER' || !orders[column.tools.id].current\n ? 'pointer'\n : 'default'\n \"\n >\n {{\n orders[column.tools.id].current === 'ASC'\n ? 'north'\n : orders[column.tools.id].current === 'DESC'\n ? 'south'\n : 'swap_vert'\n }}\n </mat-icon>\n }\n\n <!-- FILTER -->\n @if (column.tools && filters[column.tools.id]) {\n <mat-icon [style.cursor]=\"'pointer'\" (click)=\"updateFilter(column.tools.id)\">filter_alt</mat-icon>\n }\n </div>\n </th>\n }\n\n <!-- ACTION -->\n @if (hasAction) {\n <th></th>\n }\n </tr>\n </thead>\n\n <!-- BODY -->\n <tbody>\n @for (item of data; track $index; let dataIndex = $index) {\n <tr\n [style.color]=\"colors[dataIndex]\"\n [class.odd-row]=\"viewConfig.alternateRows && dataIndex % 2 === 1\"\n [class.even-row]=\"viewConfig.alternateRows && dataIndex % 2 === 0\"\n >\n <!-- ICON -->\n @if (hasIcon) {\n <td class=\"icon\">\n <mat-icon [style.color]=\"icons[$index].color\" [style.font-size]=\"viewConfig.iconSize\">\n {{ icons[$index].icon }}\n </mat-icon>\n </td>\n }\n\n <!-- DATA -->\n @for (column of ngxTable.columns; track $index; let columnIndex = $index) {\n <td>\n <view-value\n [column]=\"column\"\n [item]=\"item\"\n [viewConfig]=\"viewConfig\"\n [isDeactive]=\"columnIndex === titleIndex && deactives.includes(dataIndex)\"\n ></view-value>\n </td>\n }\n\n <!-- ACTION -->\n @if (hasAction) {\n <td class=\"action\">\n <view-action\n [actions]=\"ngxTable.actions || []\"\n [item]=\"item\"\n [viewConfig]=\"viewConfig\"\n [isMobile]=\"false\"\n ></view-action>\n </td>\n }\n </tr>\n\n <!-- DESCRIPTION -->\n @if (descriptions[dataIndex]) {\n <tr\n [style.color]=\"colors[dataIndex]\"\n [class.odd-row]=\"viewConfig.alternateRows && dataIndex % 2 === 1\"\n [class.even-row]=\"viewConfig.alternateRows && dataIndex % 2 === 0\"\n >\n @if (hasIcon) {\n <td class=\"description\"></td>\n }\n <td\n class=\"description\"\n [colSpan]=\"ngxTable.columns.length + (hasAction ? 1 : 0)\"\n [innerHTML]=\"descriptions[dataIndex] || '' | ngxHelperMultiLine\"\n ></td>\n </tr>\n } }\n </tbody>\n</table>\n", styles: [""], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: NgxHelperMultiLinePipe, name: "ngxHelperMultiLine" }, { kind: "component", type: ViewActionComponent, selector: "view-action", inputs: ["actions", "item", "viewConfig", "isMobile"] }, { kind: "component", type: ViewValueComponent, selector: "view-value", inputs: ["column", "item", "viewConfig", "isDeactive", "isCard", "isCardTitle", "isCardSubTitle"] }], animations: [
|
|
1072
1094
|
trigger('toolbar', [
|
|
1073
1095
|
transition(':enter', [style({ opacity: 0, height: 0 }), animate('150ms', style({ opacity: 1, height: '*' }))]),
|
|
1074
1096
|
]),
|
|
1075
1097
|
] });
|
|
1076
1098
|
}
|
|
1077
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
1099
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ViewTableComponent, decorators: [{
|
|
1078
1100
|
type: Component,
|
|
1079
1101
|
args: [{ selector: 'view-table', imports: [MatIcon, NgxHelperMultiLinePipe, ViewActionComponent, ViewValueComponent], providers: [FilterService, ViewService], animations: [
|
|
1080
1102
|
trigger('toolbar', [
|
|
1081
1103
|
transition(':enter', [style({ opacity: 0, height: 0 }), animate('150ms', style({ opacity: 1, height: '*' }))]),
|
|
1082
1104
|
]),
|
|
1083
|
-
], template: "<table [cellPadding]=\"0\" [cellSpacing]=\"0\" [width]=\"'100%'\" [border]=\"0\">\n <!-- HEADER -->\n\n <thead\n [style.position]=\"viewConfig.stickyView?.top ? 'sticky' : 'static'\"\n [style.top]=\"viewConfig.stickyView?.top?.desktopView || undefined\"\n >\n <!-- ACTIVE FILTERS -->\n @if (activeFilters.length > 0) {\n <tr>\n <!-- ICON -->\n @if (hasIcon) {\n <th class=\"active-filters\"></th>\n }\n\n <!-- TOOLBAR -->\n <th class=\"active-filters\" [colSpan]=\"ngxTable.columns.length + (this.hasAction ? 1 : 0)\">\n <div class=\"toolbar\" [@toolbar]>\n @for (item of activeFilters; track $index) {\n <div class=\"item\">\n <div class=\"title\" (click)=\"updateFilter(item.id)\">{{ item.title }}:</div>\n <div class=\"value\" (click)=\"updateFilter(item.id)\" [class.ngx-table-m3-en]=\"item.english\">\n {{ item.value }}\n </div>\n <div class=\"icon\" (click)=\"clearFilter(item.id)\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n }\n\n <!-- CLEAR ALL -->\n @if (activeFilters.length > 2) {\n <div class=\"item clear\" (click)=\"filterCleared.next()\">\n <div class=\"title\">\u0644\u063A\u0648 \u0641\u06CC\u0644\u062A\u0631\u0647\u0627</div>\n <div class=\"icon\"><mat-icon>filter_alt_off</mat-icon></div>\n </div>\n }\n </div>\n </th>\n </tr>\n }\n\n <tr>\n <!-- ICON -->\n @if (hasIcon) {\n <th></th>\n }\n\n <!-- COLUMNS -->\n @for (column of ngxTable.columns; track $index) {\n <th [style.text-align]=\"(column.textAlign || 'RIGHT').toLowerCase()\">\n <div class=\"column\">\n <div class=\"title\">{{ column.title }}</div>\n\n <!-- ORDER -->\n @if (column.tools && orders[column.tools.id]) {\n <mat-icon\n (click)=\"updateOrder(column.tools.id)\"\n [style.cursor]=\"\n orders[column.tools.id].type === 'ORDER' || !orders[column.tools.id].current\n ? 'pointer'\n : 'default'\n \"\n >\n {{\n orders[column.tools.id].current === 'ASC'\n ? 'north'\n : orders[column.tools.id].current === 'DESC'\n ? 'south'\n : 'swap_vert'\n }}\n </mat-icon>\n }\n\n <!-- FILTER -->\n @if (column.tools && filters[column.tools.id]) {\n <mat-icon [style.cursor]=\"'pointer'\" (click)=\"updateFilter(column.tools.id)\">filter_alt</mat-icon>\n }\n </div>\n </th>\n }\n\n <!-- ACTION -->\n @if (hasAction) {\n <th></th>\n }\n </tr>\n </thead>\n\n <!-- BODY -->\n <tbody>\n @for (item of data; track $index; let dataIndex = $index) {\n <tr\n [style.color]=\"colors[dataIndex]\"\n [class.odd-row]=\"viewConfig.alternateRows && dataIndex % 2 === 1\"\n [class.even-row]=\"viewConfig.alternateRows && dataIndex % 2 === 0\"\n >\n <!-- ICON -->\n @if (hasIcon) {\n <td class=\"icon\">\n <mat-icon [style.color]=\"icons[$index].color\" [style.font-size]=\"viewConfig.iconSize\">\n {{ icons[$index].icon }}\n </mat-icon>\n </td>\n }\n\n <!-- DATA -->\n @for (column of ngxTable.columns; track $index; let columnIndex = $index) {\n <td>\n <view-value\n [column]=\"column\"\n [item]=\"item\"\n [viewConfig]=\"viewConfig\"\n [isDeactive]=\"columnIndex === titleIndex && deactives.includes(dataIndex)\"\n ></view-value>\n </td>\n }\n\n <!-- ACTION -->\n @if (hasAction) {\n <td class=\"action\">\n <view-action\n [actions]=\"ngxTable.actions || []\"\n [item]=\"item\"\n [viewConfig]=\"viewConfig\"\n [isMobile]=\"false\"\n ></view-action>\n </td>\n }\n </tr>\n\n <!-- DESCRIPTION -->\n @if (descriptions[dataIndex]) {\n <tr\n [style.color]=\"colors[dataIndex]\"\n [class.odd-row]=\"viewConfig.alternateRows && dataIndex % 2 === 1\"\n [class.even-row]=\"viewConfig.alternateRows && dataIndex % 2 === 0\"\n >\n @if (hasIcon) {\n <td class=\"description\"></td>\n }\n <td\n class=\"description\"\n [colSpan]=\"ngxTable.columns.length + (hasAction ? 1 : 0)\"\n [innerHTML]=\"descriptions[dataIndex] || '' | ngxHelperMultiLine\"\n ></td>\n </tr>\n } }\n </tbody>\n</table>\n" }]
|
|
1105
|
+
], template: "<table [cellPadding]=\"0\" [cellSpacing]=\"0\" [width]=\"'100%'\" [border]=\"0\">\n <!-- HEADER -->\n\n <thead\n [style.position]=\"viewConfig.stickyView?.top ? 'sticky' : 'static'\"\n [style.top]=\"viewConfig.stickyView?.top?.desktopView || undefined\"\n >\n <!-- ACTIVE FILTERS -->\n @if (activeFilters.length > 0) {\n <tr>\n <!-- ICON -->\n @if (hasIcon) {\n <th class=\"active-filters\"></th>\n }\n\n <!-- TOOLBAR -->\n <th class=\"active-filters\" [colSpan]=\"ngxTable.columns.length + (this.hasAction ? 1 : 0)\">\n <div class=\"toolbar\" [@toolbar]>\n @for (item of activeFilters; track $index) {\n <div class=\"item\">\n <div class=\"title\" (click)=\"updateFilter(item.id)\">{{ item.title }}:</div>\n <div class=\"value\" (click)=\"updateFilter(item.id)\" [class.ngx-table-m3-en]=\"item.english\">\n {{ item.value }}\n </div>\n <div class=\"icon\" (click)=\"clearFilter(item.id)\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n }\n\n <!-- CLEAR ALL -->\n @if (activeFilters.length > 2) {\n <div class=\"item clear\" (click)=\"filterCleared.next()\">\n <div class=\"title\">\u0644\u063A\u0648 \u0641\u06CC\u0644\u062A\u0631\u0647\u0627</div>\n <div class=\"icon\"><mat-icon>filter_alt_off</mat-icon></div>\n </div>\n }\n </div>\n </th>\n </tr>\n }\n\n <tr>\n <!-- ICON -->\n @if (hasIcon) {\n <th></th>\n }\n\n <!-- COLUMNS -->\n @for (column of ngxTable.columns; track $index) {\n <th [style.text-align]=\"(column.textAlign || 'RIGHT').toLowerCase()\">\n <div\n class=\"column\"\n [class.flex-end]=\"column.textAlign === 'LEFT'\"\n [class.flex-center]=\"column.textAlign === 'CENTER'\"\n >\n <div class=\"title\">{{ column.title }}</div>\n\n <!-- ORDER -->\n @if (column.tools && orders[column.tools.id]) {\n <mat-icon\n (click)=\"updateOrder(column.tools.id)\"\n [style.cursor]=\"\n orders[column.tools.id].type === 'ORDER' || !orders[column.tools.id].current\n ? 'pointer'\n : 'default'\n \"\n >\n {{\n orders[column.tools.id].current === 'ASC'\n ? 'north'\n : orders[column.tools.id].current === 'DESC'\n ? 'south'\n : 'swap_vert'\n }}\n </mat-icon>\n }\n\n <!-- FILTER -->\n @if (column.tools && filters[column.tools.id]) {\n <mat-icon [style.cursor]=\"'pointer'\" (click)=\"updateFilter(column.tools.id)\">filter_alt</mat-icon>\n }\n </div>\n </th>\n }\n\n <!-- ACTION -->\n @if (hasAction) {\n <th></th>\n }\n </tr>\n </thead>\n\n <!-- BODY -->\n <tbody>\n @for (item of data; track $index; let dataIndex = $index) {\n <tr\n [style.color]=\"colors[dataIndex]\"\n [class.odd-row]=\"viewConfig.alternateRows && dataIndex % 2 === 1\"\n [class.even-row]=\"viewConfig.alternateRows && dataIndex % 2 === 0\"\n >\n <!-- ICON -->\n @if (hasIcon) {\n <td class=\"icon\">\n <mat-icon [style.color]=\"icons[$index].color\" [style.font-size]=\"viewConfig.iconSize\">\n {{ icons[$index].icon }}\n </mat-icon>\n </td>\n }\n\n <!-- DATA -->\n @for (column of ngxTable.columns; track $index; let columnIndex = $index) {\n <td>\n <view-value\n [column]=\"column\"\n [item]=\"item\"\n [viewConfig]=\"viewConfig\"\n [isDeactive]=\"columnIndex === titleIndex && deactives.includes(dataIndex)\"\n ></view-value>\n </td>\n }\n\n <!-- ACTION -->\n @if (hasAction) {\n <td class=\"action\">\n <view-action\n [actions]=\"ngxTable.actions || []\"\n [item]=\"item\"\n [viewConfig]=\"viewConfig\"\n [isMobile]=\"false\"\n ></view-action>\n </td>\n }\n </tr>\n\n <!-- DESCRIPTION -->\n @if (descriptions[dataIndex]) {\n <tr\n [style.color]=\"colors[dataIndex]\"\n [class.odd-row]=\"viewConfig.alternateRows && dataIndex % 2 === 1\"\n [class.even-row]=\"viewConfig.alternateRows && dataIndex % 2 === 0\"\n >\n @if (hasIcon) {\n <td class=\"description\"></td>\n }\n <td\n class=\"description\"\n [colSpan]=\"ngxTable.columns.length + (hasAction ? 1 : 0)\"\n [innerHTML]=\"descriptions[dataIndex] || '' | ngxHelperMultiLine\"\n ></td>\n </tr>\n } }\n </tbody>\n</table>\n" }]
|
|
1084
1106
|
}], ctorParameters: () => [{ type: ViewService }, { type: FilterService }], propDecorators: { className: [{
|
|
1085
1107
|
type: HostBinding,
|
|
1086
1108
|
args: ['className']
|
|
@@ -1235,10 +1257,10 @@ class NgxTableComponent {
|
|
|
1235
1257
|
this.setQueryParams();
|
|
1236
1258
|
this.filterChanged.next(this.filter);
|
|
1237
1259
|
}
|
|
1238
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
1239
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.
|
|
1260
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxTableComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: FilterService }, { token: ViewService }, { token: NGX_TABLE_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
1261
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: NgxTableComponent, isStandalone: true, selector: "ngx-table", inputs: { loading: "loading", ngxTable: "ngxTable", data: "data", pagination: "pagination" }, outputs: { filterChanged: "filterChanged" }, host: { listeners: { "window:resize": "onResize($event)" } }, providers: [FilterService, ViewService], usesOnChanges: true, ngImport: i0, template: "@if (loading) {\n<div class=\"ngx-table-m3-loader\">\n <ngx-helper-loader [mode]=\"'SPINNER'\"></ngx-helper-loader>\n</div>\n}\n\n<!-- EMPTY -->\n@if (!loading && ngxTable.columns.length <= 0 ) {\n<div class=\"ngx-table-m3-empty\">\u0633\u062A\u0648\u0646\u200C\u0647\u0627\u06CC \u062C\u062F\u0648\u0644 \u0628\u0647 \u0635\u0648\u0631\u062A \u0635\u062D\u06CC\u062D \u0645\u0634\u062E\u0635 \u0646\u0634\u062F\u0647 \u0627\u0633\u062A.</div>\n}\n\n<!-- EMPTY -->\n@if (!loading && ngxTable.columns.length > 0 && data.length === 0 && !hasFilter) {\n<div class=\"ngx-table-m3-empty\">{{ ngxTable.type }} \u062B\u0628\u062A \u0646\u0634\u062F\u0647 \u0627\u0633\u062A.</div>\n}\n\n<!-- DATA -->\n@if (!loading && ngxTable.columns.length > 0 && (data.length > 0 || hasFilter)) {\n<content class=\"ngx-table-m3\">\n <!-- DESKTOP -->\n @if (!isMobile) {\n <view-table\n [ngxTable]=\"ngxTable\"\n [data]=\"data\"\n [viewConfig]=\"viewConfig\"\n (orderChanged)=\"orderChanged($event)\"\n (filterChanged)=\"filterItemChanged($event)\"\n (filterCleared)=\"filterCleared()\"\n ></view-table>\n }\n\n <!-- MOBILE -->\n @if (isMobile) {\n <view-card\n [ngxTable]=\"ngxTable\"\n [data]=\"data\"\n [viewConfig]=\"viewConfig\"\n (orderChanged)=\"orderChanged($event)\"\n (filterChanged)=\"filterItemChanged($event)\"\n (filterCleared)=\"filterCleared()\"\n ></view-card>\n }\n\n <!-- PAGINATION -->\n @if (pagination && pagination.page.total> 1) {\n <view-pagination\n [type]=\"ngxTable.type\"\n [pagination]=\"pagination\"\n [viewConfig]=\"viewConfig\"\n [isMobile]=\"isMobile\"\n [stickyBottom]=\"viewConfig.stickyView?.bottom\"\n (pageChanged)=\"pageChanged($event)\"\n ></view-pagination>\n }\n\n <!-- EMPTY -->\n @if ( data.length === 0) {\n <div class=\"ngx-table-m3-empty\">{{ ngxTable.type }} \u062B\u0628\u062A \u0646\u0634\u062F\u0647 \u0627\u0633\u062A.</div>\n }\n</content>\n}\n", styles: ["content{display:block;direction:rtl;position:relative}\n"], dependencies: [{ kind: "component", type: NgxHelperLoaderComponent, selector: "ngx-helper-loader", inputs: ["mode", "size", "color", "padding", "margin"] }, { kind: "component", type: ViewCardComponent, selector: "view-card", inputs: ["ngxTable", "data", "viewConfig"], outputs: ["orderChanged", "filterChanged", "filterCleared"] }, { kind: "component", type: ViewPaginationComponent, selector: "view-pagination", inputs: ["type", "pagination", "viewConfig", "isMobile", "stickyBottom"], outputs: ["pageChanged"] }, { kind: "component", type: ViewTableComponent, selector: "view-table", inputs: ["ngxTable", "data", "viewConfig"], outputs: ["orderChanged", "filterChanged", "filterCleared"] }] });
|
|
1240
1262
|
}
|
|
1241
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
1263
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxTableComponent, decorators: [{
|
|
1242
1264
|
type: Component,
|
|
1243
1265
|
args: [{ selector: 'ngx-table', host: { '(window:resize)': 'onResize($event)' }, imports: [NgxHelperLoaderComponent, ViewCardComponent, ViewPaginationComponent, ViewTableComponent], providers: [FilterService, ViewService], template: "@if (loading) {\n<div class=\"ngx-table-m3-loader\">\n <ngx-helper-loader [mode]=\"'SPINNER'\"></ngx-helper-loader>\n</div>\n}\n\n<!-- EMPTY -->\n@if (!loading && ngxTable.columns.length <= 0 ) {\n<div class=\"ngx-table-m3-empty\">\u0633\u062A\u0648\u0646\u200C\u0647\u0627\u06CC \u062C\u062F\u0648\u0644 \u0628\u0647 \u0635\u0648\u0631\u062A \u0635\u062D\u06CC\u062D \u0645\u0634\u062E\u0635 \u0646\u0634\u062F\u0647 \u0627\u0633\u062A.</div>\n}\n\n<!-- EMPTY -->\n@if (!loading && ngxTable.columns.length > 0 && data.length === 0 && !hasFilter) {\n<div class=\"ngx-table-m3-empty\">{{ ngxTable.type }} \u062B\u0628\u062A \u0646\u0634\u062F\u0647 \u0627\u0633\u062A.</div>\n}\n\n<!-- DATA -->\n@if (!loading && ngxTable.columns.length > 0 && (data.length > 0 || hasFilter)) {\n<content class=\"ngx-table-m3\">\n <!-- DESKTOP -->\n @if (!isMobile) {\n <view-table\n [ngxTable]=\"ngxTable\"\n [data]=\"data\"\n [viewConfig]=\"viewConfig\"\n (orderChanged)=\"orderChanged($event)\"\n (filterChanged)=\"filterItemChanged($event)\"\n (filterCleared)=\"filterCleared()\"\n ></view-table>\n }\n\n <!-- MOBILE -->\n @if (isMobile) {\n <view-card\n [ngxTable]=\"ngxTable\"\n [data]=\"data\"\n [viewConfig]=\"viewConfig\"\n (orderChanged)=\"orderChanged($event)\"\n (filterChanged)=\"filterItemChanged($event)\"\n (filterCleared)=\"filterCleared()\"\n ></view-card>\n }\n\n <!-- PAGINATION -->\n @if (pagination && pagination.page.total> 1) {\n <view-pagination\n [type]=\"ngxTable.type\"\n [pagination]=\"pagination\"\n [viewConfig]=\"viewConfig\"\n [isMobile]=\"isMobile\"\n [stickyBottom]=\"viewConfig.stickyView?.bottom\"\n (pageChanged)=\"pageChanged($event)\"\n ></view-pagination>\n }\n\n <!-- EMPTY -->\n @if ( data.length === 0) {\n <div class=\"ngx-table-m3-empty\">{{ ngxTable.type }} \u062B\u0628\u062A \u0646\u0634\u062F\u0647 \u0627\u0633\u062A.</div>\n }\n</content>\n}\n", styles: ["content{display:block;direction:rtl;position:relative}\n"] }]
|
|
1244
1266
|
}], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: FilterService }, { type: ViewService }, { type: undefined, decorators: [{
|