@progressive-development/pd-calendar 0.5.4 → 0.6.1

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@progressive-development/pd-calendar",
-  "description": "progressive development calendar web component",
+  "version": "0.6.1",
+  "description": "Webcomponent for calendar",
   "author": "PD Progressive Development",
   "license": "SEE LICENSE IN LICENSE",
-  "version": "0.5.4",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": "./dist/index.js",
     "./pd-calendar": "./dist/pd-calendar.js",
@@ -20,70 +21,53 @@
     "LICENSE"
   ],
   "scripts": {
-    "analyze": "cem analyze --litelement",
+    "analyze": "cem analyze --litelement --exclude dist,demo",
     "start": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "lint": "eslint --ext .js,.html . --ignore-path .gitignore && prettier \"**/*.{js,html}\" --check --ignore-path .gitignore",
-    "format": "eslint --ext .js,.html . --fix --ignore-path .gitignore && prettier \"**/*.{js,html}\" --write --ignore-path .gitignore",
+    "clean": "rm -rf dist",
+    "lint": "eslint --ext .ts,.html src --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
+    "format": "eslint --ext .ts,.html src --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
     "test": "vitest run --coverage",
     "test:watch": "vitest --watch",
+    "check": "npm run lint && npm run build",
+    "prepublishOnly": "npm run clean && npm run check",
     "localizeExtract": "lit-localize extract",
     "localizeBuild": "lit-localize build",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@lit/localize": "^0.11.4",
-    "@progressive-development/pd-icon": "^0.5.0",
-    "@progressive-development/pd-shared-styles": "^0.1.1",
+    "@lit/localize": "^0.12.2",
+    "@progressive-development/pd-icon": "^0.6.3",
+    "@progressive-development/pd-shared-styles": "^0.2.1",
     "fecha": "^4.2.3",
-    "lit": "^2.8.0"
+    "lit": "^3.3.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.3.4",
+    "@chromatic-com/storybook": "^1.9.0",
     "@custom-elements-manifest/analyzer": "^0.4.17",
     "@lit/localize-tools": "^0.6.10",
-    "@storybook/addon-essentials": "^8.0.10",
-    "@storybook/addon-links": "^8.0.10",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-links": "^8.6.14",
     "@storybook/blocks": "^8.0.10",
-    "@storybook/test": "^8.0.10",
+    "@storybook/test": "^8.6.14",
     "@storybook/web-components": "^8.0.10",
-    "@storybook/web-components-vite": "^8.0.10",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.10.0",
+    "@storybook/web-components-vite": "^8.6.14",
+    "@typescript-eslint/eslint-plugin": "^8.32.1",
+    "@typescript-eslint/parser": "^8.32.1",
+    "eslint": "^8.57.1",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-storybook": "^0.8.0",
-    "husky": "^4.3.8",
-    "lint-staged": "^10.5.4",
-    "prettier": "^2.8.8",
-    "rollup-plugin-visualizer": "^5.13.1",
-    "storybook": "^8.0.10",
-    "vite": "^5.4.11",
-    "vitest": "^2.1.8"
+    "prettier": "^3.5.3",
+    "rollup-plugin-visualizer": "^5.14.0",
+    "storybook": "^8.6.14",
+    "typescript": "^5.8.3",
+    "vite": "^5.4.19",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^2.1.9"
   },
   "customElements": "custom-elements.json",
-  "eslintConfig": {
-    "extends": [
-      "@open-wc",
-      "prettier",
-      "plugin:storybook/recommended"
-    ]
-  },
-  "prettier": {
-    "singleQuote": true,
-    "arrowParens": "avoid"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "lint-staged": {
-    "*.js": [
-      "eslint --fix",
-      "prettier --write"
-    ]
-  },
   "keywords": [
     "pd",
     "progressive",

package/dist/src/PdCalendar.js

@@ -1,513 +0,0 @@
-import { LitElement, css, html } from "lit";
-import { msg, updateWhenLocaleChanges } from "@lit/localize";
-import { format } from "fecha";
-import "@progressive-development/pd-icon/pd-icon";
-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.
- */
-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 LOCALES = loadLocales();
-const VIEW_LIST = 1;
-const VIEW_MONTH = 2;
-const VIEW_WEEK = 3;
-const isToday = (someDate) => {
-  if (!someDate) {
-    return false;
-  }
-  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();
-};
-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() {
-    return {
-      refDate: { type: Object },
-      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 },
-      _currentDate: { type: Object },
-      _viewType: { type: Number },
-      _wheelDelta: { type: Number, state: true }
-    };
-  }
-  static get styles() {
-    return [
-      PDColorStyles,
-      PDFontStyles,
-      css`
-      :host {
-        
-        --my-cell-height: var(--pd-calendar-cell-height, 70px);
-
-        display: block;
-        /*padding: 8px;
-        width: 100vw;
-        height: 100vh;*/
-      }
-
-      :host([hideWeekend]) .grid-container {
-        grid-template-columns: repeat(5, minmax(0, 1fr));
-      }
-
-      /* Layout Grid for the Calendar Component => Not really needed at the moment, more a test */
-      .layout-container {
-        width: var(--pd-calendar-width, 100%);
-        min-width: 220px;
-        height: 100%;
-        display: grid;
-        grid-template-columns: 1fr 1fr 1fr;
-        grid-template-rows: 40px auto;
-        gap: 1px;
-        grid-template-areas:
-          'header header header'
-          'content content content';
-      }
-
-      /* Grid Area positions for layout container above */
-      .header {
-        grid-area: header;
-        position: relative;
-        font-family: var(--pd-default-font-title-family);
-        color: var(--pd-default-font-title-col);
-        display: flex;
-        justify-content: left;
-      }
-
-      .header-main {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        width: 100%;
-      }
-
-      .content {
-        grid-area: content;
-      }
-      .footer {
-        grid-area: footer;
-      }
-
-      /* Grid definition for calendar day items */
-      .grid-container {
-        position: relative;
-        display: grid;
-        grid-template-columns: repeat(7, minmax(0, 1fr));
-        gap: 3px;
-      }
-
-      .grid-container.max {
-        grid-template-rows: minmax(10px, 30px) repeat(6, minmax(var(--my-cell-height), 1fr));
-      }
-
-      .grid-container.normal {
-        grid-template-rows: minmax(10px, 30px) repeat(5, minmax(var(--my-cell-height), 1fr));
-      }
-
-      .title-week-day {        
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background-color: var(--pd-calendar-week-title-bg-col, var(--pd-default-dark-col));        
-        font-size: var(--pd-calendar-weekday-title-font-size, 1em);
-        font-weight: bold;
-        color: var(--pd-calendar-week-title-font-col, var(--pd-default-bg-col));
-        font-family: var(--pd-default-font-title-family);
-      }
-
-      .content-title {
-        position: relative;
-        font-size: var(--pd-calendar-title-font-size, 1.2em);
-        font-weight: bold;
-      }
-
-      .icon-container {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 5px;
-      }
-
-      .arrow {
-        cursor: pointer;
-        --pd-icon-size: var(--pd-calendar-title-icon-size, 1.2em);
-        --pd-icon-bg-col-hover: lightgrey;
-      }
-
-      .year-popup-link {
-        
-      }
-
-      .year-popup-link:hover {
-        cursor: pointer;
-        color: var(--pd-default-hover-col);
-      }
-
-    `
-    ];
-  }
-  constructor() {
-    super();
-    updateWhenLocaleChanges(this);
-    this.data = {};
-    this._viewType = VIEW_MONTH;
-    this.numberClass = "top-left";
-    this.hideWeekend = false;
-    this.selectableDates = false;
-    this.showSelection = false;
-    this._wheelDelta = 0;
-    this._currentMonthNavNr = 0;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    const ref = this.refDate || /* @__PURE__ */ new Date();
-    this._initFromDate(ref);
-  }
-  update(changedProperties) {
-    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 "";
-      case VIEW_MONTH:
-        return this.renderMonthCalendar();
-      case VIEW_WEEK:
-        return this.renderCalendar();
-      default:
-        return this.renderMonthCalendar();
-    }
-  }
-  /*
-    renderListCalendar() {
-      // TODO
-    }
-  */
-  renderMonthCalendar() {
-    const itemTemplates = [];
-    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");
-        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 !== void 0}"
-              ?special="${special}"
-              numberClass="${this.numberClass}"
-              @select-date="${this._forwardEvent}"
-              @mouse-enter-date="${this._forwardEnterEvent}"
-              @mouse-leave-date="${this._forwardLeaveEvent}"
-              ?today="${this.selectableDates && isToday(tmpDate)}"
-              ?selected="${this.showSelection && isSelected(this.refDate, tmpDate)}"
-            ></pd-calendar-cell>
-          `);
-      }
-    }
-    return html`
-      <div class="layout-container">
-        <div class="header">
-          
-          <div class="header-main">            
-
-            <div class="icon-container">
-              <pd-icon
-                @click="${this._previousMonth}"
-                class="arrow"
-                activeIcon
-                icon="previousArrow"
-              ></pd-icon>            
-
-              <pd-icon
-                @click="${this._nextMonth}"
-                class="arrow"
-                activeIcon
-                icon="nextArrow"
-              ></pd-icon>
-            </div>
-
-            <div id="titleContentId" class="content-title">              
-            ${this._monthName} ${this.withYearPopup && this.withYearPopup.length > 0 ? html`
-              <span class="year-popup-link" @click="${this._openYearPopup}">${this._year}</span>
-              ` : html`${this._year}`}
-            </div>
-  
-          </div>          
-                    
-        </div>
-
-        <div 
-          @wheel="${this._wheelEvent}"
-          @touchstart="${this._touchStartEvent}"
-          @touchend="${this._touchEndEvent}"
-          class="content grid-container ${sizeVar}">
-          ${this._getWeekDays().map(
-      (shortName) => html` <div class="title-week-day">${shortName}</div>`
-    )}
-          ${this._daysFromPreviousMonth.map(
-      () => 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;
-      if (newYear) {
-        const newDate = new Date(
-          this._currentDate.getFullYear(),
-          this._currentDate.getMonth(),
-          1
-        );
-        newDate.setFullYear(newYear);
-        this.dispatchEvent(
-          new CustomEvent("change-month", {
-            detail: {
-              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(
-        this._currentDate.getFullYear(),
-        this._currentDate.getMonth(),
-        1
-      );
-      newDate.setMonth(newDate.getMonth() + 1);
-      this.dispatchEvent(
-        new CustomEvent("change-month", {
-          detail: {
-            newDate,
-            next: true
-          }
-        })
-      );
-      this._currentMonthNavNr += 1;
-      this._initFromDate(newDate);
-    }
-  }
-  _previousMonth() {
-    if (this._checkPrevMonthConstraint()) {
-      const newDate = new Date(
-        this._currentDate.getFullYear(),
-        this._currentDate.getMonth(),
-        1
-      );
-      newDate.setMonth(newDate.getMonth() - 1);
-      this.dispatchEvent(
-        new CustomEvent("change-month", {
-          detail: {
-            newDate,
-            prev: true
-          }
-        })
-      );
-      this._currentMonthNavNr -= 1;
-      this._initFromDate(newDate);
-    }
-  }
-  // eslint-disable-next-line class-methods-use-this
-  _wheelEvent(e) {
-    if (this.withWheelNavigation) {
-      this._wheelDelta += e.deltaY;
-      if (this._wheelDelta > 360) {
-        this._wheelDelta = 0;
-        this._nextMonth();
-      }
-      if (this._wheelDelta < -360) {
-        this._wheelDelta = 0;
-        this._previousMonth();
-      }
-    }
-    e.preventDefault();
-    e.stopPropagation();
-  }
-  // eslint-disable-next-line class-methods-use-this
-  _touchStartEvent(e) {
-    if (this.withTouchNavigation) {
-      this._wheelDelta = e.changedTouches[0].screenX;
-    }
-    e.stopPropagation();
-  }
-  _touchEndEvent(e) {
-    if (this.withTouchNavigation) {
-      const touchEndX = e.changedTouches[0].screenX;
-      const result = this._wheelDelta - touchEndX;
-      if (result < TOUCH_MIN_MOVE * -1) {
-        this._nextMonth();
-      } else if (result > TOUCH_MIN_MOVE) {
-        this._previousMonth();
-      }
-    }
-    e.stopPropagation();
-  }
-  _initFromDate(date) {
-    this._monthName = date.toLocaleString("default", { month: "long" });
-    this._year = date.getFullYear();
-    this._daysFromPreviousMonth = PdCalendar._getPreviousMonthDays(date);
-    const newDate2 = new Date(date.getFullYear(), date.getMonth() + 1, 0);
-    this._numberOfDays = newDate2.getDate();
-    this._currentDate = date;
-  }
-  static _getPreviousMonthDays(date) {
-    const date1 = new Date(date.getFullYear(), date.getMonth(), 1);
-    const missingDays = date1.getDay() > 0 ? Math.abs(1 - date1.getDay()) : 6;
-    const missDayArray = [];
-    for (let i = 1; i <= missingDays; i += 1) {
-      date1.setDate(date1.getDate() - 1);
-      missDayArray.push(
-        new Date(date1.getFullYear(), date1.getMonth(), date1.getDate())
-      );
-    }
-    return missDayArray;
-  }
-  _checkNextMonthConstraint() {
-    if (this.nextMonthConstraint > 0) {
-      return this.nextMonthConstraint > this._currentMonthNavNr;
-    }
-    if (this.nextMonthConstraint === -1) {
-      return true;
-    }
-    return false;
-  }
-  _checkPrevMonthConstraint() {
-    if (this._currentMonthNavNr > 0 || this.prevMonthConstraint === -1) {
-      return true;
-    }
-    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", {
-        detail: e.detail
-      })
-    );
-  }
-  _forwardEnterEvent(e) {
-    this.dispatchEvent(
-      new CustomEvent("mouse-enter-date", {
-        detail: e.detail
-      })
-    );
-  }
-  _forwardLeaveEvent() {
-    this.dispatchEvent(
-      new CustomEvent("mouse-leave-date")
-    );
-  }
-}
-export {
-  PdCalendar
-};