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

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

@@ -19,7 +19,7 @@ const GoogleLogoIcon = class {
         this.height = '24';
     }
     render() {
-        return (index.h("svg", { key: '48ccae649f280d48621dfb214a08b980155680a1', width: this.width, height: this.height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("g", { key: '10196951caa0fa0b94b57c57a62d8bcb31d92d91', "clip-path": "url(#clip0_959_12452)" }, index.h("path", { key: '0d2358cd1dcbd7f9ef2dfa17a5075a341210a43c', 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" }), index.h("path", { key: '8540c5619b64996b6b158fe50609aa378dfd468f', 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" }), index.h("path", { key: 'b683a33b6068de0793ef4426e6404d438dbdf73e', 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" }), index.h("path", { key: '916d663bbb04c8267e595adf9125068232414ed7', 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" })), index.h("defs", { key: 'a941f8ccb1711f648dc3e2db750496a2491b4b55' }, index.h("clipPath", { key: 'caef3b6e814ed957bcee43a794130dce6760702d', id: "clip0_959_12452" }, index.h("rect", { key: 'df7c24b60402fd2e9d248f4e5ccfbaa640d549ae', width: 24, height: 24, fill: "white" })))));
+        return (index.h("svg", { key: '2b6d66fd099e97716cdb808f575b5aadf1503a06', width: this.width, height: this.height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("g", { key: '2d02d3ca40389d13f189bddba578ae683c487d3e', "clip-path": "url(#clip0_959_12452)" }, index.h("path", { key: '41eeee9cdd77323ffee094ce688e222c2ae95461', 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" }), index.h("path", { key: '7a8f1123dc6b8b29324eb255637f7b536982e112', 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" }), index.h("path", { key: 'e71780d270c31b20d6617deb912a0b74b3dc8004', 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" }), index.h("path", { key: '4e8795414ed616287f7e315d9d4ae7882832c56c', 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" })), index.h("defs", { key: '9ad522ed57a9d8c75d8515e0e0a1e64d1dcde3a0' }, index.h("clipPath", { key: 'da8c3ef1116cd32e06a73e30c5c4bc335f209d5b', id: "clip0_959_12452" }, index.h("rect", { key: '8936b3346ec26a6c0901073adca44b8021661be6', width: 24, height: 24, fill: "white" })))));
     }
 };
 GoogleLogoIcon.style = GoogleLogoIconStyle0;
@@ -34,7 +34,7 @@ const MicrosoftLogoIcon = class {
         this.height = '22';
     }
     render() {
-        return (index.h("svg", { key: '4aa3482048f90ecbcb46d539716464bdf2c20e47', width: this.width, height: this.height, viewBox: "0 0 22 22", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '27924938927bdc57e665d91623f07684aea3a6ee', d: "M0.043457 0.043457H10.4782V10.4782H0.043457V0.043457Z", fill: "#F35325" }), index.h("path", { key: '91decf0bfe7ef26f93ea724fa9738d1ffa1ae4a6', d: "M11.5217 0.043457H21.9565V10.4782H11.5217V0.043457Z", fill: "#81BC06" }), index.h("path", { key: '0f455cec58fd99a755157ab9ca950242a634d541', d: "M0.043457 11.5217H10.4782V21.9565H0.043457V11.5217Z", fill: "#05A6F0" }), index.h("path", { key: '80c930047e54c708d5f7cde3d88f33f2a0d0dbd5', d: "M11.5217 11.5217H21.9565V21.9565H11.5217V11.5217Z", fill: "#FFBA08" })));
+        return (index.h("svg", { key: 'deae127512c4d2b6ef876ab1311fb6ab4d5cd368', width: this.width, height: this.height, viewBox: "0 0 22 22", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'ea58fbe3dac4c5a6455acec95fe9677068999d53', d: "M0.043457 0.043457H10.4782V10.4782H0.043457V0.043457Z", fill: "#F35325" }), index.h("path", { key: 'e8a2faf14e8a7cdf15808a1fac1b16fba79f6051', d: "M11.5217 0.043457H21.9565V10.4782H11.5217V0.043457Z", fill: "#81BC06" }), index.h("path", { key: '56644908156e19d4ba9eedfec54a9ffa9b9744bd', d: "M0.043457 11.5217H10.4782V21.9565H0.043457V11.5217Z", fill: "#05A6F0" }), index.h("path", { key: '24c76e1b54ed1cdbc97ec6e56888db403169d74f', d: "M11.5217 11.5217H21.9565V21.9565H11.5217V11.5217Z", fill: "#FFBA08" })));
     }
 };
 MicrosoftLogoIcon.style = MicrosoftLogoIconStyle0;
@@ -75,6 +75,10 @@ function TabContents({ id, formState, activeTab, calendars }) {
                         index.h("nylas-cancellation-policy", { name: "cancellation-policy", cancellationPolicy: formState.cancellationPolicy, exportparts: "ncpolicy, ncpolicy__textarea" }))),
                 index.h("nylas-timeslot-interval", { name: "timeslot-interval", eventDurationMinutes: parseInt(formState.duration), exportparts: "nti, nti__header, nti__input-label, nti__dropdown, nti__dropdown-button, nti__dropdown-content" }),
                 index.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 (index.h("div", { key: id },
+                index.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" }),
+                index.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" })));
     }
 }
 
@@ -115,8 +119,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, } = 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 }),
@@ -128,23 +131,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 ?? constants.DEFAULT_OPEN_HOURS,
+                        default_open_hours: availability?.openHours ?? this.selectedConfiguration?.availability?.availability_rules?.default_open_hours ?? constants.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?.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() ?? '',
@@ -158,7 +172,7 @@ const NylasEditorTabs = class {
                     available_days_in_future: availableDaysInFuture ?? 30,
                     min_cancellation_notice: minCancellationNotice ?? 0,
                     min_booking_notice: minBookingNotice ?? 60,
-                    additional_guests_hidden: additionalGuestsHidden ?? false,
+                    hide_additional_guests: additionalGuestsHidden ?? false,
                     hide_cancellation_options: hideCancellationOptions ?? false,
                     hide_rescheduling_options: hideReschedulingOptions ?? false,
                 },
@@ -215,7 +229,8 @@ const NylasEditorTabs = class {
     handleValueChanged(event) {
         utils.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 = '';
     }
@@ -227,7 +242,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 ?? constants.DEFAULT_OPEN_HOURS,
             },
             calendarIds: organizerParticipant?.availability?.calendar_ids ?? [],
             participants: config?.participants ?? [],
@@ -243,67 +258,74 @@ const NylasEditorTabs = class {
                 interval: config?.availability?.interval_minutes ?? config?.availability?.duration_minutes ?? 10,
                 roundTo: config?.availability?.round_to,
             },
-            additionalGuestsHidden: config?.scheduler?.additional_guests_hidden ?? false,
+            additionalGuestsHidden: config?.scheduler?.hide_additional_guests ?? false,
             hideCancellationOptions: config?.scheduler?.hide_cancellation_options ?? false,
             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;
@@ -315,22 +337,23 @@ const NylasEditorTabs = class {
     }
     render() {
         utils.debug('[nylas-editor-tabs]', 'render', this.formState);
-        return (index.h(index.Host, { key: 'de54edb776a03cca0c170f3e1d5f6201cd520172' }, index.h("form", { key: '013ba8fa3d09938c1cdb686884a035967e5dd5c5', onSubmit: this.formSubmissionHandler, class: "scheduler-editor", ref: el => (this.formRef = el), noValidate: true }, this.mode === 'app' ? (index.h("div", { class: "form-contents" }, index.h("div", { class: "tabs" }, index.h("button", { class: { tab: true, active: this.activeTab == 'eventInfo' }, onClick: e => this.setActiveTab(e, 'eventInfo') }, index.h("calendar-info-icon", { width: "16", height: "16" }), "Event Info"), index.h("button", { class: { tab: true, active: this.activeTab == 'availability' }, onClick: e => this.setActiveTab(e, 'availability') }, index.h("calendar-patterns-icon", { width: "16", height: "16" }), "Availability"), index.h("button", { class: { tab: true, active: this.activeTab == 'bookingOptions' }, onClick: e => this.setActiveTab(e, 'bookingOptions') }, index.h("flow-icon", { width: "16", height: "16" }), "Booking Options")), index.h("div", { class: "tab-content" }, index.h(TabContents, { formState: this.formState, activeTab: this.activeTab, calendars: this.calendars, id: this.selectedConfiguration?.id ?? 'new' })))) : (index.h("slot", null)), index.h("div", { key: 'd16cd84ad1d7fc69b700519851da428a2f15bdd3', class: "footer" }, index.h("div", { key: '91ac1d799dd53725041d6e12577e7186f8ddad95', class: "preview" }, this.schedulerPreviewLink !== '' && this.action === 'edit' && (index.h("button-component", { type: "button", disabled: this.isLoading, clickHandler: event => {
+        const showParticipantsTab = localStorage.getItem('nylas') === 'Nylas Developer';
+        return (index.h(index.Host, { key: 'ccfd780da5c6ce1688f60384796bbaa98fe6094d' }, index.h("form", { key: '2e5d1c16a5373a5b623869925a7cab71f52f98ce', onSubmit: this.formSubmissionHandler, class: "scheduler-editor", ref: el => (this.formRef = el), noValidate: true }, this.mode === 'app' ? (index.h("div", { class: "form-contents" }, index.h("div", { class: "tabs" }, index.h("button", { class: { tab: true, active: this.activeTab == 'eventInfo' }, onClick: e => this.setActiveTab(e, 'eventInfo') }, index.h("calendar-info-icon", { width: "16", height: "16" }), "Event Info"), index.h("button", { class: { tab: true, active: this.activeTab == 'availability' }, onClick: e => this.setActiveTab(e, 'availability') }, index.h("calendar-patterns-icon", { width: "16", height: "16" }), "Availability"), index.h("button", { class: { tab: true, active: this.activeTab == 'bookingOptions' }, onClick: e => this.setActiveTab(e, 'bookingOptions') }, index.h("flow-icon", { width: "16", height: "16" }), "Booking Options"), showParticipantsTab && (index.h("button", { class: { tab: true, active: this.activeTab == 'participants' }, onClick: e => this.setActiveTab(e, 'participants') }, index.h("people-icon", { width: "16", height: "16" }), "Participants"))), index.h("div", { class: "tab-content" }, index.h(TabContents, { formState: this.formState, activeTab: this.activeTab, calendars: this.calendars, id: this.selectedConfiguration?.id ?? 'new' })))) : (index.h("slot", null)), index.h("div", { key: 'f11d2767c5fc65ad7a72f346e9b3940b8151d7a3', class: "footer" }, index.h("div", { key: '858c5dac4d006f28b05347be3feba2d6dd336b15', class: "preview" }, this.schedulerPreviewLink !== '' && this.action === 'edit' && (index.h("button-component", { type: "button", disabled: this.isLoading, clickHandler: event => {
                 event.preventDefault();
                 const previewEvent = this.previewButtonClicked.emit(this.host);
                 if (!previewEvent.defaultPrevented) {
                     window.open(utils.parsePreviewLink(this.schedulerPreviewLink, this.selectedConfiguration), '_blank');
                 }
-            }, variant: 'basic' }, "Preview"))), index.h("div", { key: '975c3e7ebf2a11ac457785d4824d7b174a24e643', class: "buttons" }, index.h("p", { key: '6311d2d31ab503238a5ff98131423167aa794733', class: {
+            }, variant: 'basic' }, "Preview"))), index.h("div", { key: 'c5225165887e64b467570a3f90222479fb259494', class: "buttons" }, index.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!' : ''), index.h("button-component", { key: '83e0a53f373b0fe78c80bcbce98b631fd105001d', 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!' : ''), index.h("button-component", { key: '9934c2cf6faf7e74b135add1728e3524bc29e13f', type: "button", disabled: this.isLoading, clickHandler: event => {
                 event.preventDefault();
                 this.cancelButtonClick.emit();
                 this.error = '';
-            }, variant: 'basic' }, "Cancel"), index.h("button-component", { key: '35c347a3e9bd1f9b54d3919e9d09135fa1ad5c70', type: "submit", disabled: this.isLoading }, this.isLoading ? (index.h("span", null, "Saving", index.h("loading-icon", null), ' ')) : this.action == 'create' ? ('Create') : ('Save changes')))))));
+            }, variant: 'basic' }, "Cancel"), index.h("button-component", { key: '872f1a24204c38948d484b2bf99aa72d78ba7a37', type: "submit", disabled: this.isLoading }, this.isLoading ? (index.h("span", null, "Saving", index.h("loading-icon", null), ' ')) : this.action == 'create' ? ('Create') : ('Save changes')))))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {