@nylas/web-elements 0.0.0-test-20250319204140 → 0.0.0-test-20250320184617

package/dist/esm/chevron-icon_3.entry.js

@@ -224,7 +224,7 @@ const SelectDropdown = class {
     }
     render() {
         const buttonText = this.generateButtonText(this.selectedOption, this.dropdownButtonText);
-        return (h("div", { key: '32b6414957374ddbd1c84c971844761accc75a20', class: "dropdown", part: "sd_dropdown" }, h("label", { key: '3739bab113e147e72bb8c75da3dcc4deba01c27e', part: "sd_dropdown_label", class: { error: !!this.error } }, this.label && (h("p", null, h("span", { class: "label" }, this.label), this.required && h("span", { class: "required" }, "*"))), h("button", { key: '2d09705cf6272559ebca0d34b7495854aeb47fb2', part: "sd_dropdown-button", class: { dropbtn: true, open: this.isOpen, error: !!this.error }, onClick: () => this.toggleDropdown(), disabled: this.readOnly, "aria-haspopup": "listbox", title: this.readOnly ? 'read-only field' : buttonText, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-label": this.name, onKeyDown: e => this.handleSelectButtonKeyDown(e) }, h("slot", { key: '54be38a1f79be53ed5570a2d04c8c649c94b1f13', name: "select-icon", "aria-hidden": "true" }), h("span", { key: '4d4f57847d16b53baffdaebfa50be2072e7eb0b7', class: "selected-option", part: "sd_dropdown-button-selected-label" }, buttonText), this.withChevron && (h("span", { class: {
+        return (h("div", { key: '76f953d52f4899ece2ef69efcc79aba9b7989918', class: "dropdown", part: "sd_dropdown" }, h("label", { key: '5d5080ede5628e09dca5823243a20e74399ec460', part: "sd_dropdown_label", class: { error: !!this.error } }, this.label && (h("p", null, h("span", { class: "label" }, this.label), this.required && h("span", { class: "required" }, "*"))), h("button", { key: '0bf99a9fb258e7f2497a0b154b57f9822e202fb8', part: "sd_dropdown-button", class: { dropbtn: true, open: this.isOpen, error: !!this.error }, onClick: () => this.toggleDropdown(), disabled: this.readOnly, "aria-haspopup": "listbox", title: this.readOnly ? 'read-only field' : buttonText, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-label": this.name, onKeyDown: e => this.handleSelectButtonKeyDown(e) }, h("slot", { key: '60a6936c37966ef724eea0382b0bef577f5a807b', name: "select-icon", "aria-hidden": "true" }), h("span", { key: '9917029151048ecb413cb2448fb2405d9228b1c7', class: "selected-option", part: "sd_dropdown-button-selected-label" }, buttonText), this.withChevron && (h("span", { class: {
                 open: this.isOpen,
                 closed: !this.isOpen,
                 chevron: true,

package/dist/esm/chevron-icon_3.entry.js.map

@@ -1 +1 @@
-{"file":"chevron-icon.search-icon.select-dropdown.entry.js","mappings":"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","names":["iconCss"],"sources":["src/common/icons/icon.css?tag=chevron-icon&encapsulation=scoped","src/common/icons/chevron.tsx","src/common/icons/icon.css?tag=search-icon&encapsulation=scoped","src/common/icons/search.tsx","src/components/design-system/select-dropdown/select-dropdown.scss?tag=select-dropdown&encapsulation=shadow","src/components/design-system/select-dropdown/select-dropdown.tsx"],"sourcesContent":[":host {\n  display: flex;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'chevron-icon',\n  styleUrl: 'icon.css',\n  scoped: true,\n})\nexport class ChevronIcon {\n  @Prop() width: string = '24';\n  @Prop() height: string = '24';\n\n  render() {\n    return (\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width={this.width} height={this.height} viewBox=\"0 0 24 24\" fill=\"none\">\n        <path fill=\"currentColor\" d=\"M15.53 4.22a.75.75 0 0 1 0 1.06L8.81 12l6.72 6.72a.75.75 0 1 1-1.06 1.06l-7.25-7.25a.75.75 0 0 1 0-1.06l7.25-7.25a.75.75 0 0 1 1.06 0Z\" />\n      </svg>\n    );\n  }\n}\n",":host {\n  display: flex;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'search-icon',\n  styleUrl: 'icon.css',\n  scoped: true,\n})\nexport class SearchIcon {\n  @Prop() width: string = '15';\n  @Prop() height: string = '15';\n\n  render() {\n    return (\n      <svg width={this.width} height={this.height} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          fill=\"currentColor\"\n          d=\"M5.5 0C8.53757 0 11 2.46243 11 5.5C11 6.83879 10.5217 8.06586 9.72656 9.01962L13.8536 13.1464C14.0488 13.3417 14.0488 13.6583 13.8536 13.8536C13.68 14.0271 13.4106 14.0464 13.2157 13.9114L13.1464 13.8536L9.01962 9.72656C8.06586 10.5217 6.83879 11 5.5 11C2.46243 11 0 8.53757 0 5.5C0 2.46243 2.46243 0 5.5 0ZM5.5 1C3.01472 1 1 3.01472 1 5.5C1 7.98528 3.01472 10 5.5 10C7.98528 10 10 7.98528 10 5.5C10 3.01472 7.98528 1 5.5 1Z\"\n        />\n      </svg>\n    );\n  }\n}\n","@import '../../../common/styles/variables.scss';\n@import '../../../common/mixins/inputs.scss';\n\n:host {\n  display: block;\n  position: relative;\n\n  @media #{$mobile} {\n    position: unset;\n  }\n\n  @include default-css-variables;\n  width: 100%;\n}\n\nlabel {\n  @include input-label;\n  flex-direction: column;\n  gap: 4px;\n  font-family: var(--nylas-font-family);\n  font-size: 16px;\n  color: var(--nylas-base-800);\n\n  p {\n    margin: 0;\n  }\n\n  .error {\n    color: var(--nylas-error);\n  }\n}\n\n.dropdown {\n  display: inline-block;\n  width: inherit;\n}\n\n.dropbtn {\n  color: var(--nylas-base-800);\n  padding: 14px;\n  font-size: 16px;\n  font-family: var(--nylas-font-family);\n  cursor: pointer;\n  display: flex;\n  justify-content: space-between;\n  gap: 0.5rem;\n  background: transparent;\n  border: 1px solid var(--nylas-base-300);\n  border-radius: var(--nylas-border-radius-2x);\n\n  &.error {\n    border: 1px solid var(--nylas-error);\n  }\n\n  &.focus {\n    background: transparent;\n  }\n\n  &:hover,\n  &:active {\n    outline: 1px solid var(--nylas-primary);\n  }\n\n  &:active {\n    outline: 2px solid var(--nylas-primary);\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    background: var(--nylas-base-100);\n  }\n\n  span {\n    &.chevron {\n      display: flex;\n      align-self: center;\n    }\n\n    &.open {\n      transform: rotate(90deg);\n    }\n\n    &.closed {\n      transform: rotate(270deg);\n    }\n\n    &.selected-option {\n      text-overflow: ellipsis;\n      overflow: hidden;\n      white-space: nowrap;\n      max-width: 144px;\n      font-size: 14px;\n      line-height: 20px;\n\n      @media #{$mobile} {\n        max-width: 124px;\n        font-size: 16px;\n      }\n    }\n  }\n}\n\n.dropdown-content {\n  display: block;\n  margin-top: 0.5rem;\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\n  @media #{$mobile} {\n    right: 0;\n    width: 325px;\n    max-width: unset;\n  }\n\n  box-shadow: 0px 4px 6px -2px rgba(0, 0, 0, 0.05);\n  box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);\n}\n\n.search-box {\n  border-bottom: 1px solid var(--nylas-base-200);\n  padding: 10px;\n  position: sticky;\n  top: 0;\n  background: var(--nylas-base-0);\n\n  .icon {\n    position: absolute;\n    top: 1.25rem;\n    left: 1.25rem;\n    color: var(--nylas-base-300);\n  }\n}\n\n.dropdown-content ul {\n  padding: 0;\n  list-style-type: none;\n  color: var(--nylas-base-900);\n  max-height: 336px;\n\n  li {\n    padding: 16px, 12px, 16px, 12px;\n    color: var(--nylas-base-900);\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\n    &:hover,\n    &:focus {\n      background-color: var(--nylas-base-100);\n    }\n  }\n}\n\n.dropdown-content .selected {\n  background-color: #e7e7e7;\n}\n\ninput[type='text'] {\n  width: -webkit-fill-available;\n  padding: inherit;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  position: sticky;\n  background: no-repeat scroll 7px 7px;\n  padding-left: 30px;\n  background-size: 16px 16px;\n  color: var(--nylas-base-800);\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Prop, State, Watch } from '@stencil/core';\n\ninterface DropdownOption {\n  labelHTML?: HTMLElement;\n  label: string;\n  value: string;\n}\n\n/**\n * The `select-dropdown` component is a dropdown that allows users to select an option from a list of options.\n * This component is used in the scheduling form to input dropdown type inputs.\n * @part sd_dropdown - The dropdown container\n * @part sd_dropdown-button - The dropdown button\n * @part sd_dropdown-button-selected-label - The selected option label\n * @part sd_dropdown-content - The dropdown content\n * @part sd_dropdown_label - The dropdown label\n */\n@Component({\n  tag: 'select-dropdown',\n  styleUrl: 'select-dropdown.scss',\n  shadow: true,\n})\nexport class SelectDropdown {\n  @Element() el!: HTMLElement;\n  private readonly componentType: string = 'select-dropdown';\n\n  private inputRef?: HTMLInputElement;\n\n  // Props\n  /**\n   * The name of the dropdown\n   */\n  @Prop() name!: string;\n  /**\n   * The options to display in the dropdown\n   */\n  @Prop() options: DropdownOption[] = [];\n  /**\n   * The default selected option\n   */\n  @Prop({ attribute: 'default-selected-option' }) defaultSelectedOption: DropdownOption | null = null;\n  /**\n   * Should show search input\n   */\n  @Prop() withSearch: boolean = true;\n\n  /**\n   * The label for the dropdown, skipped if no label is provided\n   */\n  @Prop() label?: string;\n\n  /**\n   * If true, the dropdown is required for form submission\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * The property to make the dropdown read-only. If true, the dropdown cannot be edited.\n   */\n  @Prop() readOnly: boolean = false;\n\n  /**\n   * Show pluralized label for the selected option. This is s tring that is appended to the selected option label as a suffix.\n   */\n  @Prop() pluralizedLabel: string = '';\n  /**\n   * Overrides the select dropdown to be used as a button with dropdownButtonText representing actions &  dropdownText name on the dropdown intead of selected value\n   */\n  @Prop() dropdownButtonText?: string;\n  /**\n   * Should show chevron on button\n   */\n  @Prop() withChevron: boolean = true;\n  /**\n   * Allows to set the empty value of the dropdown\n   */\n  @Prop() emptyValue: string = 'Select an option'; // Default empty value\n  /**\n   * The custom error message to display when the value is empty or null and the dropdown is required\n   */\n  @Prop() errorMessage: string = '';\n\n  // States\n  /**\n   * The selected option\n   */\n  @State() selectedOption!: DropdownOption | null;\n  /**\n   * The open state of the dropdown\n   */\n  @State() isOpen: boolean = false;\n  /**\n   * The search value for the dropdown\n   */\n  @State() searchValue: string = '';\n  /**\n   * The filtered options based on the search value\n   */\n  @State() filteredOptions: DropdownOption[] = [...this.options];\n  /**\n   * The aria-activedescendant attribute for the listbox element to indicate the currently active\n   * option in the list box to screen readers. The value of aria-activedescendant is the ID of\n   * the active option.\n   */\n  @State() ariaActivedescendant: string = '';\n\n  /**\n   * The error message to display when the value is empty or null and the dropdown is required\n   */\n  @State() error: string = '';\n\n  // Events\n  /**\n   * This event is fired when the selected option is changed\n   */\n  @Event({ bubbles: true, composed: true }) nylasFormDropdownChanged!: EventEmitter<{\n    value: DropdownOption['value'];\n    name: string;\n    error?: string;\n    label?: string;\n  }>;\n\n  /**\n   * This event is fired when the default selected option is set, on component load\n   */\n  @Event({ bubbles: true, composed: true }) nylasFormDropdownDefaultSelected!: EventEmitter<{\n    value: DropdownOption['value'];\n    name: string;\n    error?: string;\n    label?: string;\n  }>;\n\n  @Watch('options')\n  optionsChangedHandler(newValue: DropdownOption[], oldValue: DropdownOption[]) {\n    if (newValue === oldValue) {\n      return;\n    }\n    this.filteredOptions = newValue;\n  }\n\n  @Watch('defaultSelectedOption')\n  defaultSelectedOptionChangedHandler(newValue: DropdownOption, oldValue: DropdownOption) {\n    if (typeof newValue === 'undefined' || newValue?.label === oldValue?.label) {\n      return;\n    }\n    this.selectedOption = newValue;\n    this.nylasFormDropdownDefaultSelected.emit({\n      value: newValue?.value || '',\n      name: this.name,\n      error: this.error,\n      label: this.label,\n    });\n  }\n\n  // Lifecycle methods\n  componentWillLoad() {\n    this.el.setAttribute('component-type', this.componentType);\n  }\n\n  componentDidLoad() {\n    this.filteredOptions = this.options;\n    // Set the selected option to the first option if no option is selected\n    this.selectedOption = this.defaultSelectedOption;\n\n    if (!this.selectedOption && this.options.length > 0) {\n      this.selectedOption = this.options[0];\n    }\n    this.nylasFormDropdownDefaultSelected.emit({\n      value: this.selectedOption?.value || '',\n      name: this.name,\n      error: this.error,\n      label: this.label,\n    });\n  }\n\n  // Event listeners\n  /**\n   * Listen for the bookingFormSubmitted event to validate the input value when the form is submitted.\n   */\n  @Listen('bookingFormSubmitted', { target: 'document' })\n  handleBookingFormSubmitted(event: CustomEvent) {\n    this.validate(this.selectedOption?.value || '');\n    if (this.error) {\n      event.preventDefault();\n    }\n  }\n\n  /**\n   * Listen for the formSubmitted event to validate the input value when the form is submitted.\n   * @param event\n   */\n  @Listen('formSubmitted', { target: 'document' })\n  handleFormSubmitted(event: CustomEvent) {\n    this.validate(this.selectedOption?.value || '');\n    if (this.error) {\n      event.preventDefault();\n    }\n  }\n\n  // Methods\n  validate(value: string) {\n    if (this.required && !value) {\n      this.error = this.errorMessage || `${this.label} is required.`;\n    } else {\n      this.error = '';\n    }\n  }\n  toggleDropdown(): void {\n    this.isOpen = !this.isOpen;\n  }\n\n  filterOptions(event: Event): void {\n    const value = (event.target as HTMLInputElement).value;\n    this.searchValue = value;\n    this.filteredOptions = this.options.filter(option => option.label.toLowerCase().includes(value.toLowerCase()));\n  }\n\n  selectOption(option: DropdownOption): void {\n    this.error = '';\n    this.selectedOption = option;\n    this.toggleDropdown();\n    if (option.value !== this.emptyValue) {\n      this.nylasFormDropdownChanged.emit({\n        value: option.value,\n        name: this.name,\n        error: this.error,\n        label: this.label,\n      });\n    }\n  }\n\n  handleSelectButtonKeyDown(event: KeyboardEvent): void {\n    switch (event.key) {\n      case 'ArrowDown':\n      case 'Enter':\n        event.preventDefault();\n        if (!this.isOpen) {\n          this.toggleDropdown();\n        }\n        this.inputRef?.focus();\n        break;\n      case 'Escape':\n        this.isOpen = false;\n        break;\n    }\n  }\n\n  handleListboxKeydown(e) {\n    const items = this.filteredOptions; // Assuming this is the array of your current filtered options\n    const currentIndex = items.findIndex(item => item.value === this.ariaActivedescendant);\n    if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {\n      e.preventDefault();\n      if (currentIndex === items.length - 1) {\n        this.ariaActivedescendant = '';\n        this.inputRef?.focus();\n        return;\n      }\n      const nextIndex = currentIndex + 1 < items.length ? currentIndex + 1 : 0;\n      this.ariaActivedescendant = items[nextIndex].value;\n      this.focusOption(nextIndex);\n    } else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {\n      e.preventDefault();\n      if (currentIndex === 0) {\n        this.ariaActivedescendant = '';\n        this.inputRef?.focus();\n        return;\n      }\n      const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n      this.ariaActivedescendant = items[prevIndex].value;\n      this.focusOption(prevIndex);\n    } else if (e.key === 'Enter') {\n      e.preventDefault();\n      if (this.ariaActivedescendant) {\n        this.selectOption(items[currentIndex]);\n      }\n    } else if (e.key === 'Escape') {\n      this.isOpen = false;\n    }\n  }\n\n  focusOption(index) {\n    const option = this.filteredOptions[index];\n    if (!option) return; // Guard clause in case index is out of bounds\n\n    const elementId = option.value;\n    const element = this.el.shadowRoot?.getElementById(elementId) as HTMLLIElement;\n\n    if (element) {\n      element.focus(); // Set focus on the element\n      element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n    }\n  }\n\n  handleComboboxKeyDown(event: KeyboardEvent): void {\n    if (event.key === 'ArrowDown' || (event.key == 'Tab' && !event.shiftKey)) {\n      event.preventDefault();\n      this.ariaActivedescendant = this.filteredOptions[0].value;\n      this.focusOption(0);\n    } else if (event.key === 'ArrowUp' || (event.key === 'Tab' && event.shiftKey)) {\n      event.preventDefault();\n      this.ariaActivedescendant = this.filteredOptions[this.filteredOptions.length - 1].value;\n      this.focusOption(this.filteredOptions.length - 1);\n    } else if (event.key === 'Escape') {\n      this.isOpen = false;\n    }\n  }\n\n  generateButtonText(option: DropdownOption | null, dropButtonText?: string): string {\n    if (dropButtonText) {\n      return dropButtonText;\n    }\n    return option?.label ? `${this.pluralizedLabel ? this.pluralizedLabel : option?.label}` : this.emptyValue;\n  }\n\n  // Event listeners\n  @Listen('click', { target: 'document', capture: true })\n  handleOutsideClick(event: MouseEvent) {\n    // Get the path of the event\n    const path = event.composedPath();\n\n    // Check if the path includes the host element\n    const isClickInside = path.includes(this.el);\n\n    if (!isClickInside && this.isOpen) {\n      this.isOpen = false;\n    }\n  }\n\n  render() {\n    const buttonText = this.generateButtonText(this.selectedOption, this.dropdownButtonText);\n\n    return (\n      <div class=\"dropdown\" part=\"sd_dropdown\">\n        <label part=\"sd_dropdown_label\" class={{ error: !!this.error }}>\n          {this.label && (\n            <p>\n              <span class=\"label\">{this.label}</span>\n              {this.required && <span class=\"required\">*</span>}\n            </p>\n          )}\n          <button\n            part=\"sd_dropdown-button\"\n            class={{ dropbtn: true, open: this.isOpen, error: !!this.error }}\n            onClick={() => this.toggleDropdown()}\n            disabled={this.readOnly}\n            aria-haspopup=\"listbox\"\n            title={this.readOnly ? 'read-only field' : buttonText}\n            aria-expanded={this.isOpen ? 'true' : 'false'}\n            aria-label={this.name}\n            onKeyDown={e => this.handleSelectButtonKeyDown(e)}\n          >\n            <slot name=\"select-icon\" aria-hidden=\"true\"></slot>\n            <span class=\"selected-option\" part=\"sd_dropdown-button-selected-label\">\n              {buttonText}\n            </span>\n            {this.withChevron && (\n              <span\n                class={{\n                  open: this.isOpen,\n                  closed: !this.isOpen,\n                  chevron: true,\n                }}\n                aria-hidden=\"true\"\n              >\n                <chevron-icon width=\"16\" height=\"16\" />\n              </span>\n            )}\n          </button>\n          {this.error && <span class=\"error help-text\">{this.error}</span>}\n        </label>\n\n        {this.isOpen ? (\n          <div class=\"dropdown-content\" part=\"sd_dropdown-content\">\n            {this.withSearch && (\n              <div class={{ 'search-box': true, 'open': this.isOpen }}>\n                <search-icon width=\"15\" height=\"15\" class={'icon'} />\n                <input\n                  type=\"text\"\n                  role=\"combobox\"\n                  placeholder=\"Search\"\n                  value={this.searchValue}\n                  ref={el => (this.inputRef = el)}\n                  onInput={event => this.filterOptions(event)}\n                  onKeyDown={e => this.handleComboboxKeyDown(e)}\n                />\n              </div>\n            )}\n            <ul tabindex=\"-1\" role=\"listbox\" aria-label={this.name} aria-activedescendant={this.ariaActivedescendant} onKeyDown={e => this.handleListboxKeydown(e)}>\n              {this.filteredOptions.map(option =>\n                option.value.toString() ? (\n                  <li tabindex=\"0\" key={option.value} id={option.value} part={`${this.name}-${option.label}`} onClick={() => this.selectOption(option)} role=\"option\">\n                    {option.labelHTML ? <div part=\"sd_dropdown-labelhtml\">{option.labelHTML}</div> : option.label}\n                  </li>\n                ) : null,\n              )}\n            </ul>\n          </div>\n        ) : null}\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"chevron-icon.search-icon.select-dropdown.entry.js","mappings":"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","names":["iconCss"],"sources":["src/common/icons/icon.css?tag=chevron-icon&encapsulation=scoped","src/common/icons/chevron.tsx","src/common/icons/icon.css?tag=search-icon&encapsulation=scoped","src/common/icons/search.tsx","src/components/design-system/select-dropdown/select-dropdown.scss?tag=select-dropdown&encapsulation=shadow","src/components/design-system/select-dropdown/select-dropdown.tsx"],"sourcesContent":[":host {\n  display: flex;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'chevron-icon',\n  styleUrl: 'icon.css',\n  scoped: true,\n})\nexport class ChevronIcon {\n  @Prop() width: string = '24';\n  @Prop() height: string = '24';\n\n  render() {\n    return (\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width={this.width} height={this.height} viewBox=\"0 0 24 24\" fill=\"none\">\n        <path fill=\"currentColor\" d=\"M15.53 4.22a.75.75 0 0 1 0 1.06L8.81 12l6.72 6.72a.75.75 0 1 1-1.06 1.06l-7.25-7.25a.75.75 0 0 1 0-1.06l7.25-7.25a.75.75 0 0 1 1.06 0Z\" />\n      </svg>\n    );\n  }\n}\n",":host {\n  display: flex;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'search-icon',\n  styleUrl: 'icon.css',\n  scoped: true,\n})\nexport class SearchIcon {\n  @Prop() width: string = '15';\n  @Prop() height: string = '15';\n\n  render() {\n    return (\n      <svg width={this.width} height={this.height} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          fill=\"currentColor\"\n          d=\"M5.5 0C8.53757 0 11 2.46243 11 5.5C11 6.83879 10.5217 8.06586 9.72656 9.01962L13.8536 13.1464C14.0488 13.3417 14.0488 13.6583 13.8536 13.8536C13.68 14.0271 13.4106 14.0464 13.2157 13.9114L13.1464 13.8536L9.01962 9.72656C8.06586 10.5217 6.83879 11 5.5 11C2.46243 11 0 8.53757 0 5.5C0 2.46243 2.46243 0 5.5 0ZM5.5 1C3.01472 1 1 3.01472 1 5.5C1 7.98528 3.01472 10 5.5 10C7.98528 10 10 7.98528 10 5.5C10 3.01472 7.98528 1 5.5 1Z\"\n        />\n      </svg>\n    );\n  }\n}\n","@import '../../../common/styles/variables.scss';\n@import '../../../common/mixins/inputs.scss';\n\n:host {\n  display: block;\n  position: relative;\n\n  @media #{$mobile} {\n    position: unset;\n  }\n\n  @include default-css-variables;\n  width: 100%;\n}\n\nlabel {\n  @include input-label;\n  flex-direction: column;\n  gap: 4px;\n  font-family: var(--nylas-font-family);\n  font-size: 16px;\n  color: var(--nylas-base-800);\n\n  p {\n    margin: 0;\n  }\n\n  .error {\n    color: var(--nylas-error);\n  }\n}\n\n.dropdown {\n  display: inline-block;\n  width: inherit;\n}\n\n.dropbtn {\n  color: var(--nylas-base-800);\n  padding: 14px;\n  font-size: 16px;\n  font-family: var(--nylas-font-family);\n  cursor: pointer;\n  display: flex;\n  justify-content: space-between;\n  gap: 0.5rem;\n  background: transparent;\n  border: 1px solid var(--nylas-base-300);\n  border-radius: var(--nylas-border-radius-2x);\n\n  &.error {\n    border: 1px solid var(--nylas-error);\n  }\n\n  &.focus {\n    background: transparent;\n  }\n\n  &:hover,\n  &:active {\n    outline: 1px solid var(--nylas-primary);\n  }\n\n  &:active {\n    outline: 2px solid var(--nylas-primary);\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    background: var(--nylas-base-100);\n  }\n\n  span {\n    &.chevron {\n      display: flex;\n      align-self: center;\n    }\n\n    &.open {\n      transform: rotate(90deg);\n    }\n\n    &.closed {\n      transform: rotate(270deg);\n    }\n\n    &.selected-option {\n      text-overflow: ellipsis;\n      overflow: hidden;\n      white-space: nowrap;\n      max-width: 144px;\n      font-size: 14px;\n      line-height: 20px;\n\n      @media #{$mobile} {\n        max-width: 124px;\n        font-size: 16px;\n      }\n    }\n  }\n}\n\n.dropdown-content {\n  display: block;\n  margin-top: 0.5rem;\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\n  @media #{$mobile} {\n    right: 0;\n    width: 325px;\n    max-width: unset;\n  }\n\n  box-shadow: 0px 4px 6px -2px rgba(0, 0, 0, 0.05);\n  box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);\n}\n\n.search-box {\n  border-bottom: 1px solid var(--nylas-base-200);\n  padding: 10px;\n  position: sticky;\n  top: 0;\n  background: var(--nylas-base-0);\n\n  .icon {\n    position: absolute;\n    top: 1.25rem;\n    left: 1.25rem;\n    color: var(--nylas-base-300);\n  }\n}\n\n.dropdown-content ul {\n  padding: 0;\n  list-style-type: none;\n  color: var(--nylas-base-900);\n  max-height: 336px;\n\n  li {\n    padding: 16px, 12px, 16px, 12px;\n    color: var(--nylas-base-900);\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\n    &:hover,\n    &:focus {\n      background-color: var(--nylas-base-100);\n    }\n  }\n}\n\n.dropdown-content .selected {\n  background-color: #e7e7e7;\n}\n\ninput[type='text'] {\n  width: -webkit-fill-available;\n  padding: inherit;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  position: sticky;\n  background: no-repeat scroll 7px 7px;\n  padding-left: 30px;\n  background-size: 16px 16px;\n  color: var(--nylas-base-800);\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Prop, State, Watch } from '@stencil/core';\nimport { DropdownOption } from '@nylas/core';\n/**\n * The `select-dropdown` component is a dropdown that allows users to select an option from a list of options.\n * This component is used in the scheduling form to input dropdown type inputs.\n * @part sd_dropdown - The dropdown container\n * @part sd_dropdown-button - The dropdown button\n * @part sd_dropdown-button-selected-label - The selected option label\n * @part sd_dropdown-content - The dropdown content\n * @part sd_dropdown_label - The dropdown label\n */\n@Component({\n  tag: 'select-dropdown',\n  styleUrl: 'select-dropdown.scss',\n  shadow: true,\n})\nexport class SelectDropdown {\n  @Element() el!: HTMLElement;\n  private readonly componentType: string = 'select-dropdown';\n\n  private inputRef?: HTMLInputElement;\n\n  // Props\n  /**\n   * The name of the dropdown\n   */\n  @Prop() name!: string;\n  /**\n   * The options to display in the dropdown\n   */\n  @Prop() options: DropdownOption[] = [];\n  /**\n   * The default selected option\n   */\n  @Prop({ attribute: 'default-selected-option' }) defaultSelectedOption: DropdownOption | null = null;\n  /**\n   * Should show search input\n   */\n  @Prop() withSearch: boolean = true;\n\n  /**\n   * The label for the dropdown, skipped if no label is provided\n   */\n  @Prop() label?: string;\n\n  /**\n   * If true, the dropdown is required for form submission\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * The property to make the dropdown read-only. If true, the dropdown cannot be edited.\n   */\n  @Prop() readOnly: boolean = false;\n\n  /**\n   * Show pluralized label for the selected option. This is s tring that is appended to the selected option label as a suffix.\n   */\n  @Prop() pluralizedLabel: string = '';\n  /**\n   * Overrides the select dropdown to be used as a button with dropdownButtonText representing actions &  dropdownText name on the dropdown intead of selected value\n   */\n  @Prop() dropdownButtonText?: string;\n  /**\n   * Should show chevron on button\n   */\n  @Prop() withChevron: boolean = true;\n  /**\n   * Allows to set the empty value of the dropdown\n   */\n  @Prop() emptyValue: string = 'Select an option'; // Default empty value\n  /**\n   * The custom error message to display when the value is empty or null and the dropdown is required\n   */\n  @Prop() errorMessage: string = '';\n\n  // States\n  /**\n   * The selected option\n   */\n  @State() selectedOption!: DropdownOption | null;\n  /**\n   * The open state of the dropdown\n   */\n  @State() isOpen: boolean = false;\n  /**\n   * The search value for the dropdown\n   */\n  @State() searchValue: string = '';\n  /**\n   * The filtered options based on the search value\n   */\n  @State() filteredOptions: DropdownOption[] = [...this.options];\n  /**\n   * The aria-activedescendant attribute for the listbox element to indicate the currently active\n   * option in the list box to screen readers. The value of aria-activedescendant is the ID of\n   * the active option.\n   */\n  @State() ariaActivedescendant: string = '';\n\n  /**\n   * The error message to display when the value is empty or null and the dropdown is required\n   */\n  @State() error: string = '';\n\n  // Events\n  /**\n   * This event is fired when the selected option is changed\n   */\n  @Event({ bubbles: true, composed: true }) nylasFormDropdownChanged!: EventEmitter<{\n    value: DropdownOption['value'];\n    name: string;\n    error?: string;\n    label?: string;\n  }>;\n\n  /**\n   * This event is fired when the default selected option is set, on component load\n   */\n  @Event({ bubbles: true, composed: true }) nylasFormDropdownDefaultSelected!: EventEmitter<{\n    value: DropdownOption['value'];\n    name: string;\n    error?: string;\n    label?: string;\n  }>;\n\n  @Watch('options')\n  optionsChangedHandler(newValue: DropdownOption[], oldValue: DropdownOption[]) {\n    if (newValue === oldValue) {\n      return;\n    }\n    this.filteredOptions = newValue;\n  }\n\n  @Watch('defaultSelectedOption')\n  defaultSelectedOptionChangedHandler(newValue: DropdownOption, oldValue: DropdownOption) {\n    if (typeof newValue === 'undefined' || newValue?.label === oldValue?.label) {\n      return;\n    }\n    this.selectedOption = newValue;\n    this.nylasFormDropdownDefaultSelected.emit({\n      value: newValue?.value || '',\n      name: this.name,\n      error: this.error,\n      label: this.label,\n    });\n  }\n\n  // Lifecycle methods\n  componentWillLoad() {\n    this.el.setAttribute('component-type', this.componentType);\n  }\n\n  componentDidLoad() {\n    this.filteredOptions = this.options;\n    // Set the selected option to the first option if no option is selected\n    this.selectedOption = this.defaultSelectedOption;\n\n    if (!this.selectedOption && this.options.length > 0) {\n      this.selectedOption = this.options[0];\n    }\n    this.nylasFormDropdownDefaultSelected.emit({\n      value: this.selectedOption?.value || '',\n      name: this.name,\n      error: this.error,\n      label: this.label,\n    });\n  }\n\n  // Event listeners\n  /**\n   * Listen for the bookingFormSubmitted event to validate the input value when the form is submitted.\n   */\n  @Listen('bookingFormSubmitted', { target: 'document' })\n  handleBookingFormSubmitted(event: CustomEvent) {\n    this.validate(this.selectedOption?.value || '');\n    if (this.error) {\n      event.preventDefault();\n    }\n  }\n\n  /**\n   * Listen for the formSubmitted event to validate the input value when the form is submitted.\n   * @param event\n   */\n  @Listen('formSubmitted', { target: 'document' })\n  handleFormSubmitted(event: CustomEvent) {\n    this.validate(this.selectedOption?.value || '');\n    if (this.error) {\n      event.preventDefault();\n    }\n  }\n\n  // Methods\n  validate(value: string) {\n    if (this.required && !value) {\n      this.error = this.errorMessage || `${this.label} is required.`;\n    } else {\n      this.error = '';\n    }\n  }\n  toggleDropdown(): void {\n    this.isOpen = !this.isOpen;\n  }\n\n  filterOptions(event: Event): void {\n    const value = (event.target as HTMLInputElement).value;\n    this.searchValue = value;\n    this.filteredOptions = this.options.filter(option => option.label.toLowerCase().includes(value.toLowerCase()));\n  }\n\n  selectOption(option: DropdownOption): void {\n    this.error = '';\n    this.selectedOption = option;\n    this.toggleDropdown();\n    if (option.value !== this.emptyValue) {\n      this.nylasFormDropdownChanged.emit({\n        value: option.value,\n        name: this.name,\n        error: this.error,\n        label: this.label,\n      });\n    }\n  }\n\n  handleSelectButtonKeyDown(event: KeyboardEvent): void {\n    switch (event.key) {\n      case 'ArrowDown':\n      case 'Enter':\n        event.preventDefault();\n        if (!this.isOpen) {\n          this.toggleDropdown();\n        }\n        this.inputRef?.focus();\n        break;\n      case 'Escape':\n        this.isOpen = false;\n        break;\n    }\n  }\n\n  handleListboxKeydown(e) {\n    const items = this.filteredOptions; // Assuming this is the array of your current filtered options\n    const currentIndex = items.findIndex(item => item.value === this.ariaActivedescendant);\n    if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {\n      e.preventDefault();\n      if (currentIndex === items.length - 1) {\n        this.ariaActivedescendant = '';\n        this.inputRef?.focus();\n        return;\n      }\n      const nextIndex = currentIndex + 1 < items.length ? currentIndex + 1 : 0;\n      this.ariaActivedescendant = items[nextIndex].value;\n      this.focusOption(nextIndex);\n    } else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {\n      e.preventDefault();\n      if (currentIndex === 0) {\n        this.ariaActivedescendant = '';\n        this.inputRef?.focus();\n        return;\n      }\n      const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n      this.ariaActivedescendant = items[prevIndex].value;\n      this.focusOption(prevIndex);\n    } else if (e.key === 'Enter') {\n      e.preventDefault();\n      if (this.ariaActivedescendant) {\n        this.selectOption(items[currentIndex]);\n      }\n    } else if (e.key === 'Escape') {\n      this.isOpen = false;\n    }\n  }\n\n  focusOption(index) {\n    const option = this.filteredOptions[index];\n    if (!option) return; // Guard clause in case index is out of bounds\n\n    const elementId = option.value;\n    const element = this.el.shadowRoot?.getElementById(elementId) as HTMLLIElement;\n\n    if (element) {\n      element.focus(); // Set focus on the element\n      element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n    }\n  }\n\n  handleComboboxKeyDown(event: KeyboardEvent): void {\n    if (event.key === 'ArrowDown' || (event.key == 'Tab' && !event.shiftKey)) {\n      event.preventDefault();\n      this.ariaActivedescendant = this.filteredOptions[0].value;\n      this.focusOption(0);\n    } else if (event.key === 'ArrowUp' || (event.key === 'Tab' && event.shiftKey)) {\n      event.preventDefault();\n      this.ariaActivedescendant = this.filteredOptions[this.filteredOptions.length - 1].value;\n      this.focusOption(this.filteredOptions.length - 1);\n    } else if (event.key === 'Escape') {\n      this.isOpen = false;\n    }\n  }\n\n  generateButtonText(option: DropdownOption | null, dropButtonText?: string): string {\n    if (dropButtonText) {\n      return dropButtonText;\n    }\n    return option?.label ? `${this.pluralizedLabel ? this.pluralizedLabel : option?.label}` : this.emptyValue;\n  }\n\n  // Event listeners\n  @Listen('click', { target: 'document', capture: true })\n  handleOutsideClick(event: MouseEvent) {\n    // Get the path of the event\n    const path = event.composedPath();\n\n    // Check if the path includes the host element\n    const isClickInside = path.includes(this.el);\n\n    if (!isClickInside && this.isOpen) {\n      this.isOpen = false;\n    }\n  }\n\n  render() {\n    const buttonText = this.generateButtonText(this.selectedOption, this.dropdownButtonText);\n\n    return (\n      <div class=\"dropdown\" part=\"sd_dropdown\">\n        <label part=\"sd_dropdown_label\" class={{ error: !!this.error }}>\n          {this.label && (\n            <p>\n              <span class=\"label\">{this.label}</span>\n              {this.required && <span class=\"required\">*</span>}\n            </p>\n          )}\n          <button\n            part=\"sd_dropdown-button\"\n            class={{ dropbtn: true, open: this.isOpen, error: !!this.error }}\n            onClick={() => this.toggleDropdown()}\n            disabled={this.readOnly}\n            aria-haspopup=\"listbox\"\n            title={this.readOnly ? 'read-only field' : buttonText}\n            aria-expanded={this.isOpen ? 'true' : 'false'}\n            aria-label={this.name}\n            onKeyDown={e => this.handleSelectButtonKeyDown(e)}\n          >\n            <slot name=\"select-icon\" aria-hidden=\"true\"></slot>\n            <span class=\"selected-option\" part=\"sd_dropdown-button-selected-label\">\n              {buttonText}\n            </span>\n            {this.withChevron && (\n              <span\n                class={{\n                  open: this.isOpen,\n                  closed: !this.isOpen,\n                  chevron: true,\n                }}\n                aria-hidden=\"true\"\n              >\n                <chevron-icon width=\"16\" height=\"16\" />\n              </span>\n            )}\n          </button>\n          {this.error && <span class=\"error help-text\">{this.error}</span>}\n        </label>\n\n        {this.isOpen ? (\n          <div class=\"dropdown-content\" part=\"sd_dropdown-content\">\n            {this.withSearch && (\n              <div class={{ 'search-box': true, 'open': this.isOpen }}>\n                <search-icon width=\"15\" height=\"15\" class={'icon'} />\n                <input\n                  type=\"text\"\n                  role=\"combobox\"\n                  placeholder=\"Search\"\n                  value={this.searchValue}\n                  ref={el => (this.inputRef = el)}\n                  onInput={event => this.filterOptions(event)}\n                  onKeyDown={e => this.handleComboboxKeyDown(e)}\n                />\n              </div>\n            )}\n            <ul tabindex=\"-1\" role=\"listbox\" aria-label={this.name} aria-activedescendant={this.ariaActivedescendant} onKeyDown={e => this.handleListboxKeydown(e)}>\n              {this.filteredOptions.map(option =>\n                option.value.toString() ? (\n                  <li tabindex=\"0\" key={option.value} id={option.value} part={`${this.name}-${option.label}`} onClick={() => this.selectOption(option)} role=\"option\">\n                    {option.labelHTML ? <div part=\"sd_dropdown-labelhtml\">{option.labelHTML}</div> : option.label}\n                  </li>\n                ) : null,\n              )}\n            </ul>\n          </div>\n        ) : null}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/google-logo-icon_6.entry.js

@@ -1263,9 +1263,9 @@ const NylasEditorTabsGroup = class {
     }
     render() {
         debug('[nylas-editor-tabs-group]', 'render', this.formState);
-        return (h(Host, { key: 'afdf097ad3a673c5290d560773673f555319dcfb' }, h("form", { key: '7f7e51ad07c4b8f2c95a546fa847f4b14f002b15', onSubmit: this.formSubmissionHandler, class: "scheduler-editor", ref: el => (this.formRef = el), noValidate: true }, this.mode === 'app' ? (h("div", { class: "return-to-calendar-view", part: "editor__return-to-calendar-view net__return-to-calendar-view" }, h("button-component", { id: "return-to-calendar-view-button", variant: "invisible", part: "nset__header__back-button", type: "button", onClick: e => {
+        return (h(Host, { key: '3876ed63289b6d9f50ada8cf0f45e6bf89ce5144' }, h("form", { key: '0811e2531ad2a510fa0d3d0361c6013f24debd15', onSubmit: this.formSubmissionHandler, class: "scheduler-editor", ref: el => (this.formRef = el), noValidate: true }, this.mode === 'app' ? (h("div", { class: "return-to-calendar-view", part: "editor__return-to-calendar-view net__return-to-calendar-view" }, h("button-component", { id: "return-to-calendar-view-button", variant: "invisible", part: "nset__header__back-button", type: "button", onClick: e => {
                 this.setActiveTab(e, TabGroup.CalendarView);
-            } }, h("chevron-icon", { width: "16", height: "16" }), h("span", null, "Return to Calendar view")))) : null, this.mode === 'app' ? (h("div", { class: "form-contents", part: "editor__form-contents net__form-contents" }, h("div", { class: "tabs", part: "editor__tabs net__tabs" }, h("button", { name: TabGroup.BookingOptions, class: { tab: true, active: this.activeTab == TabGroup.BookingOptions, hide: this.hideTab(TabGroup.BookingOptions) }, part: "editortab__booking-options net__tab-booking-options", onClick: e => this.setActiveTab(e, TabGroup.BookingOptions) }, h("flow-icon", { width: "16", height: "16" }), instance.t('bookingOptionsTab')), h("button", { name: TabGroup.BookingForm, class: { tab: true, active: this.activeTab == 'bookingForm', hide: this.hideTab(TabGroup.BookingForm) }, part: "editortab__booking-form net__tab-booking-form", onClick: e => this.setActiveTab(e, TabGroup.BookingForm) }, this.activeTab == TabGroup.BookingForm ? h("calendar-agenda-fill-icon", { width: "16", height: "16" }) : h("calendar-agenda-icon", { width: "16", height: "16" }), instance.t('bookingFormTab')), h("button", { name: TabGroup.Communications, class: { tab: true, active: this.activeTab == 'communications', hide: this.hideTab(TabGroup.Communications) }, onClick: e => this.setActiveTab(e, TabGroup.Communications), part: "editortab__communications net__tab-communications" }, this.activeTab == TabGroup.Communications ? h("envelope-fill-icon", { width: "16", height: "16" }) : h("envelope-icon", { width: "16", height: "16" }), instance.t('communicationsTab')), h("button", { name: TabGroup.PageStyles, class: { tab: true, active: this.activeTab == 'pageStyles', hide: this.hideTab(TabGroup.PageStyles) }, onClick: e => this.setActiveTab(e, TabGroup.PageStyles), part: "editortab__page-styles net__tab-page-styles" }, this.activeTab == TabGroup.PageStyles ? h("paintbrush-fill-icon", { width: "16", height: "16" }) : h("paintbrush-icon", { width: "16", height: "16" }), instance.t('pageStylesTab'))), h("div", { class: "tab-content", part: "editor__tab-content net__tab-content" }, h(TabContentsGroup, { formState: this.formState, activeTab: this.activeTab, currentUser: this.currentUser, calendars: this.calendars, id: this.selectedConfiguration?.id ?? 'new', i18next: instance })))) : (h("div", { class: "composable", key: this.selectedConfiguration?.id }, h("slot", null))), h("div", { key: '922210f9a184ff3ddb83630db4ae6ee1d9dd2944', class: "footer", part: "editor__footer net__footer" }, h("div", { key: '5d8a938c31b831833ebe3030fee8da39acb12edb', class: "preview", part: "editor__footer-preview net__footer-preview" }, this.enableUserFeedback && (h("button-component", { title: "Share your feedback", id: "report-issue", variant: 'basic', onClick: e => this.onFeedbackClick(e) }, h("feedback-icon", null))), this.activeTab === TabGroup.CalendarView && (h("button-component", { title: "Go to page settings", id: "page-settings", variant: 'basic', onClick: e => this.setActiveTab(e, TabGroup.BookingOptions) }, "Page settings"))), h("div", { key: '07889582bf417de6ccc1ce5a74f2a1c39559f9c0', class: "buttons", part: "editor__footer-buttons net__footer-buttons" }, h("p", { key: 'ad80bbca9db6703743093ca6fee0bb3a949e66c6', class: {
+            } }, h("chevron-icon", { width: "16", height: "16" }), h("span", null, "Return to Calendar view")))) : null, this.mode === 'app' ? (h("div", { class: "form-contents", part: "editor__form-contents net__form-contents" }, h("div", { class: "tabs", part: "editor__tabs net__tabs" }, h("button", { name: TabGroup.BookingOptions, class: { tab: true, active: this.activeTab == TabGroup.BookingOptions, hide: this.hideTab(TabGroup.BookingOptions) }, part: "editortab__booking-options net__tab-booking-options", onClick: e => this.setActiveTab(e, TabGroup.BookingOptions) }, h("flow-icon", { width: "16", height: "16" }), instance.t('bookingOptionsTab')), h("button", { name: TabGroup.BookingForm, class: { tab: true, active: this.activeTab == TabGroup.BookingForm, hide: this.hideTab(TabGroup.BookingForm) }, part: "editortab__booking-form net__tab-booking-form", onClick: e => this.setActiveTab(e, TabGroup.BookingForm) }, this.activeTab == TabGroup.BookingForm ? h("calendar-agenda-fill-icon", { width: "16", height: "16" }) : h("calendar-agenda-icon", { width: "16", height: "16" }), instance.t('bookingFormTab')), h("button", { name: TabGroup.Communications, class: { tab: true, active: this.activeTab == TabGroup.Communications, hide: this.hideTab(TabGroup.Communications) }, onClick: e => this.setActiveTab(e, TabGroup.Communications), part: "editortab__communications net__tab-communications" }, this.activeTab == TabGroup.Communications ? h("envelope-fill-icon", { width: "16", height: "16" }) : h("envelope-icon", { width: "16", height: "16" }), instance.t('communicationsTab')), h("button", { name: TabGroup.PageStyles, class: { tab: true, active: this.activeTab == TabGroup.PageStyles, hide: this.hideTab(TabGroup.PageStyles) }, onClick: e => this.setActiveTab(e, TabGroup.PageStyles), part: "editortab__page-styles net__tab-page-styles" }, this.activeTab == TabGroup.PageStyles ? h("paintbrush-fill-icon", { width: "16", height: "16" }) : h("paintbrush-icon", { width: "16", height: "16" }), instance.t('pageStylesTab'))), h("div", { class: "tab-content", part: "editor__tab-content net__tab-content" }, h(TabContentsGroup, { formState: this.formState, activeTab: this.activeTab, currentUser: this.currentUser, calendars: this.calendars, id: this.selectedConfiguration?.id ?? 'new', i18next: instance })))) : (h("div", { class: "composable", key: this.selectedConfiguration?.id }, h("slot", null))), h("div", { key: 'aeac48a6fb617c41599578ea1daaa077d8460eb7', class: "footer", part: "editor__footer net__footer" }, h("div", { key: 'c6ae59dfb5a785a61005aded9cccef25b5bc988d', class: "preview", part: "editor__footer-preview net__footer-preview" }, this.enableUserFeedback && (h("button-component", { title: "Share your feedback", id: "report-issue", variant: 'basic', onClick: e => this.onFeedbackClick(e) }, h("feedback-icon", null))), this.activeTab === TabGroup.CalendarView && (h("button-component", { title: "Go to page settings", id: "page-settings", variant: 'basic', onClick: e => this.setActiveTab(e, TabGroup.BookingOptions) }, "Page settings"))), h("div", { key: 'c8173bb6d4c0f7c3c032e69ba90a168690213d61', class: "buttons", part: "editor__footer-buttons net__footer-buttons" }, h("p", { key: '647a5d28a97e96da3cd1244eedb9ad7a9a5b659e', class: {
                 'unsaved-changes': this.hasUnsavedChanges && !this.changesSaved,
                 'saved-changes': this.changesSaved,
                 'error': this.error !== '',
@@ -1274,17 +1274,17 @@ const NylasEditorTabsGroup = class {
             ? instance.t('unsavedChangesLabel')
             : this.error == '' && this.changesSaved
                 ? `${instance.t('changesSavedLabel')}!`
-                : ''), h("div", { key: 'a53e7d929f8e0cdaf36d2e43e98b8703cd6f2379', class: "footer-buttons__row" }, this.schedulerPreviewLink !== '' && this.action === 'edit' && (h("button-component", { title: "Preview", type: "button", disabled: this.isLoading, clickHandler: event => {
+                : ''), h("div", { key: '13f02e12c253380c196501d819e26dbef36f5532', class: "footer-buttons__row" }, this.schedulerPreviewLink !== '' && this.action === 'edit' && (h("button-component", { title: "Preview", type: "button", disabled: this.isLoading, clickHandler: event => {
                 event.preventDefault();
                 const previewEvent = this.previewButtonClicked.emit(this.host);
                 if (!previewEvent.defaultPrevented) {
                     window.open(parsePreviewLink(this.schedulerPreviewLink, this.selectedConfiguration), '_blank');
                 }
-            }, variant: 'basic' }, h("eye-icon", null))), h("button-component", { key: '9c048ca1576e4bd508461a172f3ffdfafcf39698', type: "button", disabled: this.isLoading, clickHandler: event => {
+            }, variant: 'basic' }, h("eye-icon", null))), h("button-component", { key: '945a4b3405ff6e8a90d87dfea5928c86939d1666', type: "button", disabled: this.isLoading, clickHandler: event => {
                 event.preventDefault();
                 this.cancelButtonClick.emit();
                 this.error = '';
-            }, variant: 'basic', part: "editor__footer-cancel net__footer-cancel" }, instance.t('backButton')), h("button-component", { key: '778f71bc70660a4e279db51a56fda244966a5694', type: "submit", disabled: this.isLoading, part: "editor__footer-cta, net__footer-cta" }, this.isLoading ? (h("span", null, instance.t('savingButtonText'), h("loading-icon", null), ' ')) : this.action === 'create' ? (`${instance.t('createButtonText')}`) : (`${instance.t('saveChangesButtonText')}`)))))), this.showFeedbackModal && h("nylas-feedback-form", null)));
+            }, variant: 'basic', part: "editor__footer-cancel net__footer-cancel" }, instance.t('backButton')), h("button-component", { key: 'd412db23e9fff9450174caa83d39a5dae05b5022', type: "submit", disabled: this.isLoading, part: "editor__footer-cta, net__footer-cta" }, this.isLoading ? (h("span", null, instance.t('savingButtonText'), h("loading-icon", null), ' ')) : this.action === 'create' ? (`${instance.t('createButtonText')}`) : (`${instance.t('saveChangesButtonText')}`)))))), this.showFeedbackModal && h("nylas-feedback-form", null)));
     }
     get host() { return getElement(this); }
     static get watchers() { return {