jc-timeline/lib/Timeline.js

"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __spreadArrays = (this && this.__spreadArrays) || function () {
    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
    for (var r = Array(s), k = 0, i = 0; i < il; i++)
        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
            r[k] = a[j];
    return r;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var dayjs_1 = __importDefault(require("dayjs"));
var Event_1 = require("./Event");
var Ressource_1 = require("./Ressource");
var lit_element_1 = require("lit-element");
var style_map_1 = require("lit-html/directives/style-map");
var syncroScroll_1 = __importDefault(require("./utils/syncroScroll"));
var Timeline = (function (_super) {
    __extends(Timeline, _super);
    function Timeline(options) {
        if (options === void 0) { options = {}; }
        var _this = _super.call(this) || this;
        _this._slotDuration = 30;
        _this._legendSpan = 2;
        _this.rowHeight = 32;
        _this.slotWidth = 20;
        _this.legendUnitFormat = { "y": "YYYY", "M": "MMMM", "d": 'D', "h": "H[h]", "m": "m'", 's': "s[s]" };
        _this._clearSelectionhandler = function () {
            _this._clearSelectedItems();
            window.removeEventListener("click", _this._clearSelectionhandler);
        };
        _this.rows = options.ressources ? options.ressources.map(Ressource_1.Ressource.toRessource) : [];
        _this.items = options.items ? options.items.map(Event_1.Event.toTimeSlot) : [];
        _this._start = dayjs_1.default().startOf("day");
        _this._end = _this._start.endOf("day");
        _this.rowsTitle = "Ressources";
        _this.ressourceWidth = 200;
        _this.selectedList = [];
        _this.legend = [];
        _this.defaultBackground = "";
        _this.updateLegend();
        _this.render();
        return _this;
    }
    Object.defineProperty(Timeline.prototype, "start", {
        get: function () {
            return this._start.toISOString();
        },
        set: function (value) {
            this._start = dayjs_1.default(value);
            this.updateLegend();
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(Timeline.prototype, "end", {
        get: function () {
            return this._end.toISOString();
        },
        set: function (value) {
            this._end = dayjs_1.default(value);
            this.updateLegend();
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(Timeline.prototype, "slotDuration", {
        get: function () {
            return this._slotDuration;
        },
        set: function (value) {
            this._slotDuration = value;
            this.updateLegend();
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(Timeline.prototype, "legendSpan", {
        get: function () {
            return this._legendSpan;
        },
        set: function (value) {
            this._legendSpan = value;
            this.updateLegend();
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(Timeline.prototype, "defaultBackground", {
        get: function () {
            return this.style.getPropertyValue("--default-background");
        },
        set: function (value) {
            this.style.setProperty("--default-background", value);
        },
        enumerable: false,
        configurable: true
    });
    Timeline.prototype.setLegendUnitFormatAll = function (legend) {
        this.legendUnitFormat = __assign(__assign({}, this.legendUnitFormat), legend);
        this.updateLegend();
    };
    Timeline.prototype.setLegendUnitFormat = function (unit, format) {
        this.legendUnitFormat[unit] = format;
        this.updateLegend();
    };
    Timeline.prototype.addRessources = function (list) {
        var _this = this;
        return list.map(function (r) { return _this.addRessource(r); });
    };
    Timeline.prototype.addRessource = function (ressource) {
        if (this.rows.filter(function (o) { return o.id == ressource.id; }).length > 0) {
            return;
        }
        var r = Ressource_1.Ressource.toRessource(ressource);
        if (r.parent !== undefined) {
            var idx = this.rows.indexOf(r.parent);
            if (idx > -1) {
                this.rows[idx].children.push(r);
                this.rows.splice(idx + 1, 0, r);
            }
            else {
                return;
            }
        }
        else {
            this.rows = __spreadArrays(this.rows, [r]);
        }
        this.updateTimeslotPosition(r);
        return r;
    };
    Timeline.prototype.removeRessourceById = function (id) {
        return this._removeRessourceById(id);
    };
    Timeline.prototype._removeRessourceById = function (id, depth) {
        var _a;
        if (depth === void 0) { depth = 0; }
        var output = { ressources: [], items: [] };
        var _loop_1 = function (i) {
            var _a, _b;
            var ressource = this_1.rows[i];
            if (ressource.id === id) {
                output.ressources.push(ressource);
                if (ressource.parent && depth === 0) {
                    ressource.parent.children = ressource.parent.children.filter(function (o) { return o.id !== ressource.id; });
                }
                this_1.rows.splice(i, 1);
            }
            else if (ressource.parentId === id) {
                var partialOutput = this_1._removeRessourceById(ressource.id, depth + 1);
                (_a = output.ressources).push.apply(_a, partialOutput.ressources);
                (_b = output.items).push.apply(_b, partialOutput.items);
            }
            else {
                i++;
            }
            out_i_1 = i;
        };
        var this_1 = this, out_i_1;
        for (var i = 0; i < this.rows.length; i) {
            _loop_1(i);
            i = out_i_1;
        }
        (_a = output.items).push.apply(_a, this.items.filter(function (i) { return i.ressourceId === id; }));
        this.items = this.items.filter(function (i) { return i.ressourceId !== id; });
        return output;
    };
    Timeline.prototype.getRessources = function () {
        return this.rows;
    };
    Timeline.prototype.getRessourceFromId = function (id) {
        var tmp = this.rows.filter(function (r) { return r.id === id; });
        return tmp.length > 0 ? tmp[0] : null;
    };
    Timeline.prototype.setRowsTitle = function (title) {
        this.rowsTitle = title;
    };
    Timeline.prototype.addTimeSlots = function (list) {
        var _this = this;
        return list.map(function (e) { return _this.addTimeSlot(e); });
    };
    Timeline.prototype.addTimeSlot = function (slot) {
        if (this.items.filter(function (o) { return o.id == slot.id; }).length > 0) {
            return null;
        }
        var ressource = this.rows.find(function (r) { return r.id === slot.ressourceId; });
        if (ressource === undefined) {
            return null;
        }
        var timeslot = Event_1.Event.toTimeSlot(slot);
        this.items = __spreadArrays(this.items, [timeslot]);
        timeslot.isDisplayed = timeslot.end > this._start.toDate() || timeslot.start < this._end.toDate();
        this.updateTimeslotPosition(ressource);
        return timeslot;
    };
    Timeline.prototype.removeTimeslotById = function (id) {
        var output = this.items.filter(function (o) { return o.id === id; });
        this.items = this.items.filter(function (o) { return o.id !== id; });
        return output;
    };
    Timeline.prototype.updateTimeslotById = function (id) {
        var output = this.removeTimeslotById(id);
        if (output.length > 0) {
            this.addTimeSlot(output[0]);
            return output[0];
        }
        else {
            return null;
        }
    };
    Timeline.prototype.updateTimeslotPosition = function (ressource) {
        var timeslots = this.items.filter(function (i) { return i.ressourceId === ressource.id; });
        if (timeslots.length === 0) {
            ressource.height = this.rowHeight + (ressource.collapseChildren ? 5 : 0);
            return;
        }
        var start = this._start.toDate().getTime();
        var end = this._end.toDate().getTime();
        var points = [start, end];
        var populateInterval = function (d) {
            var t = d.getTime();
            if (start < t && t < end && !points.includes(t)) {
                points.push(t);
            }
        };
        timeslots.forEach(function (element) {
            populateInterval(element.start);
            populateInterval(element.end);
        });
        points.sort();
        var intervals = [];
        var _loop_2 = function (i) {
            var startTime = points[i];
            var endTime = points[i + 1];
            intervals.push({
                start: points[i],
                end: points[i + 1],
                slots: timeslots.filter(function (slot) { return (slot.start.getTime() <= startTime && endTime <= slot.end.getTime()); })
            });
        };
        for (var i = 0; i < points.length - 1; i++) {
            _loop_2(i);
        }
        var lineCount = intervals.reduce(function (acc, interval) { return Math.max(acc, interval.slots.length); }, 0);
        ressource.height = this.rowHeight * Math.max(lineCount, 1) + (ressource.collapseChildren ? 5 : 0);
        var sortTimeslots = function (a, b) {
            var t = a.start.getTime() - b.start.getTime();
            if (t === 0) {
                var tend = b.end.getTime() - a.end.getTime();
                return tend === 0 ? ('' + a.id).localeCompare(b.id) : tend;
            }
            return t;
        };
        timeslots.forEach(function (slot) { return slot.offset = -1; });
        timeslots.sort(sortTimeslots);
        timeslots[0].offset = 0;
        var potentialOffset = [];
        for (var i = 0; i < lineCount; i++) {
            potentialOffset.push(i);
        }
        intervals.forEach(function (intervals) {
            intervals.slots.sort(sortTimeslots);
            var usedOffset = intervals.slots.map(function (o) { return o.offset; }).filter(function (i) { return i > -1; });
            var availableOffset = potentialOffset.filter(function (i) { return !usedOffset.includes(i); });
            intervals.slots.forEach(function (slot) {
                if (slot.offset === -1) {
                    slot.offset = availableOffset.shift() || 0;
                }
            });
        });
    };
    Timeline.prototype.getTimeSlots = function () {
        return this.items;
    };
    Timeline.prototype.updateLegend = function () {
        var legend = [];
        var legendUnitList = ["y", "M", "d", "h", "m", 's'];
        var legendMinUnitSpan = this.slotDuration * this.legendSpan;
        for (var _i = 0, legendUnitList_1 = legendUnitList; _i < legendUnitList_1.length; _i++) {
            var legendUnit = legendUnitList_1[_i];
            var currentDate = dayjs_1.default(this._start);
            var nextColumn = currentDate.add(legendMinUnitSpan, "m");
            var isLegendPossible = this._end.diff(this._start, legendUnit) > 0 &&
                (nextColumn.format(this.legendUnitFormat[legendUnit]) !== currentDate.format(this.legendUnitFormat[legendUnit])
                    || currentDate.add(1, legendUnit).diff(currentDate, "m") >= legendMinUnitSpan);
            if (isLegendPossible) {
                var row = [];
                var i = 0;
                while (currentDate.isBefore(this._end)) {
                    i += this.legendSpan;
                    if (nextColumn.diff(currentDate, legendUnit) > 0) {
                        row.push({ colspan: i, title: '' + currentDate.format(this.legendUnitFormat[legendUnit]) });
                        i = 0;
                        currentDate = nextColumn;
                    }
                    nextColumn = nextColumn.add(legendMinUnitSpan, "m");
                }
                legend.push(row);
            }
        }
        this.legend = legend;
    };
    Timeline.prototype._handleResizeX = function (e) {
        e.stopPropagation();
        this.ressourceWidth += e.detail;
        if (this.ressourceWidth < 0) {
            this.ressourceWidth = 0;
        }
    };
    Timeline.prototype._grabHeader = function (e) {
        var root = this.shadowRoot;
        if (root !== null) {
            var gridContainer_1 = root.querySelector(".jc-timeline-grid-container");
            var headerContainer_1 = root.querySelector(".jc-timeline-grid-title-container");
            var lastPosX_1 = e.clientX;
            var scroll_1 = function (e) {
                var scrollLeft = (lastPosX_1 - e.clientX);
                headerContainer_1.scrollLeft += scrollLeft;
                gridContainer_1.scrollLeft += scrollLeft;
                lastPosX_1 = e.clientX;
            };
            var mouseUpListener_1 = function (e) {
                window.removeEventListener("mousemove", scroll_1);
                window.removeEventListener("mouseup", mouseUpListener_1);
            };
            window.addEventListener("mousemove", scroll_1);
            window.addEventListener("mouseup", mouseUpListener_1);
        }
    };
    Timeline.prototype._getEventResizerHandler = function (slot, direction) {
        var _this = this;
        return function (evt) {
            evt.stopPropagation();
            evt.preventDefault();
            var startPos = evt.clientX;
            var localSlot = slot;
            var localDir = direction;
            var startDate = slot[direction];
            var resizeListener = function (e) {
                var newDate = dayjs_1.default(startDate).add(Math.round((e.clientX - startPos) / _this.slotWidth) * _this.slotDuration, "m").toDate();
                if (direction === "start" ? (newDate < localSlot.end) : (localSlot.start < newDate)) {
                    localSlot[localDir] = newDate;
                    _this.updateTimeslotById(slot.id);
                }
            };
            var mouseUpListener = function (e) {
                window.removeEventListener("mousemove", resizeListener);
                window.removeEventListener("mouseup", mouseUpListener);
                localSlot.moving = false;
                _this.updateTimeslotById(slot.id);
            };
            localSlot.moving = true;
            window.addEventListener("mousemove", resizeListener);
            window.addEventListener("mouseup", mouseUpListener);
        };
    };
    Timeline.prototype._getEventGrabHandler = function (slot, editable, ressourceEditable, callback) {
        var _this = this;
        return function (evt) {
            evt.stopPropagation();
            evt.preventDefault();
            var startPos = evt.clientX;
            var hasChanged = false;
            var localSlot = slot;
            var localSlots = _this.selectedList.filter(function (s) { return s instanceof Event_1.Event; }).map(function (s) { return s; });
            if (!localSlots.includes(localSlot)) {
                localSlots = [localSlot];
            }
            var startDates = localSlots.map(function (slot) { return slot.start; });
            var endDates = localSlots.map(function (slot) { return slot.end; });
            var updatePosition = editable ? function (e) {
                var changeTime = Math.round((e.clientX - startPos) / _this.slotWidth) * _this.slotDuration;
                return localSlots.map(function (slot, index) {
                    var prevStart = slot.start;
                    slot.start = dayjs_1.default(startDates[index]).add(changeTime, "m").toDate();
                    slot.end = dayjs_1.default(endDates[index]).add(changeTime, "m").toDate();
                    return prevStart.getTime() !== slot.start.getTime();
                }).reduce(function (prev, curr) { return prev || curr; });
            } : function (e) { return false; };
            var updateRessource = ressourceEditable ? function (e) {
                var _a, _b, _c;
                var rowId = (_c = (_b = (_a = _this.shadowRoot) === null || _a === void 0 ? void 0 : _a.elementsFromPoint(e.clientX, e.clientY).find(function (e) { return e.tagName == "TD"; })) === null || _b === void 0 ? void 0 : _b.parentElement) === null || _c === void 0 ? void 0 : _c.getAttribute('row-id');
                if (rowId) {
                    var ressourceId = _this.rows[Number(rowId)].id;
                    if (ressourceId !== localSlot.ressourceId) {
                        var oldRessource = _this.getRessourceFromId(localSlot.ressourceId);
                        localSlot.ressourceId = ressourceId;
                        _this.updateTimeslotPosition(oldRessource);
                        return true;
                    }
                }
                return false;
            } : function (e) { return false; };
            var moveListener = function (e) {
                var a = updatePosition(e);
                if (updateRessource(e) || a) {
                    hasChanged = true;
                    _this.updateTimeslotById(localSlot.id);
                }
            };
            var mouseUpListener = function (e) {
                window.removeEventListener("mousemove", moveListener);
                window.removeEventListener("mouseup", mouseUpListener);
                localSlot.moving = false;
                _this.updateTimeslotById(slot.id);
                callback(e, hasChanged);
            };
            localSlot.moving = true;
            window.addEventListener("mousemove", moveListener);
            window.addEventListener("mouseup", mouseUpListener);
        };
    };
    Timeline.prototype._clearSelectedItems = function () {
        var _this = this;
        this.selectedList.map(function (e) {
            e.selected = false;
            _this.updateTimeslotById(e.id);
        });
        this.selectedList = [];
    };
    Timeline.prototype._getEventClickHandler = function (clickedItem) {
        var _this = this;
        var item = clickedItem;
        return function (e, wasModified) {
            if (wasModified === void 0) { wasModified = false; }
            e.stopPropagation();
            var idx = _this.selectedList.indexOf(item);
            if (idx > -1) {
                if (wasModified) {
                }
                else if (e.ctrlKey) {
                    _this.selectedList.splice(idx, 1);
                    item.selected = false;
                    _this.updateTimeslotById(item.id);
                }
                else {
                    _this._clearSelectedItems();
                }
            }
            else {
                if (_this.selectedList.length > 0 && !e.ctrlKey) {
                    _this._clearSelectedItems();
                }
                item.selected = true;
                _this.selectedList.push(item);
                _this.updateTimeslotById(item.id);
            }
            var myEvent = new CustomEvent('item-selected', {
                detail: { items: _this.selectedList },
                bubbles: true,
                composed: true
            });
            _this.dispatchEvent(myEvent);
        };
    };
    Timeline.prototype.firstUpdated = function () {
        var root = this.shadowRoot;
        if (root !== null) {
            var gridContainer = root.querySelector(".jc-timeline-grid-container");
            syncroScroll_1.default([gridContainer, root.querySelector(".jc-timeline-grid-title-container")], "h");
            syncroScroll_1.default([gridContainer, root.querySelector(".jc-timeline-rows")], "v");
        }
        if (this.defaultBackground === "") {
            this.style.setProperty("--default-background", "SteelBlue");
        }
    };
    Timeline.prototype.renderTimeslot = function (slot) {
        if (!slot.isDisplayed) {
            return lit_element_1.html(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
        }
        var rowTop = 0;
        var ressource;
        var i;
        for (i = 0; i < this.rows.length && this.rows[i].id !== slot.ressourceId; i++) {
            ressource = this.rows[i];
            if (ressource.show) {
                rowTop += ressource.height ? ressource.height : this.rowHeight;
            }
        }
        ressource = this.rows[i];
        var minute2pixel = this.slotWidth / this.slotDuration;
        var left = dayjs_1.default(slot.start).diff(this._start, "m") * minute2pixel;
        var right = -dayjs_1.default(slot.end).diff(this._end, "m") * minute2pixel;
        var style = {
            height: this.rowHeight - 4 + "px",
            top: rowTop + slot.offset * this.rowHeight + "px",
            left: left + "px",
            right: right + "px",
            backgroundColor: ""
        };
        var bgColor = slot.bgColor ? slot.bgColor : ressource.eventBgColor;
        if (bgColor) {
            style.backgroundColor = bgColor;
        }
        if (!ressource.show) {
            style.height = "";
            style.top = rowTop - 6 + "px";
            return lit_element_1.html(templateObject_2 || (templateObject_2 = __makeTemplateObject(["<div class=\"jc-timeslot empty\" style=\"", "\"></div>"], ["<div class=\"jc-timeslot empty\" style=\"", "\"></div>"])), style_map_1.styleMap(style));
        }
        var content = lit_element_1.html(templateObject_3 || (templateObject_3 = __makeTemplateObject(["", ""], ["", ""])), slot.title);
        var resizer = slot.editable === null ? ressource.eventEditable : slot.editable;
        var editableRessource = slot.ressourceEditable === null ? ressource.eventRessourceEditable : slot.ressourceEditable;
        if (resizer) {
            content = lit_element_1.html(templateObject_4 || (templateObject_4 = __makeTemplateObject(["<div class=\"jc-timeslot-resizer-start\" @mousedown=\"", "\"></div>", "\n                            <div class=\"jc-timeslot-resizer-end\" @mousedown=\"", "\"></div>"], ["<div class=\"jc-timeslot-resizer-start\" @mousedown=\"", "\"></div>", "\n                            <div class=\"jc-timeslot-resizer-end\" @mousedown=\"", "\"></div>"])), this._getEventResizerHandler(slot, "start"), content, this._getEventResizerHandler(slot, "end"));
        }
        return lit_element_1.html(templateObject_5 || (templateObject_5 = __makeTemplateObject(["<div class=\"jc-timeslot ", " ", "\" \n            start=\"", "\" \n            end=\"", "\" \n            style=\"", "\"\n            @mousedown=\"", "\"\n            >", "</div>"], ["<div class=\"jc-timeslot ", " ", "\" \n            start=\"", "\" \n            end=\"", "\" \n            style=\"", "\"\n            @mousedown=\"", "\"\n            >", "</div>"])), slot.moving ? "moving" : "", slot.selected ? "selected" : "", slot.start.getHours(), slot.end.getHours(), style_map_1.styleMap(style), this._getEventGrabHandler(slot, resizer, editableRessource, this._getEventClickHandler(slot)), content);
    };
    Timeline.prototype._getCollapseRessourceHandler = function (item) {
        var _this = this;
        return function (e) {
            item.collapseChildren = !item.collapseChildren;
            _this.updateTimeslotPosition(item);
            _this.rows = __spreadArrays(_this.rows);
        };
    };
    Timeline.prototype._onRessourceDragStart = function (item) {
        return function (event) {
            var _a;
            (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.setData("text", item.id);
        };
    };
    Timeline.prototype._onRessourceDragEnter = function (event) {
        if (event.target instanceof HTMLElement) {
            var tgt = event.target;
            tgt.classList.add("target");
        }
        else if (event.target instanceof Node) {
        }
    };
    Timeline.prototype._onRessourceDragLeave = function (event) {
        if (event.target instanceof HTMLElement) {
            event.target.classList.remove("target");
        }
    };
    Timeline.prototype._onRessourceDrop = function (event) {
        var _a, _b;
        event.preventDefault();
        if (event.target instanceof HTMLElement) {
            event.target.classList.remove("target");
            var srcId = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData("text");
            var destinationId_1 = (_b = event.target.parentElement) === null || _b === void 0 ? void 0 : _b.getAttribute("ressourceId");
            if (srcId && destinationId_1 && (destinationId_1 !== srcId)) {
                var src = this.getRessourceFromId(srcId);
                var destination = this.getRessourceFromId(destinationId_1);
                if (destination.childOf(src)) {
                    return;
                }
                var movedContent = this.removeRessourceById(src.id);
                if (event.target.classList.contains("jc-ressource")) {
                    movedContent.ressources[0].parent = destination;
                }
                else {
                    movedContent.ressources[0].parent = destination.parent;
                    var idx = this.rows.findIndex(function (v) { return v.id === destinationId_1; });
                    if (event.target.classList.contains("jc-ressource-below")) {
                        idx += 1;
                        while ((idx < this.rows.length)
                            && this.rows[idx].childOf(destination)) {
                            idx += 1;
                        }
                    }
                    var arr = this.rows;
                    this.rows = __spreadArrays(arr.splice(0, idx), [src], arr);
                }
                this.addRessources(movedContent.ressources);
                this.addTimeSlots(movedContent.items);
            }
        }
    };
    Timeline.prototype.renderRessource = function (item) {
        var depth = item.depth;
        var style = "--depth:" + depth + ";" + (item.height ? "height:" + item.height + "px;" : "");
        var hasChild = item.children.length > 0;
        var collapseHandler = this._getCollapseRessourceHandler(item);
        return lit_element_1.html(templateObject_9 || (templateObject_9 = __makeTemplateObject(["<tr>\n                        <td class=\"", "\" style=\"", "\" ressourceId=\"", "\" @click=\"", "\">\n                            <div class=\"jc-ressource-above\"></div>    \n                            <div class=\"jc-ressource\" draggable=\"true\" @dragstart=\"", "\">\n                            ", "", "\n                            <span>", "</span>\n                            </div>\n                            <div class=\"jc-ressource-below\"></div>\n                        </td>\n                    </tr>"], ["<tr>\n                        <td class=\"", "\" style=\"", "\" ressourceId=\"", "\" @click=\"", "\">\n                            <div class=\"jc-ressource-above\"></div>    \n                            <div class=\"jc-ressource\" draggable=\"true\" @dragstart=\"", "\">\n                            ", "", "\n                            <span>", "</span>\n                            </div>\n                            <div class=\"jc-ressource-below\"></div>\n                        </td>\n                    </tr>"])), item.selected ? "jc-ressource-selected" : "", style, item.id, this._getEventClickHandler(item), this._onRessourceDragStart(item), Array(depth).fill(0).map(function (i) { return lit_element_1.html(templateObject_6 || (templateObject_6 = __makeTemplateObject(["<i class=\"jc-spacer\"></i>"], ["<i class=\"jc-spacer\"></i>"]))); }), hasChild ? lit_element_1.html(templateObject_7 || (templateObject_7 = __makeTemplateObject(["<i class=\"jc-spacer ", "\" @click=\"", "\"></i>"], ["<i class=\"jc-spacer ", "\" @click=\"", "\"></i>"])), item.collapseChildren ? "extend" : "collapse", collapseHandler) : lit_element_1.html(templateObject_8 || (templateObject_8 = __makeTemplateObject(["<i class=\"jc-spacer\"></i>"], ["<i class=\"jc-spacer\"></i>"]))), item.title);
    };
    Timeline.prototype.renderGridRow = function (columns, rowId, height) {
        var _this = this;
        if (rowId === void 0) { rowId = -1; }
        if (height === void 0) { height = 30; }
        return lit_element_1.html(templateObject_11 || (templateObject_11 = __makeTemplateObject(["<tr row-id=\"", "\">", "</tr>"], ["<tr row-id=\"", "\">", "</tr>"])), rowId, columns.map(function (d, i) { return lit_element_1.html(templateObject_10 || (templateObject_10 = __makeTemplateObject(["<td style=\"height:", "px;\" class=\"jc-slot ", "\" start=\"", "\">&nbsp;</td>"], ["<td style=\"height:", "px;\" class=\"jc-slot ", "\" start=\"", "\">&nbsp;</td>"])), height, (i % _this.legendSpan) === 0 ? "jc-major-slot" : "", d.toISOString()); }));
    };
    Timeline.prototype.render = function () {
        var _this = this;
        var nCol = Math.floor(this._end.diff(this._start, 'm') / this.slotDuration) + 1;
        var columns = [];
        for (var i = 0; i < nCol; i++) {
            columns.push(this._start.add(this.slotDuration * i, 'm'));
        }
        var displayedRows = this.rows.map(function (r, i) { return { i: i, r: r }; }).filter(function (o) { return o.r.show; });
        return lit_element_1.html(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n      <div class=\"jc-timeline-header\">\n        <div class=\"jc-timeline-rows-title\" style=", ">", "</div>\n        <horizontal-resizer @resize-x=\"", "\"></horizontal-resizer>\n        <div class=\"jc-timeline-grid-title-container\">\n          <table @mousedown=\"", "\"  style=\"width:", "px;\">\n              <colgroup>\n                  ", "\n              </colgroup>\n              <tbody>\n                  ", "\n              </tbody>\n          </table>\n        </div>\n      </div>\n      <div class=\"jc-timeline-content\">\n        <table class=\"jc-timeline-rows\"\n          style=\"", "\"\n          @dragover=\"", "\"\n          @dragenter=\"", "\"\n          @dragleave=\"", "\"\n          @drop=\"", "\">\n          ", "\n        </table>\n        <horizontal-resizer @resize-x=\"", "\"></horizontal-resizer>\n        <div class=\"jc-timeline-grid-container\">\n          <table  style=\"width:", "px;\">\n              <colgroup>\n              ", "\n              </colgroup>\n              <tbody>\n                  ", "\n              </tbody>\n          </table>\n          <div class=\"jc-timeslots\" style=\"width:", "px;\">\n            ", "\n          </div>\n        </div>\n      </div>\n    "], ["\n      <div class=\"jc-timeline-header\">\n        <div class=\"jc-timeline-rows-title\" style=", ">", "</div>\n        <horizontal-resizer @resize-x=\"", "\"></horizontal-resizer>\n        <div class=\"jc-timeline-grid-title-container\">\n          <table @mousedown=\"", "\"  style=\"width:", "px;\">\n              <colgroup>\n                  ", "\n              </colgroup>\n              <tbody>\n                  ", "\n              </tbody>\n          </table>\n        </div>\n      </div>\n      <div class=\"jc-timeline-content\">\n        <table class=\"jc-timeline-rows\"\n          style=\"", "\"\n          @dragover=\"", "\"\n          @dragenter=\"", "\"\n          @dragleave=\"", "\"\n          @drop=\"", "\">\n          ", "\n        </table>\n        <horizontal-resizer @resize-x=\"", "\"></horizontal-resizer>\n        <div class=\"jc-timeline-grid-container\">\n          <table  style=\"width:", "px;\">\n              <colgroup>\n              ", "\n              </colgroup>\n              <tbody>\n                  ", "\n              </tbody>\n          </table>\n          <div class=\"jc-timeslots\" style=\"width:", "px;\">\n            ", "\n          </div>\n        </div>\n      </div>\n    "])), style_map_1.styleMap({ minWidth: this.ressourceWidth + "px", width: this.ressourceWidth + "px" }), this.rowsTitle, this._handleResizeX, this._grabHeader, nCol * this.slotWidth, columns.map(function (o) { return lit_element_1.html(templateObject_12 || (templateObject_12 = __makeTemplateObject(["<col style=\"min-width:", "px\">"], ["<col style=\"min-width:", "px\">"])), _this.slotWidth); }), this.legend.map(function (arr) { return lit_element_1.html(templateObject_14 || (templateObject_14 = __makeTemplateObject(["<tr class=\"jc-timeline-grid-title\">", "</tr>"], ["<tr class=\"jc-timeline-grid-title\">", "</tr>"])), arr.map(function (o) { return lit_element_1.html(templateObject_13 || (templateObject_13 = __makeTemplateObject(["<th colspan=\"", "\">", "</th>"], ["<th colspan=\"", "\">", "</th>"])), o.colspan, o.title); })); }), style_map_1.styleMap({ "--width": this.ressourceWidth + "px" }), function (e) { return e.preventDefault(); }, this._onRessourceDragEnter, this._onRessourceDragLeave, this._onRessourceDrop, this.rows.length > 0 ? displayedRows.map(function (o) { return _this.renderRessource(o.r); }) : lit_element_1.html(templateObject_15 || (templateObject_15 = __makeTemplateObject(["<tr class=\"empty\"><td>No ressource</td></tr>"], ["<tr class=\"empty\"><td>No ressource</td></tr>"]))), this._handleResizeX, nCol * this.slotWidth, columns.map(function (o) { return lit_element_1.html(templateObject_16 || (templateObject_16 = __makeTemplateObject(["<col style=\"min-width:", "px\">"], ["<col style=\"min-width:", "px\">"])), _this.slotWidth); }), this.rows.length > 0 ? displayedRows.map(function (o) { return _this.renderGridRow(columns, o.i, o.r.height); }) : this.renderGridRow(columns), nCol * this.slotWidth, this.items.map(function (slot) { return _this.renderTimeslot(slot); }));
    };
    Timeline.styles = lit_element_1.css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n    body{\n        font-family:Roboto;\n    }\n    div {\n        box-sizing: border-box;\n    }\n    .jc-timeline-content,\n    .jc-timeline-header{\n        width:100%;\n        position:relative;\n        display: flex;\n        flex-direction:row;\n        height:max-content;\n        align-items: stretch;\n    }\n    \n    .jc-timeline-rows-title,\n    .jc-timeline-rows > tr > td{        \n        padding: 8px;\n        min-width:40px;\n    }\n    .jc-timeline-rows > tr > td {\n        max-width:calc( var(--width) - 8px );\n        padding: 0px; \n        vertical-align:top;\n    }\n    .jc-timeline-rows > tr.empty > td{\n        padding: 6px 0px 4px 8px;\n    }\n    i.jc-spacer {\n        display:inline-block;\n        width : 1rem;\n        height: 1rem;\n        position:relative;\n        box-sizing: border-box;\n    }\n    i.jc-spacer:after{\n        content: \" \";\n        position:absolute;\n        background-repeat: no-repeat;\n        background-size: 1.05rem;\n        width:  1.05rem;\n        height: 1.05rem;\n    }\n    .jc-spacer.extend,\n    .jc-spacer.collapse    {\n        cursor:pointer;\n    }\n    i.jc-spacer.extend:after{\n        background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iYmxhY2siIHdpZHRoPSIxOHB4IiBoZWlnaHQ9IjE4cHgiPjxwYXRoIGQ9Ik0wIDBoMjR2MjRIMFYweiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik0xOSAzSDVjLTEuMTEgMC0yIC45LTIgMnYxNGMwIDEuMS44OSAyIDIgMmgxNGMxLjEgMCAyLS45IDItMlY1YzAtMS4xLS45LTItMi0yem0wIDE2SDVWNWgxNHYxNHptLTgtMmgydi00aDR2LTJoLTRWN2gtMnY0SDd2Mmg0eiIvPjwvc3ZnPg==\")\n    }\n    i.jc-spacer.collapse:after{\n        background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0Ij48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTE5IDNINWMtMS4xIDAtMiAuOS0yIDJ2MTRjMCAxLjEuOSAyIDIgMmgxNGMxLjEgMCAyLS45IDItMlY1YzAtMS4xLS45LTItMi0yem0wIDE2SDVWNWgxNHYxNHpNNyAxMWgxMHYySDd6Ii8+PC9zdmc+\")\n    }\n    \n    .jc-timeline-rows > tr{\n        box-sizing: border-box;\n        white-space: nowrap;\n        border: 1px solid grey;\n        border-style: solid none;\n    }\n    .jc-timeline-rows,\n    .jc-timeline-rows-title{\n        width:var(--width, 200px);\n        overflow: hidden;\n        border-collapse:collapse;\n    }\n    .jc-timeline-grid-title-container,\n    .jc-timeline-grid-container{\n        position:relative;\n        width: 600px;\n        display: block;\n        overflow: hidden;\n    }\n    .jc-timeline-grid-container{\n        overflow-x: auto;\n    }\n    .jc-timeline-grid-title-container > table,\n    .jc-timeline-grid-container > table {\n        width:100%;\n        table-layout: fixed;\n        border-collapse: collapse;\n        box-sizing: border-box;\n    }\n\n    .jc-timeline-grid-title-container {\n        white-space: nowrap;\n        cursor: grab;\n        user-select: none; /* supported by Chrome and Opera */\n        -webkit-user-select: none; /* Safari */\n        -khtml-user-select: none; /* Konqueror HTML */\n        -moz-user-select: none; /* Firefox */\n        -ms-user-select: none; /* Internet Explorer/Edge */\n    }\n    .jc-timeline-grid-title:first-child > th{\n        border-top:0;\n    }    \n    .jc-timeline-grid-title:first-child > th:before,\n    .jc-timeline-grid-title:first-child > th:last-child:after {\n        content:\" \";\n        display: block;\n        position:absolute;\n        left:-1px;\n        top:0px;\n        height:calc( 100% - 8px);\n        border-left: 2px solid white;\n        z-index:2;\n    }\n    .jc-timeline-grid-title:first-child > th:last-child:after\n    {\n        left:auto;\n        right:-1px;\n    }\n    .jc-timeline-grid-title:first-child:last-child >th{\n        padding:8px 0;\n    }\n    .jc-timeline-grid-title:last-child > th{\n        border-bottom:none;\n    }\n    .jc-timeline-grid-title > th,\n    .jc-slot {      \n        height:100%;\n        border: solid 1px lightgray;\n        border-left-style: dotted;\n        border-right:0;\n        text-align: center;\n        position:relative;\n        box-sizing: border-box;\n    }\n    .jc-timeline-grid-title > th:last-child,\n    .jc-slot:last-child{\n        border-right:solid 1px lightgray;\n    }\n    .jc-timeline-grid-title > th,\n    .jc-major-slot{\n        border-left-style: solid;\n    }\n\n\n\n    .jc-timeslots{\n        position:absolute;\n        top:0px;\n        left:0px;\n        bottom:0px;\n        overflow: hidden;\n    }\n    .jc-timeslot{\n        position:absolute;\n        white-space: nowrap;\n        overflow-x:hidden;\n        background-color:var(--default-background);\n        color:#fff;\n        border-radius:3px;\n        padding:4px;\n        margin:2px 0px;\n        z-index:1;\n        cursor:auto;\n    }\n    .jc-timeslot.empty{\n        height:5px;\n        padding:2px 2px;\n        margin:0px;\n        cursor:pointer;\n    }\n    .jc-timeslot.moving{\n        opacity:0.7;\n        cursor:grabbing;\n    }\n    .jc-timeslot.selected:before{\n        border:solid 2px black;\n        position:absolute;\n        top:0;\n        bottom:0;\n        left:0;\n        right:0;\n        content:\" \";\n    }\n    .jc-timeslot-resizer-start,\n    .jc-timeslot-resizer-end{\n        position:absolute;\n        top:0;\n        bottom:0;\n        width:4px;\n        min-width:4px;\n        display:block;\n        cursor: ew-resize;\n    }\n    .jc-timeslot-resizer-start,\n    .jc-timeslot-resizer-end{\n        display:block;\n    }\n    .jc-timeslot-resizer-start{\n        left:0px;\n    }\n    .jc-timeslot-resizer-end{\n        right:0px;\n    }\n    .jc-timeline-rows > tr >td{\n        height:100%;\n    }\n    .jc-ressource{\n        padding-top: 2px;\n        height: calc( 100% - 8px);\n    }\n    .jc-ressource > span {\n        pointer-events: none;\n    }\n    .jc-ressource.target{\n        background-color: lightgrey;\n    }\n    .jc-ressource-selected{\n        border:1px solid var(--default-background, SteelBlue);\n        border-right:0;\n        border-left:0;\n        background-color:#4682b46b;\n    }\n    .jc-ressource-above{\n        height:4px;\n    }\n    .jc-ressource-above.target{\n        margin-left: calc( var(--depth) * 16px );\n        background-color: var(--default-background, SteelBlue);\n        border-radius: 0 0 0 4px;\n    }\n    .jc-ressource-below{\n        height:4px;\n    }\n    .jc-ressource-below.target{\n        margin-left: calc( var(--depth) * 16px);\n        background-color: var(--default-background, SteelBlue);\n        border-radius: 4px 0 0 0;\n    }\n  "], ["\n    body{\n        font-family:Roboto;\n    }\n    div {\n        box-sizing: border-box;\n    }\n    .jc-timeline-content,\n    .jc-timeline-header{\n        width:100%;\n        position:relative;\n        display: flex;\n        flex-direction:row;\n        height:max-content;\n        align-items: stretch;\n    }\n    \n    .jc-timeline-rows-title,\n    .jc-timeline-rows > tr > td{        \n        padding: 8px;\n        min-width:40px;\n    }\n    .jc-timeline-rows > tr > td {\n        max-width:calc( var(--width) - 8px );\n        padding: 0px; \n        vertical-align:top;\n    }\n    .jc-timeline-rows > tr.empty > td{\n        padding: 6px 0px 4px 8px;\n    }\n    i.jc-spacer {\n        display:inline-block;\n        width : 1rem;\n        height: 1rem;\n        position:relative;\n        box-sizing: border-box;\n    }\n    i.jc-spacer:after{\n        content: \" \";\n        position:absolute;\n        background-repeat: no-repeat;\n        background-size: 1.05rem;\n        width:  1.05rem;\n        height: 1.05rem;\n    }\n    .jc-spacer.extend,\n    .jc-spacer.collapse    {\n        cursor:pointer;\n    }\n    i.jc-spacer.extend:after{\n        background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iYmxhY2siIHdpZHRoPSIxOHB4IiBoZWlnaHQ9IjE4cHgiPjxwYXRoIGQ9Ik0wIDBoMjR2MjRIMFYweiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik0xOSAzSDVjLTEuMTEgMC0yIC45LTIgMnYxNGMwIDEuMS44OSAyIDIgMmgxNGMxLjEgMCAyLS45IDItMlY1YzAtMS4xLS45LTItMi0yem0wIDE2SDVWNWgxNHYxNHptLTgtMmgydi00aDR2LTJoLTRWN2gtMnY0SDd2Mmg0eiIvPjwvc3ZnPg==\")\n    }\n    i.jc-spacer.collapse:after{\n        background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0Ij48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTE5IDNINWMtMS4xIDAtMiAuOS0yIDJ2MTRjMCAxLjEuOSAyIDIgMmgxNGMxLjEgMCAyLS45IDItMlY1YzAtMS4xLS45LTItMi0yem0wIDE2SDVWNWgxNHYxNHpNNyAxMWgxMHYySDd6Ii8+PC9zdmc+\")\n    }\n    \n    .jc-timeline-rows > tr{\n        box-sizing: border-box;\n        white-space: nowrap;\n        border: 1px solid grey;\n        border-style: solid none;\n    }\n    .jc-timeline-rows,\n    .jc-timeline-rows-title{\n        width:var(--width, 200px);\n        overflow: hidden;\n        border-collapse:collapse;\n    }\n    .jc-timeline-grid-title-container,\n    .jc-timeline-grid-container{\n        position:relative;\n        width: 600px;\n        display: block;\n        overflow: hidden;\n    }\n    .jc-timeline-grid-container{\n        overflow-x: auto;\n    }\n    .jc-timeline-grid-title-container > table,\n    .jc-timeline-grid-container > table {\n        width:100%;\n        table-layout: fixed;\n        border-collapse: collapse;\n        box-sizing: border-box;\n    }\n\n    .jc-timeline-grid-title-container {\n        white-space: nowrap;\n        cursor: grab;\n        user-select: none; /* supported by Chrome and Opera */\n        -webkit-user-select: none; /* Safari */\n        -khtml-user-select: none; /* Konqueror HTML */\n        -moz-user-select: none; /* Firefox */\n        -ms-user-select: none; /* Internet Explorer/Edge */\n    }\n    .jc-timeline-grid-title:first-child > th{\n        border-top:0;\n    }    \n    .jc-timeline-grid-title:first-child > th:before,\n    .jc-timeline-grid-title:first-child > th:last-child:after {\n        content:\" \";\n        display: block;\n        position:absolute;\n        left:-1px;\n        top:0px;\n        height:calc( 100% - 8px);\n        border-left: 2px solid white;\n        z-index:2;\n    }\n    .jc-timeline-grid-title:first-child > th:last-child:after\n    {\n        left:auto;\n        right:-1px;\n    }\n    .jc-timeline-grid-title:first-child:last-child >th{\n        padding:8px 0;\n    }\n    .jc-timeline-grid-title:last-child > th{\n        border-bottom:none;\n    }\n    .jc-timeline-grid-title > th,\n    .jc-slot {      \n        height:100%;\n        border: solid 1px lightgray;\n        border-left-style: dotted;\n        border-right:0;\n        text-align: center;\n        position:relative;\n        box-sizing: border-box;\n    }\n    .jc-timeline-grid-title > th:last-child,\n    .jc-slot:last-child{\n        border-right:solid 1px lightgray;\n    }\n    .jc-timeline-grid-title > th,\n    .jc-major-slot{\n        border-left-style: solid;\n    }\n\n\n\n    .jc-timeslots{\n        position:absolute;\n        top:0px;\n        left:0px;\n        bottom:0px;\n        overflow: hidden;\n    }\n    .jc-timeslot{\n        position:absolute;\n        white-space: nowrap;\n        overflow-x:hidden;\n        background-color:var(--default-background);\n        color:#fff;\n        border-radius:3px;\n        padding:4px;\n        margin:2px 0px;\n        z-index:1;\n        cursor:auto;\n    }\n    .jc-timeslot.empty{\n        height:5px;\n        padding:2px 2px;\n        margin:0px;\n        cursor:pointer;\n    }\n    .jc-timeslot.moving{\n        opacity:0.7;\n        cursor:grabbing;\n    }\n    .jc-timeslot.selected:before{\n        border:solid 2px black;\n        position:absolute;\n        top:0;\n        bottom:0;\n        left:0;\n        right:0;\n        content:\" \";\n    }\n    .jc-timeslot-resizer-start,\n    .jc-timeslot-resizer-end{\n        position:absolute;\n        top:0;\n        bottom:0;\n        width:4px;\n        min-width:4px;\n        display:block;\n        cursor: ew-resize;\n    }\n    .jc-timeslot-resizer-start,\n    .jc-timeslot-resizer-end{\n        display:block;\n    }\n    .jc-timeslot-resizer-start{\n        left:0px;\n    }\n    .jc-timeslot-resizer-end{\n        right:0px;\n    }\n    .jc-timeline-rows > tr >td{\n        height:100%;\n    }\n    .jc-ressource{\n        padding-top: 2px;\n        height: calc( 100% - 8px);\n    }\n    .jc-ressource > span {\n        pointer-events: none;\n    }\n    .jc-ressource.target{\n        background-color: lightgrey;\n    }\n    .jc-ressource-selected{\n        border:1px solid var(--default-background, SteelBlue);\n        border-right:0;\n        border-left:0;\n        background-color:#4682b46b;\n    }\n    .jc-ressource-above{\n        height:4px;\n    }\n    .jc-ressource-above.target{\n        margin-left: calc( var(--depth) * 16px );\n        background-color: var(--default-background, SteelBlue);\n        border-radius: 0 0 0 4px;\n    }\n    .jc-ressource-below{\n        height:4px;\n    }\n    .jc-ressource-below.target{\n        margin-left: calc( var(--depth) * 16px);\n        background-color: var(--default-background, SteelBlue);\n        border-radius: 4px 0 0 0;\n    }\n  "])));
    __decorate([
        lit_element_1.property({ type: Array })
    ], Timeline.prototype, "rows", void 0);
    __decorate([
        lit_element_1.property({ type: Array })
    ], Timeline.prototype, "items", void 0);
    __decorate([
        lit_element_1.property({ type: Number })
    ], Timeline.prototype, "ressourceWidth", void 0);
    __decorate([
        lit_element_1.property({ type: Object })
    ], Timeline.prototype, "_start", void 0);
    __decorate([
        lit_element_1.property({ type: String })
    ], Timeline.prototype, "start", null);
    __decorate([
        lit_element_1.property({ type: String })
    ], Timeline.prototype, "end", null);
    __decorate([
        lit_element_1.property({ type: Number })
    ], Timeline.prototype, "slotDuration", null);
    __decorate([
        lit_element_1.property({ type: Number })
    ], Timeline.prototype, "legendSpan", null);
    __decorate([
        lit_element_1.property({ type: Number })
    ], Timeline.prototype, "rowHeight", void 0);
    __decorate([
        lit_element_1.property({ type: Number })
    ], Timeline.prototype, "slotWidth", void 0);
    __decorate([
        lit_element_1.property({ type: String })
    ], Timeline.prototype, "rowsTitle", void 0);
    __decorate([
        lit_element_1.property({ type: Array })
    ], Timeline.prototype, "legend", void 0);
    __decorate([
        lit_element_1.property({ type: String })
    ], Timeline.prototype, "defaultBackground", null);
    Timeline = __decorate([
        lit_element_1.customElement('jc-timeline')
    ], Timeline);
    return Timeline;
}(lit_element_1.LitElement));
exports.default = Timeline;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18;
//# sourceMappingURL=Timeline.js.map