@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
|
@@ -7,7 +7,7 @@ const registerComponent = require('./register-component-36aab1cf.js');
|
|
|
7
7
|
const utils = require('./utils-5ebd7cf8.js');
|
|
8
8
|
const constants = require('./constants-b28483d0.js');
|
|
9
9
|
|
|
10
|
-
const nylasBookedEventCardCss = ":host{display:block
|
|
10
|
+
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%}";
|
|
11
11
|
const NylasBookedEventCardStyle0 = nylasBookedEventCardCss;
|
|
12
12
|
|
|
13
13
|
var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
@@ -68,6 +68,7 @@ const NylasBookedEventCard = class {
|
|
|
68
68
|
this.bookingInfo = undefined;
|
|
69
69
|
this.configSettings = undefined;
|
|
70
70
|
this.isLoading = undefined;
|
|
71
|
+
this.themeConfig = undefined;
|
|
71
72
|
this.selectedTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
|
|
72
73
|
this.selectedTimeslot = undefined;
|
|
73
74
|
this.selectedLanguage = navigator.language;
|
|
@@ -87,25 +88,34 @@ const NylasBookedEventCard = class {
|
|
|
87
88
|
if (!this.bookingInfo) {
|
|
88
89
|
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.');
|
|
89
90
|
}
|
|
91
|
+
this.applyThemeConfig(this.themeConfig);
|
|
90
92
|
this.startTime = utils.formatTimezone(this.selectedTimeslot?.start_time, this.selectedTimezone);
|
|
91
93
|
this.endTime = utils.formatTimezone(this.selectedTimeslot?.end_time, this.selectedTimezone);
|
|
92
94
|
}
|
|
95
|
+
applyThemeConfig(themeConfig) {
|
|
96
|
+
if (themeConfig) {
|
|
97
|
+
for (const [key, value] of Object.entries(themeConfig)) {
|
|
98
|
+
this.host.style.setProperty(`${key}`, value);
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
}
|
|
93
102
|
render() {
|
|
94
103
|
const bookingType = this.configSettings?.booking_type;
|
|
95
104
|
const isManualConfirmation = bookingType && bookingType !== 'booking';
|
|
96
|
-
return (index.h(index.Host, { key: '
|
|
105
|
+
return (index.h(index.Host, { key: '448f4b09ce4624c71dbff719acb7a67ecbc913e8', part: "nbec" }, index.h("div", { key: '83186cea10465372dece0a270725407ea74a0e1c', class: "nylas-booked-event-card" }, index.h("div", { key: '26d0cae03f426336f59c9459109d6c55beedb505', class: "booked-event-timezone" }, index.h("globe-icon", { key: '87fe3f6a6c6e8a0aad7c0250358d387b70d6a634' }), constants.TIMEZONE_MAP[this.selectedTimezone]), index.h("div", { key: '9c445dce0c157cb67cb92a7a713e1dada1be47a7', class: "event-card-wrapper", part: "nbec__card" }, index.h("div", { key: '8bcfae606e9f99ba9a268b2dbb19e755143f2842', class: "calendar-icon" }, index.h("calendar-check-icon", { key: '7abab211fd0f1a04a087e2bd15ee112db8616e6a' })), index.h("div", { key: '7c40924ba6736cfc379ed828c5359c1b4e79d98e', class: "booked-event-header" }, index.h("h2", { key: '497f50d74143788b9d9920ba2ad57564abf7844a', slot: "card-title", part: "nbec__title" }, !!this.rescheduleBookingId && !this.isLoading
|
|
97
106
|
? `${utils.instance.t('bookingRescheduled')}`
|
|
98
107
|
: isManualConfirmation && !this.isLoading
|
|
99
108
|
? `${utils.instance.t('bookingSent')}`
|
|
100
|
-
: `${utils.instance.t('bookingConfirmed')}`, "!"), index.h("div", { key: '
|
|
109
|
+
: `${utils.instance.t('bookingConfirmed')}`, "!"), index.h("div", { key: 'efaf8dda6da9da0e3d181ecedd579cb1648beec2', class: "card-description", part: "nbec__description" }, isManualConfirmation ? utils.instance.t('bookingSentDescription') : index.h("span", null, utils.instance.t('bookingConfirmedDescription')))), index.h("div", { key: '4a4566f77af068b139525a13b84fd658fd9b8d02', class: "booking-date-time" }, index.h("checkmark-circle-icon", { key: '8526a636990d6f1bd3631a77fc4c11587bb1c966' }), index.h("h3", { key: 'f2286f630eb03a961276b149b7f556be715c0dc3' }, utils.instance.t('bookingDateAndTimeHeader')), index.h("p", { key: 'ad07de11395666123ccf0022f0da372c9c3f8425' }, this.selectedTimeslot?.start_time
|
|
101
110
|
? utils.capitalizeFirstLetter(new Date(this.selectedTimeslot?.start_time).toLocaleDateString(constants.LANGUAGE_CODE_MAP[this.selectedLanguage], { dateStyle: 'full' }))
|
|
102
|
-
: '-', ' ', index.h("br", { key: '
|
|
111
|
+
: '-', ' ', index.h("br", { key: '70397806f6fbed27a981f23a4ae3c57309fffbbf' }), this.startTime, " - ", this.endTime)), index.h("div", { key: '5fe7e31e10847e8e701dcd192c39350bec71291f', class: "booking-participants" }), !isManualConfirmation && (index.h("div", { class: "button-container" }, index.h("div", { class: {
|
|
103
112
|
'footer': true,
|
|
104
113
|
'no-footer': (this.configSettings?.scheduler?.hide_cancellation_options && this.configSettings?.scheduler?.hide_rescheduling_options) ||
|
|
105
114
|
this.configSettings?.booking_type === 'organizer-confirmation',
|
|
106
115
|
'no-template-cols': this.configSettings?.scheduler?.hide_cancellation_options || this.configSettings?.scheduler?.hide_rescheduling_options,
|
|
107
116
|
} }, !this.configSettings?.scheduler?.hide_cancellation_options && (index.h("button-component", { variant: 'destructive', onClick: this.handleCancelBookingButtonClicked, part: "nbec__button-outline nbec__cancel-cta" }, `${utils.instance.t('cancelBookingButton')}`)), !this.configSettings?.scheduler?.hide_rescheduling_options && (index.h("button-component", { variant: 'basic', onClick: this.handleRescheduleButtonClicked, part: "nbec__button-outline nbec__reschedule-cta" }, `${utils.instance.t('rescheduleBookingButton')}`)))))))));
|
|
108
117
|
}
|
|
118
|
+
get host() { return index.getElement(this); }
|
|
109
119
|
};
|
|
110
120
|
__decorate$9([
|
|
111
121
|
registerComponent.RegisterComponent({
|
|
@@ -137,6 +147,7 @@ __decorate$9([
|
|
|
137
147
|
utils.debug('nylas-booked-event-card', 'cancelBookedEventValidationError', event.detail);
|
|
138
148
|
},
|
|
139
149
|
},
|
|
150
|
+
localPropsToProp: new Map([['themeConfig', 'themeConfig']]),
|
|
140
151
|
fireRegisterEvent: true,
|
|
141
152
|
}),
|
|
142
153
|
__metadata$9("design:type", Function),
|
|
@@ -145,7 +156,7 @@ __decorate$9([
|
|
|
145
156
|
], NylasBookedEventCard.prototype, "render", null);
|
|
146
157
|
NylasBookedEventCard.style = NylasBookedEventCardStyle0;
|
|
147
158
|
|
|
148
|
-
const nylasBookingFormCss = ":host{display:block;height:100
|
|
159
|
+
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%}";
|
|
149
160
|
const NylasBookingFormStyle0 = nylasBookingFormCss;
|
|
150
161
|
|
|
151
162
|
var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
@@ -294,6 +305,7 @@ const NylasBookingForm = class {
|
|
|
294
305
|
this.bookingInfo = undefined;
|
|
295
306
|
this.eventInfo = undefined;
|
|
296
307
|
this.configSettings = undefined;
|
|
308
|
+
this.themeConfig = undefined;
|
|
297
309
|
this.name = '';
|
|
298
310
|
this.email = '';
|
|
299
311
|
this.guestEmails = [];
|
|
@@ -308,10 +320,14 @@ const NylasBookingForm = class {
|
|
|
308
320
|
disconnectedCallback() { }
|
|
309
321
|
componentWillLoad() {
|
|
310
322
|
utils.debug('nylas-booking-form', 'componentWillLoad', this.bookingInfo);
|
|
323
|
+
}
|
|
324
|
+
componentDidLoad() {
|
|
325
|
+
utils.debug('nylas-booking-form', 'componentDidLoad', this.bookingInfo);
|
|
311
326
|
if (this.bookingInfo && this.bookingInfo?.primaryParticipant) {
|
|
312
327
|
this.name = this.bookingInfo.primaryParticipant?.name;
|
|
313
328
|
this.email = this.bookingInfo.primaryParticipant?.email;
|
|
314
329
|
}
|
|
330
|
+
this.applyThemeConfig(this.themeConfig);
|
|
315
331
|
}
|
|
316
332
|
bookingInfoChangedHandler(newValue) {
|
|
317
333
|
if (newValue && newValue.primaryParticipant) {
|
|
@@ -319,6 +335,13 @@ const NylasBookingForm = class {
|
|
|
319
335
|
this.email = newValue.primaryParticipant.email;
|
|
320
336
|
}
|
|
321
337
|
}
|
|
338
|
+
applyThemeConfig(themeConfig) {
|
|
339
|
+
if (themeConfig) {
|
|
340
|
+
for (const [key, value] of Object.entries(themeConfig)) {
|
|
341
|
+
this.host.style.setProperty(`${key}`, value);
|
|
342
|
+
}
|
|
343
|
+
}
|
|
344
|
+
}
|
|
322
345
|
changeName(name) {
|
|
323
346
|
this.isNameValid = true;
|
|
324
347
|
this.validationError.name = '';
|
|
@@ -379,7 +402,7 @@ const NylasBookingForm = class {
|
|
|
379
402
|
this.updateAdditionalFields(event.detail.name, event.detail.value);
|
|
380
403
|
}
|
|
381
404
|
render() {
|
|
382
|
-
return (index.h(index.Host, { key: '
|
|
405
|
+
return (index.h(index.Host, { key: '9a442ac154e4e8ab9d8e8ec08b2005bb9bda476c' }, index.h("form", { key: '63feaa1eb0688e4019e1af96d48a3e71cafe2d3a', onSubmit: e => this.bookButtonClickedHandler(e), noValidate: true }, index.h("div", { key: '95f92c677613fcddd743467c30e6b097a575fa40', class: "nylas-booking-form", part: "nbf" }, index.h("div", { key: 'b37fc60cddc9172fbb65edaf45e77c3d999f6aa4', class: "input-wrapper", part: "nbf__input-wrapper" }, index.h("input-component", { key: '5545f58ce4fc92b0ab185087dfbeb5de6a25aca0', label: utils.instance.t('name'), name: "name", id: "name", defaultValue: this.bookingInfo?.primaryParticipant?.name || this.name, placeholder: utils.instance.t('namePlaceholder'), type: "text", required: true, requiredError: utils.instance.t('fieldRequired', { field: utils.instance.t('name') }), patternError: utils.instance.t('invalidInputFormat', { field: utils.instance.t('name') }), part: "nbf__input-textfield" })), index.h("div", { key: '6ddd5a68d0966e1fa79998d757a47b2df8c2b6e6', class: "input-wrapper", part: "nbf__input-wrapper" }, index.h("input-component", { key: '20a13472d671c968a2f20c79992a04aca4b50f54', label: utils.instance.t('email'), name: "email", id: "email", pattern: emailRegex, defaultValue: this.bookingInfo?.primaryParticipant?.email || this.email, placeholder: utils.instance.t('emailPlaceholder'), type: "email", required: true, requiredError: utils.instance.t('fieldRequired', { field: utils.instance.t('email') }), patternError: utils.instance.t('invalidInputFormat', { field: utils.instance.t('email') }), part: "nbf__input-textfield" })), this.configSettings?.scheduler?.hide_additional_guests !== true && (index.h("div", { class: "input-wrapper", part: "nbf__input-wrapper" }, this.guestEmails.map((email, index$1) => (index.h("div", { class: "input-wrapper button-wrapper" }, index.h("label", { class: {
|
|
383
406
|
error: !!this.guestEmailErrors[index$1],
|
|
384
407
|
} }, utils.instance.t('guestEmail')), index.h("div", { class: "guest-email-input" }, index.h("input", { type: "email", id: `guest-email-${index$1}`, maxLength: 100, class: {
|
|
385
408
|
'guest-email': true,
|
|
@@ -406,7 +429,7 @@ const NylasBookingForm = class {
|
|
|
406
429
|
default:
|
|
407
430
|
return (index.h("div", { class: "input-wrapper", part: "nbf__input-wrapper" }, index.h("input-component", { label: label, name: key, id: key, type: field.type, defaultValue: defaultValue || '', requiredError: utils.instance.t('fieldRequired', { field: label }), required: field.required, part: "nbf__input-textfield" })));
|
|
408
431
|
}
|
|
409
|
-
})), index.h("div", { key: '
|
|
432
|
+
})), index.h("div", { key: '9229b464ad25565982e59b7d01fe5f2204e1d10e', class: "cta" }, index.h("button-component", { key: '877d574a7a39f960c5cddff0f84d3d0454bfc96c', variant: 'basic', class: "back", part: "nbf__button-outline", isLoading: this.backButtonLoading && this.isLoading, onClick: this.handleBackButtonClicked }, index.h("slot", { key: '9436fe8276b9da6baa608695b1d0dceb03c865ae', name: "booking-form-back-label" }, `${utils.instance.t('backButton')}`)), index.h("button-component", { key: '48814874005b24b2f21a8cdbd863194a563f171f', variant: 'primary', isLoading: !this.backButtonLoading && this.isLoading, disabled: this.isLoading, part: "nbf__button-primary", type: "submit" }, index.h("slot", { key: '975aba7f10d24850113f7fcfe1e11abbb15ac401', name: "booking-form-book-label" }, `${utils.instance.t('bookNowButton')}`))))));
|
|
410
433
|
}
|
|
411
434
|
get host() { return index.getElement(this); }
|
|
412
435
|
static get watchers() { return {
|
|
@@ -442,6 +465,7 @@ __decorate$8([
|
|
|
442
465
|
utils.debug('nylas-booking-form', 'bookingFormError', event.detail);
|
|
443
466
|
},
|
|
444
467
|
},
|
|
468
|
+
localPropsToProp: new Map([['themeConfig', 'themeConfig']]),
|
|
445
469
|
fireRegisterEvent: true,
|
|
446
470
|
}),
|
|
447
471
|
__metadata$8("design:type", Function),
|
|
@@ -450,7 +474,7 @@ __decorate$8([
|
|
|
450
474
|
], NylasBookingForm.prototype, "render", null);
|
|
451
475
|
NylasBookingForm.style = NylasBookingFormStyle0;
|
|
452
476
|
|
|
453
|
-
const nylasCancelBookingFormCss = ":host{
|
|
477
|
+
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}";
|
|
454
478
|
const NylasCancelBookingFormStyle0 = nylasCancelBookingFormCss;
|
|
455
479
|
|
|
456
480
|
var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
@@ -517,6 +541,7 @@ const NylasCancelBookingForm = class {
|
|
|
517
541
|
this.configSettings = undefined;
|
|
518
542
|
this.eventInfo = undefined;
|
|
519
543
|
this.isLoading = undefined;
|
|
544
|
+
this.themeConfig = undefined;
|
|
520
545
|
this.cancellationReason = '';
|
|
521
546
|
this.cancellationError = '';
|
|
522
547
|
this.cancellationPolicy = this.configSettings?.scheduler?.cancellation_policy || 'Your current timeslot will become available to others.';
|
|
@@ -535,10 +560,18 @@ const NylasCancelBookingForm = class {
|
|
|
535
560
|
if (!this.cancelBookingId) {
|
|
536
561
|
console.warn(`[nylas-cancel-booking-form] No booking ID provided, "cancelBookingId" prop is required.`);
|
|
537
562
|
}
|
|
563
|
+
this.applyThemeConfig(this.themeConfig);
|
|
538
564
|
}
|
|
539
565
|
disconnectedCallback() {
|
|
540
566
|
utils.debug(`[nylas-cancel-booking-form] Component disconnected`);
|
|
541
567
|
}
|
|
568
|
+
applyThemeConfig(themeConfig) {
|
|
569
|
+
if (themeConfig) {
|
|
570
|
+
for (const [key, value] of Object.entries(themeConfig)) {
|
|
571
|
+
this.host.style.setProperty(`${key}`, value);
|
|
572
|
+
}
|
|
573
|
+
}
|
|
574
|
+
}
|
|
542
575
|
handleNylasFormInputChanged(event) {
|
|
543
576
|
this.triggerValidation.emit({});
|
|
544
577
|
if (event.detail.name === 'cancel-reason') {
|
|
@@ -547,8 +580,9 @@ const NylasCancelBookingForm = class {
|
|
|
547
580
|
}
|
|
548
581
|
}
|
|
549
582
|
render() {
|
|
550
|
-
return (index.h(index.Host, { key: '
|
|
583
|
+
return (index.h(index.Host, { key: '4e09c3c77a5a4a5138366431c50db2731ce08921', part: "ncbf" }, index.h("div", { key: '3cc3f35b457f947d6f368b7857d6529e640800e4', class: "nylas-cancel-booking-form", part: "ncbf__card" }, index.h("div", { key: '41001fcfa02096c97a909c1a2172349d5c77ceba', class: "nylas-cancel-booking-form__calendar-icon", part: "ncbf__icon" }, index.h("calendar-cancel-icon", { key: '328274c7fe7351574cb43565b4ee1d8500d0cdcf' })), index.h("h3", { key: '4a702b5a6b7712336370b82f993a5c36655a4de2', class: "nylas-cancel-booking-form__title", part: "ncbf__title" }, utils.instance.t('cancelBookingTitle')), index.h("div", { key: '3d28b48ce8f84a843cfd96b57340d624e7cc0efc', class: "nylas-cancel-booking-form__description", part: "ncbf__description" }, !this.configSettings?.scheduler?.cancellation_policy ? `${utils.instance.t('cancelBookingMessage')}` : this.cancellationPolicy), index.h("form", { key: 'd1363507571afe0b46f47697830ca603dd206abe', onSubmit: this.handleSubmitCancelBooking }, index.h("textarea-component", { key: '4256de3a9d7b2cf05a45388c9916f9bc38e82b80', id: "cancel-reason", name: "cancel-reason", required: true, label: utils.instance.t('reasonForCancellation'), class: this.cancellationError ? 'error' : '', part: "ncbf__reason-textarea", defaultValue: this.cancellationReason }), index.h("div", { key: 'fc0169e6090700c9ac26db55b6b10f8614bf408e', class: "footer" }, index.h("button-component", { key: 'e348ccaabd354669178d4c5def1ac9c545b8b5ac', variant: 'destructive', class: "cancel", type: "submit", part: "ncbf__button-cta", disabled: this.isLoading }, utils.instance.t('cancelBookingButton')), !!this.eventInfo && (index.h("button-component", { variant: 'basic', class: "back", part: "ncbf__button-outline", onClick: this.handleGoBackClicked }, utils.instance.t('goBackButton'))))))));
|
|
551
584
|
}
|
|
585
|
+
get host() { return index.getElement(this); }
|
|
552
586
|
static get watchers() { return {
|
|
553
587
|
"configSettings": ["configSettingsChangedHandler"]
|
|
554
588
|
}; }
|
|
@@ -595,6 +629,7 @@ __decorate$7([
|
|
|
595
629
|
utils.debug('nylas-cancel-booking-form', 'cancelBookingFormError', event.detail);
|
|
596
630
|
},
|
|
597
631
|
},
|
|
632
|
+
localPropsToProp: new Map([['themeConfig', 'themeConfig']]),
|
|
598
633
|
fireRegisterEvent: true,
|
|
599
634
|
}),
|
|
600
635
|
__metadata$7("design:type", Function),
|
|
@@ -603,7 +638,7 @@ __decorate$7([
|
|
|
603
638
|
], NylasCancelBookingForm.prototype, "render", null);
|
|
604
639
|
NylasCancelBookingForm.style = NylasCancelBookingFormStyle0;
|
|
605
640
|
|
|
606
|
-
const nylasCancelledEventCardCss = ":host{display:block
|
|
641
|
+
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%}";
|
|
607
642
|
const NylasCancelledEventCardStyle0 = nylasCancelledEventCardCss;
|
|
608
643
|
|
|
609
644
|
var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
@@ -634,6 +669,7 @@ const NylasCancelledEventCard = class {
|
|
|
634
669
|
this.closeCancelEventCardClicked.emit({ errorHandler });
|
|
635
670
|
};
|
|
636
671
|
this.configSettings = undefined;
|
|
672
|
+
this.themeConfig = undefined;
|
|
637
673
|
this.cancelledEventInfo = undefined;
|
|
638
674
|
this.isClosing = false;
|
|
639
675
|
}
|
|
@@ -648,13 +684,22 @@ const NylasCancelledEventCard = class {
|
|
|
648
684
|
if (!this.cancelledEventInfo) {
|
|
649
685
|
console.warn(`[nylas-cancelled-event-card] No cancelled event info provided, "cancelledEventInfo" prop is required.`);
|
|
650
686
|
}
|
|
687
|
+
this.applyThemeConfig(this.themeConfig);
|
|
651
688
|
}
|
|
652
689
|
disconnectedCallback() {
|
|
653
690
|
utils.debug(`[nylas-cancelled-event-card] Component disconnected`);
|
|
654
691
|
}
|
|
692
|
+
applyThemeConfig(themeConfig) {
|
|
693
|
+
if (themeConfig) {
|
|
694
|
+
for (const [key, value] of Object.entries(themeConfig)) {
|
|
695
|
+
this.host.style.setProperty(`${key}`, value);
|
|
696
|
+
}
|
|
697
|
+
}
|
|
698
|
+
}
|
|
655
699
|
render() {
|
|
656
|
-
return (index.h(index.Host, { key: '
|
|
700
|
+
return (index.h(index.Host, { key: '4f1f7bf3b9d6376f5112b5f71b33bdce9bf59a19', part: "ncec" }, index.h("div", { key: 'f485f11c84c501c1d56cac844ccc39fe09b758fb', class: "nylas-cancelled-event-card", part: "ncec__card" }, index.h("div", { key: '3ac26f67a660d1075b3d5f674b745db0c59125a2', class: "nylas-cancelled-event-card__calendar-icon", part: "ncec__icon" }, index.h("calendar-cancel-icon", { key: '4dc83661715f1525b3a5a45d69e336d7f0f9dbf1' })), index.h("h3", { key: '59446c3be2e213ca71124be2d33cae8c077b451d', class: "nylas-cancelled-event-card__title", part: "ncec__title" }, utils.instance.t('bookingCancelledTitle'), "!"), index.h("div", { key: '6486085d435d558816573e6d2aa3840030707af2', class: "nylas-cancelled-event-card__description", part: "ncec__description" }, utils.instance.t('bookingCancelledMessage'), " ", this.configSettings?.organizer?.name || 'the participants', "."), index.h("div", { key: 'e7ebffeb313b39f860df4776fe802beddc9eb86b', class: "nylas-cancelled-event-card__cta" }, index.h("button-component", { key: '35593203c58b837db2b7ce98d8cf214658b2e8a0', variant: "basic", disabled: this.isClosing, part: "ncec__button-outline", onClick: this.handleCloseClicked }, this.isClosing ? `${utils.instance.t('closingButton')}...` : `${utils.instance.t('closeButton')}`)))));
|
|
657
701
|
}
|
|
702
|
+
get host() { return index.getElement(this); }
|
|
658
703
|
};
|
|
659
704
|
__decorate$6([
|
|
660
705
|
registerComponent.RegisterComponent({
|
|
@@ -672,6 +717,7 @@ __decorate$6([
|
|
|
672
717
|
utils.debug('nylas-cancelled-event-card', 'cancelledEventCardError', event.detail);
|
|
673
718
|
},
|
|
674
719
|
},
|
|
720
|
+
localPropsToProp: new Map([['themeConfig', 'themeConfig']]),
|
|
675
721
|
fireRegisterEvent: true,
|
|
676
722
|
}),
|
|
677
723
|
__metadata$6("design:type", Function),
|
|
@@ -680,7 +726,7 @@ __decorate$6([
|
|
|
680
726
|
], NylasCancelledEventCard.prototype, "render", null);
|
|
681
727
|
NylasCancelledEventCard.style = NylasCancelledEventCardStyle0;
|
|
682
728
|
|
|
683
|
-
const nylasConfirmedEventCardCss = ":host{display:block
|
|
729
|
+
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%}";
|
|
684
730
|
const NylasConfirmedEventCardStyle0 = nylasConfirmedEventCardCss;
|
|
685
731
|
|
|
686
732
|
var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
@@ -711,6 +757,7 @@ const NylasConfirmedEventCard = class {
|
|
|
711
757
|
this.closeConfirmEventCardClicked.emit({ errorHandler });
|
|
712
758
|
};
|
|
713
759
|
this.configSettings = undefined;
|
|
760
|
+
this.themeConfig = undefined;
|
|
714
761
|
this.confirmedEventInfo = undefined;
|
|
715
762
|
this.isClosing = false;
|
|
716
763
|
}
|
|
@@ -725,13 +772,22 @@ const NylasConfirmedEventCard = class {
|
|
|
725
772
|
if (!this.confirmedEventInfo) {
|
|
726
773
|
console.warn(`[nylas-confirmed-event-card] No confirmed event info provided, "confirmedEventInfo" prop is required.`);
|
|
727
774
|
}
|
|
775
|
+
this.applyThemeConfig(this.themeConfig);
|
|
728
776
|
}
|
|
729
777
|
disconnectedCallback() {
|
|
730
778
|
utils.debug(`[nylas-confirmed-event-card] Component disconnected`);
|
|
731
779
|
}
|
|
780
|
+
applyThemeConfig(themeConfig) {
|
|
781
|
+
if (themeConfig) {
|
|
782
|
+
for (const [key, value] of Object.entries(themeConfig)) {
|
|
783
|
+
this.host.style.setProperty(`${key}`, value);
|
|
784
|
+
}
|
|
785
|
+
}
|
|
786
|
+
}
|
|
732
787
|
render() {
|
|
733
|
-
return (index.h(index.Host, { key: '
|
|
788
|
+
return (index.h(index.Host, { key: '089de1c1ba1b2319674b97aad4946fb8306ab4fe', part: "ncec" }, index.h("div", { key: '83c9b3f7904b7b74d38202c7d62891813754be93', class: "nylas-confirmed-event-card", part: "ncec__card" }, index.h("div", { key: 'e6ebbc07f8ea697f4e1f794bb8ddddc5166db33d', class: "nylas-confirmed-event-card__calendar-icon", part: "ncec__icon" }, index.h("calendar-cancel-icon", { key: 'eb0eb353b63bc5a8b55644a17f16c8566f3a7b36' })), index.h("h3", { key: 'c05937028fd84a55b3b0b1de4cd36fb0b0c6b563', class: "nylas-confirmed-event-card__title", part: "ncec__title" }, utils.instance.t('confirmedEventCardTitle'), "!"), index.h("div", { key: 'e9ca9f67f46785d40e769ff96695001d56386dad', class: "nylas-confirmed-event-card__description", part: "ncec__description" }, utils.instance.t('confirmedEventCardDescription'), " ", this.configSettings?.organizer?.name || 'the participants', "."), index.h("div", { key: 'bea8adea56d3dcdb2ce578ad25f08bc562b67ede', class: "nylas-confirmed-event-card__cta" }, index.h("button-component", { key: '6bed94150369d92e129fe62c4b6c292e37e26a34', variant: "basic", disabled: this.isClosing, part: "ncec__button-outline", onClick: this.handleCloseClicked }, this.isClosing ? `${utils.instance.t('closingButton')}...` : `${utils.instance.t('closeButton')}`)))));
|
|
734
789
|
}
|
|
790
|
+
get host() { return index.getElement(this); }
|
|
735
791
|
};
|
|
736
792
|
__decorate$5([
|
|
737
793
|
registerComponent.RegisterComponent({
|
|
@@ -746,6 +802,7 @@ __decorate$5([
|
|
|
746
802
|
}
|
|
747
803
|
},
|
|
748
804
|
},
|
|
805
|
+
localPropsToProp: new Map([['themeConfig', 'themeConfig']]),
|
|
749
806
|
fireRegisterEvent: true,
|
|
750
807
|
}),
|
|
751
808
|
__metadata$5("design:type", Function),
|
|
@@ -856,7 +913,7 @@ timeInterval((date) => {
|
|
|
856
913
|
return Math.floor(date / durationDay);
|
|
857
914
|
});
|
|
858
915
|
|
|
859
|
-
const nylasDatePickerCss = ":host{display:block;min-height:444px
|
|
916
|
+
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)}";
|
|
860
917
|
const NylasDatePickerStyle0 = nylasDatePickerCss;
|
|
861
918
|
|
|
862
919
|
var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
@@ -880,6 +937,7 @@ const NylasDatePicker = class {
|
|
|
880
937
|
this.monthChanged = index.createEvent(this, "monthChanged", 7);
|
|
881
938
|
this.selectableDates = undefined;
|
|
882
939
|
this.configSettings = undefined;
|
|
940
|
+
this.themeConfig = undefined;
|
|
883
941
|
this.selectedDate = undefined;
|
|
884
942
|
this.selectedLanguage = undefined;
|
|
885
943
|
this.isLoading = undefined;
|
|
@@ -908,6 +966,17 @@ const NylasDatePicker = class {
|
|
|
908
966
|
connectedCallback() { }
|
|
909
967
|
disconnectedCallback() { }
|
|
910
968
|
componentWillLoad() { }
|
|
969
|
+
componentDidLoad() {
|
|
970
|
+
utils.debug(`[nylas-date-picker] Component did load`);
|
|
971
|
+
this.applyThemeConfig(this.themeConfig);
|
|
972
|
+
}
|
|
973
|
+
applyThemeConfig(themeConfig) {
|
|
974
|
+
if (themeConfig) {
|
|
975
|
+
for (const [key, value] of Object.entries(themeConfig)) {
|
|
976
|
+
this.host.style.setProperty(`${key}`, value);
|
|
977
|
+
}
|
|
978
|
+
}
|
|
979
|
+
}
|
|
911
980
|
getDates() {
|
|
912
981
|
const lastDayOfMonth = utils.getLastDayOfMonth(this.month);
|
|
913
982
|
const firstDayOfMonth = utils.getFirstDayOfMonth(this.month);
|
|
@@ -937,7 +1006,7 @@ const NylasDatePicker = class {
|
|
|
937
1006
|
return date && selectableDates?.find(d => utils.isSameDay(d, date)) === undefined;
|
|
938
1007
|
}
|
|
939
1008
|
render() {
|
|
940
|
-
return (index.h(index.Host, { key: '
|
|
1009
|
+
return (index.h(index.Host, { key: 'ffb13b5ab2b96a23232a0e4fce0166cc4e471bc3', part: "ndp" }, index.h("div", { key: 'd617e1e85082cda56f123b915460161003fba8ad', class: "nylas-date-picker" }, index.h("div", { key: '8b966e5cfa60ec08da307e7537170adcfc04944b', class: "title", part: "ndp__title" }, this.configSettings?.name ? (index.h("h1", null, this.configSettings?.name)) : (this.configSettings?.organizer?.name && (index.h("h1", null, index.h("person-icon", null), this.configSettings?.organizer?.name || 'Organizer'))), index.h("p", { key: 'ec8dd18ff022b61ac574c1a0bb4c94c4bd51b643' }, index.h("clock-icon", { key: '8c0685800081b17f4b118938b106af1e291ded09' }), this.eventDuration ? utils.convertMinutesToHoursAndMinutes(this.eventDuration) : `- ${utils.instance.t('time.minutes')}`)), index.h("div", { key: '9c4e5f5aed7d3350f149115236b1be17ee1b77e7', class: 'header flex-row' }, index.h("h2", { key: 'b30d034da321b0e34e93f41fdeddcd5c6890fc9c', part: 'ndp__month-header' }, index.h("strong", { key: '2c45a29ba2d99856262c706e626c7dc43b05380b' }, utils.translateMonth(this.month.toLocaleDateString(undefined, { month: 'long' }).toLocaleLowerCase())), "\u00A0", this.month.toLocaleDateString(undefined, { year: 'numeric' })), index.h("div", { key: 'eb086cc81c029c3f2dc12a5c796f4e20e60fef2e', class: 'pagination' }, index.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" }, index.h("chevron-icon", { key: '04e6c8e8dd6fa33805e19a97cc56aff0355bacd1' })), index.h("button", { key: '912568ecbc76504f9e917042edc7dd41ccfb51fa', title: "Next month", onClick: () => this.changeMonth(1), class: { 'chevron-right': true, 'button': true }, disabled: this.disableNextMonthButton, part: "ndp__month-button" }, index.h("chevron-icon", { key: '25efda159f4cd761012ee2143690c37cf9247f66' })))), index.h("div", { key: '4c0d4d94cce9d758e8dd52d4e29ec27f21410772', class: 'dates' }, [
|
|
941
1010
|
utils.instance.t('days.sunday'),
|
|
942
1011
|
utils.instance.t('days.monday'),
|
|
943
1012
|
utils.instance.t('days.tuesday'),
|
|
@@ -963,6 +1032,7 @@ const NylasDatePicker = class {
|
|
|
963
1032
|
}, "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' : ''} ${utils.isSameDay(date, new Date()) ? 'ndp__date--current-day' : ''} ${utils.isSameMonth(date, this.month) ? 'ndp__date--current-month' : ''}` }, date.getDate()));
|
|
964
1033
|
})))));
|
|
965
1034
|
}
|
|
1035
|
+
get host() { return index.getElement(this); }
|
|
966
1036
|
static get watchers() { return {
|
|
967
1037
|
"configSettings": ["configSettingsChanged"],
|
|
968
1038
|
"selectedLanguage": ["selectedLanguageChanged"]
|
|
@@ -988,6 +1058,7 @@ __decorate$4([
|
|
|
988
1058
|
utils.debug('nylas-date-picker', 'monthChanged', event.detail);
|
|
989
1059
|
},
|
|
990
1060
|
},
|
|
1061
|
+
localPropsToProp: new Map([['themeConfig', 'themeConfig']]),
|
|
991
1062
|
fireRegisterEvent: true,
|
|
992
1063
|
}),
|
|
993
1064
|
__metadata$4("design:type", Function),
|
|
@@ -996,7 +1067,7 @@ __decorate$4([
|
|
|
996
1067
|
], NylasDatePicker.prototype, "render", null);
|
|
997
1068
|
NylasDatePicker.style = NylasDatePickerStyle0;
|
|
998
1069
|
|
|
999
|
-
const nylasLocaleSwitchCss = ":host{display:block
|
|
1070
|
+
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}";
|
|
1000
1071
|
const NylasLocaleSwitchStyle0 = nylasLocaleSwitchCss;
|
|
1001
1072
|
|
|
1002
1073
|
var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
@@ -1018,12 +1089,24 @@ const NylasLocaleSwitch = class {
|
|
|
1018
1089
|
index.registerInstance(this, hostRef);
|
|
1019
1090
|
this.timezoneChanged = index.createEvent(this, "timezoneChanged", 7);
|
|
1020
1091
|
this.languageChanged = index.createEvent(this, "languageChanged", 7);
|
|
1092
|
+
this.themeConfig = undefined;
|
|
1021
1093
|
this.selectedTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
|
|
1022
1094
|
this.selectedLanguage = navigator.language;
|
|
1023
1095
|
}
|
|
1024
1096
|
connectedCallback() { }
|
|
1025
1097
|
disconnectedCallback() { }
|
|
1026
1098
|
componentWillLoad() { }
|
|
1099
|
+
componentDidLoad() {
|
|
1100
|
+
utils.debug(`[nylas-locale-switch] Component did load`);
|
|
1101
|
+
this.applyThemeConfig(this.themeConfig);
|
|
1102
|
+
}
|
|
1103
|
+
applyThemeConfig(themeConfig) {
|
|
1104
|
+
if (themeConfig) {
|
|
1105
|
+
for (const [key, value] of Object.entries(themeConfig)) {
|
|
1106
|
+
this.host.style.setProperty(`${key}`, value);
|
|
1107
|
+
}
|
|
1108
|
+
}
|
|
1109
|
+
}
|
|
1027
1110
|
changeTimezone(timezone) {
|
|
1028
1111
|
this.selectedTimezone = timezone;
|
|
1029
1112
|
this.timezoneChanged.emit(timezone);
|
|
@@ -1064,14 +1147,15 @@ const NylasLocaleSwitch = class {
|
|
|
1064
1147
|
label: constants.LANGUAGE_MAP[key],
|
|
1065
1148
|
value: key,
|
|
1066
1149
|
}));
|
|
1067
|
-
return (index.h(index.Host, { key: '
|
|
1150
|
+
return (index.h(index.Host, { key: 'b964a342758e2cc1194249965483843a2f0fd4e8' }, index.h("div", { key: '3594ab03d8f88d1e073fc20118f424accaf0edfe', class: "nylas-locale-switch", part: "nls" }, index.h("div", { key: '33d4ea2773393f7ff9f3c1db27f280f7291e840b', class: {
|
|
1068
1151
|
'select-wrapper': true,
|
|
1069
1152
|
'timezone': true,
|
|
1070
|
-
}, part: "nls__timezone" }, index.h("select-dropdown", { key: '
|
|
1153
|
+
}, part: "nls__timezone" }, index.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" }, index.h("span", { key: '639c77c9556d6fba35369fcdb1defb7992e56204', slot: "select-icon" }, index.h("globe-icon", { key: 'c6e230b1c1641079f41491a009103ddd2b460dd9', width: "20", height: "20" })))), index.h("div", { key: '01c9781c4b5f1af16a9bbfa213f13e716eb4fea9', class: {
|
|
1071
1154
|
'select-wrapper': true,
|
|
1072
1155
|
'language': true,
|
|
1073
|
-
}, part: "nls__language" }, index.h("select-dropdown", { key: '
|
|
1156
|
+
}, part: "nls__language" }, index.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" }, index.h("span", { key: '34ac931dac3ef169b0a6cd778a8a4d6566e8d012', slot: "select-icon" }, index.h("translate-icon", { key: 'd51f2d743bb8ab718f7a7c6b45d62d96fe11f666', width: "20", height: "20" })))))));
|
|
1074
1157
|
}
|
|
1158
|
+
get host() { return index.getElement(this); }
|
|
1075
1159
|
};
|
|
1076
1160
|
__decorate$3([
|
|
1077
1161
|
registerComponent.RegisterComponent({
|
|
@@ -1090,6 +1174,7 @@ __decorate$3([
|
|
|
1090
1174
|
nylasSchedulerConnector.scheduler.selectLanguage(event.detail);
|
|
1091
1175
|
},
|
|
1092
1176
|
},
|
|
1177
|
+
localPropsToProp: new Map([['themeConfig', 'themeConfig']]),
|
|
1093
1178
|
fireRegisterEvent: true,
|
|
1094
1179
|
}),
|
|
1095
1180
|
__metadata$3("design:type", Function),
|
|
@@ -1190,7 +1275,7 @@ const NylasNotification = class {
|
|
|
1190
1275
|
};
|
|
1191
1276
|
NylasNotification.style = NylasNotificationStyle0;
|
|
1192
1277
|
|
|
1193
|
-
const nylasOrganizerConfirmationCardCss = ":host{display:block
|
|
1278
|
+
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)}";
|
|
1194
1279
|
const NylasOrganizerConfirmationCardStyle0 = nylasOrganizerConfirmationCardCss;
|
|
1195
1280
|
|
|
1196
1281
|
var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
@@ -1230,6 +1315,7 @@ const NylasOrganizerConfirmationCard = class {
|
|
|
1230
1315
|
};
|
|
1231
1316
|
this.configSettings = undefined;
|
|
1232
1317
|
this.isLoading = undefined;
|
|
1318
|
+
this.themeConfig = undefined;
|
|
1233
1319
|
this.organizerConfirmationBookingId = undefined;
|
|
1234
1320
|
this.selectedLanguage = navigator.language;
|
|
1235
1321
|
this.action = null;
|
|
@@ -1241,12 +1327,20 @@ const NylasOrganizerConfirmationCard = class {
|
|
|
1241
1327
|
}
|
|
1242
1328
|
async componentDidLoad() {
|
|
1243
1329
|
utils.debug(`[nylas-organizer-confirmation-card] Component did load`);
|
|
1330
|
+
this.applyThemeConfig(this.themeConfig);
|
|
1331
|
+
}
|
|
1332
|
+
applyThemeConfig(themeConfig) {
|
|
1333
|
+
if (themeConfig) {
|
|
1334
|
+
for (const [key, value] of Object.entries(themeConfig)) {
|
|
1335
|
+
this.host.style.setProperty(`${key}`, value);
|
|
1336
|
+
}
|
|
1337
|
+
}
|
|
1244
1338
|
}
|
|
1245
1339
|
async resetAction() {
|
|
1246
1340
|
this.action = null;
|
|
1247
1341
|
}
|
|
1248
1342
|
render() {
|
|
1249
|
-
return (index.h(index.Host, { key: '
|
|
1343
|
+
return (index.h(index.Host, { key: 'd9ca934419385dcf0917c80e70c3efb3d7b18a02', part: "nmcc" }, index.h("div", { key: 'b5b0a918984758dbf80f3218610537bfbec693e4', class: "event-card-wrapper", part: "nmccc__card" }, index.h("div", { key: 'cd26edd3af7815576337f88b5a76ee1cc9335ec0', class: "calendar-icon" }, index.h("calendar-check-icon", { key: '3cf29fd30584c2fac6a4e1eecce9e55b8c4beb55' })), index.h("div", { key: 'ecc73f4ceff1887502714daa5034b42754ca1f46', class: "booked-event-header" }, index.h("h2", { key: '2b3233840408bba3fcb29b631e6329148fdeaeaf', slot: "card-title", part: "nmcc__title" }, !!this.organizerConfirmationBookingId && `${utils.instance.t('bookingPendingTitle')}!`)), index.h("div", { key: '7e85b7a9d30895a2bf319185cb3b5b6856894638', class: "manage-booking-description" }, index.h("p", { key: '644084700e961abcd2b910dcb0631ebfcfbc2a1c' }, utils.instance.t('bookingPendingnDescription'))), index.h("div", { key: '67a549c866b7ba2137bed4ab4af2da4a9c989f0b', class: {
|
|
1250
1344
|
'footer': true,
|
|
1251
1345
|
'no-footer': this.configSettings?.scheduler?.hide_cancellation_options && this.configSettings?.scheduler?.hide_rescheduling_options,
|
|
1252
1346
|
'no-template-cols': this.configSettings?.scheduler?.hide_cancellation_options || this.configSettings?.scheduler?.hide_rescheduling_options,
|
|
@@ -1280,6 +1374,7 @@ __decorate$2([
|
|
|
1280
1374
|
await host.resetAction();
|
|
1281
1375
|
},
|
|
1282
1376
|
},
|
|
1377
|
+
localPropsToProp: new Map([['themeConfig', 'themeConfig']]),
|
|
1283
1378
|
fireRegisterEvent: true,
|
|
1284
1379
|
}),
|
|
1285
1380
|
__metadata$2("design:type", Function),
|
|
@@ -1288,7 +1383,7 @@ __decorate$2([
|
|
|
1288
1383
|
], NylasOrganizerConfirmationCard.prototype, "render", null);
|
|
1289
1384
|
NylasOrganizerConfirmationCard.style = NylasOrganizerConfirmationCardStyle0;
|
|
1290
1385
|
|
|
1291
|
-
const nylasSelectedEventCardCss = ":host{
|
|
1386
|
+
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}}";
|
|
1292
1387
|
const NylasSelectedEventCardStyle0 = nylasSelectedEventCardCss;
|
|
1293
1388
|
|
|
1294
1389
|
var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
@@ -1308,6 +1403,7 @@ var __metadata$1 = (undefined && undefined.__metadata) || function (k, v) {
|
|
|
1308
1403
|
const NylasSelectedEventCard = class {
|
|
1309
1404
|
constructor(hostRef) {
|
|
1310
1405
|
index.registerInstance(this, hostRef);
|
|
1406
|
+
this.themeConfig = undefined;
|
|
1311
1407
|
this.selectedDate = undefined;
|
|
1312
1408
|
this.selectedTimeslot = undefined;
|
|
1313
1409
|
this.selectedTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
|
|
@@ -1328,6 +1424,7 @@ const NylasSelectedEventCard = class {
|
|
|
1328
1424
|
if (!this.selectedTimeslot) {
|
|
1329
1425
|
console.warn('[nylas-selected-event-card] "selectedTimeslot" prop is not provided.');
|
|
1330
1426
|
}
|
|
1427
|
+
this.applyThemeConfig(this.themeConfig);
|
|
1331
1428
|
const timeFormat = new Intl.DateTimeFormat('en-US', {
|
|
1332
1429
|
hour: '2-digit',
|
|
1333
1430
|
minute: '2-digit',
|
|
@@ -1336,11 +1433,19 @@ const NylasSelectedEventCard = class {
|
|
|
1336
1433
|
this.startTime = timeFormat.format(new Date(this.selectedTimeslot?.start_time));
|
|
1337
1434
|
this.endTime = timeFormat.format(new Date(this.selectedTimeslot?.end_time));
|
|
1338
1435
|
}
|
|
1436
|
+
applyThemeConfig(themeConfig) {
|
|
1437
|
+
if (themeConfig) {
|
|
1438
|
+
for (const [key, value] of Object.entries(themeConfig)) {
|
|
1439
|
+
this.host.style.setProperty(`${key}`, value);
|
|
1440
|
+
}
|
|
1441
|
+
}
|
|
1442
|
+
}
|
|
1339
1443
|
render() {
|
|
1340
|
-
return (index.h(index.Host, { key: '
|
|
1444
|
+
return (index.h(index.Host, { key: 'c4b2a1e10365e172dd1d57516964ead204d7d325', part: "nsec" }, index.h("div", { key: '9d767e80cdd60e35dc26323e57b32e67b1e45a9d', class: "event-card", part: "nsec__card" }, index.h("div", { key: '78a16259f9607a95d97b62ece2aebc7807073e43', class: "calendar-icon", part: "nsec__icon" }, index.h("calendar-icon", { key: '5565b2a4da846fb2e162f773fd06203790487183' })), index.h("div", { key: 'fea99fd65e43b57f6a4e327d65eeb03c787c6a86', class: "nylas-selected-event-card__date", part: "nsec__date" }, this.selectedDate
|
|
1341
1445
|
? utils.capitalizeFirstLetter(this.selectedDate?.toLocaleDateString(constants.LANGUAGE_CODE_MAP[this.selectedLanguage || navigator.language], { dateStyle: 'full', timeZone: this.selectedTimezone }))
|
|
1342
|
-
: '-'), index.h("div", { key: '
|
|
1446
|
+
: '-'), index.h("div", { key: '25a8f9548d85e37266f146482ec151801829cf4a', class: "nylas-selected-event-card__time", part: "nsec__time" }, this.startTime, " - ", this.endTime)), index.h("div", { key: '669460a8c5f3f764509c35af5b02e4d678d003e3', class: "event-timezone", part: "nsec__timezone" }, index.h("globe-icon", { key: '4a0ea54690d4b6cf67bacb86bd8c5c17e8d8f473' }), constants.TIMEZONE_MAP[this.selectedTimezone])));
|
|
1343
1447
|
}
|
|
1448
|
+
get host() { return index.getElement(this); }
|
|
1344
1449
|
};
|
|
1345
1450
|
__decorate$1([
|
|
1346
1451
|
registerComponent.RegisterComponent({
|
|
@@ -1352,6 +1457,7 @@ __decorate$1([
|
|
|
1352
1457
|
['scheduler.selectedLanguage', 'selectedLanguage'],
|
|
1353
1458
|
]),
|
|
1354
1459
|
eventToProps: {},
|
|
1460
|
+
localPropsToProp: new Map([['themeConfig', 'themeConfig']]),
|
|
1355
1461
|
fireRegisterEvent: true,
|
|
1356
1462
|
}),
|
|
1357
1463
|
__metadata$1("design:type", Function),
|
|
@@ -1360,7 +1466,7 @@ __decorate$1([
|
|
|
1360
1466
|
], NylasSelectedEventCard.prototype, "render", null);
|
|
1361
1467
|
NylasSelectedEventCard.style = NylasSelectedEventCardStyle0;
|
|
1362
1468
|
|
|
1363
|
-
const nylasTimeslotPickerCss = ":host{display:block;height:calc(100% - 48px)
|
|
1469
|
+
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)}";
|
|
1364
1470
|
const NylasTimeslotPickerStyle0 = nylasTimeslotPickerCss;
|
|
1365
1471
|
|
|
1366
1472
|
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
@@ -1395,6 +1501,7 @@ const NylasTimeslotPicker = class {
|
|
|
1395
1501
|
};
|
|
1396
1502
|
this.availability = undefined;
|
|
1397
1503
|
this.isLoading = undefined;
|
|
1504
|
+
this.themeConfig = undefined;
|
|
1398
1505
|
this.selectedTimeslot = undefined;
|
|
1399
1506
|
this.selectedTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
|
|
1400
1507
|
this.selectedDate = new Date();
|
|
@@ -1432,6 +1539,14 @@ const NylasTimeslotPicker = class {
|
|
|
1432
1539
|
utils.debug(`[nylas-timeslot-picker] Component did load`);
|
|
1433
1540
|
const availableTimes = this.availability?.filter(timeslot => this.selectedDate && utils.isSameDay(timeslot.start_time, this.selectedDate)).map(timeslot => timeslot);
|
|
1434
1541
|
this.times = availableTimes || [];
|
|
1542
|
+
this.applyThemeConfig(this.themeConfig);
|
|
1543
|
+
}
|
|
1544
|
+
applyThemeConfig(themeConfig) {
|
|
1545
|
+
if (themeConfig) {
|
|
1546
|
+
for (const [key, value] of Object.entries(themeConfig)) {
|
|
1547
|
+
this.host.style.setProperty(`${key}`, value);
|
|
1548
|
+
}
|
|
1549
|
+
}
|
|
1435
1550
|
}
|
|
1436
1551
|
getTimeslotId(date, index) {
|
|
1437
1552
|
return `${date.toLocaleDateString()}-${index}`;
|
|
@@ -1472,6 +1587,7 @@ const NylasTimeslotPicker = class {
|
|
|
1472
1587
|
? this.getTimeSlotLabel(timeslot)
|
|
1473
1588
|
: timeslot.start_time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', timeZone: this.selectedTimezone }))))), this.selectedTimeslot && (index.h("div", { class: 'footer' }, index.h("button-component", { variant: 'primary', onClick: (event) => this.handleConfirmedTimeslot(event, this.selectedTimeslot), part: "ntp__button-primary" }, index.h("slot", { name: "timeslot-picker-cta-label" }, utils.instance.t('nextButton'))))))));
|
|
1474
1589
|
}
|
|
1590
|
+
get host() { return index.getElement(this); }
|
|
1475
1591
|
static get watchers() { return {
|
|
1476
1592
|
"selectedLanguage": ["selectedLanguageChanged"],
|
|
1477
1593
|
"selectedDate": ["selectedDateChanged"],
|
|
@@ -1501,6 +1617,7 @@ __decorate([
|
|
|
1501
1617
|
}
|
|
1502
1618
|
},
|
|
1503
1619
|
},
|
|
1620
|
+
localPropsToProp: new Map([['themeConfig', 'themeConfig']]),
|
|
1504
1621
|
fireRegisterEvent: true,
|
|
1505
1622
|
}),
|
|
1506
1623
|
__metadata("design:type", Function),
|