"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([""], [""])), 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(["", "\n "], ["", "\n "])), this._getEventResizerHandler(slot, "start"), content, this._getEventResizerHandler(slot, "end"));
}
return lit_element_1.html(templateObject_5 || (templateObject_5 = __makeTemplateObject(["", "
"], ["", "
"])), 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(["\n | \n \n \n ", "", "\n ", "\n \n \n | \n
"], ["\n | \n \n \n ", "", "\n ", "\n \n \n | \n
"])), 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([""], [""]))); }), hasChild ? lit_element_1.html(templateObject_7 || (templateObject_7 = __makeTemplateObject([""], [""])), item.collapseChildren ? "extend" : "collapse", collapseHandler) : lit_element_1.html(templateObject_8 || (templateObject_8 = __makeTemplateObject([""], [""]))), 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(["", "
"], ["", "
"])), rowId, columns.map(function (d, i) { return lit_element_1.html(templateObject_10 || (templateObject_10 = __makeTemplateObject([" | "], [" | "])), 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 \n \n
\n
\n
\n
\n \n ", "\n \n \n ", "\n \n
\n
\n ", "\n
\n
\n
\n
\n
\n
\n
\n \n ", "\n \n \n ", "\n \n
\n
\n ", "\n
\n
\n
", "
"], ["", "
"])), arr.map(function (o) { return lit_element_1.html(templateObject_13 || (templateObject_13 = __makeTemplateObject(["", " | "], ["", " | "])), 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(["| No ressource |
"], ["| No ressource |
"]))), this._handleResizeX, nCol * this.slotWidth, columns.map(function (o) { return lit_element_1.html(templateObject_16 || (templateObject_16 = __makeTemplateObject([""], [""])), _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