@progressive-development/pd-calendar 0.2.3 → 0.2.5

package/package.json

@@ -3,7 +3,7 @@
   "description": "progressive development calendar web component",
   "license": "SEE LICENSE IN LICENSE",
   "author": "PD Progressive Development",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "main": "index.js",
   "module": "index.js",
   "scripts": {

package/src/PdCalendar.js

@@ -272,8 +272,9 @@ export class PdCalendar extends LitElement {
       if (!this.hideWeekend || ((day !== 6) && (day  !== 0))) {
         const key = format(tmpDate, 'YYYY-MM-DD');
         // TODO => Array / Unit Thema... hier fest auf 0 zugegriffen zunächst
-        const infoTxt = this.data[key] ? this.data[key][0].info : undefined;
-        const special = this.data[key]
+        
+        const infoTxt = this.data && this.data[key] ? this.data[key][0].info : undefined;
+        const special = this.data && this.data[key]
           ? this.data[key][0].special || false
           : false;
 

package/src/PdCalendarCell.js

@@ -195,6 +195,8 @@ class PdCalendarCell extends LitElement {
     return html` <div
       @keypress="${this._selectableCellClicked}"
       @click="${this._selectableCellClicked}"
+      @mouseenter="${this._mouseEnter}"
+      @mouseleave="${this._mouseLeave}"
       data-date="${this.key}"
       class="cell cell-day ${this.numberClass} ${this.special ? 'special' : 'free'}
       ${this.weekDayNumber === 6 ||
@@ -254,6 +256,36 @@ class PdCalendarCell extends LitElement {
       );
     }
   }
+
+  _mouseEnter(e) {
+    const dateKey = e.target.dataset.date;
+    if (dateKey) {
+      // convert back to date
+      const userSelectedDate = parse(dateKey, 'YYYY-MM-DD');
+      this.dispatchEvent(
+        new CustomEvent('mouse-enter-date', {
+          detail: {
+            dateKey,
+            date: userSelectedDate,
+            bubbles: true,
+            composed: true
+          },
+        })
+      );
+    }
+  }
+
+  _mouseLeave() {
+    this.dispatchEvent(
+      new CustomEvent('mouse-leave-date', {
+        detail: {
+          bubbles: true,
+          composed: true
+        },
+      })
+    );
+  }
+
 }
 
 window.customElements.define('pd-calendar-cell', PdCalendarCell);