@startinblox/core 0.0.0

package/dist/locales/en.json

@@ -0,0 +1,10 @@
+{
+    "autocompletion.placeholder": "Select a value",
+    "autocompletion.searchPlaceholder": "Search",
+    "autocompletion.searchText": "No result",
+    "solid-delete.button": "Delete",
+    "solid-form.submit-button": "Submit",
+    "validation.message": "Please, confirm your choice",
+    "validation.submit-text": "Yes",
+    "validation.cancel-text": "Cancel"
+}

package/dist/locales/en.json.proxy.js

@@ -0,0 +1,2 @@
+let json = {"autocompletion.placeholder":"Select a value","autocompletion.searchPlaceholder":"Search","autocompletion.searchText":"No result","solid-delete.button":"Delete","solid-form.submit-button":"Submit","validation.message":"Please, confirm your choice","validation.submit-text":"Yes","validation.cancel-text":"Cancel"};
+export default json;

package/dist/locales/fr.json

@@ -0,0 +1,10 @@
+{
+    "autocompletion.placeholder": "Sélectionner une valeur",
+    "autocompletion.searchPlaceholder": "Rechercher",
+    "autocompletion.searchText": "Aucun résultat",
+    "solid-delete.button": "Supprimer",
+    "solid-form.submit-button": "Envoyer",
+    "validation.message": "Merci de confirmer votre choix",
+    "validation.submit-text": "Oui",
+    "validation.cancel-text": "Annuler"
+}

package/dist/locales/fr.json.proxy.js

@@ -0,0 +1,2 @@
+let json = {"autocompletion.placeholder":"Sélectionner une valeur","autocompletion.searchPlaceholder":"Rechercher","autocompletion.searchText":"Aucun résultat","solid-delete.button":"Supprimer","solid-form.submit-button":"Envoyer","validation.message":"Merci de confirmer votre choix","validation.submit-text":"Oui","validation.cancel-text":"Annuler"};
+export default json;

package/dist/mixins/attributeBinderMixin.js

@@ -0,0 +1,116 @@
+import { base_context, store } from '../libs/store/store.js';
+const AttributeBinderMixin = {
+  name: 'attribute-binder-mixin',
+  use: [],
+  initialState: {
+    bindedAttributes: null
+  },
+  created() {
+    this.bindedAttributes = {};
+  },
+  /**
+   * Reset attributes values
+   */
+  resetAttributesData() {
+    for (let attr of Object.keys(this.bindedAttributes)) {
+      this.element.setAttribute(attr, this.bindedAttributes[attr]);
+    }
+  },
+  /**
+   * Replace store://XXX attributes by corresponding data
+   * @param reset - set to false if no need to reset data
+   */
+  async replaceAttributesData() {
+    let reset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+    if (reset) this.resetAttributesData();
+    const oldAttributes = Array.from(this.element.attributes) // transform NamedNodeMap in object
+    .reduce((obj, attr) => {
+      // Keep only attributes starting with `store://...`
+      if (!attr.value.match(/^store:\/\/(resource|container|user)/)) return {
+        ...obj
+      };
+
+      // Save attr for reset later
+      if (!this.bindedAttributes[attr.name]) this.bindedAttributes[attr.name] = attr.value;
+      return {
+        ...obj,
+        [attr.name]: attr.value // add "key: value"
+      };
+    }, {});
+    const newAttributes = await this.transformAttributes({
+      ...oldAttributes
+    }, this.resource); // generate new attributes
+
+    for (let attr of Object.keys(newAttributes)) {
+      // set attributes on element
+      if (oldAttributes[attr] == newAttributes[attr]) continue; // only if it changed
+      this.element.setAttribute(attr, newAttributes[attr]);
+    }
+  },
+  /**
+   * Transform attributes from `store://...` to their actual value
+   * @param attributes - object representing attributes of an element
+   * @param resource - resource to use to resolve attributes
+   * @returns - object representing attributes of an element with resolved values
+   */
+  async transformAttributes(attributes, resource) {
+    const isContainer = resource && resource.isContainer?.();
+    for (let attr of Object.keys(attributes)) {
+      const value = attributes[attr];
+      // Avoid error if value is a number
+      if (typeof value === 'string') {
+        // Replace attribute value
+        if (!isContainer && resource && value.startsWith('store://resource')) {
+          // RESOURCE
+          let path = value.replace('store://resource.', '');
+          attributes[attr] = resource ? await resource[path] : '';
+        } else if (isContainer && resource && value.startsWith('store://container')) {
+          // CONTAINER
+          let path = value.replace('store://container.', '');
+          attributes[attr] = resource ? await resource[path] : '';
+        } else if (value.startsWith('store://user')) {
+          // USER
+          const userId = await this.retry(this.getUser.bind(this)); // retry until sibAuth is defined
+          const user = userId && userId['@id'] ? await store.getData(userId['@id'], this.context || base_context) : null;
+          if (!user) {
+            attributes[attr] = '';
+            continue;
+          }
+          let path = value.replace('store://user.', '');
+          attributes[attr] = user ? await user[path] : '';
+        }
+      }
+    }
+    return attributes;
+  },
+  /**
+   * Returns logged in user from sib-auth
+   * @returns userId
+   */
+  async getUser() {
+    const sibAuth = document.querySelector('sib-auth');
+    return sibAuth.getUser();
+  },
+  /**
+   * Retry [fn] for [maxRetries] times every [ms]
+   * @param fn
+   * @param ms
+   * @param maxRetries
+   * @returns
+   */
+  async retry(fn) {
+    let ms = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 200;
+    let maxRetries = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 5;
+    return new Promise((resolve, reject) => {
+      let retries = 0;
+      fn().then(resolve).catch(() => {
+        setTimeout(() => {
+          ++retries;
+          if (retries == maxRetries) return reject();
+          this.retry(fn, ms).then(resolve);
+        }, ms);
+      });
+    });
+  }
+};
+export { AttributeBinderMixin };

package/dist/mixins/contextMixin.js

@@ -0,0 +1,26 @@
+import { base_context } from '../libs/store/store.js';
+const ContextMixin = {
+  name: 'store-mixin',
+  use: [],
+  attributes: {
+    extraContext: {
+      type: String,
+      default: null
+    }
+  },
+  get context() {
+    return {
+      ...base_context,
+      ...this.extra_context
+    };
+  },
+  get extra_context() {
+    let extraContextElement = this.extraContext ? document.getElementById(this.extraContext) :
+    // take element extra context first
+    document.querySelector('[data-default-context]'); // ... or look for a default extra context
+
+    if (extraContextElement) return JSON.parse(extraContextElement.textContent || "{}");
+    return {};
+  }
+};
+export { ContextMixin };

package/dist/mixins/counterMixin.js

@@ -0,0 +1,54 @@
+import { html } from '../_snowpack/pkg/lit-html.js';
+import { unsafeHTML } from '../_snowpack/pkg/lit-html/directives/unsafe-html.js';
+import { evalTemplateString } from '../libs/helpers.js';
+const CounterMixin = {
+  name: 'counter-mixin',
+  use: [],
+  attributes: {
+    counterTemplate: {
+      type: String,
+      default: null
+    }
+  },
+  initialState: {
+    counter: null,
+    parentCounterDiv: null
+  },
+  attached() {
+    this.listPostProcessors.push(this.countResources.bind(this));
+  },
+  async countResources(resources, listPostProcessors, div, context) {
+    if (this.counterTemplate) {
+      this.initParentCounterDiv(div);
+      this.renderCallbacks.push({
+        // add counter template to render callback
+        template: await this.renderCounter(resources.length),
+        parent: this.parentCounterDiv
+      });
+    }
+    const nextProcessor = listPostProcessors.shift();
+    if (nextProcessor) await nextProcessor(resources, listPostProcessors, div, context);
+  },
+  /**
+   * Create the parent div of the counter in the component.
+   * @param div: parent div where to insert the counter div
+   */
+  initParentCounterDiv(div) {
+    if (this.parentCounterDiv) return;
+    this.parentCounterDiv = document.createElement('div');
+    this.element.insertBefore(this.parentCounterDiv, div);
+  },
+  async renderCounter(resourceNumber) {
+    let htmlCounter;
+    try {
+      htmlCounter = await evalTemplateString(this.counterTemplate, {
+        counter: resourceNumber
+      });
+    } catch (e) {
+      console.error(new Error('error in counter-template'), e);
+      throw e;
+    }
+    return html`${unsafeHTML(htmlCounter)}`;
+  }
+};
+export { CounterMixin };

package/dist/mixins/federationMixin.js

@@ -0,0 +1,51 @@
+import { store } from '../libs/store/store.js';
+const FederationMixin = {
+  name: 'federation-mixin',
+  use: [],
+  initialState: {
+    containerFetched: null
+  },
+  attached() {
+    this.listPostProcessors.push(this.fetchSources.bind(this));
+  },
+  async fetchSources(resources, listPostProcessors, div, context) {
+    this.containerFetched = [];
+    let newResources = await this.getResources(resources);
+    newResources = [...new Set(newResources)]; // remove possible duplicates
+
+    const nextProcessor = listPostProcessors.shift();
+    if (nextProcessor) await nextProcessor(newResources, listPostProcessors, div, context);
+  },
+  async getResources(resources) {
+    const newResources = [];
+    const getChildResources = async res => {
+      if (!res) return;
+      if (res.isContainer?.()) {
+        // if this is a container
+        const containerId = res['@id'];
+        if (!this.containerFetched.includes(containerId)) {
+          // prevent from including twice the same source
+          this.containerFetched.push(containerId);
+          const resourcesFetched = await this.fetchSource(containerId); // fetch the resources of this container
+          if (resourcesFetched) newResources.push(...(await this.getResources(resourcesFetched))); // Add content of source to array...
+        }
+      } else {
+        newResources.push(res); // Or resource directly if not a container
+      }
+    };
+
+    await Promise.all(resources.map(res => getChildResources(res)));
+    return newResources;
+  },
+  async fetchSource(containerId) {
+    const cachedContainer = store.get(containerId); // find container in cache
+    if (!cachedContainer || cachedContainer['ldp:contains'] === null) {
+      // if container not fetched
+      store.clearCache(containerId); // empty cache
+    }
+
+    const container = await store.getData(containerId, this.context); // and fetch it
+    return container ? container['ldp:contains'] : null;
+  }
+};
+export { FederationMixin };

package/dist/mixins/filterMixin.js

@@ -0,0 +1,155 @@
+import { searchInResources } from '../libs/filter.js';
+const FilterMixin = {
+  name: 'filter-mixin',
+  use: [],
+  initialState: {
+    searchCount: null
+  },
+  attributes: {
+    searchFields: {
+      type: String,
+      default: null
+    },
+    filteredBy: {
+      type: String,
+      default: null,
+      callback(newValue) {
+        // if we change search form, re-populate
+        if (newValue && this.searchForm && newValue !== this.searchForm.getAttribute('id')) {
+          this.searchForm.component.detach(this);
+          this.searchForm = null;
+          this.populate();
+        }
+      }
+    },
+    filteredOn: {
+      type: String,
+      // 'server' | 'client'
+      default: 'client'
+    }
+  },
+  created() {
+    this.searchCount = new Map();
+    this.element.addEventListener('populate', () => {
+      if (!window.document.contains(this.element)) return;
+      this.searchForm?.component.updateAutoRanges();
+    });
+  },
+  attached() {
+    const filteredBy = this.filteredBy;
+    if (this.isFilteredOnServer() && filteredBy) {
+      this.searchForm = document.getElementById(filteredBy);
+      if (!this.searchForm) throw `#${filteredBy} is not in DOM`;
+      // this.searchForm.component.attach(this); // is it necessary?
+      this.searchForm.addEventListener('formChange', () => this.onServerSearchChange());
+    } else {
+      this.listPostProcessors.push(this.filterCallback.bind(this));
+    }
+  },
+  get filters() {
+    return this.searchForm?.component?.value ?? {};
+  },
+  set filters(filters) {
+    if (this.searchForm?.component?.value) {
+      this.searchForm.component.value = filters;
+      this.filterList();
+    }
+  },
+  isFilteredOnServer() {
+    return this.filteredOn === 'server' && !!this.fetchData;
+  },
+  async onServerSearchChange() {
+    await this.fetchData(this.dataSrc);
+    this.empty();
+    await this.populate();
+  },
+  getDynamicServerSearch() {
+    const filters = this.filters;
+    if (this.isFilteredOnServer() && filters) {
+      const fields = Object.keys(filters);
+      const value = Object.values(filters).map(_ref => {
+        let {
+          value
+        } = _ref;
+        return value;
+      }).filter(value => !!value).join(' ').trim();
+      if (fields.length > 0 && value) {
+        return {
+          fields,
+          value
+        };
+      }
+    }
+    return;
+  },
+  async filterCallback(resources, listPostProcessors, div, context) {
+    if (this.filteredBy || this.searchFields) {
+      if (!this.searchCount.has(context)) this.searchCount.set(context, 1);
+      if (!this.searchForm) await this.createFilter(context);
+      const filteredResources = await searchInResources(resources, this.filters, this.fields, this.searchForm);
+      resources = resources.filter((_v, index) => filteredResources[index]);
+    }
+    const nextProcessor = listPostProcessors.shift();
+    if (nextProcessor) await nextProcessor(resources, listPostProcessors, div, context + (this.searchCount.get(context) || ''));
+  },
+  async filterList(context) {
+    this.searchCount.set(context, this.searchCount.get(context) + 1);
+    if (!this.resource) return;
+    this.empty();
+    await this.populate();
+  },
+  async getValuesOfField(field) {
+    const arrayOfDataObjects = this.resource['ldp:contains'];
+    const arrayOfDataIds = [];
+    for (const obj of arrayOfDataObjects) {
+      // for each element, if it's an object, catch all elements in 'ldp:contains' key
+      const nextArrayOfObjects = await obj[field];
+      if (!nextArrayOfObjects) continue;
+      if (typeof nextArrayOfObjects !== "object") {
+        console.warn(`The format value of ${field} is not suitable with auto-range-[field] attribute`);
+        continue;
+      }
+      const nextArrayOfIds = nextArrayOfObjects['ldp:contains'];
+      for (const obj of nextArrayOfIds) {
+        // catch each element id
+        arrayOfDataIds.push(obj['@id']);
+      }
+      if (nextArrayOfObjects['@type'] !== 'ldp:Container') {
+        // if no element in 'ldp:contains', catch object id
+        arrayOfDataIds.push(nextArrayOfObjects['@id']);
+      }
+    }
+    return arrayOfDataIds;
+  },
+  async createFilter(context) {
+    const filteredBy = this.filteredBy;
+    if (filteredBy != null) {
+      this.searchForm = document.getElementById(filteredBy);
+      if (!this.searchForm) throw `#${filteredBy} is not in DOM`;
+    } else {
+      this.searchForm = document.createElement(`solid-form-search`);
+    }
+    this.searchForm.component.attach(this);
+    this.searchForm.addEventListener('formChange', () => {
+      this.filterList(context);
+    });
+    this.searchForm.toggleAttribute('naked', true);
+    if (filteredBy) return;
+
+    //pass attributes to search form
+    const searchAttributes = Array.from(this.element.attributes).filter(attr => attr['name'].startsWith('search-')).map(attr => ({
+      name: attr['name'].replace('search-', ''),
+      value: attr['value']
+    }));
+    searchAttributes.forEach(_ref2 => {
+      let {
+        name,
+        value
+      } = _ref2;
+      this.searchForm.setAttribute(name, value);
+    });
+    this.element.insertBefore(this.searchForm, this.element.firstChild);
+    await this.searchForm.component.populate();
+  }
+};
+export { FilterMixin };

package/dist/mixins/grouperMixin.js

@@ -0,0 +1,73 @@
+const GrouperMixin = {
+  name: 'grouper-mixin',
+  use: [],
+  attributes: {
+    groupBy: {
+      type: String,
+      default: null
+    },
+    groupWidget: {
+      type: String,
+      default: 'solid-group-default'
+    },
+    groupClass: {
+      type: String,
+      default: ''
+    }
+  },
+  attached() {
+    this.listPostProcessors.push(this.groupResources.bind(this));
+  },
+  async groupResources(resources, listPostProcessors, div, context) {
+    const nextProcessor = listPostProcessors.shift();
+    if (this.groupBy) {
+      let groups = {};
+      for (let resource of resources) {
+        const valueGroup = await resource[this.groupBy];
+        if (valueGroup == null) continue;
+        if (!groups[valueGroup]) groups[valueGroup] = {
+          resources: []
+        }; // if no group yet, we create one...
+        groups[valueGroup].resources.push(resource); // ...and push corresponding resource into it
+      }
+
+      // For each group, get group widget and call next processors
+      const parents = Object.keys(groups).map(g => ({
+        group: g,
+        parent: this.renderGroup(g, div)
+      }));
+      for (let {
+        group,
+        parent
+      } of parents) {
+        if (nextProcessor) await nextProcessor(groups[group].resources,
+        // give only resources from group
+        [...listPostProcessors],
+        // copy post processors
+        parent,
+        // parent is group widget
+        context + "_" + group);
+      }
+    } else {
+      if (nextProcessor) await nextProcessor(resources, listPostProcessors, div, context);
+    }
+  },
+  /**
+   * Create a group widget or find if it already exists
+   * @param groupName
+   */
+  renderGroup(groupName, div) {
+    let groupElt = this.element.querySelector(`${this.groupWidget}[value="${groupName}"]`);
+    if (!groupElt) {
+      groupElt = document.createElement(this.groupWidget);
+      groupElt.setAttribute('value', groupName);
+      if (this.groupClass) groupElt.setAttribute('class', this.groupClass);
+      if (groupElt.component) groupElt.component.render(); // Force the rendering of the widget
+      div.appendChild(groupElt); // and append it to the parent div
+    }
+
+    return groupElt.querySelector('[data-content]') || groupElt; // return the node where to insert content
+  }
+};
+
+export { GrouperMixin };

package/dist/mixins/highlighterMixin.js

@@ -0,0 +1,36 @@
+const HighlighterMixin = {
+  name: 'highlighter-mixin',
+  use: [],
+  attached() {
+    this.listPostProcessors.push(this.hightlightCallback.bind(this));
+  },
+  async hightlightCallback(resources, listPostProcessors, div, context) {
+    for (let attr of this.element.attributes) {
+      if (attr.name.startsWith('highlight-')) {
+        const field = attr.name.split('highlight-')[1];
+        resources = await Promise.all(resources.map(async resource => ({
+          sortingKey: await resource[field],
+          // fetch sorting value
+          proxy: resource // and keep proxy
+        })));
+
+        resources = this.sortHighlighted(resources, "sortingKey", attr.value); // highlight element
+        resources = resources.map(resource => resource.proxy); // and re-transform in arra of resources
+      }
+    }
+
+    const nextProcessor = listPostProcessors.shift();
+    if (nextProcessor) await nextProcessor(resources, listPostProcessors, div, context);
+  },
+  sortHighlighted(resources, field, value) {
+    for (let [index, res] of resources.entries()) {
+      if (res[field] && res[field] == value) {
+        // put the current element at the beginning of the array
+        resources.splice(0, 0, resources.splice(index, 1)[0]); // TODO : test with sort
+      }
+    }
+
+    return resources;
+  }
+};
+export { HighlighterMixin };

package/dist/mixins/interfaces.js

@@ -0,0 +1,6 @@
+export let WidgetType = /*#__PURE__*/function (WidgetType) {
+  WidgetType["CUSTOM"] = "custom";
+  WidgetType["USER"] = "user";
+  WidgetType["NATIVE"] = "native";
+  return WidgetType;
+}({});

package/dist/mixins/listMixin.js

@@ -0,0 +1,105 @@
+import { html, render } from '../_snowpack/pkg/lit-html.js';
+import { preHTML } from '../libs/lit-helpers.js';
+import { ifDefined } from '../_snowpack/pkg/lit-html/directives/if-defined.js';
+const ListMixin = {
+  name: 'list-mixin',
+  use: [],
+  attributes: {
+    emptyWidget: {
+      type: String,
+      default: null
+    },
+    emptyValue: {
+      type: String,
+      default: ''
+    }
+  },
+  initialState: {
+    // Processors functions to execute on the list before rendering
+    listPostProcessors: [],
+    // Rendering to execute after all the processors have been executed
+    renderCallbacks: []
+  },
+  created() {
+    this.listPostProcessors = [];
+    this.renderCallbacks = [];
+  },
+  appendSingleElt(parent) {
+    this.appendChildElt(this.resource['@id'], parent);
+  },
+  setElementAttribute(attr) {
+    const containerAttribute = "solid-container";
+    const resourceAttribute = "solid-resource";
+    if (attr === "resource") {
+      this.element.removeAttribute(containerAttribute);
+      this.element.setAttribute(resourceAttribute, "");
+    } else {
+      this.element.removeAttribute(resourceAttribute);
+      this.element.setAttribute(containerAttribute, "");
+    }
+  },
+  async populate() {
+    const div = this.div;
+    if (!this.resource) return;
+
+    // Not a container but a single resource
+    if (!this.resource.isContainer?.()) {
+      this.setElementAttribute("resource");
+      this.appendSingleElt(div);
+      return;
+    }
+    this.setElementAttribute("container");
+    const listPostProcessors = [...this.listPostProcessors];
+    this.renderCallbacks = [];
+    listPostProcessors.push(this.renderDOM.bind(this));
+    listPostProcessors.push(this.handleEmptyWidget.bind(this));
+
+    // Execute the first post-processor of the list
+    const nextProcessor = listPostProcessors.shift();
+    await nextProcessor(this.resource['ldp:contains'], listPostProcessors, div, this.dataSrc);
+
+    // Execute the render callbacks
+    for (const renderCallback of this.renderCallbacks) {
+      // Render the template in the given parent element
+      render(renderCallback.template, renderCallback.parent);
+    }
+  },
+  /**
+   * Render resources in the DOM
+   * @param resources
+   * @param listPostProcessors
+   * @param div
+   * @param context
+   */
+  async renderDOM(resources, listPostProcessors, div, context) {
+    // Create child components
+    for (let resource of resources) {
+      if (!resource) continue;
+      this.appendChildElt(resource['@id'], div);
+    }
+    const nextProcessor = listPostProcessors.shift();
+    if (nextProcessor) await nextProcessor(resources, listPostProcessors, div, context);
+  },
+  /**
+   * Show empty widget if no resources in the list
+   * @param resources
+   * @param listPostProcessors
+   * @param div
+   * @param context
+   */
+  async handleEmptyWidget(resources, listPostProcessors, div, context) {
+    if (this.emptyWidget) {
+      const emptyWidgetTemplate = preHTML`
+        <${this.emptyWidget} value=${ifDefined(this.emptyValue)}></${this.emptyWidget}>
+      `;
+      if (!this.emptyWrapper) {
+        this.emptyWrapper = document.createElement('span');
+        this.element.appendChild(this.emptyWrapper);
+      }
+      render(resources.length > 0 ? html`` : emptyWidgetTemplate, this.emptyWrapper);
+    }
+    const nextProcessor = listPostProcessors.shift();
+    if (nextProcessor) await nextProcessor(resources, listPostProcessors, div, context);
+  }
+};
+export { ListMixin };

package/dist/mixins/nextMixin.js

@@ -0,0 +1,23 @@
+const NextMixin = {
+  name: 'next-mixin',
+  use: [],
+  attributes: {
+    next: {
+      type: String,
+      default: ''
+    }
+  },
+  // Here "even.target" points to the content of the widgets of the children of solid-display
+  goToNext(resource) {
+    if (this.next) {
+      this.element.dispatchEvent(new CustomEvent('requestNavigation', {
+        bubbles: true,
+        detail: {
+          route: this.next,
+          resource: resource
+        }
+      }));
+    }
+  }
+};
+export { NextMixin };