@memberjunction/ng-explorer-core 5.11.0 → 5.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib/command-palette/command-palette.component.js +2 -2
- package/dist/lib/dashboard-preferences-dialog/dashboard-preferences-dialog.component.js +2 -2
- package/dist/lib/oauth/oauth-callback.component.js +2 -2
- package/dist/lib/resource-wrappers/chat-collections-resource.component.js +2 -2
- package/dist/lib/resource-wrappers/chat-collections-resource.component.js.map +1 -1
- package/dist/lib/resource-wrappers/chat-conversations-resource.component.js +2 -2
- package/dist/lib/resource-wrappers/chat-conversations-resource.component.js.map +1 -1
- package/dist/lib/resource-wrappers/dashboard-resource.component.js +2 -2
- package/dist/lib/resource-wrappers/dashboard-resource.component.js.map +1 -1
- package/dist/lib/resource-wrappers/view-resource.component.js +2 -2
- package/dist/lib/resource-wrappers/view-resource.component.js.map +1 -1
- package/dist/lib/shell/components/dialogs/app-access-dialog.component.js +4 -4
- package/dist/lib/shell/components/dialogs/app-access-dialog.component.js.map +1 -1
- package/dist/lib/shell/components/header/app-nav.component.d.ts.map +1 -1
- package/dist/lib/shell/components/header/app-nav.component.js +5 -5
- package/dist/lib/shell/components/header/app-nav.component.js.map +1 -1
- package/dist/lib/shell/components/header/app-switcher.component.js +22 -21
- package/dist/lib/shell/components/header/app-switcher.component.js.map +1 -1
- package/dist/lib/shell/components/tabs/tab-container.component.js +2 -2
- package/dist/lib/shell/loading-themes.js +1 -1
- package/dist/lib/shell/loading-themes.js.map +1 -1
- package/dist/lib/shell/shell.component.js +3 -3
- package/dist/lib/shell/shell.component.js.map +1 -1
- package/dist/lib/single-dashboard/Components/add-item/add-item.component.js +2 -2
- package/dist/lib/single-dashboard/Components/delete-item/delete-item.component.js +2 -2
- package/dist/lib/single-dashboard/Components/edit-dashboard/edit-dashboard.component.js +2 -2
- package/dist/lib/single-dashboard/single-dashboard.component.js +2 -2
- package/dist/lib/single-list-detail/single-list-detail.component.d.ts.map +1 -1
- package/dist/lib/single-list-detail/single-list-detail.component.js +11 -7
- package/dist/lib/single-list-detail/single-list-detail.component.js.map +1 -1
- package/dist/lib/single-search-result/single-search-result.component.js +2 -2
- package/dist/lib/system-validation/system-validation-banner.component.js +2 -2
- package/dist/lib/system-validation/system-validation-banner.component.js.map +1 -1
- package/dist/lib/user-notifications/user-notifications.component.d.ts +15 -2
- package/dist/lib/user-notifications/user-notifications.component.d.ts.map +1 -1
- package/dist/lib/user-notifications/user-notifications.component.js +76 -8
- package/dist/lib/user-notifications/user-notifications.component.js.map +1 -1
- package/dist/lib/user-profile/user-profile.component.js +2 -2
- package/package.json +34 -34
|
@@ -315,11 +315,11 @@ export class UserProfileComponent {
|
|
|
315
315
|
i0.ɵɵconditional(ctx.Loading ? 0 : -1);
|
|
316
316
|
i0.ɵɵadvance();
|
|
317
317
|
i0.ɵɵconditional(!ctx.Loading ? 1 : -1);
|
|
318
|
-
} }, dependencies: [i3.LoadingComponent, i4.AsyncPipe], styles: ["\n\n\n\n\n\n
|
|
318
|
+
} }, dependencies: [i3.LoadingComponent, i4.AsyncPipe], styles: ["\n\n\n\n\n\n[_nghost-%COMP%] {\n \n\n display: block;\n width: 100%;\n padding: 1.5rem;\n}\n\n\n\n\n\n.user-profile-container[_ngcontent-%COMP%] {\n max-width: 900px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: 1fr;\n gap: 1.5rem;\n}\n\n\n\n\n\n.profile-card[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 12px;\n padding: 1.5rem;\n box-shadow: var(--mj-shadow-sm);\n transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.profile-card[_ngcontent-%COMP%]:hover {\n box-shadow: var(--mj-shadow-md);\n}\n\n.profile-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1.25rem;\n}\n\n.avatar-container[_ngcontent-%COMP%] {\n width: 80px;\n height: 80px;\n border-radius: 50%;\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n border: 3px solid var(--mj-border-default);\n transition: border-color 0.2s;\n}\n\n.profile-card[_ngcontent-%COMP%]:hover .avatar-container[_ngcontent-%COMP%] {\n border-color: var(--mj-brand-primary);\n}\n\n.avatar-icon[_ngcontent-%COMP%] {\n font-size: 2.5rem;\n color: var(--mj-brand-primary);\n}\n\n.profile-info[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.user-name[_ngcontent-%COMP%] {\n margin: 0 0 0.375rem 0;\n font-size: 1.5rem;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.user-email[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 1rem;\n color: var(--mj-text-secondary);\n}\n\n\n\n\n\n.notification-card[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 12px;\n box-shadow: var(--mj-shadow-sm);\n transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n overflow: hidden;\n}\n\n.notification-card[_ngcontent-%COMP%]:hover {\n box-shadow: var(--mj-shadow-md);\n}\n\n.card-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1.25rem;\n border-bottom: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface-card);\n}\n\n.header-left[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n}\n\n.header-icon[_ngcontent-%COMP%] {\n font-size: 1.5rem;\n color: var(--mj-brand-primary);\n}\n\n.card-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 1.125rem;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.unread-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 28px;\n height: 28px;\n padding: 0 0.5rem;\n background: var(--mj-status-success);\n color: white;\n border-radius: 9999px;\n font-size: 0.875rem;\n font-weight: 600;\n box-shadow: var(--mj-shadow-sm);\n}\n\n.card-body[_ngcontent-%COMP%] {\n padding: 1.25rem;\n}\n\n.card-description[_ngcontent-%COMP%] {\n margin: 0 0 1.25rem 0;\n font-size: 0.9375rem;\n color: var(--mj-text-secondary);\n line-height: 1.5;\n}\n\n\n\n\n\n.channel-toggles[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 1fr;\n gap: 0.75rem;\n margin-bottom: 1.5rem;\n}\n\n.channel-toggle[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 0.875rem;\n padding: 1rem 1.25rem;\n background: var(--mj-bg-surface-card);\n border: 2px solid var(--mj-border-default);\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n font-family: inherit;\n min-height: 56px;\n}\n\n.channel-toggle[_ngcontent-%COMP%] i[_ngcontent-%COMP%]:first-child {\n font-size: 1.25rem;\n color: var(--mj-text-secondary);\n transition: color 0.2s;\n}\n\n.channel-label[_ngcontent-%COMP%] {\n flex: 1;\n text-align: left;\n font-size: 0.9375rem;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.toggle-indicator[_ngcontent-%COMP%] {\n width: 28px;\n height: 28px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 2px solid var(--mj-text-muted);\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n flex-shrink: 0;\n}\n\n.toggle-indicator[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 0.875rem;\n color: transparent;\n}\n\n.channel-toggle[_ngcontent-%COMP%]:hover:not(:disabled) {\n border-color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.channel-toggle[_ngcontent-%COMP%]:hover:not(:disabled) i[_ngcontent-%COMP%]:first-child {\n color: var(--mj-brand-primary);\n}\n\n.channel-toggle.active[_ngcontent-%COMP%] {\n border-color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.channel-toggle.active[_ngcontent-%COMP%] i[_ngcontent-%COMP%]:first-child {\n color: var(--mj-brand-primary);\n}\n\n.channel-toggle.active[_ngcontent-%COMP%] .toggle-indicator[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n border-color: var(--mj-brand-primary);\n}\n\n.channel-toggle.active[_ngcontent-%COMP%] .toggle-indicator[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: white;\n}\n\n.channel-toggle[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.channel-toggle[_ngcontent-%COMP%]:focus-visible {\n outline: 2px solid var(--mj-brand-primary);\n outline-offset: 2px;\n}\n\n\n\n\n\n.card-footer[_ngcontent-%COMP%] {\n padding-top: 1rem;\n border-top: 1px solid var(--mj-border-default);\n}\n\n.settings-link[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.9375rem;\n font-weight: 600;\n color: var(--mj-brand-primary);\n text-decoration: none;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n padding: 0.5rem;\n margin: -0.5rem;\n border-radius: 8px;\n}\n\n.settings-link[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n}\n\n.settings-link[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 0.875rem;\n transition: transform 0.2s;\n}\n\n.settings-link[_ngcontent-%COMP%]:hover i[_ngcontent-%COMP%] {\n transform: translateX(4px);\n}\n\n\n\n\n\nbutton[_ngcontent-%COMP%]:focus-visible, \na[_ngcontent-%COMP%]:focus-visible {\n outline: 2px solid var(--mj-brand-primary);\n outline-offset: 2px;\n}\n\n\n\n\n\n@media (prefers-reduced-motion: reduce) {\n *[_ngcontent-%COMP%], \n *[_ngcontent-%COMP%]::before, \n *[_ngcontent-%COMP%]::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n }\n}\n\n\n\n\n\n@media (max-width: 639px) {\n [_nghost-%COMP%] {\n padding: 1rem;\n }\n\n .user-profile-container[_ngcontent-%COMP%] {\n gap: 1rem;\n }\n\n .profile-card[_ngcontent-%COMP%] {\n padding: 1rem;\n }\n\n .profile-header[_ngcontent-%COMP%] {\n flex-direction: column;\n text-align: center;\n }\n\n .avatar-container[_ngcontent-%COMP%] {\n width: 100px;\n height: 100px;\n }\n\n .avatar-icon[_ngcontent-%COMP%] {\n font-size: 3rem;\n }\n\n .user-name[_ngcontent-%COMP%] {\n font-size: 1.25rem;\n }\n\n .card-header[_ngcontent-%COMP%] {\n padding: 1rem;\n }\n\n .card-body[_ngcontent-%COMP%] {\n padding: 1rem;\n }\n\n .channel-toggles[_ngcontent-%COMP%] {\n gap: 0.625rem;\n }\n\n .channel-toggle[_ngcontent-%COMP%] {\n padding: 0.875rem 1rem;\n }\n}\n\n@media (min-width: 640px) {\n .channel-toggles[_ngcontent-%COMP%] {\n grid-template-columns: repeat(3, 1fr);\n }\n}\n\n@media (min-width: 768px) {\n [_nghost-%COMP%] {\n padding: 2rem;\n }\n\n .user-profile-container[_ngcontent-%COMP%] {\n grid-template-columns: 1fr 1fr;\n gap: 1.5rem;\n }\n}\n\n@media (min-width: 1024px) {\n .user-profile-container[_ngcontent-%COMP%] {\n gap: 2rem;\n }\n}"] });
|
|
319
319
|
}
|
|
320
320
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UserProfileComponent, [{
|
|
321
321
|
type: Component,
|
|
322
|
-
args: [{ standalone: false, selector: 'app-user-profile', template: "@if (Loading) {\n <mj-loading text=\"Loading profile...\"></mj-loading>\n}\n\n@if (!Loading) {\n <div class=\"user-profile-container\">\n <!-- User Info Card -->\n @if (User | async; as user) {\n <div class=\"profile-card\">\n <div class=\"profile-header\">\n <div class=\"avatar-container\">\n <i class=\"fa-solid fa-user avatar-icon\"></i>\n </div>\n <div class=\"profile-info\">\n <h3 class=\"user-name\">{{ user.name }}</h3>\n <p class=\"user-email\">{{ user.email }}</p>\n </div>\n </div>\n </div>\n }\n <!-- Notification Summary Card -->\n <div class=\"notification-card\">\n <div class=\"card-header\">\n <div class=\"header-left\">\n <i class=\"fa-solid fa-bell header-icon\"></i>\n <h4>Notifications</h4>\n </div>\n @if (UnreadNotificationCount > 0) {\n <span class=\"unread-badge\">\n {{ UnreadNotificationCount }}\n </span>\n }\n </div>\n <div class=\"card-body\">\n <p class=\"card-description\">\n Manage your notification preferences for all channels\n </p>\n <div class=\"channel-toggles\">\n <!-- In-App Toggle -->\n <button\n class=\"channel-toggle\"\n [class.active]=\"IsChannelEnabled('InApp')\"\n [disabled]=\"Saving\"\n (click)=\"ToggleChannel('InApp')\"\n type=\"button\"\n >\n <i [class]=\"GetChannelIcon('InApp')\"></i>\n <span class=\"channel-label\">{{ GetChannelLabel('InApp') }}</span>\n <span class=\"toggle-indicator\">\n @if (IsChannelEnabled('InApp')) {\n <i class=\"fa-solid fa-check\"></i>\n }\n </span>\n </button>\n <!-- Email Toggle -->\n <button\n class=\"channel-toggle\"\n [class.active]=\"IsChannelEnabled('Email')\"\n [disabled]=\"Saving\"\n (click)=\"ToggleChannel('Email')\"\n type=\"button\"\n >\n <i [class]=\"GetChannelIcon('Email')\"></i>\n <span class=\"channel-label\">{{ GetChannelLabel('Email') }}</span>\n <span class=\"toggle-indicator\">\n @if (IsChannelEnabled('Email')) {\n <i class=\"fa-solid fa-check\"></i>\n }\n </span>\n </button>\n <!-- SMS Toggle -->\n <button\n class=\"channel-toggle\"\n [class.active]=\"IsChannelEnabled('SMS')\"\n [disabled]=\"Saving\"\n (click)=\"ToggleChannel('SMS')\"\n type=\"button\"\n >\n <i [class]=\"GetChannelIcon('SMS')\"></i>\n <span class=\"channel-label\">{{ GetChannelLabel('SMS') }}</span>\n <span class=\"toggle-indicator\">\n @if (IsChannelEnabled('SMS')) {\n <i class=\"fa-solid fa-check\"></i>\n }\n </span>\n </button>\n </div>\n <div class=\"card-footer\">\n <a href=\"/settings\" class=\"settings-link\">\n View all notification preferences\n <i class=\"fa-solid fa-arrow-right\"></i>\n </a>\n </div>\n </div>\n </div>\n </div>\n}", styles: ["/* =============================================================================\n User Profile Component - Material Design 3\n Following MD3 Design System Guidelines\n ============================================================================= */\n\n/* MD3 Color Tokens */\n:host {\n /* Primary - Deep Blue */\n --md-primary: #0076B6;\n --md-on-primary: #FFFFFF;\n --md-primary-container: #AAE7FD;\n --md-on-primary-container: #001F2A;\n\n /* Secondary - Light Orange */\n --md-secondary: #F5A623;\n --md-on-secondary: #FFFFFF;\n --md-secondary-container: #FFECD6;\n --md-on-secondary-container: #2D1600;\n\n /* Tertiary - Light Green */\n --md-tertiary: #4CAF50;\n --md-on-tertiary: #FFFFFF;\n --md-tertiary-container: #C8E6C9;\n --md-on-tertiary-container: #002204;\n\n /* Surface Colors */\n --md-surface: #FAFCFF;\n --md-surface-container-lowest: #FFFFFF;\n --md-surface-container-low: #F3F5F9;\n --md-surface-container: #EDF0F4;\n --md-surface-container-high: #E7EAEE;\n --md-surface-container-highest: #E1E3E8;\n --md-on-surface: #191C20;\n --md-on-surface-variant: #43474E;\n --md-outline: #74777F;\n --md-outline-variant: #C4C6D0;\n\n /* Elevation (Box Shadows) */\n --md-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);\n --md-elevation-2: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.08);\n --md-elevation-3: 0 4px 8px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.08);\n\n /* Corner Radii */\n --md-corner-extra-small: 4px;\n --md-corner-small: 8px;\n --md-corner-medium: 12px;\n --md-corner-large: 16px;\n --md-corner-full: 9999px;\n\n /* Host element configuration */\n display: block;\n width: 100%;\n padding: 1.5rem;\n}\n\n/* -----------------------------------------------------------------------------\n Container & Layout\n ----------------------------------------------------------------------------- */\n.user-profile-container {\n max-width: 900px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: 1fr;\n gap: 1.5rem;\n}\n\n/* -----------------------------------------------------------------------------\n Profile Card\n ----------------------------------------------------------------------------- */\n.profile-card {\n background: var(--md-surface-container-lowest);\n border: 1px solid var(--md-outline-variant);\n border-radius: var(--md-corner-medium);\n padding: 1.5rem;\n box-shadow: var(--md-elevation-1);\n transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.profile-card:hover {\n box-shadow: var(--md-elevation-2);\n}\n\n.profile-header {\n display: flex;\n align-items: center;\n gap: 1.25rem;\n}\n\n.avatar-container {\n width: 80px;\n height: 80px;\n border-radius: 50%;\n background: var(--md-primary-container);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n border: 3px solid var(--md-outline-variant);\n transition: border-color 0.2s;\n}\n\n.profile-card:hover .avatar-container {\n border-color: var(--md-primary);\n}\n\n.avatar-icon {\n font-size: 2.5rem;\n color: var(--md-primary);\n}\n\n.profile-info {\n flex: 1;\n min-width: 0;\n}\n\n.user-name {\n margin: 0 0 0.375rem 0;\n font-size: 1.5rem;\n font-weight: 600;\n color: var(--md-on-surface);\n}\n\n.user-email {\n margin: 0;\n font-size: 1rem;\n color: var(--md-on-surface-variant);\n}\n\n/* -----------------------------------------------------------------------------\n Notification Card\n ----------------------------------------------------------------------------- */\n.notification-card {\n background: var(--md-surface-container-lowest);\n border: 1px solid var(--md-outline-variant);\n border-radius: var(--md-corner-medium);\n box-shadow: var(--md-elevation-1);\n transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n overflow: hidden;\n}\n\n.notification-card:hover {\n box-shadow: var(--md-elevation-2);\n}\n\n.card-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1.25rem;\n border-bottom: 1px solid var(--md-outline-variant);\n background: var(--md-surface-container-low);\n}\n\n.header-left {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n}\n\n.header-icon {\n font-size: 1.5rem;\n color: var(--md-primary);\n}\n\n.card-header h4 {\n margin: 0;\n font-size: 1.125rem;\n font-weight: 600;\n color: var(--md-on-surface);\n}\n\n.unread-badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 28px;\n height: 28px;\n padding: 0 0.5rem;\n background: var(--md-tertiary);\n color: var(--md-on-tertiary);\n border-radius: var(--md-corner-full);\n font-size: 0.875rem;\n font-weight: 600;\n box-shadow: var(--md-elevation-1);\n}\n\n.card-body {\n padding: 1.25rem;\n}\n\n.card-description {\n margin: 0 0 1.25rem 0;\n font-size: 0.9375rem;\n color: var(--md-on-surface-variant);\n line-height: 1.5;\n}\n\n/* -----------------------------------------------------------------------------\n Channel Toggles\n ----------------------------------------------------------------------------- */\n.channel-toggles {\n display: grid;\n grid-template-columns: 1fr;\n gap: 0.75rem;\n margin-bottom: 1.5rem;\n}\n\n.channel-toggle {\n display: flex;\n align-items: center;\n gap: 0.875rem;\n padding: 1rem 1.25rem;\n background: var(--md-surface);\n border: 2px solid var(--md-outline-variant);\n border-radius: var(--md-corner-small);\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n font-family: inherit;\n min-height: 56px;\n}\n\n.channel-toggle i:first-child {\n font-size: 1.25rem;\n color: var(--md-on-surface-variant);\n transition: color 0.2s;\n}\n\n.channel-label {\n flex: 1;\n text-align: left;\n font-size: 0.9375rem;\n font-weight: 600;\n color: var(--md-on-surface);\n}\n\n.toggle-indicator {\n width: 28px;\n height: 28px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 2px solid var(--md-outline);\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n flex-shrink: 0;\n}\n\n.toggle-indicator i {\n font-size: 0.875rem;\n color: transparent;\n}\n\n.channel-toggle:hover:not(:disabled) {\n border-color: var(--md-primary);\n background: var(--md-primary-container);\n}\n\n.channel-toggle:hover:not(:disabled) i:first-child {\n color: var(--md-primary);\n}\n\n.channel-toggle.active {\n border-color: var(--md-primary);\n background: var(--md-primary-container);\n}\n\n.channel-toggle.active i:first-child {\n color: var(--md-primary);\n}\n\n.channel-toggle.active .toggle-indicator {\n background: var(--md-primary);\n border-color: var(--md-primary);\n}\n\n.channel-toggle.active .toggle-indicator i {\n color: var(--md-on-primary);\n}\n\n.channel-toggle:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.channel-toggle:focus-visible {\n outline: 2px solid var(--md-primary);\n outline-offset: 2px;\n}\n\n/* -----------------------------------------------------------------------------\n Card Footer\n ----------------------------------------------------------------------------- */\n.card-footer {\n padding-top: 1rem;\n border-top: 1px solid var(--md-outline-variant);\n}\n\n.settings-link {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.9375rem;\n font-weight: 600;\n color: var(--md-primary);\n text-decoration: none;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n padding: 0.5rem;\n margin: -0.5rem;\n border-radius: var(--md-corner-small);\n}\n\n.settings-link:hover {\n background: var(--md-primary-container);\n color: var(--md-primary);\n}\n\n.settings-link i {\n font-size: 0.875rem;\n transition: transform 0.2s;\n}\n\n.settings-link:hover i {\n transform: translateX(4px);\n}\n\n/* -----------------------------------------------------------------------------\n Accessibility: Focus Indicators\n ----------------------------------------------------------------------------- */\nbutton:focus-visible,\na:focus-visible {\n outline: 2px solid var(--md-primary);\n outline-offset: 2px;\n}\n\n/* -----------------------------------------------------------------------------\n Accessibility: Reduced Motion\n ----------------------------------------------------------------------------- */\n@media (prefers-reduced-motion: reduce) {\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n }\n}\n\n/* -----------------------------------------------------------------------------\n Responsive Design - Mobile First\n ----------------------------------------------------------------------------- */\n@media (max-width: 639px) {\n :host {\n padding: 1rem;\n }\n\n .user-profile-container {\n gap: 1rem;\n }\n\n .profile-card {\n padding: 1rem;\n }\n\n .profile-header {\n flex-direction: column;\n text-align: center;\n }\n\n .avatar-container {\n width: 100px;\n height: 100px;\n }\n\n .avatar-icon {\n font-size: 3rem;\n }\n\n .user-name {\n font-size: 1.25rem;\n }\n\n .card-header {\n padding: 1rem;\n }\n\n .card-body {\n padding: 1rem;\n }\n\n .channel-toggles {\n gap: 0.625rem;\n }\n\n .channel-toggle {\n padding: 0.875rem 1rem;\n }\n}\n\n@media (min-width: 640px) {\n .channel-toggles {\n grid-template-columns: repeat(3, 1fr);\n }\n}\n\n@media (min-width: 768px) {\n :host {\n padding: 2rem;\n }\n\n .user-profile-container {\n grid-template-columns: 1fr 1fr;\n gap: 1.5rem;\n }\n}\n\n@media (min-width: 1024px) {\n .user-profile-container {\n gap: 2rem;\n }\n}\n"] }]
|
|
322
|
+
args: [{ standalone: false, selector: 'app-user-profile', template: "@if (Loading) {\n <mj-loading text=\"Loading profile...\"></mj-loading>\n}\n\n@if (!Loading) {\n <div class=\"user-profile-container\">\n <!-- User Info Card -->\n @if (User | async; as user) {\n <div class=\"profile-card\">\n <div class=\"profile-header\">\n <div class=\"avatar-container\">\n <i class=\"fa-solid fa-user avatar-icon\"></i>\n </div>\n <div class=\"profile-info\">\n <h3 class=\"user-name\">{{ user.name }}</h3>\n <p class=\"user-email\">{{ user.email }}</p>\n </div>\n </div>\n </div>\n }\n <!-- Notification Summary Card -->\n <div class=\"notification-card\">\n <div class=\"card-header\">\n <div class=\"header-left\">\n <i class=\"fa-solid fa-bell header-icon\"></i>\n <h4>Notifications</h4>\n </div>\n @if (UnreadNotificationCount > 0) {\n <span class=\"unread-badge\">\n {{ UnreadNotificationCount }}\n </span>\n }\n </div>\n <div class=\"card-body\">\n <p class=\"card-description\">\n Manage your notification preferences for all channels\n </p>\n <div class=\"channel-toggles\">\n <!-- In-App Toggle -->\n <button\n class=\"channel-toggle\"\n [class.active]=\"IsChannelEnabled('InApp')\"\n [disabled]=\"Saving\"\n (click)=\"ToggleChannel('InApp')\"\n type=\"button\"\n >\n <i [class]=\"GetChannelIcon('InApp')\"></i>\n <span class=\"channel-label\">{{ GetChannelLabel('InApp') }}</span>\n <span class=\"toggle-indicator\">\n @if (IsChannelEnabled('InApp')) {\n <i class=\"fa-solid fa-check\"></i>\n }\n </span>\n </button>\n <!-- Email Toggle -->\n <button\n class=\"channel-toggle\"\n [class.active]=\"IsChannelEnabled('Email')\"\n [disabled]=\"Saving\"\n (click)=\"ToggleChannel('Email')\"\n type=\"button\"\n >\n <i [class]=\"GetChannelIcon('Email')\"></i>\n <span class=\"channel-label\">{{ GetChannelLabel('Email') }}</span>\n <span class=\"toggle-indicator\">\n @if (IsChannelEnabled('Email')) {\n <i class=\"fa-solid fa-check\"></i>\n }\n </span>\n </button>\n <!-- SMS Toggle -->\n <button\n class=\"channel-toggle\"\n [class.active]=\"IsChannelEnabled('SMS')\"\n [disabled]=\"Saving\"\n (click)=\"ToggleChannel('SMS')\"\n type=\"button\"\n >\n <i [class]=\"GetChannelIcon('SMS')\"></i>\n <span class=\"channel-label\">{{ GetChannelLabel('SMS') }}</span>\n <span class=\"toggle-indicator\">\n @if (IsChannelEnabled('SMS')) {\n <i class=\"fa-solid fa-check\"></i>\n }\n </span>\n </button>\n </div>\n <div class=\"card-footer\">\n <a href=\"/settings\" class=\"settings-link\">\n View all notification preferences\n <i class=\"fa-solid fa-arrow-right\"></i>\n </a>\n </div>\n </div>\n </div>\n </div>\n}", styles: ["/* =============================================================================\n User Profile Component\n Using MJ Design Tokens\n ============================================================================= */\n\n:host {\n /* Host element configuration */\n display: block;\n width: 100%;\n padding: 1.5rem;\n}\n\n/* -----------------------------------------------------------------------------\n Container & Layout\n ----------------------------------------------------------------------------- */\n.user-profile-container {\n max-width: 900px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: 1fr;\n gap: 1.5rem;\n}\n\n/* -----------------------------------------------------------------------------\n Profile Card\n ----------------------------------------------------------------------------- */\n.profile-card {\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 12px;\n padding: 1.5rem;\n box-shadow: var(--mj-shadow-sm);\n transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.profile-card:hover {\n box-shadow: var(--mj-shadow-md);\n}\n\n.profile-header {\n display: flex;\n align-items: center;\n gap: 1.25rem;\n}\n\n.avatar-container {\n width: 80px;\n height: 80px;\n border-radius: 50%;\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n border: 3px solid var(--mj-border-default);\n transition: border-color 0.2s;\n}\n\n.profile-card:hover .avatar-container {\n border-color: var(--mj-brand-primary);\n}\n\n.avatar-icon {\n font-size: 2.5rem;\n color: var(--mj-brand-primary);\n}\n\n.profile-info {\n flex: 1;\n min-width: 0;\n}\n\n.user-name {\n margin: 0 0 0.375rem 0;\n font-size: 1.5rem;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.user-email {\n margin: 0;\n font-size: 1rem;\n color: var(--mj-text-secondary);\n}\n\n/* -----------------------------------------------------------------------------\n Notification Card\n ----------------------------------------------------------------------------- */\n.notification-card {\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 12px;\n box-shadow: var(--mj-shadow-sm);\n transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n overflow: hidden;\n}\n\n.notification-card:hover {\n box-shadow: var(--mj-shadow-md);\n}\n\n.card-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1.25rem;\n border-bottom: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface-card);\n}\n\n.header-left {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n}\n\n.header-icon {\n font-size: 1.5rem;\n color: var(--mj-brand-primary);\n}\n\n.card-header h4 {\n margin: 0;\n font-size: 1.125rem;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.unread-badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 28px;\n height: 28px;\n padding: 0 0.5rem;\n background: var(--mj-status-success);\n color: white;\n border-radius: 9999px;\n font-size: 0.875rem;\n font-weight: 600;\n box-shadow: var(--mj-shadow-sm);\n}\n\n.card-body {\n padding: 1.25rem;\n}\n\n.card-description {\n margin: 0 0 1.25rem 0;\n font-size: 0.9375rem;\n color: var(--mj-text-secondary);\n line-height: 1.5;\n}\n\n/* -----------------------------------------------------------------------------\n Channel Toggles\n ----------------------------------------------------------------------------- */\n.channel-toggles {\n display: grid;\n grid-template-columns: 1fr;\n gap: 0.75rem;\n margin-bottom: 1.5rem;\n}\n\n.channel-toggle {\n display: flex;\n align-items: center;\n gap: 0.875rem;\n padding: 1rem 1.25rem;\n background: var(--mj-bg-surface-card);\n border: 2px solid var(--mj-border-default);\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n font-family: inherit;\n min-height: 56px;\n}\n\n.channel-toggle i:first-child {\n font-size: 1.25rem;\n color: var(--mj-text-secondary);\n transition: color 0.2s;\n}\n\n.channel-label {\n flex: 1;\n text-align: left;\n font-size: 0.9375rem;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.toggle-indicator {\n width: 28px;\n height: 28px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 2px solid var(--mj-text-muted);\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n flex-shrink: 0;\n}\n\n.toggle-indicator i {\n font-size: 0.875rem;\n color: transparent;\n}\n\n.channel-toggle:hover:not(:disabled) {\n border-color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.channel-toggle:hover:not(:disabled) i:first-child {\n color: var(--mj-brand-primary);\n}\n\n.channel-toggle.active {\n border-color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.channel-toggle.active i:first-child {\n color: var(--mj-brand-primary);\n}\n\n.channel-toggle.active .toggle-indicator {\n background: var(--mj-brand-primary);\n border-color: var(--mj-brand-primary);\n}\n\n.channel-toggle.active .toggle-indicator i {\n color: white;\n}\n\n.channel-toggle:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.channel-toggle:focus-visible {\n outline: 2px solid var(--mj-brand-primary);\n outline-offset: 2px;\n}\n\n/* -----------------------------------------------------------------------------\n Card Footer\n ----------------------------------------------------------------------------- */\n.card-footer {\n padding-top: 1rem;\n border-top: 1px solid var(--mj-border-default);\n}\n\n.settings-link {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.9375rem;\n font-weight: 600;\n color: var(--mj-brand-primary);\n text-decoration: none;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n padding: 0.5rem;\n margin: -0.5rem;\n border-radius: 8px;\n}\n\n.settings-link:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n}\n\n.settings-link i {\n font-size: 0.875rem;\n transition: transform 0.2s;\n}\n\n.settings-link:hover i {\n transform: translateX(4px);\n}\n\n/* -----------------------------------------------------------------------------\n Accessibility: Focus Indicators\n ----------------------------------------------------------------------------- */\nbutton:focus-visible,\na:focus-visible {\n outline: 2px solid var(--mj-brand-primary);\n outline-offset: 2px;\n}\n\n/* -----------------------------------------------------------------------------\n Accessibility: Reduced Motion\n ----------------------------------------------------------------------------- */\n@media (prefers-reduced-motion: reduce) {\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n }\n}\n\n/* -----------------------------------------------------------------------------\n Responsive Design - Mobile First\n ----------------------------------------------------------------------------- */\n@media (max-width: 639px) {\n :host {\n padding: 1rem;\n }\n\n .user-profile-container {\n gap: 1rem;\n }\n\n .profile-card {\n padding: 1rem;\n }\n\n .profile-header {\n flex-direction: column;\n text-align: center;\n }\n\n .avatar-container {\n width: 100px;\n height: 100px;\n }\n\n .avatar-icon {\n font-size: 3rem;\n }\n\n .user-name {\n font-size: 1.25rem;\n }\n\n .card-header {\n padding: 1rem;\n }\n\n .card-body {\n padding: 1rem;\n }\n\n .channel-toggles {\n gap: 0.625rem;\n }\n\n .channel-toggle {\n padding: 0.875rem 1rem;\n }\n}\n\n@media (min-width: 640px) {\n .channel-toggles {\n grid-template-columns: repeat(3, 1fr);\n }\n}\n\n@media (min-width: 768px) {\n :host {\n padding: 2rem;\n }\n\n .user-profile-container {\n grid-template-columns: 1fr 1fr;\n gap: 1.5rem;\n }\n}\n\n@media (min-width: 1024px) {\n .user-profile-container {\n gap: 2rem;\n }\n}\n"] }]
|
|
323
323
|
}], () => [{ type: i1.MJAuthBase }, { type: i2.SharedService }, { type: i0.ChangeDetectorRef }], null); })();
|
|
324
324
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UserProfileComponent, { className: "UserProfileComponent", filePath: "src/lib/user-profile/user-profile.component.ts", lineNumber: 23 }); })();
|
|
325
325
|
//# sourceMappingURL=user-profile.component.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@memberjunction/ng-explorer-core",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.13.0",
|
|
4
4
|
"description": "MemberJunction Explorer: Core Angular Components",
|
|
5
5
|
"main": "./dist/public-api.js",
|
|
6
6
|
"typings": "./dist/public-api.d.ts",
|
|
@@ -30,39 +30,39 @@
|
|
|
30
30
|
"@angular/cdk": "21.1.3",
|
|
31
31
|
"@angular/platform-browser": "21.1.3",
|
|
32
32
|
"@auth0/auth0-angular": "^2.6.0",
|
|
33
|
-
"@memberjunction/ai-core-plus": "5.
|
|
34
|
-
"@memberjunction/ai-engine-base": "5.
|
|
35
|
-
"@memberjunction/communication-types": "5.
|
|
36
|
-
"@memberjunction/core": "5.
|
|
37
|
-
"@memberjunction/core-entities": "5.
|
|
38
|
-
"@memberjunction/entity-communications-client": "5.
|
|
39
|
-
"@memberjunction/global": "5.
|
|
40
|
-
"@memberjunction/graphql-dataprovider": "5.
|
|
41
|
-
"@memberjunction/ng-ai-test-harness": "5.
|
|
42
|
-
"@memberjunction/ng-artifacts": "5.
|
|
43
|
-
"@memberjunction/ng-auth-services": "5.
|
|
44
|
-
"@memberjunction/ng-base-application": "5.
|
|
45
|
-
"@memberjunction/ng-base-forms": "5.
|
|
46
|
-
"@memberjunction/ng-container-directives": "5.
|
|
47
|
-
"@memberjunction/ng-conversations": "5.
|
|
48
|
-
"@memberjunction/ng-dashboards": "5.
|
|
49
|
-
"@memberjunction/ng-entity-form-dialog": "5.
|
|
50
|
-
"@memberjunction/ng-entity-permissions": "5.
|
|
51
|
-
"@memberjunction/ng-dashboard-viewer": "5.
|
|
52
|
-
"@memberjunction/ng-entity-viewer": "5.
|
|
53
|
-
"@memberjunction/ng-list-detail-grid": "5.
|
|
54
|
-
"@memberjunction/ng-explorer-settings": "5.
|
|
55
|
-
"@memberjunction/ng-file-storage": "5.
|
|
56
|
-
"@memberjunction/ng-generic-dialog": "5.
|
|
57
|
-
"@memberjunction/ng-notifications": "5.
|
|
58
|
-
"@memberjunction/ng-query-viewer": "5.
|
|
59
|
-
"@memberjunction/ng-record-changes": "5.
|
|
60
|
-
"@memberjunction/ng-record-selector": "5.
|
|
61
|
-
"@memberjunction/ng-resource-permissions": "5.
|
|
62
|
-
"@memberjunction/ng-shared": "5.
|
|
63
|
-
"@memberjunction/ng-shared-generic": "5.
|
|
64
|
-
"@memberjunction/ng-user-avatar": "5.
|
|
65
|
-
"@memberjunction/templates-base-types": "5.
|
|
33
|
+
"@memberjunction/ai-core-plus": "5.13.0",
|
|
34
|
+
"@memberjunction/ai-engine-base": "5.13.0",
|
|
35
|
+
"@memberjunction/communication-types": "5.13.0",
|
|
36
|
+
"@memberjunction/core": "5.13.0",
|
|
37
|
+
"@memberjunction/core-entities": "5.13.0",
|
|
38
|
+
"@memberjunction/entity-communications-client": "5.13.0",
|
|
39
|
+
"@memberjunction/global": "5.13.0",
|
|
40
|
+
"@memberjunction/graphql-dataprovider": "5.13.0",
|
|
41
|
+
"@memberjunction/ng-ai-test-harness": "5.13.0",
|
|
42
|
+
"@memberjunction/ng-artifacts": "5.13.0",
|
|
43
|
+
"@memberjunction/ng-auth-services": "5.13.0",
|
|
44
|
+
"@memberjunction/ng-base-application": "5.13.0",
|
|
45
|
+
"@memberjunction/ng-base-forms": "5.13.0",
|
|
46
|
+
"@memberjunction/ng-container-directives": "5.13.0",
|
|
47
|
+
"@memberjunction/ng-conversations": "5.13.0",
|
|
48
|
+
"@memberjunction/ng-dashboards": "5.13.0",
|
|
49
|
+
"@memberjunction/ng-entity-form-dialog": "5.13.0",
|
|
50
|
+
"@memberjunction/ng-entity-permissions": "5.13.0",
|
|
51
|
+
"@memberjunction/ng-dashboard-viewer": "5.13.0",
|
|
52
|
+
"@memberjunction/ng-entity-viewer": "5.13.0",
|
|
53
|
+
"@memberjunction/ng-list-detail-grid": "5.13.0",
|
|
54
|
+
"@memberjunction/ng-explorer-settings": "5.13.0",
|
|
55
|
+
"@memberjunction/ng-file-storage": "5.13.0",
|
|
56
|
+
"@memberjunction/ng-generic-dialog": "5.13.0",
|
|
57
|
+
"@memberjunction/ng-notifications": "5.13.0",
|
|
58
|
+
"@memberjunction/ng-query-viewer": "5.13.0",
|
|
59
|
+
"@memberjunction/ng-record-changes": "5.13.0",
|
|
60
|
+
"@memberjunction/ng-record-selector": "5.13.0",
|
|
61
|
+
"@memberjunction/ng-resource-permissions": "5.13.0",
|
|
62
|
+
"@memberjunction/ng-shared": "5.13.0",
|
|
63
|
+
"@memberjunction/ng-shared-generic": "5.13.0",
|
|
64
|
+
"@memberjunction/ng-user-avatar": "5.13.0",
|
|
65
|
+
"@memberjunction/templates-base-types": "5.13.0",
|
|
66
66
|
"@progress/kendo-angular-buttons": "22.0.1",
|
|
67
67
|
"@progress/kendo-angular-dateinputs": "22.0.1",
|
|
68
68
|
"@progress/kendo-angular-dialog": "22.0.1",
|