@nylas/web-elements 1.1.5 → 1.1.6

package/dist/esm/nylas-confirmed-event-card.entry.js

@@ -1,8 +1,8 @@
-import { r as registerInstance, a as createEvent, h, i as Host } from './index-b5cb18eb.js';
+import { r as registerInstance, a as createEvent, h, i as Host, e as getElement } from './index-b5cb18eb.js';
 import { R as RegisterComponent } from './register-component-e6af12c1.js';
 import { a as debug, i as instance } from './utils-8defae4b.js';
 
-const nylasConfirmedEventCardCss = ":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-confirmed-event-card{height:inherit;display:flex;flex-direction:column;justify-content:space-between;align-items:center;font-family:var(--nylas-font-family);width:400px;background-color:var(--nylas-base-0);color:var(--nylas-base-800);border-radius:var(--nylas-border-radius-2x);padding:1.5rem;position:relative;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){.nylas-confirmed-event-card{width:inherit}}.nylas-confirmed-event-card__title{font-size:18px;font-weight:600;line-height:24px;color:var(--nylas-base-900);text-align:center}.nylas-confirmed-event-description{font-size:16px;font-weight:500;color:var(--nylas-base-600)}.nylas-confirmed-event-card__calendar-icon{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)}.nylas-confirmed-event-card__cta{width:100%;display:flex;flex-direction:row;align-items:flex-start;margin-top:1rem}calendar-cancel-icon{display:flex;align-items:center;justify-content:center;height:100%}button-component{width:100%}";
+const nylasConfirmedEventCardCss = ":host{display:block}.nylas-confirmed-event-card{height:inherit;display:flex;flex-direction:column;justify-content:space-between;align-items:center;font-family:var(--nylas-font-family);width:400px;background-color:var(--nylas-base-0);color:var(--nylas-base-800);border-radius:var(--nylas-border-radius-2x);padding:1.5rem;position:relative;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){.nylas-confirmed-event-card{width:inherit}}.nylas-confirmed-event-card__title{font-size:18px;font-weight:600;line-height:24px;color:var(--nylas-base-900);text-align:center}.nylas-confirmed-event-description{font-size:16px;font-weight:500;color:var(--nylas-base-600)}.nylas-confirmed-event-card__calendar-icon{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)}.nylas-confirmed-event-card__cta{width:100%;display:flex;flex-direction:row;align-items:flex-start;margin-top:1rem}calendar-cancel-icon{display:flex;align-items:center;justify-content:center;height:100%}button-component{width:100%}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -32,6 +32,7 @@ const NylasConfirmedEventCard = class {
             this.closeConfirmEventCardClicked.emit({ errorHandler });
         };
         this.configSettings = undefined;
+        this.themeConfig = undefined;
         this.confirmedEventInfo = undefined;
         this.isClosing = false;
     }
@@ -46,13 +47,22 @@ const NylasConfirmedEventCard = class {
         if (!this.confirmedEventInfo) {
             console.warn(`[nylas-confirmed-event-card] No confirmed event info provided, "confirmedEventInfo" prop is required.`);
         }
+        this.applyThemeConfig(this.themeConfig);
     }
     disconnectedCallback() {
         debug(`[nylas-confirmed-event-card] Component disconnected`);
     }
+    applyThemeConfig(themeConfig) {
+        if (themeConfig) {
+            for (const [key, value] of Object.entries(themeConfig)) {
+                this.host.style.setProperty(`${key}`, value);
+            }
+        }
+    }
     render() {
-        return (h(Host, { key: 'a5fbf79c6b7f27046b599c16d231226ff9c88f84', part: "ncec" }, h("div", { key: '06c6f5fa4e75d9ce01dc9145259bf4bfddf33624', class: "nylas-confirmed-event-card", part: "ncec__card" }, h("div", { key: '11a58aa7dba6da706cd35791c58442b022f97939', class: "nylas-confirmed-event-card__calendar-icon", part: "ncec__icon" }, h("calendar-cancel-icon", { key: '752da0991cdcfa12dc9c7dc1020ea9388f11c30e' })), h("h3", { key: '238934bc1f8bcb137e6e33eb66afb5bee01749b7', class: "nylas-confirmed-event-card__title", part: "ncec__title" }, instance.t('confirmedEventCardTitle'), "!"), h("div", { key: '3a3d8ad8302ad54b528c37f0eb25d12590bb4f0d', class: "nylas-confirmed-event-card__description", part: "ncec__description" }, instance.t('confirmedEventCardDescription'), " ", this.configSettings?.organizer?.name || 'the participants', "."), h("div", { key: '49c69f2f9c01e4e775cb8caadbca213424e0a952', class: "nylas-confirmed-event-card__cta" }, h("button-component", { key: 'e6e75c57f294d688a108df09ffc9daf849ef6319', variant: "basic", disabled: this.isClosing, part: "ncec__button-outline", onClick: this.handleCloseClicked }, this.isClosing ? `${instance.t('closingButton')}...` : `${instance.t('closeButton')}`)))));
+        return (h(Host, { key: '089de1c1ba1b2319674b97aad4946fb8306ab4fe', part: "ncec" }, h("div", { key: '83c9b3f7904b7b74d38202c7d62891813754be93', class: "nylas-confirmed-event-card", part: "ncec__card" }, h("div", { key: 'e6ebbc07f8ea697f4e1f794bb8ddddc5166db33d', class: "nylas-confirmed-event-card__calendar-icon", part: "ncec__icon" }, h("calendar-cancel-icon", { key: 'eb0eb353b63bc5a8b55644a17f16c8566f3a7b36' })), h("h3", { key: 'c05937028fd84a55b3b0b1de4cd36fb0b0c6b563', class: "nylas-confirmed-event-card__title", part: "ncec__title" }, instance.t('confirmedEventCardTitle'), "!"), h("div", { key: 'e9ca9f67f46785d40e769ff96695001d56386dad', class: "nylas-confirmed-event-card__description", part: "ncec__description" }, instance.t('confirmedEventCardDescription'), " ", this.configSettings?.organizer?.name || 'the participants', "."), h("div", { key: 'bea8adea56d3dcdb2ce578ad25f08bc562b67ede', class: "nylas-confirmed-event-card__cta" }, h("button-component", { key: '6bed94150369d92e129fe62c4b6c292e37e26a34', variant: "basic", disabled: this.isClosing, part: "ncec__button-outline", onClick: this.handleCloseClicked }, this.isClosing ? `${instance.t('closingButton')}...` : `${instance.t('closeButton')}`)))));
     }
+    get host() { return getElement(this); }
 };
 __decorate([
     RegisterComponent({
@@ -67,6 +77,7 @@ __decorate([
                 }
             },
         },
+        localPropsToProp: new Map([['themeConfig', 'themeConfig']]),
         fireRegisterEvent: true,
     }),
     __metadata("design:type", Function),

package/dist/esm/nylas-confirmed-event-card.entry.js.map

@@ -1 +1 @@
-{"file":"nylas-confirmed-event-card.entry.js","mappings":";;;;AAAA,MAAM,0BAA0B,GAAG,mvDAAmvD;;;;;;;;;;;;;;;;MCuBzwD,uBAAuB;;;;;QA8C1B,uBAAkB,GAAG;YAC3B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YACtB,MAAM,YAAY,GAAG,CAAC,KAAkC;gBACtD,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBACzC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;aACxB,CAAC;YACF,IAAI,CAAC,4BAA4B,CAAC,IAAI,CAAC,EAAE,YAAY,EAAE,CAAC,CAAC;SAC1D,CAAC;;;yBAtC4B,KAAK;;IAYnC,iBAAiB;QACf,KAAK,CAAC,kDAAkD,CAAC,CAAC;KAC3D;IAED,MAAM,iBAAiB;QACrB,KAAK,CAAC,kDAAkD,CAAC,CAAC;KAC3D;IAED,MAAM,gBAAgB;QACpB,KAAK,CAAC,iDAAiD,CAAC,CAAC;QACzD,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE;YAC5B,OAAO,CAAC,IAAI,CAAC,uGAAuG,CAAC,CAAC;SACvH;KACF;IAED,oBAAoB;QAClB,KAAK,CAAC,qDAAqD,CAAC,CAAC;KAC9D;IA0BD,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,MAAM,IACf,4DAAK,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,YAAY,IACvD,4DAAK,KAAK,EAAC,2CAA2C,EAAC,IAAI,EAAC,YAAY,IACtE,8EAAwB,CACpB,EACN,2DAAI,KAAK,EAAC,mCAAmC,EAAC,IAAI,EAAC,aAAa,IAC7DA,QAAO,CAAC,CAAC,CAAC,yBAAyB,CAAC,MAClC,EACL,4DAAK,KAAK,EAAC,yCAAyC,EAAC,IAAI,EAAC,mBAAmB,IAC1EA,QAAO,CAAC,CAAC,CAAC,+BAA+B,CAAC,OAAG,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,IAAI,IAAI,kBAAkB,MACpG,EACN,4DAAK,KAAK,EAAC,iCAAiC,IAC1C,yEAAkB,OAAO,EAAC,OAAO,EAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,EAAC,sBAAsB,EAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,IACrH,IAAI,CAAC,SAAS,GAAG,GAAGA,QAAO,CAAC,CAAC,CAAC,eAAe,CAAC,KAAK,GAAG,GAAGA,QAAO,CAAC,CAAC,CAAC,aAAa,CAAC,EAAE,CACnE,CACf,CACF,CACD,EACP;KACH;;AArBD;IAfC,iBAAiB,CAAkG;QAClH,IAAI,EAAE,4BAA4B;QAClC,YAAY,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC,0BAA0B,EAAE,gBAAgB,CAAC,CAAC,CAAC;QACvE,YAAY,EAAE;YACZ,4BAA4B,EAAE,OAAO,CAA+E,EAAE,uBAAgD;gBACpK,MAAM,MAAM,GAAG,MAAM,uBAAuB,CAAC,SAAS,CAAC,YAAY,EAAE,CAAC;gBAEtE,MAAM,EAAE,YAAY,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;gBAClC,IAAI,YAAY,KAAK,CAAC,MAAM,IAAI,OAAO,IAAI,MAAM,CAAC,EAAE;oBAClD,YAAY,CAAC,MAAM,CAAC,CAAC;iBACtB;aACF;SACF;QACD,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;qDAsBD;;;;;","names":["i18next"],"sources":["src/components/scheduler/nylas-confirmed-event-card/nylas-confirmed-event-card.scss?tag=nylas-confirmed-event-card&encapsulation=shadow","src/components/scheduler/nylas-confirmed-event-card/nylas-confirmed-event-card.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  @include default-css-variables;\n}\n\n.nylas-confirmed-event-card {\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  width: 400px;\n\n  @media #{$mobile} {\n    width: inherit;\n  }\n\n  background-color: var(--nylas-base-0);\n  color: var(--nylas-base-800);\n  border-radius: var(--nylas-border-radius-2x);\n  padding: 1.5rem;\n  position: relative;\n  box-shadow:\n    0px 1px 4px rgba(0, 0, 0, 0.1),\n    0px 3px 6px rgba(0, 0, 0, 0.06);\n}\n\n.nylas-confirmed-event-card__title {\n  font-size: 18px;\n  font-weight: 600;\n  line-height: 24px;\n  color: var(--nylas-base-900);\n  text-align: center;\n}\n\n.nylas-confirmed-event-description {\n  font-size: 16px;\n  font-weight: 500;\n  color: var(--nylas-base-600);\n}\n\n.nylas-confirmed-event-card__calendar-icon {\n  width: 3rem;\n  height: 3rem;\n  border-radius: 50%;\n  position: absolute;\n  top: -1.25rem;\n  left: 50%;\n  transform: translateX(-50%);\n  background-color: var(--nylas-base-0);\n  border: 1px solid var(--nylas-base-200);\n}\n\n.nylas-confirmed-event-card__cta {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n  margin-top: 1rem;\n}\n\ncalendar-cancel-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n\nbutton-component {\n  width: 100%;\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { Component, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';\nimport { NylasEvent, NylasSchedulerConnector, NylasSchedulerErrorResponse } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { debug } from '@/utils/utils';\nimport { ConfigSettings } from '@/stores/scheduler-store';\nimport i18next from '@/utils/i18n';\n\n/**\n * The `nylas-confirmed-event-card` component is a UI component that displays the confirmed event card.\n *\n * @part ncec - The confirmed event card host.\n * @part ncec__icon - The calendar icon.\n * @part ncec__title - The title of the confirmed event card.\n * @part ncec__description - The description of the confirmed event card.\n * @part ncec__button-outline - The close button CTA.\n * @part ncec__card - The confirmed event card.\n */\n@Component({\n  tag: 'nylas-confirmed-event-card',\n  styleUrl: 'nylas-confirmed-event-card.scss',\n  shadow: true,\n})\nexport class NylasConfirmedEventCard {\n  /**\n   * @standalone\n   * The config settings for the scheduler.\n   */\n  @Prop() readonly configSettings?: ConfigSettings;\n\n  /**\n   * The participant's name who booked the event / is logged in.\n   */\n  @Prop() readonly confirmedEventInfo!: Partial<NylasEvent>;\n\n  /**\n   * Closing state of the confirmed event card button.\n   */\n  @State() isClosing: boolean = false;\n\n  /**\n   * This event is fired when the close button is clicked on the confirmed event card.\n   */\n  @Event() readonly closeConfirmEventCardClicked!: EventEmitter<{ errorHandler?: (error: NylasSchedulerErrorResponse) => void }>;\n\n  /**\n   * This event is fired when an error occurs.\n   */\n  @Event() readonly confirmedEventCardError!: EventEmitter<NylasSchedulerErrorResponse>;\n\n  connectedCallback() {\n    debug(`[nylas-confirmed-event-card] Component connected`);\n  }\n\n  async componentWillLoad() {\n    debug(`[nylas-confirmed-event-card] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-confirmed-event-card] Component did load`);\n    if (!this.confirmedEventInfo) {\n      console.warn(`[nylas-confirmed-event-card] No confirmed event info provided, \"confirmedEventInfo\" prop is required.`);\n    }\n  }\n\n  disconnectedCallback() {\n    debug(`[nylas-confirmed-event-card] Component disconnected`);\n  }\n\n  private handleCloseClicked = () => {\n    this.isClosing = true;\n    const errorHandler = (error: NylasSchedulerErrorResponse) => {\n      this.confirmedEventCardError.emit(error);\n      this.isClosing = false;\n    };\n    this.closeConfirmEventCardClicked.emit({ errorHandler });\n  };\n\n  @RegisterComponent<NylasConfirmedEventCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-confirmed-event-card',\n    stateToProps: new Map([['scheduler.configSettings', 'configSettings']]),\n    eventToProps: {\n      closeConfirmEventCardClicked: async (_: CustomEvent<{ errorHandler?: (error: NylasSchedulerErrorResponse) => void }>, nylasschedulerconnector: NylasSchedulerConnector) => {\n        const result = await nylasschedulerconnector.scheduler.resetConfirm();\n\n        const { errorHandler } = _.detail;\n        if (errorHandler && (!result || 'error' in result)) {\n          errorHandler(result);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host part=\"ncec\">\n        <div class=\"nylas-confirmed-event-card\" part=\"ncec__card\">\n          <div class=\"nylas-confirmed-event-card__calendar-icon\" part=\"ncec__icon\">\n            <calendar-cancel-icon />\n          </div>\n          <h3 class=\"nylas-confirmed-event-card__title\" part=\"ncec__title\">\n            {i18next.t('confirmedEventCardTitle')}!\n          </h3>\n          <div class=\"nylas-confirmed-event-card__description\" part=\"ncec__description\">\n            {i18next.t('confirmedEventCardDescription')} {this.configSettings?.organizer?.name || 'the participants'}.\n          </div>\n          <div class=\"nylas-confirmed-event-card__cta\">\n            <button-component variant=\"basic\" disabled={this.isClosing} part=\"ncec__button-outline\" onClick={this.handleCloseClicked}>\n              {this.isClosing ? `${i18next.t('closingButton')}...` : `${i18next.t('closeButton')}`}\n            </button-component>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nylas-confirmed-event-card.entry.js","mappings":"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","names":["i18next"],"sources":["src/components/scheduler/nylas-confirmed-event-card/nylas-confirmed-event-card.scss?tag=nylas-confirmed-event-card&encapsulation=shadow","src/components/scheduler/nylas-confirmed-event-card/nylas-confirmed-event-card.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n}\n\n.nylas-confirmed-event-card {\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  width: 400px;\n\n  @media #{$mobile} {\n    width: inherit;\n  }\n\n  background-color: var(--nylas-base-0);\n  color: var(--nylas-base-800);\n  border-radius: var(--nylas-border-radius-2x);\n  padding: 1.5rem;\n  position: relative;\n  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1),\n  0px 3px 6px rgba(0, 0, 0, 0.06);\n}\n\n.nylas-confirmed-event-card__title {\n  font-size: 18px;\n  font-weight: 600;\n  line-height: 24px;\n  color: var(--nylas-base-900);\n  text-align: center;\n}\n\n.nylas-confirmed-event-description {\n  font-size: 16px;\n  font-weight: 500;\n  color: var(--nylas-base-600);\n}\n\n.nylas-confirmed-event-card__calendar-icon {\n  width: 3rem;\n  height: 3rem;\n  border-radius: 50%;\n  position: absolute;\n  top: -1.25rem;\n  left: 50%;\n  transform: translateX(-50%);\n  background-color: var(--nylas-base-0);\n  border: 1px solid var(--nylas-base-200);\n}\n\n.nylas-confirmed-event-card__cta {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n  margin-top: 1rem;\n}\n\ncalendar-cancel-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n\nbutton-component {\n  width: 100%;\n}","import { RegisterComponent } from '@/common/register-component';\nimport { Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';\nimport { NylasEvent, NylasSchedulerConnector, NylasSchedulerErrorResponse } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { debug } from '@/utils/utils';\nimport { ConfigSettings } from '@/stores/scheduler-store';\nimport i18next from '@/utils/i18n';\nimport { ThemeConfig } from '@nylas/core';\n\n/**\n * The `nylas-confirmed-event-card` component is a UI component that displays the confirmed event card.\n *\n * @part ncec - The confirmed event card host.\n * @part ncec__icon - The calendar icon.\n * @part ncec__title - The title of the confirmed event card.\n * @part ncec__description - The description of the confirmed event card.\n * @part ncec__button-outline - The close button CTA.\n * @part ncec__card - The confirmed event card.\n */\n@Component({\n  tag: 'nylas-confirmed-event-card',\n  styleUrl: 'nylas-confirmed-event-card.scss',\n  shadow: true,\n})\nexport class NylasConfirmedEventCard {\n  /**\n   * The host element.\n   * Used to manage the host element of the provider.\n   */\n  @Element() private host!: HTMLNylasConfirmedEventCardElement;\n\n  /**\n   * @standalone\n   * The config settings for the scheduler.\n   */\n  @Prop() readonly configSettings?: ConfigSettings;\n\n  /**\n   * @standalone\n   * The theme configuration.\n   */\n  @Prop({ attribute: 'theme-config' }) readonly themeConfig?: any;\n\n  /**\n   * The participant's name who booked the event / is logged in.\n   */\n  @Prop() readonly confirmedEventInfo!: Partial<NylasEvent>;\n\n  /**\n   * Closing state of the confirmed event card button.\n   */\n  @State() isClosing: boolean = false;\n\n  /**\n   * This event is fired when the close button is clicked on the confirmed event card.\n   */\n  @Event() readonly closeConfirmEventCardClicked!: EventEmitter<{ errorHandler?: (error: NylasSchedulerErrorResponse) => void }>;\n\n  /**\n   * This event is fired when an error occurs.\n   */\n  @Event() readonly confirmedEventCardError!: EventEmitter<NylasSchedulerErrorResponse>;\n\n  connectedCallback() {\n    debug(`[nylas-confirmed-event-card] Component connected`);\n  }\n\n  async componentWillLoad() {\n    debug(`[nylas-confirmed-event-card] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-confirmed-event-card] Component did load`);\n    if (!this.confirmedEventInfo) {\n      console.warn(`[nylas-confirmed-event-card] No confirmed event info provided, \"confirmedEventInfo\" prop is required.`);\n    }\n    this.applyThemeConfig(this.themeConfig);\n  }\n\n  disconnectedCallback() {\n    debug(`[nylas-confirmed-event-card] Component disconnected`);\n  }\n\n  applyThemeConfig(themeConfig?: ThemeConfig) {\n    if (themeConfig) {\n      for (const [key, value] of Object.entries(themeConfig)) {\n        this.host.style.setProperty(`${key}`, value);\n      }\n    }\n  }\n\n  private handleCloseClicked = () => {\n    this.isClosing = true;\n    const errorHandler = (error: NylasSchedulerErrorResponse) => {\n      this.confirmedEventCardError.emit(error);\n      this.isClosing = false;\n    };\n    this.closeConfirmEventCardClicked.emit({ errorHandler });\n  };\n\n  @RegisterComponent<NylasConfirmedEventCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-confirmed-event-card',\n    stateToProps: new Map([['scheduler.configSettings', 'configSettings']]),\n    eventToProps: {\n      closeConfirmEventCardClicked: async (_: CustomEvent<{ errorHandler?: (error: NylasSchedulerErrorResponse) => void }>, nylasschedulerconnector: NylasSchedulerConnector) => {\n        const result = await nylasschedulerconnector.scheduler.resetConfirm();\n\n        const { errorHandler } = _.detail;\n        if (errorHandler && (!result || 'error' in result)) {\n          errorHandler(result);\n        }\n      },\n    },\n    localPropsToProp: new Map([['themeConfig', 'themeConfig']]),\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host part=\"ncec\">\n        <div class=\"nylas-confirmed-event-card\" part=\"ncec__card\">\n          <div class=\"nylas-confirmed-event-card__calendar-icon\" part=\"ncec__icon\">\n            <calendar-cancel-icon />\n          </div>\n          <h3 class=\"nylas-confirmed-event-card__title\" part=\"ncec__title\">\n            {i18next.t('confirmedEventCardTitle')}!\n          </h3>\n          <div class=\"nylas-confirmed-event-card__description\" part=\"ncec__description\">\n            {i18next.t('confirmedEventCardDescription')} {this.configSettings?.organizer?.name || 'the participants'}.\n          </div>\n          <div class=\"nylas-confirmed-event-card__cta\">\n            <button-component variant=\"basic\" disabled={this.isClosing} part=\"ncec__button-outline\" onClick={this.handleCloseClicked}>\n              {this.isClosing ? `${i18next.t('closingButton')}...` : `${i18next.t('closeButton')}`}\n            </button-component>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/nylas-date-picker.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, a as createEvent, h, i as Host } from './index-b5cb18eb.js';
+import { r as registerInstance, a as createEvent, h, i as Host, e as getElement } from './index-b5cb18eb.js';
 import { R as RegisterComponent } from './register-component-e6af12c1.js';
-import { b as addDaysToCurrentDate, i as instance, m as getLastDayOfMonth, n as getFirstDayOfMonth, o as isSameDay, q as convertMinutesToHoursAndMinutes, t as translateMonth, r as isSameMonth, a as debug } from './utils-8defae4b.js';
+import { b as addDaysToCurrentDate, i as instance, a as debug, m as getLastDayOfMonth, n as getFirstDayOfMonth, o as isSameDay, q as convertMinutesToHoursAndMinutes, t as translateMonth, r as isSameMonth } from './utils-8defae4b.js';
 
 const t0 = new Date, t1 = new Date;
 
@@ -1738,7 +1738,7 @@ function ticker(year, month, week, day, hour, minute) {
 const [utcTicks, utcTickInterval] = ticker(utcYear, utcMonth, utcSunday, unixDay, utcHour, utcMinute);
 const [timeTicks, timeTickInterval] = ticker(timeYear, timeMonth, timeSunday, timeDay, timeHour, timeMinute);
 
-const nylasDatePickerCss = ":host{display:block;min-height:444px;--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}@media screen and (max-width: 768px){:host{min-height:auto}}.nylas-date-picker{display:flex;gap:1rem;flex-direction:column}.header{margin:0 0.5rem;height:48px}.header h2{font-size:1.3125rem;font-weight:400;line-height:1rem;color:var(--nylas-base-800)}.header h2 strong{font-weight:600}.title{margin:0 -1.25rem;display:flex;flex-direction:column;padding:0 1.5rem;gap:0.5rem;border-bottom:1px solid var(--nylas-base-200);font-family:var(--nylas-font-family)}.title h1{margin-bottom:0;font-size:18px;line-height:20px;font-weight:600;display:flex;gap:0.5rem;align-items:center}.title p{margin-top:0;font-size:16px;display:flex;gap:0.5rem;align-items:center}@keyframes pulsate{0%{background-color:var(--nylas-base-50)}50%{background-color:var(--nylas-base-100)}100%{background-color:var(--nylas-base-50)}}.dates{display:grid;justify-items:center;grid-template-columns:repeat(7, 1fr);gap:0.5rem;margin-bottom:24px}.dates .date{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center;height:48px;width:48px;min-width:2rem;min-height:2rem;cursor:pointer;border-radius:var(--nylas-border-radius-2x);font-size:16px;font-weight:600;font-family:inherit;color:var(--nylas-base-text);background-color:var(--nylas-base-100);cursor:pointer;border:none}@media screen and (max-width: 412px){.dates .date{width:38px;height:38px;min-width:none}}.dates .date:hover:not(:disabled){box-shadow:0 0 0 2px var(--nylas-base-500) inset}.dates .date.date.current-month{color:var(--nylas-base-800)}.dates .date.date.selected{background-color:var(--nylas-primary);color:var(--nylas-base-0);font-weight:700}.dates .date.date.day-skeleton{color:var(--nylas-base-300)}.dates .date:disabled{color:var(--nylas-base-300);background-color:transparent;font-weight:400;cursor:not-allowed}.dates .day{font-size:12px;color:var(--nylas-base-800);font-weight:600;letter-spacing:0.5px;height:32px;display:flex;align-items:center}@media screen and (max-width: 768px){.dates .day{font-size:14px}}.dates .date.day-skeleton{height:48px;width:48px;border-radius:var(--nylas-border-radius-2x);animation:pulsate 1.5s infinite ease-in-out;background-color:var(--nylas-base-50)}@media screen and (max-width: 412px){.dates .date.day-skeleton{width:38px;height:38px;min-width:none}}.dates .date.current-day::after{content:\"\";position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background-color:var(--nylas-base-500)}.dates .date.current-day.selected::after{background-color:var(--nylas-base-100)}.pagination{display:flex;flex-direction:row;justify-content:space-between;align-items:center;min-width:92px}.pagination .chevron-right{transform:rotate(180deg)}.pagination .button{display:flex;flex-direction:row;justify-content:center;align-items:center;height:3vh;width:3vh;min-width:3em;min-height:3em;cursor:pointer;border-radius:var(--nylas-border-radius-2x);background-color:transparent;color:var(--nylas-base-800);cursor:pointer;border:none}.pagination .button:hover{background-color:var(--nylas-base-50)}.pagination .button:active{background-color:var(--nylas-base-100)}.pagination .button:disabled{background-color:transparent;color:var(--nylas-base-300);cursor:not-allowed}.flex-row{display:flex;flex-direction:row;justify-content:space-between;align-items:center;color:var(--nylas-base-500)}";
+const nylasDatePickerCss = ":host{display:block;min-height:444px}@media screen and (max-width: 768px){:host{min-height:auto}}.nylas-date-picker{display:flex;gap:1rem;flex-direction:column}.header{margin:0 0.5rem;height:48px}.header h2{font-size:1.3125rem;font-weight:400;line-height:1rem;color:var(--nylas-base-800)}.header h2 strong{font-weight:600}.title{margin:0 -1.25rem;display:flex;flex-direction:column;padding:0 1.5rem;gap:0.5rem;border-bottom:1px solid var(--nylas-base-200);font-family:var(--nylas-font-family)}.title h1{margin-bottom:0;font-size:18px;line-height:20px;font-weight:600;display:flex;gap:0.5rem;align-items:center}.title p{margin-top:0;font-size:16px;display:flex;gap:0.5rem;align-items:center}@keyframes pulsate{0%{background-color:var(--nylas-base-50)}50%{background-color:var(--nylas-base-100)}100%{background-color:var(--nylas-base-50)}}.dates{display:grid;justify-items:center;grid-template-columns:repeat(7, 1fr);gap:0.5rem;margin-bottom:24px}.dates .date{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center;height:48px;width:48px;min-width:2rem;min-height:2rem;cursor:pointer;border-radius:var(--nylas-border-radius-2x);font-size:16px;font-weight:600;font-family:inherit;color:var(--nylas-base-text);background-color:var(--nylas-base-100);cursor:pointer;border:none}@media screen and (max-width: 412px){.dates .date{width:38px;height:38px;min-width:none}}.dates .date:hover:not(:disabled){box-shadow:0 0 0 2px var(--nylas-base-500) inset}.dates .date.date.current-month{color:var(--nylas-base-800)}.dates .date.date.selected{background-color:var(--nylas-primary);color:var(--nylas-base-0);font-weight:700}.dates .date.date.day-skeleton{color:var(--nylas-base-300)}.dates .date:disabled{color:var(--nylas-base-300);background-color:transparent;font-weight:400;cursor:not-allowed}.dates .day{font-size:12px;color:var(--nylas-base-800);font-weight:600;letter-spacing:0.5px;height:32px;display:flex;align-items:center}@media screen and (max-width: 768px){.dates .day{font-size:14px}}.dates .date.day-skeleton{height:48px;width:48px;border-radius:var(--nylas-border-radius-2x);animation:pulsate 1.5s infinite ease-in-out;background-color:var(--nylas-base-50)}@media screen and (max-width: 412px){.dates .date.day-skeleton{width:38px;height:38px;min-width:none}}.dates .date.current-day::after{content:\"\";position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background-color:var(--nylas-base-500)}.dates .date.current-day.selected::after{background-color:var(--nylas-base-100)}.pagination{display:flex;flex-direction:row;justify-content:space-between;align-items:center;min-width:92px}.pagination .chevron-right{transform:rotate(180deg)}.pagination .button{display:flex;flex-direction:row;justify-content:center;align-items:center;height:3vh;width:3vh;min-width:3em;min-height:3em;cursor:pointer;border-radius:var(--nylas-border-radius-2x);background-color:transparent;color:var(--nylas-base-800);cursor:pointer;border:none}.pagination .button:hover{background-color:var(--nylas-base-50)}.pagination .button:active{background-color:var(--nylas-base-100)}.pagination .button:disabled{background-color:transparent;color:var(--nylas-base-300);cursor:not-allowed}.flex-row{display:flex;flex-direction:row;justify-content:space-between;align-items:center;color:var(--nylas-base-500)}";
 
 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;
@@ -1761,6 +1761,7 @@ const NylasDatePicker = class {
         this.monthChanged = createEvent(this, "monthChanged", 7);
         this.selectableDates = undefined;
         this.configSettings = undefined;
+        this.themeConfig = undefined;
         this.selectedDate = undefined;
         this.selectedLanguage = undefined;
         this.isLoading = undefined;
@@ -1789,6 +1790,17 @@ const NylasDatePicker = class {
     connectedCallback() { }
     disconnectedCallback() { }
     componentWillLoad() { }
+    componentDidLoad() {
+        debug(`[nylas-date-picker] 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);
+            }
+        }
+    }
     getDates() {
         const lastDayOfMonth = getLastDayOfMonth(this.month);
         const firstDayOfMonth = getFirstDayOfMonth(this.month);
@@ -1818,7 +1830,7 @@ const NylasDatePicker = class {
         return date && selectableDates?.find(d => isSameDay(d, date)) === undefined;
     }
     render() {
-        return (h(Host, { key: '06638094c3e21b094641e5adbf08762b346fc10e', part: "ndp" }, h("div", { key: '370143e471513ab59c49dc369208365e5dcd1865', class: "nylas-date-picker" }, h("div", { key: '9b84a00eada140f2f142dec17a8418854160be87', class: "title", part: "ndp__title" }, this.configSettings?.name ? (h("h1", null, this.configSettings?.name)) : (this.configSettings?.organizer?.name && (h("h1", null, h("person-icon", null), this.configSettings?.organizer?.name || 'Organizer'))), h("p", { key: 'a64fee4f4c6886b31620cdc62de0769e3908b634' }, h("clock-icon", { key: 'e6c4d1cf6fd0b45e9824f26cb4f1a9fd828347d3' }), this.eventDuration ? convertMinutesToHoursAndMinutes(this.eventDuration) : `- ${instance.t('time.minutes')}`)), h("div", { key: '7568638d6af0fa03f84cf4b32b418c6b4f4df0de', class: 'header flex-row' }, h("h2", { key: '7b656957b240be95038151d5ca2089967b3704cd', part: 'ndp__month-header' }, h("strong", { key: 'cea1b1a9fc986885cb1425075364bb6b97b0d0e2' }, translateMonth(this.month.toLocaleDateString(undefined, { month: 'long' }).toLocaleLowerCase())), "\u00A0", this.month.toLocaleDateString(undefined, { year: 'numeric' })), h("div", { key: 'daf2f52ae4ca9e381fefadf53b9bf9f7a2c47987', class: 'pagination' }, h("button", { key: 'e182f6af777a122aaaa323fbada73258fd8bcf90', title: "Previous month", onClick: () => this.changeMonth(-1), class: { 'chevron-left': true, 'button': true }, disabled: !this.selectableDates?.length || this.month <= new Date(), part: "ndp__month-button" }, h("chevron-icon", { key: 'a9703cc9a0cbfc72e800f72a56233467bff2e5f9' })), h("button", { key: 'bcafc749f794352746d64974e8e564a5db1125a4', title: "Next month", onClick: () => this.changeMonth(1), class: { 'chevron-right': true, 'button': true }, disabled: this.disableNextMonthButton, part: "ndp__month-button" }, h("chevron-icon", { key: '5fc036471ed8f1caabe79e8489321070d9b6eae3' })))), h("div", { key: '701d99cc45475a8b9217893bfa56c0fa80f61520', class: 'dates' }, [
+        return (h(Host, { key: 'ffb13b5ab2b96a23232a0e4fce0166cc4e471bc3', part: "ndp" }, h("div", { key: 'd617e1e85082cda56f123b915460161003fba8ad', class: "nylas-date-picker" }, h("div", { key: '8b966e5cfa60ec08da307e7537170adcfc04944b', class: "title", part: "ndp__title" }, this.configSettings?.name ? (h("h1", null, this.configSettings?.name)) : (this.configSettings?.organizer?.name && (h("h1", null, h("person-icon", null), this.configSettings?.organizer?.name || 'Organizer'))), h("p", { key: 'ec8dd18ff022b61ac574c1a0bb4c94c4bd51b643' }, h("clock-icon", { key: '8c0685800081b17f4b118938b106af1e291ded09' }), this.eventDuration ? convertMinutesToHoursAndMinutes(this.eventDuration) : `- ${instance.t('time.minutes')}`)), h("div", { key: '9c4e5f5aed7d3350f149115236b1be17ee1b77e7', class: 'header flex-row' }, h("h2", { key: 'b30d034da321b0e34e93f41fdeddcd5c6890fc9c', part: 'ndp__month-header' }, h("strong", { key: '2c45a29ba2d99856262c706e626c7dc43b05380b' }, translateMonth(this.month.toLocaleDateString(undefined, { month: 'long' }).toLocaleLowerCase())), "\u00A0", this.month.toLocaleDateString(undefined, { year: 'numeric' })), h("div", { key: 'eb086cc81c029c3f2dc12a5c796f4e20e60fef2e', class: 'pagination' }, h("button", { key: 'aefca223118d1e0c4f908ab325743730a5633d0f', title: "Previous month", onClick: () => this.changeMonth(-1), class: { 'chevron-left': true, 'button': true }, disabled: !this.selectableDates?.length || this.month <= new Date(), part: "ndp__month-button" }, h("chevron-icon", { key: '04e6c8e8dd6fa33805e19a97cc56aff0355bacd1' })), h("button", { key: '912568ecbc76504f9e917042edc7dd41ccfb51fa', title: "Next month", onClick: () => this.changeMonth(1), class: { 'chevron-right': true, 'button': true }, disabled: this.disableNextMonthButton, part: "ndp__month-button" }, h("chevron-icon", { key: '25efda159f4cd761012ee2143690c37cf9247f66' })))), h("div", { key: '4c0d4d94cce9d758e8dd52d4e29ec27f21410772', class: 'dates' }, [
             instance.t('days.sunday'),
             instance.t('days.monday'),
             instance.t('days.tuesday'),
@@ -1844,6 +1856,7 @@ const NylasDatePicker = class {
                 }, "aria-lang": date.toLocaleDateString(undefined, { dateStyle: 'full' }), disabled: isDisabled, onClick: () => this.selectDate(date), part: `ndp__date ${this.isSelected(date, this.selectedDate, this.selectableDates) ? 'ndp__date--selected' : ''} ${isSameDay(date, new Date()) ? 'ndp__date--current-day' : ''} ${isSameMonth(date, this.month) ? 'ndp__date--current-month' : ''}` }, date.getDate()));
         })))));
     }
+    get host() { return getElement(this); }
     static get watchers() { return {
         "configSettings": ["configSettingsChanged"],
         "selectedLanguage": ["selectedLanguageChanged"]
@@ -1869,6 +1882,7 @@ __decorate([
                 debug('nylas-date-picker', 'monthChanged', event.detail);
             },
         },
+        localPropsToProp: new Map([['themeConfig', 'themeConfig']]),
         fireRegisterEvent: true,
     }),
     __metadata("design:type", Function),