profile-pane 3.1.2-85b34f39 → 3.1.2-87f8a2f3

package/lib/ContactsCard.js

@@ -1,721 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.createAddressBookUriSelectorDialog = void 0;
-exports.getButtonContainer = getButtonContainer;
-var _contactsHelpers = require("./contactsHelpers");
-var _buttonsHelper = require("./buttonsHelper");
-var _texts = require("./texts");
-var _contactsErrors = require("./contactsErrors");
-const CONTACTS_POPUP_OVERLAY_ID = 'contacts-popup-overlay';
-const CONTACTS_OVERLAY_ACTIVE_CLASS = 'contactsOverlayActive';
-const createAddressBookUriSelectorDialog = (context, contactsModule, contactData, addressBooksData) => {
-  const addressBookUriSelectorDialog = context.dom.createElement('dialog');
-  addressBookUriSelectorDialog.setAttribute('role', 'dialog');
-  addressBookUriSelectorDialog.setAttribute('aria-live', 'polite');
-  addressBookUriSelectorDialog.setAttribute('aria-label', 'Contact address book selection dialog');
-  addressBookUriSelectorDialog.setAttribute('aria-describedby', 'addressbook-contacts-selection');
-  addressBookUriSelectorDialog.classList.add('contactsAddressBookSelector');
-  addressBookUriSelectorDialog.setAttribute('id', 'contacts-selector-dialog');
-  const button = context.dom.getElementById('add-to-contacts-button');
-  button.setAttribute('disabled', '');
-  const closeButton = createCloseButton(context, addressBookUriSelectorDialog, 'contactsCloseButton');
-  const addressBookCreationDiv = context.dom.createElement('div');
-  addressBookCreationDiv.setAttribute('id', 'addressbook-creation-div');
-  addressBookCreationDiv.setAttribute('role', 'addressBookCreation');
-  addressBookCreationDiv.setAttribute('aria-live', 'polite');
-  addressBookCreationDiv.setAttribute('tabindex', '0');
-  addressBookCreationDiv.setAttribute('aria-label', 'Address book creation section');
-  addressBookCreationDiv.setAttribute('aria-describedby', 'addressbook-details-section');
-  addressBookCreationDiv.classList.add('contactsAddressBookCreationDiv');
-  const addressBookContactSubmitButton = createNewContactCreationButton(context, contactsModule, addressBooksData, contactData);
-  const addressBookDetailsSection = createAddressBookDetailsSection(context);
-  const errorDisplaySection = createErrorDisplaySection(context);
-  const addressBookListDiv = createAddressBookListDiv(context, contactsModule, contactData, addressBooksData, addressBookDetailsSection);
-  addressBookDetailsSection.appendChild(addressBookListDiv);
-  addressBookCreationDiv.appendChild(addressBookDetailsSection);
-  addressBookCreationDiv.appendChild(addressBookContactSubmitButton);
-  addressBookUriSelectorDialog.appendChild(closeButton);
-  addressBookUriSelectorDialog.appendChild(addressBookCreationDiv);
-  addressBookUriSelectorDialog.appendChild(errorDisplaySection);
-  return addressBookUriSelectorDialog;
-};
-exports.createAddressBookUriSelectorDialog = createAddressBookUriSelectorDialog;
-const createAddressBookDetailsSection = context => {
-  const addressBookDetailsSection = context.dom.createElement('section');
-  addressBookDetailsSection.setAttribute('id', 'addressbook-details-section');
-  addressBookDetailsSection.setAttribute('role', 'addressBookDetails');
-  addressBookDetailsSection.setAttribute('aria-live', 'polite');
-  addressBookDetailsSection.setAttribute('tabindex', '0');
-  addressBookDetailsSection.classList.add('contactsAddressBookDetails');
-  return addressBookDetailsSection;
-};
-const createAddressBookCreationButton = (context, contactsModule, addressBooksData, contactData) => {
-  const setButtonOnClickHandler = async event => {
-    event.preventDefault();
-    const newAddressBookForm = createNewAddressBookForm(context, addressBooksData, contactsModule, contactData);
-    const addressBookDialog = context.dom.getElementById('contacts-selector-dialog');
-    showPopupOverlay(context);
-    addressBookDialog.appendChild(newAddressBookForm);
-  };
-  const addressBookCreationButton = context.dom.createElement('button');
-  addressBookCreationButton.setAttribute('id', 'contacts-create-addressbook-button');
-  addressBookCreationButton.setAttribute('type', 'button');
-  addressBookCreationButton.setAttribute('role', 'button');
-  addressBookCreationButton.setAttribute('aria-label', 'Create a new address book');
-  addressBookCreationButton.setAttribute('tabindex', '0');
-  addressBookCreationButton.textContent = 'Create Address Book';
-  addressBookCreationButton.classList.add('contactsActionButton', 'contactsAddressBookCreationButton');
-  addressBookCreationButton.addEventListener('click', setButtonOnClickHandler);
-  return addressBookCreationButton;
-};
-const createAddressBookUriEntryButton = (context, contactsModule, addressBooksData, contactData) => {
-  const setButtonOnClickHandler = async event => {
-    event.preventDefault();
-    const addressBookUriSelectorDialog = context.dom.getElementById('contacts-selector-dialog');
-    const addressBookUriEntryDiv = createAddressBookUriEntryDiv(context, contactsModule, addressBooksData, contactData);
-    showPopupOverlay(context);
-    addressBookUriSelectorDialog.appendChild(addressBookUriEntryDiv);
-  };
-  const addressBookCreationButton = context.dom.createElement('button');
-  addressBookCreationButton.setAttribute('id', 'contacts-addressbook-uri-entry-button');
-  addressBookCreationButton.setAttribute('type', 'button');
-  addressBookCreationButton.setAttribute('role', 'button');
-  addressBookCreationButton.setAttribute('aria-label', 'Enter an address book URI to add the contact to a specific address book');
-  addressBookCreationButton.setAttribute('tabindex', '0');
-  addressBookCreationButton.textContent = 'Enter Address Book URI';
-  addressBookCreationButton.classList.add('contactsActionButton', 'contactsAddressBookUriEntryButton');
-  addressBookCreationButton.addEventListener('click', setButtonOnClickHandler);
-  return addressBookCreationButton;
-};
-const createAddressBookUriEntryDiv = (context, contactsModule, addressBooksData, contactData) => {
-  const addressBookUriEntryDiv = context.dom.createElement('div');
-  addressBookUriEntryDiv.setAttribute('role', 'addressBookUriEntry');
-  addressBookUriEntryDiv.setAttribute('aria-live', 'polite');
-  addressBookUriEntryDiv.setAttribute('tabindex', '0');
-  addressBookUriEntryDiv.setAttribute('aria-label', 'Address book URI entry div');
-  addressBookUriEntryDiv.setAttribute('aria-describedby', 'addressbook-uri-entry-div');
-  addressBookUriEntryDiv.setAttribute('id', 'contacts-addressbook-uri-entry');
-  addressBookUriEntryDiv.classList.add('contactsPopupMessage', 'contactsAddressBookUriEntry');
-  const closeButton = createCloseButton(context, addressBookUriEntryDiv, 'contactsAddressBookUriEntryCloseButton');
-  addressBookUriEntryDiv.appendChild(closeButton);
-  addressBookUriEntryDiv.appendChild(createAddressBookUriEntryForm(context, contactsModule, addressBooksData, contactData));
-  return addressBookUriEntryDiv;
-};
-const createAddressBookUriEntryForm = (context, contactsModule, addressBooksData, contactData) => {
-  const setButtonOnSubmitHandler = async event => {
-    event.preventDefault();
-    const addressBookUriField = context.dom.querySelector('#addressBookUriInput');
-
-    // @ts-ignore
-    const enteredAddressBookUri = addressBookUriField.value;
-    if (!enteredAddressBookUri) {
-      (0, _contactsErrors.addErrorToErrorDisplay)(context, _texts.errorNotExistsAddressBookUri);
-      return;
-    } else {
-      const uriCheck = enteredAddressBookUri.substring(enteredAddressBookUri.length - 5, enteredAddressBookUri.length);
-      const normalizedUri = uriCheck === '#this' ? enteredAddressBookUri : enteredAddressBookUri + '#this';
-      const books = await (0, _contactsHelpers.addANewAddressBookUriToAddressBooks)(context, contactsModule, addressBooksData, normalizedUri);
-      const addressBookListDiv = context.dom.querySelector('#addressbook-list');
-      if (addressBookListDiv) {
-        const addressBookUriEntry = context.dom.getElementById('contacts-addressbook-uri-entry');
-        addressBookUriEntry.remove();
-        removePopupOverlayIfNoPopup(context);
-        const addressBookCreationButton = context.dom.getElementById('contacts-create-addressbook-button');
-        const addressBookUriEntryButton = context.dom.getElementById('contacts-addressbook-uri-entry-button');
-        addressBookCreationButton.remove();
-        addressBookUriEntryButton.remove();
-        addressBookListDiv.appendChild(createAddressBookButton(context, contactsModule, books.addressBooksData, books.addressBook, enteredAddressBookUri, contactData));
-        addressBookListDiv.appendChild(createAddressBookCreationButton(context, contactsModule, books.addressBooksData, contactData));
-        addressBookListDiv.appendChild(createAddressBookUriEntryButton(context, contactsModule, books.addressBooksData, contactData));
-      }
-    }
-  };
-  const inputAddressUriEventListener = () => {
-    checkAndRemoveErrorDisplay(context);
-  };
-  const addressBookUriEntryForm = context.dom.createElement('form');
-  addressBookUriEntryForm.setAttribute('id', 'contacts-address-uri-entry-form');
-  addressBookUriEntryForm.classList.add('contactsAddressBookUriEntryForm');
-  addressBookUriEntryForm.method = 'post';
-  addressBookUriEntryForm.addEventListener('submit', setButtonOnSubmitHandler);
-  const addressBookUriEntryLabel = context.dom.createElement('label');
-  addressBookUriEntryLabel.classList.add('label');
-  addressBookUriEntryLabel.setAttribute('for', 'addressBookUriInput');
-  const addressBookNameInputBox = context.dom.createElement('input');
-  addressBookNameInputBox.type = 'text';
-  addressBookNameInputBox.name = 'addressBookUri';
-  addressBookNameInputBox.id = 'addressBookUriInput';
-  addressBookNameInputBox.placeholder = 'Enter address book URI to find your address book';
-  addressBookNameInputBox.classList.add('input', 'contactsAddressBookUriInput');
-  addressBookNameInputBox.addEventListener('click', inputAddressUriEventListener);
-  addressBookUriEntryForm.appendChild(addressBookUriEntryLabel);
-  addressBookUriEntryForm.appendChild(addressBookNameInputBox);
-  addressBookUriEntryForm.appendChild(createAddressBookUriEntryAddButton(context));
-  return addressBookUriEntryForm;
-};
-const createAddressBookUriEntryAddButton = context => {
-  const setButtonOnClickHandler = async event => {
-    event.preventDefault();
-    const addressBookUriEntryForm = context.dom.querySelector('#contacts-address-uri-entry-form');
-    // @ts-ignore
-    if (addressBookUriEntryForm) addressBookUriEntryForm.requestSubmit();
-  };
-  const entryButton = context.dom.createElement('button');
-  entryButton.setAttribute('id', 'contacts-addressbook-entry-button');
-  entryButton.setAttribute('role', 'button');
-  entryButton.setAttribute('aria-label', 'Create Address Book from entered URI');
-  entryButton.setAttribute('tabindex', '0');
-  entryButton.classList.add('contactsActionButton', 'contactsAddressBookUriEntryAddButton');
-  entryButton.setAttribute('type', 'submit');
-  entryButton.addEventListener('click', setButtonOnClickHandler);
-  entryButton.innerHTML = 'Add';
-  return entryButton;
-};
-const createAddressBookListDiv = (context, contactsModule, contactData, addressBooksData, addressBookDetailsSection) => {
-  const addressBookListDiv = context.dom.createElement('div');
-  addressBookListDiv.setAttribute('class', 'contactsAddressBookList');
-  addressBookListDiv.setAttribute('role', 'addressBooksList');
-  addressBookListDiv.setAttribute('aria-live', 'polite');
-  addressBookListDiv.setAttribute('tabindex', '0');
-  addressBookListDiv.setAttribute('aria-label', 'Address book list to select which address book to add the contact to');
-  addressBookListDiv.setAttribute('aria-describedby', 'addressbook-list');
-  addressBookListDiv.setAttribute('id', 'addressbook-list');
-  addressBookListDiv.innerHTML = 'Address Books';
-  addressBooksData.public.forEach((addressBook, addressBookUri) => {
-    addressBookListDiv.appendChild(createAddressBookButton(context, contactsModule, addressBooksData, addressBook, addressBookUri, contactData));
-  });
-  addressBooksData.private.forEach((addressBook, addressBookUri) => {
-    addressBookListDiv.appendChild(createAddressBookButton(context, contactsModule, addressBooksData, addressBook, addressBookUri, contactData));
-  });
-  const addressBookCreationButton = createAddressBookCreationButton(context, contactsModule, addressBooksData, contactData);
-  const addressBookUriEntryButton = createAddressBookUriEntryButton(context, contactsModule, addressBooksData, contactData);
-  addressBookListDiv.appendChild(addressBookCreationButton);
-  addressBookListDiv.appendChild(addressBookUriEntryButton);
-  return addressBookListDiv;
-};
-const createAddressBookGroupCreationButton = (context, contactsModule, addressBooksData, contactData) => {
-  const setButtonOnClickHandler = async event => {
-    event.preventDefault();
-    const addressBookDialog = context.dom.getElementById('contacts-selector-dialog');
-    const groupNameForm = context.dom.getElementById('new-group-form');
-    if (!groupNameForm) {
-      showPopupOverlay(context);
-      addressBookDialog.appendChild(createGroupNameForm(context, contactsModule, addressBooksData, contactData));
-    }
-  };
-  const groupCreationButton = context.dom.createElement('button');
-  groupCreationButton.setAttribute('id', 'contacts-create-group-button');
-  groupCreationButton.setAttribute('type', 'button');
-  groupCreationButton.setAttribute('role', 'button');
-  groupCreationButton.setAttribute('aria-label', 'Create a new group in the selected address book');
-  groupCreationButton.setAttribute('tabindex', '0');
-  groupCreationButton.textContent = 'Create Group';
-  groupCreationButton.classList.add('contactsActionButton', 'contactsCreateGroupCreationButton');
-  groupCreationButton.addEventListener('click', setButtonOnClickHandler);
-  return groupCreationButton;
-};
-const createGroupListDiv = (context, contactsModule, addressBooksData, addressBook, contactData) => {
-  const groupListDiv = context.dom.createElement('div');
-  groupListDiv.setAttribute('class', 'contactsGroupList');
-  groupListDiv.setAttribute('role', 'groupList');
-  groupListDiv.setAttribute('aria-live', 'polite');
-  groupListDiv.setAttribute('tabindex', '0');
-  groupListDiv.setAttribute('aria-label', 'Group list to select which groups in the address book to add the contact to');
-  groupListDiv.setAttribute('aria-describedby', 'group-list');
-  groupListDiv.setAttribute('id', 'group-list');
-  groupListDiv.innerHTML = 'Groups';
-  if (addressBook) {
-    addressBook.groups.map(group => {
-      groupListDiv.appendChild(createGroupButton(context, group));
-    });
-  }
-  groupListDiv.appendChild(createAddressBookGroupCreationButton(context, contactsModule, addressBooksData, contactData));
-  return groupListDiv;
-};
-const createErrorDisplaySection = context => {
-  const setButtonOnClickHandler = event => {
-    event.preventDefault();
-    errorDisplaySection.classList.remove('contactsShowErrors');
-  };
-  const errorDisplaySection = context.dom.createElement('section');
-  errorDisplaySection.setAttribute('role', 'errorDisplay');
-  errorDisplaySection.setAttribute('aria-live', 'assertive');
-  errorDisplaySection.setAttribute('tabindex', '0');
-  errorDisplaySection.setAttribute('aria-label', 'Section to display error messages related to contact creation');
-  errorDisplaySection.setAttribute('id', 'error-display-section');
-  errorDisplaySection.classList.add('contactsErrorDisplay');
-  const closeButton = context.dom.createElement('button');
-  closeButton.setAttribute('type', 'button');
-  closeButton.setAttribute('aria-label', 'Close error message display');
-  closeButton.setAttribute('tabindex', '0');
-  closeButton.setAttribute('role', 'button');
-  closeButton.classList.add('contactsCloseErrorDisplayButton');
-  closeButton.textContent = 'x';
-  closeButton.addEventListener('click', setButtonOnClickHandler);
-  errorDisplaySection.appendChild(closeButton);
-  return errorDisplaySection;
-};
-const checkAndRemoveErrorDisplay = context => {
-  const errorDisplaySection = context.dom.getElementById('error-display-section');
-  if (errorDisplaySection.classList.contains('contactsShowErrors')) {
-    errorDisplaySection.classList.remove('contactsShowErrors');
-    errorDisplaySection.innerHTML = '';
-  }
-};
-const createNewContactCreationButton = (context, contactsModule, addressBooksData, contactData) => {
-  const setButtonOnClickHandler = async event => {
-    event.preventDefault();
-    const contactExistsByWebID = (0, _contactsHelpers.checkIfContactExistsByWebID)(addressBooksData, contactData.webID);
-    const contactExistsByName = (0, _contactsHelpers.checkIfContactExistsByName)(addressBooksData, contactData.name);
-    const contactExistsHandled = handleContactExists(context, contactsModule, addressBooksData, contactData, contactExistsByWebID, contactExistsByName);
-    if (contactExistsHandled) return;
-    let selectedAddressBookUri = null;
-    let selectedGroupUris = [];
-    const selectedAddressBookElement = context.dom.querySelectorAll('.selectedAddressBook');
-    selectedAddressBookElement.forEach(addressBookButton => {
-      selectedAddressBookUri = addressBookButton.getAttribute('id');
-    });
-    const selectedGroupElements = context.dom.querySelectorAll('.selectedGroup');
-    selectedGroupElements.forEach(groupButtons => {
-      selectedGroupUris.push(groupButtons.getAttribute('id'));
-    });
-    if (selectedGroupUris.length) {
-      const selectedAddressBookUris = {
-        addressBookUri: selectedAddressBookUri,
-        groupUris: selectedGroupUris
-      };
-      try {
-        const contactUri = await (0, _contactsHelpers.createContactInAddressBook)(context, contactsModule, addressBooksData, contactData, selectedAddressBookUris);
-        finalizeContactEntry(context, addressBooksData, contactData, contactUri);
-      } catch (error) {
-        (0, _contactsErrors.addErrorToErrorDisplay)(context, `${_texts.errorContactCreation}\n${error}`);
-      }
-    } else {
-      (0, _contactsErrors.addErrorToErrorDisplay)(context, _texts.groupIsRequired);
-    }
-  };
-  const button = context.dom.createElement('button');
-  button.setAttribute('type', 'submit');
-  button.setAttribute('id', 'add-contact');
-  button.setAttribute('role', 'button');
-  button.setAttribute('aria-label', 'Add contact to selected address book');
-  button.setAttribute('tabindex', '0');
-  button.classList.add('contactsActionButton', 'contactsNewContactCreationButton');
-  button.addEventListener('click', setButtonOnClickHandler);
-  button.textContent = 'Add Contact';
-  return button;
-};
-const createAddressBookButton = (context, contactsModule, addressBooksData, addressBook, addressBookUri, contactData) => {
-  const setButtonOnClickHandler = event => {
-    event.preventDefault();
-    const selectedAddressBookButton = event.target;
-    const previouslySelected = selectedAddressBookButton.classList.contains('contactsSelectedButton');
-    const addressBookDetailsSection = context.dom.getElementById('addressbook-details-section');
-    let addressBook = null;
-    // remove the previous groups
-    const groupDivToRemove = context.dom.getElementById('group-list');
-    if (groupDivToRemove) groupDivToRemove.remove();
-
-    // remove presious address book selection bc you can only have one
-    const selectedAddressBookElements = context.dom.querySelectorAll('.selectedAddressBook');
-    selectedAddressBookElements.forEach(addressBookButton => {
-      addressBookButton.classList.remove('contactsSelectedButton', 'selectedAddressBook');
-    });
-    if (previouslySelected) {
-      selectedAddressBookButton.classList.remove('contactsSelectedButton', 'selectedAddressBook');
-      const groupForm = context.dom.getElementById('new-group-form');
-      if (groupForm) {
-        groupForm.remove();
-        removePopupOverlayIfNoPopup(context);
-      }
-    } else {
-      const addressForm = context.dom.getElementById('new-addressbook-form');
-      if (addressForm) {
-        addressForm.remove();
-        removePopupOverlayIfNoPopup(context);
-      }
-      selectedAddressBookButton.classList.add('contactsSelectedButton', 'selectedAddressBook');
-      // selected address book code
-      const selectedAddressBookUri = event.target.id;
-      // can check for the class on private
-      addressBook = addressBooksData.public.get(selectedAddressBookUri);
-      if (!addressBook) addressBook = addressBooksData.private.get(selectedAddressBookUri);
-
-      // remove the previous groups
-      const groupDivToRemove = context.dom.getElementById('group-list');
-      if (groupDivToRemove) groupDivToRemove.remove();
-      // add groups for addressbook    
-      const groupListDiv = createGroupListDiv(context, contactsModule, addressBooksData, addressBook, contactData);
-      addressBookDetailsSection.appendChild(groupListDiv);
-    }
-  };
-  const button = context.dom.createElement('button');
-  button.setAttribute('value', addressBook.name);
-  button.setAttribute('id', addressBookUri);
-  button.setAttribute('role', 'button');
-  button.setAttribute('type', 'submit');
-  button.setAttribute('aria-label', 'Select address book ' + addressBook.name);
-  button.setAttribute('tabindex', '0');
-  button.classList.add('contactsButton');
-  button.addEventListener('click', setButtonOnClickHandler);
-  button.innerHTML = addressBook.name;
-  return button;
-};
-const createNewAddressBookForm = (context, addressBooksData, contactsModule, contactData) => {
-  const newAddressBookEventListener = async event => {
-    event.preventDefault();
-    let enteredAddressBookUri = null;
-    let newGroupUri = null;
-    const addressNameField = context.dom.querySelector('#addressBookNameInput');
-
-    // @ts-ignore
-    const enteredAddressName = addressNameField.value;
-    const addressContainerField = context.dom.querySelector('#addressBookContainerInput');
-
-    // @ts-ignore
-    const enteredAddressContainer = addressContainerField.value;
-    const groupNameField = context.dom.querySelector('#groupNameInput');
-    // @ts-ignore
-    const enteredGroupName = groupNameField.value;
-    if (enteredAddressName) {
-      // add addressbook first 
-      try {
-        enteredAddressBookUri = await (0, _contactsHelpers.handleAddressBookCreation)(context, enteredAddressContainer, enteredAddressName);
-        const books = await (0, _contactsHelpers.addANewAddressBookUriToAddressBooks)(context, contactsModule, addressBooksData, enteredAddressBookUri);
-        if (enteredGroupName) {
-          newGroupUri = await contactsModule.createNewGroup({
-            addressBookUri: enteredAddressBookUri,
-            groupName: enteredGroupName
-          });
-          const groupAdded = await (0, _contactsHelpers.addGroupToAddressBookData)(addressBooksData, enteredAddressBookUri, {
-            name: enteredGroupName,
-            uri: newGroupUri
-          });
-          if (!groupAdded) {
-            (0, _contactsErrors.addErrorToErrorDisplay)(context, _texts.errorGroupCreation);
-            return;
-          }
-        }
-        const addressBookListDiv = context.dom.querySelector('#addressbook-list');
-        const groupListDiv = context.dom.querySelector('#group-list');
-        if (addressBookListDiv) {
-          newAddressBookForm.remove();
-          removePopupOverlayIfNoPopup(context);
-          const addressBookCreationButton = context.dom.getElementById('contacts-create-addressbook-button');
-          const addressBookUriEntryButton = context.dom.getElementById('contacts-addressbook-uri-entry-button');
-          addressBookCreationButton.remove();
-          addressBookUriEntryButton.remove();
-          addressBookListDiv.appendChild(createAddressBookButton(context, contactsModule, addressBooksData, books.addressBook, enteredAddressBookUri, contactData));
-          addressBookListDiv.appendChild(addressBookCreationButton);
-          addressBookListDiv.appendChild(addressBookUriEntryButton);
-        }
-        if (groupListDiv) {
-          const groupCreationButton = context.dom.getElementById('contacts-create-group-button');
-          groupCreationButton.remove();
-          groupListDiv.appendChild(createGroupButton(context, {
-            uri: newGroupUri,
-            name: enteredGroupName
-          }));
-          groupListDiv.appendChild(groupCreationButton);
-        }
-      } catch (error) {
-        (0, _contactsErrors.addErrorToErrorDisplay)(context, error);
-      }
-    }
-  };
-  const submitFormEventListener = event => {
-    event.preventDefault();
-    newAddressBookForm.requestSubmit();
-  };
-  const newAddressBookForm = context.dom.createElement('form');
-  newAddressBookForm.method = 'post';
-  newAddressBookForm.innerHTML = 'Create a new address book';
-  newAddressBookForm.setAttribute('id', 'new-addressbook-form');
-  newAddressBookForm.classList.add('contactsPopupMessage', 'contactsNewAddressForm');
-  const addressBookNameLabel = context.dom.createElement('label');
-  addressBookNameLabel.classList.add('label');
-  addressBookNameLabel.setAttribute('for', 'addressBookNameInput');
-  const addressBookNameInputBox = context.dom.createElement('input');
-  addressBookNameInputBox.type = 'text';
-  addressBookNameInputBox.name = 'addressBookName';
-  addressBookNameInputBox.id = 'addressBookNameInput';
-  addressBookNameInputBox.placeholder = 'New address book name';
-  addressBookNameInputBox.classList.add('input', 'contactsAddressBookInput');
-  addressBookNameInputBox.required = true;
-  const addressBookContainerLabel = context.dom.createElement('label');
-  addressBookContainerLabel.classList.add('label');
-  addressBookContainerLabel.setAttribute('for', 'addressBookContainerInput');
-  const addressBookContainerInputBox = context.dom.createElement('input');
-  addressBookContainerInputBox.type = 'text';
-  addressBookContainerInputBox.name = 'addressBookContainer';
-  addressBookContainerInputBox.id = 'addressBookContainerInput';
-  addressBookContainerInputBox.placeholder = 'Address book container';
-  addressBookContainerInputBox.classList.add('input', 'contactsAddressBookInput');
-  addressBookContainerInputBox.required = true;
-  const groupNameLabel = context.dom.createElement('label');
-  groupNameLabel.classList.add('label');
-  groupNameLabel.setAttribute('for', 'groupNameInput');
-  const groupNameInputBox = context.dom.createElement('input');
-  groupNameInputBox.type = 'text';
-  groupNameInputBox.name = 'groupName';
-  groupNameInputBox.id = 'groupNameInput';
-  groupNameInputBox.placeholder = 'New group name';
-  groupNameInputBox.classList.add('input', 'contactsGroupInput');
-  groupNameInputBox.required = true;
-  const submitButton = context.dom.createElement('button');
-  submitButton.setAttribute('id', 'submit-addressbook');
-  submitButton.setAttribute('role', 'button');
-  submitButton.setAttribute('type', 'submit');
-  submitButton.setAttribute('aria-label', 'Create a new address book with the entered name, container, type and group');
-  submitButton.setAttribute('tabindex', '0');
-  submitButton.classList.add('contactsActionButton', 'contactsAddressBookCreationSubmitButton');
-  submitButton.addEventListener('click', submitFormEventListener);
-  submitButton.innerHTML = 'Create Address Book';
-  const closeButton = createCloseButton(context, newAddressBookForm, 'contactsAddressBookCreationCloseButton');
-  newAddressBookForm.appendChild(closeButton);
-  newAddressBookForm.appendChild(addressBookNameLabel);
-  newAddressBookForm.appendChild(addressBookNameInputBox);
-  newAddressBookForm.appendChild(addressBookContainerLabel);
-  newAddressBookForm.appendChild(addressBookContainerInputBox);
-  newAddressBookForm.appendChild(groupNameLabel);
-  newAddressBookForm.appendChild(groupNameInputBox);
-  newAddressBookForm.appendChild(submitButton);
-  newAddressBookForm.addEventListener('submit', newAddressBookEventListener);
-  return newAddressBookForm;
-};
-const createCloseButton = (context, element, specialClass) => {
-  const setButtonOnClickHandler = event => {
-    event.preventDefault();
-    if (element) {
-      element.remove();
-      removePopupOverlayIfNoPopup(context);
-    }
-    if (specialClass === 'contactsCloseButton') {
-      const button = context.dom.getElementById('add-to-contacts-button');
-      if (button) button.removeAttribute('disabled');
-    }
-  };
-  const closeButton = context.dom.createElement('button');
-  closeButton.setAttribute('id', 'close-addressbook');
-  closeButton.setAttribute('role', 'button');
-  closeButton.setAttribute('type', 'button');
-  const ariaLabel = specialClass === 'contactsCloseButton' ? 'Close contacts dialog' : 'Close dialog';
-  closeButton.setAttribute('aria-label', ariaLabel);
-  closeButton.setAttribute('tabindex', '0');
-  closeButton.classList.add('contactsCloseButton', specialClass);
-  closeButton.addEventListener('click', setButtonOnClickHandler);
-  closeButton.innerHTML = 'x';
-  return closeButton;
-};
-const createGroupNameForm = (context, contactsModule, addressBooksData, contactData) => {
-  const addGroupEventListener = async event => {
-    event.preventDefault();
-    let selectedAddressBookUri = null;
-    const selectedAddressBookElement = context.dom.querySelectorAll('.selectedAddressBook');
-    selectedAddressBookElement.forEach(addressBookButton => {
-      selectedAddressBookUri = addressBookButton.getAttribute('id');
-    });
-    const groupNameField = context.dom.querySelector('#groupNameInput');
-    // @ts-ignore
-    const enteredGroupName = groupNameField.value;
-    if (!selectedAddressBookUri) {
-      (0, _contactsErrors.addErrorToErrorDisplay)(context, _texts.errorNotExistsAddressBookUri);
-      return;
-    }
-    if (enteredGroupName) {
-      // add group first 
-      try {
-        const newGroupUri = await contactsModule.createNewGroup({
-          addressBookUri: selectedAddressBookUri,
-          groupName: enteredGroupName
-        });
-        const newGroup = {
-          name: enteredGroupName,
-          uri: newGroupUri
-        };
-        const wasUpdated = (0, _contactsHelpers.addGroupToAddressBookData)(addressBooksData, selectedAddressBookUri, newGroup);
-        if (!wasUpdated) {
-          (0, _contactsErrors.addErrorToErrorDisplay)(context, _texts.errorNotExistsAddressBookUri);
-          return;
-        }
-        const removeGroupAddButton = context.dom.getElementById('contacts-create-group-button');
-        if (removeGroupAddButton) removeGroupAddButton.remove();
-        const groupListDiv = context.dom.querySelector('#group-list');
-        if (groupListDiv) {
-          groupListDiv.appendChild(createGroupButton(context, newGroup));
-          groupListDiv.appendChild(createAddressBookGroupCreationButton(context, contactsModule, addressBooksData, contactData));
-        }
-        newGroupForm.remove();
-        removePopupOverlayIfNoPopup(context);
-      } catch (error) {
-        (0, _contactsErrors.addErrorToErrorDisplay)(context, `${_texts.errorGroupCreation}\n${error}`);
-      }
-    }
-  };
-  const newGroupForm = context.dom.createElement('form');
-  newGroupForm.addEventListener('submit', addGroupEventListener);
-  newGroupForm.innerHTML = 'Create a new group';
-  newGroupForm.setAttribute('id', 'new-group-form');
-  newGroupForm.classList.add('contactsPopupMessage', 'contactsNewGroupForm');
-  const groupNameLabel = context.dom.createElement('label');
-  groupNameLabel.classList.add('label');
-  groupNameLabel.setAttribute('for', 'groupNameInput');
-  const groupNameInputBox = context.dom.createElement('input');
-  groupNameInputBox.type = 'text';
-  groupNameInputBox.name = 'groupName';
-  groupNameInputBox.id = 'groupNameInput';
-  groupNameInputBox.placeholder = 'New group name';
-  groupNameInputBox.classList.add('input', 'contactsGroupInput');
-  const submitButton = createAddGroupButton(context, newGroupForm);
-  const closeButton = createCloseButton(context, newGroupForm, 'contactsGroupCreationCloseButton');
-  newGroupForm.appendChild(groupNameLabel);
-  newGroupForm.appendChild(groupNameInputBox);
-  newGroupForm.appendChild(submitButton);
-  newGroupForm.appendChild(closeButton);
-  return newGroupForm;
-};
-const createAddGroupButton = (context, form) => {
-  const setButtonOnClickHandler = async event => {
-    event.preventDefault();
-    form.requestSubmit();
-  };
-  const button = context.dom.createElement('button');
-  button.setAttribute('id', 'contacts-create-group-button');
-  button.setAttribute('type', 'button');
-  button.setAttribute('role', 'button');
-  button.setAttribute('aria-label', 'Create a new group in the selected address book');
-  button.setAttribute('tabindex', '0');
-  button.textContent = 'Create Group';
-  button.classList.add('contactsActionButton', 'contactsCreateGroupCreationButton');
-  button.addEventListener('click', setButtonOnClickHandler);
-  return button;
-};
-const handleContactExists = (context, contactsModule, addressBooksData, contactData, contactExistsByWebID, contactExistsByName) => {
-  if (contactExistsByWebID) {
-    (0, _contactsErrors.addErrorToErrorDisplay)(context, _texts.contactExistsMessage);
-    return true;
-  } else if (contactExistsByName) {
-    // need to disable and possibly grey out the dialog
-    const selectorDialog = context.dom.getElementById('contacts-selector-dialog');
-    const contactExistsDiv = context.dom.createElement('div');
-    contactExistsDiv.setAttribute('role', 'alert');
-    contactExistsDiv.setAttribute('aria-live', 'assertive');
-    contactExistsDiv.setAttribute('tabindex', '0');
-    contactExistsDiv.setAttribute('aria-label', 'Alert message indicating that the contact already exists');
-    contactExistsDiv.setAttribute('id', 'contacts-contact-exists');
-    contactExistsDiv.classList.add('contactsContactExistsAlert');
-    contactExistsDiv.innerHTML = `${contactData.name} already exists. \n Do you want to add their WebID?`;
-    const confirmButton = context.dom.createElement('button');
-    confirmButton.setAttribute('id', 'contacts-confirm-add-webid-button');
-    confirmButton.setAttribute('role', 'button');
-    confirmButton.setAttribute('type', 'button');
-    confirmButton.setAttribute('aria-label', 'Confirm adding the contact webID to the existing contact');
-    confirmButton.setAttribute('tabindex', '0');
-    confirmButton.classList.add('contactsConfirmButton');
-    confirmButton.innerHTML = 'Yes';
-    confirmButton.addEventListener('click', async event => {
-      event.preventDefault();
-      await (0, _contactsHelpers.addWebIDToExistingContact)(context, contactsModule, addressBooksData, contactData.webID, contactExistsByName);
-      finalizeContactEntry(context, addressBooksData, contactData, addressBooksData.contactWebIDs.get(contactData.webID));
-      (0, _contactsHelpers.refreshButton)(context, addressBooksData, contactData);
-    });
-    const cancelButton = context.dom.createElement('button');
-    cancelButton.setAttribute('id', 'contacts-cancel-add-webid-button');
-    cancelButton.setAttribute('role', 'button');
-    cancelButton.setAttribute('type', 'button');
-    cancelButton.setAttribute('aria-label', 'Cancel adding the contact webID to the existing contact');
-    cancelButton.setAttribute('tabindex', '0');
-    cancelButton.classList.add('contactsCancelButton');
-    cancelButton.innerHTML = 'No';
-    cancelButton.addEventListener('click', event => {
-      event.preventDefault();
-      selectorDialog.remove();
-      (0, _buttonsHelper.complain)(getButtonContainer(context), context, 'Contact was not added');
-      setTimeout(() => {
-        (0, _buttonsHelper.clearPreviousMessage)(getButtonContainer(context));
-      }, 2000);
-      (0, _contactsHelpers.refreshButton)(context, addressBooksData, contactData);
-    });
-    const actionsDiv = context.dom.createElement('div');
-    actionsDiv.setAttribute('id', 'contacts-contact-exists-actions');
-    actionsDiv.setAttribute('role', 'group');
-    actionsDiv.setAttribute('aria-label', 'Actions for existing contact alert');
-    actionsDiv.setAttribute('tabindex', '0');
-    actionsDiv.classList.add('contactsContactExistsActions');
-    actionsDiv.appendChild(confirmButton);
-    actionsDiv.appendChild(cancelButton);
-    contactExistsDiv.appendChild(actionsDiv);
-    showPopupOverlay(context);
-    selectorDialog.appendChild(contactExistsDiv);
-    return true;
-  }
-  return false;
-};
-const finalizeContactEntry = (context, addressBooksData, contactData, contactUri) => {
-  addressBooksData.contactWebIDs.set(contactData.webID, contactUri);
-  const selectorDialog = context.dom.getElementById('contacts-selector-dialog');
-  selectorDialog.remove();
-  const buttonContainer = getButtonContainer(context);
-  (0, _buttonsHelper.mention)(buttonContainer, _texts.contactWasAddedSuccesMessage);
-  const button = context.dom.getElementById('add-to-contacts-button');
-  button.removeAttribute('disabled');
-  setTimeout(() => {
-    (0, _buttonsHelper.clearPreviousMessage)(buttonContainer);
-  }, 2000);
-  (0, _contactsHelpers.refreshButton)(context, addressBooksData, contactData);
-};
-const createGroupButton = (context, group) => {
-  const setButtonOnClickHandler = async event => {
-    event.preventDefault();
-    const selectedGroupButton = event.target;
-    const previouslySelected = selectedGroupButton.classList.contains('contactsSelectedButton');
-    if (previouslySelected) {
-      selectedGroupButton.classList.remove('contactsSelectedButton', 'selectedGroup');
-      (0, _contactsErrors.checkAndAddErrorDisplay)(context, _texts.groupIsRequired);
-    } else {
-      selectedGroupButton.classList.add('contactsSelectedButton', 'selectedGroup');
-      checkAndRemoveErrorDisplay(context);
-    }
-  };
-  const button = context.dom.createElement('button');
-  button.setAttribute('value', group.name);
-  button.setAttribute('id', group.uri);
-  button.setAttribute('type', 'button');
-  button.setAttribute('role', 'button');
-  button.setAttribute('aria-label', 'Select group ' + group.name);
-  button.setAttribute('tabindex', '0');
-  button.classList.add('contactsButton');
-  button.addEventListener('click', setButtonOnClickHandler);
-  button.innerHTML = group.name;
-  return button;
-};
-function getButtonContainer(context) {
-  const buttonContainer = context.dom.getElementById('add-to-contacts-button-container');
-  return buttonContainer;
-}
-const showPopupOverlay = context => {
-  const selectorDialog = context.dom.getElementById('contacts-selector-dialog');
-  if (!selectorDialog) return;
-  selectorDialog.classList.add(CONTACTS_OVERLAY_ACTIVE_CLASS);
-  const existingOverlay = selectorDialog.querySelector(`#${CONTACTS_POPUP_OVERLAY_ID}`);
-  if (existingOverlay) return;
-  const overlay = context.dom.createElement('div');
-  overlay.setAttribute('role', 'popupOverlay');
-  overlay.setAttribute('aria-label', 'Overlay to focus on the active popup message and disable interaction with the rest of the dialog');
-  overlay.setAttribute('tabindex', '0');
-  overlay.setAttribute('id', CONTACTS_POPUP_OVERLAY_ID);
-  overlay.classList.add('contactsPopupOverlay');
-  selectorDialog.appendChild(overlay);
-};
-const removePopupOverlayIfNoPopup = context => {
-  const selectorDialog = context.dom.getElementById('contacts-selector-dialog');
-  if (!selectorDialog) return;
-  const activePopup = selectorDialog.querySelector('.contactsPopupMessage, .contactsContactExistsAlert');
-  if (activePopup) return;
-  const overlay = selectorDialog.querySelector(`#${CONTACTS_POPUP_OVERLAY_ID}`);
-  if (overlay) overlay.remove();
-  selectorDialog.classList.remove(CONTACTS_OVERLAY_ACTIVE_CLASS);
-};