@memberjunction/ng-explorer-settings 6.1.0-edge.4 → 6.1.0-edge.6

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

@@ -821,7 +821,7 @@ export class UserProfileSettingsComponent extends BaseAngularComponent {
             i0.ɵɵconditional(ctx.isSaving ? 39 : 40);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("disabled", ctx.isSaving);
-        } }, dependencies: [i3.DefaultValueAccessor, i3.NgControlStatus, i3.NgModel, i4.MJButtonDirective, i4.MJEmptyStateComponent, i4.MJAlertComponent], styles: ["\n\n\n\n\n\n\n\n[_nghost-%COMP%] {\n  display: block;\n  height: 100%;\n  width: 100%;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n\n\n\n\n.user-profile-settings[_ngcontent-%COMP%] {\n  max-width: 800px;\n  margin: 0 auto;\n  padding: 1.5rem;\n  background: var(--mj-bg-page);\n  min-height: 100%;\n}\n\n\n\n\n\n.profile-header[_ngcontent-%COMP%] {\n  margin-bottom: 1.5rem;\n}\n\n.profile-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 0.5rem 0;\n  font-size: 1.75rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.profile-header[_ngcontent-%COMP%]   .description[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 1rem;\n  color: var(--mj-text-muted);\n}\n\n\n\n\n\n.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: var(--mj-bg-surface-sunken);\n  border-radius: 12px;\n  border: 1px solid var(--mj-border-strong);\n}\n\n.preview-label[_ngcontent-%COMP%] {\n  font-size: 0.75rem;\n  font-weight: 500;\n  color: var(--mj-text-muted);\n  margin-bottom: 1rem;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n\n.preview-container[_ngcontent-%COMP%] {\n  width: 120px;\n  height: 120px;\n  border-radius: 50%;\n  overflow: hidden;\n  background: var(--mj-bg-surface);\n  border: 3px solid var(--mj-border-strong);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: border-color 0.2s;\n}\n\n.preview-container[_ngcontent-%COMP%]:has(.preview-image), \n.preview-container[_ngcontent-%COMP%]:has(.preview-icon) {\n  border-color: var(--mj-brand-primary);\n}\n\n.preview-image[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.preview-icon-wrapper[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.preview-icon[_ngcontent-%COMP%] {\n  font-size: 3.5rem;\n  color: var(--mj-brand-primary);\n}\n\n.preview-placeholder[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.5rem;\n  color: var(--mj-text-muted);\n}\n\n.preview-placeholder[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 2.5rem;\n}\n\n.preview-placeholder[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-size: 0.875rem;\n}\n\n\n\n\n\n.tab-navigation[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 0.25rem;\n  margin-bottom: 1.5rem;\n  border-bottom: 2px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface);\n}\n\n.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: transparent;\n  border: none;\n  border-bottom: 3px solid transparent;\n  cursor: pointer;\n  font-size: 0.875rem;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  margin-bottom: -2px;\n  min-height: 48px;\n}\n\n.tab-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1rem;\n}\n\n.tab-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.tab-btn[_ngcontent-%COMP%]:focus-visible {\n  outline: 2px solid var(--mj-brand-primary);\n  outline-offset: -2px;\n}\n\n.tab-btn.active[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  border-bottom-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n\n\n\n\n.tab-content[_ngcontent-%COMP%] {\n  min-height: 300px;\n  padding: 1.5rem;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 12px;\n  margin-bottom: 1.5rem;\n  border: 1px solid var(--mj-border-strong);\n}\n\n\n\n\n\n.upload-section[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 1rem;\n}\n\n.upload-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1.5rem;\n  background: var(--mj-brand-primary);\n  color: var(--mj-bg-surface);\n  border: none;\n  border-radius: 9999px;\n  font-size: 0.875rem;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  min-height: 44px;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);\n}\n\n.upload-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.08);\n}\n\n.upload-btn[_ngcontent-%COMP%]:active {\n  background: var(--mj-brand-primary);\n  transform: scale(0.98);\n}\n\n.upload-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1rem;\n}\n\n.upload-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-size: 0.875rem;\n  color: var(--mj-text-muted);\n}\n\n.upload-info[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.selected-file[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 0.75rem 1rem;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 8px;\n  width: 100%;\n  max-width: 400px;\n}\n\n.selected-file[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 1.2rem;\n}\n\n.selected-file[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  flex: 1;\n  font-size: 0.875rem;\n  color: var(--mj-text-primary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.selected-file[_ngcontent-%COMP%]   .remove-btn[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0.5rem;\n  color: var(--mj-text-muted);\n  transition: color 0.2s, background 0.2s;\n  border-radius: 4px;\n  min-width: 32px;\n  min-height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.selected-file[_ngcontent-%COMP%]   .remove-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-status-error);\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n}\n\n.selected-file[_ngcontent-%COMP%]   .remove-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1rem;\n  color: inherit;\n}\n\n\n\n\n\n.url-section[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n.url-section[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-size: 0.875rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.url-input[_ngcontent-%COMP%] {\n  padding: 0.875rem 1rem;\n  border: 2px solid var(--mj-border-strong);\n  border-radius: 8px;\n  font-size: 1rem;\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.url-input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-muted);\n}\n\n.url-input[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface);\n}\n\n.url-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n  background: var(--mj-bg-surface);\n}\n\n.url-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-size: 0.875rem;\n  color: var(--mj-text-muted);\n}\n\n.url-info[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n\n\n\n\n.icon-section[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n.icon-search-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  padding-bottom: 1rem;\n  border-bottom: 1px solid var(--mj-border-strong);\n}\n\n\n\n.mj-search[_ngcontent-%COMP%] {\n  position: relative;\n  width: 100%;\n}\n\n.mj-search-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 1rem;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--mj-text-muted);\n  font-size: 1rem;\n  pointer-events: none;\n  transition: color 0.2s ease;\n}\n\n.mj-search-input[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 0.875rem 2.75rem 0.875rem 2.75rem;\n  border: 2px solid var(--mj-border-strong);\n  border-radius: 9999px;\n  font-size: 1rem;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.mj-search-input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-muted);\n}\n\n.mj-search-input[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface);\n}\n\n.mj-search-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n  background: var(--mj-bg-surface);\n}\n\n.mj-search[_ngcontent-%COMP%]:focus-within   .mj-search-icon[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.mj-search-clear[_ngcontent-%COMP%] {\n  position: absolute;\n  right: 0.5rem;\n  top: 50%;\n  transform: translateY(-50%);\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: 0.5rem;\n  color: var(--mj-text-muted);\n  border-radius: 9999px;\n  min-width: 32px;\n  min-height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s ease;\n}\n\n.mj-search-clear[_ngcontent-%COMP%]:hover {\n  color: var(--mj-bg-surface);\n  background: var(--mj-brand-primary);\n}\n\n.icon-filter-info[_ngcontent-%COMP%] {\n  font-size: 0.875rem;\n  color: var(--mj-text-muted);\n  padding-left: 0.25rem;\n}\n\n.icon-categories-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 1.5rem;\n  max-height: 350px;\n  overflow-y: auto;\n  padding-right: 0.5rem;\n  -webkit-overflow-scrolling: touch;\n}\n\n.icon-category[_ngcontent-%COMP%]   .category-title[_ngcontent-%COMP%] {\n  font-size: 1rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0 0 0.75rem 0;\n  padding-bottom: 0.5rem;\n  border-bottom: 1px solid var(--mj-border-strong);\n}\n\n.icon-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));\n  gap: 0.5rem;\n}\n\n.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: var(--mj-bg-surface);\n  border: 2px solid var(--mj-border-strong);\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  min-width: 44px;\n  min-height: 44px;\n}\n\n.icon-option[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1.5rem;\n  color: var(--mj-text-muted);\n  transition: color 0.2s;\n}\n\n.icon-option[_ngcontent-%COMP%]:hover {\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.icon-option[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.icon-option[_ngcontent-%COMP%]:focus-visible {\n  outline: 2px solid var(--mj-brand-primary);\n  outline-offset: 2px;\n}\n\n.icon-option.selected[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-brand-primary);\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);\n}\n\n.icon-option.selected[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-bg-surface);\n}\n\n\n\n.icon-categories-container[_ngcontent-%COMP%]::-webkit-scrollbar {\n  width: 6px;\n}\n\n.icon-categories-container[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 3px;\n}\n\n.icon-categories-container[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: var(--mj-border-strong);\n  border-radius: 3px;\n}\n\n.icon-categories-container[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-muted);\n}\n\n\n\n\n\n.provider-section[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 1.5rem;\n  padding: 1rem 0;\n}\n\n.provider-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 1rem;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 8px;\n  width: 100%;\n  max-width: 500px;\n}\n\n.provider-info[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 1.2rem;\n  flex-shrink: 0;\n}\n\n.provider-info[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 0.875rem;\n  color: var(--mj-text-muted);\n}\n\n.sync-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 1rem 2rem;\n  background: var(--mj-brand-primary);\n  color: var(--mj-bg-surface);\n  border: none;\n  border-radius: 9999px;\n  font-size: 0.875rem;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  min-height: 48px;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);\n}\n\n.sync-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-brand-primary);\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.08);\n}\n\n.sync-btn[_ngcontent-%COMP%]:active:not(:disabled) {\n  background: var(--mj-brand-primary);\n  transform: scale(0.98);\n}\n\n.sync-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.38;\n  cursor: not-allowed;\n}\n\n.sync-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1.2rem;\n}\n\n.provider-note[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.5rem;\n  font-size: 0.875rem;\n  color: var(--mj-text-muted);\n  max-width: 500px;\n  text-align: center;\n}\n\n.provider-note[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n  margin-top: 0.1rem;\n  flex-shrink: 0;\n}\n\n.provider-divider[_ngcontent-%COMP%] {\n  border: none;\n  border-top: 1px solid var(--mj-border-strong);\n  width: 100%;\n  max-width: 500px;\n  margin: 0.5rem 0;\n}\n\n.revert-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 0.75rem 1.5rem;\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 9999px;\n  font-size: 0.875rem;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  min-height: 44px;\n}\n\n.revert-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-brand-primary);\n  color: var(--mj-bg-surface);\n  border-color: var(--mj-brand-primary);\n}\n\n.revert-btn[_ngcontent-%COMP%]:active:not(:disabled) {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.revert-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.38;\n  cursor: not-allowed;\n}\n\n\n\n\n\n.action-buttons[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 0.75rem;\n  justify-content: flex-start;\n  padding-top: 1rem;\n  border-top: 1px solid var(--mj-border-strong);\n}\n\n\n\n\n\n\n\n\n\n\n\n\nbutton[_ngcontent-%COMP%]:focus-visible, \ninput[_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@keyframes _ngcontent-%COMP%_fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n\n\n\n\n@media (max-width: 639px) {\n  .user-profile-settings[_ngcontent-%COMP%] {\n    padding: 1rem;\n  }\n\n  .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  .tab-navigation[_ngcontent-%COMP%]   .tab-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 1.2rem;\n  }\n\n  .icon-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(auto-fill, minmax(45px, 1fr));\n  }\n\n  .icon-categories-container[_ngcontent-%COMP%] {\n    max-height: 300px;\n  }\n\n  .action-buttons[_ngcontent-%COMP%] {\n    flex-direction: column;\n  }\n\n  .action-buttons[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n    width: 100%;\n    justify-content: center;\n  }\n\n  .provider-section[_ngcontent-%COMP%] {\n    padding: 0.5rem 0;\n  }\n\n  .sync-btn[_ngcontent-%COMP%], \n   .revert-btn[_ngcontent-%COMP%] {\n    width: 100%;\n    max-width: 300px;\n    justify-content: center;\n  }\n}\n\n@media (min-width: 640px) {\n  .icon-search-container[_ngcontent-%COMP%] {\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  .mj-search[_ngcontent-%COMP%] {\n    max-width: 300px;\n  }\n}\n\n@media (min-width: 768px) {\n  .user-profile-settings[_ngcontent-%COMP%] {\n    padding: 2rem;\n  }\n\n  .icon-categories-container[_ngcontent-%COMP%] {\n    max-height: 400px;\n  }\n}\n\n@media (min-width: 1024px) {\n  .icon-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));\n  }\n}"] });
+        } }, dependencies: [i3.DefaultValueAccessor, i3.NgControlStatus, i3.NgModel, i4.MJButtonDirective, i4.MJEmptyStateComponent, i4.MJAlertComponent], styles: ["\n\n\n\n\n\n[_nghost-%COMP%] {\n  display: block;\n  height: 100%;\n  width: 100%;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n\n\n\n.user-profile-settings[_ngcontent-%COMP%] {\n  max-width: 800px;\n  margin: 0 auto;\n  padding: 1.5rem;\n  background: var(--mj-bg-page);\n  min-height: 100%;\n}\n\n\n\n\n.profile-header[_ngcontent-%COMP%] {\n  margin-bottom: 1.5rem;\n}\n\n.profile-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 0.5rem 0;\n  font-size: 1.75rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.profile-header[_ngcontent-%COMP%]   .description[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 1rem;\n  color: var(--mj-text-muted);\n}\n\n\n\n\n.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: var(--mj-bg-surface-sunken);\n  border-radius: 12px;\n  border: 1px solid var(--mj-border-strong);\n}\n\n.preview-label[_ngcontent-%COMP%] {\n  font-size: 0.75rem;\n  font-weight: 500;\n  color: var(--mj-text-muted);\n  margin-bottom: 1rem;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n\n.preview-container[_ngcontent-%COMP%] {\n  width: 120px;\n  height: 120px;\n  border-radius: 50%;\n  overflow: hidden;\n  background: var(--mj-bg-surface);\n  border: 3px solid var(--mj-border-strong);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: border-color 0.2s;\n}\n\n.preview-container[_ngcontent-%COMP%]:has(.preview-image), \n.preview-container[_ngcontent-%COMP%]:has(.preview-icon) {\n  border-color: var(--mj-brand-primary);\n}\n\n.preview-image[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.preview-icon-wrapper[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.preview-icon[_ngcontent-%COMP%] {\n  font-size: 3.5rem;\n  color: var(--mj-brand-primary);\n}\n\n.preview-placeholder[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.5rem;\n  color: var(--mj-text-muted);\n}\n\n.preview-placeholder[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 2.5rem;\n}\n\n.preview-placeholder[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-size: 0.875rem;\n}\n\n\n\n\n.tab-navigation[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 0.25rem;\n  margin-bottom: 1.5rem;\n  border-bottom: 2px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface);\n}\n\n.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: transparent;\n  border: none;\n  border-bottom: 3px solid transparent;\n  cursor: pointer;\n  font-size: 0.875rem;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  margin-bottom: -2px;\n  min-height: 48px;\n}\n\n.tab-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1rem;\n}\n\n.tab-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.tab-btn[_ngcontent-%COMP%]:focus-visible {\n  outline: 2px solid var(--mj-brand-primary);\n  outline-offset: -2px;\n}\n\n.tab-btn.active[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  border-bottom-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n\n\n\n.tab-content[_ngcontent-%COMP%] {\n  min-height: 300px;\n  padding: 1.5rem;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 12px;\n  margin-bottom: 1.5rem;\n  border: 1px solid var(--mj-border-strong);\n}\n\n\n\n\n.upload-section[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 1rem;\n}\n\n.upload-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1.5rem;\n  background: var(--mj-brand-primary);\n  color: var(--mj-bg-surface);\n  border: none;\n  border-radius: 9999px;\n  font-size: 0.875rem;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  min-height: 44px;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);\n}\n\n.upload-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.08);\n}\n\n.upload-btn[_ngcontent-%COMP%]:active {\n  background: var(--mj-brand-primary);\n  transform: scale(0.98);\n}\n\n.upload-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1rem;\n}\n\n.upload-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-size: 0.875rem;\n  color: var(--mj-text-muted);\n}\n\n.upload-info[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.selected-file[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 0.75rem 1rem;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 8px;\n  width: 100%;\n  max-width: 400px;\n}\n\n.selected-file[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 1.2rem;\n}\n\n.selected-file[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  flex: 1;\n  font-size: 0.875rem;\n  color: var(--mj-text-primary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.selected-file[_ngcontent-%COMP%]   .remove-btn[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0.5rem;\n  color: var(--mj-text-muted);\n  transition: color 0.2s, background 0.2s;\n  border-radius: 4px;\n  min-width: 32px;\n  min-height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.selected-file[_ngcontent-%COMP%]   .remove-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-status-error);\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n}\n\n.selected-file[_ngcontent-%COMP%]   .remove-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1rem;\n  color: inherit;\n}\n\n\n\n\n.url-section[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n.url-section[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-size: 0.875rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.url-input[_ngcontent-%COMP%] {\n  padding: 0.875rem 1rem;\n  border: 2px solid var(--mj-border-strong);\n  border-radius: 8px;\n  font-size: 1rem;\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.url-input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-muted);\n}\n\n.url-input[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface);\n}\n\n.url-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n  background: var(--mj-bg-surface);\n}\n\n.url-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-size: 0.875rem;\n  color: var(--mj-text-muted);\n}\n\n.url-info[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n\n\n\n.icon-section[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n.icon-search-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  padding-bottom: 1rem;\n  border-bottom: 1px solid var(--mj-border-strong);\n}\n\n\n.mj-search[_ngcontent-%COMP%] {\n  position: relative;\n  width: 100%;\n}\n\n.mj-search-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 1rem;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--mj-text-muted);\n  font-size: 1rem;\n  pointer-events: none;\n  transition: color 0.2s ease;\n}\n\n.mj-search-input[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 0.875rem 2.75rem 0.875rem 2.75rem;\n  border: 2px solid var(--mj-border-strong);\n  border-radius: 9999px;\n  font-size: 1rem;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.mj-search-input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-muted);\n}\n\n.mj-search-input[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface);\n}\n\n.mj-search-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n  background: var(--mj-bg-surface);\n}\n\n.mj-search[_ngcontent-%COMP%]:focus-within   .mj-search-icon[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.mj-search-clear[_ngcontent-%COMP%] {\n  position: absolute;\n  right: 0.5rem;\n  top: 50%;\n  transform: translateY(-50%);\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: 0.5rem;\n  color: var(--mj-text-muted);\n  border-radius: 9999px;\n  min-width: 32px;\n  min-height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s ease;\n}\n\n.mj-search-clear[_ngcontent-%COMP%]:hover {\n  color: var(--mj-bg-surface);\n  background: var(--mj-brand-primary);\n}\n\n.icon-filter-info[_ngcontent-%COMP%] {\n  font-size: 0.875rem;\n  color: var(--mj-text-muted);\n  padding-left: 0.25rem;\n}\n\n.icon-categories-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 1.5rem;\n  max-height: 350px;\n  overflow-y: auto;\n  padding-right: 0.5rem;\n  -webkit-overflow-scrolling: touch;\n}\n\n.icon-category[_ngcontent-%COMP%]   .category-title[_ngcontent-%COMP%] {\n  font-size: 1rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0 0 0.75rem 0;\n  padding-bottom: 0.5rem;\n  border-bottom: 1px solid var(--mj-border-strong);\n}\n\n.icon-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));\n  gap: 0.5rem;\n}\n\n.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: var(--mj-bg-surface);\n  border: 2px solid var(--mj-border-strong);\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  min-width: 44px;\n  min-height: 44px;\n}\n\n.icon-option[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1.5rem;\n  color: var(--mj-text-muted);\n  transition: color 0.2s;\n}\n\n.icon-option[_ngcontent-%COMP%]:hover {\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.icon-option[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.icon-option[_ngcontent-%COMP%]:focus-visible {\n  outline: 2px solid var(--mj-brand-primary);\n  outline-offset: 2px;\n}\n\n.icon-option.selected[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-brand-primary);\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);\n}\n\n.icon-option.selected[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-bg-surface);\n}\n\n\n.icon-categories-container[_ngcontent-%COMP%]::-webkit-scrollbar {\n  width: 6px;\n}\n\n.icon-categories-container[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 3px;\n}\n\n.icon-categories-container[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: var(--mj-border-strong);\n  border-radius: 3px;\n}\n\n.icon-categories-container[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-muted);\n}\n\n\n\n\n.provider-section[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 1.5rem;\n  padding: 1rem 0;\n}\n\n.provider-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 1rem;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 8px;\n  width: 100%;\n  max-width: 500px;\n}\n\n.provider-info[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 1.2rem;\n  flex-shrink: 0;\n}\n\n.provider-info[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 0.875rem;\n  color: var(--mj-text-muted);\n}\n\n.sync-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 1rem 2rem;\n  background: var(--mj-brand-primary);\n  color: var(--mj-bg-surface);\n  border: none;\n  border-radius: 9999px;\n  font-size: 0.875rem;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  min-height: 48px;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);\n}\n\n.sync-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-brand-primary);\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.08);\n}\n\n.sync-btn[_ngcontent-%COMP%]:active:not(:disabled) {\n  background: var(--mj-brand-primary);\n  transform: scale(0.98);\n}\n\n.sync-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.38;\n  cursor: not-allowed;\n}\n\n.sync-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1.2rem;\n}\n\n.provider-note[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.5rem;\n  font-size: 0.875rem;\n  color: var(--mj-text-muted);\n  max-width: 500px;\n  text-align: center;\n}\n\n.provider-note[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n  margin-top: 0.1rem;\n  flex-shrink: 0;\n}\n\n.provider-divider[_ngcontent-%COMP%] {\n  border: none;\n  border-top: 1px solid var(--mj-border-strong);\n  width: 100%;\n  max-width: 500px;\n  margin: 0.5rem 0;\n}\n\n.revert-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 0.75rem 1.5rem;\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 9999px;\n  font-size: 0.875rem;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  min-height: 44px;\n}\n\n.revert-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-brand-primary);\n  color: var(--mj-bg-surface);\n  border-color: var(--mj-brand-primary);\n}\n\n.revert-btn[_ngcontent-%COMP%]:active:not(:disabled) {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.revert-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.38;\n  cursor: not-allowed;\n}\n\n\n\n\n.action-buttons[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 0.75rem;\n  justify-content: flex-start;\n  padding-top: 1rem;\n  border-top: 1px solid var(--mj-border-strong);\n}\n\n\n\n\n\n\n\n\n\n\nbutton[_ngcontent-%COMP%]:focus-visible, \ninput[_ngcontent-%COMP%]:focus-visible {\n  outline: 2px solid var(--mj-brand-primary);\n  outline-offset: 2px;\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@keyframes _ngcontent-%COMP%_fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n\n\n\n@media (max-width: 639px) {\n  .user-profile-settings[_ngcontent-%COMP%] {\n    padding: 1rem;\n  }\n\n  .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  .tab-navigation[_ngcontent-%COMP%]   .tab-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 1.2rem;\n  }\n\n  .icon-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(auto-fill, minmax(45px, 1fr));\n  }\n\n  .icon-categories-container[_ngcontent-%COMP%] {\n    max-height: 300px;\n  }\n\n  .action-buttons[_ngcontent-%COMP%] {\n    flex-direction: column;\n  }\n\n  .action-buttons[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n    width: 100%;\n    justify-content: center;\n  }\n\n  .provider-section[_ngcontent-%COMP%] {\n    padding: 0.5rem 0;\n  }\n\n  .sync-btn[_ngcontent-%COMP%], \n   .revert-btn[_ngcontent-%COMP%] {\n    width: 100%;\n    max-width: 300px;\n    justify-content: center;\n  }\n}\n\n@media (min-width: 640px) {\n  .icon-search-container[_ngcontent-%COMP%] {\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  .mj-search[_ngcontent-%COMP%] {\n    max-width: 300px;\n  }\n}\n\n@media (min-width: 768px) {\n  .user-profile-settings[_ngcontent-%COMP%] {\n    padding: 2rem;\n  }\n\n  .icon-categories-container[_ngcontent-%COMP%] {\n    max-height: 400px;\n  }\n}\n\n@media (min-width: 1024px) {\n  .icon-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));\n  }\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UserProfileSettingsComponent, [{
         type: Component,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memberjunction/ng-explorer-settings",
-  "version": "6.1.0-edge.4",
+  "version": "6.1.0-edge.6",
   "description": "MemberJunction: Reusable Angular components for the settings section of the MJ Explorer App",
   "main": "./dist/public-api.js",
   "typings": "./dist/public-api.d.ts",
@@ -21,35 +21,35 @@
   "author": "",
   "license": "BUSL-1.1",
   "devDependencies": {
-    "@angular/compiler": "21.1.3",
-    "@angular/compiler-cli": "21.1.3",
-    "@memberjunction/ng-test-utils": "6.1.0-edge.4"
+    "@angular/compiler": "21.2.22",
+    "@angular/compiler-cli": "21.2.22",
+    "@memberjunction/ng-test-utils": "6.1.0-edge.6"
   },
   "peerDependencies": {
-    "@angular/common": "^21.1.3",
-    "@angular/core": "^21.1.3",
-    "@angular/forms": "^21.1.3"
+    "@angular/cdk": "^21.2.14",
+    "@angular/common": "^21.2.22",
+    "@angular/core": "^21.2.22",
+    "@angular/forms": "^21.2.22"
   },
   "dependencies": {
-    "@angular/cdk": "21.1.3",
-    "@memberjunction/core": "6.1.0-edge.4",
-    "@memberjunction/core-entities": "6.1.0-edge.4",
-    "@memberjunction/global": "6.1.0-edge.4",
-    "@memberjunction/graphql-dataprovider": "6.1.0-edge.4",
-    "@memberjunction/ng-base-application": "6.1.0-edge.4",
-    "@memberjunction/ng-base-forms": "6.1.0-edge.4",
-    "@memberjunction/ng-base-types": "6.1.0-edge.4",
-    "@memberjunction/ng-code-editor": "6.1.0-edge.4",
-    "@memberjunction/ng-entity-form-dialog": "6.1.0-edge.4",
-    "@memberjunction/ng-entity-permissions": "6.1.0-edge.4",
-    "@memberjunction/ng-join-grid": "6.1.0-edge.4",
-    "@memberjunction/ng-notifications": "6.1.0-edge.4",
-    "@memberjunction/ng-shared": "6.1.0-edge.4",
-    "@memberjunction/ng-shared-generic": "6.1.0-edge.4",
-    "@memberjunction/ng-simple-record-list": "6.1.0-edge.4",
-    "@memberjunction/ng-tabstrip": "6.1.0-edge.4",
-    "@memberjunction/ng-ui-components": "6.1.0-edge.4",
-    "@memberjunction/ng-user-avatar": "6.1.0-edge.4",
+    "@memberjunction/core": "6.1.0-edge.6",
+    "@memberjunction/core-entities": "6.1.0-edge.6",
+    "@memberjunction/global": "6.1.0-edge.6",
+    "@memberjunction/graphql-dataprovider": "6.1.0-edge.6",
+    "@memberjunction/ng-base-application": "6.1.0-edge.6",
+    "@memberjunction/ng-base-forms": "6.1.0-edge.6",
+    "@memberjunction/ng-base-types": "6.1.0-edge.6",
+    "@memberjunction/ng-code-editor": "6.1.0-edge.6",
+    "@memberjunction/ng-entity-form-dialog": "6.1.0-edge.6",
+    "@memberjunction/ng-entity-permissions": "6.1.0-edge.6",
+    "@memberjunction/ng-join-grid": "6.1.0-edge.6",
+    "@memberjunction/ng-notifications": "6.1.0-edge.6",
+    "@memberjunction/ng-shared": "6.1.0-edge.6",
+    "@memberjunction/ng-shared-generic": "6.1.0-edge.6",
+    "@memberjunction/ng-simple-record-list": "6.1.0-edge.6",
+    "@memberjunction/ng-tabstrip": "6.1.0-edge.6",
+    "@memberjunction/ng-ui-components": "6.1.0-edge.6",
+    "@memberjunction/ng-user-avatar": "6.1.0-edge.6",
     "rxjs": "~7.8.2",
     "tslib": "^2.8.1"
   },