@progressive-development/pd-calendar 0.9.2 → 1.0.1

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

@@ -1,47 +1,54 @@
-import { LitElement, CSSResultGroup } from 'lit';
+import { CSSResultGroup } from 'lit';
+import { PdBaseCell } from '../../shared/PdBaseCell.js';
 /**
- * Ein einzelnes Kalendertag-Element zur Anzeige in Monatsübersichten.
- *
- * Events:
- * - `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
+ * A single calendar day cell component for use within monthly calendar views.
  *
  * @tagname pd-calendar-cell
+ * @summary Single day cell with info text, selection, hover, and focus states.
+ *
+ * @event select-date - Fired when a selectable cell is clicked. Detail: `{ dateKey: string, date: Date }`.
+ * @event mouse-enter-date - Fired when hovering over a selectable cell. Detail: `{ dateKey: string, date: Date }`.
+ * @event mouse-leave-date - Fired when leaving a cell.
+ *
+ * @cssprop --pd-calendar-cell-day-bg-col - Background color for day cells. Default: `var(--pd-default-light-col)`.
+ * @cssprop --pd-calendar-cell-day-we-bg-col - Background color for weekend cells. Default: `var(--pd-default-bg-light-col)`.
+ * @cssprop --pd-calendar-cell-day-free-bg-col - Background color for selectable cells. Default: `var(--pd-default-col)`.
+ * @cssprop --pd-calendar-cell-day-category-bg-col - Background color for categorized cells. Set dynamically via categoryColor.
+ * @cssprop --pd-calendar-cell-day-category-text-col - Text color for categorized cells. Set dynamically via categoryTextColor.
+ * @cssprop --pd-calendar-cell-day-bg-col-hover - Background color on hover. Default: `var(--pd-default-hover-col)`.
+ * @cssprop --pd-calendar-cell-day-info-col - Text color for info text. Default: `var(--pd-on-primary-col)`.
+ * @cssprop --pd-calendar-cell-day-number-col - Text color for day numbers. Default: `var(--pd-default-dark-col)`.
+ * @cssprop --pd-calendar-cell-day-info-free-col - Text color for selectable cells. Default: `var(--pd-on-primary-col)`.
+ * @cssprop --pd-calendar-cell-selectable-shadow - Box shadow for selectable cells. Default: `var(--pd-shadow-sm)`.
+ * @cssprop --pd-calendar-cell-focus-outline-col - Focus outline color for keyboard navigation. Default: `var(--pd-default-info-col)`.
+ * @cssprop --pd-calendar-cell-today-border-col - Border color for today's date. Default: `var(--pd-default-error-col)`.
+ * @cssprop --pd-calendar-cell-selected-bg-col - Background color for selected date. Default: `var(--pd-default-col)`.
+ * @cssprop --pd-calendar-info-font-size - Font size for info text. Default: `1.5em`.
+ * @cssprop --pd-calendar-number-font-size - Font size for day number. Default: `0.9em`.
+ * @cssprop --pd-calendar-cell-day-info-selection-col - Text color for day number when the cell is selected. Default: `var(--pd-on-primary-col)`.
  */
-export declare class PdCalendarCell extends LitElement {
-    /**
-     * If enabled, cell could be selected (with visible hover element and pointer)
-     * vy the user => results in fire cell-selected.
-     */
+export declare class PdCalendarCell extends PdBaseCell {
+    /** Whether the cell can be selected by the user. */
     selectEnabled: boolean;
-    /**
-     * If enabled, highlight the current day
-     */
+    /** Highlight as today's date. */
     today: boolean;
+    /** Whether this cell has keyboard focus. */
+    focused: boolean;
+    /** CSS class for day number positioning ('top-left' or 'center'). */
+    numberClass: string;
+    static styles: CSSResultGroup;
+    render(): import('lit').TemplateResult<1>;
+    protected _handleSelect(): void;
     /**
-     * If enabled, highlight the selected day
-     */
-    selected: boolean;
-    /**
-     * If enabled the cell gets an special class (e.g. green day).
-     */
-    special: boolean;
-    /**
-     * If set shows info text in the middle (hack) of the cell (e.g. price info).
+     * Determines if this is a weekend day.
      */
-    infoTxt: string;
+    private _isWeekend;
     /**
-     * CSS class for day number inside the cell, top-left and center available
+     * Builds CSS class string for the cell.
      */
-    numberClass: string;
-    key: string;
-    weekDayNumber: number;
-    dayNumber: number;
-    static styles: CSSResultGroup;
-    render(): import('lit').TemplateResult<1>;
+    private _getCellClasses;
     private _renderSelectableCell;
-    private _renderEmptyCell;
+    private _renderNonSelectableCell;
     private _selectableCellClicked;
     private _mouseEnter;
     private _mouseLeave;

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

@@ -1 +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"}
+{"version":3,"file":"PdCalendarCell.d.ts","sourceRoot":"","sources":["../../../src/pd-calendar/pd-calendar-cell/PdCalendarCell.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAa,cAAc,EAAW,MAAM,KAAK,CAAC;AAKzD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBAAa,cAAe,SAAQ,UAAU;IAC5C,oDAAoD;IAEpD,aAAa,UAAS;IAEtB,iCAAiC;IAEjC,KAAK,UAAS;IAEd,4CAA4C;IAE5C,OAAO,UAAS;IAEhB,qEAAqE;IAErE,WAAW,SAAc;IAEzB,OAAgB,MAAM,EAAE,cAAc,CA4MpC;IAEO,MAAM;cAOI,aAAa,IAAI,IAAI;IAaxC;;OAEG;IACH,OAAO,CAAC,UAAU;IAIlB;;OAEG;IACH,OAAO,CAAC,eAAe;IAmBvB,OAAO,CAAC,qBAAqB;IA8B7B,OAAO,CAAC,wBAAwB;IAWhC,OAAO,CAAC,sBAAsB;IAI9B,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,WAAW;CAQpB"}

package/dist/pd-calendar/pd-calendar-cell/PdCalendarCell.js

@@ -1,6 +1,8 @@
-import { LitElement, css, html } from 'lit';
+import { css, nothing, html } from 'lit';
 import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { parse } from 'fecha';
+import { PdBaseCell } from '../../shared/PdBaseCell.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -11,18 +13,13 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class PdCalendarCell extends LitElement {
+class PdCalendarCell extends PdBaseCell {
   constructor() {
     super(...arguments);
     this.selectEnabled = false;
     this.today = false;
-    this.selected = false;
-    this.special = false;
-    this.infoTxt = "";
+    this.focused = false;
     this.numberClass = "top-left";
-    this.key = "";
-    this.weekDayNumber = -1;
-    this.dayNumber = -1;
   }
   static {
     this.styles = [
@@ -35,197 +32,275 @@ class PdCalendarCell extends LitElement {
         width: 100%;
         height: 100%;
         min-height: 30px;
-      }
-
-      .cell-empty {
-        background-color: var(
-          --pd-calendar-cell-empty-bg-col,
-          var(--pd-default-bg)
-        );
+        border-radius: var(--pd-radius-sm, 2px);
+        transition:
+          background-color 0.15s ease,
+          box-shadow 0.15s ease,
+          transform 0.1s ease;
       }
 
       .cell-day {
         position: relative;
-        /*background-image: linear-gradient(to right, rgb(51, 101, 138) , rgb(38, 76, 104));      */
-        /*box-shadow: 2px 2px 3px;*/
         background-color: var(
           --pd-calendar-cell-day-bg-col,
-          var(--pd-default-light-col)
+          var(--pd-default-bg-col)
         );
-        /*border-radius: 2px 2px 2px 2px;*/
       }
 
       .cell-day.we {
         background-color: var(
           --pd-calendar-cell-day-we-bg-col,
-          var(--pd-default-disabled-light-col)
+          var(--pd-default-light-col)
         );
       }
 
+      /* Selectable (free) cells */
       .free {
-        /*background-image: linear-gradient(to right, green, darkgreen);      
-               background-color: var(--my-info-cell-bg1-color);*/
         background-color: var(
           --pd-calendar-cell-day-free-bg-col,
           var(--pd-default-col)
         );
-        /*background-image: linear-gradient(to right, var(--my-info-cell-bg1-color), var(--my-info-cell-bg2-color));*/
-        box-shadow: var(--pd-calendar-cell-selectable-shadow, 1px 2px 2px);
+        box-shadow: var(
+          --pd-calendar-cell-selectable-shadow,
+          var(--pd-shadow-md)
+        );
       }
 
-      .special {
-        /*background-image: linear-gradient(to right, green, darkgreen);      
-               background-color: var(--my-info-cell-bg1-color);*/
+      /* Categorized cells - color set via inline style */
+      .categorized {
         background-color: var(
-          --pd-calendar-cell-day-special-bg-col,
+          --pd-calendar-cell-day-category-bg-col,
           var(--pd-default-success-col)
         );
-        /*background-image: linear-gradient(to right, var(--my-info-cell-bg1-color), var(--my-info-cell-bg2-color));*/
-        box-shadow: var(--pd-calendar-cell-selectable-shadow, 1px 2px 2px);
+        box-shadow: var(
+          --pd-calendar-cell-selectable-shadow,
+          var(--pd-shadow-md)
+        );
       }
 
-      .special:hover,
+      /* Hover states for selectable cells */
+      .categorized:hover,
       .free:hover {
         background-color: var(
           --pd-calendar-cell-day-bg-col-hover,
           var(--pd-default-hover-col)
         );
-        /*background-image: linear-gradient(to right, var(--my-info-cell-bg1-hover), var(--my-info-cell-bg2-hover));*/
         cursor: pointer;
+        box-shadow: var(--pd-shadow-md);
+        transform: translateY(-1px);
       }
 
+      .categorized:active,
+      .free:active {
+        transform: translateY(0);
+        box-shadow: var(--pd-shadow-md);
+      }
+
+      /* Focus styles for keyboard navigation */
+      :host([focused]) .cell-day {
+        outline: 2px solid
+          var(--pd-calendar-cell-focus-outline-col, var(--pd-default-info-col));
+        outline-offset: -2px;
+        z-index: 1;
+      }
+
+      /* Disabled state */
+      :host([disabled]) .cell-day {
+        opacity: 0.4;
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+
+      /* Info text (e.g., price) */
       .cell-info {
         display: flex;
         align-items: center;
         justify-content: center;
         height: 100%;
-        color: var(--pd-calendar-cell-day-info-col, var(--pd-default-bg-col));
+        /* Task? */
+        color: var(--pd-calendar-cell-day-info-col, var(--pd-on-primary-col));
         font-family: var(--pd-default-font-title-family);
-        font-weight: bold;
+        font-weight: 600;
         font-size: var(--pd-calendar-info-font-size, 1.5em);
-        text-shadow: 1px 1px var(--pd-default-dark-col);
+        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
         pointer-events: none;
       }
 
+      /* Day number */
       .cell-number {
         pointer-events: none;
-        font-size: var(--pd-calendar-number-font-size, 1em);
-        font-weight: bold;
-        color: var(--pd-calendar-cell-day-info-col, var(--pd-default-bg-col));
+        font-size: var(--pd-calendar-number-font-size, 0.9em);
+        font-weight: 600;
+        color: var(
+          --pd-calendar-cell-day-number-col,
+          var(--pd-default-dark-col)
+        );
         font-family: var(--pd-default-font-content-family);
+        position: relative;
+        z-index: 1;
       }
 
       .cell-number.top-left {
         position: absolute;
-        left: 3px;
-        top: 2px;
+        left: var(--pd-spacing-xs);
+        top: var(--pd-spacing-xs);
       }
 
-      /* Noch umstellen, passt nicht für alle größen (die anderen auf flex/center umgestellt) */
       .center {
         display: flex;
         align-items: center;
         justify-content: center;
+        height: 100%;
       }
 
+      /* Selectable cells have light text on colored background */
       .free .cell-number,
-      .special .cell-number {
+      .categorized .cell-number {
         color: var(
-          --pd-calendar-cell-day-info-free-col,
-          var(--pd-default-bg-col)
+          --pd-calendar-cell-day-category-text-col,
+          var(--pd-calendar-cell-day-info-free-col, var(--pd-on-primary-col))
+        );
+      }
+
+      .free .cell-info,
+      .categorized .cell-info {
+        color: var(
+          --pd-calendar-cell-day-category-text-col,
+          var(--pd-calendar-cell-day-info-free-col, var(--pd-on-primary-col))
+        );
+      }
+
+      .selection .cell-number {
+        color: var(
+          --pd-calendar-cell-day-info-selection-col,
+          var(--pd-on-primary-col)
         );
       }
 
+      /* Today and selected indicators */
       .number-ring {
         position: absolute;
-        height: 28px;
-        width: 28px;
-        border-radius: 50%;
-        display: inline-block;
+        inset: 15% 10%;
+        border-radius: var(--pd-radius-sm, 3px);
       }
 
       .today {
-        border: 2px solid blue;
-        pointer-events: none;
+        border: 2px solid
+          var(--pd-calendar-cell-today-border-col, var(--pd-default-error-col));
       }
 
       .selected {
-        border: 2px solid red;
+        border: 2px solid transparent;
+        background-color: var(
+          --pd-calendar-cell-selected-bg-col,
+          var(--pd-default-col)
+        );
       }
 
-      /* ToDo: Dont work for calendars sized by custom properties. Needed to calculate from calendar size
-        not from window size, this is a topic for container queries, which are not available right now... */
-      @media (max-width: 800px) {
+      @container (max-width: 800px) {
         .cell-info {
-          font-size: 1.3em;
+          font-size: 1.2em;
         }
         .cell-number {
           font-size: 0.8em;
         }
       }
 
-      @media (max-width: 500px) {
+      @container (max-width: 500px) {
         .cell-info {
-          font-weight: normal;
-          font-size: 1em;
+          font-weight: 500;
+          font-size: 0.95em;
+        }
+        .cell-number {
+          font-size: 0.75em;
+        }
+      }
+
+      @container (max-width: 300px) {
+        .cell-number.top-left {
+          left: 2px;
+          top: 2px;
+        }
+        .cell-info {
+          font-size: 0.85em;
         }
       }
     `
     ];
   }
   render() {
-    return this.selectEnabled ? this._renderSelectableCell() : this._renderEmptyCell();
+    return this.selectEnabled && !this.disabled ? this._renderSelectableCell() : this._renderNonSelectableCell();
+  }
+  _handleSelect() {
+    const userSelectedDate = parse(this.key, "YYYY-MM-DD");
+    if (this.key && userSelectedDate) {
+      this.dispatchEvent(
+        new CustomEvent("select-date", {
+          detail: { dateKey: this.key, date: userSelectedDate },
+          bubbles: true,
+          composed: true
+        })
+      );
+    }
+  }
+  /**
+   * Determines if this is a weekend day.
+   */
+  _isWeekend() {
+    return this.weekDayNumber === 0 || this.weekDayNumber === 6;
+  }
+  /**
+   * Builds CSS class string for the cell.
+   */
+  _getCellClasses(isSelectable) {
+    const classes = ["cell", "cell-day", this.numberClass];
+    const hasCategory = !!this.category;
+    if (isSelectable) {
+      classes.push(hasCategory ? "categorized" : "free");
+    }
+    if (this._isWeekend() && !hasCategory) {
+      classes.push("we");
+    }
+    if (this.selected) {
+      classes.push("selection");
+    }
+    return classes.join(" ");
   }
   _renderSelectableCell() {
-    const baseClasses = [
-      "cell",
-      "cell-day",
-      this.numberClass,
-      this.special ? "special" : "free",
-      (this.weekDayNumber === 6 || this.weekDayNumber === 0) && !this.special ? "we" : ""
-    ].join(" ");
+    const style = this._getCategoryStyle(
+      "--pd-calendar-cell-day-category-bg-col",
+      "--pd-calendar-cell-day-category-text-col"
+    );
     return html`
       <div
-        @click=${this._selectableCellClicked}
-        @mouseenter=${this._mouseEnter}
-        @mouseleave=${this._mouseLeave}
-        class="${baseClasses}"
-        data-date=${this.key}
+        @click="${this._selectableCellClicked}"
+        @mouseenter="${this._mouseEnter}"
+        @mouseleave="${this._mouseLeave}"
+        class="${this._getCellClasses(true)}"
+        style="${style}"
+        data-date="${this.key}"
       >
-        ${this.infoTxt ? html`<div class="cell-info">${this.infoTxt}</div>` : ""}
-        ${this.today ? html`<div class="number-ring today"></div>` : ""}
-        ${this.selected ? html`<div class="number-ring selected"></div>` : ""}
+        ${this.title ? html`<div class="cell-info">${this.title}</div>` : nothing}
+        ${this.today || this.selected ? html`<div
+              class="number-ring ${classMap({
+      today: this.today,
+      selected: this.selected
+    })}"
+            ></div>` : nothing}
         <div class="cell-number ${this.numberClass}">${this.dayNumber}</div>
       </div>
     `;
   }
-  _renderEmptyCell() {
-    const baseClasses = [
-      "cell",
-      "cell-day",
-      this.numberClass,
-      (this.weekDayNumber === 6 || this.weekDayNumber === 0) && !this.special ? "we" : ""
-    ].join(" ");
+  _renderNonSelectableCell() {
     return html`
-      <div class="${baseClasses}">
-        ${this.infoTxt ? html`<div class="cell-info">${this.infoTxt}</div>` : ""}
+      <div class="${this._getCellClasses(false)}">
+        ${this.title ? html`<div class="cell-info">${this.title}</div>` : nothing}
         <div class="cell-number ${this.numberClass}">${this.dayNumber}</div>
       </div>
     `;
   }
-  _selectableCellClicked(e) {
-    const target = e.currentTarget;
-    const dateKey = target.dataset.date;
-    if (dateKey) {
-      const userSelectedDate = parse(dateKey, "YYYY-MM-DD");
-      this.dispatchEvent(
-        new CustomEvent("select-date", {
-          detail: { dateKey, date: userSelectedDate },
-          bubbles: true,
-          composed: true
-        })
-      );
-    }
+  _selectableCellClicked() {
+    this._handleSelect();
   }
   _mouseEnter() {
     const userSelectedDate = parse(this.key, "YYYY-MM-DD");
@@ -253,25 +328,10 @@ __decorateClass([
   property({ type: Boolean })
 ], PdCalendarCell.prototype, "today");
 __decorateClass([
-  property({ type: Boolean })
-], PdCalendarCell.prototype, "selected");
-__decorateClass([
-  property({ type: Boolean })
-], PdCalendarCell.prototype, "special");
-__decorateClass([
-  property({ type: String })
-], PdCalendarCell.prototype, "infoTxt");
+  property({ type: Boolean, reflect: true })
+], PdCalendarCell.prototype, "focused");
 __decorateClass([
   property({ type: String })
 ], PdCalendarCell.prototype, "numberClass");
-__decorateClass([
-  property({ type: String })
-], PdCalendarCell.prototype, "key");
-__decorateClass([
-  property({ type: Number })
-], PdCalendarCell.prototype, "weekDayNumber");
-__decorateClass([
-  property({ type: Number })
-], PdCalendarCell.prototype, "dayNumber");
 
 export { PdCalendarCell };

package/dist/pd-calendar/pd-calendar-day-events-panel/PdCalendarDayEventsPanel.d.ts

@@ -0,0 +1,27 @@
+import { nothing, CSSResultGroup } from 'lit';
+import { PdCalendarPanelBase } from '../../shared/PdCalendarPanelBase.js';
+import { CalendarCellInfo, CalendarConfig } from '../../types.js';
+/**
+ * Panel showing all events for a given day.
+ * Opens when clicking the overflow indicator ("+N weitere") in the month view.
+ *
+ * @tagname pd-calendar-day-events-panel
+ *
+ * @event select-event - Fired when an entry row is clicked.
+ *   Detail: `{ dateKey: string, entry: CalendarCellInfo, index: number, anchorRect: DOMRect }`.
+ * @event close-panel - Fired when the panel should close.
+ */
+export declare class PdCalendarDayEventsPanel extends PdCalendarPanelBase {
+    entries: CalendarCellInfo[];
+    dateKey: string;
+    config?: CalendarConfig;
+    static styles: CSSResultGroup;
+    render(): typeof nothing | import('lit').TemplateResult;
+    protected renderHeaderContent(): import('lit').TemplateResult<1>;
+    protected renderBody(): import('lit').TemplateResult<1>;
+    private _onEntryClick;
+    private _formatDateShort;
+    private _formatEntryTime;
+    private _resolveCategoryConfig;
+}
+//# sourceMappingURL=PdCalendarDayEventsPanel.d.ts.map

package/dist/pd-calendar/pd-calendar-day-events-panel/PdCalendarDayEventsPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdCalendarDayEventsPanel.d.ts","sourceRoot":"","sources":["../../../src/pd-calendar/pd-calendar-day-events-panel/PdCalendarDayEventsPanel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAKzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAC1E,OAAO,KAAK,EACV,gBAAgB,EAChB,cAAc,EAEf,MAAM,gBAAgB,CAAC;AAGxB;;;;;;;;;GASG;AACH,qBAAa,wBAAyB,SAAQ,mBAAmB;IACpC,OAAO,EAAE,gBAAgB,EAAE,CAAM;IAChC,OAAO,SAAM;IACb,MAAM,CAAC,EAAE,cAAc,CAAC;IAEpD,OAAgB,MAAM,EAAE,cAAc,CAkDpC;IAEO,MAAM;cAKI,mBAAmB;cAQnB,UAAU;IA4B7B,OAAO,CAAC,aAAa;IAwBrB,OAAO,CAAC,gBAAgB;IAcxB,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,sBAAsB;CAM/B"}