@nylas/web-elements 1.1.0-canary.16 → 1.1.0-canary.17

package/dist/nylas-web-elements/nylas-cancel-booking-form.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, a as createEvent, h, e as Host } from './index-582cfc93.js';
-import { R as RegisterComponent } from './register-component-6ae95538.js';
-import { a as debug } from './utils-49a1d17b.js';
+import { R as RegisterComponent } from './register-component-aef40ec4.js';
+import { a as debug } from './utils-04c10cbd.js';
 import './buffer-es6-5510d761.js';
 import './_commonjsHelpers-6cbf8316.js';
 
@@ -72,7 +72,7 @@ const NylasCancelBookingForm = class {
         debug(`[nylas-cancel-booking-form] Component disconnected`);
     }
     render() {
-        return (h(Host, { key: '073a93d34ef7f08acaa827d0e5f391481572c447', part: "ncec" }, h("sp-theme", { key: 'b2183d3473931a5d1dd18dfdbe32fed0128d5dc1', theme: "spectrum", scale: "medium" }, h("div", { key: 'f9147a9d4041b5848bd11f06da7c96e98af3d9bd', class: "nylas-cancel-booking-form", part: "ncec__card" }, h("div", { key: '15da6ffbfe870b80bd057415469a4c94c1b3a243', class: "nylas-cancel-booking-form__calendar-icon", part: "ncec__icon" }, h("calendar-cancel-icon", { key: 'f3f36d408dbbe9717ff2ca13981714c36a4ba160' })), h("h3", { key: '56cd0d658ba9a1c63cd0017514a190c42796dbf4', class: "nylas-cancel-booking-form__title", part: "ncec__title" }, "Cancel booking?"), h("div", { key: 'db6672c70cc566544ec748f9c7a7426000e0c619', class: "nylas-cancel-booking-form__description", part: "ncec__description" }, this.cancellationPolicy), h("form", { key: 'd227b962561915e823a151a289b135c1d9065510', onSubmit: this.handleSubmitCancelBooking }, h("sp-field-label", { key: '42eea73d2ffb041b90fbdffdc0c7e16603eee949', for: "cancel-reason", class: this.cancellationError ? 'error' : '' }, "Reason for cancellation ", h("span", { key: '57978569e7bd5828b9dfaee053de9a8fae0892d5', class: "required" }, "*")), h("sp-textfield", { key: '08eb8ef56d7536053939086f5da1d5137e43b201', id: "cancel-reason", class: this.cancellationError ? 'error' : '', part: "ncec__reason-textarea", multiline: true, value: this.cancellationReason, onInput: this.handleOnChangeCancellationReason, onFocus: this.handleOnChangeCancellationReason, invalid: !!this.cancellationError }, h("sp-help-text", { key: 'dd985c41efd6427e1cec09874caee5c5d345c1cb', slot: "negative-help-text" }, this.cancellationError)), h("sp-button", { key: '97705e808b56f0d373dc1fa705fd61b912ed643e', variant: "primary", class: "cancel", type: "submit", part: "ncec__button-cta" }, "Cancel booking"), h("sp-button", { key: '21ae78e3492ad79cbee485709bb863c29f4b041f', variant: "secondary", class: "back", treatment: "outline", part: "ncec__button-outline", onClick: this.handleGoBackClicked }, "Go back"))))));
+        return (h(Host, { key: '25f45d91057f52263ae313ffed14d56ba22a783d', part: "ncec" }, h("sp-theme", { key: 'c213bc36d8459f0c206ca19bdd77d2d6b5ba5c1b', theme: "spectrum", scale: "medium" }, h("div", { key: 'bd50aa9a5c416825bc6b05c0bf47d85a31021c29', class: "nylas-cancel-booking-form", part: "ncec__card" }, h("div", { key: '9654b0cbda12436ac025265f82aa8bfe0a127fbd', class: "nylas-cancel-booking-form__calendar-icon", part: "ncec__icon" }, h("calendar-cancel-icon", { key: '3a97606f7c5f2e0f9c08dc7f0b199e56a4afa7f4' })), h("h3", { key: '26c0a115101786847fa681fa2cb3492561516f64', class: "nylas-cancel-booking-form__title", part: "ncec__title" }, "Cancel booking?"), h("div", { key: '05fe59fff1fa6b8bf38313bef5457d4022674570', class: "nylas-cancel-booking-form__description", part: "ncec__description" }, this.cancellationPolicy), h("form", { key: '6c3c1365bde80d1915026f125be9208c3c16d69c', onSubmit: this.handleSubmitCancelBooking }, h("sp-field-label", { key: 'fca2f04d8300b0e1be7a8071fed69c714f82491e', for: "cancel-reason", class: this.cancellationError ? 'error' : '' }, "Reason for cancellation ", h("span", { key: '1a77038fbda4048fca0e7cc8a39ad357a10f0fd7', class: "required" }, "*")), h("sp-textfield", { key: 'dbb19d14b09f7b85776ca288ec8f9fe58d5080f5', id: "cancel-reason", class: this.cancellationError ? 'error' : '', part: "ncec__reason-textarea", multiline: true, value: this.cancellationReason, onInput: this.handleOnChangeCancellationReason, onFocus: this.handleOnChangeCancellationReason, invalid: !!this.cancellationError }, h("sp-help-text", { key: 'e2e0c9794cae46b4a5cc857156d904a1236ccb49', slot: "negative-help-text" }, this.cancellationError)), h("sp-button", { key: 'a647e3e70704325f3986e6a869b65a5ec7495354', variant: "primary", class: "cancel", type: "submit", part: "ncec__button-cta" }, "Cancel booking"), h("sp-button", { key: 'b8b732ceafaf6d1090cf7b1a3d979854e17684ca', variant: "secondary", class: "back", treatment: "outline", part: "ncec__button-outline", onClick: this.handleGoBackClicked }, "Go back"))))));
     }
     static get watchers() { return {
         "configSettings": ["configSettingsChangedHandler"]

package/dist/nylas-web-elements/nylas-cancellation-policy.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, a as createEvent, h, e as Host, i as getElement } from './index-582cfc93.js';
-import { R as RegisterComponent } from './register-component-6ae95538.js';
-import { a as debug } from './utils-49a1d17b.js';
+import { R as RegisterComponent } from './register-component-aef40ec4.js';
+import { a as debug } from './utils-04c10cbd.js';
 import { s as sanitizeHtml_1 } from './index-ac065dce.js';
 import './buffer-es6-5510d761.js';
 import './_commonjsHelpers-6cbf8316.js';
@@ -68,7 +68,7 @@ const NylasCancellationPolicy = class {
         this.valueChanged.emit({ value: value, name: this.name });
     }
     render() {
-        return (h(Host, { key: '34cd25b32015d276305a1655cec0e7d943189a4d' }, h("div", { key: '811fd581db9ce4c0aa80dceca9e66d00d1cafb7d', class: "nylas-cancellation-policy", part: "ncpolicy" }, h("label", { key: 'c6693d8f18794177754e708ef725c237f92455d7', htmlFor: this.name }, "Cancellation policy message", h("span", { key: '5c0d9238690e368b63c099625277b85734be5b5c', class: "label-icon" }, h("tooltip-component", { key: '031d9a347cdd9a349747e87ffe68ea0ba611f96f' }, h("info-icon", { key: 'f4e086eb34bfb3eb4fb1997b1047ba22e865f1bc', slot: "tooltip-icon" }), h("span", { key: 'b8dfa32c6c5505561049b0ad2b177c0a912142bf', slot: "tooltip-content" }, "Attendees receive this message if trying to cancel the event. Attendees are asked to provide a reason for cancellation.")))), h("textarea", { key: '2d92b92f7a30f58d0307915293000e4de337808d', id: this.name, part: "ncpolicy__textarea", name: this.name, value: this.message, maxlength: "250", onInput: e => this.handleChange(e) }))));
+        return (h(Host, { key: '9ad194925cfb18c323d3f75aec51c4ac5ad67230' }, h("div", { key: 'a4ae061a504a0cd6a91dd6dd23adcf7c3b8f43d5', class: "nylas-cancellation-policy", part: "ncpolicy" }, h("label", { key: 'ea742ee8fba2e50a5694c210172e8783fa3d5e7b', htmlFor: this.name }, "Cancellation policy message", h("span", { key: '5c7143f8da100b650aa386c9fb895c3fd9ed2e04', class: "label-icon" }, h("tooltip-component", { key: 'f46c7b94a1a58bd7162e5cfffc14a88b04a18a4c' }, h("info-icon", { key: '9d85ce578da1db7b080f3152b8fdb43834968829', slot: "tooltip-icon" }), h("span", { key: '0e4d0c4f98d1529179622c22fa6bf9d56d085ffb', slot: "tooltip-content" }, "Attendees receive this message if trying to cancel the event. Attendees are asked to provide a reason for cancellation.")))), h("textarea", { key: '570404ef8450c4ef2bb28fad4d1c6359b735abae', id: this.name, part: "ncpolicy__textarea", name: this.name, value: this.message, maxlength: "250", onInput: e => this.handleChange(e) }))));
     }
     static get formAssociated() { return true; }
     get host() { return getElement(this); }

package/dist/nylas-web-elements/nylas-cancelled-event-card.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, a as createEvent, h, e as Host } from './index-582cfc93.js';
-import { R as RegisterComponent } from './register-component-6ae95538.js';
-import { a as debug } from './utils-49a1d17b.js';
+import { R as RegisterComponent } from './register-component-aef40ec4.js';
+import { a as debug } from './utils-04c10cbd.js';
 import './buffer-es6-5510d761.js';
 import './_commonjsHelpers-6cbf8316.js';
 
@@ -53,7 +53,7 @@ const NylasCancelledEventCard = class {
         debug(`[nylas-cancelled-event-card] Component disconnected`);
     }
     render() {
-        return (h(Host, { key: '11c4720a791169b5d562f484fecc2e5586bbdeaf', part: "ncec" }, h("sp-theme", { key: 'ccd04e6a1a895ad4be18bdb14d27a1c7403a0568', theme: "spectrum", color: "dark", scale: "medium" }, h("div", { key: 'a0360afadc55f58d20e651cb33036aa364a3740e', class: "nylas-cancelled-event-card", part: "ncec__card" }, h("div", { key: '727eba1d97de774c9a51909bec714688d9e60c1c', class: "nylas-cancelled-event-card__calendar-icon", part: "ncec__icon" }, h("calendar-cancel-icon", { key: 'bd96caf7b68ee65a470e5949d6622de0893c112d' })), h("h3", { key: '9bcb27d08117825255c2a5625e7b8f630e35b1e5', class: "nylas-cancelled-event-card__title", part: "ncec__title" }, "Your booking has been cancelled successfully!"), h("div", { key: 'f356c2776a296b89efe9ff9b02dd0f928ea1c0c8', class: "nylas-cancelled-event-card__description", part: "ncec__description" }, "A cancellation email has been sent to ", this.configSettings?.organizer?.name || 'the participants', "."), h("div", { key: '50130b11b9806a5c6adfd67f436d273fbec91774', class: "nylas-cancelled-event-card__cta" }, h("sp-button", { key: '77e8e62722ac4ace0a667b45feed6684b3bb6056', variant: "secondary", treatment: "outline", disabled: this.isClosing, part: "ncec__button-outline", onClick: this.handleCloseClicked }, this.isClosing ? 'Closing...' : 'Close'))))));
+        return (h(Host, { key: '9c4e8c3d74888d794d747e048ab368ae4f9fce9f', part: "ncec" }, h("sp-theme", { key: 'fe7c297e3da3ec06c54b8c4eddce779e283a6f8c', theme: "spectrum", color: "dark", scale: "medium" }, h("div", { key: '1154b9e1271af9d613401f1958937a2dc87ad2e9', class: "nylas-cancelled-event-card", part: "ncec__card" }, h("div", { key: 'c1d5e51311db568bdfd14c45cdb17a341d1222ad', class: "nylas-cancelled-event-card__calendar-icon", part: "ncec__icon" }, h("calendar-cancel-icon", { key: '9c3f516a80498ff983fe17dd2fbc84d9ee0ac7b8' })), h("h3", { key: '82ed5d4165dbc590bb996569252a5661ac915d98', class: "nylas-cancelled-event-card__title", part: "ncec__title" }, "Your booking has been cancelled successfully!"), h("div", { key: '5a01351f61614bee349cb350395d00d61b43c574', class: "nylas-cancelled-event-card__description", part: "ncec__description" }, "A cancellation email has been sent to ", this.configSettings?.organizer?.name || 'the participants', "."), h("div", { key: 'c82b6b6260111bdecf664a475591cbfab6d4321e', class: "nylas-cancelled-event-card__cta" }, h("sp-button", { key: '34fdcee6945a44597a2084c3043aa3375cd560cb', variant: "secondary", treatment: "outline", disabled: this.isClosing, part: "ncec__button-outline", onClick: this.handleCloseClicked }, this.isClosing ? 'Closing...' : 'Close'))))));
     }
 };
 __decorate([

package/dist/nylas-web-elements/nylas-composer.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, a as createEvent, h, e as Host, i as getElement } from './index-582cfc93.js';
-import { a as debug } from './utils-49a1d17b.js';
+import { a as debug } from './utils-04c10cbd.js';
 import './buffer-es6-5510d761.js';
 import './_commonjsHelpers-6cbf8316.js';
 
@@ -135,7 +135,7 @@ const NylasComposer = class {
         this.editorEl.focus();
     }
     render() {
-        return (h(Host, { key: 'c8ab18162320c10834660c655141a985c36958ac' }, h("sp-theme", { key: '01a86b0ddef68c16b139cdb95bf3f9df102ead60', scale: "medium", color: "dark" }, h("div", { key: '280d8dfbee592023d7461e6691805a6e44e8837b', class: "editor", contentEditable: true, ref: r => (this.editorEl = r) }, h("div", { key: '35437f24077f1e5a9b629bfca6437ec6740c8780', class: "toolbar", ref: r => (this.toolbarEl = r), contentEditable: false }, h("sp-button", { key: '378551180f48beb175216d045acd4d65355f3234', quiet: true, onClick: () => document.execCommand('bold') }, h("div", { key: 'a7a6872cfc4d34939aaeba4e45e67d8ca1ac52ab', slot: "icon" }, h("bold-icon", { key: '198210356c76239162c2d44251845529b5765e04' })), h("div", { key: '6ecdf762f2a29a39bce8c49da6cc366594218c52', slot: "label" }, "Bold")), h("sp-button", { key: '6ee0821abd7462a9105f13228a4441ed302d0df9', quiet: true, onClick: () => document.execCommand('underline') }, h("div", { key: '37745f4ee7e5bac2d4bba65d3682338590b49c88', slot: "icon" }, h("underline-icon", { key: '9b7a46dbf44378c001c16afca0e8c30e0b1ea12f' })), h("div", { key: '54e6ce111dcc82421b475040a0a85d26c648c1d4', slot: "label" }, "Underline")), h("sp-button", { key: 'ae292c9f8f55a7ae82ddfaaa75ba9a045c80c02d', quiet: true, onClick: () => document.execCommand('italic') }, h("div", { key: 'fdfdf0265a51eeca44c72ec7de634f9c23a5a846', slot: "icon" }, h("italic-icon", { key: '6308247060d42eb21284e6687a0abc18cf63e32c' })), h("div", { key: '49487a1f0677fc394dd617abfdb645c56e441f55', slot: "label" }, "Italic")))), h("div", { key: '08b56206aef08fbc262ec615c1c593949ef05c82', class: 'buttons' }, h("sp-button", { key: 'f099e2091f8070adaf80cd9fd4299e53e25ef39b', onClick: this.sendComposer, class: "send" }, "Send"), h("sp-button", { key: '78c73f9aec9dd29a7b1360192ef190d20f0bb092', onClick: this.closeComposer, class: "close" }, "Close")))));
+        return (h(Host, { key: '272229753ac9d990a72c4e1d743b34d01d57d3e3' }, h("sp-theme", { key: 'a43065734dff3bbda8163f9d39f381619020e603', scale: "medium", color: "dark" }, h("div", { key: '11d5f1e8d8c3e7debda04af54a2c6ef5c63b3260', class: "editor", contentEditable: true, ref: r => (this.editorEl = r) }, h("div", { key: '6c936b9bfb1fdce1d8f073405bd80a582849e175', class: "toolbar", ref: r => (this.toolbarEl = r), contentEditable: false }, h("sp-button", { key: 'b6c5c51c52d707165367990fa76b5a80fc837936', quiet: true, onClick: () => document.execCommand('bold') }, h("div", { key: 'e8d07f19efe1bcbb1eb0efd69fe0566df8a656d3', slot: "icon" }, h("bold-icon", { key: 'cd5c2e7b5883e1ff5c6d34106a0b4086ffb9b1d2' })), h("div", { key: '8efca1559b463fc356fe69d0bf7fc327f90ab846', slot: "label" }, "Bold")), h("sp-button", { key: '1d7703909feab13241fd75052946f198ad01d1b6', quiet: true, onClick: () => document.execCommand('underline') }, h("div", { key: 'ab1d89e8d5ebca33447274cffbcda5574f41bdde', slot: "icon" }, h("underline-icon", { key: '0598b423ac6724aef96ca5343ce1449fb56f8766' })), h("div", { key: 'c091c8f3d08798fa7d49b86508b29047e5e4ea44', slot: "label" }, "Underline")), h("sp-button", { key: '60ea18e3f3ff95760910fef22119255477375a8f', quiet: true, onClick: () => document.execCommand('italic') }, h("div", { key: 'ed6f703adc15b721e0e3cfc72ab438a620b34dbd', slot: "icon" }, h("italic-icon", { key: 'adb995c72136305499b149eb706841b4ca8291c8' })), h("div", { key: '481da563cadf1885efe1f466c5299913f78442a7', slot: "label" }, "Italic")))), h("div", { key: '5c2185ee0ba3c99bde46c13094c696fba33bfe6a', class: 'buttons' }, h("sp-button", { key: 'f73a9a795a24e59d2c835b5a9a1cb7e2d16532c6', onClick: this.sendComposer, class: "send" }, "Send"), h("sp-button", { key: '2a2ef56256878c45da84f03933e292a98069c44d', onClick: this.closeComposer, class: "close" }, "Close")))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/nylas-web-elements/nylas-custom-booking-flow.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, a as createEvent, h, e as Host, i as getElement } from './index-582cfc93.js';
-import { R as RegisterComponent } from './register-component-6ae95538.js';
-import { a as debug } from './utils-49a1d17b.js';
+import { R as RegisterComponent } from './register-component-aef40ec4.js';
+import { a as debug } from './utils-04c10cbd.js';
 import './buffer-es6-5510d761.js';
 import './_commonjsHelpers-6cbf8316.js';
 
@@ -95,7 +95,7 @@ const NylasCustomBookingFlow = class {
                 value: 'pre-booking',
             },
         ];
-        return (h(Host, { key: '21319a4631f1c0990936623d6458ad80c424e508' }, h("div", { key: '314ed4bd9b3057d209825cd93b3bcdde32c00a0d', class: "nylas-custom-booking-flow", part: "ncbf" }, h("div", { key: 'ce531904154c284cd4692ab3e31564be5fe826b1', class: "header", part: "ncbf__header" }, h("h3", { key: '403ef6532fcf5b0ecd79944a02aa287537c677e1' }, "Customize booking flow"), h("p", { key: 'c8a5fb5fb02b7b4687778654b91b983ca210a0da' }, "Customize how new bookings are handled when a booking is completed.")), bookingOptions.length > 0 ? (h("div", { class: "nylas-custom-booking-flow__dropdown" }, h("span", { class: "label" }, "After a booking is confirmed", h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, "Choose how you\u2019d like to handle new bookings. If you choose to manually confirm/decline bookings, you will be able to review and accept or decline each booking request."))), h("select-dropdown", { name: "booking-type", options: bookingOptions, withSearch: false, exportparts: "sd_dropdown: ncbf__dropdown, sd_dropdown-button: ncbf__dropdown-button, sd_dropdown-content: ncbf__dropdown-content", defaultSelectedOption: bookingOptions.find(cal => cal.value == this.bookingType) ?? bookingOptions[0] }))) : (h("div", { class: "nylas-custom-booking-flow__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, { key: '6202233ce5955be9542db05e648ef2ea2d8c45c2' }, h("div", { key: '990ca595cc8f541902a4bccc7b0bf7f9f029c32a', class: "nylas-custom-booking-flow", part: "ncbf" }, h("div", { key: 'fc8e126be280ce56f968b4759ce549ebfcba5883', class: "header", part: "ncbf__header" }, h("h3", { key: 'b08624ee0a3fbb31c136be140e7c63d2862ae55d' }, "Customize booking flow"), h("p", { key: '0a21993fc37169030332858b01a6b4a4ad838424' }, "Customize how new bookings are handled when a booking is completed.")), bookingOptions.length > 0 ? (h("div", { class: "nylas-custom-booking-flow__dropdown" }, h("span", { class: "label" }, "After a booking is confirmed", h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, "Choose how you\u2019d like to handle new bookings. If you choose to manually confirm/decline bookings, you will be able to review and accept or decline each booking request."))), h("select-dropdown", { name: "booking-type", options: bookingOptions, withSearch: false, exportparts: "sd_dropdown: ncbf__dropdown, sd_dropdown-button: ncbf__dropdown-button, sd_dropdown-content: ncbf__dropdown-content", defaultSelectedOption: bookingOptions.find(cal => cal.value == this.bookingType) ?? bookingOptions[0] }))) : (h("div", { class: "nylas-custom-booking-flow__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 formAssociated() { return true; }
     get host() { return getElement(this); }

package/dist/nylas-web-elements/nylas-customize-booking-settings.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, a as createEvent, h, e as Host, i as getElement } from './index-582cfc93.js';
-import { R as RegisterComponent } from './register-component-6ae95538.js';
-import { a as debug } from './utils-49a1d17b.js';
+import { R as RegisterComponent } from './register-component-aef40ec4.js';
+import { a as debug } from './utils-04c10cbd.js';
 import './buffer-es6-5510d761.js';
 import './_commonjsHelpers-6cbf8316.js';
 
@@ -103,7 +103,7 @@ const NylasCustomizeBookingSettings = class {
         }), this.name);
     }
     render() {
-        return (h(Host, { key: '289e0e8ff03e0f033bdedc44a66002d971a01a4a' }, h("div", { key: '198e4e31a02a362c393b0b9395c7ab884dd04928', class: "nylas-customize-booking-settings", part: "ncbs" }, h("div", { key: '4ac0939989b64eec0f4cbe6eebe4132be85112d0', class: "header", part: "ncbs__header" }, h("h3", { key: 'a64955a52821d22f1afab025bf18b0505d0aebcd' }, "Additional settings"), h("p", { key: '413d26d3102c624acd77f1b2d6aaa01e9abf8240' }, "Booking settings for the event.")), h("div", { key: 'e6ddf5653c6188773f59dbd6ca683cf2e5bd2c1d', class: "nylas-customize-booking-settings__settings", part: "ncbs__settings" }, h("div", { key: '47ec40306877e710bc53494e0cb23bd17ec1c803', class: "nylas-customize-booking-settings__settings-div", part: "ncbs__settings-div , ncbs__additional_guests" }, h("checkbox-component", { key: '9e5a9452ff0ffe8b590702b91d8dba82512db6cf', name: "hide_additional_guests", label: "Allow guests to invite additional guests.", checked: this.allowGuestsToInvite }, h("span", { key: 'f32cc44ad67e2f135a7581fc72772c156a4f2df6', slot: "label", class: "label" }, h("p", { key: '314d47c72d9a76cca9e94e11bf785b61c6786a48', class: "label-contents" }, "Allow guests to invite additional guests to the booking."), h("tooltip-component", { key: 'd286d724e35b7a8c82c65f42923646c09462fadf', id: "guests" }, h("info-icon", { key: '1feafcf384686c0613c0fe764c09db5b7c1ddae8', slot: "tooltip-icon" }), h("span", { key: '0f17b5425ed3663184150933a86e406a197b18fa', slot: "tooltip-content" }, "Allow guests to invite additional guests to the event. If enabled, the guest will be able to add additional guests' email addresses."))))), h("div", { key: '340b0fcd9d6f263550c347f2a87229a86c674cae', class: "nylas-customize-booking-settings__settings-div", part: "ncbs__settings-div , ncbs__rescheduling_options" }, h("checkbox-component", { key: '2453ac1996fd178d363a712b4d378591be3ee32a', name: "hide_rescheduling_options", label: "Hide 'Reschedule' option on booking page and emails.", checked: this.hideReschedulingOptions }, h("span", { key: '2420f028dc654f9a8ce01ec9a924f7e0694da05b', slot: "label", class: "label" }, h("p", { key: '31bdc2ff59f7cef6ebd1c21329e34e001bfb6235', class: "label-contents" }, "Hide the\u00A0", h("strong", { key: '76ecdab15e2fdb90dd1c34f826f0392b145291dc' }, "Reschedule"), "\u00A0button on the Scheduling Page and in the email notifications."), h("tooltip-component", { key: '489a219e2854cd6aae0df6ec8064d262e74a4dfd', id: "reschedule" }, h("info-icon", { key: '6e727527c025b00ae8907a9381fa45f2b30c325b', slot: "tooltip-icon" }), h("span", { key: '732c2be03c7a37d1ba80d99315c462ec65f24406', slot: "tooltip-content" }, "Hide the 'Reschedule' button on the Scheduling page and in the email notifications. If enabled, the guest will not be able to reschedule the booking."))))), h("div", { key: '4b92782d796cd57802c333e72cce4cb56c2424b5', class: "nylas-customize-booking-settings__settings-div", part: "ncbs__settings-div , ncbs__cancellation_options" }, h("checkbox-component", { key: 'c27bb8a583f782659c7a8c3fb6320f9bc653f005', name: "hide_cancellation_options", label: "Hide 'Cancel' option on booking page and emails.", checked: this.hideCancellationOptions }, h("span", { key: '9feb0f1f1c9cfc9438317ac1e860265b0365d73c', slot: "label", class: "label" }, h("p", { key: 'e5a072e8381efdd81d96cda680bce8408699988e', class: "label-contents" }, "Hide the\u00A0", h("strong", { key: '7451a2ffc3815301afe3c8c6ae80ecaf7f16075f' }, "Cancel"), "\u00A0button on the Scheduling Page and in the email notifications."), h("tooltip-component", { key: '12ba9c92d34cb63dc3ce23b2ab9b00c54e83afd4', id: "cancel" }, h("info-icon", { key: '159518806d8f14c1b9a6b4b36877d3174883bd7d', slot: "tooltip-icon" }), h("span", { key: '075096f27117b4318f883efe2b523c394394e230', slot: "tooltip-content" }, "Hide the 'Cancel' button on the Scheduling page and in the email notifications. If enabled, the guest will not be able to cancel the booking.")))))))));
+        return (h(Host, { key: '98e7ab408f5d7dff71321819cbc2a5e336ca52de' }, h("div", { key: 'ea73803234b4843cf7e58dc2570171e0237ea7d1', class: "nylas-customize-booking-settings", part: "ncbs" }, h("div", { key: '9b081de7e2d2152b874a5a4713a5313c6e021409', class: "header", part: "ncbs__header" }, h("h3", { key: '976be7412b4f8d70269c3b429652fa1091da1457' }, "Additional settings"), h("p", { key: 'f580ed5fd9c29773715bf26f5dc0c466c56ba43f' }, "Booking settings for the event.")), h("div", { key: '9e694bcf133167fa12efbd46bee02158b56e9777', class: "nylas-customize-booking-settings__settings", part: "ncbs__settings" }, h("div", { key: '39d4154e12c7f5cf96f04ca3fc3e0f17d0e8b2ec', class: "nylas-customize-booking-settings__settings-div", part: "ncbs__settings-div , ncbs__additional_guests" }, h("checkbox-component", { key: '61f11b632388d036622078f76f2d90370458b152', name: "hide_additional_guests", label: "Allow guests to invite additional guests.", checked: this.allowGuestsToInvite }, h("span", { key: '14573cca344d64ddfddebe6f402321a52fcce6ee', slot: "label", class: "label" }, h("p", { key: '64790dee39a090a778479a7eb3b1efcd14054bb9', class: "label-contents" }, "Allow guests to invite additional guests to the booking."), h("tooltip-component", { key: '564c56d4f159e11bf82b02eaab43b36ef9dd7117', id: "guests" }, h("info-icon", { key: 'a442aac8c9d930dc6be00a07fb6cd32b39cbd24b', slot: "tooltip-icon" }), h("span", { key: '6a9eff50392213a42be00c99f0f78d5e2d8eb0f4', slot: "tooltip-content" }, "Allow guests to invite additional guests to the event. If enabled, the guest will be able to add additional guests' email addresses."))))), h("div", { key: 'e7d58c8c04cd715bd02fd4dcc14073ce1f6aaf08', class: "nylas-customize-booking-settings__settings-div", part: "ncbs__settings-div , ncbs__rescheduling_options" }, h("checkbox-component", { key: '3f5c22d363bb11012b8514f5a33871a3f054fc80', name: "hide_rescheduling_options", label: "Hide 'Reschedule' option on booking page and emails.", checked: this.hideReschedulingOptions }, h("span", { key: '2ed45b907aa847c41da5a0e394b0b5ddb91a3e26', slot: "label", class: "label" }, h("p", { key: 'a1fc109c7211d387426d66ac9129fad25032565b', class: "label-contents" }, "Hide the\u00A0", h("strong", { key: 'ac79eec03a85d1963ac4e75b0fbf678f4a063776' }, "Reschedule"), "\u00A0button on the Scheduling Page and in the email notifications."), h("tooltip-component", { key: 'd8f41e37b915c0be9154a475da07d5ed343d96b4', id: "reschedule" }, h("info-icon", { key: 'fbb3f300f4276bd249f9cf12d11c4b6467c82247', slot: "tooltip-icon" }), h("span", { key: '689b3c36070c26e6d6bac530a56008404354e43b', slot: "tooltip-content" }, "Hide the 'Reschedule' button on the Scheduling page and in the email notifications. If enabled, the guest will not be able to reschedule the booking."))))), h("div", { key: 'f21aeca85fbb63da4d844d37cf87ff1e8d48f001', class: "nylas-customize-booking-settings__settings-div", part: "ncbs__settings-div , ncbs__cancellation_options" }, h("checkbox-component", { key: 'be80ca87a198de83451085fceca77b4d2455357d', name: "hide_cancellation_options", label: "Hide 'Cancel' option on booking page and emails.", checked: this.hideCancellationOptions }, h("span", { key: '80e718e75b94562d3b8c4a3d9f170ee2de0c2c1b', slot: "label", class: "label" }, h("p", { key: 'd46dfe25aa86b112f5c57abe3337de6d88a79c90', class: "label-contents" }, "Hide the\u00A0", h("strong", { key: 'ac243fbb7a3c85c8ab3af28b61ae2724c428ac3e' }, "Cancel"), "\u00A0button on the Scheduling Page and in the email notifications."), h("tooltip-component", { key: 'b720fc3becba6ca2cc71d01bb77c19ec154b1aa1', id: "cancel" }, h("info-icon", { key: '5ab491a0734fe525ad2be3e2ad067cb292cce182', slot: "tooltip-icon" }), h("span", { key: '4621e731c10b515294641be4f9ee60142b46f9c6', slot: "tooltip-content" }, "Hide the 'Cancel' button on the Scheduling page and in the email notifications. If enabled, the guest will not be able to cancel the booking.")))))))));
     }
     static get formAssociated() { return true; }
     get host() { return getElement(this); }

package/dist/nylas-web-elements/nylas-date-picker.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, a as createEvent, h, e as Host } from './index-582cfc93.js';
-import { R as RegisterComponent } from './register-component-6ae95538.js';
-import { h as addDaysToCurrentDate, l as getLastDayOfMonth, m as getFirstDayOfMonth, n as isSameDay, o as convertMinutesToHoursAndMinutes, p as isSameMonth } from './utils-49a1d17b.js';
+import { R as RegisterComponent } from './register-component-aef40ec4.js';
+import { h as addDaysToCurrentDate, l as getLastDayOfMonth, m as getFirstDayOfMonth, n as isSameDay, o as convertMinutesToHoursAndMinutes, p as isSameMonth } from './utils-04c10cbd.js';
 import './buffer-es6-5510d761.js';
 import './_commonjsHelpers-6cbf8316.js';
 

package/dist/nylas-web-elements/nylas-editor-tabs.entry.js

@@ -1,6 +1,6 @@
 import { h, r as registerInstance, a as createEvent, e as Host, i as getElement } from './index-582cfc93.js';
-import { R as RegisterComponent } from './register-component-6ae95538.js';
-import { q as mergeDeep, a as debug, r as parsePreviewLink } from './utils-49a1d17b.js';
+import { R as RegisterComponent } from './register-component-aef40ec4.js';
+import { q as mergeDeep, a as debug, r as parsePreviewLink } from './utils-04c10cbd.js';
 import { D as DEFAULT_OPEN_HOURS } from './constants-b20948c9.js';
 import './buffer-es6-5510d761.js';
 import './_commonjsHelpers-6cbf8316.js';
@@ -43,7 +43,8 @@ function TabContents({ id, formState, activeTab, calendars }) {
                 h("nylas-customize-booking-settings", { name: "customize-booking-settings", exportparts: "ncbs, ncbs__header, ncbs__settings, ncbs__settings-div, ncbs__additional_guests, ncbs__cancellation_options, ncbs__rescheduling_options" })));
         case 'participants':
             return (h("div", { key: id },
-                h("nylas-additional-participants", { name: "participants", eventParticipants: formState.participants, exportparts: "nap__title, nap__subtitle, nap__content, nap__input_group, nap__input_wrapper, nap__input, nap__remove-participant" })));
+                h("nylas-additional-participants", { name: "participants", eventParticipants: formState.participants, exportparts: "nap__title, nap__subtitle, nap__content, nap__input_group, nap__input_wrapper, nap__input, nap__remove-participant" }),
+                h("nylas-participants-custom-availability", { name: "participant-custom-availability", participants: formState.participants, exportparts: "npca, npca__header, npca__content, npca__participant-container, npca__participant-title, npca__participant-toggle--container, npca__toggle-label, npca__toggle-input, npca__toggle-slider" })));
     }
 }
 
@@ -83,8 +84,7 @@ const NylasEditorTabs = class {
             this.isLoading = true;
             this.hasUnsavedChanges = false;
             const formState = this.updateFormState();
-            const { title, description, duration, availability, calendarIds, bookingCalendar, location, bookingType, buffer, availableDaysInFuture, minCancellationNotice, minBookingNotice, cancellationPolicy, timeslotInterval, additionalGuestsHidden, hideCancellationOptions, hideReschedulingOptions, participants, } = formState;
-            const organizer = this.selectedConfiguration?.participants?.find(p => p.is_organizer);
+            const { title, description, duration, availability, calendarIds, bookingCalendar, location, bookingType, buffer, availableDaysInFuture, minCancellationNotice, minBookingNotice, cancellationPolicy, timeslotInterval, additionalGuestsHidden, hideCancellationOptions, hideReschedulingOptions, participants, participantOpenHours, } = formState;
             const durationMinutes = duration ? parseInt(duration) : 30;
             const configObject = {
                 ...(this.selectedConfiguration?.id && { id: this.selectedConfiguration.id }),
@@ -96,24 +96,34 @@ const NylasEditorTabs = class {
                     availability_rules: {
                         availability_method: this.selectedConfiguration?.availability?.availability_rules?.availability_method ?? 'collective',
                         buffer: buffer || { before: 0, after: 0 },
-                        default_open_hours: this.selectedConfiguration?.availability?.availability_rules?.default_open_hours ?? DEFAULT_OPEN_HOURS,
+                        default_open_hours: availability?.openHours ?? this.selectedConfiguration?.availability?.availability_rules?.default_open_hours ?? DEFAULT_OPEN_HOURS,
                         round_robin_group_id: this.selectedConfiguration?.availability?.availability_rules?.round_robin_group_id ?? '',
                     },
                 },
                 participants: [
-                    {
-                        name: organizer?.name ?? organizer?.email ?? this.currentUser?.name ?? this.currentUser?.email ?? '',
-                        email: organizer?.email ?? this.currentUser?.email ?? '',
-                        is_organizer: true,
-                        availability: {
-                            calendar_ids: calendarIds?.length ? calendarIds : ['primary'],
-                            open_hours: availability?.openHours ?? [],
-                        },
-                        booking: {
-                            calendar_id: bookingCalendar && bookingCalendar !== '' ? bookingCalendar : 'primary',
-                        },
-                    },
-                    ...(participants ?? []),
+                    ...(participants?.map(p => {
+                        if (p.is_organizer) {
+                            return {
+                                name: p.name ?? p.email,
+                                email: p.email,
+                                is_organizer: true,
+                                availability: {
+                                    calendar_ids: calendarIds?.length ? calendarIds : ['primary'],
+                                    open_hours: participantOpenHours?.[p.email] ?? p.availability?.open_hours ?? [],
+                                },
+                                booking: {
+                                    calendar_id: bookingCalendar && bookingCalendar !== '' ? bookingCalendar : 'primary',
+                                },
+                            };
+                        }
+                        return {
+                            ...p,
+                            availability: {
+                                calendar_ids: p.availability?.calendar_ids ?? ['primary'],
+                                open_hours: participantOpenHours?.[p.email] ?? p.availability?.open_hours ?? [],
+                            },
+                        };
+                    }) ?? []),
                 ],
                 event_booking: {
                     title: title?.toString() ?? '',
@@ -184,7 +194,8 @@ const NylasEditorTabs = class {
     handleValueChanged(event) {
         debug('[nylas-editor-tabs]', 'handleValueChanged', event);
         const { name, value } = event.detail;
-        this.formState = { ...this.formState, [name]: value };
+        this.setFormState(value, name);
+        this.formState = { ...this.formState };
         this.hasUnsavedChanges = true;
         this.error = '';
     }
@@ -196,7 +207,7 @@ const NylasEditorTabs = class {
             duration: config?.availability?.duration_minutes?.toString() ?? '30',
             availability: {
                 timezone: config?.event_booking?.timezone ?? Intl.DateTimeFormat().resolvedOptions().timeZone,
-                openHours: organizerParticipant?.availability?.open_hours,
+                openHours: config?.availability?.availability_rules?.default_open_hours ?? DEFAULT_OPEN_HOURS,
             },
             calendarIds: organizerParticipant?.availability?.calendar_ids ?? [],
             participants: config?.participants ?? [],
@@ -217,62 +228,69 @@ const NylasEditorTabs = class {
             hideReschedulingOptions: config?.scheduler?.hide_rescheduling_options ?? false,
         };
     }
+    setFormState(value, key) {
+        switch (key) {
+            case 'title':
+                this.formState.title = value.toString();
+                break;
+            case 'description':
+                this.formState.description = value.toString();
+                break;
+            case 'duration':
+                this.formState.duration = value.toString();
+                break;
+            case 'availability':
+                this.formState.availability = JSON.parse(value.toString());
+                break;
+            case 'participants':
+                this.formState.participants = JSON.parse(value.toString());
+                break;
+            case 'calendars':
+                this.formState.calendarIds = value.toString().split(',');
+                break;
+            case 'booking-calendar':
+                this.formState.bookingCalendar = value.toString();
+                break;
+            case 'location':
+                this.formState.location = value.toString();
+                break;
+            case 'booking-type':
+                this.formState.bookingType = value.toString();
+                break;
+            case 'buffer-time':
+                this.formState.buffer = JSON.parse(value.toString());
+                break;
+            case 'limit-future-bookings':
+                this.formState.availableDaysInFuture = parseInt(value.toString());
+                break;
+            case 'min-cancellation-notice':
+                this.formState.minCancellationNotice = parseInt(value.toString());
+                break;
+            case 'min-booking-notice':
+                this.formState.minBookingNotice = parseInt(value.toString());
+                break;
+            case 'cancellation-policy':
+                this.formState.cancellationPolicy = value.toString();
+                break;
+            case 'timeslot-interval':
+                this.formState.timeslotInterval = JSON.parse(value.toString());
+                break;
+            case 'customize-booking-settings':
+                const settings = JSON.parse(value.toString());
+                this.formState.additionalGuestsHidden = settings.additionalGuestsHidden;
+                this.formState.hideCancellationOptions = settings.hideCancellationOptions;
+                this.formState.hideReschedulingOptions = settings.hideReschedulingOptions;
+                break;
+            case 'participant-custom-availability':
+                const participantOpenHours = JSON.parse(value.toString());
+                this.formState.participantOpenHours = participantOpenHours;
+                break;
+        }
+    }
     updateFormState() {
         const formData = new FormData(this.formRef);
         formData.forEach((value, key) => {
-            switch (key) {
-                case 'title':
-                    this.formState.title = value.toString();
-                    break;
-                case 'description':
-                    this.formState.description = value.toString();
-                    break;
-                case 'duration':
-                    this.formState.duration = value.toString();
-                    break;
-                case 'availability':
-                    this.formState.availability = JSON.parse(value.toString());
-                    break;
-                case 'participants':
-                    this.formState.participants = JSON.parse(value.toString());
-                    break;
-                case 'calendars':
-                    this.formState.calendarIds = value.toString().split(',');
-                    break;
-                case 'booking-calendar':
-                    this.formState.bookingCalendar = value.toString();
-                    break;
-                case 'location':
-                    this.formState.location = value.toString();
-                    break;
-                case 'booking-type':
-                    this.formState.bookingType = value.toString();
-                    break;
-                case 'buffer-time':
-                    this.formState.buffer = JSON.parse(value.toString());
-                    break;
-                case 'limit-future-bookings':
-                    this.formState.availableDaysInFuture = parseInt(value.toString());
-                    break;
-                case 'min-cancellation-notice':
-                    this.formState.minCancellationNotice = parseInt(value.toString());
-                    break;
-                case 'min-booking-notice':
-                    this.formState.minBookingNotice = parseInt(value.toString());
-                    break;
-                case 'cancellation-policy':
-                    this.formState.cancellationPolicy = value.toString();
-                    break;
-                case 'timeslot-interval':
-                    this.formState.timeslotInterval = JSON.parse(value.toString());
-                    break;
-                case 'customize-booking-settings':
-                    const settings = JSON.parse(value.toString());
-                    this.formState.additionalGuestsHidden = settings.additionalGuestsHidden;
-                    this.formState.hideCancellationOptions = settings.hideCancellationOptions;
-                    this.formState.hideReschedulingOptions = settings.hideReschedulingOptions;
-                    break;
-            }
+            this.setFormState(value, key);
         });
         this.formState = { ...this.formState };
         return this.formState;
@@ -285,22 +303,22 @@ const NylasEditorTabs = class {
     render() {
         debug('[nylas-editor-tabs]', 'render', this.formState);
         const showParticipantsTab = localStorage.getItem('nylas') === 'Nylas Developer';
-        return (h(Host, { key: 'ed57de888af9f29e6be4562b8d65c9800a6b4ad9' }, h("form", { key: '5f3d154f95b47b78fe3cc83a76df4d7e39330f80', onSubmit: this.formSubmissionHandler, class: "scheduler-editor", ref: el => (this.formRef = el), noValidate: true }, this.mode === 'app' ? (h("div", { class: "form-contents" }, h("div", { class: "tabs" }, h("button", { class: { tab: true, active: this.activeTab == 'eventInfo' }, onClick: e => this.setActiveTab(e, 'eventInfo') }, h("calendar-info-icon", { width: "16", height: "16" }), "Event Info"), h("button", { class: { tab: true, active: this.activeTab == 'availability' }, onClick: e => this.setActiveTab(e, 'availability') }, h("calendar-patterns-icon", { width: "16", height: "16" }), "Availability"), h("button", { class: { tab: true, active: this.activeTab == 'bookingOptions' }, onClick: e => this.setActiveTab(e, 'bookingOptions') }, h("flow-icon", { width: "16", height: "16" }), "Booking Options"), showParticipantsTab && (h("button", { class: { tab: true, active: this.activeTab == 'participants' }, onClick: e => this.setActiveTab(e, 'participants') }, h("people-icon", { width: "16", height: "16" }), "Participants"))), h("div", { class: "tab-content" }, h(TabContents, { formState: this.formState, activeTab: this.activeTab, calendars: this.calendars, id: this.selectedConfiguration?.id ?? 'new' })))) : (h("slot", null)), h("div", { key: 'c2a419fa59d6622e32627e476853ece732ff517c', class: "footer" }, h("div", { key: 'b4eab68c7ee5d35aa1f9a77e0ef1c47d5080252a', class: "preview" }, this.schedulerPreviewLink !== '' && this.action === 'edit' && (h("button-component", { type: "button", disabled: this.isLoading, clickHandler: event => {
+        return (h(Host, { key: 'ccfd780da5c6ce1688f60384796bbaa98fe6094d' }, h("form", { key: '2e5d1c16a5373a5b623869925a7cab71f52f98ce', onSubmit: this.formSubmissionHandler, class: "scheduler-editor", ref: el => (this.formRef = el), noValidate: true }, this.mode === 'app' ? (h("div", { class: "form-contents" }, h("div", { class: "tabs" }, h("button", { class: { tab: true, active: this.activeTab == 'eventInfo' }, onClick: e => this.setActiveTab(e, 'eventInfo') }, h("calendar-info-icon", { width: "16", height: "16" }), "Event Info"), h("button", { class: { tab: true, active: this.activeTab == 'availability' }, onClick: e => this.setActiveTab(e, 'availability') }, h("calendar-patterns-icon", { width: "16", height: "16" }), "Availability"), h("button", { class: { tab: true, active: this.activeTab == 'bookingOptions' }, onClick: e => this.setActiveTab(e, 'bookingOptions') }, h("flow-icon", { width: "16", height: "16" }), "Booking Options"), showParticipantsTab && (h("button", { class: { tab: true, active: this.activeTab == 'participants' }, onClick: e => this.setActiveTab(e, 'participants') }, h("people-icon", { width: "16", height: "16" }), "Participants"))), h("div", { class: "tab-content" }, h(TabContents, { formState: this.formState, activeTab: this.activeTab, calendars: this.calendars, id: this.selectedConfiguration?.id ?? 'new' })))) : (h("slot", null)), h("div", { key: 'f11d2767c5fc65ad7a72f346e9b3940b8151d7a3', class: "footer" }, h("div", { key: '858c5dac4d006f28b05347be3feba2d6dd336b15', class: "preview" }, this.schedulerPreviewLink !== '' && this.action === 'edit' && (h("button-component", { type: "button", disabled: this.isLoading, clickHandler: event => {
                 event.preventDefault();
                 const previewEvent = this.previewButtonClicked.emit(this.host);
                 if (!previewEvent.defaultPrevented) {
                     window.open(parsePreviewLink(this.schedulerPreviewLink, this.selectedConfiguration), '_blank');
                 }
-            }, variant: 'basic' }, "Preview"))), h("div", { key: '0d1be883712a43e918d6a24415309e7fca51ac6b', class: "buttons" }, h("p", { key: 'e84e22ff1f71263e512ec95ee1513c53d4dadc10', class: {
+            }, variant: 'basic' }, "Preview"))), h("div", { key: 'c5225165887e64b467570a3f90222479fb259494', class: "buttons" }, h("p", { key: '50b2861f9c99e3dc91e58f77097fa753ba02cd1b', class: {
                 'unsaved-changes': this.hasUnsavedChanges && !this.changesSaved,
                 'saved-changes': this.changesSaved,
                 'error': this.error !== '',
                 'error-full-width': this.error !== '' && this.action === 'create',
-            } }, this.error !== '' ? this.error : '', this.error == '' && this.hasUnsavedChanges && !this.changesSaved ? 'Unsaved changes' : this.error == '' && this.changesSaved ? 'Changes saved!' : ''), h("button-component", { key: 'dd4e56935a6b20576b5316acb76947375084dfce', type: "button", disabled: this.isLoading, clickHandler: event => {
+            } }, this.error !== '' ? this.error : '', this.error == '' && this.hasUnsavedChanges && !this.changesSaved ? 'Unsaved changes' : this.error == '' && this.changesSaved ? 'Changes saved!' : ''), h("button-component", { key: '9934c2cf6faf7e74b135add1728e3524bc29e13f', type: "button", disabled: this.isLoading, clickHandler: event => {
                 event.preventDefault();
                 this.cancelButtonClick.emit();
                 this.error = '';
-            }, variant: 'basic' }, "Cancel"), h("button-component", { key: '16324ef17540626894bde0f55c1198d45ef0d0ce', type: "submit", disabled: this.isLoading }, this.isLoading ? (h("span", null, "Saving", h("loading-icon", null), ' ')) : this.action == 'create' ? ('Create') : ('Save changes')))))));
+            }, variant: 'basic' }, "Cancel"), h("button-component", { key: '872f1a24204c38948d484b2bf99aa72d78ba7a37', type: "submit", disabled: this.isLoading }, this.isLoading ? (h("span", null, "Saving", h("loading-icon", null), ' ')) : this.action == 'create' ? ('Create') : ('Save changes')))))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {