@nylas/web-elements 2.0.1 → 2.0.3

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

@@ -1 +1 @@
-{"file":"nylas-confirmation-email2.js","mappings":"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","names":["i18next"],"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: 16px;\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: 16px;\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: 16px;\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\ntoggle-switch {\n  padding-right: 8px;\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';\nimport i18next from '@/utils/i18n';\nimport { LANGUAGE_CODE } from '@/common/constants';\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   * @standalone\n   * The nylas branding\n   */\n  @Prop() nylasBranding: boolean = true;\n  /**\n   * Is the confirmation email card open\n   */\n  @Prop() isOpen: boolean = false;\n  /**\n   * The selected language.\n   */\n  @Prop() selectedLanguage?: LANGUAGE_CODE;\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   * The error message to display when the image URL is invalid.\n   */\n  @State() invalidImageErrorMessage: string = i18next.t('nylasConfirmationEmail.error.invalidImageUrl');\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      if (typeof this.confirmationEmail?.show_nylas_branding === 'undefined' && this.nylasBranding) {\n        this.confirmationEmail = { ...this.confirmationEmail, show_nylas_branding: true };\n      } else if (!this.nylasBranding) {\n        this.confirmationEmail = { ...this.confirmationEmail, show_nylas_branding: false };\n      }\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    if (typeof this.confirmationEmail?.show_nylas_branding === 'undefined' && this.nylasBranding) {\n      this.confirmationEmail = { ...this.confirmationEmail, show_nylas_branding: true };\n    } else if (!this.nylasBranding) {\n      this.confirmationEmail = { ...this.confirmationEmail, show_nylas_branding: false };\n    }\n    this.isConfirmationEmailOpen = !newValue?.event_booking?.reminders?.length;\n    this.participantsState = newValue?.participants || this.participants;\n  }\n\n  @Watch('nylasBranding')\n  nylasBrandingChangedHandler(newValue: boolean) {\n    debug('nylas-confirmation-email', 'nylasBrandingChangedHandler', newValue);\n    if (typeof this.confirmationEmail?.show_nylas_branding === 'undefined' && newValue) {\n      this.confirmationEmail = { ...this.confirmationEmail, show_nylas_branding: true };\n    } else if (!newValue) {\n      this.confirmationEmail = { ...this.confirmationEmail, show_nylas_branding: false };\n    }\n  }\n\n  @Watch('selectedLanguage')\n  selectedLanguageChangedHandler(newVal: LANGUAGE_CODE, oldVal: LANGUAGE_CODE) {\n    if (newVal === oldVal) return;\n    this.invalidImageErrorMessage = i18next.t('nylasConfirmationEmail.error.invalidImageUrl');\n    i18next.changeLanguage(newVal);\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 }, i18next.t('nylasConfirmationEmail.error.invalidImageUrl') || value);\n    }\n  }\n\n  @Listen('nylasFormSwitchToggled')\n  nyalsFormSwitchToggledHandler(event: CustomEvent<{ checked: boolean; name: string; label: boolean }>) {\n    debug('nylas-confirmation-email', 'nyalsFormSwitchToggledHandler', event.detail);\n    if (event.detail.name === 'confirmation-email-show-branding') {\n      this.confirmationEmail = { ...this.confirmationEmail, show_nylas_branding: event.detail.checked };\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([\n      ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],\n      ['schedulerConfig.selectedLanguage', 'selectedLanguage'],\n      ['schedulerConfig.nylasBranding', 'nylasBranding'],\n    ]),\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>\n                {this.confirmationEmail?.booking_confirmed?.title ||\n                  i18next.t('nylasConfirmationEmail.headerTitle', { organizerName: `${organizerName ? ` with ${organizerName}` : ''}` })}\n              </h3>\n              <p>{i18next.t('nylasConfirmationEmail.headerSubTitle')}</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                {i18next.t('nylasConfirmationEmail.editButtonText')}\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                {this.nylasBranding && (\n                  <div class=\"nylas-confirmation-email__row\">\n                    <label>\n                      {i18next.t('nylasConfirmationEmail.nylasBranding.label')}\n                      <span class=\"label-icon\">\n                        <tooltip-component>\n                          <info-icon slot=\"tooltip-icon\" />\n                          <span slot=\"tooltip-content\">{i18next.t('nylasConfirmationEmail.nylasBranding.tooltip.desc')}</span>\n                        </tooltip-component>\n                      </span>\n                    </label>\n                    <toggle-switch\n                      exportparts=\"ts_label: nce__toggle-label, ts_input: nce_toggle-input, ts_slider: nce_toggle-slider\"\n                      name={`confirmation-email-show-branding`}\n                      checked={this.confirmationEmail?.show_nylas_branding}\n                    />\n                  </div>\n                )}\n                <div class=\"nylas-confirmation-email__row\">\n                  <div class=\"subsection\">\n                    <div class=\"input-container\">\n                      <label>\n                        {i18next.t('nylasConfirmationEmail.companyLogoUrl.label')}\n                        <span class=\"label-icon\">\n                          <tooltip-component>\n                            <info-icon slot=\"tooltip-icon\" />\n                            <span slot=\"tooltip-content\">{i18next.t('nylasConfirmationEmail.companyLogoUrl.tooltip.desc')}</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                          errorMessage={this.invalidImageErrorMessage}\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>{i18next.t('nylasConfirmationEmail.emailMessage.header')}</h3>\n                    <div class=\"input-container\">\n                      <label htmlFor=\"title\">\n                        {i18next.t('nylasConfirmationEmail.emailMessage.label')}\n                        <span class=\"label-icon\">\n                          <tooltip-component>\n                            <info-icon slot=\"tooltip-icon\" />\n                            <span slot=\"tooltip-content\">{i18next.t('nylasConfirmationEmail.emailMessage.tooltip.desc')}</span>\n                          </tooltip-component>\n                        </span>\n                      </label>\n                      <input-component\n                        name=\"confirmation-email-title\"\n                        maxLength={60}\n                        placeholder={i18next.t('nylasConfirmationEmail.headerTitle', { organizerName: `${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={i18next.t('nylasConfirmationEmail.emailMessage.additionalInfoLabel')}\n                        name=\"confirmation-email-body\"\n                        id=\"confirmation-email-body\"\n                        placeholder={i18next.t('nylasConfirmationEmail.emailMessage.additionalInfoPlaceholder')}\n                        tooltip={i18next.t('nylasConfirmationEmail.emailMessage.additionalInfoTooltip')}\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                {i18next.t('nylasConfirmationEmail.allHosts')}\n              </p>\n              <p>\n                <span class=\"summary-icon\">\n                  <clock-icon></clock-icon>\n                </span>\n                {i18next.t('nylasConfirmationEmail.immediatelyUponBooking')}\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":["i18next"],"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: 16px;\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: 16px;\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: 16px;\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\ntoggle-switch {\n  padding-right: 8px;\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';\nimport i18next from '@/utils/i18n';\nimport { LANGUAGE_CODE } from '@/common/constants';\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   * @standalone\n   * The nylas branding\n   */\n  @Prop() nylasBranding: boolean = true;\n  /**\n   * Is the confirmation email card open\n   */\n  @Prop() isOpen: boolean = false;\n  /**\n   * The selected language.\n   */\n  @Prop() selectedLanguage?: LANGUAGE_CODE;\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   * The error message to display when the image URL is invalid.\n   */\n  @State() invalidImageErrorMessage: string = i18next.t('nylasConfirmationEmail.error.invalidImageUrl');\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      if (typeof this.confirmationEmail?.show_nylas_branding === 'undefined' && this.nylasBranding) {\n        this.confirmationEmail = { ...this.confirmationEmail, show_nylas_branding: true };\n      } else if (!this.nylasBranding) {\n        this.confirmationEmail = { ...this.confirmationEmail, show_nylas_branding: false };\n      }\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    if (typeof this.confirmationEmail?.show_nylas_branding === 'undefined' && this.nylasBranding) {\n      this.confirmationEmail = { ...this.confirmationEmail, show_nylas_branding: true };\n    } else if (!this.nylasBranding) {\n      this.confirmationEmail = { ...this.confirmationEmail, show_nylas_branding: false };\n    }\n    this.isConfirmationEmailOpen = !newValue?.event_booking?.reminders?.length;\n    this.participantsState = newValue?.participants || this.participants;\n  }\n\n  @Watch('nylasBranding')\n  nylasBrandingChangedHandler(newValue: boolean) {\n    debug('nylas-confirmation-email', 'nylasBrandingChangedHandler', newValue);\n    if (typeof this.confirmationEmail?.show_nylas_branding === 'undefined' && newValue) {\n      this.confirmationEmail = { ...this.confirmationEmail, show_nylas_branding: true };\n    } else if (!newValue) {\n      this.confirmationEmail = { ...this.confirmationEmail, show_nylas_branding: false };\n    }\n  }\n\n  @Watch('selectedLanguage')\n  selectedLanguageChangedHandler(newVal: LANGUAGE_CODE, oldVal: LANGUAGE_CODE) {\n    if (newVal === oldVal) return;\n    this.invalidImageErrorMessage = i18next.t('nylasConfirmationEmail.error.invalidImageUrl');\n    i18next.changeLanguage(newVal);\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 }, i18next.t('nylasConfirmationEmail.error.invalidImageUrl') || value);\n    }\n  }\n\n  @Listen('nylasFormSwitchToggled')\n  nyalsFormSwitchToggledHandler(event: CustomEvent<{ checked: boolean; name: string; label: boolean }>) {\n    debug('nylas-confirmation-email', 'nyalsFormSwitchToggledHandler', event.detail);\n    if (event.detail.name === 'confirmation-email-show-branding') {\n      this.confirmationEmail = { ...this.confirmationEmail, show_nylas_branding: event.detail.checked };\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([\n      ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],\n      ['schedulerConfig.selectedLanguage', 'selectedLanguage'],\n      ['schedulerConfig.nylasBranding', 'nylasBranding'],\n    ]),\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>\n                {this.confirmationEmail?.booking_confirmed?.title || organizerName\n                  ? i18next.t('nylasConfirmationEmail.headerTitle_withOrganizer', { organizerName: organizerName })\n                  : i18next.t('nylasConfirmationEmail.headerTitle')}\n              </h3>\n              <p>{i18next.t('nylasConfirmationEmail.headerSubTitle')}</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                {i18next.t('nylasConfirmationEmail.editButtonText')}\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                {this.nylasBranding && (\n                  <div class=\"nylas-confirmation-email__row\">\n                    <label>\n                      {i18next.t('nylasConfirmationEmail.nylasBranding.label')}\n                      <span class=\"label-icon\">\n                        <tooltip-component>\n                          <info-icon slot=\"tooltip-icon\" />\n                          <span slot=\"tooltip-content\">{i18next.t('nylasConfirmationEmail.nylasBranding.tooltip.desc')}</span>\n                        </tooltip-component>\n                      </span>\n                    </label>\n                    <toggle-switch\n                      exportparts=\"ts_label: nce__toggle-label, ts_input: nce_toggle-input, ts_slider: nce_toggle-slider\"\n                      name={`confirmation-email-show-branding`}\n                      checked={this.confirmationEmail?.show_nylas_branding}\n                    />\n                  </div>\n                )}\n                <div class=\"nylas-confirmation-email__row\">\n                  <div class=\"subsection\">\n                    <div class=\"input-container\">\n                      <label>\n                        {i18next.t('nylasConfirmationEmail.companyLogoUrl.label')}\n                        <span class=\"label-icon\">\n                          <tooltip-component>\n                            <info-icon slot=\"tooltip-icon\" />\n                            <span slot=\"tooltip-content\">{i18next.t('nylasConfirmationEmail.companyLogoUrl.tooltip.desc')}</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                          errorMessage={this.invalidImageErrorMessage}\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>{i18next.t('nylasConfirmationEmail.emailMessage.header')}</h3>\n                    <div class=\"input-container\">\n                      <label htmlFor=\"title\">\n                        {i18next.t('nylasConfirmationEmail.emailMessage.label')}\n                        <span class=\"label-icon\">\n                          <tooltip-component>\n                            <info-icon slot=\"tooltip-icon\" />\n                            <span slot=\"tooltip-content\">{i18next.t('nylasConfirmationEmail.emailMessage.tooltip.desc')}</span>\n                          </tooltip-component>\n                        </span>\n                      </label>\n                      <input-component\n                        name=\"confirmation-email-title\"\n                        maxLength={60}\n                        placeholder={\n                          organizerName\n                            ? i18next.t('nylasConfirmationEmail.headerTitle_withOrganizer', { organizerName: organizerName })\n                            : i18next.t('nylasConfirmationEmail.headerTitle')\n                        }\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={i18next.t('nylasConfirmationEmail.emailMessage.additionalInfoLabel')}\n                        name=\"confirmation-email-body\"\n                        id=\"confirmation-email-body\"\n                        placeholder={i18next.t('nylasConfirmationEmail.emailMessage.additionalInfoPlaceholder')}\n                        tooltip={i18next.t('nylasConfirmationEmail.emailMessage.additionalInfoTooltip')}\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                {i18next.t('nylasConfirmationEmail.allHosts')}\n              </p>\n              <p>\n                <span class=\"summary-icon\">\n                  <clock-icon></clock-icon>\n                </span>\n                {i18next.t('nylasConfirmationEmail.immediatelyUponBooking')}\n              </p>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nylas-confirmed-event-card2.js

@@ -1,11 +1,11 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { R as RegisterComponent } from './register-component.js';
-import { a as debug, b as instance } from './utils.js';
+import { b as instance, a as debug } from './utils.js';
 import { d as defineCustomElement$3 } from './button-component2.js';
-import { d as defineCustomElement$2 } from './calendar-cancel.js';
+import { d as defineCustomElement$2 } from './calendar-check.js';
 import { d as defineCustomElement$1 } from './loading.js';
 
-const nylasConfirmedEventCardCss = ":host{display:block;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-color-blue-100:#e0e6f9;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif;--nylas-color-black:#000000;--nylas-color-grey-900:#2c2c2c;--nylas-color-grey-800:#4b4b4b;--nylas-color-grey-700:#6e6e6e;--nylas-color-grey-600:#8e8e8e;--nylas-color-grey-500:#b3b3b3;--nylas-color-grey-400:#cacaca;--nylas-color-grey-300:#e1e1e1;--nylas-color-grey-200:#eaeaea;--nylas-color-grey-100:#f5f5f5;--nylas-color-grey-50:#fbfcfe;--nylas-color-white:#ffffff;--nylas-color-red-900:#992222;--nylas-color-red-700:#cc4841;--nylas-color-red-500:#ff786a;--nylas-color-red-300:#ffa79e;--nylas-color-red-100:#ffc5bf;--nylas-color-red-50:#ffeae8;--nylas-color-blue-900:#213571;--nylas-color-blue-700:#314fa9;--nylas-color-blue-500:#4169e1;--nylas-color-blue-300:#bdccf9;--nylas-color-blue-100:#e0e6f9;--nylas-color-blue-50:#f6f8fd;--nylas-color-yellow-900:#7c6506;--nylas-color-yellow-700:#c29f09;--nylas-color-yellow-500:#f7c90b;--nylas-color-yellow-300:#f9de70;--nylas-color-yellow-100:#fceba9;--nylas-color-yellow-50:#fdf4ce;--nylas-color-green-900:#0e6b60;--nylas-color-green-700:#16a392;--nylas-color-green-500:#17c3b2;--nylas-color-green-300:#74dbd1;--nylas-color-green-100:#a2e7e0;--nylas-color-green-50:#d1f3f0;--nylas-color-purple-900:#643554;--nylas-color-purple-700:#954f7d;--nylas-color-purple-500:#c769a7;--nylas-color-purple-300:#dda5ca;--nylas-color-purple-100:#e0bdd6;--nylas-color-purple-50:#e9dde5;--nylas-color-sky-900:#20698f;--nylas-color-sky-700:#2b8fc2;--nylas-color-sky-500:#6dceff;--nylas-color-sky-300:#8fdaff;--nylas-color-sky-100:#b8e7ff;--nylas-color-sky-50:#d9f2ff}.nylas-confirmed-event-card{height:inherit;display:flex;flex-direction:column;justify-content:space-between;align-items:center;font-family:var(--nylas-font-family);width:400px;background-color:var(--nylas-base-0);color:var(--nylas-base-800);border-radius:var(--nylas-border-radius-2x);padding:1.5rem;position:relative;box-shadow:0px 1px 4px rgba(0, 0, 0, 0.1), 0px 3px 6px rgba(0, 0, 0, 0.06)}@media screen and (max-width: 768px){.nylas-confirmed-event-card{width:inherit}}.nylas-confirmed-event-card__title{font-size:18px;font-weight:600;line-height:24px;color:var(--nylas-base-900);text-align:center}.nylas-confirmed-event-description{font-size:16px;font-weight:500;color:var(--nylas-base-600)}.nylas-confirmed-event-card__calendar-icon{width:3rem;height:3rem;border-radius:50%;position:absolute;top:-1.25rem;left:50%;transform:translateX(-50%);background-color:var(--nylas-base-0);border:1px solid var(--nylas-base-200)}.nylas-confirmed-event-card__cta{width:100%;display:flex;flex-direction:row;align-items:flex-start;margin-top:1rem}calendar-cancel-icon{display:flex;align-items:center;justify-content:center;height:100%}button-component{width:100%}";
+const nylasConfirmedEventCardCss = ":host{display:block;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-color-blue-100:#e0e6f9;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif;--nylas-color-black:#000000;--nylas-color-grey-900:#2c2c2c;--nylas-color-grey-800:#4b4b4b;--nylas-color-grey-700:#6e6e6e;--nylas-color-grey-600:#8e8e8e;--nylas-color-grey-500:#b3b3b3;--nylas-color-grey-400:#cacaca;--nylas-color-grey-300:#e1e1e1;--nylas-color-grey-200:#eaeaea;--nylas-color-grey-100:#f5f5f5;--nylas-color-grey-50:#fbfcfe;--nylas-color-white:#ffffff;--nylas-color-red-900:#992222;--nylas-color-red-700:#cc4841;--nylas-color-red-500:#ff786a;--nylas-color-red-300:#ffa79e;--nylas-color-red-100:#ffc5bf;--nylas-color-red-50:#ffeae8;--nylas-color-blue-900:#213571;--nylas-color-blue-700:#314fa9;--nylas-color-blue-500:#4169e1;--nylas-color-blue-300:#bdccf9;--nylas-color-blue-100:#e0e6f9;--nylas-color-blue-50:#f6f8fd;--nylas-color-yellow-900:#7c6506;--nylas-color-yellow-700:#c29f09;--nylas-color-yellow-500:#f7c90b;--nylas-color-yellow-300:#f9de70;--nylas-color-yellow-100:#fceba9;--nylas-color-yellow-50:#fdf4ce;--nylas-color-green-900:#0e6b60;--nylas-color-green-700:#16a392;--nylas-color-green-500:#17c3b2;--nylas-color-green-300:#74dbd1;--nylas-color-green-100:#a2e7e0;--nylas-color-green-50:#d1f3f0;--nylas-color-purple-900:#643554;--nylas-color-purple-700:#954f7d;--nylas-color-purple-500:#c769a7;--nylas-color-purple-300:#dda5ca;--nylas-color-purple-100:#e0bdd6;--nylas-color-purple-50:#e9dde5;--nylas-color-sky-900:#20698f;--nylas-color-sky-700:#2b8fc2;--nylas-color-sky-500:#6dceff;--nylas-color-sky-300:#8fdaff;--nylas-color-sky-100:#b8e7ff;--nylas-color-sky-50:#d9f2ff}.nylas-confirmed-event-card{height:inherit;display:flex;flex-direction:column;justify-content:space-between;align-items:center;font-family:var(--nylas-font-family);width:400px;background-color:var(--nylas-base-0);color:var(--nylas-base-800);border-radius:var(--nylas-border-radius-2x);padding:1.5rem;position:relative;box-shadow:0px 1px 4px rgba(0, 0, 0, 0.1), 0px 3px 6px rgba(0, 0, 0, 0.06)}@media screen and (max-width: 768px){.nylas-confirmed-event-card{width:inherit}}.nylas-confirmed-event-card__title{font-size:18px;font-weight:600;line-height:24px;color:var(--nylas-base-900);text-align:center}.nylas-confirmed-event-description{font-size:16px;font-weight:500;color:var(--nylas-base-600)}.nylas-confirmed-event-card__calendar-icon{width:3rem;height:3rem;border-radius:50%;position:absolute;top:-1.25rem;left:50%;transform:translateX(-50%);background-color:var(--nylas-base-0);border:1px solid var(--nylas-base-200)}.nylas-confirmed-event-card__cta{width:100%;display:flex;flex-direction:row;align-items:flex-start;margin-top:1rem}calendar-check-icon{display:flex;align-items:center;justify-content:center;height:100%}button-component{width:100%}";
 const NylasConfirmedEventCardStyle0 = nylasConfirmedEventCardCss;
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -39,12 +39,18 @@ const NylasConfirmedEventCard = proxyCustomElement(class NylasConfirmedEventCard
         };
         this.configSettings = undefined;
         this.themeConfig = undefined;
+        this.selectedLanguage = undefined;
         this.confirmedEventInfo = undefined;
         this.isClosing = false;
     }
     themeConfigChanged(newThemeConfig) {
         this.applyThemeConfig(newThemeConfig);
     }
+    selectedLanguageChangedHandler(newVal, oldVal) {
+        if (newVal === oldVal)
+            return;
+        instance.changeLanguage(newVal);
+    }
     connectedCallback() {
         debug(`[nylas-confirmed-event-card] Component connected`);
     }
@@ -69,20 +75,23 @@ const NylasConfirmedEventCard = proxyCustomElement(class NylasConfirmedEventCard
         }
     }
     render() {
-        return (h(Host, { key: 'ffdaf23bd9e627de16d532d89f5b4a080f8ec88c', part: "ncec" }, h("div", { key: '3214b0e02823397ffe659c0d77cdeb26104b416e', class: "nylas-confirmed-event-card", part: "ncec__card" }, h("div", { key: '79f921d70421c441ca2feb896099a050aaac42d1', class: "nylas-confirmed-event-card__calendar-icon", part: "ncec__icon" }, h("calendar-cancel-icon", { key: '9c6386bf2cdd198f47af7b8244d930a7f451a4c1' })), h("h3", { key: 'be5603a03255b90cd62a2f48b11ee70ae6c7a697', class: "nylas-confirmed-event-card__title", part: "ncec__title" }, instance.t('confirmedEventCardTitle'), "!"), h("div", { key: '88fe62604c3b31332b14b50701e25b8e7fc414b6', class: "nylas-confirmed-event-card__description", part: "ncec__description" }, instance.t('confirmedEventCardDescription'), " ", this.configSettings?.organizer?.name || 'the participants', "."), h("div", { key: '0394b324bcb9c8c3ba99f837e7831e1507b0f52a', class: "nylas-confirmed-event-card__cta" }, h("button-component", { key: '2f04fbc0c973cd2a95337f3edf4d5354fd219fb8', variant: "basic", disabled: this.isClosing, part: "ncec__button-outline", onClick: this.handleCloseClicked }, this.isClosing ? `${instance.t('closingButton')}...` : `${instance.t('closeButton')}`)))));
+        return (h(Host, { key: '196444e0b93a298fd4107589a7ffbba19895fe05', part: "ncec" }, h("div", { key: 'a421437ec16e3354d51a0eed4e31c7c0de557278', class: "nylas-confirmed-event-card", part: "ncec__card" }, h("div", { key: '0da3ba5fcff4b46951adf128d4d4e6493860d56c', class: "nylas-confirmed-event-card__calendar-icon", part: "ncec__icon" }, h("calendar-check-icon", { key: 'a02d08a2367f962607651557eaa5fb7b9d8b75cf' })), h("h3", { key: '0494ca0a842a597bbc40cd3c720d2faf10d6b103', class: "nylas-confirmed-event-card__title", part: "ncec__title" }, instance.t('confirmedEventCardTitle'), "!"), h("div", { key: '4473fce54b8ad6176286f84cbd5554c8323312f0', class: "nylas-confirmed-event-card__description", part: "ncec__description" }, instance.t('confirmedEventCardDescription'), " ", this.configSettings?.organizer?.name || 'the participants', "."), h("div", { key: 'c0c17c8bccb4bc4b017a4a6aba62cdd48ebeea5a', class: "nylas-confirmed-event-card__cta" }, h("button-component", { key: '1dcb13cff4958b4549125c5457c9ab1e05078316', variant: "basic", disabled: this.isClosing, part: "ncec__button-outline", onClick: this.handleCloseClicked }, this.isClosing ? `${instance.t('closingButton')}...` : `${instance.t('closeButton')}`)))));
     }
     get host() { return this; }
     static get watchers() { return {
-        "themeConfig": ["themeConfigChanged"]
+        "themeConfig": ["themeConfigChanged"],
+        "selectedLanguage": ["selectedLanguageChangedHandler"]
     }; }
     static get style() { return NylasConfirmedEventCardStyle0; }
 }, [1, "nylas-confirmed-event-card", {
         "configSettings": [16],
         "themeConfig": [8, "theme-config"],
+        "selectedLanguage": [1, "selected-language"],
         "confirmedEventInfo": [16],
         "isClosing": [32]
     }, undefined, {
-        "themeConfig": ["themeConfigChanged"]
+        "themeConfig": ["themeConfigChanged"],
+        "selectedLanguage": ["selectedLanguageChangedHandler"]
     }]);
 __decorate([
     RegisterComponent({
@@ -90,6 +99,7 @@ __decorate([
         stateToProps: new Map([
             ['scheduler.configSettings', 'configSettings'],
             ['scheduler.themeConfig', 'themeConfig'],
+            ['scheduler.selectedLanguage', 'selectedLanguage'],
         ]),
         eventToProps: {
             closeConfirmEventCardClicked: async (_, nylasschedulerconnector) => {
@@ -110,7 +120,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["nylas-confirmed-event-card", "button-component", "calendar-cancel-icon", "loading-icon"];
+    const components = ["nylas-confirmed-event-card", "button-component", "calendar-check-icon", "loading-icon"];
     components.forEach(tagName => { switch (tagName) {
         case "nylas-confirmed-event-card":
             if (!customElements.get(tagName)) {
@@ -122,7 +132,7 @@ function defineCustomElement() {
                 defineCustomElement$3();
             }
             break;
-        case "calendar-cancel-icon":
+        case "calendar-check-icon":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/dist/components/nylas-confirmed-event-card2.js.map

@@ -1 +1 @@
-{"file":"nylas-confirmed-event-card2.js","mappings":"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","names":["i18next"],"sources":["src/components/scheduler/nylas-confirmed-event-card/nylas-confirmed-event-card.scss?tag=nylas-confirmed-event-card&encapsulation=shadow","src/components/scheduler/nylas-confirmed-event-card/nylas-confirmed-event-card.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  @include default-css-variables;\n}\n\n.nylas-confirmed-event-card {\n  height: inherit;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: center;\n  font-family: var(--nylas-font-family);\n  width: 400px;\n\n  @media #{$mobile} {\n    width: inherit;\n  }\n\n  background-color: var(--nylas-base-0);\n  color: var(--nylas-base-800);\n  border-radius: var(--nylas-border-radius-2x);\n  padding: 1.5rem;\n  position: relative;\n  box-shadow:\n    0px 1px 4px rgba(0, 0, 0, 0.1),\n    0px 3px 6px rgba(0, 0, 0, 0.06);\n}\n\n.nylas-confirmed-event-card__title {\n  font-size: 18px;\n  font-weight: 600;\n  line-height: 24px;\n  color: var(--nylas-base-900);\n  text-align: center;\n}\n\n.nylas-confirmed-event-description {\n  font-size: 16px;\n  font-weight: 500;\n  color: var(--nylas-base-600);\n}\n\n.nylas-confirmed-event-card__calendar-icon {\n  width: 3rem;\n  height: 3rem;\n  border-radius: 50%;\n  position: absolute;\n  top: -1.25rem;\n  left: 50%;\n  transform: translateX(-50%);\n  background-color: var(--nylas-base-0);\n  border: 1px solid var(--nylas-base-200);\n}\n\n.nylas-confirmed-event-card__cta {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n  margin-top: 1rem;\n}\n\ncalendar-cancel-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n\nbutton-component {\n  width: 100%;\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { Component, Element, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { NylasEvent, NylasSchedulerConnector, NylasSchedulerErrorResponse } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { debug } from '@/utils/utils';\nimport { ConfigSettings } from '@/stores/scheduler-store';\nimport i18next from '@/utils/i18n';\nimport { ThemeConfig } from '@nylas/core';\n\n/**\n * The `nylas-confirmed-event-card` component is a UI component that displays the confirmed event card.\n *\n * @part ncec - The confirmed event card host.\n * @part ncec__icon - The calendar icon.\n * @part ncec__title - The title of the confirmed event card.\n * @part ncec__description - The description of the confirmed event card.\n * @part ncec__button-outline - The close button CTA.\n * @part ncec__card - The confirmed event card.\n */\n@Component({\n  tag: 'nylas-confirmed-event-card',\n  styleUrl: 'nylas-confirmed-event-card.scss',\n  shadow: true,\n})\nexport class NylasConfirmedEventCard {\n  /**\n   * The host element.\n   * Used to manage the host element of the provider.\n   */\n  @Element() private host!: HTMLNylasConfirmedEventCardElement;\n\n  /**\n   * @standalone\n   * The config settings for the scheduler.\n   */\n  @Prop() readonly configSettings?: ConfigSettings;\n\n  /**\n   * @standalone\n   * The theme configuration.\n   */\n  @Prop({ attribute: 'theme-config' }) readonly themeConfig?: any;\n\n  /**\n   * The participant's name who booked the event / is logged in.\n   */\n  @Prop() readonly confirmedEventInfo!: Partial<NylasEvent>;\n\n  /**\n   * Closing state of the confirmed event card button.\n   */\n  @State() isClosing: boolean = false;\n\n  /**\n   * This event is fired when the close button is clicked on the confirmed event card.\n   */\n  @Event() readonly closeConfirmEventCardClicked!: EventEmitter<{ errorHandler?: (error: NylasSchedulerErrorResponse) => void }>;\n\n  /**\n   * This event is fired when an error occurs.\n   */\n  @Event() readonly confirmedEventCardError!: EventEmitter<NylasSchedulerErrorResponse>;\n\n  @Watch('themeConfig')\n  themeConfigChanged(newThemeConfig: ThemeConfig) {\n    this.applyThemeConfig(newThemeConfig);\n  }\n\n  connectedCallback() {\n    debug(`[nylas-confirmed-event-card] Component connected`);\n  }\n\n  async componentWillLoad() {\n    debug(`[nylas-confirmed-event-card] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-confirmed-event-card] Component did load`);\n    if (!this.confirmedEventInfo) {\n      console.warn(`[nylas-confirmed-event-card] No confirmed event info provided, \"confirmedEventInfo\" prop is required.`);\n    }\n    this.applyThemeConfig(this.themeConfig);\n  }\n\n  disconnectedCallback() {\n    debug(`[nylas-confirmed-event-card] Component disconnected`);\n  }\n\n  applyThemeConfig(themeConfig?: ThemeConfig) {\n    if (themeConfig) {\n      for (const [key, value] of Object.entries(themeConfig)) {\n        this.host.style.setProperty(`${key}`, value);\n      }\n    }\n  }\n\n  private handleCloseClicked = () => {\n    this.isClosing = true;\n    const errorHandler = (error: NylasSchedulerErrorResponse) => {\n      this.confirmedEventCardError.emit(error);\n      this.isClosing = false;\n    };\n    this.closeConfirmEventCardClicked.emit({ errorHandler });\n  };\n\n  @RegisterComponent<NylasConfirmedEventCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-confirmed-event-card',\n    stateToProps: new Map([\n      ['scheduler.configSettings', 'configSettings'],\n      ['scheduler.themeConfig', 'themeConfig'],\n    ]),\n    eventToProps: {\n      closeConfirmEventCardClicked: async (_: CustomEvent<{ errorHandler?: (error: NylasSchedulerErrorResponse) => void }>, nylasschedulerconnector: NylasSchedulerConnector) => {\n        const result = await nylasschedulerconnector.scheduler.resetConfirm();\n\n        const { errorHandler } = _.detail;\n        if (errorHandler && (!result || 'error' in result)) {\n          errorHandler(result);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host part=\"ncec\">\n        <div class=\"nylas-confirmed-event-card\" part=\"ncec__card\">\n          <div class=\"nylas-confirmed-event-card__calendar-icon\" part=\"ncec__icon\">\n            <calendar-cancel-icon />\n          </div>\n          <h3 class=\"nylas-confirmed-event-card__title\" part=\"ncec__title\">\n            {i18next.t('confirmedEventCardTitle')}!\n          </h3>\n          <div class=\"nylas-confirmed-event-card__description\" part=\"ncec__description\">\n            {i18next.t('confirmedEventCardDescription')} {this.configSettings?.organizer?.name || 'the participants'}.\n          </div>\n          <div class=\"nylas-confirmed-event-card__cta\">\n            <button-component variant=\"basic\" disabled={this.isClosing} part=\"ncec__button-outline\" onClick={this.handleCloseClicked}>\n              {this.isClosing ? `${i18next.t('closingButton')}...` : `${i18next.t('closeButton')}`}\n            </button-component>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nylas-confirmed-event-card2.js","mappings":"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","names":["i18next"],"sources":["src/components/scheduler/nylas-confirmed-event-card/nylas-confirmed-event-card.scss?tag=nylas-confirmed-event-card&encapsulation=shadow","src/components/scheduler/nylas-confirmed-event-card/nylas-confirmed-event-card.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  @include default-css-variables;\n}\n\n.nylas-confirmed-event-card {\n  height: inherit;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: center;\n  font-family: var(--nylas-font-family);\n  width: 400px;\n\n  @media #{$mobile} {\n    width: inherit;\n  }\n\n  background-color: var(--nylas-base-0);\n  color: var(--nylas-base-800);\n  border-radius: var(--nylas-border-radius-2x);\n  padding: 1.5rem;\n  position: relative;\n  box-shadow:\n    0px 1px 4px rgba(0, 0, 0, 0.1),\n    0px 3px 6px rgba(0, 0, 0, 0.06);\n}\n\n.nylas-confirmed-event-card__title {\n  font-size: 18px;\n  font-weight: 600;\n  line-height: 24px;\n  color: var(--nylas-base-900);\n  text-align: center;\n}\n\n.nylas-confirmed-event-description {\n  font-size: 16px;\n  font-weight: 500;\n  color: var(--nylas-base-600);\n}\n\n.nylas-confirmed-event-card__calendar-icon {\n  width: 3rem;\n  height: 3rem;\n  border-radius: 50%;\n  position: absolute;\n  top: -1.25rem;\n  left: 50%;\n  transform: translateX(-50%);\n  background-color: var(--nylas-base-0);\n  border: 1px solid var(--nylas-base-200);\n}\n\n.nylas-confirmed-event-card__cta {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n  margin-top: 1rem;\n}\n\ncalendar-check-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n\nbutton-component {\n  width: 100%;\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { Component, Element, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { LANGUAGE_CODE, NylasEvent, NylasSchedulerConnector, NylasSchedulerErrorResponse } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { debug } from '@/utils/utils';\nimport { ConfigSettings } from '@/stores/scheduler-store';\nimport i18next from '@/utils/i18n';\nimport { ThemeConfig } from '@nylas/core';\n\n/**\n * The `nylas-confirmed-event-card` component is a UI component that displays the confirmed event card.\n *\n * @part ncec - The confirmed event card host.\n * @part ncec__icon - The calendar icon.\n * @part ncec__title - The title of the confirmed event card.\n * @part ncec__description - The description of the confirmed event card.\n * @part ncec__button-outline - The close button CTA.\n * @part ncec__card - The confirmed event card.\n */\n@Component({\n  tag: 'nylas-confirmed-event-card',\n  styleUrl: 'nylas-confirmed-event-card.scss',\n  shadow: true,\n})\nexport class NylasConfirmedEventCard {\n  /**\n   * The host element.\n   * Used to manage the host element of the provider.\n   */\n  @Element() private host!: HTMLNylasConfirmedEventCardElement;\n\n  /**\n   * @standalone\n   * The config settings for the scheduler.\n   */\n  @Prop() readonly configSettings?: ConfigSettings;\n\n  /**\n   * @standalone\n   * The theme configuration.\n   */\n  @Prop({ attribute: 'theme-config' }) readonly themeConfig?: any;\n\n  /**\n   * The selected language.\n   */\n  @Prop({ attribute: 'selected-language' }) readonly selectedLanguage?: LANGUAGE_CODE;\n\n  /**\n   * The participant's name who booked the event / is logged in.\n   */\n  @Prop() readonly confirmedEventInfo!: Partial<NylasEvent>;\n\n  /**\n   * Closing state of the confirmed event card button.\n   */\n  @State() isClosing: boolean = false;\n\n  /**\n   * This event is fired when the close button is clicked on the confirmed event card.\n   */\n  @Event() readonly closeConfirmEventCardClicked!: EventEmitter<{ errorHandler?: (error: NylasSchedulerErrorResponse) => void }>;\n\n  /**\n   * This event is fired when an error occurs.\n   */\n  @Event() readonly confirmedEventCardError!: EventEmitter<NylasSchedulerErrorResponse>;\n\n  @Watch('themeConfig')\n  themeConfigChanged(newThemeConfig: ThemeConfig) {\n    this.applyThemeConfig(newThemeConfig);\n  }\n\n  @Watch('selectedLanguage')\n  selectedLanguageChangedHandler(newVal: LANGUAGE_CODE, oldVal: LANGUAGE_CODE) {\n    if (newVal === oldVal) return;\n    i18next.changeLanguage(newVal);\n  }\n\n  connectedCallback() {\n    debug(`[nylas-confirmed-event-card] Component connected`);\n  }\n\n  async componentWillLoad() {\n    debug(`[nylas-confirmed-event-card] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-confirmed-event-card] Component did load`);\n    if (!this.confirmedEventInfo) {\n      console.warn(`[nylas-confirmed-event-card] No confirmed event info provided, \"confirmedEventInfo\" prop is required.`);\n    }\n    this.applyThemeConfig(this.themeConfig);\n  }\n\n  disconnectedCallback() {\n    debug(`[nylas-confirmed-event-card] Component disconnected`);\n  }\n\n  applyThemeConfig(themeConfig?: ThemeConfig) {\n    if (themeConfig) {\n      for (const [key, value] of Object.entries(themeConfig)) {\n        this.host.style.setProperty(`${key}`, value);\n      }\n    }\n  }\n\n  private handleCloseClicked = () => {\n    this.isClosing = true;\n    const errorHandler = (error: NylasSchedulerErrorResponse) => {\n      this.confirmedEventCardError.emit(error);\n      this.isClosing = false;\n    };\n    this.closeConfirmEventCardClicked.emit({ errorHandler });\n  };\n\n  @RegisterComponent<NylasConfirmedEventCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-confirmed-event-card',\n    stateToProps: new Map([\n      ['scheduler.configSettings', 'configSettings'],\n      ['scheduler.themeConfig', 'themeConfig'],\n      ['scheduler.selectedLanguage', 'selectedLanguage'],\n    ]),\n    eventToProps: {\n      closeConfirmEventCardClicked: async (_: CustomEvent<{ errorHandler?: (error: NylasSchedulerErrorResponse) => void }>, nylasschedulerconnector: NylasSchedulerConnector) => {\n        const result = await nylasschedulerconnector.scheduler.resetConfirm();\n\n        const { errorHandler } = _.detail;\n        if (errorHandler && (!result || 'error' in result)) {\n          errorHandler(result);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host part=\"ncec\">\n        <div class=\"nylas-confirmed-event-card\" part=\"ncec__card\">\n          <div class=\"nylas-confirmed-event-card__calendar-icon\" part=\"ncec__icon\">\n            <calendar-check-icon />\n          </div>\n          <h3 class=\"nylas-confirmed-event-card__title\" part=\"ncec__title\">\n            {i18next.t('confirmedEventCardTitle')}!\n          </h3>\n          <div class=\"nylas-confirmed-event-card__description\" part=\"ncec__description\">\n            {i18next.t('confirmedEventCardDescription')} {this.configSettings?.organizer?.name || 'the participants'}.\n          </div>\n          <div class=\"nylas-confirmed-event-card__cta\">\n            <button-component variant=\"basic\" disabled={this.isClosing} part=\"ncec__button-outline\" onClick={this.handleCloseClicked}>\n              {this.isClosing ? `${i18next.t('closingButton')}...` : `${i18next.t('closeButton')}`}\n            </button-component>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nylas-custom-event-slug2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { R as RegisterComponent } from './register-component.js';
-import { a as debug, b as instance } from './utils.js';
+import { b as instance, a as debug } from './utils.js';
 import { d as defineCustomElement$6 } from './checkmark.js';
 import { d as defineCustomElement$5 } from './chevron.js';
 import { d as defineCustomElement$4 } from './copy.js';
@@ -42,6 +42,8 @@ const NylasCustomEventSlug = proxyCustomElement(class NylasCustomEventSlug exten
         this.urlSlug = undefined;
         this.focus = false;
         this.copied = false;
+        this.requiredError = instance.t('fieldRequired', { field: 'Slug' });
+        this.patternError = instance.t('invalidInputFormat', { field: 'Slug' });
     }
     connectedCallback() {
         debug('nylas-custom-event-slug', 'connectedCallback');
@@ -87,6 +89,8 @@ const NylasCustomEventSlug = proxyCustomElement(class NylasCustomEventSlug exten
         if (newVal === oldVal)
             return;
         instance.changeLanguage(newVal);
+        this.requiredError = instance.t('fieldRequired', { field: 'Slug' });
+        this.patternError = instance.t('invalidInputFormat', { field: 'Slug' });
     }
     async nylasFormInputChangeHandler(event) {
         const { name, value } = event.detail;
@@ -104,14 +108,14 @@ const NylasCustomEventSlug = proxyCustomElement(class NylasCustomEventSlug exten
         this.slugErrorMessage = '';
         this.internals.setValidity({});
         this.focus = false;
-        if (this.requiresSlug && this.urlSlug === '') {
-            this.internals.setValidity({ customError: true }, 'Slug is required');
-            this.slugErrorMessage = 'Slug cannot be blank';
+        if (this.requiresSlug && this.urlSlug.trim() === '') {
+            this.internals.setValidity({ customError: true }, instance.t('nylasCustomEventSlug.slugRequiredErrorMessage'));
+            this.slugErrorMessage = instance.t('nylasCustomEventSlug.slugRequiredErrorMessage');
             return;
         }
-        if (!/^[A-Za-z0-9_-]*$/.test(this.urlSlug)) {
-            this.internals.setValidity({ customError: true }, 'Invalid slug: Only letters, numbers, and hyphens are allowed.');
-            this.slugErrorMessage = 'Invalid slug: Only letters, numbers, and hyphens are allowed.';
+        if (!/^[A-Za-z0-9._-]*$/.test(this.urlSlug.trim())) {
+            this.internals.setValidity({ customError: true }, instance.t('nylasCustomEventSlug.slugErrorMessage'));
+            this.slugErrorMessage = instance.t('nylasCustomEventSlug.slugErrorMessage');
         }
     }
     formSubmittedHandler(event) {
@@ -137,7 +141,7 @@ const NylasCustomEventSlug = proxyCustomElement(class NylasCustomEventSlug exten
         if (!this.requiresSlug)
             return null;
         const isComponentReady = typeof this.urlSlug !== 'undefined';
-        return (h(Host, null, h("div", { class: "nylas-custom-event-slug", part: "nces" }, h("div", { class: "header", part: "nces__header" }, h("div", null, h("h3", null, instance.t('nylasCustomEventSlug.headerTitle')), h("p", null, instance.t('nylasCustomEventSlug.headerSubTitle'))), h("div", { class: "drawer-toggle", part: "nces__drawer-toggle--container" }, h("span", { class: `chevron ${this.isOpen ? 'open' : 'closed'} `, onClick: () => this.toggleDrawer() }, h("chevron-icon", { width: "24", height: "24" })))), this.isOpen && (h("div", { class: "nylas-custom-event-slug__body", part: "nces__body" }, h("div", { class: "nylas-custom-event-slug__section" }, h("div", { class: "nylas-custom-event-slug__row" }, h("div", { class: "input-container" }, h("label", null, instance.t('nylasCustomEventSlug.eventSlugLabel'), h("span", { class: "label-icon" }, h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, instance.t('nylasCustomEventSlug.tooltip.desc'))))), h("div", { class: { 'nylas-custom-event-slug__input-wrapper': true, 'focus': this.focus, 'error': !!this.slugErrorMessage } }, h("div", { slot: "prefix", class: "prefix" }, "/"), isComponentReady && (h("input-component", { name: "event-slug", id: "event-slug", type: "text", required: false, placeholder: "my-link-name", exportparts: "ic_input: nces__input-textfield", defaultValue: this.urlSlug })), h("div", { slot: "icon", class: { icon: true, disabled: !this.urlSlug }, onClick: () => !this.copied && !!this.urlSlug && this.copyToClipboard() }, this.copied ? (h("div", { class: "copied" }, h("checkmark-icon", { width: "12", height: "18" }), " ", instance.t('nylasCustomEventSlug.copied'))) : (h("copy-icon", { width: "12", height: "18" })))), this.slugErrorMessage && h("span", { class: "error-message" }, this.slugErrorMessage)))))))));
+        return (h(Host, null, h("div", { class: "nylas-custom-event-slug", part: "nces" }, h("div", { class: "header", part: "nces__header" }, h("div", null, h("h3", null, instance.t('nylasCustomEventSlug.headerTitle')), h("p", null, instance.t('nylasCustomEventSlug.headerSubTitle'))), h("div", { class: "drawer-toggle", part: "nces__drawer-toggle--container" }, h("span", { class: `chevron ${this.isOpen ? 'open' : 'closed'} `, onClick: () => this.toggleDrawer() }, h("chevron-icon", { width: "24", height: "24" })))), this.isOpen && (h("div", { class: "nylas-custom-event-slug__body", part: "nces__body" }, h("div", { class: "nylas-custom-event-slug__section" }, h("div", { class: "nylas-custom-event-slug__row" }, h("div", { class: "input-container" }, h("label", null, instance.t('nylasCustomEventSlug.eventSlugLabel'), h("span", { class: "label-icon" }, h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, instance.t('nylasCustomEventSlug.tooltip.desc'))))), h("div", { class: { 'nylas-custom-event-slug__input-wrapper': true, 'focus': this.focus, 'error': !!this.slugErrorMessage } }, h("div", { slot: "prefix", class: "prefix" }, "/"), isComponentReady && (h("input-component", { name: "event-slug", id: "event-slug", type: "text", required: false, placeholder: "my-link-name", exportparts: "ic_input: nces__input-textfield", defaultValue: this.urlSlug, requiredError: this.requiredError, patternError: this.patternError })), h("div", { slot: "icon", class: { icon: true, disabled: !this.urlSlug }, onClick: () => !this.copied && !!this.urlSlug && this.copyToClipboard() }, this.copied ? (h("div", { class: "copied" }, h("checkmark-icon", { width: "12", height: "18" }), " ", instance.t('nylasCustomEventSlug.copied'))) : (h("copy-icon", { width: "12", height: "18" })))), this.slugErrorMessage && h("span", { class: "error-message" }, this.slugErrorMessage)))))))));
     }
     static get formAssociated() { return true; }
     get host() { return this; }
@@ -157,7 +161,9 @@ const NylasCustomEventSlug = proxyCustomElement(class NylasCustomEventSlug exten
         "selectedLanguage": [1, "selected-language"],
         "urlSlug": [32],
         "focus": [32],
-        "copied": [32]
+        "copied": [32],
+        "requiredError": [32],
+        "patternError": [32]
     }, [[0, "nylasFormInputChanged", "nylasFormInputChangeHandler"], [0, "nylasFormInputFocused", "nylasFormInputFocusHandler"], [0, "nylasFormInputBlurred", "nylasFormInputBlurHandler"], [8, "formSubmitted", "formSubmittedHandler"]], {
         "name": ["elementNameChangedHandler"],
         "selectedConfiguration": ["selectedConfigurationChangedHandler"],

package/dist/components/nylas-custom-event-slug2.js.map

@@ -1 +1 @@
-{"file":"nylas-custom-event-slug2.js","mappings":"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","names":["i18next"],"sources":["src/components/scheduler-editor/nylas-custom-event-slug/nylas-custom-event-slug.scss?tag=nylas-custom-event-slug&encapsulation=shadow","src/components/scheduler-editor/nylas-custom-event-slug/nylas-custom-event-slug.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n@import '../../../common/mixins/inputs.scss';\n\n:host {\n  display: block;\n  @include default-css-variables;\n  width: inherit;\n}\n\n.nylas-custom-event-slug {\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\n    h3 {\n      border-radius: var(--nylas-border-radius-2x);\n      margin: 0;\n      font-size: 16px;\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    .drawer-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-custom-event-slug__body {\n    display: grid;\n    grid-template-columns: 1fr;\n    background-color: var(--nylas-base-25);\n    border-radius: 0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x);\n    border-top: 1px solid var(--nylas-base-200);\n\n    @media #{$mobile} {\n      grid-template-columns: 1fr;\n    }\n\n    .nylas-custom-event-slug__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-custom-event-slug__row {\n        display: flex;\n        align-items: center;\n        gap: 1rem;\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: 16px;\n          font-weight: 500;\n          line-height: 24px;\n          color: var(--nylas-base-900);\n        }\n\n        .input-container {\n          width: 100%;\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-custom-event-slug__input-wrapper {\n    @include textfield;\n    width: -moz-available;\n    width: -webkit-fill-available;\n    display: flex;\n    flex-direction: row;\n    gap: 0.125rem;\n    border-radius: var(--nylas-border-radius-2x);\n    z-index: 1;\n\n    &.focus {\n      outline: 2px solid var(--nylas-primary);\n    }\n\n    &.error {\n      border-color: var(--nylas-error);\n      outline: none;\n    }\n\n    input-component::part(ic__input) {\n      outline: none;\n      border: none;\n      width: 100%;\n      font-size: 16px;\n      height: auto;\n      padding-left: 0px;\n    }\n\n    .prefix {\n      z-index: 0;\n      margin-top: 1px;\n      color: var(--nylas-base-400);\n      font-weight: 500;\n      font-size: 24px;\n    }\n\n    .icon {\n      margin-right: 0.25rem;\n      padding: 0 0.75rem;\n      height: 100%;\n      display: flex;\n      align-items: center;\n      right: 0;\n      cursor: pointer;\n      user-select: none;\n\n      &.disabled {\n        cursor: not-allowed;\n      }\n\n      &:hover {\n        svg path {\n          fill: var(--nylas-primary);\n        }\n      }\n\n      &:active {\n        svg path {\n          fill: var(--nylas-base-500);\n        }\n      }\n\n      .copied {\n        display: flex;\n        align-items: center;\n        font-size: 0.875rem;\n        gap: 0.125rem;\n      }\n    }\n  }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration } from '@nylas/core';\nimport i18next from '@/utils/i18n';\nimport { LANGUAGE_CODE } from '@/common/constants';\n\n/**\n * The `nylas-custom-event-slug` component is a UI component that allows users to add a custom URL slug for their event link.\n *\n * @part nces - The nylas-custom-event-slug container\n * @part nces__body - The body of the event communication section\n * @part nces__header - The header of the event communication section\n * @part nces__drawer-toggle--container - The card's drawer toggle container\n * @part nces__input-textfield - The custom slug input textfield\n */\n@Component({\n  tag: 'nylas-custom-event-slug',\n  styleUrl: 'nylas-custom-event-slug.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasCustomEventSlug {\n  @Element() host!: HTMLNylasCustomEventSlugElement;\n  /**\n   * The selected config\n   */\n  @Prop() selectedConfiguration?: Configuration;\n  /**\n   * The default custom event slug\n   */\n  @Prop() defaultUrlSlug?: string;\n  /**\n   * Is the custom event slug card expanded\n   */\n  @Prop() isOpen: boolean = true;\n  /**\n   * Slug error message\n   */\n  @Prop() slugErrorMessage: string = '';\n  /**\n   * The name of the component\n   */\n  @Prop() name: string = 'custom-event-slug';\n  /**\n   * Indicates if a slug is required for the configuration.\n   * When set to true, the user must enter a slug when creating or editing a configuration.\n   * The slug is used for hosted pages that are public.\n   */\n  @Prop() requiresSlug: boolean = false;\n  /**\n   * The selected language.\n   */\n  @Prop() selectedLanguage?: LANGUAGE_CODE;\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The URL slug state\n   */\n  @State() urlSlug!: string;\n\n  /**\n   * The focus state of the input container.\n   */\n  @State() focus = false;\n\n  /**\n   * The copied state for the copy to clipboard button\n   */\n  @State() copied = false;\n\n  /**\n   * This event is fired when the slug value changes\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n    valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n  }>;\n\n  // Lifecycle methods\n  connectedCallback() {\n    debug('nylas-custom-event-slug', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-custom-event-slug', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-custom-event-slug', 'componentWillLoad');\n    // See comment in the @Watch('name') decorator for more information.\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-custom-event-slug', 'componentDidLoad');\n    if (this.selectedConfiguration) {\n      this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n    } else {\n      console.log('No selected configuration found');\n      this.urlSlug = this.defaultUrlSlug || '';\n    }\n  }\n\n  componentWillUpdate() {\n    debug('nylas-custom-event-slug', 'componentWillUpdate');\n  }\n\n  componentDidUpdate() {\n    debug('nylas-custom-event-slug', 'componentDidUpdate');\n  }\n\n  componentWillRender() {\n    debug('nylas-custom-event-slug', 'componentWillRender');\n  }\n\n  componentDidRender() {\n    debug('nylas-custom-event-slug', 'componentDidRender');\n  }\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-custom-event-slug', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('selectedConfiguration')\n  selectedConfigurationChangedHandler(newValue: Configuration) {\n    debug('nylas-custom-booking-flow', 'selectedConfigurationChangedHandler', newValue);\n    this.urlSlug = newValue?.slug || this.defaultUrlSlug || '';\n  }\n\n  @Watch('selectedLanguage')\n  selectedLanguageChangedHandler(newVal: LANGUAGE_CODE, oldVal: LANGUAGE_CODE) {\n    if (newVal === oldVal) return;\n    i18next.changeLanguage(newVal);\n  }\n\n  @Listen('nylasFormInputChanged')\n  async nylasFormInputChangeHandler(event: CustomEvent<{ value: string; name: string }>) {\n    const { name, value } = event.detail;\n    this.internals.setValidity({});\n\n    if (name === 'event-slug') {\n      this.urlSlug = value;\n      this.internals.setFormValue(JSON.stringify(value), this.name);\n      this.valueChanged.emit({ value: JSON.stringify(value), name: this.name });\n    }\n  }\n\n  @Listen('nylasFormInputFocused')\n  async nylasFormInputFocusHandler() {\n    this.focus = true;\n  }\n\n  @Listen('nylasFormInputBlurred')\n  async nylasFormInputBlurHandler() {\n    this.slugErrorMessage = '';\n    this.internals.setValidity({});\n    this.focus = false;\n    if (this.requiresSlug && this.urlSlug === '') {\n      this.internals.setValidity({ customError: true }, 'Slug is required');\n      this.slugErrorMessage = 'Slug cannot be blank';\n      return;\n    }\n    if (!/^[A-Za-z0-9_-]*$/.test(this.urlSlug)) {\n      this.internals.setValidity({ customError: true }, 'Invalid slug: Only letters, numbers, and hyphens are allowed.');\n      this.slugErrorMessage = 'Invalid slug: Only letters, numbers, and hyphens are allowed.';\n    }\n  }\n\n  @Listen('formSubmitted', { target: 'window' })\n  formSubmittedHandler(event: CustomEvent) {\n    debug('nylas-event-title', 'formSubmittedHandler', event);\n    this.nylasFormInputBlurHandler();\n  }\n\n  toggleDrawer() {\n    this.isOpen = !this.isOpen;\n  }\n\n  async copyToClipboard() {\n    try {\n      await navigator.clipboard.writeText(`${this.urlSlug}`);\n\n      this.copied = true;\n      setTimeout(() => {\n        this.copied = false;\n      }, 1000);\n    } catch (err) {\n      console.error('Failed to copy: ', err);\n    }\n  }\n\n  @RegisterComponent<NylasCustomEventSlug, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-custom-event-slug',\n    stateToProps: new Map([\n      ['schedulerConfig.requiresSlug', 'requiresSlug'],\n      ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],\n      ['schedulerConfig.selectedLanguage', 'selectedLanguage'],\n    ]),\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    if (!this.requiresSlug) return null;\n    const isComponentReady = typeof this.urlSlug !== 'undefined';\n    return (\n      <Host>\n        <div class=\"nylas-custom-event-slug\" part=\"nces\">\n          <div class=\"header\" part=\"nces__header\">\n            <div>\n              <h3>{i18next.t('nylasCustomEventSlug.headerTitle')}</h3>\n              <p>{i18next.t('nylasCustomEventSlug.headerSubTitle')}</p>\n            </div>\n            <div class=\"drawer-toggle\" part=\"nces__drawer-toggle--container\">\n              <span class={`chevron ${this.isOpen ? 'open' : 'closed'} `} onClick={() => this.toggleDrawer()}>\n                <chevron-icon width=\"24\" height=\"24\" />\n              </span>\n            </div>\n          </div>\n\n          {this.isOpen && (\n            <div class=\"nylas-custom-event-slug__body\" part=\"nces__body\">\n              <div class=\"nylas-custom-event-slug__section\">\n                <div class=\"nylas-custom-event-slug__row\">\n                  <div class=\"input-container\">\n                    <label>\n                      {i18next.t('nylasCustomEventSlug.eventSlugLabel')}\n                      <span class=\"label-icon\">\n                        <tooltip-component>\n                          <info-icon slot=\"tooltip-icon\" />\n                          <span slot=\"tooltip-content\">{i18next.t('nylasCustomEventSlug.tooltip.desc')}</span>\n                        </tooltip-component>\n                      </span>\n                    </label>\n\n                    <div class={{ 'nylas-custom-event-slug__input-wrapper': true, 'focus': this.focus, 'error': !!this.slugErrorMessage }}>\n                      <div slot=\"prefix\" class=\"prefix\">\n                        &#47;\n                      </div>\n                      {isComponentReady && (\n                        <input-component\n                          name=\"event-slug\"\n                          id=\"event-slug\"\n                          type=\"text\"\n                          required={false}\n                          placeholder=\"my-link-name\"\n                          exportparts=\"ic_input: nces__input-textfield\"\n                          defaultValue={this.urlSlug}\n                        />\n                      )}\n                      <div slot=\"icon\" class={{ icon: true, disabled: !this.urlSlug }} onClick={() => !this.copied && !!this.urlSlug && this.copyToClipboard()}>\n                        {this.copied ? (\n                          <div class=\"copied\">\n                            <checkmark-icon width=\"12\" height=\"18\" /> {i18next.t('nylasCustomEventSlug.copied')}\n                          </div>\n                        ) : (\n                          <copy-icon width=\"12\" height=\"18\" />\n                        )}\n                      </div>\n                    </div>\n                    {this.slugErrorMessage && <span class=\"error-message\">{this.slugErrorMessage}</span>}\n                  </div>\n                </div>\n              </div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nylas-custom-event-slug2.js","mappings":"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","names":["i18next"],"sources":["src/components/scheduler-editor/nylas-custom-event-slug/nylas-custom-event-slug.scss?tag=nylas-custom-event-slug&encapsulation=shadow","src/components/scheduler-editor/nylas-custom-event-slug/nylas-custom-event-slug.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n@import '../../../common/mixins/inputs.scss';\n\n:host {\n  display: block;\n  @include default-css-variables;\n  width: inherit;\n}\n\n.nylas-custom-event-slug {\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\n    h3 {\n      border-radius: var(--nylas-border-radius-2x);\n      margin: 0;\n      font-size: 16px;\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    .drawer-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-custom-event-slug__body {\n    display: grid;\n    grid-template-columns: 1fr;\n    background-color: var(--nylas-base-25);\n    border-radius: 0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x);\n    border-top: 1px solid var(--nylas-base-200);\n\n    @media #{$mobile} {\n      grid-template-columns: 1fr;\n    }\n\n    .nylas-custom-event-slug__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-custom-event-slug__row {\n        display: flex;\n        align-items: center;\n        gap: 1rem;\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: 16px;\n          font-weight: 500;\n          line-height: 24px;\n          color: var(--nylas-base-900);\n        }\n\n        .input-container {\n          width: 100%;\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-custom-event-slug__input-wrapper {\n    @include textfield;\n    width: -moz-available;\n    width: -webkit-fill-available;\n    display: flex;\n    flex-direction: row;\n    gap: 0.125rem;\n    border-radius: var(--nylas-border-radius-2x);\n    z-index: 1;\n\n    &.focus {\n      outline: 2px solid var(--nylas-primary);\n    }\n\n    &.error {\n      border-color: var(--nylas-error);\n      outline: none;\n    }\n\n    input-component::part(ic__input) {\n      outline: none;\n      border: none;\n      width: 100%;\n      font-size: 16px;\n      height: auto;\n      padding-left: 0px;\n    }\n\n    .prefix {\n      z-index: 0;\n      margin-top: 1px;\n      color: var(--nylas-base-400);\n      font-weight: 500;\n      font-size: 24px;\n    }\n\n    .icon {\n      margin-right: 0.25rem;\n      padding: 0 0.75rem;\n      height: 100%;\n      display: flex;\n      align-items: center;\n      right: 0;\n      cursor: pointer;\n      user-select: none;\n\n      &.disabled {\n        cursor: not-allowed;\n      }\n\n      &:hover {\n        svg path {\n          fill: var(--nylas-primary);\n        }\n      }\n\n      &:active {\n        svg path {\n          fill: var(--nylas-base-500);\n        }\n      }\n\n      .copied {\n        display: flex;\n        align-items: center;\n        font-size: 0.875rem;\n        gap: 0.125rem;\n      }\n    }\n  }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration } from '@nylas/core';\nimport i18next from '@/utils/i18n';\nimport { LANGUAGE_CODE } from '@/common/constants';\n\n/**\n * The `nylas-custom-event-slug` component is a UI component that allows users to add a custom URL slug for their event link.\n *\n * @part nces - The nylas-custom-event-slug container\n * @part nces__body - The body of the event communication section\n * @part nces__header - The header of the event communication section\n * @part nces__drawer-toggle--container - The card's drawer toggle container\n * @part nces__input-textfield - The custom slug input textfield\n */\n@Component({\n  tag: 'nylas-custom-event-slug',\n  styleUrl: 'nylas-custom-event-slug.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasCustomEventSlug {\n  @Element() host!: HTMLNylasCustomEventSlugElement;\n  /**\n   * The selected config\n   */\n  @Prop() selectedConfiguration?: Configuration;\n  /**\n   * The default custom event slug\n   */\n  @Prop() defaultUrlSlug?: string;\n  /**\n   * Is the custom event slug card expanded\n   */\n  @Prop() isOpen: boolean = true;\n  /**\n   * Slug error message\n   */\n  @Prop() slugErrorMessage: string = '';\n  /**\n   * The name of the component\n   */\n  @Prop() name: string = 'custom-event-slug';\n  /**\n   * Indicates if a slug is required for the configuration.\n   * When set to true, the user must enter a slug when creating or editing a configuration.\n   * The slug is used for hosted pages that are public.\n   */\n  @Prop() requiresSlug: boolean = false;\n  /**\n   * The selected language.\n   */\n  @Prop() selectedLanguage?: LANGUAGE_CODE;\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The URL slug state\n   */\n  @State() urlSlug!: string;\n\n  /**\n   * The focus state of the input container.\n   */\n  @State() focus = false;\n\n  /**\n   * The copied state for the copy to clipboard button\n   */\n  @State() copied = false;\n\n  @State() requiredError: string = i18next.t('fieldRequired', { field: 'Slug' });\n  @State() patternError: string = i18next.t('invalidInputFormat', { field: 'Slug' });\n\n  /**\n   * This event is fired when the slug value changes\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n    valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n  }>;\n\n  // Lifecycle methods\n  connectedCallback() {\n    debug('nylas-custom-event-slug', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-custom-event-slug', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-custom-event-slug', 'componentWillLoad');\n    // See comment in the @Watch('name') decorator for more information.\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-custom-event-slug', 'componentDidLoad');\n    if (this.selectedConfiguration) {\n      this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n    } else {\n      console.log('No selected configuration found');\n      this.urlSlug = this.defaultUrlSlug || '';\n    }\n  }\n\n  componentWillUpdate() {\n    debug('nylas-custom-event-slug', 'componentWillUpdate');\n  }\n\n  componentDidUpdate() {\n    debug('nylas-custom-event-slug', 'componentDidUpdate');\n  }\n\n  componentWillRender() {\n    debug('nylas-custom-event-slug', 'componentWillRender');\n  }\n\n  componentDidRender() {\n    debug('nylas-custom-event-slug', 'componentDidRender');\n  }\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-custom-event-slug', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('selectedConfiguration')\n  selectedConfigurationChangedHandler(newValue: Configuration) {\n    debug('nylas-custom-booking-flow', 'selectedConfigurationChangedHandler', newValue);\n    this.urlSlug = newValue?.slug || this.defaultUrlSlug || '';\n  }\n\n  @Watch('selectedLanguage')\n  selectedLanguageChangedHandler(newVal: LANGUAGE_CODE, oldVal: LANGUAGE_CODE) {\n    if (newVal === oldVal) return;\n    i18next.changeLanguage(newVal);\n    this.requiredError = i18next.t('fieldRequired', { field: 'Slug' });\n    this.patternError = i18next.t('invalidInputFormat', { field: 'Slug' });\n  }\n\n  @Listen('nylasFormInputChanged')\n  async nylasFormInputChangeHandler(event: CustomEvent<{ value: string; name: string }>) {\n    const { name, value } = event.detail;\n    this.internals.setValidity({});\n\n    if (name === 'event-slug') {\n      this.urlSlug = value;\n      this.internals.setFormValue(JSON.stringify(value), this.name);\n      this.valueChanged.emit({ value: JSON.stringify(value), name: this.name });\n    }\n  }\n\n  @Listen('nylasFormInputFocused')\n  async nylasFormInputFocusHandler() {\n    this.focus = true;\n  }\n\n  @Listen('nylasFormInputBlurred')\n  async nylasFormInputBlurHandler() {\n    this.slugErrorMessage = '';\n    this.internals.setValidity({});\n    this.focus = false;\n    if (this.requiresSlug && this.urlSlug.trim() === '') {\n      this.internals.setValidity({ customError: true }, i18next.t('nylasCustomEventSlug.slugRequiredErrorMessage'));\n      this.slugErrorMessage = i18next.t('nylasCustomEventSlug.slugRequiredErrorMessage');\n      return;\n    }\n    if (!/^[A-Za-z0-9._-]*$/.test(this.urlSlug.trim())) {\n      this.internals.setValidity({ customError: true }, i18next.t('nylasCustomEventSlug.slugErrorMessage'));\n      this.slugErrorMessage = i18next.t('nylasCustomEventSlug.slugErrorMessage');\n    }\n  }\n\n  @Listen('formSubmitted', { target: 'window' })\n  formSubmittedHandler(event: CustomEvent) {\n    debug('nylas-event-title', 'formSubmittedHandler', event);\n    this.nylasFormInputBlurHandler();\n  }\n\n  toggleDrawer() {\n    this.isOpen = !this.isOpen;\n  }\n\n  async copyToClipboard() {\n    try {\n      await navigator.clipboard.writeText(`${this.urlSlug}`);\n\n      this.copied = true;\n      setTimeout(() => {\n        this.copied = false;\n      }, 1000);\n    } catch (err) {\n      console.error('Failed to copy: ', err);\n    }\n  }\n\n  @RegisterComponent<NylasCustomEventSlug, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-custom-event-slug',\n    stateToProps: new Map([\n      ['schedulerConfig.requiresSlug', 'requiresSlug'],\n      ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],\n      ['schedulerConfig.selectedLanguage', 'selectedLanguage'],\n    ]),\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    if (!this.requiresSlug) return null;\n    const isComponentReady = typeof this.urlSlug !== 'undefined';\n    return (\n      <Host>\n        <div class=\"nylas-custom-event-slug\" part=\"nces\">\n          <div class=\"header\" part=\"nces__header\">\n            <div>\n              <h3>{i18next.t('nylasCustomEventSlug.headerTitle')}</h3>\n              <p>{i18next.t('nylasCustomEventSlug.headerSubTitle')}</p>\n            </div>\n            <div class=\"drawer-toggle\" part=\"nces__drawer-toggle--container\">\n              <span class={`chevron ${this.isOpen ? 'open' : 'closed'} `} onClick={() => this.toggleDrawer()}>\n                <chevron-icon width=\"24\" height=\"24\" />\n              </span>\n            </div>\n          </div>\n\n          {this.isOpen && (\n            <div class=\"nylas-custom-event-slug__body\" part=\"nces__body\">\n              <div class=\"nylas-custom-event-slug__section\">\n                <div class=\"nylas-custom-event-slug__row\">\n                  <div class=\"input-container\">\n                    <label>\n                      {i18next.t('nylasCustomEventSlug.eventSlugLabel')}\n                      <span class=\"label-icon\">\n                        <tooltip-component>\n                          <info-icon slot=\"tooltip-icon\" />\n                          <span slot=\"tooltip-content\">{i18next.t('nylasCustomEventSlug.tooltip.desc')}</span>\n                        </tooltip-component>\n                      </span>\n                    </label>\n\n                    <div class={{ 'nylas-custom-event-slug__input-wrapper': true, 'focus': this.focus, 'error': !!this.slugErrorMessage }}>\n                      <div slot=\"prefix\" class=\"prefix\">\n                        &#47;\n                      </div>\n                      {isComponentReady && (\n                        <input-component\n                          name=\"event-slug\"\n                          id=\"event-slug\"\n                          type=\"text\"\n                          required={false}\n                          placeholder=\"my-link-name\"\n                          exportparts=\"ic_input: nces__input-textfield\"\n                          defaultValue={this.urlSlug}\n                          requiredError={this.requiredError}\n                          patternError={this.patternError}\n                        />\n                      )}\n                      <div slot=\"icon\" class={{ icon: true, disabled: !this.urlSlug }} onClick={() => !this.copied && !!this.urlSlug && this.copyToClipboard()}>\n                        {this.copied ? (\n                          <div class=\"copied\">\n                            <checkmark-icon width=\"12\" height=\"18\" /> {i18next.t('nylasCustomEventSlug.copied')}\n                          </div>\n                        ) : (\n                          <copy-icon width=\"12\" height=\"18\" />\n                        )}\n                      </div>\n                    </div>\n                    {this.slugErrorMessage && <span class=\"error-message\">{this.slugErrorMessage}</span>}\n                  </div>\n                </div>\n              </div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -238,7 +238,7 @@ const NylasDatePicker = proxyCustomElement(class NylasDatePicker extends HTMLEle
         });
     }
     render() {
-        return (h(Host, { key: '36322bd1badb927a3d8505334c339b220a81c946', part: "ndp" }, h("div", { key: '666e06338a8be95fdf5a18d0d5e1db006ce0623e', class: "nylas-date-picker" }, h("div", { key: '7429e08d3dc984205a07efb8a7a0dc21d8b3b6b2', class: "title", part: "ndp__title" }, this.configSettings?.name ? (h("h1", null, this.configSettings?.name)) : (this.configSettings?.organizer?.name && (h("h1", null, h("person-icon", null), this.configSettings?.organizer?.name || 'Organizer'))), h("p", { key: 'a5b1770d7f39d173a37f4ee627645f43230b83eb' }, h("clock-icon", { key: '383105a9bfdb7e45e414941c06278de8b73e705f' }), this.eventDuration ? convertMinutesToHoursAndMinutes(this.eventDuration) : `- ${instance.t('time.minutes')}`)), h("div", { key: '91cd7691b593bd8af1bd930f0206cc284826ee83', class: 'header flex-row' }, h("h2", { key: 'c490b7fe8a6a04ba8fda318b41a7ad5db9c13d0c', part: 'ndp__month-header' }, h("strong", { key: 'bfe557291e300cc8ec876d889909168fa5cd798b' }, translateMonth(this.month.toLocaleDateString('en-US', { month: 'long' }).toLowerCase())), "\u00A0", this.month.toLocaleDateString(undefined, { year: 'numeric' })), h("div", { key: 'a19535626041e7cb3550aabd677fd788bf003b03', class: 'pagination' }, h("button", { key: '6174f0128f51c6ad814473425da3e983e1dd80bc', title: "Previous month", onClick: () => this.changeMonth(-1), class: { 'chevron-left': true, 'button': true }, disabled: this.month <= new Date(), part: "ndp__month-button" }, h("chevron-icon", { key: '9c6c965ca7273205229ee6f3918226588b9cceb6' })), h("button", { key: 'd83a846832a897e8a35242093ba01fc04497b0ff', title: "Next month", onClick: () => this.changeMonth(1), class: { 'chevron-right': true, 'button': true }, disabled: this.disableNextMonthButton, part: "ndp__month-button" }, h("chevron-icon", { key: 'b7106b3807f93e73eb86102a7ce4b81997a2c57a' })))), h("div", { key: '3c5809a8f1447005d82a75bc035a52918397a423', class: 'dates' }, [
+        return (h(Host, { key: 'ecd613f2fec98a00bbb10ac6363097ebede0185d', part: "ndp" }, h("div", { key: '33bb461fca297b69b85ab9f8d17cddb51593dde8', class: "nylas-date-picker" }, h("div", { key: '4da1d51d7bb36838923263563c2f6b1331542fda', class: "title", part: "ndp__title" }, this.configSettings?.name ? (h("h1", null, this.configSettings?.name)) : (this.configSettings?.organizer?.name && (h("h1", null, h("person-icon", null), this.configSettings?.organizer?.name || 'Organizer'))), h("p", { key: '8ad906a6b34220b4d35f8dcd1c642d14c3f7293a' }, h("clock-icon", { key: '11d2b21b9ba5fb9a31f9694fc2eaa417b6743957' }), this.eventDuration ? convertMinutesToHoursAndMinutes(this.eventDuration) : `- ${instance.t('time.minutes')}`)), h("div", { key: '676de20b5616fdbb439567ca27f972040a086b70', class: 'header flex-row' }, h("h2", { key: 'aa60c555eb8bd7b3ef1ee033b8fc1b74f5a78cdb', part: 'ndp__month-header' }, h("strong", { key: '7661ad8cf3c91063617a953aba02c74202910803' }, translateMonth(this.month.toLocaleDateString('en-US', { month: 'long' }).toLowerCase())), "\u00A0", this.month.toLocaleDateString(undefined, { year: 'numeric' })), h("div", { key: 'dc4087fff602efe458a75b542cf845e6c1599532', class: 'pagination' }, h("button", { key: '34754cf95f2645641597a82b66805e1d92e8122d', title: "Previous month", onClick: () => this.changeMonth(-1), class: { 'chevron-left': true, 'button': true }, disabled: this.month <= new Date(), part: "ndp__month-button" }, h("chevron-icon", { key: '376aba646a4910ab430ec239f6ccab083df41334' })), h("button", { key: '01e5e39d56246416bc9270f6a0c2d32202db339a', title: "Next month", onClick: () => this.changeMonth(1), class: { 'chevron-right': true, 'button': true }, disabled: this.disableNextMonthButton, part: "ndp__month-button" }, h("chevron-icon", { key: '492223b45186485d55e403a16d75e08c25a070f5' })))), h("div", { key: 'c506414f7ae93d4b995054afa18a313ce02c2ca6', class: 'dates' }, [
             instance.t('days.sunday'),
             instance.t('days.monday'),
             instance.t('days.tuesday'),