tango-app-ui-shared 3.0.19-dev → 3.0.21-dev
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/esm2022/lib/modules/common/filters/filters.component.mjs +37 -45
- package/esm2022/lib/modules/layout/toolbar/classic/classic.component.mjs +33 -14
- package/esm2022/lib/modules/layout/toolbar/client-settings/client-settings.component.mjs +12 -7
- package/esm2022/lib/modules/layout/toolbar/date-single-select/date-single-select.component.mjs +5 -4
- package/esm2022/lib/modules/layout/toolbar/single-store/single-store.component.mjs +2 -7
- package/fesm2022/tango-app-ui-shared.mjs +84 -72
- package/fesm2022/tango-app-ui-shared.mjs.map +1 -1
- package/lib/modules/common/filters/filters.component.d.ts +9 -5
- package/lib/modules/layout/toolbar/date-single-select/date-single-select.component.d.ts +1 -1
- package/lib/modules/layout/toolbar/single-store/single-store.component.d.ts +2 -2
- package/package.json +1 -1
|
@@ -1695,18 +1695,34 @@ class ClassicComponent {
|
|
|
1695
1695
|
this.getClientList = res?.data?.result;
|
|
1696
1696
|
if ("header-filters" in localStorage) {
|
|
1697
1697
|
const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
|
|
1698
|
-
|
|
1699
|
-
|
|
1700
|
-
|
|
1701
|
-
|
|
1702
|
-
|
|
1703
|
-
|
|
1704
|
-
|
|
1705
|
-
|
|
1706
|
-
|
|
1707
|
-
|
|
1708
|
-
|
|
1709
|
-
|
|
1698
|
+
if (headerFilters.clients.length > 0 && headerFilters.date?.startDate) {
|
|
1699
|
+
this.dataObject[0].Issues = this.getClientList;
|
|
1700
|
+
this.toggleCheckbox("Select All", 0);
|
|
1701
|
+
this.dummyArray = JSON.parse(JSON.stringify(this.dataObject));
|
|
1702
|
+
this.responseArray = JSON.parse(JSON.stringify(this.dataObject));
|
|
1703
|
+
const currentIssues = this.dummyArray[0].Issues.map((item) => item.clientId);
|
|
1704
|
+
this.selectedFilters.clients = currentIssues;
|
|
1705
|
+
this.selectedFilters.client = headerFilters.client;
|
|
1706
|
+
this.selectedFilters.date = headerFilters.date;
|
|
1707
|
+
this.selectedDateRange.startDate = headerFilters.date.startDate;
|
|
1708
|
+
this.selectedDateRange.endDate = headerFilters.date.endDate;
|
|
1709
|
+
this.globalService.dataRangeValue.next(this.selectedFilters);
|
|
1710
|
+
// this.cd.detectChanges();
|
|
1711
|
+
}
|
|
1712
|
+
else {
|
|
1713
|
+
this.dataObject[0].Issues = this.getClientList;
|
|
1714
|
+
this.toggleCheckbox("Select All", 0);
|
|
1715
|
+
this.dummyArray = JSON.parse(JSON.stringify(this.dataObject));
|
|
1716
|
+
this.responseArray = JSON.parse(JSON.stringify(this.dataObject));
|
|
1717
|
+
this.selectedDateRange.startDate = this.dayjs().format("YYYY-MM-DD");
|
|
1718
|
+
this.selectedDateRange.endDate = this.dayjs().format("YYYY-MM-DD");
|
|
1719
|
+
const currentIssues = this.dummyArray[0].Issues.map((item) => item.clientId);
|
|
1720
|
+
this.selectedFilters.clients = currentIssues;
|
|
1721
|
+
this.selectedFilters.date = this.selectedDateRange;
|
|
1722
|
+
localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
|
|
1723
|
+
this.globalService.dataRangeValue.next(this.selectedFilters);
|
|
1724
|
+
console.log(this.selectedFilters);
|
|
1725
|
+
}
|
|
1710
1726
|
}
|
|
1711
1727
|
else {
|
|
1712
1728
|
this.dataObject[0].Issues = this.getClientList;
|
|
@@ -1719,6 +1735,8 @@ class ClassicComponent {
|
|
|
1719
1735
|
this.selectedFilters.clients = currentIssues;
|
|
1720
1736
|
this.selectedFilters.date = this.selectedDateRange;
|
|
1721
1737
|
localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
|
|
1738
|
+
this.globalService.dataRangeValue.next(this.selectedFilters);
|
|
1739
|
+
console.log(this.selectedFilters);
|
|
1722
1740
|
this.cd.detectChanges();
|
|
1723
1741
|
}
|
|
1724
1742
|
},
|
|
@@ -1843,7 +1861,6 @@ class ClassicComponent {
|
|
|
1843
1861
|
});
|
|
1844
1862
|
}
|
|
1845
1863
|
}
|
|
1846
|
-
this.globalService.dataRangeValue.next(this.selectedFilters);
|
|
1847
1864
|
this.Opendropdown = false;
|
|
1848
1865
|
this.selectedValuesArray.forEach((item, index) => {
|
|
1849
1866
|
item = item.map((ele) => ele.clientId);
|
|
@@ -1857,6 +1874,8 @@ class ClassicComponent {
|
|
|
1857
1874
|
this.selectedFilters.clients = this.responseArray[0].Issues;
|
|
1858
1875
|
this.selectedFilters.date = this.selectedDateRange;
|
|
1859
1876
|
localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
|
|
1877
|
+
this.globalService.dataRangeValue.next(this.selectedFilters);
|
|
1878
|
+
this.cd.detectChanges();
|
|
1860
1879
|
}
|
|
1861
1880
|
ranges = {
|
|
1862
1881
|
"Today": [this.dayjs(), this.dayjs()],
|
|
@@ -2084,27 +2103,32 @@ class ClientSettingsComponent {
|
|
|
2084
2103
|
}
|
|
2085
2104
|
else {
|
|
2086
2105
|
this.selectedClient = this.clientList[0];
|
|
2087
|
-
this.selectedFilters.client =
|
|
2088
|
-
|
|
2106
|
+
this.selectedFilters.client = headerFilters.client;
|
|
2107
|
+
localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
|
|
2108
|
+
this.gs.dataRangeValue.next(this.selectedFilters);
|
|
2089
2109
|
this.cd.detectChanges();
|
|
2090
2110
|
}
|
|
2091
|
-
this.selectedFilters.client = headerFilters.client;
|
|
2092
|
-
this.gs.dataRangeValue.next(this.selectedFilters);
|
|
2093
|
-
this.cd.detectChanges();
|
|
2094
2111
|
}
|
|
2095
2112
|
else {
|
|
2096
2113
|
this.selectedClient = this.clientList[0];
|
|
2097
2114
|
this.selectedFilters.client = this.selectedClient.clientId;
|
|
2115
|
+
localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
|
|
2098
2116
|
this.gs.dataRangeValue.next(this.selectedFilters);
|
|
2099
2117
|
this.cd.detectChanges();
|
|
2100
2118
|
}
|
|
2101
2119
|
}
|
|
2120
|
+
else {
|
|
2121
|
+
this.selectedClient = this.clientList[0];
|
|
2122
|
+
this.selectedFilters.client = this.selectedClient.clientId;
|
|
2123
|
+
localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
|
|
2124
|
+
this.gs.dataRangeValue.next(this.selectedFilters);
|
|
2125
|
+
this.cd.detectChanges();
|
|
2126
|
+
}
|
|
2102
2127
|
},
|
|
2103
2128
|
});
|
|
2104
2129
|
}
|
|
2105
2130
|
onClientSelect(event) {
|
|
2106
2131
|
this.selectedClient = event;
|
|
2107
|
-
this.gs.selectedClient.next(this.selectedClient);
|
|
2108
2132
|
const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
|
|
2109
2133
|
this.selectedFilters = headerFilters;
|
|
2110
2134
|
this.selectedFilters.client = this.selectedClient.clientId;
|
|
@@ -2232,6 +2256,7 @@ class DateSingleSelectComponent {
|
|
|
2232
2256
|
this.auth.getClients().subscribe({
|
|
2233
2257
|
next: (e) => {
|
|
2234
2258
|
if (e) {
|
|
2259
|
+
// debugger
|
|
2235
2260
|
this.clientList = e.data.result;
|
|
2236
2261
|
const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
|
|
2237
2262
|
this.cd.detectChanges();
|
|
@@ -2244,8 +2269,8 @@ class DateSingleSelectComponent {
|
|
|
2244
2269
|
this.selectedFilters.client = headerFilters.client;
|
|
2245
2270
|
this.selectedFilters.clients = [headerFilters.clients];
|
|
2246
2271
|
this.selectedFilters.date = headerFilters.date;
|
|
2247
|
-
this.selectedDateRange.startDate =
|
|
2248
|
-
this.selectedDateRange.endDate =
|
|
2272
|
+
this.selectedDateRange.startDate = this.selectedFilters.date.startDate;
|
|
2273
|
+
this.selectedDateRange.endDate = this.selectedFilters.date.endDate;
|
|
2249
2274
|
this.gs.dataRangeValue.next(this.selectedFilters);
|
|
2250
2275
|
this.cd.detectChanges();
|
|
2251
2276
|
}
|
|
@@ -2255,6 +2280,7 @@ class DateSingleSelectComponent {
|
|
|
2255
2280
|
this.dayjs().format("YYYY-MM-DD");
|
|
2256
2281
|
this.selectedDateRange.endDate = this.dayjs().format("YYYY-MM-DD");
|
|
2257
2282
|
this.selectedFilters.client = this.selectedClient.clientId;
|
|
2283
|
+
localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
|
|
2258
2284
|
this.gs.dataRangeValue.next(this.selectedFilters);
|
|
2259
2285
|
this.cd.detectChanges();
|
|
2260
2286
|
}
|
|
@@ -2265,7 +2291,6 @@ class DateSingleSelectComponent {
|
|
|
2265
2291
|
ngOnInit() { }
|
|
2266
2292
|
onClientSelect(event) {
|
|
2267
2293
|
this.selectedClient = event;
|
|
2268
|
-
this.gs.selectedClient.next(this.selectedClient);
|
|
2269
2294
|
}
|
|
2270
2295
|
ranges = {
|
|
2271
2296
|
Today: [this.dayjs(), this.dayjs()],
|
|
@@ -2366,11 +2391,8 @@ class SingleStoreComponent {
|
|
|
2366
2391
|
this.storeList.find((obj) => {
|
|
2367
2392
|
if (obj.storeId === headerFilters.store) {
|
|
2368
2393
|
this.selectedClient = obj;
|
|
2369
|
-
console.log("1111111111111");
|
|
2370
|
-
// this.gs.dataRangeValue.next(this.selectedFilters);
|
|
2371
2394
|
}
|
|
2372
2395
|
});
|
|
2373
|
-
// console.log("222222222222222");
|
|
2374
2396
|
this.selectedFilters.store = headerFilters.store;
|
|
2375
2397
|
this.selectedFilters.client = headerFilters.client;
|
|
2376
2398
|
this.selectedFilters.clients = [headerFilters.clients];
|
|
@@ -2386,7 +2408,7 @@ class SingleStoreComponent {
|
|
|
2386
2408
|
this.selectedDateRange.startDate = this.dayjs().format('YYYY-MM-DD');
|
|
2387
2409
|
this.selectedDateRange.endDate = this.dayjs().format('YYYY-MM-DD');
|
|
2388
2410
|
this.selectedFilters.date = this.selectedDateRange;
|
|
2389
|
-
|
|
2411
|
+
localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
|
|
2390
2412
|
this.gs.dataRangeValue.next(this.selectedFilters);
|
|
2391
2413
|
this.cd.detectChanges();
|
|
2392
2414
|
}
|
|
@@ -2397,7 +2419,6 @@ class SingleStoreComponent {
|
|
|
2397
2419
|
}
|
|
2398
2420
|
onClientSelect(event) {
|
|
2399
2421
|
this.selectedClient = event;
|
|
2400
|
-
// this.gs.selectedClient.next(this.selectedClient)
|
|
2401
2422
|
}
|
|
2402
2423
|
ranges = {
|
|
2403
2424
|
'Today': [this.dayjs(), this.dayjs()],
|
|
@@ -2438,7 +2459,6 @@ class SingleStoreComponent {
|
|
|
2438
2459
|
this.selectedFilters = headerFilters;
|
|
2439
2460
|
this.selectedFilters.store = this.selectedClient.storeId;
|
|
2440
2461
|
this.selectedFilters.date = this.selectedDateRange;
|
|
2441
|
-
console.log("4444444444444444");
|
|
2442
2462
|
this.gs.dataRangeValue.next(this.selectedFilters);
|
|
2443
2463
|
localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
|
|
2444
2464
|
}
|
|
@@ -3363,18 +3383,19 @@ class FiltersComponent {
|
|
|
3363
3383
|
dataObject = [];
|
|
3364
3384
|
appliedFilters = new EventEmitter();
|
|
3365
3385
|
Opendropdown = false;
|
|
3366
|
-
permission = [
|
|
3367
|
-
{ group: 'Super Admin', description: 'Lorem ipsum dolor sit amet, consectetur ' },
|
|
3368
|
-
{ group: 'Admin', description: 'Lorem ipsum dolor sit amet, consectetur ' },
|
|
3369
|
-
{ group: 'User', description: 'Lorem ipsum dolor sit amet, consectetur ' },
|
|
3370
|
-
];
|
|
3371
3386
|
showdropdown;
|
|
3372
3387
|
selectedValues = [];
|
|
3388
|
+
searchTerms = [];
|
|
3373
3389
|
selectedValuesArray = [];
|
|
3374
3390
|
searchValue;
|
|
3391
|
+
selectedItem;
|
|
3392
|
+
dropDown = false;
|
|
3375
3393
|
dummyArray = [];
|
|
3376
3394
|
noFilter = false;
|
|
3377
3395
|
responseArray = [];
|
|
3396
|
+
productModule;
|
|
3397
|
+
product;
|
|
3398
|
+
selectedProductCount;
|
|
3378
3399
|
constructor(elementRef, renderer, router) {
|
|
3379
3400
|
this.elementRef = elementRef;
|
|
3380
3401
|
this.renderer = renderer;
|
|
@@ -3395,6 +3416,18 @@ class FiltersComponent {
|
|
|
3395
3416
|
this.dummyArray = JSON.parse(JSON.stringify(this.dataObject));
|
|
3396
3417
|
this.responseArray = JSON.parse(JSON.stringify(this.dataObject));
|
|
3397
3418
|
}
|
|
3419
|
+
selectItem(event, index, subIndex) {
|
|
3420
|
+
this.selectedValuesArray[index] = this.dataObject[index].Issues[subIndex];
|
|
3421
|
+
}
|
|
3422
|
+
openDropdown(event, index) {
|
|
3423
|
+
event.stopPropagation();
|
|
3424
|
+
this.dataObject.forEach((item, i) => {
|
|
3425
|
+
if (i !== index) {
|
|
3426
|
+
item.isOpen = false; // Close other dropdowns
|
|
3427
|
+
}
|
|
3428
|
+
});
|
|
3429
|
+
this.dataObject[index].isOpen = !this.dataObject[index].isOpen;
|
|
3430
|
+
}
|
|
3398
3431
|
opendropdown(e) {
|
|
3399
3432
|
console.log(687);
|
|
3400
3433
|
e.stopPropagation();
|
|
@@ -3408,42 +3441,34 @@ class FiltersComponent {
|
|
|
3408
3441
|
}
|
|
3409
3442
|
});
|
|
3410
3443
|
this.dataObject[index].isOpen = !this.dataObject[index].isOpen;
|
|
3411
|
-
// if (this.dataObject[index].isOpen) {
|
|
3412
|
-
// document.addEventListener('click', this.clickOutsideDropdownContent.bind(this, index));
|
|
3413
|
-
// } else {
|
|
3414
|
-
// document.removeEventListener('click', this.clickOutsideDropdownContent.bind(this, index));
|
|
3415
|
-
// }
|
|
3416
3444
|
}
|
|
3417
|
-
|
|
3418
|
-
// if (!this.elementRef.nativeElement.contains(event.target as Node)) {
|
|
3419
|
-
// this.dataObject[index].isOpen = false;
|
|
3420
|
-
// document.removeEventListener('click', this.clickOutsideDropdownContent.bind(this, index));
|
|
3421
|
-
// }
|
|
3422
|
-
// }
|
|
3423
|
-
toggleCheckbox(issue, index) {
|
|
3445
|
+
toggleCheckbox(event, issue, index, subIndex) {
|
|
3424
3446
|
const currentIssues = this.dataObject[index].Issues;
|
|
3425
3447
|
this.selectedValuesArray[index] = this.selectedValuesArray[index] || [];
|
|
3426
3448
|
const selectedValues = this.selectedValuesArray[index]; // Retrieve selected values array for the current dropdown index
|
|
3449
|
+
console.log('selectedValues', selectedValues);
|
|
3427
3450
|
if (issue === 'Select All') {
|
|
3428
|
-
const
|
|
3429
|
-
|
|
3430
|
-
|
|
3431
|
-
|
|
3451
|
+
const checkedState = event.target.checked;
|
|
3452
|
+
this.dataObject[index].Issues.forEach((item) => {
|
|
3453
|
+
item.checked = checkedState;
|
|
3454
|
+
});
|
|
3455
|
+
if (checkedState) {
|
|
3456
|
+
this.selectedValuesArray[index] = currentIssues.slice(); // Copy all items
|
|
3432
3457
|
}
|
|
3433
3458
|
else {
|
|
3434
|
-
//
|
|
3435
|
-
this.selectedValuesArray[index] = [...currentIssues];
|
|
3459
|
+
this.selectedValuesArray[index] = []; // Deselect all items
|
|
3436
3460
|
}
|
|
3437
3461
|
}
|
|
3438
3462
|
else {
|
|
3439
|
-
|
|
3440
|
-
|
|
3463
|
+
this.dataObject[index].Issues[subIndex].checked = event.target.checked;
|
|
3464
|
+
let checkedData = this.dataObject[index].Issues[subIndex];
|
|
3465
|
+
if (this.dataObject[index].Issues[subIndex].checked) {
|
|
3466
|
+
this.selectedValuesArray[index].push(checkedData);
|
|
3441
3467
|
}
|
|
3442
3468
|
else {
|
|
3443
|
-
this.selectedValuesArray[index].
|
|
3469
|
+
this.selectedValuesArray[index] = this.selectedValuesArray[index].filter((el) => el?.checked === true);
|
|
3444
3470
|
}
|
|
3445
3471
|
}
|
|
3446
|
-
// Update "Select All" checkbox status based on selected values
|
|
3447
3472
|
const selectAllId = `selectall${index}`;
|
|
3448
3473
|
const selectAllElement = document.getElementById(selectAllId);
|
|
3449
3474
|
if (selectAllElement) {
|
|
@@ -3464,7 +3489,8 @@ class FiltersComponent {
|
|
|
3464
3489
|
this.Opendropdown = false;
|
|
3465
3490
|
}
|
|
3466
3491
|
searchData(event, i) {
|
|
3467
|
-
const
|
|
3492
|
+
const searchTerm = event.target.value.trim(); // Trim whitespace
|
|
3493
|
+
const filteredIssues = this.dummyArray[i].Issues.filter((item) => new RegExp(searchTerm, 'i').test(item.text));
|
|
3468
3494
|
this.dataObject[i].Issues = filteredIssues;
|
|
3469
3495
|
if (filteredIssues.length) {
|
|
3470
3496
|
this.noFilter = false;
|
|
@@ -3474,32 +3500,18 @@ class FiltersComponent {
|
|
|
3474
3500
|
}
|
|
3475
3501
|
}
|
|
3476
3502
|
Apply() {
|
|
3477
|
-
for (let i = 0; i < this.selectedValuesArray.length; i++) {
|
|
3478
|
-
const selectedValues = this.selectedValuesArray[i];
|
|
3479
|
-
const issues = this.dataObject[i].Issues;
|
|
3480
|
-
if (selectedValues) {
|
|
3481
|
-
this.selectedValuesArray[i] = selectedValues.map((selectedId) => {
|
|
3482
|
-
const issue = issues.find((issueItem) => issueItem.text === selectedId);
|
|
3483
|
-
return issue ? issue : ''; // Get the text corresponding to the id
|
|
3484
|
-
});
|
|
3485
|
-
}
|
|
3486
|
-
}
|
|
3487
3503
|
this.Opendropdown = false;
|
|
3488
|
-
this.selectedValuesArray.forEach((item, index) => {
|
|
3489
|
-
item = item.map((ele) => ele.id);
|
|
3490
|
-
this.selectedValuesArray[index] = item;
|
|
3491
|
-
});
|
|
3492
3504
|
this.responseArray.forEach((item, index) => {
|
|
3493
3505
|
item.Issues = this.selectedValuesArray[index] ? this.selectedValuesArray[index] : [];
|
|
3494
3506
|
});
|
|
3495
3507
|
this.appliedFilters.emit(this.responseArray);
|
|
3496
3508
|
}
|
|
3497
3509
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FiltersComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
3498
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: FiltersComponent, selector: "lib-filters", inputs: { dataObject: "dataObject" }, outputs: { appliedFilters: "appliedFilters" }, host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0, template: "<div class=\"position-relative\">\r\n
|
|
3510
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: FiltersComponent, selector: "lib-filters", inputs: { dataObject: "dataObject" }, outputs: { appliedFilters: "appliedFilters" }, host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0, template: "<div class=\"position-relative\">\r\n \r\n <button type=\"button\" (click)=\"opendropdown($event)\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n class=\"pl-3\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Filter</span> </button>\r\n <div class=\"card p-5 dropdown1 position-absolute\" *ngIf=\"Opendropdown\">\r\n <span class=\"dropdown-title\">Filter Options</span>\r\n <div class=\"w-100 border border-gray mt-3\"></div>\r\n <div class=\"py-3\" *ngFor=\"let item of dataObject; let i = index\">\r\n <div *ngIf=\"item.type !== 'single'\">\r\n <div class=\"dropdown form-select position-relative d-flex justify-content-between\" (click)=\"Dropdown(item.Description,i,$event)\">\r\n <!-- <span class=\"\">{{ selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined ? selectedValuesArray[i]?.length + ' ' + item.Description.split(' ').pop() + ' Selected' : item.Description }}</span> -->\r\n <span>{{item.Description}}</span> <span *ngIf=\"selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined && selectedValuesArray[i]?.length !== 0\" class=\"badge badge-light-default\">{{selectedValuesArray[i]?.length}}</span>\r\n </div>\r\n <div *ngIf=\"item.isOpen\" class=\"dropdown-content position-absolute w-100\">\r\n <div class=\"form-check d-flex align-items-center py-3 pt-3 ps-0\">\r\n <input class=\"form-check-input\" type=\"checkbox\" value=\"Select All\" id=\"selectall{{i}}\" [checked]=\"selectedValuesArray[i]?.length === item.Issues.length\"\r\n (change)=\"toggleCheckbox($event,'Select All', i,0)\">\r\n <label class=\"form-check-label px-2\" for=\"selectall{{i}}\">\r\n Select All\r\n </label>\r\n </div>\r\n \r\n <div class=\"border border-gray mt-3 \"></div>\r\n \r\n <div class=\"mt-3 d-flex align-items-center\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3 mt-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n <input type=\"text\" [(ngModel)]=\"dataObject[i].selectedValue\" (input)=\"searchData($event,i)\" [id]=\"i\" class=\"form-control searchinput ps-14 py-2 me-2 mt-2\"\r\n placeholder=\"Search\" autocomplete=\"off\" />\r\n </div>\r\n \r\n <div *ngFor=\"let issue of item.Issues;let j=index\" class=\"form-check d-flex align-items-center py-3 pt-3 ps-0 mt-2\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [value]=\"issue.text\" id=\"option{{issue.text}}\" [checked]=\"issue.checked\"\r\n (change)=\"toggleCheckbox($event,issue.text,i,j)\">\r\n <label class=\"form-check-label px-2\" for=\"option{{issue.text}}\">\r\n {{ issue.text }}\r\n </label>\r\n </div>\r\n <div class=\"mt-5 d-flex justify-content-center\">\r\n <span class=\"form-check-label\" *ngIf=\"noFilter\"> No filters available</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"item.type === 'single'\" class=\"position-relative w-100\">\r\n <button type=\"button\" (click)=\"openDropdown($event,i)\"\r\n class=\"btn btn-default w-100 btn-outline btn-outline-default rounded-3 text-nowrap border-val d-flex justify-content-between\"> {{selectedValuesArray[i]?.text ? selectedValuesArray[i]?.text : item.Description}}\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </button>\r\n <div *ngIf=\"item.isOpen\" class=\"card py-1 w-100 dropdown-single position-absolute z-1 top-50px end-0\">\r\n <ul *ngFor=\"let item of item.Issues; let j = index\" class=\"list-unstyled\">\r\n <li [ngClass]=\"selectedValuesArray[i]?.text == item.text ? 'active' : ''\" class=\"camera px-5 items fw-semibold cursor-pointer py-2\" (click)=\"selectItem($event,i,j)\">{{item.text}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <div role=\"group\" class=\"d-flex justify-content-between\">\r\n <button class=\"btn btn-outline w-100 me-2\" (click)=\"Reset()\"> Reset </button>\r\n <button class=\"btn btn-primary w-100 ms-2\" (click)=\"Apply()\">Apply</button>\r\n </div>\r\n </div>\r\n</div>", styles: [".dropdown1{position:absolute;top:70px;min-width:270px!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:16px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.dropdown1 .dropdown-content{width:90%!important;z-index:1;padding:10px;background-color:#fff;border-radius:8px;box-shadow:0 8px 16px #0003;height:200px;overflow:auto}.dropdown1 .dropdown-content label{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize}.dropdown1 .items:hover,.dropdown1 .tems.focus,.dropdown1 .items.active,.dropdown1 .camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.dropdown1 .dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown1 .dropdown button{padding:10px;font-size:16px;cursor:pointer}.dropdown1 input[type=checkbox]{width:16px!important;height:16px!important;margin:-3px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}.dropdown1 input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.dropdown1 input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
3499
3511
|
}
|
|
3500
3512
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FiltersComponent, decorators: [{
|
|
3501
3513
|
type: Component,
|
|
3502
|
-
args: [{ selector: 'lib-filters', template: "<div class=\"position-relative\">\r\n
|
|
3514
|
+
args: [{ selector: 'lib-filters', template: "<div class=\"position-relative\">\r\n \r\n <button type=\"button\" (click)=\"opendropdown($event)\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n class=\"pl-3\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Filter</span> </button>\r\n <div class=\"card p-5 dropdown1 position-absolute\" *ngIf=\"Opendropdown\">\r\n <span class=\"dropdown-title\">Filter Options</span>\r\n <div class=\"w-100 border border-gray mt-3\"></div>\r\n <div class=\"py-3\" *ngFor=\"let item of dataObject; let i = index\">\r\n <div *ngIf=\"item.type !== 'single'\">\r\n <div class=\"dropdown form-select position-relative d-flex justify-content-between\" (click)=\"Dropdown(item.Description,i,$event)\">\r\n <!-- <span class=\"\">{{ selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined ? selectedValuesArray[i]?.length + ' ' + item.Description.split(' ').pop() + ' Selected' : item.Description }}</span> -->\r\n <span>{{item.Description}}</span> <span *ngIf=\"selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined && selectedValuesArray[i]?.length !== 0\" class=\"badge badge-light-default\">{{selectedValuesArray[i]?.length}}</span>\r\n </div>\r\n <div *ngIf=\"item.isOpen\" class=\"dropdown-content position-absolute w-100\">\r\n <div class=\"form-check d-flex align-items-center py-3 pt-3 ps-0\">\r\n <input class=\"form-check-input\" type=\"checkbox\" value=\"Select All\" id=\"selectall{{i}}\" [checked]=\"selectedValuesArray[i]?.length === item.Issues.length\"\r\n (change)=\"toggleCheckbox($event,'Select All', i,0)\">\r\n <label class=\"form-check-label px-2\" for=\"selectall{{i}}\">\r\n Select All\r\n </label>\r\n </div>\r\n \r\n <div class=\"border border-gray mt-3 \"></div>\r\n \r\n <div class=\"mt-3 d-flex align-items-center\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3 mt-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n <input type=\"text\" [(ngModel)]=\"dataObject[i].selectedValue\" (input)=\"searchData($event,i)\" [id]=\"i\" class=\"form-control searchinput ps-14 py-2 me-2 mt-2\"\r\n placeholder=\"Search\" autocomplete=\"off\" />\r\n </div>\r\n \r\n <div *ngFor=\"let issue of item.Issues;let j=index\" class=\"form-check d-flex align-items-center py-3 pt-3 ps-0 mt-2\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [value]=\"issue.text\" id=\"option{{issue.text}}\" [checked]=\"issue.checked\"\r\n (change)=\"toggleCheckbox($event,issue.text,i,j)\">\r\n <label class=\"form-check-label px-2\" for=\"option{{issue.text}}\">\r\n {{ issue.text }}\r\n </label>\r\n </div>\r\n <div class=\"mt-5 d-flex justify-content-center\">\r\n <span class=\"form-check-label\" *ngIf=\"noFilter\"> No filters available</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"item.type === 'single'\" class=\"position-relative w-100\">\r\n <button type=\"button\" (click)=\"openDropdown($event,i)\"\r\n class=\"btn btn-default w-100 btn-outline btn-outline-default rounded-3 text-nowrap border-val d-flex justify-content-between\"> {{selectedValuesArray[i]?.text ? selectedValuesArray[i]?.text : item.Description}}\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </button>\r\n <div *ngIf=\"item.isOpen\" class=\"card py-1 w-100 dropdown-single position-absolute z-1 top-50px end-0\">\r\n <ul *ngFor=\"let item of item.Issues; let j = index\" class=\"list-unstyled\">\r\n <li [ngClass]=\"selectedValuesArray[i]?.text == item.text ? 'active' : ''\" class=\"camera px-5 items fw-semibold cursor-pointer py-2\" (click)=\"selectItem($event,i,j)\">{{item.text}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <div role=\"group\" class=\"d-flex justify-content-between\">\r\n <button class=\"btn btn-outline w-100 me-2\" (click)=\"Reset()\"> Reset </button>\r\n <button class=\"btn btn-primary w-100 ms-2\" (click)=\"Apply()\">Apply</button>\r\n </div>\r\n </div>\r\n</div>", styles: [".dropdown1{position:absolute;top:70px;min-width:270px!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:16px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.dropdown1 .dropdown-content{width:90%!important;z-index:1;padding:10px;background-color:#fff;border-radius:8px;box-shadow:0 8px 16px #0003;height:200px;overflow:auto}.dropdown1 .dropdown-content label{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize}.dropdown1 .items:hover,.dropdown1 .tems.focus,.dropdown1 .items.active,.dropdown1 .camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.dropdown1 .dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown1 .dropdown button{padding:10px;font-size:16px;cursor:pointer}.dropdown1 input[type=checkbox]{width:16px!important;height:16px!important;margin:-3px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}.dropdown1 input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.dropdown1 input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}\n"] }]
|
|
3503
3515
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$1.Router }], propDecorators: { dataObject: [{
|
|
3504
3516
|
type: Input
|
|
3505
3517
|
}], appliedFilters: [{
|