profile-pane 3.2.0 → 3.2.2-test.0

package/lib/sections/heading/HeadingEditDialog.js

@@ -6,25 +6,54 @@ Object.defineProperty(exports, "__esModule", {
 exports.createHeadingEditDialog = createHeadingEditDialog;
 var _dialog = require("../../ui/dialog");
 var _litHtml = require("lit-html");
+require("solid-ui/components/actions/button");
+require("solid-ui/components/forms/select");
+require("solid-ui/components/media/photo-capture");
 var _HeadingSection = require("./HeadingSection");
 require("../../styles/EditDialogs.css");
-var _rdflib = require("rdflib");
 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 _debug = require("../../utils/debug");
 var _profileIcons = require("../../icons-svg/profileIcons");
 var _sanitizeUtils = require("../shared/sanitizeUtils");
 var _dateHelpers = require("./dateHelpers");
 var _imageHelpers = require("./imageHelpers");
-var _camera = require("./camera");
 /* Note: new design - has address type in More Edit Contacts for now we will leave
          out Address Type, but a ticket will be created to add type later
          so I will keep the code and just comment it out for now. 
          new design - has country code, will comment out code for now and create a ticket to add later. */
 
+const HEADING_PHONE_TYPE_OPTIONS = [{
+  label: 'Mobile',
+  value: 'Mobile'
+}, {
+  label: 'Home',
+  value: 'Home'
+}, {
+  label: 'Work',
+  value: 'Work'
+}];
+const HEADING_EMAIL_TYPE_OPTIONS = [{
+  label: 'Personal',
+  value: 'Personal'
+}, {
+  label: 'Office',
+  value: 'Office'
+}];
+const HEADING_PRONOUN_OPTIONS = [{
+  label: 'He/Him',
+  value: 'He/Him'
+}, {
+  label: 'She/Her',
+  value: 'She/Her'
+}, {
+  label: 'They/Them',
+  value: 'They/Them'
+}];
 function isContactPointRow(row) {
   return 'value' in row;
 }
@@ -34,6 +63,47 @@ function isAddressRow(row) {
 function isProfileBasicRow(row) {
   return 'name' in row;
 }
+function normalizeHeadingContactTypeValue(value, options) {
+  return options.some(option => option.value === value) ? value : options[0]?.value || '';
+}
+function readHeadingContactTypeChange(event) {
+  const customEvent = event;
+  if (typeof customEvent.detail?.value === 'string') {
+    return customEvent.detail.value;
+  }
+  const target = event.target;
+  return typeof target?.value === 'string' ? target.value : '';
+}
+function getHeadingContactTypeOptions(kind) {
+  return kind === 'phone' ? HEADING_PHONE_TYPE_OPTIONS : HEADING_EMAIL_TYPE_OPTIONS;
+}
+function getHeadingContactTypeValue(kind, formState) {
+  const row = kind === 'phone' ? formState.phone : formState.email;
+  return normalizeHeadingContactTypeValue(row?.type || '', getHeadingContactTypeOptions(kind));
+}
+function withDefaultHeadingContactType(row, kind) {
+  return {
+    ...row,
+    type: normalizeHeadingContactTypeValue(row.type || '', getHeadingContactTypeOptions(kind))
+  };
+}
+function initializeHeadingContactTypeSelects(form, formState) {
+  const selectElements = form.querySelectorAll('solid-ui-select[data-heading-contact-type-kind]');
+  selectElements.forEach(selectElement => {
+    const kind = selectElement.dataset.headingContactTypeKind;
+    if (!kind) return;
+    selectElement.options = getHeadingContactTypeOptions(kind);
+    selectElement.value = getHeadingContactTypeValue(kind, formState);
+    selectElement.label = '';
+  });
+}
+function initializeHeadingPronounsSelect(form, formState) {
+  const selectElement = form.querySelector('solid-ui-select[data-heading-basic-field="pronouns"]');
+  if (!selectElement) return;
+  selectElement.options = HEADING_PRONOUN_OPTIONS;
+  selectElement.value = normalizePronounsValue(formState.basicInfo?.pronouns || '');
+  selectElement.label = '';
+}
 function rowHasContent(row) {
   if (isContactPointRow(row)) {
     return (0, _textUtils.hasNonEmptyText)(row.value);
@@ -42,7 +112,7 @@ function rowHasContent(row) {
     return [row.streetAddress, row.locality, row.region, row.postalCode, row.countryName].some(_textUtils.hasNonEmptyText);
   }
   if (isProfileBasicRow(row)) {
-    return [row.name, row.nickname, row.imageSrc, row.location, row.pronouns, row.dateOfBirth, row.jobTitle, row.orgName].some(_textUtils.hasNonEmptyText);
+    return [row.name, row.nickname, row.imageSrc, row.location, row.pronouns, row.dateOfBirth].some(_textUtils.hasNonEmptyText);
   }
   return false;
 }
@@ -62,14 +132,14 @@ function toFormState(profileData) {
     location: (0, _textUtils.sanitizeTextValue)((0, _textUtils.toText)(profileData.location || '')),
     pronouns: normalizePronounsValue((0, _textUtils.toText)(profileData.pronouns || '')),
     dateOfBirth: (0, _textUtils.sanitizeTextValue)((0, _textUtils.toText)(profileData.dateOfBirth || '')),
-    jobTitle: (0, _textUtils.sanitizeTextValue)((0, _textUtils.toText)(profileData.jobTitle || '')),
-    orgName: (0, _textUtils.sanitizeTextValue)((0, _textUtils.toText)(profileData.orgName || '')),
     entryNode: (0, _textUtils.toText)(profileData.entryNode),
     status: (0, _textUtils.toText)(profileData.entryNode) ? 'existing' : 'new'
   };
   const primaryEmail = profileData.primaryEmail;
   const primaryPhone = profileData.primaryPhone;
   const primaryAddress = profileData.primaryAddress;
+  const emailTypeWasMissing = !(0, _contactTypeUtils.normalizeEmailTypeForEdit)(primaryEmail?.type);
+  const phoneTypeWasMissing = !(0, _contactTypeUtils.normalizePhoneTypeForEdit)(primaryPhone?.type);
   const normalizedEmailType = (0, _contactTypeUtils.normalizeEmailTypeForEdit)(primaryEmail?.type);
   const normalizedPhoneType = (0, _contactTypeUtils.normalizePhoneTypeForEdit)(primaryPhone?.type);
   const email = {
@@ -102,8 +172,6 @@ function toFormState(profileData) {
       location: '',
       pronouns: '',
       dateOfBirth: '',
-      jobTitle: '',
-      orgName: '',
       entryNode: '',
       status: 'new'
     },
@@ -128,13 +196,51 @@ function toFormState(profileData) {
       type: '',
       entryNode: '',
       status: 'new'
-    }
+    },
+    emailTypeWasMissing,
+    phoneTypeWasMissing,
+    imagePreviewSrc: '',
+    clearImagePreview: () => undefined
+  };
+}
+function setHeadingImagePreview(formState, file) {
+  formState.clearImagePreview();
+  if (typeof URL.createObjectURL !== 'function') {
+    formState.imagePreviewSrc = '';
+    formState.clearImagePreview = () => undefined;
+    return;
+  }
+  const previewUrl = URL.createObjectURL(file);
+  formState.imagePreviewSrc = previewUrl;
+  formState.clearImagePreview = () => {
+    URL.revokeObjectURL(previewUrl);
+    formState.imagePreviewSrc = '';
+    formState.clearImagePreview = () => undefined;
+  };
+}
+function setResolvedHeadingPreview(formState, resolvedImageSrc) {
+  formState.clearImagePreview();
+  if (!resolvedImageSrc) {
+    return;
+  }
+  formState.imagePreviewSrc = resolvedImageSrc;
+  if (resolvedImageSrc.startsWith('blob:') && typeof URL.revokeObjectURL === 'function') {
+    formState.clearImagePreview = () => {
+      URL.revokeObjectURL(resolvedImageSrc);
+      formState.imagePreviewSrc = '';
+      formState.clearImagePreview = () => undefined;
+    };
+    return;
+  }
+  formState.clearImagePreview = () => {
+    formState.imagePreviewSrc = '';
+    formState.clearImagePreview = () => undefined;
   };
 }
 function mapEmailOpsForSave(ops) {
   const mapRow = row => ({
-    ...row,
-    type: (0, _contactTypeUtils.toSavedHeadingEmailType)(row.type)
+    ...withDefaultHeadingContactType(row, 'email'),
+    type: (0, _contactTypeUtils.toSavedHeadingEmailType)(withDefaultHeadingContactType(row, 'email').type)
   });
   return {
     create: ops.create.map(mapRow),
@@ -144,8 +250,8 @@ function mapEmailOpsForSave(ops) {
 }
 function mapPhoneOpsForSave(ops) {
   const mapRow = row => ({
-    ...row,
-    type: (0, _contactTypeUtils.toSavedHeadingPhoneType)(row.type)
+    ...withDefaultHeadingContactType(row, 'phone'),
+    type: (0, _contactTypeUtils.toSavedHeadingPhoneType)(withDefaultHeadingContactType(row, 'phone').type)
   });
   return {
     create: ops.create.map(mapRow),
@@ -153,35 +259,26 @@ function mapPhoneOpsForSave(ops) {
     remove: ops.remove.map(mapRow)
   };
 }
-
-/* Will use later 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 summarizeHeadingContactOps(row, kind, typeWasMissing) {
+  const ops = (0, _rowState.summarizeRowOps)([row], rowHasContent);
+  if (typeWasMissing && row.entryNode && row.status === 'existing' && rowHasContent(row) && ops.create.length === 0 && ops.update.length === 0 && ops.remove.length === 0) {
+    return {
+      create: ops.create,
+      update: [withDefaultHeadingContactType({
+        ...row,
+        status: 'modified'
+      }, kind)],
+      remove: ops.remove
+    };
+  }
+  return ops;
+}
 function renderContactPhoneInput({
   phone
 }) {
-  const label = 'Phone Number';
-  /* const countryCodeLabel = 'Country Calling Code' */
-  /* const prefixInputName = 'phone-prefix' */
-  const typeLabel = 'Phone Type';
+  const label = 'Phone Number 1';
+  const typeLabel = 'Phone Type 1';
   const inputName = 'phone-value';
-  const typeInputName = 'phone-type';
   const splitValue = (0, _phoneCountries.splitPhoneValue)(phone?.value || '');
   let selectedDialCode = splitValue.dialCode;
   const handleValueInput = e => {
@@ -191,19 +288,8 @@ function renderContactPhoneInput({
       (0, _rowState.applyRowFieldChange)(phone, 'value', (0, _phoneCountries.combinePhoneValue)(selectedDialCode, nextValue), rowHasContent);
     }
   };
-  /* Leaving here for when we add country code back in
-   const handleCountryCodeInput = (e: Event) => {
-     const target = e.target as HTMLSelectElement
-     selectedDialCode = target.value
-      if (phone) {
-       const localNumber = splitPhoneValue(phone.value).localNumber
-       applyRowFieldChange(phone, 'value', combinePhoneValue(selectedDialCode, localNumber), rowHasContent)
-     }
-   } */
-
   const handleTypeInput = e => {
-    const target = e.target;
-    const nextType = target.value;
+    const nextType = readHeadingContactTypeChange(e);
     if (phone) {
       (0, _rowState.applyRowSelectChange)(phone, 'type', nextType);
     }
@@ -221,7 +307,7 @@ function renderContactPhoneInput({
             data-contact-field="value"
             data-entry-node=${phone?.entryNode || ''}
             data-row-status=${phone?.status || 'n/a'}
-            placeholder="Phone Number"
+            placeholder=${label}
             autocomplete="tel-national"
             inputmode="tel"
             @input=${handleValueInput}
@@ -229,11 +315,16 @@ function renderContactPhoneInput({
         </label>
       </div>
       <label aria-label=${typeLabel} class="label profile-edit-dialog__field-type profile-edit-dialog__field-type--contact-point">
-        <select class="input" name=${typeInputName} id="phone-type-select-${inputName}" @change=${handleTypeInput} .value=${phone?.type || ''}>
-          <option value="Mobile">Mobile</option>
-          <option value="Home">Home</option>
-          <option value="Work">Work</option>
-        </select>
+        <solid-ui-select
+          class="profile-edit-dialog__type-select"
+          id=${`phone-type-select-${inputName}`}
+          data-heading-contact-type-kind="phone"
+          aria-label=${typeLabel}
+          .label=${''}
+          .options=${HEADING_PHONE_TYPE_OPTIONS}
+          .value=${normalizeHeadingContactTypeValue(phone?.type || '', HEADING_PHONE_TYPE_OPTIONS)}
+          @change=${handleTypeInput}
+        ></solid-ui-select>
       </label>
     </div>
   `;
@@ -244,7 +335,6 @@ function renderContactEmailInputRow({
   const label = 'Email Address';
   const typeLabel = 'Email Type';
   const inputName = 'email-value';
-  const typeInputName = 'email-type';
   const handleValueInput = e => {
     const target = e.target;
     const nextValue = (0, _sanitizeUtils.sanitizeEmailValue)(target.value);
@@ -253,8 +343,7 @@ function renderContactEmailInputRow({
     }
   };
   const handleTypeInput = e => {
-    const target = e.target;
-    const nextType = target.value;
+    const nextType = readHeadingContactTypeChange(e);
     if (email) {
       (0, _rowState.applyRowSelectChange)(email, 'type', nextType);
     }
@@ -278,10 +367,16 @@ function renderContactEmailInputRow({
         />
       </label>
       <label aria-label=${typeLabel} class="label profile-edit-dialog__field-type profile-edit-dialog__field-type--contact-point">
-        <select class="input" name=${typeInputName} id="email-type-select-${inputName}" @change=${handleTypeInput} .value=${email?.type || ''}>
-          <option value="Personal">Personal</option>
-          <option value="Office">Office</option>
-        </select>
+        <solid-ui-select
+          class="profile-edit-dialog__type-select"
+          id=${`email-type-select-${inputName}`}
+          data-heading-contact-type-kind="email"
+          aria-label=${typeLabel}
+          .label=${''}
+          .options=${HEADING_EMAIL_TYPE_OPTIONS}
+          .value=${normalizeHeadingContactTypeValue(email?.type || '', HEADING_EMAIL_TYPE_OPTIONS)}
+          @change=${handleTypeInput}
+        ></solid-ui-select>
       </label>
     </div>
   `;
@@ -403,15 +498,19 @@ function renderContactAddressInput({
     </div>
   `;
 }
-function renderHeadingInfoInput(store, subject, basicInfo, phone, email, rerender) {
+function renderHeadingInfoInput(store, subject, formState, rerender) {
+  const {
+    basicInfo,
+    phone,
+    email,
+    imagePreviewSrc
+  } = formState;
   const imageSrcLabel = 'Profile Photo';
   const recommendedImageToLoad = 'Recommended: Square JPG, PNG. Max 2MB.';
   const nameLabel = 'Full Name';
   const nicknameLabel = 'Nickname';
   const pronounsLabel = 'Pronouns';
   const dateOfBirthLabel = 'DOB';
-  const jobTitleLabel = 'Job Title';
-  const orgNameLabel = 'Organization Name';
   const handleBasicInfoInput = field => e => {
     const target = e.target;
     const nextValue = (0, _sanitizeUtils.sanitizeBasicInputFieldValue)(target.value);
@@ -427,10 +526,9 @@ function renderHeadingInfoInput(store, subject, basicInfo, phone, email, rerende
     }
   };
   const handlePronounsInput = e => {
-    const target = e.target;
-    const nextType = target.value;
+    const nextValue = normalizePronounsValue(readHeadingContactTypeChange(e));
     if (basicInfo) {
-      (0, _rowState.applyRowSelectChange)(basicInfo, 'pronouns', nextType);
+      (0, _rowState.applyRowSelectChange)(basicInfo, 'pronouns', nextValue);
     }
   };
   const handleUpload = async e => {
@@ -439,27 +537,31 @@ function renderHeadingInfoInput(store, subject, basicInfo, phone, email, rerende
     const fileInput = dom.createElement('input');
     fileInput.type = 'file';
     fileInput.accept = 'image/*';
+    fileInput.hidden = true;
+    const cleanupFileInput = () => {
+      fileInput.remove();
+    };
     fileInput.addEventListener('change', async () => {
       const file = fileInput.files?.[0];
+      cleanupFileInput();
       if (!file || !basicInfo) return;
       try {
         const uploadedUri = await (0, _imageHelpers.uploadPhotoFile)(store, subject, file);
+        setHeadingImagePreview(formState, file);
         (0, _rowState.applyRowFieldChange)(basicInfo, 'imageSrc', uploadedUri, rowHasContent);
         rerender();
       } catch (error) {
-        console.error('Profile image upload failed', error);
+        (0, _debug.error)('Profile image upload failed', error);
       }
+    }, {
+      once: true
     });
+    dom.body.appendChild(fileInput);
     fileInput.click();
   };
-
-  /* The handleCameraClick function was generated by AI Model: GPT-5.3-Codex */
-  /* Prompt: Write a function handleCameraClick that uses the cameraCaptureControl to
-      capture an image and update the profile photo in the heading section. */
   const handleCameraClick = async e => {
     e.preventDefault();
     const button = e.currentTarget;
-    const dom = button?.ownerDocument || document;
     const headingPhotoRow = button?.closest('.profile-edit-dialog__row--heading-photo');
     const hostRow = headingPhotoRow?.nextElementSibling;
     const frame = hostRow?.querySelector('.profile-edit-dialog__image-camera-capture-frame');
@@ -467,51 +569,72 @@ function renderHeadingInfoInput(store, subject, basicInfo, phone, email, rerende
     frame.hidden = false;
     frame.dataset.active = 'true';
     frame.replaceChildren();
-    const getImageDoc = () => {
-      const docUri = subject.doc().uri;
-      const lastSlash = docUri.lastIndexOf('/');
-      const directoryUri = lastSlash >= 0 ? docUri.slice(0, lastSlash + 1) : docUri;
-      const randomSuffix = typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function' ? crypto.randomUUID() : `${Date.now()}_${Math.floor(Math.random() * 1e9)}`;
-      return (0, _rdflib.sym)(`${directoryUri}camera_${randomSuffix}.png`);
-    };
-    const onCameraDone = async imageDoc => {
+    const closeCameraFrame = () => {
       frame.replaceChildren();
       frame.hidden = true;
       frame.dataset.active = 'false';
-      if (imageDoc?.uri && basicInfo) {
-        (0, _rowState.applyRowFieldChange)(basicInfo, 'imageSrc', imageDoc.uri, rowHasContent);
-        rerender();
-      }
     };
     try {
-      const control = (0, _camera.cameraCaptureControl)(dom, store, getImageDoc, onCameraDone);
-      frame.appendChild(control);
+      const photoCapture = document.createElement('solid-ui-photo-capture');
+      photoCapture.classList.add('profile-edit-dialog__photo-capture');
+      photoCapture.heading = '';
+      photoCapture.captureLabel = 'Take Photo';
+      photoCapture.confirmLabel = 'Use Photo';
+      photoCapture.retakeLabel = 'Retake';
+      photoCapture.cancelLabel = 'Close camera';
+      photoCapture.presentation = 'inline';
+      photoCapture.showTrigger = false;
+      photoCapture.showCancelButton = true;
+      photoCapture.autoCloseOnCapture = false;
+      photoCapture.fileNamePrefix = 'camera';
+      photoCapture.facingMode = 'user';
+      photoCapture.open = true;
+      photoCapture.addEventListener('cancel', event => {
+        event.preventDefault();
+        event.stopPropagation();
+        closeCameraFrame();
+      });
+      photoCapture.addEventListener('photo-captured', async event => {
+        const detail = event.detail;
+        if (!detail?.file || !basicInfo) return;
+        try {
+          const uploadedUri = await (0, _imageHelpers.uploadPhotoFile)(store, subject, detail.file);
+          closeCameraFrame();
+          setHeadingImagePreview(formState, detail.file);
+          (0, _rowState.applyRowFieldChange)(basicInfo, 'imageSrc', uploadedUri, rowHasContent);
+          rerender();
+        } catch (error) {
+          (0, _debug.error)('Profile camera upload failed', error);
+        }
+      });
+      frame.appendChild(photoCapture);
     } catch (error) {
-      frame.hidden = true;
-      frame.dataset.active = 'false';
-      frame.replaceChildren();
-      console.error('Camera control failed to initialize', error);
+      closeCameraFrame();
+      (0, _debug.error)('Camera control failed to initialize', error);
     }
   };
   const handleDelete = async _e => {
     if (!basicInfo) return;
+    formState.clearImagePreview();
     (0, _rowState.applyRowFieldChange)(basicInfo, 'imageSrc', '', rowHasContent);
     rerender();
   };
   return (0, _litHtml.html)`
     <div class="profile-edit-dialog__row profile-edit-dialog__row--heading-photo">
-      <header class="mb-md" aria-label="Profile Image">
+      <header class="profile-edit-dialog__image-preview-header" aria-label="Profile Image">
         <div class="profile-edit-dialog__image-frame">
-          ${(0, _HeadingSection.Image)(basicInfo.imageSrc, basicInfo.name)}
-          <button
+          ${(0, _HeadingSection.Image)(imagePreviewSrc || basicInfo.imageSrc, basicInfo.name)}
+          <solid-ui-button
             type="button"
-            class="profile-edit-dialog__image-camera-button flex-center"
+            class="profile-edit-dialog__image-camera-button"
+            variant="icon"
+            size="md"
             aria-label="Take a photo"
             title="Take a photo"
             @click=${handleCameraClick}
           >
-            ${_profileIcons.cameraIcon}
-          </button>
+            <span slot="icon" aria-hidden="true">${_profileIcons.cameraIcon}</span>
+          </solid-ui-button>
         </div>
       </header>
 
@@ -520,31 +643,37 @@ function renderHeadingInfoInput(store, subject, basicInfo, phone, email, rerende
         <p class="profile-edit-dialog__image-preview-description">${recommendedImageToLoad}</p>
 
         <div class="profile-edit-dialog__image-preview-actions">
-          <button
+          <solid-ui-button
             type="button"
-            class="profile-edit-dialog__image-button profile-edit-dialog__image-upload-button flex-center"
+            variant="secondary"
+            size="md"
+            label="Upload New"
+            class="profile-edit-dialog__image-button profile-edit-dialog__image-upload-button"
             aria-label="Upload new profile photo"
             title="Upload New"
             @click=${handleUpload}
           >
             Upload New
-          </button>
-          <button
+          </solid-ui-button>
+          <solid-ui-button
             type="button"
-            class="profile-edit-dialog__image-button profile-edit-dialog__image-remove-button flex-center"
+            variant="secondary"
+            size="md"
+            label="Remove"
+            class="profile-edit-dialog__image-button profile-edit-dialog__image-remove-button"
             aria-label="Delete profile photo"
             title="Remove"
             @click=${handleDelete}
           >
             Remove
-          </button>
+          </solid-ui-button>
         </div>
       </div>
     </div>
     <div class="profile-edit-dialog__image-camera-capture-row">
       <div class="profile-edit-dialog__image-camera-capture-frame" hidden></div>
     </div>
-    <div class="profile-edit flex-column gap-lg">
+    <div class="profile-edit">
       <div class="profile-edit-dialog__row profile-edit-dialog__row--equal">
         <label aria-label=${nameLabel} class="label profile-edit-dialog__field">
           ${nameLabel}
@@ -580,19 +709,25 @@ function renderHeadingInfoInput(store, subject, basicInfo, phone, email, rerende
           />
         </label>
       </div>
-      <div class="profile-edit-dialog__row profile-edit-dialog__row--equal">
+      <div class="profile-edit-dialog__row profile-edit-dialog__row--equal profile-edit-dialog__row--heading-dob">
         <label aria-label=${pronounsLabel} class="label profile-edit-dialog__field-type profile-edit-dialog__field--stack">
           ${pronounsLabel}
-          <select class="input" name="pronouns" @change=${handlePronounsInput} .value=${basicInfo?.pronouns || ''}>
-            <option value="He/Him">He/Him</option>
-            <option value="She/Her">She/Her</option>
-            <option value="They/Them">They/Them</option>
-          </select>
+          <solid-ui-select
+            class="profile-edit-dialog__type-select"
+            id="heading-pronouns-select"
+            name="pronouns"
+            data-heading-basic-field="pronouns"
+            aria-label=${pronounsLabel}
+            .label=${''}
+            .options=${HEADING_PRONOUN_OPTIONS}
+            .value=${normalizePronounsValue(basicInfo?.pronouns || '')}
+            @change=${handlePronounsInput}
+          ></solid-ui-select>
         </label>
-        <label aria-label=${dateOfBirthLabel} class="label profile-edit-dialog__field">
+        <label aria-label=${dateOfBirthLabel} class="label profile-edit-dialog__field profile-edit-dialog__field--dob">
           ${dateOfBirthLabel}
           <input
-            class="input"
+            class="input profile-edit-dialog__input--dob"
             type="date"
             name="profile-date-of-birth"
             .value=${(0, _dateHelpers.toStorageDateISO)(basicInfo?.dateOfBirth)}
@@ -607,40 +742,6 @@ function renderHeadingInfoInput(store, subject, basicInfo, phone, email, rerende
           />
         </label>
       </div>
-      <div class="profile-edit-dialog__row profile-edit-dialog__row--equal">
-        <label aria-label=${jobTitleLabel} class="label profile-edit-dialog__field">
-          ${jobTitleLabel}
-          <input
-            class="input"
-            type="text"
-            name="jobTitle"
-            .value=${basicInfo?.jobTitle || ''}
-            data-contact-field="jobTitle"
-            data-entry-node=${basicInfo?.entryNode || ''}
-            data-row-status=${basicInfo?.status || 'n/a'}
-            placeholder="Job Title"
-            autocomplete="organization-title"
-            inputmode="text"
-            @change=${handleBasicInfoInput('jobTitle')}
-          />
-        </label>
-        <label aria-label=${orgNameLabel} class="label profile-edit-dialog__field">
-          ${orgNameLabel}
-          <input
-            class="input"
-            type="text"
-            name="orgName"
-            .value=${basicInfo?.orgName || ''}
-            data-contact-field="orgName"
-            data-entry-node=${basicInfo?.entryNode || ''}
-            data-row-status=${basicInfo?.status || 'n/a'}
-            placeholder="Organization Name"
-            autocomplete="organization-name"
-            inputmode="text"
-            @change=${handleBasicInfoInput('orgName')}
-          />
-        </label>
-      </div>
       <div class="profile-edit-dialog__row profile-edit-dialog__row--equal">
         <div class="profile-edit-dialog__field profile-edit-dialog__field--full">
           ${renderContactPhoneInput({
@@ -659,16 +760,18 @@ function renderHeadingInfoInput(store, subject, basicInfo, phone, email, rerende
 function renderHeadingEditTemplate(form, formState, store, subject, viewerMode) {
   const rerender = () => renderHeadingEditTemplate(form, formState, store, subject, viewerMode);
   (0, _litHtml.render)((0, _litHtml.html)`
-    ${renderHeadingInfoInput(store, subject, formState.basicInfo, formState.phone, formState.email, rerender)}
+    ${renderHeadingInfoInput(store, subject, formState, rerender)}
     ${renderContactAddressInput({
     address: formState.address
   })}
     ${viewerMode !== 'owner' ? (0, _litHtml.html)`<p class="profile-edit-dialog__login-message">${_texts.ownerLoginRequiredDialogMessageText}</p>` : null}
   `, form);
+  initializeHeadingContactTypeSelects(form, formState);
+  initializeHeadingPronounsSelect(form, formState);
 }
 function createHeadingEditForm(store, subject, profileData, viewerMode) {
   const form = document.createElement('form');
-  form.classList.add('profile__edit-form', 'profile-edit-dialog--heading', 'flex-column', 'gap-sm');
+  form.classList.add('profile__edit-form', 'profile__edit-form--heading', 'profile-edit-dialog--heading');
   form.autocomplete = 'off';
   form.setAttribute('data-lpignore', 'true');
   form.setAttribute('data-1p-ignore', 'true');
@@ -680,31 +783,54 @@ function createHeadingEditForm(store, subject, profileData, viewerMode) {
     formState
   };
 }
+function isValidHeadingEmailAddress(value) {
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
+}
+function isValidHeadingPhoneNumber(value) {
+  return /^\d+$/.test(value);
+}
 function validateHeadingDataBeforeSave(formState) {
-  const basicInfoOps = (0, _rowState.summarizeRowOps)([formState.basicInfo], rowHasContent);
-  const phoneOps = (0, _rowState.summarizeRowOps)([formState.phone], rowHasContent);
-  const emailOps = (0, _rowState.summarizeRowOps)([formState.email], rowHasContent);
-  const addressOps = (0, _rowState.summarizeRowOps)([formState.address], rowHasContent);
-  const hasChanges = basicInfoOps.create.length > 0 || basicInfoOps.update.length > 0 || basicInfoOps.remove.length > 0 || 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 intro changes detected.';
+  const {
+    localNumber
+  } = (0, _phoneCountries.splitPhoneValue)(formState.phone?.value || '');
+  if (rowHasContent(formState.phone) && !isValidHeadingPhoneNumber(localNumber)) {
+    return 'Phone Number 1 should contain only numbers.';
+  }
+  if (rowHasContent(formState.email) && !isValidHeadingEmailAddress(formState.email?.value || '')) {
+    return 'Email address must be a valid email address.';
+  }
   return null;
 }
-async function createHeadingEditDialog(event, store, subject, profileData, viewerMode, onSaved) {
+async function createHeadingEditDialog(_event, store, subject, profileData, viewerMode, onSaved) {
   const dom = document;
   const originalPhotoUri = (0, _textUtils.sanitizeTextValue)((0, _textUtils.toText)(profileData.imageSrc || ''));
   const {
     form,
     formState
   } = createHeadingEditForm(store, subject, profileData, viewerMode);
+  if (formState.basicInfo.imageSrc) {
+    const resolvedImageSrc = await (0, _imageHelpers.resolvePhotoDisplaySrc)(store, formState.basicInfo.imageSrc);
+    if (resolvedImageSrc && resolvedImageSrc !== formState.basicInfo.imageSrc) {
+      setResolvedHeadingPreview(formState, resolvedImageSrc);
+      renderHeadingEditTemplate(form, formState, store, subject, viewerMode);
+    }
+  }
   const result = await (0, _dialog.openInputDialog)({
     title: _texts.editHeadingDialogTitleText,
     dom,
     form,
     headerAction: {
-      type: 'close'
+      type: 'none'
     },
     submitLabel: _texts.dialogSubmitLabelText,
     cancelLabel: _texts.dialogCancelLabelText,
+    shouldCloseWithoutSave: () => {
+      const basicInfoOps = (0, _rowState.summarizeRowOps)([formState.basicInfo], rowHasContent);
+      const phoneOps = summarizeHeadingContactOps(formState.phone, 'phone', formState.phoneTypeWasMissing);
+      const emailOps = summarizeHeadingContactOps(formState.email, 'email', formState.emailTypeWasMissing);
+      const addressOps = (0, _rowState.summarizeRowOps)([formState.address], rowHasContent);
+      return basicInfoOps.create.length === 0 && basicInfoOps.update.length === 0 && basicInfoOps.remove.length === 0 && 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;
+    },
     validate: () => {
       if (viewerMode !== 'owner') {
         return _texts.ownerLoginRequiredDialogMessageText;
@@ -712,8 +838,8 @@ async function createHeadingEditDialog(event, store, subject, profileData, viewe
       return validateHeadingDataBeforeSave(formState);
     },
     onSave: async () => {
-      const phoneOps = (0, _rowState.summarizeRowOps)([formState.phone], rowHasContent);
-      const emailOps = (0, _rowState.summarizeRowOps)([formState.email], rowHasContent);
+      const phoneOps = summarizeHeadingContactOps(formState.phone, 'phone', formState.phoneTypeWasMissing);
+      const emailOps = summarizeHeadingContactOps(formState.email, 'email', formState.emailTypeWasMissing);
       const plan = {
         basicOps: (0, _rowState.summarizeRowOps)([formState.basicInfo], rowHasContent),
         phoneOps: mapPhoneOpsForSave(phoneOps),
@@ -726,13 +852,12 @@ async function createHeadingEditDialog(event, store, subject, profileData, viewe
         try {
           await (0, _imageHelpers.deletePhotoFile)(store, subject, originalPhotoUri);
         } catch (error) {
-          console.warn('Profile image file delete failed', error);
+          (0, _debug.warn)('Profile image file delete failed', error);
         }
       }
     },
     formatSaveError: error => {
-      const message = error instanceof Error ? error.message : String(error);
-      return `${_texts.saveHeadingUpdatesFailedPrefixText} ${message}`;
+      return error instanceof Error ? error.message : _texts.saveHeadingUpdatesFailedMessageText;
     }
   });
   if (!result) return;