apexgantt 3.6.0 → 3.6.1

package/README.md

@@ -46,6 +46,20 @@ const gantt = new ApexGantt(document.getElementById('gantt-container'), ganttOpt
 gantt.render();
 ```
 
+## Setting the License
+
+To use ApexGantt with a commercial license, set your license key before creating any chart instances:
+
+```js
+import ApexGantt from 'apexgantt';
+
+// set license key before creating any charts
+ApexGantt.setLicense('your-license-key');
+
+const gantt = new ApexGantt(document.getElementById('gantt-container'), ganttOptions);
+gantt.render();
+```
+
 ## ApexGantt Options
 
 The layout can be configured by either setting the properties in the table below by passing a second arg to ApexGantt with these properties set. The latter takes precedence.

package/apexgantt.es.min.js

@@ -5919,6 +5919,109 @@ registerMorphableType([
   Point
 ]);
 makeMorphable();
+const ToolbarStyle = `
+  #toolbar {
+    display: flex;
+    gap: 5px;
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: 100;
+  }
+  
+  .toolbar-item {
+    align-items: center;
+    background-color: var(--toolbar-bg-color, #FFFFFF);
+    border: 1px solid var(--toolbar-border-color, #BCBCBC);
+    cursor: pointer;
+    display: flex;
+    height: 30px;
+    justify-content: center;
+    width: 30px;
+    border-radius: 3px;
+    transition: all 0.2s ease;
+    position: relative;
+  }
+  
+  .toolbar-item:hover {
+    background-color: var(--toolbar-hover-bg-color, #f8f9fa);
+    border-color: var(--toolbar-border-color, #999);
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+  
+  .toolbar-item:active {
+    transform: translateY(0);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  }
+  
+  .toolbar-item:focus {
+    outline: none;
+    border-color: var(--button-bg-color, #0066cc);
+    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.2);
+  }
+  
+  .toolbar-item img {
+    width: 16px;
+    height: 16px;
+    pointer-events: none;
+    filter: var(--toolbar-icon-filter, none);
+  }
+  
+  .toolbar-item[disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+  
+  /* Tooltip styles */
+  .toolbar-item::after {
+    content: attr(data-tooltip);
+    position: absolute;
+    bottom: -35px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--tooltip-bg-color, #333);
+    color: var(--tooltip-text-color, white);
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    white-space: nowrap;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s ease;
+    z-index: 1000;
+  }
+  
+  .toolbar-item::before {
+    content: '';
+    position: absolute;
+    bottom: -25px;
+    left: 50%;
+    transform: translateX(-50%);
+    border: 5px solid transparent;
+    border-bottom-color: var(--tooltip-bg-color, #333);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s ease;
+    z-index: 1000;
+  }
+  
+  .toolbar-item:hover::after,
+  .toolbar-item:hover::before {
+    opacity: 1;
+  }
+  
+  /* Shadow DOM specific adjustments */
+  :host #toolbar {
+    display: flex;
+    gap: 5px;
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: 100;
+  }
+`;
 const _Watermark = class _Watermark {
   /**
    * Add watermark to a container element
@@ -6465,14 +6568,12 @@ const getCursorFollowingTooltipStyles = ({
   fontFamily,
   fontSize,
   fontWeight,
-  maxWidth = 300,
+  maxWidth,
   padding,
   x: x2,
   y: y2
 }) => {
   const styles = ["position: absolute;", "z-index: 1000;", "pointer-events: none;"];
-  styles.push(`width: ${maxWidth}px;`);
-  styles.push(`max-width: ${maxWidth}px;`);
   styles.push("box-sizing: border-box;");
   styles.push("word-wrap: break-word;");
   styles.push("overflow-wrap: break-word;");
@@ -6481,6 +6582,10 @@ const getCursorFollowingTooltipStyles = ({
   if (borderColor) {
     styles.push(`border: 1px solid ${borderColor};`);
   }
+  if (maxWidth) {
+    styles.push(`width: ${maxWidth}px;`);
+    styles.push(`max-width: ${maxWidth}px;`);
+  }
   styles.push("border-radius: 6px;");
   styles.push("box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);");
   styles.push("transition: opacity 0.2s ease;");
@@ -15883,109 +15988,6 @@ const TooltipStyle = `
     margin-bottom: 0;
   }
 `;
-const ToolbarStyle = `
-  #toolbar {
-    display: flex;
-    gap: 5px;
-    position: absolute;
-    right: 10px;
-    top: 10px;
-    z-index: 100;
-  }
-  
-  .toolbar-item {
-    align-items: center;
-    background-color: var(--toolbar-bg-color, #FFFFFF);
-    border: 1px solid var(--toolbar-border-color, #BCBCBC);
-    cursor: pointer;
-    display: flex;
-    height: 30px;
-    justify-content: center;
-    width: 30px;
-    border-radius: 3px;
-    transition: all 0.2s ease;
-    position: relative;
-  }
-  
-  .toolbar-item:hover {
-    background-color: var(--toolbar-hover-bg-color, #f8f9fa);
-    border-color: var(--toolbar-border-color, #999);
-    transform: translateY(-1px);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  }
-  
-  .toolbar-item:active {
-    transform: translateY(0);
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-  }
-  
-  .toolbar-item:focus {
-    outline: none;
-    border-color: var(--button-bg-color, #0066cc);
-    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.2);
-  }
-  
-  .toolbar-item img {
-    width: 16px;
-    height: 16px;
-    pointer-events: none;
-    filter: var(--toolbar-icon-filter, none);
-  }
-  
-  .toolbar-item[disabled] {
-    opacity: 0.5;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-  
-  /* Tooltip styles */
-  .toolbar-item::after {
-    content: attr(data-tooltip);
-    position: absolute;
-    bottom: -35px;
-    left: 50%;
-    transform: translateX(-50%);
-    background: var(--tooltip-bg-color, #333);
-    color: var(--tooltip-text-color, white);
-    padding: 4px 8px;
-    border-radius: 4px;
-    font-size: 12px;
-    white-space: nowrap;
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.2s ease;
-    z-index: 1000;
-  }
-  
-  .toolbar-item::before {
-    content: '';
-    position: absolute;
-    bottom: -25px;
-    left: 50%;
-    transform: translateX(-50%);
-    border: 5px solid transparent;
-    border-bottom-color: var(--tooltip-bg-color, #333);
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.2s ease;
-    z-index: 1000;
-  }
-  
-  .toolbar-item:hover::after,
-  .toolbar-item:hover::before {
-    opacity: 1;
-  }
-  
-  /* Shadow DOM specific adjustments */
-  :host #toolbar {
-    display: flex;
-    gap: 5px;
-    position: absolute;
-    right: 10px;
-    top: 10px;
-    z-index: 100;
-  }
-`;
 const DefaultOptions = {
   paddingX: 20,
   paddingY: 15