npm - @nylas/web-elements - Versions diffs - 1.1.0-canary.10 → 1.1.0-canary.11 - Mend

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

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 (226) hide show

package/dist/collection/components/scheduler/nylas-booking-form/nylas-booking-form.js CHANGED Viewed

@@ -161,13 +161,13 @@ export class NylasBookingForm {
         this.guestEmailErrors = { ...errors };
     }
     render() {
-        return (h(Host, { key: '5a255277a21fa84d100bb53d13bb9dce0ce58e24' }, h("form", { key: '19b7aecb9223557f0ff9d4c062968c3242026f0c', onSubmit: e => this.bookButtonClickedHandler(e), noValidate: true }, h("div", { key: '49276b2a59934eeaeb38c06db6968f957b7b9bee', class: "nylas-booking-form" }, h("slot", { key: 'ee0a8c29c1fb6b7273d6a2d3c8cb88180f0e9dbf', name: "custom-booking-form" }, h("div", { key: '662e46f3a7925282f824547a069f52584b94d564', class: "input-wrapper" }, h("label", { key: 'a01c1903ee983e1555006ad14e75cd1b2c3036ff', htmlFor: "name", class: { 'input-label': true, 'error': !this.isNameValid }, part: "nbf__input-label" }, "Name ", h("span", { key: '4729d580bbf9d851c2ac8b686dc826c4e3e4616f', class: "required" }, "*")), h("input", { key: '51754a63345f1d0332a38f646dde6a8a998c8dee', id: "name", type: "text", placeholder: "Enter your name", value: this.name, class: {
+        return (h(Host, { key: '018357db1ce7dbbeb11ebc236b869a3baf246c69' }, h("form", { key: '5f26a98903372d4c587df1d1045bcb240c4ee7cd', onSubmit: e => this.bookButtonClickedHandler(e), noValidate: true }, h("div", { key: '4ad84c89bb19933cb5d8403939104c38705ddfba', class: "nylas-booking-form" }, h("slot", { key: 'c594f51e9d8cbd40e1d42f9aa86baae536a9c7e7', name: "custom-booking-form" }, h("div", { key: 'fe026c1562cb85c773e31cec8a0a3574b3515e0c', class: "input-wrapper" }, h("label", { key: '27ecf20858dd3133ec4914970f7148720bc603ed', htmlFor: "name", class: { 'input-label': true, 'error': !this.isNameValid }, part: "nbf__input-label" }, "Name ", h("span", { key: '4a39ea8d7aa693f860c17aa28b2130ae49f31a1c', class: "required" }, "*")), h("input", { key: '69fb70d74fe3b3cd883ca7fc0a9f174b6f81936a', id: "name", type: "text", placeholder: "Enter your name", value: this.name, class: {
                 input: true,
                 error: !this.isNameValid,
-            }, part: "nbf__input-textfield", onInput: (e) => this.changeName(e.target?.value) }), h("p", { key: 'b8a6660e959a877421bdfffdb87279d8f09123b8', class: "help-text" }, this.validationError.name)), h("div", { key: 'e78a74e67abde7e61c1d3c555c234817770a4040', class: "input-wrapper" }, h("label", { key: 'd5507037f5c668f58e14031dba4276900ef5ed09', htmlFor: "email", class: { 'input-label': true, 'error': !this.isEmailValid }, part: "nbf__input-label" }, "Email ", h("span", { key: '514f00587069ac1cfc6d16bfd30750d6d501817d', class: "required" }, "*")), h("input", { key: '0b80ded98b2174f783fa9e7c951a47661aa894f6', id: "email", type: "email", placeholder: "Enter your email", value: this.email, class: {
+            }, part: "nbf__input-textfield", onInput: (e) => this.changeName(e.target?.value) }), h("p", { key: 'e4be03fd299cbc94713e5561fb9ed69a78af200c', class: "help-text" }, this.validationError.name)), h("div", { key: '017e724bfd408c5bde7714ae8b2a941d4a1194d9', class: "input-wrapper" }, h("label", { key: 'ed19f30d50d5d2ae95bcbf567b5c888b7906463d', htmlFor: "email", class: { 'input-label': true, 'error': !this.isEmailValid }, part: "nbf__input-label" }, "Email ", h("span", { key: '9b3ab493851edfcc407a38fad0994da171ac9976', class: "required" }, "*")), h("input", { key: '768690b3cc350537be1fa39cc7a295f688c1d91d', id: "email", type: "email", placeholder: "Enter your email", value: this.email, class: {
                 input: true,
                 error: !this.isEmailValid,
-            }, part: "nbf__input-textfield", onInput: (e) => this.changeEmail(e.target?.value) }), h("p", { key: 'ba185ccb2bec87049e94d8c5f8d211a838de0025', class: "help-text" }, this.validationError.email)))), h("div", { key: '56e2cce79371533ad66cccad95a79dd8935fe3eb', class: "cta" }, h("sp-button", { key: '2b6410b3cf2b7634737aa858396290ad065dfcfc', treatment: "outline", variant: "secondary", class: 'back', part: "nbf__button-outline", onClick: this.handleBackButtonClicked }, h("slot", { key: '4ba60a2fb3542434ede16ea382ec4ca80cb8d422', name: "booking-form-back-label" }, "Back")), h("sp-button", { key: '49dd32531d7b55529bb73bc82eb0b91820c6ea33', variant: "primary", class: 'book', part: "nbf__button-primary", type: "submit" }, this.isLoading && h("loading-icon", { slot: "icon" }), h("slot", { key: 'a57ae44c1c3a1b020a110f0156435f27897410c6', name: "booking-form-book-label" }, "Book now"))))));
+            }, part: "nbf__input-textfield", onInput: (e) => this.changeEmail(e.target?.value) }), h("p", { key: '24a39d859e700d000a363fe8df2f000365542fb0', class: "help-text" }, this.validationError.email)))), h("div", { key: '40b4b99dcf471afb8079d49fb9a0efe6bb7e406c', class: "cta" }, h("sp-button", { key: 'ae6bc3f620953f355184c7aef3ce692c2509c81d', treatment: "outline", variant: "secondary", class: 'back', part: "nbf__button-outline", onClick: this.handleBackButtonClicked }, h("slot", { key: 'e5a10ff0978756f7c3f8751a7aca6e3281f5046b', name: "booking-form-back-label" }, "Back")), h("sp-button", { key: '3aa5fe99000d52ef64db4191950109caeb526878', variant: "primary", class: 'book', part: "nbf__button-primary", type: "submit" }, this.isLoading && h("loading-icon", { slot: "icon" }), h("slot", { key: '83c5332efd5eb82617dc0a0f5275950431d95c26', name: "booking-form-book-label" }, "Book now"))))));
     }
     static get is() { return "nylas-booking-form"; }
     static get encapsulation() { return "shadow"; }

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

@@ -59,7 +59,7 @@ export class NylasDatePicker {
         return date && selectableDates?.find(d => isSameDay(d, date)) === undefined;
     }
     render() {
-        return (h(Host, { key: 'fd7de67053417b11844a66e5b978f7feb80efe18', part: "ndp" }, h("div", { key: 'a08943851e2239ad12121b90f35760d73a085441', class: "nylas-date-picker" }, h("div", { key: '832ad38012c55eb04ab2c5b0ceb50052ab3edd42', class: 'header flex-row' }, h("h2", { key: '2df451227e57dfee081c1d4435443e479cf8871c', part: 'ndp__month-header' }, h("strong", { key: '63421dca4b9bf36207ba05e9eff795c7c198287c' }, this.month.toLocaleDateString(undefined, { month: 'long' })), "\u00A0", this.month.toLocaleDateString(undefined, { year: 'numeric' })), h("div", { key: 'ca982a82d87baf5658674624c1153f14e77470aa', class: 'pagination' }, h("button", { key: 'd2a41582014f92c23784c71fe1df9834d77fd355', onClick: () => this.changeMonth(-1), class: { 'chevron-left': true, 'button': true }, disabled: !this.selectableDates?.length || this.month <= new Date(), part: "ndp__month-button" }, h("chevron-icon", { key: '4f319da7e440236edb9bfa711fb0b05cd046dc8e' })), h("button", { key: 'ff00426293e1857592ebae58557ea46e5db9858d', onClick: () => this.changeMonth(1), class: { 'chevron-right': true, 'button': true }, disabled: !this.selectableDates?.length || this.disableNextMonthButton, part: "ndp__month-button" }, h("chevron-icon", { key: '7075f5e8da61c9d91fb612771a3d7672f1521b6f' })))), h("div", { key: '3ad884077d163de5182731c03bf856c9e204f411', class: 'dates' }, ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'].map(day => {
+        return (h(Host, { key: 'd6122ec547ac33e6febfe41497a1bd3de1eeb6b3', part: "ndp" }, h("div", { key: 'cee58b509bf57156342c7506a020b64611f62209', class: "nylas-date-picker" }, h("div", { key: 'bb3a8356004b07fd86fb05961eb400215b824e3a', class: 'header flex-row' }, h("h2", { key: '681f87b531eaa6c26b99bb2616fd59cd388e6bd9', part: 'ndp__month-header' }, h("strong", { key: 'e93fb4feacb91042cbfa8bb65b0a196fafb343d2' }, this.month.toLocaleDateString(undefined, { month: 'long' })), "\u00A0", this.month.toLocaleDateString(undefined, { year: 'numeric' })), h("div", { key: 'fb4c4671c2cf24d4ae2ddf1077d0431a8a6261a8', class: 'pagination' }, h("button", { key: '6810b244baf594e6a9c69b2916704744a0d18f74', onClick: () => this.changeMonth(-1), class: { 'chevron-left': true, 'button': true }, disabled: !this.selectableDates?.length || this.month <= new Date(), part: "ndp__month-button" }, h("chevron-icon", { key: '8a14ef5e447da88e3c1c19b77f7d42454243dd4e' })), h("button", { key: 'aa6efd17b59da3308fec14032c64017849750702', onClick: () => this.changeMonth(1), class: { 'chevron-right': true, 'button': true }, disabled: !this.selectableDates?.length || this.disableNextMonthButton, part: "ndp__month-button" }, h("chevron-icon", { key: '3a1704b4c41d92ac54a6936e487402a98bba5de1' })))), h("div", { key: '85910baac9b8b411ebfede44c0a11bff2e489efe', class: 'dates' }, ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'].map(day => {
             return (h("div", { class: 'day', part: "ndp__day" }, day));
         }), this.dates.map((date, i) => {
             const isDisabled = this.isDisabled(date, this.selectableDates);

package/dist/collection/components/scheduler/nylas-locale-switch/nylas-locale-switch.js CHANGED Viewed

@@ -63,13 +63,13 @@ export class NylasLocaleSwitch {
             label: LANGUAGE_MAP[key],
             value: key,
         }));
-        return (h(Host, { key: '688b90cbd1410a8025a8becfd3f979fc854c60a2' }, h("div", { key: 'a4f485ce6204d89e16336c93809dbcf5ebf862ef', class: "nylas-locale-switch" }, h("div", { key: '5525e493d2f8e3258a2fe8b4c739db49d7ef1a35', class: {
+        return (h(Host, { key: '9b59f6361d95bf132b22ff7d03edd20c58d81f9a' }, h("div", { key: 'f2ebeeaed33b6e750f71d23ca24aa2d1ad858a10', class: "nylas-locale-switch" }, h("div", { key: '3bb086e794c113b62d88b458f213beaeb28bf5c7', class: {
                 'select-wrapper': true,
                 'timezone': true,
-            } }, h("select-dropdown", { key: '68f7f48a2cada4cc0c7327431f15384d17ebc261', name: "timezone", options: timezoneOptions, defaultSelectedOption: timezoneOptions.find(op => op.value == this.selectedTimezone) }, h("span", { key: 'd1213a8cba28b2163997cdb4bce7e13d7485e869', slot: "select-icon" }, h("globe-icon", { key: 'f11285b20c93a42a0f195f89966bc7ff7b2d7322', width: "20", height: "20" })))), h("div", { key: '0287627954a80ef5092ded694e61ec2a19606667', class: {
+            } }, h("select-dropdown", { key: '169822d4f1c58f795f0a9189c074699814a2790e', name: "timezone", options: timezoneOptions, defaultSelectedOption: timezoneOptions.find(op => op.value == this.selectedTimezone) }, h("span", { key: '54fd84316990a375e60291bc68406a2fd1a43f57', slot: "select-icon" }, h("globe-icon", { key: '2cd6a94baef61202b97411e10cb212b48ddd527a', width: "20", height: "20" })))), h("div", { key: '39e1a7f52109e87ebfcd41f5eb35146a21ab7911', class: {
                 'select-wrapper': true,
                 'language': true,
-            } }, h("select-dropdown", { key: '1bd58884de605b22cb6a5631b8e9f960cfa058d4', name: "language", options: languageOptions, defaultSelectedOption: languageOptions.find(lang => lang.value == this.selectedLanguage) }, h("span", { key: '0681b6c8296d60c258c2df3bcb60d895c0e0c533', slot: "select-icon" }, h("translate-icon", { key: 'bd3f346f56da2a139c5050799c9e2774d311d72c', width: "20", height: "20" })))))));
+            } }, h("select-dropdown", { key: 'b803b2685efe46673d125b3d10714bafd48197c1', name: "language", options: languageOptions, defaultSelectedOption: languageOptions.find(lang => lang.value == this.selectedLanguage) }, h("span", { key: 'b8a7d37f9bd60a14f2652fd17d7572b2bd853ee7', slot: "select-icon" }, h("translate-icon", { key: 'b36f31c8ddec7a70fdce4154006fce11af4e3bb3', width: "20", height: "20" })))))));
     }
     static get is() { return "nylas-locale-switch"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scheduler/nylas-selected-event-card/nylas-selected-event-card.js CHANGED Viewed

@@ -37,7 +37,7 @@ export class NylasSelectedEventCard {
         this.endTime = new Date(selectedTimeslot?.end_time).toLocaleString(undefined, { timeStyle: 'short' });
     }
     render() {
-        return (h(Host, { key: '1104fd2969ab03bb794c17bbf08f1600a200448c', part: "nsec" }, h("sp-theme", { key: '674934ecb54519d9e8c227a9946b9725518b77e5', theme: "spectrum", color: "dark", scale: "medium" }, h("div", { key: '4d492e825e93b93ff96af4970812178656de4ab8', class: "event-card", part: "nsec__card" }, h("div", { key: '239131412dab45da5b1f7bfe3b4a2eda45a2978b', class: "calendar-icon", part: "nsec__icon" }, h("calendar-icon", { key: 'a2fa2f47b94a2c331d4cac88ef736faef3e30dae' })), h("div", { key: '81c873d5c2019b6ae1d8b746685dbe5efc2d7d0b', class: "nylas-selected-event-card__date", part: "nsec__date" }, this.selectedDate?.toLocaleDateString(undefined, { dateStyle: 'full' })), h("div", { key: '67348e66fd879ead10594b216a2d66cf7da272aa', class: "nylas-selected-event-card__time", part: "nsec__time" }, this.startTime, " - ", this.endTime)), h("div", { key: '0fc6452dae7c5998a70d116c9bdfe25ab109661c', class: "event-timezone", part: "nsec__timezone" }, h("globe-icon", { key: '86c4a1e2728a30e34805a7c286378fe9adef110e' }), TIMEZONE_MAP[this.selectedTimezone]))));
+        return (h(Host, { key: 'c84565db48fc177fd6f8af71db7f9776516cf46f', part: "nsec" }, h("sp-theme", { key: '7de2e148c85b878e735ac6a69a62892110de9b65', theme: "spectrum", color: "dark", scale: "medium" }, h("div", { key: '0a9f43a55c68fdd7d93b42600b94e2f10d551dd4', class: "event-card", part: "nsec__card" }, h("div", { key: '18b16b39d4c3d7c1a0f9c16c084d99f1b9b9ff5b', class: "calendar-icon", part: "nsec__icon" }, h("calendar-icon", { key: '92202409a7e922975ab31216d8f68c3fb8767cbe' })), h("div", { key: '79006fdf073ed56acec50e1e11ddf101fcfca81c', class: "nylas-selected-event-card__date", part: "nsec__date" }, this.selectedDate?.toLocaleDateString(undefined, { dateStyle: 'full' })), h("div", { key: '1f605b2bc03f290b5a5b3ac858256f438ac33651', class: "nylas-selected-event-card__time", part: "nsec__time" }, this.startTime, " - ", this.endTime)), h("div", { key: '03f9f64e0229904519984305751c388886838b99', class: "event-timezone", part: "nsec__timezone" }, h("globe-icon", { key: '7bd33f03d96671423199113ee24fe913f78c1bca' }), TIMEZONE_MAP[this.selectedTimezone]))));
     }
     static get is() { return "nylas-selected-event-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -39,9 +39,9 @@ export class NylasAvailabilityPicker {
         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) {
@@ -190,7 +190,13 @@ export class NylasAvailabilityPicker {
         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') {
@@ -202,7 +208,8 @@ export class NylasAvailabilityPicker {
         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) {
@@ -284,7 +291,7 @@ export class NylasAvailabilityPicker {
             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: () => {
@@ -299,7 +306,7 @@ export class NylasAvailabilityPicker {
                 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)));
         }))))));
     }
@@ -336,7 +343,7 @@ export class NylasAvailabilityPicker {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The selected configuration."
                 }
             },
             "openHours": {
@@ -347,8 +354,9 @@ export class NylasAvailabilityPicker {
                     "resolved": "OpenHours[] | undefined",
                     "references": {
                         "OpenHours": {
-                            "location": "global",
-                            "id": "global::OpenHours"
+                            "location": "local",
+                            "path": "/home/runner/work/nylas/nylas/packages/nylas-web-elements/src/components/scheduler-editor/nylas-availability-picker/nylas-availability-picker.tsx",
+                            "id": "src/components/scheduler-editor/nylas-availability-picker/nylas-availability-picker.tsx::OpenHours"
                         }
                     }
                 },
@@ -356,7 +364,7 @@ export class NylasAvailabilityPicker {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The open hours to display."
                 }
             },
             "name": {
@@ -371,7 +379,7 @@ export class NylasAvailabilityPicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The name of the availability picker."
                 },
                 "attribute": "name",
                 "reflect": false,
@@ -420,8 +428,9 @@ export class NylasAvailabilityPicker {
                     "resolved": "{ value: { openHours: OpenHours[]; timezone: string; }; name: string; }",
                     "references": {
                         "OpenHours": {
-                            "location": "global",
-                            "id": "global::OpenHours"
+                            "location": "local",
+                            "path": "/home/runner/work/nylas/nylas/packages/nylas-web-elements/src/components/scheduler-editor/nylas-availability-picker/nylas-availability-picker.tsx",
+                            "id": "src/components/scheduler-editor/nylas-availability-picker/nylas-availability-picker.tsx::OpenHours"
                         }
                     }
                 }
@@ -447,6 +456,18 @@ export class NylasAvailabilityPicker {
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "timeChange",
+                "method": "setTime",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "formError",
+                "method": "setFormError",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }];
     }
     static get attachInternalsMemberName() { return "internals"; }

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

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

@@ -162,7 +162,7 @@ export class NylasBookingCalendarPicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The default selected calendars."
+                    "text": "The default selected calendar."
                 },
                 "attribute": "default-booking-calendar",
                 "reflect": false,

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';\nimport { User } from '@/common/nylas-api-request';\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 current logged in user.\n /\n @Prop() currentUser?: User;\n /\n The name of the calendar picker.\n /\n @Prop() name: string = 'booking-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 this.defaultBookingCalendar = this.defaultBookingCalendar \|\| this.currentUser?.email \|\| '';\n\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 \|\| this.currentUser?.email \|\| '';\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(), this.name);\n };\n this.valueChanged.emit({ value: event.detail.value, name: this.name, valueChanged });\n }\n\n @RegisterComponent<NylasBookingCalendarPicker, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-booking-calendar-picker',\n stateToProps: new Map([\n ['schedulerConfig.calendars', 'calendars'],\n ['schedulerConfig.currentUser', 'currentUser'],\n ]),\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"]}
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';\nimport { User } from '@/common/nylas-api-request';\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 current logged in user.\n /\n @Prop() currentUser?: User;\n /\n The name of the calendar picker.\n /\n @Prop() name: string = 'booking-calendar';\n /\n The default selected calendar.\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 this.defaultBookingCalendar = this.defaultBookingCalendar \|\| this.currentUser?.email \|\| '';\n\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 \|\| this.currentUser?.email \|\| '';\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(), this.name);\n };\n this.valueChanged.emit({ value: event.detail.value, name: this.name, valueChanged });\n }\n\n @RegisterComponent<NylasBookingCalendarPicker, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-booking-calendar-picker',\n stateToProps: new Map([\n ['schedulerConfig.calendars', 'calendars'],\n ['schedulerConfig.currentUser', 'currentUser'],\n ]),\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.css CHANGED Viewed

@@ -110,6 +110,7 @@
   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;
@@ -127,7 +128,6 @@
 .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;

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

@@ -80,7 +80,7 @@ export class NylasBufferTime {
     }
     renderPreview() {
         const totalSlots = 4;
-        const slotHeight = 16;
+        const slotHeight = 10;
         const eventSlotHeight = slotHeight * 2;
         const slotFill = minutes => {
             const fullSlots = Math.floor(minutes / 30);
@@ -129,13 +129,14 @@ export class NylasBufferTime {
         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 is() { return "nylas-buffer-time"; }
     static get encapsulation() { return "shadow"; }