@progressive-development/pd-calendar 0.2.11 → 0.2.13

package/lit-localize.json

@@ -0,0 +1,18 @@
+{
+    "$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/package.json

@@ -3,7 +3,7 @@
   "description": "progressive development calendar web component",
   "license": "SEE LICENSE IN LICENSE",
   "author": "PD Progressive Development",
-  "version": "0.2.11",
+  "version": "0.2.13",
   "main": "index.js",
   "module": "index.js",
   "scripts": {
@@ -14,7 +14,9 @@
     "test": "web-test-runner --coverage",
     "test:watch": "web-test-runner --watch",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "localizeExtract": "lit-localize extract",
+    "localizeBuild": "lit-localize build"
   },
   "keywords": [
     "pd",
@@ -30,6 +32,7 @@
     "week"
   ],
   "dependencies": {
+    "@lit/localize": "^0.12.1",
     "@progressive-development/pd-icon": "^0.1.20",
     "@progressive-development/pd-shared-styles": "0.1.1",
     "fecha": "^4.2.3",
@@ -37,6 +40,7 @@
   },
   "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",

package/src/PdCalendar.js

@@ -1,19 +1,59 @@
+/* eslint-disable lit-a11y/click-events-have-key-events */
 /**
  * @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';
-
-// todo: use existing shortnames for locale here
-const weekDays = ['Ma', 'Di', 'Wo', 'Do', 'Vr', 'Za', 'Zo'];
-const weekDaysWithoutWE = ['Ma', 'Di', 'Wo', 'Do', 'Vr'];
+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 LOCALES = loadLocales();
 
 // list views (list, month, week)
 const VIEW_LIST = 1;
@@ -85,6 +125,7 @@ export class PdCalendar extends LitElement {
     return {
       refDate: { type: Object },
       selectableDates: { type: Boolean},
+      withYearPopup: { type: Boolean},
       showSelection: { type: Boolean},
       hideWeekend: { type: Boolean, reflect: true },
       prevMonthConstraint: { type: Number },
@@ -97,7 +138,8 @@ export class PdCalendar extends LitElement {
        numberClass: { type: String },
 
       _currentDate: { type: Object },
-      _viewType: { type: Number }
+      _viewType: { type: Number },
+      _wheelDelta: { type: Number, state: true },      
     };
   }
 
@@ -185,6 +227,7 @@ export class PdCalendar extends LitElement {
       }
 
       .content-title {
+        position: relative;
         font-size: var(--pd-calendar-title-font-size, 1.2em);
         font-weight: bold;
       }
@@ -201,11 +244,22 @@ export class PdCalendar extends LitElement {
         --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;
@@ -213,7 +267,7 @@ export class PdCalendar extends LitElement {
     this.hideWeekend = false;
     this.selectableDates = false;
     this.showSelection = false;
-
+    this._wheelDelta = 0;    
     this._currentMonthNavNr = 0;
   }  
 
@@ -330,16 +384,22 @@ export class PdCalendar extends LitElement {
               ></pd-icon>
             </div>
 
-            <div class="content-title">
-              ${this._monthName} ${this._year}
+            <div id="titleContentId" class="content-title">              
+            ${this._monthName} ${this.withYearPopup ? html`
+              <span class="year-popup-link" @click="${this._openYearPopup}">${this._year}</span>
+              ` : html`${this._year}`}
             </div>
   
           </div>          
                     
         </div>
 
-        <div class="content grid-container ${sizeVar}">
-          ${(this.hideWeekend ? weekDaysWithoutWE : weekDays).map(
+        <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(
@@ -351,6 +411,46 @@ export class PdCalendar extends LitElement {
     `;
   }
 
+  // eslint-disable-next-line class-methods-use-this
+  _openYearPopup() {
+    
+    const popup = new PdYearPopup();
+    popup.yearSelection = ["2024", "2025"];
+    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(
@@ -391,6 +491,47 @@ export class PdCalendar extends LitElement {
     }
   }
 
+  // eslint-disable-next-line class-methods-use-this
+  _wheelEvent(e) {    
+
+    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) {    
+    this._wheelDelta = e.changedTouches[0].screenX;    
+    e.preventDefault();
+    e.stopPropagation();    
+  }
+
+  _touchEndEvent(e) {    
+    const touchEndX = e.changedTouches[0].screenX;            
+    
+    const result = this._wheelDelta - touchEndX;
+    if (result < (TOUCH_MIN_MOVE * -1)) {
+      this._previousMonth();
+    } else if (result > TOUCH_MIN_MOVE) {
+      this._nextMonth();
+    }
+    
+    e.preventDefault();
+    e.stopPropagation();    
+  }
+
   _initFromDate(date) {
     this._monthName = date.toLocaleString('default', { month: 'long' });
     this._year = date.getFullYear();

package/src/PdYearPopup.js

@@ -0,0 +1,91 @@
+/* eslint-disable lit-a11y/click-events-have-key-events */
+import { LitElement, html, css } from 'lit';
+
+export class PdYearPopup extends LitElement {
+  /**
+   * @event select-date - fires when user clicks on a selectable cell.
+   */
+
+  static get properties() {
+    return {      
+      yearSelection: { type: Array },
+      currentYear: { type: String },
+    };
+  }
+
+  static get styles() {
+    return [      
+      css`
+      :host {
+        position: absolute;
+        z-index: 1;
+        top: 25px;
+        right: 0;
+      }
+
+      ul {        
+        list-style: none;
+        max-width: 200px;
+        margin: 0;
+        padding: 0;
+        background: var(--pd-default-light-col, #cdeaf844);              
+        box-shadow: 3px 3px 5px 0 #ccc;
+        border: 1px solid var(--pd-default-col);
+
+        display: flex;
+        flex-direction: column;
+
+      }
+
+      li {
+        text-align: center;        
+        padding: 10px;
+        color: var(--pd-default-dark-col)
+      }
+
+      .current {        
+      }
+
+      .selectable:hover {
+        cursor: pointer;
+      }
+
+    `];
+  }
+
+  constructor() {
+      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>
+        `)}        
+      </ul>      
+    `;
+  }
+
+  _yearSelection(event) {    
+    if (event.target.dataset.year) {
+      this.dispatchEvent(new CustomEvent(
+        "change-year-selection", {
+        detail: {
+          year: event.target.dataset.year
+        }
+      }));
+    } else {
+      this._closeSelection();
+    }    
+  } 
+
+  _closeSelection() {        
+    this.dispatchEvent(new CustomEvent("abort-year-selection"));
+  } 
+
+}
+
+window.customElements.define('pd-year-popup', PdYearPopup);

package/src/generated/locale/be.js

@@ -0,0 +1,39 @@
+
+    // 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

@@ -0,0 +1,39 @@
+
+    // 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

@@ -0,0 +1,39 @@
+
+    // 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

@@ -0,0 +1,27 @@
+// 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`,
+];

package/src/stories/index.stories.js

@@ -43,7 +43,7 @@ function CalendarSmallTemplate({ refDate, hideWeekend, width, cellHeight, prevMo
         
       }
     </style>
-    <pd-calendar .refDate="${refDate}" selectableDates showSelection ?hideWeekend="${hideWeekend}" class="calendar-small" prevMonthConstraint="${prevMonthConstraint}" 
+    <pd-calendar withYearPopup .refDate="${refDate}" selectableDates showSelection ?hideWeekend="${hideWeekend}" class="calendar-small" prevMonthConstraint="${prevMonthConstraint}" 
       nextMonthConstraint="${nextMonthConstraint}" numberClass="center"
       @mouse-enter-date="${(e) => {
         console.log("Mouse Enter Event: ", e);

package/xliff/be.xlf

@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+<file target-language="be" source-language="dev" original="lit-localize-inputs" datatype="plaintext">
+<body>
+<trans-unit id="pd.datepicker.month.jan">
+  <source>Januar</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.month.feb">
+  <source>Februar</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.month.mar">
+  <source>März</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.month.apr">
+  <source>April</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.month.may">
+  <source>Mai</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.month.jun">
+  <source>Juni</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.month.jul">
+  <source>Juli</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.month.aug">
+  <source>August</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.month.sep">
+  <source>September</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.month.oct">
+  <source>Oktober</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.month.nov">
+  <source>November</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.month.dec">
+  <source>Dezember</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.day.sun">
+  <source>Sonntag</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.day.mon">
+  <source>Montag</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.day.tue">
+  <source>Dienstag</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.day.wed">
+  <source>Mittwoch</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.day.thi">
+  <source>Donnerstag</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.day.fri">
+  <source>Freitag</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.day.sat">
+  <source>Samstag</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.shortday.mon">
+  <source>Mo</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.shortday.tue">
+  <source>Di</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.shortday.wed">
+  <source>Mi</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.shortday.thi">
+  <source>Do</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.shortday.fri">
+  <source>Fr</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.shortday.sat">
+  <source>Sa</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.shortday.sun">
+  <source>So</source>
+</trans-unit>
+</body>
+</file>
+</xliff>

package/xliff/de.xlf

@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+<file target-language="de" source-language="dev" original="lit-localize-inputs" datatype="plaintext">
+<body>
+<trans-unit id="pd.datepicker.month.jan">
+  <source>Januar</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.month.feb">
+  <source>Februar</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.month.mar">
+  <source>März</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.month.apr">
+  <source>April</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.month.may">
+  <source>Mai</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.month.jun">
+  <source>Juni</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.month.jul">
+  <source>Juli</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.month.aug">
+  <source>August</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.month.sep">
+  <source>September</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.month.oct">
+  <source>Oktober</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.month.nov">
+  <source>November</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.month.dec">
+  <source>Dezember</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.day.sun">
+  <source>Sonntag</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.day.mon">
+  <source>Montag</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.day.tue">
+  <source>Dienstag</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.day.wed">
+  <source>Mittwoch</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.day.thi">
+  <source>Donnerstag</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.day.fri">
+  <source>Freitag</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.day.sat">
+  <source>Samstag</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.shortday.mon">
+  <source>Mo</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.shortday.tue">
+  <source>Di</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.shortday.wed">
+  <source>Mi</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.shortday.thi">
+  <source>Do</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.shortday.fri">
+  <source>Fr</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.shortday.sat">
+  <source>Sa</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.shortday.sun">
+  <source>So</source>
+</trans-unit>
+</body>
+</file>
+</xliff>

package/xliff/en.xlf

@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+<file target-language="en" source-language="dev" original="lit-localize-inputs" datatype="plaintext">
+<body>
+<trans-unit id="pd.datepicker.month.jan">
+  <source>Januar</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.month.feb">
+  <source>Februar</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.month.mar">
+  <source>März</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.month.apr">
+  <source>April</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.month.may">
+  <source>Mai</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.month.jun">
+  <source>Juni</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.month.jul">
+  <source>Juli</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.month.aug">
+  <source>August</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.month.sep">
+  <source>September</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.month.oct">
+  <source>Oktober</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.month.nov">
+  <source>November</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.month.dec">
+  <source>Dezember</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.day.sun">
+  <source>Sonntag</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.day.mon">
+  <source>Montag</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.day.tue">
+  <source>Dienstag</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.day.wed">
+  <source>Mittwoch</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.day.thi">
+  <source>Donnerstag</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.day.fri">
+  <source>Freitag</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.day.sat">
+  <source>Samstag</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.shortday.mon">
+  <source>Mo</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.shortday.tue">
+  <source>Di</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.shortday.wed">
+  <source>Mi</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.shortday.thi">
+  <source>Do</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.shortday.fri">
+  <source>Fr</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.shortday.sat">
+  <source>Sa</source>
+</trans-unit>
+<trans-unit id="pd.datepicker.shortday.sun">
+  <source>So</source>
+</trans-unit>
+</body>
+</file>
+</xliff>