Export change

lib/Event.d.ts

@@ -1,10 +1,11 @@
+import { TemplateResult } from 'lit-html';
 import Selectable from './utils/selectable';
 export interface IEvent {
     id: string;
     start: Date;
     end: Date;
     ressourceId: string;
-    title?: string;
+    content?: string | TemplateResult;
     editable?: boolean | null;
     ressourceEditable?: boolean | null;
     bgColor?: string;
@@ -13,7 +14,7 @@ export declare class Event implements IEvent, Selectable {
     id: string;
     start: Date;
     end: Date;
-    title: string;
+    content: string | TemplateResult;
     ressourceId: string;
     isDisplayed: boolean;
     offset: number;

lib/Event.js

@@ -7,7 +7,7 @@ class Event {
         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.content = (obj === null || obj === void 0 ? void 0 : obj.content) || this.id;
         this.isDisplayed = false;
         this.offset = 0;
         this.editable = (obj === null || obj === void 0 ? void 0 : obj.editable) === undefined ? null : obj.editable;

lib/Event.js.map

@@ -1 +1 @@
-{"version":3,"file":"Event.js","sourceRoot":"","sources":["../src/Event.ts"],"names":[],"mappings":";;;AAaA,MAAa,KAAK;IAcd,YAAY,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,IAAI,QAAQ;QACR,OAAO,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAA;IACnC,CAAC;IACD,IAAI,MAAM;QACN,OAAO,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,CAAA;IACjC,CAAC;IAED,MAAM,CAAC,UAAU,CAAC,GAAU;QACxB,IAAI,GAAG,YAAY,KAAK,EAAC;YACrB,OAAO,GAAG,CAAA;SACb;aAAI;YACD,OAAO,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC;SACzB;IACL,CAAC;CACJ;AA3CD,sBA2CC;AAED,kBAAe,KAAK,CAAA"}
+{"version":3,"file":"Event.js","sourceRoot":"","sources":["../src/Event.ts"],"names":[],"mappings":";;;AAcA,MAAa,KAAK;IAcd,YAAY,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,OAAO,GAAG,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,OAAO,KAAI,IAAI,CAAC,EAAE,CAAC;QACvC,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,IAAI,QAAQ;QACR,OAAO,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAA;IACnC,CAAC;IACD,IAAI,MAAM;QACN,OAAO,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,CAAA;IACjC,CAAC;IAED,MAAM,CAAC,UAAU,CAAC,GAAU;QACxB,IAAI,GAAG,YAAY,KAAK,EAAC;YACrB,OAAO,GAAG,CAAA;SACb;aAAI;YACD,OAAO,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC;SACzB;IACL,CAAC;CACJ;AA3CD,sBA2CC;AAED,kBAAe,KAAK,CAAA"}

lib/Timeline.js

@@ -127,6 +127,7 @@ let Timeline = class Timeline extends lit_element_1.LitElement {
             this.rows = [...this.rows, r];
         }
         this.addRessources(r.children);
+        this._clearSelectedItems();
         this._updateEventPosition(r);
         return r;
     }
@@ -206,6 +207,7 @@ let Timeline = class Timeline extends lit_element_1.LitElement {
         this.items = [...this.items, timeslot];
         timeslot.isDisplayed = timeslot.end > this._start.toDate() || timeslot.start < this._end.toDate();
         this._updateEventPosition(ressource);
+        this._clearSelectedItems();
         return timeslot;
     }
     removeEventById(id) {
@@ -434,10 +436,11 @@ let Timeline = class Timeline extends lit_element_1.LitElement {
         };
     }
     _clearSelectedItems() {
-        this.selectedList.map(selectable => {
+        this.items.forEach((selectable) => {
             selectable.selected = false;
             this.updateEventById(selectable.id);
         });
+        this.rows.forEach((selectable) => selectable.selected = false);
         this.selectedList = [];
     }
     _getEventClickHandler(clickedItem) {
@@ -518,7 +521,7 @@ let Timeline = class Timeline extends lit_element_1.LitElement {
             style.top = rowTop - 6 + "px";
             return lit_element_1.html `<div class="jc-timeslot empty" style="${style_map_1.styleMap(style)}"></div>`;
         }
-        let content = lit_element_1.html `${evt.title}`;
+        let content = lit_element_1.html `${evt.content}`;
         const resizer = evt.editable === null ? ressource.eventEditable : evt.editable;
         const editableRessource = evt.ressourceEditable === null ? ressource.eventRessourceEditable : evt.ressourceEditable;
         if (resizer) {

lib/stories/Timeline.stories.js

@@ -65,8 +65,8 @@ exports.WithEvents.args = {
     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: '1', content: "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', content: "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") }
@@ -84,7 +84,7 @@ exports.Rainbow.args = {
         return {
             id: "" + i,
             ressourceId: "" + (i % 8),
-            title: "Item " + i,
+            content: "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%)"