@progressive-development/pd-calendar 0.9.2 → 1.0.1

package/dist/shared/calendar-button-bar/calendar-button-bar.js

@@ -0,0 +1,435 @@
+import { css, LitElement, html } from 'lit';
+import { property, state, query, customElement } from 'lit/decorators.js';
+import { localized } from '@lit/localize';
+import { pdIcons } from '@progressive-development/pd-icon';
+import '@progressive-development/pd-forms/pd-button';
+import '@progressive-development/pd-forms/pd-button-group';
+import '@progressive-development/pd-forms/pd-button-select-group';
+import '../../pd-calendar/pd-year-popup/pd-year-popup.js';
+import { PdYearPopup } from '../../pd-calendar/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 iconMap = {
+  list: { pdIcon: pdIcons.ICON_RULES },
+  dayGrid: { pdIcon: pdIcons.ICON_DATE },
+  timeGrid: { pdIcon: pdIcons.ICON_DATE_TIME }
+};
+const periodMap = {
+  Day: { text: "Tag" },
+  Week: { text: "Woche" },
+  Month: { text: "Monat" },
+  Year: { text: "Jahr" }
+};
+let CalendarButtonBar = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.withYearPopup = [];
+    this.year = 0;
+    this.hideNavigation = false;
+    this._currentViewOptions = [
+      { pdIcon: pdIcons.ICON_DATE },
+      { pdIcon: pdIcons.ICON_DATE_TIME },
+      { pdIcon: pdIcons.ICON_RULES }
+    ];
+    this._currentPeriodOptions = [
+      { text: "Tag" },
+      { text: "Woche" },
+      { text: "Monat" },
+      { text: "Jahr" }
+    ];
+    this._currentViewTypeIndex = -1;
+    this._currentPeriodIndex = -1;
+    this._openYearPopupState = false;
+  }
+  willUpdate(changedProps) {
+    if (changedProps.has("availableViewTypes") && this.availableViewTypes.viewTypes?.length > 0) {
+      this._currentViewOptions = this.availableViewTypes.viewTypes.map((t) => {
+        const icon = iconMap[t];
+        if (!icon) throw new Error(`Unknown view type: ${t}`);
+        return icon;
+      });
+      if (this._currentViewTypeIndex === -1) {
+        this._currentViewTypeIndex = this.availableViewTypes.default ?? 0;
+      }
+    }
+    if (changedProps.has("availablePeriods") && this.availablePeriods.periods.length > 0) {
+      this._currentPeriodOptions = this.availablePeriods.periods.map((t) => {
+        const period = periodMap[t];
+        if (!period) throw new Error(`Unknown period type: ${t}`);
+        return period;
+      });
+      if (this._currentPeriodIndex === -1) {
+        this._currentPeriodIndex = this.availablePeriods.default ?? 0;
+      }
+    }
+  }
+  render() {
+    return html`
+      <div class="custom-toolbar">
+        <div class="header-bar">
+          ${!this.hideNavigation ? html`
+                <div
+                  class="view-controls"
+                  @button-clicked="${this._navigationEvent}"
+                >
+                  <pd-button
+                    icon="${pdIcons.ICON_PREVIOUS}"
+                    text=""
+                    value="previous"
+                    ?disabled="${this.hidePrev}"
+                  ></pd-button>
+                  <pd-button
+                    icon="${pdIcons.ICON_NEXT}"
+                    text=""
+                    value="next"
+                    ?disabled="${this.hideNext}"
+                  ></pd-button>
+                </div>
+              ` : ""}
+
+          <div id="titleContentId" class="view-title">
+            <div>
+              ${this.currentTitle}
+              ${this.withYearPopup.length > 0 ? html` <button
+                    id="yearPopupTrigger"
+                    class="year-popup-trigger"
+                    type="button"
+                    aria-haspopup="listbox"
+                    aria-expanded="${this._openYearPopupState}"
+                    @click=${this._openYearPopup}
+                    @keydown=${this._onTriggerKeyDown}
+                  >
+                    ${this.year}
+                  </button>` : this.year === 0 ? "" : this.year}
+            </div>
+          </div>
+        </div>
+
+        <div class="top-buttons">
+          <div class="view-range">
+            ${this._currentViewOptions.length !== 1 ? html`
+                  <pd-button-group
+                    id="viewTypeSelectionId"
+                    class="view-range-type-group"
+                    .buttonList="${this._currentViewOptions}"
+                    .initValue="${[this._currentViewTypeIndex]}"
+                    @pd-button-group-change=${this._changeViewEvent}
+                  ></pd-button-group>
+                ` : ""}
+            ${this._currentPeriodOptions.length !== 1 ? html`
+                  <pd-button-select-group
+                    id="periodSelectionId"
+                    class="view-period-range-select"
+                    .options="${this._currentPeriodOptions}"
+                    .initValue="${this._currentPeriodIndex}"
+                    @pd-button-selection-changed=${this._changePeriodEvent}
+                  ></pd-button-select-group>
+                ` : ""}
+          </div>
+
+          ${this.withSettings ? html`
+                <div class="view-settings">
+                  <pd-icon icon="${pdIcons.ICON_SETTINGS}" activeIcon></pd-icon>
+                </div>
+              ` : ""}
+        </div>
+      </div>
+    `;
+  }
+  _navigationEvent(e) {
+    this.dispatchEvent(
+      new CustomEvent("pd-calendar-navigation", {
+        detail: {
+          previous: e.detail === "previous",
+          next: e.detail === "next"
+        }
+      })
+    );
+    e.stopPropagation();
+  }
+  _changeViewEvent(e) {
+    const selection = e.detail.selected;
+    const viewType = this.availableViewTypes?.viewTypes ? this.availableViewTypes.viewTypes[selection] : "list";
+    console.log("Selection: ", selection, viewType);
+    const detail = {
+      viewType,
+      updatePeriod: void 0
+    };
+    this.dispatchEvent(new CustomEvent("pd-calendar-change-view", { detail }));
+    if (detail.updatePeriod) {
+      console.log("Hier handeln: ", detail.updatePeriod);
+      this._periodSelectionEl.reset(1);
+    }
+    e.stopPropagation();
+  }
+  _changePeriodEvent(e) {
+    const selection = e.detail.selected;
+    const periodType = this.availablePeriods?.periods ? this.availablePeriods.periods[selection] : "Month";
+    console.log("Selection: ", selection, periodType);
+    const detail = {
+      periodType,
+      updateViewType: void 0
+    };
+    this.dispatchEvent(
+      new CustomEvent("pd-calendar-change-period", { detail })
+    );
+    if (detail.updateViewType) {
+      console.log("Hier handeln: ", detail.updateViewType);
+      this._viewTypeSelectionEl.reset(0);
+    }
+    e.stopPropagation();
+  }
+  /**
+   * Opens the year selection popup with keyboard support.
+   */
+  _onTriggerKeyDown(e) {
+    if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+      e.preventDefault();
+      this._openYearPopup();
+    }
+  }
+  /**
+   * Opens the year popup and manages focus.
+   */
+  _openYearPopup() {
+    if (this._openYearPopupState) {
+      return;
+    }
+    this._openYearPopupState = true;
+    this.requestUpdate();
+    const popup = new PdYearPopup();
+    popup.yearSelection = this.withYearPopup;
+    popup.currentYear = this.year.toString();
+    this.shadowRoot?.getElementById("titleContentId")?.appendChild(popup);
+    const returnFocusToTrigger = () => {
+      this._openYearPopupState = false;
+      this.requestUpdate();
+      this.shadowRoot?.getElementById("titleContentId")?.removeChild(popup);
+      const trigger = this.shadowRoot?.getElementById(
+        "yearPopupTrigger"
+      );
+      trigger?.focus();
+    };
+    popup.addEventListener("abort-year-selection", () => {
+      returnFocusToTrigger();
+    });
+    popup.addEventListener("change-year-selection", (e) => {
+      const year = e.detail.year;
+      const newDate = new Date(this.currentDate || /* @__PURE__ */ new Date());
+      newDate.setFullYear(year);
+      this.dispatchEvent(
+        new CustomEvent("change-month", { detail: { newDate } })
+      );
+      this.dispatchEvent(
+        new CustomEvent("pd-calendar-navigation", {
+          detail: { newDate }
+        })
+      );
+      returnFocusToTrigger();
+    });
+  }
+};
+CalendarButtonBar.styles = [
+  css`
+      :host {
+        display: block;
+        --my-button-size: var(--pd-cbar-title-button-size, 40px);
+      }
+
+      .custom-toolbar {
+        position: relative;
+        display: flex;
+        flex-wrap: wrap-reverse;
+        justify-content: space-between;
+        margin: 0.4rem 0 0.3rem 0;
+        gap: 0.5rem;
+      }
+
+      .header-bar {
+        align-self: center;
+        flex: 1;
+        display: flex;
+        gap: 5px;
+      }
+
+      .view-controls {
+        display: flex;
+        gap: 5px;
+        --pd-button-width: var(--my-button-size);
+        --pd-button-min-height: var(--my-button-size);
+        --pd-button-height: var(--my-button-size);
+        /* Check later --pd-button-border-radius: 10px; */
+      }
+
+      .view-title {
+        flex: 1;
+        align-self: center;
+        text-align: var(--pd-cbar-title-align);
+        font-size: var(--pd-cbar-title-size, 1.4em);
+        color: var(--pd-cbar-title-col, var(--pd-default-font-title-col));
+        font-family: var(--pd-default-font-title-family);
+        font-weight: bold;
+        white-space: nowrap;
+      }
+
+      .top-buttons {
+        display: flex;
+        gap: 1em;
+        --pd-button-font-size: 85%;
+        justify-content: flex-end;
+
+        flex: 1;
+      }
+
+      :host([hideButtonBar]) .top-buttons {
+        display: none;
+        flex: 0;
+      }
+
+      .view-range {
+        display: flex;
+        gap: 0.8rem;
+
+        --pd-button-border-col: var(--pd-default-light-col);
+        --pd-button-bg-col: var(--pd-default-lightest-col);
+        --pd-button-font-col: var(--pd-default-dark-col);
+        --pd-button-height: 2.2em;
+        --pd-button-selected-bg-col: var(--pd-secondary-light-col);
+        --pd-button-selected-shadow: none;
+      }
+
+      .view-range-type-group {
+        --pd-button-padding: 0;
+        --pd-button-width: 2.2em;
+      }
+
+      .view-range-type-select {
+        --pd-button-padding: 0;
+        --pd-button-width: 3.5em;
+        --pd-button-group-width: 3.5em;
+      }
+
+      .view-period-range-select {
+        --pd-button-padding: 0px 6px;
+        --pd-button-width: 5em;
+        --pd-button-group-width: 5em;
+      }
+
+      :host([isCompact]) .view-controls {
+        gap: 5px;
+        --my-button-size: calc(var(--pd-cbar-title-button-size, 40px) - 5px);
+      }
+
+      :host([isCompact]) .view-title {
+        flex: 1;
+        align-self: flex-end;
+        text-align: center;
+        font-size: calc(var(--pd-cbar-title-size, 1.4em) - 3px);
+        font-weight: normal;
+      }
+
+      :host([isCompact][hideButtonBar]) .view-title {
+        text-align: right;
+        align-self: center;
+      }
+
+      .view-settings {
+        display: flex;
+      }
+
+      .year-popup-trigger {
+        /* Reset button styles */
+        background: none;
+        border: none;
+        padding: 0;
+        margin: 0;
+        font: inherit;
+
+        /* Link-like appearance */
+        color: var(--pd-default-font-link-col);
+        text-decoration: underline;
+        cursor: pointer;
+        transition: color 0.15s ease;
+      }
+
+      .year-popup-trigger:hover {
+        color: var(--pd-default-hover-col);
+      }
+
+      .year-popup-trigger:focus {
+        outline: none;
+      }
+
+      .year-popup-trigger:focus-visible {
+        outline: 2px solid var(--pd-focus-ring-col);
+        outline-offset: 2px;
+        border-radius: 2px;
+      }
+    `
+];
+__decorateClass([
+  property({ type: Object })
+], CalendarButtonBar.prototype, "availableViewTypes", 2);
+__decorateClass([
+  property({ type: Object })
+], CalendarButtonBar.prototype, "availablePeriods", 2);
+__decorateClass([
+  property({ type: Array })
+], CalendarButtonBar.prototype, "withYearPopup", 2);
+__decorateClass([
+  property({ type: String })
+], CalendarButtonBar.prototype, "currentTitle", 2);
+__decorateClass([
+  property({ type: Object })
+], CalendarButtonBar.prototype, "currentDate", 2);
+__decorateClass([
+  property({ type: Number })
+], CalendarButtonBar.prototype, "year", 2);
+__decorateClass([
+  property({ type: Boolean })
+], CalendarButtonBar.prototype, "withSettings", 2);
+__decorateClass([
+  property({ type: Boolean })
+], CalendarButtonBar.prototype, "hideNext", 2);
+__decorateClass([
+  property({ type: Boolean })
+], CalendarButtonBar.prototype, "hidePrev", 2);
+__decorateClass([
+  property({ type: Boolean })
+], CalendarButtonBar.prototype, "hideNavigation", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CalendarButtonBar.prototype, "isCompact", 2);
+__decorateClass([
+  state()
+], CalendarButtonBar.prototype, "_currentViewOptions", 2);
+__decorateClass([
+  state()
+], CalendarButtonBar.prototype, "_currentPeriodOptions", 2);
+__decorateClass([
+  state()
+], CalendarButtonBar.prototype, "_currentViewTypeIndex", 2);
+__decorateClass([
+  state()
+], CalendarButtonBar.prototype, "_currentPeriodIndex", 2);
+__decorateClass([
+  query("#viewTypeSelectionId")
+], CalendarButtonBar.prototype, "_viewTypeSelectionEl", 2);
+__decorateClass([
+  query("#periodSelectionId")
+], CalendarButtonBar.prototype, "_periodSelectionEl", 2);
+CalendarButtonBar = __decorateClass([
+  customElement("calendar-button-bar"),
+  localized()
+], CalendarButtonBar);
+
+export { CalendarButtonBar };

package/dist/shared/calendar-locales.d.ts

@@ -0,0 +1,9 @@
+export declare const loadLocales: () => {
+    monthNames: string[];
+    weekdaysShort: string[];
+};
+export declare const LOCALES: {
+    monthNames: string[];
+    weekdaysShort: string[];
+};
+//# sourceMappingURL=calendar-locales.d.ts.map

package/dist/shared/calendar-locales.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-locales.d.ts","sourceRoot":"","sources":["../../src/shared/calendar-locales.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW;;;CAwBtB,CAAC;AAEH,eAAO,MAAM,OAAO;;;CAAgB,CAAC"}

package/dist/shared/calendar-locales.js

@@ -0,0 +1,30 @@
+import { msg } from '@lit/localize';
+
+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();
+
+export { LOCALES, loadLocales };

package/dist/shared/calendar-utils.d.ts

@@ -0,0 +1,34 @@
+import { CalendarWeek } from '../types.js';
+export declare function isToday(date?: Date): boolean;
+export declare function isSelected(date1?: Date, date2?: Date): boolean;
+/**
+ * Generates a 2D array of weeks for a given month.
+ * Each week contains 7 days (or 5 if hideWeekend).
+ * null values represent empty padding cells.
+ *
+ * @param year - Full year (e.g. 2026)
+ * @param month - Zero-based month (0 = January)
+ * @param hideWeekend - If true, excludes Saturday and Sunday (5 columns)
+ */
+export declare function getWeeksArray(year: number, month: number, hideWeekend: boolean): CalendarWeek[];
+export interface OverlapEvent {
+    startDecimal: number;
+    endDecimal: number;
+    index: number;
+}
+export interface OverlapResult {
+    index: number;
+    column: number;
+    totalColumns: number;
+    startDecimal: number;
+    endDecimal: number;
+}
+/**
+ * Google Calendar-style overlap layout.
+ * Assigns column positions to overlapping events so they render side by side.
+ *
+ * Events are grouped into clusters (connected components of overlap).
+ * Within each cluster, events are greedily assigned to the first available column.
+ */
+export declare function layoutOverlappingEvents(events: OverlapEvent[]): OverlapResult[];
+//# sourceMappingURL=calendar-utils.d.ts.map

package/dist/shared/calendar-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-utils.d.ts","sourceRoot":"","sources":["../../src/shared/calendar-utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAe,YAAY,EAAE,MAAM,aAAa,CAAC;AAE7D,wBAAgB,OAAO,CAAC,IAAI,CAAC,EAAE,IAAI,GAAG,OAAO,CAQ5C;AAED,wBAAgB,UAAU,CAAC,KAAK,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC,EAAE,IAAI,GAAG,OAAO,CAQ9D;AAMD;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAC3B,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,MAAM,EACb,WAAW,EAAE,OAAO,GACnB,YAAY,EAAE,CAgDhB;AAMD,MAAM,WAAW,YAAY;IAC3B,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CACrC,MAAM,EAAE,YAAY,EAAE,GACrB,aAAa,EAAE,CAgEjB"}

package/dist/shared/calendar-utils.js

@@ -0,0 +1,99 @@
+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();
+}
+function getWeeksArray(year, month, hideWeekend) {
+  const weeks = [];
+  let currentWeek = [];
+  const daysPerWeek = hideWeekend ? 5 : 7;
+  const numberOfDays = new Date(year, month + 1, 0).getDate();
+  let firstWeekdayOfMonth = new Date(year, month, 1).getDay();
+  let firstDayNumber = 1;
+  if (hideWeekend) {
+    while (firstWeekdayOfMonth === 0 || firstWeekdayOfMonth === 6) {
+      firstDayNumber++;
+      firstWeekdayOfMonth = new Date(year, month, firstDayNumber).getDay();
+    }
+  }
+  const paddingDays = (firstWeekdayOfMonth + 6) % 7;
+  for (let i = 0; i < paddingDays; i++) {
+    currentWeek.push(null);
+  }
+  for (let day = 1; day <= numberOfDays; day++) {
+    const date = new Date(year, month, day);
+    const dayOfWeek = date.getDay();
+    if (hideWeekend && (dayOfWeek === 0 || dayOfWeek === 6)) {
+      continue;
+    }
+    currentWeek.push(date);
+    if (currentWeek.length === daysPerWeek) {
+      weeks.push(currentWeek);
+      currentWeek = [];
+    }
+  }
+  if (currentWeek.length > 0) {
+    while (currentWeek.length < daysPerWeek) {
+      currentWeek.push(null);
+    }
+    weeks.push(currentWeek);
+  }
+  return weeks;
+}
+function layoutOverlappingEvents(events) {
+  if (events.length === 0) return [];
+  const sorted = [...events].sort((a, b) => {
+    if (a.startDecimal !== b.startDecimal)
+      return a.startDecimal - b.startDecimal;
+    return b.endDecimal - b.startDecimal - (a.endDecimal - a.startDecimal);
+  });
+  const clusters = [];
+  let currentCluster = [sorted[0]];
+  let clusterEnd = sorted[0].endDecimal;
+  for (let i = 1; i < sorted.length; i++) {
+    if (sorted[i].startDecimal < clusterEnd) {
+      currentCluster.push(sorted[i]);
+      clusterEnd = Math.max(clusterEnd, sorted[i].endDecimal);
+    } else {
+      clusters.push(currentCluster);
+      currentCluster = [sorted[i]];
+      clusterEnd = sorted[i].endDecimal;
+    }
+  }
+  clusters.push(currentCluster);
+  const result = [];
+  for (const cluster of clusters) {
+    const columnEnds = [];
+    const assignments = [];
+    for (const event of cluster) {
+      let col = -1;
+      for (let c = 0; c < columnEnds.length; c++) {
+        if (columnEnds[c] <= event.startDecimal) {
+          col = c;
+          break;
+        }
+      }
+      if (col === -1) {
+        col = columnEnds.length;
+        columnEnds.push(0);
+      }
+      columnEnds[col] = event.endDecimal;
+      assignments.push({ event, column: col });
+    }
+    const totalColumns = columnEnds.length;
+    for (const { event, column } of assignments) {
+      result.push({
+        index: event.index,
+        column,
+        totalColumns,
+        startDecimal: event.startDecimal,
+        endDecimal: event.endDecimal
+      });
+    }
+  }
+  return result;
+}
+
+export { getWeeksArray, isSelected, isToday, layoutOverlappingEvents };

package/dist/shared/calendar-utils.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=calendar-utils.test.d.ts.map

package/dist/shared/calendar-utils.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-utils.test.d.ts","sourceRoot":"","sources":["../../src/shared/calendar-utils.test.ts"],"names":[],"mappings":""}