@nylas/web-elements 0.0.0-canary-20241017202051 → 0.0.0-canary-20241017220933
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.
- package/dist/cdn/nylas-editor-tabs/nylas-editor-tabs.es.js +6 -3
- package/dist/cdn/nylas-event-title/nylas-event-title.es.js +6 -3
- package/dist/cdn/nylas-scheduler-editor/nylas-scheduler-editor.es.js +6 -3
- package/dist/cjs/calendar-agenda-fill-icon_54.cjs.entry.js +9 -6
- package/dist/cjs/calendar-agenda-fill-icon_54.cjs.entry.js.map +1 -1
- package/dist/collection/components/scheduler-editor/nylas-event-title/nylas-event-title.js +9 -6
- package/dist/collection/components/scheduler-editor/nylas-event-title/nylas-event-title.js.map +1 -1
- package/dist/collection/components/scheduler-editor/nylas-event-title/test/nylas-event-title.spec.js +24 -0
- package/dist/collection/components/scheduler-editor/nylas-event-title/test/nylas-event-title.spec.js.map +1 -1
- package/dist/components/nylas-event-title2.js +9 -6
- package/dist/components/nylas-event-title2.js.map +1 -1
- package/dist/esm/calendar-agenda-fill-icon_54.entry.js +9 -6
- package/dist/esm/calendar-agenda-fill-icon_54.entry.js.map +1 -1
- package/dist/nylas-web-elements/nylas-web-elements.esm.js +1 -1
- package/dist/nylas-web-elements/{p-1ce8b1c3.entry.js → p-d586ff14.entry.js} +2 -2
- package/dist/nylas-web-elements/{p-1ce8b1c3.entry.js.map → p-d586ff14.entry.js.map} +1 -1
- package/dist/types/components/scheduler-editor/nylas-event-title/nylas-event-title.d.ts +1 -0
- package/package.json +1 -1
|
@@ -293,17 +293,20 @@ export class NylasEventTitle {
|
|
|
293
293
|
this.ariaActivedescendant = this.filteredTokens[0].label;
|
|
294
294
|
}
|
|
295
295
|
}
|
|
296
|
+
get isInternalsAvailable() {
|
|
297
|
+
return typeof this.internals !== 'undefined' && typeof this.internals.setValidity === 'function' && typeof this.internals.setFormValue === 'function';
|
|
298
|
+
}
|
|
296
299
|
updateEventTitle(text) {
|
|
297
300
|
const value = text.replace(/ +/g, ' ');
|
|
298
|
-
if (value === '') {
|
|
299
|
-
this.internals?.setValidity({ customError: true }, `Event title is required`, this.titleRef);
|
|
301
|
+
if (value === '' || /^[\s]*$/.test(value)) {
|
|
300
302
|
this.validationError = 'Event title is required';
|
|
303
|
+
this.isInternalsAvailable && this.internals?.setValidity({ customError: true }, `Event title is required`, this.titleRef);
|
|
301
304
|
}
|
|
302
305
|
else {
|
|
303
|
-
this.internals?.setValidity({ customError: false });
|
|
304
306
|
this.validationError = '';
|
|
307
|
+
this.isInternalsAvailable && this.internals?.setValidity({ customError: false });
|
|
305
308
|
}
|
|
306
|
-
this.internals?.setFormValue(value, this.name);
|
|
309
|
+
this.isInternalsAvailable && this.internals?.setFormValue(value, this.name);
|
|
307
310
|
this.valueChanged.emit({ value: value, name: this.name });
|
|
308
311
|
}
|
|
309
312
|
resetDropdown() {
|
|
@@ -314,10 +317,10 @@ export class NylasEventTitle {
|
|
|
314
317
|
return (h("div", { class: "token-label" }, h("span", { class: "token" }, token.token), h("span", { class: "description" }, token.description)));
|
|
315
318
|
}
|
|
316
319
|
render() {
|
|
317
|
-
return (h(Host, { key: '
|
|
320
|
+
return (h(Host, { key: 'c9bef753b69793b6db0569ec750a04ceb4a51de8' }, h("div", { key: 'b80559c8ebe73437fbd347a034fa577c0ee4a60b', class: "nylas-event-title", part: "net" }, h("label", { key: 'c8b911bdfd24a7934b8359d5ba9a2531edc606c1', htmlFor: "title" }, "Event title", h("span", { key: '953b07bae8f6ebbcc465cc3349b6b97ecf8cd544', class: "required" }, "*")), h("div", { key: 'cbc5559de86b4c3a45c30088fba3d2a3382b4311', class: {
|
|
318
321
|
title: true,
|
|
319
322
|
error: this.validationError !== '',
|
|
320
|
-
}, 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: '
|
|
323
|
+
}, 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: 'cddf49a23d611b00b5a06a431bb6033ee564fba6', class: "help-text" }, "Create a dynamic templated event title by typing ", h("code", { key: 'b87cf9d630645aedf2c72bb7356ce8737406c127' }, "$"), " and selecting a template item.", h("span", { key: '75ad5946a822c3ee23ddb46f29b611dd68875d05', class: "label-icon" }, h("tooltip-component", { key: '20a6fb4aaac4d1ad5264d30364fc695de7f0ca11' }, h("info-icon", { key: '22413e474fd5113bfa3663d137a67cd2da94268f', slot: "tooltip-icon" }), h("span", { key: 'f266824868c09cf41564fe1fcbc42e9113bf06fb', slot: "tooltip-content" }, "For example, Interview with ", h("code", { key: '0989a865eb48e0a0363ec69218be46ab7d6f18f1' }, '${invitee}'))))), this.validationError != '' && h("span", { class: "error-message" }, this.validationError))));
|
|
321
324
|
}
|
|
322
325
|
static get is() { return "nylas-event-title"; }
|
|
323
326
|
static get encapsulation() { return "shadow"; }
|
package/dist/collection/components/scheduler-editor/nylas-event-title/nylas-event-title.js.map
CHANGED
|
@@ -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, isNonPrintableKey, sanitize } 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 * @standalone\n * The selected config\n */\n @Prop() selectedConfiguration?: Configuration;\n /**\n * @standalone\n * The title of the event from the cofiguration.\n */\n @Prop() eventTitle?: string = this.selectedConfiguration?.event_booking?.title;\n /**\n * @standalone\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 @State() configEventTitle: 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 this.configEventTitle = 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 if (this.selectedConfiguration) {\n this.eventTitle = this.selectedConfiguration?.event_booking?.title;\n }\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 const title = newValue || this.configEventTitle;\n if (this.titleRef) {\n this.titleRef.innerHTML = this.highlightTokens(title);\n this.titleRef.focus();\n if (typeof this.internals.setValidity === 'function') {\n if (!title || title === '') {\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 = sanitize(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 const parentNode = selection?.node?.parentNode;\n if (selection?.currentText.startsWith('${') && parentNode) {\n event.preventDefault();\n parentNode.removeChild(selection.node);\n parentNode.remove();\n this.resetDropdown();\n }\n if (this.titleRef.textContent === '' || selection?.allSelected) {\n this.titleRef.innerHTML = '';\n this.updateEventTitle('');\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 </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\">\n Create a dynamic templated event title by typing <code>$</code> and selecting a template item.\n <span class=\"label-icon\">\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">\n For example, Interview with <code>{'${invitee}'}</code>\n </span>\n </tooltip-component>\n </span>\n </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, sanitize } 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 * @standalone\n * The selected config\n */\n @Prop() selectedConfiguration?: Configuration;\n /**\n * @standalone\n * The title of the event from the cofiguration.\n */\n @Prop() eventTitle?: string = this.selectedConfiguration?.event_booking?.title;\n /**\n * @standalone\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 @State() configEventTitle: 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 this.configEventTitle = 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 if (this.selectedConfiguration) {\n this.eventTitle = this.selectedConfiguration?.event_booking?.title;\n }\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 const title = newValue || this.configEventTitle;\n if (this.titleRef) {\n this.titleRef.innerHTML = this.highlightTokens(title);\n this.titleRef.focus();\n if (typeof this.internals.setValidity === 'function') {\n if (!title || title === '') {\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 = sanitize(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 const parentNode = selection?.node?.parentNode;\n if (selection?.currentText.startsWith('${') && parentNode) {\n event.preventDefault();\n parentNode.removeChild(selection.node);\n parentNode.remove();\n this.resetDropdown();\n }\n if (this.titleRef.textContent === '' || selection?.allSelected) {\n this.titleRef.innerHTML = '';\n this.updateEventTitle('');\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 get isInternalsAvailable() {\n return typeof this.internals !== 'undefined' && typeof this.internals.setValidity === 'function' && typeof this.internals.setFormValue === 'function';\n }\n\n updateEventTitle(text: string) {\n const value = text.replace(/ +/g, ' ');\n if (value === '' || /^[\\s]*$/.test(value)) {\n this.validationError = 'Event title is required';\n this.isInternalsAvailable && this.internals?.setValidity({ customError: true }, `Event title is required`, this.titleRef);\n } else {\n this.validationError = '';\n this.isInternalsAvailable && this.internals?.setValidity({ customError: false });\n }\n this.isInternalsAvailable && 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 </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\">\n Create a dynamic templated event title by typing <code>$</code> and selecting a template item.\n <span class=\"label-icon\">\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">\n For example, Interview with <code>{'${invitee}'}</code>\n </span>\n </tooltip-component>\n </span>\n </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-event-title/test/nylas-event-title.spec.js
CHANGED
|
@@ -85,5 +85,29 @@ describe('nylas-event-title', () => {
|
|
|
85
85
|
const dropdown = page.root.shadowRoot.querySelector('.token-options');
|
|
86
86
|
expect(dropdown).not.toBeNull();
|
|
87
87
|
});
|
|
88
|
+
it('renders error if title is empty or only contains whitespace', async () => {
|
|
89
|
+
const contentEditable = page.root.shadowRoot.querySelector('.title');
|
|
90
|
+
expect(getBrowser()).toBe('Chrome');
|
|
91
|
+
page.root.shadowRoot.getSelection = jest.fn().mockReturnValue({
|
|
92
|
+
focusOffset: 1,
|
|
93
|
+
focusNode: {
|
|
94
|
+
data: '$',
|
|
95
|
+
nodeValue: '$',
|
|
96
|
+
},
|
|
97
|
+
});
|
|
98
|
+
await page.waitForChanges();
|
|
99
|
+
const inputEvent = new Event('input', { bubbles: true, cancelable: true });
|
|
100
|
+
contentEditable.focus();
|
|
101
|
+
contentEditable.textContent = ' ';
|
|
102
|
+
contentEditable.dispatchEvent({
|
|
103
|
+
...inputEvent,
|
|
104
|
+
target: {
|
|
105
|
+
textContent: ' ',
|
|
106
|
+
},
|
|
107
|
+
});
|
|
108
|
+
await page.waitForChanges();
|
|
109
|
+
expect(page.root).toMatchSnapshot();
|
|
110
|
+
expect(contentEditable.classList.contains('error')).toBeTruthy();
|
|
111
|
+
});
|
|
88
112
|
});
|
|
89
113
|
//# sourceMappingURL=nylas-event-title.spec.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nylas-event-title.spec.js","sourceRoot":"","sources":["../../../../../src/components/scheduler-editor/nylas-event-title/test/nylas-event-title.spec.tsx"],"names":[],"mappings":"AAAA,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,GAAG,EAAE,CAAC,CAAC;IAChC,GAAG,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC;IACtC,UAAU,EAAE,IAAI,CAAC,EAAE,EAAE;CACtB,CAAC,CAAC,CAAC;AAEJ,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,MAAM,KAAK,GAAG,8CAA8C,CAAC;AAE7D,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;IACjC,IAAI,mBAAmB,CAAC;IACxB,IAAI,IAAS,CAAC;IAEd,SAAS,CAAC,GAAG,EAAE;QAEb,mBAAmB,GAAG,MAAM,CAAC,QAAQ,CAAC,WAAW,CAAC;QAGlD,MAAM,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC,kBAAkB,CAAC,GAAG,EAAE;YAC9D,OAAO;gBAEL,QAAQ,EAAE,IAAI,CAAC,EAAE,EAAE;gBACnB,MAAM,EAAE,IAAI,CAAC,EAAE,EAAE;gBACjB,uBAAuB,EAAE;oBACvB,QAAQ,EAAE,MAAM;oBAChB,aAAa,EAAE,QAAQ;iBACxB;aAEF,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IACH,QAAQ,CAAC,GAAG,EAAE;QAEZ,MAAM,CAAC,QAAQ,CAAC,WAAW,GAAG,mBAAmB,CAAC;IACpD,CAAC,CAAC,CAAC;IAEH,UAAU,CAAC,KAAK,IAAI,EAAE;QACpB,IAAI,CAAC,aAAa,EAAE,CAAC;QACpB,UAAwB,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;QAEpD,IAAI,GAAG,MAAM,WAAW,CAAC;YACvB,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,QAAQ,EAAE,GAAG,EAAE;gBACb,OAAO,yBAAmB,IAAI,EAAC,YAAY,EAAC,UAAU,EAAE,KAAK,GAAI,CAAC;YACpE,CAAC;SACF,CAAC,CAAC;QACH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC9B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;QAC7B,MAAM,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACrE,MAAM,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAClD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qCAAqC,EAAE,KAAK,IAAI,EAAE;QACnD,MAAM,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACrE,MAAM,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,wHAAwH,CAAC,CAAC;IACxK,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;QACjD,MAAM,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACrE,MAAM,UAAU,GAAG,IAAI,KAAK,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;QAE3E,eAAe,CAAC,WAAW,GAAG,WAAW,CAAC;QAC1C,eAAe,CAAC,aAAa,CAAC;YAC5B,GAAG,UAAU;YACb,MAAM,EAAE;gBACN,WAAW,EAAE,WAAW;aACzB;SACF,CAAC,CAAC;QAEH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IACxD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2BAA2B,EAAE,KAAK,IAAI,EAAE;QACzC,MAAM,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACrE,MAAM,CAAC,UAAU,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACpC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,YAAY,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC;YAC5D,WAAW,EAAE,CAAC;YACd,SAAS,EAAE;gBACT,IAAI,EAAE,GAAG;gBACT,SAAS,EAAE,GAAG;aACf;SACF,CAAC,CAAC;QACH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,UAAU,GAAG,IAAI,KAAK,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;QAE3E,eAAe,CAAC,KAAK,EAAE,CAAC;QACxB,eAAe,CAAC,WAAW,GAAG,GAAG,CAAC;QAClC,eAAe,CAAC,aAAa,CAAC;YAC5B,GAAG,UAAU;YACb,MAAM,EAAE;gBACN,WAAW,EAAE,GAAG;aACjB;SACF,CAAC,CAAC;QAEH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QACtE,MAAM,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;IAClC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["jest.mock('@/utils/utils', () => ({\n ...jest.requireActual('@/utils/utils'), // This will preserve other exports from the module\n getBrowser: jest.fn(),\n}));\n\nimport { newSpecPage } from '@stencil/core/testing';\nimport { NylasEventTitle } from '../nylas-event-title';\nimport { h } from '@stencil/core';\nimport { getBrowser } from '@/utils/utils';\n\nconst title = 'Meet with ${invitee} for ${duration} minutes';\n\ndescribe('nylas-event-title', () => {\n let originalCreateRange;\n let page: any;\n\n beforeAll(() => {\n // Save the original document.createRange function if it exists\n originalCreateRange = window.document.createRange;\n\n // Mock document.createRange\n window.document.createRange = jest.fn().mockImplementation(() => {\n return {\n // Mock the methods of the Range object you use in your component\n setStart: jest.fn(),\n setEnd: jest.fn(),\n commonAncestorContainer: {\n nodeName: 'BODY',\n ownerDocument: document,\n },\n // Add any other Range methods needed by your component\n };\n });\n });\n afterAll(() => {\n // Restore the original document.createRange function\n window.document.createRange = originalCreateRange;\n });\n\n beforeEach(async () => {\n jest.clearAllMocks();\n (getBrowser as jest.Mock).mockReturnValue('Chrome');\n\n page = await newSpecPage({\n components: [NylasEventTitle],\n template: () => {\n return <nylas-event-title name=\"eventTitle\" eventTitle={title} />;\n },\n });\n await page.waitForChanges();\n });\n\n it('renders', async () => {\n expect(page.root).toMatchSnapshot();\n });\n\n it('renders title', async () => {\n const contentEditable = page.root.shadowRoot.querySelector('.title');\n expect(contentEditable.textContent).toBe(title);\n });\n\n it('renders title with highlighted text', async () => {\n const contentEditable = page.root.shadowRoot.querySelector('.title');\n expect(contentEditable.innerHTML).toContain('Meet with <span class=\"highlighted-tag\">${invitee}</span> for <span class=\"highlighted-tag\">${duration}</span> minutes');\n });\n\n it('handles input in content editable', async () => {\n const contentEditable = page.root.shadowRoot.querySelector('.title');\n const inputEvent = new Event('input', { bubbles: true, cancelable: true });\n\n contentEditable.textContent = 'New input';\n contentEditable.dispatchEvent({\n ...inputEvent,\n target: {\n textContent: 'New input',\n },\n });\n\n await page.waitForChanges();\n expect(contentEditable.textContent).toBe('New input');\n });\n\n it('open dropdown on typing $', async () => {\n const contentEditable = page.root.shadowRoot.querySelector('.title');\n expect(getBrowser()).toBe('Chrome');\n page.root.shadowRoot.getSelection = jest.fn().mockReturnValue({\n focusOffset: 1,\n focusNode: {\n data: '$',\n nodeValue: '$',\n },\n });\n await page.waitForChanges();\n const inputEvent = new Event('input', { bubbles: true, cancelable: true });\n\n contentEditable.focus();\n contentEditable.textContent = '$';\n contentEditable.dispatchEvent({\n ...inputEvent,\n target: {\n textContent: '$',\n },\n });\n\n await page.waitForChanges();\n const dropdown = page.root.shadowRoot.querySelector('.token-options');\n expect(dropdown).not.toBeNull();\n });\n});\n"]}
|
|
1
|
+
{"version":3,"file":"nylas-event-title.spec.js","sourceRoot":"","sources":["../../../../../src/components/scheduler-editor/nylas-event-title/test/nylas-event-title.spec.tsx"],"names":[],"mappings":"AAAA,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,GAAG,EAAE,CAAC,CAAC;IAChC,GAAG,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC;IACtC,UAAU,EAAE,IAAI,CAAC,EAAE,EAAE;CACtB,CAAC,CAAC,CAAC;AAEJ,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,MAAM,KAAK,GAAG,8CAA8C,CAAC;AAE7D,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;IACjC,IAAI,mBAAmB,CAAC;IACxB,IAAI,IAAS,CAAC;IAEd,SAAS,CAAC,GAAG,EAAE;QAEb,mBAAmB,GAAG,MAAM,CAAC,QAAQ,CAAC,WAAW,CAAC;QAGlD,MAAM,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC,kBAAkB,CAAC,GAAG,EAAE;YAC9D,OAAO;gBAEL,QAAQ,EAAE,IAAI,CAAC,EAAE,EAAE;gBACnB,MAAM,EAAE,IAAI,CAAC,EAAE,EAAE;gBACjB,uBAAuB,EAAE;oBACvB,QAAQ,EAAE,MAAM;oBAChB,aAAa,EAAE,QAAQ;iBACxB;aAEF,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IACH,QAAQ,CAAC,GAAG,EAAE;QAEZ,MAAM,CAAC,QAAQ,CAAC,WAAW,GAAG,mBAAmB,CAAC;IACpD,CAAC,CAAC,CAAC;IAEH,UAAU,CAAC,KAAK,IAAI,EAAE;QACpB,IAAI,CAAC,aAAa,EAAE,CAAC;QACpB,UAAwB,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;QAEpD,IAAI,GAAG,MAAM,WAAW,CAAC;YACvB,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,QAAQ,EAAE,GAAG,EAAE;gBACb,OAAO,yBAAmB,IAAI,EAAC,YAAY,EAAC,UAAU,EAAE,KAAK,GAAI,CAAC;YACpE,CAAC;SACF,CAAC,CAAC;QACH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC9B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;QAC7B,MAAM,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACrE,MAAM,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAClD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qCAAqC,EAAE,KAAK,IAAI,EAAE;QACnD,MAAM,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACrE,MAAM,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,wHAAwH,CAAC,CAAC;IACxK,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;QACjD,MAAM,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACrE,MAAM,UAAU,GAAG,IAAI,KAAK,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;QAE3E,eAAe,CAAC,WAAW,GAAG,WAAW,CAAC;QAC1C,eAAe,CAAC,aAAa,CAAC;YAC5B,GAAG,UAAU;YACb,MAAM,EAAE;gBACN,WAAW,EAAE,WAAW;aACzB;SACF,CAAC,CAAC;QAEH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IACxD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2BAA2B,EAAE,KAAK,IAAI,EAAE;QACzC,MAAM,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACrE,MAAM,CAAC,UAAU,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACpC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,YAAY,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC;YAC5D,WAAW,EAAE,CAAC;YACd,SAAS,EAAE;gBACT,IAAI,EAAE,GAAG;gBACT,SAAS,EAAE,GAAG;aACf;SACF,CAAC,CAAC;QACH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,UAAU,GAAG,IAAI,KAAK,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;QAE3E,eAAe,CAAC,KAAK,EAAE,CAAC;QACxB,eAAe,CAAC,WAAW,GAAG,GAAG,CAAC;QAClC,eAAe,CAAC,aAAa,CAAC;YAC5B,GAAG,UAAU;YACb,MAAM,EAAE;gBACN,WAAW,EAAE,GAAG;aACjB;SACF,CAAC,CAAC;QAEH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QACtE,MAAM,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;IAClC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6DAA6D,EAAE,KAAK,IAAI,EAAE;QAC3E,MAAM,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACrE,MAAM,CAAC,UAAU,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACpC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,YAAY,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC;YAC5D,WAAW,EAAE,CAAC;YACd,SAAS,EAAE;gBACT,IAAI,EAAE,GAAG;gBACT,SAAS,EAAE,GAAG;aACf;SACF,CAAC,CAAC;QACH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,UAAU,GAAG,IAAI,KAAK,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;QAE3E,eAAe,CAAC,KAAK,EAAE,CAAC;QACxB,eAAe,CAAC,WAAW,GAAG,IAAI,CAAC;QACnC,eAAe,CAAC,aAAa,CAAC;YAC5B,GAAG,UAAU;YACb,MAAM,EAAE;gBACN,WAAW,EAAE,IAAI;aAClB;SACF,CAAC,CAAC;QACH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;QACpC,MAAM,CAAC,eAAe,CAAC,SAAS,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC;IACnE,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["jest.mock('@/utils/utils', () => ({\n ...jest.requireActual('@/utils/utils'), // This will preserve other exports from the module\n getBrowser: jest.fn(),\n}));\n\nimport { newSpecPage } from '@stencil/core/testing';\nimport { NylasEventTitle } from '../nylas-event-title';\nimport { h } from '@stencil/core';\nimport { getBrowser } from '@/utils/utils';\n\nconst title = 'Meet with ${invitee} for ${duration} minutes';\n\ndescribe('nylas-event-title', () => {\n let originalCreateRange;\n let page: any;\n\n beforeAll(() => {\n // Save the original document.createRange function if it exists\n originalCreateRange = window.document.createRange;\n\n // Mock document.createRange\n window.document.createRange = jest.fn().mockImplementation(() => {\n return {\n // Mock the methods of the Range object you use in your component\n setStart: jest.fn(),\n setEnd: jest.fn(),\n commonAncestorContainer: {\n nodeName: 'BODY',\n ownerDocument: document,\n },\n // Add any other Range methods needed by your component\n };\n });\n });\n afterAll(() => {\n // Restore the original document.createRange function\n window.document.createRange = originalCreateRange;\n });\n\n beforeEach(async () => {\n jest.clearAllMocks();\n (getBrowser as jest.Mock).mockReturnValue('Chrome');\n\n page = await newSpecPage({\n components: [NylasEventTitle],\n template: () => {\n return <nylas-event-title name=\"eventTitle\" eventTitle={title} />;\n },\n });\n await page.waitForChanges();\n });\n\n it('renders', async () => {\n expect(page.root).toMatchSnapshot();\n });\n\n it('renders title', async () => {\n const contentEditable = page.root.shadowRoot.querySelector('.title');\n expect(contentEditable.textContent).toBe(title);\n });\n\n it('renders title with highlighted text', async () => {\n const contentEditable = page.root.shadowRoot.querySelector('.title');\n expect(contentEditable.innerHTML).toContain('Meet with <span class=\"highlighted-tag\">${invitee}</span> for <span class=\"highlighted-tag\">${duration}</span> minutes');\n });\n\n it('handles input in content editable', async () => {\n const contentEditable = page.root.shadowRoot.querySelector('.title');\n const inputEvent = new Event('input', { bubbles: true, cancelable: true });\n\n contentEditable.textContent = 'New input';\n contentEditable.dispatchEvent({\n ...inputEvent,\n target: {\n textContent: 'New input',\n },\n });\n\n await page.waitForChanges();\n expect(contentEditable.textContent).toBe('New input');\n });\n\n it('open dropdown on typing $', async () => {\n const contentEditable = page.root.shadowRoot.querySelector('.title');\n expect(getBrowser()).toBe('Chrome');\n page.root.shadowRoot.getSelection = jest.fn().mockReturnValue({\n focusOffset: 1,\n focusNode: {\n data: '$',\n nodeValue: '$',\n },\n });\n await page.waitForChanges();\n const inputEvent = new Event('input', { bubbles: true, cancelable: true });\n\n contentEditable.focus();\n contentEditable.textContent = '$';\n contentEditable.dispatchEvent({\n ...inputEvent,\n target: {\n textContent: '$',\n },\n });\n\n await page.waitForChanges();\n const dropdown = page.root.shadowRoot.querySelector('.token-options');\n expect(dropdown).not.toBeNull();\n });\n\n it('renders error if title is empty or only contains whitespace', async () => {\n const contentEditable = page.root.shadowRoot.querySelector('.title');\n expect(getBrowser()).toBe('Chrome');\n page.root.shadowRoot.getSelection = jest.fn().mockReturnValue({\n focusOffset: 1,\n focusNode: {\n data: '$',\n nodeValue: '$',\n },\n });\n await page.waitForChanges();\n const inputEvent = new Event('input', { bubbles: true, cancelable: true });\n\n contentEditable.focus();\n contentEditable.textContent = ' ';\n contentEditable.dispatchEvent({\n ...inputEvent,\n target: {\n textContent: ' ',\n },\n });\n await page.waitForChanges();\n expect(page.root).toMatchSnapshot();\n expect(contentEditable.classList.contains('error')).toBeTruthy();\n });\n});\n"]}
|
|
@@ -304,17 +304,20 @@ const NylasEventTitle = proxyCustomElement(class NylasEventTitle extends HTMLEle
|
|
|
304
304
|
this.ariaActivedescendant = this.filteredTokens[0].label;
|
|
305
305
|
}
|
|
306
306
|
}
|
|
307
|
+
get isInternalsAvailable() {
|
|
308
|
+
return typeof this.internals !== 'undefined' && typeof this.internals.setValidity === 'function' && typeof this.internals.setFormValue === 'function';
|
|
309
|
+
}
|
|
307
310
|
updateEventTitle(text) {
|
|
308
311
|
const value = text.replace(/ +/g, ' ');
|
|
309
|
-
if (value === '') {
|
|
310
|
-
this.internals?.setValidity({ customError: true }, `Event title is required`, this.titleRef);
|
|
312
|
+
if (value === '' || /^[\s]*$/.test(value)) {
|
|
311
313
|
this.validationError = 'Event title is required';
|
|
314
|
+
this.isInternalsAvailable && this.internals?.setValidity({ customError: true }, `Event title is required`, this.titleRef);
|
|
312
315
|
}
|
|
313
316
|
else {
|
|
314
|
-
this.internals?.setValidity({ customError: false });
|
|
315
317
|
this.validationError = '';
|
|
318
|
+
this.isInternalsAvailable && this.internals?.setValidity({ customError: false });
|
|
316
319
|
}
|
|
317
|
-
this.internals?.setFormValue(value, this.name);
|
|
320
|
+
this.isInternalsAvailable && this.internals?.setFormValue(value, this.name);
|
|
318
321
|
this.valueChanged.emit({ value: value, name: this.name });
|
|
319
322
|
}
|
|
320
323
|
resetDropdown() {
|
|
@@ -325,10 +328,10 @@ const NylasEventTitle = proxyCustomElement(class NylasEventTitle extends HTMLEle
|
|
|
325
328
|
return (h("div", { class: "token-label" }, h("span", { class: "token" }, token.token), h("span", { class: "description" }, token.description)));
|
|
326
329
|
}
|
|
327
330
|
render() {
|
|
328
|
-
return (h(Host, { key: '
|
|
331
|
+
return (h(Host, { key: 'c9bef753b69793b6db0569ec750a04ceb4a51de8' }, h("div", { key: 'b80559c8ebe73437fbd347a034fa577c0ee4a60b', class: "nylas-event-title", part: "net" }, h("label", { key: 'c8b911bdfd24a7934b8359d5ba9a2531edc606c1', htmlFor: "title" }, "Event title", h("span", { key: '953b07bae8f6ebbcc465cc3349b6b97ecf8cd544', class: "required" }, "*")), h("div", { key: 'cbc5559de86b4c3a45c30088fba3d2a3382b4311', class: {
|
|
329
332
|
title: true,
|
|
330
333
|
error: this.validationError !== '',
|
|
331
|
-
}, 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: '
|
|
334
|
+
}, 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: 'cddf49a23d611b00b5a06a431bb6033ee564fba6', class: "help-text" }, "Create a dynamic templated event title by typing ", h("code", { key: 'b87cf9d630645aedf2c72bb7356ce8737406c127' }, "$"), " and selecting a template item.", h("span", { key: '75ad5946a822c3ee23ddb46f29b611dd68875d05', class: "label-icon" }, h("tooltip-component", { key: '20a6fb4aaac4d1ad5264d30364fc695de7f0ca11' }, h("info-icon", { key: '22413e474fd5113bfa3663d137a67cd2da94268f', slot: "tooltip-icon" }), h("span", { key: 'f266824868c09cf41564fe1fcbc42e9113bf06fb', slot: "tooltip-content" }, "For example, Interview with ", h("code", { key: '0989a865eb48e0a0363ec69218be46ab7d6f18f1' }, '${invitee}'))))), this.validationError != '' && h("span", { class: "error-message" }, this.validationError))));
|
|
332
335
|
}
|
|
333
336
|
static get formAssociated() { return true; }
|
|
334
337
|
get host() { return this; }
|
|
@@ -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\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\n &::-webkit-scrollbar {\n width: 6px;\n height: 6px;\n }\n\n &.error {\n border-color: var(--nylas-error);\n border-width: 2px;\n outline: none;\n }\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\n span.help-text {\n display: flex;\n gap: 4px;\n align-items: center;\n color: var(--nylas-base-800);\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 21px;\n }\n\n span.error-message {\n color: var(--nylas-error);\n }\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%;\n\n /* 21px */\n span.required {\n color: var(--nylas-error, #cc4841);\n }\n\n span.label-icon {\n margin-left: 4px;\n\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\n @media #{$mobile} {\n right: 0;\n width: 325px;\n max-width: unset;\n }\n\n box-shadow: 0px 4px 6px -2px #0000000d;\n box-shadow: 0px 10px 15px -3px #0000001a;\n\n ul {\n padding: 0;\n list-style-type: none;\n color: var(--nylas-base-900);\n max-height: 336px;\n margin: 0;\n\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\n .token-label {\n display: flex;\n flex-direction: column;\n font-weight: 400;\n\n .token {\n color: var(--nylas-abse-900);\n font-size: 16px;\n line-height: 24px;\n }\n\n .description {\n color: var(--nylas-base-600);\n font-size: 14px;\n line-height: 21px;\n }\n }\n\n &:hover,\n &:focus,\n &:active,\n &.active {\n background-color: var(--nylas-base-100);\n\n .token-label {\n .token {\n color: var(--nylas-primary);\n }\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, sanitize } 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 * @standalone\n * The selected config\n */\n @Prop() selectedConfiguration?: Configuration;\n /**\n * @standalone\n * The title of the event from the cofiguration.\n */\n @Prop() eventTitle?: string = this.selectedConfiguration?.event_booking?.title;\n /**\n * @standalone\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 @State() configEventTitle: 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 this.configEventTitle = 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 if (this.selectedConfiguration) {\n this.eventTitle = this.selectedConfiguration?.event_booking?.title;\n }\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 const title = newValue || this.configEventTitle;\n if (this.titleRef) {\n this.titleRef.innerHTML = this.highlightTokens(title);\n this.titleRef.focus();\n if (typeof this.internals.setValidity === 'function') {\n if (!title || title === '') {\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 = sanitize(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 const parentNode = selection?.node?.parentNode;\n if (selection?.currentText.startsWith('${') && parentNode) {\n event.preventDefault();\n parentNode.removeChild(selection.node);\n parentNode.remove();\n this.resetDropdown();\n }\n if (this.titleRef.textContent === '' || selection?.allSelected) {\n this.titleRef.innerHTML = '';\n this.updateEventTitle('');\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 </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\">\n Create a dynamic templated event title by typing <code>$</code> and selecting a template item.\n <span class=\"label-icon\">\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">\n For example, Interview with <code>{'${invitee}'}</code>\n </span>\n </tooltip-component>\n </span>\n </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\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\n &::-webkit-scrollbar {\n width: 6px;\n height: 6px;\n }\n\n &.error {\n border-color: var(--nylas-error);\n border-width: 2px;\n outline: none;\n }\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\n span.help-text {\n display: flex;\n gap: 4px;\n align-items: center;\n color: var(--nylas-base-800);\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 21px;\n }\n\n span.error-message {\n color: var(--nylas-error);\n }\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%;\n\n /* 21px */\n span.required {\n color: var(--nylas-error, #cc4841);\n }\n\n span.label-icon {\n margin-left: 4px;\n\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\n @media #{$mobile} {\n right: 0;\n width: 325px;\n max-width: unset;\n }\n\n box-shadow: 0px 4px 6px -2px #0000000d;\n box-shadow: 0px 10px 15px -3px #0000001a;\n\n ul {\n padding: 0;\n list-style-type: none;\n color: var(--nylas-base-900);\n max-height: 336px;\n margin: 0;\n\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\n .token-label {\n display: flex;\n flex-direction: column;\n font-weight: 400;\n\n .token {\n color: var(--nylas-abse-900);\n font-size: 16px;\n line-height: 24px;\n }\n\n .description {\n color: var(--nylas-base-600);\n font-size: 14px;\n line-height: 21px;\n }\n }\n\n &:hover,\n &:focus,\n &:active,\n &.active {\n background-color: var(--nylas-base-100);\n\n .token-label {\n .token {\n color: var(--nylas-primary);\n }\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, sanitize } 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 * @standalone\n * The selected config\n */\n @Prop() selectedConfiguration?: Configuration;\n /**\n * @standalone\n * The title of the event from the cofiguration.\n */\n @Prop() eventTitle?: string = this.selectedConfiguration?.event_booking?.title;\n /**\n * @standalone\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 @State() configEventTitle: 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 this.configEventTitle = 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 if (this.selectedConfiguration) {\n this.eventTitle = this.selectedConfiguration?.event_booking?.title;\n }\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 const title = newValue || this.configEventTitle;\n if (this.titleRef) {\n this.titleRef.innerHTML = this.highlightTokens(title);\n this.titleRef.focus();\n if (typeof this.internals.setValidity === 'function') {\n if (!title || title === '') {\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 = sanitize(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 const parentNode = selection?.node?.parentNode;\n if (selection?.currentText.startsWith('${') && parentNode) {\n event.preventDefault();\n parentNode.removeChild(selection.node);\n parentNode.remove();\n this.resetDropdown();\n }\n if (this.titleRef.textContent === '' || selection?.allSelected) {\n this.titleRef.innerHTML = '';\n this.updateEventTitle('');\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 get isInternalsAvailable() {\n return typeof this.internals !== 'undefined' && typeof this.internals.setValidity === 'function' && typeof this.internals.setFormValue === 'function';\n }\n\n updateEventTitle(text: string) {\n const value = text.replace(/ +/g, ' ');\n if (value === '' || /^[\\s]*$/.test(value)) {\n this.validationError = 'Event title is required';\n this.isInternalsAvailable && this.internals?.setValidity({ customError: true }, `Event title is required`, this.titleRef);\n } else {\n this.validationError = '';\n this.isInternalsAvailable && this.internals?.setValidity({ customError: false });\n }\n this.isInternalsAvailable && 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 </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\">\n Create a dynamic templated event title by typing <code>$</code> and selecting a template item.\n <span class=\"label-icon\">\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">\n For example, Interview with <code>{'${invitee}'}</code>\n </span>\n </tooltip-component>\n </span>\n </span>\n {this.validationError != '' && <span class=\"error-message\">{this.validationError}</span>}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -6943,17 +6943,20 @@ const NylasEventTitle = class {
|
|
|
6943
6943
|
this.ariaActivedescendant = this.filteredTokens[0].label;
|
|
6944
6944
|
}
|
|
6945
6945
|
}
|
|
6946
|
+
get isInternalsAvailable() {
|
|
6947
|
+
return typeof this.internals !== 'undefined' && typeof this.internals.setValidity === 'function' && typeof this.internals.setFormValue === 'function';
|
|
6948
|
+
}
|
|
6946
6949
|
updateEventTitle(text) {
|
|
6947
6950
|
const value = text.replace(/ +/g, ' ');
|
|
6948
|
-
if (value === '') {
|
|
6949
|
-
this.internals?.setValidity({ customError: true }, `Event title is required`, this.titleRef);
|
|
6951
|
+
if (value === '' || /^[\s]*$/.test(value)) {
|
|
6950
6952
|
this.validationError = 'Event title is required';
|
|
6953
|
+
this.isInternalsAvailable && this.internals?.setValidity({ customError: true }, `Event title is required`, this.titleRef);
|
|
6951
6954
|
}
|
|
6952
6955
|
else {
|
|
6953
|
-
this.internals?.setValidity({ customError: false });
|
|
6954
6956
|
this.validationError = '';
|
|
6957
|
+
this.isInternalsAvailable && this.internals?.setValidity({ customError: false });
|
|
6955
6958
|
}
|
|
6956
|
-
this.internals?.setFormValue(value, this.name);
|
|
6959
|
+
this.isInternalsAvailable && this.internals?.setFormValue(value, this.name);
|
|
6957
6960
|
this.valueChanged.emit({ value: value, name: this.name });
|
|
6958
6961
|
}
|
|
6959
6962
|
resetDropdown() {
|
|
@@ -6964,10 +6967,10 @@ const NylasEventTitle = class {
|
|
|
6964
6967
|
return (h("div", { class: "token-label" }, h("span", { class: "token" }, token.token), h("span", { class: "description" }, token.description)));
|
|
6965
6968
|
}
|
|
6966
6969
|
render() {
|
|
6967
|
-
return (h(Host, { key: '
|
|
6970
|
+
return (h(Host, { key: 'c9bef753b69793b6db0569ec750a04ceb4a51de8' }, h("div", { key: 'b80559c8ebe73437fbd347a034fa577c0ee4a60b', class: "nylas-event-title", part: "net" }, h("label", { key: 'c8b911bdfd24a7934b8359d5ba9a2531edc606c1', htmlFor: "title" }, "Event title", h("span", { key: '953b07bae8f6ebbcc465cc3349b6b97ecf8cd544', class: "required" }, "*")), h("div", { key: 'cbc5559de86b4c3a45c30088fba3d2a3382b4311', class: {
|
|
6968
6971
|
title: true,
|
|
6969
6972
|
error: this.validationError !== '',
|
|
6970
|
-
}, 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: '
|
|
6973
|
+
}, 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: 'cddf49a23d611b00b5a06a431bb6033ee564fba6', class: "help-text" }, "Create a dynamic templated event title by typing ", h("code", { key: 'b87cf9d630645aedf2c72bb7356ce8737406c127' }, "$"), " and selecting a template item.", h("span", { key: '75ad5946a822c3ee23ddb46f29b611dd68875d05', class: "label-icon" }, h("tooltip-component", { key: '20a6fb4aaac4d1ad5264d30364fc695de7f0ca11' }, h("info-icon", { key: '22413e474fd5113bfa3663d137a67cd2da94268f', slot: "tooltip-icon" }), h("span", { key: 'f266824868c09cf41564fe1fcbc42e9113bf06fb', slot: "tooltip-content" }, "For example, Interview with ", h("code", { key: '0989a865eb48e0a0363ec69218be46ab7d6f18f1' }, '${invitee}'))))), this.validationError != '' && h("span", { class: "error-message" }, this.validationError))));
|
|
6971
6974
|
}
|
|
6972
6975
|
static get formAssociated() { return true; }
|
|
6973
6976
|
get host() { return getElement(this); }
|