profile-pane 3.2.0 → 3.2.2-test.0

package/lib/specialButtons/addContact/ContactCreationDialog.js

@@ -0,0 +1,1123 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createAddressBookContactCreationDialog = void 0;
+exports.createAddressBookContactCreationFooter = createAddressBookContactCreationFooter;
+exports.createAddressBookUriSelectorDialog = void 0;
+exports.getButtonContainer = getButtonContainer;
+exports.handleContactExistsByName = void 0;
+require("solid-ui/components/actions/button");
+var _helpers = require("./helpers");
+var _selectors = require("./selectors");
+var _mutations = require("./mutations");
+var _litHtml = require("lit-html");
+var _buttonsHelper = require("../../buttonsHelper");
+var _texts = require("../../texts");
+var _contactsErrors = require("./contactsErrors");
+var _rdflib = require("rdflib");
+var _profileIcons = require("../../icons-svg/profileIcons");
+var _solidUi = require("solid-ui");
+var _dialog = require("../../ui/dialog");
+var _rdfMutationHelpers = require("../../sections/shared/rdfMutationHelpers");
+var _debug = require("../../utils/debug");
+const CONTACTS_POPUP_OVERLAY_ID = 'contacts-popup-overlay';
+const CONTACTS_OVERLAY_ACTIVE_CLASS = 'contacts-dialog--overlay-active';
+function setContactsListButtonSelected(button, isSelected) {
+  const listButton = button;
+  listButton.selected = isSelected;
+  if (isSelected) {
+    listButton.setAttribute('selected', '');
+  } else {
+    listButton.removeAttribute('selected');
+  }
+  listButton.setAttribute('aria-pressed', isSelected ? 'true' : 'false');
+}
+function isContactsListButtonSelected(button) {
+  if (!(button instanceof HTMLElement)) return false;
+  const listButton = button;
+  return listButton.selected || button.hasAttribute('selected');
+}
+function createContactsButtonElement(context, options) {
+  const button = context.dom.createElement('solid-ui-button');
+  button.setAttribute('type', options.type || 'button');
+  button.setAttribute('variant', options.variant || 'secondary');
+  button.setAttribute('size', options.size || 'sm');
+  if (options.id) button.setAttribute('id', options.id);
+  if (options.ariaLabel) button.setAttribute('aria-label', options.ariaLabel);
+  button.setAttribute('aria-pressed', 'false');
+  if (options.contentAlign) button.setAttribute('content-align', options.contentAlign);
+  if (options.classes?.length) button.classList.add(...options.classes);
+  if (options.label) button.textContent = options.label;
+  return button;
+}
+const createAddressBookContactCreationDialog = (context, contactsModule, contactData, addressBooksData) => {
+  const addressBookContactCreationDialog = context.dom.createElement('form');
+  addressBookContactCreationDialog.classList.add('contacts-dialog__frame', 'contacts-dialog__content', 'flex-column');
+  addressBookContactCreationDialog.setAttribute('id', 'contacts-addressbook-picker-dialog');
+  const dialogDescription = context.dom.createElement('p');
+  dialogDescription.setAttribute('id', 'contacts-dialog-description');
+  dialogDescription.classList.add('contacts-dialog__description');
+  dialogDescription.textContent = 'Choose an address book and group for this contact, or create them first.';
+  addressBookContactCreationDialog.setAttribute('aria-describedby', 'contacts-dialog-description');
+  const mainContent = context.dom.createElement('div');
+  mainContent.classList.add('contacts-dialog__main');
+  const addressBookContactCreationDiv = context.dom.createElement('section');
+  addressBookContactCreationDiv.setAttribute('aria-label', 'Contact creation options');
+  addressBookContactCreationDiv.classList.add('contacts-dialog__body', 'contacts-dialog__creation', 'flex-column');
+  const addressBookDetailsSection = createAddressBookDetailsSection(context);
+  const statusRegion = createContactsStatusRegion(context);
+  const addressBookListDiv = createAddressBookListSection(context, contactsModule, contactData, addressBooksData);
+  const inlinePanelRegion = createInlinePanelRegion(context);
+  addressBookDetailsSection.appendChild(addressBookListDiv);
+  addressBookDetailsSection.appendChild(inlinePanelRegion);
+  addressBookContactCreationDiv.appendChild(addressBookDetailsSection);
+  mainContent.appendChild(dialogDescription);
+  mainContent.appendChild(addressBookContactCreationDiv);
+  addressBookContactCreationDialog.appendChild(mainContent);
+  addressBookContactCreationDialog.appendChild(statusRegion);
+  setTimeout(() => {
+    const firstAction = addressBookContactCreationDialog.querySelector('#addressbook-list button, #contacts-create-addressbook-button, #contacts-addressbook-uri-entry-button');
+    if (firstAction) firstAction.focus();
+  }, 0);
+  return addressBookContactCreationDialog;
+};
+exports.createAddressBookContactCreationDialog = createAddressBookContactCreationDialog;
+function createAddressBookContactCreationFooter(context, contactsModule, addressBooksData, contactData) {
+  const footer = context.dom.createElement('div');
+  footer.classList.add('contacts-dialog__footer');
+  const cancelButton = createDialogCancelButton(context);
+  const submitButton = createNewContactCreationButton(context, contactsModule, addressBooksData, contactData);
+  footer.appendChild(cancelButton);
+  footer.appendChild(submitButton);
+  return footer;
+}
+
+// Backward-compatible export name used by consumers and tests.
+const createAddressBookUriSelectorDialog = exports.createAddressBookUriSelectorDialog = createAddressBookContactCreationDialog;
+function createPopupHeader(context, title, titleId, closeButton) {
+  const header = context.dom.createElement('div');
+  header.classList.add('contacts-dialog__header', 'contacts-dialog__header--popup');
+  const heading = context.dom.createElement('h3');
+  heading.setAttribute('id', titleId);
+  heading.classList.add('contacts-dialog__title');
+  heading.textContent = title;
+  header.appendChild(heading);
+  header.appendChild(closeButton);
+  return header;
+}
+const createAddressBookDetailsSection = context => {
+  const addressBookDetailsSection = context.dom.createElement('section');
+  addressBookDetailsSection.setAttribute('id', 'addressbook-details-section');
+  addressBookDetailsSection.classList.add('contacts-dialog__details', 'flex-row');
+  return addressBookDetailsSection;
+};
+const createAddressBookCreationButton = (context, contactsModule, addressBooksData, contactData) => {
+  const setButtonOnClickHandler = async event => {
+    event.preventDefault();
+    resetSelectedAddressBookState(context);
+    const newAddressBookForm = createNewAddressBookForm(context, addressBooksData, contactsModule, contactData);
+    renderInlinePanel(context, newAddressBookForm);
+  };
+  const addressBookCreationButton = createContactsButtonElement(context, {
+    id: 'contacts-create-addressbook-button',
+    type: 'button',
+    label: 'Create Address Book',
+    variant: 'primary',
+    size: 'md',
+    classes: ['contacts-dialog__action-button', 'contacts-dialog__action-button--primary']
+  });
+  addressBookCreationButton.addEventListener('click', setButtonOnClickHandler);
+  return addressBookCreationButton;
+};
+const createAddressBookUriEntryDialog = (context, contactsModule, addressBooksData, contactData) => {
+  const addressBookUriEntryDialog = context.dom.createElement('section');
+  addressBookUriEntryDialog.setAttribute('aria-labelledby', 'contacts-addressbook-uri-entry-title');
+  addressBookUriEntryDialog.setAttribute('id', 'contacts-addressbook-uri-entry');
+  addressBookUriEntryDialog.classList.add('contacts-dialog__popup', 'contacts-dialog__uri-entry', 'flex-column');
+  const closeButton = createCloseButton(context, addressBookUriEntryDialog);
+  addressBookUriEntryDialog.appendChild(createPopupHeader(context, 'Enter address book URI', 'contacts-addressbook-uri-entry-title', closeButton));
+  addressBookUriEntryDialog.appendChild(createAddressBookUriEntryForm(context, contactsModule, addressBooksData, contactData));
+  return addressBookUriEntryDialog;
+};
+const createAddressBookUriEntryButton = (context, contactsModule, addressBooksData, contactData) => {
+  const setButtonOnClickHandler = async event => {
+    event.preventDefault();
+    resetSelectedAddressBookState(context);
+    const addressBookUriEntryDialog = createAddressBookUriEntryDialog(context, contactsModule, addressBooksData, contactData);
+    renderInlinePanel(context, addressBookUriEntryDialog);
+  };
+  const addressBookCreationButton = createContactsButtonElement(context, {
+    id: 'contacts-addressbook-uri-entry-button',
+    type: 'button',
+    label: 'Enter Address Book URI',
+    variant: 'primary',
+    size: 'md',
+    classes: ['contacts-dialog__action-button', 'contacts-dialog__action-button--primary']
+  });
+  addressBookCreationButton.addEventListener('click', setButtonOnClickHandler);
+  return addressBookCreationButton;
+};
+const createAddressBookUriEntryForm = (context, contactsModule, addressBooksData, contactData) => {
+  let submitButton = null;
+  const setButtonOnSubmitHandler = async event => {
+    event.preventDefault();
+    await runWithButtonLoading(context, submitButton, 'Adding...', async () => {
+      try {
+        const addressBookUriField = context.dom.querySelector('#addressBookUriInput');
+        const enteredAddressBookUri = sanitizeInput(addressBookUriField?.value || '');
+        if (addressBookUriField) addressBookUriField.value = enteredAddressBookUri;
+        if (!enteredAddressBookUri) {
+          (0, _contactsErrors.addErrorToErrorDisplay)(context, _texts.errorNotExistsAddressBookUri);
+          return;
+        }
+        const uriCheck = enteredAddressBookUri.substring(enteredAddressBookUri.length - 5, enteredAddressBookUri.length);
+        const normalizedUri = uriCheck === '#this' ? enteredAddressBookUri : enteredAddressBookUri + '#this';
+        const books = await (0, _mutations.addANewAddressBookUriToAddressBooks)(context, contactsModule, addressBooksData, normalizedUri);
+        const addressBookListDiv = context.dom.querySelector('#addressbook-list');
+        if (addressBookListDiv) {
+          clearInlinePanel(context);
+          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));
+          announceContactsStatus(context, 'Address book added to the list.');
+        }
+      } catch (error) {
+        (0, _debug.error)('Contacts address book URI processing failed', error);
+        (0, _contactsErrors.addErrorToErrorDisplay)(context, (0, _contactsErrors.formatContactsDialogError)(_texts.errorProcessingUriAddressBook, error));
+      }
+    });
+  };
+  const inputAddressUriEventListener = event => {
+    const input = event.target;
+    input.value = sanitizeInput(input.value);
+    (0, _contactsErrors.checkAndRemoveErrorDisplay)(context);
+  };
+  const addressBookUriEntryForm = context.dom.createElement('form');
+  addressBookUriEntryForm.setAttribute('id', 'contacts-address-uri-entry-form');
+  addressBookUriEntryForm.classList.add('contacts-dialog__uri-entry-form', 'flex-column');
+  addressBookUriEntryForm.method = 'post';
+  addressBookUriEntryForm.addEventListener('submit', setButtonOnSubmitHandler);
+  const popupBody = createPopupSection(context, 'contacts-dialog__popup-body', 'flex-column-center', 'text-center');
+  const popupFooter = createPopupSection(context, 'contacts-dialog__popup-footer');
+  const addressBookUriEntryLabel = context.dom.createElement('label');
+  addressBookUriEntryLabel.setAttribute('for', 'addressBookUriInput');
+  const addressBookUriEntryLabelText = context.dom.createElement('span');
+  addressBookUriEntryLabelText.classList.add('sr-only');
+  addressBookUriEntryLabelText.textContent = 'Address book URI';
+  addressBookUriEntryLabel.appendChild(addressBookUriEntryLabelText);
+  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', 'contacts-dialog__uri-input');
+  addressBookNameInputBox.addEventListener('input', inputAddressUriEventListener);
+  popupBody.appendChild(addressBookUriEntryLabel);
+  popupBody.appendChild(addressBookNameInputBox);
+  submitButton = createAddressBookUriEntryAddButton(context);
+  popupFooter.appendChild(submitButton);
+  addressBookUriEntryForm.appendChild(popupBody);
+  addressBookUriEntryForm.appendChild(popupFooter);
+  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 = createContactsButtonElement(context, {
+    id: 'contacts-addressbook-entry-button',
+    type: 'submit',
+    ariaLabel: 'Submit new address book URI',
+    variant: 'primary',
+    size: 'md',
+    classes: ['contacts-dialog__action-button', 'contacts-dialog__action-button--primary', 'contacts-dialog__uri-submit', 'inline-flex-row', 'justify-center']
+  });
+  entryButton.addEventListener('click', setButtonOnClickHandler);
+  entryButton.textContent = 'Add';
+  return entryButton;
+};
+const createAddressBookListSection = (context, contactsModule, contactData, addressBooksData) => {
+  const addressBookListSection = context.dom.createElement('section');
+  addressBookListSection.setAttribute('class', 'contacts-dialog__address-book-list');
+  addressBookListSection.setAttribute('aria-label', 'Select an address book for this contact.');
+  addressBookListSection.setAttribute('aria-describedby', 'addressbook-list');
+  addressBookListSection.setAttribute('id', 'addressbook-list');
+  const heading = context.dom.createElement('h3');
+  heading.classList.add('contacts-dialog__column-title');
+  heading.textContent = 'Address Books';
+  addressBookListSection.appendChild(heading);
+  addressBooksData.public.forEach((addressBook, addressBookUri) => {
+    addressBookListSection.appendChild(createAddressBookButton(context, contactsModule, addressBooksData, addressBook, addressBookUri, contactData));
+  });
+  addressBooksData.private.forEach((addressBook, addressBookUri) => {
+    addressBookListSection.appendChild(createAddressBookButton(context, contactsModule, addressBooksData, addressBook, addressBookUri, contactData));
+  });
+  const addressBookCreationButton = createAddressBookCreationButton(context, contactsModule, addressBooksData, contactData);
+  const addressBookUriEntryButton = createAddressBookUriEntryButton(context, contactsModule, addressBooksData, contactData);
+  addressBookListSection.appendChild(addressBookCreationButton);
+  addressBookListSection.appendChild(addressBookUriEntryButton);
+  return addressBookListSection;
+};
+const createAddressBookGroupCreationButton = (context, contactsModule, addressBooksData, contactData) => {
+  const setButtonOnClickHandler = async event => {
+    event.preventDefault();
+    const groupNameForm = context.dom.getElementById('new-group-form');
+    if (!groupNameForm) {
+      const newGroupForm = createGroupNameForm(context, contactsModule, addressBooksData, contactData);
+      renderInlinePanel(context, newGroupForm);
+    }
+  };
+  const groupCreationButton = createContactsButtonElement(context, {
+    id: 'contacts-create-group-button',
+    type: 'button',
+    label: 'Create Group',
+    variant: 'primary',
+    size: 'md',
+    classes: ['contacts-dialog__action-button', 'contacts-dialog__action-button--primary']
+  });
+  groupCreationButton.addEventListener('click', setButtonOnClickHandler);
+  return groupCreationButton;
+};
+const createGroupListSection = (context, contactsModule, addressBooksData, addressBook, contactData) => {
+  const groupListSection = context.dom.createElement('section');
+  groupListSection.setAttribute('class', 'contacts-dialog__group-list flex-column');
+  groupListSection.setAttribute('aria-label', 'Select a group to add your contact to.');
+  groupListSection.setAttribute('aria-describedby', 'group-list');
+  groupListSection.setAttribute('id', 'group-list');
+  const heading = context.dom.createElement('h3');
+  heading.classList.add('contacts-dialog__column-title');
+  heading.textContent = 'Groups';
+  groupListSection.appendChild(heading);
+  if (addressBook) {
+    addressBook.groups.map(group => {
+      groupListSection.appendChild(createGroupButton(context, group));
+    });
+  }
+  groupListSection.appendChild(createAddressBookGroupCreationButton(context, contactsModule, addressBooksData, contactData));
+  return groupListSection;
+};
+const createNewContactCreationButton = (context, contactsModule, addressBooksData, contactData) => {
+  let button;
+  const setButtonOnClickHandler = async event => {
+    event.preventDefault();
+    await runWithButtonLoading(context, button, 'Adding...', async () => {
+      const contactExistsByWebID = (0, _selectors.checkIfContactExistsByWebID)(addressBooksData, contactData.webID);
+      const contactExistsByNameUri = (0, _selectors.checkIfContactExistsByName)(addressBooksData, contactData.name);
+      const contactExistsHandled = handleContactExistsFromNonRegisteredAddressBook(context, addressBooksData, contactData, contactExistsByWebID, contactExistsByNameUri);
+      if (contactExistsHandled) return;
+      let selectedAddressBookUri = null;
+      const selectedGroupUris = [];
+      const selectedAddressBookElements = context.dom.querySelectorAll('#addressbook-list .contacts-dialog__list-button[selected]');
+      selectedAddressBookElements.forEach(addressBookButton => {
+        selectedAddressBookUri = addressBookButton.getAttribute('id');
+      });
+      const selectedGroupElements = context.dom.querySelectorAll('#group-list .contacts-dialog__list-button[selected]');
+      selectedGroupElements.forEach(groupButtons => {
+        selectedGroupUris.push(groupButtons.getAttribute('id'));
+      });
+      if (selectedGroupUris.length) {
+        const selectedAddressBookUris = {
+          addressBookUri: selectedAddressBookUri,
+          groupUris: selectedGroupUris
+        };
+        try {
+          const contactUri = await (0, _mutations.createContactInAddressBook)(context, contactsModule, contactData, selectedAddressBookUris);
+          finalizeContactEntry(context, addressBooksData, contactData, contactUri);
+        } catch (error) {
+          (0, _debug.error)('Contacts contact creation failed', error);
+          (0, _contactsErrors.addErrorToErrorDisplay)(context, (0, _contactsErrors.formatContactsDialogError)(_texts.errorContactCreation, error));
+        }
+      } else {
+        (0, _contactsErrors.addErrorToErrorDisplay)(context, _texts.groupIsRequired);
+      }
+    });
+  };
+  button = createContactsButtonElement(context, {
+    id: 'contacts-submit-contact-button',
+    type: 'submit',
+    variant: 'primary',
+    size: 'md',
+    classes: ['contacts-dialog__action-button', 'contacts-dialog__action-button--primary', 'contacts-dialog__submit-contact']
+  });
+  button.disabled = true;
+  button.setAttribute('aria-disabled', 'true');
+  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.currentTarget;
+    const previouslySelected = isContactsListButtonSelected(selectedAddressBookButton);
+    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('#addressbook-list .contacts-dialog__list-button[selected]');
+    selectedAddressBookElements.forEach(addressBookButton => {
+      setContactsListButtonSelected(addressBookButton, false);
+    });
+    if (previouslySelected) {
+      setContactsListButtonSelected(selectedAddressBookButton, false);
+      clearInlinePanel(context);
+    } else {
+      clearInlinePanel(context);
+      setContactsListButtonSelected(selectedAddressBookButton, true);
+      // selected address book code
+      const selectedAddressBookUri = selectedAddressBookButton.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 groupListSection = createGroupListSection(context, contactsModule, addressBooksData, addressBook, contactData);
+      addressBookDetailsSection.appendChild(groupListSection);
+    }
+    selectedAddressBookButton.blur();
+    syncAddContactActionState(context);
+  };
+  const button = createContactsButtonElement(context, {
+    id: addressBookUri,
+    type: 'button',
+    ariaLabel: 'Select address book ' + addressBook.name,
+    variant: 'secondary',
+    size: 'sm',
+    contentAlign: 'start',
+    classes: ['contacts-dialog__list-button']
+  });
+  button.setAttribute('value', addressBook.name);
+  button.addEventListener('click', setButtonOnClickHandler);
+  button.textContent = addressBook.name;
+  return button;
+};
+const createNewAddressBookForm = (context, addressBooksData, contactsModule, contactData) => {
+  let submitButton = null;
+  const newAddressBookEventListener = async event => {
+    event.preventDefault();
+    await runWithButtonLoading(context, submitButton, 'Creating...', async () => {
+      try {
+        let enteredAddressBookUri = null;
+        let newGroupNode = null;
+        const addressNameField = context.dom.querySelector('#addressBookNameInput');
+
+        // @ts-ignore
+        const enteredAddressName = sanitizeInput(addressNameField.value);
+        // @ts-ignore
+        addressNameField.value = enteredAddressName;
+        const addressContainerField = context.dom.querySelector('#addressBookContainerInput');
+
+        // @ts-ignore
+        const enteredAddressContainer = sanitizeInput(addressContainerField.value);
+        // @ts-ignore
+        addressContainerField.value = enteredAddressContainer;
+        const groupNameField = context.dom.querySelector('#groupNameInput');
+        // @ts-ignore
+        const enteredGroupName = sanitizeInput(groupNameField.value);
+        // @ts-ignore
+        groupNameField.value = enteredGroupName;
+        if (!enteredAddressName) return;
+        enteredAddressBookUri = await (0, _mutations.handleAddressBookCreation)(context, enteredAddressContainer, enteredAddressName);
+        if (!enteredAddressBookUri) {
+          throw new Error(_texts.errorNotExistsAddressBookUri);
+        }
+        const resolvedAddressBookUri = enteredAddressBookUri;
+        if (enteredGroupName) {
+          const selectedAddressBookNode = new _rdflib.NamedNode(resolvedAddressBookUri);
+          newGroupNode = await saveNewGroupToAddressBook(context, selectedAddressBookNode, enteredGroupName);
+        }
+        const nextAddressBooksData = (0, _helpers.addAddressBookToAddressBooksData)(addressBooksData, resolvedAddressBookUri, {
+          name: enteredAddressName,
+          groups: newGroupNode ? [{
+            name: enteredGroupName,
+            uri: newGroupNode.value
+          }] : [],
+          contacts: []
+        }, 'private');
+        refreshAddressBookDialogContents(context, contactsModule, contactData, nextAddressBooksData, resolvedAddressBookUri, newGroupNode?.value || null);
+        clearInlinePanel(context);
+        removePopupOverlayIfNoPopup(context);
+      } catch (error) {
+        (0, _debug.error)('Contacts address book creation failed', error);
+        (0, _contactsErrors.addErrorToErrorDisplay)(context, (0, _contactsErrors.formatContactsDialogError)(_texts.errorAddressBookCreation, error));
+      }
+    });
+  };
+  const submitFormEventListener = event => {
+    event.preventDefault();
+    newAddressBookForm.requestSubmit();
+  };
+  const newAddressBookForm = context.dom.createElement('form');
+  newAddressBookForm.setAttribute('aria-labelledby', 'new-addressbook-form-title');
+  newAddressBookForm.method = 'post';
+  newAddressBookForm.setAttribute('id', 'new-addressbook-form');
+  newAddressBookForm.classList.add('contacts-dialog__popup', 'contacts-dialog__address-form', 'flex-column');
+  const addressBookNameLabel = context.dom.createElement('label');
+  addressBookNameLabel.setAttribute('for', 'addressBookNameInput');
+  const addressBookNameLabelText = context.dom.createElement('span');
+  addressBookNameLabelText.classList.add('sr-only');
+  addressBookNameLabelText.textContent = 'Address book name';
+  addressBookNameLabel.appendChild(addressBookNameLabelText);
+  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');
+  addressBookNameInputBox.required = true;
+  const addressBookContainerLabel = context.dom.createElement('label');
+  addressBookContainerLabel.setAttribute('for', 'addressBookContainerInput');
+  const addressBookContainerLabelText = context.dom.createElement('span');
+  addressBookContainerLabelText.classList.add('sr-only');
+  addressBookContainerLabelText.textContent = 'Address book container';
+  addressBookContainerLabel.appendChild(addressBookContainerLabelText);
+  const addressBookContainerInputBox = context.dom.createElement('input');
+  addressBookContainerInputBox.type = 'text';
+  addressBookContainerInputBox.name = 'addressBookContainer';
+  addressBookContainerInputBox.id = 'addressBookContainerInput';
+  addressBookContainerInputBox.placeholder = 'Address book container';
+  addressBookContainerInputBox.classList.add('input');
+  addressBookContainerInputBox.required = true;
+  const groupNameLabel = context.dom.createElement('label');
+  groupNameLabel.setAttribute('for', 'groupNameInput');
+  const groupNameLabelText = context.dom.createElement('span');
+  groupNameLabelText.classList.add('sr-only');
+  groupNameLabelText.textContent = 'Group name';
+  groupNameLabel.appendChild(groupNameLabelText);
+  const groupNameInputBox = context.dom.createElement('input');
+  groupNameInputBox.type = 'text';
+  groupNameInputBox.name = 'groupName';
+  groupNameInputBox.id = 'groupNameInput';
+  groupNameInputBox.placeholder = 'New group name';
+  groupNameInputBox.classList.add('input');
+  groupNameInputBox.required = true;
+  const validationMessage = createValidationMessage(context);
+  validationMessage.setAttribute('id', 'contacts-addressbook-validation-message');
+  addressBookNameInputBox.setAttribute('aria-describedby', 'contacts-addressbook-validation-message');
+  addressBookContainerInputBox.setAttribute('aria-describedby', 'contacts-addressbook-validation-message');
+  groupNameInputBox.setAttribute('aria-describedby', 'contacts-addressbook-validation-message');
+  attachSanitizingValidation(addressBookNameInputBox, validationMessage);
+  attachSanitizingValidation(addressBookContainerInputBox, validationMessage);
+  attachSanitizingValidation(groupNameInputBox, validationMessage);
+  submitButton = createContactsButtonElement(context, {
+    type: 'submit',
+    variant: 'primary',
+    size: 'md',
+    classes: ['contacts-dialog__action-button', 'contacts-dialog__action-button--primary', 'contacts-dialog__address-submit']
+  });
+  submitButton.addEventListener('click', submitFormEventListener);
+  submitButton.textContent = 'Add';
+  const closeButton = createCloseButton(context, newAddressBookForm);
+  const popupBody = createPopupSection(context, 'contacts-dialog__popup-body', 'flex-column');
+  const popupFooter = createPopupSection(context, 'contacts-dialog__popup-footer');
+  newAddressBookForm.appendChild(createPopupHeader(context, 'Create a new address book', 'new-addressbook-form-title', closeButton));
+  popupBody.appendChild(addressBookNameLabel);
+  popupBody.appendChild(addressBookNameInputBox);
+  popupBody.appendChild(addressBookContainerLabel);
+  popupBody.appendChild(addressBookContainerInputBox);
+  popupBody.appendChild(groupNameLabel);
+  popupBody.appendChild(groupNameInputBox);
+  popupBody.appendChild(validationMessage);
+  popupFooter.appendChild(submitButton);
+  newAddressBookForm.appendChild(popupBody);
+  newAddressBookForm.appendChild(popupFooter);
+  newAddressBookForm.addEventListener('submit', newAddressBookEventListener);
+  return newAddressBookForm;
+};
+function removeDialogElement(context, element) {
+  if (element && element.classList.contains('contacts-dialog__inline-panel')) {
+    clearInlinePanel(context);
+  } else if (element) {
+    element.remove();
+    removePopupOverlayIfNoPopup(context);
+  }
+}
+const createCloseButton = (context, element) => {
+  const buttonID = `${element.id}-close-button`;
+  const setButtonOnClickHandler = event => {
+    event.preventDefault();
+    removeDialogElement(context, element);
+  };
+  const closeButton = createContactsButtonElement(context, {
+    id: buttonID,
+    type: 'button',
+    ariaLabel: 'Close dialog',
+    variant: 'icon',
+    size: 'sm',
+    classes: ['contacts-dialog__close']
+  });
+  closeButton.addEventListener('click', setButtonOnClickHandler);
+  const iconSlot = context.dom.createElement('span');
+  iconSlot.setAttribute('slot', 'icon');
+  (0, _litHtml.render)(_profileIcons.closeIcon, iconSlot);
+  closeButton.appendChild(iconSlot);
+  return closeButton;
+};
+function createDialogCancelButton(context) {
+  const cancelButton = createContactsButtonElement(context, {
+    type: 'button',
+    label: _texts.dialogCancelLabelText,
+    variant: 'secondary',
+    size: 'md',
+    classes: ['contacts-dialog__cancel', 'contacts-dialog__cancel--footer']
+  });
+  cancelButton.addEventListener('click', event => {
+    event.preventDefault();
+    const sharedCancelButton = (0, _dialog.getSharedDialogCancelButton)(context.dom);
+    if (sharedCancelButton) {
+      sharedCancelButton.click();
+    }
+  });
+  return cancelButton;
+}
+function createPopupSection(context, className, ...extraClasses) {
+  const section = context.dom.createElement('div');
+  section.classList.add(className, ...extraClasses);
+  return section;
+}
+function createInlinePanelRegion(context) {
+  const region = context.dom.createElement('section');
+  region.setAttribute('id', 'contacts-inline-panel-region');
+  region.classList.add('contacts-dialog__inline-panel-region');
+  region.setAttribute('aria-live', 'polite');
+  return region;
+}
+function refreshAddressBookDialogContents(context, contactsModule, contactData, addressBooksData, selectedAddressBookUri, selectedGroupUri) {
+  const detailsSection = context.dom.getElementById('addressbook-details-section');
+  if (!detailsSection || !addressBooksData) return;
+  const addressBookListSection = createAddressBookListSection(context, contactsModule, contactData, addressBooksData);
+  const inlinePanelRegion = createInlinePanelRegion(context);
+  detailsSection.replaceChildren();
+  detailsSection.appendChild(addressBookListSection);
+  if (selectedAddressBookUri) {
+    const selectedAddressBook = addressBooksData.public.get(selectedAddressBookUri) || addressBooksData.private.get(selectedAddressBookUri);
+    if (selectedAddressBook) {
+      const groupListSection = createGroupListSection(context, contactsModule, addressBooksData, selectedAddressBook, contactData);
+      detailsSection.appendChild(groupListSection);
+    }
+  }
+  detailsSection.appendChild(inlinePanelRegion);
+  if (selectedAddressBookUri) {
+    const selectedAddressBookButton = context.dom.getElementById(selectedAddressBookUri);
+    if (selectedAddressBookButton) {
+      setContactsListButtonSelected(selectedAddressBookButton, true);
+    }
+  }
+  if (selectedGroupUri) {
+    const selectedGroupButton = context.dom.getElementById(selectedGroupUri);
+    if (selectedGroupButton) {
+      setContactsListButtonSelected(selectedGroupButton, true);
+    }
+  }
+  syncAddContactActionState(context);
+}
+function resetSelectedAddressBookState(context) {
+  const selectedAddressBookElements = context.dom.querySelectorAll('#addressbook-list .contacts-dialog__list-button[selected]');
+  selectedAddressBookElements.forEach(addressBookButton => {
+    setContactsListButtonSelected(addressBookButton, false);
+  });
+  const groupListSection = context.dom.getElementById('group-list');
+  if (groupListSection) groupListSection.remove();
+  syncAddContactActionState(context);
+}
+function clearInlinePanel(context) {
+  const region = context.dom.getElementById('contacts-inline-panel-region');
+  if (!region) return;
+  region.replaceChildren();
+  region.classList.remove('contacts-dialog__inline-panel-region--active');
+  syncAddContactActionState(context);
+}
+function renderInlinePanel(context, element) {
+  const region = context.dom.getElementById('contacts-inline-panel-region');
+  if (!region) return;
+  region.replaceChildren();
+  element.classList.add('contacts-dialog__inline-panel');
+  region.appendChild(element);
+  region.classList.add('contacts-dialog__inline-panel-region--active');
+  syncAddContactActionState(context);
+  focusFirstInputInPopup(element);
+}
+function syncAddContactActionState(context) {
+  const selectedAddressBook = context.dom.querySelector('#addressbook-list .contacts-dialog__list-button[selected]');
+  const selectedGroup = context.dom.querySelector('#group-list .contacts-dialog__list-button[selected]');
+  const inlinePanelRegion = context.dom.getElementById('contacts-inline-panel-region');
+  const hasActiveInlinePanel = inlinePanelRegion?.classList.contains('contacts-dialog__inline-panel-region--active') ?? false;
+  setAddContactActionDisabled(context, !(selectedAddressBook && selectedGroup) || hasActiveInlinePanel);
+}
+function setAddContactActionDisabled(context, disabled) {
+  const actionButton = context.dom.getElementById('contacts-submit-contact-button');
+  if (!actionButton) return;
+  actionButton.disabled = disabled;
+  actionButton.setAttribute('aria-disabled', String(disabled));
+}
+const createGroupNameForm = (context, contactsModule, addressBooksData, contactData) => {
+  let submitButton = null;
+  const addGroupEventListener = async event => {
+    event.preventDefault();
+    await runWithButtonLoading(context, submitButton, 'Creating...', async () => {
+      try {
+        let selectedAddressBookUri = null;
+        const selectedAddressBookElements = context.dom.querySelectorAll('#addressbook-list .contacts-dialog__list-button[selected]');
+        selectedAddressBookElements.forEach(addressBookButton => {
+          selectedAddressBookUri = addressBookButton.getAttribute('id');
+        });
+        const groupNameField = context.dom.querySelector('#groupNameInput');
+        // @ts-ignore
+        const enteredGroupName = sanitizeInput(groupNameField.value);
+        // @ts-ignore
+        groupNameField.value = enteredGroupName;
+        if (!selectedAddressBookUri) {
+          (0, _contactsErrors.addErrorToErrorDisplay)(context, _texts.errorNotExistsAddressBookUri);
+          return;
+        }
+        if (enteredGroupName) {
+          const selectedAddressBookNode = new _rdflib.NamedNode(selectedAddressBookUri);
+          const newGroupNode = await saveNewGroupToAddressBook(context, selectedAddressBookNode, enteredGroupName);
+          const newGroup = {
+            name: enteredGroupName,
+            uri: newGroupNode.value
+          };
+          const wasUpdated = (0, _helpers.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));
+            announceContactsStatus(context, 'Group added to the list.');
+          }
+          clearInlinePanel(context);
+          removePopupOverlayIfNoPopup(context);
+        }
+      } catch (error) {
+        (0, _debug.error)('Contacts group creation failed', error);
+        (0, _contactsErrors.addErrorToErrorDisplay)(context, (0, _contactsErrors.formatContactsDialogError)(_texts.errorGroupCreation, error));
+      }
+    });
+  };
+  const newGroupForm = context.dom.createElement('form');
+  newGroupForm.setAttribute('aria-labelledby', 'new-group-form-title');
+  newGroupForm.addEventListener('submit', addGroupEventListener);
+  newGroupForm.setAttribute('id', 'new-group-form');
+  newGroupForm.classList.add('contacts-dialog__popup', 'contacts-dialog__group-form', 'flex-column');
+  const groupNameLabel = context.dom.createElement('label');
+  groupNameLabel.setAttribute('for', 'groupNameInput');
+  const groupNameLabelText = context.dom.createElement('span');
+  groupNameLabelText.classList.add('sr-only');
+  groupNameLabelText.textContent = 'Group name';
+  groupNameLabel.appendChild(groupNameLabelText);
+  const groupNameInputBox = context.dom.createElement('input');
+  groupNameInputBox.type = 'text';
+  groupNameInputBox.name = 'groupName';
+  groupNameInputBox.id = 'groupNameInput';
+  groupNameInputBox.placeholder = 'New group name';
+  groupNameInputBox.classList.add('input');
+  const validationMessage = createValidationMessage(context);
+  validationMessage.setAttribute('id', 'contacts-group-validation-message');
+  groupNameInputBox.setAttribute('aria-describedby', 'contacts-group-validation-message');
+  attachSanitizingValidation(groupNameInputBox, validationMessage);
+  submitButton = createAddGroupButton(context, newGroupForm);
+  const closeButton = createCloseButton(context, newGroupForm);
+  const popupBody = createPopupSection(context, 'contacts-dialog__popup-body', 'flex-column');
+  const popupFooter = createPopupSection(context, 'contacts-dialog__popup-footer');
+  newGroupForm.appendChild(createPopupHeader(context, 'Create a new group', 'new-group-form-title', closeButton));
+  popupBody.appendChild(groupNameLabel);
+  popupBody.appendChild(groupNameInputBox);
+  popupBody.appendChild(validationMessage);
+  popupFooter.appendChild(submitButton);
+  newGroupForm.appendChild(popupBody);
+  newGroupForm.appendChild(popupFooter);
+  return newGroupForm;
+};
+const createAddGroupButton = (context, form) => {
+  const setButtonOnClickHandler = async event => {
+    event.preventDefault();
+    form.requestSubmit();
+  };
+  const button = createContactsButtonElement(context, {
+    id: 'contacts-create-group-button',
+    type: 'button',
+    label: 'Add',
+    variant: 'primary',
+    size: 'md',
+    classes: ['contacts-dialog__action-button', 'contacts-dialog__action-button--primary', 'contacts-dialog__group-submit']
+  });
+  button.addEventListener('click', setButtonOnClickHandler);
+  return button;
+};
+const handleContactExistsFromNonRegisteredAddressBook = (context, addressBooksData, contactData, contactExistsByWebID, contactExistsByNameUri) => {
+  if (contactExistsByWebID) {
+    (0, _contactsErrors.addErrorToErrorDisplay)(context, _texts.contactExistsMessage);
+    return true;
+  } else if (contactExistsByNameUri) {
+    const fromRegisteredAddressBook = false;
+    const handled = handleContactExistsByName(context, addressBooksData, contactData, contactExistsByNameUri, fromRegisteredAddressBook);
+    return handled;
+  }
+  return false;
+};
+const handleContactExistsByName = (context, addressBooksData, contactData, contactExistsByNameUri, fromRegisteredAddressBook) => {
+  const selectorDialog = context.dom.getElementById('contacts-addressbook-picker-dialog');
+  const useSharedDialog = fromRegisteredAddressBook || !selectorDialog;
+  if (useSharedDialog) {
+    void openSharedContactExistsDialog(context, addressBooksData, contactData, contactExistsByNameUri);
+    return true;
+  }
+  const contactExistsDialog = context.dom.createElement('section');
+  contactExistsDialog.setAttribute('role', 'alertdialog');
+  contactExistsDialog.setAttribute('aria-modal', 'true');
+  contactExistsDialog.setAttribute('aria-labelledby', 'contacts-contact-exists-title');
+  contactExistsDialog.setAttribute('aria-describedby', 'contacts-contact-exists-message');
+  contactExistsDialog.setAttribute('tabindex', '-1');
+  contactExistsDialog.classList.add('contacts-dialog__popup', 'contacts-dialog__contact-exists', 'flex-column');
+  const popupBody = createPopupSection(context, 'contacts-dialog__popup-body', 'flex-column');
+  const popupFooter = createPopupSection(context, 'contacts-dialog__popup-footer');
+  const heading = context.dom.createElement('h3');
+  heading.setAttribute('id', 'contacts-contact-exists-title');
+  heading.classList.add('contacts-dialog__title');
+  heading.textContent = 'Contact already exists';
+  const message = context.dom.createElement('p');
+  message.setAttribute('id', 'contacts-contact-exists-message');
+  message.textContent = `${contactData.name} already exists. Do you want to add their WebID?`;
+  const confirmButton = createContactsButtonElement(context, {
+    type: 'button',
+    label: 'Yes',
+    variant: 'primary',
+    size: 'md',
+    classes: ['contacts-dialog__action-button', 'contacts-dialog__confirm', 'inline-flex-row', 'justify-center']
+  });
+  confirmButton.addEventListener('click', async event => {
+    event.preventDefault();
+    await runWithButtonLoading(context, confirmButton, 'Adding...', async () => {
+      await (0, _mutations.addWebIDToExistingContact)(context, contactData, contactExistsByNameUri);
+      contactExistsDialog.remove();
+      finalizeContactEntry(context, addressBooksData, contactData, addressBooksData.contactWebIDs.get(contactData.webID));
+      (0, _helpers.refreshButton)(context, addressBooksData, contactData);
+    });
+  });
+  const cancelButton = createContactsButtonElement(context, {
+    type: 'button',
+    label: 'No',
+    variant: 'secondary',
+    size: 'md',
+    classes: ['contacts-dialog__cancel', 'inline-flex-row', 'justify-center']
+  });
+  cancelButton.addEventListener('click', event => {
+    event.preventDefault();
+    if (!fromRegisteredAddressBook) {
+      selectorDialog.remove();
+    }
+    contactExistsDialog.remove();
+    (0, _buttonsHelper.complain)(getButtonContainer(context), context, 'Contact was not added');
+    setTimeout(() => {
+      (0, _buttonsHelper.clearPreviousMessage)(getButtonContainer(context));
+    }, 2000);
+    (0, _helpers.refreshButton)(context, addressBooksData, contactData);
+  });
+  popupBody.appendChild(heading);
+  popupBody.appendChild(message);
+  popupFooter.appendChild(confirmButton);
+  popupFooter.appendChild(cancelButton);
+  contactExistsDialog.appendChild(popupBody);
+  contactExistsDialog.appendChild(popupFooter);
+  showPopupOverlay(context);
+  if (selectorDialog) selectorDialog.appendChild(contactExistsDialog);
+  setTimeout(() => contactExistsDialog.focus(), 0);
+  return true;
+};
+exports.handleContactExistsByName = handleContactExistsByName;
+async function openSharedContactExistsDialog(context, addressBooksData, contactData, contactExistsByNameUri) {
+  const form = context.dom.createElement('form');
+  form.classList.add('contacts-dialog__shared-confirm-form');
+  const message = context.dom.createElement('p');
+  message.classList.add('contacts-dialog__shared-confirm-message');
+  const name = context.dom.createElement('span');
+  name.classList.add('contacts-dialog__shared-confirm-name');
+  name.textContent = contactData.name;
+  message.appendChild(name);
+  message.appendChild(context.dom.createTextNode(' already exists. Do you want to add their WebID?'));
+  form.appendChild(message);
+  const result = await (0, _dialog.openInputDialog)({
+    title: 'Contact already exists',
+    dom: context.dom,
+    form,
+    cancelLabel: 'No',
+    submitLabel: 'Yes',
+    onSave: async () => {
+      await (0, _mutations.addWebIDToExistingContact)(context, contactData, contactExistsByNameUri);
+      finalizeContactEntry(context, addressBooksData, contactData, addressBooksData.contactWebIDs.get(contactData.webID));
+      (0, _helpers.refreshButton)(context, addressBooksData, contactData);
+    },
+    formatSaveError: error => {
+      return error instanceof Error ? error.message : _texts.errorAddingContactWebIDToAddressBook;
+    }
+  });
+  if (result) return;
+  (0, _buttonsHelper.complain)(getButtonContainer(context), context, 'Contact was not added');
+  setTimeout(() => {
+    (0, _buttonsHelper.clearPreviousMessage)(getButtonContainer(context));
+  }, 2000);
+  (0, _helpers.refreshButton)(context, addressBooksData, contactData);
+}
+const finalizeContactEntry = (context, addressBooksData, contactData, contactUri) => {
+  const sharedCancelButton = (0, _dialog.getSharedDialogCancelButton)(context.dom);
+  if (sharedCancelButton) {
+    sharedCancelButton.click();
+  } else {
+    (0, _dialog.closeSharedDialog)();
+  }
+  addressBooksData.contactWebIDs.set(contactData.webID, contactUri);
+  const selectorDialog = context.dom.getElementById('contacts-addressbook-picker-dialog');
+  if (selectorDialog) {
+    selectorDialog.remove();
+  }
+  (0, _helpers.refreshButton)(context, addressBooksData, contactData);
+};
+const createGroupButton = (context, group) => {
+  const setButtonOnClickHandler = async event => {
+    event.preventDefault();
+    const selectedGroupButton = event.currentTarget;
+    const previouslySelected = isContactsListButtonSelected(selectedGroupButton);
+    if (previouslySelected) {
+      setContactsListButtonSelected(selectedGroupButton, false);
+      (0, _contactsErrors.checkAndAddErrorToDisplay)(context, _texts.groupIsRequired);
+    } else {
+      setContactsListButtonSelected(selectedGroupButton, true);
+      (0, _contactsErrors.checkAndRemoveErrorDisplay)(context);
+    }
+    selectedGroupButton.blur();
+    syncAddContactActionState(context);
+  };
+  const button = createContactsButtonElement(context, {
+    id: group.uri,
+    type: 'button',
+    ariaLabel: 'Select group ' + group.name,
+    variant: 'secondary',
+    size: 'sm',
+    contentAlign: 'start',
+    classes: ['contacts-dialog__list-button']
+  });
+  button.setAttribute('value', group.name);
+  button.addEventListener('click', setButtonOnClickHandler);
+  button.textContent = group.name;
+  return button;
+};
+function getButtonContainer(context) {
+  const buttonContainer = context.dom.getElementById('add-to-contacts-button-container');
+  return buttonContainer;
+}
+const setSelectorDialogBackgroundAccessibility = (selectorDialog, isPopupActive) => {
+  const popupManagedAriaHiddenAttribute = 'data-popup-managed-aria-hidden';
+  const popupManagedInertAttribute = 'data-popup-managed-inert';
+  Array.from(selectorDialog.children).forEach(child => {
+    if (!(child instanceof HTMLElement)) return;
+    if (child.id === CONTACTS_POPUP_OVERLAY_ID || child.classList.contains('contacts-dialog__contact-exists')) return;
+    if (isPopupActive) {
+      child.setAttribute('aria-hidden', 'true');
+      child.setAttribute('inert', '');
+      const nestedRegions = child.matches('.contacts-dialog__main') ? Array.from(child.querySelectorAll('.contacts-dialog__description, .contacts-dialog__body')) : [];
+      nestedRegions.forEach(region => {
+        if (region.getAttribute('aria-hidden') !== 'true') {
+          region.setAttribute('aria-hidden', 'true');
+          region.setAttribute(popupManagedAriaHiddenAttribute, 'true');
+        }
+        if (region.matches('.contacts-dialog__body') && !region.hasAttribute('inert')) {
+          region.setAttribute('inert', '');
+          region.setAttribute(popupManagedInertAttribute, 'true');
+        }
+      });
+    } else {
+      child.removeAttribute('aria-hidden');
+      child.removeAttribute('inert');
+      Array.from(child.querySelectorAll(`[${popupManagedAriaHiddenAttribute}="true"]`)).forEach(descendant => {
+        descendant.removeAttribute('aria-hidden');
+        descendant.removeAttribute(popupManagedAriaHiddenAttribute);
+      });
+      Array.from(child.querySelectorAll(`[${popupManagedInertAttribute}="true"]`)).forEach(descendant => {
+        descendant.removeAttribute('inert');
+        descendant.removeAttribute(popupManagedInertAttribute);
+      });
+    }
+  });
+};
+const showPopupOverlay = context => {
+  const selectorDialog = context.dom.getElementById('contacts-addressbook-picker-dialog');
+  if (!selectorDialog) return;
+  selectorDialog.classList.add(CONTACTS_OVERLAY_ACTIVE_CLASS);
+  setSelectorDialogBackgroundAccessibility(selectorDialog, true);
+  const existingOverlay = selectorDialog.querySelector(`#${CONTACTS_POPUP_OVERLAY_ID}`);
+  if (existingOverlay) return;
+  const overlay = context.dom.createElement('div');
+  overlay.setAttribute('aria-hidden', 'true');
+  overlay.setAttribute('id', CONTACTS_POPUP_OVERLAY_ID);
+  overlay.classList.add('contacts-dialog__popup-overlay');
+  selectorDialog.appendChild(overlay);
+};
+const removePopupOverlayIfNoPopup = context => {
+  const selectorDialog = context.dom.getElementById('contacts-addressbook-picker-dialog');
+  if (!selectorDialog) return;
+  const activePopup = selectorDialog.querySelector('.contacts-dialog__contact-exists');
+  if (activePopup) return;
+  const overlay = selectorDialog.querySelector(`#${CONTACTS_POPUP_OVERLAY_ID}`);
+  if (overlay) overlay.remove();
+  selectorDialog.classList.remove(CONTACTS_OVERLAY_ACTIVE_CLASS);
+  setSelectorDialogBackgroundAccessibility(selectorDialog, false);
+};
+/* Sanitization and validation */
+function sanitizeInput(input) {
+  return (input || '').replace(/[^a-zA-Z0-9 ]+/g, '').replace(/\s+/g, ' ').trim();
+}
+function sanitizeInputForTyping(input) {
+  return (input || '').replace(/[^a-zA-Z0-9 ]+/g, '');
+}
+function attachSanitizingValidation(input, feedbackElement) {
+  input.addEventListener('input', () => {
+    const rawValue = input.value;
+    const sanitizedValue = sanitizeInputForTyping(rawValue);
+    if (rawValue !== sanitizedValue) {
+      input.value = sanitizedValue;
+      input.setAttribute('aria-invalid', 'true');
+      feedbackElement.textContent = 'Only letters, numbers, and spaces are allowed.';
+      feedbackElement.classList.add('contacts-dialog__validation--visible');
+      feedbackElement.setAttribute('aria-hidden', 'false');
+      return;
+    }
+    input.removeAttribute('aria-invalid');
+    feedbackElement.textContent = '';
+    feedbackElement.classList.remove('contacts-dialog__validation--visible');
+    feedbackElement.setAttribute('aria-hidden', 'true');
+  });
+}
+function createValidationMessage(context) {
+  const validationMessage = context.dom.createElement('p');
+  validationMessage.setAttribute('role', 'status');
+  validationMessage.setAttribute('aria-live', 'polite');
+  validationMessage.classList.add('contacts-dialog__validation');
+  validationMessage.setAttribute('aria-hidden', 'true');
+  return validationMessage;
+}
+function createContactsStatusRegion(context) {
+  const statusRegion = context.dom.createElement('p');
+  statusRegion.setAttribute('id', 'contacts-list-status');
+  statusRegion.setAttribute('role', 'status');
+  statusRegion.setAttribute('aria-live', 'polite');
+  statusRegion.classList.add('sr-only');
+  return statusRegion;
+}
+function announceContactsStatus(context, message) {
+  const statusRegion = context.dom.getElementById('contacts-list-status');
+  if (!statusRegion) return;
+  statusRegion.textContent = '';
+  setTimeout(() => {
+    statusRegion.textContent = message;
+  }, 0);
+}
+function focusFirstInputInPopup(container) {
+  setTimeout(() => {
+    const firstInput = container.querySelector('input, textarea, select');
+    if (firstInput) firstInput.focus();
+  }, 0);
+}
+function setButtonLoadingState(button, isLoading, loadingLabel) {
+  if (!button) return;
+  const originalLabel = button.dataset.originalLabel || button.textContent || '';
+  if (!button.dataset.originalLabel) button.dataset.originalLabel = originalLabel;
+  if (isLoading) {
+    button.disabled = true;
+    button.setAttribute('aria-busy', 'true');
+    button.textContent = loadingLabel || originalLabel;
+    return;
+  }
+  button.disabled = false;
+  button.removeAttribute('aria-busy');
+  button.textContent = button.dataset.originalLabel || originalLabel;
+}
+async function runWithButtonLoading(context, button, loadingLabel, action) {
+  const sharedModal = context.dom.getElementById('profile-modal');
+  const useDialogOverlay = Boolean(sharedModal?.hasAttribute('open'));
+  if (useDialogOverlay) {
+    if (button) {
+      button.disabled = true;
+      button.setAttribute('aria-busy', 'true');
+    }
+    (0, _dialog.setSharedDialogSavingState)(context.dom, true, loadingLabel);
+  } else {
+    setButtonLoadingState(button, true, loadingLabel);
+  }
+  try {
+    return await action();
+  } finally {
+    if (useDialogOverlay) {
+      (0, _dialog.setSharedDialogSavingState)(context.dom, false, loadingLabel);
+      if (button) {
+        button.disabled = false;
+        button.removeAttribute('aria-busy');
+      }
+    } else {
+      setButtonLoadingState(button, false);
+    }
+  }
+}
+function sanitizeGroupFileName(name) {
+  return name.replace(/\W/gu, '_').replace(/_+/g, '_');
+}
+function getDocumentKey(statementDocument) {
+  return 'value' in statementDocument ? statementDocument.value : '__default__';
+}
+async function updateAcrossDocuments(context, deletions, insertions = []) {
+  const store = context.session.store;
+  (0, _rdfMutationHelpers.ensureStandardMutationPrefixes)(store);
+  const docs = deletions.concat(insertions).map(statement => statement.why);
+  const uniqueDocKeys = new Set();
+  const uniqueDocs = docs.filter(doc => {
+    const key = getDocumentKey(doc);
+    if (uniqueDocKeys.has(key)) return false;
+    uniqueDocKeys.add(key);
+    return true;
+  });
+  await Promise.all(uniqueDocs.map(doc => (0, _rdfMutationHelpers.runDirectUpdaterUpdate)(store, deletions.filter(statement => getDocumentKey(statement.why) === getDocumentKey(doc)), insertions.filter(statement => getDocumentKey(statement.why) === getDocumentKey(doc)), _texts.errorGroupCreation)));
+}
+async function saveNewGroupToAddressBook(context, addressBookNode, name) {
+  const store = context.session.store;
+  await store.fetcher.load(addressBookNode.doc());
+  const groupIndex = store.any(addressBookNode, _solidUi.ns.vcard('groupIndex'));
+  if (!groupIndex) {
+    throw new Error('Error loading group index for the selected address book.');
+  }
+  const groupFileName = sanitizeGroupFileName(name);
+  const groupNode = (0, _rdflib.sym)(`${addressBookNode.dir().uri}Group/${groupFileName}.ttl#this`);
+  const groupDocument = groupNode.doc();
+  try {
+    await store.fetcher.load(groupIndex);
+  } catch (error) {
+    throw new Error(`Error loading group index ${groupIndex.value}: ${error}`);
+  }
+  if (store.holds(addressBookNode, _solidUi.ns.vcard('includesGroup'), groupNode, groupIndex)) {
+    return groupNode;
+  }
+  const indexInsertions = [(0, _rdflib.st)(addressBookNode, _solidUi.ns.vcard('includesGroup'), groupNode, groupIndex), (0, _rdflib.st)(groupNode, _solidUi.ns.rdf('type'), _solidUi.ns.vcard('Group'), groupIndex), (0, _rdflib.st)(groupNode, _solidUi.ns.vcard('fn'), (0, _rdflib.literal)(name), groupIndex)];
+  const groupInsertions = [(0, _rdflib.st)(addressBookNode, _solidUi.ns.vcard('includesGroup'), groupNode, groupDocument), (0, _rdflib.st)(groupNode, _solidUi.ns.rdf('type'), _solidUi.ns.vcard('Group'), groupDocument), (0, _rdflib.st)(groupNode, _solidUi.ns.vcard('fn'), (0, _rdflib.literal)(name), groupDocument)];
+  await updateAcrossDocuments(context, [], indexInsertions);
+  await updateAcrossDocuments(context, [], groupInsertions);
+  return groupNode;
+}