1 files changed, 197 insertions, 0 deletions
diff --git a/comm/mail/components/addrbook/content/vcard-edit/org.mjs b/comm/mail/components/addrbook/content/vcard-edit/org.mjs
new file mode 100644
index 0000000000..fb788c3043
--- /dev/null
+++ b/comm/mail/components/addrbook/content/vcard-edit/org.mjs
@@ -0,0 +1,197 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { vCardIdGen } from "./id-gen.mjs";
+
+const lazy = {};
+ChromeUtils.defineModuleGetter(
+  lazy,
+  "VCardPropertyEntry",
+  "resource:///modules/VCardUtils.jsm"
+);
+
+/**
+ * @implements {VCardPropertyEntryView}
+ * @see RFC6350 TITLE
+ */
+export class VCardTitleComponent extends HTMLElement {
+  /** @type {VCardPropertyEntry} */
+  vCardPropertyEntry;
+
+  /** @type {HTMLInputElement} */
+  titleEl;
+
+  static newVCardPropertyEntry() {
+    return new lazy.VCardPropertyEntry("title", {}, "text", "");
+  }
+
+  constructor() {
+    super();
+    let template = document.getElementById("template-vcard-edit-title");
+    let clonedTemplate = template.content.cloneNode(true);
+    this.appendChild(clonedTemplate);
+  }
+
+  connectedCallback() {
+    if (this.isConnected) {
+      this.titleEl = this.querySelector('input[name="title"]');
+      this.assignIds(this.titleEl, this.querySelector('label[for="title"]'));
+
+      this.fromVCardPropertyEntryToUI();
+    }
+  }
+
+  disconnectedCallback() {
+    if (!this.isConnected) {
+      this.vCardPropertyEntry = null;
+      this.titleEl = null;
+    }
+  }
+
+  fromVCardPropertyEntryToUI() {
+    this.titleEl.value = this.vCardPropertyEntry.value || "";
+  }
+
+  fromUIToVCardPropertyEntry() {
+    this.vCardPropertyEntry.value = this.titleEl.value;
+  }
+
+  valueIsEmpty() {
+    return this.vCardPropertyEntry.value === "";
+  }
+
+  assignIds(inputEl, labelEl) {
+    let labelInputId = vCardIdGen.next().value;
+    inputEl.id = labelInputId;
+    labelEl.htmlFor = labelInputId;
+  }
+}
+customElements.define("vcard-title", VCardTitleComponent);
+
+/**
+ * @implements {VCardPropertyEntryView}
+ * @see RFC6350 ROLE
+ */
+export class VCardRoleComponent extends HTMLElement {
+  /** @type {VCardPropertyEntry} */
+  vCardPropertyEntry;
+
+  /** @type {HTMLInputElement} */
+  roleEl;
+
+  static newVCardPropertyEntry() {
+    return new lazy.VCardPropertyEntry("role", {}, "text", "");
+  }
+
+  constructor() {
+    super();
+    let template = document.getElementById("template-vcard-edit-role");
+    let clonedTemplate = template.content.cloneNode(true);
+    this.appendChild(clonedTemplate);
+  }
+
+  connectedCallback() {
+    if (this.isConnected) {
+      this.roleEl = this.querySelector('input[name="role"]');
+      this.assignIds(this.roleEl, this.querySelector('label[for="role"]'));
+
+      this.fromVCardPropertyEntryToUI();
+    }
+  }
+
+  disconnectedCallback() {
+    if (!this.isConnected) {
+      this.vCardPropertyEntry = null;
+      this.roleEl = null;
+    }
+  }
+
+  fromVCardPropertyEntryToUI() {
+    this.roleEl.value = this.vCardPropertyEntry.value || "";
+  }
+
+  fromUIToVCardPropertyEntry() {
+    this.vCardPropertyEntry.value = this.roleEl.value;
+  }
+
+  valueIsEmpty() {
+    return this.vCardPropertyEntry.value === "";
+  }
+
+  assignIds(inputEl, labelEl) {
+    let labelInputId = vCardIdGen.next().value;
+    inputEl.id = labelInputId;
+    labelEl.htmlFor = labelInputId;
+  }
+}
+customElements.define("vcard-role", VCardRoleComponent);
+
+/**
+ * @implements {VCardPropertyEntryView}
+ * @see RFC6350 ORG
+ */
+export class VCardOrgComponent extends HTMLElement {
+  /** @type {VCardPropertyEntry} */
+  vCardPropertyEntry;
+  /** @type {HTMLInputElement} */
+  orgEl;
+  /** @type {HTMLInputElement} */
+  unitEl;
+
+  static newVCardPropertyEntry() {
+    return new lazy.VCardPropertyEntry("org", {}, "text", ["", ""]);
+  }
+
+  connectedCallback() {
+    if (this.hasConnected) {
+      return;
+    }
+    this.hasConnected = true;
+
+    let template = document.getElementById("template-vcard-edit-org");
+    let clonedTemplate = template.content.cloneNode(true);
+    this.appendChild(clonedTemplate);
+
+    this.orgEl = this.querySelector('input[name="org"]');
+    this.orgEl.id = vCardIdGen.next().value;
+    this.querySelector('label[for="org"]').htmlFor = this.orgEl.id;
+
+    this.unitEl = this.querySelector('input[name="orgUnit"]');
+    this.unitEl.id = vCardIdGen.next().value;
+    this.querySelector('label[for="orgUnit"]').htmlFor = this.unitEl.id;
+
+    this.fromVCardPropertyEntryToUI();
+  }
+
+  fromVCardPropertyEntryToUI() {
+    let values = this.vCardPropertyEntry.value;
+    if (!values) {
+      this.orgEl.value = "";
+      this.unitEl.value = "";
+      return;
+    }
+    if (!Array.isArray(values)) {
+      values = [values];
+    }
+    this.orgEl.value = values.shift() || "";
+    // In case data had more levels of units, just pull them together.
+    this.unitEl.value = values.join(", ");
+  }
+
+  fromUIToVCardPropertyEntry() {
+    this.vCardPropertyEntry.value = [this.orgEl.value.trim()];
+    if (this.unitEl.value.trim()) {
+      this.vCardPropertyEntry.value.push(this.unitEl.value.trim());
+    }
+  }
+
+  valueIsEmpty() {
+    return (
+      !this.vCardPropertyEntry.value ||
+      (Array.isArray(this.vCardPropertyEntry.value) &&
+        this.vCardPropertyEntry.value.every(v => v === ""))
+    );
+  }
+}
+customElements.define("vcard-org", VCardOrgComponent);