@nylas/web-elements 1.0.1-prealpha1 → 1.0.2-prealpha1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/cjs/nylas-booked-event-card_10.cjs.entry.js +15 -15
  2. package/dist/components/nylas-booking-form2.js +4 -4
  3. package/dist/esm/nylas-booked-event-card_10.entry.js +15 -15
  4. package/dist/nylas-web-elements/nylas-web-elements.esm.js +1 -1
  5. package/dist/nylas-web-elements/{p-7c4742a2.entry.js → p-24ef9a6e.entry.js} +2 -2
  6. package/dist/nylas-web-elements/{p-7c4742a2.entry.js.map → p-24ef9a6e.entry.js.map} +1 -1
  7. package/package.json +1 -1
  8. package/dist/nylas-web-elements/nylas-booking-form.entry.js +0 -221
  9. package/dist/nylas-web-elements/nylas-booking-form.entry.js.map +0 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nylas/web-elements",
3
- "version": "1.0.1-prealpha1",
3
+ "version": "1.0.2-prealpha1",
4
4
  "description": "Stencil Component Starter",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.js",
package/dist/nylas-web-elements/nylas-booking-form.entry.js DELETED
@@ -1,221 +0,0 @@
1
- import { r as registerInstance, i as createEvent, h, a as Host, e as getElement } from './index-3e9aa664.js';
2
- import { R as RegisterComponent } from './register-component-b2b1826d.js';
3
- import { d as debug } from './utils-c161e4b6.js';
4
-
5
- const nylasBookingFormCss = ":host{display:block;height:100%;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem}sp-theme{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:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:0.5rem;padding:0.5rem;box-sizing:border-box;border-top:1px solid var(--nylas-base-100)}@media screen and (max-width: 768px){.cta{flex-direction:column-reverse}}sp-button{background-color:transparent;color:var(--nylas-base-800);border-radius:var(--nylas-border-radius-2x);--button-width:50%}@media screen and (max-width: 768px){sp-button{--button-width:100%}}sp-button:hover{background-color:var(--nylas-base-100);color:var(--nylas-primary);border-radius:var(--nylas-border-radius-2x)}sp-button:active{background-color:var(--nylas-base-200);color:var(--nylas-base-800)}sp-button.back{width:var(--button-width);background-color:transparent;color:var(--nylas-base-600);border:1px solid var(--nylas-base-300)}sp-button.back:hover{border-color:var(--nylas-primary)}sp-button.back:active{border:2px solid var(--nylas-base-800)}sp-button.book{width:var(--button-width);background-color:var(--nylas-primary);color:var(--nylas-base-0)}sp-button.book:hover{background-color:var(--nylas-base-600)}sp-button.book:active{background-color:var(--nylas-base-800)}.input-wrapper{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-bottom:1rem}.input-wrapper .help-text{margin:0;color:var(--nylas-error)}.button-wrapper{width:100%;align-items:flex-start;height:max-content;position:relative}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: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].error,input[type=email].error{color:var(--nylas-base-25);border-radius:var(--nylas-border-radius-2x);font-weight:600;border-color:var(--nylas-error);border-width:2px}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}";
6
-
7
- var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
8
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
9
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
10
- r = Reflect.decorate(decorators, target, key, desc);
11
- else
12
- for (var i = decorators.length - 1; i >= 0; i--)
13
- if (d = decorators[i])
14
- r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
15
- return c > 3 && r && Object.defineProperty(target, key, r), r;
16
- };
17
- var __metadata = (undefined && undefined.__metadata) || function (k, v) {
18
- if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
19
- return Reflect.metadata(k, v);
20
- };
21
- const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
22
- const NylasBookingForm = class {
23
- constructor(hostRef) {
24
- registerInstance(this, hostRef);
25
- this.nameChanged = createEvent(this, "nameChanged", 7);
26
- this.emailChanged = createEvent(this, "emailChanged", 7);
27
- this.backButtonClicked = createEvent(this, "backButtonClicked", 7);
28
- this.detailsConfirmed = createEvent(this, "detailsConfirmed", 7);
29
- this.bookingFormError = createEvent(this, "bookingFormError", 7);
30
- this.handleGuestChange = (guestIndex, email) => {
31
- this.resetGuestEmailError(guestIndex);
32
- const guests = [...this.guestEmails];
33
- guests[guestIndex] = email;
34
- this.guestEmails = [...guests];
35
- };
36
- this.handleGuestBlur = (guestIndex, email) => {
37
- this.resetGuestEmailError(guestIndex);
38
- if (email === '') {
39
- this.guestEmailErrors[guestIndex] = 'Email is required';
40
- return;
41
- }
42
- if (!emailRegex.test(email)) {
43
- this.guestEmailErrors[guestIndex] = 'Enter a valid email address';
44
- return;
45
- }
46
- this.handleGuestChange(guestIndex, email);
47
- };
48
- this.addGuestButtonClickedHandler = () => {
49
- this.guestEmails = [...this.guestEmails, ''];
50
- };
51
- this.removeGuestButtonClickHandler = (e, guestIndex) => {
52
- e.preventDefault();
53
- this.resetGuestEmailError(guestIndex);
54
- const guests = [...this.guestEmails];
55
- guests.splice(guestIndex, 1);
56
- this.guestEmails = [...guests];
57
- };
58
- this.handleBackButtonClicked = () => {
59
- this.backButtonClicked.emit();
60
- };
61
- this.bookButtonClickedHandler = async (e) => {
62
- e.preventDefault();
63
- debug('nylas-booking-form', 'bookButtonClickedHandler', this.bookingInfo);
64
- const name = this.name || this.bookingInfo?.primaryParticipant?.name;
65
- const email = this.email || this.bookingInfo?.primaryParticipant?.email;
66
- if (!name || name === '') {
67
- this.isNameValid = false;
68
- this.validationError.name = 'Name is required';
69
- this.bookingFormError.emit({
70
- title: 'Booking form error',
71
- description: 'Name is required',
72
- });
73
- return;
74
- }
75
- if (!email || email === '') {
76
- this.isEmailValid = false;
77
- this.validationError.email = 'Email is required';
78
- this.bookingFormError.emit({
79
- title: 'Booking form error',
80
- description: 'Email is required',
81
- });
82
- return;
83
- }
84
- if (!emailRegex.test(email)) {
85
- this.isEmailValid = false;
86
- this.validationError.email = 'Enter a valid email address';
87
- this.bookingFormError.emit({
88
- title: 'Booking form error',
89
- description: 'Invalid email',
90
- });
91
- return;
92
- }
93
- let guests = [];
94
- if (this.guestEmails.length > 0) {
95
- let hasError = false;
96
- this.guestEmails.forEach((email, i) => {
97
- if (email === '') {
98
- hasError = true;
99
- this.guestEmailErrors = { ...this.guestEmailErrors, [i]: 'Email is required' };
100
- }
101
- else if (!emailRegex.test(email)) {
102
- hasError = true;
103
- this.guestEmailErrors = { ...this.guestEmailErrors, [i]: 'Enter a valid email address' };
104
- }
105
- });
106
- if (hasError) {
107
- this.bookingFormError.emit({
108
- title: 'Booking form error',
109
- description: 'Invalid guest email',
110
- });
111
- return;
112
- }
113
- guests = this.guestEmails.map((email) => ({ name: '', email: email.trim() }));
114
- }
115
- else if (this.bookingInfo?.guests) {
116
- guests = this.bookingInfo?.guests;
117
- }
118
- this.detailsConfirmed.emit({
119
- primaryParticipant: {
120
- name: name,
121
- email: email,
122
- },
123
- guests: guests,
124
- additionalFields: {
125
- ...this.bookingInfo?.additionalFields,
126
- },
127
- });
128
- };
129
- this.isLoading = undefined;
130
- this.bookingInfo = undefined;
131
- this.eventInfo = undefined;
132
- this.name = '';
133
- this.email = '';
134
- this.guestEmails = [];
135
- this.guestEmailErrors = {};
136
- this.isNameValid = true;
137
- this.isEmailValid = true;
138
- this.validationError = { name: '', email: '' };
139
- }
140
- connectedCallback() { }
141
- disconnectedCallback() { }
142
- componentWillLoad() {
143
- debug('nylas-booking-form', 'componentWillLoad', this.bookingInfo);
144
- if (this.bookingInfo) {
145
- this.name = this.bookingInfo.primaryParticipant?.name;
146
- this.email = this.bookingInfo.primaryParticipant?.email;
147
- }
148
- }
149
- bookingInfoChangedHandler(newValue) {
150
- if (newValue && newValue.primaryParticipant) {
151
- this.name = newValue.primaryParticipant.name;
152
- this.email = newValue.primaryParticipant.email;
153
- }
154
- }
155
- changeName(name) {
156
- this.isNameValid = true;
157
- this.validationError.name = '';
158
- this.name = name;
159
- this.nameChanged.emit(name);
160
- }
161
- changeEmail(email) {
162
- this.isEmailValid = true;
163
- this.validationError.email = '';
164
- this.email = email;
165
- this.emailChanged.emit(email);
166
- }
167
- resetGuestEmailError(guestIndex) {
168
- const errors = { ...this.guestEmailErrors };
169
- delete errors[guestIndex];
170
- this.guestEmailErrors = { ...errors };
171
- }
172
- render() {
173
- return (h(Host, { key: 'accb0e0ca6d72770f43bd4dddc91317ae377842e' }, h("sp-theme", { key: 'c8a8b61040fc9e61ae38e240c40e2a60fedcbbd3', theme: "spectrum", color: "light", scale: "medium" }, h("form", { key: '8bfd711c7c28326286bbdeafd642506d1f038c2a', onSubmit: e => this.bookButtonClickedHandler(e) }, h("div", { key: '45a6e3fbd01dafd46cc187c7a433d0954f54ea32', class: "nylas-booking-form" }, h("slot", { key: 'c1ade5fd7d10eab36d1722ddd79625859a3c0ed8', name: "custom-booking-form" }, h("div", { key: 'e391b36f83d8c59fca8fc90d3094b60762e4daee', class: "input-wrapper" }, h("label", { key: 'b02e3483d068a748cef1f213ef7968908068d48f', htmlFor: "name", class: { 'input-label': true, 'error': !this.isNameValid }, part: "nbf__input-label" }, "Name ", h("span", { key: '1c4a3b56df434e9fe9997791bae84c407e3ffd3a', class: "required" }, "*")), h("input", { key: '98587ce59db46429cd9ca20d18e3c04cf29542cb', id: "name", type: "text", placeholder: "Enter your name", value: this.name, class: {
174
- input: true,
175
- error: !this.isNameValid,
176
- }, part: "nbf__input-textfield", onInput: (e) => this.changeName(e.target?.value) }), h("p", { key: '30ed260a5f4c82d3e5a79e408da0565a052a19b7', class: "help-text" }, this.validationError.name)), h("div", { key: 'ee4e83a2b9f892babd35867914231e4c3114f128', class: "input-wrapper" }, h("label", { key: 'c864e8e6f0f39ad8c04f8dd571bc67fbdd1c5707', htmlFor: "email", class: { 'input-label': true, 'error': !this.isEmailValid }, part: "nbf__input-label" }, "Email ", h("span", { key: '525a8b6a6a4928fab271e05e63e3950b5d3ff410', class: "required" }, "*")), h("input", { key: '7dd1c428209382c3e7fdb18aa01ba6543d4b7378', id: "email", type: "email", placeholder: "Enter your email", value: this.email, class: {
177
- input: true,
178
- error: !this.isEmailValid,
179
- }, part: "nbf__input-textfield", onInput: (e) => this.changeEmail(e.target?.value) }), h("p", { key: '5c68120426979720bbca5f44c10e9b2728b6197e', class: "help-text" }, this.validationError.email)), h("div", { key: '79a590708500c4909410145db25eb611c679de4c', class: "input-wrapper" }, h("sp-button", { key: 'db1bb472f5897849b0439b809f81b259dbb7ff24', class: "add-guest", variant: "primary", part: "nbf__button-ghost", onClick: this.addGuestButtonClickedHandler }, h("add-circle-icon", { key: '65eb936d4c672e37dd9ce1f8a0508a42bfa7d182', slot: "icon" }), "Add guest"), this.guestEmails.map((email, index) => (h("div", { class: "input-wrapper button-wrapper" }, h("input", { type: "email", id: `guest-email-${index}`, class: {
180
- 'guest-email': true,
181
- 'error': !!this.guestEmailErrors[index],
182
- }, placeholder: "Enter guest email", value: email, "data-index": index, part: "nbf__input-textfield", onBlur: (e) => this.handleGuestBlur(index, e.target?.value), onInput: (e) => this.handleGuestChange(index, e.target?.value) }), h("sp-infield-button", { size: "s", class: {
183
- 'remove-guest': true,
184
- 'error': !!this.guestEmailErrors[index],
185
- }, treatment: "outline", inline: "end", onClick: (e) => this.removeGuestButtonClickHandler(e, index) }, h("sp-icon-cross300", { size: "s" })), h("p", { class: "help-text" }, this.guestEmailErrors[index]))))))), h("div", { key: '126fbb367c9da745fa4a08af4892e807e00ead60', class: "cta" }, h("sp-button", { key: '13c2d5b9f0a537d8bfe5fa534e3239972bb04bf5', treatment: "outline", variant: "secondary", class: 'back', part: "nbf__button-outline", size: "xl", onClick: this.handleBackButtonClicked }, "Back"), h("sp-button", { key: '6b254cddc84a2a5c4e0b8dd51c54ad6d6ade22a4', variant: "primary", class: 'book', part: "nbf__button-primary", type: "submit", size: "xl" }, this.isLoading && h("loading-icon", { slot: "icon" }), "Book now"))))));
186
- }
187
- get host() { return getElement(this); }
188
- static get watchers() { return {
189
- "bookingInfo": ["bookingInfoChangedHandler"]
190
- }; }
191
- };
192
- __decorate([
193
- RegisterComponent({
194
- name: 'nylas-booking-form',
195
- stateToProps: new Map([
196
- ['scheduler.isLoading', 'isLoading'],
197
- ['scheduler.bookingInfo', 'bookingInfo'],
198
- ['scheduler.eventInfo', 'eventInfo'],
199
- ]),
200
- eventToProps: {
201
- backButtonClicked: async (_event, nylasSchedulerConnector) => {
202
- nylasSchedulerConnector.scheduler.toggleAdditionalData(false);
203
- },
204
- nameChanged: async (event, nylasSchedulerConnector) => {
205
- nylasSchedulerConnector.scheduler.setParticipantName(event.detail);
206
- },
207
- emailChanged: async (event, nylasSchedulerConnector) => {
208
- nylasSchedulerConnector.scheduler.setParticipantEmail(event.detail);
209
- },
210
- },
211
- fireRegisterEvent: true,
212
- }),
213
- __metadata("design:type", Function),
214
- __metadata("design:paramtypes", []),
215
- __metadata("design:returntype", void 0)
216
- ], NylasBookingForm.prototype, "render", null);
217
- NylasBookingForm.style = nylasBookingFormCss;
218
-
219
- export { NylasBookingForm as nylas_booking_form };
220
-
221
- //# sourceMappingURL=nylas-booking-form.entry.js.map
package/dist/nylas-web-elements/nylas-booking-form.entry.js.map DELETED
@@ -1 +0,0 @@
1
- {"file":"nylas-booking-form.entry.esm.js","mappings":"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","names":[],"sources":["src/components/scheduler/nylas-booking-form/nylas-booking-form.scss?tag=nylas-booking-form&encapsulation=shadow","src/components/scheduler/nylas-booking-form/nylas-booking-form.tsx"],"sourcesContent":["@import '../../../common/mixins/inputs.scss';\n@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n height: 100%;\n @include default-css-variables;\n}\n\nsp-theme {\n height: 100%;\n}\n\n.nylas-booking-form {\n width: 100%;\n padding: 1.5rem;\n box-sizing: border-box;\n height: 450px;\n overflow-y: auto;\n height: 100%;\n}\n\nform {\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n}\n\nsp-textfield {\n --spectrum-corner-radius-100: var(--nylas-border-radius-2x); // Set guest input radius\n --spectrum-textfield-border-color: var(--nylas-base-300);\n position: relative;\n width: 100%;\n height: 48px;\n margin-bottom: 16px;\n color: var(--nylas-base-500);\n}\n\n.cta {\n width: 100%;\n display: flex;\n flex-direction: row;\n @media #{$mobile} {\n flex-direction: column-reverse;\n }\n align-items: flex-start;\n justify-content: space-between;\n gap: 0.5rem;\n padding: 0.5rem;\n box-sizing: border-box;\n border-top: 1px solid var(--nylas-base-100);\n}\n\nsp-button {\n background-color: transparent;\n color: var(--nylas-base-800);\n border-radius: var(--nylas-border-radius-2x);\n --button-width: 50%;\n @media #{$mobile} {\n --button-width: 100%;\n }\n\n &:hover {\n background-color: var(--nylas-base-100);\n color: var(--nylas-primary);\n border-radius: var(--nylas-border-radius-2x);\n }\n &:active {\n background-color: var(--nylas-base-200);\n color: var(--nylas-base-800);\n }\n\n &.back {\n width: var(--button-width);\n background-color: transparent;\n color: var(--nylas-base-600);\n border: 1px solid var(--nylas-base-300);\n &:hover {\n border-color: var(--nylas-primary);\n }\n &:active {\n border: 2px solid var(--nylas-base-800);\n }\n }\n\n &.book {\n width: var(--button-width);\n background-color: var(--nylas-primary);\n color: var(--nylas-base-0);\n &:hover {\n background-color: var(--nylas-base-600);\n }\n &:active {\n background-color: var(--nylas-base-800);\n }\n }\n}\n\n.input-wrapper {\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 4px;\n margin-bottom: 1rem;\n .help-text {\n margin: 0;\n color: var(--nylas-error);\n }\n}\n\n.button-wrapper {\n width: 100%;\n align-items: flex-start;\n height: max-content;\n position: relative;\n}\n\nsp-infield-button {\n --spectrum-infield-button-background-color: transparent;\n --spectrum-infield-button-background-color-hover: transparent;\n --spectrum-infield-button-background-color-active: transparent;\n --spectrum-infield-button-border-color: transparent;\n --spectrum-infield-button-border-width: 1px;\n --spectrum-infield-button-border-radius: 0;\n color: var(--nylas-base-600);\n background: transparent;\n border: 1px solid var(--nylas-base-300);\n border-radius: 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x) 0;\n height: 52px;\n width: 52px;\n display: flex;\n position: absolute;\n right: 0;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n sp-icon-cross300 {\n color: var(--nylas-base-600);\n }\n &.error {\n border-width: 2px;\n border-color: var(--nylas-error);\n }\n}\n\ninput[type='text'],\ninput[type='email'] {\n @include textfield;\n &.guest-email {\n color: var(--nylas-base-900);\n padding-right: 52px; // Infield button width\n }\n}\n\nlabel {\n @include input-label;\n}\n","import { Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConnector } from '../../..';\nimport type { NylasEvent, NylasSchedulerBookingData } from '../../..';\nimport { NylasScheduler } from '../nylas-scheduler/nylas-scheduler';\nimport { debug } from '@/utils/utils';\nimport { Notification, NylasSchedulerBookingParticipant } from '@nylas/core';\n\nconst emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;\n\n/**\n * The booking form component.\n * @part nbf - The booking form host.\n * @part nbf__input-label - The input label.\n * @part nbf__input-textfield - The input textfield.\n * @part nbf__button-ghost - The ghost button for adding guests.\n * @part nbf__button-primary - The primary button for booking.\n * @part nbf__button-outline - The outline button for canceling.\n * @slot custom-booking-form - The custom booking form.\n */\n@Component({\n tag: 'nylas-booking-form',\n styleUrl: 'nylas-booking-form.scss',\n shadow: true,\n})\nexport class NylasBookingForm {\n /**\n * The host element\n */\n @Element() readonly host!: HTMLElement;\n\n /**\n * The loading state.\n */\n @Prop() readonly isLoading?: boolean;\n\n /**\n * The booking info.\n */\n @Prop() readonly bookingInfo?: NylasSchedulerBookingData;\n\n /**\n * The booked event (Used to track if a booking is created in an eventOverride).\n */\n @Prop() readonly eventInfo?: NylasEvent;\n\n /**\n * This event is fired when the name is changed.\n */\n @Event() nameChanged!: EventEmitter<string>;\n\n /**\n * This event is fired when the email is changed.\n */\n @Event() emailChanged!: EventEmitter<string>;\n\n /**\n * This event is fired when the cancel button is clicked.\n */\n @Event() backButtonClicked!: EventEmitter<boolean>;\n\n /**\n * This event is fired when the book button is clicked.\n */\n @Event() detailsConfirmed!: EventEmitter<NylasSchedulerBookingData>;\n\n /**\n * This event is fired when an error occurs in the booking form.\n */\n @Event() bookingFormError!: EventEmitter<Partial<Notification>>;\n\n /**\n * The name of the user.\n */\n @State() name: string = '';\n\n /**\n * The email address of the user.\n */\n @State() email: string = '';\n\n /**\n * The guests of the user.\n */\n @State() guestEmails: string[] = [];\n\n /**\n * Guest email input errors.\n */\n @State() guestEmailErrors: { [key: number]: string } = {};\n\n /**\n * State to check if name is valid.\n */\n @State() isNameValid: boolean = true;\n\n /**\n * State to check if email is valid.\n */\n @State() isEmailValid: boolean = true;\n\n /**\n * Error message state.\n */\n @State() validationError: { name: string; email: string } = { name: '', email: '' };\n\n connectedCallback() {}\n\n disconnectedCallback() {}\n\n componentWillLoad() {\n debug('nylas-booking-form', 'componentWillLoad', this.bookingInfo);\n if (this.bookingInfo) {\n this.name = this.bookingInfo.primaryParticipant?.name;\n this.email = this.bookingInfo.primaryParticipant?.email;\n }\n }\n\n @Watch('bookingInfo')\n bookingInfoChangedHandler(newValue: NylasSchedulerBookingData | undefined) {\n if (newValue && newValue.primaryParticipant) {\n this.name = newValue.primaryParticipant.name;\n this.email = newValue.primaryParticipant.email;\n }\n }\n\n /**\n * Change the name.\n * @param name The name to select.\n */\n private changeName(name: string) {\n // Reset the validation error\n this.isNameValid = true;\n this.validationError.name = '';\n\n this.name = name;\n this.nameChanged.emit(name);\n }\n\n /**\n * Change the email.\n * @param email The email to select.\n */\n private changeEmail(email: string) {\n // Reset the validation error\n this.isEmailValid = true;\n this.validationError.email = '';\n\n this.email = email;\n this.emailChanged.emit(email);\n }\n\n private resetGuestEmailError(guestIndex: number) {\n const errors = { ...this.guestEmailErrors };\n delete errors[guestIndex];\n this.guestEmailErrors = { ...errors };\n }\n\n /**\n * Handle guest emails changed.\n */\n private handleGuestChange = (guestIndex: number, email: string) => {\n // Reset the validation error\n this.resetGuestEmailError(guestIndex);\n const guests = [...this.guestEmails];\n guests[guestIndex] = email;\n this.guestEmails = [...guests];\n };\n\n /**\n * Handle guest input blur.\n */\n private handleGuestBlur = (guestIndex: number, email: string) => {\n this.resetGuestEmailError(guestIndex);\n\n if (email === '') {\n this.guestEmailErrors[guestIndex] = 'Email is required';\n return;\n }\n if (!emailRegex.test(email)) {\n this.guestEmailErrors[guestIndex] = 'Enter a valid email address';\n return;\n }\n this.handleGuestChange(guestIndex, email);\n };\n\n /**\n * Handle add guest button clicked.\n */\n private addGuestButtonClickedHandler = () => {\n this.guestEmails = [...this.guestEmails, ''];\n };\n\n /**\n * Handle remove guest button clicked.\n */\n private removeGuestButtonClickHandler = (e: Event, guestIndex: number) => {\n e.preventDefault();\n this.resetGuestEmailError(guestIndex);\n\n const guests = [...this.guestEmails];\n guests.splice(guestIndex, 1);\n this.guestEmails = [...guests];\n };\n\n /**\n * Handle back button clicked.\n */\n private handleBackButtonClicked = () => {\n this.backButtonClicked.emit();\n };\n\n /**\n *\n * Handle book button clicked.\n */\n private bookButtonClickedHandler = async (e: Event) => {\n e.preventDefault();\n debug('nylas-booking-form', 'bookButtonClickedHandler', this.bookingInfo);\n const name = this.name || this.bookingInfo?.primaryParticipant?.name;\n const email = this.email || this.bookingInfo?.primaryParticipant?.email;\n\n if (!name || name === '') {\n this.isNameValid = false;\n this.validationError.name = 'Name is required';\n this.bookingFormError.emit({\n title: 'Booking form error',\n description: 'Name is required',\n });\n return;\n }\n if (!email || email === '') {\n this.isEmailValid = false;\n this.validationError.email = 'Email is required';\n this.bookingFormError.emit({\n title: 'Booking form error',\n description: 'Email is required',\n });\n return;\n }\n if (!emailRegex.test(email)) {\n this.isEmailValid = false;\n this.validationError.email = 'Enter a valid email address';\n this.bookingFormError.emit({\n title: 'Booking form error',\n description: 'Invalid email',\n });\n return;\n }\n\n let guests: NylasSchedulerBookingParticipant[] = [];\n if (this.guestEmails.length > 0) {\n let hasError = false;\n this.guestEmails.forEach((email: string, i: number) => {\n if (email === '') {\n hasError = true;\n this.guestEmailErrors = { ...this.guestEmailErrors, [i]: 'Email is required' };\n } else if (!emailRegex.test(email)) {\n hasError = true;\n this.guestEmailErrors = { ...this.guestEmailErrors, [i]: 'Enter a valid email address' };\n }\n });\n if (hasError) {\n this.bookingFormError.emit({\n title: 'Booking form error',\n description: 'Invalid guest email',\n });\n return;\n }\n guests = this.guestEmails.map((email: string) => ({ name: '', email: email.trim() }));\n } else if (this.bookingInfo?.guests) {\n guests = this.bookingInfo?.guests;\n }\n\n this.detailsConfirmed.emit({\n primaryParticipant: {\n name: name,\n email: email,\n },\n guests: guests,\n additionalFields: {\n ...this.bookingInfo?.additionalFields,\n },\n });\n };\n\n @RegisterComponent<NylasBookingForm, NylasSchedulerConnector, Exclude<NylasScheduler['stores'], undefined>>({\n name: 'nylas-booking-form',\n stateToProps: new Map([\n ['scheduler.isLoading', 'isLoading'],\n ['scheduler.bookingInfo', 'bookingInfo'],\n ['scheduler.eventInfo', 'eventInfo'],\n ]),\n eventToProps: {\n backButtonClicked: async (_event: CustomEvent<boolean>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n nylasSchedulerConnector.scheduler.toggleAdditionalData(false);\n },\n nameChanged: async (event: CustomEvent<string>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n nylasSchedulerConnector.scheduler.setParticipantName(event.detail);\n },\n emailChanged: async (event: CustomEvent<string>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n nylasSchedulerConnector.scheduler.setParticipantEmail(event.detail);\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host>\n <sp-theme theme=\"spectrum\" color=\"light\" scale=\"medium\">\n <form onSubmit={e => this.bookButtonClickedHandler(e)}>\n <div class=\"nylas-booking-form\">\n <slot name=\"custom-booking-form\">\n <div class=\"input-wrapper\">\n <label htmlFor=\"name\" class={{ 'input-label': true, 'error': !this.isNameValid }} part=\"nbf__input-label\">\n Name <span class=\"required\">*</span>\n </label>\n <input\n id=\"name\"\n type=\"text\"\n placeholder=\"Enter your name\"\n value={this.name}\n class={{\n input: true,\n error: !this.isNameValid,\n }}\n part=\"nbf__input-textfield\"\n onInput={(e: Event) => this.changeName((e.target as HTMLInputElement)?.value)}\n ></input>\n <p class=\"help-text\">{this.validationError.name}</p>\n </div>\n <div class=\"input-wrapper\">\n <label htmlFor=\"email\" class={{ 'input-label': true, 'error': !this.isEmailValid }} part=\"nbf__input-label\">\n Email <span class=\"required\">*</span>\n </label>\n <input\n id=\"email\"\n type=\"email\"\n placeholder=\"Enter your email\"\n value={this.email}\n class={{\n input: true,\n error: !this.isEmailValid,\n }}\n part=\"nbf__input-textfield\"\n onInput={(e: Event) => this.changeEmail((e.target as HTMLInputElement)?.value)}\n ></input>\n <p class=\"help-text\">{this.validationError.email}</p>\n </div>\n <div class=\"input-wrapper\">\n <sp-button class=\"add-guest\" variant=\"primary\" part=\"nbf__button-ghost\" onClick={this.addGuestButtonClickedHandler}>\n <add-circle-icon slot=\"icon\"></add-circle-icon>\n Add guest\n </sp-button>\n {this.guestEmails.map((email, index) => (\n <div class=\"input-wrapper button-wrapper\">\n <input\n type=\"email\"\n id={`guest-email-${index}`}\n class={{\n 'guest-email': true,\n 'error': !!this.guestEmailErrors[index],\n }}\n placeholder=\"Enter guest email\"\n value={email}\n data-index={index}\n part=\"nbf__input-textfield\"\n onBlur={(e: Event) => this.handleGuestBlur(index, (e.target as HTMLInputElement)?.value)}\n onInput={(e: Event) => this.handleGuestChange(index, (e.target as HTMLInputElement)?.value)}\n ></input>\n <sp-infield-button\n size=\"s\"\n class={{\n 'remove-guest': true,\n 'error': !!this.guestEmailErrors[index],\n }}\n treatment=\"outline\"\n inline=\"end\"\n onClick={(e: Event) => this.removeGuestButtonClickHandler(e, index)}\n >\n <sp-icon-cross300 size=\"s\"></sp-icon-cross300>\n </sp-infield-button>\n <p class=\"help-text\">{this.guestEmailErrors[index]}</p>\n </div>\n ))}\n </div>\n </slot>\n </div>\n <div class=\"cta\">\n <sp-button treatment=\"outline\" variant=\"secondary\" class={'back'} part=\"nbf__button-outline\" size=\"xl\" onClick={this.handleBackButtonClicked}>\n Back\n </sp-button>\n <sp-button variant=\"primary\" class={'book'} part=\"nbf__button-primary\" type=\"submit\" size=\"xl\">\n {this.isLoading && <loading-icon slot=\"icon\"></loading-icon>}\n Book now\n </sp-button>\n </div>\n </form>\n </sp-theme>\n </Host>\n );\n }\n}\n"],"version":3}