@memberjunction/ng-core-entity-forms 2.81.0 → 2.83.0

package/dist/lib/custom/AIAgents/prompt-selector-dialog.component.d.ts

@@ -1,5 +1,5 @@
 import { OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
-import { DialogRef } from '@progress/kendo-angular-dialog';
+import { WindowRef } from '@progress/kendo-angular-dialog';
 import { Subject, BehaviorSubject } from 'rxjs';
 import { FormControl } from '@angular/forms';
 import { AIPromptEntity } from '@memberjunction/core-entities';
@@ -43,7 +43,7 @@ export declare class PromptSelectorDialogComponent implements OnInit, OnDestroy
     selectedPrompts: Set<string>;
     linkedPrompts: Set<string>;
     viewMode: 'grid' | 'list';
-    constructor(dialogRef: DialogRef, cdr: ChangeDetectorRef);
+    constructor(dialogRef: WindowRef, cdr: ChangeDetectorRef);
     ngOnInit(): void;
     ngOnDestroy(): void;
     private setupSearch;

package/dist/lib/custom/AIAgents/prompt-selector-dialog.component.js

@@ -343,7 +343,7 @@ export class PromptSelectorDialogComponent {
         this.result.next(null);
         this.dialogRef.close();
     }
-    static { this.ɵfac = function PromptSelectorDialogComponent_Factory(t) { return new (t || PromptSelectorDialogComponent)(i0.ɵɵdirectiveInject(i1.DialogRef), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); }; }
+    static { this.ɵfac = function PromptSelectorDialogComponent_Factory(t) { return new (t || PromptSelectorDialogComponent)(i0.ɵɵdirectiveInject(i1.WindowRef), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PromptSelectorDialogComponent, selectors: [["mj-prompt-selector-dialog"]], decls: 13, vars: 6, consts: [[1, "prompt-selector-dialog"], [1, "loading-state"], [1, "dialog-footer"], [1, "footer-left"], ["kendoButton", "", "look", "flat"], [1, "footer-right"], ["kendoButton", "", "look", "flat", 3, "click"], ["kendoButton", "", "themeColor", "primary", 3, "click", "disabled"], [1, "loading-spinner"], [1, "fa-solid", "fa-spinner", "fa-spin", "fa-2x"], [1, "dialog-header"], [1, "search-section"], [1, "search-box"], [1, "fa-solid", "fa-search", "search-icon"], ["placeholder", "Search prompts by name or description...", 1, "search-input", 3, "formControl"], [1, "view-controls"], ["kendoButton", "", "size", "small", "fillMode", "flat", "title", "Toggle between list and grid view", 3, "click"], [1, "fa-solid"], [1, "results-summary"], [1, "results-count"], [1, "fa-solid", "fa-comment-dots"], [1, "selected-count"], [1, "prompts-container"], [1, "no-results"], [1, "fa-solid", "fa-check-circle"], [1, "fa-solid", "fa-search", "fa-2x"], [1, "prompt-card", 3, "selected", "linked"], [1, "prompt-card", 3, "click"], [1, "selection-indicator"], ["title", "Already linked to this agent", 1, "fa-solid", "fa-link", "linked-icon"], [1, "fa-solid", "fa-check-circle", "selected-icon"], [1, "fa-regular", "fa-circle", "unselected-icon"], [1, "prompt-content"], [1, "prompt-header"], [1, "prompt-name"], [1, "prompt-badges"], [1, "linked-badge"], [1, "status-badge"], [1, "prompt-description"], [1, "prompt-metadata"], [1, "metadata-item"], [1, "fa-solid", "fa-link"], [1, "fa-solid", "fa-calendar"], [1, "fa-solid", "fa-plus"], [1, "fa-solid", "fa-check"]], template: function PromptSelectorDialogComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵtemplate(1, PromptSelectorDialogComponent_Conditional_1_Template, 5, 0, "div", 1);
@@ -374,6 +374,6 @@ export class PromptSelectorDialogComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PromptSelectorDialogComponent, [{
         type: Component,
         args: [{ selector: 'mj-prompt-selector-dialog', template: "<!-- Prompt Selector Dialog -->\n<div class=\"prompt-selector-dialog\">\n  \n  <!-- Loading State -->\n  @if (isLoading$ | async) {\n    <div class=\"loading-state\">\n      <div class=\"loading-spinner\">\n        <i class=\"fa-solid fa-spinner fa-spin fa-2x\"></i>\n      </div>\n      <p>Loading prompts...</p>\n    </div>\n  } @else {\n    \n    <!-- Search and Controls Header -->\n    <div class=\"dialog-header\">\n      <div class=\"search-section\">\n        <div class=\"search-box\">\n          <i class=\"fa-solid fa-search search-icon\"></i>\n          <kendo-textbox \n            [formControl]=\"searchControl\"\n            placeholder=\"Search prompts by name or description...\"\n            class=\"search-input\">\n          </kendo-textbox>\n        </div>\n        \n        <div class=\"view-controls\">\n          <button kendoButton \n                  size=\"small\"\n                  fillMode=\"flat\"\n                  [class.active]=\"viewMode === 'list'\"\n                  (click)=\"toggleViewMode()\"\n                  title=\"Toggle between list and grid view\">\n            <i class=\"fa-solid\" [class.fa-list]=\"viewMode === 'grid'\" [class.fa-th]=\"viewMode === 'list'\"></i>\n          </button>\n        </div>\n      </div>\n    </div>\n\n    <!-- Results Summary -->\n    <div class=\"results-summary\">\n      <span class=\"results-count\">\n        <i class=\"fa-solid fa-comment-dots\"></i>\n        {{ (filteredPrompts$ | async)?.length || 0 }} prompt(s)\n      </span>\n      @if (config.multiSelect && selectedPrompts.size > 0) {\n        <span class=\"selected-count\">\n          <i class=\"fa-solid fa-check-circle\"></i>\n          {{ selectedPrompts.size }} selected\n        </span>\n      }\n    </div>\n\n    <!-- Prompts List/Grid -->\n    <div class=\"prompts-container\" [class.grid-view]=\"viewMode === 'grid'\" [class.list-view]=\"viewMode === 'list'\">\n      @if ((filteredPrompts$ | async)?.length === 0) {\n        <div class=\"no-results\">\n          <i class=\"fa-solid fa-search fa-2x\"></i>\n          <h4>No prompts found</h4>\n          <p>Try adjusting your search criteria or check that prompts are properly configured.</p>\n        </div>\n      } @else {\n        @for (prompt of filteredPrompts$ | async; track prompt.ID) {\n          <div class=\"prompt-card\" \n               [class.selected]=\"isPromptSelected(prompt)\"\n               [class.linked]=\"isPromptLinked(prompt)\"\n               (click)=\"togglePromptSelection(prompt)\">\n            \n            <!-- Selection indicator -->\n            <div class=\"selection-indicator\">\n              @if (isPromptLinked(prompt)) {\n                <i class=\"fa-solid fa-link linked-icon\" title=\"Already linked to this agent\"></i>\n              } @else if (isPromptSelected(prompt)) {\n                <i class=\"fa-solid fa-check-circle selected-icon\"></i>\n              } @else {\n                <i class=\"fa-regular fa-circle unselected-icon\"></i>\n              }\n            </div>\n\n            <!-- Prompt Content -->\n            <div class=\"prompt-content\">\n              <div class=\"prompt-header\">\n                <h4 class=\"prompt-name\">{{ prompt.Name }}</h4>\n                <div class=\"prompt-badges\">\n                  @if (isPromptLinked(prompt)) {\n                    <span class=\"linked-badge\">\n                      <i class=\"fa-solid fa-link\"></i>\n                      Linked\n                    </span>\n                  }\n                  <span class=\"status-badge\" \n                        [style.background-color]=\"getPromptStatusColor(prompt)\">\n                    {{ getPromptStatusText(prompt) }}\n                  </span>\n                </div>\n              </div>\n\n              @if (prompt.Description) {\n                <p class=\"prompt-description\">{{ prompt.Description }}</p>\n              }\n\n              <!-- Prompt Metadata -->\n              <div class=\"prompt-metadata\">\n                @if (prompt.__mj_CreatedAt) {\n                  <span class=\"metadata-item\">\n                    <i class=\"fa-solid fa-calendar\"></i>\n                    Created {{ prompt.__mj_CreatedAt | date:'short' }}\n                  </span>\n                }\n              </div>\n            </div>\n          </div>\n        }\n      }\n    </div>\n  }\n\n  <!-- Dialog Footer -->\n  <div class=\"dialog-footer\">\n    <div class=\"footer-left\">\n      @if (config.showCreateNew) {\n        <button kendoButton \n                look=\"flat\"\n                (click)=\"createNew()\">\n          <i class=\"fa-solid fa-plus\"></i>\n          Create New Prompt\n        </button>\n      }\n    </div>\n    \n    <div class=\"footer-right\">\n      <button kendoButton \n              look=\"flat\" \n              (click)=\"cancel()\">\n        Cancel\n      </button>\n      \n      <button kendoButton \n              themeColor=\"primary\" \n              (click)=\"selectPrompts()\"\n              [disabled]=\"selectedPrompts.size === 0\">\n        @if (config.multiSelect) {\n          <i class=\"fa-solid fa-check\"></i>\n          Add {{ selectedPrompts.size }} Prompt{{ selectedPrompts.size === 1 ? '' : 's' }}\n        } @else {\n          <i class=\"fa-solid fa-check\"></i>\n          Select Prompt\n        }\n      </button>\n    </div>\n  </div>\n</div>", styles: [".prompt-selector-dialog {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  max-height: 70vh;\n}\n\n/* Ensure dialog appears above banner and other elements */\n:host ::ng-deep .k-dialog,\n:host ::ng-deep .k-window {\n  z-index: 10000 !important;\n}\n\n:host ::ng-deep .k-overlay {\n  z-index: 9999 !important;\n}\n\n/* === Loading State === */\n.loading-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 300px;\n  color: #666;\n}\n\n.loading-spinner {\n  margin-bottom: 16px;\n}\n\n/* === Header Section === */\n.dialog-header {\n  padding: 16px;\n  border-bottom: 1px solid #e0e0e0;\n  background: #f8f9fa;\n}\n\n.search-section {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.search-box {\n  flex: 1;\n  position: relative;\n}\n\n.search-icon {\n  position: absolute;\n  left: 12px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: #666;\n  z-index: 2;\n}\n\n.search-input {\n  width: 100%;\n}\n\n.search-input input {\n  padding-left: 36px !important;\n}\n\n.view-controls button.active {\n  background-color: #007bff;\n  color: white;\n}\n\n/* === Results Summary === */\n.results-summary {\n  padding: 12px 16px;\n  background: #f1f3f4;\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  font-size: 14px;\n  color: #666;\n  border-bottom: 1px solid #e0e0e0;\n}\n\n.results-count, .selected-count {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.selected-count {\n  color: #007bff;\n  font-weight: 500;\n}\n\n/* === Prompts Container === */\n.prompts-container {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px;\n}\n\n/* List View */\n.prompts-container.list-view {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n/* Grid View */\n.prompts-container.grid-view {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n  gap: 16px;\n}\n\n/* === Prompt Cards === */\n.prompt-card {\n  border: 2px solid #e0e0e0;\n  border-radius: 8px;\n  padding: 16px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  background: white;\n  display: flex;\n  gap: 12px;\n  position: relative;\n}\n\n.prompt-card:hover {\n  border-color: #007bff;\n  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.15);\n}\n\n.prompt-card.selected {\n  border-color: #007bff;\n  background: #f8f9ff;\n  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.25);\n}\n\n.prompt-card.linked {\n  border-color: #6c757d;\n  background: #f8f9fa;\n  opacity: 0.7;\n  cursor: not-allowed;\n}\n\n.prompt-card.linked:hover {\n  border-color: #6c757d;\n  box-shadow: none;\n}\n\n/* === Selection Indicator === */\n.selection-indicator {\n  display: flex;\n  align-items: flex-start;\n  margin-top: 2px;\n}\n\n.selected-icon {\n  color: #007bff;\n  font-size: 18px;\n}\n\n.unselected-icon {\n  color: #ccc;\n  font-size: 18px;\n}\n\n.linked-icon {\n  color: #6c757d;\n  font-size: 18px;\n}\n\n/* === Prompt Content === */\n.prompt-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.prompt-header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 12px;\n  margin-bottom: 8px;\n}\n\n.prompt-name {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: #333;\n  line-height: 1.4;\n  flex: 1;\n}\n\n.prompt-badges {\n  display: flex;\n  gap: 6px;\n  align-items: center;\n}\n\n.status-badge {\n  padding: 4px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 500;\n  color: white;\n  white-space: nowrap;\n}\n\n.linked-badge {\n  padding: 4px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 500;\n  background: #6c757d;\n  color: white;\n  white-space: nowrap;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.prompt-description {\n  margin: 0 0 12px 0;\n  color: #666;\n  font-size: 14px;\n  line-height: 1.4;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n/* === Prompt Metadata === */\n.prompt-metadata {\n  display: flex;\n  gap: 16px;\n  font-size: 12px;\n  color: #888;\n  flex-wrap: wrap;\n}\n\n.metadata-item {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.metadata-item i {\n  width: 12px;\n  font-size: 10px;\n}\n\n/* === No Results === */\n.no-results {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 200px;\n  color: #666;\n  text-align: center;\n}\n\n.no-results i {\n  margin-bottom: 16px;\n  color: #ccc;\n}\n\n.no-results h4 {\n  margin: 0 0 8px 0;\n  color: #333;\n}\n\n.no-results p {\n  margin: 0;\n  color: #888;\n  max-width: 300px;\n}\n\n/* === Dialog Footer === */\n.dialog-footer {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px;\n  border-top: 1px solid #e0e0e0;\n  background: #f8f9fa;\n}\n\n.footer-left {\n  display: flex;\n}\n\n.footer-right {\n  display: flex;\n  gap: 8px;\n}\n\n/* === Responsive Design === */\n@media (max-width: 768px) {\n  .prompts-container.grid-view {\n    grid-template-columns: 1fr;\n  }\n  \n  .prompt-header {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 8px;\n  }\n  \n  .search-section {\n    flex-direction: column;\n    gap: 8px;\n  }\n  \n  .view-controls {\n    align-self: flex-end;\n  }\n}"] }]
-    }], () => [{ type: i1.DialogRef }, { type: i0.ChangeDetectorRef }], null); })();
+    }], () => [{ type: i1.WindowRef }, { type: i0.ChangeDetectorRef }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PromptSelectorDialogComponent, { className: "PromptSelectorDialogComponent", filePath: "src/lib/custom/AIAgents/prompt-selector-dialog.component.ts", lineNumber: 42 }); })();
 //# sourceMappingURL=prompt-selector-dialog.component.js.map