@memberjunction/ng-tasks 3.4.0 → 4.0.0

package/dist/lib/components/task.component.js

@@ -1,12 +1,10 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { SimpleTaskViewerComponent } from './simple-task-viewer.component';
 import { GanttTaskViewerComponent } from './gantt-task-viewer.component';
 import * as i0 from "@angular/core";
-import * as i1 from "@angular/common";
 const _c0 = () => [];
-function TaskComponent_div_1_h2_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "h2", 10);
+function TaskComponent_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "h2", 6);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -14,8 +12,8 @@ function TaskComponent_div_1_h2_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r0.title);
 } }
-function TaskComponent_div_1_p_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 11);
+function TaskComponent_Conditional_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 7);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -23,17 +21,17 @@ function TaskComponent_div_1_p_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r0.description);
 } }
-function TaskComponent_div_1_div_4_Template(rf, ctx) { if (rf & 1) {
+function TaskComponent_Conditional_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 12)(1, "button", 13);
-    i0.ɵɵlistener("click", function TaskComponent_div_1_div_4_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.setViewMode("gantt")); });
-    i0.ɵɵelement(2, "i", 14);
+    i0.ɵɵelementStart(0, "div", 8)(1, "button", 9);
+    i0.ɵɵlistener("click", function TaskComponent_Conditional_1_Conditional_4_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.setViewMode("gantt")); });
+    i0.ɵɵelement(2, "i", 10);
     i0.ɵɵelementStart(3, "span");
     i0.ɵɵtext(4, "Gantt");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "button", 15);
-    i0.ɵɵlistener("click", function TaskComponent_div_1_div_4_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.setViewMode("simple")); });
-    i0.ɵɵelement(6, "i", 16);
+    i0.ɵɵelementStart(5, "button", 11);
+    i0.ɵɵlistener("click", function TaskComponent_Conditional_1_Conditional_4_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.setViewMode("simple")); });
+    i0.ɵɵelement(6, "i", 12);
     i0.ɵɵelementStart(7, "span");
     i0.ɵɵtext(8, "List");
     i0.ɵɵelementEnd()()();
@@ -44,34 +42,35 @@ function TaskComponent_div_1_div_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(4);
     i0.ɵɵclassProp("active", ctx_r0.viewMode === "simple");
 } }
-function TaskComponent_div_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 5)(1, "div", 6);
-    i0.ɵɵtemplate(2, TaskComponent_div_1_h2_2_Template, 2, 1, "h2", 7)(3, TaskComponent_div_1_p_3_Template, 2, 1, "p", 8);
+function TaskComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 1)(1, "div", 5);
+    i0.ɵɵconditionalCreate(2, TaskComponent_Conditional_1_Conditional_2_Template, 2, 1, "h2", 6);
+    i0.ɵɵconditionalCreate(3, TaskComponent_Conditional_1_Conditional_3_Template, 2, 1, "p", 7);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(4, TaskComponent_div_1_div_4_Template, 9, 4, "div", 9);
+    i0.ɵɵconditionalCreate(4, TaskComponent_Conditional_1_Conditional_4_Template, 9, 4, "div", 8);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r0.title);
+    i0.ɵɵconditional(ctx_r0.title ? 2 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r0.description);
+    i0.ɵɵconditional(ctx_r0.description ? 3 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r0.showViewToggle);
+    i0.ɵɵconditional(ctx_r0.showViewToggle ? 4 : -1);
 } }
-function TaskComponent_mj_simple_task_viewer_3_Template(rf, ctx) { if (rf & 1) {
+function TaskComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-simple-task-viewer", 17);
-    i0.ɵɵlistener("taskClicked", function TaskComponent_mj_simple_task_viewer_3_Template_mj_simple_task_viewer_taskClicked_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onTaskClicked($event)); })("openEntityRecord", function TaskComponent_mj_simple_task_viewer_3_Template_mj_simple_task_viewer_openEntityRecord_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onOpenEntityRecord($event)); });
+    i0.ɵɵelementStart(0, "mj-simple-task-viewer", 13);
+    i0.ɵɵlistener("taskClicked", function TaskComponent_Conditional_3_Template_mj_simple_task_viewer_taskClicked_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onTaskClicked($event)); })("openEntityRecord", function TaskComponent_Conditional_3_Template_mj_simple_task_viewer_openEntityRecord_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onOpenEntityRecord($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("tasks", ctx_r0.tasks)("agentRunMap", ctx_r0.agentRunMap);
 } }
-function TaskComponent_mj_gantt_task_viewer_4_Template(rf, ctx) { if (rf & 1) {
+function TaskComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-gantt-task-viewer", 18);
-    i0.ɵɵlistener("taskClicked", function TaskComponent_mj_gantt_task_viewer_4_Template_mj_gantt_task_viewer_taskClicked_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onTaskClicked($event)); })("openEntityRecord", function TaskComponent_mj_gantt_task_viewer_4_Template_mj_gantt_task_viewer_openEntityRecord_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onOpenEntityRecord($event)); });
+    i0.ɵɵelementStart(0, "mj-gantt-task-viewer", 14);
+    i0.ɵɵlistener("taskClicked", function TaskComponent_Conditional_4_Template_mj_gantt_task_viewer_taskClicked_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onTaskClicked($event)); })("openEntityRecord", function TaskComponent_Conditional_4_Template_mj_gantt_task_viewer_openEntityRecord_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onOpenEntityRecord($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -105,73 +104,83 @@ export class TaskComponent {
         this.openEntityRecord.emit(event);
     }
     static ɵfac = function TaskComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TaskComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TaskComponent, selectors: [["mj-task"]], inputs: { tasks: "tasks", ganttTasks: "ganttTasks", taskDependencies: "taskDependencies", agentRunMap: "agentRunMap", title: "title", description: "description", showHeader: "showHeader", showViewToggle: "showViewToggle", viewMode: "viewMode" }, outputs: { viewModeChanged: "viewModeChanged", taskClicked: "taskClicked", openEntityRecord: "openEntityRecord" }, standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 5, vars: 3, consts: [[1, "task-component"], ["class", "task-header", 4, "ngIf"], [1, "task-viewer"], [3, "tasks", "agentRunMap", "taskClicked", "openEntityRecord", 4, "ngIf"], [3, "tasks", "taskDependencies", "agentRunMap", "taskClicked", "openEntityRecord", 4, "ngIf"], [1, "task-header"], [1, "header-left"], ["class", "task-title", 4, "ngIf"], ["class", "task-description", 4, "ngIf"], ["class", "view-toggle", 4, "ngIf"], [1, "task-title"], [1, "task-description"], [1, "view-toggle"], ["title", "Gantt Chart", 1, "toggle-btn", 3, "click"], [1, "fas", "fa-chart-gantt"], ["title", "List View", 1, "toggle-btn", 3, "click"], [1, "fas", "fa-list"], [3, "taskClicked", "openEntityRecord", "tasks", "agentRunMap"], [3, "taskClicked", "openEntityRecord", "tasks", "taskDependencies", "agentRunMap"]], template: function TaskComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TaskComponent, selectors: [["mj-task"]], inputs: { tasks: "tasks", ganttTasks: "ganttTasks", taskDependencies: "taskDependencies", agentRunMap: "agentRunMap", title: "title", description: "description", showHeader: "showHeader", showViewToggle: "showViewToggle", viewMode: "viewMode" }, outputs: { viewModeChanged: "viewModeChanged", taskClicked: "taskClicked", openEntityRecord: "openEntityRecord" }, decls: 5, vars: 3, consts: [[1, "task-component"], [1, "task-header"], [1, "task-viewer"], [3, "tasks", "agentRunMap"], [3, "tasks", "taskDependencies", "agentRunMap"], [1, "header-left"], [1, "task-title"], [1, "task-description"], [1, "view-toggle"], ["title", "Gantt Chart", 1, "toggle-btn", 3, "click"], [1, "fas", "fa-chart-gantt"], ["title", "List View", 1, "toggle-btn", 3, "click"], [1, "fas", "fa-list"], [3, "taskClicked", "openEntityRecord", "tasks", "agentRunMap"], [3, "taskClicked", "openEntityRecord", "tasks", "taskDependencies", "agentRunMap"]], template: function TaskComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵtemplate(1, TaskComponent_div_1_Template, 5, 3, "div", 1);
+            i0.ɵɵconditionalCreate(1, TaskComponent_Conditional_1_Template, 5, 3, "div", 1);
             i0.ɵɵelementStart(2, "div", 2);
-            i0.ɵɵtemplate(3, TaskComponent_mj_simple_task_viewer_3_Template, 1, 2, "mj-simple-task-viewer", 3)(4, TaskComponent_mj_gantt_task_viewer_4_Template, 1, 4, "mj-gantt-task-viewer", 4);
+            i0.ɵɵconditionalCreate(3, TaskComponent_Conditional_3_Template, 1, 2, "mj-simple-task-viewer", 3);
+            i0.ɵɵconditionalCreate(4, TaskComponent_Conditional_4_Template, 1, 4, "mj-gantt-task-viewer", 4);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.showHeader);
+            i0.ɵɵconditional(ctx.showHeader ? 1 : -1);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", ctx.viewMode === "simple");
+            i0.ɵɵconditional(ctx.viewMode === "simple" ? 3 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.viewMode === "gantt");
-        } }, dependencies: [CommonModule, i1.NgIf, SimpleTaskViewerComponent, GanttTaskViewerComponent], styles: [".task-component[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: #FAFAFA;\n    }\n\n    .task-header[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: flex-start;\n      gap: 20px;\n      padding: 20px 24px;\n      background: white;\n      border-bottom: 1px solid #E5E7EB;\n    }\n\n    .header-left[_ngcontent-%COMP%] {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .task-title[_ngcontent-%COMP%] {\n      margin: 0 0 8px 0;\n      font-size: 20px;\n      font-weight: 700;\n      color: #111827;\n    }\n\n    .task-description[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 14px;\n      color: #6B7280;\n      line-height: 1.5;\n    }\n\n    .view-toggle[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 8px;\n      background: #F3F4F6;\n      padding: 4px;\n      border-radius: 8px;\n    }\n\n    .toggle-btn[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 8px 16px;\n      border: none;\n      background: transparent;\n      color: #6B7280;\n      font-size: 13px;\n      font-weight: 600;\n      border-radius: 6px;\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n\n    .toggle-btn[_ngcontent-%COMP%]:hover {\n      color: #111827;\n      background: rgba(255, 255, 255, 0.5);\n    }\n\n    .toggle-btn.active[_ngcontent-%COMP%] {\n      background: white;\n      color: #3B82F6;\n      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n    }\n\n    .toggle-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 14px;\n    }\n\n    .task-viewer[_ngcontent-%COMP%] {\n      flex: 1;\n      min-height: 0;\n      overflow: hidden;\n    }"] });
+            i0.ɵɵconditional(ctx.viewMode === "gantt" ? 4 : -1);
+        } }, dependencies: [SimpleTaskViewerComponent, GanttTaskViewerComponent], styles: [".task-component[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: #FAFAFA;\n    }\n\n    .task-header[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: flex-start;\n      gap: 20px;\n      padding: 20px 24px;\n      background: white;\n      border-bottom: 1px solid #E5E7EB;\n    }\n\n    .header-left[_ngcontent-%COMP%] {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .task-title[_ngcontent-%COMP%] {\n      margin: 0 0 8px 0;\n      font-size: 20px;\n      font-weight: 700;\n      color: #111827;\n    }\n\n    .task-description[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 14px;\n      color: #6B7280;\n      line-height: 1.5;\n    }\n\n    .view-toggle[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 8px;\n      background: #F3F4F6;\n      padding: 4px;\n      border-radius: 8px;\n    }\n\n    .toggle-btn[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 8px 16px;\n      border: none;\n      background: transparent;\n      color: #6B7280;\n      font-size: 13px;\n      font-weight: 600;\n      border-radius: 6px;\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n\n    .toggle-btn[_ngcontent-%COMP%]:hover {\n      color: #111827;\n      background: rgba(255, 255, 255, 0.5);\n    }\n\n    .toggle-btn.active[_ngcontent-%COMP%] {\n      background: white;\n      color: #3B82F6;\n      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n    }\n\n    .toggle-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 14px;\n    }\n\n    .task-viewer[_ngcontent-%COMP%] {\n      flex: 1;\n      min-height: 0;\n      overflow: hidden;\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TaskComponent, [{
         type: Component,
-        args: [{ selector: 'mj-task', standalone: true, imports: [CommonModule, SimpleTaskViewerComponent, GanttTaskViewerComponent], template: `
+        args: [{ selector: 'mj-task', standalone: true, imports: [SimpleTaskViewerComponent, GanttTaskViewerComponent], template: `
     <div class="task-component">
       <!-- Header with View Toggle -->
-      <div class="task-header" *ngIf="showHeader">
-        <div class="header-left">
-          <h2 class="task-title" *ngIf="title">{{ title }}</h2>
-          <p class="task-description" *ngIf="description">{{ description }}</p>
+      @if (showHeader) {
+        <div class="task-header">
+          <div class="header-left">
+            @if (title) {
+              <h2 class="task-title">{{ title }}</h2>
+            }
+            @if (description) {
+              <p class="task-description">{{ description }}</p>
+            }
+          </div>
+          @if (showViewToggle) {
+            <div class="view-toggle">
+              <button
+                class="toggle-btn"
+                [class.active]="viewMode === 'gantt'"
+                (click)="setViewMode('gantt')"
+                title="Gantt Chart">
+                <i class="fas fa-chart-gantt"></i>
+                <span>Gantt</span>
+              </button>
+              <button
+                class="toggle-btn"
+                [class.active]="viewMode === 'simple'"
+                (click)="setViewMode('simple')"
+                title="List View">
+                <i class="fas fa-list"></i>
+                <span>List</span>
+              </button>
+            </div>
+          }
         </div>
-
-        <div class="view-toggle" *ngIf="showViewToggle">
-          <button
-            class="toggle-btn"
-            [class.active]="viewMode === 'gantt'"
-            (click)="setViewMode('gantt')"
-            title="Gantt Chart">
-            <i class="fas fa-chart-gantt"></i>
-            <span>Gantt</span>
-          </button>
-          <button
-            class="toggle-btn"
-            [class.active]="viewMode === 'simple'"
-            (click)="setViewMode('simple')"
-            title="List View">
-            <i class="fas fa-list"></i>
-            <span>List</span>
-          </button>
-        </div>
-      </div>
-
+      }
+    
       <!-- Task Viewer (Simple or Gantt) -->
       <div class="task-viewer">
-        <mj-simple-task-viewer
-          *ngIf="viewMode === 'simple'"
-          [tasks]="tasks"
-          [agentRunMap]="agentRunMap"
-          (taskClicked)="onTaskClicked($event)"
-          (openEntityRecord)="onOpenEntityRecord($event)">
-        </mj-simple-task-viewer>
-
-        <mj-gantt-task-viewer
-          *ngIf="viewMode === 'gantt'"
-          [tasks]="ganttTasks || tasks"
-          [taskDependencies]="taskDependencies || []"
-          [agentRunMap]="agentRunMap"
-          (taskClicked)="onTaskClicked($event)"
-          (openEntityRecord)="onOpenEntityRecord($event)">
-        </mj-gantt-task-viewer>
+        @if (viewMode === 'simple') {
+          <mj-simple-task-viewer
+            [tasks]="tasks"
+            [agentRunMap]="agentRunMap"
+            (taskClicked)="onTaskClicked($event)"
+            (openEntityRecord)="onOpenEntityRecord($event)">
+          </mj-simple-task-viewer>
+        }
+    
+        @if (viewMode === 'gantt') {
+          <mj-gantt-task-viewer
+            [tasks]="ganttTasks || tasks"
+            [taskDependencies]="taskDependencies || []"
+            [agentRunMap]="agentRunMap"
+            (taskClicked)="onTaskClicked($event)"
+            (openEntityRecord)="onOpenEntityRecord($event)">
+          </mj-gantt-task-viewer>
+        }
       </div>
     </div>
-  `, styles: ["\n    .task-component {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: #FAFAFA;\n    }\n\n    .task-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: flex-start;\n      gap: 20px;\n      padding: 20px 24px;\n      background: white;\n      border-bottom: 1px solid #E5E7EB;\n    }\n\n    .header-left {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .task-title {\n      margin: 0 0 8px 0;\n      font-size: 20px;\n      font-weight: 700;\n      color: #111827;\n    }\n\n    .task-description {\n      margin: 0;\n      font-size: 14px;\n      color: #6B7280;\n      line-height: 1.5;\n    }\n\n    .view-toggle {\n      display: flex;\n      gap: 8px;\n      background: #F3F4F6;\n      padding: 4px;\n      border-radius: 8px;\n    }\n\n    .toggle-btn {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 8px 16px;\n      border: none;\n      background: transparent;\n      color: #6B7280;\n      font-size: 13px;\n      font-weight: 600;\n      border-radius: 6px;\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n\n    .toggle-btn:hover {\n      color: #111827;\n      background: rgba(255, 255, 255, 0.5);\n    }\n\n    .toggle-btn.active {\n      background: white;\n      color: #3B82F6;\n      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n    }\n\n    .toggle-btn i {\n      font-size: 14px;\n    }\n\n    .task-viewer {\n      flex: 1;\n      min-height: 0;\n      overflow: hidden;\n    }\n  "] }]
+    `, styles: ["\n    .task-component {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: #FAFAFA;\n    }\n\n    .task-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: flex-start;\n      gap: 20px;\n      padding: 20px 24px;\n      background: white;\n      border-bottom: 1px solid #E5E7EB;\n    }\n\n    .header-left {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .task-title {\n      margin: 0 0 8px 0;\n      font-size: 20px;\n      font-weight: 700;\n      color: #111827;\n    }\n\n    .task-description {\n      margin: 0;\n      font-size: 14px;\n      color: #6B7280;\n      line-height: 1.5;\n    }\n\n    .view-toggle {\n      display: flex;\n      gap: 8px;\n      background: #F3F4F6;\n      padding: 4px;\n      border-radius: 8px;\n    }\n\n    .toggle-btn {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 8px 16px;\n      border: none;\n      background: transparent;\n      color: #6B7280;\n      font-size: 13px;\n      font-weight: 600;\n      border-radius: 6px;\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n\n    .toggle-btn:hover {\n      color: #111827;\n      background: rgba(255, 255, 255, 0.5);\n    }\n\n    .toggle-btn.active {\n      background: white;\n      color: #3B82F6;\n      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n    }\n\n    .toggle-btn i {\n      font-size: 14px;\n    }\n\n    .task-viewer {\n      flex: 1;\n      min-height: 0;\n      overflow: hidden;\n    }\n  "] }]
     }], null, { tasks: [{
             type: Input
         }], ganttTasks: [{
@@ -197,5 +206,5 @@ export class TaskComponent {
         }], openEntityRecord: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TaskComponent, { className: "TaskComponent", filePath: "src/lib/components/task.component.ts", lineNumber: 148 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TaskComponent, { className: "TaskComponent", filePath: "src/lib/components/task.component.ts", lineNumber: 157 }); })();
 //# sourceMappingURL=task.component.js.map

package/dist/lib/components/task.component.js.map

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

package/dist/lib/ng-tasks.module.js

@@ -11,8 +11,7 @@ export class NgTasksModule {
     static ɵfac = function NgTasksModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || NgTasksModule)(); };
     static ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: NgTasksModule });
     static ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [TaskComponent,
-            SimpleTaskViewerComponent,
-            GanttTaskViewerComponent] });
+            SimpleTaskViewerComponent] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NgTasksModule, [{
         type: NgModule,

package/dist/lib/ng-tasks.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"ng-tasks.module.js","sourceRoot":"","sources":["../../src/lib/ng-tasks.module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,yBAAyB,EAAE,MAAM,2CAA2C,CAAC;AACtF,OAAO,EAAE,wBAAwB,EAAE,MAAM,0CAA0C,CAAC;;AAEpF;;;GAGG;AAaH,MAAM,OAAO,aAAa;uGAAb,aAAa;4DAAb,aAAa;gEAVtB,aAAa;YACb,yBAAyB;YACzB,wBAAwB;;iFAQf,aAAa;cAZzB,QAAQ;eAAC;gBACR,OAAO,EAAE;oBACP,aAAa;oBACb,yBAAyB;oBACzB,wBAAwB;iBACzB;gBACD,OAAO,EAAE;oBACP,aAAa;oBACb,yBAAyB;oBACzB,wBAAwB;iBACzB;aACF;;wFACY,aAAa,cAVtB,aAAa;QACb,yBAAyB;QACzB,wBAAwB,aAGxB,aAAa;QACb,yBAAyB;QACzB,wBAAwB"}
+{"version":3,"file":"ng-tasks.module.js","sourceRoot":"","sources":["../../src/lib/ng-tasks.module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,yBAAyB,EAAE,MAAM,2CAA2C,CAAC;AACtF,OAAO,EAAE,wBAAwB,EAAE,MAAM,0CAA0C,CAAC;;AAEpF;;;GAGG;AAaH,MAAM,OAAO,aAAa;uGAAb,aAAa;4DAAb,aAAa;gEAVtB,aAAa;YACb,yBAAyB;;iFAShB,aAAa;cAZzB,QAAQ;eAAC;gBACR,OAAO,EAAE;oBACP,aAAa;oBACb,yBAAyB;oBACzB,wBAAwB;iBACzB;gBACD,OAAO,EAAE;oBACP,aAAa;oBACb,yBAAyB;oBACzB,wBAAwB;iBACzB;aACF;;wFACY,aAAa,cAVtB,aAAa;QACb,yBAAyB;QACzB,wBAAwB,aAGxB,aAAa;QACb,yBAAyB;QACzB,wBAAwB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memberjunction/ng-tasks",
-  "version": "3.4.0",
+  "version": "4.0.0",
   "description": "MemberJunction: Angular components for task visualization and management with Gantt chart support",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -9,20 +9,20 @@
     "watch": "ngc --watch"
   },
   "dependencies": {
-    "@angular/animations": "18.2.14",
-    "@angular/common": "18.2.14",
-    "@angular/core": "18.2.14",
-    "@angular/platform-browser": "18.2.14",
-    "@memberjunction/core": "3.4.0",
-    "@memberjunction/core-entities": "3.4.0",
-    "@memberjunction/ai-core-plus": "3.4.0",
-    "@memberjunction/ai-engine-base": "3.4.0",
-    "dhtmlx-gantt": "^8.0.10",
-    "rxjs": "^7.8.1"
+    "@angular/animations": "21.1.3",
+    "@angular/common": "21.1.3",
+    "@angular/core": "21.1.3",
+    "@angular/platform-browser": "21.1.3",
+    "@memberjunction/core": "4.0.0",
+    "@memberjunction/core-entities": "4.0.0",
+    "@memberjunction/ai-core-plus": "4.0.0",
+    "@memberjunction/ai-engine-base": "4.0.0",
+    "dhtmlx-gantt": "^9.1.1",
+    "rxjs": "^7.8.2"
   },
   "peerDependencies": {
-    "@angular/common": "18.2.14",
-    "@angular/core": "18.2.14"
+    "@angular/common": "21.1.3",
+    "@angular/core": "21.1.3"
   },
   "author": "MemberJunction",
   "license": "MIT",

package/src/lib/components/gantt-task-viewer.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, Output, EventEmitter, OnChanges, AfterViewInit, ElementRef, ViewChild, OnDestroy, HostListener } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { TaskEntity, TaskDependencyEntity } from '@memberjunction/core-entities';
 import { gantt } from 'dhtmlx-gantt';
 import { TaskDetailPanelComponent } from './task-detail-panel.component';
@@ -10,31 +10,37 @@ import { TaskDetailPanelComponent } from './task-detail-panel.component';
 @Component({
   selector: 'mj-gantt-task-viewer',
   standalone: true,
-  imports: [CommonModule, TaskDetailPanelComponent],
+  imports: [TaskDetailPanelComponent],
   template: `
     <div class="gantt-task-viewer">
-      <div *ngIf="!tasks || tasks.length === 0" class="no-tasks">
-        <i class="fas fa-chart-gantt"></i>
-        <p>No tasks to display in Gantt view</p>
-      </div>
-
-      <div *ngIf="tasks && tasks.length > 0" class="gantt-layout">
-        <div #ganttContainer class="gantt-container"></div>
-
-        <div *ngIf="selectedTask" class="gantt-resizer"
-             (mousedown)="startResize($event)"></div>
-
-        <div *ngIf="selectedTask" class="task-detail-panel" [style.width.px]="detailPanelWidth">
-          <mj-task-detail-panel
-            [task]="selectedTask"
-            [agentRunId]="getAgentRunId(selectedTask)"
-            (closePanel)="closeDetailPanel()"
-            (openEntityRecord)="onOpenEntityRecord($event)">
-          </mj-task-detail-panel>
+      @if (!tasks || tasks.length === 0) {
+        <div class="no-tasks">
+          <i class="fas fa-chart-gantt"></i>
+          <p>No tasks to display in Gantt view</p>
+        </div>
+      }
+    
+      @if (tasks && tasks.length > 0) {
+        <div class="gantt-layout">
+          <div #ganttContainer class="gantt-container"></div>
+          @if (selectedTask) {
+            <div class="gantt-resizer"
+            (mousedown)="startResize($event)"></div>
+          }
+          @if (selectedTask) {
+            <div class="task-detail-panel" [style.width.px]="detailPanelWidth">
+              <mj-task-detail-panel
+                [task]="selectedTask"
+                [agentRunId]="getAgentRunId(selectedTask)"
+                (closePanel)="closeDetailPanel()"
+                (openEntityRecord)="onOpenEntityRecord($event)">
+              </mj-task-detail-panel>
+            </div>
+          }
         </div>
-      </div>
+      }
     </div>
-  `,
+    `,
   styles: [`
     .gantt-task-viewer {
       height: 100%;

package/src/lib/components/simple-task-viewer.component.ts

@@ -14,69 +14,83 @@ import { TaskDetailPanelComponent } from './task-detail-panel.component';
     <div class="simple-task-viewer">
       <div class="list-layout">
         <div class="task-list" [class.with-detail]="selectedTask">
-        <div *ngFor="let task of tasks"
-             class="task-item"
-             [class.completed]="task.Status === 'Complete'"
-             [class.selected]="selectedTask?.ID === task.ID"
-             (click)="onTaskClick(task)">
-
-          <!-- Status Icon -->
-          <div class="status-icon" [class.complete]="task.Status === 'Complete'">
-            <i class="fas" [ngClass]="getStatusIcon(task.Status)"></i>
-          </div>
-
-          <!-- Task Content -->
-          <div class="task-content">
-            <div class="task-header">
-              <div class="task-title-row">
-                <span class="task-title" [class.completed-text]="task.Status === 'Complete'">
-                  {{ task.Name }}
-                  <i *ngIf="task.Status === 'Complete'" class="fas fa-check completed-check"></i>
-                </span>
-                <!-- Compact progress indicator for all tasks -->
-                <div *ngIf="task.PercentComplete != null" class="task-progress-compact">
-                  <div class="progress-bar-compact">
-                    <div class="progress-fill-compact"
-                         [style.width.%]="task.PercentComplete"
-                         [class.complete]="task.Status === 'Complete'"></div>
+          @for (task of tasks; track task) {
+            <div
+              class="task-item"
+              [class.completed]="task.Status === 'Complete'"
+              [class.selected]="selectedTask?.ID === task.ID"
+              (click)="onTaskClick(task)">
+              <!-- Status Icon -->
+              <div class="status-icon" [class.complete]="task.Status === 'Complete'">
+                <i class="fas" [ngClass]="getStatusIcon(task.Status)"></i>
+              </div>
+              <!-- Task Content -->
+              <div class="task-content">
+                <div class="task-header">
+                  <div class="task-title-row">
+                    <span class="task-title" [class.completed-text]="task.Status === 'Complete'">
+                      {{ task.Name }}
+                      @if (task.Status === 'Complete') {
+                        <i class="fas fa-check completed-check"></i>
+                      }
+                    </span>
+                    <!-- Compact progress indicator for all tasks -->
+                    @if (task.PercentComplete != null) {
+                      <div class="task-progress-compact">
+                        <div class="progress-bar-compact">
+                          <div class="progress-fill-compact"
+                            [style.width.%]="task.PercentComplete"
+                          [class.complete]="task.Status === 'Complete'"></div>
+                        </div>
+                        <span class="progress-text-compact">{{ task.PercentComplete }}%</span>
+                      </div>
+                    }
                   </div>
-                  <span class="progress-text-compact">{{ task.PercentComplete }}%</span>
+                  <span class="task-meta">
+                    @if (task.DueAt) {
+                      <span class="due-date">
+                        <i class="far fa-calendar"></i>
+                        {{ formatDate(task.DueAt) }}
+                      </span>
+                    }
+                    @if (task.User) {
+                      <span class="assigned-to">
+                        <i class="far fa-user"></i>
+                        {{ task.User }}
+                      </span>
+                    }
+                  </span>
                 </div>
               </div>
-              <span class="task-meta">
-                <span *ngIf="task.DueAt" class="due-date">
-                  <i class="far fa-calendar"></i>
-                  {{ formatDate(task.DueAt) }}
-                </span>
-                <span *ngIf="task.User" class="assigned-to">
-                  <i class="far fa-user"></i>
-                  {{ task.User }}
-                </span>
-              </span>
             </div>
-          </div>
-        </div>
-
-        <div *ngIf="!tasks || tasks.length === 0" class="no-tasks">
-          <i class="fas fa-tasks"></i>
-          <p>No tasks to display</p>
-        </div>
-        </div>
-
-        <div *ngIf="selectedTask" class="list-resizer"
-             (mousedown)="startResize($event)"></div>
-
-        <div *ngIf="selectedTask" class="task-detail-panel" [style.width.px]="detailPanelWidth">
-          <mj-task-detail-panel
-            [task]="selectedTask"
-            [agentRunId]="getAgentRunId(selectedTask)"
-            (closePanel)="closeDetailPanel()"
-            (openEntityRecord)="onOpenEntityRecord($event)">
-          </mj-task-detail-panel>
+          }
+    
+          @if (!tasks || tasks.length === 0) {
+            <div class="no-tasks">
+              <i class="fas fa-tasks"></i>
+              <p>No tasks to display</p>
+            </div>
+          }
         </div>
+    
+        @if (selectedTask) {
+          <div class="list-resizer"
+          (mousedown)="startResize($event)"></div>
+        }
+    
+        @if (selectedTask) {
+          <div class="task-detail-panel" [style.width.px]="detailPanelWidth">
+            <mj-task-detail-panel
+              [task]="selectedTask"
+              [agentRunId]="getAgentRunId(selectedTask)"
+              (closePanel)="closeDetailPanel()"
+              (openEntityRecord)="onOpenEntityRecord($event)">
+            </mj-task-detail-panel>
+          </div>
+        }
       </div>
     </div>
-  `,
+    `,
   styles: [`
     .simple-task-viewer {
       height: 100%;