apply prettier 100cw

lib/Event.d.ts

@@ -1,4 +1,4 @@
-import Selectable from './utils/selectable';
+import Selectable from "./utils/selectable";
 export interface IEvent {
     id: string;
     start: Date;

lib/Event.js

@@ -45,7 +45,7 @@ class Event {
             editable: this.editable,
             ressourceEditable: this.ressourceEditable,
             bgColor: this.bgColor,
-            content: this.content
+            content: this.content,
         };
         if (this.bgColor) {
             output.bgColor = this.bgColor;
@@ -82,7 +82,7 @@ class Event {
                     editable: obj.editable,
                     ressourceEditable: obj.ressourceEditable,
                     bgColor: obj.bgColor,
-                    content: obj.content
+                    content: obj.content,
                 };
                 if (obj.bgColor) {
                     iEvent.bgColor = obj.bgColor;

lib/Ressource.d.ts

@@ -1,4 +1,4 @@
-import Selectable from './utils/selectable';
+import Selectable from "./utils/selectable";
 export interface IRessource {
     id: string;
     title?: string;

lib/Ressource.js

@@ -15,10 +15,11 @@ class Ressource {
         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.eventRessourceEditable =
+            (obj === null || obj === void 0 ? void 0 : obj.eventRessourceEditable) === undefined ? true : obj.eventRessourceEditable;
         this.eventBgColor = obj.eventBgColor;
         this.selected = false;
-        this.children.forEach(o => o.parent = this);
+        this.children.forEach((o) => (o.parent = this));
     }
     get parentId() {
         var _a;
@@ -28,17 +29,19 @@ class Ressource {
         return this.parent ? this.parent.depth + 1 : 0;
     }
     get show() {
-        return this.parent === undefined ? true : (this.parent.show && !this.parent.collapseChildren);
+        return this.parent === undefined ? true : this.parent.show && !this.parent.collapseChildren;
     }
     descendantOf(potentialParent) {
-        return this.parent === undefined ? false : (this.parent.id === potentialParent.id || this.parent.descendantOf(potentialParent));
+        return this.parent === undefined
+            ? false
+            : this.parent.id === potentialParent.id || this.parent.descendantOf(potentialParent);
     }
     toPlainObject(parent) {
         return {
             id: this.id,
             title: this.title,
-            children: this.children.map(o => o.toPlainObject(this)),
-            parent: parent
+            children: this.children.map((o) => o.toPlainObject(this)),
+            parent: parent,
         };
     }
     toJSON() {
@@ -50,7 +53,7 @@ class Ressource {
             height: this.height,
             eventEditable: this.eventEditable,
             eventRessourceEditable: this.eventRessourceEditable,
-            eventBgColor: this.eventBgColor
+            eventBgColor: this.eventBgColor,
         };
     }
     static toRessource(obj) {

lib/Timeline.js

@@ -125,8 +125,7 @@ let Timeline = class Timeline extends lit_element_1.LitElement {
         }
         const r = Ressource_1.Ressource.toRessource(ressource);
         if (r.parent !== undefined) {
-            r.parent =
-                (_a = this.getRessourceFromId(r.parent.id)) !== null && _a !== void 0 ? _a : this.addRessource(r.parent);
+            r.parent = (_a = this.getRessourceFromId(r.parent.id)) !== null && _a !== void 0 ? _a : this.addRessource(r.parent);
             const idx = this.rows.indexOf(r.parent);
             if (idx > -1) {
                 this.rows[idx].children.push(r);
@@ -190,7 +189,7 @@ let Timeline = class Timeline extends lit_element_1.LitElement {
             }
             else {
                 ressource[key] = value;
-                this.rows = this.rows.map((r) => r.id == ressource.id ? ressource : r);
+                this.rows = this.rows.map((r) => (r.id == ressource.id ? ressource : r));
             }
             this._updateEventPosition(ressource);
             return ressource;
@@ -218,8 +217,7 @@ let Timeline = class Timeline extends lit_element_1.LitElement {
         const timeslot = Event_1.Event.toTimeSlot(event);
         this.items = [...this.items, timeslot];
         timeslot.isDisplayed =
-            timeslot.end > this._start.toDate() ||
-                timeslot.start < this._end.toDate();
+            timeslot.end > this._start.toDate() || timeslot.start < this._end.toDate();
         this._updateEventPosition(ressource);
         return timeslot;
     }
@@ -270,8 +268,7 @@ let Timeline = class Timeline extends lit_element_1.LitElement {
         }
         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);
+            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) {
@@ -289,9 +286,7 @@ let Timeline = class Timeline extends lit_element_1.LitElement {
         }
         intervals.forEach((intervals) => {
             intervals.slots.sort(sortTimeslots);
-            const usedOffset = intervals.slots
-                .map((o) => o.offset)
-                .filter((i) => i > -1);
+            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) {
@@ -315,8 +310,7 @@ let Timeline = class Timeline extends lit_element_1.LitElement {
             let nextColumn = currentDate.add(legendMinUnitSpan, "m");
             const isLegendPossible = this._end.diff(this._start, legendUnit) > 0 &&
                 (nextColumn.format(format) !== currentDate.format(format) ||
-                    currentDate.add(1, legendUnit).diff(currentDate, "m") >=
-                        legendMinUnitSpan);
+                    currentDate.add(1, legendUnit).diff(currentDate, "m") >= legendMinUnitSpan);
             if (isLegendPossible) {
                 let currentHeader = currentDate.format(format);
                 const row = [];
@@ -382,12 +376,9 @@ let Timeline = class Timeline extends lit_element_1.LitElement {
             const initialDate = slot[direction];
             const resizeListener = (e) => {
                 const newDate = dayjs_1.default(initialDate)
-                    .add(Math.round((e.clientX - startPos) / this.slotWidth) *
-                    this.slotDuration, "m")
+                    .add(Math.round((e.clientX - startPos) / this.slotWidth) * this.slotDuration, "m")
                     .toDate();
-                if (direction === "start"
-                    ? newDate < localSlot.end
-                    : localSlot.start < newDate) {
+                if (direction === "start" ? newDate < localSlot.end : localSlot.start < newDate) {
                     if (localSlot[localDir] !== newDate) {
                         localSlot[localDir] = newDate;
                         this.updateEventById(slot.id);
@@ -428,14 +419,11 @@ let Timeline = class Timeline extends lit_element_1.LitElement {
             const endDates = localSlots.map((slot) => slot.end);
             const updatePosition = editable
                 ? (e) => {
-                    const changeTime = Math.round((e.clientX - startPos) / this.slotWidth) *
-                        this.slotDuration;
+                    const changeTime = Math.round((e.clientX - startPos) / this.slotWidth) * this.slotDuration;
                     return localSlots
                         .map((slot, index) => {
                         const prevStart = slot.start;
-                        slot.start = dayjs_1.default(startDates[index])
-                            .add(changeTime, "m")
-                            .toDate();
+                        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();
                     })
@@ -533,10 +521,7 @@ let Timeline = class Timeline extends lit_element_1.LitElement {
         if (root !== null) {
             const gridContainer = root.querySelector(".jc-timeline-grid-container");
             const simplebar = new simplebar_1.default(gridContainer).getScrollElement();
-            syncroScroll_1.default([
-                simplebar,
-                root.querySelector(".jc-timeline-grid-title-container"),
-            ], "h");
+            syncroScroll_1.default([simplebar, root.querySelector(".jc-timeline-grid-title-container")], "h");
             syncroScroll_1.default([simplebar, root.querySelector(".jc-timeline-rows")], "v");
         }
         if (this.defaultBackground === "") {
@@ -574,19 +559,12 @@ let Timeline = class Timeline extends lit_element_1.LitElement {
         if (!ressource.show) {
             style.height = "";
             style.top = rowTop - 6 + "px";
-            return lit_element_1.html `<div
-        class="jc-timeslot empty"
-        style="${style_map_1.styleMap(style)}"
-      ></div>`;
+            return lit_element_1.html `<div class="jc-timeslot empty" style="${style_map_1.styleMap(style)}"></div>`;
         }
-        let content = lit_element_1.html `<div class="jc-timeslot-title">
-        ${evt.title}
-      </div>
+        let content = lit_element_1.html `<div class="jc-timeslot-title">${evt.title}</div>
       ${evt.content ? unsafe_html_1.unsafeHTML(evt.content) : ""}`;
         const resizer = evt.editable === null ? ressource.eventEditable : evt.editable;
-        const editableRessource = evt.ressourceEditable === null
-            ? ressource.eventRessourceEditable
-            : evt.ressourceEditable;
+        const editableRessource = evt.ressourceEditable === null ? ressource.eventRessourceEditable : evt.ressourceEditable;
         if (resizer) {
             content = lit_element_1.html `<div
           class="jc-timeslot-resizer-start"
@@ -599,9 +577,7 @@ let Timeline = class Timeline extends lit_element_1.LitElement {
         ></div>`;
         }
         return lit_element_1.html `<div
-      class="jc-timeslot ${evt.moving ? "moving" : ""} ${evt.selected
-            ? "selected"
-            : ""}"
+      class="jc-timeslot ${evt.moving ? "moving" : ""} ${evt.selected ? "selected" : ""}"
       start="${evt.start.getHours()}"
       end="${evt.end.getHours()}"
       style="${style_map_1.styleMap(style)}"
@@ -656,8 +632,7 @@ let Timeline = class Timeline extends lit_element_1.LitElement {
                     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].descendantOf(destination)) {
+                        while (idx < this.rows.length && this.rows[idx].descendantOf(destination)) {
                             idx += 1;
                         }
                     }
@@ -685,18 +660,12 @@ let Timeline = class Timeline extends lit_element_1.LitElement {
         @click="${this._getEventClickHandler(item)}"
       >
         <div class="jc-ressource-above"></div>
-        <div
-          class="jc-ressource"
-          draggable="true"
-          @dragstart="${this._onRessourceDragStart(item)}"
-        >
+        <div class="jc-ressource" draggable="true" @dragstart="${this._onRessourceDragStart(item)}">
           ${Array(depth)
             .fill(0)
             .map((_i) => lit_element_1.html `<i class="jc-spacer"></i>`)}${hasChild
             ? lit_element_1.html `<i
-                class="jc-spacer ${item.collapseChildren
-                ? "extend"
-                : "collapse"}"
+                class="jc-spacer ${item.collapseChildren ? "extend" : "collapse"}"
                 @click="${collapseHandler}"
               ></i>`
             : lit_element_1.html `<i class="jc-spacer"></i>`}
@@ -742,16 +711,11 @@ let Timeline = class Timeline extends lit_element_1.LitElement {
         >
           ${this.rowsTitle}
         </div>
-        <horizontal-resizer
-          @resize-x="${this._handleResizeX}"
-        ></horizontal-resizer>
+        <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;"
-          >
+          <table @mousedown="${this._grabHeader}" style="width:${nCol * this.slotWidth}px;">
             <colgroup>
-              ${columns.map((_o) => lit_element_1.html `<col style="min-width:${this.slotWidth}px" />`)}
+              ${columns.map((_) => lit_element_1.html `<col style="min-width:${this.slotWidth}px" />`)}
             </colgroup>
             <tbody>
               ${this.legend.map((arr) => lit_element_1.html `<tr class="jc-timeline-grid-title">
@@ -776,13 +740,11 @@ let Timeline = class Timeline extends lit_element_1.LitElement {
                 <td>No ressource</td>
               </tr>`}
         </table>
-        <horizontal-resizer
-          @resize-x="${this._handleResizeX}"
-        ></horizontal-resizer>
+        <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) => lit_element_1.html `<col style="min-width:${this.slotWidth}px" />`)}
+              ${columns.map((_) => lit_element_1.html `<col style="min-width:${this.slotWidth}px" />`)}
             </colgroup>
 
             <tbody>

lib/components/horizontal-resizer.d.ts

@@ -1,4 +1,4 @@
-import { LitElement, TemplateResult } from 'lit-element';
+import { LitElement, TemplateResult } from "lit-element";
 export declare class HorizontalResizer extends LitElement {
     static styles: import("lit-element").CSSResult;
     private lastPosX;
@@ -10,6 +10,6 @@ export declare class HorizontalResizer extends LitElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'horizontal-resizer': HorizontalResizer;
+        "horizontal-resizer": HorizontalResizer;
     }
 }

lib/components/horizontal-resizer.js

@@ -14,10 +14,10 @@ let HorizontalResizer = class HorizontalResizer extends lit_element_1.LitElement
         this._emitMove = (e) => {
             const n = e.clientX - this.lastPosX;
             this.lastPosX = e.clientX;
-            const event = new CustomEvent('resize-x', {
+            const event = new CustomEvent("resize-x", {
                 detail: n,
                 bubbles: true,
-                composed: true
+                composed: true,
             });
             this.dispatchEvent(event);
         };
@@ -29,9 +29,7 @@ let HorizontalResizer = class HorizontalResizer extends lit_element_1.LitElement
         this.lastPosX = -1;
     }
     render() {
-        return lit_element_1.html `
-      <div @mousedown=${(e) => this._startResize(e)}></div>
-    `;
+        return lit_element_1.html ` <div @mousedown=${(e) => this._startResize(e)}></div> `;
     }
     _startResize(e) {
         this.lastPosX = e.clientX;
@@ -41,17 +39,17 @@ let HorizontalResizer = class HorizontalResizer extends lit_element_1.LitElement
 };
 HorizontalResizer.styles = lit_element_1.css `
     :host {
-      min-width:3px;
-      background-color:lightgray;
-      cursor:col-resize;
+      min-width: 3px;
+      background-color: lightgray;
+      cursor: col-resize;
     }
-    div{
-      width:100%;
-      height:100%;
+    div {
+      width: 100%;
+      height: 100%;
     }
   `;
 HorizontalResizer = __decorate([
-    lit_element_1.customElement('horizontal-resizer')
+    lit_element_1.customElement("horizontal-resizer")
 ], HorizontalResizer);
 exports.HorizontalResizer = HorizontalResizer;
 //# sourceMappingURL=horizontal-resizer.js.map

lib/components/horizontal-resizer.js.map

@@ -1 +1 @@
-{"version":3,"file":"horizontal-resizer.js","sourceRoot":"","sources":["../../src/components/horizontal-resizer.ts"],"names":[],"mappings":";;;;;;;;;AAAA,6CAAiF;AAGjF,IAAa,iBAAiB,GAA9B,MAAa,iBAAkB,SAAQ,wBAAU;IAa/C;QACE,KAAK,EAAE,CAAA;QAcD,cAAS,GAAG,CAAC,CAAY,EAAM,EAAE;YACvC,MAAM,CAAC,GAAG,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC;YACpC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,OAAO,CAAC;YAC1B,MAAM,KAAK,GAAG,IAAI,WAAW,CAAS,UAAU,EAAE;gBAChD,MAAM,EAAG,CAAC;gBACV,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CAAC;YACH,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC5B,CAAC,CAAA;QACO,eAAU,GAAG,GAAO,EAAE;YAC5B,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;YACnB,MAAM,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,CAAC,CAAA;YACvD,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,CAAC,CAAA;QACxD,CAAC,CAAA;QA3BC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAA;IACpB,CAAC;IAED,MAAM;QACJ,OAAO,kBAAI,CAAA;wBACS,CAAC,CAAY,EAAC,EAAE,CAAA,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;KACvD,CAAC;IACJ,CAAC;IACD,YAAY,CAAC,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;CAkBF,CAAA;AA5CQ,wBAAM,GAAG,iBAAG,CAAA;;;;;;;;;;GAUlB,CAAC;AAXS,iBAAiB;IAD7B,2BAAa,CAAC,oBAAoB,CAAC;GACvB,iBAAiB,CA6C7B;AA7CY,8CAAiB"}
+{"version":3,"file":"horizontal-resizer.js","sourceRoot":"","sources":["../../src/components/horizontal-resizer.ts"],"names":[],"mappings":";;;;;;;;;AAAA,6CAAmF;AAGnF,IAAa,iBAAiB,GAA9B,MAAa,iBAAkB,SAAQ,wBAAU;IAa/C;QACE,KAAK,EAAE,CAAC;QAYF,cAAS,GAAG,CAAC,CAAa,EAAQ,EAAE;YAC1C,MAAM,CAAC,GAAG,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC;YACpC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,OAAO,CAAC;YAC1B,MAAM,KAAK,GAAG,IAAI,WAAW,CAAS,UAAU,EAAE;gBAChD,MAAM,EAAE,CAAC;gBACT,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CAAC;YACH,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC5B,CAAC,CAAC;QACM,eAAU,GAAG,GAAS,EAAE;YAC9B,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;YACnB,MAAM,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;YACxD,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QACzD,CAAC,CAAC;QAzBA,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;IACrB,CAAC;IAED,MAAM;QACJ,OAAO,kBAAI,CAAA,oBAAoB,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC;IACnF,CAAC;IACD,YAAY,CAAC,CAAa;QACxB,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,OAAO,CAAC;QAC1B,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QACrD,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;IACtD,CAAC;CAgBF,CAAA;AAxCQ,wBAAM,GAAG,iBAAG,CAAA;;;;;;;;;;GAUlB,CAAC;AAXS,iBAAiB;IAD7B,2BAAa,CAAC,oBAAoB,CAAC;GACvB,iBAAiB,CAyC7B;AAzCY,8CAAiB"}

lib/main.d.ts

@@ -1,3 +1,3 @@
-export * from './Ressource';
-export * from './Event';
-export * from './Timeline';
+export * from "./Ressource";
+export * from "./Event";
+export * from "./Timeline";

lib/stories/Timeline.stories.d.ts

@@ -1,7 +1,7 @@
-import { Story } from '@storybook/web-components';
-import { IEvent } from '../Event';
-import { IRessource } from '../Ressource';
-import { UnitLegend } from '../Timeline';
+import { Story } from "@storybook/web-components";
+import { IEvent } from "../Event";
+import { IRessource } from "../Ressource";
+import { UnitLegend } from "../Timeline";
 declare const _default: {
     title: string;
     component: string;

lib/stories/Timeline.stories.js

@@ -7,16 +7,16 @@ exports.Rainbow = exports.WithEvents = exports.NestedRessource = exports.Week =
 const Ressource_1 = __importDefault(require("../Ressource"));
 const Timeline_1 = __importDefault(require("../Timeline"));
 exports.default = {
-    title: 'Javascript/Timeline',
-    component: 'jc-timeline',
+    title: "Javascript/Timeline",
+    component: "jc-timeline",
     argTypes: {
         start: {
-            control: { type: "date" }
+            control: { type: "date" },
         },
         end: {
-            control: { type: "date" }
-        }
-    }
+            control: { type: "date" },
+        },
+    },
 };
 const Template = (args) => {
     const t = new Timeline_1.default();
@@ -42,7 +42,10 @@ exports.Generic = Template.bind({});
 exports.Generic.args = {
     start: "2021-04-04T22:00:00.000Z",
     end: "2021-04-05T21:59:00.000Z",
-    ressources: [{ id: "1", title: "Ressource 1" }, { id: "2", title: "Ressource 2" }]
+    ressources: [
+        { id: "1", title: "Ressource 1" },
+        { id: "2", title: "Ressource 2" },
+    ],
 };
 exports.Week = Template.bind({});
 exports.Week.args = {
@@ -51,44 +54,88 @@ exports.Week.args = {
     slotduration: 360,
     legendSpan: 4,
     slotWidth: 30,
-    legendFormat: { "d": "MMM D" }
+    legendFormat: { d: "MMM D" },
 };
 exports.NestedRessource = Template.bind({});
 exports.NestedRessource.args = {
     start: "2021-04-05T05:00:00.000Z",
     end: "2021-04-05T17:59:00.000Z",
-    ressources: [{ id: "2", title: "Ressource 2", parent: { id: "1", title: "Ressource 1" } }]
+    ressources: [{ id: "2", title: "Ressource 2", parent: { id: "1", title: "Ressource 1" } }],
 };
 exports.WithEvents = Template.bind({});
 exports.WithEvents.args = {
     start: "2021-04-05T05:00:00.000Z",
     end: "2021-04-05T17:59:00.000Z",
-    ressources: [{ id: "1", title: "Ressource 1" }, { id: "2", title: "Ressource 2" }],
+    ressources: [
+        { id: "1", title: "Ressource 1" },
+        { id: "2", title: "Ressource 2" },
+    ],
     events: [
-        { id: '1', title: "Fixed ressource", ressourceId: '1', start: new Date("2021-04-05T05:00:00.000Z"), end: new Date("2021-04-05T07:59:00.000Z"), ressourceEditable: false, bgColor: "darkgreen" },
-        { id: '2', title: "Fixed time", ressourceId: '1', start: new Date("2021-04-05T09:00:00.000Z"), end: new Date("2021-04-05T10:59:00.000Z"), editable: false, bgColor: "FireBrick" },
-        { id: '3', ressourceId: '2', start: new Date("2021-04-05T10:00:00.000Z"), end: new Date("2021-04-05T11:59:00.000Z") },
-        { id: '4', ressourceId: '2', start: new Date("2021-04-05T11:00:00.000Z"), end: new Date("2021-04-05T12:59:00.000Z") },
-        { id: '5', ressourceId: '2', start: new Date("2021-04-05T12:00:00.000Z"), end: new Date("2021-04-05T13:59:00.000Z"), content: '<div class="bubble">0</div>' }
-    ]
+        {
+            id: "1",
+            title: "Fixed ressource",
+            ressourceId: "1",
+            start: new Date("2021-04-05T05:00:00.000Z"),
+            end: new Date("2021-04-05T07:59:00.000Z"),
+            ressourceEditable: false,
+            bgColor: "darkgreen",
+        },
+        {
+            id: "2",
+            title: "Fixed time",
+            ressourceId: "1",
+            start: new Date("2021-04-05T09:00:00.000Z"),
+            end: new Date("2021-04-05T10:59:00.000Z"),
+            editable: false,
+            bgColor: "FireBrick",
+        },
+        {
+            id: "3",
+            ressourceId: "2",
+            start: new Date("2021-04-05T10:00:00.000Z"),
+            end: new Date("2021-04-05T11:59:00.000Z"),
+        },
+        {
+            id: "4",
+            ressourceId: "2",
+            start: new Date("2021-04-05T11:00:00.000Z"),
+            end: new Date("2021-04-05T12:59:00.000Z"),
+        },
+        {
+            id: "5",
+            ressourceId: "2",
+            start: new Date("2021-04-05T12:00:00.000Z"),
+            end: new Date("2021-04-05T13:59:00.000Z"),
+            content: '<div class="bubble">0</div>',
+        },
+    ],
 };
 const nItem = 25;
-const date = (new Date("2021-04-05T05:00:00.000Z")).valueOf();
+const date = new Date("2021-04-05T05:00:00.000Z").valueOf();
 exports.Rainbow = Template.bind({});
 exports.Rainbow.args = {
     start: "2021-04-05T05:00:00.000Z",
     end: "2021-04-05T17:59:00.000Z",
-    ressources: [Array(8).fill(0).map((_, i) => new Ressource_1.default({ id: "" + i, title: "level " + i }))
-            .reduce((acc, o) => { o.parent = acc; return o; }, undefined)],
-    events: Array(nItem).fill(0).map((_, i) => {
+    ressources: [
+        Array(8)
+            .fill(0)
+            .map((_, i) => new Ressource_1.default({ id: "" + i, title: "level " + i }))
+            .reduce((acc, o) => {
+            o.parent = acc;
+            return o;
+        }, undefined),
+    ],
+    events: Array(nItem)
+        .fill(0)
+        .map((_, i) => {
         return {
             id: "" + i,
             ressourceId: "" + (i % 8),
             title: "Item " + i,
             start: new Date(date + 1800000 * i),
             end: new Date(date + 3600000 + 1800000 * i),
-            bgColor: "hsl(" + Math.round(i / (nItem - 1) * 360) + ", 100%, 50%)"
+            bgColor: "hsl(" + Math.round((i / (nItem - 1)) * 360) + ", 100%, 50%)",
         };
-    })
+    }),
 };
 //# sourceMappingURL=Timeline.stories.js.map

lib/styles/SimplbeBar.styles.js

@@ -2,7 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SimpleBarStyle = void 0;
 const lit_element_1 = require("lit-element");
-exports.SimpleBarStyle = lit_element_1.css `[data-simplebar] {
+exports.SimpleBarStyle = lit_element_1.css `
+  [data-simplebar] {
     position: relative;
     flex-direction: column;
     flex-wrap: wrap;
@@ -10,7 +11,7 @@ exports.SimpleBarStyle = lit_element_1.css `[data-simplebar] {
     align-content: flex-start;
     align-items: flex-start;
   }
-  
+
   .simplebar-wrapper {
     overflow: hidden;
     width: inherit;
@@ -18,7 +19,7 @@ exports.SimpleBarStyle = lit_element_1.css `[data-simplebar] {
     max-width: inherit;
     max-height: inherit;
   }
-  
+
   .simplebar-mask {
     direction: inherit;
     position: absolute;
@@ -33,7 +34,7 @@ exports.SimpleBarStyle = lit_element_1.css `[data-simplebar] {
     height: auto !important;
     z-index: 0;
   }
-  
+
   .simplebar-offset {
     direction: inherit !important;
     box-sizing: inherit !important;
@@ -47,7 +48,7 @@ exports.SimpleBarStyle = lit_element_1.css `[data-simplebar] {
     margin: 0;
     -webkit-overflow-scrolling: touch;
   }
-  
+
   .simplebar-content-wrapper {
     direction: inherit;
     box-sizing: border-box !important;
@@ -60,26 +61,26 @@ exports.SimpleBarStyle = lit_element_1.css `[data-simplebar] {
     scrollbar-width: none;
     -ms-overflow-style: none;
   }
-  
+
   .simplebar-content-wrapper::-webkit-scrollbar,
   .simplebar-hide-scrollbar::-webkit-scrollbar {
     width: 0;
     height: 0;
   }
-  
+
   .simplebar-content:before,
   .simplebar-content:after {
-    content: ' ';
+    content: " ";
     display: table;
   }
-  
+
   .simplebar-placeholder {
     max-height: 100%;
     max-width: 100%;
     width: 100%;
     pointer-events: none;
   }
-  
+
   .simplebar-height-auto-observer-wrapper {
     box-sizing: inherit !important;
     height: 100%;
@@ -97,7 +98,7 @@ exports.SimpleBarStyle = lit_element_1.css `[data-simplebar] {
     flex-shrink: 0;
     flex-basis: 0;
   }
-  
+
   .simplebar-height-auto-observer {
     box-sizing: inherit;
     display: block;
@@ -113,7 +114,7 @@ exports.SimpleBarStyle = lit_element_1.css `[data-simplebar] {
     pointer-events: none;
     z-index: -1;
   }
-  
+
   .simplebar-track {
     z-index: 1;
     position: absolute;
@@ -122,27 +123,27 @@ exports.SimpleBarStyle = lit_element_1.css `[data-simplebar] {
     pointer-events: none;
     overflow: hidden;
   }
-  
+
   [data-simplebar].simplebar-dragging .simplebar-content {
     pointer-events: none;
     user-select: none;
     -webkit-user-select: none;
   }
-  
+
   [data-simplebar].simplebar-dragging .simplebar-track {
     pointer-events: all;
   }
-  
+
   .simplebar-scrollbar {
     position: absolute;
     left: 0;
     right: 0;
     min-height: 10px;
   }
-  
+
   .simplebar-scrollbar:before {
     position: absolute;
-    content: '';
+    content: "";
     background: black;
     border-radius: 7px;
     left: 2px;
@@ -150,34 +151,34 @@ exports.SimpleBarStyle = lit_element_1.css `[data-simplebar] {
     opacity: 0;
     transition: opacity 0.2s linear;
   }
-  
+
   .simplebar-scrollbar.simplebar-visible:before {
     /* When hovered, remove all transitions from drag handle */
     opacity: 0.5;
     transition: opacity 0s linear;
   }
-  
+
   .simplebar-track.simplebar-vertical {
     top: 0;
     width: 11px;
   }
-  
+
   .simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
     top: 2px;
     bottom: 2px;
   }
-  
+
   .simplebar-track.simplebar-horizontal {
     left: 0;
     height: 11px;
   }
-  
+
   .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before {
     height: 100%;
     left: 2px;
     right: 2px;
   }
-  
+
   .simplebar-track.simplebar-horizontal .simplebar-scrollbar {
     right: auto;
     left: 0;
@@ -187,13 +188,13 @@ exports.SimpleBarStyle = lit_element_1.css `[data-simplebar] {
     min-width: 10px;
     width: auto;
   }
-  
+
   /* Rtl support */
-  [data-simplebar-direction='rtl'] .simplebar-track.simplebar-vertical {
+  [data-simplebar-direction="rtl"] .simplebar-track.simplebar-vertical {
     right: auto;
     left: 0;
   }
-  
+
   .hs-dummy-scrollbar-size {
     direction: rtl;
     position: fixed;
@@ -204,7 +205,7 @@ exports.SimpleBarStyle = lit_element_1.css `[data-simplebar] {
     overflow-y: hidden;
     overflow-x: scroll;
   }
-  
+
   .simplebar-hide-scrollbar {
     position: fixed;
     left: 0;
@@ -212,5 +213,6 @@ exports.SimpleBarStyle = lit_element_1.css `[data-simplebar] {
     overflow-y: scroll;
     scrollbar-width: none;
     -ms-overflow-style: none;
-  }`;
+  }
+`;
 //# sourceMappingURL=SimplbeBar.styles.js.map

lib/styles/SimplbeBar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"SimplbeBar.styles.js","sourceRoot":"","sources":["../../src/styles/SimplbeBar.styles.ts"],"names":[],"mappings":";;;AAAA,6CAA6C;AAEhC,QAAA,cAAc,GAAa,iBAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAkNvC,CAAA"}
+{"version":3,"file":"SimplbeBar.styles.js","sourceRoot":"","sources":["../../src/styles/SimplbeBar.styles.ts"],"names":[],"mappings":";;;AAAA,6CAA6C;AAEhC,QAAA,cAAc,GAAc,iBAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoN3C,CAAC"}

lib/styles/Timeline.style.js

@@ -4,8 +4,8 @@ exports.TimelineStyle = void 0;
 const lit_element_1 = require("lit-element");
 exports.TimelineStyle = lit_element_1.css `
   * {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
-      Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
+      "Open Sans", "Helvetica Neue", sans-serif;
     font-size: 16px;
     font-weight: 400;
   }

lib/utils/syncroScroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"syncroScroll.js","sourceRoot":"","sources":["../../src/utils/syncroScroll.ts"],"names":[],"mappings":";;AAEA,SAAwB,2BAA2B,CAAC,QAA+B,EAAE,YAA+B,IAAI;IACpH,IAAI,cAAc,GAAsB,IAAI,CAAC;IAC7C,MAAM,QAAQ,GAAG,SAAS,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAE;IAC9C,MAAM,QAAQ,GAAG,SAAS,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAE;IAC9C,MAAM,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"}
+{"version":3,"file":"syncroScroll.js","sourceRoot":"","sources":["../../src/utils/syncroScroll.ts"],"names":[],"mappings":";;AAEA,SAAwB,2BAA2B,CACjD,QAAgC,EAChC,YAAgC,IAAI;IAEpC,IAAI,cAAc,GAAuB,IAAI,CAAC;IAC9C,MAAM,QAAQ,GAAG,SAAS,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;IAC7C,MAAM,QAAQ,GAAG,SAAS,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;IAC7C,MAAM,aAAa,GAAG,UAAU,OAAwB;QACtD,OAAO,CAAC,gBAAgB,CAAC,YAAY,EAAE,UAAU,CAAa;YAC5D,cAAc,GAAG,CAAC,CAAC,MAAqB,CAAC;QAC3C,CAAC,CAAC,CAAC;QACH,OAAO,CAAC,gBAAgB,CAAC,QAAQ,EAAE,UAAU,CAAQ;YACnD,IAAI,CAAC,CAAC,MAAM,KAAK,cAAc;gBAAE,OAAO;YACxC,QAAQ,CAAC,OAAO,CAAC,UAAU,OAAO;gBAChC,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,CAAC;IACF,QAAQ,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;AAClC,CAAC;AArBD,8CAqBC"}

src/Event.ts

@@ -1,124 +1,122 @@
+import dayjs from "dayjs";
+import Selectable from "./utils/selectable";
 
-import dayjs from 'dayjs';
-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,
-    content?:string
-}
-export type EventJSON = Omit<IEvent,"end" |"start"> & {
-    start:string
-    end: string
+export interface IEvent {
+  id: string;
+  start: Date;
+  end: Date;
+  ressourceId: string;
+  title?: string;
+  editable?: boolean | null;
+  ressourceEditable?: boolean | null;
+  bgColor?: string;
+  content?: string;
 }
-export 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
-    content?:string
+export type EventJSON = Omit<IEvent, "end" | "start"> & {
+  start: string;
+  end: string;
+};
+export 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;
+  content?: string;
+
+  constructor(obj: IEvent) {
+    this.id = obj.id;
+    this.start = obj.start;
+    this.end = obj.end;
+    this.ressourceId = obj.ressourceId;
+    this.title = obj?.title || this.id;
+    this.isDisplayed = false;
+    this.offset = 0;
+    this.editable = obj?.editable === undefined ? null : obj.editable;
+    this.ressourceEditable = obj?.ressourceEditable === undefined ? null : obj.ressourceEditable;
+    this.moving = false;
+    this.selected = false;
+    this.bgColor = obj.bgColor;
+    this.content = obj.content;
+  }
+  get startStr(): string {
+    return this.start.toISOString();
+  }
+  get endStr(): string {
+    return this.end.toISOString();
+  }
 
-    constructor(obj:IEvent){
-      this.id = obj.id;
-      this.start = obj.start;
-      this.end = obj.end;
-      this.ressourceId = obj.ressourceId;
-      this.title = obj?.title || this.id;
-      this.isDisplayed = false;
-      this.offset = 0;
-      this.editable = obj?.editable === undefined ? null : obj.editable;
-      this.ressourceEditable = obj?.ressourceEditable === undefined ? null : obj.ressourceEditable;
-      this.moving = false;
-      this.selected = false;
-      this.bgColor = obj.bgColor;
-      this.content = obj.content;
-      
+  static toTimeSlot(obj: IEvent): Event {
+    if (obj instanceof Event) {
+      return obj;
+    } else {
+      return new Event(obj);
     }
-    get startStr():string{
-        return this.start.toISOString()
+  }
+  toJSON(): EventJSON {
+    const output: EventJSON = {
+      id: this.id,
+      start: this.startStr,
+      end: this.endStr,
+      title: this.title,
+      ressourceId: this.ressourceId,
+      editable: this.editable,
+      ressourceEditable: this.ressourceEditable,
+      bgColor: this.bgColor,
+      content: this.content,
+    };
+    if (this.bgColor) {
+      output.bgColor = this.bgColor;
     }
-    get endStr():string{
-        return this.end.toISOString()
+    if (this.content) {
+      output.content = this.content;
     }
-
-    static toTimeSlot(obj:IEvent):Event{
-        if (obj instanceof Event){
-            return obj 
-        }else{
-            return new Event(obj);
-        }
+    return output;
+  }
+  static fromJSON(input: string | EventJSON): Event {
+    let obj: EventJSON;
+    if (typeof input == "string") {
+      obj = JSON.parse(input);
+    } else {
+      obj = input as EventJSON;
     }
-    toJSON():EventJSON{
-        const output:EventJSON =  {
-            id:this.id,
-            start:this.startStr,
-            end:this.endStr,
-            title:this.title,
-            ressourceId:this.ressourceId,
-            editable:this.editable,
-            ressourceEditable:this.ressourceEditable,
-            bgColor:this.bgColor,
-            content:this.content
-        }
-        if (this.bgColor){
-            output.bgColor=this.bgColor;
-        }
-        if (this.content){
-            output.content=this.content;
-        }
-        return output
-    }
-    static fromJSON(input:string|EventJSON):Event{
-        let obj:EventJSON
-        if (typeof input == "string"){ 
-            obj = JSON.parse(input)
-        }else{
-            obj = input as EventJSON
-        }
 
-        const start = dayjs(obj.start)
-        const end = dayjs(obj.end)
-        if(!start.isValid()){
-            throw new Error(`Error during the import of the Event '${obj.id}': Invalid starting date`)
-        }else{
-        if(!end.isValid()){
-            throw new Error(`Error during the import of the Event '${obj.id}': Invalid ending date`)
-        }else{
-            
-        const iEvent:IEvent ={
-            id:obj.id,
-            start:start.toDate(),
-            end:end.toDate(),
-            title:obj.title,
-            ressourceId:obj.ressourceId,
-            editable:obj.editable,
-            ressourceEditable:obj.ressourceEditable,
-            bgColor:obj.bgColor,
-            content:obj.content
-        }
-        if (obj.bgColor){
-            iEvent.bgColor=obj.bgColor;
+    const start = dayjs(obj.start);
+    const end = dayjs(obj.end);
+    if (!start.isValid()) {
+      throw new Error(`Error during the import of the Event '${obj.id}': Invalid starting date`);
+    } else {
+      if (!end.isValid()) {
+        throw new Error(`Error during the import of the Event '${obj.id}': Invalid ending date`);
+      } else {
+        const iEvent: IEvent = {
+          id: obj.id,
+          start: start.toDate(),
+          end: end.toDate(),
+          title: obj.title,
+          ressourceId: obj.ressourceId,
+          editable: obj.editable,
+          ressourceEditable: obj.ressourceEditable,
+          bgColor: obj.bgColor,
+          content: obj.content,
+        };
+        if (obj.bgColor) {
+          iEvent.bgColor = obj.bgColor;
         }
-        if (obj.content){
-            iEvent.content=obj.content;
+        if (obj.content) {
+          iEvent.content = obj.content;
         }
-        return new Event(iEvent)
+        return new Event(iEvent);
+      }
     }
-    }}
+  }
 }
 
-export default Event
+export default Event;

src/Ressource.ts

@@ -1,88 +1,91 @@
-import Selectable from './utils/selectable';
+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 interface IRessource {
+  id: string;
+  title?: string;
+  children?: Array<IRessource>;
+  collapseChildren?: boolean;
+  parent?: IRessource;
+  parentId?: string;
+  height?: number;
+  eventEditable?: boolean;
+  eventRessourceEditable?: boolean;
+  eventBgColor?: string;
 }
 
-export type RessourceJSON = Omit<IRessource,"parent" | "children">
+export type RessourceJSON = Omit<IRessource, "parent" | "children">;
 
-export 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
+export 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){
-        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.collapseChildren ? obj.collapseChildren : false; 
-        this.parent = obj.parent ? Ressource.toRessource(obj.parent) : undefined;
-        this.height = obj.height;
-        this.eventEditable = obj?.eventEditable === undefined ? true : obj.eventEditable;
-        this.eventRessourceEditable = obj?.eventRessourceEditable === undefined ? true : obj.eventRessourceEditable;
-        this.eventBgColor = obj.eventBgColor;
-        this.selected = false;
-        this.children.forEach(o=>o.parent = this)
+  constructor(obj: IRessource) {
+    this.id = obj.id;
+    this.title = obj.title || obj.id;
+    if (obj.children) {
+      this.children = obj.children.map(Ressource.toRessource);
+    } else {
+      this.children = [];
     }
-    get parentId():string{
-        return this.parent?.id || ""
-    }
-    get depth():number{
-        return this.parent ? this.parent.depth + 1 : 0;
-    }
-    get show():boolean{
-        return this.parent === undefined ? true : (this.parent.show && ! this.parent.collapseChildren);
-    }
-    descendantOf(potentialParent:IRessource):boolean{
-        return this.parent === undefined ? false : (this.parent.id === potentialParent.id || this.parent.descendantOf(potentialParent)); 
-    }
-    toPlainObject(parent:IRessource | undefined):IRessource{
-        return {
-            id:this.id,
-            title:this.title,
-            children:this.children.map(o=>o.toPlainObject(this)),
-            parent: parent
-        }
-    }
-    toJSON():RessourceJSON{
-        return {
-            id:this.id,
-            title:this.title,
-            collapseChildren:this.collapseChildren,
-            parentId : this.parentId,
-            height : this.height,
-            eventEditable:this.eventEditable,
-            eventRessourceEditable:this.eventRessourceEditable,
-            eventBgColor:this.eventBgColor
-        }
-    }
-    static toRessource(obj:IRessource):Ressource{
-        if (obj instanceof Ressource){
-            return obj 
-        }else{
-            return new Ressource(obj);
-        }
+    this.collapseChildren = obj.collapseChildren ? obj.collapseChildren : false;
+    this.parent = obj.parent ? Ressource.toRessource(obj.parent) : undefined;
+    this.height = obj.height;
+    this.eventEditable = obj?.eventEditable === undefined ? true : obj.eventEditable;
+    this.eventRessourceEditable =
+      obj?.eventRessourceEditable === undefined ? true : obj.eventRessourceEditable;
+    this.eventBgColor = obj.eventBgColor;
+    this.selected = false;
+    this.children.forEach((o) => (o.parent = this));
+  }
+  get parentId(): string {
+    return this.parent?.id || "";
+  }
+  get depth(): number {
+    return this.parent ? this.parent.depth + 1 : 0;
+  }
+  get show(): boolean {
+    return this.parent === undefined ? true : this.parent.show && !this.parent.collapseChildren;
+  }
+  descendantOf(potentialParent: IRessource): boolean {
+    return this.parent === undefined
+      ? false
+      : this.parent.id === potentialParent.id || this.parent.descendantOf(potentialParent);
+  }
+  toPlainObject(parent: IRessource | undefined): IRessource {
+    return {
+      id: this.id,
+      title: this.title,
+      children: this.children.map((o) => o.toPlainObject(this)),
+      parent: parent,
+    };
+  }
+  toJSON(): RessourceJSON {
+    return {
+      id: this.id,
+      title: this.title,
+      collapseChildren: this.collapseChildren,
+      parentId: this.parentId,
+      height: this.height,
+      eventEditable: this.eventEditable,
+      eventRessourceEditable: this.eventRessourceEditable,
+      eventBgColor: this.eventBgColor,
+    };
+  }
+  static toRessource(obj: IRessource): Ressource {
+    if (obj instanceof Ressource) {
+      return obj;
+    } else {
+      return new Ressource(obj);
     }
+  }
 }
 
-export default Ressource
+export default Ressource;

src/Timeline.ts

@@ -191,8 +191,7 @@ class Timeline extends LitElement {
     const r = Ressource.toRessource(ressource);
 
     if (r.parent !== undefined) {
-      r.parent =
-        this.getRessourceFromId(r.parent.id) ?? this.addRessource(r.parent);
+      r.parent = this.getRessourceFromId(r.parent.id) ?? this.addRessource(r.parent);
       const idx = this.rows.indexOf(r.parent as Ressource);
       if (idx > -1) {
         this.rows[idx].children.push(r);
@@ -221,16 +220,11 @@ class Timeline extends LitElement {
         output.ressources.push(ressource);
         // remove the top level children from it's parent.
         if (ressource.parent && depth === 0) {
-          ressource.parent.children = ressource.parent.children.filter(
-            (o) => o.id !== id
-          );
+          ressource.parent.children = ressource.parent.children.filter((o) => o.id !== id);
         }
         this.rows.splice(i, 1);
       } else if (ressource.parentId === id) {
-        const partialOutput = this._removeRessourceById(
-          ressource.id,
-          depth + 1
-        );
+        const partialOutput = this._removeRessourceById(ressource.id, depth + 1);
         output.ressources.push(...partialOutput.ressources);
         output.items.push(...partialOutput.items);
       } else {
@@ -266,9 +260,7 @@ class Timeline extends LitElement {
         this.addEvents(content.items);
       } else {
         ressource[key] = value;
-        this.rows = this.rows.map((r) =>
-          r.id == ressource.id ? ressource : r
-        );
+        this.rows = this.rows.map((r) => (r.id == ressource.id ? ressource : r));
       }
       this._updateEventPosition(ressource);
       return ressource;
@@ -304,8 +296,7 @@ class Timeline extends LitElement {
     this.items = [...this.items, timeslot];
     // Update timeslot status
     timeslot.isDisplayed =
-      timeslot.end > this._start.toDate() ||
-      timeslot.start < this._end.toDate();
+      timeslot.end > this._start.toDate() || timeslot.start < this._end.toDate();
     this._updateEventPosition(ressource);
     return timeslot;
   }
@@ -354,19 +345,14 @@ class Timeline extends LitElement {
         start: points[i],
         end: points[i + 1],
         slots: timeslots.filter(
-          (slot) =>
-            slot.start.getTime() <= startTime && endTime <= slot.end.getTime()
+          (slot) => slot.start.getTime() <= startTime && endTime <= slot.end.getTime()
         ),
       });
     }
     // Update rows height
-    const lineCount = intervals.reduce(
-      (acc, interval) => Math.max(acc, interval.slots.length),
-      0
-    );
+    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); // to avoid collapse rows
+      this.rowHeight * Math.max(lineCount, 1) + (ressource.collapseChildren ? 5 : 0); // to avoid collapse rows
     // Solve the offset positioning of all items
     const sortTimeslots = (a: Event, b: Event): number => {
       const t = a.start.getTime() - b.start.getTime();
@@ -386,12 +372,8 @@ class Timeline extends LitElement {
     }
     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)
-      );
+      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;
@@ -421,8 +403,7 @@ class Timeline extends LitElement {
         // Starting & Ending date have different legend
         (nextColumn.format(format) !== currentDate.format(format) ||
           // OR 2 consecutive legends can accomodate at least 1 grid cell
-          currentDate.add(1, legendUnit).diff(currentDate, "m") >=
-            legendMinUnitSpan);
+          currentDate.add(1, legendUnit).diff(currentDate, "m") >= legendMinUnitSpan);
 
       if (isLegendPossible) {
         let currentHeader = currentDate.format(format);
@@ -463,9 +444,7 @@ class Timeline extends LitElement {
   private _grabHeader(e: MouseEvent): void {
     const root = this.shadowRoot;
     if (root !== null) {
-      const gridContainer = root.querySelector(
-        ".jc-timeline-grid-container"
-      ) as HTMLBaseElement;
+      const gridContainer = root.querySelector(".jc-timeline-grid-container") as HTMLBaseElement;
       const headerContainer = root.querySelector(
         ".jc-timeline-grid-title-container"
       ) as HTMLBaseElement;
@@ -494,17 +473,9 @@ class Timeline extends LitElement {
       const initialDate = slot[direction];
       const resizeListener = (e: MouseEvent) => {
         const newDate = dayjs(initialDate)
-          .add(
-            Math.round((e.clientX - startPos) / this.slotWidth) *
-              this.slotDuration,
-            "m"
-          )
+          .add(Math.round((e.clientX - startPos) / this.slotWidth) * this.slotDuration, "m")
           .toDate();
-        if (
-          direction === "start"
-            ? newDate < localSlot.end
-            : localSlot.start < newDate
-        ) {
+        if (direction === "start" ? newDate < localSlot.end : localSlot.start < newDate) {
           if (localSlot[localDir] !== newDate) {
             localSlot[localDir] = newDate;
             this.updateEventById(slot.id);
@@ -556,14 +527,11 @@ class Timeline extends LitElement {
       const updatePosition = editable
         ? (e: MouseEvent) => {
             const changeTime =
-              Math.round((e.clientX - startPos) / this.slotWidth) *
-              this.slotDuration;
+              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.start = dayjs(startDates[index]).add(changeTime, "m").toDate();
                 slot.end = dayjs(endDates[index]).add(changeTime, "m").toDate();
                 return prevStart.getTime() !== slot.start.getTime();
               })
@@ -582,9 +550,7 @@ class Timeline extends LitElement {
             if (rowId) {
               const ressourceId = this.rows[Number(rowId)].id;
               if (ressourceId !== localSlot.ressourceId) {
-                const oldRessource = this.getRessourceFromId(
-                  localSlot.ressourceId
-                ) as Ressource;
+                const oldRessource = this.getRessourceFromId(localSlot.ressourceId) as Ressource;
                 localSlot.ressourceId = ressourceId;
                 this._updateEventPosition(oldRessource);
                 return true;
@@ -669,19 +635,10 @@ class Timeline extends LitElement {
   firstUpdated(): void {
     const root = this.shadowRoot;
     if (root !== null) {
-      const gridContainer = root.querySelector(
-        ".jc-timeline-grid-container"
-      ) as HTMLBaseElement;
-      const simplebar = new SimpleBar(
-        gridContainer
-      ).getScrollElement() as HTMLBaseElement;
+      const gridContainer = root.querySelector(".jc-timeline-grid-container") as HTMLBaseElement;
+      const simplebar = new SimpleBar(gridContainer).getScrollElement() as HTMLBaseElement;
       syncronizeElementsScrolling(
-        [
-          simplebar,
-          root.querySelector(
-            ".jc-timeline-grid-title-container"
-          ) as HTMLBaseElement,
-        ],
+        [simplebar, root.querySelector(".jc-timeline-grid-title-container") as HTMLBaseElement],
         "h"
       );
       syncronizeElementsScrolling(
@@ -701,11 +658,7 @@ class Timeline extends LitElement {
     let rowTop = 0;
     let ressource: Ressource;
     let i: number;
-    for (
-      i = 0;
-      i < this.rows.length && this.rows[i].id !== evt.ressourceId;
-      i++
-    ) {
+    for (i = 0; i < this.rows.length && this.rows[i].id !== evt.ressourceId; i++) {
       ressource = this.rows[i];
       if (ressource.show) {
         rowTop += ressource.height ? ressource.height : this.rowHeight;
@@ -731,22 +684,14 @@ class Timeline extends LitElement {
     if (!ressource.show) {
       style.height = "";
       style.top = rowTop - 6 + "px";
-      return html`<div
-        class="jc-timeslot empty"
-        style="${styleMap(style)}"
-      ></div>`;
+      return html`<div class="jc-timeslot empty" style="${styleMap(style)}"></div>`;
     }
 
-    let content: TemplateResult = html`<div class="jc-timeslot-title">
-        ${evt.title}
-      </div>
+    let content: TemplateResult = html`<div class="jc-timeslot-title">${evt.title}</div>
       ${evt.content ? unsafeHTML(evt.content) : ""}`;
-    const resizer =
-      evt.editable === null ? ressource.eventEditable : evt.editable;
+    const resizer = evt.editable === null ? ressource.eventEditable : evt.editable;
     const editableRessource =
-      evt.ressourceEditable === null
-        ? ressource.eventRessourceEditable
-        : evt.ressourceEditable;
+      evt.ressourceEditable === null ? ressource.eventRessourceEditable : evt.ressourceEditable;
     if (resizer) {
       content = html`<div
           class="jc-timeslot-resizer-start"
@@ -759,9 +704,7 @@ class Timeline extends LitElement {
         ></div>`;
     }
     return html`<div
-      class="jc-timeslot ${evt.moving ? "moving" : ""} ${evt.selected
-        ? "selected"
-        : ""}"
+      class="jc-timeslot ${evt.moving ? "moving" : ""} ${evt.selected ? "selected" : ""}"
       start="${evt.start.getHours()}"
       end="${evt.end.getHours()}"
       style="${styleMap(style)}"
@@ -775,9 +718,7 @@ class Timeline extends LitElement {
       ${content}
     </div>`;
   }
-  private _getCollapseRessourceHandler(
-    item: Ressource
-  ): (e: MouseEvent) => void {
+  private _getCollapseRessourceHandler(item: Ressource): (e: MouseEvent) => void {
     return (_e: MouseEvent) => {
       item.collapseChildren = !item.collapseChildren;
       this._updateEventPosition(item);
@@ -806,9 +747,7 @@ class Timeline extends LitElement {
     if (event.target instanceof HTMLElement) {
       event.target.classList.remove("target");
       const srcId = event.dataTransfer?.getData("text");
-      const destinationId = event.target.parentElement?.getAttribute(
-        "ressourceId"
-      );
+      const destinationId = event.target.parentElement?.getAttribute("ressourceId");
       if (srcId && destinationId && destinationId !== srcId) {
         // Check if destination is not child of parent
         const src = this.getRessourceFromId(srcId) as Ressource;
@@ -827,10 +766,7 @@ class Timeline extends LitElement {
           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].descendantOf(destination)
-            ) {
+            while (idx < this.rows.length && this.rows[idx].descendantOf(destination)) {
               idx += 1;
             }
           }
@@ -850,8 +786,7 @@ class Timeline extends LitElement {
   }
   renderRessource(item: Ressource): TemplateResult {
     const depth = item.depth;
-    const style =
-      `--depth:${depth};` + (item.height ? `height:${item.height}px;` : "");
+    const style = `--depth:${depth};` + (item.height ? `height:${item.height}px;` : "");
     const hasChild = item.children.length > 0;
     const collapseHandler = this._getCollapseRessourceHandler(item);
     return html`<tr>
@@ -862,18 +797,12 @@ class Timeline extends LitElement {
         @click="${this._getEventClickHandler(item)}"
       >
         <div class="jc-ressource-above"></div>
-        <div
-          class="jc-ressource"
-          draggable="true"
-          @dragstart="${this._onRessourceDragStart(item)}"
-        >
+        <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"}"
+                class="jc-spacer ${item.collapseChildren ? "extend" : "collapse"}"
                 @click="${collapseHandler}"
               ></i>`
             : html`<i class="jc-spacer"></i>`}
@@ -883,11 +812,7 @@ class Timeline extends LitElement {
       </td>
     </tr>`;
   }
-  private renderGridRow(
-    columns: Array<Dayjs>,
-    rowId = -1,
-    height = 30
-  ): TemplateResult {
+  private renderGridRow(columns: Array<Dayjs>, rowId = -1, height = 30): TemplateResult {
     return html`<tr row-id="${rowId}">
       ${columns.map(
         (d, i) =>
@@ -902,8 +827,7 @@ class Timeline extends LitElement {
     </tr>`;
   }
   render(): TemplateResult {
-    const nCol =
-      Math.floor(this._end.diff(this._start, "m") / this.slotDuration) + 1;
+    const nCol = Math.floor(this._end.diff(this._start, "m") / this.slotDuration) + 1;
     const columns: Array<Dayjs> = [];
     for (let i = 0; i < nCol; i++) {
       columns.push(this._start.add(this.slotDuration * i, "m"));
@@ -927,26 +851,17 @@ class Timeline extends LitElement {
         >
           ${this.rowsTitle}
         </div>
-        <horizontal-resizer
-          @resize-x="${this._handleResizeX}"
-        ></horizontal-resizer>
+        <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;"
-          >
+          <table @mousedown="${this._grabHeader}" style="width:${nCol * this.slotWidth}px;">
             <colgroup>
-              ${columns.map(
-                (_o) => html`<col style="min-width:${this.slotWidth}px" />`
-              )}
+              ${columns.map((_) => 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}"><div>${o.title}</div></th>`
-                    )}
+                    ${arr.map((o) => html`<th colspan="${o.colspan}"><div>${o.title}</div></th>`)}
                   </tr>`
               )}
             </tbody>
@@ -968,22 +883,16 @@ class Timeline extends LitElement {
                 <td>No ressource</td>
               </tr>`}
         </table>
-        <horizontal-resizer
-          @resize-x="${this._handleResizeX}"
-        ></horizontal-resizer>
+        <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" />`
-              )}
+              ${columns.map((_) => 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)
-                  )
+                ? displayedRows.map((o) => this.renderGridRow(columns, o.i, o.r.height))
                 : this.renderGridRow(columns)}
             </tbody>
           </table>

src/components/horizontal-resizer.ts

@@ -1,55 +1,51 @@
-import {LitElement, html, customElement, css, TemplateResult} from 'lit-element';
+import { LitElement, html, customElement, css, TemplateResult } from "lit-element";
 
-@customElement('horizontal-resizer')
+@customElement("horizontal-resizer")
 export class HorizontalResizer extends LitElement {
   static styles = css`
     :host {
-      min-width:3px;
-      background-color:lightgray;
-      cursor:col-resize;
+      min-width: 3px;
+      background-color: lightgray;
+      cursor: col-resize;
     }
-    div{
-      width:100%;
-      height:100%;
+    div {
+      width: 100%;
+      height: 100%;
     }
   `;
-  private lastPosX: number
-  constructor(){
-    super()
-    this.lastPosX = -1
+  private lastPosX: number;
+  constructor() {
+    super();
+    this.lastPosX = -1;
   }
   // Implement `render` to define a template for your element.
-  render():TemplateResult{
-    return html`
-      <div @mousedown=${(e:MouseEvent)=>this._startResize(e)}></div>
-    `;
+  render(): TemplateResult {
+    return html` <div @mousedown=${(e: MouseEvent) => this._startResize(e)}></div> `;
   }
-  _startResize(e:MouseEvent):void{
+  _startResize(e: MouseEvent): void {
     this.lastPosX = e.clientX;
-    window.addEventListener("mousemove", this._emitMove)
-    window.addEventListener("mouseup", this._endResize)
+    window.addEventListener("mousemove", this._emitMove);
+    window.addEventListener("mouseup", this._endResize);
   }
-  private _emitMove = (e:MouseEvent):void=>{
+  private _emitMove = (e: MouseEvent): void => {
     const n = e.clientX - this.lastPosX;
     this.lastPosX = e.clientX;
-    const event = new CustomEvent<number>('resize-x', {
-      detail : n,
-      bubbles: true, 
-      composed: true 
+    const event = new CustomEvent<number>("resize-x", {
+      detail: n,
+      bubbles: true,
+      composed: true,
     });
     this.dispatchEvent(event);
-  }
-  private _endResize = ():void=>{
+  };
+  private _endResize = (): void => {
     this.lastPosX = -1;
-    window.removeEventListener("mousemove", this._emitMove)
-    window.removeEventListener("mouseup", this._endResize)
-  }
-
-
+    window.removeEventListener("mousemove", this._emitMove);
+    window.removeEventListener("mouseup", this._endResize);
+  };
 }
 
 declare global {
   interface HTMLElementTagNameMap {
-    'horizontal-resizer': HorizontalResizer;
+    "horizontal-resizer": HorizontalResizer;
   }
-}
+}

src/main.ts

@@ -1,3 +1,3 @@
-export * from './Ressource';
-export * from './Event';
-export * from './Timeline';
+export * from "./Ressource";
+export * from "./Event";
+export * from "./Timeline";

src/stories/Timeline.stories.ts

@@ -1,100 +1,147 @@
-import { Story } from '@storybook/web-components';
-import { IEvent } from '../Event';
-import Ressource, { IRessource } from '../Ressource';
-import Timeline, { UnitLegend } from '../Timeline';
+import { Story } from "@storybook/web-components";
+import { IEvent } from "../Event";
+import Ressource, { IRessource } from "../Ressource";
+import Timeline, { UnitLegend } from "../Timeline";
 
 export default {
-    title: 'Javascript/Timeline',
-    component: 'jc-timeline',
-    argTypes:{
-      start:{
-        control:{type:"date"}
-      },
-      end:{
-        control:{type:"date"}
-      }
-    }
-  };
+  title: "Javascript/Timeline",
+  component: "jc-timeline",
+  argTypes: {
+    start: {
+      control: { type: "date" },
+    },
+    end: {
+      control: { type: "date" },
+    },
+  },
+};
 
 interface TimelineProps {
-  start:string,
-  end:string,
-  slotduration:number,
-  legendSpan?:number,
-  slotWidth?:number,
-  legendFormat?:Partial<UnitLegend>,
-  ressources?:Array<IRessource>,
-  events?:Array<IEvent>
+  start: string;
+  end: string;
+  slotduration: number;
+  legendSpan?: number;
+  slotWidth?: number;
+  legendFormat?: Partial<UnitLegend>;
+  ressources?: Array<IRessource>;
+  events?: Array<IEvent>;
 }
 
-const Template: Story<TimelineProps> = (args:TimelineProps) => {
+const Template: Story<TimelineProps> = (args: TimelineProps) => {
   const t = new Timeline();
   t.start = args.start;
-  t.end = args.end
-  if(args.legendSpan) t.legendSpan = args.legendSpan;
-  if(args.slotduration) t.slotDuration = args.slotduration;
-  if(args.slotWidth) t.slotWidth = args.slotWidth;
-  if(args.legendSpan) t.legendSpan = args.legendSpan;
-  if(args.legendFormat) t.setLegendUnitFormatAll(args.legendFormat);
-  if(args.ressources) t.addRessources(args.ressources);
-  if(args.events) t.addEvents(args.events);
-  
+  t.end = args.end;
+  if (args.legendSpan) t.legendSpan = args.legendSpan;
+  if (args.slotduration) t.slotDuration = args.slotduration;
+  if (args.slotWidth) t.slotWidth = args.slotWidth;
+  if (args.legendSpan) t.legendSpan = args.legendSpan;
+  if (args.legendFormat) t.setLegendUnitFormatAll(args.legendFormat);
+  if (args.ressources) t.addRessources(args.ressources);
+  if (args.events) t.addEvents(args.events);
+
   return t;
 };
 
 export const Generic = Template.bind({});
 Generic.args = {
-  start:"2021-04-04T22:00:00.000Z",
-  end:"2021-04-05T21:59:00.000Z",
-  ressources:[{id:"1",title:"Ressource 1"},{id:"2",title:"Ressource 2"}]
-}
+  start: "2021-04-04T22:00:00.000Z",
+  end: "2021-04-05T21:59:00.000Z",
+  ressources: [
+    { id: "1", title: "Ressource 1" },
+    { id: "2", title: "Ressource 2" },
+  ],
+};
 
 export const Week = Template.bind({});
 Week.args = {
-  start:"2021-04-04T22:00:00.000Z",
-  end:"2021-04-11T21:59:00.000Z",
-  slotduration:360,
-  legendSpan:4,
-  slotWidth:30,
-  legendFormat:{"d":"MMM D"}
-}
-
+  start: "2021-04-04T22:00:00.000Z",
+  end: "2021-04-11T21:59:00.000Z",
+  slotduration: 360,
+  legendSpan: 4,
+  slotWidth: 30,
+  legendFormat: { d: "MMM D" },
+};
 
 export const NestedRessource = Template.bind({});
 NestedRessource.args = {
-  start:"2021-04-05T05:00:00.000Z",
-  end:"2021-04-05T17:59:00.000Z",
-  ressources:[{id:"2",title:"Ressource 2",parent:{id:"1",title:"Ressource 1"}}]
-}
+  start: "2021-04-05T05:00:00.000Z",
+  end: "2021-04-05T17:59:00.000Z",
+  ressources: [{ id: "2", title: "Ressource 2", parent: { id: "1", title: "Ressource 1" } }],
+};
 
 export const WithEvents = Template.bind({});
 WithEvents.args = {
-  start:"2021-04-05T05:00:00.000Z",
-  end:"2021-04-05T17:59:00.000Z",
-  ressources:[{id:"1",title:"Ressource 1"},{id:"2",title:"Ressource 2"}],
+  start: "2021-04-05T05:00:00.000Z",
+  end: "2021-04-05T17:59:00.000Z",
+  ressources: [
+    { id: "1", title: "Ressource 1" },
+    { id: "2", title: "Ressource 2" },
+  ],
   events: [
-    {id:'1', title:"Fixed ressource" ,ressourceId:'1', start:new Date("2021-04-05T05:00:00.000Z"), end:new Date("2021-04-05T07:59:00.000Z"), ressourceEditable:false,bgColor:"darkgreen"},
-    {id:'2', title:"Fixed time" , ressourceId:'1', start:new Date("2021-04-05T09:00:00.000Z"), end:new Date("2021-04-05T10:59:00.000Z"), editable:false,bgColor:"FireBrick"},
-    {id:'3', ressourceId:'2', start:new Date("2021-04-05T10:00:00.000Z"), end:new Date("2021-04-05T11:59:00.000Z")},
-    {id:'4', ressourceId:'2', start:new Date("2021-04-05T11:00:00.000Z"), end:new Date("2021-04-05T12:59:00.000Z")},
-    {id:'5', ressourceId:'2', start:new Date("2021-04-05T12:00:00.000Z"), end:new Date("2021-04-05T13:59:00.000Z"),content:'<div class="bubble">0</div>'}
-]
-}
+    {
+      id: "1",
+      title: "Fixed ressource",
+      ressourceId: "1",
+      start: new Date("2021-04-05T05:00:00.000Z"),
+      end: new Date("2021-04-05T07:59:00.000Z"),
+      ressourceEditable: false,
+      bgColor: "darkgreen",
+    },
+    {
+      id: "2",
+      title: "Fixed time",
+      ressourceId: "1",
+      start: new Date("2021-04-05T09:00:00.000Z"),
+      end: new Date("2021-04-05T10:59:00.000Z"),
+      editable: false,
+      bgColor: "FireBrick",
+    },
+    {
+      id: "3",
+      ressourceId: "2",
+      start: new Date("2021-04-05T10:00:00.000Z"),
+      end: new Date("2021-04-05T11:59:00.000Z"),
+    },
+    {
+      id: "4",
+      ressourceId: "2",
+      start: new Date("2021-04-05T11:00:00.000Z"),
+      end: new Date("2021-04-05T12:59:00.000Z"),
+    },
+    {
+      id: "5",
+      ressourceId: "2",
+      start: new Date("2021-04-05T12:00:00.000Z"),
+      end: new Date("2021-04-05T13:59:00.000Z"),
+      content: '<div class="bubble">0</div>',
+    },
+  ],
+};
 const nItem = 25;
-const date = (new Date("2021-04-05T05:00:00.000Z")).valueOf()
+const date = new Date("2021-04-05T05:00:00.000Z").valueOf();
 export const Rainbow = Template.bind({});
 Rainbow.args = {
-  start:"2021-04-05T05:00:00.000Z",
-  end:"2021-04-05T17:59:00.000Z",
-  ressources:[Array(8).fill(0).map((_,i)=>new Ressource({id:""+i,title:"level "+i}))
-              .reduce((acc:IRessource|undefined,o:IRessource)=>{o.parent=acc;return o },undefined) as IRessource],
-  events:  Array(nItem).fill(0).map((_,i)=>{
+  start: "2021-04-05T05:00:00.000Z",
+  end: "2021-04-05T17:59:00.000Z",
+  ressources: [
+    Array(8)
+      .fill(0)
+      .map((_, i) => new Ressource({ id: "" + i, title: "level " + i }))
+      .reduce((acc: IRessource | undefined, o: IRessource) => {
+        o.parent = acc;
+        return o;
+      }, undefined) as IRessource,
+  ],
+  events: Array(nItem)
+    .fill(0)
+    .map((_, i) => {
       return {
-          id:""+i,
-          ressourceId:"" + (i % 8),
-          title:"Item "+i,
-          start: new Date(date + 1800000 * i),
-          end:new Date(date + 3600_000+ 1800000 * i),
-          bgColor:"hsl(" + Math.round(i / (nItem-1) * 360) + ", 100%, 50%)"
-      }})
-}
+        id: "" + i,
+        ressourceId: "" + (i % 8),
+        title: "Item " + i,
+        start: new Date(date + 1800000 * i),
+        end: new Date(date + 3600_000 + 1800000 * i),
+        bgColor: "hsl(" + Math.round((i / (nItem - 1)) * 360) + ", 100%, 50%)",
+      };
+    }),
+};

src/styles/SimplbeBar.styles.ts

@@ -1,6 +1,7 @@
 import { css, CSSResult } from "lit-element";
 
-export const SimpleBarStyle:CSSResult = css`[data-simplebar] {
+export const SimpleBarStyle: CSSResult = css`
+  [data-simplebar] {
     position: relative;
     flex-direction: column;
     flex-wrap: wrap;
@@ -8,7 +9,7 @@ export const SimpleBarStyle:CSSResult = css`[data-simplebar] {
     align-content: flex-start;
     align-items: flex-start;
   }
-  
+
   .simplebar-wrapper {
     overflow: hidden;
     width: inherit;
@@ -16,7 +17,7 @@ export const SimpleBarStyle:CSSResult = css`[data-simplebar] {
     max-width: inherit;
     max-height: inherit;
   }
-  
+
   .simplebar-mask {
     direction: inherit;
     position: absolute;
@@ -31,7 +32,7 @@ export const SimpleBarStyle:CSSResult = css`[data-simplebar] {
     height: auto !important;
     z-index: 0;
   }
-  
+
   .simplebar-offset {
     direction: inherit !important;
     box-sizing: inherit !important;
@@ -45,7 +46,7 @@ export const SimpleBarStyle:CSSResult = css`[data-simplebar] {
     margin: 0;
     -webkit-overflow-scrolling: touch;
   }
-  
+
   .simplebar-content-wrapper {
     direction: inherit;
     box-sizing: border-box !important;
@@ -58,26 +59,26 @@ export const SimpleBarStyle:CSSResult = css`[data-simplebar] {
     scrollbar-width: none;
     -ms-overflow-style: none;
   }
-  
+
   .simplebar-content-wrapper::-webkit-scrollbar,
   .simplebar-hide-scrollbar::-webkit-scrollbar {
     width: 0;
     height: 0;
   }
-  
+
   .simplebar-content:before,
   .simplebar-content:after {
-    content: ' ';
+    content: " ";
     display: table;
   }
-  
+
   .simplebar-placeholder {
     max-height: 100%;
     max-width: 100%;
     width: 100%;
     pointer-events: none;
   }
-  
+
   .simplebar-height-auto-observer-wrapper {
     box-sizing: inherit !important;
     height: 100%;
@@ -95,7 +96,7 @@ export const SimpleBarStyle:CSSResult = css`[data-simplebar] {
     flex-shrink: 0;
     flex-basis: 0;
   }
-  
+
   .simplebar-height-auto-observer {
     box-sizing: inherit;
     display: block;
@@ -111,7 +112,7 @@ export const SimpleBarStyle:CSSResult = css`[data-simplebar] {
     pointer-events: none;
     z-index: -1;
   }
-  
+
   .simplebar-track {
     z-index: 1;
     position: absolute;
@@ -120,27 +121,27 @@ export const SimpleBarStyle:CSSResult = css`[data-simplebar] {
     pointer-events: none;
     overflow: hidden;
   }
-  
+
   [data-simplebar].simplebar-dragging .simplebar-content {
     pointer-events: none;
     user-select: none;
     -webkit-user-select: none;
   }
-  
+
   [data-simplebar].simplebar-dragging .simplebar-track {
     pointer-events: all;
   }
-  
+
   .simplebar-scrollbar {
     position: absolute;
     left: 0;
     right: 0;
     min-height: 10px;
   }
-  
+
   .simplebar-scrollbar:before {
     position: absolute;
-    content: '';
+    content: "";
     background: black;
     border-radius: 7px;
     left: 2px;
@@ -148,34 +149,34 @@ export const SimpleBarStyle:CSSResult = css`[data-simplebar] {
     opacity: 0;
     transition: opacity 0.2s linear;
   }
-  
+
   .simplebar-scrollbar.simplebar-visible:before {
     /* When hovered, remove all transitions from drag handle */
     opacity: 0.5;
     transition: opacity 0s linear;
   }
-  
+
   .simplebar-track.simplebar-vertical {
     top: 0;
     width: 11px;
   }
-  
+
   .simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
     top: 2px;
     bottom: 2px;
   }
-  
+
   .simplebar-track.simplebar-horizontal {
     left: 0;
     height: 11px;
   }
-  
+
   .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before {
     height: 100%;
     left: 2px;
     right: 2px;
   }
-  
+
   .simplebar-track.simplebar-horizontal .simplebar-scrollbar {
     right: auto;
     left: 0;
@@ -185,13 +186,13 @@ export const SimpleBarStyle:CSSResult = css`[data-simplebar] {
     min-width: 10px;
     width: auto;
   }
-  
+
   /* Rtl support */
-  [data-simplebar-direction='rtl'] .simplebar-track.simplebar-vertical {
+  [data-simplebar-direction="rtl"] .simplebar-track.simplebar-vertical {
     right: auto;
     left: 0;
   }
-  
+
   .hs-dummy-scrollbar-size {
     direction: rtl;
     position: fixed;
@@ -202,7 +203,7 @@ export const SimpleBarStyle:CSSResult = css`[data-simplebar] {
     overflow-y: hidden;
     overflow-x: scroll;
   }
-  
+
   .simplebar-hide-scrollbar {
     position: fixed;
     left: 0;
@@ -210,4 +211,5 @@ export const SimpleBarStyle:CSSResult = css`[data-simplebar] {
     overflow-y: scroll;
     scrollbar-width: none;
     -ms-overflow-style: none;
-  }` 
+  }
+`;

src/styles/Timeline.style.ts

@@ -2,8 +2,8 @@ import { css, CSSResult } from "lit-element";
 
 export const TimelineStyle: CSSResult = css`
   * {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
-      Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
+      "Open Sans", "Helvetica Neue", sans-serif;
     font-size: 16px;
     font-weight: 400;
   }

src/utils/selectable.ts

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

src/utils/syncroScroll.ts

@@ -1,21 +1,24 @@
-type scrollingDirection = "v" | "h" | "vh" | "hv" ; 
+type scrollingDirection = "v" | "h" | "vh" | "hv";
 
-export default function syncronizeElementsScrolling(elements:Array<HTMLBaseElement>, direction:scrollingDirection = "vh"):void{
-    let activeScroller:HTMLElement | null = null;
-    const bSyncroV = direction.indexOf("v") > -1 ;
-    const bSyncroH = direction.indexOf("h") > -1 ; 
-    const applyListener = function(element:HTMLBaseElement) {
-      element.addEventListener("mouseenter", function(e:MouseEvent) {
-        activeScroller = e.target as HTMLElement;
+export default function syncronizeElementsScrolling(
+  elements: Array<HTMLBaseElement>,
+  direction: scrollingDirection = "vh"
+): void {
+  let activeScroller: HTMLElement | null = null;
+  const bSyncroV = direction.indexOf("v") > -1;
+  const bSyncroH = direction.indexOf("h") > -1;
+  const applyListener = function (element: HTMLBaseElement) {
+    element.addEventListener("mouseenter", function (e: MouseEvent) {
+      activeScroller = e.target as HTMLElement;
+    });
+    element.addEventListener("scroll", function (e: Event) {
+      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;
       });
-      element.addEventListener("scroll", function(e:Event) {
-        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)
-  }
+    });
+  };
+  elements.forEach(applyListener);
+}