@dialiq/calendar-component 1.1.3 → 1.1.5
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/BookingDetailsModal.d.ts.map +1 -1
- package/dist/Calendar.d.ts.map +1 -1
- package/dist/CreateBookingModal.d.ts +3 -1
- package/dist/CreateBookingModal.d.ts.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.esm.js +79 -24
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +78 -23
- package/dist/index.js.map +1 -1
- package/dist/types.d.ts +10 -0
- package/dist/types.d.ts.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -7439,19 +7439,45 @@ function styleInject(css, ref) {
|
|
|
7439
7439
|
}
|
|
7440
7440
|
}
|
|
7441
7441
|
|
|
7442
|
-
var css_248z$2 = ".modal-overlay {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: rgba(0, 0, 0, 0.5);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 1000;\r\n padding: 20px;\r\n}\r\n\r\n.modal-content {\r\n background: #
|
|
7442
|
+
var css_248z$2 = "/* Modal CSS - Inherits CSS variables from parent, uses fallbacks */\r\n.modal-overlay {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: rgba(0, 0, 0, 0.5);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 1000;\r\n padding: 20px;\r\n}\r\n\r\n.modal-content {\r\n background: var(--calendar-bg, #fff);\r\n border-radius: 8px;\r\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);\r\n width: 100%;\r\n max-width: 500px;\r\n max-height: 90vh;\r\n overflow-y: auto;\r\n color: var(--calendar-text-primary, #333);\r\n}\r\n\r\n.modal-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 20px;\r\n border-bottom: 1px solid var(--calendar-border-color, #e0e0e0);\r\n}\r\n\r\n.modal-header h3 {\r\n margin: 0;\r\n font-size: 20px;\r\n font-weight: 600;\r\n color: var(--calendar-text-primary, #333);\r\n}\r\n\r\n.modal-close-btn {\r\n background: none;\r\n border: none;\r\n font-size: 32px;\r\n line-height: 1;\r\n color: var(--calendar-text-secondary, #666);\r\n cursor: pointer;\r\n padding: 0;\r\n width: 32px;\r\n height: 32px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 4px;\r\n transition: background-color 0.2s;\r\n}\r\n\r\n.modal-close-btn:hover {\r\n background: var(--calendar-border-color, #e0e0e0);\r\n color: var(--calendar-text-primary, #333);\r\n}\r\n\r\n.modal-body {\r\n padding: 20px;\r\n}\r\n\r\n.modal-footer {\r\n display: flex;\r\n justify-content: flex-end;\r\n gap: 12px;\r\n padding: 20px;\r\n border-top: 1px solid var(--calendar-border-color, #e0e0e0);\r\n}\r\n\r\n.modal-error {\r\n background: var(--calendar-closed-badge-bg, #fde7e9);\r\n color: var(--calendar-error-color, #d13438);\r\n padding: 12px;\r\n border-radius: 4px;\r\n margin-bottom: 16px;\r\n font-size: 14px;\r\n}\r\n\r\n.form-group {\r\n margin-bottom: 16px;\r\n}\r\n\r\n.form-group label {\r\n display: block;\r\n font-weight: 500;\r\n font-size: 14px;\r\n color: var(--calendar-text-primary, #333);\r\n margin-bottom: 6px;\r\n}\r\n\r\n.form-group input,\r\n.form-group textarea {\r\n width: 100%;\r\n padding: 10px 12px;\r\n border: 1px solid var(--calendar-border-color, #e0e0e0);\r\n border-radius: 4px;\r\n font-size: 14px;\r\n font-family: inherit;\r\n color: var(--calendar-text-primary, #333);\r\n background: var(--calendar-bg, #fff);\r\n transition: border-color 0.2s;\r\n box-sizing: border-box;\r\n}\r\n\r\n.form-group input:focus,\r\n.form-group textarea:focus {\r\n outline: none;\r\n border-color: var(--calendar-accent, #0078d4);\r\n box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.1);\r\n}\r\n\r\n.form-group textarea {\r\n resize: vertical;\r\n}\r\n\r\n.form-group small {\r\n display: block;\r\n margin-top: 4px;\r\n font-size: 12px;\r\n color: var(--calendar-text-secondary, #666);\r\n}\r\n\r\n.form-group select {\r\n width: 100%;\r\n padding: 10px 12px;\r\n border: 1px solid var(--calendar-border-color, #e0e0e0);\r\n border-radius: 4px;\r\n font-size: 14px;\r\n font-family: inherit;\r\n color: var(--calendar-text-primary, #333);\r\n background: var(--calendar-bg, #fff);\r\n cursor: pointer;\r\n transition: border-color 0.2s;\r\n box-sizing: border-box;\r\n}\r\n\r\n.form-group select:focus {\r\n outline: none;\r\n border-color: var(--calendar-accent, #0078d4);\r\n box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.1);\r\n}\r\n\r\n.selected-items {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 8px;\r\n margin-top: 8px;\r\n}\r\n\r\n.selected-item {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 6px;\r\n padding: 4px 8px;\r\n background: var(--calendar-today-bg, #e6f2ff);\r\n border: 1px solid var(--calendar-accent, #0078d4);\r\n border-radius: 4px;\r\n font-size: 13px;\r\n color: var(--calendar-accent, #0078d4);\r\n}\r\n\r\n.remove-item-btn {\r\n background: none;\r\n border: none;\r\n padding: 0;\r\n width: 18px;\r\n height: 18px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 16px;\r\n color: var(--calendar-accent, #0078d4);\r\n cursor: pointer;\r\n border-radius: 50%;\r\n transition: background-color 0.2s;\r\n}\r\n\r\n.remove-item-btn:hover {\r\n background: var(--calendar-border-color, #e0e0e0);\r\n color: var(--calendar-accent-hover, #106ebe);\r\n}\r\n\r\n.form-row {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 12px;\r\n}\r\n\r\n.modal-btn {\r\n padding: 10px 20px;\r\n border: none;\r\n border-radius: 4px;\r\n font-size: 14px;\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n}\r\n\r\n.modal-btn:disabled {\r\n opacity: 0.6;\r\n cursor: not-allowed;\r\n}\r\n\r\n.modal-btn-primary {\r\n background: var(--calendar-accent, #0078d4);\r\n color: #fff;\r\n}\r\n\r\n.modal-btn-primary:hover:not(:disabled) {\r\n background: var(--calendar-accent-hover, #106ebe);\r\n}\r\n\r\n.modal-btn-secondary {\r\n background: var(--calendar-text-secondary, #666);\r\n color: #fff;\r\n}\r\n\r\n.modal-btn-secondary:hover:not(:disabled) {\r\n background: var(--calendar-text-muted, #999);\r\n}\r\n\r\n@media (max-width: 576px) {\r\n .modal-content {\r\n max-width: 100%;\r\n }\r\n\r\n .form-row {\r\n grid-template-columns: 1fr;\r\n }\r\n}\r\n";
|
|
7443
7443
|
styleInject(css_248z$2);
|
|
7444
7444
|
|
|
7445
|
-
const
|
|
7445
|
+
const generateConfirmationNumber = () => {
|
|
7446
|
+
return Math.floor(100000 + Math.random() * 900000).toString();
|
|
7447
|
+
};
|
|
7448
|
+
const CreateBookingModal = ({ businessId, apiBaseUrl, initialDate, participants: defaultParticipants, onClose, onBookingCreated, timezone = moment$1.tz.guess(), businessHours, employees = [], rooms = [], }) => {
|
|
7449
|
+
React.useEffect(() => {
|
|
7450
|
+
const handleKeyDown = (e) => {
|
|
7451
|
+
if (e.key === 'Escape') {
|
|
7452
|
+
onClose();
|
|
7453
|
+
}
|
|
7454
|
+
};
|
|
7455
|
+
document.addEventListener('keydown', handleKeyDown);
|
|
7456
|
+
return () => document.removeEventListener('keydown', handleKeyDown);
|
|
7457
|
+
}, [onClose]);
|
|
7446
7458
|
const [title, setTitle] = React.useState('');
|
|
7447
|
-
const [
|
|
7448
|
-
// Initialize date/time using the target timezone
|
|
7459
|
+
const [meetingPurpose, setMeetingPurpose] = React.useState('');
|
|
7449
7460
|
const [startDate, setStartDate] = React.useState(moment$1(initialDate).tz(timezone).format("YYYY-MM-DD"));
|
|
7450
7461
|
const [startTime, setStartTime] = React.useState('09:00');
|
|
7451
7462
|
const [endTime, setEndTime] = React.useState('10:00');
|
|
7452
|
-
const [
|
|
7463
|
+
const [selectedEmployees, setSelectedEmployees] = React.useState([]);
|
|
7464
|
+
const [selectedRoom, setSelectedRoom] = React.useState(null);
|
|
7453
7465
|
const [loading, setLoading] = React.useState(false);
|
|
7454
7466
|
const [error, setError] = React.useState(null);
|
|
7467
|
+
const handleAddEmployee = (employeeId) => {
|
|
7468
|
+
const employee = employees.find(e => e.id === employeeId);
|
|
7469
|
+
if (employee && !selectedEmployees.find(e => e.id === employeeId)) {
|
|
7470
|
+
setSelectedEmployees([...selectedEmployees, employee]);
|
|
7471
|
+
}
|
|
7472
|
+
};
|
|
7473
|
+
const handleRemoveEmployee = (employeeId) => {
|
|
7474
|
+
setSelectedEmployees(selectedEmployees.filter(e => e.id !== employeeId));
|
|
7475
|
+
};
|
|
7476
|
+
const handleRoomChange = (roomId) => {
|
|
7477
|
+
const room = rooms.find(r => r.id === roomId);
|
|
7478
|
+
setSelectedRoom(room || null);
|
|
7479
|
+
};
|
|
7480
|
+
const availableEmployees = employees.filter(e => !selectedEmployees.find(se => se.id === e.id));
|
|
7455
7481
|
const validateBusinessHours = (start, end) => {
|
|
7456
7482
|
if (!businessHours)
|
|
7457
7483
|
return;
|
|
@@ -7478,14 +7504,16 @@ const CreateBookingModal = ({ businessId, apiBaseUrl, initialDate, participants:
|
|
|
7478
7504
|
setLoading(true);
|
|
7479
7505
|
setError(null);
|
|
7480
7506
|
try {
|
|
7481
|
-
|
|
7482
|
-
|
|
7483
|
-
.map((p) => p.trim())
|
|
7484
|
-
.filter((p) => p.length > 0);
|
|
7485
|
-
if (participantList.length === 0) {
|
|
7486
|
-
throw new Error('At least one participant is required');
|
|
7507
|
+
if (selectedEmployees.length === 0) {
|
|
7508
|
+
throw new Error('At least one employee is required');
|
|
7487
7509
|
}
|
|
7488
|
-
|
|
7510
|
+
if (!selectedRoom) {
|
|
7511
|
+
throw new Error('A room is required');
|
|
7512
|
+
}
|
|
7513
|
+
const participantList = [
|
|
7514
|
+
selectedRoom.id,
|
|
7515
|
+
...selectedEmployees.map(e => e.id)
|
|
7516
|
+
];
|
|
7489
7517
|
const startDateTime = moment$1.tz(`${startDate}T${startTime}`, "YYYY-MM-DDTHH:mm", timezone);
|
|
7490
7518
|
const endDateTime = moment$1.tz(`${startDate}T${endTime}`, "YYYY-MM-DDTHH:mm", timezone);
|
|
7491
7519
|
if (!startDateTime.isValid() || !endDateTime.isValid()) {
|
|
@@ -7494,15 +7522,18 @@ const CreateBookingModal = ({ businessId, apiBaseUrl, initialDate, participants:
|
|
|
7494
7522
|
if (endDateTime.isSameOrBefore(startDateTime)) {
|
|
7495
7523
|
throw new Error('End time must be after start time');
|
|
7496
7524
|
}
|
|
7497
|
-
// Validate Business Hours
|
|
7498
7525
|
validateBusinessHours(startDateTime, endDateTime);
|
|
7526
|
+
const confirmationNumber = generateConfirmationNumber();
|
|
7499
7527
|
const booking = yield createBooking(businessId, {
|
|
7500
7528
|
participants: participantList,
|
|
7501
7529
|
start: startDateTime.format(),
|
|
7502
7530
|
end: endDateTime.format(),
|
|
7503
7531
|
metadata: {
|
|
7532
|
+
description: meetingPurpose,
|
|
7504
7533
|
title: title || 'Untitled Meeting',
|
|
7505
|
-
|
|
7534
|
+
staff: selectedEmployees.map(e => e.name).join(', '),
|
|
7535
|
+
room: selectedRoom.name,
|
|
7536
|
+
confirmation: confirmationNumber,
|
|
7506
7537
|
},
|
|
7507
7538
|
}, apiBaseUrl);
|
|
7508
7539
|
onBookingCreated(booking);
|
|
@@ -7526,12 +7557,27 @@ const CreateBookingModal = ({ businessId, apiBaseUrl, initialDate, participants:
|
|
|
7526
7557
|
React.createElement("label", { htmlFor: "title" }, "Title"),
|
|
7527
7558
|
React.createElement("input", { id: "title", type: "text", value: title, onChange: (e) => setTitle(e.target.value), placeholder: "Meeting title", required: true })),
|
|
7528
7559
|
React.createElement("div", { className: "form-group" },
|
|
7529
|
-
React.createElement("label", { htmlFor: "
|
|
7530
|
-
React.createElement("textarea", { id: "
|
|
7560
|
+
React.createElement("label", { htmlFor: "meetingPurpose" }, "What is this meeting for?"),
|
|
7561
|
+
React.createElement("textarea", { id: "meetingPurpose", value: meetingPurpose, onChange: (e) => setMeetingPurpose(e.target.value), placeholder: "Enter the purpose of this meeting", rows: 3 })),
|
|
7562
|
+
React.createElement("div", { className: "form-group" },
|
|
7563
|
+
React.createElement("label", { htmlFor: "room" }, "Room *"),
|
|
7564
|
+
React.createElement("select", { id: "room", value: (selectedRoom === null || selectedRoom === void 0 ? void 0 : selectedRoom.id) || '', onChange: (e) => handleRoomChange(e.target.value), required: true },
|
|
7565
|
+
React.createElement("option", { value: "" }, "Select a room"),
|
|
7566
|
+
rooms.map((room) => (React.createElement("option", { key: room.id, value: room.id }, room.name))))),
|
|
7531
7567
|
React.createElement("div", { className: "form-group" },
|
|
7532
|
-
React.createElement("label", { htmlFor: "
|
|
7533
|
-
React.createElement("
|
|
7534
|
-
|
|
7568
|
+
React.createElement("label", { htmlFor: "employees" }, "Employees *"),
|
|
7569
|
+
React.createElement("select", { id: "employees", value: "", onChange: (e) => {
|
|
7570
|
+
if (e.target.value) {
|
|
7571
|
+
handleAddEmployee(e.target.value);
|
|
7572
|
+
e.target.value = '';
|
|
7573
|
+
}
|
|
7574
|
+
} },
|
|
7575
|
+
React.createElement("option", { value: "" }, "Add an employee"),
|
|
7576
|
+
availableEmployees.map((employee) => (React.createElement("option", { key: employee.id, value: employee.id }, employee.name)))),
|
|
7577
|
+
selectedEmployees.length > 0 && (React.createElement("div", { className: "selected-items" }, selectedEmployees.map((employee) => (React.createElement("span", { key: employee.id, className: "selected-item" },
|
|
7578
|
+
employee.name,
|
|
7579
|
+
React.createElement("button", { type: "button", className: "remove-item-btn", onClick: () => handleRemoveEmployee(employee.id) }, "\u00D7")))))),
|
|
7580
|
+
React.createElement("small", null, "At least one employee is required")),
|
|
7535
7581
|
React.createElement("div", { className: "form-row" },
|
|
7536
7582
|
React.createElement("div", { className: "form-group" },
|
|
7537
7583
|
React.createElement("label", { htmlFor: "date" }, "Date"),
|
|
@@ -7552,11 +7598,20 @@ const CreateBookingModal = ({ businessId, apiBaseUrl, initialDate, participants:
|
|
|
7552
7598
|
React.createElement("button", { type: "submit", className: "modal-btn modal-btn-primary", disabled: loading }, loading ? 'Creating...' : 'Create Booking'))))));
|
|
7553
7599
|
};
|
|
7554
7600
|
|
|
7555
|
-
var css_248z$1 = "/* BookingDetailsModal - extends base modal styles from CreateBookingModal.css */\n\n.booking-details-modal {\n max-width: 500px;\n}\n\n.detail-section {\n padding: 12px 0;\n border-bottom: 1px solid #
|
|
7601
|
+
var css_248z$1 = "/* BookingDetailsModal - extends base modal styles from CreateBookingModal.css */\r\n\r\n.booking-details-modal {\r\n max-width: 500px;\r\n}\r\n\r\n.detail-section {\r\n padding: 12px 0;\r\n border-bottom: 1px solid var(--calendar-border-color, #e0e0e0);\r\n}\r\n\r\n.detail-section:last-child {\r\n border-bottom: none;\r\n}\r\n\r\n.detail-row {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n margin-bottom: 8px;\r\n}\r\n\r\n.detail-row:last-child {\r\n margin-bottom: 0;\r\n}\r\n\r\n.detail-row.full-width {\r\n flex-direction: column;\r\n}\r\n\r\n.detail-label {\r\n font-weight: 500;\r\n color: var(--calendar-text-secondary, #666);\r\n font-size: 14px;\r\n min-width: 100px;\r\n}\r\n\r\n.detail-label-muted {\r\n color: var(--calendar-text-muted, #999);\r\n font-size: 12px;\r\n}\r\n\r\n.detail-value {\r\n font-weight: 500;\r\n color: var(--calendar-text-primary, #333);\r\n font-size: 14px;\r\n text-align: right;\r\n}\r\n\r\n.detail-value-muted {\r\n color: var(--calendar-text-muted, #999);\r\n font-size: 12px;\r\n font-family: monospace;\r\n}\r\n\r\n.detail-description {\r\n margin: 8px 0 0 0;\r\n color: var(--calendar-text-primary, #333);\r\n font-size: 14px;\r\n line-height: 1.5;\r\n white-space: pre-wrap;\r\n}\r\n\r\n.participants-list {\r\n margin: 8px 0 0 0;\r\n padding-left: 20px;\r\n list-style-type: disc;\r\n}\r\n\r\n.participant-item {\r\n color: var(--calendar-text-primary, #333);\r\n font-size: 14px;\r\n margin-bottom: 4px;\r\n}\r\n\r\n.modal-header-actions {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n}\r\n\r\n.modal-delete-btn {\r\n background: none;\r\n border: none;\r\n color: var(--calendar-error-color, #d13438);\r\n cursor: pointer;\r\n padding: 6px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 4px;\r\n transition: background-color 0.2s;\r\n}\r\n\r\n.modal-delete-btn:hover:not(:disabled) {\r\n background: var(--calendar-closed-badge-bg, #fde7e9);\r\n}\r\n\r\n.modal-delete-btn:disabled {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n}\r\n\r\n.delete-confirm-box {\r\n background: #fff3cd;\r\n border: 1px solid #ffc107;\r\n border-radius: 4px;\r\n padding: 16px;\r\n margin-bottom: 16px;\r\n}\r\n\r\n.delete-confirm-box p {\r\n margin: 0 0 12px 0;\r\n font-size: 14px;\r\n color: #856404;\r\n}\r\n\r\n.delete-confirm-actions {\r\n display: flex;\r\n gap: 8px;\r\n justify-content: flex-end;\r\n}\r\n\r\n.modal-btn-danger {\r\n background: var(--calendar-error-color, #d13438);\r\n color: #fff;\r\n}\r\n\r\n.modal-btn-danger:hover:not(:disabled) {\r\n background: #a52a2a;\r\n}\r\n\r\n@media (max-width: 576px) {\r\n .booking-details-modal {\r\n max-width: 100%;\r\n }\r\n\r\n .detail-row {\r\n flex-direction: column;\r\n gap: 4px;\r\n }\r\n\r\n .detail-value {\r\n text-align: left;\r\n }\r\n}\r\n";
|
|
7556
7602
|
styleInject(css_248z$1);
|
|
7557
7603
|
|
|
7558
7604
|
const BookingDetailsModal = ({ booking, timezone, businessId, apiBaseUrl, onClose, onBookingDeleted, }) => {
|
|
7559
7605
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
7606
|
+
React.useEffect(() => {
|
|
7607
|
+
const handleKeyDown = (e) => {
|
|
7608
|
+
if (e.key === 'Escape') {
|
|
7609
|
+
onClose();
|
|
7610
|
+
}
|
|
7611
|
+
};
|
|
7612
|
+
document.addEventListener('keydown', handleKeyDown);
|
|
7613
|
+
return () => document.removeEventListener('keydown', handleKeyDown);
|
|
7614
|
+
}, [onClose]);
|
|
7560
7615
|
const [showConfirm, setShowConfirm] = React.useState(false);
|
|
7561
7616
|
const [deleting, setDeleting] = React.useState(false);
|
|
7562
7617
|
const [error, setError] = React.useState(null);
|
|
@@ -8015,10 +8070,10 @@ const MonthView = ({ currentDate, bookings, timezone, onBookingClick, onDateClic
|
|
|
8015
8070
|
React.createElement("div", { className: "calendar-body" }, rows)));
|
|
8016
8071
|
};
|
|
8017
8072
|
|
|
8018
|
-
var css_248z = ".calendar-container {\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n border: 1px solid #e0e0e0;\r\n border-radius: 8px;\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n /* Use 100% height of parent */\r\n max-height: 100vh;\r\n overflow: hidden;\r\n}\r\n\r\n/* Header */\r\n.calendar-header {\r\n padding: 16px;\r\n border-bottom: 1px solid #e0e0e0;\r\n background-color: #fff;\r\n}\r\n\r\n.calendar-title-section {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 16px;\r\n flex-wrap: wrap;\r\n gap: 10px;\r\n}\r\n\r\n.calendar-title {\r\n margin: 0;\r\n font-size: 1.5rem;\r\n color: #333;\r\n}\r\n\r\n.calendar-view-toggle {\r\n display: flex;\r\n background-color: #f5f5f5;\r\n border-radius: 6px;\r\n padding: 2px;\r\n}\r\n\r\n.calendar-btn {\r\n padding: 8px 16px;\r\n border: 1px solid #e0e0e0;\r\n background-color: #fff;\r\n cursor: pointer;\r\n border-radius: 4px;\r\n font-size: 14px;\r\n transition: all 0.2s;\r\n}\r\n\r\n.calendar-btn:hover {\r\n background-color: #f5f5f5;\r\n}\r\n\r\n.calendar-btn-view {\r\n border: none;\r\n background: transparent;\r\n border-radius: 4px;\r\n padding: 6px 12px;\r\n}\r\n\r\n.calendar-btn-view.active {\r\n background-color: #fff;\r\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\r\n font-weight: 600;\r\n}\r\n\r\n.calendar-btn-create {\r\n background-color: #0078d4;\r\n color: white;\r\n border: none;\r\n}\r\n\r\n.calendar-btn-create:hover {\r\n background-color: #106ebe;\r\n}\r\n\r\n.calendar-navigation {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n}\r\n\r\n.calendar-current-month {\r\n font-size: 1.1rem;\r\n font-weight: 600;\r\n margin-left: 16px;\r\n color: #333;\r\n}\r\n\r\n/* Content Area */\r\n.calendar-content {\r\n flex: 1;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n/* Month View */\r\n.month-view-container {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n overflow: hidden;\r\n /* Prevent container scrolling, let body scroll */\r\n}\r\n\r\n.calendar-days-row {\r\n display: grid;\r\n grid-template-columns: repeat(7, 1fr);\r\n /* Ensure equal columns */\r\n border-bottom: 1px solid #e0e0e0;\r\n background-color: #f9f9f9;\r\n}\r\n\r\n.calendar-day-header {\r\n padding: 10px;\r\n text-align: center;\r\n font-weight: 600;\r\n color: #666;\r\n font-size: 0.9rem;\r\n overflow: hidden;\r\n /* Prevent overflow */\r\n text-overflow: ellipsis;\r\n}\r\n\r\n.calendar-body {\r\n display: flex;\r\n flex-direction: column;\r\n flex: 1;\r\n overflow-y: auto;\r\n /* Scrollable body */\r\n}\r\n\r\n.calendar-row {\r\n display: grid;\r\n grid-template-columns: repeat(7, 1fr);\r\n /* Ensure equal columns */\r\n flex: 1;\r\n min-height: 100px;\r\n /* Minimum row height */\r\n border-bottom: 1px solid #e0e0e0;\r\n}\r\n\r\n.calendar-cell {\r\n border-right: 1px solid #e0e0e0;\r\n padding: 8px;\r\n position: relative;\r\n cursor: pointer;\r\n transition: background-color 0.2s;\r\n overflow: hidden;\r\n /* Prevent cell expansion */\r\n min-width: 0;\r\n /* Allow shrinking below content size */\r\n}\r\n\r\n.calendar-cell:hover {\r\n background-color: #fcfcfc;\r\n}\r\n\r\n.calendar-cell-disabled {\r\n background-color: #f9f9f9;\r\n color: #999;\r\n}\r\n\r\n.calendar-cell-today {\r\n background-color: #e6f2ff;\r\n}\r\n\r\n.calendar-cell-closed {\r\n background-color: #f5f5f5;\r\n cursor: not-allowed;\r\n}\r\n\r\n.calendar-cell-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 4px;\r\n}\r\n\r\n.calendar-cell-number {\r\n font-weight: 600;\r\n font-size: 0.9rem;\r\n}\r\n\r\n.calendar-closed-label-small {\r\n font-size: 0.7rem;\r\n color: #d13438;\r\n background: #fde7e9;\r\n padding: 2px 4px;\r\n border-radius: 3px;\r\n}\r\n\r\n.calendar-cell-bookings {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 4px;\r\n}\r\n\r\n.calendar-booking {\r\n background-color: #e1dfdd;\r\n /* Default neutral color */\r\n border-left: 3px solid #0078d4;\r\n padding: 4px 6px;\r\n border-radius: 2px;\r\n font-size: 0.8rem;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n cursor: pointer;\r\n position: relative;\r\n /* For tooltip positioning */\r\n}\r\n\r\n.calendar-booking:hover {\r\n background-color: #d0d0d0;\r\n}\r\n\r\n.calendar-booking-time {\r\n font-weight: 600;\r\n margin-right: 4px;\r\n}\r\n\r\n.calendar-booking-more {\r\n font-size: 0.8rem;\r\n color: #666;\r\n padding: 2px 4px;\r\n}\r\n\r\n/* Time Grid (Day/Week/WorkWeek) */\r\n.time-grid-container {\r\n display: flex;\r\n flex-direction: column;\r\n flex: 1;\r\n overflow: hidden;\r\n}\r\n\r\n.time-grid-header {\r\n display: flex;\r\n border-bottom: 1px solid #e0e0e0;\r\n padding-right: 17px;\r\n /* Adjust for scrollbar */\r\n}\r\n\r\n.time-column-header {\r\n width: 60px;\r\n /* Width of time labels column */\r\n flex-shrink: 0;\r\n border-right: 1px solid #e0e0e0;\r\n}\r\n\r\n.day-column-header {\r\n flex: 1;\r\n text-align: center;\r\n padding: 8px;\r\n border-right: 1px solid #e0e0e0;\r\n background-color: #f9f9f9;\r\n min-width: 0;\r\n /* Prevent expansion */\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n.day-column-header.today {\r\n background-color: #e6f2ff;\r\n color: #0078d4;\r\n}\r\n\r\n.day-column-header.closed {\r\n background-color: #f0f0f0;\r\n color: #999;\r\n}\r\n\r\n.day-name {\r\n font-size: 0.8rem;\r\n text-transform: uppercase;\r\n color: #666;\r\n}\r\n\r\n.day-number {\r\n font-size: 1.2rem;\r\n font-weight: 600;\r\n}\r\n\r\n.time-grid-body {\r\n display: flex;\r\n flex: 1;\r\n overflow-y: auto;\r\n position: relative;\r\n}\r\n\r\n.time-labels-column {\r\n width: 60px;\r\n flex-shrink: 0;\r\n border-right: 1px solid #e0e0e0;\r\n background-color: #fff;\r\n}\r\n\r\n.time-label {\r\n height: 60px;\r\n /* 1 hour height */\r\n text-align: right;\r\n padding-right: 8px;\r\n font-size: 0.75rem;\r\n color: #666;\r\n justify-content: center;\r\n}\r\n\r\n.days-grid {\r\n flex: 1;\r\n display: flex;\r\n position: relative;\r\n /* 24 hours * 60px/hour = 1440px total height */\r\n height: 1440px;\r\n}\r\n\r\n.grid-lines {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n pointer-events: none;\r\n z-index: 0;\r\n}\r\n\r\n.grid-hour-row {\r\n height: 60px;\r\n border-bottom: 1px solid #e0e0e0;\r\n box-sizing: border-box;\r\n}\r\n\r\n.grid-hour-row:last-child {\r\n border-bottom: none;\r\n}\r\n\r\n.day-column {\r\n flex: 1;\r\n border-right: 1px solid #e0e0e0;\r\n position: relative;\r\n height: 100%;\r\n min-width: 0;\r\n /* Critical for flex containers to not expand based on content */\r\n}\r\n\r\n.day-column.closed-column {\r\n background-color: repeating-linear-gradient(45deg,\r\n #fbfbfb,\r\n #fbfbfb 10px,\r\n #f5f5f5 10px,\r\n #f5f5f5 20px);\r\n}\r\n\r\n.calendar-event {\r\n background-color: #e1dfdd;\r\n border-left: 4px solid #0078d4;\r\n border-radius: 3px;\r\n padding: 2px 4px;\r\n font-size: 0.75rem;\r\n overflow: hidden;\r\n cursor: pointer;\r\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\r\n z-index: 1;\r\n transition: transform 0.1s, z-index 0.1s;\r\n}\r\n\r\n.calendar-event:hover {\r\n z-index: 10;\r\n /* Bring to front on hover */\r\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.event-content {\r\n height: 100%;\r\n overflow: hidden;\r\n}\r\n\r\n.event-title {\r\n font-weight: 600;\r\n margin-bottom: 2px;\r\n}\r\n\r\n.event-time {\r\n font-size: 0.7rem;\r\n color: #555;\r\n}\r\n\r\n/* Tooltip Styles */\r\n.event-tooltip {\r\n display: none;\r\n position: absolute;\r\n left: 100%;\r\n top: 0;\r\n background: white;\r\n border: 1px solid #ccc;\r\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\r\n padding: 10px;\r\n border-radius: 4px;\r\n width: 200px;\r\n z-index: 100;\r\n pointer-events: none;\r\n}\r\n\r\n/* Show tooltip on hover */\r\n.calendar-booking:hover .event-tooltip,\r\n.calendar-event:hover .event-tooltip {\r\n display: block;\r\n}\r\n\r\n/* Adjust tooltip position if it goes offscreen (simple right-side check) */\r\n/* Note: A real production app would use a library like Popper.js */\r\n.day-column:last-child .event-tooltip,\r\n.day-column:nth-last-child(2) .event-tooltip {\r\n left: auto;\r\n right: 100%;\r\n}\r\n\r\n.tooltip-title {\r\n font-weight: bold;\r\n margin-bottom: 8px;\r\n border-bottom: 1px solid #eee;\r\n padding-bottom: 4px;\r\n}\r\n\r\n.tooltip-row {\r\n display: flex;\r\n justify-content: space-between;\r\n margin-bottom: 4px;\r\n font-size: 0.85rem;\r\n}\r\n\r\n.tooltip-label {\r\n color: #666;\r\n margin-right: 8px;\r\n}\r\n\r\n.tooltip-value {\r\n font-weight: 500;\r\n text-align: right;\r\n}\r\n\r\n/* Loading & Error */\r\n.calendar-loading,\r\n.calendar-error {\r\n padding: 20px;\r\n text-align: center;\r\n color: #666;\r\n}\r\n\r\n.calendar-error {\r\n color: #d13438;\r\n}\r\n\r\n/* Closed Block Styles */\r\n.calendar-closed-block {\r\n position: absolute;\r\n left: 0;\r\n right: 0;\r\n background-color: #f0f0f0;\r\n background-image: repeating-linear-gradient(45deg,\r\n #f0f0f0,\r\n #f0f0f0 10px,\r\n #e8e8e8 10px,\r\n #e8e8e8 20px);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 5;\r\n /* Below events but above grid lines */\r\n pointer-events: none;\r\n /* Allow clicks to pass through if needed, though we block clicks in JS */\r\n border-bottom: 1px solid #ddd;\r\n border-top: 1px solid #ddd;\r\n}\r\n\r\n.closed-block-label {\r\n background-color: rgba(255, 255, 255, 0.8);\r\n padding: 4px 8px;\r\n border-radius: 4px;\r\n font-size: 0.8rem;\r\n color: #888;\r\n font-weight: 500;\r\n}";
|
|
8073
|
+
var css_248z = "/*\r\n * Calendar Component \r\n *\r\n * Overriden from parent:\r\n * --calendar-bg, --calendar-bg-secondary, --calendar-bg-tertiary\r\n * --calendar-border-color, --calendar-text-primary, --calendar-text-secondary, --calendar-text-muted\r\n * --calendar-accent, --calendar-accent-hover\r\n * --calendar-cell-hover, --calendar-today-bg, --calendar-closed-bg\r\n * --calendar-closed-text, --calendar-closed-badge-bg\r\n * --calendar-booking-bg, --calendar-booking-hover\r\n * --calendar-error-color, --calendar-tooltip-bg, --calendar-tooltip-border\r\n * --calendar-font-family\r\n */\r\n\r\n.calendar-container {\r\n font-family: var(--calendar-font-family, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif);\r\n border: 1px solid var(--calendar-border-color, #e0e0e0);\r\n border-radius: 8px;\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n max-height: 100vh;\r\n overflow: hidden;\r\n background-color: var(--calendar-bg, #fff);\r\n color: var(--calendar-text-primary, #333);\r\n}\r\n\r\n/* Header */\r\n.calendar-header {\r\n padding: 16px;\r\n border-bottom: 1px solid var(--calendar-border-color, #e0e0e0);\r\n background-color: var(--calendar-bg, #fff);\r\n}\r\n\r\n.calendar-title-section {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 16px;\r\n flex-wrap: wrap;\r\n gap: 10px;\r\n}\r\n\r\n.calendar-title {\r\n margin: 0;\r\n font-size: 1.5rem;\r\n color: var(--calendar-text-primary, #333);\r\n}\r\n\r\n.calendar-view-toggle {\r\n display: flex;\r\n background-color: var(--calendar-bg-tertiary, #f5f5f5);\r\n border-radius: 6px;\r\n padding: 2px;\r\n}\r\n\r\n.calendar-btn {\r\n padding: 8px 16px;\r\n border: 1px solid var(--calendar-border-color, #e0e0e0);\r\n background-color: var(--calendar-bg, #fff);\r\n cursor: pointer;\r\n border-radius: 4px;\r\n font-size: 14px;\r\n transition: all 0.2s;\r\n color: var(--calendar-text-primary, #333);\r\n}\r\n\r\n.calendar-btn:hover {\r\n background-color: var(--calendar-bg-tertiary, #f5f5f5);\r\n}\r\n\r\n.calendar-btn-view {\r\n border: none;\r\n background: transparent;\r\n border-radius: 4px;\r\n padding: 6px 12px;\r\n color: var(--calendar-text-primary, #333);\r\n}\r\n\r\n.calendar-btn-view.active {\r\n background-color: var(--calendar-bg, #fff);\r\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\r\n font-weight: 600;\r\n}\r\n\r\n.calendar-btn-create {\r\n background-color: var(--calendar-accent, #0078d4);\r\n color: white;\r\n border: none;\r\n}\r\n\r\n.calendar-btn-create:hover {\r\n background-color: var(--calendar-accent-hover, #106ebe);\r\n}\r\n\r\n.calendar-navigation {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n}\r\n\r\n.calendar-current-month {\r\n font-size: 1.1rem;\r\n font-weight: 600;\r\n margin-left: 16px;\r\n color: var(--calendar-text-primary, #333);\r\n}\r\n\r\n/* Content Area */\r\n.calendar-content {\r\n flex: 1;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n/* Month View */\r\n.month-view-container {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n overflow: hidden;\r\n}\r\n\r\n.calendar-days-row {\r\n display: grid;\r\n grid-template-columns: repeat(7, 1fr);\r\n border-bottom: 1px solid var(--calendar-border-color, #e0e0e0);\r\n background-color: var(--calendar-bg-secondary, #f9f9f9);\r\n}\r\n\r\n.calendar-day-header {\r\n padding: 10px;\r\n text-align: center;\r\n font-weight: 600;\r\n color: var(--calendar-text-secondary, #666);\r\n font-size: 0.9rem;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n.calendar-body {\r\n display: flex;\r\n flex-direction: column;\r\n flex: 1;\r\n overflow-y: auto;\r\n}\r\n\r\n.calendar-row {\r\n display: grid;\r\n grid-template-columns: repeat(7, 1fr);\r\n flex: 1;\r\n min-height: 100px;\r\n border-bottom: 1px solid var(--calendar-border-color, #e0e0e0);\r\n}\r\n\r\n.calendar-cell {\r\n border-right: 1px solid var(--calendar-border-color, #e0e0e0);\r\n padding: 8px;\r\n position: relative;\r\n cursor: pointer;\r\n transition: background-color 0.2s;\r\n overflow: hidden;\r\n min-width: 0;\r\n}\r\n\r\n.calendar-cell:hover {\r\n background-color: var(--calendar-cell-hover, #fcfcfc);\r\n}\r\n\r\n.calendar-cell-disabled {\r\n background-color: var(--calendar-bg-secondary, #f9f9f9);\r\n color: var(--calendar-text-muted, #999);\r\n}\r\n\r\n.calendar-cell-today {\r\n background-color: var(--calendar-today-bg, #e6f2ff);\r\n}\r\n\r\n.calendar-cell-closed {\r\n background-color: var(--calendar-closed-bg, #f5f5f5);\r\n cursor: not-allowed;\r\n}\r\n\r\n.calendar-cell-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 4px;\r\n}\r\n\r\n.calendar-cell-number {\r\n font-weight: 600;\r\n font-size: 0.9rem;\r\n color: var(--calendar-text-primary, #333);\r\n}\r\n\r\n.calendar-closed-label-small {\r\n font-size: 0.7rem;\r\n color: var(--calendar-closed-text, #d13438);\r\n background: var(--calendar-closed-badge-bg, #fde7e9);\r\n padding: 2px 4px;\r\n border-radius: 3px;\r\n}\r\n\r\n.calendar-cell-bookings {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 4px;\r\n}\r\n\r\n.calendar-booking {\r\n background-color: var(--calendar-booking-bg, #e1dfdd);\r\n border-left: 3px solid var(--calendar-accent, #0078d4);\r\n padding: 4px 6px;\r\n border-radius: 2px;\r\n font-size: 0.8rem;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n cursor: pointer;\r\n position: relative;\r\n color: var(--calendar-text-primary, #333);\r\n}\r\n\r\n.calendar-booking:hover {\r\n background-color: var(--calendar-booking-hover, #d0d0d0);\r\n}\r\n\r\n.calendar-booking-time {\r\n font-weight: 600;\r\n margin-right: 4px;\r\n}\r\n\r\n.calendar-booking-more {\r\n font-size: 0.8rem;\r\n color: var(--calendar-text-secondary, #666);\r\n padding: 2px 4px;\r\n}\r\n\r\n/* Time Grid (Day/Week/WorkWeek) */\r\n.time-grid-container {\r\n display: flex;\r\n flex-direction: column;\r\n flex: 1;\r\n overflow: hidden;\r\n}\r\n\r\n.time-grid-header {\r\n display: flex;\r\n border-bottom: 1px solid var(--calendar-border-color, #e0e0e0);\r\n padding-right: 17px;\r\n}\r\n\r\n.time-column-header {\r\n width: 60px;\r\n flex-shrink: 0;\r\n border-right: 1px solid var(--calendar-border-color, #e0e0e0);\r\n}\r\n\r\n.day-column-header {\r\n flex: 1;\r\n text-align: center;\r\n padding: 8px;\r\n border-right: 1px solid var(--calendar-border-color, #e0e0e0);\r\n background-color: var(--calendar-bg-secondary, #f9f9f9);\r\n min-width: 0;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n.day-column-header.today {\r\n background-color: var(--calendar-today-bg, #e6f2ff);\r\n color: var(--calendar-accent, #0078d4);\r\n}\r\n\r\n.day-column-header.closed {\r\n background-color: var(--calendar-closed-bg, #f5f5f5);\r\n color: var(--calendar-text-muted, #999);\r\n}\r\n\r\n.day-name {\r\n font-size: 0.8rem;\r\n text-transform: uppercase;\r\n color: var(--calendar-text-secondary, #666);\r\n}\r\n\r\n.day-number {\r\n font-size: 1.2rem;\r\n font-weight: 600;\r\n color: var(--calendar-text-primary, #333);\r\n}\r\n\r\n.time-grid-body {\r\n display: flex;\r\n flex: 1;\r\n overflow-y: auto;\r\n position: relative;\r\n}\r\n\r\n.time-labels-column {\r\n width: 60px;\r\n flex-shrink: 0;\r\n border-right: 1px solid var(--calendar-border-color, #e0e0e0);\r\n background-color: var(--calendar-bg, #fff);\r\n}\r\n\r\n.time-label {\r\n height: 60px;\r\n text-align: right;\r\n padding-right: 8px;\r\n font-size: 0.75rem;\r\n color: var(--calendar-text-secondary, #666);\r\n justify-content: center;\r\n}\r\n\r\n.days-grid {\r\n flex: 1;\r\n display: flex;\r\n position: relative;\r\n height: 1440px;\r\n}\r\n\r\n.grid-lines {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n pointer-events: none;\r\n z-index: 0;\r\n}\r\n\r\n.grid-hour-row {\r\n height: 60px;\r\n border-bottom: 1px solid var(--calendar-border-color, #e0e0e0);\r\n box-sizing: border-box;\r\n}\r\n\r\n.grid-hour-row:last-child {\r\n border-bottom: none;\r\n}\r\n\r\n.day-column {\r\n flex: 1;\r\n border-right: 1px solid var(--calendar-border-color, #e0e0e0);\r\n position: relative;\r\n height: 100%;\r\n min-width: 0;\r\n}\r\n\r\n.day-column.closed-column {\r\n background: repeating-linear-gradient(45deg,\r\n var(--calendar-bg, #fff),\r\n var(--calendar-bg, #fff) 10px,\r\n var(--calendar-closed-bg, #f5f5f5) 10px,\r\n var(--calendar-closed-bg, #f5f5f5) 20px);\r\n}\r\n\r\n.calendar-event {\r\n background-color: var(--calendar-booking-bg, #e1dfdd);\r\n border-left: 4px solid var(--calendar-accent, #0078d4);\r\n border-radius: 3px;\r\n padding: 2px 4px;\r\n font-size: 0.75rem;\r\n overflow: hidden;\r\n cursor: pointer;\r\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\r\n z-index: 1;\r\n transition: transform 0.1s, z-index 0.1s;\r\n color: var(--calendar-text-primary, #333);\r\n}\r\n\r\n.calendar-event:hover {\r\n z-index: 10;\r\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.event-content {\r\n height: 100%;\r\n overflow: hidden;\r\n}\r\n\r\n.event-title {\r\n font-weight: 600;\r\n margin-bottom: 2px;\r\n}\r\n\r\n.event-time {\r\n font-size: 0.7rem;\r\n color: var(--calendar-text-secondary, #666);\r\n}\r\n\r\n/* Tooltip Styles */\r\n.event-tooltip {\r\n display: none;\r\n position: absolute;\r\n left: 100%;\r\n top: 0;\r\n background: var(--calendar-tooltip-bg, #fff);\r\n border: 1px solid var(--calendar-tooltip-border, #ccc);\r\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\r\n padding: 10px;\r\n border-radius: 4px;\r\n width: 200px;\r\n z-index: 100;\r\n pointer-events: none;\r\n}\r\n\r\n/* Show tooltip on hover */\r\n.calendar-booking:hover .event-tooltip,\r\n.calendar-event:hover .event-tooltip {\r\n display: block;\r\n}\r\n\r\n/* Adjust tooltip position if it goes offscreen */\r\n.day-column:last-child .event-tooltip,\r\n.day-column:nth-last-child(2) .event-tooltip {\r\n left: auto;\r\n right: 100%;\r\n}\r\n\r\n.tooltip-title {\r\n font-weight: bold;\r\n margin-bottom: 8px;\r\n border-bottom: 1px solid var(--calendar-border-color, #e0e0e0);\r\n padding-bottom: 4px;\r\n color: var(--calendar-text-primary, #333);\r\n}\r\n\r\n.tooltip-row {\r\n display: flex;\r\n justify-content: space-between;\r\n margin-bottom: 4px;\r\n font-size: 0.85rem;\r\n}\r\n\r\n.tooltip-label {\r\n color: var(--calendar-text-secondary, #666);\r\n margin-right: 8px;\r\n}\r\n\r\n.tooltip-value {\r\n font-weight: 500;\r\n text-align: right;\r\n color: var(--calendar-text-primary, #333);\r\n}\r\n\r\n/* Loading & Error */\r\n.calendar-loading,\r\n.calendar-error {\r\n padding: 20px;\r\n text-align: center;\r\n color: var(--calendar-text-secondary, #666);\r\n}\r\n\r\n.calendar-error {\r\n color: var(--calendar-error-color, #d13438);\r\n}\r\n\r\n/* Closed Block Styles */\r\n.calendar-closed-block {\r\n position: absolute;\r\n left: 0;\r\n right: 0;\r\n background-color: var(--calendar-closed-bg, #f5f5f5);\r\n background-image: repeating-linear-gradient(45deg,\r\n var(--calendar-closed-bg, #f5f5f5),\r\n var(--calendar-closed-bg, #f5f5f5) 10px,\r\n var(--calendar-border-color, #e0e0e0) 10px,\r\n var(--calendar-border-color, #e0e0e0) 20px);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 5;\r\n pointer-events: none;\r\n border-bottom: 1px solid var(--calendar-border-color, #e0e0e0);\r\n border-top: 1px solid var(--calendar-border-color, #e0e0e0);\r\n}\r\n\r\n.closed-block-label {\r\n background-color: var(--calendar-closed-label-bg, rgba(255, 255, 255, 0.8));\r\n padding: 4px 8px;\r\n border-radius: 4px;\r\n font-size: 0.8rem;\r\n color: var(--calendar-closed-label-text, #888);\r\n font-weight: 500;\r\n}\r\n";
|
|
8019
8074
|
styleInject(css_248z);
|
|
8020
8075
|
|
|
8021
|
-
const Calendar = ({ businessId, resourceId, title = 'Calendar', apiBaseUrl, defaultView = 'month', onBookingCreate, onBookingClick, participants = [], timezone = moment$1.tz.guess(), businessHours, }) => {
|
|
8076
|
+
const Calendar = ({ businessId, resourceId, title = 'Calendar', apiBaseUrl, defaultView = 'month', onBookingCreate, onBookingClick, participants = [], timezone = moment$1.tz.guess(), businessHours, employees = [], rooms = [], }) => {
|
|
8022
8077
|
const [currentDate, setCurrentDate] = React.useState(moment$1().tz(timezone));
|
|
8023
8078
|
const [currentView, setCurrentView] = React.useState(defaultView);
|
|
8024
8079
|
const [bookings, setBookings] = React.useState([]);
|
|
@@ -8154,7 +8209,7 @@ const Calendar = ({ businessId, resourceId, title = 'Calendar', apiBaseUrl, defa
|
|
|
8154
8209
|
error && React.createElement("div", { className: "calendar-error" }, error),
|
|
8155
8210
|
loading && React.createElement("div", { className: "calendar-loading" }, "Loading..."),
|
|
8156
8211
|
React.createElement("div", { className: "calendar-content" }, currentView === 'month' ? (React.createElement(MonthView, { currentDate: currentDate, bookings: bookings, timezone: timezone, onBookingClick: handleInternalBookingClick, onDateClick: handleDateClick, businessHours: businessHours })) : (React.createElement(TimeGrid, { currentDate: currentDate, view: currentView, bookings: bookings, timezone: timezone, onBookingClick: handleInternalBookingClick, onTimeSlotClick: handleDateClick, businessHours: businessHours }))),
|
|
8157
|
-
showCreateModal && selectedDate && (React.createElement(CreateBookingModal, { businessId: businessId, apiBaseUrl: apiBaseUrl, initialDate: selectedDate, participants: participants, onClose: () => setShowCreateModal(false), onBookingCreated: handleBookingCreated, timezone: timezone, businessHours: businessHours })),
|
|
8212
|
+
showCreateModal && selectedDate && (React.createElement(CreateBookingModal, { businessId: businessId, apiBaseUrl: apiBaseUrl, initialDate: selectedDate, participants: participants, onClose: () => setShowCreateModal(false), onBookingCreated: handleBookingCreated, timezone: timezone, businessHours: businessHours, employees: employees, rooms: rooms })),
|
|
8158
8213
|
selectedBooking && (React.createElement(BookingDetailsModal, { booking: selectedBooking, timezone: timezone, businessId: businessId, apiBaseUrl: apiBaseUrl, onClose: () => setSelectedBooking(null), onBookingDeleted: () => __awaiter(void 0, void 0, void 0, function* () {
|
|
8159
8214
|
setSelectedBooking(null);
|
|
8160
8215
|
yield fetchBookings();
|