@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,337 @@
1
+ import { 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
+ import { PdBaseCell } from '../../shared/PdBaseCell.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 PdCalendarCell extends PdBaseCell {
17
+ constructor() {
18
+ super(...arguments);
19
+ this.selectEnabled = false;
20
+ this.today = false;
21
+ this.focused = false;
22
+ this.numberClass = "top-left";
23
+ }
24
+ static {
25
+ this.styles = [
26
+ css`
27
+ :host {
28
+ display: block;
29
+ }
30
+
31
+ .cell {
32
+ width: 100%;
33
+ height: 100%;
34
+ min-height: 30px;
35
+ border-radius: var(--pd-radius-sm, 2px);
36
+ transition:
37
+ background-color 0.15s ease,
38
+ box-shadow 0.15s ease,
39
+ transform 0.1s ease;
40
+ }
41
+
42
+ .cell-day {
43
+ position: relative;
44
+ background-color: var(
45
+ --pd-calendar-cell-day-bg-col,
46
+ var(--pd-default-bg-col)
47
+ );
48
+ }
49
+
50
+ .cell-day.we {
51
+ background-color: var(
52
+ --pd-calendar-cell-day-we-bg-col,
53
+ var(--pd-default-light-col)
54
+ );
55
+ }
56
+
57
+ /* Selectable (free) cells */
58
+ .free {
59
+ background-color: var(
60
+ --pd-calendar-cell-day-free-bg-col,
61
+ var(--pd-default-col)
62
+ );
63
+ box-shadow: var(
64
+ --pd-calendar-cell-selectable-shadow,
65
+ var(--pd-shadow-md)
66
+ );
67
+ }
68
+
69
+ /* Categorized cells - color set via inline style */
70
+ .categorized {
71
+ background-color: var(
72
+ --pd-calendar-cell-day-category-bg-col,
73
+ var(--pd-default-success-col)
74
+ );
75
+ box-shadow: var(
76
+ --pd-calendar-cell-selectable-shadow,
77
+ var(--pd-shadow-md)
78
+ );
79
+ }
80
+
81
+ /* Hover states for selectable cells */
82
+ .categorized:hover,
83
+ .free:hover {
84
+ background-color: var(
85
+ --pd-calendar-cell-day-bg-col-hover,
86
+ var(--pd-default-hover-col)
87
+ );
88
+ cursor: pointer;
89
+ box-shadow: var(--pd-shadow-md);
90
+ transform: translateY(-1px);
91
+ }
92
+
93
+ .categorized:active,
94
+ .free:active {
95
+ transform: translateY(0);
96
+ box-shadow: var(--pd-shadow-md);
97
+ }
98
+
99
+ /* Focus styles for keyboard navigation */
100
+ :host([focused]) .cell-day {
101
+ outline: 2px solid
102
+ var(--pd-calendar-cell-focus-outline-col, var(--pd-default-info-col));
103
+ outline-offset: -2px;
104
+ z-index: 1;
105
+ }
106
+
107
+ /* Disabled state */
108
+ :host([disabled]) .cell-day {
109
+ opacity: 0.4;
110
+ cursor: not-allowed;
111
+ pointer-events: none;
112
+ }
113
+
114
+ /* Info text (e.g., price) */
115
+ .cell-info {
116
+ display: flex;
117
+ align-items: center;
118
+ justify-content: center;
119
+ height: 100%;
120
+ /* Task? */
121
+ color: var(--pd-calendar-cell-day-info-col, var(--pd-on-primary-col));
122
+ font-family: var(--pd-default-font-title-family);
123
+ font-weight: 600;
124
+ font-size: var(--pd-calendar-info-font-size, 1.5em);
125
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
126
+ pointer-events: none;
127
+ }
128
+
129
+ /* Day number */
130
+ .cell-number {
131
+ pointer-events: none;
132
+ font-size: var(--pd-calendar-number-font-size, 0.9em);
133
+ font-weight: 600;
134
+ color: var(
135
+ --pd-calendar-cell-day-number-col,
136
+ var(--pd-default-dark-col)
137
+ );
138
+ font-family: var(--pd-default-font-content-family);
139
+ position: relative;
140
+ z-index: 1;
141
+ }
142
+
143
+ .cell-number.top-left {
144
+ position: absolute;
145
+ left: var(--pd-spacing-xs);
146
+ top: var(--pd-spacing-xs);
147
+ }
148
+
149
+ .center {
150
+ display: flex;
151
+ align-items: center;
152
+ justify-content: center;
153
+ height: 100%;
154
+ }
155
+
156
+ /* Selectable cells have light text on colored background */
157
+ .free .cell-number,
158
+ .categorized .cell-number {
159
+ color: var(
160
+ --pd-calendar-cell-day-category-text-col,
161
+ var(--pd-calendar-cell-day-info-free-col, var(--pd-on-primary-col))
162
+ );
163
+ }
164
+
165
+ .free .cell-info,
166
+ .categorized .cell-info {
167
+ color: var(
168
+ --pd-calendar-cell-day-category-text-col,
169
+ var(--pd-calendar-cell-day-info-free-col, var(--pd-on-primary-col))
170
+ );
171
+ }
172
+
173
+ .selection .cell-number {
174
+ color: var(
175
+ --pd-calendar-cell-day-info-selection-col,
176
+ var(--pd-on-primary-col)
177
+ );
178
+ }
179
+
180
+ /* Today and selected indicators */
181
+ .number-ring {
182
+ position: absolute;
183
+ inset: 15% 10%;
184
+ border-radius: var(--pd-radius-sm, 3px);
185
+ }
186
+
187
+ .today {
188
+ border: 2px solid
189
+ var(--pd-calendar-cell-today-border-col, var(--pd-default-error-col));
190
+ }
191
+
192
+ .selected {
193
+ border: 2px solid transparent;
194
+ background-color: var(
195
+ --pd-calendar-cell-selected-bg-col,
196
+ var(--pd-default-col)
197
+ );
198
+ }
199
+
200
+ @container (max-width: 800px) {
201
+ .cell-info {
202
+ font-size: 1.2em;
203
+ }
204
+ .cell-number {
205
+ font-size: 0.8em;
206
+ }
207
+ }
208
+
209
+ @container (max-width: 500px) {
210
+ .cell-info {
211
+ font-weight: 500;
212
+ font-size: 0.95em;
213
+ }
214
+ .cell-number {
215
+ font-size: 0.75em;
216
+ }
217
+ }
218
+
219
+ @container (max-width: 300px) {
220
+ .cell-number.top-left {
221
+ left: 2px;
222
+ top: 2px;
223
+ }
224
+ .cell-info {
225
+ font-size: 0.85em;
226
+ }
227
+ }
228
+ `
229
+ ];
230
+ }
231
+ render() {
232
+ return this.selectEnabled && !this.disabled ? this._renderSelectableCell() : this._renderNonSelectableCell();
233
+ }
234
+ _handleSelect() {
235
+ const userSelectedDate = parse(this.key, "YYYY-MM-DD");
236
+ if (this.key && userSelectedDate) {
237
+ this.dispatchEvent(
238
+ new CustomEvent("select-date", {
239
+ detail: { dateKey: this.key, date: userSelectedDate },
240
+ bubbles: true,
241
+ composed: true
242
+ })
243
+ );
244
+ }
245
+ }
246
+ /**
247
+ * Determines if this is a weekend day.
248
+ */
249
+ _isWeekend() {
250
+ return this.weekDayNumber === 0 || this.weekDayNumber === 6;
251
+ }
252
+ /**
253
+ * Builds CSS class string for the cell.
254
+ */
255
+ _getCellClasses(isSelectable) {
256
+ const classes = ["cell", "cell-day", this.numberClass];
257
+ const hasCategory = !!this.category;
258
+ if (isSelectable) {
259
+ classes.push(hasCategory ? "categorized" : "free");
260
+ }
261
+ if (this._isWeekend() && !hasCategory) {
262
+ classes.push("we");
263
+ }
264
+ if (this.selected) {
265
+ classes.push("selection");
266
+ }
267
+ return classes.join(" ");
268
+ }
269
+ _renderSelectableCell() {
270
+ const style = this._getCategoryStyle(
271
+ "--pd-calendar-cell-day-category-bg-col",
272
+ "--pd-calendar-cell-day-category-text-col"
273
+ );
274
+ return html`
275
+ <div
276
+ @click="${this._selectableCellClicked}"
277
+ @mouseenter="${this._mouseEnter}"
278
+ @mouseleave="${this._mouseLeave}"
279
+ class="${this._getCellClasses(true)}"
280
+ style="${style}"
281
+ data-date="${this.key}"
282
+ >
283
+ ${this.title ? html`<div class="cell-info">${this.title}</div>` : nothing}
284
+ ${this.today || this.selected ? html`<div
285
+ class="number-ring ${classMap({
286
+ today: this.today,
287
+ selected: this.selected
288
+ })}"
289
+ ></div>` : nothing}
290
+ <div class="cell-number ${this.numberClass}">${this.dayNumber}</div>
291
+ </div>
292
+ `;
293
+ }
294
+ _renderNonSelectableCell() {
295
+ return html`
296
+ <div class="${this._getCellClasses(false)}">
297
+ ${this.title ? html`<div class="cell-info">${this.title}</div>` : nothing}
298
+ <div class="cell-number ${this.numberClass}">${this.dayNumber}</div>
299
+ </div>
300
+ `;
301
+ }
302
+ _selectableCellClicked() {
303
+ this._handleSelect();
304
+ }
305
+ _mouseEnter() {
306
+ const userSelectedDate = parse(this.key, "YYYY-MM-DD");
307
+ this.dispatchEvent(
308
+ new CustomEvent("mouse-enter-date", {
309
+ detail: { dateKey: this.key, date: userSelectedDate },
310
+ bubbles: true,
311
+ composed: true
312
+ })
313
+ );
314
+ }
315
+ _mouseLeave() {
316
+ this.dispatchEvent(
317
+ new CustomEvent("mouse-leave-date", {
318
+ bubbles: true,
319
+ composed: true
320
+ })
321
+ );
322
+ }
323
+ }
324
+ __decorateClass([
325
+ property({ type: Boolean })
326
+ ], PdCalendarCell.prototype, "selectEnabled");
327
+ __decorateClass([
328
+ property({ type: Boolean })
329
+ ], PdCalendarCell.prototype, "today");
330
+ __decorateClass([
331
+ property({ type: Boolean, reflect: true })
332
+ ], PdCalendarCell.prototype, "focused");
333
+ __decorateClass([
334
+ property({ type: String })
335
+ ], PdCalendarCell.prototype, "numberClass");
336
+
337
+ export { PdCalendarCell };
@@ -0,0 +1,3 @@
1
+ import { PdCalendarCell } from './PdCalendarCell.js';
2
+ export { PdCalendarCell };
3
+ //# sourceMappingURL=pd-calendar-cell.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"pd-calendar-cell.d.ts","sourceRoot":"","sources":["../../../src/pd-calendar/pd-calendar-cell/pd-calendar-cell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAOrD,OAAO,EAAE,cAAc,EAAE,CAAC"}
@@ -0,0 +1,8 @@
1
+ import { PdCalendarCell } from './PdCalendarCell.js';
2
+
3
+ const tag = "pd-calendar-cell";
4
+ if (!customElements.get(tag)) {
5
+ customElements.define(tag, PdCalendarCell);
6
+ }
7
+
8
+ export { PdCalendarCell };
@@ -0,0 +1,27 @@
1
+ import { nothing, CSSResultGroup } from 'lit';
2
+ import { PdCalendarPanelBase } from '../../shared/PdCalendarPanelBase.js';
3
+ import { CalendarCellInfo, CalendarConfig } from '../../types.js';
4
+ /**
5
+ * Panel showing all events for a given day.
6
+ * Opens when clicking the overflow indicator ("+N weitere") in the month view.
7
+ *
8
+ * @tagname pd-calendar-day-events-panel
9
+ *
10
+ * @event select-event - Fired when an entry row is clicked.
11
+ * Detail: `{ dateKey: string, entry: CalendarCellInfo, index: number, anchorRect: DOMRect }`.
12
+ * @event close-panel - Fired when the panel should close.
13
+ */
14
+ export declare class PdCalendarDayEventsPanel extends PdCalendarPanelBase {
15
+ entries: CalendarCellInfo[];
16
+ dateKey: string;
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>;
22
+ private _onEntryClick;
23
+ private _formatDateShort;
24
+ private _formatEntryTime;
25
+ private _resolveCategoryConfig;
26
+ }
27
+ //# sourceMappingURL=PdCalendarDayEventsPanel.d.ts.map
@@ -0,0 +1 @@
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"}
@@ -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"}