@webilix/ngx-table-m3 0.0.8 → 0.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/webilix-ngx-table-m3.mjs +145 -3
- package/fesm2022/webilix-ngx-table-m3.mjs.map +1 -1
- package/lib/filters/filter.component.d.ts +4 -0
- package/lib/filters/filter.interface.d.ts +2 -2
- package/lib/filters/index.d.ts +2 -0
- package/lib/filters/number/filter-number.component.d.ts +34 -0
- package/lib/filters/number/filter-number.interface.d.ts +21 -0
- package/lib/filters/search/filter-search.component.d.ts +4 -2
- package/lib/filters/search/filter-search.interface.d.ts +4 -2
- package/lib/views/value/view-value.component.d.ts +4 -4
- package/ngx-table-m3.css +36 -0
- package/package.json +4 -3
|
@@ -11,6 +11,7 @@ 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 { provideNgxMask, NgxMaskDirective } from 'ngx-mask';
|
|
14
15
|
import { MatRadioButton, MatRadioGroup } from '@angular/material/radio';
|
|
15
16
|
import * as i1$1 from '@angular/router';
|
|
16
17
|
import { MatDivider } from '@angular/material/divider';
|
|
@@ -115,6 +116,145 @@ class FilterMultiSelectMethods extends FilterMethods {
|
|
|
115
116
|
}
|
|
116
117
|
}
|
|
117
118
|
|
|
119
|
+
class FilterNumberComponent {
|
|
120
|
+
className = 'ngx-table-m3-filter';
|
|
121
|
+
fromInput;
|
|
122
|
+
numberInput;
|
|
123
|
+
data = inject(FILTER_DATA);
|
|
124
|
+
value = inject(FILTER_VALUE);
|
|
125
|
+
onChange = inject(FILTER_CHANGE);
|
|
126
|
+
modes = [
|
|
127
|
+
{ type: 'EQUAL', title: 'برابر با' },
|
|
128
|
+
{ type: 'LOWER', title: 'کمتر از' },
|
|
129
|
+
{ type: 'GREATER', title: 'بیشتر از' },
|
|
130
|
+
{ type: 'BETWEEN', title: 'در محدوده' },
|
|
131
|
+
];
|
|
132
|
+
mode = this.value?.mode;
|
|
133
|
+
query = this.value?.query;
|
|
134
|
+
fromQuery = this.mode === 'BETWEEN' && this.query ? this.query.split(':')[0] : undefined;
|
|
135
|
+
toQuery = this.mode === 'BETWEEN' && this.query ? this.query.split(':')[1] : undefined;
|
|
136
|
+
numberQuery = this.mode === 'EQUAL' || this.mode === 'LOWER' || this.mode === 'GREATER' ? this.query : undefined;
|
|
137
|
+
inputTransformFn = (value) => Helper.STRING.changeNumbers(value.toString(), 'EN');
|
|
138
|
+
ngAfterViewInit() {
|
|
139
|
+
if (!this.mode)
|
|
140
|
+
return;
|
|
141
|
+
const elementRef = this.mode === 'BETWEEN' ? this.fromInput : this.numberInput;
|
|
142
|
+
const element = elementRef?.nativeElement;
|
|
143
|
+
element?.focus();
|
|
144
|
+
}
|
|
145
|
+
setMode(mode) {
|
|
146
|
+
this.mode = mode;
|
|
147
|
+
this.updateQuery();
|
|
148
|
+
setTimeout(() => {
|
|
149
|
+
const elementRef = this.mode === 'BETWEEN' ? this.fromInput : this.numberInput;
|
|
150
|
+
const element = elementRef?.nativeElement;
|
|
151
|
+
element?.focus();
|
|
152
|
+
}, 100);
|
|
153
|
+
}
|
|
154
|
+
isNumeric(value) {
|
|
155
|
+
if (value.substring(0, 1) === '-')
|
|
156
|
+
value = value.substring(1);
|
|
157
|
+
return Helper.IS.STRING.numeric(value);
|
|
158
|
+
}
|
|
159
|
+
setQuery(fromQuery, toQuery) {
|
|
160
|
+
if (!this.mode)
|
|
161
|
+
return;
|
|
162
|
+
fromQuery = (fromQuery && Helper.IS.string(fromQuery) ? fromQuery.trim() : '').replace(/,/gi, '');
|
|
163
|
+
const from = fromQuery && this.isNumeric(fromQuery) && !isNaN(+fromQuery) ? +fromQuery : undefined;
|
|
164
|
+
if (this.mode !== 'BETWEEN') {
|
|
165
|
+
this.query = from !== undefined ? from.toString() : undefined;
|
|
166
|
+
this.updateQuery();
|
|
167
|
+
return;
|
|
168
|
+
}
|
|
169
|
+
toQuery = (toQuery && Helper.IS.string(toQuery) ? toQuery.trim() : '').replace(/,/gi, '');
|
|
170
|
+
const to = toQuery && this.isNumeric(toQuery) && !isNaN(+toQuery) ? +toQuery : undefined;
|
|
171
|
+
this.query = from !== undefined && to !== undefined && from < to ? `${from}:${to}` : undefined;
|
|
172
|
+
this.updateQuery();
|
|
173
|
+
}
|
|
174
|
+
updateQuery() {
|
|
175
|
+
this.onChange(this.query && this.mode ? { query: this.query, mode: this.mode } : undefined);
|
|
176
|
+
}
|
|
177
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FilterNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
178
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: FilterNumberComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "filter-number" }, properties: { "className": "this.className" } }, providers: [provideNgxMask()], 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 <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 <!-- 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 [mask]=\"'separator.0'\"\n thousandSeparator=\",\"\n decimalMarker=\".\"\n [allowNegativeNumbers]=\"true\"\n [maxLength]=\"15\"\n [inputTransformFn]=\"inputTransformFn\"\n [style.display]=\"mode === 'BETWEEN' ? 'initial' : 'none'\"\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 [mask]=\"'separator.0'\"\n thousandSeparator=\",\"\n decimalMarker=\".\"\n [allowNegativeNumbers]=\"true\"\n [maxLength]=\"15\"\n [inputTransformFn]=\"inputTransformFn\"\n [style.display]=\"mode === 'BETWEEN' ? 'initial' : 'none'\"\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 [mask]=\"'separator.0'\"\n thousandSeparator=\",\"\n decimalMarker=\".\"\n [allowNegativeNumbers]=\"true\"\n [maxLength]=\"15\"\n [inputTransformFn]=\"inputTransformFn\"\n [style.display]=\"mode !== 'BETWEEN' ? 'initial' : 'none'\"\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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }] });
|
|
179
|
+
}
|
|
180
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FilterNumberComponent, decorators: [{
|
|
181
|
+
type: Component,
|
|
182
|
+
args: [{ host: { selector: 'filter-number' }, imports: [FormsModule, NgxMaskDirective], providers: [provideNgxMask()], template: "<div class=\"filter-number\">\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 <!-- 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 [mask]=\"'separator.0'\"\n thousandSeparator=\",\"\n decimalMarker=\".\"\n [allowNegativeNumbers]=\"true\"\n [maxLength]=\"15\"\n [inputTransformFn]=\"inputTransformFn\"\n [style.display]=\"mode === 'BETWEEN' ? 'initial' : 'none'\"\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 [mask]=\"'separator.0'\"\n thousandSeparator=\",\"\n decimalMarker=\".\"\n [allowNegativeNumbers]=\"true\"\n [maxLength]=\"15\"\n [inputTransformFn]=\"inputTransformFn\"\n [style.display]=\"mode === 'BETWEEN' ? 'initial' : 'none'\"\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 [mask]=\"'separator.0'\"\n thousandSeparator=\",\"\n decimalMarker=\".\"\n [allowNegativeNumbers]=\"true\"\n [maxLength]=\"15\"\n [inputTransformFn]=\"inputTransformFn\"\n [style.display]=\"mode !== 'BETWEEN' ? 'initial' : 'none'\"\n (input)=\"setQuery(numberInput.value, '')\"\n #numberInput\n />\n </div>\n</div>\n" }]
|
|
183
|
+
}], propDecorators: { className: [{
|
|
184
|
+
type: HostBinding,
|
|
185
|
+
args: ['className']
|
|
186
|
+
}], fromInput: [{
|
|
187
|
+
type: ViewChild,
|
|
188
|
+
args: ['fromInput']
|
|
189
|
+
}], numberInput: [{
|
|
190
|
+
type: ViewChild,
|
|
191
|
+
args: ['numberInput']
|
|
192
|
+
}] } });
|
|
193
|
+
|
|
194
|
+
const modeList$1 = ['EQUAL', 'GREATER', 'LOWER', 'BETWEEN'];
|
|
195
|
+
class FilterNumberMethods extends FilterMethods {
|
|
196
|
+
toParam(value) {
|
|
197
|
+
return `${value.query}:${value.mode}`;
|
|
198
|
+
}
|
|
199
|
+
value(value, filter) {
|
|
200
|
+
if (!value || !Helper.IS.string(value))
|
|
201
|
+
return undefined;
|
|
202
|
+
const index = value.lastIndexOf(':');
|
|
203
|
+
if (index === -1)
|
|
204
|
+
return undefined;
|
|
205
|
+
const query = value.substring(0, index);
|
|
206
|
+
if (!query || !Helper.IS.string(query))
|
|
207
|
+
return undefined;
|
|
208
|
+
const mode = value.substring(index + 1);
|
|
209
|
+
if (!modeList$1.includes(mode))
|
|
210
|
+
return undefined;
|
|
211
|
+
if (filter.mode && filter.mode !== mode)
|
|
212
|
+
return undefined;
|
|
213
|
+
const isNumeric = (value) => {
|
|
214
|
+
if (value.substring(0, 1) === '-')
|
|
215
|
+
value = value.substring(1);
|
|
216
|
+
return Helper.IS.STRING.numeric(value);
|
|
217
|
+
};
|
|
218
|
+
switch (mode) {
|
|
219
|
+
case 'EQUAL':
|
|
220
|
+
case 'GREATER':
|
|
221
|
+
case 'LOWER':
|
|
222
|
+
if (!isNumeric(query) || isNaN(+query))
|
|
223
|
+
return undefined;
|
|
224
|
+
break;
|
|
225
|
+
case 'BETWEEN':
|
|
226
|
+
const [from, to] = query.split(':', 2);
|
|
227
|
+
if (!from || !isNumeric(from) || isNaN(+from) || !to || !isNumeric(to) || isNaN(+to))
|
|
228
|
+
return undefined;
|
|
229
|
+
if (+from >= +to)
|
|
230
|
+
return undefined;
|
|
231
|
+
break;
|
|
232
|
+
}
|
|
233
|
+
return { query, mode };
|
|
234
|
+
}
|
|
235
|
+
query(value) {
|
|
236
|
+
return this.toParam(value);
|
|
237
|
+
}
|
|
238
|
+
active(value, filter) {
|
|
239
|
+
let title = '';
|
|
240
|
+
switch (value.mode) {
|
|
241
|
+
case 'EQUAL':
|
|
242
|
+
title = value.query;
|
|
243
|
+
break;
|
|
244
|
+
case 'LOWER':
|
|
245
|
+
title = `کمتر از ${value.query}`;
|
|
246
|
+
break;
|
|
247
|
+
case 'GREATER':
|
|
248
|
+
title = `بیشتر از ${value.query}`;
|
|
249
|
+
break;
|
|
250
|
+
case 'BETWEEN':
|
|
251
|
+
const [from, to] = value.query.split(':');
|
|
252
|
+
title = `${from} تا ${to}`;
|
|
253
|
+
}
|
|
254
|
+
return { value: title, english: false };
|
|
255
|
+
}
|
|
256
|
+
}
|
|
257
|
+
|
|
118
258
|
class FilterSearchComponent {
|
|
119
259
|
className = 'ngx-table-m3-filter';
|
|
120
260
|
searchInput;
|
|
@@ -152,6 +292,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
152
292
|
args: ['searchInput']
|
|
153
293
|
}] } });
|
|
154
294
|
|
|
295
|
+
const modeList = ['PHRASE', 'ALL', 'EACH'];
|
|
155
296
|
class FilterSearchMethods extends FilterMethods {
|
|
156
297
|
toParam(value) {
|
|
157
298
|
return `${value.query}:${value.mode}`;
|
|
@@ -166,7 +307,7 @@ class FilterSearchMethods extends FilterMethods {
|
|
|
166
307
|
if (!query || !Helper.IS.string(query))
|
|
167
308
|
return undefined;
|
|
168
309
|
const mode = value.substring(index + 1);
|
|
169
|
-
if (!
|
|
310
|
+
if (!modeList.includes(mode))
|
|
170
311
|
return undefined;
|
|
171
312
|
if (filter.mode && filter.mode !== mode)
|
|
172
313
|
return undefined;
|
|
@@ -222,6 +363,7 @@ class FilterSelectMethods extends FilterMethods {
|
|
|
222
363
|
const FilterInfo = {
|
|
223
364
|
DATE: { methods: new FilterDateMethods(), component: FilterDateComponent },
|
|
224
365
|
'MULTI-SELECT': { methods: new FilterMultiSelectMethods(), component: FilterMultiSelectComponent },
|
|
366
|
+
NUMBER: { methods: new FilterNumberMethods(), component: FilterNumberComponent },
|
|
225
367
|
SEARCH: { methods: new FilterSearchMethods(), component: FilterSearchComponent },
|
|
226
368
|
SELECT: { methods: new FilterSelectMethods(), component: FilterSelectComponent },
|
|
227
369
|
};
|
|
@@ -837,11 +979,11 @@ class ViewCardToolbarComponent {
|
|
|
837
979
|
}
|
|
838
980
|
}
|
|
839
981
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ViewCardToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
840
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ViewCardToolbarComponent, isStandalone: true, selector: "view-card-toolbar", inputs: { orders: "orders", filters: "filters", viewConfig: "viewConfig" }, outputs: { orderChanged: "orderChanged", updateFilter: "updateFilter", clearFilter: "clearFilter" }, host: { properties: { "className": "this.className" } }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"toolbar-container\"\n [style.position]=\"viewConfig.stickyView?.top ? 'sticky' : 'static'\"\n [style.top]=\"viewConfig.stickyView?.top?.mobileView || undefined\"\n (mousedown)=\"swipe($event, 'START', toolbarContainer, toolbarItems)\"\n (mousemove)=\"swipe($event, 'MOVE', toolbarContainer, toolbarItems)\"\n (mouseup)=\"swipe($event, 'END', toolbarContainer, toolbarItems)\"\n (touchstart)=\"swipe($event, 'START', toolbarContainer, toolbarItems)\"\n (touchmove)=\"swipe($event, 'MOVE', toolbarContainer, toolbarItems)\"\n (touchend)=\"swipe($event, 'END', toolbarContainer, toolbarItems)\"\n #toolbarContainer\n>\n <div class=\"toolbar-items\" #toolbarItems>\n <!-- ORDER -->\n @if (orderKeys.length > 0) {\n <div class=\"item\" [matMenuTriggerFor]=\"orderMenu\">\n <mat-icon>swap_vert</mat-icon>\n <span>\u062A\u0631\u062A\u06CC\u0628 \u0646\u0645\u0627\u06CC\u0634</span>\n </div>\n <mat-menu #orderMenu=\"matMenu\" [xPosition]=\"'
|
|
982
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ViewCardToolbarComponent, isStandalone: true, selector: "view-card-toolbar", inputs: { orders: "orders", filters: "filters", viewConfig: "viewConfig" }, outputs: { orderChanged: "orderChanged", updateFilter: "updateFilter", clearFilter: "clearFilter" }, host: { properties: { "className": "this.className" } }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"toolbar-container\"\n [style.position]=\"viewConfig.stickyView?.top ? 'sticky' : 'static'\"\n [style.top]=\"viewConfig.stickyView?.top?.mobileView || undefined\"\n (mousedown)=\"swipe($event, 'START', toolbarContainer, toolbarItems)\"\n (mousemove)=\"swipe($event, 'MOVE', toolbarContainer, toolbarItems)\"\n (mouseup)=\"swipe($event, 'END', toolbarContainer, toolbarItems)\"\n (touchstart)=\"swipe($event, 'START', toolbarContainer, toolbarItems)\"\n (touchmove)=\"swipe($event, 'MOVE', toolbarContainer, toolbarItems)\"\n (touchend)=\"swipe($event, 'END', toolbarContainer, toolbarItems)\"\n #toolbarContainer\n>\n <div class=\"toolbar-items\" #toolbarItems>\n <!-- ORDER -->\n @if (orderKeys.length > 0) {\n <div class=\"item\" [matMenuTriggerFor]=\"orderMenu\">\n <mat-icon>swap_vert</mat-icon>\n <span>\u062A\u0631\u062A\u06CC\u0628 \u0646\u0645\u0627\u06CC\u0634</span>\n </div>\n <mat-menu #orderMenu=\"matMenu\" [xPosition]=\"'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"] }] });
|
|
841
983
|
}
|
|
842
984
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ViewCardToolbarComponent, decorators: [{
|
|
843
985
|
type: Component,
|
|
844
|
-
args: [{ selector: 'view-card-toolbar', imports: [MatDivider, MatIcon, MatMenuModule], template: "<div\n class=\"toolbar-container\"\n [style.position]=\"viewConfig.stickyView?.top ? 'sticky' : 'static'\"\n [style.top]=\"viewConfig.stickyView?.top?.mobileView || undefined\"\n (mousedown)=\"swipe($event, 'START', toolbarContainer, toolbarItems)\"\n (mousemove)=\"swipe($event, 'MOVE', toolbarContainer, toolbarItems)\"\n (mouseup)=\"swipe($event, 'END', toolbarContainer, toolbarItems)\"\n (touchstart)=\"swipe($event, 'START', toolbarContainer, toolbarItems)\"\n (touchmove)=\"swipe($event, 'MOVE', toolbarContainer, toolbarItems)\"\n (touchend)=\"swipe($event, 'END', toolbarContainer, toolbarItems)\"\n #toolbarContainer\n>\n <div class=\"toolbar-items\" #toolbarItems>\n <!-- ORDER -->\n @if (orderKeys.length > 0) {\n <div class=\"item\" [matMenuTriggerFor]=\"orderMenu\">\n <mat-icon>swap_vert</mat-icon>\n <span>\u062A\u0631\u062A\u06CC\u0628 \u0646\u0645\u0627\u06CC\u0634</span>\n </div>\n <mat-menu #orderMenu=\"matMenu\" [xPosition]=\"'
|
|
986
|
+
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"] }]
|
|
845
987
|
}], propDecorators: { className: [{
|
|
846
988
|
type: HostBinding,
|
|
847
989
|
args: ['className']
|