@nylas/web-elements 1.0.2-canary.2 → 1.1.0-canary.3

package/dist/components/nylas-additional-participants.js.map

@@ -1 +1 @@
-{"file":"nylas-additional-participants.js","mappings":"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","names":["NylasAdditionalParticipants"],"sources":["src/components/scheduler-editor/nylas-additional-participants/nylas-additional-participants.scss?tag=nylas-additional-participants&encapsulation=shadow","src/components/scheduler-editor/nylas-additional-participants/nylas-additional-participants.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  margin: 1rem;\n  @include default-css-variables;\n}\n\n.nylas-additional-participants__title {\n  color: var(--nylas-base-nylas-base-900-aaa, #101323);\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 20px; /* 125% */\n  margin: 0;\n  text-align: left;\n}\n.nylas-additional-participants__subtitle {\n  color: var(--nylas-base-nylas-base-600-aaa, #3e4784);\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px; /* 142.857% */\n  margin: 0.25rem 0px 0px;\n  text-align: left;\n}\n.nylas-additional-participants__content {\n  padding: 1rem;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n.nylas-additional-participants__block {\n  display: flex;\n  justify-content: space-between;\n  gap: 0.5rem;\n}\n\n.nylas-additional-participants__input_group {\n  padding-top: 8px;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  label {\n    display: flex;\n    align-items: center;\n    color: var(--nylas-base-nylas-base-800);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 150%;\n  }\n}\n.nylas-additional-participants__input_wrapper {\n  display: flex;\n  border-width: 1;\n  border-radius: 8px;\n  border: 1px solid var(--Nylas-base-Nylas-base-300, #b3b8d8);\n  button {\n    padding: 12px;\n    border: none;\n    background: none;\n    cursor: pointer;\n    &:hover,\n    &:active {\n      color: var(--nylas-primary);\n    }\n  }\n}\n.nylas-additional-participants__input_wrapper_organizer {\n  background: var(--Nylas-base-Nylas-base-50, #f8f9fc);\n}\n\n.nylas-additional-participants__input {\n  flex: 1;\n  padding: 12px 16px;\n  border-right: 1px solid var(--Nylas-base-Nylas-base-300, #b3b8d8);\n  input {\n    border: none;\n    outline: none;\n    background: none;\n    width: 100%;\n  }\n}\n.nylas-additional-participants__input_wrapper_invalid {\n  border: 1px solid var(--nylas-error, #cc4841);\n  color: var(--Nylas-base-Nylas-base-400, #717bbc);\n}\n\n.nylas-additional-participants__add {\n  padding: 12px;\n  display: flex;\n  align-items: center;\n  border: none;\n  background: none;\n  cursor: pointer;\n  span {\n    padding: 0 8px;\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 500;\n  }\n  &:hover,\n  &:active {\n    color: var(--nylas-primary);\n  }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, Prop, State, Watch, h, Element } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\ntype Participant = {\n  name?: string;\n  email: string;\n  is_valid?: boolean;\n  is_organizer: boolean;\n  availability?: Availability;\n  booking?: Booking;\n};\ntype Availability = {\n  calendar_ids: string[];\n};\ntype Booking = {\n  calendar_id: string;\n};\n\n/**\n * The `nylas-additional-participants` component is a form input for adding additional participants to an event.\n */\n@Component({\n  tag: 'nylas-additional-participants',\n  styleUrl: 'nylas-additional-participants.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasAdditionalParticipants {\n  @Element() host!: HTMLNylasAdditionalParticipantsElement;\n  @Prop() name: string = 'participants';\n  @Prop() eventParticipants?: Participant[];\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-additional-participants', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @State() participants: Participant[] = this.eventParticipants ?? [];\n  @State() participantsValid: boolean = true;\n  connectedCallback() {\n    debug('nylas-additional-participants', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-additional-participants', 'componentWillLoad');\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-additional-participants', 'componentDidLoad');\n    this.internals.setFormValue(JSON.stringify(this.participants), 'participants');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-additional-participants', 'disconnectedCallback');\n  }\n  onParticipantChange(event, index) {\n    debug('nylas-additional-participants', 'onParticipantChange');\n    this.participants[index].email = event.target.value;\n    this.internals.setFormValue(JSON.stringify(this.participants), 'participants');\n  }\n  addParticipant() {\n    debug('nylas-additional-participants', 'addParticipant');\n    this.participants = [...this.participants, { email: '', is_organizer: false, availability: { calendar_ids: ['primary'] } }];\n    this.internals.setFormValue(JSON.stringify(this.participants), 'participants');\n  }\n  removeParticipant(email: string) {\n    debug('nylas-additional-participants', 'addParticipant');\n    this.participants = this.participants.filter(p => p.email !== email);\n    this.internals.setFormValue(JSON.stringify(this.participants), 'participants');\n  }\n  validate(email, index) {\n    debug('nylas-additional-participants', 'validate');\n    const regex = /^(([^<>()\\[\\]\\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\n    const valid = regex.test(String(email).toLowerCase());\n    this.participants[index].is_valid = valid;\n    this.internals.setFormValue(JSON.stringify(this.participants), 'participants');\n  }\n\n  @RegisterComponent<NylasAdditionalParticipants, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-additional-participants',\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <nylas-form-card>\n          <h3 slot=\"header-title\" class=\"nylas-additional-participants__title\">\n            Additional participants\n          </h3>\n          <p slot=\"header-subtitle\" class=\"nylas-additional-participants__subtitle\">\n            Add anyone else who would be joining for this event.\n          </p>\n          <div slot=\"content\" class=\"nylas-additional-participants__content\">\n            <div>\n              {this.participants.map((participant, index) => {\n                return (\n                  <div class={'nylas-additional-participants__input_group'}>\n                    <label>{participant.is_organizer ? 'Organizer' : `Participant ${index}`}</label>\n                    <div\n                      class={`nylas-additional-participants__input_wrapper ${participant.is_organizer && 'nylas-additional-participants__input_wrapper_organizer'} ${participant.is_valid === false && 'nylas-additional-participants__input_wrapper_invalid'}`}\n                    >\n                      <div class=\"nylas-additional-participants__input\">\n                        <input\n                          type=\"text\"\n                          value={participant.email}\n                          onInput={e => {\n                            this.onParticipantChange(e, index);\n                          }}\n                          readOnly={participant.is_organizer}\n                          onBlur={() => this.validate(participant.email, index)}\n                        />\n                      </div>\n                      {!participant.is_organizer && (\n                        <button onClick={() => this.removeParticipant(participant.email)}>\n                          <close-icon />\n                        </button>\n                      )}\n                    </div>\n                  </div>\n                );\n              })}\n            </div>\n            {/* <button class=\"nylas-additional-participants__add\" onClick={() => this.addParticipant()}>\n              <add-circle-icon /> <span>Add a participant</span>\n            </button> */}\n          </div>\n        </nylas-form-card>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nylas-additional-participants.js","mappings":"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","names":["NylasAdditionalParticipants"],"sources":["src/components/scheduler-editor/nylas-additional-participants/nylas-additional-participants.scss?tag=nylas-additional-participants&encapsulation=shadow","src/components/scheduler-editor/nylas-additional-participants/nylas-additional-participants.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  margin: 1rem;\n  @include default-css-variables;\n}\n\n.nylas-additional-participants__title {\n  color: var(--nylas-base-nylas-base-900-aaa, #101323);\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 20px; /* 125% */\n  margin: 0;\n  text-align: left;\n}\n.nylas-additional-participants__subtitle {\n  color: var(--nylas-base-600);\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px; /* 142.857% */\n  margin: 0.25rem 0px 0px;\n  text-align: left;\n}\n.nylas-additional-participants__content {\n  padding: 1rem;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n.nylas-additional-participants__input_group {\n  padding-top: 8px;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  label {\n    display: flex;\n    align-items: center;\n    color: var(--nylas-base-800);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 150%;\n  }\n}\n.nylas-additional-participants__input_wrapper {\n  display: flex;\n  border-width: 1;\n  border-radius: 8px;\n  border: 1px solid var(--nylas-base-300);\n  button {\n    padding: 12px;\n    border: none;\n    background: none;\n    cursor: pointer;\n    &:hover,\n    &:active {\n      color: var(--nylas-primary);\n    }\n  }\n}\n.nylas-additional-participants__input_wrapper_organizer {\n  background: var(--nylas-base-50);\n}\n\n.nylas-additional-participants__input {\n  flex: 1;\n  padding: 12px 16px;\n  border-right: 1px solid var(--nylas-base-300);\n  input {\n    border: none;\n    outline: none;\n    background: none;\n    width: 100%;\n  }\n}\n\n.nylas-additional-participants__add {\n  padding: 12px;\n  display: flex;\n  align-items: center;\n  border: none;\n  background: none;\n  cursor: pointer;\n  span {\n    padding: 0 8px;\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 500;\n  }\n  &:hover,\n  &:active {\n    color: var(--nylas-primary);\n  }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, Prop, State, Watch, h, Element } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\ntype Participant = {\n  name?: string;\n  email: string;\n  is_valid?: boolean;\n  is_organizer: boolean;\n  availability?: Availability;\n  booking?: Booking;\n};\ntype Availability = {\n  calendar_ids: string[];\n};\ntype Booking = {\n  calendar_id: string;\n};\n\n/**\n * The `nylas-additional-participants` component is a form input for adding additional participants to an event.\n * @part nap__title - The title of the component.\n * @part nap__subtitle - The subtitle of the component.\n * @part nap__content - The content of the component.\n * @part nap__input_group - The input group of the component.\n * @part nap__input_wrapper - The input wrapper of the component.\n * @part nap__input - The input of the component.\n * @part nap__remove-participant - The remove participant button of the component.\n * @part nap__add-participant - The add participant button of the component.\n *\n */\n@Component({\n  tag: 'nylas-additional-participants',\n  styleUrl: 'nylas-additional-participants.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasAdditionalParticipants {\n  @Element() host!: HTMLNylasAdditionalParticipantsElement;\n  @Prop() name: string = 'participants';\n  @Prop() eventParticipants?: Participant[];\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-additional-participants', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @State() participants: Participant[] = this.eventParticipants ?? [];\n  @State() participantsValid: boolean = true;\n  connectedCallback() {\n    debug('nylas-additional-participants', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-additional-participants', 'componentWillLoad');\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-additional-participants', 'componentDidLoad');\n    this.internals.setFormValue(JSON.stringify(this.participants), 'participants');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-additional-participants', 'disconnectedCallback');\n  }\n  onParticipantChange(event, index) {\n    debug('nylas-additional-participants', 'onParticipantChange');\n    this.participants[index].email = event.target.value;\n    this.internals.setFormValue(JSON.stringify(this.participants), 'participants');\n  }\n  addParticipant() {\n    debug('nylas-additional-participants', 'addParticipant');\n    this.participants = [...this.participants, { email: '', is_organizer: false, availability: { calendar_ids: ['primary'] } }];\n    this.internals.setFormValue(JSON.stringify(this.participants), 'participants');\n  }\n  removeParticipant(email: string) {\n    debug('nylas-additional-participants', 'addParticipant');\n    this.participants = this.participants.filter(p => p.email !== email);\n    this.internals.setFormValue(JSON.stringify(this.participants), 'participants');\n  }\n  validate(email, index) {\n    debug('nylas-additional-participants', 'validate');\n    const regex = /^(([^<>()\\[\\]\\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\n    const valid = regex.test(String(email).toLowerCase());\n    this.participants[index].is_valid = valid;\n    this.internals.setFormValue(JSON.stringify(this.participants), 'participants');\n  }\n\n  @RegisterComponent<NylasAdditionalParticipants, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-additional-participants',\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <nylas-form-card>\n          <h3 slot=\"header-title\" class=\"nylas-additional-participants__title\" part=\"nap__title\">\n            Additional participants\n          </h3>\n          <p slot=\"header-subtitle\" class=\"nylas-additional-participants__subtitle\" part=\"nap__subtitle\">\n            Add anyone else who would be joining for this event.\n          </p>\n          <div slot=\"content\" class=\"nylas-additional-participants__content\">\n            <div>\n              {this.participants.map((participant, index) => {\n                return (\n                  <div class={'nylas-additional-participants__input_group'} part=\"nap__input_group\">\n                    <label>{participant.is_organizer ? 'Organizer' : `Participant ${index}`}</label>\n                    <div\n                      part=\"nap__input_wrapper\"\n                      class={`nylas-additional-participants__input_wrapper ${participant.is_organizer && 'nylas-additional-participants__input_wrapper_organizer'} ${participant.is_valid === false && 'nylas-additional-participants__input_wrapper_invalid'}`}\n                    >\n                      <div class=\"nylas-additional-participants__input\" part=\"nap__input\">\n                        <input\n                          type=\"text\"\n                          value={participant.email}\n                          onInput={e => {\n                            this.onParticipantChange(e, index);\n                          }}\n                          readOnly={participant.is_organizer}\n                          onBlur={() => this.validate(participant.email, index)}\n                        />\n                      </div>\n                      {!participant.is_organizer && (\n                        <button onClick={() => this.removeParticipant(participant.email)} part=\"nap__remove-participant\">\n                          <close-icon />\n                        </button>\n                      )}\n                    </div>\n                  </div>\n                );\n              })}\n            </div>\n            {/* <button class=\"nylas-additional-participants__add\"  part=\"nap__add-participant\" onClick={() => this.addParticipant()}>\n              <add-circle-icon /> <span>Add a participant</span>\n            </button> */}\n          </div>\n        </nylas-form-card>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nylas-api-request.js

@@ -0,0 +1,37 @@
+class NylasApiRequest {
+}
+class NylasIdentityRequestWrapper {
+    constructor(session) {
+        this.session = session;
+    }
+    setActiveGrantId(grantId) {
+        this.activeGrantId = grantId;
+    }
+    async request({ method, path, body, headers }) {
+        return this.session.fetch(`grants/me/${path}`, {
+            method,
+            headers: headers ? new Headers(headers) : undefined,
+            body,
+            ...(this.session.isMultiAccount() && this.activeGrantId ? { grant_id: this.activeGrantId } : {}),
+        });
+    }
+    async currentUser() {
+        const grantId = this.session.isMultiAccount() ? this.activeGrantId : undefined;
+        const idToken = await this.session.getProfile(grantId);
+        if (!idToken) {
+            return null;
+        }
+        return {
+            id: idToken.sub,
+            email: idToken.email,
+            name: idToken.name,
+        };
+    }
+    async authenticationUrl(authArgs) {
+        return this.session.auth(authArgs || {});
+    }
+}
+
+export { NylasIdentityRequestWrapper as N };
+
+//# sourceMappingURL=nylas-api-request.js.map

package/dist/components/nylas-api-request.js.map

@@ -0,0 +1 @@
+{"file":"nylas-api-request.js","mappings":"MAyCsB,eAAe;CAcpC;MAOY,2BAA2B;IAYtC,YAAY,OAAsB;QAChC,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;KACxB;IAQD,gBAAgB,CAAC,OAAe;QAC9B,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC;KAC9B;IAWD,MAAM,OAAO,CAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAoB;QAChE,OAAO,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,aAAa,IAAI,EAAE,EAAE;YAC7C,MAAM;YACN,OAAO,EAAE,OAAO,GAAG,IAAI,OAAO,CAAC,OAAO,CAAC,GAAG,SAAS;YACnD,IAAI;YACJ,IAAI,IAAI,CAAC,OAAO,CAAC,cAAc,EAAE,IAAI,IAAI,CAAC,aAAa,GAAG,EAAE,QAAQ,EAAE,IAAI,CAAC,aAAa,EAAE,GAAG,EAAE,CAAC;SACjG,CAAe,CAAC;KAClB;IAOD,MAAM,WAAW;QACf,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,cAAc,EAAE,GAAG,IAAI,CAAC,aAAa,GAAG,SAAS,CAAC;QAC/E,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QACvD,IAAI,CAAC,OAAO,EAAE;YACZ,OAAO,IAAI,CAAC;SACb;QAED,OAAO;YACL,EAAE,EAAE,OAAO,CAAC,GAAG;YACf,KAAK,EAAE,OAAO,CAAC,KAAK;YACpB,IAAI,EAAE,OAAO,CAAC,IAAI;SACnB,CAAC;KACH;IAOD,MAAM,iBAAiB,CAAC,QAAmB;QACzC,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC;KAC1C;;;;;","names":[],"sources":["src/common/nylas-api-request.ts"],"sourcesContent":["import type { NylasSessions } from '@nylas/identity';\n\n/**\n * Arguments for making a request to the Nylas API.\n */\nexport type NylasRequestArgs = {\n  method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';\n  path: string;\n  body?: any;\n  headers?: Record<string, string>;\n};\n\n/**\n * A model representing a user in the Nylas Identity system.\n */\nexport type User = {\n  id: string;\n  email: string;\n  name?: string;\n};\n\n/**\n * Arguments for authenticating a user with the Nylas Identity system.\n */\nexport type AuthArgs = {\n  provider?: string;\n  scope?: Array<string>;\n  loginHint?: string;\n  includeGrantScopes?: boolean;\n  prompt?: string;\n  metadata?: string;\n  state?: string;\n};\n\n/**\n * Interface for making requests to the Nylas API.\n *\n * This is an abstract class that is meant to be implemented by customers to provide their own\n * implementation of making requests to the Nylas API. This allows customers to use their own\n * authentication mechanism, or to use a different HTTP client library.\n */\nexport abstract class NylasApiRequest {\n  /**\n   *  This method should make an authenticated request to the Nylas API.\n   * @param args NylasRequestArgs\n   */\n  abstract request<T>(args: NylasRequestArgs): Promise<T>;\n  /**\n   * This method should return the current user's information.\n   */\n  abstract currentUser(): Promise<User | null>;\n  /**\n   * This method should return the URL to redirect the user to for authentication.\n   */\n  abstract authenticationUrl(authArgs?: AuthArgs): Promise<string | undefined>;\n}\n\n/**\n * A wrapper around the Nylas Identity session that implements the NylasApiRequest interface.\n * This class is used by the Nylas Web Elements to make requests to the Nylas API if no custom\n * implementation of NylasApiRequest is provided.\n */\nexport class NylasIdentityRequestWrapper implements NylasApiRequest {\n  /**\n   * The Nylas Identity session instance.\n   */\n  private session: NylasSessions;\n\n  /**\n   * The grant_id to use for requests, if there is multi-account support\n   * enabled in the Nylas Identity settings.\n   */\n  private activeGrantId?: string;\n\n  constructor(session: NylasSessions) {\n    this.session = session;\n  }\n\n  /**\n   * This method sets the grant_id to use for requests.\n   * This is used when there is multi-account support enabled in the Nylas Identity settings.\n   *\n   * @param grantId\n   */\n  setActiveGrantId(grantId: string) {\n    this.activeGrantId = grantId;\n  }\n\n  /**\n   * This method makes a request to the Nylas API, using the Nylas Identity's fetch method.\n   *\n   * The `grants/me/` prefix is added because all requests made from the browser to the Nylas API\n   * must be made on behalf of the currently logged in user with a valid access token.\n   *\n   * @param NylasRequestArgs\n   * @returns Promise<T>\n   */\n  async request<T>({ method, path, body, headers }: NylasRequestArgs): Promise<T> {\n    return this.session.fetch(`grants/me/${path}`, {\n      method,\n      headers: headers ? new Headers(headers) : undefined,\n      body,\n      ...(this.session.isMultiAccount() && this.activeGrantId ? { grant_id: this.activeGrantId } : {}),\n    }) as Promise<T>;\n  }\n\n  /**\n   * This method returns the current (logged in) user's information.\n   * If the user is not logged in, it returns null.\n   * @returns Promise<User | null>\n   */\n  async currentUser(): Promise<User | null> {\n    const grantId = this.session.isMultiAccount() ? this.activeGrantId : undefined;\n    const idToken = await this.session.getProfile(grantId);\n    if (!idToken) {\n      return null;\n    }\n\n    return {\n      id: idToken.sub,\n      email: idToken.email,\n      name: idToken.name,\n    };\n  }\n\n  /**\n   * This method returns the URL to redirect the user to for authentication.\n   * @param authConfig authArgs\n   * @returns Promise<string | undefined>\n   */\n  async authenticationUrl(authArgs?: AuthArgs): Promise<string | undefined> {\n    return this.session.auth(authArgs || {});\n  }\n}\n"],"version":3}

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

@@ -12,7 +12,7 @@ import { d as defineCustomElement$3 } from './search.js';
 import { d as defineCustomElement$2 } from './select-dropdown2.js';
 import { d as defineCustomElement$1 } from './toolitp-component.js';
 
-const nylasAvailabilityPickerCss = ":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-availability-picker{width:inherit;display:flex;flex-direction:column;margin:1rem;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-200)}.nylas-availability-picker .header{padding:1rem;border-bottom:1px solid var(--nylas-base-200)}.nylas-availability-picker .header h3{margin:0;font-size:1rem;font-weight:600;line-height:20px;color:var(--nylas-base-900);text-align:left}.nylas-availability-picker .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-availability-picker .content{padding:1rem;color:var(--nylas-base-900)}.nylas-availability-picker .content .select-timezone{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--nylas-base-200);padding-bottom:1rem}.nylas-availability-picker .content .select-timezone h4{display:flex;gap:0.5rem;align-items:center;margin:0;font-size:1rem;font-weight:500;line-height:20px}.nylas-availability-picker .content .select-timezone select-dropdown{border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x)}.nylas-availability-picker .content .availability{display:flex;flex-direction:column;gap:1rem;padding:0 0.5rem;margin:1rem 0}.nylas-availability-picker .content .availability .availability-day{display:grid;grid-template-columns:minmax(auto, 65px) 1fr minmax(auto, 40px);gap:1rem;align-items:baseline}@media screen and (max-width: 768px){.nylas-availability-picker .content .availability .availability-day{grid-template-columns:auto}}.nylas-availability-picker .content .availability .availability-day .day{display:flex;gap:0.5rem;align-items:center}.nylas-availability-picker .content .availability .availability-day .time-ranges span.unavailable{height:48px;display:flex;align-items:center}.nylas-availability-picker .content .availability .availability-day .time-ranges .time-range{display:flex;gap:1.5rem;justify-content:space-between;align-items:baseline}.nylas-availability-picker .content .availability .availability-day .time-ranges .time-range .pickers{display:flex;gap:1rem}.nylas-availability-picker .content .availability .availability-day .time-ranges .time-range .pickers span{margin-top:0.75rem}.nylas-availability-picker .content .availability .availability-day .time-ranges .time-range:not(:last-of-type){margin-bottom:1rem}.nylas-availability-picker .content .availability .availability-day .time-ranges p.error{color:var(--nylas-error)}.nylas-availability-picker .content .availability .availability-day button{border:none;background:transparent;height:40px;cursor:pointer;color:var(--nylas-base-800)}.nylas-availability-picker .content .availability .availability-day button:hover,.nylas-availability-picker .content .availability .availability-day button:active{color:var(--nylas-primary)}";
+const nylasAvailabilityPickerCss = ":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-availability-picker{width:inherit;display:flex;flex-direction:column;margin:1rem;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-200)}.nylas-availability-picker .header{padding:1rem;border-bottom:1px solid var(--nylas-base-200)}.nylas-availability-picker .header h3{margin:0;font-size:16px;font-weight:600;line-height:20px;color:var(--nylas-base-900);text-align:left}.nylas-availability-picker .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-availability-picker .content{padding:1rem;color:var(--nylas-base-900);font-size:16px;font-family:var(--nylas-font-family)}@media screen and (max-width: 504px){.nylas-availability-picker .content{font-size:15px}}.nylas-availability-picker .content .select-timezone{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--nylas-base-200);padding-bottom:1rem;gap:1rem}.nylas-availability-picker .content .select-timezone h4{display:flex;gap:0.5rem;align-items:center;margin:0;font-size:16px;font-weight:500;line-height:20px}@media screen and (max-width: 504px){.nylas-availability-picker .content .select-timezone h4{font-size:15px}}.nylas-availability-picker .content .select-timezone select-dropdown{border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x)}.nylas-availability-picker .content .availability{display:flex;flex-direction:column;gap:1rem;padding:0 0.5rem;margin:1rem 0}@media screen and (max-width: 504px){.nylas-availability-picker .content .availability{gap:0.5rem;padding:0}}.nylas-availability-picker .content .availability .availability-day{display:grid;grid-template-columns:minmax(auto, 65px) 1fr minmax(auto, 40px);gap:1rem;align-items:baseline}@media screen and (max-width: 768px){.nylas-availability-picker .content .availability .availability-day{grid-template-columns:78px 1fr auto}}@media screen and (max-width: 504px){.nylas-availability-picker .content .availability .availability-day{display:inline-grid;gap:8px;grid-template-columns:60px 1fr auto}}.nylas-availability-picker .content .availability .availability-day .day{display:flex;gap:0.5rem;align-items:center}@media screen and (max-width: 504px){.nylas-availability-picker .content .availability .availability-day .day{gap:0.25rem}}.nylas-availability-picker .content .availability .availability-day .day input[type=checkbox]{transform:scale(1.3)}.nylas-availability-picker .content .availability .availability-day .time-ranges span.unavailable{height:48px;display:flex;align-items:center;justify-content:center}.nylas-availability-picker .content .availability .availability-day .time-ranges .time-range{display:flex;gap:1.5rem;justify-content:space-between;align-items:baseline}@media screen and (max-width: 504px){.nylas-availability-picker .content .availability .availability-day .time-ranges .time-range{justify-content:unset;gap:0.5rem}}.nylas-availability-picker .content .availability .availability-day .time-ranges .time-range .pickers{display:flex;gap:1rem}@media screen and (max-width: 504px){.nylas-availability-picker .content .availability .availability-day .time-ranges .time-range .pickers{gap:0.5rem}}.nylas-availability-picker .content .availability .availability-day .time-ranges .time-range .pickers span{margin-top:0.75rem}.nylas-availability-picker .content .availability .availability-day .time-ranges .time-range:not(:last-of-type){margin-bottom:1rem}.nylas-availability-picker .content .availability .availability-day .time-ranges p.error{color:var(--nylas-error)}.nylas-availability-picker .content .availability .availability-day button{border:none;background:transparent;height:40px;cursor:pointer;color:var(--nylas-base-800)}.nylas-availability-picker .content .availability .availability-day button:hover,.nylas-availability-picker .content .availability .availability-day button:active{color:var(--nylas-primary)}";
 
 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;
@@ -285,10 +285,10 @@ const NylasAvailabilityPicker = proxyCustomElement(class NylasAvailabilityPicker
             label: TIMEZONE_MAP[key],
             value: key,
         }));
-        return (h(Host, { key: '212096aa82e4abcfb7ab34a0a0921e541c4570af' }, h("div", { key: '83a12b281dd08f77e2a184941f47f69c29d804ba', class: "nylas-availability-picker" }, h("div", { key: '82f32b28ac7e9e13c1aa01a0cc99bd2ea68f2400', class: "header", part: "ncp__header" }, h("h3", { key: 'c47f420a6c0226b2d3352d178f8c739978554195' }, "General availability"), h("p", { key: 'badf2c5553670dc99da06815fc418dba59772f7a' }, "Set your availability for scheduling meetings.")), h("div", { key: '32d90f90f5c98ec4afb71286d5963e4431b65932', class: "content" }, h("div", { key: 'f29ed9e09dd1c480b1cc93f6adebf0af6d7a17f9', class: "select-timezone" }, h("h4", { key: '82f68bd68a4c775afb5c16641ce7c42769850722', class: "sub-header" }, "Select timezone", h("span", { key: '3f6113c3d9703096321389d4f7ac6daa259f13f5', class: "icon" }, h("tooltip-component", { key: 'c2c8212ae124d05ccc150c14a3efd1a16e027970' }, h("info-icon", { key: 'f80669ec0e2200c94351a98ce3a7ba710f154df4', slot: "tooltip-icon" }), h("span", { key: '25f33c0424a8bcb48b5e09a9e1297877834f9ff2', slot: "tooltip-content" }, "Select your timezone for displaying availability.")))), h("select-dropdown", { key: 'fa2b1fbb694ac302e94e8b75740a26b3ec841fdc', name: "timezone", options: timezoneOptions, defaultSelectedOption: timezoneOptions.find(i => i.value === this.defaultTimezone) }, h("span", { key: 'a8795a7bbf57c96e54ed30a8bf53884119f5a051', slot: "select-icon" }, h("globe-icon", { key: 'f041371f0d5be498ee7c474296f97d8995bcd9e4', width: "20", height: "20" })))), h("div", { key: 'caa143f02b423a5bee811b944246fff8746e2229', class: "availability" }, Object.keys(this.schedule).map(key => {
+        return (h(Host, { key: '440dc2f314a9c47eb8186f4ed965ed3052301ddf' }, h("div", { key: '2d31ef10ae53275fc065f4e9f68c32f42b60d829', class: "nylas-availability-picker" }, h("div", { key: 'aa6695b6054b81ece7ede5f5e089545a041800f6', class: "header", part: "nap__header" }, h("h3", { key: '86e0d18ca7b70d74159c5cead0d6f5a17a145fa7' }, "General availability"), h("p", { key: '05da67e03befbe936793af5ee98f801b512d28e7' }, "Set your availability for scheduling meetings.")), h("div", { key: '84c6bf714ccea4aff07d6e660d8ca3f96ce9a8cc', class: "content" }, h("div", { key: '16edf74e06bed5440df5f5ea73e90cfa83d08b29', class: "select-timezone", part: "nap__select-timezone" }, h("h4", { key: '1025677efcaf114cb86ce57324c299eeea79b37e', class: "sub-header" }, "Select timezone", h("span", { key: '6d65a6457da202c5a3d5c5cd4e185903a12cec7f', class: "icon" }, h("tooltip-component", { key: '61a40ea06c06f1d306a8b352d9ae883d09768249' }, h("info-icon", { key: '2d447cc2e6a619ee7b1cf1fd3e2b6424fcd6db5b', slot: "tooltip-icon" }), h("span", { key: '35742354ba0841bc1c17170094bab09d536208e6', slot: "tooltip-content" }, "Select your timezone for displaying availability.")))), h("select-dropdown", { key: '3532c95b077fc701cdbf89cd13668acc675cf0e4', name: "timezone", exportparts: "sd_dropdown: nap__timezone-container, sd_dropdown-button: nap__timezone-button, sd_dropdown-content: nap__timezone-dropdown-content", options: timezoneOptions, defaultSelectedOption: timezoneOptions.find(i => i.value === this.defaultTimezone) }, h("span", { key: 'c1e870c593966e29d72c3f519f3309f84e4b9a9a', slot: "select-icon" }, h("globe-icon", { key: 'df23e31168778926b6118651cd636ab801f062f1', width: "20", height: "20" })))), h("div", { key: '5ad8cf7078dc104d1258f77e1c69bebf8c82d8dd', class: "availability", part: "nap__availability" }, Object.keys(this.schedule).map(key => {
             const day = key;
             const timeRanges = this.schedule[key];
-            return (h("div", { class: "availability-day" }, h("div", { class: "day", part: "ndp__day" }, h("input", { type: "checkbox", name: day, id: day, checked: timeRanges.length > 0, onClick: () => {
+            return (h("div", { class: "availability-day" }, h("div", { class: "day", part: "nap__day" }, h("input", { type: "checkbox", name: day, id: day, checked: timeRanges.length > 0, onClick: () => {
                     if (timeRanges.length > 0) {
                         this.schedule[day] = [];
                     }
@@ -296,12 +296,12 @@ const NylasAvailabilityPicker = proxyCustomElement(class NylasAvailabilityPicker
                         this.schedule[day] = [{ start: '09:00am', end: '05:00pm' }];
                     }
                     this.schedule = { ...this.schedule };
-                } }), h("label", { htmlFor: day, "aria-label": "Select day" }, day)), h("div", { class: "time-ranges" }, timeRanges.length ? null : h("span", { class: "unavailable" }, "Unavailable"), timeRanges.length > 0 &&
+                } }), h("label", { htmlFor: day, "aria-label": "Select day" }, day)), h("div", { class: "time-ranges", part: "nap__time-ranges" }, timeRanges.length ? null : h("span", { class: "unavailable" }, "Unavailable"), timeRanges.length > 0 &&
                 timeRanges.map((timeRange, timeRangeIndex) => {
                     const startKey = `${key}:${timeRangeIndex}_start`;
                     const endKey = `${key}:${timeRangeIndex}_end`;
-                    return (h("div", { class: "time-range" }, h("div", { class: "pickers" }, h("nylas-time-window-picker", { id: startKey, hasError: this.overlapDays[day]?.includes(timeRangeIndex), time: timeRange.start, name: startKey, key: startKey, setTime: (event, additionalData) => this.setTime(startKey, event, additionalData), setFormError: (event, additionalData) => this.setFormError(startKey, event, additionalData) }), h("span", null, " - "), h("nylas-time-window-picker", { id: endKey, hasError: this.overlapDays[day]?.includes(timeRangeIndex), time: timeRange.end, name: endKey, key: endKey, minimumStartTime: timeRange.start, setTime: (event, additionalData) => this.setTime(endKey, event, additionalData), setFormError: (event, additionalData) => this.setFormError(endKey, event, additionalData) })), h("button", { onClick: () => this.removeTimeRange(day, timeRangeIndex) }, h("close-icon", null))));
-                }), h("p", { class: "error" }, this.overlapDays[day] ? 'Overlapping time ranges' : '')), h("div", null, timeRanges.length > 0 ? (h("button", { onClick: () => this.addTimeRange(day) }, h("add-circle-icon", null))) : null)));
+                    return (h("div", { class: "time-range", part: "nap__time-range" }, h("div", { class: "pickers" }, h("nylas-time-window-picker", { id: startKey, hasError: this.overlapDays[day]?.includes(timeRangeIndex), time: timeRange.start, name: startKey, key: startKey, exportparts: "time-picker: nap__time-picker-container, time-input: nap__time-picker-input, times: nap__time-picker-times", setTime: (event, additionalData) => this.setTime(startKey, event, additionalData), setFormError: (event, additionalData) => this.setFormError(startKey, event, additionalData) }), h("span", null, " - "), h("nylas-time-window-picker", { id: endKey, hasError: this.overlapDays[day]?.includes(timeRangeIndex), time: timeRange.end, name: endKey, key: endKey, minimumStartTime: timeRange.start, exportparts: "time-picker: nap__time-picker-container, time-input: nap__time-picker-input, times: nap__time-picker-times", setTime: (event, additionalData) => this.setTime(endKey, event, additionalData), setFormError: (event, additionalData) => this.setFormError(endKey, event, additionalData) })), h("button", { onClick: () => this.removeTimeRange(day, timeRangeIndex) }, h("close-icon", null))));
+                }), h("p", { class: "error" }, this.overlapDays[day] ? 'Overlapping time ranges' : '')), h("div", null, timeRanges.length > 0 ? (h("button", { onClick: () => this.addTimeRange(day), part: "nap__add-time-range" }, h("add-circle-icon", null))) : null)));
         }))))));
     }
     static get formAssociated() { return true; }

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

@@ -1 +1 @@
-{"file":"nylas-availability-picker2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-availability-picker/nylas-availability-picker.scss?tag=nylas-availability-picker&encapsulation=shadow","src/components/scheduler-editor/nylas-availability-picker/nylas-availability-picker.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-availability-picker {\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  .content {\n    padding: 1rem;\n    color: var(--nylas-base-900);\n    .select-timezone {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      border-bottom: 1px solid var(--nylas-base-200);\n      padding-bottom: 1rem;\n      h4 {\n        display: flex;\n        gap: 0.5rem;\n        align-items: center;\n        margin: 0;\n        font-size: 1rem;\n        font-weight: 500;\n        line-height: 20px;\n      }\n      select-dropdown {\n        border: 1px solid var(--nylas-base-200);\n        border-radius: var(--nylas-border-radius-2x);\n      }\n    }\n    .availability {\n      display: flex;\n      flex-direction: column;\n      gap: 1rem;\n      padding: 0 0.5rem;\n      margin: 1rem 0;\n      .availability-day {\n        display: grid;\n        grid-template-columns: minmax(auto, 65px) 1fr minmax(auto, 40px);\n        @media #{$mobile} {\n          grid-template-columns: auto;\n        }\n        gap: 1rem;\n        align-items: baseline;\n        .day {\n          display: flex;\n          gap: 0.5rem;\n          align-items: center;\n        }\n        .time-ranges {\n          span.unavailable {\n            height: 48px;\n            display: flex;\n            align-items: center;\n          }\n          .time-range {\n            display: flex;\n            gap: 1.5rem;\n            justify-content: space-between;\n            align-items: baseline;\n            .pickers {\n              display: flex;\n              gap: 1rem;\n              span {\n                margin-top: 0.75rem;\n              }\n            }\n            &:not(:last-of-type) {\n              margin-bottom: 1rem;\n            }\n          }\n          p.error {\n            color: var(--nylas-error);\n          }\n        }\n        button {\n          border: none;\n          background: transparent;\n          height: 40px;\n          cursor: pointer;\n          color: var(--nylas-base-800);\n          &:hover,\n          &:active {\n            color: var(--nylas-primary);\n          }\n        }\n      }\n    }\n  }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { convertTo12HourFormat, convertTo24HourFormat, debug, minutesToTime, timeToMinutes } 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 { TIMEZONE_MAP } from '@/common/constants';\n\ntype OpenHours = {\n  days: number[];\n  start: string;\n  end: string;\n  timezone: string;\n};\n\ntype Schedule = {\n  SUN: { start: string; end: string }[];\n  MON: { start: string; end: string }[];\n  TUE: { start: string; end: string }[];\n  WED: { start: string; end: string }[];\n  THU: { start: string; end: string }[];\n  FRI: { start: string; end: string }[];\n  SAT: { start: string; end: string }[];\n};\n\n/**\n * The `nylas-availability-picker` component is a form input for selecting availability (open hours).\n */\n@Component({\n  tag: 'nylas-availability-picker',\n  styleUrl: 'nylas-availability-picker.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasAvailabilityPicker {\n  @Element() host!: HTMLNylasAvailabilityPickerElement;\n  @Prop() openHours?: OpenHours[];\n  @Prop() name: string = 'availability';\n  @Prop() defaultTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n  /**\n   * This event is fired when the selected availability / open hours change.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: OpenHours[];\n    name: string;\n  }>;\n\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n  @State() schedule = {\n    SUN: [],\n    MON: [{ start: '09:00am', end: '05:00pm' }],\n    TUE: [{ start: '09:00am', end: '05:00pm' }],\n    WED: [{ start: '09:00am', end: '05:00pm' }],\n    THU: [{ start: '09:00am', end: '05:00pm' }],\n    FRI: [{ start: '09:00am', end: '05:00pm' }],\n    SAT: [],\n  };\n  @State() timezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n  @State() overlapDays: { [key: string]: number[] } = {};\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-calendar-picker', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('schedule')\n  scheduleChanged(newValue: Schedule, oldValue: Schedule) {\n    if (newValue !== oldValue) {\n      this.valueChanged.emit({\n        value: this.scheduleToOpenHours(newValue, this.timezone),\n        name: this.name,\n      });\n      let overlapDays: { [key: string]: number[] } = {};\n      Object.keys(newValue).forEach(key => {\n        const dayTimeRanges = newValue[key];\n        if (dayTimeRanges.length > 0) {\n          const overlaps = this.getOverlaps(dayTimeRanges);\n          if (overlaps.length > 0) {\n            overlapDays[key] = overlaps;\n          }\n        }\n      });\n      this.overlapDays = overlapDays;\n      if (typeof this.internals.setFormValue !== 'function') {\n        return;\n      }\n      if (Object.keys(overlapDays).length > 0) {\n        const element = this.host.shadowRoot?.getElementById(Object.keys(overlapDays)[0]) as HTMLInputElement;\n        if (element) {\n          this.internals.setValidity({ customError: true }, 'Overlapping time ranges found', element);\n        }\n      } else {\n        this.internals.setValidity({ customError: false });\n        this.internals.setFormValue(JSON.stringify(this.scheduleToOpenHours(newValue, this.timezone)));\n      }\n    }\n  }\n\n  @Listen('selectedOptionChanged')\n  selectedOptionChangedHandler(\n    event: CustomEvent<{\n      value: string;\n      name: string;\n    }>,\n  ) {\n    const { name, value } = event.detail;\n    if (name === 'timezone') {\n      this.timezone = value;\n      if (typeof this.internals.setFormValue !== 'function') {\n        return;\n      }\n      this.internals.setFormValue(JSON.stringify(this.scheduleToOpenHours(this.schedule, this.timezone)));\n    }\n  }\n\n  connectedCallback() {\n    debug('nylas-availability-picker', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-availability-picker', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-availability-picker', 'componentWillLoad');\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-availability-picker', 'componentDidLoad');\n    if (this.openHours && this.openHours.length > 0) {\n      this.updateSchedule(this.openHours);\n    }\n    if (typeof this.internals.setFormValue !== 'function') {\n      return;\n    }\n    this.internals.setFormValue(JSON.stringify(this.scheduleToOpenHours(this.schedule, this.timezone)));\n  }\n\n  getOverlaps(timeRanges) {\n    // Convert times to minutes and add to the array\n    let timeRangesInMinutes = timeRanges.map((range, index) => ({\n      start: timeToMinutes(range.start),\n      end: timeToMinutes(range.end),\n      originalIndex: index,\n    }));\n\n    // Sort by start time\n    timeRangesInMinutes.sort((a, b) => a.start - b.start);\n    let overlaps: number[] = [];\n    // Check for overlap\n    for (let i = 1; i < timeRangesInMinutes.length; i++) {\n      if (timeRangesInMinutes[i].start < timeRangesInMinutes[i - 1].end) {\n        // Add both overlapping time range indices if they are not already included\n        if (!overlaps.includes(timeRangesInMinutes[i].originalIndex)) {\n          overlaps.push(timeRangesInMinutes[i].originalIndex);\n        }\n        if (!overlaps.includes(timeRangesInMinutes[i - 1].originalIndex)) {\n          overlaps.push(timeRangesInMinutes[i - 1].originalIndex);\n        }\n      }\n    }\n    return overlaps.sort((a, b) => a - b); // Return sorted list of indices\n  }\n\n  addTimeRange(day) {\n    const currentTimeRanges = this.schedule[day];\n\n    // Default working hours are from 00:00 to 23:45 for calculation purposes\n    const dayStart = 0; // Start of the day in minutes (00:00)\n    const dayEnd = 1425; // End of the day in minutes (23:45)\n\n    if (currentTimeRanges.length === 0) {\n      // If there are no existing time ranges, add one at the start of the day\n      this.schedule[day] = [{ start: '09:00am', end: '05:00pm' }]; // Example range\n    } else {\n      // Convert all time ranges to minutes for comparison\n      const timeRangesInMinutes = currentTimeRanges\n        .map(range => ({\n          start: timeToMinutes(range.start),\n          end: timeToMinutes(range.end),\n        }))\n        .sort((a, b) => a.start - b.start); // Sort by start time\n\n      // Attempt to add a new time range at the end of the day\n      const lastRangeEnd = timeRangesInMinutes[timeRangesInMinutes.length - 1].end;\n      if (lastRangeEnd + 60 <= dayEnd) {\n        // There's room at the end of the day\n        this.schedule[day].push({\n          start: convertTo12HourFormat(minutesToTime(lastRangeEnd)),\n          end: convertTo12HourFormat(minutesToTime(lastRangeEnd + 60)),\n        });\n      } else {\n        // No room at the end, look for gaps at the beginning of the day\n        let gapFound = false;\n        if (timeRangesInMinutes[0].start > dayStart + 60) {\n          // There's room for at least a 1-hour meeting at the beginning of the day\n          this.schedule[day].push({\n            start: convertTo12HourFormat(minutesToTime(dayStart)),\n            end: convertTo12HourFormat(minutesToTime(dayStart + 60)),\n          });\n          gapFound = true;\n        }\n\n        if (!gapFound) {\n          // Search for gaps between scheduled time ranges\n          for (let i = 0; i < timeRangesInMinutes.length - 1; i++) {\n            const currentEnd = timeRangesInMinutes[i].end;\n            const nextStart = timeRangesInMinutes[i + 1].start;\n\n            if (nextStart - currentEnd >= 60) {\n              // Found a gap\n              this.schedule[day].push({\n                start: convertTo12HourFormat(minutesToTime(currentEnd)),\n                end: convertTo12HourFormat(minutesToTime(currentEnd + 60)),\n              });\n              break; // Exit the loop after adding a time range\n            }\n          }\n        }\n      }\n    }\n\n    // Sort the updated schedule to maintain order\n    this.schedule[day].sort((a, b) => timeToMinutes(a.start) - timeToMinutes(b.start));\n\n    this.schedule = { ...this.schedule };\n  }\n\n  removeTimeRange(day, index) {\n    this.schedule[day].splice(index, 1);\n    this.schedule = { ...this.schedule };\n  }\n\n  setTime(key: string, _event: Event, value: string) {\n    const [dayIndex, timeType] = key.split('_');\n    const [day, index] = dayIndex.split(':');\n\n    if (timeType === 'start') {\n      this.schedule[day][index].start = value;\n    } else if (timeType === 'end') {\n      this.schedule[day][index].end = value;\n    }\n    this.internals.setValidity({ customError: false });\n    this.schedule = { ...this.schedule };\n  }\n\n  setFormError(key: string, _event: Event, _errorMessage: string) {\n    const [_, timeType] = key.split('_');\n    const element = this.host.shadowRoot?.getElementById(key);\n    if (element) {\n      this.internals.setValidity({ customError: true }, `Invalid ${timeType} time`, element as HTMLInputElement);\n    }\n  }\n\n  updateSchedule(openHours: OpenHours[]) {\n    const newSchedule = {\n      SUN: [],\n      MON: [],\n      TUE: [],\n      WED: [],\n      THU: [],\n      FRI: [],\n      SAT: [],\n    };\n    openHours.forEach(openHour => {\n      openHour.days.forEach(day => {\n        const dayKey = this.getDayKey(day);\n        const start12hr = convertTo12HourFormat(openHour.start);\n        const end12hr = convertTo12HourFormat(openHour.end);\n        const timeRange = { start: start12hr, end: end12hr };\n\n        // Check if the time range already exists for the day\n        let timeRangeExists = false;\n        if (newSchedule[dayKey]) {\n          // Search for an existing time range that matches the current one\n          timeRangeExists = newSchedule[dayKey].some(range => range.start === timeRange.start && range.end === timeRange.end);\n        }\n\n        if (!timeRangeExists) {\n          if (newSchedule[dayKey]) {\n            newSchedule[dayKey].push(timeRange);\n          } else {\n            newSchedule[dayKey] = [timeRange];\n          }\n        }\n      });\n    });\n    if (openHours.length === 0) {\n      this.timezone = openHours[0].timezone;\n    }\n    this.timezone = openHours[0].timezone;\n    this.schedule = newSchedule;\n  }\n\n  getDayKey(dayIndex: number): string {\n    const days = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];\n    return days[dayIndex];\n  }\n\n  scheduleToOpenHours(schedule: Schedule, timezone: string = 'UTC'): OpenHours[] {\n    const dayKeys = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];\n    let openHoursMap: Map<string, { days: number[]; start: string; end: string }> = new Map();\n\n    dayKeys.forEach((dayKey, index) => {\n      if (schedule[dayKey]) {\n        // Check if schedule for the day exists\n        schedule[dayKey].forEach(timeRange => {\n          const start24hr = convertTo24HourFormat(timeRange.start);\n          const end24hr = convertTo24HourFormat(timeRange.end);\n          const key = `${start24hr}-${end24hr}`;\n\n          if (!openHoursMap.has(key)) {\n            openHoursMap.set(key, { days: [index], start: start24hr, end: end24hr });\n          } else {\n            let entry = openHoursMap.get(key);\n            if (entry) {\n              entry.days.push(index);\n              openHoursMap.set(key, entry);\n            }\n          }\n        });\n      }\n    });\n\n    let selectedOpenHours: OpenHours[] = [];\n    openHoursMap.forEach((value, _key) => {\n      selectedOpenHours.push({\n        days: value.days,\n        start: value.start,\n        end: value.end,\n        timezone: timezone,\n      });\n    });\n\n    return selectedOpenHours;\n  }\n\n  @RegisterComponent<NylasAvailabilityPicker, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-availability-picker',\n    fireRegisterEvent: true,\n  })\n  render() {\n    const timezoneOptions = Object.keys(TIMEZONE_MAP).map(key => ({\n      label: TIMEZONE_MAP[key],\n      value: key,\n    }));\n\n    return (\n      <Host>\n        <div class=\"nylas-availability-picker\">\n          <div class=\"header\" part=\"ncp__header\">\n            <h3>General availability</h3>\n            <p>Set your availability for scheduling meetings.</p>\n          </div>\n          <div class=\"content\">\n            <div class=\"select-timezone\">\n              <h4 class=\"sub-header\">\n                Select timezone\n                <span class=\"icon\">\n                  <tooltip-component>\n                    <info-icon slot=\"tooltip-icon\" />\n                    <span slot=\"tooltip-content\">Select your timezone for displaying availability.</span>\n                  </tooltip-component>\n                </span>\n              </h4>\n              <select-dropdown name=\"timezone\" options={timezoneOptions} defaultSelectedOption={timezoneOptions.find(i => i.value === this.defaultTimezone)}>\n                <span slot=\"select-icon\">\n                  <globe-icon width=\"20\" height=\"20\" />\n                </span>\n              </select-dropdown>\n            </div>\n            <div class=\"availability\">\n              {Object.keys(this.schedule).map(key => {\n                const day = key;\n                const timeRanges = this.schedule[key] as { start: string; end: string }[];\n                return (\n                  <div class=\"availability-day\">\n                    <div class=\"day\" part=\"ndp__day\">\n                      <input\n                        type=\"checkbox\"\n                        name={day}\n                        id={day}\n                        checked={timeRanges.length > 0}\n                        onClick={() => {\n                          if (timeRanges.length > 0) {\n                            this.schedule[day] = [];\n                          } else {\n                            this.schedule[day] = [{ start: '09:00am', end: '05:00pm' }];\n                          }\n                          this.schedule = { ...this.schedule };\n                        }}\n                      />\n                      <label htmlFor={day} aria-label=\"Select day\">\n                        {day}\n                      </label>\n                    </div>\n                    <div class=\"time-ranges\">\n                      {timeRanges.length ? null : <span class=\"unavailable\">Unavailable</span>}\n                      {timeRanges.length > 0 &&\n                        timeRanges.map((timeRange, timeRangeIndex) => {\n                          const startKey = `${key}:${timeRangeIndex}_start`;\n                          const endKey = `${key}:${timeRangeIndex}_end`;\n                          return (\n                            <div class=\"time-range\">\n                              <div class=\"pickers\">\n                                <nylas-time-window-picker\n                                  id={startKey}\n                                  hasError={this.overlapDays[day]?.includes(timeRangeIndex)}\n                                  time={timeRange.start}\n                                  name={startKey}\n                                  key={startKey}\n                                  setTime={(event, additionalData) => this.setTime(startKey, event, additionalData)}\n                                  setFormError={(event, additionalData) => this.setFormError(startKey, event, additionalData)}\n                                />\n                                <span> - </span>\n                                <nylas-time-window-picker\n                                  id={endKey}\n                                  hasError={this.overlapDays[day]?.includes(timeRangeIndex)}\n                                  time={timeRange.end}\n                                  name={endKey}\n                                  key={endKey}\n                                  minimumStartTime={timeRange.start}\n                                  setTime={(event, additionalData) => this.setTime(endKey, event, additionalData)}\n                                  setFormError={(event, additionalData) => this.setFormError(endKey, event, additionalData)}\n                                />\n                              </div>\n                              <button onClick={() => this.removeTimeRange(day, timeRangeIndex)}>\n                                <close-icon />\n                              </button>\n                            </div>\n                          );\n                        })}\n                      <p class=\"error\">{this.overlapDays[day] ? 'Overlapping time ranges' : ''}</p>\n                    </div>\n                    <div>\n                      {timeRanges.length > 0 ? (\n                        <button onClick={() => this.addTimeRange(day)}>\n                          <add-circle-icon />\n                        </button>\n                      ) : null}\n                    </div>\n                  </div>\n                );\n              })}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nylas-availability-picker2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-availability-picker/nylas-availability-picker.scss?tag=nylas-availability-picker&encapsulation=shadow","src/components/scheduler-editor/nylas-availability-picker/nylas-availability-picker.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-availability-picker {\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: 16px;\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  .content {\n    padding: 1rem;\n    color: var(--nylas-base-900);\n    font-size: 16px;\n    font-family: var(--nylas-font-family);\n    @media #{$small-mobile} {\n      font-size: 15px;\n    }\n    .select-timezone {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      border-bottom: 1px solid var(--nylas-base-200);\n      padding-bottom: 1rem;\n      gap: 1rem;\n      h4 {\n        display: flex;\n        gap: 0.5rem;\n        align-items: center;\n        margin: 0;\n        font-size: 16px;\n        @media #{$small-mobile} {\n          font-size: 15px;\n        }\n        font-weight: 500;\n        line-height: 20px;\n      }\n      select-dropdown {\n        border: 1px solid var(--nylas-base-200);\n        border-radius: var(--nylas-border-radius-2x);\n      }\n    }\n    .availability {\n      display: flex;\n      flex-direction: column;\n      gap: 1rem;\n      padding: 0 0.5rem;\n      @media #{$small-mobile} {\n        gap: 0.5rem;\n        padding: 0;\n      }\n      margin: 1rem 0;\n      .availability-day {\n        display: grid;\n        grid-template-columns: minmax(auto, 65px) 1fr minmax(auto, 40px);\n        @media #{$mobile} {\n          grid-template-columns: 78px 1fr auto;\n        }\n        @media #{$small-mobile} {\n          display: inline-grid;\n          gap: 8px;\n          grid-template-columns: 60px 1fr auto;\n        }\n        gap: 1rem;\n        align-items: baseline;\n        .day {\n          display: flex;\n          gap: 0.5rem;\n          @media #{$small-mobile} {\n            gap: 0.25rem;\n          }\n          align-items: center;\n\n          input[type='checkbox'] {\n            transform: scale(1.3);\n          }\n        }\n        .time-ranges {\n          span.unavailable {\n            height: 48px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n          }\n          .time-range {\n            display: flex;\n            gap: 1.5rem;\n            justify-content: space-between;\n            align-items: baseline;\n            @media #{$small-mobile} {\n              justify-content: unset;\n              gap: 0.5rem;\n            }\n            .pickers {\n              display: flex;\n              gap: 1rem;\n              @media #{$small-mobile} {\n                gap: 0.5rem;\n              }\n              span {\n                margin-top: 0.75rem;\n              }\n            }\n            &:not(:last-of-type) {\n              margin-bottom: 1rem;\n            }\n          }\n          p.error {\n            color: var(--nylas-error);\n          }\n        }\n        button {\n          border: none;\n          background: transparent;\n          height: 40px;\n          cursor: pointer;\n          color: var(--nylas-base-800);\n          &:hover,\n          &:active {\n            color: var(--nylas-primary);\n          }\n        }\n      }\n    }\n  }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { convertTo12HourFormat, convertTo24HourFormat, debug, minutesToTime, timeToMinutes } 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 { TIMEZONE_MAP } from '@/common/constants';\n\ntype OpenHours = {\n  days: number[];\n  start: string;\n  end: string;\n  timezone: string;\n};\n\ntype Schedule = {\n  SUN: { start: string; end: string }[];\n  MON: { start: string; end: string }[];\n  TUE: { start: string; end: string }[];\n  WED: { start: string; end: string }[];\n  THU: { start: string; end: string }[];\n  FRI: { start: string; end: string }[];\n  SAT: { start: string; end: string }[];\n};\n\n/**\n * The `nylas-availability-picker` component is a form input for selecting availability (open hours).\n * @part nap__header - The header of the availability picker\n * @part nap__select-timezone - The timezone selection container\n * @part nap__select-timezone-button - The timezone selection button\n * @part nap__select-timezone-dropdown-content - The timezone selection dropdown content\n * @part nap__availability - The availability container\n * @part nap__day - The day container\n * @part nap__time-ranges - The time ranges container\n * @part nap__time-range - The time range container\n * @part nap__add-time-range - The add time range button\n * @part nap__time-picker-container - The time picker container\n * @part nap__time-picker-input - The time picker input\n * @part nap__time-picker-times - The time picker times\n */\n@Component({\n  tag: 'nylas-availability-picker',\n  styleUrl: 'nylas-availability-picker.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasAvailabilityPicker {\n  @Element() host!: HTMLNylasAvailabilityPickerElement;\n  @Prop() openHours?: OpenHours[];\n  @Prop() name: string = 'availability';\n  @Prop() defaultTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n  /**\n   * This event is fired when the selected availability / open hours change.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: OpenHours[];\n    name: string;\n  }>;\n\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n  @State() schedule = {\n    SUN: [],\n    MON: [{ start: '09:00am', end: '05:00pm' }],\n    TUE: [{ start: '09:00am', end: '05:00pm' }],\n    WED: [{ start: '09:00am', end: '05:00pm' }],\n    THU: [{ start: '09:00am', end: '05:00pm' }],\n    FRI: [{ start: '09:00am', end: '05:00pm' }],\n    SAT: [],\n  };\n  @State() timezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n  @State() overlapDays: { [key: string]: number[] } = {};\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-calendar-picker', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('schedule')\n  scheduleChanged(newValue: Schedule, oldValue: Schedule) {\n    if (newValue !== oldValue) {\n      this.valueChanged.emit({\n        value: this.scheduleToOpenHours(newValue, this.timezone),\n        name: this.name,\n      });\n      let overlapDays: { [key: string]: number[] } = {};\n      Object.keys(newValue).forEach(key => {\n        const dayTimeRanges = newValue[key];\n        if (dayTimeRanges.length > 0) {\n          const overlaps = this.getOverlaps(dayTimeRanges);\n          if (overlaps.length > 0) {\n            overlapDays[key] = overlaps;\n          }\n        }\n      });\n      this.overlapDays = overlapDays;\n      if (typeof this.internals.setFormValue !== 'function') {\n        return;\n      }\n      if (Object.keys(overlapDays).length > 0) {\n        const element = this.host.shadowRoot?.getElementById(Object.keys(overlapDays)[0]) as HTMLInputElement;\n        if (element) {\n          this.internals.setValidity({ customError: true }, 'Overlapping time ranges found', element);\n        }\n      } else {\n        this.internals.setValidity({ customError: false });\n        this.internals.setFormValue(JSON.stringify(this.scheduleToOpenHours(newValue, this.timezone)));\n      }\n    }\n  }\n\n  @Listen('selectedOptionChanged')\n  selectedOptionChangedHandler(\n    event: CustomEvent<{\n      value: string;\n      name: string;\n    }>,\n  ) {\n    const { name, value } = event.detail;\n    if (name === 'timezone') {\n      this.timezone = value;\n      if (typeof this.internals.setFormValue !== 'function') {\n        return;\n      }\n      this.internals.setFormValue(JSON.stringify(this.scheduleToOpenHours(this.schedule, this.timezone)));\n    }\n  }\n\n  connectedCallback() {\n    debug('nylas-availability-picker', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-availability-picker', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-availability-picker', 'componentWillLoad');\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-availability-picker', 'componentDidLoad');\n    if (this.openHours && this.openHours.length > 0) {\n      this.updateSchedule(this.openHours);\n    }\n    if (typeof this.internals.setFormValue !== 'function') {\n      return;\n    }\n    this.internals.setFormValue(JSON.stringify(this.scheduleToOpenHours(this.schedule, this.timezone)));\n  }\n\n  getOverlaps(timeRanges) {\n    // Convert times to minutes and add to the array\n    let timeRangesInMinutes = timeRanges.map((range, index) => ({\n      start: timeToMinutes(range.start),\n      end: timeToMinutes(range.end),\n      originalIndex: index,\n    }));\n\n    // Sort by start time\n    timeRangesInMinutes.sort((a, b) => a.start - b.start);\n    let overlaps: number[] = [];\n    // Check for overlap\n    for (let i = 1; i < timeRangesInMinutes.length; i++) {\n      if (timeRangesInMinutes[i].start < timeRangesInMinutes[i - 1].end) {\n        // Add both overlapping time range indices if they are not already included\n        if (!overlaps.includes(timeRangesInMinutes[i].originalIndex)) {\n          overlaps.push(timeRangesInMinutes[i].originalIndex);\n        }\n        if (!overlaps.includes(timeRangesInMinutes[i - 1].originalIndex)) {\n          overlaps.push(timeRangesInMinutes[i - 1].originalIndex);\n        }\n      }\n    }\n    return overlaps.sort((a, b) => a - b); // Return sorted list of indices\n  }\n\n  addTimeRange(day) {\n    const currentTimeRanges = this.schedule[day];\n\n    // Default working hours are from 00:00 to 23:45 for calculation purposes\n    const dayStart = 0; // Start of the day in minutes (00:00)\n    const dayEnd = 1425; // End of the day in minutes (23:45)\n\n    if (currentTimeRanges.length === 0) {\n      // If there are no existing time ranges, add one at the start of the day\n      this.schedule[day] = [{ start: '09:00am', end: '05:00pm' }]; // Example range\n    } else {\n      // Convert all time ranges to minutes for comparison\n      const timeRangesInMinutes = currentTimeRanges\n        .map(range => ({\n          start: timeToMinutes(range.start),\n          end: timeToMinutes(range.end),\n        }))\n        .sort((a, b) => a.start - b.start); // Sort by start time\n\n      // Attempt to add a new time range at the end of the day\n      const lastRangeEnd = timeRangesInMinutes[timeRangesInMinutes.length - 1].end;\n      if (lastRangeEnd + 60 <= dayEnd) {\n        // There's room at the end of the day\n        this.schedule[day].push({\n          start: convertTo12HourFormat(minutesToTime(lastRangeEnd)),\n          end: convertTo12HourFormat(minutesToTime(lastRangeEnd + 60)),\n        });\n      } else {\n        // No room at the end, look for gaps at the beginning of the day\n        let gapFound = false;\n        if (timeRangesInMinutes[0].start > dayStart + 60) {\n          // There's room for at least a 1-hour meeting at the beginning of the day\n          this.schedule[day].push({\n            start: convertTo12HourFormat(minutesToTime(dayStart)),\n            end: convertTo12HourFormat(minutesToTime(dayStart + 60)),\n          });\n          gapFound = true;\n        }\n\n        if (!gapFound) {\n          // Search for gaps between scheduled time ranges\n          for (let i = 0; i < timeRangesInMinutes.length - 1; i++) {\n            const currentEnd = timeRangesInMinutes[i].end;\n            const nextStart = timeRangesInMinutes[i + 1].start;\n\n            if (nextStart - currentEnd >= 60) {\n              // Found a gap\n              this.schedule[day].push({\n                start: convertTo12HourFormat(minutesToTime(currentEnd)),\n                end: convertTo12HourFormat(minutesToTime(currentEnd + 60)),\n              });\n              break; // Exit the loop after adding a time range\n            }\n          }\n        }\n      }\n    }\n\n    // Sort the updated schedule to maintain order\n    this.schedule[day].sort((a, b) => timeToMinutes(a.start) - timeToMinutes(b.start));\n\n    this.schedule = { ...this.schedule };\n  }\n\n  removeTimeRange(day, index) {\n    this.schedule[day].splice(index, 1);\n    this.schedule = { ...this.schedule };\n  }\n\n  setTime(key: string, _event: Event, value: string) {\n    const [dayIndex, timeType] = key.split('_');\n    const [day, index] = dayIndex.split(':');\n\n    if (timeType === 'start') {\n      this.schedule[day][index].start = value;\n    } else if (timeType === 'end') {\n      this.schedule[day][index].end = value;\n    }\n    this.internals.setValidity({ customError: false });\n    this.schedule = { ...this.schedule };\n  }\n\n  setFormError(key: string, _event: Event, _errorMessage: string) {\n    const [_, timeType] = key.split('_');\n    const element = this.host.shadowRoot?.getElementById(key);\n    if (element) {\n      this.internals.setValidity({ customError: true }, `Invalid ${timeType} time`, element as HTMLInputElement);\n    }\n  }\n\n  updateSchedule(openHours: OpenHours[]) {\n    const newSchedule = {\n      SUN: [],\n      MON: [],\n      TUE: [],\n      WED: [],\n      THU: [],\n      FRI: [],\n      SAT: [],\n    };\n    openHours.forEach(openHour => {\n      openHour.days.forEach(day => {\n        const dayKey = this.getDayKey(day);\n        const start12hr = convertTo12HourFormat(openHour.start);\n        const end12hr = convertTo12HourFormat(openHour.end);\n        const timeRange = { start: start12hr, end: end12hr };\n\n        // Check if the time range already exists for the day\n        let timeRangeExists = false;\n        if (newSchedule[dayKey]) {\n          // Search for an existing time range that matches the current one\n          timeRangeExists = newSchedule[dayKey].some(range => range.start === timeRange.start && range.end === timeRange.end);\n        }\n\n        if (!timeRangeExists) {\n          if (newSchedule[dayKey]) {\n            newSchedule[dayKey].push(timeRange);\n          } else {\n            newSchedule[dayKey] = [timeRange];\n          }\n        }\n      });\n    });\n    if (openHours.length === 0) {\n      this.timezone = openHours[0].timezone;\n    }\n    this.timezone = openHours[0].timezone;\n    this.schedule = newSchedule;\n  }\n\n  getDayKey(dayIndex: number): string {\n    const days = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];\n    return days[dayIndex];\n  }\n\n  scheduleToOpenHours(schedule: Schedule, timezone: string = 'UTC'): OpenHours[] {\n    const dayKeys = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];\n    let openHoursMap: Map<string, { days: number[]; start: string; end: string }> = new Map();\n\n    dayKeys.forEach((dayKey, index) => {\n      if (schedule[dayKey]) {\n        // Check if schedule for the day exists\n        schedule[dayKey].forEach(timeRange => {\n          const start24hr = convertTo24HourFormat(timeRange.start);\n          const end24hr = convertTo24HourFormat(timeRange.end);\n          const key = `${start24hr}-${end24hr}`;\n\n          if (!openHoursMap.has(key)) {\n            openHoursMap.set(key, { days: [index], start: start24hr, end: end24hr });\n          } else {\n            let entry = openHoursMap.get(key);\n            if (entry) {\n              entry.days.push(index);\n              openHoursMap.set(key, entry);\n            }\n          }\n        });\n      }\n    });\n\n    let selectedOpenHours: OpenHours[] = [];\n    openHoursMap.forEach((value, _key) => {\n      selectedOpenHours.push({\n        days: value.days,\n        start: value.start,\n        end: value.end,\n        timezone: timezone,\n      });\n    });\n\n    return selectedOpenHours;\n  }\n\n  @RegisterComponent<NylasAvailabilityPicker, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-availability-picker',\n    fireRegisterEvent: true,\n  })\n  render() {\n    const timezoneOptions = Object.keys(TIMEZONE_MAP).map(key => ({\n      label: TIMEZONE_MAP[key],\n      value: key,\n    }));\n\n    return (\n      <Host>\n        <div class=\"nylas-availability-picker\">\n          <div class=\"header\" part=\"nap__header\">\n            <h3>General availability</h3>\n            <p>Set your availability for scheduling meetings.</p>\n          </div>\n          <div class=\"content\">\n            <div class=\"select-timezone\" part=\"nap__select-timezone\">\n              <h4 class=\"sub-header\">\n                Select timezone\n                <span class=\"icon\">\n                  <tooltip-component>\n                    <info-icon slot=\"tooltip-icon\" />\n                    <span slot=\"tooltip-content\">Select your timezone for displaying availability.</span>\n                  </tooltip-component>\n                </span>\n              </h4>\n              <select-dropdown\n                name=\"timezone\"\n                exportparts=\"sd_dropdown: nap__timezone-container, sd_dropdown-button: nap__timezone-button, sd_dropdown-content: nap__timezone-dropdown-content\"\n                options={timezoneOptions}\n                defaultSelectedOption={timezoneOptions.find(i => i.value === this.defaultTimezone)}\n              >\n                <span slot=\"select-icon\">\n                  <globe-icon width=\"20\" height=\"20\" />\n                </span>\n              </select-dropdown>\n            </div>\n            <div class=\"availability\" part=\"nap__availability\">\n              {Object.keys(this.schedule).map(key => {\n                const day = key;\n                const timeRanges = this.schedule[key] as { start: string; end: string }[];\n                return (\n                  <div class=\"availability-day\">\n                    <div class=\"day\" part=\"nap__day\">\n                      <input\n                        type=\"checkbox\"\n                        name={day}\n                        id={day}\n                        checked={timeRanges.length > 0}\n                        onClick={() => {\n                          if (timeRanges.length > 0) {\n                            this.schedule[day] = [];\n                          } else {\n                            this.schedule[day] = [{ start: '09:00am', end: '05:00pm' }];\n                          }\n                          this.schedule = { ...this.schedule };\n                        }}\n                      />\n                      <label htmlFor={day} aria-label=\"Select day\">\n                        {day}\n                      </label>\n                    </div>\n                    <div class=\"time-ranges\" part=\"nap__time-ranges\">\n                      {timeRanges.length ? null : <span class=\"unavailable\">Unavailable</span>}\n                      {timeRanges.length > 0 &&\n                        timeRanges.map((timeRange, timeRangeIndex) => {\n                          const startKey = `${key}:${timeRangeIndex}_start`;\n                          const endKey = `${key}:${timeRangeIndex}_end`;\n                          return (\n                            <div class=\"time-range\" part=\"nap__time-range\">\n                              <div class=\"pickers\">\n                                <nylas-time-window-picker\n                                  id={startKey}\n                                  hasError={this.overlapDays[day]?.includes(timeRangeIndex)}\n                                  time={timeRange.start}\n                                  name={startKey}\n                                  key={startKey}\n                                  exportparts=\"time-picker: nap__time-picker-container, time-input: nap__time-picker-input, times: nap__time-picker-times\"\n                                  setTime={(event, additionalData) => this.setTime(startKey, event, additionalData)}\n                                  setFormError={(event, additionalData) => this.setFormError(startKey, event, additionalData)}\n                                />\n                                <span> - </span>\n                                <nylas-time-window-picker\n                                  id={endKey}\n                                  hasError={this.overlapDays[day]?.includes(timeRangeIndex)}\n                                  time={timeRange.end}\n                                  name={endKey}\n                                  key={endKey}\n                                  minimumStartTime={timeRange.start}\n                                  exportparts=\"time-picker: nap__time-picker-container, time-input: nap__time-picker-input, times: nap__time-picker-times\"\n                                  setTime={(event, additionalData) => this.setTime(endKey, event, additionalData)}\n                                  setFormError={(event, additionalData) => this.setFormError(endKey, event, additionalData)}\n                                />\n                              </div>\n                              <button onClick={() => this.removeTimeRange(day, timeRangeIndex)}>\n                                <close-icon />\n                              </button>\n                            </div>\n                          );\n                        })}\n                      <p class=\"error\">{this.overlapDays[day] ? 'Overlapping time ranges' : ''}</p>\n                    </div>\n                    <div>\n                      {timeRanges.length > 0 ? (\n                        <button onClick={() => this.addTimeRange(day)} part=\"nap__add-time-range\">\n                          <add-circle-icon />\n                        </button>\n                      ) : null}\n                    </div>\n                  </div>\n                );\n              })}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -6,7 +6,7 @@ import { d as defineCustomElement$3 } from './calendar-check.js';
 import { d as defineCustomElement$2 } from './checkmark-circle.js';
 import { d as defineCustomElement$1 } from './globe.js';
 
-const nylasBookedEventCardCss = ":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}sp-theme{height:inherit;display:flex;flex-direction:column;justify-content:space-between;align-items:center;font-family:var(--nylas-font-family)}.event-card-wrapper{display:flex;align-items:center;flex-direction:column;background-color:var(--nylas-base-0);color:var(--nylas-base-900);border-radius:var(--nylas-border-radius-3x);position:relative;margin-top:1rem;margin-bottom:2rem;width:424px;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){.event-card-wrapper{width:100%;border-radius:0px}}.calendar-icon{display:flex;align-items:center;justify-content:center;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);color:var(--nylas-base-700)}.booked-event-header{margin:1.5rem 0;display:flex;align-items:center;flex-direction:column;font-size:1rem;font-weight:400}.booked-event-header h2{color:var(--nylas-base-600);margin-top:1.5rem;margin-bottom:0.5rem;font-size:1.125rem;font-weight:600}.booking-date-time,.booking-participants{padding:0 1rem;margin-top:1.5rem;margin-left:3rem;display:flex;flex-direction:column;justify-content:space-between;align-self:flex-start;position:relative}.booking-date-time svg,.booking-participants svg{color:var(--nylas-base-700);position:absolute;left:-10px}.booking-date-time .block,.booking-participants .block{display:block}.booking-date-time h3,.booking-participants h3{color:var(--nylas-base-600);margin:0;font-size:1rem;font-weight:600;line-height:1.25rem;text-align:justify;margin-bottom:8px}.booking-date-time p,.booking-participants p{font-size:0.875rem;margin:0;font-weight:400;text-align:justify;color:var(--nylas-base-800)}.booking-participants{margin-bottom:1.5rem}.booked-event-timezone{display:flex;color:var(--nylas-base-600);margin-bottom:1.5rem;gap:4px;margin:2rem;align-items:center;align-self:flex-end}.footer{padding:0.5rem;display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;box-sizing:border-box;background-color:var(--nylas-base-25);width:100%;border-radius:0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x)}sp-button{background-color:var(--nylas-base-0);color:var(--nylas-base-700);border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x);font-size:16px;padding:8px;font-family:var(--nylas-font-family);height:48px;line-height:24px}sp-button.cancel{color:var(--nylas-error)}sp-button.cancel:hover,sp-button.cancel:focus{border-color:var(--nylas-error)}sp-button.cancel:active{color:var(--nylas-error-pressed);border-color:var(--nylas-error-pressed)}sp-button.reschedule:hover,sp-button.reschedule:focus{border-color:var(--nylas-primary)}sp-button.reschedule:active{border-color:var(--nylas-base-600)}sp-divider{background-color:var(--nylas-base-200);height:1px}calendar-check-icon{display:flex;align-items:center;justify-content:center;height:100%}";
+const nylasBookedEventCardCss = ":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}sp-theme{height:inherit;display:flex;flex-direction:column;justify-content:space-between;align-items:center;font-family:var(--nylas-font-family)}.event-card-wrapper{display:flex;align-items:center;flex-direction:column;background-color:var(--nylas-base-0);color:var(--nylas-base-900);border-radius:var(--nylas-border-radius-3x);position:relative;margin-top:1rem;margin-bottom:2rem;width:424px;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){.event-card-wrapper{width:100%;border-radius:0px}}.calendar-icon{display:flex;align-items:center;justify-content:center;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);color:var(--nylas-base-700)}.booked-event-header{margin:1.5rem 0;display:flex;align-items:center;flex-direction:column;font-size:1rem;font-weight:400}.booked-event-header h2{color:var(--nylas-base-600);margin-top:1.5rem;margin-bottom:0.25rem;font-size:1.125rem;font-weight:600}.booking-date-time,.booking-participants{padding:0 1rem;margin-top:1.5rem;margin-left:3rem;display:flex;flex-direction:column;justify-content:space-between;align-self:flex-start;position:relative}.booking-date-time svg,.booking-participants svg{color:var(--nylas-base-700);position:absolute;left:-10px}.booking-date-time .block,.booking-participants .block{display:block}.booking-date-time h3,.booking-participants h3{color:var(--nylas-base-600);margin:0;font-size:1rem;font-weight:600;line-height:1.25rem;text-align:justify;margin-bottom:4px}.booking-date-time p,.booking-participants p{font-size:16px;margin:0;font-weight:400;text-align:justify;color:var(--nylas-base-800)}.booking-participants{margin-bottom:1.5rem}.booked-event-timezone{display:flex;color:var(--nylas-base-600);margin-bottom:1.5rem;gap:4px;margin:2rem;align-items:center;align-self:flex-end}.footer{padding:0.5rem;display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;box-sizing:border-box;background-color:var(--nylas-base-25);width:100%;border-radius:0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x)}sp-button{background-color:var(--nylas-base-0);color:var(--nylas-base-700);border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x);font-size:16px;padding:8px;font-family:var(--nylas-font-family);font-weight:600;height:48px;line-height:24px}sp-button.cancel{color:var(--nylas-error)}sp-button.cancel:hover,sp-button.cancel:focus{border-color:var(--nylas-error)}sp-button.cancel:active{color:var(--nylas-error-pressed);border-color:var(--nylas-error-pressed)}sp-button.reschedule:hover,sp-button.reschedule:focus{border-color:var(--nylas-primary)}sp-button.reschedule:active{border-color:var(--nylas-base-600)}sp-divider{background-color:var(--nylas-base-200);height:1px}calendar-check-icon{display:flex;align-items:center;justify-content:center;height:100%}";
 
 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;

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

@@ -1 +1 @@
-{"file":"nylas-booked-event-card2.js","mappings":"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","names":[],"sources":["src/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.scss?tag=nylas-booked-event-card&encapsulation=shadow","src/components/scheduler/nylas-booked-event-card/nylas-booked-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.event-card-wrapper {\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  background-color: var(--nylas-base-0);\n  color: var(--nylas-base-900);\n  border-radius: var(--nylas-border-radius-3x);\n  position: relative;\n  margin-top: 1rem;\n  margin-bottom: 2rem;\n  width: 424px;\n  @media #{$mobile} {\n    width: 100%;\n    border-radius: 0px;\n  }\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.calendar-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\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  color: var(--nylas-base-700);\n}\n\n.booked-event-header {\n  margin: 1.5rem 0;\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  font-size: 1rem;\n  font-weight: 400;\n\n  h2 {\n    color: var(--nylas-base-600);\n    margin-top: 1.5rem;\n    margin-bottom: 0.5rem;\n    font-size: 1.125rem;\n    font-weight: 600;\n  }\n}\n\n.booking-date-time,\n.booking-participants {\n  padding: 0 1rem;\n  margin-top: 1.5rem;\n  margin-left: 3rem;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-self: flex-start;\n  position: relative;\n\n  svg {\n    color: var(--nylas-base-700);\n    position: absolute;\n    left: -10px;\n  }\n\n  .block {\n    display: block;\n  }\n\n  h3 {\n    color: var(--nylas-base-600);\n    margin: 0;\n    font-size: 1rem;\n    font-weight: 600;\n    line-height: 1.25rem;\n    text-align: justify;\n    margin-bottom: 8px;\n  }\n  p {\n    font-size: 0.875rem;\n    margin: 0;\n    font-weight: 400;\n    text-align: justify;\n    color: var(--nylas-base-800);\n  }\n}\n\n.booking-participants {\n  margin-bottom: 1.5rem;\n}\n\n.booked-event-timezone {\n  display: flex;\n  color: var(--nylas-base-600);\n  margin-bottom: 1.5rem;\n  gap: 4px;\n  margin: 2rem;\n  align-items: center;\n  align-self: flex-end;\n}\n\n.footer {\n  padding: 0.5rem;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 0.5rem;\n  box-sizing: border-box;\n  background-color: var(--nylas-base-25);\n  width: 100%;\n  border-radius: 0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x);\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  padding: 8px;\n  font-family: var(--nylas-font-family);\n  height: 48px;\n  line-height: 24px;\n  &.cancel {\n    color: var(--nylas-error);\n    &:hover,\n    &:focus {\n      border-color: var(--nylas-error);\n    }\n    &:active {\n      color: var(--nylas-error-pressed);\n      border-color: var(--nylas-error-pressed);\n    }\n  }\n  &.reschedule {\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-divider {\n  background-color: var(--nylas-base-200);\n  height: 1px;\n}\n\ncalendar-check-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { Component, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { NylasSchedulerBookingData, NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduler/nylas-scheduling';\nimport { debug } from '@/utils/utils';\nimport { TIMEZONE_MAP } from '@/common/constants';\nimport { NylasEvent } from '@/common/types';\nimport { Event } from '@stencil/core';\nimport { NylasSchedulerErrorResponse, Timeslot } from '@nylas/core';\n\n/**\n * The `nylas-booked-event-card` component is a UI component that displays the booked event card.\n *\n * @part nbec - The booked event card host.\n * @part nbec__card - The booked event card.\n * @part nbec__title - The title of the booked event card.\n * @part nbec__description - The description of the booked event card.\n * @part nbec__button-outline - The cancel & reschedule button CTA.\n * @part nbec__cancel-cta - The cancel button CTA.\n * @part nbec__reschedule-cta - The reschedule button CTA.\n */\n@Component({\n  tag: 'nylas-booked-event-card',\n  styleUrl: 'nylas-booked-event-card.scss',\n  shadow: true,\n})\nexport class NylasBookedEventCard {\n  /**\n   * The booked event.\n   */\n  @Prop() readonly eventInfo!: NylasEvent;\n\n  /**\n   * Booking flow type.\n   */\n  @Prop() readonly rescheduleBookingId?: string;\n\n  /**\n   * The booking info used to book / reschedule the event.\n   */\n  @Prop() readonly bookingInfo?: NylasSchedulerBookingData;\n\n  /**\n   * The selected timezone.\n   */\n  @Prop() readonly selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n  /**\n   * The selected timeslot.\n   */\n  @Prop() readonly selectedTimeslot!: Timeslot;\n\n  /**\n   * Cancel booking button clicked event.\n   */\n  @Event() readonly cancelBookingButtonClicked!: EventEmitter<{ bookingId: string }>;\n\n  /**\n   * Reschedule button clicked event.\n   * */\n  @Event() readonly rescheduleButtonClicked!: EventEmitter<{ bookingId: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>;\n\n  /**\n   * This event is fired when an error occurs while rescheduling the booking.\n   */\n  @Event() readonly rescheduleBookedEventError!: EventEmitter<NylasSchedulerErrorResponse>;\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  async componentWillLoad() {\n    debug(`[nylas-booked-event-card] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-booked-event-card] Component did load`);\n  }\n\n  private handleCancelBookingButtonClicked = () => {\n    this.cancelBookingButtonClicked.emit({ bookingId: this.eventInfo.booking_id });\n  };\n\n  private handleRescheduleButtonClicked = () => {\n    const errorHandler = (error: NylasSchedulerErrorResponse) => {\n      this.rescheduleBookedEventError.emit(error);\n    };\n    this.rescheduleButtonClicked.emit({ bookingId: this.eventInfo.booking_id, errorHandler });\n  };\n\n  private getOrganizer = (eventInfo: NylasEvent) => {\n    const organizer = eventInfo?.organizer;\n    return organizer;\n  };\n\n  getPaticipantType = (type: string) => {\n    switch (type) {\n      case 'host':\n        return 'Host';\n      case 'you':\n        return 'You';\n      default:\n        return '';\n    }\n  };\n\n  @RegisterComponent<NylasBookedEventCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-booked-event-card',\n    stateToProps: new Map([\n      ['scheduler.bookingInfo', 'bookingInfo'],\n      ['scheduler.rescheduleBookingId', 'rescheduleBookingId'],\n      ['scheduler.selectedTimezone', 'selectedTimezone'],\n      ['scheduler.selectedTimeslot', 'selectedTimeslot'],\n    ]),\n    eventToProps: {\n      cancelBookingButtonClicked: async (event: CustomEvent<{ bookingId: string }>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        nylasSchedulerConnector.scheduler.setCancel(event.detail.bookingId);\n      },\n      rescheduleButtonClicked: async (\n        event: CustomEvent<{ bookingId: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>,\n        nylasSchedulerConnector: NylasSchedulerConnector,\n      ) => {\n        const result = await nylasSchedulerConnector.scheduler.setReschedule(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=\"nbec\">\n        <sp-theme theme=\"spectrum\" color=\"dark\" scale=\"medium\">\n          <div class=\"booked-event-timezone\">\n            <globe-icon></globe-icon>\n            {TIMEZONE_MAP[this.selectedTimezone]}\n          </div>\n          <div class=\"event-card-wrapper\" part=\"nbec__card\">\n            <div class=\"calendar-icon\">\n              <calendar-check-icon />\n            </div>\n            <div class=\"booked-event-header\">\n              <h2 slot=\"card-title\" part=\"nbec__title\">\n                Booking {!!this.rescheduleBookingId ? 'rescheduled' : 'confirmed'}!\n              </h2>\n              <div part=\"nbec__description\">\n                {this.getOrganizer(this.eventInfo)?.name || this.getOrganizer(this.eventInfo)?.email}&nbsp;&amp;&nbsp;\n                {this.bookingInfo?.primaryParticipant?.name || this.bookingInfo?.primaryParticipant?.email}\n              </div>\n            </div>\n            <sp-divider></sp-divider>\n            <div class=\"booking-date-time\">\n              <checkmark-circle-icon></checkmark-circle-icon>\n              <h3>Booking date and time</h3>\n              <p>\n                {new Date(this.selectedTimeslot.start_time).toLocaleDateString(undefined, { dateStyle: 'full' })} <br />\n                {new Date(this.selectedTimeslot.start_time).toLocaleTimeString(undefined, { timeStyle: 'short' })} -{' '}\n                {new Date(this.selectedTimeslot.end_time).toLocaleTimeString(undefined, { timeStyle: 'short' })}\n              </p>\n            </div>\n            <div class=\"booking-participants\">\n              {/* <people-icon></people-icon>\n              <h3>All participants</h3>\n              {this.eventInfo?.participants && (\n                <p>\n                  {this.eventInfo?.participants?.map((participant: NylasEvent['participants'][0]) => {\n                    return (\n                      <span class=\"block\">\n                        {participant.email} {this.getPaticipantType(participant.type) && `(${this.getPaticipantType(participant.type)})`}\n                      </span>\n                    );\n                  })}\n                </p>\n              )} */}\n            </div>\n            <sp-divider></sp-divider>\n            <div class=\"footer\">\n              <sp-button variant=\"secondary\" treatment=\"outline\" class=\"cancel\" onClick={this.handleCancelBookingButtonClicked} part=\"nbec__button-outline nbec__cancel-cta\">\n                Cancel booking\n              </sp-button>\n              <sp-button variant=\"secondary\" treatment=\"outline\" class=\"reschedule\" onClick={this.handleRescheduleButtonClicked} part=\"nbec__button-outline nbec__reschedule-cta\">\n                Reschedule\n              </sp-button>\n            </div>\n          </div>\n        </sp-theme>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nylas-booked-event-card2.js","mappings":"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","names":[],"sources":["src/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.scss?tag=nylas-booked-event-card&encapsulation=shadow","src/components/scheduler/nylas-booked-event-card/nylas-booked-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.event-card-wrapper {\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  background-color: var(--nylas-base-0);\n  color: var(--nylas-base-900);\n  border-radius: var(--nylas-border-radius-3x);\n  position: relative;\n  margin-top: 1rem;\n  margin-bottom: 2rem;\n  width: 424px;\n  @media #{$mobile} {\n    width: 100%;\n    border-radius: 0px;\n  }\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.calendar-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\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  color: var(--nylas-base-700);\n}\n\n.booked-event-header {\n  margin: 1.5rem 0;\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  font-size: 1rem;\n  font-weight: 400;\n\n  h2 {\n    color: var(--nylas-base-600);\n    margin-top: 1.5rem;\n    margin-bottom: 0.25rem;\n    font-size: 1.125rem;\n    font-weight: 600;\n  }\n}\n\n.booking-date-time,\n.booking-participants {\n  padding: 0 1rem;\n  margin-top: 1.5rem;\n  margin-left: 3rem;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-self: flex-start;\n  position: relative;\n\n  svg {\n    color: var(--nylas-base-700);\n    position: absolute;\n    left: -10px;\n  }\n\n  .block {\n    display: block;\n  }\n\n  h3 {\n    color: var(--nylas-base-600);\n    margin: 0;\n    font-size: 1rem;\n    font-weight: 600;\n    line-height: 1.25rem;\n    text-align: justify;\n    margin-bottom: 4px;\n  }\n  p {\n    font-size: 16px;\n    margin: 0;\n    font-weight: 400;\n    text-align: justify;\n    color: var(--nylas-base-800);\n  }\n}\n\n.booking-participants {\n  margin-bottom: 1.5rem;\n}\n\n.booked-event-timezone {\n  display: flex;\n  color: var(--nylas-base-600);\n  margin-bottom: 1.5rem;\n  gap: 4px;\n  margin: 2rem;\n  align-items: center;\n  align-self: flex-end;\n}\n\n.footer {\n  padding: 0.5rem;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 0.5rem;\n  box-sizing: border-box;\n  background-color: var(--nylas-base-25);\n  width: 100%;\n  border-radius: 0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x);\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  padding: 8px;\n  font-family: var(--nylas-font-family);\n  font-weight: 600;\n  height: 48px;\n  line-height: 24px;\n  &.cancel {\n    color: var(--nylas-error);\n    &:hover,\n    &:focus {\n      border-color: var(--nylas-error);\n    }\n    &:active {\n      color: var(--nylas-error-pressed);\n      border-color: var(--nylas-error-pressed);\n    }\n  }\n  &.reschedule {\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-divider {\n  background-color: var(--nylas-base-200);\n  height: 1px;\n}\n\ncalendar-check-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { Component, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { NylasSchedulerBookingData, NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduler/nylas-scheduling';\nimport { debug } from '@/utils/utils';\nimport { TIMEZONE_MAP } from '@/common/constants';\nimport { NylasEvent } from '@/common/types';\nimport { Event } from '@stencil/core';\nimport { NylasSchedulerErrorResponse, Timeslot } from '@nylas/core';\n\n/**\n * The `nylas-booked-event-card` component is a UI component that displays the booked event card.\n *\n * @part nbec - The booked event card host.\n * @part nbec__card - The booked event card.\n * @part nbec__title - The title of the booked event card.\n * @part nbec__description - The description of the booked event card.\n * @part nbec__button-outline - The cancel & reschedule button CTA.\n * @part nbec__cancel-cta - The cancel button CTA.\n * @part nbec__reschedule-cta - The reschedule button CTA.\n */\n@Component({\n  tag: 'nylas-booked-event-card',\n  styleUrl: 'nylas-booked-event-card.scss',\n  shadow: true,\n})\nexport class NylasBookedEventCard {\n  /**\n   * The booked event.\n   */\n  @Prop() readonly eventInfo!: NylasEvent;\n\n  /**\n   * Booking flow type.\n   */\n  @Prop() readonly rescheduleBookingId?: string;\n\n  /**\n   * The booking info used to book / reschedule the event.\n   */\n  @Prop() readonly bookingInfo?: NylasSchedulerBookingData;\n\n  /**\n   * The selected timezone.\n   */\n  @Prop() readonly selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n  /**\n   * The selected timeslot.\n   */\n  @Prop() readonly selectedTimeslot!: Timeslot;\n\n  /**\n   * Cancel booking button clicked event.\n   */\n  @Event() readonly cancelBookingButtonClicked!: EventEmitter<{ bookingId: string }>;\n\n  /**\n   * Reschedule button clicked event.\n   * */\n  @Event() readonly rescheduleButtonClicked!: EventEmitter<{ bookingId: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>;\n\n  /**\n   * This event is fired when an error occurs while rescheduling the booking.\n   */\n  @Event() readonly rescheduleBookedEventError!: EventEmitter<NylasSchedulerErrorResponse>;\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  async componentWillLoad() {\n    debug(`[nylas-booked-event-card] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-booked-event-card] Component did load`);\n  }\n\n  private handleCancelBookingButtonClicked = () => {\n    this.cancelBookingButtonClicked.emit({ bookingId: this.eventInfo.booking_id });\n  };\n\n  private handleRescheduleButtonClicked = () => {\n    const errorHandler = (error: NylasSchedulerErrorResponse) => {\n      this.rescheduleBookedEventError.emit(error);\n    };\n    this.rescheduleButtonClicked.emit({ bookingId: this.eventInfo.booking_id, errorHandler });\n  };\n\n  private getOrganizer = (eventInfo: NylasEvent) => {\n    const organizer = eventInfo?.organizer;\n    return organizer;\n  };\n\n  getPaticipantType = (type: string) => {\n    switch (type) {\n      case 'host':\n        return 'Host';\n      case 'you':\n        return 'You';\n      default:\n        return '';\n    }\n  };\n\n  @RegisterComponent<NylasBookedEventCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-booked-event-card',\n    stateToProps: new Map([\n      ['scheduler.bookingInfo', 'bookingInfo'],\n      ['scheduler.rescheduleBookingId', 'rescheduleBookingId'],\n      ['scheduler.selectedTimezone', 'selectedTimezone'],\n      ['scheduler.selectedTimeslot', 'selectedTimeslot'],\n    ]),\n    eventToProps: {\n      cancelBookingButtonClicked: async (event: CustomEvent<{ bookingId: string }>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        nylasSchedulerConnector.scheduler.setCancel(event.detail.bookingId);\n      },\n      rescheduleButtonClicked: async (\n        event: CustomEvent<{ bookingId: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>,\n        nylasSchedulerConnector: NylasSchedulerConnector,\n      ) => {\n        const result = await nylasSchedulerConnector.scheduler.setReschedule(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=\"nbec\">\n        <sp-theme theme=\"spectrum\" color=\"dark\" scale=\"medium\">\n          <div class=\"booked-event-timezone\">\n            <globe-icon></globe-icon>\n            {TIMEZONE_MAP[this.selectedTimezone]}\n          </div>\n          <div class=\"event-card-wrapper\" part=\"nbec__card\">\n            <div class=\"calendar-icon\">\n              <calendar-check-icon />\n            </div>\n            <div class=\"booked-event-header\">\n              <h2 slot=\"card-title\" part=\"nbec__title\">\n                Booking {!!this.rescheduleBookingId ? 'rescheduled' : 'confirmed'}!\n              </h2>\n              <div part=\"nbec__description\">\n                {this.getOrganizer(this.eventInfo)?.name || this.getOrganizer(this.eventInfo)?.email}&nbsp;&amp;&nbsp;\n                {this.bookingInfo?.primaryParticipant?.name || this.bookingInfo?.primaryParticipant?.email}\n              </div>\n            </div>\n            <sp-divider></sp-divider>\n            <div class=\"booking-date-time\">\n              <checkmark-circle-icon></checkmark-circle-icon>\n              <h3>Booking date and time</h3>\n              <p>\n                {new Date(this.selectedTimeslot.start_time).toLocaleDateString(undefined, { dateStyle: 'full' })} <br />\n                {new Date(this.selectedTimeslot.start_time).toLocaleTimeString(undefined, { timeStyle: 'short' })} -{' '}\n                {new Date(this.selectedTimeslot.end_time).toLocaleTimeString(undefined, { timeStyle: 'short' })}\n              </p>\n            </div>\n            <div class=\"booking-participants\">\n              {/* <people-icon></people-icon>\n              <h3>All participants</h3>\n              {this.eventInfo?.participants && (\n                <p>\n                  {this.eventInfo?.participants?.map((participant: NylasEvent['participants'][0]) => {\n                    return (\n                      <span class=\"block\">\n                        {participant.email} {this.getPaticipantType(participant.type) && `(${this.getPaticipantType(participant.type)})`}\n                      </span>\n                    );\n                  })}\n                </p>\n              )} */}\n            </div>\n            <sp-divider></sp-divider>\n            <div class=\"footer\">\n              <sp-button variant=\"secondary\" treatment=\"outline\" class=\"cancel\" onClick={this.handleCancelBookingButtonClicked} part=\"nbec__button-outline nbec__cancel-cta\">\n                Cancel booking\n              </sp-button>\n              <sp-button variant=\"secondary\" treatment=\"outline\" class=\"reschedule\" onClick={this.handleRescheduleButtonClicked} part=\"nbec__button-outline nbec__reschedule-cta\">\n                Reschedule\n              </sp-button>\n            </div>\n          </div>\n        </sp-theme>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nylas-booking-calendar-picker2.js

@@ -7,7 +7,7 @@ import { d as defineCustomElement$3 } from './search.js';
 import { d as defineCustomElement$2 } from './select-dropdown2.js';
 import { d as defineCustomElement$1 } from './toolitp-component.js';
 
-const nylasBookingCalendarPickerCss = ":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-booking-calendar-picker{width:inherit;display:flex;flex-direction:column;margin:1rem;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-200)}.nylas-booking-calendar-picker .header{padding:1rem;border-bottom:1px solid var(--nylas-base-200)}.nylas-booking-calendar-picker .header h3{margin:0;font-size:1rem;font-weight:600;line-height:20px;color:var(--nylas-base-900);text-align:left}.nylas-booking-calendar-picker .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-booking-calendar-picker .nylas-booking-calendar-picker__loading{padding-bottom:1rem}.nylas-booking-calendar-picker .nylas-booking-calendar-picker__loading .label{display:flex;align-items:center;gap:0.5rem;margin:1rem 1rem 0;color:var(--nylas-base-800)}.nylas-booking-calendar-picker .nylas-booking-calendar-picker__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-booking-calendar-picker .nylas-booking-calendar-picker__loading .loading-button span{padding:0 1rem}.nylas-booking-calendar-picker .nylas-booking-calendar-picker__dropdown{padding:1rem}.nylas-booking-calendar-picker .nylas-booking-calendar-picker__dropdown span.label{display:flex;align-items:center;gap:4px;color:var(--nylas-base-800)}.nylas-booking-calendar-picker .nylas-booking-calendar-picker__dropdown span.label tooltip-component{display:flex}.nylas-booking-calendar-picker .nylas-booking-calendar-picker__dropdown select-dropdown::part(sd_dropdown){width:100%}.nylas-booking-calendar-picker .nylas-booking-calendar-picker__dropdown select-dropdown::part(sd_dropdown-content){width:100%;max-width:unset}.nylas-booking-calendar-picker .nylas-booking-calendar-picker__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-booking-calendar-picker .nylas-booking-calendar-picker__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}";
+const nylasBookingCalendarPickerCss = ":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-booking-calendar-picker{width:inherit;display:flex;flex-direction:column;margin:1rem;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-200)}.nylas-booking-calendar-picker .header{padding:1rem;border-bottom:1px solid var(--nylas-base-200)}.nylas-booking-calendar-picker .header h3{margin:0;font-size:1rem;font-weight:600;line-height:20px;color:var(--nylas-base-900);text-align:left}.nylas-booking-calendar-picker .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-booking-calendar-picker .nylas-booking-calendar-picker__loading{padding-bottom:1rem;display:flex;flex-direction:column;gap:4px}.nylas-booking-calendar-picker .nylas-booking-calendar-picker__loading .label{display:flex;align-items:center;gap:0.5rem;margin:1rem 1rem 0;color:var(--nylas-base-800)}.nylas-booking-calendar-picker .nylas-booking-calendar-picker__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-booking-calendar-picker .nylas-booking-calendar-picker__loading .loading-button span{padding:0 1rem}.nylas-booking-calendar-picker .nylas-booking-calendar-picker__dropdown{padding:1rem;display:flex;flex-direction:column;gap:4px}.nylas-booking-calendar-picker .nylas-booking-calendar-picker__dropdown span.label{display:flex;align-items:center;gap:4px;color:var(--nylas-base-800)}.nylas-booking-calendar-picker .nylas-booking-calendar-picker__dropdown span.label tooltip-component{display:flex}.nylas-booking-calendar-picker .nylas-booking-calendar-picker__dropdown select-dropdown::part(sd_dropdown){width:100%}.nylas-booking-calendar-picker .nylas-booking-calendar-picker__dropdown select-dropdown::part(sd_dropdown-content){width:100%;max-width:unset}.nylas-booking-calendar-picker .nylas-booking-calendar-picker__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-booking-calendar-picker .nylas-booking-calendar-picker__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;
@@ -84,7 +84,7 @@ const NylasBookingCalendarPicker = proxyCustomElement(class NylasBookingCalendar
                 label: calendar.name,
             };
         }) ?? [];
-        return (h(Host, null, h("div", { class: "nylas-booking-calendar-picker" }, h("div", { class: "header", part: "ncp__header" }, h("h3", null, "Calendar booking"), h("p", null, "Choose calendar where you\u2019d like the event bookings to show up.")), calendarOptions.length > 0 ? (h("div", { class: "nylas-booking-calendar-picker__dropdown" }, h("span", { class: "label" }, "Select a calendar to book meetings on", h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, "Check availability across one or multiple calendars. If multiple calendars are selected, you must be available across all of them to be considered available."))), h("select-dropdown", { name: "booking-calendar", options: calendarOptions, withSearch: false, defaultSelectedOption: calendarOptions.find(cal => cal.value == this.defaultBookingCalendar) ?? calendarOptions[0] }))) : (h("div", { class: "nylas-booking-calendar-picker__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...")))))));
+        return (h(Host, null, h("div", { class: "nylas-booking-calendar-picker", part: "nbcp" }, h("div", { class: "header", part: "nbcp__header" }, h("h3", null, "Calendar booking"), h("p", null, "Choose calendar where you\u2019d like the event bookings to show up.")), calendarOptions.length > 0 ? (h("div", { class: "nylas-booking-calendar-picker__dropdown" }, h("span", { class: "label", part: "nbcp__input-label" }, "Select a calendar to book meetings on", h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, "Check availability across one or multiple calendars. If multiple calendars are selected, you must be available across all of them to be considered available."))), h("select-dropdown", { name: "booking-calendar", options: calendarOptions, withSearch: false, exportparts: "sd_dropdown: nbcp__dropdown, sd_dropdown-button: nbcp__dropdown-button, sd_dropdown-content: nbcp__dropdown-content", defaultSelectedOption: calendarOptions.find(cal => cal.value == this.defaultBookingCalendar) ?? calendarOptions[0] }))) : (h("div", { class: "nylas-booking-calendar-picker__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; }

package/dist/components/nylas-booking-calendar-picker2.js.map

@@ -1 +1 @@
-{"file":"nylas-booking-calendar-picker2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-booking-calendar-picker/nylas-booking-calendar-picker.scss?tag=nylas-booking-calendar-picker&encapsulation=shadow","src/components/scheduler-editor/nylas-booking-calendar-picker/nylas-booking-calendar-picker.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-booking-calendar-picker {\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-booking-calendar-picker__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-booking-calendar-picker__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-content) {\n      width: 100%;\n      max-width: unset;\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-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 { Calendar } from '@nylas/core';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\n/**\n * The `nylas-booking-calendar-picker` component is a UI component that displays the booking calendar picker.\n */\n@Component({\n  tag: 'nylas-booking-calendar-picker',\n  styleUrl: 'nylas-booking-calendar-picker.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasBookingCalendarPicker {\n  @Element() host!: HTMLNylasCalendarPickerElement;\n  /**\n   * The calendars to choose from.\n   */\n  @Prop() calendars?: Calendar[];\n  /**\n   * The name of the calendar picker.\n   */\n  @Prop() name: string = 'calendar';\n  /**\n   * The default selected calendars.\n   */\n  @Prop() defaultBookingCalendar: string = '';\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The selected calendars.\n   */\n  @State() selectedCalendar: string = '';\n\n  /**\n   * This event is fired when the selected calendars 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-booking-calendar-picker', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-booking-calendar-picker', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-booking-calendar-picker', '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-booking-calendar-picker', 'componentDidLoad');\n    // TODO: Remove this when the internals in tests are fixed.\n    if (typeof this.internals.setFormValue === 'function') {\n      this.internals.setFormValue(this.defaultBookingCalendar.toString(), 'booking-calendar');\n    }\n    this.selectedCalendar = this.defaultBookingCalendar;\n  }\n\n  componentWillUpdate() {\n    debug('nylas-booking-calendar-picker', 'componentWillUpdate');\n  }\n\n  componentDidUpdate() {\n    debug('nylas-booking-calendar-picker', 'componentDidUpdate');\n  }\n\n  componentWillRender() {\n    debug('nylas-booking-calendar-picker', 'componentWillRender');\n  }\n\n  componentDidRender() {\n    debug('nylas-booking-calendar-picker', '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-booking-calendar-picker', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Listen('selectedOptionChanged')\n  selectedOptionChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('nylas-booking-calendar-picker', '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.selectedCalendar = value;\n      this.internals.setFormValue(value.toString(), 'booking-calendar');\n    };\n    this.valueChanged.emit({ ...event.detail, valueChanged });\n  }\n\n  @RegisterComponent<NylasBookingCalendarPicker, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-booking-calendar-picker',\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 calendarOptions =\n      this.calendars?.map(calendar => {\n        return {\n          value: calendar.id,\n          label: calendar.name,\n        };\n      }) ?? [];\n\n    return (\n      <Host>\n        <div class=\"nylas-booking-calendar-picker\">\n          <div class=\"header\" part=\"ncp__header\">\n            <h3>Calendar booking</h3>\n            <p>Choose calendar where you’d like the event bookings to show up.</p>\n          </div>\n\n          {calendarOptions.length > 0 ? (\n            <div class=\"nylas-booking-calendar-picker__dropdown\">\n              <span class=\"label\">\n                Select a calendar to book meetings on\n                <tooltip-component>\n                  <info-icon slot=\"tooltip-icon\" />\n                  <span slot=\"tooltip-content\">\n                    Check availability across one or multiple calendars. If multiple calendars are selected, you must be available across all of them to be considered available.\n                  </span>\n                </tooltip-component>\n              </span>\n              <select-dropdown\n                name=\"booking-calendar\"\n                options={calendarOptions}\n                withSearch={false}\n                defaultSelectedOption={calendarOptions.find(cal => cal.value == this.defaultBookingCalendar) ?? calendarOptions[0]}\n              />\n            </div>\n          ) : (\n            <div class=\"nylas-booking-calendar-picker__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}
+{"file":"nylas-booking-calendar-picker2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-booking-calendar-picker/nylas-booking-calendar-picker.scss?tag=nylas-booking-calendar-picker&encapsulation=shadow","src/components/scheduler-editor/nylas-booking-calendar-picker/nylas-booking-calendar-picker.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-booking-calendar-picker {\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-booking-calendar-picker__loading {\n    padding-bottom: 1rem;\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\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-booking-calendar-picker__dropdown {\n    padding: 1rem;\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\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-content) {\n      width: 100%;\n      max-width: unset;\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-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 { Calendar } from '@nylas/core';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\n/**\n * The `nylas-booking-calendar-picker` component is a UI component that displays the booking calendar picker.\n * @part nbcp - The booking calendar picker container\n * @part nbcp__header - The header of the booking calendar picker\n * @part nbcp__input-label - The input label of the booking calendar picker\n * @part nbcp__dropdown - The dropdown container\n * @part nbcp__dropdown-button - The dropdown button\n * @part nbcp__dropdown-content - The dropdown content\n */\n@Component({\n  tag: 'nylas-booking-calendar-picker',\n  styleUrl: 'nylas-booking-calendar-picker.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasBookingCalendarPicker {\n  @Element() host!: HTMLNylasCalendarPickerElement;\n  /**\n   * The calendars to choose from.\n   */\n  @Prop() calendars?: Calendar[];\n  /**\n   * The name of the calendar picker.\n   */\n  @Prop() name: string = 'calendar';\n  /**\n   * The default selected calendars.\n   */\n  @Prop() defaultBookingCalendar: string = '';\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The selected calendars.\n   */\n  @State() selectedCalendar: string = '';\n\n  /**\n   * This event is fired when the selected calendars 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-booking-calendar-picker', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-booking-calendar-picker', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-booking-calendar-picker', '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-booking-calendar-picker', 'componentDidLoad');\n    // TODO: Remove this when the internals in tests are fixed.\n    if (typeof this.internals.setFormValue === 'function') {\n      this.internals.setFormValue(this.defaultBookingCalendar.toString(), 'booking-calendar');\n    }\n    this.selectedCalendar = this.defaultBookingCalendar;\n  }\n\n  componentWillUpdate() {\n    debug('nylas-booking-calendar-picker', 'componentWillUpdate');\n  }\n\n  componentDidUpdate() {\n    debug('nylas-booking-calendar-picker', 'componentDidUpdate');\n  }\n\n  componentWillRender() {\n    debug('nylas-booking-calendar-picker', 'componentWillRender');\n  }\n\n  componentDidRender() {\n    debug('nylas-booking-calendar-picker', '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-booking-calendar-picker', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Listen('selectedOptionChanged')\n  selectedOptionChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('nylas-booking-calendar-picker', '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.selectedCalendar = value;\n      this.internals.setFormValue(value.toString(), 'booking-calendar');\n    };\n    this.valueChanged.emit({ ...event.detail, valueChanged });\n  }\n\n  @RegisterComponent<NylasBookingCalendarPicker, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-booking-calendar-picker',\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 calendarOptions =\n      this.calendars?.map(calendar => {\n        return {\n          value: calendar.id,\n          label: calendar.name,\n        };\n      }) ?? [];\n\n    return (\n      <Host>\n        <div class=\"nylas-booking-calendar-picker\" part=\"nbcp\">\n          <div class=\"header\" part=\"nbcp__header\">\n            <h3>Calendar booking</h3>\n            <p>Choose calendar where you’d like the event bookings to show up.</p>\n          </div>\n\n          {calendarOptions.length > 0 ? (\n            <div class=\"nylas-booking-calendar-picker__dropdown\">\n              <span class=\"label\" part=\"nbcp__input-label\">\n                Select a calendar to book meetings on\n                <tooltip-component>\n                  <info-icon slot=\"tooltip-icon\" />\n                  <span slot=\"tooltip-content\">\n                    Check availability across one or multiple calendars. If multiple calendars are selected, you must be available across all of them to be considered available.\n                  </span>\n                </tooltip-component>\n              </span>\n              <select-dropdown\n                name=\"booking-calendar\"\n                options={calendarOptions}\n                withSearch={false}\n                exportparts=\"sd_dropdown: nbcp__dropdown, sd_dropdown-button: nbcp__dropdown-button, sd_dropdown-content: nbcp__dropdown-content\"\n                defaultSelectedOption={calendarOptions.find(cal => cal.value == this.defaultBookingCalendar) ?? calendarOptions[0]}\n              />\n            </div>\n          ) : (\n            <div class=\"nylas-booking-calendar-picker__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}