profile-pane 3.1.4 → 3.2.0

package/lib/sections/contactInfo/ContactInfoEditDialog.js

@@ -0,0 +1,658 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createContactInfoEditDialog = createContactInfoEditDialog;
+var _dialog = require("../../ui/dialog");
+var _litHtml = require("lit-html");
+require("../../styles/EditDialogs.css");
+require("../../styles/ContactInfoEditDialog.css");
+var _mutations = require("./mutations");
+var _phoneCountries = require("../shared/phoneCountries");
+var _contactTypeUtils = require("../shared/contactTypeUtils");
+var _rowState = require("../shared/rowState");
+var _textUtils = require("../../textUtils");
+var _texts = require("../../texts");
+var _sanitizeUtils = require("../shared/sanitizeUtils");
+var _profileIcons = require("../../icons-svg/profileIcons");
+var _contactIcons = require("../../icons-svg/contactIcons");
+/* Some of the code in this file was generated by AI Model: GPT-5.3-Codex  */
+/* Prompt: 1. are you able to create a little trash can icon at the end of 
+              each entry so for each phone, email and address line.
+           2. are you able to add all the country flags and prefix next to 
+              the phone numbers? 
+           3. can you write functions to sanitize the input values for emails, phones, and addresses? */
+
+function isContactPointRow(row) {
+  return 'value' in row;
+}
+function rowHasContent(row) {
+  if (isContactPointRow(row)) {
+    return (0, _textUtils.hasNonEmptyText)(row.value);
+  }
+  return [row.streetAddress, row.locality, row.region, row.postalCode, row.countryName].some(_textUtils.hasNonEmptyText);
+}
+function toFormState(contactInfo) {
+  const emails = (contactInfo.emails || []).map(email => ({
+    value: (0, _sanitizeUtils.sanitizeEmailValue)((0, _textUtils.toText)(email.valueNode).replace(/^mailto:/i, '')),
+    type: (0, _contactTypeUtils.normalizeEmailTypeForContactInfoEdit)(email.type),
+    entryNode: (0, _textUtils.toText)(email.entryNode),
+    status: (0, _textUtils.toText)(email.entryNode) ? 'existing' : 'new'
+  })).filter(email => Boolean(email.value || email.entryNode || email.type));
+  const phones = (contactInfo.phones || []).map(phone => ({
+    value: (0, _textUtils.sanitizeTextValue)((0, _textUtils.toText)(phone.valueNode).replace(/^tel:/i, '')),
+    type: (0, _contactTypeUtils.normalizePhoneTypeForContactInfoEdit)(phone.type),
+    entryNode: (0, _textUtils.toText)(phone.entryNode),
+    status: 'existing'
+  })).filter(phone => Boolean(phone.value));
+  const addresses = (contactInfo.addresses || []).map(address => ({
+    streetAddress: (0, _sanitizeUtils.sanitizeAddressFieldValue)((0, _textUtils.toText)(address.streetAddress)),
+    locality: (0, _sanitizeUtils.sanitizeAddressFieldValue)((0, _textUtils.toText)(address.locality)),
+    region: (0, _sanitizeUtils.sanitizeAddressFieldValue)((0, _textUtils.toText)(address.region)),
+    postalCode: (0, _sanitizeUtils.sanitizeAddressFieldValue)((0, _textUtils.toText)(address.postalCode)),
+    countryName: (0, _sanitizeUtils.sanitizeAddressFieldValue)((0, _textUtils.toText)(address.countryName)),
+    type: (0, _textUtils.toText)(address.type),
+    entryNode: (0, _textUtils.toText)(address.entryNode),
+    status: (0, _textUtils.toText)(address.entryNode) ? 'existing' : 'new'
+  })).filter(address => rowHasContent(address) || Boolean(address.entryNode || address.type));
+  return {
+    emails: emails.length ? emails : [{
+      value: '',
+      type: '',
+      entryNode: '',
+      status: 'new'
+    }],
+    phones: phones.length ? phones : [{
+      value: '',
+      type: '',
+      entryNode: '',
+      status: 'new'
+    }],
+    addresses: addresses.length ? addresses : [{
+      streetAddress: '',
+      locality: '',
+      region: '',
+      postalCode: '',
+      countryName: '',
+      type: '',
+      entryNode: '',
+      status: 'new'
+    }]
+  };
+}
+/* not needed for now
+function renderCountryPrefixSelect(
+  name: string,
+  value: string,
+  label: string,
+  onChange: (event: Event) => void
+) {
+  return html`
+    <label class="label profile-edit-dialog__phone-prefix-field" aria-label=${label}>
+      <select class="phonePrefixSelect" name=${name} .value=${value} @change=${onChange}>
+        ${COUNTRY_PREFIX_OPTIONS.map((option) => html`
+          <option value=${option.dialCode}>
+            ${countryCodeToFlag(option.iso2)} ${option.dialCode}
+          </option>
+        `)}
+      </select>
+    </label>
+  `
+} */
+
+function renderContactPhoneInputRow({
+  phones,
+  index,
+  displayIndex,
+  onDelete
+}) {
+  const phoneRow = phones[index];
+  const label = `Phone Number ${displayIndex + 1}`;
+  // const countryCodeLabel = `Country Calling Code ${displayIndex + 1}`
+  const typeLabel = `Phone Type ${displayIndex + 1}`;
+  // const prefixInputName = `phone-prefix-${index}`
+  const inputName = `phone-value-${index}`;
+  const typeInputName = `phone-type-${index}`;
+  const splitValue = (0, _phoneCountries.splitPhoneValue)(phoneRow?.value || '');
+  let selectedDialCode = splitValue.dialCode;
+  const handleValueInput = e => {
+    const target = e.target;
+    const nextValue = (0, _sanitizeUtils.sanitizePhoneLocalValue)(target.value);
+    if (phones[index]) {
+      (0, _rowState.applyRowFieldChange)(phones[index], 'value', (0, _phoneCountries.combinePhoneValue)(selectedDialCode, nextValue), rowHasContent);
+    }
+  };
+  /* Not needed for now
+    const handleCountryCodeInput = (e: Event) => {
+      const target = e.target as HTMLSelectElement
+      selectedDialCode = target.value
+  
+      if (phones[index]) {
+        const localNumber = splitPhoneValue(phones[index].value).localNumber
+        applyRowFieldChange(phones[index], 'value', combinePhoneValue(selectedDialCode, localNumber), rowHasContent)
+      }
+    } */
+
+  const handleTypeInput = e => {
+    const target = e.target;
+    const nextType = target.value;
+    if (phones[index]) {
+      (0, _rowState.applyRowSelectChange)(phones[index], 'type', nextType);
+    }
+  };
+  const handleDelete = event => {
+    event.preventDefault();
+    onDelete();
+  };
+  return (0, _litHtml.html)`
+    <div class="profile-edit-dialog__row profile-edit-dialog__row--contact-point">
+      <div class="profile-edit-dialog__field">
+        <label aria-label=${label} class="label">
+          <input
+            class="input"
+            type="tel"
+            name=${inputName}
+            .value=${splitValue.localNumber}
+            required
+            data-contact-field="value"
+            data-entry-node=${phoneRow?.entryNode || ''}
+            data-row-status=${phoneRow?.status || 'n/a'}
+            placeholder="Phone Number"
+            autocomplete="tel-national"
+            inputmode="tel"
+            @input=${handleValueInput}
+          />
+        </label>
+      </div>
+      <label aria-label=${typeLabel} class="label profile-edit-dialog__field-type profile-edit-dialog__phone-type-row">
+        <select name=${typeInputName} id="phone-type-select-${inputName}" @change=${handleTypeInput} .value=${phoneRow?.type || ''}>
+          <option value="Cell">Mobile</option>
+          <option value="Home">Home</option>
+          <option value="Work">Work</option>
+        </select>
+      </label>
+      <div class="profile-edit-dialog__actions">
+        <button
+          type="button"
+          class="profile-edit-dialog__delete-button"
+          aria-label=${`Delete phone number ${displayIndex + 1}`}
+          title=${_texts.deleteEntryButtonTitleText}
+          @click=${handleDelete}
+        >
+          <span class="profile-edit-dialog__delete-icon" aria-hidden="true">${_profileIcons.trashIcon}</span>
+        </button>
+      </div>
+    </div>
+  `;
+}
+function renderContactInfoPhoneSection(phones, onAddRow) {
+  const createNewRow = event => {
+    event.preventDefault();
+    phones.unshift({
+      value: '',
+      type: '',
+      entryNode: '',
+      status: 'new'
+    });
+    onAddRow({
+      focusSelector: '[name="phone-value-0"]'
+    });
+  };
+  const visiblePhones = phones.map((phone, index) => ({
+    phone,
+    index
+  })).filter(({
+    phone
+  }) => phone.status !== 'deleted');
+  return (0, _litHtml.html)`
+    <section 
+      aria-labelledby="phone-numbers-heading" 
+      class="profile-edit-dialog__section">
+      <header class="profile__section-header">
+        <h3 id="phone-numbers-heading" class="profile-edit-dialog__section-heading">
+          <span class="sectionTitleIcon" aria-hidden="true">${_contactIcons.phoneIcon}</span>
+          Phone Numbers
+        </h3>
+        <button
+          type="button"
+          class="profile__action-button profile-action-text flex-center"
+          aria-label="Add another phone number"
+          @click=${createNewRow}
+        >
+          <span class="profile__add-more-content inline-flex-row">
+            <span class="profile__add-more-icon inline-flex-row" aria-hidden="true">${_profileIcons.addIcon}</span>
+            Add More
+          </span>
+        </button>
+      </header>
+      <fieldset>
+        <legend class="sr-only">Phone number entries</legend>
+        ${visiblePhones.map(({
+    index
+  }, displayIndex) => renderContactPhoneInputRow({
+    phones,
+    index,
+    displayIndex,
+    onDelete: () => {
+      (0, _rowState.deleteRow)(phones, index);
+      onAddRow();
+    }
+  }))}
+      </fieldset>
+    </section>
+  `;
+}
+function renderContactEmailInputRow({
+  emails,
+  index,
+  displayIndex,
+  onDelete
+}) {
+  const emailRow = emails[index];
+  const label = `Email Address ${displayIndex + 1}`;
+  const typeLabel = `Email Type ${displayIndex + 1}`;
+  const inputName = `email-value-${index}`;
+  const typeInputName = `email-type-${index}`;
+  const handleValueInput = e => {
+    const target = e.target;
+    const nextValue = (0, _sanitizeUtils.sanitizeEmailValue)(target.value);
+    if (emails[index]) {
+      (0, _rowState.applyRowFieldChange)(emails[index], 'value', nextValue, rowHasContent);
+    }
+  };
+  const handleTypeInput = e => {
+    const target = e.target;
+    const nextType = target.value;
+    if (emails[index]) {
+      (0, _rowState.applyRowSelectChange)(emails[index], 'type', nextType);
+    }
+  };
+  const handleDelete = event => {
+    event.preventDefault();
+    onDelete();
+  };
+  return (0, _litHtml.html)`
+    <div class="profile-edit-dialog__row profile-edit-dialog__row--contact-point">
+      <label aria-label=${label} class="label profile-edit-dialog__field">
+        <input
+          class="input"
+          type="email"
+          name=${inputName}
+          .value=${emailRow?.value || ''}
+          required
+          data-contact-field="value"
+          data-entry-node=${emailRow?.entryNode || ''}
+          data-row-status=${emailRow?.status || 'n/a'}
+          placeholder="Email Address"
+          autocomplete="email"
+          inputmode="email"
+          @input=${handleValueInput}
+        />
+      </label>
+      <label aria-label=${typeLabel} class="label profile-edit-dialog__field-type emailTypeRow">
+        <select name=${typeInputName} id="email-type-select-${inputName}" @change=${handleTypeInput} .value=${emailRow?.type || ''}>
+          <option value="Home">Personal</option>
+          <option value="Office">Office</option>
+        </select>
+      </label>
+      <div class="profile-edit-dialog__actions">
+        <button
+          type="button"
+          class="profile-edit-dialog__delete-button"
+          aria-label=${`Delete email address ${displayIndex + 1}`}
+          title=${_texts.deleteEntryButtonTitleText}
+          @click=${handleDelete}
+        >
+          <span class="profile-edit-dialog__delete-icon" aria-hidden="true">${_profileIcons.trashIcon}</span>
+        </button>
+      </div>
+    </div>
+  `;
+}
+function renderContactInfoEmailSection(emails, onAddRow) {
+  const createNewRow = event => {
+    event.preventDefault();
+    emails.unshift({
+      value: '',
+      type: '',
+      entryNode: '',
+      status: 'new'
+    });
+    onAddRow({
+      focusSelector: '[name="email-value-0"]'
+    });
+  };
+  const visibleEmails = emails.map((email, index) => ({
+    email,
+    index
+  })).filter(({
+    email
+  }) => email.status !== 'deleted');
+  return (0, _litHtml.html)`
+    <section 
+      aria-labelledby="email-addresses-heading" 
+      class="profile-edit-dialog__section">
+      <header class="profile__section-header">
+        <h3 id="email-addresses-heading" class="profile-edit-dialog__section-heading">
+          <span class="sectionTitleIcon" aria-hidden="true">${_contactIcons.emailIcon}</span>
+          Email Addresses
+        </h3>
+        <button
+          type="button"
+          class="profile__action-button profile-action-text flex-center"
+          aria-label="Add another email address"
+          @click=${createNewRow}
+        >
+          <span class="profile__add-more-content inline-flex-row">
+            <span class="profile__add-more-icon inline-flex-row" aria-hidden="true">${_profileIcons.addIcon}</span>
+            Add More
+          </span>
+        </button>
+      </header>
+      <fieldset>
+        <legend class="sr-only">Email address entries</legend>
+        ${visibleEmails.map(({
+    index
+  }, displayIndex) => renderContactEmailInputRow({
+    emails,
+    index,
+    displayIndex,
+    onDelete: () => {
+      (0, _rowState.deleteRow)(emails, index);
+      onAddRow();
+    }
+  }))}
+      </fieldset>
+    </section>
+  `;
+}
+function renderContactAddressInputRow({
+  addresses,
+  index,
+  displayIndex,
+  onDelete
+}) {
+  const addressRow = addresses[index];
+  const label = `Address ${displayIndex + 1}`;
+  const typeLabel = `Address Type ${displayIndex + 1}`;
+  const streetAddressName = `address-street-${index}`;
+  const localityName = `address-locality-${index}`;
+  const regionName = `address-region-${index}`;
+  const postalCodeName = `address-postal-${index}`;
+  const countryName = `address-country-${index}`;
+  const typeInputName = `address-type-${index}`;
+  const addressTypeSelectId = `address-type-select-${index}`;
+  const handleAddressInput = field => e => {
+    const target = e.target;
+    const nextValue = (0, _sanitizeUtils.sanitizeAddressFieldValue)(target.value);
+    if (addresses[index]) {
+      (0, _rowState.applyRowFieldChange)(addresses[index], field, nextValue, rowHasContent);
+    }
+  };
+  const handleTypeInput = e => {
+    const target = e.target;
+    const nextType = target.value;
+    if (addresses[index]) {
+      (0, _rowState.applyRowSelectChange)(addresses[index], 'type', nextType);
+    }
+  };
+  const handleDelete = event => {
+    event.preventDefault();
+    onDelete();
+  };
+  return (0, _litHtml.html)`
+    <div class="profile-edit-dialog__row profile-edit-dialog__row--address-header profile-edit-dialog__row--full">
+      <p class="profile-edit-dialog__address-title">${label}</p>
+      <label aria-label=${typeLabel} class="label profile-edit-dialog__field-type profile-edit-dialog__field-type--wide hidden">
+        Address Type
+        <select name=${typeInputName} id=${addressTypeSelectId} @change=${handleTypeInput} .value=${addressRow?.type || ''}>
+          <option value="Home">Home</option>
+          <option value="Work">Work</option>
+        </select>
+      </label>
+      <div class="profile-edit-dialog__actions profile-edit-dialog__actions--edge">
+        <button
+          type="button"
+          class="profile-edit-dialog__delete-button"
+          aria-label=${`Delete address ${displayIndex + 1}`}
+          title=${_texts.deleteEntryButtonTitleText}
+          @click=${handleDelete}
+        >
+          <span class="profile-edit-dialog__delete-icon" aria-hidden="true">${_profileIcons.trashIcon}</span>
+        </button>
+      </div>
+    </div>
+    <div class="profile-edit-dialog__row profile-edit-dialog__row--full">
+      <label aria-label=${`${label} Street`} class="label profile-edit-dialog__field profile-edit-dialog__field--full">
+        Street Address
+        <input
+          class="input"
+          type="text"
+          name=${streetAddressName}
+          .value=${addressRow?.streetAddress || ''}
+          required
+          data-contact-field="streetAddress"
+          data-entry-node=${addressRow?.entryNode || ''}
+          data-row-status=${addressRow?.status || 'n/a'}
+          placeholder="Street Address"
+          autocomplete="street-address"
+          inputmode="text"
+          @change=${handleAddressInput('streetAddress')}
+        />
+      </label>
+    </div>
+    <div class="profile-edit-dialog__row profile-edit-dialog__row--full profile-edit-dialog__row--equal">
+      <label aria-label=${`${label} Locality`} class="label profile-edit-dialog__field">
+        Locality
+        <input
+          class="input"
+          type="text"
+          name=${localityName}
+          .value=${addressRow?.locality || ''}
+          data-contact-field="locality"
+          data-entry-node=${addressRow?.entryNode || ''}
+          data-row-status=${addressRow?.status || 'n/a'}
+          placeholder="City / Locality"
+          autocomplete="address-level2"
+          inputmode="text"
+          @change=${handleAddressInput('locality')}
+        />
+      </label>
+      <label aria-label=${`${label} Postal Code`} class="label profile-edit-dialog__field">
+        Postal Code
+        <input
+          class="input"
+          type="text"
+          name=${postalCodeName}
+          .value=${addressRow?.postalCode || ''}
+          data-contact-field="postalCode"
+          data-entry-node=${addressRow?.entryNode || ''}
+          data-row-status=${addressRow?.status || 'n/a'}
+          placeholder="Postal Code"
+          autocomplete="postal-code"
+          inputmode="text"
+          @change=${handleAddressInput('postalCode')}
+        />
+      </label>
+    </div>
+
+    <div class="profile-edit-dialog__row profile-edit-dialog__row--full profile-edit-dialog__row--equal">
+      <label aria-label=${`${label} Region`} class="label profile-edit-dialog__field">
+        Region
+        <input
+          class="input"
+          type="text"
+          name=${regionName}
+          .value=${addressRow?.region || ''}
+          data-contact-field="region"
+          data-entry-node=${addressRow?.entryNode || ''}
+          data-row-status=${addressRow?.status || 'n/a'}
+          placeholder="State / Region"
+          autocomplete="address-level1"
+          inputmode="text"
+          @change=${handleAddressInput('region')}
+        />
+      </label>
+      <label aria-label=${`${label} Country`} class="label profile-edit-dialog__field">
+        Country
+        <input
+          class="input"
+          type="text"
+          name=${countryName}
+          .value=${addressRow?.countryName || ''}
+          data-contact-field="countryName"
+          data-entry-node=${addressRow?.entryNode || ''}
+          data-row-status=${addressRow?.status || 'n/a'}
+          placeholder="Country"
+          autocomplete="country-name"
+          inputmode="text"
+          @change=${handleAddressInput('countryName')}
+        />
+      </label>
+    </div>
+  `;
+}
+function renderContactInfoAddressSection(addresses, onAddRow) {
+  const createNewRow = event => {
+    event.preventDefault();
+    addresses.unshift({
+      streetAddress: '',
+      locality: '',
+      region: '',
+      postalCode: '',
+      countryName: '',
+      type: '',
+      entryNode: '',
+      status: 'new'
+    });
+    onAddRow({
+      focusSelector: '[name="address-street-0"]'
+    });
+  };
+  const visibleAddresses = addresses.map((address, index) => ({
+    address,
+    index
+  })).filter(({
+    address
+  }) => address.status !== 'deleted');
+  return (0, _litHtml.html)`
+    <section 
+      aria-labelledby="address-heading" 
+      class="profile-edit-dialog__section">
+      <header class="profile__section-header">
+        <h3 id="address-heading" class="profile-edit-dialog__section-heading">
+          <span class="sectionTitleIcon" aria-hidden="true">${_profileIcons.locationIcon}</span>
+          Addresses
+        </h3>
+        <button
+          type="button"
+          class="profile__action-button profile-action-text flex-center"
+          aria-label="Add another address"
+          @click=${createNewRow}
+        >
+          <span class="profile__add-more-content inline-flex-row">
+            <span class="profile__add-more-icon inline-flex-row" aria-hidden="true">${_profileIcons.addIcon}</span>
+            Add More
+          </span>
+        </button>
+      </header>
+      <fieldset>
+        <legend class="sr-only">Address entries</legend>
+        ${visibleAddresses.map(({
+    index
+  }, displayIndex) => renderContactAddressInputRow({
+    addresses,
+    index,
+    displayIndex,
+    onDelete: () => {
+      (0, _rowState.deleteRow)(addresses, index);
+      onAddRow();
+    }
+  }))}
+      </fieldset>
+    </section>
+  `;
+}
+function focusContactInfoField(form, selector) {
+  const nextField = form.querySelector(selector);
+  if (!nextField || typeof nextField.focus !== 'function') return;
+  nextField.scrollIntoView({
+    block: 'nearest',
+    behavior: 'auto'
+  });
+  nextField.focus();
+  if (nextField instanceof HTMLInputElement || nextField instanceof HTMLTextAreaElement) {
+    nextField.select();
+  }
+}
+function renderContactInfoEditTemplate(form, formState, viewerMode, options = {}) {
+  const rerender = (nextOptions = {}) => renderContactInfoEditTemplate(form, formState, viewerMode, nextOptions);
+  (0, _litHtml.render)((0, _litHtml.html)`
+    ${renderContactInfoPhoneSection(formState.phones, rerender)}
+    ${renderContactInfoEmailSection(formState.emails, rerender)}
+    ${renderContactInfoAddressSection(formState.addresses, rerender)}
+    ${viewerMode !== 'owner' ? (0, _litHtml.html)`<p class="profile-edit-dialog__login-message">${_texts.ownerLoginRequiredDialogMessageText}</p>` : null}
+  `, form);
+  if (options.focusSelector) {
+    focusContactInfoField(form, options.focusSelector);
+  }
+}
+function createContactInfoEditForm(contactInfo, viewerMode) {
+  const form = document.createElement('form');
+  form.classList.add('profile__edit-form');
+  form.classList.add('profile__edit-form--contact-info');
+  const formState = toFormState(contactInfo);
+  renderContactInfoEditTemplate(form, formState, viewerMode);
+  return {
+    form,
+    formState
+  };
+}
+function validateContactInfoBeforeSave(formState) {
+  const phoneOps = (0, _rowState.summarizeRowOps)(formState.phones, rowHasContent);
+  const emailOps = (0, _rowState.summarizeRowOps)(formState.emails, rowHasContent);
+  const addressOps = (0, _rowState.summarizeRowOps)(formState.addresses, rowHasContent);
+  const hasChanges = phoneOps.create.length > 0 || phoneOps.update.length > 0 || phoneOps.remove.length > 0 || emailOps.create.length > 0 || emailOps.update.length > 0 || emailOps.remove.length > 0 || addressOps.create.length > 0 || addressOps.update.length > 0 || addressOps.remove.length > 0;
+  if (!hasChanges) return 'No contact info changes detected.';
+  return null;
+}
+async function createContactInfoEditDialog(event, store, subject, contactInfo, viewerMode, onSaved) {
+  const dom = event.currentTarget?.ownerDocument || document;
+  const {
+    form,
+    formState
+  } = createContactInfoEditForm(contactInfo, viewerMode);
+  const result = await (0, _dialog.openInputDialog)({
+    title: _texts.editContactInfoDialogTitleText,
+    dom,
+    form,
+    headerAction: {
+      type: 'close'
+    },
+    submitLabel: _texts.dialogSubmitLabelText,
+    cancelLabel: _texts.dialogCancelLabelText,
+    validate: () => {
+      if (viewerMode !== 'owner') {
+        return _texts.ownerLoginRequiredDialogMessageText;
+      }
+      return validateContactInfoBeforeSave(formState);
+    },
+    onSave: async () => {
+      const plan = {
+        phoneOps: (0, _rowState.summarizeRowOps)(formState.phones, rowHasContent),
+        emailOps: (0, _rowState.summarizeRowOps)(formState.emails, rowHasContent),
+        addressOps: (0, _rowState.summarizeRowOps)(formState.addresses, rowHasContent)
+      };
+      await (0, _mutations.processContactInfoMutations)(store, subject, plan);
+    },
+    formatSaveError: error => {
+      const message = error instanceof Error ? error.message : String(error);
+      return `${_texts.saveContactUpdatesFailedPrefixText} ${message}`;
+    }
+  });
+  if (!result) return;
+  if (onSaved) {
+    await onSaved();
+  }
+}

package/lib/sections/contactInfo/ContactInfoSection.d.ts

@@ -0,0 +1,5 @@
+import { ViewerMode } from '../../types';
+import { LiveStore, NamedNode } from 'rdflib';
+import { ContactInfo } from './types';
+export declare function renderContactInfoSection(store: LiveStore, subject: NamedNode, contactInfo: ContactInfo, viewerMode: ViewerMode, onSaved?: () => Promise<void> | void): import("lit-html").TemplateResult<1> | "";
+//# sourceMappingURL=ContactInfoSection.d.ts.map

package/lib/sections/contactInfo/ContactInfoSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContactInfoSection.d.ts","sourceRoot":"","sources":["../../../src/sections/contactInfo/ContactInfoSection.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAExC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAI7C,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAgRrC,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,6CAoBrC"}