@memberjunction/ng-conversations 5.43.0 → 5.44.0

package/dist/lib/components/conversation/pinned-messages-panel.component.js

@@ -1,12 +1,9 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 import * as i0 from "@angular/core";
+import * as i1 from "@memberjunction/ng-ui-components";
 const _forTrack0 = ($index, $item) => $item.ID;
 function PinnedMessagesPanelComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 8);
-    i0.ɵɵelement(1, "i", 3);
-    i0.ɵɵelementStart(2, "p");
-    i0.ɵɵtext(3, "No pinned messages");
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(0, "mj-empty-state", 8);
 } }
 function PinnedMessagesPanelComponent_For_13_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -111,7 +108,7 @@ export class PinnedMessagesPanelComponent {
         return 'AI Response';
     }
     static ɵfac = function PinnedMessagesPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PinnedMessagesPanelComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PinnedMessagesPanelComponent, selectors: [["mj-pinned-messages-panel"]], inputs: { pinnedMessages: "pinnedMessages" }, outputs: { closed: "closed", jumpRequested: "jumpRequested", unpinRequested: "unpinRequested" }, standalone: false, decls: 14, vars: 2, consts: [[1, "pins-panel"], [1, "pins-header"], [1, "pins-title"], [1, "fas", "fa-thumbtack"], [1, "pins-count"], ["title", "Close", 1, "pins-close-btn", 3, "click"], [1, "fas", "fa-times"], [1, "pins-body"], [1, "pins-empty"], [1, "pin-card", 3, "unpinning"], [1, "pin-card"], [1, "pin-card-meta"], [1, "pin-sender"], [1, "pin-avatar"], [1, "fas", "fa-robot"], [1, "pin-sender-name"], [1, "pin-time"], [1, "pin-preview"], [1, "pin-actions"], ["title", "Jump to message", 1, "pin-action-btn", "jump-btn", 3, "click"], [1, "fas", "fa-arrow-up-right-from-square"], ["title", "Unpin this message", 1, "pin-action-btn", "unpin-btn", 3, "click"]], template: function PinnedMessagesPanelComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PinnedMessagesPanelComponent, selectors: [["mj-pinned-messages-panel"]], inputs: { pinnedMessages: "pinnedMessages" }, outputs: { closed: "closed", jumpRequested: "jumpRequested", unpinRequested: "unpinRequested" }, standalone: false, decls: 14, vars: 2, consts: [[1, "pins-panel"], [1, "pins-header"], [1, "pins-title"], [1, "fas", "fa-thumbtack"], [1, "pins-count"], ["title", "Close", 1, "pins-close-btn", 3, "click"], [1, "fas", "fa-times"], [1, "pins-body"], ["Size", "compact", "Icon", "fa-solid fa-thumbtack", "Title", "No pinned messages", 1, "pins-empty"], [1, "pin-card", 3, "unpinning"], [1, "pin-card"], [1, "pin-card-meta"], [1, "pin-sender"], [1, "pin-avatar"], [1, "fas", "fa-robot"], [1, "pin-sender-name"], [1, "pin-time"], [1, "pin-preview"], [1, "pin-actions"], ["title", "Jump to message", 1, "pin-action-btn", "jump-btn", 3, "click"], [1, "fas", "fa-arrow-up-right-from-square"], ["title", "Unpin this message", 1, "pin-action-btn", "unpin-btn", 3, "click"]], template: function PinnedMessagesPanelComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2);
             i0.ɵɵelement(3, "i", 3);
             i0.ɵɵelementStart(4, "span");
@@ -125,7 +122,7 @@ export class PinnedMessagesPanelComponent {
             i0.ɵɵelement(9, "i", 6);
             i0.ɵɵelementEnd()();
             i0.ɵɵelementStart(10, "div", 7);
-            i0.ɵɵconditionalCreate(11, PinnedMessagesPanelComponent_Conditional_11_Template, 4, 0, "div", 8);
+            i0.ɵɵconditionalCreate(11, PinnedMessagesPanelComponent_Conditional_11_Template, 1, 0, "mj-empty-state", 8);
             i0.ɵɵrepeaterCreate(12, PinnedMessagesPanelComponent_For_13_Template, 18, 5, "div", 9, _forTrack0);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
@@ -135,11 +132,11 @@ export class PinnedMessagesPanelComponent {
             i0.ɵɵconditional(ctx.pinnedMessages.length === 0 ? 11 : -1);
             i0.ɵɵadvance();
             i0.ɵɵrepeater(ctx.pinnedMessages);
-        } }, styles: ["\n\n\n\n\n[_nghost-%COMP%] {\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: 340px;\n  z-index: 50;\n  pointer-events: auto;\n  animation: _ngcontent-%COMP%_slideInPanel 0.22s cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n@keyframes _ngcontent-%COMP%_slideInPanel {\n  from {\n    opacity: 0;\n    transform: translateX(24px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n.pins-panel[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-default);\n  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);\n}\n\n\n\n.pins-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n  background: var(--mj-bg-surface-card);\n}\n\n.pins-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.pins-title[_ngcontent-%COMP%]    > i.fa-thumbtack[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n  font-size: 13px;\n}\n\n.pins-count[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 20px;\n  height: 20px;\n  padding: 0 6px;\n  border-radius: 10px;\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-status-warning) 40%, transparent);\n  color: var(--mj-status-warning-text, var(--mj-status-warning));\n  font-size: 11px;\n  font-weight: 700;\n}\n\n.pins-close-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-muted);\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s;\n}\n\n.pins-close-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n\n\n.pins-body[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 12px;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n\n\n.pins-empty[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  gap: 12px;\n  color: var(--mj-text-muted);\n}\n\n.pins-empty[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 32px;\n  opacity: 0.4;\n}\n\n.pins-empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  font-size: 14px;\n  margin: 0;\n}\n\n\n\n.pin-card[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 12px;\n  border-radius: 8px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-left: 3px solid var(--mj-status-warning);\n  transition: opacity 0.2s, transform 0.2s;\n}\n\n.pin-card.unpinning[_ngcontent-%COMP%] {\n  opacity: 0;\n  transform: translateX(12px);\n}\n\n.pin-card[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-border-strong);\n  border-left-color: var(--mj-status-warning);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n}\n\n\n\n.pin-card-meta[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.pin-sender[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.pin-avatar[_ngcontent-%COMP%] {\n  width: 20px;\n  height: 20px;\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}\n\n.pin-avatar[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-brand-primary);\n}\n\n.pin-sender-name[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n}\n\n.pin-time[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n}\n\n\n\n.pin-preview[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 13px;\n  line-height: 1.5;\n  color: var(--mj-text-primary);\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n\n\n.pin-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 6px;\n  margin-top: 2px;\n}\n\n.pin-action-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 5px 10px;\n  border-radius: 5px;\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s;\n  border: 1px solid var(--mj-border-default);\n}\n\n.pin-action-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n.jump-btn[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n}\n\n.jump-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n  border-color: var(--mj-brand-primary-hover);\n}\n\n.unpin-btn[_ngcontent-%COMP%] {\n  background: transparent;\n  color: var(--mj-text-secondary);\n}\n\n.unpin-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n  border-color: var(--mj-border-strong);\n}\n\n\n\n.pins-body[_ngcontent-%COMP%]::-webkit-scrollbar { width: 4px; }\n.pins-body[_ngcontent-%COMP%]::-webkit-scrollbar-track { background: transparent; }\n.pins-body[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: var(--mj-border-strong);\n  border-radius: 2px;\n}"] });
+        } }, dependencies: [i1.MJEmptyStateComponent], styles: ["\n\n\n\n\n[_nghost-%COMP%] {\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: 340px;\n  z-index: 50;\n  pointer-events: auto;\n  animation: _ngcontent-%COMP%_slideInPanel 0.22s cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n@keyframes _ngcontent-%COMP%_slideInPanel {\n  from {\n    opacity: 0;\n    transform: translateX(24px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n.pins-panel[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-default);\n  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);\n}\n\n\n\n.pins-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n  background: var(--mj-bg-surface-card);\n}\n\n.pins-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.pins-title[_ngcontent-%COMP%]    > i.fa-thumbtack[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n  font-size: 13px;\n}\n\n.pins-count[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 20px;\n  height: 20px;\n  padding: 0 6px;\n  border-radius: 10px;\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-status-warning) 40%, transparent);\n  color: var(--mj-status-warning-text, var(--mj-status-warning));\n  font-size: 11px;\n  font-weight: 700;\n}\n\n.pins-close-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-muted);\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s;\n}\n\n.pins-close-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n\n\n.pins-body[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 12px;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n\n\n.pins-empty[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  gap: 12px;\n  color: var(--mj-text-muted);\n}\n\n.pins-empty[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 32px;\n  opacity: 0.4;\n}\n\n.pins-empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  font-size: 14px;\n  margin: 0;\n}\n\n\n\n.pin-card[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 12px;\n  border-radius: 8px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-left: 3px solid var(--mj-status-warning);\n  transition: opacity 0.2s, transform 0.2s;\n}\n\n.pin-card.unpinning[_ngcontent-%COMP%] {\n  opacity: 0;\n  transform: translateX(12px);\n}\n\n.pin-card[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-border-strong);\n  border-left-color: var(--mj-status-warning);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n}\n\n\n\n.pin-card-meta[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.pin-sender[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.pin-avatar[_ngcontent-%COMP%] {\n  width: 20px;\n  height: 20px;\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}\n\n.pin-avatar[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-brand-primary);\n}\n\n.pin-sender-name[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n}\n\n.pin-time[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n}\n\n\n\n.pin-preview[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 13px;\n  line-height: 1.5;\n  color: var(--mj-text-primary);\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n\n\n.pin-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 6px;\n  margin-top: 2px;\n}\n\n.pin-action-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 5px 10px;\n  border-radius: 5px;\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s;\n  border: 1px solid var(--mj-border-default);\n}\n\n.pin-action-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n.jump-btn[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n}\n\n.jump-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n  border-color: var(--mj-brand-primary-hover);\n}\n\n.unpin-btn[_ngcontent-%COMP%] {\n  background: transparent;\n  color: var(--mj-text-secondary);\n}\n\n.unpin-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n  border-color: var(--mj-border-strong);\n}\n\n\n\n.pins-body[_ngcontent-%COMP%]::-webkit-scrollbar { width: 4px; }\n.pins-body[_ngcontent-%COMP%]::-webkit-scrollbar-track { background: transparent; }\n.pins-body[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: var(--mj-border-strong);\n  border-radius: 2px;\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PinnedMessagesPanelComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-pinned-messages-panel', template: "<div class=\"pins-panel\">\n  <div class=\"pins-header\">\n    <div class=\"pins-title\">\n      <i class=\"fas fa-thumbtack\"></i>\n      <span>Pinned Messages</span>\n      <span class=\"pins-count\">{{ pinnedMessages.length }}</span>\n    </div>\n    <button class=\"pins-close-btn\" (click)=\"Close()\" title=\"Close\">\n      <i class=\"fas fa-times\"></i>\n    </button>\n  </div>\n\n  <div class=\"pins-body\">\n    @if (pinnedMessages.length === 0) {\n      <div class=\"pins-empty\">\n        <i class=\"fas fa-thumbtack\"></i>\n        <p>No pinned messages</p>\n      </div>\n    }\n\n    @for (message of pinnedMessages; track message.ID) {\n      <div class=\"pin-card\" [class.unpinning]=\"IsUnpinning(message)\">\n        <div class=\"pin-card-meta\">\n          <div class=\"pin-sender\">\n            <div class=\"pin-avatar\">\n              <i class=\"fas fa-robot\"></i>\n            </div>\n            <span class=\"pin-sender-name\">{{ GetSenderName(message) }}</span>\n          </div>\n          <span class=\"pin-time\">{{ GetRelativeTime(message) }}</span>\n        </div>\n\n        <p class=\"pin-preview\">{{ GetPreviewText(message) }}</p>\n\n        <div class=\"pin-actions\">\n          <button class=\"pin-action-btn jump-btn\" (click)=\"OnJump(message)\" title=\"Jump to message\">\n            <i class=\"fas fa-arrow-up-right-from-square\"></i>\n            Jump to message\n          </button>\n          <button class=\"pin-action-btn unpin-btn\" (click)=\"OnUnpin(message)\" title=\"Unpin this message\">\n            <i class=\"fas fa-thumbtack\"></i>\n            Unpin\n          </button>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: ["/* ============================================================\n   Pinned Messages Panel \u2014 overlays the right edge of the chat\n   ============================================================ */\n\n:host {\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: 340px;\n  z-index: 50;\n  pointer-events: auto;\n  animation: slideInPanel 0.22s cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n@keyframes slideInPanel {\n  from {\n    opacity: 0;\n    transform: translateX(24px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n.pins-panel {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-default);\n  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);\n}\n\n/* \u2500\u2500 Header \u2500\u2500 */\n.pins-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n  background: var(--mj-bg-surface-card);\n}\n\n.pins-title {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.pins-title > i.fa-thumbtack {\n  color: var(--mj-status-warning);\n  font-size: 13px;\n}\n\n.pins-count {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 20px;\n  height: 20px;\n  padding: 0 6px;\n  border-radius: 10px;\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-status-warning) 40%, transparent);\n  color: var(--mj-status-warning-text, var(--mj-status-warning));\n  font-size: 11px;\n  font-weight: 700;\n}\n\n.pins-close-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-muted);\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s;\n}\n\n.pins-close-btn:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n/* \u2500\u2500 Body / Scrollable list \u2500\u2500 */\n.pins-body {\n  flex: 1;\n  overflow-y: auto;\n  padding: 12px;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n/* \u2500\u2500 Empty state \u2500\u2500 */\n.pins-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  gap: 12px;\n  color: var(--mj-text-muted);\n}\n\n.pins-empty i {\n  font-size: 32px;\n  opacity: 0.4;\n}\n\n.pins-empty p {\n  font-size: 14px;\n  margin: 0;\n}\n\n/* \u2500\u2500 Pin Card \u2500\u2500 */\n.pin-card {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 12px;\n  border-radius: 8px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-left: 3px solid var(--mj-status-warning);\n  transition: opacity 0.2s, transform 0.2s;\n}\n\n.pin-card.unpinning {\n  opacity: 0;\n  transform: translateX(12px);\n}\n\n.pin-card:hover {\n  border-color: var(--mj-border-strong);\n  border-left-color: var(--mj-status-warning);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n}\n\n/* Card meta row: avatar+name on left, time on right */\n.pin-card-meta {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.pin-sender {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.pin-avatar {\n  width: 20px;\n  height: 20px;\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}\n\n.pin-avatar i {\n  font-size: 10px;\n  color: var(--mj-brand-primary);\n}\n\n.pin-sender-name {\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n}\n\n.pin-time {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n}\n\n/* Preview text */\n.pin-preview {\n  margin: 0;\n  font-size: 13px;\n  line-height: 1.5;\n  color: var(--mj-text-primary);\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n/* Card action buttons */\n.pin-actions {\n  display: flex;\n  gap: 6px;\n  margin-top: 2px;\n}\n\n.pin-action-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 5px 10px;\n  border-radius: 5px;\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s;\n  border: 1px solid var(--mj-border-default);\n}\n\n.pin-action-btn i {\n  font-size: 11px;\n}\n\n.jump-btn {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n}\n\n.jump-btn:hover {\n  background: var(--mj-brand-primary-hover);\n  border-color: var(--mj-brand-primary-hover);\n}\n\n.unpin-btn {\n  background: transparent;\n  color: var(--mj-text-secondary);\n}\n\n.unpin-btn:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n  border-color: var(--mj-border-strong);\n}\n\n/* \u2500\u2500 Scrollbar styling \u2500\u2500 */\n.pins-body::-webkit-scrollbar { width: 4px; }\n.pins-body::-webkit-scrollbar-track { background: transparent; }\n.pins-body::-webkit-scrollbar-thumb {\n  background: var(--mj-border-strong);\n  border-radius: 2px;\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-pinned-messages-panel', template: "<div class=\"pins-panel\">\n  <div class=\"pins-header\">\n    <div class=\"pins-title\">\n      <i class=\"fas fa-thumbtack\"></i>\n      <span>Pinned Messages</span>\n      <span class=\"pins-count\">{{ pinnedMessages.length }}</span>\n    </div>\n    <button class=\"pins-close-btn\" (click)=\"Close()\" title=\"Close\">\n      <i class=\"fas fa-times\"></i>\n    </button>\n  </div>\n\n  <div class=\"pins-body\">\n    @if (pinnedMessages.length === 0) {\n      <mj-empty-state class=\"pins-empty\" Size=\"compact\"\n        Icon=\"fa-solid fa-thumbtack\"\n        Title=\"No pinned messages\" />\n    }\n\n    @for (message of pinnedMessages; track message.ID) {\n      <div class=\"pin-card\" [class.unpinning]=\"IsUnpinning(message)\">\n        <div class=\"pin-card-meta\">\n          <div class=\"pin-sender\">\n            <div class=\"pin-avatar\">\n              <i class=\"fas fa-robot\"></i>\n            </div>\n            <span class=\"pin-sender-name\">{{ GetSenderName(message) }}</span>\n          </div>\n          <span class=\"pin-time\">{{ GetRelativeTime(message) }}</span>\n        </div>\n\n        <p class=\"pin-preview\">{{ GetPreviewText(message) }}</p>\n\n        <div class=\"pin-actions\">\n          <button class=\"pin-action-btn jump-btn\" (click)=\"OnJump(message)\" title=\"Jump to message\">\n            <i class=\"fas fa-arrow-up-right-from-square\"></i>\n            Jump to message\n          </button>\n          <button class=\"pin-action-btn unpin-btn\" (click)=\"OnUnpin(message)\" title=\"Unpin this message\">\n            <i class=\"fas fa-thumbtack\"></i>\n            Unpin\n          </button>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: ["/* ============================================================\n   Pinned Messages Panel \u2014 overlays the right edge of the chat\n   ============================================================ */\n\n:host {\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: 340px;\n  z-index: 50;\n  pointer-events: auto;\n  animation: slideInPanel 0.22s cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n@keyframes slideInPanel {\n  from {\n    opacity: 0;\n    transform: translateX(24px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n.pins-panel {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-default);\n  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);\n}\n\n/* \u2500\u2500 Header \u2500\u2500 */\n.pins-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n  background: var(--mj-bg-surface-card);\n}\n\n.pins-title {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.pins-title > i.fa-thumbtack {\n  color: var(--mj-status-warning);\n  font-size: 13px;\n}\n\n.pins-count {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 20px;\n  height: 20px;\n  padding: 0 6px;\n  border-radius: 10px;\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-status-warning) 40%, transparent);\n  color: var(--mj-status-warning-text, var(--mj-status-warning));\n  font-size: 11px;\n  font-weight: 700;\n}\n\n.pins-close-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-muted);\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s;\n}\n\n.pins-close-btn:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n/* \u2500\u2500 Body / Scrollable list \u2500\u2500 */\n.pins-body {\n  flex: 1;\n  overflow-y: auto;\n  padding: 12px;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n/* \u2500\u2500 Empty state \u2500\u2500 */\n.pins-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  gap: 12px;\n  color: var(--mj-text-muted);\n}\n\n.pins-empty i {\n  font-size: 32px;\n  opacity: 0.4;\n}\n\n.pins-empty p {\n  font-size: 14px;\n  margin: 0;\n}\n\n/* \u2500\u2500 Pin Card \u2500\u2500 */\n.pin-card {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 12px;\n  border-radius: 8px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-left: 3px solid var(--mj-status-warning);\n  transition: opacity 0.2s, transform 0.2s;\n}\n\n.pin-card.unpinning {\n  opacity: 0;\n  transform: translateX(12px);\n}\n\n.pin-card:hover {\n  border-color: var(--mj-border-strong);\n  border-left-color: var(--mj-status-warning);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n}\n\n/* Card meta row: avatar+name on left, time on right */\n.pin-card-meta {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.pin-sender {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.pin-avatar {\n  width: 20px;\n  height: 20px;\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}\n\n.pin-avatar i {\n  font-size: 10px;\n  color: var(--mj-brand-primary);\n}\n\n.pin-sender-name {\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n}\n\n.pin-time {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n}\n\n/* Preview text */\n.pin-preview {\n  margin: 0;\n  font-size: 13px;\n  line-height: 1.5;\n  color: var(--mj-text-primary);\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n/* Card action buttons */\n.pin-actions {\n  display: flex;\n  gap: 6px;\n  margin-top: 2px;\n}\n\n.pin-action-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 5px 10px;\n  border-radius: 5px;\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s;\n  border: 1px solid var(--mj-border-default);\n}\n\n.pin-action-btn i {\n  font-size: 11px;\n}\n\n.jump-btn {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n}\n\n.jump-btn:hover {\n  background: var(--mj-brand-primary-hover);\n  border-color: var(--mj-brand-primary-hover);\n}\n\n.unpin-btn {\n  background: transparent;\n  color: var(--mj-text-secondary);\n}\n\n.unpin-btn:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n  border-color: var(--mj-border-strong);\n}\n\n/* \u2500\u2500 Scrollbar styling \u2500\u2500 */\n.pins-body::-webkit-scrollbar { width: 4px; }\n.pins-body::-webkit-scrollbar-track { background: transparent; }\n.pins-body::-webkit-scrollbar-thumb {\n  background: var(--mj-border-strong);\n  border-radius: 2px;\n}\n"] }]
     }], null, { pinnedMessages: [{
             type: Input
         }], closed: [{

package/dist/lib/components/conversation/pinned-messages-panel.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"pinned-messages-panel.component.js","sourceRoot":"","sources":["../../../../src/lib/components/conversation/pinned-messages-panel.component.ts","../../../../src/lib/components/conversation/pinned-messages-panel.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, Input, Output, EventEmitter } from '@angular/core';\nimport { MJConversationDetailEntity } from '@memberjunction/core-entities';\n\n@Component({\n  standalone: false,\n  selector: 'mj-pinned-messages-panel',\n  templateUrl: './pinned-messages-panel.component.html',\n  styleUrls: ['./pinned-messages-panel.component.css']\n})\nexport class PinnedMessagesPanelComponent {\n  @Input() public pinnedMessages: MJConversationDetailEntity[] = [];\n\n  @Output() public closed = new EventEmitter<void>();\n  @Output() public jumpRequested = new EventEmitter<string>(); // emits messageId\n  @Output() public unpinRequested = new EventEmitter<MJConversationDetailEntity>();\n\n  /** IDs currently being removed (for fade-out animation) */\n  public unpinningIds = new Set<string>();\n\n  public Close(): void {\n    this.closed.emit();\n  }\n\n  public OnJump(message: MJConversationDetailEntity): void {\n    this.jumpRequested.emit(message.ID);\n  }\n\n  public OnUnpin(message: MJConversationDetailEntity): void {\n    this.unpinningIds.add(message.ID);\n    // Let the card animate out before the parent removes it from the list\n    setTimeout(() => {\n      this.unpinningIds.delete(message.ID);\n      this.unpinRequested.emit(message);\n    }, 200);\n  }\n\n  public IsUnpinning(message: MJConversationDetailEntity): boolean {\n    return this.unpinningIds.has(message.ID);\n  }\n\n  /** Strip markdown to plain prose for card preview */\n  public GetPreviewText(message: MJConversationDetailEntity): string {\n    const raw = message.Message || '';\n    const stripped = raw\n      .replace(/```[\\s\\S]*?```/g, '[code]')   // fenced code blocks\n      .replace(/`[^`]*`/g, '[code]')           // inline code\n      .replace(/#{1,6}\\s+/g, '')               // headings\n      .replace(/\\*\\*(.+?)\\*\\*/g, '$1')         // bold\n      .replace(/\\*(.+?)\\*/g, '$1')             // italic\n      .replace(/\\[([^\\]]+)\\]\\([^)]+\\)/g, '$1') // links\n      .replace(/!\\[([^\\]]*)\\]\\([^)]+\\)/g, '')  // images\n      .replace(/>\\s+/g, '')                    // blockquotes\n      .replace(/\\n+/g, ' ')                    // newlines → spaces\n      .trim();\n    return stripped.length > 200 ? stripped.substring(0, 197) + '…' : stripped;\n  }\n\n  /** Human-readable relative timestamp */\n  public GetRelativeTime(message: MJConversationDetailEntity): string {\n    const created = message.__mj_CreatedAt;\n    if (!created) return '';\n    const diffMs = Date.now() - new Date(created).getTime();\n    const mins = Math.floor(diffMs / 60_000);\n    const hours = Math.floor(diffMs / 3_600_000);\n    const days = Math.floor(diffMs / 86_400_000);\n    if (mins < 1) return 'just now';\n    if (mins < 60) return `${mins}m ago`;\n    if (hours < 24) return `${hours}h ago`;\n    if (days === 1) return 'Yesterday';\n    if (days < 7) return `${days} days ago`;\n    return new Date(created).toLocaleDateString(undefined, { month: 'short', day: 'numeric' });\n  }\n\n  /** Display name for the message sender */\n  public GetSenderName(message: MJConversationDetailEntity): string {\n    if (message.Role === 'User') return 'You';\n    return 'AI Response';\n  }\n}\n","<div class=\"pins-panel\">\n  <div class=\"pins-header\">\n    <div class=\"pins-title\">\n      <i class=\"fas fa-thumbtack\"></i>\n      <span>Pinned Messages</span>\n      <span class=\"pins-count\">{{ pinnedMessages.length }}</span>\n    </div>\n    <button class=\"pins-close-btn\" (click)=\"Close()\" title=\"Close\">\n      <i class=\"fas fa-times\"></i>\n    </button>\n  </div>\n\n  <div class=\"pins-body\">\n    @if (pinnedMessages.length === 0) {\n      <div class=\"pins-empty\">\n        <i class=\"fas fa-thumbtack\"></i>\n        <p>No pinned messages</p>\n      </div>\n    }\n\n    @for (message of pinnedMessages; track message.ID) {\n      <div class=\"pin-card\" [class.unpinning]=\"IsUnpinning(message)\">\n        <div class=\"pin-card-meta\">\n          <div class=\"pin-sender\">\n            <div class=\"pin-avatar\">\n              <i class=\"fas fa-robot\"></i>\n            </div>\n            <span class=\"pin-sender-name\">{{ GetSenderName(message) }}</span>\n          </div>\n          <span class=\"pin-time\">{{ GetRelativeTime(message) }}</span>\n        </div>\n\n        <p class=\"pin-preview\">{{ GetPreviewText(message) }}</p>\n\n        <div class=\"pin-actions\">\n          <button class=\"pin-action-btn jump-btn\" (click)=\"OnJump(message)\" title=\"Jump to message\">\n            <i class=\"fas fa-arrow-up-right-from-square\"></i>\n            Jump to message\n          </button>\n          <button class=\"pin-action-btn unpin-btn\" (click)=\"OnUnpin(message)\" title=\"Unpin this message\">\n            <i class=\"fas fa-thumbtack\"></i>\n            Unpin\n          </button>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n"]}
+{"version":3,"file":"pinned-messages-panel.component.js","sourceRoot":"","sources":["../../../../src/lib/components/conversation/pinned-messages-panel.component.ts","../../../../src/lib/components/conversation/pinned-messages-panel.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, Input, Output, EventEmitter } from '@angular/core';\nimport { MJConversationDetailEntity } from '@memberjunction/core-entities';\n\n@Component({\n  standalone: false,\n  selector: 'mj-pinned-messages-panel',\n  templateUrl: './pinned-messages-panel.component.html',\n  styleUrls: ['./pinned-messages-panel.component.css']\n})\nexport class PinnedMessagesPanelComponent {\n  @Input() public pinnedMessages: MJConversationDetailEntity[] = [];\n\n  @Output() public closed = new EventEmitter<void>();\n  @Output() public jumpRequested = new EventEmitter<string>(); // emits messageId\n  @Output() public unpinRequested = new EventEmitter<MJConversationDetailEntity>();\n\n  /** IDs currently being removed (for fade-out animation) */\n  public unpinningIds = new Set<string>();\n\n  public Close(): void {\n    this.closed.emit();\n  }\n\n  public OnJump(message: MJConversationDetailEntity): void {\n    this.jumpRequested.emit(message.ID);\n  }\n\n  public OnUnpin(message: MJConversationDetailEntity): void {\n    this.unpinningIds.add(message.ID);\n    // Let the card animate out before the parent removes it from the list\n    setTimeout(() => {\n      this.unpinningIds.delete(message.ID);\n      this.unpinRequested.emit(message);\n    }, 200);\n  }\n\n  public IsUnpinning(message: MJConversationDetailEntity): boolean {\n    return this.unpinningIds.has(message.ID);\n  }\n\n  /** Strip markdown to plain prose for card preview */\n  public GetPreviewText(message: MJConversationDetailEntity): string {\n    const raw = message.Message || '';\n    const stripped = raw\n      .replace(/```[\\s\\S]*?```/g, '[code]')   // fenced code blocks\n      .replace(/`[^`]*`/g, '[code]')           // inline code\n      .replace(/#{1,6}\\s+/g, '')               // headings\n      .replace(/\\*\\*(.+?)\\*\\*/g, '$1')         // bold\n      .replace(/\\*(.+?)\\*/g, '$1')             // italic\n      .replace(/\\[([^\\]]+)\\]\\([^)]+\\)/g, '$1') // links\n      .replace(/!\\[([^\\]]*)\\]\\([^)]+\\)/g, '')  // images\n      .replace(/>\\s+/g, '')                    // blockquotes\n      .replace(/\\n+/g, ' ')                    // newlines → spaces\n      .trim();\n    return stripped.length > 200 ? stripped.substring(0, 197) + '…' : stripped;\n  }\n\n  /** Human-readable relative timestamp */\n  public GetRelativeTime(message: MJConversationDetailEntity): string {\n    const created = message.__mj_CreatedAt;\n    if (!created) return '';\n    const diffMs = Date.now() - new Date(created).getTime();\n    const mins = Math.floor(diffMs / 60_000);\n    const hours = Math.floor(diffMs / 3_600_000);\n    const days = Math.floor(diffMs / 86_400_000);\n    if (mins < 1) return 'just now';\n    if (mins < 60) return `${mins}m ago`;\n    if (hours < 24) return `${hours}h ago`;\n    if (days === 1) return 'Yesterday';\n    if (days < 7) return `${days} days ago`;\n    return new Date(created).toLocaleDateString(undefined, { month: 'short', day: 'numeric' });\n  }\n\n  /** Display name for the message sender */\n  public GetSenderName(message: MJConversationDetailEntity): string {\n    if (message.Role === 'User') return 'You';\n    return 'AI Response';\n  }\n}\n","<div class=\"pins-panel\">\n  <div class=\"pins-header\">\n    <div class=\"pins-title\">\n      <i class=\"fas fa-thumbtack\"></i>\n      <span>Pinned Messages</span>\n      <span class=\"pins-count\">{{ pinnedMessages.length }}</span>\n    </div>\n    <button class=\"pins-close-btn\" (click)=\"Close()\" title=\"Close\">\n      <i class=\"fas fa-times\"></i>\n    </button>\n  </div>\n\n  <div class=\"pins-body\">\n    @if (pinnedMessages.length === 0) {\n      <mj-empty-state class=\"pins-empty\" Size=\"compact\"\n        Icon=\"fa-solid fa-thumbtack\"\n        Title=\"No pinned messages\" />\n    }\n\n    @for (message of pinnedMessages; track message.ID) {\n      <div class=\"pin-card\" [class.unpinning]=\"IsUnpinning(message)\">\n        <div class=\"pin-card-meta\">\n          <div class=\"pin-sender\">\n            <div class=\"pin-avatar\">\n              <i class=\"fas fa-robot\"></i>\n            </div>\n            <span class=\"pin-sender-name\">{{ GetSenderName(message) }}</span>\n          </div>\n          <span class=\"pin-time\">{{ GetRelativeTime(message) }}</span>\n        </div>\n\n        <p class=\"pin-preview\">{{ GetPreviewText(message) }}</p>\n\n        <div class=\"pin-actions\">\n          <button class=\"pin-action-btn jump-btn\" (click)=\"OnJump(message)\" title=\"Jump to message\">\n            <i class=\"fas fa-arrow-up-right-from-square\"></i>\n            Jump to message\n          </button>\n          <button class=\"pin-action-btn unpin-btn\" (click)=\"OnUnpin(message)\" title=\"Unpin this message\">\n            <i class=\"fas fa-thumbtack\"></i>\n            Unpin\n          </button>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n"]}

package/dist/lib/components/library/library-full-view.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"library-full-view.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/library/library-full-view.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,MAAM,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAW,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;;AAEnE;;;GAGG;AACH,qBAsRa,wBAAyB,SAAQ,oBAAqB,YAAW,MAAM;IACzE,aAAa,EAAG,MAAM,CAAC;IACvB,WAAW,EAAG,QAAQ,CAAC;IAEzB,WAAW,EAAE,kBAAkB,EAAE,CAAM;IACvC,mBAAmB,EAAE,kBAAkB,EAAE,CAAM;IAC/C,WAAW,EAAE,MAAM,CAAM;IACzB,SAAS,EAAE,OAAO,CAAS;IAC3B,WAAW,EAAE,KAAK,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAM;IACtD,mBAAmB,EAAE,MAAM,GAAG,IAAI,CAAQ;;IAKjD,QAAQ;IAIF,eAAe,IAAI,OAAO,CAAC,IAAI,CAAC;IA6BtC,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAInC,OAAO,CAAC,WAAW;IAYnB,cAAc,CAAC,UAAU,EAAE,kBAAkB,GAAG,IAAI;IAOpD,UAAU,CAAC,KAAK,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI;IAUrD,cAAc,IAAI,IAAI;IAOtB,OAAO,IAAI,IAAI;yCAvFJ,wBAAwB;2CAAxB,wBAAwB;CA0FpC"}
+{"version":3,"file":"library-full-view.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/library/library-full-view.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,MAAM,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAW,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;;AAEnE;;;GAGG;AACH,qBA+Qa,wBAAyB,SAAQ,oBAAqB,YAAW,MAAM;IACzE,aAAa,EAAG,MAAM,CAAC;IACvB,WAAW,EAAG,QAAQ,CAAC;IAEzB,WAAW,EAAE,kBAAkB,EAAE,CAAM;IACvC,mBAAmB,EAAE,kBAAkB,EAAE,CAAM;IAC/C,WAAW,EAAE,MAAM,CAAM;IACzB,SAAS,EAAE,OAAO,CAAS;IAC3B,WAAW,EAAE,KAAK,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAM;IACtD,mBAAmB,EAAE,MAAM,GAAG,IAAI,CAAQ;;IAKjD,QAAQ;IAIF,eAAe,IAAI,OAAO,CAAC,IAAI,CAAC;IA6BtC,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAInC,OAAO,CAAC,WAAW;IAYnB,cAAc,CAAC,UAAU,EAAE,kBAAkB,GAAG,IAAI;IAOpD,UAAU,CAAC,KAAK,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI;IAUrD,cAAc,IAAI,IAAI;IAOtB,OAAO,IAAI,IAAI;yCAvFJ,wBAAwB;2CAAxB,wBAAwB;CA0FpC"}

package/dist/lib/components/library/library-full-view.component.js

@@ -3,7 +3,8 @@ import { BaseAngularComponent } from '@memberjunction/ng-base-types';
 import { RunView } from '@memberjunction/core';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/forms";
-import * as i2 from "@memberjunction/ng-shared-generic";
+import * as i2 from "@memberjunction/ng-ui-components";
+import * as i3 from "@memberjunction/ng-shared-generic";
 function LibraryFullViewComponent_Conditional_7_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelement(0, "i", 17);
@@ -35,18 +36,13 @@ function LibraryFullViewComponent_Conditional_15_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵelementEnd();
 } }
 function LibraryFullViewComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 15);
-    i0.ɵɵelement(1, "i", 19);
-    i0.ɵɵelementStart(2, "p");
-    i0.ɵɵtext(3);
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(0, "mj-empty-state", 15);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(ctx_r2.searchQuery ? "No collections found" : "No collections yet");
+    i0.ɵɵproperty("Variant", ctx_r2.searchQuery ? "no-results" : "empty")("Title", ctx_r2.searchQuery ? "No collections found" : "No collections yet");
 } }
 function LibraryFullViewComponent_Conditional_17_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 26);
+    i0.ɵɵelementStart(0, "div", 25);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -56,15 +52,15 @@ function LibraryFullViewComponent_Conditional_17_For_2_Conditional_6_Template(rf
 } }
 function LibraryFullViewComponent_Conditional_17_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 21);
+    i0.ɵɵelementStart(0, "div", 20);
     i0.ɵɵlistener("click", function LibraryFullViewComponent_Conditional_17_For_2_Template_div_click_0_listener() { const collection_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.openCollection(collection_r7)); });
-    i0.ɵɵelementStart(1, "div", 22);
-    i0.ɵɵelement(2, "i", 23);
+    i0.ɵɵelementStart(1, "div", 21);
+    i0.ɵɵelement(2, "i", 22);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 24)(4, "div", 25);
+    i0.ɵɵelementStart(3, "div", 23)(4, "div", 24);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, LibraryFullViewComponent_Conditional_17_For_2_Conditional_6_Template, 2, 1, "div", 26);
+    i0.ɵɵconditionalCreate(6, LibraryFullViewComponent_Conditional_17_For_2_Conditional_6_Template, 2, 1, "div", 25);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const collection_r7 = ctx.$implicit;
@@ -75,7 +71,7 @@ function LibraryFullViewComponent_Conditional_17_For_2_Template(rf, ctx) { if (r
 } }
 function LibraryFullViewComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 16);
-    i0.ɵɵrepeaterCreate(1, LibraryFullViewComponent_Conditional_17_For_2_Template, 7, 2, "div", 20, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(1, LibraryFullViewComponent_Conditional_17_For_2_Template, 7, 2, "div", 19, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -164,7 +160,7 @@ export class LibraryFullViewComponent extends BaseAngularComponent {
         this.loadCollections();
     }
     static ɵfac = function LibraryFullViewComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LibraryFullViewComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LibraryFullViewComponent, selectors: [["mj-library-full-view"]], inputs: { environmentId: "environmentId", currentUser: "currentUser" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 18, vars: 5, consts: [[1, "collections-view"], [1, "collections-header"], [1, "collections-breadcrumb"], [1, "breadcrumb-item"], [1, "fas", "fa-home"], [1, "breadcrumb-link", 3, "click"], [1, "breadcrumb-path"], [1, "collections-search"], [1, "fas", "fa-search"], ["type", "text", "placeholder", "Search collections and artifacts...", 1, "library-search-input", 3, "ngModelChange", "ngModel"], [1, "collections-actions"], ["title", "Refresh", 1, "btn-secondary", 3, "click"], [1, "fas", "fa-sync"], [1, "collections-content"], [1, "loading-state"], [1, "empty-state"], [1, "library-folders"], [1, "fas", "fa-chevron-right", "breadcrumb-separator"], ["text", "Loading collections...", "size", "large"], [1, "fas", "fa-folder-open"], [1, "library-folder"], [1, "library-folder", 3, "click"], [1, "folder-icon"], [1, "fas", "fa-folder"], [1, "folder-info"], [1, "folder-name"], [1, "folder-meta"]], template: function LibraryFullViewComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LibraryFullViewComponent, selectors: [["mj-library-full-view"]], inputs: { environmentId: "environmentId", currentUser: "currentUser" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 18, vars: 5, consts: [[1, "collections-view"], [1, "collections-header"], [1, "collections-breadcrumb"], [1, "breadcrumb-item"], [1, "fas", "fa-home"], [1, "breadcrumb-link", 3, "click"], [1, "breadcrumb-path"], [1, "collections-search"], [1, "fas", "fa-search"], ["type", "text", "placeholder", "Search collections and artifacts...", 1, "library-search-input", 3, "ngModelChange", "ngModel"], [1, "collections-actions"], ["title", "Refresh", 1, "btn-secondary", 3, "click"], [1, "fas", "fa-sync"], [1, "collections-content"], [1, "loading-state"], ["Icon", "fa-solid fa-folder-open", 3, "Variant", "Title"], [1, "library-folders"], [1, "fas", "fa-chevron-right", "breadcrumb-separator"], ["text", "Loading collections...", "size", "large"], [1, "library-folder"], [1, "library-folder", 3, "click"], [1, "folder-icon"], [1, "fas", "fa-folder"], [1, "folder-info"], [1, "folder-name"], [1, "folder-meta"]], template: function LibraryFullViewComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3);
             i0.ɵɵelement(4, "i", 4);
             i0.ɵɵelementStart(5, "a", 5);
@@ -185,7 +181,7 @@ export class LibraryFullViewComponent extends BaseAngularComponent {
             i0.ɵɵelementEnd()()();
             i0.ɵɵelementStart(14, "div", 13);
             i0.ɵɵconditionalCreate(15, LibraryFullViewComponent_Conditional_15_Template, 2, 0, "div", 14);
-            i0.ɵɵconditionalCreate(16, LibraryFullViewComponent_Conditional_16_Template, 4, 1, "div", 15);
+            i0.ɵɵconditionalCreate(16, LibraryFullViewComponent_Conditional_16_Template, 1, 2, "mj-empty-state", 15);
             i0.ɵɵconditionalCreate(17, LibraryFullViewComponent_Conditional_17_Template, 3, 0, "div", 16);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
@@ -199,7 +195,7 @@ export class LibraryFullViewComponent extends BaseAngularComponent {
             i0.ɵɵconditional(!ctx.isLoading && ctx.filteredCollections.length === 0 ? 16 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(!ctx.isLoading && ctx.filteredCollections.length > 0 ? 17 : -1);
-        } }, dependencies: [i1.DefaultValueAccessor, i1.NgControlStatus, i1.NgModel, i2.LoadingComponent], styles: [".collections-view[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: white;\n    }\n\n    .collections-header[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      padding: 16px 24px;\n      border-bottom: 1px solid #E5E7EB;\n      gap: 16px;\n    }\n\n    .collections-breadcrumb[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      flex: 1;\n      min-width: 0;\n    }\n\n    .breadcrumb-item[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .breadcrumb-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: #6B7280;\n      font-size: 14px;\n    }\n\n    .breadcrumb-link[_ngcontent-%COMP%] {\n      color: #111827;\n      font-weight: 500;\n      cursor: pointer;\n      text-decoration: none;\n      white-space: nowrap;\n      transition: color 150ms ease;\n    }\n\n    .breadcrumb-link[_ngcontent-%COMP%]:hover {\n      color: #1e40af;\n    }\n\n    .breadcrumb-link.active[_ngcontent-%COMP%] {\n      color: #6B7280;\n      cursor: default;\n    }\n\n    .breadcrumb-path[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      overflow-x: auto;\n    }\n\n    .breadcrumb-separator[_ngcontent-%COMP%] {\n      color: #D1D5DB;\n      font-size: 10px;\n    }\n\n    .collections-search[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      background: #F9FAFB;\n      border: 1px solid #E5E7EB;\n      border-radius: 6px;\n      padding: 8px 12px;\n      min-width: 300px;\n    }\n\n    .collections-search[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: #9CA3AF;\n      font-size: 14px;\n    }\n\n    .library-search-input[_ngcontent-%COMP%] {\n      border: none;\n      background: transparent;\n      outline: none;\n      font-size: 14px;\n      flex: 1;\n      color: #111827;\n    }\n\n    .library-search-input[_ngcontent-%COMP%]::placeholder {\n      color: #9CA3AF;\n    }\n\n    .collections-actions[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 8px;\n    }\n\n    .btn-secondary[_ngcontent-%COMP%] {\n      padding: 8px 12px;\n      background: transparent;\n      border: 1px solid #E5E7EB;\n      border-radius: 6px;\n      cursor: pointer;\n      color: #6B7280;\n      transition: all 150ms ease;\n    }\n\n    .btn-secondary[_ngcontent-%COMP%]:hover {\n      background: #F9FAFB;\n      color: #111827;\n    }\n\n    .collections-content[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow-y: auto;\n      padding: 24px;\n    }\n\n    .loading-state[_ngcontent-%COMP%], .empty-state[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n      color: #9CA3AF;\n    }\n\n    .empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 48px;\n      margin-bottom: 16px;\n      opacity: 0.5;\n    }\n\n    .empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 14px;\n    }\n\n    .library-folders[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n      gap: 16px;\n    }\n\n    .library-folder[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: start;\n      gap: 16px;\n      padding: 20px;\n      background: white;\n      border: 1px solid #E5E7EB;\n      border-radius: 8px;\n      cursor: pointer;\n      transition: all 150ms ease;\n    }\n\n    .library-folder[_ngcontent-%COMP%]:hover {\n      border-color: #1e40af;\n      box-shadow: 0 2px 8px rgba(0,0,0,0.08);\n    }\n\n    .folder-icon[_ngcontent-%COMP%] {\n      width: 40px;\n      height: 40px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: #EFF6FF;\n      border-radius: 8px;\n      flex-shrink: 0;\n    }\n\n    .folder-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 20px;\n      color: #1e40af;\n    }\n\n    .folder-info[_ngcontent-%COMP%] {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .folder-name[_ngcontent-%COMP%] {\n      font-size: 15px;\n      font-weight: 500;\n      color: #111827;\n      margin-bottom: 4px;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .folder-meta[_ngcontent-%COMP%] {\n      font-size: 13px;\n      color: #6B7280;\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n    }"] });
+        } }, dependencies: [i1.DefaultValueAccessor, i1.NgControlStatus, i1.NgModel, i2.MJEmptyStateComponent, i3.LoadingComponent], styles: [".collections-view[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: white;\n    }\n\n    .collections-header[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      padding: 16px 24px;\n      border-bottom: 1px solid #E5E7EB;\n      gap: 16px;\n    }\n\n    .collections-breadcrumb[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      flex: 1;\n      min-width: 0;\n    }\n\n    .breadcrumb-item[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .breadcrumb-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: #6B7280;\n      font-size: 14px;\n    }\n\n    .breadcrumb-link[_ngcontent-%COMP%] {\n      color: #111827;\n      font-weight: 500;\n      cursor: pointer;\n      text-decoration: none;\n      white-space: nowrap;\n      transition: color 150ms ease;\n    }\n\n    .breadcrumb-link[_ngcontent-%COMP%]:hover {\n      color: #1e40af;\n    }\n\n    .breadcrumb-link.active[_ngcontent-%COMP%] {\n      color: #6B7280;\n      cursor: default;\n    }\n\n    .breadcrumb-path[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      overflow-x: auto;\n    }\n\n    .breadcrumb-separator[_ngcontent-%COMP%] {\n      color: #D1D5DB;\n      font-size: 10px;\n    }\n\n    .collections-search[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      background: #F9FAFB;\n      border: 1px solid #E5E7EB;\n      border-radius: 6px;\n      padding: 8px 12px;\n      min-width: 300px;\n    }\n\n    .collections-search[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: #9CA3AF;\n      font-size: 14px;\n    }\n\n    .library-search-input[_ngcontent-%COMP%] {\n      border: none;\n      background: transparent;\n      outline: none;\n      font-size: 14px;\n      flex: 1;\n      color: #111827;\n    }\n\n    .library-search-input[_ngcontent-%COMP%]::placeholder {\n      color: #9CA3AF;\n    }\n\n    .collections-actions[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 8px;\n    }\n\n    .btn-secondary[_ngcontent-%COMP%] {\n      padding: 8px 12px;\n      background: transparent;\n      border: 1px solid #E5E7EB;\n      border-radius: 6px;\n      cursor: pointer;\n      color: #6B7280;\n      transition: all 150ms ease;\n    }\n\n    .btn-secondary[_ngcontent-%COMP%]:hover {\n      background: #F9FAFB;\n      color: #111827;\n    }\n\n    .collections-content[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow-y: auto;\n      padding: 24px;\n    }\n\n    .loading-state[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n      color: #9CA3AF;\n    }\n\n    .collections-content[_ngcontent-%COMP%]   mj-empty-state[_ngcontent-%COMP%] {\n      height: 100%;\n    }\n\n    .library-folders[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n      gap: 16px;\n    }\n\n    .library-folder[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: start;\n      gap: 16px;\n      padding: 20px;\n      background: white;\n      border: 1px solid #E5E7EB;\n      border-radius: 8px;\n      cursor: pointer;\n      transition: all 150ms ease;\n    }\n\n    .library-folder[_ngcontent-%COMP%]:hover {\n      border-color: #1e40af;\n      box-shadow: 0 2px 8px rgba(0,0,0,0.08);\n    }\n\n    .folder-icon[_ngcontent-%COMP%] {\n      width: 40px;\n      height: 40px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: #EFF6FF;\n      border-radius: 8px;\n      flex-shrink: 0;\n    }\n\n    .folder-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 20px;\n      color: #1e40af;\n    }\n\n    .folder-info[_ngcontent-%COMP%] {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .folder-name[_ngcontent-%COMP%] {\n      font-size: 15px;\n      font-weight: 500;\n      color: #111827;\n      margin-bottom: 4px;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .folder-meta[_ngcontent-%COMP%] {\n      font-size: 13px;\n      color: #6B7280;\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LibraryFullViewComponent, [{
         type: Component,
@@ -245,10 +241,10 @@ export class LibraryFullViewComponent extends BaseAngularComponent {
           </div>
         }
         @if (!isLoading && filteredCollections.length === 0) {
-          <div class="empty-state">
-            <i class="fas fa-folder-open"></i>
-            <p>{{ searchQuery ? 'No collections found' : 'No collections yet' }}</p>
-          </div>
+          <mj-empty-state
+            [Variant]="searchQuery ? 'no-results' : 'empty'"
+            Icon="fa-solid fa-folder-open"
+            [Title]="searchQuery ? 'No collections found' : 'No collections yet'" />
         }
         @if (!isLoading && filteredCollections.length > 0) {
           <div class="library-folders">
@@ -273,11 +269,11 @@ export class LibraryFullViewComponent extends BaseAngularComponent {
         }
       </div>
     </div>
-    `, styles: ["\n    .collections-view {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: white;\n    }\n\n    .collections-header {\n      display: flex;\n      align-items: center;\n      padding: 16px 24px;\n      border-bottom: 1px solid #E5E7EB;\n      gap: 16px;\n    }\n\n    .collections-breadcrumb {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      flex: 1;\n      min-width: 0;\n    }\n\n    .breadcrumb-item {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .breadcrumb-item i {\n      color: #6B7280;\n      font-size: 14px;\n    }\n\n    .breadcrumb-link {\n      color: #111827;\n      font-weight: 500;\n      cursor: pointer;\n      text-decoration: none;\n      white-space: nowrap;\n      transition: color 150ms ease;\n    }\n\n    .breadcrumb-link:hover {\n      color: #1e40af;\n    }\n\n    .breadcrumb-link.active {\n      color: #6B7280;\n      cursor: default;\n    }\n\n    .breadcrumb-path {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      overflow-x: auto;\n    }\n\n    .breadcrumb-separator {\n      color: #D1D5DB;\n      font-size: 10px;\n    }\n\n    .collections-search {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      background: #F9FAFB;\n      border: 1px solid #E5E7EB;\n      border-radius: 6px;\n      padding: 8px 12px;\n      min-width: 300px;\n    }\n\n    .collections-search i {\n      color: #9CA3AF;\n      font-size: 14px;\n    }\n\n    .library-search-input {\n      border: none;\n      background: transparent;\n      outline: none;\n      font-size: 14px;\n      flex: 1;\n      color: #111827;\n    }\n\n    .library-search-input::placeholder {\n      color: #9CA3AF;\n    }\n\n    .collections-actions {\n      display: flex;\n      gap: 8px;\n    }\n\n    .btn-secondary {\n      padding: 8px 12px;\n      background: transparent;\n      border: 1px solid #E5E7EB;\n      border-radius: 6px;\n      cursor: pointer;\n      color: #6B7280;\n      transition: all 150ms ease;\n    }\n\n    .btn-secondary:hover {\n      background: #F9FAFB;\n      color: #111827;\n    }\n\n    .collections-content {\n      flex: 1;\n      overflow-y: auto;\n      padding: 24px;\n    }\n\n    .loading-state, .empty-state {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n      color: #9CA3AF;\n    }\n\n    .empty-state i {\n      font-size: 48px;\n      margin-bottom: 16px;\n      opacity: 0.5;\n    }\n\n    .empty-state p {\n      margin: 0;\n      font-size: 14px;\n    }\n\n    .library-folders {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n      gap: 16px;\n    }\n\n    .library-folder {\n      display: flex;\n      align-items: start;\n      gap: 16px;\n      padding: 20px;\n      background: white;\n      border: 1px solid #E5E7EB;\n      border-radius: 8px;\n      cursor: pointer;\n      transition: all 150ms ease;\n    }\n\n    .library-folder:hover {\n      border-color: #1e40af;\n      box-shadow: 0 2px 8px rgba(0,0,0,0.08);\n    }\n\n    .folder-icon {\n      width: 40px;\n      height: 40px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: #EFF6FF;\n      border-radius: 8px;\n      flex-shrink: 0;\n    }\n\n    .folder-icon i {\n      font-size: 20px;\n      color: #1e40af;\n    }\n\n    .folder-info {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .folder-name {\n      font-size: 15px;\n      font-weight: 500;\n      color: #111827;\n      margin-bottom: 4px;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .folder-meta {\n      font-size: 13px;\n      color: #6B7280;\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n    }\n  "] }]
+    `, styles: ["\n    .collections-view {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: white;\n    }\n\n    .collections-header {\n      display: flex;\n      align-items: center;\n      padding: 16px 24px;\n      border-bottom: 1px solid #E5E7EB;\n      gap: 16px;\n    }\n\n    .collections-breadcrumb {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      flex: 1;\n      min-width: 0;\n    }\n\n    .breadcrumb-item {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .breadcrumb-item i {\n      color: #6B7280;\n      font-size: 14px;\n    }\n\n    .breadcrumb-link {\n      color: #111827;\n      font-weight: 500;\n      cursor: pointer;\n      text-decoration: none;\n      white-space: nowrap;\n      transition: color 150ms ease;\n    }\n\n    .breadcrumb-link:hover {\n      color: #1e40af;\n    }\n\n    .breadcrumb-link.active {\n      color: #6B7280;\n      cursor: default;\n    }\n\n    .breadcrumb-path {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      overflow-x: auto;\n    }\n\n    .breadcrumb-separator {\n      color: #D1D5DB;\n      font-size: 10px;\n    }\n\n    .collections-search {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      background: #F9FAFB;\n      border: 1px solid #E5E7EB;\n      border-radius: 6px;\n      padding: 8px 12px;\n      min-width: 300px;\n    }\n\n    .collections-search i {\n      color: #9CA3AF;\n      font-size: 14px;\n    }\n\n    .library-search-input {\n      border: none;\n      background: transparent;\n      outline: none;\n      font-size: 14px;\n      flex: 1;\n      color: #111827;\n    }\n\n    .library-search-input::placeholder {\n      color: #9CA3AF;\n    }\n\n    .collections-actions {\n      display: flex;\n      gap: 8px;\n    }\n\n    .btn-secondary {\n      padding: 8px 12px;\n      background: transparent;\n      border: 1px solid #E5E7EB;\n      border-radius: 6px;\n      cursor: pointer;\n      color: #6B7280;\n      transition: all 150ms ease;\n    }\n\n    .btn-secondary:hover {\n      background: #F9FAFB;\n      color: #111827;\n    }\n\n    .collections-content {\n      flex: 1;\n      overflow-y: auto;\n      padding: 24px;\n    }\n\n    .loading-state {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n      color: #9CA3AF;\n    }\n\n    .collections-content mj-empty-state {\n      height: 100%;\n    }\n\n    .library-folders {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n      gap: 16px;\n    }\n\n    .library-folder {\n      display: flex;\n      align-items: start;\n      gap: 16px;\n      padding: 20px;\n      background: white;\n      border: 1px solid #E5E7EB;\n      border-radius: 8px;\n      cursor: pointer;\n      transition: all 150ms ease;\n    }\n\n    .library-folder:hover {\n      border-color: #1e40af;\n      box-shadow: 0 2px 8px rgba(0,0,0,0.08);\n    }\n\n    .folder-icon {\n      width: 40px;\n      height: 40px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: #EFF6FF;\n      border-radius: 8px;\n      flex-shrink: 0;\n    }\n\n    .folder-icon i {\n      font-size: 20px;\n      color: #1e40af;\n    }\n\n    .folder-info {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .folder-name {\n      font-size: 15px;\n      font-weight: 500;\n      color: #111827;\n      margin-bottom: 4px;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .folder-meta {\n      font-size: 13px;\n      color: #6B7280;\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n    }\n  "] }]
     }], () => [], { environmentId: [{
             type: Input
         }], currentUser: [{
             type: Input
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LibraryFullViewComponent, { className: "LibraryFullViewComponent", filePath: "src/lib/components/library/library-full-view.component.ts", lineNumber: 288 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LibraryFullViewComponent, { className: "LibraryFullViewComponent", filePath: "src/lib/components/library/library-full-view.component.ts", lineNumber: 281 }); })();
 //# sourceMappingURL=library-full-view.component.js.map

package/dist/lib/components/library/library-full-view.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"library-full-view.component.js","sourceRoot":"","sources":["../../../../src/lib/components/library/library-full-view.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, Input, OnInit } from '@angular/core';\nimport { BaseAngularComponent } from '@memberjunction/ng-base-types';\nimport { UserInfo, RunView } from '@memberjunction/core';\nimport { MJCollectionEntity } from '@memberjunction/core-entities';\n\n/**\n * Full-panel Collections view component\n * Replaces the main content area when Collections tab is selected\n */\n@Component({\n  standalone: false,\n  selector: 'mj-library-full-view',\n  template: `\n    <div class=\"collections-view\">\n      <div class=\"collections-header\">\n        <div class=\"collections-breadcrumb\">\n          <div class=\"breadcrumb-item\">\n            <i class=\"fas fa-home\"></i>\n            <a class=\"breadcrumb-link\" (click)=\"navigateToRoot()\">Collections</a>\n          </div>\n          @if (breadcrumbs.length > 0) {\n            <span class=\"breadcrumb-path\">\n              @for (crumb of breadcrumbs; track crumb; let last = $last) {\n                <i class=\"fas fa-chevron-right breadcrumb-separator\"></i>\n                <a class=\"breadcrumb-link\"\n                  [class.active]=\"last\"\n                  (click)=\"navigateTo(crumb)\">\n                  {{ crumb.name }}\n                </a>\n              }\n            </span>\n          }\n        </div>\n        <div class=\"collections-search\">\n          <i class=\"fas fa-search\"></i>\n          <input type=\"text\"\n            [(ngModel)]=\"searchQuery\"\n            (ngModelChange)=\"onSearchChange($event)\"\n            placeholder=\"Search collections and artifacts...\"\n            class=\"library-search-input\">\n        </div>\n        <div class=\"collections-actions\">\n          <button class=\"btn-secondary\" (click)=\"refresh()\" title=\"Refresh\">\n            <i class=\"fas fa-sync\"></i>\n          </button>\n        </div>\n      </div>\n      <div class=\"collections-content\">\n        @if (isLoading) {\n          <div class=\"loading-state\">\n            <mj-loading text=\"Loading collections...\" size=\"large\"></mj-loading>\n          </div>\n        }\n        @if (!isLoading && filteredCollections.length === 0) {\n          <div class=\"empty-state\">\n            <i class=\"fas fa-folder-open\"></i>\n            <p>{{ searchQuery ? 'No collections found' : 'No collections yet' }}</p>\n          </div>\n        }\n        @if (!isLoading && filteredCollections.length > 0) {\n          <div class=\"library-folders\">\n            @for (collection of filteredCollections; track collection) {\n              <div\n                class=\"library-folder\"\n                (click)=\"openCollection(collection)\">\n                <div class=\"folder-icon\">\n                  <i class=\"fas fa-folder\"></i>\n                </div>\n                <div class=\"folder-info\">\n                  <div class=\"folder-name\">{{ collection.Name }}</div>\n                  @if (collection.Description) {\n                    <div class=\"folder-meta\">\n                      {{ collection.Description }}\n                    </div>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n    `,\n  styles: [`\n    .collections-view {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: white;\n    }\n\n    .collections-header {\n      display: flex;\n      align-items: center;\n      padding: 16px 24px;\n      border-bottom: 1px solid #E5E7EB;\n      gap: 16px;\n    }\n\n    .collections-breadcrumb {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      flex: 1;\n      min-width: 0;\n    }\n\n    .breadcrumb-item {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .breadcrumb-item i {\n      color: #6B7280;\n      font-size: 14px;\n    }\n\n    .breadcrumb-link {\n      color: #111827;\n      font-weight: 500;\n      cursor: pointer;\n      text-decoration: none;\n      white-space: nowrap;\n      transition: color 150ms ease;\n    }\n\n    .breadcrumb-link:hover {\n      color: #1e40af;\n    }\n\n    .breadcrumb-link.active {\n      color: #6B7280;\n      cursor: default;\n    }\n\n    .breadcrumb-path {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      overflow-x: auto;\n    }\n\n    .breadcrumb-separator {\n      color: #D1D5DB;\n      font-size: 10px;\n    }\n\n    .collections-search {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      background: #F9FAFB;\n      border: 1px solid #E5E7EB;\n      border-radius: 6px;\n      padding: 8px 12px;\n      min-width: 300px;\n    }\n\n    .collections-search i {\n      color: #9CA3AF;\n      font-size: 14px;\n    }\n\n    .library-search-input {\n      border: none;\n      background: transparent;\n      outline: none;\n      font-size: 14px;\n      flex: 1;\n      color: #111827;\n    }\n\n    .library-search-input::placeholder {\n      color: #9CA3AF;\n    }\n\n    .collections-actions {\n      display: flex;\n      gap: 8px;\n    }\n\n    .btn-secondary {\n      padding: 8px 12px;\n      background: transparent;\n      border: 1px solid #E5E7EB;\n      border-radius: 6px;\n      cursor: pointer;\n      color: #6B7280;\n      transition: all 150ms ease;\n    }\n\n    .btn-secondary:hover {\n      background: #F9FAFB;\n      color: #111827;\n    }\n\n    .collections-content {\n      flex: 1;\n      overflow-y: auto;\n      padding: 24px;\n    }\n\n    .loading-state, .empty-state {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n      color: #9CA3AF;\n    }\n\n    .empty-state i {\n      font-size: 48px;\n      margin-bottom: 16px;\n      opacity: 0.5;\n    }\n\n    .empty-state p {\n      margin: 0;\n      font-size: 14px;\n    }\n\n    .library-folders {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n      gap: 16px;\n    }\n\n    .library-folder {\n      display: flex;\n      align-items: start;\n      gap: 16px;\n      padding: 20px;\n      background: white;\n      border: 1px solid #E5E7EB;\n      border-radius: 8px;\n      cursor: pointer;\n      transition: all 150ms ease;\n    }\n\n    .library-folder:hover {\n      border-color: #1e40af;\n      box-shadow: 0 2px 8px rgba(0,0,0,0.08);\n    }\n\n    .folder-icon {\n      width: 40px;\n      height: 40px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: #EFF6FF;\n      border-radius: 8px;\n      flex-shrink: 0;\n    }\n\n    .folder-icon i {\n      font-size: 20px;\n      color: #1e40af;\n    }\n\n    .folder-info {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .folder-name {\n      font-size: 15px;\n      font-weight: 500;\n      color: #111827;\n      margin-bottom: 4px;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .folder-meta {\n      font-size: 13px;\n      color: #6B7280;\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n    }\n  `]\n})\nexport class LibraryFullViewComponent extends BaseAngularComponent implements OnInit  {\n  @Input() environmentId!: string;\n  @Input() currentUser!: UserInfo;\n\n  public collections: MJCollectionEntity[] = [];\n  public filteredCollections: MJCollectionEntity[] = [];\n  public searchQuery: string = '';\n  public isLoading: boolean = false;\n  public breadcrumbs: Array<{ id: string; name: string }> = [];\n  public currentCollectionId: string | null = null;\n\n  constructor() {\n  super();}\n\n  ngOnInit() {\n    this.loadCollections();\n  }\n\n  async loadCollections(): Promise<void> {\n    this.isLoading = true;\n    try {\n      const rv = RunView.FromMetadataProvider(this.ProviderToUse);\n      const filter = `EnvironmentID='${this.environmentId}'` +\n                     (this.currentCollectionId ? ` AND ParentID='${this.currentCollectionId}'` : ' AND ParentID IS NULL');\n\n      const result = await rv.RunView<MJCollectionEntity>(\n        {\n          EntityName: 'MJ: Collections',\n          ExtraFilter: filter,\n          OrderBy: 'Name ASC',\n          MaxRows: 1000,\n          ResultType: 'entity_object'\n        },\n        this.currentUser\n      );\n\n      if (result.Success) {\n        this.collections = result.Results || [];\n        this.applySearch();\n      }\n    } catch (error) {\n      console.error('Failed to load collections:', error);\n    } finally {\n      this.isLoading = false;\n    }\n  }\n\n  onSearchChange(query: string): void {\n    this.applySearch();\n  }\n\n  private applySearch(): void {\n    if (!this.searchQuery.trim()) {\n      this.filteredCollections = [...this.collections];\n    } else {\n      const query = this.searchQuery.toLowerCase();\n      this.filteredCollections = this.collections.filter(c =>\n        c.Name.toLowerCase().includes(query) ||\n        (c.Description && c.Description.toLowerCase().includes(query))\n      );\n    }\n  }\n\n  openCollection(collection: MJCollectionEntity): void {\n    this.breadcrumbs.push({ id: collection.ID, name: collection.Name });\n    this.currentCollectionId = collection.ID;\n    this.searchQuery = '';\n    this.loadCollections();\n  }\n\n  navigateTo(crumb: { id: string; name: string }): void {\n    const index = this.breadcrumbs.findIndex(b => b.id === crumb.id);\n    if (index !== -1) {\n      this.breadcrumbs = this.breadcrumbs.slice(0, index + 1);\n      this.currentCollectionId = crumb.id;\n      this.searchQuery = '';\n      this.loadCollections();\n    }\n  }\n\n  navigateToRoot(): void {\n    this.breadcrumbs = [];\n    this.currentCollectionId = null;\n    this.searchQuery = '';\n    this.loadCollections();\n  }\n\n  refresh(): void {\n    this.loadCollections();\n  }\n}\n"]}
+{"version":3,"file":"library-full-view.component.js","sourceRoot":"","sources":["../../../../src/lib/components/library/library-full-view.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, Input, OnInit } from '@angular/core';\nimport { BaseAngularComponent } from '@memberjunction/ng-base-types';\nimport { UserInfo, RunView } from '@memberjunction/core';\nimport { MJCollectionEntity } from '@memberjunction/core-entities';\n\n/**\n * Full-panel Collections view component\n * Replaces the main content area when Collections tab is selected\n */\n@Component({\n  standalone: false,\n  selector: 'mj-library-full-view',\n  template: `\n    <div class=\"collections-view\">\n      <div class=\"collections-header\">\n        <div class=\"collections-breadcrumb\">\n          <div class=\"breadcrumb-item\">\n            <i class=\"fas fa-home\"></i>\n            <a class=\"breadcrumb-link\" (click)=\"navigateToRoot()\">Collections</a>\n          </div>\n          @if (breadcrumbs.length > 0) {\n            <span class=\"breadcrumb-path\">\n              @for (crumb of breadcrumbs; track crumb; let last = $last) {\n                <i class=\"fas fa-chevron-right breadcrumb-separator\"></i>\n                <a class=\"breadcrumb-link\"\n                  [class.active]=\"last\"\n                  (click)=\"navigateTo(crumb)\">\n                  {{ crumb.name }}\n                </a>\n              }\n            </span>\n          }\n        </div>\n        <div class=\"collections-search\">\n          <i class=\"fas fa-search\"></i>\n          <input type=\"text\"\n            [(ngModel)]=\"searchQuery\"\n            (ngModelChange)=\"onSearchChange($event)\"\n            placeholder=\"Search collections and artifacts...\"\n            class=\"library-search-input\">\n        </div>\n        <div class=\"collections-actions\">\n          <button class=\"btn-secondary\" (click)=\"refresh()\" title=\"Refresh\">\n            <i class=\"fas fa-sync\"></i>\n          </button>\n        </div>\n      </div>\n      <div class=\"collections-content\">\n        @if (isLoading) {\n          <div class=\"loading-state\">\n            <mj-loading text=\"Loading collections...\" size=\"large\"></mj-loading>\n          </div>\n        }\n        @if (!isLoading && filteredCollections.length === 0) {\n          <mj-empty-state\n            [Variant]=\"searchQuery ? 'no-results' : 'empty'\"\n            Icon=\"fa-solid fa-folder-open\"\n            [Title]=\"searchQuery ? 'No collections found' : 'No collections yet'\" />\n        }\n        @if (!isLoading && filteredCollections.length > 0) {\n          <div class=\"library-folders\">\n            @for (collection of filteredCollections; track collection) {\n              <div\n                class=\"library-folder\"\n                (click)=\"openCollection(collection)\">\n                <div class=\"folder-icon\">\n                  <i class=\"fas fa-folder\"></i>\n                </div>\n                <div class=\"folder-info\">\n                  <div class=\"folder-name\">{{ collection.Name }}</div>\n                  @if (collection.Description) {\n                    <div class=\"folder-meta\">\n                      {{ collection.Description }}\n                    </div>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n    `,\n  styles: [`\n    .collections-view {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: white;\n    }\n\n    .collections-header {\n      display: flex;\n      align-items: center;\n      padding: 16px 24px;\n      border-bottom: 1px solid #E5E7EB;\n      gap: 16px;\n    }\n\n    .collections-breadcrumb {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      flex: 1;\n      min-width: 0;\n    }\n\n    .breadcrumb-item {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .breadcrumb-item i {\n      color: #6B7280;\n      font-size: 14px;\n    }\n\n    .breadcrumb-link {\n      color: #111827;\n      font-weight: 500;\n      cursor: pointer;\n      text-decoration: none;\n      white-space: nowrap;\n      transition: color 150ms ease;\n    }\n\n    .breadcrumb-link:hover {\n      color: #1e40af;\n    }\n\n    .breadcrumb-link.active {\n      color: #6B7280;\n      cursor: default;\n    }\n\n    .breadcrumb-path {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      overflow-x: auto;\n    }\n\n    .breadcrumb-separator {\n      color: #D1D5DB;\n      font-size: 10px;\n    }\n\n    .collections-search {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      background: #F9FAFB;\n      border: 1px solid #E5E7EB;\n      border-radius: 6px;\n      padding: 8px 12px;\n      min-width: 300px;\n    }\n\n    .collections-search i {\n      color: #9CA3AF;\n      font-size: 14px;\n    }\n\n    .library-search-input {\n      border: none;\n      background: transparent;\n      outline: none;\n      font-size: 14px;\n      flex: 1;\n      color: #111827;\n    }\n\n    .library-search-input::placeholder {\n      color: #9CA3AF;\n    }\n\n    .collections-actions {\n      display: flex;\n      gap: 8px;\n    }\n\n    .btn-secondary {\n      padding: 8px 12px;\n      background: transparent;\n      border: 1px solid #E5E7EB;\n      border-radius: 6px;\n      cursor: pointer;\n      color: #6B7280;\n      transition: all 150ms ease;\n    }\n\n    .btn-secondary:hover {\n      background: #F9FAFB;\n      color: #111827;\n    }\n\n    .collections-content {\n      flex: 1;\n      overflow-y: auto;\n      padding: 24px;\n    }\n\n    .loading-state {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n      color: #9CA3AF;\n    }\n\n    .collections-content mj-empty-state {\n      height: 100%;\n    }\n\n    .library-folders {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n      gap: 16px;\n    }\n\n    .library-folder {\n      display: flex;\n      align-items: start;\n      gap: 16px;\n      padding: 20px;\n      background: white;\n      border: 1px solid #E5E7EB;\n      border-radius: 8px;\n      cursor: pointer;\n      transition: all 150ms ease;\n    }\n\n    .library-folder:hover {\n      border-color: #1e40af;\n      box-shadow: 0 2px 8px rgba(0,0,0,0.08);\n    }\n\n    .folder-icon {\n      width: 40px;\n      height: 40px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: #EFF6FF;\n      border-radius: 8px;\n      flex-shrink: 0;\n    }\n\n    .folder-icon i {\n      font-size: 20px;\n      color: #1e40af;\n    }\n\n    .folder-info {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .folder-name {\n      font-size: 15px;\n      font-weight: 500;\n      color: #111827;\n      margin-bottom: 4px;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .folder-meta {\n      font-size: 13px;\n      color: #6B7280;\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n    }\n  `]\n})\nexport class LibraryFullViewComponent extends BaseAngularComponent implements OnInit  {\n  @Input() environmentId!: string;\n  @Input() currentUser!: UserInfo;\n\n  public collections: MJCollectionEntity[] = [];\n  public filteredCollections: MJCollectionEntity[] = [];\n  public searchQuery: string = '';\n  public isLoading: boolean = false;\n  public breadcrumbs: Array<{ id: string; name: string }> = [];\n  public currentCollectionId: string | null = null;\n\n  constructor() {\n  super();}\n\n  ngOnInit() {\n    this.loadCollections();\n  }\n\n  async loadCollections(): Promise<void> {\n    this.isLoading = true;\n    try {\n      const rv = RunView.FromMetadataProvider(this.ProviderToUse);\n      const filter = `EnvironmentID='${this.environmentId}'` +\n                     (this.currentCollectionId ? ` AND ParentID='${this.currentCollectionId}'` : ' AND ParentID IS NULL');\n\n      const result = await rv.RunView<MJCollectionEntity>(\n        {\n          EntityName: 'MJ: Collections',\n          ExtraFilter: filter,\n          OrderBy: 'Name ASC',\n          MaxRows: 1000,\n          ResultType: 'entity_object'\n        },\n        this.currentUser\n      );\n\n      if (result.Success) {\n        this.collections = result.Results || [];\n        this.applySearch();\n      }\n    } catch (error) {\n      console.error('Failed to load collections:', error);\n    } finally {\n      this.isLoading = false;\n    }\n  }\n\n  onSearchChange(query: string): void {\n    this.applySearch();\n  }\n\n  private applySearch(): void {\n    if (!this.searchQuery.trim()) {\n      this.filteredCollections = [...this.collections];\n    } else {\n      const query = this.searchQuery.toLowerCase();\n      this.filteredCollections = this.collections.filter(c =>\n        c.Name.toLowerCase().includes(query) ||\n        (c.Description && c.Description.toLowerCase().includes(query))\n      );\n    }\n  }\n\n  openCollection(collection: MJCollectionEntity): void {\n    this.breadcrumbs.push({ id: collection.ID, name: collection.Name });\n    this.currentCollectionId = collection.ID;\n    this.searchQuery = '';\n    this.loadCollections();\n  }\n\n  navigateTo(crumb: { id: string; name: string }): void {\n    const index = this.breadcrumbs.findIndex(b => b.id === crumb.id);\n    if (index !== -1) {\n      this.breadcrumbs = this.breadcrumbs.slice(0, index + 1);\n      this.currentCollectionId = crumb.id;\n      this.searchQuery = '';\n      this.loadCollections();\n    }\n  }\n\n  navigateToRoot(): void {\n    this.breadcrumbs = [];\n    this.currentCollectionId = null;\n    this.searchQuery = '';\n    this.loadCollections();\n  }\n\n  refresh(): void {\n    this.loadCollections();\n  }\n}\n"]}

package/dist/lib/components/members/members-modal.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"members-modal.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/members/members-modal.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,YAAY,EAAiB,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAqB,MAAM,sBAAsB,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;;AAE9D,UAAU,kBAAkB;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAC;IACzB,OAAO,EAAE,IAAI,CAAC;CACf;AAED,qBAiOa,qBAAqB;IAsBpB,OAAO,CAAC,aAAa;IArBxB,SAAS,UAAS;IAClB,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC,WAAW,EAAG,QAAQ,CAAC;IACtB,SAAS,qBAA4B;IACrC,cAAc,qBAA4B;IAEpD,OAAO,EAAE,kBAAkB,EAAE,CAAM;IACnC,cAAc,SAAM;IACpB,aAAa,EAAE,QAAQ,GAAG,OAAO,CAAY;IAC7C,SAAS,UAAS;IAClB,YAAY,SAAM;IAElB,IAAI,UAAU,IAAI,MAAM,CAEvB;IAED,WAAW;;;QAGT;gBAEkB,aAAa,EAAE,aAAa;IAEhD,WAAW,IAAI,IAAI;YAML,WAAW;IA2BnB,WAAW,IAAI,OAAO,CAAC,IAAI,CAAC;IA0C5B,cAAc,CAAC,MAAM,EAAE,kBAAkB,GAAG,OAAO,CAAC,IAAI,CAAC;IAyB/D,QAAQ,IAAI,IAAI;IAKhB,OAAO,CAAC,SAAS;yCAjIN,qBAAqB;2CAArB,qBAAqB;CAuIjC"}
+{"version":3,"file":"members-modal.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/members/members-modal.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,YAAY,EAAiB,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAqB,MAAM,sBAAsB,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;;AAE9D,UAAU,kBAAkB;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAC;IACzB,OAAO,EAAE,IAAI,CAAC;CACf;AAED,qBAuNa,qBAAqB;IAsBpB,OAAO,CAAC,aAAa;IArBxB,SAAS,UAAS;IAClB,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC,WAAW,EAAG,QAAQ,CAAC;IACtB,SAAS,qBAA4B;IACrC,cAAc,qBAA4B;IAEpD,OAAO,EAAE,kBAAkB,EAAE,CAAM;IACnC,cAAc,SAAM;IACpB,aAAa,EAAE,QAAQ,GAAG,OAAO,CAAY;IAC7C,SAAS,UAAS;IAClB,YAAY,SAAM;IAElB,IAAI,UAAU,IAAI,MAAM,CAEvB;IAED,WAAW;;;QAGT;gBAEkB,aAAa,EAAE,aAAa;IAEhD,WAAW,IAAI,IAAI;YAML,WAAW;IA2BnB,WAAW,IAAI,OAAO,CAAC,IAAI,CAAC;IA0C5B,cAAc,CAAC,MAAM,EAAE,kBAAkB,GAAG,OAAO,CAAC,IAAI,CAAC;IAyB/D,QAAQ,IAAI,IAAI;IAKhB,OAAO,CAAC,SAAS;yCAjIN,qBAAqB;2CAArB,qBAAqB;CAuIjC"}

package/dist/lib/components/members/members-modal.component.js

@@ -16,9 +16,7 @@ function MembersModalComponent_Conditional_0_For_9_Template(rf, ctx) { if (rf &
     i0.ɵɵtextInterpolate(option_r3.label);
 } }
 function MembersModalComponent_Conditional_0_Conditional_15_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 14)(1, "p");
-    i0.ɵɵtext(2, "No additional members yet");
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(0, "mj-empty-state", 14);
 } }
 function MembersModalComponent_Conditional_0_Conditional_15_For_3_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
@@ -56,7 +54,7 @@ function MembersModalComponent_Conditional_0_Conditional_15_For_3_Template(rf, c
 } }
 function MembersModalComponent_Conditional_0_Conditional_15_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 10);
-    i0.ɵɵconditionalCreate(1, MembersModalComponent_Conditional_0_Conditional_15_Conditional_1_Template, 3, 0, "div", 14);
+    i0.ɵɵconditionalCreate(1, MembersModalComponent_Conditional_0_Conditional_15_Conditional_1_Template, 1, 0, "mj-empty-state", 14);
     i0.ɵɵrepeaterCreate(2, MembersModalComponent_Conditional_0_Conditional_15_For_3_Template, 12, 6, "div", 15, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -258,11 +256,11 @@ export class MembersModalComponent {
         this.isVisible = false;
     }
     static ɵfac = function MembersModalComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MembersModalComponent)(i0.ɵɵdirectiveInject(i1.DialogService)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MembersModalComponent, selectors: [["mj-members-modal"]], inputs: { isVisible: "isVisible", conversation: "conversation", currentUser: "currentUser" }, outputs: { cancelled: "cancelled", membersChanged: "membersChanged" }, standalone: false, features: [i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [[3, "Title", "Width", "Height", "Visible"], [3, "Close", "Title", "Width", "Height", "Visible"], [1, "members-modal-content"], [1, "add-member-section"], [1, "add-member-form"], ["type", "text", "placeholder", "Enter email address", 1, "mj-textbox", 2, "flex", "1", 3, "ngModelChange", "ngModel"], [1, "mj-select", 2, "width", "120px", 3, "ngModelChange", "ngModel"], [3, "value"], ["mjButton", "", "variant", "primary", 3, "click", "disabled"], [1, "members-section"], [1, "members-list"], [1, "loading-indicator"], [1, "error-message"], ["mjButton", "", 3, "click"], [1, "empty-state"], [1, "member-item"], [1, "member-info"], [1, "fas", "fa-user-circle"], [1, "member-details"], [1, "member-name"], [1, "member-email"], [1, "member-controls"], [1, "member-role"], ["title", "Remove member", 1, "btn-remove"], ["title", "Remove member", 1, "btn-remove", 3, "click"], [1, "fas", "fa-times"], ["text", "Loading members...", "size", "medium"]], template: function MembersModalComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MembersModalComponent, selectors: [["mj-members-modal"]], inputs: { isVisible: "isVisible", conversation: "conversation", currentUser: "currentUser" }, outputs: { cancelled: "cancelled", membersChanged: "membersChanged" }, standalone: false, features: [i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [[3, "Title", "Width", "Height", "Visible"], [3, "Close", "Title", "Width", "Height", "Visible"], [1, "members-modal-content"], [1, "add-member-section"], [1, "add-member-form"], ["type", "text", "placeholder", "Enter email address", 1, "mj-textbox", 2, "flex", "1", 3, "ngModelChange", "ngModel"], [1, "mj-select", 2, "width", "120px", 3, "ngModelChange", "ngModel"], [3, "value"], ["mjButton", "", "variant", "primary", 3, "click", "disabled"], [1, "members-section"], [1, "members-list"], [1, "loading-indicator"], [1, "error-message"], ["mjButton", "", 3, "click"], ["Icon", "fa-solid fa-user-group", "Title", "No additional members yet", "Size", "compact"], [1, "member-item"], [1, "member-info"], [1, "fas", "fa-user-circle"], [1, "member-details"], [1, "member-name"], [1, "member-email"], [1, "member-controls"], [1, "member-role"], ["title", "Remove member", 1, "btn-remove"], ["title", "Remove member", 1, "btn-remove", 3, "click"], [1, "fas", "fa-times"], ["text", "Loading members...", "size", "medium"]], template: function MembersModalComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, MembersModalComponent_Conditional_0_Template, 21, 11, "mj-dialog", 0);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.isVisible ? 0 : -1);
-        } }, dependencies: [i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.MJButtonDirective, i3.MJDialogComponent, i3.MJDialogActionsComponent, i4.LoadingComponent], styles: [".members-modal-content[_ngcontent-%COMP%] {\n      padding: 20px;\n    }\n\n    h4[_ngcontent-%COMP%] {\n      margin: 0 0 12px 0;\n      font-size: 14px;\n      font-weight: 600;\n    }\n\n    .add-member-section[_ngcontent-%COMP%] {\n      margin-bottom: 24px;\n    }\n\n    .add-member-form[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 8px;\n    }\n\n    .members-list[_ngcontent-%COMP%] {\n      border: 1px solid #d9d9d9;\n      border-radius: 4px;\n      max-height: 300px;\n      overflow-y: auto;\n    }\n\n    .member-item[_ngcontent-%COMP%] {\n      padding: 12px;\n      border-bottom: 1px solid #e8e8e8;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .member-item[_ngcontent-%COMP%]:last-child {\n      border-bottom: none;\n    }\n\n    .member-info[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      flex: 1;\n    }\n\n    .member-info[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 32px;\n      color: #999;\n    }\n\n    .member-details[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n    }\n\n    .member-name[_ngcontent-%COMP%] {\n      font-size: 14px;\n      font-weight: 500;\n    }\n\n    .member-email[_ngcontent-%COMP%] {\n      font-size: 12px;\n      color: #666;\n    }\n\n    .member-controls[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .member-role[_ngcontent-%COMP%] {\n      padding: 4px 8px;\n      border-radius: 3px;\n      font-size: 12px;\n      font-weight: 500;\n      background: #e3f2fd;\n      color: #1976d2;\n    }\n\n    .member-role.owner[_ngcontent-%COMP%] {\n      background: #fff3e0;\n      color: #f57c00;\n    }\n\n    .btn-remove[_ngcontent-%COMP%] {\n      padding: 6px 8px;\n      background: transparent;\n      border: none;\n      cursor: pointer;\n      border-radius: 3px;\n      color: #999;\n    }\n\n    .btn-remove[_ngcontent-%COMP%]:hover {\n      background: #ffebee;\n      color: #d32f2f;\n    }\n\n    .empty-state[_ngcontent-%COMP%] {\n      padding: 24px;\n      text-align: center;\n      color: #999;\n    }\n\n    .empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 13px;\n    }\n\n    .loading-indicator[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 10px;\n      padding: 24px;\n      color: #666;\n    }\n\n    .error-message[_ngcontent-%COMP%] {\n      display: block;\n      color: #d32f2f;\n      font-size: 13px;\n      margin-top: 12px;\n      padding: 8px 12px;\n      background: #ffebee;\n      border-radius: 4px;\n    }\n\n    mj-dialog-actions[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: flex-end;\n      padding: 15px 20px;\n      border-top: 1px solid #e0e0e0;\n    }"] });
+        } }, dependencies: [i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.MJButtonDirective, i3.MJDialogComponent, i3.MJDialogActionsComponent, i3.MJEmptyStateComponent, i4.LoadingComponent], styles: [".members-modal-content[_ngcontent-%COMP%] {\n      padding: 20px;\n    }\n\n    h4[_ngcontent-%COMP%] {\n      margin: 0 0 12px 0;\n      font-size: 14px;\n      font-weight: 600;\n    }\n\n    .add-member-section[_ngcontent-%COMP%] {\n      margin-bottom: 24px;\n    }\n\n    .add-member-form[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 8px;\n    }\n\n    .members-list[_ngcontent-%COMP%] {\n      border: 1px solid #d9d9d9;\n      border-radius: 4px;\n      max-height: 300px;\n      overflow-y: auto;\n    }\n\n    .member-item[_ngcontent-%COMP%] {\n      padding: 12px;\n      border-bottom: 1px solid #e8e8e8;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .member-item[_ngcontent-%COMP%]:last-child {\n      border-bottom: none;\n    }\n\n    .member-info[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      flex: 1;\n    }\n\n    .member-info[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 32px;\n      color: #999;\n    }\n\n    .member-details[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n    }\n\n    .member-name[_ngcontent-%COMP%] {\n      font-size: 14px;\n      font-weight: 500;\n    }\n\n    .member-email[_ngcontent-%COMP%] {\n      font-size: 12px;\n      color: #666;\n    }\n\n    .member-controls[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .member-role[_ngcontent-%COMP%] {\n      padding: 4px 8px;\n      border-radius: 3px;\n      font-size: 12px;\n      font-weight: 500;\n      background: #e3f2fd;\n      color: #1976d2;\n    }\n\n    .member-role.owner[_ngcontent-%COMP%] {\n      background: #fff3e0;\n      color: #f57c00;\n    }\n\n    .btn-remove[_ngcontent-%COMP%] {\n      padding: 6px 8px;\n      background: transparent;\n      border: none;\n      cursor: pointer;\n      border-radius: 3px;\n      color: #999;\n    }\n\n    .btn-remove[_ngcontent-%COMP%]:hover {\n      background: #ffebee;\n      color: #d32f2f;\n    }\n\n    .loading-indicator[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 10px;\n      padding: 24px;\n      color: #666;\n    }\n\n    .error-message[_ngcontent-%COMP%] {\n      display: block;\n      color: #d32f2f;\n      font-size: 13px;\n      margin-top: 12px;\n      padding: 8px 12px;\n      background: #ffebee;\n      border-radius: 4px;\n    }\n\n    mj-dialog-actions[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: flex-end;\n      padding: 15px 20px;\n      border-top: 1px solid #e0e0e0;\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MembersModalComponent, [{
         type: Component,
@@ -302,9 +300,10 @@ export class MembersModalComponent {
             @if (!isLoading) {
               <div class="members-list">
                 @if (members.length === 0) {
-                  <div class="empty-state">
-                    <p>No additional members yet</p>
-                  </div>
+                  <mj-empty-state
+                    Icon="fa-solid fa-user-group"
+                    Title="No additional members yet"
+                    Size="compact" />
                 }
                 @for (member of members; track member) {
                   <div class="member-item">
@@ -349,7 +348,7 @@ export class MembersModalComponent {
         </mj-dialog-actions>
       </mj-dialog>
     }
-    `, styles: ["\n    .members-modal-content {\n      padding: 20px;\n    }\n\n    h4 {\n      margin: 0 0 12px 0;\n      font-size: 14px;\n      font-weight: 600;\n    }\n\n    .add-member-section {\n      margin-bottom: 24px;\n    }\n\n    .add-member-form {\n      display: flex;\n      gap: 8px;\n    }\n\n    .members-list {\n      border: 1px solid #d9d9d9;\n      border-radius: 4px;\n      max-height: 300px;\n      overflow-y: auto;\n    }\n\n    .member-item {\n      padding: 12px;\n      border-bottom: 1px solid #e8e8e8;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .member-item:last-child {\n      border-bottom: none;\n    }\n\n    .member-info {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      flex: 1;\n    }\n\n    .member-info i {\n      font-size: 32px;\n      color: #999;\n    }\n\n    .member-details {\n      display: flex;\n      flex-direction: column;\n    }\n\n    .member-name {\n      font-size: 14px;\n      font-weight: 500;\n    }\n\n    .member-email {\n      font-size: 12px;\n      color: #666;\n    }\n\n    .member-controls {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .member-role {\n      padding: 4px 8px;\n      border-radius: 3px;\n      font-size: 12px;\n      font-weight: 500;\n      background: #e3f2fd;\n      color: #1976d2;\n    }\n\n    .member-role.owner {\n      background: #fff3e0;\n      color: #f57c00;\n    }\n\n    .btn-remove {\n      padding: 6px 8px;\n      background: transparent;\n      border: none;\n      cursor: pointer;\n      border-radius: 3px;\n      color: #999;\n    }\n\n    .btn-remove:hover {\n      background: #ffebee;\n      color: #d32f2f;\n    }\n\n    .empty-state {\n      padding: 24px;\n      text-align: center;\n      color: #999;\n    }\n\n    .empty-state p {\n      margin: 0;\n      font-size: 13px;\n    }\n\n    .loading-indicator {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 10px;\n      padding: 24px;\n      color: #666;\n    }\n\n    .error-message {\n      display: block;\n      color: #d32f2f;\n      font-size: 13px;\n      margin-top: 12px;\n      padding: 8px 12px;\n      background: #ffebee;\n      border-radius: 4px;\n    }\n\n    mj-dialog-actions {\n      display: flex;\n      justify-content: flex-end;\n      padding: 15px 20px;\n      border-top: 1px solid #e0e0e0;\n    }\n  "] }]
+    `, styles: ["\n    .members-modal-content {\n      padding: 20px;\n    }\n\n    h4 {\n      margin: 0 0 12px 0;\n      font-size: 14px;\n      font-weight: 600;\n    }\n\n    .add-member-section {\n      margin-bottom: 24px;\n    }\n\n    .add-member-form {\n      display: flex;\n      gap: 8px;\n    }\n\n    .members-list {\n      border: 1px solid #d9d9d9;\n      border-radius: 4px;\n      max-height: 300px;\n      overflow-y: auto;\n    }\n\n    .member-item {\n      padding: 12px;\n      border-bottom: 1px solid #e8e8e8;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .member-item:last-child {\n      border-bottom: none;\n    }\n\n    .member-info {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      flex: 1;\n    }\n\n    .member-info i {\n      font-size: 32px;\n      color: #999;\n    }\n\n    .member-details {\n      display: flex;\n      flex-direction: column;\n    }\n\n    .member-name {\n      font-size: 14px;\n      font-weight: 500;\n    }\n\n    .member-email {\n      font-size: 12px;\n      color: #666;\n    }\n\n    .member-controls {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .member-role {\n      padding: 4px 8px;\n      border-radius: 3px;\n      font-size: 12px;\n      font-weight: 500;\n      background: #e3f2fd;\n      color: #1976d2;\n    }\n\n    .member-role.owner {\n      background: #fff3e0;\n      color: #f57c00;\n    }\n\n    .btn-remove {\n      padding: 6px 8px;\n      background: transparent;\n      border: none;\n      cursor: pointer;\n      border-radius: 3px;\n      color: #999;\n    }\n\n    .btn-remove:hover {\n      background: #ffebee;\n      color: #d32f2f;\n    }\n\n    .loading-indicator {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 10px;\n      padding: 24px;\n      color: #666;\n    }\n\n    .error-message {\n      display: block;\n      color: #d32f2f;\n      font-size: 13px;\n      margin-top: 12px;\n      padding: 8px 12px;\n      background: #ffebee;\n      border-radius: 4px;\n    }\n\n    mj-dialog-actions {\n      display: flex;\n      justify-content: flex-end;\n      padding: 15px 20px;\n      border-top: 1px solid #e0e0e0;\n    }\n  "] }]
     }], () => [{ type: i1.DialogService }], { isVisible: [{
             type: Input
         }], conversation: [{
@@ -361,5 +360,5 @@ export class MembersModalComponent {
         }], membersChanged: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MembersModalComponent, { className: "MembersModalComponent", filePath: "src/lib/components/members/members-modal.component.ts", lineNumber: 240 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MembersModalComponent, { className: "MembersModalComponent", filePath: "src/lib/components/members/members-modal.component.ts", lineNumber: 230 }); })();
 //# sourceMappingURL=members-modal.component.js.map

package/dist/lib/components/members/members-modal.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"members-modal.component.js","sourceRoot":"","sources":["../../../../src/lib/components/members/members-modal.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, EventEmitter, Input, Output } from '@angular/core';\nimport { MJConversationEntity } from '@memberjunction/core-entities';\nimport { UserInfo, RunView, Metadata } from '@memberjunction/core';\nimport { DialogService } from '../../services/dialog.service';\n\ninterface ConversationMember {\n  id: string;\n  userId: string;\n  userName: string;\n  userEmail: string;\n  role: 'owner' | 'member';\n  addedAt: Date;\n}\n\n@Component({\n  standalone: false,\n  selector: 'mj-members-modal',\n  template: `\n    @if (isVisible) {\n      <mj-dialog\n        [Title]=\"modalTitle\"\n        [Width]=\"600\"\n        [Height]=\"500\"\n        [Visible]=\"true\"\n        (Close)=\"onCancel()\">\n        <div class=\"members-modal-content\">\n          <div class=\"add-member-section\">\n            <h4>Add Member</h4>\n            <div class=\"add-member-form\">\n              <input\n                type=\"text\"\n                [(ngModel)]=\"newMemberEmail\"\n                placeholder=\"Enter email address\"\n                class=\"mj-textbox\"\n                style=\"flex: 1;\">\n              <select\n                [(ngModel)]=\"newMemberRole\"\n                class=\"mj-select\"\n                style=\"width: 120px;\">\n                @for (option of roleOptions; track option.value) {\n                  <option [value]=\"option.value\">{{ option.label }}</option>\n                }\n              </select>\n              <button mjButton variant=\"primary\" [disabled]=\"isLoading\" (click)=\"onAddMember()\">\n                Add\n              </button>\n            </div>\n          </div>\n          <div class=\"members-section\">\n            <h4>Current Members ({{ members.length }})</h4>\n            @if (!isLoading) {\n              <div class=\"members-list\">\n                @if (members.length === 0) {\n                  <div class=\"empty-state\">\n                    <p>No additional members yet</p>\n                  </div>\n                }\n                @for (member of members; track member) {\n                  <div class=\"member-item\">\n                    <div class=\"member-info\">\n                      <i class=\"fas fa-user-circle\"></i>\n                      <div class=\"member-details\">\n                        <div class=\"member-name\">{{ member.userName }}</div>\n                        <div class=\"member-email\">{{ member.userEmail }}</div>\n                      </div>\n                    </div>\n                    <div class=\"member-controls\">\n                      <span class=\"member-role\" [class.owner]=\"member.role === 'owner'\">\n                        {{ member.role === 'owner' ? 'Owner' : 'Member' }}\n                      </span>\n                      @if (member.role !== 'owner') {\n                        <button\n                          class=\"btn-remove\"\n                          (click)=\"onRemoveMember(member)\"\n                          title=\"Remove member\">\n                          <i class=\"fas fa-times\"></i>\n                        </button>\n                      }\n                    </div>\n                  </div>\n                }\n              </div>\n            }\n            @if (isLoading) {\n              <div class=\"loading-indicator\">\n                <mj-loading text=\"Loading members...\" size=\"medium\"></mj-loading>\n              </div>\n            }\n          </div>\n          @if (errorMessage) {\n            <div class=\"error-message\">\n              {{ errorMessage }}\n            </div>\n          }\n        </div>\n        <mj-dialog-actions>\n          <button mjButton (click)=\"onCancel()\">Close</button>\n        </mj-dialog-actions>\n      </mj-dialog>\n    }\n    `,\n  styles: [`\n    .members-modal-content {\n      padding: 20px;\n    }\n\n    h4 {\n      margin: 0 0 12px 0;\n      font-size: 14px;\n      font-weight: 600;\n    }\n\n    .add-member-section {\n      margin-bottom: 24px;\n    }\n\n    .add-member-form {\n      display: flex;\n      gap: 8px;\n    }\n\n    .members-list {\n      border: 1px solid #d9d9d9;\n      border-radius: 4px;\n      max-height: 300px;\n      overflow-y: auto;\n    }\n\n    .member-item {\n      padding: 12px;\n      border-bottom: 1px solid #e8e8e8;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .member-item:last-child {\n      border-bottom: none;\n    }\n\n    .member-info {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      flex: 1;\n    }\n\n    .member-info i {\n      font-size: 32px;\n      color: #999;\n    }\n\n    .member-details {\n      display: flex;\n      flex-direction: column;\n    }\n\n    .member-name {\n      font-size: 14px;\n      font-weight: 500;\n    }\n\n    .member-email {\n      font-size: 12px;\n      color: #666;\n    }\n\n    .member-controls {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .member-role {\n      padding: 4px 8px;\n      border-radius: 3px;\n      font-size: 12px;\n      font-weight: 500;\n      background: #e3f2fd;\n      color: #1976d2;\n    }\n\n    .member-role.owner {\n      background: #fff3e0;\n      color: #f57c00;\n    }\n\n    .btn-remove {\n      padding: 6px 8px;\n      background: transparent;\n      border: none;\n      cursor: pointer;\n      border-radius: 3px;\n      color: #999;\n    }\n\n    .btn-remove:hover {\n      background: #ffebee;\n      color: #d32f2f;\n    }\n\n    .empty-state {\n      padding: 24px;\n      text-align: center;\n      color: #999;\n    }\n\n    .empty-state p {\n      margin: 0;\n      font-size: 13px;\n    }\n\n    .loading-indicator {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 10px;\n      padding: 24px;\n      color: #666;\n    }\n\n    .error-message {\n      display: block;\n      color: #d32f2f;\n      font-size: 13px;\n      margin-top: 12px;\n      padding: 8px 12px;\n      background: #ffebee;\n      border-radius: 4px;\n    }\n\n    mj-dialog-actions {\n      display: flex;\n      justify-content: flex-end;\n      padding: 15px 20px;\n      border-top: 1px solid #e0e0e0;\n    }\n  `]\n})\nexport class MembersModalComponent {\n  @Input() isVisible = false;\n  @Input() conversation?: MJConversationEntity;\n  @Input() currentUser!: UserInfo;\n  @Output() cancelled = new EventEmitter<void>();\n  @Output() membersChanged = new EventEmitter<void>();\n\n  members: ConversationMember[] = [];\n  newMemberEmail = '';\n  newMemberRole: 'member' | 'owner' = 'member';\n  isLoading = false;\n  errorMessage = '';\n\n  get modalTitle(): string {\n    return `Manage Members: ${this.conversation?.Name || 'Conversation'}`;\n  }\n\n  roleOptions = [\n    { value: 'member', label: 'Member' },\n    { value: 'owner', label: 'Owner' }\n  ];\n\n  constructor(private dialogService: DialogService) {}\n\n  ngOnChanges(): void {\n    if (this.isVisible && this.conversation) {\n      this.loadMembers();\n    }\n  }\n\n  private async loadMembers(): Promise<void> {\n    if (!this.conversation) return;\n\n    this.isLoading = true;\n    this.errorMessage = '';\n\n    try {\n      // TODO: Load from ConversationMembers entity when available\n      // For now, show the owner\n      this.members = [\n        {\n          id: 'owner-' + this.conversation.ID,\n          userId: this.conversation.UserID || '',\n          userName: 'Owner',\n          userEmail: this.currentUser.Email,\n          role: 'owner',\n          addedAt: this.conversation.__mj_CreatedAt\n        }\n      ];\n    } catch (error) {\n      console.error('Error loading members:', error);\n      this.errorMessage = 'Failed to load members';\n    } finally {\n      this.isLoading = false;\n    }\n  }\n\n  async onAddMember(): Promise<void> {\n    const email = this.newMemberEmail.trim();\n    if (!email) return;\n\n    // Simple email validation\n    if (!/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(email)) {\n      await this.dialogService.alert('Invalid Email', 'Please enter a valid email address');\n      return;\n    }\n\n    // Check if already a member\n    if (this.members.some(m => m.userEmail === email)) {\n      await this.dialogService.alert('Already a Member', 'This user is already a member');\n      return;\n    }\n\n    this.isLoading = true;\n    this.errorMessage = '';\n\n    try {\n      // TODO: Create ConversationMember entity when available\n      const newMember: ConversationMember = {\n        id: 'temp-' + Date.now(),\n        userId: 'unknown',\n        userName: email.split('@')[0],\n        userEmail: email,\n        role: this.newMemberRole,\n        addedAt: new Date()\n      };\n\n      this.members.push(newMember);\n      this.newMemberEmail = '';\n      this.newMemberRole = 'member';\n      this.membersChanged.emit();\n    } catch (error) {\n      console.error('Error adding member:', error);\n      this.errorMessage = 'Failed to add member';\n    } finally {\n      this.isLoading = false;\n    }\n  }\n\n  async onRemoveMember(member: ConversationMember): Promise<void> {\n    const confirmed = await this.dialogService.confirm({\n      title: 'Remove Member',\n      message: `Remove ${member.userEmail} from this conversation?`,\n      okText: 'Remove',\n      cancelText: 'Cancel'\n    });\n\n    if (!confirmed) return;\n\n    this.isLoading = true;\n    this.errorMessage = '';\n\n    try {\n      // TODO: Delete ConversationMember entity when available\n      this.members = this.members.filter(m => m.id !== member.id);\n      this.membersChanged.emit();\n    } catch (error) {\n      console.error('Error removing member:', error);\n      this.errorMessage = 'Failed to remove member';\n    } finally {\n      this.isLoading = false;\n    }\n  }\n\n  onCancel(): void {\n    this.cancelled.emit();\n    this.resetForm();\n  }\n\n  private resetForm(): void {\n    this.newMemberEmail = '';\n    this.newMemberRole = 'member';\n    this.errorMessage = '';\n    this.isVisible = false;\n  }\n}\n"]}
+{"version":3,"file":"members-modal.component.js","sourceRoot":"","sources":["../../../../src/lib/components/members/members-modal.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, EventEmitter, Input, Output } from '@angular/core';\nimport { MJConversationEntity } from '@memberjunction/core-entities';\nimport { UserInfo, RunView, Metadata } from '@memberjunction/core';\nimport { DialogService } from '../../services/dialog.service';\n\ninterface ConversationMember {\n  id: string;\n  userId: string;\n  userName: string;\n  userEmail: string;\n  role: 'owner' | 'member';\n  addedAt: Date;\n}\n\n@Component({\n  standalone: false,\n  selector: 'mj-members-modal',\n  template: `\n    @if (isVisible) {\n      <mj-dialog\n        [Title]=\"modalTitle\"\n        [Width]=\"600\"\n        [Height]=\"500\"\n        [Visible]=\"true\"\n        (Close)=\"onCancel()\">\n        <div class=\"members-modal-content\">\n          <div class=\"add-member-section\">\n            <h4>Add Member</h4>\n            <div class=\"add-member-form\">\n              <input\n                type=\"text\"\n                [(ngModel)]=\"newMemberEmail\"\n                placeholder=\"Enter email address\"\n                class=\"mj-textbox\"\n                style=\"flex: 1;\">\n              <select\n                [(ngModel)]=\"newMemberRole\"\n                class=\"mj-select\"\n                style=\"width: 120px;\">\n                @for (option of roleOptions; track option.value) {\n                  <option [value]=\"option.value\">{{ option.label }}</option>\n                }\n              </select>\n              <button mjButton variant=\"primary\" [disabled]=\"isLoading\" (click)=\"onAddMember()\">\n                Add\n              </button>\n            </div>\n          </div>\n          <div class=\"members-section\">\n            <h4>Current Members ({{ members.length }})</h4>\n            @if (!isLoading) {\n              <div class=\"members-list\">\n                @if (members.length === 0) {\n                  <mj-empty-state\n                    Icon=\"fa-solid fa-user-group\"\n                    Title=\"No additional members yet\"\n                    Size=\"compact\" />\n                }\n                @for (member of members; track member) {\n                  <div class=\"member-item\">\n                    <div class=\"member-info\">\n                      <i class=\"fas fa-user-circle\"></i>\n                      <div class=\"member-details\">\n                        <div class=\"member-name\">{{ member.userName }}</div>\n                        <div class=\"member-email\">{{ member.userEmail }}</div>\n                      </div>\n                    </div>\n                    <div class=\"member-controls\">\n                      <span class=\"member-role\" [class.owner]=\"member.role === 'owner'\">\n                        {{ member.role === 'owner' ? 'Owner' : 'Member' }}\n                      </span>\n                      @if (member.role !== 'owner') {\n                        <button\n                          class=\"btn-remove\"\n                          (click)=\"onRemoveMember(member)\"\n                          title=\"Remove member\">\n                          <i class=\"fas fa-times\"></i>\n                        </button>\n                      }\n                    </div>\n                  </div>\n                }\n              </div>\n            }\n            @if (isLoading) {\n              <div class=\"loading-indicator\">\n                <mj-loading text=\"Loading members...\" size=\"medium\"></mj-loading>\n              </div>\n            }\n          </div>\n          @if (errorMessage) {\n            <div class=\"error-message\">\n              {{ errorMessage }}\n            </div>\n          }\n        </div>\n        <mj-dialog-actions>\n          <button mjButton (click)=\"onCancel()\">Close</button>\n        </mj-dialog-actions>\n      </mj-dialog>\n    }\n    `,\n  styles: [`\n    .members-modal-content {\n      padding: 20px;\n    }\n\n    h4 {\n      margin: 0 0 12px 0;\n      font-size: 14px;\n      font-weight: 600;\n    }\n\n    .add-member-section {\n      margin-bottom: 24px;\n    }\n\n    .add-member-form {\n      display: flex;\n      gap: 8px;\n    }\n\n    .members-list {\n      border: 1px solid #d9d9d9;\n      border-radius: 4px;\n      max-height: 300px;\n      overflow-y: auto;\n    }\n\n    .member-item {\n      padding: 12px;\n      border-bottom: 1px solid #e8e8e8;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .member-item:last-child {\n      border-bottom: none;\n    }\n\n    .member-info {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      flex: 1;\n    }\n\n    .member-info i {\n      font-size: 32px;\n      color: #999;\n    }\n\n    .member-details {\n      display: flex;\n      flex-direction: column;\n    }\n\n    .member-name {\n      font-size: 14px;\n      font-weight: 500;\n    }\n\n    .member-email {\n      font-size: 12px;\n      color: #666;\n    }\n\n    .member-controls {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .member-role {\n      padding: 4px 8px;\n      border-radius: 3px;\n      font-size: 12px;\n      font-weight: 500;\n      background: #e3f2fd;\n      color: #1976d2;\n    }\n\n    .member-role.owner {\n      background: #fff3e0;\n      color: #f57c00;\n    }\n\n    .btn-remove {\n      padding: 6px 8px;\n      background: transparent;\n      border: none;\n      cursor: pointer;\n      border-radius: 3px;\n      color: #999;\n    }\n\n    .btn-remove:hover {\n      background: #ffebee;\n      color: #d32f2f;\n    }\n\n    .loading-indicator {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 10px;\n      padding: 24px;\n      color: #666;\n    }\n\n    .error-message {\n      display: block;\n      color: #d32f2f;\n      font-size: 13px;\n      margin-top: 12px;\n      padding: 8px 12px;\n      background: #ffebee;\n      border-radius: 4px;\n    }\n\n    mj-dialog-actions {\n      display: flex;\n      justify-content: flex-end;\n      padding: 15px 20px;\n      border-top: 1px solid #e0e0e0;\n    }\n  `]\n})\nexport class MembersModalComponent {\n  @Input() isVisible = false;\n  @Input() conversation?: MJConversationEntity;\n  @Input() currentUser!: UserInfo;\n  @Output() cancelled = new EventEmitter<void>();\n  @Output() membersChanged = new EventEmitter<void>();\n\n  members: ConversationMember[] = [];\n  newMemberEmail = '';\n  newMemberRole: 'member' | 'owner' = 'member';\n  isLoading = false;\n  errorMessage = '';\n\n  get modalTitle(): string {\n    return `Manage Members: ${this.conversation?.Name || 'Conversation'}`;\n  }\n\n  roleOptions = [\n    { value: 'member', label: 'Member' },\n    { value: 'owner', label: 'Owner' }\n  ];\n\n  constructor(private dialogService: DialogService) {}\n\n  ngOnChanges(): void {\n    if (this.isVisible && this.conversation) {\n      this.loadMembers();\n    }\n  }\n\n  private async loadMembers(): Promise<void> {\n    if (!this.conversation) return;\n\n    this.isLoading = true;\n    this.errorMessage = '';\n\n    try {\n      // TODO: Load from ConversationMembers entity when available\n      // For now, show the owner\n      this.members = [\n        {\n          id: 'owner-' + this.conversation.ID,\n          userId: this.conversation.UserID || '',\n          userName: 'Owner',\n          userEmail: this.currentUser.Email,\n          role: 'owner',\n          addedAt: this.conversation.__mj_CreatedAt\n        }\n      ];\n    } catch (error) {\n      console.error('Error loading members:', error);\n      this.errorMessage = 'Failed to load members';\n    } finally {\n      this.isLoading = false;\n    }\n  }\n\n  async onAddMember(): Promise<void> {\n    const email = this.newMemberEmail.trim();\n    if (!email) return;\n\n    // Simple email validation\n    if (!/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(email)) {\n      await this.dialogService.alert('Invalid Email', 'Please enter a valid email address');\n      return;\n    }\n\n    // Check if already a member\n    if (this.members.some(m => m.userEmail === email)) {\n      await this.dialogService.alert('Already a Member', 'This user is already a member');\n      return;\n    }\n\n    this.isLoading = true;\n    this.errorMessage = '';\n\n    try {\n      // TODO: Create ConversationMember entity when available\n      const newMember: ConversationMember = {\n        id: 'temp-' + Date.now(),\n        userId: 'unknown',\n        userName: email.split('@')[0],\n        userEmail: email,\n        role: this.newMemberRole,\n        addedAt: new Date()\n      };\n\n      this.members.push(newMember);\n      this.newMemberEmail = '';\n      this.newMemberRole = 'member';\n      this.membersChanged.emit();\n    } catch (error) {\n      console.error('Error adding member:', error);\n      this.errorMessage = 'Failed to add member';\n    } finally {\n      this.isLoading = false;\n    }\n  }\n\n  async onRemoveMember(member: ConversationMember): Promise<void> {\n    const confirmed = await this.dialogService.confirm({\n      title: 'Remove Member',\n      message: `Remove ${member.userEmail} from this conversation?`,\n      okText: 'Remove',\n      cancelText: 'Cancel'\n    });\n\n    if (!confirmed) return;\n\n    this.isLoading = true;\n    this.errorMessage = '';\n\n    try {\n      // TODO: Delete ConversationMember entity when available\n      this.members = this.members.filter(m => m.id !== member.id);\n      this.membersChanged.emit();\n    } catch (error) {\n      console.error('Error removing member:', error);\n      this.errorMessage = 'Failed to remove member';\n    } finally {\n      this.isLoading = false;\n    }\n  }\n\n  onCancel(): void {\n    this.cancelled.emit();\n    this.resetForm();\n  }\n\n  private resetForm(): void {\n    this.newMemberEmail = '';\n    this.newMemberRole = 'member';\n    this.errorMessage = '';\n    this.isVisible = false;\n  }\n}\n"]}