@memberjunction/ng-explorer-core 1.3.3 → 1.4.1

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.
Files changed (48) hide show
  1. package/dist/app-routing.module.d.ts +8 -2
  2. package/dist/app-routing.module.d.ts.map +1 -1
  3. package/dist/app-routing.module.js +29 -6
  4. package/dist/lib/app-view/application-view.component.d.ts.map +1 -1
  5. package/dist/lib/app-view/application-view.component.js +34 -24
  6. package/dist/lib/base-browser-component/base-browser-component.d.ts +3 -2
  7. package/dist/lib/base-browser-component/base-browser-component.d.ts.map +1 -1
  8. package/dist/lib/base-browser-component/base-browser-component.js +5 -4
  9. package/dist/lib/generic/resource-container-component.d.ts.map +1 -1
  10. package/dist/lib/generic-browser-list/generic-browser-list.component.d.ts +4 -0
  11. package/dist/lib/generic-browser-list/generic-browser-list.component.d.ts.map +1 -1
  12. package/dist/lib/generic-browser-list/generic-browser-list.component.js +104 -74
  13. package/dist/lib/header/header.component.d.ts +1 -1
  14. package/dist/lib/header/header.component.js +2 -2
  15. package/dist/lib/home-component/home.component.js +11 -5
  16. package/dist/lib/list-view/list-view.component.d.ts +36 -0
  17. package/dist/lib/list-view/list-view.component.d.ts.map +1 -0
  18. package/dist/lib/list-view/list-view.component.js +189 -0
  19. package/dist/lib/navigation/navigation.component.d.ts +32 -6
  20. package/dist/lib/navigation/navigation.component.d.ts.map +1 -1
  21. package/dist/lib/navigation/navigation.component.js +123 -46
  22. package/dist/lib/resource-wrappers/record-resource.component.d.ts +2 -2
  23. package/dist/lib/resource-wrappers/record-resource.component.d.ts.map +1 -1
  24. package/dist/lib/resource-wrappers/record-resource.component.js +15 -11
  25. package/dist/lib/single-list-detail/single-list-detail.component.d.ts +26 -0
  26. package/dist/lib/single-list-detail/single-list-detail.component.d.ts.map +1 -0
  27. package/dist/lib/single-list-detail/single-list-detail.component.js +213 -0
  28. package/dist/lib/single-record/single-record.component.d.ts +7 -4
  29. package/dist/lib/single-record/single-record.component.d.ts.map +1 -1
  30. package/dist/lib/single-record/single-record.component.js +83 -29
  31. package/dist/lib/single-view/single-view.component.d.ts +2 -0
  32. package/dist/lib/single-view/single-view.component.d.ts.map +1 -1
  33. package/dist/lib/single-view/single-view.component.js +27 -26
  34. package/dist/lib/user-notifications/user-notifications.component.d.ts.map +1 -1
  35. package/dist/lib/user-notifications/user-notifications.component.js +2 -1
  36. package/dist/module.d.ts +38 -37
  37. package/dist/module.d.ts.map +1 -1
  38. package/dist/module.js +18 -14
  39. package/dist/public-api.d.ts +2 -2
  40. package/dist/public-api.d.ts.map +1 -1
  41. package/dist/public-api.js +2 -2
  42. package/package.json +17 -16
  43. package/dist/lib/generic/section-loader-component.d.ts +0 -18
  44. package/dist/lib/generic/section-loader-component.d.ts.map +0 -1
  45. package/dist/lib/generic/section-loader-component.js +0 -66
  46. package/dist/lib/join-grid/join-grid.component.d.ts +0 -31
  47. package/dist/lib/join-grid/join-grid.component.d.ts.map +0 -1
  48. package/dist/lib/join-grid/join-grid.component.js +0 -222
@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
7
7
  step((generator = generator.apply(thisArg, _arguments || [])).next());
8
8
  });
9
9
  };
10
- import { Component, EventEmitter, Input, Output } from '@angular/core';
10
+ import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
11
11
  import { Folder, Item, ItemType } from '../../generic/Item.types';
12
12
  import { Metadata, KeyValuePair, RunView, CompositeKey } from '@memberjunction/core';
13
13
  import { AfterAddFolderEvent, AfterAddItemEvent, AfterDeleteFolderEvent, AfterDeleteItemEvent, BeforeAddFolderEvent, BeforeAddItemEvent, BeforeDeleteFolderEvent, BeforeDeleteItemEvent, BeforeUpdateFolderEvent, BeforeUpdateItemEvent } from '../../generic/Events.types';
@@ -21,115 +21,117 @@ import * as i5 from "@progress/kendo-angular-indicators";
21
21
  import * as i6 from "@progress/kendo-angular-buttons";
22
22
  import * as i7 from "@progress/kendo-angular-inputs";
23
23
  import * as i8 from "@progress/kendo-angular-layout";
24
+ import * as i9 from "@memberjunction/ng-entity-form-dialog";
25
+ const _c0 = ["entityFormDialog"];
24
26
  function GenericBrowserListComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
25
- i0.ɵɵelement(0, "span", 20);
27
+ i0.ɵɵelement(0, "span", 22);
26
28
  } }
27
29
  function GenericBrowserListComponent_ng_template_14_Template(rf, ctx) { if (rf & 1) {
28
- i0.ɵɵelement(0, "span", 21);
30
+ i0.ɵɵelement(0, "span", 23);
29
31
  } }
30
32
  function GenericBrowserListComponent_kendo_loader_21_Template(rf, ctx) { if (rf & 1) {
31
- i0.ɵɵelement(0, "kendo-loader", 22);
33
+ i0.ɵɵelement(0, "kendo-loader", 24);
32
34
  } }
33
35
  function GenericBrowserListComponent_Conditional_22_Conditional_0_ng_template_6_Conditional_1_Template(rf, ctx) { if (rf & 1) {
34
- const _r14 = i0.ɵɵgetCurrentView();
35
- i0.ɵɵelementStart(0, "button", 33);
36
- i0.ɵɵlistener("click", function GenericBrowserListComponent_Conditional_22_Conditional_0_ng_template_6_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r14); const dataItem_r10 = i0.ɵɵnextContext().$implicit; const ctx_r12 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r12.editItem(dataItem_r10)); });
37
- i0.ɵɵelement(1, "span", 35);
36
+ const _r15 = i0.ɵɵgetCurrentView();
37
+ i0.ɵɵelementStart(0, "button", 35);
38
+ i0.ɵɵlistener("click", function GenericBrowserListComponent_Conditional_22_Conditional_0_ng_template_6_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r15); const dataItem_r11 = i0.ɵɵnextContext().$implicit; const ctx_r13 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r13.editItem(dataItem_r11)); });
39
+ i0.ɵɵelement(1, "span", 37);
38
40
  i0.ɵɵelementEnd();
39
41
  } }
40
42
  function GenericBrowserListComponent_Conditional_22_Conditional_0_ng_template_6_Template(rf, ctx) { if (rf & 1) {
41
- const _r16 = i0.ɵɵgetCurrentView();
42
- i0.ɵɵelementStart(0, "div", 31);
43
- i0.ɵɵtemplate(1, GenericBrowserListComponent_Conditional_22_Conditional_0_ng_template_6_Conditional_1_Template, 2, 0, "button", 32);
44
- i0.ɵɵelementStart(2, "button", 33);
45
- i0.ɵɵlistener("click", function GenericBrowserListComponent_Conditional_22_Conditional_0_ng_template_6_Template_button_click_2_listener() { const restoredCtx = i0.ɵɵrestoreView(_r16); const dataItem_r10 = restoredCtx.$implicit; const ctx_r15 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r15.deleteItem(dataItem_r10)); });
46
- i0.ɵɵelement(3, "span", 34);
43
+ const _r17 = i0.ɵɵgetCurrentView();
44
+ i0.ɵɵelementStart(0, "div", 33);
45
+ i0.ɵɵtemplate(1, GenericBrowserListComponent_Conditional_22_Conditional_0_ng_template_6_Conditional_1_Template, 2, 0, "button", 34);
46
+ i0.ɵɵelementStart(2, "button", 35);
47
+ i0.ɵɵlistener("click", function GenericBrowserListComponent_Conditional_22_Conditional_0_ng_template_6_Template_button_click_2_listener() { const restoredCtx = i0.ɵɵrestoreView(_r17); const dataItem_r11 = restoredCtx.$implicit; const ctx_r16 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r16.deleteItem(dataItem_r11)); });
48
+ i0.ɵɵelement(3, "span", 36);
47
49
  i0.ɵɵelementEnd()();
48
50
  } if (rf & 2) {
49
- const ctx_r9 = i0.ɵɵnextContext(3);
51
+ const ctx_r10 = i0.ɵɵnextContext(3);
50
52
  i0.ɵɵadvance();
51
- i0.ɵɵconditional(1, ctx_r9.disableEditButton ? 1 : -1);
53
+ i0.ɵɵconditional(1, ctx_r10.disableEditButton ? 1 : -1);
52
54
  } }
53
55
  function GenericBrowserListComponent_Conditional_22_Conditional_0_Template(rf, ctx) { if (rf & 1) {
54
- const _r18 = i0.ɵɵgetCurrentView();
55
- i0.ɵɵelementStart(0, "kendo-grid", 24);
56
- i0.ɵɵlistener("cellClick", function GenericBrowserListComponent_Conditional_22_Conditional_0_Template_kendo_grid_cellClick_0_listener($event) { i0.ɵɵrestoreView(_r18); const ctx_r17 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r17.onCellItemClicked($event)); });
57
- i0.ɵɵelement(1, "kendo-grid-column", 25)(2, "kendo-grid-column", 26)(3, "kendo-grid-column", 27)(4, "kendo-grid-column", 28);
58
- i0.ɵɵelementStart(5, "kendo-grid-column", 29);
59
- i0.ɵɵtemplate(6, GenericBrowserListComponent_Conditional_22_Conditional_0_ng_template_6_Template, 4, 1, "ng-template", 30);
56
+ const _r19 = i0.ɵɵgetCurrentView();
57
+ i0.ɵɵelementStart(0, "kendo-grid", 26);
58
+ i0.ɵɵlistener("cellClick", function GenericBrowserListComponent_Conditional_22_Conditional_0_Template_kendo_grid_cellClick_0_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r18 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r18.onCellItemClicked($event)); });
59
+ i0.ɵɵelement(1, "kendo-grid-column", 27)(2, "kendo-grid-column", 28)(3, "kendo-grid-column", 29)(4, "kendo-grid-column", 30);
60
+ i0.ɵɵelementStart(5, "kendo-grid-column", 31);
61
+ i0.ɵɵtemplate(6, GenericBrowserListComponent_Conditional_22_Conditional_0_ng_template_6_Template, 4, 1, "ng-template", 32);
60
62
  i0.ɵɵelementEnd()();
61
63
  } if (rf & 2) {
62
- const ctx_r7 = i0.ɵɵnextContext(2);
63
- i0.ɵɵproperty("kendoGridBinding", ctx_r7.items);
64
+ const ctx_r8 = i0.ɵɵnextContext(2);
65
+ i0.ɵɵproperty("kendoGridBinding", ctx_r8.items);
64
66
  } }
65
67
  function GenericBrowserListComponent_Conditional_22_Conditional_1_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
66
- const _r28 = i0.ɵɵgetCurrentView();
67
- i0.ɵɵelementStart(0, "button", 33);
68
- i0.ɵɵlistener("click", function GenericBrowserListComponent_Conditional_22_Conditional_1_For_2_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r28); const item_r20 = i0.ɵɵnextContext().$implicit; const ctx_r26 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r26.editItem(item_r20)); });
69
- i0.ɵɵelement(1, "span", 35);
68
+ const _r29 = i0.ɵɵgetCurrentView();
69
+ i0.ɵɵelementStart(0, "button", 35);
70
+ i0.ɵɵlistener("click", function GenericBrowserListComponent_Conditional_22_Conditional_1_For_2_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r29); const item_r21 = i0.ɵɵnextContext().$implicit; const ctx_r27 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r27.editItem(item_r21)); });
71
+ i0.ɵɵelement(1, "span", 37);
70
72
  i0.ɵɵelementEnd();
71
73
  } }
72
74
  function GenericBrowserListComponent_Conditional_22_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
73
- const _r30 = i0.ɵɵgetCurrentView();
74
- i0.ɵɵelementStart(0, "kendo-card", 37)(1, "div", 38);
75
- i0.ɵɵtemplate(2, GenericBrowserListComponent_Conditional_22_Conditional_1_For_2_Conditional_2_Template, 2, 0, "button", 32);
76
- i0.ɵɵelementStart(3, "button", 33);
77
- i0.ɵɵlistener("click", function GenericBrowserListComponent_Conditional_22_Conditional_1_For_2_Template_button_click_3_listener() { const restoredCtx = i0.ɵɵrestoreView(_r30); const item_r20 = restoredCtx.$implicit; const ctx_r29 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r29.deleteItem(item_r20)); });
78
- i0.ɵɵelement(4, "span", 34);
75
+ const _r31 = i0.ɵɵgetCurrentView();
76
+ i0.ɵɵelementStart(0, "kendo-card", 39)(1, "div", 40);
77
+ i0.ɵɵtemplate(2, GenericBrowserListComponent_Conditional_22_Conditional_1_For_2_Conditional_2_Template, 2, 0, "button", 34);
78
+ i0.ɵɵelementStart(3, "button", 35);
79
+ i0.ɵɵlistener("click", function GenericBrowserListComponent_Conditional_22_Conditional_1_For_2_Template_button_click_3_listener() { const restoredCtx = i0.ɵɵrestoreView(_r31); const item_r21 = restoredCtx.$implicit; const ctx_r30 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r30.deleteItem(item_r21)); });
80
+ i0.ɵɵelement(4, "span", 36);
79
81
  i0.ɵɵelementEnd()();
80
- i0.ɵɵelementStart(5, "kendo-card-body", 39);
81
- i0.ɵɵlistener("click", function GenericBrowserListComponent_Conditional_22_Conditional_1_For_2_Template_kendo_card_body_click_5_listener() { const restoredCtx = i0.ɵɵrestoreView(_r30); const item_r20 = restoredCtx.$implicit; const ctx_r31 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r31.itemClick(item_r20)); });
82
- i0.ɵɵelementStart(6, "span", 40);
83
- i0.ɵɵlistener("title", function GenericBrowserListComponent_Conditional_22_Conditional_1_For_2_Template_span_title_6_listener() { const restoredCtx = i0.ɵɵrestoreView(_r30); const item_r20 = restoredCtx.$implicit; return i0.ɵɵresetView(item_r20.Name); });
82
+ i0.ɵɵelementStart(5, "kendo-card-body", 41);
83
+ i0.ɵɵlistener("click", function GenericBrowserListComponent_Conditional_22_Conditional_1_For_2_Template_kendo_card_body_click_5_listener() { const restoredCtx = i0.ɵɵrestoreView(_r31); const item_r21 = restoredCtx.$implicit; const ctx_r32 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r32.itemClick(item_r21)); });
84
+ i0.ɵɵelementStart(6, "span", 42);
85
+ i0.ɵɵlistener("title", function GenericBrowserListComponent_Conditional_22_Conditional_1_For_2_Template_span_title_6_listener() { const restoredCtx = i0.ɵɵrestoreView(_r31); const item_r21 = restoredCtx.$implicit; return i0.ɵɵresetView(item_r21.Name); });
84
86
  i0.ɵɵelementEnd();
85
- i0.ɵɵelementStart(7, "div", 41)(8, "h5", 42);
87
+ i0.ɵɵelementStart(7, "div", 43)(8, "h5", 44);
86
88
  i0.ɵɵtext(9);
87
89
  i0.ɵɵelementEnd();
88
- i0.ɵɵelementStart(10, "p", 43);
90
+ i0.ɵɵelementStart(10, "p", 45);
89
91
  i0.ɵɵtext(11);
90
92
  i0.ɵɵelementEnd()()()();
91
93
  } if (rf & 2) {
92
- const item_r20 = ctx.$implicit;
93
- const ctx_r19 = i0.ɵɵnextContext(3);
94
+ const item_r21 = ctx.$implicit;
95
+ const ctx_r20 = i0.ɵɵnextContext(3);
94
96
  i0.ɵɵadvance(2);
95
- i0.ɵɵconditional(2, !ctx_r19.disableEditButton ? 2 : -1);
97
+ i0.ɵɵconditional(2, !ctx_r20.disableEditButton ? 2 : -1);
96
98
  i0.ɵɵadvance(4);
97
- i0.ɵɵproperty("ngClass", ctx_r19.getIconForResourceType(item_r20));
99
+ i0.ɵɵproperty("ngClass", ctx_r20.getIconForResourceType(item_r21));
98
100
  i0.ɵɵadvance(3);
99
- i0.ɵɵtextInterpolate(item_r20.Name);
101
+ i0.ɵɵtextInterpolate(item_r21.Name);
100
102
  i0.ɵɵadvance(2);
101
- i0.ɵɵtextInterpolate(item_r20.Description);
103
+ i0.ɵɵtextInterpolate(item_r21.Description);
102
104
  } }
103
105
  function GenericBrowserListComponent_Conditional_22_Conditional_1_Template(rf, ctx) { if (rf & 1) {
104
- i0.ɵɵelementStart(0, "div", 36);
105
- i0.ɵɵrepeaterCreate(1, GenericBrowserListComponent_Conditional_22_Conditional_1_For_2_Template, 12, 4, "kendo-card", 44, i0.ɵɵrepeaterTrackByIdentity);
106
+ i0.ɵɵelementStart(0, "div", 38);
107
+ i0.ɵɵrepeaterCreate(1, GenericBrowserListComponent_Conditional_22_Conditional_1_For_2_Template, 12, 4, "kendo-card", 46, i0.ɵɵrepeaterTrackByIdentity);
106
108
  i0.ɵɵelementEnd();
107
109
  } if (rf & 2) {
108
- const ctx_r8 = i0.ɵɵnextContext(2);
110
+ const ctx_r9 = i0.ɵɵnextContext(2);
109
111
  i0.ɵɵadvance();
110
- i0.ɵɵrepeater(ctx_r8.items);
112
+ i0.ɵɵrepeater(ctx_r9.items);
111
113
  } }
112
114
  function GenericBrowserListComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
113
- i0.ɵɵtemplate(0, GenericBrowserListComponent_Conditional_22_Conditional_0_Template, 7, 1, "kendo-grid", 23)(1, GenericBrowserListComponent_Conditional_22_Conditional_1_Template, 3, 0);
115
+ i0.ɵɵtemplate(0, GenericBrowserListComponent_Conditional_22_Conditional_0_Template, 7, 1, "kendo-grid", 25)(1, GenericBrowserListComponent_Conditional_22_Conditional_1_Template, 3, 0);
114
116
  } if (rf & 2) {
115
117
  const ctx_r4 = i0.ɵɵnextContext();
116
118
  i0.ɵɵconditional(0, ctx_r4.displayAsGrid ? 0 : 1);
117
119
  } }
118
120
  function GenericBrowserListComponent_kendo_dialog_23_Template(rf, ctx) { if (rf & 1) {
119
- const _r34 = i0.ɵɵgetCurrentView();
120
- i0.ɵɵelementStart(0, "kendo-dialog", 45);
121
- i0.ɵɵlistener("close", function GenericBrowserListComponent_kendo_dialog_23_Template_kendo_dialog_close_0_listener() { i0.ɵɵrestoreView(_r34); const ctx_r33 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r33.onConfirmDeleteItem(false)); });
122
- i0.ɵɵelementStart(1, "p", 46);
121
+ const _r35 = i0.ɵɵgetCurrentView();
122
+ i0.ɵɵelementStart(0, "kendo-dialog", 47);
123
+ i0.ɵɵlistener("close", function GenericBrowserListComponent_kendo_dialog_23_Template_kendo_dialog_close_0_listener() { i0.ɵɵrestoreView(_r35); const ctx_r34 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r34.onConfirmDeleteItem(false)); });
124
+ i0.ɵɵelementStart(1, "p", 48);
123
125
  i0.ɵɵtext(2, " Are you sure you want to delete ");
124
126
  i0.ɵɵelementStart(3, "b");
125
127
  i0.ɵɵtext(4);
126
128
  i0.ɵɵelementEnd()();
127
- i0.ɵɵelementStart(5, "kendo-dialog-actions", 47)(6, "button", 48);
128
- i0.ɵɵlistener("click", function GenericBrowserListComponent_kendo_dialog_23_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r34); const ctx_r35 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r35.onConfirmDeleteItem(true)); });
129
+ i0.ɵɵelementStart(5, "kendo-dialog-actions", 49)(6, "button", 50);
130
+ i0.ɵɵlistener("click", function GenericBrowserListComponent_kendo_dialog_23_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r35); const ctx_r36 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r36.onConfirmDeleteItem(true)); });
129
131
  i0.ɵɵtext(7, " Yes, Delete ");
130
132
  i0.ɵɵelementEnd();
131
- i0.ɵɵelementStart(8, "button", 49);
132
- i0.ɵɵlistener("click", function GenericBrowserListComponent_kendo_dialog_23_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r34); const ctx_r36 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r36.onConfirmDeleteItem(false)); });
133
+ i0.ɵɵelementStart(8, "button", 51);
134
+ i0.ɵɵlistener("click", function GenericBrowserListComponent_kendo_dialog_23_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r35); const ctx_r37 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r37.onConfirmDeleteItem(false)); });
133
135
  i0.ɵɵtext(9, " No, Cancel ");
134
136
  i0.ɵɵelementEnd()()();
135
137
  } if (rf & 2) {
@@ -139,18 +141,18 @@ function GenericBrowserListComponent_kendo_dialog_23_Template(rf, ctx) { if (rf
139
141
  i0.ɵɵtextInterpolate1("", ctx_r5.selectedItem == null ? null : ctx_r5.selectedItem.Name, "?");
140
142
  } }
141
143
  function GenericBrowserListComponent_kendo_dialog_24_Template(rf, ctx) { if (rf & 1) {
142
- const _r38 = i0.ɵɵgetCurrentView();
143
- i0.ɵɵelementStart(0, "kendo-dialog", 50);
144
- i0.ɵɵlistener("close", function GenericBrowserListComponent_kendo_dialog_24_Template_kendo_dialog_close_0_listener() { i0.ɵɵrestoreView(_r38); const ctx_r37 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r37.toggleCreateFolderView()); });
145
- i0.ɵɵelementStart(1, "div", 7)(2, "kendo-textbox", 51);
146
- i0.ɵɵlistener("valueChange", function GenericBrowserListComponent_kendo_dialog_24_Template_kendo_textbox_valueChange_2_listener($event) { i0.ɵɵrestoreView(_r38); const ctx_r39 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r39.onCreateFolderKeyup($event)); });
144
+ const _r39 = i0.ɵɵgetCurrentView();
145
+ i0.ɵɵelementStart(0, "kendo-dialog", 52);
146
+ i0.ɵɵlistener("close", function GenericBrowserListComponent_kendo_dialog_24_Template_kendo_dialog_close_0_listener() { i0.ɵɵrestoreView(_r39); const ctx_r38 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r38.toggleCreateFolderView()); });
147
+ i0.ɵɵelementStart(1, "div", 7)(2, "kendo-textbox", 53);
148
+ i0.ɵɵlistener("valueChange", function GenericBrowserListComponent_kendo_dialog_24_Template_kendo_textbox_valueChange_2_listener($event) { i0.ɵɵrestoreView(_r39); const ctx_r40 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r40.onCreateFolderKeyup($event)); });
147
149
  i0.ɵɵelementEnd()();
148
- i0.ɵɵelementStart(3, "kendo-dialog-actions", 47)(4, "button", 48);
149
- i0.ɵɵlistener("click", function GenericBrowserListComponent_kendo_dialog_24_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r38); const ctx_r40 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r40.createFolder()); });
150
+ i0.ɵɵelementStart(3, "kendo-dialog-actions", 49)(4, "button", 50);
151
+ i0.ɵɵlistener("click", function GenericBrowserListComponent_kendo_dialog_24_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r39); const ctx_r41 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r41.createFolder()); });
150
152
  i0.ɵɵtext(5, " Create ");
151
153
  i0.ɵɵelementEnd();
152
- i0.ɵɵelementStart(6, "button", 49);
153
- i0.ɵɵlistener("click", function GenericBrowserListComponent_kendo_dialog_24_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r38); const ctx_r41 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r41.toggleCreateFolderView()); });
154
+ i0.ɵɵelementStart(6, "button", 51);
155
+ i0.ɵɵlistener("click", function GenericBrowserListComponent_kendo_dialog_24_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r39); const ctx_r42 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r42.toggleCreateFolderView()); });
154
156
  i0.ɵɵtext(7, " Cancel ");
155
157
  i0.ɵɵelementEnd()()();
156
158
  } if (rf & 2) {
@@ -214,6 +216,8 @@ export class GenericBrowserListComponent {
214
216
  this.createFolderDialogOpened = false;
215
217
  this.newFolderText = "Sample Folder";
216
218
  this.resourceTypes = [];
219
+ this.createNewRecordName = "Record";
220
+ this.entityObjectName = "";
217
221
  this.createButtonDropdownData = [
218
222
  { text: "Folder" },
219
223
  ];
@@ -227,6 +231,14 @@ export class GenericBrowserListComponent {
227
231
  this.createButtonDropdownData.unshift({ text: this.resourceName });
228
232
  }
229
233
  const md = new Metadata();
234
+ if (this.categoryEntityID) {
235
+ let entity = md.Entities.find(e => e.ID == this.categoryEntityID);
236
+ if (entity) {
237
+ this.createNewRecordName = `${entity.DisplayName} Record`;
238
+ this.entityObjectName = entity.Name;
239
+ }
240
+ this.createButtonDropdownData.unshift({ text: this.createNewRecordName });
241
+ }
230
242
  const view = new RunView();
231
243
  const rvResult = yield view.RunView({
232
244
  EntityName: "Resource Types",
@@ -527,6 +539,15 @@ export class GenericBrowserListComponent {
527
539
  else if (data.text === this.resourceName) {
528
540
  this.addResourceButtonClicked();
529
541
  }
542
+ else if (data.text === this.createNewRecordName) {
543
+ if (this.entityFormDialogRef) {
544
+ // create a new record for the given entity
545
+ const md = new Metadata();
546
+ const newRecord = yield md.GetEntityObject(this.entityObjectName);
547
+ this.entityFormDialogRef.Record = newRecord;
548
+ this.entityFormDialogRef.ShowForm();
549
+ }
550
+ }
530
551
  });
531
552
  }
532
553
  toggleCopyFromView() {
@@ -559,8 +580,13 @@ export class GenericBrowserListComponent {
559
580
  }
560
581
  }
561
582
  GenericBrowserListComponent.ɵfac = function GenericBrowserListComponent_Factory(t) { return new (t || GenericBrowserListComponent)(i0.ɵɵdirectiveInject(i1.SharedService)); };
562
- GenericBrowserListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: GenericBrowserListComponent, selectors: [["app-generic-browser-list"]], inputs: { showLoader: "showLoader", itemType: "itemType", title: "title", items: "items", iconName: "iconName", disableAddButton: "disableAddButton", disableEditButton: "disableEditButton", addText: "addText", backText: "backText", ItemEntityName: "ItemEntityName", CategoryEntityName: "CategoryEntityName", selectedFolderID: "selectedFolderID", showNotifications: "showNotifications", categoryEntityID: "categoryEntityID", displayAsGrid: "displayAsGrid", resourceName: "resourceName", viewingResource: "viewingResource", displayItemsAsList: "displayItemsAsList" }, outputs: { BeforeAddFolderEvent: "BeforeAddFolderEvent", BeforeAddItemEvent: "BeforeAddItemEvent", BeforeDeleteFolderEvent: "BeforeDeleteFolderEvent", BeforeDeleteItemEvent: "BeforeDeleteItemEvent", BeforeUpdateFolderEvent: "BeforeUpdateFolderEvent", BeforeUpdateItemEvent: "BeforeUpdateItemEvent", AfterAddFolderEvent: "AfterAddFolderEvent", AfterAddItemEvent: "AfterAddItemEvent", AfterDeleteFolderEvent: "AfterDeleteFolderEvent", AfterDeleteItemEvent: "AfterDeleteItemEvent", AfterUpdateFolderEvent: "AfterUpdateFolderEvent", AfterUpdateItemEvent: "AfterUpdateItemEvent", itemClickEvent: "itemClickEvent", backButtonClickEvent: "backButtonClickEvent", viewModeChangeEvent: "viewModeChangeEvent" }, decls: 25, vars: 9, consts: [[1, "generic-browser-list-container"], [1, "main-fav-wrapper"], [1, "title-wrapper"], [1, "title-flex-display"], ["title", "Folder", "class", "title-folder fa-regular fa-folder fa-2xl"], ["themeColor", "info", 1, "custom-dropdwn", 3, "data", "itemClick"], [1, "fa-solid", "fa-plus"], [1, "search"], ["type", "text", "placeholder", "Search", "size", "large", "rounded", "large", "fillMode", "solid", 3, "clearButton", "keyup"], ["searchInput", ""], ["kendoTextBoxPrefixTemplate", "", 3, "showSeparator"], [1, "filter-wrapper"], ["kendobutton", "", 1, "cursor-pointer", "grid-btn", "btn-cmn", 3, "click"], [1, "fa-solid", "fa-bars"], ["kendobutton", "", 1, "cursor-pointer", "active", "btn-cmn", 3, "click"], [1, "fa-solid", "fa-table-cells-large"], [1, "main-area"], ["type", "converging-spinner", 4, "ngIf"], ["class", "dialog-wrapper", "title", "Confirm", 3, "minWidth", "width", "close", 4, "ngIf"], ["title", "Create new Folder", "class", "dialog-wrapper", 3, "minWidth", "width", "close", 4, "ngIf"], ["title", "Folder", 1, "title-folder", "fa-regular", "fa-folder", "fa-2xl"], [1, "fa-solid", "fa-magnifying-glass", "margin-left-small"], ["type", "converging-spinner"], [3, "kendoGridBinding"], [3, "kendoGridBinding", "cellClick"], ["field", "Name", "title", "Name"], ["field", "Size", "title", "Size"], ["field", "LastOpened", "title", "Last Opened"], ["field", "ModifiedBy", "title", "Modified By"], ["title", ""], ["kendoGridCellTemplate", ""], [1, "grid-wrapper"], ["class", "list-btn"], [1, "list-btn", 3, "click"], [1, "fa-regular", "fa-trash-can"], [1, "fa-regular", "fa-pen-to-square"], [1, "card-list", "k-d-flex", "k-flex-row", "k-h-full", "k-flex-wrap"], [1, "card-wrapper", "cursor-pointer"], [1, "list-item-icon"], [3, "click"], [3, "ngClass", "title"], [1, "padding-top-small"], ["kendoCardTitle", ""], ["kendoCardSubtitle", ""], ["class", "card-wrapper cursor-pointer"], ["title", "Confirm", 1, "dialog-wrapper", 3, "minWidth", "width", "close"], [1, "k-m-7.5", "k-text-center"], [1, "popup-actions-btn"], ["kendoButton", "", "themeColor", "info", 1, "cancel-btn", 3, "click"], ["kendoButton", "", "fillMode", "outline", "themeColor", "info", 1, "yes-btn", 3, "click"], ["title", "Create new Folder", 1, "dialog-wrapper", 3, "minWidth", "width", "close"], ["placeholder", "Enter a folder name", 3, "valueChange"]], template: function GenericBrowserListComponent_Template(rf, ctx) { if (rf & 1) {
563
- const _r42 = i0.ɵɵgetCurrentView();
583
+ GenericBrowserListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: GenericBrowserListComponent, selectors: [["app-generic-browser-list"]], viewQuery: function GenericBrowserListComponent_Query(rf, ctx) { if (rf & 1) {
584
+ i0.ɵɵviewQuery(_c0, 5);
585
+ } if (rf & 2) {
586
+ let _t;
587
+ i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.entityFormDialogRef = _t.first);
588
+ } }, inputs: { showLoader: "showLoader", itemType: "itemType", title: "title", items: "items", iconName: "iconName", disableAddButton: "disableAddButton", disableEditButton: "disableEditButton", addText: "addText", backText: "backText", ItemEntityName: "ItemEntityName", CategoryEntityName: "CategoryEntityName", selectedFolderID: "selectedFolderID", showNotifications: "showNotifications", categoryEntityID: "categoryEntityID", displayAsGrid: "displayAsGrid", resourceName: "resourceName", viewingResource: "viewingResource", displayItemsAsList: "displayItemsAsList" }, outputs: { BeforeAddFolderEvent: "BeforeAddFolderEvent", BeforeAddItemEvent: "BeforeAddItemEvent", BeforeDeleteFolderEvent: "BeforeDeleteFolderEvent", BeforeDeleteItemEvent: "BeforeDeleteItemEvent", BeforeUpdateFolderEvent: "BeforeUpdateFolderEvent", BeforeUpdateItemEvent: "BeforeUpdateItemEvent", AfterAddFolderEvent: "AfterAddFolderEvent", AfterAddItemEvent: "AfterAddItemEvent", AfterDeleteFolderEvent: "AfterDeleteFolderEvent", AfterDeleteItemEvent: "AfterDeleteItemEvent", AfterUpdateFolderEvent: "AfterUpdateFolderEvent", AfterUpdateItemEvent: "AfterUpdateItemEvent", itemClickEvent: "itemClickEvent", backButtonClickEvent: "backButtonClickEvent", viewModeChangeEvent: "viewModeChangeEvent" }, decls: 27, vars: 9, consts: [[1, "generic-browser-list-container"], [1, "main-fav-wrapper"], [1, "title-wrapper"], [1, "title-flex-display"], ["title", "Folder", "class", "title-folder fa-regular fa-folder fa-2xl"], ["themeColor", "info", 1, "custom-dropdwn", 3, "data", "itemClick"], [1, "fa-solid", "fa-plus"], [1, "search"], ["type", "text", "placeholder", "Search", "size", "large", "rounded", "large", "fillMode", "solid", 3, "clearButton", "keyup"], ["searchInput", ""], ["kendoTextBoxPrefixTemplate", "", 3, "showSeparator"], [1, "filter-wrapper"], ["kendobutton", "", 1, "cursor-pointer", "grid-btn", "btn-cmn", 3, "click"], [1, "fa-solid", "fa-bars"], ["kendobutton", "", 1, "cursor-pointer", "active", "btn-cmn", 3, "click"], [1, "fa-solid", "fa-table-cells-large"], [1, "main-area"], ["type", "converging-spinner", 4, "ngIf"], ["class", "dialog-wrapper", "title", "Confirm", 3, "minWidth", "width", "close", 4, "ngIf"], ["title", "Create new Folder", "class", "dialog-wrapper", 3, "minWidth", "width", "close", 4, "ngIf"], ["Mode", "complete"], ["entityFormDialog", ""], ["title", "Folder", 1, "title-folder", "fa-regular", "fa-folder", "fa-2xl"], [1, "fa-solid", "fa-magnifying-glass", "margin-left-small"], ["type", "converging-spinner"], [3, "kendoGridBinding"], [3, "kendoGridBinding", "cellClick"], ["field", "Name", "title", "Name"], ["field", "Size", "title", "Size"], ["field", "LastOpened", "title", "Last Opened"], ["field", "ModifiedBy", "title", "Modified By"], ["title", ""], ["kendoGridCellTemplate", ""], [1, "grid-wrapper"], ["class", "list-btn"], [1, "list-btn", 3, "click"], [1, "fa-regular", "fa-trash-can"], [1, "fa-regular", "fa-pen-to-square"], [1, "card-list", "k-d-flex", "k-flex-row", "k-h-full", "k-flex-wrap"], [1, "card-wrapper", "cursor-pointer"], [1, "list-item-icon"], [3, "click"], [3, "ngClass", "title"], [1, "padding-top-small"], ["kendoCardTitle", ""], ["kendoCardSubtitle", ""], ["class", "card-wrapper cursor-pointer"], ["title", "Confirm", 1, "dialog-wrapper", 3, "minWidth", "width", "close"], [1, "k-m-7.5", "k-text-center"], [1, "popup-actions-btn"], ["kendoButton", "", "themeColor", "info", 1, "cancel-btn", 3, "click"], ["kendoButton", "", "fillMode", "outline", "themeColor", "info", 1, "yes-btn", 3, "click"], ["title", "Create new Folder", 1, "dialog-wrapper", 3, "minWidth", "width", "close"], ["placeholder", "Enter a folder name", 3, "valueChange"]], template: function GenericBrowserListComponent_Template(rf, ctx) { if (rf & 1) {
589
+ const _r43 = i0.ɵɵgetCurrentView();
564
590
  i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3);
565
591
  i0.ɵɵtemplate(4, GenericBrowserListComponent_Conditional_4_Template, 1, 0, "span", 4);
566
592
  i0.ɵɵelementStart(5, "h4");
@@ -572,7 +598,7 @@ GenericBrowserListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
572
598
  i0.ɵɵtext(9, " Create New ");
573
599
  i0.ɵɵelementEnd()();
574
600
  i0.ɵɵelementStart(10, "div", 2)(11, "div", 7)(12, "kendo-textbox", 8, 9);
575
- i0.ɵɵlistener("keyup", function GenericBrowserListComponent_Template_kendo_textbox_keyup_12_listener() { i0.ɵɵrestoreView(_r42); const _r1 = i0.ɵɵreference(13); return i0.ɵɵresetView(ctx.onKeyup(_r1.value)); });
601
+ i0.ɵɵlistener("keyup", function GenericBrowserListComponent_Template_kendo_textbox_keyup_12_listener() { i0.ɵɵrestoreView(_r43); const _r1 = i0.ɵɵreference(13); return i0.ɵɵresetView(ctx.onKeyup(_r1.value)); });
576
602
  i0.ɵɵtemplate(14, GenericBrowserListComponent_ng_template_14_Template, 1, 0, "ng-template", 10);
577
603
  i0.ɵɵelementEnd()();
578
604
  i0.ɵɵelementStart(15, "div", 11)(16, "button", 12);
@@ -587,6 +613,7 @@ GenericBrowserListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
587
613
  i0.ɵɵtemplate(21, GenericBrowserListComponent_kendo_loader_21_Template, 1, 0, "kendo-loader", 17)(22, GenericBrowserListComponent_Conditional_22_Template, 2, 1);
588
614
  i0.ɵɵelementEnd()();
589
615
  i0.ɵɵtemplate(23, GenericBrowserListComponent_kendo_dialog_23_Template, 10, 3, "kendo-dialog", 18)(24, GenericBrowserListComponent_kendo_dialog_24_Template, 8, 2, "kendo-dialog", 19);
616
+ i0.ɵɵelement(25, "mj-entity-form-dialog", 20, 21);
590
617
  i0.ɵɵelementEnd();
591
618
  } if (rf & 2) {
592
619
  i0.ɵɵadvance(4);
@@ -607,11 +634,14 @@ GenericBrowserListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
607
634
  i0.ɵɵproperty("ngIf", ctx.deleteDialogOpened);
608
635
  i0.ɵɵadvance();
609
636
  i0.ɵɵproperty("ngIf", ctx.createFolderDialogOpened);
610
- } }, dependencies: [i2.NgClass, i2.NgIf, i3.GridComponent, i3.DataBindingDirective, i3.ColumnComponent, i3.CellTemplateDirective, i4.DialogComponent, i4.DialogActionsComponent, i5.LoaderComponent, i6.ButtonComponent, i6.DropDownButtonComponent, i7.TextBoxComponent, i7.TextBoxPrefixTemplateDirective, i8.CardComponent, i8.CardBodyComponent, i8.CardTitleDirective, i8.CardSubtitleDirective], styles: [".card-header-entity .title-wrap h1 {\n margin: 0 !important;\n font-size: 36px !important;\n line-height: 42px !important;\n color: var(--black) !important;\n}\n .card-header-entity .add-item .k-button {\n border: 1px solid var(--border-blue) !important;\n background: var(--white-color) !important;\n color: var(--border-blue);\n font-weight: 500 ;\n font-size: 16px ;\n border-radius: 10px;\n line-height: 34px;\n}\n .card-header-entity .add-item .k-button:hover {\n background: var(--border-blue) !important;\n color: var(--white-color);\n}\n .card-header-entity .add-item .k-button:hover .k-button-text svg path {\n fill: var(--white-color) !important;\n}\n .title-wrapper[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 14px 0;\n border-bottom: 1px solid var(--med-gray);\n}\n .title-wrapper[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 24px;\n line-height: 28px;\n }\n .main-fav-wrapper[_ngcontent-%COMP%] {\n background: #fff;\n padding: 20px;\n }\n .filter-wrapper[_ngcontent-%COMP%] {\n display: flex;\n justify-content: flex-start;\n gap: 14px;\n align-items: center;\n}\n .title-wrapper[_ngcontent-%COMP%] .search[_ngcontent-%COMP%] input[_ngcontent-%COMP%] {\n width: 100%;\n height: 100%;\n font-size: 16px;\n background: transparent;\n border: none;\n box-sizing: border-box;\n padding-left: 40px;\n\n }\n .title-wrapper[_ngcontent-%COMP%] .search[_ngcontent-%COMP%] {\n background: var(--light-shade);\n width: 360px;\n height: 44px;\n position: relative;\n border-radius: 10px;\n }\n .title-wrapper[_ngcontent-%COMP%] .search[_ngcontent-%COMP%] svg[_ngcontent-%COMP%] {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: 12px;\n}\n .main-fav-wrapper .title-wrapper .k-dropdown-button .k-button {\n background: var(--border-blue);\n color: var(--white-color);\n font-size: 16px;\n border: none;\n padding: 8px 25px;\n border-radius: 10px;\n}\n .main-fav-wrapper .title-wrapper .k-dropdown-button .k-button .k-button-text, .card-header-entity .add-item .k-button .k-button-text {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.btn-cmn[_ngcontent-%COMP%] {\n width: 44px;\n height: 44px;\n min-width: 44px;\n background: transparent;\n border-radius: 8px;\n border: 1px solid var(--gray-color);\n}\n.btn-cmn.active[_ngcontent-%COMP%] {\n border: 1px solid var(--border-blue);\n}\n .main-fav-wrapper .title-wrapper .filter-wrapper .k-dropdown-button .k-button {\n border: 1px solid var(--gray-color);\n border-radius: 8px; padding: 10px 25px;\n background: var(--white-color);\n color: var(--sideNav);\n}\n .main-area .card-list .card-wrapper .k-card-body {\n padding: 16px !important;\n position: relative;\n}\n .main-fav-wrapper .main-area .card-list .card-wrapper .list-item-icon {\n position: absolute;\n display: flex;\n align-items: center;\n gap: 8px;\n top:12px;\n right: 12px;\n z-index: 9;\n}\n.grid-wrapper[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n .main-fav-wrapper .main-area .card-list .card-wrapper .list-item-icon .common-btn, .list-btn[_ngcontent-%COMP%] {\n width: 38px;\n height: 38px;\n background: #000;\n min-width: 38px;\n border: 1px solid var(--gray-color);\n border-radius: 8px; \n display: flex;\n justify-content: center;\n align-items: center;\n background: transparent;\n cursor: pointer;\n}\n .main-fav-wrapper .main-area .card-list .card-wrapper .k-card-body .list-item-icon:hover, .list-btn[_ngcontent-%COMP%]:hover {\n border: 1px solid var(--border-active);\n}\n\n\n .main-area .card-list .card-wrapper:hover {\n box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\n border: 1px solid var(--border-active);\n}\n .main-area .card-list .card-wrapper:hover .k-card-body .view-card-content-list h5 {\n color: var(--border-blue);\n}\n .main-area .card-list .card-wrapper .k-card-body .view-card-content-list p {\n color: var(--sideNav);\n font-size: 14px;\n line-height: 16px;\n height: auto;\n text-overflow: ellipsis;\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n\n}\n .main-area .card-list .card-wrapper .k-card-body .view-card-content-list h5 {\n font-size: 18px;\n line-height: 21px;\n color: var(--text-darked);\n font-weight: 600;\n}\n.breadcrumb-wrap[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 0;\n}\n.breadcrumb-wrap[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: 16px;\n line-height: 18px;\n font-weight: 400;\n color: var(--black);\n}\n .k-menu-popup {\n box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\n border-radius: 10px;\n padding: 16px;\n}\n\n .k-menu-popup kendo-button-list ul li .k-menu-link {\n box-shadow: none !important;\n} \n .k-menu-popup kendo-button-list ul li .k-menu-link:active {\n background: transparent !important;\n}\n .k-menu-popup kendo-button-list ul li .k-menu-link .k-menu-link-text:hover {\n color: var(--primary-color);\n background: transparent !important;\n\n}\n .dialog-wrapper .popup-actions-btn button {\n flex: 1;\n}\n .dialog-wrapper .popup-actions-btn {\n display: flex;\n}\n .dialog-wrapper .popup-actions-btn .cancel-btn {\n background: var(--primary-color);\n color: var(--white-color);\n font-size: 16px;\n font-weight: 700;\n line-height: 34px;\n text-align: center;\n border-radius: 10px;\n border: 1px solid transparent;\n\n}\n .dialog-wrapper .popup-actions-btn .yes-btn {\n border:1px solid var(--primary-color);\n background: transparent;\n color: var(--primary-color);\n font-size: 16px;\n font-weight: 700;\n line-height: 34px;\n text-align: center;\n border-radius: 10px;\n box-shadow: none;\n}\n .dialog-wrapper .popup-actions-btn .yes-btn:focus {\n box-shadow: none !important;\n}\n .dialog-wrapper .k-window-title {\n font-size: 30px;\n font-weight: 500;\n line-height: 36px;\n text-align: left;\n color: var(--text-darked);\n}\n .dialog-wrapper p {\n font-size: 16px;\n font-weight: 500;\n line-height: 20px;\n text-align: left;\n color: var(--black);\n}\n\n.margin-left-small[_ngcontent-%COMP%] {\n margin-left: 10px;\n}\n\n.card-wrapper[_ngcontent-%COMP%] {\n min-width: 230px;\n height: 150px;\n min-height: 125px;\n}\n\n.padding-top-small[_ngcontent-%COMP%] {\n padding-top: 10px;\n}\n\n.cursor-pointer[_ngcontent-%COMP%] {\n cursor: pointer;\n}\n\n.title-folder[_ngcontent-%COMP%] {\n padding-right: 20px;\n margin: auto;\n}\n\n.title-flex-display[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: row;\n}", ".main-area[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n gap: 24px;\n padding: 24px 0;\n}\n.list-view[_ngcontent-%COMP%] {\n padding: 16px;\n min-width: 300px;\n border-radius: 4px;\n background: #FAFAFA;\n border: none;\n}\n .list-view .k-listview-header, .list-view .k-listview-footer {\n border: none;\n}\n .list-view .k-listview-content {\n border: 1px solid rgba(0, 0, 0, 0.08);\n border-radius: 4px;\n background: #fff;\n padding: 16px;\n}\n\n.header[_ngcontent-%COMP%], .footer[_ngcontent-%COMP%] {\n color: #424242;\n font-size: 16px;\n height: auto;\n margin:0;\n}\n\n.header[_ngcontent-%COMP%] {\n color: #424242;\n margin-bottom: 16px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n.header[_ngcontent-%COMP%] .head-tag[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n color: #424242;\nfont-size: 16px;\nfont-style: normal;\nfont-weight: 400;\nline-height: 20px;\n}\n\n.header[_ngcontent-%COMP%] .count[_ngcontent-%COMP%] {\n width: 24px;\n height: 24px;\n min-width: 24px;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 10px;\n background: rgba(0, 0, 0, 0.08);\n border-radius: 50%;\n}\n.footer[_ngcontent-%COMP%] {\n font-size: 14px;\n margin-top: 16px;\n}\n\n.list-item[_ngcontent-%COMP%] {\n color: #424242;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 30px;\n cursor: pointer;\n margin: 4px;\n}\n.card-container[_ngcontent-%COMP%] {\n margin: 0;\n padding: 0;\n box-shadow: none;\n}\n.card-header-entity[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n padding-bottom: 20px;\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n.card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] h1[_ngcontent-%COMP%] {\n color: #424242;\n font-size: 28px;\n font-style: normal;\n font-weight: 300;\n line-height: 28px;\n margin-bottom: 15px;\n}\n.card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n}\n.card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n display: flex;\n align-items: center;\n gap: 8px;\n color: #424242;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n}\n\n\n\n\n \n.view-card[_ngcontent-%COMP%] .view-icon[_ngcontent-%COMP%] {\n color: var(--sideNav);\n}\n.card-wrapper[_ngcontent-%COMP%] {\n border: 1px solid rgba(0, 0, 0, 0.08);\n border-radius: 6px;\n width: 100% !important;\n}\n.card-wrapper[_ngcontent-%COMP%] .k-card-body[_ngcontent-%COMP%] {\n background: #fff;\n padding: 12px 20px;\n}\n.card-wrapper[_ngcontent-%COMP%] .view-card[_ngcontent-%COMP%] {\n overflow: auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: #fafafa;\n padding: 4px 15px;\n}\n.view-card[_ngcontent-%COMP%] .btn-wrapper[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n}\n\n.k-card-body[_ngcontent-%COMP%] .view-card-content[_ngcontent-%COMP%] h5[_ngcontent-%COMP%] {\n color: #424242;\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n margin-bottom: 0;\n letter-spacing: 0.18px;\n}\n.k-card-body[_ngcontent-%COMP%] .view-card-content[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n color: #666;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n height: 48px;\n margin-bottom: 0;\n}\n.card-container[_ngcontent-%COMP%] {\n padding: 0;\n margin: 0;\n box-shadow: none;\n}\n.card-header-entity[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n padding-bottom: 20px;\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n\n.card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] h1[_ngcontent-%COMP%] {\n color: #424242;\n font-size: 28px;\n font-style: normal;\n font-weight: 300;\n line-height: 28px;\n margin-bottom: 15px;\n}\n.card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n}\n.card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n display: flex;\n align-items: center;\n gap: 8px;\n color: #424242;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n}\n.main-area[_ngcontent-%COMP%] .card-list[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 20px;\n}"] });
637
+ } }, dependencies: [i2.NgClass, i2.NgIf, i3.GridComponent, i3.DataBindingDirective, i3.ColumnComponent, i3.CellTemplateDirective, i4.DialogComponent, i4.DialogActionsComponent, i5.LoaderComponent, i6.ButtonComponent, i6.DropDownButtonComponent, i7.TextBoxComponent, i7.TextBoxPrefixTemplateDirective, i8.CardComponent, i8.CardBodyComponent, i8.CardTitleDirective, i8.CardSubtitleDirective, i9.EntityFormDialogComponent], styles: [".card-header-entity .title-wrap h1 {\n margin: 0 !important;\n font-size: 36px !important;\n line-height: 42px !important;\n color: var(--black) !important;\n}\n .card-header-entity .add-item .k-button {\n border: 1px solid var(--border-blue) !important;\n background: var(--white-color) !important;\n color: var(--border-blue);\n font-weight: 500 ;\n font-size: 16px ;\n border-radius: 10px;\n line-height: 34px;\n}\n .card-header-entity .add-item .k-button:hover {\n background: var(--border-blue) !important;\n color: var(--white-color);\n}\n .card-header-entity .add-item .k-button:hover .k-button-text svg path {\n fill: var(--white-color) !important;\n}\n .title-wrapper[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 14px 0;\n border-bottom: 1px solid var(--med-gray);\n}\n .title-wrapper[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 24px;\n line-height: 28px;\n }\n .main-fav-wrapper[_ngcontent-%COMP%] {\n background: #fff;\n padding: 20px;\n }\n .filter-wrapper[_ngcontent-%COMP%] {\n display: flex;\n justify-content: flex-start;\n gap: 14px;\n align-items: center;\n}\n .title-wrapper[_ngcontent-%COMP%] .search[_ngcontent-%COMP%] input[_ngcontent-%COMP%] {\n width: 100%;\n height: 100%;\n font-size: 16px;\n background: transparent;\n border: none;\n box-sizing: border-box;\n padding-left: 40px;\n\n }\n .title-wrapper[_ngcontent-%COMP%] .search[_ngcontent-%COMP%] {\n background: var(--light-shade);\n width: 360px;\n height: 44px;\n position: relative;\n border-radius: 10px;\n }\n .title-wrapper[_ngcontent-%COMP%] .search[_ngcontent-%COMP%] svg[_ngcontent-%COMP%] {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: 12px;\n}\n .main-fav-wrapper .title-wrapper .k-dropdown-button .k-button {\n background: var(--border-blue);\n color: var(--white-color);\n font-size: 16px;\n border: none;\n padding: 8px 25px;\n border-radius: 10px;\n}\n .main-fav-wrapper .title-wrapper .k-dropdown-button .k-button .k-button-text, .card-header-entity .add-item .k-button .k-button-text {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.btn-cmn[_ngcontent-%COMP%] {\n width: 44px;\n height: 44px;\n min-width: 44px;\n background: transparent;\n border-radius: 8px;\n border: 1px solid var(--gray-color);\n}\n.btn-cmn.active[_ngcontent-%COMP%] {\n border: 1px solid var(--border-blue);\n}\n .main-fav-wrapper .title-wrapper .filter-wrapper .k-dropdown-button .k-button {\n border: 1px solid var(--gray-color);\n border-radius: 8px; padding: 10px 25px;\n background: var(--white-color);\n color: var(--sideNav);\n}\n .main-area .card-list .card-wrapper .k-card-body {\n padding: 16px !important;\n position: relative;\n}\n .main-fav-wrapper .main-area .card-list .card-wrapper .list-item-icon {\n position: absolute;\n display: flex;\n align-items: center;\n gap: 8px;\n top:12px;\n right: 12px;\n z-index: 9;\n}\n.grid-wrapper[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n .main-fav-wrapper .main-area .card-list .card-wrapper .list-item-icon .common-btn, .list-btn[_ngcontent-%COMP%] {\n width: 38px;\n height: 38px;\n background: #000;\n min-width: 38px;\n border: 1px solid var(--gray-color);\n border-radius: 8px; \n display: flex;\n justify-content: center;\n align-items: center;\n background: transparent;\n cursor: pointer;\n}\n .main-fav-wrapper .main-area .card-list .card-wrapper .k-card-body .list-item-icon:hover, .list-btn[_ngcontent-%COMP%]:hover {\n border: 1px solid var(--border-active);\n}\n\n\n .main-area .card-list .card-wrapper:hover {\n box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\n border: 1px solid var(--border-active);\n}\n .main-area .card-list .card-wrapper:hover .k-card-body .view-card-content-list h5 {\n color: var(--border-blue);\n}\n .main-area .card-list .card-wrapper .k-card-body .view-card-content-list p {\n color: var(--sideNav);\n font-size: 14px;\n line-height: 16px;\n height: auto;\n text-overflow: ellipsis;\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n\n}\n .main-area .card-list .card-wrapper .k-card-body .view-card-content-list h5 {\n font-size: 18px;\n line-height: 21px;\n color: var(--text-darked);\n font-weight: 600;\n}\n.breadcrumb-wrap[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 0;\n}\n.breadcrumb-wrap[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: 16px;\n line-height: 18px;\n font-weight: 400;\n color: var(--black);\n}\n .k-menu-popup {\n box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\n border-radius: 10px;\n padding: 16px;\n}\n\n .k-menu-popup kendo-button-list ul li .k-menu-link {\n box-shadow: none !important;\n} \n .k-menu-popup kendo-button-list ul li .k-menu-link:active {\n background: transparent !important;\n}\n .k-menu-popup kendo-button-list ul li .k-menu-link .k-menu-link-text:hover {\n color: var(--primary-color);\n background: transparent !important;\n\n}\n .dialog-wrapper .popup-actions-btn button {\n flex: 1;\n}\n .dialog-wrapper .popup-actions-btn {\n display: flex;\n}\n .dialog-wrapper .popup-actions-btn .cancel-btn {\n background: var(--primary-color);\n color: var(--white-color);\n font-size: 16px;\n font-weight: 700;\n line-height: 34px;\n text-align: center;\n border-radius: 10px;\n border: 1px solid transparent;\n\n}\n .dialog-wrapper .popup-actions-btn .yes-btn {\n border:1px solid var(--primary-color);\n background: transparent;\n color: var(--primary-color);\n font-size: 16px;\n font-weight: 700;\n line-height: 34px;\n text-align: center;\n border-radius: 10px;\n box-shadow: none;\n}\n .dialog-wrapper .popup-actions-btn .yes-btn:focus {\n box-shadow: none !important;\n}\n .dialog-wrapper .k-window-title {\n font-size: 30px;\n font-weight: 500;\n line-height: 36px;\n text-align: left;\n color: var(--text-darked);\n}\n .dialog-wrapper p {\n font-size: 16px;\n font-weight: 500;\n line-height: 20px;\n text-align: left;\n color: var(--black);\n}\n\n.margin-left-small[_ngcontent-%COMP%] {\n margin-left: 10px;\n}\n\n.card-wrapper[_ngcontent-%COMP%] {\n min-width: 230px;\n height: 150px;\n min-height: 125px;\n}\n\n.padding-top-small[_ngcontent-%COMP%] {\n padding-top: 10px;\n}\n\n.cursor-pointer[_ngcontent-%COMP%] {\n cursor: pointer;\n}\n\n.title-folder[_ngcontent-%COMP%] {\n padding-right: 20px;\n margin: auto;\n}\n\n.title-flex-display[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: row;\n}", ".main-area[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n gap: 24px;\n padding: 24px 0;\n}\n.list-view[_ngcontent-%COMP%] {\n padding: 16px;\n min-width: 300px;\n border-radius: 4px;\n background: #FAFAFA;\n border: none;\n}\n .list-view .k-listview-header, .list-view .k-listview-footer {\n border: none;\n}\n .list-view .k-listview-content {\n border: 1px solid rgba(0, 0, 0, 0.08);\n border-radius: 4px;\n background: #fff;\n padding: 16px;\n}\n\n.header[_ngcontent-%COMP%], .footer[_ngcontent-%COMP%] {\n color: #424242;\n font-size: 16px;\n height: auto;\n margin:0;\n}\n\n.header[_ngcontent-%COMP%] {\n color: #424242;\n margin-bottom: 16px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n.header[_ngcontent-%COMP%] .head-tag[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n color: #424242;\nfont-size: 16px;\nfont-style: normal;\nfont-weight: 400;\nline-height: 20px;\n}\n\n.header[_ngcontent-%COMP%] .count[_ngcontent-%COMP%] {\n width: 24px;\n height: 24px;\n min-width: 24px;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 10px;\n background: rgba(0, 0, 0, 0.08);\n border-radius: 50%;\n}\n.footer[_ngcontent-%COMP%] {\n font-size: 14px;\n margin-top: 16px;\n}\n\n.list-item[_ngcontent-%COMP%] {\n color: #424242;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 30px;\n cursor: pointer;\n margin: 4px;\n}\n.card-container[_ngcontent-%COMP%] {\n margin: 0;\n padding: 0;\n box-shadow: none;\n}\n.card-header-entity[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n padding-bottom: 20px;\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n.card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] h1[_ngcontent-%COMP%] {\n color: #424242;\n font-size: 28px;\n font-style: normal;\n font-weight: 300;\n line-height: 28px;\n margin-bottom: 15px;\n}\n.card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n}\n.card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n display: flex;\n align-items: center;\n gap: 8px;\n color: #424242;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n}\n\n\n\n\n \n.view-card[_ngcontent-%COMP%] .view-icon[_ngcontent-%COMP%] {\n color: var(--sideNav);\n}\n.card-wrapper[_ngcontent-%COMP%] {\n border: 1px solid rgba(0, 0, 0, 0.08);\n border-radius: 6px;\n width: 100% !important;\n}\n.card-wrapper[_ngcontent-%COMP%] .k-card-body[_ngcontent-%COMP%] {\n background: #fff;\n padding: 12px 20px;\n}\n.card-wrapper[_ngcontent-%COMP%] .view-card[_ngcontent-%COMP%] {\n overflow: auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: #fafafa;\n padding: 4px 15px;\n}\n.view-card[_ngcontent-%COMP%] .btn-wrapper[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n}\n\n.k-card-body[_ngcontent-%COMP%] .view-card-content[_ngcontent-%COMP%] h5[_ngcontent-%COMP%] {\n color: #424242;\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n margin-bottom: 0;\n letter-spacing: 0.18px;\n}\n.k-card-body[_ngcontent-%COMP%] .view-card-content[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n color: #666;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n height: 48px;\n margin-bottom: 0;\n}\n.card-container[_ngcontent-%COMP%] {\n padding: 0;\n margin: 0;\n box-shadow: none;\n}\n.card-header-entity[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n padding-bottom: 20px;\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n\n.card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] h1[_ngcontent-%COMP%] {\n color: #424242;\n font-size: 28px;\n font-style: normal;\n font-weight: 300;\n line-height: 28px;\n margin-bottom: 15px;\n}\n.card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n}\n.card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n display: flex;\n align-items: center;\n gap: 8px;\n color: #424242;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n}\n.main-area[_ngcontent-%COMP%] .card-list[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 20px;\n}"] });
611
638
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(GenericBrowserListComponent, [{
612
639
  type: Component,
613
- args: [{ selector: 'app-generic-browser-list', template: "\n<div class=\"generic-browser-list-container\">\n <div class=\"main-fav-wrapper\">\n <div class=\"title-wrapper\">\n <div class=\"title-flex-display\">\n @if(selectedFolderID){\n <span title=\"Folder\" class=\"title-folder fa-regular fa-folder fa-2xl\"></span>\n }\n <h4>{{title}}</h4>\n </div>\n <kendo-dropdownbutton class=\"custom-dropdwn\" (itemClick)=\"onDropdownItemClick($event)\" [data]=\"createButtonDropdownData\" themeColor=\"info\">\n <span class=\"fa-solid fa-plus\"></span>\n Create New\n </kendo-dropdownbutton>\n </div>\n <div class=\"title-wrapper\">\n <div class=\"search\">\n <kendo-textbox \n type=\"text\" \n #searchInput \n placeholder=\"Search\" \n (keyup)=\"onKeyup(searchInput.value)\"\n [clearButton]=\"true\"\n size=\"large\"\n rounded=\"large\"\n fillMode=\"solid\"\n >\n <ng-template kendoTextBoxPrefixTemplate [showSeparator]=\"true\">\n <span class=\"fa-solid fa-magnifying-glass margin-left-small\"></span>\n </ng-template>\n </kendo-textbox>\n </div>\n <div class=\"filter-wrapper\">\n <!--\n <kendo-dropdownbutton [data]=\"data\" themeColor=\"primary\">\n Sort By Recents\n </kendo-dropdownbutton>\n -->\n <button kendobutton (click)=\"changeViewMode('grid')\" class=\"cursor-pointer grid-btn btn-cmn\">\n <span class=\"fa-solid fa-bars\"></span>\n </button>\n <button kendobutton (click)=\"changeViewMode('list')\" class=\"cursor-pointer active btn-cmn\">\n <span class=\"fa-solid fa-table-cells-large\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"main-area\">\n <kendo-loader *ngIf=\"showLoader\" type=\"converging-spinner\"></kendo-loader>\n @if(!showLoader){\n @if(displayAsGrid){\n <kendo-grid (cellClick)=\"onCellItemClicked($event)\" [kendoGridBinding]=\"items\">\n <kendo-grid-column field=\"Name\" title=\"Name\"></kendo-grid-column>\n <kendo-grid-column field=\"Size\" title=\"Size\"></kendo-grid-column>\n <kendo-grid-column field=\"LastOpened\" title=\"Last Opened\"></kendo-grid-column>\n <kendo-grid-column field=\"ModifiedBy\" title=\"Modified By\"></kendo-grid-column>\n <kendo-grid-column title=\"\">\n <ng-template kendoGridCellTemplate let-dataItem>\n <div class=\"grid-wrapper\">\n @if(disableEditButton){\n <button class=\"list-btn\" (click)=\"editItem(dataItem)\">\n <span class=\"fa-regular fa-pen-to-square\"></span>\n </button>\n }\n <button class=\"list-btn\" (click)=\"deleteItem(dataItem)\">\n <span class=\"fa-regular fa-trash-can\"></span>\n </button>\n </div>\n </ng-template>\n </kendo-grid-column>\n </kendo-grid>\n }\n @else{\n <div class=\"card-list k-d-flex k-flex-row k-h-full k-flex-wrap\">\n @for(item of items; track item){\n <kendo-card class=\"card-wrapper cursor-pointer\">\n <div class=\"list-item-icon\">\n @if(!disableEditButton){\n <button (click)=\"editItem(item)\" class=\"list-btn\">\n <span class=\"fa-regular fa-pen-to-square\"></span>\n </button>\n }\n <button (click)=\"deleteItem(item)\" class=\"list-btn\">\n <span class=\"fa-regular fa-trash-can\"></span>\n </button>\n </div>\n <kendo-card-body (click)=\"itemClick(item)\">\n <span (title)=\"item.Name\" [ngClass]=\"getIconForResourceType(item)\"></span>\n <div class=\"padding-top-small\">\n <h5 kendoCardTitle>{{ item.Name }}</h5>\n <p kendoCardSubtitle>{{ item.Description }}</p>\n </div>\n </kendo-card-body>\n </kendo-card>\n }\n </div>\n }\n }\n </div>\n </div>\n\n <kendo-dialog \n [minWidth]=\"450\"\n [width]=\"650\"\n class=\"dialog-wrapper\" \n title=\"Confirm\" \n *ngIf=\"deleteDialogOpened\" \n (close)=\"onConfirmDeleteItem(false)\">\n <p class=\"k-m-7.5 k-text-center\">\n Are you sure you want to delete <b>{{selectedItem?.Name}}?</b>\n </p>\n <kendo-dialog-actions class=\"popup-actions-btn\">\n <button class=\"cancel-btn\" (click)=\"onConfirmDeleteItem(true)\" kendoButton themeColor=\"info\">\n Yes, Delete\n </button>\n <button class=\"yes-btn\" (click)=\"onConfirmDeleteItem(false)\" kendoButton fillMode=\"outline\" themeColor=\"info\">\n No, Cancel\n </button>\n </kendo-dialog-actions>\n </kendo-dialog>\n <kendo-dialog \n title=\"Create new Folder\" \n *ngIf=\"createFolderDialogOpened\" \n (close)=\"toggleCreateFolderView()\"\n [minWidth]=\"250\"\n [width]=\"450\"\n class=\"dialog-wrapper\"\n >\n <div class=\"search\">\n <kendo-textbox placeholder=\"Enter a folder name\" (valueChange)=\"onCreateFolderKeyup($event)\"/>\n </div>\n <kendo-dialog-actions class=\"popup-actions-btn\">\n <button class=\"cancel-btn\" (click)=\"createFolder()\" kendoButton themeColor=\"info\">\n Create\n </button>\n <button class=\"yes-btn\" (click)=\"toggleCreateFolderView()\" kendoButton fillMode=\"outline\" themeColor=\"info\">\n Cancel\n </button>\n </kendo-dialog-actions>\n </kendo-dialog>\n</div>\n", styles: ["::ng-deep .card-header-entity .title-wrap h1 {\n margin: 0 !important;\n font-size: 36px !important;\n line-height: 42px !important;\n color: var(--black) !important;\n}\n ::ng-deep .card-header-entity .add-item .k-button {\n border: 1px solid var(--border-blue) !important;\n background: var(--white-color) !important;\n color: var(--border-blue);\n font-weight: 500 ;\n font-size: 16px ;\n border-radius: 10px;\n line-height: 34px;\n}\n::ng-deep .card-header-entity .add-item .k-button:hover {\n background: var(--border-blue) !important;\n color: var(--white-color);\n}\n::ng-deep .card-header-entity .add-item .k-button:hover .k-button-text svg path {\n fill: var(--white-color) !important;\n}\n .title-wrapper {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 14px 0;\n border-bottom: 1px solid var(--med-gray);\n}\n .title-wrapper h4 {\n margin: 0;\n font-size: 24px;\n line-height: 28px;\n }\n .main-fav-wrapper {\n background: #fff;\n padding: 20px;\n }\n .filter-wrapper {\n display: flex;\n justify-content: flex-start;\n gap: 14px;\n align-items: center;\n}\n .title-wrapper .search input {\n width: 100%;\n height: 100%;\n font-size: 16px;\n background: transparent;\n border: none;\n box-sizing: border-box;\n padding-left: 40px;\n\n }\n .title-wrapper .search {\n background: var(--light-shade);\n width: 360px;\n height: 44px;\n position: relative;\n border-radius: 10px;\n }\n .title-wrapper .search svg {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: 12px;\n}\n::ng-deep .main-fav-wrapper .title-wrapper .k-dropdown-button .k-button {\n background: var(--border-blue);\n color: var(--white-color);\n font-size: 16px;\n border: none;\n padding: 8px 25px;\n border-radius: 10px;\n}\n::ng-deep .main-fav-wrapper .title-wrapper .k-dropdown-button .k-button .k-button-text, ::ng-deep .card-header-entity .add-item .k-button .k-button-text {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.btn-cmn {\n width: 44px;\n height: 44px;\n min-width: 44px;\n background: transparent;\n border-radius: 8px;\n border: 1px solid var(--gray-color);\n}\n.btn-cmn.active {\n border: 1px solid var(--border-blue);\n}\n::ng-deep .main-fav-wrapper .title-wrapper .filter-wrapper .k-dropdown-button .k-button {\n border: 1px solid var(--gray-color);\n border-radius: 8px; padding: 10px 25px;\n background: var(--white-color);\n color: var(--sideNav);\n}\n::ng-deep .main-area .card-list .card-wrapper .k-card-body {\n padding: 16px !important;\n position: relative;\n}\n::ng-deep .main-fav-wrapper .main-area .card-list .card-wrapper .list-item-icon {\n position: absolute;\n display: flex;\n align-items: center;\n gap: 8px;\n top:12px;\n right: 12px;\n z-index: 9;\n}\n.grid-wrapper {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n::ng-deep .main-fav-wrapper .main-area .card-list .card-wrapper .list-item-icon .common-btn, .list-btn {\n width: 38px;\n height: 38px;\n background: #000;\n min-width: 38px;\n border: 1px solid var(--gray-color);\n border-radius: 8px; \n display: flex;\n justify-content: center;\n align-items: center;\n background: transparent;\n cursor: pointer;\n}\n::ng-deep .main-fav-wrapper .main-area .card-list .card-wrapper .k-card-body .list-item-icon:hover, .list-btn:hover {\n border: 1px solid var(--border-active);\n}\n\n\n::ng-deep .main-area .card-list .card-wrapper:hover {\n box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\n border: 1px solid var(--border-active);\n}\n::ng-deep .main-area .card-list .card-wrapper:hover .k-card-body .view-card-content-list h5 {\n color: var(--border-blue);\n}\n::ng-deep .main-area .card-list .card-wrapper .k-card-body .view-card-content-list p {\n color: var(--sideNav);\n font-size: 14px;\n line-height: 16px;\n height: auto;\n text-overflow: ellipsis;\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n\n}\n::ng-deep .main-area .card-list .card-wrapper .k-card-body .view-card-content-list h5 {\n font-size: 18px;\n line-height: 21px;\n color: var(--text-darked);\n font-weight: 600;\n}\n.breadcrumb-wrap {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 0;\n}\n.breadcrumb-wrap span {\n font-size: 16px;\n line-height: 18px;\n font-weight: 400;\n color: var(--black);\n}\n::ng-deep .k-menu-popup {\n box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\n border-radius: 10px;\n padding: 16px;\n}\n\n::ng-deep .k-menu-popup kendo-button-list ul li .k-menu-link {\n box-shadow: none !important;\n} \n::ng-deep .k-menu-popup kendo-button-list ul li .k-menu-link:active {\n background: transparent !important;\n}\n::ng-deep .k-menu-popup kendo-button-list ul li .k-menu-link .k-menu-link-text:hover {\n color: var(--primary-color);\n background: transparent !important;\n\n}\n::ng-deep .dialog-wrapper .popup-actions-btn button {\n flex: 1;\n}\n::ng-deep .dialog-wrapper .popup-actions-btn {\n display: flex;\n}\n::ng-deep .dialog-wrapper .popup-actions-btn .cancel-btn {\n background: var(--primary-color);\n color: var(--white-color);\n font-size: 16px;\n font-weight: 700;\n line-height: 34px;\n text-align: center;\n border-radius: 10px;\n border: 1px solid transparent;\n\n}\n::ng-deep .dialog-wrapper .popup-actions-btn .yes-btn {\n border:1px solid var(--primary-color);\n background: transparent;\n color: var(--primary-color);\n font-size: 16px;\n font-weight: 700;\n line-height: 34px;\n text-align: center;\n border-radius: 10px;\n box-shadow: none;\n}\n::ng-deep .dialog-wrapper .popup-actions-btn .yes-btn:focus {\n box-shadow: none !important;\n}\n::ng-deep .dialog-wrapper .k-window-title {\n font-size: 30px;\n font-weight: 500;\n line-height: 36px;\n text-align: left;\n color: var(--text-darked);\n}\n::ng-deep .dialog-wrapper p {\n font-size: 16px;\n font-weight: 500;\n line-height: 20px;\n text-align: left;\n color: var(--black);\n}\n\n.margin-left-small {\n margin-left: 10px;\n}\n\n.card-wrapper {\n min-width: 230px;\n height: 150px;\n min-height: 125px;\n}\n\n.padding-top-small {\n padding-top: 10px;\n}\n\n.cursor-pointer {\n cursor: pointer;\n}\n\n.title-folder {\n padding-right: 20px;\n margin: auto;\n}\n\n.title-flex-display {\n display: flex;\n flex-direction: row;\n}", "\n.main-area {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n gap: 24px;\n padding: 24px 0;\n}\n.list-view {\n padding: 16px;\n min-width: 300px;\n border-radius: 4px;\n background: #FAFAFA;\n border: none;\n}\n::ng-deep .list-view .k-listview-header, \n::ng-deep .list-view .k-listview-footer {\n border: none;\n}\n::ng-deep .list-view .k-listview-content {\n border: 1px solid rgba(0, 0, 0, 0.08);\n border-radius: 4px;\n background: #fff;\n padding: 16px;\n}\n\n.header,\n.footer {\n color: #424242;\n font-size: 16px;\n height: auto;\n margin:0;\n}\n\n.header {\n color: #424242;\n margin-bottom: 16px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n.header .head-tag {\n display: flex;\n align-items: center;\n gap: 8px;\n color: #424242;\nfont-size: 16px;\nfont-style: normal;\nfont-weight: 400;\nline-height: 20px;\n}\n\n.header .count {\n width: 24px;\n height: 24px;\n min-width: 24px;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 10px;\n background: rgba(0, 0, 0, 0.08);\n border-radius: 50%;\n}\n.footer {\n font-size: 14px;\n margin-top: 16px;\n}\n\n.list-item {\n color: #424242;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 30px;\n cursor: pointer;\n margin: 4px;\n}\n.card-container {\n margin: 0;\n padding: 0;\n box-shadow: none;\n}\n.card-header-entity {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n padding-bottom: 20px;\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n.card-header-entity .title-wrap h1 {\n color: #424242;\n font-size: 28px;\n font-style: normal;\n font-weight: 300;\n line-height: 28px;\n margin-bottom: 15px;\n}\n.card-header-entity .title-wrap {\n display: flex;\n flex-direction: column;\n}\n.card-header-entity .title-wrap p {\n margin: 0;\n display: flex;\n align-items: center;\n gap: 8px;\n color: #424242;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n}\n\n\n\n\n \n.view-card .view-icon {\n color: var(--sideNav);\n}\n.card-wrapper {\n border: 1px solid rgba(0, 0, 0, 0.08);\n border-radius: 6px;\n width: 100% !important;\n}\n.card-wrapper .k-card-body {\n background: #fff;\n padding: 12px 20px;\n}\n.card-wrapper .view-card {\n overflow: auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: #fafafa;\n padding: 4px 15px;\n}\n.view-card .btn-wrapper {\n display: flex;\n align-items: center;\n}\n\n.k-card-body .view-card-content h5 {\n color: #424242;\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n margin-bottom: 0;\n letter-spacing: 0.18px;\n}\n.k-card-body .view-card-content p {\n color: #666;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n height: 48px;\n margin-bottom: 0;\n}\n.card-container {\n padding: 0;\n margin: 0;\n box-shadow: none;\n}\n.card-header-entity {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n padding-bottom: 20px;\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n\n.card-header-entity .title-wrap h1 {\n color: #424242;\n font-size: 28px;\n font-style: normal;\n font-weight: 300;\n line-height: 28px;\n margin-bottom: 15px;\n}\n.card-header-entity .title-wrap {\n display: flex;\n flex-direction: column;\n}\n.card-header-entity .title-wrap p {\n margin: 0;\n display: flex;\n align-items: center;\n gap: 8px;\n color: #424242;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n}\n.main-area .card-list {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 20px;\n}\n"] }]
614
- }], () => [{ type: i1.SharedService }], { showLoader: [{
640
+ args: [{ selector: 'app-generic-browser-list', template: "\n<div class=\"generic-browser-list-container\">\n <div class=\"main-fav-wrapper\">\n <div class=\"title-wrapper\">\n <div class=\"title-flex-display\">\n @if(selectedFolderID){\n <span title=\"Folder\" class=\"title-folder fa-regular fa-folder fa-2xl\"></span>\n }\n <h4>{{title}}</h4>\n </div>\n <kendo-dropdownbutton class=\"custom-dropdwn\" (itemClick)=\"onDropdownItemClick($event)\" [data]=\"createButtonDropdownData\" themeColor=\"info\">\n <span class=\"fa-solid fa-plus\"></span>\n Create New\n </kendo-dropdownbutton>\n </div>\n <div class=\"title-wrapper\">\n <div class=\"search\">\n <kendo-textbox \n type=\"text\" \n #searchInput \n placeholder=\"Search\" \n (keyup)=\"onKeyup(searchInput.value)\"\n [clearButton]=\"true\"\n size=\"large\"\n rounded=\"large\"\n fillMode=\"solid\"\n >\n <ng-template kendoTextBoxPrefixTemplate [showSeparator]=\"true\">\n <span class=\"fa-solid fa-magnifying-glass margin-left-small\"></span>\n </ng-template>\n </kendo-textbox>\n </div>\n <div class=\"filter-wrapper\">\n <!--\n <kendo-dropdownbutton [data]=\"data\" themeColor=\"primary\">\n Sort By Recents\n </kendo-dropdownbutton>\n -->\n <button kendobutton (click)=\"changeViewMode('grid')\" class=\"cursor-pointer grid-btn btn-cmn\">\n <span class=\"fa-solid fa-bars\"></span>\n </button>\n <button kendobutton (click)=\"changeViewMode('list')\" class=\"cursor-pointer active btn-cmn\">\n <span class=\"fa-solid fa-table-cells-large\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"main-area\">\n <kendo-loader *ngIf=\"showLoader\" type=\"converging-spinner\"></kendo-loader>\n @if(!showLoader){\n @if(displayAsGrid){\n <kendo-grid (cellClick)=\"onCellItemClicked($event)\" [kendoGridBinding]=\"items\">\n <kendo-grid-column field=\"Name\" title=\"Name\"></kendo-grid-column>\n <kendo-grid-column field=\"Size\" title=\"Size\"></kendo-grid-column>\n <kendo-grid-column field=\"LastOpened\" title=\"Last Opened\"></kendo-grid-column>\n <kendo-grid-column field=\"ModifiedBy\" title=\"Modified By\"></kendo-grid-column>\n <kendo-grid-column title=\"\">\n <ng-template kendoGridCellTemplate let-dataItem>\n <div class=\"grid-wrapper\">\n @if(disableEditButton){\n <button class=\"list-btn\" (click)=\"editItem(dataItem)\">\n <span class=\"fa-regular fa-pen-to-square\"></span>\n </button>\n }\n <button class=\"list-btn\" (click)=\"deleteItem(dataItem)\">\n <span class=\"fa-regular fa-trash-can\"></span>\n </button>\n </div>\n </ng-template>\n </kendo-grid-column>\n </kendo-grid>\n }\n @else{\n <div class=\"card-list k-d-flex k-flex-row k-h-full k-flex-wrap\">\n @for(item of items; track item){\n <kendo-card class=\"card-wrapper cursor-pointer\">\n <div class=\"list-item-icon\">\n @if(!disableEditButton){\n <button (click)=\"editItem(item)\" class=\"list-btn\">\n <span class=\"fa-regular fa-pen-to-square\"></span>\n </button>\n }\n <button (click)=\"deleteItem(item)\" class=\"list-btn\">\n <span class=\"fa-regular fa-trash-can\"></span>\n </button>\n </div>\n <kendo-card-body (click)=\"itemClick(item)\">\n <span (title)=\"item.Name\" [ngClass]=\"getIconForResourceType(item)\"></span>\n <div class=\"padding-top-small\">\n <h5 kendoCardTitle>{{ item.Name }}</h5>\n <p kendoCardSubtitle>{{ item.Description }}</p>\n </div>\n </kendo-card-body>\n </kendo-card>\n }\n </div>\n }\n }\n </div>\n </div>\n\n <kendo-dialog \n [minWidth]=\"450\"\n [width]=\"650\"\n class=\"dialog-wrapper\" \n title=\"Confirm\" \n *ngIf=\"deleteDialogOpened\" \n (close)=\"onConfirmDeleteItem(false)\">\n <p class=\"k-m-7.5 k-text-center\">\n Are you sure you want to delete <b>{{selectedItem?.Name}}?</b>\n </p>\n <kendo-dialog-actions class=\"popup-actions-btn\">\n <button class=\"cancel-btn\" (click)=\"onConfirmDeleteItem(true)\" kendoButton themeColor=\"info\">\n Yes, Delete\n </button>\n <button class=\"yes-btn\" (click)=\"onConfirmDeleteItem(false)\" kendoButton fillMode=\"outline\" themeColor=\"info\">\n No, Cancel\n </button>\n </kendo-dialog-actions>\n </kendo-dialog>\n\n <kendo-dialog \n title=\"Create new Folder\" \n *ngIf=\"createFolderDialogOpened\" \n (close)=\"toggleCreateFolderView()\"\n [minWidth]=\"250\"\n [width]=\"450\"\n class=\"dialog-wrapper\"\n >\n <div class=\"search\">\n <kendo-textbox placeholder=\"Enter a folder name\" (valueChange)=\"onCreateFolderKeyup($event)\"/>\n </div>\n <kendo-dialog-actions class=\"popup-actions-btn\">\n <button class=\"cancel-btn\" (click)=\"createFolder()\" kendoButton themeColor=\"info\">\n Create\n </button>\n <button class=\"yes-btn\" (click)=\"toggleCreateFolderView()\" kendoButton fillMode=\"outline\" themeColor=\"info\">\n Cancel\n </button>\n </kendo-dialog-actions>\n </kendo-dialog>\n <mj-entity-form-dialog\n #entityFormDialog\n Mode=\"complete\"\n >\n </mj-entity-form-dialog>\n</div>\n", styles: ["::ng-deep .card-header-entity .title-wrap h1 {\n margin: 0 !important;\n font-size: 36px !important;\n line-height: 42px !important;\n color: var(--black) !important;\n}\n ::ng-deep .card-header-entity .add-item .k-button {\n border: 1px solid var(--border-blue) !important;\n background: var(--white-color) !important;\n color: var(--border-blue);\n font-weight: 500 ;\n font-size: 16px ;\n border-radius: 10px;\n line-height: 34px;\n}\n::ng-deep .card-header-entity .add-item .k-button:hover {\n background: var(--border-blue) !important;\n color: var(--white-color);\n}\n::ng-deep .card-header-entity .add-item .k-button:hover .k-button-text svg path {\n fill: var(--white-color) !important;\n}\n .title-wrapper {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 14px 0;\n border-bottom: 1px solid var(--med-gray);\n}\n .title-wrapper h4 {\n margin: 0;\n font-size: 24px;\n line-height: 28px;\n }\n .main-fav-wrapper {\n background: #fff;\n padding: 20px;\n }\n .filter-wrapper {\n display: flex;\n justify-content: flex-start;\n gap: 14px;\n align-items: center;\n}\n .title-wrapper .search input {\n width: 100%;\n height: 100%;\n font-size: 16px;\n background: transparent;\n border: none;\n box-sizing: border-box;\n padding-left: 40px;\n\n }\n .title-wrapper .search {\n background: var(--light-shade);\n width: 360px;\n height: 44px;\n position: relative;\n border-radius: 10px;\n }\n .title-wrapper .search svg {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: 12px;\n}\n::ng-deep .main-fav-wrapper .title-wrapper .k-dropdown-button .k-button {\n background: var(--border-blue);\n color: var(--white-color);\n font-size: 16px;\n border: none;\n padding: 8px 25px;\n border-radius: 10px;\n}\n::ng-deep .main-fav-wrapper .title-wrapper .k-dropdown-button .k-button .k-button-text, ::ng-deep .card-header-entity .add-item .k-button .k-button-text {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.btn-cmn {\n width: 44px;\n height: 44px;\n min-width: 44px;\n background: transparent;\n border-radius: 8px;\n border: 1px solid var(--gray-color);\n}\n.btn-cmn.active {\n border: 1px solid var(--border-blue);\n}\n::ng-deep .main-fav-wrapper .title-wrapper .filter-wrapper .k-dropdown-button .k-button {\n border: 1px solid var(--gray-color);\n border-radius: 8px; padding: 10px 25px;\n background: var(--white-color);\n color: var(--sideNav);\n}\n::ng-deep .main-area .card-list .card-wrapper .k-card-body {\n padding: 16px !important;\n position: relative;\n}\n::ng-deep .main-fav-wrapper .main-area .card-list .card-wrapper .list-item-icon {\n position: absolute;\n display: flex;\n align-items: center;\n gap: 8px;\n top:12px;\n right: 12px;\n z-index: 9;\n}\n.grid-wrapper {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n::ng-deep .main-fav-wrapper .main-area .card-list .card-wrapper .list-item-icon .common-btn, .list-btn {\n width: 38px;\n height: 38px;\n background: #000;\n min-width: 38px;\n border: 1px solid var(--gray-color);\n border-radius: 8px; \n display: flex;\n justify-content: center;\n align-items: center;\n background: transparent;\n cursor: pointer;\n}\n::ng-deep .main-fav-wrapper .main-area .card-list .card-wrapper .k-card-body .list-item-icon:hover, .list-btn:hover {\n border: 1px solid var(--border-active);\n}\n\n\n::ng-deep .main-area .card-list .card-wrapper:hover {\n box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\n border: 1px solid var(--border-active);\n}\n::ng-deep .main-area .card-list .card-wrapper:hover .k-card-body .view-card-content-list h5 {\n color: var(--border-blue);\n}\n::ng-deep .main-area .card-list .card-wrapper .k-card-body .view-card-content-list p {\n color: var(--sideNav);\n font-size: 14px;\n line-height: 16px;\n height: auto;\n text-overflow: ellipsis;\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n\n}\n::ng-deep .main-area .card-list .card-wrapper .k-card-body .view-card-content-list h5 {\n font-size: 18px;\n line-height: 21px;\n color: var(--text-darked);\n font-weight: 600;\n}\n.breadcrumb-wrap {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 0;\n}\n.breadcrumb-wrap span {\n font-size: 16px;\n line-height: 18px;\n font-weight: 400;\n color: var(--black);\n}\n::ng-deep .k-menu-popup {\n box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\n border-radius: 10px;\n padding: 16px;\n}\n\n::ng-deep .k-menu-popup kendo-button-list ul li .k-menu-link {\n box-shadow: none !important;\n} \n::ng-deep .k-menu-popup kendo-button-list ul li .k-menu-link:active {\n background: transparent !important;\n}\n::ng-deep .k-menu-popup kendo-button-list ul li .k-menu-link .k-menu-link-text:hover {\n color: var(--primary-color);\n background: transparent !important;\n\n}\n::ng-deep .dialog-wrapper .popup-actions-btn button {\n flex: 1;\n}\n::ng-deep .dialog-wrapper .popup-actions-btn {\n display: flex;\n}\n::ng-deep .dialog-wrapper .popup-actions-btn .cancel-btn {\n background: var(--primary-color);\n color: var(--white-color);\n font-size: 16px;\n font-weight: 700;\n line-height: 34px;\n text-align: center;\n border-radius: 10px;\n border: 1px solid transparent;\n\n}\n::ng-deep .dialog-wrapper .popup-actions-btn .yes-btn {\n border:1px solid var(--primary-color);\n background: transparent;\n color: var(--primary-color);\n font-size: 16px;\n font-weight: 700;\n line-height: 34px;\n text-align: center;\n border-radius: 10px;\n box-shadow: none;\n}\n::ng-deep .dialog-wrapper .popup-actions-btn .yes-btn:focus {\n box-shadow: none !important;\n}\n::ng-deep .dialog-wrapper .k-window-title {\n font-size: 30px;\n font-weight: 500;\n line-height: 36px;\n text-align: left;\n color: var(--text-darked);\n}\n::ng-deep .dialog-wrapper p {\n font-size: 16px;\n font-weight: 500;\n line-height: 20px;\n text-align: left;\n color: var(--black);\n}\n\n.margin-left-small {\n margin-left: 10px;\n}\n\n.card-wrapper {\n min-width: 230px;\n height: 150px;\n min-height: 125px;\n}\n\n.padding-top-small {\n padding-top: 10px;\n}\n\n.cursor-pointer {\n cursor: pointer;\n}\n\n.title-folder {\n padding-right: 20px;\n margin: auto;\n}\n\n.title-flex-display {\n display: flex;\n flex-direction: row;\n}", "\n.main-area {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n gap: 24px;\n padding: 24px 0;\n}\n.list-view {\n padding: 16px;\n min-width: 300px;\n border-radius: 4px;\n background: #FAFAFA;\n border: none;\n}\n::ng-deep .list-view .k-listview-header, \n::ng-deep .list-view .k-listview-footer {\n border: none;\n}\n::ng-deep .list-view .k-listview-content {\n border: 1px solid rgba(0, 0, 0, 0.08);\n border-radius: 4px;\n background: #fff;\n padding: 16px;\n}\n\n.header,\n.footer {\n color: #424242;\n font-size: 16px;\n height: auto;\n margin:0;\n}\n\n.header {\n color: #424242;\n margin-bottom: 16px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n.header .head-tag {\n display: flex;\n align-items: center;\n gap: 8px;\n color: #424242;\nfont-size: 16px;\nfont-style: normal;\nfont-weight: 400;\nline-height: 20px;\n}\n\n.header .count {\n width: 24px;\n height: 24px;\n min-width: 24px;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 10px;\n background: rgba(0, 0, 0, 0.08);\n border-radius: 50%;\n}\n.footer {\n font-size: 14px;\n margin-top: 16px;\n}\n\n.list-item {\n color: #424242;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 30px;\n cursor: pointer;\n margin: 4px;\n}\n.card-container {\n margin: 0;\n padding: 0;\n box-shadow: none;\n}\n.card-header-entity {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n padding-bottom: 20px;\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n.card-header-entity .title-wrap h1 {\n color: #424242;\n font-size: 28px;\n font-style: normal;\n font-weight: 300;\n line-height: 28px;\n margin-bottom: 15px;\n}\n.card-header-entity .title-wrap {\n display: flex;\n flex-direction: column;\n}\n.card-header-entity .title-wrap p {\n margin: 0;\n display: flex;\n align-items: center;\n gap: 8px;\n color: #424242;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n}\n\n\n\n\n \n.view-card .view-icon {\n color: var(--sideNav);\n}\n.card-wrapper {\n border: 1px solid rgba(0, 0, 0, 0.08);\n border-radius: 6px;\n width: 100% !important;\n}\n.card-wrapper .k-card-body {\n background: #fff;\n padding: 12px 20px;\n}\n.card-wrapper .view-card {\n overflow: auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: #fafafa;\n padding: 4px 15px;\n}\n.view-card .btn-wrapper {\n display: flex;\n align-items: center;\n}\n\n.k-card-body .view-card-content h5 {\n color: #424242;\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n margin-bottom: 0;\n letter-spacing: 0.18px;\n}\n.k-card-body .view-card-content p {\n color: #666;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n height: 48px;\n margin-bottom: 0;\n}\n.card-container {\n padding: 0;\n margin: 0;\n box-shadow: none;\n}\n.card-header-entity {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n padding-bottom: 20px;\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n\n.card-header-entity .title-wrap h1 {\n color: #424242;\n font-size: 28px;\n font-style: normal;\n font-weight: 300;\n line-height: 28px;\n margin-bottom: 15px;\n}\n.card-header-entity .title-wrap {\n display: flex;\n flex-direction: column;\n}\n.card-header-entity .title-wrap p {\n margin: 0;\n display: flex;\n align-items: center;\n gap: 8px;\n color: #424242;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n}\n.main-area .card-list {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 20px;\n}\n"] }]
641
+ }], () => [{ type: i1.SharedService }], { entityFormDialogRef: [{
642
+ type: ViewChild,
643
+ args: ['entityFormDialog']
644
+ }], showLoader: [{
615
645
  type: Input
616
646
  }], itemType: [{
617
647
  type: Input
@@ -47,6 +47,6 @@ export declare class HeaderComponent implements OnInit {
47
47
  private isMicrosoft;
48
48
  onSearch(event: any): void;
49
49
  static ɵfac: i0.ɵɵFactoryDeclaration<HeaderComponent, never>;
50
- static ɵcmp: i0.ɵɵComponentDeclaration<HeaderComponent, "app-header-component", never, { "applicationName": { "alias": "applicationName"; "required": false; }; "applicationInstance": { "alias": "applicationInstance"; "required": false; }; }, { "toggle": "toggle"; }, never, never, false, never>;
50
+ static ɵcmp: i0.ɵɵComponentDeclaration<HeaderComponent, "mj-header-component", never, { "applicationName": { "alias": "applicationName"; "required": false; }; "applicationInstance": { "alias": "applicationInstance"; "required": false; }; }, { "toggle": "toggle"; }, never, never, false, never>;
51
51
  }
52
52
  //# sourceMappingURL=header.component.d.ts.map
@@ -147,7 +147,7 @@ export class HeaderComponent {
147
147
  }
148
148
  }
149
149
  HeaderComponent.ɵfac = function HeaderComponent_Factory(t) { return new (t || HeaderComponent)(i0.ɵɵdirectiveInject(i1.MJAuthBase), i0.ɵɵdirectiveInject(i2.SharedService), i0.ɵɵdirectiveInject(i3.MSFTUserImageService), i0.ɵɵdirectiveInject(i4.Router)); };
150
- HeaderComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HeaderComponent, selectors: [["app-header-component"]], viewQuery: function HeaderComponent_Query(rf, ctx) { if (rf & 1) {
150
+ HeaderComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HeaderComponent, selectors: [["mj-header-component"]], viewQuery: function HeaderComponent_Query(rf, ctx) { if (rf & 1) {
151
151
  i0.ɵɵviewQuery(_c0, 5);
152
152
  i0.ɵɵviewQuery(DropDownListComponent, 5);
153
153
  } if (rf & 2) {
@@ -196,7 +196,7 @@ HeaderComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HeaderCompo
196
196
  } }, dependencies: [i5.NgIf, i6.NgControlStatus, i6.NgModel, i7.BadgeComponent, i7.BadgeContainerComponent, i8.TextBoxDirective, i9.AvatarComponent, i9.CardMediaDirective, i10.DropDownListComponent], styles: [".header-wrap[_ngcontent-%COMP%] {\n flex: auto;\n}\n\n.title[_ngcontent-%COMP%] {\n font-size: x-large; \n}\n.app-logo[_ngcontent-%COMP%] {\n width: 297px;\n}\n.user-info[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n}\n\n.user-info[_ngcontent-%COMP%] kendo-dropdownlist[_ngcontent-%COMP%] {\n border: none;\n background: transparent;\n width: auto;\n color: #fff;\n}\n.user-info-wrapper[_ngcontent-%COMP%] {\n display: flex;\n gap: 40px;\n align-items: center;\n}\n.icon-inbox[_ngcontent-%COMP%] {\n position: relative;\n cursor: pointer;\n}\n.icon-inbox[_ngcontent-%COMP%] .k-svg-icon[_ngcontent-%COMP%] {\n width: 28px;\n height: 28px;\n min-width: 28px;\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.user-info-wrapper[_ngcontent-%COMP%] .header[_ngcontent-%COMP%] .k-avatar[_ngcontent-%COMP%] {\n padding-left: 25px;\n border-left: 2px solid #fff;\n}\n.search-wrapper[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n position: relative;\n max-width: 526px;\n width: 100%;\n height: 44px;\n}\n .search-wrapper #txtSearch::placeholder, .search-wrapper input::placeholder {\n color: #54585F;\n}\n.search-wrapper[_ngcontent-%COMP%] .k-input[_ngcontent-%COMP%]::placeholder {\n color: #54585F;\n}\n.search-wrapper[_ngcontent-%COMP%] .k-input[_ngcontent-%COMP%]{\nbackground: var(--light-gray);\nborder-radius: 0 10px 10px 0;\nwidth: 360px;\nheight: 44px;\ncolor: var(--text-darked);\n}\n.search-wrapper[_ngcontent-%COMP%] .k-dropdownlist[_ngcontent-%COMP%] {\n width: 170px; \n height: 100%;\n background: var(--gray-color);\n border-radius: 10px 0px 0px 10px;\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n line-height: 19px;\n letter-spacing: 0em;\n text-align: center;\n color: var(--text-darked);\n}\n.search-wrapper[_ngcontent-%COMP%] .k-icon[_ngcontent-%COMP%] {\n color: var(--text-darked);\n position: absolute;\n right: 10px;\n top: 50%;\n transform: translateY(-50%);\n z-index: 9;\n cursor: pointer;\n margin-right: 2px;\n} \n.k-input[_ngcontent-%COMP%] {\n color: black;\n}\n\n\n\n\n@media (max-width: 1700px) {\n .title[_ngcontent-%COMP%] {\n font-size: x-small; \n\n }\n \n\n\n\n\n}\n@media (max-width: 1200px) {\n .title[_ngcontent-%COMP%] {\n display: none;\n }\n .app-logo[_ngcontent-%COMP%] {\n display: none\n }\n\n .search-wrapper[_ngcontent-%COMP%] {\n width: 350px;\n } \n .search-entity-list[_ngcontent-%COMP%] {\n width: 150px; \n }\n}"] });
197
197
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HeaderComponent, [{
198
198
  type: Component,
199
- args: [{ selector: 'app-header-component', template: "<div class=\"header-wrap\">\n <div class=\"header header-bg\">\n <div class=\"nav-container\">\n <div class=\"menu-button\">\n <span class=\"k-icon\" (click)=\"onButtonClick()\">\n <span class=\"fa-solid fa-bars fa-xl\"></span>\n </span>\n </div>\n\n <div class=\"title\">\n <img kendoCardMedia src=\"assets/MJ_logo.svg\" height=\"45px\" class=\"app-logo\" />\n </div>\n\n <div class=\"user-info-wrapper\">\n <div class=\"search-wrapper\">\n <kendo-dropdownlist\n [data]=\"searchableEntities\"\n textField=\"Name\"\n valueField=\"ID\"\n class = \"search-entity-list\"\n [(ngModel)]=\"selectedEntity\"\n >\n </kendo-dropdownlist>\n <input \n type=\"text\"\n id=\"txtSearch\"\n placeholder=\"Search\"\n kendoTextBox\n (keydown.enter)=\"onSearch($event)\"\n #searchInput\n />\n <span class=\"k-icon\" (click)=\"onSearch($event)\">\n <span class=\"fa-solid fa-magnifying-glass\"></span>\n </span>\n </div>\n <div class=\"icon-inbox\" (click)=\"showNotifications($event)\">\n <kendo-badge-container>\n <i class=\"fa-solid fa-inbox fa-xl\"></i>\n <kendo-badge class=\"notification\" *ngIf=\"UnreadNotificationCount > 0\">{{UnreadNotificationCount}}</kendo-badge>\n </kendo-badge-container>\n <!--\n <span class=\"k-icon\" style=\"cursor: pointer;\">\n <span class=\"fa-solid fa-inbox fa-xl\">\n </span>\n </span>\n <span ></span>\n -->\n </div>\n <div class=\"user-info\">\n <kendo-avatar class=\"k-m-0\" style=\"margin: 0;\" [imageSrc]=\"userImageURL\" shape=\"circle\"> </kendo-avatar>\n <div class=\"example-col\">\n <kendo-dropdownlist [data]=\"menuItems\" [value]=\"selectedMenuItem\" (valueChange)=\"valueChange($event)\">\n </kendo-dropdownlist>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [".header-wrap {\n flex: auto;\n}\n\n.title {\n font-size: x-large; \n}\n.app-logo {\n width: 297px;\n}\n.user-info {\n display: flex;\n align-items: center;\n}\n\n.user-info kendo-dropdownlist {\n border: none;\n background: transparent;\n width: auto;\n color: #fff;\n}\n.user-info-wrapper {\n display: flex;\n gap: 40px;\n align-items: center;\n}\n.icon-inbox {\n position: relative;\n cursor: pointer;\n}\n.icon-inbox .k-svg-icon {\n width: 28px;\n height: 28px;\n min-width: 28px;\n}\n/* .icon-inbox .notification {\n position: absolute;\n top: -8px;\n right: -8px;\n width: 16px;\n height: 16px;\n min-width: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #ff6358;\n border-radius: 50%;\n color: #fff;\n font-size: 10px;\n} */\n.user-info-wrapper .header .k-avatar {\n padding-left: 25px;\n border-left: 2px solid #fff;\n}\n.search-wrapper {\n display: flex;\n align-items: center;\n position: relative;\n max-width: 526px;\n width: 100%;\n height: 44px;\n}\n::ng-deep .search-wrapper #txtSearch::placeholder, ::ng-deep .search-wrapper input::placeholder {\n color: #54585F;\n}\n.search-wrapper .k-input::placeholder {\n color: #54585F;\n}\n.search-wrapper .k-input{\nbackground: var(--light-gray);\nborder-radius: 0 10px 10px 0;\nwidth: 360px;\nheight: 44px;\ncolor: var(--text-darked);\n}\n.search-wrapper .k-dropdownlist {\n width: 170px; \n height: 100%;\n background: var(--gray-color);\n border-radius: 10px 0px 0px 10px;\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n line-height: 19px;\n letter-spacing: 0em;\n text-align: center;\n color: var(--text-darked);\n}\n.search-wrapper .k-icon {\n color: var(--text-darked);\n position: absolute;\n right: 10px;\n top: 50%;\n transform: translateY(-50%);\n z-index: 9;\n cursor: pointer;\n margin-right: 2px;\n} \n.k-input {\n color: black;\n}\n\n\n/*RESPONSIVE STUFF HERE */\n@media (max-width: 1700px) {\n .title {\n font-size: x-small; /* or any other size you prefer */\n }\n /* .app-logo {\n width: 50px;\n height: 25px;\n } */\n}\n@media (max-width: 1200px) {\n .title {\n display: none;\n }\n .app-logo {\n display: none\n }\n\n .search-wrapper {\n width: 350px;\n } \n .search-entity-list {\n width: 150px; \n }\n}\n"] }]
199
+ args: [{ selector: 'mj-header-component', template: "<div class=\"header-wrap\">\n <div class=\"header header-bg\">\n <div class=\"nav-container\">\n <div class=\"menu-button\">\n <span class=\"k-icon\" (click)=\"onButtonClick()\">\n <span class=\"fa-solid fa-bars fa-xl\"></span>\n </span>\n </div>\n\n <div class=\"title\">\n <img kendoCardMedia src=\"assets/MJ_logo.svg\" height=\"45px\" class=\"app-logo\" />\n </div>\n\n <div class=\"user-info-wrapper\">\n <div class=\"search-wrapper\">\n <kendo-dropdownlist\n [data]=\"searchableEntities\"\n textField=\"Name\"\n valueField=\"ID\"\n class = \"search-entity-list\"\n [(ngModel)]=\"selectedEntity\"\n >\n </kendo-dropdownlist>\n <input \n type=\"text\"\n id=\"txtSearch\"\n placeholder=\"Search\"\n kendoTextBox\n (keydown.enter)=\"onSearch($event)\"\n #searchInput\n />\n <span class=\"k-icon\" (click)=\"onSearch($event)\">\n <span class=\"fa-solid fa-magnifying-glass\"></span>\n </span>\n </div>\n <div class=\"icon-inbox\" (click)=\"showNotifications($event)\">\n <kendo-badge-container>\n <i class=\"fa-solid fa-inbox fa-xl\"></i>\n <kendo-badge class=\"notification\" *ngIf=\"UnreadNotificationCount > 0\">{{UnreadNotificationCount}}</kendo-badge>\n </kendo-badge-container>\n <!--\n <span class=\"k-icon\" style=\"cursor: pointer;\">\n <span class=\"fa-solid fa-inbox fa-xl\">\n </span>\n </span>\n <span ></span>\n -->\n </div>\n <div class=\"user-info\">\n <kendo-avatar class=\"k-m-0\" style=\"margin: 0;\" [imageSrc]=\"userImageURL\" shape=\"circle\"> </kendo-avatar>\n <div class=\"example-col\">\n <kendo-dropdownlist [data]=\"menuItems\" [value]=\"selectedMenuItem\" (valueChange)=\"valueChange($event)\">\n </kendo-dropdownlist>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [".header-wrap {\n flex: auto;\n}\n\n.title {\n font-size: x-large; \n}\n.app-logo {\n width: 297px;\n}\n.user-info {\n display: flex;\n align-items: center;\n}\n\n.user-info kendo-dropdownlist {\n border: none;\n background: transparent;\n width: auto;\n color: #fff;\n}\n.user-info-wrapper {\n display: flex;\n gap: 40px;\n align-items: center;\n}\n.icon-inbox {\n position: relative;\n cursor: pointer;\n}\n.icon-inbox .k-svg-icon {\n width: 28px;\n height: 28px;\n min-width: 28px;\n}\n/* .icon-inbox .notification {\n position: absolute;\n top: -8px;\n right: -8px;\n width: 16px;\n height: 16px;\n min-width: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #ff6358;\n border-radius: 50%;\n color: #fff;\n font-size: 10px;\n} */\n.user-info-wrapper .header .k-avatar {\n padding-left: 25px;\n border-left: 2px solid #fff;\n}\n.search-wrapper {\n display: flex;\n align-items: center;\n position: relative;\n max-width: 526px;\n width: 100%;\n height: 44px;\n}\n::ng-deep .search-wrapper #txtSearch::placeholder, ::ng-deep .search-wrapper input::placeholder {\n color: #54585F;\n}\n.search-wrapper .k-input::placeholder {\n color: #54585F;\n}\n.search-wrapper .k-input{\nbackground: var(--light-gray);\nborder-radius: 0 10px 10px 0;\nwidth: 360px;\nheight: 44px;\ncolor: var(--text-darked);\n}\n.search-wrapper .k-dropdownlist {\n width: 170px; \n height: 100%;\n background: var(--gray-color);\n border-radius: 10px 0px 0px 10px;\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n line-height: 19px;\n letter-spacing: 0em;\n text-align: center;\n color: var(--text-darked);\n}\n.search-wrapper .k-icon {\n color: var(--text-darked);\n position: absolute;\n right: 10px;\n top: 50%;\n transform: translateY(-50%);\n z-index: 9;\n cursor: pointer;\n margin-right: 2px;\n} \n.k-input {\n color: black;\n}\n\n\n/*RESPONSIVE STUFF HERE */\n@media (max-width: 1700px) {\n .title {\n font-size: x-small; /* or any other size you prefer */\n }\n /* .app-logo {\n width: 50px;\n height: 25px;\n } */\n}\n@media (max-width: 1200px) {\n .title {\n display: none;\n }\n .app-logo {\n display: none\n }\n\n .search-wrapper {\n width: 350px;\n } \n .search-entity-list {\n width: 150px; \n }\n}\n"] }]
200
200
  }], () => [{ type: i1.MJAuthBase }, { type: i2.SharedService }, { type: i3.MSFTUserImageService }, { type: i4.Router }], { applicationName: [{
201
201
  type: Input
202
202
  }], applicationInstance: [{