@nylas/web-elements 2.0.1 → 2.0.3

package/dist/collection/components/scheduler/nylas-cancelled-event-card/nylas-cancelled-event-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"nylas-cancelled-event-card.js","sourceRoot":"","sources":["../../../../src/components/scheduler/nylas-cancelled-event-card/nylas-cancelled-event-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { Component, Element, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { NylasEvent, NylasSchedulerConnector, NylasSchedulerErrorResponse } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { debug } from '@/utils/utils';\nimport { ConfigSettings } from '@/stores/scheduler-store';\nimport i18next from '@/utils/i18n';\nimport { ThemeConfig } from '@nylas/core';\n\n/**\n * The `nylas-cancelled-event-card` component is a UI component that displays the cancelled event card.\n *\n * @part ncec - The cancelled event card host.\n * @part ncec__icon - The calendar icon.\n * @part ncec__title - The title of the cancelled event card.\n * @part ncec__description - The description of the cancelled event card.\n * @part ncec__button-outline - The close button CTA.\n * @part ncec__card - The cancelled event card.\n */\n@Component({\n  tag: 'nylas-cancelled-event-card',\n  styleUrl: 'nylas-cancelled-event-card.scss',\n  shadow: true,\n})\nexport class NylasCancelledEventCard {\n  /**\n   * The host element.\n   * Used to manage the host element of the provider.\n   */\n  @Element() private host!: HTMLNylasCancelledEventCardElement;\n\n  /**\n   * @standalone\n   * The config settings for the scheduler.\n   */\n  @Prop() readonly configSettings?: ConfigSettings;\n\n  /**\n   * @standalone\n   * The theme configuration.\n   */\n  @Prop({ attribute: 'theme-config' }) readonly themeConfig?: any;\n\n  /**\n   * The participant's name who booked the event / is logged in.\n   */\n  @Prop() readonly cancelledEventInfo!: Partial<NylasEvent>;\n\n  /**\n   * Closing state of the cancelled event card button.\n   */\n  @State() isClosing: boolean = false;\n\n  /**\n   * This event is fired when the close button is clicked on the cancelled event card.\n   */\n  @Event() readonly closeCancelEventCardClicked!: EventEmitter<{ errorHandler?: (error: NylasSchedulerErrorResponse) => void }>;\n\n  /**\n   * This event is fired when an error occurs.\n   */\n  @Event() readonly cancelledEventCardError!: EventEmitter<NylasSchedulerErrorResponse>;\n\n  @Watch('themeConfig')\n  themeConfigChanged(newThemeConfig: ThemeConfig) {\n    this.applyThemeConfig(newThemeConfig);\n  }\n\n  connectedCallback() {\n    debug(`[nylas-cancelled-event-card] Component connected`);\n  }\n\n  async componentWillLoad() {\n    debug(`[nylas-cancelled-event-card] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-cancelled-event-card] Component did load`);\n    if (!this.cancelledEventInfo) {\n      console.warn(`[nylas-cancelled-event-card] No cancelled event info provided, \"cancelledEventInfo\" prop is required.`);\n    }\n    this.applyThemeConfig(this.themeConfig);\n  }\n\n  disconnectedCallback() {\n    debug(`[nylas-cancelled-event-card] Component disconnected`);\n  }\n\n  applyThemeConfig(themeConfig?: ThemeConfig) {\n    if (themeConfig) {\n      for (const [key, value] of Object.entries(themeConfig)) {\n        this.host.style.setProperty(`${key}`, value);\n      }\n    }\n  }\n\n  private handleCloseClicked = () => {\n    this.isClosing = true;\n    const errorHandler = (error: NylasSchedulerErrorResponse) => {\n      this.cancelledEventCardError.emit(error);\n      this.isClosing = false;\n    };\n    this.closeCancelEventCardClicked.emit({ errorHandler });\n  };\n\n  @RegisterComponent<NylasCancelledEventCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-cancelled-event-card',\n    stateToProps: new Map([\n      ['scheduler.configSettings', 'configSettings'],\n      ['scheduler.themeConfig', 'themeConfig'],\n      ['scheduler.themeConfig', 'themeConfig'],\n    ]),\n    eventToProps: {\n      closeCancelEventCardClicked: async (_: CustomEvent<{ errorHandler?: (error: NylasSchedulerErrorResponse) => void }>, nylasschedulerconnector: NylasSchedulerConnector) => {\n        const result = await nylasschedulerconnector.scheduler.resetCancel();\n\n        const { errorHandler } = _.detail;\n        if (errorHandler && (!result || 'error' in result)) {\n          errorHandler(result);\n        }\n      },\n      cancelledEventCardError: async (event: CustomEvent<NylasSchedulerErrorResponse>, _nylasschedulerconnector: NylasSchedulerConnector) => {\n        debug('nylas-cancelled-event-card', 'cancelledEventCardError', event.detail);\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host part=\"ncec\">\n        <div class=\"nylas-cancelled-event-card\" part=\"ncec__card\">\n          <div class=\"nylas-cancelled-event-card__calendar-icon\" part=\"ncec__icon\">\n            <calendar-cancel-icon />\n          </div>\n          <h3 class=\"nylas-cancelled-event-card__title\" part=\"ncec__title\">\n            {i18next.t('bookingCancelledTitle')}!\n          </h3>\n          <div class=\"nylas-cancelled-event-card__description\" part=\"ncec__description\">\n            {i18next.t('bookingCancelledMessage')} {this.configSettings?.organizer?.name || i18next.t('bookingCancelledMessage_theParticipants')}.\n          </div>\n          <div class=\"nylas-cancelled-event-card__cta\">\n            <button-component variant=\"basic\" disabled={this.isClosing} part=\"ncec__button-outline\" onClick={this.handleCloseClicked}>\n              {this.isClosing ? `${i18next.t('closingButton')}...` : `${i18next.t('closeButton')}`}\n            </button-component>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"nylas-cancelled-event-card.js","sourceRoot":"","sources":["../../../../src/components/scheduler/nylas-cancelled-event-card/nylas-cancelled-event-card.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAGrG,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEtC,OAAO,OAAO,MAAM,cAAc,CAAC;AAkBnC,MAAM,OAAO,uBAAuB;;QAmF1B,uBAAkB,GAAG,GAAG,EAAE;YAChC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YACtB,MAAM,YAAY,GAAG,CAAC,KAAkC,EAAE,EAAE;gBAC1D,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBACzC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACzB,CAAC,CAAC;YACF,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,EAAE,YAAY,EAAE,CAAC,CAAC;QAC1D,CAAC,CAAC;;;;;yBA1D4B,KAAK;;IAanC,8BAA8B,CAAC,MAAqB,EAAE,MAAqB;QACzE,IAAI,MAAM,KAAK,MAAM;YAAE,OAAO;QAC9B,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;IACjC,CAAC;IAGD,kBAAkB,CAAC,cAA2B;QAC5C,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;IACxC,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,kDAAkD,CAAC,CAAC;IAC5D,CAAC;IAED,KAAK,CAAC,iBAAiB;QACrB,KAAK,CAAC,kDAAkD,CAAC,CAAC;IAC5D,CAAC;IAED,KAAK,CAAC,gBAAgB;QACpB,KAAK,CAAC,iDAAiD,CAAC,CAAC;QACzD,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAC7B,OAAO,CAAC,IAAI,CAAC,uGAAuG,CAAC,CAAC;QACxH,CAAC;QACD,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC1C,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,qDAAqD,CAAC,CAAC;IAC/D,CAAC;IAED,gBAAgB,CAAC,WAAyB;QACxC,IAAI,WAAW,EAAE,CAAC;YAChB,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE,CAAC;gBACvD,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,GAAG,EAAE,EAAE,KAAK,CAAC,CAAC;YAC/C,CAAC;QACH,CAAC;IACH,CAAC;IAiCD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,MAAM;YACf,4DAAK,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,YAAY;gBACvD,4DAAK,KAAK,EAAC,2CAA2C,EAAC,IAAI,EAAC,YAAY;oBACtE,8EAAwB,CACpB;gBACN,2DAAI,KAAK,EAAC,mCAAmC,EAAC,IAAI,EAAC,aAAa;oBAC7D,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC;wBAChC;gBACL,4DAAK,KAAK,EAAC,yCAAyC,EAAC,IAAI,EAAC,mBAAmB;oBAC1E,OAAO,CAAC,CAAC,CAAC,yBAAyB,CAAC;;oBAAG,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,IAAI,IAAI,OAAO,CAAC,CAAC,CAAC,yCAAyC,CAAC;wBAChI;gBACN,4DAAK,KAAK,EAAC,iCAAiC;oBAC1C,yEAAkB,OAAO,EAAC,OAAO,EAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,EAAC,sBAAsB,EAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,IACrH,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,EAAE,CACnE,CACf,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAtBC;IAtBC,iBAAiB,CAAkG;QAClH,IAAI,EAAE,4BAA4B;QAClC,YAAY,EAAE,IAAI,GAAG,CAAC;YACpB,CAAC,0BAA0B,EAAE,gBAAgB,CAAC;YAC9C,CAAC,uBAAuB,EAAE,aAAa,CAAC;YACxC,CAAC,4BAA4B,EAAE,kBAAkB,CAAC;SACnD,CAAC;QACF,YAAY,EAAE;YACZ,2BAA2B,EAAE,KAAK,EAAE,CAA+E,EAAE,uBAAgD,EAAE,EAAE;gBACvK,MAAM,MAAM,GAAG,MAAM,uBAAuB,CAAC,SAAS,CAAC,WAAW,EAAE,CAAC;gBAErE,MAAM,EAAE,YAAY,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;gBAClC,IAAI,YAAY,IAAI,CAAC,CAAC,MAAM,IAAI,OAAO,IAAI,MAAM,CAAC,EAAE,CAAC;oBACnD,YAAY,CAAC,MAAM,CAAC,CAAC;gBACvB,CAAC;YACH,CAAC;YACD,uBAAuB,EAAE,KAAK,EAAE,KAA+C,EAAE,wBAAiD,EAAE,EAAE;gBACpI,KAAK,CAAC,4BAA4B,EAAE,yBAAyB,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;YAC/E,CAAC;SACF;QACD,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;qDAsBD","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { Component, Element, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { LANGUAGE_CODE, NylasEvent, NylasSchedulerConnector, NylasSchedulerErrorResponse } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { debug } from '@/utils/utils';\nimport { ConfigSettings } from '@/stores/scheduler-store';\nimport i18next from '@/utils/i18n';\nimport { ThemeConfig } from '@nylas/core';\n\n/**\n * The `nylas-cancelled-event-card` component is a UI component that displays the cancelled event card.\n *\n * @part ncec - The cancelled event card host.\n * @part ncec__icon - The calendar icon.\n * @part ncec__title - The title of the cancelled event card.\n * @part ncec__description - The description of the cancelled event card.\n * @part ncec__button-outline - The close button CTA.\n * @part ncec__card - The cancelled event card.\n */\n@Component({\n  tag: 'nylas-cancelled-event-card',\n  styleUrl: 'nylas-cancelled-event-card.scss',\n  shadow: true,\n})\nexport class NylasCancelledEventCard {\n  /**\n   * The host element.\n   * Used to manage the host element of the provider.\n   */\n  @Element() private host!: HTMLNylasCancelledEventCardElement;\n\n  /**\n   * @standalone\n   * The config settings for the scheduler.\n   */\n  @Prop() readonly configSettings?: ConfigSettings;\n\n  /**\n   * @standalone\n   * The theme configuration.\n   */\n  @Prop({ attribute: 'theme-config' }) readonly themeConfig?: any;\n\n  /**\n   * The selected language.\n   */\n  @Prop({ attribute: 'selected-language' }) readonly selectedLanguage?: LANGUAGE_CODE;\n\n  /**\n   * The participant's name who booked the event / is logged in.\n   */\n  @Prop() readonly cancelledEventInfo!: Partial<NylasEvent>;\n\n  /**\n   * Closing state of the cancelled event card button.\n   */\n  @State() isClosing: boolean = false;\n\n  /**\n   * This event is fired when the close button is clicked on the cancelled event card.\n   */\n  @Event() readonly closeCancelEventCardClicked!: EventEmitter<{ errorHandler?: (error: NylasSchedulerErrorResponse) => void }>;\n\n  /**\n   * This event is fired when an error occurs.\n   */\n  @Event() readonly cancelledEventCardError!: EventEmitter<NylasSchedulerErrorResponse>;\n\n  @Watch('selectedLanguage')\n  selectedLanguageChangedHandler(newVal: LANGUAGE_CODE, oldVal: LANGUAGE_CODE) {\n    if (newVal === oldVal) return;\n    i18next.changeLanguage(newVal);\n  }\n\n  @Watch('themeConfig')\n  themeConfigChanged(newThemeConfig: ThemeConfig) {\n    this.applyThemeConfig(newThemeConfig);\n  }\n\n  connectedCallback() {\n    debug(`[nylas-cancelled-event-card] Component connected`);\n  }\n\n  async componentWillLoad() {\n    debug(`[nylas-cancelled-event-card] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-cancelled-event-card] Component did load`);\n    if (!this.cancelledEventInfo) {\n      console.warn(`[nylas-cancelled-event-card] No cancelled event info provided, \"cancelledEventInfo\" prop is required.`);\n    }\n    this.applyThemeConfig(this.themeConfig);\n  }\n\n  disconnectedCallback() {\n    debug(`[nylas-cancelled-event-card] Component disconnected`);\n  }\n\n  applyThemeConfig(themeConfig?: ThemeConfig) {\n    if (themeConfig) {\n      for (const [key, value] of Object.entries(themeConfig)) {\n        this.host.style.setProperty(`${key}`, value);\n      }\n    }\n  }\n\n  private handleCloseClicked = () => {\n    this.isClosing = true;\n    const errorHandler = (error: NylasSchedulerErrorResponse) => {\n      this.cancelledEventCardError.emit(error);\n      this.isClosing = false;\n    };\n    this.closeCancelEventCardClicked.emit({ errorHandler });\n  };\n\n  @RegisterComponent<NylasCancelledEventCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-cancelled-event-card',\n    stateToProps: new Map([\n      ['scheduler.configSettings', 'configSettings'],\n      ['scheduler.themeConfig', 'themeConfig'],\n      ['scheduler.selectedLanguage', 'selectedLanguage'],\n    ]),\n    eventToProps: {\n      closeCancelEventCardClicked: async (_: CustomEvent<{ errorHandler?: (error: NylasSchedulerErrorResponse) => void }>, nylasschedulerconnector: NylasSchedulerConnector) => {\n        const result = await nylasschedulerconnector.scheduler.resetCancel();\n\n        const { errorHandler } = _.detail;\n        if (errorHandler && (!result || 'error' in result)) {\n          errorHandler(result);\n        }\n      },\n      cancelledEventCardError: async (event: CustomEvent<NylasSchedulerErrorResponse>, _nylasschedulerconnector: NylasSchedulerConnector) => {\n        debug('nylas-cancelled-event-card', 'cancelledEventCardError', event.detail);\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host part=\"ncec\">\n        <div class=\"nylas-cancelled-event-card\" part=\"ncec__card\">\n          <div class=\"nylas-cancelled-event-card__calendar-icon\" part=\"ncec__icon\">\n            <calendar-cancel-icon />\n          </div>\n          <h3 class=\"nylas-cancelled-event-card__title\" part=\"ncec__title\">\n            {i18next.t('bookingCancelledTitle')}!\n          </h3>\n          <div class=\"nylas-cancelled-event-card__description\" part=\"ncec__description\">\n            {i18next.t('bookingCancelledMessage')} {this.configSettings?.organizer?.name || i18next.t('bookingCancelledMessage_theParticipants')}.\n          </div>\n          <div class=\"nylas-cancelled-event-card__cta\">\n            <button-component variant=\"basic\" disabled={this.isClosing} part=\"ncec__button-outline\" onClick={this.handleCloseClicked}>\n              {this.isClosing ? `${i18next.t('closingButton')}...` : `${i18next.t('closeButton')}`}\n            </button-component>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/scheduler/nylas-confirmed-event-card/nylas-confirmed-event-card.css

@@ -136,7 +136,7 @@
   margin-top: 1rem;
 }
 
-calendar-cancel-icon {
+calendar-check-icon {
   display: flex;
   align-items: center;
   justify-content: center;

package/dist/collection/components/scheduler/nylas-confirmed-event-card/nylas-confirmed-event-card.js

@@ -28,12 +28,18 @@ export class NylasConfirmedEventCard {
         };
         this.configSettings = undefined;
         this.themeConfig = undefined;
+        this.selectedLanguage = undefined;
         this.confirmedEventInfo = undefined;
         this.isClosing = false;
     }
     themeConfigChanged(newThemeConfig) {
         this.applyThemeConfig(newThemeConfig);
     }
+    selectedLanguageChangedHandler(newVal, oldVal) {
+        if (newVal === oldVal)
+            return;
+        i18next.changeLanguage(newVal);
+    }
     connectedCallback() {
         debug(`[nylas-confirmed-event-card] Component connected`);
     }
@@ -58,7 +64,7 @@ export class NylasConfirmedEventCard {
         }
     }
     render() {
-        return (h(Host, { key: 'ffdaf23bd9e627de16d532d89f5b4a080f8ec88c', part: "ncec" }, h("div", { key: '3214b0e02823397ffe659c0d77cdeb26104b416e', class: "nylas-confirmed-event-card", part: "ncec__card" }, h("div", { key: '79f921d70421c441ca2feb896099a050aaac42d1', class: "nylas-confirmed-event-card__calendar-icon", part: "ncec__icon" }, h("calendar-cancel-icon", { key: '9c6386bf2cdd198f47af7b8244d930a7f451a4c1' })), h("h3", { key: 'be5603a03255b90cd62a2f48b11ee70ae6c7a697', class: "nylas-confirmed-event-card__title", part: "ncec__title" }, i18next.t('confirmedEventCardTitle'), "!"), h("div", { key: '88fe62604c3b31332b14b50701e25b8e7fc414b6', class: "nylas-confirmed-event-card__description", part: "ncec__description" }, i18next.t('confirmedEventCardDescription'), " ", this.configSettings?.organizer?.name || 'the participants', "."), h("div", { key: '0394b324bcb9c8c3ba99f837e7831e1507b0f52a', class: "nylas-confirmed-event-card__cta" }, h("button-component", { key: '2f04fbc0c973cd2a95337f3edf4d5354fd219fb8', variant: "basic", disabled: this.isClosing, part: "ncec__button-outline", onClick: this.handleCloseClicked }, this.isClosing ? `${i18next.t('closingButton')}...` : `${i18next.t('closeButton')}`)))));
+        return (h(Host, { key: '196444e0b93a298fd4107589a7ffbba19895fe05', part: "ncec" }, h("div", { key: 'a421437ec16e3354d51a0eed4e31c7c0de557278', class: "nylas-confirmed-event-card", part: "ncec__card" }, h("div", { key: '0da3ba5fcff4b46951adf128d4d4e6493860d56c', class: "nylas-confirmed-event-card__calendar-icon", part: "ncec__icon" }, h("calendar-check-icon", { key: 'a02d08a2367f962607651557eaa5fb7b9d8b75cf' })), h("h3", { key: '0494ca0a842a597bbc40cd3c720d2faf10d6b103', class: "nylas-confirmed-event-card__title", part: "ncec__title" }, i18next.t('confirmedEventCardTitle'), "!"), h("div", { key: '4473fce54b8ad6176286f84cbd5554c8323312f0', class: "nylas-confirmed-event-card__description", part: "ncec__description" }, i18next.t('confirmedEventCardDescription'), " ", this.configSettings?.organizer?.name || 'the participants', "."), h("div", { key: 'c0c17c8bccb4bc4b017a4a6aba62cdd48ebeea5a', class: "nylas-confirmed-event-card__cta" }, h("button-component", { key: '1dcb13cff4958b4549125c5457c9ab1e05078316', variant: "basic", disabled: this.isClosing, part: "ncec__button-outline", onClick: this.handleCloseClicked }, this.isClosing ? `${i18next.t('closingButton')}...` : `${i18next.t('closeButton')}`)))));
     }
     static get is() { return "nylas-confirmed-event-card"; }
     static get encapsulation() { return "shadow"; }
@@ -118,6 +124,29 @@ export class NylasConfirmedEventCard {
                 "attribute": "theme-config",
                 "reflect": false
             },
+            "selectedLanguage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LANGUAGE_CODE",
+                    "resolved": "LANGUAGE_CODE.de | LANGUAGE_CODE.en | LANGUAGE_CODE.es | LANGUAGE_CODE.fr | LANGUAGE_CODE.ja | LANGUAGE_CODE.ko | LANGUAGE_CODE.nl | LANGUAGE_CODE.sv | LANGUAGE_CODE.zh | undefined",
+                    "references": {
+                        "LANGUAGE_CODE": {
+                            "location": "import",
+                            "path": "../../..",
+                            "id": "src/index.ts::LANGUAGE_CODE"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The selected language."
+                },
+                "attribute": "selected-language",
+                "reflect": false
+            },
             "confirmedEventInfo": {
                 "type": "unknown",
                 "mutable": false,
@@ -200,6 +229,9 @@ export class NylasConfirmedEventCard {
         return [{
                 "propName": "themeConfig",
                 "methodName": "themeConfigChanged"
+            }, {
+                "propName": "selectedLanguage",
+                "methodName": "selectedLanguageChangedHandler"
             }];
     }
 }
@@ -209,6 +241,7 @@ __decorate([
         stateToProps: new Map([
             ['scheduler.configSettings', 'configSettings'],
             ['scheduler.themeConfig', 'themeConfig'],
+            ['scheduler.selectedLanguage', 'selectedLanguage'],
         ]),
         eventToProps: {
             closeConfirmEventCardClicked: async (_, nylasschedulerconnector) => {

package/dist/collection/components/scheduler/nylas-confirmed-event-card/nylas-confirmed-event-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"nylas-confirmed-event-card.js","sourceRoot":"","sources":["../../../../src/components/scheduler/nylas-confirmed-event-card/nylas-confirmed-event-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { Component, Element, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { NylasEvent, NylasSchedulerConnector, NylasSchedulerErrorResponse } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { debug } from '@/utils/utils';\nimport { ConfigSettings } from '@/stores/scheduler-store';\nimport i18next from '@/utils/i18n';\nimport { ThemeConfig } from '@nylas/core';\n\n/**\n * The `nylas-confirmed-event-card` component is a UI component that displays the confirmed event card.\n *\n * @part ncec - The confirmed event card host.\n * @part ncec__icon - The calendar icon.\n * @part ncec__title - The title of the confirmed event card.\n * @part ncec__description - The description of the confirmed event card.\n * @part ncec__button-outline - The close button CTA.\n * @part ncec__card - The confirmed event card.\n */\n@Component({\n  tag: 'nylas-confirmed-event-card',\n  styleUrl: 'nylas-confirmed-event-card.scss',\n  shadow: true,\n})\nexport class NylasConfirmedEventCard {\n  /**\n   * The host element.\n   * Used to manage the host element of the provider.\n   */\n  @Element() private host!: HTMLNylasConfirmedEventCardElement;\n\n  /**\n   * @standalone\n   * The config settings for the scheduler.\n   */\n  @Prop() readonly configSettings?: ConfigSettings;\n\n  /**\n   * @standalone\n   * The theme configuration.\n   */\n  @Prop({ attribute: 'theme-config' }) readonly themeConfig?: any;\n\n  /**\n   * The participant's name who booked the event / is logged in.\n   */\n  @Prop() readonly confirmedEventInfo!: Partial<NylasEvent>;\n\n  /**\n   * Closing state of the confirmed event card button.\n   */\n  @State() isClosing: boolean = false;\n\n  /**\n   * This event is fired when the close button is clicked on the confirmed event card.\n   */\n  @Event() readonly closeConfirmEventCardClicked!: EventEmitter<{ errorHandler?: (error: NylasSchedulerErrorResponse) => void }>;\n\n  /**\n   * This event is fired when an error occurs.\n   */\n  @Event() readonly confirmedEventCardError!: EventEmitter<NylasSchedulerErrorResponse>;\n\n  @Watch('themeConfig')\n  themeConfigChanged(newThemeConfig: ThemeConfig) {\n    this.applyThemeConfig(newThemeConfig);\n  }\n\n  connectedCallback() {\n    debug(`[nylas-confirmed-event-card] Component connected`);\n  }\n\n  async componentWillLoad() {\n    debug(`[nylas-confirmed-event-card] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-confirmed-event-card] Component did load`);\n    if (!this.confirmedEventInfo) {\n      console.warn(`[nylas-confirmed-event-card] No confirmed event info provided, \"confirmedEventInfo\" prop is required.`);\n    }\n    this.applyThemeConfig(this.themeConfig);\n  }\n\n  disconnectedCallback() {\n    debug(`[nylas-confirmed-event-card] Component disconnected`);\n  }\n\n  applyThemeConfig(themeConfig?: ThemeConfig) {\n    if (themeConfig) {\n      for (const [key, value] of Object.entries(themeConfig)) {\n        this.host.style.setProperty(`${key}`, value);\n      }\n    }\n  }\n\n  private handleCloseClicked = () => {\n    this.isClosing = true;\n    const errorHandler = (error: NylasSchedulerErrorResponse) => {\n      this.confirmedEventCardError.emit(error);\n      this.isClosing = false;\n    };\n    this.closeConfirmEventCardClicked.emit({ errorHandler });\n  };\n\n  @RegisterComponent<NylasConfirmedEventCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-confirmed-event-card',\n    stateToProps: new Map([\n      ['scheduler.configSettings', 'configSettings'],\n      ['scheduler.themeConfig', 'themeConfig'],\n    ]),\n    eventToProps: {\n      closeConfirmEventCardClicked: async (_: CustomEvent<{ errorHandler?: (error: NylasSchedulerErrorResponse) => void }>, nylasschedulerconnector: NylasSchedulerConnector) => {\n        const result = await nylasschedulerconnector.scheduler.resetConfirm();\n\n        const { errorHandler } = _.detail;\n        if (errorHandler && (!result || 'error' in result)) {\n          errorHandler(result);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host part=\"ncec\">\n        <div class=\"nylas-confirmed-event-card\" part=\"ncec__card\">\n          <div class=\"nylas-confirmed-event-card__calendar-icon\" part=\"ncec__icon\">\n            <calendar-cancel-icon />\n          </div>\n          <h3 class=\"nylas-confirmed-event-card__title\" part=\"ncec__title\">\n            {i18next.t('confirmedEventCardTitle')}!\n          </h3>\n          <div class=\"nylas-confirmed-event-card__description\" part=\"ncec__description\">\n            {i18next.t('confirmedEventCardDescription')} {this.configSettings?.organizer?.name || 'the participants'}.\n          </div>\n          <div class=\"nylas-confirmed-event-card__cta\">\n            <button-component variant=\"basic\" disabled={this.isClosing} part=\"ncec__button-outline\" onClick={this.handleCloseClicked}>\n              {this.isClosing ? `${i18next.t('closingButton')}...` : `${i18next.t('closeButton')}`}\n            </button-component>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"nylas-confirmed-event-card.js","sourceRoot":"","sources":["../../../../src/components/scheduler/nylas-confirmed-event-card/nylas-confirmed-event-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { Component, Element, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { LANGUAGE_CODE, NylasEvent, NylasSchedulerConnector, NylasSchedulerErrorResponse } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { debug } from '@/utils/utils';\nimport { ConfigSettings } from '@/stores/scheduler-store';\nimport i18next from '@/utils/i18n';\nimport { ThemeConfig } from '@nylas/core';\n\n/**\n * The `nylas-confirmed-event-card` component is a UI component that displays the confirmed event card.\n *\n * @part ncec - The confirmed event card host.\n * @part ncec__icon - The calendar icon.\n * @part ncec__title - The title of the confirmed event card.\n * @part ncec__description - The description of the confirmed event card.\n * @part ncec__button-outline - The close button CTA.\n * @part ncec__card - The confirmed event card.\n */\n@Component({\n  tag: 'nylas-confirmed-event-card',\n  styleUrl: 'nylas-confirmed-event-card.scss',\n  shadow: true,\n})\nexport class NylasConfirmedEventCard {\n  /**\n   * The host element.\n   * Used to manage the host element of the provider.\n   */\n  @Element() private host!: HTMLNylasConfirmedEventCardElement;\n\n  /**\n   * @standalone\n   * The config settings for the scheduler.\n   */\n  @Prop() readonly configSettings?: ConfigSettings;\n\n  /**\n   * @standalone\n   * The theme configuration.\n   */\n  @Prop({ attribute: 'theme-config' }) readonly themeConfig?: any;\n\n  /**\n   * The selected language.\n   */\n  @Prop({ attribute: 'selected-language' }) readonly selectedLanguage?: LANGUAGE_CODE;\n\n  /**\n   * The participant's name who booked the event / is logged in.\n   */\n  @Prop() readonly confirmedEventInfo!: Partial<NylasEvent>;\n\n  /**\n   * Closing state of the confirmed event card button.\n   */\n  @State() isClosing: boolean = false;\n\n  /**\n   * This event is fired when the close button is clicked on the confirmed event card.\n   */\n  @Event() readonly closeConfirmEventCardClicked!: EventEmitter<{ errorHandler?: (error: NylasSchedulerErrorResponse) => void }>;\n\n  /**\n   * This event is fired when an error occurs.\n   */\n  @Event() readonly confirmedEventCardError!: EventEmitter<NylasSchedulerErrorResponse>;\n\n  @Watch('themeConfig')\n  themeConfigChanged(newThemeConfig: ThemeConfig) {\n    this.applyThemeConfig(newThemeConfig);\n  }\n\n  @Watch('selectedLanguage')\n  selectedLanguageChangedHandler(newVal: LANGUAGE_CODE, oldVal: LANGUAGE_CODE) {\n    if (newVal === oldVal) return;\n    i18next.changeLanguage(newVal);\n  }\n\n  connectedCallback() {\n    debug(`[nylas-confirmed-event-card] Component connected`);\n  }\n\n  async componentWillLoad() {\n    debug(`[nylas-confirmed-event-card] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-confirmed-event-card] Component did load`);\n    if (!this.confirmedEventInfo) {\n      console.warn(`[nylas-confirmed-event-card] No confirmed event info provided, \"confirmedEventInfo\" prop is required.`);\n    }\n    this.applyThemeConfig(this.themeConfig);\n  }\n\n  disconnectedCallback() {\n    debug(`[nylas-confirmed-event-card] Component disconnected`);\n  }\n\n  applyThemeConfig(themeConfig?: ThemeConfig) {\n    if (themeConfig) {\n      for (const [key, value] of Object.entries(themeConfig)) {\n        this.host.style.setProperty(`${key}`, value);\n      }\n    }\n  }\n\n  private handleCloseClicked = () => {\n    this.isClosing = true;\n    const errorHandler = (error: NylasSchedulerErrorResponse) => {\n      this.confirmedEventCardError.emit(error);\n      this.isClosing = false;\n    };\n    this.closeConfirmEventCardClicked.emit({ errorHandler });\n  };\n\n  @RegisterComponent<NylasConfirmedEventCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-confirmed-event-card',\n    stateToProps: new Map([\n      ['scheduler.configSettings', 'configSettings'],\n      ['scheduler.themeConfig', 'themeConfig'],\n      ['scheduler.selectedLanguage', 'selectedLanguage'],\n    ]),\n    eventToProps: {\n      closeConfirmEventCardClicked: async (_: CustomEvent<{ errorHandler?: (error: NylasSchedulerErrorResponse) => void }>, nylasschedulerconnector: NylasSchedulerConnector) => {\n        const result = await nylasschedulerconnector.scheduler.resetConfirm();\n\n        const { errorHandler } = _.detail;\n        if (errorHandler && (!result || 'error' in result)) {\n          errorHandler(result);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host part=\"ncec\">\n        <div class=\"nylas-confirmed-event-card\" part=\"ncec__card\">\n          <div class=\"nylas-confirmed-event-card__calendar-icon\" part=\"ncec__icon\">\n            <calendar-check-icon />\n          </div>\n          <h3 class=\"nylas-confirmed-event-card__title\" part=\"ncec__title\">\n            {i18next.t('confirmedEventCardTitle')}!\n          </h3>\n          <div class=\"nylas-confirmed-event-card__description\" part=\"ncec__description\">\n            {i18next.t('confirmedEventCardDescription')} {this.configSettings?.organizer?.name || 'the participants'}.\n          </div>\n          <div class=\"nylas-confirmed-event-card__cta\">\n            <button-component variant=\"basic\" disabled={this.isClosing} part=\"ncec__button-outline\" onClick={this.handleCloseClicked}>\n              {this.isClosing ? `${i18next.t('closingButton')}...` : `${i18next.t('closeButton')}`}\n            </button-component>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/scheduler/nylas-date-picker/nylas-date-picker.js

@@ -130,7 +130,7 @@ export class NylasDatePicker {
         });
     }
     render() {
-        return (h(Host, { key: '36322bd1badb927a3d8505334c339b220a81c946', part: "ndp" }, h("div", { key: '666e06338a8be95fdf5a18d0d5e1db006ce0623e', class: "nylas-date-picker" }, h("div", { key: '7429e08d3dc984205a07efb8a7a0dc21d8b3b6b2', class: "title", part: "ndp__title" }, this.configSettings?.name ? (h("h1", null, this.configSettings?.name)) : (this.configSettings?.organizer?.name && (h("h1", null, h("person-icon", null), this.configSettings?.organizer?.name || 'Organizer'))), h("p", { key: 'a5b1770d7f39d173a37f4ee627645f43230b83eb' }, h("clock-icon", { key: '383105a9bfdb7e45e414941c06278de8b73e705f' }), this.eventDuration ? convertMinutesToHoursAndMinutes(this.eventDuration) : `- ${i18next.t('time.minutes')}`)), h("div", { key: '91cd7691b593bd8af1bd930f0206cc284826ee83', class: 'header flex-row' }, h("h2", { key: 'c490b7fe8a6a04ba8fda318b41a7ad5db9c13d0c', part: 'ndp__month-header' }, h("strong", { key: 'bfe557291e300cc8ec876d889909168fa5cd798b' }, translateMonth(this.month.toLocaleDateString('en-US', { month: 'long' }).toLowerCase())), "\u00A0", this.month.toLocaleDateString(undefined, { year: 'numeric' })), h("div", { key: 'a19535626041e7cb3550aabd677fd788bf003b03', class: 'pagination' }, h("button", { key: '6174f0128f51c6ad814473425da3e983e1dd80bc', title: "Previous month", onClick: () => this.changeMonth(-1), class: { 'chevron-left': true, 'button': true }, disabled: this.month <= new Date(), part: "ndp__month-button" }, h("chevron-icon", { key: '9c6c965ca7273205229ee6f3918226588b9cceb6' })), h("button", { key: 'd83a846832a897e8a35242093ba01fc04497b0ff', title: "Next month", onClick: () => this.changeMonth(1), class: { 'chevron-right': true, 'button': true }, disabled: this.disableNextMonthButton, part: "ndp__month-button" }, h("chevron-icon", { key: 'b7106b3807f93e73eb86102a7ce4b81997a2c57a' })))), h("div", { key: '3c5809a8f1447005d82a75bc035a52918397a423', class: 'dates' }, [
+        return (h(Host, { key: 'ecd613f2fec98a00bbb10ac6363097ebede0185d', part: "ndp" }, h("div", { key: '33bb461fca297b69b85ab9f8d17cddb51593dde8', class: "nylas-date-picker" }, h("div", { key: '4da1d51d7bb36838923263563c2f6b1331542fda', class: "title", part: "ndp__title" }, this.configSettings?.name ? (h("h1", null, this.configSettings?.name)) : (this.configSettings?.organizer?.name && (h("h1", null, h("person-icon", null), this.configSettings?.organizer?.name || 'Organizer'))), h("p", { key: '8ad906a6b34220b4d35f8dcd1c642d14c3f7293a' }, h("clock-icon", { key: '11d2b21b9ba5fb9a31f9694fc2eaa417b6743957' }), this.eventDuration ? convertMinutesToHoursAndMinutes(this.eventDuration) : `- ${i18next.t('time.minutes')}`)), h("div", { key: '676de20b5616fdbb439567ca27f972040a086b70', class: 'header flex-row' }, h("h2", { key: 'aa60c555eb8bd7b3ef1ee033b8fc1b74f5a78cdb', part: 'ndp__month-header' }, h("strong", { key: '7661ad8cf3c91063617a953aba02c74202910803' }, translateMonth(this.month.toLocaleDateString('en-US', { month: 'long' }).toLowerCase())), "\u00A0", this.month.toLocaleDateString(undefined, { year: 'numeric' })), h("div", { key: 'dc4087fff602efe458a75b542cf845e6c1599532', class: 'pagination' }, h("button", { key: '34754cf95f2645641597a82b66805e1d92e8122d', title: "Previous month", onClick: () => this.changeMonth(-1), class: { 'chevron-left': true, 'button': true }, disabled: this.month <= new Date(), part: "ndp__month-button" }, h("chevron-icon", { key: '376aba646a4910ab430ec239f6ccab083df41334' })), h("button", { key: '01e5e39d56246416bc9270f6a0c2d32202db339a', title: "Next month", onClick: () => this.changeMonth(1), class: { 'chevron-right': true, 'button': true }, disabled: this.disableNextMonthButton, part: "ndp__month-button" }, h("chevron-icon", { key: '492223b45186485d55e403a16d75e08c25a070f5' })))), h("div", { key: 'c506414f7ae93d4b995054afa18a313ce02c2ca6', class: 'dates' }, [
             i18next.t('days.sunday'),
             i18next.t('days.monday'),
             i18next.t('days.tuesday'),
@@ -279,9 +279,15 @@ export class NylasDatePicker {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
+                    "original": "LANGUAGE_CODE",
+                    "resolved": "LANGUAGE_CODE.de | LANGUAGE_CODE.en | LANGUAGE_CODE.es | LANGUAGE_CODE.fr | LANGUAGE_CODE.ja | LANGUAGE_CODE.ko | LANGUAGE_CODE.nl | LANGUAGE_CODE.sv | LANGUAGE_CODE.zh | undefined",
+                    "references": {
+                        "LANGUAGE_CODE": {
+                            "location": "import",
+                            "path": "@/common/constants",
+                            "id": "src/common/constants.ts::LANGUAGE_CODE"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,

package/dist/collection/components/scheduler/nylas-date-picker/nylas-date-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"nylas-date-picker.js","sourceRoot":"","sources":["../../../../src/components/scheduler/nylas-date-picker/nylas-date-picker.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAE,oBAAoB,EAAE,+BAA+B,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,SAAS,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AACrK,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACrG,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAIlC,OAAO,OAAO,MAAM,cAAc,CAAC;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAC7C,OAAO,GAAG,MAAM,kBAAkB,CAAC;AAGnC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;AAClB,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;AAqBvB,MAAM,OAAO,eAAe;;;;;gCA4BoD,IAAI,CAAC,cAAc,EAAE,CAAC,eAAe,EAAE,CAAC,QAAQ;;;;;qBAyBvG,IAAI,CAAC,YAAY,IAAI,IAAI,IAAI,EAAE;qBAK7B,IAAI,CAAC,QAAQ,EAAE;sCAKG,KAAK;uCAKL,EAAE;;IAa7C,qBAAqB,CAAC,iBAAiC;QACrD,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;QACnF,MAAM,qBAAqB,GAAG,iBAAiB,EAAE,SAAS,EAAE,wBAAwB,CAAC;QACrF,IAAI,qBAAqB,KAAK,SAAS,EAAE,CAAC;YACxC,OAAO;QACT,CAAC;QACD,MAAM,OAAO,GAAG,oBAAoB,CAAC,IAAI,IAAI,EAAE,EAAE,qBAAqB,CAAC,CAAC;QACxE,IAAI,OAAO,CAAC,OAAO,EAAE,GAAG,SAAS,CAAC,OAAO,EAAE,EAAE,CAAC;YAC5C,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC;QACrC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,sBAAsB,GAAG,KAAK,CAAC;QACtC,CAAC;IACH,CAAC;IAGD,uBAAuB,CAAC,WAAmB;QACzC,OAAO,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;IACtC,CAAC;IAGD,kBAAkB,CAAC,cAA2B;QAC5C,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;IACxC,CAAC;IAGD,mBAAmB,CAAC,eAAqB;QACvC,IAAI,CAAC,eAAe,IAAI,CAAC,WAAW,CAAC,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;YAClE,IAAI,CAAC,KAAK,GAAG,eAAe,IAAI,IAAI,IAAI,EAAE,CAAC;QAC7C,CAAC;QACD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC/B,CAAC;IAKO,sBAAsB,CAAC,KAAyB,EAAE,cAAsB;QAC9E,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACjC,OAAO,EAAE,CAAC;QACZ,CAAC;QAED,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;YACnB,MAAM,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC;YAC3C,OAAO,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,MAAM,CAAC,KAAK,EAAE,EAAE,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC;QAChE,CAAC,CAAC,CAAC;IACL,CAAC;IAGD,uBAAuB,CAAC,mBAA2B;QACjD,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,eAAe,EAAE,mBAAmB,CAAC,CAAC;IACxG,CAAC;IAGD,sBAAsB,CAAC,kBAAsC;QAC3D,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,sBAAsB,CAAC,kBAAkB,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IACxG,CAAC;IAED,iBAAiB,KAAI,CAAC;IAEtB,oBAAoB,KAAI,CAAC;IAEzB,iBAAiB,KAAI,CAAC;IAEtB,gBAAgB;QACd,KAAK,CAAC,wCAAwC,CAAC,CAAC;QAChD,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACxC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,IAAI,IAAI,IAAI,EAAE,CAAC;QAC7C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC7B,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAC1G,CAAC;IAED,gBAAgB,CAAC,WAAyB;QACxC,IAAI,WAAW,EAAE,CAAC;YAChB,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE,CAAC;gBACvD,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,GAAG,EAAE,EAAE,KAAK,CAAC,CAAC;YAC/C,CAAC;QACH,CAAC;IACH,CAAC;IAMO,QAAQ;QACd,MAAM,cAAc,GAAG,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACrD,MAAM,eAAe,GAAG,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAEvD,OAAO,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,CAAC,eAAe,CAAC,MAAM,EAAE,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,CAAC,GAAG,cAAc,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;IAChJ,CAAC;IAMO,UAAU,CAAC,IAAW;QAC5B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAMO,WAAW,CAAC,MAAc;QAChC,IAAI,CAAC,KAAK,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,MAAM,EAAE,CAAC,CAAC,CAAC;QACnF,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;QACnF,MAAM,qBAAqB,GAAG,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,wBAAwB,CAAC;QACvF,MAAM,OAAO,GAAG,oBAAoB,CAAC,IAAI,IAAI,EAAE,EAAE,qBAAqB,CAAC,CAAC;QACxE,IAAI,OAAO,CAAC,OAAO,EAAE,GAAG,SAAS,CAAC,OAAO,EAAE,EAAE,CAAC;YAC5C,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC;QACrC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,sBAAsB,GAAG,KAAK,CAAC;QACtC,CAAC;QACD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC7B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC;IAEO,UAAU,CAAC,IAAsB,EAAE,YAA8B,EAAE,eAAmC;QAC5G,OAAO,IAAI,IAAI,YAAY,IAAI,SAAS,CAAC,IAAI,EAAE,YAAY,CAAC,IAAI,eAAe,IAAI,eAAe,EAAE,MAAM,GAAG,CAAC,CAAC;IACjH,CAAC;IAEO,UAAU,CAAC,IAAsB;QACvC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,uBAAuB,IAAI,IAAI,CAAC,uBAAuB,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACxF,OAAO,IAAI,CAAC;QACd,CAAC;QAGD,OAAO,CAAC,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE;YAC5C,OAAO,IAAI,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC,WAAW,EAAE,IAAI,IAAI,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,OAAO,EAAE,CAAC;QACtH,CAAC,CAAC,CAAC;IACL,CAAC;IAyBD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,KAAK;YACd,4DAAK,KAAK,EAAC,mBAAmB;gBAC5B,4DAAK,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,YAAY;oBACjC,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,CAAC,CAAC,CAC3B,cAAK,IAAI,CAAC,cAAc,EAAE,IAAI,CAAM,CACrC,CAAC,CAAC,CAAC,CACF,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,IAAI,IAAI,CACtC;wBACE,sBAAe;wBACd,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,IAAI,IAAI,WAAW,CACjD,CACN,CACF;oBACD;wBACE,oEAAc;wBACb,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,+BAA+B,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,EAAE,CAC1G,CACA;gBACN,4DAAK,KAAK,EAAE,iBAAiB;oBAC3B,2DAAI,IAAI,EAAE,mBAAmB;wBAC3B,iEAAS,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,kBAAkB,CAAC,OAAO,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,WAAW,EAAE,CAAC,CAAU;;wBAEzG,IAAI,CAAC,KAAK,CAAC,kBAAkB,CAAC,SAAS,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAC3D;oBACL,4DAAK,KAAK,EAAE,YAAY;wBACtB,+DACE,KAAK,EAAC,gBAAgB,EACtB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,EACnC,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,EAC/C,QAAQ,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,IAAI,EAAE,EAClC,IAAI,EAAC,mBAAmB;4BAExB,sEAAgB,CACT;wBACT,+DACE,KAAK,EAAC,YAAY,EAClB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAClC,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,EAChD,QAAQ,EAAE,IAAI,CAAC,sBAAsB,EACrC,IAAI,EAAC,mBAAmB;4BAExB,sEAAgB,CACT,CACL,CACF;gBAEN,4DAAK,KAAK,EAAE,OAAO;oBAChB;wBACC,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC;wBACxB,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC;wBACxB,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC;wBACzB,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;wBAC3B,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;wBAC1B,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC;wBACxB,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;qBAC3B,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;wBACV,OAAO,CACL,WAAK,KAAK,EAAE,KAAK,EAAE,IAAI,EAAC,UAAU,IAC/B,GAAG,CACA,CACP,CAAC;oBACJ,CAAC,CAAC;oBACD,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE;wBAC1B,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;wBAEzC,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;4BACnB,OAAO,CACL,cACE,QAAQ,QACR,KAAK,EAAE;oCACL,mBAAmB,EAAE,IAAI;oCACzB,eAAe,EAAE,WAAW,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC;iCAC/C,EACD,KAAK,EAAE,EAAE,cAAc,EAAE,GAAG,CAAC,GAAG,EAAE,IAAI,EAAE,EACxC,IAAI,EAAE,+BAA+B,IAEpC,IAAI,CAAC,OAAO,EAAE,CACR,CACV,CAAC;wBACJ,CAAC;wBACD,OAAO,CACL,cACE,KAAK,EAAE;gCACL,MAAM,EAAE,IAAI;gCACZ,UAAU,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,IAAI,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,CAAC,CAAC;gCACnI,aAAa,EAAE,SAAS,CAAC,IAAI,EAAE,IAAI,IAAI,EAAE,CAAC;gCAC1C,eAAe,EAAE,WAAW,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC;6BAC/C,gBACW,IAAI,CAAC,kBAAkB,CAAC,SAAS,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,EACrE,QAAQ,EAAE,UAAU,EACpB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EACpC,IAAI,EAAE,aAAa,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,IAAI,SAAS,CAAC,IAAI,EAAE,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,IAAI,WAAW,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,EAAE,EAAE,IAEjP,IAAI,CAAC,OAAO,EAAE,CACR,CACV,CAAC;oBACJ,CAAC,CAAC,CACE,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAxGC;IAvBC,iBAAiB,CAA0F;QAC1G,IAAI,EAAE,mBAAmB;QACzB,YAAY,EAAE,IAAI,GAAG,CAAC;YACpB,CAAC,2BAA2B,EAAE,iBAAiB,CAAC;YAChD,CAAC,wBAAwB,EAAE,cAAc,CAAC;YAC1C,CAAC,qBAAqB,EAAE,WAAW,CAAC;YACpC,CAAC,0BAA0B,EAAE,gBAAgB,CAAC;YAC9C,CAAC,yBAAyB,EAAE,eAAe,CAAC;YAC5C,CAAC,4BAA4B,EAAE,kBAAkB,CAAC;YAClD,CAAC,uBAAuB,EAAE,aAAa,CAAC;YACxC,CAAC,4BAA4B,EAAE,kBAAkB,CAAC;SACnD,CAAC;QACF,YAAY,EAAE;YACZ,YAAY,EAAE,KAAK,EAAE,KAAwB,EAAE,uBAAgD,EAAE,EAAE;gBACjG,KAAK,CAAC,mBAAmB,EAAE,cAAc,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;gBACzD,uBAAuB,CAAC,SAAS,CAAC,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;YAC7D,CAAC;YACD,YAAY,EAAE,KAAK,EAAE,KAAwB,EAAE,wBAAiD,EAAE,EAAE;gBAClG,KAAK,CAAC,mBAAmB,EAAE,cAAc,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;YAC3D,CAAC;SACF;QACD,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;6CAwGD","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { addDaysToCurrentDate, convertMinutesToHoursAndMinutes, getFirstDayOfMonth, getLastDayOfMonth, isSameDay, isSameMonth, translateMonth } from '@/utils/utils';\nimport { Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { timeDay } from 'd3-time';\nimport { NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { ConfigSettings } from '@/stores/scheduler-store';\nimport i18next from '@/utils/i18n';\nimport { debug } from '@/utils/utils';\nimport { ThemeConfig } from '@nylas/core';\nimport dayjs from 'dayjs';\nimport timezone from 'dayjs/plugin/timezone';\nimport utc from 'dayjs/plugin/utc';\n\n// Initialize dayjs plugins needed for timezone handling\ndayjs.extend(utc);\ndayjs.extend(timezone);\n\n/**\n * The `nylas-date-picker` component is a UI component that allows users to select a date.\n *\n * @part ndp - The date picker host.\n * @part ndp__title - The title.\n * @part ndp__month-header - The month header.\n * @part ndp__month-button - The month button.\n * @part ndp__day - The day.\n * @part ndp__date - The date.\n * @part ndp__date--selected - The selected date.\n * @part ndp__date--current-day - The current day.\n * @part ndp__date--current-month - The dates in the current month.\n * @part ndp__date--disabled - The disabled dates.\n */\n@Component({\n  tag: 'nylas-date-picker',\n  styleUrl: 'nylas-date-picker.scss',\n  shadow: true,\n})\nexport class NylasDatePicker {\n  /**\n   * The host element.\n   * Used to manage the host element of the provider.\n   */\n  @Element() private host!: HTMLNylasDatePickerElement;\n\n  /**\n   * @standalone\n   * The dates that are selectable.\n   */\n  @Prop() selectableDates?: Date[];\n\n  /**\n   * @standalone\n   * The config settings.\n   */\n  @Prop() configSettings?: ConfigSettings;\n\n  /**\n   * @standalone\n   * The theme configuration.\n   */\n  @Prop({ attribute: 'theme-config' }) readonly themeConfig?: any;\n\n  /**\n   * The selected timezone.\n   */\n  @Prop({ attribute: 'selected-timezone' }) readonly selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n  /**\n   * The selected date.\n   */\n  @Prop() selectedDate?: Date;\n\n  /**\n   * The selected language.\n   */\n  @Prop() selectedLanguage?: string;\n\n  /**\n   * The loading state.\n   */\n  @Prop() readonly isLoading?: boolean;\n\n  /**\n   * The event duration.\n   */\n  @Prop() readonly eventDuration?: number;\n\n  /**\n   * The month to display.\n   */\n  @State() month: Date = this.selectedDate || new Date();\n\n  /**\n   * The dates to render.\n   */\n  @State() dates: Date[] = this.getDates();\n\n  /**\n   * The state to disable the next month button.\n   */\n  @State() disableNextMonthButton: boolean = false;\n\n  /**\n   * The state to store the selected dates as per the timezone.\n   */\n  @State() selectableDatesTimezone: Date[] = [];\n\n  /**\n   * This event is fired when a date is selected.\n   */\n  @Event() dateSelected!: EventEmitter<Date>;\n\n  /**\n   * This event is fired when the month is changed.\n   */\n  @Event() monthChanged!: EventEmitter<Date>;\n\n  @Watch('configSettings')\n  configSettingsChanged(newConfigSettings: ConfigSettings) {\n    const nextMonth = new Date(this.month.getFullYear(), this.month.getMonth() + 1, 1);\n    const availableDaysInFuture = newConfigSettings?.scheduler?.available_days_in_future;\n    if (availableDaysInFuture === undefined) {\n      return;\n    }\n    const endDate = addDaysToCurrentDate(new Date(), availableDaysInFuture);\n    if (endDate.getTime() < nextMonth.getTime()) {\n      this.disableNextMonthButton = true;\n    } else {\n      this.disableNextMonthButton = false;\n    }\n  }\n\n  @Watch('selectedLanguage')\n  selectedLanguageChanged(newLanguage: string) {\n    i18next.changeLanguage(newLanguage);\n  }\n\n  @Watch('themeConfig')\n  themeConfigChanged(newThemeConfig: ThemeConfig) {\n    this.applyThemeConfig(newThemeConfig);\n  }\n\n  @Watch('selectedDate')\n  selectedDateChanged(newSelectedDate: Date) {\n    if (!newSelectedDate || !isSameMonth(newSelectedDate, this.month)) {\n      this.month = newSelectedDate || new Date();\n    }\n    this.dates = this.getDates();\n  }\n\n  /**\n   * Helper method to convert dates to the specified timezone, preserving only the date part\n   */\n  private convertDatesToTimezone(dates: Date[] | undefined, targetTimezone: string): Date[] {\n    if (!dates || dates.length === 0) {\n      return [];\n    }\n\n    return dates.map(d => {\n      const tzDate = dayjs(d).tz(targetTimezone);\n      return new Date(tzDate.year(), tzDate.month(), tzDate.date());\n    });\n  }\n\n  @Watch('selectedTimezone')\n  selectedTimezoneChanged(newSelectedTimezone: string) {\n    this.selectableDatesTimezone = this.convertDatesToTimezone(this.selectableDates, newSelectedTimezone);\n  }\n\n  @Watch('selectableDates')\n  selectableDatesChanged(newSelectableDates: Date[] | undefined) {\n    this.selectableDatesTimezone = this.convertDatesToTimezone(newSelectableDates, this.selectedTimezone);\n  }\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  componentWillLoad() {}\n\n  componentDidLoad() {\n    debug(`[nylas-date-picker] Component did load`);\n    this.applyThemeConfig(this.themeConfig);\n    this.month = this.selectedDate || new Date();\n    this.dates = this.getDates();\n    this.selectableDatesTimezone = this.convertDatesToTimezone(this.selectableDates, this.selectedTimezone);\n  }\n\n  applyThemeConfig(themeConfig?: ThemeConfig) {\n    if (themeConfig) {\n      for (const [key, value] of Object.entries(themeConfig)) {\n        this.host.style.setProperty(`${key}`, value);\n      }\n    }\n  }\n\n  /**\n   * Get the dates to render, including the days from the previous and next months.\n   * @returns The dates to render.\n   */\n  private getDates() {\n    const lastDayOfMonth = getLastDayOfMonth(this.month);\n    const firstDayOfMonth = getFirstDayOfMonth(this.month);\n\n    return timeDay.range(timeDay.offset(firstDayOfMonth, -firstDayOfMonth.getDay()), timeDay.offset(lastDayOfMonth, 7 - lastDayOfMonth.getDay()));\n  }\n\n  /**\n   * Select a date.\n   * @param date The date to select.\n   */\n  private selectDate(date?: Date) {\n    this.dateSelected.emit(date);\n  }\n\n  /**\n   * Change the month.\n   * @param change The change in months.\n   */\n  private changeMonth(change: number) {\n    this.month = new Date(this.month.getFullYear(), this.month.getMonth() + change, 1);\n    const nextMonth = new Date(this.month.getFullYear(), this.month.getMonth() + 1, 1);\n    const availableDaysInFuture = this.configSettings?.scheduler?.available_days_in_future;\n    const endDate = addDaysToCurrentDate(new Date(), availableDaysInFuture);\n    if (endDate.getTime() < nextMonth.getTime()) {\n      this.disableNextMonthButton = true;\n    } else {\n      this.disableNextMonthButton = false;\n    }\n    this.dates = this.getDates();\n    this.monthChanged.emit(this.month);\n  }\n\n  private isSelected(date: Date | undefined, selectedDate: Date | undefined, selectableDates: Date[] | undefined) {\n    return date && selectedDate && isSameDay(date, selectedDate) && selectableDates && selectableDates?.length > 0;\n  }\n\n  private isDisabled(date: Date | undefined) {\n    if (!date || !this.selectableDatesTimezone || this.selectableDatesTimezone.length === 0) {\n      return true;\n    }\n\n    // Compare only the date parts (year, month, day), ignoring time\n    return !this.selectableDatesTimezone.some(d => {\n      return date.getFullYear() === d.getFullYear() && date.getMonth() === d.getMonth() && date.getDate() === d.getDate();\n    });\n  }\n\n  @RegisterComponent<NylasDatePicker, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-date-picker',\n    stateToProps: new Map([\n      ['scheduler.selectableDates', 'selectableDates'],\n      ['scheduler.selectedDate', 'selectedDate'],\n      ['scheduler.isLoading', 'isLoading'],\n      ['scheduler.configSettings', 'configSettings'],\n      ['scheduler.eventDuration', 'eventDuration'],\n      ['scheduler.selectedLanguage', 'selectedLanguage'],\n      ['scheduler.themeConfig', 'themeConfig'],\n      ['scheduler.selectedTimezone', 'selectedTimezone'],\n    ]),\n    eventToProps: {\n      dateSelected: async (event: CustomEvent<Date>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        debug('nylas-date-picker', 'dateSelected', event.detail);\n        nylasSchedulerConnector.scheduler.selectDate(event.detail);\n      },\n      monthChanged: async (event: CustomEvent<Date>, _nylasSchedulerConnector: NylasSchedulerConnector) => {\n        debug('nylas-date-picker', 'monthChanged', event.detail);\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host part=\"ndp\">\n        <div class=\"nylas-date-picker\">\n          <div class=\"title\" part=\"ndp__title\">\n            {this.configSettings?.name ? (\n              <h1>{this.configSettings?.name}</h1>\n            ) : (\n              this.configSettings?.organizer?.name && (\n                <h1>\n                  <person-icon />\n                  {this.configSettings?.organizer?.name || 'Organizer'}\n                </h1>\n              )\n            )}\n            <p>\n              <clock-icon />\n              {this.eventDuration ? convertMinutesToHoursAndMinutes(this.eventDuration) : `- ${i18next.t('time.minutes')}`}\n            </p>\n          </div>\n          <div class={'header flex-row'}>\n            <h2 part={'ndp__month-header'}>\n              <strong>{translateMonth(this.month.toLocaleDateString('en-US', { month: 'long' }).toLowerCase())}</strong>\n              &nbsp;\n              {this.month.toLocaleDateString(undefined, { year: 'numeric' })}\n            </h2>\n            <div class={'pagination'}>\n              <button\n                title=\"Previous month\"\n                onClick={() => this.changeMonth(-1)}\n                class={{ 'chevron-left': true, 'button': true }}\n                disabled={this.month <= new Date()}\n                part=\"ndp__month-button\"\n              >\n                <chevron-icon />\n              </button>\n              <button\n                title=\"Next month\"\n                onClick={() => this.changeMonth(1)}\n                class={{ 'chevron-right': true, 'button': true }}\n                disabled={this.disableNextMonthButton}\n                part=\"ndp__month-button\"\n              >\n                <chevron-icon />\n              </button>\n            </div>\n          </div>\n\n          <div class={'dates'}>\n            {[\n              i18next.t('days.sunday'),\n              i18next.t('days.monday'),\n              i18next.t('days.tuesday'),\n              i18next.t('days.wednesday'),\n              i18next.t('days.thursday'),\n              i18next.t('days.friday'),\n              i18next.t('days.saturday'),\n            ].map(day => {\n              return (\n                <div class={'day'} part=\"ndp__day\">\n                  {day}\n                </div>\n              );\n            })}\n            {this.dates.map((date, i) => {\n              const isDisabled = this.isDisabled(date);\n\n              if (this.isLoading) {\n                return (\n                  <button\n                    disabled\n                    class={{\n                      'date day-skeleton': true,\n                      'current-month': isSameMonth(date, this.month),\n                    }}\n                    style={{ animationDelay: `${i * 20}ms` }}\n                    part={`ndp__date ndp__date--disabled`}\n                  >\n                    {date.getDate()}\n                  </button>\n                );\n              }\n              return (\n                <button\n                  class={{\n                    'date': true,\n                    'selected': !!(this.selectedDate && isSameDay(date, this.selectedDate) && this.selectableDates && this.selectableDates?.length > 0),\n                    'current-day': isSameDay(date, new Date()),\n                    'current-month': isSameMonth(date, this.month),\n                  }}\n                  aria-label={date.toLocaleDateString(undefined, { dateStyle: 'full' })}\n                  disabled={isDisabled}\n                  onClick={() => this.selectDate(date)}\n                  part={`ndp__date ${this.isSelected(date, this.selectedDate, this.selectableDates) ? 'ndp__date--selected' : ''} ${isSameDay(date, new Date()) ? 'ndp__date--current-day' : ''} ${isSameMonth(date, this.month) ? 'ndp__date--current-month' : ''}`}\n                >\n                  {date.getDate()}\n                </button>\n              );\n            })}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"nylas-date-picker.js","sourceRoot":"","sources":["../../../../src/components/scheduler/nylas-date-picker/nylas-date-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { addDaysToCurrentDate, convertMinutesToHoursAndMinutes, getFirstDayOfMonth, getLastDayOfMonth, isSameDay, isSameMonth, translateMonth } from '@/utils/utils';\nimport { Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { timeDay } from 'd3-time';\nimport { NylasSchedulerConnector } from '../../..';\nimport { LANGUAGE_CODE } from '@/common/constants';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { ConfigSettings } from '@/stores/scheduler-store';\nimport i18next from '@/utils/i18n';\nimport { debug } from '@/utils/utils';\nimport { ThemeConfig } from '@nylas/core';\nimport dayjs from 'dayjs';\nimport timezone from 'dayjs/plugin/timezone';\nimport utc from 'dayjs/plugin/utc';\n\n// Initialize dayjs plugins needed for timezone handling\ndayjs.extend(utc);\ndayjs.extend(timezone);\n\n/**\n * The `nylas-date-picker` component is a UI component that allows users to select a date.\n *\n * @part ndp - The date picker host.\n * @part ndp__title - The title.\n * @part ndp__month-header - The month header.\n * @part ndp__month-button - The month button.\n * @part ndp__day - The day.\n * @part ndp__date - The date.\n * @part ndp__date--selected - The selected date.\n * @part ndp__date--current-day - The current day.\n * @part ndp__date--current-month - The dates in the current month.\n * @part ndp__date--disabled - The disabled dates.\n */\n@Component({\n  tag: 'nylas-date-picker',\n  styleUrl: 'nylas-date-picker.scss',\n  shadow: true,\n})\nexport class NylasDatePicker {\n  /**\n   * The host element.\n   * Used to manage the host element of the provider.\n   */\n  @Element() private host!: HTMLNylasDatePickerElement;\n\n  /**\n   * @standalone\n   * The dates that are selectable.\n   */\n  @Prop() selectableDates?: Date[];\n\n  /**\n   * @standalone\n   * The config settings.\n   */\n  @Prop() configSettings?: ConfigSettings;\n\n  /**\n   * @standalone\n   * The theme configuration.\n   */\n  @Prop({ attribute: 'theme-config' }) readonly themeConfig?: any;\n\n  /**\n   * The selected timezone.\n   */\n  @Prop({ attribute: 'selected-timezone' }) readonly selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n  /**\n   * The selected date.\n   */\n  @Prop() selectedDate?: Date;\n\n  /**\n   * The selected language.\n   */\n  @Prop() selectedLanguage?: LANGUAGE_CODE;\n\n  /**\n   * The loading state.\n   */\n  @Prop() readonly isLoading?: boolean;\n\n  /**\n   * The event duration.\n   */\n  @Prop() readonly eventDuration?: number;\n\n  /**\n   * The month to display.\n   */\n  @State() month: Date = this.selectedDate || new Date();\n\n  /**\n   * The dates to render.\n   */\n  @State() dates: Date[] = this.getDates();\n\n  /**\n   * The state to disable the next month button.\n   */\n  @State() disableNextMonthButton: boolean = false;\n\n  /**\n   * The state to store the selected dates as per the timezone.\n   */\n  @State() selectableDatesTimezone: Date[] = [];\n\n  /**\n   * This event is fired when a date is selected.\n   */\n  @Event() dateSelected!: EventEmitter<Date>;\n\n  /**\n   * This event is fired when the month is changed.\n   */\n  @Event() monthChanged!: EventEmitter<Date>;\n\n  @Watch('configSettings')\n  configSettingsChanged(newConfigSettings: ConfigSettings) {\n    const nextMonth = new Date(this.month.getFullYear(), this.month.getMonth() + 1, 1);\n    const availableDaysInFuture = newConfigSettings?.scheduler?.available_days_in_future;\n    if (availableDaysInFuture === undefined) {\n      return;\n    }\n    const endDate = addDaysToCurrentDate(new Date(), availableDaysInFuture);\n    if (endDate.getTime() < nextMonth.getTime()) {\n      this.disableNextMonthButton = true;\n    } else {\n      this.disableNextMonthButton = false;\n    }\n  }\n\n  @Watch('selectedLanguage')\n  selectedLanguageChanged(newLanguage: string) {\n    i18next.changeLanguage(newLanguage);\n  }\n\n  @Watch('themeConfig')\n  themeConfigChanged(newThemeConfig: ThemeConfig) {\n    this.applyThemeConfig(newThemeConfig);\n  }\n\n  @Watch('selectedDate')\n  selectedDateChanged(newSelectedDate: Date) {\n    if (!newSelectedDate || !isSameMonth(newSelectedDate, this.month)) {\n      this.month = newSelectedDate || new Date();\n    }\n    this.dates = this.getDates();\n  }\n\n  /**\n   * Helper method to convert dates to the specified timezone, preserving only the date part\n   */\n  private convertDatesToTimezone(dates: Date[] | undefined, targetTimezone: string): Date[] {\n    if (!dates || dates.length === 0) {\n      return [];\n    }\n\n    return dates.map(d => {\n      const tzDate = dayjs(d).tz(targetTimezone);\n      return new Date(tzDate.year(), tzDate.month(), tzDate.date());\n    });\n  }\n\n  @Watch('selectedTimezone')\n  selectedTimezoneChanged(newSelectedTimezone: string) {\n    this.selectableDatesTimezone = this.convertDatesToTimezone(this.selectableDates, newSelectedTimezone);\n  }\n\n  @Watch('selectableDates')\n  selectableDatesChanged(newSelectableDates: Date[] | undefined) {\n    this.selectableDatesTimezone = this.convertDatesToTimezone(newSelectableDates, this.selectedTimezone);\n  }\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  componentWillLoad() {}\n\n  componentDidLoad() {\n    debug(`[nylas-date-picker] Component did load`);\n    this.applyThemeConfig(this.themeConfig);\n    this.month = this.selectedDate || new Date();\n    this.dates = this.getDates();\n    this.selectableDatesTimezone = this.convertDatesToTimezone(this.selectableDates, this.selectedTimezone);\n  }\n\n  applyThemeConfig(themeConfig?: ThemeConfig) {\n    if (themeConfig) {\n      for (const [key, value] of Object.entries(themeConfig)) {\n        this.host.style.setProperty(`${key}`, value);\n      }\n    }\n  }\n\n  /**\n   * Get the dates to render, including the days from the previous and next months.\n   * @returns The dates to render.\n   */\n  private getDates() {\n    const lastDayOfMonth = getLastDayOfMonth(this.month);\n    const firstDayOfMonth = getFirstDayOfMonth(this.month);\n\n    return timeDay.range(timeDay.offset(firstDayOfMonth, -firstDayOfMonth.getDay()), timeDay.offset(lastDayOfMonth, 7 - lastDayOfMonth.getDay()));\n  }\n\n  /**\n   * Select a date.\n   * @param date The date to select.\n   */\n  private selectDate(date?: Date) {\n    this.dateSelected.emit(date);\n  }\n\n  /**\n   * Change the month.\n   * @param change The change in months.\n   */\n  private changeMonth(change: number) {\n    this.month = new Date(this.month.getFullYear(), this.month.getMonth() + change, 1);\n    const nextMonth = new Date(this.month.getFullYear(), this.month.getMonth() + 1, 1);\n    const availableDaysInFuture = this.configSettings?.scheduler?.available_days_in_future;\n    const endDate = addDaysToCurrentDate(new Date(), availableDaysInFuture);\n    if (endDate.getTime() < nextMonth.getTime()) {\n      this.disableNextMonthButton = true;\n    } else {\n      this.disableNextMonthButton = false;\n    }\n    this.dates = this.getDates();\n    this.monthChanged.emit(this.month);\n  }\n\n  private isSelected(date: Date | undefined, selectedDate: Date | undefined, selectableDates: Date[] | undefined) {\n    return date && selectedDate && isSameDay(date, selectedDate) && selectableDates && selectableDates?.length > 0;\n  }\n\n  private isDisabled(date: Date | undefined) {\n    if (!date || !this.selectableDatesTimezone || this.selectableDatesTimezone.length === 0) {\n      return true;\n    }\n\n    // Compare only the date parts (year, month, day), ignoring time\n    return !this.selectableDatesTimezone.some(d => {\n      return date.getFullYear() === d.getFullYear() && date.getMonth() === d.getMonth() && date.getDate() === d.getDate();\n    });\n  }\n\n  @RegisterComponent<NylasDatePicker, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-date-picker',\n    stateToProps: new Map([\n      ['scheduler.selectableDates', 'selectableDates'],\n      ['scheduler.selectedDate', 'selectedDate'],\n      ['scheduler.isLoading', 'isLoading'],\n      ['scheduler.configSettings', 'configSettings'],\n      ['scheduler.eventDuration', 'eventDuration'],\n      ['scheduler.selectedLanguage', 'selectedLanguage'],\n      ['scheduler.themeConfig', 'themeConfig'],\n      ['scheduler.selectedTimezone', 'selectedTimezone'],\n    ]),\n    eventToProps: {\n      dateSelected: async (event: CustomEvent<Date>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        debug('nylas-date-picker', 'dateSelected', event.detail);\n        nylasSchedulerConnector.scheduler.selectDate(event.detail);\n      },\n      monthChanged: async (event: CustomEvent<Date>, _nylasSchedulerConnector: NylasSchedulerConnector) => {\n        debug('nylas-date-picker', 'monthChanged', event.detail);\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host part=\"ndp\">\n        <div class=\"nylas-date-picker\">\n          <div class=\"title\" part=\"ndp__title\">\n            {this.configSettings?.name ? (\n              <h1>{this.configSettings?.name}</h1>\n            ) : (\n              this.configSettings?.organizer?.name && (\n                <h1>\n                  <person-icon />\n                  {this.configSettings?.organizer?.name || 'Organizer'}\n                </h1>\n              )\n            )}\n            <p>\n              <clock-icon />\n              {this.eventDuration ? convertMinutesToHoursAndMinutes(this.eventDuration) : `- ${i18next.t('time.minutes')}`}\n            </p>\n          </div>\n          <div class={'header flex-row'}>\n            <h2 part={'ndp__month-header'}>\n              <strong>{translateMonth(this.month.toLocaleDateString('en-US', { month: 'long' }).toLowerCase())}</strong>\n              &nbsp;\n              {this.month.toLocaleDateString(undefined, { year: 'numeric' })}\n            </h2>\n            <div class={'pagination'}>\n              <button\n                title=\"Previous month\"\n                onClick={() => this.changeMonth(-1)}\n                class={{ 'chevron-left': true, 'button': true }}\n                disabled={this.month <= new Date()}\n                part=\"ndp__month-button\"\n              >\n                <chevron-icon />\n              </button>\n              <button\n                title=\"Next month\"\n                onClick={() => this.changeMonth(1)}\n                class={{ 'chevron-right': true, 'button': true }}\n                disabled={this.disableNextMonthButton}\n                part=\"ndp__month-button\"\n              >\n                <chevron-icon />\n              </button>\n            </div>\n          </div>\n\n          <div class={'dates'}>\n            {[\n              i18next.t('days.sunday'),\n              i18next.t('days.monday'),\n              i18next.t('days.tuesday'),\n              i18next.t('days.wednesday'),\n              i18next.t('days.thursday'),\n              i18next.t('days.friday'),\n              i18next.t('days.saturday'),\n            ].map(day => {\n              return (\n                <div class={'day'} part=\"ndp__day\">\n                  {day}\n                </div>\n              );\n            })}\n            {this.dates.map((date, i) => {\n              const isDisabled = this.isDisabled(date);\n\n              if (this.isLoading) {\n                return (\n                  <button\n                    disabled\n                    class={{\n                      'date day-skeleton': true,\n                      'current-month': isSameMonth(date, this.month),\n                    }}\n                    style={{ animationDelay: `${i * 20}ms` }}\n                    part={`ndp__date ndp__date--disabled`}\n                  >\n                    {date.getDate()}\n                  </button>\n                );\n              }\n              return (\n                <button\n                  class={{\n                    'date': true,\n                    'selected': !!(this.selectedDate && isSameDay(date, this.selectedDate) && this.selectableDates && this.selectableDates?.length > 0),\n                    'current-day': isSameDay(date, new Date()),\n                    'current-month': isSameMonth(date, this.month),\n                  }}\n                  aria-label={date.toLocaleDateString(undefined, { dateStyle: 'full' })}\n                  disabled={isDisabled}\n                  onClick={() => this.selectDate(date)}\n                  part={`ndp__date ${this.isSelected(date, this.selectedDate, this.selectableDates) ? 'ndp__date--selected' : ''} ${isSameDay(date, new Date()) ? 'ndp__date--current-day' : ''} ${isSameMonth(date, this.month) ? 'ndp__date--current-month' : ''}`}\n                >\n                  {date.getDate()}\n                </button>\n              );\n            })}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/scheduler/nylas-organizer-confirmation-card/nylas-organizer-confirmation-card.js

@@ -43,6 +43,11 @@ export class NylasOrganizerConfirmationCard {
     themeConfigChanged(newThemeConfig) {
         this.applyThemeConfig(newThemeConfig);
     }
+    selectedLanguageChangedHandler(newVal, oldVal) {
+        if (newVal === oldVal)
+            return;
+        i18next.changeLanguage(newVal);
+    }
     connectedCallback() { }
     disconnectedCallback() { }
     async componentWillLoad() {
@@ -63,9 +68,9 @@ export class NylasOrganizerConfirmationCard {
         this.action = null;
     }
     render() {
-        return (h(Host, { key: 'ea028ee518207be98291286cc0a7643be3fb944d', part: "nmcc" }, h("div", { key: '43b3b94748e512be15acb93ed9d0125c55fa5c95', class: "event-card-wrapper", part: "nmccc__card" }, h("div", { key: 'd95beee7809ee3879cd1ce400de50f351ecf558f', class: "calendar-icon" }, h("calendar-check-icon", { key: '119f6e93c66606f7deb7df04978cdeedeebc351a' })), h("div", { key: '1fd6e30323bac94800e3b9f66602bff04a677a5c', class: "booked-event-header" }, h("h2", { key: '35a048d55fcb004f1b9474b36fa113c27f3be475', slot: "card-title", part: "nmcc__title" }, !!this.organizerConfirmationBookingId && `${i18next.t('bookingPendingTitle')}!`)), h("div", { key: 'deaba7be7cd3e7715eda8b386e26c6a3a57dcf4d', class: "manage-booking-description" }, h("p", { key: 'fbbfbbcac7daeca983ee8fff5503395e6b1794f7' }, i18next.t('bookingPendingnDescription'))), h("div", { key: 'baa99e33655bc7a7f87552e843cf104dce094699', class: {
+        return (h(Host, { key: '685c64fd73ed2cd97647ddabb84201e0f79ea8cf', part: "nmcc" }, h("div", { key: '70e4b4ae0a3b4df1ced7f0629baf088786e10da7', class: "event-card-wrapper", part: "nmccc__card" }, h("div", { key: '4bab8a23c09d2c73fd57c3fd320ddc60bcd4ad3f', class: "calendar-icon" }, h("calendar-check-icon", { key: '20a288c36cdf0532b4fb8520e25057e05bbb9c67' })), h("div", { key: '23fd0069fe2805be74da6b1fb9c0b2a90a41f004', class: "booked-event-header" }, h("h2", { key: 'ebf3b7a83f62844fc7afcb34d80b7a19162424bf', slot: "card-title", part: "nmcc__title" }, !!this.organizerConfirmationBookingId && `${i18next.t('bookingPendingTitle')}!`)), h("div", { key: '5b1736ec457c881496302a1e62cd8ebe6695c1dc', class: "manage-booking-description" }, h("p", { key: '97199b19d7bc741afe565733fa112fbc66308c75' }, i18next.t('bookingPendingnDescription'))), h("div", { key: 'e305f35b16ec685bb9af4cb9f66d5e43db4edf9b', class: {
                 footer: true,
-            } }, h("button-component", { key: 'a9a43d43cbe27235f9cec4a4e05913917d856455', variant: 'destructive', onClick: this.handleRejectBookingButtonClicked, isLoading: this.isLoading && this.action === 'reject', part: "nmcc__button-outline nmcc__cancel-cta" }, `${i18next.t('rejectBookingButton')}`), h("button-component", { key: 'b3cbfad56b7bf732cf76643c44df06f2817a57f8', variant: 'basic', onClick: this.handleConfirmBookingButtonClicked, isLoading: this.isLoading && this.action === 'confirm', part: "nmcc__button-outline nmcc__reschedule-cta" }, `${i18next.t('confirmBookingButton')}`)))));
+            } }, h("button-component", { key: 'a25bdb447e29fc415f0381a8ba73a36937fd9435', variant: 'destructive', onClick: this.handleRejectBookingButtonClicked, isLoading: this.isLoading && this.action === 'reject', part: "nmcc__button-outline nmcc__cancel-cta" }, `${i18next.t('rejectBookingButton')}`), h("button-component", { key: 'ac814b5239c359decd43506b7981ac8d975d5416', variant: 'basic', onClick: this.handleConfirmBookingButtonClicked, isLoading: this.isLoading && this.action === 'confirm', part: "nmcc__button-outline nmcc__reschedule-cta" }, `${i18next.t('confirmBookingButton')}`)))));
     }
     static get is() { return "nylas-organizer-confirmation-card"; }
     static get encapsulation() { return "shadow"; }
@@ -282,6 +287,9 @@ export class NylasOrganizerConfirmationCard {
         return [{
                 "propName": "themeConfig",
                 "methodName": "themeConfigChanged"
+            }, {
+                "propName": "selectedLanguage",
+                "methodName": "selectedLanguageChangedHandler"
             }];
     }
 }

package/dist/collection/components/scheduler/nylas-organizer-confirmation-card/nylas-organizer-confirmation-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"nylas-organizer-confirmation-card.js","sourceRoot":"","sources":["../../../../src/components/scheduler/nylas-organizer-confirmation-card/nylas-organizer-confirmation-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { Component, Element, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { NylasSchedulerConnector } from '../../..';\nimport { ConfigSettings } from '@/stores/scheduler-store';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { debug } from '@/utils/utils';\nimport { Event } from '@stencil/core';\nimport { NylasSchedulerErrorResponse, ThemeConfig } from '@nylas/core';\nimport i18next from '@/utils/i18n';\n\n/**\n * The `nylas-organizer-confirmation-card` component is a UI component that displays the booked event card.\n *\n * @part nmcc - The booked event card host.\n * @part nmcc__card - The booked event card.\n * @part nmcc__title - The title of the booked event card.\n * @part nmcc__description - The description of the booked event card.\n * @part nmcc__button-outline - The cancel & reschedule button CTA.\n * @part nmcc__cancel-cta - The cancel button CTA.\n * @part nmcc__reschedule-cta - The reschedule button CTA.\n */\n@Component({\n  tag: 'nylas-organizer-confirmation-card',\n  styleUrl: 'nylas-organizer-confirmation-card.scss',\n  shadow: true,\n})\nexport class NylasOrganizerConfirmationCard {\n  /**\n   * The host element.\n   */\n  @Element() host!: HTMLNylasOrganizerConfirmationCardElement;\n\n  /**\n   * @standalone\n   * The config settings for the scheduler.\n   */\n  @Prop() readonly configSettings?: ConfigSettings;\n\n  /**\n   * @standalone\n   * The loading state prop. Used to display loading state when fetching availability.\n   */\n  @Prop() readonly isLoading?: boolean;\n\n  /**\n   * @standalone\n   * The theme configuration.\n   */\n  @Prop({ attribute: 'theme-config' }) readonly themeConfig?: any;\n\n  /**\n   * Booking flow type.\n   */\n  @Prop() readonly organizerConfirmationBookingId?: string;\n\n  /**\n   * The selected language.\n   */\n  @Prop({ attribute: 'selected-language' }) readonly selectedLanguage: string = navigator.language;\n\n  /**\n   * The state to identify which action is being performed.\n   */\n  @State() action: 'confirm' | 'reject' | null = null;\n\n  /**\n   * Reject booking button clicked event.\n   */\n  @Event() readonly rejectBookingButtonClicked!: EventEmitter<{ bookingId: string; host: HTMLNylasOrganizerConfirmationCardElement }>;\n\n  /**\n   * Reschedule button clicked event.\n   * */\n  @Event() readonly confirmBookingButtonClicked!: EventEmitter<{\n    bookingId: string;\n    host: HTMLNylasOrganizerConfirmationCardElement;\n    errorHandler?: (error: NylasSchedulerErrorResponse) => void;\n  }>;\n\n  /**\n   * This event is fired when an error occurs while rescheduling the booking.\n   */\n  @Event() readonly confirmBookingError!: EventEmitter<NylasSchedulerErrorResponse>;\n\n  @Watch('themeConfig')\n  themeConfigChanged(newThemeConfig: ThemeConfig) {\n    this.applyThemeConfig(newThemeConfig);\n  }\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  async componentWillLoad() {\n    debug(`[nylas-organizer-confirmation-card] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-organizer-confirmation-card] Component did load`);\n    this.applyThemeConfig(this.themeConfig);\n  }\n\n  applyThemeConfig(themeConfig?: ThemeConfig) {\n    if (themeConfig) {\n      for (const [key, value] of Object.entries(themeConfig)) {\n        this.host.style.setProperty(`${key}`, value);\n      }\n    }\n  }\n\n  private handleConfirmBookingButtonClicked = () => {\n    this.action = 'confirm';\n    const errorHandler = (error: NylasSchedulerErrorResponse) => {\n      this.confirmBookingError.emit(error);\n    };\n    if (this.organizerConfirmationBookingId && !this.isLoading) {\n      this.confirmBookingButtonClicked.emit({ bookingId: this.organizerConfirmationBookingId, host: this.host, errorHandler });\n    }\n  };\n\n  private handleRejectBookingButtonClicked = () => {\n    this.action = 'reject';\n    if (this.organizerConfirmationBookingId && !this.isLoading) {\n      this.rejectBookingButtonClicked.emit({ bookingId: this.organizerConfirmationBookingId, host: this.host });\n    }\n  };\n\n  @Method()\n  async resetAction() {\n    this.action = null;\n  }\n\n  @RegisterComponent<NylasOrganizerConfirmationCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-organizer-confirmation-card',\n    stateToProps: new Map([\n      ['scheduler.organizerConfirmationBookingId', 'organizerConfirmationBookingId'],\n      ['scheduler.configSettings', 'configSettings'],\n      ['scheduler.isLoading', 'isLoading'],\n      ['scheduler.selectedLanguage', 'selectedLanguage'],\n      ['scheduler.themeConfig', 'themeConfig'],\n    ]),\n    eventToProps: {\n      rejectBookingButtonClicked: async (\n        event: CustomEvent<{ bookingId: string; host: HTMLNylasOrganizerConfirmationCardElement }>,\n        nylasSchedulerConnector: NylasSchedulerConnector,\n      ) => {\n        nylasSchedulerConnector.scheduler.setReject(event.detail.bookingId);\n      },\n      confirmBookingButtonClicked: async (\n        event: CustomEvent<{ bookingId: string; host: HTMLNylasOrganizerConfirmationCardElement; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>,\n        nylasSchedulerConnector: NylasSchedulerConnector,\n      ) => {\n        const { host } = event.detail;\n        const result = await nylasSchedulerConnector.scheduler.updateBooking({\n          bookingId: event.detail.bookingId,\n          status: 'confirmed',\n        });\n        const { errorHandler } = event.detail;\n        if (errorHandler && (!result || 'error' in result)) {\n          errorHandler(result);\n        }\n        await host.resetAction();\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host part=\"nmcc\">\n        <div class=\"event-card-wrapper\" part=\"nmccc__card\">\n          <div class=\"calendar-icon\">\n            <calendar-check-icon />\n          </div>\n          <div class=\"booked-event-header\">\n            <h2 slot=\"card-title\" part=\"nmcc__title\">\n              {!!this.organizerConfirmationBookingId && `${i18next.t('bookingPendingTitle')}!`}\n            </h2>\n          </div>\n          <div class=\"manage-booking-description\">\n            <p>{i18next.t('bookingPendingnDescription')}</p>\n          </div>\n          <div\n            class={{\n              footer: true,\n            }}\n          >\n            <button-component\n              variant={'destructive'}\n              onClick={this.handleRejectBookingButtonClicked}\n              isLoading={this.isLoading && this.action === 'reject'}\n              part=\"nmcc__button-outline nmcc__cancel-cta\"\n            >\n              {`${i18next.t('rejectBookingButton')}`}\n            </button-component>\n            <button-component\n              variant={'basic'}\n              onClick={this.handleConfirmBookingButtonClicked}\n              isLoading={this.isLoading && this.action === 'confirm'}\n              part=\"nmcc__button-outline nmcc__reschedule-cta\"\n            >\n              {`${i18next.t('confirmBookingButton')}`}\n            </button-component>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"nylas-organizer-confirmation-card.js","sourceRoot":"","sources":["../../../../src/components/scheduler/nylas-organizer-confirmation-card/nylas-organizer-confirmation-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { Component, Element, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { NylasSchedulerConnector } from '../../..';\nimport { LANGUAGE_CODE } from '@/common/constants';\nimport { ConfigSettings } from '@/stores/scheduler-store';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { debug } from '@/utils/utils';\nimport { Event } from '@stencil/core';\nimport { NylasSchedulerErrorResponse, ThemeConfig } from '@nylas/core';\nimport i18next from '@/utils/i18n';\n\n/**\n * The `nylas-organizer-confirmation-card` component is a UI component that displays the booked event card.\n *\n * @part nmcc - The booked event card host.\n * @part nmcc__card - The booked event card.\n * @part nmcc__title - The title of the booked event card.\n * @part nmcc__description - The description of the booked event card.\n * @part nmcc__button-outline - The cancel & reschedule button CTA.\n * @part nmcc__cancel-cta - The cancel button CTA.\n * @part nmcc__reschedule-cta - The reschedule button CTA.\n */\n@Component({\n  tag: 'nylas-organizer-confirmation-card',\n  styleUrl: 'nylas-organizer-confirmation-card.scss',\n  shadow: true,\n})\nexport class NylasOrganizerConfirmationCard {\n  /**\n   * The host element.\n   */\n  @Element() host!: HTMLNylasOrganizerConfirmationCardElement;\n\n  /**\n   * @standalone\n   * The config settings for the scheduler.\n   */\n  @Prop() readonly configSettings?: ConfigSettings;\n\n  /**\n   * @standalone\n   * The loading state prop. Used to display loading state when fetching availability.\n   */\n  @Prop() readonly isLoading?: boolean;\n\n  /**\n   * @standalone\n   * The theme configuration.\n   */\n  @Prop({ attribute: 'theme-config' }) readonly themeConfig?: any;\n\n  /**\n   * Booking flow type.\n   */\n  @Prop() readonly organizerConfirmationBookingId?: string;\n\n  /**\n   * The selected language.\n   */\n  @Prop({ attribute: 'selected-language' }) readonly selectedLanguage: string = navigator.language;\n\n  /**\n   * The state to identify which action is being performed.\n   */\n  @State() action: 'confirm' | 'reject' | null = null;\n\n  /**\n   * Reject booking button clicked event.\n   */\n  @Event() readonly rejectBookingButtonClicked!: EventEmitter<{ bookingId: string; host: HTMLNylasOrganizerConfirmationCardElement }>;\n\n  /**\n   * Reschedule button clicked event.\n   * */\n  @Event() readonly confirmBookingButtonClicked!: EventEmitter<{\n    bookingId: string;\n    host: HTMLNylasOrganizerConfirmationCardElement;\n    errorHandler?: (error: NylasSchedulerErrorResponse) => void;\n  }>;\n\n  /**\n   * This event is fired when an error occurs while rescheduling the booking.\n   */\n  @Event() readonly confirmBookingError!: EventEmitter<NylasSchedulerErrorResponse>;\n\n  @Watch('themeConfig')\n  themeConfigChanged(newThemeConfig: ThemeConfig) {\n    this.applyThemeConfig(newThemeConfig);\n  }\n\n  @Watch('selectedLanguage')\n  selectedLanguageChangedHandler(newVal: LANGUAGE_CODE, oldVal: LANGUAGE_CODE) {\n    if (newVal === oldVal) return;\n    i18next.changeLanguage(newVal);\n  }\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  async componentWillLoad() {\n    debug(`[nylas-organizer-confirmation-card] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-organizer-confirmation-card] Component did load`);\n    this.applyThemeConfig(this.themeConfig);\n  }\n\n  applyThemeConfig(themeConfig?: ThemeConfig) {\n    if (themeConfig) {\n      for (const [key, value] of Object.entries(themeConfig)) {\n        this.host.style.setProperty(`${key}`, value);\n      }\n    }\n  }\n\n  private handleConfirmBookingButtonClicked = () => {\n    this.action = 'confirm';\n    const errorHandler = (error: NylasSchedulerErrorResponse) => {\n      this.confirmBookingError.emit(error);\n    };\n    if (this.organizerConfirmationBookingId && !this.isLoading) {\n      this.confirmBookingButtonClicked.emit({ bookingId: this.organizerConfirmationBookingId, host: this.host, errorHandler });\n    }\n  };\n\n  private handleRejectBookingButtonClicked = () => {\n    this.action = 'reject';\n    if (this.organizerConfirmationBookingId && !this.isLoading) {\n      this.rejectBookingButtonClicked.emit({ bookingId: this.organizerConfirmationBookingId, host: this.host });\n    }\n  };\n\n  @Method()\n  async resetAction() {\n    this.action = null;\n  }\n\n  @RegisterComponent<NylasOrganizerConfirmationCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-organizer-confirmation-card',\n    stateToProps: new Map([\n      ['scheduler.organizerConfirmationBookingId', 'organizerConfirmationBookingId'],\n      ['scheduler.configSettings', 'configSettings'],\n      ['scheduler.isLoading', 'isLoading'],\n      ['scheduler.selectedLanguage', 'selectedLanguage'],\n      ['scheduler.themeConfig', 'themeConfig'],\n    ]),\n    eventToProps: {\n      rejectBookingButtonClicked: async (\n        event: CustomEvent<{ bookingId: string; host: HTMLNylasOrganizerConfirmationCardElement }>,\n        nylasSchedulerConnector: NylasSchedulerConnector,\n      ) => {\n        nylasSchedulerConnector.scheduler.setReject(event.detail.bookingId);\n      },\n      confirmBookingButtonClicked: async (\n        event: CustomEvent<{ bookingId: string; host: HTMLNylasOrganizerConfirmationCardElement; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>,\n        nylasSchedulerConnector: NylasSchedulerConnector,\n      ) => {\n        const { host } = event.detail;\n        const result = await nylasSchedulerConnector.scheduler.updateBooking({\n          bookingId: event.detail.bookingId,\n          status: 'confirmed',\n        });\n        const { errorHandler } = event.detail;\n        if (errorHandler && (!result || 'error' in result)) {\n          errorHandler(result);\n        }\n        await host.resetAction();\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host part=\"nmcc\">\n        <div class=\"event-card-wrapper\" part=\"nmccc__card\">\n          <div class=\"calendar-icon\">\n            <calendar-check-icon />\n          </div>\n          <div class=\"booked-event-header\">\n            <h2 slot=\"card-title\" part=\"nmcc__title\">\n              {!!this.organizerConfirmationBookingId && `${i18next.t('bookingPendingTitle')}!`}\n            </h2>\n          </div>\n          <div class=\"manage-booking-description\">\n            <p>{i18next.t('bookingPendingnDescription')}</p>\n          </div>\n          <div\n            class={{\n              footer: true,\n            }}\n          >\n            <button-component\n              variant={'destructive'}\n              onClick={this.handleRejectBookingButtonClicked}\n              isLoading={this.isLoading && this.action === 'reject'}\n              part=\"nmcc__button-outline nmcc__cancel-cta\"\n            >\n              {`${i18next.t('rejectBookingButton')}`}\n            </button-component>\n            <button-component\n              variant={'basic'}\n              onClick={this.handleConfirmBookingButtonClicked}\n              isLoading={this.isLoading && this.action === 'confirm'}\n              part=\"nmcc__button-outline nmcc__reschedule-cta\"\n            >\n              {`${i18next.t('confirmBookingButton')}`}\n            </button-component>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/scheduler/nylas-scheduling/nylas-scheduling.css

@@ -383,6 +383,19 @@ button-component#report-issue {
   left: 16px;
 }
 
+.language-feedback-container {
+  width: auto;
+  position: absolute;
+  bottom: 4px;
+  left: 16px;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.language-feedback-container button-component#report-issue {
+  position: initial;
+}
+
 nylas-feedback-form {
   position: absolute;
   top: 0;