@webilix/ngx-table-m3 0.0.3 → 0.0.4
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.
|
@@ -18,7 +18,7 @@ export declare class ViewCardToolbarComponent implements OnChanges {
|
|
|
18
18
|
private swipeLeft;
|
|
19
19
|
ngOnChanges(changes: SimpleChanges): void;
|
|
20
20
|
updateOrder(id: string, type: 'ASC' | 'DESC'): void;
|
|
21
|
-
swipe(event: MouseEvent | TouchEvent, action: 'START' | 'MOVE' | 'END',
|
|
21
|
+
swipe(event: MouseEvent | TouchEvent, action: 'START' | 'MOVE' | 'END', container: HTMLElement, items: HTMLElement): void;
|
|
22
22
|
static ɵfac: i0.ɵɵFactoryDeclaration<ViewCardToolbarComponent, never>;
|
|
23
23
|
static ɵcmp: i0.ɵɵComponentDeclaration<ViewCardToolbarComponent, "view-card-toolbar", never, { "orders": { "alias": "orders"; "required": true; }; "filters": { "alias": "filters"; "required": true; }; "viewConfig": { "alias": "viewConfig"; "required": true; }; }, { "orderChanged": "orderChanged"; "updateFilter": "updateFilter"; "clearFilter": "clearFilter"; }, never, never, true, never>;
|
|
24
24
|
}
|
package/ngx-table-m3.css
CHANGED
|
@@ -34,34 +34,101 @@
|
|
|
34
34
|
text-decoration: line-through;
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
-
/*
|
|
38
|
-
.ngx-table-m3-
|
|
39
|
-
|
|
40
|
-
|
|
37
|
+
/* FILTER VIEWS */
|
|
38
|
+
.ngx-table-m3-filter {
|
|
39
|
+
display: block;
|
|
40
|
+
position: relative;
|
|
41
41
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
42
|
+
input {
|
|
43
|
+
padding: 0.75rem 0.5rem;
|
|
44
|
+
border-radius: 8px;
|
|
45
|
+
border-width: 0;
|
|
46
|
+
border-bottom: 1px solid var(--outline-variant);
|
|
47
|
+
outline: none;
|
|
48
|
+
width: 100%;
|
|
45
49
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
50
|
+
box-sizing: border-box;
|
|
51
|
+
color: var(--on-surface);
|
|
52
|
+
background-color: var(--surface-container-highest);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
input::placeholder {
|
|
56
|
+
font-family: Yekan;
|
|
57
|
+
text-align: right;
|
|
58
|
+
direction: rtl;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.filter-search {
|
|
62
|
+
margin: 1rem 1rem 0 1rem;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.filter-items {
|
|
66
|
+
padding: 0.5rem;
|
|
67
|
+
|
|
68
|
+
mat-checkbox {
|
|
69
|
+
display: block;
|
|
70
|
+
|
|
71
|
+
.title {
|
|
72
|
+
cursor: pointer;
|
|
49
73
|
}
|
|
50
74
|
}
|
|
51
75
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
76
|
+
mat-radio-group {
|
|
77
|
+
display: flex;
|
|
78
|
+
flex-direction: column;
|
|
79
|
+
|
|
80
|
+
mat-radio-button {
|
|
81
|
+
.title {
|
|
82
|
+
cursor: pointer;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
56
85
|
}
|
|
57
86
|
}
|
|
58
87
|
|
|
59
|
-
.
|
|
60
|
-
|
|
88
|
+
.filter-item-search {
|
|
89
|
+
position: sticky;
|
|
90
|
+
top: 0;
|
|
91
|
+
z-index: 1;
|
|
92
|
+
|
|
93
|
+
input {
|
|
94
|
+
border-radius: 0;
|
|
95
|
+
}
|
|
61
96
|
}
|
|
62
97
|
|
|
63
|
-
.
|
|
64
|
-
|
|
98
|
+
.filter-footer {
|
|
99
|
+
display: flex;
|
|
100
|
+
justify-content: flex-end;
|
|
101
|
+
padding: 1rem;
|
|
102
|
+
column-gap: 0.5rem;
|
|
103
|
+
|
|
104
|
+
button.confirm {
|
|
105
|
+
flex: 1;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
/* ROW ACTIONS */
|
|
111
|
+
.ngx-table-m3-action {
|
|
112
|
+
display: flex;
|
|
113
|
+
align-items: center;
|
|
114
|
+
justify-content: flex-end;
|
|
115
|
+
|
|
116
|
+
button {
|
|
117
|
+
font-size: 90%;
|
|
118
|
+
color: var(--primary);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
button.desktop-view {
|
|
122
|
+
border-radius: 0;
|
|
123
|
+
z-index: 0;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
mat-icon {
|
|
127
|
+
color: var(--primary);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
mat-icon.disabled {
|
|
131
|
+
color: unset;
|
|
65
132
|
}
|
|
66
133
|
}
|
|
67
134
|
|
|
@@ -71,7 +138,7 @@
|
|
|
71
138
|
margin-top: 1rem;
|
|
72
139
|
z-index: 1;
|
|
73
140
|
|
|
74
|
-
content {
|
|
141
|
+
.pagination-content {
|
|
75
142
|
display: flex;
|
|
76
143
|
align-items: center;
|
|
77
144
|
|
|
@@ -99,7 +166,7 @@
|
|
|
99
166
|
}
|
|
100
167
|
}
|
|
101
168
|
|
|
102
|
-
.desktop-view {
|
|
169
|
+
.pagination-content.desktop-view {
|
|
103
170
|
column-gap: 0.5rem;
|
|
104
171
|
width: fit-content;
|
|
105
172
|
|
|
@@ -108,117 +175,46 @@
|
|
|
108
175
|
}
|
|
109
176
|
}
|
|
110
177
|
|
|
111
|
-
.mobile-view {
|
|
178
|
+
.pagination-content.mobile-view {
|
|
112
179
|
.counts {
|
|
113
180
|
flex: 1;
|
|
114
181
|
}
|
|
115
182
|
}
|
|
116
183
|
|
|
117
|
-
.has-shadow {
|
|
184
|
+
.pagination-content.has-shadow {
|
|
118
185
|
border: 1px solid var(--outline-variant);
|
|
119
186
|
box-shadow: 0 0 10px 0 var(--outline-variant);
|
|
120
187
|
}
|
|
121
188
|
}
|
|
122
189
|
|
|
123
|
-
/*
|
|
124
|
-
.ngx-table-m3-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
justify-content: flex-end;
|
|
128
|
-
|
|
129
|
-
button {
|
|
130
|
-
font-size: 90%;
|
|
131
|
-
color: var(--primary);
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
button.desktop-view {
|
|
135
|
-
border-radius: 0;
|
|
136
|
-
z-index: 0;
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
mat-icon {
|
|
140
|
-
color: var(--primary);
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
mat-icon.disabled {
|
|
144
|
-
color: unset;
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
.ngx-table-action-menu-item {
|
|
148
|
-
background-color: red !important;
|
|
149
|
-
}
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
/* FILTER VIEWS */
|
|
153
|
-
.ngx-table-m3-filter {
|
|
154
|
-
display: block;
|
|
155
|
-
position: relative;
|
|
156
|
-
|
|
157
|
-
input {
|
|
158
|
-
padding: 0.75rem 0.5rem;
|
|
159
|
-
border-radius: 8px;
|
|
160
|
-
border-width: 0;
|
|
161
|
-
border-bottom: 1px solid var(--outline-variant);
|
|
162
|
-
outline: none;
|
|
163
|
-
width: 100%;
|
|
164
|
-
|
|
165
|
-
box-sizing: border-box;
|
|
166
|
-
color: var(--on-surface);
|
|
167
|
-
background-color: var(--surface-container-highest);
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
input::placeholder {
|
|
171
|
-
font-family: Yekan;
|
|
172
|
-
text-align: right;
|
|
173
|
-
direction: rtl;
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
.search {
|
|
177
|
-
margin: 1rem 1rem 0 1rem;
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
.items {
|
|
181
|
-
padding: 0.5rem;
|
|
190
|
+
/* DATA VALUES */
|
|
191
|
+
.ngx-table-m3-value {
|
|
192
|
+
.value-container {
|
|
193
|
+
display: block;
|
|
182
194
|
|
|
183
|
-
|
|
184
|
-
display:
|
|
195
|
+
.value {
|
|
196
|
+
display: inline-flex;
|
|
197
|
+
align-items: center;
|
|
185
198
|
|
|
186
|
-
|
|
187
|
-
|
|
199
|
+
mat-icon {
|
|
200
|
+
font-size: 100%;
|
|
201
|
+
padding: 0 0.5rem;
|
|
188
202
|
}
|
|
189
203
|
}
|
|
190
204
|
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
mat-radio-button {
|
|
196
|
-
.title {
|
|
197
|
-
cursor: pointer;
|
|
198
|
-
}
|
|
199
|
-
}
|
|
205
|
+
.sub-value {
|
|
206
|
+
font-size: 85%;
|
|
207
|
+
font-weight: normal;
|
|
208
|
+
opacity: 0.5;
|
|
200
209
|
}
|
|
201
210
|
}
|
|
202
211
|
|
|
203
|
-
.
|
|
204
|
-
|
|
205
|
-
top: 0;
|
|
206
|
-
z-index: 1;
|
|
207
|
-
|
|
208
|
-
input {
|
|
209
|
-
border-radius: 0;
|
|
210
|
-
}
|
|
212
|
+
.value-container.card-title {
|
|
213
|
+
font-weight: 500;
|
|
211
214
|
}
|
|
212
215
|
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
justify-content: flex-end;
|
|
216
|
-
padding: 1rem;
|
|
217
|
-
column-gap: 0.5rem;
|
|
218
|
-
|
|
219
|
-
button.confirm {
|
|
220
|
-
flex: 1;
|
|
221
|
-
}
|
|
216
|
+
.value-container.card-sub-title {
|
|
217
|
+
font-size: 85%;
|
|
222
218
|
}
|
|
223
219
|
}
|
|
224
220
|
|
|
@@ -348,7 +344,7 @@
|
|
|
348
344
|
|
|
349
345
|
/* CARD VIEW */
|
|
350
346
|
.ngx-table-m3 .ngx-table-m3-card-view {
|
|
351
|
-
.
|
|
347
|
+
.card-container {
|
|
352
348
|
display: flex;
|
|
353
349
|
flex-direction: column;
|
|
354
350
|
row-gap: 1rem;
|
|
@@ -356,7 +352,7 @@
|
|
|
356
352
|
.card {
|
|
357
353
|
border-bottom: 1px solid var(--outline-variant);
|
|
358
354
|
|
|
359
|
-
header {
|
|
355
|
+
.card-header {
|
|
360
356
|
display: flex;
|
|
361
357
|
align-items: flex-start;
|
|
362
358
|
column-gap: 0.75rem;
|
|
@@ -377,7 +373,7 @@
|
|
|
377
373
|
}
|
|
378
374
|
}
|
|
379
375
|
|
|
380
|
-
content {
|
|
376
|
+
.card-content {
|
|
381
377
|
display: block;
|
|
382
378
|
padding: 1rem 0 0.5rem 0;
|
|
383
379
|
border: 1px solid var(--outline-variant);
|
|
@@ -417,7 +413,7 @@
|
|
|
417
413
|
}
|
|
418
414
|
|
|
419
415
|
.ngx-table-m3 .ngx-table-m3-card-view-toolbar {
|
|
420
|
-
.toolbar {
|
|
416
|
+
.toolbar-container {
|
|
421
417
|
z-index: 2;
|
|
422
418
|
height: calc(var(--ngx-table-m3-toolbar-height) + 2px);
|
|
423
419
|
background-color: var(--background);
|
|
@@ -462,7 +458,7 @@
|
|
|
462
458
|
}
|
|
463
459
|
}
|
|
464
460
|
|
|
465
|
-
.seperator {
|
|
461
|
+
.toolbar-seperator {
|
|
466
462
|
z-index: 2;
|
|
467
463
|
height: 1rem;
|
|
468
464
|
background-color: var(--background);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webilix/ngx-table-m3",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.4",
|
|
4
4
|
"author": "Ali Amirnezhad",
|
|
5
5
|
"description": "Responsive table view component for Angular and Material 3",
|
|
6
6
|
"repository": {
|
|
@@ -26,8 +26,8 @@
|
|
|
26
26
|
"@angular/material": ">=19.0.3",
|
|
27
27
|
"@webilix/helper-library": ">=6.0.2",
|
|
28
28
|
"@webilix/jalali-date-time": ">=2.0.5",
|
|
29
|
-
"@webilix/ngx-calendar-m3": ">=0.0.
|
|
30
|
-
"@webilix/ngx-helper-m3": ">=0.0.
|
|
29
|
+
"@webilix/ngx-calendar-m3": ">=0.0.4",
|
|
30
|
+
"@webilix/ngx-helper-m3": ">=0.0.9"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
33
|
"tslib": "^2.3.0"
|