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

package/dist/collection/components/scheduler-editor/nylas-event-description/nylas-event-description.js

@@ -17,14 +17,21 @@ import { debug } from "../../../utils/utils";
 import { Host, h } from "@stencil/core";
 export class NylasEventDescription {
     constructor() {
+        this.selectedConfiguration = undefined;
         this.eventDescription = undefined;
-        this.description = this.eventDescription ?? '';
+        this.description = this.eventDescription || this.selectedConfiguration?.event_booking?.description || '';
         this.name = 'description';
     }
     elementNameChangedHandler(newValue) {
         debug('nylas-event-description', 'elementNameChangedHandler', newValue);
         this.host.setAttribute('name', newValue);
     }
+    selectedConfigurationChangedHandler(newValue, oldValue) {
+        debug('nylas-custom-booking-flow', 'selectedConfigurationChangedHandler', newValue, oldValue);
+        if (newValue?.event_booking?.description) {
+            this.description = newValue?.event_booking?.description;
+        }
+    }
     connectedCallback() {
         debug('nylas-event-description', 'connectedCallback');
     }
@@ -44,7 +51,7 @@ export class NylasEventDescription {
         this.valueChanged.emit({ value: event.target.value, name: this.name });
     }
     render() {
-        return (h(Host, { key: '5519bbdfdc7e253bf5b83c18decd714e54f58714' }, h("div", { key: '36541738e7d447cb6f9b3bf0f931c851efb0d8fe', class: "nylas-event-description", part: "nedesc" }, h("label", { key: 'c0eb70c7e36360844559e0fd0a451243fb6f5860', htmlFor: "description" }, "Event description", h("span", { key: '98c176eaa09ccdac28fbba62f67ceeb8a6fed751', class: "label-icon" }, h("tooltip-component", { key: '553ca988451d6053a8863a52cbcdcb12dd041362' }, h("info-icon", { key: '015507616ffc54352cbecc9766e59d0db4a25367', slot: "tooltip-icon" }), h("span", { key: '86efa5b15ae112f6f974ba32e8c138e2c906184f', slot: "tooltip-content" }, "Provide any additional details for your event.")))), h("textarea", { key: '619f982afa3f2af2794d93cc0df930db618a3e5e', id: "description", part: "nedesc__textarea", name: "description", value: this.description, maxlength: "8192", onInput: e => this.handleChange(e) }))));
+        return (h(Host, { key: '08b8a3b8865cc09c467b5b8abc36d2d0f7039fcd' }, h("div", { key: 'b906947588ca23a2edec4f31f04935cdc82bad96', class: "nylas-event-description", part: "nedesc" }, h("label", { key: '144ddfc7a8eb64434981122cc3df24dc89a00c63', htmlFor: "description" }, "Event description", h("span", { key: '6effc462e60a48b4eb55e325baf24f51f7c25854', class: "label-icon" }, h("tooltip-component", { key: 'ee1d7faad42bdae393e4a20b9ec499c217aa21fc' }, h("info-icon", { key: 'aecfd40dca5604d491e085be8fedb92e75276547', slot: "tooltip-icon" }), h("span", { key: 'ce7cfceffe163a4c231813ed85ff7ebc80c8515d', slot: "tooltip-content" }, "Provide any additional details for your event.")))), h("textarea", { key: '0445a874c8d219548447a56780e435b986e159bc', id: "description", part: "nedesc__textarea", name: "description", value: this.description, maxlength: "8192", onInput: e => this.handleChange(e) }))));
     }
     static get is() { return "nylas-event-description"; }
     static get encapsulation() { return "shadow"; }
@@ -61,6 +68,27 @@ export class NylasEventDescription {
     }
     static get properties() {
         return {
+            "selectedConfiguration": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Configuration",
+                    "resolved": "Configuration | undefined",
+                    "references": {
+                        "Configuration": {
+                            "location": "import",
+                            "path": "@nylas/core",
+                            "id": "../nylas-js-core/dist/index.d.ts::Configuration"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The selected config"
+                }
+            },
             "eventDescription": {
                 "type": "string",
                 "mutable": false,
@@ -126,6 +154,9 @@ export class NylasEventDescription {
         return [{
                 "propName": "name",
                 "methodName": "elementNameChangedHandler"
+            }, {
+                "propName": "selectedConfiguration",
+                "methodName": "selectedConfigurationChangedHandler"
             }];
     }
     static get attachInternalsMemberName() { return "internals"; }
@@ -133,6 +164,7 @@ export class NylasEventDescription {
 __decorate([
     RegisterComponent({
         name: 'nylas-event-description',
+        stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),
         eventToProps: {},
         fireRegisterEvent: true,
     }),

package/dist/collection/components/scheduler-editor/nylas-event-description/nylas-event-description.js.map

@@ -1 +1 @@
-{"version":3,"file":"nylas-event-description.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-event-description/nylas-event-description.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAEhE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AActH,MAAM,OAAO,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;IAC3C,CAAC;IAOD,iBAAiB;QACf,KAAK,CAAC,yBAAyB,EAAE,mBAAmB,CAAC,CAAC;IACxD,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,yBAAyB,EAAE,mBAAmB,CAAC,CAAC;QACtD,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IAC5C,CAAC;IAED,gBAAgB;QACd,KAAK,CAAC,yBAAyB,EAAE,kBAAkB,CAAC,CAAC;IACvD,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,yBAAyB,EAAE,sBAAsB,CAAC,CAAC;IAC3D,CAAC;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;IACzE,CAAC;IAOD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAC,QAAQ;gBAChD,8DAAO,OAAO,EAAC,aAAa;;oBAE1B,6DAAM,KAAK,EAAC,YAAY;wBACtB;4BACE,kEAAW,IAAI,EAAC,cAAc,GAAG;4BACjC,6DAAM,IAAI,EAAC,iBAAiB,qDAAsD,CAChE,CACf,CACD;gBACR,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,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GAAa,CAC3J,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAlBC;IALC,iBAAiB,CAA2G;QAC3H,IAAI,EAAE,yBAAyB;QAC/B,YAAY,EAAE,EAAE;QAChB,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;mDAkBD","sourcesContent":["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-description.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-event-description/nylas-event-description.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/scheduler-editor/nylas-event-duration/nylas-event-duration.css

@@ -34,7 +34,7 @@
   display: flex;
   align-items: center;
   color: var(--nylas-base-800);
-  font-size: 14px;
+  font-size: 16px;
   font-style: normal;
   font-weight: 400;
   line-height: 150%; /* 21px */

package/dist/collection/components/scheduler-editor/nylas-event-duration/nylas-event-duration.js

@@ -17,6 +17,7 @@ import { debug } from "../../../utils/utils";
 import { Host, h } from "@stencil/core";
 export class NylasEventDuration {
     constructor() {
+        this.selectedConfiguration = undefined;
         this.name = 'duration';
         this.eventDurationMinutes = undefined;
         this.duration = this.eventDurationMinutes ? (this.eventDurationMinutes >= 60 ? this.eventDurationMinutes / 60 : this.eventDurationMinutes) : 5;
@@ -27,6 +28,14 @@ export class NylasEventDuration {
         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) {
@@ -63,12 +72,6 @@ export class NylasEventDuration {
         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');
     }
@@ -90,7 +93,7 @@ export class NylasEventDuration {
             { 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 is() { return "nylas-event-duration"; }
     static get encapsulation() { return "shadow"; }
@@ -107,6 +110,27 @@ export class NylasEventDuration {
     }
     static get properties() {
         return {
+            "selectedConfiguration": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Configuration",
+                    "resolved": "Configuration | undefined",
+                    "references": {
+                        "Configuration": {
+                            "location": "import",
+                            "path": "@nylas/core",
+                            "id": "../nylas-js-core/dist/index.d.ts::Configuration"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The selected config"
+                }
+            },
             "name": {
                 "type": "string",
                 "mutable": false,
@@ -174,6 +198,9 @@ export class NylasEventDuration {
         return [{
                 "propName": "name",
                 "methodName": "elementNameChangedHandler"
+            }, {
+                "propName": "selectedConfiguration",
+                "methodName": "selectedConfigurationChangedHandler"
             }, {
                 "propName": "durationMinutes",
                 "methodName": "durationMinutesChangedHandler"
@@ -193,6 +220,7 @@ export class NylasEventDuration {
 __decorate([
     RegisterComponent({
         name: 'nylas-event-duration',
+        stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),
         eventToProps: {},
         fireRegisterEvent: true,
     }),

package/dist/collection/components/scheduler-editor/nylas-event-duration/nylas-event-duration.js.map

@@ -1 +1 @@
-{"version":3,"file":"nylas-event-duration.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-event-duration/nylas-event-duration.tsx"],"names":[],"mappings":"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","sourcesContent":["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-duration.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-event-duration/nylas-event-duration.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/scheduler-editor/nylas-event-info/nylas-event-info.js

@@ -29,7 +29,7 @@ export class NylasEventInfo {
         debug('nylas-event-info', 'disconnectedCallback');
     }
     render() {
-        return (h(Host, { key: 'c558409607a64f0b043b5d4877d52a9bbcc8e451' }, h("nylas-form-card", { key: '9ac2943ec1364a07a7597115a516a301b645f105' }, h("h1", { key: '49647e71b13b778ef37ae197aff7b8885520d0d9', slot: "header-title", class: "nylas-event-info__title" }, "Event information"), h("h3", { key: 'a4378d75f03a8b4ab6902d8f8ef4870b9377e367', slot: "header-subtitle", class: "nylas-event-info__subtitle" }, "Enter all event information."), h("div", { key: '3fcfd8cde128d1afaa038f801ee0be0a74068cac', slot: "content", class: "nylas-event-info__content" }, h("slot", { key: 'e4e986148a526fa0ec2bc89f451403031f8d2c51', 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 is() { return "nylas-event-info"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scheduler-editor/nylas-event-limits/nylas-event-limits.js

@@ -29,7 +29,7 @@ export class NylasEventLimits {
         debug('nylas-event-limits', 'disconnectedCallback');
     }
     render() {
-        return (h(Host, { key: '41a6e89d00846f05f1540b0f1f3b6b8e1ee4e179' }, h("nylas-form-card", { key: 'b68ba99fa9cbb92fba4133b327ce8f4e11ea7d55' }, h("h1", { key: '36fac220420d7bc3ae15a10ce1da95fc2a7ea1d0', slot: "header-title", class: "nylas-event-limits__title" }, "Set event limits"), h("h3", { key: 'bd316f146a23e1e95bd4e691d1ee888ba779b927', slot: "header-subtitle", class: "nylas-event-limits__subtitle" }, "Customize event limits for the event."), h("div", { key: '8eb05024799a6b9dfbbbe4d42ced5ee9e8ded026', slot: "content", class: "nylas-event-limits__content" }, h("slot", { key: 'e8554afe460136b431349042c70946dc2eadf93e', 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 is() { return "nylas-event-limits"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scheduler-editor/nylas-event-title/nylas-event-title.css

@@ -44,6 +44,10 @@
   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;
@@ -57,11 +61,14 @@
   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: 14px;
+  font-size: 16px;
   font-style: normal;
   font-weight: 400;
   line-height: 150%; /* 21px */

package/dist/collection/components/scheduler-editor/nylas-event-title/nylas-event-title.js

@@ -18,7 +18,8 @@ import { Host, h } from "@stencil/core";
 import { EVENT_TITLE_TOKENS as eventTitleTokens } from "../../../common/constants";
 export class NylasEventTitle {
     constructor() {
-        this.eventTitle = undefined;
+        this.selectedConfiguration = undefined;
+        this.eventTitle = this.selectedConfiguration?.event_booking?.title;
         this.name = 'title';
         this.showTokens = false;
         this.availableTokens = eventTitleTokens.map(token => ({
@@ -29,6 +30,7 @@ export class NylasEventTitle {
         this.filteredTokens = this.availableTokens;
         this.ariaActivedescendant = '';
         this.currentWord = { $value: '', fullText: '', index: -1, focusOffset: -1 };
+        this.validationError = '';
     }
     elementNameChangedHandler(newValue) {
         debug('nylas-event-title', 'elementNameChangedHandler', newValue);
@@ -45,6 +47,12 @@ export class NylasEventTitle {
             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');
     }
@@ -59,13 +67,32 @@ export class NylasEventTitle {
     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;
         eventTitleTokens.forEach(tokenObj => {
             const token = tokenObj.value;
             const regex = new RegExp(`(\\${token})(?!\\w)`, 'g');
@@ -87,7 +114,6 @@ export class NylasEventTitle {
             };
         };
         const currentBrowser = getBrowser();
-        console.log('currentBrowser', currentBrowser);
         switch (currentBrowser) {
             case 'Chrome':
                 const shadowRootSelection = this.host.shadowRoot?.getSelection();
@@ -246,6 +272,15 @@ export class NylasEventTitle {
     }
     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() {
@@ -256,7 +291,10 @@ export class NylasEventTitle {
         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 is() { return "nylas-event-title"; }
     static get encapsulation() { return "shadow"; }
@@ -273,6 +311,27 @@ export class NylasEventTitle {
     }
     static get properties() {
         return {
+            "selectedConfiguration": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Configuration",
+                    "resolved": "Configuration | undefined",
+                    "references": {
+                        "Configuration": {
+                            "location": "import",
+                            "path": "@nylas/core",
+                            "id": "../nylas-js-core/dist/index.d.ts::Configuration"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The selected config"
+                }
+            },
             "eventTitle": {
                 "type": "string",
                 "mutable": false,
@@ -288,7 +347,8 @@ export class NylasEventTitle {
                     "text": "The title of the event from the cofiguration."
                 },
                 "attribute": "event-title",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "this.selectedConfiguration?.event_booking?.title"
             },
             "name": {
                 "type": "string",
@@ -316,7 +376,8 @@ export class NylasEventTitle {
             "availableTokens": {},
             "filteredTokens": {},
             "ariaActivedescendant": {},
-            "currentWord": {}
+            "currentWord": {},
+            "validationError": {}
         };
     }
     static get events() {
@@ -345,6 +406,18 @@ export class NylasEventTitle {
             }, {
                 "propName": "ariaActivedescendant",
                 "methodName": "ariaActivedescendantChangedHandler"
+            }, {
+                "propName": "selectedConfiguration",
+                "methodName": "configChangedHandler"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "formSubmitted",
+                "method": "formSubmittedHandler",
+                "target": "window",
+                "capture": false,
+                "passive": false
             }];
     }
     static get attachInternalsMemberName() { return "internals"; }
@@ -352,6 +425,7 @@ export class NylasEventTitle {
 __decorate([
     RegisterComponent({
         name: 'nylas-event-title',
+        stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),
         eventToProps: {},
         fireRegisterEvent: true,
     }),