@nylas/web-elements 1.1.0-canary.8 → 1.1.0-canary.9

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

@@ -1 +1 @@
-{"file":"nylas-cancelled-event-card2.js","mappings":";;;;;AAAA,MAAM,0BAA0B,GAAG,6mEAA6mE;;;;;;;;;;;;;;;;MCqBnoE,uBAAuB;;;;;;QA2B1B,uBAAkB,GAAG;YAC3B,IAAI,CAAC,2BAA2B,CAAC,IAAI,EAAE,CAAC;SACzC,CAAC;;;IAlBF,iBAAiB;QACf,KAAK,CAAC,kDAAkD,CAAC,CAAC;KAC3D;IAED,MAAM,iBAAiB;QACrB,KAAK,CAAC,kDAAkD,CAAC,CAAC;KAC3D;IAED,MAAM,gBAAgB;QACpB,KAAK,CAAC,iDAAiD,CAAC,CAAC;KAC1D;IAED,oBAAoB;QAClB,KAAK,CAAC,qDAAqD,CAAC,CAAC;KAC9D;IAWD,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,MAAM,IACf,iEAAU,KAAK,EAAC,UAAU,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,QAAQ,IACpD,4DAAK,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,YAAY,IACvD,4DAAK,KAAK,EAAC,2CAA2C,EAAC,IAAI,EAAC,YAAY,IACtE,8EAAwB,CACpB,EACN,2DAAI,KAAK,EAAC,mCAAmC,EAAC,IAAI,EAAC,aAAa,oDAE3D,EACL,4DAAK,KAAK,EAAC,yCAAyC,EAAC,IAAI,EAAC,mBAAmB,8DAEvE,EACN,4DAAK,KAAK,EAAC,iCAAiC,IAC1C,kEAAW,OAAO,EAAC,WAAW,EAAC,SAAS,EAAC,SAAS,EAAC,IAAI,EAAC,sBAAsB,EAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,YAEnG,CACR,CACF,CACG,CACN,EACP;KACH;;;;;AAvBD;IALC,iBAAiB,CAAkG;QAClH,IAAI,EAAE,4BAA4B;QAClC,YAAY,EAAE,EAAE;QAChB,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;qDAwBD;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/scheduler/nylas-cancelled-event-card/nylas-cancelled-event-card.scss?tag=nylas-cancelled-event-card&encapsulation=shadow","src/components/scheduler/nylas-cancelled-event-card/nylas-cancelled-event-card.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\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-cancelled-event-card {\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  width: 400px;\n  @media #{$mobile} {\n    width: inherit;\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-cancelled-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-cancelled-event-description {\n  font-size: 16px;\n  font-weight: 500;\n  color: var(--nylas-base-600);\n}\n\n.nylas-cancelled-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-cancelled-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\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: 1rem;\n  height: 48px;\n  padding: 8px;\n  line-height: 24px;\n  width: 100%;\n  &:hover,\n  &:focus {\n    border-color: var(--nylas-primary);\n  }\n  &:active {\n    border-color: var(--nylas-base-600);\n  }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { NylasEvent, NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduler/nylas-scheduling';\nimport { debug } from '@/utils/utils';\n\n/**\n * The `nylas-cancelled-event-card` component is a UI component that displays the cancelled event card.\n *\n * @part ncec - The cancelled event card host.\n * @part ncec__icon - The calendar icon.\n * @part ncec__title - The title of the cancelled event card.\n * @part ncec__description - The description of the cancelled event card.\n * @part ncec__button-outline - The close button CTA.\n * @part ncec__card - The cancelled event card.\n */\n@Component({\n  tag: 'nylas-cancelled-event-card',\n  styleUrl: 'nylas-cancelled-event-card.scss',\n  shadow: true,\n})\nexport class NylasCancelledEventCard {\n  /**\n   * The participant's name who booked the event / is logged in.\n   */\n  @Prop() readonly cancelledEventInfo!: Partial<NylasEvent>;\n\n  /**\n   * This event is fired when the close button is clicked on the cancelled event card.\n   */\n  @Event() readonly closeCancelEventCardClicked!: EventEmitter<void>;\n\n  connectedCallback() {\n    debug(`[nylas-cancelled-event-card] Component connected`);\n  }\n\n  async componentWillLoad() {\n    debug(`[nylas-cancelled-event-card] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-cancelled-event-card] Component did load`);\n  }\n\n  disconnectedCallback() {\n    debug(`[nylas-cancelled-event-card] Component disconnected`);\n  }\n\n  private handleCloseClicked = () => {\n    this.closeCancelEventCardClicked.emit();\n  };\n\n  @RegisterComponent<NylasCancelledEventCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-cancelled-event-card',\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host part=\"ncec\">\n        <sp-theme theme=\"spectrum\" color=\"dark\" scale=\"medium\">\n          <div class=\"nylas-cancelled-event-card\" part=\"ncec__card\">\n            <div class=\"nylas-cancelled-event-card__calendar-icon\" part=\"ncec__icon\">\n              <calendar-cancel-icon />\n            </div>\n            <h3 class=\"nylas-cancelled-event-card__title\" part=\"ncec__title\">\n              Your booking has been cancelled successfully!\n            </h3>\n            <div class=\"nylas-cancelled-event-card__description\" part=\"ncec__description\">\n              A cancellation email has been sent to the participants.\n            </div>\n            <div class=\"nylas-cancelled-event-card__cta\">\n              <sp-button variant=\"secondary\" treatment=\"outline\" part=\"ncec__button-outline\" onClick={this.handleCloseClicked}>\n                Close\n              </sp-button>\n            </div>\n          </div>\n        </sp-theme>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nylas-cancelled-event-card2.js","mappings":";;;;;AAAA,MAAM,0BAA0B,GAAG,6mEAA6mE;;;;;;;;;;;;;;;;MCsBnoE,uBAAuB;;;;;;;QA0C1B,uBAAkB,GAAG;YAC3B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YACtB,MAAM,YAAY,GAAG,CAAC,KAAkC;gBACtD,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBACzC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;aACxB,CAAC;YACF,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,EAAE,YAAY,EAAE,CAAC,CAAC;SACzD,CAAC;;yBAxC4B,KAAK;;;IAiBnC,iBAAiB;QACf,KAAK,CAAC,kDAAkD,CAAC,CAAC;KAC3D;IAED,MAAM,iBAAiB;QACrB,KAAK,CAAC,kDAAkD,CAAC,CAAC;KAC3D;IAED,MAAM,gBAAgB;QACpB,KAAK,CAAC,iDAAiD,CAAC,CAAC;KAC1D;IAED,oBAAoB;QAClB,KAAK,CAAC,qDAAqD,CAAC,CAAC;KAC9D;IA0BD,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,MAAM,IACf,iEAAU,KAAK,EAAC,UAAU,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,QAAQ,IACpD,4DAAK,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,YAAY,IACvD,4DAAK,KAAK,EAAC,2CAA2C,EAAC,IAAI,EAAC,YAAY,IACtE,8EAAwB,CACpB,EACN,2DAAI,KAAK,EAAC,mCAAmC,EAAC,IAAI,EAAC,aAAa,oDAE3D,EACL,4DAAK,KAAK,EAAC,yCAAyC,EAAC,IAAI,EAAC,mBAAmB,8CACpC,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,IAAI,IAAI,kBAAkB,MAC7F,EACN,4DAAK,KAAK,EAAC,iCAAiC,IAC1C,kEAAW,OAAO,EAAC,WAAW,EAAC,SAAS,EAAC,SAAS,EAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,EAAC,sBAAsB,EAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,IACtI,IAAI,CAAC,SAAS,GAAG,YAAY,GAAG,OAAO,CAC9B,CACR,CACF,CACG,CACN,EACP;KACH;;;;;;;AAvBD;IAfC,iBAAiB,CAAkG;QAClH,IAAI,EAAE,4BAA4B;QAClC,YAAY,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC,0BAA0B,EAAE,gBAAgB,CAAC,CAAC,CAAC;QACvE,YAAY,EAAE;YACZ,2BAA2B,EAAE,OAAO,CAA+E,EAAE,uBAAgD;gBACnK,MAAM,MAAM,GAAG,MAAM,uBAAuB,CAAC,SAAS,CAAC,WAAW,EAAE,CAAC;gBAErE,MAAM,EAAE,YAAY,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;gBAClC,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;;;;qDAwBD;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/scheduler/nylas-cancelled-event-card/nylas-cancelled-event-card.scss?tag=nylas-cancelled-event-card&encapsulation=shadow","src/components/scheduler/nylas-cancelled-event-card/nylas-cancelled-event-card.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\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-cancelled-event-card {\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  width: 400px;\n  @media #{$mobile} {\n    width: inherit;\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-cancelled-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-cancelled-event-description {\n  font-size: 16px;\n  font-weight: 500;\n  color: var(--nylas-base-600);\n}\n\n.nylas-cancelled-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-cancelled-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\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: 1rem;\n  height: 48px;\n  padding: 8px;\n  line-height: 24px;\n  width: 100%;\n  &:hover,\n  &:focus {\n    border-color: var(--nylas-primary);\n  }\n  &:active {\n    border-color: var(--nylas-base-600);\n  }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { Component, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';\nimport { NylasEvent, NylasSchedulerConnector, NylasSchedulerErrorResponse } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduler/nylas-scheduling';\nimport { debug } from '@/utils/utils';\nimport { ConfigSettings } from '@/stores/scheduler-store';\n\n/**\n * The `nylas-cancelled-event-card` component is a UI component that displays the cancelled event card.\n *\n * @part ncec - The cancelled event card host.\n * @part ncec__icon - The calendar icon.\n * @part ncec__title - The title of the cancelled event card.\n * @part ncec__description - The description of the cancelled event card.\n * @part ncec__button-outline - The close button CTA.\n * @part ncec__card - The cancelled event card.\n */\n@Component({\n  tag: 'nylas-cancelled-event-card',\n  styleUrl: 'nylas-cancelled-event-card.scss',\n  shadow: true,\n})\nexport class NylasCancelledEventCard {\n  /**\n   * The participant's name who booked the event / is logged in.\n   */\n  @Prop() readonly cancelledEventInfo!: Partial<NylasEvent>;\n\n  /**\n   * Closing state of the cancelled event card button.\n   */\n  @State() isClosing: boolean = false;\n\n  /**\n   * The config settings for the scheduler.\n   */\n  @Prop() readonly configSettings?: ConfigSettings;\n\n  /**\n   * This event is fired when the close button is clicked on the cancelled event card.\n   */\n  @Event() readonly closeCancelEventCardClicked!: EventEmitter<{ errorHandler?: (error: NylasSchedulerErrorResponse) => void }>;\n\n  /**\n   * This event is fired when an error occurs.\n   */\n  @Event() readonly cancelledEventCardError!: EventEmitter<NylasSchedulerErrorResponse>;\n\n  connectedCallback() {\n    debug(`[nylas-cancelled-event-card] Component connected`);\n  }\n\n  async componentWillLoad() {\n    debug(`[nylas-cancelled-event-card] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-cancelled-event-card] Component did load`);\n  }\n\n  disconnectedCallback() {\n    debug(`[nylas-cancelled-event-card] Component disconnected`);\n  }\n\n  private handleCloseClicked = () => {\n    this.isClosing = true;\n    const errorHandler = (error: NylasSchedulerErrorResponse) => {\n      this.cancelledEventCardError.emit(error);\n      this.isClosing = false;\n    };\n    this.closeCancelEventCardClicked.emit({ errorHandler });\n  };\n\n  @RegisterComponent<NylasCancelledEventCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-cancelled-event-card',\n    stateToProps: new Map([['scheduler.configSettings', 'configSettings']]),\n    eventToProps: {\n      closeCancelEventCardClicked: async (_: CustomEvent<{ errorHandler?: (error: NylasSchedulerErrorResponse) => void }>, nylasschedulerconnector: NylasSchedulerConnector) => {\n        const result = await nylasschedulerconnector.scheduler.resetCancel();\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        <sp-theme theme=\"spectrum\" color=\"dark\" scale=\"medium\">\n          <div class=\"nylas-cancelled-event-card\" part=\"ncec__card\">\n            <div class=\"nylas-cancelled-event-card__calendar-icon\" part=\"ncec__icon\">\n              <calendar-cancel-icon />\n            </div>\n            <h3 class=\"nylas-cancelled-event-card__title\" part=\"ncec__title\">\n              Your booking has been cancelled successfully!\n            </h3>\n            <div class=\"nylas-cancelled-event-card__description\" part=\"ncec__description\">\n              A cancellation email has been sent to {this.configSettings?.organizer?.name || 'the participants'}.\n            </div>\n            <div class=\"nylas-cancelled-event-card__cta\">\n              <sp-button variant=\"secondary\" treatment=\"outline\" disabled={this.isClosing} part=\"ncec__button-outline\" onClick={this.handleCloseClicked}>\n                {this.isClosing ? 'Closing...' : 'Close'}\n              </sp-button>\n            </div>\n          </div>\n        </sp-theme>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nylas-custom-booking-flow.js

@@ -1,4 +1,173 @@
-import { N as NylasCustomBookingFlow$1, d as defineCustomElement$1 } from './nylas-custom-booking-flow2.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { R as RegisterComponent } from './register-component.js';
+import { a as debug } from './utils.js';
+import { d as defineCustomElement$6 } from './chevron.js';
+import { d as defineCustomElement$5 } from './info.js';
+import { d as defineCustomElement$4 } from './search.js';
+import { d as defineCustomElement$3 } from './select-dropdown2.js';
+import { d as defineCustomElement$2 } from './toolitp-component.js';
+
+const nylasCustomBookingFlowCss = ":host{display:block;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif;width:inherit}.nylas-custom-booking-flow{width:inherit;display:flex;flex-direction:column;margin:1rem;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-200)}.nylas-custom-booking-flow .header{padding:1rem;border-bottom:1px solid var(--nylas-base-200)}.nylas-custom-booking-flow .header h3{margin:0;font-size:1rem;font-weight:600;line-height:20px;color:var(--nylas-base-900);text-align:left}.nylas-custom-booking-flow .header p{margin:0.25rem 0 0 0;font-size:0.875rem;font-weight:400;line-height:20px;color:var(--nylas-base-600);text-align:left}.nylas-custom-booking-flow .nylas-custom-booking-flow__loading{padding-bottom:1rem}.nylas-custom-booking-flow .nylas-custom-booking-flow__loading .label{display:flex;align-items:center;gap:0.5rem;margin:1rem 1rem 0;color:var(--nylas-base-800)}.nylas-custom-booking-flow .nylas-custom-booking-flow__loading .loading-button{margin:0 1rem;padding:0;width:inherit;height:48px;color:black;font-size:1rem;cursor:not-allowed;display:flex;gap:0.5rem;justify-content:space-between;align-items:center;background:transparent;border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x)}.nylas-custom-booking-flow .nylas-custom-booking-flow__loading .loading-button span{padding:0 1rem}.nylas-custom-booking-flow .nylas-custom-booking-flow__dropdown{padding:1rem}.nylas-custom-booking-flow .nylas-custom-booking-flow__dropdown span.label{display:flex;align-items:center;gap:4px;color:var(--nylas-base-800)}.nylas-custom-booking-flow .nylas-custom-booking-flow__dropdown span.label tooltip-component{display:flex}.nylas-custom-booking-flow .nylas-custom-booking-flow__dropdown select-dropdown::part(sd_dropdown){width:100%}.nylas-custom-booking-flow .nylas-custom-booking-flow__dropdown select-dropdown::part(sd_dropdown-button){width:100%;display:flex;justify-content:space-between;align-items:center;border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x);padding:1rem}.nylas-custom-booking-flow .nylas-custom-booking-flow__dropdown select-dropdown::part(sd_dropdown-content){width:100%;max-width:unset}.nylas-custom-booking-flow .nylas-custom-booking-flow__dropdown select-dropdown::part(sd_dropdown-button-selected-label){max-width:calc(100% - 2rem);font-family:var(--nylas-font-family);font-size:16px;line-height:24px}";
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (undefined && undefined.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+        return Reflect.metadata(k, v);
+};
+const NylasCustomBookingFlow$1 = proxyCustomElement(class NylasCustomBookingFlow extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.valueChanged = createEvent(this, "valueChanged", 7);
+        this.internals = this.attachInternals();
+        this.selectedConfiguration = undefined;
+        this.name = 'booking-type';
+        this.bookingType = '';
+        this.selectedBookingType = '';
+    }
+    elementNameChangedHandler(newValue) {
+        debug('nylas-custom-booking-flow', 'elementNameChangedHandler', newValue);
+        this.host.setAttribute('name', newValue);
+    }
+    selectedConfigurationChangedHandler(newValue, oldValue) {
+        debug('nylas-custom-booking-flow', 'selectedConfigurationChangedHandler', newValue, oldValue);
+        if (newValue?.event_booking?.booking_type) {
+            this.bookingType = newValue?.event_booking?.booking_type;
+        }
+        if (typeof this.internals.setFormValue === 'function') {
+            this.internals.setFormValue(this.bookingType.toString(), 'booking-calendar');
+        }
+        this.selectedBookingType = this.bookingType;
+    }
+    connectedCallback() {
+        debug('nylas-custom-booking-flow', 'connectedCallback');
+    }
+    disconnectedCallback() {
+        debug('nylas-custom-booking-flow', 'disconnectedCallback');
+    }
+    componentWillLoad() {
+        debug('nylas-custom-booking-flow', 'componentWillLoad');
+        this.host.setAttribute('name', this.name);
+    }
+    componentDidLoad() {
+        debug('nylas-custom-booking-flow', 'componentDidLoad');
+    }
+    componentWillUpdate() {
+        debug('nylas-custom-booking-flow', 'componentWillUpdate');
+    }
+    componentDidUpdate() {
+        debug('nylas-custom-booking-flow', 'componentDidUpdate');
+    }
+    componentWillRender() {
+        debug('nylas-custom-booking-flow', 'componentWillRender');
+    }
+    componentDidRender() {
+        debug('nylas-custom-booking-flow', 'componentDidRender');
+    }
+    selectedOptionChangedHandler(event) {
+        debug('nylas-custom-booking-flow', 'selectedOptionChangedHandler', event.detail);
+        const valueChanged = (event) => {
+            const { value } = event.detail;
+            this.selectedBookingType = value;
+            this.internals.setFormValue(value.toString(), 'booking-calendar');
+        };
+        this.valueChanged.emit({ ...event.detail, valueChanged });
+    }
+    render() {
+        const bookingOptions = [
+            {
+                label: 'Automatically accept bookings',
+                value: 'booking',
+            },
+            {
+                label: 'Manually confirm/decline bookings',
+                value: 'pre-booking',
+            },
+        ];
+        return (h(Host, { key: '7f019073e242dce64522e27262298e480b0fb346' }, h("div", { key: '47bd77bcd4c4a1a9a845581bb6ad77b6dd7d65e7', class: "nylas-custom-booking-flow", part: "ncbf" }, h("div", { key: '17386ac59d7680789dda85e832c84061225b6b04', class: "header", part: "ncbf__header" }, h("h3", { key: '5368e8f321140f2bfaf60f6ca3f732f584824301' }, "Customize booking flow"), h("p", { key: '65a0d4d41804f41f7c01a682e4b8b97ebc2c4ef2' }, "Customize how new bookings are handled when a booking is completed.")), bookingOptions.length > 0 ? (h("div", { class: "nylas-custom-booking-flow__dropdown" }, h("span", { class: "label" }, "After a booking is confirmed", h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, "Choose how you\u2019d like to handle new bookings. If you choose to manually confirm/decline bookings, you will be able to review and accept or decline each booking request."))), h("select-dropdown", { name: "booking-type", options: bookingOptions, withSearch: false, exportparts: "sd_dropdown: ncbf__dropdown, sd_dropdown-button: ncbf__dropdown-button, sd_dropdown-content: ncbf__dropdown-content", defaultSelectedOption: bookingOptions.find(cal => cal.value == this.bookingType) ?? bookingOptions[0] }))) : (h("div", { class: "nylas-custom-booking-flow__loading" }, h("span", { class: "label" }, "Select a calendar to book meetings on ", h("info-icon", null)), h("div", { class: "loading-button" }, h("span", null, "Loading...")))))));
+    }
+    static get formAssociated() { return true; }
+    get host() { return this; }
+    static get watchers() { return {
+        "name": ["elementNameChangedHandler"],
+        "selectedConfiguration": ["selectedConfigurationChangedHandler"]
+    }; }
+    static get style() { return nylasCustomBookingFlowCss; }
+}, [65, "nylas-custom-booking-flow", {
+        "selectedConfiguration": [16],
+        "name": [1],
+        "bookingType": [1, "booking-type"],
+        "selectedBookingType": [32]
+    }, [[0, "selectedOptionChanged", "selectedOptionChangedHandler"]], {
+        "name": ["elementNameChangedHandler"],
+        "selectedConfiguration": ["selectedConfigurationChangedHandler"]
+    }]);
+__decorate([
+    RegisterComponent({
+        name: 'nylas-custom-booking-flow',
+        stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),
+        eventToProps: {
+            valueChanged: async (event, _nylasSchedulerConfigConnector) => {
+                const { valueChanged } = event.detail;
+                if (valueChanged) {
+                    valueChanged(event);
+                }
+            },
+        },
+        fireRegisterEvent: true,
+    }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], NylasCustomBookingFlow$1.prototype, "render", null);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nylas-custom-booking-flow", "chevron-icon", "info-icon", "search-icon", "select-dropdown", "tooltip-component"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nylas-custom-booking-flow":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NylasCustomBookingFlow$1);
+            }
+            break;
+        case "chevron-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "info-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "search-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "select-dropdown":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "tooltip-component":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
 
 const NylasCustomBookingFlow = NylasCustomBookingFlow$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/nylas-custom-booking-flow.js.map

@@ -1 +1 @@
-{"file":"nylas-custom-booking-flow.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
+{"file":"nylas-custom-booking-flow.js","mappings":"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","names":["NylasCustomBookingFlow"],"sources":["src/components/scheduler-editor/nylas-custom-booking-flow/nylas-custom-booking-flow.scss?tag=nylas-custom-booking-flow&encapsulation=shadow","src/components/scheduler-editor/nylas-custom-booking-flow/nylas-custom-booking-flow.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-custom-booking-flow {\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  .header {\n    padding: 1rem;\n    border-bottom: 1px solid var(--nylas-base-200);\n    h3 {\n      margin: 0;\n      font-size: 1rem;\n      font-weight: 600;\n      line-height: 20px;\n      color: var(--nylas-base-900);\n      text-align: left;\n    }\n    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  .nylas-custom-booking-flow__loading {\n    padding-bottom: 1rem;\n    .label {\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n      margin: 1rem 1rem 0;\n      color: var(--nylas-base-800);\n    }\n    .loading-button {\n      margin: 0 1rem;\n      padding: 0;\n      width: inherit;\n      height: 48px;\n      color: black;\n      font-size: 1rem;\n      cursor: not-allowed;\n      display: flex;\n      gap: 0.5rem;\n      justify-content: space-between;\n      align-items: center;\n      background: transparent;\n      border: 1px solid var(--nylas-base-200);\n      border-radius: var(--nylas-border-radius-2x);\n      span {\n        padding: 0 1rem;\n      }\n    }\n  }\n  .nylas-custom-booking-flow__dropdown {\n    padding: 1rem;\n    span.label {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      color: var(--nylas-base-800);\n      tooltip-component {\n        display: flex;\n      }\n    }\n    select-dropdown::part(sd_dropdown) {\n      width: 100%;\n    }\n    select-dropdown::part(sd_dropdown-button) {\n      width: 100%;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      border: 1px solid var(--nylas-base-200);\n      border-radius: var(--nylas-border-radius-2x);\n      padding: 1rem;\n    }\n    select-dropdown::part(sd_dropdown-content) {\n      width: 100%;\n      max-width: unset;\n    }\n    select-dropdown::part(sd_dropdown-button-selected-label) {\n      max-width: calc(100% - 2rem);\n      font-family: var(--nylas-font-family);\n      font-size: 16px;\n      line-height: 24px;\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';\n\n/**\n * The `nylas-custom-booking-flow` component is a UI component that displays the booking calendar picker.\n * @part ncbf - The custom booking flow container\n * @part ncbf__header - The header of the custom booking flow\n * @part ncbf__dropdown - The dropdown container\n * @part ncbf__dropdown-button - The dropdown button\n * @part ncbf__dropdown-content - The dropdown content\n */\n@Component({\n  tag: 'nylas-custom-booking-flow',\n  styleUrl: 'nylas-custom-booking-flow.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasCustomBookingFlow {\n  @Element() host!: HTMLNylasCustomBookingFlowElement;\n  /**\n   * The selected config\n   */\n  @Prop() selectedConfiguration?: Configuration;\n\n  /**\n   * The name of the calendar picker.\n   */\n  @Prop() name: string = 'booking-type';\n  /**\n   * The booking type.\n   */\n  @Prop() bookingType: string = '';\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The selected bookingType.\n   */\n  @State() selectedBookingType: string = '';\n\n  /**\n   * This event is fired when the selected bookingType changes.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n    valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\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-booking-flow', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('selectedConfiguration')\n  selectedConfigurationChangedHandler(newValue: Configuration, oldValue: Configuration) {\n    debug('nylas-custom-booking-flow', 'selectedConfigurationChangedHandler', newValue, oldValue);\n    if (newValue?.event_booking?.booking_type) {\n      this.bookingType = newValue?.event_booking?.booking_type;\n    }\n    // TODO: Remove this when the internals in tests are fixed.\n    if (typeof this.internals.setFormValue === 'function') {\n      this.internals.setFormValue(this.bookingType.toString(), 'booking-calendar');\n    }\n    this.selectedBookingType = this.bookingType;\n  }\n\n  // Lifecycle methods\n  connectedCallback() {\n    debug('nylas-custom-booking-flow', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-custom-booking-flow', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-custom-booking-flow', '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-booking-flow', 'componentDidLoad');\n  }\n\n  componentWillUpdate() {\n    debug('nylas-custom-booking-flow', 'componentWillUpdate');\n  }\n\n  componentDidUpdate() {\n    debug('nylas-custom-booking-flow', 'componentDidUpdate');\n  }\n\n  componentWillRender() {\n    debug('nylas-custom-booking-flow', 'componentWillRender');\n  }\n\n  componentDidRender() {\n    debug('nylas-custom-booking-flow', 'componentDidRender');\n  }\n\n  @Listen('selectedOptionChanged')\n  selectedOptionChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('nylas-custom-booking-flow', 'selectedOptionChangedHandler', event.detail);\n    // Pass as handler so that if event.defaultPrevented by parent app, this will be skipped.\n    const valueChanged = (event: CustomEvent<{ value: string; name: string }>) => {\n      const { value } = event.detail;\n      this.selectedBookingType = value;\n      this.internals.setFormValue(value.toString(), 'booking-calendar');\n    };\n    this.valueChanged.emit({ ...event.detail, valueChanged });\n  }\n\n  @RegisterComponent<NylasCustomBookingFlow, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-custom-booking-flow',\n    stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n    eventToProps: {\n      valueChanged: async (\n        event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n        _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n      ) => {\n        const { valueChanged } = event.detail;\n        // If a handler is passed, call it.\n        if (valueChanged) {\n          valueChanged(event);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    const bookingOptions = [\n      {\n        label: 'Automatically accept bookings',\n        value: 'booking',\n      },\n      {\n        label: 'Manually confirm/decline bookings',\n        value: 'pre-booking',\n      },\n    ];\n\n    return (\n      <Host>\n        <div class=\"nylas-custom-booking-flow\" part=\"ncbf\">\n          <div class=\"header\" part=\"ncbf__header\">\n            <h3>Customize booking flow</h3>\n            <p>Customize how new bookings are handled when a booking is completed.</p>\n          </div>\n\n          {bookingOptions.length > 0 ? (\n            <div class=\"nylas-custom-booking-flow__dropdown\">\n              <span class=\"label\">\n                After a booking is confirmed\n                <tooltip-component>\n                  <info-icon slot=\"tooltip-icon\" />\n                  <span slot=\"tooltip-content\">\n                    Choose how you’d like to handle new bookings. If you choose to manually confirm/decline bookings, you will be able to review and accept or decline each booking\n                    request.\n                  </span>\n                </tooltip-component>\n              </span>\n              <select-dropdown\n                name=\"booking-type\"\n                options={bookingOptions}\n                withSearch={false}\n                exportparts=\"sd_dropdown: ncbf__dropdown, sd_dropdown-button: ncbf__dropdown-button, sd_dropdown-content: ncbf__dropdown-content\"\n                defaultSelectedOption={bookingOptions.find(cal => cal.value == this.bookingType) ?? bookingOptions[0]}\n              />\n            </div>\n          ) : (\n            <div class=\"nylas-custom-booking-flow__loading\">\n              <span class=\"label\">\n                Select a calendar to book meetings on <info-icon />\n              </span>\n              <div class=\"loading-button\">\n                <span>Loading...</span>\n              </div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nylas-date-picker2.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 { k as getLastDayOfMonth, l as getFirstDayOfMonth, n as isSameDay, o as isSameMonth } from './utils.js';
+import { l as getLastDayOfMonth, n as getFirstDayOfMonth, o as addDaysToCurrentDate, p as isSameDay, q as isSameMonth } from './utils.js';
 import { d as defineCustomElement$1 } from './chevron.js';
 
 const t0 = new Date, t1 = new Date;
@@ -1764,9 +1764,11 @@ const NylasDatePicker = proxyCustomElement(class NylasDatePicker extends HTMLEle
         this.monthChanged = createEvent(this, "monthChanged", 7);
         this.selectableDates = undefined;
         this.selectedDate = undefined;
+        this.configSettings = undefined;
         this.isLoading = undefined;
         this.month = this.selectedDate || new Date();
         this.dates = this.getDates();
+        this.disableNextMonthButton = false;
     }
     connectedCallback() { }
     disconnectedCallback() { }
@@ -1781,6 +1783,15 @@ const NylasDatePicker = proxyCustomElement(class NylasDatePicker extends HTMLEle
     }
     changeMonth(change) {
         this.month = new Date(this.month.getFullYear(), this.month.getMonth() + change, 1);
+        const nextMonth = new Date(this.month.getFullYear(), this.month.getMonth() + 1, 1);
+        const availableDaysInFuture = this.configSettings?.scheduler?.available_days_in_future;
+        const endDate = addDaysToCurrentDate(new Date(), availableDaysInFuture);
+        if (endDate.getTime() < nextMonth.getTime()) {
+            this.disableNextMonthButton = true;
+        }
+        else {
+            this.disableNextMonthButton = false;
+        }
         this.dates = this.getDates();
         this.monthChanged.emit(this.month);
         this.selectDate();
@@ -1792,7 +1803,7 @@ const NylasDatePicker = proxyCustomElement(class NylasDatePicker extends HTMLEle
         return date && selectableDates?.find(d => isSameDay(d, date)) === undefined;
     }
     render() {
-        return (h(Host, { key: 'da3c7e290b60613575379d559e03d5e1dca04535', part: "ndp" }, h("div", { key: '4bb1b14f4f609f601b27f7ad2eb4baeed6cc4d55', class: "nylas-date-picker" }, h("div", { key: '5d6c68298c5e9606bae9e45a99f0c59da3d36854', class: 'header flex-row' }, h("h2", { key: '2504a779961e1e07a881f2eb2f5ffa5d8329e627', part: 'ndp__month-header' }, h("strong", { key: '433fdd38ccf5b49144bafd3b284acd26b94d19c4' }, this.month.toLocaleDateString(undefined, { month: 'long' })), "\u00A0", this.month.toLocaleDateString(undefined, { year: 'numeric' })), h("div", { key: 'ffaa3276b249a85dc197828625835ad1f2278179', class: 'pagination' }, h("button", { key: '451c9d09fc01e4c7ae35742d7c6b4b2f3da4d3ee', onClick: () => this.changeMonth(-1), class: { 'chevron-left': true, 'button': true }, disabled: !this.selectableDates?.length || this.month <= new Date(), part: "ndp__month-button" }, h("chevron-icon", { key: '3a23fa0fb325feab4b56477602f122b800dce5ce' })), h("button", { key: '56b81156d02525a70c6c567e5facb1d9995ea2de', onClick: () => this.changeMonth(1), class: { 'chevron-right': true, 'button': true }, disabled: !this.selectableDates?.length, part: "ndp__month-button" }, h("chevron-icon", { key: '1329d513678bffec6bc21d579b240e7af29ec530' })))), h("div", { key: '14eb94fe04ca2797f3377057a87825689b818719', class: 'dates' }, ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'].map(day => {
+        return (h(Host, { key: 'fd7de67053417b11844a66e5b978f7feb80efe18', part: "ndp" }, h("div", { key: 'a08943851e2239ad12121b90f35760d73a085441', class: "nylas-date-picker" }, h("div", { key: '832ad38012c55eb04ab2c5b0ceb50052ab3edd42', class: 'header flex-row' }, h("h2", { key: '2df451227e57dfee081c1d4435443e479cf8871c', part: 'ndp__month-header' }, h("strong", { key: '63421dca4b9bf36207ba05e9eff795c7c198287c' }, this.month.toLocaleDateString(undefined, { month: 'long' })), "\u00A0", this.month.toLocaleDateString(undefined, { year: 'numeric' })), h("div", { key: 'ca982a82d87baf5658674624c1153f14e77470aa', class: 'pagination' }, h("button", { key: 'd2a41582014f92c23784c71fe1df9834d77fd355', onClick: () => this.changeMonth(-1), class: { 'chevron-left': true, 'button': true }, disabled: !this.selectableDates?.length || this.month <= new Date(), part: "ndp__month-button" }, h("chevron-icon", { key: '4f319da7e440236edb9bfa711fb0b05cd046dc8e' })), h("button", { key: 'ff00426293e1857592ebae58557ea46e5db9858d', onClick: () => this.changeMonth(1), class: { 'chevron-right': true, 'button': true }, disabled: !this.selectableDates?.length || this.disableNextMonthButton, part: "ndp__month-button" }, h("chevron-icon", { key: '7075f5e8da61c9d91fb612771a3d7672f1521b6f' })))), h("div", { key: '3ad884077d163de5182731c03bf856c9e204f411', class: 'dates' }, ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'].map(day => {
             return (h("div", { class: 'day', part: "ndp__day" }, day));
         }), this.dates.map((date, i) => {
             const isDisabled = this.isDisabled(date, this.selectableDates);
@@ -1814,9 +1825,11 @@ const NylasDatePicker = proxyCustomElement(class NylasDatePicker extends HTMLEle
 }, [1, "nylas-date-picker", {
         "selectableDates": [16],
         "selectedDate": [16],
+        "configSettings": [16],
         "isLoading": [4, "is-loading"],
         "month": [32],
-        "dates": [32]
+        "dates": [32],
+        "disableNextMonthButton": [32]
     }]);
 __decorate([
     RegisterComponent({
@@ -1825,6 +1838,7 @@ __decorate([
             ['scheduler.selectableDates', 'selectableDates'],
             ['scheduler.selectedDate', 'selectedDate'],
             ['scheduler.isLoading', 'isLoading'],
+            ['scheduler.configSettings', 'configSettings'],
         ]),
         eventToProps: {
             dateSelected: async (event, nylasSchedulerConnector) => {