@nylas/web-elements 1.1.0-canary.4 → 1.1.0-canary.7

package/dist/components/nylas-event-description2.js.map

@@ -1 +1 @@
-{"file":"nylas-event-description2.js","mappings":";;;;;;AAAA,MAAM,wBAAwB,GAAG,muCAAmuC;;;;;;;;;;;;;;;;MCiBvvC,qBAAqB;;;;;;;;2BAED,IAAI,CAAC,gBAAgB,IAAI,EAAE;oBAGnC,aAAa;;IAQpC,yBAAyB,CAAC,QAAgB;QACxC,KAAK,CAAC,yBAAyB,EAAE,2BAA2B,EAAE,QAAQ,CAAC,CAAC;QACxE,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;KAC1C;IAOD,iBAAiB;QACf,KAAK,CAAC,yBAAyB,EAAE,mBAAmB,CAAC,CAAC;KACvD;IAED,iBAAiB;QACf,KAAK,CAAC,yBAAyB,EAAE,mBAAmB,CAAC,CAAC;QACtD,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;KAC3C;IAED,gBAAgB;QACd,KAAK,CAAC,yBAAyB,EAAE,kBAAkB,CAAC,CAAC;KACtD;IAED,oBAAoB;QAClB,KAAK,CAAC,yBAAyB,EAAE,sBAAsB,CAAC,CAAC;KAC1D;IAED,YAAY,CAAC,KAAK;QAChB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QACtC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;QAC/D,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;KACxE;IAOD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAC,QAAQ,IAChD,8DAAO,OAAO,EAAC,aAAa,yBAE1B,6DAAM,KAAK,EAAC,YAAY,IACtB,4EACE,kEAAW,IAAI,EAAC,cAAc,GAAG,EACjC,6DAAM,IAAI,EAAC,iBAAiB,qDAAsD,CAChE,CACf,CACD,EACR,iEAAU,EAAE,EAAC,aAAa,EAAC,IAAI,EAAC,kBAAkB,EAAC,IAAI,EAAC,aAAa,EAAC,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,EAAC,MAAM,EAAC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GAAa,CAC3J,CACD,EACP;KACH;;;;;;;;;;;;;;AAjBD;IALC,iBAAiB,CAA2G;QAC3H,IAAI,EAAE,yBAAyB;QAC/B,YAAY,EAAE,EAAE;QAChB,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;mDAkBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/scheduler-editor/nylas-event-description/nylas-event-description.scss?tag=nylas-event-description&encapsulation=shadow","src/components/scheduler-editor/nylas-event-description/nylas-event-description.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  @include default-css-variables;\n}\n\n.nylas-event-description {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n\n  label {\n    display: flex;\n    align-items: center;\n    color: var(--nylas-base-800);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 150%; /* 21px */\n    span.label-icon {\n      margin-left: 4px;\n      tooltip-component {\n        display: flex;\n      }\n    }\n  }\n  textarea {\n    padding: 12px 16px;\n    border-width: 1;\n    resize: vertical;\n    border-radius: 8px;\n    font-family: var(--nylas-font-family);\n    font-size: 16px;\n    line-height: 24px;\n    border: 1px solid var(--nylas-base-200);\n    &::-webkit-resizer {\n      display: none;\n    }\n  }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, State, h, Element, Prop, Watch, Event, EventEmitter } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\n/**\n * The `nylas-event-description` component is a form input for the description of an event.\n * @part nedesc - The event description container\n * @part nedesc__textarea - The event description textarea\n */\n@Component({\n  tag: 'nylas-event-description',\n  styleUrl: 'nylas-event-description.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasEventDescription {\n  @Prop() eventDescription?: string;\n  @State() description: string = this.eventDescription ?? '';\n  @AttachInternals() internals!: ElementInternals;\n  @Element() host!: HTMLElement;\n  @Prop() name: string = 'description';\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-event-description', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n  }>;\n\n  connectedCallback() {\n    debug('nylas-event-description', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-event-description', 'componentWillLoad');\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-event-description', 'componentDidLoad');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-event-description', 'disconnectedCallback');\n  }\n\n  handleChange(event) {\n    this.description = event.target.value;\n    this.internals.setFormValue(event.target.value, 'description');\n    this.valueChanged.emit({ value: event.target.value, name: this.name });\n  }\n\n  @RegisterComponent<NylasEventDescription, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-event-description',\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <div class=\"nylas-event-description\" part=\"nedesc\">\n          <label htmlFor=\"description\">\n            Event description\n            <span class=\"label-icon\">\n              <tooltip-component>\n                <info-icon slot=\"tooltip-icon\" />\n                <span slot=\"tooltip-content\">Provide any additional details for your event.</span>\n              </tooltip-component>\n            </span>\n          </label>\n          <textarea id=\"description\" part=\"nedesc__textarea\" name=\"description\" value={this.description} maxlength=\"8192\" onInput={e => this.handleChange(e)}></textarea>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nylas-event-description2.js","mappings":";;;;;;AAAA,MAAM,wBAAwB,GAAG,muCAAmuC;;;;;;;;;;;;;;;;MCkBvvC,qBAAqB;;;;;;;;;2BAOD,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,qBAAqB,EAAE,aAAa,EAAE,WAAW,IAAI,EAAE;oBAG7F,aAAa;;IAQpC,yBAAyB,CAAC,QAAgB;QACxC,KAAK,CAAC,yBAAyB,EAAE,2BAA2B,EAAE,QAAQ,CAAC,CAAC;QACxE,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;KAC1C;IAGD,mCAAmC,CAAC,QAAuB,EAAE,QAAuB;QAClF,KAAK,CAAC,2BAA2B,EAAE,qCAAqC,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAC9F,IAAI,QAAQ,EAAE,aAAa,EAAE,WAAW,EAAE;YACxC,IAAI,CAAC,WAAW,GAAG,QAAQ,EAAE,aAAa,EAAE,WAAW,CAAC;SACzD;KACF;IAMD,iBAAiB;QACf,KAAK,CAAC,yBAAyB,EAAE,mBAAmB,CAAC,CAAC;KACvD;IAED,iBAAiB;QACf,KAAK,CAAC,yBAAyB,EAAE,mBAAmB,CAAC,CAAC;QACtD,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;KAC3C;IAED,gBAAgB;QACd,KAAK,CAAC,yBAAyB,EAAE,kBAAkB,CAAC,CAAC;KACtD;IAED,oBAAoB;QAClB,KAAK,CAAC,yBAAyB,EAAE,sBAAsB,CAAC,CAAC;KAC1D;IAED,YAAY,CAAC,KAAK;QAChB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QACtC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;QAC/D,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;KACxE;IAQD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAC,QAAQ,IAChD,8DAAO,OAAO,EAAC,aAAa,yBAE1B,6DAAM,KAAK,EAAC,YAAY,IACtB,4EACE,kEAAW,IAAI,EAAC,cAAc,GAAG,EACjC,6DAAM,IAAI,EAAC,iBAAiB,qDAAsD,CAChE,CACf,CACD,EACR,iEAAU,EAAE,EAAC,aAAa,EAAC,IAAI,EAAC,kBAAkB,EAAC,IAAI,EAAC,aAAa,EAAC,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,EAAC,MAAM,EAAC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GAAa,CAC3J,CACD,EACP;KACH;;;;;;;;;;;;;;;;;AAjBD;IANC,iBAAiB,CAA2G;QAC3H,IAAI,EAAE,yBAAyB;QAC/B,YAAY,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC,uCAAuC,EAAE,uBAAuB,CAAC,CAAC,CAAC;QAC3F,YAAY,EAAE,EAAE;QAChB,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;mDAkBD;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/scheduler-editor/nylas-event-description/nylas-event-description.scss?tag=nylas-event-description&encapsulation=shadow","src/components/scheduler-editor/nylas-event-description/nylas-event-description.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  @include default-css-variables;\n}\n\n.nylas-event-description {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n\n  label {\n    display: flex;\n    align-items: center;\n    color: var(--nylas-base-800);\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 150%; /* 21px */\n    span.label-icon {\n      margin-left: 4px;\n      tooltip-component {\n        display: flex;\n      }\n    }\n  }\n  textarea {\n    padding: 12px 16px;\n    border-width: 1;\n    resize: vertical;\n    border-radius: 8px;\n    font-family: var(--nylas-font-family);\n    font-size: 16px;\n    line-height: 24px;\n    border: 1px solid var(--nylas-base-200);\n    &::-webkit-resizer {\n      display: none;\n    }\n  }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, State, h, Element, Prop, Watch, Event, EventEmitter } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration } from '@nylas/core';\n\n/**\n * The `nylas-event-description` component is a form input for the description of an event.\n * @part nedesc - The event description container\n * @part nedesc__textarea - The event description textarea\n */\n@Component({\n  tag: 'nylas-event-description',\n  styleUrl: 'nylas-event-description.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasEventDescription {\n  /**\n   * The selected config\n   */\n  @Prop() selectedConfiguration?: Configuration;\n\n  @Prop() eventDescription?: string;\n  @State() description: string = this.eventDescription || this.selectedConfiguration?.event_booking?.description || '';\n  @AttachInternals() internals!: ElementInternals;\n  @Element() host!: HTMLElement;\n  @Prop() name: string = 'description';\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-event-description', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('selectedConfiguration')\n  selectedConfigurationChangedHandler(newValue: Configuration, oldValue: Configuration) {\n    debug('nylas-custom-booking-flow', 'selectedConfigurationChangedHandler', newValue, oldValue);\n    if (newValue?.event_booking?.description) {\n      this.description = newValue?.event_booking?.description;\n    }\n  }\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n  }>;\n\n  connectedCallback() {\n    debug('nylas-event-description', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-event-description', 'componentWillLoad');\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-event-description', 'componentDidLoad');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-event-description', 'disconnectedCallback');\n  }\n\n  handleChange(event) {\n    this.description = event.target.value;\n    this.internals.setFormValue(event.target.value, 'description');\n    this.valueChanged.emit({ value: event.target.value, name: this.name });\n  }\n\n  @RegisterComponent<NylasEventDescription, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-event-description',\n    stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <div class=\"nylas-event-description\" part=\"nedesc\">\n          <label htmlFor=\"description\">\n            Event description\n            <span class=\"label-icon\">\n              <tooltip-component>\n                <info-icon slot=\"tooltip-icon\" />\n                <span slot=\"tooltip-content\">Provide any additional details for your event.</span>\n              </tooltip-component>\n            </span>\n          </label>\n          <textarea id=\"description\" part=\"nedesc__textarea\" name=\"description\" value={this.description} maxlength=\"8192\" onInput={e => this.handleChange(e)}></textarea>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nylas-event-duration2.js

@@ -1,13 +1,13 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { R as RegisterComponent } from './register-component.js';
-import { d as debug } from './utils.js';
+import { a as debug } from './utils.js';
 import { d as defineCustomElement$5 } from './chevron.js';
 import { d as defineCustomElement$4 } from './info.js';
 import { d as defineCustomElement$3 } from './search.js';
 import { d as defineCustomElement$2 } from './select-dropdown2.js';
 import { d as defineCustomElement$1 } from './toolitp-component.js';
 
-const nylasEventDurationCss = ":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-event-duration{display:flex;flex-direction:column;gap:4px}.nylas-event-duration label{display:flex;align-items:center;color:var(--nylas-base-800);font-size:14px;font-style:normal;font-weight:400;line-height:150%;}.nylas-event-duration label span.required{color:var(--nylas-error, #cc4841)}.nylas-event-duration label span.label-icon{margin-left:4px}.nylas-event-duration label span.label-icon tooltip-component{display:flex}.nylas-event-duration__wrapper{display:flex;align-items:center;gap:0.5rem}.nylas-event-duration__wrapper input{padding:12px 16px;border-width:1;border-radius:8px;border:1px solid var(--nylas-base-200);font-family:var(--nylas-font-family);font-size:16px;line-height:24px;width:48px}.nylas-event-duration__wrapper select-dropdown::part(sd_dropdown-button){border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x);padding:12px 16px}.nylas-event-duration__wrapper select-dropdown::part(sd_dropdown-button-selected-label){font-family:var(--nylas-font-family);font-size:16px;line-height:24px}";
+const nylasEventDurationCss = ":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-event-duration{display:flex;flex-direction:column;gap:4px}.nylas-event-duration label{display:flex;align-items:center;color:var(--nylas-base-800);font-size:16px;font-style:normal;font-weight:400;line-height:150%;}.nylas-event-duration label span.required{color:var(--nylas-error, #cc4841)}.nylas-event-duration label span.label-icon{margin-left:4px}.nylas-event-duration label span.label-icon tooltip-component{display:flex}.nylas-event-duration__wrapper{display:flex;align-items:center;gap:0.5rem}.nylas-event-duration__wrapper input{padding:12px 16px;border-width:1;border-radius:8px;border:1px solid var(--nylas-base-200);font-family:var(--nylas-font-family);font-size:16px;line-height:24px;width:48px}.nylas-event-duration__wrapper select-dropdown::part(sd_dropdown-button){border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x);padding:12px 16px}.nylas-event-duration__wrapper select-dropdown::part(sd_dropdown-button-selected-label){font-family:var(--nylas-font-family);font-size:16px;line-height:24px}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -30,6 +30,7 @@ const NylasEventDuration = proxyCustomElement(class NylasEventDuration extends H
         this.__attachShadow();
         this.valueChanged = createEvent(this, "valueChanged", 7);
         this.internals = this.attachInternals();
+        this.selectedConfiguration = undefined;
         this.name = 'duration';
         this.eventDurationMinutes = undefined;
         this.duration = this.eventDurationMinutes ? (this.eventDurationMinutes >= 60 ? this.eventDurationMinutes / 60 : this.eventDurationMinutes) : 5;
@@ -40,6 +41,14 @@ const NylasEventDuration = proxyCustomElement(class NylasEventDuration extends H
         debug('nylas-event-duration', 'elementNameChangedHandler', newValue);
         this.host.setAttribute('name', newValue);
     }
+    selectedConfigurationChangedHandler(newVal) {
+        const configDuration = newVal?.availability?.duration_minutes;
+        if (configDuration) {
+            this.duration = configDuration >= 60 ? configDuration / 60 : configDuration;
+            this.durationMinutes = configDuration ?? 5;
+            this.durationIncrement = configDuration >= 60 ? 60 : 1;
+        }
+    }
     durationMinutesChangedHandler(newValue, oldValue) {
         debug('nylas-event-duration', 'durationMinutesChangedHandler', newValue);
         if (newValue === oldValue) {
@@ -76,12 +85,6 @@ const NylasEventDuration = proxyCustomElement(class NylasEventDuration extends H
         if (this.duration < 5 && this.durationIncrement === 1) {
             this.duration = 5;
         }
-        if (this.duration > 720 && this.durationIncrement === 1) {
-            this.duration = 720;
-        }
-        if (this.duration > 12 && this.durationIncrement === 60) {
-            this.duration = 12;
-        }
         this.durationMinutes = this.duration * this.durationIncrement;
         this.internals.setFormValue(this.durationMinutes.toString(), 'duration');
     }
@@ -103,16 +106,18 @@ const NylasEventDuration = proxyCustomElement(class NylasEventDuration extends H
             { value: 1, label: 'minutes' },
             { value: 60, label: 'hours' },
         ];
-        return (h(Host, { key: 'b4c54d309345b6333578f1f8f49fbe9be7e50af7' }, h("div", { key: '401311ed8b0deb33eeb1013264f192ba87b0d118', class: "nylas-event-duration", part: "ned" }, h("label", { key: '5de11caa4aff28ca3fb11811e21adecfed22d32d', htmlFor: "duration" }, "Event duration", h("span", { key: '592731edca9c0c4ca63250e1fc3d964e4c7b271d', class: "required" }, "*"), h("span", { key: 'b9f6a70dc84222e68d2251f485bbd3545d05fcde', class: "label-icon" }, h("tooltip-component", { key: '8fa85c6907a3625c1f50750b962014e7d413ea34' }, h("info-icon", { key: '677374d62adb9c9e27307b64bd69a979a28f32eb', slot: "tooltip-icon" }), h("span", { key: 'd2ebc474b7876c3e23e31a296c826557b329be61', slot: "tooltip-content" }, "Set the duration of your event.")))), h("div", { key: '1240a158b86d06ed9e3859487e8688fc2cfea9e5', class: "nylas-event-duration__wrapper" }, h("input", { key: 'fffb610158d4b056761f41e9b2ffd0e0aa5b1bfd', type: "number", part: "ned_input", id: "duration", name: "duration", value: this.duration, onBlur: () => this.handleBlur(), onInput: e => this.handleChange(e), min: 5 }), h("select-dropdown", { key: '8cf3f16c86c0220f992f69e4cfa012c170145b9e', name: 'event-duration', options: durationOptions, exportparts: "sd__dropdown: ned__dropdown, sd__dropdown-button: ned__dropdown-button, sd__dropdown-content: ned__dropdown-content", defaultSelectedOption: durationOptions.find(i => i.value == this.durationIncrement) ?? durationOptions[0], withSearch: false })))));
+        return (h(Host, { key: 'ff6384009f8323807da45260c85f9a833ca78605' }, h("div", { key: '9a495df4f19b186fb856b96b2165cf16f633c1d3', class: "nylas-event-duration", part: "ned" }, h("label", { key: 'ddd0d777d526ebe86fb0353c74fb59d0acc9bb0c', htmlFor: "duration" }, "Event duration", h("span", { key: '4d4a72dcd4d5eb94065b92f680143837bacdf064', class: "required" }, "*"), h("span", { key: '0b4bf5ea22e494b579deeb5eb94b33e19f7805d7', class: "label-icon" }, h("tooltip-component", { key: '7ba13f0936a66b5d5ce8abdddaa2719ee944a53c' }, h("info-icon", { key: 'c27304efca28e235f150d421b88ebb09b68705fd', slot: "tooltip-icon" }), h("span", { key: 'f86eaf51c1360414af98ce557128fafb3c02b6d4', slot: "tooltip-content" }, "Set the duration of your event.")))), h("div", { key: 'be06a61abc967a09375fb1cb4e634409f4b51909', class: "nylas-event-duration__wrapper" }, h("input", { key: 'f89c51721313e11ead928cfa70b7a2953b8daaa5', type: "number", part: "ned_input", id: "duration", name: "duration", value: this.duration, onBlur: () => this.handleBlur(), onInput: e => this.handleChange(e), min: 5 }), h("select-dropdown", { key: 'aed386f87a5b232f8b65a110d167e342f009a420', name: 'event-duration', options: durationOptions, exportparts: "sd__dropdown: ned__dropdown, sd__dropdown-button: ned__dropdown-button, sd__dropdown-content: ned__dropdown-content", defaultSelectedOption: durationOptions.find(i => i.value == this.durationIncrement) ?? durationOptions[0], withSearch: false })))));
     }
     static get formAssociated() { return true; }
     get host() { return this; }
     static get watchers() { return {
         "name": ["elementNameChangedHandler"],
+        "selectedConfiguration": ["selectedConfigurationChangedHandler"],
         "durationMinutes": ["durationMinutesChangedHandler"]
     }; }
     static get style() { return nylasEventDurationCss; }
 }, [65, "nylas-event-duration", {
+        "selectedConfiguration": [16],
         "name": [1],
         "eventDurationMinutes": [2, "event-duration-minutes"],
         "duration": [32],
@@ -120,11 +125,13 @@ const NylasEventDuration = proxyCustomElement(class NylasEventDuration extends H
         "durationIncrement": [32]
     }, [[0, "selectedOptionChanged", "selectedOptionChangedHandler"]], {
         "name": ["elementNameChangedHandler"],
+        "selectedConfiguration": ["selectedConfigurationChangedHandler"],
         "durationMinutes": ["durationMinutesChangedHandler"]
     }]);
 __decorate([
     RegisterComponent({
         name: 'nylas-event-duration',
+        stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),
         eventToProps: {},
         fireRegisterEvent: true,
     }),
@@ -170,7 +177,6 @@ function defineCustomElement() {
             break;
     } });
 }
-defineCustomElement(NylasEventDuration);
 
 export { NylasEventDuration as N, defineCustomElement as d };
 

package/dist/components/nylas-event-duration2.js.map

@@ -1 +1 @@
-{"file":"nylas-event-duration2.js","mappings":";;;;;;;;;AAAA,MAAM,qBAAqB,GAAG,ooDAAooD;;;;;;;;;;;;;;;;MCoBrpD,kBAAkB;;;;;;;oBAGN,UAAU;;wBAGL,IAAI,CAAC,oBAAoB,IAAI,IAAI,CAAC,oBAAoB,IAAI,EAAE,GAAG,IAAI,CAAC,oBAAoB,GAAG,EAAE,GAAG,IAAI,CAAC,oBAAoB,IAAI,CAAC;+BACvH,IAAI,CAAC,oBAAoB,IAAI,CAAC;iCAC5B,IAAI,CAAC,oBAAoB,IAAI,IAAI,CAAC,oBAAoB,IAAI,EAAE,GAAG,EAAE,GAAG,CAAC,IAAI,CAAC;;IAU/G,yBAAyB,CAAC,QAAgB;QACxC,KAAK,CAAC,sBAAsB,EAAE,2BAA2B,EAAE,QAAQ,CAAC,CAAC;QACrE,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;KAC1C;IAGD,6BAA6B,CAAC,QAAgB,EAAE,QAAgB;QAC9D,KAAK,CAAC,sBAAsB,EAAE,+BAA+B,EAAE,QAAQ,CAAC,CAAC;QACzE,IAAI,QAAQ,KAAK,QAAQ,EAAE;YACzB,OAAO;SACR;QACD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,QAAQ,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;KACzE;IAOD,iBAAiB;QACf,KAAK,CAAC,sBAAsB,EAAE,mBAAmB,CAAC,CAAC;KACpD;IAED,iBAAiB;QACf,KAAK,CAAC,sBAAsB,EAAE,mBAAmB,CAAC,CAAC;QACnD,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;KAC3C;IAED,gBAAgB;QACd,KAAK,CAAC,sBAAsB,EAAE,kBAAkB,CAAC,CAAC;QAClD,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,EAAE,UAAU,CAAC,CAAC;KAC1E;IAED,oBAAoB;QAClB,KAAK,CAAC,sBAAsB,EAAE,sBAAsB,CAAC,CAAC;KACvD;IAED,YAAY,CAAC,KAAK;QAChB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QACnC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,iBAAiB,CAAC;QAC9D,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;KACzE;IACD,UAAU;QACR,IAAI,CAAC,IAAI,CAAC,QAAQ,KAAK,IAAI,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,KAAK,IAAI,CAAC,iBAAiB,KAAK,CAAC,EAAE;YAC3F,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;SACnB;QACD,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,KAAK,IAAI,CAAC,iBAAiB,KAAK,EAAE,EAAE;YAClH,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;SACnB;QACD,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,IAAI,CAAC,iBAAiB,KAAK,CAAC,EAAE;YACrD,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;SACnB;QACD,IAAI,IAAI,CAAC,QAAQ,GAAG,GAAG,IAAI,IAAI,CAAC,iBAAiB,KAAK,CAAC,EAAE;YACvD,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC;SACrB;QACD,IAAI,IAAI,CAAC,QAAQ,GAAG,EAAE,IAAI,IAAI,CAAC,iBAAiB,KAAK,EAAE,EAAE;YACvD,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;SACpB;QACD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,iBAAiB,CAAC;QAC9D,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,EAAE,UAAU,CAAC,CAAC;KAC1E;IAGD,4BAA4B,CAAC,KAAmD;QAC9E,KAAK,CAAC,uBAAuB,EAAE,8BAA8B,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;QAC7E,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;QAC/B,IAAI,CAAC,iBAAiB,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;QACzC,IAAI,IAAI,CAAC,iBAAiB,KAAK,CAAC,EAAE;YAChC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;SACnB;aAAM;YACL,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;SACnB;QAED,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,iBAAiB,CAAC;QAC9D,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,EAAE,UAAU,CAAC,CAAC;KAC1E;IAOD,MAAM;QACJ,MAAM,eAAe,GAAG;YACtB,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE;YAC9B,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;SAC9B,CAAC;QACF,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAC,KAAK,IAC1C,8DAAO,OAAO,EAAC,UAAU,sBACT,6DAAM,KAAK,EAAC,UAAU,QAAS,EAC7C,6DAAM,KAAK,EAAC,YAAY,IACtB,4EACE,kEAAW,IAAI,EAAC,cAAc,GAAG,EACjC,6DAAM,IAAI,EAAC,iBAAiB,sCAAuC,CACjD,CACf,CACD,EACR,4DAAK,KAAK,EAAC,+BAA+B,IACxC,8DACE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,WAAW,EAChB,EAAE,EAAC,UAAU,EACb,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,IAAI,CAAC,QAAQ,EACpB,MAAM,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,EAC/B,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAClC,GAAG,EAAE,CAAC,GACN,EACF,wEACE,IAAI,EAAE,gBAAgB,EACtB,OAAO,EAAE,eAAe,EACxB,WAAW,EAAC,qHAAqH,EACjI,qBAAqB,EAAE,eAAe,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,IAAI,IAAI,CAAC,iBAAiB,CAAC,IAAI,eAAe,CAAC,CAAC,CAAC,EACzG,UAAU,EAAE,KAAK,GACjB,CACE,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;AAvCD;IALC,iBAAiB,CAAwG;QACxH,IAAI,EAAE,sBAAsB;QAC5B,YAAY,EAAE,EAAE;QAChB,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;gDAwCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/scheduler-editor/nylas-event-duration/nylas-event-duration.scss?tag=nylas-event-duration&encapsulation=shadow","src/components/scheduler-editor/nylas-event-duration/nylas-event-duration.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  @include default-css-variables;\n}\n\n.nylas-event-duration {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n\n  label {\n    display: flex;\n    align-items: center;\n    color: var(--nylas-base-800);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 150%; /* 21px */\n    span.required {\n      color: var(--nylas-error, #cc4841);\n    }\n    span.label-icon {\n      margin-left: 4px;\n      tooltip-component {\n        display: flex;\n      }\n    }\n  }\n}\n.nylas-event-duration__wrapper {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  input {\n    padding: 12px 16px;\n    border-width: 1;\n    border-radius: 8px;\n    border: 1px solid var(--nylas-base-200);\n    font-family: var(--nylas-font-family);\n    font-size: 16px;\n    line-height: 24px;\n    width: 48px;\n  }\n  select-dropdown::part(sd_dropdown-button) {\n    border: 1px solid var(--nylas-base-200);\n    border-radius: var(--nylas-border-radius-2x);\n    padding: 12px 16px;\n  }\n  select-dropdown::part(sd_dropdown-button-selected-label) {\n    font-family: var(--nylas-font-family);\n    font-size: 16px;\n    line-height: 24px;\n  }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, Listen, State, h, Element, Prop, Watch, Event, EventEmitter } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\n/**\n * The `nylas-event-duration` component is a form input for the duration of an event.\n * @part ned - The event duration container\n * @part ned_input - The event duration input\n * @part ned__dropdown - The dropdown container\n * @part ned__dropdown-button - The dropdown button\n * @part ned__dropdown-content - The dropdown content\n */\n@Component({\n  tag: 'nylas-event-duration',\n  styleUrl: 'nylas-event-duration.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasEventDuration {\n  @Element() host!: HTMLElement;\n\n  @Prop() name: string = 'duration';\n  @Prop() eventDurationMinutes?: number;\n\n  @State() duration: number = this.eventDurationMinutes ? (this.eventDurationMinutes >= 60 ? this.eventDurationMinutes / 60 : this.eventDurationMinutes) : 5;\n  @State() durationMinutes: number = this.eventDurationMinutes ?? 5;\n  @State() durationIncrement: number = this.eventDurationMinutes ? (this.eventDurationMinutes >= 60 ? 60 : 1) : 1;\n\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-event-duration', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('durationMinutes')\n  durationMinutesChangedHandler(newValue: number, oldValue: number) {\n    debug('nylas-event-duration', 'durationMinutesChangedHandler', newValue);\n    if (newValue === oldValue) {\n      return;\n    }\n    this.valueChanged.emit({ value: newValue.toString(), name: this.name });\n  }\n\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n  }>;\n\n  connectedCallback() {\n    debug('nylas-event-duration', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-event-duration', 'componentWillLoad');\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-event-duration', 'componentDidLoad');\n    this.internals.setFormValue(this.durationMinutes.toString(), 'duration');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-event-duration', 'disconnectedCallback');\n  }\n\n  handleChange(event) {\n    this.duration = event.target.value;\n    this.durationMinutes = this.duration * this.durationIncrement;\n    this.internals.setFormValue(this.durationMinutes.toString(), this.name);\n  }\n  handleBlur() {\n    if ((this.duration === null || this.duration === undefined) && this.durationIncrement === 1) {\n      this.duration = 5;\n    }\n    if ((this.duration <= 0 || this.duration === null || this.duration === undefined) && this.durationIncrement === 60) {\n      this.duration = 1;\n    }\n    if (this.duration < 5 && this.durationIncrement === 1) {\n      this.duration = 5;\n    }\n    if (this.duration > 720 && this.durationIncrement === 1) {\n      this.duration = 720;\n    }\n    if (this.duration > 12 && this.durationIncrement === 60) {\n      this.duration = 12;\n    }\n    this.durationMinutes = this.duration * this.durationIncrement;\n    this.internals.setFormValue(this.durationMinutes.toString(), 'duration');\n  }\n\n  @Listen('selectedOptionChanged')\n  selectedOptionChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('nylas-calendar-picker', 'selectedOptionChangedHandler', event.detail);\n    const { value } = event.detail;\n    this.durationIncrement = parseInt(value);\n    if (this.durationIncrement === 1) {\n      this.duration = 5;\n    } else {\n      this.duration = 1;\n    }\n\n    this.durationMinutes = this.duration * this.durationIncrement;\n    this.internals.setFormValue(this.durationMinutes.toString(), 'duration');\n  }\n\n  @RegisterComponent<NylasEventDuration, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-event-duration',\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    const durationOptions = [\n      { value: 1, label: 'minutes' },\n      { value: 60, label: 'hours' },\n    ];\n    return (\n      <Host>\n        <div class=\"nylas-event-duration\" part=\"ned\">\n          <label htmlFor=\"duration\">\n            Event duration<span class=\"required\">*</span>\n            <span class=\"label-icon\">\n              <tooltip-component>\n                <info-icon slot=\"tooltip-icon\" />\n                <span slot=\"tooltip-content\">Set the duration of your event.</span>\n              </tooltip-component>\n            </span>\n          </label>\n          <div class=\"nylas-event-duration__wrapper\">\n            <input\n              type=\"number\"\n              part=\"ned_input\"\n              id=\"duration\"\n              name=\"duration\"\n              value={this.duration}\n              onBlur={() => this.handleBlur()}\n              onInput={e => this.handleChange(e)}\n              min={5}\n            />\n            <select-dropdown\n              name={'event-duration'}\n              options={durationOptions}\n              exportparts=\"sd__dropdown: ned__dropdown, sd__dropdown-button: ned__dropdown-button, sd__dropdown-content: ned__dropdown-content\"\n              defaultSelectedOption={durationOptions.find(i => i.value == this.durationIncrement) ?? durationOptions[0]}\n              withSearch={false}\n            />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nylas-event-duration2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-event-duration/nylas-event-duration.scss?tag=nylas-event-duration&encapsulation=shadow","src/components/scheduler-editor/nylas-event-duration/nylas-event-duration.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  @include default-css-variables;\n}\n\n.nylas-event-duration {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n\n  label {\n    display: flex;\n    align-items: center;\n    color: var(--nylas-base-800);\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 150%; /* 21px */\n    span.required {\n      color: var(--nylas-error, #cc4841);\n    }\n    span.label-icon {\n      margin-left: 4px;\n      tooltip-component {\n        display: flex;\n      }\n    }\n  }\n}\n.nylas-event-duration__wrapper {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  input {\n    padding: 12px 16px;\n    border-width: 1;\n    border-radius: 8px;\n    border: 1px solid var(--nylas-base-200);\n    font-family: var(--nylas-font-family);\n    font-size: 16px;\n    line-height: 24px;\n    width: 48px;\n  }\n  select-dropdown::part(sd_dropdown-button) {\n    border: 1px solid var(--nylas-base-200);\n    border-radius: var(--nylas-border-radius-2x);\n    padding: 12px 16px;\n  }\n  select-dropdown::part(sd_dropdown-button-selected-label) {\n    font-family: var(--nylas-font-family);\n    font-size: 16px;\n    line-height: 24px;\n  }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, Listen, State, h, Element, Prop, Watch, Event, EventEmitter } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration } from '@nylas/core';\n\n/**\n * The `nylas-event-duration` component is a form input for the duration of an event.\n * @part ned - The event duration container\n * @part ned_input - The event duration input\n * @part ned__dropdown - The dropdown container\n * @part ned__dropdown-button - The dropdown button\n * @part ned__dropdown-content - The dropdown content\n */\n@Component({\n  tag: 'nylas-event-duration',\n  styleUrl: 'nylas-event-duration.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasEventDuration {\n  @Element() host!: HTMLElement;\n  /**\n   * The selected config\n   */\n  @Prop() selectedConfiguration?: Configuration;\n\n  @Prop() name: string = 'duration';\n  @Prop() eventDurationMinutes?: number;\n\n  @State() duration: number = this.eventDurationMinutes ? (this.eventDurationMinutes >= 60 ? this.eventDurationMinutes / 60 : this.eventDurationMinutes) : 5;\n  @State() durationMinutes: number = this.eventDurationMinutes ?? 5;\n  @State() durationIncrement: number = this.eventDurationMinutes ? (this.eventDurationMinutes >= 60 ? 60 : 1) : 1;\n\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-event-duration', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('selectedConfiguration')\n  selectedConfigurationChangedHandler(newVal: Configuration) {\n    const configDuration = newVal?.availability?.duration_minutes;\n    if (configDuration) {\n      this.duration = configDuration >= 60 ? configDuration / 60 : configDuration;\n      this.durationMinutes = configDuration ?? 5;\n      this.durationIncrement = configDuration >= 60 ? 60 : 1;\n    }\n  }\n\n  @Watch('durationMinutes')\n  durationMinutesChangedHandler(newValue: number, oldValue: number) {\n    debug('nylas-event-duration', 'durationMinutesChangedHandler', newValue);\n    if (newValue === oldValue) {\n      return;\n    }\n    this.valueChanged.emit({ value: newValue.toString(), name: this.name });\n  }\n\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n  }>;\n\n  connectedCallback() {\n    debug('nylas-event-duration', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-event-duration', 'componentWillLoad');\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-event-duration', 'componentDidLoad');\n    this.internals.setFormValue(this.durationMinutes.toString(), 'duration');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-event-duration', 'disconnectedCallback');\n  }\n\n  handleChange(event) {\n    this.duration = event.target.value;\n    this.durationMinutes = this.duration * this.durationIncrement;\n    this.internals.setFormValue(this.durationMinutes.toString(), this.name);\n  }\n  handleBlur() {\n    if ((this.duration === null || this.duration === undefined) && this.durationIncrement === 1) {\n      this.duration = 5;\n    }\n    if ((this.duration <= 0 || this.duration === null || this.duration === undefined) && this.durationIncrement === 60) {\n      this.duration = 1;\n    }\n    if (this.duration < 5 && this.durationIncrement === 1) {\n      this.duration = 5;\n    }\n    this.durationMinutes = this.duration * this.durationIncrement;\n    this.internals.setFormValue(this.durationMinutes.toString(), 'duration');\n  }\n\n  @Listen('selectedOptionChanged')\n  selectedOptionChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('nylas-calendar-picker', 'selectedOptionChangedHandler', event.detail);\n    const { value } = event.detail;\n    this.durationIncrement = parseInt(value);\n    if (this.durationIncrement === 1) {\n      this.duration = 5;\n    } else {\n      this.duration = 1;\n    }\n\n    this.durationMinutes = this.duration * this.durationIncrement;\n    this.internals.setFormValue(this.durationMinutes.toString(), 'duration');\n  }\n\n  @RegisterComponent<NylasEventDuration, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-event-duration',\n    stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    const durationOptions = [\n      { value: 1, label: 'minutes' },\n      { value: 60, label: 'hours' },\n    ];\n    return (\n      <Host>\n        <div class=\"nylas-event-duration\" part=\"ned\">\n          <label htmlFor=\"duration\">\n            Event duration<span class=\"required\">*</span>\n            <span class=\"label-icon\">\n              <tooltip-component>\n                <info-icon slot=\"tooltip-icon\" />\n                <span slot=\"tooltip-content\">Set the duration of your event.</span>\n              </tooltip-component>\n            </span>\n          </label>\n          <div class=\"nylas-event-duration__wrapper\">\n            <input\n              type=\"number\"\n              part=\"ned_input\"\n              id=\"duration\"\n              name=\"duration\"\n              value={this.duration}\n              onBlur={() => this.handleBlur()}\n              onInput={e => this.handleChange(e)}\n              min={5}\n            />\n            <select-dropdown\n              name={'event-duration'}\n              options={durationOptions}\n              exportparts=\"sd__dropdown: ned__dropdown, sd__dropdown-button: ned__dropdown-button, sd__dropdown-content: ned__dropdown-content\"\n              defaultSelectedOption={durationOptions.find(i => i.value == this.durationIncrement) ?? durationOptions[0]}\n              withSearch={false}\n            />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nylas-event-info2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { R as RegisterComponent } from './register-component.js';
-import { d as debug } from './utils.js';
+import { a as debug } from './utils.js';
 import { d as defineCustomElement$1 } from './nylas-form-card2.js';
 
 const nylasEventInfoCss = ":host{display:block;margin:1rem;--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-event-info__title{color:var(--nylas-base-900);font-size:16px;font-style:normal;font-weight:600;line-height:20px;margin:0;text-align:left}.nylas-event-info__subtitle{color:var(--nylas-base-600);font-size:14px;font-style:normal;font-weight:400;line-height:20px;margin:0.25rem 0px 0px;text-align:left}.nylas-event-info__content{padding:1rem;display:flex;flex-direction:column;gap:1rem}.nylas-event-info__block{display:flex;justify-content:space-between;gap:0.5rem}";
@@ -39,7 +39,7 @@ const NylasEventInfo = proxyCustomElement(class NylasEventInfo extends HTMLEleme
         debug('nylas-event-info', 'disconnectedCallback');
     }
     render() {
-        return (h(Host, { key: '61e095027d4b933ff2d2cc17a5a9d8a6d1add51e' }, h("nylas-form-card", { key: '0aa8cfa9d92db31b33e30879f1baeda834a0b2f0' }, h("h1", { key: '1f8cb65c3b5b821d7f59b06a4ee338e2fd6bcc5b', slot: "header-title", class: "nylas-event-info__title" }, "Event information"), h("h3", { key: '40698f86b92127532457ece61c931eabced1ec25', slot: "header-subtitle", class: "nylas-event-info__subtitle" }, "Enter all event information."), h("div", { key: '724866551790e31b39fa016f6b88629573639cd6', slot: "content", class: "nylas-event-info__content" }, h("slot", { key: 'ef0cd2dd50b7f160d2806d4e4b04f9fd39d1bf83', name: "inputs" })))));
+        return (h(Host, { key: '73cf50f7f006fed6b41256b3f83c6a549f6919f8' }, h("nylas-form-card", { key: 'f34f24881a48a3af65e665693548388a9cbebb5f' }, h("h1", { key: '5e6ff9922a926b74bbaafe8502bae2724bd6ee3a', slot: "header-title", class: "nylas-event-info__title" }, "Event information"), h("h3", { key: '2a127a2206f7dec1b1cc93804588a8b96a893f83', slot: "header-subtitle", class: "nylas-event-info__subtitle" }, "Enter all event information."), h("div", { key: 'b3dcd7ddb2bbb278327ca059e1d8fce793645a47', slot: "content", class: "nylas-event-info__content" }, h("slot", { key: '7868be55755715b91a591f92225f13aeb5dbf00d', name: "inputs" })))));
     }
     static get formAssociated() { return true; }
     static get style() { return nylasEventInfoCss; }
@@ -72,7 +72,6 @@ function defineCustomElement() {
             break;
     } });
 }
-defineCustomElement(NylasEventInfo);
 
 export { NylasEventInfo as N, defineCustomElement as d };
 

package/dist/components/nylas-event-info2.js.map

@@ -1 +1 @@
-{"file":"nylas-event-info2.js","mappings":";;;;;AAAA,MAAM,iBAAiB,GAAG,ilCAAilC;;;;;;;;;;;;;;;;MCgB9lC,cAAc;;;;;;;IAGzB,iBAAiB;QACf,KAAK,CAAC,kBAAkB,EAAE,mBAAmB,CAAC,CAAC;KAChD;IAED,iBAAiB;QACf,KAAK,CAAC,kBAAkB,EAAE,mBAAmB,CAAC,CAAC;KAChD;IAED,gBAAgB;QACd,KAAK,CAAC,kBAAkB,EAAE,kBAAkB,CAAC,CAAC;KAC/C;IAED,oBAAoB;QAClB,KAAK,CAAC,kBAAkB,EAAE,sBAAsB,CAAC,CAAC;KACnD;IAOD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,0EACE,2DAAI,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,yBAAyB,wBAElD,EACL,2DAAI,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAC,4BAA4B,mCAExD,EACL,4DAAK,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,2BAA2B,IACnD,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACU,CACb,EACP;KACH;;;;AAhBD;IALC,iBAAiB,CAAoG;QACpH,IAAI,EAAE,kBAAkB;QACxB,YAAY,EAAE,EAAE;QAChB,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;4CAiBD;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/scheduler-editor/nylas-event-info/nylas-event-info.scss?tag=nylas-event-info&encapsulation=shadow","src/components/scheduler-editor/nylas-event-info/nylas-event-info.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  margin: 1rem;\n  @include default-css-variables;\n}\n\n.nylas-event-info__title {\n  color: var(--nylas-base-900);\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 20px; /* 125% */\n  margin: 0;\n  text-align: left;\n}\n.nylas-event-info__subtitle {\n  color: var(--nylas-base-600);\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px; /* 142.857% */\n  margin: 0.25rem 0px 0px;\n  text-align: left;\n}\n.nylas-event-info__content {\n  padding: 1rem;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n.nylas-event-info__block {\n  display: flex;\n  justify-content: space-between;\n  gap: 0.5rem;\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\n/**\n * The `nylas-event-info` component is a input form for the event information.\n * ```\n */\n@Component({\n  tag: 'nylas-event-info',\n  styleUrl: 'nylas-event-info.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasEventInfo {\n  @AttachInternals() internals!: ElementInternals;\n\n  connectedCallback() {\n    debug('nylas-event-info', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-event-info', 'componentWillLoad');\n  }\n\n  componentDidLoad() {\n    debug('nylas-event-info', 'componentDidLoad');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-event-info', 'disconnectedCallback');\n  }\n\n  @RegisterComponent<NylasEventInfo, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-event-info',\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <nylas-form-card>\n          <h1 slot=\"header-title\" class=\"nylas-event-info__title\">\n            Event information\n          </h1>\n          <h3 slot=\"header-subtitle\" class=\"nylas-event-info__subtitle\">\n            Enter all event information.\n          </h3>\n          <div slot=\"content\" class=\"nylas-event-info__content\">\n            <slot name=\"inputs\"></slot>\n          </div>\n        </nylas-form-card>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nylas-event-info2.js","mappings":";;;;;AAAA,MAAM,iBAAiB,GAAG,ilCAAilC;;;;;;;;;;;;;;;;MCgB9lC,cAAc;;;;;;;IAGzB,iBAAiB;QACf,KAAK,CAAC,kBAAkB,EAAE,mBAAmB,CAAC,CAAC;KAChD;IAED,iBAAiB;QACf,KAAK,CAAC,kBAAkB,EAAE,mBAAmB,CAAC,CAAC;KAChD;IAED,gBAAgB;QACd,KAAK,CAAC,kBAAkB,EAAE,kBAAkB,CAAC,CAAC;KAC/C;IAED,oBAAoB;QAClB,KAAK,CAAC,kBAAkB,EAAE,sBAAsB,CAAC,CAAC;KACnD;IAOD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,0EACE,2DAAI,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,yBAAyB,wBAElD,EACL,2DAAI,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAC,4BAA4B,mCAExD,EACL,4DAAK,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,2BAA2B,IACnD,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACU,CACb,EACP;KACH;;;;AAhBD;IALC,iBAAiB,CAAoG;QACpH,IAAI,EAAE,kBAAkB;QACxB,YAAY,EAAE,EAAE;QAChB,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;4CAiBD;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/scheduler-editor/nylas-event-info/nylas-event-info.scss?tag=nylas-event-info&encapsulation=shadow","src/components/scheduler-editor/nylas-event-info/nylas-event-info.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  margin: 1rem;\n  @include default-css-variables;\n}\n\n.nylas-event-info__title {\n  color: var(--nylas-base-900);\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 20px; /* 125% */\n  margin: 0;\n  text-align: left;\n}\n.nylas-event-info__subtitle {\n  color: var(--nylas-base-600);\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px; /* 142.857% */\n  margin: 0.25rem 0px 0px;\n  text-align: left;\n}\n.nylas-event-info__content {\n  padding: 1rem;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n.nylas-event-info__block {\n  display: flex;\n  justify-content: space-between;\n  gap: 0.5rem;\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\n/**\n * The `nylas-event-info` component is a input form for the event information.\n * ```\n */\n@Component({\n  tag: 'nylas-event-info',\n  styleUrl: 'nylas-event-info.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasEventInfo {\n  @AttachInternals() internals!: ElementInternals;\n\n  connectedCallback() {\n    debug('nylas-event-info', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-event-info', 'componentWillLoad');\n  }\n\n  componentDidLoad() {\n    debug('nylas-event-info', 'componentDidLoad');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-event-info', 'disconnectedCallback');\n  }\n\n  @RegisterComponent<NylasEventInfo, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-event-info',\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <nylas-form-card>\n          <h1 slot=\"header-title\" class=\"nylas-event-info__title\">\n            Event information\n          </h1>\n          <h3 slot=\"header-subtitle\" class=\"nylas-event-info__subtitle\">\n            Enter all event information.\n          </h3>\n          <div slot=\"content\" class=\"nylas-event-info__content\">\n            <slot name=\"inputs\"></slot>\n          </div>\n        </nylas-form-card>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nylas-event-limits2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { R as RegisterComponent } from './register-component.js';
-import { d as debug } from './utils.js';
+import { a as debug } from './utils.js';
 import { d as defineCustomElement$1 } from './nylas-form-card2.js';
 
 const nylasEventLimitsCss = ":host{display:block;margin:1rem;--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-event-limits__title{color:var(--nylas-base-900);font-size:16px;font-style:normal;font-weight:600;line-height:20px;margin:0;text-align:left}.nylas-event-limits__subtitle{color:var(--nylas-base-600);font-size:14px;font-style:normal;font-weight:400;line-height:20px;margin:0.25rem 0px 0px;text-align:left}.nylas-event-limits__content{padding:1rem;display:flex;flex-direction:column;gap:1rem}.nylas-event-limits__block{display:flex;justify-content:space-between;gap:0.5rem}";
@@ -39,7 +39,7 @@ const NylasEventLimits = proxyCustomElement(class NylasEventLimits extends HTMLE
         debug('nylas-event-limits', 'disconnectedCallback');
     }
     render() {
-        return (h(Host, { key: '5a2ad0ec53b85623d821f78858c3cff8b5e1a251' }, h("nylas-form-card", { key: '047025e1b53e4b92d4c5add386bae10702a493a0' }, h("h1", { key: '6e4f9438417a7a7037dda67b1b3ebdd09306f748', slot: "header-title", class: "nylas-event-limits__title" }, "Set event limits"), h("h3", { key: '6b2c72590cf35181cba99fdf7ce58a5d55eae153', slot: "header-subtitle", class: "nylas-event-limits__subtitle" }, "Customize event limits for the event."), h("div", { key: 'ed1adf0a9eee51c73b86d78430d77b51db60d9a4', slot: "content", class: "nylas-event-limits__content" }, h("slot", { key: 'b9a4299a7edfc2673afaab690ff610d449f8cd57', name: "inputs" })))));
+        return (h(Host, { key: '2cc9ace0192971cd75683313d64f3ef06d400136' }, h("nylas-form-card", { key: 'cbca7bb803781e3c93a85c73e56e762f9daa2f9d' }, h("h1", { key: '5a55b7edf422b59b251c2df6d9cf174d83c012eb', slot: "header-title", class: "nylas-event-limits__title" }, "Set event limits"), h("h3", { key: '70415910cf84c503291373387bdab5c6da95e091', slot: "header-subtitle", class: "nylas-event-limits__subtitle" }, "Customize event limits for the event."), h("div", { key: '0735659855b9ad599c70dc8045e2477b853571e6', slot: "content", class: "nylas-event-limits__content" }, h("slot", { key: 'a35e9bcc861998b14d5bbf630d6c1fcbd038fbdf', name: "inputs" })))));
     }
     static get formAssociated() { return true; }
     static get style() { return nylasEventLimitsCss; }
@@ -72,7 +72,6 @@ function defineCustomElement() {
             break;
     } });
 }
-defineCustomElement(NylasEventLimits);
 
 export { NylasEventLimits as N, defineCustomElement as d };
 

package/dist/components/nylas-event-limits2.js.map

@@ -1 +1 @@
-{"file":"nylas-event-limits2.js","mappings":";;;;;AAAA,MAAM,mBAAmB,GAAG,ylCAAylC;;;;;;;;;;;;;;;;MCgBxmC,gBAAgB;;;;;;;IAG3B,iBAAiB;QACf,KAAK,CAAC,oBAAoB,EAAE,mBAAmB,CAAC,CAAC;KAClD;IAED,iBAAiB;QACf,KAAK,CAAC,oBAAoB,EAAE,mBAAmB,CAAC,CAAC;KAClD;IAED,gBAAgB;QACd,KAAK,CAAC,oBAAoB,EAAE,kBAAkB,CAAC,CAAC;KACjD;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,sBAAsB,CAAC,CAAC;KACrD;IAOD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,0EACE,2DAAI,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,2BAA2B,uBAEpD,EACL,2DAAI,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAC,8BAA8B,4CAE1D,EACL,4DAAK,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,6BAA6B,IACrD,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACU,CACb,EACP;KACH;;;;AAhBD;IALC,iBAAiB,CAAsG;QACtH,IAAI,EAAE,oBAAoB;QAC1B,YAAY,EAAE,EAAE;QAChB,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;8CAiBD;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/scheduler-editor/nylas-event-limits/nylas-event-limits.scss?tag=nylas-event-limits&encapsulation=shadow","src/components/scheduler-editor/nylas-event-limits/nylas-event-limits.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  margin: 1rem;\n  @include default-css-variables;\n}\n\n.nylas-event-limits__title {\n  color: var(--nylas-base-900);\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 20px; /* 125% */\n  margin: 0;\n  text-align: left;\n}\n.nylas-event-limits__subtitle {\n  color: var(--nylas-base-600);\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px; /* 142.857% */\n  margin: 0.25rem 0px 0px;\n  text-align: left;\n}\n.nylas-event-limits__content {\n  padding: 1rem;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n.nylas-event-limits__block {\n  display: flex;\n  justify-content: space-between;\n  gap: 0.5rem;\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\n/**\n * The `nylas-event-limits` component is a input form for the event information.\n * ```\n */\n@Component({\n  tag: 'nylas-event-limits',\n  styleUrl: 'nylas-event-limits.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasEventLimits {\n  @AttachInternals() internals!: ElementInternals;\n\n  connectedCallback() {\n    debug('nylas-event-limits', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-event-limits', 'componentWillLoad');\n  }\n\n  componentDidLoad() {\n    debug('nylas-event-limits', 'componentDidLoad');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-event-limits', 'disconnectedCallback');\n  }\n\n  @RegisterComponent<NylasEventLimits, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-event-limits',\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <nylas-form-card>\n          <h1 slot=\"header-title\" class=\"nylas-event-limits__title\">\n            Set event limits\n          </h1>\n          <h3 slot=\"header-subtitle\" class=\"nylas-event-limits__subtitle\">\n            Customize event limits for the event.\n          </h3>\n          <div slot=\"content\" class=\"nylas-event-limits__content\">\n            <slot name=\"inputs\"></slot>\n          </div>\n        </nylas-form-card>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nylas-event-limits2.js","mappings":";;;;;AAAA,MAAM,mBAAmB,GAAG,ylCAAylC;;;;;;;;;;;;;;;;MCgBxmC,gBAAgB;;;;;;;IAG3B,iBAAiB;QACf,KAAK,CAAC,oBAAoB,EAAE,mBAAmB,CAAC,CAAC;KAClD;IAED,iBAAiB;QACf,KAAK,CAAC,oBAAoB,EAAE,mBAAmB,CAAC,CAAC;KAClD;IAED,gBAAgB;QACd,KAAK,CAAC,oBAAoB,EAAE,kBAAkB,CAAC,CAAC;KACjD;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,sBAAsB,CAAC,CAAC;KACrD;IAOD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,0EACE,2DAAI,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,2BAA2B,uBAEpD,EACL,2DAAI,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAC,8BAA8B,4CAE1D,EACL,4DAAK,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,6BAA6B,IACrD,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACU,CACb,EACP;KACH;;;;AAhBD;IALC,iBAAiB,CAAsG;QACtH,IAAI,EAAE,oBAAoB;QAC1B,YAAY,EAAE,EAAE;QAChB,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;8CAiBD;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/scheduler-editor/nylas-event-limits/nylas-event-limits.scss?tag=nylas-event-limits&encapsulation=shadow","src/components/scheduler-editor/nylas-event-limits/nylas-event-limits.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  margin: 1rem;\n  @include default-css-variables;\n}\n\n.nylas-event-limits__title {\n  color: var(--nylas-base-900);\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 20px; /* 125% */\n  margin: 0;\n  text-align: left;\n}\n.nylas-event-limits__subtitle {\n  color: var(--nylas-base-600);\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px; /* 142.857% */\n  margin: 0.25rem 0px 0px;\n  text-align: left;\n}\n.nylas-event-limits__content {\n  padding: 1rem;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n.nylas-event-limits__block {\n  display: flex;\n  justify-content: space-between;\n  gap: 0.5rem;\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\n/**\n * The `nylas-event-limits` component is a input form for the event information.\n * ```\n */\n@Component({\n  tag: 'nylas-event-limits',\n  styleUrl: 'nylas-event-limits.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasEventLimits {\n  @AttachInternals() internals!: ElementInternals;\n\n  connectedCallback() {\n    debug('nylas-event-limits', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-event-limits', 'componentWillLoad');\n  }\n\n  componentDidLoad() {\n    debug('nylas-event-limits', 'componentDidLoad');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-event-limits', 'disconnectedCallback');\n  }\n\n  @RegisterComponent<NylasEventLimits, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-event-limits',\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <nylas-form-card>\n          <h1 slot=\"header-title\" class=\"nylas-event-limits__title\">\n            Set event limits\n          </h1>\n          <h3 slot=\"header-subtitle\" class=\"nylas-event-limits__subtitle\">\n            Customize event limits for the event.\n          </h3>\n          <div slot=\"content\" class=\"nylas-event-limits__content\">\n            <slot name=\"inputs\"></slot>\n          </div>\n        </nylas-form-card>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nylas-event-title2.js

@@ -1,11 +1,11 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { R as RegisterComponent } from './register-component.js';
-import { d as debug, l as getBrowser } from './utils.js';
+import { a as debug, q as getBrowser } from './utils.js';
 import { E as EVENT_TITLE_TOKENS } from './constants.js';
 import { d as defineCustomElement$2 } from './info.js';
 import { d as defineCustomElement$1 } from './toolitp-component.js';
 
-const nylasEventTitleCss = ":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-event-title{display:flex;flex-direction:column;gap:4px;position:relative;text-align:left}.nylas-event-title div.title{padding:12px 16px;border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x);overflow:scroll;white-space:nowrap;scrollbar-width:thin}.nylas-event-title div.title::-webkit-scrollbar{width:6px;height:6px}.nylas-event-title input{padding:12px 16px;border-width:1;border-radius:8px;border:1px solid var(--nylas-base-200)}.nylas-event-title span.help-text{color:var(--nylas-base-800);font-size:14px;font-style:normal;font-weight:400;line-height:21px}.nylas-event-title label{display:flex;align-items:center;color:var(--nylas-base-800);font-size:14px;font-style:normal;font-weight:400;line-height:150%;}.nylas-event-title label span.required{color:var(--nylas-error, #cc4841)}.nylas-event-title label span.label-icon{margin-left:4px}.nylas-event-title label span.label-icon tooltip-component{display:flex}.highlighted-tag{background-color:var(--nylas-base-200);border-radius:var(--nylas-border-radius);padding:5px;margin-left:4px}.token-options{display:block;background-color:var(--nylas-base-0);width:100%;max-height:336px;overflow:auto;z-index:1;border-radius:4px;position:absolute;top:80px;box-shadow:0px 4px 6px -2px rgba(0, 0, 0, 0.0509803922);box-shadow:0px 10px 15px -3px rgba(0, 0, 0, 0.1019607843)}@media screen and (max-width: 768px){.token-options{right:0;width:325px;max-width:unset}}.token-options ul{padding:0;list-style-type:none;color:var(--nylas-base-900);max-height:336px;margin:0}.token-options ul li{padding:16px, 12px, 16px, 12px;color:black;padding:12px 16px;text-decoration:none;display:block;font-family:inherit;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px;text-align:left;cursor:pointer}.token-options ul li .token-label{display:flex;flex-direction:column;font-weight:400}.token-options ul li .token-label .token{color:var(--nylas-abse-900);font-size:16px;line-height:24px}.token-options ul li .token-label .description{color:var(--nylas-base-600);font-size:14px;line-height:21px}.token-options ul li:hover,.token-options ul li:focus,.token-options ul li:active,.token-options ul li.active{background-color:var(--nylas-base-100)}.token-options ul li:hover .token-label .token,.token-options ul li:focus .token-label .token,.token-options ul li:active .token-label .token,.token-options ul li.active .token-label .token{color:var(--nylas-primary)}.token-options .selected{background-color:var(--nylas-base-100)}";
+const nylasEventTitleCss = ":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-event-title{display:flex;flex-direction:column;gap:4px;position:relative;text-align:left}.nylas-event-title div.title{padding:12px 16px;border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x);overflow:scroll;white-space:nowrap;scrollbar-width:thin}.nylas-event-title div.title::-webkit-scrollbar{width:6px;height:6px}.nylas-event-title div.title.error{border-color:var(--nylas-error);outline:none}.nylas-event-title input{padding:12px 16px;border-width:1;border-radius:8px;border:1px solid var(--nylas-base-200)}.nylas-event-title span.help-text{color:var(--nylas-base-800);font-size:14px;font-style:normal;font-weight:400;line-height:21px}.nylas-event-title span.error-message{color:var(--nylas-error)}.nylas-event-title label{display:flex;align-items:center;color:var(--nylas-base-800);font-size:16px;font-style:normal;font-weight:400;line-height:150%;}.nylas-event-title label span.required{color:var(--nylas-error, #cc4841)}.nylas-event-title label span.label-icon{margin-left:4px}.nylas-event-title label span.label-icon tooltip-component{display:flex}.highlighted-tag{background-color:var(--nylas-base-200);border-radius:var(--nylas-border-radius);padding:5px;margin-left:4px}.token-options{display:block;background-color:var(--nylas-base-0);width:100%;max-height:336px;overflow:auto;z-index:1;border-radius:4px;position:absolute;top:80px;box-shadow:0px 4px 6px -2px rgba(0, 0, 0, 0.0509803922);box-shadow:0px 10px 15px -3px rgba(0, 0, 0, 0.1019607843)}@media screen and (max-width: 768px){.token-options{right:0;width:325px;max-width:unset}}.token-options ul{padding:0;list-style-type:none;color:var(--nylas-base-900);max-height:336px;margin:0}.token-options ul li{padding:16px, 12px, 16px, 12px;color:black;padding:12px 16px;text-decoration:none;display:block;font-family:inherit;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px;text-align:left;cursor:pointer}.token-options ul li .token-label{display:flex;flex-direction:column;font-weight:400}.token-options ul li .token-label .token{color:var(--nylas-abse-900);font-size:16px;line-height:24px}.token-options ul li .token-label .description{color:var(--nylas-base-600);font-size:14px;line-height:21px}.token-options ul li:hover,.token-options ul li:focus,.token-options ul li:active,.token-options ul li.active{background-color:var(--nylas-base-100)}.token-options ul li:hover .token-label .token,.token-options ul li:focus .token-label .token,.token-options ul li:active .token-label .token,.token-options ul li.active .token-label .token{color:var(--nylas-primary)}.token-options .selected{background-color:var(--nylas-base-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;
@@ -28,7 +28,8 @@ const NylasEventTitle = proxyCustomElement(class NylasEventTitle extends HTMLEle
         this.__attachShadow();
         this.valueChanged = createEvent(this, "valueChanged", 7);
         this.internals = this.attachInternals();
-        this.eventTitle = undefined;
+        this.selectedConfiguration = undefined;
+        this.eventTitle = this.selectedConfiguration?.event_booking?.title;
         this.name = 'title';
         this.showTokens = false;
         this.availableTokens = EVENT_TITLE_TOKENS.map(token => ({
@@ -39,6 +40,7 @@ const NylasEventTitle = proxyCustomElement(class NylasEventTitle extends HTMLEle
         this.filteredTokens = this.availableTokens;
         this.ariaActivedescendant = '';
         this.currentWord = { $value: '', fullText: '', index: -1, focusOffset: -1 };
+        this.validationError = '';
     }
     elementNameChangedHandler(newValue) {
         debug('nylas-event-title', 'elementNameChangedHandler', newValue);
@@ -55,6 +57,12 @@ const NylasEventTitle = proxyCustomElement(class NylasEventTitle extends HTMLEle
             options?.forEach(option => option.classList.remove('active'));
         }
     }
+    configChangedHandler(newVal) {
+        const title = newVal?.event_booking?.title;
+        if (title) {
+            this.updateEventTitleFromProp(title);
+        }
+    }
     connectedCallback() {
         debug('nylas-event-title', 'connectedCallback');
     }
@@ -69,13 +77,32 @@ const NylasEventTitle = proxyCustomElement(class NylasEventTitle extends HTMLEle
     disconnectedCallback() {
         debug('nylas-event-title', 'disconnectedCallback');
     }
+    formSubmittedHandler(event) {
+        debug('nylas-event-title', 'formSubmittedHandler', event);
+        if (!this.internals?.validity?.valid) {
+            this.validationError = 'Event title is required';
+        }
+        else {
+            this.validationError = '';
+        }
+    }
     updateEventTitleFromProp(newValue) {
         debug('nylas-event-title', 'eventTitleChangedHandler', newValue);
-        this.titleRef.innerHTML = this.highlightTokens();
-        this.titleRef.focus();
+        if (this.titleRef) {
+            this.titleRef.innerHTML = this.highlightTokens(newValue);
+            this.titleRef.focus();
+            if (typeof this.internals.setValidity === 'function') {
+                if (newValue === '') {
+                    this.internals?.setValidity({ customError: true }, `Event title is required`, this.titleRef);
+                }
+                else {
+                    this.internals?.setValidity({ customError: false });
+                }
+            }
+        }
     }
-    highlightTokens() {
-        let outputHtml = this.eventTitle || '';
+    highlightTokens(title) {
+        let outputHtml = title;
         EVENT_TITLE_TOKENS.forEach(tokenObj => {
             const token = tokenObj.value;
             const regex = new RegExp(`(\\${token})(?!\\w)`, 'g');
@@ -97,7 +124,6 @@ const NylasEventTitle = proxyCustomElement(class NylasEventTitle extends HTMLEle
             };
         };
         const currentBrowser = getBrowser();
-        console.log('currentBrowser', currentBrowser);
         switch (currentBrowser) {
             case 'Chrome':
                 const shadowRootSelection = this.host.shadowRoot?.getSelection();
@@ -256,6 +282,15 @@ const NylasEventTitle = proxyCustomElement(class NylasEventTitle extends HTMLEle
     }
     updateEventTitle(text) {
         const value = text.replace(/ +/g, ' ');
+        if (value === '') {
+            this.internals?.setValidity({ customError: true }, `Event title is required`, this.titleRef);
+            this.validationError = 'Event title is required';
+        }
+        else {
+            this.internals?.setValidity({ customError: false });
+            this.validationError = '';
+        }
+        this.internals?.setFormValue(value, this.name);
         this.valueChanged.emit({ value: value, name: this.name });
     }
     resetDropdown() {
@@ -266,30 +301,38 @@ const NylasEventTitle = proxyCustomElement(class NylasEventTitle extends HTMLEle
         return (h("div", { class: "token-label" }, h("span", { class: "token" }, token.token), h("span", { class: "description" }, token.description)));
     }
     render() {
-        return (h(Host, { key: 'a58acf57120285f1c42b0df698b31e298b40407d' }, h("div", { key: 'ed5b5e3d7694fbce89647344b066326271786779', class: "nylas-event-title", part: "net" }, h("label", { key: '102d6d0df0164809afe2f215408cc321703c38bc', htmlFor: "title" }, "Event title", h("span", { key: 'e024b656ae41640181ba67aed42a52509774354c', class: "required" }, "*"), h("span", { key: '7116bafdab5470e86ba2acdafc2236610b79ea59', class: "label-icon" }, h("tooltip-component", { key: '71a50958f2f04cdfe0cc35c17f60c64f3b910e84' }, h("info-icon", { key: '92e96b68f699d4aff80e028538259e27ba803e18', slot: "tooltip-icon" }), h("span", { key: '5c29a9e8bde6f4cd8df38082b70ad15682e4b687', slot: "tooltip-content" }, "Enter a title for your event.")))), h("div", { key: '72f580436b050b2af9b78149e3b8831912847e7f', class: "title", part: "net__title", ref: el => (this.titleRef = el), contentEditable: "true", onInput: e => this.handleChange(e), onKeyDown: event => this.handleInputKeyDown(event) }), this.showTokens && this.filteredTokens?.length > 0 && (h("div", { class: "token-options", part: "net__dropdown-content" }, h("ul", { tabindex: "-1", role: "listbox", "aria-label": this.name, "aria-activedescendant": this.ariaActivedescendant }, this.filteredTokens.map(option => (h("li", { tabindex: "0", key: option.label, id: option.label, class: { active: this.ariaActivedescendant === option.label }, onClick: e => this.selectOption(e, option), role: "option" }, this.getLabelHTML(option.labelHTML))))))), h("span", { key: 'a75e5bea3c3841e1030ff676465c036006cf617f', class: "help-text" }, "Create a dynamic templated event title by typing $. Learn more"))));
+        return (h(Host, { key: '9287b1b2cb59f9cd83d585807070b8aaa4821a6c' }, h("div", { key: '02ca37b1b68691faf69c6cdd062475f10a87653c', class: "nylas-event-title", part: "net" }, h("label", { key: 'ceeda06d9da67727cdb5fce90b182a28cc3408e1', htmlFor: "title" }, "Event title", h("span", { key: 'd0e6b3387661a7f23a4796611f4854cf64b3bd9f', class: "required" }, "*"), h("span", { key: '84d0dd45f6a21504849aabf195676af2dacc40b2', class: "label-icon" }, h("tooltip-component", { key: 'bc8d5fbbd455a5d983ebb037e3d93e6dc2619cbd' }, h("info-icon", { key: '5c16591baceb37a8739c70b6fa505de08813ff0f', slot: "tooltip-icon" }), h("span", { key: '8214ecaad02beb8da5e0595aa13ff7057a0e60cc', slot: "tooltip-content" }, "Enter a title for your event.")))), h("div", { key: '98e9885cb4acd028908d7fb1b2a028cffd0dc7d4', class: {
+                title: true,
+                error: this.validationError !== '',
+            }, part: "net__title", ref: el => (this.titleRef = el), contentEditable: "true", onInput: e => this.handleChange(e), onKeyDown: event => this.handleInputKeyDown(event) }), this.showTokens && this.filteredTokens?.length > 0 && (h("div", { class: "token-options", part: "net__dropdown-content" }, h("ul", { tabindex: "-1", role: "listbox", "aria-label": this.name, "aria-activedescendant": this.ariaActivedescendant }, this.filteredTokens.map(option => (h("li", { tabindex: "0", key: option.label, id: option.label, class: { active: this.ariaActivedescendant === option.label }, onClick: e => this.selectOption(e, option), role: "option" }, this.getLabelHTML(option.labelHTML))))))), h("span", { key: 'a2a15145119acf95335728589c24138386032188', class: "help-text" }, "Create a dynamic templated event title by typing $. Learn more"), this.validationError != '' && h("span", { class: "error-message" }, this.validationError))));
     }
     static get formAssociated() { return true; }
     get host() { return this; }
     static get watchers() { return {
         "name": ["elementNameChangedHandler"],
-        "ariaActivedescendant": ["ariaActivedescendantChangedHandler"]
+        "ariaActivedescendant": ["ariaActivedescendantChangedHandler"],
+        "selectedConfiguration": ["configChangedHandler"]
     }; }
     static get style() { return nylasEventTitleCss; }
 }, [65, "nylas-event-title", {
+        "selectedConfiguration": [16],
         "eventTitle": [1, "event-title"],
         "name": [1],
         "showTokens": [32],
         "availableTokens": [32],
         "filteredTokens": [32],
         "ariaActivedescendant": [32],
-        "currentWord": [32]
-    }, undefined, {
+        "currentWord": [32],
+        "validationError": [32]
+    }, [[8, "formSubmitted", "formSubmittedHandler"]], {
         "name": ["elementNameChangedHandler"],
-        "ariaActivedescendant": ["ariaActivedescendantChangedHandler"]
+        "ariaActivedescendant": ["ariaActivedescendantChangedHandler"],
+        "selectedConfiguration": ["configChangedHandler"]
     }]);
 __decorate([
     RegisterComponent({
         name: 'nylas-event-title',
+        stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),
         eventToProps: {},
         fireRegisterEvent: true,
     }),
@@ -320,7 +363,6 @@ function defineCustomElement() {
             break;
     } });
 }
-defineCustomElement(NylasEventTitle);
 
 export { NylasEventTitle as N, defineCustomElement as d };