@progressive-development/pd-calendar 0.2.21 → 0.5.0

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

@@ -1,13 +1,10 @@
-import { LitElement, html, css } from 'lit';
-import { parse } from 'fecha';
-
-import { PDColorStyles, PDFontStyles } from '@progressive-development/pd-shared-styles'
-
+import { LitElement, css, html } from "lit";
+import { parse } from "fecha";
+import { PDColorStyles, PDFontStyles } from "@progressive-development/pd-shared-styles";
 class PdCalendarCell extends LitElement {
   /**
    * @event select-date - fires when user clicks on a selectable cell.
    */
-
   static get properties() {
     return {
       /**
@@ -15,43 +12,37 @@ class PdCalendarCell extends LitElement {
        * vy the user => results in fire cell-selected.
        */
       selectEnabled: { type: Boolean },
-
       /**
        * If enabled, highlight the current day
        */
       today: { type: Boolean },
-
       /**
        * If enabled, highlight the selected day
        */
       selected: { type: Boolean },
-
       /**
        * If enabled the cell gets an special class (e.g. green day).
        */
       special: { type: Boolean },
-
       /**
        * If set shows info text in the middle (hack) of the cell (e.g. price info).
        */
       infoTxt: { type: String },
-
       /**
        * CSS class for day number inside the cell, top-left and center available
        */
       numberClass: { type: String },
-
       /* key, weekDayNumber, dayNumber could merged to date 
            on the other hand then there is the need to calculate them for each cell... */
       key: { type: String },
       weekDayNumber: { type: Number },
-      dayNumber: { type: Number },
+      dayNumber: { type: Number }
     };
   }
-
   static get styles() {
     return [
-      PDColorStyles, PDFontStyles,
+      PDColorStyles,
+      PDFontStyles,
       css`
       :host {
         display: block;
@@ -183,14 +174,13 @@ class PdCalendarCell extends LitElement {
           font-size: 1em;
         }
       }
-    `];
+    `
+    ];
   }
-
   constructor() {
-      super();
-      this.numberClass = "top-left";
+    super();
+    this.numberClass = "top-left";
   }
-
   _renderSelectableCell() {
     return html` <div
       @keypress="${this._selectableCellClicked}"
@@ -198,83 +188,59 @@ class PdCalendarCell extends LitElement {
       @mouseenter="${this._mouseEnter}"
       @mouseleave="${this._mouseLeave}"
       data-date="${this.key}"
-      class="cell cell-day ${this.numberClass} ${this.special ? 'special' : 'free'}
-      ${(this.weekDayNumber === 6 ||
-      this.weekDayNumber === 0) && !this.special
-        ? 'we'
-        : ''}"
+      class="cell cell-day ${this.numberClass} ${this.special ? "special" : "free"}
+      ${(this.weekDayNumber === 6 || this.weekDayNumber === 0) && !this.special ? "we" : ""}"
     >    
-      ${this.infoTxt
-        ? html` <div class="cell-info">${this.infoTxt}</div>`
-        : ''}
+      ${this.infoTxt ? html` <div class="cell-info">${this.infoTxt}</div>` : ""}
 
-      ${this.today
-        ? html`<div class="number-ring today"></div>`
-        : ''}
+      ${this.today ? html`<div class="number-ring today"></div>` : ""}
 
-      ${this.selected
-        ? html`<div class="number-ring selected"></div>`
-        : ''}
+      ${this.selected ? html`<div class="number-ring selected"></div>` : ""}
 
       <div class="cell-number ${this.numberClass}">${this.dayNumber}</div>
     </div>`;
   }
-
   _renderEmptyCell() {
     return html`<div
-      class="cell cell-day ${this.numberClass} ${(this.weekDayNumber === 6 ||
-      this.weekDayNumber === 0) && !this.special
-        ? 'we'
-        : ''}"
+      class="cell cell-day ${this.numberClass} ${(this.weekDayNumber === 6 || this.weekDayNumber === 0) && !this.special ? "we" : ""}"
     >
-      ${this.infoTxt
-        ? html`<div class="cell-info">${this.infoTxt}</div>`
-        : ''}
+      ${this.infoTxt ? html`<div class="cell-info">${this.infoTxt}</div>` : ""}
 
         <div class="cell-number ${this.numberClass}">${this.dayNumber}</div>
     </div>`;
   }
-
   render() {
-    return this.selectEnabled
-      ? this._renderSelectableCell()
-      : this._renderEmptyCell();
+    return this.selectEnabled ? this._renderSelectableCell() : this._renderEmptyCell();
   }
-
   _selectableCellClicked(e) {
     const dateKey = e.target.dataset.date;
     if (dateKey) {
-      // convert back to date
-      const userSelectedDate = parse(dateKey, 'YYYY-MM-DD');
+      const userSelectedDate = parse(dateKey, "YYYY-MM-DD");
       this.dispatchEvent(
-        new CustomEvent('select-date', {
+        new CustomEvent("select-date", {
           detail: {
             dateKey,
-            date: userSelectedDate,
-          },
+            date: userSelectedDate
+          }
         })
       );
     }
   }
-
   _mouseEnter() {
-    const userSelectedDate = parse(this.key, 'YYYY-MM-DD');
+    const userSelectedDate = parse(this.key, "YYYY-MM-DD");
     this.dispatchEvent(
-      new CustomEvent('mouse-enter-date', {
+      new CustomEvent("mouse-enter-date", {
         detail: {
           dateKey: this.key,
-          date: userSelectedDate,
-        },
+          date: userSelectedDate
+        }
       })
-    );    
+    );
   }
-
   _mouseLeave() {
     this.dispatchEvent(
-      new CustomEvent('mouse-leave-date')
+      new CustomEvent("mouse-leave-date")
     );
   }
-
 }
-
-window.customElements.define('pd-calendar-cell', PdCalendarCell);
+window.customElements.define("pd-calendar-cell", PdCalendarCell);

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

@@ -1,20 +1,16 @@
-/* eslint-disable lit-a11y/click-events-have-key-events */
-import { LitElement, html, css } from 'lit';
-
-export class PdYearPopup extends LitElement {
+import { LitElement, css, html } from "lit";
+class PdYearPopup extends LitElement {
   /**
    * @event select-date - fires when user clicks on a selectable cell.
    */
-
   static get properties() {
-    return {      
+    return {
       yearSelection: { type: Array },
-      currentYear: { type: String },
+      currentYear: { type: String }
     };
   }
-
   static get styles() {
-    return [      
+    return [
       css`
       :host {
         position: absolute;
@@ -51,42 +47,41 @@ export class PdYearPopup extends LitElement {
         cursor: pointer;
       }
 
-    `];
+    `
+    ];
   }
-
   constructor() {
-      super();
-      this.yearSelection = [];
-
+    super();
+    this.yearSelection = [];
   }
-
   render() {
     return html`
       <ul>
-        ${this.yearSelection.map(year => html`
-        <li class="${this.currentYear === year ? 'current' : ''}" data-year="${year}" @click="${this._yearSelection}">${year}</li>
+        ${this.yearSelection.map((year) => html`
+        <li class="${this.currentYear === year ? "current" : ""}" data-year="${year}" @click="${this._yearSelection}">${year}</li>
         `)}        
       </ul>      
     `;
   }
-
-  _yearSelection(event) {    
+  _yearSelection(event) {
     if (event.target.dataset.year) {
       this.dispatchEvent(new CustomEvent(
-        "change-year-selection", {
-        detail: {
-          year: event.target.dataset.year
+        "change-year-selection",
+        {
+          detail: {
+            year: event.target.dataset.year
+          }
         }
-      }));
+      ));
     } else {
       this._closeSelection();
-    }    
-  } 
-
-  _closeSelection() {        
+    }
+  }
+  _closeSelection() {
     this.dispatchEvent(new CustomEvent("abort-year-selection"));
-  } 
-
+  }
 }
-
-window.customElements.define('pd-year-popup', PdYearPopup);
+window.customElements.define("pd-year-popup", PdYearPopup);
+export {
+  PdYearPopup
+};

package/package.json

@@ -1,64 +1,63 @@
 {
   "name": "@progressive-development/pd-calendar",
-  "description": "progressive development calendar web component",
-  "license": "SEE LICENSE IN LICENSE",
+  "description": "progressive development calendar web component",  
   "author": "PD Progressive Development",
-  "version": "0.2.21",
-  "main": "index.js",
-  "module": "index.js",
+  "license": "SEE LICENSE IN LICENSE",
+  "version": "0.5.0",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./pd-calendar": "./dist/pd-calendar.js",
+    "./locales/be": "./dist/locales/be.js",
+    "./locales/de": "./dist/locales/de.js",
+    "./locales/en": "./dist/locales/en.js"
+  },
+  "files": [
+    "dist/",
+    "package.json",
+    "README.md",
+    "LICENSE"
+  ],
   "scripts": {
     "analyze": "cem analyze --litelement",
-    "start": "web-dev-server",
-    "lint": "eslint --ext .js,.html . --ignore-path .gitignore && prettier \"**/*.js\" --check --ignore-path .gitignore",
-    "format": "eslint --ext .js,.html . --fix --ignore-path .gitignore && prettier \"**/*.js\" --write --ignore-path .gitignore",
-    "test": "web-test-runner --coverage",
-    "test:watch": "web-test-runner --watch",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
+    "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",
+    "test": "vitest run --coverage",
+    "test:watch": "vitest --watch",
     "localizeExtract": "lit-localize extract",
-    "localizeBuild": "lit-localize build"
+    "localizeBuild": "lit-localize build",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
-  "keywords": [
-    "pd",
-    "progressive",
-    "development",
-    "component",
-    "wc",
-    "lit",
-    "calendar",
-    "date",
-    "day",
-    "month",
-    "week"
-  ],
   "dependencies": {
-    "@lit/localize": "^0.12.1",
-    "@progressive-development/pd-icon": "^0.1.23",
-    "@progressive-development/pd-shared-styles": "0.1.1",
+    "@lit/localize": "^0.12.2",
+    "@progressive-development/pd-icon": "^0.5.0",
+    "@progressive-development/pd-shared-styles": "^0.1.1",
     "fecha": "^4.2.3",
     "lit": "^2.8.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",
     "@lit/localize-tools": "^0.7.2",
-    "@open-wc/eslint-config": "^4.3.0",
-    "@open-wc/testing": "^3.0.0-next.5",
-    "@storybook/addon-essentials": "^7.6.4",
-    "@storybook/addon-links": "^7.6.4",
-    "@storybook/blocks": "^7.6.4",
-    "@storybook/web-components": "^7.6.4",
-    "@storybook/web-components-vite": "^7.6.4",
-    "@web/dev-server": "^0.1.38",
-    "@web/test-runner": "^0.13.31",
+    "@storybook/addon-essentials": "^7.6.20",
+    "@storybook/addon-links": "^7.6.20",
+    "@storybook/blocks": "^7.5.3",
+    "@storybook/web-components": "^7.5.3",
+    "@storybook/web-components-vite": "^7.6.20",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.10.0",
     "eslint-plugin-storybook": "^0.6.15",
     "husky": "^4.3.8",
     "lint-staged": "^10.5.4",
     "prettier": "^2.8.8",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "storybook": "^7.6.4"
+    "rollup-plugin-visualizer": "^5.13.1",
+    "storybook": "^7.6.20",
+    "vite": "^5.4.11",
+    "vitest": "^2.1.8"
   },
   "customElements": "custom-elements.json",
   "eslintConfig": {
@@ -82,5 +81,18 @@
       "eslint --fix",
       "prettier --write"
     ]
-  }
+  },
+  "keywords": [
+    "pd",
+    "progressive",
+    "development",
+    "component",
+    "wc",
+    "lit",
+    "calendar",
+    "date",
+    "day",
+    "month",
+    "week"
+  ]
 }

package/.editorconfig

@@ -1,29 +0,0 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
-# editorconfig.org
-
-root = true
-
-
-[*]
-
-# Change these settings to your own preference
-indent_style = space
-indent_size = 2
-
-# We recommend you to keep these unchanged
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false
-
-[*.json]
-indent_size = 2
-
-[*.{html,js,md}]
-block_comment_start = /**
-block_comment = *
-block_comment_end = */

package/.storybook/main.js

@@ -1,13 +0,0 @@
-/** @type { import('@storybook/web-components-vite').StorybookConfig } */
-const config = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
-  framework: {
-    name: '@storybook/web-components-vite',
-    options: {},
-  },
-  docs: {
-    autodocs: 'tag',
-  },
-};
-export default config;

package/.storybook/preview.js

@@ -1,14 +0,0 @@
-/** @type { import('@storybook/web-components').Preview } */
-const preview = {
-  parameters: {
-    actions: { argTypesRegex: '^on[A-Z].*' },
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-  },
-};
-
-export default preview;

package/demo/index.html

@@ -1,29 +0,0 @@
-<!doctype html>
-<html lang="en-GB">
-<head>
-  <meta charset="utf-8">
-  <style>
-    body {
-      background: #fafafa;
-    }
-  </style>
-</head>
-<body>
-  <div id="demo"></div>
-
-  <script type="module">
-    import { html, render } from 'lit';
-    import '../pd-calendar.js';
-
-    const title = 'Hello owc World!';
-    render(
-      html`
-        <pd-calendar .title=${title}>
-          some light-dom
-        </pd-calendar>
-      `,
-      document.querySelector('#demo')
-    );
-  </script>
-</body>
-</html>

package/index.js

@@ -1 +0,0 @@
-export { PdCalendar } from './src/PdCalendar.js';

package/lit-localize.json

@@ -1,18 +0,0 @@
-{
-    "$schema": "https://raw.githubusercontent.com/lit/lit/main/packages/localize-tools/config.schema.json",
-    "sourceLocale": "dev",
-    "targetLocales": ["de", "en", "be"],
-    "inputFiles": [
-      "src/**/*.js"
-    ],
-    "output": {
-        "mode": "runtime",
-        "localeCodesModule": "src/generated/locale-codes.js",
-        "outputDir": "src/generated/locale"
-        
-    },
-    "interchange": {
-      "format": "xliff",
-      "xliffDir": "./xliff/"
-    }
-  }

package/pd-calendar.js

@@ -1,3 +0,0 @@
-import { PdCalendar } from './src/PdCalendar.js';
-
-window.customElements.define('pd-calendar', PdCalendar);

package/src/generated/locale/be.js

@@ -1,39 +0,0 @@
-
-    // Do not modify this file by hand!
-    // Re-generate this file by running lit-localize
-
-    
-    
-
-    /* eslint-disable no-irregular-whitespace */
-    /* eslint-disable @typescript-eslint/no-explicit-any */
-
-    export const templates = {
-      'pd.datepicker.month.jan': `Januar`,
-'pd.datepicker.month.feb': `Februar`,
-'pd.datepicker.month.mar': `März`,
-'pd.datepicker.month.apr': `April`,
-'pd.datepicker.month.may': `Mai`,
-'pd.datepicker.month.jun': `Juni`,
-'pd.datepicker.month.jul': `Juli`,
-'pd.datepicker.month.aug': `August`,
-'pd.datepicker.month.sep': `September`,
-'pd.datepicker.month.oct': `Oktober`,
-'pd.datepicker.month.nov': `November`,
-'pd.datepicker.month.dec': `Dezember`,
-'pd.datepicker.day.sun': `Sonntag`,
-'pd.datepicker.day.mon': `Montag`,
-'pd.datepicker.day.tue': `Dienstag`,
-'pd.datepicker.day.wed': `Mittwoch`,
-'pd.datepicker.day.thi': `Donnerstag`,
-'pd.datepicker.day.fri': `Freitag`,
-'pd.datepicker.day.sat': `Samstag`,
-'pd.datepicker.shortday.mon': `Mo`,
-'pd.datepicker.shortday.tue': `Di`,
-'pd.datepicker.shortday.wed': `Mi`,
-'pd.datepicker.shortday.thi': `Do`,
-'pd.datepicker.shortday.fri': `Fr`,
-'pd.datepicker.shortday.sat': `Sa`,
-'pd.datepicker.shortday.sun': `So`,
-    };
-  

package/src/generated/locale/de.js

@@ -1,39 +0,0 @@
-
-    // Do not modify this file by hand!
-    // Re-generate this file by running lit-localize
-
-    
-    
-
-    /* eslint-disable no-irregular-whitespace */
-    /* eslint-disable @typescript-eslint/no-explicit-any */
-
-    export const templates = {
-      'pd.datepicker.month.jan': `Januar`,
-'pd.datepicker.month.feb': `Februar`,
-'pd.datepicker.month.mar': `März`,
-'pd.datepicker.month.apr': `April`,
-'pd.datepicker.month.may': `Mai`,
-'pd.datepicker.month.jun': `Juni`,
-'pd.datepicker.month.jul': `Juli`,
-'pd.datepicker.month.aug': `August`,
-'pd.datepicker.month.sep': `September`,
-'pd.datepicker.month.oct': `Oktober`,
-'pd.datepicker.month.nov': `November`,
-'pd.datepicker.month.dec': `Dezember`,
-'pd.datepicker.day.sun': `Sonntag`,
-'pd.datepicker.day.mon': `Montag`,
-'pd.datepicker.day.tue': `Dienstag`,
-'pd.datepicker.day.wed': `Mittwoch`,
-'pd.datepicker.day.thi': `Donnerstag`,
-'pd.datepicker.day.fri': `Freitag`,
-'pd.datepicker.day.sat': `Samstag`,
-'pd.datepicker.shortday.mon': `Mo`,
-'pd.datepicker.shortday.tue': `Di`,
-'pd.datepicker.shortday.wed': `Mi`,
-'pd.datepicker.shortday.thi': `Do`,
-'pd.datepicker.shortday.fri': `Fr`,
-'pd.datepicker.shortday.sat': `Sa`,
-'pd.datepicker.shortday.sun': `So`,
-    };
-  

package/src/generated/locale/en.js

@@ -1,39 +0,0 @@
-
-    // Do not modify this file by hand!
-    // Re-generate this file by running lit-localize
-
-    
-    
-
-    /* eslint-disable no-irregular-whitespace */
-    /* eslint-disable @typescript-eslint/no-explicit-any */
-
-    export const templates = {
-      'pd.datepicker.month.jan': `Januar`,
-'pd.datepicker.month.feb': `Februar`,
-'pd.datepicker.month.mar': `März`,
-'pd.datepicker.month.apr': `April`,
-'pd.datepicker.month.may': `Mai`,
-'pd.datepicker.month.jun': `Juni`,
-'pd.datepicker.month.jul': `Juli`,
-'pd.datepicker.month.aug': `August`,
-'pd.datepicker.month.sep': `September`,
-'pd.datepicker.month.oct': `Oktober`,
-'pd.datepicker.month.nov': `November`,
-'pd.datepicker.month.dec': `Dezember`,
-'pd.datepicker.day.sun': `Sonntag`,
-'pd.datepicker.day.mon': `Montag`,
-'pd.datepicker.day.tue': `Dienstag`,
-'pd.datepicker.day.wed': `Mittwoch`,
-'pd.datepicker.day.thi': `Donnerstag`,
-'pd.datepicker.day.fri': `Freitag`,
-'pd.datepicker.day.sat': `Samstag`,
-'pd.datepicker.shortday.mon': `Mo`,
-'pd.datepicker.shortday.tue': `Di`,
-'pd.datepicker.shortday.wed': `Mi`,
-'pd.datepicker.shortday.thi': `Do`,
-'pd.datepicker.shortday.fri': `Fr`,
-'pd.datepicker.shortday.sat': `Sa`,
-'pd.datepicker.shortday.sun': `So`,
-    };
-  

package/src/generated/locale-codes.js

@@ -1,27 +0,0 @@
-// Do not modify this file by hand!
-// Re-generate this file by running lit-localize.
-
-/**
- * The locale code that templates in this source code are written in.
- */
-export const sourceLocale = `dev`;
-
-/**
- * The other locale codes that this application is localized into. Sorted
- * lexicographically.
- */
-export const targetLocales = [
-  `be`,
-  `de`,
-  `en`,
-];
-
-/**
- * All valid project locale codes. Sorted lexicographically.
- */
-export const allLocales = [
-  `be`,
-  `de`,
-  `dev`,
-  `en`,
-];