npm - @nylas/web-elements - Versions diffs - 1.1.0-canary.19.c → 1.1.0-canary.19.e - Mend

@nylas/web-elements 1.1.0-canary.19.c → 1.1.0-canary.19.e

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

Files changed (876) hide show

package/dist/components/nylas-event-location2.js CHANGED Viewed

@@ -2,13 +2,17 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { R as RegisterComponent } from './register-component.js';
 import { a as debug } from './utils.js';
 import { s as sanitizeHtml } from './index3.js';
-import { d as defineCustomElement$7 } from './chevron.js';
-import { d as defineCustomElement$6 } from './info.js';
-import { d as defineCustomElement$5 } from './location.js';
-import { d as defineCustomElement$4 } from './location-off.js';
-import { d as defineCustomElement$3 } from './search.js';
-import { d as defineCustomElement$2 } from './select-dropdown2.js';
-import { d as defineCustomElement$1 } from './toolitp-component.js';
+import { P as PROVIDER_CONFERENCE_MAP, C as CONFERENCE_PROVIDER_MAP } from './constants.js';
+import { d as defineCustomElement$a } from './chevron.js';
+import { d as defineCustomElement$9 } from './google-meet.js';
+import { d as defineCustomElement$8 } from './info.js';
+import { d as defineCustomElement$7 } from './location.js';
+import { d as defineCustomElement$6 } from './location-off.js';
+import { d as defineCustomElement$5 } from './microsof-teams.js';
+import { d as defineCustomElement$4 } from './search.js';
+import { d as defineCustomElement$3 } from './select-dropdown2.js';
+import { d as defineCustomElement$2 } from './toolitp-component.js';
+import { d as defineCustomElement$1 } from './zoom.js';
 const nylasEventLocationCss = ":host{--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}.nylas-event-location{display:flex;flex-direction:column;gap:4px;font-family:var(--nylas-font-family)}.nylas-event-location label{display:flex;align-items:center;color:var(--nylas-base-800);font-size:16px;font-style:normal;font-weight:400;line-height:150%;}.nylas-event-location label span.label-icon{margin-left:4px}.nylas-event-location label span.label-icon tooltip-component{display:flex}.nylas-event-location span[slot=select-icon]{border-right:1px solid var(--nylas-base-200);padding:16px 0.75rem 16px 0.5rem;border-radius:var(--nylas-border-radius-2x);border-bottom-right-radius:0;border-top-right-radius:0;height:20px}.nylas-event-location div.location-input{display:grid;grid-template-columns:auto 1fr;width:100%;gap:0.5rem}@media screen and (max-width: 768px){.nylas-event-location div.location-input{grid-template-columns:1fr}}.nylas-event-location div.location-input input{border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x);padding:12px 16px;font-family:var(--nylas-font-family);font-size:16px;line-height:24px}.nylas-event-location select-dropdown{width:208px}@media screen and (max-width: 768px){.nylas-event-location select-dropdown{width:100%}}.nylas-event-location select-dropdown::part(sd_dropdown){width:100%}.nylas-event-location select-dropdown::part(sd_dropdown-content){left:calc(35px + 0.5rem)}.nylas-event-location select-dropdown::part(sd_dropdown-button){display:flex;justify-content:space-between;width:100%;border:1px solid var(--nylas-base-200);padding:0 0.5rem}.nylas-event-location select-dropdown::part(sd_dropdown-button-selected-label){display:inline-flex;align-self:center;padding:14px 0;font-family:var(--nylas-font-family);font-size:16px;line-height:24px}";
 const NylasEventLocationStyle0 = nylasEventLocationCss;
@@ -35,10 +39,14 @@ const NylasEventLocation = proxyCustomElement(class NylasEventLocation extends H
         this.valueChanged = createEvent(this, "valueChanged", 7);
         this.internals = this.attachInternals();
         this.name = 'location';
+        this.userProvider = undefined;
+        this.eventConferencing = undefined;
+        this.conferenceProviders = undefined;
         this.selectedConfiguration = undefined;
         this.eventLocation = undefined;
         this.location = this.eventLocation ?? '';
-        this.selectedLocationOption = this.eventLocation ? 'custom' : 'none';
+        this.grantId = this.setDefaultGrantID();
+        this.selectedLocationOption = this.setDefaultLocationOption();
     }
     elementNameChangedHandler(newValue) {
         debug('nylas-event-location', 'elementNameChangedHandler', newValue);
@@ -47,9 +55,17 @@ const NylasEventLocation = proxyCustomElement(class NylasEventLocation extends H
     selectedConfigurationChangedHandler(newValue, oldValue) {
         debug('nylas-custom-booking-flow', 'selectedConfigurationChangedHandler', newValue, oldValue);
         const configLocation = newValue?.event_booking?.location;
+        const configConferencing = newValue?.event_booking?.conferencing;
+        if (configConferencing) {
+            this.selectedLocationOption = this.setDefaultLocationOption();
+            this.grantId = this.setDefaultGrantID();
+            this.location = configLocation ?? '';
+            return;
+        }
         if (configLocation) {
             this.selectedLocationOption = configLocation ? 'custom' : 'none';
             this.location = configLocation;
+            return;
         }
     }
     eventLocationChangedHandler(newValue, oldValue) {
@@ -57,7 +73,6 @@ const NylasEventLocation = proxyCustomElement(class NylasEventLocation extends H
         if (newValue === oldValue) {
             return;
         }
-        this.selectedLocationOption = newValue ? 'custom' : 'none';
     }
     connectedCallback() {
         debug('nylas-event-location', 'connectedCallback');
@@ -74,11 +89,75 @@ const NylasEventLocation = proxyCustomElement(class NylasEventLocation extends H
     }
     nylasFormDropdownChangedHandler(event) {
         this.selectedLocationOption = event.detail.value;
-        if (this.selectedLocationOption === 'none') {
-            this.location = '';
-            this.setFormValue('', 'location');
-            this.valueChanged.emit({ value: '', name: this.name });
+        let payload;
+        switch (this.selectedLocationOption) {
+            case 'none':
+                this.location = '';
+                this.setFormValue('', this.name);
+                this.valueChanged.emit({ value: '', name: this.name });
+                this.valueChanged.emit({ value: JSON.stringify({}), name: 'conference' });
+                break;
+            case 'custom':
+                this.valueChanged.emit({ value: JSON.stringify({}), name: 'conference' });
+                break;
+            case 'google':
+                this.location = '';
+                this.setFormValue('', this.name);
+                const googleConfGrantId = this.conferenceProviders?.['google'];
+                payload = {
+                    provider: PROVIDER_CONFERENCE_MAP.google,
+                    autocreate: googleConfGrantId
+                        ? {
+                            conf_grant_id: googleConfGrantId,
+                        }
+                        : {},
+                };
+                this.valueChanged.emit({ value: JSON.stringify(payload), name: 'conference' });
+                this.valueChanged.emit({ value: '', name: this.name });
+                break;
+            case 'microsoft':
+                this.location = '';
+                this.setFormValue('', this.name);
+                const microsoftConfGrantId = this.conferenceProviders?.['microsoft'];
+                payload = {
+                    provider: PROVIDER_CONFERENCE_MAP.microsoft,
+                    autocreate: microsoftConfGrantId
+                        ? {
+                            conf_grant_id: microsoftConfGrantId,
+                        }
+                        : {},
+                };
+                this.valueChanged.emit({ value: JSON.stringify(payload), name: 'conference' });
+                this.valueChanged.emit({ value: '', name: this.name });
+                break;
+            case 'zoom':
+                this.location = '';
+                this.setFormValue('', this.name);
+                const zoomConfGrantId = this.conferenceProviders?.['zoom'];
+                payload = {
+                    provider: PROVIDER_CONFERENCE_MAP.zoom,
+                    autocreate: zoomConfGrantId
+                        ? {
+                            conf_grant_id: zoomConfGrantId,
+                        }
+                        : {},
+                };
+                this.valueChanged.emit({ value: JSON.stringify(payload), name: 'conference' });
+                this.valueChanged.emit({ value: '', name: this.name });
+                break;
+        }
+    }
+    setDefaultLocationOption() {
+        if (this.eventConferencing != null && this.eventConferencing.provider != null && this.eventConferencing.autocreate != null) {
+            return CONFERENCE_PROVIDER_MAP[this.eventConferencing.provider];
+        }
+        return this.eventLocation ? 'custom' : 'none';
+    }
+    setDefaultGrantID() {
+        if (this.eventConferencing != null && this.eventConferencing.autocreate != null) {
+            return this.eventConferencing.autocreate.conf_grant_id;
         }
+        return '';
     }
     setFormValue(value, name) {
         if (typeof this.internals.setFormValue === 'function') {
@@ -88,19 +167,31 @@ const NylasEventLocation = proxyCustomElement(class NylasEventLocation extends H
     handleChange(event) {
         const value = sanitizeHtml(event.target.value);
         this.location = value;
-        this.setFormValue(value, 'location');
+        this.setFormValue(value, this.name);
         this.valueChanged.emit({ value: value, name: this.name });
     }
     render() {
         const locationOptions = [
             { value: 'none', label: 'None' },
             { value: 'custom', label: 'Custom location' },
+            { value: 'zoom', label: 'Zoom Meeting' },
         ];
+        switch (this.userProvider) {
+            case 'google':
+                locationOptions.push({ value: 'google', label: 'Google Meet' });
+                break;
+            case 'microsoft':
+                locationOptions.push({ value: 'microsoft', label: 'Microsoft Teams' });
+                break;
+        }
         const icons = {
-            none: h("location-off-icon", { key: 'b83e4c1ee5292f3261fca8489ec10a6ded3378dc' }),
-            custom: h("location-icon", { key: '6ba8c483b7e242b0accf8a55ccb11efc8b4e19a5' }),
+            none: h("location-off-icon", { key: '0bf1a447f95e05ceadbaf0902faa2d920e1b4e79' }),
+            custom: h("location-icon", { key: 'f7440a1b12d48fb270ea9de5a8671059108facd8' }),
+            google: h("google-meet-icon", { key: '199a25e487a48b7207179412a7147f289f8d0def' }),
+            microsoft: h("microsoft-teams-icon", { key: 'b47c34ee073727a0310d1200731233b941e512b8' }),
+            zoom: h("zoom-icon", { key: '3615491a2aa416e41e641c8139aeeb705ca15913' }),
         };
-        return (h(Host, { key: 'f65e817196207fa0397fb599bc89a8cb72b7e8e1' }, h("div", { key: '7410dde44d2b93d0aa655feb0c9dede3b14f3f1e', class: "nylas-event-location", part: "nel" }, h("label", { key: '4d158faf262e76e325e1dc35792bc36800a3df6f', htmlFor: "location" }, "Location type", h("span", { key: '28b4287f14b80b9a1db726470bf27dd017b3ba37', class: "label-icon" }, h("tooltip-component", { key: '65a2db2bdf57377beb1b5b4801a89f5a74320205' }, h("info-icon", { key: '350b0f6f2c7f442cc4fb3fdee838c600d271d667', slot: "tooltip-icon" }), h("span", { key: '31027673d5cd518b6cbc847c0010f482b0540de6', slot: "tooltip-content" }, "Choose how you\u2019ll meet with the participants at the scheduled time. Pick from available conferencing options or add a custom location.")))), h("div", { key: 'a902e62a97f181dcb6b0e0e4daea1ec4c817fe58', class: "location-input" }, h("select-dropdown", { key: '5f271d86549b8fa286b630f169e191d4c1d73e3d', withSearch: false, name: "location", options: locationOptions, defaultSelectedOption: locationOptions.find(i => i.value == this.selectedLocationOption), exportparts: "sd_dropdown: nel__dropdown, sd_dropdown-button: nel__dropdown-button, sd_dropdown-content: nel__dropdown-content" }, h("span", { key: 'cdc3f3fcdf971ffe3495f085b39cac2a1e77df11', slot: "select-icon" }, icons[this.selectedLocationOption])), this.selectedLocationOption === 'custom' && (h("input", { type: "text", part: "nel__location", id: "location", name: "location", maxlength: "1024", value: this.location, onInput: e => this.handleChange(e) }))))));
+        return (h(Host, { key: '1fb50aa4c2fcec7873167251e6a7840493790ddb' }, h("div", { key: '433dd3321b4c28f6a7a5d4b8350091aa347f7801', class: "nylas-event-location", part: "nel" }, h("label", { key: '6e401ce5dfb5670c243d41e907ec8a49b591a69d', htmlFor: "location" }, "Location type", h("span", { key: '1aef726641f0175721c03612c410a0b005c5c3fc', class: "label-icon" }, h("tooltip-component", { key: '51ff81cf52c017a10ffbdbe101e22c5640a319d8' }, h("info-icon", { key: 'd1e3ec173514e054995616cba51ed0d4bd48d85d', slot: "tooltip-icon" }), h("span", { key: '4715fb361cfc795f506f2b90b7a0f3dd213e8e4f', slot: "tooltip-content" }, "Choose how you\u2019ll meet with the participants at the scheduled time. Pick from available conferencing options or add a custom location.")))), h("div", { key: '86de8f7fee6c267a9c36116e7430fa2857f46788', class: "location-input" }, h("select-dropdown", { key: 'b01d435951f89cf02f41b6294025ca82635c8a50', withSearch: false, name: "location", options: locationOptions.reverse(), defaultSelectedOption: locationOptions.find(i => i.value == this.selectedLocationOption), exportparts: "sd_dropdown: nel__dropdown, sd_dropdown-button: nel__dropdown-button, sd_dropdown-content: nel__dropdown-content" }, h("span", { key: '3b386ef7d0609684f9b00da1ce5641b32d0bab9b', slot: "select-icon" }, icons[this.selectedLocationOption])), this.selectedLocationOption === 'custom' && (h("input", { type: "text", part: "nel__location", id: "location", name: "location", maxlength: "1024", value: this.location, onInput: e => this.handleChange(e) }))))));
     }
     static get formAssociated() { return true; }
     get host() { return this; }
@@ -112,9 +203,13 @@ const NylasEventLocation = proxyCustomElement(class NylasEventLocation extends H
     static get style() { return NylasEventLocationStyle0; }
 }, [65, "nylas-event-location", {
         "name": [1],
+        "userProvider": [1, "user-provider"],
+        "eventConferencing": [16],
+        "conferenceProviders": [16],
         "selectedConfiguration": [16],
         "eventLocation": [1, "event-location"],
         "location": [32],
+        "grantId": [32],
         "selectedLocationOption": [32]
     }, [[0, "nylasFormDropdownChanged", "nylasFormDropdownChangedHandler"]], {
         "name": ["elementNameChangedHandler"],
@@ -124,7 +219,10 @@ const NylasEventLocation = proxyCustomElement(class NylasEventLocation extends H
 __decorate([
     RegisterComponent({
         name: 'nylas-event-location',
-        stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),
+        stateToProps: new Map([
+            ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],
+            ['schedulerConfig.conferenceProviders', 'conferenceProviders'],
+        ]),
         eventToProps: {},
         fireRegisterEvent: true,
     }),
@@ -136,7 +234,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["nylas-event-location", "chevron-icon", "info-icon", "location-icon", "location-off-icon", "search-icon", "select-dropdown", "tooltip-component"];
+    const components = ["nylas-event-location", "chevron-icon", "google-meet-icon", "info-icon", "location-icon", "location-off-icon", "microsoft-teams-icon", "search-icon", "select-dropdown", "tooltip-component", "zoom-icon"];
     components.forEach(tagName => { switch (tagName) {
         case "nylas-event-location":
             if (!customElements.get(tagName)) {
@@ -145,35 +243,50 @@ function defineCustomElement() {
             break;
         case "chevron-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$a();
+            }
+            break;
+        case "google-meet-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
             }
             break;
         case "info-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$8();
             }
             break;
         case "location-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$7();
             }
             break;
         case "location-off-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                defineCustomElement$6();
+            }
+            break;
+        case "microsoft-teams-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
             }
             break;
         case "search-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$3();
+                defineCustomElement$4();
             }
             break;
         case "select-dropdown":
             if (!customElements.get(tagName)) {
-                defineCustomElement$2();
+                defineCustomElement$3();
             }
             break;
         case "tooltip-component":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "zoom-icon":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }

package/dist/components/nylas-event-location2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nylas-event-location2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-event-location/nylas-event-location.scss?tag=nylas-event-location&encapsulation=shadow","src/components/scheduler-editor/nylas-event-location/nylas-event-location.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n @include default-css-variables;\n}\n\n.nylas-event-location {\n display: flex;\n flex-direction: column;\n gap: 4px;\n font-family: var(--nylas-font-family);\n\n label {\n display: flex;\n align-items: center;\n color: var(--nylas-base-800);\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 150%; /* 21px /\n span.label-icon {\n margin-left: 4px;\n tooltip-component {\n display: flex;\n }\n }\n }\n\n span[slot='select-icon'] {\n border-right: 1px solid var(--nylas-base-200);\n padding: 16px 0.75rem 16px 0.5rem;\n border-radius: var(--nylas-border-radius-2x);\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n height: 20px;\n }\n div.location-input {\n display: grid;\n grid-template-columns: auto 1fr;\n width: 100%;\n gap: 0.5rem;\n @media #{$mobile} {\n grid-template-columns: 1fr;\n }\n input {\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n padding: 12px 16px;\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\n }\n }\n select-dropdown {\n width: 208px;\n @media #{$mobile} {\n width: 100%;\n }\n }\n select-dropdown::part(sd_dropdown) {\n width: 100%;\n }\n select-dropdown::part(sd_dropdown-content) {\n left: calc(35px + 0.5rem);\n }\n select-dropdown::part(sd_dropdown-button) {\n display: flex;\n justify-content: space-between;\n width: 100%;\n border: 1px solid var(--nylas-base-200);\n padding: 0 0.5rem;\n }\n select-dropdown::part(sd_dropdown-button-selected-label) {\n display: inline-flex;\n align-self: center;\n padding: 14px 0;\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\n }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, State, h, Element, Prop, Watch, Event, EventEmitter, Listen } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration } from '@nylas/core';\nimport sanitizeHtml from 'sanitize-html';\n\n/\n The `nylas-event-location` component is a form input for the location of an event.\n \n @part nel - The event location container\n * @part nel__location - The event location input\n * @part nel__dropdown - The dropdown container\n * @part nel__dropdown-button - The dropdown button\n * @part nel__dropdown-content - The dropdown content\n /\n@Component({\n tag: 'nylas-event-location',\n styleUrl: 'nylas-event-location.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasEventLocation {\n /\n * The host element <nylas-event-location>\n /\n @Element() host!: HTMLElement;\n /\n The name of the event location input.\n /\n @Prop() name: string = 'location';\n /\n The selected config\n /\n @Prop() selectedConfiguration?: Configuration;\n\n /\n The event location stored in the configuration\n /\n @Prop() eventLocation?: string;\n /\n The selected event location state. This defaults to the event location from the configuration or an empty string.\n /\n @State() location: string = this.eventLocation ?? '';\n /\n The selected location option. This defaults to 'none'.\n /\n @State() selectedLocationOption: string = this.eventLocation ? 'custom' : 'none';\n /\n The element internals.\n /\n @AttachInternals() internals!: ElementInternals;\n\n /\n When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n * Since this component is form-associated, the name attribute is required for form submission.\n * This is a workaround to ensure that the name attribute is set on the host element.\n /\n @Watch('name')\n elementNameChangedHandler(newValue: string) {\n debug('nylas-event-location', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('selectedConfiguration')\n selectedConfigurationChangedHandler(newValue: Configuration, oldValue: Configuration) {\n debug('nylas-custom-booking-flow', 'selectedConfigurationChangedHandler', newValue, oldValue);\n const configLocation = newValue?.event_booking?.location;\n if (configLocation) {\n this.selectedLocationOption = configLocation ? 'custom' : 'none';\n this.location = configLocation;\n }\n }\n\n @Watch('eventLocation')\n eventLocationChangedHandler(newValue: string, oldValue: string) {\n debug('nylas-event-location', 'eventLocationChangedHandler', newValue);\n if (newValue === oldValue) {\n return;\n }\n this.selectedLocationOption = newValue ? 'custom' : 'none';\n }\n\n /\n This event is fired when the value of the event location changes.\n */\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n connectedCallback() {\n debug('nylas-event-location', 'connectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-event-location', 'componentWillLoad');\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-event-location', 'componentDidLoad');\n }\n\n disconnectedCallback() {\n debug('nylas-event-location', 'disconnectedCallback');\n }\n\n @Listen('nylasFormDropdownChanged')\n nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string }>) {\n this.selectedLocationOption = event.detail.value;\n if (this.selectedLocationOption === 'none') {\n this.location = '';\n this.setFormValue('', 'location');\n this.valueChanged.emit({ value: '', name: this.name });\n }\n }\n\n setFormValue(value: string, name: string) {\n if (typeof this.internals.setFormValue === 'function') {\n this.internals.setFormValue(value, name);\n }\n }\n\n handleChange(event) {\n const value = sanitizeHtml(event.target.value);\n this.location = value;\n this.setFormValue(value, 'location');\n this.valueChanged.emit({ value: value, name: this.name });\n }\n\n @RegisterComponent<NylasEventLocation, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-event-location',\n stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n eventToProps: {},\n fireRegisterEvent: true,\n })\n render() {\n const locationOptions = [\n { value: 'none', label: 'None' },\n { value: 'custom', label: 'Custom location' },\n ];\n const icons = {\n none: <location-off-icon />,\n custom: <location-icon />,\n };\n\n return (\n <Host>\n <div class=\"nylas-event-location\" part=\"nel\">\n <label htmlFor=\"location\">\n Location type\n <span class=\"label-icon\">\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">\n Choose how you’ll meet with the participants at the scheduled time. Pick from available conferencing options or add a custom location.\n </span>\n </tooltip-component>\n </span>\n </label>\n <div class=\"location-input\">\n <select-dropdown\n withSearch={false}\n name=\"location\"\n options={locationOptions}\n defaultSelectedOption={locationOptions.find(i => i.value == this.selectedLocationOption)}\n exportparts=\"sd_dropdown: nel__dropdown, sd_dropdown-button: nel__dropdown-button, sd_dropdown-content: nel__dropdown-content\"\n >\n <span slot=\"select-icon\">{icons[this.selectedLocationOption]}</span>\n </select-dropdown>\n {this.selectedLocationOption === 'custom' && (\n <input type=\"text\" part=\"nel__location\" id=\"location\" name=\"location\" maxlength=\"1024\" value={this.location} onInput={e => this.handleChange(e)} />\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nylas-event-location2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-event-location/nylas-event-location.scss?tag=nylas-event-location&encapsulation=shadow","src/components/scheduler-editor/nylas-event-location/nylas-event-location.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n @include default-css-variables;\n}\n\n.nylas-event-location {\n display: flex;\n flex-direction: column;\n gap: 4px;\n font-family: var(--nylas-font-family);\n\n label {\n display: flex;\n align-items: center;\n color: var(--nylas-base-800);\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 150%; /* 21px /\n span.label-icon {\n margin-left: 4px;\n tooltip-component {\n display: flex;\n }\n }\n }\n\n span[slot='select-icon'] {\n border-right: 1px solid var(--nylas-base-200);\n padding: 16px 0.75rem 16px 0.5rem;\n border-radius: var(--nylas-border-radius-2x);\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n height: 20px;\n }\n div.location-input {\n display: grid;\n grid-template-columns: auto 1fr;\n width: 100%;\n gap: 0.5rem;\n @media #{$mobile} {\n grid-template-columns: 1fr;\n }\n input {\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n padding: 12px 16px;\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\n }\n }\n select-dropdown {\n width: 208px;\n @media #{$mobile} {\n width: 100%;\n }\n }\n select-dropdown::part(sd_dropdown) {\n width: 100%;\n }\n select-dropdown::part(sd_dropdown-content) {\n left: calc(35px + 0.5rem);\n }\n select-dropdown::part(sd_dropdown-button) {\n display: flex;\n justify-content: space-between;\n width: 100%;\n border: 1px solid var(--nylas-base-200);\n padding: 0 0.5rem;\n }\n select-dropdown::part(sd_dropdown-button-selected-label) {\n display: inline-flex;\n align-self: center;\n padding: 14px 0;\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\n }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, State, h, Element, Prop, Watch, Event, EventEmitter, Listen } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Conference, Configuration } from '@nylas/core';\nimport sanitizeHtml from 'sanitize-html';\nimport { CONFERENCE_PROVIDER_MAP, PROVIDER_CONFERENCE_MAP } from '@/common/constants';\n\n/\n The `nylas-event-location` component is a form input for the location of an event.\n \n @part nel - The event location container\n * @part nel__location - The event location input\n * @part nel__dropdown - The dropdown container\n * @part nel__dropdown-button - The dropdown button\n * @part nel__dropdown-content - The dropdown content\n /\n@Component({\n tag: 'nylas-event-location',\n styleUrl: 'nylas-event-location.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasEventLocation {\n /\n * The host element <nylas-event-location>\n /\n @Element() host!: HTMLElement;\n /\n The name of the event location input.\n /\n @Prop() name: string = 'location';\n /\n The users provider\n /\n @Prop() userProvider?: string;\n /\n The event conferencing stored in the configuration\n /\n @Prop() eventConferencing?: Conference;\n /\n The conference providers where the key is the provider name ('zoom') and the value is the grant id.\n * We currently support same provider ('google', 'microsoft') for all participants and 'zoom' for cross-provider conferencing.\n /\n @Prop() conferenceProviders?: Record<string, string>;\n\n /\n The selected config\n /\n @Prop() selectedConfiguration?: Configuration;\n\n /\n The event location stored in the configuration\n /\n @Prop() eventLocation?: string;\n /\n The selected event location state. This defaults to the event location from the configuration or an empty string.\n /\n @State() location: string = this.eventLocation ?? '';\n /\n The grant id for the conferencing of non-default conferencing options.\n /\n @State() grantId: string = this.setDefaultGrantID();\n /\n The selected location option. This defaults to 'none'.\n /\n @State() selectedLocationOption: string = this.setDefaultLocationOption();\n /\n The element internals.\n /\n @AttachInternals() internals!: ElementInternals;\n\n /\n When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n * Since this component is form-associated, the name attribute is required for form submission.\n * This is a workaround to ensure that the name attribute is set on the host element.\n /\n @Watch('name')\n elementNameChangedHandler(newValue: string) {\n debug('nylas-event-location', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('selectedConfiguration')\n selectedConfigurationChangedHandler(newValue: Configuration, oldValue: Configuration) {\n debug('nylas-custom-booking-flow', 'selectedConfigurationChangedHandler', newValue, oldValue);\n const configLocation = newValue?.event_booking?.location;\n const configConferencing = newValue?.event_booking?.conferencing;\n if (configConferencing) {\n this.selectedLocationOption = this.setDefaultLocationOption();\n this.grantId = this.setDefaultGrantID();\n this.location = configLocation ?? '';\n return;\n }\n if (configLocation) {\n this.selectedLocationOption = configLocation ? 'custom' : 'none';\n this.location = configLocation;\n return;\n }\n }\n\n @Watch('eventLocation')\n eventLocationChangedHandler(newValue: string, oldValue: string) {\n debug('nylas-event-location', 'eventLocationChangedHandler', newValue);\n if (newValue === oldValue) {\n return;\n }\n // this.selectedLocationOption = newValue ? 'custom' : 'none';\n }\n\n /\n This event is fired when the value of the event location changes.\n */\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n connectedCallback() {\n debug('nylas-event-location', 'connectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-event-location', 'componentWillLoad');\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-event-location', 'componentDidLoad');\n }\n\n disconnectedCallback() {\n debug('nylas-event-location', 'disconnectedCallback');\n }\n\n @Listen('nylasFormDropdownChanged')\n nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string }>) {\n this.selectedLocationOption = event.detail.value;\n let payload;\n switch (this.selectedLocationOption) {\n case 'none':\n this.location = '';\n this.setFormValue('', this.name);\n this.valueChanged.emit({ value: '', name: this.name });\n this.valueChanged.emit({ value: JSON.stringify({}), name: 'conference' });\n break;\n case 'custom':\n this.valueChanged.emit({ value: JSON.stringify({}), name: 'conference' });\n break;\n case 'google':\n this.location = '';\n this.setFormValue('', this.name);\n const googleConfGrantId = this.conferenceProviders?.['google'];\n payload = {\n provider: PROVIDER_CONFERENCE_MAP.google,\n autocreate: googleConfGrantId\n ? {\n conf_grant_id: googleConfGrantId,\n }\n : {},\n };\n this.valueChanged.emit({ value: JSON.stringify(payload), name: 'conference' });\n this.valueChanged.emit({ value: '', name: this.name });\n break;\n case 'microsoft':\n this.location = '';\n this.setFormValue('', this.name);\n const microsoftConfGrantId = this.conferenceProviders?.['microsoft'];\n payload = {\n provider: PROVIDER_CONFERENCE_MAP.microsoft,\n autocreate: microsoftConfGrantId\n ? {\n conf_grant_id: microsoftConfGrantId,\n }\n : {},\n };\n this.valueChanged.emit({ value: JSON.stringify(payload), name: 'conference' });\n this.valueChanged.emit({ value: '', name: this.name });\n break;\n case 'zoom':\n this.location = '';\n this.setFormValue('', this.name);\n const zoomConfGrantId = this.conferenceProviders?.['zoom'];\n payload = {\n provider: PROVIDER_CONFERENCE_MAP.zoom,\n autocreate: zoomConfGrantId\n ? {\n conf_grant_id: zoomConfGrantId,\n }\n : {},\n };\n this.valueChanged.emit({ value: JSON.stringify(payload), name: 'conference' });\n this.valueChanged.emit({ value: '', name: this.name });\n break;\n }\n }\n\n setDefaultLocationOption() {\n if (this.eventConferencing != null && this.eventConferencing.provider != null && this.eventConferencing.autocreate != null) {\n return CONFERENCE_PROVIDER_MAP[this.eventConferencing.provider];\n }\n return this.eventLocation ? 'custom' : 'none';\n }\n setDefaultGrantID() {\n if (this.eventConferencing != null && this.eventConferencing.autocreate != null) {\n return this.eventConferencing.autocreate.conf_grant_id;\n }\n return '';\n }\n\n setFormValue(value: string, name: string) {\n if (typeof this.internals.setFormValue === 'function') {\n this.internals.setFormValue(value, name);\n }\n }\n\n handleChange(event) {\n const value = sanitizeHtml(event.target.value);\n this.location = value;\n this.setFormValue(value, this.name);\n this.valueChanged.emit({ value: value, name: this.name });\n }\n\n @RegisterComponent<NylasEventLocation, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-event-location',\n stateToProps: new Map([\n ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],\n ['schedulerConfig.conferenceProviders', 'conferenceProviders'],\n ]),\n eventToProps: {},\n fireRegisterEvent: true,\n })\n render() {\n const locationOptions = [\n { value: 'none', label: 'None' },\n { value: 'custom', label: 'Custom location' },\n { value: 'zoom', label: 'Zoom Meeting' },\n ];\n switch (this.userProvider) {\n case 'google':\n locationOptions.push({ value: 'google', label: 'Google Meet' });\n break;\n case 'microsoft':\n locationOptions.push({ value: 'microsoft', label: 'Microsoft Teams' });\n break;\n }\n\n const icons = {\n none: <location-off-icon />,\n custom: <location-icon />,\n google: <google-meet-icon />,\n microsoft: <microsoft-teams-icon />,\n zoom: <zoom-icon />,\n };\n\n return (\n <Host>\n <div class=\"nylas-event-location\" part=\"nel\">\n <label htmlFor=\"location\">\n Location type\n <span class=\"label-icon\">\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">\n Choose how you’ll meet with the participants at the scheduled time. Pick from available conferencing options or add a custom location.\n </span>\n </tooltip-component>\n </span>\n </label>\n <div class=\"location-input\">\n <select-dropdown\n withSearch={false}\n name=\"location\"\n options={locationOptions.reverse()}\n defaultSelectedOption={locationOptions.find(i => i.value == this.selectedLocationOption)}\n exportparts=\"sd_dropdown: nel__dropdown, sd_dropdown-button: nel__dropdown-button, sd_dropdown-content: nel__dropdown-content\"\n >\n <span slot=\"select-icon\">{icons[this.selectedLocationOption]}</span>\n </select-dropdown>\n {this.selectedLocationOption === 'custom' && (\n <input type=\"text\" part=\"nel__location\" id=\"location\" name=\"location\" maxlength=\"1024\" value={this.location} onInput={e => this.handleChange(e)} />\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/nylas-event-title2.js CHANGED Viewed

@@ -318,7 +318,7 @@ const NylasEventTitle = proxyCustomElement(class NylasEventTitle extends HTMLEle
         return (h(Host, { key: 'ec414f2f4c738230078bed7b7c5477ba5fdbcb70' }, h("div", { key: '17f665e5f307c1b6510891e76daa765449958c3e', class: "nylas-event-title", part: "net" }, h("label", { key: 'e4beac83e857bab219ec4276238f7953645c4711', htmlFor: "title" }, "Event title", h("span", { key: '3033d6ef407f2a3df94dc1f80be2f5e3c378abd0', class: "required" }, "*"), h("span", { key: '29dba11e88726329513ef15078eba34f103914de', class: "label-icon" }, h("tooltip-component", { key: '29a373fc979f15eb3527b9e5a446bd7518ee4562' }, h("info-icon", { key: '12f9a0190185b96a2090cdb0ca7a43f6342cc016', slot: "tooltip-icon" }), h("span", { key: 'dd6e505591f9cded5bc70a812e448b44f1faa4e1', slot: "tooltip-content" }, "Enter a title for your event.")))), h("div", { key: '87807255004e909850b93d600b636d2d2e1d8ed1', class: {
                 title: true,
                 error: this.validationError !== '',
-            }, part: "net__title", ref: el => (this.titleRef = el), contentEditable: "true", onInput: e => this.handleChange(e), onKeyDown: event => this.handleInputKeyDown(event) }), this.showTokens && this.filteredTokens?.length > 0 && (h("div", { class: "token-options", part: "net__dropdown-content" }, h("ul", { tabindex: "-1", role: "listbox", "aria-label": this.name, "aria-activedescendant": this.ariaActivedescendant }, this.filteredTokens.map(option => (h("li", { tabindex: "0", key: option.label, id: option.label, class: { active: this.ariaActivedescendant === option.label }, onClick: e => this.selectOption(e, option), role: "option" }, this.getLabelHTML(option.labelHTML))))))), h("span", { key: '3ba87900ffbc4b69c5f9fac01a8f9f577dd034c5', class: "help-text" }, "Create a dynamic templated event title by typing $. Learn more"), this.validationError != '' && h("span", { class: "error-message" }, this.validationError))));
+            }, part: "net__title", ref: el => (this.titleRef = el), contentEditable: "true", onInput: e => this.handleChange(e), onKeyDown: event => this.handleInputKeyDown(event) }), this.showTokens && this.filteredTokens?.length > 0 && (h("div", { class: "token-options", part: "net__dropdown-content" }, h("ul", { tabindex: "-1", role: "listbox", "aria-label": this.name, "aria-activedescendant": this.ariaActivedescendant }, this.filteredTokens.map(option => (h("li", { tabindex: "0", key: option.label, id: option.label, class: { active: this.ariaActivedescendant === option.label }, onClick: e => this.selectOption(e, option), role: "option" }, this.getLabelHTML(option.labelHTML))))))), h("span", { key: '3ba87900ffbc4b69c5f9fac01a8f9f577dd034c5', class: "help-text" }, "Create a dynamic templated event title by typing $."), this.validationError != '' && h("span", { class: "error-message" }, this.validationError))));
     }
     static get formAssociated() { return true; }
     get host() { return this; }

package/dist/components/nylas-event-title2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nylas-event-title2.js","mappings":"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","names":["eventTitleTokens"],"sources":["src/components/scheduler-editor/nylas-event-title/nylas-event-title.scss?tag=nylas-event-title&encapsulation=shadow","src/components/scheduler-editor/nylas-event-title/nylas-event-title.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n}\n\n.nylas-event-title {\n display: flex;\n flex-direction: column;\n gap: 4px;\n position: relative;\n text-align: left;\n div.title {\n padding: 12px 16px;\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n overflow: scroll;\n white-space: nowrap;\n scrollbar-width: thin;\n &::-webkit-scrollbar {\n width: 6px;\n height: 6px;\n }\n &.error {\n border-color: var(--nylas-error);\n outline: none;\n }\n }\n input {\n padding: 12px 16px;\n border-width: 1;\n border-radius: 8px;\n border: 1px solid var(--nylas-base-200);\n }\n span.help-text {\n color: var(--nylas-base-800);\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 21px;\n }\n span.error-message {\n color: var(--nylas-error);\n }\n label {\n display: flex;\n align-items: center;\n color: var(--nylas-base-800);\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 150%; /* 21px /\n span.required {\n color: var(--nylas-error, #cc4841);\n }\n span.label-icon {\n margin-left: 4px;\n tooltip-component {\n display: flex;\n }\n }\n }\n}\n\n.highlighted-tag {\n background-color: var(--nylas-base-200);\n border-radius: var(--nylas-border-radius);\n padding: 5px;\n margin-left: 4px;\n}\n\n.token-options {\n display: block;\n background-color: var(--nylas-base-0);\n width: 100%;\n max-height: 336px;\n overflow: auto;\n z-index: 1;\n border-radius: 4px;\n position: absolute;\n top: calc(48px + 24px + 8px); // 48px is the height of the input, 24px is the height of the label, 8px is the gap between the label and the input\n @media #{$mobile} {\n right: 0;\n width: 325px;\n max-width: unset;\n }\n box-shadow: 0px 4px 6px -2px #0000000d;\n box-shadow: 0px 10px 15px -3px #0000001a;\n ul {\n padding: 0;\n list-style-type: none;\n color: var(--nylas-base-900);\n max-height: 336px;\n margin: 0;\n li {\n padding: 16px, 12px, 16px, 12px;\n color: black;\n padding: 12px 16px;\n text-decoration: none;\n display: block;\n font-family: inherit;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n letter-spacing: 0px;\n text-align: left;\n cursor: pointer;\n .token-label {\n display: flex;\n flex-direction: column;\n font-weight: 400;\n .token {\n color: var(--nylas-abse-900);\n font-size: 16px;\n line-height: 24px;\n }\n .description {\n color: var(--nylas-base-600);\n font-size: 14px;\n line-height: 21px;\n }\n }\n &:hover,\n &:focus,\n &:active,\n &.active {\n background-color: var(--nylas-base-100);\n .token-label {\n .token {\n color: var(--nylas-primary);\n }\n }\n }\n }\n }\n .selected {\n background-color: var(--nylas-base-100);\n }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug, getBrowser, isNonPrintableKey } from '@/utils/utils';\nimport { AttachInternals, Component, Host, State, h, Element, Prop, Watch, Event, EventEmitter, Listen } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { EVENT_TITLE_TOKENS as eventTitleTokens } from '@/common/constants';\nimport { Configuration } from '@nylas/core';\nimport sanitizeHtml from 'sanitize-html';\n\ninterface CustomShadowRoot extends ShadowRoot {\n getSelection: () => Selection \| null;\n}\n\ntype Token = {\n token: string;\n value: string;\n description: string;\n};\n\n/\n The `nylas-event-title` component is a form input for the title of an event.\n * @part net - The event title container\n * @part net__title - The event title input\n * @part net__dropdown-content - The token options container\n /\n@Component({\n tag: 'nylas-event-title',\n styleUrl: 'nylas-event-title.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasEventTitle {\n @Element() host!: HTMLElement;\n @AttachInternals() internals!: ElementInternals;\n\n // Properties\n /\n The selected config\n /\n @Prop() selectedConfiguration?: Configuration;\n /\n The title of the event from the cofiguration.\n /\n @Prop() eventTitle?: string = this.selectedConfiguration?.event_booking?.title;\n /\n The name attribute of this component.\n /\n @Prop() name: string = 'title';\n\n // State variables\n /\n Whether to show the tokens dropdown.\n /\n @State() showTokens: boolean = false;\n /\n The available token options for the dropdown.\n /\n @State() availableTokens: { label: string; value: string; labelHTML: Token }[] = eventTitleTokens.map(token => ({\n label: token.token,\n value: token.value,\n labelHTML: token,\n }));\n /\n The filtered token options for the dropdown based on the current query.\n /\n @State() filteredTokens: { label: string; value: string; labelHTML: Token }[] = this.availableTokens;\n /\n The aria-activedescendant attribute value. This is used to indicate the\n * currently active descendant in the tokens dropdown.\n /\n @State() ariaActivedescendant: string = '';\n /\n Stores the reference to the current word being typed.\n * This is used to update the event title with the selected token tag when\n * an option is selected from the dropdown by clicking on it.\n /\n @State() currentWord: {\n $value: string;\n fullText: string;\n index: number;\n focusOffset: number;\n } = { $value: '', fullText: '', index: -1, focusOffset: -1 };\n\n @State() validationError: string = '';\n\n // Reference to the title div element\n private titleRef!: HTMLDivElement;\n\n /\n When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n * Since this component is form-associated, the name attribute is required for form submission.\n * This is a workaround to ensure that the name attribute is set on the host element.\n /\n @Watch('name')\n elementNameChangedHandler(newValue: string) {\n debug('nylas-event-title', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('ariaActivedescendant')\n ariaActivedescendantChangedHandler(newValue: string) {\n debug('nylas-event-title', 'ariaActivedescendantChangedHandler', newValue);\n if (newValue !== '') {\n const activeOption = this.host.shadowRoot?.getElementById(newValue);\n activeOption?.classList.add('active');\n } else {\n const options = this.host.shadowRoot?.querySelectorAll('.token-options li.active');\n options?.forEach(option => option.classList.remove('active'));\n }\n }\n\n @Watch('selectedConfiguration')\n configChangedHandler(newVal) {\n const title = newVal?.event_booking?.title;\n if (title) {\n this.updateEventTitleFromProp(title);\n }\n }\n\n // Events\n /\n This event is fired when the value of the event title changes.\n /\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n // Lifecycle methods\n connectedCallback() {\n debug('nylas-event-title', 'connectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-event-title', 'componentWillLoad');\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-event-title', 'componentDidLoad');\n this.updateEventTitleFromProp(this.eventTitle \|\| '');\n }\n\n disconnectedCallback() {\n debug('nylas-event-title', 'disconnectedCallback');\n }\n\n @Listen('formSubmitted', { target: 'window' })\n formSubmittedHandler(event: CustomEvent) {\n debug('nylas-event-title', 'formSubmittedHandler', event);\n if (!this.internals?.validity?.valid) {\n this.validationError = 'Event title is required';\n } else {\n this.validationError = '';\n }\n }\n\n updateEventTitleFromProp(newValue: string) {\n debug('nylas-event-title', 'eventTitleChangedHandler', newValue);\n if (this.titleRef) {\n this.titleRef.innerHTML = this.highlightTokens(newValue);\n this.titleRef.focus();\n if (typeof this.internals.setValidity === 'function') {\n if (newValue === '') {\n this.internals?.setValidity({ customError: true }, `Event title is required`, this.titleRef);\n } else {\n this.internals?.setValidity({ customError: false });\n }\n }\n }\n }\n\n highlightTokens(title: string) {\n let outputHtml = title;\n\n eventTitleTokens.forEach(tokenObj => {\n const token = tokenObj.value;\n // Create a regular expression that matches the token as a whole word\n const regex = new RegExp(`(\\\\${token})(?!\\\\w)`, 'g');\n // Replace the token with a span element\n outputHtml = outputHtml.replace(regex, '<span class=\"highlighted-tag\">$1</span>');\n });\n return outputHtml;\n }\n\n getCurrentSelectionForBrowser() {\n const getSelectionTextData = (nodeValue, offset, node, allSelected) => {\n // Remove zero-width space characters from the text, because they are not visible and cause issues with the selection\n const text = nodeValue.replace(/[\\u200B-\\u200D\\uFEFF]/g, '');\n const dollarIndex = text.lastIndexOf('$');\n const lastWord = text.substring(dollarIndex).split(' ')[0];\n return {\n focusOffset: offset,\n dollarIndex,\n lastWord,\n currentText: text,\n node,\n allSelected,\n };\n };\n\n // Check if the selection has selected all the text in the node, we need this to handle the case where the user selects all the text and then types or deletes\n const isAllSelected = (selection: Selection) => selection.anchorOffset === 0 && selection.focusOffset === selection.focusNode?.nodeValue?.length;\n\n const currentBrowser = getBrowser();\n switch (currentBrowser) {\n case 'Chrome':\n const shadowRootSelection = (this.host.shadowRoot as CustomShadowRoot)?.getSelection();\n const focusNode = shadowRootSelection?.focusNode;\n const focusNodeValue = focusNode?.nodeValue \|\| '';\n const allSelected = shadowRootSelection && isAllSelected(shadowRootSelection);\n return getSelectionTextData(focusNodeValue, shadowRootSelection?.focusOffset \|\| -1, focusNode, allSelected);\n case 'Firefox':\n const selection = document.getSelection();\n const anchorNodeValue = selection?.anchorNode?.nodeValue \|\| '';\n const allSelectedFirefox = selection && isAllSelected(selection);\n return getSelectionTextData(anchorNodeValue, selection?.focusOffset \|\| -1, selection?.anchorNode, allSelectedFirefox);\n case 'Safari':\n const windowSelection = window.getSelection();\n const anchorNode = (windowSelection as any)?.getComposedRanges(this.host.shadowRoot as CustomShadowRoot)[0];\n const currentText = anchorNode?.startContainer?.nodeValue \|\| '';\n const allSelectedSafari = windowSelection && isAllSelected(windowSelection);\n return getSelectionTextData(currentText, anchorNode?.endOffset \|\| -1, anchorNode?.startContainer, allSelectedSafari);\n default:\n console.warn('Browser not supported');\n return null;\n }\n }\n\n handleChange(event: Event) {\n let textContent = (event.target as HTMLDivElement).textContent \|\| '';\n textContent = sanitizeHtml(textContent);\n\n // All browsers handle Selection within Shadow DOM differently, so get the current selection based on the browser\n const currentSelection = this.getCurrentSelectionForBrowser();\n if (!currentSelection) {\n this.updateEventTitle(textContent);\n this.resetDropdown();\n return;\n }\n const { focusOffset, dollarIndex, lastWord, currentText } = currentSelection;\n\n if (dollarIndex === -1 \|\| focusOffset < dollarIndex) {\n this.updateEventTitle(textContent);\n this.resetDropdown();\n return;\n }\n if (lastWord.startsWith('$')) {\n this.showTokens = true;\n // Update the current word being typed, we need this reference to update the event title with the selected token\n // because the user can select an option from the dropdown by clicking on it, which will not trigger the input event.\n this.currentWord = {\n $value: lastWord,\n fullText: currentText,\n index: dollarIndex,\n focusOffset,\n };\n this.populateSuggestionsDropdown(lastWord);\n } else {\n this.resetDropdown();\n }\n this.updateEventTitle(textContent);\n }\n\n handleInputKeyDown(event) {\n const selection = this.getCurrentSelectionForBrowser();\n\n // If no text is remaining in the title, reset the title to an empty string\n if (selection?.allSelected && !isNonPrintableKey(event)) {\n this.titleRef.innerHTML = '';\n }\n\n if (event.key === 'Enter') {\n event.preventDefault();\n const activeOption = this.host.shadowRoot?.getElementById(this.ariaActivedescendant);\n if (activeOption) {\n activeOption.click();\n this.ariaActivedescendant = '';\n }\n } else if (event.key === 'ArrowDown') {\n event.preventDefault();\n const activeOption = this.host.shadowRoot?.getElementById(this.ariaActivedescendant);\n if (activeOption) {\n const nextOption = activeOption.nextElementSibling;\n if (nextOption) {\n this.ariaActivedescendant = nextOption.id;\n } else {\n this.ariaActivedescendant = this.filteredTokens[0].label;\n }\n } else {\n this.ariaActivedescendant = this.filteredTokens[0].label;\n }\n } else if (event.key === 'ArrowUp') {\n event.preventDefault();\n const activeOption = this.host.shadowRoot?.getElementById(this.ariaActivedescendant);\n if (activeOption) {\n const prevOption = activeOption.previousElementSibling;\n if (prevOption) {\n this.ariaActivedescendant = prevOption.id;\n } else {\n this.ariaActivedescendant = this.filteredTokens[this.filteredTokens.length - 1].label;\n }\n } else {\n this.ariaActivedescendant = this.filteredTokens[this.filteredTokens.length - 1].label;\n }\n } else if (event.key === 'Escape') {\n event.preventDefault();\n this.resetDropdown();\n } else if (event.key === 'Backspace' \|\| event.key === 'Delete') {\n if (selection?.currentText.startsWith('${')) {\n selection?.node?.parentNode && selection.node.parentNode.removeChild(selection.node);\n }\n if (this.titleRef.textContent === '' \|\| selection?.currentText === '' \|\| selection?.allSelected) {\n this.titleRef.innerHTML = '';\n }\n }\n }\n\n selectOption(e: Event, option: { label: string; value: string; labelHTML: Token }) {\n e.preventDefault();\n const word = this.currentWord.fullText;\n const dollarWord = this.currentWord.$value;\n\n // Traverse the DOM to find the text node that contains the current word fullText\n let currentNode = this.titleRef.firstChild;\n let textNode: ChildNode \| null = null;\n\n while (currentNode) {\n if (currentNode.nodeType === 3) {\n const currentNodeText = currentNode.textContent?.replace(/[\\u200B-\\u200D\\uFEFF]/g, '') \|\| '';\n const wordText = word.replace(/[\\u200B-\\u200D\\uFEFF]/g, '');\n if (currentNodeText.includes(wordText)) {\n textNode = currentNode;\n break;\n }\n }\n currentNode = currentNode.nextSibling;\n }\n\n if (!textNode) {\n return;\n }\n // Split the text node into three parts: text before the token, the token, and text after the token\n const text = textNode.textContent \|\| '';\n const index = text.indexOf(dollarWord);\n const textBefore = text.substring(0, index);\n const textAfter = text.substring(index + dollarWord.length);\n const newTextNode = document.createTextNode(textBefore);\n const newRange = document.createRange();\n\n // Create a new span element to replace the text node\n const tagSpan = document.createElement('span');\n tagSpan.classList.add('highlighted-tag');\n tagSpan.textContent = `${option.value}`;\n const newTextNodeAfter = document.createTextNode(textAfter);\n\n if (textAfter !== '') {\n // If there is text after the token, add it to the new span element\n textNode.replaceWith(newTextNode, tagSpan, newTextNodeAfter);\n newRange.setStart(newTextNodeAfter, 1);\n } else {\n // If there is no text after the token, add a zero-width space character (Without this, the cursor will not move outside the highlighted span element)\n const afterNode = document.createTextNode('\\u200B');\n textNode.replaceWith(newTextNode, tagSpan, afterNode);\n newRange.setStart(afterNode, 1);\n }\n\n // Hide the dropdown\n this.resetDropdown();\n this.titleRef.focus();\n\n // Set the focus to the new span element\n const sel = window.getSelection();\n newRange.collapse(true);\n sel?.removeAllRanges();\n sel?.addRange(newRange);\n\n // Update the event title with the selected token\n this.updateEventTitle(this.titleRef.textContent \|\| '');\n }\n\n populateSuggestionsDropdown(query: string = '') {\n this.filteredTokens = this.availableTokens.filter(obj => {\n return obj.label.startsWith(query.toString()) \|\| obj.value.startsWith(query.toString());\n });\n\n // Set the first option as the active descendant\n if (this.filteredTokens.length > 0) {\n this.ariaActivedescendant = this.filteredTokens[0].label;\n }\n }\n\n updateEventTitle(text: string) {\n const value = text.replace(/ +/g, ' ');\n if (value === '') {\n this.internals?.setValidity({ customError: true }, `Event title is required`, this.titleRef);\n this.validationError = 'Event title is required';\n } else {\n this.internals?.setValidity({ customError: false });\n this.validationError = '';\n }\n this.internals?.setFormValue(value, this.name);\n this.valueChanged.emit({ value: value, name: this.name });\n }\n\n resetDropdown() {\n this.showTokens = false;\n this.ariaActivedescendant = '';\n }\n\n getLabelHTML(token: { token: string; description: string }) {\n return (\n <div class=\"token-label\">\n <span class=\"token\">{token.token}</span>\n <span class=\"description\">{token.description}</span>\n </div>\n );\n }\n\n @RegisterComponent<NylasEventTitle, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-event-title',\n stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n eventToProps: {},\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host>\n <div class=\"nylas-event-title\" part=\"net\">\n <label htmlFor=\"title\">\n Event title<span class=\"required\"></span>\n <span class=\"label-icon\">\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">Enter a title for your event.</span>\n </tooltip-component>\n </span>\n </label>\n <div\n class={{\n title: true,\n error: this.validationError !== '',\n }}\n part=\"net__title\"\n ref={el => (this.titleRef = el as HTMLDivElement)}\n contentEditable=\"true\"\n onInput={e => this.handleChange(e)}\n onKeyDown={event => this.handleInputKeyDown(event)}\n ></div>\n {this.showTokens && this.filteredTokens?.length > 0 && (\n <div class=\"token-options\" part=\"net__dropdown-content\">\n <ul tabindex=\"-1\" role=\"listbox\" aria-label={this.name} aria-activedescendant={this.ariaActivedescendant}>\n {this.filteredTokens.map(option => (\n <li\n tabindex=\"0\"\n key={option.label}\n id={option.label}\n class={{ active: this.ariaActivedescendant === option.label }}\n onClick={e => this.selectOption(e, option)}\n role=\"option\"\n >\n {this.getLabelHTML(option.labelHTML)}\n </li>\n ))}\n </ul>\n </div>\n )}\n <span class=\"help-text\">Create a dynamic templated event title by typing $. Learn more</span>\n {this.validationError != '' && <span class=\"error-message\">{this.validationError}</span>}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nylas-event-title2.js","mappings":"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","names":["eventTitleTokens"],"sources":["src/components/scheduler-editor/nylas-event-title/nylas-event-title.scss?tag=nylas-event-title&encapsulation=shadow","src/components/scheduler-editor/nylas-event-title/nylas-event-title.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n}\n\n.nylas-event-title {\n display: flex;\n flex-direction: column;\n gap: 4px;\n position: relative;\n text-align: left;\n div.title {\n padding: 12px 16px;\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n overflow: scroll;\n white-space: nowrap;\n scrollbar-width: thin;\n &::-webkit-scrollbar {\n width: 6px;\n height: 6px;\n }\n &.error {\n border-color: var(--nylas-error);\n outline: none;\n }\n }\n input {\n padding: 12px 16px;\n border-width: 1;\n border-radius: 8px;\n border: 1px solid var(--nylas-base-200);\n }\n span.help-text {\n color: var(--nylas-base-800);\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 21px;\n }\n span.error-message {\n color: var(--nylas-error);\n }\n label {\n display: flex;\n align-items: center;\n color: var(--nylas-base-800);\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 150%; /* 21px /\n span.required {\n color: var(--nylas-error, #cc4841);\n }\n span.label-icon {\n margin-left: 4px;\n tooltip-component {\n display: flex;\n }\n }\n }\n}\n\n.highlighted-tag {\n background-color: var(--nylas-base-200);\n border-radius: var(--nylas-border-radius);\n padding: 5px;\n margin-left: 4px;\n}\n\n.token-options {\n display: block;\n background-color: var(--nylas-base-0);\n width: 100%;\n max-height: 336px;\n overflow: auto;\n z-index: 1;\n border-radius: 4px;\n position: absolute;\n top: calc(48px + 24px + 8px); // 48px is the height of the input, 24px is the height of the label, 8px is the gap between the label and the input\n @media #{$mobile} {\n right: 0;\n width: 325px;\n max-width: unset;\n }\n box-shadow: 0px 4px 6px -2px #0000000d;\n box-shadow: 0px 10px 15px -3px #0000001a;\n ul {\n padding: 0;\n list-style-type: none;\n color: var(--nylas-base-900);\n max-height: 336px;\n margin: 0;\n li {\n padding: 16px, 12px, 16px, 12px;\n color: black;\n padding: 12px 16px;\n text-decoration: none;\n display: block;\n font-family: inherit;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n letter-spacing: 0px;\n text-align: left;\n cursor: pointer;\n .token-label {\n display: flex;\n flex-direction: column;\n font-weight: 400;\n .token {\n color: var(--nylas-abse-900);\n font-size: 16px;\n line-height: 24px;\n }\n .description {\n color: var(--nylas-base-600);\n font-size: 14px;\n line-height: 21px;\n }\n }\n &:hover,\n &:focus,\n &:active,\n &.active {\n background-color: var(--nylas-base-100);\n .token-label {\n .token {\n color: var(--nylas-primary);\n }\n }\n }\n }\n }\n .selected {\n background-color: var(--nylas-base-100);\n }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug, getBrowser, isNonPrintableKey } from '@/utils/utils';\nimport { AttachInternals, Component, Host, State, h, Element, Prop, Watch, Event, EventEmitter, Listen } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { EVENT_TITLE_TOKENS as eventTitleTokens } from '@/common/constants';\nimport { Configuration } from '@nylas/core';\nimport sanitizeHtml from 'sanitize-html';\n\ninterface CustomShadowRoot extends ShadowRoot {\n getSelection: () => Selection \| null;\n}\n\ntype Token = {\n token: string;\n value: string;\n description: string;\n};\n\n/\n The `nylas-event-title` component is a form input for the title of an event.\n * @part net - The event title container\n * @part net__title - The event title input\n * @part net__dropdown-content - The token options container\n /\n@Component({\n tag: 'nylas-event-title',\n styleUrl: 'nylas-event-title.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasEventTitle {\n @Element() host!: HTMLElement;\n @AttachInternals() internals!: ElementInternals;\n\n // Properties\n /\n The selected config\n /\n @Prop() selectedConfiguration?: Configuration;\n /\n The title of the event from the cofiguration.\n /\n @Prop() eventTitle?: string = this.selectedConfiguration?.event_booking?.title;\n /\n The name attribute of this component.\n /\n @Prop() name: string = 'title';\n\n // State variables\n /\n Whether to show the tokens dropdown.\n /\n @State() showTokens: boolean = false;\n /\n The available token options for the dropdown.\n /\n @State() availableTokens: { label: string; value: string; labelHTML: Token }[] = eventTitleTokens.map(token => ({\n label: token.token,\n value: token.value,\n labelHTML: token,\n }));\n /\n The filtered token options for the dropdown based on the current query.\n /\n @State() filteredTokens: { label: string; value: string; labelHTML: Token }[] = this.availableTokens;\n /\n The aria-activedescendant attribute value. This is used to indicate the\n * currently active descendant in the tokens dropdown.\n /\n @State() ariaActivedescendant: string = '';\n /\n Stores the reference to the current word being typed.\n * This is used to update the event title with the selected token tag when\n * an option is selected from the dropdown by clicking on it.\n /\n @State() currentWord: {\n $value: string;\n fullText: string;\n index: number;\n focusOffset: number;\n } = { $value: '', fullText: '', index: -1, focusOffset: -1 };\n\n @State() validationError: string = '';\n\n // Reference to the title div element\n private titleRef!: HTMLDivElement;\n\n /\n When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n * Since this component is form-associated, the name attribute is required for form submission.\n * This is a workaround to ensure that the name attribute is set on the host element.\n /\n @Watch('name')\n elementNameChangedHandler(newValue: string) {\n debug('nylas-event-title', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('ariaActivedescendant')\n ariaActivedescendantChangedHandler(newValue: string) {\n debug('nylas-event-title', 'ariaActivedescendantChangedHandler', newValue);\n if (newValue !== '') {\n const activeOption = this.host.shadowRoot?.getElementById(newValue);\n activeOption?.classList.add('active');\n } else {\n const options = this.host.shadowRoot?.querySelectorAll('.token-options li.active');\n options?.forEach(option => option.classList.remove('active'));\n }\n }\n\n @Watch('selectedConfiguration')\n configChangedHandler(newVal) {\n const title = newVal?.event_booking?.title;\n if (title) {\n this.updateEventTitleFromProp(title);\n }\n }\n\n // Events\n /\n This event is fired when the value of the event title changes.\n /\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n // Lifecycle methods\n connectedCallback() {\n debug('nylas-event-title', 'connectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-event-title', 'componentWillLoad');\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-event-title', 'componentDidLoad');\n this.updateEventTitleFromProp(this.eventTitle \|\| '');\n }\n\n disconnectedCallback() {\n debug('nylas-event-title', 'disconnectedCallback');\n }\n\n @Listen('formSubmitted', { target: 'window' })\n formSubmittedHandler(event: CustomEvent) {\n debug('nylas-event-title', 'formSubmittedHandler', event);\n if (!this.internals?.validity?.valid) {\n this.validationError = 'Event title is required';\n } else {\n this.validationError = '';\n }\n }\n\n updateEventTitleFromProp(newValue: string) {\n debug('nylas-event-title', 'eventTitleChangedHandler', newValue);\n if (this.titleRef) {\n this.titleRef.innerHTML = this.highlightTokens(newValue);\n this.titleRef.focus();\n if (typeof this.internals.setValidity === 'function') {\n if (newValue === '') {\n this.internals?.setValidity({ customError: true }, `Event title is required`, this.titleRef);\n } else {\n this.internals?.setValidity({ customError: false });\n }\n }\n }\n }\n\n highlightTokens(title: string) {\n let outputHtml = title;\n\n eventTitleTokens.forEach(tokenObj => {\n const token = tokenObj.value;\n // Create a regular expression that matches the token as a whole word\n const regex = new RegExp(`(\\\\${token})(?!\\\\w)`, 'g');\n // Replace the token with a span element\n outputHtml = outputHtml.replace(regex, '<span class=\"highlighted-tag\">$1</span>');\n });\n return outputHtml;\n }\n\n getCurrentSelectionForBrowser() {\n const getSelectionTextData = (nodeValue, offset, node, allSelected) => {\n // Remove zero-width space characters from the text, because they are not visible and cause issues with the selection\n const text = nodeValue.replace(/[\\u200B-\\u200D\\uFEFF]/g, '');\n const dollarIndex = text.lastIndexOf('$');\n const lastWord = text.substring(dollarIndex).split(' ')[0];\n return {\n focusOffset: offset,\n dollarIndex,\n lastWord,\n currentText: text,\n node,\n allSelected,\n };\n };\n\n // Check if the selection has selected all the text in the node, we need this to handle the case where the user selects all the text and then types or deletes\n const isAllSelected = (selection: Selection) => selection.anchorOffset === 0 && selection.focusOffset === selection.focusNode?.nodeValue?.length;\n\n const currentBrowser = getBrowser();\n switch (currentBrowser) {\n case 'Chrome':\n const shadowRootSelection = (this.host.shadowRoot as CustomShadowRoot)?.getSelection();\n const focusNode = shadowRootSelection?.focusNode;\n const focusNodeValue = focusNode?.nodeValue \|\| '';\n const allSelected = shadowRootSelection && isAllSelected(shadowRootSelection);\n return getSelectionTextData(focusNodeValue, shadowRootSelection?.focusOffset \|\| -1, focusNode, allSelected);\n case 'Firefox':\n const selection = document.getSelection();\n const anchorNodeValue = selection?.anchorNode?.nodeValue \|\| '';\n const allSelectedFirefox = selection && isAllSelected(selection);\n return getSelectionTextData(anchorNodeValue, selection?.focusOffset \|\| -1, selection?.anchorNode, allSelectedFirefox);\n case 'Safari':\n const windowSelection = window.getSelection();\n const anchorNode = (windowSelection as any)?.getComposedRanges(this.host.shadowRoot as CustomShadowRoot)[0];\n const currentText = anchorNode?.startContainer?.nodeValue \|\| '';\n const allSelectedSafari = windowSelection && isAllSelected(windowSelection);\n return getSelectionTextData(currentText, anchorNode?.endOffset \|\| -1, anchorNode?.startContainer, allSelectedSafari);\n default:\n console.warn('Browser not supported');\n return null;\n }\n }\n\n handleChange(event: Event) {\n let textContent = (event.target as HTMLDivElement).textContent \|\| '';\n textContent = sanitizeHtml(textContent);\n\n // All browsers handle Selection within Shadow DOM differently, so get the current selection based on the browser\n const currentSelection = this.getCurrentSelectionForBrowser();\n if (!currentSelection) {\n this.updateEventTitle(textContent);\n this.resetDropdown();\n return;\n }\n const { focusOffset, dollarIndex, lastWord, currentText } = currentSelection;\n\n if (dollarIndex === -1 \|\| focusOffset < dollarIndex) {\n this.updateEventTitle(textContent);\n this.resetDropdown();\n return;\n }\n if (lastWord.startsWith('$')) {\n this.showTokens = true;\n // Update the current word being typed, we need this reference to update the event title with the selected token\n // because the user can select an option from the dropdown by clicking on it, which will not trigger the input event.\n this.currentWord = {\n $value: lastWord,\n fullText: currentText,\n index: dollarIndex,\n focusOffset,\n };\n this.populateSuggestionsDropdown(lastWord);\n } else {\n this.resetDropdown();\n }\n this.updateEventTitle(textContent);\n }\n\n handleInputKeyDown(event) {\n const selection = this.getCurrentSelectionForBrowser();\n\n // If no text is remaining in the title, reset the title to an empty string\n if (selection?.allSelected && !isNonPrintableKey(event)) {\n this.titleRef.innerHTML = '';\n }\n\n if (event.key === 'Enter') {\n event.preventDefault();\n const activeOption = this.host.shadowRoot?.getElementById(this.ariaActivedescendant);\n if (activeOption) {\n activeOption.click();\n this.ariaActivedescendant = '';\n }\n } else if (event.key === 'ArrowDown') {\n event.preventDefault();\n const activeOption = this.host.shadowRoot?.getElementById(this.ariaActivedescendant);\n if (activeOption) {\n const nextOption = activeOption.nextElementSibling;\n if (nextOption) {\n this.ariaActivedescendant = nextOption.id;\n } else {\n this.ariaActivedescendant = this.filteredTokens[0].label;\n }\n } else {\n this.ariaActivedescendant = this.filteredTokens[0].label;\n }\n } else if (event.key === 'ArrowUp') {\n event.preventDefault();\n const activeOption = this.host.shadowRoot?.getElementById(this.ariaActivedescendant);\n if (activeOption) {\n const prevOption = activeOption.previousElementSibling;\n if (prevOption) {\n this.ariaActivedescendant = prevOption.id;\n } else {\n this.ariaActivedescendant = this.filteredTokens[this.filteredTokens.length - 1].label;\n }\n } else {\n this.ariaActivedescendant = this.filteredTokens[this.filteredTokens.length - 1].label;\n }\n } else if (event.key === 'Escape') {\n event.preventDefault();\n this.resetDropdown();\n } else if (event.key === 'Backspace' \|\| event.key === 'Delete') {\n if (selection?.currentText.startsWith('${')) {\n selection?.node?.parentNode && selection.node.parentNode.removeChild(selection.node);\n }\n if (this.titleRef.textContent === '' \|\| selection?.currentText === '' \|\| selection?.allSelected) {\n this.titleRef.innerHTML = '';\n }\n }\n }\n\n selectOption(e: Event, option: { label: string; value: string; labelHTML: Token }) {\n e.preventDefault();\n const word = this.currentWord.fullText;\n const dollarWord = this.currentWord.$value;\n\n // Traverse the DOM to find the text node that contains the current word fullText\n let currentNode = this.titleRef.firstChild;\n let textNode: ChildNode \| null = null;\n\n while (currentNode) {\n if (currentNode.nodeType === 3) {\n const currentNodeText = currentNode.textContent?.replace(/[\\u200B-\\u200D\\uFEFF]/g, '') \|\| '';\n const wordText = word.replace(/[\\u200B-\\u200D\\uFEFF]/g, '');\n if (currentNodeText.includes(wordText)) {\n textNode = currentNode;\n break;\n }\n }\n currentNode = currentNode.nextSibling;\n }\n\n if (!textNode) {\n return;\n }\n // Split the text node into three parts: text before the token, the token, and text after the token\n const text = textNode.textContent \|\| '';\n const index = text.indexOf(dollarWord);\n const textBefore = text.substring(0, index);\n const textAfter = text.substring(index + dollarWord.length);\n const newTextNode = document.createTextNode(textBefore);\n const newRange = document.createRange();\n\n // Create a new span element to replace the text node\n const tagSpan = document.createElement('span');\n tagSpan.classList.add('highlighted-tag');\n tagSpan.textContent = `${option.value}`;\n const newTextNodeAfter = document.createTextNode(textAfter);\n\n if (textAfter !== '') {\n // If there is text after the token, add it to the new span element\n textNode.replaceWith(newTextNode, tagSpan, newTextNodeAfter);\n newRange.setStart(newTextNodeAfter, 1);\n } else {\n // If there is no text after the token, add a zero-width space character (Without this, the cursor will not move outside the highlighted span element)\n const afterNode = document.createTextNode('\\u200B');\n textNode.replaceWith(newTextNode, tagSpan, afterNode);\n newRange.setStart(afterNode, 1);\n }\n\n // Hide the dropdown\n this.resetDropdown();\n this.titleRef.focus();\n\n // Set the focus to the new span element\n const sel = window.getSelection();\n newRange.collapse(true);\n sel?.removeAllRanges();\n sel?.addRange(newRange);\n\n // Update the event title with the selected token\n this.updateEventTitle(this.titleRef.textContent \|\| '');\n }\n\n populateSuggestionsDropdown(query: string = '') {\n this.filteredTokens = this.availableTokens.filter(obj => {\n return obj.label.startsWith(query.toString()) \|\| obj.value.startsWith(query.toString());\n });\n\n // Set the first option as the active descendant\n if (this.filteredTokens.length > 0) {\n this.ariaActivedescendant = this.filteredTokens[0].label;\n }\n }\n\n updateEventTitle(text: string) {\n const value = text.replace(/ +/g, ' ');\n if (value === '') {\n this.internals?.setValidity({ customError: true }, `Event title is required`, this.titleRef);\n this.validationError = 'Event title is required';\n } else {\n this.internals?.setValidity({ customError: false });\n this.validationError = '';\n }\n this.internals?.setFormValue(value, this.name);\n this.valueChanged.emit({ value: value, name: this.name });\n }\n\n resetDropdown() {\n this.showTokens = false;\n this.ariaActivedescendant = '';\n }\n\n getLabelHTML(token: { token: string; description: string }) {\n return (\n <div class=\"token-label\">\n <span class=\"token\">{token.token}</span>\n <span class=\"description\">{token.description}</span>\n </div>\n );\n }\n\n @RegisterComponent<NylasEventTitle, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-event-title',\n stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n eventToProps: {},\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host>\n <div class=\"nylas-event-title\" part=\"net\">\n <label htmlFor=\"title\">\n Event title<span class=\"required\"></span>\n <span class=\"label-icon\">\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">Enter a title for your event.</span>\n </tooltip-component>\n </span>\n </label>\n <div\n class={{\n title: true,\n error: this.validationError !== '',\n }}\n part=\"net__title\"\n ref={el => (this.titleRef = el as HTMLDivElement)}\n contentEditable=\"true\"\n onInput={e => this.handleChange(e)}\n onKeyDown={event => this.handleInputKeyDown(event)}\n ></div>\n {this.showTokens && this.filteredTokens?.length > 0 && (\n <div class=\"token-options\" part=\"net__dropdown-content\">\n <ul tabindex=\"-1\" role=\"listbox\" aria-label={this.name} aria-activedescendant={this.ariaActivedescendant}>\n {this.filteredTokens.map(option => (\n <li\n tabindex=\"0\"\n key={option.label}\n id={option.label}\n class={{ active: this.ariaActivedescendant === option.label }}\n onClick={e => this.selectOption(e, option)}\n role=\"option\"\n >\n {this.getLabelHTML(option.labelHTML)}\n </li>\n ))}\n </ul>\n </div>\n )}\n <span class=\"help-text\">Create a dynamic templated event title by typing $.</span>\n {this.validationError != '' && <span class=\"error-message\">{this.validationError}</span>}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/nylas-form-card2.js CHANGED Viewed

@@ -41,7 +41,7 @@ const NylasFormCard = proxyCustomElement(class NylasFormCard extends HTMLElement
         checkForMissingSlots(slots, this.host);
     }
     render() {
-        return (h(Host, { key: 'b239c071fddb29c99417cd9df00e4e8a10cfc68d' }, h("div", { key: '03cea2cbfa42eaa9fa93a7b95507c182d9fb468e', class: "nylas-form-card" }, h("div", { key: '8c62d6d8b725d25aa139635d865d95d00f904c75', class: "nylas-form-card__header" }, h("slot", { key: '614613c87e4c5cf2eb54bea118a9179e8f684535', name: "header-title" }), h("slot", { key: '9cc70a1325e1e69c69a3313581bf14b2c638a421', name: "header-subtitle" })), h("div", { key: '8d557b743c717caae7d331b0084dcde441b64a80', class: "nylas-form-card__content" }, h("slot", { key: 'e35718fdfd24a984a39ca67e8356991d8b7000f2', name: "content" })))));
+        return (h(Host, { key: '2fef59eded8f70f0a2c0dc2fbcaddf1f8b058771' }, h("div", { key: '016171f1a2d2610e690d9ae6e31dcdaf9d468efa', class: "nylas-form-card" }, h("div", { key: '9b054e5b900b1ce16cf4a005ca271f9859d10fcd', class: "nylas-form-card__header" }, h("slot", { key: '0664cfabca39c279a6920e3ffc11074f57c809fa', name: "header-title" }), h("slot", { key: '551326d9227e6b3e7bd53e375e7fc50d723b8d5d', name: "header-subtitle" })), h("div", { key: 'bd75be371c835ce33a07eb35b967c4fa557e9578', class: "nylas-form-card__content" }, h("slot", { key: '4bbb9cb23d407fde92baafb8fce0033100a7e56f', name: "content" })))));
     }
     static get formAssociated() { return true; }
     get host() { return this; }

package/dist/components/nylas-if-state.js CHANGED Viewed

@@ -104,7 +104,7 @@ const NylasIfState$1 = proxyCustomElement(class NylasIfState extends HTMLElement
         }
     }
     render() {
-        return (h(Host, { key: '14c61cd55ec800a480889a16ea2f913b0e19f27f' }, h("div", { key: '4f97263914ce0afbd5f4f629f7ca8d2df8ad87c4', class: this.classes }, this.show && h("slot", null))));
+        return (h(Host, { key: '06fbcbd4f843c995a21fe2d9001854db5630de2d' }, h("div", { key: 'ffaefb05f1361c98fd9b449110d003f2c18137a7', class: this.classes }, this.show && h("slot", null))));
     }
     static get watchers() { return {
         "getStore": ["onGetStoreChange"]

package/dist/components/nylas-limit-future-bookings2.js CHANGED Viewed

@@ -106,7 +106,7 @@ const NylasLimitFutureBookings = proxyCustomElement(class NylasLimitFutureBookin
         this.selectedPeriod = period;
     }
     render() {
-        return (h(Host, { key: '9efaf822025f476c80f4c5124f226e45ef9047f9' }, h("div", { key: 'acb0ed9bb24d9e789c01127b2343194d47c37c5f', class: "nylas-limit-future-bookings", part: "nlfb" }, h("label", { key: 'b4bbe14a0870451be5c7754dbbd3adb029b1d24c' }, "Limit future bookings", h("span", { key: 'e1e671d334ec20347852549c4b4d63fa626a2186', class: "label-icon" }, h("tooltip-component", { key: '378c5a41fe7920cebd1f9de4ea16873e951584cf' }, h("info-icon", { key: 'dee6d8d027c746b19b4de42a7e57754a6dcf0a34', slot: "tooltip-icon" }), h("span", { key: 'f128781fb212013489d7db03e7b5fb1a02681b5a', slot: "tooltip-content" }, "Set a limit on how far in the future bookings can be made.")))), h("time-period-selector", { key: 'fb00fd64c7dec2beb976132a397bb067e72c0cc3', id: "limit-future-bookings", timePeriods: ['day', 'week', 'month'], exportparts: "tps__number-dropdown: nlfb__number-dropdown, tps__number-dropdown-button: nlfb__number-dropdown-button, tps__number-dropdown-content: nlfb__number-dropdown-content, tps__period-dropdown: nlfb__period-dropdown, tps__period-dropdown-button: nlfb__period-dropdown-button, tps__period-dropdown-content: nlfb__period-dropdown-content", defaultSelectedNumber: this.selectedNumber, defaultSelectedPeriod: this.selectedPeriod }))));
+        return (h(Host, { key: '9619078c85fcf4bb3177e237c0dbed1873283677' }, h("div", { key: '33c715cf0b41a805c44bf87bf522277fa8f2cc8c', class: "nylas-limit-future-bookings", part: "nlfb" }, h("label", { key: 'd4faaca2c9356d9522ea04e16a20cbce034feb42' }, "Limit future bookings", h("span", { key: 'e57cc58b91ed5b9e4ecce20011226b56832596dd', class: "label-icon" }, h("tooltip-component", { key: 'c6022a7c569cf839420c25f7f018caa6045989f5' }, h("info-icon", { key: '85c32f3ff152f55a0f33b6e6986b38f8760e3d5a', slot: "tooltip-icon" }), h("span", { key: 'bc2ec5df56452c736376059574e05ca250c94b06', slot: "tooltip-content" }, "The limit on how far in the future bookings can be made.")))), h("time-period-selector", { key: '342fd70055d41804b00a52d4e88fa6d4573fd770', id: "limit-future-bookings", timePeriods: ['day', 'week', 'month'], exportparts: "tps__number-dropdown: nlfb__number-dropdown, tps__number-dropdown-button: nlfb__number-dropdown-button, tps__number-dropdown-content: nlfb__number-dropdown-content, tps__period-dropdown: nlfb__period-dropdown, tps__period-dropdown-button: nlfb__period-dropdown-button, tps__period-dropdown-content: nlfb__period-dropdown-content", defaultSelectedNumber: this.selectedNumber, defaultSelectedPeriod: this.selectedPeriod }))));
     }
     static get formAssociated() { return true; }
     get host() { return this; }