npm - @nylas/web-elements - Versions diffs - 1.1.0-canary.7 → 1.1.0-canary.9 - Mend

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

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

package/dist/collection/components/scheduler-editor/nylas-event-title/nylas-event-title.js CHANGED Viewed

@@ -13,7 +13,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
         return Reflect.metadata(k, v);
 };
 import { RegisterComponent } from "../../../common/register-component";
-import { debug, getBrowser } from "../../../utils/utils";
+import { debug, getBrowser, isNonPrintableKey } from "../../../utils/utils";
 import { Host, h } from "@stencil/core";
 import { EVENT_TITLE_TOKENS as eventTitleTokens } from "../../../common/constants";
 export class NylasEventTitle {
@@ -101,7 +101,7 @@ export class NylasEventTitle {
         return outputHtml;
     }
     getCurrentSelectionForBrowser() {
-        const getSelectionTextData = (nodeValue, offset, node) => {
+        const getSelectionTextData = (nodeValue, offset, node, allSelected) => {
             const text = nodeValue.replace(/[\u200B-\u200D\uFEFF]/g, '');
             const dollarIndex = text.lastIndexOf('$');
             const lastWord = text.substring(dollarIndex).split(' ')[0];
@@ -111,24 +111,29 @@ export class NylasEventTitle {
                 lastWord,
                 currentText: text,
                 node,
+                allSelected,
             };
         };
+        const isAllSelected = (selection) => selection.anchorOffset === 0 && selection.focusOffset === selection.focusNode?.nodeValue?.length;
         const currentBrowser = getBrowser();
         switch (currentBrowser) {
             case 'Chrome':
                 const shadowRootSelection = this.host.shadowRoot?.getSelection();
                 const focusNode = shadowRootSelection?.focusNode;
                 const focusNodeValue = focusNode?.nodeValue || '';
-                return getSelectionTextData(focusNodeValue, shadowRootSelection?.focusOffset || -1, focusNode);
+                const allSelected = shadowRootSelection && isAllSelected(shadowRootSelection);
+                return getSelectionTextData(focusNodeValue, shadowRootSelection?.focusOffset || -1, focusNode, allSelected);
             case 'Firefox':
                 const selection = document.getSelection();
                 const anchorNodeValue = selection?.anchorNode?.nodeValue || '';
-                return getSelectionTextData(anchorNodeValue, selection?.focusOffset || -1, selection?.anchorNode);
+                const allSelectedFirefox = selection && isAllSelected(selection);
+                return getSelectionTextData(anchorNodeValue, selection?.focusOffset || -1, selection?.anchorNode, allSelectedFirefox);
             case 'Safari':
                 const windowSelection = window.getSelection();
                 const anchorNode = windowSelection?.getComposedRanges(this.host.shadowRoot)[0];
                 const currentText = anchorNode?.startContainer?.nodeValue || '';
-                return getSelectionTextData(currentText, anchorNode?.endOffset || -1, anchorNode?.startContainer);
+                const allSelectedSafari = windowSelection && isAllSelected(windowSelection);
+                return getSelectionTextData(currentText, anchorNode?.endOffset || -1, anchorNode?.startContainer, allSelectedSafari);
             default:
                 console.warn('Browser not supported');
                 return null;
@@ -164,6 +169,10 @@ export class NylasEventTitle {
         this.updateEventTitle(textContent);
     }
     handleInputKeyDown(event) {
+        const selection = this.getCurrentSelectionForBrowser();
+        if (selection?.allSelected && !isNonPrintableKey(event)) {
+            this.titleRef.innerHTML = '';
+        }
         if (event.key === 'Enter') {
             event.preventDefault();
             const activeOption = this.host.shadowRoot?.getElementById(this.ariaActivedescendant);
@@ -209,10 +218,12 @@ export class NylasEventTitle {
             this.resetDropdown();
         }
         else if (event.key === 'Backspace' || event.key === 'Delete') {
-            const selection = this.getCurrentSelectionForBrowser();
             if (selection?.currentText.startsWith('${')) {
                 selection?.node?.parentNode && selection.node.parentNode.removeChild(selection.node);
             }
+            if (this.titleRef.textContent === '' || selection?.currentText === '' || selection?.allSelected) {
+                this.titleRef.innerHTML = '';
+            }
         }
     }
     selectOption(e, option) {
@@ -247,12 +258,12 @@ export class NylasEventTitle {
         const newTextNodeAfter = document.createTextNode(textAfter);
         if (textAfter !== '') {
             textNode.replaceWith(newTextNode, tagSpan, newTextNodeAfter);
-            newRange.setStart(newTextNodeAfter, 0);
+            newRange.setStart(newTextNodeAfter, 1);
         }
         else {
             const afterNode = document.createTextNode('\u200B');
             textNode.replaceWith(newTextNode, tagSpan, afterNode);
-            newRange.setStart(afterNode, 0);
+            newRange.setStart(afterNode, 1);
         }
         this.resetDropdown();
         this.titleRef.focus();
@@ -291,10 +302,10 @@ export class NylasEventTitle {
         return (h("div", { class: "token-label" }, h("span", { class: "token" }, token.token), h("span", { class: "description" }, token.description)));
     }
     render() {
-        return (h(Host, { key: '9287b1b2cb59f9cd83d585807070b8aaa4821a6c' }, h("div", { key: '02ca37b1b68691faf69c6cdd062475f10a87653c', class: "nylas-event-title", part: "net" }, h("label", { key: 'ceeda06d9da67727cdb5fce90b182a28cc3408e1', htmlFor: "title" }, "Event title", h("span", { key: 'd0e6b3387661a7f23a4796611f4854cf64b3bd9f', class: "required" }, "*"), h("span", { key: '84d0dd45f6a21504849aabf195676af2dacc40b2', class: "label-icon" }, h("tooltip-component", { key: 'bc8d5fbbd455a5d983ebb037e3d93e6dc2619cbd' }, h("info-icon", { key: '5c16591baceb37a8739c70b6fa505de08813ff0f', slot: "tooltip-icon" }), h("span", { key: '8214ecaad02beb8da5e0595aa13ff7057a0e60cc', slot: "tooltip-content" }, "Enter a title for your event.")))), h("div", { key: '98e9885cb4acd028908d7fb1b2a028cffd0dc7d4', class: {
+        return (h(Host, { key: 'e0ddf6c13a5a0c0d2e0db9188365418fb7484dcf' }, h("div", { key: 'a3b8e594c8d9632709e777891f04df0aaaf7c5c3', class: "nylas-event-title", part: "net" }, h("label", { key: 'e5794d2cd8be0b1666bfa67c3ea657da5dc8d45d', htmlFor: "title" }, "Event title", h("span", { key: '1210caceb7bf824f01559460e1c5e572cb2dad92', class: "required" }, "*"), h("span", { key: '4280ec285221e6db76ca08723fe3888a1d2643e3', class: "label-icon" }, h("tooltip-component", { key: 'd6c05fb79cf39656af7589a2e9de9ef832d7a2f8' }, h("info-icon", { key: 'a4659d97d60d00dfcc2c993e70da5cfd05904f78', slot: "tooltip-icon" }), h("span", { key: '738bfa669eec42b417be02fbad0584af34044c83', slot: "tooltip-content" }, "Enter a title for your event.")))), h("div", { key: 'df102dc899f8de91154689d9cdaae28465380622', 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: 'a2a15145119acf95335728589c24138386032188', 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: 'ec769eea7e2e3ff6d64bef0f5099540c93ba80ab', class: "help-text" }, "Create a dynamic templated event title by typing $. Learn more"), this.validationError != '' && h("span", { class: "error-message" }, this.validationError))));
     }
     static get is() { return "nylas-event-title"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scheduler-editor/nylas-event-title/nylas-event-title.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nylas-event-title.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-event-title/nylas-event-title.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug, getBrowser } 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';\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) => {\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 };\n };\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 return getSelectionTextData(focusNodeValue, shadowRootSelection?.focusOffset \|\| -1, focusNode);\n case 'Firefox':\n const selection = document.getSelection();\n const anchorNodeValue = selection?.anchorNode?.nodeValue \|\| '';\n return getSelectionTextData(anchorNodeValue, selection?.focusOffset \|\| -1, selection?.anchorNode);\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 return getSelectionTextData(currentText, anchorNode?.endOffset \|\| -1, anchorNode?.startContainer);\n default:\n console.warn('Browser not supported');\n return null;\n }\n }\n\n handleChange(event: Event) {\n const textContent = (event.target as HTMLDivElement).textContent \|\| '';\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 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 const selection = this.getCurrentSelectionForBrowser();\n if (selection?.currentText.startsWith('${')) {\n selection?.node?.parentNode && selection.node.parentNode.removeChild(selection.node);\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, 0);\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, 0);\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"]}
1	+ {"version":3,"file":"nylas-event-title.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-event-title/nylas-event-title.tsx"],"names":[],"mappings":"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","sourcesContent":["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';\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 const textContent = (event.target as HTMLDivElement).textContent \|\| '';\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"]}

package/dist/collection/components/scheduler-editor/nylas-limit-future-bookings/nylas-limit-future-bookings.css CHANGED Viewed

@@ -29,11 +29,17 @@
   justify-content: space-between;
   font-family: var(--nylas-font-family);
 }
+@media screen and (max-width: 768px) {
+  .nylas-limit-future-bookings {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+}
 .nylas-limit-future-bookings label {
   display: flex;
   align-items: center;
   color: var(--nylas-base-800);
-  font-size: 14px;
+  font-size: 16px;
   font-style: normal;
   font-weight: 400;
   line-height: 150%; /* 21px */

package/dist/collection/components/scheduler-editor/nylas-list-configurations/nylas-list-configurations.css CHANGED Viewed

@@ -33,12 +33,14 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 2rem;
+  margin-bottom: 1rem;
   gap: 1rem;
 }
 @media screen and (max-width: 768px) {
   .header {
     flex-direction: column;
+    gap: 0.5rem;
+    align-items: unset;
   }
 }
 .header h2 {
@@ -64,13 +66,20 @@
 .configurations {
   border: 1px solid var(--nylas-base-200);
   border-radius: var(--nylas-border-radius-2x);
-  overflow-x: auto;
+  background: var(--nylas-base-0);
+  height: 100%;
+  display: flex;
+  overflow-y: auto;
 }
 .configurations table {
   width: 100%;
   border-spacing: 0;
   border-collapse: collapse;
   font-family: inherit;
+  height: max-content;
+}
+.configurations table.no-configurations {
+  height: 100%;
 }
 .configurations table tr {
   color: var(--nylas-base-800);
@@ -87,6 +96,9 @@
   font-weight: 600;
   text-transform: uppercase;
 }
+.configurations table th.actions-header {
+  text-align: right;
+}
 .configurations table tr.no-configurations td > div {
   display: flex;
   height: 100%;
@@ -121,6 +133,12 @@
   justify-content: flex-end;
   gap: 1rem;
 }
+@media screen and (max-width: 768px) {
+  .configurations table .actions {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+}
 .configurations table .title {
   display: flex;
   flex-direction: column;

package/dist/collection/components/scheduler-editor/nylas-list-configurations/nylas-list-configurations.js CHANGED Viewed

@@ -50,9 +50,11 @@ export class NylasListConfigurations {
     render() {
         return (h(Host, null, h("div", { class: "header" }, h("div", { class: "description" }, h("h2", null, "All scheduling pages"), h("p", null, "Create, edit and manage all your scheduling pages.")), this.configurations && this.configurations.length > 0 && (h("div", { class: "actions" }, h("button-component", { clickHandler: () => {
                 this.createButtonClick.emit(this.host);
-            } }, "Create new")))), h("div", { class: "configurations" }, h("table", null, h("tr", { class: {
+            } }, "Create new")))), h("div", { class: "configurations" }, h("table", { class: {
+                'no-configurations': this.state !== 'loading' && (!this.configurations || this.configurations.length === 0),
+            } }, h("tr", { class: {
                 hide: this.state === 'loading' || (this.configurations && this.configurations.length === 0),
-            } }, h("th", null, "Scheduling page event title"), h("th", null, "Duration"), h("th", { class: "actions" }, "Actions")), this.state === 'loading' && (h("tr", { class: "no-configurations" }, h("td", { colSpan: 3 }, h("div", null, h("h3", null, "Loading..."), h("p", null, "Please wait while we fetch the scheduling pages"))))), this.state !== 'loading' && (!this.configurations || this.configurations.length === 0) && (h("tr", { class: "no-configurations" }, h("td", { colSpan: 3 }, h("div", null, h("calendar-icon", { width: "48", height: "48" }), h("h3", null, "No scheduling pages found"), h("p", null, "Get started with creating your first scheduling page"), h("button-component", { clickHandler: () => {
+            } }, h("th", null, "Scheduling page event title"), h("th", null, "Duration"), h("th", { class: "actions-header" }, "Actions")), this.state === 'loading' && (h("tr", { class: "no-configurations" }, h("td", { colSpan: 3 }, h("div", null, h("h3", null, "Loading..."), h("p", null, "Please wait while we fetch the scheduling pages"))))), this.state !== 'loading' && (!this.configurations || this.configurations.length === 0) && (h("tr", { class: "no-configurations" }, h("td", { colSpan: 3 }, h("div", null, h("calendar-icon", { width: "48", height: "48" }), h("h3", null, "No scheduling pages found"), h("p", null, "Get started with creating your first scheduling page"), h("button-component", { clickHandler: () => {
                 this.createButtonClick.emit(this.host);
             } }, "Create new"))))), this.state !== 'loading' &&
             this.configurations.map(config => (h("tr", { key: config.id }, h("td", null, h("div", { class: "title" }, h("span", { class: 'config-event-title' }, config.event_booking.title), h("span", { class: 'config-event-description' }, config.event_booking.description))), h("td", null, h("div", null, config.availability.duration_minutes, " mins")), h("td", null, h("div", { class: "actions" }, h("button-component", { variant: 'basic', clickHandler: event => {
@@ -64,7 +66,7 @@ export class NylasListConfigurations {
                 } }, "Edit"), h("button-component", { variant: 'basic', clickHandler: event => {
                     event.preventDefault();
                     this.deleteButtonClick.emit({ host: this.host, configuration: config });
-                } }, "Delete")))))))), h("div", { class: "error-container" }, h("p", { class: 'error' }, this.state === 'error' && this.error))));
+                } }, "Delete")))))))), this.state === 'error' && (h("div", { class: "error-container" }, h("p", { class: 'error' }, this.error)))));
     }
     static get is() { return "nylas-list-configurations"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scheduler-editor/nylas-list-configurations/nylas-list-configurations.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nylas-list-configurations.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-list-configurations/nylas-list-configurations.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug, parsePreviewLink } from '@/utils/utils';\nimport { Component, Element, Event, EventEmitter, Host, Method, Prop, State, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration } from '@nylas/core';\n\n/*\n The `nylas-list-configurations` component displays a list of scheduling pages.\n /\n@Component({\n tag: 'nylas-list-configurations',\n styleUrl: 'nylas-list-configurations.scss',\n shadow: true,\n})\nexport class NylasListConfigurations {\n /\n The host element.\n /\n @Element() host!: HTMLNylasListConfigurationsElement;\n\n /\n The list of configurations to display.\n /\n @Prop() configurations: Configuration[] = [];\n\n /\n The scheduler preview link to use when the user clicks on the preview button.\n * You can use a placeholder `{config.id}` to replace the configuration id anywhere in the link.\n /\n @Prop({ attribute: 'scheduler-preview-link' }) schedulerPreviewLink: string = '';\n\n /\n Event emitted when the component is initialized.\n /\n @Event() initListConfigurations!: EventEmitter<HTMLNylasListConfigurationsElement>;\n\n /\n Event emitted when the user clicks the create event button.\n /\n @Event() createButtonClick!: EventEmitter<HTMLNylasListConfigurationsElement>;\n\n /\n Event emitted when the user clicks the edit event button.\n /\n @Event() editButtonClick!: EventEmitter<{\n host: HTMLNylasListConfigurationsElement;\n configuration: Configuration;\n }>;\n\n /\n Event emitted when the user clicks the delete event button.\n /\n @Event() deleteButtonClick!: EventEmitter<{\n host: HTMLNylasListConfigurationsElement;\n configuration: Configuration;\n }>;\n\n /\n The current state of the component.\n /\n @State() private state: 'loading' \| 'loaded' \| 'error' = 'loading';\n\n /\n The error message to display.\n */\n @State() private error: string = '';\n\n connectedCallback() {\n debug('[nylas-list-configurations]', 'connectedCallback');\n }\n\n componentWillLoad() {\n debug('[nylas-list-configurations]', 'componentWillLoad');\n\n // If we have configurations, we will set the state to loaded.\n if (this.configurations && this.configurations.length > 0) {\n this.state = 'loaded';\n }\n }\n\n componentDidLoad() {\n debug('[nylas-list-configurations]', 'componentDidLoad');\n\n // Fire the init event. By default, we will fetch the configurations.\n // This is defined in the eventToProps object in the RegisterComponent decorator.\n this.initListConfigurations.emit(this.host);\n }\n\n disconnectedCallback() {\n debug('[nylas-list-configurations]', 'disconnectedCallback');\n }\n\n @Method()\n async getState() {\n return this.state;\n }\n\n @Method()\n async setState(state: 'loading' \| 'loaded' \| 'error') {\n this.state = state;\n }\n\n @Method()\n async setError(error: string) {\n this.error = error;\n }\n\n @RegisterComponent<NylasListConfigurations, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-list-configurations',\n stateToProps: new Map([['schedulerConfig.configurations', 'configurations']]),\n localPropsToProp: new Map([['schedulerPreviewLink', 'schedulerPreviewLink']]),\n eventToProps: {\n initListConfigurations: async (event, connector) => {\n const host = event.detail;\n await host.setState('loading');\n const [data, error] = await connector.schedulerConfig.getConfigurations();\n if (!data && error && error.message) {\n await host.setState('error');\n await host.setError(error.message);\n return;\n }\n await host.setState('loaded');\n },\n createButtonClick: async (_, connector) => {\n connector.schedulerConfigStore.resetSelectedConfiguration();\n connector.schedulerConfigStore.state.action = 'create';\n },\n deleteButtonClick: async (event, connector) => {\n const { host, configuration } = event.detail;\n const [data, error] = await connector.schedulerConfig.deleteConfiguration(configuration.id);\n if (!data && error && error.message) {\n await host.setState('error');\n await host.setError(error.message);\n }\n },\n editButtonClick: async (event, connector) => {\n const { configuration } = event.detail;\n connector.schedulerConfigStore.state.selectedConfiguration = configuration;\n connector.schedulerConfigStore.state.action = 'edit';\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host>\n <div class=\"header\">\n <div class=\"description\">\n <h2>All scheduling pages</h2>\n <p>Create, edit and manage all your scheduling pages.</p>\n </div>\n {this.configurations && this.configurations.length > 0 && (\n <div class=\"actions\">\n <button-component\n clickHandler={() => {\n this.createButtonClick.emit(this.host);\n }}\n >\n Create new\n </button-component>\n </div>\n )}\n </div>\n <div class=\"configurations\">\n <table>\n <tr\n class={{\n hide: this.state === 'loading' \|\| (this.configurations && this.configurations.length === 0),\n }}\n >\n <th>Scheduling page event title</th>\n <th>Duration</th>\n <th class=\"actions\">Actions</th>\n </tr>\n {this.state === 'loading' && (\n <tr class=\"no-configurations\">\n <td colSpan={3}>\n <div>\n <h3>Loading...</h3>\n <p>Please wait while we fetch the scheduling pages</p>\n </div>\n </td>\n </tr>\n )}\n {this.state !== 'loading' && (!this.configurations \|\| this.configurations.length === 0) && (\n <tr class=\"no-configurations\">\n <td colSpan={3}>\n <div>\n <calendar-icon width=\"48\" height=\"48\"></calendar-icon>\n <h3>No scheduling pages found</h3>\n <p>Get started with creating your first scheduling page</p>\n <button-component\n clickHandler={() => {\n this.createButtonClick.emit(this.host);\n }}\n >\n Create new\n </button-component>\n </div>\n </td>\n </tr>\n )}\n {this.state !== 'loading' &&\n this.configurations.map(config => (\n <tr key={config.id}>\n <td>\n <div class=\"title\">\n <span class={'config-event-title'}>{config.event_booking.title}</span>\n <span class={'config-event-description'}>{config.event_booking.description}</span>\n </div>\n </td>\n <td>\n <div>{config.availability.duration_minutes} mins</div>\n </td>\n <td>\n <div class=\"actions\">\n <button-component\n variant={'basic'}\n clickHandler={event => {\n event.preventDefault();\n window.open(parsePreviewLink(this.schedulerPreviewLink, config), '_blank');\n }}\n >\n Preview\n </button-component>\n <button-component\n variant={'basic'}\n clickHandler={event => {\n event.preventDefault();\n this.editButtonClick.emit({ host: this.host, configuration: config });\n }}\n >\n Edit\n </button-component>\n <button-component\n variant={'basic'}\n clickHandler={event => {\n event.preventDefault();\n this.deleteButtonClick.emit({ host: this.host, configuration: config });\n }}\n >\n Delete\n </button-component>\n </div>\n </td>\n </tr>\n ))}\n </table>\n </div>\n <div class=\"error-container\">\n <p class={'error'}>{this.state === 'error' && this.error}</p>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"nylas-list-configurations.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-list-configurations/nylas-list-configurations.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug, parsePreviewLink } from '@/utils/utils';\nimport { Component, Element, Event, EventEmitter, Host, Method, Prop, State, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration } from '@nylas/core';\n\n/*\n The `nylas-list-configurations` component displays a list of scheduling pages.\n /\n@Component({\n tag: 'nylas-list-configurations',\n styleUrl: 'nylas-list-configurations.scss',\n shadow: true,\n})\nexport class NylasListConfigurations {\n /\n The host element.\n /\n @Element() host!: HTMLNylasListConfigurationsElement;\n\n /\n The list of configurations to display.\n /\n @Prop() configurations: Configuration[] = [];\n\n /\n The scheduler preview link to use when the user clicks on the preview button.\n * You can use a placeholder `{config.id}` to replace the configuration id anywhere in the link.\n /\n @Prop({ attribute: 'scheduler-preview-link' }) schedulerPreviewLink: string = '';\n\n /\n Event emitted when the component is initialized.\n /\n @Event() initListConfigurations!: EventEmitter<HTMLNylasListConfigurationsElement>;\n\n /\n Event emitted when the user clicks the create event button.\n /\n @Event() createButtonClick!: EventEmitter<HTMLNylasListConfigurationsElement>;\n\n /\n Event emitted when the user clicks the edit event button.\n /\n @Event() editButtonClick!: EventEmitter<{\n host: HTMLNylasListConfigurationsElement;\n configuration: Configuration;\n }>;\n\n /\n Event emitted when the user clicks the delete event button.\n /\n @Event() deleteButtonClick!: EventEmitter<{\n host: HTMLNylasListConfigurationsElement;\n configuration: Configuration;\n }>;\n\n /\n The current state of the component.\n /\n @State() private state: 'loading' \| 'loaded' \| 'error' = 'loading';\n\n /\n The error message to display.\n */\n @State() private error: string = '';\n\n connectedCallback() {\n debug('[nylas-list-configurations]', 'connectedCallback');\n }\n\n componentWillLoad() {\n debug('[nylas-list-configurations]', 'componentWillLoad');\n\n // If we have configurations, we will set the state to loaded.\n if (this.configurations && this.configurations.length > 0) {\n this.state = 'loaded';\n }\n }\n\n componentDidLoad() {\n debug('[nylas-list-configurations]', 'componentDidLoad');\n\n // Fire the init event. By default, we will fetch the configurations.\n // This is defined in the eventToProps object in the RegisterComponent decorator.\n this.initListConfigurations.emit(this.host);\n }\n\n disconnectedCallback() {\n debug('[nylas-list-configurations]', 'disconnectedCallback');\n }\n\n @Method()\n async getState() {\n return this.state;\n }\n\n @Method()\n async setState(state: 'loading' \| 'loaded' \| 'error') {\n this.state = state;\n }\n\n @Method()\n async setError(error: string) {\n this.error = error;\n }\n\n @RegisterComponent<NylasListConfigurations, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-list-configurations',\n stateToProps: new Map([['schedulerConfig.configurations', 'configurations']]),\n localPropsToProp: new Map([['schedulerPreviewLink', 'schedulerPreviewLink']]),\n eventToProps: {\n initListConfigurations: async (event, connector) => {\n const host = event.detail;\n await host.setState('loading');\n const [data, error] = await connector.schedulerConfig.getConfigurations();\n if (!data && error && error.message) {\n await host.setState('error');\n await host.setError(error.message);\n return;\n }\n await host.setState('loaded');\n },\n createButtonClick: async (_, connector) => {\n connector.schedulerConfigStore.resetSelectedConfiguration();\n connector.schedulerConfigStore.state.action = 'create';\n },\n deleteButtonClick: async (event, connector) => {\n const { host, configuration } = event.detail;\n const [data, error] = await connector.schedulerConfig.deleteConfiguration(configuration.id);\n if (!data && error && error.message) {\n await host.setState('error');\n await host.setError(error.message);\n }\n },\n editButtonClick: async (event, connector) => {\n const { configuration } = event.detail;\n connector.schedulerConfigStore.state.selectedConfiguration = configuration;\n connector.schedulerConfigStore.state.action = 'edit';\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host>\n <div class=\"header\">\n <div class=\"description\">\n <h2>All scheduling pages</h2>\n <p>Create, edit and manage all your scheduling pages.</p>\n </div>\n {this.configurations && this.configurations.length > 0 && (\n <div class=\"actions\">\n <button-component\n clickHandler={() => {\n this.createButtonClick.emit(this.host);\n }}\n >\n Create new\n </button-component>\n </div>\n )}\n </div>\n <div class=\"configurations\">\n <table\n class={{\n 'no-configurations': this.state !== 'loading' && (!this.configurations \|\| this.configurations.length === 0),\n }}\n >\n <tr\n class={{\n hide: this.state === 'loading' \|\| (this.configurations && this.configurations.length === 0),\n }}\n >\n <th>Scheduling page event title</th>\n <th>Duration</th>\n <th class=\"actions-header\">Actions</th>\n </tr>\n {this.state === 'loading' && (\n <tr class=\"no-configurations\">\n <td colSpan={3}>\n <div>\n <h3>Loading...</h3>\n <p>Please wait while we fetch the scheduling pages</p>\n </div>\n </td>\n </tr>\n )}\n {this.state !== 'loading' && (!this.configurations \|\| this.configurations.length === 0) && (\n <tr class=\"no-configurations\">\n <td colSpan={3}>\n <div>\n <calendar-icon width=\"48\" height=\"48\"></calendar-icon>\n <h3>No scheduling pages found</h3>\n <p>Get started with creating your first scheduling page</p>\n <button-component\n clickHandler={() => {\n this.createButtonClick.emit(this.host);\n }}\n >\n Create new\n </button-component>\n </div>\n </td>\n </tr>\n )}\n {this.state !== 'loading' &&\n this.configurations.map(config => (\n <tr key={config.id}>\n <td>\n <div class=\"title\">\n <span class={'config-event-title'}>{config.event_booking.title}</span>\n <span class={'config-event-description'}>{config.event_booking.description}</span>\n </div>\n </td>\n <td>\n <div>{config.availability.duration_minutes} mins</div>\n </td>\n <td>\n <div class=\"actions\">\n <button-component\n variant={'basic'}\n clickHandler={event => {\n event.preventDefault();\n window.open(parsePreviewLink(this.schedulerPreviewLink, config), '_blank');\n }}\n >\n Preview\n </button-component>\n <button-component\n variant={'basic'}\n clickHandler={event => {\n event.preventDefault();\n this.editButtonClick.emit({ host: this.host, configuration: config });\n }}\n >\n Edit\n </button-component>\n <button-component\n variant={'basic'}\n clickHandler={event => {\n event.preventDefault();\n this.deleteButtonClick.emit({ host: this.host, configuration: config });\n }}\n >\n Delete\n </button-component>\n </div>\n </td>\n </tr>\n ))}\n </table>\n </div>\n {this.state === 'error' && (\n <div class=\"error-container\">\n <p class={'error'}>{this.error}</p>\n </div>\n )}\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/scheduler-editor/nylas-location-component/nylas-location-component.css CHANGED Viewed

@@ -59,6 +59,11 @@
   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);

package/dist/collection/components/scheduler-editor/nylas-min-cancellation-notice/nylas-min-cancellation-notice.css CHANGED Viewed

@@ -29,11 +29,17 @@
   justify-content: space-between;
   font-family: var(--nylas-font-family);
 }
+@media screen and (max-width: 768px) {
+  .nylas-min-cancellation-notice {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+}
 .nylas-min-cancellation-notice label {
   display: flex;
   align-items: center;
   color: var(--nylas-base-800);
-  font-size: 14px;
+  font-size: 16px;
   font-style: normal;
   font-weight: 400;
   line-height: 150%; /* 21px */

package/dist/collection/components/scheduler-editor/nylas-scheduler-editor/nylas-scheduler-editor.css CHANGED Viewed

@@ -96,11 +96,19 @@ nylas-editor-tabs nylas-event-limits div[slot=inputs] {
 }
 .login-required {
+  height: 554px;
+  overflow-y: auto;
   display: flex;
   flex-direction: column;
+  justify-content: center;
   padding: 2rem 1rem;
   background-color: var(--nylas-base-25);
 }
+@media screen and (max-width: 768px) {
+  .login-required {
+    height: auto;
+  }
+}
 .login-required p {
   margin: 0 0 1rem;
 }
@@ -169,4 +177,16 @@ nylas-editor-tabs nylas-event-limits div[slot=inputs] {
 .list-configurations {
   padding: 2rem;
+  height: 554px;
+  background: var(--nylas-base-25);
+}
+@media screen and (max-width: 768px) {
+  .list-configurations {
+    height: auto;
+  }
+}
+.list-configurations nylas-list-configurations {
+  height: inherit;
+  display: flex;
+  flex-direction: column;
 }

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

@@ -26,7 +26,7 @@ export class NylasSchedulerEditor {
         this.defaultAuthArgs = undefined;
         this.eventOverrides = {};
         this.schedulerPreviewLink = '';
-        this.defaultSchedulerConfigStoreState = undefined;
+        this.defaultSchedulerConfigState = undefined;
         this.mode = 'app';
         this.automaticComponentRegistration = true;
     }
@@ -37,10 +37,9 @@ export class NylasSchedulerEditor {
         debug(`[nylas-scheduler-editor] componentWillLoad`);
         this.stores = {
             schedulerConfig: CreateNylasSchedulerConfigStore({
-                ...this.defaultSchedulerConfigStoreState,
+                ...this.defaultSchedulerConfigState,
             }),
         };
-        this.stores?.schedulerConfig?.set('defaultRequiresSessionAuth', this.defaultRequiresSessionAuth);
         if (!this.nylasApiRequest && this.nylasSessionsConfig) {
             const nylasSession = new NylasSessions(this.nylasSessionsConfig);
             await nylasSession.isLoggedIn();
@@ -92,9 +91,6 @@ export class NylasSchedulerEditor {
     componentDisconnected() {
         this.baseProvider?.componentDisconnected();
     }
-    defaultRequiresSessionAuthChanged(newRequireSessionAuth) {
-        this.stores?.schedulerConfig?.set('defaultRequiresSessionAuth', newRequireSessionAuth);
-    }
     async configurationIdChanged(newConfigurationId) {
         if (newConfigurationId) {
             await this.nylasSchedulerConfigConnector?.schedulerConfig?.getConfigurationById(newConfigurationId);
@@ -128,7 +124,7 @@ export class NylasSchedulerEditor {
         await this.nylasSchedulerConfigConnector.schedulerConfig?.getCalendars();
     }
     render() {
-        return (h(Host, { key: '14880638bcb9c031f748d72fe0052b6eb0df463d' }, h("div", { key: 'f0ee0e9a97eddbd350dfc41469257475e6178e3d', class: "scheduler-editor-header", part: "nse__header" }, h("h1", { key: 'eb85113f9650853bb6f3f348e6517ba83112f28f', class: "scheduler-editor-title", part: "nse__title" }, h("calendar-icon", { key: '48e6edb5828fbdb111a3360a5c49ef762008c69a', width: "18", height: "18" }), "Scheduler editor"), h("button", { key: 'f3d02137c2a999e6305b20b6735efc77370a6a83', class: "scheduler-editor-close", onClick: e => this.handleSchedulerConfigCloseClicked(e), part: "nse__close-button" }, h("close-icon", { key: '05280d7af113731d30b659d9de308b23aa3ea014', width: "18", height: "18" }))), this.stores?.schedulerConfig?.state.currentUser && this.stores.schedulerConfig.state.action === null && (h("div", { class: "list-configurations" }, h("nylas-list-configurations", null))), this.stores?.schedulerConfig?.state.currentUser && this.stores.schedulerConfig.state.action === 'create' && (h("nylas-editor-tabs", { mode: "composable" }, h("nylas-event-info", null, h("div", { slot: "inputs" }, h("nylas-event-title", null), h("nylas-event-duration", null), h("nylas-location-component", null))), h("nylas-booking-calendar-picker", null))), this.stores?.schedulerConfig?.state.currentUser && this.stores.schedulerConfig.state.action === 'edit' && (h("nylas-editor-tabs", { mode: this.mode }, this.mode === 'composable' && h("slot", null))), !this.stores?.schedulerConfig?.state.currentUser && (h("slot", { name: "login-required" }, h(LoginRequired, { authenticationUrl: this.authenticationUrl })))));
+        return (h(Host, { key: '5eacdea0c9cce3941dbcc80668d79bd78ab51e53' }, h("div", { key: 'f17745ecf7c21920a7d6b20bca0ec840d3b26925', class: "scheduler-editor-header", part: "nse__header" }, h("h1", { key: 'bd6ab00923b3f4d913e346aded89982bcc002b9f', class: "scheduler-editor-title", part: "nse__title" }, h("calendar-icon", { key: '8755a2e5fde1d94c87f7ae487ffc16981ec3a844', width: "18", height: "18" }), "Scheduler editor"), h("button", { key: '80e55094ce9da9ece1f6e62d2ca4892c0cc6ee7e', class: "scheduler-editor-close", onClick: e => this.handleSchedulerConfigCloseClicked(e), part: "nse__close-button" }, h("close-icon", { key: '8aa07ef7733444d32d38a7e5d9e6d3d61f226331', width: "18", height: "18" }))), this.stores?.schedulerConfig?.state.currentUser && this.stores.schedulerConfig.state.action === null && (h("div", { class: "list-configurations" }, h("nylas-list-configurations", null))), this.stores?.schedulerConfig?.state.currentUser && this.stores.schedulerConfig.state.action === 'create' && (h("nylas-editor-tabs", { mode: "composable" }, h("nylas-event-info", null, h("div", { slot: "inputs" }, h("nylas-event-title", null), h("nylas-event-duration", null), h("nylas-location-component", null))), h("nylas-booking-calendar-picker", null))), this.stores?.schedulerConfig?.state.currentUser && this.stores.schedulerConfig.state.action === 'edit' && (h("nylas-editor-tabs", { mode: this.mode }, this.mode === 'composable' && h("slot", null))), !this.stores?.schedulerConfig?.state.currentUser && (h("slot", { name: "login-required" }, h(LoginRequired, { authenticationUrl: this.authenticationUrl })))));
     }
     static get is() { return "nylas-scheduler-editor"; }
     static get encapsulation() { return "shadow"; }
@@ -146,7 +142,7 @@ export class NylasSchedulerEditor {
         return {
             "defaultRequiresSessionAuth": {
                 "type": "boolean",
-                "mutable": true,
+                "mutable": false,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -282,12 +278,12 @@ export class NylasSchedulerEditor {
                 "reflect": false,
                 "defaultValue": "''"
             },
-            "defaultSchedulerConfigStoreState": {
+            "defaultSchedulerConfigState": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
                     "original": "Partial<NylasSchedulerConfigStoreState>",
-                    "resolved": "undefined | { selectedConfiguration?: Partial<Configuration> | undefined; configurations?: Configuration[] | undefined; calendars?: Calendar[] | undefined; currentUser?: User | null | undefined; action?: \"create\" | \"edit\" | null | undefined; defaultRequiresSessionAuth?: boolean | undefined; }",
+                    "resolved": "undefined | { selectedConfiguration?: Partial<Configuration> | undefined; configurations?: Configuration[] | undefined; calendars?: Calendar[] | undefined; currentUser?: User | null | undefined; action?: \"create\" | \"edit\" | null | undefined; }",
                     "references": {
                         "Partial": {
                             "location": "global",
@@ -472,9 +468,6 @@ export class NylasSchedulerEditor {
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{
-                "propName": "defaultRequiresSessionAuth",
-                "methodName": "defaultRequiresSessionAuthChanged"
-            }, {
                 "propName": "configurationId",
                 "methodName": "configurationIdChanged"
             }];