@nylas/web-elements 2.0.1 → 2.0.2

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

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { R as RegisterComponent } from './register-component.js';
-import { a as debug, n as capitalizeFirstLetter, o as formatBookedEventDate } from './utils.js';
+import { b as instance, a as debug, n as capitalizeFirstLetter, o as formatBookedEventDate } from './utils.js';
 import { a as LANGUAGE_CODE_TO_LOCALE_MAP, T as TIMEZONE_MAP } from './constants.js';
 import { d as defineCustomElement$2 } from './calendar.js';
 import { d as defineCustomElement$1 } from './globe.js';
@@ -39,6 +39,11 @@ const NylasSelectedEventCard = proxyCustomElement(class NylasSelectedEventCard e
     themeConfigChanged(newThemeConfig) {
         this.applyThemeConfig(newThemeConfig);
     }
+    selectedLanguageChangedHandler(newVal, oldVal) {
+        if (newVal === oldVal)
+            return;
+        instance.changeLanguage(newVal);
+    }
     connectedCallback() { }
     disconnectedCallback() { }
     async componentWillLoad() {
@@ -71,13 +76,14 @@ const NylasSelectedEventCard = proxyCustomElement(class NylasSelectedEventCard e
         }
     }
     render() {
-        return (h(Host, { key: '22b7e4f0f55d7a75188ebd3e8cc009497ad5a598', part: "nsec" }, h("div", { key: '0082bd129fe4704e4bf9bcc82ab401f7c50237fe', class: "event-card", part: "nsec__card" }, h("div", { key: '37093be5b192f8a8a533cb677b432df2cec80d14', class: "calendar-icon", part: "nsec__icon" }, h("calendar-icon", { key: '253a63fa567065c7a12f6fc8b82333568b52b777' })), h("div", { key: 'a2d5218bd85c6f94652b0f24a11e68f53a8920d3', class: "nylas-selected-event-card__date", part: "nsec__date" }, this.selectedDate
+        return (h(Host, { key: '94fd07366e885e81fb62049c5a44fe6679897aba', part: "nsec" }, h("div", { key: '8ca223250ff59a898eae64b4eaf1ad24e690d3a7', class: "event-card", part: "nsec__card" }, h("div", { key: '77c0fbd4495f0811e5bb05ea95f59d4b2bad90af', class: "calendar-icon", part: "nsec__icon" }, h("calendar-icon", { key: '3c1a395ec15145153c3d0d4b4986aea9a7943ddf' })), h("div", { key: '1c5ed82612ce165f89bd240b21482c916dbf166b', class: "nylas-selected-event-card__date", part: "nsec__date" }, this.selectedDate
             ? capitalizeFirstLetter(formatBookedEventDate(this.selectedTimeslot?.start_time, this.selectedTimezone, LANGUAGE_CODE_TO_LOCALE_MAP[this.selectedLanguage || 'en']))
-            : '-'), h("div", { key: '2f11d6deedb50cb0d7b3e9791088266e06cdca1e', class: "nylas-selected-event-card__time", part: "nsec__time" }, this.startTime, " - ", this.endTime)), h("div", { key: '634bd96488b5b1a51064c9bf015b054648f43011', class: "event-timezone", part: "nsec__timezone" }, h("globe-icon", { key: 'b327dfa7747116da0ab29ddebcb6d20c82a0a80b' }), TIMEZONE_MAP[this.selectedTimezone])));
+            : '-'), h("div", { key: 'e62af1aba1c260d178f1cc95f3405e94448cdf29', class: "nylas-selected-event-card__time", part: "nsec__time" }, this.startTime, " - ", this.endTime)), h("div", { key: '6eea1eca90bde0bb49a747ad8ed3a5ca57971db4', class: "event-timezone", part: "nsec__timezone" }, h("globe-icon", { key: 'feac1b95d2177a39f84648ec0e8356026ebc9ef7' }), TIMEZONE_MAP[this.selectedTimezone])));
     }
     get host() { return this; }
     static get watchers() { return {
-        "themeConfig": ["themeConfigChanged"]
+        "themeConfig": ["themeConfigChanged"],
+        "selectedLanguage": ["selectedLanguageChangedHandler"]
     }; }
     static get style() { return NylasSelectedEventCardStyle0; }
 }, [1, "nylas-selected-event-card", {
@@ -90,7 +96,8 @@ const NylasSelectedEventCard = proxyCustomElement(class NylasSelectedEventCard e
         "startTime": [32],
         "endTime": [32]
     }, undefined, {
-        "themeConfig": ["themeConfigChanged"]
+        "themeConfig": ["themeConfigChanged"],
+        "selectedLanguage": ["selectedLanguageChangedHandler"]
     }]);
 __decorate([
     RegisterComponent({

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

@@ -1 +1 @@
-{"file":"nylas-selected-event-card2.js","mappings":"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","names":[],"sources":["src/components/scheduler/nylas-selected-event-card/nylas-selected-event-card.scss?tag=nylas-selected-event-card&encapsulation=shadow","src/components/scheduler/nylas-selected-event-card/nylas-selected-event-card.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  @include default-css-variables;\n  display: block;\n  position: relative;\n  height: inherit;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  font-family: var(--nylas-font-family);\n}\n\n.event-card {\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  gap: 4px;\n  width: calc(100% - 3rem);\n  background-color: var(--nylas-base-0);\n  color: var(--nylas-base-800);\n  border-radius: var(--nylas-border-radius-2x);\n  padding: 3rem 1.5rem 1.5rem 1.5rem;\n  position: relative;\n  box-shadow:\n    0px 1px 3px 0px rgba(0, 0, 0, 0.1),\n    0px 1px 2px 0px rgba(0, 0, 0, 0.06);\n\n  @media #{$mobile} {\n    margin-bottom: 2rem;\n  }\n}\n\n.nylas-selected-event-card__date {\n  font-size: min(max(16px, 3vw), 18px);\n  font-weight: 600;\n}\n\n.nylas-selected-event-card__time {\n  font-size: 16px;\n  font-weight: 500;\n}\n\n.calendar-icon {\n  width: 3rem;\n  height: 3rem;\n  border-radius: 50%;\n  position: absolute;\n  top: -1.25rem;\n  left: 50%;\n  transform: translateX(-50%);\n  background-color: var(--nylas-base-0);\n  border: 1px solid var(--nylas-base-200);\n}\n\ncalendar-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n\n.event-timezone {\n  display: flex;\n  color: var(--nylas-base-600);\n  margin-bottom: 8px;\n\n  @media #{$mobile} {\n    margin-bottom: 16px;\n  }\n\n  gap: 4px;\n  align-items: center;\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport type { NylasSchedulerConnector } from '../../..';\nimport type { ThemeConfig, Timeslot } from '@nylas/core';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { capitalizeFirstLetter, debug, formatBookedEventDate } from '@/utils/utils';\nimport { LANGUAGE_CODE_TO_LOCALE_MAP, TIMEZONE_MAP } from '@/common/constants';\n\n/**\n * The `nylas-selected-event-card` component is a UI component that displays the selected event card.\n *\n * @part nsec - The selected event card component.\n * @part nsec__card - The card component.\n * @part nsec__icon - The calendar icon.\n * @part nsec__date - The date selected.\n * @part nsec__time - The timeslot selected.\n * @part nsec__timezone - The timezone selected.\n */\n@Component({\n  tag: 'nylas-selected-event-card',\n  styleUrl: 'nylas-selected-event-card.scss',\n  shadow: true,\n})\nexport class NylasSelectedEventCard {\n  /**\n   * The host element.\n   * Used to manage the host element of the provider.\n   */\n  @Element() private host!: HTMLNylasSelectedEventCardElement;\n\n  /**\n   * @standalone\n   * The theme configuration.\n   */\n  @Prop({ attribute: 'theme-config' }) readonly themeConfig?: any;\n\n  /**\n   * The selected date.\n   */\n  @Prop({ attribute: 'selected-date' }) readonly selectedDate?: Date;\n\n  /**\n   * The selected time.\n   */\n  @Prop({ attribute: 'selected-timeslot' }) readonly selectedTimeslot?: Timeslot;\n\n  /**\n   * The selected timezone.\n   */\n  @Prop({ attribute: 'selected-timezone' }) readonly selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n  /**\n   * The selected language.\n   */\n  @Prop({ attribute: 'selected-language' }) readonly selectedLanguage?: string;\n  /**\n   * The 12-hour time format.\n   */\n  @Prop() hour12?: boolean;\n\n  @State() startTime: string = '';\n  @State() endTime: string = '';\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-selected-event-card] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-selected-event-card] Component did load`);\n    if (!this.selectedDate) {\n      console.warn('[nylas-selected-event-card] \"selectedDate\" prop is not provided.');\n    }\n    if (!this.selectedTimeslot) {\n      console.warn('[nylas-selected-event-card] \"selectedTimeslot\" prop is not provided.');\n    }\n    this.applyThemeConfig(this.themeConfig);\n    const locale = LANGUAGE_CODE_TO_LOCALE_MAP[this.selectedLanguage || 'en'];\n    const timeFormat = new Intl.DateTimeFormat(locale, {\n      hour: '2-digit',\n      minute: '2-digit',\n      timeZone: this.selectedTimezone,\n      hour12: this.hour12,\n    });\n\n    this.startTime = timeFormat.format(new Date(this.selectedTimeslot?.start_time as Date));\n    this.endTime = timeFormat.format(new Date(this.selectedTimeslot?.end_time as Date));\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  @RegisterComponent<NylasSelectedEventCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-selected-event-card',\n    stateToProps: new Map([\n      ['scheduler.selectedDate', 'selectedDate'],\n      ['scheduler.selectedTimeslot', 'selectedTimeslot'],\n      ['scheduler.selectedTimezone', 'selectedTimezone'],\n      ['scheduler.selectedLanguage', 'selectedLanguage'],\n      ['scheduler.themeConfig', 'themeConfig'],\n      ['scheduler.hour12', 'hour12'],\n    ]),\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host part=\"nsec\">\n        <div class=\"event-card\" part=\"nsec__card\">\n          <div class=\"calendar-icon\" part=\"nsec__icon\">\n            <calendar-icon />\n          </div>\n          <div class=\"nylas-selected-event-card__date\" part=\"nsec__date\">\n            {this.selectedDate\n              ? capitalizeFirstLetter(\n                  formatBookedEventDate(this.selectedTimeslot?.start_time as Date, this.selectedTimezone, LANGUAGE_CODE_TO_LOCALE_MAP[this.selectedLanguage || 'en']),\n                )\n              : '-'}\n          </div>\n          <div class=\"nylas-selected-event-card__time\" part=\"nsec__time\">\n            {this.startTime} - {this.endTime}\n          </div>\n        </div>\n        <div class=\"event-timezone\" part=\"nsec__timezone\">\n          <globe-icon></globe-icon>\n          {TIMEZONE_MAP[this.selectedTimezone]}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nylas-selected-event-card2.js","mappings":"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","names":["i18next"],"sources":["src/components/scheduler/nylas-selected-event-card/nylas-selected-event-card.scss?tag=nylas-selected-event-card&encapsulation=shadow","src/components/scheduler/nylas-selected-event-card/nylas-selected-event-card.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  @include default-css-variables;\n  display: block;\n  position: relative;\n  height: inherit;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  font-family: var(--nylas-font-family);\n}\n\n.event-card {\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  gap: 4px;\n  width: calc(100% - 3rem);\n  background-color: var(--nylas-base-0);\n  color: var(--nylas-base-800);\n  border-radius: var(--nylas-border-radius-2x);\n  padding: 3rem 1.5rem 1.5rem 1.5rem;\n  position: relative;\n  box-shadow:\n    0px 1px 3px 0px rgba(0, 0, 0, 0.1),\n    0px 1px 2px 0px rgba(0, 0, 0, 0.06);\n\n  @media #{$mobile} {\n    margin-bottom: 2rem;\n  }\n}\n\n.nylas-selected-event-card__date {\n  font-size: min(max(16px, 3vw), 18px);\n  font-weight: 600;\n}\n\n.nylas-selected-event-card__time {\n  font-size: 16px;\n  font-weight: 500;\n}\n\n.calendar-icon {\n  width: 3rem;\n  height: 3rem;\n  border-radius: 50%;\n  position: absolute;\n  top: -1.25rem;\n  left: 50%;\n  transform: translateX(-50%);\n  background-color: var(--nylas-base-0);\n  border: 1px solid var(--nylas-base-200);\n}\n\ncalendar-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n\n.event-timezone {\n  display: flex;\n  color: var(--nylas-base-600);\n  margin-bottom: 8px;\n\n  @media #{$mobile} {\n    margin-bottom: 16px;\n  }\n\n  gap: 4px;\n  align-items: center;\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport type { NylasSchedulerConnector } from '../../..';\nimport type { ThemeConfig, Timeslot } from '@nylas/core';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { capitalizeFirstLetter, debug, formatBookedEventDate } from '@/utils/utils';\nimport { LANGUAGE_CODE, LANGUAGE_CODE_TO_LOCALE_MAP, TIMEZONE_MAP } from '@/common/constants';\nimport i18next from '@/utils/i18n';\n\n/**\n * The `nylas-selected-event-card` component is a UI component that displays the selected event card.\n *\n * @part nsec - The selected event card component.\n * @part nsec__card - The card component.\n * @part nsec__icon - The calendar icon.\n * @part nsec__date - The date selected.\n * @part nsec__time - The timeslot selected.\n * @part nsec__timezone - The timezone selected.\n */\n@Component({\n  tag: 'nylas-selected-event-card',\n  styleUrl: 'nylas-selected-event-card.scss',\n  shadow: true,\n})\nexport class NylasSelectedEventCard {\n  /**\n   * The host element.\n   * Used to manage the host element of the provider.\n   */\n  @Element() private host!: HTMLNylasSelectedEventCardElement;\n\n  /**\n   * @standalone\n   * The theme configuration.\n   */\n  @Prop({ attribute: 'theme-config' }) readonly themeConfig?: any;\n\n  /**\n   * The selected date.\n   */\n  @Prop({ attribute: 'selected-date' }) readonly selectedDate?: Date;\n\n  /**\n   * The selected time.\n   */\n  @Prop({ attribute: 'selected-timeslot' }) readonly selectedTimeslot?: Timeslot;\n\n  /**\n   * The selected timezone.\n   */\n  @Prop({ attribute: 'selected-timezone' }) readonly selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n  /**\n   * The selected language.\n   */\n  @Prop({ attribute: 'selected-language' }) readonly selectedLanguage?: LANGUAGE_CODE;\n  /**\n   * The 12-hour time format.\n   */\n  @Prop() hour12?: boolean;\n\n  @State() startTime: string = '';\n  @State() endTime: string = '';\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-selected-event-card] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-selected-event-card] Component did load`);\n    if (!this.selectedDate) {\n      console.warn('[nylas-selected-event-card] \"selectedDate\" prop is not provided.');\n    }\n    if (!this.selectedTimeslot) {\n      console.warn('[nylas-selected-event-card] \"selectedTimeslot\" prop is not provided.');\n    }\n    this.applyThemeConfig(this.themeConfig);\n    const locale = LANGUAGE_CODE_TO_LOCALE_MAP[this.selectedLanguage || 'en'];\n    const timeFormat = new Intl.DateTimeFormat(locale, {\n      hour: '2-digit',\n      minute: '2-digit',\n      timeZone: this.selectedTimezone,\n      hour12: this.hour12,\n    });\n\n    this.startTime = timeFormat.format(new Date(this.selectedTimeslot?.start_time as Date));\n    this.endTime = timeFormat.format(new Date(this.selectedTimeslot?.end_time as Date));\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  @RegisterComponent<NylasSelectedEventCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-selected-event-card',\n    stateToProps: new Map([\n      ['scheduler.selectedDate', 'selectedDate'],\n      ['scheduler.selectedTimeslot', 'selectedTimeslot'],\n      ['scheduler.selectedTimezone', 'selectedTimezone'],\n      ['scheduler.selectedLanguage', 'selectedLanguage'],\n      ['scheduler.themeConfig', 'themeConfig'],\n      ['scheduler.hour12', 'hour12'],\n    ]),\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host part=\"nsec\">\n        <div class=\"event-card\" part=\"nsec__card\">\n          <div class=\"calendar-icon\" part=\"nsec__icon\">\n            <calendar-icon />\n          </div>\n          <div class=\"nylas-selected-event-card__date\" part=\"nsec__date\">\n            {this.selectedDate\n              ? capitalizeFirstLetter(\n                  formatBookedEventDate(this.selectedTimeslot?.start_time as Date, this.selectedTimezone, LANGUAGE_CODE_TO_LOCALE_MAP[this.selectedLanguage || 'en']),\n                )\n              : '-'}\n          </div>\n          <div class=\"nylas-selected-event-card__time\" part=\"nsec__time\">\n            {this.startTime} - {this.endTime}\n          </div>\n        </div>\n        <div class=\"event-timezone\" part=\"nsec__timezone\">\n          <globe-icon></globe-icon>\n          {TIMEZONE_MAP[this.selectedTimezone]}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1 +1 @@
-{"file":"nylas-timeslot-picker2.js","mappings":";;;;;;;AAAA,MAAM,sBAAsB,GAAG,40HAA40H,CAAC;AAC52H,kCAAe,sBAAsB;;;;;;;;;;;;;;;;MCyBxB,mBAAmB;;;;;;;;QAwItB,4BAAuB,GAAG,OAAO,KAAY,EAAE,QAA8B;YACnF,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,0CAA0C,EAAE,QAAQ,CAAC,CAAC;YAC5D,IAAI,QAAQ,EAAE;gBACZ,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;aAC5D;SACF,CAAC;QAOM,qBAAgB,GAAG,CAAC,KAAa;YACvC,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC;SACnC,CAAC;QAEM,qBAAgB,GAAG;YACzB,IAAI,CAAC,oBAAoB,GAAG,CAAC,CAAC,CAAC;SAChC,CAAC;;;;;gCA/H4E,IAAI,CAAC,cAAc,EAAE,CAAC,eAAe,EAAE,CAAC,QAAQ;4BAIzD,IAAI,IAAI,EAAE;;;qBAqBtC,EAAE;;;;IAK3C,uBAAuB,CAAC,WAAmB;QACzCA,QAAO,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;KACrC;IAGD,mBAAmB,CAAC,MAA+B;QACjD,KAAK,CAAC,+CAA+C,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC;QAEnE,IAAI,MAAM,EAAE;YACV,IAAI,CAAC,qBAAqB,GAAG,EAAE,CAAC;YAChC,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;gBACjC,MAAM,cAAc,GAAG,IAAI,CAAC,YAAY,EAAE,MAAM,CAAC,QAAQ,IAAI,iBAAiB,CAAC,QAAQ,CAAC,UAAU,EAAE,MAAM,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAAC;gBAC9J,IAAI,CAAC,KAAK,GAAG,cAAc,IAAI,EAAE,CAAC;aACnC;SACF;KACF;IAGD,mBAAmB,CAAC,MAA0C;QAC5D,KAAK,CAAC,iDAAiD,EAAE,EAAE,MAAM,EAAE,YAAY,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;QACtG,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;YACjC,MAAM,cAAc,GAAG,MAAM;kBACzB,MAAM,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,IAAI,iBAAiB,CAAC,QAAQ,CAAC,UAAU,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;iBAC1H,GAAG,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAAC;YAC7B,IAAI,CAAC,KAAK,GAAG,cAAc,IAAI,EAAE,CAAC;SACnC;KACF;IAGD,kBAAkB,CAAC,cAA2B;QAC5C,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;KACvC;IAED,iBAAiB,MAAK;IAEtB,oBAAoB,MAAK;IAEzB,MAAM,iBAAiB;QACrB,KAAK,CAAC,6CAA6C,EAAE,EAAE,YAAY,EAAE,IAAI,CAAC,YAAY,EAAE,YAAY,EAAE,IAAI,CAAC,YAAY,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;KAC/I;IAED,MAAM,gBAAgB;QACpB,KAAK,CAAC,4CAA4C,CAAC,CAAC;QACpD,MAAM,cAAc,GAAG,IAAI,CAAC,YAAY;cACpC,MAAM,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,IAAI,iBAAiB,CAAC,QAAQ,CAAC,UAAU,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;aAC1H,GAAG,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAAC;QAC7B,IAAI,CAAC,KAAK,GAAG,cAAc,IAAI,EAAE,CAAC;QAClC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KACzC;IAED,gBAAgB,CAAC,WAAyB;QACxC,IAAI,WAAW,EAAE;YACf,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE;gBACtD,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,GAAG,EAAE,EAAE,KAAK,CAAC,CAAC;aAC9C;SACF;KACF;IAEO,aAAa,CAAC,QAAkB,EAAE,KAAa;QACrD,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;QAC3C,MAAM,OAAO,GAAG,QAAQ,CAAC,QAAQ,CAAC;QAClC,OAAO,GAAG,IAAI,CAAC,kBAAkB,EAAE,IAAI,KAAK,GAAG,OAAO,GAAG,IAAI,OAAO,EAAE,GAAG,EAAE,EAAE,CAAC;KAC/E;IAEO,iBAAiB,CAAC,QAAkB,EAAE,KAAa;QACzD,KAAK,CAAC,uCAAuC,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;QAChE,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,aAAa,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;QACjE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;YACzB,UAAU,EAAE,QAAQ,CAAC,UAAU;YAC/B,QAAQ,EAAE,QAAQ,CAAC,QAAQ;YAC3B,MAAM,EAAE,QAAQ,CAAC,MAAM;YACvB,QAAQ,EAAE,QAAQ,EAAE,QAAQ;YAC5B,QAAQ,EAAE,QAAQ,EAAE,QAAQ;YAC5B,SAAS,EAAE,QAAQ,EAAE,SAAS;YAC9B,WAAW,EAAE,QAAQ,EAAE,WAAW;SACnC,CAAC,CAAC;KACJ;IAWD,MAAM,yBAAyB,CAAC,KAAa,EAAE,IAAsB;QACnE,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;KAClD;IAUO,gBAAgB,CAAC,QAAkB;QACzC,MAAM,MAAM,GAAG,2BAA2B,CAAC,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,CAAC;QAC1E,MAAM,UAAU,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE;YACjD,IAAI,EAAE,SAAS;YACf,MAAM,EAAE,SAAS;YACjB,QAAQ,EAAE,IAAI,CAAC,gBAAgB;YAC/B,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC,CAAC;QACH,OAAO,GAAG,UAAU,CAAC,MAAM,CAAC,QAAQ,CAAC,UAAU,CAAC,MAAM,UAAU,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;KAC9F;IA0CD,MAAM;QACJ,MAAM,MAAM,GAAG,2BAA2B,CAAC,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,CAAC;QAC1E,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,SAAS,IAClB,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,MAC7B,WAAK,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,EAAE,cAAc,EAAE,GAAG,CAAC,GAAG,EAAE,IAAI,EAAE,GAAI,CAC9E,CAAC,CACE,CACD,EACP;SACH;QAED,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,KAAK,CAAC,EAAE;YACvD,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,qCAA+B,CAC3B,CACD,EACP;SACH;QAED,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;YAC9C,MAAM,UAAU,GAAG,QAAQ,EAAE,QAAQ,IAAI,QAAQ,EAAE,SAAS,CAAC;YAC7D,MAAM,YAAY,GAAG,OAAO,QAAQ,EAAE,QAAQ,KAAK,QAAQ,IAAI,QAAQ,EAAE,QAAQ,GAAG,CAAC,CAAC;YACtF,OAAO,EAAE,UAAU,IAAI,CAAC,YAAY,CAAC,CAAC;SACvC,CAAC,CAAC;QAEH,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,aAAa,CAAC,MAAM,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE;YACjG,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,4DAAsD,CAClD,CACD,EACP;SACH;QAED,IAAI,CAAC,IAAI,CAAC,YAAY;YAAE,OAAO,EAAC,IAAI,OAAQ,CAAC;QAE7C,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,KAAK,IACd,WAAK,KAAK,EAAE,qBAAqB,EAAE,IAAI,EAAC,0BAA0B,IAChE,WAAK,KAAK,EAAE,WAAW,EAAE,IAAI,EAAC,gBAAgB,IAC3C,aAAa,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,KAAK;YACjC,MAAM,YAAY,GAAG,OAAO,QAAQ,EAAE,QAAQ,KAAK,QAAQ,IAAI,QAAQ,EAAE,QAAQ,GAAG,CAAC,CAAC;YACtF,MAAM,UAAU,GAAG,IAAI,CAAC,qBAAqB,IAAI,IAAI,CAAC,aAAa,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;YACrF,QACE,cACE,IAAI,EAAE,iBAAiB,IAAI,CAAC,gBAAgB,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,QAAQ,CAAC,UAAU,CAAC,OAAO,EAAE,GAAG,yBAAyB,GAAG,EAAE,EAAE,EACxI,KAAK,EAAE;oBACL,IAAI,EAAE,IAAI;oBACV,QAAQ,EAAE,OAAO,IAAI,CAAC,gBAAgB,KAAK,WAAW,IAAI,UAAU;iBACrE,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,iBAAiB,CAAC,QAAQ,EAAE,KAAK,CAAC,EACtD,YAAY,EAAE,MAAM,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAChD,YAAY,EAAE,MAAM,IAAI,CAAC,gBAAgB,EAAE,IAE3C,WAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,iBAAiB,IAC3C,IAAI,CAAC,oBAAoB,IAAI,KAAK,IAAI,UAAU;kBAC7C,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC;kBAC/B,QAAQ,CAAC,UAAU,CAAC,kBAAkB,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,CAAC,gBAAgB,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,EAChJ,YAAM,KAAK,EAAC,OAAO,IAAE,YAAY,GAAGA,QAAO,CAAC,CAAC,CAAC,WAAW,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,GAAG,IAAI,CAAQ,CACpG,CACC,EACT;SACH,CAAC,CACE,EACL,IAAI,CAAC,gBAAgB,KACpB,WAAK,KAAK,EAAE,QAAQ,IAClB,wBAAkB,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,KAAY,KAAK,IAAI,CAAC,uBAAuB,CAAC,KAAK,EAAE,IAAI,CAAC,gBAAgB,CAAC,EAAE,IAAI,EAAC,qBAAqB,IACrJ,YAAM,IAAI,EAAC,2BAA2B,IAAEA,QAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAQ,CACtD,CACf,CACP,CACG,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAhFD;IAxCC,iBAAiB,CAA8F;QAC9G,IAAI,EAAE,uBAAuB;QAC7B,YAAY,EAAE,IAAI,GAAG,CAAC;YACpB,CAAC,wBAAwB,EAAE,cAAc,CAAC;YAC1C,CAAC,wBAAwB,EAAE,cAAc,CAAC;YAC1C,CAAC,4BAA4B,EAAE,kBAAkB,CAAC;YAClD,CAAC,4BAA4B,EAAE,kBAAkB,CAAC;YAClD,CAAC,4BAA4B,EAAE,kBAAkB,CAAC;YAClD,CAAC,qBAAqB,EAAE,WAAW,CAAC;YACpC,CAAC,uBAAuB,EAAE,aAAa,CAAC;YACxC,CAAC,kBAAkB,EAAE,QAAQ,CAAC;SAC/B,CAAC;QACF,YAAY,EAAE;YACZ,gBAAgB,EAAE,OAAO,KAA4B,EAAE,uBAAgD;gBACrG,KAAK,CAAC,uBAAuB,EAAE,kBAAkB,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;gBACjE,uBAAuB,CAAC,SAAS,CAAC,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;aAC5D;YACD,iBAAiB,EAAE,OAAO,KAAgF,EAAE,uBAAgD;gBAC1J,KAAK,CAAC,uBAAuB,EAAE,mBAAmB,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;gBAClE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;gBACxC,IAAI,QAAQ,IAAI,QAAQ,EAAE,QAAQ,IAAI,QAAQ,EAAE,QAAQ,EAAE;oBACxD,MAAM,MAAM,GAAG,MAAM,uBAAuB,CAAC,SAAS,CAAC,0BAA0B,CAAC,QAAQ,CAAC,CAAC;oBAC5F,IAAI,MAAM,IAAI,OAAO,IAAI,MAAM,EAAE;wBAC/B,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,EAAE,OAAO,IAAI,iDAAiD,CAAC;wBAChG,IAAI,YAAY,KAAK,eAAe,EAAE;4BACpC,IAAI,CAAC,yBAAyB,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;yBACtD;6BAAM;4BACL,IAAI,CAAC,yBAAyB,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC;yBACvD;qBACF;iBACF;qBAAM;oBACL,uBAAuB,CAAC,SAAS,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC;iBAC9D;aACF;YACD,qBAAqB,EAAE,OAAO,KAAqC,EAAE,wBAAiD;gBACpH,KAAK,CAAC,uBAAuB,EAAE,uBAAuB,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;aACvE;SACF;QACD,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;iDAiFD;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["i18next"],"sources":["src/components/scheduler/nylas-timeslot-picker/nylas-timeslot-picker.scss?tag=nylas-timeslot-picker&encapsulation=shadow","src/components/scheduler/nylas-timeslot-picker/nylas-timeslot-picker.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  height: calc(100% - 48px); //48px is the height of the header\n  @include default-css-variables;\n}\n\n.time-picker-wrapper {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.timeslots {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n  align-items: center;\n  overflow-y: scroll;\n  padding: 0.5rem 1.5rem 1.5rem;\n  flex: 1;\n}\n\n.time {\n  /* Frame 12 */\n  box-sizing: border-box;\n\n  /* Auto layout */\n\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  padding: 4px 12px;\n  gap: 0.5rem;\n  font-size: 16px;\n  font-weight: 500;\n  font-family: inherit;\n\n  width: 100%;\n  height: 48px;\n\n  color: var(--nylas-base-800);\n  background: var(--nylas-base-0);\n  border: none;\n  outline: 1.5px solid var(--nylas-base-200);\n  border-radius: var(--nylas-border-radius-2x);\n\n  flex: none;\n  order: 4;\n  align-self: stretch;\n  flex-grow: 0;\n\n  cursor: pointer;\n\n  &:hover,\n  &:focus {\n    color: var(--nylas-primary);\n    outline-color: var(--nylas-primary);\n  }\n\n  &.selected {\n    font-weight: 600;\n    color: var(--nylas-primary);\n    outline: 2px solid var(--nylas-primary);\n    border-color: transparent;\n    box-shadow: 0 0 0 2px var(--nylas-primary);\n  }\n\n  .time-label {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 4px;\n\n    span.spots {\n      font-size: 14px;\n      font-family: var(--nylas-font-family);\n      font-weight: 400;\n      color: var(--nylas-base-600);\n    }\n  }\n}\n\n.empty {\n  text-align: center;\n  padding: 0 1.5rem;\n  color: var(--nylas-base-600);\n  font-size: min(max(12px, 2vw), 14px);\n  height: 450px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n@keyframes pulsate {\n  0% {\n    background-color: var(--nylas-base-50);\n  }\n\n  50% {\n    background-color: var(--nylas-base-100);\n  }\n\n  100% {\n    background-color: var(--nylas-base-50);\n  }\n}\n\n.loading {\n  padding: 0 1.5rem;\n\n  .timeslot-skeleton {\n    width: 100%;\n    height: 4rem;\n    background-color: var(--nylas-base-50);\n    margin-bottom: 0.5rem;\n    border-radius: var(--nylas-border-radius-2x);\n    animation: pulsate 1.5s infinite ease-in-out;\n  }\n}\n\n.footer {\n  width: 100%;\n  padding: 14px;\n  box-sizing: border-box;\n  border-top: 1px solid var(--nylas-base-200);\n}","import { RegisterComponent } from '@/common/register-component';\nimport { debug, isSameDayTimezone } from '@/utils/utils';\nimport { Component, Element, Event, EventEmitter, Host, Method, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { AvailabilityTimeslot } from '@/stores/scheduler-store';\nimport type { ThemeConfig, Timeslot } from '@nylas/core';\nimport i18next from '@/utils/i18n';\nimport { LANGUAGE_CODE_TO_LOCALE_MAP } from '@/common/constants';\n\n/**\n * The `nylas-timeslot-picker` component is a UI component that allows users to select a timeslot from a list of available timeslots.\n *\n * @slot timeslot-picker-cta-label - The label for the timeslot picker CTA. Default is \"Next\".\n * @part ntp - The timeslot picker component.\n * @part ntp__timeslot - The timeslot button.\n * @part ntp__timeslot--selected - The selected timeslot button.\n * @part ntp__button-primary - The timeslot picker CTA.\n * @part ntp__time-picker-wrapper - The timeslot picker wrapper.\n * @part ntp__timeslots - The timeslot picker timeslots.\n */\n@Component({\n  tag: 'nylas-timeslot-picker',\n  styleUrl: 'nylas-timeslot-picker.scss',\n  shadow: true,\n})\nexport class NylasTimeslotPicker {\n  /**\n   * The host element.\n   * Used to manage the host element of the provider.\n   */\n  @Element() private host!: HTMLNylasTimeslotPickerElement;\n  /**\n   * @standalone\n   * The available timeslots.\n   */\n  @Prop({ attribute: 'availability' }) readonly availability?: AvailabilityTimeslot[];\n  /**\n   * @standalone\n   * The loading state prop. Used to display loading state when fetching availability.\n   */\n  @Prop({ attribute: 'loading-state' }) readonly isLoading?: boolean;\n  /**\n   * @standalone\n   * The theme configuration.\n   */\n  @Prop({ attribute: 'theme-config' }) readonly themeConfig?: any;\n  /**\n   * The selected timeslot.\n   */\n  @Prop({ attribute: 'selected-timeslot' }) readonly selectedTimeslot?: Timeslot;\n  /**\n   * The selected timezone.\n   */\n  @Prop({ attribute: 'selected-timezone' }) readonly selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n  /**\n   * The selected date.\n   */\n  @Prop({ attribute: 'selected-date' }) readonly selectedDate?: Date = new Date();\n  /**\n   * The selected language.\n   */\n  @Prop() selectedLanguage?: string;\n  /**\n   * The 12-hour time format.\n   */\n  @Prop() hour12?: boolean;\n\n  /**\n   * This event is fired when a timeslot is selected.\n   */\n  @Event() readonly timeslotSelected!: EventEmitter<Timeslot>;\n  /**\n   * This event is fired when a timeslot is confirmed. By default, this will proceed to the booking form page.\n   */\n  @Event() readonly timeslotConfirmed!: EventEmitter<{ timeslot: Timeslot; host: HTMLNylasTimeslotPickerElement }>;\n\n  @Event() readonly validateTimeslotError!: EventEmitter<{ error: string; type: 'error' | 'info' }>;\n\n  @State() times: AvailabilityTimeslot[] = [];\n  @State() hoveredTimeslotIndex?: number;\n  @State() selectedTimeslotIndex?: string;\n\n  @Watch('selectedLanguage')\n  selectedLanguageChanged(newLanguage: string) {\n    i18next.changeLanguage(newLanguage);\n  }\n\n  @Watch('selectedDate')\n  selectedDateChanged(newVal: Date | null | undefined) {\n    debug(`[nylas-timeslot-picker] Selected date changed`, { newVal });\n\n    if (newVal) {\n      this.selectedTimeslotIndex = '';\n      if (typeof newVal !== 'undefined') {\n        const availableTimes = this.availability?.filter(timeslot => isSameDayTimezone(timeslot.start_time, newVal, this.selectedTimezone)).map(timeslot => timeslot);\n        this.times = availableTimes || [];\n      }\n    }\n  }\n\n  @Watch('availability')\n  availabilityChanged(newVal: AvailabilityTimeslot[] | undefined) {\n    debug(`[nylas-timeslot-picker] Available times changed`, { newVal, selectedDate: this.selectedDate });\n    if (typeof newVal !== 'undefined') {\n      const availableTimes = newVal\n        ?.filter(timeslot => this.selectedDate && isSameDayTimezone(timeslot.start_time, this.selectedDate, this.selectedTimezone))\n        .map(timeslot => timeslot);\n      this.times = availableTimes || [];\n    }\n  }\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-timeslot-picker] Component will load`, { selectedDate: this.selectedDate, availability: this.availability, times: this.times });\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-timeslot-picker] Component did load`);\n    const availableTimes = this.availability\n      ?.filter(timeslot => this.selectedDate && isSameDayTimezone(timeslot.start_time, this.selectedDate, this.selectedTimezone))\n      .map(timeslot => timeslot);\n    this.times = availableTimes || [];\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 getTimeslotId(timeslot: Timeslot, index: number) {\n    const date = new Date(timeslot.start_time);\n    const eventId = timeslot.event_id;\n    return `${date.toLocaleDateString()}-${index}${eventId ? `-${eventId}` : ''}`;\n  }\n\n  private onClickSelectTime(timeslot: Timeslot, index: number) {\n    debug(`[nylas-timeslot-picker] Time selected`, timeslot, index);\n    this.selectedTimeslotIndex = this.getTimeslotId(timeslot, index);\n    this.timeslotSelected.emit({\n      start_time: timeslot.start_time,\n      end_time: timeslot.end_time,\n      emails: timeslot.emails,\n      capacity: timeslot?.capacity,\n      event_id: timeslot?.event_id,\n      master_id: timeslot?.master_id,\n      calendar_id: timeslot?.calendar_id,\n    });\n  }\n\n  private handleConfirmedTimeslot = async (event: Event, timeslot: Timeslot | undefined) => {\n    event.preventDefault();\n    debug(`[nylas-timeslot-picker] Confirm timeslot`, timeslot);\n    if (timeslot) {\n      this.timeslotConfirmed.emit({ timeslot, host: this.host });\n    }\n  };\n\n  @Method()\n  async emitValidateTimeslotError(error: string, type: 'error' | 'info') {\n    this.validateTimeslotError.emit({ error, type });\n  }\n\n  private handleMouseEnter = (index: number) => {\n    this.hoveredTimeslotIndex = index;\n  };\n\n  private handleMouseLeave = () => {\n    this.hoveredTimeslotIndex = -1;\n  };\n\n  private getTimeSlotLabel(timeslot: Timeslot) {\n    const locale = LANGUAGE_CODE_TO_LOCALE_MAP[this.selectedLanguage || 'en'];\n    const timeFormat = new Intl.DateTimeFormat(locale, {\n      hour: '2-digit',\n      minute: '2-digit',\n      timeZone: this.selectedTimezone,\n      hour12: this.hour12,\n    });\n    return `${timeFormat.format(timeslot.start_time)} - ${timeFormat.format(timeslot.end_time)}`;\n  }\n\n  @RegisterComponent<NylasTimeslotPicker, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-timeslot-picker',\n    stateToProps: new Map([\n      ['scheduler.selectedDate', 'selectedDate'],\n      ['scheduler.availability', 'availability'],\n      ['scheduler.selectedTimeslot', 'selectedTimeslot'],\n      ['scheduler.selectedTimezone', 'selectedTimezone'],\n      ['scheduler.selectedLanguage', 'selectedLanguage'],\n      ['scheduler.isLoading', 'isLoading'],\n      ['scheduler.themeConfig', 'themeConfig'],\n      ['scheduler.hour12', 'hour12'],\n    ]),\n    eventToProps: {\n      timeslotSelected: async (event: CustomEvent<Timeslot>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        debug('nylas-timeslot-picker', 'timeslotSelected', event.detail);\n        nylasSchedulerConnector.scheduler.selectTime(event.detail);\n      },\n      timeslotConfirmed: async (event: CustomEvent<{ timeslot: Timeslot; host: HTMLNylasTimeslotPickerElement }>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        debug('nylas-timeslot-picker', 'timeslotConfirmed', event.detail);\n        const { timeslot, host } = event.detail;\n        if (timeslot && timeslot?.event_id && timeslot?.capacity) {\n          const result = await nylasSchedulerConnector.scheduler.validateGroupEventTimeslot(timeslot);\n          if (result && 'error' in result) {\n            const errorMessage = result.error?.message || 'An error occurred while validating the timeslot';\n            if (errorMessage === 'Event is full') {\n              host.emitValidateTimeslotError(errorMessage, 'info');\n            } else {\n              host.emitValidateTimeslotError(errorMessage, 'error');\n            }\n          }\n        } else {\n          nylasSchedulerConnector.scheduler.toggleAdditionalData(true);\n        }\n      },\n      validateTimeslotError: async (event: CustomEvent<{ error: string }>, _nylasSchedulerConnector: NylasSchedulerConnector) => {\n        debug('nylas-timeslot-picker', 'validateTimeslotError', event.detail);\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    const locale = LANGUAGE_CODE_TO_LOCALE_MAP[this.selectedLanguage || 'en'];\n    if (this.isLoading) {\n      return (\n        <Host>\n          <div class={'loading'}>\n            {new Array(6).fill(0).map((_, i) => (\n              <div class={'timeslot-skeleton'} style={{ animationDelay: `${i * 20}ms` }} />\n            ))}\n          </div>\n        </Host>\n      );\n    }\n\n    if (this.availability && this.availability.length === 0) {\n      return (\n        <Host>\n          <div class={'empty'}>\n            <span>No dates available</span>\n          </div>\n        </Host>\n      );\n    }\n\n    const filteredTimes = this.times.filter(timeslot => {\n      const groupEvent = timeslot?.event_id || timeslot?.master_id;\n      const showCapacity = typeof timeslot?.capacity === 'number' && timeslot?.capacity > 0;\n      return !(groupEvent && !showCapacity);\n    });\n\n    if ((!this.times || this.times.length === 0 || filteredTimes.length === 0) && !!this.selectedDate) {\n      return (\n        <Host>\n          <div class={'empty'}>\n            <span>No time slots available for selected date</span>\n          </div>\n        </Host>\n      );\n    }\n\n    if (!this.selectedDate) return <Host></Host>;\n\n    return (\n      <Host part=\"ntp\">\n        <div class={'time-picker-wrapper'} part=\"ntp__time-picker-wrapper\">\n          <div class={'timeslots'} part=\"ntp__timeslots\">\n            {filteredTimes.map((timeslot, index) => {\n              const showCapacity = typeof timeslot?.capacity === 'number' && timeslot?.capacity > 0;\n              const isSelected = this.selectedTimeslotIndex == this.getTimeslotId(timeslot, index);\n              return (\n                <button\n                  part={`ntp__timeslot ${this.selectedTimeslot?.start_time?.getTime() === timeslot.start_time.getTime() ? 'ntp__timeslot--selected' : ''}`}\n                  class={{\n                    time: true,\n                    selected: typeof this.selectedTimeslot !== 'undefined' && isSelected,\n                  }}\n                  onClick={() => this.onClickSelectTime(timeslot, index)}\n                  onMouseEnter={() => this.handleMouseEnter(index)}\n                  onMouseLeave={() => this.handleMouseLeave()}\n                >\n                  <div class=\"time-label\" part=\"ntp__time-label\">\n                    {this.hoveredTimeslotIndex == index || isSelected\n                      ? this.getTimeSlotLabel(timeslot)\n                      : timeslot.start_time.toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit', timeZone: this.selectedTimezone, hour12: this.hour12 })}\n                    <span class=\"spots\">{showCapacity ? i18next.t('spotsLeft', { count: timeslot?.capacity }) : null}</span>\n                  </div>\n                </button>\n              );\n            })}\n          </div>\n          {this.selectedTimeslot && (\n            <div class={'footer'}>\n              <button-component variant={'primary'} onClick={(event: Event) => this.handleConfirmedTimeslot(event, this.selectedTimeslot)} part=\"ntp__button-primary\">\n                <slot name=\"timeslot-picker-cta-label\">{i18next.t('nextButton')}</slot>\n              </button-component>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nylas-timeslot-picker2.js","mappings":"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","names":["i18next"],"sources":["src/components/scheduler/nylas-timeslot-picker/nylas-timeslot-picker.scss?tag=nylas-timeslot-picker&encapsulation=shadow","src/components/scheduler/nylas-timeslot-picker/nylas-timeslot-picker.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  height: calc(100% - 48px); //48px is the height of the header\n  @include default-css-variables;\n}\n\n.time-picker-wrapper {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.timeslots {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n  align-items: center;\n  overflow-y: scroll;\n  padding: 0.5rem 1.5rem 1.5rem;\n  flex: 1;\n}\n\n.time {\n  /* Frame 12 */\n  box-sizing: border-box;\n\n  /* Auto layout */\n\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  padding: 4px 12px;\n  gap: 0.5rem;\n  font-size: 16px;\n  font-weight: 500;\n  font-family: inherit;\n\n  width: 100%;\n  height: 48px;\n\n  color: var(--nylas-base-800);\n  background: var(--nylas-base-0);\n  border: none;\n  outline: 1.5px solid var(--nylas-base-200);\n  border-radius: var(--nylas-border-radius-2x);\n\n  flex: none;\n  order: 4;\n  align-self: stretch;\n  flex-grow: 0;\n\n  cursor: pointer;\n\n  &:hover,\n  &:focus {\n    color: var(--nylas-primary);\n    outline-color: var(--nylas-primary);\n  }\n\n  &.selected {\n    font-weight: 600;\n    color: var(--nylas-primary);\n    outline: 2px solid var(--nylas-primary);\n    border-color: transparent;\n    box-shadow: 0 0 0 2px var(--nylas-primary);\n  }\n\n  .time-label {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 4px;\n\n    span.spots {\n      font-size: 14px;\n      font-family: var(--nylas-font-family);\n      font-weight: 400;\n      color: var(--nylas-base-600);\n    }\n  }\n}\n\n.empty {\n  text-align: center;\n  padding: 0 1.5rem;\n  color: var(--nylas-base-600);\n  font-size: min(max(12px, 2vw), 14px);\n  height: 450px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n@keyframes pulsate {\n  0% {\n    background-color: var(--nylas-base-50);\n  }\n\n  50% {\n    background-color: var(--nylas-base-100);\n  }\n\n  100% {\n    background-color: var(--nylas-base-50);\n  }\n}\n\n.loading {\n  padding: 0 1.5rem;\n\n  .timeslot-skeleton {\n    width: 100%;\n    height: 4rem;\n    background-color: var(--nylas-base-50);\n    margin-bottom: 0.5rem;\n    border-radius: var(--nylas-border-radius-2x);\n    animation: pulsate 1.5s infinite ease-in-out;\n  }\n}\n\n.footer {\n  width: 100%;\n  padding: 14px;\n  box-sizing: border-box;\n  border-top: 1px solid var(--nylas-base-200);\n}","import { RegisterComponent } from '@/common/register-component';\nimport { debug, isSameDayTimezone } from '@/utils/utils';\nimport { Component, Element, Event, EventEmitter, Host, Method, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { AvailabilityTimeslot } from '@/stores/scheduler-store';\nimport type { ThemeConfig, Timeslot } from '@nylas/core';\nimport i18next from '@/utils/i18n';\nimport { LANGUAGE_CODE, LANGUAGE_CODE_TO_LOCALE_MAP } from '@/common/constants';\n\n/**\n * The `nylas-timeslot-picker` component is a UI component that allows users to select a timeslot from a list of available timeslots.\n *\n * @slot timeslot-picker-cta-label - The label for the timeslot picker CTA. Default is \"Next\".\n * @part ntp - The timeslot picker component.\n * @part ntp__timeslot - The timeslot button.\n * @part ntp__timeslot--selected - The selected timeslot button.\n * @part ntp__button-primary - The timeslot picker CTA.\n * @part ntp__time-picker-wrapper - The timeslot picker wrapper.\n * @part ntp__timeslots - The timeslot picker timeslots.\n */\n@Component({\n  tag: 'nylas-timeslot-picker',\n  styleUrl: 'nylas-timeslot-picker.scss',\n  shadow: true,\n})\nexport class NylasTimeslotPicker {\n  /**\n   * The host element.\n   * Used to manage the host element of the provider.\n   */\n  @Element() private host!: HTMLNylasTimeslotPickerElement;\n  /**\n   * @standalone\n   * The available timeslots.\n   */\n  @Prop({ attribute: 'availability' }) readonly availability?: AvailabilityTimeslot[];\n  /**\n   * @standalone\n   * The loading state prop. Used to display loading state when fetching availability.\n   */\n  @Prop({ attribute: 'loading-state' }) readonly isLoading?: boolean;\n  /**\n   * @standalone\n   * The theme configuration.\n   */\n  @Prop({ attribute: 'theme-config' }) readonly themeConfig?: any;\n  /**\n   * The selected timeslot.\n   */\n  @Prop({ attribute: 'selected-timeslot' }) readonly selectedTimeslot?: Timeslot;\n  /**\n   * The selected timezone.\n   */\n  @Prop({ attribute: 'selected-timezone' }) readonly selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n  /**\n   * The selected date.\n   */\n  @Prop({ attribute: 'selected-date' }) readonly selectedDate?: Date = new Date();\n  /**\n   * The selected language.\n   */\n  @Prop() selectedLanguage?: string;\n  /**\n   * The 12-hour time format.\n   */\n  @Prop() hour12?: boolean;\n\n  /**\n   * This event is fired when a timeslot is selected.\n   */\n  @Event() readonly timeslotSelected!: EventEmitter<Timeslot>;\n  /**\n   * This event is fired when a timeslot is confirmed. By default, this will proceed to the booking form page.\n   */\n  @Event() readonly timeslotConfirmed!: EventEmitter<{ timeslot: Timeslot; host: HTMLNylasTimeslotPickerElement }>;\n\n  @Event() readonly validateTimeslotError!: EventEmitter<{ error: string; type: 'error' | 'info' }>;\n\n  @State() times: AvailabilityTimeslot[] = [];\n  @State() hoveredTimeslotIndex?: number;\n  @State() selectedTimeslotIndex?: string;\n\n  @Watch('selectedLanguage')\n  selectedLanguageChanged(newLanguage: LANGUAGE_CODE) {\n    i18next.changeLanguage(newLanguage);\n  }\n\n  @Watch('selectedDate')\n  selectedDateChanged(newVal: Date | null | undefined) {\n    debug(`[nylas-timeslot-picker] Selected date changed`, { newVal });\n\n    if (newVal) {\n      this.selectedTimeslotIndex = '';\n      if (typeof newVal !== 'undefined') {\n        const availableTimes = this.availability?.filter(timeslot => isSameDayTimezone(timeslot.start_time, newVal, this.selectedTimezone)).map(timeslot => timeslot);\n        this.times = availableTimes || [];\n      }\n    }\n  }\n\n  @Watch('availability')\n  availabilityChanged(newVal: AvailabilityTimeslot[] | undefined) {\n    debug(`[nylas-timeslot-picker] Available times changed`, { newVal, selectedDate: this.selectedDate });\n    if (typeof newVal !== 'undefined') {\n      const availableTimes = newVal\n        ?.filter(timeslot => this.selectedDate && isSameDayTimezone(timeslot.start_time, this.selectedDate, this.selectedTimezone))\n        .map(timeslot => timeslot);\n      this.times = availableTimes || [];\n    }\n  }\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-timeslot-picker] Component will load`, { selectedDate: this.selectedDate, availability: this.availability, times: this.times });\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-timeslot-picker] Component did load`);\n    const availableTimes = this.availability\n      ?.filter(timeslot => this.selectedDate && isSameDayTimezone(timeslot.start_time, this.selectedDate, this.selectedTimezone))\n      .map(timeslot => timeslot);\n    this.times = availableTimes || [];\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 getTimeslotId(timeslot: Timeslot, index: number) {\n    const date = new Date(timeslot.start_time);\n    const eventId = timeslot.event_id;\n    return `${date.toLocaleDateString()}-${index}${eventId ? `-${eventId}` : ''}`;\n  }\n\n  private onClickSelectTime(timeslot: Timeslot, index: number) {\n    debug(`[nylas-timeslot-picker] Time selected`, timeslot, index);\n    this.selectedTimeslotIndex = this.getTimeslotId(timeslot, index);\n    this.timeslotSelected.emit({\n      start_time: timeslot.start_time,\n      end_time: timeslot.end_time,\n      emails: timeslot.emails,\n      capacity: timeslot?.capacity,\n      event_id: timeslot?.event_id,\n      master_id: timeslot?.master_id,\n      calendar_id: timeslot?.calendar_id,\n    });\n  }\n\n  private handleConfirmedTimeslot = async (event: Event, timeslot: Timeslot | undefined) => {\n    event.preventDefault();\n    debug(`[nylas-timeslot-picker] Confirm timeslot`, timeslot);\n    if (timeslot) {\n      this.timeslotConfirmed.emit({ timeslot, host: this.host });\n    }\n  };\n\n  @Method()\n  async emitValidateTimeslotError(error: string, type: 'error' | 'info') {\n    this.validateTimeslotError.emit({ error, type });\n  }\n\n  private handleMouseEnter = (index: number) => {\n    this.hoveredTimeslotIndex = index;\n  };\n\n  private handleMouseLeave = () => {\n    this.hoveredTimeslotIndex = -1;\n  };\n\n  private getTimeSlotLabel(timeslot: Timeslot) {\n    const locale = LANGUAGE_CODE_TO_LOCALE_MAP[this.selectedLanguage || 'en'];\n    const timeFormat = new Intl.DateTimeFormat(locale, {\n      hour: '2-digit',\n      minute: '2-digit',\n      timeZone: this.selectedTimezone,\n      hour12: this.hour12,\n    });\n    return `${timeFormat.format(timeslot.start_time)} - ${timeFormat.format(timeslot.end_time)}`;\n  }\n\n  @RegisterComponent<NylasTimeslotPicker, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-timeslot-picker',\n    stateToProps: new Map([\n      ['scheduler.selectedDate', 'selectedDate'],\n      ['scheduler.availability', 'availability'],\n      ['scheduler.selectedTimeslot', 'selectedTimeslot'],\n      ['scheduler.selectedTimezone', 'selectedTimezone'],\n      ['scheduler.selectedLanguage', 'selectedLanguage'],\n      ['scheduler.isLoading', 'isLoading'],\n      ['scheduler.themeConfig', 'themeConfig'],\n      ['scheduler.hour12', 'hour12'],\n    ]),\n    eventToProps: {\n      timeslotSelected: async (event: CustomEvent<Timeslot>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        debug('nylas-timeslot-picker', 'timeslotSelected', event.detail);\n        nylasSchedulerConnector.scheduler.selectTime(event.detail);\n      },\n      timeslotConfirmed: async (event: CustomEvent<{ timeslot: Timeslot; host: HTMLNylasTimeslotPickerElement }>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        debug('nylas-timeslot-picker', 'timeslotConfirmed', event.detail);\n        const { timeslot, host } = event.detail;\n        if (timeslot && timeslot?.event_id && timeslot?.capacity) {\n          const result = await nylasSchedulerConnector.scheduler.validateGroupEventTimeslot(timeslot);\n          if (result && 'error' in result) {\n            const errorMessage = result.error?.message || 'An error occurred while validating the timeslot';\n            if (errorMessage === 'Event is full') {\n              host.emitValidateTimeslotError(errorMessage, 'info');\n            } else {\n              host.emitValidateTimeslotError(errorMessage, 'error');\n            }\n          }\n        } else {\n          nylasSchedulerConnector.scheduler.toggleAdditionalData(true);\n        }\n      },\n      validateTimeslotError: async (event: CustomEvent<{ error: string }>, _nylasSchedulerConnector: NylasSchedulerConnector) => {\n        debug('nylas-timeslot-picker', 'validateTimeslotError', event.detail);\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    const locale = LANGUAGE_CODE_TO_LOCALE_MAP[this.selectedLanguage || 'en'];\n    if (this.isLoading) {\n      return (\n        <Host>\n          <div class={'loading'}>\n            {new Array(6).fill(0).map((_, i) => (\n              <div class={'timeslot-skeleton'} style={{ animationDelay: `${i * 20}ms` }} />\n            ))}\n          </div>\n        </Host>\n      );\n    }\n\n    if (this.availability && this.availability.length === 0) {\n      return (\n        <Host>\n          <div class={'empty'}>\n            <span>No dates available</span>\n          </div>\n        </Host>\n      );\n    }\n\n    const filteredTimes = this.times.filter(timeslot => {\n      const groupEvent = timeslot?.event_id || timeslot?.master_id;\n      const showCapacity = typeof timeslot?.capacity === 'number' && timeslot?.capacity > 0;\n      return !(groupEvent && !showCapacity);\n    });\n\n    if ((!this.times || this.times.length === 0 || filteredTimes.length === 0) && !!this.selectedDate) {\n      return (\n        <Host>\n          <div class={'empty'}>\n            <span>No time slots available for selected date</span>\n          </div>\n        </Host>\n      );\n    }\n\n    if (!this.selectedDate) return <Host></Host>;\n\n    return (\n      <Host part=\"ntp\">\n        <div class={'time-picker-wrapper'} part=\"ntp__time-picker-wrapper\">\n          <div class={'timeslots'} part=\"ntp__timeslots\">\n            {filteredTimes.map((timeslot, index) => {\n              const showCapacity = typeof timeslot?.capacity === 'number' && timeslot?.capacity > 0;\n              const isSelected = this.selectedTimeslotIndex == this.getTimeslotId(timeslot, index);\n              return (\n                <button\n                  part={`ntp__timeslot ${this.selectedTimeslot?.start_time?.getTime() === timeslot.start_time.getTime() ? 'ntp__timeslot--selected' : ''}`}\n                  class={{\n                    time: true,\n                    selected: typeof this.selectedTimeslot !== 'undefined' && isSelected,\n                  }}\n                  onClick={() => this.onClickSelectTime(timeslot, index)}\n                  onMouseEnter={() => this.handleMouseEnter(index)}\n                  onMouseLeave={() => this.handleMouseLeave()}\n                >\n                  <div class=\"time-label\" part=\"ntp__time-label\">\n                    {this.hoveredTimeslotIndex == index || isSelected\n                      ? this.getTimeSlotLabel(timeslot)\n                      : timeslot.start_time.toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit', timeZone: this.selectedTimezone, hour12: this.hour12 })}\n                    <span class=\"spots\">{showCapacity ? i18next.t('spotsLeft', { count: timeslot?.capacity }) : null}</span>\n                  </div>\n                </button>\n              );\n            })}\n          </div>\n          {this.selectedTimeslot && (\n            <div class={'footer'}>\n              <button-component variant={'primary'} onClick={(event: Event) => this.handleConfirmedTimeslot(event, this.selectedTimeslot)} part=\"ntp__button-primary\">\n                <slot name=\"timeslot-picker-cta-label\">{i18next.t('nextButton')}</slot>\n              </button-component>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}