@progressive-development/pd-calendar 0.6.8 → 0.9.2

package/dist/generated/locales/be.d.ts

@@ -11,6 +11,7 @@ export declare const templates: {
     "pd.datepicker.month.nov": string;
     "pd.datepicker.month.oct": string;
     "pd.datepicker.month.sep": string;
+    "pd.datepicker.reset": string;
     "pd.datepicker.shortday.fri": string;
     "pd.datepicker.shortday.mon": string;
     "pd.datepicker.shortday.sat": string;
@@ -18,5 +19,8 @@ export declare const templates: {
     "pd.datepicker.shortday.thi": string;
     "pd.datepicker.shortday.tue": string;
     "pd.datepicker.shortday.wed": string;
+    "pd.datepicker.time": string;
+    "pd.datepicker.today": string;
+    "pd.form.field.selectDateTimeRequired": string;
 };
 //# sourceMappingURL=be.d.ts.map

package/dist/generated/locales/be.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"be.d.ts","sourceRoot":"","sources":["../../../src/generated/locales/be.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;CAoBrB,CAAC"}
+{"version":3,"file":"be.d.ts","sourceRoot":"","sources":["../../../src/generated/locales/be.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;CAwBrB,CAAC"}

package/dist/generated/locales/de.d.ts

@@ -18,5 +18,9 @@ export declare const templates: {
     "pd.datepicker.shortday.fri": string;
     "pd.datepicker.shortday.sat": string;
     "pd.datepicker.shortday.sun": string;
+    "pd.form.field.selectDateTimeRequired": string;
+    "pd.datepicker.time": string;
+    "pd.datepicker.today": string;
+    "pd.datepicker.reset": string;
 };
 //# sourceMappingURL=de.d.ts.map

package/dist/generated/locales/de.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"de.d.ts","sourceRoot":"","sources":["../../../src/generated/locales/de.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;CAoBrB,CAAC"}
+{"version":3,"file":"de.d.ts","sourceRoot":"","sources":["../../../src/generated/locales/de.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;CAwBrB,CAAC"}

package/dist/generated/locales/en.d.ts

@@ -11,6 +11,7 @@ export declare const templates: {
     "pd.datepicker.month.nov": string;
     "pd.datepicker.month.oct": string;
     "pd.datepicker.month.sep": string;
+    "pd.datepicker.reset": string;
     "pd.datepicker.shortday.fri": string;
     "pd.datepicker.shortday.mon": string;
     "pd.datepicker.shortday.sat": string;
@@ -18,5 +19,8 @@ export declare const templates: {
     "pd.datepicker.shortday.thi": string;
     "pd.datepicker.shortday.tue": string;
     "pd.datepicker.shortday.wed": string;
+    "pd.datepicker.time": string;
+    "pd.datepicker.today": string;
+    "pd.form.field.selectDateTimeRequired": string;
 };
 //# sourceMappingURL=en.d.ts.map

package/dist/generated/locales/en.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../src/generated/locales/en.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;CAoBrB,CAAC"}
+{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../src/generated/locales/en.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;CAwBrB,CAAC"}

package/dist/index.d.ts

@@ -1,5 +1,6 @@
-export { PdCalendar } from './pd-calendar.js';
-export type { CalendarCellInfo, CalendarData } from './types.ts';
+export { PdCalendar } from './pd-calendar/pd-calendar.js';
+export { PdDatepicker } from './pd-datepicker/pd-datepicker.js';
+export type { CalendarCellInfo, CalendarData } from './types.js';
 export { templates as beTemplates } from './generated/locales/be.js';
 export { templates as deTemplates } from './generated/locales/de.js';
 export { templates as enTemplates } from './generated/locales/en.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAEjE,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAEhE,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAEjE,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/index.js

@@ -1,10 +1,7 @@
-import { PdCalendar } from "./pd-calendar.js";
-import { templates } from "./locales/be.js";
-import { templates as templates2 } from "./locales/de.js";
-import { templates as templates3 } from "./locales/en.js";
-export {
-  PdCalendar,
-  templates as beTemplates,
-  templates2 as deTemplates,
-  templates3 as enTemplates
-};
+import './pd-calendar.js';
+import './pd-datepicker.js';
+export { templates as beTemplates } from './locales/be.js';
+export { templates as deTemplates } from './locales/de.js';
+export { templates as enTemplates } from './locales/en.js';
+export { PdCalendar } from './pd-calendar/PdCalendar.js';
+export { PdDatepicker } from './pd-datepicker/PdDatepicker.js';

package/dist/locales/be.js

@@ -11,14 +11,17 @@ const templates = {
   "pd.datepicker.month.nov": `November`,
   "pd.datepicker.month.oct": `Oktober`,
   "pd.datepicker.month.sep": `September`,
+  "pd.datepicker.reset": `Herstellen`,
   "pd.datepicker.shortday.fri": `Vr`,
   "pd.datepicker.shortday.mon": `Ma`,
   "pd.datepicker.shortday.sat": `Za`,
   "pd.datepicker.shortday.sun": `Zo`,
   "pd.datepicker.shortday.thi": `Do`,
   "pd.datepicker.shortday.tue": `Di`,
-  "pd.datepicker.shortday.wed": `Wo`
-};
-export {
-  templates
+  "pd.datepicker.shortday.wed": `Wo`,
+  "pd.datepicker.time": `Tijdstip`,
+  "pd.datepicker.today": `Vandaag`,
+  "pd.form.field.selectDateTimeRequired": `Invoer onvolledig`
 };
+
+export { templates };

package/dist/locales/de.js

@@ -17,8 +17,11 @@ const templates = {
   "pd.datepicker.shortday.thi": `Do`,
   "pd.datepicker.shortday.fri": `Fr`,
   "pd.datepicker.shortday.sat": `Sa`,
-  "pd.datepicker.shortday.sun": `So`
-};
-export {
-  templates
+  "pd.datepicker.shortday.sun": `So`,
+  "pd.form.field.selectDateTimeRequired": `Eingabe unvollständig`,
+  "pd.datepicker.time": `Uhrzeit`,
+  "pd.datepicker.today": `Heute`,
+  "pd.datepicker.reset": `Reset`
 };
+
+export { templates };

package/dist/locales/en.js

@@ -11,14 +11,17 @@ const templates = {
   "pd.datepicker.month.nov": `November`,
   "pd.datepicker.month.oct": `October`,
   "pd.datepicker.month.sep": `September`,
+  "pd.datepicker.reset": `Reset`,
   "pd.datepicker.shortday.fri": `Fri`,
   "pd.datepicker.shortday.mon": `Mon`,
   "pd.datepicker.shortday.sat": `Sat`,
   "pd.datepicker.shortday.sun": `Sun`,
   "pd.datepicker.shortday.thi": `Thu`,
   "pd.datepicker.shortday.tue": `Tue`,
-  "pd.datepicker.shortday.wed": `Wed`
-};
-export {
-  templates
+  "pd.datepicker.shortday.wed": `Wed`,
+  "pd.datepicker.time": `Time`,
+  "pd.datepicker.today": `Today`,
+  "pd.form.field.selectDateTimeRequired": `Input incomplete`
 };
+
+export { templates };

package/dist/pd-calendar/PdCalendar.d.ts

@@ -0,0 +1,50 @@
+import { LitElement, PropertyValues, CSSResultGroup } from 'lit';
+import { CalendarData } from '../types.js';
+/**
+ * PdCalendar displays monthly view with information (selectable day cell).
+ *
+ * @fires change-month
+ * @fires select-date
+ * @fires mouse-enter-date
+ * @fires mouse-leave-date
+ *
+ * @tagname pd-calendar
+ */
+export declare class PdCalendar extends LitElement {
+    refDate?: Date;
+    selectableDates: boolean;
+    withYearPopup: string[];
+    withWheelNavigation: boolean;
+    withTouchNavigation: boolean;
+    showSelection: boolean;
+    hideWeekend: boolean;
+    prevMonthConstraint: number;
+    nextMonthConstraint: number;
+    data: CalendarData;
+    numberClass: string;
+    private _viewType;
+    private _currentDate;
+    private _wheelDelta;
+    private _monthName;
+    private _year;
+    private _numberOfDays;
+    private _daysFromPreviousMonth;
+    private _currentMonthNavNr;
+    static styles: CSSResultGroup;
+    connectedCallback(): void;
+    update(changedProperties: PropertyValues<this>): void;
+    render(): import('lit').TemplateResult<1>;
+    private renderMonthCalendar;
+    private _openYearPopup;
+    private _getWeekDays;
+    private _nextMonth;
+    private _previousMonth;
+    private _wheelEvent;
+    private _touchStartEvent;
+    private _touchEndEvent;
+    private _initFromDate;
+    private static _getPreviousMonthDays;
+    private _checkNextMonthConstraint;
+    private _checkPrevMonthConstraint;
+}
+//# sourceMappingURL=PdCalendar.d.ts.map

package/dist/pd-calendar/PdCalendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdCalendar.d.ts","sourceRoot":"","sources":["../../src/pd-calendar/PdCalendar.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAK5E,OAAO,0CAA0C,CAAC;AAIlD,OAAO,wCAAwC,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAqD3C;;;;;;;;;GASG;AACH,qBACa,UAAW,SAAQ,UAAU;IAExC,OAAO,CAAC,EAAE,IAAI,CAAC;IAGf,eAAe,UAAS;IAGxB,aAAa,EAAE,MAAM,EAAE,CAAM;IAG7B,mBAAmB,UAAS;IAG5B,mBAAmB,UAAS;IAG5B,aAAa,UAAS;IAGtB,WAAW,UAAS;IAGpB,mBAAmB,SAAM;IAGzB,mBAAmB,SAAM;IAGzB,IAAI,EAAE,YAAY,CAAM;IAGxB,WAAW,SAAc;IAGzB,OAAO,CAAC,SAAS,CAAc;IAG/B,OAAO,CAAC,YAAY,CAAc;IAGlC,OAAO,CAAC,WAAW,CAAK;IAExB,OAAO,CAAC,UAAU,CAAM;IACxB,OAAO,CAAC,KAAK,CAAK;IAClB,OAAO,CAAC,aAAa,CAAK;IAC1B,OAAO,CAAC,sBAAsB,CAAc;IAC5C,OAAO,CAAC,kBAAkB,CAAK;IAE/B,OAAgB,MAAM,EAAE,cAAc,CAsHpC;IAEO,iBAAiB,IAAI,IAAI;IAKzB,MAAM,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAOrD,MAAM;IAOf,OAAO,CAAC,mBAAmB;IA6E3B,OAAO,CAAC,cAAc;IAqBtB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,UAAU;IAiBlB,OAAO,CAAC,cAAc;IAiBtB,OAAO,CAAC,WAAW;IAenB,OAAO,CAAC,gBAAgB;IAOxB,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,MAAM,CAAC,qBAAqB;IAUpC,OAAO,CAAC,yBAAyB;IAOjC,OAAO,CAAC,yBAAyB;CAOlC"}

package/dist/pd-calendar/PdCalendar.js

@@ -0,0 +1,434 @@
+import { css, LitElement, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { msg, localized } from '@lit/localize';
+import { format } from 'fecha';
+import '@progressive-development/pd-icon/pd-icon';
+import './pd-year-popup/pd-year-popup.js';
+import './pd-calendar-cell/pd-calendar-cell.js';
+import { PdYearPopup } from './pd-year-popup/PdYearPopup.js';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+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" })
+  ],
+  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_MONTH = 2;
+function isToday(date) {
+  const today = /* @__PURE__ */ new Date();
+  return !!date && date.getDate() === today.getDate() && date.getMonth() === today.getMonth() && date.getFullYear() === today.getFullYear();
+}
+function isSelected(date1, date2) {
+  return !!date1 && !!date2 && date1.getDate() === date2.getDate() && date1.getMonth() === date2.getMonth() && date1.getFullYear() === date2.getFullYear();
+}
+let PdCalendar = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.selectableDates = false;
+    this.withYearPopup = [];
+    this.withWheelNavigation = false;
+    this.withTouchNavigation = false;
+    this.showSelection = false;
+    this.hideWeekend = false;
+    this.prevMonthConstraint = -1;
+    this.nextMonthConstraint = -1;
+    this.data = {};
+    this.numberClass = "top-left";
+    this._viewType = VIEW_MONTH;
+    this._currentDate = /* @__PURE__ */ new Date();
+    this._wheelDelta = 0;
+    this._monthName = "";
+    this._year = 0;
+    this._numberOfDays = 0;
+    this._daysFromPreviousMonth = [];
+    this._currentMonthNavNr = 0;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._initFromDate(this.refDate ?? /* @__PURE__ */ new Date());
+  }
+  update(changedProperties) {
+    if (changedProperties.has("refDate") && this.refDate) {
+      this._initFromDate(this.refDate);
+    }
+    super.update(changedProperties);
+  }
+  render() {
+    return html`
+      ${this.renderMonthCalendar()}
+      <slot name="calFooter"></slot>
+    `;
+  }
+  renderMonthCalendar() {
+    const sizeClass = this._numberOfDays >= 31 && this._daysFromPreviousMonth.length >= 5 ? "max" : "normal";
+    const days = Array.from({ length: this._numberOfDays }, (_, i) => {
+      const day = i + 1;
+      const date = new Date(this._year, this._currentDate.getMonth(), day);
+      if (this.hideWeekend && [0, 6].includes(date.getDay())) return null;
+      const key = format(date, "YYYY-MM-DD");
+      const cellData = this.data ? this.data[key]?.[0] : void 0;
+      return html`
+        <pd-calendar-cell
+          key=${key}
+          .dayNumber=${day}
+          .weekDayNumber=${date.getDay()}
+          .infoTxt=${cellData?.info || ""}
+          ?selectEnabled=${this.selectableDates || !!cellData?.info}
+          ?special=${cellData?.special ?? false}
+          .numberClass=${this.numberClass}
+          ?today=${this.selectableDates && isToday(date)}
+          ?selected=${this.showSelection && isSelected(this.refDate, date)}
+        ></pd-calendar-cell>
+      `;
+    });
+    return html`
+      <div class="layout-container">
+        <div class="header">
+          <div class="header-main">
+            <div class="icon-container">
+              <pd-icon
+                class="arrow"
+                icon="previousArrow"
+                activeIcon
+                @click=${this._previousMonth}
+              ></pd-icon>
+              <pd-icon
+                class="arrow"
+                icon="nextArrow"
+                activeIcon
+                @click=${this._nextMonth}
+              ></pd-icon>
+            </div>
+            <div id="titleContentId" class="content-title">
+              ${this._monthName}
+              ${this.withYearPopup.length > 0 ? html`<span
+                    class="year-popup-link"
+                    @click=${this._openYearPopup}
+                    >${this._year}</span
+                  >` : this._year}
+            </div>
+          </div>
+        </div>
+
+        <div
+          class="content grid-container ${sizeClass}"
+          @wheel=${this._wheelEvent}
+          @touchstart=${this._touchStartEvent}
+          @touchend=${this._touchEndEvent}
+        >
+          ${this._getWeekDays().map(
+      (day) => html`<div class="title-week-day">${day}</div>`
+    )}
+          ${this._daysFromPreviousMonth.map(
+      () => html`<div class="cell cell-empty"></div>`
+    )}
+          ${days}
+        </div>
+      </div>
+    `;
+  }
+  _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 year = e.detail.year;
+      const newDate = new Date(this._currentDate);
+      newDate.setFullYear(year);
+      this.dispatchEvent(
+        new CustomEvent("change-month", { detail: { newDate } })
+      );
+      this._initFromDate(newDate);
+      this.shadowRoot?.getElementById("titleContentId")?.removeChild(popup);
+    });
+  }
+  _getWeekDays() {
+    return this.hideWeekend ? LOCALES.weekdaysShort.slice(0, 5) : LOCALES.weekdaysShort;
+  }
+  _nextMonth() {
+    if (this._checkNextMonthConstraint()) {
+      const next = new Date(
+        this._currentDate.getFullYear(),
+        this._currentDate.getMonth() + 1,
+        1
+      );
+      this.dispatchEvent(
+        new CustomEvent("change-month", {
+          detail: { newDate: next, next: true }
+        })
+      );
+      this._currentMonthNavNr += 1;
+      this._initFromDate(next);
+    }
+  }
+  _previousMonth() {
+    if (this._checkPrevMonthConstraint()) {
+      const prev = new Date(
+        this._currentDate.getFullYear(),
+        this._currentDate.getMonth() - 1,
+        1
+      );
+      this.dispatchEvent(
+        new CustomEvent("change-month", {
+          detail: { newDate: prev, prev: true }
+        })
+      );
+      this._currentMonthNavNr -= 1;
+      this._initFromDate(prev);
+    }
+  }
+  _wheelEvent(e) {
+    if (this.withWheelNavigation) {
+      this._wheelDelta += e.deltaY;
+      if (this._wheelDelta > 360) {
+        this._wheelDelta = 0;
+        this._nextMonth();
+      } else if (this._wheelDelta < -360) {
+        this._wheelDelta = 0;
+        this._previousMonth();
+      }
+    }
+    e.preventDefault();
+    e.stopPropagation();
+  }
+  _touchStartEvent(e) {
+    if (this.withTouchNavigation) {
+      this._wheelDelta = e.changedTouches[0].screenX;
+    }
+    e.stopPropagation();
+  }
+  _touchEndEvent(e) {
+    if (this.withTouchNavigation) {
+      const diff = this._wheelDelta - e.changedTouches[0].screenX;
+      if (diff < -TOUCH_MIN_MOVE) {
+        this._nextMonth();
+      } else if (diff > TOUCH_MIN_MOVE) {
+        this._previousMonth();
+      }
+    }
+    e.stopPropagation();
+  }
+  _initFromDate(date) {
+    this._monthName = date.toLocaleString("default", { month: "long" });
+    this._year = date.getFullYear();
+    this._currentDate = date;
+    this._daysFromPreviousMonth = PdCalendar._getPreviousMonthDays(date);
+    const lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
+    this._numberOfDays = lastDay.getDate();
+  }
+  static _getPreviousMonthDays(date) {
+    const start = new Date(date.getFullYear(), date.getMonth(), 1);
+    const missing = start.getDay() > 0 ? Math.abs(1 - start.getDay()) : 6;
+    return Array.from({ length: missing }, (_, i) => {
+      const d = new Date(start);
+      d.setDate(start.getDate() - (missing - i));
+      return d;
+    });
+  }
+  _checkNextMonthConstraint() {
+    return this.nextMonthConstraint === -1 || this.nextMonthConstraint > this._currentMonthNavNr;
+  }
+  _checkPrevMonthConstraint() {
+    return this.prevMonthConstraint === -1 || this._currentMonthNavNr > 0 || this.prevMonthConstraint > this._currentMonthNavNr * -1;
+  }
+};
+PdCalendar.styles = [
+  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 {
+        color: var(--pd-default-font-link-col);
+        text-decoration: underline;
+      }
+
+      .year-popup-link:hover {
+        cursor: pointer;
+        color: var(--pd-default-hover-col);
+      }
+    `
+];
+__decorateClass([
+  property({ type: Object })
+], PdCalendar.prototype, "refDate", 2);
+__decorateClass([
+  property({ type: Boolean })
+], PdCalendar.prototype, "selectableDates", 2);
+__decorateClass([
+  property({ type: Array })
+], PdCalendar.prototype, "withYearPopup", 2);
+__decorateClass([
+  property({ type: Boolean })
+], PdCalendar.prototype, "withWheelNavigation", 2);
+__decorateClass([
+  property({ type: Boolean })
+], PdCalendar.prototype, "withTouchNavigation", 2);
+__decorateClass([
+  property({ type: Boolean })
+], PdCalendar.prototype, "showSelection", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], PdCalendar.prototype, "hideWeekend", 2);
+__decorateClass([
+  property({ type: Number })
+], PdCalendar.prototype, "prevMonthConstraint", 2);
+__decorateClass([
+  property({ type: Number })
+], PdCalendar.prototype, "nextMonthConstraint", 2);
+__decorateClass([
+  property({ type: Object })
+], PdCalendar.prototype, "data", 2);
+__decorateClass([
+  property({ type: String })
+], PdCalendar.prototype, "numberClass", 2);
+__decorateClass([
+  state()
+], PdCalendar.prototype, "_viewType", 2);
+__decorateClass([
+  state()
+], PdCalendar.prototype, "_currentDate", 2);
+__decorateClass([
+  state()
+], PdCalendar.prototype, "_wheelDelta", 2);
+PdCalendar = __decorateClass([
+  localized()
+], PdCalendar);
+
+export { PdCalendar };

package/dist/{pd-calendar-cell.d.ts → pd-calendar/pd-calendar-cell/PdCalendarCell.d.ts}

@@ -6,6 +6,8 @@ import { LitElement, CSSResultGroup } from 'lit';
  * - `select-date`: Wird bei Klick auf ein auswählbares Feld ausgelöst
  * - `mouse-enter-date`: Wird beim Hover über ein auswählbares Feld ausgelöst
  * - `mouse-leave-date`: Wird beim Verlassen des Feldes ausgelöst
+ *
+ * @tagname pd-calendar-cell
  */
 export declare class PdCalendarCell extends LitElement {
     /**
@@ -37,11 +39,11 @@ export declare class PdCalendarCell extends LitElement {
     weekDayNumber: number;
     dayNumber: number;
     static styles: CSSResultGroup;
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
     private _renderSelectableCell;
     private _renderEmptyCell;
     private _selectableCellClicked;
     private _mouseEnter;
     private _mouseLeave;
 }
-//# sourceMappingURL=pd-calendar-cell.d.ts.map
+//# sourceMappingURL=PdCalendarCell.d.ts.map

package/dist/pd-calendar/pd-calendar-cell/PdCalendarCell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdCalendarCell.d.ts","sourceRoot":"","sources":["../../../src/pd-calendar/pd-calendar-cell/PdCalendarCell.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAI5D;;;;;;;;;GASG;AACH,qBAAa,cAAe,SAAQ,UAAU;IAC5C;;;OAGG;IAEH,aAAa,UAAS;IAEtB;;OAEG;IAEH,KAAK,UAAS;IAEd;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IAEH,OAAO,SAAM;IAEb;;OAEG;IAEH,WAAW,SAAc;IAKzB,GAAG,SAAM;IAGT,aAAa,SAAM;IAGnB,SAAS,SAAM;IAEf,OAAgB,MAAM,EAAE,cAAc,CAkJpC;IAEO,MAAM;IAMf,OAAO,CAAC,qBAAqB;IA6B7B,OAAO,CAAC,gBAAgB;IAoBxB,OAAO,CAAC,sBAAsB;IAe9B,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,WAAW;CAQpB"}