profile-pane 3.1.5 → 3.2.0

package/lib/sections/skills/SkillsEditDialog.js

@@ -0,0 +1,340 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createSkillsEditDialog = createSkillsEditDialog;
+var _dialog = require("../../ui/dialog");
+var _litHtml = require("lit-html");
+require("../../styles/EditDialogs.css");
+require("../../styles/ContactInfoEditDialog.css");
+var _rowState = require("../shared/rowState");
+var _textUtils = require("../../textUtils");
+var _mutations = require("./mutations");
+var _profileIcons = require("../../icons-svg/profileIcons");
+var _texts = require("../../texts");
+const ESCO_SKILL_SEARCH_URI = 'https://ec.europa.eu/esco/api/search?language=$(language)&limit=$(limit)&type=skill&text=$(name)';
+const ESCO_SEARCH_LANGUAGE = 'en';
+const ESCO_SEARCH_LIMIT = 8;
+const ESCO_SKILL_BASE_URI = 'http://data.europa.eu/esco/skill/';
+function normalizeSkillPublicId(value) {
+  const normalized = sanitizeSkillFieldValue(value);
+  if (!normalized) return '';
+  if (normalized.startsWith('skill:')) return normalized;
+  if (normalized.startsWith(ESCO_SKILL_BASE_URI)) {
+    const suffix = normalized.slice(ESCO_SKILL_BASE_URI.length);
+    return suffix ? `skill:${suffix}` : normalized;
+  }
+  return normalized;
+}
+function buildEscoSkillSearchUrl(name) {
+  return ESCO_SKILL_SEARCH_URI.replace('$(language)', encodeURIComponent(ESCO_SEARCH_LANGUAGE)).replace('$(limit)', encodeURIComponent(String(ESCO_SEARCH_LIMIT))).replace('$(name)', encodeURIComponent(name));
+}
+function toSkillLabel(result) {
+  return result?.title || result?.searchHit || result?.preferredLabel?.en || result?.uri || '';
+}
+async function fetchEscoSkillSuggestions(name) {
+  const query = sanitizeSkillFieldValue(name);
+  if (query.length < 2 || typeof fetch !== 'function') return [];
+  try {
+    const response = await fetch(buildEscoSkillSearchUrl(query), {
+      headers: {
+        Accept: 'application/json'
+      }
+    });
+    if (!response.ok) return [];
+    const payload = await response.json();
+    const results = Array.isArray(payload?._embedded?.results) ? payload._embedded.results : [];
+    const seen = new Set();
+    return results.map(result => {
+      const label = sanitizeSkillFieldValue(toSkillLabel(result));
+      const uri = typeof result?.uri === 'string' ? result.uri : '';
+      return {
+        label,
+        uri
+      };
+    }).filter(suggestion => {
+      if (!suggestion.label) return false;
+      const key = suggestion.label.toLowerCase();
+      if (seen.has(key)) return false;
+      seen.add(key);
+      return true;
+    });
+  } catch {
+    return [];
+  }
+}
+function sanitizeSkillFieldValue(value) {
+  return (0, _textUtils.sanitizeTextValue)(value);
+}
+function rowHasContent(row) {
+  return [row.name].some(_textUtils.hasNonEmptyText);
+}
+function toFormState(details) {
+  const rows = (details || []).map(detail => ({
+    name: sanitizeSkillFieldValue((0, _textUtils.toText)(detail.name)),
+    publicId: normalizeSkillPublicId((0, _textUtils.toText)(detail.publicId)),
+    entryNode: (0, _textUtils.toText)(detail.entryNode),
+    status: (0, _textUtils.toText)(detail.entryNode) ? 'existing' : 'new'
+  })).filter(row => Boolean(row.name || row.publicId || row.entryNode));
+  return {
+    skills: rows.length ? rows : [{
+      name: '',
+      publicId: '',
+      entryNode: '',
+      status: 'new'
+    }]
+  };
+}
+function matchSkillSuggestion(suggestions, value) {
+  const normalized = sanitizeSkillFieldValue(value).toLowerCase();
+  if (!normalized) return null;
+  return suggestions.find(suggestion => suggestion.label.toLowerCase() === normalized) || null;
+}
+function validateSkillsBeforeSave(rows) {
+  const ops = (0, _rowState.summarizeRowOps)(rows, rowHasContent);
+  const hasChanges = ops.create.length > 0 || ops.update.length > 0 || ops.remove.length > 0;
+  if (!hasChanges) return 'No skill changes detected.';
+  for (let i = 0; i < rows.length; i++) {
+    const row = rows[i];
+    if (!row || row.status === 'deleted') continue;
+    if (!(0, _textUtils.hasNonEmptyText)(row.name)) continue;
+    if (row.status !== 'existing' && !(0, _textUtils.hasNonEmptyText)(row.publicId)) {
+      return `Skill ${i + 1}: please select a skill from the ESCO suggestions.`;
+    }
+  }
+  return null;
+}
+function hasInvalidSkillSelection(rows) {
+  return rows.some(row => {
+    if (!row || row.status === 'deleted') return false;
+    if (!(0, _textUtils.hasNonEmptyText)(row.name)) return false;
+    return !(0, _textUtils.hasNonEmptyText)(row.publicId);
+  });
+}
+function updateSkillsSubmitEnabled(rows) {
+  const submitButton = document.querySelector('#profile-modal #modal-buttons button.btn-primary');
+  if (!submitButton) return;
+  submitButton.disabled = hasInvalidSkillSelection(rows);
+}
+function focusSkillField(form, selector) {
+  const nextField = form.querySelector(selector);
+  if (!nextField || typeof nextField.focus !== 'function') return;
+  nextField.scrollIntoView({
+    block: 'start',
+    behavior: 'auto'
+  });
+  nextField.focus();
+  if (nextField instanceof HTMLInputElement || nextField instanceof HTMLTextAreaElement) {
+    nextField.select();
+  }
+}
+function renderSkillInputRow({
+  rows,
+  index,
+  displayIndex,
+  onDelete,
+  onChange,
+  onSkillSearch,
+  suggestions
+}) {
+  const row = rows[index];
+  const label = `Skill ${displayIndex + 1}`;
+  const skillName = `skill-${index}`;
+  const datalistId = `skill-suggestions-${index}`;
+  const hasSelectionIssue = Boolean(row && row.status !== 'deleted' && (0, _textUtils.hasNonEmptyText)(row.name) && !(0, _textUtils.hasNonEmptyText)(row.publicId));
+  const handleSkillInput = field => e => {
+    const target = e.target;
+    const nextValue = sanitizeSkillFieldValue(target.value);
+    if (rows[index]) {
+      (0, _rowState.applyRowFieldChange)(rows[index], field, nextValue, rowHasContent);
+      const matchedSuggestion = matchSkillSuggestion(suggestions, nextValue);
+      rows[index].publicId = normalizeSkillPublicId(matchedSuggestion?.uri || '');
+      onSkillSearch(index, nextValue);
+      onChange();
+    }
+  };
+  const handleDelete = event => {
+    event.preventDefault();
+    onDelete();
+  };
+  return (0, _litHtml.html)`
+    <div class="profile-edit-dialog__row profile-edit-dialog__row--full profile-edit-dialog__row--skill">
+      <label aria-label=${`${label} Name`} class="label profile-edit-dialog__field profile-edit-dialog__field--full">
+        <div class="profile-edit-dialog__input-wrap">
+          <span class="profile-edit-dialog__search-icon" aria-hidden="true">${_profileIcons.searchIcon}</span>
+          <input
+            class="input profile-edit-dialog__input--with-leading-icon"
+            type="text"
+            name=${skillName}
+            .value=${row?.name || ''}
+            required
+            data-contact-field="name"
+            data-entry-node=${row?.entryNode || ''}
+            data-row-status=${row?.status || 'n/a'}
+            placeholder="Skill"
+            autocomplete="off"
+            list=${datalistId}
+            inputmode="text"
+            aria-invalid=${hasSelectionIssue ? 'true' : 'false'}
+            @input=${handleSkillInput('name')}
+          />
+        </div>
+        <datalist id=${datalistId}>
+          ${suggestions.map(suggestion => (0, _litHtml.html)`<option value=${suggestion.label}></option>`)}
+        </datalist>
+        <small class="profile-edit-dialog__input-help-text">Type to search ESCO and select one suggestion.</small>
+      </label>
+      <div class="profile-edit-dialog__actions profile-edit-dialog__actions--edge">
+        <button
+          type="button"
+          class="profile-edit-dialog__delete-button"
+          aria-label=${`Delete skill ${displayIndex + 1}`}
+          title=${_texts.deleteEntryButtonTitleText}
+          @click=${handleDelete}
+        >
+          <span class="profile-edit-dialog__delete-icon" aria-hidden="true">${_profileIcons.trashIcon}</span>
+        </button>
+      </div>
+    </div>
+  `;
+}
+function renderSkillsSection(rows, onAddRow, suggestionByIndex, handleSearch) {
+  const visibleRows = rows.map((row, index) => ({
+    row,
+    index
+  })).filter(({
+    row
+  }) => row.status !== 'deleted');
+  return (0, _litHtml.html)`
+    <section class="profile-edit-dialog__section" aria-label="Skills">
+      <fieldset>
+        <legend class="sr-only">Skill entries</legend>
+        ${visibleRows.map(({
+    index
+  }, displayIndex) => renderSkillInputRow({
+    rows,
+    index,
+    displayIndex,
+    onChange: onAddRow,
+    onSkillSearch: handleSearch,
+    suggestions: suggestionByIndex[index] || [],
+    onDelete: () => {
+      (0, _rowState.deleteRow)(rows, index);
+      delete suggestionByIndex[index];
+      onAddRow();
+    }
+  }))}
+      </fieldset>
+    </section>
+  `;
+}
+function renderSkillsEditTemplate(form, formState, viewerMode, options = {}) {
+  const formStateWithSearch = formState;
+  const suggestionByIndex = formStateWithSearch.suggestionByIndex || (formStateWithSearch.suggestionByIndex = {});
+  const searchSeqByIndex = formStateWithSearch.searchSeqByIndex || (formStateWithSearch.searchSeqByIndex = {});
+  const searchTimerByIndex = formStateWithSearch.searchTimerByIndex || (formStateWithSearch.searchTimerByIndex = {});
+  const rerender = (nextOptions = {}) => renderSkillsEditTemplate(form, formState, viewerMode, nextOptions);
+  const handleSearch = (rowIndex, term) => {
+    if (searchTimerByIndex[rowIndex]) {
+      clearTimeout(searchTimerByIndex[rowIndex]);
+    }
+    const normalized = sanitizeSkillFieldValue(term);
+    if (normalized.length < 2) {
+      suggestionByIndex[rowIndex] = [];
+      rerender();
+      return;
+    }
+    const seq = (searchSeqByIndex[rowIndex] || 0) + 1;
+    searchSeqByIndex[rowIndex] = seq;
+    searchTimerByIndex[rowIndex] = setTimeout(async () => {
+      const suggestions = await fetchEscoSkillSuggestions(normalized);
+      if (searchSeqByIndex[rowIndex] !== seq) return;
+      suggestionByIndex[rowIndex] = suggestions;
+      const row = formState.skills[rowIndex];
+      if (row) {
+        const matchedSuggestion = matchSkillSuggestion(suggestions, row.name);
+        row.publicId = matchedSuggestion ? normalizeSkillPublicId(matchedSuggestion.uri) : row.publicId;
+      }
+      rerender();
+    }, 220);
+  };
+  (0, _litHtml.render)((0, _litHtml.html)`
+    ${renderSkillsSection(formState.skills, rerender, suggestionByIndex, handleSearch)}
+    ${viewerMode !== 'owner' ? (0, _litHtml.html)`<p class="profile-edit-dialog__login-message">${_texts.ownerLoginRequiredDialogMessageText}</p>` : null}
+  `, form);
+  updateSkillsSubmitEnabled(formState.skills);
+  if (options.focusSelector) {
+    focusSkillField(form, options.focusSelector);
+  }
+}
+function createSkillsEditForm(details, viewerMode) {
+  const form = document.createElement('form');
+  form.classList.add('profile__edit-form');
+  const formState = toFormState(details);
+  renderSkillsEditTemplate(form, formState, viewerMode);
+  const addRow = () => {
+    formState.skills.unshift({
+      name: '',
+      publicId: '',
+      entryNode: '',
+      status: 'new'
+    });
+    const formStateWithSearch = formState;
+    formStateWithSearch.suggestionByIndex = {};
+    formStateWithSearch.searchSeqByIndex = {};
+    formStateWithSearch.searchTimerByIndex = {};
+    renderSkillsEditTemplate(form, formState, viewerMode, {
+      focusSelector: '[name="skill-0"]'
+    });
+  };
+  return {
+    form,
+    formState,
+    addRow
+  };
+}
+async function createSkillsEditDialog(event, store, subject, skills, viewerMode, onSaved) {
+  const dom = event.currentTarget?.ownerDocument || document;
+  const {
+    form,
+    formState,
+    addRow
+  } = createSkillsEditForm(skills, viewerMode);
+  const result = await (0, _dialog.openInputDialog)({
+    title: _texts.editSkillsDialogTitleText,
+    dom,
+    form,
+    headerAction: {
+      type: 'button',
+      label: '+ Add More',
+      ariaLabel: 'Add another skill',
+      onClick: addRow
+    },
+    submitLabel: _texts.dialogSubmitLabelText,
+    cancelLabel: _texts.dialogCancelLabelText,
+    validate: () => {
+      if (viewerMode !== 'owner') {
+        return _texts.ownerLoginRequiredDialogMessageText;
+      }
+      return validateSkillsBeforeSave(formState.skills);
+    },
+    onSave: async () => {
+      const skillOps = (0, _rowState.summarizeRowOps)(formState.skills, rowHasContent);
+      const plan = {
+        create: skillOps.create,
+        update: skillOps.update,
+        remove: skillOps.remove
+      };
+      await (0, _mutations.processSkillsMutations)(store, subject, plan);
+    },
+    formatSaveError: error => {
+      const message = error instanceof Error ? error.message : String(error);
+      return `${_texts.saveContactUpdatesFailedPrefixText} ${message}`;
+    }
+  });
+  if (!result) return;
+  if (onSaved) {
+    await onSaved();
+  }
+}

package/lib/sections/skills/SkillsSection.d.ts

@@ -0,0 +1,5 @@
+import { LiveStore, NamedNode } from 'rdflib';
+import { ViewerMode } from '../../types';
+import { SkillDetails } from './types';
+export declare function renderSkillsSection(store: LiveStore, subject: NamedNode, skills: SkillDetails[], viewerMode: ViewerMode, onSaved?: () => Promise<void> | void): import("lit-html").TemplateResult<1> | "";
+//# sourceMappingURL=SkillsSection.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SkillsSection.d.ts","sourceRoot":"","sources":["../../../src/sections/skills/SkillsSection.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAExC,OAAO,EAAE,YAAY,EAAY,MAAM,SAAS,CAAA;AAgMhD,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,MAAM,EAAE,YAAY,EAAE,EACtB,UAAU,EAAE,UAAU,EACtB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,6CAYrC"}

package/lib/sections/skills/SkillsSection.js

@@ -0,0 +1,169 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderSkillsSection = renderSkillsSection;
+var _litHtml = require("lit-html");
+var _textUtils = require("../../textUtils");
+var _SkillsEditDialog = require("./SkillsEditDialog");
+var _profileIcons = require("../../icons-svg/profileIcons");
+var _texts = require("../../texts");
+var _collapsibleSection = require("../shared/collapsibleSection");
+var _mutations = require("./mutations");
+function renderSkillItem(detail, store, subject, viewerMode, onSaved) {
+  if (!detail) return (0, _litHtml.html)``;
+  const handleRemove = async event => {
+    event.preventDefault();
+    if (viewerMode !== 'owner') return;
+    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();
+    }
+  };
+  return (0, _litHtml.html)`
+    <li class="skills__item inline-flex-row" 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>
+          ` : ''}
+    </li>
+  `;
+}
+function renderSkillsSectionDefault(store, subject, skills, viewerMode, onSaved) {
+  const hasSkills = Array.isArray(skills) && skills.length > 0;
+  const isOwner = viewerMode === 'owner';
+  return (0, _litHtml.html)`
+    <section
+      class="profile__section border-lighter profile-section-collapsible profile-section-collapsible--inline-mobile-actions"
+      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">
+          ${isOwner ? (0, _litHtml.html)`
+            <button
+              type="button"
+              class="profile__action-button profile-action-text flex-center 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>
+              <span class="profile-section-collapsible__edit-icon" aria-hidden="true">${_profileIcons.editIcon}</span>
+            </button>
+          ` : (0, _litHtml.html)``}
+          <button
+            type="button"
+            class="inline-flex-row"
+            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>
+        </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">
+                ${skills.map(detail => renderSkillItem(detail, store, subject, viewerMode, onSaved))}
+              </ul>
+            ` : (0, _litHtml.html)`<p>No skills added yet.</p>`}
+      </div>
+    </section>
+  `;
+}
+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="skills__empty-icon-wrapper">
+          <span class="skills__empty-icon inline-flex-row">${_profileIcons.lighteningIcon}</span>
+        </div>
+        <p class="profile__empty-state-message skills__empty-message">
+            No skills added yet.
+        </p>
+      </div>
+  `;
+}
+function renderOwnerEmptySkillsSection(store, subject, skills, viewerMode, onSaved) {
+  return (0, _litHtml.html)`
+    <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" 
+      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
+            type="button"
+            class="profile__action-button profile-action-text flex-center 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>
+            <span class="profile-section-collapsible__edit-icon" aria-hidden="true">${_profileIcons.editIcon}</span>
+          </button>
+          <button
+            type="button"
+            class="inline-flex-row"
+            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>
+        </div>
+      </header>
+      <div id="skills-panel" class="profile-section-collapsible__content" aria-hidden="true">
+        ${renderOwnerEmptySkillsContent(store, subject, skills, viewerMode, onSaved)}
+      </div>
+    </section>
+  `;
+}
+function renderSkillsSection(store, subject, skills, viewerMode, onSaved) {
+  const safeSkills = skills || [];
+  const hasSkills = Array.isArray(safeSkills) && safeSkills.length > 0;
+  const showOwnerEmptySkills = !hasSkills && viewerMode === 'owner';
+  const showSection = true;
+  return showSection ? (0, _litHtml.html)`
+    ${showOwnerEmptySkills ? renderOwnerEmptySkillsSection(store, subject, safeSkills, viewerMode, onSaved) : renderSkillsSectionDefault(store, subject, safeSkills, viewerMode, onSaved)}
+  ` : '';
+}

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

@@ -0,0 +1,6 @@
+import { LiveStore, NamedNode } from 'rdflib';
+import { SkillRow } from './types';
+import { MutationOps } from '../shared/types';
+export type SkillMutationPlan = MutationOps<SkillRow>;
+export declare function processSkillsMutations(store: LiveStore, subject: NamedNode, mutationPlan: SkillMutationPlan): Promise<void>;
+//# sourceMappingURL=mutations.d.ts.map

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

@@ -0,0 +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"}

package/lib/sections/skills/mutations.js

@@ -0,0 +1,110 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.processSkillsMutations = processSkillsMutations;
+var _rdflib = require("rdflib");
+var _solidUi = require("solid-ui");
+var _rdfMutationHelpers = require("../shared/rdfMutationHelpers");
+var _idNodeFactory = require("../shared/idNodeFactory");
+var _texts = require("../../texts");
+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;
+}
+function normalizeSkillPublicIdUri(publicId) {
+  const normalized = publicId.trim();
+  if (!normalized) return normalized;
+  if (normalized.startsWith('skill:')) {
+    return normalized;
+  }
+  if (normalized.startsWith(ESCO_SKILL_BASE_URI)) {
+    const suffix = normalized.slice(ESCO_SKILL_BASE_URI.length);
+    return suffix ? `skill:${suffix}` : normalized;
+  }
+  return normalized;
+}
+function normalizeNodeId(value) {
+  return value.startsWith('_:') ? value.slice(2) : value;
+}
+function collectSkillLinkStatementsByEntryValue(store, subject, doc, entryNode) {
+  const normalizedEntryNode = normalizeNodeId(entryNode);
+  return store.statementsMatching(subject, _solidUi.ns.schema('skills'), null, doc).filter(statement => {
+    const objectValue = normalizeNodeId(statement.object.value);
+    return objectValue === normalizedEntryNode || statement.object.value === 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));
+  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) {
+  ensureSkillPrefix(store);
+  const doc = subject.doc();
+  const existingSkillNodes = store.each(subject, _solidUi.ns.schema('skills'));
+  const deletions = [];
+  const insertions = [];
+  const collectLinkedPublicIdStatements = skillNode => {
+    const linkedPublicIdStatements = (0, _rdfMutationHelpers.collectLinkedNodeStatements)(store, skillNode, _solidUi.ns.solid('publicId'), doc);
+    deletions.push(...linkedPublicIdStatements.linkedStatements);
+  };
+  skillOps.remove.forEach(skill => {
+    if (!skill.entryNode) return;
+    const existingNode = (0, _rdfMutationHelpers.findExistingNode)(existingSkillNodes, skill.entryNode);
+    deletions.push(...collectSkillLinkStatementsByEntryValue(store, subject, doc, skill.entryNode));
+    if (existingNode) {
+      if (existingNode.termType !== 'Literal') {
+        deletions.push(...(0, _rdfMutationHelpers.collectNodeStatements)(store, existingNode, doc));
+        if (existingNode.termType === 'NamedNode') {
+          collectLinkedPublicIdStatements(existingNode);
+        }
+      }
+    }
+  });
+  skillOps.update.forEach(skill => {
+    if (!skill.entryNode) return;
+    const existingNode = (0, _rdfMutationHelpers.findExistingNode)(existingSkillNodes, skill.entryNode);
+    if (!existingNode) {
+      insertions.push(...buildSkillsStatements(subject, doc, (0, _idNodeFactory.createIdNode)(doc), skill));
+      return;
+    }
+    deletions.push(...collectSkillLinkStatementsByEntryValue(store, subject, doc, skill.entryNode));
+    if (existingNode.termType !== 'Literal') {
+      deletions.push(...(0, _rdfMutationHelpers.collectNodeStatements)(store, existingNode, doc));
+      if (existingNode.termType === 'NamedNode') {
+        collectLinkedPublicIdStatements(existingNode);
+      }
+    }
+    if (existingNode.termType === 'NamedNode') {
+      insertions.push(...buildSkillsStatements(subject, doc, existingNode, skill));
+      return;
+    }
+    insertions.push(...buildSkillsStatements(subject, doc, (0, _idNodeFactory.createIdNode)(doc), skill));
+  });
+  skillOps.create.forEach(skill => {
+    insertions.push(...buildSkillsStatements(subject, doc, (0, _idNodeFactory.createIdNode)(doc), skill));
+  });
+  await (0, _rdfMutationHelpers.applyUpdaterPatch)(store, deletions, insertions);
+}
+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}`);
+  }
+}

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

@@ -0,0 +1,6 @@
+import { LiveStore, NamedNode, Node, Store } from 'rdflib';
+import { SkillDetails } from './types';
+export declare function skillAsText(store: Store, sk: Node): string;
+export declare function presentSkillDetails(subject: NamedNode, store: LiveStore): SkillDetails[];
+export declare function presentSkills(subject: NamedNode, store: LiveStore): string[];
+//# sourceMappingURL=selectors.d.ts.map

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

@@ -0,0 +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"}