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

package/dist/collection/components/scheduler-editor/nylas-event-title/nylas-event-title.js.map

@@ -1 +1 @@
-{"version":3,"file":"nylas-event-title.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-event-title/nylas-event-title.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug, getBrowser } from '@/utils/utils';\nimport { AttachInternals, Component, Host, State, h, Element, Prop, Watch, Event, EventEmitter } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { EVENT_TITLE_TOKENS as eventTitleTokens } from '@/common/constants';\n\ninterface CustomShadowRoot extends ShadowRoot {\n  getSelection: () => Selection | null;\n}\n\ntype Token = {\n  token: string;\n  value: string;\n  description: string;\n};\n\n/**\n * The `nylas-event-title` component is a form input for the title of an event.\n * @part net - The event title container\n * @part net__title - The event title input\n * @part net__dropdown-content - The token options container\n */\n@Component({\n  tag: 'nylas-event-title',\n  styleUrl: 'nylas-event-title.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasEventTitle {\n  @Element() host!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  // Properties\n  /**\n   * The title of the event from the cofiguration.\n   */\n  @Prop() eventTitle?: string;\n  /**\n   * The name attribute of this component.\n   */\n  @Prop() name: string = 'title';\n\n  // State variables\n  /**\n   * Whether to show the tokens dropdown.\n   */\n  @State() showTokens: boolean = false;\n  /**\n   * The available token options for the dropdown.\n   */\n  @State() availableTokens: { label: string; value: string; labelHTML: Token }[] = eventTitleTokens.map(token => ({\n    label: token.token,\n    value: token.value,\n    labelHTML: token,\n  }));\n  /**\n   * The filtered token options for the dropdown based on the current query.\n   */\n  @State() filteredTokens: { label: string; value: string; labelHTML: Token }[] = this.availableTokens;\n  /**\n   * The aria-activedescendant attribute value. This is used to indicate the\n   * currently active descendant in the tokens dropdown.\n   */\n  @State() ariaActivedescendant: string = '';\n  /**\n   * Stores the reference to the current word being typed.\n   * This is used to update the event title with the selected token tag when\n   * an option is selected from the dropdown by clicking on it.\n   */\n  @State() currentWord: {\n    $value: string;\n    fullText: string;\n    index: number;\n    focusOffset: number;\n  } = { $value: '', fullText: '', index: -1, focusOffset: -1 };\n\n  // Reference to the title div element\n  private titleRef!: HTMLDivElement;\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-event-title', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('ariaActivedescendant')\n  ariaActivedescendantChangedHandler(newValue: string) {\n    debug('nylas-event-title', 'ariaActivedescendantChangedHandler', newValue);\n    if (newValue !== '') {\n      const activeOption = this.host.shadowRoot?.getElementById(newValue);\n      activeOption?.classList.add('active');\n    } else {\n      const options = this.host.shadowRoot?.querySelectorAll('.token-options li.active');\n      options?.forEach(option => option.classList.remove('active'));\n    }\n  }\n\n  // Events\n  /**\n   * This event is fired when the value of the event title changes.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n  }>;\n\n  // Lifecycle methods\n  connectedCallback() {\n    debug('nylas-event-title', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-event-title', 'componentWillLoad');\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-event-title', 'componentDidLoad');\n    this.updateEventTitleFromProp(this.eventTitle || '');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-event-title', 'disconnectedCallback');\n  }\n\n  updateEventTitleFromProp(newValue: string) {\n    debug('nylas-event-title', 'eventTitleChangedHandler', newValue);\n\n    this.titleRef.innerHTML = this.highlightTokens();\n    this.titleRef.focus();\n  }\n\n  highlightTokens() {\n    let outputHtml = this.eventTitle || '';\n\n    eventTitleTokens.forEach(tokenObj => {\n      const token = tokenObj.value;\n      // Create a regular expression that matches the token as a whole word\n      const regex = new RegExp(`(\\\\${token})(?!\\\\w)`, 'g');\n      // Replace the token with a span element\n      outputHtml = outputHtml.replace(regex, '<span class=\"highlighted-tag\">$1</span>');\n    });\n    return outputHtml;\n  }\n\n  getCurrentSelectionForBrowser() {\n    const getSelectionTextData = (nodeValue, offset, node) => {\n      // Remove zero-width space characters from the text, because they are not visible and cause issues with the selection\n      const text = nodeValue.replace(/[\\u200B-\\u200D\\uFEFF]/g, '');\n      const dollarIndex = text.lastIndexOf('$');\n      const lastWord = text.substring(dollarIndex).split(' ')[0];\n      return {\n        focusOffset: offset,\n        dollarIndex,\n        lastWord,\n        currentText: text,\n        node,\n      };\n    };\n\n    const currentBrowser = getBrowser();\n    console.log('currentBrowser', currentBrowser);\n    switch (currentBrowser) {\n      case 'Chrome':\n        const shadowRootSelection = (this.host.shadowRoot as CustomShadowRoot)?.getSelection();\n        const focusNode = shadowRootSelection?.focusNode;\n        const focusNodeValue = focusNode?.nodeValue || '';\n        return getSelectionTextData(focusNodeValue, shadowRootSelection?.focusOffset || -1, focusNode);\n      case 'Firefox':\n        const selection = document.getSelection();\n        const anchorNodeValue = selection?.anchorNode?.nodeValue || '';\n        return getSelectionTextData(anchorNodeValue, selection?.focusOffset || -1, selection?.anchorNode);\n      case 'Safari':\n        const windowSelection = window.getSelection();\n        const anchorNode = (windowSelection as any)?.getComposedRanges(this.host.shadowRoot as CustomShadowRoot)[0];\n        const currentText = anchorNode?.startContainer?.nodeValue || '';\n        return getSelectionTextData(currentText, anchorNode?.endOffset || -1, anchorNode?.startContainer);\n      default:\n        console.warn('Browser not supported');\n        return null;\n    }\n  }\n\n  handleChange(event: Event) {\n    const textContent = (event.target as HTMLDivElement).textContent || '';\n    // All browsers handle Selection within Shadow DOM differently, so get the current selection based on the browser\n    const currentSelection = this.getCurrentSelectionForBrowser();\n    if (!currentSelection) {\n      this.updateEventTitle(textContent);\n      this.resetDropdown();\n      return;\n    }\n    const { focusOffset, dollarIndex, lastWord, currentText } = currentSelection;\n\n    if (dollarIndex === -1 || focusOffset < dollarIndex) {\n      this.updateEventTitle(textContent);\n      this.resetDropdown();\n      return;\n    }\n    if (lastWord.startsWith('$')) {\n      this.showTokens = true;\n      // Update the current word being typed, we need this reference to update the event title with the selected token\n      // because the user can select an option from the dropdown by clicking on it, which will not trigger the input event.\n      this.currentWord = {\n        $value: lastWord,\n        fullText: currentText,\n        index: dollarIndex,\n        focusOffset,\n      };\n      this.populateSuggestionsDropdown(lastWord);\n    } else {\n      this.resetDropdown();\n    }\n    this.updateEventTitle(textContent);\n  }\n\n  handleInputKeyDown(event) {\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      const activeOption = this.host.shadowRoot?.getElementById(this.ariaActivedescendant);\n      if (activeOption) {\n        activeOption.click();\n        this.ariaActivedescendant = '';\n      }\n    } else if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      const activeOption = this.host.shadowRoot?.getElementById(this.ariaActivedescendant);\n      if (activeOption) {\n        const nextOption = activeOption.nextElementSibling;\n        if (nextOption) {\n          this.ariaActivedescendant = nextOption.id;\n        } else {\n          this.ariaActivedescendant = this.filteredTokens[0].label;\n        }\n      } else {\n        this.ariaActivedescendant = this.filteredTokens[0].label;\n      }\n    } else if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      const activeOption = this.host.shadowRoot?.getElementById(this.ariaActivedescendant);\n      if (activeOption) {\n        const prevOption = activeOption.previousElementSibling;\n        if (prevOption) {\n          this.ariaActivedescendant = prevOption.id;\n        } else {\n          this.ariaActivedescendant = this.filteredTokens[this.filteredTokens.length - 1].label;\n        }\n      } else {\n        this.ariaActivedescendant = this.filteredTokens[this.filteredTokens.length - 1].label;\n      }\n    } else if (event.key === 'Escape') {\n      event.preventDefault();\n      this.resetDropdown();\n    } else if (event.key === 'Backspace' || event.key === 'Delete') {\n      const selection = this.getCurrentSelectionForBrowser();\n      if (selection?.currentText.startsWith('${')) {\n        selection?.node?.parentNode && selection.node.parentNode.removeChild(selection.node);\n      }\n    }\n  }\n\n  selectOption(e: Event, option: { label: string; value: string; labelHTML: Token }) {\n    e.preventDefault();\n    const word = this.currentWord.fullText;\n    const dollarWord = this.currentWord.$value;\n\n    // Traverse the DOM to find the text node that contains the current word fullText\n    let currentNode = this.titleRef.firstChild;\n    let textNode: ChildNode | null = null;\n\n    while (currentNode) {\n      if (currentNode.nodeType === 3) {\n        const currentNodeText = currentNode.textContent?.replace(/[\\u200B-\\u200D\\uFEFF]/g, '') || '';\n        const wordText = word.replace(/[\\u200B-\\u200D\\uFEFF]/g, '');\n        if (currentNodeText.includes(wordText)) {\n          textNode = currentNode;\n          break;\n        }\n      }\n      currentNode = currentNode.nextSibling;\n    }\n\n    if (!textNode) {\n      return;\n    }\n    // Split the text node into three parts: text before the token, the token, and text after the token\n    const text = textNode.textContent || '';\n    const index = text.indexOf(dollarWord);\n    const textBefore = text.substring(0, index);\n    const textAfter = text.substring(index + dollarWord.length);\n    const newTextNode = document.createTextNode(textBefore);\n    const newRange = document.createRange();\n\n    // Create a new span element to replace the text node\n    const tagSpan = document.createElement('span');\n    tagSpan.classList.add('highlighted-tag');\n    tagSpan.textContent = `${option.value}`;\n    const newTextNodeAfter = document.createTextNode(textAfter);\n\n    if (textAfter !== '') {\n      // If there is text after the token, add it to the new span element\n      textNode.replaceWith(newTextNode, tagSpan, newTextNodeAfter);\n      newRange.setStart(newTextNodeAfter, 0);\n    } else {\n      // If there is no text after the token, add a zero-width space character (Without this, the cursor will not move outside the highlighted span element)\n      const afterNode = document.createTextNode('\\u200B');\n      textNode.replaceWith(newTextNode, tagSpan, afterNode);\n      newRange.setStart(afterNode, 0);\n    }\n\n    // Hide the dropdown\n    this.resetDropdown();\n    this.titleRef.focus();\n\n    // Set the focus to the new span element\n    const sel = window.getSelection();\n    newRange.collapse(true);\n    sel?.removeAllRanges();\n    sel?.addRange(newRange);\n\n    // Update the event title with the selected token\n    this.updateEventTitle(this.titleRef.textContent || '');\n  }\n\n  populateSuggestionsDropdown(query: string = '') {\n    this.filteredTokens = this.availableTokens.filter(obj => {\n      return obj.label.startsWith(query.toString()) || obj.value.startsWith(query.toString());\n    });\n\n    // Set the first option as the active descendant\n    if (this.filteredTokens.length > 0) {\n      this.ariaActivedescendant = this.filteredTokens[0].label;\n    }\n  }\n\n  updateEventTitle(text: string) {\n    const value = text.replace(/ +/g, ' ');\n    this.valueChanged.emit({ value: value, name: this.name });\n  }\n\n  resetDropdown() {\n    this.showTokens = false;\n    this.ariaActivedescendant = '';\n  }\n\n  getLabelHTML(token: { token: string; description: string }) {\n    return (\n      <div class=\"token-label\">\n        <span class=\"token\">{token.token}</span>\n        <span class=\"description\">{token.description}</span>\n      </div>\n    );\n  }\n\n  @RegisterComponent<NylasEventTitle, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-event-title',\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <div class=\"nylas-event-title\" part=\"net\">\n          <label htmlFor=\"title\">\n            Event title<span class=\"required\">*</span>\n            <span class=\"label-icon\">\n              <tooltip-component>\n                <info-icon slot=\"tooltip-icon\" />\n                <span slot=\"tooltip-content\">Enter a title for your event.</span>\n              </tooltip-component>\n            </span>\n          </label>\n          <div\n            class=\"title\"\n            part=\"net__title\"\n            ref={el => (this.titleRef = el as HTMLDivElement)}\n            contentEditable=\"true\"\n            onInput={e => this.handleChange(e)}\n            onKeyDown={event => this.handleInputKeyDown(event)}\n          ></div>\n          {this.showTokens && this.filteredTokens?.length > 0 && (\n            <div class=\"token-options\" part=\"net__dropdown-content\">\n              <ul tabindex=\"-1\" role=\"listbox\" aria-label={this.name} aria-activedescendant={this.ariaActivedescendant}>\n                {this.filteredTokens.map(option => (\n                  <li\n                    tabindex=\"0\"\n                    key={option.label}\n                    id={option.label}\n                    class={{ active: this.ariaActivedescendant === option.label }}\n                    onClick={e => this.selectOption(e, option)}\n                    role=\"option\"\n                  >\n                    {this.getLabelHTML(option.labelHTML)}\n                  </li>\n                ))}\n              </ul>\n            </div>\n          )}\n          <span class=\"help-text\">Create a dynamic templated event title by typing $. Learn more</span>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"nylas-event-title.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-event-title/nylas-event-title.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug, getBrowser } from '@/utils/utils';\nimport { AttachInternals, Component, Host, State, h, Element, Prop, Watch, Event, EventEmitter, Listen } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { EVENT_TITLE_TOKENS as eventTitleTokens } from '@/common/constants';\nimport { Configuration } from '@nylas/core';\n\ninterface CustomShadowRoot extends ShadowRoot {\n  getSelection: () => Selection | null;\n}\n\ntype Token = {\n  token: string;\n  value: string;\n  description: string;\n};\n\n/**\n * The `nylas-event-title` component is a form input for the title of an event.\n * @part net - The event title container\n * @part net__title - The event title input\n * @part net__dropdown-content - The token options container\n */\n@Component({\n  tag: 'nylas-event-title',\n  styleUrl: 'nylas-event-title.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasEventTitle {\n  @Element() host!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  // Properties\n  /**\n   * The selected config\n   */\n  @Prop() selectedConfiguration?: Configuration;\n  /**\n   * The title of the event from the cofiguration.\n   */\n  @Prop() eventTitle?: string = this.selectedConfiguration?.event_booking?.title;\n  /**\n   * The name attribute of this component.\n   */\n  @Prop() name: string = 'title';\n\n  // State variables\n  /**\n   * Whether to show the tokens dropdown.\n   */\n  @State() showTokens: boolean = false;\n  /**\n   * The available token options for the dropdown.\n   */\n  @State() availableTokens: { label: string; value: string; labelHTML: Token }[] = eventTitleTokens.map(token => ({\n    label: token.token,\n    value: token.value,\n    labelHTML: token,\n  }));\n  /**\n   * The filtered token options for the dropdown based on the current query.\n   */\n  @State() filteredTokens: { label: string; value: string; labelHTML: Token }[] = this.availableTokens;\n  /**\n   * The aria-activedescendant attribute value. This is used to indicate the\n   * currently active descendant in the tokens dropdown.\n   */\n  @State() ariaActivedescendant: string = '';\n  /**\n   * Stores the reference to the current word being typed.\n   * This is used to update the event title with the selected token tag when\n   * an option is selected from the dropdown by clicking on it.\n   */\n  @State() currentWord: {\n    $value: string;\n    fullText: string;\n    index: number;\n    focusOffset: number;\n  } = { $value: '', fullText: '', index: -1, focusOffset: -1 };\n\n  @State() validationError: string = '';\n\n  // Reference to the title div element\n  private titleRef!: HTMLDivElement;\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-event-title', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('ariaActivedescendant')\n  ariaActivedescendantChangedHandler(newValue: string) {\n    debug('nylas-event-title', 'ariaActivedescendantChangedHandler', newValue);\n    if (newValue !== '') {\n      const activeOption = this.host.shadowRoot?.getElementById(newValue);\n      activeOption?.classList.add('active');\n    } else {\n      const options = this.host.shadowRoot?.querySelectorAll('.token-options li.active');\n      options?.forEach(option => option.classList.remove('active'));\n    }\n  }\n\n  @Watch('selectedConfiguration')\n  configChangedHandler(newVal) {\n    const title = newVal?.event_booking?.title;\n    if (title) {\n      this.updateEventTitleFromProp(title);\n    }\n  }\n\n  // Events\n  /**\n   * This event is fired when the value of the event title changes.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n  }>;\n\n  // Lifecycle methods\n  connectedCallback() {\n    debug('nylas-event-title', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-event-title', 'componentWillLoad');\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-event-title', 'componentDidLoad');\n    this.updateEventTitleFromProp(this.eventTitle || '');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-event-title', 'disconnectedCallback');\n  }\n\n  @Listen('formSubmitted', { target: 'window' })\n  formSubmittedHandler(event: CustomEvent) {\n    debug('nylas-event-title', 'formSubmittedHandler', event);\n    if (!this.internals?.validity?.valid) {\n      this.validationError = 'Event title is required';\n    } else {\n      this.validationError = '';\n    }\n  }\n\n  updateEventTitleFromProp(newValue: string) {\n    debug('nylas-event-title', 'eventTitleChangedHandler', newValue);\n    if (this.titleRef) {\n      this.titleRef.innerHTML = this.highlightTokens(newValue);\n      this.titleRef.focus();\n      if (typeof this.internals.setValidity === 'function') {\n        if (newValue === '') {\n          this.internals?.setValidity({ customError: true }, `Event title is required`, this.titleRef);\n        } else {\n          this.internals?.setValidity({ customError: false });\n        }\n      }\n    }\n  }\n\n  highlightTokens(title: string) {\n    let outputHtml = title;\n\n    eventTitleTokens.forEach(tokenObj => {\n      const token = tokenObj.value;\n      // Create a regular expression that matches the token as a whole word\n      const regex = new RegExp(`(\\\\${token})(?!\\\\w)`, 'g');\n      // Replace the token with a span element\n      outputHtml = outputHtml.replace(regex, '<span class=\"highlighted-tag\">$1</span>');\n    });\n    return outputHtml;\n  }\n\n  getCurrentSelectionForBrowser() {\n    const getSelectionTextData = (nodeValue, offset, node) => {\n      // Remove zero-width space characters from the text, because they are not visible and cause issues with the selection\n      const text = nodeValue.replace(/[\\u200B-\\u200D\\uFEFF]/g, '');\n      const dollarIndex = text.lastIndexOf('$');\n      const lastWord = text.substring(dollarIndex).split(' ')[0];\n      return {\n        focusOffset: offset,\n        dollarIndex,\n        lastWord,\n        currentText: text,\n        node,\n      };\n    };\n\n    const currentBrowser = getBrowser();\n    switch (currentBrowser) {\n      case 'Chrome':\n        const shadowRootSelection = (this.host.shadowRoot as CustomShadowRoot)?.getSelection();\n        const focusNode = shadowRootSelection?.focusNode;\n        const focusNodeValue = focusNode?.nodeValue || '';\n        return getSelectionTextData(focusNodeValue, shadowRootSelection?.focusOffset || -1, focusNode);\n      case 'Firefox':\n        const selection = document.getSelection();\n        const anchorNodeValue = selection?.anchorNode?.nodeValue || '';\n        return getSelectionTextData(anchorNodeValue, selection?.focusOffset || -1, selection?.anchorNode);\n      case 'Safari':\n        const windowSelection = window.getSelection();\n        const anchorNode = (windowSelection as any)?.getComposedRanges(this.host.shadowRoot as CustomShadowRoot)[0];\n        const currentText = anchorNode?.startContainer?.nodeValue || '';\n        return getSelectionTextData(currentText, anchorNode?.endOffset || -1, anchorNode?.startContainer);\n      default:\n        console.warn('Browser not supported');\n        return null;\n    }\n  }\n\n  handleChange(event: Event) {\n    const textContent = (event.target as HTMLDivElement).textContent || '';\n    // All browsers handle Selection within Shadow DOM differently, so get the current selection based on the browser\n    const currentSelection = this.getCurrentSelectionForBrowser();\n    if (!currentSelection) {\n      this.updateEventTitle(textContent);\n      this.resetDropdown();\n      return;\n    }\n    const { focusOffset, dollarIndex, lastWord, currentText } = currentSelection;\n\n    if (dollarIndex === -1 || focusOffset < dollarIndex) {\n      this.updateEventTitle(textContent);\n      this.resetDropdown();\n      return;\n    }\n    if (lastWord.startsWith('$')) {\n      this.showTokens = true;\n      // Update the current word being typed, we need this reference to update the event title with the selected token\n      // because the user can select an option from the dropdown by clicking on it, which will not trigger the input event.\n      this.currentWord = {\n        $value: lastWord,\n        fullText: currentText,\n        index: dollarIndex,\n        focusOffset,\n      };\n      this.populateSuggestionsDropdown(lastWord);\n    } else {\n      this.resetDropdown();\n    }\n    this.updateEventTitle(textContent);\n  }\n\n  handleInputKeyDown(event) {\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      const activeOption = this.host.shadowRoot?.getElementById(this.ariaActivedescendant);\n      if (activeOption) {\n        activeOption.click();\n        this.ariaActivedescendant = '';\n      }\n    } else if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      const activeOption = this.host.shadowRoot?.getElementById(this.ariaActivedescendant);\n      if (activeOption) {\n        const nextOption = activeOption.nextElementSibling;\n        if (nextOption) {\n          this.ariaActivedescendant = nextOption.id;\n        } else {\n          this.ariaActivedescendant = this.filteredTokens[0].label;\n        }\n      } else {\n        this.ariaActivedescendant = this.filteredTokens[0].label;\n      }\n    } else if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      const activeOption = this.host.shadowRoot?.getElementById(this.ariaActivedescendant);\n      if (activeOption) {\n        const prevOption = activeOption.previousElementSibling;\n        if (prevOption) {\n          this.ariaActivedescendant = prevOption.id;\n        } else {\n          this.ariaActivedescendant = this.filteredTokens[this.filteredTokens.length - 1].label;\n        }\n      } else {\n        this.ariaActivedescendant = this.filteredTokens[this.filteredTokens.length - 1].label;\n      }\n    } else if (event.key === 'Escape') {\n      event.preventDefault();\n      this.resetDropdown();\n    } else if (event.key === 'Backspace' || event.key === 'Delete') {\n      const selection = this.getCurrentSelectionForBrowser();\n      if (selection?.currentText.startsWith('${')) {\n        selection?.node?.parentNode && selection.node.parentNode.removeChild(selection.node);\n      }\n    }\n  }\n\n  selectOption(e: Event, option: { label: string; value: string; labelHTML: Token }) {\n    e.preventDefault();\n    const word = this.currentWord.fullText;\n    const dollarWord = this.currentWord.$value;\n\n    // Traverse the DOM to find the text node that contains the current word fullText\n    let currentNode = this.titleRef.firstChild;\n    let textNode: ChildNode | null = null;\n\n    while (currentNode) {\n      if (currentNode.nodeType === 3) {\n        const currentNodeText = currentNode.textContent?.replace(/[\\u200B-\\u200D\\uFEFF]/g, '') || '';\n        const wordText = word.replace(/[\\u200B-\\u200D\\uFEFF]/g, '');\n        if (currentNodeText.includes(wordText)) {\n          textNode = currentNode;\n          break;\n        }\n      }\n      currentNode = currentNode.nextSibling;\n    }\n\n    if (!textNode) {\n      return;\n    }\n    // Split the text node into three parts: text before the token, the token, and text after the token\n    const text = textNode.textContent || '';\n    const index = text.indexOf(dollarWord);\n    const textBefore = text.substring(0, index);\n    const textAfter = text.substring(index + dollarWord.length);\n    const newTextNode = document.createTextNode(textBefore);\n    const newRange = document.createRange();\n\n    // Create a new span element to replace the text node\n    const tagSpan = document.createElement('span');\n    tagSpan.classList.add('highlighted-tag');\n    tagSpan.textContent = `${option.value}`;\n    const newTextNodeAfter = document.createTextNode(textAfter);\n\n    if (textAfter !== '') {\n      // If there is text after the token, add it to the new span element\n      textNode.replaceWith(newTextNode, tagSpan, newTextNodeAfter);\n      newRange.setStart(newTextNodeAfter, 0);\n    } else {\n      // If there is no text after the token, add a zero-width space character (Without this, the cursor will not move outside the highlighted span element)\n      const afterNode = document.createTextNode('\\u200B');\n      textNode.replaceWith(newTextNode, tagSpan, afterNode);\n      newRange.setStart(afterNode, 0);\n    }\n\n    // Hide the dropdown\n    this.resetDropdown();\n    this.titleRef.focus();\n\n    // Set the focus to the new span element\n    const sel = window.getSelection();\n    newRange.collapse(true);\n    sel?.removeAllRanges();\n    sel?.addRange(newRange);\n\n    // Update the event title with the selected token\n    this.updateEventTitle(this.titleRef.textContent || '');\n  }\n\n  populateSuggestionsDropdown(query: string = '') {\n    this.filteredTokens = this.availableTokens.filter(obj => {\n      return obj.label.startsWith(query.toString()) || obj.value.startsWith(query.toString());\n    });\n\n    // Set the first option as the active descendant\n    if (this.filteredTokens.length > 0) {\n      this.ariaActivedescendant = this.filteredTokens[0].label;\n    }\n  }\n\n  updateEventTitle(text: string) {\n    const value = text.replace(/ +/g, ' ');\n    if (value === '') {\n      this.internals?.setValidity({ customError: true }, `Event title is required`, this.titleRef);\n      this.validationError = 'Event title is required';\n    } else {\n      this.internals?.setValidity({ customError: false });\n      this.validationError = '';\n    }\n    this.internals?.setFormValue(value, this.name);\n    this.valueChanged.emit({ value: value, name: this.name });\n  }\n\n  resetDropdown() {\n    this.showTokens = false;\n    this.ariaActivedescendant = '';\n  }\n\n  getLabelHTML(token: { token: string; description: string }) {\n    return (\n      <div class=\"token-label\">\n        <span class=\"token\">{token.token}</span>\n        <span class=\"description\">{token.description}</span>\n      </div>\n    );\n  }\n\n  @RegisterComponent<NylasEventTitle, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-event-title',\n    stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <div class=\"nylas-event-title\" part=\"net\">\n          <label htmlFor=\"title\">\n            Event title<span class=\"required\">*</span>\n            <span class=\"label-icon\">\n              <tooltip-component>\n                <info-icon slot=\"tooltip-icon\" />\n                <span slot=\"tooltip-content\">Enter a title for your event.</span>\n              </tooltip-component>\n            </span>\n          </label>\n          <div\n            class={{\n              title: true,\n              error: this.validationError !== '',\n            }}\n            part=\"net__title\"\n            ref={el => (this.titleRef = el as HTMLDivElement)}\n            contentEditable=\"true\"\n            onInput={e => this.handleChange(e)}\n            onKeyDown={event => this.handleInputKeyDown(event)}\n          ></div>\n          {this.showTokens && this.filteredTokens?.length > 0 && (\n            <div class=\"token-options\" part=\"net__dropdown-content\">\n              <ul tabindex=\"-1\" role=\"listbox\" aria-label={this.name} aria-activedescendant={this.ariaActivedescendant}>\n                {this.filteredTokens.map(option => (\n                  <li\n                    tabindex=\"0\"\n                    key={option.label}\n                    id={option.label}\n                    class={{ active: this.ariaActivedescendant === option.label }}\n                    onClick={e => this.selectOption(e, option)}\n                    role=\"option\"\n                  >\n                    {this.getLabelHTML(option.labelHTML)}\n                  </li>\n                ))}\n              </ul>\n            </div>\n          )}\n          <span class=\"help-text\">Create a dynamic templated event title by typing $. Learn more</span>\n          {this.validationError != '' && <span class=\"error-message\">{this.validationError}</span>}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/scheduler-editor/nylas-form-card/nylas-form-card.js

@@ -29,7 +29,7 @@ export class NylasFormCard {
         debug('nylas-event-card', 'disconnectedCallback');
     }
     render() {
-        return (h(Host, { key: '81fa6a1951100e90fcf60cf4efaa8b8a3dc92729' }, h("div", { key: '9f813106becb938ea7ef27207c1e1f83e0743b53', class: "nylas-form-card" }, h("div", { key: '157e236b69a61cb4512a8a7affb5d552e0167623', class: "nylas-form-card__header" }, h("slot", { key: '9dd035b05c0e6d6b591b8077dde95586ff0361e8', name: "header-title" }), h("slot", { key: '4e6e6422388ddf05a2ad41f47a5547315ea21507', name: "header-subtitle" })), h("div", { key: '52b8baced8af16d5c2eb96ee038e798a8f7643a2', class: "nylas-form-card__content" }, h("slot", { key: 'af22784e0343f4bcb4dc3689e719162077890c91', name: "content" })))));
+        return (h(Host, { key: 'ccce348d0ddf9bec8fddb815cf63cbc9d9df4973' }, h("div", { key: '6c0f3120bc608ac05fb631752834636cdb5a4845', class: "nylas-form-card" }, h("div", { key: '08a045eb3b7190d38373efb80f4f709987956347', class: "nylas-form-card__header" }, h("slot", { key: 'a9a076210a056c984ad40eced110f2d9b737f36d', name: "header-title" }), h("slot", { key: '65cc8f117db216d458338da2b3a0f673864234bc', name: "header-subtitle" })), h("div", { key: '6c308c3377952cd7a1b3ad112de55333ef517a03', class: "nylas-form-card__content" }, h("slot", { key: '5c0e7388949d250f0e3b027df2bfd9a3342d1574', name: "content" })))));
     }
     static get is() { return "nylas-form-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scheduler-editor/nylas-limit-future-bookings/nylas-limit-future-bookings.js

@@ -17,6 +17,7 @@ import { debug } from "../../../utils/utils";
 import { Host, h } from "@stencil/core";
 export class NylasLimitFutureBookings {
     constructor() {
+        this.selectedConfiguration = undefined;
         this.availableDaysInFuture = undefined;
         this.name = 'limit-future-bookings';
         this.selectedNumber = 1;
@@ -26,10 +27,14 @@ export class NylasLimitFutureBookings {
         debug('nylas-limit-future-bookings', 'elementNameChangedHandler', newValue);
         this.host.setAttribute('name', newValue);
     }
+    selectedConfigurationChangedHandler(newVal) {
+        const daysInFuture = newVal?.scheduler?.available_days_in_future;
+        if (daysInFuture) {
+            this.updateNumberAndPeriodFromDays(daysInFuture);
+        }
+    }
     availableDaysInFutureChanged(newValue) {
-        const { number, period } = this.calculateNumberAndPeriodFromDays(newValue);
-        this.selectedNumber = number;
-        this.selectedPeriod = period;
+        this.updateNumberAndPeriodFromDays(newValue);
     }
     connectedCallback() {
         debug('nylas-limit-future-bookings', 'connectedCallback');
@@ -61,25 +66,31 @@ export class NylasLimitFutureBookings {
         else {
             availableDaysInFuture = number * 30;
         }
-        this.valueChanged.emit({ value: availableDaysInFuture, name: this.name });
+        this.valueChanged.emit({ value: availableDaysInFuture, name: 'availableDaysInFuture' });
         if (typeof this.internals.setFormValue !== 'function') {
             return;
         }
         this.internals.setFormValue(availableDaysInFuture.toString(), this.name);
     }
-    calculateNumberAndPeriodFromDays(days) {
+    updateNumberAndPeriodFromDays(days) {
+        let number, period;
         if (days >= 30 && days % 30 === 0) {
-            return { number: days / 30, period: 'month' };
+            number = days / 30;
+            period = 'month';
         }
         else if (days >= 7 && days % 7 === 0) {
-            return { number: days / 7, period: 'week' };
+            number = days / 7;
+            period = 'week';
         }
         else {
-            return { number: days, period: 'day' };
+            number = days;
+            period = 'day';
         }
+        this.selectedNumber = number;
+        this.selectedPeriod = period;
     }
     render() {
-        return (h(Host, { key: '51c0c8da5fd7f5dde898fd72e450f7d964c424c6' }, h("div", { key: '0cca0db28b809eec38f93bb25ad8e7ec281836f0', class: "nylas-limit-future-bookings", part: "nlfb" }, h("label", { key: 'feb8cd912af491a1f26a5e32ec2a7cf6d34309da' }, "Limit future bookings", h("span", { key: 'c1e61e9137428534f80db3222fa0c71b220fe333', class: "label-icon" }, h("tooltip-component", { key: 'b1f429be3c382dfe5b1cf6bfd98f71dd9a3d4b81' }, h("info-icon", { key: 'e52cdd714fa99b9e8ff1b995a15a44474bf7dbdd', slot: "tooltip-icon" }), h("span", { key: '8fc34d1fd12b92312d6e5c380a0aba8a2605285d', slot: "tooltip-content" }, "Set a limit on how far in the future bookings can be made.")))), h("time-period-selector", { key: '3edfddf9214f8729e6d36f4b5aca4fb771829cea', id: "limit-future-bookings", timePeriods: ['day', 'week', 'month'], exportparts: "tps__number-dropdown: nlfb__number-dropdown, tps__number-dropdown-button: nlfb__number-dropdown-button, tps__number-dropdown-content: nlfb__number-dropdown-content, tps__period-dropdown: nlfb__period-dropdown, tps__period-dropdown-button: nlfb__period-dropdown-button, tps__period-dropdown-content: nlfb__period-dropdown-content", defaultSelectedNumber: this.selectedNumber, defaultSelectedPeriod: this.selectedPeriod }))));
+        return (h(Host, { key: '1bb30d8045366579b327f32f954d64c3360efa11' }, h("div", { key: '2594946bd35a01a0ab64288c54fe886f4577d8b5', class: "nylas-limit-future-bookings", part: "nlfb" }, h("label", { key: 'cf955eb319e09617dd95037d66a387122238d17c' }, "Limit future bookings", h("span", { key: '4f5658353873122f083faec5504856902bdba106', class: "label-icon" }, h("tooltip-component", { key: 'ee20b3543178702592b83e70a5a85988d0c3cd29' }, h("info-icon", { key: 'dfe75e502418b3f00a29d3d0fb76338056089266', slot: "tooltip-icon" }), h("span", { key: 'c7226da2491e6c3beda2f9739afda6220c37c0e1', slot: "tooltip-content" }, "Set a limit on how far in the future bookings can be made.")))), h("time-period-selector", { key: '5ad178b3d7158738a2882cb5a6554727de34a23d', id: "limit-future-bookings", timePeriods: ['day', 'week', 'month'], exportparts: "tps__number-dropdown: nlfb__number-dropdown, tps__number-dropdown-button: nlfb__number-dropdown-button, tps__number-dropdown-content: nlfb__number-dropdown-content, tps__period-dropdown: nlfb__period-dropdown, tps__period-dropdown-button: nlfb__period-dropdown-button, tps__period-dropdown-content: nlfb__period-dropdown-content", defaultSelectedNumber: this.selectedNumber, defaultSelectedPeriod: this.selectedPeriod }))));
     }
     static get is() { return "nylas-limit-future-bookings"; }
     static get encapsulation() { return "shadow"; }
@@ -96,6 +107,27 @@ export class NylasLimitFutureBookings {
     }
     static get properties() {
         return {
+            "selectedConfiguration": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Configuration",
+                    "resolved": "Configuration | undefined",
+                    "references": {
+                        "Configuration": {
+                            "location": "import",
+                            "path": "@nylas/core",
+                            "id": "../nylas-js-core/dist/index.d.ts::Configuration"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The selected config"
+                }
+            },
             "availableDaysInFuture": {
                 "type": "number",
                 "mutable": false,
@@ -162,6 +194,9 @@ export class NylasLimitFutureBookings {
         return [{
                 "propName": "name",
                 "methodName": "elementNameChangedHandler"
+            }, {
+                "propName": "selectedConfiguration",
+                "methodName": "selectedConfigurationChangedHandler"
             }, {
                 "propName": "availableDaysInFuture",
                 "methodName": "availableDaysInFutureChanged"
@@ -181,6 +216,7 @@ export class NylasLimitFutureBookings {
 __decorate([
     RegisterComponent({
         name: 'nylas-limit-future-bookings',
+        stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),
         eventToProps: {},
         fireRegisterEvent: true,
     }),

package/dist/collection/components/scheduler-editor/nylas-limit-future-bookings/nylas-limit-future-bookings.js.map

@@ -1 +1 @@
-{"version":3,"file":"nylas-limit-future-bookings.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-limit-future-bookings/nylas-limit-future-bookings.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, Host, State, h, Element, Prop, Watch, Event, EventEmitter, Listen } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\n/**\n * The `nylas-limit-future-bookings` component is a form input for the description of an event.\n * @part nlfb - The limit future bookings container\n * @part nlfb__number-dropdown - The number dropdown container\n * @part nlfb__number-dropdown-button - The number dropdown button\n * @part nlfb__number-dropdown-content - The number dropdown content\n * @part nlfb__period-dropdown - The period dropdown container\n * @part nlfb__period-dropdown-button - The period dropdown button\n * @part nlfb__period-dropdown-content - The period dropdown content\n */\n@Component({\n  tag: 'nylas-limit-future-bookings',\n  styleUrl: 'nylas-limit-future-bookings.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasLimitFutureBookings {\n  @Prop() availableDaysInFuture?: number;\n  @AttachInternals() internals!: ElementInternals;\n  @Element() host!: HTMLElement;\n  @Prop() name: string = 'limit-future-bookings';\n\n  @State() selectedNumber: number = 1;\n  @State() selectedPeriod: string = 'day';\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-limit-future-bookings', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('availableDaysInFuture')\n  availableDaysInFutureChanged(newValue: number) {\n    const { number, period } = this.calculateNumberAndPeriodFromDays(newValue);\n    this.selectedNumber = number;\n    this.selectedPeriod = period;\n  }\n\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n  }>;\n\n  connectedCallback() {\n    debug('nylas-limit-future-bookings', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-limit-future-bookings', 'componentWillLoad');\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-limit-future-bookings', 'componentDidLoad');\n    this.availableDaysInFutureChanged(this.availableDaysInFuture ?? 1);\n    if (typeof this.internals.setFormValue !== 'function') {\n      return;\n    }\n    this.internals.setFormValue(this.availableDaysInFuture?.toString() ?? '1', this.name);\n  }\n\n  disconnectedCallback() {\n    debug('nylas-limit-future-bookings', 'disconnectedCallback');\n  }\n\n  @Listen('timePeriodChanged')\n  timePeriodChangedHandler(\n    event: CustomEvent<{\n      number: number;\n      period: string;\n    }>,\n  ) {\n    const { number, period } = event.detail;\n    let availableDaysInFuture;\n    if (period === 'day') {\n      availableDaysInFuture = number;\n    } else if (period === 'week') {\n      availableDaysInFuture = number * 7;\n    } else {\n      availableDaysInFuture = number * 30;\n    }\n    this.valueChanged.emit({ value: availableDaysInFuture, name: this.name });\n    if (typeof this.internals.setFormValue !== 'function') {\n      return;\n    }\n    this.internals.setFormValue(availableDaysInFuture.toString(), this.name);\n  }\n\n  calculateNumberAndPeriodFromDays(days: number): { number: number; period: string } {\n    if (days >= 30 && days % 30 === 0) {\n      return { number: days / 30, period: 'month' };\n    } else if (days >= 7 && days % 7 === 0) {\n      return { number: days / 7, period: 'week' };\n    } else {\n      return { number: days, period: 'day' };\n    }\n  }\n\n  @RegisterComponent<NylasLimitFutureBookings, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-limit-future-bookings',\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <div class=\"nylas-limit-future-bookings\" part=\"nlfb\">\n          <label>\n            Limit future bookings\n            <span class=\"label-icon\">\n              <tooltip-component>\n                <info-icon slot=\"tooltip-icon\" />\n                <span slot=\"tooltip-content\">Set a limit on how far in the future bookings can be made.</span>\n              </tooltip-component>\n            </span>\n          </label>\n          <time-period-selector\n            id=\"limit-future-bookings\"\n            timePeriods={['day', 'week', 'month']}\n            exportparts=\"tps__number-dropdown: nlfb__number-dropdown, tps__number-dropdown-button: nlfb__number-dropdown-button, tps__number-dropdown-content: nlfb__number-dropdown-content, tps__period-dropdown: nlfb__period-dropdown, tps__period-dropdown-button: nlfb__period-dropdown-button, tps__period-dropdown-content: nlfb__period-dropdown-content\"\n            defaultSelectedNumber={this.selectedNumber}\n            defaultSelectedPeriod={this.selectedPeriod}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"nylas-limit-future-bookings.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-limit-future-bookings/nylas-limit-future-bookings.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, Host, State, h, Element, Prop, Watch, Event, EventEmitter, Listen } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration } from '@nylas/core';\n\n/**\n * The `nylas-limit-future-bookings` component is a form input for the description of an event.\n * @part nlfb - The limit future bookings container\n * @part nlfb__number-dropdown - The number dropdown container\n * @part nlfb__number-dropdown-button - The number dropdown button\n * @part nlfb__number-dropdown-content - The number dropdown content\n * @part nlfb__period-dropdown - The period dropdown container\n * @part nlfb__period-dropdown-button - The period dropdown button\n * @part nlfb__period-dropdown-content - The period dropdown content\n */\n@Component({\n  tag: 'nylas-limit-future-bookings',\n  styleUrl: 'nylas-limit-future-bookings.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasLimitFutureBookings {\n  @Element() host!: HTMLElement;\n  /**\n   * The selected config\n   */\n  @Prop() selectedConfiguration?: Configuration;\n  @Prop() availableDaysInFuture?: number;\n  @Prop() name: string = 'limit-future-bookings';\n\n  @State() selectedNumber: number = 1;\n  @State() selectedPeriod: string = 'day';\n\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-limit-future-bookings', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('selectedConfiguration')\n  selectedConfigurationChangedHandler(newVal: Configuration) {\n    const daysInFuture = newVal?.scheduler?.available_days_in_future;\n    if (daysInFuture) {\n      this.updateNumberAndPeriodFromDays(daysInFuture);\n    }\n  }\n\n  @Watch('availableDaysInFuture')\n  availableDaysInFutureChanged(newValue: number) {\n    this.updateNumberAndPeriodFromDays(newValue);\n  }\n\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n  }>;\n\n  connectedCallback() {\n    debug('nylas-limit-future-bookings', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-limit-future-bookings', 'componentWillLoad');\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-limit-future-bookings', 'componentDidLoad');\n    this.availableDaysInFutureChanged(this.availableDaysInFuture ?? 1);\n    if (typeof this.internals.setFormValue !== 'function') {\n      return;\n    }\n    this.internals.setFormValue(this.availableDaysInFuture?.toString() ?? '1', this.name);\n  }\n\n  disconnectedCallback() {\n    debug('nylas-limit-future-bookings', 'disconnectedCallback');\n  }\n\n  @Listen('timePeriodChanged')\n  timePeriodChangedHandler(\n    event: CustomEvent<{\n      number: number;\n      period: string;\n    }>,\n  ) {\n    const { number, period } = event.detail;\n    let availableDaysInFuture;\n    if (period === 'day') {\n      availableDaysInFuture = number;\n    } else if (period === 'week') {\n      availableDaysInFuture = number * 7;\n    } else {\n      availableDaysInFuture = number * 30;\n    }\n    this.valueChanged.emit({ value: availableDaysInFuture, name: 'availableDaysInFuture' });\n    if (typeof this.internals.setFormValue !== 'function') {\n      return;\n    }\n    this.internals.setFormValue(availableDaysInFuture.toString(), this.name);\n  }\n\n  updateNumberAndPeriodFromDays(days: number): void {\n    let number, period;\n    if (days >= 30 && days % 30 === 0) {\n      number = days / 30;\n      period = 'month';\n    } else if (days >= 7 && days % 7 === 0) {\n      number = days / 7;\n      period = 'week';\n    } else {\n      number = days;\n      period = 'day';\n    }\n    this.selectedNumber = number;\n    this.selectedPeriod = period;\n  }\n\n  @RegisterComponent<NylasLimitFutureBookings, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-limit-future-bookings',\n    stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <div class=\"nylas-limit-future-bookings\" part=\"nlfb\">\n          <label>\n            Limit future bookings\n            <span class=\"label-icon\">\n              <tooltip-component>\n                <info-icon slot=\"tooltip-icon\" />\n                <span slot=\"tooltip-content\">Set a limit on how far in the future bookings can be made.</span>\n              </tooltip-component>\n            </span>\n          </label>\n          <time-period-selector\n            id=\"limit-future-bookings\"\n            timePeriods={['day', 'week', 'month']}\n            exportparts=\"tps__number-dropdown: nlfb__number-dropdown, tps__number-dropdown-button: nlfb__number-dropdown-button, tps__number-dropdown-content: nlfb__number-dropdown-content, tps__period-dropdown: nlfb__period-dropdown, tps__period-dropdown-button: nlfb__period-dropdown-button, tps__period-dropdown-content: nlfb__period-dropdown-content\"\n            defaultSelectedNumber={this.selectedNumber}\n            defaultSelectedPeriod={this.selectedPeriod}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/scheduler-editor/nylas-list-configurations/nylas-list-configurations.css

@@ -1,5 +1,9 @@
 :host {
-  display: block;
+  display: grid;
+  grid-auto-flow: row;
+  width: 100%;
+  font-family: inherit;
+  font-optical-sizing: auto;
   --nylas-primary: #2563eb;
   --nylas-error: #cc4841;
   --nylas-error-pressed: #992222;
@@ -29,12 +33,19 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 1rem;
+  margin-bottom: 2rem;
+  gap: 1rem;
+}
+@media screen and (max-width: 768px) {
+  .header {
+    flex-direction: column;
+  }
 }
 .header h2 {
   margin: 0;
   font-size: 1.25rem;
   color: var(--nylas-base-900);
+  font-weight: 600;
 }
 .header p {
   margin: 0;
@@ -44,22 +55,38 @@
 .header .actions {
   justify-self: end;
 }
+@media screen and (max-width: 768px) {
+  .header .actions {
+    width: 100%;
+  }
+}
 
 .configurations {
   border: 1px solid var(--nylas-base-200);
   border-radius: var(--nylas-border-radius-2x);
+  overflow-x: auto;
 }
 .configurations table {
   width: 100%;
   border-spacing: 0;
   border-collapse: collapse;
+  font-family: inherit;
 }
 .configurations table tr {
+  color: var(--nylas-base-800);
   border-bottom: 1px solid var(--nylas-base-200);
+  font-family: inherit;
 }
 .configurations table tr:last-of-type {
   border-bottom: 0;
 }
+.configurations table tr.hide {
+  display: none;
+}
+.configurations table th {
+  font-weight: 600;
+  text-transform: uppercase;
+}
 .configurations table tr.no-configurations td > div {
   display: flex;
   height: 100%;
@@ -84,6 +111,7 @@
 .configurations table td {
   text-align: left;
   padding: 1rem;
+  font-family: inherit;
 }
 .configurations table .actions {
   text-align: right;
@@ -102,4 +130,13 @@
 }
 .configurations table .title .config-event-description {
   font-size: 0.75rem;
+}
+
+.error-container {
+  margin-top: 1.5rem;
+}
+.error-container .error {
+  color: var(--nylas-error);
+  padding: 0.5rem 0;
+  margin: 1rem 0 0;
 }

package/dist/collection/components/scheduler-editor/nylas-list-configurations/nylas-list-configurations.js

@@ -20,6 +20,7 @@ export class NylasListConfigurations {
         this.configurations = [];
         this.schedulerPreviewLink = '';
         this.state = 'loading';
+        this.error = '';
     }
     connectedCallback() {
         debug('[nylas-list-configurations]', 'connectedCallback');
@@ -43,10 +44,15 @@ export class NylasListConfigurations {
     async setState(state) {
         this.state = state;
     }
+    async setError(error) {
+        this.error = error;
+    }
     render() {
-        return (h(Host, { key: 'c6579bd33e43be81caa460d87e99ed53f8123c6a' }, h("div", { key: 'd3ff4fc25e34a2dab3820b774f52a845c37bb282', class: "nylas-list-configurations" }, h("div", { key: 'fc6ff138be7cf63196217b7ef7524ae8f0a82c5c', class: "header" }, h("div", { key: 'a518d44c645bfc5d5e8449119ebc4be7c475a5f3', class: "description" }, h("h2", { key: 'a9d999a93c26ee3d9040dcae09306ecb7da43fb5' }, "All scheduling configurations"), h("p", { key: '6361799617ce1ccf7469cce6a0064d94d97701b0' }, "Create, edit and manage all your scheduling configurations.")), this.configurations && this.configurations.length > 0 && (h("div", { class: "actions" }, h("button-component", { clickHandler: () => {
+        return (h(Host, null, h("div", { class: "header" }, h("div", { class: "description" }, h("h2", null, "All scheduling pages"), h("p", null, "Create, edit and manage all your scheduling pages.")), this.configurations && this.configurations.length > 0 && (h("div", { class: "actions" }, h("button-component", { clickHandler: () => {
                 this.createButtonClick.emit(this.host);
-            } }, "Create new")))), h("div", { key: '3f26491b35427c4364bcc1c5e1cbffdfabd52d37', class: "configurations" }, h("table", { key: 'ca8bf13b620b92cd4892b8dbf218988915ce4fc0' }, h("tr", { key: '09526ab48bbc988b0595f8060a184c340f1d43cc' }, h("th", { key: '7367e03d461f854eaf84e166d65471d356f44ee5' }, "Configuration event title"), h("th", { key: 'f983dcae11fdd33e21f0f202eb9b43a7d409b714' }, "Duration"), h("th", { key: '828c60e134498a1db8bd31ce0311bb8a771cb435', class: "actions" }, "Actions")), this.state === 'loading' && (h("tr", { class: "no-configurations" }, h("td", { colSpan: 3 }, h("div", null, h("h3", null, "Loading..."), h("p", null, "Please wait while we fetch your configurations"))))), this.state !== 'loading' && (!this.configurations || this.configurations.length === 0) && (h("tr", { class: "no-configurations" }, h("td", { colSpan: 3 }, h("div", null, h("calendar-icon", { width: "48", height: "48" }), h("h3", null, "No configurations found"), h("p", null, "Get started with creating your first scheduling page"), h("button-component", { clickHandler: () => {
+            } }, "Create new")))), h("div", { class: "configurations" }, h("table", null, h("tr", { class: {
+                hide: this.state === 'loading' || (this.configurations && this.configurations.length === 0),
+            } }, h("th", null, "Scheduling page event title"), h("th", null, "Duration"), h("th", { class: "actions" }, "Actions")), this.state === 'loading' && (h("tr", { class: "no-configurations" }, h("td", { colSpan: 3 }, h("div", null, h("h3", null, "Loading..."), h("p", null, "Please wait while we fetch the scheduling pages"))))), this.state !== 'loading' && (!this.configurations || this.configurations.length === 0) && (h("tr", { class: "no-configurations" }, h("td", { colSpan: 3 }, h("div", null, h("calendar-icon", { width: "48", height: "48" }), h("h3", null, "No scheduling pages found"), h("p", null, "Get started with creating your first scheduling page"), h("button-component", { clickHandler: () => {
                 this.createButtonClick.emit(this.host);
             } }, "Create new"))))), this.state !== 'loading' &&
             this.configurations.map(config => (h("tr", { key: config.id }, h("td", null, h("div", { class: "title" }, h("span", { class: 'config-event-title' }, config.event_booking.title), h("span", { class: 'config-event-description' }, config.event_booking.description))), h("td", null, h("div", null, config.availability.duration_minutes, " mins")), h("td", null, h("div", { class: "actions" }, h("button-component", { variant: 'basic', clickHandler: event => {
@@ -58,7 +64,7 @@ export class NylasListConfigurations {
                 } }, "Edit"), h("button-component", { variant: 'basic', clickHandler: event => {
                     event.preventDefault();
                     this.deleteButtonClick.emit({ host: this.host, configuration: config });
-                } }, "Delete")))))))))));
+                } }, "Delete")))))))), h("div", { class: "error-container" }, h("p", { class: 'error' }, this.state === 'error' && this.error))));
     }
     static get is() { return "nylas-list-configurations"; }
     static get encapsulation() { return "shadow"; }
@@ -118,7 +124,8 @@ export class NylasListConfigurations {
     }
     static get states() {
         return {
-            "state": {}
+            "state": {},
+            "error": {}
         };
     }
     static get events() {
@@ -253,6 +260,27 @@ export class NylasListConfigurations {
                     "text": "",
                     "tags": []
                 }
+            },
+            "setError": {
+                "complexType": {
+                    "signature": "(error: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "error",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
             }
         };
     }
@@ -267,20 +295,29 @@ __decorate([
             initListConfigurations: async (event, connector) => {
                 const host = event.detail;
                 await host.setState('loading');
-                await connector.schedulerConfig.getConfigurations();
+                const [data, error] = await connector.schedulerConfig.getConfigurations();
+                if (!data && error && error.message) {
+                    await host.setState('error');
+                    await host.setError(error.message);
+                    return;
+                }
                 await host.setState('loaded');
             },
             createButtonClick: async (_, connector) => {
-                connector.schedulerConfigStore.state.config = {};
+                connector.schedulerConfigStore.resetSelectedConfiguration();
                 connector.schedulerConfigStore.state.action = 'create';
             },
             deleteButtonClick: async (event, connector) => {
-                const { configuration } = event.detail;
-                await connector.schedulerConfig.deleteConfiguration(configuration.id);
+                const { host, configuration } = event.detail;
+                const [data, error] = await connector.schedulerConfig.deleteConfiguration(configuration.id);
+                if (!data && error && error.message) {
+                    await host.setState('error');
+                    await host.setError(error.message);
+                }
             },
             editButtonClick: async (event, connector) => {
                 const { configuration } = event.detail;
-                connector.schedulerConfigStore.state.config = configuration;
+                connector.schedulerConfigStore.state.selectedConfiguration = configuration;
                 connector.schedulerConfigStore.state.action = 'edit';
             },
         },

package/dist/collection/components/scheduler-editor/nylas-list-configurations/nylas-list-configurations.js.map

@@ -1 +1 @@
-{"version":3,"file":"nylas-list-configurations.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-list-configurations/nylas-list-configurations.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug, parsePreviewLink } from '@/utils/utils';\nimport { Component, Element, Event, EventEmitter, Host, Method, Prop, State, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration } from '@nylas/core';\n\n/**\n * The `nylas-list-configurations` component displays a list of scheduling configurations.\n */\n@Component({\n  tag: 'nylas-list-configurations',\n  styleUrl: 'nylas-list-configurations.scss',\n  shadow: true,\n})\nexport class NylasListConfigurations {\n  /**\n   * The host element.\n   */\n  @Element() host!: HTMLNylasListConfigurationsElement;\n\n  /**\n   * The list of configurations to display.\n   */\n  @Prop() configurations: Configuration[] = [];\n\n  /**\n   * The scheduler preview link to use when the user clicks on the preview button.\n   * You can use a placeholder `{config.id}` to replace the configuration id anywhere in the link.\n   */\n  @Prop({ attribute: 'scheduler-preview-link' }) schedulerPreviewLink: string = '';\n\n  /**\n   * Event emitted when the component is initialized.\n   */\n  @Event() initListConfigurations!: EventEmitter<HTMLNylasListConfigurationsElement>;\n\n  /**\n   * Event emitted when the user clicks the create event button.\n   */\n  @Event() createButtonClick!: EventEmitter<HTMLNylasListConfigurationsElement>;\n\n  /**\n   * Event emitted when the user clicks the edit event button.\n   */\n  @Event() editButtonClick!: EventEmitter<{\n    host: HTMLNylasListConfigurationsElement;\n    configuration: Configuration;\n  }>;\n\n  /**\n   * Event emitted when the user clicks the delete event button.\n   */\n  @Event() deleteButtonClick!: EventEmitter<{\n    host: HTMLNylasListConfigurationsElement;\n    configuration: Configuration;\n  }>;\n\n  /**\n   * The current state of the component.\n   */\n  @State() private state: 'loading' | 'loaded' | 'error' = 'loading';\n\n  connectedCallback() {\n    debug('[nylas-list-configurations]', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('[nylas-list-configurations]', 'componentWillLoad');\n\n    // If we have configurations, we will set the state to loaded.\n    if (this.configurations && this.configurations.length > 0) {\n      this.state = 'loaded';\n    }\n  }\n\n  componentDidLoad() {\n    debug('[nylas-list-configurations]', 'componentDidLoad');\n\n    // Fire the init event. By default, we will fetch the configurations.\n    // This is defined in the eventToProps object in the RegisterComponent decorator.\n    this.initListConfigurations.emit(this.host);\n  }\n\n  disconnectedCallback() {\n    debug('[nylas-list-configurations]', 'disconnectedCallback');\n  }\n\n  @Method()\n  async getState() {\n    return this.state;\n  }\n\n  @Method()\n  async setState(state: 'loading' | 'loaded' | 'error') {\n    this.state = state;\n  }\n\n  @RegisterComponent<NylasListConfigurations, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-list-configurations',\n    stateToProps: new Map([['schedulerConfig.configurations', 'configurations']]),\n    localPropsToProp: new Map([['schedulerPreviewLink', 'schedulerPreviewLink']]),\n    eventToProps: {\n      initListConfigurations: async (event, connector) => {\n        const host = event.detail;\n        await host.setState('loading');\n        await connector.schedulerConfig.getConfigurations();\n        await host.setState('loaded');\n      },\n      createButtonClick: async (_, connector) => {\n        connector.schedulerConfigStore.state.config = {};\n        connector.schedulerConfigStore.state.action = 'create';\n      },\n      deleteButtonClick: async (event, connector) => {\n        const { configuration } = event.detail;\n        await connector.schedulerConfig.deleteConfiguration(configuration.id);\n      },\n      editButtonClick: async (event, connector) => {\n        const { configuration } = event.detail;\n        connector.schedulerConfigStore.state.config = configuration;\n        connector.schedulerConfigStore.state.action = 'edit';\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <div class=\"nylas-list-configurations\">\n          <div class=\"header\">\n            <div class=\"description\">\n              <h2>All scheduling configurations</h2>\n              <p>Create, edit and manage all your scheduling configurations.</p>\n            </div>\n            {this.configurations && this.configurations.length > 0 && (\n              <div class=\"actions\">\n                <button-component\n                  clickHandler={() => {\n                    this.createButtonClick.emit(this.host);\n                  }}\n                >\n                  Create new\n                </button-component>\n              </div>\n            )}\n          </div>\n          <div class=\"configurations\">\n            <table>\n              <tr>\n                <th>Configuration event title</th>\n                <th>Duration</th>\n                <th class=\"actions\">Actions</th>\n              </tr>\n              {this.state === 'loading' && (\n                <tr class=\"no-configurations\">\n                  <td colSpan={3}>\n                    <div>\n                      <h3>Loading...</h3>\n                      <p>Please wait while we fetch your configurations</p>\n                    </div>\n                  </td>\n                </tr>\n              )}\n              {this.state !== 'loading' && (!this.configurations || this.configurations.length === 0) && (\n                <tr class=\"no-configurations\">\n                  <td colSpan={3}>\n                    <div>\n                      <calendar-icon width=\"48\" height=\"48\"></calendar-icon>\n                      <h3>No configurations found</h3>\n                      <p>Get started with creating your first scheduling page</p>\n                      <button-component\n                        clickHandler={() => {\n                          this.createButtonClick.emit(this.host);\n                        }}\n                      >\n                        Create new\n                      </button-component>\n                    </div>\n                  </td>\n                </tr>\n              )}\n              {this.state !== 'loading' &&\n                this.configurations.map(config => (\n                  <tr key={config.id}>\n                    <td>\n                      <div class=\"title\">\n                        <span class={'config-event-title'}>{config.event_booking.title}</span>\n                        <span class={'config-event-description'}>{config.event_booking.description}</span>\n                      </div>\n                    </td>\n                    <td>\n                      <div>{config.availability.duration_minutes} mins</div>\n                    </td>\n                    <td>\n                      <div class=\"actions\">\n                        <button-component\n                          variant={'basic'}\n                          clickHandler={event => {\n                            event.preventDefault();\n                            window.open(parsePreviewLink(this.schedulerPreviewLink, config), '_blank');\n                          }}\n                        >\n                          Preview\n                        </button-component>\n                        <button-component\n                          variant={'basic'}\n                          clickHandler={event => {\n                            event.preventDefault();\n                            this.editButtonClick.emit({ host: this.host, configuration: config });\n                          }}\n                        >\n                          Edit\n                        </button-component>\n                        <button-component\n                          variant={'basic'}\n                          clickHandler={event => {\n                            event.preventDefault();\n                            this.deleteButtonClick.emit({ host: this.host, configuration: config });\n                          }}\n                        >\n                          Delete\n                        </button-component>\n                      </div>\n                    </td>\n                  </tr>\n                ))}\n            </table>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"nylas-list-configurations.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-list-configurations/nylas-list-configurations.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug, parsePreviewLink } from '@/utils/utils';\nimport { Component, Element, Event, EventEmitter, Host, Method, Prop, State, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration } from '@nylas/core';\n\n/**\n * The `nylas-list-configurations` component displays a list of scheduling pages.\n */\n@Component({\n  tag: 'nylas-list-configurations',\n  styleUrl: 'nylas-list-configurations.scss',\n  shadow: true,\n})\nexport class NylasListConfigurations {\n  /**\n   * The host element.\n   */\n  @Element() host!: HTMLNylasListConfigurationsElement;\n\n  /**\n   * The list of configurations to display.\n   */\n  @Prop() configurations: Configuration[] = [];\n\n  /**\n   * The scheduler preview link to use when the user clicks on the preview button.\n   * You can use a placeholder `{config.id}` to replace the configuration id anywhere in the link.\n   */\n  @Prop({ attribute: 'scheduler-preview-link' }) schedulerPreviewLink: string = '';\n\n  /**\n   * Event emitted when the component is initialized.\n   */\n  @Event() initListConfigurations!: EventEmitter<HTMLNylasListConfigurationsElement>;\n\n  /**\n   * Event emitted when the user clicks the create event button.\n   */\n  @Event() createButtonClick!: EventEmitter<HTMLNylasListConfigurationsElement>;\n\n  /**\n   * Event emitted when the user clicks the edit event button.\n   */\n  @Event() editButtonClick!: EventEmitter<{\n    host: HTMLNylasListConfigurationsElement;\n    configuration: Configuration;\n  }>;\n\n  /**\n   * Event emitted when the user clicks the delete event button.\n   */\n  @Event() deleteButtonClick!: EventEmitter<{\n    host: HTMLNylasListConfigurationsElement;\n    configuration: Configuration;\n  }>;\n\n  /**\n   * The current state of the component.\n   */\n  @State() private state: 'loading' | 'loaded' | 'error' = 'loading';\n\n  /**\n   * The error message to display.\n   */\n  @State() private error: string = '';\n\n  connectedCallback() {\n    debug('[nylas-list-configurations]', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('[nylas-list-configurations]', 'componentWillLoad');\n\n    // If we have configurations, we will set the state to loaded.\n    if (this.configurations && this.configurations.length > 0) {\n      this.state = 'loaded';\n    }\n  }\n\n  componentDidLoad() {\n    debug('[nylas-list-configurations]', 'componentDidLoad');\n\n    // Fire the init event. By default, we will fetch the configurations.\n    // This is defined in the eventToProps object in the RegisterComponent decorator.\n    this.initListConfigurations.emit(this.host);\n  }\n\n  disconnectedCallback() {\n    debug('[nylas-list-configurations]', 'disconnectedCallback');\n  }\n\n  @Method()\n  async getState() {\n    return this.state;\n  }\n\n  @Method()\n  async setState(state: 'loading' | 'loaded' | 'error') {\n    this.state = state;\n  }\n\n  @Method()\n  async setError(error: string) {\n    this.error = error;\n  }\n\n  @RegisterComponent<NylasListConfigurations, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-list-configurations',\n    stateToProps: new Map([['schedulerConfig.configurations', 'configurations']]),\n    localPropsToProp: new Map([['schedulerPreviewLink', 'schedulerPreviewLink']]),\n    eventToProps: {\n      initListConfigurations: async (event, connector) => {\n        const host = event.detail;\n        await host.setState('loading');\n        const [data, error] = await connector.schedulerConfig.getConfigurations();\n        if (!data && error && error.message) {\n          await host.setState('error');\n          await host.setError(error.message);\n          return;\n        }\n        await host.setState('loaded');\n      },\n      createButtonClick: async (_, connector) => {\n        connector.schedulerConfigStore.resetSelectedConfiguration();\n        connector.schedulerConfigStore.state.action = 'create';\n      },\n      deleteButtonClick: async (event, connector) => {\n        const { host, configuration } = event.detail;\n        const [data, error] = await connector.schedulerConfig.deleteConfiguration(configuration.id);\n        if (!data && error && error.message) {\n          await host.setState('error');\n          await host.setError(error.message);\n        }\n      },\n      editButtonClick: async (event, connector) => {\n        const { configuration } = event.detail;\n        connector.schedulerConfigStore.state.selectedConfiguration = configuration;\n        connector.schedulerConfigStore.state.action = 'edit';\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <div class=\"header\">\n          <div class=\"description\">\n            <h2>All scheduling pages</h2>\n            <p>Create, edit and manage all your scheduling pages.</p>\n          </div>\n          {this.configurations && this.configurations.length > 0 && (\n            <div class=\"actions\">\n              <button-component\n                clickHandler={() => {\n                  this.createButtonClick.emit(this.host);\n                }}\n              >\n                Create new\n              </button-component>\n            </div>\n          )}\n        </div>\n        <div class=\"configurations\">\n          <table>\n            <tr\n              class={{\n                hide: this.state === 'loading' || (this.configurations && this.configurations.length === 0),\n              }}\n            >\n              <th>Scheduling page event title</th>\n              <th>Duration</th>\n              <th class=\"actions\">Actions</th>\n            </tr>\n            {this.state === 'loading' && (\n              <tr class=\"no-configurations\">\n                <td colSpan={3}>\n                  <div>\n                    <h3>Loading...</h3>\n                    <p>Please wait while we fetch the scheduling pages</p>\n                  </div>\n                </td>\n              </tr>\n            )}\n            {this.state !== 'loading' && (!this.configurations || this.configurations.length === 0) && (\n              <tr class=\"no-configurations\">\n                <td colSpan={3}>\n                  <div>\n                    <calendar-icon width=\"48\" height=\"48\"></calendar-icon>\n                    <h3>No scheduling pages found</h3>\n                    <p>Get started with creating your first scheduling page</p>\n                    <button-component\n                      clickHandler={() => {\n                        this.createButtonClick.emit(this.host);\n                      }}\n                    >\n                      Create new\n                    </button-component>\n                  </div>\n                </td>\n              </tr>\n            )}\n            {this.state !== 'loading' &&\n              this.configurations.map(config => (\n                <tr key={config.id}>\n                  <td>\n                    <div class=\"title\">\n                      <span class={'config-event-title'}>{config.event_booking.title}</span>\n                      <span class={'config-event-description'}>{config.event_booking.description}</span>\n                    </div>\n                  </td>\n                  <td>\n                    <div>{config.availability.duration_minutes} mins</div>\n                  </td>\n                  <td>\n                    <div class=\"actions\">\n                      <button-component\n                        variant={'basic'}\n                        clickHandler={event => {\n                          event.preventDefault();\n                          window.open(parsePreviewLink(this.schedulerPreviewLink, config), '_blank');\n                        }}\n                      >\n                        Preview\n                      </button-component>\n                      <button-component\n                        variant={'basic'}\n                        clickHandler={event => {\n                          event.preventDefault();\n                          this.editButtonClick.emit({ host: this.host, configuration: config });\n                        }}\n                      >\n                        Edit\n                      </button-component>\n                      <button-component\n                        variant={'basic'}\n                        clickHandler={event => {\n                          event.preventDefault();\n                          this.deleteButtonClick.emit({ host: this.host, configuration: config });\n                        }}\n                      >\n                        Delete\n                      </button-component>\n                    </div>\n                  </td>\n                </tr>\n              ))}\n          </table>\n        </div>\n        <div class=\"error-container\">\n          <p class={'error'}>{this.state === 'error' && this.error}</p>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/scheduler-editor/nylas-location-component/nylas-location-component.css

@@ -33,8 +33,8 @@
 .nylas-event-location label {
   display: flex;
   align-items: center;
-  color: var(--nylas-base-nylas-base-800);
-  font-size: 14px;
+  color: var(--nylas-base-800);
+  font-size: 16px;
   font-style: normal;
   font-weight: 400;
   line-height: 150%; /* 21px */