@nylas/web-elements 1.1.0-canary.13 → 1.1.0-canary.14

package/dist/components/nylas-cancel-booking-form2.js.map

@@ -1 +1 @@
-{"file":"nylas-cancel-booking-form2.js","mappings":"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","names":[],"sources":["src/components/scheduler/nylas-cancel-booking-form/nylas-cancel-booking-form.scss?tag=nylas-cancel-booking-form&encapsulation=shadow","src/components/scheduler/nylas-cancel-booking-form/nylas-cancel-booking-form.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  width: 400px;\n  @include default-css-variables;\n}\n\nsp-theme {\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}\n\n.nylas-cancel-booking-form {\n  display: flex;\n  align-items: center;\n  flex-direction: column;\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-cancel-booking-form__title {\n  font-size: 18px;\n  font-weight: 600;\n  margin-bottom: 0;\n  color: var(--nylas-base-900);\n}\n\n.nylas-cancel-booking-form__description {\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 140%;\n  color: var(--nylas-base-600);\n}\n\n.nylas-cancel-booking-form__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\ncalendar-cancel-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n\nsp-button {\n  background-color: var(--nylas-base-0);\n  color: var(--nylas-base-700);\n  border: 1px solid var(--nylas-base-200);\n  border-radius: var(--nylas-border-radius-2x);\n  font-size: 16px;\n  font-weight: 600;\n  width: 100%;\n  height: 48px;\n  padding: 8px;\n  line-height: 24px;\n  font-family: var(--nylas-font-family);\n  &.cancel {\n    margin-top: 1.25rem;\n    background-color: var(--nylas-primary);\n    color: var(--nylas-base-0);\n    &:hover,\n    &:focus {\n      background-color: var(--nylas-base-600);\n    }\n    &:active {\n      background-color: var(--nylas-base-800);\n    }\n  }\n  &.back {\n    margin-top: 0.5rem;\n    &:hover,\n    &:focus {\n      border-color: var(--nylas-primary);\n    }\n    &:active {\n      border-color: var(--nylas-base-600);\n    }\n  }\n}\n\nsp-field-label {\n  margin-top: 1rem;\n  display: flex;\n  color: var(--nylas-base-800);\n  font-size: 14px;\n  &.error {\n    color: var(--nylas-error);\n  }\n  span.required {\n    color: var(--nylas-error);\n  }\n}\nsp-textfield {\n  --spectrum-textfield-border-color: var(--nylas-base-300);\n  --spectrum-textfield-icon-color-invalid: var(--nylas-error);\n  position: relative;\n  width: 100%;\n  height: 48px;\n  margin-bottom: 16px;\n  background-color: var(--nylas-base-0);\n  color: var(--nylas-base-500);\n  &.error {\n    --spectrum-textfield-border-color: var(--nylas-error);\n  }\n}\n\nsp-help-text {\n  margin: 0.25rem 0 1rem 0;\n  color: var(--nylas-error);\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { Component, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';\nimport { NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { debug } from '@/utils/utils';\nimport { Notification, NylasSchedulerErrorResponse } from '@nylas/core';\n\n/**\n * The `nylas-cancel-booking-form` component is a UI component that allows users to cancel a booking.\n */\n@Component({\n  tag: 'nylas-cancel-booking-form',\n  styleUrl: 'nylas-cancel-booking-form.scss',\n  shadow: true,\n})\nexport class NylasCancelBookingForm {\n  /**\n   * The booking ID to cancel.\n   */\n  @Prop() readonly cancelBookingId!: string;\n\n  /**\n   * This event is fired when the Go back button is clicked on the cancel booking form.\n   */\n  @Event() readonly goBackButtonClicked!: EventEmitter<void>;\n\n  /**\n   * This event is fired when the cancel booking form is submitted.\n   */\n  @Event() readonly cancelBookingFormSubmitted!: EventEmitter<{ bookingId: string; reason: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>;\n\n  /**\n   * This event is fired when an error occurs while cancelling the booking.\n   */\n  @Event() readonly cancelBookedEventError!: EventEmitter<NylasSchedulerErrorResponse>;\n\n  /**\n   * This event is fired when an error occurs in the booking form.\n   */\n  @Event() cancelBookingFormError!: EventEmitter<Partial<Notification>>;\n\n  /**\n   * The reason for cancellation.\n   */\n  @State() cancellationReason: string = '';\n\n  @State() cancellationError: string = '';\n\n  connectedCallback() {\n    debug(`[nylas-cancel-booking-form] Component connected`);\n  }\n\n  async componentWillLoad() {\n    debug(`[nylas-cancel-booking-form] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-cancel-booking-form] Component did load`);\n    if (!this.cancelBookingId) {\n      console.warn(`[nylas-cancel-booking-form] No booking ID provided, \"cancelBookingId\" prop is required.`);\n    }\n  }\n\n  disconnectedCallback() {\n    debug(`[nylas-cancel-booking-form] Component disconnected`);\n  }\n\n  private handleGoBackClicked = () => {\n    this.goBackButtonClicked.emit();\n  };\n\n  private handleSubmitCancelBooking = (event: Event) => {\n    event.preventDefault();\n    if (!this.cancellationReason) {\n      this.cancellationError = 'Please provide a reason for cancellation.';\n      this.cancelBookingFormError.emit({ title: 'Cancel booking form error', description: 'Please provide a reason for cancellation.' });\n      return;\n    }\n\n    debug(`[nylas-cancel-booking-form] Cancel booking form submitted with reason: ${this.cancellationReason}`);\n    const errorHandler = (error: NylasSchedulerErrorResponse) => {\n      this.cancelBookedEventError.emit(error);\n    };\n    this.cancelBookingFormSubmitted.emit({ bookingId: this.cancelBookingId, reason: this.cancellationReason, errorHandler });\n  };\n\n  private handleOnChangeCancellationReason = (event: Event) => {\n    this.cancellationError = '';\n    this.cancellationReason = (event.target as HTMLInputElement).value;\n  };\n\n  @RegisterComponent<NylasCancelBookingForm, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-cancel-booking-form',\n    eventToProps: {\n      cancelBookingFormSubmitted: async (\n        event: CustomEvent<{ bookingId: string; reason: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>,\n        nylasSchedulerConnector: NylasSchedulerConnector,\n      ) => {\n        const result = await nylasSchedulerConnector.scheduler.cancelBooking(event.detail.bookingId);\n        const { errorHandler } = event.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        <sp-theme theme=\"spectrum\" scale=\"medium\">\n          <div class=\"nylas-cancel-booking-form\" part=\"ncec__card\">\n            <div class=\"nylas-cancel-booking-form__calendar-icon\" part=\"ncec__icon\">\n              <calendar-cancel-icon />\n            </div>\n            <h3 class=\"nylas-cancel-booking-form__title\" part=\"ncec__title\">\n              Cancel booking?\n            </h3>\n            <div class=\"nylas-cancel-booking-form__description\" part=\"ncec__description\">\n              Your current timeslot will become available to others.\n            </div>\n            <form onSubmit={this.handleSubmitCancelBooking}>\n              <sp-field-label for=\"cancel-reason\" class={this.cancellationError ? 'error' : ''}>\n                Reason for cancellation <span class=\"required\">*</span>\n              </sp-field-label>\n              <sp-textfield\n                id=\"cancel-reason\"\n                class={this.cancellationError ? 'error' : ''}\n                part=\"ncec__reason-textarea\"\n                multiline\n                value={this.cancellationReason}\n                onInput={this.handleOnChangeCancellationReason}\n                onFocus={this.handleOnChangeCancellationReason}\n                invalid={!!this.cancellationError}\n              >\n                <sp-help-text slot=\"negative-help-text\">{this.cancellationError}</sp-help-text>\n              </sp-textfield>\n              <sp-button variant=\"primary\" class=\"cancel\" type=\"submit\" part=\"ncec__button-cta\">\n                Cancel booking\n              </sp-button>\n              <sp-button variant=\"secondary\" class=\"back\" treatment=\"outline\" part=\"ncec__button-outline\" onClick={this.handleGoBackClicked}>\n                Go back\n              </sp-button>\n            </form>\n          </div>\n        </sp-theme>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nylas-cancel-booking-form2.js","mappings":";;;;;AAAA,MAAM,yBAAyB,GAAG,u1FAAu1F;;;;;;;;;;;;;;;;MCe52F,sBAAsB;;;;;;;;;QAoDzB,wBAAmB,GAAG;YAC5B,IAAI,CAAC,mBAAmB,CAAC,IAAI,EAAE,CAAC;SACjC,CAAC;QAEM,8BAAyB,GAAG,CAAC,KAAY;YAC/C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE;gBAC5B,IAAI,CAAC,iBAAiB,GAAG,2CAA2C,CAAC;gBACrE,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,2BAA2B,EAAE,WAAW,EAAE,2CAA2C,EAAE,CAAC,CAAC;gBACnI,OAAO;aACR;YAED,KAAK,CAAC,0EAA0E,IAAI,CAAC,kBAAkB,EAAE,CAAC,CAAC;YAC3G,MAAM,YAAY,GAAG,CAAC,KAAkC;gBACtD,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;aACzC,CAAC;YACF,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE,MAAM,EAAE,IAAI,CAAC,kBAAkB,EAAE,YAAY,EAAE,CAAC,CAAC;SAC1H,CAAC;QAEM,qCAAgC,GAAG,CAAC,KAAY;YACtD,IAAI,CAAC,iBAAiB,GAAG,EAAE,CAAC;YAC5B,IAAI,CAAC,kBAAkB,GAAI,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAC;SACpE,CAAC;;kCA7CoC,EAAE;iCAEH,EAAE;;IAEvC,iBAAiB;QACf,KAAK,CAAC,iDAAiD,CAAC,CAAC;KAC1D;IAED,MAAM,iBAAiB;QACrB,KAAK,CAAC,iDAAiD,CAAC,CAAC;KAC1D;IAED,MAAM,gBAAgB;QACpB,KAAK,CAAC,gDAAgD,CAAC,CAAC;QACxD,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;YACzB,OAAO,CAAC,IAAI,CAAC,yFAAyF,CAAC,CAAC;SACzG;KACF;IAED,oBAAoB;QAClB,KAAK,CAAC,oDAAoD,CAAC,CAAC;KAC7D;IA0CD,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,MAAM,IACf,iEAAU,KAAK,EAAC,UAAU,EAAC,KAAK,EAAC,QAAQ,IACvC,4DAAK,KAAK,EAAC,2BAA2B,EAAC,IAAI,EAAC,YAAY,IACtD,4DAAK,KAAK,EAAC,0CAA0C,EAAC,IAAI,EAAC,YAAY,IACrE,8EAAwB,CACpB,EACN,2DAAI,KAAK,EAAC,kCAAkC,EAAC,IAAI,EAAC,aAAa,sBAE1D,EACL,4DAAK,KAAK,EAAC,wCAAwC,EAAC,IAAI,EAAC,mBAAmB,6DAEtE,EACN,6DAAM,QAAQ,EAAE,IAAI,CAAC,yBAAyB,IAC5C,uEAAgB,GAAG,EAAC,eAAe,EAAC,KAAK,EAAE,IAAI,CAAC,iBAAiB,GAAG,OAAO,GAAG,EAAE,gCACtD,6DAAM,KAAK,EAAC,UAAU,QAAS,CACxC,EACjB,qEACE,EAAE,EAAC,eAAe,EAClB,KAAK,EAAE,IAAI,CAAC,iBAAiB,GAAG,OAAO,GAAG,EAAE,EAC5C,IAAI,EAAC,uBAAuB,EAC5B,SAAS,QACT,KAAK,EAAE,IAAI,CAAC,kBAAkB,EAC9B,OAAO,EAAE,IAAI,CAAC,gCAAgC,EAC9C,OAAO,EAAE,IAAI,CAAC,gCAAgC,EAC9C,OAAO,EAAE,CAAC,CAAC,IAAI,CAAC,iBAAiB,IAEjC,qEAAc,IAAI,EAAC,oBAAoB,IAAE,IAAI,CAAC,iBAAiB,CAAgB,CAClE,EACf,kEAAW,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,kBAAkB,qBAErE,EACZ,kEAAW,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,SAAS,EAAC,SAAS,EAAC,IAAI,EAAC,sBAAsB,EAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,cAEjH,CACP,CACH,CACG,CACN,EACP;KACH;;;;;;;AAzCD;IAhBC,iBAAiB,CAAiG;QACjH,IAAI,EAAE,2BAA2B;QACjC,YAAY,EAAE;YACZ,0BAA0B,EAAE,OAC1B,KAAsH,EACtH,uBAAgD;gBAEhD,MAAM,MAAM,GAAG,MAAM,uBAAuB,CAAC,SAAS,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;gBAClH,MAAM,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;gBACtC,IAAI,YAAY,KAAK,CAAC,MAAM,IAAI,OAAO,IAAI,MAAM,CAAC,EAAE;oBAClD,YAAY,CAAC,MAAM,CAAC,CAAC;iBACtB;aACF;SACF;QACD,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;oDA0CD;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/scheduler/nylas-cancel-booking-form/nylas-cancel-booking-form.scss?tag=nylas-cancel-booking-form&encapsulation=shadow","src/components/scheduler/nylas-cancel-booking-form/nylas-cancel-booking-form.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  width: 400px;\n  @include default-css-variables;\n}\n\nsp-theme {\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}\n\n.nylas-cancel-booking-form {\n  display: flex;\n  align-items: center;\n  flex-direction: column;\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-cancel-booking-form__title {\n  font-size: 18px;\n  font-weight: 600;\n  margin-bottom: 0;\n  color: var(--nylas-base-900);\n}\n\n.nylas-cancel-booking-form__description {\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 140%;\n  color: var(--nylas-base-600);\n}\n\n.nylas-cancel-booking-form__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\ncalendar-cancel-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n\nsp-button {\n  background-color: var(--nylas-base-0);\n  color: var(--nylas-base-700);\n  border: 1px solid var(--nylas-base-200);\n  border-radius: var(--nylas-border-radius-2x);\n  font-size: 16px;\n  font-weight: 600;\n  width: 100%;\n  height: 48px;\n  padding: 8px;\n  line-height: 24px;\n  font-family: var(--nylas-font-family);\n  &.cancel {\n    margin-top: 1.25rem;\n    background-color: var(--nylas-primary);\n    color: var(--nylas-base-0);\n    &:hover,\n    &:focus {\n      background-color: var(--nylas-base-600);\n    }\n    &:active {\n      background-color: var(--nylas-base-800);\n    }\n  }\n  &.back {\n    margin-top: 0.5rem;\n    &:hover,\n    &:focus {\n      border-color: var(--nylas-primary);\n    }\n    &:active {\n      border-color: var(--nylas-base-600);\n    }\n  }\n}\n\nsp-field-label {\n  margin-top: 1rem;\n  display: flex;\n  color: var(--nylas-base-800);\n  font-size: 14px;\n  &.error {\n    color: var(--nylas-error);\n  }\n  span.required {\n    color: var(--nylas-error);\n  }\n}\nsp-textfield {\n  --spectrum-textfield-border-color: var(--nylas-base-300);\n  --spectrum-textfield-icon-color-invalid: var(--nylas-error);\n  position: relative;\n  width: 100%;\n  height: 48px;\n  margin-bottom: 16px;\n  background-color: var(--nylas-base-0);\n  color: var(--nylas-base-500);\n  &.error {\n    --spectrum-textfield-border-color: var(--nylas-error);\n  }\n}\n\nsp-help-text {\n  margin: 0.25rem 0 1rem 0;\n  color: var(--nylas-error);\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { Component, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';\nimport { NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { debug } from '@/utils/utils';\nimport { Notification, NylasSchedulerErrorResponse } from '@nylas/core';\n\n/**\n * The `nylas-cancel-booking-form` component is a UI component that allows users to cancel a booking.\n */\n@Component({\n  tag: 'nylas-cancel-booking-form',\n  styleUrl: 'nylas-cancel-booking-form.scss',\n  shadow: true,\n})\nexport class NylasCancelBookingForm {\n  /**\n   * The booking ID to cancel.\n   */\n  @Prop() readonly cancelBookingId!: string;\n\n  /**\n   * This event is fired when the Go back button is clicked on the cancel booking form.\n   */\n  @Event() readonly goBackButtonClicked!: EventEmitter<void>;\n\n  /**\n   * This event is fired when the cancel booking form is submitted.\n   */\n  @Event() readonly cancelBookingFormSubmitted!: EventEmitter<{ bookingId: string; reason: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>;\n\n  /**\n   * This event is fired when an error occurs while cancelling the booking.\n   */\n  @Event() readonly cancelBookedEventError!: EventEmitter<NylasSchedulerErrorResponse>;\n\n  /**\n   * This event is fired when an error occurs in the booking form.\n   */\n  @Event() cancelBookingFormError!: EventEmitter<Partial<Notification>>;\n\n  /**\n   * The reason for cancellation.\n   */\n  @State() cancellationReason: string = '';\n\n  @State() cancellationError: string = '';\n\n  connectedCallback() {\n    debug(`[nylas-cancel-booking-form] Component connected`);\n  }\n\n  async componentWillLoad() {\n    debug(`[nylas-cancel-booking-form] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-cancel-booking-form] Component did load`);\n    if (!this.cancelBookingId) {\n      console.warn(`[nylas-cancel-booking-form] No booking ID provided, \"cancelBookingId\" prop is required.`);\n    }\n  }\n\n  disconnectedCallback() {\n    debug(`[nylas-cancel-booking-form] Component disconnected`);\n  }\n\n  private handleGoBackClicked = () => {\n    this.goBackButtonClicked.emit();\n  };\n\n  private handleSubmitCancelBooking = (event: Event) => {\n    event.preventDefault();\n    if (!this.cancellationReason) {\n      this.cancellationError = 'Please provide a reason for cancellation.';\n      this.cancelBookingFormError.emit({ title: 'Cancel booking form error', description: 'Please provide a reason for cancellation.' });\n      return;\n    }\n\n    debug(`[nylas-cancel-booking-form] Cancel booking form submitted with reason: ${this.cancellationReason}`);\n    const errorHandler = (error: NylasSchedulerErrorResponse) => {\n      this.cancelBookedEventError.emit(error);\n    };\n    this.cancelBookingFormSubmitted.emit({ bookingId: this.cancelBookingId, reason: this.cancellationReason, errorHandler });\n  };\n\n  private handleOnChangeCancellationReason = (event: Event) => {\n    this.cancellationError = '';\n    this.cancellationReason = (event.target as HTMLInputElement).value;\n  };\n\n  @RegisterComponent<NylasCancelBookingForm, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-cancel-booking-form',\n    eventToProps: {\n      cancelBookingFormSubmitted: async (\n        event: CustomEvent<{ bookingId: string; reason: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>,\n        nylasSchedulerConnector: NylasSchedulerConnector,\n      ) => {\n        const result = await nylasSchedulerConnector.scheduler.cancelBooking(event.detail.bookingId, event.detail.reason);\n        const { errorHandler } = event.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        <sp-theme theme=\"spectrum\" scale=\"medium\">\n          <div class=\"nylas-cancel-booking-form\" part=\"ncec__card\">\n            <div class=\"nylas-cancel-booking-form__calendar-icon\" part=\"ncec__icon\">\n              <calendar-cancel-icon />\n            </div>\n            <h3 class=\"nylas-cancel-booking-form__title\" part=\"ncec__title\">\n              Cancel booking?\n            </h3>\n            <div class=\"nylas-cancel-booking-form__description\" part=\"ncec__description\">\n              Your current timeslot will become available to others.\n            </div>\n            <form onSubmit={this.handleSubmitCancelBooking}>\n              <sp-field-label for=\"cancel-reason\" class={this.cancellationError ? 'error' : ''}>\n                Reason for cancellation <span class=\"required\">*</span>\n              </sp-field-label>\n              <sp-textfield\n                id=\"cancel-reason\"\n                class={this.cancellationError ? 'error' : ''}\n                part=\"ncec__reason-textarea\"\n                multiline\n                value={this.cancellationReason}\n                onInput={this.handleOnChangeCancellationReason}\n                onFocus={this.handleOnChangeCancellationReason}\n                invalid={!!this.cancellationError}\n              >\n                <sp-help-text slot=\"negative-help-text\">{this.cancellationError}</sp-help-text>\n              </sp-textfield>\n              <sp-button variant=\"primary\" class=\"cancel\" type=\"submit\" part=\"ncec__button-cta\">\n                Cancel booking\n              </sp-button>\n              <sp-button variant=\"secondary\" class=\"back\" treatment=\"outline\" part=\"ncec__button-outline\" onClick={this.handleGoBackClicked}>\n                Go back\n              </sp-button>\n            </form>\n          </div>\n        </sp-theme>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1741,7 +1741,7 @@ function ticker(year, month, week, day, hour, minute) {
 const [utcTicks, utcTickInterval] = ticker(utcYear, utcMonth, utcSunday, unixDay, utcHour, utcMinute);
 const [timeTicks, timeTickInterval] = ticker(timeYear, timeMonth, timeSunday, timeDay, timeHour, timeMinute);
 
-const nylasDatePickerCss = ":host{display:block;min-height:444px;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif}@media screen and (max-width: 768px){:host{min-height:auto}}.nylas-date-picker{display:flex;gap:1rem;flex-direction:column}.header{margin:0 0.5rem;height:48px}.header h2{font-size:1.3125rem;font-weight:400;line-height:1rem;color:var(--nylas-base-800)}.header h2 strong{font-weight:600}.title{margin:0 -1.25rem;display:flex;flex-direction:column;padding:0 1.5rem;gap:0.5rem;border-bottom:1px solid var(--nylas-base-200);font-family:var(--nylas-font-family)}.title h1{margin-bottom:0;font-size:18px;line-height:20px;font-weight:600;display:flex;gap:0.5rem;align-items:center}.title p{margin-top:0;font-size:16px;display:flex;gap:0.5rem;align-items:center}@keyframes pulsate{0%{background-color:var(--nylas-base-50)}50%{background-color:var(--nylas-base-100)}100%{background-color:var(--nylas-base-50)}}.dates{display:grid;justify-items:center;grid-template-columns:repeat(7, 1fr);gap:0.5rem;margin-bottom:1rem}.dates .date{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center;height:48px;width:48px;min-width:2rem;min-height:2rem;cursor:pointer;border-radius:var(--nylas-border-radius-2x);font-size:16px;font-weight:600;font-family:inherit;color:var(--nylas-base-text);background-color:var(--nylas-base-100);cursor:pointer;border:none}@media screen and (max-width: 412px){.dates .date{width:38px;height:38px;min-width:none}}.dates .date:hover:not(:disabled){box-shadow:0 0 0 2px var(--nylas-base-500) inset}.dates .date.date.current-month{color:var(--nylas-base-800)}.dates .date.date.selected{background-color:var(--nylas-primary);color:var(--nylas-base-0);font-weight:700}.dates .date.date.day-skeleton{color:var(--nylas-base-300)}.dates .date:disabled{color:var(--nylas-base-300);background-color:transparent;font-weight:400;cursor:not-allowed}.dates .day{font-size:12px;color:var(--nylas-base-800);font-weight:600;letter-spacing:0.5px;height:32px;display:flex;align-items:center}@media screen and (max-width: 768px){.dates .day{font-size:14px}}.dates .date.day-skeleton{height:48px;width:48px;border-radius:var(--nylas-border-radius-2x);animation:pulsate 1.5s infinite ease-in-out;background-color:var(--nylas-base-50)}@media screen and (max-width: 412px){.dates .date.day-skeleton{width:38px;height:38px;min-width:none}}.dates .date.current-day::after{content:\"\";position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background-color:var(--nylas-base-500)}.dates .date.current-day.selected::after{background-color:var(--nylas-base-100)}.pagination{display:flex;flex-direction:row;justify-content:space-between;align-items:center;min-width:92px}.pagination .chevron-right{transform:rotate(180deg)}.pagination .button{display:flex;flex-direction:row;justify-content:center;align-items:center;height:3vh;width:3vh;min-width:3em;min-height:3em;cursor:pointer;border-radius:var(--nylas-border-radius-2x);background-color:transparent;color:var(--nylas-base-800);cursor:pointer;border:none}.pagination .button:hover{background-color:var(--nylas-base-50)}.pagination .button:active{background-color:var(--nylas-base-100)}.pagination .button:disabled{background-color:transparent;color:var(--nylas-base-300);cursor:not-allowed}.flex-row{display:flex;flex-direction:row;justify-content:space-between;align-items:center;color:var(--nylas-base-500)}";
+const nylasDatePickerCss = ":host{display:block;min-height:444px;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif}@media screen and (max-width: 768px){:host{min-height:auto}}.nylas-date-picker{display:flex;gap:1rem;flex-direction:column}.header{margin:0 0.5rem;height:48px}.header h2{font-size:1.3125rem;font-weight:400;line-height:1rem;color:var(--nylas-base-800)}.header h2 strong{font-weight:600}.title{margin:0 -1.25rem;display:flex;flex-direction:column;padding:0 1.5rem;gap:0.5rem;border-bottom:1px solid var(--nylas-base-200);font-family:var(--nylas-font-family)}.title h1{margin-bottom:0;font-size:18px;line-height:20px;font-weight:600;display:flex;gap:0.5rem;align-items:center}.title p{margin-top:0;font-size:16px;display:flex;gap:0.5rem;align-items:center}@keyframes pulsate{0%{background-color:var(--nylas-base-50)}50%{background-color:var(--nylas-base-100)}100%{background-color:var(--nylas-base-50)}}.dates{display:grid;justify-items:center;grid-template-columns:repeat(7, 1fr);gap:0.5rem;margin-bottom:24px}.dates .date{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center;height:48px;width:48px;min-width:2rem;min-height:2rem;cursor:pointer;border-radius:var(--nylas-border-radius-2x);font-size:16px;font-weight:600;font-family:inherit;color:var(--nylas-base-text);background-color:var(--nylas-base-100);cursor:pointer;border:none}@media screen and (max-width: 412px){.dates .date{width:38px;height:38px;min-width:none}}.dates .date:hover:not(:disabled){box-shadow:0 0 0 2px var(--nylas-base-500) inset}.dates .date.date.current-month{color:var(--nylas-base-800)}.dates .date.date.selected{background-color:var(--nylas-primary);color:var(--nylas-base-0);font-weight:700}.dates .date.date.day-skeleton{color:var(--nylas-base-300)}.dates .date:disabled{color:var(--nylas-base-300);background-color:transparent;font-weight:400;cursor:not-allowed}.dates .day{font-size:12px;color:var(--nylas-base-800);font-weight:600;letter-spacing:0.5px;height:32px;display:flex;align-items:center}@media screen and (max-width: 768px){.dates .day{font-size:14px}}.dates .date.day-skeleton{height:48px;width:48px;border-radius:var(--nylas-border-radius-2x);animation:pulsate 1.5s infinite ease-in-out;background-color:var(--nylas-base-50)}@media screen and (max-width: 412px){.dates .date.day-skeleton{width:38px;height:38px;min-width:none}}.dates .date.current-day::after{content:\"\";position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background-color:var(--nylas-base-500)}.dates .date.current-day.selected::after{background-color:var(--nylas-base-100)}.pagination{display:flex;flex-direction:row;justify-content:space-between;align-items:center;min-width:92px}.pagination .chevron-right{transform:rotate(180deg)}.pagination .button{display:flex;flex-direction:row;justify-content:center;align-items:center;height:3vh;width:3vh;min-width:3em;min-height:3em;cursor:pointer;border-radius:var(--nylas-border-radius-2x);background-color:transparent;color:var(--nylas-base-800);cursor:pointer;border:none}.pagination .button:hover{background-color:var(--nylas-base-50)}.pagination .button:active{background-color:var(--nylas-base-100)}.pagination .button:disabled{background-color:transparent;color:var(--nylas-base-300);cursor:not-allowed}.flex-row{display:flex;flex-direction:row;justify-content:space-between;align-items:center;color:var(--nylas-base-500)}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;