profile-pane 3.1.2-85b34f39 → 3.1.2-9ced93b9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/lib/ContactsCard.d.ts.map +1 -1
  2. package/lib/ContactsCard.js +6 -5
  3. package/lib/addMeToYourContacts.js +3 -3
  4. package/lib/contactsHelpers.d.ts.map +1 -1
  5. package/lib/contactsHelpers.js +13 -9
  6. package/lib/profile-pane.js +43 -35
  7. package/lib/profile-pane.js.map +1 -1
  8. package/lib/profile-pane.min.js +1 -1
  9. package/lib/profile-pane.min.js.map +1 -1
  10. package/lib/styles/ContactsCard.css +14 -15
  11. package/lib/styles/utilities.css +4 -0
  12. package/package.json +1 -2
package/lib/ContactsCard.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ContactsCard.d.ts","sourceRoot":"","sources":["../src/ContactsCard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAElD,OAAO,EAAsB,gBAAgB,EAAE,WAAW,EAAa,MAAM,iBAAiB,CAAA;AAC9F,OAAO,oBAAoB,MAAM,qCAAqC,CAAA;AAQtE,eAAO,MAAM,kCAAkC,GAAI,SAAS,kBAAkB,EAC5E,gBAAgB,oBAAoB,EACpC,aAAa,WAAW,EACxB,kBAAkB,gBAAgB,KACjC,iBAuCF,CAAA;AAw0BD,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,kBAAkB,GAC1B,cAAc,CAIhB"}
1
+ {"version":3,"file":"ContactsCard.d.ts","sourceRoot":"","sources":["../src/ContactsCard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAElD,OAAO,EAAsB,gBAAgB,EAAE,WAAW,EAAa,MAAM,iBAAiB,CAAA;AAC9F,OAAO,oBAAoB,MAAM,qCAAqC,CAAA;AAQtE,eAAO,MAAM,kCAAkC,GAAI,SAAS,kBAAkB,EAC5E,gBAAgB,oBAAoB,EACpC,aAAa,WAAW,EACxB,kBAAkB,gBAAgB,KACjC,iBAuCF,CAAA;AAy0BD,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,kBAAkB,GAC1B,cAAc,CAIhB"}
package/lib/ContactsCard.js CHANGED
@@ -98,7 +98,7 @@ const createAddressBookUriEntryDiv = (context, contactsModule, addressBooksData,
98
98
  addressBookUriEntryDiv.setAttribute('aria-label', 'Address book URI entry div');
99
99
  addressBookUriEntryDiv.setAttribute('aria-describedby', 'addressbook-uri-entry-div');
100
100
  addressBookUriEntryDiv.setAttribute('id', 'contacts-addressbook-uri-entry');
101
- addressBookUriEntryDiv.classList.add('contactsPopupMessage', 'contactsAddressBookUriEntry');
101
+ addressBookUriEntryDiv.classList.add('contactsPopupDialog', 'contactsAddressBookUriEntry');
102
102
  const closeButton = createCloseButton(context, addressBookUriEntryDiv, 'contactsAddressBookUriEntryCloseButton');
103
103
  addressBookUriEntryDiv.appendChild(closeButton);
104
104
  addressBookUriEntryDiv.appendChild(createAddressBookUriEntryForm(context, contactsModule, addressBooksData, contactData));
@@ -434,7 +434,7 @@ const createNewAddressBookForm = (context, addressBooksData, contactsModule, con
434
434
  newAddressBookForm.method = 'post';
435
435
  newAddressBookForm.innerHTML = 'Create a new address book';
436
436
  newAddressBookForm.setAttribute('id', 'new-addressbook-form');
437
- newAddressBookForm.classList.add('contactsPopupMessage', 'contactsNewAddressForm');
437
+ newAddressBookForm.classList.add('contactsPopupDialog', 'contactsNewAddressForm');
438
438
  const addressBookNameLabel = context.dom.createElement('label');
439
439
  addressBookNameLabel.classList.add('label');
440
440
  addressBookNameLabel.setAttribute('for', 'addressBookNameInput');
@@ -487,6 +487,7 @@ const createNewAddressBookForm = (context, addressBooksData, contactsModule, con
487
487
  return newAddressBookForm;
488
488
  };
489
489
  const createCloseButton = (context, element, specialClass) => {
490
+ const buttonID = `${element.id}-close-button`;
490
491
  const setButtonOnClickHandler = event => {
491
492
  event.preventDefault();
492
493
  if (element) {
@@ -499,7 +500,7 @@ const createCloseButton = (context, element, specialClass) => {
499
500
  }
500
501
  };
501
502
  const closeButton = context.dom.createElement('button');
502
- closeButton.setAttribute('id', 'close-addressbook');
503
+ closeButton.setAttribute('id', buttonID);
503
504
  closeButton.setAttribute('role', 'button');
504
505
  closeButton.setAttribute('type', 'button');
505
506
  const ariaLabel = specialClass === 'contactsCloseButton' ? 'Close contacts dialog' : 'Close dialog';
@@ -559,7 +560,7 @@ const createGroupNameForm = (context, contactsModule, addressBooksData, contactD
559
560
  newGroupForm.addEventListener('submit', addGroupEventListener);
560
561
  newGroupForm.innerHTML = 'Create a new group';
561
562
  newGroupForm.setAttribute('id', 'new-group-form');
562
- newGroupForm.classList.add('contactsPopupMessage', 'contactsNewGroupForm');
563
+ newGroupForm.classList.add('contactsPopupDialog', 'contactsNewGroupForm');
563
564
  const groupNameLabel = context.dom.createElement('label');
564
565
  groupNameLabel.classList.add('label');
565
566
  groupNameLabel.setAttribute('for', 'groupNameInput');
@@ -713,7 +714,7 @@ const showPopupOverlay = context => {
713
714
  const removePopupOverlayIfNoPopup = context => {
714
715
  const selectorDialog = context.dom.getElementById('contacts-selector-dialog');
715
716
  if (!selectorDialog) return;
716
- const activePopup = selectorDialog.querySelector('.contactsPopupMessage, .contactsContactExistsAlert');
717
+ const activePopup = selectorDialog.querySelector('.contactsPopupDialog, .contactsContactExistsAlert');
717
718
  if (activePopup) return;
718
719
  const overlay = selectorDialog.querySelector(`#${CONTACTS_POPUP_OVERLAY_ID}`);
719
720
  if (overlay) overlay.remove();
package/lib/addMeToYourContacts.js CHANGED
@@ -67,16 +67,16 @@ const createAddMeToYourContactsButton = async (subject, context) => {
67
67
  needsBorder: true
68
68
  });
69
69
  button.setAttribute('id', 'add-to-contacts-button');
70
- //button.refresh = refreshButton(context, subject, addressBooksData)
71
70
  button.refresh = refreshButton();
72
71
  function refreshButton() {
73
72
  if ((0, _buttonsHelper.checkIfAnyUserLoggedIn)(me)) {
74
- const contactExistsByWebID = (0, _contactsHelpers.checkIfContactExistsByWebID)(addressBooksData, contactData.webID);
75
- const contactExistsByName = (0, _contactsHelpers.checkIfContactExistsByName)(addressBooksData, contactData.name);
73
+ const contactExistsByWebID = contactData ? (0, _contactsHelpers.checkIfContactExistsByWebID)(addressBooksData, contactData.webID) : false;
74
+ const contactExistsByName = contactData ? (0, _contactsHelpers.checkIfContactExistsByName)(addressBooksData, contactData.name) : false;
76
75
  if (contactExistsByWebID) {
77
76
  //logged in and friend exists or friend was just added
78
77
  button.innerHTML = _texts.contactExistsAlreadyButtonText.toUpperCase();
79
78
  button.onclick = null;
79
+ button.setAttribute('disabled', 'true');
80
80
  } else if (contactExistsByName) {
81
81
  button.innerHTML = _texts.contactExistsAlreadyByNameButtonText.toUpperCase();
82
82
  } else {
package/lib/contactsHelpers.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"contactsHelpers.d.ts","sourceRoot":"","sources":["../src/contactsHelpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAoB,MAAM,QAAQ,CAAA;AAE/D,OAAO,oBAAoB,MAAM,qCAAqC,CAAA;AAEtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAElD,OAAO,2BAA2B,CAAA;AAElC,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,WAAW,EAAgB,SAAS,EAAgB,uBAAuB,EAAE,MAAM,iBAAiB,CAAA;AAMnJ,iBAAe,uBAAuB,CACpC,OAAO,EAAE,kBAAkB,EAC3B,cAAc,EAAE,oBAAoB,EACpC,WAAW,EAAE,WAAW,EACxB,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAE,cAAc,iBAM1B;AA8GD,iBAAe,mBAAmB,CAChC,OAAO,EAAE,kBAAkB,EAC3B,aAAa,EAAE,oBAAoB,GAClC,OAAO,CAAC,gBAAgB,CAAC,CAY3B;AAkBD,iBAAe,cAAc,CAC3B,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,GACjB,OAAO,CAAC,WAAW,CAAC,CAiCtB;AAED,iBAAe,mCAAmC,CAChD,OAAO,EAAC,kBAAkB,EAC1B,cAAc,EAAE,oBAAoB,EACpC,gBAAgB,EAAE,gBAAgB,EAClC,qBAAqB,EAAE,MAAM,GAC5B,OAAO,CAAC;IAAE,gBAAgB,EAAE,gBAAgB,CAAC;IAAC,WAAW,EAAE,kBAAkB,CAAA;CAAE,CAAC,CAwBlF;AAED,iBAAe,0BAA0B,CACvC,OAAO,EAAE,kBAAkB,EAC3B,cAAc,EAAE,oBAAoB,EACpC,gBAAgB,EAAE,gBAAgB,EAClC,WAAW,EAAE,WAAW,EACxB,uBAAuB,EAAE,uBAAuB,GAC/C,OAAO,CAAC,MAAM,CAAC,CAwBjB;AAqFD,iBAAe,qBAAqB,CAClC,OAAO,EAAE,kBAAkB,EAC3B,WAAW,EAAE,MAAM,EACnB,cAAc,EAAE,MAAM,GACrB,OAAO,CAAC,OAAO,CAAC,CAuBlB;AAED,iBAAe,qBAAqB,CAClC,OAAO,EAAE,kBAAkB,EAC3B,cAAc,EAAE,MAAM,EACtB,OAAO,EAAE,MAAM,iBA0BhB;AAED,iBAAS,aAAa,CACpB,OAAO,EAAE,kBAAkB,EAC3B,gBAAgB,EAAE,gBAAgB,EAClC,WAAW,EAAE,WAAW,QAuBvB;AAEH,iBAAS,2BAA2B,CAClC,gBAAgB,EAAE,gBAAgB,EAClC,UAAU,EAAE,MAAM,GACjB,OAAO,CAIT;AAED,iBAAS,0BAA0B,CACjC,gBAAgB,EAAE,gBAAgB,EAClC,IAAI,EAAE,MAAM,GACX,MAAM,GAAG,IAAI,CAYf;AAED,iBAAe,yBAAyB,CACtC,OAAO,EAAE,kBAAkB,EAC3B,cAAc,EAAE,oBAAoB,EACpC,gBAAgB,EAAE,gBAAgB,EAClC,KAAK,EAAE,MAAM,EACb,UAAU,EAAE,MAAM,iBASnB;AA6CD,iBAAS,yBAAyB,CAChC,gBAAgB,EAAE,gBAAgB,EAClC,cAAc,EAAE,MAAM,EACtB,KAAK,EAAE,SAAS,GACf,OAAO,CA0BT;AAED,iBAAe,yBAAyB,CACtC,kBAAkB,EAAE,kBAAkB,EACtC,aAAa,EAAE,MAAM,EACrB,kBAAkB,EAAE,MAAM,GACzB,OAAO,CAAC,MAAM,CAAC,CAsCjB;AAED,OAAO,EACL,mBAAmB,EACnB,cAAc,EACd,uBAAuB,EACvB,0BAA0B,EAC1B,qBAAqB,EACrB,aAAa,EACb,2BAA2B,EAC3B,0BAA0B,EAC1B,yBAAyB,EACzB,mCAAmC,EACnC,yBAAyB,EACzB,qBAAqB,EACrB,yBAAyB,EAC1B,CAAA"}
1
+ {"version":3,"file":"contactsHelpers.d.ts","sourceRoot":"","sources":["../src/contactsHelpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAoB,MAAM,QAAQ,CAAA;AAE/D,OAAO,oBAAoB,MAAM,qCAAqC,CAAA;AAEtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAElD,OAAO,2BAA2B,CAAA;AAElC,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,WAAW,EAAgB,SAAS,EAAgB,uBAAuB,EAAE,MAAM,iBAAiB,CAAA;AAMnJ,iBAAe,uBAAuB,CACpC,OAAO,EAAE,kBAAkB,EAC3B,cAAc,EAAE,oBAAoB,EACpC,WAAW,EAAE,WAAW,EACxB,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAE,cAAc,iBAM1B;AAgHD,iBAAe,mBAAmB,CAChC,OAAO,EAAE,kBAAkB,EAC3B,aAAa,EAAE,oBAAoB,GAClC,OAAO,CAAC,gBAAgB,CAAC,CAY3B;AAkBD,iBAAe,cAAc,CAC3B,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,GACjB,OAAO,CAAC,WAAW,CAAC,CA8BtB;AAED,iBAAe,mCAAmC,CAChD,OAAO,EAAC,kBAAkB,EAC1B,cAAc,EAAE,oBAAoB,EACpC,gBAAgB,EAAE,gBAAgB,EAClC,qBAAqB,EAAE,MAAM,GAC5B,OAAO,CAAC;IAAE,gBAAgB,EAAE,gBAAgB,CAAC;IAAC,WAAW,EAAE,kBAAkB,CAAA;CAAE,CAAC,CA2BlF;AAED,iBAAe,0BAA0B,CACvC,OAAO,EAAE,kBAAkB,EAC3B,cAAc,EAAE,oBAAoB,EACpC,gBAAgB,EAAE,gBAAgB,EAClC,WAAW,EAAE,WAAW,EACxB,uBAAuB,EAAE,uBAAuB,GAC/C,OAAO,CAAC,MAAM,CAAC,CAwBjB;AAqFD,iBAAe,qBAAqB,CAClC,OAAO,EAAE,kBAAkB,EAC3B,WAAW,EAAE,MAAM,EACnB,cAAc,EAAE,MAAM,GACrB,OAAO,CAAC,OAAO,CAAC,CAuBlB;AAED,iBAAe,qBAAqB,CAClC,OAAO,EAAE,kBAAkB,EAC3B,cAAc,EAAE,MAAM,EACtB,OAAO,EAAE,MAAM,iBA0BhB;AAED,iBAAS,aAAa,CACpB,OAAO,EAAE,kBAAkB,EAC3B,gBAAgB,EAAE,gBAAgB,EAClC,WAAW,EAAE,WAAW,QAuBvB;AAEH,iBAAS,2BAA2B,CAClC,gBAAgB,EAAE,gBAAgB,EAClC,UAAU,EAAE,MAAM,GACjB,OAAO,CAGT;AAED,iBAAS,0BAA0B,CACjC,gBAAgB,EAAE,gBAAgB,EAClC,IAAI,EAAE,MAAM,GACX,MAAM,GAAG,IAAI,CAYf;AAED,iBAAe,yBAAyB,CACtC,OAAO,EAAE,kBAAkB,EAC3B,cAAc,EAAE,oBAAoB,EACpC,gBAAgB,EAAE,gBAAgB,EAClC,KAAK,EAAE,MAAM,EACb,UAAU,EAAE,MAAM,iBASnB;AA6CD,iBAAS,yBAAyB,CAChC,gBAAgB,EAAE,gBAAgB,EAClC,cAAc,EAAE,MAAM,EACtB,KAAK,EAAE,SAAS,GACf,OAAO,CA0BT;AAED,iBAAe,yBAAyB,CACtC,kBAAkB,EAAE,kBAAkB,EACtC,aAAa,EAAE,MAAM,EACrB,kBAAkB,EAAE,MAAM,GACzB,OAAO,CAAC,MAAM,CAAC,CAsCjB;AAED,OAAO,EACL,mBAAmB,EACnB,cAAc,EACd,uBAAuB,EACvB,0BAA0B,EAC1B,qBAAqB,EACrB,aAAa,EACb,2BAA2B,EAC3B,0BAA0B,EAC1B,yBAAyB,EACzB,mCAAmC,EACnC,yBAAyB,EACzB,qBAAqB,EACrB,yBAAyB,EAC1B,CAAA"}
package/lib/contactsHelpers.js CHANGED
@@ -88,9 +88,10 @@ async function getAddressBooks(context, contactsModule) {
88
88
  };
89
89
  // let addressBookUris = await contactsModule.listAddressBooks(me.value)
90
90
 
91
- const publicAddressBookPromises = await addressBookUris.publicUris.map(addressBook => getAddressData(context, contactsModule, addressBook));
91
+ const publicAddressBookPromises = addressBookUris.publicUris.map(addressBook => getAddressData(context, contactsModule, addressBook));
92
92
  const publicAddressBooksData = await Promise.all(publicAddressBookPromises);
93
93
  publicAddressBooksData.map(addressBook => {
94
+ if (!addressBook) return;
94
95
  addressBooksData.public.set(addressBook.uri, {
95
96
  name: addressBook.title,
96
97
  groups: addressBook.groups,
@@ -104,6 +105,7 @@ async function getAddressBooks(context, contactsModule) {
104
105
  const privateAddressBookPromises = addressBookUris.privateUris.map(addressBook => getAddressData(context, contactsModule, addressBook));
105
106
  const privateAddressBooksData = await Promise.all(privateAddressBookPromises);
106
107
  privateAddressBooksData.map(addressBook => {
108
+ if (!addressBook) return;
107
109
  addressBooksData.private.set(addressBook.uri, {
108
110
  name: addressBook.title,
109
111
  groups: addressBook.groups,
@@ -135,7 +137,7 @@ async function processContactWebIDs(context, addressBooksData, allContacts) {
135
137
  const contactPromises = allContacts.map(getWebID.bind(null, context));
136
138
  const results = await Promise.all(contactPromises);
137
139
  results.map(contact => {
138
- if (contact) addressBooksData.contactWebIDs.set(contact.webID, contact.uri);
140
+ if (contact?.webID) addressBooksData.contactWebIDs.set(contact.webID.trim(), contact.uri);
139
141
  });
140
142
  return addressBooksData;
141
143
  }
@@ -164,11 +166,7 @@ async function getContactData(store, subject) {
164
166
  phoneNumber
165
167
  });
166
168
  });
167
-
168
- // Need to fix below right now don't want to add
169
- // while testing
170
- // const webID = subject.value
171
- const webID = 'https://testingsolidos.solidcommunity.net/profile/card#me';
169
+ const webID = subject.value;
172
170
  return {
173
171
  name,
174
172
  emails,
@@ -181,6 +179,12 @@ async function addANewAddressBookUriToAddressBooks(context, contactsModule, addr
181
179
  let contactsAddressBook = null;
182
180
  try {
183
181
  const addressBook = await getAddressData(context, contactsModule, enteredAddressBookUri);
182
+ if (!addressBook) {
183
+ return {
184
+ addressBooksData,
185
+ addressBook: null
186
+ };
187
+ }
184
188
  contactsAddressBook = {
185
189
  name: addressBook.title,
186
190
  groups: addressBook.groups,
@@ -341,8 +345,8 @@ function refreshButton(context, addressBooksData, contactData) {
341
345
  }
342
346
  }
343
347
  function checkIfContactExistsByWebID(addressBooksData, subjectUri) {
344
- if (addressBooksData.contactWebIDs.has(subjectUri)) return true;
345
- return false;
348
+ if (!subjectUri?.trim()) return false;
349
+ return addressBooksData.contactWebIDs.has(subjectUri.trim());
346
350
  }
347
351
  function checkIfContactExistsByName(addressBooksData, name) {
348
352
  let normalizedContactName = null;
package/lib/profile-pane.js CHANGED
@@ -4897,11 +4897,6 @@ ___CSS_LOADER_EXPORT___.push([module.id, `#add-to-contacts-button-container {
4897
4897
  justify-content: center;
4898
4898
  align-items: center;
4899
4899
  line-height: 1;
4900
-
4901
- /* width: 100% !important;
4902
- max-width: 100% !important;
4903
- margin-left: 0;
4904
- align-self: stretch !important; */
4905
4900
  }
4906
4901
 
4907
4902
  .contactsNewGroupForm {
@@ -4969,7 +4964,6 @@ ___CSS_LOADER_EXPORT___.push([module.id, `#add-to-contacts-button-container {
4969
4964
  right: 0.2rem;
4970
4965
  background: transparent;
4971
4966
  color: #787878;
4972
- font-size: var(--font-size-xs);
4973
4967
  border: none;
4974
4968
  font-size: var(--font-size-sm);
4975
4969
  cursor: pointer;
@@ -4989,8 +4983,14 @@ ___CSS_LOADER_EXPORT___.push([module.id, `#add-to-contacts-button-container {
4989
4983
  width: auto !important;
4990
4984
  height: auto !important;
4991
4985
  cursor: pointer;
4992
- font-size: var(--font-size-xs);
4993
4986
  line-height: 1;
4987
+ left: auto;
4988
+ margin: 0;
4989
+ align-self: auto !important;
4990
+ background: transparent;
4991
+ color: #787878;
4992
+ border: none;
4993
+ z-index: 100 !important;
4994
4994
  }
4995
4995
 
4996
4996
  .contactsCloseButton:hover {
@@ -5072,8 +5072,8 @@ ___CSS_LOADER_EXPORT___.push([module.id, `#add-to-contacts-button-container {
5072
5072
  white-space: nowrap;
5073
5073
  }
5074
5074
 
5075
- [role="alert"] {
5076
- border: none !important; /* Hides the element from all users and AT */
5075
+ .contactsAddressBookSelector [role="alert"] {
5076
+ border: none !important; /* Remove borders from alerts within the contacts dialog */
5077
5077
  }
5078
5078
 
5079
5079
  .contactsPopupOverlay {
@@ -5083,20 +5083,19 @@ ___CSS_LOADER_EXPORT___.push([module.id, `#add-to-contacts-button-container {
5083
5083
  z-index: 8;
5084
5084
  }
5085
5085
 
5086
- .contactsAddressBookSelector.contactsOverlayActive > *:not(.contactsPopupOverlay):not(.contactsPopupMessage):not(.contactsContactExistsAlert) {
5086
+ .contactsAddressBookSelector.contactsOverlayActive > *:not(.contactsPopupOverlay):not(.contactsPopupDialog):not(.contactsContactExistsAlert) {
5087
5087
  pointer-events: none;
5088
5088
  user-select: none;
5089
5089
  }
5090
5090
 
5091
- .contactsAddressBookSelector.contactsOverlayActive .contactsPopupMessage,
5091
+ .contactsAddressBookSelector.contactsOverlayActive .contactsPopupDialog,
5092
5092
  .contactsAddressBookSelector.contactsOverlayActive .contactsContactExistsAlert,
5093
- .contactsAddressBookSelector.contactsOverlayActive .contactsPopupMessage *,
5093
+ .contactsAddressBookSelector.contactsOverlayActive .contactsPopupDialog *,
5094
5094
  .contactsAddressBookSelector.contactsOverlayActive .contactsContactExistsAlert * {
5095
5095
  pointer-events: auto;
5096
5096
  }
5097
5097
 
5098
- /* SAM Look at finding a better name than popupMessage */
5099
- .contactsPopupMessage {
5098
+ .contactsPopupDialog {
5100
5099
  background: #F5F5F5 !important;
5101
5100
  color: var(--color-primary);
5102
5101
  padding: 2em;
@@ -5119,7 +5118,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `#add-to-contacts-button-container {
5119
5118
  padding-top: 3rem !important;
5120
5119
  }
5121
5120
 
5122
- .contactsPopupMessage {
5121
+ .contactsPopupDialog {
5123
5122
  max-width: 92vw;
5124
5123
  max-height: 78vh;
5125
5124
  padding: 1.25rem;
@@ -5188,7 +5187,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `#add-to-contacts-button-container {
5188
5187
  line-height: 1;
5189
5188
  }
5190
5189
 
5191
- `, "",{"version":3,"sources":["webpack://./src/styles/ContactsCard.css"],"names":[],"mappings":"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","sourcesContent":["#add-to-contacts-button-container {\n position: relative;\n overflow: visible;\n}\n\n.contactsAddressBookSelector {\n width: fit-content;\n max-width: min(94vw, 48rem);\n min-width: 0;\n max-height: 80vh;\n overflow-y: auto;\n overflow-x: hidden;\n border-radius: var(--border-radius-base);\n box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;\n background: #F0F0F0;\n color: var(--color-primary);\n padding-top: 4em;\n align-items: stretch;\n box-sizing: border-box;\n gap: 7px;\n display: flex;\n flex-direction: column;\n font-weight: 600;\n position: absolute;\n top: 54%;\n bottom: auto;\n left: 50%;\n transform: translate(-50%, -50%);\n margin-top: 0;\n margin: 0;\n z-index: 200;\n opacity: 1;\n}\n\n@media (max-width: 900px) {\n .contactsAddressBookSelector {\n top: 54%;\n bottom: auto;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n\n .contactsAddressBookDetails {\n flex-direction: column !important; /* Stacks items vertically on small screens */\n align-items: center !important;\n width: 100% !important;\n max-height: 60vh;\n overflow-y: auto;\n overflow-x: hidden; \n }\n\n .contactsAddressBookCreationDiv .contactsNewContactCreationButton {\n width: fit-content !important;\n min-width: 10em;\n margin-left: auto !important;\n margin-right: auto !important;\n align-self: center !important;\n display: inline-flex !important;\n justify-content: center !important;\n align-items: center !important;\n text-align: center;\n }\n}\n\n@media (max-width: 333px) {\n .contactsAddressBookSelector {\n width: 96vw;\n max-width: 96vw;\n min-width: 0;\n top: 50%;\n bottom: auto;\n left: 50%;\n transform: translate(-50%, -50%);\n padding-top: 3rem;\n position: fixed;\n overflow-x: hidden;\n }\n\n .contactsAddressBookDetails {\n width: 100% !important;\n min-width: 0;\n padding: 0.5rem;\n }\n .contactsAddressBookList,\n .contactsGroupList {\n min-width: 0;\n max-width: 100% !important;\n width: 100%;\n }\n}\n\n.contactsAddressBookCreationDiv {\n width: 100%;\n border-radius: var(--border-radius-base);\n background: #F0F0F0;\n box-sizing: border-box;\n padding: 5px;\n gap: 5px;\n display: flex;\n flex-direction: column;\n box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;\n}\n\n.contactsHelpersButtonDiv {\n display: flex;\n flex-direction: row;\n gap: var(--spacing-md);\n justify-content: center;\n box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;\n padding: var(--spacing-md);\n border-radius: var(--border-radius-base);\n}\n\n.contactsAddressBookCreationButton {\n flex-shrink: 0;\n background: color-mix(in srgb, var(--color-primary), white 85%) !important; \n color: var(--color-primary) !important;\n border-radius: 8px;\n text-align: left;\n cursor: pointer;\n white-space: nowrap;\n}\n\n.contactsAddressBookUriEntryButton {\n flex-shrink: 0;\n background: color-mix(in srgb, var(--color-primary), white 85%) !important; \n color: var(--color-primary) !important;\n border-radius: 8px;\n text-align: left;\n cursor: pointer;\n white-space: nowrap;\n}\n\n.contactsActionButton {\n background: var(--color-primary);\n color: white;\n border-radius: var(--border-radius-base);\n transition: all 0.3s ease-in-out;\n cursor: pointer;\n}\n\n.contactsActionButton:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n}\n\n.contactsActionButton:active {\n box-shadow: 0 1px 2px white;\n}\n\n.contactsActionButton:focus,\n.contactsActionButton:focus-visible {\n outline: 3px solid var(--color-primary) !important;\n outline-offset: 2px !important;\n box-shadow: 0 0 0 2px white, 0 0 0 5px rgba(124, 77, 255, 0.25) !important;\n z-index: 1; \n}\n\n.contactsAddressBookDetails {\n width: 100%;\n min-width: 0;\n min-height: 0;\n border-radius: var(--border-radius-base);\n justify-content: flex-start;\n box-sizing: border-box;\n gap: 15px;\n display: flex;\n flex-direction: row;\n padding: var(--spacing-md);\n overflow-x: auto;\n overflow-y: auto;\n}\n\n.contactsAddressBookUriEntry {\n width: calc(100% - 1rem) !important;\n max-width: calc(100% - 1rem) !important;\n min-width: 0;\n box-sizing: border-box;\n padding-top: 3em !important;\n gap: 5px;\n display: flex;\n align-self: stretch;\n flex-direction: column;\n\n}\n\n.contactsAddressBookUriEntryForm {\n width: 100%;\n max-width: 100%;\n min-width: 0;\n background: #F0F0F0;\n box-sizing: border-box;\n gap: 5px;\n display: flex;\n flex-wrap: wrap;\n flex-direction: column;\n align-items: stretch;\n}\n\n.contactsAddressBookUriInput {\n width: clamp(14rem, 60vw, 22rem);\n max-width: 100%;\n min-width: 0;\n flex: 0 0 auto;\n align-self: flex-start;\n padding: 5px;\n gap: 15px;\n border-radius: var(--border-radius-base);\n border: 1px solid #ccc;\n}\n\n.contactsAddressBookUriEntryAddButton {\n width: 10%;\n min-width: 0;\n max-width: 4em;\n align-self: flex-end !important;\n margin-left: auto;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n line-height: 1;\n\n /* width: 100% !important;\n max-width: 100% !important;\n margin-left: 0;\n align-self: stretch !important; */\n}\n\n.contactsNewGroupForm {\n box-sizing: border-box;\n padding-top: 2.5rem !important;\n gap: 5px;\n display: flex;\n flex-direction: column;\n}\n\n.contactsCreateNewAddressBook {\n border-radius: var(--border-radius);\n color: white;\n padding: var(--spacing-md);\n justify-content: center;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;\n}\n\n.contactsAddressBookList {\n width: 100%;\n max-width: fit-content !important;\n box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);\n min-width: 200px;\n box-sizing: border-box;\n gap: 4px;\n display: flex;\n flex-direction: column;\n}\n\n.contactsGroupList {\n width: auto;\n max-width: fit-content !important;\n min-width: 200px;\n box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);\n box-sizing: border-box;\n gap: 4px;\n display: flex;\n flex-direction: column;\n}\n\n.contactsErrorDisplay {\n width: 90%;\n align-self: flex-end;\n padding: 5px;\n position: absolute;\n background: pink;\n display: none;\n color: #787878;\n border-radius: var(--border-radius-base);\n box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; \n z-index: 3;\n}\n\n.contactsShowErrors {\n display: flex !important;\n flex-direction: row;\n justify-content: center;\n}\n.contactsCloseErrorDisplayButton {\n position: absolute;\n top: 0.2rem;\n right: 0.2rem;\n background: transparent;\n color: #787878;\n font-size: var(--font-size-xs);\n border: none;\n font-size: var(--font-size-sm);\n cursor: pointer;\n z-index: 4;\n}\n\n.contactsCloseButton {\n box-shadow: var(--box-shadow);\n border-radius: var(--border-radius-base);\n color: #787878 !important;\n padding: 1em;\n font-size: var(--font-size-sm);\n position: absolute;\n top: 0; \n right: 0;\n display: inline-block;\n width: auto !important;\n height: auto !important;\n cursor: pointer;\n font-size: var(--font-size-xs);\n line-height: 1;\n}\n\n.contactsCloseButton:hover {\n box-shadow: 0 2px 4px var(--color-primary) !important;\n}\n\n.contactsCloseButton:focus,\n.contactsCloseButton:focus-visible {\n outline: 3px solid var(--color-primary) !important;\n outline-offset: 2px !important;\n box-shadow: 0 0 0 2px white, 0 0 0 5px rgba(124, 77, 255, 0.25) !important;\n z-index: 1;\n}\n\n.contactsNewAddressForm {\n padding-top: 3em !important;\n gap: 5px;\n display: flex;\n flex-direction: column;\n}\n\n.contactsButton {\n flex-shrink: 0;\n background: #F0F0F0;\n color: #787878;\n border-radius: 8px;\n text-align: left;\n padding: var(--spacing-md);\n cursor: pointer;\n white-space: nowrap;\n}\n\n.contactsButton:hover {\n color: var(--color-primary);\n background: color-mix(in srgb, var(--color-primary), white 85%) !important; \n} \n\n.contactsSelectedButton {\n background: color-mix(in srgb, var(--color-primary), white 60%) !important; \n color: var(--color-primary);\n}\n\n.contactsContactExistsAlert {\n background: #F0F0F0 !important;\n color: #787878;\n padding: 10px;\n border-radius: var(--border-radius-base);\n box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;\n z-index: 10;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 300px;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 15px; \n text-wrap: pretty;\n}\n\n.contactsContactExistsActions {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: center;\n align-items: center;\n gap: 10px;\n width: auto;\n}\n\n.contactsContactExistsActions .contactsConfirmButton,\n.contactsContactExistsActions .contactsCancelButton {\n display: inline-flex !important;\n width: auto !important;\n min-width: fit-content;\n flex: 0 0 auto;\n margin: 0;\n white-space: nowrap;\n}\n\n[role=\"alert\"] {\n border: none !important; /* Hides the element from all users and AT */\n}\n\n.contactsPopupOverlay {\n position: absolute;\n inset: 0;\n background: rgba(0, 0, 0, 0.2);\n z-index: 8;\n}\n\n.contactsAddressBookSelector.contactsOverlayActive > *:not(.contactsPopupOverlay):not(.contactsPopupMessage):not(.contactsContactExistsAlert) {\n pointer-events: none;\n user-select: none;\n}\n\n.contactsAddressBookSelector.contactsOverlayActive .contactsPopupMessage,\n.contactsAddressBookSelector.contactsOverlayActive .contactsContactExistsAlert,\n.contactsAddressBookSelector.contactsOverlayActive .contactsPopupMessage *,\n.contactsAddressBookSelector.contactsOverlayActive .contactsContactExistsAlert * {\n pointer-events: auto;\n}\n\n/* SAM Look at finding a better name than popupMessage */\n.contactsPopupMessage {\n background: #F5F5F5 !important;\n color: var(--color-primary);\n padding: 2em;\n border-radius: var(--border-radius-base);\n box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;\n z-index: 50;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: auto;\n max-width: min(92vw, 34rem);\n max-height: calc(100vh - 6rem);\n overflow: auto;\n box-sizing: border-box;\n}\n\n@media (max-width: 600px) {\n .contactsAddressBookUriEntry {\n padding-top: 3rem !important;\n }\n\n .contactsPopupMessage {\n max-width: 92vw;\n max-height: 78vh;\n padding: 1.25rem;\n }\n}\n\n.contactsConfirmButton {\n background: var(--color-primary);\n color: white;\n border-radius: var(--border-radius-base);\n padding: var(--spacing-md);\n transition: all 0.3s ease-in-out;\n cursor: pointer;\n}\n\n.contactsConfirmButton:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n}\n\n.contactsCancelButton {\n background: transparent;\n color: #787878;\n border-radius: var(--border-radius-base);\n padding: var(--spacing-md);\n border: 1px solid #ccc;\n transition: all 0.3s ease-in-out;\n cursor: pointer;\n}\n.contactsCancelButton:hover {\n background: color-mix(in srgb, var(--color-primary), white 85%) !important; \n color: var(--color-primary);\n} \n\n.contactsNewContactCreationButton {\n width: 10em !important;\n align-self: flex-end;\n line-height: 1;\n}\n\n.contactsCreateGroupCreationButton {\n flex-shrink: 0;\n background: color-mix(in srgb, var(--color-primary), white 85%) !important; \n color: var(--color-primary) !important;\n border-radius: 8px;\n text-align: left;\n cursor: pointer;\n white-space: nowrap;\n}\n\n.contactsCloseButton {\n position: absolute !important;\n top: 0 !important;\n right: 0 !important;\n left: auto;\n margin: 0;\n align-self: auto !important;\n background: transparent;\n color: #787878;\n font-size: var(--font-size-xs);\n border: none;\n font-size: var(--font-size-sm);\n cursor: pointer;\n z-index: 100 !important;\n padding: 0.35rem 0.5rem;\n line-height: 1;\n}\n\n"],"sourceRoot":""}]);
5190
+ `, "",{"version":3,"sources":["webpack://./src/styles/ContactsCard.css"],"names":[],"mappings":"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","sourcesContent":["#add-to-contacts-button-container {\n position: relative;\n overflow: visible;\n}\n\n.contactsAddressBookSelector {\n width: fit-content;\n max-width: min(94vw, 48rem);\n min-width: 0;\n max-height: 80vh;\n overflow-y: auto;\n overflow-x: hidden;\n border-radius: var(--border-radius-base);\n box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;\n background: #F0F0F0;\n color: var(--color-primary);\n padding-top: 4em;\n align-items: stretch;\n box-sizing: border-box;\n gap: 7px;\n display: flex;\n flex-direction: column;\n font-weight: 600;\n position: absolute;\n top: 54%;\n bottom: auto;\n left: 50%;\n transform: translate(-50%, -50%);\n margin-top: 0;\n margin: 0;\n z-index: 200;\n opacity: 1;\n}\n\n@media (max-width: 900px) {\n .contactsAddressBookSelector {\n top: 54%;\n bottom: auto;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n\n .contactsAddressBookDetails {\n flex-direction: column !important; /* Stacks items vertically on small screens */\n align-items: center !important;\n width: 100% !important;\n max-height: 60vh;\n overflow-y: auto;\n overflow-x: hidden; \n }\n\n .contactsAddressBookCreationDiv .contactsNewContactCreationButton {\n width: fit-content !important;\n min-width: 10em;\n margin-left: auto !important;\n margin-right: auto !important;\n align-self: center !important;\n display: inline-flex !important;\n justify-content: center !important;\n align-items: center !important;\n text-align: center;\n }\n}\n\n@media (max-width: 333px) {\n .contactsAddressBookSelector {\n width: 96vw;\n max-width: 96vw;\n min-width: 0;\n top: 50%;\n bottom: auto;\n left: 50%;\n transform: translate(-50%, -50%);\n padding-top: 3rem;\n position: fixed;\n overflow-x: hidden;\n }\n\n .contactsAddressBookDetails {\n width: 100% !important;\n min-width: 0;\n padding: 0.5rem;\n }\n .contactsAddressBookList,\n .contactsGroupList {\n min-width: 0;\n max-width: 100% !important;\n width: 100%;\n }\n}\n\n.contactsAddressBookCreationDiv {\n width: 100%;\n border-radius: var(--border-radius-base);\n background: #F0F0F0;\n box-sizing: border-box;\n padding: 5px;\n gap: 5px;\n display: flex;\n flex-direction: column;\n box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;\n}\n\n.contactsHelpersButtonDiv {\n display: flex;\n flex-direction: row;\n gap: var(--spacing-md);\n justify-content: center;\n box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;\n padding: var(--spacing-md);\n border-radius: var(--border-radius-base);\n}\n\n.contactsAddressBookCreationButton {\n flex-shrink: 0;\n background: color-mix(in srgb, var(--color-primary), white 85%) !important; \n color: var(--color-primary) !important;\n border-radius: 8px;\n text-align: left;\n cursor: pointer;\n white-space: nowrap;\n}\n\n.contactsAddressBookUriEntryButton {\n flex-shrink: 0;\n background: color-mix(in srgb, var(--color-primary), white 85%) !important; \n color: var(--color-primary) !important;\n border-radius: 8px;\n text-align: left;\n cursor: pointer;\n white-space: nowrap;\n}\n\n.contactsActionButton {\n background: var(--color-primary);\n color: white;\n border-radius: var(--border-radius-base);\n transition: all 0.3s ease-in-out;\n cursor: pointer;\n}\n\n.contactsActionButton:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n}\n\n.contactsActionButton:active {\n box-shadow: 0 1px 2px white;\n}\n\n.contactsActionButton:focus,\n.contactsActionButton:focus-visible {\n outline: 3px solid var(--color-primary) !important;\n outline-offset: 2px !important;\n box-shadow: 0 0 0 2px white, 0 0 0 5px rgba(124, 77, 255, 0.25) !important;\n z-index: 1; \n}\n\n.contactsAddressBookDetails {\n width: 100%;\n min-width: 0;\n min-height: 0;\n border-radius: var(--border-radius-base);\n justify-content: flex-start;\n box-sizing: border-box;\n gap: 15px;\n display: flex;\n flex-direction: row;\n padding: var(--spacing-md);\n overflow-x: auto;\n overflow-y: auto;\n}\n\n.contactsAddressBookUriEntry {\n width: calc(100% - 1rem) !important;\n max-width: calc(100% - 1rem) !important;\n min-width: 0;\n box-sizing: border-box;\n padding-top: 3em !important;\n gap: 5px;\n display: flex;\n align-self: stretch;\n flex-direction: column;\n\n}\n\n.contactsAddressBookUriEntryForm {\n width: 100%;\n max-width: 100%;\n min-width: 0;\n background: #F0F0F0;\n box-sizing: border-box;\n gap: 5px;\n display: flex;\n flex-wrap: wrap;\n flex-direction: column;\n align-items: stretch;\n}\n\n.contactsAddressBookUriInput {\n width: clamp(14rem, 60vw, 22rem);\n max-width: 100%;\n min-width: 0;\n flex: 0 0 auto;\n align-self: flex-start;\n padding: 5px;\n gap: 15px;\n border-radius: var(--border-radius-base);\n border: 1px solid #ccc;\n}\n\n.contactsAddressBookUriEntryAddButton {\n width: 10%;\n min-width: 0;\n max-width: 4em;\n align-self: flex-end !important;\n margin-left: auto;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n line-height: 1;\n}\n\n.contactsNewGroupForm {\n box-sizing: border-box;\n padding-top: 2.5rem !important;\n gap: 5px;\n display: flex;\n flex-direction: column;\n}\n\n.contactsCreateNewAddressBook {\n border-radius: var(--border-radius);\n color: white;\n padding: var(--spacing-md);\n justify-content: center;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;\n}\n\n.contactsAddressBookList {\n width: 100%;\n max-width: fit-content !important;\n box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);\n min-width: 200px;\n box-sizing: border-box;\n gap: 4px;\n display: flex;\n flex-direction: column;\n}\n\n.contactsGroupList {\n width: auto;\n max-width: fit-content !important;\n min-width: 200px;\n box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);\n box-sizing: border-box;\n gap: 4px;\n display: flex;\n flex-direction: column;\n}\n\n.contactsErrorDisplay {\n width: 90%;\n align-self: flex-end;\n padding: 5px;\n position: absolute;\n background: pink;\n display: none;\n color: #787878;\n border-radius: var(--border-radius-base);\n box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; \n z-index: 3;\n}\n\n.contactsShowErrors {\n display: flex !important;\n flex-direction: row;\n justify-content: center;\n}\n.contactsCloseErrorDisplayButton {\n position: absolute;\n top: 0.2rem;\n right: 0.2rem;\n background: transparent;\n color: #787878;\n border: none;\n font-size: var(--font-size-sm);\n cursor: pointer;\n z-index: 4;\n}\n\n.contactsCloseButton {\n box-shadow: var(--box-shadow);\n border-radius: var(--border-radius-base);\n color: #787878 !important;\n padding: 1em;\n font-size: var(--font-size-sm);\n position: absolute;\n top: 0; \n right: 0;\n display: inline-block;\n width: auto !important;\n height: auto !important;\n cursor: pointer;\n line-height: 1;\n left: auto;\n margin: 0;\n align-self: auto !important;\n background: transparent;\n color: #787878;\n border: none;\n z-index: 100 !important;\n}\n\n.contactsCloseButton:hover {\n box-shadow: 0 2px 4px var(--color-primary) !important;\n}\n\n.contactsCloseButton:focus,\n.contactsCloseButton:focus-visible {\n outline: 3px solid var(--color-primary) !important;\n outline-offset: 2px !important;\n box-shadow: 0 0 0 2px white, 0 0 0 5px rgba(124, 77, 255, 0.25) !important;\n z-index: 1;\n}\n\n.contactsNewAddressForm {\n padding-top: 3em !important;\n gap: 5px;\n display: flex;\n flex-direction: column;\n}\n\n.contactsButton {\n flex-shrink: 0;\n background: #F0F0F0;\n color: #787878;\n border-radius: 8px;\n text-align: left;\n padding: var(--spacing-md);\n cursor: pointer;\n white-space: nowrap;\n}\n\n.contactsButton:hover {\n color: var(--color-primary);\n background: color-mix(in srgb, var(--color-primary), white 85%) !important; \n} \n\n.contactsSelectedButton {\n background: color-mix(in srgb, var(--color-primary), white 60%) !important; \n color: var(--color-primary);\n}\n\n.contactsContactExistsAlert {\n background: #F0F0F0 !important;\n color: #787878;\n padding: 10px;\n border-radius: var(--border-radius-base);\n box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;\n z-index: 10;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 300px;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 15px; \n text-wrap: pretty;\n}\n\n.contactsContactExistsActions {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: center;\n align-items: center;\n gap: 10px;\n width: auto;\n}\n\n.contactsContactExistsActions .contactsConfirmButton,\n.contactsContactExistsActions .contactsCancelButton {\n display: inline-flex !important;\n width: auto !important;\n min-width: fit-content;\n flex: 0 0 auto;\n margin: 0;\n white-space: nowrap;\n}\n\n.contactsAddressBookSelector [role=\"alert\"] {\n border: none !important; /* Remove borders from alerts within the contacts dialog */\n}\n\n.contactsPopupOverlay {\n position: absolute;\n inset: 0;\n background: rgba(0, 0, 0, 0.2);\n z-index: 8;\n}\n\n.contactsAddressBookSelector.contactsOverlayActive > *:not(.contactsPopupOverlay):not(.contactsPopupDialog):not(.contactsContactExistsAlert) {\n pointer-events: none;\n user-select: none;\n}\n\n.contactsAddressBookSelector.contactsOverlayActive .contactsPopupDialog,\n.contactsAddressBookSelector.contactsOverlayActive .contactsContactExistsAlert,\n.contactsAddressBookSelector.contactsOverlayActive .contactsPopupDialog *,\n.contactsAddressBookSelector.contactsOverlayActive .contactsContactExistsAlert * {\n pointer-events: auto;\n}\n\n.contactsPopupDialog {\n background: #F5F5F5 !important;\n color: var(--color-primary);\n padding: 2em;\n border-radius: var(--border-radius-base);\n box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;\n z-index: 50;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: auto;\n max-width: min(92vw, 34rem);\n max-height: calc(100vh - 6rem);\n overflow: auto;\n box-sizing: border-box;\n}\n\n@media (max-width: 600px) {\n .contactsAddressBookUriEntry {\n padding-top: 3rem !important;\n }\n\n .contactsPopupDialog {\n max-width: 92vw;\n max-height: 78vh;\n padding: 1.25rem;\n }\n}\n\n.contactsConfirmButton {\n background: var(--color-primary);\n color: white;\n border-radius: var(--border-radius-base);\n padding: var(--spacing-md);\n transition: all 0.3s ease-in-out;\n cursor: pointer;\n}\n\n.contactsConfirmButton:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n}\n\n.contactsCancelButton {\n background: transparent;\n color: #787878;\n border-radius: var(--border-radius-base);\n padding: var(--spacing-md);\n border: 1px solid #ccc;\n transition: all 0.3s ease-in-out;\n cursor: pointer;\n}\n.contactsCancelButton:hover {\n background: color-mix(in srgb, var(--color-primary), white 85%) !important; \n color: var(--color-primary);\n} \n\n.contactsNewContactCreationButton {\n width: 10em !important;\n align-self: flex-end;\n line-height: 1;\n}\n\n.contactsCreateGroupCreationButton {\n flex-shrink: 0;\n background: color-mix(in srgb, var(--color-primary), white 85%) !important; \n color: var(--color-primary) !important;\n border-radius: 8px;\n text-align: left;\n cursor: pointer;\n white-space: nowrap;\n}\n\n.contactsCloseButton {\n position: absolute !important;\n top: 0 !important;\n right: 0 !important;\n left: auto;\n margin: 0;\n align-self: auto !important;\n background: transparent;\n color: #787878;\n font-size: var(--font-size-xs);\n border: none;\n font-size: var(--font-size-sm);\n cursor: pointer;\n z-index: 100 !important;\n padding: 0.35rem 0.5rem;\n line-height: 1;\n}\n\n"],"sourceRoot":""}]);
5192
5191
  // Exports
5193
5192
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
5194
5193
 
@@ -5793,6 +5792,10 @@ var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBP
5793
5792
  // Module
5794
5793
  ___CSS_LOADER_EXPORT___.push([module.id, `/* Utility-first CSS classes for layout, spacing, and responsiveness */
5795
5794
 
5795
+ :root {
5796
+ --font-size-md: 1em;
5797
+ }
5798
+
5796
5799
  .actionButton {
5797
5800
  width: 100%;
5798
5801
  min-width: 180px;
@@ -6150,7 +6153,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Utility-first CSS classes for layou
6150
6153
  input[type="radio"] {
6151
6154
  accent-color: var(--color-secondary); /* Change to your desired color */
6152
6155
  }
6153
- `, "",{"version":3,"sources":["webpack://./src/styles/utilities.css"],"names":[],"mappings":"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","sourcesContent":["/* Utility-first CSS classes for layout, spacing, and responsiveness */\n\n.actionButton {\n width: 100%;\n min-width: 180px;\n max-width: 320px;\n box-sizing: border-box;\n display: inline-block;\n}\n\n.selectedButton {\n background-color: var(--color-primary) !important;\n color: white !important;\n border: 1px solid white !important;\n}\n/* ===========================================\n PROFILE GRID LAYOUT\n =========================================== */\n\n.profile-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(30em, 1fr));\n gap: var(--spacing-lg);\n background: var(--color-background);\n}\n\n.profile-header,\n.profile-footer {\n grid-column: 1 / -1;\n}\n\n.center {\n justify-content: center;\n align-items: center;\n}\n\n.flex {\n display: flex;\n}\n.grid {\n display: grid;\n}\n\n/* Spacing utilities using CSS variables */\n.gap-xs { gap: var(--spacing-xs); }\n.gap-sm { gap: var(--spacing-sm); }\n.gap-md { gap: var(--spacing-md); }\n.gap-lg { gap: var(--spacing-lg); }\n.gap-xl { gap: var(--spacing-xl); }\n\n.mt-xs { margin-top: var(--spacing-xs); }\n.mt-sm { margin-top: var(--spacing-sm); }\n.mt-md { margin-top: var(--spacing-md); }\n.mt-lg { margin-top: var(--spacing-lg); }\n\n.mb-xs { margin-bottom: var(--spacing-xs); }\n.mb-sm { margin-bottom: var(--spacing-sm); }\n.mb-md { margin-bottom: var(--spacing-md); }\n.mb-lg { margin-bottom: var(--spacing-lg); }\n\n.p-xs { padding: var(--spacing-xs); }\n.p-sm { padding: var(--spacing-sm); }\n.p-md { padding: var(--spacing-md); }\n.p-lg { padding: var(--spacing-lg); }\n\n.rounded { border-radius: var(--border-radius-full); }\n.rounded-sm { border-radius: var(--border-radius-base); }\n\n.shadow { box-shadow: var(--box-shadow); }\n.shadow-sm { box-shadow: var(--box-shadow-sm); }\n\n.bg-primary {\n background: var(--color-primary);\n color: #fff;\n}\n.bg-card {\n background: var(--color-card-bg);\n}\n\n/* Accessibility utilities */\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n\n.min-touch-target {\n min-height: var(--min-touch-target);\n min-width: var(--min-touch-target);\n}\n\n/* Enhanced accessibility utilities */\n.visually-hidden {\n position: absolute !important;\n width: 1px !important;\n height: 1px !important;\n padding: 0 !important;\n margin: -1px !important;\n overflow: hidden !important;\n clip: rect(0, 0, 0, 0) !important;\n white-space: nowrap !important;\n border: 0 !important;\n}\n\n.visually-hidden.focusable:focus,\n.visually-hidden.focusable:active {\n position: static !important;\n width: auto !important;\n height: auto !important;\n padding: inherit !important;\n margin: inherit !important;\n overflow: visible !important;\n clip: auto !important;\n white-space: inherit !important;\n}\n\n/* Skip links utility */\n.skip-links {\n position: absolute;\n top: -100px;\n left: 0;\n z-index: 1000;\n}\n\n.skip-links a {\n position: absolute;\n left: 6px;\n top: 6px;\n padding: var(--spacing-sm);\n background: var(--color-primary);\n color: white;\n text-decoration: none;\n border-radius: var(--border-radius-base);\n}\n\n.skip-links a:focus {\n top: 6px;\n}\n\n.reduced-motion {\n animation: none !important;\n transition: none !important;\n}\n\n/* Focus management */\n.focus-ring {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n}\n\n.no-focus-ring {\n outline: none;\n}\n\n.no-focus-ring:focus-visible {\n outline: none;\n box-shadow: none;\n}\n\n/* ARIA live regions */\n.live-region {\n position: absolute;\n left: -10000px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n}\n\n/* Note: Use aria-live=\"polite\" or aria-live=\"assertive\" HTML attributes with .live-region */\n\n/* Text scaling utilities */\n.text-scale-friendly {\n line-height: 1.5;\n max-width: 70ch; /* Optimal reading length */\n}\n\n/* Text accessibility utilities */\n.text-readable {\n line-height: var(--line-height-base);\n max-width: 65ch;\n}\n\n.text-lg {\n font-size: var(--font-size-lg);\n line-height: var(--line-height-base);\n}\n\n.text-small {\n font-size: max(var(--font-size-sm), var(--min-font-size));\n line-height: var(--min-line-height);\n}\n\n.text-contrast-high {\n color: var(--color-text);\n font-weight: 600;\n}\n\n:focus-visible {\n outline: var(--focus-ring-width) solid var(--color-primary);\n outline-offset: 2px;\n box-shadow: 0 0 0 1px var(--color-background);\n}\n\n:focus:not(:focus-visible) {\n outline: none;\n box-shadow: none;\n}\n\n/* Better focus for text elements */\n.focusable-text:focus {\n background-color: rgba(124, 77, 255, 0.1);\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n border-radius: 2px;\n}\n\n/* High contrast text */\n.high-contrast {\n color: var(--color-text);\n background: var(--color-background);\n border: 1px solid var(--color-border-pale);\n}\n\n/* ===========================================\n CONSOLIDATED COMPONENT PATTERNS\n =========================================== */\n\n/* Primary Button - used by ChatWithMe, ProfileCard */\n.btn-primary {\n min-height: var(--min-touch-target);\n padding: var(--spacing-sm) var(--spacing-md);\n border: 1px solid var(--color-primary);\n border-radius: var(--border-radius-base);\n background: var(--color-primary);\n color: white;\n font-weight: 600;\n cursor: pointer;\n transition: all var(--animation-duration) ease;\n}\n\n.btn-primary:hover {\n background: color-mix(in srgb, var(--color-primary) 90%, black);\n box-shadow: 0 2px 4px rgba(124, 77, 255, 0.2);\n}\n\n.btn-primary:active {\n box-shadow: 0 1px 2px rgba(124, 77, 255, 0.2);\n}\n\n.btn-primary:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n transform: none;\n}\n\n/* Action Button Focus - used by ChatWithMe, ProfileCard */\n.action-button-focus:focus,\n.action-button-focus:focus-visible {\n outline: 3px solid var(--color-primary) !important;\n outline-offset: 2px !important;\n box-shadow: 0 0 0 2px var(--color-background), 0 0 0 5px rgba(124, 77, 255, 0.25) !important;\n z-index: 1;\n}\n\n/* List Reset - used by FriendList, SocialCard, nav */\n.list-reset {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n/* Zebra Striping - used by FriendList, StuffCard tables */\n.zebra-stripe tr:nth-child(even),\n.zebra-stripe > *:nth-child(even) {\n background-color: rgba(0, 0, 0, 0.02);\n}\n\n/* Section Title - primary colored heading */\n.section-title {\n font-size: 1.25em;\n font-weight: 600;\n color: var(--color-primary);\n margin: 0;\n}\n\n/* Text Overflow - used by ProfileCard, SocialCard */\n.text-truncate {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n\n.text-wrap-anywhere {\n overflow-wrap: anywhere;\n word-break: break-word;\n}\n\n/* Loading Text - primary colored centered loading indicator */\n.loading-text {\n color: var(--color-primary);\n text-align: center;\n margin: var(--spacing-md) 0;\n}\n\n/* Centered Section - flex column with center alignment */\n.section-centered {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n/* Card Section Background */\n.section-bg {\n background: var(--color-section-bg);\n border-radius: var(--border-radius-full);\n box-shadow: var(--box-shadow);\n padding: var(--spacing-md);\n}\n\n\n/* Transparent button override (for solid-ui integration) */\n.btn-transparent {\n background-color: transparent;\n}\n\n.btn-transparent:hover {\n background-color: transparent;\n}\n\n/* input */\n.input {\n padding: 5px;\n min-height: var(--min-touch-target);\n height: 35px;\n box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;\n border: none;\n border-radius: var(--border-radius-base);\n background: white;\n font-weight: 600;\n font-size: var(--font-size-sm);\n transition: box-shadow 0.3s ease;\n}\n\n.input:focus,\n.input:focus-visible {\n border-radius: var(--border-radius-base);\n box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px !important;\n z-index: 1;\n}\n\ninput[type=\"radio\"] {\n accent-color: var(--color-secondary); /* Change to your desired color */\n}\n"],"sourceRoot":""}]);
6156
+ `, "",{"version":3,"sources":["webpack://./src/styles/utilities.css"],"names":[],"mappings":"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","sourcesContent":["/* Utility-first CSS classes for layout, spacing, and responsiveness */\n\n:root {\n --font-size-md: 1em;\n}\n\n.actionButton {\n width: 100%;\n min-width: 180px;\n max-width: 320px;\n box-sizing: border-box;\n display: inline-block;\n}\n\n.selectedButton {\n background-color: var(--color-primary) !important;\n color: white !important;\n border: 1px solid white !important;\n}\n/* ===========================================\n PROFILE GRID LAYOUT\n =========================================== */\n\n.profile-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(30em, 1fr));\n gap: var(--spacing-lg);\n background: var(--color-background);\n}\n\n.profile-header,\n.profile-footer {\n grid-column: 1 / -1;\n}\n\n.center {\n justify-content: center;\n align-items: center;\n}\n\n.flex {\n display: flex;\n}\n.grid {\n display: grid;\n}\n\n/* Spacing utilities using CSS variables */\n.gap-xs { gap: var(--spacing-xs); }\n.gap-sm { gap: var(--spacing-sm); }\n.gap-md { gap: var(--spacing-md); }\n.gap-lg { gap: var(--spacing-lg); }\n.gap-xl { gap: var(--spacing-xl); }\n\n.mt-xs { margin-top: var(--spacing-xs); }\n.mt-sm { margin-top: var(--spacing-sm); }\n.mt-md { margin-top: var(--spacing-md); }\n.mt-lg { margin-top: var(--spacing-lg); }\n\n.mb-xs { margin-bottom: var(--spacing-xs); }\n.mb-sm { margin-bottom: var(--spacing-sm); }\n.mb-md { margin-bottom: var(--spacing-md); }\n.mb-lg { margin-bottom: var(--spacing-lg); }\n\n.p-xs { padding: var(--spacing-xs); }\n.p-sm { padding: var(--spacing-sm); }\n.p-md { padding: var(--spacing-md); }\n.p-lg { padding: var(--spacing-lg); }\n\n.rounded { border-radius: var(--border-radius-full); }\n.rounded-sm { border-radius: var(--border-radius-base); }\n\n.shadow { box-shadow: var(--box-shadow); }\n.shadow-sm { box-shadow: var(--box-shadow-sm); }\n\n.bg-primary {\n background: var(--color-primary);\n color: #fff;\n}\n.bg-card {\n background: var(--color-card-bg);\n}\n\n/* Accessibility utilities */\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n\n.min-touch-target {\n min-height: var(--min-touch-target);\n min-width: var(--min-touch-target);\n}\n\n/* Enhanced accessibility utilities */\n.visually-hidden {\n position: absolute !important;\n width: 1px !important;\n height: 1px !important;\n padding: 0 !important;\n margin: -1px !important;\n overflow: hidden !important;\n clip: rect(0, 0, 0, 0) !important;\n white-space: nowrap !important;\n border: 0 !important;\n}\n\n.visually-hidden.focusable:focus,\n.visually-hidden.focusable:active {\n position: static !important;\n width: auto !important;\n height: auto !important;\n padding: inherit !important;\n margin: inherit !important;\n overflow: visible !important;\n clip: auto !important;\n white-space: inherit !important;\n}\n\n/* Skip links utility */\n.skip-links {\n position: absolute;\n top: -100px;\n left: 0;\n z-index: 1000;\n}\n\n.skip-links a {\n position: absolute;\n left: 6px;\n top: 6px;\n padding: var(--spacing-sm);\n background: var(--color-primary);\n color: white;\n text-decoration: none;\n border-radius: var(--border-radius-base);\n}\n\n.skip-links a:focus {\n top: 6px;\n}\n\n.reduced-motion {\n animation: none !important;\n transition: none !important;\n}\n\n/* Focus management */\n.focus-ring {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n}\n\n.no-focus-ring {\n outline: none;\n}\n\n.no-focus-ring:focus-visible {\n outline: none;\n box-shadow: none;\n}\n\n/* ARIA live regions */\n.live-region {\n position: absolute;\n left: -10000px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n}\n\n/* Note: Use aria-live=\"polite\" or aria-live=\"assertive\" HTML attributes with .live-region */\n\n/* Text scaling utilities */\n.text-scale-friendly {\n line-height: 1.5;\n max-width: 70ch; /* Optimal reading length */\n}\n\n/* Text accessibility utilities */\n.text-readable {\n line-height: var(--line-height-base);\n max-width: 65ch;\n}\n\n.text-lg {\n font-size: var(--font-size-lg);\n line-height: var(--line-height-base);\n}\n\n.text-small {\n font-size: max(var(--font-size-sm), var(--min-font-size));\n line-height: var(--min-line-height);\n}\n\n.text-contrast-high {\n color: var(--color-text);\n font-weight: 600;\n}\n\n:focus-visible {\n outline: var(--focus-ring-width) solid var(--color-primary);\n outline-offset: 2px;\n box-shadow: 0 0 0 1px var(--color-background);\n}\n\n:focus:not(:focus-visible) {\n outline: none;\n box-shadow: none;\n}\n\n/* Better focus for text elements */\n.focusable-text:focus {\n background-color: rgba(124, 77, 255, 0.1);\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n border-radius: 2px;\n}\n\n/* High contrast text */\n.high-contrast {\n color: var(--color-text);\n background: var(--color-background);\n border: 1px solid var(--color-border-pale);\n}\n\n/* ===========================================\n CONSOLIDATED COMPONENT PATTERNS\n =========================================== */\n\n/* Primary Button - used by ChatWithMe, ProfileCard */\n.btn-primary {\n min-height: var(--min-touch-target);\n padding: var(--spacing-sm) var(--spacing-md);\n border: 1px solid var(--color-primary);\n border-radius: var(--border-radius-base);\n background: var(--color-primary);\n color: white;\n font-weight: 600;\n cursor: pointer;\n transition: all var(--animation-duration) ease;\n}\n\n.btn-primary:hover {\n background: color-mix(in srgb, var(--color-primary) 90%, black);\n box-shadow: 0 2px 4px rgba(124, 77, 255, 0.2);\n}\n\n.btn-primary:active {\n box-shadow: 0 1px 2px rgba(124, 77, 255, 0.2);\n}\n\n.btn-primary:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n transform: none;\n}\n\n/* Action Button Focus - used by ChatWithMe, ProfileCard */\n.action-button-focus:focus,\n.action-button-focus:focus-visible {\n outline: 3px solid var(--color-primary) !important;\n outline-offset: 2px !important;\n box-shadow: 0 0 0 2px var(--color-background), 0 0 0 5px rgba(124, 77, 255, 0.25) !important;\n z-index: 1;\n}\n\n/* List Reset - used by FriendList, SocialCard, nav */\n.list-reset {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n/* Zebra Striping - used by FriendList, StuffCard tables */\n.zebra-stripe tr:nth-child(even),\n.zebra-stripe > *:nth-child(even) {\n background-color: rgba(0, 0, 0, 0.02);\n}\n\n/* Section Title - primary colored heading */\n.section-title {\n font-size: 1.25em;\n font-weight: 600;\n color: var(--color-primary);\n margin: 0;\n}\n\n/* Text Overflow - used by ProfileCard, SocialCard */\n.text-truncate {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n\n.text-wrap-anywhere {\n overflow-wrap: anywhere;\n word-break: break-word;\n}\n\n/* Loading Text - primary colored centered loading indicator */\n.loading-text {\n color: var(--color-primary);\n text-align: center;\n margin: var(--spacing-md) 0;\n}\n\n/* Centered Section - flex column with center alignment */\n.section-centered {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n/* Card Section Background */\n.section-bg {\n background: var(--color-section-bg);\n border-radius: var(--border-radius-full);\n box-shadow: var(--box-shadow);\n padding: var(--spacing-md);\n}\n\n\n/* Transparent button override (for solid-ui integration) */\n.btn-transparent {\n background-color: transparent;\n}\n\n.btn-transparent:hover {\n background-color: transparent;\n}\n\n/* input */\n.input {\n padding: 5px;\n min-height: var(--min-touch-target);\n height: 35px;\n box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;\n border: none;\n border-radius: var(--border-radius-base);\n background: white;\n font-weight: 600;\n font-size: var(--font-size-sm);\n transition: box-shadow 0.3s ease;\n}\n\n.input:focus,\n.input:focus-visible {\n border-radius: var(--border-radius-base);\n box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px !important;\n z-index: 1;\n}\n\ninput[type=\"radio\"] {\n accent-color: var(--color-secondary); /* Change to your desired color */\n}\n"],"sourceRoot":""}]);
6154
6157
  // Exports
6155
6158
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
6156
6159
 
@@ -11235,7 +11238,7 @@ const createAddressBookUriEntryDiv = (context, contactsModule, addressBooksData,
11235
11238
  addressBookUriEntryDiv.setAttribute('aria-label', 'Address book URI entry div');
11236
11239
  addressBookUriEntryDiv.setAttribute('aria-describedby', 'addressbook-uri-entry-div');
11237
11240
  addressBookUriEntryDiv.setAttribute('id', 'contacts-addressbook-uri-entry');
11238
- addressBookUriEntryDiv.classList.add('contactsPopupMessage', 'contactsAddressBookUriEntry');
11241
+ addressBookUriEntryDiv.classList.add('contactsPopupDialog', 'contactsAddressBookUriEntry');
11239
11242
  const closeButton = createCloseButton(context, addressBookUriEntryDiv, 'contactsAddressBookUriEntryCloseButton');
11240
11243
  addressBookUriEntryDiv.appendChild(closeButton);
11241
11244
  addressBookUriEntryDiv.appendChild(createAddressBookUriEntryForm(context, contactsModule, addressBooksData, contactData));
@@ -11567,7 +11570,7 @@ const createNewAddressBookForm = (context, addressBooksData, contactsModule, con
11567
11570
  newAddressBookForm.method = 'post';
11568
11571
  newAddressBookForm.innerHTML = 'Create a new address book';
11569
11572
  newAddressBookForm.setAttribute('id', 'new-addressbook-form');
11570
- newAddressBookForm.classList.add('contactsPopupMessage', 'contactsNewAddressForm');
11573
+ newAddressBookForm.classList.add('contactsPopupDialog', 'contactsNewAddressForm');
11571
11574
  const addressBookNameLabel = context.dom.createElement('label');
11572
11575
  addressBookNameLabel.classList.add('label');
11573
11576
  addressBookNameLabel.setAttribute('for', 'addressBookNameInput');
@@ -11620,6 +11623,7 @@ const createNewAddressBookForm = (context, addressBooksData, contactsModule, con
11620
11623
  return newAddressBookForm;
11621
11624
  };
11622
11625
  const createCloseButton = (context, element, specialClass) => {
11626
+ const buttonID = `${element.id}-close-button`;
11623
11627
  const setButtonOnClickHandler = (event) => {
11624
11628
  event.preventDefault();
11625
11629
  if (element) {
@@ -11633,7 +11637,7 @@ const createCloseButton = (context, element, specialClass) => {
11633
11637
  }
11634
11638
  };
11635
11639
  const closeButton = context.dom.createElement('button');
11636
- closeButton.setAttribute('id', 'close-addressbook');
11640
+ closeButton.setAttribute('id', buttonID);
11637
11641
  closeButton.setAttribute('role', 'button');
11638
11642
  closeButton.setAttribute('type', 'button');
11639
11643
  const ariaLabel = specialClass === 'contactsCloseButton'
@@ -11691,7 +11695,7 @@ const createGroupNameForm = (context, contactsModule, addressBooksData, contactD
11691
11695
  newGroupForm.addEventListener('submit', addGroupEventListener);
11692
11696
  newGroupForm.innerHTML = 'Create a new group';
11693
11697
  newGroupForm.setAttribute('id', 'new-group-form');
11694
- newGroupForm.classList.add('contactsPopupMessage', 'contactsNewGroupForm');
11698
+ newGroupForm.classList.add('contactsPopupDialog', 'contactsNewGroupForm');
11695
11699
  const groupNameLabel = context.dom.createElement('label');
11696
11700
  groupNameLabel.classList.add('label');
11697
11701
  groupNameLabel.setAttribute('for', 'groupNameInput');
@@ -11850,7 +11854,7 @@ const removePopupOverlayIfNoPopup = (context) => {
11850
11854
  const selectorDialog = context.dom.getElementById('contacts-selector-dialog');
11851
11855
  if (!selectorDialog)
11852
11856
  return;
11853
- const activePopup = selectorDialog.querySelector('.contactsPopupMessage, .contactsContactExistsAlert');
11857
+ const activePopup = selectorDialog.querySelector('.contactsPopupDialog, .contactsContactExistsAlert');
11854
11858
  if (activePopup)
11855
11859
  return;
11856
11860
  const overlay = selectorDialog.querySelector(`#${CONTACTS_POPUP_OVERLAY_ID}`);
@@ -11966,9 +11970,11 @@ async function getAddressBooks(context, contactsModule) {
11966
11970
  privateUris: []
11967
11971
  };
11968
11972
  // let addressBookUris = await contactsModule.listAddressBooks(me.value)
11969
- const publicAddressBookPromises = await addressBookUris.publicUris.map(addressBook => getAddressData(context, contactsModule, addressBook));
11973
+ const publicAddressBookPromises = addressBookUris.publicUris.map(addressBook => getAddressData(context, contactsModule, addressBook));
11970
11974
  const publicAddressBooksData = await Promise.all(publicAddressBookPromises);
11971
11975
  publicAddressBooksData.map((addressBook) => {
11976
+ if (!addressBook)
11977
+ return;
11972
11978
  addressBooksData.public.set(addressBook.uri, {
11973
11979
  name: addressBook.title,
11974
11980
  groups: addressBook.groups,
@@ -11982,6 +11988,8 @@ async function getAddressBooks(context, contactsModule) {
11982
11988
  const privateAddressBookPromises = addressBookUris.privateUris.map(addressBook => getAddressData(context, contactsModule, addressBook));
11983
11989
  const privateAddressBooksData = await Promise.all(privateAddressBookPromises);
11984
11990
  privateAddressBooksData.map((addressBook) => {
11991
+ if (!addressBook)
11992
+ return;
11985
11993
  addressBooksData.private.set(addressBook.uri, {
11986
11994
  name: addressBook.title,
11987
11995
  groups: addressBook.groups,
@@ -12016,8 +12024,8 @@ async function processContactWebIDs(context, addressBooksData, allContacts) {
12016
12024
  const contactPromises = allContacts.map(getWebID.bind(null, context));
12017
12025
  const results = await Promise.all(contactPromises);
12018
12026
  results.map((contact) => {
12019
- if (contact)
12020
- addressBooksData.contactWebIDs.set(contact.webID, contact.uri);
12027
+ if (contact === null || contact === void 0 ? void 0 : contact.webID)
12028
+ addressBooksData.contactWebIDs.set(contact.webID.trim(), contact.uri);
12021
12029
  });
12022
12030
  return addressBooksData;
12023
12031
  }
@@ -12040,10 +12048,7 @@ async function getContactData(store, subject) {
12040
12048
  type = store.any(node, external_UI_.ns.rdf('type'), null, subject.doc());
12041
12049
  phoneNumbers.push({ type, phoneNumber });
12042
12050
  });
12043
- // Need to fix below right now don't want to add
12044
- // while testing
12045
- // const webID = subject.value
12046
- const webID = 'https://testingsolidos.solidcommunity.net/profile/card#me';
12051
+ const webID = subject.value;
12047
12052
  return {
12048
12053
  name,
12049
12054
  emails,
@@ -12056,6 +12061,9 @@ async function addANewAddressBookUriToAddressBooks(context, contactsModule, addr
12056
12061
  let contactsAddressBook = null;
12057
12062
  try {
12058
12063
  const addressBook = await getAddressData(context, contactsModule, enteredAddressBookUri);
12064
+ if (!addressBook) {
12065
+ return { addressBooksData, addressBook: null };
12066
+ }
12059
12067
  contactsAddressBook = {
12060
12068
  name: addressBook.title,
12061
12069
  groups: addressBook.groups,
@@ -12236,9 +12244,9 @@ function refreshButton(context, addressBooksData, contactData) {
12236
12244
  }
12237
12245
  }
12238
12246
  function checkIfContactExistsByWebID(addressBooksData, subjectUri) {
12239
- if (addressBooksData.contactWebIDs.has(subjectUri))
12240
- return true;
12241
- return false;
12247
+ if (!(subjectUri === null || subjectUri === void 0 ? void 0 : subjectUri.trim()))
12248
+ return false;
12249
+ return addressBooksData.contactWebIDs.has(subjectUri.trim());
12242
12250
  }
12243
12251
  function checkIfContactExistsByName(addressBooksData, name) {
12244
12252
  let normalizedContactName = null;
@@ -13270,16 +13278,16 @@ const createAddMeToYourContactsButton = async (subject, context) => {
13270
13278
  needsBorder: true,
13271
13279
  });
13272
13280
  button.setAttribute('id', 'add-to-contacts-button');
13273
- //button.refresh = refreshButton(context, subject, addressBooksData)
13274
13281
  button.refresh = refreshButton();
13275
13282
  function refreshButton() {
13276
13283
  if (checkIfAnyUserLoggedIn(me)) {
13277
- const contactExistsByWebID = checkIfContactExistsByWebID(addressBooksData, contactData.webID);
13278
- const contactExistsByName = checkIfContactExistsByName(addressBooksData, contactData.name);
13284
+ const contactExistsByWebID = (contactData) ? checkIfContactExistsByWebID(addressBooksData, contactData.webID) : false;
13285
+ const contactExistsByName = (contactData) ? checkIfContactExistsByName(addressBooksData, contactData.name) : false;
13279
13286
  if (contactExistsByWebID) {
13280
13287
  //logged in and friend exists or friend was just added
13281
13288
  button.innerHTML = contactExistsAlreadyButtonText.toUpperCase();
13282
13289
  button.onclick = null;
13290
+ button.setAttribute('disabled', 'true');
13283
13291
  }
13284
13292
  else if (contactExistsByName) {
13285
13293
  button.innerHTML = contactExistsAlreadyByNameButtonText.toUpperCase();