profile-pane 3.2.1 → 3.2.2-test.0

package/lib/sections/contactInfo/ContactInfoSection.js

@@ -5,10 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.renderContactInfoSection = renderContactInfoSection;
 var _litHtml = require("lit-html");
+require("solid-ui/components/actions/button");
 var _ContactInfoEditDialog = require("./ContactInfoEditDialog");
 var _solidUi = require("solid-ui");
+require("./ContactInfoSection.css");
 var _texts = require("../../texts");
 var _collapsibleSection = require("../shared/collapsibleSection");
+var _phoneCountries = require("../shared/phoneCountries");
 var _contactTypeUtils = require("../shared/contactTypeUtils");
 var _profileIcons = require("../../icons-svg/profileIcons");
 var _contactIcons = require("../../icons-svg/contactIcons");
@@ -23,7 +26,14 @@ function toText(value) {
 }
 function normalizeContactValue(rawValue, kind) {
   if (!rawValue) return '';
-  return kind === 'email' ? rawValue.replace(/^mailto:/i, '') : rawValue.replace(/^tel:/i, '');
+  if (kind === 'email') {
+    return rawValue.replace(/^mailto:/i, '');
+  }
+  const normalizedPhone = rawValue.replace(/^tel:/i, '');
+  const {
+    localNumber
+  } = (0, _phoneCountries.splitPhoneValue)(normalizedPhone);
+  return localNumber || normalizedPhone;
 }
 function resolveContactValue(store, point, kind) {
   if (!point) return '';
@@ -44,11 +54,11 @@ function renderPhone(phone, store) {
   if (!phone) return (0, _litHtml.html)``;
   const phoneValue = resolveContactValue(store, phone, 'phone');
   const phoneType = (0, _contactTypeUtils.normalizePhoneTypeForEdit)(phone.type);
-  return (0, _litHtml.html)`<li class="contact-info__item flex gap-2xs" role="listitem">
-        <div class="contact-info__icon-wrapper flex-center">
+  return (0, _litHtml.html)`<li class="contact-info__item" role="listitem">
+        <div class="contact-info__icon-wrapper">
           <span class="contact-info__icon" aria-hidden="true">${_contactIcons.phoneIcon}</span>
         </div>
-        <div class="flex-column">
+        <div class="contact-info__item-body">
           <span class="contact-info__contact-point-value">${phoneValue}</span>
           ${phoneType ? (0, _litHtml.html)`<span class="contact-info__contact-point-type"> ${phoneType}</span>` : (0, _litHtml.html)``}
         </div>
@@ -62,11 +72,11 @@ function renderEmail(email, store) {
   if (!email) return (0, _litHtml.html)``;
   const emailValue = resolveContactValue(store, email, 'email');
   const emailType = (0, _contactTypeUtils.normalizeEmailTypeForEdit)(email.type);
-  return (0, _litHtml.html)`<li class="contact-info__item flex gap-2xs" role="listitem">
-        <div class="contact-info__icon-wrapper flex-center">
+  return (0, _litHtml.html)`<li class="contact-info__item" role="listitem">
+        <div class="contact-info__icon-wrapper">
           <span class="contact-info__icon" aria-hidden="true">${_contactIcons.emailIcon}</span>
         </div>
-        <div class="flex-column">
+        <div class="contact-info__item-body">
           <span class="contact-info__contact-point-value">${emailValue}</span>
           ${emailType ? (0, _litHtml.html)`<span class="contact-info__contact-point-type">${emailType}</span>` : (0, _litHtml.html)``}
         </div>
@@ -86,8 +96,8 @@ function renderAddress(address) {
   const localityRegion = [locality, region].filter(Boolean).join(', ');
   const localityRegionPostal = [localityRegion, postalCode].filter(Boolean).join(' ');
   return (0, _litHtml.html)`
-        <li class="contact-info__item flex gap-2xs" role="listitem">
-          <div class="contact-info__icon-wrapper flex-center">
+        <li class="contact-info__item" role="listitem">
+          <div class="contact-info__icon-wrapper">
             <span class="contact-info__icon" aria-hidden="true">${_profileIcons.locationIcon}</span>
           </div>
           <span class="contact-info__address">
@@ -107,51 +117,60 @@ function renderContactInfoSectionDefault(store, subject, contactInfo, viewerMode
   return (0, _litHtml.html)`
     <section
       aria-labelledby="contact-details-heading"
-      class="profile__section border-lighter profile-section-collapsible profile-section-collapsible--inline-mobile-actions"
+      data-profile-section="contact-info"
+      class="profile__section profile-section-collapsible profile-section-collapsible--inline-mobile-actions"
       role="region"
       tabindex="-1"
       data-expanded="false"
     >
       <header class="profile__section-header profile-section-collapsible__header">
-        <h2 id="contact-details-heading" tabindex="-1">${_texts.contactInfoHeadingText}</h2>
-        <div class="profile-section-collapsible__actions flex-column">
+        <h3 id="contact-details-heading" tabindex="-1">${_texts.contactInfoHeadingText}</h3>
+        <div class="profile-section-collapsible__actions">
           ${isOwner ? (0, _litHtml.html)`
-            <button 
-              type="button" 
-              class="profile__action-button profile-action-text flex-center profile-section-collapsible__edit-button" 
+            <solid-ui-button
+              type="button"
+              variant="secondary"
+              size="sm"
+              class="profile__action-button profile-action-text profile-section-collapsible__edit-button"
               aria-label="Edit contact information"
               @click=${event => {
     return (0, _ContactInfoEditDialog.createContactInfoEditDialog)(event, store, subject, contactInfo, viewerMode, onSaved);
-  }}>
-              <span class="profile-section-collapsible__edit-label">${_profileIcons.editIcon} Edit</span>
+  }}
+            >
+              <span class="profile-section-collapsible__edit-label profile__add-more-content">
+                <span class="profile__add-more-icon" aria-hidden="true">${_profileIcons.addIcon}</span>
+                <span>Add More</span>
+              </span>
               <span class="profile-section-collapsible__edit-icon" aria-hidden="true">${_profileIcons.editIcon}</span>
-            </button>
+            </solid-ui-button>
           ` : (0, _litHtml.html)``}
-          <button
+          <solid-ui-button
             type="button"
-            class="inline-flex-row"
+            variant="icon"
+            size="sm"
+            class="profile-section-collapsible__toggle-button"
             aria-label="Toggle contact information section"
             aria-controls="contact-details-panel"
             aria-expanded="false"
             @click=${_collapsibleSection.toggleCollapsibleSection}
           >
-            <span class="profile-section-collapsible__chevron" aria-hidden="true">⌄</span>
-          </button>
+            <span slot="icon" class="profile-section-collapsible__chevron" aria-hidden="true">${_profileIcons.chevronDownIcon}</span>
+          </solid-ui-button>
         </div>
       </header>
-      <div id="contact-details-panel" class="profile-section-collapsible__content" aria-hidden="true">
+      <div id="contact-details-panel" class="profile-section-collapsible__content">
         ${contactInfo.phones.length > 0 ? (0, _litHtml.html)`
-              <ul class="contact-info__list flex-column" role="list" aria-label="Phone numbers">
+              <ul class="contact-info__list" role="list" aria-label="Phone numbers">
                 ${renderPhones(contactInfo.phones, store)}
               </ul>
             ` : (0, _litHtml.html)``}
         ${contactInfo.emails.length > 0 ? (0, _litHtml.html)`
-              <ul class="contact-info__list flex-column" role="list" aria-label="Email addresses">
+              <ul class="contact-info__list" role="list" aria-label="Email addresses">
                 ${renderEmails(contactInfo.emails, store)}
               </ul>
             ` : (0, _litHtml.html)``}
         ${contactInfo.addresses.length > 0 ? (0, _litHtml.html)`
-              <ul class="contact-info__list flex-column" role="list" aria-label="Postal addresses">
+              <ul class="contact-info__list" role="list" aria-label="Postal addresses">
                 ${renderAddresses(contactInfo.addresses)}
               </ul>
             ` : (0, _litHtml.html)``}
@@ -162,9 +181,9 @@ function renderContactInfoSectionDefault(store, subject, contactInfo, viewerMode
 }
 function renderOwnerEmptyContactInfoContent(_store, _subject, _contactInfo, _viewerMode, _onSaved) {
   return (0, _litHtml.html)`
-      <div class="profile__empty-state-content flex-column-center" role="group" aria-label="Empty contact information section">    
+      <div class="profile__empty-state-content" role="group" aria-label="Empty contact information section">    
         <div class="contact-info__empty-icon-wrapper">
-          <span class="contact-info__empty-icon inline-flex-row">${_profileIcons.envelopeIcon}</span>
+          <span class="contact-info__empty-icon">${_profileIcons.envelopeIcon}</span>
         </div>
         <p class="profile__empty-state-message contact-info__empty-message">
             No additional contact info added yet.
@@ -177,38 +196,42 @@ function renderOwnerEmptyContactInfoSection(store, subject, contactInfo, viewerM
     <section 
       aria-labelledby="contact-details-heading" 
       data-profile-section="contact-info"
-      class="profile__section--empty border-lighter rounded-md gap-lg profile-section-collapsible profile-section-collapsible--inline-mobile-actions" 
+      class="profile__section--empty profile__section--empty-sidebar profile-section-collapsible profile-section-collapsible--inline-mobile-actions" 
       role="region"
       tabindex="-1"
       data-expanded="false"
     >
       <header class="profile__section-header profile-section-collapsible__header">
-        <h2 id="contact-details-heading" tabindex="-1">${_texts.contactInfoEmptyHeadingText}</h2>
-        <div class="profile-section-collapsible__actions flex-column">
-          <button
+        <h3 id="contact-details-heading" tabindex="-1">${_texts.contactInfoEmptyHeadingText}</h3>
+        <div class="profile-section-collapsible__actions">
+          <solid-ui-button
             type="button"
-            class="profile__action-button profile-action-text flex-center profile-section-collapsible__edit-button"
+            variant="secondary"
+            size="sm"
+            class="profile__action-button profile-action-text profile-section-collapsible__edit-button"
             aria-label="Add contact information"
             @click=${event => {
     return (0, _ContactInfoEditDialog.createContactInfoEditDialog)(event, store, subject, contactInfo, viewerMode, onSaved);
   }}
           >
-            <span class="profile-section-collapsible__edit-label">${_profileIcons.addIcon} Add Contact</span>
-            <span class="profile-section-collapsible__edit-icon profile-section-collapsible__edit-icon--add" aria-hidden="true">${_profileIcons.plusIcon}</span>
-          </button>
-          <button
+            <span class="profile-section-collapsible__edit-label">${_profileIcons.addIcon} Add More</span>
+            <span class="profile-section-collapsible__edit-icon" aria-hidden="true">${_profileIcons.editIcon}</span>
+          </solid-ui-button>
+          <solid-ui-button
             type="button"
-            class="inline-flex-row"
+            variant="icon"
+            size="sm"
+            class="profile-section-collapsible__toggle-button"
             aria-label="Toggle contact information section"
             aria-controls="contact-details-panel"
             aria-expanded="false"
             @click=${_collapsibleSection.toggleCollapsibleSection}
           >
-            <span class="profile-section-collapsible__chevron" aria-hidden="true">⌄</span>
-          </button>
+            <span slot="icon" class="profile-section-collapsible__chevron" aria-hidden="true">${_profileIcons.chevronDownIcon}</span>
+          </solid-ui-button>
         </div>
       </header>
-      <div id="contact-details-panel" class="profile-section-collapsible__content" aria-hidden="true">
+      <div id="contact-details-panel" class="profile-section-collapsible__content">
         ${renderOwnerEmptyContactInfoContent(store, subject, contactInfo, viewerMode, onSaved)}
       </div>
     </section>

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

@@ -1 +1 @@
-{"version":3,"file":"mutations.d.ts","sourceRoot":"","sources":["../../../src/sections/contactInfo/mutations.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAiB,MAAM,QAAQ,CAAA;AAE5D,OAAO,EAAqB,mBAAmB,EAAmB,MAAM,SAAS,CAAA;AAqKjF,wBAAsB,2BAA2B,CAAC,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,mBAAmB,iBASxH"}
+{"version":3,"file":"mutations.d.ts","sourceRoot":"","sources":["../../../src/sections/contactInfo/mutations.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAA0B,MAAM,QAAQ,CAAA;AAErE,OAAO,EAAqB,mBAAmB,EAAmB,MAAM,SAAS,CAAA;AAiMjF,wBAAsB,2BAA2B,CAAC,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,mBAAmB,iBAWxH"}

package/lib/sections/contactInfo/mutations.js

@@ -9,6 +9,7 @@ var _solidUi = require("solid-ui");
 var _rdfMutationHelpers = require("../shared/rdfMutationHelpers");
 var _idNodeFactory = require("../shared/idNodeFactory");
 var _texts = require("../../texts");
+var _debug = require("../../utils/debug");
 function buildPhoneStatements(subject, doc, node, phone) {
   const normalizedValue = phone.value.startsWith('tel:') ? phone.value : `tel:${phone.value}`;
   const valueNode = (0, _rdflib.sym)(normalizedValue);
@@ -30,14 +31,14 @@ function buildEmailStatements(subject, doc, node, email) {
 function buildAddressStatements(subject, doc, node, address) {
   const inserts = [(0, _rdflib.st)(subject, _solidUi.ns.vcard('hasAddress'), node, doc)];
   if (address.type) inserts.push((0, _rdflib.st)(node, _solidUi.ns.rdf('type'), _solidUi.ns.vcard(address.type), doc));
-  if (address.streetAddress) inserts.push((0, _rdflib.st)(node, _solidUi.ns.vcard('street-address'), address.streetAddress, doc));
-  if (address.locality) inserts.push((0, _rdflib.st)(node, _solidUi.ns.vcard('locality'), address.locality, doc));
-  if (address.region) inserts.push((0, _rdflib.st)(node, _solidUi.ns.vcard('region'), address.region, doc));
-  if (address.postalCode) inserts.push((0, _rdflib.st)(node, _solidUi.ns.vcard('postal-code'), address.postalCode, doc));
-  if (address.countryName) inserts.push((0, _rdflib.st)(node, _solidUi.ns.vcard('country-name'), address.countryName, doc));
+  if (address.streetAddress) inserts.push((0, _rdflib.st)(node, _solidUi.ns.vcard('street-address'), (0, _rdflib.literal)(address.streetAddress), doc));
+  if (address.locality) inserts.push((0, _rdflib.st)(node, _solidUi.ns.vcard('locality'), (0, _rdflib.literal)(address.locality), doc));
+  if (address.region) inserts.push((0, _rdflib.st)(node, _solidUi.ns.vcard('region'), (0, _rdflib.literal)(address.region), doc));
+  if (address.postalCode) inserts.push((0, _rdflib.st)(node, _solidUi.ns.vcard('postal-code'), (0, _rdflib.literal)(address.postalCode), doc));
+  if (address.countryName) inserts.push((0, _rdflib.st)(node, _solidUi.ns.vcard('country-name'), (0, _rdflib.literal)(address.countryName), doc));
   return inserts;
 }
-async function mutatePhoneEntries(store, subject, phoneOps) {
+async function mutatePhoneEntries(store, subject, phoneOps, documentTextCache) {
   const doc = subject.doc();
   const existingPhoneNodes = store.each(subject, _solidUi.ns.vcard('hasTelephone'), null, doc);
   const deletions = [];
@@ -72,9 +73,19 @@ async function mutatePhoneEntries(store, subject, phoneOps) {
   phoneOps.create.forEach(phone => {
     insertions.push(...buildPhoneStatements(subject, doc, (0, _idNodeFactory.createIdNode)(doc), phone));
   });
-  await (0, _rdfMutationHelpers.applyUpdaterPatch)(store, deletions, insertions);
+  const shouldSerializeDocument = await (0, _rdfMutationHelpers.shouldForceDocumentPutForStatements)(store, doc, insertions, undefined, {
+    documentTextCache
+  });
+  await (0, _rdfMutationHelpers.runUpdateTransport)(store, doc, deletions, insertions, {
+    unsupportedMessage: _texts.updaterUnsupportedStoreErrorMessageText,
+    failureMessage: 'Failed to save contact info updates',
+    documentTextCache,
+    useDavFallback: false,
+    usePutFallback: shouldSerializeDocument,
+    forcePut: shouldSerializeDocument
+  });
 }
-async function mutateEmailEntries(store, subject, emailOps) {
+async function mutateEmailEntries(store, subject, emailOps, documentTextCache) {
   const doc = subject.doc();
   const existingEmailNodes = store.each(subject, _solidUi.ns.vcard('hasEmail'), null, doc);
   const deletions = [];
@@ -104,9 +115,19 @@ async function mutateEmailEntries(store, subject, emailOps) {
   emailOps.create.forEach(email => {
     insertions.push(...buildEmailStatements(subject, doc, (0, _idNodeFactory.createIdNode)(doc), email));
   });
-  await (0, _rdfMutationHelpers.applyUpdaterPatch)(store, deletions, insertions);
+  const shouldSerializeDocument = await (0, _rdfMutationHelpers.shouldForceDocumentPutForStatements)(store, doc, insertions, undefined, {
+    documentTextCache
+  });
+  await (0, _rdfMutationHelpers.runUpdateTransport)(store, doc, deletions, insertions, {
+    unsupportedMessage: _texts.updaterUnsupportedStoreErrorMessageText,
+    failureMessage: 'Failed to save contact info updates',
+    documentTextCache,
+    useDavFallback: false,
+    usePutFallback: shouldSerializeDocument,
+    forcePut: shouldSerializeDocument
+  });
 }
-async function mutateAddressEntries(store, subject, addressOps) {
+async function mutateAddressEntries(store, subject, addressOps, documentTextCache) {
   const doc = subject.doc();
   const existingAddressNodes = store.each(subject, _solidUi.ns.vcard('hasAddress'), null, doc);
   const deletions = [];
@@ -136,15 +157,29 @@ async function mutateAddressEntries(store, subject, addressOps) {
   addressOps.create.forEach(address => {
     insertions.push(...buildAddressStatements(subject, doc, (0, _idNodeFactory.createIdNode)(doc), address));
   });
-  await (0, _rdfMutationHelpers.applyUpdaterPatch)(store, deletions, insertions);
+  const shouldSerializeDocument = await (0, _rdfMutationHelpers.shouldForceDocumentPutForStatements)(store, doc, insertions, undefined, {
+    documentTextCache
+  });
+  await (0, _rdfMutationHelpers.runUpdateTransport)(store, doc, deletions, insertions, {
+    unsupportedMessage: _texts.updaterUnsupportedStoreErrorMessageText,
+    failureMessage: 'Failed to save contact info updates',
+    documentTextCache,
+    useDavFallback: false,
+    usePutFallback: shouldSerializeDocument,
+    forcePut: shouldSerializeDocument
+  });
 }
 async function processContactInfoMutations(store, subject, mutationPlan) {
   try {
-    await mutatePhoneEntries(store, subject, mutationPlan.phoneOps);
-    await mutateEmailEntries(store, subject, mutationPlan.emailOps);
-    await mutateAddressEntries(store, subject, mutationPlan.addressOps);
+    const documentTextCache = new Map();
+    await mutatePhoneEntries(store, subject, mutationPlan.phoneOps, documentTextCache);
+    await mutateEmailEntries(store, subject, mutationPlan.emailOps, documentTextCache);
+    await mutateAddressEntries(store, subject, mutationPlan.addressOps, documentTextCache);
   } catch (error) {
-    const message = error instanceof Error ? error.message : String(error);
-    throw new Error(`${_texts.mutationSaveContactInfoFailedPrefixText} ${message}`);
+    const rootError = error instanceof Error ? error : new Error(String(error));
+    (0, _debug.error)(_texts.contactInfoMutationSaveFailedDebugText, rootError);
+    throw new Error(_texts.saveContactUpdatesFailedMessageText, {
+      cause: rootError
+    });
   }
 }

package/lib/sections/education/EducationEditDialog.d.ts

@@ -1,6 +1,8 @@
+import 'solid-ui/components/actions/button';
+import 'solid-ui/components/forms/select';
 import { EducationDetails } from './types';
 import '../../styles/EditDialogs.css';
-import '../../styles/ContactInfoEditDialog.css';
+import '../contactInfo/ContactInfoEditDialog.css';
 import { LiveStore, NamedNode } from 'rdflib';
 import { ViewerMode } from '../../types';
 export declare function createEducationEditDialog(event: Event, store: LiveStore, subject: NamedNode, educationData: EducationDetails[], viewerMode: ViewerMode, onSaved?: () => Promise<void> | void): Promise<void>;

package/lib/sections/education/EducationEditDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EducationEditDialog.d.ts","sourceRoot":"","sources":["../../../src/sections/education/EducationEditDialog.ts"],"names":[],"mappings":"AAEA,OAAO,EAAgB,gBAAgB,EAAE,MAAM,SAAS,CAAA;AACxD,OAAO,8BAA8B,CAAA;AACrC,OAAO,wCAAwC,CAAA;AAC/C,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAE7C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AA4bxC,wBAAsB,yBAAyB,CAC7C,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,aAAa,EAAE,gBAAgB,EAAE,EACjC,UAAU,EAAE,UAAU,EACtB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,iBAwDrC"}
+{"version":3,"file":"EducationEditDialog.d.ts","sourceRoot":"","sources":["../../../src/sections/education/EducationEditDialog.ts"],"names":[],"mappings":"AAEA,OAAO,oCAAoC,CAAA;AAC3C,OAAO,kCAAkC,CAAA;AACzC,OAAO,EAAgB,gBAAgB,EAAE,MAAM,SAAS,CAAA;AACxD,OAAO,8BAA8B,CAAA;AACrC,OAAO,0CAA0C,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAE7C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAgiBxC,wBAAsB,yBAAyB,CAC7C,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,aAAa,EAAE,gBAAgB,EAAE,EACjC,UAAU,EAAE,UAAU,EACtB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,iBAqDrC"}