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

package/dist/cjs/add-circle-icon_22.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-7af03e3f.js');
-const utils = require('./utils-20663d54.js');
-const registerComponent = require('./register-component-09ebdf31.js');
+const utils = require('./utils-9fc33c77.js');
+const registerComponent = require('./register-component-98ab6f54.js');
 const constants = require('./constants-3e962931.js');
 const _commonjsHelpers = require('./_commonjsHelpers-0a7b82d9.js');
 
@@ -1543,7 +1543,7 @@ const NylasEventTitle = class {
         return outputHtml;
     }
     getCurrentSelectionForBrowser() {
-        const getSelectionTextData = (nodeValue, offset, node) => {
+        const getSelectionTextData = (nodeValue, offset, node, allSelected) => {
             const text = nodeValue.replace(/[\u200B-\u200D\uFEFF]/g, '');
             const dollarIndex = text.lastIndexOf('$');
             const lastWord = text.substring(dollarIndex).split(' ')[0];
@@ -1553,24 +1553,29 @@ const NylasEventTitle = class {
                 lastWord,
                 currentText: text,
                 node,
+                allSelected,
             };
         };
+        const isAllSelected = (selection) => selection.anchorOffset === 0 && selection.focusOffset === selection.focusNode?.nodeValue?.length;
         const currentBrowser = utils.getBrowser();
         switch (currentBrowser) {
             case 'Chrome':
                 const shadowRootSelection = this.host.shadowRoot?.getSelection();
                 const focusNode = shadowRootSelection?.focusNode;
                 const focusNodeValue = focusNode?.nodeValue || '';
-                return getSelectionTextData(focusNodeValue, shadowRootSelection?.focusOffset || -1, focusNode);
+                const allSelected = shadowRootSelection && isAllSelected(shadowRootSelection);
+                return getSelectionTextData(focusNodeValue, shadowRootSelection?.focusOffset || -1, focusNode, allSelected);
             case 'Firefox':
                 const selection = document.getSelection();
                 const anchorNodeValue = selection?.anchorNode?.nodeValue || '';
-                return getSelectionTextData(anchorNodeValue, selection?.focusOffset || -1, selection?.anchorNode);
+                const allSelectedFirefox = selection && isAllSelected(selection);
+                return getSelectionTextData(anchorNodeValue, selection?.focusOffset || -1, selection?.anchorNode, allSelectedFirefox);
             case 'Safari':
                 const windowSelection = window.getSelection();
                 const anchorNode = windowSelection?.getComposedRanges(this.host.shadowRoot)[0];
                 const currentText = anchorNode?.startContainer?.nodeValue || '';
-                return getSelectionTextData(currentText, anchorNode?.endOffset || -1, anchorNode?.startContainer);
+                const allSelectedSafari = windowSelection && isAllSelected(windowSelection);
+                return getSelectionTextData(currentText, anchorNode?.endOffset || -1, anchorNode?.startContainer, allSelectedSafari);
             default:
                 console.warn('Browser not supported');
                 return null;
@@ -1606,6 +1611,10 @@ const NylasEventTitle = class {
         this.updateEventTitle(textContent);
     }
     handleInputKeyDown(event) {
+        const selection = this.getCurrentSelectionForBrowser();
+        if (selection?.allSelected && !utils.isNonPrintableKey(event)) {
+            this.titleRef.innerHTML = '';
+        }
         if (event.key === 'Enter') {
             event.preventDefault();
             const activeOption = this.host.shadowRoot?.getElementById(this.ariaActivedescendant);
@@ -1651,10 +1660,12 @@ const NylasEventTitle = class {
             this.resetDropdown();
         }
         else if (event.key === 'Backspace' || event.key === 'Delete') {
-            const selection = this.getCurrentSelectionForBrowser();
             if (selection?.currentText.startsWith('${')) {
                 selection?.node?.parentNode && selection.node.parentNode.removeChild(selection.node);
             }
+            if (this.titleRef.textContent === '' || selection?.currentText === '' || selection?.allSelected) {
+                this.titleRef.innerHTML = '';
+            }
         }
     }
     selectOption(e, option) {
@@ -1689,12 +1700,12 @@ const NylasEventTitle = class {
         const newTextNodeAfter = document.createTextNode(textAfter);
         if (textAfter !== '') {
             textNode.replaceWith(newTextNode, tagSpan, newTextNodeAfter);
-            newRange.setStart(newTextNodeAfter, 0);
+            newRange.setStart(newTextNodeAfter, 1);
         }
         else {
             const afterNode = document.createTextNode('\u200B');
             textNode.replaceWith(newTextNode, tagSpan, afterNode);
-            newRange.setStart(afterNode, 0);
+            newRange.setStart(afterNode, 1);
         }
         this.resetDropdown();
         this.titleRef.focus();
@@ -1733,10 +1744,10 @@ const NylasEventTitle = class {
         return (index.h("div", { class: "token-label" }, index.h("span", { class: "token" }, token.token), index.h("span", { class: "description" }, token.description)));
     }
     render() {
-        return (index.h(index.Host, { key: '9287b1b2cb59f9cd83d585807070b8aaa4821a6c' }, index.h("div", { key: '02ca37b1b68691faf69c6cdd062475f10a87653c', class: "nylas-event-title", part: "net" }, index.h("label", { key: 'ceeda06d9da67727cdb5fce90b182a28cc3408e1', htmlFor: "title" }, "Event title", index.h("span", { key: 'd0e6b3387661a7f23a4796611f4854cf64b3bd9f', class: "required" }, "*"), index.h("span", { key: '84d0dd45f6a21504849aabf195676af2dacc40b2', class: "label-icon" }, index.h("tooltip-component", { key: 'bc8d5fbbd455a5d983ebb037e3d93e6dc2619cbd' }, index.h("info-icon", { key: '5c16591baceb37a8739c70b6fa505de08813ff0f', slot: "tooltip-icon" }), index.h("span", { key: '8214ecaad02beb8da5e0595aa13ff7057a0e60cc', slot: "tooltip-content" }, "Enter a title for your event.")))), index.h("div", { key: '98e9885cb4acd028908d7fb1b2a028cffd0dc7d4', class: {
+        return (index.h(index.Host, { key: 'e0ddf6c13a5a0c0d2e0db9188365418fb7484dcf' }, index.h("div", { key: 'a3b8e594c8d9632709e777891f04df0aaaf7c5c3', class: "nylas-event-title", part: "net" }, index.h("label", { key: 'e5794d2cd8be0b1666bfa67c3ea657da5dc8d45d', htmlFor: "title" }, "Event title", index.h("span", { key: '1210caceb7bf824f01559460e1c5e572cb2dad92', class: "required" }, "*"), index.h("span", { key: '4280ec285221e6db76ca08723fe3888a1d2643e3', class: "label-icon" }, index.h("tooltip-component", { key: 'd6c05fb79cf39656af7589a2e9de9ef832d7a2f8' }, index.h("info-icon", { key: 'a4659d97d60d00dfcc2c993e70da5cfd05904f78', slot: "tooltip-icon" }), index.h("span", { key: '738bfa669eec42b417be02fbad0584af34044c83', slot: "tooltip-content" }, "Enter a title for your event.")))), index.h("div", { key: 'df102dc899f8de91154689d9cdaae28465380622', class: {
                 title: true,
                 error: this.validationError !== '',
-            }, part: "net__title", ref: el => (this.titleRef = el), contentEditable: "true", onInput: e => this.handleChange(e), onKeyDown: event => this.handleInputKeyDown(event) }), this.showTokens && this.filteredTokens?.length > 0 && (index.h("div", { class: "token-options", part: "net__dropdown-content" }, index.h("ul", { tabindex: "-1", role: "listbox", "aria-label": this.name, "aria-activedescendant": this.ariaActivedescendant }, this.filteredTokens.map(option => (index.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))))))), index.h("span", { key: 'a2a15145119acf95335728589c24138386032188', class: "help-text" }, "Create a dynamic templated event title by typing $. Learn more"), this.validationError != '' && index.h("span", { class: "error-message" }, this.validationError))));
+            }, part: "net__title", ref: el => (this.titleRef = el), contentEditable: "true", onInput: e => this.handleChange(e), onKeyDown: event => this.handleInputKeyDown(event) }), this.showTokens && this.filteredTokens?.length > 0 && (index.h("div", { class: "token-options", part: "net__dropdown-content" }, index.h("ul", { tabindex: "-1", role: "listbox", "aria-label": this.name, "aria-activedescendant": this.ariaActivedescendant }, this.filteredTokens.map(option => (index.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))))))), index.h("span", { key: 'ec769eea7e2e3ff6d64bef0f5099540c93ba80ab', class: "help-text" }, "Create a dynamic templated event title by typing $. Learn more"), this.validationError != '' && index.h("span", { class: "error-message" }, this.validationError))));
     }
     static get formAssociated() { return true; }
     get host() { return index.getElement(this); }