profile-pane 3.2.0 → 3.2.2-test.0

package/lib/sections/skills/SkillsSection.js

@@ -5,44 +5,87 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.renderSkillsSection = renderSkillsSection;
 var _litHtml = require("lit-html");
+require("solid-ui/components/actions/button");
 var _textUtils = require("../../textUtils");
+require("./SkillsSection.css");
 var _SkillsEditDialog = require("./SkillsEditDialog");
 var _profileIcons = require("../../icons-svg/profileIcons");
 var _texts = require("../../texts");
 var _collapsibleSection = require("../shared/collapsibleSection");
 var _mutations = require("./mutations");
+var _errorDisplay = require("../../utils/errorDisplay");
+const removeSkillFailedMessageText = 'Unable to remove your skill.';
+function setSkillsSectionError(section, message) {
+  const errorBox = section.querySelector('.profile-section-inline-error');
+  if (!errorBox) return;
+  if (!message) {
+    errorBox.textContent = '';
+    errorBox.hidden = true;
+    errorBox.setAttribute('aria-hidden', 'true');
+    return;
+  }
+  errorBox.textContent = message;
+  errorBox.hidden = false;
+  errorBox.setAttribute('aria-hidden', 'false');
+  errorBox.focus();
+}
 function renderSkillItem(detail, store, subject, viewerMode, onSaved) {
   if (!detail) return (0, _litHtml.html)``;
   const handleRemove = async event => {
     event.preventDefault();
     if (viewerMode !== 'owner') return;
+    const removeButton = event.currentTarget;
+    const skillRow = removeButton?.closest('.skills__item');
+    const section = event.currentTarget?.closest('[data-profile-section="skills"]');
     const removeRow = {
       name: detail.name,
       publicId: detail.publicId,
       entryNode: detail.entryNode.value,
       status: 'deleted'
     };
-    await (0, _mutations.processSkillsMutations)(store, subject, {
-      create: [],
-      update: [],
-      remove: [removeRow]
-    });
-    if (onSaved) {
-      await onSaved();
+    try {
+      removeButton?.setAttribute('disabled', '');
+      removeButton?.setAttribute('aria-busy', 'true');
+      removeButton?.setAttribute('data-loading', 'true');
+      skillRow?.setAttribute('data-pending', 'true');
+      await (0, _mutations.processSkillsMutations)(store, subject, {
+        create: [],
+        update: [],
+        remove: [removeRow]
+      });
+      if (section) {
+        setSkillsSectionError(section, null);
+      }
+      if (onSaved) {
+        await onSaved();
+      }
+    } catch (error) {
+      if (section) {
+        setSkillsSectionError(section, (0, _errorDisplay.formatDisplayError)(error, removeSkillFailedMessageText));
+      }
+    } finally {
+      removeButton?.removeAttribute('disabled');
+      removeButton?.setAttribute('aria-busy', 'false');
+      removeButton?.removeAttribute('data-loading');
+      skillRow?.removeAttribute('data-pending');
     }
   };
   return (0, _litHtml.html)`
-    <li class="skills__item inline-flex-row" role="listitem">
+    <li class="skills__item" role="listitem">
       <span class="skills__item-label">${(0, _textUtils.strToUpperCase)(detail.name)}</span>
       ${viewerMode === 'owner' ? (0, _litHtml.html)`
-            <button
-              type="button"
-              class="skills__remove-button inline-flex-row"
-              aria-label="Remove ${detail.name} skill"
-              @click=${handleRemove}
-            >
-              ${_profileIcons.deleteIcon}
-            </button>
+            <span class="skills__item-tail">
+              <solid-ui-button
+                type="button"
+                variant="icon"
+                size="sm"
+                class="skills__remove-button"
+                aria-label=${`Remove ${detail.name} skill`}
+                @click=${handleRemove}
+              >
+                <span slot="icon" aria-hidden="true">${_profileIcons.deleteIcon}</span>
+              </solid-ui-button>
+            </span>
           ` : ''}
     </li>
   `;
@@ -52,50 +95,63 @@ function renderSkillsSectionDefault(store, subject, skills, viewerMode, onSaved)
   const isOwner = viewerMode === 'owner';
   return (0, _litHtml.html)`
     <section
-      class="profile__section border-lighter profile-section-collapsible profile-section-collapsible--inline-mobile-actions"
+      class="profile__section profile-section-collapsible profile-section-collapsible--inline-mobile-actions"
+      data-profile-section="skills"
       aria-labelledby="skills-heading"
       role="region"
       tabindex="-1"
       data-expanded="false"
     >
       <header class="profile__section-header profile-section-collapsible__header">
-        <h2 id="skills-heading">${_texts.skillsHeadingText}</h2>
-        <div class="profile-section-collapsible__actions flex-column">
+        <h3 id="skills-heading">${_texts.skillsHeadingText}</h3>
+        <div class="profile-section-collapsible__actions">
           ${isOwner ? (0, _litHtml.html)`
-            <button
+            <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 or edit skills"
               @click=${event => (0, _SkillsEditDialog.createSkillsEditDialog)(event, store, subject, skills, viewerMode, onSaved)}
             >
-              <span class="profile-section-collapsible__edit-label profile__add-more-content inline-flex-row">
-                <span class="profile__add-more-icon inline-flex-row" aria-hidden="true">${_profileIcons.addIcon}</span>
-                Add More
+              <span 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 skills section"
             aria-controls="skills-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="skills-panel"
         class="profile-section-collapsible__content"
-        aria-hidden="true"
       >
         ${hasSkills ? (0, _litHtml.html)`
-              <ul class="skills__list flex-column" role="list" aria-label="Professional skills and competencies">
+              <ul class="skills__list" role="list" aria-label="Professional skills and competencies">
                 ${skills.map(detail => renderSkillItem(detail, store, subject, viewerMode, onSaved))}
               </ul>
+              <div
+                class="profile-section-inline-error"
+                role="alert"
+                aria-live="assertive"
+                aria-atomic="true"
+                aria-hidden="true"
+                tabindex="-1"
+                hidden
+              ></div>
             ` : (0, _litHtml.html)`<p>No skills added yet.</p>`}
       </div>
     </section>
@@ -103,9 +159,9 @@ function renderSkillsSectionDefault(store, subject, skills, viewerMode, onSaved)
 }
 function renderOwnerEmptySkillsContent(_store, _subject, _skills, _viewerMode, _onSaved) {
   return (0, _litHtml.html)`
-      <div class="profile__empty-state-content flex-column-center" role="group" aria-label="Empty skills section">    
+      <div class="profile__empty-state-content" role="group" aria-label="Empty skills section">    
         <div class="skills__empty-icon-wrapper">
-          <span class="skills__empty-icon inline-flex-row">${_profileIcons.lighteningIcon}</span>
+          <span class="skills__empty-icon">${_profileIcons.lighteningIcon}</span>
         </div>
         <p class="profile__empty-state-message skills__empty-message">
             No skills added yet.
@@ -118,41 +174,45 @@ function renderOwnerEmptySkillsSection(store, subject, skills, viewerMode, onSav
     <section 
       aria-labelledby="skills-heading" 
       data-profile-section="skills"
-      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="skills-heading" tabindex="-1">${_texts.skillsHeadingText}</h2>
-        <div class="profile-section-collapsible__actions flex-column">
-          <button
+        <h3 id="skills-heading" tabindex="-1">${_texts.skillsHeadingText}</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 skills"
             @click=${event => {
     return (0, _SkillsEditDialog.createSkillsEditDialog)(event, store, subject, skills, viewerMode, onSaved);
   }}
           >
-            <span class="profile-section-collapsible__edit-label profile__add-more-content inline-flex-row">
-              <span class="profile__add-more-icon inline-flex-row" aria-hidden="true">${_profileIcons.addIcon}</span>
-              Add Skills
+            <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>
-          <button
+          </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 skills section"
             aria-controls="skills-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="skills-panel" class="profile-section-collapsible__content" aria-hidden="true">
+      <div id="skills-panel" class="profile-section-collapsible__content">
         ${renderOwnerEmptySkillsContent(store, subject, skills, viewerMode, onSaved)}
       </div>
     </section>

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

@@ -1 +1 @@
-{"version":3,"file":"mutations.d.ts","sourceRoot":"","sources":["../../../src/sections/skills/mutations.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAoB,MAAM,QAAQ,CAAA;AAE/D,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAK7C,MAAM,MAAM,iBAAiB,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAA;AAsHrD,wBAAsB,sBAAsB,CAAC,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,iBAAiB,iBAQjH"}
+{"version":3,"file":"mutations.d.ts","sourceRoot":"","sources":["../../../src/sections/skills/mutations.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAE,SAAS,EAA0B,MAAM,QAAQ,CAAA;AAEhF,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAgB,MAAM,iBAAiB,CAAA;AAM3D,MAAM,MAAM,iBAAiB,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAA;AAsHrD,wBAAsB,sBAAsB,CAAC,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,iBAAiB,iBASjH"}

package/lib/sections/skills/mutations.js

@@ -9,30 +9,29 @@ var _solidUi = require("solid-ui");
 var _rdfMutationHelpers = require("../shared/rdfMutationHelpers");
 var _idNodeFactory = require("../shared/idNodeFactory");
 var _texts = require("../../texts");
+var _debug = require("../../utils/debug");
 const ESCO_SKILL_BASE_URI = 'http://data.europa.eu/esco/skill/';
 const SKILL_PREFIX_BASE_URI = 'skill:';
 function ensureSkillPrefix(store) {
-  const anyStore = store;
-  if (typeof anyStore.setPrefixForURI === 'function') {
-    anyStore.setPrefixForURI('skill', SKILL_PREFIX_BASE_URI);
-    return;
-  }
-  if (!anyStore.namespaces) {
-    anyStore.namespaces = {};
-  }
-  anyStore.namespaces.skill = SKILL_PREFIX_BASE_URI;
+  (0, _rdfMutationHelpers.registerStorePrefix)(store, 'skill', SKILL_PREFIX_BASE_URI);
 }
-function normalizeSkillPublicIdUri(publicId) {
+function buildSkillPublicIdNode(publicId) {
   const normalized = publicId.trim();
-  if (!normalized) return normalized;
+  if (!normalized) return (0, _rdflib.blankNode)();
+  if (normalized.startsWith('_:')) {
+    return (0, _rdflib.blankNode)(normalized.slice(2));
+  }
   if (normalized.startsWith('skill:')) {
-    return normalized;
+    return (0, _rdflib.sym)(normalized);
   }
   if (normalized.startsWith(ESCO_SKILL_BASE_URI)) {
     const suffix = normalized.slice(ESCO_SKILL_BASE_URI.length);
-    return suffix ? `skill:${suffix}` : normalized;
+    return (0, _rdflib.sym)(suffix ? `skill:${suffix}` : normalized);
   }
-  return normalized;
+  if (!normalized.includes(':')) {
+    return (0, _rdflib.blankNode)(normalized);
+  }
+  return (0, _rdflib.sym)(normalized);
 }
 function normalizeNodeId(value) {
   return value.startsWith('_:') ? value.slice(2) : value;
@@ -46,10 +45,7 @@ function collectSkillLinkStatementsByEntryValue(store, subject, doc, entryNode)
 }
 function buildSkillsStatements(subject, doc, node, skill) {
   if (!skill.name) return [];
-  if (!skill.publicId) {
-    throw new Error(`Missing skill publicId for skill: ${skill.name}`);
-  }
-  const publicIdNode = (0, _rdflib.sym)(normalizeSkillPublicIdUri(skill.publicId));
+  const publicIdNode = buildSkillPublicIdNode(skill.publicId);
   return [(0, _rdflib.st)(subject, _solidUi.ns.schema('skills'), node, doc), (0, _rdflib.st)(node, _solidUi.ns.solid('publicId'), publicIdNode, doc), (0, _rdflib.st)(publicIdNode, _solidUi.ns.schema('name'), (0, _rdflib.literal)(skill.name), doc)];
 }
 async function mutateSkillsEntries(store, subject, skillOps) {
@@ -98,13 +94,21 @@ async function mutateSkillsEntries(store, subject, skillOps) {
   skillOps.create.forEach(skill => {
     insertions.push(...buildSkillsStatements(subject, doc, (0, _idNodeFactory.createIdNode)(doc), skill));
   });
-  await (0, _rdfMutationHelpers.applyUpdaterPatch)(store, deletions, insertions);
+  await (0, _rdfMutationHelpers.runUpdateTransport)(store, doc, deletions, insertions, {
+    unsupportedMessage: 'Skill updates are not supported by this store updater.',
+    failureMessage: 'Failed to save skills',
+    useDavFallback: true,
+    usePutFallback: true
+  });
 }
 async function processSkillsMutations(store, subject, mutationPlan) {
   try {
     await mutateSkillsEntries(store, subject, mutationPlan);
   } catch (error) {
-    const message = error instanceof Error ? error.message : String(error);
-    throw new Error(`${_texts.mutationSaveSkillsFailedPrefixText} ${message}`);
+    const rootError = error instanceof Error ? error : new Error(String(error));
+    (0, _debug.error)(_texts.skillsMutationSaveFailedDebugText, rootError);
+    throw new Error(_texts.saveSkillsUpdatesFailedMessageText, {
+      cause: rootError
+    });
   }
 }

package/lib/sections/skills/selectors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"selectors.d.ts","sourceRoot":"","sources":["../../../src/sections/skills/selectors.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAA;AAE1D,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAGtC,wBAAgB,WAAW,CAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,GAAE,MAAM,CAe1D;AAED,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,GAAG,YAAY,EAAE,CAcxF;AAED,wBAAgB,aAAa,CAAC,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,GAAG,MAAM,EAAE,CAE5E"}
+{"version":3,"file":"selectors.d.ts","sourceRoot":"","sources":["../../../src/sections/skills/selectors.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAA;AAE1D,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAGtC,wBAAgB,WAAW,CAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,GAAE,MAAM,CAiB1D;AAED,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,GAAG,YAAY,EAAE,CAgBxF;AAED,wBAAgB,aAAa,CAAC,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,GAAG,MAAM,EAAE,CAE5E"}

package/lib/sections/skills/selectors.js

@@ -14,17 +14,19 @@ function skillAsText(store, sk) {
 
   // Canonical shape: entry node -> solid:publicId -> schema:name.
   const publicId = store.any(sk, _solidUi.ns.solid('publicId'));
-  if (publicId && publicId.termType === 'NamedNode') {
+  if (publicId && (publicId.termType === 'NamedNode' || publicId.termType === 'BlankNode')) {
     const name = store.anyJS(publicId, _solidUi.ns.schema('name'));
     if (name) return name;
-    return _solidUi.utils.label(publicId, true);
+    if (publicId.termType === 'NamedNode') {
+      return _solidUi.utils.label(publicId, true);
+    }
   }
   return '';
 }
 function presentSkillDetails(subject, store) {
   return store.each(subject, _solidUi.ns.schema('skills')).filter(sk => sk.termType !== 'Literal').map(sk => {
     const publicId = store.any(sk, _solidUi.ns.solid('publicId'));
-    const publicIdUri = publicId ? publicId.value : '';
+    const publicIdUri = publicId ? publicId.termType === 'BlankNode' ? `_:${publicId.value}` : publicId.value : '';
     return {
       name: skillAsText(store, sk),
       publicId: publicIdUri,

package/lib/sections/social/SocialEditDialog.d.ts

@@ -1,5 +1,7 @@
+import 'solid-ui/components/actions/button';
+import 'solid-ui/components/forms/select';
 import type { Account } from './types';
-import '../../styles/ContactInfoEditDialog.css';
+import '../contactInfo/ContactInfoEditDialog.css';
 import '../../styles/EditDialogs.css';
 import { LiveStore, NamedNode } from 'rdflib';
 import { ViewerMode } from '../../types';

package/lib/sections/social/SocialEditDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SocialEditDialog.d.ts","sourceRoot":"","sources":["../../../src/sections/social/SocialEditDialog.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAa,MAAM,SAAS,CAAA;AACjD,OAAO,wCAAwC,CAAA;AAC/C,OAAO,8BAA8B,CAAA;AACrC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAuYxC,wBAAsB,sBAAsB,CAC1C,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,cAAc,EAAE,OAAO,EAAE,EACzB,UAAU,EAAE,UAAU,EACtB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,iBA6CrC"}
+{"version":3,"file":"SocialEditDialog.d.ts","sourceRoot":"","sources":["../../../src/sections/social/SocialEditDialog.ts"],"names":[],"mappings":"AAEA,OAAO,oCAAoC,CAAA;AAC3C,OAAO,kCAAkC,CAAA;AACzC,OAAO,KAAK,EAAE,OAAO,EAAa,MAAM,SAAS,CAAA;AACjD,OAAO,0CAA0C,CAAA;AACjD,OAAO,8BAA8B,CAAA;AACrC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AA4hBxC,wBAAsB,sBAAsB,CAC1C,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,cAAc,EAAE,OAAO,EAAE,EACzB,UAAU,EAAE,UAAU,EACtB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,iBAgDrC"}