@sme.up/ketchup 7.4.2 → 8.0.0

package/dist/components/kup-planner.js

@@ -1,5 +1,5 @@
-import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
-import { a8 as createCommonjsModule, k as kupManagerInstance, aE as KupDatesFormats, ak as getCellValueForDisplay, g as getProps, s as setProps, c as componentWrapperId, d as defineCustomElement$2, b as defineCustomElement$3, e as defineCustomElement$4, f as defineCustomElement$5, h as defineCustomElement$6, i as defineCustomElement$7, j as defineCustomElement$8, l as defineCustomElement$9, m as defineCustomElement$a, n as defineCustomElement$b, o as defineCustomElement$c, p as defineCustomElement$d, q as defineCustomElement$e, r as defineCustomElement$f, t as defineCustomElement$g, u as defineCustomElement$h, v as defineCustomElement$i, w as defineCustomElement$j, x as defineCustomElement$k, y as defineCustomElement$l, z as defineCustomElement$m, A as defineCustomElement$n, B as defineCustomElement$o, C as defineCustomElement$p, D as defineCustomElement$q, E as defineCustomElement$r, G as defineCustomElement$s } from './kup-autocomplete2.js';
+import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host, getAssetPath } from '@stencil/core/internal/client';
+import { a8 as createCommonjsModule, aE as commonjsGlobal, k as kupManagerInstance, aF as KupDatesFormats, ak as getCellValueForDisplay, g as getProps, s as setProps, Y as FTextFieldMDC, c as componentWrapperId, an as FTextField, a as KupThemeIconValues, Z as KupLanguageSearch, d as defineCustomElement$2, b as defineCustomElement$3, e as defineCustomElement$4, f as defineCustomElement$5, h as defineCustomElement$6, i as defineCustomElement$7, j as defineCustomElement$8, l as defineCustomElement$9, m as defineCustomElement$a, n as defineCustomElement$b, o as defineCustomElement$c, p as defineCustomElement$d, q as defineCustomElement$e, r as defineCustomElement$f, t as defineCustomElement$g, u as defineCustomElement$h, v as defineCustomElement$i, w as defineCustomElement$j, x as defineCustomElement$k, y as defineCustomElement$l, z as defineCustomElement$m, A as defineCustomElement$n, B as defineCustomElement$o, C as defineCustomElement$p, D as defineCustomElement$q, E as defineCustomElement$r, G as defineCustomElement$s } from './kup-autocomplete2.js';
 
 /**
  * Props of the kup-gantt component.
@@ -37,8 +37,11 @@ var KupPlannerProps;
 })(KupPlannerProps || (KupPlannerProps = {}));
 var KupPlannerTaskAction;
 (function (KupPlannerTaskAction) {
-  KupPlannerTaskAction["onOpening"] = "onOpening";
-  KupPlannerTaskAction["onClosing"] = "onClosing";
+  KupPlannerTaskAction["onTaskOpening"] = "onTaskOpening";
+  KupPlannerTaskAction["onTaskClosing"] = "onTaskClosing";
+  KupPlannerTaskAction["onClick"] = "onClick";
+  KupPlannerTaskAction["onResize"] = "onResize";
+  KupPlannerTaskAction["onRightClick"] = "onRightClick";
 })(KupPlannerTaskAction || (KupPlannerTaskAction = {}));
 var KupPlannerGanttRowType;
 (function (KupPlannerGanttRowType) {
@@ -8362,6 +8365,545 @@ exports.Zone = Zone;
 //# sourceMappingURL=luxon.js.map
 });
 
+var hexToCssFilter = createCommonjsModule(function (module, exports) {
+(function (global, factory) {
+    factory(exports) ;
+}(commonjsGlobal, (function (exports) {
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+
+    function __read(o, n) {
+        var m = typeof Symbol === "function" && o[Symbol.iterator];
+        if (!m) return o;
+        var i = m.call(o), r, ar = [], e;
+        try {
+            while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+        }
+        catch (error) { e = { error: error }; }
+        finally {
+            try {
+                if (r && !r.done && (m = i["return"])) m.call(i);
+            }
+            finally { if (e) throw e.error; }
+        }
+        return ar;
+    }
+
+    var Color = /** @class */ (function () {
+        function Color(r, g, b) {
+            this.r = 0;
+            this.g = 0;
+            this.b = 0;
+            this.set(r, g, b);
+        }
+        Color.prototype.set = function (r, g, b) {
+            this.r = this.clamp(r);
+            this.g = this.clamp(g);
+            this.b = this.clamp(b);
+        };
+        /**
+         * Applying cals to get CSS filter for hue-rotate
+         *
+         * @param {number} [angle=0]
+         * @memberof Color
+         */
+        Color.prototype.hueRotate = function (angle) {
+            if (angle === void 0) { angle = 0; }
+            angle = (angle / 180) * Math.PI;
+            var sin = Math.sin(angle);
+            var cos = Math.cos(angle);
+            this.multiply([
+                0.213 + cos * 0.787 - sin * 0.213,
+                0.715 - cos * 0.715 - sin * 0.715,
+                0.072 - cos * 0.072 + sin * 0.928,
+                0.213 - cos * 0.213 + sin * 0.143,
+                0.715 + cos * 0.285 + sin * 0.14,
+                0.072 - cos * 0.072 - sin * 0.283,
+                0.213 - cos * 0.213 - sin * 0.787,
+                0.715 - cos * 0.715 + sin * 0.715,
+                0.072 + cos * 0.928 + sin * 0.072,
+            ]);
+        };
+        /**
+         * Applying cals to get CSS filter for grayscale
+         *
+         * @param {number} [value=1]
+         * @memberof Color
+         */
+        Color.prototype.grayscale = function (value) {
+            if (value === void 0) { value = 1; }
+            this.multiply([
+                0.2126 + 0.7874 * (1 - value),
+                0.7152 - 0.7152 * (1 - value),
+                0.0722 - 0.0722 * (1 - value),
+                0.2126 - 0.2126 * (1 - value),
+                0.7152 + 0.2848 * (1 - value),
+                0.0722 - 0.0722 * (1 - value),
+                0.2126 - 0.2126 * (1 - value),
+                0.7152 - 0.7152 * (1 - value),
+                0.0722 + 0.9278 * (1 - value),
+            ]);
+        };
+        /**
+         * Applying cals to get CSS filter for sepia
+         *
+         * @param {number} [value=1]
+         * @memberof Color
+         */
+        Color.prototype.sepia = function (value) {
+            if (value === void 0) { value = 1; }
+            this.multiply([
+                0.393 + 0.607 * (1 - value),
+                0.769 - 0.769 * (1 - value),
+                0.189 - 0.189 * (1 - value),
+                0.349 - 0.349 * (1 - value),
+                0.686 + 0.314 * (1 - value),
+                0.168 - 0.168 * (1 - value),
+                0.272 - 0.272 * (1 - value),
+                0.534 - 0.534 * (1 - value),
+                0.131 + 0.869 * (1 - value),
+            ]);
+        };
+        /**
+         * Applying cals to get CSS filter for saturate
+         *
+         * @param {number} [value=1]
+         * @memberof Color
+         */
+        Color.prototype.saturate = function (value) {
+            if (value === void 0) { value = 1; }
+            this.multiply([
+                0.213 + 0.787 * value,
+                0.715 - 0.715 * value,
+                0.072 - 0.072 * value,
+                0.213 - 0.213 * value,
+                0.715 + 0.285 * value,
+                0.072 - 0.072 * value,
+                0.213 - 0.213 * value,
+                0.715 - 0.715 * value,
+                0.072 + 0.928 * value,
+            ]);
+        };
+        Color.prototype.multiply = function (matrix) {
+            // These values are needed. It's correct because the returned values will change
+            var newR = this.clamp(this.r * matrix[0] + this.g * matrix[1] + this.b * matrix[2]);
+            var newG = this.clamp(this.r * matrix[3] + this.g * matrix[4] + this.b * matrix[5]);
+            var newB = this.clamp(this.r * matrix[6] + this.g * matrix[7] + this.b * matrix[8]);
+            this.r = newR;
+            this.g = newG;
+            this.b = newB;
+        };
+        /**
+         * Applying cals to get CSS filter for brightness
+         *
+         * @param {number} [value=1]
+         * @memberof Color
+         */
+        Color.prototype.brightness = function (value) {
+            if (value === void 0) { value = 1; }
+            this.linear(value);
+        };
+        /**
+         * Applying cals to get CSS filter for contrast
+         *
+         * @param {number} [value=1]
+         * @memberof Color
+         */
+        Color.prototype.contrast = function (value) {
+            if (value === void 0) { value = 1; }
+            this.linear(value, -(0.5 * value) + 0.5);
+        };
+        Color.prototype.linear = function (slope, intercept) {
+            if (slope === void 0) { slope = 1; }
+            if (intercept === void 0) { intercept = 0; }
+            this.r = this.clamp(this.r * slope + intercept * 255);
+            this.g = this.clamp(this.g * slope + intercept * 255);
+            this.b = this.clamp(this.b * slope + intercept * 255);
+        };
+        /**
+         * Applying cals to get CSS filter for invert
+         *
+         * @param {number} [value=1]
+         * @memberof Color
+         */
+        Color.prototype.invert = function (value) {
+            if (value === void 0) { value = 1; }
+            this.r = this.clamp((value + (this.r / 255) * (1 - 2 * value)) * 255);
+            this.g = this.clamp((value + (this.g / 255) * (1 - 2 * value)) * 255);
+            this.b = this.clamp((value + (this.b / 255) * (1 - 2 * value)) * 255);
+        };
+        /**
+         * transform RGB into HSL values
+         *
+         * @returns {HSLData}
+         * @memberof Color
+         */
+        Color.prototype.hsl = function () {
+            var red = this.r / 255;
+            var green = this.g / 255;
+            var blue = this.b / 255;
+            // find greatest and smallest channel values
+            var max = Math.max(red, green, blue);
+            var min = Math.min(red, green, blue);
+            var hue = 0;
+            var saturation = 0;
+            var lightness = (max + min) / 2;
+            // If min and max have the same values, it means
+            // the given color is achromatic
+            if (max === min) {
+                return {
+                    h: 0,
+                    s: 0,
+                    l: lightness * 100,
+                };
+            }
+            // Adding delta value of greatest and smallest channel values
+            var delta = max - min;
+            saturation = lightness > 0.5 ? delta / (2 - max - min) : delta / (max + min);
+            if (max === red) {
+                hue = (green - blue) / delta + (green < blue ? 6 : 0);
+            }
+            else if (max === green) {
+                hue = (blue - red) / delta + 2;
+            }
+            else if (max === blue) {
+                hue = (red - green) / delta + 4;
+            }
+            hue /= 6;
+            return {
+                h: hue * 100,
+                s: saturation * 100,
+                l: lightness * 100,
+            };
+        };
+        /**
+         * Normalize the value to follow the min and max for RGB colors
+         * min: 0
+         * max: 255
+         *
+         * @private
+         * @param {number} value
+         * @returns {number}
+         * @memberof Color
+         */
+        Color.prototype.clamp = function (value) {
+            // Minimum RGB Value = 0;
+            // Maximum RGB Value = 255;
+            return Math.min(Math.max(value, 0), 255);
+        };
+        return Color;
+    }());
+
+    var Solver = /** @class */ (function () {
+        function Solver(target, options) {
+            this.target = target;
+            this.targetHSL = target.hsl();
+            this.options = Object.assign({}, 
+            // Adding default values for options
+            {
+                acceptanceLossPercentage: 5,
+                maxChecks: 15,
+            }, options);
+            // All the calcs done by the library to generate
+            // a CSS Filter are based on the color `#000`
+            // in this case, `rgb(0, 0, 0)`
+            // Please make sure the background of the element
+            // is `#000` for better performance
+            // and color similarity.
+            this.reusedColor = new Color(0, 0, 0);
+        }
+        /**
+         * Returns the solved values for the
+         *
+         * @returns {(SPSAPayload & { filter: string; })}
+         * @memberof Solver
+         */
+        Solver.prototype.solve = function () {
+            var result = this.solveNarrow(this.solveWide());
+            return {
+                values: result.values,
+                called: result.called,
+                loss: result.loss,
+                filter: this.css(result.values),
+            };
+        };
+        /**
+         * Solve wide values based on the wide values for RGB and HSL values
+         *
+         * @private
+         * @returns {SPSAPayload}
+         * @memberof Solver
+         */
+        Solver.prototype.solveWide = function () {
+            var A = 5;
+            var c = 15;
+            // Wide values for RGB and HSL values
+            // the values in the order: [`r`, `g`, `b`, `h`, `s`, `l`]
+            var a = [60, 180, 18000, 600, 1.2, 1.2];
+            var best = { loss: Infinity };
+            var counter = 0;
+            while (best.loss > this.options.acceptanceLossPercentage) {
+                var initialFilterValues = [50, 20, 3750, 50, 100, 100];
+                var result = this.spsa({
+                    A: A,
+                    a: a,
+                    c: c,
+                    values: initialFilterValues,
+                    // for wide values we should use the double of tries in
+                    // comparison of `solveNarrow()` method
+                    maxTriesInLoop: 1000,
+                });
+                if (result.loss < best.loss) {
+                    best = result;
+                }
+                counter += 1;
+                if (counter >= this.options.maxChecks) {
+                    break;
+                }
+            }
+            return Object.assign({}, best, { called: counter });
+        };
+        /**
+         * Solve narrow values based on the wide values for the filter
+         *
+         * @private
+         * @param {SPSAPayload} wide
+         * @returns {SPSAPayload}
+         * @memberof Solver
+         */
+        Solver.prototype.solveNarrow = function (wide) {
+            var A = wide.loss;
+            var c = 2;
+            var A1 = A + 1;
+            // Narrow values for RGB and HSL values
+            // the values in the order: [`r`, `g`, `b`, `h`, `s`, `l`]
+            var a = [0.25 * A1, 0.25 * A1, A1, 0.25 * A1, 0.2 * A1, 0.2 * A1];
+            return this.spsa({
+                A: A,
+                a: a,
+                c: c,
+                values: wide.values,
+                maxTriesInLoop: 500,
+                called: wide.called,
+            });
+        };
+        /**
+         * Returns final value based on the current filter order
+         * to get the order, please check the returned value
+         * in `css()` method
+         *
+         * @private
+         * @param {number} value
+         * @param {number} idx
+         * @returns {number}
+         * @memberof Solver
+         */
+        Solver.prototype.fixValueByFilterIDX = function (value, idx) {
+            var max = 100;
+            // Fixing max, minimum and value by filter
+            if (idx === 2 /* saturate */) {
+                max = 7500;
+            }
+            else if (idx === 4 /* brightness */ || idx === 5 /* contrast */) {
+                max = 200;
+            }
+            if (idx === 3 /* hue-rotate */) {
+                if (value > max) {
+                    value %= max;
+                }
+                else if (value < 0) {
+                    value = max + (value % max);
+                }
+            }
+            // Checking if value is below the minimum or above
+            // the maximum allowed by filter
+            else if (value < 0) {
+                value = 0;
+            }
+            else if (value > max) {
+                value = max;
+            }
+            return value;
+        };
+        Solver.prototype.spsa = function (_a) {
+            var A = _a.A, a = _a.a, c = _a.c, values = _a.values, _b = _a.maxTriesInLoop, maxTriesInLoop = _b === void 0 ? 500 : _b, _c = _a.called, called = _c === void 0 ? 0 : _c;
+            var alpha = 1;
+            var gamma = 0.16666666666666666;
+            var best = null;
+            var bestLoss = Infinity;
+            var deltas = new Array(6);
+            var highArgs = new Array(6);
+            var lowArgs = new Array(6);
+            // Size of all CSS filters to be applied to get the correct color
+            var filtersToBeAppliedSize = 6;
+            for (var key = 0; key < maxTriesInLoop; key++) {
+                var ck = c / Math.pow(key + 1, gamma);
+                for (var i = 0; i < filtersToBeAppliedSize; i++) {
+                    deltas[i] = Math.random() > 0.5 ? 1 : -1;
+                    highArgs[i] = values[i] + ck * deltas[i];
+                    lowArgs[i] = values[i] - ck * deltas[i];
+                }
+                var lossDiff = this.loss(highArgs) - this.loss(lowArgs);
+                for (var i = 0; i < filtersToBeAppliedSize; i++) {
+                    var g = (lossDiff / (2 * ck)) * deltas[i];
+                    var ak = a[i] / Math.pow(A + key + 1, alpha);
+                    values[i] = this.fixValueByFilterIDX(values[i] - ak * g, i);
+                }
+                var loss = this.loss(values);
+                if (loss < bestLoss) {
+                    best = values.slice(0);
+                    bestLoss = loss;
+                }
+            }
+            return { values: best, loss: bestLoss, called: called };
+        };
+        /**
+         * Checks how much is the loss for the filter in RGB and HSL colors
+         *
+         * @private
+         * @param {SPSAPayload['values']} filters
+         * @returns {number}
+         * @memberof Solver
+         */
+        Solver.prototype.loss = function (filters) {
+            // Argument as an Array of percentages.
+            var color = this.reusedColor;
+            // Resetting the color to black in case
+            // it was called more than once
+            color.set(0, 0, 0);
+            color.invert(filters[0] / 100);
+            color.sepia(filters[1] / 100);
+            color.saturate(filters[2] / 100);
+            color.hueRotate(filters[3] * 3.6);
+            color.brightness(filters[4] / 100);
+            color.contrast(filters[5] / 100);
+            var colorHSL = color.hsl();
+            return (Math.abs(color.r - this.target.r) +
+                Math.abs(color.g - this.target.g) +
+                Math.abs(color.b - this.target.b) +
+                Math.abs(colorHSL.h - this.targetHSL.h) +
+                Math.abs(colorHSL.s - this.targetHSL.s) +
+                Math.abs(colorHSL.l - this.targetHSL.l));
+        };
+        /**
+         * Returns the CSS filter list for the received HEX color
+         *
+         * @private
+         * @param {number[]} filters
+         * @returns {string}
+         * @memberof Solver
+         */
+        Solver.prototype.css = function (filters) {
+            var formatCssFilterValueByMultiplier = function (idx, multiplier) {
+                if (multiplier === void 0) { multiplier = 1; }
+                return Math.round(filters[idx] * multiplier);
+            };
+            return [
+                "invert(" + formatCssFilterValueByMultiplier(0) + "%)",
+                "sepia(" + formatCssFilterValueByMultiplier(1) + "%)",
+                "saturate(" + formatCssFilterValueByMultiplier(2) + "%)",
+                "hue-rotate(" + formatCssFilterValueByMultiplier(3, 3.6) + "deg)",
+                "brightness(" + formatCssFilterValueByMultiplier(4) + "%)",
+                "contrast(" + formatCssFilterValueByMultiplier(5) + "%);",
+            ].join(' ');
+        };
+        return Solver;
+    }());
+
+    /**
+     * Transform a CSS Color from Hexadecimal to RGB color
+     *
+     * @param {string} hex hexadecimal color
+     * @returns {([number, number, number] | [])} array with the RGB colors or empty array
+     */
+    var hexToRgb = function (hex) {
+        if (hex.length === 4) {
+            return [parseInt("0x" + hex[1] + hex[1]), parseInt("0x" + hex[2] + hex[2]), parseInt("0x" + hex[3] + hex[3])];
+        }
+        if (hex.length === 7) {
+            return [parseInt("0x" + hex[1] + hex[2]), parseInt("0x" + hex[3] + hex[4]), parseInt("0x" + hex[5] + hex[6])];
+        }
+        return [];
+    };
+    var isNumeric = function (n) { return !isNaN(parseFloat(n)) && isFinite(n); };
+    // Memory cache for the computed results to avoid multiple
+    // calculations for the same color
+    var results = {};
+    /**
+     * A function that transforms a HEX color into CSS filters
+     *
+     * @param colorValue string hexadecimal color
+     * @param opts HexToCssConfiguration function configuration
+     *
+     */
+    var hexToCSSFilter = function (colorValue, opts) {
+        var _a;
+        if (opts === void 0) { opts = {}; }
+        var red;
+        var green;
+        var blue;
+        if (results[colorValue] && !opts.forceFilterRecalculation) {
+            return Object.assign({}, results[colorValue], { cache: true });
+        }
+        var color;
+        try {
+            _a = __read(hexToRgb(colorValue), 3), red = _a[0], green = _a[1], blue = _a[2];
+            if (!isNumeric(red) || !isNumeric(green) || !isNumeric(blue)) {
+                throw new Error("hextToRgb returned an invalid value for '" + colorValue + "'");
+            }
+            color = new Color(Number(red), Number(green), Number(blue));
+        }
+        catch (error) {
+            throw new Error("Color value should be in HEX format. " + error);
+        }
+        var solver = new Solver(color, Object.assign({}, 
+        // `HexToCssConfiguration` Defaults
+        {
+            acceptanceLossPercentage: 5,
+            maxChecks: 30,
+            forceFilterRecalculation: false,
+        }, opts));
+        return (results[colorValue] = Object.assign({}, solver.solve(), {
+            hex: colorValue,
+            rgb: [red, green, blue],
+            cache: false,
+        }));
+    };
+    /**
+     * A function that clears cached results
+     *
+     * @param  {string} key? HEX string value passed previously `#24639C`. If not passed, it clears all cached results
+     * @returns void
+     */
+    var clearCache = function (key) {
+        if (!key) {
+            results = {};
+        }
+        else if (results[key]) {
+            delete results[key];
+        }
+    };
+
+    exports.clearCache = clearCache;
+    exports.hexToCSSFilter = hexToCSSFilter;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+})));
+});
+
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -8435,7 +8977,8 @@ var parseToDayEnd = function parseToDayEnd(endDate) {
   }).toJSDate();
 };
 var formatToIsoDate = function formatToIsoDate(date) {
-  return luxon.DateTime.fromJSDate(date).toISODate();
+  var _DateTime$fromJSDate$;
+  return (_DateTime$fromJSDate$ = luxon.DateTime.fromJSDate(date).toISODate()) != null ? _DateTime$fromJSDate$ : undefined;
 };
 var formatToLocaleSimple = function formatToLocaleSimple(date) {
   return luxon.DateTime.fromJSDate(date).toFormat("dd/MM/yyyy");
@@ -8453,6 +8996,8 @@ function validDates(startDate, endDate, _name) {
   };
 }
 
+var MAIN_GANTT_ID = "main";
+var SECONDARY_GANTT_ID = "secondary";
 var toViewMode = function toViewMode(timeUnit) {
   switch (timeUnit) {
     case TimeUnit.DAY:
@@ -8465,6 +9010,14 @@ var toViewMode = function toViewMode(timeUnit) {
       return ViewMode.Year;
   }
 };
+var columnWidthForTimeUnit = function columnWidthForTimeUnit(timeUnit) {
+  switch (timeUnit) {
+    case TimeUnit.YEAR:
+      return 60 * 2;
+    default:
+      return 60;
+  }
+};
 var convertPhaseToTask = function convertPhaseToTask(item) {
   var mapPhase = function mapPhase(_ref) {
     var phaseStart = _ref.startDate,
@@ -8475,7 +9028,8 @@ var convertPhaseToTask = function convertPhaseToTask(item) {
       phaseId = _ref.id,
       color = _ref.color,
       selectedColor = _ref.selectedColor,
-      dependencies = _ref.dependencies;
+      dependencies = _ref.dependencies,
+      icon = _ref.icon;
     var _validDates = validDates(phaseStart, phaseEnd),
       start = _validDates.start,
       end = _validDates.end;
@@ -8498,7 +9052,8 @@ var convertPhaseToTask = function convertPhaseToTask(item) {
         progressColor: color,
         backgroundSelectedColor: selectedColor,
         progressSelectedColor: selectedColor
-      } : {}
+      } : {},
+      icon: icon
     };
   };
   return mapPhase(item);
@@ -8529,7 +9084,8 @@ var convertDetailToTimeline = function convertDetailToTimeline(item, mainGanttSt
     var startDate = x.startDate,
       endDate = x.endDate,
       color = x.color,
-      selectedColor = x.selectedColor;
+      selectedColor = x.selectedColor,
+      icon = x.icon;
     var _validDates3 = validDates(startDate, endDate),
       start = _validDates3.start,
       end = _validDates3.end;
@@ -8537,7 +9093,8 @@ var convertDetailToTimeline = function convertDetailToTimeline(item, mainGanttSt
       start: start,
       end: end,
       backgroundColor: color != null ? color : "0xffffff",
-      backgroundSelectedColor: selectedColor != null ? selectedColor : color
+      backgroundSelectedColor: selectedColor != null ? selectedColor : color,
+      icon: icon
     };
   };
   var defaultColor = "#595959";
@@ -8582,7 +9139,8 @@ var convertProjectToTasks = function convertProjectToTasks(item, mainGanttStartD
       secondaryEnd: end2,
       progress: 100,
       isDisabled: false,
-      hideChildren: false
+      hideChildren: false,
+      icon: row.icon
     };
     var children1 = ((_row$phases = row.phases) != null ? _row$phases : []).map(convertPhaseToTask);
     return [mainTask].concat(children1);
@@ -8744,8 +9302,8 @@ var ganttDateRangeFromDetail = function ganttDateRangeFromDetail(details, viewMo
   return ganttDateRangeGeneric(dates, viewMode, preStepsCount, showSecondaryDates, true);
 };
 var ganttDateRangeGeneric = function ganttDateRangeGeneric(dates, viewMode, preStepsCount, showSecondaryDates, realDates) {
-  var newStartDate = dates[0].start;
-  var newEndDate = dates[0].end;
+  var newStartDate = dates.length > 0 ? dates[0].start : new Date();
+  var newEndDate = dates.length > 0 ? dates[0].end : new Date();
   for (var _iterator = _createForOfIteratorHelperLoose(dates), _step; !(_step = _iterator()).done;) {
     var d = _step.value;
     if (d.start < newStartDate) {
@@ -9179,7 +9737,8 @@ var TaskList = function TaskList(_ref) {
     taskListRef = _ref.taskListRef,
     horizontalContainerClass = _ref.horizontalContainerClass,
     TaskListHeader = _ref.TaskListHeader,
-    TaskListTable = _ref.TaskListTable;
+    TaskListTable = _ref.TaskListTable,
+    filter = _ref.filter;
   var horizontalContainerRef = react.useRef(null);
   react.useEffect(function () {
     if (horizontalContainerRef.current) {
@@ -9204,6 +9763,10 @@ var TaskList = function TaskList(_ref) {
     setSelectedTask: setSelectedTask,
     onExpanderClick: onExpanderClick
   };
+  react.useEffect(function () {
+    var _taskListRef$current;
+    (_taskListRef$current = taskListRef.current) === null || _taskListRef$current === void 0 ? void 0 : _taskListRef$current.prepend(filter);
+  }, [taskListRef, filter]);
   return react.createElement("div", {
     ref: taskListRef,
     className: classes.tasks
@@ -9754,7 +10317,7 @@ var convertToTimeline = function convertToTimeline(task, index, dates, columnWid
   var _task$timeline;
   var y = taskYCoordinate(index, rowHeight, taskHeight);
   function convertFrameToTask(frame, j) {
-    var _frame$backgroundSele;
+    var _frame$backgroundSele, _frame$icon;
     var _computeTypeAndXs2 = computeTypeAndXs(frame.start, frame.end, "task", dates, columnWidth, handleWidth, false),
       x1 = _computeTypeAndXs2.x1,
       x2 = _computeTypeAndXs2.x2;
@@ -9786,7 +10349,8 @@ var convertToTimeline = function convertToTimeline(task, index, dates, columnWid
       typeInternal: "timeline",
       x1: x1,
       x2: x2,
-      y: y
+      y: y,
+      icon: (_frame$icon = frame.icon) != null ? _frame$icon : undefined
     };
   }
   var _computeTypeAndXs3 = computeTypeAndXs(task.start, task.end, task.type, dates, columnWidth, handleWidth, false),
@@ -10145,6 +10709,25 @@ var BarProgressHandle = function BarProgressHandle(_ref) {
   });
 };
 
+var TaskIcon = function TaskIcon(_ref) {
+  var _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "#000000" : _ref$color,
+    url = _ref.url,
+    height = _ref.height,
+    width = _ref.width,
+    x = _ref.x,
+    y = _ref.y;
+  var cssFilter = hexToCssFilter.hexToCSSFilter(color);
+  return react.createElement("image", {
+    href: url,
+    filter: cssFilter.filter.replace(";", ""),
+    x: x,
+    y: y,
+    width: width,
+    height: height
+  });
+};
+
 var Bar = function Bar(_ref) {
   var _task$x2secondary, _task$x1secondary;
   var task = _ref.task,
@@ -10202,7 +10785,14 @@ var Bar = function Bar(_ref) {
     onMouseDown: function onMouseDown(e) {
       onEventStart("progress", task, e);
     }
-  })));
+  })), task.icon && task.icon.url && react.createElement(TaskIcon, {
+    color: task.icon.color,
+    url: task.icon.url,
+    width: task.height / 2 + "px",
+    height: task.height / 2 + "px",
+    x: task.x1 + (task.x2 - task.x1) - task.height / 2 / 2,
+    y: task.y - task.height / 2 / 2 / 2 + (showSecondaryDates ? task.height / 2 : 0)
+  }));
 };
 
 var BarSmall = function BarSmall(_ref) {
@@ -10263,7 +10853,9 @@ var Timeline = function Timeline(_ref) {
     rx: 0,
     ry: 0
   }), task.barChildren.map(function (bar) {
-    return react.createElement("rect", {
+    return react.createElement(react.Fragment, {
+      key: bar.id + ".rf"
+    }, react.createElement("rect", {
       style: {
         cursor: "pointer"
       },
@@ -10275,7 +10867,14 @@ var Timeline = function Timeline(_ref) {
       height: bar.height,
       rx: bar.barCornerRadius,
       ry: bar.barCornerRadius
-    });
+    }), bar.icon && bar.icon.url && react.createElement(TaskIcon, {
+      color: bar.icon.color,
+      url: bar.icon.url,
+      width: bar.height + "px",
+      height: bar.height + "px",
+      x: bar.x1 + (bar.x2 - bar.x1) - bar.height / 2,
+      y: bar.y - bar.height / 2 / 2
+    }));
   }));
 };
 
@@ -10312,7 +10911,7 @@ var TaskItem = function TaskItem(props) {
         setTaskItem(react.createElement(Bar, Object.assign({}, props)));
         break;
     }
-  }, [task, isSelected]);
+  }, [task, isSelected, props]);
   react.useEffect(function () {
     if (textRef.current) {
       setIsTextInside(textRef.current.getBBox().width < task.x2 - task.x1);
@@ -10353,6 +10952,9 @@ var TaskItem = function TaskItem(props) {
     onClick: function onClick(e) {
       onEventStart("click", task, e);
     },
+    onContextMenu: function onContextMenu(e) {
+      onEventStart("contextmenu", task, e);
+    },
     onFocus: function onFocus() {
       onEventStart("select", task);
     }
@@ -10393,6 +10995,7 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
     onProgressChange = _ref.onProgressChange,
     onDoubleClick = _ref.onDoubleClick,
     onClick = _ref.onClick,
+    onContextMenu = _ref.onContextMenu,
     onDelete = _ref.onDelete;
   var point = svg === null || svg === void 0 ? void 0 : (_svg$current = svg.current) === null || _svg$current === void 0 ? void 0 : _svg$current.createSVGPoint();
   var _useState = react.useState(0),
@@ -10554,6 +11157,9 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
           } else if (action === "click") {
             var skipClick = !hasMovedHorizontally(event);
             skipClick && !!onClick && onClick(task);
+          } else if (action === "contextmenu") {
+            event.preventDefault();
+            !!onContextMenu && onContextMenu(event, task);
           } else if (action === "move") {
             var _svg$current$getScree3;
             if (!(svg !== null && svg !== void 0 && svg.current) || !point) return;
@@ -10641,6 +11247,7 @@ var TaskGantt = function TaskGantt(_ref) {
     calendarProps = _ref.calendarProps,
     barProps = _ref.barProps,
     ganttHeight = _ref.ganttHeight,
+    taskGanttRef = _ref.taskGanttRef,
     scrollY = _ref.scrollY,
     scrollX = _ref.scrollX;
   var ganttSVGRef = react.useRef(null);
@@ -10660,7 +11267,8 @@ var TaskGantt = function TaskGantt(_ref) {
     }
   }, [scrollX]);
   return react.createElement("div", {
-    className: styles$7.ganttContainer
+    className: styles$7.ganttContainer,
+    ref: taskGanttRef
   }, react.createElement("div", {
     className: styles$7.ganttVerticalContainer,
     ref: verticalGanttContainerRef,
@@ -10691,9 +11299,10 @@ var TaskGantt = function TaskGantt(_ref) {
 var styles$8 = {"scrollWrapper":"_2k9Ys","scroll":"_19jgW"};
 
 var HorizontalScroll = function HorizontalScroll(_ref) {
+  var _taskGanttRef$current;
   var scroll = _ref.scroll,
     svgWidth = _ref.svgWidth,
-    taskListWidth = _ref.taskListWidth,
+    taskGanttRef = _ref.taskGanttRef,
     rtl = _ref.rtl,
     onScroll = _ref.onScroll;
   var scrollRef = react.useRef(null);
@@ -10702,12 +11311,12 @@ var HorizontalScroll = function HorizontalScroll(_ref) {
       scrollRef.current.scrollLeft = scroll;
     }
   }, [scroll]);
-  console.log("HORIZONTAL-SCROLL svgWidth: " + svgWidth);
+  var rect = (_taskGanttRef$current = taskGanttRef.current) === null || _taskGanttRef$current === void 0 ? void 0 : _taskGanttRef$current.getBoundingClientRect();
   return react.createElement("div", {
     dir: "ltr",
-    style: {
-      margin: rtl ? "0px " + taskListWidth + "px 0px 0px" : "0px 0px 0px " + taskListWidth + "px"
-    },
+    style: rect ? {
+      margin: rtl ? "0px " + rect.x + "px 0px 0px" : "0px 0px 0px " + rect.x + "px"
+    } : undefined,
     className: styles$8.scrollWrapper,
     onScroll: onScroll,
     ref: scrollRef
@@ -10723,13 +11332,14 @@ var Gantt = function Gantt(_ref) {
   var id = _ref.id,
     tasks = _ref.tasks,
     _ref$headerHeight = _ref.headerHeight,
-    headerHeight = _ref$headerHeight === void 0 ? 50 : _ref$headerHeight,
+    headerHeight = _ref$headerHeight === void 0 ? 114 : _ref$headerHeight,
     _ref$columnWidth = _ref.columnWidth,
     columnWidth = _ref$columnWidth === void 0 ? 60 : _ref$columnWidth,
     _ref$listCellWidth = _ref.listCellWidth,
     listCellWidth = _ref$listCellWidth === void 0 ? "297px" : _ref$listCellWidth,
     _ref$rowHeight = _ref.rowHeight,
     rowHeight = _ref$rowHeight === void 0 ? 50 : _ref$rowHeight,
+    filter = _ref.filter,
     _ref$ganttHeight = _ref.ganttHeight,
     ganttHeight = _ref$ganttHeight === void 0 ? 0 : _ref$ganttHeight,
     _ref$viewMode = _ref.viewMode,
@@ -10801,10 +11411,12 @@ var Gantt = function Gantt(_ref) {
     onProgressChange = _ref.onProgressChange,
     onDoubleClick = _ref.onDoubleClick,
     onClick = _ref.onClick,
+    onContextMenu = _ref.onContextMenu,
     onDelete = _ref.onDelete,
     onSelect = _ref.onSelect,
     onExpanderClick = _ref.onExpanderClick;
   var wrapperRef = react.useRef(null);
+  var taskGanttRef = react.useRef(null);
   var taskListRef = react.useRef(null);
   var _useState = react.useState(function () {
       var _ganttDateRangeFromTa = ganttDateRangeFromTask(tasks, viewMode, preStepsCount, showSecondaryDates, displayedStartDate, displayedEndDate),
@@ -10817,26 +11429,26 @@ var Gantt = function Gantt(_ref) {
     }),
     dateSetup = _useState[0],
     setDateSetup = _useState[1];
-  var _useState2 = react.useState(undefined),
-    currentViewDate = _useState2[0],
-    setCurrentViewDate = _useState2[1];
-  var _useState3 = react.useState(0),
-    taskListWidth = _useState3[0],
-    setTaskListWidth = _useState3[1];
-  var _useState4 = react.useState(0),
-    svgContainerWidth = _useState4[0],
-    setSvgContainerWidth = _useState4[1];
-  var _useState5 = react.useState(ganttHeight),
-    svgContainerHeight = _useState5[0],
-    setSvgContainerHeight = _useState5[1];
-  var _useState6 = react.useState([]),
-    barTasks = _useState6[0],
-    setBarTasks = _useState6[1];
-  var _useState7 = react.useState({
+  var taskListWidth = react.useRef(0);
+  var setTaskListWidth = function setTaskListWidth(width) {
+    taskListWidth.current = width;
+  };
+  var svgContainerWidth = react.useRef(0);
+  var setSvgContainerWidth = function setSvgContainerWidth(width) {
+    svgContainerWidth.current = width;
+  };
+  var svgContainerHeight = react.useRef(ganttHeight);
+  var setSvgContainerHeight = function setSvgContainerHeight(height) {
+    svgContainerHeight.current = height;
+  };
+  var _useState2 = react.useState([]),
+    barTasks = _useState2[0],
+    setBarTasks = _useState2[1];
+  var _useState3 = react.useState({
       action: ""
     }),
-    ganttEvent = _useState7[0],
-    setGanttEvent = _useState7[1];
+    ganttEvent = _useState3[0],
+    setGanttEvent = _useState3[1];
   var taskHeight = react.useMemo(function () {
     return rowHeight * barFill / 100;
   }, [rowHeight, barFill]);
@@ -10846,29 +11458,30 @@ var Gantt = function Gantt(_ref) {
   var timelineHeight = react.useMemo(function () {
     return rowHeight * timelineFill / 100;
   }, [rowHeight, timelineFill]);
-  var _useState8 = react.useState(),
-    selectedTask = _useState8[0],
-    setSelectedTask = _useState8[1];
-  var _useState9 = react.useState(null),
-    failedTask = _useState9[0],
-    setFailedTask = _useState9[1];
+  var _useState4 = react.useState(),
+    selectedTask = _useState4[0],
+    setSelectedTask = _useState4[1];
+  var _useState5 = react.useState(null),
+    failedTask = _useState5[0],
+    setFailedTask = _useState5[1];
   var svgWidth = dateSetup.dates.length * columnWidth;
   var ganttFullHeight = barTasks.length * rowHeight;
-  var _useState10 = react.useState(0),
-    scrollY = _useState10[0],
-    setScrollY = _useState10[1];
-  var _useState11 = react.useState(-1),
-    scrollX = _useState11[0],
-    setScrollX = _useState11[1];
-  var _useState12 = react.useState(false),
-    ignoreScrollEvent = _useState12[0],
-    setIgnoreScrollEvent = _useState12[1];
-  var _useState13 = react.useState(),
-    currentDateIndicatorContent = _useState13[0],
-    setCurrentDateIndicatorContent = _useState13[1];
-  var _useState14 = react.useState(),
-    projectionContent = _useState14[0],
-    setProjectionContent = _useState14[1];
+  var _useState6 = react.useState(0),
+    scrollY = _useState6[0],
+    setScrollY = _useState6[1];
+  var _useState7 = react.useState(-1),
+    scrollX = _useState7[0],
+    setScrollX = _useState7[1];
+  var ignoreScrollEvent = react.useRef(false);
+  var setIgnoreScrollEvent = function setIgnoreScrollEvent(value) {
+    ignoreScrollEvent.current = value;
+  };
+  var _useState8 = react.useState(),
+    currentDateIndicatorContent = _useState8[0],
+    setCurrentDateIndicatorContent = _useState8[1];
+  var _useState9 = react.useState(),
+    projectionContent = _useState9[0],
+    setProjectionContent = _useState9[1];
   react.useEffect(function () {
     window.addEventListener("gantt-sync-scroll-event", function (e) {
       if (e.detail.id !== id) {
@@ -10894,14 +11507,30 @@ var Gantt = function Gantt(_ref) {
         setScrollX(newDates.length * columnWidth);
       }
     }
-    setDateSetup({
-      dates: newDates,
-      viewMode: viewMode
-    });
+    var set = false;
+    if (dateSetup && dateSetup.dates) {
+      var old = dateSetup.dates;
+      if (old.length !== newDates.length) {
+        set = true;
+      } else {
+        for (var i = 0; i < old.length; i++) {
+          if (old[i].valueOf() !== newDates[i].valueOf()) {
+            set = true;
+            break;
+          }
+        }
+      }
+    }
+    if (set) {
+      setDateSetup({
+        dates: newDates,
+        viewMode: viewMode
+      });
+    }
     setBarTasks(convertToBarTasks(filteredTasks, newDates, columnWidth, rowHeight, taskHeight, projectHeight, timelineHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, showSecondaryDates));
   }, [tasks, viewMode, preStepsCount, rowHeight, barCornerRadius, columnWidth, taskHeight, handleWidth, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, rtl, scrollX, onExpanderClick, showSecondaryDates, projectHeight, timelineHeight, displayedStartDate, displayedEndDate]);
   react.useEffect(function () {
-    if (viewMode === dateSetup.viewMode && (viewDate && !currentViewDate || viewDate && (currentViewDate === null || currentViewDate === void 0 ? void 0 : currentViewDate.valueOf()) !== viewDate.valueOf())) {
+    if (viewMode === dateSetup.viewMode && viewDate) {
       var dates = dateSetup.dates;
       var index = dates.findIndex(function (d, i) {
         return viewDate.valueOf() >= d.valueOf() && i + 1 !== dates.length && viewDate.valueOf() < dates[i + 1].valueOf();
@@ -10909,10 +11538,10 @@ var Gantt = function Gantt(_ref) {
       if (index === -1) {
         return;
       }
-      setCurrentViewDate(viewDate);
+      setIgnoreScrollEvent(true);
       setScrollX(columnWidth * index);
     }
-  }, [viewDate, columnWidth, dateSetup.dates, dateSetup.viewMode, viewMode, currentViewDate, setCurrentViewDate]);
+  }, [viewDate, columnWidth, dateSetup.dates, dateSetup.viewMode, viewMode]);
   react.useEffect(function () {
     var changedTask = ganttEvent.changedTask,
       action = ganttEvent.action;
@@ -10955,9 +11584,9 @@ var Gantt = function Gantt(_ref) {
   }, [taskListRef, listCellWidth]);
   react.useEffect(function () {
     if (wrapperRef.current) {
-      setSvgContainerWidth(wrapperRef.current.offsetWidth - taskListWidth);
+      setSvgContainerWidth(wrapperRef.current.offsetWidth - taskListWidth.current);
     }
-  }, [wrapperRef, taskListWidth]);
+  }, [wrapperRef]);
   react.useEffect(function () {
     if (ganttHeight) {
       setSvgContainerHeight(ganttHeight + headerHeight);
@@ -11000,7 +11629,7 @@ var Gantt = function Gantt(_ref) {
     };
   }, [wrapperRef, scrollY, scrollX, ganttHeight, svgWidth, rtl, ganttFullHeight]);
   var handleScrollY = function handleScrollY(event) {
-    if (scrollY !== event.currentTarget.scrollTop && !ignoreScrollEvent) {
+    if (scrollY !== event.currentTarget.scrollTop && !ignoreScrollEvent.current) {
       setScrollY(event.currentTarget.scrollTop);
       setIgnoreScrollEvent(true);
     } else {
@@ -11008,7 +11637,7 @@ var Gantt = function Gantt(_ref) {
     }
   };
   var handleScrollX = function handleScrollX(event) {
-    if (scrollX !== event.currentTarget.scrollLeft && !ignoreScrollEvent) {
+    if (scrollX !== event.currentTarget.scrollLeft && !ignoreScrollEvent.current) {
       setScrollX(event.currentTarget.scrollLeft);
       setIgnoreScrollEvent(true);
       window.dispatchEvent(new CustomEvent("gantt-sync-scroll-event", {
@@ -11168,6 +11797,7 @@ var Gantt = function Gantt(_ref) {
     onProgressChange: onProgressChange,
     onDoubleClick: onDoubleClick,
     onClick: onClick,
+    onContextMenu: onContextMenu,
     onDelete: onDelete
   };
   var tableProps = {
@@ -11180,6 +11810,7 @@ var Gantt = function Gantt(_ref) {
     headerHeight: headerHeight,
     scrollY: scrollY,
     ganttHeight: ganttHeight,
+    filter: filter,
     horizontalContainerClass: styles$7.horizontalContainer,
     selectedTask: selectedTask,
     taskListRef: taskListRef,
@@ -11198,20 +11829,21 @@ var Gantt = function Gantt(_ref) {
     calendarProps: calendarProps,
     barProps: barProps,
     ganttHeight: ganttHeight,
+    taskGanttRef: taskGanttRef,
     scrollY: scrollY,
     scrollX: scrollX
   }), ganttEvent.changedTask && react.createElement(Tooltip, {
     arrowIndent: arrowIndent,
     rowHeight: rowHeight,
-    svgContainerHeight: svgContainerHeight,
-    svgContainerWidth: svgContainerWidth,
+    svgContainerHeight: svgContainerHeight.current,
+    svgContainerWidth: svgContainerWidth.current,
     fontFamily: fontFamily,
     fontSize: fontSize,
     scrollX: scrollX,
     scrollY: scrollY,
     task: ganttEvent.changedTask,
     headerHeight: headerHeight,
-    taskListWidth: taskListWidth,
+    taskListWidth: taskListWidth.current,
     TooltipContent: TooltipContent,
     rtl: rtl,
     svgWidth: svgWidth
@@ -11224,7 +11856,8 @@ var Gantt = function Gantt(_ref) {
     rtl: rtl
   })), react.createElement(HorizontalScroll, {
     svgWidth: svgWidth,
-    taskListWidth: taskListWidth,
+    taskGanttRef: taskGanttRef,
+    taskListWidth: taskListWidth.current,
     scroll: scrollX,
     rtl: rtl,
     onScroll: handleScrollX
@@ -11245,6 +11878,7 @@ var format = function format(date, locale, options) {
   } catch (e) {
     console.error("time-formatters.ts format", date, locale, options);
     console.error(e);
+    return "FORMAT-ERR";
   }
 };
 var dayFormatter = function dayFormatter(date, locale) {
@@ -11269,16 +11903,15 @@ var ganttDateTimeFormatters = {
 
 var classes$1 = {"wrapper":"_37E9D","title":"_WrYI6","toggler":"_c53zr","switch":"_2eBO5","input":"_hiyro","slider":"_2HI58","label":"_2gSdA","filter":"_2cfRI"};
 
-var CustomTaskListHeaderHOC = function CustomTaskListHeaderHOC(label, doubleView, setDoubleView, onFilterInput) {
+var CustomTaskListHeaderHOC = function CustomTaskListHeaderHOC(label, doubleView, setDoubleView) {
   var CustomTaskListHeader = function CustomTaskListHeader(_ref) {
-    var headerHeight = _ref.headerHeight,
-      fontFamily = _ref.fontFamily,
+    var fontFamily = _ref.fontFamily,
       fontSize = _ref.fontSize;
     return react.createElement("div", {
       style: {
         fontFamily: fontFamily,
         fontSize: fontSize,
-        height: headerHeight
+        height: "50px"
       },
       className: classes$1.wrapper
     }, react.createElement("div", {
@@ -11300,16 +11933,7 @@ var CustomTaskListHeaderHOC = function CustomTaskListHeaderHOC(label, doubleView
       className: classes$1.slider
     })), react.createElement("span", {
       className: classes$1.label
-    }, "Mostra previsioni")), react.createElement("div", {
-      className: classes$1.filter
-    }, react.createElement("input", {
-      type: "text",
-      name: "filter",
-      size: 30,
-      onInput: function onInput(e) {
-        return onFilterInput === null || onFilterInput === void 0 ? void 0 : onFilterInput(e);
-      }
-    })));
+    }, "Previsioni")));
   };
   return CustomTaskListHeader;
 };
@@ -11327,7 +11951,8 @@ var ProjectRow = function ProjectRow(_ref) {
     fontFamily = _ref.fontFamily,
     fontSize = _ref.fontSize,
     setSelectedTask = _ref.setSelectedTask,
-    onclickTaskList = _ref.onclickTaskList;
+    onclickTaskList = _ref.onclickTaskList,
+    oncontextmenuTaskList = _ref.oncontextmenuTaskList;
   var str = "";
   for (var i = 0; i < valuesToShow.length; i++) {
     str += "1fr ";
@@ -11346,6 +11971,11 @@ var ProjectRow = function ProjectRow(_ref) {
     onClick: function onClick() {
       setSelectedTask(id);
       onclickTaskList(id);
+    },
+    onContextMenu: function onContextMenu(e) {
+      e.preventDefault();
+      setSelectedTask(id);
+      oncontextmenuTaskList(e, id);
     }
   }, valuesToShow === null || valuesToShow === void 0 ? void 0 : valuesToShow.map(function (v, index) {
     return react.createElement("span", {
@@ -11367,7 +11997,8 @@ var SubRow = function SubRow(_ref2) {
     fontFamily = _ref2.fontFamily,
     fontSize = _ref2.fontSize,
     setSelectedTask = _ref2.setSelectedTask,
-    onclickTaskList = _ref2.onclickTaskList;
+    onclickTaskList = _ref2.onclickTaskList,
+    oncontextmenuTaskList = _ref2.oncontextmenuTaskList;
   var str = "";
   for (var i = 0; i < valuesToShow.length + 1; i++) {
     str += "1fr ";
@@ -11386,6 +12017,11 @@ var SubRow = function SubRow(_ref2) {
     onClick: function onClick() {
       setSelectedTask(id);
       onclickTaskList(id);
+    },
+    onContextMenu: function onContextMenu(e) {
+      e.preventDefault();
+      setSelectedTask(id);
+      oncontextmenuTaskList(e, id);
     }
   }, react.createElement("span", {
     key: "phase_" + id + "_valuesToShow_color",
@@ -11409,7 +12045,9 @@ var TimelineSubRow = function TimelineSubRow(_ref3) {
     rowHeight = _ref3.rowHeight,
     rowWidth = _ref3.rowWidth,
     fontFamily = _ref3.fontFamily,
-    fontSize = _ref3.fontSize;
+    fontSize = _ref3.fontSize,
+    setSelectedTask = _ref3.setSelectedTask,
+    oncontextmenuTaskList = _ref3.oncontextmenuTaskList;
   var str = "";
   for (var i = 0; i < valuesToShow.length; i++) {
     str += "1fr ";
@@ -11424,7 +12062,12 @@ var TimelineSubRow = function TimelineSubRow(_ref3) {
   return react.createElement("div", {
     key: "detail_" + id,
     className: styles$9.timeline,
-    style: customStyle
+    style: customStyle,
+    onContextMenu: function onContextMenu(e) {
+      e.preventDefault();
+      setSelectedTask(id);
+      oncontextmenuTaskList(e, id);
+    }
   }, valuesToShow === null || valuesToShow === void 0 ? void 0 : valuesToShow.map(function (v, index) {
     return react.createElement("span", {
       className: index === 0 ? styles$9.main : undefined,
@@ -11433,7 +12076,7 @@ var TimelineSubRow = function TimelineSubRow(_ref3) {
     }, v);
   }));
 };
-var CustomTaskListTableHOC = function CustomTaskListTableHOC(onclickTaskList, id) {
+var CustomTaskListTableHOC = function CustomTaskListTableHOC(onclickTaskList, oncontextmenuTaskList, id) {
   var CustomTaskListTable = function CustomTaskListTable(_ref4) {
     var rowHeight = _ref4.rowHeight,
       rowWidth = _ref4.rowWidth,
@@ -11455,7 +12098,8 @@ var CustomTaskListTableHOC = function CustomTaskListTableHOC(onclickTaskList, id
         fontFamily: fontFamily,
         fontSize: fontSize,
         setSelectedTask: setSelectedTask,
-        onclickTaskList: onclickTaskList
+        onclickTaskList: onclickTaskList,
+        oncontextmenuTaskList: oncontextmenuTaskList
       }), task.type === "task" && react.createElement(SubRow, {
         key: task.id + "_" + task.type,
         task: task,
@@ -11464,7 +12108,8 @@ var CustomTaskListTableHOC = function CustomTaskListTableHOC(onclickTaskList, id
         fontFamily: fontFamily,
         fontSize: fontSize,
         setSelectedTask: setSelectedTask,
-        onclickTaskList: onclickTaskList
+        onclickTaskList: onclickTaskList,
+        oncontextmenuTaskList: oncontextmenuTaskList
       }), task.type === "timeline" && react.createElement(TimelineSubRow, {
         key: task.id + "_" + task.type,
         task: task,
@@ -11473,7 +12118,8 @@ var CustomTaskListTableHOC = function CustomTaskListTableHOC(onclickTaskList, id
         fontFamily: fontFamily,
         fontSize: fontSize,
         setSelectedTask: setSelectedTask,
-        onclickTaskList: onclickTaskList
+        onclickTaskList: onclickTaskList,
+        oncontextmenuTaskList: oncontextmenuTaskList
       }));
     }));
   };
@@ -11536,28 +12182,28 @@ var Planner = function Planner(props) {
   var _useState = react.useState(TimeUnit.MONTH),
     timeUnit = _useState[0],
     setTimeUnit = _useState[1];
-  var _useState2 = react.useState(props.mainGantt.items),
-    currentTasks = _useState2[0],
-    setCurrentTasks = _useState2[1];
-  var _useState3 = react.useState((_props$secondaryGantt = props.secondaryGantt) === null || _props$secondaryGantt === void 0 ? void 0 : _props$secondaryGantt.items),
-    currentDetails = _useState3[0],
-    setCurrentDetails = _useState3[1];
-  var _useState4 = react.useState((_props$mainGantt$show = props.mainGantt.showSecondaryDates) != null ? _props$mainGantt$show : false),
-    mainGanttDoubleView = _useState4[0],
-    setMainGanttDoubleView = _useState4[1];
-  var _useState5 = react.useState(calculateDisplayedDateRange(currentTasks, timeUnit, mainGanttDoubleView, currentDetails, props.preStepsCount)),
-    displayedDates = _useState5[0],
-    setDisplayedDates = _useState5[1];
-  var _useState6 = react.useState(),
-    viewDate = _useState6[0],
-    setViewDate = _useState6[1];
-  var _useState7 = react.useState(),
-    projection = _useState7[0],
-    setProjection = _useState7[1];
-  var locale = "it-IT";
-  var onFilterInput = function onFilterInput(e) {
-    console.log("PLANNER onFilterInput", e);
+  var currentTasks = react.useRef(props.mainGantt.items);
+  var setCurrentTasks = function setCurrentTasks(tasks) {
+    currentTasks.current = tasks;
+  };
+  var currentDetails = react.useRef((_props$secondaryGantt = props.secondaryGantt) === null || _props$secondaryGantt === void 0 ? void 0 : _props$secondaryGantt.items);
+  var setCurrentDetails = function setCurrentDetails(details) {
+    currentDetails.current = details;
   };
+  var _useState2 = react.useState((_props$mainGantt$show = props.mainGantt.showSecondaryDates) != null ? _props$mainGantt$show : false),
+    mainGanttDoubleView = _useState2[0],
+    setMainGanttDoubleView = _useState2[1];
+  var displayedDates = react.useRef(calculateDisplayedDateRange(currentTasks.current, timeUnit, mainGanttDoubleView, currentDetails.current, props.preStepsCount));
+  var setDisplayedDates = function setDisplayedDates(dates) {
+    displayedDates.current = dates;
+  };
+  var _useState3 = react.useState(),
+    viewDate = _useState3[0],
+    setViewDate = _useState3[1];
+  var _useState4 = react.useState(),
+    projection = _useState4[0],
+    setProjection = _useState4[1];
+  var locale = "it-IT";
   var handleClick = function handleClick(row, onClick) {
     if (!row) {
       return;
@@ -11575,6 +12221,28 @@ var Planner = function Planner(props) {
     }
     onClick === null || onClick === void 0 ? void 0 : onClick(row);
   };
+  var handleContextMenu = function handleContextMenu(event, row, onContextMenu) {
+    if (!row) {
+      return;
+    }
+    if (row.type === "task" && props.secondaryGantt) {
+      var _phase$color2;
+      var phase = row;
+      setProjection({
+        start: new Date(phase.startDate),
+        end: new Date(phase.endDate),
+        color: (_phase$color2 = phase.color) != null ? _phase$color2 : "#ED7D31"
+      });
+    } else {
+      setProjection(undefined);
+    }
+    onContextMenu === null || onContextMenu === void 0 ? void 0 : onContextMenu(event, row);
+  };
+  var handleSetDoubleView = function handleSetDoubleView(checked) {
+    var _props$onSetDoubleVie;
+    setMainGanttDoubleView(checked);
+    (_props$onSetDoubleVie = props.onSetDoubleView) === null || _props$onSetDoubleVie === void 0 ? void 0 : _props$onSetDoubleVie.call(props, checked);
+  };
   var handleDateChange = function handleDateChange(task, currentProjects, onDateChange) {
     var id = task === null || task === void 0 ? void 0 : task.id;
     if (!id) {
@@ -11632,25 +12300,32 @@ var Planner = function Planner(props) {
     setProjection(undefined);
   }, [props]);
   react.useEffect(function () {
-    var dates = calculateDisplayedDateRange(currentTasks, timeUnit, mainGanttDoubleView, currentDetails, props.preStepsCount);
+    var dates = calculateDisplayedDateRange(currentTasks.current, timeUnit, mainGanttDoubleView, currentDetails.current, props.preStepsCount);
     setDisplayedDates(dates);
     if (!viewDate) {
-      setViewDate(dates.displayedStartDate);
+      var now = new Date();
+      if (dates.displayedStartDate <= now && dates.displayedEndDate >= now) {
+        setViewDate(now);
+      } else {
+        setViewDate(dates.displayedStartDate);
+      }
     }
-  }, [currentTasks, currentDetails]);
+  }, [timeUnit, mainGanttDoubleView, props.preStepsCount, viewDate]);
   var tasks = [];
-  for (var i = 0; i < currentTasks.length; i++) {
-    tasks.push.apply(tasks, convertProjectToTasks(currentTasks[i], formatToIsoDate(displayedDates.displayedStartDate), formatToIsoDate(displayedDates.displayedEndDate)));
+  for (var i = 0; i < currentTasks.current.length; i++) {
+    tasks.push.apply(tasks, convertProjectToTasks(currentTasks.current[i], formatToIsoDate(displayedDates.current.displayedStartDate), formatToIsoDate(displayedDates.current.displayedEndDate)));
   }
   var details = [];
-  if (currentDetails) {
-    for (var _i = 0; _i < currentDetails.length; _i++) {
-      details.push.apply(details, convertProjectToTasks(currentDetails[_i], formatToIsoDate(displayedDates.displayedStartDate), formatToIsoDate(displayedDates.displayedEndDate)));
+  if (currentDetails.current) {
+    for (var _i = 0; _i < currentDetails.current.length; _i++) {
+      details.push.apply(details, convertProjectToTasks(currentDetails.current[_i], formatToIsoDate(displayedDates.current.displayedStartDate), formatToIsoDate(displayedDates.current.displayedEndDate)));
     }
   }
+  console.log("PLANNER render");
   return react.createElement("div", null, react.createElement(Switcher, {
     onTimeUnitChange: function onTimeUnitChange(timeUnit) {
-      return setTimeUnit(timeUnit);
+      setTimeUnit(timeUnit);
+      setViewDate(undefined);
     }
   }), react.createElement("div", {
     style: {
@@ -11658,73 +12333,109 @@ var Planner = function Planner(props) {
       flexDirection: "column"
     }
   }, react.createElement(Gantt, Object.assign({
-    id: "main",
-    key: "main",
+    id: MAIN_GANTT_ID,
+    key: MAIN_GANTT_ID,
+    filter: props.mainGantt.filter,
     hideLabel: props.mainGantt.hideLabel,
     showSecondaryDates: mainGanttDoubleView,
     hideDependencies: props.mainGantt.hideDependencies,
     ganttHeight: props.mainGantt.ganttHeight,
-    displayedStartDate: displayedDates.displayedStartDate,
-    displayedEndDate: displayedDates.displayedEndDate,
+    displayedStartDate: displayedDates.current.displayedStartDate,
+    displayedEndDate: displayedDates.current.displayedEndDate,
     viewDate: viewDate,
     tasks: tasks,
+    columnWidth: columnWidthForTimeUnit(timeUnit),
     viewMode: toViewMode(timeUnit)
   }, props.mainGantt.stylingOptions, {
-    TaskListHeader: (_props$mainGantt$task = props.mainGantt.taskListHeaderProject) != null ? _props$mainGantt$task : CustomTaskListHeaderHOC(props.mainGantt.title, mainGanttDoubleView != null ? mainGanttDoubleView : false, setMainGanttDoubleView, onFilterInput),
+    TaskListHeader: (_props$mainGantt$task = props.mainGantt.taskListHeaderProject) != null ? _props$mainGantt$task : CustomTaskListHeaderHOC(props.mainGantt.title, mainGanttDoubleView != null ? mainGanttDoubleView : false, handleSetDoubleView),
     TaskListTable: (_props$mainGantt$task2 = props.mainGantt.taskListTableProject) != null ? _props$mainGantt$task2 : CustomTaskListTableHOC(function (id) {
-      var row = getProjectById(id, currentTasks);
+      var row = getProjectById(id, currentTasks.current);
       if (!row) {
-        row = getPhaseById(id, currentTasks);
+        row = getPhaseById(id, currentTasks.current);
       }
       if (row) {
         handleClick(row, props.mainGantt.onClick);
       }
-    }, "main"),
+    }, function (event, id) {
+      var row = getProjectById(id, currentTasks.current);
+      if (!row) {
+        row = getPhaseById(id, currentTasks.current);
+      }
+      if (row) {
+        handleContextMenu(event, row, props.mainGantt.onContextMenu);
+      }
+    }, MAIN_GANTT_ID),
     TooltipContent: (_props$mainGantt$tool = props.mainGantt.tooltipContent) != null ? _props$mainGantt$tool : CustomTooltipHOC(),
-    onClick: function onClick(e) {
-      var row = getProjectById(e.id, currentTasks);
+    onClick: function onClick(task) {
+      var row = getProjectById(task.id, currentTasks.current);
       if (!row) {
-        row = getPhaseById(e.id, currentTasks);
+        row = getPhaseById(task.id, currentTasks.current);
       }
       if (row) {
         handleClick(row, props.mainGantt.onClick);
       }
     },
-    onDateChange: function onDateChange(e) {
-      return handleDateChange(e, currentTasks, props.mainGantt.onDateChange);
+    onContextMenu: function onContextMenu(event, task) {
+      var row = getProjectById(task.id, currentTasks.current);
+      if (!row) {
+        row = getPhaseById(task.id, currentTasks.current);
+      }
+      if (row) {
+        handleContextMenu(event, row, props.mainGantt.onContextMenu);
+      }
+    },
+    onDateChange: function onDateChange(task) {
+      return handleDateChange(task, currentTasks.current, props.mainGantt.onDateChange);
     },
     locale: locale,
     dateTimeFormatters: ganttDateTimeFormatters
   })), props.secondaryGantt && react.createElement(Gantt, Object.assign({
-    id: "secondary",
-    key: "secondary",
+    id: SECONDARY_GANTT_ID,
+    key: SECONDARY_GANTT_ID,
     hideLabel: props.secondaryGantt.hideLabel,
+    filter: props.secondaryGantt.filter,
     showSecondaryDates: mainGanttDoubleView,
     hideDependencies: props.secondaryGantt.hideDependencies,
     ganttHeight: props.secondaryGantt.ganttHeight,
-    displayedStartDate: displayedDates.displayedStartDate,
-    displayedEndDate: displayedDates.displayedEndDate,
+    displayedStartDate: displayedDates.current.displayedStartDate,
+    displayedEndDate: displayedDates.current.displayedEndDate,
     viewDate: viewDate,
     tasks: details,
+    columnWidth: columnWidthForTimeUnit(timeUnit),
     viewMode: toViewMode(timeUnit)
   }, props.mainGantt.stylingOptions, {
-    TaskListHeader: (_props$secondaryGantt3 = props.secondaryGantt.taskListHeaderProject) != null ? _props$secondaryGantt3 : CustomTaskListHeaderHOC(props.secondaryGantt.title, undefined, undefined, onFilterInput),
+    TaskListHeader: (_props$secondaryGantt3 = props.secondaryGantt.taskListHeaderProject) != null ? _props$secondaryGantt3 : CustomTaskListHeaderHOC(props.secondaryGantt.title),
     TaskListTable: (_props$secondaryGantt4 = (_props$secondaryGantt5 = props.secondaryGantt) === null || _props$secondaryGantt5 === void 0 ? void 0 : _props$secondaryGantt5.taskListTableProject) != null ? _props$secondaryGantt4 : CustomTaskListTableHOC(function (id) {
       console.log("planner.tsx secondaryGantt Clicked on " + id);
-    }, "secondary"),
+    }, function (event, id) {
+      if (props.secondaryGantt) {
+        var row = getProjectById(id, currentDetails.current);
+        if (row) {
+          handleContextMenu(event, row, props.secondaryGantt.onContextMenu);
+        }
+      }
+    }, SECONDARY_GANTT_ID),
     TooltipContent: (_props$secondaryGantt6 = props.secondaryGantt.tooltipContent) != null ? _props$secondaryGantt6 : CustomTooltipHOC(),
     projection: projection,
-    onClick: function onClick(e) {
+    onClick: function onClick(task) {
       if (props.secondaryGantt) {
-        var row = getProjectById(e.id, currentDetails);
+        var row = getProjectById(task.id, currentDetails.current);
         if (row) {
           handleClick(row, props.secondaryGantt.onClick);
         }
       }
     },
-    onDateChange: function onDateChange(e) {
+    onContextMenu: function onContextMenu(event, task) {
+      if (props.secondaryGantt) {
+        var row = getProjectById(task.id, currentDetails.current);
+        if (row) {
+          handleContextMenu(event, row, props.secondaryGantt.onContextMenu);
+        }
+      }
+    },
+    onDateChange: function onDateChange(task) {
       var _props$secondaryGantt7;
-      return handleDateChange(e, currentDetails, (_props$secondaryGantt7 = props.secondaryGantt) === null || _props$secondaryGantt7 === void 0 ? void 0 : _props$secondaryGantt7.onDateChange);
+      return handleDateChange(task, currentDetails.current, (_props$secondaryGantt7 = props.secondaryGantt) === null || _props$secondaryGantt7 === void 0 ? void 0 : _props$secondaryGantt7.onDateChange);
     },
     locale: locale,
     dateTimeFormatters: ganttDateTimeFormatters
@@ -11783,15 +12494,8 @@ function getValuesToShow(row, idCol, nameCol, dataColumns, columns, customToValu
   return valuesToShow;
 }
 
-const kupPlannerCss = "._3_ygE{display:table;border-bottom:#e6e4e4 1px solid;border-top:#e6e4e4 1px solid;border-left:#e6e4e4 1px solid}._1nBOt{display:table-row;list-style:none}._2eZzQ{border-right:1px solid rgb(196, 196, 196);opacity:1;margin-left:-2px}._WuQ0f{display:table-cell;vertical-align:-webkit-baseline-middle;vertical-align:middle}._3ZbQT{display:table;border-bottom:#e6e4e4 1px solid;border-left:#e6e4e4 1px solid}._34SS0{display:table-row;text-overflow:ellipsis}._34SS0:nth-of-type(even){}._3lLk3{display:table-cell;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}._nI1Xw{display:flex}._2QjE6{color:rgb(86 86 86);font-size:0.6rem;padding:0.15rem 0.2rem 0 0.2rem;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer}._2TfEi{font-size:0.6rem;padding-left:1rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}._3T42e{background:#fff;padding:12px;box-shadow:0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)}._29NTg{font-size:12px;margin-bottom:6px;color:#666}._25P-K{position:absolute;display:flex;flex-shrink:0;pointer-events:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}._3gVAq{visibility:hidden;position:absolute;display:flex;pointer-events:none}._1eT-t{overflow:hidden auto;width:1rem;flex-shrink:0;scrollbar-width:thin}._1eT-t::-webkit-scrollbar{width:1.1rem;height:1.1rem}._1eT-t::-webkit-scrollbar-corner{background:transparent}._1eT-t::-webkit-scrollbar-thumb{border:6px solid transparent;background:rgba(0, 0, 0, 0.2);background:var(--palette-black-alpha-20, rgba(0, 0, 0, 0.2));border-radius:10px;background-clip:padding-box}._1eT-t::-webkit-scrollbar-thumb:hover{border:4px solid transparent;background:rgba(0, 0, 0, 0.3);background:var(--palette-black-alpha-30, rgba(0, 0, 0, 0.3));background-clip:padding-box}._EvhC1{border-radius:8px;background:#efefef;margin:12px;padding:12px}._2dZTy{fill:#fff}._2dZTy:nth-child(even){}._3rUKi{stroke:transparent}._RuwuK{stroke:#e6e4e4}._9w8d5{text-anchor:middle;fill:#333;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}._1rLuZ{stroke:#e6e4e4}._2q1Kt{text-anchor:middle;fill:#555;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}._35nLX{fill:#ffffff;stroke:#e0e0e0;stroke-width:1.4}._KxSXS{cursor:pointer;outline:none}._KxSXS:hover ._3w_5u{visibility:visible;opacity:1}._3w_5u{fill:#ddd;cursor:ew-resize;opacity:0;visibility:hidden}._31ERP{-webkit-user-select:none;-moz-user-select:none;user-select:none;stroke-width:0}._3zRJQ{fill:#fff;text-anchor:middle;font-weight:lighter;dominant-baseline:central;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}._3KcaM{fill:#555;text-anchor:start;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}._11iN9{background:#efefef;border-radius:8px;margin:12px;overflow:hidden;padding:12px}._CZjuD{overflow:hidden;font-size:0;margin:0;padding:0}._2B2zv{margin:0;padding:0;overflow:hidden}._3eULf{display:flex;padding:0;margin:0;list-style:none;outline:none;position:relative}._2k9Ys{overflow:auto;max-width:100%;scrollbar-width:thin;height:1.2rem}._2k9Ys::-webkit-scrollbar{width:1.1rem;height:1.1rem}._2k9Ys::-webkit-scrollbar-corner{background:transparent}._2k9Ys::-webkit-scrollbar-thumb{border:6px solid transparent;background:rgba(0, 0, 0, 0.2);background:var(--palette-black-alpha-20, rgba(0, 0, 0, 0.2));border-radius:10px;background-clip:padding-box}._2k9Ys::-webkit-scrollbar-thumb:hover{border:4px solid transparent;background:rgba(0, 0, 0, 0.3);background:var(--palette-black-alpha-30, rgba(0, 0, 0, 0.3));background-clip:padding-box}._19jgW{height:1px}._37E9D{display:flex;justify-content:space-around;max-width:330px;place-items:\"center\";text-align:center;align-items:center}._WrYI6{font-weight:bold;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._c53zr{max-width:-moz-max-content;max-width:max-content;padding:0 4px;text-align:right}._2eBO5{position:relative;display:inline-block;width:30px;height:17px}._hiyro{opacity:0;width:0;height:0}._hiyro:checked+._2HI58{background-color:#003b77}._hiyro:checked+._2HI58:before{transform:translateX(13px)}._hiyro:focus+._2HI58{box-shadow:0 0 1px #003b77}._2HI58{-webkit-transition:0.4s;cursor:pointer;background-color:#ccc;bottom:0;border-radius:17px;left:0;position:absolute;right:0;top:0;transition:0.4s}._2HI58:before{-webkit-transition:0.1s;background-color:white;border-radius:50%;bottom:2px;content:\"\";height:13px;left:2px;position:absolute;transition:0.1s;width:13px}._2gSdA{font-size:12px;padding:6px}._2cfRI{font-size:12px}._lEI6r{padding:0 10px;margin-right:10px}._RU6Aa{background:var(--kup-background-color, #ffffff);border:1px solid var(--kup-border-color, #acacac);border-radius:4px;box-sizing:border-box;color:var(--kup-text-color, #595959);cursor:pointer;display:grid;font-weight:400;grid-template-columns:var(--grid-project-columns, 1fr 1fr 1fr);place-items:center}._RU6Aa>*{font-size:14px;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}._RU6Aa ._30j6y{font-weight:700;width:100%;text-align:center}._T0HQN{cursor:pointer;display:grid;border-width:1px;border-style:solid;border-color:#acacac;border-bottom-left-radius:4px;border-bottom-right-radius:4px;box-sizing:border-box;grid-template-columns:var(--grid-fasi-columns, 1fr 1fr 1fr);place-items:center;background:#ffffff;color:#595959;font-weight:400}._T0HQN>*{font-size:12px;line-height:14px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:100%}._T0HQN:has(+._T0HQN),._RU6Aa:has(+._T0HQN){border-bottom-left-radius:0;border-bottom-right-radius:0}._yp2DW{cursor:pointer;display:grid;border-width:1px;border-style:solid;border-color:#cbcbcb;border-radius:4px;grid-template-columns:var(--grid-fasi-columns, 1fr 1fr 1fr);place-items:center;background:#fff;color:#595959;font-weight:400;box-sizing:border-box}._yp2DW>*{font-size:14px;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}._yp2DW ._30j6y{font-weight:700;width:100%;text-align:center}._3P0WE{display:grid;grid-auto-flow:column;grid-gap:8px;margin-left:12px;width:-moz-max-content;width:max-content}._1oXbe{background:transparent;border-color:var(--kup-primary-color, #003b77);border-radius:4px;border-width:1px;box-shadow:0 3px 1px -2px rgba(var(--kup-text-color-rgb, 51 51 51), 0.2), 0 2px 2px 0 rgba(var(--kup-text-color-rgb, 51 51 51), 0.14), 0 1px 5px 0 rgba(var(--kup-text-color-rgb, 51 51 51), 0.12);box-sizing:border-box;color:var(--kup-primary-color, #003b77);cursor:pointer;font-size:11px;height:32px;min-width:64px}._1R9mh{font-family:var(--kup-font-family, inherit);font-size:11px;letter-spacing:0.0892857143em;text-decoration:none;text-transform:uppercase;padding:0 6px}:host{display:block}";
+const kupPlannerCss = "._3_ygE{display:table;border-bottom:#e6e4e4 1px solid;border-top:#e6e4e4 1px solid;border-left:#e6e4e4 1px solid}._1nBOt{display:table-row;list-style:none}._2eZzQ{border-right:1px solid rgb(196, 196, 196);opacity:1;margin-left:-2px}._WuQ0f{display:table-cell;vertical-align:-webkit-baseline-middle;vertical-align:middle}._3ZbQT{display:table;border-bottom:#e6e4e4 1px solid;border-left:#e6e4e4 1px solid}._34SS0{display:table-row;text-overflow:ellipsis}._34SS0:nth-of-type(even){}._3lLk3{display:table-cell;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}._nI1Xw{display:flex}._2QjE6{color:rgb(86 86 86);font-size:0.6rem;padding:0.15rem 0.2rem 0 0.2rem;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer}._2TfEi{font-size:0.6rem;padding-left:1rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}._3T42e{background:#fff;padding:12px;box-shadow:0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)}._29NTg{font-size:12px;margin-bottom:6px;color:#666}._25P-K{position:absolute;display:flex;flex-shrink:0;pointer-events:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}._3gVAq{visibility:hidden;position:absolute;display:flex;pointer-events:none}._1eT-t{overflow:hidden auto;width:1rem;flex-shrink:0;scrollbar-width:thin}._1eT-t::-webkit-scrollbar{width:1.1rem;height:1.1rem}._1eT-t::-webkit-scrollbar-corner{background:transparent}._1eT-t::-webkit-scrollbar-thumb{border:6px solid transparent;background:rgba(0, 0, 0, 0.2);background:var(--palette-black-alpha-20, rgba(0, 0, 0, 0.2));border-radius:10px;background-clip:padding-box}._1eT-t::-webkit-scrollbar-thumb:hover{border:4px solid transparent;background:rgba(0, 0, 0, 0.3);background:var(--palette-black-alpha-30, rgba(0, 0, 0, 0.3));background-clip:padding-box}._EvhC1{border-radius:8px;background:#efefef;margin:12px;padding:12px}._2dZTy{fill:#fff}._2dZTy:nth-child(even){}._3rUKi{stroke:transparent}._RuwuK{stroke:#e6e4e4}._9w8d5{text-anchor:middle;fill:#333;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}._1rLuZ{stroke:#e6e4e4}._2q1Kt{text-anchor:middle;fill:#555;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}._35nLX{fill:#ffffff;stroke:#e0e0e0;stroke-width:1.4}._KxSXS{cursor:pointer;outline:none}._KxSXS:hover ._3w_5u{visibility:visible;opacity:1}._3w_5u{fill:#ddd;cursor:ew-resize;opacity:0;visibility:hidden}._31ERP{-webkit-user-select:none;-moz-user-select:none;user-select:none;stroke-width:0}._3zRJQ{fill:#fff;text-anchor:middle;font-weight:lighter;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}._3KcaM{fill:#555;text-anchor:start;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}._11iN9{background:#efefef;border-radius:8px;margin:12px;overflow:hidden;padding:12px}._CZjuD{overflow:hidden;font-size:0;margin:0;padding:0}._2B2zv{margin:0;padding:0;overflow:hidden}._3eULf{display:flex;padding:0;margin:0;list-style:none;outline:none;position:relative}._2k9Ys{overflow:auto;max-width:100%;scrollbar-width:thin;height:1.2rem}._2k9Ys::-webkit-scrollbar{width:1.1rem;height:1.1rem}._2k9Ys::-webkit-scrollbar-corner{background:transparent}._2k9Ys::-webkit-scrollbar-thumb{border:6px solid transparent;background:rgba(0, 0, 0, 0.2);background:var(--palette-black-alpha-20, rgba(0, 0, 0, 0.2));border-radius:10px;background-clip:padding-box}._2k9Ys::-webkit-scrollbar-thumb:hover{border:4px solid transparent;background:rgba(0, 0, 0, 0.3);background:var(--palette-black-alpha-30, rgba(0, 0, 0, 0.3));background-clip:padding-box}._19jgW{height:1px}._37E9D{display:flex;justify-content:space-around;max-width:330px;place-items:\"center\";text-align:center;align-items:center}._WrYI6{font-weight:bold;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._c53zr{max-width:-moz-max-content;max-width:max-content;padding:0 4px;text-align:right}._2eBO5{position:relative;display:inline-block;width:30px;height:17px}._hiyro{opacity:0;width:0;height:0}._hiyro:checked+._2HI58{background-color:#003b77}._hiyro:checked+._2HI58:before{transform:translateX(13px)}._hiyro:focus+._2HI58{box-shadow:0 0 1px #003b77}._2HI58{-webkit-transition:0.4s;cursor:pointer;background-color:#ccc;bottom:0;border-radius:17px;left:0;position:absolute;right:0;top:0;transition:0.4s}._2HI58:before{-webkit-transition:0.1s;background-color:white;border-radius:50%;bottom:2px;content:\"\";height:13px;left:2px;position:absolute;transition:0.1s;width:13px}._2gSdA{font-size:12px;padding:6px}._2cfRI{font-size:12px}._lEI6r{padding:0 10px;margin-right:10px}._RU6Aa{background:var(--kup-background-color, #ffffff);border:1px solid var(--kup-border-color, #acacac);border-radius:4px;box-sizing:border-box;color:var(--kup-text-color, #595959);cursor:pointer;display:grid;font-weight:400;grid-template-columns:var(--grid-project-columns, 1fr 1fr 1fr);place-items:center}._RU6Aa>*{font-size:14px;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}._RU6Aa ._30j6y{font-weight:700;width:100%;text-align:center}._T0HQN{cursor:pointer;display:grid;border-width:1px;border-style:solid;border-color:#acacac;border-bottom-left-radius:4px;border-bottom-right-radius:4px;box-sizing:border-box;grid-template-columns:var(--grid-fasi-columns, 1fr 1fr 1fr);place-items:center;background:#ffffff;color:#595959;font-weight:400}._T0HQN>*{font-size:12px;line-height:14px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:100%}._T0HQN:has(+._T0HQN),._RU6Aa:has(+._T0HQN){border-bottom-left-radius:0;border-bottom-right-radius:0}._yp2DW{cursor:pointer;display:grid;border-width:1px;border-style:solid;border-color:#cbcbcb;border-radius:4px;grid-template-columns:var(--grid-fasi-columns, 1fr 1fr 1fr);place-items:center;background:#fff;color:#595959;font-weight:400;box-sizing:border-box}._yp2DW>*{font-size:14px;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}._yp2DW ._30j6y{font-weight:700;width:100%;text-align:center}._3P0WE{display:grid;grid-auto-flow:column;grid-gap:8px;margin-left:12px;width:-moz-max-content;width:max-content}._1oXbe{background:transparent;border-color:var(--kup-primary-color, #003b77);border-radius:4px;border-width:1px;box-shadow:0 3px 1px -2px rgba(var(--kup-text-color-rgb, 51 51 51), 0.2), 0 2px 2px 0 rgba(var(--kup-text-color-rgb, 51 51 51), 0.14), 0 1px 5px 0 rgba(var(--kup-text-color-rgb, 51 51 51), 0.12);box-sizing:border-box;color:var(--kup-primary-color, #003b77);cursor:pointer;font-size:11px;height:32px;min-width:64px}._1R9mh{font-family:var(--kup-font-family, inherit);font-size:11px;letter-spacing:0.0892857143em;text-decoration:none;text-transform:uppercase;padding:0 6px}:host{display:block}.filter{margin:12px 10px 12px 0;padding:0 10px}";
 
-var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-  if (kind === "a" && !f)
-    throw new TypeError("Private accessor was defined without a getter");
-  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-    throw new TypeError("Cannot read private member from an object whose class did not declare it");
-  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
 var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
   if (kind === "m")
     throw new TypeError("Private method is not writable");
@@ -11801,7 +12505,14 @@ var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) ||
     throw new TypeError("Cannot write private member to an object whose class did not declare it");
   return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _KupPlanner_instances, _KupPlanner_kupManager, _KupPlanner_rootPlanner, _KupPlanner_lastOnChangeReceived, _KupPlanner_renderReactPlannerElement, _KupPlanner_toTasks, _KupPlanner_toDetails, _KupPlanner_getTask, _KupPlanner_removePhases, _KupPlanner_handleOnClickOnTask, _KupPlanner_handleOnClickOnPhase, _KupPlanner_handleOnClickOnDetail, _KupPlanner_emitOnChangeEventsReceived;
+var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+  if (kind === "a" && !f)
+    throw new TypeError("Private accessor was defined without a getter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+    throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _KupPlanner_instances, _KupPlanner_kupManager, _KupPlanner_lastOnChangeReceived, _KupPlanner_rootPlanner, _KupPlanner_phases, _KupPlanner_showSecondaryDatesLocal, _KupPlanner_renderReactPlannerElement, _KupPlanner_toTasks, _KupPlanner_toDetails, _KupPlanner_getTask, _KupPlanner_removePhases, _KupPlanner_handleOnClickOnTask, _KupPlanner_handleOnClickOnPhase, _KupPlanner_handleOnClickOnDetail, _KupPlanner_handleOnContextMenuOnTask, _KupPlanner_handleOnContextMenuOnPhase, _KupPlanner_handleOnContextMenuOnDetail, _KupPlanner_emitOnChangeEventsReceived, _KupPlanner_onFilter, _KupPlanner_getIconUrl, _KupPlanner_getIconColor;
 const KupPlanner$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
@@ -11810,14 +12521,17 @@ const KupPlanner$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.kupClick = createEvent(this, "kup-planner-click", 6);
     this.kupDateChange = createEvent(this, "kup-planner-datechange", 6);
     this.kupReady = createEvent(this, "kup-planner-ready", 6);
+    this.kupContextMenu = createEvent(this, "kup-planner-contextmenu", 6);
     _KupPlanner_instances.add(this);
     /*-------------------------------------------------*/
     /*       I n t e r n a l   V a r i a b l e s       */
     /*-------------------------------------------------*/
     _KupPlanner_kupManager.set(this, kupManagerInstance());
-    _KupPlanner_rootPlanner.set(this, void 0);
     _KupPlanner_lastOnChangeReceived.set(this, void 0);
-    this.plannerProps = undefined;
+    _KupPlanner_rootPlanner.set(this, void 0);
+    _KupPlanner_phases.set(this, {});
+    // no re-render
+    _KupPlanner_showSecondaryDatesLocal.set(this, false);
     this.customStyle = '';
     this.data = undefined;
     this.detailData = undefined;
@@ -11825,6 +12539,7 @@ const KupPlanner$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.detailColumns = undefined;
     this.detailDates = undefined;
     this.detailHeight = undefined;
+    this.detailIconCol = undefined;
     this.detailIdCol = undefined;
     this.detailNameCol = undefined;
     this.detailPrevDates = undefined;
@@ -11834,6 +12549,7 @@ const KupPlanner$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.phaseColumns = undefined;
     this.phaseColParDep = undefined;
     this.phaseDates = undefined;
+    this.phaseIconCol = undefined;
     this.phaseIdCol = undefined;
     this.phaseNameCol = undefined;
     this.phasePrevDates = undefined;
@@ -11841,25 +12557,23 @@ const KupPlanner$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.taskColumns = undefined;
     this.taskDates = undefined;
     this.taskHeight = undefined;
+    this.taskIconCol = undefined;
     this.taskIdCol = undefined;
     this.taskNameCol = undefined;
     this.taskPrevDates = undefined;
     this.titleMess = undefined;
+    this.plannerProps = undefined;
   }
-  onKupClick(event, taskAction) {
-    this.kupClick.emit({
-      comp: this,
-      id: this.rootElement.id,
-      value: event,
-      taskAction: taskAction,
-    });
+  dataChanged() {
+    __classPrivateFieldSet(this, _KupPlanner_phases, {}, "f");
   }
-  onKupDateChange(event) {
-    this.kupDateChange.emit({
-      comp: this,
-      id: this.rootElement.id,
-      value: event,
-    });
+  showSecondaryDatesChanged() {
+    var _a;
+    __classPrivateFieldSet(this, _KupPlanner_showSecondaryDatesLocal, this.showSecondaryDates, "f");
+    if ((_a = this.plannerProps) === null || _a === void 0 ? void 0 : _a.mainGantt) {
+      this.plannerProps.mainGantt.showSecondaryDates =
+        this.showSecondaryDates;
+    }
   }
   /*-------------------------------------------------*/
   /*           P u b l i c   M e t h o d s           */
@@ -11894,6 +12608,7 @@ const KupPlanner$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     var _a;
     const task = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getTask).call(this, taskId);
     if (task) {
+      __classPrivateFieldGet(this, _KupPlanner_phases, "f")[taskId] = data;
       task.phases = (_a = data.rows) === null || _a === void 0 ? void 0 : _a.filter((row) => isAtLeastOneDateValid(row.cells[this.phaseDates[0]], row.cells[this.phaseDates[1]])).map((row) => {
         const datesSanitized = sanitizeAllDates(row.cells[this.phaseDates[0]], row.cells[this.phaseDates[1]], row.cells[this.phasePrevDates[0]], row.cells[this.phasePrevDates[1]]);
         const valuesToShow = getValuesToShow(row, this.phaseIdCol, this.phaseNameCol, data.columns, this.phaseColumns, () => this.phaseColumns.map((col) => col == this.phaseDates[0]
@@ -11901,6 +12616,8 @@ const KupPlanner$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
           : col == this.phaseDates[1]
             ? '#END#'
             : getCellValueForDisplay(data.columns.find((kCol) => kCol.name == col), row.cells[col])));
+        let iconUrl = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getIconUrl).call(this, row, this.phaseIconCol);
+        let iconColor = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getIconColor).call(this, row, this.phaseIconCol);
         let phase = {
           taskRow: task.taskRow,
           phaseRow: row,
@@ -11917,59 +12634,43 @@ const KupPlanner$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
           selectedColor: row.cells[this.phaseColorCol].value,
           valuesToShow: valuesToShow,
           rowType: KupPlannerGanttRowType.PHASE,
+          icon: iconUrl
+            ? { url: iconUrl, color: iconColor !== null && iconColor !== void 0 ? iconColor : '#595959' }
+            : undefined,
         };
         return phase;
       });
     }
     this.plannerProps = Object.assign({}, this.plannerProps);
   }
-  handleOnClick(nativeEvent) {
-    console.log('handleOnClick', nativeEvent);
-    switch (nativeEvent.rowType) {
-      case KupPlannerGanttRowType.TASK:
-        const taskAction = nativeEvent.phases
-          ? KupPlannerTaskAction.onClosing
-          : KupPlannerTaskAction.onOpening;
-        if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_handleOnClickOnTask).call(this, nativeEvent)) {
-          this.onKupClick(nativeEvent, taskAction);
-        }
-        break;
-      case KupPlannerGanttRowType.PHASE:
-        if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_handleOnClickOnPhase).call(this)) {
-          this.onKupClick(nativeEvent);
-        }
-        break;
-      case KupPlannerGanttRowType.DETAIL:
-        if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_handleOnClickOnDetail).call(this)) {
-          this.onKupClick(nativeEvent);
-        }
-        break;
-    }
-  }
-  handleOnDateChange(nativeEvent) {
-    if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_emitOnChangeEventsReceived).call(this, nativeEvent)) {
-      console.log('handleOnDateChange', nativeEvent);
-      this.onKupDateChange(nativeEvent);
-    }
-  }
+  //---- Lifecycle hooks ----
   componentWillLoad() {
     __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").debug.logLoad(this, false);
     __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").theme.register(this);
   }
   componentDidLoad() {
+    __classPrivateFieldSet(this, _KupPlanner_showSecondaryDatesLocal, this.showSecondaryDates, "f");
     let details = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_toDetails).call(this, this.detailData);
     if (details && details.length == 0) {
       details = undefined;
     }
+    const mainFilter = this.rootElement.shadowRoot.querySelector('#main-filter');
+    FTextFieldMDC(mainFilter);
+    const secondaryFilter = this.rootElement.shadowRoot.querySelector('#secondary-filter');
+    if (details) {
+      FTextFieldMDC(secondaryFilter);
+    }
     this.plannerProps = {
       mainGantt: {
         title: this.titleMess,
         items: __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_toTasks).call(this, this.data),
         stylingOptions: Object.assign(Object.assign({}, defaultStylingOptions), { listCellWidth: this.listCellWidth }),
+        filter: mainFilter,
         hideLabel: true,
         ganttHeight: this.taskHeight,
-        showSecondaryDates: this.showSecondaryDates,
+        showSecondaryDates: __classPrivateFieldGet(this, _KupPlanner_showSecondaryDatesLocal, "f"),
         onClick: (nativeEvent) => this.handleOnClick(nativeEvent),
+        onContextMenu: (event, row) => this.handleOnContextMenu(event, row),
         onDateChange: (nativeEvent) => this.handleOnDateChange(nativeEvent),
       },
       secondaryGantt: details
@@ -11977,14 +12678,16 @@ const KupPlanner$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
           title: '',
           items: details,
           stylingOptions: Object.assign(Object.assign({}, defaultStylingOptions), { listCellWidth: this.listCellWidth }),
+          filter: secondaryFilter,
           hideLabel: true,
           ganttHeight: this.detailHeight,
           onClick: (nativeEvent) => this.handleOnClick(nativeEvent),
+          onContextMenu: (event, row) => this.handleOnContextMenu(event, row),
           onDateChange: (nativeEvent) => this.handleOnDateChange(nativeEvent),
         }
         : undefined,
+      onSetDoubleView: (checked) => this.handleOnSetDoubleView(checked),
     };
-    console.log('kup-planner.tsx componentDidLoad plannerProps', this.plannerProps);
     __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_renderReactPlannerElement).call(this);
     this.kupReady.emit({
       comp: this,
@@ -11999,14 +12702,134 @@ const KupPlanner$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   componentDidRender() {
     __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").debug.logRender(this, true);
   }
+  onKupClick(event, taskAction) {
+    this.kupClick.emit({
+      comp: this,
+      id: this.rootElement.id,
+      value: event,
+      taskAction: taskAction,
+    });
+  }
+  onKupContextMenu(event, ganttRow, taskAction) {
+    let row;
+    let cell;
+    let column;
+    switch (ganttRow.type) {
+      case 'project': {
+        row = ganttRow.taskRow;
+        cell = row.cells[this.taskIdCol];
+        column = this.data.columns[this.taskIdCol];
+        break;
+      }
+      case 'task': {
+        row = ganttRow.phaseRow;
+        cell = row.cells[this.phaseIdCol];
+        //column = this.data.columns[this.taskIdCol];
+        break;
+      }
+      case 'timeline': {
+        row = ganttRow.detailRow;
+        cell = row.cells[this.detailIdCol];
+        column = this.data.columns[this.detailIdCol];
+        break;
+      }
+    }
+    this.kupContextMenu.emit({
+      comp: this,
+      id: this.rootElement.id,
+      value: ganttRow,
+      taskAction: taskAction,
+      details: {
+        cell: cell,
+        column: column,
+        originalEvent: event,
+        row: row,
+      },
+    });
+  }
+  onKupDateChange(event, taskAction) {
+    this.kupDateChange.emit({
+      comp: this,
+      id: this.rootElement.id,
+      value: event,
+      taskAction: taskAction,
+    });
+  }
+  handleOnClick(nativeEvent) {
+    switch (nativeEvent.rowType) {
+      case KupPlannerGanttRowType.TASK:
+        const taskAction = nativeEvent.phases
+          ? KupPlannerTaskAction.onTaskClosing
+          : KupPlannerTaskAction.onTaskOpening;
+        if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_handleOnClickOnTask).call(this, nativeEvent)) {
+          this.onKupClick(nativeEvent, taskAction);
+        }
+        break;
+      case KupPlannerGanttRowType.PHASE:
+        if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_handleOnClickOnPhase).call(this)) {
+          this.onKupClick(nativeEvent, KupPlannerTaskAction.onClick);
+        }
+        break;
+      case KupPlannerGanttRowType.DETAIL:
+        if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_handleOnClickOnDetail).call(this)) {
+          this.onKupClick(nativeEvent, KupPlannerTaskAction.onClick);
+        }
+        break;
+    }
+  }
+  handleOnContextMenu(event, row) {
+    switch (row.rowType) {
+      case KupPlannerGanttRowType.TASK:
+        if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_handleOnContextMenuOnTask).call(this)) {
+          this.onKupContextMenu(event, row, KupPlannerTaskAction.onRightClick);
+        }
+        break;
+      case KupPlannerGanttRowType.PHASE:
+        if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_handleOnContextMenuOnPhase).call(this)) {
+          this.onKupContextMenu(event, row, KupPlannerTaskAction.onRightClick);
+        }
+        break;
+      case KupPlannerGanttRowType.DETAIL:
+        if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_handleOnContextMenuOnDetail).call(this)) {
+          this.onKupContextMenu(event, row, KupPlannerTaskAction.onRightClick);
+        }
+        break;
+    }
+  }
+  handleOnSetDoubleView(checked) {
+    var _a;
+    __classPrivateFieldSet(this, _KupPlanner_showSecondaryDatesLocal, checked, "f");
+    if ((_a = this.plannerProps) === null || _a === void 0 ? void 0 : _a.mainGantt) {
+      this.plannerProps.mainGantt.showSecondaryDates = checked;
+    }
+  }
+  handleOnDateChange(nativeEvent) {
+    if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_emitOnChangeEventsReceived).call(this, nativeEvent)) {
+      if (nativeEvent.rowType != KupPlannerGanttRowType.DETAIL) {
+        this.onKupDateChange(nativeEvent, KupPlannerTaskAction.onResize);
+      }
+    }
+  }
   render() {
-    //console.log('kup-planner.tsx render');
-    return (h(Host, null, h("div", { id: componentWrapperId, style: { maxWidth: this.maxWidth } })));
+    var _a;
+    return (h(Host, null, h("style", null, __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId, style: { maxWidth: this.maxWidth } }), h(FTextField, { icon: KupThemeIconValues.SEARCH, id: "main-filter", label: __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").language.translate(KupLanguageSearch.SEARCH), onKeyDown: (e) => {
+        if (e.key === 'Enter') {
+          __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_onFilter).call(this, e);
+        }
+      }, wrapperClass: "filter" }), ((_a = this.detailData) === null || _a === void 0 ? void 0 : _a.rows) && this.detailData.rows.length > 0 ? (h(FTextField, { icon: KupThemeIconValues.SEARCH, id: "secondary-filter", label: __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").language.translate(KupLanguageSearch.SEARCH), onKeyDown: (e) => {
+        if (e.key === 'Enter') {
+          __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_onFilter).call(this, e, true);
+        }
+      }, wrapperClass: "filter" })) : null));
   }
   disconnectedCallback() {
     __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").theme.unregister(this);
   }
   get rootElement() { return this; }
+  static get watchers() { return {
+    "data": ["dataChanged"],
+    "showSecondaryDates": ["showSecondaryDatesChanged"]
+  }; }
   static get style() { return kupPlannerCss; }
 }, [1, "kup-planner", {
     "customStyle": [1, "custom-style"],
@@ -12016,6 +12839,7 @@ const KupPlanner$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "detailColumns": [16],
     "detailDates": [16],
     "detailHeight": [2, "detail-height"],
+    "detailIconCol": [1, "detail-icon-col"],
     "detailIdCol": [1, "detail-id-col"],
     "detailNameCol": [1, "detail-name-col"],
     "detailPrevDates": [16],
@@ -12025,6 +12849,7 @@ const KupPlanner$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "phaseColumns": [16],
     "phaseColParDep": [1, "phase-col-par-dep"],
     "phaseDates": [16],
+    "phaseIconCol": [1, "phase-icon-col"],
     "phaseIdCol": [1, "phase-id-col"],
     "phaseNameCol": [1, "phase-name-col"],
     "phasePrevDates": [16],
@@ -12032,6 +12857,7 @@ const KupPlanner$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "taskColumns": [16],
     "taskDates": [16],
     "taskHeight": [2, "task-height"],
+    "taskIconCol": [1, "task-icon-col"],
     "taskIdCol": [1, "task-id-col"],
     "taskNameCol": [1, "task-name-col"],
     "taskPrevDates": [16],
@@ -12042,7 +12868,7 @@ const KupPlanner$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "setProps": [64],
     "addPhases": [64]
   }]);
-_KupPlanner_kupManager = new WeakMap(), _KupPlanner_rootPlanner = new WeakMap(), _KupPlanner_lastOnChangeReceived = new WeakMap(), _KupPlanner_instances = new WeakSet(), _KupPlanner_renderReactPlannerElement = function _KupPlanner_renderReactPlannerElement() {
+_KupPlanner_kupManager = new WeakMap(), _KupPlanner_lastOnChangeReceived = new WeakMap(), _KupPlanner_rootPlanner = new WeakMap(), _KupPlanner_phases = new WeakMap(), _KupPlanner_showSecondaryDatesLocal = new WeakMap(), _KupPlanner_instances = new WeakSet(), _KupPlanner_renderReactPlannerElement = function _KupPlanner_renderReactPlannerElement() {
   var _a;
   (_a = __classPrivateFieldGet(this, _KupPlanner_rootPlanner, "f")) === null || _a === void 0 ? void 0 : _a.unmount();
   const componentWrapperElement = this.rootElement.shadowRoot.getElementById(componentWrapperId);
@@ -12054,7 +12880,13 @@ _KupPlanner_kupManager = new WeakMap(), _KupPlanner_rootPlanner = new WeakMap(),
   var _a;
   let tasks = (_a = data.rows) === null || _a === void 0 ? void 0 : _a.filter((row) => isAtLeastOneDateValid(row.cells[this.taskDates[0]], row.cells[this.taskDates[1]])).map((row) => {
     const datesSanitized = sanitizeAllDates(row.cells[this.taskDates[0]], row.cells[this.taskDates[1]], row.cells[this.taskPrevDates[0]], row.cells[this.taskPrevDates[1]]);
-    const valuesToShow = getValuesToShow(row, this.taskIdCol, this.taskNameCol, data.columns, this.taskColumns);
+    const valuesToShow = getValuesToShow(row, this.taskIdCol, this.taskNameCol, data.columns, this.taskColumns, () => this.taskColumns.map((col) => col == this.taskDates[0]
+      ? '#START#'
+      : col == this.taskDates[1]
+        ? '#END#'
+        : getCellValueForDisplay(data.columns.find((kCol) => kCol.name == col), row.cells[col])));
+    let iconUrl = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getIconUrl).call(this, row, this.taskIconCol);
+    let iconColor = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getIconColor).call(this, row, this.taskIconCol);
     let task = {
       taskRow: row,
       taskRowId: row.id,
@@ -12067,6 +12899,9 @@ _KupPlanner_kupManager = new WeakMap(), _KupPlanner_rootPlanner = new WeakMap(),
       type: 'project',
       valuesToShow: valuesToShow,
       rowType: KupPlannerGanttRowType.TASK,
+      icon: iconUrl
+        ? { url: iconUrl, color: iconColor !== null && iconColor !== void 0 ? iconColor : '#595959' }
+        : undefined,
     };
     return task;
   });
@@ -12079,6 +12914,7 @@ _KupPlanner_kupManager = new WeakMap(), _KupPlanner_rootPlanner = new WeakMap(),
   data.rows
     .filter((row) => isAtLeastOneDateValid(row.cells[this.detailDates[0]], row.cells[this.detailDates[1]]))
     .forEach((row) => {
+    var _a, _b;
     const detailId = row.cells[this.detailIdCol].value;
     const detailNameId = row.cells[this.detailNameCol].value;
     const datesSanitized = sanitizeAllDates(row.cells[this.detailDates[0]], row.cells[this.detailDates[1]]);
@@ -12088,6 +12924,7 @@ _KupPlanner_kupManager = new WeakMap(), _KupPlanner_rootPlanner = new WeakMap(),
       detail = {
         id: detailId,
         name: detailNameId,
+        detailRow: row,
         type: 'timeline',
         valuesToShow: valuesToShow,
         rowType: KupPlannerGanttRowType.DETAIL,
@@ -12095,15 +12932,20 @@ _KupPlanner_kupManager = new WeakMap(), _KupPlanner_rootPlanner = new WeakMap(),
       };
       details.push(detail);
     }
+    let iconUrl = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getIconUrl).call(this, row, this.detailIconCol);
+    let iconColor = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getIconColor).call(this, row, this.detailIconCol);
     detail.schedule.push({
       startDate: datesSanitized.dateValues[0],
       endDate: datesSanitized.dateValues[1],
       color: this.detailColorCol
-        ? row.cells[this.detailColorCol].value
+        ? (_a = row.cells[this.detailColorCol].value) !== null && _a !== void 0 ? _a : '#D9D9D8'
         : '#D9D9D8',
       selectedColor: this.detailColorCol
-        ? row.cells[this.detailColorCol].value
+        ? (_b = row.cells[this.detailColorCol].value) !== null && _b !== void 0 ? _b : '#D9D9D8'
         : '#D9D9D8',
+      icon: iconUrl
+        ? { url: iconUrl, color: iconColor !== null && iconColor !== void 0 ? iconColor : '#595959' }
+        : undefined,
     });
   });
   return details;
@@ -12113,9 +12955,6 @@ _KupPlanner_kupManager = new WeakMap(), _KupPlanner_rootPlanner = new WeakMap(),
   const task = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getTask).call(this, taskId);
   if (task)
     task.phases = undefined;
-  // this.plannerProps.mainGantt = JSON.parse(
-  //     JSON.stringify(this.plannerProps.mainGantt)
-  // );
   this.plannerProps = Object.assign({}, this.plannerProps);
 }, _KupPlanner_handleOnClickOnTask = function _KupPlanner_handleOnClickOnTask(nativeEvent) {
   const task = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getTask).call(this, nativeEvent.id);
@@ -12127,6 +12966,12 @@ _KupPlanner_kupManager = new WeakMap(), _KupPlanner_rootPlanner = new WeakMap(),
   return true;
 }, _KupPlanner_handleOnClickOnDetail = function _KupPlanner_handleOnClickOnDetail() {
   return true;
+}, _KupPlanner_handleOnContextMenuOnTask = function _KupPlanner_handleOnContextMenuOnTask() {
+  return true;
+}, _KupPlanner_handleOnContextMenuOnPhase = function _KupPlanner_handleOnContextMenuOnPhase() {
+  return true;
+}, _KupPlanner_handleOnContextMenuOnDetail = function _KupPlanner_handleOnContextMenuOnDetail() {
+  return true;
 }, _KupPlanner_emitOnChangeEventsReceived = function _KupPlanner_emitOnChangeEventsReceived(nativeEvent) {
   let emitEvent = false;
   if (!__classPrivateFieldGet(this, _KupPlanner_lastOnChangeReceived, "f")) {
@@ -12138,6 +12983,69 @@ _KupPlanner_kupManager = new WeakMap(), _KupPlanner_rootPlanner = new WeakMap(),
     emitEvent = true;
   }
   return emitEvent;
+}, _KupPlanner_onFilter = function _KupPlanner_onFilter(e, isDetail) {
+  const tempData = {
+    columns: this.data.columns,
+    rows: [],
+  };
+  const value = e.target.value;
+  const data = isDetail ? this.detailData : this.data;
+  const tempRows = [];
+  for (let index = 0; index < data.rows.length; index++) {
+    const row = data.rows[index];
+    const cells = row.cells;
+    for (let index = 0; index < data.columns.length; index++) {
+      const column = data.columns[index];
+      const cell = cells[column.name];
+      if (cell) {
+        const dValue = getCellValueForDisplay(data.columns[index], cell);
+        const found = !!(dValue.toLowerCase().indexOf(value.toLowerCase()) > -1);
+        if (found) {
+          tempRows.push({ row, weight: index });
+          break;
+        }
+      }
+    }
+  }
+  tempRows
+    .sort((a, b) => a.weight - b.weight)
+    .forEach((tempRow) => {
+    tempData.rows.push(tempRow.row);
+  });
+  const newGantt = isDetail
+    ? {
+      secondaryGantt: Object.assign(Object.assign({}, this.plannerProps.secondaryGantt), { items: __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_toDetails).call(this, tempData) }),
+    }
+    : {
+      mainGantt: Object.assign(Object.assign({}, this.plannerProps.mainGantt), { items: __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_toTasks).call(this, tempData) }),
+    };
+  this.plannerProps = Object.assign(Object.assign({}, this.plannerProps), newGantt);
+}, _KupPlanner_getIconUrl = function _KupPlanner_getIconUrl(row, columnName) {
+  var _a;
+  let iconUrl = undefined;
+  if (columnName) {
+    const iconCell = row.cells[columnName];
+    let icon = (_a = iconCell === null || iconCell === void 0 ? void 0 : iconCell.data) === null || _a === void 0 ? void 0 : _a.resource;
+    if (!icon) {
+      icon = iconCell.value;
+    }
+    if (icon) {
+      iconUrl = getAssetPath('./assets/svg/' + icon + '.svg');
+    }
+  }
+  return iconUrl;
+}, _KupPlanner_getIconColor = function _KupPlanner_getIconColor(row, columnName) {
+  var _a;
+  let iconColor = undefined;
+  if (columnName) {
+    const iconCell = row.cells[columnName];
+    iconColor = (_a = iconCell === null || iconCell === void 0 ? void 0 : iconCell.data) === null || _a === void 0 ? void 0 : _a.color;
+    if (iconColor) {
+      iconColor =
+        __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").theme.colorCheck(iconColor).hexColor;
+    }
+  }
+  return iconColor;
 };
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {