@memberjunction/ng-conversations 2.104.0

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

@@ -0,0 +1,352 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "../../services/dialog.service";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/forms";
+import * as i4 from "@progress/kendo-angular-dialog";
+import * as i5 from "@progress/kendo-angular-buttons";
+import * as i6 from "@progress/kendo-angular-inputs";
+import * as i7 from "@progress/kendo-angular-indicators";
+import * as i8 from "@progress/kendo-angular-dropdowns";
+function MembersModalComponent_kendo_dialog_0_div_13_div_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 16)(1, "p");
+    i0.ɵɵtext(2, "No additional members yet");
+    i0.ɵɵelementEnd()();
+} }
+function MembersModalComponent_kendo_dialog_0_div_13_div_2_button_11_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 26);
+    i0.ɵɵlistener("click", function MembersModalComponent_kendo_dialog_0_div_13_div_2_button_11_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const member_r4 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onRemoveMember(member_r4)); });
+    i0.ɵɵelement(1, "i", 27);
+    i0.ɵɵelementEnd();
+} }
+function MembersModalComponent_kendo_dialog_0_div_13_div_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 17)(1, "div", 18);
+    i0.ɵɵelement(2, "i", 19);
+    i0.ɵɵelementStart(3, "div", 20)(4, "div", 21);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "div", 22);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(8, "div", 23)(9, "span", 24);
+    i0.ɵɵtext(10);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(11, MembersModalComponent_kendo_dialog_0_div_13_div_2_button_11_Template, 2, 0, "button", 25);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const member_r4 = ctx.$implicit;
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(member_r4.userName);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(member_r4.userEmail);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("owner", member_r4.role === "owner");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", member_r4.role === "owner" ? "Owner" : "Member", " ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", member_r4.role !== "owner");
+} }
+function MembersModalComponent_kendo_dialog_0_div_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 13);
+    i0.ɵɵtemplate(1, MembersModalComponent_kendo_dialog_0_div_13_div_1_Template, 3, 0, "div", 14)(2, MembersModalComponent_kendo_dialog_0_div_13_div_2_Template, 12, 6, "div", 15);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.members.length === 0);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", ctx_r1.members);
+} }
+function MembersModalComponent_kendo_dialog_0_div_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 28);
+    i0.ɵɵelement(1, "kendo-loader", 29);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "Loading members...");
+    i0.ɵɵelementEnd()();
+} }
+function MembersModalComponent_kendo_dialog_0_div_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 30);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.errorMessage, " ");
+} }
+function MembersModalComponent_kendo_dialog_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-dialog", 1);
+    i0.ɵɵlistener("close", function MembersModalComponent_kendo_dialog_0_Template_kendo_dialog_close_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancel()); });
+    i0.ɵɵelementStart(1, "div", 2)(2, "div", 3)(3, "h4");
+    i0.ɵɵtext(4, "Add Member");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div", 4)(6, "kendo-textbox", 5);
+    i0.ɵɵtwoWayListener("valueChange", function MembersModalComponent_kendo_dialog_0_Template_kendo_textbox_valueChange_6_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.newMemberEmail, $event) || (ctx_r1.newMemberEmail = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "kendo-dropdownlist", 6);
+    i0.ɵɵtwoWayListener("ngModelChange", function MembersModalComponent_kendo_dialog_0_Template_kendo_dropdownlist_ngModelChange_7_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.newMemberRole, $event) || (ctx_r1.newMemberRole = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "button", 7);
+    i0.ɵɵlistener("click", function MembersModalComponent_kendo_dialog_0_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onAddMember()); });
+    i0.ɵɵtext(9, " Add ");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(10, "div", 8)(11, "h4");
+    i0.ɵɵtext(12);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(13, MembersModalComponent_kendo_dialog_0_div_13_Template, 3, 2, "div", 9)(14, MembersModalComponent_kendo_dialog_0_div_14_Template, 4, 0, "div", 10);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(15, MembersModalComponent_kendo_dialog_0_div_15_Template, 2, 1, "div", 11);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(16, "kendo-dialog-actions")(17, "button", 12);
+    i0.ɵɵlistener("click", function MembersModalComponent_kendo_dialog_0_Template_button_click_17_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancel()); });
+    i0.ɵɵtext(18, "Close");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("title", ctx_r1.modalTitle)("width", 600)("height", 500);
+    i0.ɵɵadvance(6);
+    i0.ɵɵstyleProp("flex", 1);
+    i0.ɵɵtwoWayProperty("value", ctx_r1.newMemberEmail);
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("width", 120, "px");
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.newMemberRole);
+    i0.ɵɵproperty("data", ctx_r1.roleOptions)("textField", "label")("valueField", "value");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("primary", true)("disabled", ctx_r1.isLoading);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1("Current Members (", ctx_r1.members.length, ")");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !ctx_r1.isLoading);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.isLoading);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.errorMessage);
+} }
+export class MembersModalComponent {
+    dialogService;
+    isVisible = false;
+    conversation;
+    currentUser;
+    cancelled = new EventEmitter();
+    membersChanged = new EventEmitter();
+    members = [];
+    newMemberEmail = '';
+    newMemberRole = 'member';
+    isLoading = false;
+    errorMessage = '';
+    get modalTitle() {
+        return `Manage Members: ${this.conversation?.Name || 'Conversation'}`;
+    }
+    roleOptions = [
+        { value: 'member', label: 'Member' },
+        { value: 'owner', label: 'Owner' }
+    ];
+    constructor(dialogService) {
+        this.dialogService = dialogService;
+    }
+    ngOnChanges() {
+        if (this.isVisible && this.conversation) {
+            this.loadMembers();
+        }
+    }
+    async loadMembers() {
+        if (!this.conversation)
+            return;
+        this.isLoading = true;
+        this.errorMessage = '';
+        try {
+            // TODO: Load from ConversationMembers entity when available
+            // For now, show the owner
+            this.members = [
+                {
+                    id: 'owner-' + this.conversation.ID,
+                    userId: this.conversation.UserID || '',
+                    userName: 'Owner',
+                    userEmail: this.currentUser.Email,
+                    role: 'owner',
+                    addedAt: this.conversation.__mj_CreatedAt
+                }
+            ];
+        }
+        catch (error) {
+            console.error('Error loading members:', error);
+            this.errorMessage = 'Failed to load members';
+        }
+        finally {
+            this.isLoading = false;
+        }
+    }
+    async onAddMember() {
+        const email = this.newMemberEmail.trim();
+        if (!email)
+            return;
+        // Simple email validation
+        if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+            await this.dialogService.alert('Invalid Email', 'Please enter a valid email address');
+            return;
+        }
+        // Check if already a member
+        if (this.members.some(m => m.userEmail === email)) {
+            await this.dialogService.alert('Already a Member', 'This user is already a member');
+            return;
+        }
+        this.isLoading = true;
+        this.errorMessage = '';
+        try {
+            // TODO: Create ConversationMember entity when available
+            const newMember = {
+                id: 'temp-' + Date.now(),
+                userId: 'unknown',
+                userName: email.split('@')[0],
+                userEmail: email,
+                role: this.newMemberRole,
+                addedAt: new Date()
+            };
+            this.members.push(newMember);
+            this.newMemberEmail = '';
+            this.newMemberRole = 'member';
+            this.membersChanged.emit();
+        }
+        catch (error) {
+            console.error('Error adding member:', error);
+            this.errorMessage = 'Failed to add member';
+        }
+        finally {
+            this.isLoading = false;
+        }
+    }
+    async onRemoveMember(member) {
+        const confirmed = await this.dialogService.confirm({
+            title: 'Remove Member',
+            message: `Remove ${member.userEmail} from this conversation?`,
+            okText: 'Remove',
+            cancelText: 'Cancel'
+        });
+        if (!confirmed)
+            return;
+        this.isLoading = true;
+        this.errorMessage = '';
+        try {
+            // TODO: Delete ConversationMember entity when available
+            this.members = this.members.filter(m => m.id !== member.id);
+            this.membersChanged.emit();
+        }
+        catch (error) {
+            console.error('Error removing member:', error);
+            this.errorMessage = 'Failed to remove member';
+        }
+        finally {
+            this.isLoading = false;
+        }
+    }
+    onCancel() {
+        this.cancelled.emit();
+        this.resetForm();
+    }
+    resetForm() {
+        this.newMemberEmail = '';
+        this.newMemberRole = 'member';
+        this.errorMessage = '';
+        this.isVisible = false;
+    }
+    static ɵfac = function MembersModalComponent_Factory(t) { return new (t || 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" }, features: [i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [[3, "title", "width", "height", "close", 4, "ngIf"], [3, "close", "title", "width", "height"], [1, "members-modal-content"], [1, "add-member-section"], [1, "add-member-form"], ["placeholder", "Enter email address", 3, "valueChange", "value"], [3, "ngModelChange", "ngModel", "data", "textField", "valueField"], ["kendoButton", "", 3, "click", "primary", "disabled"], [1, "members-section"], ["class", "members-list", 4, "ngIf"], ["class", "loading-indicator", 4, "ngIf"], ["class", "error-message", 4, "ngIf"], ["kendoButton", "", 3, "click"], [1, "members-list"], ["class", "empty-state", 4, "ngIf"], ["class", "member-item", 4, "ngFor", "ngForOf"], [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"], ["class", "btn-remove", "title", "Remove member", 3, "click", 4, "ngIf"], ["title", "Remove member", 1, "btn-remove", 3, "click"], [1, "fas", "fa-times"], [1, "loading-indicator"], ["type", "infinite-spinner", "size", "medium"], [1, "error-message"]], template: function MembersModalComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, MembersModalComponent_kendo_dialog_0_Template, 19, 18, "kendo-dialog", 0);
+        } if (rf & 2) {
+            i0.ɵɵproperty("ngIf", ctx.isVisible);
+        } }, dependencies: [i2.NgForOf, i2.NgIf, i3.NgControlStatus, i3.NgModel, i4.DialogComponent, i4.DialogActionsComponent, i5.ButtonComponent, i6.TextBoxComponent, i7.LoaderComponent, i8.DropDownListComponent], 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    kendo-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,
+        args: [{ selector: 'mj-members-modal', template: `
+    <kendo-dialog
+      *ngIf="isVisible"
+      [title]="modalTitle"
+      [width]="600"
+      [height]="500"
+      (close)="onCancel()">
+
+      <div class="members-modal-content">
+        <div class="add-member-section">
+          <h4>Add Member</h4>
+          <div class="add-member-form">
+            <kendo-textbox
+              [(value)]="newMemberEmail"
+              placeholder="Enter email address"
+              [style.flex]="1">
+            </kendo-textbox>
+            <kendo-dropdownlist
+              [(ngModel)]="newMemberRole"
+              [data]="roleOptions"
+              [textField]="'label'"
+              [valueField]="'value'"
+              [style.width.px]="120">
+            </kendo-dropdownlist>
+            <button kendoButton [primary]="true" [disabled]="isLoading" (click)="onAddMember()">
+              Add
+            </button>
+          </div>
+        </div>
+
+        <div class="members-section">
+          <h4>Current Members ({{ members.length }})</h4>
+
+          <div class="members-list" *ngIf="!isLoading">
+            <div *ngIf="members.length === 0" class="empty-state">
+              <p>No additional members yet</p>
+            </div>
+
+            <div *ngFor="let member of members" class="member-item">
+              <div class="member-info">
+                <i class="fas fa-user-circle"></i>
+                <div class="member-details">
+                  <div class="member-name">{{ member.userName }}</div>
+                  <div class="member-email">{{ member.userEmail }}</div>
+                </div>
+              </div>
+
+              <div class="member-controls">
+                <span class="member-role" [class.owner]="member.role === 'owner'">
+                  {{ member.role === 'owner' ? 'Owner' : 'Member' }}
+                </span>
+                <button
+                  *ngIf="member.role !== 'owner'"
+                  class="btn-remove"
+                  (click)="onRemoveMember(member)"
+                  title="Remove member">
+                  <i class="fas fa-times"></i>
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <div class="loading-indicator" *ngIf="isLoading">
+            <kendo-loader type="infinite-spinner" size="medium"></kendo-loader>
+            <span>Loading members...</span>
+          </div>
+        </div>
+
+        <div class="error-message" *ngIf="errorMessage">
+          {{ errorMessage }}
+        </div>
+      </div>
+
+      <kendo-dialog-actions>
+        <button kendoButton (click)="onCancel()">Close</button>
+      </kendo-dialog-actions>
+    </kendo-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    kendo-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: [{
+            type: Input
+        }], currentUser: [{
+            type: Input
+        }], cancelled: [{
+            type: Output
+        }], membersChanged: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MembersModalComponent, { className: "MembersModalComponent", filePath: "src/lib/components/members/members-modal.component.ts", lineNumber: 233 }); })();
+//# sourceMappingURL=members-modal.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"members-modal.component.js","sourceRoot":"","sources":["../../../../src/lib/components/members/members-modal.component.ts"],"names":[],"mappings":"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"}

package/dist/lib/components/mention/mention-dropdown.component.d.ts

@@ -0,0 +1,44 @@
+import { EventEmitter, OnInit, OnDestroy } from '@angular/core';
+import { MentionSuggestion } from '../../services/mention-autocomplete.service';
+import * as i0 from "@angular/core";
+/**
+ * Dropdown component for @mention autocomplete
+ */
+export declare class MentionDropdownComponent implements OnInit, OnDestroy {
+    suggestions: MentionSuggestion[];
+    position: {
+        top: number;
+        left: number;
+    };
+    visible: boolean;
+    showAbove: boolean;
+    suggestionSelected: EventEmitter<MentionSuggestion>;
+    closed: EventEmitter<void>;
+    selectedIndex: number;
+    constructor();
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * Handle keyboard navigation
+     */
+    handleKeyDown(event: KeyboardEvent): void;
+    /**
+     * Select a suggestion
+     */
+    selectSuggestion(suggestion: MentionSuggestion): void;
+    /**
+     * Close the dropdown
+     */
+    close(): void;
+    /**
+     * Scroll to selected item
+     */
+    private scrollToSelected;
+    /**
+     * Track by function for ngFor
+     */
+    trackBySuggestion(index: number, item: MentionSuggestion): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MentionDropdownComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MentionDropdownComponent, "mj-mention-dropdown", never, { "suggestions": { "alias": "suggestions"; "required": false; }; "position": { "alias": "position"; "required": false; }; "visible": { "alias": "visible"; "required": false; }; "showAbove": { "alias": "showAbove"; "required": false; }; }, { "suggestionSelected": "suggestionSelected"; "closed": "closed"; }, never, never, false, never>;
+}
+//# sourceMappingURL=mention-dropdown.component.d.ts.map

package/dist/lib/components/mention/mention-dropdown.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mention-dropdown.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/mention/mention-dropdown.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,YAAY,EACZ,MAAM,EACN,SAAS,EAEV,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,iBAAiB,EAAE,MAAM,6CAA6C,CAAC;;AAEhF;;GAEG;AACH,qBAKa,wBAAyB,YAAW,MAAM,EAAE,SAAS;IACvD,WAAW,EAAE,iBAAiB,EAAE,CAAM;IACtC,QAAQ,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAuB;IAC9D,OAAO,EAAE,OAAO,CAAS;IACzB,SAAS,EAAE,OAAO,CAAS;IAE1B,kBAAkB,kCAAyC;IAC3D,MAAM,qBAA4B;IAErC,aAAa,EAAE,MAAM,CAAK;;IAIjC,QAAQ,IAAI,IAAI;IAEhB,WAAW,IAAI,IAAI;IAEnB;;OAEG;IAEH,aAAa,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IA4BzC;;OAEG;IACH,gBAAgB,CAAC,UAAU,EAAE,iBAAiB,GAAG,IAAI;IAIrD;;OAEG;IACH,KAAK,IAAI,IAAI;IAIb;;OAEG;IACH,OAAO,CAAC,gBAAgB;IASxB;;OAEG;IACH,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,iBAAiB,GAAG,MAAM;yCA9EtD,wBAAwB;2CAAxB,wBAAwB;CAiFpC"}

package/dist/lib/components/mention/mention-dropdown.component.js

@@ -0,0 +1,194 @@
+import { Component, Input, Output, EventEmitter, HostListener } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+function MentionDropdownComponent_div_0_div_1_div_1_i_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i");
+} if (rf & 2) {
+    const suggestion_r2 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵclassMapInterpolate1("fa-solid ", suggestion_r2.icon, "");
+} }
+function MentionDropdownComponent_div_0_div_1_div_1_i_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 15);
+} }
+function MentionDropdownComponent_div_0_div_1_div_1_span_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 16);
+    i0.ɵɵtext(1, "Agent");
+    i0.ɵɵelementEnd();
+} }
+function MentionDropdownComponent_div_0_div_1_div_1_span_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 17);
+    i0.ɵɵtext(1, "User");
+    i0.ɵɵelementEnd();
+} }
+function MentionDropdownComponent_div_0_div_1_div_1_div_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 18);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const suggestion_r2 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", suggestion_r2.description, " ");
+} }
+function MentionDropdownComponent_div_0_div_1_div_1_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 6);
+    i0.ɵɵlistener("click", function MentionDropdownComponent_div_0_div_1_div_1_Template_div_click_0_listener() { const suggestion_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.selectSuggestion(suggestion_r2)); })("mouseenter", function MentionDropdownComponent_div_0_div_1_div_1_Template_div_mouseenter_0_listener() { const i_r4 = i0.ɵɵrestoreView(_r1).index; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.selectedIndex = i_r4); });
+    i0.ɵɵelementStart(1, "div", 7);
+    i0.ɵɵtemplate(2, MentionDropdownComponent_div_0_div_1_div_1_i_2_Template, 1, 3, "i", 8)(3, MentionDropdownComponent_div_0_div_1_div_1_i_3_Template, 1, 0, "i", 9);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 10)(5, "div", 11);
+    i0.ɵɵtemplate(6, MentionDropdownComponent_div_0_div_1_div_1_span_6_Template, 2, 0, "span", 12)(7, MentionDropdownComponent_div_0_div_1_div_1_span_7_Template, 2, 0, "span", 13);
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(9, MentionDropdownComponent_div_0_div_1_div_1_div_9_Template, 2, 1, "div", 14);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const suggestion_r2 = ctx.$implicit;
+    const i_r4 = ctx.index;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("selected", i_r4 === ctx_r2.selectedIndex);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", suggestion_r2.type === "agent" && suggestion_r2.icon);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", suggestion_r2.type === "user");
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngIf", suggestion_r2.type === "agent");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", suggestion_r2.type === "user");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", suggestion_r2.displayName, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", suggestion_r2.description);
+} }
+function MentionDropdownComponent_div_0_div_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 4);
+    i0.ɵɵtemplate(1, MentionDropdownComponent_div_0_div_1_div_1_Template, 10, 8, "div", 5);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", ctx_r2.suggestions)("ngForTrackBy", ctx_r2.trackBySuggestion);
+} }
+function MentionDropdownComponent_div_0_div_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 19);
+    i0.ɵɵelement(1, "i", 20);
+    i0.ɵɵelementStart(2, "p");
+    i0.ɵɵtext(3, "No agents or users available");
+    i0.ɵɵelementEnd()();
+} }
+function MentionDropdownComponent_div_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 1);
+    i0.ɵɵtemplate(1, MentionDropdownComponent_div_0_div_1_Template, 2, 2, "div", 2)(2, MentionDropdownComponent_div_0_div_2_Template, 4, 0, "div", 3);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("top", ctx_r2.position.top, "px")("left", ctx_r2.position.left, "px");
+    i0.ɵɵclassProp("show-above", ctx_r2.showAbove);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.suggestions.length > 0);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.suggestions.length === 0);
+} }
+/**
+ * Dropdown component for @mention autocomplete
+ */
+export class MentionDropdownComponent {
+    suggestions = [];
+    position = { top: 0, left: 0 };
+    visible = false;
+    showAbove = false; // Controls whether dropdown grows upward
+    suggestionSelected = new EventEmitter();
+    closed = new EventEmitter();
+    selectedIndex = 0;
+    constructor() { }
+    ngOnInit() { }
+    ngOnDestroy() { }
+    /**
+     * Handle keyboard navigation
+     */
+    handleKeyDown(event) {
+        if (!this.visible || this.suggestions.length === 0)
+            return;
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.selectedIndex = Math.min(this.selectedIndex + 1, this.suggestions.length - 1);
+                this.scrollToSelected();
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.selectedIndex = Math.max(this.selectedIndex - 1, 0);
+                this.scrollToSelected();
+                break;
+            case 'Enter':
+            case 'Tab':
+                event.preventDefault();
+                if (this.suggestions[this.selectedIndex]) {
+                    this.selectSuggestion(this.suggestions[this.selectedIndex]);
+                }
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.close();
+                break;
+        }
+    }
+    /**
+     * Select a suggestion
+     */
+    selectSuggestion(suggestion) {
+        this.suggestionSelected.emit(suggestion);
+    }
+    /**
+     * Close the dropdown
+     */
+    close() {
+        this.closed.emit();
+    }
+    /**
+     * Scroll to selected item
+     */
+    scrollToSelected() {
+        setTimeout(() => {
+            const selected = document.querySelector('.mention-suggestion.selected');
+            if (selected) {
+                selected.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+            }
+        }, 0);
+    }
+    /**
+     * Track by function for ngFor
+     */
+    trackBySuggestion(index, item) {
+        return item.id;
+    }
+    static ɵfac = function MentionDropdownComponent_Factory(t) { return new (t || MentionDropdownComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MentionDropdownComponent, selectors: [["mj-mention-dropdown"]], hostBindings: function MentionDropdownComponent_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("keydown", function MentionDropdownComponent_keydown_HostBindingHandler($event) { return ctx.handleKeyDown($event); }, false, i0.ɵɵresolveDocument);
+        } }, inputs: { suggestions: "suggestions", position: "position", visible: "visible", showAbove: "showAbove" }, outputs: { suggestionSelected: "suggestionSelected", closed: "closed" }, decls: 1, vars: 1, consts: [["class", "mention-dropdown", 3, "show-above", "top", "left", 4, "ngIf"], [1, "mention-dropdown"], ["class", "mention-suggestions", 4, "ngIf"], ["class", "mention-empty-state", 4, "ngIf"], [1, "mention-suggestions"], ["class", "mention-suggestion", 3, "selected", "click", "mouseenter", 4, "ngFor", "ngForOf", "ngForTrackBy"], [1, "mention-suggestion", 3, "click", "mouseenter"], [1, "suggestion-icon"], [3, "class", 4, "ngIf"], ["class", "fa-solid fa-user", 4, "ngIf"], [1, "suggestion-content"], [1, "suggestion-name"], ["class", "suggestion-type-badge", 4, "ngIf"], ["class", "suggestion-type-badge user", 4, "ngIf"], ["class", "suggestion-description", 4, "ngIf"], [1, "fa-solid", "fa-user"], [1, "suggestion-type-badge"], [1, "suggestion-type-badge", "user"], [1, "suggestion-description"], [1, "mention-empty-state"], [1, "fa-solid", "fa-robot"]], template: function MentionDropdownComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, MentionDropdownComponent_div_0_Template, 3, 8, "div", 0);
+        } if (rf & 2) {
+            i0.ɵɵproperty("ngIf", ctx.visible);
+        } }, dependencies: [i1.NgForOf, i1.NgIf], styles: [".mention-dropdown[_ngcontent-%COMP%] {\n  position: absolute;\n  z-index: 10000;\n  background: white;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  min-width: 280px;\n  max-width: 400px;\n  max-height: 300px;\n  overflow-y: auto;\n  transform-origin: top left; \n\n}\n\n.mention-dropdown.show-above[_ngcontent-%COMP%] {\n  transform: translateY(-100%); \n\n  transform-origin: bottom left; \n\n}\n\n.mention-suggestions[_ngcontent-%COMP%] {\n  padding: 4px 0;\n}\n\n.mention-suggestion[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n  padding: 10px 12px;\n  cursor: pointer;\n  transition: background-color 0.15s;\n}\n\n.mention-suggestion[_ngcontent-%COMP%]:hover, \n.mention-suggestion.selected[_ngcontent-%COMP%] {\n  background-color: #f5f5f5;\n}\n\n.suggestion-icon[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  border-radius: 6px;\n  color: white;\n  font-size: 16px;\n  flex-shrink: 0;\n}\n\n.suggestion-icon[_ngcontent-%COMP%]   i.fa-user[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n}\n\n.suggestion-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.suggestion-name[_ngcontent-%COMP%] {\n  font-weight: 500;\n  font-size: 14px;\n  color: #333;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.suggestion-type-badge[_ngcontent-%COMP%] {\n  display: inline-block;\n  padding: 2px 6px;\n  font-size: 10px;\n  font-weight: 600;\n  text-transform: uppercase;\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  color: white;\n  border-radius: 3px;\n}\n\n.suggestion-type-badge.user[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n}\n\n.suggestion-description[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #666;\n  margin-top: 2px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n\n\n.mention-dropdown[_ngcontent-%COMP%]::-webkit-scrollbar {\n  width: 8px;\n}\n\n.mention-dropdown[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n  background: #f1f1f1;\n  border-radius: 8px;\n}\n\n.mention-dropdown[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: #c1c1c1;\n  border-radius: 8px;\n}\n\n.mention-dropdown[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n  background: #a8a8a8;\n}\n\n\n\n.mention-empty-state[_ngcontent-%COMP%] {\n  padding: 24px;\n  text-align: center;\n  color: #9CA3AF;\n}\n\n.mention-empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 32px;\n  margin-bottom: 8px;\n  opacity: 0.5;\n}\n\n.mention-empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 13px;\n  font-weight: 500;\n}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MentionDropdownComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-mention-dropdown', template: "<div\n  *ngIf=\"visible\"\n  class=\"mention-dropdown\"\n  [class.show-above]=\"showAbove\"\n  [style.top.px]=\"position.top\"\n  [style.left.px]=\"position.left\"\n>\n  <!-- Suggestions List -->\n  <div class=\"mention-suggestions\" *ngIf=\"suggestions.length > 0\">\n    <div\n      *ngFor=\"let suggestion of suggestions; let i = index; trackBy: trackBySuggestion\"\n      class=\"mention-suggestion\"\n      [class.selected]=\"i === selectedIndex\"\n      (click)=\"selectSuggestion(suggestion)\"\n      (mouseenter)=\"selectedIndex = i\"\n    >\n      <div class=\"suggestion-icon\">\n        <i\n          *ngIf=\"suggestion.type === 'agent' && suggestion.icon\"\n          class=\"fa-solid {{ suggestion.icon }}\"\n        ></i>\n        <i\n          *ngIf=\"suggestion.type === 'user'\"\n          class=\"fa-solid fa-user\"\n        ></i>\n      </div>\n      <div class=\"suggestion-content\">\n        <div class=\"suggestion-name\">\n          <span class=\"suggestion-type-badge\" *ngIf=\"suggestion.type === 'agent'\">Agent</span>\n          <span class=\"suggestion-type-badge user\" *ngIf=\"suggestion.type === 'user'\">User</span>\n          {{ suggestion.displayName }}\n        </div>\n        <div class=\"suggestion-description\" *ngIf=\"suggestion.description\">\n          {{ suggestion.description }}\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Empty State -->\n  <div class=\"mention-empty-state\" *ngIf=\"suggestions.length === 0\">\n    <i class=\"fa-solid fa-robot\"></i>\n    <p>No agents or users available</p>\n  </div>\n</div>\n", styles: [".mention-dropdown {\n  position: absolute;\n  z-index: 10000;\n  background: white;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  min-width: 280px;\n  max-width: 400px;\n  max-height: 300px;\n  overflow-y: auto;\n  transform-origin: top left; /* Default: grows downward from top-left */\n}\n\n.mention-dropdown.show-above {\n  transform: translateY(-100%); /* Shift entire dropdown up by its own height */\n  transform-origin: bottom left; /* Grows upward from bottom-left */\n}\n\n.mention-suggestions {\n  padding: 4px 0;\n}\n\n.mention-suggestion {\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n  padding: 10px 12px;\n  cursor: pointer;\n  transition: background-color 0.15s;\n}\n\n.mention-suggestion:hover,\n.mention-suggestion.selected {\n  background-color: #f5f5f5;\n}\n\n.suggestion-icon {\n  width: 32px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  border-radius: 6px;\n  color: white;\n  font-size: 16px;\n  flex-shrink: 0;\n}\n\n.suggestion-icon i.fa-user {\n  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n}\n\n.suggestion-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.suggestion-name {\n  font-weight: 500;\n  font-size: 14px;\n  color: #333;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.suggestion-type-badge {\n  display: inline-block;\n  padding: 2px 6px;\n  font-size: 10px;\n  font-weight: 600;\n  text-transform: uppercase;\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  color: white;\n  border-radius: 3px;\n}\n\n.suggestion-type-badge.user {\n  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n}\n\n.suggestion-description {\n  font-size: 12px;\n  color: #666;\n  margin-top: 2px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* Scrollbar styling */\n.mention-dropdown::-webkit-scrollbar {\n  width: 8px;\n}\n\n.mention-dropdown::-webkit-scrollbar-track {\n  background: #f1f1f1;\n  border-radius: 8px;\n}\n\n.mention-dropdown::-webkit-scrollbar-thumb {\n  background: #c1c1c1;\n  border-radius: 8px;\n}\n\n.mention-dropdown::-webkit-scrollbar-thumb:hover {\n  background: #a8a8a8;\n}\n\n/* Empty State */\n.mention-empty-state {\n  padding: 24px;\n  text-align: center;\n  color: #9CA3AF;\n}\n\n.mention-empty-state i {\n  font-size: 32px;\n  margin-bottom: 8px;\n  opacity: 0.5;\n}\n\n.mention-empty-state p {\n  margin: 0;\n  font-size: 13px;\n  font-weight: 500;\n}\n"] }]
+    }], () => [], { suggestions: [{
+            type: Input
+        }], position: [{
+            type: Input
+        }], visible: [{
+            type: Input
+        }], showAbove: [{
+            type: Input
+        }], suggestionSelected: [{
+            type: Output
+        }], closed: [{
+            type: Output
+        }], handleKeyDown: [{
+            type: HostListener,
+            args: ['document:keydown', ['$event']]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MentionDropdownComponent, { className: "MentionDropdownComponent", filePath: "src/lib/components/mention/mention-dropdown.component.ts", lineNumber: 20 }); })();
+//# sourceMappingURL=mention-dropdown.component.js.map

package/dist/lib/components/mention/mention-dropdown.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mention-dropdown.component.js","sourceRoot":"","sources":["../../../../src/lib/components/mention/mention-dropdown.component.ts","../../../../src/lib/components/mention/mention-dropdown.component.html"],"names":[],"mappings":"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"}