@nylas/web-elements 1.1.0-canary.4 → 1.1.0-canary.7

package/dist/components/nylas-composer2.js.map

@@ -1 +1 @@
-{"file":"nylas-composer2.js","mappings":"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","names":[],"sources":["src/components/mailbox/nylas-composer/nylas-composer.scss?tag=nylas-composer&encapsulation=shadow","src/components/mailbox/nylas-composer/nylas-composer.tsx"],"sourcesContent":[":host {\n  display: grid;\n  color: var(--nylas-color-primary-900);\n}\n\n.editor {\n  position: relative;\n  display: block;\n  max-height: 300px;\n  overflow: auto;\n\n  padding: 1rem;\n\n  border: 1px solid var(--nylas-color-primary-300);\n\n  blockquote {\n    visibility: hidden;\n    overflow: hidden;\n    position: relative;\n    transition: height 0.3s ease;\n    margin: 0;\n  }\n\n  blockquote::before {\n    content: '...';\n    visibility: visible;\n    opacity: 1;\n    position: absolute;\n    top: 0;\n    left: 0;\n    background-color: var(--nylas-color-primary-300);\n    width: 20px;\n    text-align: center;\n    color: var(--nylas-color-primary-800);\n    vertical-align: middle;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    align-self: center;\n    cursor: pointer;\n  }\n\n  .collapsed {\n    height: 20px;\n  }\n\n  .expanded {\n    visibility: visible;\n    opacity: 1;\n    height: auto; /* Height to fit the content */\n    margin: 0px 0px 0px 0.8ex;\n    border-left: 1px solid var(--nylas-color-primary-300);\n    padding-left: 1rem;\n  }\n\n  .expanded::before {\n    display: none; /* Hide the '...' when content is expanded */\n  }\n}\n\n.buttons {\n  display: flex;\n\n  margin-top: 1rem;\n\n  justify-content: space-between;\n\n  sp-button {\n    border-radius: var(--nylas-border-radius);\n    background-color: var(--nylas-color-primary-400);\n    color: var(--nylas-color-primary-900);\n    fill: var(--nylas-color-primary-900);\n\n    &:hover {\n      background-color: var(--nylas-color-primary-500);\n    }\n\n    &:disabled {\n      background-color: var(--nylas-color-primary-200);\n      color: var(--nylas-color-primary-600);\n      cursor: not-allowed;\n    }\n\n    & chevron-icon {\n      display: inline-block;\n    }\n  }\n\n  .close {\n    justify-self: end;\n  }\n}\n\n.toolbar {\n  position: absolute;\n  display: none;\n  background-color: var(--nylas-color-primary-200);\n  border-radius: var(--nylas-border-radius);\n  z-index: 1;\n\n  sp-button {\n    border: 0;\n  }\n}\n","import { debug } from '@/utils/utils';\nimport { Message } from '@nylas/core';\nimport { Component, Event, EventEmitter, Element, Prop, Watch, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'nylas-composer',\n  styleUrl: 'nylas-composer.scss',\n  shadow: true,\n})\nexport class NylasComposer {\n  /**\n   * The host element\n   */\n  @Element() readonly host!: HTMLElement;\n\n  /**\n   * The message to reply to or forward\n   */\n  @Prop() readonly message?: Message;\n\n  /**\n   * The view email element\n   */\n  @Prop() readonly viewEmailElement?: HTMLNylasViewEmailElement | null;\n\n  /**\n   * Fired when the composer is closed\n   */\n  @Event() readonly close!: EventEmitter<MouseEvent>;\n\n  /**\n   * Fired when the send button is clicked\n   */\n  @Event() readonly send!: EventEmitter<{\n    message: Message;\n    replyBody: string;\n  }>;\n\n  /**\n   * The editor element\n   */\n  private editorEl?: HTMLDivElement;\n\n  /**\n   * The toolbar element\n   */\n  private toolbarEl?: HTMLDivElement;\n\n  connectedCallback() {}\n\n  disconnectedCallback() {\n    if (this.editorEl) {\n      this.editorEl.innerHTML = '';\n    }\n  }\n\n  componentWillLoad() {}\n\n  async componentDidLoad() {\n    if (this.message) {\n      this.watchBody(this.message);\n    }\n\n    if (!this.editorEl) {\n      debug('[connectedCallback] no editor element');\n      return;\n    }\n\n    if (!this.toolbarEl) {\n      debug('[connectedCallback] no toolbar element');\n      return;\n    }\n\n    const editorEl = this.editorEl;\n    const toolbarEl = this.toolbarEl;\n\n    // On highlight, show the toolbar\n    editorEl.addEventListener('mouseup', _ => {\n      interface ShadowRootWithSelection extends ShadowRoot {\n        getSelection(): Selection | null;\n      }\n\n      const selection: Selection | null = (this.host.shadowRoot as ShadowRootWithSelection)?.getSelection();\n      if (!selection) {\n        debug('no selection');\n        return;\n      }\n\n      // Get range\n      const range = selection.getRangeAt(0);\n\n      // Get text selection\n      const text = selection.toString();\n      if (!text) {\n        toolbarEl.style.display = 'none';\n        return;\n      }\n\n      // Find .message-body in the editor\n      const messageBody = editorEl.querySelector('.message-body');\n      if (!messageBody) {\n        debug('no message body');\n        return;\n      }\n\n      // Get commonAncestorContainer\n      const foundNode = range.commonAncestorContainer;\n\n      // Get rect\n      const foundElement = foundNode.parentElement;\n\n      // If we didn't find the text, then don't show the toolbar\n      if (!foundElement) {\n        return;\n      }\n\n      // Get the bounding rect of the message body\n      const messageBodyRect = messageBody.getBoundingClientRect();\n      debug('messageBodyRect', { messageBodyRect });\n\n      const foundRect = foundElement.getBoundingClientRect();\n      debug('foundRect', { foundRect });\n\n      // Find the text position within the found node\n      // without using document.createRange()\n\n      // Get the text node\n      const textNode = foundElement.childNodes[0];\n\n      // Get the text content\n      const textContent = textNode.textContent || '';\n\n      // Get the text position\n      const textPosition = textContent.indexOf(text);\n\n      // Calcualte the font width\n      const fontSize = window.getComputedStyle(foundElement).fontSize;\n      const fontSizeNumber = parseInt(fontSize.replace('px', ''), 10);\n\n      // Top\n      const top = foundRect.top - messageBodyRect.top - toolbarEl.clientHeight;\n      const left = textPosition * (1 / fontSizeNumber) * 100;\n\n      // Position the toolbar\n      toolbarEl.style.top = `${top}px`;\n      toolbarEl.style.left = `${left}px`;\n      toolbarEl.style.display = 'block';\n    });\n  }\n\n  @Watch('message')\n  watchBody(newMessage: Message) {\n    if (!this.editorEl) {\n      debug('no editor element');\n      return;\n    }\n\n    // Find .message-body elements and remove them\n    this.editorEl.querySelectorAll('.message-body').forEach(el => el.remove());\n\n    // Create a container for the body of the reply\n    const messageBody = document.createElement('div');\n    messageBody.classList.add('message-body');\n\n    // Add an empty paragraph to the reply body\n    const emptyParagraph = document.createElement('p');\n    emptyParagraph.innerHTML = '&nbsp;';\n    messageBody.appendChild(emptyParagraph);\n\n    // Also add a break to separate the reply from the rest of the email\n    const br = document.createElement('br');\n    messageBody.appendChild(br);\n\n    // Append a reply header\n    const replyText = document.createElement('div');\n    replyText.classList.add('reply-text');\n    replyText.innerText = `On ${new Date(newMessage.date * 1000).toLocaleDateString(undefined, { dateStyle: 'full' })} <${newMessage.from\n      ?.map(from => from.name || from.email)\n      .join(', ')}> wrote:`;\n    messageBody.appendChild(replyText);\n\n    // If we have a reply body, separate the contents with a horizontal rule\n    if (newMessage.body) {\n      // For the reply HTML, we want to wrap the contents in a custom element\n      // with a shadow root. This will allow us to style the contents of the\n      // reply without affecting the rest of the page.\n\n      // First convert the HTML string to a DOM element\n      const replyElement = document.createElement('html');\n      replyElement.innerHTML = newMessage.body;\n\n      const replyContainer = document.createElement('blockquote');\n      replyContainer.classList.add('collapsed');\n      replyContainer.classList.add('gmail_quote');\n\n      // Now add the reply element to the container\n      replyContainer.innerHTML = replyElement.innerHTML;\n\n      messageBody.appendChild(replyContainer);\n\n      debug('replyContainer', { replyContainer });\n    }\n\n    // Add the message body to the editor\n    this.editorEl.appendChild(messageBody);\n\n    this.editorEl.querySelectorAll('blockquote.collapsed').forEach(blockquote => {\n      blockquote.addEventListener(\n        'click',\n        function (event) {\n          event.preventDefault();\n          const el = event.target as HTMLElement;\n          el.classList.remove('collapsed');\n          el.classList.add('expanded');\n        },\n        { once: true },\n      );\n    });\n\n    // Focus the editor\n    this.editorEl.focus();\n  }\n\n  private closeComposer = (event: MouseEvent) => {\n    this.close.emit(event);\n  };\n\n  private sendComposer = (event: MouseEvent) => {\n    if (!this.editorEl) {\n      debug('no editor element');\n      return;\n    }\n\n    const messageBody = this.editorEl.querySelector('.message-body');\n    if (!messageBody) {\n      debug('no message body');\n      return;\n    }\n\n    // Send the message\n    if (this.message) {\n      this.send.emit({\n        message: this.message,\n        replyBody: messageBody.querySelector('.message-body')?.innerHTML || '',\n      });\n\n      // Close the composer\n      this.close.emit(event);\n\n      // Clear the editor\n      this.editorEl.innerHTML = '';\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        <sp-theme scale=\"medium\" color=\"dark\">\n          <div class=\"editor\" contentEditable={true} ref={r => (this.editorEl = r)}>\n            <div class=\"toolbar\" ref={r => (this.toolbarEl = r)} contentEditable={false}>\n              <sp-button quiet onClick={() => document.execCommand('bold')}>\n                <div slot=\"icon\">\n                  <bold-icon></bold-icon>\n                </div>\n                <div slot=\"label\">Bold</div>\n              </sp-button>\n              <sp-button quiet onClick={() => document.execCommand('underline')}>\n                <div slot=\"icon\">\n                  <underline-icon></underline-icon>\n                </div>\n                <div slot=\"label\">Underline</div>\n              </sp-button>\n              <sp-button quiet onClick={() => document.execCommand('italic')}>\n                <div slot=\"icon\">\n                  <italic-icon></italic-icon>\n                </div>\n                <div slot=\"label\">Italic</div>\n              </sp-button>\n            </div>\n          </div>\n          <div class={'buttons'}>\n            <sp-button onClick={this.sendComposer} class=\"send\">\n              Send\n            </sp-button>\n            <sp-button onClick={this.closeComposer} class=\"close\">\n              Close\n            </sp-button>\n          </div>\n        </sp-theme>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nylas-composer2.js","mappings":"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","names":[],"sources":["src/components/mailbox/nylas-composer/nylas-composer.scss?tag=nylas-composer&encapsulation=shadow","src/components/mailbox/nylas-composer/nylas-composer.tsx"],"sourcesContent":[":host {\n  display: grid;\n  color: var(--nylas-color-primary-900);\n}\n\n.editor {\n  position: relative;\n  display: block;\n  max-height: 300px;\n  overflow: auto;\n\n  padding: 1rem;\n\n  border: 1px solid var(--nylas-color-primary-300);\n\n  blockquote {\n    visibility: hidden;\n    overflow: hidden;\n    position: relative;\n    transition: height 0.3s ease;\n    margin: 0;\n  }\n\n  blockquote::before {\n    content: '...';\n    visibility: visible;\n    opacity: 1;\n    position: absolute;\n    top: 0;\n    left: 0;\n    background-color: var(--nylas-color-primary-300);\n    width: 20px;\n    text-align: center;\n    color: var(--nylas-color-primary-800);\n    vertical-align: middle;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    align-self: center;\n    cursor: pointer;\n  }\n\n  .collapsed {\n    height: 20px;\n  }\n\n  .expanded {\n    visibility: visible;\n    opacity: 1;\n    height: auto; /* Height to fit the content */\n    margin: 0px 0px 0px 0.8ex;\n    border-left: 1px solid var(--nylas-color-primary-300);\n    padding-left: 1rem;\n  }\n\n  .expanded::before {\n    display: none; /* Hide the '...' when content is expanded */\n  }\n}\n\n.buttons {\n  display: flex;\n\n  margin-top: 1rem;\n\n  justify-content: space-between;\n\n  sp-button {\n    border-radius: var(--nylas-border-radius);\n    background-color: var(--nylas-color-primary-400);\n    color: var(--nylas-color-primary-900);\n    fill: var(--nylas-color-primary-900);\n\n    &:hover {\n      background-color: var(--nylas-color-primary-500);\n    }\n\n    &:disabled {\n      background-color: var(--nylas-color-primary-200);\n      color: var(--nylas-color-primary-600);\n      cursor: not-allowed;\n    }\n\n    & chevron-icon {\n      display: inline-block;\n    }\n  }\n\n  .close {\n    justify-self: end;\n  }\n}\n\n.toolbar {\n  position: absolute;\n  display: none;\n  background-color: var(--nylas-color-primary-200);\n  border-radius: var(--nylas-border-radius);\n  z-index: 1;\n\n  sp-button {\n    border: 0;\n  }\n}\n","import { debug } from '@/utils/utils';\nimport { Message } from '@nylas/core';\nimport { Component, Event, EventEmitter, Element, Prop, Watch, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'nylas-composer',\n  styleUrl: 'nylas-composer.scss',\n  shadow: true,\n})\nexport class NylasComposer {\n  /**\n   * The host element\n   */\n  @Element() readonly host!: HTMLElement;\n\n  /**\n   * The message to reply to or forward\n   */\n  @Prop() readonly message?: Message;\n\n  /**\n   * The view email element\n   */\n  @Prop() readonly viewEmailElement?: HTMLNylasViewEmailElement | null;\n\n  /**\n   * Fired when the composer is closed\n   */\n  @Event() readonly close!: EventEmitter<MouseEvent>;\n\n  /**\n   * Fired when the send button is clicked\n   */\n  @Event() readonly send!: EventEmitter<{\n    message: Message;\n    replyBody: string;\n  }>;\n\n  /**\n   * The editor element\n   */\n  private editorEl?: HTMLDivElement;\n\n  /**\n   * The toolbar element\n   */\n  private toolbarEl?: HTMLDivElement;\n\n  connectedCallback() {}\n\n  disconnectedCallback() {\n    if (this.editorEl) {\n      this.editorEl.innerHTML = '';\n    }\n  }\n\n  componentWillLoad() {}\n\n  async componentDidLoad() {\n    if (this.message) {\n      this.watchBody(this.message);\n    }\n\n    if (!this.editorEl) {\n      debug('[connectedCallback] no editor element');\n      return;\n    }\n\n    if (!this.toolbarEl) {\n      debug('[connectedCallback] no toolbar element');\n      return;\n    }\n\n    const editorEl = this.editorEl;\n    const toolbarEl = this.toolbarEl;\n\n    // On highlight, show the toolbar\n    editorEl.addEventListener('mouseup', _ => {\n      interface ShadowRootWithSelection extends ShadowRoot {\n        getSelection(): Selection | null;\n      }\n\n      const selection: Selection | null = (this.host.shadowRoot as ShadowRootWithSelection)?.getSelection();\n      if (!selection) {\n        debug('no selection');\n        return;\n      }\n\n      // Get range\n      const range = selection.getRangeAt(0);\n\n      // Get text selection\n      const text = selection.toString();\n      if (!text) {\n        toolbarEl.style.display = 'none';\n        return;\n      }\n\n      // Find .message-body in the editor\n      const messageBody = editorEl.querySelector('.message-body');\n      if (!messageBody) {\n        debug('no message body');\n        return;\n      }\n\n      // Get commonAncestorContainer\n      const foundNode = range.commonAncestorContainer;\n\n      // Get rect\n      const foundElement = foundNode.parentElement;\n\n      // If we didn't find the text, then don't show the toolbar\n      if (!foundElement) {\n        return;\n      }\n\n      // Get the bounding rect of the message body\n      const messageBodyRect = messageBody.getBoundingClientRect();\n      debug('messageBodyRect', { messageBodyRect });\n\n      const foundRect = foundElement.getBoundingClientRect();\n      debug('foundRect', { foundRect });\n\n      // Find the text position within the found node\n      // without using document.createRange()\n\n      // Get the text node\n      const textNode = foundElement.childNodes[0];\n\n      // Get the text content\n      const textContent = textNode.textContent || '';\n\n      // Get the text position\n      const textPosition = textContent.indexOf(text);\n\n      // Calcualte the font width\n      const fontSize = window.getComputedStyle(foundElement).fontSize;\n      const fontSizeNumber = parseInt(fontSize.replace('px', ''), 10);\n\n      // Top\n      const top = foundRect.top - messageBodyRect.top - toolbarEl.clientHeight;\n      const left = textPosition * (1 / fontSizeNumber) * 100;\n\n      // Position the toolbar\n      toolbarEl.style.top = `${top}px`;\n      toolbarEl.style.left = `${left}px`;\n      toolbarEl.style.display = 'block';\n    });\n  }\n\n  @Watch('message')\n  watchBody(newMessage: Message) {\n    if (!this.editorEl) {\n      debug('no editor element');\n      return;\n    }\n\n    // Find .message-body elements and remove them\n    this.editorEl.querySelectorAll('.message-body').forEach(el => el.remove());\n\n    // Create a container for the body of the reply\n    const messageBody = document.createElement('div');\n    messageBody.classList.add('message-body');\n\n    // Add an empty paragraph to the reply body\n    const emptyParagraph = document.createElement('p');\n    emptyParagraph.innerHTML = '&nbsp;';\n    messageBody.appendChild(emptyParagraph);\n\n    // Also add a break to separate the reply from the rest of the email\n    const br = document.createElement('br');\n    messageBody.appendChild(br);\n\n    // Append a reply header\n    const replyText = document.createElement('div');\n    replyText.classList.add('reply-text');\n    replyText.innerText = `On ${new Date(newMessage.date * 1000).toLocaleDateString(undefined, { dateStyle: 'full' })} <${newMessage.from\n      ?.map(from => from.name || from.email)\n      .join(', ')}> wrote:`;\n    messageBody.appendChild(replyText);\n\n    // If we have a reply body, separate the contents with a horizontal rule\n    if (newMessage.body) {\n      // For the reply HTML, we want to wrap the contents in a custom element\n      // with a shadow root. This will allow us to style the contents of the\n      // reply without affecting the rest of the page.\n\n      // First convert the HTML string to a DOM element\n      const replyElement = document.createElement('html');\n      replyElement.innerHTML = newMessage.body;\n\n      const replyContainer = document.createElement('blockquote');\n      replyContainer.classList.add('collapsed');\n      replyContainer.classList.add('gmail_quote');\n\n      // Now add the reply element to the container\n      replyContainer.innerHTML = replyElement.innerHTML;\n\n      messageBody.appendChild(replyContainer);\n\n      debug('replyContainer', { replyContainer });\n    }\n\n    // Add the message body to the editor\n    this.editorEl.appendChild(messageBody);\n\n    this.editorEl.querySelectorAll('blockquote.collapsed').forEach(blockquote => {\n      blockquote.addEventListener(\n        'click',\n        function (event) {\n          event.preventDefault();\n          const el = event.target as HTMLElement;\n          el.classList.remove('collapsed');\n          el.classList.add('expanded');\n        },\n        { once: true },\n      );\n    });\n\n    // Focus the editor\n    this.editorEl.focus();\n  }\n\n  private closeComposer = (event: MouseEvent) => {\n    this.close.emit(event);\n  };\n\n  private sendComposer = (event: MouseEvent) => {\n    if (!this.editorEl) {\n      debug('no editor element');\n      return;\n    }\n\n    const messageBody = this.editorEl.querySelector('.message-body');\n    if (!messageBody) {\n      debug('no message body');\n      return;\n    }\n\n    // Send the message\n    if (this.message) {\n      this.send.emit({\n        message: this.message,\n        replyBody: messageBody.querySelector('.message-body')?.innerHTML || '',\n      });\n\n      // Close the composer\n      this.close.emit(event);\n\n      // Clear the editor\n      this.editorEl.innerHTML = '';\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        <sp-theme scale=\"medium\" color=\"dark\">\n          <div class=\"editor\" contentEditable={true} ref={r => (this.editorEl = r)}>\n            <div class=\"toolbar\" ref={r => (this.toolbarEl = r)} contentEditable={false}>\n              <sp-button quiet onClick={() => document.execCommand('bold')}>\n                <div slot=\"icon\">\n                  <bold-icon></bold-icon>\n                </div>\n                <div slot=\"label\">Bold</div>\n              </sp-button>\n              <sp-button quiet onClick={() => document.execCommand('underline')}>\n                <div slot=\"icon\">\n                  <underline-icon></underline-icon>\n                </div>\n                <div slot=\"label\">Underline</div>\n              </sp-button>\n              <sp-button quiet onClick={() => document.execCommand('italic')}>\n                <div slot=\"icon\">\n                  <italic-icon></italic-icon>\n                </div>\n                <div slot=\"label\">Italic</div>\n              </sp-button>\n            </div>\n          </div>\n          <div class={'buttons'}>\n            <sp-button onClick={this.sendComposer} class=\"send\">\n              Send\n            </sp-button>\n            <sp-button onClick={this.closeComposer} class=\"close\">\n              Close\n            </sp-button>\n          </div>\n        </sp-theme>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nylas-custom-booking-flow2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { R as RegisterComponent } from './register-component.js';
-import { d as debug } from './utils.js';
+import { a as debug } from './utils.js';
 import { d as defineCustomElement$5 } from './chevron.js';
 import { d as defineCustomElement$4 } from './info.js';
 import { d as defineCustomElement$3 } from './search.js';
@@ -30,10 +30,25 @@ const NylasCustomBookingFlow = proxyCustomElement(class NylasCustomBookingFlow e
         this.__attachShadow();
         this.valueChanged = createEvent(this, "valueChanged", 7);
         this.internals = this.attachInternals();
+        this.selectedConfiguration = undefined;
         this.name = 'booking-type';
         this.bookingType = '';
         this.selectedBookingType = '';
     }
+    elementNameChangedHandler(newValue) {
+        debug('nylas-custom-booking-flow', 'elementNameChangedHandler', newValue);
+        this.host.setAttribute('name', newValue);
+    }
+    selectedConfigurationChangedHandler(newValue, oldValue) {
+        debug('nylas-custom-booking-flow', 'selectedConfigurationChangedHandler', newValue, oldValue);
+        if (newValue?.event_booking?.booking_type) {
+            this.bookingType = newValue?.event_booking?.booking_type;
+        }
+        if (typeof this.internals.setFormValue === 'function') {
+            this.internals.setFormValue(this.bookingType.toString(), 'booking-calendar');
+        }
+        this.selectedBookingType = this.bookingType;
+    }
     connectedCallback() {
         debug('nylas-custom-booking-flow', 'connectedCallback');
     }
@@ -46,10 +61,6 @@ const NylasCustomBookingFlow = proxyCustomElement(class NylasCustomBookingFlow e
     }
     componentDidLoad() {
         debug('nylas-custom-booking-flow', 'componentDidLoad');
-        if (typeof this.internals.setFormValue === 'function') {
-            this.internals.setFormValue(this.bookingType.toString(), 'booking-calendar');
-        }
-        this.selectedBookingType = this.bookingType;
     }
     componentWillUpdate() {
         debug('nylas-custom-booking-flow', 'componentWillUpdate');
@@ -63,10 +74,6 @@ const NylasCustomBookingFlow = proxyCustomElement(class NylasCustomBookingFlow e
     componentDidRender() {
         debug('nylas-custom-booking-flow', 'componentDidRender');
     }
-    elementNameChangedHandler(newValue) {
-        debug('nylas-custom-booking-flow', 'elementNameChangedHandler', newValue);
-        this.host.setAttribute('name', newValue);
-    }
     selectedOptionChangedHandler(event) {
         debug('nylas-custom-booking-flow', 'selectedOptionChangedHandler', event.detail);
         const valueChanged = (event) => {
@@ -87,24 +94,28 @@ const NylasCustomBookingFlow = proxyCustomElement(class NylasCustomBookingFlow e
                 value: 'pre-booking',
             },
         ];
-        return (h(Host, { key: 'fe9e837aba8f846a0b77a21eee365080d41b4e57' }, h("div", { key: '2405db5290bcd44a602fd9f91bb91e13a9d7ffc7', class: "nylas-custom-booking-flow", part: "ncbf" }, h("div", { key: '2de829660fdba0da9e6cbcd6281c427b65414d90', class: "header", part: "ncbf__header" }, h("h3", { key: '13e3b9e450f54f04538c773ab2564513cdaf0fa5' }, "Customize booking flow"), h("p", { key: '9436439f81faf9aed4ff9029c5c0a08a268b5e59' }, "Customize how new bookings are handled when a booking is completed.")), bookingOptions.length > 0 ? (h("div", { class: "nylas-custom-booking-flow__dropdown" }, h("span", { class: "label" }, "After a booking is confirmed", h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, "Choose how you\u2019d like to handle new bookings. If you choose to manually confirm/decline bookings, you will be able to review and accept or decline each booking request."))), h("select-dropdown", { name: "booking-type", options: bookingOptions, withSearch: false, exportparts: "sd_dropdown: ncbf__dropdown, sd_dropdown-button: ncbf__dropdown-button, sd_dropdown-content: ncbf__dropdown-content", defaultSelectedOption: bookingOptions.find(cal => cal.value == this.bookingType) ?? bookingOptions[0] }))) : (h("div", { class: "nylas-custom-booking-flow__loading" }, h("span", { class: "label" }, "Select a calendar to book meetings on ", h("info-icon", null)), h("div", { class: "loading-button" }, h("span", null, "Loading...")))))));
+        return (h(Host, { key: '7f019073e242dce64522e27262298e480b0fb346' }, h("div", { key: '47bd77bcd4c4a1a9a845581bb6ad77b6dd7d65e7', class: "nylas-custom-booking-flow", part: "ncbf" }, h("div", { key: '17386ac59d7680789dda85e832c84061225b6b04', class: "header", part: "ncbf__header" }, h("h3", { key: '5368e8f321140f2bfaf60f6ca3f732f584824301' }, "Customize booking flow"), h("p", { key: '65a0d4d41804f41f7c01a682e4b8b97ebc2c4ef2' }, "Customize how new bookings are handled when a booking is completed.")), bookingOptions.length > 0 ? (h("div", { class: "nylas-custom-booking-flow__dropdown" }, h("span", { class: "label" }, "After a booking is confirmed", h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, "Choose how you\u2019d like to handle new bookings. If you choose to manually confirm/decline bookings, you will be able to review and accept or decline each booking request."))), h("select-dropdown", { name: "booking-type", options: bookingOptions, withSearch: false, exportparts: "sd_dropdown: ncbf__dropdown, sd_dropdown-button: ncbf__dropdown-button, sd_dropdown-content: ncbf__dropdown-content", defaultSelectedOption: bookingOptions.find(cal => cal.value == this.bookingType) ?? bookingOptions[0] }))) : (h("div", { class: "nylas-custom-booking-flow__loading" }, h("span", { class: "label" }, "Select a calendar to book meetings on ", h("info-icon", null)), h("div", { class: "loading-button" }, h("span", null, "Loading...")))))));
     }
     static get formAssociated() { return true; }
     get host() { return this; }
     static get watchers() { return {
-        "name": ["elementNameChangedHandler"]
+        "name": ["elementNameChangedHandler"],
+        "selectedConfiguration": ["selectedConfigurationChangedHandler"]
     }; }
     static get style() { return nylasCustomBookingFlowCss; }
 }, [65, "nylas-custom-booking-flow", {
+        "selectedConfiguration": [16],
         "name": [1],
         "bookingType": [1, "booking-type"],
         "selectedBookingType": [32]
     }, [[0, "selectedOptionChanged", "selectedOptionChangedHandler"]], {
-        "name": ["elementNameChangedHandler"]
+        "name": ["elementNameChangedHandler"],
+        "selectedConfiguration": ["selectedConfigurationChangedHandler"]
     }]);
 __decorate([
     RegisterComponent({
         name: 'nylas-custom-booking-flow',
+        stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),
         eventToProps: {
             valueChanged: async (event, _nylasSchedulerConfigConnector) => {
                 const { valueChanged } = event.detail;
@@ -157,7 +168,6 @@ function defineCustomElement() {
             break;
     } });
 }
-defineCustomElement(NylasCustomBookingFlow);
 
 export { NylasCustomBookingFlow as N, defineCustomElement as d };
 

package/dist/components/nylas-custom-booking-flow2.js.map

@@ -1 +1 @@
-{"file":"nylas-custom-booking-flow2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-custom-booking-flow/nylas-custom-booking-flow.scss?tag=nylas-custom-booking-flow&encapsulation=shadow","src/components/scheduler-editor/nylas-custom-booking-flow/nylas-custom-booking-flow.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  @include default-css-variables;\n  width: inherit;\n}\n\n.nylas-custom-booking-flow {\n  width: inherit;\n  display: flex;\n  flex-direction: column;\n  margin: 1rem;\n  border-radius: var(--nylas-border-radius-2x);\n  border: 1px solid var(--nylas-base-200);\n  .header {\n    padding: 1rem;\n    border-bottom: 1px solid var(--nylas-base-200);\n    h3 {\n      margin: 0;\n      font-size: 1rem;\n      font-weight: 600;\n      line-height: 20px;\n      color: var(--nylas-base-900);\n      text-align: left;\n    }\n    p {\n      margin: 0.25rem 0 0 0;\n      font-size: 0.875rem;\n      font-weight: 400;\n      line-height: 20px;\n      color: var(--nylas-base-600);\n      text-align: left;\n    }\n  }\n  .nylas-custom-booking-flow__loading {\n    padding-bottom: 1rem;\n    .label {\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n      margin: 1rem 1rem 0;\n      color: var(--nylas-base-800);\n    }\n    .loading-button {\n      margin: 0 1rem;\n      padding: 0;\n      width: inherit;\n      height: 48px;\n      color: black;\n      font-size: 1rem;\n      cursor: not-allowed;\n      display: flex;\n      gap: 0.5rem;\n      justify-content: space-between;\n      align-items: center;\n      background: transparent;\n      border: 1px solid var(--nylas-base-200);\n      border-radius: var(--nylas-border-radius-2x);\n      span {\n        padding: 0 1rem;\n      }\n    }\n  }\n  .nylas-custom-booking-flow__dropdown {\n    padding: 1rem;\n    span.label {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      color: var(--nylas-base-800);\n      tooltip-component {\n        display: flex;\n      }\n    }\n    select-dropdown::part(sd_dropdown) {\n      width: 100%;\n    }\n    select-dropdown::part(sd_dropdown-button) {\n      width: 100%;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      border: 1px solid var(--nylas-base-200);\n      border-radius: var(--nylas-border-radius-2x);\n      padding: 1rem;\n    }\n    select-dropdown::part(sd_dropdown-content) {\n      width: 100%;\n      max-width: unset;\n    }\n    select-dropdown::part(sd_dropdown-button-selected-label) {\n      max-width: calc(100% - 2rem);\n      font-family: var(--nylas-font-family);\n      font-size: 16px;\n      line-height: 24px;\n    }\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, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\n/**\n * The `nylas-custom-booking-flow` component is a UI component that displays the booking calendar picker.\n * @part ncbf - The custom booking flow container\n * @part ncbf__header - The header of the custom booking flow\n * @part ncbf__dropdown - The dropdown container\n * @part ncbf__dropdown-button - The dropdown button\n * @part ncbf__dropdown-content - The dropdown content\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() host!: HTMLNylasCustomBookingFlowElement;\n  /**\n   * The name of the calendar picker.\n   */\n  @Prop() name: string = 'booking-type';\n  /**\n   * The booking type.\n   */\n  @Prop() bookingType: string = '';\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The selected bookingType.\n   */\n  @State() selectedBookingType: string = '';\n\n  /**\n   * This event is fired when the selected bookingType changes.\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-custom-booking-flow', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-custom-booking-flow', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-custom-booking-flow', '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-custom-booking-flow', 'componentDidLoad');\n    // TODO: Remove this when the internals in tests are fixed.\n    if (typeof this.internals.setFormValue === 'function') {\n      this.internals.setFormValue(this.bookingType.toString(), 'booking-calendar');\n    }\n    this.selectedBookingType = this.bookingType;\n  }\n\n  componentWillUpdate() {\n    debug('nylas-custom-booking-flow', 'componentWillUpdate');\n  }\n\n  componentDidUpdate() {\n    debug('nylas-custom-booking-flow', 'componentDidUpdate');\n  }\n\n  componentWillRender() {\n    debug('nylas-custom-booking-flow', 'componentWillRender');\n  }\n\n  componentDidRender() {\n    debug('nylas-custom-booking-flow', 'componentDidRender');\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-custom-booking-flow', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Listen('selectedOptionChanged')\n  selectedOptionChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('nylas-custom-booking-flow', 'selectedOptionChangedHandler', event.detail);\n    // Pass as handler so that if event.defaultPrevented by parent app, this will be skipped.\n    const valueChanged = (event: CustomEvent<{ value: string; name: string }>) => {\n      const { value } = event.detail;\n      this.selectedBookingType = value;\n      this.internals.setFormValue(value.toString(), 'booking-calendar');\n    };\n    this.valueChanged.emit({ ...event.detail, valueChanged });\n  }\n\n  @RegisterComponent<NylasCustomBookingFlow, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-custom-booking-flow',\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 bookingOptions = [\n      {\n        label: 'Automatically accept bookings',\n        value: 'booking',\n      },\n      {\n        label: 'Manually confirm/decline bookings',\n        value: 'pre-booking',\n      },\n    ];\n\n    return (\n      <Host>\n        <div class=\"nylas-custom-booking-flow\" part=\"ncbf\">\n          <div class=\"header\" part=\"ncbf__header\">\n            <h3>Customize booking flow</h3>\n            <p>Customize how new bookings are handled when a booking is completed.</p>\n          </div>\n\n          {bookingOptions.length > 0 ? (\n            <div class=\"nylas-custom-booking-flow__dropdown\">\n              <span class=\"label\">\n                After a booking is confirmed\n                <tooltip-component>\n                  <info-icon slot=\"tooltip-icon\" />\n                  <span slot=\"tooltip-content\">\n                    Choose how you’d like to handle new bookings. If you choose to manually confirm/decline bookings, you will be able to review and accept or decline each booking\n                    request.\n                  </span>\n                </tooltip-component>\n              </span>\n              <select-dropdown\n                name=\"booking-type\"\n                options={bookingOptions}\n                withSearch={false}\n                exportparts=\"sd_dropdown: ncbf__dropdown, sd_dropdown-button: ncbf__dropdown-button, sd_dropdown-content: ncbf__dropdown-content\"\n                defaultSelectedOption={bookingOptions.find(cal => cal.value == this.bookingType) ?? bookingOptions[0]}\n              />\n            </div>\n          ) : (\n            <div class=\"nylas-custom-booking-flow__loading\">\n              <span class=\"label\">\n                Select a calendar to book meetings on <info-icon />\n              </span>\n              <div class=\"loading-button\">\n                <span>Loading...</span>\n              </div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nylas-custom-booking-flow2.js","mappings":";;;;;;;;;AAAA,MAAM,yBAAyB,GAAG,44FAA44F;;;;;;;;;;;;;;;;MCqBj6F,sBAAsB;;;;;;;;oBAUV,cAAc;2BAIP,EAAE;mCASO,EAAE;;IAiBzC,yBAAyB,CAAC,QAAgB;QACxC,KAAK,CAAC,2BAA2B,EAAE,2BAA2B,EAAE,QAAQ,CAAC,CAAC;QAC1E,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;KAC1C;IAGD,mCAAmC,CAAC,QAAuB,EAAE,QAAuB;QAClF,KAAK,CAAC,2BAA2B,EAAE,qCAAqC,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAC9F,IAAI,QAAQ,EAAE,aAAa,EAAE,YAAY,EAAE;YACzC,IAAI,CAAC,WAAW,GAAG,QAAQ,EAAE,aAAa,EAAE,YAAY,CAAC;SAC1D;QAED,IAAI,OAAO,IAAI,CAAC,SAAS,CAAC,YAAY,KAAK,UAAU,EAAE;YACrD,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE,EAAE,kBAAkB,CAAC,CAAC;SAC9E;QACD,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,WAAW,CAAC;KAC7C;IAGD,iBAAiB;QACf,KAAK,CAAC,2BAA2B,EAAE,mBAAmB,CAAC,CAAC;KACzD;IAED,oBAAoB;QAClB,KAAK,CAAC,2BAA2B,EAAE,sBAAsB,CAAC,CAAC;KAC5D;IAED,iBAAiB;QACf,KAAK,CAAC,2BAA2B,EAAE,mBAAmB,CAAC,CAAC;QAExD,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;KAC3C;IAED,gBAAgB;QACd,KAAK,CAAC,2BAA2B,EAAE,kBAAkB,CAAC,CAAC;KACxD;IAED,mBAAmB;QACjB,KAAK,CAAC,2BAA2B,EAAE,qBAAqB,CAAC,CAAC;KAC3D;IAED,kBAAkB;QAChB,KAAK,CAAC,2BAA2B,EAAE,oBAAoB,CAAC,CAAC;KAC1D;IAED,mBAAmB;QACjB,KAAK,CAAC,2BAA2B,EAAE,qBAAqB,CAAC,CAAC;KAC3D;IAED,kBAAkB;QAChB,KAAK,CAAC,2BAA2B,EAAE,oBAAoB,CAAC,CAAC;KAC1D;IAGD,4BAA4B,CAAC,KAAmD;QAC9E,KAAK,CAAC,2BAA2B,EAAE,8BAA8B,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;QAEjF,MAAM,YAAY,GAAG,CAAC,KAAmD;YACvE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;YAC/B,IAAI,CAAC,mBAAmB,GAAG,KAAK,CAAC;YACjC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,kBAAkB,CAAC,CAAC;SACnE,CAAC;QACF,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,GAAG,KAAK,CAAC,MAAM,EAAE,YAAY,EAAE,CAAC,CAAC;KAC3D;IAmBD,MAAM;QACJ,MAAM,cAAc,GAAG;YACrB;gBACE,KAAK,EAAE,+BAA+B;gBACtC,KAAK,EAAE,SAAS;aACjB;YACD;gBACE,KAAK,EAAE,mCAAmC;gBAC1C,KAAK,EAAE,aAAa;aACrB;SACF,CAAC;QAEF,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,2BAA2B,EAAC,IAAI,EAAC,MAAM,IAChD,4DAAK,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,cAAc,IACrC,sFAA+B,EAC/B,kIAA0E,CACtE,EAEL,cAAc,CAAC,MAAM,GAAG,CAAC,IACxB,WAAK,KAAK,EAAC,qCAAqC,IAC9C,YAAM,KAAK,EAAC,OAAO,oCAEjB,6BACE,iBAAW,IAAI,EAAC,cAAc,GAAG,EACjC,YAAM,IAAI,EAAC,iBAAiB,oLAGrB,CACW,CACf,EACP,uBACE,IAAI,EAAC,cAAc,EACnB,OAAO,EAAE,cAAc,EACvB,UAAU,EAAE,KAAK,EACjB,WAAW,EAAC,qHAAqH,EACjI,qBAAqB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC,KAAK,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,cAAc,CAAC,CAAC,CAAC,GACrG,CACE,KAEN,WAAK,KAAK,EAAC,oCAAoC,IAC7C,YAAM,KAAK,EAAC,OAAO,8CACqB,oBAAa,CAC9C,EACP,WAAK,KAAK,EAAC,gBAAgB,IACzB,6BAAuB,CACnB,CACF,CACP,CACG,CACD,EACP;KACH;;;;;;;;;;;;;;;;;AArDD;IAjBC,iBAAiB,CAA4G;QAC5H,IAAI,EAAE,2BAA2B;QACjC,YAAY,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC,uCAAuC,EAAE,uBAAuB,CAAC,CAAC,CAAC;QAC3F,YAAY,EAAE;YACZ,YAAY,EAAE,OACZ,KAAiI,EACjI,8BAA6D;gBAE7D,MAAM,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;gBAEtC,IAAI,YAAY,EAAE;oBAChB,YAAY,CAAC,KAAK,CAAC,CAAC;iBACrB;aACF;SACF;QACD,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;oDAsDD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/scheduler-editor/nylas-custom-booking-flow/nylas-custom-booking-flow.scss?tag=nylas-custom-booking-flow&encapsulation=shadow","src/components/scheduler-editor/nylas-custom-booking-flow/nylas-custom-booking-flow.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  @include default-css-variables;\n  width: inherit;\n}\n\n.nylas-custom-booking-flow {\n  width: inherit;\n  display: flex;\n  flex-direction: column;\n  margin: 1rem;\n  border-radius: var(--nylas-border-radius-2x);\n  border: 1px solid var(--nylas-base-200);\n  .header {\n    padding: 1rem;\n    border-bottom: 1px solid var(--nylas-base-200);\n    h3 {\n      margin: 0;\n      font-size: 1rem;\n      font-weight: 600;\n      line-height: 20px;\n      color: var(--nylas-base-900);\n      text-align: left;\n    }\n    p {\n      margin: 0.25rem 0 0 0;\n      font-size: 0.875rem;\n      font-weight: 400;\n      line-height: 20px;\n      color: var(--nylas-base-600);\n      text-align: left;\n    }\n  }\n  .nylas-custom-booking-flow__loading {\n    padding-bottom: 1rem;\n    .label {\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n      margin: 1rem 1rem 0;\n      color: var(--nylas-base-800);\n    }\n    .loading-button {\n      margin: 0 1rem;\n      padding: 0;\n      width: inherit;\n      height: 48px;\n      color: black;\n      font-size: 1rem;\n      cursor: not-allowed;\n      display: flex;\n      gap: 0.5rem;\n      justify-content: space-between;\n      align-items: center;\n      background: transparent;\n      border: 1px solid var(--nylas-base-200);\n      border-radius: var(--nylas-border-radius-2x);\n      span {\n        padding: 0 1rem;\n      }\n    }\n  }\n  .nylas-custom-booking-flow__dropdown {\n    padding: 1rem;\n    span.label {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      color: var(--nylas-base-800);\n      tooltip-component {\n        display: flex;\n      }\n    }\n    select-dropdown::part(sd_dropdown) {\n      width: 100%;\n    }\n    select-dropdown::part(sd_dropdown-button) {\n      width: 100%;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      border: 1px solid var(--nylas-base-200);\n      border-radius: var(--nylas-border-radius-2x);\n      padding: 1rem;\n    }\n    select-dropdown::part(sd_dropdown-content) {\n      width: 100%;\n      max-width: unset;\n    }\n    select-dropdown::part(sd_dropdown-button-selected-label) {\n      max-width: calc(100% - 2rem);\n      font-family: var(--nylas-font-family);\n      font-size: 16px;\n      line-height: 24px;\n    }\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, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration } from '@nylas/core';\n\n/**\n * The `nylas-custom-booking-flow` component is a UI component that displays the booking calendar picker.\n * @part ncbf - The custom booking flow container\n * @part ncbf__header - The header of the custom booking flow\n * @part ncbf__dropdown - The dropdown container\n * @part ncbf__dropdown-button - The dropdown button\n * @part ncbf__dropdown-content - The dropdown content\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() host!: HTMLNylasCustomBookingFlowElement;\n  /**\n   * The selected config\n   */\n  @Prop() selectedConfiguration?: Configuration;\n\n  /**\n   * The name of the calendar picker.\n   */\n  @Prop() name: string = 'booking-type';\n  /**\n   * The booking type.\n   */\n  @Prop() bookingType: string = '';\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The selected bookingType.\n   */\n  @State() selectedBookingType: string = '';\n\n  /**\n   * This event is fired when the selected bookingType changes.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n    valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\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-custom-booking-flow', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('selectedConfiguration')\n  selectedConfigurationChangedHandler(newValue: Configuration, oldValue: Configuration) {\n    debug('nylas-custom-booking-flow', 'selectedConfigurationChangedHandler', newValue, oldValue);\n    if (newValue?.event_booking?.booking_type) {\n      this.bookingType = newValue?.event_booking?.booking_type;\n    }\n    // TODO: Remove this when the internals in tests are fixed.\n    if (typeof this.internals.setFormValue === 'function') {\n      this.internals.setFormValue(this.bookingType.toString(), 'booking-calendar');\n    }\n    this.selectedBookingType = this.bookingType;\n  }\n\n  // Lifecycle methods\n  connectedCallback() {\n    debug('nylas-custom-booking-flow', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-custom-booking-flow', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-custom-booking-flow', '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-custom-booking-flow', 'componentDidLoad');\n  }\n\n  componentWillUpdate() {\n    debug('nylas-custom-booking-flow', 'componentWillUpdate');\n  }\n\n  componentDidUpdate() {\n    debug('nylas-custom-booking-flow', 'componentDidUpdate');\n  }\n\n  componentWillRender() {\n    debug('nylas-custom-booking-flow', 'componentWillRender');\n  }\n\n  componentDidRender() {\n    debug('nylas-custom-booking-flow', 'componentDidRender');\n  }\n\n  @Listen('selectedOptionChanged')\n  selectedOptionChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('nylas-custom-booking-flow', 'selectedOptionChangedHandler', event.detail);\n    // Pass as handler so that if event.defaultPrevented by parent app, this will be skipped.\n    const valueChanged = (event: CustomEvent<{ value: string; name: string }>) => {\n      const { value } = event.detail;\n      this.selectedBookingType = value;\n      this.internals.setFormValue(value.toString(), 'booking-calendar');\n    };\n    this.valueChanged.emit({ ...event.detail, valueChanged });\n  }\n\n  @RegisterComponent<NylasCustomBookingFlow, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-custom-booking-flow',\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 bookingOptions = [\n      {\n        label: 'Automatically accept bookings',\n        value: 'booking',\n      },\n      {\n        label: 'Manually confirm/decline bookings',\n        value: 'pre-booking',\n      },\n    ];\n\n    return (\n      <Host>\n        <div class=\"nylas-custom-booking-flow\" part=\"ncbf\">\n          <div class=\"header\" part=\"ncbf__header\">\n            <h3>Customize booking flow</h3>\n            <p>Customize how new bookings are handled when a booking is completed.</p>\n          </div>\n\n          {bookingOptions.length > 0 ? (\n            <div class=\"nylas-custom-booking-flow__dropdown\">\n              <span class=\"label\">\n                After a booking is confirmed\n                <tooltip-component>\n                  <info-icon slot=\"tooltip-icon\" />\n                  <span slot=\"tooltip-content\">\n                    Choose how you’d like to handle new bookings. If you choose to manually confirm/decline bookings, you will be able to review and accept or decline each booking\n                    request.\n                  </span>\n                </tooltip-component>\n              </span>\n              <select-dropdown\n                name=\"booking-type\"\n                options={bookingOptions}\n                withSearch={false}\n                exportparts=\"sd_dropdown: ncbf__dropdown, sd_dropdown-button: ncbf__dropdown-button, sd_dropdown-content: ncbf__dropdown-content\"\n                defaultSelectedOption={bookingOptions.find(cal => cal.value == this.bookingType) ?? bookingOptions[0]}\n              />\n            </div>\n          ) : (\n            <div class=\"nylas-custom-booking-flow__loading\">\n              <span class=\"label\">\n                Select a calendar to book meetings on <info-icon />\n              </span>\n              <div class=\"loading-button\">\n                <span>Loading...</span>\n              </div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nylas-date-picker2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { R as RegisterComponent } from './register-component.js';
-import { h as getLastDayOfMonth, i as getFirstDayOfMonth, j as isSameDay, k as isSameMonth } from './utils.js';
+import { k as getLastDayOfMonth, l as getFirstDayOfMonth, n as isSameDay, o as isSameMonth } from './utils.js';
 import { d as defineCustomElement$1 } from './chevron.js';
 
 const t0 = new Date, t1 = new Date;
@@ -1855,7 +1855,6 @@ function defineCustomElement() {
             break;
     } });
 }
-defineCustomElement(NylasDatePicker);
 
 export { NylasDatePicker as N, defineCustomElement as d };