@webilix/ngx-table-m3 0.0.35 → 0.0.41
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken, inject, Component, HostBinding, ViewChild, Injector, Injectable, Input, EventEmitter, Output, makeEnvironmentProviders, Optional, Inject } from '@angular/core';
|
|
2
|
+
import { InjectionToken, inject, ChangeDetectionStrategy, Component, HostBinding, ViewChild, Injector, Injectable, Input, signal, 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
5
|
import { NGX_HELPER_CONTAINER_DATA, NGX_HELPER_CONTAINER_CLOSE, NgxHelperDatePipe, NgxHelperDurationPipe, NgxHelperFileSizePipe, NgxHelperMobilePipe, NgxHelperNumberPipe, NgxHelperPeriodPipe, NgxHelperWeightPipe, NgxHelperMultiLinePipe, NgxHelperLoaderComponent } from '@webilix/ngx-helper-m3';
|
|
@@ -11,7 +11,9 @@ import { JalaliDateTime } from '@webilix/jalali-date-time';
|
|
|
11
11
|
import { MatCheckbox } from '@angular/material/checkbox';
|
|
12
12
|
import * as i1 from '@angular/forms';
|
|
13
13
|
import { FormsModule } from '@angular/forms';
|
|
14
|
-
import {
|
|
14
|
+
import { timer } from 'rxjs';
|
|
15
|
+
import { MaskitoDirective } from '@maskito/angular';
|
|
16
|
+
import { maskitoNumber } from '@maskito/kit';
|
|
15
17
|
import { MatRadioButton, MatRadioGroup } from '@angular/material/radio';
|
|
16
18
|
import * as i1$1 from '@angular/router';
|
|
17
19
|
import { MatDivider } from '@angular/material/divider';
|
|
@@ -30,12 +32,12 @@ class FilterDateComponent {
|
|
|
30
32
|
data = inject(FILTER_DATA);
|
|
31
33
|
value = inject(FILTER_VALUE);
|
|
32
34
|
onChange = inject(FILTER_CHANGE);
|
|
33
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
34
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
35
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FilterDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
36
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", 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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
35
37
|
}
|
|
36
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
38
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FilterDateComponent, decorators: [{
|
|
37
39
|
type: Component,
|
|
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" }]
|
|
40
|
+
args: [{ host: { selector: 'filter-date' }, imports: [NgxCalendarDateComponent], changeDetection: ChangeDetectionStrategy.Eager, 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
41
|
}] });
|
|
40
42
|
|
|
41
43
|
class FilterDateMethods extends FilterMethods {
|
|
@@ -89,12 +91,12 @@ class FilterMultiSelectComponent {
|
|
|
89
91
|
this.value.push(id);
|
|
90
92
|
this.onChange(this.value.length === 0 ? undefined : this.value);
|
|
91
93
|
}
|
|
92
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
93
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
94
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FilterMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
95
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", 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)=\"setOptions(searchInput.value.trim())\"\n #searchInput\n />\n</div>\n}\n\n<div class=\"filter-items\">\n @for (item of options; track $index) {\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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
94
96
|
}
|
|
95
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
97
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FilterMultiSelectComponent, decorators: [{
|
|
96
98
|
type: Component,
|
|
97
|
-
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)=\"setOptions(searchInput.value.trim())\"\n #searchInput\n />\n</div>\n}\n\n<div class=\"filter-items\">\n @for (item of options; track $index) {\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" }]
|
|
99
|
+
args: [{ host: { selector: 'filter-multi-select' }, imports: [MatCheckbox], changeDetection: ChangeDetectionStrategy.Eager, 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)=\"setOptions(searchInput.value.trim())\"\n #searchInput\n />\n</div>\n}\n\n<div class=\"filter-items\">\n @for (item of options; track $index) {\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" }]
|
|
98
100
|
}], propDecorators: { className: [{
|
|
99
101
|
type: HostBinding,
|
|
100
102
|
args: ['className']
|
|
@@ -144,7 +146,27 @@ class FilterNumberComponent {
|
|
|
144
146
|
fromQuery = this.mode === 'BETWEEN' && this.query ? this.query.split(':')[0] : undefined;
|
|
145
147
|
toQuery = this.mode === 'BETWEEN' && this.query ? this.query.split(':')[1] : undefined;
|
|
146
148
|
numberQuery = this.mode === 'EQUAL' || this.mode === 'LESS' || this.mode === 'GREATER' ? this.query : undefined;
|
|
147
|
-
|
|
149
|
+
maskitoOptions;
|
|
150
|
+
ngOnInit() {
|
|
151
|
+
const numberOptions = maskitoNumber({
|
|
152
|
+
thousandSeparator: ',',
|
|
153
|
+
// Fraction Digits
|
|
154
|
+
decimalSeparator: '.',
|
|
155
|
+
maximumFractionDigits: 10,
|
|
156
|
+
// Allow Negatives
|
|
157
|
+
minusSign: '-',
|
|
158
|
+
min: -999_999_999_999_999,
|
|
159
|
+
max: 999_999_999_999_999,
|
|
160
|
+
});
|
|
161
|
+
this.maskitoOptions = {
|
|
162
|
+
...numberOptions,
|
|
163
|
+
preprocessors: [
|
|
164
|
+
// CHANGE PERSIAN NUMBERS
|
|
165
|
+
({ elementState, data }) => ({ elementState, data: Helper.STRING.changeNumbers(data.toString(), 'EN') }),
|
|
166
|
+
...(numberOptions.preprocessors || []),
|
|
167
|
+
],
|
|
168
|
+
};
|
|
169
|
+
}
|
|
148
170
|
ngAfterViewInit() {
|
|
149
171
|
if (!this.mode)
|
|
150
172
|
return;
|
|
@@ -155,11 +177,11 @@ class FilterNumberComponent {
|
|
|
155
177
|
setMode(mode) {
|
|
156
178
|
this.mode = mode;
|
|
157
179
|
this.updateQuery();
|
|
158
|
-
|
|
180
|
+
timer(100).subscribe(() => {
|
|
159
181
|
const elementRef = this.mode === 'BETWEEN' ? this.fromInput : this.numberInput;
|
|
160
182
|
const element = elementRef?.nativeElement;
|
|
161
183
|
element?.focus();
|
|
162
|
-
}
|
|
184
|
+
});
|
|
163
185
|
}
|
|
164
186
|
isNumeric(value) {
|
|
165
187
|
if (value.substring(0, 1) === '-')
|
|
@@ -184,12 +206,12 @@ class FilterNumberComponent {
|
|
|
184
206
|
updateQuery() {
|
|
185
207
|
this.onChange(this.query && this.mode ? { query: this.query, mode: this.mode } : undefined);
|
|
186
208
|
}
|
|
187
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
188
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
209
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FilterNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
210
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: FilterNumberComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "filter-number" }, properties: { "className": "this.className" } }, viewQueries: [{ propertyName: "fromInput", first: true, predicate: ["fromInput"], descendants: true }, { propertyName: "numberInput", first: true, predicate: ["numberInput"], descendants: true }], ngImport: i0, template: "<div class=\"filter-number\">\n @if (!this.data.filter.mode) {\n <div class=\"modes\">\n @for (item of modes; track $index) {\n <div class=\"mode\" [class.selected]=\"item.type === mode\" (click)=\"setMode(item.type)\">\n {{ item.title }}\n </div>\n }\n </div>\n }\n\n <!-- INPUTS -->\n <div class=\"inputs\" [style.display]=\"mode ? 'flex' : 'none'\">\n <!-- BETWEEN -->\n <input\n type=\"text\"\n [inputMode]=\"'numeric'\"\n [ngModel]=\"fromQuery\"\n [placeholder]=\"'\u062D\u062F\u0627\u0642\u0644'\"\n class=\"ngx-table-m3-en\"\n [style.display]=\"mode === 'BETWEEN' ? 'initial' : 'none'\"\n [maskito]=\"maskitoOptions\"\n (input)=\"setQuery(fromInput.value, toInput.value)\"\n #fromInput\n />\n <input\n type=\"text\"\n [inputMode]=\"'numeric'\"\n [ngModel]=\"toQuery\"\n [placeholder]=\"'\u062D\u062F\u0627\u06A9\u062A\u0631'\"\n class=\"ngx-table-m3-en\"\n [style.display]=\"mode === 'BETWEEN' ? 'initial' : 'none'\"\n [maskito]=\"maskitoOptions\"\n (input)=\"setQuery(fromInput.value, toInput.value)\"\n #toInput\n />\n <!-- OTHERS -->\n <input\n type=\"text\"\n [inputMode]=\"'numeric'\"\n [ngModel]=\"numberQuery\"\n [placeholder]=\"'\u0645\u0642\u062F\u0627\u0631'\"\n class=\"ngx-table-m3-en\"\n [style.display]=\"mode !== 'BETWEEN' ? 'initial' : 'none'\"\n [maskito]=\"maskitoOptions\"\n (input)=\"setQuery(numberInput.value, '')\"\n #numberInput\n />\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[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: "directive", type: MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"], outputs: ["maskitoChange", "maskitoElementChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
189
211
|
}
|
|
190
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
212
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FilterNumberComponent, decorators: [{
|
|
191
213
|
type: Component,
|
|
192
|
-
args: [{ host: { selector: 'filter-number' }, imports: [FormsModule,
|
|
214
|
+
args: [{ host: { selector: 'filter-number' }, imports: [FormsModule, MaskitoDirective], changeDetection: ChangeDetectionStrategy.Eager, template: "<div class=\"filter-number\">\n @if (!this.data.filter.mode) {\n <div class=\"modes\">\n @for (item of modes; track $index) {\n <div class=\"mode\" [class.selected]=\"item.type === mode\" (click)=\"setMode(item.type)\">\n {{ item.title }}\n </div>\n }\n </div>\n }\n\n <!-- INPUTS -->\n <div class=\"inputs\" [style.display]=\"mode ? 'flex' : 'none'\">\n <!-- BETWEEN -->\n <input\n type=\"text\"\n [inputMode]=\"'numeric'\"\n [ngModel]=\"fromQuery\"\n [placeholder]=\"'\u062D\u062F\u0627\u0642\u0644'\"\n class=\"ngx-table-m3-en\"\n [style.display]=\"mode === 'BETWEEN' ? 'initial' : 'none'\"\n [maskito]=\"maskitoOptions\"\n (input)=\"setQuery(fromInput.value, toInput.value)\"\n #fromInput\n />\n <input\n type=\"text\"\n [inputMode]=\"'numeric'\"\n [ngModel]=\"toQuery\"\n [placeholder]=\"'\u062D\u062F\u0627\u06A9\u062A\u0631'\"\n class=\"ngx-table-m3-en\"\n [style.display]=\"mode === 'BETWEEN' ? 'initial' : 'none'\"\n [maskito]=\"maskitoOptions\"\n (input)=\"setQuery(fromInput.value, toInput.value)\"\n #toInput\n />\n <!-- OTHERS -->\n <input\n type=\"text\"\n [inputMode]=\"'numeric'\"\n [ngModel]=\"numberQuery\"\n [placeholder]=\"'\u0645\u0642\u062F\u0627\u0631'\"\n class=\"ngx-table-m3-en\"\n [style.display]=\"mode !== 'BETWEEN' ? 'initial' : 'none'\"\n [maskito]=\"maskitoOptions\"\n (input)=\"setQuery(numberInput.value, '')\"\n #numberInput\n />\n </div>\n</div>\n" }]
|
|
193
215
|
}], propDecorators: { className: [{
|
|
194
216
|
type: HostBinding,
|
|
195
217
|
args: ['className']
|
|
@@ -288,12 +310,12 @@ class FilterSearchComponent {
|
|
|
288
310
|
this.mode = mode;
|
|
289
311
|
this.onChange(this.query ? { query: this.query, mode: this.mode || 'PHRASE' } : undefined);
|
|
290
312
|
}
|
|
291
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
292
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
313
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FilterSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
314
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", 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]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
293
315
|
}
|
|
294
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
316
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FilterSearchComponent, decorators: [{
|
|
295
317
|
type: Component,
|
|
296
|
-
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" }]
|
|
318
|
+
args: [{ host: { selector: 'filter-search' }, imports: [FormsModule, MatRadioButton, MatRadioGroup], changeDetection: ChangeDetectionStrategy.Eager, 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" }]
|
|
297
319
|
}], propDecorators: { className: [{
|
|
298
320
|
type: HostBinding,
|
|
299
321
|
args: ['className']
|
|
@@ -352,12 +374,12 @@ class FilterSelectComponent {
|
|
|
352
374
|
this.value = id;
|
|
353
375
|
this.onChange(this.value);
|
|
354
376
|
}
|
|
355
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
356
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
377
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FilterSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
378
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", 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)=\"setOptions(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 options; track $index) {\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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
357
379
|
}
|
|
358
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
380
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FilterSelectComponent, decorators: [{
|
|
359
381
|
type: Component,
|
|
360
|
-
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)=\"setOptions(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 options; track $index) {\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" }]
|
|
382
|
+
args: [{ host: { selector: 'filter-select' }, imports: [MatRadioButton, MatRadioGroup], changeDetection: ChangeDetectionStrategy.Eager, 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)=\"setOptions(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 options; track $index) {\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" }]
|
|
361
383
|
}], propDecorators: { className: [{
|
|
362
384
|
type: HostBinding,
|
|
363
385
|
args: ['className']
|
|
@@ -412,12 +434,12 @@ class FilterComponent {
|
|
|
412
434
|
if (event.code === 'Enter' && this.value)
|
|
413
435
|
this.closeContainer({ value: this.value });
|
|
414
436
|
}
|
|
415
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
416
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
437
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
438
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", 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[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
417
439
|
}
|
|
418
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
440
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FilterComponent, decorators: [{
|
|
419
441
|
type: Component,
|
|
420
|
-
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"] }]
|
|
442
|
+
args: [{ selector: 'filter', host: { '(window:keydown)': 'onKeydown($event)' }, imports: [MatButton, NgComponentOutlet], changeDetection: ChangeDetectionStrategy.Eager, 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"] }]
|
|
421
443
|
}], propDecorators: { className: [{
|
|
422
444
|
type: HostBinding,
|
|
423
445
|
args: ['className']
|
|
@@ -463,10 +485,10 @@ class FilterService {
|
|
|
463
485
|
.bottomSheet((response) => resolve({ ...filter, value: response.value }), () => resolve(undefined));
|
|
464
486
|
});
|
|
465
487
|
}
|
|
466
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
467
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
488
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FilterService, deps: [{ token: i1$1.ActivatedRoute }, { token: i2.NgxHelperContainerService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
489
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FilterService });
|
|
468
490
|
}
|
|
469
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
491
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FilterService, decorators: [{
|
|
470
492
|
type: Injectable
|
|
471
493
|
}], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: i2.NgxHelperContainerService }] });
|
|
472
494
|
|
|
@@ -555,12 +577,12 @@ class ViewActionComponent {
|
|
|
555
577
|
if (result)
|
|
556
578
|
this.router.navigate(result);
|
|
557
579
|
}
|
|
558
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
559
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
580
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ViewActionComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
581
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", 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[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
560
582
|
}
|
|
561
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
583
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ViewActionComponent, decorators: [{
|
|
562
584
|
type: Component,
|
|
563
|
-
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"] }]
|
|
585
|
+
args: [{ selector: 'view-action', imports: [MatButton, MatDivider, MatIconButton, MatIcon, MatMenuModule], changeDetection: ChangeDetectionStrategy.Eager, 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"] }]
|
|
564
586
|
}], ctorParameters: () => [{ type: i1$1.Router }], propDecorators: { className: [{
|
|
565
587
|
type: HostBinding,
|
|
566
588
|
args: ['className']
|
|
@@ -588,12 +610,12 @@ class ColumnDateComponent {
|
|
|
588
610
|
column = inject(COLUMN_TYPE);
|
|
589
611
|
value = inject(COLUMN_VALUE);
|
|
590
612
|
config = inject(COLUMN_CONFIG);
|
|
591
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
592
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
613
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ColumnDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
614
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", 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" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
593
615
|
}
|
|
594
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
616
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ColumnDateComponent, decorators: [{
|
|
595
617
|
type: Component,
|
|
596
|
-
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" }]
|
|
618
|
+
args: [{ host: { selector: 'column-date' }, imports: [NgxHelperDatePipe], changeDetection: ChangeDetectionStrategy.Eager, template: "<div [style.display]=\"'inline-block'\" [class.ngx-table-m3-deactive]=\"config.isDeactive\">\n {{ value | ngxHelperDate : { format: column.format } }}\n</div>\n" }]
|
|
597
619
|
}] });
|
|
598
620
|
|
|
599
621
|
class ColumnDateMethods extends ColumnMethods {
|
|
@@ -609,12 +631,12 @@ class ColumnDurationComponent {
|
|
|
609
631
|
column = inject(COLUMN_TYPE);
|
|
610
632
|
value = inject(COLUMN_VALUE);
|
|
611
633
|
config = inject(COLUMN_CONFIG);
|
|
612
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
613
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
634
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ColumnDurationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
635
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: ColumnDurationComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "column-duration" } }, ngImport: i0, template: "<div\n [style.display]=\"'inline-block'\"\n [style.direction]=\"config.isEN || column.format === 'FULL' ? 'ltr' : 'rtl'\"\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" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
614
636
|
}
|
|
615
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
637
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ColumnDurationComponent, decorators: [{
|
|
616
638
|
type: Component,
|
|
617
|
-
args: [{ host: { selector: 'column-duration' }, imports: [NgxHelperDurationPipe], template: "<div\n [style.display]=\"'inline-block'\"\n [style.direction]=\"config.isEN || column.format === 'FULL' ? 'ltr' : 'rtl'\"\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" }]
|
|
639
|
+
args: [{ host: { selector: 'column-duration' }, imports: [NgxHelperDurationPipe], changeDetection: ChangeDetectionStrategy.Eager, template: "<div\n [style.display]=\"'inline-block'\"\n [style.direction]=\"config.isEN || column.format === 'FULL' ? 'ltr' : 'rtl'\"\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" }]
|
|
618
640
|
}] });
|
|
619
641
|
|
|
620
642
|
class ColumnDurationMethods extends ColumnMethods {
|
|
@@ -641,12 +663,12 @@ class ColumnFileSizeComponent {
|
|
|
641
663
|
column = inject(COLUMN_TYPE);
|
|
642
664
|
value = inject(COLUMN_VALUE);
|
|
643
665
|
config = inject(COLUMN_CONFIG);
|
|
644
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
645
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
666
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ColumnFileSizeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
667
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", 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" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
646
668
|
}
|
|
647
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
669
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ColumnFileSizeComponent, decorators: [{
|
|
648
670
|
type: Component,
|
|
649
|
-
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" }]
|
|
671
|
+
args: [{ host: { selector: 'column-file-size' }, imports: [NgxHelperFileSizePipe], changeDetection: ChangeDetectionStrategy.Eager, 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" }]
|
|
650
672
|
}] });
|
|
651
673
|
|
|
652
674
|
class ColumnFileSizeMethods extends ColumnMethods {
|
|
@@ -662,12 +684,12 @@ class ColumnMobileComponent {
|
|
|
662
684
|
column = inject(COLUMN_TYPE);
|
|
663
685
|
value = inject(COLUMN_VALUE);
|
|
664
686
|
config = inject(COLUMN_CONFIG);
|
|
665
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
666
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
687
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ColumnMobileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
688
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", 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" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
667
689
|
}
|
|
668
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
690
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ColumnMobileComponent, decorators: [{
|
|
669
691
|
type: Component,
|
|
670
|
-
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" }]
|
|
692
|
+
args: [{ host: { selector: 'column-mobile' }, imports: [NgxHelperMobilePipe], changeDetection: ChangeDetectionStrategy.Eager, 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" }]
|
|
671
693
|
}] });
|
|
672
694
|
|
|
673
695
|
class ColumnMobileMethods extends ColumnMethods {
|
|
@@ -683,12 +705,12 @@ class ColumnNumberComponent {
|
|
|
683
705
|
column = inject(COLUMN_TYPE);
|
|
684
706
|
value = inject(COLUMN_VALUE);
|
|
685
707
|
config = inject(COLUMN_CONFIG);
|
|
686
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
687
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
708
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ColumnNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
709
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", 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" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
688
710
|
}
|
|
689
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
711
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ColumnNumberComponent, decorators: [{
|
|
690
712
|
type: Component,
|
|
691
|
-
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" }]
|
|
713
|
+
args: [{ host: { selector: 'column-number' }, imports: [NgxHelperNumberPipe], changeDetection: ChangeDetectionStrategy.Eager, 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" }]
|
|
692
714
|
}] });
|
|
693
715
|
|
|
694
716
|
class ColumnNumberMethods extends ColumnMethods {
|
|
@@ -704,12 +726,12 @@ class ColumnPeriodComponent {
|
|
|
704
726
|
column = inject(COLUMN_TYPE);
|
|
705
727
|
value = inject(COLUMN_VALUE);
|
|
706
728
|
config = inject(COLUMN_CONFIG);
|
|
707
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
708
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
729
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ColumnPeriodComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
730
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: ColumnPeriodComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "column-period" } }, ngImport: i0, template: "<div [style.display]=\"'inline-block'\" [class.ngx-table-m3-deactive]=\"config.isDeactive\">\n {{ value | ngxHelperPeriod }}\n</div>\n", styles: [""], dependencies: [{ kind: "pipe", type: NgxHelperPeriodPipe, name: "ngxHelperPeriod" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
709
731
|
}
|
|
710
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
732
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ColumnPeriodComponent, decorators: [{
|
|
711
733
|
type: Component,
|
|
712
|
-
args: [{ host: { selector: 'column-period' }, imports: [NgxHelperPeriodPipe], template: "<div [style.display]=\"'inline-block'\" [class.ngx-table-m3-deactive]=\"config.isDeactive\">\n {{ value | ngxHelperPeriod }}\n</div>\n" }]
|
|
734
|
+
args: [{ host: { selector: 'column-period' }, imports: [NgxHelperPeriodPipe], changeDetection: ChangeDetectionStrategy.Eager, template: "<div [style.display]=\"'inline-block'\" [class.ngx-table-m3-deactive]=\"config.isDeactive\">\n {{ value | ngxHelperPeriod }}\n</div>\n" }]
|
|
713
735
|
}] });
|
|
714
736
|
|
|
715
737
|
class ColumnPeriodMethods extends ColumnMethods {
|
|
@@ -743,12 +765,12 @@ class ColumnTagComponent {
|
|
|
743
765
|
if (action)
|
|
744
766
|
this.router.navigate(action);
|
|
745
767
|
}
|
|
746
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
747
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
768
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ColumnTagComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
769
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: ColumnTagComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "column-tag" } }, ngImport: i0, template: "<div [style.display]=\"'inline-block'\" [class.ngx-table-m3-deactive]=\"config.isDeactive\">\n @for (item of value; track $index) {\n <div class=\"tag\" [class.tag-action]=\"!!column.onTagClick\" (click)=\"onTagClick(item.id)\">\n @if (column.onTagClick) { <mat-icon>open_in_new</mat-icon> }\n <div class=\"title\">{{ item.title }}</div>\n </div>\n }\n</div>\n", styles: [".tag{display:flex;align-items:center;column-gap:.5rem}.tag .title{flex:1;font-size:85%}.tag mat-icon{font-size:85%;padding:0}.tag-action{cursor:pointer}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
748
770
|
}
|
|
749
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
771
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ColumnTagComponent, decorators: [{
|
|
750
772
|
type: Component,
|
|
751
|
-
args: [{ host: { selector: 'column-tag' }, imports: [MatIcon], template: "<div [style.display]=\"'inline-block'\" [class.ngx-table-m3-deactive]=\"config.isDeactive\">\n @for (item of value; track $index) {\n <div class=\"tag\" [class.tag-action]=\"!!column.onTagClick\" (click)=\"onTagClick(item.id)\">\n @if (column.onTagClick) { <mat-icon>open_in_new</mat-icon> }\n <div class=\"title\">{{ item.title }}</div>\n </div>\n }\n</div>\n", styles: [".tag{display:flex;align-items:center;column-gap:.5rem}.tag .title{flex:1;font-size:85%}.tag mat-icon{font-size:85%;padding:0}.tag-action{cursor:pointer}\n"] }]
|
|
773
|
+
args: [{ host: { selector: 'column-tag' }, imports: [MatIcon], changeDetection: ChangeDetectionStrategy.Eager, template: "<div [style.display]=\"'inline-block'\" [class.ngx-table-m3-deactive]=\"config.isDeactive\">\n @for (item of value; track $index) {\n <div class=\"tag\" [class.tag-action]=\"!!column.onTagClick\" (click)=\"onTagClick(item.id)\">\n @if (column.onTagClick) { <mat-icon>open_in_new</mat-icon> }\n <div class=\"title\">{{ item.title }}</div>\n </div>\n }\n</div>\n", styles: [".tag{display:flex;align-items:center;column-gap:.5rem}.tag .title{flex:1;font-size:85%}.tag mat-icon{font-size:85%;padding:0}.tag-action{cursor:pointer}\n"] }]
|
|
752
774
|
}], ctorParameters: () => [{ type: i1$1.Router }] });
|
|
753
775
|
|
|
754
776
|
class ColumnTagMethods extends ColumnMethods {
|
|
@@ -767,12 +789,12 @@ class ColumnTextComponent {
|
|
|
767
789
|
column = inject(COLUMN_TYPE);
|
|
768
790
|
value = inject(COLUMN_VALUE);
|
|
769
791
|
config = inject(COLUMN_CONFIG);
|
|
770
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
771
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
792
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ColumnTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
793
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", 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: [""], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
772
794
|
}
|
|
773
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
795
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ColumnTextComponent, decorators: [{
|
|
774
796
|
type: Component,
|
|
775
|
-
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" }]
|
|
797
|
+
args: [{ host: { selector: 'column-text' }, imports: [], changeDetection: ChangeDetectionStrategy.Eager, 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" }]
|
|
776
798
|
}] });
|
|
777
799
|
|
|
778
800
|
class ColumnTextMethods extends ColumnMethods {
|
|
@@ -788,12 +810,12 @@ class ColumnWeightComponent {
|
|
|
788
810
|
column = inject(COLUMN_TYPE);
|
|
789
811
|
value = inject(COLUMN_VALUE);
|
|
790
812
|
config = inject(COLUMN_CONFIG);
|
|
791
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
792
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
813
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ColumnWeightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
814
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: ColumnWeightComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "column-weight" } }, ngImport: i0, template: "<div\n [style.display]=\"'inline-block'\"\n [style.direction]=\"config.isEN ? 'ltr' : 'rtl'\"\n [class.ngx-table-m3-en]=\"config.isEN\"\n [class.ngx-table-m3-deactive]=\"config.isDeactive\"\n>\n {{ value | ngxHelperWeight : { short:column.short, english: config.isEN, } }}\n</div>\n", styles: [""], dependencies: [{ kind: "pipe", type: NgxHelperWeightPipe, name: "ngxHelperWeight" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
793
815
|
}
|
|
794
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
816
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ColumnWeightComponent, decorators: [{
|
|
795
817
|
type: Component,
|
|
796
|
-
args: [{ host: { selector: 'column-weight' }, imports: [NgxHelperWeightPipe], template: "<div\n [style.display]=\"'inline-block'\"\n [style.direction]=\"config.isEN ? 'ltr' : 'rtl'\"\n [class.ngx-table-m3-en]=\"config.isEN\"\n [class.ngx-table-m3-deactive]=\"config.isDeactive\"\n>\n {{ value | ngxHelperWeight : { short:column.short, english: config.isEN, } }}\n</div>\n" }]
|
|
818
|
+
args: [{ host: { selector: 'column-weight' }, imports: [NgxHelperWeightPipe], changeDetection: ChangeDetectionStrategy.Eager, template: "<div\n [style.display]=\"'inline-block'\"\n [style.direction]=\"config.isEN ? 'ltr' : 'rtl'\"\n [class.ngx-table-m3-en]=\"config.isEN\"\n [class.ngx-table-m3-deactive]=\"config.isDeactive\"\n>\n {{ value | ngxHelperWeight : { short:column.short, english: config.isEN, } }}\n</div>\n" }]
|
|
797
819
|
}] });
|
|
798
820
|
|
|
799
821
|
class ColumnWeightMethods extends ColumnMethods {
|
|
@@ -915,10 +937,10 @@ class ViewService {
|
|
|
915
937
|
}
|
|
916
938
|
return orders;
|
|
917
939
|
}
|
|
918
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
919
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
940
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ViewService, deps: [{ token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
941
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ViewService });
|
|
920
942
|
}
|
|
921
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
943
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ViewService, decorators: [{
|
|
922
944
|
type: Injectable
|
|
923
945
|
}], ctorParameters: () => [{ type: i1$1.ActivatedRoute }] });
|
|
924
946
|
|
|
@@ -941,7 +963,8 @@ class ViewValueComponent {
|
|
|
941
963
|
color;
|
|
942
964
|
hasClick;
|
|
943
965
|
copyText;
|
|
944
|
-
isCopied = false
|
|
966
|
+
isCopied = signal(false, /* @ts-ignore */
|
|
967
|
+
...(ngDevMode ? [{ debugName: "isCopied" }] : /* istanbul ignore next */ []));
|
|
945
968
|
copyTimeout;
|
|
946
969
|
constructor(router, viewService) {
|
|
947
970
|
this.router = router;
|
|
@@ -1008,18 +1031,18 @@ class ViewValueComponent {
|
|
|
1008
1031
|
return;
|
|
1009
1032
|
if (this.copyTimeout)
|
|
1010
1033
|
clearTimeout(this.copyTimeout);
|
|
1011
|
-
this.isCopied
|
|
1034
|
+
this.isCopied.update(() => true);
|
|
1012
1035
|
this.copyTimeout = setTimeout(() => {
|
|
1013
|
-
this.isCopied
|
|
1036
|
+
this.isCopied.update(() => false);
|
|
1014
1037
|
this.copyTimeout = undefined;
|
|
1015
1038
|
}, 2000);
|
|
1016
1039
|
}
|
|
1017
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1018
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1040
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ViewValueComponent, deps: [{ token: i1$1.Router }, { token: ViewService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1041
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", 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\n class=\"value-container\"\n [style.color]=\"color\"\n [class.card-title]=\"isCardTitle\"\n [class.card-sub-title]=\"isCardSubTitle\"\n >\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) {\n <mat-icon>open_in_new</mat-icon>\n }\n <!-- COPY -->\n @if (copyText) {\n <mat-icon>{{ isCopied() ? 'done_all' : 'copy' }}</mat-icon>\n }\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", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: ClipboardModule }, { kind: "directive", type: i3.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
1019
1042
|
}
|
|
1020
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1043
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ViewValueComponent, decorators: [{
|
|
1021
1044
|
type: Component,
|
|
1022
|
-
args: [{ selector: 'view-value', imports: [NgComponentOutlet, ClipboardModule, MatIcon], template: "<!-- EMPTY VALUE -->\n@if (value === undefined) {
|
|
1045
|
+
args: [{ selector: 'view-value', imports: [NgComponentOutlet, ClipboardModule, MatIcon], changeDetection: ChangeDetectionStrategy.Eager, template: "<!-- EMPTY VALUE -->\n@if (value === undefined) {}\n\n<!-- SHOW VALUE -->\n@else {\n <div\n class=\"value-container\"\n [style.color]=\"color\"\n [class.card-title]=\"isCardTitle\"\n [class.card-sub-title]=\"isCardSubTitle\"\n >\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) {\n <mat-icon>open_in_new</mat-icon>\n }\n <!-- COPY -->\n @if (copyText) {\n <mat-icon>{{ isCopied() ? 'done_all' : 'copy' }}</mat-icon>\n }\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" }]
|
|
1023
1046
|
}], ctorParameters: () => [{ type: i1$1.Router }, { type: ViewService }], propDecorators: { className: [{
|
|
1024
1047
|
type: HostBinding,
|
|
1025
1048
|
args: ['className']
|
|
@@ -1102,12 +1125,12 @@ class ViewCardToolbarComponent {
|
|
|
1102
1125
|
break;
|
|
1103
1126
|
}
|
|
1104
1127
|
}
|
|
1105
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1106
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1128
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ViewCardToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1129
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", 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]=\"'after'\" 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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
1107
1130
|
}
|
|
1108
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1131
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ViewCardToolbarComponent, decorators: [{
|
|
1109
1132
|
type: Component,
|
|
1110
|
-
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]=\"'after'\" 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"] }]
|
|
1133
|
+
args: [{ selector: 'view-card-toolbar', imports: [MatDivider, MatIcon, MatMenuModule], changeDetection: ChangeDetectionStrategy.Eager, 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]=\"'after'\" 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"] }]
|
|
1111
1134
|
}], propDecorators: { className: [{
|
|
1112
1135
|
type: HostBinding,
|
|
1113
1136
|
args: ['className']
|
|
@@ -1197,12 +1220,12 @@ class ViewCardComponent {
|
|
|
1197
1220
|
return true;
|
|
1198
1221
|
return this.viewService.getValue(column, item) !== undefined;
|
|
1199
1222
|
}
|
|
1200
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1201
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1223
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ViewCardComponent, deps: [{ token: FilterService }, { token: ViewService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1224
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", 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 <!-- MATERIAL ICON -->\n @if (icons[$index].icon) {\n <mat-icon class=\"icon\" [style.color]=\"icons[$index].color\" [style.font-size]=\"viewConfig.iconSize\">\n {{ icons[$index].icon }}\n </mat-icon>\n }\n <!-- EMOJI -->\n @else {\n <td class=\"emoji\" [style.font-size]=\"viewConfig.emojiSize\">{{ emojis[$index] || '' }}</td>\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 !== undefined) {\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 && showContent(dataIndex)) {\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 AND VALUE -->\n @if (columnIndex !== titleIndex && columnIndex !== subTitleIndex && showItem(column, item)) {\n <div class=\"item\">\n <div class=\"title\">{{ column.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: "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"] }, { kind: "pipe", type: NgxHelperMultiLinePipe, name: "ngxHelperMultiLine" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
1202
1225
|
}
|
|
1203
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1226
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ViewCardComponent, decorators: [{
|
|
1204
1227
|
type: Component,
|
|
1205
|
-
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 <!-- MATERIAL ICON -->\n @if (icons[$index].icon) {\n <mat-icon class=\"icon\" [style.color]=\"icons[$index].color\" [style.font-size]=\"viewConfig.iconSize\">\n {{ icons[$index].icon }}\n </mat-icon>\n }\n <!-- EMOJI -->\n @else {\n <td class=\"emoji\" [style.font-size]=\"viewConfig.emojiSize\">{{ emojis[$index] || '' }}</td>\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 !== undefined) {\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 && showContent(dataIndex)) {\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 AND VALUE -->\n @if (columnIndex !== titleIndex && columnIndex !== subTitleIndex && showItem(column, item)) {\n <div class=\"item\">\n <div class=\"title\">{{ column.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" }]
|
|
1228
|
+
args: [{ selector: 'view-card', imports: [MatIcon, NgxHelperMultiLinePipe, ViewActionComponent, ViewValueComponent, ViewCardToolbarComponent], providers: [FilterService, ViewService], changeDetection: ChangeDetectionStrategy.Eager, 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 <!-- MATERIAL ICON -->\n @if (icons[$index].icon) {\n <mat-icon class=\"icon\" [style.color]=\"icons[$index].color\" [style.font-size]=\"viewConfig.iconSize\">\n {{ icons[$index].icon }}\n </mat-icon>\n }\n <!-- EMOJI -->\n @else {\n <td class=\"emoji\" [style.font-size]=\"viewConfig.emojiSize\">{{ emojis[$index] || '' }}</td>\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 !== undefined) {\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 && showContent(dataIndex)) {\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 AND VALUE -->\n @if (columnIndex !== titleIndex && columnIndex !== subTitleIndex && showItem(column, item)) {\n <div class=\"item\">\n <div class=\"title\">{{ column.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" }]
|
|
1206
1229
|
}], ctorParameters: () => [{ type: FilterService }, { type: ViewService }], propDecorators: { className: [{
|
|
1207
1230
|
type: HostBinding,
|
|
1208
1231
|
args: ['className']
|
|
@@ -1240,7 +1263,7 @@ class ViewPaginationComponent {
|
|
|
1240
1263
|
this.elementRef = elementRef;
|
|
1241
1264
|
}
|
|
1242
1265
|
ngOnInit() {
|
|
1243
|
-
|
|
1266
|
+
timer(0).subscribe(this.onScroll.bind(this));
|
|
1244
1267
|
}
|
|
1245
1268
|
ngOnChanges(changes) {
|
|
1246
1269
|
const isDefaultPage = (page) => page === 1 || page === this.pagination.page.total;
|
|
@@ -1267,12 +1290,12 @@ class ViewPaginationComponent {
|
|
|
1267
1290
|
const parentHeight = element.parentElement?.offsetHeight;
|
|
1268
1291
|
this.hasShadow = !!parentHeight && elementPosition < parentHeight;
|
|
1269
1292
|
}
|
|
1270
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1271
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1293
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ViewPaginationComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1294
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", 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()" }, 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: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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"] }, { kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
1272
1295
|
}
|
|
1273
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1296
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ViewPaginationComponent, decorators: [{
|
|
1274
1297
|
type: Component,
|
|
1275
|
-
args: [{ selector: 'view-pagination', host: { '(window:scroll)': 'onScroll()' }, 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"] }]
|
|
1298
|
+
args: [{ selector: 'view-pagination', host: { '(window:scroll)': 'onScroll()' }, imports: [DecimalPipe, MatIconButton, MatIcon, MatMenuModule], changeDetection: ChangeDetectionStrategy.Eager, 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"] }]
|
|
1276
1299
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { className: [{
|
|
1277
1300
|
type: HostBinding,
|
|
1278
1301
|
args: ['className']
|
|
@@ -1372,12 +1395,12 @@ class ViewTableComponent {
|
|
|
1372
1395
|
this.filters[id] = { ...this.filters[id], value: undefined };
|
|
1373
1396
|
this.filterChanged.next({ id, value: undefined });
|
|
1374
1397
|
}
|
|
1375
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1376
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1398
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ViewTableComponent, deps: [{ token: ViewService }, { token: FilterService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1399
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", 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\">\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 <!-- MATERIAL ICON -->\n @if (icons[$index].icon) {\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 <!-- EMOJI -->\n @else {\n <td class=\"emoji\" [style.font-size]=\"viewConfig.emojiSize\">{{ emojis[$index] || '' }}</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: "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: "pipe", type: NgxHelperMultiLinePipe, name: "ngxHelperMultiLine" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
1377
1400
|
}
|
|
1378
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1401
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ViewTableComponent, decorators: [{
|
|
1379
1402
|
type: Component,
|
|
1380
|
-
args: [{ selector: 'view-table', imports: [MatIcon, NgxHelperMultiLinePipe, ViewActionComponent, ViewValueComponent], providers: [FilterService, ViewService], 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\">\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 <!-- MATERIAL ICON -->\n @if (icons[$index].icon) {\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 <!-- EMOJI -->\n @else {\n <td class=\"emoji\" [style.font-size]=\"viewConfig.emojiSize\">{{ emojis[$index] || '' }}</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" }]
|
|
1403
|
+
args: [{ selector: 'view-table', imports: [MatIcon, NgxHelperMultiLinePipe, ViewActionComponent, ViewValueComponent], providers: [FilterService, ViewService], changeDetection: ChangeDetectionStrategy.Eager, 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\">\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 <!-- MATERIAL ICON -->\n @if (icons[$index].icon) {\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 <!-- EMOJI -->\n @else {\n <td class=\"emoji\" [style.font-size]=\"viewConfig.emojiSize\">{{ emojis[$index] || '' }}</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" }]
|
|
1381
1404
|
}], ctorParameters: () => [{ type: ViewService }, { type: FilterService }], propDecorators: { className: [{
|
|
1382
1405
|
type: HostBinding,
|
|
1383
1406
|
args: ['className']
|
|
@@ -1534,12 +1557,12 @@ class NgxTableComponent {
|
|
|
1534
1557
|
this.setQueryParams();
|
|
1535
1558
|
this.filterChanged.next(this.filter);
|
|
1536
1559
|
}
|
|
1537
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1538
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1560
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", 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 });
|
|
1561
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NgxTableComponent, isStandalone: true, selector: "ngx-table", inputs: { loading: "loading", ngxTable: "ngxTable", data: "data", pagination: "pagination" }, outputs: { filterChanged: "filterChanged" }, host: { listeners: { "window:resize": "onResize()" } }, 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]=\"$safeNavigationMigration(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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
1539
1562
|
}
|
|
1540
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1563
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxTableComponent, decorators: [{
|
|
1541
1564
|
type: Component,
|
|
1542
|
-
args: [{ selector: 'ngx-table', host: { '(window:resize)': 'onResize()' }, imports: [NgxHelperLoaderComponent, ViewCardComponent, ViewPaginationComponent, ViewTableComponent], providers: [FilterService, ViewService], template: "@if (loading) {\n<div class=\"ngx-table-m3-loader\">\n
|
|
1565
|
+
args: [{ selector: 'ngx-table', host: { '(window:resize)': 'onResize()' }, imports: [NgxHelperLoaderComponent, ViewCardComponent, ViewPaginationComponent, ViewTableComponent], providers: [FilterService, ViewService], changeDetection: ChangeDetectionStrategy.Eager, 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]=\"$safeNavigationMigration(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"] }]
|
|
1543
1566
|
}], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: FilterService }, { type: ViewService }, { type: undefined, decorators: [{
|
|
1544
1567
|
type: Optional
|
|
1545
1568
|
}, {
|