@sd-angular/core 0.0.876 → 0.0.880
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/assets/scss/core/toastr.scss +44 -36
- package/badge/sd-angular-core-badge.metadata.json +1 -1
- package/bundles/sd-angular-core-badge.umd.js +1 -1
- package/bundles/sd-angular-core-badge.umd.min.js +1 -1
- package/bundles/sd-angular-core-badge.umd.min.js.map +1 -1
- package/bundles/sd-angular-core-grid-material.umd.js +2 -2
- package/bundles/sd-angular-core-grid-material.umd.js.map +1 -1
- package/bundles/sd-angular-core-grid-material.umd.min.js +1 -1
- package/bundles/sd-angular-core-grid-material.umd.min.js.map +1 -1
- package/bundles/sd-angular-core-notify.umd.js +3 -0
- package/bundles/sd-angular-core-notify.umd.js.map +1 -1
- package/bundles/sd-angular-core-notify.umd.min.js +1 -1
- package/bundles/sd-angular-core-notify.umd.min.js.map +1 -1
- package/bundles/sd-angular-core-tab-router.umd.js +49 -28
- package/bundles/sd-angular-core-tab-router.umd.js.map +1 -1
- package/bundles/sd-angular-core-tab-router.umd.min.js +2 -2
- package/bundles/sd-angular-core-tab-router.umd.min.js.map +1 -1
- package/bundles/sd-angular-core-upload-excel.umd.js.map +1 -1
- package/bundles/sd-angular-core-upload-excel.umd.min.js.map +1 -1
- package/esm2015/badge/src/lib/badge.component.js +1 -1
- package/esm2015/grid-material/src/lib/grid-material.component.js +3 -3
- package/esm2015/notify/src/lib/notify.service.js +4 -1
- package/esm2015/tab-router/src/lib/components/tab-router-outlet/tab-router-outlet.component.js +18 -19
- package/esm2015/upload-excel/src/lib/upload-excel.component.js +1 -1
- package/fesm2015/sd-angular-core-badge.js +1 -1
- package/fesm2015/sd-angular-core-grid-material.js +2 -2
- package/fesm2015/sd-angular-core-grid-material.js.map +1 -1
- package/fesm2015/sd-angular-core-notify.js +3 -0
- package/fesm2015/sd-angular-core-notify.js.map +1 -1
- package/fesm2015/sd-angular-core-tab-router.js +17 -18
- package/fesm2015/sd-angular-core-tab-router.js.map +1 -1
- package/fesm2015/sd-angular-core-upload-excel.js.map +1 -1
- package/grid-material/sd-angular-core-grid-material.metadata.json +1 -1
- package/package.json +1 -1
- package/{sd-angular-core-0.0.876.tgz → sd-angular-core-0.0.880.tgz} +0 -0
- package/tab-router/sd-angular-core-tab-router.metadata.json +1 -1
- package/tab-router/src/lib/components/tab-router-outlet/tab-router-outlet.component.d.ts +2 -3
- package/upload-excel/src/lib/upload-excel.component.d.ts +3 -3
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@import
|
|
1
|
+
@import "./color.scss";
|
|
2
2
|
|
|
3
3
|
@mixin toastr-wrapper {
|
|
4
4
|
display: flex;
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
@mixin toastr-wrapper-icon {
|
|
25
|
-
color
|
|
25
|
+
color: $white-80;
|
|
26
26
|
height: 45px;
|
|
27
27
|
width: 45px;
|
|
28
28
|
display: flex;
|
|
@@ -97,23 +97,23 @@
|
|
|
97
97
|
}
|
|
98
98
|
.toast-message a,
|
|
99
99
|
.toast-message label {
|
|
100
|
-
color: #
|
|
100
|
+
color: #ffffff;
|
|
101
101
|
}
|
|
102
102
|
.toast-message a:hover {
|
|
103
|
-
color: #
|
|
103
|
+
color: #cccccc;
|
|
104
104
|
text-decoration: none;
|
|
105
105
|
}
|
|
106
106
|
.toast-close-button {
|
|
107
|
-
position:
|
|
108
|
-
right:
|
|
109
|
-
top:
|
|
110
|
-
float: right;
|
|
107
|
+
position: absolute;
|
|
108
|
+
right: 16px;
|
|
109
|
+
top: 16px;
|
|
111
110
|
font-size: 20px;
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
111
|
+
color: #8c9198;
|
|
112
|
+
line-height: 1;
|
|
113
|
+
width: 20px;
|
|
114
|
+
text-align: center;
|
|
116
115
|
}
|
|
116
|
+
|
|
117
117
|
.toast-close-button:hover,
|
|
118
118
|
.toast-close-button:focus {
|
|
119
119
|
color: #000000;
|
|
@@ -129,6 +129,7 @@ button.toast-close-button {
|
|
|
129
129
|
cursor: pointer;
|
|
130
130
|
background: transparent;
|
|
131
131
|
border: 0;
|
|
132
|
+
outline: none !important;
|
|
132
133
|
}
|
|
133
134
|
.toast-container {
|
|
134
135
|
pointer-events: none;
|
|
@@ -141,65 +142,71 @@ button.toast-close-button {
|
|
|
141
142
|
.toast-container .ngx-toastr {
|
|
142
143
|
position: relative;
|
|
143
144
|
overflow: hidden;
|
|
144
|
-
margin: 0 0
|
|
145
|
-
padding:
|
|
146
|
-
width:
|
|
147
|
-
|
|
148
|
-
background-position: 15px center;
|
|
145
|
+
margin: 0 0 8px;
|
|
146
|
+
padding: 18px 48px 18px 52px;
|
|
147
|
+
width: 340px;
|
|
148
|
+
background-position: 20px 18px;
|
|
149
149
|
background-repeat: no-repeat;
|
|
150
|
-
background-size:
|
|
151
|
-
|
|
152
|
-
|
|
150
|
+
background-size: 20px;
|
|
151
|
+
color: #000;
|
|
152
|
+
box-shadow: 0px 0.4px 0.8px rgba(0, 0, 0, 0.1), 0px 3px 6px rgba(0, 0, 0, 0.2);
|
|
153
|
+
border-radius: 4px;
|
|
154
|
+
background-color: #fff;
|
|
153
155
|
}
|
|
154
156
|
.toast-container .ngx-toastr:hover {
|
|
155
|
-
box-shadow: 0 0
|
|
157
|
+
box-shadow: 0px 0.4px 0.8px rgba(0, 0, 0, 0.15),
|
|
158
|
+
0px 3px 6px rgba(0, 0, 0, 0.25);
|
|
156
159
|
opacity: 1;
|
|
157
160
|
cursor: pointer;
|
|
158
161
|
}
|
|
159
|
-
|
|
162
|
+
|
|
160
163
|
.toast-info {
|
|
161
|
-
background-image: url("data:image/svg+xml
|
|
164
|
+
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.0001 1.66675C5.40008 1.66675 1.66675 5.40008 1.66675 10.0001C1.66675 14.6001 5.40008 18.3334 10.0001 18.3334C14.6001 18.3334 18.3334 14.6001 18.3334 10.0001C18.3334 5.40008 14.6001 1.66675 10.0001 1.66675ZM10.0001 14.1667C9.54175 14.1667 9.16675 13.7917 9.16675 13.3334V10.0001C9.16675 9.54175 9.54175 9.16675 10.0001 9.16675C10.4584 9.16675 10.8334 9.54175 10.8334 10.0001V13.3334C10.8334 13.7917 10.4584 14.1667 10.0001 14.1667ZM10.8334 7.50008H9.16675V5.83342H10.8334V7.50008Z' fill='%232962FF'/%3E%3C/svg%3E%0A");
|
|
162
165
|
}
|
|
163
|
-
|
|
166
|
+
|
|
164
167
|
.toast-error {
|
|
165
|
-
background-image: url("data:image/svg+xml
|
|
168
|
+
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.0003 1.66675C5.40033 1.66675 1.66699 5.40008 1.66699 10.0001C1.66699 14.6001 5.40033 18.3334 10.0003 18.3334C14.6003 18.3334 18.3337 14.6001 18.3337 10.0001C18.3337 5.40008 14.6003 1.66675 10.0003 1.66675ZM10.0003 10.8334C9.54199 10.8334 9.16699 10.4584 9.16699 10.0001V6.66675C9.16699 6.20842 9.54199 5.83342 10.0003 5.83342C10.4587 5.83342 10.8337 6.20842 10.8337 6.66675V10.0001C10.8337 10.4584 10.4587 10.8334 10.0003 10.8334ZM10.8337 14.1667H9.16699V12.5001H10.8337V14.1667Z' fill='%23F82C13'/%3E%3C/svg%3E%0A");
|
|
166
169
|
}
|
|
167
|
-
|
|
170
|
+
|
|
168
171
|
.toast-success {
|
|
169
|
-
background-image: url("data:image/svg+xml
|
|
172
|
+
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.0003 1.66675C5.40033 1.66675 1.66699 5.40008 1.66699 10.0001C1.66699 14.6001 5.40033 18.3334 10.0003 18.3334C14.6003 18.3334 18.3337 14.6001 18.3337 10.0001C18.3337 5.40008 14.6003 1.66675 10.0003 1.66675ZM7.74199 13.5751L4.75033 10.5834C4.42533 10.2584 4.42533 9.73341 4.75033 9.40841C5.07533 9.08342 5.60033 9.08342 5.92533 9.40841L8.33366 11.8084L14.067 6.07508C14.392 5.75008 14.917 5.75008 15.242 6.07508C15.567 6.40008 15.567 6.92508 15.242 7.25008L8.91699 13.5751C8.60033 13.9001 8.06699 13.9001 7.74199 13.5751Z' fill='%234CAF50'/%3E%3C/svg%3E%0A");
|
|
170
173
|
}
|
|
171
|
-
|
|
174
|
+
|
|
172
175
|
.toast-warning {
|
|
173
|
-
background-image: url("data:image/svg+xml
|
|
176
|
+
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.72494 17.5001H16.2749C17.5583 17.5001 18.3583 16.1084 17.7166 15.0001L11.4416 4.1584C10.7999 3.05007 9.19994 3.05007 8.55827 4.1584L2.28327 15.0001C1.6416 16.1084 2.4416 17.5001 3.72494 17.5001ZM9.99994 11.6667C9.5416 11.6667 9.1666 11.2917 9.1666 10.8334V9.16673C9.1666 8.7084 9.5416 8.3334 9.99994 8.3334C10.4583 8.3334 10.8333 8.7084 10.8333 9.16673V10.8334C10.8333 11.2917 10.4583 11.6667 9.99994 11.6667ZM10.8333 15.0001H9.1666V13.3334H10.8333V15.0001Z' fill='%23FF9600'/%3E%3C/svg%3E%0A");
|
|
174
177
|
}
|
|
178
|
+
|
|
175
179
|
.toast-container.toast-top-center .ngx-toastr,
|
|
176
180
|
.toast-container.toast-bottom-center .ngx-toastr {
|
|
177
|
-
width:
|
|
181
|
+
width: 340px;
|
|
178
182
|
margin-left: auto;
|
|
179
183
|
margin-right: auto;
|
|
180
184
|
}
|
|
185
|
+
|
|
181
186
|
.toast-container.toast-top-full-width .ngx-toastr,
|
|
182
187
|
.toast-container.toast-bottom-full-width .ngx-toastr {
|
|
183
188
|
width: 96%;
|
|
184
189
|
margin-left: auto;
|
|
185
190
|
margin-right: auto;
|
|
186
191
|
}
|
|
192
|
+
|
|
187
193
|
.ngx-toastr {
|
|
188
|
-
|
|
194
|
+
border-left: 4px solid #000;
|
|
189
195
|
pointer-events: auto;
|
|
190
196
|
}
|
|
191
197
|
.toast-success {
|
|
192
|
-
|
|
198
|
+
border-left-color: #51a351;
|
|
193
199
|
}
|
|
194
200
|
.toast-error {
|
|
195
|
-
|
|
201
|
+
border-left-color: #bd362f;
|
|
196
202
|
}
|
|
197
203
|
.toast-info {
|
|
198
|
-
|
|
204
|
+
border-left-color: #2f96b4;
|
|
199
205
|
}
|
|
200
206
|
.toast-warning {
|
|
201
|
-
|
|
207
|
+
border-left-color: #f89406;
|
|
202
208
|
}
|
|
209
|
+
|
|
203
210
|
.toast-progress {
|
|
204
211
|
position: absolute;
|
|
205
212
|
left: 0;
|
|
@@ -208,6 +215,7 @@ button.toast-close-button {
|
|
|
208
215
|
background-color: #000000;
|
|
209
216
|
opacity: 0.4;
|
|
210
217
|
}
|
|
218
|
+
|
|
211
219
|
/* Responsive Design */
|
|
212
220
|
@media all and (max-width: 240px) {
|
|
213
221
|
.toast-container .ngx-toastr.div {
|
|
@@ -234,4 +242,4 @@ button.toast-close-button {
|
|
|
234
242
|
padding: 15px 15px 15px 50px;
|
|
235
243
|
width: 25em;
|
|
236
244
|
}
|
|
237
|
-
}
|
|
245
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"__symbolic":"module","version":4,"metadata":{"SdBadgeModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":7,"character":12},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":7,"character":26}],"declarations":[{"__symbolic":"reference","name":"SdBadge"}],"exports":[{"__symbolic":"reference","name":"SdBadge"}]}]}],"members":{}},"SdBadge":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"sd-badge","template":"<div\r\n class=\"c-badge-circle d-flex align-items-center\"\r\n [class]=\"{\r\n 'c-unknown': !color,\r\n 'c-secondary': color === 'normal',\r\n 'c-info': color === 'info',\r\n 'c-success': color === 'success',\r\n 'c-danger': color === 'danger',\r\n 'c-warning': color === 'warning'\r\n }\"\r\n>\r\n <span\r\n class=\"c-material-icon mr-4\"\r\n [ngClass]=\"{\r\n 'material-icons-outlined': !color,\r\n 'material-icons-round': color,\r\n 'c-badge-icon': icon === 'fiber_manual_record'\r\n }\"\r\n >\r\n {{ icon }}\r\n </span>\r\n {{ title }}\r\n</div>\r\n","styles":["
|
|
1
|
+
{"__symbolic":"module","version":4,"metadata":{"SdBadgeModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":7,"character":12},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":7,"character":26}],"declarations":[{"__symbolic":"reference","name":"SdBadge"}],"exports":[{"__symbolic":"reference","name":"SdBadge"}]}]}],"members":{}},"SdBadge":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"sd-badge","template":"<div\r\n class=\"c-badge-circle d-flex align-items-center\"\r\n [class]=\"{\r\n 'c-unknown': !color,\r\n 'c-secondary': color === 'normal',\r\n 'c-info': color === 'info',\r\n 'c-success': color === 'success',\r\n 'c-danger': color === 'danger',\r\n 'c-warning': color === 'warning'\r\n }\"\r\n>\r\n <span\r\n class=\"c-material-icon mr-4\"\r\n [ngClass]=\"{\r\n 'material-icons-outlined': !color,\r\n 'material-icons-round': color,\r\n 'c-badge-icon': icon === 'fiber_manual_record'\r\n }\"\r\n >\r\n {{ icon }}\r\n </span>\r\n {{ title }}\r\n</div>\r\n","styles":["::ng-deep .c-badge-circle .c-material-icon{font-size:16px;height:16px;width:16px}::ng-deep .c-badge-circle .c-material-icon.c-badge-icon{font-size:12px;height:12px;width:12px}::ng-deep .c-badge-circle.c-unknown{color:#212121}::ng-deep .c-badge-circle.c-unknown .c-material-icon{color:rgba(0,0,0,.5)}::ng-deep .c-badge-circle.c-secondary{color:#212121}::ng-deep .c-badge-circle.c-secondary .c-material-icon{color:rgba(0,0,0,.5)}::ng-deep .c-badge-circle.c-info{color:#2962ff}::ng-deep .c-badge-circle.c-success{color:#4caf50}::ng-deep .c-badge-circle.c-danger{color:#f82c13}::ng-deep .c-badge-circle.c-warning{color:#ff9600}"]}]}],"members":{"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":8,"character":3}}]}],"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"icon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}]}}},"origins":{"SdBadgeModule":"./src/lib/badge.module","SdBadge":"./src/lib/badge.component"},"importAs":"@sd-angular/core/badge"}
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
{ type: core.Component, args: [{
|
|
15
15
|
selector: "sd-badge",
|
|
16
16
|
template: "<div\r\n class=\"c-badge-circle d-flex align-items-center\"\r\n [class]=\"{\r\n 'c-unknown': !color,\r\n 'c-secondary': color === 'normal',\r\n 'c-info': color === 'info',\r\n 'c-success': color === 'success',\r\n 'c-danger': color === 'danger',\r\n 'c-warning': color === 'warning'\r\n }\"\r\n>\r\n <span\r\n class=\"c-material-icon mr-4\"\r\n [ngClass]=\"{\r\n 'material-icons-outlined': !color,\r\n 'material-icons-round': color,\r\n 'c-badge-icon': icon === 'fiber_manual_record'\r\n }\"\r\n >\r\n {{ icon }}\r\n </span>\r\n {{ title }}\r\n</div>\r\n",
|
|
17
|
-
styles: ["
|
|
17
|
+
styles: ["::ng-deep .c-badge-circle .c-material-icon{font-size:16px;height:16px;width:16px}::ng-deep .c-badge-circle .c-material-icon.c-badge-icon{font-size:12px;height:12px;width:12px}::ng-deep .c-badge-circle.c-unknown{color:#212121}::ng-deep .c-badge-circle.c-unknown .c-material-icon{color:rgba(0,0,0,.5)}::ng-deep .c-badge-circle.c-secondary{color:#212121}::ng-deep .c-badge-circle.c-secondary .c-material-icon{color:rgba(0,0,0,.5)}::ng-deep .c-badge-circle.c-info{color:#2962ff}::ng-deep .c-badge-circle.c-success{color:#4caf50}::ng-deep .c-badge-circle.c-danger{color:#f82c13}::ng-deep .c-badge-circle.c-warning{color:#ff9600}"]
|
|
18
18
|
},] }
|
|
19
19
|
];
|
|
20
20
|
SdBadge.propDecorators = {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
!function(
|
|
1
|
+
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@angular/core"),require("@angular/common"),require("@angular/material/icon")):"function"==typeof define&&define.amd?define("@sd-angular/core/badge",["exports","@angular/core","@angular/common","@angular/material/icon"],n):n(((e="undefined"!=typeof globalThis?globalThis:e||self)["sd-angular"]=e["sd-angular"]||{},e["sd-angular"].core=e["sd-angular"].core||{},e["sd-angular"].core.badge={}),e.ng.core,e.ng.common,e.ng.material.icon)}(this,(function(e,n,c,r){"use strict";var o=function(){this.icon="fiber_manual_record"};o.decorators=[{type:n.Component,args:[{selector:"sd-badge",template:"<div\r\n class=\"c-badge-circle d-flex align-items-center\"\r\n [class]=\"{\r\n 'c-unknown': !color,\r\n 'c-secondary': color === 'normal',\r\n 'c-info': color === 'info',\r\n 'c-success': color === 'success',\r\n 'c-danger': color === 'danger',\r\n 'c-warning': color === 'warning'\r\n }\"\r\n>\r\n <span\r\n class=\"c-material-icon mr-4\"\r\n [ngClass]=\"{\r\n 'material-icons-outlined': !color,\r\n 'material-icons-round': color,\r\n 'c-badge-icon': icon === 'fiber_manual_record'\r\n }\"\r\n >\r\n {{ icon }}\r\n </span>\r\n {{ title }}\r\n</div>\r\n",styles:["::ng-deep .c-badge-circle .c-material-icon{font-size:16px;height:16px;width:16px}::ng-deep .c-badge-circle .c-material-icon.c-badge-icon{font-size:12px;height:12px;width:12px}::ng-deep .c-badge-circle.c-unknown{color:#212121}::ng-deep .c-badge-circle.c-unknown .c-material-icon{color:rgba(0,0,0,.5)}::ng-deep .c-badge-circle.c-secondary{color:#212121}::ng-deep .c-badge-circle.c-secondary .c-material-icon{color:rgba(0,0,0,.5)}::ng-deep .c-badge-circle.c-info{color:#2962ff}::ng-deep .c-badge-circle.c-success{color:#4caf50}::ng-deep .c-badge-circle.c-danger{color:#f82c13}::ng-deep .c-badge-circle.c-warning{color:#ff9600}"]}]}],o.propDecorators={color:[{type:n.Input}],title:[{type:n.Input}],icon:[{type:n.Input}]};var a=function(){};a.decorators=[{type:n.NgModule,args:[{imports:[c.CommonModule,r.MatIconModule],declarations:[o],exports:[o]}]}],e.SdBadge=o,e.SdBadgeModule=a,Object.defineProperty(e,"__esModule",{value:!0})}));
|
|
2
2
|
//# sourceMappingURL=sd-angular-core-badge.umd.min.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../projects/sd-core/badge/src/lib/badge.component.ts","../../../../projects/sd-core/badge/src/lib/badge.module.ts"],"names":["this","icon","Component","args","selector","template","Input","NgModule","imports","CommonModule","MatIconModule","declarations","SdBadge","exports"],"mappings":"mjBAEA,WAUWA,KAAAC,KAAe,2CAVzBC,EAAAA,UAASC,KAAA,CAAC,CACTC,SAAU,WACVC,SAAA,
|
|
1
|
+
{"version":3,"sources":["../../../../projects/sd-core/badge/src/lib/badge.component.ts","../../../../projects/sd-core/badge/src/lib/badge.module.ts"],"names":["this","icon","Component","args","selector","template","Input","NgModule","imports","CommonModule","MatIconModule","declarations","SdBadge","exports"],"mappings":"mjBAEA,WAUWA,KAAAC,KAAe,2CAVzBC,EAAAA,UAASC,KAAA,CAAC,CACTC,SAAU,WACVC,SAAA,+vCAICC,EAAAA,qBAEAA,EAAAA,oBAEAA,EAAAA,eCDH,iCALCC,EAAAA,SAAQJ,KAAA,CAAC,CACRK,QAAS,CAACC,EAAAA,aAAcC,EAAAA,eACxBC,aAAc,CAACC,GACfC,QAAS,CAACD","sourcesContent":["import { Component, Input } from \"@angular/core\";\r\n\r\n@Component({\r\n selector: \"sd-badge\",\r\n templateUrl: \"./badge.component.html\",\r\n styleUrls: [\"./badge.component.scss\"],\r\n})\r\nexport class SdBadge {\r\n @Input() color: \"normal\" | \"info\" | \"success\" | \"warning\" | \"danger\";\r\n\r\n @Input() title: string;\r\n\r\n @Input() icon: string = \"fiber_manual_record\";\r\n}\r\n","import { NgModule } from \"@angular/core\";\r\nimport { CommonModule } from \"@angular/common\";\r\nimport { MatIconModule } from \"@angular/material/icon\";\r\n\r\nimport { SdBadge } from \"./badge.component\";\r\n\r\n@NgModule({\r\n imports: [CommonModule, MatIconModule],\r\n declarations: [SdBadge],\r\n exports: [SdBadge],\r\n})\r\nexport class SdBadgeModule {}\r\n"]}
|
|
@@ -2429,7 +2429,7 @@
|
|
|
2429
2429
|
SdGridMaterial.decorators = [
|
|
2430
2430
|
{ type: core.Component, args: [{
|
|
2431
2431
|
selector: 'sd-grid-material',
|
|
2432
|
-
template: "<ng-container *ngIf=\"gridConfigurationObserver | async as gridConfiguration\">\r\n <ng-container\r\n *ngIf=\"\r\n gridConfiguration\r\n | sdGridConfigurationResult\r\n : gridOption\r\n : sdSubInformation as configuration\r\n \"\r\n >\r\n <ng-container *ngIf=\"!gridOption.filter?.disabled\">\r\n <sd-grid-filter\r\n [filter]=\"gridOption?.filter\"\r\n [columns]=\"configuration.firstColumns\"\r\n [filterDefs]=\"filterDefs\"\r\n >\r\n </sd-grid-filter>\r\n </ng-container>\r\n <div\r\n class=\"c-container {{ gridOption?.style?.grid }}\"\r\n [ngClass]=\"{ 'mat-elevation-z2': gridOption?.shadow }\"\r\n >\r\n <div class=\"c-loading\" *ngIf=\"isLoading\">\r\n <mat-spinner *ngIf=\"isLoading\"></mat-spinner>\r\n </div>\r\n <ng-container>\r\n <div\r\n class=\"c-table\"\r\n [ngStyle]=\"{\r\n 'max-height': gridOption?.maxHeight,\r\n 'min-height': 'gridOption?.minHeight'\r\n }\"\r\n >\r\n <table\r\n *ngIf=\"items?.length; else elseEmpty\"\r\n mat-table\r\n [dataSource]=\"items\"\r\n matSort\r\n [matSortDisabled]=\"!gridOption.sortable\"\r\n cdkDropList\r\n cdkDropListOrientation=\"horizontal\"\r\n [cdkDropListDisabled]=\"!gridOption.dropDragColumnEnable\"\r\n (cdkDropListDropped)=\"drop($event, configuration.displayedColumns)\"\r\n multiTemplateDataRows\r\n >\r\n <ng-container matColumnDef=\"sdSubInformation\" sticky>\r\n <td\r\n class=\"p-0\"\r\n mat-cell\r\n *matCellDef=\"let item\"\r\n [attr.colspan]=\"configuration.displayedColumns.length\"\r\n >\r\n <div\r\n *ngIf=\"sdSubInformation?.templateRef\"\r\n [@detailExpand]=\"item.isExpanded ? 'expanded' : 'collapsed'\"\r\n >\r\n <ng-container *ngIf=\"item.isExpanded\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n sdSubInformation.templateRef;\r\n context: { item: item }\r\n \"\r\n >\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdSubInformationAction\" stickyEnd>\r\n <th\r\n class=\"p-0\"\r\n mat-header-cell\r\n *matHeaderCellDef\r\n style=\"width: 1px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"\r\n ></th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <button\r\n *ngIf=\"!element.isExpanding\"\r\n mat-icon-button\r\n aria-label=\"Expand & Collapse\"\r\n (click)=\"onExpand(element)\"\r\n >\r\n <mat-icon *ngIf=\"!element.isExpanded\">expand_more</mat-icon>\r\n <mat-icon *ngIf=\"element.isExpanded\">expand_less</mat-icon>\r\n </button>\r\n <div *ngIf=\"element.isExpanding\" class=\"lds-ring\">\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"selection\" sticky>\r\n <th\r\n class=\"text-center px-15\"\r\n mat-header-cell\r\n *matHeaderCellDef\r\n style=\"min-width: 50px; max-width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"\r\n >\r\n <mat-checkbox\r\n *ngIf=\"!gridOption.selection?.single\"\r\n class=\"c-selection\"\r\n color=\"primary\"\r\n [(ngModel)]=\"isSelectAll\"\r\n (change)=\"onSelectAll()\"\r\n [disabled]=\"\r\n items | selectionDisableSelectAll: gridOption?.selection\r\n \"\r\n >\r\n </mat-checkbox>\r\n </th>\r\n <td\r\n class=\"text-center px-15\"\r\n mat-cell\r\n *matCellDef=\"let item\"\r\n style=\"min-width: 50px; max-width: 50px\"\r\n >\r\n <mat-checkbox\r\n class=\"c-selection\"\r\n color=\"primary\"\r\n [(ngModel)]=\"item.isSelected\"\r\n (change)=\"onSelect(item)\"\r\n [disabled]=\"\r\n selectedItems | selectionDisable: item:gridOption?.selection\r\n \"\r\n >\r\n </mat-checkbox>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"command\">\r\n <th\r\n class=\"px-10\"\r\n mat-header-cell\r\n *matHeaderCellDef\r\n style=\"width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"\r\n ></th>\r\n <td class=\"px-10\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-command\r\n [commands]=\"gridOption.commands\"\r\n [item]=\"item\"\r\n ></sd-desktop-command>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container\r\n *ngFor=\"let column of configuration.firstColumns; let i = index\"\r\n [matColumnDef]=\"column.field\"\r\n [sticky]=\"configuration.fixedColumn[column.field]\"\r\n >\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n cdkDrag\r\n class=\"px-10 c-th\"\r\n [ngStyle]=\"{ 'min-width': column.width }\"\r\n [attr.rowspan]=\"\r\n configuration.multipleHeader && column.type !== 'children-col'\r\n ? 2\r\n : 1\r\n \"\r\n [attr.colspan]=\"\r\n column.type === 'children-col' ? column.children?.length : 1\r\n \"\r\n >\r\n <div>\r\n <div\r\n aria-hidden=\"false\"\r\n role=\"presentation\"\r\n mat-sort-header\r\n [disabled]=\"\r\n !column.sortable || column.type === 'children-col'\r\n \"\r\n [innerHTML]=\"column.titleHtml || column.title\"\r\n ></div>\r\n <div\r\n class=\"c-inline-column\"\r\n *ngIf=\"gridOption.filter?.inlineColumn\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n inlineColumn;\r\n context: { column: column }\r\n \"\r\n ></ng-container>\r\n </div>\r\n </div>\r\n </th>\r\n <td class=\"c-td px-10\" mat-cell *matCellDef=\"let item\">\r\n <ng-container *ngIf=\"cellDef[column.field]\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n cellDef[column.field].templateRef;\r\n context: { item: item, column: column, idx: i }\r\n \"\r\n >\r\n </ng-container>\r\n </ng-container>\r\n <sd-desktop-cell-view\r\n *ngIf=\"!cellDef[column.field]\"\r\n [key]=\"key\"\r\n [column]=\"column\"\r\n [item]=\"item\"\r\n >\r\n </sd-desktop-cell-view>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef>\r\n <ng-container *ngIf=\"footerDef[column.field]\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n footerDef[column.field].templateRef;\r\n context: { items: items, column: column }\r\n \"\r\n >\r\n </ng-container>\r\n </ng-container>\r\n </td>\r\n </ng-container>\r\n <ng-container\r\n *ngFor=\"let column of configuration.secondColumns; let i = index\"\r\n [matColumnDef]=\"column.field\"\r\n >\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n mat-sort-header\r\n class=\"c-th px-10\"\r\n [ngStyle]=\"{ 'min-width': column.width }\"\r\n >\r\n <div>\r\n <div [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n <div *ngIf=\"gridOption.filter?.inlineColumn\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n inlineColumn;\r\n context: { column: column }\r\n \"\r\n ></ng-container>\r\n </div>\r\n </div>\r\n </th>\r\n <td class=\"c-td px-10\" mat-cell *matCellDef=\"let item\">\r\n <ng-container *ngIf=\"cellDef[column.field]\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n cellDef[column.field].templateRef;\r\n context: { item: item, column: column, idx: i }\r\n \"\r\n >\r\n </ng-container>\r\n </ng-container>\r\n <sd-desktop-cell-view\r\n *ngIf=\"!cellDef[column.field]\"\r\n [key]=\"key\"\r\n [column]=\"column\"\r\n [item]=\"item\"\r\n >\r\n </sd-desktop-cell-view>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef>\r\n <ng-container *ngIf=\"footerDef[column.field]\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n footerDef[column.field].templateRef;\r\n context: { items: items, column: column }\r\n \"\r\n >\r\n </ng-container>\r\n </ng-container>\r\n </td>\r\n </ng-container>\r\n <tr\r\n class=\"c-first-header\"\r\n mat-header-row\r\n *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\"\r\n ></tr>\r\n <ng-container *ngIf=\"configuration.secondHeaders?.length\">\r\n <tr\r\n class=\"c-second-header\"\r\n mat-header-row\r\n *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\"\r\n ></tr>\r\n </ng-container>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: configuration.displayedColumns\"\r\n matRipple\r\n class=\"c-row\"\r\n ></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: ['sdSubInformation']\"\r\n class=\"c-detail-row\"\r\n ></tr>\r\n <ng-container\r\n *ngIf=\"hasFooter && configuration.displayedFooters?.length\"\r\n >\r\n <tr\r\n mat-footer-row\r\n *matFooterRowDef=\"configuration.displayedFooters; sticky: true\"\r\n ></tr>\r\n </ng-container>\r\n </table>\r\n <ng-template #elseEmpty>\r\n <table mat-table [dataSource]=\"[{}]\">\r\n <ng-container matColumnDef=\"selection\" sticky>\r\n <th\r\n class=\"px-15\"\r\n mat-header-cell\r\n *matHeaderCellDef\r\n style=\"min-width: 50px; max-width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"\r\n ></th>\r\n </ng-container>\r\n <ng-container matColumnDef=\"command\">\r\n <th\r\n class=\"px-10\"\r\n mat-header-cell\r\n *matHeaderCellDef\r\n style=\"min-width: 50px; max-width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"\r\n ></th>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdSubInformationAction\">\r\n <th\r\n class=\"p-0\"\r\n mat-header-cell\r\n *matHeaderCellDef\r\n style=\"width: 1px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"\r\n ></th>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdEmpty\">\r\n <td\r\n class=\"c-empty\"\r\n mat-cell\r\n *matCellDef=\"let item\"\r\n [attr.colspan]=\"configuration.displayedColumns.length\"\r\n >\r\n <ng-container\r\n *ngIf=\"sdEmptyData?.templateRef; else sdEmptyDataNoRef\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n sdEmptyData.templateRef;\r\n context: { item: item }\r\n \"\r\n >\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #sdEmptyDataNoRef>\r\n <mat-icon fontSet=\"material-icons-outlined\"\r\n >leaderboard</mat-icon\r\n >\r\n </ng-template>\r\n </td>\r\n </ng-container>\r\n <ng-container\r\n *ngFor=\"let column of configuration.columns\"\r\n [matColumnDef]=\"column.field\"\r\n [sticky]=\"configuration.fixedColumn[column.field]\"\r\n >\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n class=\"c-th px-10\"\r\n [ngStyle]=\"{ 'min-width': column.width }\"\r\n >\r\n <div [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n </th>\r\n </ng-container>\r\n <ng-container\r\n *ngFor=\"let column of configuration.firstColumns\"\r\n [matColumnDef]=\"column.field\"\r\n [sticky]=\"configuration.fixedColumn[column.field]\"\r\n >\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n class=\"c-th px-10\"\r\n [ngStyle]=\"{ 'min-width': column.width }\"\r\n [attr.rowspan]=\"\r\n configuration.multipleHeader &&\r\n column.type !== 'children-col'\r\n ? 2\r\n : 1\r\n \"\r\n [attr.colspan]=\"\r\n column.type === 'children-col' ? column.children?.length : 1\r\n \"\r\n >\r\n <div>\r\n <div [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n <div *ngIf=\"gridOption.filter?.inlineColumn\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n inlineColumn;\r\n context: { column: column }\r\n \"\r\n ></ng-container>\r\n </div>\r\n </div>\r\n </th>\r\n </ng-container>\r\n <ng-container\r\n *ngFor=\"let column of configuration.secondColumns\"\r\n [matColumnDef]=\"column.field\"\r\n >\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n class=\"c-th px-10\"\r\n [ngStyle]=\"{ 'min-width': column.width }\"\r\n >\r\n <div>\r\n <div [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n <div *ngIf=\"gridOption.filter?.inlineColumn\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n inlineColumn;\r\n context: { column: column }\r\n \"\r\n ></ng-container>\r\n </div>\r\n </div>\r\n </th>\r\n </ng-container>\r\n <tr\r\n class=\"c-first-header\"\r\n mat-header-row\r\n *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\"\r\n ></tr>\r\n <tr\r\n class=\"c-second-header\"\r\n mat-header-row\r\n *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\"\r\n ></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: ['sdEmpty']\"></tr>\r\n </table>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n <div class=\"c-paginator\">\r\n <div class=\"c-action\">\r\n <sd-button\r\n *ngIf=\"\r\n !gridOption.filter?.disabled && !gridOption.filter?.inlineColumn\r\n \"\r\n class=\"mr-10\"\r\n [title]=\"'Filter' | sdTranslate\"\r\n icon=\"filter_alt\"\r\n size=\"sm\"\r\n (action)=\"gridFilter.open()\"\r\n type=\"link\"\r\n >\r\n </sd-button>\r\n <sd-button\r\n *ngIf=\"gridOption.reload?.visible\"\r\n class=\"mr-10\"\r\n [title]=\"'Reload' | sdTranslate\"\r\n icon=\"refresh\"\r\n size=\"sm\"\r\n (action)=\"reload()\"\r\n [disabled]=\"!items?.length\"\r\n type=\"link\"\r\n >\r\n </sd-button>\r\n <ng-container *ngIf=\"gridOption.export?.visible && items?.length\">\r\n <ng-container *ngIf=\"isExporting; else unExporting\">\r\n <sd-button\r\n class=\"mr-10\"\r\n [loading]=\"isExporting\"\r\n [title]=\"exportTitle | sdTranslate\"\r\n icon=\"get_app\"\r\n size=\"sm\"\r\n type=\"link\"\r\n >\r\n </sd-button>\r\n </ng-container>\r\n <ng-template #unExporting>\r\n <sd-button\r\n class=\"mr-10\"\r\n [title]=\"exportTitle | sdTranslate\"\r\n icon=\"get_app\"\r\n size=\"sm\"\r\n [matMenuTriggerFor]=\"menu\"\r\n type=\"link\"\r\n >\r\n </sd-button>\r\n </ng-template>\r\n\r\n <mat-menu #menu=\"matMenu\">\r\n <button\r\n *ngIf=\"gridOption.export?.visibleExcel !== false\"\r\n mat-menu-item\r\n (click)=\"sdPopupExport.exportDefault()\"\r\n type=\"button\"\r\n >\r\n <mat-icon fontSet=\"material-icons-outlined\"\r\n >file_download</mat-icon\r\n >\r\n <span> {{ \"Export excel\" | sdTranslate }}</span>\r\n </button>\r\n <button\r\n *ngIf=\"gridOption.export?.visibleCSV !== false\"\r\n mat-menu-item\r\n (click)=\"sdPopupExport.exportDefault(true)\"\r\n type=\"button\"\r\n >\r\n <mat-icon fontSet=\"material-icons-outlined\"\r\n >file_download</mat-icon\r\n >\r\n <span> {{ \"Export CSV\" | sdTranslate }}</span>\r\n </button>\r\n <button\r\n *ngIf=\"gridOption.export?.key\"\r\n mat-menu-item\r\n (click)=\"sdPopupExport.open()\"\r\n type=\"button\"\r\n >\r\n <mat-icon fontSet=\"material-icons-outlined\">settings</mat-icon>\r\n <span> {{ \"Configure\" | sdTranslate }}</span>\r\n </button>\r\n </mat-menu>\r\n </ng-container>\r\n <sd-button\r\n *ngIf=\"gridOption.config?.visible\"\r\n class=\"mr-10\"\r\n [title]=\"'Configure' | sdTranslate\"\r\n icon=\"settings\"\r\n size=\"sm\"\r\n (action)=\"popupGridConfiguration.open()\"\r\n type=\"link\"\r\n >\r\n </sd-button>\r\n </div>\r\n <mat-paginator\r\n [class.d-none]=\"gridOption.paginate?.hidden\"\r\n [length]=\"total\"\r\n [pageSize]=\"gridOption.paginate?.pageSize\"\r\n [pageSizeOptions]=\"gridOption.paginate?.pages\"\r\n [showFirstLastButtons]=\"gridOption.paginate?.showFirstLastButtons\"\r\n ></mat-paginator>\r\n </div>\r\n </div>\r\n <sd-popup-export\r\n *ngIf=\"gridOption.export?.visible\"\r\n [gridOption]=\"gridOption\"\r\n (export)=\"onExport($event)\"\r\n #sdPopupExport\r\n >\r\n </sd-popup-export>\r\n <sd-popup-grid-configuration\r\n [gridOption]=\"gridOption\"\r\n [key]=\"key\"\r\n #popupGridConfiguration\r\n >\r\n </sd-popup-grid-configuration>\r\n </ng-container>\r\n</ng-container>\r\n<ng-template #inlineColumn let-column=\"column\">\r\n <ng-container\r\n *ngIf=\"\r\n column.type === 'string' ||\r\n column.type === 'number' ||\r\n column.type === 'bool' ||\r\n column.type === 'values' ||\r\n column.type === 'date' ||\r\n column.type === 'datetime' ||\r\n column.type === 'time';\r\n else noFilter\r\n \"\r\n >\r\n <sd-input\r\n *ngIf=\"column.type === 'string'\"\r\n size=\"sm\"\r\n type=\"text\"\r\n [(model)]=\"columnFilter[column.field]\"\r\n (keyupEnter)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\"\r\n >\r\n </sd-input>\r\n <sd-input\r\n *ngIf=\"column.type === 'number'\"\r\n size=\"sm\"\r\n type=\"number\"\r\n [(model)]=\"columnFilter[column.field]\"\r\n (keyupEnter)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\"\r\n >\r\n </sd-input>\r\n <sd-select\r\n *ngIf=\"column.type === 'bool'\"\r\n size=\"sm\"\r\n [items]=\"[\r\n { value: '1', display: column.option?.displayOnTrue || 'True' },\r\n { value: '0', display: column.option?.displayOnFalse || 'False' }\r\n ]\"\r\n valueField=\"value\"\r\n displayField=\"display\"\r\n [(model)]=\"columnFilter[column.field]\"\r\n (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\"\r\n >\r\n </sd-select>\r\n <sd-select\r\n *ngIf=\"\r\n column.type === 'values' && column?.option?.selection !== 'AUTOCOMPLETE'\r\n \"\r\n size=\"sm\"\r\n [items]=\"column.option.items\"\r\n [valueField]=\"column.option.valueField\"\r\n [displayField]=\"column.option.displayField\"\r\n [(model)]=\"columnFilter[column.field]\"\r\n (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\"\r\n [multiple]=\"\r\n column?.option?.selection === 'MULTIPLE' ||\r\n column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\r\n \"\r\n [filtered]=\"column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\"\r\n >\r\n </sd-select>\r\n <sd-autocomplete\r\n *ngIf=\"\r\n column.type === 'values' && column?.option?.selection === 'AUTOCOMPLETE'\r\n \"\r\n size=\"sm\"\r\n [items]=\"column.option.items\"\r\n [valueField]=\"column.option.valueField\"\r\n [displayField]=\"column.option.displayField\"\r\n [(model)]=\"columnFilter[column.field]\"\r\n (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\"\r\n >\r\n </sd-autocomplete>\r\n <sd-date-time\r\n *ngIf=\"\r\n column.type === 'date' ||\r\n column.type === 'datetime' ||\r\n column.type === 'time'\r\n \"\r\n size=\"sm\"\r\n [(model)]=\"columnFilter[column.field]\"\r\n [type]=\"column.type\"\r\n (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\"\r\n >\r\n </sd-date-time>\r\n </ng-container>\r\n <ng-template #noFilter>\r\n <sd-input type=\"text\" disabled> </sd-input>\r\n </ng-template>\r\n</ng-template>\r\n\r\n<sd-quick-action\r\n *ngIf=\"\r\n selectedItems\r\n | selectionActionFilter: gridOption?.selection?.actions as actions\r\n \"\r\n [isOpened]=\"actions?.length\"\r\n>\r\n <div sdMessage>\r\n <strong class=\"text-info\">{{ selectedItems.length }}</strong>\r\n {{ gridOption?.selection?.message || (\"selected rows\" | sdTranslate) }}\r\n </div>\r\n <div class=\"d-flex align-items-center\" sdAction>\r\n <ng-container *ngFor=\"let action of actions\">\r\n <sd-button\r\n *ngIf=\"action.click\"\r\n class=\"ml-5\"\r\n [tooltip]=\"action.tooltip\"\r\n [icon]=\"action.icon\"\r\n [color]=\"action.color || 'secondary'\"\r\n [type]=\"action.type || 'light'\"\r\n [fontSet]=\"action.fontSet\"\r\n [title]=\"action.title\"\r\n size=\"sm\"\r\n (action)=\"action.click(selectedItems)\"\r\n ></sd-button>\r\n <ng-container *ngIf=\"action.children?.length\">\r\n <sd-button\r\n class=\"ml-5\"\r\n [tooltip]=\"action.tooltip\"\r\n [icon]=\"action.icon || 'more_vert'\"\r\n [color]=\"action.color || 'secondary'\"\r\n [type]=\"action.type || 'light'\"\r\n [fontSet]=\"action.fontSet\"\r\n [title]=\"action.title\"\r\n size=\"sm\"\r\n [matMenuTriggerFor]=\"menu\"\r\n >\r\n </sd-button>\r\n <mat-menu #menu=\"matMenu\">\r\n <span>\r\n <button\r\n *ngFor=\"let childAction of action.children\"\r\n mat-menu-item\r\n (click)=\"childAction.click(selectedItems)\"\r\n [disabled]=\"childAction.disabled\"\r\n >\r\n <mat-icon [fontSet]=\"childAction.fontSet\" class=\"c-icon\"\r\n >{{ childAction.icon }}\r\n </mat-icon>\r\n <span> {{ childAction.title }}</span>\r\n </button>\r\n </span>\r\n </mat-menu>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</sd-quick-action>\r\n",
|
|
2432
|
+
template: "<ng-container *ngIf=\"gridConfigurationObserver | async as gridConfiguration\">\r\n <ng-container\r\n *ngIf=\"\r\n gridConfiguration\r\n | sdGridConfigurationResult\r\n : gridOption\r\n : sdSubInformation as configuration\r\n \"\r\n >\r\n <ng-container *ngIf=\"!gridOption.filter?.disabled\">\r\n <sd-grid-filter\r\n [filter]=\"gridOption?.filter\"\r\n [columns]=\"configuration.firstColumns\"\r\n [filterDefs]=\"filterDefs\"\r\n >\r\n </sd-grid-filter>\r\n </ng-container>\r\n <div\r\n class=\"c-container {{ gridOption?.style?.grid }}\"\r\n [ngClass]=\"{ 'mat-elevation-z2': gridOption?.shadow }\"\r\n >\r\n <div class=\"c-loading\" *ngIf=\"isLoading\">\r\n <mat-spinner *ngIf=\"isLoading\"></mat-spinner>\r\n </div>\r\n <ng-container>\r\n <div\r\n class=\"c-table\"\r\n [ngStyle]=\"{\r\n 'max-height': gridOption?.maxHeight,\r\n 'min-height': 'gridOption?.minHeight'\r\n }\"\r\n >\r\n <table\r\n *ngIf=\"items?.length; else elseEmpty\"\r\n mat-table\r\n [dataSource]=\"items\"\r\n matSort\r\n [matSortDisabled]=\"!gridOption.sortable\"\r\n cdkDropList\r\n cdkDropListOrientation=\"horizontal\"\r\n [cdkDropListDisabled]=\"!gridOption.dropDragColumnEnable\"\r\n (cdkDropListDropped)=\"drop($event, configuration.displayedColumns)\"\r\n multiTemplateDataRows\r\n >\r\n <ng-container matColumnDef=\"sdSubInformation\" sticky>\r\n <td\r\n class=\"p-0\"\r\n mat-cell\r\n *matCellDef=\"let item\"\r\n [attr.colspan]=\"configuration.displayedColumns.length\"\r\n >\r\n <div\r\n *ngIf=\"sdSubInformation?.templateRef\"\r\n [@detailExpand]=\"item.isExpanded ? 'expanded' : 'collapsed'\"\r\n >\r\n <ng-container *ngIf=\"item.isExpanded\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n sdSubInformation.templateRef;\r\n context: { item: item }\r\n \"\r\n >\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdSubInformationAction\" stickyEnd>\r\n <th\r\n class=\"p-0\"\r\n mat-header-cell\r\n *matHeaderCellDef\r\n style=\"width: 1px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"\r\n ></th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <button\r\n *ngIf=\"!element.isExpanding\"\r\n mat-icon-button\r\n aria-label=\"Expand & Collapse\"\r\n (click)=\"onExpand(element)\"\r\n >\r\n <mat-icon *ngIf=\"!element.isExpanded\">expand_more</mat-icon>\r\n <mat-icon *ngIf=\"element.isExpanded\">expand_less</mat-icon>\r\n </button>\r\n <div *ngIf=\"element.isExpanding\" class=\"lds-ring\">\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"selection\" sticky>\r\n <th\r\n class=\"text-center px-15\"\r\n mat-header-cell\r\n *matHeaderCellDef\r\n style=\"min-width: 50px; max-width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"\r\n >\r\n <mat-checkbox\r\n *ngIf=\"!gridOption.selection?.single\"\r\n class=\"c-selection\"\r\n color=\"primary\"\r\n [(ngModel)]=\"isSelectAll\"\r\n (change)=\"onSelectAll()\"\r\n [disabled]=\"\r\n items | selectionDisableSelectAll: gridOption?.selection\r\n \"\r\n >\r\n </mat-checkbox>\r\n </th>\r\n <td\r\n class=\"text-center px-15\"\r\n mat-cell\r\n *matCellDef=\"let item\"\r\n style=\"min-width: 50px; max-width: 50px\"\r\n >\r\n <mat-checkbox\r\n class=\"c-selection\"\r\n color=\"primary\"\r\n [(ngModel)]=\"item.isSelected\"\r\n (change)=\"onSelect(item)\"\r\n [disabled]=\"\r\n selectedItems | selectionDisable: item:gridOption?.selection\r\n \"\r\n >\r\n </mat-checkbox>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"command\">\r\n <th\r\n class=\"px-8 py-8\"\r\n mat-header-cell\r\n *matHeaderCellDef\r\n style=\"width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"\r\n ></th>\r\n <td class=\"px-8\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-command\r\n [commands]=\"gridOption.commands\"\r\n [item]=\"item\"\r\n ></sd-desktop-command>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container\r\n *ngFor=\"let column of configuration.firstColumns; let i = index\"\r\n [matColumnDef]=\"column.field\"\r\n [sticky]=\"configuration.fixedColumn[column.field]\"\r\n >\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n cdkDrag\r\n class=\"px-8 py-8 c-th\"\r\n [ngStyle]=\"{ 'min-width': column.width }\"\r\n [attr.rowspan]=\"\r\n configuration.multipleHeader && column.type !== 'children-col'\r\n ? 2\r\n : 1\r\n \"\r\n [attr.colspan]=\"\r\n column.type === 'children-col' ? column.children?.length : 1\r\n \"\r\n >\r\n <div>\r\n <div\r\n aria-hidden=\"false\"\r\n role=\"presentation\"\r\n mat-sort-header\r\n [disabled]=\"\r\n !column.sortable || column.type === 'children-col'\r\n \"\r\n [innerHTML]=\"column.titleHtml || column.title\"\r\n ></div>\r\n <div\r\n class=\"c-inline-column\"\r\n *ngIf=\"gridOption.filter?.inlineColumn\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n inlineColumn;\r\n context: { column: column }\r\n \"\r\n ></ng-container>\r\n </div>\r\n </div>\r\n </th>\r\n <td class=\"c-td px-8\" mat-cell *matCellDef=\"let item\">\r\n <ng-container *ngIf=\"cellDef[column.field]\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n cellDef[column.field].templateRef;\r\n context: { item: item, column: column, idx: i }\r\n \"\r\n >\r\n </ng-container>\r\n </ng-container>\r\n <sd-desktop-cell-view\r\n *ngIf=\"!cellDef[column.field]\"\r\n [key]=\"key\"\r\n [column]=\"column\"\r\n [item]=\"item\"\r\n >\r\n </sd-desktop-cell-view>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef>\r\n <ng-container *ngIf=\"footerDef[column.field]\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n footerDef[column.field].templateRef;\r\n context: { items: items, column: column }\r\n \"\r\n >\r\n </ng-container>\r\n </ng-container>\r\n </td>\r\n </ng-container>\r\n <ng-container\r\n *ngFor=\"let column of configuration.secondColumns; let i = index\"\r\n [matColumnDef]=\"column.field\"\r\n >\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n mat-sort-header\r\n class=\"c-th px-8\"\r\n [ngStyle]=\"{ 'min-width': column.width }\"\r\n >\r\n <div>\r\n <div [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n <div *ngIf=\"gridOption.filter?.inlineColumn\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n inlineColumn;\r\n context: { column: column }\r\n \"\r\n ></ng-container>\r\n </div>\r\n </div>\r\n </th>\r\n <td class=\"c-td px-8\" mat-cell *matCellDef=\"let item\">\r\n <ng-container *ngIf=\"cellDef[column.field]\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n cellDef[column.field].templateRef;\r\n context: { item: item, column: column, idx: i }\r\n \"\r\n >\r\n </ng-container>\r\n </ng-container>\r\n <sd-desktop-cell-view\r\n *ngIf=\"!cellDef[column.field]\"\r\n [key]=\"key\"\r\n [column]=\"column\"\r\n [item]=\"item\"\r\n >\r\n </sd-desktop-cell-view>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef>\r\n <ng-container *ngIf=\"footerDef[column.field]\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n footerDef[column.field].templateRef;\r\n context: { items: items, column: column }\r\n \"\r\n >\r\n </ng-container>\r\n </ng-container>\r\n </td>\r\n </ng-container>\r\n <tr\r\n class=\"c-first-header\"\r\n mat-header-row\r\n *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\"\r\n ></tr>\r\n <ng-container *ngIf=\"configuration.secondHeaders?.length\">\r\n <tr\r\n class=\"c-second-header\"\r\n mat-header-row\r\n *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\"\r\n ></tr>\r\n </ng-container>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: configuration.displayedColumns\"\r\n matRipple\r\n class=\"c-row\"\r\n ></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: ['sdSubInformation']\"\r\n class=\"c-detail-row\"\r\n ></tr>\r\n <ng-container\r\n *ngIf=\"hasFooter && configuration.displayedFooters?.length\"\r\n >\r\n <tr\r\n mat-footer-row\r\n *matFooterRowDef=\"configuration.displayedFooters; sticky: true\"\r\n ></tr>\r\n </ng-container>\r\n </table>\r\n <ng-template #elseEmpty>\r\n <table mat-table [dataSource]=\"[{}]\">\r\n <ng-container matColumnDef=\"selection\" sticky>\r\n <th\r\n class=\"px-15\"\r\n mat-header-cell\r\n *matHeaderCellDef\r\n style=\"min-width: 50px; max-width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"\r\n ></th>\r\n </ng-container>\r\n <ng-container matColumnDef=\"command\">\r\n <th\r\n class=\"px-8\"\r\n mat-header-cell\r\n *matHeaderCellDef\r\n style=\"min-width: 50px; max-width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"\r\n ></th>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdSubInformationAction\">\r\n <th\r\n class=\"p-0\"\r\n mat-header-cell\r\n *matHeaderCellDef\r\n style=\"width: 1px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"\r\n ></th>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdEmpty\">\r\n <td\r\n class=\"c-empty\"\r\n mat-cell\r\n *matCellDef=\"let item\"\r\n [attr.colspan]=\"configuration.displayedColumns.length\"\r\n >\r\n <ng-container\r\n *ngIf=\"sdEmptyData?.templateRef; else sdEmptyDataNoRef\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n sdEmptyData.templateRef;\r\n context: { item: item }\r\n \"\r\n >\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #sdEmptyDataNoRef>\r\n <mat-icon fontSet=\"material-icons-outlined\"\r\n >leaderboard</mat-icon\r\n >\r\n </ng-template>\r\n </td>\r\n </ng-container>\r\n <ng-container\r\n *ngFor=\"let column of configuration.columns\"\r\n [matColumnDef]=\"column.field\"\r\n [sticky]=\"configuration.fixedColumn[column.field]\"\r\n >\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n class=\"c-th px-8 py-8\"\r\n [ngStyle]=\"{ 'min-width': column.width }\"\r\n >\r\n <div [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n </th>\r\n </ng-container>\r\n <ng-container\r\n *ngFor=\"let column of configuration.firstColumns\"\r\n [matColumnDef]=\"column.field\"\r\n [sticky]=\"configuration.fixedColumn[column.field]\"\r\n >\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n class=\"c-th px-8 py-8\"\r\n [ngStyle]=\"{ 'min-width': column.width }\"\r\n [attr.rowspan]=\"\r\n configuration.multipleHeader &&\r\n column.type !== 'children-col'\r\n ? 2\r\n : 1\r\n \"\r\n [attr.colspan]=\"\r\n column.type === 'children-col' ? column.children?.length : 1\r\n \"\r\n >\r\n <div>\r\n <div [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n <div *ngIf=\"gridOption.filter?.inlineColumn\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n inlineColumn;\r\n context: { column: column }\r\n \"\r\n ></ng-container>\r\n </div>\r\n </div>\r\n </th>\r\n </ng-container>\r\n <ng-container\r\n *ngFor=\"let column of configuration.secondColumns\"\r\n [matColumnDef]=\"column.field\"\r\n >\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n class=\"c-th px-8 py-8\"\r\n [ngStyle]=\"{ 'min-width': column.width }\"\r\n >\r\n <div>\r\n <div [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n <div *ngIf=\"gridOption.filter?.inlineColumn\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n inlineColumn;\r\n context: { column: column }\r\n \"\r\n ></ng-container>\r\n </div>\r\n </div>\r\n </th>\r\n </ng-container>\r\n <tr\r\n class=\"c-first-header\"\r\n mat-header-row\r\n *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\"\r\n ></tr>\r\n <tr\r\n class=\"c-second-header\"\r\n mat-header-row\r\n *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\"\r\n ></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: ['sdEmpty']\"></tr>\r\n </table>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n <div class=\"c-paginator\">\r\n <div class=\"c-action\">\r\n <sd-button\r\n *ngIf=\"\r\n !gridOption.filter?.disabled && !gridOption.filter?.inlineColumn\r\n \"\r\n class=\"mr-10\"\r\n [title]=\"'Filter' | sdTranslate\"\r\n icon=\"filter_alt\"\r\n size=\"sm\"\r\n (action)=\"gridFilter.open()\"\r\n type=\"link\"\r\n >\r\n </sd-button>\r\n <sd-button\r\n *ngIf=\"gridOption.reload?.visible\"\r\n class=\"mr-10\"\r\n [title]=\"'Reload' | sdTranslate\"\r\n icon=\"refresh\"\r\n size=\"sm\"\r\n (action)=\"reload()\"\r\n [disabled]=\"!items?.length\"\r\n type=\"link\"\r\n >\r\n </sd-button>\r\n <ng-container *ngIf=\"gridOption.export?.visible && items?.length\">\r\n <ng-container *ngIf=\"isExporting; else unExporting\">\r\n <sd-button\r\n class=\"mr-10\"\r\n [loading]=\"isExporting\"\r\n [title]=\"exportTitle | sdTranslate\"\r\n icon=\"get_app\"\r\n size=\"sm\"\r\n type=\"link\"\r\n >\r\n </sd-button>\r\n </ng-container>\r\n <ng-template #unExporting>\r\n <sd-button\r\n class=\"mr-10\"\r\n [title]=\"exportTitle | sdTranslate\"\r\n icon=\"get_app\"\r\n size=\"sm\"\r\n [matMenuTriggerFor]=\"menu\"\r\n type=\"link\"\r\n >\r\n </sd-button>\r\n </ng-template>\r\n\r\n <mat-menu #menu=\"matMenu\">\r\n <button\r\n *ngIf=\"gridOption.export?.visibleExcel !== false\"\r\n mat-menu-item\r\n (click)=\"sdPopupExport.exportDefault()\"\r\n type=\"button\"\r\n >\r\n <mat-icon fontSet=\"material-icons-outlined\"\r\n >file_download</mat-icon\r\n >\r\n <span> {{ \"Export excel\" | sdTranslate }}</span>\r\n </button>\r\n <button\r\n *ngIf=\"gridOption.export?.visibleCSV !== false\"\r\n mat-menu-item\r\n (click)=\"sdPopupExport.exportDefault(true)\"\r\n type=\"button\"\r\n >\r\n <mat-icon fontSet=\"material-icons-outlined\"\r\n >file_download</mat-icon\r\n >\r\n <span> {{ \"Export CSV\" | sdTranslate }}</span>\r\n </button>\r\n <button\r\n *ngIf=\"gridOption.export?.key\"\r\n mat-menu-item\r\n (click)=\"sdPopupExport.open()\"\r\n type=\"button\"\r\n >\r\n <mat-icon fontSet=\"material-icons-outlined\">settings</mat-icon>\r\n <span> {{ \"Configure\" | sdTranslate }}</span>\r\n </button>\r\n </mat-menu>\r\n </ng-container>\r\n <sd-button\r\n *ngIf=\"gridOption.config?.visible\"\r\n class=\"mr-10\"\r\n [title]=\"'Configure' | sdTranslate\"\r\n icon=\"settings\"\r\n size=\"sm\"\r\n (action)=\"popupGridConfiguration.open()\"\r\n type=\"link\"\r\n >\r\n </sd-button>\r\n </div>\r\n <mat-paginator\r\n [class.d-none]=\"gridOption.paginate?.hidden\"\r\n [length]=\"total\"\r\n [pageSize]=\"gridOption.paginate?.pageSize\"\r\n [pageSizeOptions]=\"gridOption.paginate?.pages\"\r\n [showFirstLastButtons]=\"gridOption.paginate?.showFirstLastButtons\"\r\n ></mat-paginator>\r\n </div>\r\n </div>\r\n <sd-popup-export\r\n *ngIf=\"gridOption.export?.visible\"\r\n [gridOption]=\"gridOption\"\r\n (export)=\"onExport($event)\"\r\n #sdPopupExport\r\n >\r\n </sd-popup-export>\r\n <sd-popup-grid-configuration\r\n [gridOption]=\"gridOption\"\r\n [key]=\"key\"\r\n #popupGridConfiguration\r\n >\r\n </sd-popup-grid-configuration>\r\n </ng-container>\r\n</ng-container>\r\n<ng-template #inlineColumn let-column=\"column\">\r\n <ng-container\r\n *ngIf=\"\r\n column.type === 'string' ||\r\n column.type === 'number' ||\r\n column.type === 'bool' ||\r\n column.type === 'values' ||\r\n column.type === 'date' ||\r\n column.type === 'datetime' ||\r\n column.type === 'time';\r\n else noFilter\r\n \"\r\n >\r\n <sd-input\r\n *ngIf=\"column.type === 'string'\"\r\n size=\"sm\"\r\n type=\"text\"\r\n [(model)]=\"columnFilter[column.field]\"\r\n (keyupEnter)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\"\r\n >\r\n </sd-input>\r\n <sd-input\r\n *ngIf=\"column.type === 'number'\"\r\n size=\"sm\"\r\n type=\"number\"\r\n [(model)]=\"columnFilter[column.field]\"\r\n (keyupEnter)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\"\r\n >\r\n </sd-input>\r\n <sd-select\r\n *ngIf=\"column.type === 'bool'\"\r\n size=\"sm\"\r\n [items]=\"[\r\n { value: '1', display: column.option?.displayOnTrue || 'True' },\r\n { value: '0', display: column.option?.displayOnFalse || 'False' }\r\n ]\"\r\n valueField=\"value\"\r\n displayField=\"display\"\r\n [(model)]=\"columnFilter[column.field]\"\r\n (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\"\r\n >\r\n </sd-select>\r\n <sd-select\r\n *ngIf=\"\r\n column.type === 'values' && column?.option?.selection !== 'AUTOCOMPLETE'\r\n \"\r\n size=\"sm\"\r\n [items]=\"column.option.items\"\r\n [valueField]=\"column.option.valueField\"\r\n [displayField]=\"column.option.displayField\"\r\n [(model)]=\"columnFilter[column.field]\"\r\n (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\"\r\n [multiple]=\"\r\n column?.option?.selection === 'MULTIPLE' ||\r\n column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\r\n \"\r\n [filtered]=\"column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\"\r\n >\r\n </sd-select>\r\n <sd-autocomplete\r\n *ngIf=\"\r\n column.type === 'values' && column?.option?.selection === 'AUTOCOMPLETE'\r\n \"\r\n size=\"sm\"\r\n [items]=\"column.option.items\"\r\n [valueField]=\"column.option.valueField\"\r\n [displayField]=\"column.option.displayField\"\r\n [(model)]=\"columnFilter[column.field]\"\r\n (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\"\r\n >\r\n </sd-autocomplete>\r\n <sd-date-time\r\n *ngIf=\"\r\n column.type === 'date' ||\r\n column.type === 'datetime' ||\r\n column.type === 'time'\r\n \"\r\n size=\"sm\"\r\n [(model)]=\"columnFilter[column.field]\"\r\n [type]=\"column.type\"\r\n (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\"\r\n >\r\n </sd-date-time>\r\n </ng-container>\r\n <ng-template #noFilter>\r\n <sd-input type=\"text\" disabled> </sd-input>\r\n </ng-template>\r\n</ng-template>\r\n\r\n<sd-quick-action\r\n *ngIf=\"\r\n selectedItems\r\n | selectionActionFilter: gridOption?.selection?.actions as actions\r\n \"\r\n [isOpened]=\"actions?.length\"\r\n>\r\n <div sdMessage>\r\n <strong class=\"text-info\">{{ selectedItems.length }}</strong>\r\n {{ gridOption?.selection?.message || (\"selected rows\" | sdTranslate) }}\r\n </div>\r\n <div class=\"d-flex align-items-center\" sdAction>\r\n <ng-container *ngFor=\"let action of actions\">\r\n <sd-button\r\n *ngIf=\"action.click\"\r\n class=\"ml-5\"\r\n [tooltip]=\"action.tooltip\"\r\n [icon]=\"action.icon\"\r\n [color]=\"action.color || 'secondary'\"\r\n [type]=\"action.type || 'light'\"\r\n [fontSet]=\"action.fontSet\"\r\n [title]=\"action.title\"\r\n size=\"sm\"\r\n (action)=\"action.click(selectedItems)\"\r\n ></sd-button>\r\n <ng-container *ngIf=\"action.children?.length\">\r\n <sd-button\r\n class=\"ml-5\"\r\n [tooltip]=\"action.tooltip\"\r\n [icon]=\"action.icon || 'more_vert'\"\r\n [color]=\"action.color || 'secondary'\"\r\n [type]=\"action.type || 'light'\"\r\n [fontSet]=\"action.fontSet\"\r\n [title]=\"action.title\"\r\n size=\"sm\"\r\n [matMenuTriggerFor]=\"menu\"\r\n >\r\n </sd-button>\r\n <mat-menu #menu=\"matMenu\">\r\n <span>\r\n <button\r\n *ngFor=\"let childAction of action.children\"\r\n mat-menu-item\r\n (click)=\"childAction.click(selectedItems)\"\r\n [disabled]=\"childAction.disabled\"\r\n >\r\n <mat-icon [fontSet]=\"childAction.fontSet\" class=\"c-icon\"\r\n >{{ childAction.icon }}\r\n </mat-icon>\r\n <span> {{ childAction.title }}</span>\r\n </button>\r\n </span>\r\n </mat-menu>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</sd-quick-action>\r\n",
|
|
2433
2433
|
animations: [
|
|
2434
2434
|
animations.trigger('detailExpand', [
|
|
2435
2435
|
animations.state('collapsed', animations.style({ height: '0', minHeight: '0', visibility: 'hidden' })),
|
|
@@ -2437,7 +2437,7 @@
|
|
|
2437
2437
|
animations.transition('expanded <=> collapsed', animations.animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
|
|
2438
2438
|
]),
|
|
2439
2439
|
],
|
|
2440
|
-
styles: [":host{height:100
|
|
2440
|
+
styles: [":host{display:flex;flex-direction:column;height:100%;overflow:auto}:host .c-container{display:flex;flex:1;flex-direction:column;min-height:200px;position:relative}:host .c-container .c-table{flex:1;min-height:300px;overflow:auto;position:relative}:host .c-container .c-table table{border-collapse:separate;width:100%}:host .c-container .c-table table tr.c-first-header.mat-header-row,:host .c-container .c-table table tr.c-second-header.mat-header-row{height:40px}:host .c-container .c-table table tr.c-detail-row{height:0}:host .c-container .c-table table tr.c-row td{border-bottom-width:0}:host .c-container .c-table table tr.c-row.c-expandable{cursor:pointer}:host .c-container .c-table table tr.c-row.c-expandable:hover{background:#f5f5f5}:host .c-container .c-table table th.mat-header-cell{background-color:#f2f3f4;border-bottom:0!important}:host .c-container .c-table table td.mat-cell,:host .c-container .c-table table td.mat-footer-cell,:host .c-container .c-table table th.mat-header-cell{border-bottom-color:#f2f2f2!important}:host .c-container .c-table .c-th{color:#212121;font-size:14px;font-weight:500;line-height:20px;vertical-align:middle}:host .c-container .c-table .c-td:first{padding-left:10px}:host .c-container .c-loading{align-items:center;background:rgba(0,0,0,.15);bottom:56px;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:2}:host .c-container .c-paginator{align-items:center;background-color:#fff;display:flex;flex-direction:row;justify-content:space-between}:host .c-container .c-paginator .c-action{padding:5px}:host .c-container .c-empty{background-color:#fff;border:none!important;text-align:center}:host .c-container .c-empty mat-icon{font-size:150px;height:auto;margin-bottom:30px;margin-top:30px;opacity:.2;width:auto}:host mat-icon.c-icon{color:rgba(0,0,0,.54)!important}:host .lds-ring{display:inline-block;height:40px;position:relative;width:40px}:host .lds-ring div{-webkit-animation:lds-ring 1.2s cubic-bezier(.5,0,.5,1) infinite;animation:lds-ring 1.2s cubic-bezier(.5,0,.5,1) infinite;border:4px solid transparent;border-radius:50%;border-top-color:#cef;box-sizing:border-box;display:block;height:32px;margin:4px;position:absolute;width:32px}:host .lds-ring div:first-child{-webkit-animation-delay:-.45s;animation-delay:-.45s}:host .lds-ring div:nth-child(2){-webkit-animation-delay:-.3s;animation-delay:-.3s}:host .lds-ring div:nth-child(3){-webkit-animation-delay:-.15s;animation-delay:-.15s}:host .style1 .mat-table{border:1px solid #dde0e5}:host .style1 .mat-table tr.mat-header-row{background:#f2f3f4}:host .style1 .mat-table th.mat-header-cell{padding:10px 0}:host .style1 .c-paginator{border:1px solid #dde0e5;border-top:none!important}:host .style1 .mat-form-field-wrapper{background:#fff;padding:0}@-webkit-keyframes lds-ring{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes lds-ring{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}:host ::ng-deep .mat-sort-header-content{display:block;text-align:left;width:100%}:host ::ng-deep .mat-select-arrow{color:#a6a6a6}:host ::ng-deep .mat-sort-header-disabled{background-image:none!important;cursor:default!important;padding-right:12px!important}:host ::ng-deep .mat-sort-header-container{align-items:start!important}:host ::ng-deep .mat-sort-header-arrow{margin-top:4px!important}:host ::ng-deep .mat-sort-header{cursor:pointer}:host ::ng-deep .mat-sort-header[aria-sort]{background-position:center right 0;background-repeat:no-repeat;background-size:16px 16px;cursor:pointer;padding-right:24px}:host ::ng-deep .mat-sort-header[aria-sort=none]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath fill='%237A7A7A' d='M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z'/%3E%3C/svg%3E\")}:host ::ng-deep .mat-sort-header[aria-sort=ascending]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath fill='%237A7A7A' d='M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z'/%3E%3C/svg%3E\")}:host ::ng-deep .mat-sort-header[aria-sort=descending]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath fill='%237A7A7A' d='M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z'/%3E%3C/svg%3E\")}.c-inline-column ::ng-deep .mat-form-field-wrapper{background-color:#fff;border-radius:8px;margin:8px 0 0!important;padding:0!important}"]
|
|
2441
2441
|
},] }
|
|
2442
2442
|
];
|
|
2443
2443
|
SdGridMaterial.ctorParameters = function () { return [
|