minify-lit-elt-template-literal-loader/test/Timeline.js

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;
};
import dayjs from 'dayjs';
import { Event } from './Event';
import { Ressource } from './Ressource';
import { LitElement, html, customElement, property, css } from 'lit-element';
import { styleMap } from 'lit-html/directives/style-map';
import syncronizeElementsScrolling from './utils/syncroScroll';
let Timeline = class Timeline extends LitElement {
    constructor(options = {}) {
        super();
        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 = (_e) => {
            this._clearSelectedItems();
            window.removeEventListener("click", this._clearSelectionhandler);
        };
        this.rows = options.ressources ? options.ressources.map(Ressource.toRessource) : [];
        this.items = options.items ? options.items.map(Event.toTimeSlot) : [];
        this._start = dayjs().startOf("day");
        this._end = this._start.endOf("day");
        this.rowsTitle = "Ressources";
        this.ressourceWidth = 200;
        this.selectedList = [];
        this.legend = [];
        this.defaultBackground = "";
        this.updateLegend();
        this.render();
    }
    get start() {
        return this._start.toISOString();
    }
    set start(value) {
        this._start = dayjs(value);
        this.updateLegend();
    }
    get end() {
        return this._end.toISOString();
    }
    set end(value) {
        this._end = dayjs(value);
        this.updateLegend();
    }
    get slotDuration() {
        return this._slotDuration;
    }
    set slotDuration(value) {
        this._slotDuration = value;
        this.updateLegend();
    }
    get legendSpan() {
        return this._legendSpan;
    }
    set legendSpan(value) {
        this._legendSpan = value;
        this.updateLegend();
    }
    set defaultBackground(value) {
        this.style.setProperty("--default-background", value);
    }
    get defaultBackground() {
        return this.style.getPropertyValue("--default-background");
    }
    setLegendUnitFormatAll(legend) {
        this.legendUnitFormat = Object.assign(Object.assign({}, this.legendUnitFormat), legend);
        this.updateLegend();
    }
    setLegendUnitFormat(unit, format) {
        this.legendUnitFormat[unit] = format;
        this.updateLegend();
    }
    addRessources(list) {
        return list.map(r => this.addRessource(r));
    }
    addRessource(ressource) {
        if (this.rows.filter(o => o.id == ressource.id).length > 0) {
            return;
        }
        const r = Ressource.toRessource(ressource);
        if (r.parent !== undefined) {
            const 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 = [...this.rows, r];
        }
        this.updateTimeslotPosition(r);
        return r;
    }
    removeRessourceById(id) {
        return this._removeRessourceById(id);
    }
    _removeRessourceById(id, depth = 0) {
        const output = { ressources: [], items: [] };
        for (let i = 0; i < this.rows.length; i) {
            const ressource = this.rows[i];
            if (ressource.id === id) {
                output.ressources.push(ressource);
                if (ressource.parent && depth === 0) {
                    ressource.parent.children = ressource.parent.children.filter(o => o.id !== ressource.id);
                }
                this.rows.splice(i, 1);
            }
            else if (ressource.parentId === id) {
                const partialOutput = this._removeRessourceById(ressource.id, depth + 1);
                output.ressources.push(...partialOutput.ressources);
                output.items.push(...partialOutput.items);
            }
            else {
                i++;
            }
        }
        output.items.push(...this.items.filter(i => i.ressourceId === id));
        this.items = this.items.filter(i => i.ressourceId !== id);
        return output;
    }
    getRessources() {
        return this.rows;
    }
    getRessourceFromId(id) {
        const tmp = this.rows.filter(r => r.id === id);
        return tmp.length > 0 ? tmp[0] : null;
    }
    setRowsTitle(title) {
        this.rowsTitle = title;
    }
    addTimeSlots(list) {
        return list.map((e) => this.addTimeSlot(e));
    }
    addTimeSlot(slot) {
        if (this.items.filter(o => o.id == slot.id).length > 0) {
            return undefined;
        }
        const ressource = this.rows.find(r => r.id === slot.ressourceId);
        if (ressource === undefined) {
            return undefined;
        }
        const timeslot = Event.toTimeSlot(slot);
        this.items = [...this.items, timeslot];
        timeslot.isDisplayed = timeslot.end > this._start.toDate() || timeslot.start < this._end.toDate();
        this.updateTimeslotPosition(ressource);
        return timeslot;
    }
    removeTimeslotById(id) {
        const output = this.items.filter(o => o.id === id);
        this.items = this.items.filter(o => o.id !== id);
        return output;
    }
    updateTimeslotById(id) {
        const output = this.removeTimeslotById(id);
        if (output.length > 0) {
            this.addTimeSlot(output[0]);
            return output[0];
        }
        else {
            return null;
        }
    }
    updateTimeslotPosition(ressource) {
        const timeslots = this.items.filter(i => i.ressourceId === ressource.id);
        if (timeslots.length === 0) {
            ressource.height = this.rowHeight + (ressource.collapseChildren ? 5 : 0);
            return;
        }
        const start = this._start.toDate().getTime();
        const end = this._end.toDate().getTime();
        const points = [start, end];
        const populateInterval = (d) => {
            const t = d.getTime();
            if (start < t && t < end && !points.includes(t)) {
                points.push(t);
            }
        };
        timeslots.forEach(element => {
            populateInterval(element.start);
            populateInterval(element.end);
        });
        points.sort();
        const intervals = [];
        for (let i = 0; i < points.length - 1; i++) {
            const startTime = points[i];
            const endTime = points[i + 1];
            intervals.push({
                start: points[i],
                end: points[i + 1],
                slots: timeslots.filter(slot => (slot.start.getTime() <= startTime && endTime <= slot.end.getTime()))
            });
        }
        const lineCount = intervals.reduce((acc, interval) => Math.max(acc, interval.slots.length), 0);
        ressource.height = this.rowHeight * Math.max(lineCount, 1) + (ressource.collapseChildren ? 5 : 0);
        const sortTimeslots = (a, b) => {
            const t = a.start.getTime() - b.start.getTime();
            if (t === 0) {
                const tend = b.end.getTime() - a.end.getTime();
                return tend === 0 ? ('' + a.id).localeCompare(b.id) : tend;
            }
            return t;
        };
        timeslots.forEach(slot => slot.offset = -1);
        timeslots.sort(sortTimeslots);
        timeslots[0].offset = 0;
        const potentialOffset = [];
        for (let i = 0; i < lineCount; i++) {
            potentialOffset.push(i);
        }
        intervals.forEach(intervals => {
            intervals.slots.sort(sortTimeslots);
            const usedOffset = intervals.slots.map(o => o.offset).filter(i => i > -1);
            const availableOffset = potentialOffset.filter(i => !usedOffset.includes(i));
            intervals.slots.forEach(slot => {
                if (slot.offset === -1) {
                    slot.offset = availableOffset.shift() || 0;
                }
            });
        });
    }
    getTimeSlots() {
        return this.items;
    }
    updateLegend() {
        const legend = [];
        const legendUnitList = ["y", "M", "d", "h", "m", 's'];
        const legendMinUnitSpan = this.slotDuration * this.legendSpan;
        for (const legendUnit of legendUnitList) {
            let currentDate = dayjs(this._start);
            let nextColumn = currentDate.add(legendMinUnitSpan, "m");
            const 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) {
                const row = [];
                let 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;
    }
    _handleResizeX(e) {
        e.stopPropagation();
        this.ressourceWidth += e.detail;
        if (this.ressourceWidth < 0) {
            this.ressourceWidth = 0;
        }
    }
    _grabHeader(e) {
        const root = this.shadowRoot;
        if (root !== null) {
            const gridContainer = root.querySelector(".jc-timeline-grid-container");
            const headerContainer = root.querySelector(".jc-timeline-grid-title-container");
            let lastPosX = e.clientX;
            const scroll = function (e) {
                const scrollLeft = (lastPosX - e.clientX);
                headerContainer.scrollLeft += scrollLeft;
                gridContainer.scrollLeft += scrollLeft;
                lastPosX = e.clientX;
            };
            const mouseUpListener = function (_e) {
                window.removeEventListener("mousemove", scroll);
                window.removeEventListener("mouseup", mouseUpListener);
            };
            window.addEventListener("mousemove", scroll);
            window.addEventListener("mouseup", mouseUpListener);
        }
    }
    _getEventResizerHandler(slot, direction) {
        return (evt) => {
            evt.stopPropagation();
            evt.preventDefault();
            const startPos = evt.clientX;
            const localSlot = slot;
            const localDir = direction;
            const startDate = slot[direction];
            const resizeListener = (e) => {
                const newDate = dayjs(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);
                }
            };
            const mouseUpListener = (_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);
        };
    }
    _getEventGrabHandler(slot, editable, ressourceEditable, callback) {
        return (evt) => {
            evt.stopPropagation();
            evt.preventDefault();
            const startPos = evt.clientX;
            let hasChanged = false;
            const localSlot = slot;
            let localSlots = this.selectedList.filter(s => s instanceof Event).map(s => s);
            if (!localSlots.includes(localSlot)) {
                localSlots = [localSlot];
            }
            const startDates = localSlots.map(slot => slot.start);
            const endDates = localSlots.map(slot => slot.end);
            const updatePosition = editable ? (e) => {
                const changeTime = Math.round((e.clientX - startPos) / this.slotWidth) * this.slotDuration;
                return localSlots.map((slot, index) => {
                    const prevStart = slot.start;
                    slot.start = dayjs(startDates[index]).add(changeTime, "m").toDate();
                    slot.end = dayjs(endDates[index]).add(changeTime, "m").toDate();
                    return prevStart.getTime() !== slot.start.getTime();
                }).reduce((prev, curr) => prev || curr);
            } : (_e) => { return false; };
            const updateRessource = ressourceEditable ? (e) => {
                var _a, _b, _c;
                const rowId = (_c = (_b = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.elementsFromPoint(e.clientX, e.clientY).find((e) => e.tagName == "TD")) === null || _b === void 0 ? void 0 : _b.parentElement) === null || _c === void 0 ? void 0 : _c.getAttribute('row-id');
                if (rowId) {
                    const ressourceId = this.rows[Number(rowId)].id;
                    if (ressourceId !== localSlot.ressourceId) {
                        const oldRessource = this.getRessourceFromId(localSlot.ressourceId);
                        localSlot.ressourceId = ressourceId;
                        this.updateTimeslotPosition(oldRessource);
                        return true;
                    }
                }
                return false;
            } : (_e) => { return false; };
            const moveListener = (e) => {
                const a = updatePosition(e);
                if (updateRessource(e) || a) {
                    hasChanged = true;
                    this.updateTimeslotById(localSlot.id);
                }
            };
            const mouseUpListener = (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);
        };
    }
    _clearSelectedItems() {
        this.selectedList.map(selectable => {
            selectable.selected = false;
            this.updateTimeslotById(selectable.id);
        });
        this.selectedList = [];
    }
    _getEventClickHandler(clickedItem) {
        const item = clickedItem;
        return (e, wasModified = false) => {
            e.stopPropagation();
            const idx = this.selectedList.indexOf(item);
            if (idx > -1) {
                if (!wasModified) {
                    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);
            }
            const myEvent = new CustomEvent('item-selected', {
                detail: { items: this.selectedList },
                bubbles: true,
                composed: true
            });
            this.dispatchEvent(myEvent);
        };
    }
    firstUpdated() {
        const root = this.shadowRoot;
        if (root !== null) {
            const gridContainer = root.querySelector(".jc-timeline-grid-container");
            syncronizeElementsScrolling([gridContainer, root.querySelector(".jc-timeline-grid-title-container")], "h");
            syncronizeElementsScrolling([gridContainer, root.querySelector(".jc-timeline-rows")], "v");
        }
        if (this.defaultBackground === "") {
            this.style.setProperty("--default-background", "SteelBlue");
        }
    }
    renderTimeslot(slot) {
        if (!slot.isDisplayed) {
            return html ``;
        }
        let rowTop = 0;
        let ressource;
        let 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];
        const minute2pixel = this.slotWidth / this.slotDuration;
        const left = dayjs(slot.start).diff(this._start, "m") * minute2pixel;
        const right = -dayjs(slot.end).diff(this._end, "m") * minute2pixel;
        const style = {
            height: this.rowHeight - 4 + "px",
            top: rowTop + slot.offset * this.rowHeight + "px",
            left: left + "px",
            right: right + "px",
            backgroundColor: ""
        };
        const bgColor = slot.bgColor ? slot.bgColor : ressource.eventBgColor;
        if (bgColor) {
            style.backgroundColor = bgColor;
        }
        if (!ressource.show) {
            style.height = "";
            style.top = rowTop - 6 + "px";
            return html `<div class="jc-timeslot empty" style="${styleMap(style)}"></div>`;
        }
        let content = html `${slot.title}`;
        const resizer = slot.editable === null ? ressource.eventEditable : slot.editable;
        const editableRessource = slot.ressourceEditable === null ? ressource.eventRessourceEditable : slot.ressourceEditable;
        if (resizer) {
            content = html `<div class="jc-timeslot-resizer-start" @mousedown="${this._getEventResizerHandler(slot, "start")}"></div>${content}
                            <div class="jc-timeslot-resizer-end" @mousedown="${this._getEventResizerHandler(slot, "end")}"></div>`;
        }
        return html `<div class="jc-timeslot ${slot.moving ? "moving" : ""} ${slot.selected ? "selected" : ""}" 
            start="${slot.start.getHours()}" 
            end="${slot.end.getHours()}" 
            style="${styleMap(style)}"
            @mousedown="${this._getEventGrabHandler(slot, resizer, editableRessource, this._getEventClickHandler(slot))}"
            >${content}</div>`;
    }
    _getCollapseRessourceHandler(item) {
        return (_e) => {
            item.collapseChildren = !item.collapseChildren;
            this.updateTimeslotPosition(item);
            this.rows = [...this.rows];
        };
    }
    _onRessourceDragStart(item) {
        return (event) => {
            var _a;
            (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.setData("text", item.id);
        };
    }
    _onRessourceDragEnter(event) {
        if (event.target instanceof HTMLElement) {
            const tgt = event.target;
            tgt.classList.add("target");
        }
    }
    _onRessourceDragLeave(event) {
        if (event.target instanceof HTMLElement) {
            event.target.classList.remove("target");
        }
    }
    _onRessourceDrop(event) {
        var _a, _b;
        event.preventDefault();
        if (event.target instanceof HTMLElement) {
            event.target.classList.remove("target");
            const srcId = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData("text");
            const destinationId = (_b = event.target.parentElement) === null || _b === void 0 ? void 0 : _b.getAttribute("ressourceId");
            if (srcId && destinationId && (destinationId !== srcId)) {
                const src = this.getRessourceFromId(srcId);
                const destination = this.getRessourceFromId(destinationId);
                if (destination.childOf(src)) {
                    return;
                }
                const movedContent = this.removeRessourceById(src.id);
                if (event.target.classList.contains("jc-ressource")) {
                    movedContent.ressources[0].parent = destination;
                }
                else {
                    movedContent.ressources[0].parent = destination.parent;
                    let idx = this.rows.findIndex(v => v.id === destinationId);
                    if (event.target.classList.contains("jc-ressource-below")) {
                        idx += 1;
                        while ((idx < this.rows.length)
                            && this.rows[idx].childOf(destination)) {
                            idx += 1;
                        }
                    }
                    const arr = this.rows;
                    this.rows = [...arr.splice(0, idx), src, ...arr];
                }
                this.addRessources(movedContent.ressources);
                this.addTimeSlots(movedContent.items);
            }
        }
    }
    renderRessource(item) {
        const depth = item.depth;
        const style = `--depth:${depth};` + (item.height ? `height:${item.height}px;` : "");
        const hasChild = item.children.length > 0;
        const collapseHandler = this._getCollapseRessourceHandler(item);
        return html `<tr>
                        <td class="${item.selected ? "jc-ressource-selected" : ""}" style="${style}" ressourceId="${item.id}" @click="${this._getEventClickHandler(item)}">
                            <div class="jc-ressource-above"></div>    
                            <div class="jc-ressource" draggable="true" @dragstart="${this._onRessourceDragStart(item)}">
                            ${Array(depth).fill(0).map(_i => html `<i class="jc-spacer"></i>`)}${hasChild ? html `<i class="jc-spacer ${item.collapseChildren ? "extend" : "collapse"}" @click="${collapseHandler}"></i>` : html `<i class="jc-spacer"></i>`}
                            <span>${item.title}</span>
                            </div>
                            <div class="jc-ressource-below"></div>
                        </td>
                    </tr>`;
    }
    renderGridRow(columns, rowId = -1, height = 30) {
        return html `<tr row-id="${rowId}">${columns.map((d, i) => html `<td style="height:${height}px;" class="jc-slot ${(i % this.legendSpan) === 0 ? "jc-major-slot" : ""}" start="${d.toISOString()}">&nbsp;</td>`)}</tr>`;
    }
    render() {
        const nCol = Math.floor(this._end.diff(this._start, 'm') / this.slotDuration) + 1;
        const columns = [];
        for (let i = 0; i < nCol; i++) {
            columns.push(this._start.add(this.slotDuration * i, 'm'));
        }
        const displayedRows = this.rows.map((r, i) => { return { i: i, r: r }; }).filter(o => o.r.show);
        return html `
      <div class="jc-timeline-header">
        <div class="jc-timeline-rows-title" style=${styleMap({ minWidth: this.ressourceWidth + "px", width: this.ressourceWidth + "px" })}>${this.rowsTitle}</div>
        <horizontal-resizer @resize-x="${this._handleResizeX}"></horizontal-resizer>
        <div class="jc-timeline-grid-title-container">
          <table @mousedown="${this._grabHeader}"  style="width:${nCol * this.slotWidth}px;">
              <colgroup>${columns.map(_o => html `<col style="min-width:${this.slotWidth}px">`)}</colgroup>
              <tbody>
                  ${this.legend.map(arr => html `<tr class="jc-timeline-grid-title">${arr.map(o => html `<th colspan="${o.colspan}">${o.title}</th>`)}</tr>`)}
              </tbody>
          </table>
        </div>
      </div>
      <div class="jc-timeline-content">
        <table class="jc-timeline-rows"
          style="${styleMap({ "--width": this.ressourceWidth + "px" })}"
          @dragover="${(e) => e.preventDefault()}"
          @dragenter="${this._onRessourceDragEnter}"
          @dragleave="${this._onRessourceDragLeave}"
          @drop="${this._onRessourceDrop}">
          ${this.rows.length > 0 ? displayedRows.map(o => this.renderRessource(o.r)) : html `<tr class="empty"><td>No ressource</td></tr>`}
        </table>
        <horizontal-resizer @resize-x="${this._handleResizeX}"></horizontal-resizer>
        <div class="jc-timeline-grid-container">
          <table  style="width:${nCol * this.slotWidth}px;">
              <colgroup>${columns.map(_o => html `<col style="min-width:${this.slotWidth}px">`)}</colgroup>
              
              <tbody>
                  ${this.rows.length > 0 ? displayedRows.map(o => this.renderGridRow(columns, o.i, o.r.height)) : this.renderGridRow(columns)}
              </tbody>
          </table>
          <div class="jc-timeslots" style="width:${nCol * this.slotWidth}px;">
            ${this.items.map(slot => this.renderTimeslot(slot))}
          </div>
        </div>
      </div>
    `;
    }
};
Timeline.styles = css `
    body{
        font-family:Roboto;
    }
    div {
        box-sizing: border-box;
    }
    .jc-timeline-content,
    .jc-timeline-header{
        width:100%;
        position:relative;
        display: flex;
        flex-direction:row;
        height:max-content;
        align-items: stretch;
    }
    
    .jc-timeline-rows-title,
    .jc-timeline-rows > tr > td{        
        padding: 8px;
        min-width:40px;
    }
    .jc-timeline-rows > tr > td {
        max-width:calc( var(--width) - 8px );
        padding: 0px; 
        vertical-align:top;
    }
    .jc-timeline-rows > tr.empty > td{
        padding: 6px 0px 4px 8px;
    }
    i.jc-spacer {
        display:inline-block;
        width : 1rem;
        height: 1rem;
        position:relative;
        box-sizing: border-box;
    }
    i.jc-spacer:after{
        content: " ";
        position:absolute;
        background-repeat: no-repeat;
        background-size: 1.05rem;
        width:  1.05rem;
        height: 1.05rem;
    }
    .jc-spacer.extend,
    .jc-spacer.collapse    {
        cursor:pointer;
    }
    i.jc-spacer.extend:after{
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iYmxhY2siIHdpZHRoPSIxOHB4IiBoZWlnaHQ9IjE4cHgiPjxwYXRoIGQ9Ik0wIDBoMjR2MjRIMFYweiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik0xOSAzSDVjLTEuMTEgMC0yIC45LTIgMnYxNGMwIDEuMS44OSAyIDIgMmgxNGMxLjEgMCAyLS45IDItMlY1YzAtMS4xLS45LTItMi0yem0wIDE2SDVWNWgxNHYxNHptLTgtMmgydi00aDR2LTJoLTRWN2gtMnY0SDd2Mmg0eiIvPjwvc3ZnPg==")
    }
    i.jc-spacer.collapse:after{
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0Ij48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTE5IDNINWMtMS4xIDAtMiAuOS0yIDJ2MTRjMCAxLjEuOSAyIDIgMmgxNGMxLjEgMCAyLS45IDItMlY1YzAtMS4xLS45LTItMi0yem0wIDE2SDVWNWgxNHYxNHpNNyAxMWgxMHYySDd6Ii8+PC9zdmc+")
    }
    
    .jc-timeline-rows > tr{
        box-sizing: border-box;
        white-space: nowrap;
        border: 1px solid grey;
        border-style: solid none;
    }
    .jc-timeline-rows,
    .jc-timeline-rows-title{
        width:var(--width, 200px);
        overflow: hidden;
        border-collapse:collapse;
    }
    .jc-timeline-grid-title-container,
    .jc-timeline-grid-container{
        position:relative;
        width: 600px;
        display: block;
        overflow: hidden;
    }
    .jc-timeline-grid-container{
        overflow-x: auto;
    }
    .jc-timeline-grid-title-container > table,
    .jc-timeline-grid-container > table {
        width:100%;
        table-layout: fixed;
        border-collapse: collapse;
        box-sizing: border-box;
    }

    .jc-timeline-grid-title-container {
        white-space: nowrap;
        cursor: grab;
        user-select: none; /* supported by Chrome and Opera */
        -webkit-user-select: none; /* Safari */
        -khtml-user-select: none; /* Konqueror HTML */
        -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
    }
    .jc-timeline-grid-title:first-child > th{
        border-top:0;
    }    
    .jc-timeline-grid-title:first-child > th:before,
    .jc-timeline-grid-title:first-child > th:last-child:after {
        content:" ";
        display: block;
        position:absolute;
        left:-1px;
        top:0px;
        height:calc( 100% - 8px);
        border-left: 2px solid white;
        z-index:2;
    }
    .jc-timeline-grid-title:first-child > th:last-child:after
    {
        left:auto;
        right:-1px;
    }
    .jc-timeline-grid-title:first-child:last-child >th{
        padding:8px 0;
    }
    .jc-timeline-grid-title:last-child > th{
        border-bottom:none;
    }
    .jc-timeline-grid-title > th,
    .jc-slot {      
        height:100%;
        border: solid 1px lightgray;
        border-left-style: dotted;
        border-right:0;
        text-align: center;
        position:relative;
        box-sizing: border-box;
    }
    .jc-timeline-grid-title > th:last-child,
    .jc-slot:last-child{
        border-right:solid 1px lightgray;
    }
    .jc-timeline-grid-title > th,
    .jc-major-slot{
        border-left-style: solid;
    }
    .jc-timeslots{
        position:absolute;
        top:0px;
        left:0px;
        bottom:0px;
        overflow: hidden;
    }
    .jc-timeslot{
        position:absolute;
        white-space: nowrap;
        overflow-x:hidden;
        background-color:var(--default-background);
        color:#fff;
        border-radius:3px;
        padding:4px;
        margin:2px 0px;
        z-index:1;
        cursor:auto;
    }
    .jc-timeslot.empty{
        height:5px;
        padding:2px 2px;
        margin:0px;
        cursor:pointer;
    }
    .jc-timeslot.moving{
        opacity:0.7;
        cursor:grabbing;
    }
    .jc-timeslot.selected:before{
        border:solid 2px black;
        position:absolute;
        top:0;
        bottom:0;
        left:0;
        right:0;
        content:" ";
    }
    .jc-timeslot-resizer-start,
    .jc-timeslot-resizer-end{
        position:absolute;
        top:0;
        bottom:0;
        width:4px;
        min-width:4px;
        display:block;
        cursor: ew-resize;
    }
    .jc-timeslot-resizer-start,
    .jc-timeslot-resizer-end{
        display:block;
    }
    .jc-timeslot-resizer-start{
        left:0px;
    }
    .jc-timeslot-resizer-end{
        right:0px;
    }
    .jc-timeline-rows > tr >td{
        height:100%;
    }
    .jc-ressource{
        padding-top: 2px;
        height: calc( 100% - 8px);
    }
    .jc-ressource > span {
        pointer-events: none;
    }
    .jc-ressource.target{
        background-color: lightgrey;
    }
    .jc-ressource-selected{
        border:1px solid var(--default-background, SteelBlue);
        border-right:0;
        border-left:0;
        background-color:#4682b46b;
    }
    .jc-ressource-above{
        height:4px;
    }
    .jc-ressource-above.target{
        margin-left: calc( var(--depth) * 16px );
        background-color: var(--default-background, SteelBlue);
        border-radius: 0 0 0 4px;
    }
    .jc-ressource-below{
        height:4px;
    }
    .jc-ressource-below.target{
        margin-left: calc( var(--depth) * 16px);
        background-color: var(--default-background, SteelBlue);
        border-radius: 4px 0 0 0;
    }
  `;
__decorate([
    property({ type: Array })
], Timeline.prototype, "rows", void 0);
__decorate([
    property({ type: Array })
], Timeline.prototype, "items", void 0);
__decorate([
    property({ type: Number })
], Timeline.prototype, "ressourceWidth", void 0);
__decorate([
    property({ type: Object })
], Timeline.prototype, "_start", void 0);
__decorate([
    property({ type: String })
], Timeline.prototype, "start", null);
__decorate([
    property({ type: String })
], Timeline.prototype, "end", null);
__decorate([
    property({ type: Number })
], Timeline.prototype, "slotDuration", null);
__decorate([
    property({ type: Number })
], Timeline.prototype, "legendSpan", null);
__decorate([
    property({ type: Number })
], Timeline.prototype, "rowHeight", void 0);
__decorate([
    property({ type: Number })
], Timeline.prototype, "slotWidth", void 0);
__decorate([
    property({ type: String })
], Timeline.prototype, "rowsTitle", void 0);
__decorate([
    property({ type: Array })
], Timeline.prototype, "legend", void 0);
__decorate([
    property({ type: String })
], Timeline.prototype, "defaultBackground", null);
Timeline = __decorate([
    customElement('jc-timeline')
], Timeline);
export default Timeline;
//# sourceMappingURL=Timeline.js.map