diff --git a/admin/templates/default/mailaccount.xet b/admin/templates/default/mailaccount.xet
index 029706bade..ded8ef51d8 100644
--- a/admin/templates/default/mailaccount.xet
+++ b/admin/templates/default/mailaccount.xet
@@ -259,12 +259,12 @@
-
+
-
+
diff --git a/api/js/etemplate/Et2Email/Et2Email.ts b/api/js/etemplate/Et2Email/Et2Email.ts
index ece9d5ec09..9ec6d3f675 100644
--- a/api/js/etemplate/Et2Email/Et2Email.ts
+++ b/api/js/etemplate/Et2Email/Et2Email.ts
@@ -114,16 +114,12 @@ export class Et2Email extends Et2InputWidget(LitElement) implements SearchMixinI
includeLists : boolean;
/**
- * If the email is a contact, we normally show the contact name instead of the email.
- * Set to true to turn this off and always show just the email
- * Mutually exclusive with fullEmail!
+ * What to display for the selected email addresses
+ *
+ * {@link Et2EmailTag#emailDisplay}
*/
- @property({type: Boolean})
- onlyEmail : boolean;
-
- /** Show the full, original value email address under all circumstances, rather than the contact name for known contacts */
- @property({type: Boolean})
- fullEmail : boolean;
+ @property({type: String})
+ emailDisplay : "full" | "email" | "name" | "domain";
/** The component's help text. If you need to display HTML, use the `help-text` slot instead. */
@property({attribute: 'help-text'}) helpText = '';
@@ -1007,8 +1003,7 @@ export class Et2Email extends Et2InputWidget(LitElement) implements SearchMixinI
"et2-select-draggable": !this.readonly && this.allowDragAndDrop,
})}
variant=${this.isValid ? nothing : "danger"}
- .fullEmail=${this.fullEmail}
- .onlyEmail=${this.onlyEmail}
+ .emailDisplay=${this.emailDisplay ?? nothing}
.value=${live(value)}
?removable=${!readonly}
?readonly=${readonly}
diff --git a/api/js/etemplate/Et2Select/Select/Et2SelectEmail.ts b/api/js/etemplate/Et2Select/Select/Et2SelectEmail.ts
index 102ce8d774..ef846b54b4 100644
--- a/api/js/etemplate/Et2Select/Select/Et2SelectEmail.ts
+++ b/api/js/etemplate/Et2Select/Select/Et2SelectEmail.ts
@@ -79,16 +79,11 @@ export class Et2SelectEmail extends Et2Select
includeLists: {type: Boolean},
/**
- * If the email is a contact, we normally show the contact name instead of the email.
- * Set to true to turn this off and always show just the email
- * Mutually exclusive with fullEmail!
+ * What to display for the selected email addresses
+ *
+ * {@link Et2EmailTag#emailDisplay}
*/
- onlyEmail: {type: Boolean},
-
- /**
- * Show the full, original value email address under all circumstances, rather than the contact name for known contacts
- */
- fullEmail: {type: Boolean}
+ emailDisplay: {type: String}, //"full" | "email" | "name" | "domain";
}
}
diff --git a/api/js/etemplate/Et2Select/Tag/Et2EmailTag.ts b/api/js/etemplate/Et2Select/Tag/Et2EmailTag.ts
index c9cf2615a3..83c8a65016 100644
--- a/api/js/etemplate/Et2Select/Tag/Et2EmailTag.ts
+++ b/api/js/etemplate/Et2Select/Tag/Et2EmailTag.ts
@@ -7,6 +7,7 @@
* @author Nathan Gray
*/
import {css, html, nothing, PropertyValues, TemplateResult} from "lit";
+import {property} from "lit/decorators/property.js";
import {classMap} from "lit/directives/class-map.js";
import shoelace from "../../Styles/shoelace";
import {Et2Tag} from "./Et2Tag";
@@ -69,40 +70,25 @@ export class Et2EmailTag extends Et2Tag
`];
}
- static get properties()
- {
- return {
- ...super.properties,
- /**
- * Check if the email is associated with an existing contact, and if it is not show a button to create
- * a new contact with this email address.
- */
- contactPlus: {
- type: Boolean,
- reflect: true,
- },
+ @property({type: Boolean, reflect: true})
+ contactPlus = true;
- /**
- * If the email is a contact, we normally show the contact name instead of the email.
- * Set to true to turn this off and always show just the email
- * Mutually exclusive with fullEmail!
- */
- onlyEmail: {type: Boolean},
-
- /**
- * If the email is a contact, we normally show the contact name instead of the email.
- * Set to true to turn this off and always show the email
- */
- fullEmail: {type: Boolean}
- }
- }
+ /**
+ * What to display for the selected email addresses
+ *
+ * - full: "Mr Test User
+ * - name: "Mr Test User"
+ * - domain: "Mr Test User (example.com)"
+ * - email: "test@example.com"
+ *
+ * If name is unknown, we'll use the email instead.
+ */
+ @property({type: String})
+ emailDisplay : "full" | "email" | "name" | "domain" = "domain";
constructor(...args : [])
{
super(...args);
- this.contactPlus = true;
- this.fullEmail = false;
- this.onlyEmail = false;
this.handleMouseEnter = this.handleMouseEnter.bind(this);
this.handleMouseLeave = this.handleMouseLeave.bind(this);
this.handleMouseClick = this.handleMouseClick.bind(this);
@@ -225,23 +211,29 @@ export class Et2EmailTag extends Et2Tag
public _contentTemplate() : TemplateResult
{
+ const split = Et2EmailTag.splitEmail(this.value);
+
let content = this.value;
- // If there's a name, just show the name, otherwise show the email
- if(!this.onlyEmail && Et2EmailTag.email_cache[content])
+ if(split.name)
{
- // Append current value as email, data may have work & home email in it
- content = (Et2EmailTag.email_cache[content]?.n_fn || "") + " <" + (Et2EmailTag.splitEmail(content)?.email || content) + ">"
- }
- if (this.onlyEmail)
- {
- const split = Et2EmailTag.splitEmail(content);
- content = split.email || content;
- }
- else if(!this.fullEmail)
- {
- const split = Et2EmailTag.splitEmail(content);
- content = split.name || split.email;
+ switch(this.emailDisplay)
+ {
+ case "full":
+ content = split.name + " <" + split.email + ">";
+ break;
+ case "email":
+ content = split.email;
+ break;
+ case "name":
+ default:
+ content = split.name;
+ break;
+ case "domain":
+ content = split.name + " (" + split.email.split("@").pop() + ")";
+ break;
+ }
}
+
return html`
${content}
diff --git a/api/js/etemplate/Et2Select/test/Et2EmailTag.test.ts b/api/js/etemplate/Et2Select/test/Et2EmailTag.test.ts
index e81966b651..5ff738ed5e 100644
--- a/api/js/etemplate/Et2Select/test/Et2EmailTag.test.ts
+++ b/api/js/etemplate/Et2Select/test/Et2EmailTag.test.ts
@@ -54,14 +54,9 @@ describe('Et2EmailTag', () =>
assert.isTrue(component.contactPlus);
});
- it('should have an onlyEmail property', () =>
+ it('should have an emailDisplay property', () =>
{
- assert.isFalse(component.onlyEmail);
- });
-
- it('should have a fullEmail property', () =>
- {
- assert.isFalse(component.fullEmail);
+ assert.exists(component.emailDisplay);
});
it('should open addressbook with email preset on (+) click', () =>