@nylas/web-elements 1.1.0-canary.10 → 1.1.0-canary.11

package/dist/esm/add-circle-icon_21.entry.js

@@ -296,9 +296,9 @@ const NylasAvailabilityPicker = class {
         this.host.setAttribute('name', newValue);
     }
     configChangedHandler(newConfig) {
-        const organizerParticipant = newConfig?.participants?.find(p => p.is_organizer);
-        if (organizerParticipant && organizerParticipant?.availability?.open_hours) {
-            this.openHoursToSchedule(organizerParticipant?.availability?.open_hours);
+        const organizer = newConfig?.participants?.find(p => p.is_organizer);
+        if (organizer && organizer?.availability?.open_hours) {
+            this.openHoursToSchedule(organizer?.availability?.open_hours);
         }
     }
     scheduleChanged(newValue, oldValue) {
@@ -447,7 +447,13 @@ const NylasAvailabilityPicker = class {
         this.schedule[day].splice(index, 1);
         this.schedule = { ...this.schedule };
     }
-    setTime(key, _event, value) {
+    setTime(event) {
+        console.log('timeChanged', event);
+        const { key, value } = event.detail;
+        console.log({
+            key,
+            value,
+        });
         const [dayIndex, timeType] = key.split('_');
         const [day, index] = dayIndex.split(':');
         if (timeType === 'start') {
@@ -459,7 +465,8 @@ const NylasAvailabilityPicker = class {
         this.internals.setValidity({ customError: false });
         this.schedule = { ...this.schedule };
     }
-    setFormError(key, _event, _errorMessage) {
+    setFormError(event) {
+        const { key } = event.detail;
         const [_, timeType] = key.split('_');
         const element = this.host.shadowRoot?.getElementById(key);
         if (element) {
@@ -541,7 +548,7 @@ const NylasAvailabilityPicker = class {
             label: TIMEZONE_MAP[key],
             value: key,
         }));
-        return (h(Host, { key: 'ba1266dfd7debd6f7efa1f5ddc48052806e8f594' }, h("div", { key: '34a52a728438348052f5159d347ff43071742bd4', class: "nylas-availability-picker" }, h("div", { key: '3a5e39e6e3d3ceaef4ce85fba1d2b1e5e7a52cda', class: "header", part: "nap__header" }, h("h3", { key: '4aad60a39b816631b0c9cb89741ceca1da22e05b' }, "General availability"), h("p", { key: '71755be3b152af545828336c3601c24434f764b4' }, "Set your availability for scheduling meetings.")), h("div", { key: 'db86358f996a6b7f75572f65ad469c1c80dee5a2', class: "content" }, h("div", { key: '63a90d8094f600815e2b7e8a13c9cbd25a8a14c1', class: "select-timezone", part: "nap__select-timezone" }, h("h4", { key: '612b2808fe828cf8867c98ea0f80f5a3b3a5ab52', class: "sub-header" }, "Select timezone", h("span", { key: '467c6940b46b12101074211216c920d4c7db40af', class: "icon" }, h("tooltip-component", { key: '8f98c2efd0ebe318854857bcb5a0d56794f5d454' }, h("info-icon", { key: 'e35b77bdd317ff9f25e0c1157acfe734ea81541f', slot: "tooltip-icon" }), h("span", { key: '4fb700e4030ae345e872f2da8352ca00078b57a6', slot: "tooltip-content" }, "Select your timezone for displaying availability.")))), h("select-dropdown", { key: '78270f32b150107baf43fbd7b2a882221ecf33f6', name: "timezone", exportparts: "sd_dropdown: nap__timezone-container, sd_dropdown-button: nap__timezone-button, sd_dropdown-content: nap__timezone-dropdown-content", options: timezoneOptions, defaultSelectedOption: timezoneOptions.find(i => i.value === this.defaultTimezone) }, h("span", { key: '8c76fd5d2396e75a07a2b922d9b44a27a6b4baf0', slot: "select-icon" }, h("globe-icon", { key: '885b683dd6496ed199d576d6a8139609b04ad661', width: "20", height: "20" })))), h("div", { key: 'e6541508d6d99ab9ba7b752c5eb14be33bd517d9', class: "availability", part: "nap__availability" }, Object.keys(this.schedule).map(key => {
+        return (h(Host, { key: 'ebdf308b5d2e38cbbe9c01915a8704cdc137b56f' }, h("div", { key: '81557accec232465b3e86d5d0bdc1ae25aa8d6de', class: "nylas-availability-picker" }, h("div", { key: 'f5c2a5ef92fc59568672b536a9e604547561b8d6', class: "header", part: "nap__header" }, h("h3", { key: 'cbccae32847e68a5fe47f9f1f901e55546621c36' }, "General availability"), h("p", { key: '34600ddd459b5d681574458f4f4acdb5ed26f7ac' }, "Set your availability for scheduling meetings.")), h("div", { key: '65785316b94376cf4d79de9c875e39060226ca31', class: "content" }, h("div", { key: '5c30c0bd916460f668dc3f881b4b01a1792e59b0', class: "select-timezone", part: "nap__select-timezone" }, h("h4", { key: '0638898cae070a5d9eae8cd1dca83e39e5bb735f', class: "sub-header" }, "Select timezone", h("span", { key: 'd6746b3329ba92bf5c759895444d08924ba7769c', class: "icon" }, h("tooltip-component", { key: '76dbc460bd91fa0f33a65c65ce092ad966ce6535' }, h("info-icon", { key: '5778fb41c006172a125a4430186ad85d4cdbaf3c', slot: "tooltip-icon" }), h("span", { key: '76132f33db5dce9d7d7e5e111065ad9d1ec64d3f', slot: "tooltip-content" }, "Select your timezone for displaying availability.")))), h("select-dropdown", { key: '9a0a3702b4868109ccc8f77e1143727de1e3f1fa', name: "timezone", exportparts: "sd_dropdown: nap__timezone-container, sd_dropdown-button: nap__timezone-button, sd_dropdown-content: nap__timezone-dropdown-content", options: timezoneOptions, defaultSelectedOption: timezoneOptions.find(i => i.value === this.defaultTimezone) }, h("span", { key: 'ed0756090602c8a52ffdae493f09cfa7d61dd1e9', slot: "select-icon" }, h("globe-icon", { key: '6e5e5234210ba8cc50ef57338a2f4e926521cb70', width: "20", height: "20" })))), h("div", { key: 'eac4322bf2aa8f5ea84e4d7ccee293803c70b2ac', class: "availability", part: "nap__availability" }, Object.keys(this.schedule).map(key => {
             const day = key;
             const timeRanges = this.schedule[key];
             return (h("div", { class: "availability-day" }, h("div", { class: "day", part: "nap__day" }, h("input", { type: "checkbox", name: day, id: day, checked: timeRanges.length > 0, onClick: () => {
@@ -556,7 +563,7 @@ const NylasAvailabilityPicker = class {
                 timeRanges.map((timeRange, timeRangeIndex) => {
                     const startKey = `${key}:${timeRangeIndex}_start`;
                     const endKey = `${key}:${timeRangeIndex}_end`;
-                    return (h("div", { class: "time-range", part: "nap__time-range" }, h("div", { class: "pickers" }, h("nylas-time-window-picker", { id: startKey, hasError: this.overlapDays[day]?.includes(timeRangeIndex), time: timeRange.start, name: startKey, key: startKey, exportparts: "time-picker: nap__time-picker-container, time-input: nap__time-picker-input, times: nap__time-picker-times", setTime: (event, additionalData) => this.setTime(startKey, event, additionalData), setFormError: (event, additionalData) => this.setFormError(startKey, event, additionalData) }), h("span", null, " - "), h("nylas-time-window-picker", { id: endKey, hasError: this.overlapDays[day]?.includes(timeRangeIndex), time: timeRange.end, name: endKey, key: endKey, minimumStartTime: timeRange.start, exportparts: "time-picker: nap__time-picker-container, time-input: nap__time-picker-input, times: nap__time-picker-times", setTime: (event, additionalData) => this.setTime(endKey, event, additionalData), setFormError: (event, additionalData) => this.setFormError(endKey, event, additionalData) })), h("button", { onClick: () => this.removeTimeRange(day, timeRangeIndex) }, h("close-icon", null))));
+                    return (h("div", { class: "time-range", part: "nap__time-range" }, h("div", { class: "pickers" }, h("nylas-time-window-picker", { id: startKey, hasError: this.overlapDays[day]?.includes(timeRangeIndex), time: timeRange.start, name: startKey, key: startKey, exportparts: "time-picker: nap__time-picker-container, time-input: nap__time-picker-input, times: nap__time-picker-times" }), h("span", null, " - "), h("nylas-time-window-picker", { id: endKey, hasError: this.overlapDays[day]?.includes(timeRangeIndex), time: timeRange.end, name: endKey, key: endKey, minimumStartTime: timeRange.start, exportparts: "time-picker: nap__time-picker-container, time-input: nap__time-picker-input, times: nap__time-picker-times" })), h("button", { onClick: () => this.removeTimeRange(day, timeRangeIndex) }, h("close-icon", null))));
                 }), h("p", { class: "error" }, this.overlapDays[day] ? 'Overlapping time ranges' : '')), h("div", null, timeRanges.length > 0 ? (h("button", { onClick: () => this.addTimeRange(day), part: "nap__add-time-range" }, h("add-circle-icon", null))) : null)));
         }))))));
     }
@@ -695,7 +702,7 @@ __decorate$a([
 ], NylasBookingCalendarPicker.prototype, "render", null);
 NylasBookingCalendarPicker.style = NylasBookingCalendarPickerStyle0;
 
-const nylasBufferTimeCss = ":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;width:inherit}.nylas-buffer-time{width:inherit;display:flex;flex-direction:column;margin:1rem;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-200);text-align:left}.nylas-buffer-time .header{padding:1rem;border-bottom:1px solid var(--nylas-base-200)}.nylas-buffer-time .header h3{margin:0;font-size:1rem;font-weight:600;line-height:20px;color:var(--nylas-base-900);text-align:left}.nylas-buffer-time .header p{margin:0.25rem 0 0 0;font-size:0.875rem;font-weight:400;line-height:20px;color:var(--nylas-base-600);text-align:left}.nylas-buffer-time .nylas-buffer-time__body{display:grid;grid-template-columns:1fr auto}@media screen and (max-width: 768px){.nylas-buffer-time .nylas-buffer-time__body{grid-template-columns:1fr}}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__dropdown{padding:1rem;display:flex;flex-direction:column;gap:1rem;border-right:1px solid var(--nylas-base-200);color:var(--nylas-base-800)}@media screen and (max-width: 768px){.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__dropdown{border:none}}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__dropdown .nylas-buffer-time__row{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:1rem}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__dropdown .nylas-buffer-time__row label{width:200px}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__dropdown .nylas-buffer-time__row .dropdown-container{display:flex;gap:1rem;align-items:center;justify-content:flex-end}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview{width:208px;background:var(--nylas-base-25);border-bottom-right-radius:var(--nylas-border-radius-2x)}@media screen and (max-width: 768px){.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview{width:inherit;border-bottom-left-radius:var(--nylas-border-radius-2x)}}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview h4{font-size:14px;line-height:24px;color:var(--nylas-base-600);font-family:var(--nylas-font-family);font-weight:500;text-align:center}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview .preview-container{padding:0 2rem 1rem}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview .preview-container .slot{background-color:transparent;border-top:1px solid var(--nylas-base-300)}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview .preview-container .slot.active{background-color:var(--nylas-base-100)}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview .preview-container .slot:last-of-type{border-bottom:1px solid var(--nylas-base-300)}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview .preview-container .event-slot{background-color:var(--nylas-base-600);border-top:1px solid var(--nylas-base-300);border-bottom:1px solid var(--nylas-base-300)}.nylas-buffer-time .nylas-buffer-time__dropdown select-dropdown::part(sd_dropdown-button){width:104px;display:flex;justify-content:space-between;align-items:center;border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x);padding:1rem}.nylas-buffer-time .nylas-buffer-time__dropdown select-dropdown::part(sd_dropdown-content){width:100%}.nylas-buffer-time .nylas-buffer-time__dropdown select-dropdown::part(sd_dropdown-button-selected-label){max-width:calc(100% - 2rem);font-family:var(--nylas-font-family);font-size:16px;line-height:24px}";
+const nylasBufferTimeCss = ":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;width:inherit}.nylas-buffer-time{width:inherit;display:flex;flex-direction:column;margin:1rem;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-200);text-align:left}.nylas-buffer-time .header{padding:1rem;border-bottom:1px solid var(--nylas-base-200)}.nylas-buffer-time .header h3{margin:0;font-size:1rem;font-weight:600;line-height:20px;color:var(--nylas-base-900);text-align:left}.nylas-buffer-time .header p{margin:0.25rem 0 0 0;font-size:0.875rem;font-weight:400;line-height:20px;color:var(--nylas-base-600);text-align:left}.nylas-buffer-time .nylas-buffer-time__body{display:grid;grid-template-columns:1fr auto}@media screen and (max-width: 768px){.nylas-buffer-time .nylas-buffer-time__body{grid-template-columns:1fr}}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__dropdown{padding:1rem;display:flex;flex-direction:column;gap:1rem;border-right:1px solid var(--nylas-base-200);color:var(--nylas-base-800)}@media screen and (max-width: 768px){.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__dropdown{border:none}}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__dropdown .nylas-buffer-time__row{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:1rem}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__dropdown .nylas-buffer-time__row label{width:200px}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__dropdown .nylas-buffer-time__row .dropdown-container{display:flex;gap:1rem;align-items:center;justify-content:flex-end}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview{width:208px;background:var(--nylas-base-25);border-bottom-right-radius:var(--nylas-border-radius-2x)}@media screen and (max-width: 768px){.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview{width:inherit;border-bottom-left-radius:var(--nylas-border-radius-2x)}}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview h4{font-size:14px;line-height:24px;color:var(--nylas-base-600);font-family:var(--nylas-font-family);font-weight:500;text-align:center;margin:0.75rem 0}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview .preview-container{padding:0 2rem 1rem}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview .preview-container .slot{background-color:transparent;border-top:1px solid var(--nylas-base-300)}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview .preview-container .slot.active{background-color:var(--nylas-base-100)}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview .preview-container .slot:last-of-type{border-bottom:1px solid var(--nylas-base-300)}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview .preview-container .event-slot{background-color:var(--nylas-base-600);border-top:1px solid var(--nylas-base-300)}.nylas-buffer-time .nylas-buffer-time__dropdown select-dropdown::part(sd_dropdown-button){width:104px;display:flex;justify-content:space-between;align-items:center;border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x);padding:1rem}.nylas-buffer-time .nylas-buffer-time__dropdown select-dropdown::part(sd_dropdown-content){width:100%}.nylas-buffer-time .nylas-buffer-time__dropdown select-dropdown::part(sd_dropdown-button-selected-label){max-width:calc(100% - 2rem);font-family:var(--nylas-font-family);font-size:16px;line-height:24px}";
 const NylasBufferTimeStyle0 = nylasBufferTimeCss;
 
 var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -786,7 +793,7 @@ const NylasBufferTime = class {
     }
     renderPreview() {
         const totalSlots = 4;
-        const slotHeight = 16;
+        const slotHeight = 10;
         const eventSlotHeight = slotHeight * 2;
         const slotFill = minutes => {
             const fullSlots = Math.floor(minutes / 30);
@@ -835,13 +842,14 @@ const NylasBufferTime = class {
         return (h("div", { class: "preview-container" }, createBeforeSlots(), h("div", { class: "event-slot", style: { height: `${eventSlotHeight}px` } }), createAfterSlots()));
     }
     render() {
-        const minuteOptions = Array.from({ length: 121 }, (_, i) => {
+        const minuteOptions = Array.from({ length: 24 }, (_, i) => {
+            const value = (i + 1) * 5;
             return {
-                label: i.toString(),
-                value: i,
+                label: value.toString(),
+                value: value,
             };
         });
-        return (h(Host, null, h("div", { class: "nylas-buffer-time", part: "nbt" }, h("div", { class: "header", part: "nbt__header" }, h("h3", null, "Buffer time"), h("p", null, "Add buffer time before and after the event.")), h("div", { class: "nylas-buffer-time__body", part: "nbt__body" }, h("div", { class: "nylas-buffer-time__dropdown" }, h("div", { class: "nylas-buffer-time__row" }, h("label", null, "Before the event"), h("div", { class: "dropdown-container" }, h("select-dropdown", { id: "before-buffer-time", name: "before-buffer-time", exportparts: "sd_dropdown: nbt__dropdown-before, sd_dropdown-button: nbt__dropdown-button-before, sd_dropdown-content: nbt__dropdown-content-before", options: minuteOptions, defaultSelectedOption: minuteOptions.find(min => min.value == this.selectedBeforeBufferTime) ?? minuteOptions[0] }), h("span", null, "mins"))), h("div", { class: "nylas-buffer-time__row" }, h("label", null, "After the event"), h("div", { class: "dropdown-container" }, h("select-dropdown", { id: "after-buffer-time", name: "after-buffer-time", exportparts: "sd_dropdown: nbt__dropdown-after, sd_dropdown-button: nbt__dropdown-button-after, sd_dropdown-content: nbt__dropdown-content-after", options: minuteOptions, defaultSelectedOption: minuteOptions.find(min => min.value == this.selectedAfterBufferTime) ?? minuteOptions[0] }), h("span", null, "mins")))), h("div", { class: "nylas-buffer-time__preview", part: "nbt__preview" }, h("h4", null, "PREVIEW"), this.renderPreview())))));
+        return (h(Host, null, h("div", { class: "nylas-buffer-time", part: "nbt" }, h("div", { class: "header", part: "nbt__header" }, h("h3", null, "Buffer time"), h("p", null, "Add buffer time before and after the event.")), h("div", { class: "nylas-buffer-time__body", part: "nbt__body" }, h("div", { class: "nylas-buffer-time__dropdown" }, h("div", { class: "nylas-buffer-time__row" }, h("label", null, "Before the event"), h("div", { class: "dropdown-container" }, h("select-dropdown", { id: "before-buffer-time", withSearch: false, name: "before-buffer-time", exportparts: "sd_dropdown: nbt__dropdown-before, sd_dropdown-button: nbt__dropdown-button-before, sd_dropdown-content: nbt__dropdown-content-before", options: minuteOptions, defaultSelectedOption: minuteOptions.find(min => min.value == this.selectedBeforeBufferTime) ?? minuteOptions[0] }), h("span", null, "mins"))), h("div", { class: "nylas-buffer-time__row" }, h("label", null, "After the event"), h("div", { class: "dropdown-container" }, h("select-dropdown", { id: "after-buffer-time", withSearch: false, name: "after-buffer-time", exportparts: "sd_dropdown: nbt__dropdown-after, sd_dropdown-button: nbt__dropdown-button-after, sd_dropdown-content: nbt__dropdown-content-after", options: minuteOptions, defaultSelectedOption: minuteOptions.find(min => min.value == this.selectedAfterBufferTime) ?? minuteOptions[0] }), h("span", null, "mins")))), h("div", { class: "nylas-buffer-time__preview", part: "nbt__preview" }, h("h4", null, "PREVIEW"), this.renderPreview())))));
     }
     static get formAssociated() { return true; }
     get host() { return getElement(this); }
@@ -1013,8 +1021,8 @@ const NylasEventDescription = class {
         }
         this.selectedConfiguration = undefined;
         this.eventDescription = undefined;
-        this.description = this.eventDescription || this.selectedConfiguration?.event_booking?.description || '';
         this.name = 'description';
+        this.description = this.eventDescription || this.selectedConfiguration?.event_booking?.description || '';
     }
     elementNameChangedHandler(newValue) {
         debug('nylas-event-description', 'elementNameChangedHandler', newValue);
@@ -1045,7 +1053,7 @@ const NylasEventDescription = class {
         this.valueChanged.emit({ value: event.target.value, name: this.name });
     }
     render() {
-        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) }))));
+        return (h(Host, { key: '0a1db83797453d80a3fe368c46c7c0419751ae96' }, h("div", { key: 'cb041dfd5f60a1d6969f9dd3b66bf07a30ead95d', class: "nylas-event-description", part: "nedesc" }, h("label", { key: 'f038f2c325d054408d1c4ba2ec046d811abc1b28', htmlFor: "description" }, "Event description", h("span", { key: 'b458c9fc9a283455065612b23888cf4257f7d163', class: "label-icon" }, h("tooltip-component", { key: '556fe837419cb336758136e93b91485a7900ed43' }, h("info-icon", { key: 'ac64baf6ce1f98d924a30f5fda5457f2553201a6', slot: "tooltip-icon" }), h("span", { key: 'f7c463ba89a295e3791d1c7eadc0050b925eeeb4', slot: "tooltip-content" }, "Provide any additional details for your event.")))), h("textarea", { key: '254cca296ff7e4b92626348945834a97d0d593fd', id: "description", part: "nedesc__textarea", name: "description", value: this.description, maxlength: "8192", onInput: e => this.handleChange(e) }))));
     }
     static get formAssociated() { return true; }
     get host() { return getElement(this); }
@@ -1171,7 +1179,7 @@ const NylasEventDuration = class {
             { value: 1, label: 'minutes' },
             { value: 60, label: 'hours' },
         ];
-        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 })))));
+        return (h(Host, { key: '222965e76af408c0b06183e8e888b73578adb158' }, h("div", { key: 'decd15dbfd386cebc4efc880a0a8fb7fc8fc4a1a', class: "nylas-event-duration", part: "ned" }, h("label", { key: '655d4bd8aad28138573516d1a409ff4ad7f90527', htmlFor: "duration" }, "Event duration", h("span", { key: 'f53fc2692fa1b4d3265e946ddf313a8e432897d8', class: "required" }, "*"), h("span", { key: '04f0110989f72e20a836ec8552801b87fc8cc6f8', class: "label-icon" }, h("tooltip-component", { key: 'cead8ac1aa4ca82db690a38306a8987e3b5759e0' }, h("info-icon", { key: '0105ced6a6b7227b7ac39f68869e6f9fed5fc386', slot: "tooltip-icon" }), h("span", { key: '3a1a73f76723e6f0ba4b4c45a08a839f26b8c25d', slot: "tooltip-content" }, "Set the duration of your event.")))), h("div", { key: '7c85aebc13daa31d440d6b7ec4f2104f64ac4407', class: "nylas-event-duration__wrapper" }, h("input", { key: '255e4574db650850cf3396509be0dfdac65175bb', 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: 'a19d552e5e537d9ebeffa1890f2ccafa61a1f761', 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 getElement(this); }
@@ -1235,7 +1243,7 @@ const NylasEventInfo = class {
         debug('nylas-event-info', 'disconnectedCallback');
     }
     render() {
-        return (h(Host, { key: '457f3d049f6a14d618ef40112be0edee12d65a2d' }, h("nylas-form-card", { key: 'b44f094aa09d25ca21a04181d1ae6e66d0a85610' }, h("h1", { key: '60ce63fea2cb8871a7680b903af74aca3b6a65ca', slot: "header-title", class: "nylas-event-info__title" }, "Event information"), h("h3", { key: '174984461cc3acfe3fca921f8578f9066405f209', slot: "header-subtitle", class: "nylas-event-info__subtitle" }, "Enter all event information."), h("div", { key: '7b256c5bf099d277450242fae4b8d7d866249ef8', slot: "content", class: "nylas-event-info__content" }, h("slot", { key: '429339b55f9f729202d37e1bf1ffc39f851545ba', name: "inputs" })))));
+        return (h(Host, { key: 'e606a689e2b20dcddcbdbf42c44933953cb0c9c7' }, h("nylas-form-card", { key: 'f3827f8c8756d131ea0eeca39d8dcae783b58629' }, h("h1", { key: '6deb1da623b3c6ede66653201476647d30b8f7e5', slot: "header-title", class: "nylas-event-info__title" }, "Event information"), h("h3", { key: 'f027a8e56e59fba0e8ec3e4bfcbfda6419c5a6dc', slot: "header-subtitle", class: "nylas-event-info__subtitle" }, "Enter all event information."), h("div", { key: '0124599b210dc4e9395cdc75dd964132e98736b9', slot: "content", class: "nylas-event-info__content" }, h("slot", { key: 'a227128a7e6f7f8b8c52bd0bd24ce672979fef30', name: "inputs" })))));
     }
     static get formAssociated() { return true; }
 };
@@ -1292,7 +1300,7 @@ const NylasEventLimits = class {
         debug('nylas-event-limits', 'disconnectedCallback');
     }
     render() {
-        return (h(Host, { key: '5842b0e121d5e2939d95ae584eb70ef7cbae6b1f' }, h("nylas-form-card", { key: '57141d607074889e5daa1b00ff124cbb4fbfd33d' }, h("h1", { key: '4be5625d740dd7f04d50151ff1af48d175262ec9', slot: "header-title", class: "nylas-event-limits__title" }, "Set event limits"), h("h3", { key: '6eb7607dcaf1e7bc344a5fd06ff5555543927aa7', slot: "header-subtitle", class: "nylas-event-limits__subtitle" }, "Customize event limits for the event."), h("div", { key: 'b3ca5e1a7d63a3d4b79be46536f19a22ec54e95e', slot: "content", class: "nylas-event-limits__content" }, h("slot", { key: '452c3dce511c89c4e07fd54bf325264d686c83d6', name: "inputs" })))));
+        return (h(Host, { key: '56a1396f87f4d81f1a3912ec810e23a9dbed965b' }, h("nylas-form-card", { key: '2007e2fe058e39bb8c276d2995b4b8075d9ed82f' }, h("h1", { key: 'e57bc40b4b369d64cdb2b6c97009dea3f141716f', slot: "header-title", class: "nylas-event-limits__title" }, "Set event limits"), h("h3", { key: 'beb61ca97cfd3dca960e78e5f64abca4ace7777b', slot: "header-subtitle", class: "nylas-event-limits__subtitle" }, "Customize event limits for the event."), h("div", { key: '3912501d3e927fcbc6e8663f9149c66ce54fbd0e', slot: "content", class: "nylas-event-limits__content" }, h("slot", { key: 'a0902c2edc5ef540547452d5f1448ba26547af17', name: "inputs" })))));
     }
     static get formAssociated() { return true; }
 };
@@ -1620,10 +1628,10 @@ const NylasEventTitle = class {
         return (h("div", { class: "token-label" }, h("span", { class: "token" }, token.token), h("span", { class: "description" }, token.description)));
     }
     render() {
-        return (h(Host, { key: 'e0ddf6c13a5a0c0d2e0db9188365418fb7484dcf' }, h("div", { key: 'a3b8e594c8d9632709e777891f04df0aaaf7c5c3', class: "nylas-event-title", part: "net" }, h("label", { key: 'e5794d2cd8be0b1666bfa67c3ea657da5dc8d45d', htmlFor: "title" }, "Event title", h("span", { key: '1210caceb7bf824f01559460e1c5e572cb2dad92', class: "required" }, "*"), h("span", { key: '4280ec285221e6db76ca08723fe3888a1d2643e3', class: "label-icon" }, h("tooltip-component", { key: 'd6c05fb79cf39656af7589a2e9de9ef832d7a2f8' }, h("info-icon", { key: 'a4659d97d60d00dfcc2c993e70da5cfd05904f78', slot: "tooltip-icon" }), h("span", { key: '738bfa669eec42b417be02fbad0584af34044c83', slot: "tooltip-content" }, "Enter a title for your event.")))), h("div", { key: 'df102dc899f8de91154689d9cdaae28465380622', class: {
+        return (h(Host, { key: '28ef0be3f64aafdaabb6bed562f5c89b92f2510e' }, h("div", { key: '42cc820bd4ca2343ebe09108a7ce5fca37c02165', class: "nylas-event-title", part: "net" }, h("label", { key: '748c85b9ef6a656b43137864c49282abfa0b78b9', htmlFor: "title" }, "Event title", h("span", { key: '29e8a26acfc6795ee511457c1f052bcc831757c3', class: "required" }, "*"), h("span", { key: 'a555e59986cb55543c108d82c9e7120e8f78cd2a', class: "label-icon" }, h("tooltip-component", { key: '29e6f432f02f6cb10bee3a3c61374688a23c9a9a' }, h("info-icon", { key: 'af9821938dc7f3175d8fdfb3426631111242483b', slot: "tooltip-icon" }), h("span", { key: 'b1027c6b32fab643f94c4233f3c60e1462f69945', slot: "tooltip-content" }, "Enter a title for your event.")))), h("div", { key: '387e621aa40cef2857b00eae8da13be376296178', 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: 'ec769eea7e2e3ff6d64bef0f5099540c93ba80ab', class: "help-text" }, "Create a dynamic templated event title by typing $. Learn more"), this.validationError != '' && h("span", { class: "error-message" }, 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: 'c1a3f0602920e0799322aef007e738ec3fd2c478', 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 getElement(this); }
@@ -1747,7 +1755,7 @@ const NylasLimitFutureBookings = class {
         this.selectedPeriod = period;
     }
     render() {
-        return (h(Host, { key: '1bb30d8045366579b327f32f954d64c3360efa11' }, h("div", { key: '2594946bd35a01a0ab64288c54fe886f4577d8b5', class: "nylas-limit-future-bookings", part: "nlfb" }, h("label", { key: 'cf955eb319e09617dd95037d66a387122238d17c' }, "Limit future bookings", h("span", { key: '4f5658353873122f083faec5504856902bdba106', class: "label-icon" }, h("tooltip-component", { key: 'ee20b3543178702592b83e70a5a85988d0c3cd29' }, h("info-icon", { key: 'dfe75e502418b3f00a29d3d0fb76338056089266', slot: "tooltip-icon" }), h("span", { key: 'c7226da2491e6c3beda2f9739afda6220c37c0e1', slot: "tooltip-content" }, "Set a limit on how far in the future bookings can be made.")))), h("time-period-selector", { key: '5ad178b3d7158738a2882cb5a6554727de34a23d', id: "limit-future-bookings", timePeriods: ['day', 'week', 'month'], exportparts: "tps__number-dropdown: nlfb__number-dropdown, tps__number-dropdown-button: nlfb__number-dropdown-button, tps__number-dropdown-content: nlfb__number-dropdown-content, tps__period-dropdown: nlfb__period-dropdown, tps__period-dropdown-button: nlfb__period-dropdown-button, tps__period-dropdown-content: nlfb__period-dropdown-content", defaultSelectedNumber: this.selectedNumber, defaultSelectedPeriod: this.selectedPeriod }))));
+        return (h(Host, { key: '633f17f3c8a36aaf1b48653a471fce7a67c2e6bc' }, h("div", { key: '5685213b7d7d44a54cecda52d553fc49f0b45cf6', class: "nylas-limit-future-bookings", part: "nlfb" }, h("label", { key: '9c3f51639f92585b04cb6c358783ddb240fcd217' }, "Limit future bookings", h("span", { key: 'f234e3ff93652121e54d1aa77cbd77c2e93252c5', class: "label-icon" }, h("tooltip-component", { key: '4a1a059e553f52b856b220c37a9721ed8d890171' }, h("info-icon", { key: 'f6daa7aae8aefe95871744a22d71a1bb743a797c', slot: "tooltip-icon" }), h("span", { key: 'ef99e06e91e3f76e640d8209d0f9ad1831c9fdeb', slot: "tooltip-content" }, "Set a limit on how far in the future bookings can be made.")))), h("time-period-selector", { key: '02215f1ea27a251917bf8ad3cb10f9d36bd870ba', id: "limit-future-bookings", timePeriods: ['day', 'week', 'month'], exportparts: "tps__number-dropdown: nlfb__number-dropdown, tps__number-dropdown-button: nlfb__number-dropdown-button, tps__number-dropdown-content: nlfb__number-dropdown-content, tps__period-dropdown: nlfb__period-dropdown, tps__period-dropdown-button: nlfb__period-dropdown-button, tps__period-dropdown-content: nlfb__period-dropdown-content", defaultSelectedNumber: this.selectedNumber, defaultSelectedPeriod: this.selectedPeriod }))));
     }
     static get formAssociated() { return true; }
     get host() { return getElement(this); }
@@ -1798,11 +1806,11 @@ const NylasLocationComponent = class {
             this.internals = hostRef.$hostElement$.attachInternals();
             hostRef.$hostElement$["s-ei"] = this.internals;
         }
+        this.name = 'location';
         this.selectedConfiguration = undefined;
         this.eventLocation = undefined;
         this.location = this.eventLocation ?? '';
         this.selectedLocationOption = this.eventLocation ? 'custom' : 'none';
-        this.name = 'location';
     }
     elementNameChangedHandler(newValue) {
         debug('nylas-location-component', 'elementNameChangedHandler', newValue);
@@ -1860,10 +1868,10 @@ const NylasLocationComponent = class {
             { value: 'custom', label: 'Custom location' },
         ];
         const icons = {
-            none: h("location-off-icon", { key: '5344819790f0d245e78de8808b05005eaa610991' }),
-            custom: h("location-icon", { key: '6d931006f7ea79e3290bde60cbdd3c1ca8e827f8' }),
+            none: h("location-off-icon", { key: '575c799ee8e373f1fa305166312f3192cbb1195e' }),
+            custom: h("location-icon", { key: '3e9a108a256313289846487fdb5a2c8f93bf06ea' }),
         };
-        return (h(Host, { key: '2117e5636492cd1b3bc3b975fdc1398c030df9a4' }, h("div", { key: '093c3fdfaf0ad88955f8f785a5c589708d941e57', class: "nylas-event-location", part: "nel" }, h("label", { key: 'e2754216f675fc82cdc7813bacfe0e928e9ed50e', htmlFor: "location" }, "Location type", h("span", { key: 'e402fccc0065a4f6fd0cbd05af345b73b06c4464', class: "label-icon" }, h("tooltip-component", { key: 'c818dbca3cbbf29e34c56bbc9caea7fc3816d808' }, h("info-icon", { key: '5ea673e0d49efe7e0a4ac04c3ec64427a63b8843', slot: "tooltip-icon" }), h("span", { key: 'dac6ddf369aa6caf62a870ca349745f546ed3959', slot: "tooltip-content" }, "Choose how you\u2019ll meet with the participants at the scheduled time. Pick from available conferencing options or add a custom location.")))), h("div", { key: 'bf334b9e8e03b660f661d264c9ca52444ee859b6', class: "location-input" }, h("select-dropdown", { key: 'f216e1589bb3b72a9ed6b9cfbec5683795e1b08e', withSearch: false, name: "location", options: locationOptions, defaultSelectedOption: locationOptions.find(i => i.value == this.selectedLocationOption), exportparts: "sd__dropdown: nel__dropdown, sd__dropdown-button: nel__dropdown-button, sd__dropdown-content: nel__dropdown-content" }, h("span", { key: '6ca96d9f95ac189195c1490e6872b2478cd0d270', slot: "select-icon" }, icons[this.selectedLocationOption])), this.selectedLocationOption === 'custom' && (h("input", { type: "text", part: "nel__location", id: "location", name: "location", maxlength: "1024", value: this.location, onInput: e => this.handleChange(e) }))))));
+        return (h(Host, { key: '8038cd624df0d63608bb23d0b52ee73d62939ba6' }, h("div", { key: '3047dfeacda102f18f0413213a86676eb1c5f901', class: "nylas-event-location", part: "nel" }, h("label", { key: '8cbf08ad544cc6dbfa21f8eca510fe7700756cbb', htmlFor: "location" }, "Location type", h("span", { key: 'b806d2ab1087c5d82674d2ba1f697ab650dfff64', class: "label-icon" }, h("tooltip-component", { key: '3a67a7eb1eed2315d46d6e81fe62314bf92226d7' }, h("info-icon", { key: '4e787698acb0d0d272c13a226747c1252741cbe9', slot: "tooltip-icon" }), h("span", { key: '85eb8db37cef3482e59124b21c968dfe4ea38fec', slot: "tooltip-content" }, "Choose how you\u2019ll meet with the participants at the scheduled time. Pick from available conferencing options or add a custom location.")))), h("div", { key: '5970b85d96f9430504846d7ff66a259b639a17d7', class: "location-input" }, h("select-dropdown", { key: 'b848b8a01563c1640a0552c385ed268e15431453', withSearch: false, name: "location", options: locationOptions, defaultSelectedOption: locationOptions.find(i => i.value == this.selectedLocationOption), exportparts: "sd__dropdown: nel__dropdown, sd__dropdown-button: nel__dropdown-button, sd__dropdown-content: nel__dropdown-content" }, h("span", { key: 'c3bf4e65c37357b12892f333a3a2a22803400e46', slot: "select-icon" }, icons[this.selectedLocationOption])), this.selectedLocationOption === 'custom' && (h("input", { type: "text", part: "nel__location", id: "location", name: "location", maxlength: "1024", value: this.location, onInput: e => this.handleChange(e) }))))));
     }
     static get formAssociated() { return true; }
     get host() { return getElement(this); }
@@ -2012,7 +2020,7 @@ const NylasMinCancellationNotice = class {
         this.selectedPeriod = period;
     }
     render() {
-        return (h(Host, { key: 'd2eb0d080d1ce4645a642a4f5d55270ed170e882' }, h("div", { key: '2743c3c781ad47c9d0d53fdad2773f45d172e1f4', class: "nylas-min-cancellation-notice", part: "nmcn" }, h("label", { key: '457729b50558651645ecb10398586af1078cfd34' }, "Minimum cancellation notice", h("span", { key: '00b310035def5b8bbc183fa03d2bcb37d7c04b42', class: "label-icon" }, h("tooltip-component", { key: '27c7695f6302e2d043899656f15a70846c2858e2' }, h("info-icon", { key: '10f878cb410cc284e86890a0d6047c27bdc7f455', slot: "tooltip-icon" }), h("span", { key: 'e853afaa116b43371d01fcb3b801e622902e22cd', slot: "tooltip-content" }, "Set the minimum amount of time required to cancel an event.")))), h("time-period-selector", { key: '8bb3955f8cce7661e213fbf2c107f8326937b467', id: "min-cancellation-notice", exportparts: "tps__number-dropdown: nmcn__number-dropdown, tps__number-dropdown-button: nmcn__number-dropdown-button, tps__number-dropdown-content: nmcn__number-dropdown-content, tps__period-dropdown: nmcn__period-dropdown, tps__period-dropdown-button: nmcn__period-dropdown-button, tps__period-dropdown-content: nmcn__period-dropdown-content", timePeriods: ['minute', 'hour', 'day', 'week'], defaultSelectedNumber: this.selectedNumber, defaultSelectedPeriod: this.selectedPeriod }))));
+        return (h(Host, { key: '473f79ba357832c63d5af02f6123d5d8a4bbee61' }, h("div", { key: '657c38462f01c79f7e830e7758859398e776ccdb', class: "nylas-min-cancellation-notice", part: "nmcn" }, h("label", { key: '9a29a3b348cf93c9de3b7f28d05c319d64ed37c6' }, "Minimum cancellation notice", h("span", { key: 'a618468ede4da9c28ec941ab4b76551cff980d8a', class: "label-icon" }, h("tooltip-component", { key: 'a44b3a7327721e17884840a9124f7c27249f050c' }, h("info-icon", { key: '177c2db8b4f868e23f5e59a08a335a1bbf4e5316', slot: "tooltip-icon" }), h("span", { key: '843ca3f89854fb398717e8fab9c54b124ef93a46', slot: "tooltip-content" }, "Set the minimum amount of time required to cancel an event.")))), h("time-period-selector", { key: '74b22ae97313a1a096d1c5ef6c791507e98da099', id: "min-cancellation-notice", exportparts: "tps__number-dropdown: nmcn__number-dropdown, tps__number-dropdown-button: nmcn__number-dropdown-button, tps__number-dropdown-content: nmcn__number-dropdown-content, tps__period-dropdown: nmcn__period-dropdown, tps__period-dropdown-button: nmcn__period-dropdown-button, tps__period-dropdown-content: nmcn__period-dropdown-content", timePeriods: ['minute', 'hour', 'day', 'week'], defaultSelectedNumber: this.selectedNumber, defaultSelectedPeriod: this.selectedPeriod }))));
     }
     static get formAssociated() { return true; }
     get host() { return getElement(this); }
@@ -2051,13 +2059,12 @@ const TimeInput = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.timeChange = createEvent(this, "timeChange", 7);
+        this.formError = createEvent(this, "formError", 7);
         this.time = undefined;
         this.minimumStartTime = null;
         this.placeholder = 'hh:mmam/pm';
-        this.setTime = undefined;
         this.name = undefined;
         this.hasError = false;
-        this.setFormError = undefined;
         this.err = '';
         this.showTimes = false;
         this.ariaActivedescendant = '';
@@ -2087,7 +2094,10 @@ const TimeInput = class {
             let selectedTimeFormatted = dayjs(this.time, 'hh:mma');
             if (selectedTimeFormatted.isBefore(firstTime)) {
                 this.err = 'Invalid';
-                this.setFormError(null, 'Invalid');
+                this.formError.emit({
+                    key: this.el.id,
+                    message: 'Invalid',
+                });
             }
         }
     }
@@ -2102,41 +2112,64 @@ const TimeInput = class {
             return;
         }
     }
-    handleTimeChange(e, input) {
+    handleTimeChange(_e, input) {
         const timePart = input.split(':');
         if (timePart[0] === '00' && timePart[1].slice(-2) == 'pm') {
             this.err = 'Invalid';
-            this.setFormError(e, 'Invalid');
+            this.formError.emit({
+                key: this.el.id,
+                message: 'Invalid',
+            });
         }
         if (!validateTimeFormatInput(input)) {
             this.err = 'Invalid';
-            this.setFormError(e, 'Invalid');
+            this.formError.emit({
+                key: this.el.id,
+                message: 'Invalid',
+            });
         }
         else {
             this.err = '';
-            this.setFormError(null);
+            this.formError.emit({
+                key: this.el.id,
+                message: '',
+            });
         }
-        this.setTime(e, input);
-        this.timeChange.emit(input);
+        this.timeChange.emit({
+            key: this.el.id,
+            value: input,
+        });
     }
     handleTimeAutocomplete(event) {
         const input = event.target?.value;
         if (!validateTimeFormatInput(input)) {
             this.err = 'Invalid';
-            this.setFormError(event, 'Invalid');
+            this.formError.emit({
+                key: this.el.id,
+                message: 'Invalid',
+            });
             return;
         }
         if (input === '') {
             const newTime = roundToNearest15Minutes().format('hh:mma');
-            this.setTime(event, newTime);
+            this.timeChange.emit({
+                key: this.el.id,
+                value: newTime,
+            });
             return;
         }
         if (!validateExactTimeFormat(input)) {
             const autocompletedTime = autocompleteTimeFormat(input);
-            this.setTime(autocompletedTime);
+            this.timeChange.emit({
+                key: this.el.id,
+                value: autocompletedTime,
+            });
             return;
         }
-        this.setTime(event, input);
+        this.timeChange.emit({
+            key: this.el.id,
+            value: input,
+        });
     }
     handleOnInput(event) {
         const input = event.target?.value;
@@ -2276,7 +2309,7 @@ const TimeInput = class {
         }
     }
     render() {
-        return (h(Host, { key: 'fe86daaa8256c8fb59ffe2dfcbf50220f3a7b746' }, h("div", { key: '8cffe49df87c5bf2b73cef66236c806b47d623d4', class: "time-picker", part: "time-picker" }, h("input", { key: '6f735244c63287b0ec0668b688bbb18bb405346b', type: "text", name: this.name, id: this.name, part: "time-input", class: {
+        return (h(Host, { key: '4a03bc9829bace5ed02129d99e12b6042f49386c' }, h("div", { key: 'ccc660e6cd8727226b7418ee20fe700812f7c70b', class: "time-picker", part: "time-picker" }, h("input", { key: '24be2b42322194545575045f5624ac78bf8c643e', type: "text", name: this.name, id: this.name, part: "time-input", class: {
                 'time-input': true,
                 'error': !!this.err || this.hasError,
             }, ref: el => (this.timeInput = el), value: this.time, onClick: () => {