@nylas/web-elements 1.1.5 → 1.1.6

package/dist/cjs/nylas-feedback-form.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"nylas-feedback-form.entry.cjs.js","mappings":"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","names":["debug","h","Host","i18next","RegisterComponent"],"sources":["src/components/scheduler/nylas-feedback-form/nylas-feedback-form.scss?tag=nylas-feedback-form&encapsulation=shadow","src/components/scheduler/nylas-feedback-form/nylas-feedback-form.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  @include default-css-variables;\n}\n\n.card-wrapper {\n  background: var(--nylas-base-0);\n  display: flex;\n  flex-direction: column;\n  font-family: var(--nylas-font-family);\n  background-color: var(--nylas-base-0);\n  color: var(--nylas-base-900);\n  border-radius: var(--nylas-border-radius-3x);\n  position: relative;\n  padding: 32px;\n  width: 562px;\n\n  @media #{$mobile} {\n    width: 100%;\n    border-radius: 0px;\n  }\n\n  box-shadow:\n    0px 1px 4px rgba(0, 0, 0, 0.1),\n    0px 3px 6px rgba(0, 0, 0, 0.06);\n}\n\n.header {\n  overflow-wrap: anywhere;\n  display: flex;\n  flex-direction: column;\n  font-size: 1rem;\n  font-weight: 400;\n\n  h2 {\n    color: var(--nylas-base-900);\n    font-size: 24px;\n    font-weight: 600;\n    text-align: left;\n    margin: 0;\n  }\n}\n\n.description {\n  &.title-desc {\n    margin-bottom: 2rem;\n  }\n\n  &.footer-desc {\n    margin-top: 2rem;\n\n    a {\n      color: var(--nylas-primary);\n      text-decoration: none;\n    }\n  }\n\n  p {\n    margin: 0;\n    font-size: 18px;\n    color: var(--nylas-base-600);\n  }\n}\n\n.footer {\n  margin-top: 1rem;\n  padding-top: 1rem;\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.5rem;\n  box-sizing: border-box;\n  background-color: var(--nylas-base-25);\n  width: 100%;\n  border-radius: 0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x);\n}\n\n.close-button {\n  width: 100%;\n  display: flex;\n  justify-content: flex-end;\n\n  button-component {\n    button {\n      padding: 0;\n      height: auto;\n\n      &:hover {\n        background-color: transparent !important;\n      }\n    }\n  }\n}\n\nbutton-component {\n  --dot-color: var(--nylas-base-700);\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { Component, Element, EventEmitter, h, Host, Listen, State } from '@stencil/core';\nimport { NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { debug } from '@/utils/utils';\nimport { Event } from '@stencil/core';\nimport i18next from '@/utils/i18n';\n\n/**\n * The `nylas-feedback-form` component is a UI component that displays the booked event card.\n *\n * @part nfbf - The booked event card host.\n * @part nfbf__card - The booked event card.\n * @part nfbf__title - The title of the booked event card.\n * @part nfbf__description - The description of the booked event card.\n * @part nfbf__button-outline - The cancel & reschedule button CTA.\n * @part nfbf__cancel-cta - The cancel button CTA.\n * @part nfbf__reschedule-cta - The reschedule button CTA.\n */\n@Component({\n  tag: 'nylas-feedback-form',\n  styleUrl: 'nylas-feedback-form.scss',\n  shadow: true,\n})\nexport class NylasFeedbackForm {\n  /**\n   * The host element.\n   */\n  @Element() host!: HTMLNylasFeedbackFormElement;\n\n  /**\n   * Feedback modal close event.\n   */\n  @Event() readonly feedbackModalClosed!: EventEmitter<void>;\n\n  /**\n   * Feedback submitted event.\n   */\n  @Event() readonly feedbackSubmitted!: EventEmitter<{ feedback: string }>;\n\n  /**\n   * This is an internal event that is used to trigger validation on the form.\n   */\n  @Event() readonly triggerValidation!: EventEmitter<void>;\n\n  /**\n   * The state to hold the feedback message.\n   */\n  @State() feedbackMessage: string = '';\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  async componentWillLoad() {\n    debug(`[nylas-feedback-form] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-feedback-form] Component did load`);\n  }\n\n  @Listen('nylasFormInputChanged', { target: 'document' })\n  handleFormInputChanged(event: CustomEvent<{ name: string; value: string }>) {\n    debug(`[nylas-feedback-form] Form input changed`);\n    if (!event.detail.value) {\n      return;\n    }\n    this.triggerValidation.emit();\n    if (event.detail.name === 'feedback') {\n      this.feedbackMessage = event.detail.value;\n    }\n  }\n\n  private handleConfirmBookingButtonClicked = () => {\n    // TODO: Implement feedback submission\n    const validationEvent = this.triggerValidation.emit();\n    if (validationEvent.defaultPrevented) {\n      return;\n    }\n    this.feedbackSubmitted.emit({ feedback: this.feedbackMessage });\n  };\n\n  private closeModal(e: Event) {\n    e.preventDefault();\n    e.stopImmediatePropagation();\n    this.feedbackModalClosed.emit();\n  }\n\n  @RegisterComponent<NylasFeedbackForm, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-feedback-form',\n    stateToProps: new Map([]),\n    eventToProps: {\n      feedbackSubmitted: async (_event: CustomEvent<{ feedback: string }>, _nylasSchedulerConnector: NylasSchedulerConnector) => {\n        // TODO: Implement feedback submission\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host part=\"nfbf\">\n        <div class=\"card-wrapper\" part=\"nfbfc__card\">\n          <div class=\"close-button\">\n            <button-component tooltip=\"Close\" id=\"close\" variant={'invisible'} onClick={e => this.closeModal(e)} part=\"nfbf__close-button\">\n              <close-icon />\n            </button-component>\n          </div>\n          <div class=\"header\">\n            <h2 slot=\"card-title\" part=\"nfbf__title\">\n              {i18next.t('feedbackFormTitle')}\n            </h2>\n          </div>\n          <div class=\"description title-desc\">\n            <p>{i18next.t('feedbackFormDescription')}</p>\n          </div>\n          <textarea-component\n            label={i18next.t('feedbackMessageLabel')}\n            required={true}\n            maxLength={500}\n            part=\"nfbf__description\"\n            name=\"feedback\"\n            placeholder={i18next.t('feedbackMessagePlaceholder')}\n          />\n          <div class={'description footer-desc'}>\n            <p>\n              By sending this report, you agree to Nylas’ access to the data necessary to respond to this issue, subject to Nylas’{' '}\n              <a href=\"https://www.nylas.com/privacy-policy/\" target=\"_blank\" rel=\"nofollow noreferrer noopener\">\n                Privacy Policy\n              </a>\n              .\n            </p>\n          </div>\n          <div\n            class={{\n              footer: true,\n            }}\n          >\n            <button-component variant={'invisible'} onClick={e => this.closeModal(e)} part=\"nfbf__button-outline nfbf__cancel-cta\">\n              {`${i18next.t('feedbackModalCloseButton')}`}\n            </button-component>\n            <button-component variant={'primary'} onClick={this.handleConfirmBookingButtonClicked} part=\"nfbf__button-outline nfbf__reschedule-cta\">\n              {`${i18next.t('feedbackModalSubmitButton')}`}\n            </button-component>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nylas-feedback-form.entry.cjs.js","mappings":"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","names":["debug","h","Host","i18next","RegisterComponent"],"sources":["src/components/scheduler/nylas-feedback-form/nylas-feedback-form.scss?tag=nylas-feedback-form&encapsulation=shadow","src/components/scheduler/nylas-feedback-form/nylas-feedback-form.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n}\n\n.card-wrapper {\n  background: var(--nylas-base-0);\n  display: flex;\n  flex-direction: column;\n  font-family: var(--nylas-font-family);\n  background-color: var(--nylas-base-0);\n  color: var(--nylas-base-900);\n  border-radius: var(--nylas-border-radius-3x);\n  position: relative;\n  padding: 32px;\n  width: 562px;\n\n  @media #{$mobile} {\n    width: 100%;\n    border-radius: 0px;\n  }\n\n  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1),\n  0px 3px 6px rgba(0, 0, 0, 0.06);\n}\n\n.header {\n  overflow-wrap: anywhere;\n  display: flex;\n  flex-direction: column;\n  font-size: 1rem;\n  font-weight: 400;\n\n  h2 {\n    color: var(--nylas-base-900);\n    font-size: 24px;\n    font-weight: 600;\n    text-align: left;\n    margin: 0;\n  }\n}\n\n.description {\n  &.title-desc {\n    margin-bottom: 2rem;\n  }\n\n  &.footer-desc {\n    margin-top: 2rem;\n\n    a {\n      color: var(--nylas-primary);\n      text-decoration: none;\n    }\n  }\n\n  p {\n    margin: 0;\n    font-size: 18px;\n    color: var(--nylas-base-600);\n  }\n}\n\n.footer {\n  margin-top: 1rem;\n  padding-top: 1rem;\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.5rem;\n  box-sizing: border-box;\n  background-color: var(--nylas-base-25);\n  width: 100%;\n  border-radius: 0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x);\n}\n\n.close-button {\n  width: 100%;\n  display: flex;\n  justify-content: flex-end;\n\n  button-component {\n    button {\n      padding: 0;\n      height: auto;\n\n      &:hover {\n        background-color: transparent !important;\n      }\n    }\n  }\n}\n\nbutton-component {\n  --dot-color: var(--nylas-base-700);\n}","import { RegisterComponent } from '@/common/register-component';\nimport { Component, Element, EventEmitter, h, Host, Listen, Prop, State } from '@stencil/core';\nimport { NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { debug } from '@/utils/utils';\nimport { Event } from '@stencil/core';\nimport i18next from '@/utils/i18n';\nimport { ThemeConfig } from '@nylas/core';\n\n/**\n * The `nylas-feedback-form` component is a UI component that displays the booked event card.\n *\n * @part nfbf - The booked event card host.\n * @part nfbf__card - The booked event card.\n * @part nfbf__title - The title of the booked event card.\n * @part nfbf__description - The description of the booked event card.\n * @part nfbf__button-outline - The cancel & reschedule button CTA.\n * @part nfbf__cancel-cta - The cancel button CTA.\n * @part nfbf__reschedule-cta - The reschedule button CTA.\n */\n@Component({\n  tag: 'nylas-feedback-form',\n  styleUrl: 'nylas-feedback-form.scss',\n  shadow: true,\n})\nexport class NylasFeedbackForm {\n  /**\n   * The host element.\n   */\n  @Element() host!: HTMLNylasFeedbackFormElement;\n  /**\n   * @standalone\n   * The theme configuration.\n   */\n  @Prop({ attribute: 'theme-config' }) readonly themeConfig?: any;\n\n  /**\n   * Feedback modal close event.\n   */\n  @Event() readonly feedbackModalClosed!: EventEmitter<void>;\n\n  /**\n   * Feedback submitted event.\n   */\n  @Event() readonly feedbackSubmitted!: EventEmitter<{ feedback: string }>;\n\n  /**\n   * This is an internal event that is used to trigger validation on the form.\n   */\n  @Event() readonly triggerValidation!: EventEmitter<void>;\n\n  /**\n   * The state to hold the feedback message.\n   */\n  @State() feedbackMessage: string = '';\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  async componentWillLoad() {\n    debug(`[nylas-feedback-form] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-feedback-form] 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  @Listen('nylasFormInputChanged', { target: 'document' })\n  handleFormInputChanged(event: CustomEvent<{ name: string; value: string }>) {\n    debug(`[nylas-feedback-form] Form input changed`);\n    if (!event.detail.value) {\n      return;\n    }\n    this.triggerValidation.emit();\n    if (event.detail.name === 'feedback') {\n      this.feedbackMessage = event.detail.value;\n    }\n  }\n\n  private handleConfirmBookingButtonClicked = () => {\n    // TODO: Implement feedback submission\n    const validationEvent = this.triggerValidation.emit();\n    if (validationEvent.defaultPrevented) {\n      return;\n    }\n    this.feedbackSubmitted.emit({ feedback: this.feedbackMessage });\n  };\n\n  private closeModal(e: Event) {\n    e.preventDefault();\n    e.stopImmediatePropagation();\n    this.feedbackModalClosed.emit();\n  }\n\n  @RegisterComponent<NylasFeedbackForm, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-feedback-form',\n    stateToProps: new Map([]),\n    eventToProps: {\n      feedbackSubmitted: async (_event: CustomEvent<{ feedback: string }>, _nylasSchedulerConnector: NylasSchedulerConnector) => {\n        // TODO: Implement feedback submission\n      },\n    },\n    localPropsToProp: new Map([['themeConfig', 'themeConfig']]),\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host part=\"nfbf\">\n        <div class=\"card-wrapper\" part=\"nfbfc__card\">\n          <div class=\"close-button\">\n            <button-component tooltip=\"Close\" id=\"close\" variant={'invisible'} onClick={e => this.closeModal(e)} part=\"nfbf__close-button\">\n              <close-icon />\n            </button-component>\n          </div>\n          <div class=\"header\">\n            <h2 slot=\"card-title\" part=\"nfbf__title\">\n              {i18next.t('feedbackFormTitle')}\n            </h2>\n          </div>\n          <div class=\"description title-desc\">\n            <p>{i18next.t('feedbackFormDescription')}</p>\n          </div>\n          <textarea-component\n            label={i18next.t('feedbackMessageLabel')}\n            required={true}\n            maxLength={500}\n            part=\"nfbf__description\"\n            name=\"feedback\"\n            placeholder={i18next.t('feedbackMessagePlaceholder')}\n          />\n          <div class={'description footer-desc'}>\n            <p>\n              By sending this report, you agree to Nylas’ access to the data necessary to respond to this issue, subject to Nylas’{' '}\n              <a href=\"https://www.nylas.com/privacy-policy/\" target=\"_blank\" rel=\"nofollow noreferrer noopener\">\n                Privacy Policy\n              </a>\n              .\n            </p>\n          </div>\n          <div\n            class={{\n              footer: true,\n            }}\n          >\n            <button-component variant={'invisible'} onClick={e => this.closeModal(e)} part=\"nfbf__button-outline nfbf__cancel-cta\">\n              {`${i18next.t('feedbackModalCloseButton')}`}\n            </button-component>\n            <button-component variant={'primary'} onClick={this.handleConfirmBookingButtonClicked} part=\"nfbf__button-outline nfbf__reschedule-cta\">\n              {`${i18next.t('feedbackModalSubmitButton')}`}\n            </button-component>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/nylas-locale-switch.cjs.entry.js

@@ -7,7 +7,7 @@ const constants = require('./constants-2be49d9f.js');
 const registerComponent = require('./register-component-5bbc6027.js');
 const utils = require('./utils-b430227e.js');
 
-const nylasLocaleSwitchCss = ":host{display:block;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif}.nylas-locale-switch{display:flex;flex-direction:row;justify-content:space-between;align-items:center;border-left:none;border-right:none;color:var(--nylas-base-50);font-size:14px;font-weight:600;cursor:pointer;transition:all 0.2s ease-in-out;font-family:inherit}@media screen and (max-width: 768px){.nylas-locale-switch{font-size:16px}}.select-wrapper{display:flex;align-items:center;gap:0.5rem}select{border:none;background:transparent;cursor:pointer;outline:none;background-color:transparent;margin:0 0 1px;padding:4px;vertical-align:middle}select#timezone{width:140px}select#language{width:80px}span.timezone-label{display:flex;width:-webkit-fill-available;justify-content:space-between}select-dropdown{width:auto}select-dropdown::part(sd_dropdown-button){border:none;padding:10px}select-dropdown::part(sd_dropdown-content){max-width:306px}";
+const nylasLocaleSwitchCss = ":host{display:block}.nylas-locale-switch{display:flex;flex-direction:row;justify-content:space-between;align-items:center;border-left:none;border-right:none;color:var(--nylas-base-50);font-size:14px;font-weight:600;cursor:pointer;transition:all 0.2s ease-in-out;font-family:inherit}@media screen and (max-width: 768px){.nylas-locale-switch{font-size:16px}}.select-wrapper{display:flex;align-items:center;gap:0.5rem}select{border:none;background:transparent;cursor:pointer;outline:none;background-color:transparent;margin:0 0 1px;padding:4px;vertical-align:middle}select#timezone{width:140px}select#language{width:80px}span.timezone-label{display:flex;width:-webkit-fill-available;justify-content:space-between}select-dropdown{width:auto}select-dropdown::part(sd_dropdown-button){border:none;padding:10px}select-dropdown::part(sd_dropdown-content){max-width:306px}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -28,12 +28,24 @@ const NylasLocaleSwitch = class {
         index.registerInstance(this, hostRef);
         this.timezoneChanged = index.createEvent(this, "timezoneChanged", 7);
         this.languageChanged = index.createEvent(this, "languageChanged", 7);
+        this.themeConfig = undefined;
         this.selectedTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
         this.selectedLanguage = navigator.language;
     }
     connectedCallback() { }
     disconnectedCallback() { }
     componentWillLoad() { }
+    componentDidLoad() {
+        utils.debug(`[nylas-locale-switch] Component did load`);
+        this.applyThemeConfig(this.themeConfig);
+    }
+    applyThemeConfig(themeConfig) {
+        if (themeConfig) {
+            for (const [key, value] of Object.entries(themeConfig)) {
+                this.host.style.setProperty(`${key}`, value);
+            }
+        }
+    }
     changeTimezone(timezone) {
         this.selectedTimezone = timezone;
         this.timezoneChanged.emit(timezone);
@@ -74,14 +86,15 @@ const NylasLocaleSwitch = class {
             label: constants.LANGUAGE_MAP[key],
             value: key,
         }));
-        return (index.h(index.Host, { key: '8e8ec3819083fb25cb8620f14aa1f140a995ec89' }, index.h("div", { key: '45aaebcd9f80d54dc01b5d611094fa05225c8331', class: "nylas-locale-switch", part: "nls" }, index.h("div", { key: '47d8166b91a3ef742b14e5783338c3701be85eb7', class: {
+        return (index.h(index.Host, { key: 'b964a342758e2cc1194249965483843a2f0fd4e8' }, index.h("div", { key: '3594ab03d8f88d1e073fc20118f424accaf0edfe', class: "nylas-locale-switch", part: "nls" }, index.h("div", { key: '33d4ea2773393f7ff9f3c1db27f280f7291e840b', class: {
                 'select-wrapper': true,
                 'timezone': true,
-            }, part: "nls__timezone" }, index.h("select-dropdown", { key: '71edd2352b6067a18b9ba676495e59c954e6c07d', name: "timezone", options: timezoneOptions, defaultSelectedOption: timezoneOptions.find(op => op.value == this.selectedTimezone), exportparts: "sd_dropdown: nls__timezone-dropdown, sd_dropdown-button: nls__timezone-drop-button, sd_dropdown-button-selected-label: nls__timezone-drop-button-selected-label, sd_dropdown-content: nls__timezone-drop-content, sd_dropdown_label: nls__timezone-drop-label" }, index.h("span", { key: 'f48e3c11a1981e32b75f5425570db0b584db7f51', slot: "select-icon" }, index.h("globe-icon", { key: '6b6721c8d88d715dbcb52d2e2750c22015ac252c', width: "20", height: "20" })))), index.h("div", { key: 'fe652536d637774336cad11a65bba7bfd8636972', class: {
+            }, part: "nls__timezone" }, index.h("select-dropdown", { key: '0b1d65ece722a490eb1dcfc5918e6b88405ec448', name: "timezone", options: timezoneOptions, defaultSelectedOption: timezoneOptions.find(op => op.value == this.selectedTimezone), exportparts: "sd_dropdown: nls__timezone-dropdown, sd_dropdown-button: nls__timezone-drop-button, sd_dropdown-button-selected-label: nls__timezone-drop-button-selected-label, sd_dropdown-content: nls__timezone-drop-content, sd_dropdown_label: nls__timezone-drop-label" }, index.h("span", { key: '639c77c9556d6fba35369fcdb1defb7992e56204', slot: "select-icon" }, index.h("globe-icon", { key: 'c6e230b1c1641079f41491a009103ddd2b460dd9', width: "20", height: "20" })))), index.h("div", { key: '01c9781c4b5f1af16a9bbfa213f13e716eb4fea9', class: {
                 'select-wrapper': true,
                 'language': true,
-            }, part: "nls__language" }, index.h("select-dropdown", { key: 'f83f8dbf84878fb1670d4a6f59b045c111420ce1', name: "language", options: languageOptions, defaultSelectedOption: languageOptions.find(lang => lang.value == this.selectedLanguage), exportparts: "sd_dropdown: nls__language-dropdown, sd_dropdown-button: nls__language-drop-button, sd_dropdown-content: nls__language-drop-content, sd_dropdown_label: nls__language-drop-label" }, index.h("span", { key: '3d66833265053e81c9333b5d36ae822ed3a17878', slot: "select-icon" }, index.h("translate-icon", { key: '30121c5733873930e7e1e3bdaedf11bd2f258139', width: "20", height: "20" })))))));
+            }, part: "nls__language" }, index.h("select-dropdown", { key: 'fbff35839698dafd06e2cd1b50db27e354c4b9af', name: "language", options: languageOptions, defaultSelectedOption: languageOptions.find(lang => lang.value == this.selectedLanguage), exportparts: "sd_dropdown: nls__language-dropdown, sd_dropdown-button: nls__language-drop-button, sd_dropdown-content: nls__language-drop-content, sd_dropdown_label: nls__language-drop-label" }, index.h("span", { key: '34ac931dac3ef169b0a6cd778a8a4d6566e8d012', slot: "select-icon" }, index.h("translate-icon", { key: 'd51f2d743bb8ab718f7a7c6b45d62d96fe11f666', width: "20", height: "20" })))))));
     }
+    get host() { return index.getElement(this); }
 };
 __decorate([
     registerComponent.RegisterComponent({
@@ -100,6 +113,7 @@ __decorate([
                 nylasSchedulerConnector.scheduler.selectLanguage(event.detail);
             },
         },
+        localPropsToProp: new Map([['themeConfig', 'themeConfig']]),
         fireRegisterEvent: true,
     }),
     __metadata("design:type", Function),

package/dist/cjs/nylas-locale-switch.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"nylas-locale-switch.entry.cjs.js","mappings":"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","names":["getTimezoneOffset","h","TIMEZONE_MAP","LANGUAGE_MAP","Host","RegisterComponent","debug"],"sources":["src/components/scheduler/nylas-locale-switch/nylas-locale-switch.scss?tag=nylas-locale-switch&encapsulation=shadow","src/components/scheduler/nylas-locale-switch/nylas-locale-switch.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  @include default-css-variables;\n}\n\n.nylas-locale-switch {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  border-left: none;\n  border-right: none;\n  color: var(--nylas-base-50);\n  font-size: 14px;\n\n  @media #{$mobile} {\n    font-size: 16px;\n  }\n\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.2s ease-in-out;\n  font-family: inherit;\n}\n\n.select-wrapper {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\nselect {\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  outline: none;\n  background-color: transparent;\n  margin: 0 0 1px;\n  padding: 4px;\n  vertical-align: middle;\n\n  &#timezone {\n    width: 140px;\n  }\n\n  &#language {\n    width: 80px;\n  }\n}\n\nspan.timezone-label {\n  display: flex;\n  width: -webkit-fill-available;\n  justify-content: space-between;\n}\n\nselect-dropdown {\n  width: auto;\n}\n\nselect-dropdown::part(sd_dropdown-button) {\n  border: none;\n  padding: 10px;\n}\n\nselect-dropdown::part(sd_dropdown-content) {\n  max-width: 306px;\n}\n","import { LANGUAGE_MAP, TIMEZONE_MAP } from '@/common/constants';\nimport { RegisterComponent } from '@/common/register-component';\nimport { Component, Event, EventEmitter, Host, Listen, Prop, h } from '@stencil/core';\nimport { NylasSchedulerConnector } from '../../../components';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { debug, getTimezoneOffset } from '@/utils/utils';\n\n/**\n * The `nylas-locale-switch` component is a UI component that allows users to select a timezone and language.\n * @part nls - The locale switch container\n * @part nls__timezone - The timezone select container\n * @part nls__timezone-dropdown - The timezone dropdown\n * @part nls__timezone-drop-button - The timezone dropdown button\n * @part nls__timezone-drop-button-selected-label - The timezone dropdown button selected label\n * @part nls__timezone-drop-content - The timezone dropdown content\n * @part nls__timezone-drop-label - The timezone dropdown label\n * @part nls__language - The language select container\n * @part nls__language-dropdown - The language dropdown\n * @part nls__language-drop-button - The language dropdown button\n * @part nls__language-drop-content - The language dropdown content\n * @part nls__language-drop-label - The language dropdown label\n *\n */\n@Component({\n  tag: 'nylas-locale-switch',\n  styleUrl: 'nylas-locale-switch.scss',\n  shadow: true,\n})\nexport class NylasLocaleSwitch {\n  /**\n   * The selected timezone.\n   */\n  @Prop({ mutable: true }) selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n  /**\n   * The selected language.\n   */\n  @Prop({ mutable: true }) selectedLanguage: string = navigator.language;\n\n  /**\n   * This event is fired when the timezone is changed.\n   */\n  @Event() timezoneChanged!: EventEmitter<string>;\n\n  /**\n   * This event is fired when the language is changed.\n   */\n  @Event() languageChanged!: EventEmitter<string>;\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  componentWillLoad() {}\n\n  /**\n   * Change the timezone.\n   * @param timezone The timezone to select.\n   */\n  private changeTimezone(timezone: string) {\n    this.selectedTimezone = timezone;\n    this.timezoneChanged.emit(timezone);\n  }\n\n  /**\n   * Change the language.\n   * @param language The language to select.\n   */\n  private changeLanguage(language: string) {\n    this.selectedLanguage = language;\n    this.languageChanged.emit(language);\n  }\n\n  @Listen('nylasFormDropdownChanged')\n  nylasFormDropdownChangedHandler(\n    event: CustomEvent<{\n      value: string;\n      name: string;\n    }>,\n  ) {\n    const { name, value } = event.detail;\n    if (name === 'timezone') {\n      this.changeTimezone(value);\n    } else if (name === 'language') {\n      this.changeLanguage(value);\n    }\n  }\n\n  getTimezoneLabelHTML(timezone: string) {\n    const offset = getTimezoneOffset(timezone);\n    return (\n      <span\n        class=\"timezone-label\"\n        style={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          width: '-webkit-fill-available',\n        }}\n      >\n        {TIMEZONE_MAP[timezone]}{' '}\n        <span\n          class=\"timezone-offset\"\n          style={{\n            fontSize: '14px',\n            fontWeight: '400',\n            color: 'var(--nylas-base-500)',\n          }}\n        >\n          {offset}\n        </span>\n      </span>\n    );\n  }\n\n  @RegisterComponent<NylasLocaleSwitch, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-locale-switch',\n    stateToProps: new Map([\n      ['scheduler.selectedLanguage', 'selectedLanguage'],\n      ['scheduler.selectedTimezone', 'selectedTimezone'],\n    ]),\n    eventToProps: {\n      timezoneChanged: async (event: CustomEvent<string>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        debug('nylas-locale-switch', 'timezoneChanged', event.detail);\n        nylasSchedulerConnector.scheduler.selectTimezone(event.detail);\n      },\n      languageChanged: async (event: CustomEvent<string>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        debug('nylas-locale-switch', 'languageChanged', event.detail);\n        nylasSchedulerConnector.scheduler.selectLanguage(event.detail);\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    const timezoneOptions = Object.keys(TIMEZONE_MAP).map(key => ({\n      labelHTML: this.getTimezoneLabelHTML(key),\n      label: TIMEZONE_MAP[key],\n      value: key,\n    }));\n    const languageOptions = Object.keys(LANGUAGE_MAP).map(key => ({\n      label: LANGUAGE_MAP[key],\n      value: key,\n    }));\n\n    return (\n      <Host>\n        <div class=\"nylas-locale-switch\" part=\"nls\">\n          <div\n            class={{\n              'select-wrapper': true,\n              'timezone': true,\n            }}\n            part=\"nls__timezone\"\n          >\n            <select-dropdown\n              name=\"timezone\"\n              options={timezoneOptions}\n              defaultSelectedOption={timezoneOptions.find(op => op.value == this.selectedTimezone)}\n              exportparts=\"sd_dropdown: nls__timezone-dropdown, sd_dropdown-button: nls__timezone-drop-button, sd_dropdown-button-selected-label: nls__timezone-drop-button-selected-label, sd_dropdown-content: nls__timezone-drop-content, sd_dropdown_label: nls__timezone-drop-label\"\n            >\n              <span slot=\"select-icon\">\n                <globe-icon width=\"20\" height=\"20\" />\n              </span>\n            </select-dropdown>\n          </div>\n          <div\n            class={{\n              'select-wrapper': true,\n              'language': true,\n            }}\n            part=\"nls__language\"\n          >\n            <select-dropdown\n              name=\"language\"\n              options={languageOptions}\n              defaultSelectedOption={languageOptions.find(lang => lang.value == this.selectedLanguage)}\n              exportparts=\"sd_dropdown: nls__language-dropdown, sd_dropdown-button: nls__language-drop-button, sd_dropdown-content: nls__language-drop-content, sd_dropdown_label: nls__language-drop-label\"\n            >\n              <span slot=\"select-icon\">\n                <translate-icon width=\"20\" height=\"20\" />\n              </span>\n            </select-dropdown>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nylas-locale-switch.entry.cjs.js","mappings":"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","names":["debug","getTimezoneOffset","h","TIMEZONE_MAP","LANGUAGE_MAP","Host","RegisterComponent"],"sources":["src/components/scheduler/nylas-locale-switch/nylas-locale-switch.scss?tag=nylas-locale-switch&encapsulation=shadow","src/components/scheduler/nylas-locale-switch/nylas-locale-switch.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n}\n\n.nylas-locale-switch {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  border-left: none;\n  border-right: none;\n  color: var(--nylas-base-50);\n  font-size: 14px;\n\n  @media #{$mobile} {\n    font-size: 16px;\n  }\n\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.2s ease-in-out;\n  font-family: inherit;\n}\n\n.select-wrapper {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\nselect {\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  outline: none;\n  background-color: transparent;\n  margin: 0 0 1px;\n  padding: 4px;\n  vertical-align: middle;\n\n  &#timezone {\n    width: 140px;\n  }\n\n  &#language {\n    width: 80px;\n  }\n}\n\nspan.timezone-label {\n  display: flex;\n  width: -webkit-fill-available;\n  justify-content: space-between;\n}\n\nselect-dropdown {\n  width: auto;\n}\n\nselect-dropdown::part(sd_dropdown-button) {\n  border: none;\n  padding: 10px;\n}\n\nselect-dropdown::part(sd_dropdown-content) {\n  max-width: 306px;\n}","import { LANGUAGE_MAP, TIMEZONE_MAP } from '@/common/constants';\nimport { RegisterComponent } from '@/common/register-component';\nimport { Component, Element, Event, EventEmitter, Host, Listen, Prop, h } from '@stencil/core';\nimport { NylasSchedulerConnector } from '../../../components';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { debug, getTimezoneOffset } from '@/utils/utils';\nimport { ThemeConfig } from '@nylas/core';\n\n/**\n * The `nylas-locale-switch` component is a UI component that allows users to select a timezone and language.\n * @part nls - The locale switch container\n * @part nls__timezone - The timezone select container\n * @part nls__timezone-dropdown - The timezone dropdown\n * @part nls__timezone-drop-button - The timezone dropdown button\n * @part nls__timezone-drop-button-selected-label - The timezone dropdown button selected label\n * @part nls__timezone-drop-content - The timezone dropdown content\n * @part nls__timezone-drop-label - The timezone dropdown label\n * @part nls__language - The language select container\n * @part nls__language-dropdown - The language dropdown\n * @part nls__language-drop-button - The language dropdown button\n * @part nls__language-drop-content - The language dropdown content\n * @part nls__language-drop-label - The language dropdown label\n *\n */\n@Component({\n  tag: 'nylas-locale-switch',\n  styleUrl: 'nylas-locale-switch.scss',\n  shadow: true,\n})\nexport class NylasLocaleSwitch {\n  /**\n   * The host element.\n   * Used to manage the host element of the provider.\n   */\n  @Element() private host!: HTMLNylasLocaleSwitchElement;\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({ mutable: true }) selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n  /**\n   * The selected language.\n   */\n  @Prop({ mutable: true }) selectedLanguage: string = navigator.language;\n\n  /**\n   * This event is fired when the timezone is changed.\n   */\n  @Event() timezoneChanged!: EventEmitter<string>;\n\n  /**\n   * This event is fired when the language is changed.\n   */\n  @Event() languageChanged!: EventEmitter<string>;\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  componentWillLoad() {}\n\n  componentDidLoad() {\n    debug(`[nylas-locale-switch] 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  /**\n   * Change the timezone.\n   * @param timezone The timezone to select.\n   */\n  private changeTimezone(timezone: string) {\n    this.selectedTimezone = timezone;\n    this.timezoneChanged.emit(timezone);\n  }\n\n  /**\n   * Change the language.\n   * @param language The language to select.\n   */\n  private changeLanguage(language: string) {\n    this.selectedLanguage = language;\n    this.languageChanged.emit(language);\n  }\n\n  @Listen('nylasFormDropdownChanged')\n  nylasFormDropdownChangedHandler(\n    event: CustomEvent<{\n      value: string;\n      name: string;\n    }>,\n  ) {\n    const { name, value } = event.detail;\n    if (name === 'timezone') {\n      this.changeTimezone(value);\n    } else if (name === 'language') {\n      this.changeLanguage(value);\n    }\n  }\n\n  getTimezoneLabelHTML(timezone: string) {\n    const offset = getTimezoneOffset(timezone);\n    return (\n      <span\n        class=\"timezone-label\"\n        style={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          width: '-webkit-fill-available',\n        }}\n      >\n        {TIMEZONE_MAP[timezone]}{' '}\n        <span\n          class=\"timezone-offset\"\n          style={{\n            fontSize: '14px',\n            fontWeight: '400',\n            color: 'var(--nylas-base-500)',\n          }}\n        >\n          {offset}\n        </span>\n      </span>\n    );\n  }\n\n  @RegisterComponent<NylasLocaleSwitch, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-locale-switch',\n    stateToProps: new Map([\n      ['scheduler.selectedLanguage', 'selectedLanguage'],\n      ['scheduler.selectedTimezone', 'selectedTimezone'],\n    ]),\n    eventToProps: {\n      timezoneChanged: async (event: CustomEvent<string>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        debug('nylas-locale-switch', 'timezoneChanged', event.detail);\n        nylasSchedulerConnector.scheduler.selectTimezone(event.detail);\n      },\n      languageChanged: async (event: CustomEvent<string>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        debug('nylas-locale-switch', 'languageChanged', event.detail);\n        nylasSchedulerConnector.scheduler.selectLanguage(event.detail);\n      },\n    },\n    localPropsToProp: new Map([['themeConfig', 'themeConfig']]),\n    fireRegisterEvent: true,\n  })\n  render() {\n    const timezoneOptions = Object.keys(TIMEZONE_MAP).map(key => ({\n      labelHTML: this.getTimezoneLabelHTML(key),\n      label: TIMEZONE_MAP[key],\n      value: key,\n    }));\n    const languageOptions = Object.keys(LANGUAGE_MAP).map(key => ({\n      label: LANGUAGE_MAP[key],\n      value: key,\n    }));\n\n    return (\n      <Host>\n        <div class=\"nylas-locale-switch\" part=\"nls\">\n          <div\n            class={{\n              'select-wrapper': true,\n              'timezone': true,\n            }}\n            part=\"nls__timezone\"\n          >\n            <select-dropdown\n              name=\"timezone\"\n              options={timezoneOptions}\n              defaultSelectedOption={timezoneOptions.find(op => op.value == this.selectedTimezone)}\n              exportparts=\"sd_dropdown: nls__timezone-dropdown, sd_dropdown-button: nls__timezone-drop-button, sd_dropdown-button-selected-label: nls__timezone-drop-button-selected-label, sd_dropdown-content: nls__timezone-drop-content, sd_dropdown_label: nls__timezone-drop-label\"\n            >\n              <span slot=\"select-icon\">\n                <globe-icon width=\"20\" height=\"20\" />\n              </span>\n            </select-dropdown>\n          </div>\n          <div\n            class={{\n              'select-wrapper': true,\n              'language': true,\n            }}\n            part=\"nls__language\"\n          >\n            <select-dropdown\n              name=\"language\"\n              options={languageOptions}\n              defaultSelectedOption={languageOptions.find(lang => lang.value == this.selectedLanguage)}\n              exportparts=\"sd_dropdown: nls__language-dropdown, sd_dropdown-button: nls__language-drop-button, sd_dropdown-content: nls__language-drop-content, sd_dropdown_label: nls__language-drop-label\"\n            >\n              <span slot=\"select-icon\">\n                <translate-icon width=\"20\" height=\"20\" />\n              </span>\n            </select-dropdown>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/nylas-organizer-confirmation-card.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-c14ea8f5.js');
 const registerComponent = require('./register-component-5bbc6027.js');
 const utils = require('./utils-b430227e.js');
 
-const nylasOrganizerConfirmationCardCss = ":host{display:block;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif}.event-card-wrapper{height:inherit;display:flex;flex-direction:column;justify-content:space-between;align-items:center;font-family:var(--nylas-font-family);background-color:var(--nylas-base-0);color:var(--nylas-base-900);border-radius:var(--nylas-border-radius-3x);position:relative;margin-top:1rem;width:424px;box-shadow:0px 1px 4px rgba(0, 0, 0, 0.1), 0px 3px 6px rgba(0, 0, 0, 0.06)}@media screen and (max-width: 768px){.event-card-wrapper{width:100%;border-radius:0px}}.calendar-icon{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:50%;position:absolute;top:-1.25rem;left:50%;transform:translateX(-50%);background-color:var(--nylas-base-0);border:1px solid var(--nylas-base-200);color:var(--nylas-base-700)}.booked-event-header{margin:1.5rem 4rem;overflow-wrap:anywhere;display:flex;align-items:center;flex-direction:column;font-size:1rem;font-weight:400}.booked-event-header h2{color:var(--nylas-base-600);margin-top:1.5rem;margin-bottom:0.25rem;font-size:1.125rem;font-weight:600}.manage-booking-description{border-top:1px solid var(--nylas-base-200)}.manage-booking-description p{font-size:16px;margin:1rem;padding:0.5rem 1rem;font-weight:400;color:var(--nylas-base-800)}.footer{padding:0.5rem;display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;box-sizing:border-box;background-color:var(--nylas-base-25);width:100%;border-radius:0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x)}.footer.no-template-cols{grid-template-columns:1fr}.footer.no-footer{display:none}sp-divider{background-color:var(--nylas-base-200);height:1px}calendar-check-icon{display:flex;align-items:center;justify-content:center;height:100%}button-component{--dot-color:var(--nylas-base-700)}";
+const nylasOrganizerConfirmationCardCss = ":host{display:block}.event-card-wrapper{height:inherit;display:flex;flex-direction:column;justify-content:space-between;align-items:center;font-family:var(--nylas-font-family);background-color:var(--nylas-base-0);color:var(--nylas-base-900);border-radius:var(--nylas-border-radius-3x);position:relative;margin-top:1rem;width:424px;box-shadow:0px 1px 4px rgba(0, 0, 0, 0.1), 0px 3px 6px rgba(0, 0, 0, 0.06)}@media screen and (max-width: 768px){.event-card-wrapper{width:100%;border-radius:0px}}.calendar-icon{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:50%;position:absolute;top:-1.25rem;left:50%;transform:translateX(-50%);background-color:var(--nylas-base-0);border:1px solid var(--nylas-base-200);color:var(--nylas-base-700)}.booked-event-header{margin:1.5rem 4rem;overflow-wrap:anywhere;display:flex;align-items:center;flex-direction:column;font-size:1rem;font-weight:400}.booked-event-header h2{color:var(--nylas-base-600);margin-top:1.5rem;margin-bottom:0.25rem;font-size:1.125rem;font-weight:600}.manage-booking-description{border-top:1px solid var(--nylas-base-200)}.manage-booking-description p{font-size:16px;margin:1rem;padding:0.5rem 1rem;font-weight:400;color:var(--nylas-base-800)}.footer{padding:0.5rem;display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;box-sizing:border-box;background-color:var(--nylas-base-25);width:100%;border-radius:0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x)}.footer.no-template-cols{grid-template-columns:1fr}.footer.no-footer{display:none}sp-divider{background-color:var(--nylas-base-200);height:1px}calendar-check-icon{display:flex;align-items:center;justify-content:center;height:100%}button-component{--dot-color:var(--nylas-base-700)}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -45,6 +45,7 @@ const NylasOrganizerConfirmationCard = class {
         };
         this.configSettings = undefined;
         this.isLoading = undefined;
+        this.themeConfig = undefined;
         this.organizerConfirmationBookingId = undefined;
         this.selectedLanguage = navigator.language;
         this.action = null;
@@ -56,12 +57,20 @@ const NylasOrganizerConfirmationCard = class {
     }
     async componentDidLoad() {
         utils.debug(`[nylas-organizer-confirmation-card] Component did load`);
+        this.applyThemeConfig(this.themeConfig);
+    }
+    applyThemeConfig(themeConfig) {
+        if (themeConfig) {
+            for (const [key, value] of Object.entries(themeConfig)) {
+                this.host.style.setProperty(`${key}`, value);
+            }
+        }
     }
     async resetAction() {
         this.action = null;
     }
     render() {
-        return (index.h(index.Host, { key: 'c722e5ad0c458060b988e0a49fde079d8258125e', part: "nmcc" }, index.h("div", { key: '758b60b6834f7150a30434538707f321754f9f8b', class: "event-card-wrapper", part: "nmccc__card" }, index.h("div", { key: '675e8ab2297fefe3840eb06b536706e216cd525a', class: "calendar-icon" }, index.h("calendar-check-icon", { key: '56768b41e1abebb836619f1da25fdba7b0b32203' })), index.h("div", { key: 'a026a0daa62a4bf5054682a93c19f296b4761d31', class: "booked-event-header" }, index.h("h2", { key: '38ba7f91abcde16f459f50a3638245e2c994f4f5', slot: "card-title", part: "nmcc__title" }, !!this.organizerConfirmationBookingId && `${utils.instance.t('bookingPendingTitle')}!`)), index.h("div", { key: '4ca2d5bd6cf71f624bb2eed64c0f8c44089adc0a', class: "manage-booking-description" }, index.h("p", { key: '6584d4ac6e59c6b4156f886a6903d05dcef37c3a' }, utils.instance.t('bookingPendingnDescription'))), index.h("div", { key: '805a279cbff4f92eb91f150146a6d5688945ffe6', class: {
+        return (index.h(index.Host, { key: 'd9ca934419385dcf0917c80e70c3efb3d7b18a02', part: "nmcc" }, index.h("div", { key: 'b5b0a918984758dbf80f3218610537bfbec693e4', class: "event-card-wrapper", part: "nmccc__card" }, index.h("div", { key: 'cd26edd3af7815576337f88b5a76ee1cc9335ec0', class: "calendar-icon" }, index.h("calendar-check-icon", { key: '3cf29fd30584c2fac6a4e1eecce9e55b8c4beb55' })), index.h("div", { key: 'ecc73f4ceff1887502714daa5034b42754ca1f46', class: "booked-event-header" }, index.h("h2", { key: '2b3233840408bba3fcb29b631e6329148fdeaeaf', slot: "card-title", part: "nmcc__title" }, !!this.organizerConfirmationBookingId && `${utils.instance.t('bookingPendingTitle')}!`)), index.h("div", { key: '7e85b7a9d30895a2bf319185cb3b5b6856894638', class: "manage-booking-description" }, index.h("p", { key: '644084700e961abcd2b910dcb0631ebfcfbc2a1c' }, utils.instance.t('bookingPendingnDescription'))), index.h("div", { key: '67a549c866b7ba2137bed4ab4af2da4a9c989f0b', class: {
                 'footer': true,
                 'no-footer': this.configSettings?.scheduler?.hide_cancellation_options && this.configSettings?.scheduler?.hide_rescheduling_options,
                 'no-template-cols': this.configSettings?.scheduler?.hide_cancellation_options || this.configSettings?.scheduler?.hide_rescheduling_options,
@@ -95,6 +104,7 @@ __decorate([
                 await host.resetAction();
             },
         },
+        localPropsToProp: new Map([['themeConfig', 'themeConfig']]),
         fireRegisterEvent: true,
     }),
     __metadata("design:type", Function),

package/dist/cjs/nylas-organizer-confirmation-card.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"nylas-organizer-confirmation-card.entry.cjs.js","mappings":"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","names":["debug","h","Host","i18next","RegisterComponent"],"sources":["src/components/scheduler/nylas-organizer-confirmation-card/nylas-organizer-confirmation-card.scss?tag=nylas-organizer-confirmation-card&encapsulation=shadow","src/components/scheduler/nylas-organizer-confirmation-card/nylas-organizer-confirmation-card.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  @include default-css-variables;\n}\n\n.event-card-wrapper {\n  height: inherit;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: center;\n  font-family: var(--nylas-font-family);\n  background-color: var(--nylas-base-0);\n  color: var(--nylas-base-900);\n  border-radius: var(--nylas-border-radius-3x);\n  position: relative;\n  margin-top: 1rem;\n  width: 424px;\n\n  @media #{$mobile} {\n    width: 100%;\n    border-radius: 0px;\n  }\n\n  box-shadow:\n    0px 1px 4px rgba(0, 0, 0, 0.1),\n    0px 3px 6px rgba(0, 0, 0, 0.06);\n}\n\n.calendar-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 3rem;\n  height: 3rem;\n  border-radius: 50%;\n  position: absolute;\n  top: -1.25rem;\n  left: 50%;\n  transform: translateX(-50%);\n  background-color: var(--nylas-base-0);\n  border: 1px solid var(--nylas-base-200);\n  color: var(--nylas-base-700);\n}\n\n.booked-event-header {\n  margin: 1.5rem 4rem;\n  overflow-wrap: anywhere;\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  font-size: 1rem;\n  font-weight: 400;\n\n  h2 {\n    color: var(--nylas-base-600);\n    margin-top: 1.5rem;\n    margin-bottom: 0.25rem;\n    font-size: 1.125rem;\n    font-weight: 600;\n  }\n}\n\n.manage-booking-description {\n  border-top: 1px solid var(--nylas-base-200);\n\n  p {\n    font-size: 16px;\n    margin: 1rem;\n    padding: 0.5rem 1rem;\n    font-weight: 400;\n    color: var(--nylas-base-800);\n  }\n}\n\n.footer {\n  padding: 0.5rem;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 0.5rem;\n  box-sizing: border-box;\n  background-color: var(--nylas-base-25);\n  width: 100%;\n  border-radius: 0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x);\n\n  &.no-template-cols {\n    grid-template-columns: 1fr;\n  }\n\n  &.no-footer {\n    display: none;\n  }\n}\n\nsp-divider {\n  background-color: var(--nylas-base-200);\n  height: 1px;\n}\n\ncalendar-check-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n\nbutton-component {\n  --dot-color: var(--nylas-base-700);\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { Component, Element, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport { ConfigSettings, NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { debug } from '@/utils/utils';\nimport { Event } from '@stencil/core';\nimport { NylasSchedulerErrorResponse } 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   * 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  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  }\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    ]),\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              'no-footer': this.configSettings?.scheduler?.hide_cancellation_options && this.configSettings?.scheduler?.hide_rescheduling_options,\n              'no-template-cols': this.configSettings?.scheduler?.hide_cancellation_options || this.configSettings?.scheduler?.hide_rescheduling_options,\n            }}\n          >\n            {!this.configSettings?.scheduler?.hide_cancellation_options && (\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            )}\n            {!this.configSettings?.scheduler?.hide_rescheduling_options && (\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            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nylas-organizer-confirmation-card.entry.cjs.js","mappings":"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","names":["debug","h","Host","i18next","RegisterComponent"],"sources":["src/components/scheduler/nylas-organizer-confirmation-card/nylas-organizer-confirmation-card.scss?tag=nylas-organizer-confirmation-card&encapsulation=shadow","src/components/scheduler/nylas-organizer-confirmation-card/nylas-organizer-confirmation-card.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n}\n\n.event-card-wrapper {\n  height: inherit;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: center;\n  font-family: var(--nylas-font-family);\n  background-color: var(--nylas-base-0);\n  color: var(--nylas-base-900);\n  border-radius: var(--nylas-border-radius-3x);\n  position: relative;\n  margin-top: 1rem;\n  width: 424px;\n\n  @media #{$mobile} {\n    width: 100%;\n    border-radius: 0px;\n  }\n\n  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1),\n  0px 3px 6px rgba(0, 0, 0, 0.06);\n}\n\n.calendar-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 3rem;\n  height: 3rem;\n  border-radius: 50%;\n  position: absolute;\n  top: -1.25rem;\n  left: 50%;\n  transform: translateX(-50%);\n  background-color: var(--nylas-base-0);\n  border: 1px solid var(--nylas-base-200);\n  color: var(--nylas-base-700);\n}\n\n.booked-event-header {\n  margin: 1.5rem 4rem;\n  overflow-wrap: anywhere;\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  font-size: 1rem;\n  font-weight: 400;\n\n  h2 {\n    color: var(--nylas-base-600);\n    margin-top: 1.5rem;\n    margin-bottom: 0.25rem;\n    font-size: 1.125rem;\n    font-weight: 600;\n  }\n}\n\n.manage-booking-description {\n  border-top: 1px solid var(--nylas-base-200);\n\n  p {\n    font-size: 16px;\n    margin: 1rem;\n    padding: 0.5rem 1rem;\n    font-weight: 400;\n    color: var(--nylas-base-800);\n  }\n}\n\n.footer {\n  padding: 0.5rem;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 0.5rem;\n  box-sizing: border-box;\n  background-color: var(--nylas-base-25);\n  width: 100%;\n  border-radius: 0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x);\n\n  &.no-template-cols {\n    grid-template-columns: 1fr;\n  }\n\n  &.no-footer {\n    display: none;\n  }\n}\n\nsp-divider {\n  background-color: var(--nylas-base-200);\n  height: 1px;\n}\n\ncalendar-check-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n\nbutton-component {\n  --dot-color: var(--nylas-base-700);\n}","import { RegisterComponent } from '@/common/register-component';\nimport { Component, Element, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport { ConfigSettings, NylasSchedulerConnector } from '../../..';\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  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    ]),\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    localPropsToProp: new Map([['themeConfig', 'themeConfig']]),\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              'no-footer': this.configSettings?.scheduler?.hide_cancellation_options && this.configSettings?.scheduler?.hide_rescheduling_options,\n              'no-template-cols': this.configSettings?.scheduler?.hide_cancellation_options || this.configSettings?.scheduler?.hide_rescheduling_options,\n            }}\n          >\n            {!this.configSettings?.scheduler?.hide_cancellation_options && (\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            )}\n            {!this.configSettings?.scheduler?.hide_rescheduling_options && (\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            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/nylas-scheduling.cjs.entry.js

@@ -126,7 +126,7 @@ const NylasScheduling = class {
         if (this.enableUserFeedback && !index$1.isInitialized()) {
             index$1.init({
                 dsn: 'https://9d5731f1c77ca84c9ed3fb9b3ccf7ee1@o74852.ingest.us.sentry.io/4507889638178816',
-                release: "1.1.5",
+                release: "1.1.6",
                 integrations: integrations => [
                     ...integrations.filter(_integration => false),
                     index$1.feedbackSyncIntegration({
@@ -423,7 +423,7 @@ const NylasScheduling = class {
             captureContext: {
                 tags: {
                     'nylas-web-element': 'nylas-schduling',
-                    'nylas-web-element-version': "1.1.5",
+                    'nylas-web-element-version': "1.1.6",
                 },
                 extra: {
                     configId: this.configurationId,
@@ -510,7 +510,8 @@ const NylasScheduling = class {
             }
         }
     }
-    onFeedbackClick() {
+    onFeedbackClick(e) {
+        e.preventDefault();
         this.showFeedbackModal = true;
     }
     redirectToCustomUrl(url) {
@@ -536,16 +537,16 @@ const NylasScheduling = class {
                 ? utils.capitalizeFirstLetter(selectedDate.toLocaleDateString(constants.LANGUAGE_CODE_MAP[this.language], { dateStyle: 'full' }))
                 : `${utils.instance.t('noDateSelected')}`;
         if (showDefaultScheduler && (cancelBookingId || rejectBookingId) && !cancelledEventInfo) {
-            return (index.h(index.Host, null, index.h(SchedulerView, { nylasBranding: nylasBranding, isLoading: this.isLoading, showNotification: this.showNotification }, index.h("div", { class: "cancel-flow-page", part: "cancel-flow-page" }, index.h("nylas-cancel-booking-form", { selectedTimeslot: selectedTimeslot, cancelBookingId: cancelBookingId, rejectBookingId: rejectBookingId, exportparts: "ncbf, ncbf__icon, ncbf__title, ncbf__description, ncbf__reason-textarea, ncbf__button-cta, ncbf__button-outline, ncbf__card" }))), this.enableUserFeedback && (index.h("button-component", { id: "report-issue", variant: 'basic', onClick: () => this.onFeedbackClick() }, index.h("feedback-icon", null))), this.showFeedbackModal && index.h("nylas-feedback-form", null)));
+            return (index.h(index.Host, null, index.h(SchedulerView, { nylasBranding: nylasBranding, isLoading: this.isLoading, showNotification: this.showNotification }, index.h("div", { class: "cancel-flow-page", part: "cancel-flow-page" }, index.h("nylas-cancel-booking-form", { selectedTimeslot: selectedTimeslot, cancelBookingId: cancelBookingId, rejectBookingId: rejectBookingId, exportparts: "ncbf, ncbf__icon, ncbf__title, ncbf__description, ncbf__reason-textarea, ncbf__button-cta, ncbf__button-outline, ncbf__card" }))), this.enableUserFeedback && (index.h("button-component", { id: "report-issue", variant: 'basic', onClick: e => this.onFeedbackClick(e) }, index.h("feedback-icon", null))), this.showFeedbackModal && index.h("nylas-feedback-form", null)));
         }
         if (showDefaultScheduler && organizerConfirmationBookingId) {
-            return (index.h(index.Host, null, index.h(SchedulerView, null, index.h("div", { class: "manual-confirmation-page", part: "manual-confirmation-page" }, index.h("nylas-organizer-confirmation-card", { organizerConfirmationBookingId: organizerConfirmationBookingId, exportparts: "nmcc, nmcc__title, nmcc__description, nmcc__button-cta, nmcc__button-outline" }))), this.enableUserFeedback && (index.h("button-component", { id: "report-issue", variant: 'basic', onClick: () => this.onFeedbackClick() }, index.h("feedback-icon", null))), this.showFeedbackModal && index.h("nylas-feedback-form", null)));
+            return (index.h(index.Host, null, index.h(SchedulerView, null, index.h("div", { class: "manual-confirmation-page", part: "manual-confirmation-page" }, index.h("nylas-organizer-confirmation-card", { organizerConfirmationBookingId: organizerConfirmationBookingId, exportparts: "nmcc, nmcc__title, nmcc__description, nmcc__button-cta, nmcc__button-outline" }))), this.enableUserFeedback && (index.h("button-component", { id: "report-issue", variant: 'basic', onClick: e => this.onFeedbackClick(e) }, index.h("feedback-icon", null))), this.showFeedbackModal && index.h("nylas-feedback-form", null)));
         }
         if (showDefaultScheduler && cancelledEventInfo) {
-            return (index.h(index.Host, null, index.h(SchedulerView, { nylasBranding: nylasBranding, isLoading: this.isLoading, showNotification: this.showNotification }, index.h("div", { class: "cancelled-event-page", part: "cancelled-event-page" }, index.h("nylas-cancelled-event-card", { cancelledEventInfo: cancelledEventInfo, exportparts: "ncec, ncec__icon, ncec__title, ncec__description, ncec__button-outline, ncec__card" }))), this.enableUserFeedback && (index.h("button-component", { id: "report-issue", variant: 'basic', onClick: () => this.onFeedbackClick() }, index.h("feedback-icon", null))), this.showFeedbackModal && index.h("nylas-feedback-form", null)));
+            return (index.h(index.Host, null, index.h(SchedulerView, { nylasBranding: nylasBranding, isLoading: this.isLoading, showNotification: this.showNotification }, index.h("div", { class: "cancelled-event-page", part: "cancelled-event-page" }, index.h("nylas-cancelled-event-card", { cancelledEventInfo: cancelledEventInfo, exportparts: "ncec, ncec__icon, ncec__title, ncec__description, ncec__button-outline, ncec__card" }))), this.enableUserFeedback && (index.h("button-component", { id: "report-issue", variant: 'basic', onClick: e => this.onFeedbackClick(e) }, index.h("feedback-icon", null))), this.showFeedbackModal && index.h("nylas-feedback-form", null)));
         }
         if (showDefaultScheduler && confirmedEventInfo) {
-            return (index.h(index.Host, null, index.h(SchedulerView, { nylasBranding: nylasBranding, isLoading: this.isLoading, showNotification: this.showNotification }, index.h("div", { class: "cancelled-event-page", part: "confirmed-event-page" }, index.h("nylas-confirmed-event-card", { confirmedEventInfo: confirmedEventInfo, exportparts: "ncec, ncec__icon, ncec__title, ncec__description, ncec__button-outline, ncec__card" }))), this.enableUserFeedback && (index.h("button-component", { id: "report-issue", variant: 'basic', onClick: () => this.onFeedbackClick() }, index.h("feedback-icon", null))), this.showFeedbackModal && index.h("nylas-feedback-form", null)));
+            return (index.h(index.Host, null, index.h(SchedulerView, { nylasBranding: nylasBranding, isLoading: this.isLoading, showNotification: this.showNotification }, index.h("div", { class: "cancelled-event-page", part: "confirmed-event-page" }, index.h("nylas-confirmed-event-card", { confirmedEventInfo: confirmedEventInfo, exportparts: "ncec, ncec__icon, ncec__title, ncec__description, ncec__button-outline, ncec__card" }))), this.enableUserFeedback && (index.h("button-component", { id: "report-issue", variant: 'basic', onClick: e => this.onFeedbackClick(e) }, index.h("feedback-icon", null))), this.showFeedbackModal && index.h("nylas-feedback-form", null)));
         }
         if (showDefaultScheduler && eventInfo && redirectUrl) {
             const recipient = this.bookingInfoConfirmed?.primaryParticipant;
@@ -579,14 +580,14 @@ const NylasScheduling = class {
             return;
         }
         if (showDefaultScheduler && eventInfo) {
-            return (index.h(index.Host, null, index.h(SchedulerView, { nylasBranding: nylasBranding, isLoading: this.isLoading, showNotification: this.showNotification }, index.h("div", { class: "booked-event-page", part: "booked-event-page" }, index.h("nylas-booked-event-card", { selectedTimeslot: selectedTimeslot, eventInfo: eventInfo, exportparts: "nbec, nbec__title, nbec__card, nbec__description, nbec__button-outline, nbec__cancel-cta, nbec__reschedule-cta" }))), this.enableUserFeedback && (index.h("button-component", { id: "report-issue", variant: 'basic', onClick: () => this.onFeedbackClick() }, index.h("feedback-icon", null))), this.showFeedbackModal && index.h("nylas-feedback-form", null)));
+            return (index.h(index.Host, null, index.h(SchedulerView, { nylasBranding: nylasBranding, isLoading: this.isLoading, showNotification: this.showNotification }, index.h("div", { class: "booked-event-page", part: "booked-event-page" }, index.h("nylas-booked-event-card", { selectedTimeslot: selectedTimeslot, eventInfo: eventInfo, exportparts: "nbec, nbec__title, nbec__card, nbec__description, nbec__button-outline, nbec__cancel-cta, nbec__reschedule-cta" }))), this.enableUserFeedback && (index.h("button-component", { id: "report-issue", variant: 'basic', onClick: e => this.onFeedbackClick(e) }, index.h("feedback-icon", null))), this.showFeedbackModal && index.h("nylas-feedback-form", null)));
         }
         if (showDefaultScheduler && (!eventInfo || !!rescheduleBookingId) && !showBookingForm) {
             const timeslotPickerCTALabel = this.host.querySelector('[slot="timeslot-picker-cta-label"]');
-            return (index.h(index.Host, null, index.h(SchedulerView, { nylasBranding: nylasBranding, isLoading: this.isLoading, showNotification: this.showNotification }, rescheduleBookingId && index.h(MessageBanner, null, `${utils.instance.t('rescheduleTitle')}`), index.h("div", { class: "select-date-page", part: "select-date-page" }, index.h("div", { class: "left-panel" }, index.h("nylas-date-picker", { exportparts: "ndp, ndp__title, ndp__month-header, ndp__month-button, ndp__day, ndp__date, ndp__date--disabled, ndp__date--selected, ndp__date--current-day, ndp__date--current-month" }), index.h("nylas-locale-switch", { exportparts: "nls, nls__timezone, nls__timezone-dropdown, nls__timezone-drop-button, nls__timezone-drop-button-selected-label, nls__timezone-drop-content, nls__timezone-drop-label, nls__language, nls__language-dropdown, nls__language-drop-button, nls__language-drop-content, nls__language-drop-label" })), index.h("div", { class: `right-panel ${rescheduleBookingId ? 'reschedule' : ''}` }, index.h("h2", null, index.h("calendar-icon", null), index.h("span", { id: "selectedDate" }, this.selectedDateLabel)), index.h("nylas-timeslot-picker", { exportparts: "ntp, ntp__timeslot, ntp__timeslot--selected, ntp__button-primary" }, timeslotPickerCTALabel && (index.h("span", { slot: "timeslot-picker-cta-label" }, index.h("slot", { name: "timeslot-picker-cta-label" }))))))), this.enableUserFeedback && (index.h("button-component", { id: "report-issue", variant: 'basic', onClick: () => this.onFeedbackClick() }, index.h("feedback-icon", null))), this.showFeedbackModal && index.h("nylas-feedback-form", null)));
+            return (index.h(index.Host, null, index.h(SchedulerView, { nylasBranding: nylasBranding, isLoading: this.isLoading, showNotification: this.showNotification }, rescheduleBookingId && index.h(MessageBanner, null, `${utils.instance.t('rescheduleTitle')}`), index.h("div", { class: "select-date-page", part: "select-date-page" }, index.h("div", { class: "left-panel" }, index.h("nylas-date-picker", { exportparts: "ndp, ndp__title, ndp__month-header, ndp__month-button, ndp__day, ndp__date, ndp__date--disabled, ndp__date--selected, ndp__date--current-day, ndp__date--current-month" }), index.h("nylas-locale-switch", { exportparts: "nls, nls__timezone, nls__timezone-dropdown, nls__timezone-drop-button, nls__timezone-drop-button-selected-label, nls__timezone-drop-content, nls__timezone-drop-label, nls__language, nls__language-dropdown, nls__language-drop-button, nls__language-drop-content, nls__language-drop-label" })), index.h("div", { class: `right-panel ${rescheduleBookingId ? 'reschedule' : ''}` }, index.h("h2", null, index.h("calendar-icon", null), index.h("span", { id: "selectedDate" }, this.selectedDateLabel)), index.h("nylas-timeslot-picker", { exportparts: "ntp, ntp__timeslot, ntp__timeslot--selected, ntp__button-primary" }, timeslotPickerCTALabel && (index.h("span", { slot: "timeslot-picker-cta-label" }, index.h("slot", { name: "timeslot-picker-cta-label" }))))))), this.enableUserFeedback && (index.h("button-component", { id: "report-issue", variant: 'basic', onClick: e => this.onFeedbackClick(e) }, index.h("feedback-icon", null))), this.showFeedbackModal && index.h("nylas-feedback-form", null)));
         }
         if (showDefaultScheduler && !eventInfo && showBookingForm) {
-            return (index.h(index.Host, null, index.h(SchedulerView, { nylasBranding: nylasBranding, isLoading: this.isLoading, showNotification: this.showNotification }, rescheduleBookingId && index.h(MessageBanner, null, `${utils.instance.t('rescheduleTitle')}`), index.h("div", { class: "additional-data-page", part: "additional-data-page" }, index.h("div", { class: "left-panel" }, index.h("div", { class: "wrapper" }, index.h("nylas-selected-event-card", { exportparts: "nsec, nsec__card, nsec__icon, nsec__date, nsec__time, nsec__timezone" }))), index.h("div", { class: `right-panel ${rescheduleBookingId ? 'reschedule' : ''}` }, index.h("nylas-booking-form", { exportparts: "nbf, nbf__input-textfield, nbf__button-ghost, nbf__button-outline, nbf__button-primary, nbf__input-wrapper, nbf__checkbox-component, nbf__radio-button-group, nbf__textarea-component, nbf__dropdown, nbf__dropdown-button, nbf__dropdown-content" })))), this.enableUserFeedback && (index.h("button-component", { id: "report-issue", variant: 'basic', onClick: () => this.onFeedbackClick() }, index.h("feedback-icon", null))), this.showFeedbackModal && index.h("nylas-feedback-form", null)));
+            return (index.h(index.Host, null, index.h(SchedulerView, { nylasBranding: nylasBranding, isLoading: this.isLoading, showNotification: this.showNotification }, rescheduleBookingId && index.h(MessageBanner, null, `${utils.instance.t('rescheduleTitle')}`), index.h("div", { class: "additional-data-page", part: "additional-data-page" }, index.h("div", { class: "left-panel" }, index.h("div", { class: "wrapper" }, index.h("nylas-selected-event-card", { exportparts: "nsec, nsec__card, nsec__icon, nsec__date, nsec__time, nsec__timezone" }))), index.h("div", { class: `right-panel ${rescheduleBookingId ? 'reschedule' : ''}` }, index.h("nylas-booking-form", { exportparts: "nbf, nbf__input-textfield, nbf__button-ghost, nbf__button-outline, nbf__button-primary, nbf__input-wrapper, nbf__checkbox-component, nbf__radio-button-group, nbf__textarea-component, nbf__dropdown, nbf__dropdown-button, nbf__dropdown-content" })))), this.enableUserFeedback && (index.h("button-component", { id: "report-issue", variant: 'basic', onClick: e => this.onFeedbackClick(e) }, index.h("feedback-icon", null))), this.showFeedbackModal && index.h("nylas-feedback-form", null)));
         }
         return (index.h(index.Host, null, index.h("slot", null)));
     }