@progressive-development/pd-calendar 0.6.8 → 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 (141) hide show
  1. package/LICENSE +21 -2
  2. package/README.md +32 -57
  3. package/dist/generated/locales/be.d.ts +7 -0
  4. package/dist/generated/locales/be.d.ts.map +1 -1
  5. package/dist/generated/locales/de.d.ts +7 -0
  6. package/dist/generated/locales/de.d.ts.map +1 -1
  7. package/dist/generated/locales/en.d.ts +7 -0
  8. package/dist/generated/locales/en.d.ts.map +1 -1
  9. package/dist/index.d.ts +12 -2
  10. package/dist/index.d.ts.map +1 -1
  11. package/dist/index.js +23 -10
  12. package/dist/locales/be.js +10 -4
  13. package/dist/locales/de.js +10 -4
  14. package/dist/locales/en.js +10 -4
  15. package/dist/pd-calendar/PdCalendar.d.ts +133 -0
  16. package/dist/pd-calendar/PdCalendar.d.ts.map +1 -0
  17. package/dist/pd-calendar/PdCalendar.js +550 -0
  18. package/dist/pd-calendar/pd-calendar-cell/PdCalendarCell.d.ts +56 -0
  19. package/dist/pd-calendar/pd-calendar-cell/PdCalendarCell.d.ts.map +1 -0
  20. package/dist/pd-calendar/pd-calendar-cell/PdCalendarCell.js +337 -0
  21. package/dist/pd-calendar/pd-calendar-cell/pd-calendar-cell.d.ts +3 -0
  22. package/dist/pd-calendar/pd-calendar-cell/pd-calendar-cell.d.ts.map +1 -0
  23. package/dist/pd-calendar/pd-calendar-cell/pd-calendar-cell.js +8 -0
  24. package/dist/pd-calendar/pd-calendar-day-events-panel/PdCalendarDayEventsPanel.d.ts +27 -0
  25. package/dist/pd-calendar/pd-calendar-day-events-panel/PdCalendarDayEventsPanel.d.ts.map +1 -0
  26. package/dist/pd-calendar/pd-calendar-day-events-panel/PdCalendarDayEventsPanel.js +160 -0
  27. package/dist/pd-calendar/pd-calendar-day-events-panel/pd-calendar-day-events-panel.d.ts +3 -0
  28. package/dist/pd-calendar/pd-calendar-day-events-panel/pd-calendar-day-events-panel.d.ts.map +1 -0
  29. package/dist/pd-calendar/pd-calendar-day-events-panel/pd-calendar-day-events-panel.js +8 -0
  30. package/dist/pd-calendar/pd-calendar-event-cell/PdCalendarEventCell.d.ts +55 -0
  31. package/dist/pd-calendar/pd-calendar-event-cell/PdCalendarEventCell.d.ts.map +1 -0
  32. package/dist/pd-calendar/pd-calendar-event-cell/PdCalendarEventCell.js +341 -0
  33. package/dist/pd-calendar/pd-calendar-event-cell/pd-calendar-event-cell.d.ts +3 -0
  34. package/dist/pd-calendar/pd-calendar-event-cell/pd-calendar-event-cell.d.ts.map +1 -0
  35. package/dist/pd-calendar/pd-calendar-event-cell/pd-calendar-event-cell.js +8 -0
  36. package/dist/pd-calendar/pd-calendar-event-info-panel/PdCalendarEventInfoPanel.d.ts +29 -0
  37. package/dist/pd-calendar/pd-calendar-event-info-panel/PdCalendarEventInfoPanel.d.ts.map +1 -0
  38. package/dist/pd-calendar/pd-calendar-event-info-panel/PdCalendarEventInfoPanel.js +211 -0
  39. package/dist/pd-calendar/pd-calendar-event-info-panel/pd-calendar-event-info-panel.d.ts +3 -0
  40. package/dist/pd-calendar/pd-calendar-event-info-panel/pd-calendar-event-info-panel.d.ts.map +1 -0
  41. package/dist/pd-calendar/pd-calendar-event-info-panel/pd-calendar-event-info-panel.js +8 -0
  42. package/dist/pd-calendar/pd-calendar-list-cell/PdCalendarListCell.d.ts +28 -0
  43. package/dist/pd-calendar/pd-calendar-list-cell/PdCalendarListCell.d.ts.map +1 -0
  44. package/dist/pd-calendar/pd-calendar-list-cell/PdCalendarListCell.js +252 -0
  45. package/dist/pd-calendar/pd-calendar-list-cell/pd-calendar-list-cell.d.ts +3 -0
  46. package/dist/pd-calendar/pd-calendar-list-cell/pd-calendar-list-cell.d.ts.map +1 -0
  47. package/dist/pd-calendar/pd-calendar-list-cell/pd-calendar-list-cell.js +8 -0
  48. package/dist/pd-calendar/pd-calendar-list-view/PdCalendarListView.d.ts +26 -0
  49. package/dist/pd-calendar/pd-calendar-list-view/PdCalendarListView.d.ts.map +1 -0
  50. package/dist/pd-calendar/pd-calendar-list-view/PdCalendarListView.js +165 -0
  51. package/dist/pd-calendar/pd-calendar-list-view/pd-calendar-list-view.d.ts +3 -0
  52. package/dist/pd-calendar/pd-calendar-list-view/pd-calendar-list-view.d.ts.map +1 -0
  53. package/dist/pd-calendar/pd-calendar-list-view/pd-calendar-list-view.js +8 -0
  54. package/dist/pd-calendar/pd-calendar-month-view/PdCalendarMonthView.d.ts +55 -0
  55. package/dist/pd-calendar/pd-calendar-month-view/PdCalendarMonthView.d.ts.map +1 -0
  56. package/dist/pd-calendar/pd-calendar-month-view/PdCalendarMonthView.js +461 -0
  57. package/dist/pd-calendar/pd-calendar-month-view/pd-calendar-month-view.d.ts +3 -0
  58. package/dist/pd-calendar/pd-calendar-month-view/pd-calendar-month-view.d.ts.map +1 -0
  59. package/dist/pd-calendar/pd-calendar-month-view/pd-calendar-month-view.js +8 -0
  60. package/dist/pd-calendar/pd-calendar-time-grid-view/PdCalendarTimeGridView.d.ts +32 -0
  61. package/dist/pd-calendar/pd-calendar-time-grid-view/PdCalendarTimeGridView.d.ts.map +1 -0
  62. package/dist/pd-calendar/pd-calendar-time-grid-view/PdCalendarTimeGridView.js +468 -0
  63. package/dist/pd-calendar/pd-calendar-time-grid-view/pd-calendar-time-grid-view.d.ts +3 -0
  64. package/dist/pd-calendar/pd-calendar-time-grid-view/pd-calendar-time-grid-view.d.ts.map +1 -0
  65. package/dist/pd-calendar/pd-calendar-time-grid-view/pd-calendar-time-grid-view.js +8 -0
  66. package/dist/pd-calendar/pd-calendar-week-cell/PdCalendarWeekCell.d.ts +31 -0
  67. package/dist/pd-calendar/pd-calendar-week-cell/PdCalendarWeekCell.d.ts.map +1 -0
  68. package/dist/pd-calendar/pd-calendar-week-cell/PdCalendarWeekCell.js +134 -0
  69. package/dist/pd-calendar/pd-calendar-week-cell/pd-calendar-week-cell.d.ts +3 -0
  70. package/dist/pd-calendar/pd-calendar-week-cell/pd-calendar-week-cell.d.ts.map +1 -0
  71. package/dist/pd-calendar/pd-calendar-week-cell/pd-calendar-week-cell.js +8 -0
  72. package/dist/pd-calendar/pd-calendar.d.ts +3 -0
  73. package/dist/pd-calendar/pd-calendar.d.ts.map +1 -0
  74. package/dist/pd-calendar/pd-calendar.stories.d.ts +83 -0
  75. package/dist/pd-calendar/pd-calendar.stories.d.ts.map +1 -0
  76. package/dist/pd-calendar/pd-year-popup/PdYearPopup.d.ts +38 -0
  77. package/dist/pd-calendar/pd-year-popup/PdYearPopup.d.ts.map +1 -0
  78. package/dist/pd-calendar/pd-year-popup/PdYearPopup.js +249 -0
  79. package/dist/pd-calendar/pd-year-popup/pd-year-popup.d.ts +3 -0
  80. package/dist/pd-calendar/pd-year-popup/pd-year-popup.d.ts.map +1 -0
  81. package/dist/pd-calendar/pd-year-popup/pd-year-popup.js +8 -0
  82. package/dist/pd-calendar.d.ts +2 -48
  83. package/dist/pd-calendar.js +6 -437
  84. package/dist/pd-datepicker/PdDatepicker.d.ts +181 -0
  85. package/dist/pd-datepicker/PdDatepicker.d.ts.map +1 -0
  86. package/dist/pd-datepicker/PdDatepicker.js +701 -0
  87. package/dist/pd-datepicker/pd-date-picker.stories.d.ts +81 -0
  88. package/dist/pd-datepicker/pd-date-picker.stories.d.ts.map +1 -0
  89. package/dist/pd-datepicker/pd-datepicker.d.ts +3 -0
  90. package/dist/pd-datepicker/pd-datepicker.d.ts.map +1 -0
  91. package/dist/pd-datepicker.d.ts +2 -0
  92. package/dist/pd-datepicker.js +8 -0
  93. package/dist/pd-slot-picker/PdSlotPicker.d.ts +102 -0
  94. package/dist/pd-slot-picker/PdSlotPicker.d.ts.map +1 -0
  95. package/dist/pd-slot-picker/PdSlotPicker.js +339 -0
  96. package/dist/pd-slot-picker/pd-slot-cell/PdSlotCell.d.ts +35 -0
  97. package/dist/pd-slot-picker/pd-slot-cell/PdSlotCell.d.ts.map +1 -0
  98. package/dist/pd-slot-picker/pd-slot-cell/PdSlotCell.js +188 -0
  99. package/dist/pd-slot-picker/pd-slot-cell/pd-slot-cell.d.ts +3 -0
  100. package/dist/pd-slot-picker/pd-slot-cell/pd-slot-cell.d.ts.map +1 -0
  101. package/dist/pd-slot-picker/pd-slot-cell/pd-slot-cell.js +8 -0
  102. package/dist/pd-slot-picker/pd-slot-picker.d.ts +3 -0
  103. package/dist/pd-slot-picker/pd-slot-picker.d.ts.map +1 -0
  104. package/dist/pd-slot-picker/pd-slot-picker.stories.d.ts +67 -0
  105. package/dist/pd-slot-picker/pd-slot-picker.stories.d.ts.map +1 -0
  106. package/dist/pd-slot-picker.d.ts +2 -0
  107. package/dist/pd-slot-picker.js +8 -0
  108. package/dist/shared/PdBaseCell.d.ts +68 -0
  109. package/dist/shared/PdBaseCell.d.ts.map +1 -0
  110. package/dist/shared/PdBaseCell.js +120 -0
  111. package/dist/shared/PdBaseView.d.ts +22 -0
  112. package/dist/shared/PdBaseView.d.ts.map +1 -0
  113. package/dist/shared/PdBaseView.js +46 -0
  114. package/dist/shared/PdCalendarPanelBase.d.ts +34 -0
  115. package/dist/shared/PdCalendarPanelBase.d.ts.map +1 -0
  116. package/dist/shared/PdCalendarPanelBase.js +169 -0
  117. package/dist/shared/calendar-button-bar/calendar-button-bar.d.ts +41 -0
  118. package/dist/shared/calendar-button-bar/calendar-button-bar.d.ts.map +1 -0
  119. package/dist/shared/calendar-button-bar/calendar-button-bar.js +435 -0
  120. package/dist/shared/calendar-locales.d.ts +9 -0
  121. package/dist/shared/calendar-locales.d.ts.map +1 -0
  122. package/dist/shared/calendar-locales.js +30 -0
  123. package/dist/shared/calendar-utils.d.ts +34 -0
  124. package/dist/shared/calendar-utils.d.ts.map +1 -0
  125. package/dist/shared/calendar-utils.js +99 -0
  126. package/dist/shared/calendar-utils.test.d.ts +2 -0
  127. package/dist/shared/calendar-utils.test.d.ts.map +1 -0
  128. package/dist/types.d.ts +102 -1
  129. package/dist/types.d.ts.map +1 -1
  130. package/package.json +35 -47
  131. package/dist/pd-calendar-cell.d.ts +0 -47
  132. package/dist/pd-calendar-cell.d.ts.map +0 -1
  133. package/dist/pd-calendar-cell.js +0 -282
  134. package/dist/pd-calendar.d.ts.map +0 -1
  135. package/dist/pd-year-popup.d.ts +0 -25
  136. package/dist/pd-year-popup.d.ts.map +0 -1
  137. package/dist/pd-year-popup.js +0 -136
  138. package/dist/stories/cell.stories.d.ts +0 -15
  139. package/dist/stories/cell.stories.d.ts.map +0 -1
  140. package/dist/stories/index.stories.d.ts +0 -23
  141. package/dist/stories/index.stories.d.ts.map +0 -1
@@ -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"}
@@ -0,0 +1,211 @@
1
+ import { css, nothing, html } from 'lit';
2
+ import { property } from 'lit/decorators.js';
3
+ import { formatShortDate } from '@progressive-development/pd-utils';
4
+ import { pdIcons } from '@progressive-development/pd-icon';
5
+ import { PdCalendarPanelBase } from '../../shared/PdCalendarPanelBase.js';
6
+ import { LOCALES } from '../../shared/calendar-locales.js';
7
+
8
+ var __defProp = Object.defineProperty;
9
+ var __decorateClass = (decorators, target, key, kind) => {
10
+ var result = void 0 ;
11
+ for (var i = decorators.length - 1, decorator; i >= 0; i--)
12
+ if (decorator = decorators[i])
13
+ result = (decorator(target, key, result) ) || result;
14
+ if (result) __defProp(target, key, result);
15
+ return result;
16
+ };
17
+ class PdCalendarEventInfoPanel extends PdCalendarPanelBase {
18
+ constructor() {
19
+ super(...arguments);
20
+ this.dateKey = "";
21
+ this.actions = {
22
+ detail: true,
23
+ edit: true,
24
+ delete: true
25
+ };
26
+ }
27
+ static {
28
+ this.styles = [
29
+ PdCalendarPanelBase.panelBaseStyles,
30
+ css`
31
+ .category-stripe {
32
+ width: 4px;
33
+ align-self: stretch;
34
+ border-radius: 2px;
35
+ flex-shrink: 0;
36
+ }
37
+
38
+ .header-text {
39
+ font-size: 0.8rem;
40
+ color: var(--pd-default-font-light-col, #6b7280);
41
+ white-space: nowrap;
42
+ overflow: hidden;
43
+ text-overflow: ellipsis;
44
+ }
45
+
46
+ .title {
47
+ font-size: 1rem;
48
+ font-weight: 600;
49
+ color: var(--pd-default-font-col, #111827);
50
+ }
51
+
52
+ .description {
53
+ font-size: 0.85rem;
54
+ color: var(--pd-default-font-light-col, #6b7280);
55
+ }
56
+
57
+ .location {
58
+ font-size: 0.8rem;
59
+ color: var(--pd-default-font-light-col, #6b7280);
60
+ }
61
+
62
+ .participants {
63
+ font-size: 0.8rem;
64
+ color: var(--pd-default-font-light-col, #6b7280);
65
+ }
66
+
67
+ .divider {
68
+ border: none;
69
+ border-top: 1px solid var(--pd-default-disabled-light-col, #e5e7eb);
70
+ margin: var(--pd-spacing-xs, 0.25rem) 0;
71
+ }
72
+
73
+ .actions {
74
+ display: flex;
75
+ align-items: center;
76
+ justify-content: center;
77
+ gap: var(--pd-spacing-md, 1rem);
78
+ padding: var(--pd-spacing-xs, 0.25rem) 0;
79
+ }
80
+
81
+ .action-icon {
82
+ cursor: pointer;
83
+ opacity: 0.6;
84
+ transition: opacity 0.15s ease;
85
+ --pd-icon-size: 20px;
86
+ }
87
+
88
+ .action-icon:hover {
89
+ opacity: 1;
90
+ }
91
+ `
92
+ ];
93
+ }
94
+ render() {
95
+ if (!this.entry) return nothing;
96
+ return super.render();
97
+ }
98
+ renderHeaderContent() {
99
+ const categoryConfig = this._resolveCategoryConfig(this.entry?.category);
100
+ const headerInfo = this._formatHeaderInfo();
101
+ return html`
102
+ ${categoryConfig?.color ? html`<span
103
+ class="category-stripe"
104
+ style="background-color: ${categoryConfig.color}"
105
+ ></span>` : nothing}
106
+ <span class="header-text">${headerInfo}</span>
107
+ `;
108
+ }
109
+ renderBody() {
110
+ if (!this.entry) return nothing;
111
+ const participantNames = this._formatParticipants();
112
+ const hasActions = this.actions.detail || this.actions.edit || this.actions.delete;
113
+ return html`
114
+ ${this.entry.info ? html`<span class="title">${this.entry.info}</span>` : nothing}
115
+ ${this.entry.desc ? html`<span class="description">${this.entry.desc}</span>` : nothing}
116
+ ${this.entry.location ? html`<span class="location">${this.entry.location}</span>` : nothing}
117
+ ${participantNames ? html`<span class="participants">${participantNames}</span>` : nothing}
118
+ ${hasActions ? html`
119
+ <hr class="divider" />
120
+ <div class="actions">
121
+ ${this.actions.detail ? html`
122
+ <pd-icon
123
+ class="action-icon"
124
+ icon="${pdIcons.ICON_DETAIL}"
125
+ @click="${() => this._onAction("detail")}"
126
+ ></pd-icon>
127
+ ` : nothing}
128
+ ${this.actions.edit ? html`
129
+ <pd-icon
130
+ class="action-icon"
131
+ icon="${pdIcons.ICON_EDIT_NEW}"
132
+ @click="${() => this._onAction("edit")}"
133
+ ></pd-icon>
134
+ ` : nothing}
135
+ ${this.actions.delete ? html`
136
+ <pd-icon
137
+ class="action-icon"
138
+ icon="${pdIcons.ICON_DELETE_NEW}"
139
+ @click="${() => this._onAction("delete")}"
140
+ ></pd-icon>
141
+ ` : nothing}
142
+ </div>
143
+ ` : nothing}
144
+ `;
145
+ }
146
+ // ===========================================================================
147
+ // Actions
148
+ // ===========================================================================
149
+ _onAction(action) {
150
+ this.dispatchEvent(
151
+ new CustomEvent("event-action", {
152
+ detail: { action, dateKey: this.dateKey, entry: this.entry },
153
+ bubbles: true,
154
+ composed: true
155
+ })
156
+ );
157
+ }
158
+ // ===========================================================================
159
+ // Formatting
160
+ // ===========================================================================
161
+ _formatHeaderInfo() {
162
+ const datePart = this._formatDateShort();
163
+ const timePart = this._formatTimeShort();
164
+ if (datePart && timePart) return `${datePart} · ${timePart}`;
165
+ return datePart || timePart;
166
+ }
167
+ _formatDateShort() {
168
+ if (!this.dateKey) return "";
169
+ const [yearStr, monthStr, dayStr] = this.dateKey.split("-");
170
+ const date = new Date(
171
+ Number(yearStr),
172
+ Number(monthStr) - 1,
173
+ Number(dayStr)
174
+ );
175
+ const dayOfWeek = date.getDay();
176
+ const localeIdx = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
177
+ const weekday = LOCALES.weekdaysShort[localeIdx];
178
+ return `${weekday}, ${formatShortDate(date, false)}`;
179
+ }
180
+ _formatTimeShort() {
181
+ if (!this.entry) return "";
182
+ if (this.entry.fullDay) return "24h";
183
+ if (this.entry.startTime && this.entry.endTime) {
184
+ return `${this.entry.startTime}-${this.entry.endTime}`;
185
+ }
186
+ if (this.entry.startTime) return this.entry.startTime;
187
+ return "";
188
+ }
189
+ _formatParticipants() {
190
+ if (!this.entry?.participants?.length) return "";
191
+ return this.entry.participants.map((p) => p.name || p.email || "").filter(Boolean).join(", ");
192
+ }
193
+ _resolveCategoryConfig(category) {
194
+ if (!category) return void 0;
195
+ return this.config?.categories?.[category];
196
+ }
197
+ }
198
+ __decorateClass([
199
+ property({ type: Object })
200
+ ], PdCalendarEventInfoPanel.prototype, "entry");
201
+ __decorateClass([
202
+ property({ type: String })
203
+ ], PdCalendarEventInfoPanel.prototype, "dateKey");
204
+ __decorateClass([
205
+ property({ type: Object })
206
+ ], PdCalendarEventInfoPanel.prototype, "actions");
207
+ __decorateClass([
208
+ property({ type: Object })
209
+ ], PdCalendarEventInfoPanel.prototype, "config");
210
+
211
+ export { PdCalendarEventInfoPanel };
@@ -0,0 +1,3 @@
1
+ import { PdCalendarEventInfoPanel } from './PdCalendarEventInfoPanel.js';
2
+ export { PdCalendarEventInfoPanel };
3
+ //# sourceMappingURL=pd-calendar-event-info-panel.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"pd-calendar-event-info-panel.d.ts","sourceRoot":"","sources":["../../../src/pd-calendar/pd-calendar-event-info-panel/pd-calendar-event-info-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 { PdCalendarEventInfoPanel } from './PdCalendarEventInfoPanel.js';
2
+
3
+ const tag = "pd-calendar-event-info-panel";
4
+ if (!customElements.get(tag)) {
5
+ customElements.define(tag, PdCalendarEventInfoPanel);
6
+ }
7
+
8
+ export { PdCalendarEventInfoPanel };
@@ -0,0 +1,28 @@
1
+ import { CSSResultGroup } from 'lit';
2
+ import { PdBaseCell } from '../../shared/PdBaseCell.js';
3
+ import { CalendarCellInfo } from '../../types.js';
4
+ /**
5
+ * A list cell component for displaying calendar entries in list view.
6
+ * Shows date, weekday, title, and optional description in a horizontal row.
7
+ */
8
+ export declare class PdCalendarListCell extends PdBaseCell {
9
+ /** The month number (1-12). */
10
+ monthNumber: number;
11
+ /** The year (e.g., 2026). */
12
+ yearNumber: number;
13
+ /** The full entry object for this cell. */
14
+ entry?: CalendarCellInfo;
15
+ /** Index of this entry within the day's entries array. */
16
+ entryIndex: number;
17
+ /** Weekday abbreviations (German). */
18
+ private _weekDayNames;
19
+ static styles: CSSResultGroup;
20
+ render(): import('lit').TemplateResult<1>;
21
+ protected _handleSelect(): void;
22
+ /**
23
+ * Formats the date as dd.mm.yy
24
+ */
25
+ private _formatDate;
26
+ private _handleClick;
27
+ }
28
+ //# sourceMappingURL=PdCalendarListCell.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PdCalendarListCell.d.ts","sourceRoot":"","sources":["../../../src/pd-calendar/pd-calendar-list-cell/PdCalendarListCell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAa,MAAM,KAAK,CAAC;AAGhD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAEvD;;;GAGG;AACH,qBACa,kBAAmB,SAAQ,UAAU;IAChD,+BAA+B;IAE/B,WAAW,SAAK;IAEhB,6BAA6B;IAE7B,UAAU,SAAK;IAEf,2CAA2C;IAE3C,KAAK,CAAC,EAAE,gBAAgB,CAAC;IAEzB,0DAA0D;IAE1D,UAAU,SAAK;IAEf,sCAAsC;IACtC,OAAO,CAAC,aAAa,CAA8C;IAEnE,OAAgB,MAAM,EAAE,cAAc,CAyJpC;IAEO,MAAM;cAkCI,aAAa,IAAI,IAAI;IAiBxC;;OAEG;IACH,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,YAAY;CAGrB"}