profile-pane 3.1.5 → 3.2.0

package/lib/sections/heading/HeadingEditDialog.js

@@ -0,0 +1,742 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createHeadingEditDialog = createHeadingEditDialog;
+var _dialog = require("../../ui/dialog");
+var _litHtml = require("lit-html");
+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 _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. */
+
+function isContactPointRow(row) {
+  return 'value' in row;
+}
+function isAddressRow(row) {
+  return 'streetAddress' in row;
+}
+function isProfileBasicRow(row) {
+  return 'name' in row;
+}
+function rowHasContent(row) {
+  if (isContactPointRow(row)) {
+    return (0, _textUtils.hasNonEmptyText)(row.value);
+  }
+  if (isAddressRow(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 false;
+}
+function normalizePronounsValue(value) {
+  const normalized = (0, _textUtils.sanitizeTextValue)(value || '').toLowerCase().replace(/\s+/g, '');
+  if (!normalized) return '';
+  if (normalized === 'he' || normalized === 'he/him') return 'He/Him';
+  if (normalized === 'she' || normalized === 'she/her') return 'She/Her';
+  if (normalized === 'they' || normalized === 'they/them') return 'They/Them';
+  return value || '';
+}
+function toFormState(profileData) {
+  const basicInfo = {
+    name: (0, _textUtils.sanitizeTextValue)((0, _textUtils.toText)(profileData.name)),
+    nickname: (0, _textUtils.sanitizeTextValue)((0, _textUtils.toText)(profileData.nickname || '')),
+    imageSrc: (0, _textUtils.sanitizeTextValue)((0, _textUtils.toText)(profileData.imageSrc || '')),
+    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 normalizedEmailType = (0, _contactTypeUtils.normalizeEmailTypeForEdit)(primaryEmail?.type);
+  const normalizedPhoneType = (0, _contactTypeUtils.normalizePhoneTypeForEdit)(primaryPhone?.type);
+  const email = {
+    value: (0, _sanitizeUtils.sanitizeEmailValue)((0, _textUtils.toText)(primaryEmail?.valueNode).replace(/^mailto:/i, '')),
+    type: normalizedEmailType,
+    entryNode: (0, _textUtils.toText)(primaryEmail?.entryNode),
+    status: (0, _textUtils.toText)(primaryEmail?.entryNode) ? 'existing' : 'new'
+  };
+  const phone = {
+    value: (0, _textUtils.sanitizeTextValue)((0, _textUtils.toText)(primaryPhone?.valueNode || primaryPhone?.entryNode || '').replace(/^tel:/i, '')),
+    type: normalizedPhoneType,
+    entryNode: (0, _textUtils.toText)(primaryPhone?.entryNode || ''),
+    status: (0, _textUtils.toText)(primaryPhone?.entryNode || '') ? 'existing' : 'new'
+  };
+  const address = {
+    streetAddress: (0, _sanitizeUtils.sanitizeAddressFieldValue)((0, _textUtils.toText)(primaryAddress?.streetAddress)),
+    locality: (0, _sanitizeUtils.sanitizeAddressFieldValue)((0, _textUtils.toText)(primaryAddress?.locality)),
+    region: (0, _sanitizeUtils.sanitizeAddressFieldValue)((0, _textUtils.toText)(primaryAddress?.region)),
+    postalCode: (0, _sanitizeUtils.sanitizeAddressFieldValue)((0, _textUtils.toText)(primaryAddress?.postalCode)),
+    countryName: (0, _sanitizeUtils.sanitizeAddressFieldValue)((0, _textUtils.toText)(primaryAddress?.countryName)),
+    type: (0, _textUtils.toTypeLabel)(primaryAddress?.type),
+    entryNode: (0, _textUtils.toText)(primaryAddress?.entryNode),
+    status: (0, _textUtils.toText)(primaryAddress?.entryNode) ? 'existing' : 'new'
+  };
+  return {
+    basicInfo: basicInfo ? basicInfo : {
+      name: '',
+      nickname: '',
+      imageSrc: '',
+      location: '',
+      pronouns: '',
+      dateOfBirth: '',
+      jobTitle: '',
+      orgName: '',
+      entryNode: '',
+      status: 'new'
+    },
+    email: email ? email : {
+      value: '',
+      type: '',
+      entryNode: '',
+      status: 'new'
+    },
+    phone: phone ? phone : {
+      value: '',
+      type: '',
+      entryNode: '',
+      status: 'new'
+    },
+    address: address ? address : {
+      streetAddress: '',
+      locality: '',
+      region: '',
+      postalCode: '',
+      countryName: '',
+      type: '',
+      entryNode: '',
+      status: 'new'
+    }
+  };
+}
+function mapEmailOpsForSave(ops) {
+  const mapRow = row => ({
+    ...row,
+    type: (0, _contactTypeUtils.toSavedHeadingEmailType)(row.type)
+  });
+  return {
+    create: ops.create.map(mapRow),
+    update: ops.update.map(mapRow),
+    remove: ops.remove.map(mapRow)
+  };
+}
+function mapPhoneOpsForSave(ops) {
+  const mapRow = row => ({
+    ...row,
+    type: (0, _contactTypeUtils.toSavedHeadingPhoneType)(row.type)
+  });
+  return {
+    create: ops.create.map(mapRow),
+    update: ops.update.map(mapRow),
+    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 renderContactPhoneInput({
+  phone
+}) {
+  const label = 'Phone Number';
+  /* const countryCodeLabel = 'Country Calling Code' */
+  /* const prefixInputName = 'phone-prefix' */
+  const typeLabel = 'Phone Type';
+  const inputName = 'phone-value';
+  const typeInputName = 'phone-type';
+  const splitValue = (0, _phoneCountries.splitPhoneValue)(phone?.value || '');
+  let selectedDialCode = splitValue.dialCode;
+  const handleValueInput = e => {
+    const target = e.target;
+    const nextValue = (0, _sanitizeUtils.sanitizePhoneLocalValue)(target.value);
+    if (phone) {
+      (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;
+    if (phone) {
+      (0, _rowState.applyRowSelectChange)(phone, 'type', nextType);
+    }
+  };
+  return (0, _litHtml.html)`
+    <div class="profile-edit-dialog__row profile-edit-dialog__row--equal 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=${phone?.entryNode || ''}
+            data-row-status=${phone?.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__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>
+      </label>
+    </div>
+  `;
+}
+function renderContactEmailInputRow({
+  email
+}) {
+  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);
+    if (email) {
+      (0, _rowState.applyRowFieldChange)(email, 'value', nextValue, rowHasContent);
+    }
+  };
+  const handleTypeInput = e => {
+    const target = e.target;
+    const nextType = target.value;
+    if (email) {
+      (0, _rowState.applyRowSelectChange)(email, 'type', nextType);
+    }
+  };
+  return (0, _litHtml.html)`
+    <div class="profile-edit-dialog__row profile-edit-dialog__row--equal profile-edit-dialog__row--contact-point">
+      <label aria-label=${label} class="label profile-edit-dialog__field">
+        <input
+          class="input"
+          type="email"
+          name=${inputName}
+          .value=${email?.value || ''}
+          required
+          data-contact-field="value"
+          data-entry-node=${email?.entryNode || ''}
+          data-row-status=${email?.status || 'n/a'}
+          placeholder="Email Address"
+          autocomplete="email"
+          inputmode="email"
+          @input=${handleValueInput}
+        />
+      </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>
+      </label>
+    </div>
+  `;
+}
+function renderContactAddressInput({
+  address
+}) {
+  const label = 'Address';
+  /* const typeLabel = 'Address Type' */
+  /* const typeInputName = 'address-type' */
+  /* const addressTypeSelectId = 'address-type-select' */
+  const streetAddressName = 'address-street';
+  const localityName = 'address-locality';
+  const regionName = 'address-region';
+  const postalCodeName = 'address-postal';
+  const countryName = 'address-country';
+  const handleAddressInput = field => e => {
+    const target = e.target;
+    const nextValue = (0, _sanitizeUtils.sanitizeAddressFieldValue)(target.value);
+    if (address) {
+      (0, _rowState.applyRowFieldChange)(address, field, nextValue, rowHasContent);
+    }
+  };
+
+  /* const handleTypeInput = (e: Event) => {
+    const target = e.target as HTMLInputElement
+    const nextType = target.value
+    if (address) {
+      applyRowSelectChange(address, 'type', nextType)
+    } 
+  } */
+
+  return (0, _litHtml.html)`
+    <label aria-label=${`${label} Street`} class="label profile-edit-dialog__field profile-edit-dialog__field--row-width">
+      Street Address
+      <input
+        class="input"
+        type="text"
+        name=${streetAddressName}
+        .value=${address?.streetAddress || ''}
+        required
+        data-contact-field="streetAddress"
+        data-entry-node=${address?.entryNode || ''}
+        data-row-status=${address?.status || 'n/a'}
+        placeholder="Street Address"
+        autocomplete="street-address"
+        inputmode="text"
+        @change=${handleAddressInput('streetAddress')}
+      />
+    </label>
+
+    <div class="profile-edit-dialog__row profile-edit-dialog__row--equal profile-edit-dialog__row--full">
+      <label aria-label=${`${label} Locality`} class="label profile-edit-dialog__field">
+        Locality
+        <input
+          class="input"
+          type="text"
+          name=${localityName}
+          .value=${address?.locality || ''}
+          data-contact-field="locality"
+          data-entry-node=${address?.entryNode || ''}
+          data-row-status=${address?.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=${address?.postalCode || ''}
+          data-contact-field="postalCode"
+          data-entry-node=${address?.entryNode || ''}
+          data-row-status=${address?.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--equal profile-edit-dialog__row--full">
+      <label aria-label=${`${label} Region`} class="label profile-edit-dialog__field">
+        Region
+        <input
+          class="input"
+          type="text"
+          name=${regionName}
+          .value=${address?.region || ''}
+          data-contact-field="region"
+          data-entry-node=${address?.entryNode || ''}
+          data-row-status=${address?.status || 'n/a'}
+          placeholder="State / Region"
+          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=${address?.countryName || ''}
+          data-contact-field="countryName"
+          data-entry-node=${address?.entryNode || ''}
+          data-row-status=${address?.status || 'n/a'}
+          placeholder="Country"
+          autocomplete="country-name"
+          inputmode="text"
+          @change=${handleAddressInput('countryName')}
+        />
+      </label>
+    </div>
+  `;
+}
+function renderHeadingInfoInput(store, subject, basicInfo, phone, email, rerender) {
+  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);
+    if (basicInfo) {
+      (0, _rowState.applyRowFieldChange)(basicInfo, field, nextValue, rowHasContent);
+    }
+  };
+  const handleDateOfBirthInput = e => {
+    const target = e.target;
+    const nextValue = (0, _sanitizeUtils.sanitizeBasicInputFieldValue)(target.value);
+    if (basicInfo) {
+      (0, _rowState.applyRowFieldChange)(basicInfo, 'dateOfBirth', (0, _dateHelpers.toStorageDateISO)(nextValue), rowHasContent);
+    }
+  };
+  const handlePronounsInput = e => {
+    const target = e.target;
+    const nextType = target.value;
+    if (basicInfo) {
+      (0, _rowState.applyRowSelectChange)(basicInfo, 'pronouns', nextType);
+    }
+  };
+  const handleUpload = async e => {
+    const button = e.currentTarget;
+    const dom = button?.ownerDocument || document;
+    const fileInput = dom.createElement('input');
+    fileInput.type = 'file';
+    fileInput.accept = 'image/*';
+    fileInput.addEventListener('change', async () => {
+      const file = fileInput.files?.[0];
+      if (!file || !basicInfo) return;
+      try {
+        const uploadedUri = await (0, _imageHelpers.uploadPhotoFile)(store, subject, file);
+        (0, _rowState.applyRowFieldChange)(basicInfo, 'imageSrc', uploadedUri, rowHasContent);
+        rerender();
+      } catch (error) {
+        console.error('Profile image upload failed', error);
+      }
+    });
+    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');
+    if (!frame || frame.dataset.active === 'true') return;
+    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 => {
+      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);
+    } catch (error) {
+      frame.hidden = true;
+      frame.dataset.active = 'false';
+      frame.replaceChildren();
+      console.error('Camera control failed to initialize', error);
+    }
+  };
+  const handleDelete = async _e => {
+    if (!basicInfo) return;
+    (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">
+        <div class="profile-edit-dialog__image-frame">
+          ${(0, _HeadingSection.Image)(basicInfo.imageSrc, basicInfo.name)}
+          <button
+            type="button"
+            class="profile-edit-dialog__image-camera-button flex-center"
+            aria-label="Take a photo"
+            title="Take a photo"
+            @click=${handleCameraClick}
+          >
+            ${_profileIcons.cameraIcon}
+          </button>
+        </div>
+      </header>
+
+      <div class="profile-edit-dialog__image-preview" aria-label="Profile Photo Preview">
+        <p class="profile-edit-dialog__image-preview-label"><strong>${imageSrcLabel}</strong></p>
+        <p class="profile-edit-dialog__image-preview-description">${recommendedImageToLoad}</p>
+
+        <div class="profile-edit-dialog__image-preview-actions">
+          <button
+            type="button"
+            class="profile-edit-dialog__image-button profile-edit-dialog__image-upload-button flex-center"
+            aria-label="Upload new profile photo"
+            title="Upload New"
+            @click=${handleUpload}
+          >
+            Upload New
+          </button>
+          <button
+            type="button"
+            class="profile-edit-dialog__image-button profile-edit-dialog__image-remove-button flex-center"
+            aria-label="Delete profile photo"
+            title="Remove"
+            @click=${handleDelete}
+          >
+            Remove
+          </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-dialog__row profile-edit-dialog__row--equal">
+        <label aria-label=${nameLabel} class="label profile-edit-dialog__field">
+          ${nameLabel}
+          <input
+            class="input"
+            type="text"
+            name="name"
+            .value=${basicInfo?.name || ''}
+            required
+            data-contact-field="name"
+            data-entry-node=${basicInfo?.entryNode || ''}
+            data-row-status=${basicInfo?.status || 'n/a'}
+            placeholder="Full Name"
+            autocomplete="name"
+            inputmode="text"
+            @change=${handleBasicInfoInput('name')}
+          />
+        </label>
+        <label aria-label=${nicknameLabel} class="label profile-edit-dialog__field">
+          ${nicknameLabel}
+          <input
+            class="input"
+            type="text"
+            name="nickname"
+            .value=${basicInfo?.nickname || ''}
+            data-contact-field="nickname"
+            data-entry-node=${basicInfo?.entryNode || ''}
+            data-row-status=${basicInfo?.status || 'n/a'}
+            placeholder="Nickname"
+            autocomplete="nickname"
+            inputmode="text"
+            @change=${handleBasicInfoInput('nickname')}
+          />
+        </label>
+      </div>
+      <div class="profile-edit-dialog__row profile-edit-dialog__row--equal">
+        <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>
+        </label>
+        <label aria-label=${dateOfBirthLabel} class="label profile-edit-dialog__field">
+          ${dateOfBirthLabel}
+          <input
+            class="input"
+            type="date"
+            name="profile-date-of-birth"
+            .value=${(0, _dateHelpers.toStorageDateISO)(basicInfo?.dateOfBirth)}
+            data-contact-field="dateOfBirth"
+            data-entry-node=${basicInfo?.entryNode || ''}
+            data-row-status=${basicInfo?.status || 'n/a'}
+            autocomplete="off"
+            data-lpignore="true"
+            data-1p-ignore="true"
+            data-bwignore="true"
+            @change=${handleDateOfBirthInput}
+          />
+        </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({
+    phone
+  })}
+        </div>
+        <div class="profile-edit-dialog__field profile-edit-dialog__field--full">
+          ${renderContactEmailInputRow({
+    email
+  })}
+        </div>
+      </div>
+    </div>
+  `;
+}
+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)}
+    ${renderContactAddressInput({
+    address: formState.address
+  })}
+    ${viewerMode !== 'owner' ? (0, _litHtml.html)`<p class="profile-edit-dialog__login-message">${_texts.ownerLoginRequiredDialogMessageText}</p>` : null}
+  `, form);
+}
+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.autocomplete = 'off';
+  form.setAttribute('data-lpignore', 'true');
+  form.setAttribute('data-1p-ignore', 'true');
+  form.setAttribute('data-bwignore', 'true');
+  const formState = toFormState(profileData);
+  renderHeadingEditTemplate(form, formState, store, subject, viewerMode);
+  return {
+    form,
+    formState
+  };
+}
+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.';
+  return null;
+}
+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);
+  const result = await (0, _dialog.openInputDialog)({
+    title: _texts.editHeadingDialogTitleText,
+    dom,
+    form,
+    headerAction: {
+      type: 'close'
+    },
+    submitLabel: _texts.dialogSubmitLabelText,
+    cancelLabel: _texts.dialogCancelLabelText,
+    validate: () => {
+      if (viewerMode !== 'owner') {
+        return _texts.ownerLoginRequiredDialogMessageText;
+      }
+      return validateHeadingDataBeforeSave(formState);
+    },
+    onSave: async () => {
+      const phoneOps = (0, _rowState.summarizeRowOps)([formState.phone], rowHasContent);
+      const emailOps = (0, _rowState.summarizeRowOps)([formState.email], rowHasContent);
+      const plan = {
+        basicOps: (0, _rowState.summarizeRowOps)([formState.basicInfo], rowHasContent),
+        phoneOps: mapPhoneOpsForSave(phoneOps),
+        emailOps: mapEmailOpsForSave(emailOps),
+        addressOps: (0, _rowState.summarizeRowOps)([formState.address], rowHasContent)
+      };
+      await (0, _mutations.processHeadingMutations)(store, subject, plan);
+      const nextPhotoUri = (0, _textUtils.sanitizeTextValue)(formState.basicInfo.imageSrc || '');
+      if (originalPhotoUri && originalPhotoUri !== nextPhotoUri) {
+        try {
+          await (0, _imageHelpers.deletePhotoFile)(store, subject, originalPhotoUri);
+        } catch (error) {
+          console.warn('Profile image file delete failed', error);
+        }
+      }
+    },
+    formatSaveError: error => {
+      const message = error instanceof Error ? error.message : String(error);
+      return `${_texts.saveHeadingUpdatesFailedPrefixText} ${message}`;
+    }
+  });
+  if (!result) return;
+  if (onSaved) {
+    await onSaved();
+  }
+}