@memberjunction/ng-explorer-settings 6.1.4 → 6.2.0-edge.1

package/dist/lib/user-profile-settings/user-profile-settings.component.js

@@ -248,28 +248,140 @@ export class UserProfileSettingsComponent extends BaseAngularComponent {
     sharedService;
     cdr;
     ngZone;
-    currentUser;
-    selectedTab = 'url';
+    CurrentUser;
+    /** @deprecated Use {@link CurrentUser}. */
+    get currentUser() {
+        return this.CurrentUser;
+    }
+    /** @deprecated Use {@link CurrentUser}. */
+    set currentUser(value) {
+        this.CurrentUser = value;
+    }
+    SelectedTab = 'url';
+    /** @deprecated Use {@link SelectedTab}. */
+    get selectedTab() {
+        return this.SelectedTab;
+    }
+    /** @deprecated Use {@link SelectedTab}. */
+    set selectedTab(value) {
+        this.SelectedTab = value;
+    }
     // Form state
-    imageUrlInput = '';
-    selectedIconClass = '';
-    uploadedImageBase64 = '';
-    uploadedFileName = '';
-    previewUrl = '';
-    previewIconClass = '';
+    ImageUrlInput = '';
+    /** @deprecated Use {@link ImageUrlInput}. */
+    get imageUrlInput() {
+        return this.ImageUrlInput;
+    }
+    /** @deprecated Use {@link ImageUrlInput}. */
+    set imageUrlInput(value) {
+        this.ImageUrlInput = value;
+    }
+    SelectedIconClass = '';
+    /** @deprecated Use {@link SelectedIconClass}. */
+    get selectedIconClass() {
+        return this.SelectedIconClass;
+    }
+    /** @deprecated Use {@link SelectedIconClass}. */
+    set selectedIconClass(value) {
+        this.SelectedIconClass = value;
+    }
+    UploadedImageBase64 = '';
+    /** @deprecated Use {@link UploadedImageBase64}. */
+    get uploadedImageBase64() {
+        return this.UploadedImageBase64;
+    }
+    /** @deprecated Use {@link UploadedImageBase64}. */
+    set uploadedImageBase64(value) {
+        this.UploadedImageBase64 = value;
+    }
+    UploadedFileName = '';
+    /** @deprecated Use {@link UploadedFileName}. */
+    get uploadedFileName() {
+        return this.UploadedFileName;
+    }
+    /** @deprecated Use {@link UploadedFileName}. */
+    set uploadedFileName(value) {
+        this.UploadedFileName = value;
+    }
+    PreviewUrl = '';
+    /** @deprecated Use {@link PreviewUrl}. */
+    get previewUrl() {
+        return this.PreviewUrl;
+    }
+    /** @deprecated Use {@link PreviewUrl}. */
+    set previewUrl(value) {
+        this.PreviewUrl = value;
+    }
+    PreviewIconClass = '';
+    /** @deprecated Use {@link PreviewIconClass}. */
+    get previewIconClass() {
+        return this.PreviewIconClass;
+    }
+    /** @deprecated Use {@link PreviewIconClass}. */
+    set previewIconClass(value) {
+        this.PreviewIconClass = value;
+    }
     // UI state
-    isSaving = false;
-    showSuccessMessage = false;
+    IsSaving = false;
+    /** @deprecated Use {@link IsSaving}. */
+    get isSaving() {
+        return this.IsSaving;
+    }
+    /** @deprecated Use {@link IsSaving}. */
+    set isSaving(value) {
+        this.IsSaving = value;
+    }
+    ShowSuccessMessage = false;
+    /** @deprecated Use {@link ShowSuccessMessage}. */
+    get showSuccessMessage() {
+        return this.ShowSuccessMessage;
+    }
+    /** @deprecated Use {@link ShowSuccessMessage}. */
+    set showSuccessMessage(value) {
+        this.ShowSuccessMessage = value;
+    }
     errorMessage = '';
     // Icon search state
-    iconSearchTerm = '';
-    iconSearch$ = new BehaviorSubject('');
-    filteredIconCategories = [];
-    totalFilteredIcons = 0;
+    IconSearchTerm = '';
+    /** @deprecated Use {@link IconSearchTerm}. */
+    get iconSearchTerm() {
+        return this.IconSearchTerm;
+    }
+    /** @deprecated Use {@link IconSearchTerm}. */
+    set iconSearchTerm(value) {
+        this.IconSearchTerm = value;
+    }
+    IconSearch$ = new BehaviorSubject('');
+    /** @deprecated Use {@link IconSearch$}. */
+    get iconSearch$() {
+        return this.IconSearch$;
+    }
+    /** @deprecated Use {@link IconSearch$}. */
+    set iconSearch$(value) {
+        this.IconSearch$ = value;
+    }
+    FilteredIconCategories = [];
+    /** @deprecated Use {@link FilteredIconCategories}. */
+    get filteredIconCategories() {
+        return this.FilteredIconCategories;
+    }
+    /** @deprecated Use {@link FilteredIconCategories}. */
+    set filteredIconCategories(value) {
+        this.FilteredIconCategories = value;
+    }
+    TotalFilteredIcons = 0;
+    /** @deprecated Use {@link TotalFilteredIcons}. */
+    get totalFilteredIcons() {
+        return this.TotalFilteredIcons;
+    }
+    /** @deprecated Use {@link TotalFilteredIcons}. */
+    set totalFilteredIcons(value) {
+        this.TotalFilteredIcons = value;
+    }
     // Cleanup
     destroy$ = new Subject();
     // Icon picker data
-    iconCategories = [
+    IconCategories = [
         {
             name: 'Users',
             icons: [
@@ -346,6 +458,14 @@ export class UserProfileSettingsComponent extends BaseAngularComponent {
             ]
         }
     ];
+    /** @deprecated Use {@link IconCategories}. */
+    get iconCategories() {
+        return this.IconCategories;
+    }
+    /** @deprecated Use {@link IconCategories}. */
+    set iconCategories(value) {
+        this.IconCategories = value;
+    }
     constructor(userAvatarService, sharedService, cdr, ngZone) {
         super();
         this.userAvatarService = userAvatarService;
@@ -357,11 +477,11 @@ export class UserProfileSettingsComponent extends BaseAngularComponent {
         const md = this.ProviderToUse;
         const currentUserInfo = md.CurrentUser;
         // Load the full MJUserEntity to access avatar fields
-        this.currentUser = await md.GetEntityObject('MJ: Users');
-        await this.currentUser.Load(currentUserInfo.ID);
+        this.CurrentUser = await md.GetEntityObject('MJ: Users');
+        await this.CurrentUser.Load(currentUserInfo.ID);
         // Initialize filtered icons
-        this.filteredIconCategories = [...this.iconCategories];
-        this.totalFilteredIcons = this.iconCategories.reduce((sum, cat) => sum + cat.icons.length, 0);
+        this.FilteredIconCategories = [...this.IconCategories];
+        this.TotalFilteredIcons = this.IconCategories.reduce((sum, cat) => sum + cat.icons.length, 0);
         // Setup icon search subscription
         this.setupIconSearchSubscription();
         this.loadCurrentAvatar();
@@ -374,7 +494,7 @@ export class UserProfileSettingsComponent extends BaseAngularComponent {
      * Initializes the icon search subscription with debounce
      */
     setupIconSearchSubscription() {
-        this.iconSearch$
+        this.IconSearch$
             .pipe(debounceTime(200), // Faster debounce for local filtering
         distinctUntilChanged(), takeUntil(this.destroy$))
             .subscribe((searchTerm) => {
@@ -384,10 +504,14 @@ export class UserProfileSettingsComponent extends BaseAngularComponent {
     /**
      * Handles icon search input changes
      */
-    onIconSearchChange(event) {
+    OnIconSearchChange(event) {
         const value = event.target.value;
-        this.iconSearchTerm = value;
-        this.iconSearch$.next(value);
+        this.IconSearchTerm = value;
+        this.IconSearch$.next(value);
+    }
+    /** @deprecated Use {@link OnIconSearchChange}. */
+    onIconSearchChange(event) {
+        return this.OnIconSearchChange(event);
     }
     /**
      * Filters icons based on search term
@@ -396,25 +520,25 @@ export class UserProfileSettingsComponent extends BaseAngularComponent {
     filterIcons(searchTerm) {
         if (!searchTerm || searchTerm.trim() === '') {
             // Show all icons
-            this.filteredIconCategories = [...this.iconCategories];
-            this.totalFilteredIcons = this.iconCategories.reduce((sum, cat) => sum + cat.icons.length, 0);
+            this.FilteredIconCategories = [...this.IconCategories];
+            this.TotalFilteredIcons = this.IconCategories.reduce((sum, cat) => sum + cat.icons.length, 0);
             return;
         }
         const term = searchTerm.toLowerCase().trim();
-        this.filteredIconCategories = [];
-        this.totalFilteredIcons = 0;
-        for (const category of this.iconCategories) {
+        this.FilteredIconCategories = [];
+        this.TotalFilteredIcons = 0;
+        for (const category of this.IconCategories) {
             const matchingIcons = category.icons.filter((icon) => {
                 // Extract icon name from class (e.g., "fa-solid fa-user-tie" -> "user-tie")
-                const iconName = this.extractIconName(icon);
+                const iconName = this.ExtractIconName(icon);
                 return iconName.includes(term);
             });
             if (matchingIcons.length > 0) {
-                this.filteredIconCategories.push({
+                this.FilteredIconCategories.push({
                     name: category.name,
                     icons: matchingIcons
                 });
-                this.totalFilteredIcons += matchingIcons.length;
+                this.TotalFilteredIcons += matchingIcons.length;
             }
         }
     }
@@ -422,7 +546,7 @@ export class UserProfileSettingsComponent extends BaseAngularComponent {
      * Extracts the icon name from a Font Awesome class string
      * e.g., "fa-solid fa-user-tie" -> "user-tie"
      */
-    extractIconName(iconClass) {
+    ExtractIconName(iconClass) {
         const parts = iconClass.split(' ');
         for (const part of parts) {
             if (part.startsWith('fa-') && !['fa-solid', 'fa-regular', 'fa-light', 'fa-brands'].includes(part)) {
@@ -431,51 +555,63 @@ export class UserProfileSettingsComponent extends BaseAngularComponent {
         }
         return iconClass.toLowerCase();
     }
+    /** @deprecated Use {@link ExtractIconName}. */
+    extractIconName(iconClass) {
+        return this.ExtractIconName(iconClass);
+    }
     /**
      * Clears the icon search
      */
+    ClearIconSearch() {
+        this.IconSearchTerm = '';
+        this.IconSearch$.next('');
+    }
+    /** @deprecated Use {@link ClearIconSearch}. */
     clearIconSearch() {
-        this.iconSearchTerm = '';
-        this.iconSearch$.next('');
+        return this.ClearIconSearch();
     }
     /**
      * Loads the current avatar settings from the user entity
      */
     loadCurrentAvatar() {
-        if (this.currentUser.UserImageURL) {
-            this.imageUrlInput = this.currentUser.UserImageURL;
-            this.previewUrl = this.currentUser.UserImageURL;
+        if (this.CurrentUser.UserImageURL) {
+            this.ImageUrlInput = this.CurrentUser.UserImageURL;
+            this.PreviewUrl = this.CurrentUser.UserImageURL;
             // Determine if it's a Base64 upload or URL
-            if (this.userAvatarService.isValidBase64DataUri(this.currentUser.UserImageURL)) {
-                this.selectedTab = 'upload';
-                this.uploadedImageBase64 = this.currentUser.UserImageURL;
-                this.uploadedFileName = 'Current uploaded image';
+            if (this.userAvatarService.isValidBase64DataUri(this.CurrentUser.UserImageURL)) {
+                this.SelectedTab = 'upload';
+                this.UploadedImageBase64 = this.CurrentUser.UserImageURL;
+                this.UploadedFileName = 'Current uploaded image';
             }
             else {
-                this.selectedTab = 'url';
+                this.SelectedTab = 'url';
             }
         }
-        else if (this.currentUser.UserImageIconClass) {
-            this.selectedIconClass = this.currentUser.UserImageIconClass;
-            this.previewIconClass = this.currentUser.UserImageIconClass;
-            this.selectedTab = 'icon';
+        else if (this.CurrentUser.UserImageIconClass) {
+            this.SelectedIconClass = this.CurrentUser.UserImageIconClass;
+            this.PreviewIconClass = this.CurrentUser.UserImageIconClass;
+            this.SelectedTab = 'icon';
         }
         else {
             // Default to URL tab with empty state
-            this.selectedTab = 'url';
+            this.SelectedTab = 'url';
         }
     }
     /**
      * Switches between tabs and updates preview
      */
-    selectTab(tab) {
-        this.selectedTab = tab;
+    SelectTab(tab) {
+        this.SelectedTab = tab;
         this.updatePreview();
     }
+    /** @deprecated Use {@link SelectTab}. */
+    selectTab(tab) {
+        return this.SelectTab(tab);
+    }
     /**
      * Handles file selection from native input
      */
-    async onFileSelected(event) {
+    async OnFileSelected(event) {
         const input = event.target;
         const file = input.files?.[0];
         if (!file) {
@@ -498,23 +634,27 @@ export class UserProfileSettingsComponent extends BaseAngularComponent {
         }
         // Convert to Base64
         try {
-            this.uploadedImageBase64 = await this.userAvatarService.fileToBase64(file);
-            this.uploadedFileName = file.name;
-            this.previewUrl = this.uploadedImageBase64;
-            this.previewIconClass = ''; // Clear icon preview
+            this.UploadedImageBase64 = await this.userAvatarService.fileToBase64(file);
+            this.UploadedFileName = file.name;
+            this.PreviewUrl = this.UploadedImageBase64;
+            this.PreviewIconClass = ''; // Clear icon preview
         }
         catch (error) {
             this.errorMessage = 'Failed to process image. Please try again.';
             console.error('Error converting file to Base64:', error);
         }
     }
+    /** @deprecated Use {@link OnFileSelected}. */
+    async onFileSelected(event) {
+        return this.OnFileSelected(event);
+    }
     /**
      * Clears uploaded file
      */
-    clearUpload() {
-        this.uploadedFileName = '';
-        this.uploadedImageBase64 = '';
-        this.previewUrl = '';
+    ClearUpload() {
+        this.UploadedFileName = '';
+        this.UploadedImageBase64 = '';
+        this.PreviewUrl = '';
         this.errorMessage = '';
         // Reset file input
         const fileInput = document.querySelector('input[type="file"]');
@@ -522,73 +662,93 @@ export class UserProfileSettingsComponent extends BaseAngularComponent {
             fileInput.value = '';
         }
     }
+    /** @deprecated Use {@link ClearUpload}. */
+    clearUpload() {
+        return this.ClearUpload();
+    }
     /**
      * Handles URL input changes
      */
-    onUrlChange() {
+    OnUrlChange() {
         this.errorMessage = '';
-        if (this.imageUrlInput && this.imageUrlInput.trim().length > 0) {
-            if (this.userAvatarService.isValidUrl(this.imageUrlInput)) {
-                this.previewUrl = this.imageUrlInput;
-                this.previewIconClass = ''; // Clear icon preview
+        if (this.ImageUrlInput && this.ImageUrlInput.trim().length > 0) {
+            if (this.userAvatarService.isValidUrl(this.ImageUrlInput)) {
+                this.PreviewUrl = this.ImageUrlInput;
+                this.PreviewIconClass = ''; // Clear icon preview
             }
             else {
                 this.errorMessage = 'Please enter a valid URL';
-                this.previewUrl = '';
+                this.PreviewUrl = '';
             }
         }
         else {
-            this.previewUrl = '';
+            this.PreviewUrl = '';
         }
     }
+    /** @deprecated Use {@link OnUrlChange}. */
+    onUrlChange() {
+        return this.OnUrlChange();
+    }
     /**
      * Handles icon selection
      */
-    selectIcon(iconClass) {
-        this.selectedIconClass = iconClass;
-        this.previewIconClass = iconClass;
-        this.previewUrl = ''; // Clear image preview
+    SelectIcon(iconClass) {
+        this.SelectedIconClass = iconClass;
+        this.PreviewIconClass = iconClass;
+        this.PreviewUrl = ''; // Clear image preview
         this.errorMessage = '';
     }
+    /** @deprecated Use {@link SelectIcon}. */
+    selectIcon(iconClass) {
+        return this.SelectIcon(iconClass);
+    }
     /**
      * Checks if an icon is currently selected
      */
+    IsIconSelected(iconClass) {
+        return this.SelectedIconClass === iconClass;
+    }
+    /** @deprecated Use {@link IsIconSelected}. */
     isIconSelected(iconClass) {
-        return this.selectedIconClass === iconClass;
+        return this.IsIconSelected(iconClass);
     }
     /**
      * Syncs avatar from authentication provider
      * NOTE: This is a placeholder - actual implementation should be done
      * in the calling application which has access to auth services
      */
-    async syncFromProvider() {
+    async SyncFromProvider() {
         this.errorMessage = 'Avatar sync from provider is not yet implemented in settings. Please use the automatic sync on login or manually upload an image.';
         // TODO: Implement auth provider integration
         // The calling application should provide a way to get auth claims
         // and call userAvatarService.syncFromImageUrl() with the appropriate URL and headers
     }
+    /** @deprecated Use {@link SyncFromProvider}. */
+    async syncFromProvider() {
+        return this.SyncFromProvider();
+    }
     /**
      * Reverts avatar to default (clears both fields)
      * This will trigger auto-sync from auth provider on next login
      */
-    async revertToDefault() {
-        this.isSaving = true;
+    async RevertToDefault() {
+        this.IsSaving = true;
         this.errorMessage = '';
-        this.showSuccessMessage = false;
+        this.ShowSuccessMessage = false;
         try {
             // Clear both avatar fields
-            this.currentUser.UserImageURL = null;
-            this.currentUser.UserImageIconClass = null;
+            this.CurrentUser.UserImageURL = null;
+            this.CurrentUser.UserImageIconClass = null;
             // Save to database
-            const saved = await this.currentUser.Save();
+            const saved = await this.CurrentUser.Save();
             if (saved) {
                 // Clear local state
-                this.imageUrlInput = '';
-                this.selectedIconClass = '';
-                this.uploadedImageBase64 = '';
-                this.uploadedFileName = '';
-                this.previewUrl = '';
-                this.previewIconClass = '';
+                this.ImageUrlInput = '';
+                this.SelectedIconClass = '';
+                this.UploadedImageBase64 = '';
+                this.UploadedFileName = '';
+                this.PreviewUrl = '';
+                this.PreviewIconClass = '';
                 this.showSuccess('Avatar reverted to default! Your auth provider image will sync on next login.');
                 // Notify header component to update avatar display
                 MJGlobal.Instance.RaiseEvent({
@@ -614,32 +774,36 @@ export class UserProfileSettingsComponent extends BaseAngularComponent {
         }
         finally {
             this.ngZone.run(() => {
-                this.isSaving = false;
+                this.IsSaving = false;
                 this.cdr.markForCheck();
             });
         }
     }
+    /** @deprecated Use {@link RevertToDefault}. */
+    async revertToDefault() {
+        return this.RevertToDefault();
+    }
     /**
      * Updates the preview based on current tab
      */
     updatePreview() {
-        switch (this.selectedTab) {
+        switch (this.SelectedTab) {
             case 'upload':
-                if (this.uploadedImageBase64) {
-                    this.previewUrl = this.uploadedImageBase64;
-                    this.previewIconClass = '';
+                if (this.UploadedImageBase64) {
+                    this.PreviewUrl = this.UploadedImageBase64;
+                    this.PreviewIconClass = '';
                 }
                 break;
             case 'url':
-                if (this.imageUrlInput && this.userAvatarService.isValidUrl(this.imageUrlInput)) {
-                    this.previewUrl = this.imageUrlInput;
-                    this.previewIconClass = '';
+                if (this.ImageUrlInput && this.userAvatarService.isValidUrl(this.ImageUrlInput)) {
+                    this.PreviewUrl = this.ImageUrlInput;
+                    this.PreviewIconClass = '';
                 }
                 break;
             case 'icon':
-                if (this.selectedIconClass) {
-                    this.previewIconClass = this.selectedIconClass;
-                    this.previewUrl = '';
+                if (this.SelectedIconClass) {
+                    this.PreviewIconClass = this.SelectedIconClass;
+                    this.PreviewUrl = '';
                 }
                 break;
         }
@@ -648,42 +812,42 @@ export class UserProfileSettingsComponent extends BaseAngularComponent {
      * Saves avatar settings to database
      */
     async save() {
-        this.isSaving = true;
+        this.IsSaving = true;
         this.errorMessage = '';
-        this.showSuccessMessage = false;
+        this.ShowSuccessMessage = false;
         try {
             // Update user entity based on selected tab
-            switch (this.selectedTab) {
+            switch (this.SelectedTab) {
                 case 'upload':
-                    if (!this.uploadedImageBase64) {
+                    if (!this.UploadedImageBase64) {
                         this.errorMessage = 'Please select an image to upload';
-                        this.isSaving = false;
+                        this.IsSaving = false;
                         return;
                     }
-                    this.currentUser.UserImageURL = this.uploadedImageBase64;
-                    this.currentUser.UserImageIconClass = null;
+                    this.CurrentUser.UserImageURL = this.UploadedImageBase64;
+                    this.CurrentUser.UserImageIconClass = null;
                     break;
                 case 'url':
-                    if (!this.imageUrlInput || !this.userAvatarService.isValidUrl(this.imageUrlInput)) {
+                    if (!this.ImageUrlInput || !this.userAvatarService.isValidUrl(this.ImageUrlInput)) {
                         this.errorMessage = 'Please enter a valid image URL';
-                        this.isSaving = false;
+                        this.IsSaving = false;
                         return;
                     }
-                    this.currentUser.UserImageURL = this.imageUrlInput;
-                    this.currentUser.UserImageIconClass = null;
+                    this.CurrentUser.UserImageURL = this.ImageUrlInput;
+                    this.CurrentUser.UserImageIconClass = null;
                     break;
                 case 'icon':
-                    if (!this.selectedIconClass) {
+                    if (!this.SelectedIconClass) {
                         this.errorMessage = 'Please select an icon';
-                        this.isSaving = false;
+                        this.IsSaving = false;
                         return;
                     }
-                    this.currentUser.UserImageURL = null;
-                    this.currentUser.UserImageIconClass = this.selectedIconClass;
+                    this.CurrentUser.UserImageURL = null;
+                    this.CurrentUser.UserImageIconClass = this.SelectedIconClass;
                     break;
             }
             // Save to database
-            const saved = await this.currentUser.Save();
+            const saved = await this.CurrentUser.Save();
             if (saved) {
                 this.showSuccess('Avatar updated successfully!');
                 // Notify header component to update avatar display
@@ -692,8 +856,8 @@ export class UserProfileSettingsComponent extends BaseAngularComponent {
                     eventCode: EventCodes.AvatarUpdated,
                     component: this,
                     args: {
-                        imageUrl: this.currentUser.UserImageURL,
-                        iconClass: this.currentUser.UserImageIconClass
+                        imageUrl: this.CurrentUser.UserImageURL,
+                        iconClass: this.CurrentUser.UserImageIconClass
                     }
                 });
             }
@@ -710,7 +874,7 @@ export class UserProfileSettingsComponent extends BaseAngularComponent {
         }
         finally {
             this.ngZone.run(() => {
-                this.isSaving = false;
+                this.IsSaving = false;
                 this.cdr.markForCheck();
             });
         }
@@ -721,17 +885,17 @@ export class UserProfileSettingsComponent extends BaseAngularComponent {
     cancel() {
         this.loadCurrentAvatar();
         this.errorMessage = '';
-        this.showSuccessMessage = false;
+        this.ShowSuccessMessage = false;
     }
     /**
      * Shows success message temporarily
      */
     showSuccess(message) {
-        this.showSuccessMessage = true;
+        this.ShowSuccessMessage = true;
         this.sharedService.CreateSimpleNotification(message, 'success', 3000);
         // Hide success message after 3 seconds
         setTimeout(() => {
-            this.showSuccessMessage = false;
+            this.ShowSuccessMessage = false;
         }, 3000);
     }
     static ɵfac = function UserProfileSettingsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || UserProfileSettingsComponent)(i0.ɵɵdirectiveInject(i1.UserAvatarService), i0.ɵɵdirectiveInject(i2.SharedService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.NgZone)); };