@memberjunction/ng-list-management 5.43.0 → 5.45.0

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 (27) hide show
  1. package/dist/lib/components/list-delta-confirm/list-delta-confirm.component.js +32 -36
  2. package/dist/lib/components/list-delta-confirm/list-delta-confirm.component.js.map +1 -1
  3. package/dist/lib/components/list-management-dialog/list-management-dialog.component.js +73 -94
  4. package/dist/lib/components/list-management-dialog/list-management-dialog.component.js.map +1 -1
  5. package/dist/lib/components/list-share-dialog/list-share-dialog.component.d.ts +5 -0
  6. package/dist/lib/components/list-share-dialog/list-share-dialog.component.d.ts.map +1 -1
  7. package/dist/lib/components/list-share-dialog/list-share-dialog.component.js +20 -22
  8. package/dist/lib/components/list-share-dialog/list-share-dialog.component.js.map +1 -1
  9. package/dist/lib/components/save-view-as-list-dialog/save-view-as-list-dialog.component.js +72 -74
  10. package/dist/lib/components/save-view-as-list-dialog/save-view-as-list-dialog.component.js.map +1 -1
  11. package/dist/lib/module.d.ts +1 -1
  12. package/dist/lib/module.d.ts.map +1 -1
  13. package/dist/lib/module.js +7 -1
  14. package/dist/lib/module.js.map +1 -1
  15. package/package.json +12 -11
  16. package/dist/__tests__/index.test.d.ts +0 -2
  17. package/dist/__tests__/index.test.d.ts.map +0 -1
  18. package/dist/__tests__/index.test.js +0 -7
  19. package/dist/__tests__/index.test.js.map +0 -1
  20. package/dist/__tests__/list-models.test.d.ts +0 -2
  21. package/dist/__tests__/list-models.test.d.ts.map +0 -1
  22. package/dist/__tests__/list-models.test.js +0 -86
  23. package/dist/__tests__/list-models.test.js.map +0 -1
  24. package/dist/lib/components/list-invitations/__tests__/list-invitations.component.test.d.ts +0 -2
  25. package/dist/lib/components/list-invitations/__tests__/list-invitations.component.test.d.ts.map +0 -1
  26. package/dist/lib/components/list-invitations/__tests__/list-invitations.component.test.js +0 -145
  27. package/dist/lib/components/list-invitations/__tests__/list-invitations.component.test.js.map +0 -1
package/dist/lib/components/list-management-dialog/list-management-dialog.component.js CHANGED
@@ -6,22 +6,23 @@ import { UUIDsEqual } from '@memberjunction/global';
6
6
  import * as i0 from "@angular/core";
7
7
  import * as i1 from "../../services/list-management.service";
8
8
  import * as i2 from "@angular/forms";
9
- import * as i3 from "@memberjunction/ng-shared-generic";
9
+ import * as i3 from "@memberjunction/ng-ui-components";
10
+ import * as i4 from "@memberjunction/ng-shared-generic";
10
11
  const _forTrack0 = ($index, $item) => $item.ID;
11
12
  const _forTrack1 = ($index, $item) => $item.list.ID;
12
13
  function ListManagementDialogComponent_Conditional_0_Conditional_17_Template(rf, ctx) { if (rf & 1) {
13
14
  const _r3 = i0.ɵɵgetCurrentView();
14
- i0.ɵɵelementStart(0, "button", 38);
15
+ i0.ɵɵelementStart(0, "button", 37);
15
16
  i0.ɵɵlistener("click", function ListManagementDialogComponent_Conditional_0_Conditional_17_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.clearSearch()); });
16
- i0.ɵɵelement(1, "span", 39);
17
+ i0.ɵɵelement(1, "span", 38);
17
18
  i0.ɵɵelementEnd();
18
19
  } }
19
20
  function ListManagementDialogComponent_Conditional_0_Conditional_18_Template(rf, ctx) { if (rf & 1) {
20
21
  const _r4 = i0.ɵɵgetCurrentView();
21
- i0.ɵɵelementStart(0, "button", 40);
22
+ i0.ɵɵelementStart(0, "button", 39);
22
23
  i0.ɵɵlistener("click", function ListManagementDialogComponent_Conditional_0_Conditional_18_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.showCreateListForm()); });
23
- i0.ɵɵelement(1, "span", 41);
24
- i0.ɵɵelementStart(2, "span", 42);
24
+ i0.ɵɵelement(1, "span", 40);
25
+ i0.ɵɵelementStart(2, "span", 41);
25
26
  i0.ɵɵtext(3, "New");
26
27
  i0.ɵɵelementEnd()();
27
28
  } if (rf & 2) {
@@ -29,7 +30,7 @@ function ListManagementDialogComponent_Conditional_0_Conditional_18_Template(rf,
29
30
  i0.ɵɵproperty("disabled", ctx_r1.showCreateForm);
30
31
  } }
31
32
  function ListManagementDialogComponent_Conditional_0_Conditional_35_Conditional_11_For_5_Template(rf, ctx) { if (rf & 1) {
32
- i0.ɵɵelementStart(0, "option", 51);
33
+ i0.ɵɵelementStart(0, "option", 50);
33
34
  i0.ɵɵtext(1);
34
35
  i0.ɵɵelementEnd();
35
36
  } if (rf & 2) {
@@ -40,12 +41,12 @@ function ListManagementDialogComponent_Conditional_0_Conditional_35_Conditional_
40
41
  } }
41
42
  function ListManagementDialogComponent_Conditional_0_Conditional_35_Conditional_11_Template(rf, ctx) { if (rf & 1) {
42
43
  const _r6 = i0.ɵɵgetCurrentView();
43
- i0.ɵɵelementStart(0, "div", 46)(1, "select", 50);
44
+ i0.ɵɵelementStart(0, "div", 45)(1, "select", 49);
44
45
  i0.ɵɵtwoWayListener("ngModelChange", function ListManagementDialogComponent_Conditional_0_Conditional_35_Conditional_11_Template_select_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.newListCategoryId, $event) || (ctx_r1.newListCategoryId = $event); return i0.ɵɵresetView($event); });
45
- i0.ɵɵelementStart(2, "option", 51);
46
+ i0.ɵɵelementStart(2, "option", 50);
46
47
  i0.ɵɵtext(3, "No category");
47
48
  i0.ɵɵelementEnd();
48
- i0.ɵɵrepeaterCreate(4, ListManagementDialogComponent_Conditional_0_Conditional_35_Conditional_11_For_5_Template, 2, 2, "option", 51, _forTrack0);
49
+ i0.ɵɵrepeaterCreate(4, ListManagementDialogComponent_Conditional_0_Conditional_35_Conditional_11_For_5_Template, 2, 2, "option", 50, _forTrack0);
49
50
  i0.ɵɵelementEnd()();
50
51
  } if (rf & 2) {
51
52
  const ctx_r1 = i0.ɵɵnextContext(3);
@@ -58,30 +59,30 @@ function ListManagementDialogComponent_Conditional_0_Conditional_35_Conditional_
58
59
  i0.ɵɵrepeater(ctx_r1.categories);
59
60
  } }
60
61
  function ListManagementDialogComponent_Conditional_0_Conditional_35_Conditional_14_Template(rf, ctx) { if (rf & 1) {
61
- i0.ɵɵelement(0, "span", 37);
62
+ i0.ɵɵelement(0, "span", 36);
62
63
  } }
63
64
  function ListManagementDialogComponent_Conditional_0_Conditional_35_Template(rf, ctx) { if (rf & 1) {
64
65
  const _r5 = i0.ɵɵgetCurrentView();
65
- i0.ɵɵelementStart(0, "div", 26)(1, "div", 43);
66
- i0.ɵɵelement(2, "span", 44);
66
+ i0.ɵɵelementStart(0, "div", 26)(1, "div", 42);
67
+ i0.ɵɵelement(2, "span", 43);
67
68
  i0.ɵɵelementStart(3, "span");
68
69
  i0.ɵɵtext(4, "Create New List");
69
70
  i0.ɵɵelementEnd()();
70
- i0.ɵɵelementStart(5, "div", 45)(6, "div", 46)(7, "input", 47);
71
+ i0.ɵɵelementStart(5, "div", 44)(6, "div", 45)(7, "input", 46);
71
72
  i0.ɵɵtwoWayListener("ngModelChange", function ListManagementDialogComponent_Conditional_0_Conditional_35_Template_input_ngModelChange_7_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.newListName, $event) || (ctx_r1.newListName = $event); return i0.ɵɵresetView($event); });
72
73
  i0.ɵɵlistener("keyup.enter", function ListManagementDialogComponent_Conditional_0_Conditional_35_Template_input_keyup_enter_7_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.createList()); });
73
74
  i0.ɵɵelementEnd()();
74
- i0.ɵɵelementStart(8, "div", 46)(9, "textarea", 48);
75
+ i0.ɵɵelementStart(8, "div", 45)(9, "textarea", 47);
75
76
  i0.ɵɵtwoWayListener("ngModelChange", function ListManagementDialogComponent_Conditional_0_Conditional_35_Template_textarea_ngModelChange_9_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.newListDescription, $event) || (ctx_r1.newListDescription = $event); return i0.ɵɵresetView($event); });
76
77
  i0.ɵɵtext(10, " ");
77
78
  i0.ɵɵelementEnd()();
78
- i0.ɵɵconditionalCreate(11, ListManagementDialogComponent_Conditional_0_Conditional_35_Conditional_11_Template, 6, 3, "div", 46);
79
- i0.ɵɵelementStart(12, "div", 49)(13, "button", 36);
79
+ i0.ɵɵconditionalCreate(11, ListManagementDialogComponent_Conditional_0_Conditional_35_Conditional_11_Template, 6, 3, "div", 45);
80
+ i0.ɵɵelementStart(12, "div", 48)(13, "button", 35);
80
81
  i0.ɵɵlistener("click", function ListManagementDialogComponent_Conditional_0_Conditional_35_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.createList()); });
81
- i0.ɵɵconditionalCreate(14, ListManagementDialogComponent_Conditional_0_Conditional_35_Conditional_14_Template, 1, 0, "span", 37);
82
+ i0.ɵɵconditionalCreate(14, ListManagementDialogComponent_Conditional_0_Conditional_35_Conditional_14_Template, 1, 0, "span", 36);
82
83
  i0.ɵɵtext(15, " Create List ");
83
84
  i0.ɵɵelementEnd();
84
- i0.ɵɵelementStart(16, "button", 35);
85
+ i0.ɵɵelementStart(16, "button", 34);
85
86
  i0.ɵɵlistener("click", function ListManagementDialogComponent_Conditional_0_Conditional_35_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.cancelCreateList()); });
86
87
  i0.ɵɵtext(17, " Cancel ");
87
88
  i0.ɵɵelementEnd()()()();
@@ -104,60 +105,38 @@ function ListManagementDialogComponent_Conditional_0_Conditional_35_Template(rf,
104
105
  } }
105
106
  function ListManagementDialogComponent_Conditional_0_Conditional_37_Template(rf, ctx) { if (rf & 1) {
106
107
  i0.ɵɵelementStart(0, "div", 28);
107
- i0.ɵɵelement(1, "mj-loading", 52);
108
+ i0.ɵɵelement(1, "mj-loading", 51);
108
109
  i0.ɵɵelementEnd();
109
110
  } }
110
- function ListManagementDialogComponent_Conditional_0_Conditional_38_Conditional_1_Template(rf, ctx) { if (rf & 1) {
111
- i0.ɵɵelement(0, "span", 53);
112
- i0.ɵɵelementStart(1, "p", 54);
113
- i0.ɵɵtext(2, "No lists found");
114
- i0.ɵɵelementEnd();
115
- i0.ɵɵelementStart(3, "p", 55);
116
- i0.ɵɵtext(4, "Try a different search term");
117
- i0.ɵɵelementEnd();
111
+ function ListManagementDialogComponent_Conditional_0_Conditional_38_Conditional_0_Template(rf, ctx) { if (rf & 1) {
112
+ i0.ɵɵelement(0, "mj-empty-state", 52);
118
113
  } }
119
- function ListManagementDialogComponent_Conditional_0_Conditional_38_Conditional_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
114
+ function ListManagementDialogComponent_Conditional_0_Conditional_38_Conditional_1_Template(rf, ctx) { if (rf & 1) {
120
115
  const _r8 = i0.ɵɵgetCurrentView();
121
- i0.ɵɵelementStart(0, "button", 58);
122
- i0.ɵɵlistener("click", function ListManagementDialogComponent_Conditional_0_Conditional_38_Conditional_2_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.showCreateListForm()); });
123
- i0.ɵɵelement(1, "span", 41);
124
- i0.ɵɵtext(2, " Create List ");
125
- i0.ɵɵelementEnd();
126
- } }
127
- function ListManagementDialogComponent_Conditional_0_Conditional_38_Conditional_2_Template(rf, ctx) { if (rf & 1) {
128
- i0.ɵɵelement(0, "span", 56);
129
- i0.ɵɵelementStart(1, "p", 54);
130
- i0.ɵɵtext(2, "No lists yet");
131
- i0.ɵɵelementEnd();
132
- i0.ɵɵelementStart(3, "p", 55);
133
- i0.ɵɵtext(4, "Create your first list to get started");
116
+ i0.ɵɵelementStart(0, "mj-empty-state", 54);
117
+ i0.ɵɵlistener("Action", function ListManagementDialogComponent_Conditional_0_Conditional_38_Conditional_1_Template_mj_empty_state_Action_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.showCreateListForm()); });
134
118
  i0.ɵɵelementEnd();
135
- i0.ɵɵconditionalCreate(5, ListManagementDialogComponent_Conditional_0_Conditional_38_Conditional_2_Conditional_5_Template, 3, 0, "button", 57);
136
119
  } if (rf & 2) {
137
120
  const ctx_r1 = i0.ɵɵnextContext(3);
138
- i0.ɵɵadvance(5);
139
- i0.ɵɵconditional(ctx_r1.config.allowCreate !== false ? 5 : -1);
121
+ i0.ɵɵproperty("ActionText", ctx_r1.config.allowCreate !== false ? "Create List" : "");
140
122
  } }
141
123
  function ListManagementDialogComponent_Conditional_0_Conditional_38_Template(rf, ctx) { if (rf & 1) {
142
- i0.ɵɵelementStart(0, "div", 29);
143
- i0.ɵɵconditionalCreate(1, ListManagementDialogComponent_Conditional_0_Conditional_38_Conditional_1_Template, 5, 0)(2, ListManagementDialogComponent_Conditional_0_Conditional_38_Conditional_2_Template, 6, 1);
144
- i0.ɵɵelementEnd();
124
+ i0.ɵɵconditionalCreate(0, ListManagementDialogComponent_Conditional_0_Conditional_38_Conditional_0_Template, 1, 0, "mj-empty-state", 52)(1, ListManagementDialogComponent_Conditional_0_Conditional_38_Conditional_1_Template, 1, 1, "mj-empty-state", 53);
145
125
  } if (rf & 2) {
146
126
  const ctx_r1 = i0.ɵɵnextContext(2);
147
- i0.ɵɵadvance();
148
- i0.ɵɵconditional(ctx_r1.searchText ? 1 : 2);
127
+ i0.ɵɵconditional(ctx_r1.searchText ? 0 : 1);
149
128
  } }
150
129
  function ListManagementDialogComponent_Conditional_0_Conditional_39_For_2_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
151
- i0.ɵɵelement(0, "span", 75);
130
+ i0.ɵɵelement(0, "span", 71);
152
131
  } }
153
132
  function ListManagementDialogComponent_Conditional_0_Conditional_39_For_2_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
154
- i0.ɵɵelement(0, "span", 41);
133
+ i0.ɵɵelement(0, "span", 40);
155
134
  } }
156
135
  function ListManagementDialogComponent_Conditional_0_Conditional_39_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
157
136
  const _r9 = i0.ɵɵgetCurrentView();
158
- i0.ɵɵelementStart(0, "button", 74);
137
+ i0.ɵɵelementStart(0, "button", 70);
159
138
  i0.ɵɵlistener("click", function ListManagementDialogComponent_Conditional_0_Conditional_39_For_2_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const vm_r10 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleListForAdd(vm_r10)); });
160
- i0.ɵɵconditionalCreate(1, ListManagementDialogComponent_Conditional_0_Conditional_39_For_2_Conditional_2_Conditional_1_Template, 1, 0, "span", 75)(2, ListManagementDialogComponent_Conditional_0_Conditional_39_For_2_Conditional_2_Conditional_2_Template, 1, 0, "span", 41);
139
+ i0.ɵɵconditionalCreate(1, ListManagementDialogComponent_Conditional_0_Conditional_39_For_2_Conditional_2_Conditional_1_Template, 1, 0, "span", 71)(2, ListManagementDialogComponent_Conditional_0_Conditional_39_For_2_Conditional_2_Conditional_2_Template, 1, 0, "span", 40);
161
140
  i0.ɵɵelementEnd();
162
141
  } if (rf & 2) {
163
142
  const vm_r10 = i0.ɵɵnextContext().$implicit;
@@ -168,16 +147,16 @@ function ListManagementDialogComponent_Conditional_0_Conditional_39_For_2_Condit
168
147
  i0.ɵɵconditional(vm_r10.isSelectedForAdd || ctx_r1.addedToLists.has(vm_r10.list.ID) ? 1 : 2);
169
148
  } }
170
149
  function ListManagementDialogComponent_Conditional_0_Conditional_39_For_2_Conditional_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
171
- i0.ɵɵelement(0, "span", 77);
150
+ i0.ɵɵelement(0, "span", 73);
172
151
  } }
173
152
  function ListManagementDialogComponent_Conditional_0_Conditional_39_For_2_Conditional_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
174
- i0.ɵɵelement(0, "span", 78);
153
+ i0.ɵɵelement(0, "span", 74);
175
154
  } }
176
155
  function ListManagementDialogComponent_Conditional_0_Conditional_39_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
177
156
  const _r11 = i0.ɵɵgetCurrentView();
178
- i0.ɵɵelementStart(0, "button", 76);
157
+ i0.ɵɵelementStart(0, "button", 72);
179
158
  i0.ɵɵlistener("click", function ListManagementDialogComponent_Conditional_0_Conditional_39_For_2_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r11); const vm_r10 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleListForRemove(vm_r10)); });
180
- i0.ɵɵconditionalCreate(1, ListManagementDialogComponent_Conditional_0_Conditional_39_For_2_Conditional_3_Conditional_1_Template, 1, 0, "span", 77)(2, ListManagementDialogComponent_Conditional_0_Conditional_39_For_2_Conditional_3_Conditional_2_Template, 1, 0, "span", 78);
159
+ i0.ɵɵconditionalCreate(1, ListManagementDialogComponent_Conditional_0_Conditional_39_For_2_Conditional_3_Conditional_1_Template, 1, 0, "span", 73)(2, ListManagementDialogComponent_Conditional_0_Conditional_39_For_2_Conditional_3_Conditional_2_Template, 1, 0, "span", 74);
181
160
  i0.ɵɵelementEnd();
182
161
  } if (rf & 2) {
183
162
  const vm_r10 = i0.ɵɵnextContext().$implicit;
@@ -188,15 +167,15 @@ function ListManagementDialogComponent_Conditional_0_Conditional_39_For_2_Condit
188
167
  i0.ɵɵconditional(vm_r10.isSelectedForRemove || ctx_r1.removedFromLists.has(vm_r10.list.ID) ? 1 : 2);
189
168
  } }
190
169
  function ListManagementDialogComponent_Conditional_0_Conditional_39_For_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
191
- i0.ɵɵelementStart(0, "span", 68);
170
+ i0.ɵɵelementStart(0, "span", 64);
192
171
  i0.ɵɵtext(1, "New");
193
172
  i0.ɵɵelementEnd();
194
173
  } }
195
174
  function ListManagementDialogComponent_Conditional_0_Conditional_39_For_2_Conditional_11_Template(rf, ctx) { if (rf & 1) {
196
- i0.ɵɵelementStart(0, "span", 79);
175
+ i0.ɵɵelementStart(0, "span", 75);
197
176
  i0.ɵɵtext(1);
198
177
  i0.ɵɵelementEnd();
199
- i0.ɵɵelementStart(2, "span", 71);
178
+ i0.ɵɵelementStart(2, "span", 67);
200
179
  i0.ɵɵtext(3, "\u2022");
201
180
  i0.ɵɵelementEnd();
202
181
  } if (rf & 2) {
@@ -205,9 +184,9 @@ function ListManagementDialogComponent_Conditional_0_Conditional_39_For_2_Condit
205
184
  i0.ɵɵtextInterpolate(vm_r10.list.Description);
206
185
  } }
207
186
  function ListManagementDialogComponent_Conditional_0_Conditional_39_For_2_Conditional_18_Template(rf, ctx) { if (rf & 1) {
208
- i0.ɵɵelementStart(0, "div", 80);
187
+ i0.ɵɵelementStart(0, "div", 76);
209
188
  i0.ɵɵelement(1, "span");
210
- i0.ɵɵelementStart(2, "span", 81);
189
+ i0.ɵɵelementStart(2, "span", 77);
211
190
  i0.ɵɵtext(3);
212
191
  i0.ɵɵelementEnd()();
213
192
  } if (rf & 2) {
@@ -220,29 +199,29 @@ function ListManagementDialogComponent_Conditional_0_Conditional_39_For_2_Condit
220
199
  i0.ɵɵtextInterpolate(ctx_r1.getMembershipText(vm_r10));
221
200
  } }
222
201
  function ListManagementDialogComponent_Conditional_0_Conditional_39_For_2_Template(rf, ctx) { if (rf & 1) {
223
- i0.ɵɵelementStart(0, "div", 60)(1, "div", 61);
224
- i0.ɵɵconditionalCreate(2, ListManagementDialogComponent_Conditional_0_Conditional_39_For_2_Conditional_2_Template, 3, 4, "button", 62);
225
- i0.ɵɵconditionalCreate(3, ListManagementDialogComponent_Conditional_0_Conditional_39_For_2_Conditional_3_Template, 3, 4, "button", 63);
202
+ i0.ɵɵelementStart(0, "div", 56)(1, "div", 57);
203
+ i0.ɵɵconditionalCreate(2, ListManagementDialogComponent_Conditional_0_Conditional_39_For_2_Conditional_2_Template, 3, 4, "button", 58);
204
+ i0.ɵɵconditionalCreate(3, ListManagementDialogComponent_Conditional_0_Conditional_39_For_2_Conditional_3_Template, 3, 4, "button", 59);
226
205
  i0.ɵɵelementEnd();
227
- i0.ɵɵelementStart(4, "div", 64)(5, "div", 65);
228
- i0.ɵɵelement(6, "span", 66);
229
- i0.ɵɵelementStart(7, "span", 67);
206
+ i0.ɵɵelementStart(4, "div", 60)(5, "div", 61);
207
+ i0.ɵɵelement(6, "span", 62);
208
+ i0.ɵɵelementStart(7, "span", 63);
230
209
  i0.ɵɵtext(8);
231
210
  i0.ɵɵelementEnd();
232
- i0.ɵɵconditionalCreate(9, ListManagementDialogComponent_Conditional_0_Conditional_39_For_2_Conditional_9_Template, 2, 0, "span", 68);
211
+ i0.ɵɵconditionalCreate(9, ListManagementDialogComponent_Conditional_0_Conditional_39_For_2_Conditional_9_Template, 2, 0, "span", 64);
233
212
  i0.ɵɵelementEnd();
234
- i0.ɵɵelementStart(10, "div", 69);
213
+ i0.ɵɵelementStart(10, "div", 65);
235
214
  i0.ɵɵconditionalCreate(11, ListManagementDialogComponent_Conditional_0_Conditional_39_For_2_Conditional_11_Template, 4, 1);
236
- i0.ɵɵelementStart(12, "span", 70);
215
+ i0.ɵɵelementStart(12, "span", 66);
237
216
  i0.ɵɵtext(13);
238
217
  i0.ɵɵelementEnd();
239
- i0.ɵɵelementStart(14, "span", 71);
218
+ i0.ɵɵelementStart(14, "span", 67);
240
219
  i0.ɵɵtext(15, "\u2022");
241
220
  i0.ɵɵelementEnd();
242
- i0.ɵɵelementStart(16, "span", 72);
221
+ i0.ɵɵelementStart(16, "span", 68);
243
222
  i0.ɵɵtext(17);
244
223
  i0.ɵɵelementEnd()()();
245
- i0.ɵɵconditionalCreate(18, ListManagementDialogComponent_Conditional_0_Conditional_39_For_2_Conditional_18_Template, 4, 5, "div", 73);
224
+ i0.ɵɵconditionalCreate(18, ListManagementDialogComponent_Conditional_0_Conditional_39_For_2_Conditional_18_Template, 4, 5, "div", 69);
246
225
  i0.ɵɵelementEnd();
247
226
  } if (rf & 2) {
248
227
  const vm_r10 = ctx.$implicit;
@@ -266,8 +245,8 @@ function ListManagementDialogComponent_Conditional_0_Conditional_39_For_2_Templa
266
245
  i0.ɵɵconditional(ctx_r1.config.showMembership !== false ? 18 : -1);
267
246
  } }
268
247
  function ListManagementDialogComponent_Conditional_0_Conditional_39_Template(rf, ctx) { if (rf & 1) {
269
- i0.ɵɵelementStart(0, "div", 30);
270
- i0.ɵɵrepeaterCreate(1, ListManagementDialogComponent_Conditional_0_Conditional_39_For_2_Template, 19, 15, "div", 59, _forTrack1);
248
+ i0.ɵɵelementStart(0, "div", 29);
249
+ i0.ɵɵrepeaterCreate(1, ListManagementDialogComponent_Conditional_0_Conditional_39_For_2_Template, 19, 15, "div", 55, _forTrack1);
271
250
  i0.ɵɵelementEnd();
272
251
  } if (rf & 2) {
273
252
  const ctx_r1 = i0.ɵɵnextContext(2);
@@ -275,8 +254,8 @@ function ListManagementDialogComponent_Conditional_0_Conditional_39_Template(rf,
275
254
  i0.ɵɵrepeater(ctx_r1.filteredLists);
276
255
  } }
277
256
  function ListManagementDialogComponent_Conditional_0_Conditional_42_Conditional_0_Template(rf, ctx) { if (rf & 1) {
278
- i0.ɵɵelementStart(0, "span", 82);
279
- i0.ɵɵelement(1, "span", 44);
257
+ i0.ɵɵelementStart(0, "span", 78);
258
+ i0.ɵɵelement(1, "span", 43);
280
259
  i0.ɵɵtext(2);
281
260
  i0.ɵɵelementEnd();
282
261
  } if (rf & 2) {
@@ -285,8 +264,8 @@ function ListManagementDialogComponent_Conditional_0_Conditional_42_Conditional_
285
264
  i0.ɵɵtextInterpolate2(" ", ctx_r1.addCount, " list", ctx_r1.addCount !== 1 ? "s" : "", " ");
286
265
  } }
287
266
  function ListManagementDialogComponent_Conditional_0_Conditional_42_Conditional_1_Template(rf, ctx) { if (rf & 1) {
288
- i0.ɵɵelementStart(0, "span", 83);
289
- i0.ɵɵelement(1, "span", 84);
267
+ i0.ɵɵelementStart(0, "span", 79);
268
+ i0.ɵɵelement(1, "span", 80);
290
269
  i0.ɵɵtext(2);
291
270
  i0.ɵɵelementEnd();
292
271
  } if (rf & 2) {
@@ -295,8 +274,8 @@ function ListManagementDialogComponent_Conditional_0_Conditional_42_Conditional_
295
274
  i0.ɵɵtextInterpolate2(" ", ctx_r1.removeCount, " list", ctx_r1.removeCount !== 1 ? "s" : "", " ");
296
275
  } }
297
276
  function ListManagementDialogComponent_Conditional_0_Conditional_42_Template(rf, ctx) { if (rf & 1) {
298
- i0.ɵɵconditionalCreate(0, ListManagementDialogComponent_Conditional_0_Conditional_42_Conditional_0_Template, 3, 2, "span", 82);
299
- i0.ɵɵconditionalCreate(1, ListManagementDialogComponent_Conditional_0_Conditional_42_Conditional_1_Template, 3, 2, "span", 83);
277
+ i0.ɵɵconditionalCreate(0, ListManagementDialogComponent_Conditional_0_Conditional_42_Conditional_0_Template, 3, 2, "span", 78);
278
+ i0.ɵɵconditionalCreate(1, ListManagementDialogComponent_Conditional_0_Conditional_42_Conditional_1_Template, 3, 2, "span", 79);
300
279
  } if (rf & 2) {
301
280
  const ctx_r1 = i0.ɵɵnextContext(2);
302
281
  i0.ɵɵconditional(ctx_r1.addCount > 0 ? 0 : -1);
@@ -304,12 +283,12 @@ function ListManagementDialogComponent_Conditional_0_Conditional_42_Template(rf,
304
283
  i0.ɵɵconditional(ctx_r1.removeCount > 0 ? 1 : -1);
305
284
  } }
306
285
  function ListManagementDialogComponent_Conditional_0_Conditional_43_Template(rf, ctx) { if (rf & 1) {
307
- i0.ɵɵelementStart(0, "span", 33);
286
+ i0.ɵɵelementStart(0, "span", 32);
308
287
  i0.ɵɵtext(1, "No changes");
309
288
  i0.ɵɵelementEnd();
310
289
  } }
311
290
  function ListManagementDialogComponent_Conditional_0_Conditional_48_Template(rf, ctx) { if (rf & 1) {
312
- i0.ɵɵelement(0, "span", 37);
291
+ i0.ɵɵelement(0, "span", 36);
313
292
  } }
314
293
  function ListManagementDialogComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
315
294
  const _r1 = i0.ɵɵgetCurrentView();
@@ -364,18 +343,18 @@ function ListManagementDialogComponent_Conditional_0_Template(rf, ctx) { if (rf
364
343
  i0.ɵɵelementEnd()()()();
365
344
  i0.ɵɵconditionalCreate(35, ListManagementDialogComponent_Conditional_0_Conditional_35_Template, 18, 8, "div", 26);
366
345
  i0.ɵɵelementStart(36, "div", 27);
367
- i0.ɵɵconditionalCreate(37, ListManagementDialogComponent_Conditional_0_Conditional_37_Template, 2, 0, "div", 28)(38, ListManagementDialogComponent_Conditional_0_Conditional_38_Template, 3, 1, "div", 29)(39, ListManagementDialogComponent_Conditional_0_Conditional_39_Template, 3, 0, "div", 30);
346
+ i0.ɵɵconditionalCreate(37, ListManagementDialogComponent_Conditional_0_Conditional_37_Template, 2, 0, "div", 28)(38, ListManagementDialogComponent_Conditional_0_Conditional_38_Template, 2, 1)(39, ListManagementDialogComponent_Conditional_0_Conditional_39_Template, 3, 0, "div", 29);
368
347
  i0.ɵɵelementEnd();
369
- i0.ɵɵelementStart(40, "div", 31)(41, "div", 32);
370
- i0.ɵɵconditionalCreate(42, ListManagementDialogComponent_Conditional_0_Conditional_42_Template, 2, 2)(43, ListManagementDialogComponent_Conditional_0_Conditional_43_Template, 2, 0, "span", 33);
348
+ i0.ɵɵelementStart(40, "div", 30)(41, "div", 31);
349
+ i0.ɵɵconditionalCreate(42, ListManagementDialogComponent_Conditional_0_Conditional_42_Template, 2, 2)(43, ListManagementDialogComponent_Conditional_0_Conditional_43_Template, 2, 0, "span", 32);
371
350
  i0.ɵɵelementEnd();
372
- i0.ɵɵelementStart(44, "div", 34)(45, "button", 35);
351
+ i0.ɵɵelementStart(44, "div", 33)(45, "button", 34);
373
352
  i0.ɵɵlistener("click", function ListManagementDialogComponent_Conditional_0_Template_button_click_45_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancel()); });
374
353
  i0.ɵɵtext(46, " Cancel ");
375
354
  i0.ɵɵelementEnd();
376
- i0.ɵɵelementStart(47, "button", 36);
355
+ i0.ɵɵelementStart(47, "button", 35);
377
356
  i0.ɵɵlistener("click", function ListManagementDialogComponent_Conditional_0_Template_button_click_47_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.applyChanges()); });
378
- i0.ɵɵconditionalCreate(48, ListManagementDialogComponent_Conditional_0_Conditional_48_Template, 1, 0, "span", 37);
357
+ i0.ɵɵconditionalCreate(48, ListManagementDialogComponent_Conditional_0_Conditional_48_Template, 1, 0, "span", 36);
379
358
  i0.ɵɵtext(49, " Apply Changes ");
380
359
  i0.ɵɵelementEnd()()()()();
381
360
  } if (rf & 2) {
@@ -921,15 +900,15 @@ export class ListManagementDialogComponent extends BaseAngularComponent {
921
900
  return vm.isFullMember || vm.isPartialMember || this.originalMembership.get(vm.list.ID) === true;
922
901
  }
923
902
  static ɵfac = function ListManagementDialogComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ListManagementDialogComponent)(i0.ɵɵdirectiveInject(i1.ListManagementService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
924
- static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ListManagementDialogComponent, selectors: [["mj-list-management-dialog"]], inputs: { config: "config", visible: "visible" }, outputs: { complete: "complete", cancel: "cancel" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 1, vars: 1, consts: [[1, "dialog-overlay"], [1, "dialog-overlay", 3, "click"], [1, "dialog-container", 3, "click"], [1, "dialog-header"], [1, "header-content"], [1, "header-icon"], [1, "fa-solid", "fa-rectangle-list"], [1, "header-text"], [1, "dialog-title"], [1, "dialog-subtitle"], ["title", "Close", 1, "close-button", 3, "click"], [1, "fa-solid", "fa-times"], [1, "search-section"], [1, "search-bar"], [1, "fa-solid", "fa-search", "search-icon"], ["type", "text", "placeholder", "Search lists...", 1, "search-input", 3, "input", "value"], [1, "clear-search"], [1, "create-button", 3, "disabled"], [1, "filter-tabs"], [1, "tabs-left"], [1, "tab-button", 3, "click"], [1, "tabs-right"], [1, "sort-select", 3, "change", "value"], ["value", "name"], ["value", "recent"], ["value", "item-count"], [1, "create-form"], [1, "list-content"], [1, "loading-state"], [1, "empty-state"], [1, "list-items"], [1, "dialog-footer"], [1, "footer-summary"], [1, "summary-empty"], [1, "footer-actions"], [1, "btn", "btn-secondary", 3, "click", "disabled"], [1, "btn", "btn-primary", 3, "click", "disabled"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "clear-search", 3, "click"], [1, "fa-solid", "fa-times-circle"], [1, "create-button", 3, "click", "disabled"], [1, "fa-solid", "fa-plus"], [1, "button-text"], [1, "create-form-header"], [1, "fa-solid", "fa-plus-circle"], [1, "create-form-body"], [1, "form-group"], ["type", "text", "placeholder", "List name *", 1, "form-input", 3, "ngModelChange", "keyup.enter", "ngModel", "disabled"], ["placeholder", "Description (optional)", "rows", "2", 1, "form-input", "form-textarea", 3, "ngModelChange", "ngModel", "disabled"], [1, "create-form-actions"], [1, "form-input", 3, "ngModelChange", "ngModel", "disabled"], [3, "ngValue"], ["text", "Loading lists...", "size", "medium"], [1, "fa-solid", "fa-search", "empty-icon"], [1, "empty-title"], [1, "empty-subtitle"], [1, "fa-solid", "fa-rectangle-list", "empty-icon"], [1, "btn", "btn-primary"], [1, "btn", "btn-primary", 3, "click"], [1, "list-item", 3, "selected-add", "selected-remove", "is-member"], [1, "list-item"], [1, "list-item-select"], [1, "select-btn", "add-btn", 3, "selected", "title"], [1, "select-btn", "remove-btn", 3, "selected", "title"], [1, "list-item-content"], [1, "list-item-header"], [1, "fa-solid", "fa-folder", "list-icon"], [1, "list-name"], [1, "badge", "badge-new"], [1, "list-item-meta"], [1, "list-count"], [1, "meta-separator"], [1, "list-updated"], [1, "membership-indicator", 3, "class"], [1, "select-btn", "add-btn", 3, "click", "title"], [1, "fa-solid", "fa-check"], [1, "select-btn", "remove-btn", 3, "click", "title"], [1, "fa-solid", "fa-undo"], [1, "fa-solid", "fa-minus"], [1, "list-description"], [1, "membership-indicator"], [1, "membership-text"], [1, "summary-item", "add"], [1, "summary-item", "remove"], [1, "fa-solid", "fa-minus-circle"]], template: function ListManagementDialogComponent_Template(rf, ctx) { if (rf & 1) {
903
+ static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ListManagementDialogComponent, selectors: [["mj-list-management-dialog"]], inputs: { config: "config", visible: "visible" }, outputs: { complete: "complete", cancel: "cancel" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 1, vars: 1, consts: [[1, "dialog-overlay"], [1, "dialog-overlay", 3, "click"], [1, "dialog-container", 3, "click"], [1, "dialog-header"], [1, "header-content"], [1, "header-icon"], [1, "fa-solid", "fa-rectangle-list"], [1, "header-text"], [1, "dialog-title"], [1, "dialog-subtitle"], ["title", "Close", 1, "close-button", 3, "click"], [1, "fa-solid", "fa-times"], [1, "search-section"], [1, "search-bar"], [1, "fa-solid", "fa-search", "search-icon"], ["type", "text", "placeholder", "Search lists...", 1, "search-input", 3, "input", "value"], [1, "clear-search"], [1, "create-button", 3, "disabled"], [1, "filter-tabs"], [1, "tabs-left"], [1, "tab-button", 3, "click"], [1, "tabs-right"], [1, "sort-select", 3, "change", "value"], ["value", "name"], ["value", "recent"], ["value", "item-count"], [1, "create-form"], [1, "list-content"], [1, "loading-state"], [1, "list-items"], [1, "dialog-footer"], [1, "footer-summary"], [1, "summary-empty"], [1, "footer-actions"], [1, "btn", "btn-secondary", 3, "click", "disabled"], [1, "btn", "btn-primary", 3, "click", "disabled"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "clear-search", 3, "click"], [1, "fa-solid", "fa-times-circle"], [1, "create-button", 3, "click", "disabled"], [1, "fa-solid", "fa-plus"], [1, "button-text"], [1, "create-form-header"], [1, "fa-solid", "fa-plus-circle"], [1, "create-form-body"], [1, "form-group"], ["type", "text", "placeholder", "List name *", 1, "form-input", 3, "ngModelChange", "keyup.enter", "ngModel", "disabled"], ["placeholder", "Description (optional)", "rows", "2", 1, "form-input", "form-textarea", 3, "ngModelChange", "ngModel", "disabled"], [1, "create-form-actions"], [1, "form-input", 3, "ngModelChange", "ngModel", "disabled"], [3, "ngValue"], ["text", "Loading lists...", "size", "medium"], ["Variant", "no-results", "Icon", "fa-solid fa-magnifying-glass", "Title", "No lists found", "Message", "Try a different search term"], ["Icon", "fa-solid fa-rectangle-list", "Title", "No lists yet", "Message", "Create your first list to get started", "ActionIcon", "fa-solid fa-plus", 3, "ActionText"], ["Icon", "fa-solid fa-rectangle-list", "Title", "No lists yet", "Message", "Create your first list to get started", "ActionIcon", "fa-solid fa-plus", 3, "Action", "ActionText"], [1, "list-item", 3, "selected-add", "selected-remove", "is-member"], [1, "list-item"], [1, "list-item-select"], [1, "select-btn", "add-btn", 3, "selected", "title"], [1, "select-btn", "remove-btn", 3, "selected", "title"], [1, "list-item-content"], [1, "list-item-header"], [1, "fa-solid", "fa-folder", "list-icon"], [1, "list-name"], [1, "badge", "badge-new"], [1, "list-item-meta"], [1, "list-count"], [1, "meta-separator"], [1, "list-updated"], [1, "membership-indicator", 3, "class"], [1, "select-btn", "add-btn", 3, "click", "title"], [1, "fa-solid", "fa-check"], [1, "select-btn", "remove-btn", 3, "click", "title"], [1, "fa-solid", "fa-undo"], [1, "fa-solid", "fa-minus"], [1, "list-description"], [1, "membership-indicator"], [1, "membership-text"], [1, "summary-item", "add"], [1, "summary-item", "remove"], [1, "fa-solid", "fa-minus-circle"]], template: function ListManagementDialogComponent_Template(rf, ctx) { if (rf & 1) {
925
904
  i0.ɵɵconditionalCreate(0, ListManagementDialogComponent_Conditional_0_Template, 50, 18, "div", 0);
926
905
  } if (rf & 2) {
927
906
  i0.ɵɵconditional(ctx.visible ? 0 : -1);
928
- } }, dependencies: [i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.LoadingComponent], styles: ["\n\n\n\n\n\n\n.dialog-overlay[_ngcontent-%COMP%] {\n position: fixed;\n inset: 0;\n background: var(--mj-bg-overlay);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10000;\n animation: _ngcontent-%COMP%_fadeIn 0.2s ease-out;\n backdrop-filter: blur(2px);\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n\n\n.dialog-container[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-card);\n border-radius: 16px;\n box-shadow: 0 25px 50px -12px var(--mj-shadow-lg);\n width: 90vw;\n max-width: 600px;\n max-height: 85vh;\n display: flex;\n flex-direction: column;\n animation: _ngcontent-%COMP%_slideUp 0.3s ease-out;\n overflow: hidden;\n}\n\n@keyframes _ngcontent-%COMP%_slideUp {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n\n\n.dialog-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 20px 24px;\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n.header-content[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.header-icon[_ngcontent-%COMP%] {\n width: 48px;\n height: 48px;\n background: rgba(255, 255, 255, 0.2);\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 22px;\n}\n\n.header-text[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.dialog-title[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 18px;\n font-weight: 600;\n letter-spacing: -0.01em;\n}\n\n.dialog-subtitle[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 13px;\n opacity: 0.85;\n}\n\n.close-button[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n border: none;\n background: rgba(255, 255, 255, 0.15);\n border-radius: 8px;\n color: var(--mj-text-inverse);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 16px;\n transition: background 0.2s;\n}\n\n.close-button[_ngcontent-%COMP%]:hover {\n background: rgba(255, 255, 255, 0.25);\n}\n\n\n\n.search-section[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n padding: 16px 20px;\n background: var(--mj-bg-surface-sunken);\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.search-bar[_ngcontent-%COMP%] {\n flex: 1;\n position: relative;\n display: flex;\n align-items: center;\n}\n\n.search-icon[_ngcontent-%COMP%] {\n position: absolute;\n left: 14px;\n color: var(--mj-text-muted);\n font-size: 14px;\n pointer-events: none;\n}\n\n.search-input[_ngcontent-%COMP%] {\n width: 100%;\n padding: 12px 40px 12px 42px;\n border: 1px solid var(--mj-border-default);\n border-radius: 10px;\n font-size: 14px;\n background: var(--mj-bg-surface-card);\n transition: all 0.2s;\n}\n\n.search-input[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.search-input[_ngcontent-%COMP%]::placeholder {\n color: var(--mj-text-muted);\n}\n\n.clear-search[_ngcontent-%COMP%] {\n position: absolute;\n right: 12px;\n border: none;\n background: none;\n color: var(--mj-text-muted);\n cursor: pointer;\n padding: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.clear-search[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-secondary);\n}\n\n.create-button[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 18px;\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border: none;\n border-radius: 10px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s;\n white-space: nowrap;\n}\n\n.create-button[_ngcontent-%COMP%]:hover:not(:disabled) {\n transform: translateY(-1px);\n box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n.create-button[_ngcontent-%COMP%]:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n\n\n.filter-tabs[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 20px;\n border-bottom: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface-card);\n}\n\n.tabs-left[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n}\n\n.tab-button[_ngcontent-%COMP%] {\n padding: 8px 16px;\n border: none;\n background: none;\n color: var(--mj-text-secondary);\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n border-radius: 6px;\n transition: all 0.2s;\n}\n\n.tab-button[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n}\n\n.tab-button.active[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n}\n\n.sort-select[_ngcontent-%COMP%] {\n padding: 8px 12px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n font-size: 13px;\n color: var(--mj-text-secondary);\n background: var(--mj-bg-surface-card);\n cursor: pointer;\n}\n\n.sort-select[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n}\n\n\n\n.create-form[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n border-bottom: 1px solid color-mix(in srgb, var(--mj-status-warning) 30%, transparent);\n animation: _ngcontent-%COMP%_slideDown 0.2s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_slideDown {\n from {\n opacity: 0;\n max-height: 0;\n }\n to {\n opacity: 1;\n max-height: 300px;\n }\n}\n\n.create-form-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 20px;\n font-weight: 600;\n color: var(--mj-status-warning);\n font-size: 14px;\n border-bottom: 1px solid color-mix(in srgb, var(--mj-status-warning) 30%, transparent);\n}\n\n.create-form-body[_ngcontent-%COMP%] {\n padding: 16px 20px;\n}\n\n.form-group[_ngcontent-%COMP%] {\n margin-bottom: 12px;\n}\n\n.form-group[_ngcontent-%COMP%]:last-of-type {\n margin-bottom: 16px;\n}\n\n.form-input[_ngcontent-%COMP%] {\n width: 100%;\n padding: 12px 14px;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n font-size: 14px;\n background: var(--mj-bg-surface-card);\n transition: all 0.2s;\n box-sizing: border-box;\n}\n\n.form-input[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.form-textarea[_ngcontent-%COMP%] {\n resize: vertical;\n min-height: 60px;\n}\n\n.create-form-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 10px;\n justify-content: flex-end;\n}\n\n\n\n.list-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n min-height: 200px;\n max-height: 400px;\n}\n\n\n\n.loading-state[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 60px 20px;\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 60px 20px;\n text-align: center;\n}\n\n.empty-icon[_ngcontent-%COMP%] {\n font-size: 48px;\n color: var(--mj-border-strong);\n margin-bottom: 16px;\n}\n\n.empty-title[_ngcontent-%COMP%] {\n font-size: 16px;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin: 0 0 6px 0;\n}\n\n.empty-subtitle[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--mj-text-secondary);\n margin: 0 0 20px 0;\n}\n\n\n\n.list-items[_ngcontent-%COMP%] {\n padding: 8px 12px;\n}\n\n.list-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 14px 16px;\n margin-bottom: 8px;\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 12px;\n transition: all 0.2s;\n}\n\n.list-item[_ngcontent-%COMP%]:last-child {\n margin-bottom: 0;\n}\n\n.list-item[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-border-strong);\n box-shadow: 0 2px 8px var(--mj-shadow-sm);\n}\n\n.list-item.selected-add[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n border-color: var(--mj-status-success);\n}\n\n.list-item.selected-remove[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n border-color: var(--mj-status-error);\n}\n\n.list-item.is-member[_ngcontent-%COMP%] {\n border-left: 3px solid var(--mj-brand-primary);\n}\n\n\n\n.list-item-select[_ngcontent-%COMP%] {\n display: flex;\n gap: 6px;\n}\n\n.select-btn[_ngcontent-%COMP%] {\n width: 32px;\n height: 32px;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n background: var(--mj-bg-surface-card);\n color: var(--mj-text-secondary);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n transition: all 0.2s;\n}\n\n.select-btn.add-btn[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-status-success);\n color: var(--mj-status-success);\n background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n}\n\n.select-btn.add-btn.selected[_ngcontent-%COMP%] {\n background: var(--mj-status-success);\n border-color: var(--mj-status-success);\n color: var(--mj-text-inverse);\n}\n\n.select-btn.remove-btn[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-status-error);\n color: var(--mj-status-error);\n background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n}\n\n.select-btn.remove-btn.selected[_ngcontent-%COMP%] {\n background: var(--mj-status-error);\n border-color: var(--mj-status-error);\n color: var(--mj-text-inverse);\n}\n\n\n\n.list-item-content[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.list-item-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 4px;\n}\n\n.list-icon[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: 14px;\n}\n\n.list-name[_ngcontent-%COMP%] {\n font-weight: 600;\n font-size: 14px;\n color: var(--mj-text-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.badge[_ngcontent-%COMP%] {\n padding: 2px 8px;\n border-radius: 10px;\n font-size: 10px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n}\n\n.badge-new[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n}\n\n.list-item-meta[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 4px;\n font-size: 12px;\n color: var(--mj-text-secondary);\n}\n\n.list-description[_ngcontent-%COMP%] {\n max-width: 180px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.meta-separator[_ngcontent-%COMP%] {\n color: var(--mj-border-strong);\n}\n\n\n\n.membership-indicator[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n border-radius: 20px;\n font-size: 12px;\n font-weight: 500;\n white-space: nowrap;\n}\n\n.membership-indicator.full-member[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n color: var(--mj-status-success);\n}\n\n.membership-indicator.partial-member[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n color: var(--mj-status-warning);\n}\n\n.membership-indicator.not-member[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-secondary);\n}\n\n.membership-text[_ngcontent-%COMP%] {\n font-variant-numeric: tabular-nums;\n}\n\n\n\n.dialog-footer[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n background: var(--mj-bg-surface-sunken);\n border-top: 1px solid var(--mj-border-default);\n}\n\n.footer-summary[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.summary-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 13px;\n font-weight: 500;\n}\n\n.summary-item.add[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n.summary-item.remove[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n\n.summary-empty[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-size: 13px;\n}\n\n.footer-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 10px;\n}\n\n\n\n.btn[_ngcontent-%COMP%] {\n padding: 10px 20px;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 8px;\n transition: all 0.2s;\n border: none;\n}\n\n.btn-primary[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n.btn-primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n transform: translateY(-1px);\n}\n\n.btn-primary[_ngcontent-%COMP%]:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n transform: none;\n}\n\n.btn-secondary[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-card);\n color: var(--mj-text-secondary);\n border: 1px solid var(--mj-border-default);\n}\n\n.btn-secondary[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: var(--mj-bg-surface-sunken);\n border-color: var(--mj-border-strong);\n}\n\n.btn-secondary[_ngcontent-%COMP%]:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n\n\n\n\n\n@media (max-width: 640px) {\n .dialog-overlay[_ngcontent-%COMP%] {\n align-items: flex-end;\n }\n\n .dialog-container[_ngcontent-%COMP%] {\n width: 100%;\n max-width: 100%;\n max-height: 90vh;\n border-radius: 24px 24px 0 0;\n animation: slideUpMobile 0.3s ease-out;\n }\n\n @keyframes slideUpMobile {\n from {\n transform: translateY(100%);\n }\n to {\n transform: translateY(0);\n }\n }\n\n .dialog-header[_ngcontent-%COMP%] {\n padding: 16px 20px;\n border-radius: 24px 24px 0 0;\n }\n\n .header-icon[_ngcontent-%COMP%] {\n width: 40px;\n height: 40px;\n font-size: 18px;\n }\n\n .dialog-title[_ngcontent-%COMP%] {\n font-size: 16px;\n }\n\n .dialog-subtitle[_ngcontent-%COMP%] {\n font-size: 12px;\n }\n\n .search-section[_ngcontent-%COMP%] {\n padding: 12px 16px;\n flex-wrap: wrap;\n }\n\n .search-bar[_ngcontent-%COMP%] {\n width: 100%;\n order: 1;\n }\n\n .create-button[_ngcontent-%COMP%] {\n order: 2;\n width: 100%;\n justify-content: center;\n margin-top: 8px;\n }\n\n .button-text[_ngcontent-%COMP%] {\n display: inline;\n }\n\n .filter-tabs[_ngcontent-%COMP%] {\n padding: 10px 16px;\n flex-wrap: wrap;\n gap: 8px;\n }\n\n .tabs-left[_ngcontent-%COMP%] {\n width: 100%;\n justify-content: space-between;\n }\n\n .tab-button[_ngcontent-%COMP%] {\n flex: 1;\n text-align: center;\n padding: 10px 8px;\n }\n\n .tabs-right[_ngcontent-%COMP%] {\n width: 100%;\n }\n\n .sort-select[_ngcontent-%COMP%] {\n width: 100%;\n }\n\n .list-content[_ngcontent-%COMP%] {\n max-height: 50vh;\n }\n\n .list-items[_ngcontent-%COMP%] {\n padding: 8px;\n }\n\n .list-item[_ngcontent-%COMP%] {\n padding: 12px;\n gap: 10px;\n }\n\n .list-item-content[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n }\n\n .list-description[_ngcontent-%COMP%] {\n display: none;\n }\n\n .membership-indicator[_ngcontent-%COMP%] {\n padding: 4px 8px;\n font-size: 11px;\n }\n\n .dialog-footer[_ngcontent-%COMP%] {\n padding: 12px 16px;\n flex-direction: column;\n gap: 12px;\n }\n\n .footer-summary[_ngcontent-%COMP%] {\n width: 100%;\n justify-content: center;\n }\n\n .footer-actions[_ngcontent-%COMP%] {\n width: 100%;\n }\n\n .footer-actions[_ngcontent-%COMP%] .btn[_ngcontent-%COMP%] {\n flex: 1;\n justify-content: center;\n }\n\n .create-form-body[_ngcontent-%COMP%] {\n padding: 12px 16px;\n }\n\n .create-form-actions[_ngcontent-%COMP%] {\n flex-direction: column;\n }\n\n .create-form-actions[_ngcontent-%COMP%] .btn[_ngcontent-%COMP%] {\n width: 100%;\n justify-content: center;\n }\n}\n\n\n\n@media (min-width: 641px) and (max-width: 1024px) {\n .dialog-container[_ngcontent-%COMP%] {\n max-width: 550px;\n }\n\n .list-description[_ngcontent-%COMP%] {\n max-width: 140px;\n }\n}\n\n\n\n@media (min-width: 1025px) {\n .list-content[_ngcontent-%COMP%] {\n max-height: 450px;\n }\n\n .list-item[_ngcontent-%COMP%]:hover {\n transform: translateX(4px);\n }\n}\n\n\n\n.search-input[_ngcontent-%COMP%]:focus-visible, \n.tab-button[_ngcontent-%COMP%]:focus-visible, \n.select-btn[_ngcontent-%COMP%]:focus-visible, \n.btn[_ngcontent-%COMP%]:focus-visible {\n outline: 2px solid var(--mj-brand-primary);\n outline-offset: 2px;\n}\n\n\n\n@media (prefers-reduced-motion: reduce) {\n .dialog-overlay[_ngcontent-%COMP%], \n .dialog-container[_ngcontent-%COMP%], \n .create-form[_ngcontent-%COMP%], \n .list-item[_ngcontent-%COMP%], \n .btn[_ngcontent-%COMP%] {\n animation: none;\n transition: none;\n }\n}"] });
907
+ } }, dependencies: [i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.MJEmptyStateComponent, i4.LoadingComponent], styles: ["\n\n\n\n\n\n\n.dialog-overlay[_ngcontent-%COMP%] {\n position: fixed;\n inset: 0;\n background: var(--mj-bg-overlay);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10000;\n animation: _ngcontent-%COMP%_fadeIn 0.2s ease-out;\n backdrop-filter: blur(2px);\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n\n\n.dialog-container[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-card);\n border-radius: 16px;\n box-shadow: 0 25px 50px -12px var(--mj-shadow-lg);\n width: 90vw;\n max-width: 600px;\n max-height: 85vh;\n display: flex;\n flex-direction: column;\n animation: _ngcontent-%COMP%_slideUp 0.3s ease-out;\n overflow: hidden;\n}\n\n@keyframes _ngcontent-%COMP%_slideUp {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n\n\n.dialog-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 20px 24px;\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n.header-content[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.header-icon[_ngcontent-%COMP%] {\n width: 48px;\n height: 48px;\n background: rgba(255, 255, 255, 0.2);\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 22px;\n}\n\n.header-text[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.dialog-title[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 18px;\n font-weight: 600;\n letter-spacing: -0.01em;\n}\n\n.dialog-subtitle[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 13px;\n opacity: 0.85;\n}\n\n.close-button[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n border: none;\n background: rgba(255, 255, 255, 0.15);\n border-radius: 8px;\n color: var(--mj-text-inverse);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 16px;\n transition: background 0.2s;\n}\n\n.close-button[_ngcontent-%COMP%]:hover {\n background: rgba(255, 255, 255, 0.25);\n}\n\n\n\n.search-section[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n padding: 16px 20px;\n background: var(--mj-bg-surface-sunken);\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.search-bar[_ngcontent-%COMP%] {\n flex: 1;\n position: relative;\n display: flex;\n align-items: center;\n}\n\n.search-icon[_ngcontent-%COMP%] {\n position: absolute;\n left: 14px;\n color: var(--mj-text-muted);\n font-size: 14px;\n pointer-events: none;\n}\n\n.search-input[_ngcontent-%COMP%] {\n width: 100%;\n padding: 12px 40px 12px 42px;\n border: 1px solid var(--mj-border-default);\n border-radius: 10px;\n font-size: 14px;\n background: var(--mj-bg-surface-card);\n transition: all 0.2s;\n}\n\n.search-input[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.search-input[_ngcontent-%COMP%]::placeholder {\n color: var(--mj-text-muted);\n}\n\n.clear-search[_ngcontent-%COMP%] {\n position: absolute;\n right: 12px;\n border: none;\n background: none;\n color: var(--mj-text-muted);\n cursor: pointer;\n padding: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.clear-search[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-secondary);\n}\n\n.create-button[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 18px;\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border: none;\n border-radius: 10px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s;\n white-space: nowrap;\n}\n\n.create-button[_ngcontent-%COMP%]:hover:not(:disabled) {\n transform: translateY(-1px);\n box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n.create-button[_ngcontent-%COMP%]:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n\n\n.filter-tabs[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 20px;\n border-bottom: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface-card);\n}\n\n.tabs-left[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n}\n\n.tab-button[_ngcontent-%COMP%] {\n padding: 8px 16px;\n border: none;\n background: none;\n color: var(--mj-text-secondary);\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n border-radius: 6px;\n transition: all 0.2s;\n}\n\n.tab-button[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n}\n\n.tab-button.active[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n}\n\n.sort-select[_ngcontent-%COMP%] {\n padding: 8px 12px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n font-size: 13px;\n color: var(--mj-text-secondary);\n background: var(--mj-bg-surface-card);\n cursor: pointer;\n}\n\n.sort-select[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n}\n\n\n\n.create-form[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n border-bottom: 1px solid color-mix(in srgb, var(--mj-status-warning) 30%, transparent);\n animation: _ngcontent-%COMP%_slideDown 0.2s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_slideDown {\n from {\n opacity: 0;\n max-height: 0;\n }\n to {\n opacity: 1;\n max-height: 300px;\n }\n}\n\n.create-form-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 20px;\n font-weight: 600;\n color: var(--mj-status-warning);\n font-size: 14px;\n border-bottom: 1px solid color-mix(in srgb, var(--mj-status-warning) 30%, transparent);\n}\n\n.create-form-body[_ngcontent-%COMP%] {\n padding: 16px 20px;\n}\n\n.form-group[_ngcontent-%COMP%] {\n margin-bottom: 12px;\n}\n\n.form-group[_ngcontent-%COMP%]:last-of-type {\n margin-bottom: 16px;\n}\n\n.form-input[_ngcontent-%COMP%] {\n width: 100%;\n padding: 12px 14px;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n font-size: 14px;\n background: var(--mj-bg-surface-card);\n transition: all 0.2s;\n box-sizing: border-box;\n}\n\n.form-input[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.form-textarea[_ngcontent-%COMP%] {\n resize: vertical;\n min-height: 60px;\n}\n\n.create-form-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 10px;\n justify-content: flex-end;\n}\n\n\n\n.list-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n min-height: 200px;\n max-height: 400px;\n}\n\n\n\n.loading-state[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 60px 20px;\n}\n\n\n\n.list-items[_ngcontent-%COMP%] {\n padding: 8px 12px;\n}\n\n.list-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 14px 16px;\n margin-bottom: 8px;\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 12px;\n transition: all 0.2s;\n}\n\n.list-item[_ngcontent-%COMP%]:last-child {\n margin-bottom: 0;\n}\n\n.list-item[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-border-strong);\n box-shadow: 0 2px 8px var(--mj-shadow-sm);\n}\n\n.list-item.selected-add[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n border-color: var(--mj-status-success);\n}\n\n.list-item.selected-remove[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n border-color: var(--mj-status-error);\n}\n\n.list-item.is-member[_ngcontent-%COMP%] {\n border-left: 3px solid var(--mj-brand-primary);\n}\n\n\n\n.list-item-select[_ngcontent-%COMP%] {\n display: flex;\n gap: 6px;\n}\n\n.select-btn[_ngcontent-%COMP%] {\n width: 32px;\n height: 32px;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n background: var(--mj-bg-surface-card);\n color: var(--mj-text-secondary);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n transition: all 0.2s;\n}\n\n.select-btn.add-btn[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-status-success);\n color: var(--mj-status-success);\n background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n}\n\n.select-btn.add-btn.selected[_ngcontent-%COMP%] {\n background: var(--mj-status-success);\n border-color: var(--mj-status-success);\n color: var(--mj-text-inverse);\n}\n\n.select-btn.remove-btn[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-status-error);\n color: var(--mj-status-error);\n background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n}\n\n.select-btn.remove-btn.selected[_ngcontent-%COMP%] {\n background: var(--mj-status-error);\n border-color: var(--mj-status-error);\n color: var(--mj-text-inverse);\n}\n\n\n\n.list-item-content[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.list-item-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 4px;\n}\n\n.list-icon[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: 14px;\n}\n\n.list-name[_ngcontent-%COMP%] {\n font-weight: 600;\n font-size: 14px;\n color: var(--mj-text-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.badge[_ngcontent-%COMP%] {\n padding: 2px 8px;\n border-radius: 10px;\n font-size: 10px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n}\n\n.badge-new[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n}\n\n.list-item-meta[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 4px;\n font-size: 12px;\n color: var(--mj-text-secondary);\n}\n\n.list-description[_ngcontent-%COMP%] {\n max-width: 180px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.meta-separator[_ngcontent-%COMP%] {\n color: var(--mj-border-strong);\n}\n\n\n\n.membership-indicator[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n border-radius: 20px;\n font-size: 12px;\n font-weight: 500;\n white-space: nowrap;\n}\n\n.membership-indicator.full-member[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n color: var(--mj-status-success);\n}\n\n.membership-indicator.partial-member[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n color: var(--mj-status-warning);\n}\n\n.membership-indicator.not-member[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-secondary);\n}\n\n.membership-text[_ngcontent-%COMP%] {\n font-variant-numeric: tabular-nums;\n}\n\n\n\n.dialog-footer[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n background: var(--mj-bg-surface-sunken);\n border-top: 1px solid var(--mj-border-default);\n}\n\n.footer-summary[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.summary-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 13px;\n font-weight: 500;\n}\n\n.summary-item.add[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n.summary-item.remove[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n\n.summary-empty[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-size: 13px;\n}\n\n.footer-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 10px;\n}\n\n\n\n.btn[_ngcontent-%COMP%] {\n padding: 10px 20px;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 8px;\n transition: all 0.2s;\n border: none;\n}\n\n.btn-primary[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n.btn-primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n transform: translateY(-1px);\n}\n\n.btn-primary[_ngcontent-%COMP%]:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n transform: none;\n}\n\n.btn-secondary[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-card);\n color: var(--mj-text-secondary);\n border: 1px solid var(--mj-border-default);\n}\n\n.btn-secondary[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: var(--mj-bg-surface-sunken);\n border-color: var(--mj-border-strong);\n}\n\n.btn-secondary[_ngcontent-%COMP%]:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n\n\n\n\n\n@media (max-width: 640px) {\n .dialog-overlay[_ngcontent-%COMP%] {\n align-items: flex-end;\n }\n\n .dialog-container[_ngcontent-%COMP%] {\n width: 100%;\n max-width: 100%;\n max-height: 90vh;\n border-radius: 24px 24px 0 0;\n animation: slideUpMobile 0.3s ease-out;\n }\n\n @keyframes slideUpMobile {\n from {\n transform: translateY(100%);\n }\n to {\n transform: translateY(0);\n }\n }\n\n .dialog-header[_ngcontent-%COMP%] {\n padding: 16px 20px;\n border-radius: 24px 24px 0 0;\n }\n\n .header-icon[_ngcontent-%COMP%] {\n width: 40px;\n height: 40px;\n font-size: 18px;\n }\n\n .dialog-title[_ngcontent-%COMP%] {\n font-size: 16px;\n }\n\n .dialog-subtitle[_ngcontent-%COMP%] {\n font-size: 12px;\n }\n\n .search-section[_ngcontent-%COMP%] {\n padding: 12px 16px;\n flex-wrap: wrap;\n }\n\n .search-bar[_ngcontent-%COMP%] {\n width: 100%;\n order: 1;\n }\n\n .create-button[_ngcontent-%COMP%] {\n order: 2;\n width: 100%;\n justify-content: center;\n margin-top: 8px;\n }\n\n .button-text[_ngcontent-%COMP%] {\n display: inline;\n }\n\n .filter-tabs[_ngcontent-%COMP%] {\n padding: 10px 16px;\n flex-wrap: wrap;\n gap: 8px;\n }\n\n .tabs-left[_ngcontent-%COMP%] {\n width: 100%;\n justify-content: space-between;\n }\n\n .tab-button[_ngcontent-%COMP%] {\n flex: 1;\n text-align: center;\n padding: 10px 8px;\n }\n\n .tabs-right[_ngcontent-%COMP%] {\n width: 100%;\n }\n\n .sort-select[_ngcontent-%COMP%] {\n width: 100%;\n }\n\n .list-content[_ngcontent-%COMP%] {\n max-height: 50vh;\n }\n\n .list-items[_ngcontent-%COMP%] {\n padding: 8px;\n }\n\n .list-item[_ngcontent-%COMP%] {\n padding: 12px;\n gap: 10px;\n }\n\n .list-item-content[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n }\n\n .list-description[_ngcontent-%COMP%] {\n display: none;\n }\n\n .membership-indicator[_ngcontent-%COMP%] {\n padding: 4px 8px;\n font-size: 11px;\n }\n\n .dialog-footer[_ngcontent-%COMP%] {\n padding: 12px 16px;\n flex-direction: column;\n gap: 12px;\n }\n\n .footer-summary[_ngcontent-%COMP%] {\n width: 100%;\n justify-content: center;\n }\n\n .footer-actions[_ngcontent-%COMP%] {\n width: 100%;\n }\n\n .footer-actions[_ngcontent-%COMP%] .btn[_ngcontent-%COMP%] {\n flex: 1;\n justify-content: center;\n }\n\n .create-form-body[_ngcontent-%COMP%] {\n padding: 12px 16px;\n }\n\n .create-form-actions[_ngcontent-%COMP%] {\n flex-direction: column;\n }\n\n .create-form-actions[_ngcontent-%COMP%] .btn[_ngcontent-%COMP%] {\n width: 100%;\n justify-content: center;\n }\n}\n\n\n\n@media (min-width: 641px) and (max-width: 1024px) {\n .dialog-container[_ngcontent-%COMP%] {\n max-width: 550px;\n }\n\n .list-description[_ngcontent-%COMP%] {\n max-width: 140px;\n }\n}\n\n\n\n@media (min-width: 1025px) {\n .list-content[_ngcontent-%COMP%] {\n max-height: 450px;\n }\n\n .list-item[_ngcontent-%COMP%]:hover {\n transform: translateX(4px);\n }\n}\n\n\n\n.search-input[_ngcontent-%COMP%]:focus-visible, \n.tab-button[_ngcontent-%COMP%]:focus-visible, \n.select-btn[_ngcontent-%COMP%]:focus-visible, \n.btn[_ngcontent-%COMP%]:focus-visible {\n outline: 2px solid var(--mj-brand-primary);\n outline-offset: 2px;\n}\n\n\n\n@media (prefers-reduced-motion: reduce) {\n .dialog-overlay[_ngcontent-%COMP%], \n .dialog-container[_ngcontent-%COMP%], \n .create-form[_ngcontent-%COMP%], \n .list-item[_ngcontent-%COMP%], \n .btn[_ngcontent-%COMP%] {\n animation: none;\n transition: none;\n }\n}"] });
929
908
  }
930
909
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ListManagementDialogComponent, [{
931
910
  type: Component,
932
- args: [{ standalone: false, selector: 'mj-list-management-dialog', template: "@if (visible) {\n <div class=\"dialog-overlay\" (click)=\"onCancel()\">\n <div class=\"dialog-container\" (click)=\"$event.stopPropagation()\">\n <!-- Header -->\n <div class=\"dialog-header\">\n <div class=\"header-content\">\n <div class=\"header-icon\">\n <span class=\"fa-solid fa-rectangle-list\"></span>\n </div>\n <div class=\"header-text\">\n <h2 class=\"dialog-title\">{{ dialogTitle }}</h2>\n <p class=\"dialog-subtitle\">{{ dialogSubtitle }}</p>\n </div>\n </div>\n <button class=\"close-button\" (click)=\"onCancel()\" title=\"Close\">\n <span class=\"fa-solid fa-times\"></span>\n </button>\n </div>\n\n <!-- Search and Filters -->\n <div class=\"search-section\">\n <div class=\"search-bar\">\n <span class=\"fa-solid fa-search search-icon\"></span>\n <input\n type=\"text\"\n class=\"search-input\"\n placeholder=\"Search lists...\"\n [value]=\"searchText\"\n (input)=\"onSearchInput($event)\"\n />\n @if (searchText) {\n <button class=\"clear-search\" (click)=\"clearSearch()\">\n <span class=\"fa-solid fa-times-circle\"></span>\n </button>\n }\n </div>\n\n @if (config.allowCreate !== false) {\n <button class=\"create-button\" (click)=\"showCreateListForm()\" [disabled]=\"showCreateForm\">\n <span class=\"fa-solid fa-plus\"></span>\n <span class=\"button-text\">New</span>\n </button>\n }\n </div>\n\n <!-- Filter Tabs -->\n <div class=\"filter-tabs\">\n <div class=\"tabs-left\">\n <button\n class=\"tab-button\"\n [class.active]=\"activeTab === 'all'\"\n (click)=\"setActiveTab('all')\">\n All\n </button>\n <button\n class=\"tab-button\"\n [class.active]=\"activeTab === 'my-lists'\"\n (click)=\"setActiveTab('my-lists')\">\n My Lists\n </button>\n <button\n class=\"tab-button\"\n [class.active]=\"activeTab === 'recent'\"\n (click)=\"setActiveTab('recent')\">\n Recent\n </button>\n </div>\n <div class=\"tabs-right\">\n <select class=\"sort-select\" [value]=\"sortOption\" (change)=\"setSortOption($any($event.target).value)\">\n <option value=\"name\">Sort: Name</option>\n <option value=\"recent\">Sort: Recent</option>\n <option value=\"item-count\">Sort: Items</option>\n </select>\n </div>\n </div>\n\n <!-- Create List Form -->\n @if (showCreateForm) {\n <div class=\"create-form\">\n <div class=\"create-form-header\">\n <span class=\"fa-solid fa-plus-circle\"></span>\n <span>Create New List</span>\n </div>\n <div class=\"create-form-body\">\n <div class=\"form-group\">\n <input\n type=\"text\"\n class=\"form-input\"\n placeholder=\"List name *\"\n [(ngModel)]=\"newListName\"\n [disabled]=\"saving\"\n (keyup.enter)=\"createList()\"\n />\n </div>\n <div class=\"form-group\">\n <textarea\n class=\"form-input form-textarea\"\n placeholder=\"Description (optional)\"\n [(ngModel)]=\"newListDescription\"\n [disabled]=\"saving\"\n rows=\"2\">\n </textarea>\n </div>\n @if (categories.length > 0) {\n <div class=\"form-group\">\n <select class=\"form-input\" [(ngModel)]=\"newListCategoryId\" [disabled]=\"saving\">\n <option [ngValue]=\"null\">No category</option>\n @for (category of categories; track category.ID) {\n <option [ngValue]=\"category.ID\">{{ category.Name }}</option>\n }\n </select>\n </div>\n }\n <div class=\"create-form-actions\">\n <button\n class=\"btn btn-primary\"\n (click)=\"createList()\"\n [disabled]=\"!newListName.trim() || saving\">\n @if (saving) {\n <span class=\"fa-solid fa-spinner fa-spin\"></span>\n }\n Create List\n </button>\n <button class=\"btn btn-secondary\" (click)=\"cancelCreateList()\" [disabled]=\"saving\">\n Cancel\n </button>\n </div>\n </div>\n </div>\n }\n\n <!-- List Content -->\n <div class=\"list-content\">\n @if (loading) {\n <div class=\"loading-state\">\n <mj-loading text=\"Loading lists...\" size=\"medium\"></mj-loading>\n </div>\n } @else if (filteredLists.length === 0) {\n <div class=\"empty-state\">\n @if (searchText) {\n <span class=\"fa-solid fa-search empty-icon\"></span>\n <p class=\"empty-title\">No lists found</p>\n <p class=\"empty-subtitle\">Try a different search term</p>\n } @else {\n <span class=\"fa-solid fa-rectangle-list empty-icon\"></span>\n <p class=\"empty-title\">No lists yet</p>\n <p class=\"empty-subtitle\">Create your first list to get started</p>\n @if (config.allowCreate !== false) {\n <button class=\"btn btn-primary\" (click)=\"showCreateListForm()\">\n <span class=\"fa-solid fa-plus\"></span>\n Create List\n </button>\n }\n }\n </div>\n } @else {\n <div class=\"list-items\">\n @for (vm of filteredLists; track vm.list.ID) {\n <div\n class=\"list-item\"\n [class.selected-add]=\"vm.isSelectedForAdd || addedToLists.has(vm.list.ID)\"\n [class.selected-remove]=\"vm.isSelectedForRemove || removedFromLists.has(vm.list.ID)\"\n [class.is-member]=\"vm.isFullMember || vm.isPartialMember\">\n\n <!-- Checkbox / Selection Area -->\n <div class=\"list-item-select\">\n @if (showAddButton(vm)) {\n <button\n class=\"select-btn add-btn\"\n [class.selected]=\"vm.isSelectedForAdd || addedToLists.has(vm.list.ID)\"\n (click)=\"toggleListForAdd(vm)\"\n [title]=\"(vm.isSelectedForAdd || addedToLists.has(vm.list.ID)) ? 'Remove from selection' : 'Add to this list'\">\n @if (vm.isSelectedForAdd || addedToLists.has(vm.list.ID)) {\n <span class=\"fa-solid fa-check\"></span>\n } @else {\n <span class=\"fa-solid fa-plus\"></span>\n }\n </button>\n }\n @if (showRemoveButton(vm) && (vm.isFullMember || vm.isPartialMember)) {\n <button\n class=\"select-btn remove-btn\"\n [class.selected]=\"vm.isSelectedForRemove || removedFromLists.has(vm.list.ID)\"\n (click)=\"toggleListForRemove(vm)\"\n [title]=\"(vm.isSelectedForRemove || removedFromLists.has(vm.list.ID)) ? 'Cancel removal' : 'Remove from this list'\">\n @if (vm.isSelectedForRemove || removedFromLists.has(vm.list.ID)) {\n <span class=\"fa-solid fa-undo\"></span>\n } @else {\n <span class=\"fa-solid fa-minus\"></span>\n }\n </button>\n }\n </div>\n\n <!-- List Info -->\n <div class=\"list-item-content\">\n <div class=\"list-item-header\">\n <span class=\"fa-solid fa-folder list-icon\"></span>\n <span class=\"list-name\">{{ vm.list.Name }}</span>\n @if (newlyCreatedLists.includes(vm.list)) {\n <span class=\"badge badge-new\">New</span>\n }\n </div>\n <div class=\"list-item-meta\">\n @if (vm.list.Description) {\n <span class=\"list-description\">{{ vm.list.Description }}</span>\n <span class=\"meta-separator\">\u2022</span>\n }\n <span class=\"list-count\">{{ vm.itemCount }} item{{ vm.itemCount !== 1 ? 's' : '' }}</span>\n <span class=\"meta-separator\">\u2022</span>\n <span class=\"list-updated\">{{ formatDate(vm.lastUpdated) }}</span>\n </div>\n </div>\n\n <!-- Membership Indicator -->\n @if (config.showMembership !== false) {\n <div class=\"membership-indicator\" [class]=\"getMembershipClass(vm)\">\n <span [class]=\"getMembershipIcon(vm)\"></span>\n <span class=\"membership-text\">{{ getMembershipText(vm) }}</span>\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n\n <!-- Footer -->\n <div class=\"dialog-footer\">\n <div class=\"footer-summary\">\n @if (hasChanges) {\n @if (addCount > 0) {\n <span class=\"summary-item add\">\n <span class=\"fa-solid fa-plus-circle\"></span>\n {{ addCount }} list{{ addCount !== 1 ? 's' : '' }}\n </span>\n }\n @if (removeCount > 0) {\n <span class=\"summary-item remove\">\n <span class=\"fa-solid fa-minus-circle\"></span>\n {{ removeCount }} list{{ removeCount !== 1 ? 's' : '' }}\n </span>\n }\n } @else {\n <span class=\"summary-empty\">No changes</span>\n }\n </div>\n <div class=\"footer-actions\">\n <button class=\"btn btn-secondary\" (click)=\"onCancel()\" [disabled]=\"saving\">\n Cancel\n </button>\n <button\n class=\"btn btn-primary\"\n (click)=\"applyChanges()\"\n [disabled]=\"!hasChanges || saving\">\n @if (saving) {\n <span class=\"fa-solid fa-spinner fa-spin\"></span>\n }\n Apply Changes\n </button>\n </div>\n </div>\n </div>\n </div>\n}\n", styles: ["/* ============================================\n List Management Dialog - Gorgeous Responsive Design\n ============================================ */\n\n/* Overlay */\n.dialog-overlay {\n position: fixed;\n inset: 0;\n background: var(--mj-bg-overlay);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10000;\n animation: fadeIn 0.2s ease-out;\n backdrop-filter: blur(2px);\n}\n\n@keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n/* Dialog Container */\n.dialog-container {\n background: var(--mj-bg-surface-card);\n border-radius: 16px;\n box-shadow: 0 25px 50px -12px var(--mj-shadow-lg);\n width: 90vw;\n max-width: 600px;\n max-height: 85vh;\n display: flex;\n flex-direction: column;\n animation: slideUp 0.3s ease-out;\n overflow: hidden;\n}\n\n@keyframes slideUp {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Header */\n.dialog-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 20px 24px;\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n.header-content {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.header-icon {\n width: 48px;\n height: 48px;\n background: rgba(255, 255, 255, 0.2);\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 22px;\n}\n\n.header-text {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.dialog-title {\n margin: 0;\n font-size: 18px;\n font-weight: 600;\n letter-spacing: -0.01em;\n}\n\n.dialog-subtitle {\n margin: 0;\n font-size: 13px;\n opacity: 0.85;\n}\n\n.close-button {\n width: 36px;\n height: 36px;\n border: none;\n background: rgba(255, 255, 255, 0.15);\n border-radius: 8px;\n color: var(--mj-text-inverse);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 16px;\n transition: background 0.2s;\n}\n\n.close-button:hover {\n background: rgba(255, 255, 255, 0.25);\n}\n\n/* Search Section */\n.search-section {\n display: flex;\n gap: 12px;\n padding: 16px 20px;\n background: var(--mj-bg-surface-sunken);\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.search-bar {\n flex: 1;\n position: relative;\n display: flex;\n align-items: center;\n}\n\n.search-icon {\n position: absolute;\n left: 14px;\n color: var(--mj-text-muted);\n font-size: 14px;\n pointer-events: none;\n}\n\n.search-input {\n width: 100%;\n padding: 12px 40px 12px 42px;\n border: 1px solid var(--mj-border-default);\n border-radius: 10px;\n font-size: 14px;\n background: var(--mj-bg-surface-card);\n transition: all 0.2s;\n}\n\n.search-input:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.search-input::placeholder {\n color: var(--mj-text-muted);\n}\n\n.clear-search {\n position: absolute;\n right: 12px;\n border: none;\n background: none;\n color: var(--mj-text-muted);\n cursor: pointer;\n padding: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.clear-search:hover {\n color: var(--mj-text-secondary);\n}\n\n.create-button {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 18px;\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border: none;\n border-radius: 10px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s;\n white-space: nowrap;\n}\n\n.create-button:hover:not(:disabled) {\n transform: translateY(-1px);\n box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n.create-button:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n/* Filter Tabs */\n.filter-tabs {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 20px;\n border-bottom: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface-card);\n}\n\n.tabs-left {\n display: flex;\n gap: 4px;\n}\n\n.tab-button {\n padding: 8px 16px;\n border: none;\n background: none;\n color: var(--mj-text-secondary);\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n border-radius: 6px;\n transition: all 0.2s;\n}\n\n.tab-button:hover {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n}\n\n.tab-button.active {\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n}\n\n.sort-select {\n padding: 8px 12px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n font-size: 13px;\n color: var(--mj-text-secondary);\n background: var(--mj-bg-surface-card);\n cursor: pointer;\n}\n\n.sort-select:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n}\n\n/* Create Form */\n.create-form {\n background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n border-bottom: 1px solid color-mix(in srgb, var(--mj-status-warning) 30%, transparent);\n animation: slideDown 0.2s ease-out;\n}\n\n@keyframes slideDown {\n from {\n opacity: 0;\n max-height: 0;\n }\n to {\n opacity: 1;\n max-height: 300px;\n }\n}\n\n.create-form-header {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 20px;\n font-weight: 600;\n color: var(--mj-status-warning);\n font-size: 14px;\n border-bottom: 1px solid color-mix(in srgb, var(--mj-status-warning) 30%, transparent);\n}\n\n.create-form-body {\n padding: 16px 20px;\n}\n\n.form-group {\n margin-bottom: 12px;\n}\n\n.form-group:last-of-type {\n margin-bottom: 16px;\n}\n\n.form-input {\n width: 100%;\n padding: 12px 14px;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n font-size: 14px;\n background: var(--mj-bg-surface-card);\n transition: all 0.2s;\n box-sizing: border-box;\n}\n\n.form-input:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.form-textarea {\n resize: vertical;\n min-height: 60px;\n}\n\n.create-form-actions {\n display: flex;\n gap: 10px;\n justify-content: flex-end;\n}\n\n/* List Content */\n.list-content {\n flex: 1;\n overflow-y: auto;\n min-height: 200px;\n max-height: 400px;\n}\n\n/* Loading State */\n.loading-state {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 60px 20px;\n}\n\n/* Empty State */\n.empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 60px 20px;\n text-align: center;\n}\n\n.empty-icon {\n font-size: 48px;\n color: var(--mj-border-strong);\n margin-bottom: 16px;\n}\n\n.empty-title {\n font-size: 16px;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin: 0 0 6px 0;\n}\n\n.empty-subtitle {\n font-size: 14px;\n color: var(--mj-text-secondary);\n margin: 0 0 20px 0;\n}\n\n/* List Items */\n.list-items {\n padding: 8px 12px;\n}\n\n.list-item {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 14px 16px;\n margin-bottom: 8px;\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 12px;\n transition: all 0.2s;\n}\n\n.list-item:last-child {\n margin-bottom: 0;\n}\n\n.list-item:hover {\n border-color: var(--mj-border-strong);\n box-shadow: 0 2px 8px var(--mj-shadow-sm);\n}\n\n.list-item.selected-add {\n background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n border-color: var(--mj-status-success);\n}\n\n.list-item.selected-remove {\n background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n border-color: var(--mj-status-error);\n}\n\n.list-item.is-member {\n border-left: 3px solid var(--mj-brand-primary);\n}\n\n/* Selection Buttons */\n.list-item-select {\n display: flex;\n gap: 6px;\n}\n\n.select-btn {\n width: 32px;\n height: 32px;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n background: var(--mj-bg-surface-card);\n color: var(--mj-text-secondary);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n transition: all 0.2s;\n}\n\n.select-btn.add-btn:hover {\n border-color: var(--mj-status-success);\n color: var(--mj-status-success);\n background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n}\n\n.select-btn.add-btn.selected {\n background: var(--mj-status-success);\n border-color: var(--mj-status-success);\n color: var(--mj-text-inverse);\n}\n\n.select-btn.remove-btn:hover {\n border-color: var(--mj-status-error);\n color: var(--mj-status-error);\n background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n}\n\n.select-btn.remove-btn.selected {\n background: var(--mj-status-error);\n border-color: var(--mj-status-error);\n color: var(--mj-text-inverse);\n}\n\n/* List Item Content */\n.list-item-content {\n flex: 1;\n min-width: 0;\n}\n\n.list-item-header {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 4px;\n}\n\n.list-icon {\n color: var(--mj-brand-primary);\n font-size: 14px;\n}\n\n.list-name {\n font-weight: 600;\n font-size: 14px;\n color: var(--mj-text-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.badge {\n padding: 2px 8px;\n border-radius: 10px;\n font-size: 10px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n}\n\n.badge-new {\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n}\n\n.list-item-meta {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 4px;\n font-size: 12px;\n color: var(--mj-text-secondary);\n}\n\n.list-description {\n max-width: 180px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.meta-separator {\n color: var(--mj-border-strong);\n}\n\n/* Membership Indicator */\n.membership-indicator {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n border-radius: 20px;\n font-size: 12px;\n font-weight: 500;\n white-space: nowrap;\n}\n\n.membership-indicator.full-member {\n background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n color: var(--mj-status-success);\n}\n\n.membership-indicator.partial-member {\n background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n color: var(--mj-status-warning);\n}\n\n.membership-indicator.not-member {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-secondary);\n}\n\n.membership-text {\n font-variant-numeric: tabular-nums;\n}\n\n/* Footer */\n.dialog-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n background: var(--mj-bg-surface-sunken);\n border-top: 1px solid var(--mj-border-default);\n}\n\n.footer-summary {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.summary-item {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 13px;\n font-weight: 500;\n}\n\n.summary-item.add {\n color: var(--mj-status-success);\n}\n\n.summary-item.remove {\n color: var(--mj-status-error);\n}\n\n.summary-empty {\n color: var(--mj-text-muted);\n font-size: 13px;\n}\n\n.footer-actions {\n display: flex;\n gap: 10px;\n}\n\n/* Buttons */\n.btn {\n padding: 10px 20px;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 8px;\n transition: all 0.2s;\n border: none;\n}\n\n.btn-primary {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n.btn-primary:hover:not(:disabled) {\n box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n transform: translateY(-1px);\n}\n\n.btn-primary:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n transform: none;\n}\n\n.btn-secondary {\n background: var(--mj-bg-surface-card);\n color: var(--mj-text-secondary);\n border: 1px solid var(--mj-border-default);\n}\n\n.btn-secondary:hover:not(:disabled) {\n background: var(--mj-bg-surface-sunken);\n border-color: var(--mj-border-strong);\n}\n\n.btn-secondary:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n/* ============================================\n Mobile Responsive - Bottom Sheet Pattern\n ============================================ */\n\n@media (max-width: 640px) {\n .dialog-overlay {\n align-items: flex-end;\n }\n\n .dialog-container {\n width: 100%;\n max-width: 100%;\n max-height: 90vh;\n border-radius: 24px 24px 0 0;\n animation: slideUpMobile 0.3s ease-out;\n }\n\n @keyframes slideUpMobile {\n from {\n transform: translateY(100%);\n }\n to {\n transform: translateY(0);\n }\n }\n\n .dialog-header {\n padding: 16px 20px;\n border-radius: 24px 24px 0 0;\n }\n\n .header-icon {\n width: 40px;\n height: 40px;\n font-size: 18px;\n }\n\n .dialog-title {\n font-size: 16px;\n }\n\n .dialog-subtitle {\n font-size: 12px;\n }\n\n .search-section {\n padding: 12px 16px;\n flex-wrap: wrap;\n }\n\n .search-bar {\n width: 100%;\n order: 1;\n }\n\n .create-button {\n order: 2;\n width: 100%;\n justify-content: center;\n margin-top: 8px;\n }\n\n .button-text {\n display: inline;\n }\n\n .filter-tabs {\n padding: 10px 16px;\n flex-wrap: wrap;\n gap: 8px;\n }\n\n .tabs-left {\n width: 100%;\n justify-content: space-between;\n }\n\n .tab-button {\n flex: 1;\n text-align: center;\n padding: 10px 8px;\n }\n\n .tabs-right {\n width: 100%;\n }\n\n .sort-select {\n width: 100%;\n }\n\n .list-content {\n max-height: 50vh;\n }\n\n .list-items {\n padding: 8px;\n }\n\n .list-item {\n padding: 12px;\n gap: 10px;\n }\n\n .list-item-content {\n flex: 1;\n min-width: 0;\n }\n\n .list-description {\n display: none;\n }\n\n .membership-indicator {\n padding: 4px 8px;\n font-size: 11px;\n }\n\n .dialog-footer {\n padding: 12px 16px;\n flex-direction: column;\n gap: 12px;\n }\n\n .footer-summary {\n width: 100%;\n justify-content: center;\n }\n\n .footer-actions {\n width: 100%;\n }\n\n .footer-actions .btn {\n flex: 1;\n justify-content: center;\n }\n\n .create-form-body {\n padding: 12px 16px;\n }\n\n .create-form-actions {\n flex-direction: column;\n }\n\n .create-form-actions .btn {\n width: 100%;\n justify-content: center;\n }\n}\n\n/* Tablet adjustments */\n@media (min-width: 641px) and (max-width: 1024px) {\n .dialog-container {\n max-width: 550px;\n }\n\n .list-description {\n max-width: 140px;\n }\n}\n\n/* Large screen enhancements */\n@media (min-width: 1025px) {\n .list-content {\n max-height: 450px;\n }\n\n .list-item:hover {\n transform: translateX(4px);\n }\n}\n\n/* Accessibility - Focus states */\n.search-input:focus-visible,\n.tab-button:focus-visible,\n.select-btn:focus-visible,\n.btn:focus-visible {\n outline: 2px solid var(--mj-brand-primary);\n outline-offset: 2px;\n}\n\n/* Reduced motion preference */\n@media (prefers-reduced-motion: reduce) {\n .dialog-overlay,\n .dialog-container,\n .create-form,\n .list-item,\n .btn {\n animation: none;\n transition: none;\n }\n}\n"] }]
911
+ args: [{ standalone: false, selector: 'mj-list-management-dialog', template: "@if (visible) {\n <div class=\"dialog-overlay\" (click)=\"onCancel()\">\n <div class=\"dialog-container\" (click)=\"$event.stopPropagation()\">\n <!-- Header -->\n <div class=\"dialog-header\">\n <div class=\"header-content\">\n <div class=\"header-icon\">\n <span class=\"fa-solid fa-rectangle-list\"></span>\n </div>\n <div class=\"header-text\">\n <h2 class=\"dialog-title\">{{ dialogTitle }}</h2>\n <p class=\"dialog-subtitle\">{{ dialogSubtitle }}</p>\n </div>\n </div>\n <button class=\"close-button\" (click)=\"onCancel()\" title=\"Close\">\n <span class=\"fa-solid fa-times\"></span>\n </button>\n </div>\n\n <!-- Search and Filters -->\n <div class=\"search-section\">\n <div class=\"search-bar\">\n <span class=\"fa-solid fa-search search-icon\"></span>\n <input\n type=\"text\"\n class=\"search-input\"\n placeholder=\"Search lists...\"\n [value]=\"searchText\"\n (input)=\"onSearchInput($event)\"\n />\n @if (searchText) {\n <button class=\"clear-search\" (click)=\"clearSearch()\">\n <span class=\"fa-solid fa-times-circle\"></span>\n </button>\n }\n </div>\n\n @if (config.allowCreate !== false) {\n <button class=\"create-button\" (click)=\"showCreateListForm()\" [disabled]=\"showCreateForm\">\n <span class=\"fa-solid fa-plus\"></span>\n <span class=\"button-text\">New</span>\n </button>\n }\n </div>\n\n <!-- Filter Tabs -->\n <div class=\"filter-tabs\">\n <div class=\"tabs-left\">\n <button\n class=\"tab-button\"\n [class.active]=\"activeTab === 'all'\"\n (click)=\"setActiveTab('all')\">\n All\n </button>\n <button\n class=\"tab-button\"\n [class.active]=\"activeTab === 'my-lists'\"\n (click)=\"setActiveTab('my-lists')\">\n My Lists\n </button>\n <button\n class=\"tab-button\"\n [class.active]=\"activeTab === 'recent'\"\n (click)=\"setActiveTab('recent')\">\n Recent\n </button>\n </div>\n <div class=\"tabs-right\">\n <select class=\"sort-select\" [value]=\"sortOption\" (change)=\"setSortOption($any($event.target).value)\">\n <option value=\"name\">Sort: Name</option>\n <option value=\"recent\">Sort: Recent</option>\n <option value=\"item-count\">Sort: Items</option>\n </select>\n </div>\n </div>\n\n <!-- Create List Form -->\n @if (showCreateForm) {\n <div class=\"create-form\">\n <div class=\"create-form-header\">\n <span class=\"fa-solid fa-plus-circle\"></span>\n <span>Create New List</span>\n </div>\n <div class=\"create-form-body\">\n <div class=\"form-group\">\n <input\n type=\"text\"\n class=\"form-input\"\n placeholder=\"List name *\"\n [(ngModel)]=\"newListName\"\n [disabled]=\"saving\"\n (keyup.enter)=\"createList()\"\n />\n </div>\n <div class=\"form-group\">\n <textarea\n class=\"form-input form-textarea\"\n placeholder=\"Description (optional)\"\n [(ngModel)]=\"newListDescription\"\n [disabled]=\"saving\"\n rows=\"2\">\n </textarea>\n </div>\n @if (categories.length > 0) {\n <div class=\"form-group\">\n <select class=\"form-input\" [(ngModel)]=\"newListCategoryId\" [disabled]=\"saving\">\n <option [ngValue]=\"null\">No category</option>\n @for (category of categories; track category.ID) {\n <option [ngValue]=\"category.ID\">{{ category.Name }}</option>\n }\n </select>\n </div>\n }\n <div class=\"create-form-actions\">\n <button\n class=\"btn btn-primary\"\n (click)=\"createList()\"\n [disabled]=\"!newListName.trim() || saving\">\n @if (saving) {\n <span class=\"fa-solid fa-spinner fa-spin\"></span>\n }\n Create List\n </button>\n <button class=\"btn btn-secondary\" (click)=\"cancelCreateList()\" [disabled]=\"saving\">\n Cancel\n </button>\n </div>\n </div>\n </div>\n }\n\n <!-- List Content -->\n <div class=\"list-content\">\n @if (loading) {\n <div class=\"loading-state\">\n <mj-loading text=\"Loading lists...\" size=\"medium\"></mj-loading>\n </div>\n } @else if (filteredLists.length === 0) {\n @if (searchText) {\n <mj-empty-state\n Variant=\"no-results\"\n Icon=\"fa-solid fa-magnifying-glass\"\n Title=\"No lists found\"\n Message=\"Try a different search term\" />\n } @else {\n <mj-empty-state\n Icon=\"fa-solid fa-rectangle-list\"\n Title=\"No lists yet\"\n Message=\"Create your first list to get started\"\n [ActionText]=\"config.allowCreate !== false ? 'Create List' : ''\"\n ActionIcon=\"fa-solid fa-plus\"\n (Action)=\"showCreateListForm()\" />\n }\n } @else {\n <div class=\"list-items\">\n @for (vm of filteredLists; track vm.list.ID) {\n <div\n class=\"list-item\"\n [class.selected-add]=\"vm.isSelectedForAdd || addedToLists.has(vm.list.ID)\"\n [class.selected-remove]=\"vm.isSelectedForRemove || removedFromLists.has(vm.list.ID)\"\n [class.is-member]=\"vm.isFullMember || vm.isPartialMember\">\n\n <!-- Checkbox / Selection Area -->\n <div class=\"list-item-select\">\n @if (showAddButton(vm)) {\n <button\n class=\"select-btn add-btn\"\n [class.selected]=\"vm.isSelectedForAdd || addedToLists.has(vm.list.ID)\"\n (click)=\"toggleListForAdd(vm)\"\n [title]=\"(vm.isSelectedForAdd || addedToLists.has(vm.list.ID)) ? 'Remove from selection' : 'Add to this list'\">\n @if (vm.isSelectedForAdd || addedToLists.has(vm.list.ID)) {\n <span class=\"fa-solid fa-check\"></span>\n } @else {\n <span class=\"fa-solid fa-plus\"></span>\n }\n </button>\n }\n @if (showRemoveButton(vm) && (vm.isFullMember || vm.isPartialMember)) {\n <button\n class=\"select-btn remove-btn\"\n [class.selected]=\"vm.isSelectedForRemove || removedFromLists.has(vm.list.ID)\"\n (click)=\"toggleListForRemove(vm)\"\n [title]=\"(vm.isSelectedForRemove || removedFromLists.has(vm.list.ID)) ? 'Cancel removal' : 'Remove from this list'\">\n @if (vm.isSelectedForRemove || removedFromLists.has(vm.list.ID)) {\n <span class=\"fa-solid fa-undo\"></span>\n } @else {\n <span class=\"fa-solid fa-minus\"></span>\n }\n </button>\n }\n </div>\n\n <!-- List Info -->\n <div class=\"list-item-content\">\n <div class=\"list-item-header\">\n <span class=\"fa-solid fa-folder list-icon\"></span>\n <span class=\"list-name\">{{ vm.list.Name }}</span>\n @if (newlyCreatedLists.includes(vm.list)) {\n <span class=\"badge badge-new\">New</span>\n }\n </div>\n <div class=\"list-item-meta\">\n @if (vm.list.Description) {\n <span class=\"list-description\">{{ vm.list.Description }}</span>\n <span class=\"meta-separator\">\u2022</span>\n }\n <span class=\"list-count\">{{ vm.itemCount }} item{{ vm.itemCount !== 1 ? 's' : '' }}</span>\n <span class=\"meta-separator\">\u2022</span>\n <span class=\"list-updated\">{{ formatDate(vm.lastUpdated) }}</span>\n </div>\n </div>\n\n <!-- Membership Indicator -->\n @if (config.showMembership !== false) {\n <div class=\"membership-indicator\" [class]=\"getMembershipClass(vm)\">\n <span [class]=\"getMembershipIcon(vm)\"></span>\n <span class=\"membership-text\">{{ getMembershipText(vm) }}</span>\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n\n <!-- Footer -->\n <div class=\"dialog-footer\">\n <div class=\"footer-summary\">\n @if (hasChanges) {\n @if (addCount > 0) {\n <span class=\"summary-item add\">\n <span class=\"fa-solid fa-plus-circle\"></span>\n {{ addCount }} list{{ addCount !== 1 ? 's' : '' }}\n </span>\n }\n @if (removeCount > 0) {\n <span class=\"summary-item remove\">\n <span class=\"fa-solid fa-minus-circle\"></span>\n {{ removeCount }} list{{ removeCount !== 1 ? 's' : '' }}\n </span>\n }\n } @else {\n <span class=\"summary-empty\">No changes</span>\n }\n </div>\n <div class=\"footer-actions\">\n <button class=\"btn btn-secondary\" (click)=\"onCancel()\" [disabled]=\"saving\">\n Cancel\n </button>\n <button\n class=\"btn btn-primary\"\n (click)=\"applyChanges()\"\n [disabled]=\"!hasChanges || saving\">\n @if (saving) {\n <span class=\"fa-solid fa-spinner fa-spin\"></span>\n }\n Apply Changes\n </button>\n </div>\n </div>\n </div>\n </div>\n}\n", styles: ["/* ============================================\n List Management Dialog - Gorgeous Responsive Design\n ============================================ */\n\n/* Overlay */\n.dialog-overlay {\n position: fixed;\n inset: 0;\n background: var(--mj-bg-overlay);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10000;\n animation: fadeIn 0.2s ease-out;\n backdrop-filter: blur(2px);\n}\n\n@keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n/* Dialog Container */\n.dialog-container {\n background: var(--mj-bg-surface-card);\n border-radius: 16px;\n box-shadow: 0 25px 50px -12px var(--mj-shadow-lg);\n width: 90vw;\n max-width: 600px;\n max-height: 85vh;\n display: flex;\n flex-direction: column;\n animation: slideUp 0.3s ease-out;\n overflow: hidden;\n}\n\n@keyframes slideUp {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Header */\n.dialog-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 20px 24px;\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n.header-content {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.header-icon {\n width: 48px;\n height: 48px;\n background: rgba(255, 255, 255, 0.2);\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 22px;\n}\n\n.header-text {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.dialog-title {\n margin: 0;\n font-size: 18px;\n font-weight: 600;\n letter-spacing: -0.01em;\n}\n\n.dialog-subtitle {\n margin: 0;\n font-size: 13px;\n opacity: 0.85;\n}\n\n.close-button {\n width: 36px;\n height: 36px;\n border: none;\n background: rgba(255, 255, 255, 0.15);\n border-radius: 8px;\n color: var(--mj-text-inverse);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 16px;\n transition: background 0.2s;\n}\n\n.close-button:hover {\n background: rgba(255, 255, 255, 0.25);\n}\n\n/* Search Section */\n.search-section {\n display: flex;\n gap: 12px;\n padding: 16px 20px;\n background: var(--mj-bg-surface-sunken);\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.search-bar {\n flex: 1;\n position: relative;\n display: flex;\n align-items: center;\n}\n\n.search-icon {\n position: absolute;\n left: 14px;\n color: var(--mj-text-muted);\n font-size: 14px;\n pointer-events: none;\n}\n\n.search-input {\n width: 100%;\n padding: 12px 40px 12px 42px;\n border: 1px solid var(--mj-border-default);\n border-radius: 10px;\n font-size: 14px;\n background: var(--mj-bg-surface-card);\n transition: all 0.2s;\n}\n\n.search-input:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.search-input::placeholder {\n color: var(--mj-text-muted);\n}\n\n.clear-search {\n position: absolute;\n right: 12px;\n border: none;\n background: none;\n color: var(--mj-text-muted);\n cursor: pointer;\n padding: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.clear-search:hover {\n color: var(--mj-text-secondary);\n}\n\n.create-button {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 18px;\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border: none;\n border-radius: 10px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s;\n white-space: nowrap;\n}\n\n.create-button:hover:not(:disabled) {\n transform: translateY(-1px);\n box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n.create-button:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n/* Filter Tabs */\n.filter-tabs {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 20px;\n border-bottom: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface-card);\n}\n\n.tabs-left {\n display: flex;\n gap: 4px;\n}\n\n.tab-button {\n padding: 8px 16px;\n border: none;\n background: none;\n color: var(--mj-text-secondary);\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n border-radius: 6px;\n transition: all 0.2s;\n}\n\n.tab-button:hover {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n}\n\n.tab-button.active {\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n}\n\n.sort-select {\n padding: 8px 12px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n font-size: 13px;\n color: var(--mj-text-secondary);\n background: var(--mj-bg-surface-card);\n cursor: pointer;\n}\n\n.sort-select:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n}\n\n/* Create Form */\n.create-form {\n background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n border-bottom: 1px solid color-mix(in srgb, var(--mj-status-warning) 30%, transparent);\n animation: slideDown 0.2s ease-out;\n}\n\n@keyframes slideDown {\n from {\n opacity: 0;\n max-height: 0;\n }\n to {\n opacity: 1;\n max-height: 300px;\n }\n}\n\n.create-form-header {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 20px;\n font-weight: 600;\n color: var(--mj-status-warning);\n font-size: 14px;\n border-bottom: 1px solid color-mix(in srgb, var(--mj-status-warning) 30%, transparent);\n}\n\n.create-form-body {\n padding: 16px 20px;\n}\n\n.form-group {\n margin-bottom: 12px;\n}\n\n.form-group:last-of-type {\n margin-bottom: 16px;\n}\n\n.form-input {\n width: 100%;\n padding: 12px 14px;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n font-size: 14px;\n background: var(--mj-bg-surface-card);\n transition: all 0.2s;\n box-sizing: border-box;\n}\n\n.form-input:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.form-textarea {\n resize: vertical;\n min-height: 60px;\n}\n\n.create-form-actions {\n display: flex;\n gap: 10px;\n justify-content: flex-end;\n}\n\n/* List Content */\n.list-content {\n flex: 1;\n overflow-y: auto;\n min-height: 200px;\n max-height: 400px;\n}\n\n/* Loading State */\n.loading-state {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 60px 20px;\n}\n\n/* List Items */\n.list-items {\n padding: 8px 12px;\n}\n\n.list-item {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 14px 16px;\n margin-bottom: 8px;\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 12px;\n transition: all 0.2s;\n}\n\n.list-item:last-child {\n margin-bottom: 0;\n}\n\n.list-item:hover {\n border-color: var(--mj-border-strong);\n box-shadow: 0 2px 8px var(--mj-shadow-sm);\n}\n\n.list-item.selected-add {\n background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n border-color: var(--mj-status-success);\n}\n\n.list-item.selected-remove {\n background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n border-color: var(--mj-status-error);\n}\n\n.list-item.is-member {\n border-left: 3px solid var(--mj-brand-primary);\n}\n\n/* Selection Buttons */\n.list-item-select {\n display: flex;\n gap: 6px;\n}\n\n.select-btn {\n width: 32px;\n height: 32px;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n background: var(--mj-bg-surface-card);\n color: var(--mj-text-secondary);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n transition: all 0.2s;\n}\n\n.select-btn.add-btn:hover {\n border-color: var(--mj-status-success);\n color: var(--mj-status-success);\n background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n}\n\n.select-btn.add-btn.selected {\n background: var(--mj-status-success);\n border-color: var(--mj-status-success);\n color: var(--mj-text-inverse);\n}\n\n.select-btn.remove-btn:hover {\n border-color: var(--mj-status-error);\n color: var(--mj-status-error);\n background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n}\n\n.select-btn.remove-btn.selected {\n background: var(--mj-status-error);\n border-color: var(--mj-status-error);\n color: var(--mj-text-inverse);\n}\n\n/* List Item Content */\n.list-item-content {\n flex: 1;\n min-width: 0;\n}\n\n.list-item-header {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 4px;\n}\n\n.list-icon {\n color: var(--mj-brand-primary);\n font-size: 14px;\n}\n\n.list-name {\n font-weight: 600;\n font-size: 14px;\n color: var(--mj-text-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.badge {\n padding: 2px 8px;\n border-radius: 10px;\n font-size: 10px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n}\n\n.badge-new {\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n}\n\n.list-item-meta {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 4px;\n font-size: 12px;\n color: var(--mj-text-secondary);\n}\n\n.list-description {\n max-width: 180px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.meta-separator {\n color: var(--mj-border-strong);\n}\n\n/* Membership Indicator */\n.membership-indicator {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n border-radius: 20px;\n font-size: 12px;\n font-weight: 500;\n white-space: nowrap;\n}\n\n.membership-indicator.full-member {\n background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n color: var(--mj-status-success);\n}\n\n.membership-indicator.partial-member {\n background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n color: var(--mj-status-warning);\n}\n\n.membership-indicator.not-member {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-secondary);\n}\n\n.membership-text {\n font-variant-numeric: tabular-nums;\n}\n\n/* Footer */\n.dialog-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n background: var(--mj-bg-surface-sunken);\n border-top: 1px solid var(--mj-border-default);\n}\n\n.footer-summary {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.summary-item {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 13px;\n font-weight: 500;\n}\n\n.summary-item.add {\n color: var(--mj-status-success);\n}\n\n.summary-item.remove {\n color: var(--mj-status-error);\n}\n\n.summary-empty {\n color: var(--mj-text-muted);\n font-size: 13px;\n}\n\n.footer-actions {\n display: flex;\n gap: 10px;\n}\n\n/* Buttons */\n.btn {\n padding: 10px 20px;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 8px;\n transition: all 0.2s;\n border: none;\n}\n\n.btn-primary {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n.btn-primary:hover:not(:disabled) {\n box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n transform: translateY(-1px);\n}\n\n.btn-primary:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n transform: none;\n}\n\n.btn-secondary {\n background: var(--mj-bg-surface-card);\n color: var(--mj-text-secondary);\n border: 1px solid var(--mj-border-default);\n}\n\n.btn-secondary:hover:not(:disabled) {\n background: var(--mj-bg-surface-sunken);\n border-color: var(--mj-border-strong);\n}\n\n.btn-secondary:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n/* ============================================\n Mobile Responsive - Bottom Sheet Pattern\n ============================================ */\n\n@media (max-width: 640px) {\n .dialog-overlay {\n align-items: flex-end;\n }\n\n .dialog-container {\n width: 100%;\n max-width: 100%;\n max-height: 90vh;\n border-radius: 24px 24px 0 0;\n animation: slideUpMobile 0.3s ease-out;\n }\n\n @keyframes slideUpMobile {\n from {\n transform: translateY(100%);\n }\n to {\n transform: translateY(0);\n }\n }\n\n .dialog-header {\n padding: 16px 20px;\n border-radius: 24px 24px 0 0;\n }\n\n .header-icon {\n width: 40px;\n height: 40px;\n font-size: 18px;\n }\n\n .dialog-title {\n font-size: 16px;\n }\n\n .dialog-subtitle {\n font-size: 12px;\n }\n\n .search-section {\n padding: 12px 16px;\n flex-wrap: wrap;\n }\n\n .search-bar {\n width: 100%;\n order: 1;\n }\n\n .create-button {\n order: 2;\n width: 100%;\n justify-content: center;\n margin-top: 8px;\n }\n\n .button-text {\n display: inline;\n }\n\n .filter-tabs {\n padding: 10px 16px;\n flex-wrap: wrap;\n gap: 8px;\n }\n\n .tabs-left {\n width: 100%;\n justify-content: space-between;\n }\n\n .tab-button {\n flex: 1;\n text-align: center;\n padding: 10px 8px;\n }\n\n .tabs-right {\n width: 100%;\n }\n\n .sort-select {\n width: 100%;\n }\n\n .list-content {\n max-height: 50vh;\n }\n\n .list-items {\n padding: 8px;\n }\n\n .list-item {\n padding: 12px;\n gap: 10px;\n }\n\n .list-item-content {\n flex: 1;\n min-width: 0;\n }\n\n .list-description {\n display: none;\n }\n\n .membership-indicator {\n padding: 4px 8px;\n font-size: 11px;\n }\n\n .dialog-footer {\n padding: 12px 16px;\n flex-direction: column;\n gap: 12px;\n }\n\n .footer-summary {\n width: 100%;\n justify-content: center;\n }\n\n .footer-actions {\n width: 100%;\n }\n\n .footer-actions .btn {\n flex: 1;\n justify-content: center;\n }\n\n .create-form-body {\n padding: 12px 16px;\n }\n\n .create-form-actions {\n flex-direction: column;\n }\n\n .create-form-actions .btn {\n width: 100%;\n justify-content: center;\n }\n}\n\n/* Tablet adjustments */\n@media (min-width: 641px) and (max-width: 1024px) {\n .dialog-container {\n max-width: 550px;\n }\n\n .list-description {\n max-width: 140px;\n }\n}\n\n/* Large screen enhancements */\n@media (min-width: 1025px) {\n .list-content {\n max-height: 450px;\n }\n\n .list-item:hover {\n transform: translateX(4px);\n }\n}\n\n/* Accessibility - Focus states */\n.search-input:focus-visible,\n.tab-button:focus-visible,\n.select-btn:focus-visible,\n.btn:focus-visible {\n outline: 2px solid var(--mj-brand-primary);\n outline-offset: 2px;\n}\n\n/* Reduced motion preference */\n@media (prefers-reduced-motion: reduce) {\n .dialog-overlay,\n .dialog-container,\n .create-form,\n .list-item,\n .btn {\n animation: none;\n transition: none;\n }\n}\n"] }]
933
912
  }], () => [{ type: i1.ListManagementService }, { type: i0.ChangeDetectorRef }], { config: [{
934
913
  type: Input
935
914
  }], visible: [{