@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.
- package/dist/app-routing.module.d.ts +8 -2
- package/dist/app-routing.module.d.ts.map +1 -1
- package/dist/app-routing.module.js +29 -6
- package/dist/lib/app-view/application-view.component.d.ts.map +1 -1
- package/dist/lib/app-view/application-view.component.js +34 -24
- package/dist/lib/base-browser-component/base-browser-component.d.ts +3 -2
- package/dist/lib/base-browser-component/base-browser-component.d.ts.map +1 -1
- package/dist/lib/base-browser-component/base-browser-component.js +5 -4
- package/dist/lib/generic/resource-container-component.d.ts.map +1 -1
- package/dist/lib/generic-browser-list/generic-browser-list.component.d.ts +4 -0
- package/dist/lib/generic-browser-list/generic-browser-list.component.d.ts.map +1 -1
- package/dist/lib/generic-browser-list/generic-browser-list.component.js +104 -74
- package/dist/lib/header/header.component.d.ts +1 -1
- package/dist/lib/header/header.component.js +2 -2
- package/dist/lib/home-component/home.component.js +11 -5
- package/dist/lib/list-view/list-view.component.d.ts +36 -0
- package/dist/lib/list-view/list-view.component.d.ts.map +1 -0
- package/dist/lib/list-view/list-view.component.js +189 -0
- package/dist/lib/navigation/navigation.component.d.ts +32 -6
- package/dist/lib/navigation/navigation.component.d.ts.map +1 -1
- package/dist/lib/navigation/navigation.component.js +123 -46
- package/dist/lib/resource-wrappers/record-resource.component.d.ts +2 -2
- package/dist/lib/resource-wrappers/record-resource.component.d.ts.map +1 -1
- package/dist/lib/resource-wrappers/record-resource.component.js +15 -11
- package/dist/lib/single-list-detail/single-list-detail.component.d.ts +26 -0
- package/dist/lib/single-list-detail/single-list-detail.component.d.ts.map +1 -0
- package/dist/lib/single-list-detail/single-list-detail.component.js +213 -0
- package/dist/lib/single-record/single-record.component.d.ts +7 -4
- package/dist/lib/single-record/single-record.component.d.ts.map +1 -1
- package/dist/lib/single-record/single-record.component.js +83 -29
- package/dist/lib/single-view/single-view.component.d.ts +2 -0
- package/dist/lib/single-view/single-view.component.d.ts.map +1 -1
- package/dist/lib/single-view/single-view.component.js +27 -26
- package/dist/lib/user-notifications/user-notifications.component.d.ts.map +1 -1
- package/dist/lib/user-notifications/user-notifications.component.js +2 -1
- package/dist/module.d.ts +38 -37
- package/dist/module.d.ts.map +1 -1
- package/dist/module.js +18 -14
- package/dist/public-api.d.ts +2 -2
- package/dist/public-api.d.ts.map +1 -1
- package/dist/public-api.js +2 -2
- package/package.json +17 -16
- package/dist/lib/generic/section-loader-component.d.ts +0 -18
- package/dist/lib/generic/section-loader-component.d.ts.map +0 -1
- package/dist/lib/generic/section-loader-component.js +0 -66
- package/dist/lib/join-grid/join-grid.component.d.ts +0 -31
- package/dist/lib/join-grid/join-grid.component.d.ts.map +0 -1
- 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",
|
|
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",
|
|
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",
|
|
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
|
|
35
|
-
i0.ɵɵelementStart(0, "button",
|
|
36
|
-
i0.ɵɵlistener("click", function GenericBrowserListComponent_Conditional_22_Conditional_0_ng_template_6_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(
|
|
37
|
-
i0.ɵɵelement(1, "span",
|
|
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
|
|
42
|
-
i0.ɵɵelementStart(0, "div",
|
|
43
|
-
i0.ɵɵtemplate(1, GenericBrowserListComponent_Conditional_22_Conditional_0_ng_template_6_Conditional_1_Template, 2, 0, "button",
|
|
44
|
-
i0.ɵɵelementStart(2, "button",
|
|
45
|
-
i0.ɵɵlistener("click", function GenericBrowserListComponent_Conditional_22_Conditional_0_ng_template_6_Template_button_click_2_listener() { const restoredCtx = i0.ɵɵrestoreView(
|
|
46
|
-
i0.ɵɵelement(3, "span",
|
|
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
|
|
51
|
+
const ctx_r10 = i0.ɵɵnextContext(3);
|
|
50
52
|
i0.ɵɵadvance();
|
|
51
|
-
i0.ɵɵconditional(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
|
|
55
|
-
i0.ɵɵelementStart(0, "kendo-grid",
|
|
56
|
-
i0.ɵɵlistener("cellClick", function GenericBrowserListComponent_Conditional_22_Conditional_0_Template_kendo_grid_cellClick_0_listener($event) { i0.ɵɵrestoreView(
|
|
57
|
-
i0.ɵɵelement(1, "kendo-grid-column",
|
|
58
|
-
i0.ɵɵelementStart(5, "kendo-grid-column",
|
|
59
|
-
i0.ɵɵtemplate(6, GenericBrowserListComponent_Conditional_22_Conditional_0_ng_template_6_Template, 4, 1, "ng-template",
|
|
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
|
|
63
|
-
i0.ɵɵproperty("kendoGridBinding",
|
|
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
|
|
67
|
-
i0.ɵɵelementStart(0, "button",
|
|
68
|
-
i0.ɵɵlistener("click", function GenericBrowserListComponent_Conditional_22_Conditional_1_For_2_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(
|
|
69
|
-
i0.ɵɵelement(1, "span",
|
|
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
|
|
74
|
-
i0.ɵɵelementStart(0, "kendo-card",
|
|
75
|
-
i0.ɵɵtemplate(2, GenericBrowserListComponent_Conditional_22_Conditional_1_For_2_Conditional_2_Template, 2, 0, "button",
|
|
76
|
-
i0.ɵɵelementStart(3, "button",
|
|
77
|
-
i0.ɵɵlistener("click", function GenericBrowserListComponent_Conditional_22_Conditional_1_For_2_Template_button_click_3_listener() { const restoredCtx = i0.ɵɵrestoreView(
|
|
78
|
-
i0.ɵɵelement(4, "span",
|
|
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",
|
|
81
|
-
i0.ɵɵlistener("click", function GenericBrowserListComponent_Conditional_22_Conditional_1_For_2_Template_kendo_card_body_click_5_listener() { const restoredCtx = i0.ɵɵrestoreView(
|
|
82
|
-
i0.ɵɵelementStart(6, "span",
|
|
83
|
-
i0.ɵɵlistener("title", function GenericBrowserListComponent_Conditional_22_Conditional_1_For_2_Template_span_title_6_listener() { const restoredCtx = i0.ɵɵrestoreView(
|
|
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",
|
|
87
|
+
i0.ɵɵelementStart(7, "div", 43)(8, "h5", 44);
|
|
86
88
|
i0.ɵɵtext(9);
|
|
87
89
|
i0.ɵɵelementEnd();
|
|
88
|
-
i0.ɵɵelementStart(10, "p",
|
|
90
|
+
i0.ɵɵelementStart(10, "p", 45);
|
|
89
91
|
i0.ɵɵtext(11);
|
|
90
92
|
i0.ɵɵelementEnd()()()();
|
|
91
93
|
} if (rf & 2) {
|
|
92
|
-
const
|
|
93
|
-
const
|
|
94
|
+
const item_r21 = ctx.$implicit;
|
|
95
|
+
const ctx_r20 = i0.ɵɵnextContext(3);
|
|
94
96
|
i0.ɵɵadvance(2);
|
|
95
|
-
i0.ɵɵconditional(2, !
|
|
97
|
+
i0.ɵɵconditional(2, !ctx_r20.disableEditButton ? 2 : -1);
|
|
96
98
|
i0.ɵɵadvance(4);
|
|
97
|
-
i0.ɵɵproperty("ngClass",
|
|
99
|
+
i0.ɵɵproperty("ngClass", ctx_r20.getIconForResourceType(item_r21));
|
|
98
100
|
i0.ɵɵadvance(3);
|
|
99
|
-
i0.ɵɵtextInterpolate(
|
|
101
|
+
i0.ɵɵtextInterpolate(item_r21.Name);
|
|
100
102
|
i0.ɵɵadvance(2);
|
|
101
|
-
i0.ɵɵtextInterpolate(
|
|
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",
|
|
105
|
-
i0.ɵɵrepeaterCreate(1, GenericBrowserListComponent_Conditional_22_Conditional_1_For_2_Template, 12, 4, "kendo-card",
|
|
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
|
|
110
|
+
const ctx_r9 = i0.ɵɵnextContext(2);
|
|
109
111
|
i0.ɵɵadvance();
|
|
110
|
-
i0.ɵɵrepeater(
|
|
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",
|
|
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
|
|
120
|
-
i0.ɵɵelementStart(0, "kendo-dialog",
|
|
121
|
-
i0.ɵɵlistener("close", function GenericBrowserListComponent_kendo_dialog_23_Template_kendo_dialog_close_0_listener() { i0.ɵɵrestoreView(
|
|
122
|
-
i0.ɵɵelementStart(1, "p",
|
|
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",
|
|
128
|
-
i0.ɵɵlistener("click", function GenericBrowserListComponent_kendo_dialog_23_Template_button_click_6_listener() { i0.ɵɵrestoreView(
|
|
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",
|
|
132
|
-
i0.ɵɵlistener("click", function GenericBrowserListComponent_kendo_dialog_23_Template_button_click_8_listener() { i0.ɵɵrestoreView(
|
|
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
|
|
143
|
-
i0.ɵɵelementStart(0, "kendo-dialog",
|
|
144
|
-
i0.ɵɵlistener("close", function GenericBrowserListComponent_kendo_dialog_24_Template_kendo_dialog_close_0_listener() { i0.ɵɵrestoreView(
|
|
145
|
-
i0.ɵɵelementStart(1, "div", 7)(2, "kendo-textbox",
|
|
146
|
-
i0.ɵɵlistener("valueChange", function GenericBrowserListComponent_kendo_dialog_24_Template_kendo_textbox_valueChange_2_listener($event) { i0.ɵɵrestoreView(
|
|
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",
|
|
149
|
-
i0.ɵɵlistener("click", function GenericBrowserListComponent_kendo_dialog_24_Template_button_click_4_listener() { i0.ɵɵrestoreView(
|
|
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",
|
|
153
|
-
i0.ɵɵlistener("click", function GenericBrowserListComponent_kendo_dialog_24_Template_button_click_6_listener() { i0.ɵɵrestoreView(
|
|
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"]],
|
|
563
|
-
|
|
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(
|
|
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 }], {
|
|
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, "
|
|
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: [["
|
|
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: '
|
|
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: [{
|