@progressive-development/pd-calendar 0.2.20 → 0.5.0

package/{src → dist/src}/PdCalendar.js

@@ -1,153 +1,108 @@
-/* eslint-disable lit-a11y/click-events-have-key-events */
+import { LitElement, css, html } from "lit";
+import { msg, updateWhenLocaleChanges } from "@lit/localize";
+import { format } from "fecha";
+import "@progressive-development/pd-icon/pd-icon.js";
+import { PDColorStyles, PDFontStyles } from "@progressive-development/pd-shared-styles";
+import "./PdCalendarCell.js";
+import { PdYearPopup } from "./PdYearPopup.js";
 /**
  * @license
  * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
  */
-
-import { LitElement, html, css } from 'lit';
-import { msg, updateWhenLocaleChanges } from '@lit/localize';
-
-import { format } from 'fecha';
-import '@progressive-development/pd-icon/pd-icon.js';
-
-import { PDColorStyles, PDFontStyles } from '@progressive-development/pd-shared-styles';
-
-import './PdCalendarCell.js';
-import { PdYearPopup } from './PdYearPopup.js';
-
 const TOUCH_MIN_MOVE = 70;
-
-const loadLocales = () => 
-  ({
-    monthNames: [
-      msg("Januar", { id: 'pd.datepicker.month.jan'}),
-      msg("Februar", { id: 'pd.datepicker.month.feb'}),
-      msg("März", { id: 'pd.datepicker.month.mar'}),
-      msg("April", { id: 'pd.datepicker.month.apr'}),
-      msg("Mai", { id: 'pd.datepicker.month.may'}),
-      msg("Juni", { id: 'pd.datepicker.month.jun'}),
-      msg("Juli", { id: 'pd.datepicker.month.jul'}),
-      msg("August", { id: 'pd.datepicker.month.aug'}),
-      msg("September", { id: 'pd.datepicker.month.sep'}),
-      msg("Oktober", { id: 'pd.datepicker.month.oct'}),
-      msg("November", { id: 'pd.datepicker.month.nov'}),
-      msg("Dezember", { id: 'pd.datepicker.month.dec'}),  
-    ],
-    weekdays: [
-      msg("Sonntag", { id: 'pd.datepicker.day.sun'}),
-      msg("Montag", { id: 'pd.datepicker.day.mon'}),
-      msg("Dienstag", { id: 'pd.datepicker.day.tue'}),
-      msg("Mittwoch", { id: 'pd.datepicker.day.wed'}),
-      msg("Donnerstag", { id: 'pd.datepicker.day.thi'}),
-      msg("Freitag", { id: 'pd.datepicker.day.fri'}),
-      msg("Samstag", { id: 'pd.datepicker.day.sat'}),
-    ],
-    weekdaysShort: [      
-      msg("Mo", { id: 'pd.datepicker.shortday.mon'}),
-      msg("Di", { id: 'pd.datepicker.shortday.tue'}),
-      msg("Mi", { id: 'pd.datepicker.shortday.wed'}),
-      msg("Do", { id: 'pd.datepicker.shortday.thi'}),
-      msg("Fr", { id: 'pd.datepicker.shortday.fri'}),
-      msg("Sa", { id: 'pd.datepicker.shortday.sat'}),
-      msg("So", { id: 'pd.datepicker.shortday.sun'}),
-    ],
-  });
-
+const loadLocales = () => ({
+  monthNames: [
+    msg("Januar", { id: "pd.datepicker.month.jan" }),
+    msg("Februar", { id: "pd.datepicker.month.feb" }),
+    msg("März", { id: "pd.datepicker.month.mar" }),
+    msg("April", { id: "pd.datepicker.month.apr" }),
+    msg("Mai", { id: "pd.datepicker.month.may" }),
+    msg("Juni", { id: "pd.datepicker.month.jun" }),
+    msg("Juli", { id: "pd.datepicker.month.jul" }),
+    msg("August", { id: "pd.datepicker.month.aug" }),
+    msg("September", { id: "pd.datepicker.month.sep" }),
+    msg("Oktober", { id: "pd.datepicker.month.oct" }),
+    msg("November", { id: "pd.datepicker.month.nov" }),
+    msg("Dezember", { id: "pd.datepicker.month.dec" })
+  ],
+  weekdays: [
+    msg("Sonntag", { id: "pd.datepicker.day.sun" }),
+    msg("Montag", { id: "pd.datepicker.day.mon" }),
+    msg("Dienstag", { id: "pd.datepicker.day.tue" }),
+    msg("Mittwoch", { id: "pd.datepicker.day.wed" }),
+    msg("Donnerstag", { id: "pd.datepicker.day.thi" }),
+    msg("Freitag", { id: "pd.datepicker.day.fri" }),
+    msg("Samstag", { id: "pd.datepicker.day.sat" })
+  ],
+  weekdaysShort: [
+    msg("Mo", { id: "pd.datepicker.shortday.mon" }),
+    msg("Di", { id: "pd.datepicker.shortday.tue" }),
+    msg("Mi", { id: "pd.datepicker.shortday.wed" }),
+    msg("Do", { id: "pd.datepicker.shortday.thi" }),
+    msg("Fr", { id: "pd.datepicker.shortday.fri" }),
+    msg("Sa", { id: "pd.datepicker.shortday.sat" }),
+    msg("So", { id: "pd.datepicker.shortday.sun" })
+  ]
+});
 const LOCALES = loadLocales();
-
-// list views (list, month, week)
 const VIEW_LIST = 1;
 const VIEW_MONTH = 2;
 const VIEW_WEEK = 3;
-
 const isToday = (someDate) => {
   if (!someDate) {
     return false;
   }
-  const today = new Date()
-  return someDate.getDate() === today.getDate() &&
-    someDate.getMonth() === today.getMonth() &&
-    someDate.getFullYear() === today.getFullYear()
-}
-
+  const today = /* @__PURE__ */ new Date();
+  return someDate.getDate() === today.getDate() && someDate.getMonth() === today.getMonth() && someDate.getFullYear() === today.getFullYear();
+};
 const isSelected = (someDate1, someDate2) => {
   if (!someDate1 || !someDate2) {
     return false;
-  }  
-  return someDate1.getDate() === someDate2.getDate() &&
-    someDate1.getMonth() === someDate2.getMonth() &&
-    someDate1.getFullYear() === someDate2.getFullYear()
-}
-
-/**
- * PdCalendar displays montly view with information (selectable day cell).
- * 
- * refDate: Date                => if set use the day for initial month view
- * prevMonthConstraint: number  => if set, allows only back steps until the constraint is reached  
- * nextMonthConstraint: number  => if set, allows only forward steps until the constraint is reached  
- * data: Object                 => input calendar Data.
- * numberClass: string          => display day in cell (top-left and center available)
- * 
- * Data:
- * monthSelection: number       => number wich indicates, the month with data, if the origin month contains no valid data.
- *                                 starts the calendar view initial with the month from monthSelection
- * Input Data as followed 
- * "2023-11-04": [
- *  {
- *    info: "some txt",           => Text for day cell
- *    special?: true|false        => Highlight cell
- *  }
- * ]   
- */
-export class PdCalendar extends LitElement {
-
+  }
+  return someDate1.getDate() === someDate2.getDate() && someDate1.getMonth() === someDate2.getMonth() && someDate1.getFullYear() === someDate2.getFullYear();
+};
+class PdCalendar extends LitElement {
   /**
    * Fired when next or prev month clicked
    * @event change-month
    */
-
   /**
    * Fired when date with info element clicked => At the moment only for those ones
    * @event select-date
    */
-
   /**
    * Fired when mouse entered date cell, detail contains date (Date) and dateKey(string).
    * @event mouse-enter-date
    */
-
   /**
    * Fired when date leaves date cell
    * @event mouse-leave-date
    */
-
-   static get properties() {
+  static get properties() {
     return {
       refDate: { type: Object },
-      selectableDates: { type: Boolean},
-      withYearPopup: { type: Array},
-      withWheelNavigation: { type: Boolean},
-      withTouchNavigation: { type: Boolean},
-      showSelection: { type: Boolean},
+      selectableDates: { type: Boolean },
+      withYearPopup: { type: Array },
+      withWheelNavigation: { type: Boolean },
+      withTouchNavigation: { type: Boolean },
+      showSelection: { type: Boolean },
       hideWeekend: { type: Boolean, reflect: true },
       prevMonthConstraint: { type: Number },
       nextMonthConstraint: { type: Number },
       data: { type: Object },
-
       /**
        * CSS class for day number inside the cell, top-left and center available
        */
-       numberClass: { type: String },
-
+      numberClass: { type: String },
       _currentDate: { type: Object },
       _viewType: { type: Number },
-      _wheelDelta: { type: Number, state: true },      
+      _wheelDelta: { type: Number, state: true }
     };
   }
-
   static get styles() {
     return [
-      PDColorStyles, PDFontStyles,
+      PDColorStyles,
+      PDFontStyles,
       css`
       :host {
         
@@ -256,60 +211,48 @@ export class PdCalendar extends LitElement {
         color: var(--pd-default-hover-col);
       }
 
-    `];
+    `
+    ];
   }
-
   constructor() {
     super();
     updateWhenLocaleChanges(this);
-    
     this.data = {};
     this._viewType = VIEW_MONTH;
-    this.numberClass = "top-left";  
+    this.numberClass = "top-left";
     this.hideWeekend = false;
     this.selectableDates = false;
     this.showSelection = false;
-    this._wheelDelta = 0;    
+    this._wheelDelta = 0;
     this._currentMonthNavNr = 0;
-  }  
-
+  }
   connectedCallback() {
     super.connectedCallback();
-
-    // get latest possible date
-    const ref = this.refDate || new Date();    
-
-    // initialize date values with current date    
+    const ref = this.refDate || /* @__PURE__ */ new Date();
     this._initFromDate(ref);
   }
-
   update(changedProperties) {
-    // check for month selection (set by remote server if no result available for the first call)    
-    if (changedProperties.has("data") && this.data && this.data.monthSelection) {      
+    if (changedProperties.has("data") && this.data && this.data.monthSelection) {
       const now = new Date(Date.now());
       const startDateNextMonth = new Date(now.getFullYear(), this.data.monthSelection, 1);
       this._currentMonthNavNr += 1;
       this._initFromDate(startDateNextMonth);
     }
-
     if (changedProperties.has("refDate") && this.refDate) {
       this._initFromDate(this.refDate);
     }
     super.update(changedProperties);
   }
-
   render() {
     return html`      
       ${this.renderCalendarByViewType()}
       <slot name="calFooter"></slot>
     `;
   }
-
   renderCalendarByViewType() {
     switch (this._viewType) {
       case VIEW_LIST:
-        // return this.renderListCalendar();
-        return '';
+        return "";
       case VIEW_MONTH:
         return this.renderMonthCalendar();
       case VIEW_WEEK:
@@ -319,39 +262,27 @@ export class PdCalendar extends LitElement {
     }
   }
   /*
-   renderListCalendar() {
-     // TODO
-   }
- */
-
+    renderListCalendar() {
+      // TODO
+    }
+  */
   renderMonthCalendar() {
-    // generate divs for each day
     const itemTemplates = [];
-
-    const sizeVar =
-      this._numberOfDays >= 31 && this._daysFromPreviousMonth.length >= 5
-        ? 'max'
-        : 'normal';
+    const sizeVar = this._numberOfDays >= 31 && this._daysFromPreviousMonth.length >= 5 ? "max" : "normal";
     for (let i = 1; i <= this._numberOfDays; i += 1) {
       const tmpDate = new Date(this._year, this._currentDate.getMonth(), i);
       const day = tmpDate.getDay();
-      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 && this.data[key] ? this.data[key][0].info : undefined;
-        const special = this.data && this.data[key]
-          ? this.data[key][0].special || false
-          : false;
-
-
-          itemTemplates.push(html`
+      if (!this.hideWeekend || day !== 6 && day !== 0) {
+        const key = format(tmpDate, "YYYY-MM-DD");
+        const infoTxt = this.data && this.data[key] ? this.data[key][0].info : void 0;
+        const special = this.data && this.data[key] ? this.data[key][0].special || false : false;
+        itemTemplates.push(html`
             <pd-calendar-cell            
               key="${key}"
               dayNumber="${i}"
               weekDayNumber="${tmpDate.getDay()}"
               infoTxt="${infoTxt}"
-              ?selectEnabled="${this.selectableDates || infoTxt !== undefined}"
+              ?selectEnabled="${this.selectableDates || infoTxt !== void 0}"
               ?special="${special}"
               numberClass="${this.numberClass}"
               @select-date="${this._forwardEvent}"
@@ -360,10 +291,9 @@ export class PdCalendar extends LitElement {
               ?today="${this.selectableDates && isToday(tmpDate)}"
               ?selected="${this.showSelection && isSelected(this.refDate, tmpDate)}"
             ></pd-calendar-cell>
-          `);       
-      }      
+          `);
+      }
     }
-
     return html`
       <div class="layout-container">
         <div class="header">
@@ -402,30 +332,26 @@ export class PdCalendar extends LitElement {
           @touchend="${this._touchEndEvent}"
           class="content grid-container ${sizeVar}">
           ${this._getWeekDays().map(
-            shortName => html` <div class="title-week-day">${shortName}</div>`
-          )}
+      (shortName) => html` <div class="title-week-day">${shortName}</div>`
+    )}
           ${this._daysFromPreviousMonth.map(
-            () => html` <div class="cell cell-empty"></div>`
-          )}
+      () => html` <div class="cell cell-empty"></div>`
+    )}
           ${itemTemplates}
         </div>
       </div>
     `;
   }
-
   // eslint-disable-next-line class-methods-use-this
   _openYearPopup() {
-    
     const popup = new PdYearPopup();
     popup.yearSelection = this.withYearPopup;
     this.shadowRoot.getElementById("titleContentId").appendChild(popup);
-
     popup.addEventListener("abort-year-selection", () => {
       this.shadowRoot.getElementById("titleContentId").removeChild(popup);
     });
-
     popup.addEventListener("change-year-selection", (e) => {
-      const newYear = e.detail.year;      
+      const newYear = e.detail.year;
       if (newYear) {
         const newDate = new Date(
           this._currentDate.getFullYear(),
@@ -434,25 +360,23 @@ export class PdCalendar extends LitElement {
         );
         newDate.setFullYear(newYear);
         this.dispatchEvent(
-          new CustomEvent('change-month', {
+          new CustomEvent("change-month", {
             detail: {
-              newDate,
-            },
+              newDate
+            }
           })
-        );        
+        );
         this._initFromDate(newDate);
       }
       this.shadowRoot.getElementById("titleContentId").removeChild(popup);
     });
   }
-
   // eslint-disable-next-line class-methods-use-this
   _getWeekDays() {
     return this.hideWeekend ? [
       ...LOCALES.weekdaysShort
     ].splice(0, 5) : LOCALES.weekdaysShort;
   }
-
   _nextMonth() {
     if (this._checkNextMonthConstraint()) {
       const newDate = new Date(
@@ -462,19 +386,18 @@ export class PdCalendar extends LitElement {
       );
       newDate.setMonth(newDate.getMonth() + 1);
       this.dispatchEvent(
-        new CustomEvent('change-month', {
+        new CustomEvent("change-month", {
           detail: {
             newDate,
-            next: true,
-          },
+            next: true
+          }
         })
       );
       this._currentMonthNavNr += 1;
       this._initFromDate(newDate);
     }
   }
-
-  _previousMonth() {        
+  _previousMonth() {
     if (this._checkPrevMonthConstraint()) {
       const newDate = new Date(
         this._currentDate.getFullYear(),
@@ -483,54 +406,45 @@ export class PdCalendar extends LitElement {
       );
       newDate.setMonth(newDate.getMonth() - 1);
       this.dispatchEvent(
-        new CustomEvent('change-month', {
+        new CustomEvent("change-month", {
           detail: {
             newDate,
-            prev: true,
-          },
+            prev: true
+          }
         })
       );
       this._currentMonthNavNr -= 1;
       this._initFromDate(newDate);
     }
   }
-
   // eslint-disable-next-line class-methods-use-this
-  _wheelEvent(e) {   
-    
+  _wheelEvent(e) {
     if (this.withWheelNavigation) {
-
       this._wheelDelta += e.deltaY;
-
-      if (this._wheelDelta > 360) {      
+      if (this._wheelDelta > 360) {
         this._wheelDelta = 0;
         this._nextMonth();
       }
-
-      if (this._wheelDelta < -360) {      
+      if (this._wheelDelta < -360) {
         this._wheelDelta = 0;
         this._previousMonth();
       }
-    }    
-
+    }
     e.preventDefault();
     e.stopPropagation();
   }
-
   // eslint-disable-next-line class-methods-use-this
-  _touchStartEvent(e) {   
+  _touchStartEvent(e) {
     if (this.withTouchNavigation) {
-      this._wheelDelta = e.changedTouches[0].screenX;        
+      this._wheelDelta = e.changedTouches[0].screenX;
     }
-    e.stopPropagation();    
+    e.stopPropagation();
   }
-
-  _touchEndEvent(e) {    
+  _touchEndEvent(e) {
     if (this.withTouchNavigation) {
-      const touchEndX = e.changedTouches[0].screenX;            
-    
+      const touchEndX = e.changedTouches[0].screenX;
       const result = this._wheelDelta - touchEndX;
-      if (result < (TOUCH_MIN_MOVE * -1)) {
+      if (result < TOUCH_MIN_MOVE * -1) {
         this._nextMonth();
       } else if (result > TOUCH_MIN_MOVE) {
         this._previousMonth();
@@ -538,23 +452,17 @@ export class PdCalendar extends LitElement {
     }
     e.stopPropagation();
   }
-
   _initFromDate(date) {
-    this._monthName = date.toLocaleString('default', { month: 'long' });
+    this._monthName = date.toLocaleString("default", { month: "long" });
     this._year = date.getFullYear();
     this._daysFromPreviousMonth = PdCalendar._getPreviousMonthDays(date);
-    // last month day
     const newDate2 = new Date(date.getFullYear(), date.getMonth() + 1, 0);
     this._numberOfDays = newDate2.getDate();
     this._currentDate = date;
   }
-
   static _getPreviousMonthDays(date) {
-    // get first day of month
     const date1 = new Date(date.getFullYear(), date.getMonth(), 1);
-    // get missing days to monday
     const missingDays = date1.getDay() > 0 ? Math.abs(1 - date1.getDay()) : 6;
-    // create array with missing days (dates)
     const missDayArray = [];
     for (let i = 1; i <= missingDays; i += 1) {
       date1.setDate(date1.getDate() - 1);
@@ -564,45 +472,42 @@ export class PdCalendar extends LitElement {
     }
     return missDayArray;
   }
-
-  _checkNextMonthConstraint() {    
+  _checkNextMonthConstraint() {
     if (this.nextMonthConstraint > 0) {
       return this.nextMonthConstraint > this._currentMonthNavNr;
-    } 
+    }
     if (this.nextMonthConstraint === -1) {
       return true;
     }
     return false;
   }
-
-  _checkPrevMonthConstraint() {    
+  _checkPrevMonthConstraint() {
     if (this._currentMonthNavNr > 0 || this.prevMonthConstraint === -1) {
       return true;
     }
-    return this.prevMonthConstraint > (this._currentMonthNavNr * -1);
-
+    return this.prevMonthConstraint > this._currentMonthNavNr * -1;
   }
-
   // Forward Event from Calendar Cell, should be refactored (events not bubbles up here)
   _forwardEvent(e) {
     this.dispatchEvent(
-      new CustomEvent('select-date', {
+      new CustomEvent("select-date", {
         detail: e.detail
       })
     );
   }
-
   _forwardEnterEvent(e) {
     this.dispatchEvent(
-      new CustomEvent('mouse-enter-date', {
+      new CustomEvent("mouse-enter-date", {
         detail: e.detail
       })
     );
   }
-
   _forwardLeaveEvent() {
     this.dispatchEvent(
-      new CustomEvent('mouse-leave-date')
+      new CustomEvent("mouse-leave-date")
     );
   }
 }
+export {
+  PdCalendar
+};