@progressive-development/pd-calendar 1.0.2 → 1.1.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.
- package/dist/pd-calendar/PdCalendar.d.ts +1 -3
- package/dist/pd-calendar/PdCalendar.d.ts.map +1 -1
- package/dist/pd-calendar/PdCalendar.js +0 -11
- package/dist/pd-calendar/pd-calendar-day-events-panel/PdCalendarDayEventsPanel.d.ts.map +1 -1
- package/dist/pd-calendar/pd-calendar-day-events-panel/PdCalendarDayEventsPanel.js +15 -0
- package/dist/pd-calendar/pd-calendar-event-cell/PdCalendarEventCell.d.ts.map +1 -1
- package/dist/pd-calendar/pd-calendar-event-cell/PdCalendarEventCell.js +15 -0
- package/dist/pd-calendar/pd-calendar-event-info-panel/PdCalendarEventInfoPanel.d.ts +1 -0
- package/dist/pd-calendar/pd-calendar-event-info-panel/PdCalendarEventInfoPanel.d.ts.map +1 -1
- package/dist/pd-calendar/pd-calendar-event-info-panel/PdCalendarEventInfoPanel.js +45 -0
- package/dist/pd-datepicker/PdDatepicker.d.ts +3 -1
- package/dist/pd-datepicker/PdDatepicker.d.ts.map +1 -1
- package/dist/pd-datepicker/PdDatepicker.js +16 -2
- package/dist/shared/PdCalendarPanelBase.js +1 -1
- package/dist/types.d.ts +6 -0
- package/dist/types.d.ts.map +1 -1
- package/package.json +5 -5
- package/dist/pd-calendar/pd-calendar.stories.d.ts +0 -83
- package/dist/pd-calendar/pd-calendar.stories.d.ts.map +0 -1
- package/dist/pd-datepicker/pd-date-picker.stories.d.ts +0 -81
- package/dist/pd-datepicker/pd-date-picker.stories.d.ts.map +0 -1
- package/dist/pd-slot-picker/pd-slot-picker.stories.d.ts +0 -67
- package/dist/pd-slot-picker/pd-slot-picker.stories.d.ts.map +0 -1
|
@@ -9,7 +9,7 @@ import { CalendarData, AvailableCalendarViewTypes, CalendarConfig, CalendarListR
|
|
|
9
9
|
* @event change-month - Fired when navigating to a different month. Detail: `{ newDate: Date, next?: boolean, prev?: boolean }`.
|
|
10
10
|
* @event select-date - Fired when a date is selected. Detail: `{ dateKey: string, date: Date }`.
|
|
11
11
|
* @event select-event - Fired when an event is selected. Detail: `{ dateKey: string, entry: CalendarCellInfo, index: number }`.
|
|
12
|
-
* @event event-action -
|
|
12
|
+
* @event event-action - Bubbles from the info panel when an action icon is clicked. Detail: `{ action: "detail" | "edit" | "delete", dateKey: string, entry: CalendarCellInfo }`.
|
|
13
13
|
* @event mouse-enter-date - Fired when hovering over a date cell. Detail: `{ dateKey: string, date: Date }`.
|
|
14
14
|
* @event mouse-leave-date - Fired when leaving a date cell.
|
|
15
15
|
*
|
|
@@ -105,8 +105,6 @@ export declare class PdCalendar extends LitElement {
|
|
|
105
105
|
private _handleDayEventsSelectEvent;
|
|
106
106
|
private _closeInfoPanel;
|
|
107
107
|
private _closeDayEventsPanel;
|
|
108
|
-
/** Re-dispatches event-action from the info panel. */
|
|
109
|
-
private _reDispatchEventAction;
|
|
110
108
|
private _nextMonth;
|
|
111
109
|
private _previousMonth;
|
|
112
110
|
private _checkNextMonthConstraint;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PdCalendar.d.ts","sourceRoot":"","sources":["../../src/pd-calendar/PdCalendar.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EACL,UAAU,EAIV,cAAc,EACd,cAAc,EACf,MAAM,KAAK,CAAC;AAIb,OAAO,0CAA0C,CAAC;AAClD,OAAO,EACL,YAAY,EAGZ,0BAA0B,EAC1B,cAAc,EACd,iBAAiB,EACjB,cAAc,EAGd,gBAAgB,EACjB,MAAM,aAAa,CAAC;AAGrB,OAAO,oDAAoD,CAAC;AAC5D,OAAO,kDAAkD,CAAC;AAC1D,OAAO,4DAA4D,CAAC;AACpE,OAAO,gEAAgE,CAAC;AACxE,OAAO,gEAAgE,CAAC;AACxE,OAAO,sDAAsD,CAAC;AAE9D;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,gDAAgD;IAEhD,OAAO,CAAC,EAAE,IAAI,CAAC;IAEf,oCAAoC;IAEpC,eAAe,UAAS;IAExB,wEAAwE;IAExE,aAAa,EAAE,MAAM,EAAE,CAAM;IAE7B,oDAAoD;IAEpD,mBAAmB,UAAS;IAE5B,oDAAoD;IAEpD,mBAAmB,UAAS;IAE5B,iDAAiD;IAEjD,aAAa,UAAS;IAEtB,wCAAwC;IAExC,WAAW,UAAS;IAEpB,6DAA6D;IAE7D,mBAAmB,SAAM;IAEzB,4DAA4D;IAE5D,mBAAmB,SAAM;IAEzB,yDAAyD;IAEzD,IAAI,EAAE,YAAY,CAAM;IAExB,qEAAqE;IAErE,WAAW,SAAc;IAEzB,wFAAwF;IAExF,kBAAkB,CAAC,EAAE,0BAA0B,CAAC;IAEhD,6DAA6D;IAE7D,MAAM,CAAC,EAAE,cAAc,CAAC;IAExB;;;OAGG;IAEH,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAE9B,kDAAkD;IAElD,cAAc,CAAC,EAAE,cAAc,CAAC;IAEhC,uFAAuF;IAEvF,QAAQ,EAAE,QAAQ,GAAG,QAAQ,CAAY;IAEzC,0DAA0D;IAE1D,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAEhC,cAAc;IAEd,OAAO,CAAC,eAAe,CAAC,CAAmB;IAE3C,cAAc;IAEd,OAAO,CAAC,iBAAiB,CAAM;IAE/B,cAAc;IAEd,OAAO,CAAC,oBAAoB,CAAC,CAAU;IAEvC,cAAc;IAEd,OAAO,CAAC,sBAAsB,CAAC,CAAqB;IAEpD,cAAc;IAEd,OAAO,CAAC,sBAAsB,CAAM;IAEpC,cAAc;IAEd,OAAO,CAAC,yBAAyB,CAAC,CAAU;IAE5C,2EAA2E;IAE3E,OAAO,CAAC,gBAAgB,CAA+B;IAEvD,cAAc;IAEd,OAAO,CAAC,YAAY,CAAc;IAElC,2EAA2E;IAE3E,OAAO,CAAC,iBAAiB,CAAC,CAAO;IAEjC,OAAO,CAAC,UAAU,CAAM;IACxB,OAAO,CAAC,KAAK,CAAK;IAClB,OAAO,CAAC,aAAa,CAAK;IAC1B,OAAO,CAAC,kBAAkB,CAAK;IAE/B,OAAgB,MAAM,EAAE,cAAc,CA2DpC;IAEO,iBAAiB,IAAI,IAAI;IAOzB,MAAM,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAmBrD,MAAM;
|
|
1
|
+
{"version":3,"file":"PdCalendar.d.ts","sourceRoot":"","sources":["../../src/pd-calendar/PdCalendar.ts"],"names":[],"mappings":"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"}
|
|
@@ -146,7 +146,6 @@ let PdCalendar = class extends LitElement {
|
|
|
146
146
|
.config="${this.config}"
|
|
147
147
|
.anchorRect="${this._infoPanelAnchorRect}"
|
|
148
148
|
@close-panel="${this._closeInfoPanel}"
|
|
149
|
-
@event-action="${this._reDispatchEventAction}"
|
|
150
149
|
></pd-calendar-event-info-panel>` : nothing}
|
|
151
150
|
${this._dayEventsPanelEntries ? html`<pd-calendar-day-events-panel
|
|
152
151
|
.entries="${this._dayEventsPanelEntries}"
|
|
@@ -239,16 +238,6 @@ let PdCalendar = class extends LitElement {
|
|
|
239
238
|
this._dayEventsPanelDateKey = "";
|
|
240
239
|
this._dayEventsPanelAnchorRect = void 0;
|
|
241
240
|
}
|
|
242
|
-
/** Re-dispatches event-action from the info panel. */
|
|
243
|
-
_reDispatchEventAction(e) {
|
|
244
|
-
this.dispatchEvent(
|
|
245
|
-
new CustomEvent("event-action", {
|
|
246
|
-
detail: e.detail,
|
|
247
|
-
bubbles: true,
|
|
248
|
-
composed: true
|
|
249
|
-
})
|
|
250
|
-
);
|
|
251
|
-
}
|
|
252
241
|
// ===========================================================================
|
|
253
242
|
// Month Navigation
|
|
254
243
|
// ===========================================================================
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PdCalendarDayEventsPanel.d.ts","sourceRoot":"","sources":["../../../src/pd-calendar/pd-calendar-day-events-panel/PdCalendarDayEventsPanel.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"PdCalendarDayEventsPanel.d.ts","sourceRoot":"","sources":["../../../src/pd-calendar/pd-calendar-day-events-panel/PdCalendarDayEventsPanel.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,OAAO,EACP,cAAc,EAEf,MAAM,KAAK,CAAC;AAKb,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,CA+DpC;IAEO,MAAM;cAKI,mBAAmB;cAQnB,UAAU;IA8B7B,OAAO,CAAC,aAAa;IAwBrB,OAAO,CAAC,gBAAgB;IAcxB,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,sBAAsB;CAM/B"}
|
|
@@ -53,6 +53,19 @@ class PdCalendarDayEventsPanel extends PdCalendarPanelBase {
|
|
|
53
53
|
flex-shrink: 0;
|
|
54
54
|
}
|
|
55
55
|
|
|
56
|
+
.entry-icon {
|
|
57
|
+
flex-shrink: 0;
|
|
58
|
+
width: 0.9em;
|
|
59
|
+
height: 0.9em;
|
|
60
|
+
display: flex;
|
|
61
|
+
align-items: center;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.entry-icon svg {
|
|
65
|
+
width: 100%;
|
|
66
|
+
height: 100%;
|
|
67
|
+
}
|
|
68
|
+
|
|
56
69
|
.entry-time {
|
|
57
70
|
font-size: 0.75rem;
|
|
58
71
|
color: var(--pd-default-font-light-col, #6b7280);
|
|
@@ -87,6 +100,7 @@ class PdCalendarDayEventsPanel extends PdCalendarPanelBase {
|
|
|
87
100
|
${this.entries.map((entry, i) => {
|
|
88
101
|
const catConfig = this._resolveCategoryConfig(entry.category);
|
|
89
102
|
const time = this._formatEntryTime(entry);
|
|
103
|
+
const icon = entry.icon;
|
|
90
104
|
return html`
|
|
91
105
|
<div
|
|
92
106
|
class="entry-row"
|
|
@@ -96,6 +110,7 @@ class PdCalendarDayEventsPanel extends PdCalendarPanelBase {
|
|
|
96
110
|
class="entry-cat"
|
|
97
111
|
style="background-color: ${catConfig.color}"
|
|
98
112
|
></span>` : html`<span class="entry-cat"></span>`}
|
|
113
|
+
${icon ? html`<span class="entry-icon">${icon}</span>` : nothing}
|
|
99
114
|
<span class="entry-time">${time}</span>
|
|
100
115
|
<span class="entry-title">${entry.info || ""}</span>
|
|
101
116
|
</div>
|
|
@@ -1 +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,
|
|
1
|
+
{"version":3,"file":"PdCalendarEventCell.d.ts","sourceRoot":"","sources":["../../../src/pd-calendar/pd-calendar-event-cell/PdCalendarEventCell.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EACL,UAAU,EAGV,cAAc,EAGf,MAAM,KAAK,CAAC;AAKb,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,CAgMpC;IAEO,MAAM;IAmCf,OAAO,CAAC,eAAe;IAoBvB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,sBAAsB;IAO9B,OAAO,CAAC,aAAa;IAkBrB,OAAO,CAAC,YAAY;IAcpB,OAAO,CAAC,gBAAgB;CAgBzB"}
|
|
@@ -148,6 +148,19 @@ class PdCalendarEventCell extends LitElement {
|
|
|
148
148
|
filter: brightness(0.95);
|
|
149
149
|
}
|
|
150
150
|
|
|
151
|
+
.event-bar-icon {
|
|
152
|
+
flex-shrink: 0;
|
|
153
|
+
width: 0.8em;
|
|
154
|
+
height: 0.8em;
|
|
155
|
+
display: flex;
|
|
156
|
+
align-items: center;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.event-bar-icon svg {
|
|
160
|
+
width: 100%;
|
|
161
|
+
height: 100%;
|
|
162
|
+
}
|
|
163
|
+
|
|
151
164
|
.event-bar-time {
|
|
152
165
|
opacity: 0.7;
|
|
153
166
|
flex-shrink: 0;
|
|
@@ -239,12 +252,14 @@ class PdCalendarEventCell extends LitElement {
|
|
|
239
252
|
const categoryConfig = this._resolveCategoryConfig(entry.category);
|
|
240
253
|
const style = this._buildBarStyle(categoryConfig);
|
|
241
254
|
const time = this._formatEntryTime(entry);
|
|
255
|
+
const icon = entry.icon;
|
|
242
256
|
return html`
|
|
243
257
|
<div
|
|
244
258
|
class="event-bar"
|
|
245
259
|
style="${style}"
|
|
246
260
|
@click="${(e) => this._onEventClick(e, entry, index)}"
|
|
247
261
|
>
|
|
262
|
+
${icon ? html`<span class="event-bar-icon">${icon}</span>` : nothing}
|
|
248
263
|
${time ? html`<span class="event-bar-time">${time}</span>` : nothing}
|
|
249
264
|
<span class="event-bar-title">${entry.info || ""}</span>
|
|
250
265
|
</div>
|
|
@@ -20,6 +20,7 @@ export declare class PdCalendarEventInfoPanel extends PdCalendarPanelBase {
|
|
|
20
20
|
protected renderHeaderContent(): import('lit').TemplateResult<1>;
|
|
21
21
|
protected renderBody(): import('lit').TemplateResult<1> | typeof nothing;
|
|
22
22
|
private _onAction;
|
|
23
|
+
private _renderTypeCategory;
|
|
23
24
|
private _formatHeaderInfo;
|
|
24
25
|
private _formatDateShort;
|
|
25
26
|
private _formatTimeShort;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PdCalendarEventInfoPanel.d.ts","sourceRoot":"","sources":["../../../src/pd-calendar/pd-calendar-event-info-panel/PdCalendarEventInfoPanel.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"PdCalendarEventInfoPanel.d.ts","sourceRoot":"","sources":["../../../src/pd-calendar/pd-calendar-event-info-panel/PdCalendarEventInfoPanel.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,OAAO,EACP,cAAc,EAEf,MAAM,KAAK,CAAC;AAMb,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,CAyFpC;IAEO,MAAM;cAKI,mBAAmB;cAenB,UAAU;IA+D7B,OAAO,CAAC,SAAS;IAejB,OAAO,CAAC,mBAAmB;IA2B3B,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,gBAAgB;IAcxB,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,mBAAmB;IAQ3B,OAAO,CAAC,sBAAsB;CAM/B"}
|
|
@@ -49,6 +49,31 @@ class PdCalendarEventInfoPanel extends PdCalendarPanelBase {
|
|
|
49
49
|
color: var(--pd-default-font-col, #111827);
|
|
50
50
|
}
|
|
51
51
|
|
|
52
|
+
.type-category {
|
|
53
|
+
display: flex;
|
|
54
|
+
align-items: center;
|
|
55
|
+
gap: 0.35rem;
|
|
56
|
+
font-size: 0.8rem;
|
|
57
|
+
color: var(--pd-default-font-light-col, #6b7280);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.type-category__icon {
|
|
61
|
+
width: 1em;
|
|
62
|
+
height: 1em;
|
|
63
|
+
display: flex;
|
|
64
|
+
align-items: center;
|
|
65
|
+
flex-shrink: 0;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.type-category__icon svg {
|
|
69
|
+
width: 100%;
|
|
70
|
+
height: 100%;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.type-category__separator {
|
|
74
|
+
opacity: 0.5;
|
|
75
|
+
}
|
|
76
|
+
|
|
52
77
|
.description {
|
|
53
78
|
font-size: 0.85rem;
|
|
54
79
|
color: var(--pd-default-font-light-col, #6b7280);
|
|
@@ -110,8 +135,10 @@ class PdCalendarEventInfoPanel extends PdCalendarPanelBase {
|
|
|
110
135
|
if (!this.entry) return nothing;
|
|
111
136
|
const participantNames = this._formatParticipants();
|
|
112
137
|
const hasActions = this.actions.detail || this.actions.edit || this.actions.delete;
|
|
138
|
+
const typeCategoryLine = this._renderTypeCategory();
|
|
113
139
|
return html`
|
|
114
140
|
${this.entry.info ? html`<span class="title">${this.entry.info}</span>` : nothing}
|
|
141
|
+
${typeCategoryLine}
|
|
115
142
|
${this.entry.desc ? html`<span class="description">${this.entry.desc}</span>` : nothing}
|
|
116
143
|
${this.entry.location ? html`<span class="location">${this.entry.location}</span>` : nothing}
|
|
117
144
|
${participantNames ? html`<span class="participants">${participantNames}</span>` : nothing}
|
|
@@ -154,6 +181,24 @@ class PdCalendarEventInfoPanel extends PdCalendarPanelBase {
|
|
|
154
181
|
composed: true
|
|
155
182
|
})
|
|
156
183
|
);
|
|
184
|
+
this._onClose();
|
|
185
|
+
}
|
|
186
|
+
// ===========================================================================
|
|
187
|
+
// Type & Category
|
|
188
|
+
// ===========================================================================
|
|
189
|
+
_renderTypeCategory() {
|
|
190
|
+
const icon = this.entry?.icon;
|
|
191
|
+
const typeName = this.entry?.typeName;
|
|
192
|
+
const categoryName = this.entry?.categoryName ?? this._resolveCategoryConfig(this.entry?.category)?.name;
|
|
193
|
+
if (!typeName && !categoryName) return nothing;
|
|
194
|
+
return html`
|
|
195
|
+
<span class="type-category">
|
|
196
|
+
${icon ? html`<span class="type-category__icon">${icon}</span>` : nothing}
|
|
197
|
+
${typeName ?? nothing}
|
|
198
|
+
${typeName && categoryName ? html`<span class="type-category__separator">·</span>` : nothing}
|
|
199
|
+
${categoryName ?? nothing}
|
|
200
|
+
</span>
|
|
201
|
+
`;
|
|
157
202
|
}
|
|
158
203
|
// ===========================================================================
|
|
159
204
|
// Formatting
|
|
@@ -20,6 +20,8 @@ export declare class PdDatepicker extends PdBaseInputElement {
|
|
|
20
20
|
locale?: string;
|
|
21
21
|
/** Initial date value to pre-populate the field. */
|
|
22
22
|
initialDate?: Date;
|
|
23
|
+
/** Initial end date for pre-populating a date range. Only used when `dateRange` is enabled. */
|
|
24
|
+
initialEndDate?: Date;
|
|
23
25
|
/** Date format string (date-fns format). Default: `yyyy-MM-dd`. */
|
|
24
26
|
dateFormat?: string;
|
|
25
27
|
/** Enable date range selection mode. */
|
|
@@ -89,7 +91,7 @@ export declare class PdDatepicker extends PdBaseInputElement {
|
|
|
89
91
|
*/
|
|
90
92
|
_getParsedValue(): any;
|
|
91
93
|
/**
|
|
92
|
-
* Init _startDateValue and _timeSelection from initial
|
|
94
|
+
* Init _startDateValue, _endDateValue and _timeSelection from initial dates.
|
|
93
95
|
*/
|
|
94
96
|
private _prepareFieldsFromInitDate;
|
|
95
97
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PdDatepicker.d.ts","sourceRoot":"","sources":["../../src/pd-datepicker/PdDatepicker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,cAAc,EAAE,cAAc,EAAW,MAAM,KAAK,CAAC;AAMzE,OAAO,EAAE,kBAAkB,EAAW,MAAM,mCAAmC,CAAC;AAIhF,OAAO,4CAA4C,CAAC;AACpD,OAAO,6CAA6C,CAAC;AACrD,OAAO,6CAA6C,CAAC;AAIrD,OAAO,+BAA+B,CAAC;AAuEvC;;;;;;;;;;;;;;GAcG;AACH,qBACa,YAAa,SAAQ,kBAAkB;IAClD,kCAAkC;IAElC,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,oDAAoD;IAEpD,WAAW,CAAC,EAAE,IAAI,CAAC;IAEnB,mEAAmE;IAEnE,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,wCAAwC;IAExC,SAAS,UAAS;IAElB,qDAAqD;IAErD,SAAS,UAAS;IAElB,2EAA2E;IAE3E,aAAa,EAAE,MAAM,EAAE,CAAM;IAE7B,2CAA2C;IAE3C,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,4CAA4C;IAE5C,QAAQ,UAAS;IAEjB,mDAAmD;IAEnD,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,mDAAmD;IAEnD,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,8DAA8D;IAE9D,YAAY,EAAE,MAAM,EAAE,CAAM;IAE5B,qDAAqD;IAErD,KAAK,UAAS;IAEd,+EAA+E;IAE/E,eAAe,SAAO;IAEtB,cAAc;IAEd,OAAO,CAAC,aAAa,CAAS;IAE9B,cAAc;IAEd,OAAO,CAAC,eAAe,CAAC,CAAO;IAE/B,cAAc;IAEd,OAAO,CAAC,aAAa,CAAC,CAAO;IAE7B,cAAc;IAEd,OAAO,CAAC,eAAe,CAAC,CAAe;IAEvC,cAAc;IAEd,OAAO,CAAC,cAAc,CAAS;IAE/B,cAAc;IAEd,OAAO,CAAC,SAAS,CAAS;IAE1B,cAAc;IAEd,OAAO,CAAC,eAAe,CAAc;IAErC,cAAc;IACd,OAAO,CAAC,iBAAiB,CAA8B;IAEvD,cAAc;IACd,OAAO,CAAC,wBAAwB,CAAC,CAAqB;IAEtD,oDAAoD;IACpD,OAAO,KAAK,YAAY,GAQvB;IAED,OAAgB,MAAM,EAAE,cAAc,CAoFpC;;IAQO,oBAAoB;IAa7B,OAAO,CAAC,0BAA0B;IAUzB,MAAM,CAAC,YAAY,EAAE,cAAc,CAAC,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"PdDatepicker.d.ts","sourceRoot":"","sources":["../../src/pd-datepicker/PdDatepicker.ts"],"names":[],"mappings":"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"}
|
|
@@ -112,7 +112,7 @@ let PdDatepicker = class extends PdBaseInputElement {
|
|
|
112
112
|
}) : null;
|
|
113
113
|
}
|
|
114
114
|
update(changedProps) {
|
|
115
|
-
if (changedProps.has("initialDate") && this.initialDate) {
|
|
115
|
+
if (changedProps.has("initialDate") && this.initialDate || changedProps.has("initialEndDate") && this.initialEndDate) {
|
|
116
116
|
this._prepareFieldsFromInitDate();
|
|
117
117
|
this._updateInputField(this.handleChangeForInitVal, void 0);
|
|
118
118
|
}
|
|
@@ -253,7 +253,7 @@ let PdDatepicker = class extends PdBaseInputElement {
|
|
|
253
253
|
return this.dateValues;
|
|
254
254
|
}
|
|
255
255
|
/**
|
|
256
|
-
* Init _startDateValue and _timeSelection from initial
|
|
256
|
+
* Init _startDateValue, _endDateValue and _timeSelection from initial dates.
|
|
257
257
|
*/
|
|
258
258
|
_prepareFieldsFromInitDate() {
|
|
259
259
|
if (this.initialDate) {
|
|
@@ -266,6 +266,17 @@ let PdDatepicker = class extends PdBaseInputElement {
|
|
|
266
266
|
this._timeSelection = format(this.initialDate, "HH:mm");
|
|
267
267
|
}
|
|
268
268
|
}
|
|
269
|
+
if (this.dateRange && this.initialEndDate && this._startDateValue) {
|
|
270
|
+
this._endDateValue = new Date(
|
|
271
|
+
this.initialEndDate.getFullYear(),
|
|
272
|
+
this.initialEndDate.getMonth(),
|
|
273
|
+
this.initialEndDate.getDate()
|
|
274
|
+
);
|
|
275
|
+
this._rangeSelection = getDataForDaysBetween(
|
|
276
|
+
this._startDateValue,
|
|
277
|
+
this._endDateValue
|
|
278
|
+
);
|
|
279
|
+
}
|
|
269
280
|
}
|
|
270
281
|
/**
|
|
271
282
|
* Clear _startDateValue and _timeSelection.
|
|
@@ -640,6 +651,9 @@ __decorateClass([
|
|
|
640
651
|
__decorateClass([
|
|
641
652
|
property({ type: Object })
|
|
642
653
|
], PdDatepicker.prototype, "initialDate", 2);
|
|
654
|
+
__decorateClass([
|
|
655
|
+
property({ type: Object })
|
|
656
|
+
], PdDatepicker.prototype, "initialEndDate", 2);
|
|
643
657
|
__decorateClass([
|
|
644
658
|
property({ type: String })
|
|
645
659
|
], PdDatepicker.prototype, "dateFormat", 2);
|
package/dist/types.d.ts
CHANGED
|
@@ -17,6 +17,12 @@ export interface CalendarCellInfo {
|
|
|
17
17
|
capacity?: number;
|
|
18
18
|
/** Number of already booked spots. */
|
|
19
19
|
booked?: number;
|
|
20
|
+
/** SVG icon template for the event (e.g., from pd-icon-event). */
|
|
21
|
+
icon?: unknown;
|
|
22
|
+
/** Event type display name (e.g., "Hochzeit", "Geburtstag"). */
|
|
23
|
+
typeName?: string;
|
|
24
|
+
/** Category display name (resolved from config if not set). */
|
|
25
|
+
categoryName?: string;
|
|
20
26
|
/** Unique event ID for action events. */
|
|
21
27
|
id?: string;
|
|
22
28
|
/** Short location text (e.g., room name). */
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,gBAAgB;IAC/B,uEAAuE;IACvE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAGhB,kEAAkE;IAClE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,gEAAgE;IAChE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+DAA+D;IAC/D,YAAY,CAAC,EAAE,MAAM,CAAC;IAGtB,yCAAyC;IACzC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wBAAwB;IACxB,YAAY,CAAC,EAAE,KAAK,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACzD;AAED,qEAAqE;AACrE,MAAM,WAAW,gBAAgB;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,gBAAgB,EAAE,CAAC,CAAC;AAM9D,2CAA2C;AAC3C,MAAM,WAAW,sBAAsB;IACrC,oCAAoC;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,mDAAmD;AACnD,MAAM,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,EAAE,sBAAsB,CAAC,CAAC;AAEzE,mCAAmC;AACnC,MAAM,WAAW,cAAc;IAC7B,4BAA4B;IAC5B,UAAU,CAAC,EAAE,mBAAmB,CAAC;CAClC;AAMD;;;GAGG;AACH,MAAM,WAAW,iBAAiB;IAChC,8FAA8F;IAC9F,KAAK,EAAE,IAAI,GAAG,MAAM,CAAC;IACrB,4FAA4F;IAC5F,GAAG,EAAE,IAAI,GAAG,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,8DAA8D;AAC9D,MAAM,WAAW,eAAe;IAC9B,qCAAqC;IACrC,OAAO,EAAE,MAAM,CAAC;IAChB,kCAAkC;IAClC,SAAS,EAAE,MAAM,CAAC;IAClB,gCAAgC;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,CAAC;AACnE,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;AAE/D,MAAM,WAAW,0BAA0B;IACzC,SAAS,EAAE,gBAAgB,EAAE,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,wBAAwB;IACvC,OAAO,EAAE,kBAAkB,EAAE,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAMD,0FAA0F;AAC1F,MAAM,MAAM,YAAY,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAErD,kDAAkD;AAClD,MAAM,WAAW,cAAc;IAC7B,kDAAkD;IAClD,WAAW,CAAC,EAAE,YAAY,EAAE,CAAC;IAC7B,gEAAgE;IAChE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sEAAsE;IACtE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAMD,4FAA4F;AAC5F,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,CAAC;AAEtC,yDAAyD;AACzD,MAAM,MAAM,YAAY,GAAG,WAAW,EAAE,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progressive-development/pd-calendar",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "Webcomponent for calendar",
|
|
5
5
|
"author": "PD Progressive Development",
|
|
6
6
|
"license": "MIT",
|
|
@@ -32,10 +32,10 @@
|
|
|
32
32
|
"date-fns": "^2.30.0",
|
|
33
33
|
"fecha": "^4.2.3",
|
|
34
34
|
"tslib": "^2.8.1",
|
|
35
|
-
"@progressive-development/pd-shared-styles": "0.
|
|
36
|
-
"@progressive-development/pd-
|
|
37
|
-
"@progressive-development/pd-
|
|
38
|
-
"@progressive-development/pd-utils": "1.
|
|
35
|
+
"@progressive-development/pd-shared-styles": "0.4.0",
|
|
36
|
+
"@progressive-development/pd-forms": "1.1.0",
|
|
37
|
+
"@progressive-development/pd-icon": "1.1.0",
|
|
38
|
+
"@progressive-development/pd-utils": "1.1.0"
|
|
39
39
|
},
|
|
40
40
|
"customElements": "custom-elements.json",
|
|
41
41
|
"keywords": [
|
|
@@ -1,83 +0,0 @@
|
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/web-components-vite';
|
|
2
|
-
import { CalendarData, AvailableCalendarViewTypes } from '../types.js';
|
|
3
|
-
/**
|
|
4
|
-
* Story arguments interface for pd-calendar component.
|
|
5
|
-
* Maps to the component's public API.
|
|
6
|
-
*/
|
|
7
|
-
interface PdCalendarArgs {
|
|
8
|
-
/** Reference date for initial calendar view */
|
|
9
|
-
refDate?: Date;
|
|
10
|
-
/** Whether weekends should be hidden */
|
|
11
|
-
hideWeekend: boolean;
|
|
12
|
-
/** Calendar data with info per date */
|
|
13
|
-
data: CalendarData;
|
|
14
|
-
/** Number of months allowed to navigate backwards (-1 = unlimited) */
|
|
15
|
-
prevMonthConstraint: number;
|
|
16
|
-
/** Number of months allowed to navigate forwards (-1 = unlimited) */
|
|
17
|
-
nextMonthConstraint: number;
|
|
18
|
-
/** Whether dates are selectable */
|
|
19
|
-
selectableDates: boolean;
|
|
20
|
-
/** Whether to show selection highlight */
|
|
21
|
-
showSelection: boolean;
|
|
22
|
-
/** Year selection popup values */
|
|
23
|
-
withYearPopup: string[];
|
|
24
|
-
/** CSS class for number positioning */
|
|
25
|
-
numberClass: string;
|
|
26
|
-
/** Enable mouse wheel navigation between months */
|
|
27
|
-
withWheelNavigation: boolean;
|
|
28
|
-
/** Enable touch swipe navigation between months */
|
|
29
|
-
withTouchNavigation: boolean;
|
|
30
|
-
/** Available view types for view toggle */
|
|
31
|
-
availableViewTypes?: AvailableCalendarViewTypes;
|
|
32
|
-
}
|
|
33
|
-
/**
|
|
34
|
-
* ## pd-calendar
|
|
35
|
-
*
|
|
36
|
-
* A full-featured calendar component supporting month, list, and week views with
|
|
37
|
-
* date info, selection, navigation, and event management.
|
|
38
|
-
*
|
|
39
|
-
* ### Features
|
|
40
|
-
* - **Month View**: Displays a full month with navigation controls and date info
|
|
41
|
-
* - **List View**: Shows only dates with data in a compact list format
|
|
42
|
-
* - **Week View (timeGrid)**: Displays a weekly time grid with overlapping events
|
|
43
|
-
* - **Event Calendar**: Month view with event bars and info panel (`cellType="events"`)
|
|
44
|
-
* - **Special Days**: Highlight specific dates with category-based styling
|
|
45
|
-
* - **Navigation**: Arrow buttons, keyboard, mouse wheel, touch swipe, year popup
|
|
46
|
-
* - **Navigation Constraints**: Limit forward/backward month navigation
|
|
47
|
-
* - **Weekend Hiding**: Option to hide Saturday and Sunday
|
|
48
|
-
* - **Custom Date Range**: List view can display a specific date range
|
|
49
|
-
*
|
|
50
|
-
* ### Accessibility
|
|
51
|
-
* - `role="grid"` on the calendar grid with `aria-label` for current month/year
|
|
52
|
-
* - Arrow keys navigate between dates, Enter/Space selects
|
|
53
|
-
* - Home/End for first/last day of month
|
|
54
|
-
* - `aria-selected` on selected dates
|
|
55
|
-
* - `tabindex` management for keyboard focus (0 when selectable, -1 when read-only)
|
|
56
|
-
* - Focus-visible styling for keyboard users
|
|
57
|
-
*/
|
|
58
|
-
declare const meta: Meta<PdCalendarArgs>;
|
|
59
|
-
export default meta;
|
|
60
|
-
type Story = StoryObj<PdCalendarArgs>;
|
|
61
|
-
/** Default calendar without data or constraints. Interactive via Controls panel. */
|
|
62
|
-
export declare const Default: Story;
|
|
63
|
-
/** Calendar with price info per date and forward/backward navigation constraints. */
|
|
64
|
-
export declare const WithInfoAndConstraints: Story;
|
|
65
|
-
/** Calendar with category-highlighted special days (green background). */
|
|
66
|
-
export declare const WithSpecialDays: Story;
|
|
67
|
-
/** Compact selectable calendar with year popup, centered numbers, and reduced width. */
|
|
68
|
-
export declare const Selectable: Story;
|
|
69
|
-
/** List view with title, description, time, and category colors. Toggle between month and list view. */
|
|
70
|
-
export declare const ListView: Story;
|
|
71
|
-
/** All time display variants in list view: no time, start only, start+end, and full day. */
|
|
72
|
-
export declare const ListViewTimeVariants: Story;
|
|
73
|
-
/** List view with a custom date range spanning multiple months. Navigation is disabled in range mode. */
|
|
74
|
-
export declare const ListViewCustomRange: Story;
|
|
75
|
-
/** Week view (timeGrid) with timed events, full-day events, and overlapping events. */
|
|
76
|
-
export declare const WeekView: Story;
|
|
77
|
-
/** Week view with custom time window (8:00-18:00) and visible days configuration. */
|
|
78
|
-
export declare const WeekViewBusinessHours: Story;
|
|
79
|
-
/** Month view with event bars per day using `cellType="events"`. Click an event bar to open the info panel. */
|
|
80
|
-
export declare const EventCalendar: Story;
|
|
81
|
-
/** CSS Custom Properties -- Branded and Redesigned calendar variants. */
|
|
82
|
-
export declare const CustomStyling: Story;
|
|
83
|
-
//# sourceMappingURL=pd-calendar.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"pd-calendar.stories.d.ts","sourceRoot":"","sources":["../../src/pd-calendar/pd-calendar.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,OAAO,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EACV,YAAY,EACZ,0BAA0B,EAI3B,MAAM,aAAa,CAAC;AAMrB;;;GAGG;AACH,UAAU,cAAc;IACtB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,wCAAwC;IACxC,WAAW,EAAE,OAAO,CAAC;IACrB,uCAAuC;IACvC,IAAI,EAAE,YAAY,CAAC;IACnB,sEAAsE;IACtE,mBAAmB,EAAE,MAAM,CAAC;IAC5B,qEAAqE;IACrE,mBAAmB,EAAE,MAAM,CAAC;IAC5B,mCAAmC;IACnC,eAAe,EAAE,OAAO,CAAC;IACzB,0CAA0C;IAC1C,aAAa,EAAE,OAAO,CAAC;IACvB,kCAAkC;IAClC,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,uCAAuC;IACvC,WAAW,EAAE,MAAM,CAAC;IACpB,mDAAmD;IACnD,mBAAmB,EAAE,OAAO,CAAC;IAC7B,mDAAmD;IACnD,mBAAmB,EAAE,OAAO,CAAC;IAC7B,2CAA2C;IAC3C,kBAAkB,CAAC,EAAE,0BAA0B,CAAC;CACjD;AA+ED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,cAAc,CAoG9B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC;AAMtC,oFAAoF;AACpF,eAAO,MAAM,OAAO,EAAE,KAgBrB,CAAC;AAMF,qFAAqF;AACrF,eAAO,MAAM,sBAAsB,EAAE,KAiBpC,CAAC;AAMF,0EAA0E;AAC1E,eAAO,MAAM,eAAe,EAAE,KAgB7B,CAAC;AAMF,wFAAwF;AACxF,eAAO,MAAM,UAAU,EAAE,KAwCxB,CAAC;AAMF,wGAAwG;AACxG,eAAO,MAAM,QAAQ,EAAE,KA4FtB,CAAC;AAMF,4FAA4F;AAC5F,eAAO,MAAM,oBAAoB,EAAE,KAiElC,CAAC;AAMF,yGAAyG;AACzG,eAAO,MAAM,mBAAmB,EAAE,KAkEjC,CAAC;AAMF,uFAAuF;AACvF,eAAO,MAAM,QAAQ,EAAE,KAuHtB,CAAC;AAMF,qFAAqF;AACrF,eAAO,MAAM,qBAAqB,EAAE,KA2EnC,CAAC;AAMF,+GAA+G;AAC/G,eAAO,MAAM,aAAa,EAAE,KAmI3B,CAAC;AAMF,yEAAyE;AACzE,eAAO,MAAM,aAAa,EAAE,KAyF3B,CAAC"}
|
|
@@ -1,81 +0,0 @@
|
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/web-components-vite';
|
|
2
|
-
/**
|
|
3
|
-
* Story arguments interface for pd-datepicker component.
|
|
4
|
-
* Maps to the component's public API.
|
|
5
|
-
*/
|
|
6
|
-
interface PdDatepickerArgs {
|
|
7
|
-
/** Field label */
|
|
8
|
-
label: string;
|
|
9
|
-
/** Placeholder text */
|
|
10
|
-
placeholder: string;
|
|
11
|
-
/** Whether the field is required */
|
|
12
|
-
required: boolean;
|
|
13
|
-
/** Whether the field is disabled */
|
|
14
|
-
disabled: boolean;
|
|
15
|
-
/** Whether to show time selection */
|
|
16
|
-
withTime: boolean;
|
|
17
|
-
/** Whether to enable date range selection */
|
|
18
|
-
dateRange: boolean;
|
|
19
|
-
/** Initial date value */
|
|
20
|
-
initialDate?: Date;
|
|
21
|
-
/** Date format string */
|
|
22
|
-
dateFormat: string;
|
|
23
|
-
/** Minimum allowed date (YYYY-MM-DD) */
|
|
24
|
-
min?: string;
|
|
25
|
-
/** Maximum allowed date (YYYY-MM-DD) */
|
|
26
|
-
max?: string;
|
|
27
|
-
/** Year selection popup values */
|
|
28
|
-
withYearPopup: string[];
|
|
29
|
-
/** Whether to hide today button */
|
|
30
|
-
hideToday: boolean;
|
|
31
|
-
}
|
|
32
|
-
/**
|
|
33
|
-
* ## pd-datepicker
|
|
34
|
-
*
|
|
35
|
-
* A datepicker component for selecting dates with optional time and range support.
|
|
36
|
-
* Opens a calendar popup on click and integrates seamlessly with pd-form-container
|
|
37
|
-
* for validation.
|
|
38
|
-
*
|
|
39
|
-
* ### Features
|
|
40
|
-
* - **Date Selection**: Click to open calendar popup for date selection
|
|
41
|
-
* - **Time Selection**: Optional time picker with predefined time slots
|
|
42
|
-
* - **Date Range**: Optional range selection for start and end dates
|
|
43
|
-
* - **Year Popup**: Quick year navigation via dropdown
|
|
44
|
-
* - **Min/Max Constraints**: Limit selectable date range with `min` and `max` properties
|
|
45
|
-
* - **Disabled Days**: Disable specific dates via `disabledDays` array
|
|
46
|
-
* - **Modal Mode**: Centered modal display for mobile devices (auto or forced)
|
|
47
|
-
* - **Form Integration**: Works with pd-form-container for validation
|
|
48
|
-
* - **Popup Positioning**: Automatically opens above or below based on viewport space
|
|
49
|
-
*
|
|
50
|
-
* ### Accessibility
|
|
51
|
-
* - `aria-haspopup="dialog"` on the input field
|
|
52
|
-
* - `aria-expanded` reflects popup open/close state
|
|
53
|
-
* - `aria-controls` links input to popup
|
|
54
|
-
* - `aria-modal="true"` on the calendar popup
|
|
55
|
-
* - Keyboard: Enter/Space toggles popup, ArrowDown opens, Escape closes
|
|
56
|
-
* - Focus returns to input when popup closes
|
|
57
|
-
*/
|
|
58
|
-
declare const meta: Meta<PdDatepickerArgs>;
|
|
59
|
-
export default meta;
|
|
60
|
-
type Story = StoryObj<PdDatepickerArgs>;
|
|
61
|
-
/** Default datepicker. Interactive via Controls panel. */
|
|
62
|
-
export declare const Default: Story;
|
|
63
|
-
/** All datepicker configurations at a glance. */
|
|
64
|
-
export declare const AllVariants: Story;
|
|
65
|
-
/** Datepicker with time selection -- date + time picker combination. */
|
|
66
|
-
export declare const WithTime: Story;
|
|
67
|
-
/** Datepicker for selecting a start and end date. */
|
|
68
|
-
export declare const DateRange: Story;
|
|
69
|
-
/** Different date format locales side by side. */
|
|
70
|
-
export declare const Locales: Story;
|
|
71
|
-
/** Date constraints with min/max properties, disabled days, and linked datepickers. */
|
|
72
|
-
export declare const MinMaxDate: Story;
|
|
73
|
-
/** Modal mode displays the calendar centered on screen with a backdrop overlay. */
|
|
74
|
-
export declare const ModalMode: Story;
|
|
75
|
-
/** Datepicker within a pd-form-container with validation. */
|
|
76
|
-
export declare const InForm: Story;
|
|
77
|
-
/** Tests automatic popup positioning based on available viewport space. */
|
|
78
|
-
export declare const PopupPosition: Story;
|
|
79
|
-
/** CSS Custom Properties -- Branded and Redesigned datepicker variants. */
|
|
80
|
-
export declare const CustomStyling: Story;
|
|
81
|
-
//# sourceMappingURL=pd-date-picker.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"pd-date-picker.stories.d.ts","sourceRoot":"","sources":["../../src/pd-datepicker/pd-date-picker.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,OAAO,qDAAqD,CAAC;AAC7D,OAAO,+CAA+C,CAAC;AACvD,OAAO,6CAA6C,CAAC;AAErD,OAAO,oBAAoB,CAAC;AAM5B;;;GAGG;AACH,UAAU,gBAAgB;IACxB,kBAAkB;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,uBAAuB;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,oCAAoC;IACpC,QAAQ,EAAE,OAAO,CAAC;IAClB,oCAAoC;IACpC,QAAQ,EAAE,OAAO,CAAC;IAClB,qCAAqC;IACrC,QAAQ,EAAE,OAAO,CAAC;IAClB,6CAA6C;IAC7C,SAAS,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB,yBAAyB;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wCAAwC;IACxC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,mCAAmC;IACnC,SAAS,EAAE,OAAO,CAAC;CACpB;AAYD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,gBAAgB,CAoFhC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAC;AAMxC,0DAA0D;AAC1D,eAAO,MAAM,OAAO,EAAE,KAcrB,CAAC;AAMF,iDAAiD;AACjD,eAAO,MAAM,WAAW,EAAE,KAuEzB,CAAC;AAMF,wEAAwE;AACxE,eAAO,MAAM,QAAQ,EAAE,KA+BtB,CAAC;AAMF,qDAAqD;AACrD,eAAO,MAAM,SAAS,EAAE,KA4BvB,CAAC;AAMF,kDAAkD;AAClD,eAAO,MAAM,OAAO,EAAE,KA4CrB,CAAC;AAMF,uFAAuF;AACvF,eAAO,MAAM,UAAU,EAAE,KAqGxB,CAAC;AAMF,mFAAmF;AACnF,eAAO,MAAM,SAAS,EAAE,KA8DvB,CAAC;AAMF,6DAA6D;AAC7D,eAAO,MAAM,MAAM,EAAE,KA0EpB,CAAC;AAMF,2EAA2E;AAC3E,eAAO,MAAM,aAAa,EAAE,KAoC3B,CAAC;AAMF,2EAA2E;AAC3E,eAAO,MAAM,aAAa,EAAE,KA4G3B,CAAC"}
|
|
@@ -1,67 +0,0 @@
|
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/web-components-vite';
|
|
2
|
-
import { CalendarData, CalendarConfig } from '../types.js';
|
|
3
|
-
/**
|
|
4
|
-
* Story arguments interface for pd-slot-picker component.
|
|
5
|
-
* Maps to the component's public API.
|
|
6
|
-
*/
|
|
7
|
-
interface PdSlotPickerArgs {
|
|
8
|
-
/** Calendar data with slots per date */
|
|
9
|
-
data: CalendarData;
|
|
10
|
-
/** Calendar configuration including category definitions */
|
|
11
|
-
config?: CalendarConfig;
|
|
12
|
-
/** Whether weekends should be hidden */
|
|
13
|
-
hideWeekend: boolean;
|
|
14
|
-
/** Number of months allowed to navigate backwards (-1 = unlimited) */
|
|
15
|
-
prevMonthConstraint: number;
|
|
16
|
-
/** Number of months allowed to navigate forwards (-1 = unlimited) */
|
|
17
|
-
nextMonthConstraint: number;
|
|
18
|
-
/** Year selection popup values */
|
|
19
|
-
withYearPopup: string[];
|
|
20
|
-
/** Enable mouse wheel navigation between months */
|
|
21
|
-
withWheelNavigation: boolean;
|
|
22
|
-
/** Enable touch swipe navigation between months */
|
|
23
|
-
withTouchNavigation: boolean;
|
|
24
|
-
}
|
|
25
|
-
/**
|
|
26
|
-
* ## pd-slot-picker
|
|
27
|
-
*
|
|
28
|
-
* Appointment slot picker component (Calendly-style) that combines a monthly
|
|
29
|
-
* calendar view with a time slot list for booking appointments.
|
|
30
|
-
*
|
|
31
|
-
* ### Features
|
|
32
|
-
* - **Calendar + Slots**: Side-by-side layout (responsive flex-wrap)
|
|
33
|
-
* - **Day Selection**: Click a highlighted day to see its available time slots
|
|
34
|
-
* - **Slot Selection**: Click a time slot to select it (fires `select-slot` event)
|
|
35
|
-
* - **Categories**: Color-coded slot types via CalendarConfig
|
|
36
|
-
* - **Disabled Slots**: Mark already-booked slots as disabled
|
|
37
|
-
* - **Capacity Tracking**: Show remaining spots per slot, auto-disable when full
|
|
38
|
-
* - **Responsive**: Wraps to vertical layout on smaller screens
|
|
39
|
-
* - **Navigation Constraints**: Limit forward/backward month navigation
|
|
40
|
-
* - **Weekend Hiding**: Option to hide Saturday and Sunday
|
|
41
|
-
*
|
|
42
|
-
* ### Accessibility
|
|
43
|
-
* - Slot list uses `role="list"` with `role="listitem"` on each slot cell
|
|
44
|
-
* - Slot cells are focusable via `tabindex="0"`
|
|
45
|
-
* - Calendar keyboard navigation inherited from pd-calendar
|
|
46
|
-
* - Disabled slots are visually distinct and non-interactive
|
|
47
|
-
*/
|
|
48
|
-
declare const meta: Meta<PdSlotPickerArgs>;
|
|
49
|
-
export default meta;
|
|
50
|
-
type Story = StoryObj<PdSlotPickerArgs>;
|
|
51
|
-
/** Default slot picker with appointment data. Click a highlighted day to see available time slots. */
|
|
52
|
-
export declare const Default: Story;
|
|
53
|
-
/** Slot picker without category colors -- simple uniform slot styling. */
|
|
54
|
-
export declare const WithoutCategories: Story;
|
|
55
|
-
/** Responsive layout behavior: side-by-side on wide screens, stacked on narrow screens. */
|
|
56
|
-
export declare const ResponsiveLayout: Story;
|
|
57
|
-
/** Mix of available and disabled (already booked) slots. */
|
|
58
|
-
export declare const WithDisabledSlots: Story;
|
|
59
|
-
/** Slots with capacity tracking -- shows remaining spots and auto-disables when full. */
|
|
60
|
-
export declare const WithCapacity: Story;
|
|
61
|
-
/** Many 15-minute slots to demonstrate the scrollable slot list behavior. */
|
|
62
|
-
export declare const ManySlots: Story;
|
|
63
|
-
/** Slot picker with hidden weekends and year popup. */
|
|
64
|
-
export declare const HiddenWeekends: Story;
|
|
65
|
-
/** CSS Custom Properties -- Branded and Redesigned slot picker variants. */
|
|
66
|
-
export declare const CustomStyling: Story;
|
|
67
|
-
//# sourceMappingURL=pd-slot-picker.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"pd-slot-picker.stories.d.ts","sourceRoot":"","sources":["../../src/pd-slot-picker/pd-slot-picker.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,OAAO,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAMhE;;;GAGG;AACH,UAAU,gBAAgB;IACxB,wCAAwC;IACxC,IAAI,EAAE,YAAY,CAAC;IACnB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,wCAAwC;IACxC,WAAW,EAAE,OAAO,CAAC;IACrB,sEAAsE;IACtE,mBAAmB,EAAE,MAAM,CAAC;IAC5B,qEAAqE;IACrE,mBAAmB,EAAE,MAAM,CAAC;IAC5B,kCAAkC;IAClC,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,mDAAmD;IACnD,mBAAmB,EAAE,OAAO,CAAC;IAC7B,mDAAmD;IACnD,mBAAmB,EAAE,OAAO,CAAC;CAC9B;AA4LD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,gBAAgB,CA+EhC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAC;AAMxC,sGAAsG;AACtG,eAAO,MAAM,OAAO,EAAE,KAmBrB,CAAC;AAMF,0EAA0E;AAC1E,eAAO,MAAM,iBAAiB,EAAE,KAc/B,CAAC;AAMF,2FAA2F;AAC3F,eAAO,MAAM,gBAAgB,EAAE,KA+D9B,CAAC;AAMF,4DAA4D;AAC5D,eAAO,MAAM,iBAAiB,EAAE,KAuE/B,CAAC;AAMF,yFAAyF;AACzF,eAAO,MAAM,YAAY,EAAE,KAoJ1B,CAAC;AAMF,6EAA6E;AAC7E,eAAO,MAAM,SAAS,EAAE,KA8CvB,CAAC;AAMF,uDAAuD;AACvD,eAAO,MAAM,cAAc,EAAE,KAmB5B,CAAC;AAMF,4EAA4E;AAC5E,eAAO,MAAM,aAAa,EAAE,KAyG3B,CAAC"}
|