tg-ganttchart 0.0.14 → 0.0.16

package/dist/tgganttchart.umd.js

@@ -3385,7 +3385,7 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ var setPublicPath = (null);
 
-;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/GanttElastic.standalone.vue?vue&type=template&id=ba4781dc
+;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/GanttElastic.standalone.vue?vue&type=template&id=6d043e84
 var render = function render() {
   var _vm = this,
     _c = _vm._self._c;
@@ -3393,7 +3393,11 @@ var render = function render() {
     attrs: {
       "tasks": _vm.tasks,
       "options": _vm.options,
-      "dynamicStyle": _vm.dynamicStyle
+      "dynamicStyle": _vm.dynamicStyle,
+      "isHeaderVisible": _vm.isHeaderVisible,
+      "projectName": _vm.projectName,
+      "headerLeftSideLabels": _vm.headerLeftSideLabels,
+      "headerLegendConfig": _vm.headerLegendConfig
     },
     on: {
       "task-updated": function ($event) {
@@ -3417,8 +3421,35 @@ var render = function render() {
       "dynamic-style-changed": function ($event) {
         return _vm.$emit('dynamic-style-changed', $event);
       },
+      "action-button-clicked": function ($event) {
+        return _vm.$emit('action-button-clicked', $event);
+      },
+      "calendar-recalculate": function ($event) {
+        return _vm.$emit('calendar-recalculate', $event);
+      },
+      "created": function ($event) {
+        return _vm.$emit('created', $event);
+      },
+      "before-mount": function ($event) {
+        return _vm.$emit('before-mount', $event);
+      },
+      "ready": function ($event) {
+        return _vm.$emit('ready', $event);
+      },
       "mounted": function ($event) {
         return _vm.$emit('mounted', $event);
+      },
+      "before-update": function ($event) {
+        return _vm.$emit('before-update', $event);
+      },
+      "updated": function ($event) {
+        return _vm.$emit('updated', $event);
+      },
+      "before-destroy": function ($event) {
+        return _vm.$emit('before-destroy', $event);
+      },
+      "destroyed": function ($event) {
+        return _vm.$emit('destroyed', $event);
       }
     }
   }, [_vm.components.header ? _c(_vm.components.header, {
@@ -3437,8 +3468,8 @@ var render = function render() {
 };
 var staticRenderFns = [];
 
-;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/GanttElastic.vue?vue&type=template&id=95091692
-var GanttElasticvue_type_template_id_95091692_render = function render() {
+;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/GanttElastic.vue?vue&type=template&id=2e042034
+var GanttElasticvue_type_template_id_2e042034_render = function render() {
   var _vm = this,
     _c = _vm._self._c,
     _setup = _vm._self._setupProxy;
@@ -3454,7 +3485,9 @@ var GanttElasticvue_type_template_id_95091692_render = function render() {
     slot: "header"
   }) : _vm._e(), _c('gantt-view-filter', {
     attrs: {
-      "slot": "header"
+      "slot": "header",
+      "left-side-labels": _vm.headerLeftSideLabels,
+      "legend-config": _vm.headerLegendConfig
     },
     on: {
       "view-mode-changed": _vm.onViewModeChanged
@@ -3467,7 +3500,7 @@ var GanttElasticvue_type_template_id_95091692_render = function render() {
     }
   }), _vm._t("footer")], 2);
 };
-var GanttElasticvue_type_template_id_95091692_staticRenderFns = [];
+var GanttElasticvue_type_template_id_2e042034_staticRenderFns = [];
 
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.push.js
 var es_array_push = __webpack_require__(4114);
@@ -3498,14 +3531,37 @@ var esnext_iterator_reduce = __webpack_require__(8872);
 // EXTERNAL MODULE: ./node_modules/dayjs/dayjs.min.js
 var dayjs_min = __webpack_require__(4353);
 var dayjs_min_default = /*#__PURE__*/__webpack_require__.n(dayjs_min);
-;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Header/GanttViewFilter.vue?vue&type=template&id=f4bb58fc&scoped=true
-var GanttViewFiltervue_type_template_id_f4bb58fc_scoped_true_render = function render() {
+;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Header/GanttViewFilter.vue?vue&type=template&id=eb2e1196&scoped=true
+var GanttViewFiltervue_type_template_id_eb2e1196_scoped_true_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
     staticClass: "gantt-view-filter"
   }, [_c('div', {
     staticClass: "view-toggle-group"
+  }, [_c('div', {
+    staticClass: "left-side-labels"
+  }, _vm._l(_vm.leftSideLabels, function (label, index) {
+    return _c('span', {
+      key: index,
+      staticClass: "left-label-item"
+    }, [_vm._v(" " + _vm._s(label) + " ")]);
+  }), 0), _c('div', {
+    staticClass: "legend-section"
+  }, _vm._l(_vm.legendItems, function (legendItem) {
+    return _c('span', {
+      key: legendItem.type,
+      staticClass: "legend-item-wrapper"
+    }, [_c('span', {
+      staticClass: "colorboxsquare",
+      style: {
+        backgroundColor: legendItem.color
+      }
+    }), _c('span', {
+      staticClass: "legend-label"
+    }, [_vm._v(_vm._s(legendItem.label))])]);
+  }), 0), _c('div', {
+    staticClass: "view-toggle-buttons"
   }, [_c('button', {
     staticClass: "view-toggle-btn",
     class: {
@@ -3518,7 +3574,7 @@ var GanttViewFiltervue_type_template_id_f4bb58fc_scoped_true_render = function r
     }
   }, [_c('span', {
     staticClass: "view-icon"
-  }, [_vm._v("📅")]), _c('span', {
+  }), _c('span', {
     staticClass: "view-label"
   }, [_vm._v("Day")])]), _c('button', {
     staticClass: "view-toggle-btn",
@@ -3532,7 +3588,7 @@ var GanttViewFiltervue_type_template_id_f4bb58fc_scoped_true_render = function r
     }
   }, [_c('span', {
     staticClass: "view-icon"
-  }, [_vm._v("📊")]), _c('span', {
+  }), _c('span', {
     staticClass: "view-label"
   }, [_vm._v("Week")])]), _c('button', {
     staticClass: "view-toggle-btn",
@@ -3546,7 +3602,7 @@ var GanttViewFiltervue_type_template_id_f4bb58fc_scoped_true_render = function r
     }
   }, [_c('span', {
     staticClass: "view-icon"
-  }, [_vm._v("🗓️")]), _c('span', {
+  }), _c('span', {
     staticClass: "view-label"
   }, [_vm._v("Month")])]), _c('button', {
     staticClass: "view-toggle-btn",
@@ -3560,36 +3616,139 @@ var GanttViewFiltervue_type_template_id_f4bb58fc_scoped_true_render = function r
     }
   }, [_c('span', {
     staticClass: "view-icon"
-  }, [_vm._v("📈")]), _c('span', {
+  }), _c('span', {
     staticClass: "view-label"
-  }, [_vm._v("Quarter")])])])]);
+  }, [_vm._v("Quarter")])])])])]);
 };
-var GanttViewFiltervue_type_template_id_f4bb58fc_scoped_true_staticRenderFns = [];
+var GanttViewFiltervue_type_template_id_eb2e1196_scoped_true_staticRenderFns = [];
 
 ;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Header/GanttViewFilter.vue?vue&type=script&lang=js
+
+
+
+
+
+
+
+
+
+
 /* harmony default export */ var GanttViewFiltervue_type_script_lang_js = ({
   name: 'GanttViewFilter',
+  inject: ['root'],
+  props: {
+    leftSideLabels: {
+      type: Array,
+      default: () => ['Timeline', 'Epic', 'Task Story']
+    },
+    legendConfig: {
+      type: Array,
+      default: () => null // If null, will be computed from tasks
+    }
+  },
   data() {
     return {
       viewMode: 'day' // default view mode
     };
   },
+  computed: {
+    /**
+     * Get unique task types from tasks
+     */
+    uniqueTaskTypes() {
+      if (!this.root || !this.root.state || !this.root.state.tasks) {
+        return [];
+      }
+      const taskTypes = new Set();
+      this.root.state.tasks.forEach(task => {
+        if (task.type) {
+          taskTypes.add(task.type);
+        }
+      });
+      return Array.from(taskTypes);
+    },
+    /**
+     * Color map for task types - matches chart colors
+     */
+    taskTypeColors() {
+      return {
+        'milestone': '#CD5C5C',
+        'task': '#3B82F6',
+        'project': '#8B5CF6',
+        'sprint': '#F59E0B',
+        'flag': '#10B981',
+        'check': '#3B82F6',
+        'epic': '#8B5CF6',
+        'story': '#86EFAC',
+        'subtask': '#3B82F6'
+      };
+    },
+    /**
+     * Task type labels (capitalized, human-readable)
+     */
+    taskTypeLabels() {
+      return {
+        'milestone': 'Milestone',
+        'task': 'Task',
+        'project': 'Project',
+        'sprint': 'Sprint',
+        'flag': 'Flag',
+        'check': 'Check',
+        'epic': 'Epic',
+        'story': 'Story',
+        'subtask': 'Subtask'
+      };
+    },
+    /**
+     * Generate legend items dynamically from tasks or use provided config
+     */
+    legendItems() {
+      // If custom config provided, use it
+      if (this.legendConfig && Array.isArray(this.legendConfig)) {
+        return this.legendConfig;
+      }
+
+      // Otherwise, generate from unique task types
+      const items = [];
+      this.uniqueTaskTypes.forEach(type => {
+        items.push({
+          type: type,
+          label: this.taskTypeLabels[type] || this.capitalizeFirst(type),
+          color: this.taskTypeColors[type] || '#6B7280'
+        });
+      });
+
+      // Sort items in a consistent order (epic, story, task, milestone, etc.)
+      const order = ['epic', 'story', 'task', 'subtask', 'milestone', 'project', 'sprint'];
+      items.sort((a, b) => {
+        const indexA = order.indexOf(a.type);
+        const indexB = order.indexOf(b.type);
+        if (indexA === -1 && indexB === -1) return 0;
+        if (indexA === -1) return 1;
+        if (indexB === -1) return -1;
+        return indexA - indexB;
+      });
+      return items;
+    }
+  },
   methods: {
     changeViewMode(mode) {
-      // eslint-disable-next-line no-debugger
-      debugger;
       this.viewMode = mode;
       // Emit an event to the parent component (App.vue) so it can update the Gantt chart
       this.$emit('view-mode-changed', mode);
+    },
+    capitalizeFirst(str) {
+      if (!str) return '';
+      return str.charAt(0).toUpperCase() + str.slice(1);
     }
   }
 });
 ;// ./src/components/Header/GanttViewFilter.vue?vue&type=script&lang=js
  /* harmony default export */ var Header_GanttViewFiltervue_type_script_lang_js = (GanttViewFiltervue_type_script_lang_js); 
-;// ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-55.use[0]!./node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??clonedRuleSet-55.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-55.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Header/GanttViewFilter.vue?vue&type=style&index=0&id=f4bb58fc&prod&scoped=true&lang=css
+;// ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-55.use[0]!./node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??clonedRuleSet-55.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-55.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Header/GanttViewFilter.vue?vue&type=style&index=0&id=eb2e1196&prod&scoped=true&lang=css
 // extracted by mini-css-extract-plugin
 
-;// ./src/components/Header/GanttViewFilter.vue?vue&type=style&index=0&id=f4bb58fc&prod&scoped=true&lang=css
+;// ./src/components/Header/GanttViewFilter.vue?vue&type=style&index=0&id=eb2e1196&prod&scoped=true&lang=css
 
 ;// ./node_modules/@vue/vue-loader-v15/lib/runtime/componentNormalizer.js
 /* globals __VUE_SSR_CONTEXT__ */
@@ -3700,11 +3859,11 @@ function normalizeComponent(
 
 var component = normalizeComponent(
   Header_GanttViewFiltervue_type_script_lang_js,
-  GanttViewFiltervue_type_template_id_f4bb58fc_scoped_true_render,
-  GanttViewFiltervue_type_template_id_f4bb58fc_scoped_true_staticRenderFns,
+  GanttViewFiltervue_type_template_id_eb2e1196_scoped_true_render,
+  GanttViewFiltervue_type_template_id_eb2e1196_scoped_true_staticRenderFns,
   false,
   null,
-  "f4bb58fc",
+  "eb2e1196",
   null
   
 )
@@ -3883,8 +4042,8 @@ var TaskListvue_type_template_id_b705a4ea_render = function render() {
 };
 var TaskListvue_type_template_id_b705a4ea_staticRenderFns = [];
 
-;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/TaskList/TaskListHeader.vue?vue&type=template&id=2ecc0032
-var TaskListHeadervue_type_template_id_2ecc0032_render = function render() {
+;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/TaskList/TaskListHeader.vue?vue&type=template&id=92de7fea
+var TaskListHeadervue_type_template_id_92de7fea_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
@@ -3904,7 +4063,8 @@ var TaskListHeadervue_type_template_id_2ecc0032_render = function render() {
       staticClass: "gantt-elastic__task-list-header-label",
       style: _vm.headerLabelStyle(column),
       attrs: {
-        "column": column
+        "column": column,
+        "title": _vm.getTooltipText(column)
       },
       on: {
         "mouseup": _vm.resizerMouseUp
@@ -3932,7 +4092,7 @@ var TaskListHeadervue_type_template_id_2ecc0032_render = function render() {
     }), 0)])], 1);
   }), 0);
 };
-var TaskListHeadervue_type_template_id_2ecc0032_staticRenderFns = [];
+var TaskListHeadervue_type_template_id_92de7fea_staticRenderFns = [];
 
 ;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Expander.vue?vue&type=template&id=4831d194
 var Expandervue_type_template_id_4831d194_render = function render() {
@@ -4120,6 +4280,17 @@ var Expander_component = normalizeComponent(
     }
   },
   methods: {
+    getTooltipText(column) {
+      // Return descriptive tooltips for each column
+      const tooltips = {
+        'ID': 'Task identifier number',
+        'Description': 'Task name and description',
+        'Assigned to': 'Person or role responsible for this task',
+        'Start': 'Task start date and time',
+        'Progress': 'Task completion percentage (0-100%)'
+      };
+      return tooltips[column.label] || column.label;
+    },
     columnStyle(column) {
       return {
         ...this.root.style['task-list-header-column'],
@@ -4201,8 +4372,8 @@ var Expander_component = normalizeComponent(
 ;
 var TaskListHeader_component = normalizeComponent(
   TaskList_TaskListHeadervue_type_script_lang_js,
-  TaskListHeadervue_type_template_id_2ecc0032_render,
-  TaskListHeadervue_type_template_id_2ecc0032_staticRenderFns,
+  TaskListHeadervue_type_template_id_92de7fea_render,
+  TaskListHeadervue_type_template_id_92de7fea_staticRenderFns,
   false,
   null,
   null,
@@ -4238,8 +4409,8 @@ var TaskListItemvue_type_template_id_b99d1d94_render = function render() {
 };
 var TaskListItemvue_type_template_id_b99d1d94_staticRenderFns = [];
 
-;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/TaskList/ItemColumn.vue?vue&type=template&id=f410efbc
-var ItemColumnvue_type_template_id_f410efbc_render = function render() {
+;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/TaskList/ItemColumn.vue?vue&type=template&id=6a863d80
+var ItemColumnvue_type_template_id_6a863d80_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
@@ -4254,6 +4425,9 @@ var ItemColumnvue_type_template_id_f410efbc_render = function render() {
   }, [!_vm.html ? _c('div', {
     staticClass: "gantt-elastic__task-list-item-value",
     style: _vm.valueStyle,
+    attrs: {
+      "title": _vm.tooltipText
+    },
     on: {
       "click": function ($event) {
         return _vm.emitEvent('click', $event);
@@ -4311,6 +4485,9 @@ var ItemColumnvue_type_template_id_f410efbc_render = function render() {
   }, [_vm._v(_vm._s(_vm.value))])]) : _c('div', {
     staticClass: "gantt-elastic__task-list-item-value",
     style: _vm.valueStyle,
+    attrs: {
+      "title": _vm.tooltipText
+    },
     on: {
       "click": function ($event) {
         return _vm.emitEvent('click', $event);
@@ -4370,9 +4547,10 @@ var ItemColumnvue_type_template_id_f410efbc_render = function render() {
     }
   })])])], 2)]);
 };
-var ItemColumnvue_type_template_id_f410efbc_staticRenderFns = [];
+var ItemColumnvue_type_template_id_6a863d80_staticRenderFns = [];
 
 ;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/TaskList/ItemColumn.vue?vue&type=script&lang=js
+
 /* harmony default export */ var ItemColumnvue_type_script_lang_js = ({
   name: 'ItemColumn',
   inject: ['root'],
@@ -4388,6 +4566,29 @@ var ItemColumnvue_type_template_id_f410efbc_staticRenderFns = [];
      * @param {Event} event
      */
     emitEvent(eventName, event) {
+      // Handle action button clicks from dynamically generated HTML buttons
+      if (eventName === 'click' && event && event.target) {
+        const button = event.target.closest('.action-btn');
+        if (button) {
+          event.preventDefault();
+          event.stopPropagation();
+          const action = button.getAttribute('data-action');
+          const buttonId = button.getAttribute('data-button-id');
+          const taskId = button.getAttribute('data-task-id');
+
+          // Emit action button click event
+          this.root.$emit('action-button-clicked', {
+            action: action,
+            buttonId: buttonId,
+            taskId: taskId ? isNaN(taskId) ? taskId : parseFloat(taskId) : this.task.id,
+            task: this.task,
+            column: this.column
+          });
+          return;
+        }
+      }
+
+      // Normal column event handling
       if (typeof this.column.events !== 'undefined' && typeof this.column.events[eventName] === 'function') {
         this.column.events[eventName]({
           event,
@@ -4420,10 +4621,109 @@ var ItemColumnvue_type_template_id_f410efbc_staticRenderFns = [];
      * @returns {any|string}
      */
     value() {
+      // Handle function-based column values
       if (typeof this.column.value === 'function') {
-        return this.column.value(this.task);
+        try {
+          const result = this.column.value(this.task);
+          // For Start column: Always use fallback if result is empty/null/undefined
+          // This ensures Start column always displays even if the function fails due to closure issues
+          if (this.column.label === 'Start') {
+            if (result === null || result === undefined || result === '') {
+              return this.formatStartDate();
+            }
+            // If result is valid, return it
+            return result;
+          }
+          // For other columns: return result as is
+          if (result !== null && result !== undefined && result !== '') {
+            return result;
+          }
+          return result || '';
+        } catch (error) {
+          console.error('Error executing column value function:', error, this.column, this.task);
+          // For Start column: Always use fallback on error
+          if (this.column.label === 'Start' && this.task) {
+            return this.formatStartDate();
+          }
+          return '';
+        }
+      }
+      // If column value is a string and it's "start", format it
+      if (this.column.value === 'start' && this.column.label === 'Start') {
+        return this.formatStartDate();
+      }
+      // Handle string-based column values
+      if (typeof this.column.value === 'string') {
+        const taskValue = this.task[this.column.value];
+        return taskValue !== null && taskValue !== undefined ? taskValue : '';
+      }
+      return '';
+    },
+    /**
+     * Format start date for Start column
+     */
+    formatStartDate() {
+      if (!this.task) return '';
+      try {
+        // Try to get start value from different possible properties
+        const startValue = this.task.startTime || this.task.start;
+        if (!startValue) return '';
+
+        // Ensure dayjs is imported and available
+        if (typeof (dayjs_min_default()) === 'undefined') {
+          console.warn('dayjs is not available in ItemColumn, returning raw value');
+          return String(startValue);
+        }
+
+        // Parse with dayjs
+        const date = dayjs_min_default()(startValue);
+
+        // Return formatted date if valid
+        if (date && date.isValid()) {
+          return date.format("YYYY-MM-DD HH:mm A");
+        }
+
+        // Fallback: return as string if date is invalid
+        return String(startValue);
+      } catch (error) {
+        console.error('Error formatting start date in ItemColumn:', error, this.task);
+        // Last resort: return the raw value as string
+        const startValue = this.task.startTime || this.task.start;
+        return startValue ? String(startValue) : '';
       }
-      return this.task[this.column.value];
+    },
+    /**
+     * Get tooltip text for the column value
+     *
+     * @returns {string}
+     */
+    tooltipText() {
+      let tooltipValue = this.value;
+
+      // If value is HTML, strip HTML tags for tooltip
+      if (this.html && typeof tooltipValue === 'string') {
+        // Strip HTML tags using regex (simple approach)
+        tooltipValue = tooltipValue.replace(/<[^>]*>/g, '').trim();
+      }
+
+      // Convert to string if not already
+      const stringValue = String(tooltipValue || '').trim();
+
+      // Format tooltip based on column type
+      if (this.column.label === 'Progress') {
+        return stringValue ? `${stringValue}% complete` : 'Progress not set';
+      } else if (this.column.label === 'Start') {
+        return stringValue ? `Start: ${stringValue}` : 'Start date not set';
+      } else if (this.column.label === 'ID') {
+        return stringValue ? `Task ID: ${stringValue}` : 'No ID';
+      } else if (this.column.label === 'Assigned to') {
+        return stringValue ? `Assigned to: ${stringValue}` : 'Not assigned';
+      } else if (this.column.label === 'Description') {
+        return stringValue || 'No description';
+      }
+
+      // Default: return the value as string
+      return stringValue || '';
     },
     itemColumnStyle() {
       return {
@@ -4554,8 +4854,8 @@ var ItemColumnvue_type_template_id_f410efbc_staticRenderFns = [];
 ;
 var ItemColumn_component = normalizeComponent(
   TaskList_ItemColumnvue_type_script_lang_js,
-  ItemColumnvue_type_template_id_f410efbc_render,
-  ItemColumnvue_type_template_id_f410efbc_staticRenderFns,
+  ItemColumnvue_type_template_id_6a863d80_render,
+  ItemColumnvue_type_template_id_6a863d80_staticRenderFns,
   false,
   null,
   null,
@@ -7156,7 +7456,7 @@ var ProgressBar_component = normalizeComponent(
     document.removeEventListener('click', this.hideContextMenu);
 
     // Clean up context menu
-    this.hideContextMenu();
+    //this.hideContextMenu();
 
     // Clean up date tooltip
     this.removeDateTooltip();
@@ -11340,6 +11640,11 @@ function mergeDeep(target, ...sources) {
   const source = sources.shift();
   if (isObject(target) && isObject(source)) {
     for (const key in source) {
+      // Preserve functions - don't deep merge them
+      if (typeof source[key] === 'function') {
+        target[key] = source[key];
+        continue;
+      }
       if (isObject(source[key])) {
         if (typeof target[key] === 'undefined') {
           target[key] = {};
@@ -11349,7 +11654,15 @@ function mergeDeep(target, ...sources) {
         target[key] = [];
         for (let item of source[key]) {
           if (isObject(item)) {
-            target[key].push(mergeDeep({}, item));
+            // Preserve functions in array items (like column.value functions)
+            const mergedItem = mergeDeep({}, item);
+            // Ensure functions are preserved
+            for (const itemKey in item) {
+              if (typeof item[itemKey] === 'function') {
+                mergedItem[itemKey] = item[itemKey];
+              }
+            }
+            target[key].push(mergedItem);
             continue;
           }
           target[key].push(item);
@@ -11497,7 +11810,7 @@ const GanttElastic = {
     'gantt-header': Header,
     'gantt-view-filter': GanttViewFilter
   },
-  props: ['tasks', 'options', 'dynamicStyle', 'isHeaderVisible', 'projectName'],
+  props: ['tasks', 'options', 'dynamicStyle', 'isHeaderVisible', 'projectName', 'headerLeftSideLabels', 'headerLegendConfig'],
   provide() {
     const provider = {};
     const self = this;
@@ -11816,17 +12129,39 @@ const GanttElastic = {
         options.taskList = {};
       }
       options.taskList.columns = options.taskList.columns.map((column, index) => {
-        column.thresholdPercent = 100;
-        column.widthFromPercentage = 0;
-        column.finalWidth = 0;
-        if (typeof column.height === 'undefined') {
-          column.height = 0;
+        // Create a new column object to avoid mutating the original
+        const newColumn = {
+          ...column,
+          thresholdPercent: 100,
+          widthFromPercentage: 0,
+          finalWidth: 0,
+          height: typeof column.height !== 'undefined' ? column.height : 0,
+          style: typeof column.style !== 'undefined' ? column.style : {},
+          _id: `${index}-${column.label}`
+        };
+
+        // Preserve the value function reference if it exists
+        // This is critical to prevent closure issues when columns are cloned
+        if (typeof column.value === 'function') {
+          // If column has buttons array, bind the function to access this.buttons
+          if (column.buttons && Array.isArray(column.buttons)) {
+            newColumn.buttons = column.buttons;
+            newColumn.value = column.value.bind(newColumn);
+          } else {
+            newColumn.value = column.value;
+          }
         }
-        if (typeof column.style === 'undefined') {
-          column.style = {};
+
+        // Preserve buttons array if it exists (for action columns)
+        if (column.buttons && Array.isArray(column.buttons)) {
+          newColumn.buttons = column.buttons;
+        }
+
+        // Preserve events if they exist
+        if (column.events) {
+          newColumn.events = column.events;
         }
-        column._id = `${index}-${column.label}`;
-        return column;
+        return newColumn;
       });
       this.state.options = options;
       tasks = this.fillTasks(tasks);
@@ -12294,6 +12629,10 @@ const GanttElastic = {
       this.$on('scope-change', this.onScopeChange);
       this.$on('taskList-width-change', this.onTaskListWidthChange);
       this.$on('taskList-column-width-change', this.onTaskListColumnWidthChange);
+      // Forward action button click events to parent
+      this.$on('action-button-clicked', payload => {
+        this.$emit('action-button-clicked', payload);
+      });
     },
     /**
      * Get responsive step widths based on screen size
@@ -13115,10 +13454,10 @@ const GanttElastic = {
 /* harmony default export */ var GanttElasticvue_type_script_lang_js = (GanttElastic);
 ;// ./src/GanttElastic.vue?vue&type=script&lang=js
  /* harmony default export */ var src_GanttElasticvue_type_script_lang_js = (GanttElasticvue_type_script_lang_js); 
-;// ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-55.use[0]!./node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??clonedRuleSet-55.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-55.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/GanttElastic.vue?vue&type=style&index=0&id=95091692&prod&lang=css
+;// ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-55.use[0]!./node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??clonedRuleSet-55.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-55.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/GanttElastic.vue?vue&type=style&index=0&id=2e042034&prod&lang=css
 // extracted by mini-css-extract-plugin
 
-;// ./src/GanttElastic.vue?vue&type=style&index=0&id=95091692&prod&lang=css
+;// ./src/GanttElastic.vue?vue&type=style&index=0&id=2e042034&prod&lang=css
 
 ;// ./src/GanttElastic.vue
 
@@ -13131,8 +13470,8 @@ const GanttElastic = {
 
 var GanttElastic_component = normalizeComponent(
   src_GanttElasticvue_type_script_lang_js,
-  GanttElasticvue_type_template_id_95091692_render,
-  GanttElasticvue_type_template_id_95091692_staticRenderFns,
+  GanttElasticvue_type_template_id_2e042034_render,
+  GanttElasticvue_type_template_id_2e042034_staticRenderFns,
   false,
   null,
   null,
@@ -13162,6 +13501,22 @@ var GanttElastic_component = normalizeComponent(
       type: Object,
       default: () => ({})
     },
+    isHeaderVisible: {
+      type: Boolean,
+      default: true
+    },
+    projectName: {
+      type: String,
+      default: ''
+    },
+    headerLeftSideLabels: {
+      type: Array,
+      default: () => []
+    },
+    headerLegendConfig: {
+      type: Object,
+      default: () => ({})
+    },
     header: {
       type: Object,
       default: () => ({})