@progressive-development/pd-calendar 0.9.2 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (118) hide show
  1. package/LICENSE +21 -2
  2. package/README.md +32 -57
  3. package/dist/generated/locales/be.d.ts +3 -0
  4. package/dist/generated/locales/be.d.ts.map +1 -1
  5. package/dist/generated/locales/de.d.ts +3 -0
  6. package/dist/generated/locales/de.d.ts.map +1 -1
  7. package/dist/generated/locales/en.d.ts +3 -0
  8. package/dist/generated/locales/en.d.ts.map +1 -1
  9. package/dist/index.d.ts +10 -1
  10. package/dist/index.d.ts.map +1 -1
  11. package/dist/index.js +16 -0
  12. package/dist/locales/be.js +4 -1
  13. package/dist/locales/de.js +3 -0
  14. package/dist/locales/en.js +4 -1
  15. package/dist/pd-calendar/PdCalendar.d.ts +101 -18
  16. package/dist/pd-calendar/PdCalendar.d.ts.map +1 -1
  17. package/dist/pd-calendar/PdCalendar.js +380 -264
  18. package/dist/pd-calendar/pd-calendar-cell/PdCalendarCell.d.ts +40 -33
  19. package/dist/pd-calendar/pd-calendar-cell/PdCalendarCell.d.ts.map +1 -1
  20. package/dist/pd-calendar/pd-calendar-cell/PdCalendarCell.js +173 -113
  21. package/dist/pd-calendar/pd-calendar-day-events-panel/PdCalendarDayEventsPanel.d.ts +27 -0
  22. package/dist/pd-calendar/pd-calendar-day-events-panel/PdCalendarDayEventsPanel.d.ts.map +1 -0
  23. package/dist/pd-calendar/pd-calendar-day-events-panel/PdCalendarDayEventsPanel.js +160 -0
  24. package/dist/pd-calendar/pd-calendar-day-events-panel/pd-calendar-day-events-panel.d.ts +3 -0
  25. package/dist/pd-calendar/pd-calendar-day-events-panel/pd-calendar-day-events-panel.d.ts.map +1 -0
  26. package/dist/pd-calendar/pd-calendar-day-events-panel/pd-calendar-day-events-panel.js +8 -0
  27. package/dist/pd-calendar/pd-calendar-event-cell/PdCalendarEventCell.d.ts +55 -0
  28. package/dist/pd-calendar/pd-calendar-event-cell/PdCalendarEventCell.d.ts.map +1 -0
  29. package/dist/pd-calendar/pd-calendar-event-cell/PdCalendarEventCell.js +341 -0
  30. package/dist/pd-calendar/pd-calendar-event-cell/pd-calendar-event-cell.d.ts +3 -0
  31. package/dist/pd-calendar/pd-calendar-event-cell/pd-calendar-event-cell.d.ts.map +1 -0
  32. package/dist/pd-calendar/pd-calendar-event-cell/pd-calendar-event-cell.js +8 -0
  33. package/dist/pd-calendar/pd-calendar-event-info-panel/PdCalendarEventInfoPanel.d.ts +29 -0
  34. package/dist/pd-calendar/pd-calendar-event-info-panel/PdCalendarEventInfoPanel.d.ts.map +1 -0
  35. package/dist/pd-calendar/pd-calendar-event-info-panel/PdCalendarEventInfoPanel.js +211 -0
  36. package/dist/pd-calendar/pd-calendar-event-info-panel/pd-calendar-event-info-panel.d.ts +3 -0
  37. package/dist/pd-calendar/pd-calendar-event-info-panel/pd-calendar-event-info-panel.d.ts.map +1 -0
  38. package/dist/pd-calendar/pd-calendar-event-info-panel/pd-calendar-event-info-panel.js +8 -0
  39. package/dist/pd-calendar/pd-calendar-list-cell/PdCalendarListCell.d.ts +28 -0
  40. package/dist/pd-calendar/pd-calendar-list-cell/PdCalendarListCell.d.ts.map +1 -0
  41. package/dist/pd-calendar/pd-calendar-list-cell/PdCalendarListCell.js +252 -0
  42. package/dist/pd-calendar/pd-calendar-list-cell/pd-calendar-list-cell.d.ts +3 -0
  43. package/dist/pd-calendar/pd-calendar-list-cell/pd-calendar-list-cell.d.ts.map +1 -0
  44. package/dist/pd-calendar/pd-calendar-list-cell/pd-calendar-list-cell.js +8 -0
  45. package/dist/pd-calendar/pd-calendar-list-view/PdCalendarListView.d.ts +26 -0
  46. package/dist/pd-calendar/pd-calendar-list-view/PdCalendarListView.d.ts.map +1 -0
  47. package/dist/pd-calendar/pd-calendar-list-view/PdCalendarListView.js +165 -0
  48. package/dist/pd-calendar/pd-calendar-list-view/pd-calendar-list-view.d.ts +3 -0
  49. package/dist/pd-calendar/pd-calendar-list-view/pd-calendar-list-view.d.ts.map +1 -0
  50. package/dist/pd-calendar/pd-calendar-list-view/pd-calendar-list-view.js +8 -0
  51. package/dist/pd-calendar/pd-calendar-month-view/PdCalendarMonthView.d.ts +55 -0
  52. package/dist/pd-calendar/pd-calendar-month-view/PdCalendarMonthView.d.ts.map +1 -0
  53. package/dist/pd-calendar/pd-calendar-month-view/PdCalendarMonthView.js +461 -0
  54. package/dist/pd-calendar/pd-calendar-month-view/pd-calendar-month-view.d.ts +3 -0
  55. package/dist/pd-calendar/pd-calendar-month-view/pd-calendar-month-view.d.ts.map +1 -0
  56. package/dist/pd-calendar/pd-calendar-month-view/pd-calendar-month-view.js +8 -0
  57. package/dist/pd-calendar/pd-calendar-time-grid-view/PdCalendarTimeGridView.d.ts +32 -0
  58. package/dist/pd-calendar/pd-calendar-time-grid-view/PdCalendarTimeGridView.d.ts.map +1 -0
  59. package/dist/pd-calendar/pd-calendar-time-grid-view/PdCalendarTimeGridView.js +468 -0
  60. package/dist/pd-calendar/pd-calendar-time-grid-view/pd-calendar-time-grid-view.d.ts +3 -0
  61. package/dist/pd-calendar/pd-calendar-time-grid-view/pd-calendar-time-grid-view.d.ts.map +1 -0
  62. package/dist/pd-calendar/pd-calendar-time-grid-view/pd-calendar-time-grid-view.js +8 -0
  63. package/dist/pd-calendar/pd-calendar-week-cell/PdCalendarWeekCell.d.ts +31 -0
  64. package/dist/pd-calendar/pd-calendar-week-cell/PdCalendarWeekCell.d.ts.map +1 -0
  65. package/dist/pd-calendar/pd-calendar-week-cell/PdCalendarWeekCell.js +134 -0
  66. package/dist/pd-calendar/pd-calendar-week-cell/pd-calendar-week-cell.d.ts +3 -0
  67. package/dist/pd-calendar/pd-calendar-week-cell/pd-calendar-week-cell.d.ts.map +1 -0
  68. package/dist/pd-calendar/pd-calendar-week-cell/pd-calendar-week-cell.js +8 -0
  69. package/dist/pd-calendar/pd-calendar.stories.d.ts +79 -19
  70. package/dist/pd-calendar/pd-calendar.stories.d.ts.map +1 -1
  71. package/dist/pd-calendar/pd-year-popup/PdYearPopup.d.ts +22 -11
  72. package/dist/pd-calendar/pd-year-popup/PdYearPopup.d.ts.map +1 -1
  73. package/dist/pd-calendar/pd-year-popup/PdYearPopup.js +152 -34
  74. package/dist/pd-datepicker/PdDatepicker.d.ts +76 -7
  75. package/dist/pd-datepicker/PdDatepicker.d.ts.map +1 -1
  76. package/dist/pd-datepicker/PdDatepicker.js +257 -50
  77. package/dist/pd-datepicker/pd-date-picker.stories.d.ts +78 -20
  78. package/dist/pd-datepicker/pd-date-picker.stories.d.ts.map +1 -1
  79. package/dist/pd-slot-picker/PdSlotPicker.d.ts +102 -0
  80. package/dist/pd-slot-picker/PdSlotPicker.d.ts.map +1 -0
  81. package/dist/pd-slot-picker/PdSlotPicker.js +339 -0
  82. package/dist/pd-slot-picker/pd-slot-cell/PdSlotCell.d.ts +35 -0
  83. package/dist/pd-slot-picker/pd-slot-cell/PdSlotCell.d.ts.map +1 -0
  84. package/dist/pd-slot-picker/pd-slot-cell/PdSlotCell.js +188 -0
  85. package/dist/pd-slot-picker/pd-slot-cell/pd-slot-cell.d.ts +3 -0
  86. package/dist/pd-slot-picker/pd-slot-cell/pd-slot-cell.d.ts.map +1 -0
  87. package/dist/pd-slot-picker/pd-slot-cell/pd-slot-cell.js +8 -0
  88. package/dist/pd-slot-picker/pd-slot-picker.d.ts +3 -0
  89. package/dist/pd-slot-picker/pd-slot-picker.d.ts.map +1 -0
  90. package/dist/pd-slot-picker/pd-slot-picker.stories.d.ts +67 -0
  91. package/dist/pd-slot-picker/pd-slot-picker.stories.d.ts.map +1 -0
  92. package/dist/pd-slot-picker.d.ts +2 -0
  93. package/dist/pd-slot-picker.js +8 -0
  94. package/dist/shared/PdBaseCell.d.ts +68 -0
  95. package/dist/shared/PdBaseCell.d.ts.map +1 -0
  96. package/dist/shared/PdBaseCell.js +120 -0
  97. package/dist/shared/PdBaseView.d.ts +22 -0
  98. package/dist/shared/PdBaseView.d.ts.map +1 -0
  99. package/dist/shared/PdBaseView.js +46 -0
  100. package/dist/shared/PdCalendarPanelBase.d.ts +34 -0
  101. package/dist/shared/PdCalendarPanelBase.d.ts.map +1 -0
  102. package/dist/shared/PdCalendarPanelBase.js +169 -0
  103. package/dist/shared/calendar-button-bar/calendar-button-bar.d.ts +41 -0
  104. package/dist/shared/calendar-button-bar/calendar-button-bar.d.ts.map +1 -0
  105. package/dist/shared/calendar-button-bar/calendar-button-bar.js +435 -0
  106. package/dist/shared/calendar-locales.d.ts +9 -0
  107. package/dist/shared/calendar-locales.d.ts.map +1 -0
  108. package/dist/shared/calendar-locales.js +30 -0
  109. package/dist/shared/calendar-utils.d.ts +34 -0
  110. package/dist/shared/calendar-utils.d.ts.map +1 -0
  111. package/dist/shared/calendar-utils.js +99 -0
  112. package/dist/shared/calendar-utils.test.d.ts +2 -0
  113. package/dist/shared/calendar-utils.test.d.ts.map +1 -0
  114. package/dist/types.d.ts +102 -1
  115. package/dist/types.d.ts.map +1 -1
  116. package/package.json +10 -5
  117. package/dist/pd-calendar/pd-calendar-cell/pd-calendar-cell.stories.d.ts +0 -15
  118. package/dist/pd-calendar/pd-calendar-cell/pd-calendar-cell.stories.d.ts.map +0 -1
@@ -0,0 +1,160 @@
1
+ import { css, nothing, html } from 'lit';
2
+ import { property } from 'lit/decorators.js';
3
+ import { formatShortDate } from '@progressive-development/pd-utils';
4
+ import { PdCalendarPanelBase } from '../../shared/PdCalendarPanelBase.js';
5
+ import { LOCALES } from '../../shared/calendar-locales.js';
6
+
7
+ var __defProp = Object.defineProperty;
8
+ var __decorateClass = (decorators, target, key, kind) => {
9
+ var result = void 0 ;
10
+ for (var i = decorators.length - 1, decorator; i >= 0; i--)
11
+ if (decorator = decorators[i])
12
+ result = (decorator(target, key, result) ) || result;
13
+ if (result) __defProp(target, key, result);
14
+ return result;
15
+ };
16
+ class PdCalendarDayEventsPanel extends PdCalendarPanelBase {
17
+ constructor() {
18
+ super(...arguments);
19
+ this.entries = [];
20
+ this.dateKey = "";
21
+ }
22
+ static {
23
+ this.styles = [
24
+ PdCalendarPanelBase.panelBaseStyles,
25
+ css`
26
+ .header-text {
27
+ font-size: 0.8rem;
28
+ color: var(--pd-default-font-light-col, #6b7280);
29
+ white-space: nowrap;
30
+ overflow: hidden;
31
+ text-overflow: ellipsis;
32
+ }
33
+
34
+ .entry-row {
35
+ display: flex;
36
+ align-items: center;
37
+ gap: var(--pd-spacing-xs, 0.25rem);
38
+ padding: var(--pd-spacing-xs, 0.25rem) var(--pd-spacing-xs, 0.25rem);
39
+ border-radius: var(--pd-radius-sm, 4px);
40
+ cursor: pointer;
41
+ transition: background-color 0.1s ease;
42
+ font-size: 0.85rem;
43
+ }
44
+
45
+ .entry-row:hover {
46
+ background-color: var(--pd-default-light-col, #f3f4f6);
47
+ }
48
+
49
+ .entry-cat {
50
+ width: 3px;
51
+ align-self: stretch;
52
+ border-radius: 2px;
53
+ flex-shrink: 0;
54
+ }
55
+
56
+ .entry-time {
57
+ font-size: 0.75rem;
58
+ color: var(--pd-default-font-light-col, #6b7280);
59
+ white-space: nowrap;
60
+ flex-shrink: 0;
61
+ min-width: 3em;
62
+ }
63
+
64
+ .entry-title {
65
+ flex: 1;
66
+ min-width: 0;
67
+ overflow: hidden;
68
+ text-overflow: ellipsis;
69
+ white-space: nowrap;
70
+ color: var(--pd-default-font-col, #111827);
71
+ }
72
+ `
73
+ ];
74
+ }
75
+ render() {
76
+ if (!this.entries.length) return nothing;
77
+ return super.render();
78
+ }
79
+ renderHeaderContent() {
80
+ const dateStr = this._formatDateShort();
81
+ const count = this.entries.length;
82
+ const label = count === 1 ? "1 weiterer Termin" : `${count} weitere Termine`;
83
+ return html`<span class="header-text">${dateStr} · ${label}</span>`;
84
+ }
85
+ renderBody() {
86
+ return html`
87
+ ${this.entries.map((entry, i) => {
88
+ const catConfig = this._resolveCategoryConfig(entry.category);
89
+ const time = this._formatEntryTime(entry);
90
+ return html`
91
+ <div
92
+ class="entry-row"
93
+ @click="${(e) => this._onEntryClick(e, entry, i)}"
94
+ >
95
+ ${catConfig?.color ? html`<span
96
+ class="entry-cat"
97
+ style="background-color: ${catConfig.color}"
98
+ ></span>` : html`<span class="entry-cat"></span>`}
99
+ <span class="entry-time">${time}</span>
100
+ <span class="entry-title">${entry.info || ""}</span>
101
+ </div>
102
+ `;
103
+ })}
104
+ `;
105
+ }
106
+ // ===========================================================================
107
+ // Handlers
108
+ // ===========================================================================
109
+ _onEntryClick(e, entry, index) {
110
+ const row = e.currentTarget;
111
+ this.dispatchEvent(
112
+ new CustomEvent("select-event", {
113
+ detail: {
114
+ dateKey: this.dateKey,
115
+ entry,
116
+ index,
117
+ anchorRect: row.getBoundingClientRect()
118
+ },
119
+ bubbles: true,
120
+ composed: true
121
+ })
122
+ );
123
+ }
124
+ // ===========================================================================
125
+ // Formatting
126
+ // ===========================================================================
127
+ _formatDateShort() {
128
+ if (!this.dateKey) return "";
129
+ const [yearStr, monthStr, dayStr] = this.dateKey.split("-");
130
+ const date = new Date(
131
+ Number(yearStr),
132
+ Number(monthStr) - 1,
133
+ Number(dayStr)
134
+ );
135
+ const dayOfWeek = date.getDay();
136
+ const localeIdx = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
137
+ const weekday = LOCALES.weekdaysShort[localeIdx];
138
+ return `${weekday}, ${formatShortDate(date, false)}`;
139
+ }
140
+ _formatEntryTime(entry) {
141
+ if (entry.fullDay) return "24h";
142
+ if (entry.startTime) return entry.startTime;
143
+ return "";
144
+ }
145
+ _resolveCategoryConfig(category) {
146
+ if (!category) return void 0;
147
+ return this.config?.categories?.[category];
148
+ }
149
+ }
150
+ __decorateClass([
151
+ property({ type: Array })
152
+ ], PdCalendarDayEventsPanel.prototype, "entries");
153
+ __decorateClass([
154
+ property({ type: String })
155
+ ], PdCalendarDayEventsPanel.prototype, "dateKey");
156
+ __decorateClass([
157
+ property({ type: Object })
158
+ ], PdCalendarDayEventsPanel.prototype, "config");
159
+
160
+ export { PdCalendarDayEventsPanel };
@@ -0,0 +1,3 @@
1
+ import { PdCalendarDayEventsPanel } from './PdCalendarDayEventsPanel.js';
2
+ export { PdCalendarDayEventsPanel };
3
+ //# sourceMappingURL=pd-calendar-day-events-panel.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"pd-calendar-day-events-panel.d.ts","sourceRoot":"","sources":["../../../src/pd-calendar/pd-calendar-day-events-panel/pd-calendar-day-events-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAOzE,OAAO,EAAE,wBAAwB,EAAE,CAAC"}
@@ -0,0 +1,8 @@
1
+ import { PdCalendarDayEventsPanel } from './PdCalendarDayEventsPanel.js';
2
+
3
+ const tag = "pd-calendar-day-events-panel";
4
+ if (!customElements.get(tag)) {
5
+ customElements.define(tag, PdCalendarDayEventsPanel);
6
+ }
7
+
8
+ export { PdCalendarDayEventsPanel };
@@ -0,0 +1,55 @@
1
+ import { LitElement, CSSResultGroup } from 'lit';
2
+ import { CalendarCellInfo, CalendarConfig } from '../../types.js';
3
+ /**
4
+ * A calendar event cell for the month view that displays multiple events per day.
5
+ *
6
+ * Unlike PdCalendarCell (which shows a single info text), this component
7
+ * receives the full array of entries and renders event bars with category colors.
8
+ *
9
+ * @tagname pd-calendar-event-cell
10
+ * @summary Day cell with event bars, overflow indicator, and category accent colors.
11
+ *
12
+ * @event select-event - Fired when an event bar is clicked. Detail: `{ dateKey: string, entry: CalendarCellInfo, index: number }`.
13
+ * @event select-date - Fired when empty area or day number is clicked. Detail: `{ dateKey: string, date: Date }`.
14
+ * @event show-day-events - Fired when the overflow indicator is clicked. Detail: `{ dateKey: string, entries: CalendarCellInfo[], anchorRect: DOMRect }`.
15
+ *
16
+ * @cssprop --pd-calendar-cell-day-bg-col - Background color for day cells. Default: `var(--pd-default-bg-col)`.
17
+ * @cssprop --pd-calendar-cell-day-we-bg-col - Background color for weekend cells. Default: `var(--pd-default-light-col)`.
18
+ * @cssprop --pd-calendar-cell-today-border-col - Border color for today indicator. Default: `var(--pd-default-error-col)`.
19
+ * @cssprop --pd-calendar-cell-selected-bg-col - Background for selected indicator. Default: `var(--pd-default-col)`.
20
+ * @cssprop --pd-calendar-event-cell-bar-bg - Default event bar background. Default: `var(--pd-default-lightest-col, #e0f2fe)`.
21
+ * @cssprop --pd-calendar-event-cell-bar-border - Default event bar left border. Default: `var(--pd-default-info-col, #3b82f6)`.
22
+ * @cssprop --pd-calendar-event-cell-overflow-col - Overflow text color. Default: `var(--pd-default-font-col)`.
23
+ * @cssprop --pd-calendar-cell-day-number-col - Text color for day numbers. Default: `var(--pd-default-dark-col)`.
24
+ * @cssprop --pd-calendar-number-font-size - Font size for day numbers. Default: `0.9em`.
25
+ */
26
+ export declare class PdCalendarEventCell extends LitElement {
27
+ /** Date key in YYYY-MM-DD format. */
28
+ key: string;
29
+ /** Day number (1-31). */
30
+ dayNumber: number;
31
+ /** Weekday number (0=Sunday, 6=Saturday). */
32
+ weekDayNumber: number;
33
+ /** All entries for this day. */
34
+ entries: CalendarCellInfo[];
35
+ /** Calendar configuration including category definitions. */
36
+ config?: CalendarConfig;
37
+ /** Highlight as today's date. */
38
+ today: boolean;
39
+ /** Whether this cell is selected. */
40
+ selected: boolean;
41
+ /** Whether this cell is disabled. */
42
+ disabled: boolean;
43
+ /** Maximum visible event bars before showing overflow. */
44
+ maxVisible: number;
45
+ static styles: CSSResultGroup;
46
+ render(): import('lit').TemplateResult<1>;
47
+ private _renderEventBar;
48
+ private _buildBarStyle;
49
+ private _formatEntryTime;
50
+ private _resolveCategoryConfig;
51
+ private _onEventClick;
52
+ private _onCellClick;
53
+ private _onOverflowClick;
54
+ }
55
+ //# sourceMappingURL=PdCalendarEventCell.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PdCalendarEventCell.d.ts","sourceRoot":"","sources":["../../../src/pd-calendar/pd-calendar-event-cell/PdCalendarEventCell.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAa,cAAc,EAAW,MAAM,KAAK,CAAC;AAKrE,OAAO,KAAK,EACV,gBAAgB,EAChB,cAAc,EAEf,MAAM,gBAAgB,CAAC;AAExB;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBAAa,mBAAoB,SAAQ,UAAU;IACjD,qCAAqC;IAErC,GAAG,SAAM;IAET,yBAAyB;IAEzB,SAAS,SAAM;IAEf,6CAA6C;IAE7C,aAAa,SAAM;IAEnB,gCAAgC;IAEhC,OAAO,EAAE,gBAAgB,EAAE,CAAM;IAEjC,6DAA6D;IAE7D,MAAM,CAAC,EAAE,cAAc,CAAC;IAExB,iCAAiC;IAEjC,KAAK,UAAS;IAEd,qCAAqC;IAErC,QAAQ,UAAS;IAEjB,qCAAqC;IAErC,QAAQ,UAAS;IAEjB,0DAA0D;IAE1D,UAAU,SAAK;IAEf,OAAgB,MAAM,EAAE,cAAc,CAmLpC;IAEO,MAAM;IAmCf,OAAO,CAAC,eAAe;IAiBvB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,sBAAsB;IAO9B,OAAO,CAAC,aAAa;IAkBrB,OAAO,CAAC,YAAY;IAcpB,OAAO,CAAC,gBAAgB;CAgBzB"}
@@ -0,0 +1,341 @@
1
+ import { LitElement, css, nothing, html } from 'lit';
2
+ import { property } from 'lit/decorators.js';
3
+ import { classMap } from 'lit/directives/class-map.js';
4
+ import { parse } from 'fecha';
5
+
6
+ var __defProp = Object.defineProperty;
7
+ var __decorateClass = (decorators, target, key, kind) => {
8
+ var result = void 0 ;
9
+ for (var i = decorators.length - 1, decorator; i >= 0; i--)
10
+ if (decorator = decorators[i])
11
+ result = (decorator(target, key, result) ) || result;
12
+ if (result) __defProp(target, key, result);
13
+ return result;
14
+ };
15
+ class PdCalendarEventCell extends LitElement {
16
+ constructor() {
17
+ super(...arguments);
18
+ this.key = "";
19
+ this.dayNumber = -1;
20
+ this.weekDayNumber = -1;
21
+ this.entries = [];
22
+ this.today = false;
23
+ this.selected = false;
24
+ this.disabled = false;
25
+ this.maxVisible = 3;
26
+ }
27
+ static {
28
+ this.styles = [
29
+ css`
30
+ :host {
31
+ display: block;
32
+ }
33
+
34
+ .cell {
35
+ position: relative;
36
+ width: 100%;
37
+ height: 100%;
38
+ min-height: 30px;
39
+ border-radius: var(--pd-radius-sm, 2px);
40
+ background-color: var(
41
+ --pd-calendar-cell-day-bg-col,
42
+ var(--pd-default-bg-col)
43
+ );
44
+ box-sizing: border-box;
45
+ display: flex;
46
+ flex-direction: column;
47
+ overflow: hidden;
48
+ cursor: pointer;
49
+ }
50
+
51
+ .cell.we {
52
+ background-color: var(
53
+ --pd-calendar-cell-day-we-bg-col,
54
+ var(--pd-default-light-col)
55
+ );
56
+ }
57
+
58
+ :host([disabled]) .cell {
59
+ opacity: 0.4;
60
+ cursor: not-allowed;
61
+ pointer-events: none;
62
+ }
63
+
64
+ /* Day number header area */
65
+ .day-header {
66
+ display: flex;
67
+ align-items: center;
68
+ padding: 2px var(--pd-spacing-xs, 4px);
69
+ flex-shrink: 0;
70
+ }
71
+
72
+ .day-number {
73
+ position: relative;
74
+ font-size: var(--pd-calendar-number-font-size, 0.9em);
75
+ font-weight: 600;
76
+ color: var(
77
+ --pd-calendar-cell-day-number-col,
78
+ var(--pd-default-dark-col)
79
+ );
80
+ font-family: var(--pd-default-font-content-family);
81
+ z-index: 1;
82
+ }
83
+
84
+ /* Today and selected indicators (rectangle behind day number) */
85
+ .number-ring {
86
+ position: absolute;
87
+ inset: -2px -4px;
88
+ border-radius: var(--pd-radius-sm, 3px);
89
+ z-index: -1;
90
+ }
91
+
92
+ .number-ring.today {
93
+ border: 2px solid
94
+ var(--pd-calendar-cell-today-border-col, var(--pd-default-error-col));
95
+ }
96
+
97
+ .number-ring.selected {
98
+ border: 2px solid transparent;
99
+ background-color: var(
100
+ --pd-calendar-cell-selected-bg-col,
101
+ var(--pd-default-col)
102
+ );
103
+ }
104
+
105
+ :host([selected]) .day-number,
106
+ :host([today]) .day-number {
107
+ position: relative;
108
+ }
109
+
110
+ /* Event bars container */
111
+ .events {
112
+ display: flex;
113
+ flex-direction: column;
114
+ gap: 1px;
115
+ padding: 0 2px 2px;
116
+ flex: 1;
117
+ min-height: 0;
118
+ overflow: hidden;
119
+ }
120
+
121
+ /* Single event bar */
122
+ .event-bar {
123
+ display: flex;
124
+ align-items: center;
125
+ gap: 3px;
126
+ padding: 1px 3px;
127
+ border-radius: var(--pd-radius-sm, 2px);
128
+ border-left: 3px solid
129
+ var(
130
+ --pd-calendar-event-cell-bar-border,
131
+ var(--pd-default-info-col, #3b82f6)
132
+ );
133
+ background-color: var(
134
+ --pd-calendar-event-cell-bar-bg,
135
+ var(--pd-default-lightest-col, #e0f2fe)
136
+ );
137
+ font-size: 0.7rem;
138
+ line-height: 1.3;
139
+ white-space: nowrap;
140
+ overflow: hidden;
141
+ text-overflow: ellipsis;
142
+ cursor: pointer;
143
+ transition: background-color 0.1s ease;
144
+ font-family: var(--pd-default-font-content-family);
145
+ }
146
+
147
+ .event-bar:hover {
148
+ filter: brightness(0.95);
149
+ }
150
+
151
+ .event-bar-time {
152
+ opacity: 0.7;
153
+ flex-shrink: 0;
154
+ }
155
+
156
+ .event-bar-title {
157
+ overflow: hidden;
158
+ text-overflow: ellipsis;
159
+ }
160
+
161
+ /* Overflow indicator */
162
+ .overflow {
163
+ padding: 0 3px;
164
+ font-size: 0.65rem;
165
+ color: var(
166
+ --pd-calendar-event-cell-overflow-col,
167
+ var(--pd-default-font-col)
168
+ );
169
+ opacity: 0.7;
170
+ cursor: pointer;
171
+ flex-shrink: 0;
172
+ }
173
+
174
+ .overflow:hover {
175
+ opacity: 1;
176
+ }
177
+
178
+ @container (max-width: 500px) {
179
+ .day-number {
180
+ font-size: 0.8em;
181
+ }
182
+ .event-bar {
183
+ font-size: 0.6rem;
184
+ }
185
+ .overflow {
186
+ font-size: 0.6rem;
187
+ }
188
+ }
189
+
190
+ @container (max-width: 300px) {
191
+ .day-header {
192
+ padding: 1px 2px;
193
+ }
194
+ .day-number {
195
+ font-size: 0.75em;
196
+ }
197
+ .event-bar {
198
+ font-size: 0.55rem;
199
+ padding: 0 2px;
200
+ border-left-width: 2px;
201
+ }
202
+ .event-bar-time {
203
+ display: none;
204
+ }
205
+ }
206
+ `
207
+ ];
208
+ }
209
+ render() {
210
+ const isWeekend = this.weekDayNumber === 0 || this.weekDayNumber === 6;
211
+ const visibleEntries = this.entries.slice(0, this.maxVisible);
212
+ const overflowCount = this.entries.length - this.maxVisible;
213
+ return html`
214
+ <div
215
+ class="cell ${classMap({ we: isWeekend })}"
216
+ @click="${this._onCellClick}"
217
+ >
218
+ <div class="day-header">
219
+ <span class="day-number">
220
+ ${this.today || this.selected ? html`<span
221
+ class="number-ring ${classMap({
222
+ today: this.today,
223
+ selected: this.selected
224
+ })}"
225
+ ></span>` : nothing}
226
+ ${this.dayNumber}
227
+ </span>
228
+ </div>
229
+ <div class="events">
230
+ ${visibleEntries.map((entry, i) => this._renderEventBar(entry, i))}
231
+ ${overflowCount > 0 ? html`<span class="overflow" @click="${this._onOverflowClick}"
232
+ >+${overflowCount} weitere</span
233
+ >` : nothing}
234
+ </div>
235
+ </div>
236
+ `;
237
+ }
238
+ _renderEventBar(entry, index) {
239
+ const categoryConfig = this._resolveCategoryConfig(entry.category);
240
+ const style = this._buildBarStyle(categoryConfig);
241
+ const time = this._formatEntryTime(entry);
242
+ return html`
243
+ <div
244
+ class="event-bar"
245
+ style="${style}"
246
+ @click="${(e) => this._onEventClick(e, entry, index)}"
247
+ >
248
+ ${time ? html`<span class="event-bar-time">${time}</span>` : nothing}
249
+ <span class="event-bar-title">${entry.info || ""}</span>
250
+ </div>
251
+ `;
252
+ }
253
+ _buildBarStyle(config) {
254
+ if (!config?.color) return "";
255
+ return `border-left-color: ${config.color}; background-color: ${config.color}22`;
256
+ }
257
+ _formatEntryTime(entry) {
258
+ if (entry.fullDay) return "24h";
259
+ if (entry.startTime) return entry.startTime;
260
+ return "";
261
+ }
262
+ _resolveCategoryConfig(category) {
263
+ if (!category) return void 0;
264
+ return this.config?.categories?.[category];
265
+ }
266
+ _onEventClick(e, entry, index) {
267
+ e.stopPropagation();
268
+ if (this.disabled) return;
269
+ const bar = e.currentTarget;
270
+ this.dispatchEvent(
271
+ new CustomEvent("select-event", {
272
+ detail: {
273
+ dateKey: this.key,
274
+ entry,
275
+ index,
276
+ anchorRect: bar.getBoundingClientRect()
277
+ },
278
+ bubbles: true,
279
+ composed: true
280
+ })
281
+ );
282
+ }
283
+ _onCellClick() {
284
+ if (this.disabled) return;
285
+ const date = parse(this.key, "YYYY-MM-DD");
286
+ if (this.key && date) {
287
+ this.dispatchEvent(
288
+ new CustomEvent("select-date", {
289
+ detail: { dateKey: this.key, date },
290
+ bubbles: true,
291
+ composed: true
292
+ })
293
+ );
294
+ }
295
+ }
296
+ _onOverflowClick(e) {
297
+ e.stopPropagation();
298
+ if (this.disabled) return;
299
+ const target = e.currentTarget;
300
+ this.dispatchEvent(
301
+ new CustomEvent("show-day-events", {
302
+ detail: {
303
+ dateKey: this.key,
304
+ entries: this.entries.slice(this.maxVisible),
305
+ anchorRect: target.getBoundingClientRect()
306
+ },
307
+ bubbles: true,
308
+ composed: true
309
+ })
310
+ );
311
+ }
312
+ }
313
+ __decorateClass([
314
+ property({ type: String })
315
+ ], PdCalendarEventCell.prototype, "key");
316
+ __decorateClass([
317
+ property({ type: Number })
318
+ ], PdCalendarEventCell.prototype, "dayNumber");
319
+ __decorateClass([
320
+ property({ type: Number })
321
+ ], PdCalendarEventCell.prototype, "weekDayNumber");
322
+ __decorateClass([
323
+ property({ type: Array })
324
+ ], PdCalendarEventCell.prototype, "entries");
325
+ __decorateClass([
326
+ property({ type: Object })
327
+ ], PdCalendarEventCell.prototype, "config");
328
+ __decorateClass([
329
+ property({ type: Boolean, reflect: true })
330
+ ], PdCalendarEventCell.prototype, "today");
331
+ __decorateClass([
332
+ property({ type: Boolean, reflect: true })
333
+ ], PdCalendarEventCell.prototype, "selected");
334
+ __decorateClass([
335
+ property({ type: Boolean, reflect: true })
336
+ ], PdCalendarEventCell.prototype, "disabled");
337
+ __decorateClass([
338
+ property({ type: Number })
339
+ ], PdCalendarEventCell.prototype, "maxVisible");
340
+
341
+ export { PdCalendarEventCell };
@@ -0,0 +1,3 @@
1
+ import { PdCalendarEventCell } from './PdCalendarEventCell.js';
2
+ export { PdCalendarEventCell };
3
+ //# sourceMappingURL=pd-calendar-event-cell.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"pd-calendar-event-cell.d.ts","sourceRoot":"","sources":["../../../src/pd-calendar/pd-calendar-event-cell/pd-calendar-event-cell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAO/D,OAAO,EAAE,mBAAmB,EAAE,CAAC"}
@@ -0,0 +1,8 @@
1
+ import { PdCalendarEventCell } from './PdCalendarEventCell.js';
2
+
3
+ const tag = "pd-calendar-event-cell";
4
+ if (!customElements.get(tag)) {
5
+ customElements.define(tag, PdCalendarEventCell);
6
+ }
7
+
8
+ export { PdCalendarEventCell };
@@ -0,0 +1,29 @@
1
+ import { nothing, CSSResultGroup } from 'lit';
2
+ import { PdCalendarPanelBase } from '../../shared/PdCalendarPanelBase.js';
3
+ import { CalendarCellInfo, CalendarConfig, EventInfoActions } from '../../types.js';
4
+ /**
5
+ * Info panel shown when clicking a single calendar event.
6
+ *
7
+ * @tagname pd-calendar-event-info-panel
8
+ *
9
+ * @event event-action - Fired when an action icon is clicked.
10
+ * Detail: `{ action: "detail" | "edit" | "delete", dateKey: string, entry: CalendarCellInfo }`.
11
+ * @event close-panel - Fired when the panel should close.
12
+ */
13
+ export declare class PdCalendarEventInfoPanel extends PdCalendarPanelBase {
14
+ entry?: CalendarCellInfo;
15
+ dateKey: string;
16
+ actions: EventInfoActions;
17
+ config?: CalendarConfig;
18
+ static styles: CSSResultGroup;
19
+ render(): typeof nothing | import('lit').TemplateResult;
20
+ protected renderHeaderContent(): import('lit').TemplateResult<1>;
21
+ protected renderBody(): import('lit').TemplateResult<1> | typeof nothing;
22
+ private _onAction;
23
+ private _formatHeaderInfo;
24
+ private _formatDateShort;
25
+ private _formatTimeShort;
26
+ private _formatParticipants;
27
+ private _resolveCategoryConfig;
28
+ }
29
+ //# sourceMappingURL=PdCalendarEventInfoPanel.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PdCalendarEventInfoPanel.d.ts","sourceRoot":"","sources":["../../../src/pd-calendar/pd-calendar-event-info-panel/PdCalendarEventInfoPanel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAMzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAC1E,OAAO,KAAK,EACV,gBAAgB,EAChB,cAAc,EACd,gBAAgB,EAEjB,MAAM,gBAAgB,CAAC;AAGxB;;;;;;;;GAQG;AACH,qBAAa,wBAAyB,SAAQ,mBAAmB;IACnC,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,OAAO,SAAM;IACb,OAAO,EAAE,gBAAgB,CAInD;IAC0B,MAAM,CAAC,EAAE,cAAc,CAAC;IAEpD,OAAgB,MAAM,EAAE,cAAc,CAgEpC;IAEO,MAAM;cAKI,mBAAmB;cAenB,UAAU;IA6D7B,OAAO,CAAC,SAAS;IAcjB,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,gBAAgB;IAcxB,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,mBAAmB;IAQ3B,OAAO,CAAC,sBAAsB;CAM/B"}