@progressive-development/pd-calendar 0.2.4 → 0.2.6

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.6",
   "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,33 @@ class PdCalendarCell extends LitElement {
       );
     }
   }
+
+  _mouseEnter(e) {    
+    // convert back to date
+    const userSelectedDate = parse(this.key, 'YYYY-MM-DD');
+    this.dispatchEvent(
+      new CustomEvent('mouse-enter-date', {
+        detail: {
+          dateKey: this.key,
+          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);