@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.
@@ -18824,10 +18824,13 @@ const N5 = j(class extends z {
18824
18824
  populateSuggestionsDropdown(e = "") {
18825
18825
  this.filteredTokens = this.availableTokens.filter((t) => t.label.startsWith(e.toString()) || t.value.startsWith(e.toString())), this.filteredTokens.length > 0 && (this.ariaActivedescendant = this.filteredTokens[0].label);
18826
18826
  }
18827
+ get isInternalsAvailable() {
18828
+ return typeof this.internals < "u" && typeof this.internals.setValidity == "function" && typeof this.internals.setFormValue == "function";
18829
+ }
18827
18830
  updateEventTitle(e) {
18828
18831
  var i, r, a;
18829
18832
  const t = e.replace(/ +/g, " ");
18830
- t === "" ? ((i = this.internals) == null || i.setValidity({ customError: !0 }, "Event title is required", this.titleRef), this.validationError = "Event title is required") : ((r = this.internals) == null || r.setValidity({ customError: !1 }), this.validationError = ""), (a = this.internals) == null || a.setFormValue(t, this.name), this.valueChanged.emit({ value: t, name: this.name });
18833
+ t === "" || /^[\s]*$/.test(t) ? (this.validationError = "Event title is required", this.isInternalsAvailable && ((i = this.internals) == null || i.setValidity({ customError: !0 }, "Event title is required", this.titleRef))) : (this.validationError = "", this.isInternalsAvailable && ((r = this.internals) == null || r.setValidity({ customError: !1 }))), this.isInternalsAvailable && ((a = this.internals) == null || a.setFormValue(t, this.name)), this.valueChanged.emit({ value: t, name: this.name });
18831
18834
  }
18832
18835
  resetDropdown() {
18833
18836
  this.showTokens = !1, this.ariaActivedescendant = "";
@@ -18837,10 +18840,10 @@ const N5 = j(class extends z {
18837
18840
  }
18838
18841
  render() {
18839
18842
  var e;
18840
- return c(oe, { key: "3a6858cea6ad427bb8f7046e4d409c44d9d57467" }, c("div", { key: "26574b9f7c76628771e584d1c3943b2ce9b77ce0", class: "nylas-event-title", part: "net" }, c("label", { key: "b6bab982d9b8a091ee1c9a66b5d24b3050e08817", htmlFor: "title" }, "Event title", c("span", { key: "34b1ba7719d37f6af0d3c84e3fe1c251625848b1", class: "required" }, "*")), c("div", { key: "0fcbdee8625b13720b31df47ddb76bdba6f384c6", class: {
18843
+ return c(oe, { key: "c9bef753b69793b6db0569ec750a04ceb4a51de8" }, c("div", { key: "b80559c8ebe73437fbd347a034fa577c0ee4a60b", class: "nylas-event-title", part: "net" }, c("label", { key: "c8b911bdfd24a7934b8359d5ba9a2531edc606c1", htmlFor: "title" }, "Event title", c("span", { key: "953b07bae8f6ebbcc465cc3349b6b97ecf8cd544", class: "required" }, "*")), c("div", { key: "cbc5559de86b4c3a45c30088fba3d2a3382b4311", class: {
18841
18844
  title: !0,
18842
18845
  error: this.validationError !== ""
18843
- }, part: "net__title", ref: (t) => this.titleRef = t, contentEditable: "true", onInput: (t) => this.handleChange(t), onKeyDown: (t) => this.handleInputKeyDown(t) }), this.showTokens && ((e = this.filteredTokens) == null ? void 0 : e.length) > 0 && c("div", { class: "token-options", part: "net__dropdown-content" }, c("ul", { tabindex: "-1", role: "listbox", "aria-label": this.name, "aria-activedescendant": this.ariaActivedescendant }, this.filteredTokens.map((t) => c("li", { tabindex: "0", key: t.label, id: t.label, class: { active: this.ariaActivedescendant === t.label }, onClick: (i) => this.selectOption(i, t), role: "option" }, this.getLabelHTML(t.labelHTML))))), c("span", { key: "8c267fb019bc2f4a7ec9bd771c7ebdbd4e36860e", class: "help-text" }, "Create a dynamic templated event title by typing ", c("code", { key: "73fff78bf0ef47b1a4880b88630285c5565348e7" }, "$"), " and selecting a template item.", c("span", { key: "64c431fb78eef320cdca1e426e4290f1663fe756", class: "label-icon" }, c("tooltip-component", { key: "b8f4ce46c4f53f66d50b6121dbc76360972638f9" }, c("info-icon", { key: "038824ecf2006ce2851de30c1538c30d96707ca9", slot: "tooltip-icon" }), c("span", { key: "0fefb16b80e9c43a7f46e1d5f72d12ca39cdc348", slot: "tooltip-content" }, "For example, Interview with ", c("code", { key: "df208a8bb8907416908a6cdbc0edba219e924513" }, "${invitee}"))))), this.validationError != "" && c("span", { class: "error-message" }, this.validationError)));
18846
+ }, part: "net__title", ref: (t) => this.titleRef = t, contentEditable: "true", onInput: (t) => this.handleChange(t), onKeyDown: (t) => this.handleInputKeyDown(t) }), this.showTokens && ((e = this.filteredTokens) == null ? void 0 : e.length) > 0 && c("div", { class: "token-options", part: "net__dropdown-content" }, c("ul", { tabindex: "-1", role: "listbox", "aria-label": this.name, "aria-activedescendant": this.ariaActivedescendant }, this.filteredTokens.map((t) => c("li", { tabindex: "0", key: t.label, id: t.label, class: { active: this.ariaActivedescendant === t.label }, onClick: (i) => this.selectOption(i, t), role: "option" }, this.getLabelHTML(t.labelHTML))))), c("span", { key: "cddf49a23d611b00b5a06a431bb6033ee564fba6", class: "help-text" }, "Create a dynamic templated event title by typing ", c("code", { key: "b87cf9d630645aedf2c72bb7356ce8737406c127" }, "$"), " and selecting a template item.", c("span", { key: "75ad5946a822c3ee23ddb46f29b611dd68875d05", class: "label-icon" }, c("tooltip-component", { key: "20a6fb4aaac4d1ad5264d30364fc695de7f0ca11" }, c("info-icon", { key: "22413e474fd5113bfa3663d137a67cd2da94268f", slot: "tooltip-icon" }), c("span", { key: "f266824868c09cf41564fe1fcbc42e9113bf06fb", slot: "tooltip-content" }, "For example, Interview with ", c("code", { key: "0989a865eb48e0a0363ec69218be46ab7d6f18f1" }, "${invitee}"))))), this.validationError != "" && c("span", { class: "error-message" }, this.validationError)));
18844
18847
  }
18845
18848
  static get formAssociated() {
18846
18849
  return !0;
@@ -11739,10 +11739,13 @@ const ni = Cr(class extends Br {
11739
11739
  populateSuggestionsDropdown(e = "") {
11740
11740
  this.filteredTokens = this.availableTokens.filter((t) => t.label.startsWith(e.toString()) || t.value.startsWith(e.toString())), this.filteredTokens.length > 0 && (this.ariaActivedescendant = this.filteredTokens[0].label);
11741
11741
  }
11742
+ get isInternalsAvailable() {
11743
+ return typeof this.internals < "u" && typeof this.internals.setValidity == "function" && typeof this.internals.setFormValue == "function";
11744
+ }
11742
11745
  updateEventTitle(e) {
11743
11746
  var r, i, s;
11744
11747
  const t = e.replace(/ +/g, " ");
11745
- t === "" ? ((r = this.internals) == null || r.setValidity({ customError: !0 }, "Event title is required", this.titleRef), this.validationError = "Event title is required") : ((i = this.internals) == null || i.setValidity({ customError: !1 }), this.validationError = ""), (s = this.internals) == null || s.setFormValue(t, this.name), this.valueChanged.emit({ value: t, name: this.name });
11748
+ t === "" || /^[\s]*$/.test(t) ? (this.validationError = "Event title is required", this.isInternalsAvailable && ((r = this.internals) == null || r.setValidity({ customError: !0 }, "Event title is required", this.titleRef))) : (this.validationError = "", this.isInternalsAvailable && ((i = this.internals) == null || i.setValidity({ customError: !1 }))), this.isInternalsAvailable && ((s = this.internals) == null || s.setFormValue(t, this.name)), this.valueChanged.emit({ value: t, name: this.name });
11746
11749
  }
11747
11750
  resetDropdown() {
11748
11751
  this.showTokens = !1, this.ariaActivedescendant = "";
@@ -11752,10 +11755,10 @@ const ni = Cr(class extends Br {
11752
11755
  }
11753
11756
  render() {
11754
11757
  var e;
11755
- return Z(Bs, { key: "3a6858cea6ad427bb8f7046e4d409c44d9d57467" }, Z("div", { key: "26574b9f7c76628771e584d1c3943b2ce9b77ce0", class: "nylas-event-title", part: "net" }, Z("label", { key: "b6bab982d9b8a091ee1c9a66b5d24b3050e08817", htmlFor: "title" }, "Event title", Z("span", { key: "34b1ba7719d37f6af0d3c84e3fe1c251625848b1", class: "required" }, "*")), Z("div", { key: "0fcbdee8625b13720b31df47ddb76bdba6f384c6", class: {
11758
+ return Z(Bs, { key: "c9bef753b69793b6db0569ec750a04ceb4a51de8" }, Z("div", { key: "b80559c8ebe73437fbd347a034fa577c0ee4a60b", class: "nylas-event-title", part: "net" }, Z("label", { key: "c8b911bdfd24a7934b8359d5ba9a2531edc606c1", htmlFor: "title" }, "Event title", Z("span", { key: "953b07bae8f6ebbcc465cc3349b6b97ecf8cd544", class: "required" }, "*")), Z("div", { key: "cbc5559de86b4c3a45c30088fba3d2a3382b4311", class: {
11756
11759
  title: !0,
11757
11760
  error: this.validationError !== ""
11758
- }, part: "net__title", ref: (t) => this.titleRef = t, contentEditable: "true", onInput: (t) => this.handleChange(t), onKeyDown: (t) => this.handleInputKeyDown(t) }), this.showTokens && ((e = this.filteredTokens) == null ? void 0 : e.length) > 0 && Z("div", { class: "token-options", part: "net__dropdown-content" }, Z("ul", { tabindex: "-1", role: "listbox", "aria-label": this.name, "aria-activedescendant": this.ariaActivedescendant }, this.filteredTokens.map((t) => Z("li", { tabindex: "0", key: t.label, id: t.label, class: { active: this.ariaActivedescendant === t.label }, onClick: (r) => this.selectOption(r, t), role: "option" }, this.getLabelHTML(t.labelHTML))))), Z("span", { key: "8c267fb019bc2f4a7ec9bd771c7ebdbd4e36860e", class: "help-text" }, "Create a dynamic templated event title by typing ", Z("code", { key: "73fff78bf0ef47b1a4880b88630285c5565348e7" }, "$"), " and selecting a template item.", Z("span", { key: "64c431fb78eef320cdca1e426e4290f1663fe756", class: "label-icon" }, Z("tooltip-component", { key: "b8f4ce46c4f53f66d50b6121dbc76360972638f9" }, Z("info-icon", { key: "038824ecf2006ce2851de30c1538c30d96707ca9", slot: "tooltip-icon" }), Z("span", { key: "0fefb16b80e9c43a7f46e1d5f72d12ca39cdc348", slot: "tooltip-content" }, "For example, Interview with ", Z("code", { key: "df208a8bb8907416908a6cdbc0edba219e924513" }, "${invitee}"))))), this.validationError != "" && Z("span", { class: "error-message" }, this.validationError)));
11761
+ }, part: "net__title", ref: (t) => this.titleRef = t, contentEditable: "true", onInput: (t) => this.handleChange(t), onKeyDown: (t) => this.handleInputKeyDown(t) }), this.showTokens && ((e = this.filteredTokens) == null ? void 0 : e.length) > 0 && Z("div", { class: "token-options", part: "net__dropdown-content" }, Z("ul", { tabindex: "-1", role: "listbox", "aria-label": this.name, "aria-activedescendant": this.ariaActivedescendant }, this.filteredTokens.map((t) => Z("li", { tabindex: "0", key: t.label, id: t.label, class: { active: this.ariaActivedescendant === t.label }, onClick: (r) => this.selectOption(r, t), role: "option" }, this.getLabelHTML(t.labelHTML))))), Z("span", { key: "cddf49a23d611b00b5a06a431bb6033ee564fba6", class: "help-text" }, "Create a dynamic templated event title by typing ", Z("code", { key: "b87cf9d630645aedf2c72bb7356ce8737406c127" }, "$"), " and selecting a template item.", Z("span", { key: "75ad5946a822c3ee23ddb46f29b611dd68875d05", class: "label-icon" }, Z("tooltip-component", { key: "20a6fb4aaac4d1ad5264d30364fc695de7f0ca11" }, Z("info-icon", { key: "22413e474fd5113bfa3663d137a67cd2da94268f", slot: "tooltip-icon" }), Z("span", { key: "f266824868c09cf41564fe1fcbc42e9113bf06fb", slot: "tooltip-content" }, "For example, Interview with ", Z("code", { key: "0989a865eb48e0a0363ec69218be46ab7d6f18f1" }, "${invitee}"))))), this.validationError != "" && Z("span", { class: "error-message" }, this.validationError)));
11759
11762
  }
11760
11763
  static get formAssociated() {
11761
11764
  return !0;
@@ -21993,10 +21993,13 @@ const NylasEventTitle = proxyCustomElement(class extends H$2 {
21993
21993
  populateSuggestionsDropdown(ue = "") {
21994
21994
  this.filteredTokens = this.availableTokens.filter((ge) => ge.label.startsWith(ue.toString()) || ge.value.startsWith(ue.toString())), this.filteredTokens.length > 0 && (this.ariaActivedescendant = this.filteredTokens[0].label);
21995
21995
  }
21996
+ get isInternalsAvailable() {
21997
+ return typeof this.internals < "u" && typeof this.internals.setValidity == "function" && typeof this.internals.setFormValue == "function";
21998
+ }
21996
21999
  updateEventTitle(ue) {
21997
22000
  var Oe, Ke, vt;
21998
22001
  const ge = ue.replace(/ +/g, " ");
21999
- ge === "" ? ((Oe = this.internals) == null || Oe.setValidity({ customError: !0 }, "Event title is required", this.titleRef), this.validationError = "Event title is required") : ((Ke = this.internals) == null || Ke.setValidity({ customError: !1 }), this.validationError = ""), (vt = this.internals) == null || vt.setFormValue(ge, this.name), this.valueChanged.emit({ value: ge, name: this.name });
22002
+ ge === "" || /^[\s]*$/.test(ge) ? (this.validationError = "Event title is required", this.isInternalsAvailable && ((Oe = this.internals) == null || Oe.setValidity({ customError: !0 }, "Event title is required", this.titleRef))) : (this.validationError = "", this.isInternalsAvailable && ((Ke = this.internals) == null || Ke.setValidity({ customError: !1 }))), this.isInternalsAvailable && ((vt = this.internals) == null || vt.setFormValue(ge, this.name)), this.valueChanged.emit({ value: ge, name: this.name });
22000
22003
  }
22001
22004
  resetDropdown() {
22002
22005
  this.showTokens = !1, this.ariaActivedescendant = "";
@@ -22006,10 +22009,10 @@ const NylasEventTitle = proxyCustomElement(class extends H$2 {
22006
22009
  }
22007
22010
  render() {
22008
22011
  var ue;
22009
- return h$2(Host, { key: "3a6858cea6ad427bb8f7046e4d409c44d9d57467" }, h$2("div", { key: "26574b9f7c76628771e584d1c3943b2ce9b77ce0", class: "nylas-event-title", part: "net" }, h$2("label", { key: "b6bab982d9b8a091ee1c9a66b5d24b3050e08817", htmlFor: "title" }, "Event title", h$2("span", { key: "34b1ba7719d37f6af0d3c84e3fe1c251625848b1", class: "required" }, "*")), h$2("div", { key: "0fcbdee8625b13720b31df47ddb76bdba6f384c6", class: {
22012
+ return h$2(Host, { key: "c9bef753b69793b6db0569ec750a04ceb4a51de8" }, h$2("div", { key: "b80559c8ebe73437fbd347a034fa577c0ee4a60b", class: "nylas-event-title", part: "net" }, h$2("label", { key: "c8b911bdfd24a7934b8359d5ba9a2531edc606c1", htmlFor: "title" }, "Event title", h$2("span", { key: "953b07bae8f6ebbcc465cc3349b6b97ecf8cd544", class: "required" }, "*")), h$2("div", { key: "cbc5559de86b4c3a45c30088fba3d2a3382b4311", class: {
22010
22013
  title: !0,
22011
22014
  error: this.validationError !== ""
22012
- }, part: "net__title", ref: (ge) => this.titleRef = ge, contentEditable: "true", onInput: (ge) => this.handleChange(ge), onKeyDown: (ge) => this.handleInputKeyDown(ge) }), this.showTokens && ((ue = this.filteredTokens) == null ? void 0 : ue.length) > 0 && h$2("div", { class: "token-options", part: "net__dropdown-content" }, h$2("ul", { tabindex: "-1", role: "listbox", "aria-label": this.name, "aria-activedescendant": this.ariaActivedescendant }, this.filteredTokens.map((ge) => h$2("li", { tabindex: "0", key: ge.label, id: ge.label, class: { active: this.ariaActivedescendant === ge.label }, onClick: (Oe) => this.selectOption(Oe, ge), role: "option" }, this.getLabelHTML(ge.labelHTML))))), h$2("span", { key: "8c267fb019bc2f4a7ec9bd771c7ebdbd4e36860e", class: "help-text" }, "Create a dynamic templated event title by typing ", h$2("code", { key: "73fff78bf0ef47b1a4880b88630285c5565348e7" }, "$"), " and selecting a template item.", h$2("span", { key: "64c431fb78eef320cdca1e426e4290f1663fe756", class: "label-icon" }, h$2("tooltip-component", { key: "b8f4ce46c4f53f66d50b6121dbc76360972638f9" }, h$2("info-icon", { key: "038824ecf2006ce2851de30c1538c30d96707ca9", slot: "tooltip-icon" }), h$2("span", { key: "0fefb16b80e9c43a7f46e1d5f72d12ca39cdc348", slot: "tooltip-content" }, "For example, Interview with ", h$2("code", { key: "df208a8bb8907416908a6cdbc0edba219e924513" }, "${invitee}"))))), this.validationError != "" && h$2("span", { class: "error-message" }, this.validationError)));
22015
+ }, part: "net__title", ref: (ge) => this.titleRef = ge, contentEditable: "true", onInput: (ge) => this.handleChange(ge), onKeyDown: (ge) => this.handleInputKeyDown(ge) }), this.showTokens && ((ue = this.filteredTokens) == null ? void 0 : ue.length) > 0 && h$2("div", { class: "token-options", part: "net__dropdown-content" }, h$2("ul", { tabindex: "-1", role: "listbox", "aria-label": this.name, "aria-activedescendant": this.ariaActivedescendant }, this.filteredTokens.map((ge) => h$2("li", { tabindex: "0", key: ge.label, id: ge.label, class: { active: this.ariaActivedescendant === ge.label }, onClick: (Oe) => this.selectOption(Oe, ge), role: "option" }, this.getLabelHTML(ge.labelHTML))))), h$2("span", { key: "cddf49a23d611b00b5a06a431bb6033ee564fba6", class: "help-text" }, "Create a dynamic templated event title by typing ", h$2("code", { key: "b87cf9d630645aedf2c72bb7356ce8737406c127" }, "$"), " and selecting a template item.", h$2("span", { key: "75ad5946a822c3ee23ddb46f29b611dd68875d05", class: "label-icon" }, h$2("tooltip-component", { key: "20a6fb4aaac4d1ad5264d30364fc695de7f0ca11" }, h$2("info-icon", { key: "22413e474fd5113bfa3663d137a67cd2da94268f", slot: "tooltip-icon" }), h$2("span", { key: "f266824868c09cf41564fe1fcbc42e9113bf06fb", slot: "tooltip-content" }, "For example, Interview with ", h$2("code", { key: "0989a865eb48e0a0363ec69218be46ab7d6f18f1" }, "${invitee}"))))), this.validationError != "" && h$2("span", { class: "error-message" }, this.validationError)));
22013
22016
  }
22014
22017
  static get formAssociated() {
22015
22018
  return !0;
@@ -6947,17 +6947,20 @@ const NylasEventTitle = class {
6947
6947
  this.ariaActivedescendant = this.filteredTokens[0].label;
6948
6948
  }
6949
6949
  }
6950
+ get isInternalsAvailable() {
6951
+ return typeof this.internals !== 'undefined' && typeof this.internals.setValidity === 'function' && typeof this.internals.setFormValue === 'function';
6952
+ }
6950
6953
  updateEventTitle(text) {
6951
6954
  const value = text.replace(/ +/g, ' ');
6952
- if (value === '') {
6953
- this.internals?.setValidity({ customError: true }, `Event title is required`, this.titleRef);
6955
+ if (value === '' || /^[\s]*$/.test(value)) {
6954
6956
  this.validationError = 'Event title is required';
6957
+ this.isInternalsAvailable && this.internals?.setValidity({ customError: true }, `Event title is required`, this.titleRef);
6955
6958
  }
6956
6959
  else {
6957
- this.internals?.setValidity({ customError: false });
6958
6960
  this.validationError = '';
6961
+ this.isInternalsAvailable && this.internals?.setValidity({ customError: false });
6959
6962
  }
6960
- this.internals?.setFormValue(value, this.name);
6963
+ this.isInternalsAvailable && this.internals?.setFormValue(value, this.name);
6961
6964
  this.valueChanged.emit({ value: value, name: this.name });
6962
6965
  }
6963
6966
  resetDropdown() {
@@ -6968,10 +6971,10 @@ const NylasEventTitle = class {
6968
6971
  return (index$1.h("div", { class: "token-label" }, index$1.h("span", { class: "token" }, token.token), index$1.h("span", { class: "description" }, token.description)));
6969
6972
  }
6970
6973
  render() {
6971
- return (index$1.h(index$1.Host, { key: '3a6858cea6ad427bb8f7046e4d409c44d9d57467' }, index$1.h("div", { key: '26574b9f7c76628771e584d1c3943b2ce9b77ce0', class: "nylas-event-title", part: "net" }, index$1.h("label", { key: 'b6bab982d9b8a091ee1c9a66b5d24b3050e08817', htmlFor: "title" }, "Event title", index$1.h("span", { key: '34b1ba7719d37f6af0d3c84e3fe1c251625848b1', class: "required" }, "*")), index$1.h("div", { key: '0fcbdee8625b13720b31df47ddb76bdba6f384c6', class: {
6974
+ return (index$1.h(index$1.Host, { key: 'c9bef753b69793b6db0569ec750a04ceb4a51de8' }, index$1.h("div", { key: 'b80559c8ebe73437fbd347a034fa577c0ee4a60b', class: "nylas-event-title", part: "net" }, index$1.h("label", { key: 'c8b911bdfd24a7934b8359d5ba9a2531edc606c1', htmlFor: "title" }, "Event title", index$1.h("span", { key: '953b07bae8f6ebbcc465cc3349b6b97ecf8cd544', class: "required" }, "*")), index$1.h("div", { key: 'cbc5559de86b4c3a45c30088fba3d2a3382b4311', class: {
6972
6975
  title: true,
6973
6976
  error: this.validationError !== '',
6974
- }, 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$1.h("div", { class: "token-options", part: "net__dropdown-content" }, index$1.h("ul", { tabindex: "-1", role: "listbox", "aria-label": this.name, "aria-activedescendant": this.ariaActivedescendant }, this.filteredTokens.map(option => (index$1.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$1.h("span", { key: '8c267fb019bc2f4a7ec9bd771c7ebdbd4e36860e', class: "help-text" }, "Create a dynamic templated event title by typing ", index$1.h("code", { key: '73fff78bf0ef47b1a4880b88630285c5565348e7' }, "$"), " and selecting a template item.", index$1.h("span", { key: '64c431fb78eef320cdca1e426e4290f1663fe756', class: "label-icon" }, index$1.h("tooltip-component", { key: 'b8f4ce46c4f53f66d50b6121dbc76360972638f9' }, index$1.h("info-icon", { key: '038824ecf2006ce2851de30c1538c30d96707ca9', slot: "tooltip-icon" }), index$1.h("span", { key: '0fefb16b80e9c43a7f46e1d5f72d12ca39cdc348', slot: "tooltip-content" }, "For example, Interview with ", index$1.h("code", { key: 'df208a8bb8907416908a6cdbc0edba219e924513' }, '${invitee}'))))), this.validationError != '' && index$1.h("span", { class: "error-message" }, this.validationError))));
6977
+ }, 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$1.h("div", { class: "token-options", part: "net__dropdown-content" }, index$1.h("ul", { tabindex: "-1", role: "listbox", "aria-label": this.name, "aria-activedescendant": this.ariaActivedescendant }, this.filteredTokens.map(option => (index$1.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$1.h("span", { key: 'cddf49a23d611b00b5a06a431bb6033ee564fba6', class: "help-text" }, "Create a dynamic templated event title by typing ", index$1.h("code", { key: 'b87cf9d630645aedf2c72bb7356ce8737406c127' }, "$"), " and selecting a template item.", index$1.h("span", { key: '75ad5946a822c3ee23ddb46f29b611dd68875d05', class: "label-icon" }, index$1.h("tooltip-component", { key: '20a6fb4aaac4d1ad5264d30364fc695de7f0ca11' }, index$1.h("info-icon", { key: '22413e474fd5113bfa3663d137a67cd2da94268f', slot: "tooltip-icon" }), index$1.h("span", { key: 'f266824868c09cf41564fe1fcbc42e9113bf06fb', slot: "tooltip-content" }, "For example, Interview with ", index$1.h("code", { key: '0989a865eb48e0a0363ec69218be46ab7d6f18f1' }, '${invitee}'))))), this.validationError != '' && index$1.h("span", { class: "error-message" }, this.validationError))));
6975
6978
  }
6976
6979
  static get formAssociated() { return true; }
6977
6980
  get host() { return index$1.getElement(this); }