@memberjunction/ng-list-management 6.1.4 → 6.2.0-edge.1

package/dist/lib/components/list-management-dialog/list-management-dialog.component.js

@@ -424,16 +424,24 @@ export class ListManagementDialogComponent extends BaseAngularComponent {
     /**
      * Controls dialog visibility
      */
-    get visible() {
+    get Visible() {
         return this._visible;
     }
-    set visible(value) {
+    set Visible(value) {
         if (value && !this._visible) {
             this._pendingInit = true;
         }
         this._visible = value;
         this.tryInitialize();
     }
+    /** @deprecated Use {@link Visible}. */
+    get visible() {
+        return this.Visible;
+    }
+    /** @deprecated Use {@link Visible}. */
+    set visible(value) {
+        this.Visible = value;
+    }
     _visible = false;
     /** Set on each closed→open transition; cleared once init actually runs (requires config). */
     _pendingInit = false;
@@ -447,31 +455,151 @@ export class ListManagementDialogComponent extends BaseAngularComponent {
     /**
      * Emitted when dialog is closed with results
      */
-    complete = new EventEmitter();
+    Complete = new EventEmitter();
+    /**
+     * @deprecated Use {@link Complete}.
+     *
+     * The same emitter under the old binding name, so a template still binding
+     * (complete) keeps working. Must stay AFTER Complete: class fields
+     * initialise in order, and the other way round this captures undefined.
+     */
+    complete = this.Complete;
     /**
      * Emitted when dialog is cancelled
      */
     cancel = new EventEmitter();
     // State
-    loading = false;
+    Loading = false;
+    /** @deprecated Use {@link Loading}. */
+    get loading() {
+        return this.Loading;
+    }
+    /** @deprecated Use {@link Loading}. */
+    set loading(value) {
+        this.Loading = value;
+    }
     saving = false;
-    searchText = '';
-    activeTab = 'all';
-    sortOption = 'name';
-    showCreateForm = false;
+    SearchText = '';
+    /** @deprecated Use {@link SearchText}. */
+    get searchText() {
+        return this.SearchText;
+    }
+    /** @deprecated Use {@link SearchText}. */
+    set searchText(value) {
+        this.SearchText = value;
+    }
+    ActiveTab = 'all';
+    /** @deprecated Use {@link ActiveTab}. */
+    get activeTab() {
+        return this.ActiveTab;
+    }
+    /** @deprecated Use {@link ActiveTab}. */
+    set activeTab(value) {
+        this.ActiveTab = value;
+    }
+    SortOption = 'name';
+    /** @deprecated Use {@link SortOption}. */
+    get sortOption() {
+        return this.SortOption;
+    }
+    /** @deprecated Use {@link SortOption}. */
+    set sortOption(value) {
+        this.SortOption = value;
+    }
+    ShowCreateForm = false;
+    /** @deprecated Use {@link ShowCreateForm}. */
+    get showCreateForm() {
+        return this.ShowCreateForm;
+    }
+    /** @deprecated Use {@link ShowCreateForm}. */
+    set showCreateForm(value) {
+        this.ShowCreateForm = value;
+    }
     // Data
-    allLists = [];
-    filteredLists = [];
-    categories = [];
+    AllLists = [];
+    /** @deprecated Use {@link AllLists}. */
+    get allLists() {
+        return this.AllLists;
+    }
+    /** @deprecated Use {@link AllLists}. */
+    set allLists(value) {
+        this.AllLists = value;
+    }
+    FilteredLists = [];
+    /** @deprecated Use {@link FilteredLists}. */
+    get filteredLists() {
+        return this.FilteredLists;
+    }
+    /** @deprecated Use {@link FilteredLists}. */
+    set filteredLists(value) {
+        this.FilteredLists = value;
+    }
+    Categories = [];
+    /** @deprecated Use {@link Categories}. */
+    get categories() {
+        return this.Categories;
+    }
+    /** @deprecated Use {@link Categories}. */
+    set categories(value) {
+        this.Categories = value;
+    }
     // Create form state
-    newListName = '';
-    newListDescription = '';
-    newListCategoryId = null;
+    NewListName = '';
+    /** @deprecated Use {@link NewListName}. */
+    get newListName() {
+        return this.NewListName;
+    }
+    /** @deprecated Use {@link NewListName}. */
+    set newListName(value) {
+        this.NewListName = value;
+    }
+    NewListDescription = '';
+    /** @deprecated Use {@link NewListDescription}. */
+    get newListDescription() {
+        return this.NewListDescription;
+    }
+    /** @deprecated Use {@link NewListDescription}. */
+    set newListDescription(value) {
+        this.NewListDescription = value;
+    }
+    NewListCategoryId = null;
+    /** @deprecated Use {@link NewListCategoryId}. */
+    get newListCategoryId() {
+        return this.NewListCategoryId;
+    }
+    /** @deprecated Use {@link NewListCategoryId}. */
+    set newListCategoryId(value) {
+        this.NewListCategoryId = value;
+    }
     // Track changes
     originalMembership = new Map();
-    addedToLists = new Set();
-    removedFromLists = new Set();
-    newlyCreatedLists = [];
+    AddedToLists = new Set();
+    /** @deprecated Use {@link AddedToLists}. */
+    get addedToLists() {
+        return this.AddedToLists;
+    }
+    /** @deprecated Use {@link AddedToLists}. */
+    set addedToLists(value) {
+        this.AddedToLists = value;
+    }
+    RemovedFromLists = new Set();
+    /** @deprecated Use {@link RemovedFromLists}. */
+    get removedFromLists() {
+        return this.RemovedFromLists;
+    }
+    /** @deprecated Use {@link RemovedFromLists}. */
+    set removedFromLists(value) {
+        this.RemovedFromLists = value;
+    }
+    NewlyCreatedLists = [];
+    /** @deprecated Use {@link NewlyCreatedLists}. */
+    get newlyCreatedLists() {
+        return this.NewlyCreatedLists;
+    }
+    /** @deprecated Use {@link NewlyCreatedLists}. */
+    set newlyCreatedLists(value) {
+        this.NewlyCreatedLists = value;
+    }
     // Cleanup
     destroy$ = new Subject();
     searchSubject = new Subject();
@@ -490,7 +618,7 @@ export class ListManagementDialogComponent extends BaseAngularComponent {
     /**
      * Get dialog title based on config
      */
-    get dialogTitle() {
+    get DialogTitle() {
         if (this.config?.dialogTitle) {
             return this.config.dialogTitle;
         }
@@ -505,10 +633,14 @@ export class ListManagementDialogComponent extends BaseAngularComponent {
                 return `Manage List Membership`;
         }
     }
+    /** @deprecated Use {@link DialogTitle}. */
+    get dialogTitle() {
+        return this.DialogTitle;
+    }
     /**
      * Get subtitle showing context
      */
-    get dialogSubtitle() {
+    get DialogSubtitle() {
         const recordCount = this.config?.recordIds?.length || 0;
         const entityName = this.config?.entityName || 'records';
         if (recordCount === 1 && this.config?.recordDisplayNames?.[0]) {
@@ -516,30 +648,46 @@ export class ListManagementDialogComponent extends BaseAngularComponent {
         }
         return `${recordCount} ${entityName} record${recordCount !== 1 ? 's' : ''}`;
     }
+    /** @deprecated Use {@link DialogSubtitle}. */
+    get dialogSubtitle() {
+        return this.DialogSubtitle;
+    }
     /**
      * Check if there are pending changes
      */
+    get HasChanges() {
+        return this.AddedToLists.size > 0 || this.RemovedFromLists.size > 0;
+    }
+    /** @deprecated Use {@link HasChanges}. */
     get hasChanges() {
-        return this.addedToLists.size > 0 || this.removedFromLists.size > 0;
+        return this.HasChanges;
     }
     /**
      * Get count of lists to add to
      */
+    get AddCount() {
+        return this.AddedToLists.size;
+    }
+    /** @deprecated Use {@link AddCount}. */
     get addCount() {
-        return this.addedToLists.size;
+        return this.AddCount;
     }
     /**
      * Get count of lists to remove from
      */
+    get RemoveCount() {
+        return this.RemovedFromLists.size;
+    }
+    /** @deprecated Use {@link RemoveCount}. */
     get removeCount() {
-        return this.removedFromLists.size;
+        return this.RemoveCount;
     }
     /**
      * Setup search with debounce
      */
     setupSearchDebounce() {
         this.searchSubject.pipe(debounceTime(300), takeUntil(this.destroy$)).subscribe((searchText) => {
-            this.searchText = searchText;
+            this.SearchText = searchText;
             this.applyFilters();
         });
     }
@@ -558,16 +706,16 @@ export class ListManagementDialogComponent extends BaseAngularComponent {
      * Reset all state
      */
     resetState() {
-        this.searchText = '';
-        this.activeTab = 'all';
-        this.sortOption = 'name';
-        this.showCreateForm = false;
-        this.newListName = '';
-        this.newListDescription = '';
-        this.newListCategoryId = null;
-        this.addedToLists.clear();
-        this.removedFromLists.clear();
-        this.newlyCreatedLists = [];
+        this.SearchText = '';
+        this.ActiveTab = 'all';
+        this.SortOption = 'name';
+        this.ShowCreateForm = false;
+        this.NewListName = '';
+        this.NewListDescription = '';
+        this.NewListCategoryId = null;
+        this.AddedToLists.clear();
+        this.RemovedFromLists.clear();
+        this.NewlyCreatedLists = [];
         this.originalMembership.clear();
     }
     /**
@@ -576,7 +724,7 @@ export class ListManagementDialogComponent extends BaseAngularComponent {
     async loadData() {
         if (!this.config)
             return;
-        this.loading = true;
+        this.Loading = true;
         this.cdr.detectChanges();
         try {
             const md = this.ProviderToUse;
@@ -587,20 +735,20 @@ export class ListManagementDialogComponent extends BaseAngularComponent {
                 this.listService.getRecordMembership(this.config.entityId, this.config.recordIds),
                 this.listService.getListCategories()
             ]);
-            this.categories = categories;
+            this.Categories = categories;
             // Build view models
-            this.allLists = await this.listService.buildListViewModels(lists, this.config.recordIds, membership);
+            this.AllLists = await this.listService.buildListViewModels(lists, this.config.recordIds, membership);
             // Store original membership state
-            for (const vm of this.allLists) {
+            for (const vm of this.AllLists) {
                 this.originalMembership.set(vm.list.ID, vm.isFullMember || vm.isPartialMember);
             }
             // Pre-select lists if configured
             if (this.config.preSelectedListIds) {
                 for (const listId of this.config.preSelectedListIds) {
-                    const vm = this.allLists.find(l => UUIDsEqual(l.list.ID, listId));
+                    const vm = this.AllLists.find(l => UUIDsEqual(l.list.ID, listId));
                     if (vm) {
                         vm.isSelectedForAdd = true;
-                        this.addedToLists.add(listId);
+                        this.AddedToLists.add(listId);
                     }
                 }
             }
@@ -610,51 +758,67 @@ export class ListManagementDialogComponent extends BaseAngularComponent {
             console.error('Error loading list data:', error);
         }
         finally {
-            this.loading = false;
+            this.Loading = false;
             this.cdr.detectChanges();
         }
     }
     /**
      * Handle search input
      */
-    onSearchInput(event) {
+    OnSearchInput(event) {
         const value = event.target.value;
         this.searchSubject.next(value);
     }
+    /** @deprecated Use {@link OnSearchInput}. */
+    onSearchInput(event) {
+        return this.OnSearchInput(event);
+    }
     /**
      * Clear search
      */
-    clearSearch() {
-        this.searchText = '';
+    ClearSearch() {
+        this.SearchText = '';
         this.searchSubject.next('');
     }
+    /** @deprecated Use {@link ClearSearch}. */
+    clearSearch() {
+        return this.ClearSearch();
+    }
     /**
      * Change active tab
      */
-    setActiveTab(tab) {
-        this.activeTab = tab;
+    SetActiveTab(tab) {
+        this.ActiveTab = tab;
         this.applyFilters();
     }
+    /** @deprecated Use {@link SetActiveTab}. */
+    setActiveTab(tab) {
+        return this.SetActiveTab(tab);
+    }
     /**
      * Change sort option
      */
-    setSortOption(option) {
-        this.sortOption = option;
+    SetSortOption(option) {
+        this.SortOption = option;
         this.applyFilters();
     }
+    /** @deprecated Use {@link SetSortOption}. */
+    setSortOption(option) {
+        return this.SetSortOption(option);
+    }
     /**
      * Apply all filters and sorting
      */
     applyFilters() {
-        let result = [...this.allLists];
+        let result = [...this.AllLists];
         // Apply search filter
-        if (this.searchText.trim()) {
-            const search = this.searchText.toLowerCase();
+        if (this.SearchText.trim()) {
+            const search = this.SearchText.toLowerCase();
             result = result.filter(vm => vm.list.Name.toLowerCase().includes(search) ||
                 (vm.list.Description?.toLowerCase().includes(search)));
         }
         // Apply tab filter
-        switch (this.activeTab) {
+        switch (this.ActiveTab) {
             case 'my-lists':
                 // Already filtered by user in loadData
                 break;
@@ -667,7 +831,7 @@ export class ListManagementDialogComponent extends BaseAngularComponent {
             // 'all' and 'shared' - no additional filtering for now
         }
         // Apply sorting
-        switch (this.sortOption) {
+        switch (this.SortOption) {
             case 'name':
                 result.sort((a, b) => a.list.Name.localeCompare(b.list.Name));
                 break;
@@ -678,67 +842,79 @@ export class ListManagementDialogComponent extends BaseAngularComponent {
                 result.sort((a, b) => b.itemCount - a.itemCount);
                 break;
         }
-        this.filteredLists = result;
+        this.FilteredLists = result;
         this.cdr.detectChanges();
     }
     /**
      * Toggle list selection for adding
      */
-    toggleListForAdd(vm) {
+    ToggleListForAdd(vm) {
         if (this.config?.mode === 'remove')
             return;
         const listId = vm.list.ID;
-        if (vm.isSelectedForAdd || this.addedToLists.has(listId)) {
+        if (vm.isSelectedForAdd || this.AddedToLists.has(listId)) {
             // Deselect
             vm.isSelectedForAdd = false;
-            this.addedToLists.delete(listId);
+            this.AddedToLists.delete(listId);
         }
         else {
             // Select for add
             vm.isSelectedForAdd = true;
             vm.isSelectedForRemove = false;
-            this.addedToLists.add(listId);
-            this.removedFromLists.delete(listId);
+            this.AddedToLists.add(listId);
+            this.RemovedFromLists.delete(listId);
         }
         this.cdr.detectChanges();
     }
+    /** @deprecated Use {@link ToggleListForAdd}. */
+    toggleListForAdd(vm) {
+        return this.ToggleListForAdd(vm);
+    }
     /**
      * Toggle list selection for removal
      */
-    toggleListForRemove(vm) {
+    ToggleListForRemove(vm) {
         if (this.config?.mode === 'add')
             return;
         if (!this.config?.allowRemove && this.config?.mode !== 'manage')
             return;
         const listId = vm.list.ID;
-        if (vm.isSelectedForRemove || this.removedFromLists.has(listId)) {
+        if (vm.isSelectedForRemove || this.RemovedFromLists.has(listId)) {
             // Deselect
             vm.isSelectedForRemove = false;
-            this.removedFromLists.delete(listId);
+            this.RemovedFromLists.delete(listId);
         }
         else {
             // Select for remove
             vm.isSelectedForRemove = true;
             vm.isSelectedForAdd = false;
-            this.removedFromLists.add(listId);
-            this.addedToLists.delete(listId);
+            this.RemovedFromLists.add(listId);
+            this.AddedToLists.delete(listId);
         }
         this.cdr.detectChanges();
     }
+    /** @deprecated Use {@link ToggleListForRemove}. */
+    toggleListForRemove(vm) {
+        return this.ToggleListForRemove(vm);
+    }
     /**
      * Get membership indicator class
      */
-    getMembershipClass(vm) {
+    GetMembershipClass(vm) {
         if (vm.isFullMember)
             return 'full-member';
         if (vm.isPartialMember)
             return 'partial-member';
         return 'not-member';
     }
+    /** @deprecated Use {@link GetMembershipClass}. */
+    getMembershipClass(vm) {
+        return this.GetMembershipClass(vm);
+    }
     /**
      * Get membership indicator text
      */
-    getMembershipText(vm) {
+    GetMembershipText(vm) {
         if (vm.isFullMember) {
             return `${vm.membershipCount}/${vm.totalSelectedRecords}`;
         }
@@ -747,51 +923,67 @@ export class ListManagementDialogComponent extends BaseAngularComponent {
         }
         return `0/${vm.totalSelectedRecords}`;
     }
+    /** @deprecated Use {@link GetMembershipText}. */
+    getMembershipText(vm) {
+        return this.GetMembershipText(vm);
+    }
     /**
      * Get membership icon
      */
-    getMembershipIcon(vm) {
+    GetMembershipIcon(vm) {
         if (vm.isFullMember)
             return 'fa-solid fa-check-circle';
         if (vm.isPartialMember)
             return 'fa-solid fa-circle-half-stroke';
         return 'fa-regular fa-circle';
     }
+    /** @deprecated Use {@link GetMembershipIcon}. */
+    getMembershipIcon(vm) {
+        return this.GetMembershipIcon(vm);
+    }
     /**
      * Show create list form
      */
+    ShowCreateListForm() {
+        this.ShowCreateForm = true;
+        this.NewListName = '';
+        this.NewListDescription = '';
+        this.NewListCategoryId = null;
+    }
+    /** @deprecated Use {@link ShowCreateListForm}. */
     showCreateListForm() {
-        this.showCreateForm = true;
-        this.newListName = '';
-        this.newListDescription = '';
-        this.newListCategoryId = null;
+        return this.ShowCreateListForm();
     }
     /**
      * Cancel create list form
      */
+    CancelCreateList() {
+        this.ShowCreateForm = false;
+        this.NewListName = '';
+        this.NewListDescription = '';
+        this.NewListCategoryId = null;
+    }
+    /** @deprecated Use {@link CancelCreateList}. */
     cancelCreateList() {
-        this.showCreateForm = false;
-        this.newListName = '';
-        this.newListDescription = '';
-        this.newListCategoryId = null;
+        return this.CancelCreateList();
     }
     /**
      * Create a new list
      */
-    async createList() {
-        if (!this.newListName.trim() || !this.config)
+    async CreateList() {
+        if (!this.NewListName.trim() || !this.config)
             return;
         this.saving = true;
         try {
             const createConfig = {
-                name: this.newListName.trim(),
-                description: this.newListDescription.trim() || undefined,
-                categoryId: this.newListCategoryId || undefined,
+                name: this.NewListName.trim(),
+                description: this.NewListDescription.trim() || undefined,
+                categoryId: this.NewListCategoryId || undefined,
                 entityId: this.config.entityId
             };
             const newList = await this.listService.createList(createConfig);
             if (newList) {
-                this.newlyCreatedLists.push(newList);
+                this.NewlyCreatedLists.push(newList);
                 // Add to view models and select for add
                 const vm = {
                     list: newList,
@@ -805,12 +997,12 @@ export class ListManagementDialogComponent extends BaseAngularComponent {
                     isSelectedForAdd: true,
                     isSelectedForRemove: false
                 };
-                this.allLists.unshift(vm);
-                this.addedToLists.add(newList.ID);
-                this.showCreateForm = false;
-                this.newListName = '';
-                this.newListDescription = '';
-                this.newListCategoryId = null;
+                this.AllLists.unshift(vm);
+                this.AddedToLists.add(newList.ID);
+                this.ShowCreateForm = false;
+                this.NewListName = '';
+                this.NewListDescription = '';
+                this.NewListCategoryId = null;
                 this.applyFilters();
             }
         }
@@ -822,10 +1014,14 @@ export class ListManagementDialogComponent extends BaseAngularComponent {
             this.cdr.detectChanges();
         }
     }
+    /** @deprecated Use {@link CreateList}. */
+    async createList() {
+        return this.CreateList();
+    }
     /**
      * Apply changes and close dialog
      */
-    async applyChanges() {
+    async ApplyChanges() {
         if (!this.config)
             return;
         this.saving = true;
@@ -833,19 +1029,19 @@ export class ListManagementDialogComponent extends BaseAngularComponent {
             action: 'apply',
             added: [],
             removed: [],
-            newListsCreated: this.newlyCreatedLists,
+            newListsCreated: this.NewlyCreatedLists,
             summary: { added: 0, removed: 0, skipped: 0, failed: 0 }
         };
         try {
             // Process additions
-            if (this.addedToLists.size > 0) {
-                const addResult = await this.listService.addRecordsToLists([...this.addedToLists], this.config.recordIds, true // Skip duplicates
+            if (this.AddedToLists.size > 0) {
+                const addResult = await this.listService.addRecordsToLists([...this.AddedToLists], this.config.recordIds, true // Skip duplicates
                 );
                 result.summary.added += addResult.success;
                 result.summary.skipped += addResult.skipped;
                 result.summary.failed += addResult.failed;
-                for (const listId of this.addedToLists) {
-                    const vm = this.allLists.find(l => UUIDsEqual(l.list.ID, listId));
+                for (const listId of this.AddedToLists) {
+                    const vm = this.AllLists.find(l => UUIDsEqual(l.list.ID, listId));
                     if (vm) {
                         result.added.push({
                             listId,
@@ -856,12 +1052,12 @@ export class ListManagementDialogComponent extends BaseAngularComponent {
                 }
             }
             // Process removals
-            if (this.removedFromLists.size > 0) {
-                const removeResult = await this.listService.removeRecordsFromLists([...this.removedFromLists], this.config.recordIds);
+            if (this.RemovedFromLists.size > 0) {
+                const removeResult = await this.listService.removeRecordsFromLists([...this.RemovedFromLists], this.config.recordIds);
                 result.summary.removed += removeResult.success;
                 result.summary.failed += removeResult.failed;
-                for (const listId of this.removedFromLists) {
-                    const vm = this.allLists.find(l => UUIDsEqual(l.list.ID, listId));
+                for (const listId of this.RemovedFromLists) {
+                    const vm = this.AllLists.find(l => UUIDsEqual(l.list.ID, listId));
                     if (vm) {
                         result.removed.push({
                             listId,
@@ -871,7 +1067,7 @@ export class ListManagementDialogComponent extends BaseAngularComponent {
                     }
                 }
             }
-            this.complete.emit(result);
+            this.Complete.emit(result);
         }
         catch (error) {
             console.error('Error applying changes:', error);
@@ -882,6 +1078,10 @@ export class ListManagementDialogComponent extends BaseAngularComponent {
             this.cdr.detectChanges();
         }
     }
+    /** @deprecated Use {@link ApplyChanges}. */
+    async applyChanges() {
+        return this.ApplyChanges();
+    }
     /**
      * Cancel and close dialog
      */
@@ -917,23 +1117,31 @@ export class ListManagementDialogComponent extends BaseAngularComponent {
     /**
      * Check if we should show the add button for a list
      */
-    showAddButton(vm) {
+    ShowAddButton(vm) {
         if (this.config?.mode === 'remove')
             return false;
         return !vm.isFullMember || !this.originalMembership.get(vm.list.ID);
     }
+    /** @deprecated Use {@link ShowAddButton}. */
+    showAddButton(vm) {
+        return this.ShowAddButton(vm);
+    }
     /**
      * Check if we should show the remove button for a list
      */
-    showRemoveButton(vm) {
+    ShowRemoveButton(vm) {
         if (this.config?.mode === 'add')
             return false;
         if (!this.config?.allowRemove && this.config?.mode !== 'manage')
             return false;
         return vm.isFullMember || vm.isPartialMember || this.originalMembership.get(vm.list.ID) === true;
     }
+    /** @deprecated Use {@link ShowRemoveButton}. */
+    showRemoveButton(vm) {
+        return this.ShowRemoveButton(vm);
+    }
     static ɵfac = function ListManagementDialogComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ListManagementDialogComponent)(i0.ɵɵdirectiveInject(i1.ListManagementService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-    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) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ListManagementDialogComponent, selectors: [["mj-list-management-dialog"]], inputs: { config: "config", Visible: "Visible", visible: "visible" }, outputs: { Complete: "Complete", 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) {
             i0.ɵɵconditionalCreate(0, ListManagementDialogComponent_Conditional_0_Template, 50, 18, "div", 0);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.visible ? 0 : -1);
@@ -944,8 +1152,12 @@ export class ListManagementDialogComponent extends BaseAngularComponent {
         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"] }]
     }], () => [{ type: i1.ListManagementService }, { type: i0.ChangeDetectorRef }], { config: [{
             type: Input
+        }], Visible: [{
+            type: Input
         }], visible: [{
             type: Input
+        }], Complete: [{
+            type: Output
         }], complete: [{
             type: Output
         }], cancel: [{