npm - @nylas/web-elements - Versions diffs - 1.0.2-canary.2 → 1.1.0-canary.3 - Mend

@nylas/web-elements 1.0.2-canary.2 → 1.1.0-canary.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1005) hide show

package/dist/collection/components/scheduler-editor/nylas-additional-participants/nylas-additional-participants.js CHANGED Viewed

@@ -63,10 +63,10 @@ export class NylasAdditionalParticipants {
         this.internals.setFormValue(JSON.stringify(this.participants), 'participants');
     }
     render() {
-        return (h(Host, { key: 'f7e9e11d09521eaaca5a7c0f617bb89d2d63b1c4' }, h("nylas-form-card", { key: '58e42cf68f3e5dc8d76a5c29be28332506c4ac02' }, h("h3", { key: 'df04fd60229abedc20d18611012b3b4d119ec17a', slot: "header-title", class: "nylas-additional-participants__title" }, "Additional participants"), h("p", { key: '794d5d650ee886a3d985f87b3ea46527dcae8e6a', slot: "header-subtitle", class: "nylas-additional-participants__subtitle" }, "Add anyone else who would be joining for this event."), h("div", { key: 'acf2f231f0c18f8389c7618e7b301d94aa819c2e', slot: "content", class: "nylas-additional-participants__content" }, h("div", { key: 'ed87166cfc0f33f515c780412a71a6b7dccbd61b' }, this.participants.map((participant, index) => {
-            return (h("div", { class: 'nylas-additional-participants__input_group' }, h("label", null, participant.is_organizer ? 'Organizer' : `Participant ${index}`), h("div", { class: `nylas-additional-participants__input_wrapper ${participant.is_organizer && 'nylas-additional-participants__input_wrapper_organizer'} ${participant.is_valid === false && 'nylas-additional-participants__input_wrapper_invalid'}` }, h("div", { class: "nylas-additional-participants__input" }, h("input", { type: "text", value: participant.email, onInput: e => {
+        return (h(Host, { key: 'cc6d22c88c41ea406313ab95ec7f90a38704fc5b' }, h("nylas-form-card", { key: '033b0b3497b62ee3a17ee8f480a332d6103f143e' }, h("h3", { key: 'e88c9a1e05adda093bb0b1a1a85f7c3f36d69684', slot: "header-title", class: "nylas-additional-participants__title", part: "nap__title" }, "Additional participants"), h("p", { key: 'aab3da584eecd3437e7d93fc726d1e8718bd066c', slot: "header-subtitle", class: "nylas-additional-participants__subtitle", part: "nap__subtitle" }, "Add anyone else who would be joining for this event."), h("div", { key: '0a4d920d8ea788eca41e2fb46b532df4614925b6', slot: "content", class: "nylas-additional-participants__content" }, h("div", { key: '9aa1c1e851de4e73b97c022f7eed52c91b8c826f' }, this.participants.map((participant, index) => {
+            return (h("div", { class: 'nylas-additional-participants__input_group', part: "nap__input_group" }, h("label", null, participant.is_organizer ? 'Organizer' : `Participant ${index}`), h("div", { part: "nap__input_wrapper", class: `nylas-additional-participants__input_wrapper ${participant.is_organizer && 'nylas-additional-participants__input_wrapper_organizer'} ${participant.is_valid === false && 'nylas-additional-participants__input_wrapper_invalid'}` }, h("div", { class: "nylas-additional-participants__input", part: "nap__input" }, h("input", { type: "text", value: participant.email, onInput: e => {
                     this.onParticipantChange(e, index);
-                }, readOnly: participant.is_organizer, onBlur: () => this.validate(participant.email, index) })), !participant.is_organizer && (h("button", { onClick: () => this.removeParticipant(participant.email) }, h("close-icon", null))))));
+                }, readOnly: participant.is_organizer, onBlur: () => this.validate(participant.email, index) })), !participant.is_organizer && (h("button", { onClick: () => this.removeParticipant(participant.email), part: "nap__remove-participant" }, h("close-icon", null))))));
         }))))));
     }
     static get is() { return "nylas-additional-participants"; }

package/dist/collection/components/scheduler-editor/nylas-additional-participants/nylas-additional-participants.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nylas-additional-participants.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-additional-participants/nylas-additional-participants.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, Prop, State, Watch, h, Element } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\ntype Participant = {\n name?: string;\n email: string;\n is_valid?: boolean;\n is_organizer: boolean;\n availability?: Availability;\n booking?: Booking;\n};\ntype Availability = {\n calendar_ids: string[];\n};\ntype Booking = {\n calendar_id: string;\n};\n\n/*\n The `nylas-additional-participants` component is a form input for adding additional participants to an event.\n /\n@Component({\n tag: 'nylas-additional-participants',\n styleUrl: 'nylas-additional-participants.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasAdditionalParticipants {\n @Element() host!: HTMLNylasAdditionalParticipantsElement;\n @Prop() name: string = 'participants';\n @Prop() eventParticipants?: Participant[];\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-additional-participants', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @State() participants: Participant[] = this.eventParticipants ?? [];\n @State() participantsValid: boolean = true;\n connectedCallback() {\n debug('nylas-additional-participants', 'connectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-additional-participants', 'componentWillLoad');\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-additional-participants', 'componentDidLoad');\n this.internals.setFormValue(JSON.stringify(this.participants), 'participants');\n }\n\n disconnectedCallback() {\n debug('nylas-additional-participants', 'disconnectedCallback');\n }\n onParticipantChange(event, index) {\n debug('nylas-additional-participants', 'onParticipantChange');\n this.participants[index].email = event.target.value;\n this.internals.setFormValue(JSON.stringify(this.participants), 'participants');\n }\n addParticipant() {\n debug('nylas-additional-participants', 'addParticipant');\n this.participants = [...this.participants, { email: '', is_organizer: false, availability: { calendar_ids: ['primary'] } }];\n this.internals.setFormValue(JSON.stringify(this.participants), 'participants');\n }\n removeParticipant(email: string) {\n debug('nylas-additional-participants', 'addParticipant');\n this.participants = this.participants.filter(p => p.email !== email);\n this.internals.setFormValue(JSON.stringify(this.participants), 'participants');\n }\n validate(email, index) {\n debug('nylas-additional-participants', 'validate');\n const regex = /^(([^<>()\\[\\]\\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@\"]+))\|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])\|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\n const valid = regex.test(String(email).toLowerCase());\n this.participants[index].is_valid = valid;\n this.internals.setFormValue(JSON.stringify(this.participants), 'participants');\n }\n\n @RegisterComponent<NylasAdditionalParticipants, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-additional-participants',\n eventToProps: {},\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host>\n <nylas-form-card>\n <h3 slot=\"header-title\" class=\"nylas-additional-participants__title\">\n Additional participants\n </h3>\n <p slot=\"header-subtitle\" class=\"nylas-additional-participants__subtitle\">\n Add anyone else who would be joining for this event.\n </p>\n <div slot=\"content\" class=\"nylas-additional-participants__content\">\n <div>\n {this.participants.map((participant, index) => {\n return (\n <div class={'nylas-additional-participants__input_group'}>\n <label>{participant.is_organizer ? 'Organizer' : `Participant ${index}`}</label>\n <div\n class={`nylas-additional-participants__input_wrapper ${participant.is_organizer && 'nylas-additional-participants__input_wrapper_organizer'} ${participant.is_valid === false && 'nylas-additional-participants__input_wrapper_invalid'}`}\n >\n <div class=\"nylas-additional-participants__input\">\n <input\n type=\"text\"\n value={participant.email}\n onInput={e => {\n this.onParticipantChange(e, index);\n }}\n readOnly={participant.is_organizer}\n onBlur={() => this.validate(participant.email, index)}\n />\n </div>\n {!participant.is_organizer && (\n <button onClick={() => this.removeParticipant(participant.email)}>\n <close-icon />\n </button>\n )}\n </div>\n </div>\n );\n })}\n </div>\n {/* <button class=\"nylas-additional-participants__add\" onClick={() => this.addParticipant()}>\n <add-circle-icon /> <span>Add a participant</span>\n </button> */}\n </div>\n </nylas-form-card>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"nylas-additional-participants.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-additional-participants/nylas-additional-participants.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, Prop, State, Watch, h, Element } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\ntype Participant = {\n name?: string;\n email: string;\n is_valid?: boolean;\n is_organizer: boolean;\n availability?: Availability;\n booking?: Booking;\n};\ntype Availability = {\n calendar_ids: string[];\n};\ntype Booking = {\n calendar_id: string;\n};\n\n/*\n The `nylas-additional-participants` component is a form input for adding additional participants to an event.\n * @part nap__title - The title of the component.\n * @part nap__subtitle - The subtitle of the component.\n * @part nap__content - The content of the component.\n * @part nap__input_group - The input group of the component.\n * @part nap__input_wrapper - The input wrapper of the component.\n * @part nap__input - The input of the component.\n * @part nap__remove-participant - The remove participant button of the component.\n * @part nap__add-participant - The add participant button of the component.\n \n /\n@Component({\n tag: 'nylas-additional-participants',\n styleUrl: 'nylas-additional-participants.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasAdditionalParticipants {\n @Element() host!: HTMLNylasAdditionalParticipantsElement;\n @Prop() name: string = 'participants';\n @Prop() eventParticipants?: Participant[];\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-additional-participants', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @State() participants: Participant[] = this.eventParticipants ?? [];\n @State() participantsValid: boolean = true;\n connectedCallback() {\n debug('nylas-additional-participants', 'connectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-additional-participants', 'componentWillLoad');\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-additional-participants', 'componentDidLoad');\n this.internals.setFormValue(JSON.stringify(this.participants), 'participants');\n }\n\n disconnectedCallback() {\n debug('nylas-additional-participants', 'disconnectedCallback');\n }\n onParticipantChange(event, index) {\n debug('nylas-additional-participants', 'onParticipantChange');\n this.participants[index].email = event.target.value;\n this.internals.setFormValue(JSON.stringify(this.participants), 'participants');\n }\n addParticipant() {\n debug('nylas-additional-participants', 'addParticipant');\n this.participants = [...this.participants, { email: '', is_organizer: false, availability: { calendar_ids: ['primary'] } }];\n this.internals.setFormValue(JSON.stringify(this.participants), 'participants');\n }\n removeParticipant(email: string) {\n debug('nylas-additional-participants', 'addParticipant');\n this.participants = this.participants.filter(p => p.email !== email);\n this.internals.setFormValue(JSON.stringify(this.participants), 'participants');\n }\n validate(email, index) {\n debug('nylas-additional-participants', 'validate');\n const regex = /^(([^<>()\\[\\]\\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@\"]+))\|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])\|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\n const valid = regex.test(String(email).toLowerCase());\n this.participants[index].is_valid = valid;\n this.internals.setFormValue(JSON.stringify(this.participants), 'participants');\n }\n\n @RegisterComponent<NylasAdditionalParticipants, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-additional-participants',\n eventToProps: {},\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host>\n <nylas-form-card>\n <h3 slot=\"header-title\" class=\"nylas-additional-participants__title\" part=\"nap__title\">\n Additional participants\n </h3>\n <p slot=\"header-subtitle\" class=\"nylas-additional-participants__subtitle\" part=\"nap__subtitle\">\n Add anyone else who would be joining for this event.\n </p>\n <div slot=\"content\" class=\"nylas-additional-participants__content\">\n <div>\n {this.participants.map((participant, index) => {\n return (\n <div class={'nylas-additional-participants__input_group'} part=\"nap__input_group\">\n <label>{participant.is_organizer ? 'Organizer' : `Participant ${index}`}</label>\n <div\n part=\"nap__input_wrapper\"\n class={`nylas-additional-participants__input_wrapper ${participant.is_organizer && 'nylas-additional-participants__input_wrapper_organizer'} ${participant.is_valid === false && 'nylas-additional-participants__input_wrapper_invalid'}`}\n >\n <div class=\"nylas-additional-participants__input\" part=\"nap__input\">\n <input\n type=\"text\"\n value={participant.email}\n onInput={e => {\n this.onParticipantChange(e, index);\n }}\n readOnly={participant.is_organizer}\n onBlur={() => this.validate(participant.email, index)}\n />\n </div>\n {!participant.is_organizer && (\n <button onClick={() => this.removeParticipant(participant.email)} part=\"nap__remove-participant\">\n <close-icon />\n </button>\n )}\n </div>\n </div>\n );\n })}\n </div>\n {/* <button class=\"nylas-additional-participants__add\" part=\"nap__add-participant\" onClick={() => this.addParticipant()}>\n <add-circle-icon /> <span>Add a participant</span>\n </button> */}\n </div>\n </nylas-form-card>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/scheduler-editor/nylas-availability-picker/nylas-availability-picker.css CHANGED Viewed

@@ -40,7 +40,7 @@
 }
 .nylas-availability-picker .header h3 {
   margin: 0;
-  font-size: 1rem;
+  font-size: 16px;
   font-weight: 600;
   line-height: 20px;
   color: var(--nylas-base-900);
@@ -57,6 +57,13 @@
 .nylas-availability-picker .content {
   padding: 1rem;
   color: var(--nylas-base-900);
+  font-size: 16px;
+  font-family: var(--nylas-font-family);
+}
+@media screen and (max-width: 504px) {
+  .nylas-availability-picker .content {
+    font-size: 15px;
+  }
 }
 .nylas-availability-picker .content .select-timezone {
   display: flex;
@@ -64,16 +71,22 @@
   align-items: center;
   border-bottom: 1px solid var(--nylas-base-200);
   padding-bottom: 1rem;
+  gap: 1rem;
 }
 .nylas-availability-picker .content .select-timezone h4 {
   display: flex;
   gap: 0.5rem;
   align-items: center;
   margin: 0;
-  font-size: 1rem;
+  font-size: 16px;
   font-weight: 500;
   line-height: 20px;
 }
+@media screen and (max-width: 504px) {
+  .nylas-availability-picker .content .select-timezone h4 {
+    font-size: 15px;
+  }
+}
 .nylas-availability-picker .content .select-timezone select-dropdown {
   border: 1px solid var(--nylas-base-200);
   border-radius: var(--nylas-border-radius-2x);
@@ -85,6 +98,12 @@
   padding: 0 0.5rem;
   margin: 1rem 0;
 }
+@media screen and (max-width: 504px) {
+  .nylas-availability-picker .content .availability {
+    gap: 0.5rem;
+    padding: 0;
+  }
+}
 .nylas-availability-picker .content .availability .availability-day {
   display: grid;
   grid-template-columns: minmax(auto, 65px) 1fr minmax(auto, 40px);
@@ -93,7 +112,14 @@
 }
 @media screen and (max-width: 768px) {
   .nylas-availability-picker .content .availability .availability-day {
-    grid-template-columns: auto;
+    grid-template-columns: 78px 1fr auto;
+  }
+}
+@media screen and (max-width: 504px) {
+  .nylas-availability-picker .content .availability .availability-day {
+    display: inline-grid;
+    gap: 8px;
+    grid-template-columns: 60px 1fr auto;
   }
 }
 .nylas-availability-picker .content .availability .availability-day .day {
@@ -101,10 +127,19 @@
   gap: 0.5rem;
   align-items: center;
 }
+@media screen and (max-width: 504px) {
+  .nylas-availability-picker .content .availability .availability-day .day {
+    gap: 0.25rem;
+  }
+}
+.nylas-availability-picker .content .availability .availability-day .day input[type=checkbox] {
+  transform: scale(1.3);
+}
 .nylas-availability-picker .content .availability .availability-day .time-ranges span.unavailable {
   height: 48px;
   display: flex;
   align-items: center;
+  justify-content: center;
 }
 .nylas-availability-picker .content .availability .availability-day .time-ranges .time-range {
   display: flex;
@@ -112,10 +147,21 @@
   justify-content: space-between;
   align-items: baseline;
 }
+@media screen and (max-width: 504px) {
+  .nylas-availability-picker .content .availability .availability-day .time-ranges .time-range {
+    justify-content: unset;
+    gap: 0.5rem;
+  }
+}
 .nylas-availability-picker .content .availability .availability-day .time-ranges .time-range .pickers {
   display: flex;
   gap: 1rem;
 }
+@media screen and (max-width: 504px) {
+  .nylas-availability-picker .content .availability .availability-day .time-ranges .time-range .pickers {
+    gap: 0.5rem;
+  }
+}
 .nylas-availability-picker .content .availability .availability-day .time-ranges .time-range .pickers span {
   margin-top: 0.75rem;
 }

package/dist/collection/components/scheduler-editor/nylas-availability-picker/nylas-availability-picker.js CHANGED Viewed

@@ -268,10 +268,10 @@ export class NylasAvailabilityPicker {
             label: TIMEZONE_MAP[key],
             value: key,
         }));
-        return (h(Host, { key: '212096aa82e4abcfb7ab34a0a0921e541c4570af' }, h("div", { key: '83a12b281dd08f77e2a184941f47f69c29d804ba', class: "nylas-availability-picker" }, h("div", { key: '82f32b28ac7e9e13c1aa01a0cc99bd2ea68f2400', class: "header", part: "ncp__header" }, h("h3", { key: 'c47f420a6c0226b2d3352d178f8c739978554195' }, "General availability"), h("p", { key: 'badf2c5553670dc99da06815fc418dba59772f7a' }, "Set your availability for scheduling meetings.")), h("div", { key: '32d90f90f5c98ec4afb71286d5963e4431b65932', class: "content" }, h("div", { key: 'f29ed9e09dd1c480b1cc93f6adebf0af6d7a17f9', class: "select-timezone" }, h("h4", { key: '82f68bd68a4c775afb5c16641ce7c42769850722', class: "sub-header" }, "Select timezone", h("span", { key: '3f6113c3d9703096321389d4f7ac6daa259f13f5', class: "icon" }, h("tooltip-component", { key: 'c2c8212ae124d05ccc150c14a3efd1a16e027970' }, h("info-icon", { key: 'f80669ec0e2200c94351a98ce3a7ba710f154df4', slot: "tooltip-icon" }), h("span", { key: '25f33c0424a8bcb48b5e09a9e1297877834f9ff2', slot: "tooltip-content" }, "Select your timezone for displaying availability.")))), h("select-dropdown", { key: 'fa2b1fbb694ac302e94e8b75740a26b3ec841fdc', name: "timezone", options: timezoneOptions, defaultSelectedOption: timezoneOptions.find(i => i.value === this.defaultTimezone) }, h("span", { key: 'a8795a7bbf57c96e54ed30a8bf53884119f5a051', slot: "select-icon" }, h("globe-icon", { key: 'f041371f0d5be498ee7c474296f97d8995bcd9e4', width: "20", height: "20" })))), h("div", { key: 'caa143f02b423a5bee811b944246fff8746e2229', class: "availability" }, Object.keys(this.schedule).map(key => {
+        return (h(Host, { key: '440dc2f314a9c47eb8186f4ed965ed3052301ddf' }, h("div", { key: '2d31ef10ae53275fc065f4e9f68c32f42b60d829', class: "nylas-availability-picker" }, h("div", { key: 'aa6695b6054b81ece7ede5f5e089545a041800f6', class: "header", part: "nap__header" }, h("h3", { key: '86e0d18ca7b70d74159c5cead0d6f5a17a145fa7' }, "General availability"), h("p", { key: '05da67e03befbe936793af5ee98f801b512d28e7' }, "Set your availability for scheduling meetings.")), h("div", { key: '84c6bf714ccea4aff07d6e660d8ca3f96ce9a8cc', class: "content" }, h("div", { key: '16edf74e06bed5440df5f5ea73e90cfa83d08b29', class: "select-timezone", part: "nap__select-timezone" }, h("h4", { key: '1025677efcaf114cb86ce57324c299eeea79b37e', class: "sub-header" }, "Select timezone", h("span", { key: '6d65a6457da202c5a3d5c5cd4e185903a12cec7f', class: "icon" }, h("tooltip-component", { key: '61a40ea06c06f1d306a8b352d9ae883d09768249' }, h("info-icon", { key: '2d447cc2e6a619ee7b1cf1fd3e2b6424fcd6db5b', slot: "tooltip-icon" }), h("span", { key: '35742354ba0841bc1c17170094bab09d536208e6', slot: "tooltip-content" }, "Select your timezone for displaying availability.")))), h("select-dropdown", { key: '3532c95b077fc701cdbf89cd13668acc675cf0e4', 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: 'c1e870c593966e29d72c3f519f3309f84e4b9a9a', slot: "select-icon" }, h("globe-icon", { key: 'df23e31168778926b6118651cd636ab801f062f1', width: "20", height: "20" })))), h("div", { key: '5ad8cf7078dc104d1258f77e1c69bebf8c82d8dd', 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: "ndp__day" }, h("input", { type: "checkbox", name: day, id: day, checked: timeRanges.length > 0, onClick: () => {
+            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: () => {
                     if (timeRanges.length > 0) {
                         this.schedule[day] = [];
                     }
@@ -279,12 +279,12 @@ export class NylasAvailabilityPicker {
                         this.schedule[day] = [{ start: '09:00am', end: '05:00pm' }];
                     }
                     this.schedule = { ...this.schedule };
-                } }), h("label", { htmlFor: day, "aria-label": "Select day" }, day)), h("div", { class: "time-ranges" }, timeRanges.length ? null : h("span", { class: "unavailable" }, "Unavailable"), timeRanges.length > 0 &&
+                } }), h("label", { htmlFor: day, "aria-label": "Select day" }, day)), h("div", { class: "time-ranges", part: "nap__time-ranges" }, timeRanges.length ? null : h("span", { class: "unavailable" }, "Unavailable"), timeRanges.length > 0 &&
                 timeRanges.map((timeRange, timeRangeIndex) => {
                     const startKey = `${key}:${timeRangeIndex}_start`;
                     const endKey = `${key}:${timeRangeIndex}_end`;
-                    return (h("div", { class: "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, 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, 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))));
-                }), h("p", { class: "error" }, this.overlapDays[day] ? 'Overlapping time ranges' : '')), h("div", null, timeRanges.length > 0 ? (h("button", { onClick: () => this.addTimeRange(day) }, h("add-circle-icon", null))) : 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", 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))));
+                }), 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)));
         }))))));
     }
     static get is() { return "nylas-availability-picker"; }

package/dist/collection/components/scheduler-editor/nylas-availability-picker/nylas-availability-picker.js.map CHANGED Viewed

package/dist/collection/components/scheduler-editor/nylas-availability-picker/test/nylas-availability-picker.spec.js CHANGED Viewed

@@ -118,7 +118,7 @@ describe('nylas-availability-picker', () => {
         const timezoneDropdown = page.root?.shadowRoot?.querySelector('.select-timezone select-dropdown')?.shadowRoot;
         const timezoneButton = timezoneDropdown?.querySelector('button');
         expect(timezoneButton).not.toBeNull();
-        expect(timezoneButton?.textContent).toEqual('America / New_York');
+        expect(timezoneButton?.textContent).toEqual('America / New York');
     });
 });
 //# sourceMappingURL=nylas-availability-picker.spec.js.map

package/dist/collection/components/scheduler-editor/nylas-availability-picker/test/nylas-availability-picker.spec.js.map CHANGED Viewed

package/dist/collection/components/scheduler-editor/nylas-booking-calendar-picker/nylas-booking-calendar-picker.css CHANGED Viewed

@@ -56,6 +56,9 @@
 }
 .nylas-booking-calendar-picker .nylas-booking-calendar-picker__loading {
   padding-bottom: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
 }
 .nylas-booking-calendar-picker .nylas-booking-calendar-picker__loading .label {
   display: flex;
@@ -85,6 +88,9 @@
 }
 .nylas-booking-calendar-picker .nylas-booking-calendar-picker__dropdown {
   padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
 }
 .nylas-booking-calendar-picker .nylas-booking-calendar-picker__dropdown span.label {
   display: flex;

package/dist/collection/components/scheduler-editor/nylas-booking-calendar-picker/nylas-booking-calendar-picker.js CHANGED Viewed

@@ -71,7 +71,7 @@ export class NylasBookingCalendarPicker {
                 label: calendar.name,
             };
         }) ?? [];
-        return (h(Host, null, h("div", { class: "nylas-booking-calendar-picker" }, h("div", { class: "header", part: "ncp__header" }, h("h3", null, "Calendar booking"), h("p", null, "Choose calendar where you\u2019d like the event bookings to show up.")), calendarOptions.length > 0 ? (h("div", { class: "nylas-booking-calendar-picker__dropdown" }, h("span", { class: "label" }, "Select a calendar to book meetings on", h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, "Check availability across one or multiple calendars. If multiple calendars are selected, you must be available across all of them to be considered available."))), h("select-dropdown", { name: "booking-calendar", options: calendarOptions, withSearch: false, defaultSelectedOption: calendarOptions.find(cal => cal.value == this.defaultBookingCalendar) ?? calendarOptions[0] }))) : (h("div", { class: "nylas-booking-calendar-picker__loading" }, h("span", { class: "label" }, "Select a calendar to book meetings on ", h("info-icon", null)), h("div", { class: "loading-button" }, h("span", null, "Loading...")))))));
+        return (h(Host, null, h("div", { class: "nylas-booking-calendar-picker", part: "nbcp" }, h("div", { class: "header", part: "nbcp__header" }, h("h3", null, "Calendar booking"), h("p", null, "Choose calendar where you\u2019d like the event bookings to show up.")), calendarOptions.length > 0 ? (h("div", { class: "nylas-booking-calendar-picker__dropdown" }, h("span", { class: "label", part: "nbcp__input-label" }, "Select a calendar to book meetings on", h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, "Check availability across one or multiple calendars. If multiple calendars are selected, you must be available across all of them to be considered available."))), h("select-dropdown", { name: "booking-calendar", options: calendarOptions, withSearch: false, exportparts: "sd_dropdown: nbcp__dropdown, sd_dropdown-button: nbcp__dropdown-button, sd_dropdown-content: nbcp__dropdown-content", defaultSelectedOption: calendarOptions.find(cal => cal.value == this.defaultBookingCalendar) ?? calendarOptions[0] }))) : (h("div", { class: "nylas-booking-calendar-picker__loading" }, h("span", { class: "label" }, "Select a calendar to book meetings on ", h("info-icon", null)), h("div", { class: "loading-button" }, h("span", null, "Loading...")))))));
     }
     static get is() { return "nylas-booking-calendar-picker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scheduler-editor/nylas-booking-calendar-picker/nylas-booking-calendar-picker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nylas-booking-calendar-picker.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-booking-calendar-picker/nylas-booking-calendar-picker.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 { Calendar } from '@nylas/core';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\n/*\n The `nylas-booking-calendar-picker` component is a UI component that displays the booking calendar picker.\n /\n@Component({\n tag: 'nylas-booking-calendar-picker',\n styleUrl: 'nylas-booking-calendar-picker.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasBookingCalendarPicker {\n @Element() host!: HTMLNylasCalendarPickerElement;\n /\n The calendars to choose from.\n /\n @Prop() calendars?: Calendar[];\n /\n The name of the calendar picker.\n /\n @Prop() name: string = 'calendar';\n /\n The default selected calendars.\n /\n @Prop() defaultBookingCalendar: string = '';\n /\n The element internals.\n /\n @AttachInternals() internals!: ElementInternals;\n\n /\n The selected calendars.\n /\n @State() selectedCalendar: string = '';\n\n /\n This event is fired when the selected calendars change.\n /\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n }>;\n\n // Lifecycle methods\n connectedCallback() {\n debug('nylas-booking-calendar-picker', 'connectedCallback');\n }\n\n disconnectedCallback() {\n debug('nylas-booking-calendar-picker', 'disconnectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-booking-calendar-picker', 'componentWillLoad');\n // See comment in the @Watch('name') decorator for more information.\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-booking-calendar-picker', 'componentDidLoad');\n // TODO: Remove this when the internals in tests are fixed.\n if (typeof this.internals.setFormValue === 'function') {\n this.internals.setFormValue(this.defaultBookingCalendar.toString(), 'booking-calendar');\n }\n this.selectedCalendar = this.defaultBookingCalendar;\n }\n\n componentWillUpdate() {\n debug('nylas-booking-calendar-picker', 'componentWillUpdate');\n }\n\n componentDidUpdate() {\n debug('nylas-booking-calendar-picker', 'componentDidUpdate');\n }\n\n componentWillRender() {\n debug('nylas-booking-calendar-picker', 'componentWillRender');\n }\n\n componentDidRender() {\n debug('nylas-booking-calendar-picker', 'componentDidRender');\n }\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-booking-calendar-picker', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Listen('selectedOptionChanged')\n selectedOptionChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('nylas-booking-calendar-picker', 'selectedOptionChangedHandler', event.detail);\n // Pass as handler so that if event.defaultPrevented by parent app, this will be skipped.\n const valueChanged = (event: CustomEvent<{ value: string; name: string }>) => {\n const { value } = event.detail;\n this.selectedCalendar = value;\n this.internals.setFormValue(value.toString(), 'booking-calendar');\n };\n this.valueChanged.emit({ ...event.detail, valueChanged });\n }\n\n @RegisterComponent<NylasBookingCalendarPicker, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-booking-calendar-picker',\n eventToProps: {\n valueChanged: async (\n event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n ) => {\n const { valueChanged } = event.detail;\n // If a handler is passed, call it.\n if (valueChanged) {\n valueChanged(event);\n }\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n const calendarOptions =\n this.calendars?.map(calendar => {\n return {\n value: calendar.id,\n label: calendar.name,\n };\n }) ?? [];\n\n return (\n <Host>\n <div class=\"nylas-booking-calendar-picker\">\n <div class=\"header\" part=\"ncp__header\">\n <h3>Calendar booking</h3>\n <p>Choose calendar where you’d like the event bookings to show up.</p>\n </div>\n\n {calendarOptions.length > 0 ? (\n <div class=\"nylas-booking-calendar-picker__dropdown\">\n <span class=\"label\">\n Select a calendar to book meetings on\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">\n Check availability across one or multiple calendars. If multiple calendars are selected, you must be available across all of them to be considered available.\n </span>\n </tooltip-component>\n </span>\n <select-dropdown\n name=\"booking-calendar\"\n options={calendarOptions}\n withSearch={false}\n defaultSelectedOption={calendarOptions.find(cal => cal.value == this.defaultBookingCalendar) ?? calendarOptions[0]}\n />\n </div>\n ) : (\n <div class=\"nylas-booking-calendar-picker__loading\">\n <span class=\"label\">\n Select a calendar to book meetings on <info-icon />\n </span>\n <div class=\"loading-button\">\n <span>Loading...</span>\n </div>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"nylas-booking-calendar-picker.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-booking-calendar-picker/nylas-booking-calendar-picker.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 { Calendar } from '@nylas/core';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\n/*\n The `nylas-booking-calendar-picker` component is a UI component that displays the booking calendar picker.\n * @part nbcp - The booking calendar picker container\n * @part nbcp__header - The header of the booking calendar picker\n * @part nbcp__input-label - The input label of the booking calendar picker\n * @part nbcp__dropdown - The dropdown container\n * @part nbcp__dropdown-button - The dropdown button\n * @part nbcp__dropdown-content - The dropdown content\n /\n@Component({\n tag: 'nylas-booking-calendar-picker',\n styleUrl: 'nylas-booking-calendar-picker.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasBookingCalendarPicker {\n @Element() host!: HTMLNylasCalendarPickerElement;\n /\n The calendars to choose from.\n /\n @Prop() calendars?: Calendar[];\n /\n The name of the calendar picker.\n /\n @Prop() name: string = 'calendar';\n /\n The default selected calendars.\n /\n @Prop() defaultBookingCalendar: string = '';\n /\n The element internals.\n /\n @AttachInternals() internals!: ElementInternals;\n\n /\n The selected calendars.\n /\n @State() selectedCalendar: string = '';\n\n /\n This event is fired when the selected calendars change.\n /\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n }>;\n\n // Lifecycle methods\n connectedCallback() {\n debug('nylas-booking-calendar-picker', 'connectedCallback');\n }\n\n disconnectedCallback() {\n debug('nylas-booking-calendar-picker', 'disconnectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-booking-calendar-picker', 'componentWillLoad');\n // See comment in the @Watch('name') decorator for more information.\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-booking-calendar-picker', 'componentDidLoad');\n // TODO: Remove this when the internals in tests are fixed.\n if (typeof this.internals.setFormValue === 'function') {\n this.internals.setFormValue(this.defaultBookingCalendar.toString(), 'booking-calendar');\n }\n this.selectedCalendar = this.defaultBookingCalendar;\n }\n\n componentWillUpdate() {\n debug('nylas-booking-calendar-picker', 'componentWillUpdate');\n }\n\n componentDidUpdate() {\n debug('nylas-booking-calendar-picker', 'componentDidUpdate');\n }\n\n componentWillRender() {\n debug('nylas-booking-calendar-picker', 'componentWillRender');\n }\n\n componentDidRender() {\n debug('nylas-booking-calendar-picker', 'componentDidRender');\n }\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-booking-calendar-picker', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Listen('selectedOptionChanged')\n selectedOptionChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('nylas-booking-calendar-picker', 'selectedOptionChangedHandler', event.detail);\n // Pass as handler so that if event.defaultPrevented by parent app, this will be skipped.\n const valueChanged = (event: CustomEvent<{ value: string; name: string }>) => {\n const { value } = event.detail;\n this.selectedCalendar = value;\n this.internals.setFormValue(value.toString(), 'booking-calendar');\n };\n this.valueChanged.emit({ ...event.detail, valueChanged });\n }\n\n @RegisterComponent<NylasBookingCalendarPicker, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-booking-calendar-picker',\n eventToProps: {\n valueChanged: async (\n event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n ) => {\n const { valueChanged } = event.detail;\n // If a handler is passed, call it.\n if (valueChanged) {\n valueChanged(event);\n }\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n const calendarOptions =\n this.calendars?.map(calendar => {\n return {\n value: calendar.id,\n label: calendar.name,\n };\n }) ?? [];\n\n return (\n <Host>\n <div class=\"nylas-booking-calendar-picker\" part=\"nbcp\">\n <div class=\"header\" part=\"nbcp__header\">\n <h3>Calendar booking</h3>\n <p>Choose calendar where you’d like the event bookings to show up.</p>\n </div>\n\n {calendarOptions.length > 0 ? (\n <div class=\"nylas-booking-calendar-picker__dropdown\">\n <span class=\"label\" part=\"nbcp__input-label\">\n Select a calendar to book meetings on\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">\n Check availability across one or multiple calendars. If multiple calendars are selected, you must be available across all of them to be considered available.\n </span>\n </tooltip-component>\n </span>\n <select-dropdown\n name=\"booking-calendar\"\n options={calendarOptions}\n withSearch={false}\n exportparts=\"sd_dropdown: nbcp__dropdown, sd_dropdown-button: nbcp__dropdown-button, sd_dropdown-content: nbcp__dropdown-content\"\n defaultSelectedOption={calendarOptions.find(cal => cal.value == this.defaultBookingCalendar) ?? calendarOptions[0]}\n />\n </div>\n ) : (\n <div class=\"nylas-booking-calendar-picker__loading\">\n <span class=\"label\">\n Select a calendar to book meetings on <info-icon />\n </span>\n <div class=\"loading-button\">\n <span>Loading...</span>\n </div>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/scheduler-editor/nylas-buffer-time/nylas-buffer-time.js CHANGED Viewed

@@ -102,7 +102,7 @@ export class NylasBufferTime {
                 else if (isPartial) {
                     slotStyle.background = `linear-gradient(to top, var(--nylas-base-100) ${partialFillHeight}px, transparent 0)`;
                 }
-                return (h("div", { class: `slot ${isActive ? 'active' : ''}`, style: {
+                return (h("div", { key: index, class: `slot ${isActive ? 'active' : ''}`, style: {
                         height: `${slotHeight}px`,
                         ...slotStyle,
                     } }));
@@ -120,7 +120,7 @@ export class NylasBufferTime {
                 else if (isPartial) {
                     slotStyle.background = `linear-gradient(to bottom, var(--nylas-base-100) ${partialFillHeight}px, transparent 0)`;
                 }
-                return (h("div", { class: `slot ${isActive ? 'active' : ''}`, style: {
+                return (h("div", { key: index, class: `slot ${isActive ? 'active' : ''}`, style: {
                         height: `${slotHeight}px`,
                         ...slotStyle,
                     } }));
@@ -135,7 +135,7 @@ export class NylasBufferTime {
                 value: i,
             };
         });
-        return (h(Host, null, h("div", { class: "nylas-buffer-time" }, h("div", { class: "header", part: "ncp__header" }, h("h3", null, "Buffer time"), h("p", null, "Add buffer time before and after the event.")), h("div", { class: "nylas-buffer-time__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", 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", options: minuteOptions, defaultSelectedOption: minuteOptions.find(min => min.value == this.selectedAfterBufferTime) ?? minuteOptions[0] }), h("span", null, "mins")))), h("div", { class: "nylas-buffer-time__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", 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())))));
     }
     static get is() { return "nylas-buffer-time"; }
     static get encapsulation() { return "shadow"; }