solid-panes 4.4.0 → 4.4.1-test.0

package/dist/social/editProfileDetails.js

@@ -7,8 +7,11 @@ exports.appendProfileLinks = appendProfileLinks;
 exports.createEditProfileDetailsButton = createEditProfileDetailsButton;
 exports.profileLinkFields = void 0;
 var _rdflib = require("rdflib");
+var _litHtml = require("lit-html");
 var _solidUi = require("solid-ui");
+require("solid-ui/components/button");
 var _icons = require("./icons");
+var _spinner = require("./spinner");
 /* The following code was generated by AI Model: GPT-5.4
    Prompt: can you create me a form to enter this data [
 ns.foaf('homepage'),
@@ -42,22 +45,25 @@ const profileLinkFields = exports.profileLinkFields = [{
   placeholder: 'https://school.example.edu',
   predicate: _solidUi.ns.foaf('schoolHomepage')
 }];
+function createEmptyProfileLinkValues() {
+  return {
+    homepage: [''],
+    weblog: [''],
+    workplaceHomepage: [''],
+    schoolHomepage: ['']
+  };
+}
 function readProfileLinkValues(store, subject) {
   const doc = subject.doc();
   return profileLinkFields.reduce((result, field) => {
     const values = store.statementsMatching(subject, field.predicate, undefined, doc).map(statement => statement.object?.value || '').filter(Boolean);
-    result[field.key] = values.join('\n');
+    result[field.key] = values.length ? values : [''];
     return result;
-  }, {
-    homepage: '',
-    weblog: '',
-    workplaceHomepage: '',
-    schoolHomepage: ''
-  });
+  }, createEmptyProfileLinkValues());
 }
-function normalizeUrlList(value, fieldLabel) {
+function normalizeUrlList(values, fieldLabel) {
   const unique = new Set();
-  const lines = value.split('\n').map(entry => entry.trim()).filter(Boolean);
+  const lines = values.map(entry => entry.trim()).filter(Boolean);
   for (const line of lines) {
     let parsed;
     try {
@@ -74,96 +80,76 @@ function normalizeUrlList(value, fieldLabel) {
 }
 async function saveProfileLinkValues(store, subject, values) {
   const updater = store.updater;
-  if (!updater || typeof updater.update !== 'function') {
+  const fetcher = store.fetcher;
+  if (!updater || typeof updater.serialize !== 'function' || !fetcher || typeof fetcher.webOperation !== 'function') {
     throw new Error('This profile cannot be edited with the current store.');
   }
   const doc = subject.doc();
-  const deletions = [];
   const insertions = [];
+  const existingStatements = [];
   for (const field of profileLinkFields) {
-    const existingStatements = store.statementsMatching(subject, field.predicate, undefined, doc);
-    deletions.push(...existingStatements);
+    existingStatements.push(...store.statementsMatching(subject, field.predicate, undefined, doc));
     const nextValues = normalizeUrlList(values[field.key], field.label);
     for (const nextValue of nextValues) {
       insertions.push((0, _rdflib.st)(subject, field.predicate, (0, _rdflib.sym)(nextValue), doc));
     }
   }
-  await new Promise((resolve, reject) => {
-    updater.update(deletions, insertions, (_uri, ok, errorBody) => {
-      if (!ok) {
-        reject(new Error(errorBody || 'Unable to save profile links.'));
-        return;
-      }
-      if (typeof store.remove === 'function' && deletions.length > 0) {
-        ;
-        store.remove(deletions);
-      }
-      insertions.forEach(statement => {
-        store.add(statement.subject, statement.predicate, statement.object, statement.why);
-      });
-      resolve();
+  const retainedStatements = store.statementsMatching(undefined, undefined, undefined, doc).filter(statement => {
+    return !profileLinkFields.some(field => {
+      return statement.subject.equals(subject) && statement.predicate.equals(field.predicate);
     });
   });
-}
-function appendProfileLinks(container, dom, store, subject) {
-  const webLinksSection = dom.createElement('section');
-  webLinksSection.className = 'social-profile-links';
-  container.appendChild(webLinksSection);
-  for (const field of profileLinkFields) {
-    const statements = store.statementsMatching(subject, field.predicate);
-    if (statements.length === 0) continue;
-    const uris = statements.map(statement => statement.object?.value || '').filter(Boolean).sort();
-    let previousUri = '';
-    for (const uri of uris) {
-      if (uri === previousUri) continue;
-      previousUri = uri;
-      let label = field.label;
-      if (uris.length > 1) {
-        const schemeIndex = uri.indexOf('//');
-        if (schemeIndex > 0) {
-          let end = uri.indexOf('/', schemeIndex + 2);
-          const dottedEnd = uri.lastIndexOf('.', end);
-          if (dottedEnd > 0) end = dottedEnd;
-          const hostLabel = uri.slice(schemeIndex + 2, end);
-          if (hostLabel) {
-            label = `${hostLabel} ${label}`;
-          }
-        }
-      }
-      const textNode = dom.createTextNode(label);
-      const anchor = dom.createElement('a');
-      anchor.appendChild(textNode);
-      anchor.setAttribute('href', uri);
-      const item = dom.createElement('div');
-      item.className = 'social-pane__link-button';
-      item.appendChild(anchor);
-      webLinksSection.appendChild(item);
-    }
+  const nextStatements = retainedStatements.concat(insertions);
+  const contentType = 'text/turtle';
+  const body = updater.serialize(doc.value, nextStatements, contentType);
+  const response = await fetcher.webOperation('PUT', doc.value, {
+    noMeta: true,
+    contentType,
+    body
+  });
+  if (!response || response.ok !== true) {
+    const status = response?.status || 'unknown';
+    throw new Error(`Unable to save profile links. Web error: ${status}`);
   }
+  existingStatements.forEach(statement => {
+    store.removeStatement(statement);
+  });
+  for (const statement of insertions) {
+    store.add(statement.subject, statement.predicate, statement.object, statement.why);
+  }
+}
+function appendProfileLinks(_container, _dom, _store, _subject) {
+  // Hidden for now because social-pane website links are not part of the new design.
+  // Revisit later if we decide to show profile links in this header again.
 }
 function createEditProfileDetailsButton(options) {
   const {
     dom,
     store,
     subject,
-    header,
     onSaved
   } = options;
-  const button = dom.createElement('button');
+  const button = dom.createElement('solid-ui-button');
   button.type = 'button';
-  button.className = 'social-pane__edit-button';
+  button.className = 'social-pane__edit-button profile__action-button profile__heading-action-button profile-action-text flex-center profile-section-collapsible__edit-button';
+  button.variant = 'secondary';
+  button.size = 'sm';
+  const label = dom.createElement('span');
+  label.className = 'profile-section-collapsible__edit-label social-pane__edit-button-label';
+  label.innerHTML = `${_icons.editIcon} Edit`;
+  button.appendChild(label);
   const icon = dom.createElement('span');
-  icon.className = 'social-pane__edit-button-icon';
+  icon.className = 'profile-section-collapsible__edit-icon social-pane__edit-button-icon';
+  icon.setAttribute('aria-hidden', 'true');
   icon.innerHTML = _icons.editIcon;
   button.appendChild(icon);
-  const label = dom.createElement('span');
-  label.className = 'social-pane__edit-button-label';
-  label.textContent = 'Edit';
-  button.appendChild(label);
   button.setAttribute('aria-label', 'Edit profile links');
-  header.style.position = 'relative';
   const openDialog = () => {
     const initialValues = readProfileLinkValues(store, subject);
+    const formState = profileLinkFields.reduce((result, field) => {
+      result[field.key] = [...initialValues[field.key]];
+      return result;
+    }, createEmptyProfileLinkValues());
     const overlay = dom.createElement('div');
     overlay.classList.add('social-pane__dialog-backdrop', 'flex-center');
     const dialog = dom.createElement('div');
@@ -179,88 +165,197 @@ function createEditProfileDetailsButton(options) {
     title.className = 'social-pane__dialog-title';
     title.textContent = 'Edit profile links';
     dialogHeader.appendChild(title);
-    const closeIconButton = dom.createElement('button');
-    closeIconButton.type = 'button';
-    closeIconButton.className = 'social-pane__dialog-close';
-    closeIconButton.setAttribute('aria-label', 'Close dialog');
-    closeIconButton.innerHTML = _icons.closeIcon;
-    dialogHeader.appendChild(closeIconButton);
     const form = dom.createElement('form');
     form.classList.add('social-pane__dialog-form', 'flex-column');
     dialog.appendChild(form);
+    const savingOverlay = dom.createElement('div');
+    savingOverlay.className = 'social-pane__dialog-saving-overlay';
+    savingOverlay.hidden = true;
+    dialog.appendChild(savingOverlay);
+    const fieldsContainer = dom.createElement('div');
+    fieldsContainer.className = 'social-pane__dialog-fields';
+    form.appendChild(fieldsContainer);
     const errorMessage = dom.createElement('p');
     errorMessage.className = 'social-pane__dialog-error';
-    const fields = new Map();
-    for (const field of profileLinkFields) {
-      const fieldWrapper = dom.createElement('label');
-      fieldWrapper.classList.add('social-pane__dialog-field', 'flex-column');
-      const fieldLabel = dom.createElement('span');
-      fieldLabel.className = 'social-pane__dialog-label';
-      fieldLabel.textContent = field.label;
-      fieldWrapper.appendChild(fieldLabel);
-      const input = dom.createElement('input');
-      input.classList.add('social-pane__dialog-input', 'input');
-      input.type = 'url';
-      input.placeholder = field.placeholder;
-      input.value = initialValues[field.key].split('\n')[0] || '';
-      fieldWrapper.appendChild(input);
-      fields.set(field.key, input);
-      form.appendChild(fieldWrapper);
-    }
+    const focusRow = (fieldKey, rowIndex) => {
+      const nextField = fieldsContainer.querySelector(`input[data-profile-link-key="${fieldKey}"][data-profile-link-index="${String(rowIndex)}"]`);
+      nextField?.focus();
+    };
+    const renderFields = focusTarget => {
+      fieldsContainer.replaceChildren();
+      for (const field of profileLinkFields) {
+        const fieldWrapper = dom.createElement('section');
+        fieldWrapper.classList.add('social-pane__dialog-field', 'flex-column');
+        const fieldHeader = dom.createElement('div');
+        fieldHeader.className = 'social-pane__dialog-field-header';
+        fieldWrapper.appendChild(fieldHeader);
+        const fieldLabel = dom.createElement('h3');
+        fieldLabel.className = 'social-pane__dialog-label';
+        fieldLabel.textContent = field.label;
+        fieldHeader.appendChild(fieldLabel);
+        const addButton = dom.createElement('solid-ui-button');
+        addButton.type = 'button';
+        addButton.className = 'social-pane__dialog-row-button--add';
+        addButton.setAttribute('aria-label', `Add another ${field.label.toLowerCase()}`);
+        addButton.variant = 'secondary';
+        addButton.size = 'sm';
+        const addButtonContent = dom.createElement('span');
+        addButtonContent.className = 'social-pane__add-more-content';
+        const addButtonInline = dom.createElement('span');
+        addButtonInline.className = 'social-pane__add-more-inline';
+        const addButtonIcon = dom.createElement('span');
+        addButtonIcon.className = 'social-pane__add-more-icon';
+        addButtonIcon.setAttribute('aria-hidden', 'true');
+        addButtonIcon.innerHTML = _icons.plusIcon;
+        const addButtonText = dom.createElement('span');
+        addButtonText.textContent = 'Add More';
+        addButtonInline.appendChild(addButtonIcon);
+        addButtonInline.appendChild(addButtonText);
+        addButtonContent.appendChild(addButtonInline);
+        addButton.appendChild(addButtonContent);
+        addButton.addEventListener('click', () => {
+          formState[field.key].push('');
+          renderFields({
+            fieldKey: field.key,
+            rowIndex: formState[field.key].length - 1
+          });
+        });
+        fieldHeader.appendChild(addButton);
+        const rows = dom.createElement('div');
+        rows.className = 'social-pane__dialog-row-list';
+        fieldWrapper.appendChild(rows);
+        const values = formState[field.key].length ? formState[field.key] : [''];
+        values.forEach((value, index) => {
+          const row = dom.createElement('div');
+          row.className = 'social-pane__dialog-row';
+          const input = dom.createElement('input');
+          input.classList.add('social-pane__dialog-input', 'input');
+          input.type = 'url';
+          input.placeholder = field.placeholder;
+          input.value = value;
+          input.setAttribute('data-profile-link-key', field.key);
+          input.setAttribute('data-profile-link-index', String(index));
+          input.addEventListener('input', () => {
+            formState[field.key][index] = input.value;
+          });
+          row.appendChild(input);
+          const removeButton = dom.createElement('solid-ui-button');
+          removeButton.type = 'button';
+          removeButton.className = 'social-pane__dialog-row-button--remove';
+          removeButton.setAttribute('aria-label', `Remove ${field.label.toLowerCase()} ${index + 1}`);
+          removeButton.setAttribute('title', 'Remove');
+          removeButton.variant = 'icon';
+          removeButton.size = 'md';
+          const removeButtonIcon = dom.createElement('span');
+          removeButtonIcon.className = 'social-pane__dialog-row-button-icon social-pane__dialog-row-button-icon--remove';
+          removeButtonIcon.setAttribute('slot', 'icon');
+          removeButtonIcon.setAttribute('aria-hidden', 'true');
+          removeButtonIcon.innerHTML = _icons.trashIcon;
+          removeButton.appendChild(removeButtonIcon);
+          removeButton.addEventListener('click', () => {
+            if (formState[field.key].length === 1) {
+              formState[field.key][0] = '';
+            } else {
+              formState[field.key].splice(index, 1);
+            }
+            renderFields();
+          });
+          row.appendChild(removeButton);
+          rows.appendChild(row);
+        });
+        fieldsContainer.appendChild(fieldWrapper);
+      }
+      if (focusTarget) {
+        focusRow(focusTarget.fieldKey, focusTarget.rowIndex);
+      }
+    };
+    renderFields();
     form.appendChild(errorMessage);
     const actions = dom.createElement('div');
     actions.className = 'social-pane__dialog-actions';
     form.appendChild(actions);
-    const closeButton = dom.createElement('button');
+    const closeButton = dom.createElement('solid-ui-button');
     closeButton.type = 'button';
-    closeButton.className = 'social-pane__dialog-button btn-light';
-    closeButton.textContent = 'Close';
+    closeButton.className = 'social-pane__dialog-button--cancel';
+    closeButton.setAttribute('aria-label', 'Close dialog');
+    closeButton.label = 'Close';
+    closeButton.variant = 'secondary';
+    closeButton.size = 'md';
     actions.appendChild(closeButton);
-    const saveButton = dom.createElement('button');
-    saveButton.type = 'submit';
-    saveButton.className = 'social-pane__dialog-button btn-primary';
-    saveButton.textContent = 'Save Changes';
+    const saveButton = dom.createElement('solid-ui-button');
+    saveButton.type = 'button';
+    saveButton.className = 'social-pane__dialog-button--save';
+    saveButton.label = 'Save Changes';
+    saveButton.variant = 'primary';
+    saveButton.size = 'md';
     actions.appendChild(saveButton);
-    const closeDialog = () => {
+    let isSaving = false;
+    const setSavingState = nextSaving => {
+      isSaving = nextSaving;
+      dialog.classList.toggle('modal--saving', nextSaving);
+      dialog.setAttribute('aria-busy', String(nextSaving));
+      form.toggleAttribute('inert', nextSaving);
+      saveButton.disabled = nextSaving;
+      saveButton.setAttribute('aria-busy', String(nextSaving));
+      closeButton.disabled = nextSaving;
+      savingOverlay.hidden = !nextSaving;
+      if (nextSaving) {
+        const activeElement = dialog.ownerDocument.activeElement;
+        if (activeElement && dialog.contains(activeElement)) {
+          activeElement.blur();
+        }
+        (0, _litHtml.render)((0, _litHtml.html)`
+          <div class="modal__saving-indicator inline-flex-row justify-center" aria-live="polite" aria-label="Saving changes">
+            ${(0, _spinner.createSpinner)()}
+          </div>
+        `, savingOverlay);
+      } else {
+        (0, _litHtml.render)((0, _litHtml.html)``, savingOverlay);
+      }
+    };
+    const closeDialog = (force = false) => {
+      if (isSaving && !force) return;
       overlay.remove();
     };
-    overlay.addEventListener('click', event => {
-      if (event.target === overlay) closeDialog();
-    });
-    closeIconButton.addEventListener('click', closeDialog);
-    closeButton.addEventListener('click', closeDialog);
-    overlay.addEventListener('keydown', event => {
-      if (event.key === 'Escape') closeDialog();
-    });
-    form.addEventListener('submit', async event => {
-      event.preventDefault();
+    const requestCloseDialog = () => {
+      closeDialog();
+    };
+    const handleSave = async () => {
       errorMessage.textContent = '';
-      saveButton.disabled = true;
-      closeButton.disabled = true;
-      closeIconButton.disabled = true;
+      setSavingState(true);
       const nextValues = profileLinkFields.reduce((result, field) => {
-        result[field.key] = fields.get(field.key)?.value || '';
+        result[field.key] = [...formState[field.key]];
         return result;
-      }, {
-        homepage: '',
-        weblog: '',
-        workplaceHomepage: '',
-        schoolHomepage: ''
-      });
+      }, createEmptyProfileLinkValues());
       try {
         await saveProfileLinkValues(store, subject, nextValues);
-        closeDialog();
+        setSavingState(false);
+        closeDialog(true);
         onSaved();
       } catch (error) {
         errorMessage.textContent = error instanceof Error ? error.message : 'Unable to save profile links.';
       } finally {
-        saveButton.disabled = false;
-        closeButton.disabled = false;
-        closeIconButton.disabled = false;
+        if (isSaving) {
+          setSavingState(false);
+        }
       }
+    };
+    overlay.addEventListener('click', event => {
+      if (event.target === overlay) closeDialog();
+    });
+    closeButton.addEventListener('click', requestCloseDialog);
+    saveButton.addEventListener('click', async event => {
+      event.preventDefault();
+      await handleSave();
+    });
+    overlay.addEventListener('keydown', event => {
+      if (event.key === 'Escape') closeDialog();
+    });
+    form.addEventListener('submit', event => {
+      event.preventDefault();
     });
     dom.body.appendChild(overlay);
-    fields.get('homepage')?.focus();
+    focusRow('homepage', 0);
   };
   button.addEventListener('click', openDialog);
   return button;

package/dist/social/icons.d.ts

@@ -2,4 +2,6 @@ export declare const personInCircleIcon: string;
 export declare const editIcon: string;
 export declare const locationIcon: string;
 export declare const closeIcon: string;
+export declare const trashIcon: string;
+export declare const plusIcon: string;
 //# sourceMappingURL=icons.d.ts.map

package/dist/social/icons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../src/social/icons.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,kBAAkB,QAa9B,CAAA;AACD,eAAO,MAAM,QAAQ,QAWpB,CAAA;AACD,eAAO,MAAM,YAAY,QAYxB,CAAA;AACD,eAAO,MAAM,SAAS,QAWrB,CAAA"}
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../src/social/icons.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,kBAAkB,QAa9B,CAAA;AACD,eAAO,MAAM,QAAQ,QAWpB,CAAA;AACD,eAAO,MAAM,YAAY,QAYxB,CAAA;AACD,eAAO,MAAM,SAAS,QAWrB,CAAA;AACD,eAAO,MAAM,SAAS,QAerB,CAAA;AACD,eAAO,MAAM,QAAQ,QAkBpB,CAAA"}

package/dist/social/icons.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.personInCircleIcon = exports.locationIcon = exports.editIcon = exports.closeIcon = void 0;
+exports.trashIcon = exports.plusIcon = exports.personInCircleIcon = exports.locationIcon = exports.editIcon = exports.closeIcon = void 0;
 /* Simpliest solution for now since we are only using it for the symposium
 and then we will use icons from solid-assets */
 const html = String.raw;
@@ -23,9 +23,9 @@ const personInCircleIcon = exports.personInCircleIcon = html`
 `;
 const editIcon = exports.editIcon = html`
   <svg xmlns="http://www.w3.org/2000/svg" 
-    width="20" 
-    height="20" 
-    viewBox="0 0 20 20" 
+    width="14" 
+    height="14" 
+    viewBox="3 3 14 14" 
     fill="none"
     aria-hidden="true" 
     focusable="false"
@@ -57,4 +57,39 @@ const closeIcon = exports.closeIcon = html`
     >
     <path fill-rule="evenodd" clip-rule="evenodd" d="M10.5301 0.244005C10.8555 -0.0813835 11.3834 -0.0812864 11.7088 0.244005C12.0338 0.569352 12.0338 1.09639 11.7088 1.42174L7.15416 5.97545L11.7088 10.5301C12.0341 10.8556 12.0342 11.3835 11.7088 11.7088C11.3835 12.0342 10.8556 12.0341 10.5301 11.7088L5.97545 7.15416L1.42174 11.7088C1.09639 12.0338 0.569351 12.0338 0.244004 11.7088C-0.0812866 11.3834 -0.0813828 10.8555 0.244004 10.5301L4.79772 5.97545L0.244004 1.42174C-0.0812866 1.09629 -0.0813828 0.569393 0.244004 0.244005C0.569393 -0.0813835 1.09629 -0.0812864 1.42174 0.244005L5.97545 4.79772L10.5301 0.244005Z" fill="#4A5565"/>
   </svg>
+`;
+const trashIcon = exports.trashIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" 
+    width="20" 
+    height="20" 
+    viewBox="0 0 20 20" 
+    fill="none"
+    aria-hidden="true"
+    focusable="false"
+  >
+    <path d="M8.33301 9.16675V14.1667" stroke="#D1D5DC" stroke-width="1.45833" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M11.667 9.16675V14.1667" stroke="#D1D5DC" stroke-width="1.45833" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M15.8337 5V16.6667C15.8337 17.1087 15.6581 17.5326 15.3455 17.8452C15.0329 18.1577 14.609 18.3333 14.167 18.3333H5.83366C5.39163 18.3333 4.96771 18.1577 4.65515 17.8452C4.34259 17.5326 4.16699 17.1087 4.16699 16.6667V5" stroke="#D1D5DC" stroke-width="1.45833" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M2.5 5H17.5" stroke="#D1D5DC" stroke-width="1.45833" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M6.66699 5.00008V3.33341C6.66699 2.89139 6.84259 2.46746 7.15515 2.1549C7.46771 1.84234 7.89163 1.66675 8.33366 1.66675H11.667C12.109 1.66675 12.5329 1.84234 12.8455 2.1549C13.1581 2.46746 13.3337 2.89139 13.3337 3.33341V5.00008" stroke="#D1D5DC" stroke-width="1.45833" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+`;
+const plusIcon = exports.plusIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" 
+    width="12" 
+    height="12" 
+    viewBox="0 0 12 12" 
+    fill="none"
+    aria-hidden="true"
+    focusable="false"
+  >
+    <g clip-path="url(#clip0_3001_2564)">
+      <path d="M6.06055 0.10083C6.53372 0.101056 6.91793 0.485037 6.91797 0.958252V5.20532H11.165C11.6384 5.20532 12.0225 5.58936 12.0225 6.06274C12.0223 6.536 11.6383 6.92017 11.165 6.92017H6.91797V11.1663C6.91797 11.6395 6.53374 12.0235 6.06055 12.0237C5.58716 12.0237 5.20312 11.6396 5.20312 11.1663V6.92017H0.957031C0.483929 6.91994 0.0997601 6.53586 0.0996094 6.06274C0.0996094 5.5895 0.483837 5.20555 0.957031 5.20532H5.20312V0.958252C5.20316 0.484897 5.58718 0.10083 6.06055 0.10083Z" fill="#7C4DFF"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_3001_2564">
+        <rect width="12" height="12" fill="white"/>
+      </clipPath>
+    </defs>
+  </svg>
 `;