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

package/dist/esm/google-logo-icon_4.entry.js

@@ -0,0 +1,460 @@
+import { r as registerInstance, h, c as createEvent, H as Host, a as getElement } from './index-7cb0dd3d.js';
+import { R as RegisterComponent } from './register-component-cf5c8420.js';
+import { a as debug, m as parsePreviewLink } from './utils-d6204242.js';
+import { D as DEFAULT_OPEN_HOURS } from './constants-f34b9c6e.js';
+import './_commonjsHelpers-57e89916.js';
+
+const iconCss$1 = ".sc-google-logo-icon-h{display:flex}";
+const GoogleLogoIconStyle0 = iconCss$1;
+
+const GoogleLogoIcon = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.width = '24';
+        this.height = '24';
+    }
+    render() {
+        return (h("svg", { key: '2445589627197f9af06e10891e1772c17b140c0a', width: this.width, height: this.height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: 'b84ea9a0cc741b646d9a63113404d34c5e155fc8', "clip-path": "url(#clip0_959_12452)" }, h("path", { key: '9c774266fb43cf807ea64846b71eb27c6272b17d', d: "M23.745 12.27C23.745 11.48 23.675 10.73 23.555 10H12.255V14.51H18.725C18.435 15.99 17.585 17.24 16.325 18.09V21.09H20.185C22.445 19 23.745 15.92 23.745 12.27Z", fill: "#4285F4" }), h("path", { key: 'ff0fe8133c31fc75ecf3e9fedecbbaef2e35dd54', d: "M12.255 24C15.495 24 18.205 22.92 20.185 21.09L16.325 18.09C15.245 18.81 13.875 19.25 12.255 19.25C9.12504 19.25 6.47505 17.14 5.52505 14.29H1.54504V17.38C3.51504 21.3 7.56504 24 12.255 24Z", fill: "#34A853" }), h("path", { key: '5851b3de9ee71263668f65e2e86f0dfab3039c83', d: "M5.52501 14.2901C5.27501 13.5701 5.145 12.8001 5.145 12.0001C5.145 11.2001 5.28501 10.4301 5.52501 9.71012V6.62012H1.545C0.725004 8.24012 0.255005 10.0601 0.255005 12.0001C0.255005 13.9401 0.725004 15.7601 1.545 17.3801L5.52501 14.2901Z", fill: "#FBBC05" }), h("path", { key: '2a79a335e1b8d03747b5f879a75deb5544e5cf63', d: "M12.255 4.75C14.025 4.75 15.605 5.36 16.855 6.55L20.275 3.13C18.205 1.19 15.495 0 12.255 0C7.56504 0 3.51504 2.7 1.54504 6.62L5.52505 9.71C6.47505 6.86 9.12504 4.75 12.255 4.75Z", fill: "#EA4335" })), h("defs", { key: 'f3b4d8d363cc9ac066b92de2354b9210d7190b46' }, h("clipPath", { key: '270b05e06d87d998c7525254f4f2ae3d5a0ab835', id: "clip0_959_12452" }, h("rect", { key: 'de0df984a8f12ccdd0c655968c4f8b2049996968', width: 24, height: 24, fill: "white" })))));
+    }
+};
+GoogleLogoIcon.style = GoogleLogoIconStyle0;
+
+const iconCss = ".sc-microsoft-logo-icon-h{display:flex}";
+const MicrosoftLogoIconStyle0 = iconCss;
+
+const MicrosoftLogoIcon = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.width = '22';
+        this.height = '22';
+    }
+    render() {
+        return (h("svg", { key: 'de39bfb3167fbd60d21025e74c1bc19cdd7d4dc9', width: this.width, height: this.height, viewBox: "0 0 22 22", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '0f80864e892ff36e6e76ef03f5f36d62007d99ee', d: "M0.043457 0.043457H10.4782V10.4782H0.043457V0.043457Z", fill: "#F35325" }), h("path", { key: 'ab0e85f803a3cf2e32055ebeff1b0705edebe048', d: "M11.5217 0.043457H21.9565V10.4782H11.5217V0.043457Z", fill: "#81BC06" }), h("path", { key: 'b6359dcb76ade260f2a9e9bdf1be21ba84b77b79', d: "M0.043457 11.5217H10.4782V21.9565H0.043457V11.5217Z", fill: "#05A6F0" }), h("path", { key: 'cf38a555c09aaef94a15fd26b0951e2642eaad6d', d: "M11.5217 11.5217H21.9565V21.9565H11.5217V11.5217Z", fill: "#FFBA08" })));
+    }
+};
+MicrosoftLogoIcon.style = MicrosoftLogoIconStyle0;
+
+function TabContents({ id, formState, activeTab, calendars }) {
+    switch (activeTab) {
+        case 'eventInfo':
+            const eventTitle = formState.title;
+            const eventDescription = formState.description;
+            const eventDuration = parseInt(formState.duration);
+            const location = formState.location;
+            return (h("div", { key: id },
+                h("nylas-event-info", null,
+                    h("div", { slot: "inputs" },
+                        h("nylas-event-title", { name: "title", eventTitle: eventTitle, exportparts: "net, net__title, net__dropdown-content" }),
+                        h("nylas-event-duration", { name: "duration", eventDurationMinutes: eventDuration, exportparts: "ned, ned__input, ned__dropdown, ned__dropdown-button, ned__dropdown-content" }),
+                        h("nylas-location-component", { name: "location", eventLocation: location, exportparts: "nel, nel__location, nel__dropdown, nel__dropdown-button, nel__dropdown-content" }),
+                        h("nylas-event-description", { name: "description", eventDescription: eventDescription, exportparts: "nedesc, nedesc__textarea" })))));
+        case 'availability':
+            const openHours = formState.availability.openHours;
+            const timezone = formState.availability.timezone ? formState.availability.timezone : Intl.DateTimeFormat().resolvedOptions().timeZone;
+            const organizer = formState.participants?.find(p => p.is_organizer);
+            const organizerEmail = organizer?.email ?? 'primary';
+            const selectedCalendars = formState.calendarIds.length > 0 ? formState.calendarIds : [organizerEmail];
+            const bookingCalendar = formState.bookingCalendar == 'primary' ? organizerEmail : formState.bookingCalendar;
+            return (h("div", { key: id },
+                h("nylas-booking-calendar-picker", { name: "booking-calendar", calendars: calendars ?? [], defaultBookingCalendar: bookingCalendar, exportparts: 'nbcp, nbcp__header, nbcp__input-label, nbcp__dropdown, nbcp__dropdown-button, nbcp__dropdown-content' }),
+                h("nylas-calendar-picker", { name: "calendars", calendars: calendars ?? [], defaultSelectedCalendars: selectedCalendars, exportparts: 'ncp ncp__header, ncp__dropdown, ncp__dropdown-button, ncp__dropdown-content' }),
+                h("nylas-availability-picker", { name: "availability", openHours: openHours, defaultTimezone: timezone, exportparts: 'nap__header, nap__select-timezone, nap__select-timezone-button, nap__select-timezone-dropdown-content, nap__availability, nap__day, nap__time-ranges, nap__time-range, nap__add-time-range, nap__time-picker-container, nap__time-picker-input, nap__time-picker-times' })));
+        case 'bookingOptions':
+            return (h("div", { key: id },
+                h("nylas-buffer-time", { name: "buffer-time", buffer: formState.buffer, exportparts: 'nbt, nbt__header, nbt__body, nbt__dropdown-before, nbt__dropdown-button-before, nbt__dropdown-content-before, nbt__dropdown-after, nbt__dropdown-button-after, nbt__dropdown-content-after, nbt__preview' }),
+                h("nylas-custom-booking-flow", { name: "booking-type", bookingType: formState.bookingType, exportparts: 'ncbf, ncbf__header, ncbf__dropdown, ncbf__dropdown-button, ncbf__dropdown-content' }),
+                h("nylas-event-limits", null,
+                    h("div", { slot: "inputs" },
+                        h("nylas-limit-future-bookings", { name: "limit-future-bookings", availableDaysInFuture: formState.availableDaysInFuture, exportparts: "nlfb, nlfb__number-dropdown, nlfb__number-dropdown-button, nlfb__number-dropdown-content, nlfb__period-dropdown, nlfb__period-dropdown-button, nlfb__period-dropdown-content" }),
+                        h("nylas-min-cancellation-notice", { name: "min-cancellation-notice", minCancellationNotice: formState.minCancellationNotice, exportparts: "nmcn, nmcn__number-dropdown, nmcn__number-dropdown-button, nmcn__number-dropdown-content, nmcn__period-dropdown, nmcn__period-dropdown-button, nmcn__period-dropdown-content" })))));
+    }
+}
+
+const nylasEditorTabsCss = ".sc-nylas-editor-tabs-h{display:block;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif}.scheduler-editor.sc-nylas-editor-tabs{display:flex;flex-direction:column}.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs{display:grid;grid-template-columns:minmax(224px, 25%) 1fr}@media screen and (max-width: 768px){.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs{display:table-column-group}}.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs .tabs.sc-nylas-editor-tabs{display:flex;flex-direction:column;border-right:1px solid var(--nylas-base-200);background-color:var(--nylas-base-25)}.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs .tabs.sc-nylas-editor-tabs .tab.sc-nylas-editor-tabs{display:flex;align-items:center;gap:0.5rem;padding:0.5rem 1rem;color:var(--nylas-base-900);background:var(--nylas-base-0);border:none;height:56px;font-family:var(--nylas-font-family);font-size:16px;font-weight:500;line-height:24px;cursor:pointer}.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs .tabs.sc-nylas-editor-tabs .tab.sc-nylas-editor-tabs:not(:first-of-type){margin-top:0.25rem}.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs .tabs.sc-nylas-editor-tabs .tab.active.sc-nylas-editor-tabs{font-weight:600;background:var(--nylas-base-0);color:var(--nylas-primary);border-left:4px solid var(--nylas-primary);box-shadow:0px 1px 2px 0px rgba(0, 0, 0, 0.0588235294);box-shadow:0px 1px 3px 0px rgba(0, 0, 0, 0.1019607843)}.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs .tab-content.sc-nylas-editor-tabs{max-width:692px}.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs .tab-content.sc-nylas-editor-tabs nylas-event-info.sc-nylas-editor-tabs div[slot=inputs].sc-nylas-editor-tabs,.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs .tab-content.sc-nylas-editor-tabs nylas-event-limits.sc-nylas-editor-tabs div[slot=inputs].sc-nylas-editor-tabs{display:flex;flex-direction:column;gap:1rem}.footer.sc-nylas-editor-tabs{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:80px;padding:0 1rem;border-top:1px solid var(--nylas-base-200)}@media screen and (max-width: 768px){.footer.sc-nylas-editor-tabs{flex-direction:column;height:auto}}@media screen and (max-width: 768px){.footer.sc-nylas-editor-tabs .preview.sc-nylas-editor-tabs{margin-top:1rem;width:100%}}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs{display:flex;justify-content:flex-end;align-items:center;justify-self:flex-end;gap:1rem}@media screen and (max-width: 768px){.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs{flex-direction:column-reverse;width:100%}}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs p.sc-nylas-editor-tabs{max-width:524px}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs p.unsaved-changes.sc-nylas-editor-tabs{color:var(--nylas-base-600)}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs p.saved-changes.sc-nylas-editor-tabs{color:var(--nylas-success)}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs p.error.sc-nylas-editor-tabs{color:var(--nylas-error)}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs p.error-full-width.sc-nylas-editor-tabs{max-width:660px}@media screen and (max-width: 768px){.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs button-component.sc-nylas-editor-tabs{width:100%}}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs button.sc-nylas-editor-tabs{background:var(--nylas-primary);color:var(--nylas-base-0);height:48px;border:none;border-radius:var(--nylas-border-radius-2x);font-size:1rem;line-height:24px;padding:0 1rem;cursor:pointer;width:148px}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs button.sc-nylas-editor-tabs:hover{background:var(--nylas-base-600)}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs button.sc-nylas-editor-tabs:active{background:var(--nylas-base-800)}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs button.sc-nylas-editor-tabs:disabled{background:var(--nylas-base-300);cursor:not-allowed}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs button.sc-nylas-editor-tabs span.sc-nylas-editor-tabs{display:flex;align-items:center;justify-content:center;gap:0.5rem}";
+const NylasEditorTabsStyle0 = nylasEditorTabsCss;
+
+var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata$1 = (undefined && undefined.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+        return Reflect.metadata(k, v);
+};
+const NylasEditorTabs = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.schedulerConfigChanged = createEvent(this, "schedulerConfigChanged", 7);
+        this.cancelButtonClick = createEvent(this, "cancelButtonClick", 7);
+        this.formSubmitted = createEvent(this, "formSubmitted", 7);
+        this.previewButtonClicked = createEvent(this, "previewButtonClicked", 7);
+        this.setError = (error) => {
+            this.error = error.message;
+        };
+        this.formSubmissionHandler = async (event) => {
+            event.preventDefault();
+            this.formSubmitted.emit();
+            const valid = this.formRef.checkValidity();
+            if (!valid) {
+                return;
+            }
+            this.isLoading = true;
+            this.hasUnsavedChanges = false;
+            const formState = this.updateFormState();
+            const { title, description, duration, availability, calendarIds, bookingCalendar, location, bookingType, buffer, availableDaysInFuture, minCancellationNotice } = formState;
+            const organizer = this.selectedConfiguration?.participants?.find(p => p.is_organizer);
+            const configObject = {
+                ...this.selectedConfiguration,
+                version: this.selectedConfiguration?.version ?? '1.0.0',
+                availability: {
+                    duration_minutes: duration ? parseInt(duration) : 0,
+                    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,
+                        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',
+                        },
+                    },
+                ],
+                event_booking: {
+                    title: title?.toString() ?? '',
+                    description: description?.toString() ?? '',
+                    location: location?.toString() ?? '',
+                    booking_type: bookingType?.toString() ?? 'booking',
+                    timezone: availability?.timezone ?? Intl.DateTimeFormat().resolvedOptions().timeZone,
+                },
+                scheduler: {
+                    available_days_in_future: availableDaysInFuture ?? 30,
+                    min_cancellation_notice: minCancellationNotice ?? 0,
+                },
+            };
+            const resetLoadingState = (_e) => {
+                this.isLoading = false;
+                this.changesSaved = true;
+                setTimeout(() => {
+                    this.changesSaved = false;
+                }, 5000);
+            };
+            this.schedulerConfigChanged.emit({ config: configObject, resetLoadingState, setError: this.setError, action: this.action });
+        };
+        this.calendars = undefined;
+        this.selectedConfiguration = undefined;
+        this.currentUser = undefined;
+        this.schedulerPreviewLink = '';
+        this.action = 'create';
+        this.mode = 'app';
+        this.activeTab = 'eventInfo';
+        this.isLoading = false;
+        this.hasUnsavedChanges = false;
+        this.changesSaved = false;
+        this.formState = {};
+        this.error = '';
+    }
+    configChangedHandler(newConfig) {
+        debug('[nylas-editor-tabs]', 'configChangedHandler', newConfig, this.selectedConfiguration);
+        this.formState = {
+            ...this.getFormStateFromConfig(newConfig),
+        };
+        if (newConfig.id) {
+            this.action = 'edit';
+        }
+        else {
+            this.action = 'create';
+        }
+    }
+    connectedCallback() {
+        debug('[nylas-editor-tabs]', 'connectedCallback');
+    }
+    componentWillLoad() {
+        debug('[nylas-editor-tabs]', 'componentWillLoad');
+        this.formState = this.getFormStateFromConfig(this.selectedConfiguration);
+    }
+    componentDidLoad() {
+        debug('[nylas-editor-tabs]', 'componentDidLoad');
+    }
+    disconnectedCallback() {
+        debug('[nylas-editor-tabs]', 'disconnectedCallback');
+    }
+    handleValueChanged(event) {
+        debug('[nylas-editor-tabs]', 'handleValueChanged', event);
+        const { name, value } = event.detail;
+        this.formState = { ...this.formState, [name]: value };
+        this.hasUnsavedChanges = true;
+        this.error = '';
+    }
+    getFormStateFromConfig(config) {
+        const organizerParticipant = config?.participants?.find(p => p.is_organizer);
+        return {
+            title: config?.event_booking?.title ?? '',
+            description: config?.event_booking?.description ?? '',
+            duration: config?.availability?.duration_minutes?.toString() ?? '10',
+            availability: {
+                timezone: config?.event_booking?.timezone ?? Intl.DateTimeFormat().resolvedOptions().timeZone,
+                open_hours: organizerParticipant?.availability?.open_hours ?? undefined,
+            },
+            calendarIds: organizerParticipant?.availability?.calendar_ids ?? [],
+            participants: config?.participants ?? [],
+            bookingCalendar: organizerParticipant?.booking?.calendar_id ?? organizerParticipant?.email ?? '',
+            location: this.selectedConfiguration?.event_booking?.location ?? '',
+            bookingType: this.selectedConfiguration?.event_booking?.booking_type ?? 'booking',
+            buffer: this.selectedConfiguration?.availability?.availability_rules?.buffer ?? { before: 0, after: 0 },
+            availableDaysInFuture: this.selectedConfiguration?.scheduler?.available_days_in_future ?? 30,
+            minCancellationNotice: this.selectedConfiguration?.scheduler?.min_cancellation_notice ?? 0,
+        };
+    }
+    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;
+            }
+        });
+        this.formState = { ...this.formState };
+        return this.formState;
+    }
+    setActiveTab(e, tabName) {
+        e.preventDefault();
+        this.updateFormState();
+        this.activeTab = tabName;
+    }
+    render() {
+        debug('[nylas-editor-tabs]', 'render', this.formState);
+        return (h(Host, { key: 'c1e6e9d2cfe242e407a909281063767a0985245e' }, h("form", { key: '4baaac0129e8a357b78980636bd32b3818ec0820', 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")), 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: '38bdcdd7283d98ea54c7594a52cc16b85b3b776a', class: "footer" }, h("div", { key: '5543e3f7eb2fa9f2f3bbe6053fde7d0ea13c3bc0', 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: '62470cdbc7c4670e6ff03e9979ca803f81482b15', class: "buttons" }, h("p", { key: '5ecdfa1082650aab2f8fef8ed7beeb11fedb381c', 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: '1bb3af5cc04c49e311267fb43ac326267acdaa1d', type: "button", disabled: this.isLoading, clickHandler: event => {
+                event.preventDefault();
+                this.cancelButtonClick.emit();
+                this.error = '';
+            }, variant: 'basic' }, "Cancel"), h("button-component", { key: '28c9725c69104d1849b2ab3068b61a269370f016', 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 {
+        "selectedConfiguration": ["configChangedHandler"]
+    }; }
+};
+__decorate$1([
+    RegisterComponent({
+        name: 'nylas-editor-tabs',
+        stateToProps: new Map([
+            ['schedulerConfig.calendars', 'calendars'],
+            ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],
+            ['schedulerConfig.currentUser', 'currentUser'],
+        ]),
+        eventToProps: {
+            schedulerConfigChanged: async (event, nylasSchedulerConfigConnector) => {
+                const { resetLoadingState, setError, action, config } = event.detail;
+                const checkForErrors = (response) => {
+                    const [data, error] = response;
+                    if (!data && error && setError) {
+                        setError(error);
+                    }
+                    if (resetLoadingState) {
+                        resetLoadingState(event);
+                    }
+                };
+                if (action === 'edit') {
+                    const response = await nylasSchedulerConfigConnector.schedulerConfig.updateConfiguration(config);
+                    checkForErrors(response);
+                }
+                else {
+                    const response = await nylasSchedulerConfigConnector.schedulerConfig.createConfiguration(config);
+                    checkForErrors(response);
+                }
+            },
+            cancelButtonClick: async (_, nylasSchedulerConfigConnector) => {
+                nylasSchedulerConfigConnector.schedulerConfigStore.state.action = null;
+            },
+        },
+        localPropsToProp: new Map([['schedulerPreviewLink', 'schedulerPreviewLink']]),
+        fireRegisterEvent: true,
+    }),
+    __metadata$1("design:type", Function),
+    __metadata$1("design:paramtypes", []),
+    __metadata$1("design:returntype", void 0)
+], NylasEditorTabs.prototype, "render", null);
+NylasEditorTabs.style = NylasEditorTabsStyle0;
+
+const nylasListConfigurationsCss = ":host{display:grid;grid-auto-flow:row;width:100%;font-family:inherit;font-optical-sizing:auto;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif}.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem;gap:1rem}@media screen and (max-width: 768px){.header{flex-direction:column}}.header h2{margin:0;font-size:1.25rem;color:var(--nylas-base-900);font-weight:600}.header p{margin:0;font-size:1rem;color:var(--nylas-base-700)}.header .actions{justify-self:end}@media screen and (max-width: 768px){.header .actions{width:100%}}.configurations{border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x);overflow-x:auto}.configurations table{width:100%;border-spacing:0;border-collapse:collapse;font-family:inherit}.configurations table tr{color:var(--nylas-base-800);border-bottom:1px solid var(--nylas-base-200);font-family:inherit}.configurations table tr:last-of-type{border-bottom:0}.configurations table tr.hide{display:none}.configurations table th{font-weight:600;text-transform:uppercase}.configurations table tr.no-configurations td>div{display:flex;height:100%;justify-content:center;align-items:center;flex-direction:column;padding:var(--nylas-border-radius-3x)}.configurations table tr.no-configurations td>div h3{margin:0 0 1rem 0;color:var(--nylas-base-700)}.configurations table tr.no-configurations td>div p{margin:0 0 1rem 0;color:var(--nylas-base-600)}.configurations table tr.no-configurations td>div calendar-icon{margin-bottom:1rem;color:var(--nylas-base-200)}.configurations table th,.configurations table td{text-align:left;padding:1rem;font-family:inherit}.configurations table .actions{text-align:right}.configurations table .actions{display:flex;justify-content:flex-end;gap:1rem}.configurations table .title{display:flex;flex-direction:column}.configurations table .title .config-event-title{font-weight:600}.configurations table .title .config-event-description{font-size:0.75rem}.error-container{margin-top:1.5rem}.error-container .error{color:var(--nylas-error);padding:0.5rem 0;margin:1rem 0 0}";
+const NylasListConfigurationsStyle0 = nylasListConfigurationsCss;
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (undefined && undefined.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+        return Reflect.metadata(k, v);
+};
+const NylasListConfigurations = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.initListConfigurations = createEvent(this, "initListConfigurations", 7);
+        this.createButtonClick = createEvent(this, "createButtonClick", 7);
+        this.editButtonClick = createEvent(this, "editButtonClick", 7);
+        this.deleteButtonClick = createEvent(this, "deleteButtonClick", 7);
+        this.configurations = [];
+        this.schedulerPreviewLink = '';
+        this.state = 'loading';
+        this.error = '';
+    }
+    connectedCallback() {
+        debug('[nylas-list-configurations]', 'connectedCallback');
+    }
+    componentWillLoad() {
+        debug('[nylas-list-configurations]', 'componentWillLoad');
+        if (this.configurations && this.configurations.length > 0) {
+            this.state = 'loaded';
+        }
+    }
+    componentDidLoad() {
+        debug('[nylas-list-configurations]', 'componentDidLoad');
+        this.initListConfigurations.emit(this.host);
+    }
+    disconnectedCallback() {
+        debug('[nylas-list-configurations]', 'disconnectedCallback');
+    }
+    async getState() {
+        return this.state;
+    }
+    async setState(state) {
+        this.state = state;
+    }
+    async setError(error) {
+        this.error = error;
+    }
+    render() {
+        return (h(Host, null, h("div", { class: "header" }, h("div", { class: "description" }, h("h2", null, "All scheduling pages"), h("p", null, "Create, edit and manage all your scheduling pages.")), this.configurations && this.configurations.length > 0 && (h("div", { class: "actions" }, h("button-component", { clickHandler: () => {
+                this.createButtonClick.emit(this.host);
+            } }, "Create new")))), h("div", { class: "configurations" }, h("table", null, h("tr", { class: {
+                hide: this.state === 'loading' || (this.configurations && this.configurations.length === 0),
+            } }, h("th", null, "Scheduling page event title"), h("th", null, "Duration"), h("th", { class: "actions" }, "Actions")), this.state === 'loading' && (h("tr", { class: "no-configurations" }, h("td", { colSpan: 3 }, h("div", null, h("h3", null, "Loading..."), h("p", null, "Please wait while we fetch the scheduling pages"))))), this.state !== 'loading' && (!this.configurations || this.configurations.length === 0) && (h("tr", { class: "no-configurations" }, h("td", { colSpan: 3 }, h("div", null, h("calendar-icon", { width: "48", height: "48" }), h("h3", null, "No scheduling pages found"), h("p", null, "Get started with creating your first scheduling page"), h("button-component", { clickHandler: () => {
+                this.createButtonClick.emit(this.host);
+            } }, "Create new"))))), this.state !== 'loading' &&
+            this.configurations.map(config => (h("tr", { key: config.id }, h("td", null, h("div", { class: "title" }, h("span", { class: 'config-event-title' }, config.event_booking.title), h("span", { class: 'config-event-description' }, config.event_booking.description))), h("td", null, h("div", null, config.availability.duration_minutes, " mins")), h("td", null, h("div", { class: "actions" }, h("button-component", { variant: 'basic', clickHandler: event => {
+                    event.preventDefault();
+                    window.open(parsePreviewLink(this.schedulerPreviewLink, config), '_blank');
+                } }, "Preview"), h("button-component", { variant: 'basic', clickHandler: event => {
+                    event.preventDefault();
+                    this.editButtonClick.emit({ host: this.host, configuration: config });
+                } }, "Edit"), h("button-component", { variant: 'basic', clickHandler: event => {
+                    event.preventDefault();
+                    this.deleteButtonClick.emit({ host: this.host, configuration: config });
+                } }, "Delete")))))))), h("div", { class: "error-container" }, h("p", { class: 'error' }, this.state === 'error' && this.error))));
+    }
+    get host() { return getElement(this); }
+};
+__decorate([
+    RegisterComponent({
+        name: 'nylas-list-configurations',
+        stateToProps: new Map([['schedulerConfig.configurations', 'configurations']]),
+        localPropsToProp: new Map([['schedulerPreviewLink', 'schedulerPreviewLink']]),
+        eventToProps: {
+            initListConfigurations: async (event, connector) => {
+                const host = event.detail;
+                await host.setState('loading');
+                const [data, error] = await connector.schedulerConfig.getConfigurations();
+                if (!data && error && error.message) {
+                    await host.setState('error');
+                    await host.setError(error.message);
+                    return;
+                }
+                await host.setState('loaded');
+            },
+            createButtonClick: async (_, connector) => {
+                connector.schedulerConfigStore.resetSelectedConfiguration();
+                connector.schedulerConfigStore.state.action = 'create';
+            },
+            deleteButtonClick: async (event, connector) => {
+                const { host, configuration } = event.detail;
+                const [data, error] = await connector.schedulerConfig.deleteConfiguration(configuration.id);
+                if (!data && error && error.message) {
+                    await host.setState('error');
+                    await host.setError(error.message);
+                }
+            },
+            editButtonClick: async (event, connector) => {
+                const { configuration } = event.detail;
+                connector.schedulerConfigStore.state.selectedConfiguration = configuration;
+                connector.schedulerConfigStore.state.action = 'edit';
+            },
+        },
+        fireRegisterEvent: true,
+    }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], NylasListConfigurations.prototype, "render", null);
+NylasListConfigurations.style = NylasListConfigurationsStyle0;
+
+export { GoogleLogoIcon as google_logo_icon, MicrosoftLogoIcon as microsoft_logo_icon, NylasEditorTabs as nylas_editor_tabs, NylasListConfigurations as nylas_list_configurations };
+
+//# sourceMappingURL=google-logo-icon_4.entry.js.map