@progressive-development/pd-calendar 0.2.4 → 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.4",
+  "version": "0.2.5",
   "main": "index.js",
   "module": "index.js",
   "scripts": {

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);