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

package/dist/components/nylas-confirmation-email2.js.map

@@ -1 +1 @@
-{"file":"nylas-confirmation-email2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-confirmation-email/nylas-confirmation-email.scss?tag=nylas-confirmation-email&encapsulation=shadow","src/components/scheduler-editor/nylas-confirmation-email/nylas-confirmation-email.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  @include default-css-variables;\n  width: inherit;\n}\n\n.nylas-confirmation-email {\n  width: inherit;\n  display: flex;\n  flex-direction: column;\n  margin: 1rem;\n  border-radius: var(--nylas-border-radius-2x);\n  border: 1px solid var(--nylas-base-200);\n  text-align: left;\n\n  .header {\n    padding: 1rem;\n    display: grid;\n    grid-template-columns: 1fr auto;\n    border-bottom: 1px solid var(--nylas-base-200);\n\n    h3 {\n      border-radius: var(--nylas-border-radius-2x);\n      margin: 0;\n      font-size: 1rem;\n      font-weight: 600;\n      line-height: 20px;\n      color: var(--nylas-base-900);\n      text-align: left;\n    }\n\n    p {\n      margin: 0.25rem 0 0 0;\n      font-size: 0.875rem;\n      font-weight: 400;\n      line-height: 20px;\n      color: var(--nylas-base-600);\n      text-align: left;\n    }\n\n    .confirmation-email-toggle {\n      display: flex;\n      gap: 24px;\n      align-items: center;\n\n      .chevron {\n        display: flex;\n        align-self: center;\n        cursor: pointer;\n\n        &:hover,\n        &:active {\n          color: var(--nylas-primary);\n        }\n\n        &.open {\n          transform: rotate(90deg);\n        }\n\n        &.closed {\n          transform: rotate(270deg);\n        }\n\n        &.disabled {\n          cursor: not-allowed;\n          color: var(--nylas-base-300);\n\n          &:hover {\n            color: var(--nylas-base-300);\n          }\n        }\n      }\n    }\n  }\n\n  .nylas-confirmation-email__body {\n    display: grid;\n    grid-template-columns: 1fr auto;\n    background-color: var(--nylas-base-25);\n    border-radius: var(--nylas-border-radius-2x);\n\n    @media #{$mobile} {\n      grid-template-columns: 1fr;\n    }\n\n    .nylas-confirmation-email__section {\n      padding: 1rem;\n      display: flex;\n      flex-direction: column;\n      gap: 1rem;\n      color: var(--nylas-base-800);\n\n      @media #{$mobile} {\n        border: none;\n      }\n\n      .nylas-confirmation-email__row {\n        display: grid;\n        grid-template-columns: 1fr auto;\n        align-items: center;\n        gap: 1rem;\n\n        &.full-width-col {\n          grid-template-columns: 1fr;\n          border-top: 1px solid var(--nylas-base-200);\n          padding-top: 1.25rem;\n          margin: 0.25rem 0;\n        }\n\n        label {\n          display: flex;\n          align-items: center;\n\n          span.required {\n            color: var(--nylas-error, #cc4841);\n          }\n\n          span.label-icon {\n            margin-left: 4px;\n\n            tooltip-component {\n              display: flex;\n            }\n          }\n        }\n\n        p {\n          margin: 0.25rem 0 0 0;\n          font-size: 1rem;\n          font-weight: 500;\n          line-height: 24px;\n          color: var(--nylas-base-900);\n        }\n\n        .company-logo-container {\n          display: flex;\n          gap: 32px;\n          width: 100%;\n\n          .input-container {\n            display: flex;\n            flex-direction: column;\n            flex: 1;\n          }\n\n          .company-logo {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: 200px;\n            height: 100px;\n            border: var(--nylas-base-200) solid 1px;\n            border-radius: var(--nylas-border-radius-2x);\n            overflow: hidden;\n            padding: 10px;\n          }\n\n          .company-logo img {\n            max-height: 100%;\n            max-width: 100%;\n            object-fit: contain;\n            object-position: center;\n          }\n        }\n\n        span.selected-value {\n          font-weight: 500;\n        }\n      }\n\n      .subsection {\n        display: flex;\n        flex-direction: column;\n        gap: 1rem;\n\n        h3 {\n          margin: 0;\n          font-size: 1rem;\n          font-weight: 600;\n          line-height: 20px;\n          color: var(--nylas-base-900);\n          text-align: left;\n        }\n\n        .input-container {\n          display: flex;\n          flex-direction: column;\n          gap: 0.25rem;\n\n          textarea {\n            padding: 12px 16px;\n            border-width: 1;\n            resize: vertical;\n            border-radius: 8px;\n            font-family: var(--nylas-font-family);\n            font-size: 16px;\n            line-height: 24px;\n            border: 1px solid var(--nylas-base-200);\n          }\n        }\n      }\n    }\n\n    .nylas-confirmation-email__preview {\n      width: 208px;\n      background: var(--nylas-base-25);\n      border-bottom-right-radius: var(--nylas-border-radius-2x);\n\n      @media #{$mobile} {\n        width: inherit;\n        border-bottom-left-radius: var(--nylas-border-radius-2x);\n      }\n\n      h4 {\n        font-size: 14px;\n        line-height: 24px;\n        color: var(--nylas-base-600);\n        font-family: var(--nylas-font-family);\n        font-weight: 500;\n        text-align: center;\n        margin: 0.75rem 0;\n      }\n\n      .preview-container {\n        padding: 0 2rem 1rem;\n\n        .slot {\n          background-color: transparent;\n          border-top: 1px solid var(--nylas-base-300);\n\n          &.active {\n            background-color: var(--nylas-base-100);\n          }\n\n          &:last-of-type {\n            border-bottom: 1px solid var(--nylas-base-300);\n          }\n        }\n\n        .event-slot {\n          background-color: var(--nylas-base-600);\n          border-top: 1px solid var(--nylas-base-300);\n        }\n      }\n    }\n\n    span.error-message {\n      color: var(--nylas-error);\n    }\n\n    span.help-text {\n      margin: 0.25rem 0 0 0;\n      font-size: 0.875rem;\n      font-weight: 400;\n      line-height: 20px;\n      color: var(--nylas-base-600);\n      text-align: left;\n    }\n  }\n\n  .nylas-confirmation-email__summary {\n    padding: 0.75rem 1rem;\n    display: grid;\n    grid-template-columns: auto 1fr;\n    column-gap: 1rem;\n\n    p {\n      margin: 0;\n      display: flex;\n      align-items: center;\n      column-gap: 4px;\n      font-size: 0.875rem;\n      font-weight: 400;\n      line-height: 21px;\n      color: var(--nylas-base-600);\n      text-align: left;\n\n      span.summary-icon {\n        display: flex;\n        justify-content: center;\n        min-width: 20px;\n      }\n    }\n  }\n}\n\nsp-divider {\n  background-color: var(--nylas-base-200);\n  height: 1px;\n  margin: 0.25rem 0;\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug, sanitize } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration, EmailTemplate, Participant } from '@nylas/core';\n\n/**\n * The `nylas-confirmation-email` component is a UI component that allows users to set buffer time before and after an event.\n *\n * @part nce__tab-heading - The nylas-confirmation-email main tab heading\n * @part nce - The nylas-confirmation-email container\n * @part nce__header - The header of the event communication section\n * @part nce__body - The body of the event communication section\n * @part nce__confirmation-email-toggle--container - The confirmation email drawer toggle container\n * @part nce__input-image-url - The input image URL container\n * @part nce__summary - The confirmation card summary container\n */\n@Component({\n  tag: 'nylas-confirmation-email',\n  styleUrl: 'nylas-confirmation-email.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasConfirmationEmail {\n  @Element() host!: HTMLNylasConfirmationEmailElement;\n  /**\n   * @internal\n   * The selected config\n   */\n  @Prop() selectedConfiguration?: Configuration;\n  /**\n   * The confirmation email template data to display\n   */\n  @Prop() confirmationEmailTemplate: EmailTemplate = {} as EmailTemplate;\n  /**\n   * Is the confirmation email card open\n   */\n  @Prop() isOpen: boolean = false;\n  /**\n   * List of participants\n   */\n  @Prop() participants: Participant[] = [];\n  /**\n   * The name of the component\n   */\n  @Prop() name: string = 'confirmation-email-template';\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The confirmation email template state.\n   */\n  @State() confirmationEmail!: EmailTemplate;\n\n  /**\n   * The internal state to store the isOpen state.\n   */\n  @State() isConfirmationEmailOpen: boolean = this.isOpen;\n\n  /**\n   * The internal state to store the participants.\n   */\n  @State() participantsState: Participant[] = this.participants;\n\n  /**\n   * This event is fired when the email reminders change.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n    valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n  }>;\n\n  // Lifecycle methods\n  connectedCallback() {\n    debug('nylas-confirmation-email', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-confirmation-email', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-confirmation-email', 'componentWillLoad');\n    // See comment in the @Watch('name') decorator for more information.\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-confirmation-email', 'componentDidLoad');\n    if (this.selectedConfiguration) {\n      this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n    } else {\n      this.confirmationEmail = this.confirmationEmailTemplate;\n      this.isConfirmationEmailOpen = this.isOpen;\n      this.participantsState = this.participants;\n    }\n  }\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-confirmation-email', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('selectedConfiguration')\n  selectedConfigurationChangedHandler(newValue: Configuration) {\n    debug('nylas-confirmation-email', 'selectedConfigurationChangedHandler', newValue);\n    this.confirmationEmail = newValue?.scheduler?.email_template || this.confirmationEmailTemplate;\n    this.isConfirmationEmailOpen = !newValue?.event_booking?.reminders?.length;\n    this.participantsState = newValue?.participants || this.participants;\n  }\n\n  @Listen('nylasFormInputChanged')\n  async nylasFormInputChangeHandler(event: CustomEvent<{ value: string; name: string; type?: string }>) {\n    const { name, value } = event.detail;\n    const type = event.detail?.type;\n    if (name === 'confirmation-email-title') {\n      this.confirmationEmail = { ...this.confirmationEmail, booking_confirmed: { ...(this.confirmationEmail?.booking_confirmed || {}), title: value } };\n      this.internals.setFormValue(JSON.stringify(this.confirmationEmail), this.name);\n      this.valueChanged.emit({ value: JSON.stringify(this.confirmationEmail), name: this.name });\n    } else if (name === 'confirmation-email-body' && type === 'multi_line_text') {\n      this.handleEmailBodyChange(event);\n    }\n  }\n\n  @Listen('valueChanged')\n  valueChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('nylas-confirmation-email', 'valueChangedHandler', event.detail);\n    const { value, name } = event.detail;\n\n    if (name === 'confirmation-email-logo') {\n      this.confirmationEmail = { ...this.confirmationEmail, logo: value };\n      this.internals.setFormValue(JSON.stringify(this.confirmationEmail), this.name);\n      this.valueChanged.emit({ value: JSON.stringify(this.confirmationEmail), name: this.name });\n    }\n  }\n\n  updateConfirmationFormValue() {\n    debug('nylas-confirmation-email', 'updateConfirmationFormValue');\n    this.internals.setFormValue(JSON.stringify(this.confirmationEmail), this.name);\n    this.valueChanged.emit({ value: JSON.stringify(this.confirmationEmail), name: this.name });\n  }\n\n  toggleConfirmationEmail() {\n    this.isConfirmationEmailOpen = !this.isConfirmationEmailOpen;\n  }\n\n  handleEmailBodyChange(event) {\n    const value = sanitize(event.detail.value);\n    this.confirmationEmail = { ...this.confirmationEmail, booking_confirmed: { ...(this.confirmationEmail?.booking_confirmed || {}), body: value } };\n    this.internals.setFormValue(JSON.stringify(this.confirmationEmail), this.name);\n    this.valueChanged.emit({ value: JSON.stringify(this.confirmationEmail), name: this.name });\n  }\n\n  @RegisterComponent<NylasConfirmationEmail, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-confirmation-email',\n    stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n    eventToProps: {\n      valueChanged: async (\n        event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n        _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n      ) => {\n        const { valueChanged } = event.detail;\n        // If a handler is passed, call it.\n        if (valueChanged) {\n          valueChanged(event);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    const organizer = this.participantsState.find(p => p.is_organizer);\n    const organizerName = organizer?.name || organizer?.email;\n\n    return (\n      <Host>\n        <div class=\"nylas-confirmation-email\" part=\"nce\">\n          <div class=\"header\" part=\"nce__header\">\n            <div>\n              <h3>{this.confirmationEmail?.booking_confirmed?.title ?? `Booking confirmed with ${organizerName ? ` ${organizerName}` : ''}`}</h3>\n              <p>Booking confirmation email</p>\n            </div>\n            {this.isConfirmationEmailOpen ? (\n              <div class=\"confirmation-email-toggle\" part=\"nce__confirmation-email-toggle--container\">\n                <span class={`chevron ${this.isConfirmationEmailOpen ? 'open' : 'closed'} `} onClick={() => this.toggleConfirmationEmail()}>\n                  <chevron-icon width=\"24\" height=\"24\" />\n                </span>\n              </div>\n            ) : (\n              <button-component\n                variant={'basic'}\n                clickHandler={event => {\n                  event.preventDefault();\n                  this.toggleConfirmationEmail();\n                }}\n              >\n                <edit-icon width=\"16\" height=\"16\"></edit-icon>\n                Edit\n              </button-component>\n            )}\n          </div>\n\n          {this.isConfirmationEmailOpen ? (\n            <div class=\"nylas-confirmation-email__body\" part=\"nce__body\">\n              <div class=\"nylas-confirmation-email__section\">\n                <div class=\"nylas-confirmation-email__row\">\n                  <label>\n                    Send confirmation email\n                    <span class=\"label-icon\">\n                      <tooltip-component>\n                        <info-icon slot=\"tooltip-icon\" />\n                        <span slot=\"tooltip-content\">You and your guests will receive a confirmation email immediately upon booking.</span>\n                      </tooltip-component>\n                    </span>\n                  </label>\n                  <span class=\"selected-value\">Immediately upon booking</span>\n                </div>\n                <div class=\"nylas-confirmation-email__row\">\n                  <div class=\"subsection\">\n                    <div class=\"input-container\">\n                      <label>\n                        Company logo URL\n                        <span class=\"label-icon\">\n                          <tooltip-component>\n                            <info-icon slot=\"tooltip-icon\" />\n                            <span slot=\"tooltip-content\">\n                              This logo appears in the booking confirmation email. The URL must be publicly accessible. The image will be scaled down to a max size of 200px x\n                              100px.\n                            </span>\n                          </tooltip-component>\n                        </span>\n                      </label>\n\n                      {this.confirmationEmail && (\n                        <input-image-url\n                          name=\"confirmation-email-logo\"\n                          exportparts=\"iiu__logo-input-textfield: nce__input-image-url\"\n                          imageUrl={this.confirmationEmail?.logo ?? ''}\n                        />\n                      )}\n                    </div>\n                  </div>\n                </div>\n                <div class=\"nylas-confirmation-email__row full-width-col\">\n                  <div class=\"subsection\">\n                    <h3>Email message</h3>\n                    <div class=\"input-container\">\n                      <label htmlFor=\"title\">\n                        Custom email title\n                        <span class=\"label-icon\">\n                          <tooltip-component>\n                            <info-icon slot=\"tooltip-icon\" />\n                            <span slot=\"tooltip-content\">An email title is a headline within the body of the email. This doesn&apos;t change the subject line.</span>\n                          </tooltip-component>\n                        </span>\n                      </label>\n                      <input-component\n                        name=\"confirmation-email-title\"\n                        maxLength={60}\n                        placeholder={`Booking confirmed ${organizerName ? `with ${organizerName}` : ''}`}\n                        defaultValue={this.confirmationEmail?.booking_confirmed?.title ?? ''}\n                      ></input-component>\n                    </div>\n                    <div class=\"input-container\">\n                      {/* <label htmlFor=\"title\">Email body</label> */}\n                      <textarea-component\n                        label=\"Additional info\"\n                        name=\"confirmation-email-body\"\n                        id=\"confirmation-email-body\"\n                        placeholder=\"Default body\"\n                        tooltip=\"Scheduler adds the content of the box to the email body.\"\n                        maxLength={500}\n                        defaultValue={this.confirmationEmail?.booking_confirmed?.body ?? ''}\n                      ></textarea-component>\n\n                      {/* <textarea\n                        id=\"description\"\n                        part=\"nrt__textarea\"\n                        name=\"confirmation-email-body\"\n                        placeholder='Default body'\n                        value={this.confirmationEmail?.booking_confirmed?.body ?? ''}\n                        maxlength=\"500\"\n                        rows={2}\n                        onInput={e => this.handleEmailBodyChange(e)}\n                      ></textarea> */}\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          ) : (\n            <div class=\"nylas-confirmation-email__summary\" part=\"nce__summary\">\n              <p>\n                <span class=\"summary-icon\">\n                  <person-clipboard-icon></person-clipboard-icon>\n                </span>\n                All host & guests\n              </p>\n              <p>\n                <span class=\"summary-icon\">\n                  <clock-icon></clock-icon>\n                </span>\n                Immediately on booking\n              </p>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nylas-confirmation-email2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-confirmation-email/nylas-confirmation-email.scss?tag=nylas-confirmation-email&encapsulation=shadow","src/components/scheduler-editor/nylas-confirmation-email/nylas-confirmation-email.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  @include default-css-variables;\n  width: inherit;\n}\n\n.nylas-confirmation-email {\n  width: inherit;\n  display: flex;\n  flex-direction: column;\n  margin: 1rem;\n  border-radius: var(--nylas-border-radius-2x);\n  border: 1px solid var(--nylas-base-200);\n  text-align: left;\n\n  .header {\n    padding: 1rem;\n    display: grid;\n    grid-template-columns: 1fr auto;\n    border-bottom: 1px solid var(--nylas-base-200);\n\n    h3 {\n      border-radius: var(--nylas-border-radius-2x);\n      margin: 0;\n      font-size: 1rem;\n      font-weight: 600;\n      line-height: 20px;\n      color: var(--nylas-base-900);\n      text-align: left;\n    }\n\n    p {\n      margin: 0.25rem 0 0 0;\n      font-size: 0.875rem;\n      font-weight: 400;\n      line-height: 20px;\n      color: var(--nylas-base-600);\n      text-align: left;\n    }\n\n    .confirmation-email-toggle {\n      display: flex;\n      gap: 24px;\n      align-items: center;\n\n      .chevron {\n        display: flex;\n        align-self: center;\n        cursor: pointer;\n\n        &:hover,\n        &:active {\n          color: var(--nylas-primary);\n        }\n\n        &.open {\n          transform: rotate(90deg);\n        }\n\n        &.closed {\n          transform: rotate(270deg);\n        }\n\n        &.disabled {\n          cursor: not-allowed;\n          color: var(--nylas-base-300);\n\n          &:hover {\n            color: var(--nylas-base-300);\n          }\n        }\n      }\n    }\n  }\n\n  .nylas-confirmation-email__body {\n    display: grid;\n    grid-template-columns: 1fr auto;\n    background-color: var(--nylas-base-25);\n    border-radius: var(--nylas-border-radius-2x);\n\n    @media #{$mobile} {\n      grid-template-columns: 1fr;\n    }\n\n    .nylas-confirmation-email__section {\n      padding: 1rem;\n      display: flex;\n      flex-direction: column;\n      gap: 1rem;\n      color: var(--nylas-base-800);\n\n      @media #{$mobile} {\n        border: none;\n      }\n\n      .nylas-confirmation-email__row {\n        display: grid;\n        grid-template-columns: 1fr auto;\n        align-items: center;\n        gap: 1rem;\n\n        &.full-width-col {\n          grid-template-columns: 1fr;\n          border-top: 1px solid var(--nylas-base-200);\n          padding-top: 1.25rem;\n          margin: 0.25rem 0;\n        }\n\n        label {\n          display: flex;\n          align-items: center;\n\n          span.required {\n            color: var(--nylas-error, #cc4841);\n          }\n\n          span.label-icon {\n            margin-left: 4px;\n\n            tooltip-component {\n              display: flex;\n            }\n          }\n        }\n\n        p {\n          margin: 0.25rem 0 0 0;\n          font-size: 1rem;\n          font-weight: 500;\n          line-height: 24px;\n          color: var(--nylas-base-900);\n        }\n\n        .company-logo-container {\n          display: flex;\n          gap: 32px;\n          width: 100%;\n\n          .input-container {\n            display: flex;\n            flex-direction: column;\n            flex: 1;\n          }\n\n          .company-logo {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: 200px;\n            height: 100px;\n            border: var(--nylas-base-200) solid 1px;\n            border-radius: var(--nylas-border-radius-2x);\n            overflow: hidden;\n            padding: 10px;\n          }\n\n          .company-logo img {\n            max-height: 100%;\n            max-width: 100%;\n            object-fit: contain;\n            object-position: center;\n          }\n        }\n\n        span.selected-value {\n          font-weight: 500;\n        }\n      }\n\n      .subsection {\n        display: flex;\n        flex-direction: column;\n        gap: 1rem;\n\n        h3 {\n          margin: 0;\n          font-size: 1rem;\n          font-weight: 600;\n          line-height: 20px;\n          color: var(--nylas-base-900);\n          text-align: left;\n        }\n\n        .input-container {\n          display: flex;\n          flex-direction: column;\n          gap: 0.25rem;\n\n          textarea {\n            padding: 12px 16px;\n            border-width: 1;\n            resize: vertical;\n            border-radius: 8px;\n            font-family: var(--nylas-font-family);\n            font-size: 16px;\n            line-height: 24px;\n            border: 1px solid var(--nylas-base-200);\n          }\n        }\n      }\n    }\n\n    .nylas-confirmation-email__preview {\n      width: 208px;\n      background: var(--nylas-base-25);\n      border-bottom-right-radius: var(--nylas-border-radius-2x);\n\n      @media #{$mobile} {\n        width: inherit;\n        border-bottom-left-radius: var(--nylas-border-radius-2x);\n      }\n\n      h4 {\n        font-size: 14px;\n        line-height: 24px;\n        color: var(--nylas-base-600);\n        font-family: var(--nylas-font-family);\n        font-weight: 500;\n        text-align: center;\n        margin: 0.75rem 0;\n      }\n\n      .preview-container {\n        padding: 0 2rem 1rem;\n\n        .slot {\n          background-color: transparent;\n          border-top: 1px solid var(--nylas-base-300);\n\n          &.active {\n            background-color: var(--nylas-base-100);\n          }\n\n          &:last-of-type {\n            border-bottom: 1px solid var(--nylas-base-300);\n          }\n        }\n\n        .event-slot {\n          background-color: var(--nylas-base-600);\n          border-top: 1px solid var(--nylas-base-300);\n        }\n      }\n    }\n\n    span.error-message {\n      color: var(--nylas-error);\n    }\n\n    span.help-text {\n      margin: 0.25rem 0 0 0;\n      font-size: 0.875rem;\n      font-weight: 400;\n      line-height: 20px;\n      color: var(--nylas-base-600);\n      text-align: left;\n    }\n  }\n\n  .nylas-confirmation-email__summary {\n    padding: 0.75rem 1rem;\n    display: grid;\n    grid-template-columns: auto 1fr;\n    column-gap: 1rem;\n\n    p {\n      margin: 0;\n      display: flex;\n      align-items: center;\n      column-gap: 4px;\n      font-size: 0.875rem;\n      font-weight: 400;\n      line-height: 21px;\n      color: var(--nylas-base-600);\n      text-align: left;\n\n      span.summary-icon {\n        display: flex;\n        justify-content: center;\n        min-width: 20px;\n      }\n    }\n  }\n}\n\nsp-divider {\n  background-color: var(--nylas-base-200);\n  height: 1px;\n  margin: 0.25rem 0;\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug, sanitize } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration, EmailTemplate, Participant } from '@nylas/core';\n\n/**\n * The `nylas-confirmation-email` component is a UI component that allows users to set buffer time before and after an event.\n *\n * @part nce__tab-heading - The nylas-confirmation-email main tab heading\n * @part nce - The nylas-confirmation-email container\n * @part nce__header - The header of the event communication section\n * @part nce__body - The body of the event communication section\n * @part nce__confirmation-email-toggle--container - The confirmation email drawer toggle container\n * @part nce__input-image-url - The input image URL container\n * @part nce__summary - The confirmation card summary container\n */\n@Component({\n  tag: 'nylas-confirmation-email',\n  styleUrl: 'nylas-confirmation-email.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasConfirmationEmail {\n  @Element() host!: HTMLNylasConfirmationEmailElement;\n  /**\n   * @standalone\n   * The selected config\n   */\n  @Prop() selectedConfiguration?: Configuration;\n  /**\n   * @standalone\n   * The confirmation email template data to display\n   */\n  @Prop() confirmationEmailTemplate: EmailTemplate = {} as EmailTemplate;\n  /**\n   * @standalone\n   * List of participants\n   */\n  @Prop() participants: Participant[] = [];\n  /**\n   * @standalone\n   * The name of the component\n   */\n  @Prop() name: string = 'confirmation-email-template';\n  /**\n   * Is the confirmation email card open\n   */\n  @Prop() isOpen: boolean = false;\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The confirmation email template state.\n   */\n  @State() confirmationEmail!: EmailTemplate;\n\n  /**\n   * The internal state to store the isOpen state.\n   */\n  @State() isConfirmationEmailOpen: boolean = this.isOpen;\n\n  /**\n   * The internal state to store the participants.\n   */\n  @State() participantsState: Participant[] = this.participants;\n\n  /**\n   * This event is fired when the email reminders change.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n    valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n  }>;\n\n  // Lifecycle methods\n  connectedCallback() {\n    debug('nylas-confirmation-email', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-confirmation-email', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-confirmation-email', 'componentWillLoad');\n    // See comment in the @Watch('name') decorator for more information.\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-confirmation-email', 'componentDidLoad');\n    if (this.selectedConfiguration) {\n      this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n    } else {\n      this.confirmationEmail = this.confirmationEmailTemplate;\n      this.isConfirmationEmailOpen = this.isOpen;\n      this.participantsState = this.participants;\n    }\n  }\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-confirmation-email', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('selectedConfiguration')\n  selectedConfigurationChangedHandler(newValue: Configuration) {\n    debug('nylas-confirmation-email', 'selectedConfigurationChangedHandler', newValue);\n    this.confirmationEmail = newValue?.scheduler?.email_template || this.confirmationEmailTemplate;\n    this.isConfirmationEmailOpen = !newValue?.event_booking?.reminders?.length;\n    this.participantsState = newValue?.participants || this.participants;\n  }\n\n  @Listen('nylasFormInputChanged')\n  async nylasFormInputChangeHandler(event: CustomEvent<{ value: string; name: string; type?: string }>) {\n    const { name, value } = event.detail;\n    const type = event.detail?.type;\n    if (name === 'confirmation-email-title') {\n      this.confirmationEmail = { ...this.confirmationEmail, booking_confirmed: { ...(this.confirmationEmail?.booking_confirmed || {}), title: value } };\n      this.internals.setFormValue(JSON.stringify(this.confirmationEmail), this.name);\n      this.valueChanged.emit({ value: JSON.stringify(this.confirmationEmail), name: this.name });\n    } else if (name === 'confirmation-email-body' && type === 'multi_line_text') {\n      this.handleEmailBodyChange(event);\n    }\n  }\n\n  @Listen('valueChanged')\n  valueChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('nylas-confirmation-email', 'valueChangedHandler', event.detail);\n    const { value, name } = event.detail;\n\n    if (name === 'confirmation-email-logo') {\n      this.confirmationEmail = { ...this.confirmationEmail, logo: value };\n      this.valueChanged.emit({ value: JSON.stringify(this.confirmationEmail), name: this.name });\n      if (typeof this.internals.setValidity === 'function' && typeof this.internals.setFormValue === 'function') {\n        this.internals.setFormValue(JSON.stringify(this.confirmationEmail), this.name);\n        this.internals.setValidity({});\n      }\n    }\n  }\n\n  @Listen('nylasFormInputImageUrlInvalid')\n  async nylasFormInputImageUrlInvalidHandler(event: CustomEvent<{ value: string; name: string }>) {\n    const { value, name } = event.detail;\n    if (name === 'confirmation-email-logo' && typeof this.internals.setValidity === 'function') {\n      this.internals.setValidity({ customError: true }, value || 'Invalid image URL.');\n    }\n  }\n\n  updateConfirmationFormValue() {\n    debug('nylas-confirmation-email', 'updateConfirmationFormValue');\n    this.internals.setFormValue(JSON.stringify(this.confirmationEmail), this.name);\n    this.valueChanged.emit({ value: JSON.stringify(this.confirmationEmail), name: this.name });\n  }\n\n  toggleConfirmationEmail() {\n    this.isConfirmationEmailOpen = !this.isConfirmationEmailOpen;\n  }\n\n  handleEmailBodyChange(event) {\n    const value = sanitize(event.detail.value);\n    this.confirmationEmail = { ...this.confirmationEmail, booking_confirmed: { ...(this.confirmationEmail?.booking_confirmed || {}), body: value } };\n    this.internals.setFormValue(JSON.stringify(this.confirmationEmail), this.name);\n    this.valueChanged.emit({ value: JSON.stringify(this.confirmationEmail), name: this.name });\n  }\n\n  @RegisterComponent<NylasConfirmationEmail, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-confirmation-email',\n    stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n    eventToProps: {\n      valueChanged: async (\n        event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n        _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n      ) => {\n        const { valueChanged } = event.detail;\n        // If a handler is passed, call it.\n        if (valueChanged) {\n          valueChanged(event);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    const organizer = this.participantsState.find(p => p.is_organizer);\n    const organizerName = organizer?.name || organizer?.email;\n\n    return (\n      <Host>\n        <div class=\"nylas-confirmation-email\" part=\"nce\">\n          <div class=\"header\" part=\"nce__header\">\n            <div>\n              <h3>{this.confirmationEmail?.booking_confirmed?.title ?? `Booking confirmed with ${organizerName ? ` ${organizerName}` : ''}`}</h3>\n              <p>Booking confirmation email</p>\n            </div>\n            {this.isConfirmationEmailOpen ? (\n              <div class=\"confirmation-email-toggle\" part=\"nce__confirmation-email-toggle--container\">\n                <span class={`chevron ${this.isConfirmationEmailOpen ? 'open' : 'closed'} `} onClick={() => this.toggleConfirmationEmail()}>\n                  <chevron-icon width=\"24\" height=\"24\" />\n                </span>\n              </div>\n            ) : (\n              <button-component\n                variant={'basic'}\n                clickHandler={event => {\n                  event.preventDefault();\n                  this.toggleConfirmationEmail();\n                }}\n              >\n                <edit-icon width=\"16\" height=\"16\"></edit-icon>\n                Edit\n              </button-component>\n            )}\n          </div>\n\n          {this.isConfirmationEmailOpen ? (\n            <div class=\"nylas-confirmation-email__body\" part=\"nce__body\">\n              <div class=\"nylas-confirmation-email__section\">\n                <div class=\"nylas-confirmation-email__row\">\n                  <label>\n                    Send confirmation email\n                    <span class=\"label-icon\">\n                      <tooltip-component>\n                        <info-icon slot=\"tooltip-icon\" />\n                        <span slot=\"tooltip-content\">You and your guests will receive a confirmation email immediately upon booking.</span>\n                      </tooltip-component>\n                    </span>\n                  </label>\n                  <span class=\"selected-value\">Immediately upon booking</span>\n                </div>\n                <div class=\"nylas-confirmation-email__row\">\n                  <div class=\"subsection\">\n                    <div class=\"input-container\">\n                      <label>\n                        Company logo URL\n                        <span class=\"label-icon\">\n                          <tooltip-component>\n                            <info-icon slot=\"tooltip-icon\" />\n                            <span slot=\"tooltip-content\">\n                              This logo appears in the booking confirmation email. The URL must be publicly accessible. The image will be scaled down to a max size of 200px x\n                              100px.\n                            </span>\n                          </tooltip-component>\n                        </span>\n                      </label>\n\n                      {this.confirmationEmail && (\n                        <input-image-url\n                          name=\"confirmation-email-logo\"\n                          exportparts=\"iiu__logo-input-textfield: nce__input-image-url\"\n                          imageUrl={this.confirmationEmail?.logo ?? ''}\n                        />\n                      )}\n                    </div>\n                  </div>\n                </div>\n                <div class=\"nylas-confirmation-email__row full-width-col\">\n                  <div class=\"subsection\">\n                    <h3>Email message</h3>\n                    <div class=\"input-container\">\n                      <label htmlFor=\"title\">\n                        Custom email title\n                        <span class=\"label-icon\">\n                          <tooltip-component>\n                            <info-icon slot=\"tooltip-icon\" />\n                            <span slot=\"tooltip-content\">An email title is a headline within the body of the email. This doesn&apos;t change the subject line.</span>\n                          </tooltip-component>\n                        </span>\n                      </label>\n                      <input-component\n                        name=\"confirmation-email-title\"\n                        maxLength={60}\n                        placeholder={`Booking confirmed ${organizerName ? `with ${organizerName}` : ''}`}\n                        defaultValue={this.confirmationEmail?.booking_confirmed?.title ?? ''}\n                      ></input-component>\n                    </div>\n                    <div class=\"input-container\">\n                      {/* <label htmlFor=\"title\">Email body</label> */}\n                      <textarea-component\n                        label=\"Additional info\"\n                        name=\"confirmation-email-body\"\n                        id=\"confirmation-email-body\"\n                        placeholder=\"Default body\"\n                        tooltip=\"Scheduler adds the content of the box to the email body.\"\n                        maxLength={500}\n                        defaultValue={this.confirmationEmail?.booking_confirmed?.body ?? ''}\n                      ></textarea-component>\n\n                      {/* <textarea\n                        id=\"description\"\n                        part=\"nrt__textarea\"\n                        name=\"confirmation-email-body\"\n                        placeholder='Default body'\n                        value={this.confirmationEmail?.booking_confirmed?.body ?? ''}\n                        maxlength=\"500\"\n                        rows={2}\n                        onInput={e => this.handleEmailBodyChange(e)}\n                      ></textarea> */}\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          ) : (\n            <div class=\"nylas-confirmation-email__summary\" part=\"nce__summary\">\n              <p>\n                <span class=\"summary-icon\">\n                  <person-clipboard-icon></person-clipboard-icon>\n                </span>\n                All host & guests\n              </p>\n              <p>\n                <span class=\"summary-icon\">\n                  <clock-icon></clock-icon>\n                </span>\n                Immediately on booking\n              </p>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nylas-event-duration2.js

@@ -68,7 +68,6 @@ const NylasEventDuration = proxyCustomElement(class NylasEventDuration extends H
     componentWillLoad() {
         debug('nylas-event-duration', 'componentWillLoad');
         this.host.setAttribute('name', this.name);
-        this.setDurationMintueOptions();
     }
     componentDidLoad() {
         debug('nylas-event-duration', 'componentDidLoad');
@@ -78,7 +77,10 @@ const NylasEventDuration = proxyCustomElement(class NylasEventDuration extends H
         this.duration = this.duration ? this.duration : this.eventDurationMinutes ? (this.eventDurationMinutes >= 60 ? this.eventDurationMinutes / 60 : this.eventDurationMinutes) : 30;
         this.durationMinutes = this.durationMinutes ? this.durationMinutes : this.duration ? this.duration : 30;
         this.durationIncrement = this.durationIncrement ? this.durationIncrement : this.duration >= 60 ? 60 : 1;
-        this.internals.setFormValue(this.durationMinutes.toString(), 'duration');
+        this.setDurationMintueOptions();
+        if (typeof this.internals.setFormValue === 'function') {
+            this.internals.setFormValue(this.durationMinutes.toString(), 'duration');
+        }
     }
     disconnectedCallback() {
         debug('nylas-event-duration', 'disconnectedCallback');
@@ -128,7 +130,7 @@ const NylasEventDuration = proxyCustomElement(class NylasEventDuration extends H
             { value: 1, label: 'minute' },
             { value: 60, label: 'hour' },
         ];
-        return (h(Host, { key: 'e63530398b7b2231436947da8c9e63c3c7bd696a' }, h("div", { key: '9ccca25a4322edaedafa53a2bd8ae2baf48b4f1e', class: "nylas-event-duration", part: "ned" }, h("label", { key: 'cd5562d2516c1f37eeb0b3e074493c671628ef4b', htmlFor: "duration" }, "Event duration", h("span", { key: 'ef36340fb220f380a9913ad5025e6600ce6e8f17', class: "required" }, "*")), h("div", { key: 'eddeda40d89ac770f20226605f3fedce00afe060', class: "nylas-event-duration__wrapper" }, h("input-dropdown", { key: 'b087fff0f15cfcaf5c89c0566941aa45c8e89d54', name: 'event-duration', options: this.durationMinutesOptions, inputValue: this.duration.toString(), exportparts: "id_dropdown: ned__input_dropdown, id_dropdown-input: ned__input_dropdown-input, id_dropdown-content: ned__input_dropdown-content", defaultInputOption: this.durationMinutesOptions.find(i => i.value == this.duration) }), this.durationIncrement && (h("select-dropdown", { name: 'event-duration', options: durationOptions, pluralizedLabel: this.duration > 1 ? 's' : '', exportparts: "sd_dropdown: ned__dropdown, sd_dropdown-button: ned__dropdown-button, sd_dropdown-content: ned__dropdown-content", defaultSelectedOption: durationOptions.find(i => i.value == this.durationIncrement), withSearch: false }))))));
+        return (h(Host, { key: 'f6b60528b9c3f2978ac12beae9bf049a9b90fec5' }, h("div", { key: 'f7c778d981fa1d33ceed820d500e6820a4f1223c', class: "nylas-event-duration", part: "ned" }, h("label", { key: 'f461dcfeda616f50820d6cdacb5dfded22ec7aff', htmlFor: "duration" }, "Event duration", h("span", { key: '086d2458ad14f00f718fb9106c45d63576c9f734', class: "required" }, "*")), h("div", { key: 'cf27800dec77fbe74c9428de92fa042a419ddb25', class: "nylas-event-duration__wrapper" }, h("input-dropdown", { key: '06ed64927a69ca96bb9f9cc5cfede6d55c310598', name: 'event-duration', options: this.durationMinutesOptions, inputValue: this.duration.toString(), exportparts: "id_dropdown: ned__input_dropdown, id_dropdown-input: ned__input_dropdown-input, id_dropdown-content: ned__input_dropdown-content", defaultInputOption: this.durationMinutesOptions.find(i => i.value == this.duration) }), this.durationIncrement && (h("select-dropdown", { name: 'event-duration', options: durationOptions, pluralizedLabel: this.duration > 1 ? 's' : '', exportparts: "sd_dropdown: ned__dropdown, sd_dropdown-button: ned__dropdown-button, sd_dropdown-content: ned__dropdown-content", defaultSelectedOption: durationOptions.find(i => i.value == this.durationIncrement), withSearch: false }))))));
     }
     static get formAssociated() { return true; }
     get host() { return this; }

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

@@ -1 +1 @@
-{"file":"nylas-event-duration2.js","mappings":";;;;;;;;AAAA,MAAM,qBAAqB,GAAG,42DAA42D,CAAC;AAC34D,iCAAe,qBAAqB;;;;;;;;;;;;;;;;MCuBvB,kBAAkB;;;;;;;;oBAeN,UAAU;;wBAUL,IAAI,CAAC,oBAAoB,IAAI,IAAI,CAAC,oBAAoB,IAAI,EAAE,GAAG,IAAI,CAAC,oBAAoB,GAAG,EAAE,GAAG,IAAI,CAAC,oBAAoB,IAAI,EAAE;;;sCAYzH;YAChC,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE;YAC1B,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE;YAC1B,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE;YAC1B,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE;SAC3B;;IAaD,yBAAyB,CAAC,QAAgB;QACxC,KAAK,CAAC,sBAAsB,EAAE,2BAA2B,EAAE,QAAQ,CAAC,CAAC;QACrE,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;KAC1C;IAGD,mCAAmC,CAAC,MAAqB;QACvD,MAAM,cAAc,GAAG,MAAM,EAAE,YAAY,EAAE,gBAAgB,CAAC;QAC9D,IAAI,cAAc,EAAE;YAClB,IAAI,CAAC,QAAQ,GAAG,cAAc,IAAI,EAAE,GAAG,cAAc,GAAG,EAAE,GAAG,cAAc,CAAC;YAC5E,IAAI,CAAC,eAAe,GAAG,cAAc,GAAG,cAAc,GAAG,EAAE,CAAC;YAC5D,IAAI,CAAC,iBAAiB,GAAG,cAAc,IAAI,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;SACxD;KACF;IAGD,6BAA6B,CAAC,QAAgB,EAAE,QAAgB;QAC9D,KAAK,CAAC,sBAAsB,EAAE,+BAA+B,EAAE,QAAQ,CAAC,CAAC;QACzE,IAAI,QAAQ,KAAK,QAAQ,EAAE;YACzB,OAAO;SACR;QACD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,QAAQ,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;KACzE;IAUD,iBAAiB;QACf,KAAK,CAAC,sBAAsB,EAAE,mBAAmB,CAAC,CAAC;KACpD;IAED,iBAAiB;QACf,KAAK,CAAC,sBAAsB,EAAE,mBAAmB,CAAC,CAAC;QACnD,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;QAC1C,IAAI,CAAC,wBAAwB,EAAE,CAAC;KACjC;IAED,gBAAgB;QACd,KAAK,CAAC,sBAAsB,EAAE,kBAAkB,CAAC,CAAC;QAClD,IAAI,IAAI,CAAC,qBAAqB,EAAE;YAC9B,IAAI,CAAC,mCAAmC,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;SACtE;QACD,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,oBAAoB,IAAI,IAAI,CAAC,oBAAoB,IAAI,EAAE,GAAG,IAAI,CAAC,oBAAoB,GAAG,EAAE,GAAG,IAAI,CAAC,oBAAoB,IAAI,EAAE,CAAC;QAChL,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;QACxG,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;QACxG,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,EAAE,UAAU,CAAC,CAAC;KAC1E;IAED,oBAAoB;QAClB,KAAK,CAAC,sBAAsB,EAAE,sBAAsB,CAAC,CAAC;KACvD;IAED,wBAAwB;QACtB,IAAI,IAAI,CAAC,iBAAiB,KAAK,CAAC,EAAE;YAChC,IAAI,CAAC,sBAAsB,GAAG;gBAC5B,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE;gBAC1B,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE;gBAC1B,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE;gBAC1B,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE;aAC3B,CAAC;SACH;aAAM;YACL,IAAI,CAAC,sBAAsB,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,CAAC,CAAC,CAAC;SACnH;QACD,OAAO,IAAI,CAAC,sBAAsB,CAAC;KACpC;IAED,YAAY,CAAC,KAAK;QAChB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QACnC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,iBAAiB,CAAC;QAC9D,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;KACzE;IAGD,+BAA+B,CAAC,KAAmD;QACjF,KAAK,CAAC,uBAAuB,EAAE,iCAAiC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;QAChF,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;QAC/B,IAAI,CAAC,iBAAiB,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;QACzC,IAAI,IAAI,CAAC,iBAAiB,KAAK,CAAC,EAAE;YAChC,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;SACpB;aAAM;YACL,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;SACnB;QACD,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAChC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,iBAAiB,CAAC;QAC9D,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,EAAE,UAAU,CAAC,CAAC;KAC1E;IAGD,yBAAyB,CAAC,KAAmD;QAC3E,KAAK,CAAC,uBAAuB,EAAE,2BAA2B,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;QAC1E,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;QAC/B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,iBAAiB,CAAC;QAC9D,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;KACzE;IAQD,MAAM;QACJ,MAAM,eAAe,GAAG;YACtB,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE;YAC7B,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;SAC7B,CAAC;QAEF,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAC,KAAK,IAC1C,8DAAO,OAAO,EAAC,UAAU,sBACT,6DAAM,KAAK,EAAC,UAAU,QAAS,CACvC,EACR,4DAAK,KAAK,EAAC,+BAA+B,IACxC,uEACE,IAAI,EAAE,gBAAgB,EACtB,OAAO,EAAE,IAAI,CAAC,sBAAsB,EACpC,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,EACpC,WAAW,EAAC,kIAAkI,EAC9I,kBAAkB,EAAE,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,CAAC,GACnF,EACD,IAAI,CAAC,iBAAiB,KACrB,uBACE,IAAI,EAAE,gBAAgB,EACtB,OAAO,EAAE,eAAe,EACxB,eAAe,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAG,GAAG,GAAG,EAAE,EAC7C,WAAW,EAAC,kHAAkH,EAC9H,qBAAqB,EAAE,eAAe,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,IAAI,IAAI,CAAC,iBAAiB,CAAC,EACnF,UAAU,EAAE,KAAK,GACjB,CACH,CACG,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;AAlCD;IANC,iBAAiB,CAAwG;QACxH,IAAI,EAAE,sBAAsB;QAC5B,YAAY,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC,uCAAuC,EAAE,uBAAuB,CAAC,CAAC,CAAC;QAC3F,YAAY,EAAE,EAAE;QAChB,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;gDAmCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/scheduler-editor/nylas-event-duration/nylas-event-duration.scss?tag=nylas-event-duration&encapsulation=shadow","src/components/scheduler-editor/nylas-event-duration/nylas-event-duration.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  @include default-css-variables;\n}\n\n.nylas-event-duration {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n\n  label {\n    display: flex;\n    align-items: center;\n    color: var(--nylas-base-800);\n    font-size: 16px;\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.nylas-event-duration__wrapper {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  input {\n    padding: 12px 16px;\n    border-width: 1;\n    border-radius: 8px;\n    border: 1px solid var(--nylas-base-200);\n    font-family: var(--nylas-font-family);\n    font-size: 16px;\n    line-height: 24px;\n    width: 48px;\n  }\n  input-dropdown::part(id_dropdown-input) {\n    border: 1px solid var(--nylas-base-200);\n    border-radius: var(--nylas-border-radius-2x);\n    padding: 14px 16px;\n    width: 50px;\n  }\n  input-dropdown::part(id_dropdown-content) {\n    width: 100%;\n    min-width: unset;\n    height: 200px;\n  }\n\n  select-dropdown {\n    width: 120px;\n    @media #{$mobile} {\n      width: 100%;\n    }\n  }\n\n  select-dropdown::part(sd_dropdown-button) {\n    border: 1px solid var(--nylas-base-200);\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, Listen, State, h, Element, Prop, Watch, Event, EventEmitter } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration } from '@nylas/core';\n\n/**\n * The `nylas-event-duration` component is a form input for the duration of an event.\n *\n * @part ned - The event duration container\n * @part ned__dropdown - The dropdown container for the duration increment\n * @part ned__dropdown-button - The dropdown button for the duration increment\n * @part ned__dropdown-content - The dropdown content for the duration increment\n * @part ned__input_dropdown - The input dropdown container for the duration minutes\n * @part ned__input_dropdown-input - The input for the duration minutes\n * @part ned__input_dropdown-content - The dropdown content for the input duration minutes\n */\n@Component({\n  tag: 'nylas-event-duration',\n  styleUrl: 'nylas-event-duration.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasEventDuration {\n  /**\n   * The host element <nylas-event-duration>\n   */\n  @Element() host!: HTMLElement;\n  /**\n   * @standalone\n   * The selected config\n   */\n  @Prop() selectedConfiguration?: Configuration;\n\n  /**\n   * @standalone\n   * The name of the event duration. Default is 'duration'.\n   */\n  @Prop() name: string = 'duration';\n  /**\n   * @standalone\n   * The event duration in minutes as set in the configuration.\n   */\n  @Prop() eventDurationMinutes?: number;\n\n  /**\n   * The selected event duration state. This defaults to the event duration from the configuration or 30 minutes.\n   */\n  @State() duration: number = this.eventDurationMinutes ? (this.eventDurationMinutes >= 60 ? this.eventDurationMinutes / 60 : this.eventDurationMinutes) : 30;\n  /**\n   * The duration in minutes. This defaults to the event duration from the configuration or 30 minutes.\n   */\n  @State() durationMinutes!: number;\n  /**\n   * The duration increment. This defaults to minute(s).\n   */\n  @State() durationIncrement!: number;\n  /**\n   * The durationMinutesOptions for the dropdown.\n   */\n  @State() durationMinutesOptions = [\n    { value: 15, label: '15' },\n    { value: 30, label: '30' },\n    { value: 45, label: '45' },\n    { value: 60, label: '60' },\n  ];\n\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-event-duration', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('selectedConfiguration')\n  selectedConfigurationChangedHandler(newVal: Configuration) {\n    const configDuration = newVal?.availability?.duration_minutes;\n    if (configDuration) {\n      this.duration = configDuration >= 60 ? configDuration / 60 : configDuration;\n      this.durationMinutes = configDuration ? configDuration : 30;\n      this.durationIncrement = configDuration >= 60 ? 60 : 1;\n    }\n  }\n\n  @Watch('durationMinutes')\n  durationMinutesChangedHandler(newValue: number, oldValue: number) {\n    debug('nylas-event-duration', 'durationMinutesChangedHandler', newValue);\n    if (newValue === oldValue) {\n      return;\n    }\n    this.valueChanged.emit({ value: newValue.toString(), name: this.name });\n  }\n\n  /**\n   * Event emitted when the event duration changes.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n  }>;\n\n  connectedCallback() {\n    debug('nylas-event-duration', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-event-duration', 'componentWillLoad');\n    this.host.setAttribute('name', this.name);\n    this.setDurationMintueOptions();\n  }\n\n  componentDidLoad() {\n    debug('nylas-event-duration', 'componentDidLoad');\n    if (this.selectedConfiguration) {\n      this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n    }\n    this.duration = this.duration ? this.duration : this.eventDurationMinutes ? (this.eventDurationMinutes >= 60 ? this.eventDurationMinutes / 60 : this.eventDurationMinutes) : 30;\n    this.durationMinutes = this.durationMinutes ? this.durationMinutes : this.duration ? this.duration : 30;\n    this.durationIncrement = this.durationIncrement ? this.durationIncrement : this.duration >= 60 ? 60 : 1;\n    this.internals.setFormValue(this.durationMinutes.toString(), 'duration');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-event-duration', 'disconnectedCallback');\n  }\n\n  setDurationMintueOptions() {\n    if (this.durationIncrement === 1) {\n      this.durationMinutesOptions = [\n        { value: 15, label: '15' },\n        { value: 30, label: '30' },\n        { value: 45, label: '45' },\n        { value: 60, label: '60' },\n      ];\n    } else {\n      this.durationMinutesOptions = Array.from({ length: 23 }, (_, i) => ({ value: i + 1, label: (i + 1).toString() }));\n    }\n    return this.durationMinutesOptions;\n  }\n\n  handleChange(event) {\n    this.duration = event.target.value;\n    this.durationMinutes = this.duration * this.durationIncrement;\n    this.internals.setFormValue(this.durationMinutes.toString(), this.name);\n  }\n\n  @Listen('nylasFormDropdownChanged')\n  nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('nylas-calendar-picker', 'nylasFormDropdownChangedHandler', event.detail);\n    const { value } = event.detail;\n    this.durationIncrement = parseInt(value);\n    if (this.durationIncrement === 1) {\n      this.duration = 60;\n    } else {\n      this.duration = 1;\n    }\n    this.setDurationMintueOptions();\n    this.durationMinutes = this.duration * this.durationIncrement;\n    this.internals.setFormValue(this.durationMinutes.toString(), 'duration');\n  }\n\n  @Listen('inputOptionChanged')\n  inputOptionChangedHandler(event: CustomEvent<{ value: number; name: string }>) {\n    debug('nylas-calendar-picker', 'inputOptionChangedHandler', event.detail);\n    const { value } = event.detail;\n    this.duration = value;\n    this.durationMinutes = this.duration * this.durationIncrement;\n    this.internals.setFormValue(this.durationMinutes.toString(), this.name);\n  }\n\n  @RegisterComponent<NylasEventDuration, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-event-duration',\n    stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    const durationOptions = [\n      { value: 1, label: 'minute' },\n      { value: 60, label: 'hour' },\n    ];\n\n    return (\n      <Host>\n        <div class=\"nylas-event-duration\" part=\"ned\">\n          <label htmlFor=\"duration\">\n            Event duration<span class=\"required\">*</span>\n          </label>\n          <div class=\"nylas-event-duration__wrapper\">\n            <input-dropdown\n              name={'event-duration'}\n              options={this.durationMinutesOptions}\n              inputValue={this.duration.toString()}\n              exportparts=\"id_dropdown: ned__input_dropdown, id_dropdown-input: ned__input_dropdown-input, id_dropdown-content: ned__input_dropdown-content\"\n              defaultInputOption={this.durationMinutesOptions.find(i => i.value == this.duration)}\n            />\n            {this.durationIncrement && (\n              <select-dropdown\n                name={'event-duration'}\n                options={durationOptions}\n                pluralizedLabel={this.duration > 1 ? 's' : ''}\n                exportparts=\"sd_dropdown: ned__dropdown, sd_dropdown-button: ned__dropdown-button, sd_dropdown-content: ned__dropdown-content\"\n                defaultSelectedOption={durationOptions.find(i => i.value == this.durationIncrement)}\n                withSearch={false}\n              />\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nylas-event-duration2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-event-duration/nylas-event-duration.scss?tag=nylas-event-duration&encapsulation=shadow","src/components/scheduler-editor/nylas-event-duration/nylas-event-duration.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  @include default-css-variables;\n}\n\n.nylas-event-duration {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n\n  label {\n    display: flex;\n    align-items: center;\n    color: var(--nylas-base-800);\n    font-size: 16px;\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.nylas-event-duration__wrapper {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  input {\n    padding: 12px 16px;\n    border-width: 1;\n    border-radius: 8px;\n    border: 1px solid var(--nylas-base-200);\n    font-family: var(--nylas-font-family);\n    font-size: 16px;\n    line-height: 24px;\n    width: 48px;\n  }\n  input-dropdown::part(id_dropdown-input) {\n    border: 1px solid var(--nylas-base-200);\n    border-radius: var(--nylas-border-radius-2x);\n    padding: 14px 16px;\n    width: 50px;\n  }\n  input-dropdown::part(id_dropdown-content) {\n    width: 100%;\n    min-width: unset;\n    height: 200px;\n  }\n\n  select-dropdown {\n    width: 120px;\n    @media #{$mobile} {\n      width: 100%;\n    }\n  }\n\n  select-dropdown::part(sd_dropdown-button) {\n    border: 1px solid var(--nylas-base-200);\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, Listen, State, h, Element, Prop, Watch, Event, EventEmitter } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration } from '@nylas/core';\n\n/**\n * The `nylas-event-duration` component is a form input for the duration of an event.\n *\n * @part ned - The event duration container\n * @part ned__dropdown - The dropdown container for the duration increment\n * @part ned__dropdown-button - The dropdown button for the duration increment\n * @part ned__dropdown-content - The dropdown content for the duration increment\n * @part ned__input_dropdown - The input dropdown container for the duration minutes\n * @part ned__input_dropdown-input - The input for the duration minutes\n * @part ned__input_dropdown-content - The dropdown content for the input duration minutes\n */\n@Component({\n  tag: 'nylas-event-duration',\n  styleUrl: 'nylas-event-duration.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasEventDuration {\n  /**\n   * The host element <nylas-event-duration>\n   */\n  @Element() host!: HTMLElement;\n  /**\n   * @standalone\n   * The selected config\n   */\n  @Prop() selectedConfiguration?: Configuration;\n\n  /**\n   * @standalone\n   * The name of the event duration. Default is 'duration'.\n   */\n  @Prop() name: string = 'duration';\n  /**\n   * @standalone\n   * The event duration in minutes as set in the configuration.\n   */\n  @Prop() eventDurationMinutes?: number;\n\n  /**\n   * The selected event duration state. This defaults to the event duration from the configuration or 30 minutes.\n   */\n  @State() duration: number = this.eventDurationMinutes ? (this.eventDurationMinutes >= 60 ? this.eventDurationMinutes / 60 : this.eventDurationMinutes) : 30;\n  /**\n   * The duration in minutes. This defaults to the event duration from the configuration or 30 minutes.\n   */\n  @State() durationMinutes!: number;\n  /**\n   * The duration increment. This defaults to minute(s).\n   */\n  @State() durationIncrement!: number;\n  /**\n   * The durationMinutesOptions for the dropdown.\n   */\n  @State() durationMinutesOptions = [\n    { value: 15, label: '15' },\n    { value: 30, label: '30' },\n    { value: 45, label: '45' },\n    { value: 60, label: '60' },\n  ];\n\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-event-duration', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('selectedConfiguration')\n  selectedConfigurationChangedHandler(newVal: Configuration) {\n    const configDuration = newVal?.availability?.duration_minutes;\n    if (configDuration) {\n      this.duration = configDuration >= 60 ? configDuration / 60 : configDuration;\n      this.durationMinutes = configDuration ? configDuration : 30;\n      this.durationIncrement = configDuration >= 60 ? 60 : 1;\n    }\n  }\n\n  @Watch('durationMinutes')\n  durationMinutesChangedHandler(newValue: number, oldValue: number) {\n    debug('nylas-event-duration', 'durationMinutesChangedHandler', newValue);\n    if (newValue === oldValue) {\n      return;\n    }\n    this.valueChanged.emit({ value: newValue.toString(), name: this.name });\n  }\n\n  /**\n   * Event emitted when the event duration changes.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n  }>;\n\n  connectedCallback() {\n    debug('nylas-event-duration', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-event-duration', 'componentWillLoad');\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-event-duration', 'componentDidLoad');\n    if (this.selectedConfiguration) {\n      this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n    }\n    this.duration = this.duration ? this.duration : this.eventDurationMinutes ? (this.eventDurationMinutes >= 60 ? this.eventDurationMinutes / 60 : this.eventDurationMinutes) : 30;\n    this.durationMinutes = this.durationMinutes ? this.durationMinutes : this.duration ? this.duration : 30;\n    this.durationIncrement = this.durationIncrement ? this.durationIncrement : this.duration >= 60 ? 60 : 1;\n    this.setDurationMintueOptions();\n    if (typeof this.internals.setFormValue === 'function') {\n      this.internals.setFormValue(this.durationMinutes.toString(), 'duration');\n    }\n  }\n\n  disconnectedCallback() {\n    debug('nylas-event-duration', 'disconnectedCallback');\n  }\n\n  setDurationMintueOptions() {\n    if (this.durationIncrement === 1) {\n      this.durationMinutesOptions = [\n        { value: 15, label: '15' },\n        { value: 30, label: '30' },\n        { value: 45, label: '45' },\n        { value: 60, label: '60' },\n      ];\n    } else {\n      this.durationMinutesOptions = Array.from({ length: 23 }, (_, i) => ({ value: i + 1, label: (i + 1).toString() }));\n    }\n    return this.durationMinutesOptions;\n  }\n\n  handleChange(event) {\n    this.duration = event.target.value;\n    this.durationMinutes = this.duration * this.durationIncrement;\n    this.internals.setFormValue(this.durationMinutes.toString(), this.name);\n  }\n\n  @Listen('nylasFormDropdownChanged')\n  nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('nylas-calendar-picker', 'nylasFormDropdownChangedHandler', event.detail);\n    const { value } = event.detail;\n    this.durationIncrement = parseInt(value);\n    if (this.durationIncrement === 1) {\n      this.duration = 60;\n    } else {\n      this.duration = 1;\n    }\n    this.setDurationMintueOptions();\n    this.durationMinutes = this.duration * this.durationIncrement;\n    this.internals.setFormValue(this.durationMinutes.toString(), 'duration');\n  }\n\n  @Listen('inputOptionChanged')\n  inputOptionChangedHandler(event: CustomEvent<{ value: number; name: string }>) {\n    debug('nylas-calendar-picker', 'inputOptionChangedHandler', event.detail);\n    const { value } = event.detail;\n    this.duration = value;\n    this.durationMinutes = this.duration * this.durationIncrement;\n    this.internals.setFormValue(this.durationMinutes.toString(), this.name);\n  }\n\n  @RegisterComponent<NylasEventDuration, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-event-duration',\n    stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    const durationOptions = [\n      { value: 1, label: 'minute' },\n      { value: 60, label: 'hour' },\n    ];\n\n    return (\n      <Host>\n        <div class=\"nylas-event-duration\" part=\"ned\">\n          <label htmlFor=\"duration\">\n            Event duration<span class=\"required\">*</span>\n          </label>\n          <div class=\"nylas-event-duration__wrapper\">\n            <input-dropdown\n              name={'event-duration'}\n              options={this.durationMinutesOptions}\n              inputValue={this.duration.toString()}\n              exportparts=\"id_dropdown: ned__input_dropdown, id_dropdown-input: ned__input_dropdown-input, id_dropdown-content: ned__input_dropdown-content\"\n              defaultInputOption={this.durationMinutesOptions.find(i => i.value == this.duration)}\n            />\n            {this.durationIncrement && (\n              <select-dropdown\n                name={'event-duration'}\n                options={durationOptions}\n                pluralizedLabel={this.duration > 1 ? 's' : ''}\n                exportparts=\"sd_dropdown: ned__dropdown, sd_dropdown-button: ned__dropdown-button, sd_dropdown-content: ned__dropdown-content\"\n                defaultSelectedOption={durationOptions.find(i => i.value == this.durationIncrement)}\n                withSearch={false}\n              />\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nylas-event-info2.js

@@ -41,7 +41,7 @@ const NylasEventInfo = proxyCustomElement(class NylasEventInfo extends HTMLEleme
         debug('nylas-event-info', 'disconnectedCallback');
     }
     render() {
-        return (h(Host, { key: 'fb4a8dd875696bc6a4e951f2649a2ab650558489' }, h("nylas-form-card", { key: '193b25acb1374842946ff938755fe8fed7a6d4b9', exportparts: "nfc__header: nei__header" }, h("h1", { key: 'c405c5de0b2eafa15136d10f10de13a158595298', slot: "header-title", class: "nylas-event-info__title", part: "nei__title" }, "Event information"), h("div", { key: 'a49993db49876dfdebd6dbe412d759ce1d38028e', slot: "content", class: "nylas-event-info__content" }, h("slot", { key: 'dc4595988a0b6824f328896c1ea507b96e61e4a8', name: "inputs" })))));
+        return (h(Host, { key: 'be80a4e687ce223a8e52bbabc2e8acadcb194b11' }, h("nylas-form-card", { key: 'c96b77795ec2516889acf0f78c5eb723b26dd89c', exportparts: "nfc__header: nei__header" }, h("h1", { key: '890113187adcd6be1ab1d1beb489fe3a80124617', slot: "header-title", class: "nylas-event-info__title", part: "nei__title" }, "Event information"), h("div", { key: '44eaaae3833654530706dc93077b43a7597acc2c', slot: "content", class: "nylas-event-info__content" }, h("slot", { key: '7af737a67cb007c0ede7db5aa075828311d98da3', name: "inputs" })))));
     }
     static get formAssociated() { return true; }
     get el() { return this; }

package/dist/components/nylas-event-limits2.js

@@ -41,7 +41,7 @@ const NylasEventLimits = proxyCustomElement(class NylasEventLimits extends HTMLE
         debug('nylas-event-limits', 'disconnectedCallback');
     }
     render() {
-        return (h(Host, { key: '8715c9aeba26e6f4c151b0ab58333cc13d3500d3' }, h("nylas-form-card", { key: '2e2bf90762d35ac9fc4a995808b9aa3e4481d6c0', exportparts: "nfc__header: nel__header" }, h("h1", { key: 'b3689912282e3215d862ca06c75fae95b67e501f', slot: "header-title", class: "nylas-event-limits__title" }, "Event limits"), h("div", { key: 'bd5513f8c0cc573f14afeadfafe591b64b904920', slot: "content", class: "nylas-event-limits__content" }, h("slot", { key: '86ebfd856f0c93d3ad98d800d4ce9e1a8daf2516', name: "inputs" })))));
+        return (h(Host, { key: '6a28113e3b403869e77cc3a2c9c3a1bea217dc52' }, h("nylas-form-card", { key: 'cf9004d044222d796ae59df58737ad9719a20576', exportparts: "nfc__header: nel__header" }, h("h1", { key: 'ffeeb7a5741c9f07fb4f9bd84016b1707e2b55b7', slot: "header-title", class: "nylas-event-limits__title" }, "Event limits"), h("div", { key: '7b51592d95736f860ec805950275a18e9d914c32', slot: "content", class: "nylas-event-limits__content" }, h("slot", { key: '53e9098d736eedf5b22e1b8ae712ec22c8ca865e', name: "inputs" })))));
     }
     static get formAssociated() { return true; }
     get el() { return this; }

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

@@ -41,7 +41,7 @@ const NylasFormCard = proxyCustomElement(class NylasFormCard extends HTMLElement
         checkForMissingSlots(slots, this.host);
     }
     render() {
-        return (h(Host, { key: 'e79321333887319f48356c64cb2e04539edf1d79' }, h("div", { key: '9a33c42c38012c5277ecc0d60523211671866378', class: "nylas-form-card", part: "nfc" }, h("div", { key: '905eed6cd8c79bda19fb3c5ab49802ae697a0ab9', class: "nylas-form-card__header", part: "nfc__header" }, h("slot", { key: 'db749b7eb575845c2b8d8e4a12ea0c3ffea4842a', name: "header-title" }), h("slot", { key: '5b9ac54446f1b1b49a9f0f2e2b45e3785acb9686', name: "header-subtitle" })), h("div", { key: '6893e68e48f990c6dfc3d3c3052dfba988b21807', class: "nylas-form-card__content" }, h("slot", { key: 'fac98a2a1a6b162bc3f4aed735b584c4d5e509a3', name: "content" })))));
+        return (h(Host, { key: '5ccd047d1a8bb515dea8aa7b9d7d39265afc31c9' }, h("div", { key: 'c40f52eaa4d099d92d65b0df662cd2de1b5f35c7', class: "nylas-form-card", part: "nfc" }, h("div", { key: '545dabd81dce9b4f6f5f1d129071e1136f62e609', class: "nylas-form-card__header", part: "nfc__header" }, h("slot", { key: '2be9b24f91316235be7132a6466cd16b9dfe813c', name: "header-title" }), h("slot", { key: '3414a084465efc50a3856291dff61d8ef3b3c617', name: "header-subtitle" })), h("div", { key: 'cc07650a55afd7fc5d2429ff3611168977775bc8', class: "nylas-form-card__content" }, h("slot", { key: 'd50dd8dfbfea1ad84876495e72dd03102e2bc0dc', name: "content" })))));
     }
     static get formAssociated() { return true; }
     get host() { return this; }

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

@@ -72,12 +72,12 @@ const NylasTimeslotPicker = proxyCustomElement(class NylasTimeslotPicker extends
     connectedCallback() { }
     disconnectedCallback() { }
     async componentWillLoad() {
-        const availableTimes = this.availability?.filter(timeslot => this.selectedDate && isSameDay(timeslot.start_time, this.selectedDate)).map(timeslot => timeslot);
-        this.times = availableTimes || [];
         debug(`[nylas-timeslot-picker] Component will load`, { selectedDate: this.selectedDate, availability: this.availability, times: this.times });
     }
     async componentDidLoad() {
         debug(`[nylas-timeslot-picker] Component did load`);
+        const availableTimes = this.availability?.filter(timeslot => this.selectedDate && isSameDay(timeslot.start_time, this.selectedDate)).map(timeslot => timeslot);
+        this.times = availableTimes || [];
     }
     getTimeslotId(date, index) {
         return `${date.toLocaleDateString()}-${index}`;

package/dist/components/nylas-timeslot-picker2.js.map

@@ -1 +1 @@
-{"file":"nylas-timeslot-picker2.js","mappings":"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","names":["i18next"],"sources":["src/components/scheduler/nylas-timeslot-picker/nylas-timeslot-picker.scss?tag=nylas-timeslot-picker&encapsulation=shadow","src/components/scheduler/nylas-timeslot-picker/nylas-timeslot-picker.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  height: calc(100% - 48px); //48px is the height of the header\n  @include default-css-variables;\n}\n\n.time-picker-wrapper {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.timeslots {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n  align-items: center;\n  overflow-y: scroll;\n  padding: 0.5rem 1.5rem 1.5rem;\n  flex: 1;\n}\n\n.time {\n  /* Frame 12 */\n  box-sizing: border-box;\n\n  /* Auto layout */\n\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  padding: 4px 12px;\n  gap: 0.5rem;\n  font-size: 16px;\n  font-weight: 500;\n  font-family: inherit;\n\n  width: 100%;\n  height: 48px;\n\n  color: var(--nylas-base-800);\n  background: var(--nylas-base-0);\n  border: none;\n  outline: 1.5px solid var(--nylas-base-200);\n  border-radius: var(--nylas-border-radius-2x);\n\n  flex: none;\n  order: 4;\n  align-self: stretch;\n  flex-grow: 0;\n\n  cursor: pointer;\n\n  &:hover,\n  &:focus {\n    color: var(--nylas-primary);\n    outline-color: var(--nylas-primary);\n  }\n\n  &.selected {\n    font-weight: 600;\n    color: var(--nylas-primary);\n    outline: 2px solid var(--nylas-primary);\n    border-color: transparent;\n    box-shadow: 0 0 0 2px var(--nylas-primary);\n  }\n}\n\n.empty {\n  text-align: center;\n  padding: 0 1.5rem;\n  color: var(--nylas-base-600);\n  font-size: min(max(12px, 2vw), 14px);\n  height: 450px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n@keyframes pulsate {\n  0% {\n    background-color: var(--nylas-base-50);\n  }\n\n  50% {\n    background-color: var(--nylas-base-100);\n  }\n\n  100% {\n    background-color: var(--nylas-base-50);\n  }\n}\n\n.loading {\n  padding: 0 1.5rem;\n\n  .timeslot-skeleton {\n    width: 100%;\n    height: 4rem;\n    background-color: var(--nylas-base-50);\n    margin-bottom: 0.5rem;\n    border-radius: var(--nylas-border-radius-2x);\n    animation: pulsate 1.5s infinite ease-in-out;\n  }\n}\n\n.footer {\n  width: 100%;\n  padding: 14px;\n  box-sizing: border-box;\n  border-top: 1px solid var(--nylas-base-200);\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { debug, isSameDay } from '@/utils/utils';\nimport { Component, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { AvailabilityTimeslot } from '@/stores/scheduler-store';\nimport type { Timeslot } from '@nylas/core';\nimport i18next from '@/utils/i18n';\n\n/**\n * The `nylas-timeslot-picker` component is a UI component that allows users to select a timeslot from a list of available timeslots.\n *\n * @slot timeslot-picker-cta-label - The label for the timeslot picker CTA. Default is \"Next\".\n * @part ntp - The timeslot picker component.\n * @part ntp__timeslot - The timeslot button.\n * @part ntp__timeslot--selected - The selected timeslot button.\n * @part ntp__button-primary - The timeslot picker CTA.\n */\n@Component({\n  tag: 'nylas-timeslot-picker',\n  styleUrl: 'nylas-timeslot-picker.scss',\n  shadow: true,\n})\nexport class NylasTimeslotPicker {\n  /**\n   * @standalone\n   * The available timeslots.\n   */\n  @Prop({ attribute: 'availability' }) readonly availability?: AvailabilityTimeslot[];\n  /**\n   * @standalone\n   * The loading state prop. Used to display loading state when fetching availability.\n   */\n  @Prop({ attribute: 'loading-state' }) readonly isLoading?: boolean;\n  /**\n   * The selected timeslot.\n   */\n  @Prop({ attribute: 'selected-timeslot' }) readonly selectedTimeslot?: Timeslot;\n  /**\n   * The selected timezone.\n   */\n  @Prop({ attribute: 'selected-timezone' }) readonly selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n  /**\n   * The selected date.\n   */\n  @Prop({ attribute: 'selected-date' }) readonly selectedDate?: Date = new Date();\n  /**\n   * The selected language.\n   */\n  @Prop() selectedLanguage?: string;\n\n  /**\n   * This event is fired when a timeslot is selected.\n   */\n  @Event() readonly timeslotSelected!: EventEmitter<Timeslot>;\n  /**\n   * This event is fired when a timeslot is confirmed. By default, this will proceed to the booking form page.\n   */\n  @Event() readonly timeslotConfirmed!: EventEmitter<Timeslot>;\n\n  @State() times: AvailabilityTimeslot[] = [];\n  @State() hoveredTimeslotIndex?: number;\n  @State() selectedTimeslotIndex?: string;\n\n  @Watch('selectedLanguage')\n  selectedLanguageChanged(newLanguage: string) {\n    i18next.changeLanguage(newLanguage);\n  }\n\n  @Watch('selectedDate')\n  selectedDateChanged(newVal: Date | null | undefined) {\n    debug(`[nylas-timeslot-picker] Selected date changed`, { newVal });\n\n    if (newVal) {\n      this.selectedTimeslotIndex = '';\n      if (typeof newVal !== 'undefined') {\n        const availableTimes = this.availability?.filter(timeslot => isSameDay(timeslot.start_time, newVal)).map(timeslot => timeslot);\n        this.times = availableTimes || [];\n      }\n    }\n  }\n\n  @Watch('availability')\n  availabilityChanged(newVal: AvailabilityTimeslot[] | undefined) {\n    debug(`[nylas-timeslot-picker] Available times changed`, { newVal, selectedDate: this.selectedDate });\n\n    if (typeof newVal !== 'undefined') {\n      const availableTimes = newVal?.filter(timeslot => this.selectedDate && isSameDay(timeslot.start_time, this.selectedDate)).map(timeslot => timeslot);\n      this.times = availableTimes || [];\n    }\n  }\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  async componentWillLoad() {\n    const availableTimes = this.availability?.filter(timeslot => this.selectedDate && isSameDay(timeslot.start_time, this.selectedDate)).map(timeslot => timeslot);\n    this.times = availableTimes || [];\n    debug(`[nylas-timeslot-picker] Component will load`, { selectedDate: this.selectedDate, availability: this.availability, times: this.times });\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-timeslot-picker] Component did load`);\n  }\n\n  private getTimeslotId(date: Date, index: number) {\n    return `${date.toLocaleDateString()}-${index}`;\n  }\n\n  private onClickSelectTime(timeslot: Timeslot, index: number) {\n    debug(`[nylas-timeslot-picker] Time selected`, timeslot, index);\n    this.selectedTimeslotIndex = this.getTimeslotId(timeslot.start_time, index);\n    this.timeslotSelected.emit({\n      start_time: timeslot.start_time,\n      end_time: timeslot.end_time,\n      emails: timeslot.emails,\n    });\n  }\n\n  private handleConfirmedTimeslot = async (event: Event, timeslot: Timeslot | undefined) => {\n    event.preventDefault();\n    debug(`[nylas-timeslot-picker] Confirm timeslot`, timeslot);\n    this.timeslotConfirmed.emit(timeslot);\n  };\n\n  private handleMouseEnter = (index: number) => {\n    this.hoveredTimeslotIndex = index;\n  };\n\n  private handleMouseLeave = () => {\n    this.hoveredTimeslotIndex = -1;\n  };\n\n  private getTimeSlotLabel(timeslot: Timeslot) {\n    const timeFormat = new Intl.DateTimeFormat('en-US', {\n      hour: '2-digit',\n      minute: '2-digit',\n      timeZone: this.selectedTimezone,\n    });\n    return `${timeFormat.format(timeslot.start_time)} - ${timeFormat.format(timeslot.end_time)}`;\n  }\n\n  @RegisterComponent<NylasTimeslotPicker, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-timeslot-picker',\n    stateToProps: new Map([\n      ['scheduler.selectedDate', 'selectedDate'],\n      ['scheduler.availability', 'availability'],\n      ['scheduler.selectedTimeslot', 'selectedTimeslot'],\n      ['scheduler.selectedTimezone', 'selectedTimezone'],\n      ['scheduler.selectedLanguage', 'selectedLanguage'],\n      ['scheduler.isLoading', 'isLoading'],\n    ]),\n    eventToProps: {\n      timeslotSelected: async (event: CustomEvent<Timeslot>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        debug('nylas-timeslot-picker', 'timeslotSelected', event.detail);\n        nylasSchedulerConnector.scheduler.selectTime(event.detail);\n      },\n      timeslotConfirmed: async (event: CustomEvent<Timeslot>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        debug('nylas-timeslot-picker', 'timeslotConfirmed', event.detail);\n        if (event.detail) {\n          nylasSchedulerConnector.scheduler.toggleAdditionalData(true);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    if (this.isLoading) {\n      return (\n        <Host>\n          <div class={'loading'}>\n            {new Array(6).fill(0).map((_, i) => (\n              <div class={'timeslot-skeleton'} style={{ animationDelay: `${i * 20}ms` }} />\n            ))}\n          </div>\n        </Host>\n      );\n    }\n\n    if (this.availability && this.availability.length === 0) {\n      return (\n        <Host>\n          <div class={'empty'}>\n            <span>No dates available</span>\n          </div>\n        </Host>\n      );\n    }\n\n    if ((!this.times || this.times.length === 0) && !!this.selectedDate) {\n      return (\n        <Host>\n          <div class={'empty'}>\n            <span>No time slots available for selected date</span>\n          </div>\n        </Host>\n      );\n    }\n\n    if (!this.selectedDate) return <Host></Host>;\n\n    return (\n      <Host part=\"ntp\">\n        <div class={'time-picker-wrapper'}>\n          <div class={'timeslots'}>\n            {this.times.map((timeslot, index) => (\n              <button\n                part={`ntp__timeslot ${this.selectedTimeslot?.start_time?.getTime() === timeslot.start_time.getTime() ? 'ntp__timeslot--selected' : ''}`}\n                aria-role=\"button\"\n                class={{\n                  time: true,\n                  selected: typeof this.selectedTimeslot !== 'undefined' && this.selectedTimeslot?.start_time?.getTime() === timeslot.start_time.getTime(),\n                }}\n                onClick={() => this.onClickSelectTime(timeslot, index)}\n                onMouseEnter={() => this.handleMouseEnter(index)}\n                onMouseLeave={() => this.handleMouseLeave()}\n              >\n                {this.hoveredTimeslotIndex == index || this.selectedTimeslotIndex == this.getTimeslotId(timeslot.start_time, index)\n                  ? this.getTimeSlotLabel(timeslot)\n                  : timeslot.start_time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', timeZone: this.selectedTimezone })}\n              </button>\n            ))}\n          </div>\n          {this.selectedTimeslot && (\n            <div class={'footer'}>\n              <button-component variant={'primary'} onClick={(event: Event) => this.handleConfirmedTimeslot(event, this.selectedTimeslot)} part=\"ntp__button-primary\">\n                <slot name=\"timeslot-picker-cta-label\">{i18next.t('nextButton')}</slot>\n              </button-component>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nylas-timeslot-picker2.js","mappings":"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","names":["i18next"],"sources":["src/components/scheduler/nylas-timeslot-picker/nylas-timeslot-picker.scss?tag=nylas-timeslot-picker&encapsulation=shadow","src/components/scheduler/nylas-timeslot-picker/nylas-timeslot-picker.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  height: calc(100% - 48px); //48px is the height of the header\n  @include default-css-variables;\n}\n\n.time-picker-wrapper {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.timeslots {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n  align-items: center;\n  overflow-y: scroll;\n  padding: 0.5rem 1.5rem 1.5rem;\n  flex: 1;\n}\n\n.time {\n  /* Frame 12 */\n  box-sizing: border-box;\n\n  /* Auto layout */\n\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  padding: 4px 12px;\n  gap: 0.5rem;\n  font-size: 16px;\n  font-weight: 500;\n  font-family: inherit;\n\n  width: 100%;\n  height: 48px;\n\n  color: var(--nylas-base-800);\n  background: var(--nylas-base-0);\n  border: none;\n  outline: 1.5px solid var(--nylas-base-200);\n  border-radius: var(--nylas-border-radius-2x);\n\n  flex: none;\n  order: 4;\n  align-self: stretch;\n  flex-grow: 0;\n\n  cursor: pointer;\n\n  &:hover,\n  &:focus {\n    color: var(--nylas-primary);\n    outline-color: var(--nylas-primary);\n  }\n\n  &.selected {\n    font-weight: 600;\n    color: var(--nylas-primary);\n    outline: 2px solid var(--nylas-primary);\n    border-color: transparent;\n    box-shadow: 0 0 0 2px var(--nylas-primary);\n  }\n}\n\n.empty {\n  text-align: center;\n  padding: 0 1.5rem;\n  color: var(--nylas-base-600);\n  font-size: min(max(12px, 2vw), 14px);\n  height: 450px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n@keyframes pulsate {\n  0% {\n    background-color: var(--nylas-base-50);\n  }\n\n  50% {\n    background-color: var(--nylas-base-100);\n  }\n\n  100% {\n    background-color: var(--nylas-base-50);\n  }\n}\n\n.loading {\n  padding: 0 1.5rem;\n\n  .timeslot-skeleton {\n    width: 100%;\n    height: 4rem;\n    background-color: var(--nylas-base-50);\n    margin-bottom: 0.5rem;\n    border-radius: var(--nylas-border-radius-2x);\n    animation: pulsate 1.5s infinite ease-in-out;\n  }\n}\n\n.footer {\n  width: 100%;\n  padding: 14px;\n  box-sizing: border-box;\n  border-top: 1px solid var(--nylas-base-200);\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { debug, isSameDay } from '@/utils/utils';\nimport { Component, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { AvailabilityTimeslot } from '@/stores/scheduler-store';\nimport type { Timeslot } from '@nylas/core';\nimport i18next from '@/utils/i18n';\n\n/**\n * The `nylas-timeslot-picker` component is a UI component that allows users to select a timeslot from a list of available timeslots.\n *\n * @slot timeslot-picker-cta-label - The label for the timeslot picker CTA. Default is \"Next\".\n * @part ntp - The timeslot picker component.\n * @part ntp__timeslot - The timeslot button.\n * @part ntp__timeslot--selected - The selected timeslot button.\n * @part ntp__button-primary - The timeslot picker CTA.\n */\n@Component({\n  tag: 'nylas-timeslot-picker',\n  styleUrl: 'nylas-timeslot-picker.scss',\n  shadow: true,\n})\nexport class NylasTimeslotPicker {\n  /**\n   * @standalone\n   * The available timeslots.\n   */\n  @Prop({ attribute: 'availability' }) readonly availability?: AvailabilityTimeslot[];\n  /**\n   * @standalone\n   * The loading state prop. Used to display loading state when fetching availability.\n   */\n  @Prop({ attribute: 'loading-state' }) readonly isLoading?: boolean;\n  /**\n   * The selected timeslot.\n   */\n  @Prop({ attribute: 'selected-timeslot' }) readonly selectedTimeslot?: Timeslot;\n  /**\n   * The selected timezone.\n   */\n  @Prop({ attribute: 'selected-timezone' }) readonly selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n  /**\n   * The selected date.\n   */\n  @Prop({ attribute: 'selected-date' }) readonly selectedDate?: Date = new Date();\n  /**\n   * The selected language.\n   */\n  @Prop() selectedLanguage?: string;\n\n  /**\n   * This event is fired when a timeslot is selected.\n   */\n  @Event() readonly timeslotSelected!: EventEmitter<Timeslot>;\n  /**\n   * This event is fired when a timeslot is confirmed. By default, this will proceed to the booking form page.\n   */\n  @Event() readonly timeslotConfirmed!: EventEmitter<Timeslot>;\n\n  @State() times: AvailabilityTimeslot[] = [];\n  @State() hoveredTimeslotIndex?: number;\n  @State() selectedTimeslotIndex?: string;\n\n  @Watch('selectedLanguage')\n  selectedLanguageChanged(newLanguage: string) {\n    i18next.changeLanguage(newLanguage);\n  }\n\n  @Watch('selectedDate')\n  selectedDateChanged(newVal: Date | null | undefined) {\n    debug(`[nylas-timeslot-picker] Selected date changed`, { newVal });\n\n    if (newVal) {\n      this.selectedTimeslotIndex = '';\n      if (typeof newVal !== 'undefined') {\n        const availableTimes = this.availability?.filter(timeslot => isSameDay(timeslot.start_time, newVal)).map(timeslot => timeslot);\n        this.times = availableTimes || [];\n      }\n    }\n  }\n\n  @Watch('availability')\n  availabilityChanged(newVal: AvailabilityTimeslot[] | undefined) {\n    debug(`[nylas-timeslot-picker] Available times changed`, { newVal, selectedDate: this.selectedDate });\n\n    if (typeof newVal !== 'undefined') {\n      const availableTimes = newVal?.filter(timeslot => this.selectedDate && isSameDay(timeslot.start_time, this.selectedDate)).map(timeslot => timeslot);\n      this.times = availableTimes || [];\n    }\n  }\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  async componentWillLoad() {\n    debug(`[nylas-timeslot-picker] Component will load`, { selectedDate: this.selectedDate, availability: this.availability, times: this.times });\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-timeslot-picker] Component did load`);\n    const availableTimes = this.availability?.filter(timeslot => this.selectedDate && isSameDay(timeslot.start_time, this.selectedDate)).map(timeslot => timeslot);\n    this.times = availableTimes || [];\n  }\n\n  private getTimeslotId(date: Date, index: number) {\n    return `${date.toLocaleDateString()}-${index}`;\n  }\n\n  private onClickSelectTime(timeslot: Timeslot, index: number) {\n    debug(`[nylas-timeslot-picker] Time selected`, timeslot, index);\n    this.selectedTimeslotIndex = this.getTimeslotId(timeslot.start_time, index);\n    this.timeslotSelected.emit({\n      start_time: timeslot.start_time,\n      end_time: timeslot.end_time,\n      emails: timeslot.emails,\n    });\n  }\n\n  private handleConfirmedTimeslot = async (event: Event, timeslot: Timeslot | undefined) => {\n    event.preventDefault();\n    debug(`[nylas-timeslot-picker] Confirm timeslot`, timeslot);\n    this.timeslotConfirmed.emit(timeslot);\n  };\n\n  private handleMouseEnter = (index: number) => {\n    this.hoveredTimeslotIndex = index;\n  };\n\n  private handleMouseLeave = () => {\n    this.hoveredTimeslotIndex = -1;\n  };\n\n  private getTimeSlotLabel(timeslot: Timeslot) {\n    const timeFormat = new Intl.DateTimeFormat('en-US', {\n      hour: '2-digit',\n      minute: '2-digit',\n      timeZone: this.selectedTimezone,\n    });\n    return `${timeFormat.format(timeslot.start_time)} - ${timeFormat.format(timeslot.end_time)}`;\n  }\n\n  @RegisterComponent<NylasTimeslotPicker, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-timeslot-picker',\n    stateToProps: new Map([\n      ['scheduler.selectedDate', 'selectedDate'],\n      ['scheduler.availability', 'availability'],\n      ['scheduler.selectedTimeslot', 'selectedTimeslot'],\n      ['scheduler.selectedTimezone', 'selectedTimezone'],\n      ['scheduler.selectedLanguage', 'selectedLanguage'],\n      ['scheduler.isLoading', 'isLoading'],\n    ]),\n    eventToProps: {\n      timeslotSelected: async (event: CustomEvent<Timeslot>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        debug('nylas-timeslot-picker', 'timeslotSelected', event.detail);\n        nylasSchedulerConnector.scheduler.selectTime(event.detail);\n      },\n      timeslotConfirmed: async (event: CustomEvent<Timeslot>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        debug('nylas-timeslot-picker', 'timeslotConfirmed', event.detail);\n        if (event.detail) {\n          nylasSchedulerConnector.scheduler.toggleAdditionalData(true);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    if (this.isLoading) {\n      return (\n        <Host>\n          <div class={'loading'}>\n            {new Array(6).fill(0).map((_, i) => (\n              <div class={'timeslot-skeleton'} style={{ animationDelay: `${i * 20}ms` }} />\n            ))}\n          </div>\n        </Host>\n      );\n    }\n\n    if (this.availability && this.availability.length === 0) {\n      return (\n        <Host>\n          <div class={'empty'}>\n            <span>No dates available</span>\n          </div>\n        </Host>\n      );\n    }\n\n    if ((!this.times || this.times.length === 0) && !!this.selectedDate) {\n      return (\n        <Host>\n          <div class={'empty'}>\n            <span>No time slots available for selected date</span>\n          </div>\n        </Host>\n      );\n    }\n\n    if (!this.selectedDate) return <Host></Host>;\n\n    return (\n      <Host part=\"ntp\">\n        <div class={'time-picker-wrapper'}>\n          <div class={'timeslots'}>\n            {this.times.map((timeslot, index) => (\n              <button\n                part={`ntp__timeslot ${this.selectedTimeslot?.start_time?.getTime() === timeslot.start_time.getTime() ? 'ntp__timeslot--selected' : ''}`}\n                aria-role=\"button\"\n                class={{\n                  time: true,\n                  selected: typeof this.selectedTimeslot !== 'undefined' && this.selectedTimeslot?.start_time?.getTime() === timeslot.start_time.getTime(),\n                }}\n                onClick={() => this.onClickSelectTime(timeslot, index)}\n                onMouseEnter={() => this.handleMouseEnter(index)}\n                onMouseLeave={() => this.handleMouseLeave()}\n              >\n                {this.hoveredTimeslotIndex == index || this.selectedTimeslotIndex == this.getTimeslotId(timeslot.start_time, index)\n                  ? this.getTimeSlotLabel(timeslot)\n                  : timeslot.start_time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', timeZone: this.selectedTimezone })}\n              </button>\n            ))}\n          </div>\n          {this.selectedTimeslot && (\n            <div class={'footer'}>\n              <button-component variant={'primary'} onClick={(event: Event) => this.handleConfirmedTimeslot(event, this.selectedTimeslot)} part=\"ntp__button-primary\">\n                <slot name=\"timeslot-picker-cta-label\">{i18next.t('nextButton')}</slot>\n              </button-component>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}