Commit lib

lib-esm/Event.d.ts

@@ -0,0 +1,30 @@
+import Selectable from './utils/selectable';
+export interface IEvent {
+    id: string;
+    start: Date;
+    end: Date;
+    ressourceId: string;
+    title?: string;
+    editable?: boolean | null;
+    ressourceEditable?: boolean | null;
+    bgColor?: string;
+}
+export declare class Event implements IEvent, Selectable {
+    id: string;
+    start: Date;
+    end: Date;
+    title: string;
+    ressourceId: string;
+    isDisplayed: boolean;
+    offset: number;
+    editable: boolean | null;
+    ressourceEditable: boolean | null;
+    moving: boolean;
+    selected: boolean;
+    bgColor?: string;
+    constructor(obj: IEvent);
+    get startStr(): string;
+    get endStr(): string;
+    static toTimeSlot(obj: IEvent): Event;
+}
+export default Event;

lib-esm/Event.js

@@ -0,0 +1,42 @@
+var Event = (function () {
+    function Event(obj) {
+        this.id = obj.id;
+        this.start = obj.start;
+        this.end = obj.end;
+        this.ressourceId = obj.ressourceId;
+        this.title = (obj === null || obj === void 0 ? void 0 : obj.title) || this.id;
+        this.isDisplayed = false;
+        this.offset = 0;
+        this.editable = (obj === null || obj === void 0 ? void 0 : obj.editable) === undefined ? null : obj.editable;
+        this.ressourceEditable = (obj === null || obj === void 0 ? void 0 : obj.ressourceEditable) === undefined ? null : obj.ressourceEditable;
+        this.moving = false;
+        this.selected = false;
+        this.bgColor = obj.bgColor;
+    }
+    Object.defineProperty(Event.prototype, "startStr", {
+        get: function () {
+            return this.start.toISOString();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Event.prototype, "endStr", {
+        get: function () {
+            return this.end.toISOString();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Event.toTimeSlot = function (obj) {
+        if (obj instanceof Event) {
+            return obj;
+        }
+        else {
+            return new Event(obj);
+        }
+    };
+    return Event;
+}());
+export { Event };
+export default Event;
+//# sourceMappingURL=Event.js.map

lib-esm/Event.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Event.js","sourceRoot":"","sources":["../src/Event.ts"],"names":[],"mappings":"AAaA;IAcI,eAAY,GAAU;QACpB,IAAI,CAAC,EAAE,GAAG,GAAG,CAAC,EAAE,CAAC;QACjB,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC;QACvB,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC;QACnB,IAAI,CAAC,WAAW,GAAG,GAAG,CAAC,WAAW,CAAC;QACnC,IAAI,CAAC,KAAK,GAAG,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,KAAK,KAAI,IAAI,CAAC,EAAE,CAAC;QACnC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QACzB,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;QAChB,IAAI,CAAC,QAAQ,GAAG,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,QAAQ,MAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC;QAClE,IAAI,CAAC,iBAAiB,GAAG,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,iBAAiB,MAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,iBAAiB,CAAC;QAC7F,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,CAAA;IAE5B,CAAC;IACD,sBAAI,2BAAQ;aAAZ;YACI,OAAO,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAA;QACnC,CAAC;;;OAAA;IACD,sBAAI,yBAAM;aAAV;YACI,OAAO,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,CAAA;QACjC,CAAC;;;OAAA;IAEM,gBAAU,GAAjB,UAAkB,GAAU;QACxB,IAAI,GAAG,YAAY,KAAK,EAAC;YACrB,OAAO,GAAG,CAAA;SACb;aAAI;YACD,OAAO,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC;SACzB;IACL,CAAC;IACL,YAAC;AAAD,CAAC,AA3CD,IA2CC;;AAED,eAAe,KAAK,CAAA"}

lib-esm/Ressource.d.ts

@@ -0,0 +1,33 @@
+import Selectable from './utils/selectable';
+export interface IRessource {
+    id: string;
+    title?: string;
+    children?: Array<IRessource>;
+    collapseChildren?: boolean;
+    parent?: IRessource;
+    parentId?: String;
+    height?: number;
+    eventEditable?: boolean;
+    eventRessourceEditable?: boolean;
+    eventBgColor?: string;
+}
+export declare class Ressource implements IRessource, Selectable {
+    id: string;
+    title: string;
+    children: Array<Ressource>;
+    collapseChildren: boolean;
+    parent?: Ressource;
+    height?: number;
+    eventEditable: boolean;
+    eventRessourceEditable: boolean;
+    eventBgColor?: string;
+    selected: boolean;
+    constructor(obj: IRessource);
+    get parentId(): string;
+    get depth(): number;
+    get show(): boolean;
+    childOf(potentialParent: IRessource): boolean;
+    toPlainObject(parent: IRessource | undefined): IRessource;
+    static toRessource(obj: IRessource): Ressource;
+}
+export default Ressource;

lib-esm/Ressource.js

@@ -0,0 +1,65 @@
+var Ressource = (function () {
+    function Ressource(obj) {
+        this.id = obj.id;
+        this.title = obj.title || obj.id;
+        if (obj.children) {
+            this.children = obj.children.map(Ressource.toRessource);
+        }
+        else {
+            this.children = [];
+        }
+        this.collapseChildren = (obj === null || obj === void 0 ? void 0 : obj.collapseChildren) === undefined ? false : obj.collapseChildren;
+        this.parent = obj.parent ? Ressource.toRessource(obj.parent) : undefined;
+        this.height = obj.height;
+        this.eventEditable = (obj === null || obj === void 0 ? void 0 : obj.eventEditable) === undefined ? true : obj.eventEditable;
+        this.eventRessourceEditable = (obj === null || obj === void 0 ? void 0 : obj.eventRessourceEditable) === undefined ? true : obj.eventRessourceEditable;
+        this.eventBgColor = obj.eventBgColor;
+        this.selected = false;
+    }
+    Object.defineProperty(Ressource.prototype, "parentId", {
+        get: function () {
+            var _a;
+            return ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.id) || "";
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Ressource.prototype, "depth", {
+        get: function () {
+            return this.parent ? this.parent.depth + 1 : 0;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Ressource.prototype, "show", {
+        get: function () {
+            return this.parent === undefined ? true : (this.parent.show && !this.parent.collapseChildren);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Ressource.prototype.childOf = function (potentialParent) {
+        return this.parent === undefined ? false : (this.parent.id === potentialParent.id || this.parent.childOf(potentialParent));
+    };
+    Ressource.prototype.toPlainObject = function (parent) {
+        var _this = this;
+        return {
+            id: this.id,
+            title: this.title,
+            children: this.children.map(function (o) { return o.toPlainObject(_this); }),
+            parent: parent
+        };
+    };
+    Ressource.toRessource = function (obj) {
+        if (obj instanceof Ressource) {
+            return obj;
+        }
+        else {
+            return new Ressource(obj);
+        }
+    };
+    return Ressource;
+}());
+export { Ressource };
+export default Ressource;
+//# sourceMappingURL=Ressource.js.map

lib-esm/Timeline.d.ts

@@ -0,0 +1,77 @@
+import { Dayjs } from 'dayjs';
+import { Event, IEvent } from './Event';
+import { Ressource, IRessource } from './Ressource';
+import { LitElement, TemplateResult } from 'lit-element';
+interface TimelineOptions {
+    ressources?: Array<IRessource>;
+    items?: Array<IEvent>;
+}
+interface TimelineContent {
+    ressources: Array<Ressource>;
+    items: Array<Event>;
+}
+declare type dayjsUnit = "y" | "M" | "d" | "h" | "m" | 's';
+declare type UnitLegend = {
+    [k in dayjsUnit]: string;
+};
+declare class Timeline extends LitElement {
+    static styles: import("lit-element").CSSResult;
+    private rows;
+    private items;
+    private selectedList;
+    private ressourceWidth;
+    private _start;
+    get start(): string;
+    set start(value: string);
+    private _end;
+    get end(): string;
+    set end(value: string);
+    private _slotDuration;
+    get slotDuration(): number;
+    set slotDuration(value: number);
+    private _legendSpan;
+    get legendSpan(): number;
+    set legendSpan(value: number);
+    private rowHeight;
+    private slotWidth;
+    private rowsTitle;
+    private legendUnitFormat;
+    private legend;
+    constructor(options?: TimelineOptions);
+    set defaultBackground(value: string);
+    get defaultBackground(): string;
+    setLegendUnitFormatAll(legend: Partial<UnitLegend>): void;
+    setLegendUnitFormat(unit: dayjsUnit, format: string): void;
+    addRessources(list: Array<IRessource>): (IRessource | undefined)[];
+    addRessource(ressource: IRessource): IRessource | undefined;
+    removeRessourceById(id: string): TimelineContent;
+    _removeRessourceById(id: string, depth?: number): TimelineContent;
+    getRessources(): Array<Ressource>;
+    getRessourceFromId(id: string): Ressource | null;
+    setRowsTitle(title: string): void;
+    addTimeSlots(list: Array<IEvent>): (Event | null)[];
+    addTimeSlot(slot: IEvent): Event | null;
+    removeTimeslotById(id: string): Array<Event>;
+    updateTimeslotById(id: string): Event | null;
+    private updateTimeslotPosition;
+    getTimeSlots(): Array<Event>;
+    updateLegend(): void;
+    _handleResizeX(e: CustomEvent<number>): void;
+    _grabHeader(e: MouseEvent): void;
+    _getEventResizerHandler(slot: Event, direction: "end" | "start"): (evt: MouseEvent) => void;
+    _getEventGrabHandler(slot: Event, editable: boolean, ressourceEditable: boolean, callback: (e: MouseEvent, wasModified: boolean) => void): (evt: MouseEvent) => void;
+    private _clearSelectedItems;
+    private _clearSelectionhandler;
+    private _getEventClickHandler;
+    firstUpdated(): void;
+    renderTimeslot(slot: Event): TemplateResult;
+    _getCollapseRessourceHandler(item: Ressource): (e: MouseEvent) => void;
+    _onRessourceDragStart(item: Ressource): (event: DragEvent) => void;
+    _onRessourceDragEnter(event: DragEvent): void;
+    _onRessourceDragLeave(event: DragEvent): void;
+    _onRessourceDrop(event: DragEvent): void;
+    renderRessource(item: Ressource): TemplateResult;
+    renderGridRow(columns: Array<Dayjs>, rowId?: number, height?: number): TemplateResult;
+    render(): TemplateResult;
+}
+export default Timeline;

lib-esm/components/horizontal-resizer.d.ts

@@ -0,0 +1,15 @@
+import { LitElement } from 'lit-element';
+export declare class HorizontalResizer extends LitElement {
+    static styles: import("lit-element").CSSResult;
+    private lastPosX;
+    constructor();
+    render(): import("lit-element").TemplateResult;
+    _startResize(e: MouseEvent): void;
+    private _emitMove;
+    private _endResize;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'horizontal-resizer': HorizontalResizer;
+    }
+}

lib-esm/components/horizontal-resizer.js

@@ -0,0 +1,64 @@
+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 __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 { LitElement, html, customElement, css } from 'lit-element';
+var HorizontalResizer = (function (_super) {
+    __extends(HorizontalResizer, _super);
+    function HorizontalResizer() {
+        var _this = _super.call(this) || this;
+        _this._emitMove = function (e) {
+            var n = e.clientX - _this.lastPosX;
+            _this.lastPosX = e.clientX;
+            var event = new CustomEvent('resize-x', {
+                detail: n,
+                bubbles: true,
+                composed: true
+            });
+            _this.dispatchEvent(event);
+        };
+        _this._endResize = function (e) {
+            _this.lastPosX = -1;
+            window.removeEventListener("mousemove", _this._emitMove);
+            window.removeEventListener("mouseup", _this._endResize);
+        };
+        _this.lastPosX = -1;
+        return _this;
+    }
+    HorizontalResizer.prototype.render = function () {
+        var _this = this;
+        return html(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      <div @mousedown=", "></div>\n    "], ["\n      <div @mousedown=", "></div>\n    "])), function (e) { return _this._startResize(e); });
+    };
+    HorizontalResizer.prototype._startResize = function (e) {
+        this.lastPosX = e.clientX;
+        window.addEventListener("mousemove", this._emitMove);
+        window.addEventListener("mouseup", this._endResize);
+    };
+    HorizontalResizer.styles = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    :host {\n      min-width:4px;\n      background-color:lightgray;\n      cursor:col-resize;\n    }\n    div{\n      width:100%;\n      height:100%;\n    }\n  "], ["\n    :host {\n      min-width:4px;\n      background-color:lightgray;\n      cursor:col-resize;\n    }\n    div{\n      width:100%;\n      height:100%;\n    }\n  "])));
+    HorizontalResizer = __decorate([
+        customElement('horizontal-resizer')
+    ], HorizontalResizer);
+    return HorizontalResizer;
+}(LitElement));
+export { HorizontalResizer };
+var templateObject_1, templateObject_2;
+//# sourceMappingURL=horizontal-resizer.js.map

lib-esm/components/horizontal-resizer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"horizontal-resizer.js","sourceRoot":"","sources":["../../src/components/horizontal-resizer.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAE,aAAa,EAAY,GAAG,EAAC,MAAM,aAAa,CAAC;AAG3E;IAAuC,qCAAU;IAa/C;QAAA,YACE,iBAAO,SAER;QAYO,eAAS,GAAG,UAAC,CAAY;YAC/B,IAAM,CAAC,GAAG,CAAC,CAAC,OAAO,GAAG,KAAI,CAAC,QAAQ,CAAC;YACpC,KAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,OAAO,CAAC;YAC1B,IAAI,KAAK,GAAG,IAAI,WAAW,CAAS,UAAU,EAAE;gBAC9C,MAAM,EAAG,CAAC;gBACV,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CAAC;YACH,KAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC5B,CAAC,CAAA;QACO,gBAAU,GAAG,UAAC,CAAY;YAChC,KAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;YACnB,MAAM,CAAC,mBAAmB,CAAC,WAAW,EAAE,KAAI,CAAC,SAAS,CAAC,CAAA;YACvD,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,KAAI,CAAC,UAAU,CAAC,CAAA;QACxD,CAAC,CAAA;QA3BC,KAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAA;;IACpB,CAAC;IAED,kCAAM,GAAN;QAAA,iBAIC;QAHC,OAAO,IAAI,8GAAA,0BACS,EAAoC,eACvD,KADmB,UAAC,CAAY,IAAG,OAAA,KAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAApB,CAAoB,EACtD;IACJ,CAAC;IACD,wCAAY,GAAZ,UAAa,CAAY;QACvB,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,OAAO,CAAC;QAC1B,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,CAAC,CAAA;QACpD,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,CAAC,CAAA;IACrD,CAAC;IA1BM,wBAAM,GAAG,GAAG,wOAAA,qKAUlB,KAAC;IAXS,iBAAiB;QAD7B,aAAa,CAAC,oBAAoB,CAAC;OACvB,iBAAiB,CA6C7B;IAAD,wBAAC;CAAA,AA7CD,CAAuC,UAAU,GA6ChD;SA7CY,iBAAiB"}

lib-esm/index.d.ts

@@ -0,0 +1 @@
+import './Ressource';

lib-esm/index.js

@@ -0,0 +1,69 @@
+import Ressource from './Ressource';
+import './Ressource';
+import dayjs from 'dayjs';
+var emptyTimeline = document.createElement("jc-timeline");
+var title = document.createElement("h2");
+title.innerText = "Empty Timeline";
+document.body.appendChild(title);
+document.body.appendChild(emptyTimeline);
+emptyTimeline.setAttribute("legendSpan", "1");
+emptyTimeline.setAttribute("slotWidth", "40");
+var timeline = document.createElement("jc-timeline");
+var rows = [
+    { id: '1', title: "Ressource 1 DarkSlate", eventBgColor: "DarkSlateBlue" },
+    { id: '3', title: "Ressource 3" },
+    { id: '4', title: "Ressource 4" },
+    { id: '5', title: "Ressource 5" }
+].map(function (i) { return new Ressource(i); });
+rows[2].parent = rows[1];
+rows[0].parent = rows[1];
+var data = dayjs().startOf("hour").hour(9);
+var timeslots = [
+    { id: '1', title: "Fixed ressource", ressourceId: '3', start: data.subtract(3, "h").toDate(), end: data.toDate(), ressourceEditable: false, bgColor: "darkgreen" },
+    { id: '2', title: "Fixed time", ressourceId: '3', start: data.toDate(), end: data.endOf("hour").add(1, "h").toDate(), editable: false, bgColor: "FireBrick" },
+    { id: '3', ressourceId: '4', start: data.add(1, "h").toDate(), end: data.endOf("hour").add(2, "h").toDate() },
+    { id: '4', ressourceId: '3', start: data.startOf("day").subtract(1, "h").toDate(), end: dayjs().endOf("hour").add(1, "h").toDate() }
+];
+for (var i = 5; i < 10; i++) {
+    timeslots.push({
+        id: i.toFixed(0),
+        title: "event " + i,
+        ressourceId: '1',
+        start: data.add(i, 'h').toDate(),
+        end: data.add(i, 'h').endOf("hour").add(1, "h").toDate(),
+    });
+}
+timeline.addRessource(rows[1]);
+timeline.addRessource(rows[0]);
+timeline.addRessource(rows[2]);
+timeline.addRessource(rows[3]);
+timeslots.map(function (o) { return timeline.addTimeSlot(o); });
+timeline.addEventListener("item-selected", function (e) { console.log(e.detail); });
+title = document.createElement("h2");
+title.innerText = "Generic Timeline";
+document.body.appendChild(title);
+document.body.appendChild(timeline);
+var nestedTimeline = document.createElement("jc-timeline");
+title = document.createElement("h2");
+title.innerText = "Multiple level Timeline";
+document.body.appendChild(title);
+document.body.appendChild(nestedTimeline);
+var ressources = Array(8).fill(0).map(function (_, i) { return new Ressource({ id: "" + i, title: "level " + i }); });
+for (var i = 0; i < ressources.length - 1; i++) {
+    ressources[i + 1].parent = ressources[i];
+}
+ressources.forEach(function (r) { return nestedTimeline.addRessource(r); });
+ressources[0].collapseChildren = true;
+var nItem = 32;
+var timeslots2 = Array(nItem).fill(0).map(function (_, i) {
+    return {
+        id: "" + i,
+        ressourceId: "" + (i % 8),
+        title: "I " + i,
+        start: data.add(i / 2 - 5, 'h').toDate(),
+        end: data.add(i / 2 - 4, 'h').toDate(),
+        bgColor: "hsl(" + Math.round(i / (nItem - 1) * 360) + ", 100%, 50%)"
+    };
+});
+timeslots2.forEach(function (r) { return nestedTimeline.addTimeSlot(r); });
+//# sourceMappingURL=index.js.map

lib-esm/utils/selectable.d.ts

@@ -0,0 +1,4 @@
+export default interface Selectable {
+    selected: boolean;
+    id: string;
+}

lib-esm/utils/selectable.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=selectable.js.map

lib-esm/utils/selectable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectable.js","sourceRoot":"","sources":["../../src/utils/selectable.ts"],"names":[],"mappings":""}

lib-esm/utils/syncroScroll.d.ts

@@ -0,0 +1,3 @@
+declare type scrollingDirection = "v" | "h" | "vh" | "hv";
+export default function syncronizeElementsScrolling(elements: Array<HTMLBaseElement>, direction?: scrollingDirection): void;
+export {};

lib-esm/utils/syncroScroll.js

@@ -0,0 +1,25 @@
+export default function syncronizeElementsScrolling(elements, direction) {
+    if (direction === void 0) { direction = "vh"; }
+    var activeScroller = null;
+    var bSyncroV = direction.indexOf("v") > -1;
+    var bSyncroH = direction.indexOf("h") > -1;
+    var applyListener = function (element) {
+        element.addEventListener("mouseenter", function (e) {
+            activeScroller = e.target;
+        });
+        element.addEventListener("scroll", function (e) {
+            if (e.target !== activeScroller)
+                return;
+            elements.forEach(function (element) {
+                if (activeScroller === element || activeScroller === null)
+                    return;
+                if (bSyncroV)
+                    element.scrollTop = activeScroller.scrollTop;
+                if (bSyncroH)
+                    element.scrollLeft = activeScroller.scrollLeft;
+            });
+        });
+    };
+    elements.forEach(applyListener);
+}
+//# sourceMappingURL=syncroScroll.js.map

lib-esm/utils/syncroScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"syncroScroll.js","sourceRoot":"","sources":["../../src/utils/syncroScroll.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,UAAU,2BAA2B,CAAC,QAA+B,EAAE,SAAmC;IAAnC,0BAAA,EAAA,gBAAmC;IACpH,IAAI,cAAc,GAAsB,IAAI,CAAC;IAC7C,IAAM,QAAQ,GAAG,SAAS,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAE;IAC9C,IAAM,QAAQ,GAAG,SAAS,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAE;IAC9C,IAAM,aAAa,GAAG,UAAS,OAAuB;QACpD,OAAO,CAAC,gBAAgB,CAAC,YAAY,EAAE,UAAS,CAAY;YAC1D,cAAc,GAAG,CAAC,CAAC,MAAqB,CAAC;QAC3C,CAAC,CAAC,CAAC;QACH,OAAO,CAAC,gBAAgB,CAAC,QAAQ,EAAE,UAAS,CAAO;YACjD,IAAI,CAAC,CAAC,MAAM,KAAK,cAAc;gBAAE,OAAO;YACxC,QAAQ,CAAC,OAAO,CAAC,UAAS,OAAO;gBAC/B,IAAI,cAAc,KAAK,OAAO,IAAI,cAAc,KAAK,IAAI;oBAAE,OAAO;gBAClE,IAAI,QAAQ;oBAAE,OAAO,CAAC,SAAS,GAAG,cAAc,CAAC,SAAS,CAAC;gBAC3D,IAAI,QAAQ;oBAAE,OAAO,CAAC,UAAU,GAAG,cAAc,CAAC,UAAU,CAAC;YAC/D,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,CAAA;IACD,QAAQ,CAAC,OAAO,CAAC,aAAa,CAAC,CAAA;AACjC,CAAC"}

lib/Event.d.ts

@@ -0,0 +1,30 @@
+import Selectable from './utils/selectable';
+export interface IEvent {
+    id: string;
+    start: Date;
+    end: Date;
+    ressourceId: string;
+    title?: string;
+    editable?: boolean | null;
+    ressourceEditable?: boolean | null;
+    bgColor?: string;
+}
+export declare class Event implements IEvent, Selectable {
+    id: string;
+    start: Date;
+    end: Date;
+    title: string;
+    ressourceId: string;
+    isDisplayed: boolean;
+    offset: number;
+    editable: boolean | null;
+    ressourceEditable: boolean | null;
+    moving: boolean;
+    selected: boolean;
+    bgColor?: string;
+    constructor(obj: IEvent);
+    get startStr(): string;
+    get endStr(): string;
+    static toTimeSlot(obj: IEvent): Event;
+}
+export default Event;

lib/Event.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Event = void 0;
+var Event = (function () {
+    function Event(obj) {
+        this.id = obj.id;
+        this.start = obj.start;
+        this.end = obj.end;
+        this.ressourceId = obj.ressourceId;
+        this.title = (obj === null || obj === void 0 ? void 0 : obj.title) || this.id;
+        this.isDisplayed = false;
+        this.offset = 0;
+        this.editable = (obj === null || obj === void 0 ? void 0 : obj.editable) === undefined ? null : obj.editable;
+        this.ressourceEditable = (obj === null || obj === void 0 ? void 0 : obj.ressourceEditable) === undefined ? null : obj.ressourceEditable;
+        this.moving = false;
+        this.selected = false;
+        this.bgColor = obj.bgColor;
+    }
+    Object.defineProperty(Event.prototype, "startStr", {
+        get: function () {
+            return this.start.toISOString();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Event.prototype, "endStr", {
+        get: function () {
+            return this.end.toISOString();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Event.toTimeSlot = function (obj) {
+        if (obj instanceof Event) {
+            return obj;
+        }
+        else {
+            return new Event(obj);
+        }
+    };
+    return Event;
+}());
+exports.Event = Event;
+exports.default = Event;
+//# sourceMappingURL=Event.js.map

lib/Event.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Event.js","sourceRoot":"","sources":["../src/Event.ts"],"names":[],"mappings":";;;AAaA;IAcI,eAAY,GAAU;QACpB,IAAI,CAAC,EAAE,GAAG,GAAG,CAAC,EAAE,CAAC;QACjB,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC;QACvB,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC;QACnB,IAAI,CAAC,WAAW,GAAG,GAAG,CAAC,WAAW,CAAC;QACnC,IAAI,CAAC,KAAK,GAAG,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,KAAK,KAAI,IAAI,CAAC,EAAE,CAAC;QACnC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QACzB,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;QAChB,IAAI,CAAC,QAAQ,GAAG,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,QAAQ,MAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC;QAClE,IAAI,CAAC,iBAAiB,GAAG,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,iBAAiB,MAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,iBAAiB,CAAC;QAC7F,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,CAAA;IAE5B,CAAC;IACD,sBAAI,2BAAQ;aAAZ;YACI,OAAO,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAA;QACnC,CAAC;;;OAAA;IACD,sBAAI,yBAAM;aAAV;YACI,OAAO,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,CAAA;QACjC,CAAC;;;OAAA;IAEM,gBAAU,GAAjB,UAAkB,GAAU;QACxB,IAAI,GAAG,YAAY,KAAK,EAAC;YACrB,OAAO,GAAG,CAAA;SACb;aAAI;YACD,OAAO,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC;SACzB;IACL,CAAC;IACL,YAAC;AAAD,CAAC,AA3CD,IA2CC;AA3CY,sBAAK;AA6ClB,kBAAe,KAAK,CAAA"}

lib/Ressource.d.ts

@@ -0,0 +1,33 @@
+import Selectable from './utils/selectable';
+export interface IRessource {
+    id: string;
+    title?: string;
+    children?: Array<IRessource>;
+    collapseChildren?: boolean;
+    parent?: IRessource;
+    parentId?: String;
+    height?: number;
+    eventEditable?: boolean;
+    eventRessourceEditable?: boolean;
+    eventBgColor?: string;
+}
+export declare class Ressource implements IRessource, Selectable {
+    id: string;
+    title: string;
+    children: Array<Ressource>;
+    collapseChildren: boolean;
+    parent?: Ressource;
+    height?: number;
+    eventEditable: boolean;
+    eventRessourceEditable: boolean;
+    eventBgColor?: string;
+    selected: boolean;
+    constructor(obj: IRessource);
+    get parentId(): string;
+    get depth(): number;
+    get show(): boolean;
+    childOf(potentialParent: IRessource): boolean;
+    toPlainObject(parent: IRessource | undefined): IRessource;
+    static toRessource(obj: IRessource): Ressource;
+}
+export default Ressource;

lib/Ressource.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Ressource = void 0;
+var Ressource = (function () {
+    function Ressource(obj) {
+        this.id = obj.id;
+        this.title = obj.title || obj.id;
+        if (obj.children) {
+            this.children = obj.children.map(Ressource.toRessource);
+        }
+        else {
+            this.children = [];
+        }
+        this.collapseChildren = (obj === null || obj === void 0 ? void 0 : obj.collapseChildren) === undefined ? false : obj.collapseChildren;
+        this.parent = obj.parent ? Ressource.toRessource(obj.parent) : undefined;
+        this.height = obj.height;
+        this.eventEditable = (obj === null || obj === void 0 ? void 0 : obj.eventEditable) === undefined ? true : obj.eventEditable;
+        this.eventRessourceEditable = (obj === null || obj === void 0 ? void 0 : obj.eventRessourceEditable) === undefined ? true : obj.eventRessourceEditable;
+        this.eventBgColor = obj.eventBgColor;
+        this.selected = false;
+    }
+    Object.defineProperty(Ressource.prototype, "parentId", {
+        get: function () {
+            var _a;
+            return ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.id) || "";
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Ressource.prototype, "depth", {
+        get: function () {
+            return this.parent ? this.parent.depth + 1 : 0;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Ressource.prototype, "show", {
+        get: function () {
+            return this.parent === undefined ? true : (this.parent.show && !this.parent.collapseChildren);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Ressource.prototype.childOf = function (potentialParent) {
+        return this.parent === undefined ? false : (this.parent.id === potentialParent.id || this.parent.childOf(potentialParent));
+    };
+    Ressource.prototype.toPlainObject = function (parent) {
+        var _this = this;
+        return {
+            id: this.id,
+            title: this.title,
+            children: this.children.map(function (o) { return o.toPlainObject(_this); }),
+            parent: parent
+        };
+    };
+    Ressource.toRessource = function (obj) {
+        if (obj instanceof Ressource) {
+            return obj;
+        }
+        else {
+            return new Ressource(obj);
+        }
+    };
+    return Ressource;
+}());
+exports.Ressource = Ressource;
+exports.default = Ressource;
+//# sourceMappingURL=Ressource.js.map

lib/Timeline.d.ts

@@ -0,0 +1,77 @@
+import { Dayjs } from 'dayjs';
+import { Event, IEvent } from './Event';
+import { Ressource, IRessource } from './Ressource';
+import { LitElement, TemplateResult } from 'lit-element';
+interface TimelineOptions {
+    ressources?: Array<IRessource>;
+    items?: Array<IEvent>;
+}
+interface TimelineContent {
+    ressources: Array<Ressource>;
+    items: Array<Event>;
+}
+declare type dayjsUnit = "y" | "M" | "d" | "h" | "m" | 's';
+declare type UnitLegend = {
+    [k in dayjsUnit]: string;
+};
+declare class Timeline extends LitElement {
+    static styles: import("lit-element").CSSResult;
+    private rows;
+    private items;
+    private selectedList;
+    private ressourceWidth;
+    private _start;
+    get start(): string;
+    set start(value: string);
+    private _end;
+    get end(): string;
+    set end(value: string);
+    private _slotDuration;
+    get slotDuration(): number;
+    set slotDuration(value: number);
+    private _legendSpan;
+    get legendSpan(): number;
+    set legendSpan(value: number);
+    private rowHeight;
+    private slotWidth;
+    private rowsTitle;
+    private legendUnitFormat;
+    private legend;
+    constructor(options?: TimelineOptions);
+    set defaultBackground(value: string);
+    get defaultBackground(): string;
+    setLegendUnitFormatAll(legend: Partial<UnitLegend>): void;
+    setLegendUnitFormat(unit: dayjsUnit, format: string): void;
+    addRessources(list: Array<IRessource>): (IRessource | undefined)[];
+    addRessource(ressource: IRessource): IRessource | undefined;
+    removeRessourceById(id: string): TimelineContent;
+    _removeRessourceById(id: string, depth?: number): TimelineContent;
+    getRessources(): Array<Ressource>;
+    getRessourceFromId(id: string): Ressource | null;
+    setRowsTitle(title: string): void;
+    addTimeSlots(list: Array<IEvent>): (Event | null)[];
+    addTimeSlot(slot: IEvent): Event | null;
+    removeTimeslotById(id: string): Array<Event>;
+    updateTimeslotById(id: string): Event | null;
+    private updateTimeslotPosition;
+    getTimeSlots(): Array<Event>;
+    updateLegend(): void;
+    _handleResizeX(e: CustomEvent<number>): void;
+    _grabHeader(e: MouseEvent): void;
+    _getEventResizerHandler(slot: Event, direction: "end" | "start"): (evt: MouseEvent) => void;
+    _getEventGrabHandler(slot: Event, editable: boolean, ressourceEditable: boolean, callback: (e: MouseEvent, wasModified: boolean) => void): (evt: MouseEvent) => void;
+    private _clearSelectedItems;
+    private _clearSelectionhandler;
+    private _getEventClickHandler;
+    firstUpdated(): void;
+    renderTimeslot(slot: Event): TemplateResult;
+    _getCollapseRessourceHandler(item: Ressource): (e: MouseEvent) => void;
+    _onRessourceDragStart(item: Ressource): (event: DragEvent) => void;
+    _onRessourceDragEnter(event: DragEvent): void;
+    _onRessourceDragLeave(event: DragEvent): void;
+    _onRessourceDrop(event: DragEvent): void;
+    renderRessource(item: Ressource): TemplateResult;
+    renderGridRow(columns: Array<Dayjs>, rowId?: number, height?: number): TemplateResult;
+    render(): TemplateResult;
+}
+export default Timeline;

lib/components/horizontal-resizer.d.ts

@@ -0,0 +1,15 @@
+import { LitElement } from 'lit-element';
+export declare class HorizontalResizer extends LitElement {
+    static styles: import("lit-element").CSSResult;
+    private lastPosX;
+    constructor();
+    render(): import("lit-element").TemplateResult;
+    _startResize(e: MouseEvent): void;
+    private _emitMove;
+    private _endResize;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'horizontal-resizer': HorizontalResizer;
+    }
+}

lib/components/horizontal-resizer.js

@@ -0,0 +1,67 @@
+"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 __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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HorizontalResizer = void 0;
+var lit_element_1 = require("lit-element");
+var HorizontalResizer = (function (_super) {
+    __extends(HorizontalResizer, _super);
+    function HorizontalResizer() {
+        var _this = _super.call(this) || this;
+        _this._emitMove = function (e) {
+            var n = e.clientX - _this.lastPosX;
+            _this.lastPosX = e.clientX;
+            var event = new CustomEvent('resize-x', {
+                detail: n,
+                bubbles: true,
+                composed: true
+            });
+            _this.dispatchEvent(event);
+        };
+        _this._endResize = function (e) {
+            _this.lastPosX = -1;
+            window.removeEventListener("mousemove", _this._emitMove);
+            window.removeEventListener("mouseup", _this._endResize);
+        };
+        _this.lastPosX = -1;
+        return _this;
+    }
+    HorizontalResizer.prototype.render = function () {
+        var _this = this;
+        return lit_element_1.html(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      <div @mousedown=", "></div>\n    "], ["\n      <div @mousedown=", "></div>\n    "])), function (e) { return _this._startResize(e); });
+    };
+    HorizontalResizer.prototype._startResize = function (e) {
+        this.lastPosX = e.clientX;
+        window.addEventListener("mousemove", this._emitMove);
+        window.addEventListener("mouseup", this._endResize);
+    };
+    HorizontalResizer.styles = lit_element_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    :host {\n      min-width:4px;\n      background-color:lightgray;\n      cursor:col-resize;\n    }\n    div{\n      width:100%;\n      height:100%;\n    }\n  "], ["\n    :host {\n      min-width:4px;\n      background-color:lightgray;\n      cursor:col-resize;\n    }\n    div{\n      width:100%;\n      height:100%;\n    }\n  "])));
+    HorizontalResizer = __decorate([
+        lit_element_1.customElement('horizontal-resizer')
+    ], HorizontalResizer);
+    return HorizontalResizer;
+}(lit_element_1.LitElement));
+exports.HorizontalResizer = HorizontalResizer;
+var templateObject_1, templateObject_2;
+//# sourceMappingURL=horizontal-resizer.js.map

lib/components/horizontal-resizer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"horizontal-resizer.js","sourceRoot":"","sources":["../../src/components/horizontal-resizer.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA2E;AAG3E;IAAuC,qCAAU;IAa/C;QAAA,YACE,iBAAO,SAER;QAYO,eAAS,GAAG,UAAC,CAAY;YAC/B,IAAM,CAAC,GAAG,CAAC,CAAC,OAAO,GAAG,KAAI,CAAC,QAAQ,CAAC;YACpC,KAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,OAAO,CAAC;YAC1B,IAAI,KAAK,GAAG,IAAI,WAAW,CAAS,UAAU,EAAE;gBAC9C,MAAM,EAAG,CAAC;gBACV,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CAAC;YACH,KAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC5B,CAAC,CAAA;QACO,gBAAU,GAAG,UAAC,CAAY;YAChC,KAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;YACnB,MAAM,CAAC,mBAAmB,CAAC,WAAW,EAAE,KAAI,CAAC,SAAS,CAAC,CAAA;YACvD,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,KAAI,CAAC,UAAU,CAAC,CAAA;QACxD,CAAC,CAAA;QA3BC,KAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAA;;IACpB,CAAC;IAED,kCAAM,GAAN;QAAA,iBAIC;QAHC,OAAO,kBAAI,8GAAA,0BACS,EAAoC,eACvD,KADmB,UAAC,CAAY,IAAG,OAAA,KAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAApB,CAAoB,EACtD;IACJ,CAAC;IACD,wCAAY,GAAZ,UAAa,CAAY;QACvB,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,OAAO,CAAC;QAC1B,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,CAAC,CAAA;QACpD,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,CAAC,CAAA;IACrD,CAAC;IA1BM,wBAAM,GAAG,iBAAG,wOAAA,qKAUlB,KAAC;IAXS,iBAAiB;QAD7B,2BAAa,CAAC,oBAAoB,CAAC;OACvB,iBAAiB,CA6C7B;IAAD,wBAAC;CAAA,AA7CD,CAAuC,wBAAU,GA6ChD;AA7CY,8CAAiB"}

lib/index.d.ts

@@ -0,0 +1 @@
+import './Ressource';

lib/index.js

@@ -0,0 +1,74 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var Ressource_1 = __importDefault(require("./Ressource"));
+require("./Ressource");
+var dayjs_1 = __importDefault(require("dayjs"));
+var emptyTimeline = document.createElement("jc-timeline");
+var title = document.createElement("h2");
+title.innerText = "Empty Timeline";
+document.body.appendChild(title);
+document.body.appendChild(emptyTimeline);
+emptyTimeline.setAttribute("legendSpan", "1");
+emptyTimeline.setAttribute("slotWidth", "40");
+var timeline = document.createElement("jc-timeline");
+var rows = [
+    { id: '1', title: "Ressource 1 DarkSlate", eventBgColor: "DarkSlateBlue" },
+    { id: '3', title: "Ressource 3" },
+    { id: '4', title: "Ressource 4" },
+    { id: '5', title: "Ressource 5" }
+].map(function (i) { return new Ressource_1.default(i); });
+rows[2].parent = rows[1];
+rows[0].parent = rows[1];
+var data = dayjs_1.default().startOf("hour").hour(9);
+var timeslots = [
+    { id: '1', title: "Fixed ressource", ressourceId: '3', start: data.subtract(3, "h").toDate(), end: data.toDate(), ressourceEditable: false, bgColor: "darkgreen" },
+    { id: '2', title: "Fixed time", ressourceId: '3', start: data.toDate(), end: data.endOf("hour").add(1, "h").toDate(), editable: false, bgColor: "FireBrick" },
+    { id: '3', ressourceId: '4', start: data.add(1, "h").toDate(), end: data.endOf("hour").add(2, "h").toDate() },
+    { id: '4', ressourceId: '3', start: data.startOf("day").subtract(1, "h").toDate(), end: dayjs_1.default().endOf("hour").add(1, "h").toDate() }
+];
+for (var i = 5; i < 10; i++) {
+    timeslots.push({
+        id: i.toFixed(0),
+        title: "event " + i,
+        ressourceId: '1',
+        start: data.add(i, 'h').toDate(),
+        end: data.add(i, 'h').endOf("hour").add(1, "h").toDate(),
+    });
+}
+timeline.addRessource(rows[1]);
+timeline.addRessource(rows[0]);
+timeline.addRessource(rows[2]);
+timeline.addRessource(rows[3]);
+timeslots.map(function (o) { return timeline.addTimeSlot(o); });
+timeline.addEventListener("item-selected", function (e) { console.log(e.detail); });
+title = document.createElement("h2");
+title.innerText = "Generic Timeline";
+document.body.appendChild(title);
+document.body.appendChild(timeline);
+var nestedTimeline = document.createElement("jc-timeline");
+title = document.createElement("h2");
+title.innerText = "Multiple level Timeline";
+document.body.appendChild(title);
+document.body.appendChild(nestedTimeline);
+var ressources = Array(8).fill(0).map(function (_, i) { return new Ressource_1.default({ id: "" + i, title: "level " + i }); });
+for (var i = 0; i < ressources.length - 1; i++) {
+    ressources[i + 1].parent = ressources[i];
+}
+ressources.forEach(function (r) { return nestedTimeline.addRessource(r); });
+ressources[0].collapseChildren = true;
+var nItem = 32;
+var timeslots2 = Array(nItem).fill(0).map(function (_, i) {
+    return {
+        id: "" + i,
+        ressourceId: "" + (i % 8),
+        title: "I " + i,
+        start: data.add(i / 2 - 5, 'h').toDate(),
+        end: data.add(i / 2 - 4, 'h').toDate(),
+        bgColor: "hsl(" + Math.round(i / (nItem - 1) * 360) + ", 100%, 50%)"
+    };
+});
+timeslots2.forEach(function (r) { return nestedTimeline.addTimeSlot(r); });
+//# sourceMappingURL=index.js.map

lib/utils/selectable.d.ts

@@ -0,0 +1,4 @@
+export default interface Selectable {
+    selected: boolean;
+    id: string;
+}

lib/utils/selectable.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=selectable.js.map

lib/utils/selectable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectable.js","sourceRoot":"","sources":["../../src/utils/selectable.ts"],"names":[],"mappings":""}

lib/utils/syncroScroll.d.ts

@@ -0,0 +1,3 @@
+declare type scrollingDirection = "v" | "h" | "vh" | "hv";
+export default function syncronizeElementsScrolling(elements: Array<HTMLBaseElement>, direction?: scrollingDirection): void;
+export {};

lib/utils/syncroScroll.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function syncronizeElementsScrolling(elements, direction) {
+    if (direction === void 0) { direction = "vh"; }
+    var activeScroller = null;
+    var bSyncroV = direction.indexOf("v") > -1;
+    var bSyncroH = direction.indexOf("h") > -1;
+    var applyListener = function (element) {
+        element.addEventListener("mouseenter", function (e) {
+            activeScroller = e.target;
+        });
+        element.addEventListener("scroll", function (e) {
+            if (e.target !== activeScroller)
+                return;
+            elements.forEach(function (element) {
+                if (activeScroller === element || activeScroller === null)
+                    return;
+                if (bSyncroV)
+                    element.scrollTop = activeScroller.scrollTop;
+                if (bSyncroH)
+                    element.scrollLeft = activeScroller.scrollLeft;
+            });
+        });
+    };
+    elements.forEach(applyListener);
+}
+exports.default = syncronizeElementsScrolling;
+//# sourceMappingURL=syncroScroll.js.map

lib/utils/syncroScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"syncroScroll.js","sourceRoot":"","sources":["../../src/utils/syncroScroll.ts"],"names":[],"mappings":";;AAEA,SAAwB,2BAA2B,CAAC,QAA+B,EAAE,SAAmC;IAAnC,0BAAA,EAAA,gBAAmC;IACpH,IAAI,cAAc,GAAsB,IAAI,CAAC;IAC7C,IAAM,QAAQ,GAAG,SAAS,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAE;IAC9C,IAAM,QAAQ,GAAG,SAAS,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAE;IAC9C,IAAM,aAAa,GAAG,UAAS,OAAuB;QACpD,OAAO,CAAC,gBAAgB,CAAC,YAAY,EAAE,UAAS,CAAY;YAC1D,cAAc,GAAG,CAAC,CAAC,MAAqB,CAAC;QAC3C,CAAC,CAAC,CAAC;QACH,OAAO,CAAC,gBAAgB,CAAC,QAAQ,EAAE,UAAS,CAAO;YACjD,IAAI,CAAC,CAAC,MAAM,KAAK,cAAc;gBAAE,OAAO;YACxC,QAAQ,CAAC,OAAO,CAAC,UAAS,OAAO;gBAC/B,IAAI,cAAc,KAAK,OAAO,IAAI,cAAc,KAAK,IAAI;oBAAE,OAAO;gBAClE,IAAI,QAAQ;oBAAE,OAAO,CAAC,SAAS,GAAG,cAAc,CAAC,SAAS,CAAC;gBAC3D,IAAI,QAAQ;oBAAE,OAAO,CAAC,UAAU,GAAG,cAAc,CAAC,UAAU,CAAC;YAC/D,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,CAAA;IACD,QAAQ,CAAC,OAAO,CAAC,aAAa,CAAC,CAAA;AACjC,CAAC;AAlBH,8CAkBG"}

package.json

@@ -8,7 +8,8 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "watch": "webpack --watch",
     "prod ": "webpack --config webpack.prod.js",
-    "start": "webpack serve --config webpack.dev.js"
+    "start": "webpack serve --config webpack.dev.js",
+    "export": "tsc && tsc -m es6 --outDir lib-esm"
   },
   "keywords": [
     "typescript",

src/test.html

@@ -1,202 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<style>
- body {
-   background-color:lightgrey;
-   font-family:"Microsoft Sans Serif","Sans Serif";
-   font-size:10.5pt;
- }
- div{
-  box-sizing: border-box;
- }
- .container{
-   position:relative;
-   width:100%;
-   padding-top:141%;
- }
- .A4{
-   position:absolute;
-   top:0px;
-   bottom:0px;
-   background-color:white;
-   padding:40px;
- }
- .v-divider{
-  width:4px;
-  background-color:lightgray;
-  cursor:col-resize;
- }
- .jc-timeline-content,
- .jc-timeline-header{
-   width:100%;
-   position:relative;
-   display: flex;
-   flex-direction:row;
-   height:max-content;
-   align-items: stretch;
- }
- .jc-timeline-grid-title-container{
-  display: table;
- }
- .jc-timeline-grid-title {
-	overflow: hidden;
-  white-space: nowrap;
-  display: table-row;
-  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 > div {
-  display: table-cell;
-  text-align: center;
- }
-.jc-timeline-rows-title,
-.jc-timeline-rows > div,
-.jc-timeline-grid-title >div{
-  padding: 8px;
-}
- .jc-timeline-rows,
- .jc-timeline-rows-title{
-   width: 200px;
- }
-.jc-timeline-grid-title-container,
-.jc-timeline-grid-container{
-  width: 600px;
-  display: block;
-}
-.jc-timeline-grid-title-container{
-  border-collapse: collapse;
-  overflow: hidden;
-}
-.jc-timeline-grid-container{
-  overflow-x: scroll;
-}
-.jc-timeline-grid {
-	display: table;
-	border-collapse: collapse;
-  box-sizing: border-box;
-}
- .jc-timeline-grid > tr > td {
-    height:100%;
-    border: solid 1px grey;
-    box-sizing: border-box;
- }
-</style>
-</head>
-
-<body>
-  <div style="width:50rem;margin:auto;">
-    <div class="container">
-      <div class="A4">
-        <div class="jc-timeline-header" >
-          <div class="jc-timeline-rows-title">Rows</div>
-          <div class="v-divider"></div>
-          <div class="jc-timeline-grid-title-container">
-            <div class="jc-timeline-grid-title">
-            </div>
-          </div>
-        </div>
-        <div class="jc-timeline-content">
-          <div class="jc-timeline-rows">
-          </div>
-          <div class="v-divider"></div>
-          <div class="jc-timeline-grid-container">
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <script>
-    const header = document.getElementsByClassName("jc-timeline-grid-title")[0];
-    const rowsHeader = document.getElementsByClassName("jc-timeline-rows")[0];
-    const nCol = 24;
-    const nRow = 15;
-
-    events = [{start:Date()}]
-
-    // Create grid title
-    for (let i = 0 ; i < nCol;i++){
-      const el = document.createElement("div");
-      el.innerText = "" + (i+1) + "h"; 
-      el.style.setProperty("min-width","40px")
-      header.appendChild(el);
-    }
-    
-    // Create rows
-    for (let j = 0 ; j < nRow;j++){
-      const el = document.createElement("div");
-      el.innerText = "Ressource " + (j+1); 
-      rowsHeader.appendChild(el);
-    }
-
-    // Create grid
-    const gridContainer = document.getElementsByClassName("jc-timeline-grid-container")[0];
-    const grid = document.createElement("table");
-    grid.className = "jc-timeline-grid";
-    for (let j = 0 ; j < nRow;j++){
-      const row = document.createElement("tr");
-      row.style.setProperty("height", rowsHeader.childNodes[j+1].offsetHeight +"px");
-      for (let i = 0 ; i < nCol;i++){
-      const cell = document.createElement("td");
-      cell.style.setProperty("min-width", header.childNodes[i+1].offsetWidth +"px");;
-      row.appendChild(cell);
-    }
-    grid.appendChild(row)
-    }
-    gridContainer.appendChild(grid)
-
-    // Sync scroll;
-    // https://stackoverflow.com/questions/9236314/how-do-i-synchronize-the-scroll-position-of-two-divs 
-    
-    let syncroElements = [gridContainer,document.getElementsByClassName("jc-timeline-grid-title-container")[0]]
-      
-    syncronizeElementsScroling = function (elements, direction = "vh"){
-      let activeScroller = null;
-      const bSyncroV = direction.indexOf("v") > -1 ;
-      const bSyncroH = direction.indexOf("h") > -1 ; 
-      const applyListener = function(element) {
-        element.addEventListener("mouseenter", function(e) {
-          activeScroller = e.target;
-        });
-        element.addEventListener("scroll", function(e) {
-          if (e.target !== activeScroller) return;
-          elements.forEach(function(target) {
-            if (activeScroller === target  || activeScroller === null) return;
-            if (bSyncroV) target.scrollTop = activeScroller.scrollTop;
-            if (bSyncroH) target.scrollLeft = activeScroller.scrollLeft;
-          });
-        });
-      }
-      elements.forEach(applyListener)
-    }
-    syncronizeElementsScroling(syncroElements, "h")
-    syncronizeElementsScroling([gridContainer,rowsHeader], "v")
-    
-    // add grab functionality on header
-    const grabHeader = function(e){
-      let lastPosX = e.clientX;
-      const scroll = function(e){
-        const scrollLeft = (lastPosX - e.clientX)
-        header.parentElement.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)
-      
-    }
-    header.addEventListener("mousedown",grabHeader)
-    
-  </script>
-
-</body>
-
-</html>

tsconfig.json

@@ -4,17 +4,17 @@
 
     /* Basic Options */
     // "incremental": true,                   /* Enable incremental compilation */
-    "target": "es2017",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
-    "module": "es2015",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
+    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
+    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
     "lib": ["es6", "dom", "es2017"],          /* Specify library files to be included in the compilation. */
     // "allowJs": true,                       /* Allow javascript files to be compiled. */
     // "checkJs": true,                       /* Report errors in .js files. */
     // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
-    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
+    "declaration": true,                   /* Generates corresponding '.d.ts' file. */
     // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
     "sourceMap": true,                     /* Generates corresponding '.map' file. */
     // "outFile": "./dist/main.js",                       /* Concatenate and emit output to single file. */
-    "outDir": "./dist/js",                        /* Redirect output structure to the directory. */
+    "outDir": "./lib",                        /* Redirect output structure to the directory. */
     // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
     // "composite": true,                     /* Enable project compilation */
     // "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */