@nylas/web-elements 1.0.2-canary.2 → 1.1.0-canary.3

package/dist/components/nylas-event-title2.js.map

@@ -1 +1 @@
-{"file":"nylas-event-title2.js","mappings":"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","names":["eventTitleTokens"],"sources":["src/components/scheduler-editor/nylas-event-title/nylas-event-title.scss?tag=nylas-event-title&encapsulation=shadow","src/components/scheduler-editor/nylas-event-title/nylas-event-title.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  @include default-css-variables;\n}\n\n.nylas-event-title {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  position: relative;\n  text-align: left;\n  div.title {\n    padding: 12px 16px;\n    border: 1px solid var(--nylas-base-200);\n    border-radius: var(--nylas-border-radius-2x);\n    overflow: scroll;\n    white-space: nowrap;\n    scrollbar-width: thin;\n    &::-webkit-scrollbar {\n      width: 6px;\n      height: 6px;\n    }\n  }\n  input {\n    padding: 12px 16px;\n    border-width: 1;\n    border-radius: 8px;\n    border: 1px solid var(--nylas-base-200);\n  }\n  span.help-text {\n    color: var(--nylas-base-800);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 21px;\n  }\n  label {\n    display: flex;\n    align-items: center;\n    color: var(--nylas-base-800);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 150%; /* 21px */\n    span.required {\n      color: var(--nylas-error, #cc4841);\n    }\n    span.label-icon {\n      margin-left: 4px;\n      tooltip-component {\n        display: flex;\n      }\n    }\n  }\n}\n\n.highlighted-tag {\n  background-color: var(--nylas-base-200);\n  border-radius: var(--nylas-border-radius);\n  padding: 5px;\n  margin-left: 4px;\n}\n\n.token-options {\n  display: block;\n  background-color: var(--nylas-base-0);\n  width: 100%;\n  max-height: 336px;\n  overflow: auto;\n  z-index: 1;\n  border-radius: 4px;\n  position: absolute;\n  top: calc(48px + 24px + 8px); // 48px is the height of the input, 24px is the height of the label, 8px is the gap between the label and the input\n  @media #{$mobile} {\n    right: 0;\n    width: 325px;\n    max-width: unset;\n  }\n  box-shadow: 0px 4px 6px -2px #0000000d;\n  box-shadow: 0px 10px 15px -3px #0000001a;\n  ul {\n    padding: 0;\n    list-style-type: none;\n    color: var(--nylas-base-900);\n    max-height: 336px;\n    margin: 0;\n    li {\n      padding: 16px, 12px, 16px, 12px;\n      color: black;\n      padding: 12px 16px;\n      text-decoration: none;\n      display: block;\n      font-family: inherit;\n      font-size: 14px;\n      font-weight: 400;\n      line-height: 20px;\n      letter-spacing: 0px;\n      text-align: left;\n      cursor: pointer;\n      .token-label {\n        display: flex;\n        flex-direction: column;\n        font-weight: 400;\n        .token {\n          color: var(--nylas-abse-900);\n          font-size: 16px;\n          line-height: 24px;\n        }\n        .description {\n          color: var(--nylas-base-600);\n          font-size: 14px;\n          line-height: 21px;\n        }\n      }\n      &:hover,\n      &:focus,\n      &:active,\n      &.active {\n        background-color: var(--nylas-base-100);\n        .token-label {\n          .token {\n            color: var(--nylas-primary);\n          }\n        }\n      }\n    }\n  }\n  .selected {\n    background-color: var(--nylas-base-100);\n  }\n}\n","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 */\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\">\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            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\">\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-title2.js","mappings":"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","names":["eventTitleTokens"],"sources":["src/components/scheduler-editor/nylas-event-title/nylas-event-title.scss?tag=nylas-event-title&encapsulation=shadow","src/components/scheduler-editor/nylas-event-title/nylas-event-title.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  @include default-css-variables;\n}\n\n.nylas-event-title {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  position: relative;\n  text-align: left;\n  div.title {\n    padding: 12px 16px;\n    border: 1px solid var(--nylas-base-200);\n    border-radius: var(--nylas-border-radius-2x);\n    overflow: scroll;\n    white-space: nowrap;\n    scrollbar-width: thin;\n    &::-webkit-scrollbar {\n      width: 6px;\n      height: 6px;\n    }\n  }\n  input {\n    padding: 12px 16px;\n    border-width: 1;\n    border-radius: 8px;\n    border: 1px solid var(--nylas-base-200);\n  }\n  span.help-text {\n    color: var(--nylas-base-800);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 21px;\n  }\n  label {\n    display: flex;\n    align-items: center;\n    color: var(--nylas-base-800);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 150%; /* 21px */\n    span.required {\n      color: var(--nylas-error, #cc4841);\n    }\n    span.label-icon {\n      margin-left: 4px;\n      tooltip-component {\n        display: flex;\n      }\n    }\n  }\n}\n\n.highlighted-tag {\n  background-color: var(--nylas-base-200);\n  border-radius: var(--nylas-border-radius);\n  padding: 5px;\n  margin-left: 4px;\n}\n\n.token-options {\n  display: block;\n  background-color: var(--nylas-base-0);\n  width: 100%;\n  max-height: 336px;\n  overflow: auto;\n  z-index: 1;\n  border-radius: 4px;\n  position: absolute;\n  top: calc(48px + 24px + 8px); // 48px is the height of the input, 24px is the height of the label, 8px is the gap between the label and the input\n  @media #{$mobile} {\n    right: 0;\n    width: 325px;\n    max-width: unset;\n  }\n  box-shadow: 0px 4px 6px -2px #0000000d;\n  box-shadow: 0px 10px 15px -3px #0000001a;\n  ul {\n    padding: 0;\n    list-style-type: none;\n    color: var(--nylas-base-900);\n    max-height: 336px;\n    margin: 0;\n    li {\n      padding: 16px, 12px, 16px, 12px;\n      color: black;\n      padding: 12px 16px;\n      text-decoration: none;\n      display: block;\n      font-family: inherit;\n      font-size: 14px;\n      font-weight: 400;\n      line-height: 20px;\n      letter-spacing: 0px;\n      text-align: left;\n      cursor: pointer;\n      .token-label {\n        display: flex;\n        flex-direction: column;\n        font-weight: 400;\n        .token {\n          color: var(--nylas-abse-900);\n          font-size: 16px;\n          line-height: 24px;\n        }\n        .description {\n          color: var(--nylas-base-600);\n          font-size: 14px;\n          line-height: 21px;\n        }\n      }\n      &:hover,\n      &:focus,\n      &:active,\n      &.active {\n        background-color: var(--nylas-base-100);\n        .token-label {\n          .token {\n            color: var(--nylas-primary);\n          }\n        }\n      }\n    }\n  }\n  .selected {\n    background-color: var(--nylas-base-100);\n  }\n}\n","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}

package/dist/components/nylas-form-card2.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { R as RegisterComponent } from './register-component.js';
 import { d as debug } from './utils.js';
 
-const nylasFormCardCss = ":host{display:block;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif}.nylas-form-card{width:100%;border-radius:8px;border:1px solid var(--Nylas-base-Nylas-base-200, #b3b8d8)}.nylas-form-card__header{padding:1rem;border-bottom:1px solid var(--Nylas-base-Nylas-base-200, #b3b8d8)}";
+const nylasFormCardCss = ":host{display:block;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif}.nylas-form-card{width:100%;border-radius:8px;border:1px solid var(--nylas-base-200)}.nylas-form-card__header{padding:1rem;border-bottom:1px solid var(--nylas-base-200)}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -38,7 +38,7 @@ const NylasFormCard = proxyCustomElement(class NylasFormCard extends HTMLElement
         debug('nylas-event-card', 'disconnectedCallback');
     }
     render() {
-        return (h(Host, { key: '53542805c27fe36d7a16d153a9b97470871de66b' }, h("div", { key: '1743e493b153a6dd4719fd2756dc63b9a50658e9', class: "nylas-form-card" }, h("div", { key: '17253fff54dda23c170d8891abced0d315478e3d', class: "nylas-form-card__header" }, h("slot", { key: '419238cd54b7b03f2f5771c0d1315675480fe280', name: "header-title" }), h("slot", { key: '0e398d4cffa4fb7a505dfdf712401cb38a9e189a', name: "header-subtitle" })), h("div", { key: '7fc1d3c1105aa66a0e33fd3fde606dc5dbeedb97', class: "nylas-form-card__content" }, h("slot", { key: '95f72c104052bec25883dff2d93227aa2e6e5eb4', name: "content" })))));
+        return (h(Host, { key: 'a25e6cf278893d8152895bedc42fa83584b26ed1' }, h("div", { key: 'ca83bf28168fe3cfff4e910dc80536574c33e55b', class: "nylas-form-card" }, h("div", { key: '0bc4aa5cfc27ed26f301a29b45ab7bafd80f507f', class: "nylas-form-card__header" }, h("slot", { key: '1df96d905cf7c3e563eaf36f9825bb67f190795a', name: "header-title" }), h("slot", { key: 'd62a004ea3fb7a282a986b749a8b5998827cf498', name: "header-subtitle" })), h("div", { key: '6f2f1576516dee66795f3c423fd23725978891b0', class: "nylas-form-card__content" }, h("slot", { key: 'af397af820898e806cf64a7528563a31ce821fd3', name: "content" })))));
     }
     static get formAssociated() { return true; }
     static get style() { return nylasFormCardCss; }

package/dist/components/nylas-form-card2.js.map

@@ -1 +1 @@
-{"file":"nylas-form-card2.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,k0BAAk0B;;;;;;;;;;;;;;;;MCe90B,aAAa;;;;;;;IAGxB,iBAAiB;QACf,KAAK,CAAC,kBAAkB,EAAE,mBAAmB,CAAC,CAAC;KAChD;IAED,iBAAiB;QACf,KAAK,CAAC,kBAAkB,EAAE,mBAAmB,CAAC,CAAC;KAChD;IAED,gBAAgB;QACd,KAAK,CAAC,kBAAkB,EAAE,kBAAkB,CAAC,CAAC;KAC/C;IAED,oBAAoB;QAClB,KAAK,CAAC,kBAAkB,EAAE,sBAAsB,CAAC,CAAC;KACnD;IAOD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,4DAAK,KAAK,EAAC,yBAAyB,IAClC,6DAAM,IAAI,EAAC,cAAc,GAAQ,EACjC,6DAAM,IAAI,EAAC,iBAAiB,GAAQ,CAChC,EACN,4DAAK,KAAK,EAAC,0BAA0B,IACnC,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACD,EACP;KACH;;;;AAdD;IALC,iBAAiB,CAAmG;QACnH,IAAI,EAAE,iBAAiB;QACvB,YAAY,EAAE,EAAE;QAChB,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;2CAeD;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/scheduler-editor/nylas-form-card/nylas-form-card.scss?tag=nylas-form-card&encapsulation=shadow","src/components/scheduler-editor/nylas-form-card/nylas-form-card.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  @include default-css-variables;\n}\n\n.nylas-form-card {\n  width: 100%;\n  border-radius: 8px;\n  border: 1px solid var(--Nylas-base-Nylas-base-200, #b3b8d8);\n}\n.nylas-form-card__header {\n  padding: 1rem;\n  border-bottom: 1px solid var(--Nylas-base-Nylas-base-200, #b3b8d8);\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\n/**\n * The `nylas-form-card` component is a card that can be used to display a form. It is a simple wrapper around a card with a header and content area.\n */\n@Component({\n  tag: 'nylas-form-card',\n  styleUrl: 'nylas-form-card.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasFormCard {\n  @AttachInternals() internals!: ElementInternals;\n\n  connectedCallback() {\n    debug('nylas-event-card', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-event-card', 'componentWillLoad');\n  }\n\n  componentDidLoad() {\n    debug('nylas-event-card', 'componentDidLoad');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-event-card', 'disconnectedCallback');\n  }\n\n  @RegisterComponent<NylasFormCard, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-form-card',\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <div class=\"nylas-form-card\">\n          <div class=\"nylas-form-card__header\">\n            <slot name=\"header-title\"></slot>\n            <slot name=\"header-subtitle\"></slot>\n          </div>\n          <div class=\"nylas-form-card__content\">\n            <slot name=\"content\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nylas-form-card2.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,0xBAA0xB;;;;;;;;;;;;;;;;MCetyB,aAAa;;;;;;;IAGxB,iBAAiB;QACf,KAAK,CAAC,kBAAkB,EAAE,mBAAmB,CAAC,CAAC;KAChD;IAED,iBAAiB;QACf,KAAK,CAAC,kBAAkB,EAAE,mBAAmB,CAAC,CAAC;KAChD;IAED,gBAAgB;QACd,KAAK,CAAC,kBAAkB,EAAE,kBAAkB,CAAC,CAAC;KAC/C;IAED,oBAAoB;QAClB,KAAK,CAAC,kBAAkB,EAAE,sBAAsB,CAAC,CAAC;KACnD;IAOD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,4DAAK,KAAK,EAAC,yBAAyB,IAClC,6DAAM,IAAI,EAAC,cAAc,GAAQ,EACjC,6DAAM,IAAI,EAAC,iBAAiB,GAAQ,CAChC,EACN,4DAAK,KAAK,EAAC,0BAA0B,IACnC,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACD,EACP;KACH;;;;AAdD;IALC,iBAAiB,CAAmG;QACnH,IAAI,EAAE,iBAAiB;QACvB,YAAY,EAAE,EAAE;QAChB,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;2CAeD;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/scheduler-editor/nylas-form-card/nylas-form-card.scss?tag=nylas-form-card&encapsulation=shadow","src/components/scheduler-editor/nylas-form-card/nylas-form-card.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  @include default-css-variables;\n}\n\n.nylas-form-card {\n  width: 100%;\n  border-radius: 8px;\n  border: 1px solid var(--nylas-base-200);\n}\n.nylas-form-card__header {\n  padding: 1rem;\n  border-bottom: 1px solid var(--nylas-base-200);\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\n/**\n * The `nylas-form-card` component is a card that can be used to display a form. It is a simple wrapper around a card with a header and content area.\n */\n@Component({\n  tag: 'nylas-form-card',\n  styleUrl: 'nylas-form-card.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasFormCard {\n  @AttachInternals() internals!: ElementInternals;\n\n  connectedCallback() {\n    debug('nylas-event-card', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-event-card', 'componentWillLoad');\n  }\n\n  componentDidLoad() {\n    debug('nylas-event-card', 'componentDidLoad');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-event-card', 'disconnectedCallback');\n  }\n\n  @RegisterComponent<NylasFormCard, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-form-card',\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <div class=\"nylas-form-card\">\n          <div class=\"nylas-form-card__header\">\n            <slot name=\"header-title\"></slot>\n            <slot name=\"header-subtitle\"></slot>\n          </div>\n          <div class=\"nylas-form-card__content\">\n            <slot name=\"content\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nylas-limit-future-bookings.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface NylasLimitFutureBookings extends Components.NylasLimitFutureBookings, HTMLElement {}
+export const NylasLimitFutureBookings: {
+    prototype: NylasLimitFutureBookings;
+    new (): NylasLimitFutureBookings;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/nylas-limit-future-bookings.js

@@ -0,0 +1,8 @@
+import { N as NylasLimitFutureBookings$1, d as defineCustomElement$1 } from './nylas-limit-future-bookings2.js';
+
+const NylasLimitFutureBookings = NylasLimitFutureBookings$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { NylasLimitFutureBookings, defineCustomElement };
+
+//# sourceMappingURL=nylas-limit-future-bookings.js.map

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

@@ -0,0 +1 @@
+{"file":"nylas-limit-future-bookings.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/nylas-limit-future-bookings2.js

@@ -0,0 +1,171 @@
+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 { d as defineCustomElement$6 } from './chevron.js';
+import { d as defineCustomElement$5 } from './info.js';
+import { d as defineCustomElement$4 } from './search.js';
+import { d as defineCustomElement$3 } from './select-dropdown2.js';
+import { d as defineCustomElement$2 } from './time-period-selector2.js';
+import { d as defineCustomElement$1 } from './toolitp-component.js';
+
+const nylasLimitFutureBookingsCss = ":host{--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif}.nylas-limit-future-bookings{display:flex;justify-content:space-between;font-family:var(--nylas-font-family)}.nylas-limit-future-bookings label{display:flex;align-items:center;color:var(--nylas-base-800);font-size:14px;font-style:normal;font-weight:400;line-height:150%;}.nylas-limit-future-bookings label span.label-icon{margin-left:4px}.nylas-limit-future-bookings label span.label-icon tooltip-component{display:flex}";
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (undefined && undefined.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+        return Reflect.metadata(k, v);
+};
+const NylasLimitFutureBookings = proxyCustomElement(class NylasLimitFutureBookings extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.valueChanged = createEvent(this, "valueChanged", 7);
+        this.internals = this.attachInternals();
+        this.availableDaysInFuture = undefined;
+        this.name = 'limit-future-bookings';
+        this.selectedNumber = 1;
+        this.selectedPeriod = 'day';
+    }
+    elementNameChangedHandler(newValue) {
+        debug('nylas-limit-future-bookings', 'elementNameChangedHandler', newValue);
+        this.host.setAttribute('name', newValue);
+    }
+    availableDaysInFutureChanged(newValue) {
+        const { number, period } = this.calculateNumberAndPeriodFromDays(newValue);
+        this.selectedNumber = number;
+        this.selectedPeriod = period;
+    }
+    connectedCallback() {
+        debug('nylas-limit-future-bookings', 'connectedCallback');
+    }
+    componentWillLoad() {
+        debug('nylas-limit-future-bookings', 'componentWillLoad');
+        this.host.setAttribute('name', this.name);
+    }
+    componentDidLoad() {
+        debug('nylas-limit-future-bookings', 'componentDidLoad');
+        this.availableDaysInFutureChanged(this.availableDaysInFuture ?? 1);
+        if (typeof this.internals.setFormValue !== 'function') {
+            return;
+        }
+        this.internals.setFormValue(this.availableDaysInFuture?.toString() ?? '1', this.name);
+    }
+    disconnectedCallback() {
+        debug('nylas-limit-future-bookings', 'disconnectedCallback');
+    }
+    timePeriodChangedHandler(event) {
+        const { number, period } = event.detail;
+        let availableDaysInFuture;
+        if (period === 'day') {
+            availableDaysInFuture = number;
+        }
+        else if (period === 'week') {
+            availableDaysInFuture = number * 7;
+        }
+        else {
+            availableDaysInFuture = number * 30;
+        }
+        this.valueChanged.emit({ value: availableDaysInFuture, name: this.name });
+        if (typeof this.internals.setFormValue !== 'function') {
+            return;
+        }
+        this.internals.setFormValue(availableDaysInFuture.toString(), this.name);
+    }
+    calculateNumberAndPeriodFromDays(days) {
+        if (days >= 30 && days % 30 === 0) {
+            return { number: days / 30, period: 'month' };
+        }
+        else if (days >= 7 && days % 7 === 0) {
+            return { number: days / 7, period: 'week' };
+        }
+        else {
+            return { number: days, period: 'day' };
+        }
+    }
+    render() {
+        return (h(Host, { key: '8057320077aad1ea65297b4cac79fe11f69ab161' }, h("div", { key: '991d810bee6817a1ec26482807fece9d884b7844', class: "nylas-limit-future-bookings", part: "nlfb" }, h("label", { key: 'caf0946d5a7cb202dc02cd596a7721e52278cb55' }, "Limit future bookings", h("span", { key: 'fff09830bc407f7ce1fecf7e6809f2a030ce9a3e', class: "label-icon" }, h("tooltip-component", { key: '8c9cd31ae211d1d3a7f017032d7c1abb3f1c7df6' }, h("info-icon", { key: '43f8b14a4b28effd21e9b5a87b20f63b6bf0061d', slot: "tooltip-icon" }), h("span", { key: 'bdfebd15750111829926da4dc0820f562c4fd9aa', slot: "tooltip-content" }, "Set a limit on how far in the future bookings can be made.")))), h("time-period-selector", { key: 'de949c9c3aa9234102159bdec61efc061ac49408', 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 formAssociated() { return true; }
+    get host() { return this; }
+    static get watchers() { return {
+        "name": ["elementNameChangedHandler"],
+        "availableDaysInFuture": ["availableDaysInFutureChanged"]
+    }; }
+    static get style() { return nylasLimitFutureBookingsCss; }
+}, [65, "nylas-limit-future-bookings", {
+        "availableDaysInFuture": [2, "available-days-in-future"],
+        "name": [1],
+        "selectedNumber": [32],
+        "selectedPeriod": [32]
+    }, [[0, "timePeriodChanged", "timePeriodChangedHandler"]], {
+        "name": ["elementNameChangedHandler"],
+        "availableDaysInFuture": ["availableDaysInFutureChanged"]
+    }]);
+__decorate([
+    RegisterComponent({
+        name: 'nylas-limit-future-bookings',
+        eventToProps: {},
+        fireRegisterEvent: true,
+    }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], NylasLimitFutureBookings.prototype, "render", null);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nylas-limit-future-bookings", "chevron-icon", "info-icon", "search-icon", "select-dropdown", "time-period-selector", "tooltip-component"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nylas-limit-future-bookings":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NylasLimitFutureBookings);
+            }
+            break;
+        case "chevron-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "info-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "search-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "select-dropdown":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "time-period-selector":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "tooltip-component":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement(NylasLimitFutureBookings);
+
+export { NylasLimitFutureBookings as N, defineCustomElement as d };
+
+//# sourceMappingURL=nylas-limit-future-bookings2.js.map

package/dist/components/nylas-limit-future-bookings2.js.map

@@ -0,0 +1 @@
+{"file":"nylas-limit-future-bookings2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-limit-future-bookings/nylas-limit-future-bookings.scss?tag=nylas-limit-future-bookings&encapsulation=shadow","src/components/scheduler-editor/nylas-limit-future-bookings/nylas-limit-future-bookings.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  @include default-css-variables;\n}\n\n.nylas-limit-future-bookings {\n  display: flex;\n  justify-content: space-between;\n  font-family: var(--nylas-font-family);\n  label {\n    display: flex;\n    align-items: center;\n    color: var(--nylas-base-800);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 150%; /* 21px */\n    span.label-icon {\n      margin-left: 4px;\n      tooltip-component {\n        display: flex;\n      }\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, 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}

package/dist/components/nylas-list-folders.js

@@ -83,7 +83,7 @@ const NylasListFolders$1 = proxyCustomElement(class NylasListFolders extends HTM
         }
     }
     render() {
-        return (h(Host, { key: '623ace703b229e8db585ae1beb784e439335c59b' }, h("div", { key: '88888e9a75ca8357a11148b126c4e287d1240bb2', class: "folders" }, this.defaultFolders?.map(folder => (h("sp-button", { onClick: () => this.folderSelectedHandler(folder), class: {
+        return (h(Host, { key: '216a4856e0e4484bd21a13c8b52f60056838e355' }, h("div", { key: '3dfa827f612e13c3abec08c7e50a3f52ece2f677', class: "folders" }, this.defaultFolders?.map(folder => (h("sp-button", { onClick: () => this.folderSelectedHandler(folder), class: {
                 folder: true,
                 selected: formatFolderName(folder.name ?? 'inbox').toLowerCase() === this.selectedFolder?.toLowerCase(),
             } }, h("div", { slot: "icon", class: "icon" }, this.getFolderIcon(folder)), this.formatFolderName(folder))))), this.otherFolders && (h(Fragment, null, h("hr", null), h("div", { class: "folders" }, this.otherFolders?.map(folder => (h("sp-button", { onClick: () => this.folderSelectedHandler(folder), class: {

package/dist/components/nylas-list-threads.js

@@ -50,7 +50,7 @@ const NylasListThreads$1 = proxyCustomElement(class NylasListThreads extends HTM
         debug(`[nylas-list-threads] Component did load`, { isAuthenticated: this.isAuthenticated });
     }
     render() {
-        return (h(Host, { key: 'e69436f25ffaffa05fd3c4a57de1745ad9e75107' }, h("div", { key: 'd9b0daf46aff4d2ef699ddf2c71fb8f83c89b8b3', class: 'list-thread', part: "list-thread" }, this.state === 'loading' && new Array(10).fill(0).map((_, i) => h("div", { class: "thread loading", style: { animationDelay: `${i * 20}ms` } })), this.state === 'ready' &&
+        return (h(Host, { key: '4cd99954b325347a5bcf2fdda5440224f188ca4d' }, h("div", { key: '876dd6bf8cd63ce8c8ca9894559b32b3c5885597', class: 'list-thread', part: "list-thread" }, this.state === 'loading' && new Array(10).fill(0).map((_, i) => h("div", { class: "thread loading", style: { animationDelay: `${i * 20}ms` } })), this.state === 'ready' &&
             this.threads.map(thread => (h("button", { key: thread?.id, class: {
                     'thread': true,
                     'unread': thread?.unread === true,

package/dist/components/nylas-locale-switch2.js

@@ -7,7 +7,7 @@ import { d as defineCustomElement$3 } from './search.js';
 import { d as defineCustomElement$2 } from './select-dropdown2.js';
 import { d as defineCustomElement$1 } from './translate.js';
 
-const nylasLocaleSwitchCss = ":host{display:block;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif}.nylas-locale-switch{display:flex;flex-direction:row;justify-content:space-between;align-items:center;height:68px;border-left:none;border-right:none;color:var(--nylas-base-50);font-size:min(max(14px, 3vw), 16px);font-weight:600;cursor:pointer;transition:all 0.2s ease-in-out;font-family:inherit}.select-wrapper{display:flex;align-items:center;gap:0.5rem}select{border:none;background:transparent;cursor:pointer;outline:none;background-color:transparent;margin:0 0 1px;padding:4px;vertical-align:middle}select#timezone{width:140px}select#language{width:80px}span.timezone-label{display:flex;width:-webkit-fill-available;justify-content:space-between}";
+const nylasLocaleSwitchCss = ":host{display:block;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif}.nylas-locale-switch{display:flex;flex-direction:row;justify-content:space-between;align-items:center;height:68px;border-left:none;border-right:none;color:var(--nylas-base-50);font-size:14px;font-weight:600;cursor:pointer;transition:all 0.2s ease-in-out;font-family:inherit}@media screen and (max-width: 768px){.nylas-locale-switch{font-size:16px}}.select-wrapper{display:flex;align-items:center;gap:0.5rem}select{border:none;background:transparent;cursor:pointer;outline:none;background-color:transparent;margin:0 0 1px;padding:4px;vertical-align:middle}select#timezone{width:140px}select#language{width:80px}span.timezone-label{display:flex;width:-webkit-fill-available;justify-content:space-between}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;

package/dist/components/nylas-locale-switch2.js.map

@@ -1 +1 @@
-{"file":"nylas-locale-switch2.js","mappings":"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","names":[],"sources":["src/components/scheduler/nylas-locale-switch/nylas-locale-switch.scss?tag=nylas-locale-switch&encapsulation=shadow","src/components/scheduler/nylas-locale-switch/nylas-locale-switch.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  @include default-css-variables;\n}\n\n.nylas-locale-switch {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  height: 68px;\n  border-left: none;\n  border-right: none;\n  color: var(--nylas-base-50);\n  font-size: min(max(14px, 3vw), 16px);\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.2s ease-in-out;\n  font-family: inherit;\n}\n\n.select-wrapper {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\nselect {\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  outline: none;\n  background-color: transparent;\n  margin: 0 0 1px;\n  padding: 4px;\n  vertical-align: middle;\n  &#timezone {\n    width: 140px;\n  }\n  &#language {\n    width: 80px;\n  }\n}\n\nspan.timezone-label {\n  display: flex;\n  width: -webkit-fill-available;\n  justify-content: space-between;\n}\n","import { LANGUAGE_MAP, TIMEZONE_MAP, getTimezoneOffset } from '@/common/constants';\nimport { RegisterComponent } from '@/common/register-component';\nimport { Component, Event, EventEmitter, Host, Listen, Prop, h } from '@stencil/core';\nimport { NylasSchedulerConnector } from '../../../components';\nimport { NylasScheduling } from '../nylas-scheduler/nylas-scheduling';\n\n/**\n * The `nylas-locale-switch` component is a UI component that allows users to select a timezone and language.\n */\n@Component({\n  tag: 'nylas-locale-switch',\n  styleUrl: 'nylas-locale-switch.scss',\n  shadow: true,\n})\nexport class NylasLocaleSwitch {\n  /**\n   * The selected timezone.\n   */\n  @Prop({ mutable: true }) selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n  /**\n   * The selected language.\n   */\n  @Prop({ mutable: true }) selectedLanguage: string = navigator.language;\n\n  /**\n   * This event is fired when the timezone is changed.\n   */\n  @Event() timezoneChanged!: EventEmitter<string>;\n\n  /**\n   * This event is fired when the language is changed.\n   */\n  @Event() languageChanged!: EventEmitter<string>;\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  componentWillLoad() {}\n\n  /**\n   * Change the timezone.\n   * @param timezone The timezone to select.\n   */\n  private changeTimezone(timezone: string) {\n    this.selectedTimezone = timezone;\n    this.timezoneChanged.emit(timezone);\n  }\n\n  /**\n   * Change the language.\n   * @param language The language to select.\n   */\n  private changeLanguage(language: string) {\n    this.selectedLanguage = language;\n    this.languageChanged.emit(language);\n  }\n\n  @Listen('selectedOptionChanged')\n  selectedOptionChangedHandler(\n    event: CustomEvent<{\n      value: string;\n      name: string;\n    }>,\n  ) {\n    const { name, value } = event.detail;\n    if (name === 'timezone') {\n      this.changeTimezone(value);\n    } else if (name === 'language') {\n      this.changeLanguage(value);\n    }\n  }\n\n  getTimezoneLabelHTML(timezone: string) {\n    const offset = getTimezoneOffset(timezone);\n    return (\n      <span\n        class=\"timezone-label\"\n        style={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          width: '-webkit-fill-available',\n        }}\n      >\n        {TIMEZONE_MAP[timezone]}{' '}\n        <span\n          class=\"timezone-offset\"\n          style={{\n            fontSize: '14px',\n            fontWeight: '400',\n            color: 'var(--nylas-base-500)',\n          }}\n        >\n          {offset}\n        </span>\n      </span>\n    );\n  }\n\n  @RegisterComponent<NylasLocaleSwitch, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-locale-switch',\n    stateToProps: new Map([\n      ['scheduler.selectedLanguage', 'selectedLanguage'],\n      ['scheduler.selectedTimezone', 'selectedTimezone'],\n    ]),\n    eventToProps: {\n      timezoneChanged: async (event: CustomEvent<string>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        nylasSchedulerConnector.scheduler.selectTimezone(event.detail);\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    const timezoneOptions = Object.keys(TIMEZONE_MAP).map(key => ({\n      labelHTML: this.getTimezoneLabelHTML(key),\n      label: TIMEZONE_MAP[key],\n      value: key,\n    }));\n    const languageOptions = Object.keys(LANGUAGE_MAP).map(key => ({\n      label: LANGUAGE_MAP[key],\n      value: key,\n    }));\n\n    return (\n      <Host>\n        <div class=\"nylas-locale-switch\">\n          <div\n            class={{\n              'select-wrapper': true,\n              'timezone': true,\n            }}\n          >\n            <select-dropdown name=\"timezone\" options={timezoneOptions} defaultSelectedOption={timezoneOptions.find(op => op.value == this.selectedTimezone)}>\n              <span slot=\"select-icon\">\n                <globe-icon width=\"20\" height=\"20\" />\n              </span>\n            </select-dropdown>\n          </div>\n          <div\n            class={{\n              'select-wrapper': true,\n              'language': true,\n            }}\n          >\n            <select-dropdown name=\"language\" options={languageOptions} defaultSelectedOption={languageOptions.find(lang => lang.value == this.selectedLanguage)}>\n              <span slot=\"select-icon\">\n                <translate-icon width=\"20\" height=\"20\" />\n              </span>\n            </select-dropdown>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nylas-locale-switch2.js","mappings":"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","names":[],"sources":["src/components/scheduler/nylas-locale-switch/nylas-locale-switch.scss?tag=nylas-locale-switch&encapsulation=shadow","src/components/scheduler/nylas-locale-switch/nylas-locale-switch.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  @include default-css-variables;\n}\n\n.nylas-locale-switch {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  height: 68px;\n  border-left: none;\n  border-right: none;\n  color: var(--nylas-base-50);\n  font-size: 14px;\n  @media #{$mobile} {\n    font-size: 16px;\n  }\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.2s ease-in-out;\n  font-family: inherit;\n}\n\n.select-wrapper {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\nselect {\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  outline: none;\n  background-color: transparent;\n  margin: 0 0 1px;\n  padding: 4px;\n  vertical-align: middle;\n  &#timezone {\n    width: 140px;\n  }\n  &#language {\n    width: 80px;\n  }\n}\n\nspan.timezone-label {\n  display: flex;\n  width: -webkit-fill-available;\n  justify-content: space-between;\n}\n","import { LANGUAGE_MAP, TIMEZONE_MAP, getTimezoneOffset } from '@/common/constants';\nimport { RegisterComponent } from '@/common/register-component';\nimport { Component, Event, EventEmitter, Host, Listen, Prop, h } from '@stencil/core';\nimport { NylasSchedulerConnector } from '../../../components';\nimport { NylasScheduling } from '../nylas-scheduler/nylas-scheduling';\n\n/**\n * The `nylas-locale-switch` component is a UI component that allows users to select a timezone and language.\n */\n@Component({\n  tag: 'nylas-locale-switch',\n  styleUrl: 'nylas-locale-switch.scss',\n  shadow: true,\n})\nexport class NylasLocaleSwitch {\n  /**\n   * The selected timezone.\n   */\n  @Prop({ mutable: true }) selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n  /**\n   * The selected language.\n   */\n  @Prop({ mutable: true }) selectedLanguage: string = navigator.language;\n\n  /**\n   * This event is fired when the timezone is changed.\n   */\n  @Event() timezoneChanged!: EventEmitter<string>;\n\n  /**\n   * This event is fired when the language is changed.\n   */\n  @Event() languageChanged!: EventEmitter<string>;\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  componentWillLoad() {}\n\n  /**\n   * Change the timezone.\n   * @param timezone The timezone to select.\n   */\n  private changeTimezone(timezone: string) {\n    this.selectedTimezone = timezone;\n    this.timezoneChanged.emit(timezone);\n  }\n\n  /**\n   * Change the language.\n   * @param language The language to select.\n   */\n  private changeLanguage(language: string) {\n    this.selectedLanguage = language;\n    this.languageChanged.emit(language);\n  }\n\n  @Listen('selectedOptionChanged')\n  selectedOptionChangedHandler(\n    event: CustomEvent<{\n      value: string;\n      name: string;\n    }>,\n  ) {\n    const { name, value } = event.detail;\n    if (name === 'timezone') {\n      this.changeTimezone(value);\n    } else if (name === 'language') {\n      this.changeLanguage(value);\n    }\n  }\n\n  getTimezoneLabelHTML(timezone: string) {\n    const offset = getTimezoneOffset(timezone);\n    return (\n      <span\n        class=\"timezone-label\"\n        style={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          width: '-webkit-fill-available',\n        }}\n      >\n        {TIMEZONE_MAP[timezone]}{' '}\n        <span\n          class=\"timezone-offset\"\n          style={{\n            fontSize: '14px',\n            fontWeight: '400',\n            color: 'var(--nylas-base-500)',\n          }}\n        >\n          {offset}\n        </span>\n      </span>\n    );\n  }\n\n  @RegisterComponent<NylasLocaleSwitch, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-locale-switch',\n    stateToProps: new Map([\n      ['scheduler.selectedLanguage', 'selectedLanguage'],\n      ['scheduler.selectedTimezone', 'selectedTimezone'],\n    ]),\n    eventToProps: {\n      timezoneChanged: async (event: CustomEvent<string>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        nylasSchedulerConnector.scheduler.selectTimezone(event.detail);\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    const timezoneOptions = Object.keys(TIMEZONE_MAP).map(key => ({\n      labelHTML: this.getTimezoneLabelHTML(key),\n      label: TIMEZONE_MAP[key],\n      value: key,\n    }));\n    const languageOptions = Object.keys(LANGUAGE_MAP).map(key => ({\n      label: LANGUAGE_MAP[key],\n      value: key,\n    }));\n\n    return (\n      <Host>\n        <div class=\"nylas-locale-switch\">\n          <div\n            class={{\n              'select-wrapper': true,\n              'timezone': true,\n            }}\n          >\n            <select-dropdown name=\"timezone\" options={timezoneOptions} defaultSelectedOption={timezoneOptions.find(op => op.value == this.selectedTimezone)}>\n              <span slot=\"select-icon\">\n                <globe-icon width=\"20\" height=\"20\" />\n              </span>\n            </select-dropdown>\n          </div>\n          <div\n            class={{\n              'select-wrapper': true,\n              'language': true,\n            }}\n          >\n            <select-dropdown name=\"language\" options={languageOptions} defaultSelectedOption={languageOptions.find(lang => lang.value == this.selectedLanguage)}>\n              <span slot=\"select-icon\">\n                <translate-icon width=\"20\" height=\"20\" />\n              </span>\n            </select-dropdown>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nylas-location-component2.js

@@ -85,10 +85,10 @@ const NylasLocationComponent = proxyCustomElement(class NylasLocationComponent e
             { value: 'custom', label: 'Custom location' },
         ];
         const icons = {
-            none: h("location-off-icon", { key: '021fd97ea9f51cc9ef6edab397e12181f24bddb2' }),
-            custom: h("location-icon", { key: '24a170f7a38501da4f46eef8da5231f9002347b1' }),
+            none: h("location-off-icon", { key: 'b6ed0f7da911d13fe204658d1dbfbc29d569a99a' }),
+            custom: h("location-icon", { key: '08a5c193876813578037ee6003ab03fd947fb87d' }),
         };
-        return (h(Host, { key: '8b520fcbc5f57bf6ab51d6cb83fd58eb452f702a' }, h("div", { key: '6e7b240c7b5603cea809a8e83f003ffc48db183b', class: "nylas-event-location" }, h("label", { key: 'e6979aeff1965f62540bc274818cbb7b46f454d6', htmlFor: "location" }, "Location type", h("span", { key: '0334a62e0b8d15d07f35722561743d9654364176', class: "label-icon" }, h("tooltip-component", { key: 'a1267dbc795c9abc4faa08ee4bd28d5fbb0dcc8f' }, h("info-icon", { key: 'ad03af910d69f86b5459e8e3d9129a6532b67b27', slot: "tooltip-icon" }), h("span", { key: '8bec251481f72beea08ed8649b628a6d9604ef39', slot: "tooltip-content" }, "Choose how you\u2019ll meet with the participants at the scheduled time. Pick from available conferencing options or add a custom location.")))), h("div", { key: '4cddd535ae80ee17f25566fff3c79cb92fe5ed73', class: "location-input" }, h("select-dropdown", { key: 'efe580f62aa4ea955cefff02a9e133a1eb66057d', withSearch: false, name: "location", options: locationOptions, defaultSelectedOption: locationOptions.find(i => i.value == this.selectedLocationOption) }, h("span", { key: '58faabe958e2faf6cc518d3a02ff7dee5586f48d', slot: "select-icon" }, icons[this.selectedLocationOption])), this.selectedLocationOption === 'custom' && (h("input", { type: "text", id: "location", name: "location", maxlength: "1024", value: this.location, onInput: e => this.handleChange(e) }))))));
+        return (h(Host, { key: 'e512133eb2a9213bfacc2edad0581b7a6ad41bbc' }, h("div", { key: '1f0e59707c41f7836805ff26efbd5cc119dfef11', class: "nylas-event-location", part: "nel" }, h("label", { key: '60e264aa383ae29342678ecf23b12631fff1bc98', htmlFor: "location" }, "Location type", h("span", { key: '64c34dbeafa4b5c033be3d1facede6e737b915e1', class: "label-icon" }, h("tooltip-component", { key: '0c569694141c72418e997a85328127968d05eac1' }, h("info-icon", { key: '411fe82e0b6296b34aae95459c9da8bc07bd8131', slot: "tooltip-icon" }), h("span", { key: '67b4582af4fe7085c748e842b5fda1a46a454edf', slot: "tooltip-content" }, "Choose how you\u2019ll meet with the participants at the scheduled time. Pick from available conferencing options or add a custom location.")))), h("div", { key: '3f7b59eaae37afcd7abc4af3c608c5e6dc3ebc30', class: "location-input" }, h("select-dropdown", { key: '424550ac2c3fd61e7c59d2e8c98cedfd156d5661', withSearch: false, name: "location", options: locationOptions, defaultSelectedOption: locationOptions.find(i => i.value == this.selectedLocationOption), exportparts: "sd__dropdown: nel__dropdown, sd__dropdown-button: nel__dropdown-button, sd__dropdown-content: nel__dropdown-content" }, h("span", { key: '300fd4134259f97fcf3ba09d3d296c15ca18eec7', slot: "select-icon" }, icons[this.selectedLocationOption])), this.selectedLocationOption === 'custom' && (h("input", { type: "text", part: "nel__location", id: "location", name: "location", maxlength: "1024", value: this.location, onInput: e => this.handleChange(e) }))))));
     }
     static get formAssociated() { return true; }
     get host() { return this; }

package/dist/components/nylas-location-component2.js.map

@@ -1 +1 @@
-{"file":"nylas-location-component2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-location-component/nylas-location-component.scss?tag=nylas-location-component&encapsulation=shadow","src/components/scheduler-editor/nylas-location-component/nylas-location-component.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  @include default-css-variables;\n}\n\n.nylas-event-location {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  font-family: var(--nylas-font-family);\n\n  label {\n    display: flex;\n    align-items: center;\n    color: var(--nylas-base-nylas-base-800);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 150%; /* 21px */\n    span.label-icon {\n      margin-left: 4px;\n      tooltip-component {\n        display: flex;\n      }\n    }\n  }\n\n  span[slot='select-icon'] {\n    border-right: 1px solid var(--nylas-base-200);\n    padding: 16px 0.75rem 16px 0.5rem;\n    border-radius: var(--nylas-border-radius-2x);\n    border-bottom-right-radius: 0;\n    border-top-right-radius: 0;\n    height: 20px;\n  }\n  div.location-input {\n    display: grid;\n    grid-template-columns: auto 1fr;\n    width: 100%;\n    gap: 0.5rem;\n    input {\n      border: 1px solid var(--nylas-base-200);\n      border-radius: var(--nylas-border-radius-2x);\n      padding: 12px 16px;\n      font-family: var(--nylas-font-family);\n      font-size: 16px;\n      line-height: 24px;\n    }\n  }\n  select-dropdown {\n    width: 208px;\n    @media #{$mobile} {\n      width: 100%;\n    }\n  }\n  select-dropdown::part(sd_dropdown) {\n    width: 100%;\n  }\n  select-dropdown::part(sd_dropdown-content) {\n    left: calc(35px + 0.5rem);\n  }\n  select-dropdown::part(sd_dropdown-button) {\n    display: flex;\n    justify-content: space-between;\n    width: 100%;\n    border: 1px solid var(--nylas-base-200);\n    padding: 0 0.5rem;\n  }\n  select-dropdown::part(sd_dropdown-button-selected-label) {\n    display: inline-flex;\n    align-self: center;\n    padding: 14px 0;\n    font-family: var(--nylas-font-family);\n    font-size: 16px;\n    line-height: 24px;\n  }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, 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-location-component` component is a form input for the description of an event.\n */\n@Component({\n  tag: 'nylas-location-component',\n  styleUrl: 'nylas-location-component.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasLocationComponent {\n  @Prop() eventLocation?: string;\n  @State() location: string = this.eventLocation ?? '';\n  @State() selectedLocationOption: string = this.eventLocation ? 'custom' : 'none';\n  @AttachInternals() internals!: ElementInternals;\n  @Element() host!: HTMLElement;\n  @Prop() name: string = 'location';\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-location-component', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n  @Watch('eventLocation')\n  eventLocationChangedHandler(newValue: string, oldValue: string) {\n    debug('nylas-location-component', 'eventLocationChangedHandler', newValue);\n    if (newValue === oldValue) {\n      return;\n    }\n    this.selectedLocationOption = newValue ? 'custom' : 'none';\n  }\n\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n  }>;\n\n  connectedCallback() {\n    debug('nylas-location-component', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-location-component', 'componentWillLoad');\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-location-component', 'componentDidLoad');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-location-component', 'disconnectedCallback');\n  }\n\n  @Listen('selectedOptionChanged')\n  selectedOptionChangedHandler(event: CustomEvent<{ value: string }>) {\n    this.selectedLocationOption = event.detail.value;\n    if (this.selectedLocationOption === 'none') {\n      this.location = '';\n      this.setFormValue('', 'location');\n      this.valueChanged.emit({ value: '', name: this.name });\n    }\n  }\n\n  setFormValue(value: string, name: string) {\n    if (typeof this.internals.setFormValue === 'function') {\n      this.internals.setFormValue(value, name);\n    }\n  }\n\n  handleChange(event) {\n    this.location = event.target.value;\n    this.setFormValue(event.target.value, 'location');\n    this.valueChanged.emit({ value: event.target.value, name: this.name });\n  }\n\n  @RegisterComponent<NylasLocationComponent, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-location-component',\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    const locationOptions = [\n      { value: 'none', label: 'None' },\n      { value: 'custom', label: 'Custom location' },\n    ];\n    const icons = {\n      none: <location-off-icon />,\n      custom: <location-icon />,\n    };\n\n    return (\n      <Host>\n        <div class=\"nylas-event-location\">\n          <label htmlFor=\"location\">\n            Location type\n            <span class=\"label-icon\">\n              <tooltip-component>\n                <info-icon slot=\"tooltip-icon\" />\n                <span slot=\"tooltip-content\">\n                  Choose how you’ll meet with the participants at the scheduled time. Pick from available conferencing options or add a custom location.\n                </span>\n              </tooltip-component>\n            </span>\n          </label>\n          <div class=\"location-input\">\n            <select-dropdown withSearch={false} name=\"location\" options={locationOptions} defaultSelectedOption={locationOptions.find(i => i.value == this.selectedLocationOption)}>\n              <span slot=\"select-icon\">{icons[this.selectedLocationOption]}</span>\n            </select-dropdown>\n            {this.selectedLocationOption === 'custom' && (\n              <input type=\"text\" id=\"location\" name=\"location\" maxlength=\"1024\" value={this.location} onInput={e => this.handleChange(e)} />\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nylas-location-component2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-location-component/nylas-location-component.scss?tag=nylas-location-component&encapsulation=shadow","src/components/scheduler-editor/nylas-location-component/nylas-location-component.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  @include default-css-variables;\n}\n\n.nylas-event-location {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  font-family: var(--nylas-font-family);\n\n  label {\n    display: flex;\n    align-items: center;\n    color: var(--nylas-base-nylas-base-800);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 150%; /* 21px */\n    span.label-icon {\n      margin-left: 4px;\n      tooltip-component {\n        display: flex;\n      }\n    }\n  }\n\n  span[slot='select-icon'] {\n    border-right: 1px solid var(--nylas-base-200);\n    padding: 16px 0.75rem 16px 0.5rem;\n    border-radius: var(--nylas-border-radius-2x);\n    border-bottom-right-radius: 0;\n    border-top-right-radius: 0;\n    height: 20px;\n  }\n  div.location-input {\n    display: grid;\n    grid-template-columns: auto 1fr;\n    width: 100%;\n    gap: 0.5rem;\n    input {\n      border: 1px solid var(--nylas-base-200);\n      border-radius: var(--nylas-border-radius-2x);\n      padding: 12px 16px;\n      font-family: var(--nylas-font-family);\n      font-size: 16px;\n      line-height: 24px;\n    }\n  }\n  select-dropdown {\n    width: 208px;\n    @media #{$mobile} {\n      width: 100%;\n    }\n  }\n  select-dropdown::part(sd_dropdown) {\n    width: 100%;\n  }\n  select-dropdown::part(sd_dropdown-content) {\n    left: calc(35px + 0.5rem);\n  }\n  select-dropdown::part(sd_dropdown-button) {\n    display: flex;\n    justify-content: space-between;\n    width: 100%;\n    border: 1px solid var(--nylas-base-200);\n    padding: 0 0.5rem;\n  }\n  select-dropdown::part(sd_dropdown-button-selected-label) {\n    display: inline-flex;\n    align-self: center;\n    padding: 14px 0;\n    font-family: var(--nylas-font-family);\n    font-size: 16px;\n    line-height: 24px;\n  }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, 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-location-component` component is a form input for the description of an event.\n * @part nel - The event location container\n * @part nel__location - The event location input\n * @part nel__dropdown - The dropdown container\n * @part nel__dropdown-button - The dropdown button\n * @part nel__dropdown-content - The dropdown content\n */\n@Component({\n  tag: 'nylas-location-component',\n  styleUrl: 'nylas-location-component.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasLocationComponent {\n  @Prop() eventLocation?: string;\n  @State() location: string = this.eventLocation ?? '';\n  @State() selectedLocationOption: string = this.eventLocation ? 'custom' : 'none';\n  @AttachInternals() internals!: ElementInternals;\n  @Element() host!: HTMLElement;\n  @Prop() name: string = 'location';\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-location-component', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n  @Watch('eventLocation')\n  eventLocationChangedHandler(newValue: string, oldValue: string) {\n    debug('nylas-location-component', 'eventLocationChangedHandler', newValue);\n    if (newValue === oldValue) {\n      return;\n    }\n    this.selectedLocationOption = newValue ? 'custom' : 'none';\n  }\n\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n  }>;\n\n  connectedCallback() {\n    debug('nylas-location-component', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-location-component', 'componentWillLoad');\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-location-component', 'componentDidLoad');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-location-component', 'disconnectedCallback');\n  }\n\n  @Listen('selectedOptionChanged')\n  selectedOptionChangedHandler(event: CustomEvent<{ value: string }>) {\n    this.selectedLocationOption = event.detail.value;\n    if (this.selectedLocationOption === 'none') {\n      this.location = '';\n      this.setFormValue('', 'location');\n      this.valueChanged.emit({ value: '', name: this.name });\n    }\n  }\n\n  setFormValue(value: string, name: string) {\n    if (typeof this.internals.setFormValue === 'function') {\n      this.internals.setFormValue(value, name);\n    }\n  }\n\n  handleChange(event) {\n    this.location = event.target.value;\n    this.setFormValue(event.target.value, 'location');\n    this.valueChanged.emit({ value: event.target.value, name: this.name });\n  }\n\n  @RegisterComponent<NylasLocationComponent, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-location-component',\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    const locationOptions = [\n      { value: 'none', label: 'None' },\n      { value: 'custom', label: 'Custom location' },\n    ];\n    const icons = {\n      none: <location-off-icon />,\n      custom: <location-icon />,\n    };\n\n    return (\n      <Host>\n        <div class=\"nylas-event-location\" part=\"nel\">\n          <label htmlFor=\"location\">\n            Location type\n            <span class=\"label-icon\">\n              <tooltip-component>\n                <info-icon slot=\"tooltip-icon\" />\n                <span slot=\"tooltip-content\">\n                  Choose how you’ll meet with the participants at the scheduled time. Pick from available conferencing options or add a custom location.\n                </span>\n              </tooltip-component>\n            </span>\n          </label>\n          <div class=\"location-input\">\n            <select-dropdown\n              withSearch={false}\n              name=\"location\"\n              options={locationOptions}\n              defaultSelectedOption={locationOptions.find(i => i.value == this.selectedLocationOption)}\n              exportparts=\"sd__dropdown: nel__dropdown, sd__dropdown-button: nel__dropdown-button, sd__dropdown-content: nel__dropdown-content\"\n            >\n              <span slot=\"select-icon\">{icons[this.selectedLocationOption]}</span>\n            </select-dropdown>\n            {this.selectedLocationOption === 'custom' && (\n              <input type=\"text\" part=\"nel__location\" id=\"location\" name=\"location\" maxlength=\"1024\" value={this.location} onInput={e => this.handleChange(e)} />\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nylas-login.js

@@ -76,7 +76,7 @@ const NylasLogin$1 = proxyCustomElement(class NylasLogin extends HTMLElement {
     }
     render() {
         const splitProviders = this.providers?.split(',') || [];
-        return (h(Host, { key: '2dc6992f3244d7af9e06b5a1ea8c2c83bed2dbb4' }, this.loginMethod === 'redirect' && (h("div", { class: "redirect-container" }, !this.isAuthenticated && (h("sp-button", { part: "button", onClick: this._handleLoginRedirect }, this.buttonText)))), this.loginMethod === 'emebded' && (h("main", { class: "login-container" }, h("section", { class: "login-box" }, h("header", null, h("img", { src: this.logoUrl, alt: `${this.companyName} logo`, width: '100%', style: {
+        return (h(Host, { key: 'bff99d93c49f3a70e4e8f28ea97082853af37be0' }, this.loginMethod === 'redirect' && (h("div", { class: "redirect-container" }, !this.isAuthenticated && (h("sp-button", { part: "button", onClick: this._handleLoginRedirect }, this.buttonText)))), this.loginMethod === 'emebded' && (h("main", { class: "login-container" }, h("section", { class: "login-box" }, h("header", null, h("img", { src: this.logoUrl, alt: `${this.companyName} logo`, width: '100%', style: {
                 minWidth: this.logoWidth,
             } }), h("h1", null, "Welcome")), h("p", null, "Log in to your account to continue to ", this.companyName), h("div", { class: "login-methods" }, splitProviders.includes('google') && (h("button", { class: "login-google", onClick: this._onGoogleButtonClick }, h("svg", { xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", width: "18", height: "18", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 256 262" }, h("path", { fill: "#4285F4", d: "M255.6 131.6c0-8.2-.8-16.2-2.2-23.9H130v45.3h70.3c-3 16.1-12.4 29.7-26.3 38.9v32.4h42.6c25-23 39.4-56.7 39.4-97.7z" }), h("path", { fill: "#34A853", d: "M130 262c35.3 0 64.9-11.7 86.5-31.7l-42.6-32.4c-11.7 7.9-26.7 12.6-43.9 12.6-33.7 0-62.3-22.7-72.5-53.4H14.5v33.3A130.3 130.3 0 00130 262z" }), h("path", { fill: "#FBBC05", d: "M57.5 158.1a72.7 72.7 0 010-54.2V70.6H14.5a130.4 130.4 0 000 120.8l43-33.3z" }), h("path", { fill: "#EA4335", d: "M130 51.6c19 0 36 6.5 49.4 19.2l37-36C195 13.1 165.2 0 130 0A130.3 130.3 0 0014.5 70.6l43 33.3c10.2-30.7 38.8-53.3 72.5-53.3z" })), "Continue with Google")), splitProviders.includes('microsoft') && (h("button", { class: "login-microsoft", onClick: this._onMicrosoftButtonClick }, h("svg", { xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", width: "18", height: "18", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 448 512" }, h("path", { fill: "#F3F3F3", d: "M0 32v192h192V32H0zm256 0v192h192V32H256zm192 256v192h-192V288h192zM0 224v192h192V224H0z" })), "Continue with Microsoft"))), h("form", { class: "login-form", method: "POST", onSubmit: this._onFormSubmit }, h("label", { htmlFor: "email" }, "Email"), h("input", { type: "email", id: "email", name: "email", required: true, value: this.email }), h("button", { type: "submit" }, "Next")))))));
     }