@memberjunction/ng-explorer-settings 2.108.0 → 2.110.0

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

@@ -0,0 +1,696 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Metadata } from '@memberjunction/core';
+import { MJGlobal, MJEventType } from '@memberjunction/global';
+import { EventCodes } from '@memberjunction/ng-shared';
+import * as i0 from "@angular/core";
+import * as i1 from "@memberjunction/ng-user-avatar";
+import * as i2 from "@memberjunction/ng-shared";
+import * as i3 from "@angular/forms";
+const _forTrack0 = ($index, $item) => $item.name;
+function UserProfileSettingsComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 4);
+    i0.ɵɵelement(1, "i", 26);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "button", 27);
+    i0.ɵɵlistener("click", function UserProfileSettingsComponent_Conditional_6_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.errorMessage = ""); });
+    i0.ɵɵelement(5, "i", 28);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.errorMessage);
+} }
+function UserProfileSettingsComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 5);
+    i0.ɵɵelement(1, "i", 29);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "Avatar updated successfully!");
+    i0.ɵɵelementEnd()();
+} }
+function UserProfileSettingsComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "img", 9);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("src", ctx_r1.previewUrl, i0.ɵɵsanitizeUrl);
+} }
+function UserProfileSettingsComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 10);
+    i0.ɵɵelement(1, "i");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r1.previewIconClass + " preview-icon");
+} }
+function UserProfileSettingsComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 11);
+    i0.ɵɵelement(1, "i", 30);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "No avatar selected");
+    i0.ɵɵelementEnd()();
+} }
+function UserProfileSettingsComponent_Conditional_33_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 35);
+    i0.ɵɵelement(1, "i", 36);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "button", 37);
+    i0.ɵɵlistener("click", function UserProfileSettingsComponent_Conditional_33_Conditional_9_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.clearUpload()); });
+    i0.ɵɵelement(5, "i", 28);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.uploadedFileName);
+} }
+function UserProfileSettingsComponent_Conditional_33_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 19)(1, "input", 31, 0);
+    i0.ɵɵlistener("change", function UserProfileSettingsComponent_Conditional_33_Template_input_change_1_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onFileSelected($event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "button", 32);
+    i0.ɵɵlistener("click", function UserProfileSettingsComponent_Conditional_33_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r3); const fileInput_r4 = i0.ɵɵreference(2); return i0.ɵɵresetView(fileInput_r4.click()); });
+    i0.ɵɵelement(4, "i", 14);
+    i0.ɵɵtext(5, " Choose Image ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "div", 33);
+    i0.ɵɵelement(7, "i", 34);
+    i0.ɵɵtext(8, " Max 200KB \u2022 PNG, JPG, GIF, WEBP ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(9, UserProfileSettingsComponent_Conditional_33_Conditional_9_Template, 6, 1, "div", 35);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(9);
+    i0.ɵɵconditional(ctx_r1.uploadedFileName ? 9 : -1);
+} }
+function UserProfileSettingsComponent_Conditional_34_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 20)(1, "label", 38);
+    i0.ɵɵtext(2, "Image URL");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "input", 39);
+    i0.ɵɵtwoWayListener("ngModelChange", function UserProfileSettingsComponent_Conditional_34_Template_input_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.imageUrlInput, $event) || (ctx_r1.imageUrlInput = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("input", function UserProfileSettingsComponent_Conditional_34_Template_input_input_3_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onUrlChange()); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 40);
+    i0.ɵɵelement(5, "i", 34);
+    i0.ɵɵtext(6, " Enter a URL to an image hosted online ");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.imageUrlInput);
+} }
+function UserProfileSettingsComponent_Conditional_35_For_2_For_5_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 45);
+    i0.ɵɵlistener("click", function UserProfileSettingsComponent_Conditional_35_For_2_For_5_Template_button_click_0_listener() { const icon_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.selectIcon(icon_r8)); });
+    i0.ɵɵelement(1, "i");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const icon_r8 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("selected", ctx_r1.isIconSelected(icon_r8));
+    i0.ɵɵproperty("title", icon_r8);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(icon_r8);
+} }
+function UserProfileSettingsComponent_Conditional_35_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 41)(1, "h4", 42);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 43);
+    i0.ɵɵrepeaterCreate(4, UserProfileSettingsComponent_Conditional_35_For_2_For_5_Template, 2, 5, "button", 44, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const category_r9 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(category_r9.name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(category_r9.icons);
+} }
+function UserProfileSettingsComponent_Conditional_35_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 21);
+    i0.ɵɵrepeaterCreate(1, UserProfileSettingsComponent_Conditional_35_For_2_Template, 6, 1, "div", 41, _forTrack0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.iconCategories);
+} }
+function UserProfileSettingsComponent_Conditional_36_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1, "Syncing...");
+    i0.ɵɵelementEnd();
+} }
+function UserProfileSettingsComponent_Conditional_36_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1, "Sync from Microsoft Account");
+    i0.ɵɵelementEnd();
+} }
+function UserProfileSettingsComponent_Conditional_36_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1, "Reverting...");
+    i0.ɵɵelementEnd();
+} }
+function UserProfileSettingsComponent_Conditional_36_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1, "Revert to Default");
+    i0.ɵɵelementEnd();
+} }
+function UserProfileSettingsComponent_Conditional_36_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 22)(1, "div", 46);
+    i0.ɵɵelement(2, "i", 34);
+    i0.ɵɵelementStart(3, "p");
+    i0.ɵɵtext(4, "Sync your avatar from your authentication provider account");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(5, "button", 47);
+    i0.ɵɵlistener("click", function UserProfileSettingsComponent_Conditional_36_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.syncFromProvider()); });
+    i0.ɵɵelement(6, "i", 17);
+    i0.ɵɵtemplate(7, UserProfileSettingsComponent_Conditional_36_Conditional_7_Template, 2, 0, "span")(8, UserProfileSettingsComponent_Conditional_36_Conditional_8_Template, 2, 0, "span");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "div", 48);
+    i0.ɵɵelement(10, "i", 49);
+    i0.ɵɵelementStart(11, "small");
+    i0.ɵɵtext(12, "This will download your profile photo from Microsoft and save it to your profile");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(13, "div", 50);
+    i0.ɵɵelementStart(14, "button", 51);
+    i0.ɵɵlistener("click", function UserProfileSettingsComponent_Conditional_36_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.revertToDefault()); });
+    i0.ɵɵelement(15, "i", 52);
+    i0.ɵɵtemplate(16, UserProfileSettingsComponent_Conditional_36_Conditional_16_Template, 2, 0, "span")(17, UserProfileSettingsComponent_Conditional_36_Conditional_17_Template, 2, 0, "span");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(18, "div", 48);
+    i0.ɵɵelement(19, "i", 34);
+    i0.ɵɵelementStart(20, "small");
+    i0.ɵɵtext(21, "Clears your avatar settings and restores the automatic sync from your auth provider");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(5);
+    i0.ɵɵproperty("disabled", ctx_r1.isSaving);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.isSaving ? 7 : 8);
+    i0.ɵɵadvance(7);
+    i0.ɵɵproperty("disabled", ctx_r1.isSaving);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.isSaving ? 16 : 17);
+} }
+function UserProfileSettingsComponent_Conditional_41_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 53);
+    i0.ɵɵelementStart(1, "span");
+    i0.ɵɵtext(2, "Saving...");
+    i0.ɵɵelementEnd();
+} }
+function UserProfileSettingsComponent_Conditional_42_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 54);
+    i0.ɵɵelementStart(1, "span");
+    i0.ɵɵtext(2, "Save Changes");
+    i0.ɵɵelementEnd();
+} }
+export class UserProfileSettingsComponent {
+    userAvatarService;
+    sharedService;
+    currentUser;
+    selectedTab = 'url';
+    // Form state
+    imageUrlInput = '';
+    selectedIconClass = '';
+    uploadedImageBase64 = '';
+    uploadedFileName = '';
+    previewUrl = '';
+    previewIconClass = '';
+    // UI state
+    isSaving = false;
+    showSuccessMessage = false;
+    errorMessage = '';
+    // Icon picker data
+    iconCategories = [
+        {
+            name: 'Users',
+            icons: [
+                'fa-solid fa-user',
+                'fa-solid fa-user-tie',
+                'fa-solid fa-user-astronaut',
+                'fa-solid fa-user-ninja',
+                'fa-solid fa-user-secret',
+                'fa-solid fa-user-graduate',
+                'fa-solid fa-user-doctor',
+                'fa-solid fa-user-gear',
+                'fa-regular fa-circle-user',
+                'fa-solid fa-user-check',
+                'fa-solid fa-user-shield',
+                'fa-solid fa-user-crown',
+                'fa-solid fa-user-pilot',
+                'fa-solid fa-user-cowboy',
+                'fa-solid fa-user-chef'
+            ]
+        },
+        {
+            name: 'Business',
+            icons: [
+                'fa-solid fa-briefcase',
+                'fa-solid fa-building',
+                'fa-solid fa-chart-line',
+                'fa-solid fa-handshake',
+                'fa-solid fa-trophy',
+                'fa-solid fa-medal',
+                'fa-solid fa-award',
+                'fa-solid fa-lightbulb',
+                'fa-solid fa-rocket',
+                'fa-solid fa-star'
+            ]
+        },
+        {
+            name: 'Tech',
+            icons: [
+                'fa-solid fa-laptop-code',
+                'fa-solid fa-terminal',
+                'fa-solid fa-microchip',
+                'fa-solid fa-robot',
+                'fa-solid fa-brain',
+                'fa-solid fa-code',
+                'fa-solid fa-server',
+                'fa-solid fa-database',
+                'fa-solid fa-network-wired',
+                'fa-solid fa-bug'
+            ]
+        },
+        {
+            name: 'Fun',
+            icons: [
+                'fa-solid fa-face-smile',
+                'fa-solid fa-face-grin',
+                'fa-solid fa-face-laugh',
+                'fa-solid fa-face-wink',
+                'fa-solid fa-heart',
+                'fa-solid fa-fire',
+                'fa-solid fa-bolt',
+                'fa-solid fa-gem',
+                'fa-solid fa-crown',
+                'fa-solid fa-hat-wizard'
+            ]
+        },
+        {
+            name: 'Animals',
+            icons: [
+                'fa-solid fa-cat',
+                'fa-solid fa-dog',
+                'fa-solid fa-dragon',
+                'fa-solid fa-dove',
+                'fa-solid fa-fish'
+            ]
+        }
+    ];
+    constructor(userAvatarService, sharedService) {
+        this.userAvatarService = userAvatarService;
+        this.sharedService = sharedService;
+    }
+    async ngOnInit() {
+        const md = new Metadata();
+        const currentUserInfo = md.CurrentUser;
+        // Load the full UserEntity to access avatar fields
+        this.currentUser = await md.GetEntityObject('Users');
+        await this.currentUser.Load(currentUserInfo.ID);
+        this.loadCurrentAvatar();
+    }
+    /**
+     * Loads the current avatar settings from the user entity
+     */
+    loadCurrentAvatar() {
+        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';
+            }
+            else {
+                this.selectedTab = 'url';
+            }
+        }
+        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';
+        }
+    }
+    /**
+     * Switches between tabs and updates preview
+     */
+    selectTab(tab) {
+        this.selectedTab = tab;
+        this.updatePreview();
+    }
+    /**
+     * Handles file selection from native input
+     */
+    async onFileSelected(event) {
+        const input = event.target;
+        const file = input.files?.[0];
+        if (!file) {
+            return;
+        }
+        // Clear any previous errors
+        this.errorMessage = '';
+        // Validate file type
+        if (!file.type.match(/^image\/(png|jpeg|jpg|gif|webp)$/)) {
+            this.errorMessage = 'Please select a valid image file (PNG, JPG, GIF, WEBP)';
+            input.value = ''; // Clear the input
+            return;
+        }
+        // Validate file size (200KB)
+        const maxSize = 200 * 1024;
+        if (file.size > maxSize) {
+            this.errorMessage = `Image must be smaller than 200KB. Your image is ${Math.round(file.size / 1024)}KB`;
+            input.value = ''; // Clear the input
+            return;
+        }
+        // Convert to Base64
+        try {
+            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);
+        }
+    }
+    /**
+     * Clears uploaded file
+     */
+    clearUpload() {
+        this.uploadedFileName = '';
+        this.uploadedImageBase64 = '';
+        this.previewUrl = '';
+        this.errorMessage = '';
+        // Reset file input
+        const fileInput = document.querySelector('input[type="file"]');
+        if (fileInput) {
+            fileInput.value = '';
+        }
+    }
+    /**
+     * Handles URL input changes
+     */
+    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
+            }
+            else {
+                this.errorMessage = 'Please enter a valid URL';
+                this.previewUrl = '';
+            }
+        }
+        else {
+            this.previewUrl = '';
+        }
+    }
+    /**
+     * Handles icon selection
+     */
+    selectIcon(iconClass) {
+        this.selectedIconClass = iconClass;
+        this.previewIconClass = iconClass;
+        this.previewUrl = ''; // Clear image preview
+        this.errorMessage = '';
+    }
+    /**
+     * Checks if an icon is currently selected
+     */
+    isIconSelected(iconClass) {
+        return this.selectedIconClass === 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() {
+        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
+    }
+    /**
+     * Reverts avatar to default (clears both fields)
+     * This will trigger auto-sync from auth provider on next login
+     */
+    async revertToDefault() {
+        this.isSaving = true;
+        this.errorMessage = '';
+        this.showSuccessMessage = false;
+        try {
+            // Clear both avatar fields
+            this.currentUser.UserImageURL = null;
+            this.currentUser.UserImageIconClass = null;
+            // Save to database
+            const saved = await this.currentUser.Save();
+            if (saved) {
+                // Clear local state
+                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({
+                    event: MJEventType.ComponentEvent,
+                    eventCode: EventCodes.AvatarUpdated,
+                    component: this,
+                    args: {
+                        imageUrl: null,
+                        iconClass: null
+                    }
+                });
+            }
+            else {
+                this.errorMessage = 'Failed to revert avatar. Please try again.';
+            }
+        }
+        catch (error) {
+            this.errorMessage = 'An error occurred while reverting. Please try again.';
+            console.error('Error reverting avatar:', error);
+        }
+        finally {
+            this.isSaving = false;
+        }
+    }
+    /**
+     * Updates the preview based on current tab
+     */
+    updatePreview() {
+        switch (this.selectedTab) {
+            case 'upload':
+                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 = '';
+                }
+                break;
+            case 'icon':
+                if (this.selectedIconClass) {
+                    this.previewIconClass = this.selectedIconClass;
+                    this.previewUrl = '';
+                }
+                break;
+        }
+    }
+    /**
+     * Saves avatar settings to database
+     */
+    async save() {
+        this.isSaving = true;
+        this.errorMessage = '';
+        this.showSuccessMessage = false;
+        try {
+            // Update user entity based on selected tab
+            switch (this.selectedTab) {
+                case 'upload':
+                    if (!this.uploadedImageBase64) {
+                        this.errorMessage = 'Please select an image to upload';
+                        this.isSaving = false;
+                        return;
+                    }
+                    this.currentUser.UserImageURL = this.uploadedImageBase64;
+                    this.currentUser.UserImageIconClass = null;
+                    break;
+                case 'url':
+                    if (!this.imageUrlInput || !this.userAvatarService.isValidUrl(this.imageUrlInput)) {
+                        this.errorMessage = 'Please enter a valid image URL';
+                        this.isSaving = false;
+                        return;
+                    }
+                    this.currentUser.UserImageURL = this.imageUrlInput;
+                    this.currentUser.UserImageIconClass = null;
+                    break;
+                case 'icon':
+                    if (!this.selectedIconClass) {
+                        this.errorMessage = 'Please select an icon';
+                        this.isSaving = false;
+                        return;
+                    }
+                    this.currentUser.UserImageURL = null;
+                    this.currentUser.UserImageIconClass = this.selectedIconClass;
+                    break;
+            }
+            // Save to database
+            const saved = await this.currentUser.Save();
+            if (saved) {
+                this.showSuccess('Avatar updated successfully!');
+                // Notify header component to update avatar display
+                MJGlobal.Instance.RaiseEvent({
+                    event: MJEventType.ComponentEvent,
+                    eventCode: EventCodes.AvatarUpdated,
+                    component: this,
+                    args: {
+                        imageUrl: this.currentUser.UserImageURL,
+                        iconClass: this.currentUser.UserImageIconClass
+                    }
+                });
+            }
+            else {
+                this.errorMessage = 'Failed to save avatar. Please try again.';
+            }
+        }
+        catch (error) {
+            this.errorMessage = 'An error occurred while saving. Please try again.';
+            console.error('Error saving avatar:', error);
+        }
+        finally {
+            this.isSaving = false;
+        }
+    }
+    /**
+     * Cancels changes and reverts to saved state
+     */
+    cancel() {
+        this.loadCurrentAvatar();
+        this.errorMessage = '';
+        this.showSuccessMessage = false;
+    }
+    /**
+     * Shows success message temporarily
+     */
+    showSuccess(message) {
+        this.showSuccessMessage = true;
+        this.sharedService.CreateSimpleNotification(message, 'success', 3000);
+        // Hide success message after 3 seconds
+        setTimeout(() => {
+            this.showSuccessMessage = false;
+        }, 3000);
+    }
+    static ɵfac = function UserProfileSettingsComponent_Factory(t) { return new (t || UserProfileSettingsComponent)(i0.ɵɵdirectiveInject(i1.UserAvatarService), i0.ɵɵdirectiveInject(i2.SharedService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UserProfileSettingsComponent, selectors: [["mj-user-profile-settings"]], standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 43, vars: 18, consts: [["fileInput", ""], [1, "user-profile-settings"], [1, "profile-header"], [1, "description"], [1, "alert", "alert-error"], [1, "alert", "alert-success"], [1, "avatar-preview-section"], [1, "preview-label"], [1, "preview-container"], ["alt", "Avatar preview", 1, "preview-image", 3, "src"], [1, "preview-icon-wrapper"], [1, "preview-placeholder"], [1, "tab-navigation"], [1, "tab-btn", 3, "click"], [1, "fa-solid", "fa-upload"], [1, "fa-solid", "fa-link"], [1, "fa-solid", "fa-icons"], [1, "fa-brands", "fa-microsoft"], [1, "tab-content"], [1, "upload-section"], [1, "url-section"], [1, "icon-section"], [1, "provider-section"], [1, "action-buttons"], [1, "btn", "btn-secondary", 3, "click", "disabled"], [1, "btn", "btn-primary", 3, "click", "disabled"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "close-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "fa-solid", "fa-check-circle"], [1, "fa-solid", "fa-user"], ["type", "file", "accept", "image/png,image/jpeg,image/jpg,image/gif,image/webp", 2, "display", "none", 3, "change"], [1, "upload-btn", 3, "click"], [1, "upload-info"], [1, "fa-solid", "fa-info-circle"], [1, "selected-file"], [1, "fa-solid", "fa-file-image"], [1, "remove-btn", 3, "click"], ["for", "imageUrl"], ["type", "text", "id", "imageUrl", "placeholder", "https://example.com/avatar.jpg", 1, "url-input", 3, "ngModelChange", "input", "ngModel"], [1, "url-info"], [1, "icon-category"], [1, "category-title"], [1, "icon-grid"], [1, "icon-option", 3, "selected", "title"], [1, "icon-option", 3, "click", "title"], [1, "provider-info"], [1, "sync-btn", 3, "click", "disabled"], [1, "provider-note"], [1, "fa-solid", "fa-lightbulb"], [2, "border-top", "1px solid #ddd", "width", "100%", "max-width", "500px", "margin", "1rem 0"], [1, "revert-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-rotate-left"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-save"]], template: function UserProfileSettingsComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "h3");
+            i0.ɵɵtext(3, "Avatar Settings");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(4, "p", 3);
+            i0.ɵɵtext(5, "Customize your profile picture with an image, URL, or icon");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵtemplate(6, UserProfileSettingsComponent_Conditional_6_Template, 6, 1, "div", 4)(7, UserProfileSettingsComponent_Conditional_7_Template, 4, 0, "div", 5);
+            i0.ɵɵelementStart(8, "div", 6)(9, "div", 7);
+            i0.ɵɵtext(10, "Preview");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(11, "div", 8);
+            i0.ɵɵtemplate(12, UserProfileSettingsComponent_Conditional_12_Template, 1, 1, "img", 9)(13, UserProfileSettingsComponent_Conditional_13_Template, 2, 2, "div", 10)(14, UserProfileSettingsComponent_Conditional_14_Template, 4, 0, "div", 11);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(15, "div", 12)(16, "button", 13);
+            i0.ɵɵlistener("click", function UserProfileSettingsComponent_Template_button_click_16_listener() { return ctx.selectTab("upload"); });
+            i0.ɵɵelement(17, "i", 14);
+            i0.ɵɵelementStart(18, "span");
+            i0.ɵɵtext(19, "Upload");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(20, "button", 13);
+            i0.ɵɵlistener("click", function UserProfileSettingsComponent_Template_button_click_20_listener() { return ctx.selectTab("url"); });
+            i0.ɵɵelement(21, "i", 15);
+            i0.ɵɵelementStart(22, "span");
+            i0.ɵɵtext(23, "URL");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(24, "button", 13);
+            i0.ɵɵlistener("click", function UserProfileSettingsComponent_Template_button_click_24_listener() { return ctx.selectTab("icon"); });
+            i0.ɵɵelement(25, "i", 16);
+            i0.ɵɵelementStart(26, "span");
+            i0.ɵɵtext(27, "Icon");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(28, "button", 13);
+            i0.ɵɵlistener("click", function UserProfileSettingsComponent_Template_button_click_28_listener() { return ctx.selectTab("provider"); });
+            i0.ɵɵelement(29, "i", 17);
+            i0.ɵɵelementStart(30, "span");
+            i0.ɵɵtext(31, "Sync");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(32, "div", 18);
+            i0.ɵɵtemplate(33, UserProfileSettingsComponent_Conditional_33_Template, 10, 1, "div", 19)(34, UserProfileSettingsComponent_Conditional_34_Template, 7, 1, "div", 20)(35, UserProfileSettingsComponent_Conditional_35_Template, 3, 0, "div", 21)(36, UserProfileSettingsComponent_Conditional_36_Template, 22, 4, "div", 22);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(37, "div", 23)(38, "button", 24);
+            i0.ɵɵlistener("click", function UserProfileSettingsComponent_Template_button_click_38_listener() { return ctx.cancel(); });
+            i0.ɵɵtext(39, " Cancel ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(40, "button", 25);
+            i0.ɵɵlistener("click", function UserProfileSettingsComponent_Template_button_click_40_listener() { return ctx.save(); });
+            i0.ɵɵtemplate(41, UserProfileSettingsComponent_Conditional_41_Template, 3, 0)(42, UserProfileSettingsComponent_Conditional_42_Template, 3, 0);
+            i0.ɵɵelementEnd()()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(6);
+            i0.ɵɵconditional(ctx.errorMessage ? 6 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.showSuccessMessage ? 7 : -1);
+            i0.ɵɵadvance(5);
+            i0.ɵɵconditional(ctx.previewUrl ? 12 : ctx.previewIconClass ? 13 : 14);
+            i0.ɵɵadvance(4);
+            i0.ɵɵclassProp("active", ctx.selectedTab === "upload");
+            i0.ɵɵadvance(4);
+            i0.ɵɵclassProp("active", ctx.selectedTab === "url");
+            i0.ɵɵadvance(4);
+            i0.ɵɵclassProp("active", ctx.selectedTab === "icon");
+            i0.ɵɵadvance(4);
+            i0.ɵɵclassProp("active", ctx.selectedTab === "provider");
+            i0.ɵɵadvance(5);
+            i0.ɵɵconditional(ctx.selectedTab === "upload" ? 33 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.selectedTab === "url" ? 34 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.selectedTab === "icon" ? 35 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.selectedTab === "provider" ? 36 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("disabled", ctx.isSaving);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("disabled", ctx.isSaving || ctx.selectedTab === "provider");
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.isSaving ? 41 : 42);
+        } }, dependencies: [CommonModule, FormsModule, i3.DefaultValueAccessor, i3.NgControlStatus, i3.NgModel], styles: [".user-profile-settings[_ngcontent-%COMP%] {\n  max-width: 800px;\n  margin: 0 auto;\n  padding: 1.5rem;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .profile-header[_ngcontent-%COMP%] {\n  margin-bottom: 1.5rem;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .profile-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 0.5rem 0;\n  font-size: 1.5rem;\n  font-weight: 600;\n  color: #1a1a1a;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .profile-header[_ngcontent-%COMP%]   .description[_ngcontent-%COMP%] {\n  margin: 0;\n  color: #666;\n  font-size: 0.9rem;\n}\n\n\n\n.user-profile-settings[_ngcontent-%COMP%]   .alert[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 0.75rem 1rem;\n  border-radius: 6px;\n  margin-bottom: 1rem;\n  font-size: 0.9rem;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .alert[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .alert[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  flex: 1;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .alert[_ngcontent-%COMP%]   .close-btn[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0.25rem;\n  color: inherit;\n  opacity: 0.7;\n  transition: opacity 0.2s;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .alert[_ngcontent-%COMP%]   .close-btn[_ngcontent-%COMP%]:hover {\n  opacity: 1;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .alert.alert-error[_ngcontent-%COMP%] {\n  background-color: #fee;\n  border: 1px solid #fcc;\n  color: #c33;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .alert.alert-success[_ngcontent-%COMP%] {\n  background-color: #efe;\n  border: 1px solid #cfc;\n  color: #3c3;\n}\n\n\n\n.user-profile-settings[_ngcontent-%COMP%]   .avatar-preview-section[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  margin-bottom: 2rem;\n  padding: 1.5rem;\n  background: #f8f9fa;\n  border-radius: 8px;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .avatar-preview-section[_ngcontent-%COMP%]   .preview-label[_ngcontent-%COMP%] {\n  font-size: 0.85rem;\n  font-weight: 600;\n  color: #666;\n  margin-bottom: 1rem;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .avatar-preview-section[_ngcontent-%COMP%]   .preview-container[_ngcontent-%COMP%] {\n  width: 120px;\n  height: 120px;\n  border-radius: 50%;\n  overflow: hidden;\n  background: white;\n  border: 3px solid #e0e0e0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .avatar-preview-section[_ngcontent-%COMP%]   .preview-container[_ngcontent-%COMP%]   .preview-image[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .avatar-preview-section[_ngcontent-%COMP%]   .preview-container[_ngcontent-%COMP%]   .preview-icon-wrapper[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .avatar-preview-section[_ngcontent-%COMP%]   .preview-container[_ngcontent-%COMP%]   .preview-icon-wrapper[_ngcontent-%COMP%]   .preview-icon[_ngcontent-%COMP%] {\n  font-size: 3.5rem;\n  color: #666;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .avatar-preview-section[_ngcontent-%COMP%]   .preview-container[_ngcontent-%COMP%]   .preview-placeholder[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.5rem;\n  color: #999;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .avatar-preview-section[_ngcontent-%COMP%]   .preview-container[_ngcontent-%COMP%]   .preview-placeholder[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 2.5rem;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .avatar-preview-section[_ngcontent-%COMP%]   .preview-container[_ngcontent-%COMP%]   .preview-placeholder[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-size: 0.75rem;\n}\n\n\n\n.user-profile-settings[_ngcontent-%COMP%]   .tab-navigation[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 0.5rem;\n  margin-bottom: 1.5rem;\n  border-bottom: 2px solid #e0e0e0;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .tab-navigation[_ngcontent-%COMP%]   .tab-btn[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1rem;\n  background: none;\n  border: none;\n  border-bottom: 3px solid transparent;\n  cursor: pointer;\n  font-size: 0.9rem;\n  font-weight: 500;\n  color: #666;\n  transition: all 0.2s;\n  margin-bottom: -2px;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .tab-navigation[_ngcontent-%COMP%]   .tab-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1rem;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .tab-navigation[_ngcontent-%COMP%]   .tab-btn[_ngcontent-%COMP%]:hover {\n  color: #333;\n  background: #f8f9fa;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .tab-navigation[_ngcontent-%COMP%]   .tab-btn.active[_ngcontent-%COMP%] {\n  color: #007bff;\n  border-bottom-color: #007bff;\n  background: #f8f9fa;\n}\n\n\n\n.user-profile-settings[_ngcontent-%COMP%]   .tab-content[_ngcontent-%COMP%] {\n  min-height: 300px;\n  padding: 1.5rem;\n  background: #f8f9fa;\n  border-radius: 8px;\n  margin-bottom: 1.5rem;\n}\n\n\n\n.user-profile-settings[_ngcontent-%COMP%]   .upload-section[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 1rem;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .upload-section[_ngcontent-%COMP%]   .upload-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1.5rem;\n  background: #007bff;\n  color: white;\n  border: none;\n  border-radius: 6px;\n  font-size: 0.95rem;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background 0.2s;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .upload-section[_ngcontent-%COMP%]   .upload-btn[_ngcontent-%COMP%]:hover {\n  background: #0056b3;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .upload-section[_ngcontent-%COMP%]   .upload-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1rem;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .upload-section[_ngcontent-%COMP%]   .upload-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  color: #666;\n  font-size: 0.85rem;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .upload-section[_ngcontent-%COMP%]   .upload-info[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #007bff;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .upload-section[_ngcontent-%COMP%]   .selected-file[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 0.75rem 1rem;\n  background: white;\n  border: 1px solid #ddd;\n  border-radius: 6px;\n  width: 100%;\n  max-width: 400px;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .upload-section[_ngcontent-%COMP%]   .selected-file[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #007bff;\n  font-size: 1.2rem;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .upload-section[_ngcontent-%COMP%]   .selected-file[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  flex: 1;\n  font-size: 0.9rem;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .upload-section[_ngcontent-%COMP%]   .selected-file[_ngcontent-%COMP%]   .remove-btn[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0.25rem;\n  color: #999;\n  transition: color 0.2s;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .upload-section[_ngcontent-%COMP%]   .selected-file[_ngcontent-%COMP%]   .remove-btn[_ngcontent-%COMP%]:hover {\n  color: #c33;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .upload-section[_ngcontent-%COMP%]   .selected-file[_ngcontent-%COMP%]   .remove-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1rem;\n  color: inherit;\n}\n\n\n\n.user-profile-settings[_ngcontent-%COMP%]   .url-section[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .url-section[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-weight: 600;\n  color: #333;\n  font-size: 0.9rem;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .url-section[_ngcontent-%COMP%]   .url-input[_ngcontent-%COMP%] {\n  padding: 0.75rem;\n  border: 1px solid #ddd;\n  border-radius: 6px;\n  font-size: 0.95rem;\n  transition: border-color 0.2s;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .url-section[_ngcontent-%COMP%]   .url-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: #007bff;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .url-section[_ngcontent-%COMP%]   .url-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  color: #666;\n  font-size: 0.85rem;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .url-section[_ngcontent-%COMP%]   .url-info[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #007bff;\n}\n\n\n\n.user-profile-settings[_ngcontent-%COMP%]   .icon-section[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 1.5rem;\n  max-height: 400px;\n  overflow-y: auto;\n  padding-right: 0.5rem;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .icon-section[_ngcontent-%COMP%]   .icon-category[_ngcontent-%COMP%]   .category-title[_ngcontent-%COMP%] {\n  font-size: 0.9rem;\n  font-weight: 600;\n  color: #333;\n  margin: 0 0 0.75rem 0;\n  padding-bottom: 0.5rem;\n  border-bottom: 1px solid #ddd;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .icon-section[_ngcontent-%COMP%]   .icon-category[_ngcontent-%COMP%]   .icon-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));\n  gap: 0.5rem;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .icon-section[_ngcontent-%COMP%]   .icon-category[_ngcontent-%COMP%]   .icon-grid[_ngcontent-%COMP%]   .icon-option[_ngcontent-%COMP%] {\n  aspect-ratio: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0.75rem;\n  background: white;\n  border: 2px solid #ddd;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .icon-section[_ngcontent-%COMP%]   .icon-category[_ngcontent-%COMP%]   .icon-grid[_ngcontent-%COMP%]   .icon-option[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1.5rem;\n  color: #666;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .icon-section[_ngcontent-%COMP%]   .icon-category[_ngcontent-%COMP%]   .icon-grid[_ngcontent-%COMP%]   .icon-option[_ngcontent-%COMP%]:hover {\n  border-color: #007bff;\n  background: #f0f8ff;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .icon-section[_ngcontent-%COMP%]   .icon-category[_ngcontent-%COMP%]   .icon-grid[_ngcontent-%COMP%]   .icon-option[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n  color: #007bff;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .icon-section[_ngcontent-%COMP%]   .icon-category[_ngcontent-%COMP%]   .icon-grid[_ngcontent-%COMP%]   .icon-option.selected[_ngcontent-%COMP%] {\n  border-color: #007bff;\n  background: #007bff;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .icon-section[_ngcontent-%COMP%]   .icon-category[_ngcontent-%COMP%]   .icon-grid[_ngcontent-%COMP%]   .icon-option.selected[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: white;\n}\n\n\n\n.user-profile-settings[_ngcontent-%COMP%]   .icon-section[_ngcontent-%COMP%]::-webkit-scrollbar {\n  width: 6px;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .icon-section[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n  background: #f1f1f1;\n  border-radius: 3px;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .icon-section[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: #ccc;\n  border-radius: 3px;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .icon-section[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n  background: #999;\n}\n\n\n\n.user-profile-settings[_ngcontent-%COMP%]   .provider-section[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 1.5rem;\n  padding: 2rem 1rem;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .provider-section[_ngcontent-%COMP%]   .provider-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 1rem;\n  background: white;\n  border: 1px solid #ddd;\n  border-radius: 6px;\n  width: 100%;\n  max-width: 500px;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .provider-section[_ngcontent-%COMP%]   .provider-info[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #007bff;\n  font-size: 1.2rem;\n  flex-shrink: 0;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .provider-section[_ngcontent-%COMP%]   .provider-info[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  color: #666;\n  font-size: 0.9rem;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .provider-section[_ngcontent-%COMP%]   .sync-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 1rem 2rem;\n  background: #0078d4;\n  color: white;\n  border: none;\n  border-radius: 6px;\n  font-size: 1rem;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background 0.2s;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .provider-section[_ngcontent-%COMP%]   .sync-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #005a9e;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .provider-section[_ngcontent-%COMP%]   .sync-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .provider-section[_ngcontent-%COMP%]   .sync-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1.2rem;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .provider-section[_ngcontent-%COMP%]   .provider-note[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.5rem;\n  color: #666;\n  font-size: 0.85rem;\n  max-width: 500px;\n  text-align: center;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .provider-section[_ngcontent-%COMP%]   .provider-note[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #ffc107;\n  margin-top: 0.1rem;\n  flex-shrink: 0;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .provider-section[_ngcontent-%COMP%]   .revert-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 0.75rem 1.5rem;\n  background: #6c757d;\n  color: white;\n  border: none;\n  border-radius: 6px;\n  font-size: 0.95rem;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background 0.2s;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .provider-section[_ngcontent-%COMP%]   .revert-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #5a6268;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .provider-section[_ngcontent-%COMP%]   .revert-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .provider-section[_ngcontent-%COMP%]   .revert-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1rem;\n}\n\n\n\n.user-profile-settings[_ngcontent-%COMP%]   .action-buttons[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 1rem;\n  justify-content: flex-end;\n  padding-top: 1rem;\n  border-top: 1px solid #e0e0e0;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .action-buttons[_ngcontent-%COMP%]   .btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1.5rem;\n  border: none;\n  border-radius: 6px;\n  font-size: 0.95rem;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .action-buttons[_ngcontent-%COMP%]   .btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .action-buttons[_ngcontent-%COMP%]   .btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 0.9rem;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .action-buttons[_ngcontent-%COMP%]   .btn[_ngcontent-%COMP%]   i.fa-spin[_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_spin 1s linear infinite;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .action-buttons[_ngcontent-%COMP%]   .btn.btn-secondary[_ngcontent-%COMP%] {\n  background: #6c757d;\n  color: white;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .action-buttons[_ngcontent-%COMP%]   .btn.btn-secondary[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #5a6268;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .action-buttons[_ngcontent-%COMP%]   .btn.btn-primary[_ngcontent-%COMP%] {\n  background: #28a745;\n  color: white;\n}\n\n.user-profile-settings[_ngcontent-%COMP%]   .action-buttons[_ngcontent-%COMP%]   .btn.btn-primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #218838;\n}\n\n@keyframes _ngcontent-%COMP%_spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n\n\n@media (max-width: 768px) {\n  .user-profile-settings[_ngcontent-%COMP%] {\n    padding: 1rem;\n  }\n\n  .user-profile-settings[_ngcontent-%COMP%]   .tab-navigation[_ngcontent-%COMP%]   .tab-btn[_ngcontent-%COMP%] {\n    flex-direction: column;\n    gap: 0.25rem;\n    padding: 0.5rem;\n    font-size: 0.75rem;\n  }\n\n  .user-profile-settings[_ngcontent-%COMP%]   .tab-navigation[_ngcontent-%COMP%]   .tab-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 1.2rem;\n  }\n\n  .user-profile-settings[_ngcontent-%COMP%]   .tab-navigation[_ngcontent-%COMP%]   .tab-btn[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    font-size: 0.7rem;\n  }\n\n  .user-profile-settings[_ngcontent-%COMP%]   .icon-section[_ngcontent-%COMP%]   .icon-category[_ngcontent-%COMP%]   .icon-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(auto-fill, minmax(45px, 1fr));\n  }\n\n  .user-profile-settings[_ngcontent-%COMP%]   .action-buttons[_ngcontent-%COMP%] {\n    flex-direction: column-reverse;\n  }\n\n  .user-profile-settings[_ngcontent-%COMP%]   .action-buttons[_ngcontent-%COMP%]   .btn[_ngcontent-%COMP%] {\n    width: 100%;\n    justify-content: center;\n  }\n}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UserProfileSettingsComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-user-profile-settings', standalone: true, imports: [CommonModule, FormsModule], template: "<div class=\"user-profile-settings\">\n  <div class=\"profile-header\">\n    <h3>Avatar Settings</h3>\n    <p class=\"description\">Customize your profile picture with an image, URL, or icon</p>\n  </div>\n\n  <!-- Error Message -->\n  @if (errorMessage) {\n    <div class=\"alert alert-error\">\n      <i class=\"fa-solid fa-exclamation-triangle\"></i>\n      <span>{{ errorMessage }}</span>\n      <button class=\"close-btn\" (click)=\"errorMessage = ''\">\n        <i class=\"fa-solid fa-xmark\"></i>\n      </button>\n    </div>\n  }\n\n  <!-- Success Message -->\n  @if (showSuccessMessage) {\n    <div class=\"alert alert-success\">\n      <i class=\"fa-solid fa-check-circle\"></i>\n      <span>Avatar updated successfully!</span>\n    </div>\n  }\n\n  <!-- Preview Section -->\n  <div class=\"avatar-preview-section\">\n    <div class=\"preview-label\">Preview</div>\n    <div class=\"preview-container\">\n      @if (previewUrl) {\n        <img [src]=\"previewUrl\" alt=\"Avatar preview\" class=\"preview-image\" />\n      } @else if (previewIconClass) {\n        <div class=\"preview-icon-wrapper\">\n          <i [class]=\"previewIconClass + ' preview-icon'\"></i>\n        </div>\n      } @else {\n        <div class=\"preview-placeholder\">\n          <i class=\"fa-solid fa-user\"></i>\n          <span>No avatar selected</span>\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- Tab Navigation -->\n  <div class=\"tab-navigation\">\n    <button\n      class=\"tab-btn\"\n      [class.active]=\"selectedTab === 'upload'\"\n      (click)=\"selectTab('upload')\"\n    >\n      <i class=\"fa-solid fa-upload\"></i>\n      <span>Upload</span>\n    </button>\n    <button\n      class=\"tab-btn\"\n      [class.active]=\"selectedTab === 'url'\"\n      (click)=\"selectTab('url')\"\n    >\n      <i class=\"fa-solid fa-link\"></i>\n      <span>URL</span>\n    </button>\n    <button\n      class=\"tab-btn\"\n      [class.active]=\"selectedTab === 'icon'\"\n      (click)=\"selectTab('icon')\"\n    >\n      <i class=\"fa-solid fa-icons\"></i>\n      <span>Icon</span>\n    </button>\n    <button\n      class=\"tab-btn\"\n      [class.active]=\"selectedTab === 'provider'\"\n      (click)=\"selectTab('provider')\"\n    >\n      <i class=\"fa-brands fa-microsoft\"></i>\n      <span>Sync</span>\n    </button>\n  </div>\n\n  <!-- Tab Content -->\n  <div class=\"tab-content\">\n    <!-- Upload Tab -->\n    @if (selectedTab === 'upload') {\n      <div class=\"upload-section\">\n        <input\n          type=\"file\"\n          #fileInput\n          accept=\"image/png,image/jpeg,image/jpg,image/gif,image/webp\"\n          (change)=\"onFileSelected($event)\"\n          style=\"display: none\"\n        />\n\n        <button class=\"upload-btn\" (click)=\"fileInput.click()\">\n          <i class=\"fa-solid fa-upload\"></i>\n          Choose Image\n        </button>\n\n        <div class=\"upload-info\">\n          <i class=\"fa-solid fa-info-circle\"></i>\n          Max 200KB \u2022 PNG, JPG, GIF, WEBP\n        </div>\n\n        @if (uploadedFileName) {\n          <div class=\"selected-file\">\n            <i class=\"fa-solid fa-file-image\"></i>\n            <span>{{ uploadedFileName }}</span>\n            <button class=\"remove-btn\" (click)=\"clearUpload()\">\n              <i class=\"fa-solid fa-xmark\"></i>\n            </button>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- URL Tab -->\n    @if (selectedTab === 'url') {\n      <div class=\"url-section\">\n        <label for=\"imageUrl\">Image URL</label>\n        <input\n          type=\"text\"\n          id=\"imageUrl\"\n          class=\"url-input\"\n          placeholder=\"https://example.com/avatar.jpg\"\n          [(ngModel)]=\"imageUrlInput\"\n          (input)=\"onUrlChange()\"\n        />\n        <div class=\"url-info\">\n          <i class=\"fa-solid fa-info-circle\"></i>\n          Enter a URL to an image hosted online\n        </div>\n      </div>\n    }\n\n    <!-- Icon Tab -->\n    @if (selectedTab === 'icon') {\n      <div class=\"icon-section\">\n        @for (category of iconCategories; track category.name) {\n          <div class=\"icon-category\">\n            <h4 class=\"category-title\">{{ category.name }}</h4>\n            <div class=\"icon-grid\">\n              @for (icon of category.icons; track icon) {\n                <button\n                  class=\"icon-option\"\n                  [class.selected]=\"isIconSelected(icon)\"\n                  (click)=\"selectIcon(icon)\"\n                  [title]=\"icon\"\n                >\n                  <i [class]=\"icon\"></i>\n                </button>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Provider Sync Tab -->\n    @if (selectedTab === 'provider') {\n      <div class=\"provider-section\">\n        <div class=\"provider-info\">\n          <i class=\"fa-solid fa-info-circle\"></i>\n          <p>Sync your avatar from your authentication provider account</p>\n        </div>\n\n        <button\n          class=\"sync-btn\"\n          (click)=\"syncFromProvider()\"\n          [disabled]=\"isSaving\"\n        >\n          <i class=\"fa-brands fa-microsoft\"></i>\n          @if (isSaving) {\n            <span>Syncing...</span>\n          } @else {\n            <span>Sync from Microsoft Account</span>\n          }\n        </button>\n\n        <div class=\"provider-note\">\n          <i class=\"fa-solid fa-lightbulb\"></i>\n          <small>This will download your profile photo from Microsoft and save it to your profile</small>\n        </div>\n\n        <div style=\"border-top: 1px solid #ddd; width: 100%; max-width: 500px; margin: 1rem 0;\"></div>\n\n        <button\n          class=\"revert-btn\"\n          (click)=\"revertToDefault()\"\n          [disabled]=\"isSaving\"\n        >\n          <i class=\"fa-solid fa-rotate-left\"></i>\n          @if (isSaving) {\n            <span>Reverting...</span>\n          } @else {\n            <span>Revert to Default</span>\n          }\n        </button>\n\n        <div class=\"provider-note\">\n          <i class=\"fa-solid fa-info-circle\"></i>\n          <small>Clears your avatar settings and restores the automatic sync from your auth provider</small>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Action Buttons -->\n  <div class=\"action-buttons\">\n    <button\n      class=\"btn btn-secondary\"\n      (click)=\"cancel()\"\n      [disabled]=\"isSaving\"\n    >\n      Cancel\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      (click)=\"save()\"\n      [disabled]=\"isSaving || selectedTab === 'provider'\"\n    >\n      @if (isSaving) {\n        <i class=\"fa-solid fa-spinner fa-spin\"></i>\n        <span>Saving...</span>\n      } @else {\n        <i class=\"fa-solid fa-save\"></i>\n        <span>Save Changes</span>\n      }\n    </button>\n  </div>\n</div>\n", styles: [".user-profile-settings {\n  max-width: 800px;\n  margin: 0 auto;\n  padding: 1.5rem;\n}\n\n.user-profile-settings .profile-header {\n  margin-bottom: 1.5rem;\n}\n\n.user-profile-settings .profile-header h3 {\n  margin: 0 0 0.5rem 0;\n  font-size: 1.5rem;\n  font-weight: 600;\n  color: #1a1a1a;\n}\n\n.user-profile-settings .profile-header .description {\n  margin: 0;\n  color: #666;\n  font-size: 0.9rem;\n}\n\n/* Alert Messages */\n.user-profile-settings .alert {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 0.75rem 1rem;\n  border-radius: 6px;\n  margin-bottom: 1rem;\n  font-size: 0.9rem;\n}\n\n.user-profile-settings .alert i {\n  flex-shrink: 0;\n}\n\n.user-profile-settings .alert span {\n  flex: 1;\n}\n\n.user-profile-settings .alert .close-btn {\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0.25rem;\n  color: inherit;\n  opacity: 0.7;\n  transition: opacity 0.2s;\n}\n\n.user-profile-settings .alert .close-btn:hover {\n  opacity: 1;\n}\n\n.user-profile-settings .alert.alert-error {\n  background-color: #fee;\n  border: 1px solid #fcc;\n  color: #c33;\n}\n\n.user-profile-settings .alert.alert-success {\n  background-color: #efe;\n  border: 1px solid #cfc;\n  color: #3c3;\n}\n\n/* Avatar Preview */\n.user-profile-settings .avatar-preview-section {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  margin-bottom: 2rem;\n  padding: 1.5rem;\n  background: #f8f9fa;\n  border-radius: 8px;\n}\n\n.user-profile-settings .avatar-preview-section .preview-label {\n  font-size: 0.85rem;\n  font-weight: 600;\n  color: #666;\n  margin-bottom: 1rem;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.user-profile-settings .avatar-preview-section .preview-container {\n  width: 120px;\n  height: 120px;\n  border-radius: 50%;\n  overflow: hidden;\n  background: white;\n  border: 3px solid #e0e0e0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.user-profile-settings .avatar-preview-section .preview-container .preview-image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.user-profile-settings .avatar-preview-section .preview-container .preview-icon-wrapper {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n}\n\n.user-profile-settings .avatar-preview-section .preview-container .preview-icon-wrapper .preview-icon {\n  font-size: 3.5rem;\n  color: #666;\n}\n\n.user-profile-settings .avatar-preview-section .preview-container .preview-placeholder {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.5rem;\n  color: #999;\n}\n\n.user-profile-settings .avatar-preview-section .preview-container .preview-placeholder i {\n  font-size: 2.5rem;\n}\n\n.user-profile-settings .avatar-preview-section .preview-container .preview-placeholder span {\n  font-size: 0.75rem;\n}\n\n/* Tab Navigation */\n.user-profile-settings .tab-navigation {\n  display: flex;\n  gap: 0.5rem;\n  margin-bottom: 1.5rem;\n  border-bottom: 2px solid #e0e0e0;\n}\n\n.user-profile-settings .tab-navigation .tab-btn {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1rem;\n  background: none;\n  border: none;\n  border-bottom: 3px solid transparent;\n  cursor: pointer;\n  font-size: 0.9rem;\n  font-weight: 500;\n  color: #666;\n  transition: all 0.2s;\n  margin-bottom: -2px;\n}\n\n.user-profile-settings .tab-navigation .tab-btn i {\n  font-size: 1rem;\n}\n\n.user-profile-settings .tab-navigation .tab-btn:hover {\n  color: #333;\n  background: #f8f9fa;\n}\n\n.user-profile-settings .tab-navigation .tab-btn.active {\n  color: #007bff;\n  border-bottom-color: #007bff;\n  background: #f8f9fa;\n}\n\n/* Tab Content */\n.user-profile-settings .tab-content {\n  min-height: 300px;\n  padding: 1.5rem;\n  background: #f8f9fa;\n  border-radius: 8px;\n  margin-bottom: 1.5rem;\n}\n\n/* Upload Section */\n.user-profile-settings .upload-section {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 1rem;\n}\n\n.user-profile-settings .upload-section .upload-btn {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1.5rem;\n  background: #007bff;\n  color: white;\n  border: none;\n  border-radius: 6px;\n  font-size: 0.95rem;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background 0.2s;\n}\n\n.user-profile-settings .upload-section .upload-btn:hover {\n  background: #0056b3;\n}\n\n.user-profile-settings .upload-section .upload-btn i {\n  font-size: 1rem;\n}\n\n.user-profile-settings .upload-section .upload-info {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  color: #666;\n  font-size: 0.85rem;\n}\n\n.user-profile-settings .upload-section .upload-info i {\n  color: #007bff;\n}\n\n.user-profile-settings .upload-section .selected-file {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 0.75rem 1rem;\n  background: white;\n  border: 1px solid #ddd;\n  border-radius: 6px;\n  width: 100%;\n  max-width: 400px;\n}\n\n.user-profile-settings .upload-section .selected-file i {\n  color: #007bff;\n  font-size: 1.2rem;\n}\n\n.user-profile-settings .upload-section .selected-file span {\n  flex: 1;\n  font-size: 0.9rem;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.user-profile-settings .upload-section .selected-file .remove-btn {\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0.25rem;\n  color: #999;\n  transition: color 0.2s;\n}\n\n.user-profile-settings .upload-section .selected-file .remove-btn:hover {\n  color: #c33;\n}\n\n.user-profile-settings .upload-section .selected-file .remove-btn i {\n  font-size: 1rem;\n  color: inherit;\n}\n\n/* URL Section */\n.user-profile-settings .url-section {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n.user-profile-settings .url-section label {\n  font-weight: 600;\n  color: #333;\n  font-size: 0.9rem;\n}\n\n.user-profile-settings .url-section .url-input {\n  padding: 0.75rem;\n  border: 1px solid #ddd;\n  border-radius: 6px;\n  font-size: 0.95rem;\n  transition: border-color 0.2s;\n}\n\n.user-profile-settings .url-section .url-input:focus {\n  outline: none;\n  border-color: #007bff;\n}\n\n.user-profile-settings .url-section .url-info {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  color: #666;\n  font-size: 0.85rem;\n}\n\n.user-profile-settings .url-section .url-info i {\n  color: #007bff;\n}\n\n/* Icon Section */\n.user-profile-settings .icon-section {\n  display: flex;\n  flex-direction: column;\n  gap: 1.5rem;\n  max-height: 400px;\n  overflow-y: auto;\n  padding-right: 0.5rem;\n}\n\n.user-profile-settings .icon-section .icon-category .category-title {\n  font-size: 0.9rem;\n  font-weight: 600;\n  color: #333;\n  margin: 0 0 0.75rem 0;\n  padding-bottom: 0.5rem;\n  border-bottom: 1px solid #ddd;\n}\n\n.user-profile-settings .icon-section .icon-category .icon-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));\n  gap: 0.5rem;\n}\n\n.user-profile-settings .icon-section .icon-category .icon-grid .icon-option {\n  aspect-ratio: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0.75rem;\n  background: white;\n  border: 2px solid #ddd;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n\n.user-profile-settings .icon-section .icon-category .icon-grid .icon-option i {\n  font-size: 1.5rem;\n  color: #666;\n}\n\n.user-profile-settings .icon-section .icon-category .icon-grid .icon-option:hover {\n  border-color: #007bff;\n  background: #f0f8ff;\n}\n\n.user-profile-settings .icon-section .icon-category .icon-grid .icon-option:hover i {\n  color: #007bff;\n}\n\n.user-profile-settings .icon-section .icon-category .icon-grid .icon-option.selected {\n  border-color: #007bff;\n  background: #007bff;\n}\n\n.user-profile-settings .icon-section .icon-category .icon-grid .icon-option.selected i {\n  color: white;\n}\n\n/* Custom scrollbar */\n.user-profile-settings .icon-section::-webkit-scrollbar {\n  width: 6px;\n}\n\n.user-profile-settings .icon-section::-webkit-scrollbar-track {\n  background: #f1f1f1;\n  border-radius: 3px;\n}\n\n.user-profile-settings .icon-section::-webkit-scrollbar-thumb {\n  background: #ccc;\n  border-radius: 3px;\n}\n\n.user-profile-settings .icon-section::-webkit-scrollbar-thumb:hover {\n  background: #999;\n}\n\n/* Provider Section */\n.user-profile-settings .provider-section {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 1.5rem;\n  padding: 2rem 1rem;\n}\n\n.user-profile-settings .provider-section .provider-info {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 1rem;\n  background: white;\n  border: 1px solid #ddd;\n  border-radius: 6px;\n  width: 100%;\n  max-width: 500px;\n}\n\n.user-profile-settings .provider-section .provider-info i {\n  color: #007bff;\n  font-size: 1.2rem;\n  flex-shrink: 0;\n}\n\n.user-profile-settings .provider-section .provider-info p {\n  margin: 0;\n  color: #666;\n  font-size: 0.9rem;\n}\n\n.user-profile-settings .provider-section .sync-btn {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 1rem 2rem;\n  background: #0078d4;\n  color: white;\n  border: none;\n  border-radius: 6px;\n  font-size: 1rem;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background 0.2s;\n}\n\n.user-profile-settings .provider-section .sync-btn:hover:not(:disabled) {\n  background: #005a9e;\n}\n\n.user-profile-settings .provider-section .sync-btn:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.user-profile-settings .provider-section .sync-btn i {\n  font-size: 1.2rem;\n}\n\n.user-profile-settings .provider-section .provider-note {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.5rem;\n  color: #666;\n  font-size: 0.85rem;\n  max-width: 500px;\n  text-align: center;\n}\n\n.user-profile-settings .provider-section .provider-note i {\n  color: #ffc107;\n  margin-top: 0.1rem;\n  flex-shrink: 0;\n}\n\n.user-profile-settings .provider-section .revert-btn {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 0.75rem 1.5rem;\n  background: #6c757d;\n  color: white;\n  border: none;\n  border-radius: 6px;\n  font-size: 0.95rem;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background 0.2s;\n}\n\n.user-profile-settings .provider-section .revert-btn:hover:not(:disabled) {\n  background: #5a6268;\n}\n\n.user-profile-settings .provider-section .revert-btn:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.user-profile-settings .provider-section .revert-btn i {\n  font-size: 1rem;\n}\n\n/* Action Buttons */\n.user-profile-settings .action-buttons {\n  display: flex;\n  gap: 1rem;\n  justify-content: flex-end;\n  padding-top: 1rem;\n  border-top: 1px solid #e0e0e0;\n}\n\n.user-profile-settings .action-buttons .btn {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1.5rem;\n  border: none;\n  border-radius: 6px;\n  font-size: 0.95rem;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n\n.user-profile-settings .action-buttons .btn:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.user-profile-settings .action-buttons .btn i {\n  font-size: 0.9rem;\n}\n\n.user-profile-settings .action-buttons .btn i.fa-spin {\n  animation: spin 1s linear infinite;\n}\n\n.user-profile-settings .action-buttons .btn.btn-secondary {\n  background: #6c757d;\n  color: white;\n}\n\n.user-profile-settings .action-buttons .btn.btn-secondary:hover:not(:disabled) {\n  background: #5a6268;\n}\n\n.user-profile-settings .action-buttons .btn.btn-primary {\n  background: #28a745;\n  color: white;\n}\n\n.user-profile-settings .action-buttons .btn.btn-primary:hover:not(:disabled) {\n  background: #218838;\n}\n\n@keyframes spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n  .user-profile-settings {\n    padding: 1rem;\n  }\n\n  .user-profile-settings .tab-navigation .tab-btn {\n    flex-direction: column;\n    gap: 0.25rem;\n    padding: 0.5rem;\n    font-size: 0.75rem;\n  }\n\n  .user-profile-settings .tab-navigation .tab-btn i {\n    font-size: 1.2rem;\n  }\n\n  .user-profile-settings .tab-navigation .tab-btn span {\n    font-size: 0.7rem;\n  }\n\n  .user-profile-settings .icon-section .icon-category .icon-grid {\n    grid-template-columns: repeat(auto-fill, minmax(45px, 1fr));\n  }\n\n  .user-profile-settings .action-buttons {\n    flex-direction: column-reverse;\n  }\n\n  .user-profile-settings .action-buttons .btn {\n    width: 100%;\n    justify-content: center;\n  }\n}\n"] }]
+    }], () => [{ type: i1.UserAvatarService }, { type: i2.SharedService }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UserProfileSettingsComponent, { className: "UserProfileSettingsComponent", filePath: "src/lib/user-profile-settings/user-profile-settings.component.ts", lineNumber: 22 }); })();
+//# sourceMappingURL=user-profile-settings.component.js.map