@startinblox/core 0.19.0-beta.1 → 0.19.0-beta.10

package/dist/mixins/attributeBinderMixin.js

@@ -1,113 +0,0 @@
-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(reset = 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, ms = 200, maxRetries = 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

@@ -1,26 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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) {
-    if (!resources) return [];
-    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 if (!res.isArray?.()) {
-        const resource = await store.getData(res['@id'], this.context);
-        if (resource) newResources.push(resource);
-      } else {
-        newResources.push(res); // Or resource directly if not a container
-      }
-    };
-
-    // Special case for list support, if there is only one item it is serialized as an object, not an array
-    if (!Array.isArray(resources)) resources = [resources];
-    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

@@ -1,152 +0,0 @@
-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(({
-        value
-      }) => 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;
-      }
-      if (nextArrayOfObjects['@type'] !== 'ldp:Container') {
-        // if no element in 'ldp:contains', catch object id
-        arrayOfDataIds.push(nextArrayOfObjects['@id']);
-      } else {
-        if (!nextArrayOfObjects['ldp:contains']) continue;
-        for (const obj of nextArrayOfObjects['ldp:contains']) {
-          // catch each element id
-          arrayOfDataIds.push(obj['@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(({
-      name,
-      value
-    }) => {
-      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

@@ -1,73 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

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

package/dist/mixins/listMixin.js

@@ -1,116 +0,0 @@
-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.arrayField && !this.predicateName) {
-      this.setElementAttribute("resource");
-      this.appendSingleElt(div);
-      return;
-    }
-    if (this.resource.isContainer?.()) {
-      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);
-    } else if (this.arrayField && this.predicateName && this.resource[this.predicateName]) {
-      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(await this.resource[this.predicateName], 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

@@ -1,23 +0,0 @@
-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 };