@nylas/web-elements 1.1.5 → 1.1.6
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/cdn/nylas-booked-event-card/nylas-booked-event-card.es.js +155 -145
- package/dist/cdn/nylas-booking-form/nylas-booking-form.es.js +80 -70
- package/dist/cdn/nylas-cancel-booking-form/nylas-cancel-booking-form.es.js +14 -4
- package/dist/cdn/nylas-cancelled-event-card/nylas-cancelled-event-card.es.js +14 -4
- package/dist/cdn/nylas-confirmed-event-card/nylas-confirmed-event-card.es.js +14 -4
- package/dist/cdn/nylas-date-picker/nylas-date-picker.es.js +86 -73
- package/dist/cdn/nylas-editor-tabs/nylas-editor-tabs.es.js +19 -12
- package/dist/cdn/nylas-feedback-form/nylas-feedback-form.es.js +1226 -1219
- package/dist/cdn/nylas-locale-switch/nylas-locale-switch.es.js +1233 -1220
- package/dist/cdn/nylas-organizer-confirmation-card/nylas-organizer-confirmation-card.es.js +11 -4
- package/dist/cdn/nylas-scheduler-editor/nylas-scheduler-editor.es.js +19 -12
- package/dist/cdn/nylas-scheduling/nylas-scheduling.es.js +1694 -1584
- package/dist/cdn/nylas-selected-event-card/nylas-selected-event-card.es.js +14 -4
- package/dist/cdn/nylas-timeslot-picker/nylas-timeslot-picker.es.js +13 -3
- package/dist/cjs/calendar-agenda-fill-icon_54.cjs.entry.js +13 -3
- package/dist/cjs/calendar-agenda-fill-icon_54.cjs.entry.js.map +1 -1
- package/dist/cjs/google-logo-icon_4.cjs.entry.js +7 -6
- package/dist/cjs/google-logo-icon_4.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/nylas-booked-event-card.cjs.entry.js +15 -4
- package/dist/cjs/nylas-booked-event-card.cjs.entry.js.map +1 -1
- package/dist/cjs/nylas-booked-event-card_12.cjs.entry.js +142 -25
- package/dist/cjs/nylas-booked-event-card_12.cjs.entry.js.map +1 -1
- package/dist/cjs/nylas-booking-form.cjs.entry.js +16 -3
- package/dist/cjs/nylas-booking-form.cjs.entry.js.map +1 -1
- package/dist/cjs/nylas-cancel-booking-form.cjs.entry.js +13 -2
- package/dist/cjs/nylas-cancel-booking-form.cjs.entry.js.map +1 -1
- package/dist/cjs/nylas-cancelled-event-card.cjs.entry.js +13 -2
- package/dist/cjs/nylas-cancelled-event-card.cjs.entry.js.map +1 -1
- package/dist/cjs/nylas-confirmed-event-card.cjs.entry.js +13 -2
- package/dist/cjs/nylas-confirmed-event-card.cjs.entry.js.map +1 -1
- package/dist/cjs/nylas-date-picker.cjs.entry.js +16 -2
- package/dist/cjs/nylas-date-picker.cjs.entry.js.map +1 -1
- package/dist/cjs/nylas-editor-tabs.cjs.entry.js +7 -6
- package/dist/cjs/nylas-editor-tabs.cjs.entry.js.map +1 -1
- package/dist/cjs/nylas-feedback-form.cjs.entry.js +13 -3
- package/dist/cjs/nylas-feedback-form.cjs.entry.js.map +1 -1
- package/dist/cjs/nylas-locale-switch.cjs.entry.js +18 -4
- package/dist/cjs/nylas-locale-switch.cjs.entry.js.map +1 -1
- package/dist/cjs/nylas-organizer-confirmation-card.cjs.entry.js +12 -2
- package/dist/cjs/nylas-organizer-confirmation-card.cjs.entry.js.map +1 -1
- package/dist/cjs/nylas-scheduling.cjs.entry.js +11 -10
- package/dist/cjs/nylas-scheduling.cjs.entry.js.map +1 -1
- package/dist/cjs/nylas-selected-event-card.cjs.entry.js +14 -3
- package/dist/cjs/nylas-selected-event-card.cjs.entry.js.map +1 -1
- package/dist/cjs/nylas-timeslot-picker.cjs.entry.js +12 -1
- package/dist/cjs/nylas-timeslot-picker.cjs.entry.js.map +1 -1
- package/dist/cjs/nylas-web-elements.cjs.js +1 -1
- package/dist/collection/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.css +0 -23
- package/dist/collection/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.js +34 -3
- package/dist/collection/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.js.map +1 -1
- package/dist/collection/components/scheduler/nylas-booking-form/nylas-booking-form.css +0 -23
- package/dist/collection/components/scheduler/nylas-booking-form/nylas-booking-form.js +35 -2
- package/dist/collection/components/scheduler/nylas-booking-form/nylas-booking-form.js.map +1 -1
- package/dist/collection/components/scheduler/nylas-cancel-booking-form/nylas-cancel-booking-form.css +0 -23
- package/dist/collection/components/scheduler/nylas-cancel-booking-form/nylas-cancel-booking-form.js +32 -1
- package/dist/collection/components/scheduler/nylas-cancel-booking-form/nylas-cancel-booking-form.js.map +1 -1
- package/dist/collection/components/scheduler/nylas-cancelled-event-card/nylas-cancelled-event-card.css +0 -23
- package/dist/collection/components/scheduler/nylas-cancelled-event-card/nylas-cancelled-event-card.js +32 -1
- package/dist/collection/components/scheduler/nylas-cancelled-event-card/nylas-cancelled-event-card.js.map +1 -1
- package/dist/collection/components/scheduler/nylas-confirmed-event-card/nylas-confirmed-event-card.css +0 -23
- package/dist/collection/components/scheduler/nylas-confirmed-event-card/nylas-confirmed-event-card.js +32 -1
- package/dist/collection/components/scheduler/nylas-confirmed-event-card/nylas-confirmed-event-card.js.map +1 -1
- package/dist/collection/components/scheduler/nylas-date-picker/nylas-date-picker.css +0 -23
- package/dist/collection/components/scheduler/nylas-date-picker/nylas-date-picker.js +35 -1
- package/dist/collection/components/scheduler/nylas-date-picker/nylas-date-picker.js.map +1 -1
- package/dist/collection/components/scheduler/nylas-feedback-form/nylas-feedback-form.css +0 -23
- package/dist/collection/components/scheduler/nylas-feedback-form/nylas-feedback-form.js +36 -2
- package/dist/collection/components/scheduler/nylas-feedback-form/nylas-feedback-form.js.map +1 -1
- package/dist/collection/components/scheduler/nylas-locale-switch/nylas-locale-switch.css +0 -23
- package/dist/collection/components/scheduler/nylas-locale-switch/nylas-locale-switch.js +37 -3
- package/dist/collection/components/scheduler/nylas-locale-switch/nylas-locale-switch.js.map +1 -1
- package/dist/collection/components/scheduler/nylas-organizer-confirmation-card/nylas-organizer-confirmation-card.css +0 -23
- package/dist/collection/components/scheduler/nylas-organizer-confirmation-card/nylas-organizer-confirmation-card.js +31 -1
- package/dist/collection/components/scheduler/nylas-organizer-confirmation-card/nylas-organizer-confirmation-card.js.map +1 -1
- package/dist/collection/components/scheduler/nylas-scheduling/nylas-scheduling.js +10 -9
- package/dist/collection/components/scheduler/nylas-scheduling/nylas-scheduling.js.map +1 -1
- package/dist/collection/components/scheduler/nylas-selected-event-card/nylas-selected-event-card.css +0 -23
- package/dist/collection/components/scheduler/nylas-selected-event-card/nylas-selected-event-card.js +33 -2
- package/dist/collection/components/scheduler/nylas-selected-event-card/nylas-selected-event-card.js.map +1 -1
- package/dist/collection/components/scheduler/nylas-timeslot-picker/nylas-timeslot-picker.css +0 -23
- package/dist/collection/components/scheduler/nylas-timeslot-picker/nylas-timeslot-picker.js +31 -0
- package/dist/collection/components/scheduler/nylas-timeslot-picker/nylas-timeslot-picker.js.map +1 -1
- package/dist/collection/components/scheduler/nylas-timeslot-picker/test/nylas-timeslot-picker.spec.js +7 -1
- package/dist/collection/components/scheduler/nylas-timeslot-picker/test/nylas-timeslot-picker.spec.js.map +1 -1
- package/dist/collection/components/scheduler-editor/nylas-editor-tabs/nylas-editor-tabs.js +5 -4
- package/dist/collection/components/scheduler-editor/nylas-editor-tabs/nylas-editor-tabs.js.map +1 -1
- package/dist/components/nylas-booked-event-card2.js +16 -4
- package/dist/components/nylas-booked-event-card2.js.map +1 -1
- package/dist/components/nylas-booking-form2.js +17 -3
- package/dist/components/nylas-booking-form2.js.map +1 -1
- package/dist/components/nylas-cancel-booking-form2.js +14 -2
- package/dist/components/nylas-cancel-booking-form2.js.map +1 -1
- package/dist/components/nylas-cancelled-event-card2.js +14 -2
- package/dist/components/nylas-cancelled-event-card2.js.map +1 -1
- package/dist/components/nylas-confirmed-event-card2.js +14 -2
- package/dist/components/nylas-confirmed-event-card2.js.map +1 -1
- package/dist/components/nylas-date-picker2.js +18 -3
- package/dist/components/nylas-date-picker2.js.map +1 -1
- package/dist/components/nylas-editor-tabs2.js +7 -6
- package/dist/components/nylas-editor-tabs2.js.map +1 -1
- package/dist/components/nylas-feedback-form2.js +14 -3
- package/dist/components/nylas-feedback-form2.js.map +1 -1
- package/dist/components/nylas-locale-switch2.js +20 -5
- package/dist/components/nylas-locale-switch2.js.map +1 -1
- package/dist/components/nylas-organizer-confirmation-card2.js +13 -2
- package/dist/components/nylas-organizer-confirmation-card2.js.map +1 -1
- package/dist/components/nylas-scheduling.js +11 -10
- package/dist/components/nylas-scheduling.js.map +1 -1
- package/dist/components/nylas-selected-event-card2.js +15 -3
- package/dist/components/nylas-selected-event-card2.js.map +1 -1
- package/dist/components/nylas-timeslot-picker2.js +13 -1
- package/dist/components/nylas-timeslot-picker2.js.map +1 -1
- package/dist/esm/calendar-agenda-fill-icon_54.entry.js +13 -3
- package/dist/esm/calendar-agenda-fill-icon_54.entry.js.map +1 -1
- package/dist/esm/google-logo-icon_4.entry.js +7 -6
- package/dist/esm/google-logo-icon_4.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/nylas-booked-event-card.entry.js +16 -5
- package/dist/esm/nylas-booked-event-card.entry.js.map +1 -1
- package/dist/esm/nylas-booked-event-card_12.entry.js +142 -25
- package/dist/esm/nylas-booked-event-card_12.entry.js.map +1 -1
- package/dist/esm/nylas-booking-form.entry.js +16 -3
- package/dist/esm/nylas-booking-form.entry.js.map +1 -1
- package/dist/esm/nylas-cancel-booking-form.entry.js +14 -3
- package/dist/esm/nylas-cancel-booking-form.entry.js.map +1 -1
- package/dist/esm/nylas-cancelled-event-card.entry.js +14 -3
- package/dist/esm/nylas-cancelled-event-card.entry.js.map +1 -1
- package/dist/esm/nylas-confirmed-event-card.entry.js +14 -3
- package/dist/esm/nylas-confirmed-event-card.entry.js.map +1 -1
- package/dist/esm/nylas-date-picker.entry.js +18 -4
- package/dist/esm/nylas-date-picker.entry.js.map +1 -1
- package/dist/esm/nylas-editor-tabs.entry.js +7 -6
- package/dist/esm/nylas-editor-tabs.entry.js.map +1 -1
- package/dist/esm/nylas-feedback-form.entry.js +13 -3
- package/dist/esm/nylas-feedback-form.entry.js.map +1 -1
- package/dist/esm/nylas-locale-switch.entry.js +20 -6
- package/dist/esm/nylas-locale-switch.entry.js.map +1 -1
- package/dist/esm/nylas-organizer-confirmation-card.entry.js +12 -2
- package/dist/esm/nylas-organizer-confirmation-card.entry.js.map +1 -1
- package/dist/esm/nylas-scheduling.entry.js +11 -10
- package/dist/esm/nylas-scheduling.entry.js.map +1 -1
- package/dist/esm/nylas-selected-event-card.entry.js +15 -4
- package/dist/esm/nylas-selected-event-card.entry.js.map +1 -1
- package/dist/esm/nylas-timeslot-picker.entry.js +13 -2
- package/dist/esm/nylas-timeslot-picker.entry.js.map +1 -1
- package/dist/esm/nylas-web-elements.js +1 -1
- package/dist/nylas-web-elements/nylas-booked-event-card.entry.js +16 -5
- package/dist/nylas-web-elements/nylas-booked-event-card.entry.js.map +1 -1
- package/dist/nylas-web-elements/nylas-booking-form.entry.js +16 -3
- package/dist/nylas-web-elements/nylas-booking-form.entry.js.map +1 -1
- package/dist/nylas-web-elements/nylas-cancel-booking-form.entry.js +14 -3
- package/dist/nylas-web-elements/nylas-cancel-booking-form.entry.js.map +1 -1
- package/dist/nylas-web-elements/nylas-cancelled-event-card.entry.js +14 -3
- package/dist/nylas-web-elements/nylas-cancelled-event-card.entry.js.map +1 -1
- package/dist/nylas-web-elements/nylas-confirmed-event-card.entry.js +14 -3
- package/dist/nylas-web-elements/nylas-confirmed-event-card.entry.js.map +1 -1
- package/dist/nylas-web-elements/nylas-date-picker.entry.js +18 -4
- package/dist/nylas-web-elements/nylas-date-picker.entry.js.map +1 -1
- package/dist/nylas-web-elements/nylas-editor-tabs.entry.js +7 -6
- package/dist/nylas-web-elements/nylas-editor-tabs.entry.js.map +1 -1
- package/dist/nylas-web-elements/nylas-feedback-form.entry.js +13 -3
- package/dist/nylas-web-elements/nylas-feedback-form.entry.js.map +1 -1
- package/dist/nylas-web-elements/nylas-locale-switch.entry.js +20 -6
- package/dist/nylas-web-elements/nylas-locale-switch.entry.js.map +1 -1
- package/dist/nylas-web-elements/nylas-organizer-confirmation-card.entry.js +12 -2
- package/dist/nylas-web-elements/nylas-organizer-confirmation-card.entry.js.map +1 -1
- package/dist/nylas-web-elements/nylas-scheduling.entry.js +11 -10
- package/dist/nylas-web-elements/nylas-scheduling.entry.js.map +1 -1
- package/dist/nylas-web-elements/nylas-selected-event-card.entry.js +15 -4
- package/dist/nylas-web-elements/nylas-selected-event-card.entry.js.map +1 -1
- package/dist/nylas-web-elements/nylas-timeslot-picker.entry.js +13 -2
- package/dist/nylas-web-elements/nylas-timeslot-picker.entry.js.map +1 -1
- package/dist/nylas-web-elements/nylas-web-elements.esm.js +1 -1
- package/dist/nylas-web-elements/p-2e7f0f20.entry.js +2 -0
- package/dist/nylas-web-elements/p-2e7f0f20.entry.js.map +1 -0
- package/dist/nylas-web-elements/{p-b5b568cf.entry.js → p-368190e9.entry.js} +2 -2
- package/dist/nylas-web-elements/p-368190e9.entry.js.map +1 -0
- package/dist/nylas-web-elements/{p-e790c71f.entry.js → p-9a8047b9.entry.js} +2 -2
- package/dist/nylas-web-elements/{p-e790c71f.entry.js.map → p-9a8047b9.entry.js.map} +1 -1
- package/dist/nylas-web-elements/{p-d586ff14.entry.js → p-eba3d197.entry.js} +3 -3
- package/dist/nylas-web-elements/p-eba3d197.entry.js.map +1 -0
- package/dist/types/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.d.ts +4 -1
- package/dist/types/components/scheduler/nylas-booking-form/nylas-booking-form.d.ts +5 -2
- package/dist/types/components/scheduler/nylas-cancel-booking-form/nylas-cancel-booking-form.d.ts +4 -1
- package/dist/types/components/scheduler/nylas-cancelled-event-card/nylas-cancelled-event-card.d.ts +4 -0
- package/dist/types/components/scheduler/nylas-confirmed-event-card/nylas-confirmed-event-card.d.ts +4 -0
- package/dist/types/components/scheduler/nylas-date-picker/nylas-date-picker.d.ts +5 -0
- package/dist/types/components/scheduler/nylas-feedback-form/nylas-feedback-form.d.ts +3 -0
- package/dist/types/components/scheduler/nylas-locale-switch/nylas-locale-switch.d.ts +5 -0
- package/dist/types/components/scheduler/nylas-organizer-confirmation-card/nylas-organizer-confirmation-card.d.ts +3 -1
- package/dist/types/components/scheduler/nylas-scheduling/nylas-scheduling.d.ts +1 -1
- package/dist/types/components/scheduler/nylas-selected-event-card/nylas-selected-event-card.d.ts +4 -1
- package/dist/types/components/scheduler/nylas-timeslot-picker/nylas-timeslot-picker.d.ts +4 -1
- package/dist/types/components/scheduler-editor/nylas-editor-tabs/nylas-editor-tabs.d.ts +1 -1
- package/dist/types/components.d.ts +88 -0
- package/package.json +1 -1
- package/dist/nylas-web-elements/p-7a1d51ab.entry.js +0 -2
- package/dist/nylas-web-elements/p-7a1d51ab.entry.js.map +0 -1
- package/dist/nylas-web-elements/p-b5b568cf.entry.js.map +0 -1
- package/dist/nylas-web-elements/p-d586ff14.entry.js.map +0 -1
|
@@ -3,7 +3,7 @@ import { R as RegisterComponent } from './register-component-3444af44.js';
|
|
|
3
3
|
import { a as debug, l as formatTimezone, i as instance, j as capitalizeFirstLetter, s as sanitizeHtml, n as sanitize, b as addDaysToCurrentDate, o as getLastDayOfMonth, q as getFirstDayOfMonth, r as isSameDay, t as convertMinutesToHoursAndMinutes, v as translateMonth, w as isSameMonth, x as getTimezoneOffset } from './utils-6e17bc66.js';
|
|
4
4
|
import { T as TIMEZONE_MAP, a as LANGUAGE_CODE_MAP, b as LANGUAGE_MAP } from './constants-c549b12b.js';
|
|
5
5
|
|
|
6
|
-
const nylasBookedEventCardCss = ":host{display:block
|
|
6
|
+
const nylasBookedEventCardCss = ":host{display:block}.nylas-booked-event-card{height:inherit;display:flex;flex-direction:column;justify-content:space-between;align-items:center;font-family:var(--nylas-font-family)}.event-card-wrapper{display:flex;align-items:center;flex-direction:column;background-color:var(--nylas-base-0);color:var(--nylas-base-900);border-radius:var(--nylas-border-radius-3x);position:relative;margin-top:1rem;margin-bottom:2rem;width:424px;box-shadow:0px 1px 4px rgba(0, 0, 0, 0.1), 0px 3px 6px rgba(0, 0, 0, 0.06)}@media screen and (max-width: 768px){.event-card-wrapper{width:100%;border-radius:0px}}.calendar-icon{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:50%;position:absolute;top:-1.25rem;left:50%;transform:translateX(-50%);background-color:var(--nylas-base-0);border:1px solid var(--nylas-base-200);color:var(--nylas-base-700)}.booked-event-header{margin:1.5rem 0;overflow-wrap:anywhere;display:flex;align-items:center;flex-direction:column;font-size:1rem;font-weight:400;border-bottom:1px solid var(--nylas-base-200);width:inherit;padding:0 0 1.5rem}.booked-event-header h2{color:var(--nylas-base-600);margin-top:1.5rem;margin-bottom:0.25rem;font-size:1.125rem;font-weight:600}.booked-event-header .card-description{text-align:center}.booking-date-time,.booking-participants{padding:0 1rem;margin-top:1.5rem;margin-left:3rem;display:flex;flex-direction:column;justify-content:space-between;align-self:flex-start;position:relative}.booking-date-time svg,.booking-participants svg{color:var(--nylas-base-700);position:absolute;left:-10px}.booking-date-time .block,.booking-participants .block{display:block}.booking-date-time h3,.booking-participants h3{color:var(--nylas-base-600);margin:0;font-size:16px;font-weight:600;line-height:1.25rem;text-align:justify;margin-bottom:4px}.booking-date-time p,.booking-participants p{font-size:16px;margin:0;font-weight:400;text-align:justify;color:var(--nylas-base-800)}.booking-participants{margin-bottom:1.5rem}.booked-event-timezone{display:flex;color:var(--nylas-base-600);margin-bottom:1.5rem;gap:4px;margin:2rem;align-items:center;align-self:flex-end}.button-container{width:inherit}.footer{padding:0.5rem;display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;box-sizing:border-box;background-color:var(--nylas-base-25);border-top:1px solid var(--nylas-base-200);width:100%;border-radius:0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x)}.footer.no-template-cols{grid-template-columns:1fr}.footer.no-footer{display:none}sp-divider{background-color:var(--nylas-base-200);height:1px}calendar-check-icon{display:flex;align-items:center;justify-content:center;height:100%}";
|
|
7
7
|
const NylasBookedEventCardStyle0 = nylasBookedEventCardCss;
|
|
8
8
|
|
|
9
9
|
var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
@@ -64,6 +64,7 @@ const NylasBookedEventCard = class {
|
|
|
64
64
|
this.bookingInfo = undefined;
|
|
65
65
|
this.configSettings = undefined;
|
|
66
66
|
this.isLoading = undefined;
|
|
67
|
+
this.themeConfig = undefined;
|
|
67
68
|
this.selectedTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
|
|
68
69
|
this.selectedTimeslot = undefined;
|
|
69
70
|
this.selectedLanguage = navigator.language;
|
|
@@ -83,25 +84,34 @@ const NylasBookedEventCard = class {
|
|
|
83
84
|
if (!this.bookingInfo) {
|
|
84
85
|
console.warn('[nylas-booked-event-card] "bookingInfo" prop missing. Please provide the booking info to display the guest details in the booked event card component.');
|
|
85
86
|
}
|
|
87
|
+
this.applyThemeConfig(this.themeConfig);
|
|
86
88
|
this.startTime = formatTimezone(this.selectedTimeslot?.start_time, this.selectedTimezone);
|
|
87
89
|
this.endTime = formatTimezone(this.selectedTimeslot?.end_time, this.selectedTimezone);
|
|
88
90
|
}
|
|
91
|
+
applyThemeConfig(themeConfig) {
|
|
92
|
+
if (themeConfig) {
|
|
93
|
+
for (const [key, value] of Object.entries(themeConfig)) {
|
|
94
|
+
this.host.style.setProperty(`${key}`, value);
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
}
|
|
89
98
|
render() {
|
|
90
99
|
const bookingType = this.configSettings?.booking_type;
|
|
91
100
|
const isManualConfirmation = bookingType && bookingType !== 'booking';
|
|
92
|
-
return (h(Host, { key: '
|
|
101
|
+
return (h(Host, { key: '448f4b09ce4624c71dbff719acb7a67ecbc913e8', part: "nbec" }, h("div", { key: '83186cea10465372dece0a270725407ea74a0e1c', class: "nylas-booked-event-card" }, h("div", { key: '26d0cae03f426336f59c9459109d6c55beedb505', class: "booked-event-timezone" }, h("globe-icon", { key: '87fe3f6a6c6e8a0aad7c0250358d387b70d6a634' }), TIMEZONE_MAP[this.selectedTimezone]), h("div", { key: '9c445dce0c157cb67cb92a7a713e1dada1be47a7', class: "event-card-wrapper", part: "nbec__card" }, h("div", { key: '8bcfae606e9f99ba9a268b2dbb19e755143f2842', class: "calendar-icon" }, h("calendar-check-icon", { key: '7abab211fd0f1a04a087e2bd15ee112db8616e6a' })), h("div", { key: '7c40924ba6736cfc379ed828c5359c1b4e79d98e', class: "booked-event-header" }, h("h2", { key: '497f50d74143788b9d9920ba2ad57564abf7844a', slot: "card-title", part: "nbec__title" }, !!this.rescheduleBookingId && !this.isLoading
|
|
93
102
|
? `${instance.t('bookingRescheduled')}`
|
|
94
103
|
: isManualConfirmation && !this.isLoading
|
|
95
104
|
? `${instance.t('bookingSent')}`
|
|
96
|
-
: `${instance.t('bookingConfirmed')}`, "!"), h("div", { key: '
|
|
105
|
+
: `${instance.t('bookingConfirmed')}`, "!"), h("div", { key: 'efaf8dda6da9da0e3d181ecedd579cb1648beec2', class: "card-description", part: "nbec__description" }, isManualConfirmation ? instance.t('bookingSentDescription') : h("span", null, instance.t('bookingConfirmedDescription')))), h("div", { key: '4a4566f77af068b139525a13b84fd658fd9b8d02', class: "booking-date-time" }, h("checkmark-circle-icon", { key: '8526a636990d6f1bd3631a77fc4c11587bb1c966' }), h("h3", { key: 'f2286f630eb03a961276b149b7f556be715c0dc3' }, instance.t('bookingDateAndTimeHeader')), h("p", { key: 'ad07de11395666123ccf0022f0da372c9c3f8425' }, this.selectedTimeslot?.start_time
|
|
97
106
|
? capitalizeFirstLetter(new Date(this.selectedTimeslot?.start_time).toLocaleDateString(LANGUAGE_CODE_MAP[this.selectedLanguage], { dateStyle: 'full' }))
|
|
98
|
-
: '-', ' ', h("br", { key: '
|
|
107
|
+
: '-', ' ', h("br", { key: '70397806f6fbed27a981f23a4ae3c57309fffbbf' }), this.startTime, " - ", this.endTime)), h("div", { key: '5fe7e31e10847e8e701dcd192c39350bec71291f', class: "booking-participants" }), !isManualConfirmation && (h("div", { class: "button-container" }, h("div", { class: {
|
|
99
108
|
'footer': true,
|
|
100
109
|
'no-footer': (this.configSettings?.scheduler?.hide_cancellation_options && this.configSettings?.scheduler?.hide_rescheduling_options) ||
|
|
101
110
|
this.configSettings?.booking_type === 'organizer-confirmation',
|
|
102
111
|
'no-template-cols': this.configSettings?.scheduler?.hide_cancellation_options || this.configSettings?.scheduler?.hide_rescheduling_options,
|
|
103
112
|
} }, !this.configSettings?.scheduler?.hide_cancellation_options && (h("button-component", { variant: 'destructive', onClick: this.handleCancelBookingButtonClicked, part: "nbec__button-outline nbec__cancel-cta" }, `${instance.t('cancelBookingButton')}`)), !this.configSettings?.scheduler?.hide_rescheduling_options && (h("button-component", { variant: 'basic', onClick: this.handleRescheduleButtonClicked, part: "nbec__button-outline nbec__reschedule-cta" }, `${instance.t('rescheduleBookingButton')}`)))))))));
|
|
104
113
|
}
|
|
114
|
+
get host() { return getElement(this); }
|
|
105
115
|
};
|
|
106
116
|
__decorate$9([
|
|
107
117
|
RegisterComponent({
|
|
@@ -133,6 +143,7 @@ __decorate$9([
|
|
|
133
143
|
debug('nylas-booked-event-card', 'cancelBookedEventValidationError', event.detail);
|
|
134
144
|
},
|
|
135
145
|
},
|
|
146
|
+
localPropsToProp: new Map([['themeConfig', 'themeConfig']]),
|
|
136
147
|
fireRegisterEvent: true,
|
|
137
148
|
}),
|
|
138
149
|
__metadata$9("design:type", Function),
|
|
@@ -141,7 +152,7 @@ __decorate$9([
|
|
|
141
152
|
], NylasBookedEventCard.prototype, "render", null);
|
|
142
153
|
NylasBookedEventCard.style = NylasBookedEventCardStyle0;
|
|
143
154
|
|
|
144
|
-
const nylasBookingFormCss = ":host{display:block;height:100
|
|
155
|
+
const nylasBookingFormCss = ":host{display:block;height:100%}.nylas-booking-form{width:100%;padding:1.5rem;box-sizing:border-box;height:450px;overflow-y:auto;height:100%}form{height:100%;display:flex;flex-direction:column;justify-content:space-between;align-items:center}sp-textfield{--spectrum-corner-radius-100:var(--nylas-border-radius-2x);--spectrum-textfield-border-color:var(--nylas-base-300);position:relative;width:100%;height:48px;margin-bottom:16px;color:var(--nylas-base-500)}.cta{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;align-items:flex-start;justify-content:space-between;gap:0.5rem;padding:14px;box-sizing:border-box;border-top:1px solid var(--nylas-base-200)}@media screen and (max-width: 768px){.cta{grid-template-columns:1fr}}.input-wrapper{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-bottom:1rem}.input-wrapper input::placeholder{color:var(--nylas-base-300)}.input-wrapper label,.input-wrapper input{font-family:var(--nylas-font-family);font-size:16px}.input-wrapper .help-text{margin:0;color:var(--nylas-error)}.button-wrapper{width:100%;align-items:flex-start;height:max-content;position:relative}.button-content{display:flex;gap:4px;align-items:center}sp-infield-button{--spectrum-infield-button-background-color:transparent;--spectrum-infield-button-background-color-hover:transparent;--spectrum-infield-button-background-color-active:transparent;--spectrum-infield-button-border-color:transparent;--spectrum-infield-button-border-width:1px;--spectrum-infield-button-border-radius:0;color:var(--nylas-base-600);background:transparent;border:none;outline:1px solid var(--nylas-base-300);border-radius:0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x) 0;height:52px;width:52px;display:flex;position:absolute;right:0;align-items:center;justify-content:center;cursor:pointer}sp-infield-button sp-icon-cross300{color:var(--nylas-base-600)}sp-infield-button.error{border-width:2px;border-color:var(--nylas-error)}input[type=text],input[type=email]{display:flex;height:48px;padding-left:16px;align-items:center;gap:8px;align-self:stretch;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-300);background:var(--nylas-base-0);width:-webkit-fill-available;color:var(--nylas-base-900);font-size:16px;font-style:normal;font-weight:400;line-height:150%}input[type=text]:focus,input[type=email]:focus{outline-color:var(--nylas-primary)}input[type=text].error,input[type=email].error{border-radius:var(--nylas-border-radius-2x);font-weight:600;border-color:var(--nylas-error);border-width:2px}input[type=text].error::placeholder,input[type=email].error::placeholder{font-weight:400}input[type=text]::placeholder,input[type=email]::placeholder{color:var(--nylas-base-300)}input[type=text].guest-email,input[type=email].guest-email{color:var(--nylas-base-900);padding-right:52px}label{display:flex;color:var(--nylas-base-800, #293056);font-size:14px;font-style:normal;font-weight:400;line-height:150%}label.error{color:var(--nylas-error)}label span.required{color:var(--nylas-error);padding:0 0.25rem}button-component.remove-guest{position:absolute;height:51px;right:0}button-component.remove-guest.error button{border-color:var(--nylas-error)}button-component.remove-guest button{height:inherit;border-top-left-radius:initial;border-bottom-left-radius:initial;border:none !important;border-left:1px solid var(--nylas-base-300) !important}button-component.remove-guest button:hover,button-component.remove-guest button:focus{outline:1px solid var(--nylas-primary) !important;color:var(--nylas-primary)}button-component.back button{--dot-color:var(--nylas-base-800)}.guest-email-input{position:relative;display:flex;width:100%}";
|
|
145
156
|
const NylasBookingFormStyle0 = nylasBookingFormCss;
|
|
146
157
|
|
|
147
158
|
var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
@@ -290,6 +301,7 @@ const NylasBookingForm = class {
|
|
|
290
301
|
this.bookingInfo = undefined;
|
|
291
302
|
this.eventInfo = undefined;
|
|
292
303
|
this.configSettings = undefined;
|
|
304
|
+
this.themeConfig = undefined;
|
|
293
305
|
this.name = '';
|
|
294
306
|
this.email = '';
|
|
295
307
|
this.guestEmails = [];
|
|
@@ -304,10 +316,14 @@ const NylasBookingForm = class {
|
|
|
304
316
|
disconnectedCallback() { }
|
|
305
317
|
componentWillLoad() {
|
|
306
318
|
debug('nylas-booking-form', 'componentWillLoad', this.bookingInfo);
|
|
319
|
+
}
|
|
320
|
+
componentDidLoad() {
|
|
321
|
+
debug('nylas-booking-form', 'componentDidLoad', this.bookingInfo);
|
|
307
322
|
if (this.bookingInfo && this.bookingInfo?.primaryParticipant) {
|
|
308
323
|
this.name = this.bookingInfo.primaryParticipant?.name;
|
|
309
324
|
this.email = this.bookingInfo.primaryParticipant?.email;
|
|
310
325
|
}
|
|
326
|
+
this.applyThemeConfig(this.themeConfig);
|
|
311
327
|
}
|
|
312
328
|
bookingInfoChangedHandler(newValue) {
|
|
313
329
|
if (newValue && newValue.primaryParticipant) {
|
|
@@ -315,6 +331,13 @@ const NylasBookingForm = class {
|
|
|
315
331
|
this.email = newValue.primaryParticipant.email;
|
|
316
332
|
}
|
|
317
333
|
}
|
|
334
|
+
applyThemeConfig(themeConfig) {
|
|
335
|
+
if (themeConfig) {
|
|
336
|
+
for (const [key, value] of Object.entries(themeConfig)) {
|
|
337
|
+
this.host.style.setProperty(`${key}`, value);
|
|
338
|
+
}
|
|
339
|
+
}
|
|
340
|
+
}
|
|
318
341
|
changeName(name) {
|
|
319
342
|
this.isNameValid = true;
|
|
320
343
|
this.validationError.name = '';
|
|
@@ -375,7 +398,7 @@ const NylasBookingForm = class {
|
|
|
375
398
|
this.updateAdditionalFields(event.detail.name, event.detail.value);
|
|
376
399
|
}
|
|
377
400
|
render() {
|
|
378
|
-
return (h(Host, { key: '
|
|
401
|
+
return (h(Host, { key: '9a442ac154e4e8ab9d8e8ec08b2005bb9bda476c' }, h("form", { key: '63feaa1eb0688e4019e1af96d48a3e71cafe2d3a', onSubmit: e => this.bookButtonClickedHandler(e), noValidate: true }, h("div", { key: '95f92c677613fcddd743467c30e6b097a575fa40', class: "nylas-booking-form", part: "nbf" }, h("div", { key: 'b37fc60cddc9172fbb65edaf45e77c3d999f6aa4', class: "input-wrapper", part: "nbf__input-wrapper" }, h("input-component", { key: '5545f58ce4fc92b0ab185087dfbeb5de6a25aca0', label: instance.t('name'), name: "name", id: "name", defaultValue: this.bookingInfo?.primaryParticipant?.name || this.name, placeholder: instance.t('namePlaceholder'), type: "text", required: true, requiredError: instance.t('fieldRequired', { field: instance.t('name') }), patternError: instance.t('invalidInputFormat', { field: instance.t('name') }), part: "nbf__input-textfield" })), h("div", { key: '6ddd5a68d0966e1fa79998d757a47b2df8c2b6e6', class: "input-wrapper", part: "nbf__input-wrapper" }, h("input-component", { key: '20a13472d671c968a2f20c79992a04aca4b50f54', label: instance.t('email'), name: "email", id: "email", pattern: emailRegex, defaultValue: this.bookingInfo?.primaryParticipant?.email || this.email, placeholder: instance.t('emailPlaceholder'), type: "email", required: true, requiredError: instance.t('fieldRequired', { field: instance.t('email') }), patternError: instance.t('invalidInputFormat', { field: instance.t('email') }), part: "nbf__input-textfield" })), this.configSettings?.scheduler?.hide_additional_guests !== true && (h("div", { class: "input-wrapper", part: "nbf__input-wrapper" }, this.guestEmails.map((email, index) => (h("div", { class: "input-wrapper button-wrapper" }, h("label", { class: {
|
|
379
402
|
error: !!this.guestEmailErrors[index],
|
|
380
403
|
} }, instance.t('guestEmail')), h("div", { class: "guest-email-input" }, h("input", { type: "email", id: `guest-email-${index}`, maxLength: 100, class: {
|
|
381
404
|
'guest-email': true,
|
|
@@ -402,7 +425,7 @@ const NylasBookingForm = class {
|
|
|
402
425
|
default:
|
|
403
426
|
return (h("div", { class: "input-wrapper", part: "nbf__input-wrapper" }, h("input-component", { label: label, name: key, id: key, type: field.type, defaultValue: defaultValue || '', requiredError: instance.t('fieldRequired', { field: label }), required: field.required, part: "nbf__input-textfield" })));
|
|
404
427
|
}
|
|
405
|
-
})), h("div", { key: '
|
|
428
|
+
})), h("div", { key: '9229b464ad25565982e59b7d01fe5f2204e1d10e', class: "cta" }, h("button-component", { key: '877d574a7a39f960c5cddff0f84d3d0454bfc96c', variant: 'basic', class: "back", part: "nbf__button-outline", isLoading: this.backButtonLoading && this.isLoading, onClick: this.handleBackButtonClicked }, h("slot", { key: '9436fe8276b9da6baa608695b1d0dceb03c865ae', name: "booking-form-back-label" }, `${instance.t('backButton')}`)), h("button-component", { key: '48814874005b24b2f21a8cdbd863194a563f171f', variant: 'primary', isLoading: !this.backButtonLoading && this.isLoading, disabled: this.isLoading, part: "nbf__button-primary", type: "submit" }, h("slot", { key: '975aba7f10d24850113f7fcfe1e11abbb15ac401', name: "booking-form-book-label" }, `${instance.t('bookNowButton')}`))))));
|
|
406
429
|
}
|
|
407
430
|
get host() { return getElement(this); }
|
|
408
431
|
static get watchers() { return {
|
|
@@ -438,6 +461,7 @@ __decorate$8([
|
|
|
438
461
|
debug('nylas-booking-form', 'bookingFormError', event.detail);
|
|
439
462
|
},
|
|
440
463
|
},
|
|
464
|
+
localPropsToProp: new Map([['themeConfig', 'themeConfig']]),
|
|
441
465
|
fireRegisterEvent: true,
|
|
442
466
|
}),
|
|
443
467
|
__metadata$8("design:type", Function),
|
|
@@ -446,7 +470,7 @@ __decorate$8([
|
|
|
446
470
|
], NylasBookingForm.prototype, "render", null);
|
|
447
471
|
NylasBookingForm.style = NylasBookingFormStyle0;
|
|
448
472
|
|
|
449
|
-
const nylasCancelBookingFormCss = ":host{
|
|
473
|
+
const nylasCancelBookingFormCss = ":host{display:block;width:400px;font-family:var(--nylas-font-family)}.nylas-cancel-booking-form{display:flex;align-items:center;flex-direction:column;background-color:var(--nylas-base-0);color:var(--nylas-base-800);border-radius:var(--nylas-border-radius-2x);padding:1.5rem;position:relative;box-shadow:0px 1px 4px rgba(0, 0, 0, 0.1), 0px 3px 6px rgba(0, 0, 0, 0.06)}.nylas-cancel-booking-form form{width:100%}.nylas-cancel-booking-form__title{font-size:18px;font-weight:600;margin-bottom:0;color:var(--nylas-base-900)}.nylas-cancel-booking-form__description{font-size:1rem;font-style:normal;font-weight:400;line-height:140%;color:var(--nylas-base-600);padding-bottom:1.25rem}.nylas-cancel-booking-form__calendar-icon{width:3rem;height:3rem;border-radius:50%;position:absolute;top:-1.25rem;left:50%;transform:translateX(-50%);background-color:var(--nylas-base-0);border:1px solid var(--nylas-base-200)}calendar-cancel-icon{display:flex;align-items:center;justify-content:center;height:100%}.footer{display:grid;grid-template-columns:1fr 1fr;width:100%;padding-top:1.25rem;gap:1rem;border-top:1px solid var(--nylas-base-200);margin-top:1.25rem}";
|
|
450
474
|
const NylasCancelBookingFormStyle0 = nylasCancelBookingFormCss;
|
|
451
475
|
|
|
452
476
|
var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
@@ -513,6 +537,7 @@ const NylasCancelBookingForm = class {
|
|
|
513
537
|
this.configSettings = undefined;
|
|
514
538
|
this.eventInfo = undefined;
|
|
515
539
|
this.isLoading = undefined;
|
|
540
|
+
this.themeConfig = undefined;
|
|
516
541
|
this.cancellationReason = '';
|
|
517
542
|
this.cancellationError = '';
|
|
518
543
|
this.cancellationPolicy = this.configSettings?.scheduler?.cancellation_policy || 'Your current timeslot will become available to others.';
|
|
@@ -531,10 +556,18 @@ const NylasCancelBookingForm = class {
|
|
|
531
556
|
if (!this.cancelBookingId) {
|
|
532
557
|
console.warn(`[nylas-cancel-booking-form] No booking ID provided, "cancelBookingId" prop is required.`);
|
|
533
558
|
}
|
|
559
|
+
this.applyThemeConfig(this.themeConfig);
|
|
534
560
|
}
|
|
535
561
|
disconnectedCallback() {
|
|
536
562
|
debug(`[nylas-cancel-booking-form] Component disconnected`);
|
|
537
563
|
}
|
|
564
|
+
applyThemeConfig(themeConfig) {
|
|
565
|
+
if (themeConfig) {
|
|
566
|
+
for (const [key, value] of Object.entries(themeConfig)) {
|
|
567
|
+
this.host.style.setProperty(`${key}`, value);
|
|
568
|
+
}
|
|
569
|
+
}
|
|
570
|
+
}
|
|
538
571
|
handleNylasFormInputChanged(event) {
|
|
539
572
|
this.triggerValidation.emit({});
|
|
540
573
|
if (event.detail.name === 'cancel-reason') {
|
|
@@ -543,8 +576,9 @@ const NylasCancelBookingForm = class {
|
|
|
543
576
|
}
|
|
544
577
|
}
|
|
545
578
|
render() {
|
|
546
|
-
return (h(Host, { key: '
|
|
579
|
+
return (h(Host, { key: '4e09c3c77a5a4a5138366431c50db2731ce08921', part: "ncbf" }, h("div", { key: '3cc3f35b457f947d6f368b7857d6529e640800e4', class: "nylas-cancel-booking-form", part: "ncbf__card" }, h("div", { key: '41001fcfa02096c97a909c1a2172349d5c77ceba', class: "nylas-cancel-booking-form__calendar-icon", part: "ncbf__icon" }, h("calendar-cancel-icon", { key: '328274c7fe7351574cb43565b4ee1d8500d0cdcf' })), h("h3", { key: '4a702b5a6b7712336370b82f993a5c36655a4de2', class: "nylas-cancel-booking-form__title", part: "ncbf__title" }, instance.t('cancelBookingTitle')), h("div", { key: '3d28b48ce8f84a843cfd96b57340d624e7cc0efc', class: "nylas-cancel-booking-form__description", part: "ncbf__description" }, !this.configSettings?.scheduler?.cancellation_policy ? `${instance.t('cancelBookingMessage')}` : this.cancellationPolicy), h("form", { key: 'd1363507571afe0b46f47697830ca603dd206abe', onSubmit: this.handleSubmitCancelBooking }, h("textarea-component", { key: '4256de3a9d7b2cf05a45388c9916f9bc38e82b80', id: "cancel-reason", name: "cancel-reason", required: true, label: instance.t('reasonForCancellation'), class: this.cancellationError ? 'error' : '', part: "ncbf__reason-textarea", defaultValue: this.cancellationReason }), h("div", { key: 'fc0169e6090700c9ac26db55b6b10f8614bf408e', class: "footer" }, h("button-component", { key: 'e348ccaabd354669178d4c5def1ac9c545b8b5ac', variant: 'destructive', class: "cancel", type: "submit", part: "ncbf__button-cta", disabled: this.isLoading }, instance.t('cancelBookingButton')), !!this.eventInfo && (h("button-component", { variant: 'basic', class: "back", part: "ncbf__button-outline", onClick: this.handleGoBackClicked }, instance.t('goBackButton'))))))));
|
|
547
580
|
}
|
|
581
|
+
get host() { return getElement(this); }
|
|
548
582
|
static get watchers() { return {
|
|
549
583
|
"configSettings": ["configSettingsChangedHandler"]
|
|
550
584
|
}; }
|
|
@@ -591,6 +625,7 @@ __decorate$7([
|
|
|
591
625
|
debug('nylas-cancel-booking-form', 'cancelBookingFormError', event.detail);
|
|
592
626
|
},
|
|
593
627
|
},
|
|
628
|
+
localPropsToProp: new Map([['themeConfig', 'themeConfig']]),
|
|
594
629
|
fireRegisterEvent: true,
|
|
595
630
|
}),
|
|
596
631
|
__metadata$7("design:type", Function),
|
|
@@ -599,7 +634,7 @@ __decorate$7([
|
|
|
599
634
|
], NylasCancelBookingForm.prototype, "render", null);
|
|
600
635
|
NylasCancelBookingForm.style = NylasCancelBookingFormStyle0;
|
|
601
636
|
|
|
602
|
-
const nylasCancelledEventCardCss = ":host{display:block
|
|
637
|
+
const nylasCancelledEventCardCss = ":host{display:block}.nylas-cancelled-event-card{height:inherit;display:flex;flex-direction:column;justify-content:space-between;align-items:center;font-family:var(--nylas-font-family);width:400px;background-color:var(--nylas-base-0);color:var(--nylas-base-800);border-radius:var(--nylas-border-radius-2x);padding:1.5rem;position:relative;box-shadow:0px 1px 4px rgba(0, 0, 0, 0.1), 0px 3px 6px rgba(0, 0, 0, 0.06)}@media screen and (max-width: 768px){.nylas-cancelled-event-card{width:inherit}}.nylas-cancelled-event-card__title{font-size:18px;font-weight:600;line-height:24px;color:var(--nylas-base-900);text-align:center}.nylas-cancelled-event-description{font-size:16px;font-weight:500;color:var(--nylas-base-600)}.nylas-cancelled-event-card__calendar-icon{width:3rem;height:3rem;border-radius:50%;position:absolute;top:-1.25rem;left:50%;transform:translateX(-50%);background-color:var(--nylas-base-0);border:1px solid var(--nylas-base-200)}.nylas-cancelled-event-card__cta{width:100%;display:flex;flex-direction:row;align-items:flex-start;margin-top:1rem}calendar-cancel-icon{display:flex;align-items:center;justify-content:center;height:100%}button-component{width:100%}";
|
|
603
638
|
const NylasCancelledEventCardStyle0 = nylasCancelledEventCardCss;
|
|
604
639
|
|
|
605
640
|
var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
@@ -630,6 +665,7 @@ const NylasCancelledEventCard = class {
|
|
|
630
665
|
this.closeCancelEventCardClicked.emit({ errorHandler });
|
|
631
666
|
};
|
|
632
667
|
this.configSettings = undefined;
|
|
668
|
+
this.themeConfig = undefined;
|
|
633
669
|
this.cancelledEventInfo = undefined;
|
|
634
670
|
this.isClosing = false;
|
|
635
671
|
}
|
|
@@ -644,13 +680,22 @@ const NylasCancelledEventCard = class {
|
|
|
644
680
|
if (!this.cancelledEventInfo) {
|
|
645
681
|
console.warn(`[nylas-cancelled-event-card] No cancelled event info provided, "cancelledEventInfo" prop is required.`);
|
|
646
682
|
}
|
|
683
|
+
this.applyThemeConfig(this.themeConfig);
|
|
647
684
|
}
|
|
648
685
|
disconnectedCallback() {
|
|
649
686
|
debug(`[nylas-cancelled-event-card] Component disconnected`);
|
|
650
687
|
}
|
|
688
|
+
applyThemeConfig(themeConfig) {
|
|
689
|
+
if (themeConfig) {
|
|
690
|
+
for (const [key, value] of Object.entries(themeConfig)) {
|
|
691
|
+
this.host.style.setProperty(`${key}`, value);
|
|
692
|
+
}
|
|
693
|
+
}
|
|
694
|
+
}
|
|
651
695
|
render() {
|
|
652
|
-
return (h(Host, { key: '
|
|
696
|
+
return (h(Host, { key: '4f1f7bf3b9d6376f5112b5f71b33bdce9bf59a19', part: "ncec" }, h("div", { key: 'f485f11c84c501c1d56cac844ccc39fe09b758fb', class: "nylas-cancelled-event-card", part: "ncec__card" }, h("div", { key: '3ac26f67a660d1075b3d5f674b745db0c59125a2', class: "nylas-cancelled-event-card__calendar-icon", part: "ncec__icon" }, h("calendar-cancel-icon", { key: '4dc83661715f1525b3a5a45d69e336d7f0f9dbf1' })), h("h3", { key: '59446c3be2e213ca71124be2d33cae8c077b451d', class: "nylas-cancelled-event-card__title", part: "ncec__title" }, instance.t('bookingCancelledTitle'), "!"), h("div", { key: '6486085d435d558816573e6d2aa3840030707af2', class: "nylas-cancelled-event-card__description", part: "ncec__description" }, instance.t('bookingCancelledMessage'), " ", this.configSettings?.organizer?.name || 'the participants', "."), h("div", { key: 'e7ebffeb313b39f860df4776fe802beddc9eb86b', class: "nylas-cancelled-event-card__cta" }, h("button-component", { key: '35593203c58b837db2b7ce98d8cf214658b2e8a0', variant: "basic", disabled: this.isClosing, part: "ncec__button-outline", onClick: this.handleCloseClicked }, this.isClosing ? `${instance.t('closingButton')}...` : `${instance.t('closeButton')}`)))));
|
|
653
697
|
}
|
|
698
|
+
get host() { return getElement(this); }
|
|
654
699
|
};
|
|
655
700
|
__decorate$6([
|
|
656
701
|
RegisterComponent({
|
|
@@ -668,6 +713,7 @@ __decorate$6([
|
|
|
668
713
|
debug('nylas-cancelled-event-card', 'cancelledEventCardError', event.detail);
|
|
669
714
|
},
|
|
670
715
|
},
|
|
716
|
+
localPropsToProp: new Map([['themeConfig', 'themeConfig']]),
|
|
671
717
|
fireRegisterEvent: true,
|
|
672
718
|
}),
|
|
673
719
|
__metadata$6("design:type", Function),
|
|
@@ -676,7 +722,7 @@ __decorate$6([
|
|
|
676
722
|
], NylasCancelledEventCard.prototype, "render", null);
|
|
677
723
|
NylasCancelledEventCard.style = NylasCancelledEventCardStyle0;
|
|
678
724
|
|
|
679
|
-
const nylasConfirmedEventCardCss = ":host{display:block
|
|
725
|
+
const nylasConfirmedEventCardCss = ":host{display:block}.nylas-confirmed-event-card{height:inherit;display:flex;flex-direction:column;justify-content:space-between;align-items:center;font-family:var(--nylas-font-family);width:400px;background-color:var(--nylas-base-0);color:var(--nylas-base-800);border-radius:var(--nylas-border-radius-2x);padding:1.5rem;position:relative;box-shadow:0px 1px 4px rgba(0, 0, 0, 0.1), 0px 3px 6px rgba(0, 0, 0, 0.06)}@media screen and (max-width: 768px){.nylas-confirmed-event-card{width:inherit}}.nylas-confirmed-event-card__title{font-size:18px;font-weight:600;line-height:24px;color:var(--nylas-base-900);text-align:center}.nylas-confirmed-event-description{font-size:16px;font-weight:500;color:var(--nylas-base-600)}.nylas-confirmed-event-card__calendar-icon{width:3rem;height:3rem;border-radius:50%;position:absolute;top:-1.25rem;left:50%;transform:translateX(-50%);background-color:var(--nylas-base-0);border:1px solid var(--nylas-base-200)}.nylas-confirmed-event-card__cta{width:100%;display:flex;flex-direction:row;align-items:flex-start;margin-top:1rem}calendar-cancel-icon{display:flex;align-items:center;justify-content:center;height:100%}button-component{width:100%}";
|
|
680
726
|
const NylasConfirmedEventCardStyle0 = nylasConfirmedEventCardCss;
|
|
681
727
|
|
|
682
728
|
var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
@@ -707,6 +753,7 @@ const NylasConfirmedEventCard = class {
|
|
|
707
753
|
this.closeConfirmEventCardClicked.emit({ errorHandler });
|
|
708
754
|
};
|
|
709
755
|
this.configSettings = undefined;
|
|
756
|
+
this.themeConfig = undefined;
|
|
710
757
|
this.confirmedEventInfo = undefined;
|
|
711
758
|
this.isClosing = false;
|
|
712
759
|
}
|
|
@@ -721,13 +768,22 @@ const NylasConfirmedEventCard = class {
|
|
|
721
768
|
if (!this.confirmedEventInfo) {
|
|
722
769
|
console.warn(`[nylas-confirmed-event-card] No confirmed event info provided, "confirmedEventInfo" prop is required.`);
|
|
723
770
|
}
|
|
771
|
+
this.applyThemeConfig(this.themeConfig);
|
|
724
772
|
}
|
|
725
773
|
disconnectedCallback() {
|
|
726
774
|
debug(`[nylas-confirmed-event-card] Component disconnected`);
|
|
727
775
|
}
|
|
776
|
+
applyThemeConfig(themeConfig) {
|
|
777
|
+
if (themeConfig) {
|
|
778
|
+
for (const [key, value] of Object.entries(themeConfig)) {
|
|
779
|
+
this.host.style.setProperty(`${key}`, value);
|
|
780
|
+
}
|
|
781
|
+
}
|
|
782
|
+
}
|
|
728
783
|
render() {
|
|
729
|
-
return (h(Host, { key: '
|
|
784
|
+
return (h(Host, { key: '089de1c1ba1b2319674b97aad4946fb8306ab4fe', part: "ncec" }, h("div", { key: '83c9b3f7904b7b74d38202c7d62891813754be93', class: "nylas-confirmed-event-card", part: "ncec__card" }, h("div", { key: 'e6ebbc07f8ea697f4e1f794bb8ddddc5166db33d', class: "nylas-confirmed-event-card__calendar-icon", part: "ncec__icon" }, h("calendar-cancel-icon", { key: 'eb0eb353b63bc5a8b55644a17f16c8566f3a7b36' })), h("h3", { key: 'c05937028fd84a55b3b0b1de4cd36fb0b0c6b563', class: "nylas-confirmed-event-card__title", part: "ncec__title" }, instance.t('confirmedEventCardTitle'), "!"), h("div", { key: 'e9ca9f67f46785d40e769ff96695001d56386dad', class: "nylas-confirmed-event-card__description", part: "ncec__description" }, instance.t('confirmedEventCardDescription'), " ", this.configSettings?.organizer?.name || 'the participants', "."), h("div", { key: 'bea8adea56d3dcdb2ce578ad25f08bc562b67ede', class: "nylas-confirmed-event-card__cta" }, h("button-component", { key: '6bed94150369d92e129fe62c4b6c292e37e26a34', variant: "basic", disabled: this.isClosing, part: "ncec__button-outline", onClick: this.handleCloseClicked }, this.isClosing ? `${instance.t('closingButton')}...` : `${instance.t('closeButton')}`)))));
|
|
730
785
|
}
|
|
786
|
+
get host() { return getElement(this); }
|
|
731
787
|
};
|
|
732
788
|
__decorate$5([
|
|
733
789
|
RegisterComponent({
|
|
@@ -742,6 +798,7 @@ __decorate$5([
|
|
|
742
798
|
}
|
|
743
799
|
},
|
|
744
800
|
},
|
|
801
|
+
localPropsToProp: new Map([['themeConfig', 'themeConfig']]),
|
|
745
802
|
fireRegisterEvent: true,
|
|
746
803
|
}),
|
|
747
804
|
__metadata$5("design:type", Function),
|
|
@@ -852,7 +909,7 @@ timeInterval((date) => {
|
|
|
852
909
|
return Math.floor(date / durationDay);
|
|
853
910
|
});
|
|
854
911
|
|
|
855
|
-
const nylasDatePickerCss = ":host{display:block;min-height:444px
|
|
912
|
+
const nylasDatePickerCss = ":host{display:block;min-height:444px}@media screen and (max-width: 768px){:host{min-height:auto}}.nylas-date-picker{display:flex;gap:1rem;flex-direction:column}.header{margin:0 0.5rem;height:48px}.header h2{font-size:1.3125rem;font-weight:400;line-height:1rem;color:var(--nylas-base-800)}.header h2 strong{font-weight:600}.title{margin:0 -1.25rem;display:flex;flex-direction:column;padding:0 1.5rem;gap:0.5rem;border-bottom:1px solid var(--nylas-base-200);font-family:var(--nylas-font-family)}.title h1{margin-bottom:0;font-size:18px;line-height:20px;font-weight:600;display:flex;gap:0.5rem;align-items:center}.title p{margin-top:0;font-size:16px;display:flex;gap:0.5rem;align-items:center}@keyframes pulsate{0%{background-color:var(--nylas-base-50)}50%{background-color:var(--nylas-base-100)}100%{background-color:var(--nylas-base-50)}}.dates{display:grid;justify-items:center;grid-template-columns:repeat(7, 1fr);gap:0.5rem;margin-bottom:24px}.dates .date{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center;height:48px;width:48px;min-width:2rem;min-height:2rem;cursor:pointer;border-radius:var(--nylas-border-radius-2x);font-size:16px;font-weight:600;font-family:inherit;color:var(--nylas-base-text);background-color:var(--nylas-base-100);cursor:pointer;border:none}@media screen and (max-width: 412px){.dates .date{width:38px;height:38px;min-width:none}}.dates .date:hover:not(:disabled){box-shadow:0 0 0 2px var(--nylas-base-500) inset}.dates .date.date.current-month{color:var(--nylas-base-800)}.dates .date.date.selected{background-color:var(--nylas-primary);color:var(--nylas-base-0);font-weight:700}.dates .date.date.day-skeleton{color:var(--nylas-base-300)}.dates .date:disabled{color:var(--nylas-base-300);background-color:transparent;font-weight:400;cursor:not-allowed}.dates .day{font-size:12px;color:var(--nylas-base-800);font-weight:600;letter-spacing:0.5px;height:32px;display:flex;align-items:center}@media screen and (max-width: 768px){.dates .day{font-size:14px}}.dates .date.day-skeleton{height:48px;width:48px;border-radius:var(--nylas-border-radius-2x);animation:pulsate 1.5s infinite ease-in-out;background-color:var(--nylas-base-50)}@media screen and (max-width: 412px){.dates .date.day-skeleton{width:38px;height:38px;min-width:none}}.dates .date.current-day::after{content:\"\";position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background-color:var(--nylas-base-500)}.dates .date.current-day.selected::after{background-color:var(--nylas-base-100)}.pagination{display:flex;flex-direction:row;justify-content:space-between;align-items:center;min-width:92px}.pagination .chevron-right{transform:rotate(180deg)}.pagination .button{display:flex;flex-direction:row;justify-content:center;align-items:center;height:3vh;width:3vh;min-width:3em;min-height:3em;cursor:pointer;border-radius:var(--nylas-border-radius-2x);background-color:transparent;color:var(--nylas-base-800);cursor:pointer;border:none}.pagination .button:hover{background-color:var(--nylas-base-50)}.pagination .button:active{background-color:var(--nylas-base-100)}.pagination .button:disabled{background-color:transparent;color:var(--nylas-base-300);cursor:not-allowed}.flex-row{display:flex;flex-direction:row;justify-content:space-between;align-items:center;color:var(--nylas-base-500)}";
|
|
856
913
|
const NylasDatePickerStyle0 = nylasDatePickerCss;
|
|
857
914
|
|
|
858
915
|
var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
@@ -876,6 +933,7 @@ const NylasDatePicker = class {
|
|
|
876
933
|
this.monthChanged = createEvent(this, "monthChanged", 7);
|
|
877
934
|
this.selectableDates = undefined;
|
|
878
935
|
this.configSettings = undefined;
|
|
936
|
+
this.themeConfig = undefined;
|
|
879
937
|
this.selectedDate = undefined;
|
|
880
938
|
this.selectedLanguage = undefined;
|
|
881
939
|
this.isLoading = undefined;
|
|
@@ -904,6 +962,17 @@ const NylasDatePicker = class {
|
|
|
904
962
|
connectedCallback() { }
|
|
905
963
|
disconnectedCallback() { }
|
|
906
964
|
componentWillLoad() { }
|
|
965
|
+
componentDidLoad() {
|
|
966
|
+
debug(`[nylas-date-picker] Component did load`);
|
|
967
|
+
this.applyThemeConfig(this.themeConfig);
|
|
968
|
+
}
|
|
969
|
+
applyThemeConfig(themeConfig) {
|
|
970
|
+
if (themeConfig) {
|
|
971
|
+
for (const [key, value] of Object.entries(themeConfig)) {
|
|
972
|
+
this.host.style.setProperty(`${key}`, value);
|
|
973
|
+
}
|
|
974
|
+
}
|
|
975
|
+
}
|
|
907
976
|
getDates() {
|
|
908
977
|
const lastDayOfMonth = getLastDayOfMonth(this.month);
|
|
909
978
|
const firstDayOfMonth = getFirstDayOfMonth(this.month);
|
|
@@ -933,7 +1002,7 @@ const NylasDatePicker = class {
|
|
|
933
1002
|
return date && selectableDates?.find(d => isSameDay(d, date)) === undefined;
|
|
934
1003
|
}
|
|
935
1004
|
render() {
|
|
936
|
-
return (h(Host, { key: '
|
|
1005
|
+
return (h(Host, { key: 'ffb13b5ab2b96a23232a0e4fce0166cc4e471bc3', part: "ndp" }, h("div", { key: 'd617e1e85082cda56f123b915460161003fba8ad', class: "nylas-date-picker" }, h("div", { key: '8b966e5cfa60ec08da307e7537170adcfc04944b', class: "title", part: "ndp__title" }, this.configSettings?.name ? (h("h1", null, this.configSettings?.name)) : (this.configSettings?.organizer?.name && (h("h1", null, h("person-icon", null), this.configSettings?.organizer?.name || 'Organizer'))), h("p", { key: 'ec8dd18ff022b61ac574c1a0bb4c94c4bd51b643' }, h("clock-icon", { key: '8c0685800081b17f4b118938b106af1e291ded09' }), this.eventDuration ? convertMinutesToHoursAndMinutes(this.eventDuration) : `- ${instance.t('time.minutes')}`)), h("div", { key: '9c4e5f5aed7d3350f149115236b1be17ee1b77e7', class: 'header flex-row' }, h("h2", { key: 'b30d034da321b0e34e93f41fdeddcd5c6890fc9c', part: 'ndp__month-header' }, h("strong", { key: '2c45a29ba2d99856262c706e626c7dc43b05380b' }, translateMonth(this.month.toLocaleDateString(undefined, { month: 'long' }).toLocaleLowerCase())), "\u00A0", this.month.toLocaleDateString(undefined, { year: 'numeric' })), h("div", { key: 'eb086cc81c029c3f2dc12a5c796f4e20e60fef2e', class: 'pagination' }, h("button", { key: 'aefca223118d1e0c4f908ab325743730a5633d0f', title: "Previous month", onClick: () => this.changeMonth(-1), class: { 'chevron-left': true, 'button': true }, disabled: !this.selectableDates?.length || this.month <= new Date(), part: "ndp__month-button" }, h("chevron-icon", { key: '04e6c8e8dd6fa33805e19a97cc56aff0355bacd1' })), h("button", { key: '912568ecbc76504f9e917042edc7dd41ccfb51fa', title: "Next month", onClick: () => this.changeMonth(1), class: { 'chevron-right': true, 'button': true }, disabled: this.disableNextMonthButton, part: "ndp__month-button" }, h("chevron-icon", { key: '25efda159f4cd761012ee2143690c37cf9247f66' })))), h("div", { key: '4c0d4d94cce9d758e8dd52d4e29ec27f21410772', class: 'dates' }, [
|
|
937
1006
|
instance.t('days.sunday'),
|
|
938
1007
|
instance.t('days.monday'),
|
|
939
1008
|
instance.t('days.tuesday'),
|
|
@@ -959,6 +1028,7 @@ const NylasDatePicker = class {
|
|
|
959
1028
|
}, "aria-lang": date.toLocaleDateString(undefined, { dateStyle: 'full' }), disabled: isDisabled, onClick: () => this.selectDate(date), part: `ndp__date ${this.isSelected(date, this.selectedDate, this.selectableDates) ? 'ndp__date--selected' : ''} ${isSameDay(date, new Date()) ? 'ndp__date--current-day' : ''} ${isSameMonth(date, this.month) ? 'ndp__date--current-month' : ''}` }, date.getDate()));
|
|
960
1029
|
})))));
|
|
961
1030
|
}
|
|
1031
|
+
get host() { return getElement(this); }
|
|
962
1032
|
static get watchers() { return {
|
|
963
1033
|
"configSettings": ["configSettingsChanged"],
|
|
964
1034
|
"selectedLanguage": ["selectedLanguageChanged"]
|
|
@@ -984,6 +1054,7 @@ __decorate$4([
|
|
|
984
1054
|
debug('nylas-date-picker', 'monthChanged', event.detail);
|
|
985
1055
|
},
|
|
986
1056
|
},
|
|
1057
|
+
localPropsToProp: new Map([['themeConfig', 'themeConfig']]),
|
|
987
1058
|
fireRegisterEvent: true,
|
|
988
1059
|
}),
|
|
989
1060
|
__metadata$4("design:type", Function),
|
|
@@ -992,7 +1063,7 @@ __decorate$4([
|
|
|
992
1063
|
], NylasDatePicker.prototype, "render", null);
|
|
993
1064
|
NylasDatePicker.style = NylasDatePickerStyle0;
|
|
994
1065
|
|
|
995
|
-
const nylasLocaleSwitchCss = ":host{display:block
|
|
1066
|
+
const nylasLocaleSwitchCss = ":host{display:block}.nylas-locale-switch{display:flex;flex-direction:row;justify-content:space-between;align-items:center;border-left:none;border-right:none;color:var(--nylas-base-50);font-size:14px;font-weight:600;cursor:pointer;transition:all 0.2s ease-in-out;font-family:inherit}@media screen and (max-width: 768px){.nylas-locale-switch{font-size:16px}}.select-wrapper{display:flex;align-items:center;gap:0.5rem}select{border:none;background:transparent;cursor:pointer;outline:none;background-color:transparent;margin:0 0 1px;padding:4px;vertical-align:middle}select#timezone{width:140px}select#language{width:80px}span.timezone-label{display:flex;width:-webkit-fill-available;justify-content:space-between}select-dropdown{width:auto}select-dropdown::part(sd_dropdown-button){border:none;padding:10px}select-dropdown::part(sd_dropdown-content){max-width:306px}";
|
|
996
1067
|
const NylasLocaleSwitchStyle0 = nylasLocaleSwitchCss;
|
|
997
1068
|
|
|
998
1069
|
var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
@@ -1014,12 +1085,24 @@ const NylasLocaleSwitch = class {
|
|
|
1014
1085
|
registerInstance(this, hostRef);
|
|
1015
1086
|
this.timezoneChanged = createEvent(this, "timezoneChanged", 7);
|
|
1016
1087
|
this.languageChanged = createEvent(this, "languageChanged", 7);
|
|
1088
|
+
this.themeConfig = undefined;
|
|
1017
1089
|
this.selectedTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
|
|
1018
1090
|
this.selectedLanguage = navigator.language;
|
|
1019
1091
|
}
|
|
1020
1092
|
connectedCallback() { }
|
|
1021
1093
|
disconnectedCallback() { }
|
|
1022
1094
|
componentWillLoad() { }
|
|
1095
|
+
componentDidLoad() {
|
|
1096
|
+
debug(`[nylas-locale-switch] Component did load`);
|
|
1097
|
+
this.applyThemeConfig(this.themeConfig);
|
|
1098
|
+
}
|
|
1099
|
+
applyThemeConfig(themeConfig) {
|
|
1100
|
+
if (themeConfig) {
|
|
1101
|
+
for (const [key, value] of Object.entries(themeConfig)) {
|
|
1102
|
+
this.host.style.setProperty(`${key}`, value);
|
|
1103
|
+
}
|
|
1104
|
+
}
|
|
1105
|
+
}
|
|
1023
1106
|
changeTimezone(timezone) {
|
|
1024
1107
|
this.selectedTimezone = timezone;
|
|
1025
1108
|
this.timezoneChanged.emit(timezone);
|
|
@@ -1060,14 +1143,15 @@ const NylasLocaleSwitch = class {
|
|
|
1060
1143
|
label: LANGUAGE_MAP[key],
|
|
1061
1144
|
value: key,
|
|
1062
1145
|
}));
|
|
1063
|
-
return (h(Host, { key: '
|
|
1146
|
+
return (h(Host, { key: 'b964a342758e2cc1194249965483843a2f0fd4e8' }, h("div", { key: '3594ab03d8f88d1e073fc20118f424accaf0edfe', class: "nylas-locale-switch", part: "nls" }, h("div", { key: '33d4ea2773393f7ff9f3c1db27f280f7291e840b', class: {
|
|
1064
1147
|
'select-wrapper': true,
|
|
1065
1148
|
'timezone': true,
|
|
1066
|
-
}, part: "nls__timezone" }, h("select-dropdown", { key: '
|
|
1149
|
+
}, part: "nls__timezone" }, h("select-dropdown", { key: '0b1d65ece722a490eb1dcfc5918e6b88405ec448', name: "timezone", options: timezoneOptions, defaultSelectedOption: timezoneOptions.find(op => op.value == this.selectedTimezone), exportparts: "sd_dropdown: nls__timezone-dropdown, sd_dropdown-button: nls__timezone-drop-button, sd_dropdown-button-selected-label: nls__timezone-drop-button-selected-label, sd_dropdown-content: nls__timezone-drop-content, sd_dropdown_label: nls__timezone-drop-label" }, h("span", { key: '639c77c9556d6fba35369fcdb1defb7992e56204', slot: "select-icon" }, h("globe-icon", { key: 'c6e230b1c1641079f41491a009103ddd2b460dd9', width: "20", height: "20" })))), h("div", { key: '01c9781c4b5f1af16a9bbfa213f13e716eb4fea9', class: {
|
|
1067
1150
|
'select-wrapper': true,
|
|
1068
1151
|
'language': true,
|
|
1069
|
-
}, part: "nls__language" }, h("select-dropdown", { key: '
|
|
1152
|
+
}, part: "nls__language" }, h("select-dropdown", { key: 'fbff35839698dafd06e2cd1b50db27e354c4b9af', name: "language", options: languageOptions, defaultSelectedOption: languageOptions.find(lang => lang.value == this.selectedLanguage), exportparts: "sd_dropdown: nls__language-dropdown, sd_dropdown-button: nls__language-drop-button, sd_dropdown-content: nls__language-drop-content, sd_dropdown_label: nls__language-drop-label" }, h("span", { key: '34ac931dac3ef169b0a6cd778a8a4d6566e8d012', slot: "select-icon" }, h("translate-icon", { key: 'd51f2d743bb8ab718f7a7c6b45d62d96fe11f666', width: "20", height: "20" })))))));
|
|
1070
1153
|
}
|
|
1154
|
+
get host() { return getElement(this); }
|
|
1071
1155
|
};
|
|
1072
1156
|
__decorate$3([
|
|
1073
1157
|
RegisterComponent({
|
|
@@ -1086,6 +1170,7 @@ __decorate$3([
|
|
|
1086
1170
|
nylasSchedulerConnector.scheduler.selectLanguage(event.detail);
|
|
1087
1171
|
},
|
|
1088
1172
|
},
|
|
1173
|
+
localPropsToProp: new Map([['themeConfig', 'themeConfig']]),
|
|
1089
1174
|
fireRegisterEvent: true,
|
|
1090
1175
|
}),
|
|
1091
1176
|
__metadata$3("design:type", Function),
|
|
@@ -1186,7 +1271,7 @@ const NylasNotification = class {
|
|
|
1186
1271
|
};
|
|
1187
1272
|
NylasNotification.style = NylasNotificationStyle0;
|
|
1188
1273
|
|
|
1189
|
-
const nylasOrganizerConfirmationCardCss = ":host{display:block
|
|
1274
|
+
const nylasOrganizerConfirmationCardCss = ":host{display:block}.event-card-wrapper{height:inherit;display:flex;flex-direction:column;justify-content:space-between;align-items:center;font-family:var(--nylas-font-family);background-color:var(--nylas-base-0);color:var(--nylas-base-900);border-radius:var(--nylas-border-radius-3x);position:relative;margin-top:1rem;width:424px;box-shadow:0px 1px 4px rgba(0, 0, 0, 0.1), 0px 3px 6px rgba(0, 0, 0, 0.06)}@media screen and (max-width: 768px){.event-card-wrapper{width:100%;border-radius:0px}}.calendar-icon{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:50%;position:absolute;top:-1.25rem;left:50%;transform:translateX(-50%);background-color:var(--nylas-base-0);border:1px solid var(--nylas-base-200);color:var(--nylas-base-700)}.booked-event-header{margin:1.5rem 4rem;overflow-wrap:anywhere;display:flex;align-items:center;flex-direction:column;font-size:1rem;font-weight:400}.booked-event-header h2{color:var(--nylas-base-600);margin-top:1.5rem;margin-bottom:0.25rem;font-size:1.125rem;font-weight:600}.manage-booking-description{border-top:1px solid var(--nylas-base-200)}.manage-booking-description p{font-size:16px;margin:1rem;padding:0.5rem 1rem;font-weight:400;color:var(--nylas-base-800)}.footer{padding:0.5rem;display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;box-sizing:border-box;background-color:var(--nylas-base-25);width:100%;border-radius:0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x)}.footer.no-template-cols{grid-template-columns:1fr}.footer.no-footer{display:none}sp-divider{background-color:var(--nylas-base-200);height:1px}calendar-check-icon{display:flex;align-items:center;justify-content:center;height:100%}button-component{--dot-color:var(--nylas-base-700)}";
|
|
1190
1275
|
const NylasOrganizerConfirmationCardStyle0 = nylasOrganizerConfirmationCardCss;
|
|
1191
1276
|
|
|
1192
1277
|
var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
@@ -1226,6 +1311,7 @@ const NylasOrganizerConfirmationCard = class {
|
|
|
1226
1311
|
};
|
|
1227
1312
|
this.configSettings = undefined;
|
|
1228
1313
|
this.isLoading = undefined;
|
|
1314
|
+
this.themeConfig = undefined;
|
|
1229
1315
|
this.organizerConfirmationBookingId = undefined;
|
|
1230
1316
|
this.selectedLanguage = navigator.language;
|
|
1231
1317
|
this.action = null;
|
|
@@ -1237,12 +1323,20 @@ const NylasOrganizerConfirmationCard = class {
|
|
|
1237
1323
|
}
|
|
1238
1324
|
async componentDidLoad() {
|
|
1239
1325
|
debug(`[nylas-organizer-confirmation-card] Component did load`);
|
|
1326
|
+
this.applyThemeConfig(this.themeConfig);
|
|
1327
|
+
}
|
|
1328
|
+
applyThemeConfig(themeConfig) {
|
|
1329
|
+
if (themeConfig) {
|
|
1330
|
+
for (const [key, value] of Object.entries(themeConfig)) {
|
|
1331
|
+
this.host.style.setProperty(`${key}`, value);
|
|
1332
|
+
}
|
|
1333
|
+
}
|
|
1240
1334
|
}
|
|
1241
1335
|
async resetAction() {
|
|
1242
1336
|
this.action = null;
|
|
1243
1337
|
}
|
|
1244
1338
|
render() {
|
|
1245
|
-
return (h(Host, { key: '
|
|
1339
|
+
return (h(Host, { key: 'd9ca934419385dcf0917c80e70c3efb3d7b18a02', part: "nmcc" }, h("div", { key: 'b5b0a918984758dbf80f3218610537bfbec693e4', class: "event-card-wrapper", part: "nmccc__card" }, h("div", { key: 'cd26edd3af7815576337f88b5a76ee1cc9335ec0', class: "calendar-icon" }, h("calendar-check-icon", { key: '3cf29fd30584c2fac6a4e1eecce9e55b8c4beb55' })), h("div", { key: 'ecc73f4ceff1887502714daa5034b42754ca1f46', class: "booked-event-header" }, h("h2", { key: '2b3233840408bba3fcb29b631e6329148fdeaeaf', slot: "card-title", part: "nmcc__title" }, !!this.organizerConfirmationBookingId && `${instance.t('bookingPendingTitle')}!`)), h("div", { key: '7e85b7a9d30895a2bf319185cb3b5b6856894638', class: "manage-booking-description" }, h("p", { key: '644084700e961abcd2b910dcb0631ebfcfbc2a1c' }, instance.t('bookingPendingnDescription'))), h("div", { key: '67a549c866b7ba2137bed4ab4af2da4a9c989f0b', class: {
|
|
1246
1340
|
'footer': true,
|
|
1247
1341
|
'no-footer': this.configSettings?.scheduler?.hide_cancellation_options && this.configSettings?.scheduler?.hide_rescheduling_options,
|
|
1248
1342
|
'no-template-cols': this.configSettings?.scheduler?.hide_cancellation_options || this.configSettings?.scheduler?.hide_rescheduling_options,
|
|
@@ -1276,6 +1370,7 @@ __decorate$2([
|
|
|
1276
1370
|
await host.resetAction();
|
|
1277
1371
|
},
|
|
1278
1372
|
},
|
|
1373
|
+
localPropsToProp: new Map([['themeConfig', 'themeConfig']]),
|
|
1279
1374
|
fireRegisterEvent: true,
|
|
1280
1375
|
}),
|
|
1281
1376
|
__metadata$2("design:type", Function),
|
|
@@ -1284,7 +1379,7 @@ __decorate$2([
|
|
|
1284
1379
|
], NylasOrganizerConfirmationCard.prototype, "render", null);
|
|
1285
1380
|
NylasOrganizerConfirmationCard.style = NylasOrganizerConfirmationCardStyle0;
|
|
1286
1381
|
|
|
1287
|
-
const nylasSelectedEventCardCss = ":host{
|
|
1382
|
+
const nylasSelectedEventCardCss = ":host{display:block;position:relative;height:inherit;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:var(--nylas-font-family)}.event-card{display:flex;align-items:center;flex-direction:column;width:calc(100% - 3rem);background-color:var(--nylas-base-0);color:var(--nylas-base-800);border-radius:var(--nylas-border-radius-2x);padding:3rem 1.5rem 1.5rem 1.5rem;position:relative;box-shadow:0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)}@media screen and (max-width: 768px){.event-card{margin-bottom:2rem}}.nylas-selected-event-card__date{font-size:min(max(16px, 3vw), 18px);font-weight:600}.nylas-selected-event-card__time{font-size:16px;font-weight:500}.calendar-icon{width:3rem;height:3rem;border-radius:50%;position:absolute;top:-1.25rem;left:50%;transform:translateX(-50%);background-color:var(--nylas-base-0);border:1px solid var(--nylas-base-200)}calendar-icon{display:flex;align-items:center;justify-content:center;height:100%}.event-timezone{display:flex;color:var(--nylas-base-600);margin-bottom:8px;gap:4px;align-items:center}@media screen and (max-width: 768px){.event-timezone{margin-bottom:16px}}";
|
|
1288
1383
|
const NylasSelectedEventCardStyle0 = nylasSelectedEventCardCss;
|
|
1289
1384
|
|
|
1290
1385
|
var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
@@ -1304,6 +1399,7 @@ var __metadata$1 = (undefined && undefined.__metadata) || function (k, v) {
|
|
|
1304
1399
|
const NylasSelectedEventCard = class {
|
|
1305
1400
|
constructor(hostRef) {
|
|
1306
1401
|
registerInstance(this, hostRef);
|
|
1402
|
+
this.themeConfig = undefined;
|
|
1307
1403
|
this.selectedDate = undefined;
|
|
1308
1404
|
this.selectedTimeslot = undefined;
|
|
1309
1405
|
this.selectedTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
|
|
@@ -1324,6 +1420,7 @@ const NylasSelectedEventCard = class {
|
|
|
1324
1420
|
if (!this.selectedTimeslot) {
|
|
1325
1421
|
console.warn('[nylas-selected-event-card] "selectedTimeslot" prop is not provided.');
|
|
1326
1422
|
}
|
|
1423
|
+
this.applyThemeConfig(this.themeConfig);
|
|
1327
1424
|
const timeFormat = new Intl.DateTimeFormat('en-US', {
|
|
1328
1425
|
hour: '2-digit',
|
|
1329
1426
|
minute: '2-digit',
|
|
@@ -1332,11 +1429,19 @@ const NylasSelectedEventCard = class {
|
|
|
1332
1429
|
this.startTime = timeFormat.format(new Date(this.selectedTimeslot?.start_time));
|
|
1333
1430
|
this.endTime = timeFormat.format(new Date(this.selectedTimeslot?.end_time));
|
|
1334
1431
|
}
|
|
1432
|
+
applyThemeConfig(themeConfig) {
|
|
1433
|
+
if (themeConfig) {
|
|
1434
|
+
for (const [key, value] of Object.entries(themeConfig)) {
|
|
1435
|
+
this.host.style.setProperty(`${key}`, value);
|
|
1436
|
+
}
|
|
1437
|
+
}
|
|
1438
|
+
}
|
|
1335
1439
|
render() {
|
|
1336
|
-
return (h(Host, { key: '
|
|
1440
|
+
return (h(Host, { key: 'c4b2a1e10365e172dd1d57516964ead204d7d325', part: "nsec" }, h("div", { key: '9d767e80cdd60e35dc26323e57b32e67b1e45a9d', class: "event-card", part: "nsec__card" }, h("div", { key: '78a16259f9607a95d97b62ece2aebc7807073e43', class: "calendar-icon", part: "nsec__icon" }, h("calendar-icon", { key: '5565b2a4da846fb2e162f773fd06203790487183' })), h("div", { key: 'fea99fd65e43b57f6a4e327d65eeb03c787c6a86', class: "nylas-selected-event-card__date", part: "nsec__date" }, this.selectedDate
|
|
1337
1441
|
? capitalizeFirstLetter(this.selectedDate?.toLocaleDateString(LANGUAGE_CODE_MAP[this.selectedLanguage || navigator.language], { dateStyle: 'full', timeZone: this.selectedTimezone }))
|
|
1338
|
-
: '-'), h("div", { key: '
|
|
1442
|
+
: '-'), h("div", { key: '25a8f9548d85e37266f146482ec151801829cf4a', class: "nylas-selected-event-card__time", part: "nsec__time" }, this.startTime, " - ", this.endTime)), h("div", { key: '669460a8c5f3f764509c35af5b02e4d678d003e3', class: "event-timezone", part: "nsec__timezone" }, h("globe-icon", { key: '4a0ea54690d4b6cf67bacb86bd8c5c17e8d8f473' }), TIMEZONE_MAP[this.selectedTimezone])));
|
|
1339
1443
|
}
|
|
1444
|
+
get host() { return getElement(this); }
|
|
1340
1445
|
};
|
|
1341
1446
|
__decorate$1([
|
|
1342
1447
|
RegisterComponent({
|
|
@@ -1348,6 +1453,7 @@ __decorate$1([
|
|
|
1348
1453
|
['scheduler.selectedLanguage', 'selectedLanguage'],
|
|
1349
1454
|
]),
|
|
1350
1455
|
eventToProps: {},
|
|
1456
|
+
localPropsToProp: new Map([['themeConfig', 'themeConfig']]),
|
|
1351
1457
|
fireRegisterEvent: true,
|
|
1352
1458
|
}),
|
|
1353
1459
|
__metadata$1("design:type", Function),
|
|
@@ -1356,7 +1462,7 @@ __decorate$1([
|
|
|
1356
1462
|
], NylasSelectedEventCard.prototype, "render", null);
|
|
1357
1463
|
NylasSelectedEventCard.style = NylasSelectedEventCardStyle0;
|
|
1358
1464
|
|
|
1359
|
-
const nylasTimeslotPickerCss = ":host{display:block;height:calc(100% - 48px)
|
|
1465
|
+
const nylasTimeslotPickerCss = ":host{display:block;height:calc(100% - 48px)}.time-picker-wrapper{display:flex;flex-direction:column;height:100%}.timeslots{position:relative;display:flex;flex-direction:column;gap:0.75rem;align-items:center;overflow-y:scroll;padding:0.5rem 1.5rem 1.5rem;flex:1}.time{box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:4px 12px;gap:0.5rem;font-size:16px;font-weight:500;font-family:inherit;width:100%;height:48px;color:var(--nylas-base-800);background:var(--nylas-base-0);border:none;outline:1.5px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x);flex:none;order:4;align-self:stretch;flex-grow:0;cursor:pointer}.time:hover,.time:focus{color:var(--nylas-primary);outline-color:var(--nylas-primary)}.time.selected{font-weight:600;color:var(--nylas-primary);outline:2px solid var(--nylas-primary);border-color:transparent;box-shadow:0 0 0 2px var(--nylas-primary)}.empty{text-align:center;padding:0 1.5rem;color:var(--nylas-base-600);font-size:min(max(12px, 2vw), 14px);height:450px;display:flex;align-items:center;justify-content:center}@keyframes pulsate{0%{background-color:var(--nylas-base-50)}50%{background-color:var(--nylas-base-100)}100%{background-color:var(--nylas-base-50)}}.loading{padding:0 1.5rem}.loading .timeslot-skeleton{width:100%;height:4rem;background-color:var(--nylas-base-50);margin-bottom:0.5rem;border-radius:var(--nylas-border-radius-2x);animation:pulsate 1.5s infinite ease-in-out}.footer{width:100%;padding:14px;box-sizing:border-box;border-top:1px solid var(--nylas-base-200)}";
|
|
1360
1466
|
const NylasTimeslotPickerStyle0 = nylasTimeslotPickerCss;
|
|
1361
1467
|
|
|
1362
1468
|
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
@@ -1391,6 +1497,7 @@ const NylasTimeslotPicker = class {
|
|
|
1391
1497
|
};
|
|
1392
1498
|
this.availability = undefined;
|
|
1393
1499
|
this.isLoading = undefined;
|
|
1500
|
+
this.themeConfig = undefined;
|
|
1394
1501
|
this.selectedTimeslot = undefined;
|
|
1395
1502
|
this.selectedTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
|
|
1396
1503
|
this.selectedDate = new Date();
|
|
@@ -1428,6 +1535,14 @@ const NylasTimeslotPicker = class {
|
|
|
1428
1535
|
debug(`[nylas-timeslot-picker] Component did load`);
|
|
1429
1536
|
const availableTimes = this.availability?.filter(timeslot => this.selectedDate && isSameDay(timeslot.start_time, this.selectedDate)).map(timeslot => timeslot);
|
|
1430
1537
|
this.times = availableTimes || [];
|
|
1538
|
+
this.applyThemeConfig(this.themeConfig);
|
|
1539
|
+
}
|
|
1540
|
+
applyThemeConfig(themeConfig) {
|
|
1541
|
+
if (themeConfig) {
|
|
1542
|
+
for (const [key, value] of Object.entries(themeConfig)) {
|
|
1543
|
+
this.host.style.setProperty(`${key}`, value);
|
|
1544
|
+
}
|
|
1545
|
+
}
|
|
1431
1546
|
}
|
|
1432
1547
|
getTimeslotId(date, index) {
|
|
1433
1548
|
return `${date.toLocaleDateString()}-${index}`;
|
|
@@ -1468,6 +1583,7 @@ const NylasTimeslotPicker = class {
|
|
|
1468
1583
|
? this.getTimeSlotLabel(timeslot)
|
|
1469
1584
|
: timeslot.start_time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', timeZone: this.selectedTimezone }))))), this.selectedTimeslot && (h("div", { class: 'footer' }, h("button-component", { variant: 'primary', onClick: (event) => this.handleConfirmedTimeslot(event, this.selectedTimeslot), part: "ntp__button-primary" }, h("slot", { name: "timeslot-picker-cta-label" }, instance.t('nextButton'))))))));
|
|
1470
1585
|
}
|
|
1586
|
+
get host() { return getElement(this); }
|
|
1471
1587
|
static get watchers() { return {
|
|
1472
1588
|
"selectedLanguage": ["selectedLanguageChanged"],
|
|
1473
1589
|
"selectedDate": ["selectedDateChanged"],
|
|
@@ -1497,6 +1613,7 @@ __decorate([
|
|
|
1497
1613
|
}
|
|
1498
1614
|
},
|
|
1499
1615
|
},
|
|
1616
|
+
localPropsToProp: new Map([['themeConfig', 'themeConfig']]),
|
|
1500
1617
|
fireRegisterEvent: true,
|
|
1501
1618
|
}),
|
|
1502
1619
|
__metadata("design:type", Function),
|