@nylas/web-elements 0.0.0-canary-20241008193213 → 0.0.0-canary-20241017103834

package/dist/collection/components/scheduler-editor/nylas-confirmation-email/nylas-confirmation-email.js

@@ -19,9 +19,9 @@ export class NylasConfirmationEmail {
     constructor() {
         this.selectedConfiguration = undefined;
         this.confirmationEmailTemplate = {};
-        this.isOpen = false;
         this.participants = [];
         this.name = 'confirmation-email-template';
+        this.isOpen = false;
         this.confirmationEmail = undefined;
         this.isConfirmationEmailOpen = this.isOpen;
         this.participantsState = this.participants;
@@ -74,8 +74,17 @@ export class NylasConfirmationEmail {
         const { value, name } = event.detail;
         if (name === 'confirmation-email-logo') {
             this.confirmationEmail = { ...this.confirmationEmail, logo: value };
-            this.internals.setFormValue(JSON.stringify(this.confirmationEmail), this.name);
             this.valueChanged.emit({ value: JSON.stringify(this.confirmationEmail), name: this.name });
+            if (typeof this.internals.setValidity === 'function' && typeof this.internals.setFormValue === 'function') {
+                this.internals.setFormValue(JSON.stringify(this.confirmationEmail), this.name);
+                this.internals.setValidity({});
+            }
+        }
+    }
+    async nylasFormInputImageUrlInvalidHandler(event) {
+        const { value, name } = event.detail;
+        if (name === 'confirmation-email-logo' && typeof this.internals.setValidity === 'function') {
+            this.internals.setValidity({ customError: true }, value || 'Invalid image URL.');
         }
     }
     updateConfirmationFormValue() {
@@ -93,8 +102,9 @@ export class NylasConfirmationEmail {
         this.valueChanged.emit({ value: JSON.stringify(this.confirmationEmail), name: this.name });
     }
     render() {
-        const organizerName = this.participantsState.find(p => p.is_organizer)?.name;
-        return (h(Host, { key: '113ee760057ff8f3d2c4706021b529a5cae8fa9b' }, h("div", { key: '43d955f1781f9758066da4d94f336e862b22a5c9', class: "nylas-confirmation-email", part: "nce" }, h("div", { key: '93c74d8fd4ab8e10ad83954c97ef93a201a43e1a', class: "header", part: "nce__header" }, h("div", { key: 'f9cc4b2c2d43d512794df2860a95d07ee77ddb80' }, h("h3", { key: 'd942c04cd5909abf82cfa7d53a7405c0705c4a2a' }, this.confirmationEmail?.booking_confirmed?.title ?? `Booking confirmed with ${organizerName ? ` ${organizerName}` : ''}`), h("p", { key: 'd7ee4208be4934a80e33d1dd8abb09e0ab00c13b' }, "Booking confirmation email")), this.isConfirmationEmailOpen ? (h("div", { class: "confirmation-email-toggle", part: "nce__confirmation-email-toggle--container" }, h("span", { class: `chevron ${this.isConfirmationEmailOpen ? 'open' : 'closed'} `, onClick: () => this.toggleConfirmationEmail() }, h("chevron-icon", { width: "24", height: "24" })))) : (h("button-component", { variant: 'basic', clickHandler: event => {
+        const organizer = this.participantsState.find(p => p.is_organizer);
+        const organizerName = organizer?.name || organizer?.email;
+        return (h(Host, { key: 'bc4803b94f914d083bd33cf4cecd0cac70b0658c' }, h("div", { key: '6445d38b903bffd19b4db004e850f6488ed4c27f', class: "nylas-confirmation-email", part: "nce" }, h("div", { key: '7ce1ccd72ef83717aec42fe0b533902e3a254796', class: "header", part: "nce__header" }, h("div", { key: 'cbceb816c30deebc4e053a7abd1da1c82c171ebe' }, h("h3", { key: '36f5b00d5a98d325341ff06b2bb3ba3cf951e94f' }, this.confirmationEmail?.booking_confirmed?.title ?? `Booking confirmed with ${organizerName ? ` ${organizerName}` : ''}`), h("p", { key: '6f72022d71e5f4e3c03d0f6d07d7f0f5bc0f9686' }, "Booking confirmation email")), this.isConfirmationEmailOpen ? (h("div", { class: "confirmation-email-toggle", part: "nce__confirmation-email-toggle--container" }, h("span", { class: `chevron ${this.isConfirmationEmailOpen ? 'open' : 'closed'} `, onClick: () => this.toggleConfirmationEmail() }, h("chevron-icon", { width: "24", height: "24" })))) : (h("button-component", { variant: 'basic', clickHandler: event => {
                 event.preventDefault();
                 this.toggleConfirmationEmail();
             } }, h("edit-icon", { width: "16", height: "16" }), "Edit"))), this.isConfirmationEmailOpen ? (h("div", { class: "nylas-confirmation-email__body", part: "nce__body" }, h("div", { class: "nylas-confirmation-email__section" }, h("div", { class: "nylas-confirmation-email__row" }, h("label", null, "Send confirmation email", h("span", { class: "label-icon" }, h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, "You and your guests will receive a confirmation email immediately upon booking.")))), h("span", { class: "selected-value" }, "Immediately upon booking")), h("div", { class: "nylas-confirmation-email__row" }, h("div", { class: "subsection" }, h("div", { class: "input-container" }, h("label", null, "Company logo URL", h("span", { class: "label-icon" }, h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, "This logo appears in the booking confirmation email. The URL must be publicly accessible. The image will be scaled down to a max size of 200px x 100px.")))), this.confirmationEmail && (h("input-image-url", { name: "confirmation-email-logo", exportparts: "iiu__logo-input-textfield: nce__input-image-url", imageUrl: this.confirmationEmail?.logo ?? '' }))))), h("div", { class: "nylas-confirmation-email__row full-width-col" }, h("div", { class: "subsection" }, h("h3", null, "Email message"), h("div", { class: "input-container" }, h("label", { htmlFor: "title" }, "Custom email title", h("span", { class: "label-icon" }, h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, "An email title is a headline within the body of the email. This doesn't change the subject line.")))), h("input-component", { name: "confirmation-email-title", maxLength: 60, placeholder: `Booking confirmed ${organizerName ? `with ${organizerName}` : ''}`, defaultValue: this.confirmationEmail?.booking_confirmed?.title ?? '' })), h("div", { class: "input-container" }, h("textarea-component", { label: "Additional info", name: "confirmation-email-body", id: "confirmation-email-body", placeholder: "Default body", tooltip: "Scheduler adds the content of the box to the email body.", maxLength: 500, defaultValue: this.confirmationEmail?.booking_confirmed?.body ?? '' }))))))) : (h("div", { class: "nylas-confirmation-email__summary", part: "nce__summary" }, h("p", null, h("span", { class: "summary-icon" }, h("person-clipboard-icon", null)), "All host & guests"), h("p", null, h("span", { class: "summary-icon" }, h("clock-icon", null)), "Immediately on booking"))))));
@@ -131,8 +141,11 @@ export class NylasConfirmationEmail {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "The selected config"
+                    "tags": [{
+                            "name": "standalone",
+                            "text": "The selected config"
+                        }],
+                    "text": ""
                 }
             },
             "confirmationEmailTemplate": {
@@ -152,29 +165,14 @@ export class NylasConfirmationEmail {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "The confirmation email template data to display"
+                    "tags": [{
+                            "name": "standalone",
+                            "text": "The confirmation email template data to display"
+                        }],
+                    "text": ""
                 },
                 "defaultValue": "{} as EmailTemplate"
             },
-            "isOpen": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Is the confirmation email card open"
-                },
-                "attribute": "is-open",
-                "reflect": false,
-                "defaultValue": "false"
-            },
             "participants": {
                 "type": "unknown",
                 "mutable": false,
@@ -192,8 +190,11 @@ export class NylasConfirmationEmail {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "List of participants"
+                    "tags": [{
+                            "name": "standalone",
+                            "text": "List of participants"
+                        }],
+                    "text": ""
                 },
                 "defaultValue": "[]"
             },
@@ -208,12 +209,33 @@ export class NylasConfirmationEmail {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "The name of the component"
+                    "tags": [{
+                            "name": "standalone",
+                            "text": "The name of the component"
+                        }],
+                    "text": ""
                 },
                 "attribute": "name",
                 "reflect": false,
                 "defaultValue": "'confirmation-email-template'"
+            },
+            "isOpen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Is the confirmation email card open"
+                },
+                "attribute": "is-open",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
@@ -270,6 +292,12 @@ export class NylasConfirmationEmail {
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "nylasFormInputImageUrlInvalid",
+                "method": "nylasFormInputImageUrlInvalidHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }];
     }
     static get attachInternalsMemberName() { return "internals"; }

package/dist/collection/components/scheduler-editor/nylas-confirmation-email/nylas-confirmation-email.js.map

@@ -1 +1 @@
-{"version":3,"file":"nylas-confirmation-email.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-confirmation-email/nylas-confirmation-email.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug, sanitize } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration, EmailTemplate, Participant } from '@nylas/core';\n\n/**\n * The `nylas-confirmation-email` component is a UI component that allows users to set buffer time before and after an event.\n *\n * @part nce__tab-heading - The nylas-confirmation-email main tab heading\n * @part nce - The nylas-confirmation-email container\n * @part nce__header - The header of the event communication section\n * @part nce__body - The body of the event communication section\n * @part nce__confirmation-email-toggle--container - The confirmation email drawer toggle container\n * @part nce__input-image-url - The input image URL container\n * @part nce__summary - The confirmation card summary container\n */\n@Component({\n  tag: 'nylas-confirmation-email',\n  styleUrl: 'nylas-confirmation-email.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasConfirmationEmail {\n  @Element() host!: HTMLNylasConfirmationEmailElement;\n  /**\n   * The selected config\n   */\n  @Prop() selectedConfiguration?: Configuration;\n  /**\n   * The confirmation email template data to display\n   */\n  @Prop() confirmationEmailTemplate: EmailTemplate = {} as EmailTemplate;\n  /**\n   * Is the confirmation email card open\n   */\n  @Prop() isOpen: boolean = false;\n  /**\n   * List of participants\n   */\n  @Prop() participants: Participant[] = [];\n  /**\n   * The name of the component\n   */\n  @Prop() name: string = 'confirmation-email-template';\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The confirmation email template state.\n   */\n  @State() confirmationEmail!: EmailTemplate;\n\n  /**\n   * The internal state to store the isOpen state.\n   */\n  @State() isConfirmationEmailOpen: boolean = this.isOpen;\n\n  /**\n   * The internal state to store the participants.\n   */\n  @State() participantsState: Participant[] = this.participants;\n\n  /**\n   * This event is fired when the email reminders change.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n    valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n  }>;\n\n  // Lifecycle methods\n  connectedCallback() {\n    debug('nylas-confirmation-email', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-confirmation-email', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-confirmation-email', 'componentWillLoad');\n    // See comment in the @Watch('name') decorator for more information.\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-confirmation-email', 'componentDidLoad');\n    if (this.selectedConfiguration) {\n      this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n    } else {\n      this.confirmationEmail = this.confirmationEmailTemplate;\n      this.isConfirmationEmailOpen = this.isOpen;\n      this.participantsState = this.participants;\n    }\n  }\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-confirmation-email', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('selectedConfiguration')\n  selectedConfigurationChangedHandler(newValue: Configuration) {\n    debug('nylas-confirmation-email', 'selectedConfigurationChangedHandler', newValue);\n    this.confirmationEmail = newValue?.scheduler?.email_template || this.confirmationEmailTemplate;\n    this.isConfirmationEmailOpen = !newValue?.event_booking?.reminders?.length;\n    this.participantsState = newValue?.participants || this.participants;\n  }\n\n  @Listen('nylasFormInputChanged')\n  async nylasFormInputChangeHandler(event: CustomEvent<{ value: string; name: string; type?: string }>) {\n    const { name, value } = event.detail;\n    const type = event.detail?.type;\n    if (name === 'confirmation-email-title') {\n      this.confirmationEmail = { ...this.confirmationEmail, booking_confirmed: { ...(this.confirmationEmail?.booking_confirmed || {}), title: value } };\n      this.internals.setFormValue(JSON.stringify(this.confirmationEmail), this.name);\n      this.valueChanged.emit({ value: JSON.stringify(this.confirmationEmail), name: this.name });\n    } else if (name === 'confirmation-email-body' && type === 'multi_line_text') {\n      this.handleEmailBodyChange(event);\n    }\n  }\n\n  @Listen('valueChanged')\n  valueChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('nylas-confirmation-email', 'valueChangedHandler', event.detail);\n    const { value, name } = event.detail;\n\n    if (name === 'confirmation-email-logo') {\n      this.confirmationEmail = { ...this.confirmationEmail, logo: value };\n      this.internals.setFormValue(JSON.stringify(this.confirmationEmail), this.name);\n      this.valueChanged.emit({ value: JSON.stringify(this.confirmationEmail), name: this.name });\n    }\n  }\n\n  updateConfirmationFormValue() {\n    debug('nylas-confirmation-email', 'updateConfirmationFormValue');\n    this.internals.setFormValue(JSON.stringify(this.confirmationEmail), this.name);\n    this.valueChanged.emit({ value: JSON.stringify(this.confirmationEmail), name: this.name });\n  }\n\n  toggleConfirmationEmail() {\n    this.isConfirmationEmailOpen = !this.isConfirmationEmailOpen;\n  }\n\n  handleEmailBodyChange(event) {\n    const value = sanitize(event.detail.value);\n    this.confirmationEmail = { ...this.confirmationEmail, booking_confirmed: { ...(this.confirmationEmail?.booking_confirmed || {}), body: value } };\n    this.internals.setFormValue(JSON.stringify(this.confirmationEmail), this.name);\n    this.valueChanged.emit({ value: JSON.stringify(this.confirmationEmail), name: this.name });\n  }\n\n  @RegisterComponent<NylasConfirmationEmail, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-confirmation-email',\n    stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n    eventToProps: {\n      valueChanged: async (\n        event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n        _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n      ) => {\n        const { valueChanged } = event.detail;\n        // If a handler is passed, call it.\n        if (valueChanged) {\n          valueChanged(event);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    const organizerName = this.participantsState.find(p => p.is_organizer)?.name;\n    return (\n      <Host>\n        <div class=\"nylas-confirmation-email\" part=\"nce\">\n          <div class=\"header\" part=\"nce__header\">\n            <div>\n              <h3>{this.confirmationEmail?.booking_confirmed?.title ?? `Booking confirmed with ${organizerName ? ` ${organizerName}` : ''}`}</h3>\n              <p>Booking confirmation email</p>\n            </div>\n            {this.isConfirmationEmailOpen ? (\n              <div class=\"confirmation-email-toggle\" part=\"nce__confirmation-email-toggle--container\">\n                <span class={`chevron ${this.isConfirmationEmailOpen ? 'open' : 'closed'} `} onClick={() => this.toggleConfirmationEmail()}>\n                  <chevron-icon width=\"24\" height=\"24\" />\n                </span>\n              </div>\n            ) : (\n              <button-component\n                variant={'basic'}\n                clickHandler={event => {\n                  event.preventDefault();\n                  this.toggleConfirmationEmail();\n                }}\n              >\n                <edit-icon width=\"16\" height=\"16\"></edit-icon>\n                Edit\n              </button-component>\n            )}\n          </div>\n\n          {this.isConfirmationEmailOpen ? (\n            <div class=\"nylas-confirmation-email__body\" part=\"nce__body\">\n              <div class=\"nylas-confirmation-email__section\">\n                <div class=\"nylas-confirmation-email__row\">\n                  <label>\n                    Send confirmation email\n                    <span class=\"label-icon\">\n                      <tooltip-component>\n                        <info-icon slot=\"tooltip-icon\" />\n                        <span slot=\"tooltip-content\">You and your guests will receive a confirmation email immediately upon booking.</span>\n                      </tooltip-component>\n                    </span>\n                  </label>\n                  <span class=\"selected-value\">Immediately upon booking</span>\n                </div>\n                <div class=\"nylas-confirmation-email__row\">\n                  <div class=\"subsection\">\n                    <div class=\"input-container\">\n                      <label>\n                        Company logo URL\n                        <span class=\"label-icon\">\n                          <tooltip-component>\n                            <info-icon slot=\"tooltip-icon\" />\n                            <span slot=\"tooltip-content\">\n                              This logo appears in the booking confirmation email. The URL must be publicly accessible. The image will be scaled down to a max size of 200px x\n                              100px.\n                            </span>\n                          </tooltip-component>\n                        </span>\n                      </label>\n\n                      {this.confirmationEmail && (\n                        <input-image-url\n                          name=\"confirmation-email-logo\"\n                          exportparts=\"iiu__logo-input-textfield: nce__input-image-url\"\n                          imageUrl={this.confirmationEmail?.logo ?? ''}\n                        />\n                      )}\n                    </div>\n                  </div>\n                </div>\n                <div class=\"nylas-confirmation-email__row full-width-col\">\n                  <div class=\"subsection\">\n                    <h3>Email message</h3>\n                    <div class=\"input-container\">\n                      <label htmlFor=\"title\">\n                        Custom email title\n                        <span class=\"label-icon\">\n                          <tooltip-component>\n                            <info-icon slot=\"tooltip-icon\" />\n                            <span slot=\"tooltip-content\">An email title is a headline within the body of the email. This doesn&apos;t change the subject line.</span>\n                          </tooltip-component>\n                        </span>\n                      </label>\n                      <input-component\n                        name=\"confirmation-email-title\"\n                        maxLength={60}\n                        placeholder={`Booking confirmed ${organizerName ? `with ${organizerName}` : ''}`}\n                        defaultValue={this.confirmationEmail?.booking_confirmed?.title ?? ''}\n                      ></input-component>\n                    </div>\n                    <div class=\"input-container\">\n                      {/* <label htmlFor=\"title\">Email body</label> */}\n                      <textarea-component\n                        label=\"Additional info\"\n                        name=\"confirmation-email-body\"\n                        id=\"confirmation-email-body\"\n                        placeholder=\"Default body\"\n                        tooltip=\"Scheduler adds the content of the box to the email body.\"\n                        maxLength={500}\n                        defaultValue={this.confirmationEmail?.booking_confirmed?.body ?? ''}\n                      ></textarea-component>\n\n                      {/* <textarea\n                        id=\"description\"\n                        part=\"nrt__textarea\"\n                        name=\"confirmation-email-body\"\n                        placeholder='Default body'\n                        value={this.confirmationEmail?.booking_confirmed?.body ?? ''}\n                        maxlength=\"500\"\n                        rows={2}\n                        onInput={e => this.handleEmailBodyChange(e)}\n                      ></textarea> */}\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          ) : (\n            <div class=\"nylas-confirmation-email__summary\" part=\"nce__summary\">\n              <p>\n                <span class=\"summary-icon\">\n                  <person-clipboard-icon></person-clipboard-icon>\n                </span>\n                All host & guests\n              </p>\n              <p>\n                <span class=\"summary-icon\">\n                  <clock-icon></clock-icon>\n                </span>\n                Immediately on booking\n              </p>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"nylas-confirmation-email.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-confirmation-email/nylas-confirmation-email.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug, sanitize } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration, EmailTemplate, Participant } from '@nylas/core';\n\n/**\n * The `nylas-confirmation-email` component is a UI component that allows users to set buffer time before and after an event.\n *\n * @part nce__tab-heading - The nylas-confirmation-email main tab heading\n * @part nce - The nylas-confirmation-email container\n * @part nce__header - The header of the event communication section\n * @part nce__body - The body of the event communication section\n * @part nce__confirmation-email-toggle--container - The confirmation email drawer toggle container\n * @part nce__input-image-url - The input image URL container\n * @part nce__summary - The confirmation card summary container\n */\n@Component({\n  tag: 'nylas-confirmation-email',\n  styleUrl: 'nylas-confirmation-email.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasConfirmationEmail {\n  @Element() host!: HTMLNylasConfirmationEmailElement;\n  /**\n   * @standalone\n   * The selected config\n   */\n  @Prop() selectedConfiguration?: Configuration;\n  /**\n   * @standalone\n   * The confirmation email template data to display\n   */\n  @Prop() confirmationEmailTemplate: EmailTemplate = {} as EmailTemplate;\n  /**\n   * @standalone\n   * List of participants\n   */\n  @Prop() participants: Participant[] = [];\n  /**\n   * @standalone\n   * The name of the component\n   */\n  @Prop() name: string = 'confirmation-email-template';\n  /**\n   * Is the confirmation email card open\n   */\n  @Prop() isOpen: boolean = false;\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The confirmation email template state.\n   */\n  @State() confirmationEmail!: EmailTemplate;\n\n  /**\n   * The internal state to store the isOpen state.\n   */\n  @State() isConfirmationEmailOpen: boolean = this.isOpen;\n\n  /**\n   * The internal state to store the participants.\n   */\n  @State() participantsState: Participant[] = this.participants;\n\n  /**\n   * This event is fired when the email reminders change.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n    valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n  }>;\n\n  // Lifecycle methods\n  connectedCallback() {\n    debug('nylas-confirmation-email', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-confirmation-email', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-confirmation-email', 'componentWillLoad');\n    // See comment in the @Watch('name') decorator for more information.\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-confirmation-email', 'componentDidLoad');\n    if (this.selectedConfiguration) {\n      this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n    } else {\n      this.confirmationEmail = this.confirmationEmailTemplate;\n      this.isConfirmationEmailOpen = this.isOpen;\n      this.participantsState = this.participants;\n    }\n  }\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-confirmation-email', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('selectedConfiguration')\n  selectedConfigurationChangedHandler(newValue: Configuration) {\n    debug('nylas-confirmation-email', 'selectedConfigurationChangedHandler', newValue);\n    this.confirmationEmail = newValue?.scheduler?.email_template || this.confirmationEmailTemplate;\n    this.isConfirmationEmailOpen = !newValue?.event_booking?.reminders?.length;\n    this.participantsState = newValue?.participants || this.participants;\n  }\n\n  @Listen('nylasFormInputChanged')\n  async nylasFormInputChangeHandler(event: CustomEvent<{ value: string; name: string; type?: string }>) {\n    const { name, value } = event.detail;\n    const type = event.detail?.type;\n    if (name === 'confirmation-email-title') {\n      this.confirmationEmail = { ...this.confirmationEmail, booking_confirmed: { ...(this.confirmationEmail?.booking_confirmed || {}), title: value } };\n      this.internals.setFormValue(JSON.stringify(this.confirmationEmail), this.name);\n      this.valueChanged.emit({ value: JSON.stringify(this.confirmationEmail), name: this.name });\n    } else if (name === 'confirmation-email-body' && type === 'multi_line_text') {\n      this.handleEmailBodyChange(event);\n    }\n  }\n\n  @Listen('valueChanged')\n  valueChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('nylas-confirmation-email', 'valueChangedHandler', event.detail);\n    const { value, name } = event.detail;\n\n    if (name === 'confirmation-email-logo') {\n      this.confirmationEmail = { ...this.confirmationEmail, logo: value };\n      this.valueChanged.emit({ value: JSON.stringify(this.confirmationEmail), name: this.name });\n      if (typeof this.internals.setValidity === 'function' && typeof this.internals.setFormValue === 'function') {\n        this.internals.setFormValue(JSON.stringify(this.confirmationEmail), this.name);\n        this.internals.setValidity({});\n      }\n    }\n  }\n\n  @Listen('nylasFormInputImageUrlInvalid')\n  async nylasFormInputImageUrlInvalidHandler(event: CustomEvent<{ value: string; name: string }>) {\n    const { value, name } = event.detail;\n    if (name === 'confirmation-email-logo' && typeof this.internals.setValidity === 'function') {\n      this.internals.setValidity({ customError: true }, value || 'Invalid image URL.');\n    }\n  }\n\n  updateConfirmationFormValue() {\n    debug('nylas-confirmation-email', 'updateConfirmationFormValue');\n    this.internals.setFormValue(JSON.stringify(this.confirmationEmail), this.name);\n    this.valueChanged.emit({ value: JSON.stringify(this.confirmationEmail), name: this.name });\n  }\n\n  toggleConfirmationEmail() {\n    this.isConfirmationEmailOpen = !this.isConfirmationEmailOpen;\n  }\n\n  handleEmailBodyChange(event) {\n    const value = sanitize(event.detail.value);\n    this.confirmationEmail = { ...this.confirmationEmail, booking_confirmed: { ...(this.confirmationEmail?.booking_confirmed || {}), body: value } };\n    this.internals.setFormValue(JSON.stringify(this.confirmationEmail), this.name);\n    this.valueChanged.emit({ value: JSON.stringify(this.confirmationEmail), name: this.name });\n  }\n\n  @RegisterComponent<NylasConfirmationEmail, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-confirmation-email',\n    stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n    eventToProps: {\n      valueChanged: async (\n        event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n        _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n      ) => {\n        const { valueChanged } = event.detail;\n        // If a handler is passed, call it.\n        if (valueChanged) {\n          valueChanged(event);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    const organizer = this.participantsState.find(p => p.is_organizer);\n    const organizerName = organizer?.name || organizer?.email;\n\n    return (\n      <Host>\n        <div class=\"nylas-confirmation-email\" part=\"nce\">\n          <div class=\"header\" part=\"nce__header\">\n            <div>\n              <h3>{this.confirmationEmail?.booking_confirmed?.title ?? `Booking confirmed with ${organizerName ? ` ${organizerName}` : ''}`}</h3>\n              <p>Booking confirmation email</p>\n            </div>\n            {this.isConfirmationEmailOpen ? (\n              <div class=\"confirmation-email-toggle\" part=\"nce__confirmation-email-toggle--container\">\n                <span class={`chevron ${this.isConfirmationEmailOpen ? 'open' : 'closed'} `} onClick={() => this.toggleConfirmationEmail()}>\n                  <chevron-icon width=\"24\" height=\"24\" />\n                </span>\n              </div>\n            ) : (\n              <button-component\n                variant={'basic'}\n                clickHandler={event => {\n                  event.preventDefault();\n                  this.toggleConfirmationEmail();\n                }}\n              >\n                <edit-icon width=\"16\" height=\"16\"></edit-icon>\n                Edit\n              </button-component>\n            )}\n          </div>\n\n          {this.isConfirmationEmailOpen ? (\n            <div class=\"nylas-confirmation-email__body\" part=\"nce__body\">\n              <div class=\"nylas-confirmation-email__section\">\n                <div class=\"nylas-confirmation-email__row\">\n                  <label>\n                    Send confirmation email\n                    <span class=\"label-icon\">\n                      <tooltip-component>\n                        <info-icon slot=\"tooltip-icon\" />\n                        <span slot=\"tooltip-content\">You and your guests will receive a confirmation email immediately upon booking.</span>\n                      </tooltip-component>\n                    </span>\n                  </label>\n                  <span class=\"selected-value\">Immediately upon booking</span>\n                </div>\n                <div class=\"nylas-confirmation-email__row\">\n                  <div class=\"subsection\">\n                    <div class=\"input-container\">\n                      <label>\n                        Company logo URL\n                        <span class=\"label-icon\">\n                          <tooltip-component>\n                            <info-icon slot=\"tooltip-icon\" />\n                            <span slot=\"tooltip-content\">\n                              This logo appears in the booking confirmation email. The URL must be publicly accessible. The image will be scaled down to a max size of 200px x\n                              100px.\n                            </span>\n                          </tooltip-component>\n                        </span>\n                      </label>\n\n                      {this.confirmationEmail && (\n                        <input-image-url\n                          name=\"confirmation-email-logo\"\n                          exportparts=\"iiu__logo-input-textfield: nce__input-image-url\"\n                          imageUrl={this.confirmationEmail?.logo ?? ''}\n                        />\n                      )}\n                    </div>\n                  </div>\n                </div>\n                <div class=\"nylas-confirmation-email__row full-width-col\">\n                  <div class=\"subsection\">\n                    <h3>Email message</h3>\n                    <div class=\"input-container\">\n                      <label htmlFor=\"title\">\n                        Custom email title\n                        <span class=\"label-icon\">\n                          <tooltip-component>\n                            <info-icon slot=\"tooltip-icon\" />\n                            <span slot=\"tooltip-content\">An email title is a headline within the body of the email. This doesn&apos;t change the subject line.</span>\n                          </tooltip-component>\n                        </span>\n                      </label>\n                      <input-component\n                        name=\"confirmation-email-title\"\n                        maxLength={60}\n                        placeholder={`Booking confirmed ${organizerName ? `with ${organizerName}` : ''}`}\n                        defaultValue={this.confirmationEmail?.booking_confirmed?.title ?? ''}\n                      ></input-component>\n                    </div>\n                    <div class=\"input-container\">\n                      {/* <label htmlFor=\"title\">Email body</label> */}\n                      <textarea-component\n                        label=\"Additional info\"\n                        name=\"confirmation-email-body\"\n                        id=\"confirmation-email-body\"\n                        placeholder=\"Default body\"\n                        tooltip=\"Scheduler adds the content of the box to the email body.\"\n                        maxLength={500}\n                        defaultValue={this.confirmationEmail?.booking_confirmed?.body ?? ''}\n                      ></textarea-component>\n\n                      {/* <textarea\n                        id=\"description\"\n                        part=\"nrt__textarea\"\n                        name=\"confirmation-email-body\"\n                        placeholder='Default body'\n                        value={this.confirmationEmail?.booking_confirmed?.body ?? ''}\n                        maxlength=\"500\"\n                        rows={2}\n                        onInput={e => this.handleEmailBodyChange(e)}\n                      ></textarea> */}\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          ) : (\n            <div class=\"nylas-confirmation-email__summary\" part=\"nce__summary\">\n              <p>\n                <span class=\"summary-icon\">\n                  <person-clipboard-icon></person-clipboard-icon>\n                </span>\n                All host & guests\n              </p>\n              <p>\n                <span class=\"summary-icon\">\n                  <clock-icon></clock-icon>\n                </span>\n                Immediately on booking\n              </p>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/scheduler-editor/nylas-confirmation-email/test/nylas-confirmation-email.spec.js

@@ -0,0 +1,33 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { NylasConfirmationEmail } from "../nylas-confirmation-email";
+import { InputImageUrl } from "../../../design-system/input-image-url/input-image-url";
+import { InputComponent } from "../../../design-system/input-component/input-component";
+import { h } from "@stencil/core";
+describe('nylas-confirmation-email', () => {
+    let page;
+    beforeEach(async () => {
+        page = await newSpecPage({
+            components: [InputImageUrl, InputComponent, NylasConfirmationEmail],
+            template: () => {
+                return h("nylas-confirmation-email", { name: "confirmationEmail", isOpen: true });
+            },
+        });
+        await page.waitForChanges();
+    });
+    it('renders', async () => {
+        expect(page.root).toMatchSnapshot();
+    });
+    it('should show error message when invalid logo url is entered', async () => {
+        const inputImageUrl = page.root.shadowRoot.querySelector('input-image-url');
+        const inputEvent = new CustomEvent('nylasFormInputChanged', {
+            detail: {
+                name: 'confirmation-email-logo',
+                value: 'invalid-url',
+            },
+        });
+        inputImageUrl.dispatchEvent(inputEvent);
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot();
+    });
+});
+//# sourceMappingURL=nylas-confirmation-email.spec.js.map

package/dist/collection/components/scheduler-editor/nylas-confirmation-email/test/nylas-confirmation-email.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nylas-confirmation-email.spec.js","sourceRoot":"","sources":["../../../../../src/components/scheduler-editor/nylas-confirmation-email/test/nylas-confirmation-email.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,wDAAwD,CAAC;AACvF,OAAO,EAAE,cAAc,EAAE,MAAM,wDAAwD,CAAC;AACxF,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElC,QAAQ,CAAC,0BAA0B,EAAE,GAAG,EAAE;IACxC,IAAI,IAAS,CAAC;IACd,UAAU,CAAC,KAAK,IAAI,EAAE;QACpB,IAAI,GAAG,MAAM,WAAW,CAAC;YACvB,UAAU,EAAE,CAAC,aAAa,EAAE,cAAc,EAAE,sBAAsB,CAAC;YACnE,QAAQ,EAAE,GAAG,EAAE;gBACb,OAAO,gCAA0B,IAAI,EAAC,mBAAmB,EAAC,MAAM,EAAE,IAAI,GAAI,CAAC;YAC7E,CAAC;SACF,CAAC,CAAC;QACH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC9B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4DAA4D,EAAE,KAAK,IAAI,EAAE;QAC1E,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;QAC5E,MAAM,UAAU,GAAG,IAAI,WAAW,CAAC,uBAAuB,EAAE;YAC1D,MAAM,EAAE;gBACN,IAAI,EAAE,yBAAyB;gBAC/B,KAAK,EAAE,aAAa;aACrB;SACF,CAAC,CAAC;QACH,aAAa,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QACxC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { NylasConfirmationEmail } from '../nylas-confirmation-email';\nimport { InputImageUrl } from '../../../design-system/input-image-url/input-image-url';\nimport { InputComponent } from '../../../design-system/input-component/input-component';\nimport { h } from '@stencil/core';\n\ndescribe('nylas-confirmation-email', () => {\n  let page: any;\n  beforeEach(async () => {\n    page = await newSpecPage({\n      components: [InputImageUrl, InputComponent, NylasConfirmationEmail],\n      template: () => {\n        return <nylas-confirmation-email name=\"confirmationEmail\" isOpen={true} />;\n      },\n    });\n    await page.waitForChanges();\n  });\n\n  it('renders', async () => {\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it('should show error message when invalid logo url is entered', async () => {\n    const inputImageUrl = page.root.shadowRoot.querySelector('input-image-url');\n    const inputEvent = new CustomEvent('nylasFormInputChanged', {\n      detail: {\n        name: 'confirmation-email-logo',\n        value: 'invalid-url',\n      },\n    });\n    inputImageUrl.dispatchEvent(inputEvent);\n    await page.waitForChanges();\n    expect(page.root).toMatchSnapshot();\n  });\n});\n"]}

package/dist/collection/components/scheduler-editor/nylas-connected-calendars/nylas-connected-calendars.js

@@ -103,6 +103,10 @@ export class NylasConnectedCalendars {
             this.selectedCalendars = this.setParticipants(this.selectedConfiguration?.participants);
             this.participantCalendars = this.getParticipantCalendarOptions(this.selectedConfiguration?.participants, this.participantOptions);
         }
+        else {
+            this.selectedCalendars = this.setParticipants(this.participants);
+            this.participantCalendars = this.getParticipantCalendarOptions(this.participants, this.participantOptions);
+        }
     }
     handleValueChanged(event) {
         debug('[nylas-editor-tabs]', 'handleValueChanged', event);
@@ -144,12 +148,12 @@ export class NylasConnectedCalendars {
         return selectedParticipants;
     }
     render() {
-        return (h(Host, { key: '93c9e0b22219deb57d1eb08f1ffa3057c1f11e2d' }, h("div", { key: 'fbd05348502ca5f1bf16cdcabe57486afed5ff08', class: "nylas-connected-calendars", part: "npca" }, h("div", { key: 'c83d17fa00cca611b100cb17f327af5a4841fec6', class: "header", part: "npca__header" }, h("h3", { key: '563228be14edc1cfd8c9cb2c4da74f7384b6824c' }, "Connected Calendars"), h("p", { key: 'f9349bbbd8769616744fc125b22f0d50ff340c48' }, "Select the calendars to use for checking your availability.", h("tooltip-component", { key: 'b119f309472799d0d7b882cdcf079e0e5fad63ce' }, h("info-icon", { key: 'f065051277ec70042dcebc59b0baaf0b7c8a7fc3', slot: "tooltip-icon" }), h("span", { key: '3dcad6fcad23ba112d4167fee874a41363ed79ea', slot: "tooltip-content" }, "Check availability across one or more calendars. If you select multiple calendars for a participant, the participant must be available across all of their calendars to be considered available.")))), h("div", { key: 'd313e98a65f0dc8a5c8ad12d3d2a301263fe6121', class: "content", part: "npca__content" }, h("form", { key: '0e71e357eefb86c6d60e932793a779e7f4d48ead', ref: el => (this.connectedCalendarsFormRef = el) }, Object.keys(this.participantCalendars).map((key, index) => {
+        return (h(Host, { key: '32710fe762bdf90e238c62695957a9fca31db258' }, h("div", { key: 'a5ebf4adb7eb8e1b8a065bc05733738da06fbac3', class: "nylas-connected-calendars", part: "nccals" }, h("div", { key: 'f3c820bcde922a7b852630d86145b1e6e1bf0e25', class: "header", part: "nccals__header" }, h("h3", { key: 'e2b68d05d416c322b22f969d8d8c890a09812154' }, "Connected Calendars"), h("p", { key: '4dd41d10a6043fec1c0f4943371c312a29e1d489' }, "Select the calendars to use for checking your availability.", h("tooltip-component", { key: '6a8ec009fd879e1ed6b6fb65be75a88255adba17' }, h("info-icon", { key: '0d4a99eaee064ecee1c82ee5b13f3ab87a1d5d93', slot: "tooltip-icon" }), h("span", { key: 'de3779efce64d7a14dbc3f7759c827005f92ed50', slot: "tooltip-content" }, "Check availability across one or more calendars. If you select multiple calendars for a participant, the participant must be available across all of their calendars to be considered available.")))), h("div", { key: '720267110636c1dc06ac67b7e715515f56737b73', class: "content", part: "nccals__content" }, h("form", { key: 'f295ba327aa302ea186dbf2daef3a9c30f96ee5f', ref: el => (this.connectedCalendarsFormRef = el) }, Object.keys(this.participantCalendars).map((key, index) => {
             const participant = this.selectedCalendars[key];
             const participantCalendars = this.participantCalendars[key];
             if (!participant || !participant.name)
                 return;
-            return (h("div", { class: "participant-container", part: "npca__participant-container", key: `participant-conatiner-${index}` }, h("div", { class: "participant-title", part: "npca__participant-title" }, h("p", null, participant.name, "'s connected calendars"), h("div", { class: "participant-toggle", part: "npca__participant-toggle--container" }, h("span", { class: `chevron ${participant.isOpen ? 'open' : 'closed'}`, onClick: () => {
+            return (h("div", { class: "participant-container", part: "nccals__container", key: `participant-conatiner-${index}` }, h("div", { class: "participant-title", part: "nccals__title" }, h("p", null, participant.name, "'s connected calendars"), h("div", { class: "participant-toggle", part: "nccals__toggle-container" }, h("span", { class: `chevron ${participant.isOpen ? 'open' : 'closed'}`, onClick: () => {
                     this.selectedCalendars[key].isOpen = !participant.isOpen;
                     this.selectedCalendars = { ...this.selectedCalendars };
                 } }, h("chevron-icon", { width: "24", height: "24" })))), participant.isOpen && (h("nylas-calendar-picker", { key: key, name: `participant-${key}`, calendars: participantCalendars, defaultSelectedCalendars: this.participantDefaultSelectedCalendars[key] }))));
@@ -205,8 +209,11 @@ export class NylasConnectedCalendars {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "The selected config"
+                    "tags": [{
+                            "name": "standalone",
+                            "text": "The selected config"
+                        }],
+                    "text": ""
                 }
             },
             "participants": {
@@ -226,8 +233,11 @@ export class NylasConnectedCalendars {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "The participants selected in the add participants section."
+                    "tags": [{
+                            "name": "standalone",
+                            "text": "The participants selected in the add participants section."
+                        }],
+                    "text": ""
                 },
                 "defaultValue": "this.selectedConfiguration?.participants || []"
             },
@@ -248,8 +258,11 @@ export class NylasConnectedCalendars {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "The calendars to choose from for the organizer / logged in user."
+                    "tags": [{
+                            "name": "standalone",
+                            "text": "The calendars to choose from for the organizer / logged in user."
+                        }],
+                    "text": ""
                 }
             },
             "participantOptions": {
@@ -269,8 +282,11 @@ export class NylasConnectedCalendars {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "The participant options passed in the additionalParticipants prop\nfrom the nylas-scheduler-editor component."
+                    "tags": [{
+                            "name": "standalone",
+                            "text": "The participant options passed in the additionalParticipants prop\nfrom the nylas-scheduler-editor component."
+                        }],
+                    "text": ""
                 }
             }
         };

package/dist/collection/components/scheduler-editor/nylas-connected-calendars/nylas-connected-calendars.js.map

@@ -1 +1 @@
-{"version":3,"file":"nylas-connected-calendars.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-connected-calendars/nylas-connected-calendars.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { AdditionalParticipant, Calendar, Configuration, Participant } from '@nylas/core';\n\n/**\n * The `nylas-connected-calendars` component is a form input for selecting calendars to check availability for participants.\n */\n@Component({\n  tag: 'nylas-connected-calendars',\n  styleUrl: 'nylas-connected-calendars.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasConnectedCalendars {\n  @Element() host!: HTMLNylasConnectedCalendarsElement;\n  private connectedCalendarsFormRef!: HTMLFormElement;\n\n  /**\n   * The name of the participants custom availability.\n   */\n  @Prop() name: string = 'connected-calendars';\n\n  /**\n   * The selected config\n   */\n  @Prop() selectedConfiguration?: Configuration;\n\n  /**\n   * The participants selected in the add participants section.\n   */\n  @Prop() participants: Participant[] = this.selectedConfiguration?.participants || [];\n\n  /**\n   * The calendars to choose from for the organizer / logged in user.\n   */\n  @Prop() calendars?: Calendar[];\n\n  /**\n   * The participant options passed in the additionalParticipants prop\n   * from the nylas-scheduler-editor component.\n   */\n  @Prop() participantOptions?: AdditionalParticipant[];\n\n  /**\n   * This event is fired when the participants custom availability changes.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n  }>;\n\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The state to store the custom availability setting for participants.\n   */\n  @State() selectedCalendars: {\n    [key: string]: {\n      isOpen: boolean;\n      name: string;\n      calendars?: Calendar[];\n    };\n  } = this.setParticipants(this.participants);\n\n  /**\n   * Participants calendar options.\n   */\n  @State() participantCalendars: {\n    [key: string]: Calendar[];\n  } = {};\n\n  /**\n   * The state to store the default selected calendars for each participant\n   */\n  @State() participantDefaultSelectedCalendars: {\n    [key: string]: string[];\n  } = {};\n\n  // Watchers\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-connected-calendars', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('calendars')\n  calendarsChangedHandler(newValue: Calendar[]) {\n    debug('nylas-connected-calendars', 'calendarsChangedHandler', newValue);\n    this.selectedCalendars = this.setParticipants(this.participants);\n    this.participantCalendars = this.getParticipantCalendarOptions(this.participants, this.participantOptions);\n  }\n\n  @Watch('participants')\n  participantsChangedHandler(newValue: Participant[]) {\n    debug('nylas-connected-calendars', 'participantsChangedHandler', newValue);\n    this.selectedCalendars = this.setParticipants(newValue);\n    this.participantCalendars = this.getParticipantCalendarOptions(newValue, this.participantOptions);\n  }\n\n  @Watch('participantOptions')\n  participantOptionsChangedHandler(newValue: AdditionalParticipant[]) {\n    debug('nylas-calendar-picker', 'participantOptionsChangedHandler', newValue);\n    this.selectedCalendars = this.setParticipants(this.participants);\n    this.participantCalendars = this.getParticipantCalendarOptions(this.participants, newValue);\n  }\n\n  @Watch('selectedConfiguration')\n  selectedConfigurationChangedHandler(newValue: Configuration) {\n    debug('nylas-calendar-picker', 'selectedConfigurationChangedHandler', newValue);\n    const participants = newValue?.participants || this.participants;\n    if (participants && participants.length > 0) {\n      this.selectedCalendars = this.setParticipants(participants);\n      this.participantCalendars = this.getParticipantCalendarOptions(participants, this.participantOptions);\n    }\n  }\n\n  getParticipantCalendarOptions(addedParticipants: Participant[], availableParticipantOptions: AdditionalParticipant[] | undefined) {\n    // Get the participants from the availableParticipantOptions prop that are in the addedParticipants prop\n    const organizer = addedParticipants?.find(participant => participant.is_organizer);\n    const isRoundRobinConfig = this.selectedConfiguration?.availability?.availability_rules?.availability_method !== 'collective';\n    const participantCalendars = {};\n    if (availableParticipantOptions) {\n      const participants = addedParticipants?.filter(participant => availableParticipantOptions.some(availableParticipant => availableParticipant.email === participant.email));\n      const remainingParticipants = addedParticipants?.filter(\n        participant => !availableParticipantOptions.some(availableParticipant => availableParticipant.email === participant.email),\n      );\n\n      // Get the calendar options for each participant with email as the key\n      participants?.forEach(participant => {\n        const participantOption = availableParticipantOptions?.find(participantOption => participantOption.email === participant.email);\n        if (!participantOption) return;\n        this.participantDefaultSelectedCalendars[participant.email] = participant.availability?.calendar_ids || [];\n        const calendars = participantOption.calendars ?? [];\n        participant.availability?.calendar_ids?.forEach(calendarId => {\n          if (!calendars?.some(calendar => calendar.id === calendarId) && calendarId !== 'primary') {\n            calendars.push({ id: calendarId, name: calendarId });\n          }\n        });\n        participantCalendars[participant.email] = calendars;\n      });\n      if (isRoundRobinConfig) {\n        // If it is round robin config, add the remaining participant calendars to the participantCalendars\n        // (Round-robin does not have an organizer, and we filtered out the participants not passed in the participantOptions prop,\n        // so we need to add the remaining participants calendars to the participantCalendars)\n        remainingParticipants?.forEach(participant => {\n          if (participant?.availability?.calendar_ids && participant?.availability?.calendar_ids?.length > 0 && !participant.is_organizer) {\n            participantCalendars[participant.email] = this.calendars ?? [{ id: 'primary', name: participant.email }];\n            this.participantDefaultSelectedCalendars[participant.email] = participant.availability?.calendar_ids || [];\n          }\n        });\n      }\n    }\n\n    // Add the organizer's calendars to the participantCalendars\n    if (organizer) {\n      participantCalendars[organizer.email] = this.calendars ?? [{ id: 'primary', name: organizer.email }];\n      this.participantDefaultSelectedCalendars[organizer.email] = organizer.availability?.calendar_ids || [];\n    }\n    return participantCalendars;\n  }\n\n  // Lifecycle Methods\n  connectedCallback() {\n    debug('nylas-connected-calendars', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-connected-calendars', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-connected-calendars', 'componentWillLoad');\n  }\n\n  componentDidLoad() {\n    debug('nylas-connected-calendars', 'componentDidLoad');\n    if (this.selectedConfiguration) {\n      this.selectedCalendars = this.setParticipants(this.selectedConfiguration?.participants);\n      this.participantCalendars = this.getParticipantCalendarOptions(this.selectedConfiguration?.participants, this.participantOptions);\n    }\n  }\n\n  @Listen('valueChanged')\n  handleValueChanged(event: CustomEvent) {\n    debug('[nylas-editor-tabs]', 'handleValueChanged', event);\n    const { name, value } = event.detail;\n    if (!name.startsWith('participant-')) {\n      return;\n    }\n    // Validate the form\n    if (!this.connectedCalendarsFormRef.checkValidity()) {\n      this.internals.setValidity({ customError: true }, 'Please select at least one calendar for each participant.');\n      return;\n    } else {\n      this.internals.setValidity({});\n    }\n\n    const key = name.split('participant-')[1];\n    if (!this.selectedCalendars[key]) return;\n    this.selectedCalendars[key]['calendars'] = value;\n    this.selectedCalendars = { ...this.selectedCalendars };\n\n    const participantsCalendars = {};\n    Object.keys(this.selectedCalendars).forEach(key => {\n      participantsCalendars[key] = this.selectedCalendars[key].calendars;\n    });\n    this.internals.setFormValue(JSON.stringify(participantsCalendars), this.name);\n    this.valueChanged.emit({ value: JSON.stringify(participantsCalendars), name: this.name });\n  }\n\n  setParticipants(participants: Participant[]) {\n    const selectedParticipants = {};\n    participants?.forEach(participant => {\n      if (participant?.availability?.calendar_ids && participant?.availability?.calendar_ids?.length > 0) {\n        const isOpen = participant.is_organizer ? true : false;\n        selectedParticipants[participant.email] = {\n          isOpen: isOpen,\n          name: participant.name || participant.email,\n          availability: participant.availability,\n        };\n      }\n    });\n    return selectedParticipants;\n  }\n  @RegisterComponent<NylasConnectedCalendars, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-connected-calendars',\n    stateToProps: new Map([\n      ['schedulerConfig.additionalParticipants', 'participantOptions'],\n      ['schedulerConfig.calendars', 'calendars'],\n      ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],\n    ]),\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <div class=\"nylas-connected-calendars\" part=\"npca\">\n          <div class=\"header\" part=\"npca__header\">\n            <h3>Connected Calendars</h3>\n            <p>\n              Select the calendars to use for checking your availability.\n              <tooltip-component>\n                <info-icon slot=\"tooltip-icon\" />\n                <span slot=\"tooltip-content\">\n                  Check availability across one or more calendars. If you select multiple calendars for a participant, the participant must be available across all of their\n                  calendars to be considered available.\n                </span>\n              </tooltip-component>\n            </p>\n          </div>\n          <div class=\"content\" part=\"npca__content\">\n            <form ref={el => (this.connectedCalendarsFormRef = el as HTMLFormElement)}>\n              {Object.keys(this.participantCalendars).map((key, index) => {\n                const participant = this.selectedCalendars[key];\n                const participantCalendars = this.participantCalendars[key];\n                if (!participant || !participant.name) return;\n                return (\n                  <div class=\"participant-container\" part=\"npca__participant-container\" key={`participant-conatiner-${index}`}>\n                    <div class=\"participant-title\" part=\"npca__participant-title\">\n                      <p>{participant.name}'s connected calendars</p>\n                      <div class=\"participant-toggle\" part=\"npca__participant-toggle--container\">\n                        <span\n                          class={`chevron ${participant.isOpen ? 'open' : 'closed'}`}\n                          onClick={() => {\n                            this.selectedCalendars[key].isOpen = !participant.isOpen;\n                            this.selectedCalendars = { ...this.selectedCalendars };\n                          }}\n                        >\n                          <chevron-icon width=\"24\" height=\"24\" />\n                        </span>\n                      </div>\n                    </div>\n                    {participant.isOpen && (\n                      <nylas-calendar-picker\n                        key={key}\n                        name={`participant-${key}`}\n                        calendars={participantCalendars}\n                        defaultSelectedCalendars={this.participantDefaultSelectedCalendars[key]}\n                      />\n                    )}\n                  </div>\n                );\n              })}\n            </form>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"nylas-connected-calendars.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-connected-calendars/nylas-connected-calendars.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { AdditionalParticipant, Calendar, Configuration, Participant } from '@nylas/core';\n\n/**\n * The `nylas-connected-calendars` component is a form input for selecting calendars to check availability for participants.\n * @part nccals - The connected calendars host.\n * @part nccals__header - The header.\n * @part nccals__content - The content.\n * @part nccals__container - The container.\n * @part nccals__title - The title.\n * @part nccals__toggle-container - The toggle container.\n */\n@Component({\n  tag: 'nylas-connected-calendars',\n  styleUrl: 'nylas-connected-calendars.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasConnectedCalendars {\n  @Element() host!: HTMLNylasConnectedCalendarsElement;\n  private connectedCalendarsFormRef!: HTMLFormElement;\n\n  /**\n   * The name of the participants custom availability.\n   */\n  @Prop() name: string = 'connected-calendars';\n\n  /**\n   * @standalone\n   * The selected config\n   */\n  @Prop() selectedConfiguration?: Configuration;\n\n  /**\n   * @standalone\n   * The participants selected in the add participants section.\n   */\n  @Prop() participants: Participant[] = this.selectedConfiguration?.participants || [];\n\n  /**\n   * @standalone\n   * The calendars to choose from for the organizer / logged in user.\n   */\n  @Prop() calendars?: Calendar[];\n\n  /**\n   * @standalone\n   * The participant options passed in the additionalParticipants prop\n   * from the nylas-scheduler-editor component.\n   */\n  @Prop() participantOptions?: AdditionalParticipant[];\n\n  /**\n   * This event is fired when the participants custom availability changes.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n  }>;\n\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The state to store the custom availability setting for participants.\n   */\n  @State() selectedCalendars: {\n    [key: string]: {\n      isOpen: boolean;\n      name: string;\n      calendars?: Calendar[];\n    };\n  } = this.setParticipants(this.participants);\n\n  /**\n   * Participants calendar options.\n   */\n  @State() participantCalendars: {\n    [key: string]: Calendar[];\n  } = {};\n\n  /**\n   * The state to store the default selected calendars for each participant\n   */\n  @State() participantDefaultSelectedCalendars: {\n    [key: string]: string[];\n  } = {};\n\n  // Watchers\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-connected-calendars', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('calendars')\n  calendarsChangedHandler(newValue: Calendar[]) {\n    debug('nylas-connected-calendars', 'calendarsChangedHandler', newValue);\n    this.selectedCalendars = this.setParticipants(this.participants);\n    this.participantCalendars = this.getParticipantCalendarOptions(this.participants, this.participantOptions);\n  }\n\n  @Watch('participants')\n  participantsChangedHandler(newValue: Participant[]) {\n    debug('nylas-connected-calendars', 'participantsChangedHandler', newValue);\n    this.selectedCalendars = this.setParticipants(newValue);\n    this.participantCalendars = this.getParticipantCalendarOptions(newValue, this.participantOptions);\n  }\n\n  @Watch('participantOptions')\n  participantOptionsChangedHandler(newValue: AdditionalParticipant[]) {\n    debug('nylas-calendar-picker', 'participantOptionsChangedHandler', newValue);\n    this.selectedCalendars = this.setParticipants(this.participants);\n    this.participantCalendars = this.getParticipantCalendarOptions(this.participants, newValue);\n  }\n\n  @Watch('selectedConfiguration')\n  selectedConfigurationChangedHandler(newValue: Configuration) {\n    debug('nylas-calendar-picker', 'selectedConfigurationChangedHandler', newValue);\n    const participants = newValue?.participants || this.participants;\n    if (participants && participants.length > 0) {\n      this.selectedCalendars = this.setParticipants(participants);\n      this.participantCalendars = this.getParticipantCalendarOptions(participants, this.participantOptions);\n    }\n  }\n\n  getParticipantCalendarOptions(addedParticipants: Participant[], availableParticipantOptions: AdditionalParticipant[] | undefined) {\n    // Get the participants from the availableParticipantOptions prop that are in the addedParticipants prop\n    const organizer = addedParticipants?.find(participant => participant.is_organizer);\n    const isRoundRobinConfig = this.selectedConfiguration?.availability?.availability_rules?.availability_method !== 'collective';\n    const participantCalendars = {};\n    if (availableParticipantOptions) {\n      const participants = addedParticipants?.filter(participant => availableParticipantOptions.some(availableParticipant => availableParticipant.email === participant.email));\n      const remainingParticipants = addedParticipants?.filter(\n        participant => !availableParticipantOptions.some(availableParticipant => availableParticipant.email === participant.email),\n      );\n\n      // Get the calendar options for each participant with email as the key\n      participants?.forEach(participant => {\n        const participantOption = availableParticipantOptions?.find(participantOption => participantOption.email === participant.email);\n        if (!participantOption) return;\n        this.participantDefaultSelectedCalendars[participant.email] = participant.availability?.calendar_ids || [];\n        const calendars = participantOption.calendars ?? [];\n        participant.availability?.calendar_ids?.forEach(calendarId => {\n          if (!calendars?.some(calendar => calendar.id === calendarId) && calendarId !== 'primary') {\n            calendars.push({ id: calendarId, name: calendarId });\n          }\n        });\n        participantCalendars[participant.email] = calendars;\n      });\n      if (isRoundRobinConfig) {\n        // If it is round robin config, add the remaining participant calendars to the participantCalendars\n        // (Round-robin does not have an organizer, and we filtered out the participants not passed in the participantOptions prop,\n        // so we need to add the remaining participants calendars to the participantCalendars)\n        remainingParticipants?.forEach(participant => {\n          if (participant?.availability?.calendar_ids && participant?.availability?.calendar_ids?.length > 0 && !participant.is_organizer) {\n            participantCalendars[participant.email] = this.calendars ?? [{ id: 'primary', name: participant.email }];\n            this.participantDefaultSelectedCalendars[participant.email] = participant.availability?.calendar_ids || [];\n          }\n        });\n      }\n    }\n\n    // Add the organizer's calendars to the participantCalendars\n    if (organizer) {\n      participantCalendars[organizer.email] = this.calendars ?? [{ id: 'primary', name: organizer.email }];\n      this.participantDefaultSelectedCalendars[organizer.email] = organizer.availability?.calendar_ids || [];\n    }\n    return participantCalendars;\n  }\n\n  // Lifecycle Methods\n  connectedCallback() {\n    debug('nylas-connected-calendars', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-connected-calendars', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-connected-calendars', 'componentWillLoad');\n  }\n\n  componentDidLoad() {\n    debug('nylas-connected-calendars', 'componentDidLoad');\n    if (this.selectedConfiguration) {\n      this.selectedCalendars = this.setParticipants(this.selectedConfiguration?.participants);\n      this.participantCalendars = this.getParticipantCalendarOptions(this.selectedConfiguration?.participants, this.participantOptions);\n    } else {\n      this.selectedCalendars = this.setParticipants(this.participants);\n      this.participantCalendars = this.getParticipantCalendarOptions(this.participants, this.participantOptions);\n    }\n  }\n\n  @Listen('valueChanged')\n  handleValueChanged(event: CustomEvent) {\n    debug('[nylas-editor-tabs]', 'handleValueChanged', event);\n    const { name, value } = event.detail;\n    if (!name.startsWith('participant-')) {\n      return;\n    }\n    // Validate the form\n    if (!this.connectedCalendarsFormRef.checkValidity()) {\n      this.internals.setValidity({ customError: true }, 'Please select at least one calendar for each participant.');\n      return;\n    } else {\n      this.internals.setValidity({});\n    }\n\n    const key = name.split('participant-')[1];\n    if (!this.selectedCalendars[key]) return;\n    this.selectedCalendars[key]['calendars'] = value;\n    this.selectedCalendars = { ...this.selectedCalendars };\n\n    const participantsCalendars = {};\n    Object.keys(this.selectedCalendars).forEach(key => {\n      participantsCalendars[key] = this.selectedCalendars[key].calendars;\n    });\n    this.internals.setFormValue(JSON.stringify(participantsCalendars), this.name);\n    this.valueChanged.emit({ value: JSON.stringify(participantsCalendars), name: this.name });\n  }\n\n  setParticipants(participants: Participant[]) {\n    const selectedParticipants = {};\n    participants?.forEach(participant => {\n      if (participant?.availability?.calendar_ids && participant?.availability?.calendar_ids?.length > 0) {\n        const isOpen = participant.is_organizer ? true : false;\n        selectedParticipants[participant.email] = {\n          isOpen: isOpen,\n          name: participant.name || participant.email,\n          availability: participant.availability,\n        };\n      }\n    });\n    return selectedParticipants;\n  }\n  @RegisterComponent<NylasConnectedCalendars, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-connected-calendars',\n    stateToProps: new Map([\n      ['schedulerConfig.additionalParticipants', 'participantOptions'],\n      ['schedulerConfig.calendars', 'calendars'],\n      ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],\n    ]),\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <div class=\"nylas-connected-calendars\" part=\"nccals\">\n          <div class=\"header\" part=\"nccals__header\">\n            <h3>Connected Calendars</h3>\n            <p>\n              Select the calendars to use for checking your availability.\n              <tooltip-component>\n                <info-icon slot=\"tooltip-icon\" />\n                <span slot=\"tooltip-content\">\n                  Check availability across one or more calendars. If you select multiple calendars for a participant, the participant must be available across all of their\n                  calendars to be considered available.\n                </span>\n              </tooltip-component>\n            </p>\n          </div>\n          <div class=\"content\" part=\"nccals__content\">\n            <form ref={el => (this.connectedCalendarsFormRef = el as HTMLFormElement)}>\n              {Object.keys(this.participantCalendars).map((key, index) => {\n                const participant = this.selectedCalendars[key];\n                const participantCalendars = this.participantCalendars[key];\n                if (!participant || !participant.name) return;\n                return (\n                  <div class=\"participant-container\" part=\"nccals__container\" key={`participant-conatiner-${index}`}>\n                    <div class=\"participant-title\" part=\"nccals__title\">\n                      <p>{participant.name}'s connected calendars</p>\n                      <div class=\"participant-toggle\" part=\"nccals__toggle-container\">\n                        <span\n                          class={`chevron ${participant.isOpen ? 'open' : 'closed'}`}\n                          onClick={() => {\n                            this.selectedCalendars[key].isOpen = !participant.isOpen;\n                            this.selectedCalendars = { ...this.selectedCalendars };\n                          }}\n                        >\n                          <chevron-icon width=\"24\" height=\"24\" />\n                        </span>\n                      </div>\n                    </div>\n                    {participant.isOpen && (\n                      <nylas-calendar-picker\n                        key={key}\n                        name={`participant-${key}`}\n                        calendars={participantCalendars}\n                        defaultSelectedCalendars={this.participantDefaultSelectedCalendars[key]}\n                      />\n                    )}\n                  </div>\n                );\n              })}\n            </form>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/scheduler-editor/nylas-custom-booking-flow/nylas-custom-booking-flow.js

@@ -30,7 +30,7 @@ export class NylasCustomBookingFlow {
         checkForMissingSlots(['inputs'], this.el);
     }
     render() {
-        return (h(Host, { key: '9ac3169c2eff9023ac8b8059f14ae309af22d45a' }, h("nylas-form-card", { key: '02be9921b35d02afb300b272a2508871928514e3', exportparts: "nfc__header: ncbf__header" }, h("h1", { key: '0a7e4a9cc508c666cd0b5b3199b5e8fdbdcb9964', slot: "header-title", class: "nylas-custom-booking-flow__title", part: "ncbf__title" }, "Custom booking flow"), h("div", { key: '0416972885e9a3581b64677e297eb8cd10226bc8', slot: "content", class: "nylas-custom-booking-flow__content" }, h("slot", { key: '779f10585d3011df40021104b2ff8d9334544441', name: "inputs" })))));
+        return (h(Host, { key: 'd9e4b13338b50f21575a7c7f0fba18a5b2828fe8', part: "ncbflow" }, h("nylas-form-card", { key: '1f53c24698354fbf45ecd67ac24f690e36133cca', exportparts: "nfc__header: ncbflow__header" }, h("h1", { key: '680813d1aaf33014732e8cf3038a27f4ab4bd607', slot: "header-title", class: "nylas-custom-booking-flow__title", part: "ncbflow__title" }, "Custom booking flow"), h("div", { key: '2da6f6587e05e65cd1e2b35718168f665c3348c1', slot: "content", class: "nylas-custom-booking-flow__content", part: "ncbflow__content" }, h("slot", { key: '73937227f3a398779b0d1c97e525ca0bec593d85', name: "inputs" })))));
     }
     static get is() { return "nylas-custom-booking-flow"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scheduler-editor/nylas-custom-booking-flow/nylas-custom-booking-flow.js.map

@@ -1 +1 @@
-{"version":3,"file":"nylas-custom-booking-flow.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-custom-booking-flow/nylas-custom-booking-flow.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAEhE,OAAO,EAAE,oBAAoB,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAwB7E,MAAM,OAAO,sBAAsB;IASjC,iBAAiB;QACf,KAAK,CAAC,2BAA2B,EAAE,mBAAmB,CAAC,CAAC;IAC1D,CAAC;IACD,oBAAoB;QAClB,KAAK,CAAC,2BAA2B,EAAE,sBAAsB,CAAC,CAAC;IAC7D,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,2BAA2B,EAAE,mBAAmB,CAAC,CAAC;IAC1D,CAAC;IAED,gBAAgB;QACd,KAAK,CAAC,2BAA2B,EAAE,kBAAkB,CAAC,CAAC;QACvD,oBAAoB,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;IAC5C,CAAC;IAOD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,wEAAiB,WAAW,EAAC,2BAA2B;gBACtD,2DAAI,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,kCAAkC,EAAC,IAAI,EAAC,aAAa,0BAE9E;gBACL,4DAAK,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,oCAAoC;oBAC5D,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACU,CACb,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;CACF;AAdC;IALC,iBAAiB,CAA4G;QAC5H,IAAI,EAAE,2BAA2B;QACjC,YAAY,EAAE,EAAE;QAChB,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;oDAcD","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { checkForMissingSlots, debug } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Host, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\n/**\n * The `nylas-custom-booking-flow` component is an input form for booking type (automatically or manually accept bookings) and confirmation redirect URL (default or custom).\n * This component is a container for the `nylas-booking-confirmation-type`, `nylas-booking-confirmation-redirect` components.\n *\n * ```html\n * <nylas-custom-booking-flow>\n *   <div slot=\"inputs\">\n *     <nylas-booking-confirmation-type></nylas-booking-confirmation-type>\n *     <nylas-booking-confirmation-redirect></nylas-booking-confirmation-redirect>\n *   </div>\n * </nylas-custom-booking-flow>\n * ```\n *\n * @slot inputs - The custom booking flow inputs. This includes the booking type, confirmation redirect type, and custom redirect URL components.\n */\n@Component({\n  tag: 'nylas-custom-booking-flow',\n  styleUrl: 'nylas-custom-booking-flow.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasCustomBookingFlow {\n  @Element() el!: HTMLElement;\n\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  // Lifecycle methods\n  connectedCallback() {\n    debug('nylas-custom-booking-flow', 'connectedCallback');\n  }\n  disconnectedCallback() {\n    debug('nylas-custom-booking-flow', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-custom-booking-flow', 'componentWillLoad');\n  }\n\n  componentDidLoad() {\n    debug('nylas-custom-booking-flow', 'componentDidLoad');\n    checkForMissingSlots(['inputs'], this.el);\n  }\n\n  @RegisterComponent<NylasCustomBookingFlow, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-custom-booking-flow',\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <nylas-form-card exportparts=\"nfc__header: ncbf__header\">\n          <h1 slot=\"header-title\" class=\"nylas-custom-booking-flow__title\" part=\"ncbf__title\">\n            Custom booking flow\n          </h1>\n          <div slot=\"content\" class=\"nylas-custom-booking-flow__content\">\n            <slot name=\"inputs\"></slot>\n          </div>\n        </nylas-form-card>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"nylas-custom-booking-flow.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-custom-booking-flow/nylas-custom-booking-flow.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAEhE,OAAO,EAAE,oBAAoB,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAwB7E,MAAM,OAAO,sBAAsB;IASjC,iBAAiB;QACf,KAAK,CAAC,2BAA2B,EAAE,mBAAmB,CAAC,CAAC;IAC1D,CAAC;IACD,oBAAoB;QAClB,KAAK,CAAC,2BAA2B,EAAE,sBAAsB,CAAC,CAAC;IAC7D,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,2BAA2B,EAAE,mBAAmB,CAAC,CAAC;IAC1D,CAAC;IAED,gBAAgB;QACd,KAAK,CAAC,2BAA2B,EAAE,kBAAkB,CAAC,CAAC;QACvD,oBAAoB,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;IAC5C,CAAC;IAOD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,SAAS;YAClB,wEAAiB,WAAW,EAAC,8BAA8B;gBACzD,2DAAI,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,kCAAkC,EAAC,IAAI,EAAC,gBAAgB,0BAEjF;gBACL,4DAAK,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,oCAAoC,EAAC,IAAI,EAAC,kBAAkB;oBACpF,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACU,CACb,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;CACF;AAdC;IALC,iBAAiB,CAA4G;QAC5H,IAAI,EAAE,2BAA2B;QACjC,YAAY,EAAE,EAAE;QAChB,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;oDAcD","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { checkForMissingSlots, debug } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Host, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\n/**\n * The `nylas-custom-booking-flow` component is an input form for booking type (automatically or manually accept bookings) and confirmation redirect URL (default or custom).\n * This component is a container for the `nylas-booking-confirmation-type`, `nylas-booking-confirmation-redirect` components.\n *\n * ```html\n * <nylas-custom-booking-flow>\n *   <div slot=\"inputs\">\n *     <nylas-booking-confirmation-type></nylas-booking-confirmation-type>\n *     <nylas-booking-confirmation-redirect></nylas-booking-confirmation-redirect>\n *   </div>\n * </nylas-custom-booking-flow>\n * ```\n *\n * @slot inputs - The custom booking flow inputs. This includes the booking type, confirmation redirect type, and custom redirect URL components.\n */\n@Component({\n  tag: 'nylas-custom-booking-flow',\n  styleUrl: 'nylas-custom-booking-flow.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasCustomBookingFlow {\n  @Element() el!: HTMLElement;\n\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  // Lifecycle methods\n  connectedCallback() {\n    debug('nylas-custom-booking-flow', 'connectedCallback');\n  }\n  disconnectedCallback() {\n    debug('nylas-custom-booking-flow', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-custom-booking-flow', 'componentWillLoad');\n  }\n\n  componentDidLoad() {\n    debug('nylas-custom-booking-flow', 'componentDidLoad');\n    checkForMissingSlots(['inputs'], this.el);\n  }\n\n  @RegisterComponent<NylasCustomBookingFlow, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-custom-booking-flow',\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host part=\"ncbflow\">\n        <nylas-form-card exportparts=\"nfc__header: ncbflow__header\">\n          <h1 slot=\"header-title\" class=\"nylas-custom-booking-flow__title\" part=\"ncbflow__title\">\n            Custom booking flow\n          </h1>\n          <div slot=\"content\" class=\"nylas-custom-booking-flow__content\" part=\"ncbflow__content\">\n            <slot name=\"inputs\"></slot>\n          </div>\n        </nylas-form-card>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/scheduler-editor/nylas-custom-event-slug/nylas-custom-event-slug.js

@@ -43,6 +43,7 @@ export class NylasCustomEventSlug {
             this.selectedConfigurationChangedHandler(this.selectedConfiguration);
         }
         else {
+            console.log('No selected configuration found');
             this.urlSlug = this.defaultUrlSlug || '';
         }
     }