@nylas/web-elements 1.1.0-canary.15 → 1.1.0-canary.16

package/dist/cjs/nylas-additional-participants.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"nylas-additional-participants.entry.cjs.js","mappings":"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","names":["debug","h","Host","index","RegisterComponent"],"sources":["src/components/scheduler-editor/nylas-additional-participants/nylas-additional-participants.scss?tag=nylas-additional-participants&encapsulation=shadow","src/components/scheduler-editor/nylas-additional-participants/nylas-additional-participants.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  margin: 1rem;\n  @include default-css-variables;\n}\n\n.nylas-additional-participants__title {\n  color: var(--nylas-base-nylas-base-900-aaa, #101323);\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 20px; /* 125% */\n  margin: 0;\n  text-align: left;\n}\n.nylas-additional-participants__subtitle {\n  color: var(--nylas-base-600);\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px; /* 142.857% */\n  margin: 0.25rem 0px 0px;\n  text-align: left;\n}\n.nylas-additional-participants__content {\n  padding: 1rem;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n.nylas-additional-participants__input_group {\n  padding-top: 8px;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  label {\n    display: flex;\n    align-items: center;\n    color: var(--nylas-base-800);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 150%;\n  }\n}\n.nylas-additional-participants__input_wrapper {\n  display: flex;\n  border-width: 1;\n  border-radius: 8px;\n  border: 1px solid var(--nylas-base-300);\n  button {\n    padding: 12px;\n    border: none;\n    background: none;\n    cursor: pointer;\n    &:hover,\n    &:active {\n      color: var(--nylas-primary);\n    }\n  }\n}\n.nylas-additional-participants__input_wrapper_organizer {\n  background: var(--nylas-base-50);\n}\n\n.nylas-additional-participants__input {\n  flex: 1;\n  padding: 12px 16px;\n  border-right: 1px solid var(--nylas-base-300);\n  input {\n    border: none;\n    outline: none;\n    background: none;\n    width: 100%;\n  }\n}\n\n.nylas-additional-participants__add {\n  padding: 12px;\n  display: flex;\n  align-items: center;\n  border: none;\n  background: none;\n  cursor: pointer;\n  span {\n    padding: 0 8px;\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 500;\n  }\n  &:hover,\n  &:active {\n    color: var(--nylas-primary);\n  }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, Prop, State, Watch, h, Element } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\ntype Participant = {\n  name?: string;\n  email: string;\n  is_valid?: boolean;\n  is_organizer: boolean;\n  availability?: Availability;\n  booking?: Booking;\n};\ntype Availability = {\n  calendar_ids: string[];\n};\ntype Booking = {\n  calendar_id: string;\n};\n\n/**\n * The `nylas-additional-participants` component is a form input for adding additional participants to an event.\n *\n * @part nap__title - The title of the component.\n * @part nap__subtitle - The subtitle of the component.\n * @part nap__content - The content of the component.\n * @part nap__input_group - The input group of the component.\n * @part nap__input_wrapper - The input wrapper of the component.\n * @part nap__input - The input of the component.\n * @part nap__remove-participant - The remove participant button of the component.\n * @part nap__add-participant - The add participant button of the component.\n *\n */\n@Component({\n  tag: 'nylas-additional-participants',\n  styleUrl: 'nylas-additional-participants.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasAdditionalParticipants {\n  @Element() host!: HTMLNylasAdditionalParticipantsElement;\n  @Prop() name: string = 'participants';\n  @Prop() eventParticipants?: Participant[];\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-additional-participants', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @State() participants: Participant[] = this.eventParticipants ?? [];\n  @State() participantsValid: boolean = true;\n  connectedCallback() {\n    debug('nylas-additional-participants', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-additional-participants', 'componentWillLoad');\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-additional-participants', 'componentDidLoad');\n    this.internals.setFormValue(JSON.stringify(this.participants), 'participants');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-additional-participants', 'disconnectedCallback');\n  }\n  onParticipantChange(event, index) {\n    debug('nylas-additional-participants', 'onParticipantChange');\n    this.participants[index].email = event.target.value;\n    this.internals.setFormValue(JSON.stringify(this.participants), 'participants');\n  }\n  addParticipant() {\n    debug('nylas-additional-participants', 'addParticipant');\n    this.participants = [...this.participants, { email: '', is_organizer: false, availability: { calendar_ids: ['primary'] } }];\n    this.internals.setFormValue(JSON.stringify(this.participants), 'participants');\n  }\n  removeParticipant(email: string) {\n    debug('nylas-additional-participants', 'addParticipant');\n    this.participants = this.participants.filter(p => p.email !== email);\n    this.internals.setFormValue(JSON.stringify(this.participants), 'participants');\n  }\n  validate(email, index) {\n    debug('nylas-additional-participants', 'validate');\n    const regex = /^(([^<>()\\[\\]\\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\n    const valid = regex.test(String(email).toLowerCase());\n    this.participants[index].is_valid = valid;\n    this.internals.setFormValue(JSON.stringify(this.participants), 'participants');\n  }\n\n  @RegisterComponent<NylasAdditionalParticipants, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-additional-participants',\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <nylas-form-card>\n          <h3 slot=\"header-title\" class=\"nylas-additional-participants__title\" part=\"nap__title\">\n            Additional participants\n          </h3>\n          <p slot=\"header-subtitle\" class=\"nylas-additional-participants__subtitle\" part=\"nap__subtitle\">\n            Add anyone else who would be joining for this event.\n          </p>\n          <div slot=\"content\" class=\"nylas-additional-participants__content\">\n            <div>\n              {this.participants.map((participant, index) => {\n                return (\n                  <div class={'nylas-additional-participants__input_group'} part=\"nap__input_group\">\n                    <label>{participant.is_organizer ? 'Organizer' : `Participant ${index}`}</label>\n                    <div\n                      part=\"nap__input_wrapper\"\n                      class={`nylas-additional-participants__input_wrapper ${participant.is_organizer && 'nylas-additional-participants__input_wrapper_organizer'} ${participant.is_valid === false && 'nylas-additional-participants__input_wrapper_invalid'}`}\n                    >\n                      <div class=\"nylas-additional-participants__input\" part=\"nap__input\">\n                        <input\n                          type=\"text\"\n                          value={participant.email}\n                          onInput={e => {\n                            this.onParticipantChange(e, index);\n                          }}\n                          readOnly={participant.is_organizer}\n                          onBlur={() => this.validate(participant.email, index)}\n                        />\n                      </div>\n                      {!participant.is_organizer && (\n                        <button onClick={() => this.removeParticipant(participant.email)} part=\"nap__remove-participant\">\n                          <close-icon />\n                        </button>\n                      )}\n                    </div>\n                  </div>\n                );\n              })}\n            </div>\n            {/* <button class=\"nylas-additional-participants__add\"  part=\"nap__add-participant\" onClick={() => this.addParticipant()}>\n              <add-circle-icon /> <span>Add a participant</span>\n            </button> */}\n          </div>\n        </nylas-form-card>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nylas-additional-participants.entry.cjs.js","mappings":"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","names":["debug","h","Host","index","RegisterComponent"],"sources":["src/components/scheduler-editor/nylas-additional-participants/nylas-additional-participants.scss?tag=nylas-additional-participants&encapsulation=shadow","src/components/scheduler-editor/nylas-additional-participants/nylas-additional-participants.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  margin: 1rem;\n  @include default-css-variables;\n}\n\n.nylas-additional-participants__title {\n  color: var(--nylas-base-nylas-base-900-aaa, #101323);\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 20px; /* 125% */\n  margin: 0;\n  text-align: left;\n}\n.nylas-additional-participants__subtitle {\n  color: var(--nylas-base-600);\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px; /* 142.857% */\n  margin: 0.25rem 0px 0px;\n  text-align: left;\n}\n.nylas-additional-participants__content {\n  padding: 1rem;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n.nylas-additional-participants__input_group {\n  padding-top: 8px;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  label {\n    display: flex;\n    align-items: center;\n    color: var(--nylas-base-800);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 150%;\n  }\n}\n.nylas-additional-participants__input_wrapper {\n  display: flex;\n  border-width: 1;\n  border-radius: 8px;\n  border: 1px solid var(--nylas-base-300);\n  button {\n    padding: 12px;\n    border: none;\n    border-left: 1px solid var(--nylas-base-300);\n    background: none;\n    cursor: pointer;\n    &:hover,\n    &:active {\n      color: var(--nylas-primary);\n    }\n  }\n}\n.nylas-additional-participants__input_wrapper_organizer {\n  background: var(--nylas-base-50);\n}\n\n.nylas-additional-participants__input {\n  flex: 1;\n  display: flex;\n  justify-content: space-between;\n  &.organizer {\n    padding: 12px 16px;\n  }\n  input {\n    border: none;\n    outline: none;\n    background: none;\n    width: 100%;\n  }\n  input-dropdown {\n    width: 100%;\n  }\n  input-dropdown::part(id_dropdown) {\n    width: 100%;\n    height: 100%;\n  }\n  input-dropdown::part(id_dropdown-input) {\n    height: 100%;\n    border-radius: var(--nylas-border-radius-2x);\n    border: none;\n    border-top-right-radius: initial;\n    border-bottom-right-radius: initial;\n    padding-left: 16px;\n  }\n}\n\n.nylas-additional-participants__add {\n  padding: 12px;\n  display: flex;\n  align-items: center;\n  border: none;\n  background: none;\n  cursor: pointer;\n  span {\n    padding: 0 8px;\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 500;\n  }\n  &:hover,\n  &:active {\n    color: var(--nylas-primary);\n  }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, Prop, State, Watch, h, Element, Listen } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\ntype Participant = {\n  name?: string;\n  email: string;\n  is_valid?: boolean;\n  is_organizer: boolean;\n  availability?: Availability;\n  booking?: Booking;\n};\ntype Availability = {\n  calendar_ids: string[];\n};\ntype Booking = {\n  calendar_id: string;\n};\n\n/**\n * The `nylas-additional-participants` component is a form input for adding additional participants to an event.\n *\n * @part nap__title - The title of the component.\n * @part nap__subtitle - The subtitle of the component.\n * @part nap__content - The content of the component.\n * @part nap__input_group - The input group of the component.\n * @part nap__input_wrapper - The input wrapper of the component.\n * @part nap__input - The input of the component.\n * @part nap__remove-participant - The remove participant button of the component.\n * @part nap__add-participant - The add participant button of the component.\n *\n */\n@Component({\n  tag: 'nylas-additional-participants',\n  styleUrl: 'nylas-additional-participants.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasAdditionalParticipants {\n  @Element() host!: HTMLNylasAdditionalParticipantsElement;\n  @Prop() name: string = 'participants';\n  @Prop() eventParticipants?: Participant[];\n  @Prop() participantOptions?: Participant[];\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-additional-participants', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @State() participants: Participant[] = this.eventParticipants ?? [];\n  @State() participantsValid: boolean = true;\n  connectedCallback() {\n    debug('nylas-additional-participants', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-additional-participants', 'componentWillLoad');\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-additional-participants', 'componentDidLoad');\n    this.internals.setFormValue(JSON.stringify(this.participantsWithouOrganizer()), 'participants');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-additional-participants', 'disconnectedCallback');\n  }\n\n  @Listen('inputOptionChanged')\n  onInputOptionChanged(event: CustomEvent<{ value: string; name: string }>) {\n    debug('nylas-additional-participants', 'onInputOptionChanged');\n    const index = event.detail.name;\n    this.participants[index].email = event.detail.value;\n    const participant = this.participantOptions?.find(participant => participant.email === event.detail.value);\n    this.participants[index].name = participant?.name || event.detail.value;\n    this.participants = [...this.participants];\n    this.internals.setFormValue(JSON.stringify(this.participantsWithouOrganizer()), 'participants');\n  }\n  onParticipantChange(event, index) {\n    debug('nylas-additional-participants', 'onParticipantChange');\n    this.participants[index].email = event.target.value;\n    this.internals.setFormValue(JSON.stringify(this.participantsWithouOrganizer()), 'participants');\n  }\n  addParticipant() {\n    debug('nylas-additional-participants', 'addParticipant');\n    this.participants = [...this.participants, { name: '', email: '', is_organizer: false, availability: { calendar_ids: ['primary'] } }];\n    this.internals.setFormValue(JSON.stringify(this.participantsWithouOrganizer()), 'participants');\n  }\n  removeParticipant(index: number) {\n    debug('nylas-additional-participants', 'removeParticipant');\n    this.participants = this.participants.filter((_, i) => i !== index);\n    this.internals.setFormValue(JSON.stringify(this.participantsWithouOrganizer()), 'participants');\n  }\n  validate(email, index) {\n    debug('nylas-additional-participants', 'validate');\n    const regex = /^(([^<>()\\[\\]\\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\n    const valid = regex.test(String(email).toLowerCase());\n    this.participants[index].is_valid = valid;\n    this.internals.setFormValue(JSON.stringify(this.participantsWithouOrganizer()), 'participants');\n  }\n\n  participantsWithouOrganizer() {\n    return this.participants.filter(participant => !participant.is_organizer);\n  }\n\n  // Filter out the participants that are already added\n  getArrayDifference(array1: Participant[], array2: Participant[]) {\n    const filtered = array1.filter(participant1 => !array2.some(participant2 => participant1.email === participant2.email));\n    return filtered.map(participant => {\n      return { value: participant.email, label: participant.email };\n    });\n  }\n\n  @RegisterComponent<NylasAdditionalParticipants, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-additional-participants',\n    stateToProps: new Map([['schedulerConfig.additionalParticipants', 'participantOptions']]),\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <nylas-form-card>\n          <h3 slot=\"header-title\" class=\"nylas-additional-participants__title\" part=\"nap__title\">\n            Additional participants\n          </h3>\n          <p slot=\"header-subtitle\" class=\"nylas-additional-participants__subtitle\" part=\"nap__subtitle\">\n            Add anyone else who would be joining for this event.\n          </p>\n          <div slot=\"content\" class=\"nylas-additional-participants__content\">\n            <div>\n              {this.participants.map((participant, index) => {\n                return (\n                  <div class={'nylas-additional-participants__input_group'} part=\"nap__input_group\">\n                    <label>{participant.is_organizer ? 'Organizer' : `Participant ${index}`}</label>\n                    <div\n                      part=\"nap__input_wrapper\"\n                      class={`nylas-additional-participants__input_wrapper ${participant.is_organizer && 'nylas-additional-participants__input_wrapper_organizer'} ${participant.is_valid === false && 'nylas-additional-participants__input_wrapper_invalid'}`}\n                    >\n                      <div class={{ 'nylas-additional-participants__input': true, 'organizer': participant.is_organizer }} part=\"nap__input\">\n                        {participant.is_organizer ? (\n                          <input\n                            type=\"text\"\n                            value={participant.email}\n                            onInput={e => {\n                              this.onParticipantChange(e, index);\n                            }}\n                            readOnly={participant.is_organizer}\n                            onBlur={() => this.validate(participant.email, index)}\n                          />\n                        ) : (\n                          <input-dropdown name={`${index}`} inputValue={participant.email} options={this.getArrayDifference(this.participantOptions || [], this.participants)} />\n                        )}\n                        {!participant.is_organizer && (\n                          <button onClick={() => this.removeParticipant(index)} part=\"nap__remove-participant\">\n                            <close-icon />\n                          </button>\n                        )}\n                      </div>\n                    </div>\n                  </div>\n                );\n              })}\n            </div>\n            <button class=\"nylas-additional-participants__add\" part=\"nap__add-participant\" onClick={() => this.addParticipant()}>\n              <add-circle-icon /> <span>Add {this.participants.length > 1 ? 'another' : 'a'} participant</span>\n            </button>\n          </div>\n        </nylas-form-card>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/nylas-booked-event-card_10.cjs.entry.js

@@ -357,7 +357,7 @@ const NylasBookingForm = class {
         this.updateAdditionalFields(event.detail.label, event.detail.checked ? 'true' : 'false', 'checkbox');
     }
     render() {
-        return (index.h(index.Host, { key: '5a4ca2feb2f89ada6abada8dd3f6dc4909cb3500' }, index.h("form", { key: '1df9fb2f5a519f4e3ed189f9a11623caa86f3dee', onSubmit: e => this.bookButtonClickedHandler(e), noValidate: true }, index.h("div", { key: '86a4548532291a4aec3f004eeeb6edde6064248b', class: "nylas-booking-form" }, index.h("div", { key: '7749795a2086658ef53cbe1e6dfa073b29b8b880', class: "input-wrapper" }, index.h("input-component", { key: 'b2fd6473fa91b144cb2a23d1db9059f7aafce20b', label: "Name", name: "name", id: "name", defaultValue: this.bookingInfo?.primaryParticipant?.name || this.name, placeholder: "Enter your name", type: "text", required: true, part: "nbf__input-textfield" })), index.h("div", { key: 'cf6fca8e8ced455047b555905e5b21ad7307505d', class: "input-wrapper" }, index.h("input-component", { key: '0a5639811623911f7ed59fa12bd45ceb76ae0373', label: "Email", name: "email", id: "email", pattern: emailRegex, defaultValue: this.bookingInfo?.primaryParticipant?.email || this.email, placeholder: "Enter your email", type: "email", required: true, part: "nbf__input-textfield" })), this.configSettings?.scheduler?.additional_guests_hidden !== true && (index.h("div", { class: "input-wrapper" }, this.guestEmails.map((email, index$1) => (index.h("div", { class: "input-wrapper button-wrapper" }, index.h("label", { class: {
+        return (index.h(index.Host, { key: '5a4ca2feb2f89ada6abada8dd3f6dc4909cb3500' }, index.h("form", { key: '1df9fb2f5a519f4e3ed189f9a11623caa86f3dee', onSubmit: e => this.bookButtonClickedHandler(e), noValidate: true }, index.h("div", { key: '86a4548532291a4aec3f004eeeb6edde6064248b', class: "nylas-booking-form" }, index.h("div", { key: '7749795a2086658ef53cbe1e6dfa073b29b8b880', class: "input-wrapper" }, index.h("input-component", { key: 'b2fd6473fa91b144cb2a23d1db9059f7aafce20b', label: "Name", name: "name", id: "name", defaultValue: this.bookingInfo?.primaryParticipant?.name || this.name, placeholder: "Enter your name", type: "text", required: true, part: "nbf__input-textfield" })), index.h("div", { key: 'cf6fca8e8ced455047b555905e5b21ad7307505d', class: "input-wrapper" }, index.h("input-component", { key: '0a5639811623911f7ed59fa12bd45ceb76ae0373', label: "Email", name: "email", id: "email", pattern: emailRegex, defaultValue: this.bookingInfo?.primaryParticipant?.email || this.email, placeholder: "Enter your email", type: "email", required: true, part: "nbf__input-textfield" })), this.configSettings?.scheduler?.hide_additional_guests !== true && (index.h("div", { class: "input-wrapper" }, this.guestEmails.map((email, index$1) => (index.h("div", { class: "input-wrapper button-wrapper" }, index.h("label", { class: {
                 error: !!this.guestEmailErrors[index$1],
             } }, "Guest email"), index.h("div", { class: "guest-email-input" }, index.h("input", { type: "email", id: `guest-email-${index$1}`, maxLength: 100, class: {
                 'guest-email': true,
@@ -365,7 +365,7 @@ const NylasBookingForm = class {
             }, placeholder: "Enter guest email", value: email, "data-index": index$1, part: "nbf__input-textfield", onBlur: (e) => this.handleGuestBlur(index$1, e.target?.value), onInput: (e) => this.handleGuestChange(index$1, e.target?.value) }), index.h("button-component", { variant: "basic", onClick: (e) => this.removeGuestButtonClickHandler(e, index$1), class: {
                 'remove-guest': true,
                 'error': !!this.guestEmailErrors[index$1],
-            } }, index.h("close-icon", null))), index.h("p", { class: "help-text" }, this.guestEmailErrors[index$1])))), index.h("button-component", { class: "add-guest", variant: "invisible", part: "nbf__button-ghost", onClick: e => this.addGuestButtonClickedHandler(e) }, index.h("div", { class: "button-content" }, index.h("add-circle-icon", { slot: "icon" }), "Add ", this.guestEmails.length > 0 ? 'another ' : '', "guest")))), index.h("slot", { key: 'd803e320680a184cf9f88956312f202c353ad8ab', name: "custom-booking-form" })), index.h("div", { key: '133c6d4edc0cce58ad2c3b1c81f1f4db3af62867', class: "cta" }, index.h("sp-button", { key: '7c918d85c91574a13c5554f3e3cfea913860cb33', treatment: "outline", variant: "secondary", class: 'back', part: "nbf__button-outline", onClick: this.handleBackButtonClicked }, index.h("slot", { key: '91e718bf54cb2a9bd6cf387da927888a73608be0', name: "booking-form-back-label" }, "Back")), index.h("sp-button", { key: '8ee30e206049de131bf443413e914027f9e48d3f', variant: "primary", class: 'book', part: "nbf__button-primary", type: "submit" }, this.isLoading && index.h("loading-icon", { slot: "icon" }), index.h("slot", { key: '302f27c0705119d4c20d634c4d94c3569cc18c92', name: "booking-form-book-label" }, "Book now"))))));
+            } }, index.h("close-icon", null))), index.h("p", { class: "help-text" }, this.guestEmailErrors[index$1])))), index.h("button-component", { class: "add-guest", variant: "invisible", part: "nbf__button-ghost", onClick: e => this.addGuestButtonClickedHandler(e) }, index.h("div", { class: "button-content" }, index.h("add-circle-icon", { slot: "icon" }), "Add ", this.guestEmails.length > 0 ? 'another ' : '', "guest")))), index.h("slot", { key: 'd853e1e084cb8c769fa0eb0b1e94b09473f6e670', name: "custom-booking-form" })), index.h("div", { key: '5239eabf55e8be79d1c17b71c6d7f392f563d54d', class: "cta" }, index.h("sp-button", { key: '7b11d64985c876327144ef026934357b37b09cb2', treatment: "outline", variant: "secondary", class: 'back', part: "nbf__button-outline", onClick: this.handleBackButtonClicked }, index.h("slot", { key: '160c368859256544a236a6a010f06eab039dc2ce', name: "booking-form-back-label" }, "Back")), index.h("sp-button", { key: '6f6c79cf9d8bef6178af788e427f62262d873738', variant: "primary", class: 'book', part: "nbf__button-primary", type: "submit" }, this.isLoading && index.h("loading-icon", { slot: "icon" }), index.h("slot", { key: '6fedba0ecc756ceb8941158b6620cdf1df6fe3c0', name: "booking-form-book-label" }, "Book now"))))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {