@startinblox/core 0.17.22 → 0.17.25

package/dist/mixins/filterMixin.js

@@ -0,0 +1,195 @@
+import { compare, parseFieldsString } from '../libs/helpers.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();
+        }
+      }
+
+    }
+  },
+
+  created() {
+    this.searchCount = new Map();
+    this.element.addEventListener('populate', () => {
+      var _this$searchForm;
+
+      if (!window.document.contains(this.element)) return;
+      (_this$searchForm = this.searchForm) === null || _this$searchForm === void 0 ? void 0 : _this$searchForm.component.updateAutoRanges();
+    });
+  },
+
+  attached() {
+    this.listPostProcessors.push(this.filterCallback.bind(this));
+  },
+
+  get filters() {
+    var _this$searchForm$comp, _this$searchForm2;
+
+    return (_this$searchForm$comp = (_this$searchForm2 = this.searchForm) === null || _this$searchForm2 === void 0 ? void 0 : _this$searchForm2.component.value) !== null && _this$searchForm$comp !== void 0 ? _this$searchForm$comp : {};
+  },
+
+  set filters(filters) {
+    this.searchForm.component.value = filters;
+    this.filterList();
+  },
+
+  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 Promise.all(resources.map(this.matchFilters.bind(this)));
+      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 matchValue(subject, query) {
+    var _subject$isContainer;
+
+    if (subject == null && query.value === '') return true; // filter not set and subject not existing -> ignore filter
+
+    if (subject == null) return false; // property does not exist on resource
+    // Filter on a container
+
+    if (query.list) {
+      if (query.value.length === 0) return true;
+
+      for (const v of query.value) {
+        const q = {
+          type: query.type,
+          value: v
+        };
+        if (await this.matchValue(subject, q)) return true;
+      }
+
+      return false;
+    }
+
+    if ((_subject$isContainer = subject.isContainer) !== null && _subject$isContainer !== void 0 && _subject$isContainer.call(subject)) {
+      let ret = Promise.resolve(query.value === ''); // if no query, return a match
+
+      for (const value of subject['ldp:contains']) {
+        ret = (await ret) || (await this.matchValue(value, query));
+      }
+
+      return ret;
+    }
+
+    return compare[query.type](subject, query.value);
+  },
+
+  async matchFilter(resource, filter, query) {
+    let fields = [];
+    if (this.isSet(filter)) fields = this.getSet(filter);else if (this.isSearchField(filter)) fields = this.getSearchField(filter); // search on 1 field
+
+    if (fields.length == 0) return this.matchValue(await resource[filter], query); // search on multiple fields
+
+    return fields.reduce( // return true if it matches at least one of the fields
+    async (initial, field) => (await initial) || (await this.matchFilter(resource, field, query)), Promise.resolve(false));
+  },
+
+  async matchFilters(resource) {
+    //return true if all filters values are contained in the corresponding field of the resource
+    return Object.keys(this.filters).reduce(async (initial, filter) => (await initial) && (await this.matchFilter(resource, filter, this.filters[filter])), Promise.resolve(true));
+  },
+
+  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 ".concat(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 "#".concat(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();
+  },
+
+  // Search fields
+  isSearchField(field) {
+    return this.searchForm.hasAttribute('search-' + field);
+  },
+
+  getSearchField(field) {
+    return parseFieldsString(this.searchForm.getAttribute('search-' + field));
+  }
+
+};
+export { FilterMixin };
+//# sourceMappingURL=filterMixin.js.map

package/dist/mixins/filterMixin.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["filterMixin.ts"],"names":["compare","parseFieldsString","FilterMixin","name","use","initialState","searchCount","attributes","searchFields","type","String","default","filteredBy","callback","newValue","searchForm","getAttribute","component","detach","populate","created","Map","element","addEventListener","window","document","contains","updateAutoRanges","attached","listPostProcessors","push","filterCallback","bind","filters","value","filterList","resources","div","context","has","set","createFilter","filteredResources","Promise","all","map","matchFilters","filter","_v","index","nextProcessor","shift","get","resource","empty","matchValue","subject","query","list","length","v","q","isContainer","ret","resolve","matchFilter","fields","isSet","getSet","isSearchField","getSearchField","reduce","initial","field","Object","keys","getValuesOfField","arrayOfDataObjects","arrayOfDataIds","obj","nextArrayOfObjects","console","warn","nextArrayOfIds","getElementById","createElement","attach","toggleAttribute","searchAttributes","Array","from","attr","startsWith","replace","forEach","setAttribute","insertBefore","firstChild","hasAttribute"],"mappings":"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","sourcesContent":["import { compare, parseFieldsString } from '../libs/helpers';\n\nconst FilterMixin = {\n  name: 'filter-mixin',\n  use: [],\n  initialState: {\n    searchCount: null,\n  },\n  attributes: {\n    searchFields: {\n      type: String,\n      default: null\n    },\n    filteredBy: {\n      type: String,\n      default: null,\n      callback(newValue: string) {\n        // if we change search form, re-populate\n        if (newValue && this.searchForm && newValue !== this.searchForm.getAttribute('id')) {\n          this.searchForm.component.detach(this);\n          this.searchForm = null;\n          this.populate();\n        }\n      }\n    }\n  },\n  created() {\n    this.searchCount = new Map();\n    this.element.addEventListener('populate', () => {\n      if (!window.document.contains(this.element)) return;\n      this.searchForm?.component.updateAutoRanges();\n    })\n  },\n  attached(): void {\n    this.listPostProcessors.push(this.filterCallback.bind(this));\n  },\n  get filters(): object {\n    return this.searchForm?.component.value ?? {};\n  },\n  set filters(filters) {\n    this.searchForm.component.value = filters;\n    this.filterList();\n  },\n  async filterCallback(resources: object[], listPostProcessors: Function[], div: HTMLElement, context: string): Promise<void> {\n    if (this.filteredBy || this.searchFields) {\n      if (!this.searchCount.has(context)) this.searchCount.set(context, 1);\n      if (!this.searchForm) await this.createFilter(context);\n      const filteredResources = await Promise.all(resources.map(this.matchFilters.bind(this)));\n      resources =\tresources.filter((_v, index) => filteredResources[index]);\n    }\n\n    const nextProcessor = listPostProcessors.shift();\n    if(nextProcessor) await nextProcessor(resources, listPostProcessors, div, context + (this.searchCount.get(context) || ''));\n  },\n  async filterList(context: string): Promise<void> {\n    this.searchCount.set(context, this.searchCount.get(context) + 1);\n    if (!this.resource) return;\n    this.empty();\n    await this.populate();\n  },\n  async matchValue(subject, query): Promise<boolean> {\n    if (subject == null && query.value === '') return true; // filter not set and subject not existing -> ignore filter\n    if (subject == null) return false; // property does not exist on resource\n    // Filter on a container\n    if (query.list) {\n      if(query.value.length === 0) return true;\n      for(const v of query.value) {\n        const q = {\n          type: query.type,\n          value: v,\n        }\n        if(await this.matchValue(subject, q)) return true;\n      }\n      return false;\n    }\n    if (subject.isContainer?.()) {\n      let ret = Promise.resolve(query.value === ''); // if no query, return a match\n      for (const value of subject['ldp:contains']) {\n        ret = await ret || await this.matchValue(value, query)\n      }\n      return ret;\n    }\n    return compare[query.type](subject, query.value);\n  },\n  async matchFilter(resource: object, filter: string, query: any): Promise<boolean> {\n    let fields: string[] = [];\n    if (this.isSet(filter)) fields = this.getSet(filter);\n    else if (this.isSearchField(filter)) fields = this.getSearchField(filter);\n\n    // search on 1 field\n    if (fields.length == 0)\n      return this.matchValue(await resource[filter], query);\n\n    // search on multiple fields\n    return fields.reduce( // return true if it matches at least one of the fields\n      async (initial, field) => await initial || await this.matchFilter(resource, field, query),\n      Promise.resolve(false),\n    );\n  },\n  async matchFilters(resource: object): Promise<boolean> {\n    //return true if all filters values are contained in the corresponding field of the resource\n    return Object.keys(this.filters).reduce(\n      async (initial, filter) =>\n        await initial && await this.matchFilter(resource, filter, this.filters[filter]),\n      Promise.resolve(true)\n    );\n  },\n  async getValuesOfField(field: string) {\n    const arrayOfDataObjects = this.resource['ldp:contains'];\n    const arrayOfDataIds: string[] = [];\n    for (const obj of arrayOfDataObjects) {\n      // for each element, if it's an object, catch all elements in 'ldp:contains' key\n      const nextArrayOfObjects = await obj[field];\n      if (!nextArrayOfObjects) continue;\n\n      if (typeof nextArrayOfObjects !== \"object\") {\n        console.warn(`The format value of ${field} is not suitable with auto-range-[field] attribute`);\n        continue;\n      }\n\n      const nextArrayOfIds = nextArrayOfObjects['ldp:contains'];\n      for (const obj of nextArrayOfIds) {\n        // catch each element id\n        arrayOfDataIds.push(obj['@id']);\n      }\n      if (nextArrayOfObjects['@type'] !== 'ldp:Container') {\n        // if no element in 'ldp:contains', catch object id\n        arrayOfDataIds.push(nextArrayOfObjects['@id']);\n      }\n    }\n    return arrayOfDataIds;\n  },\n  async createFilter(context: string): Promise<void> {\n    const filteredBy = this.filteredBy;\n    if (filteredBy != null) {\n      this.searchForm = document.getElementById(filteredBy)\n      if (!this.searchForm) throw `#${filteredBy} is not in DOM`;\n    } else {\n      this.searchForm = document.createElement(`solid-form-search`);\n    }\n    this.searchForm.component.attach(this);\n    this.searchForm.addEventListener('formChange', () => {\n      this.filterList(context);\n    });\n    this.searchForm.toggleAttribute('naked', true);\n\n    if (filteredBy) return;\n\n    //pass attributes to search form\n    const searchAttributes = Array.from((this.element as Element).attributes)\n    .filter(attr => attr['name'].startsWith('search-'))\n    .map(attr => ({\n      name: attr['name'].replace('search-', ''),\n      value: attr['value'],\n    }));\n\n    searchAttributes.forEach(({name, value}) => {\n      this.searchForm.setAttribute(name, value);\n    });\n\n    this.element.insertBefore(this.searchForm, this.element.firstChild);\n    await this.searchForm.component.populate();\n  },\n  // Search fields\n  isSearchField(field: string) {\n    return this.searchForm.hasAttribute('search-' + field);\n  },\n  getSearchField(field: string): string[] {\n    return parseFieldsString(this.searchForm.getAttribute('search-' + field));\n  },\n}\n\nexport {\n  FilterMixin\n}"]}

package/dist/mixins/grouperMixin.js

@@ -0,0 +1,80 @@
+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("".concat(this.groupWidget, "[value=\"").concat(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 };
+//# sourceMappingURL=grouperMixin.js.map

package/dist/mixins/grouperMixin.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["grouperMixin.ts"],"names":["GrouperMixin","name","use","attributes","groupBy","type","String","default","groupWidget","groupClass","attached","listPostProcessors","push","groupResources","bind","resources","div","context","nextProcessor","shift","groups","resource","valueGroup","parents","Object","keys","map","g","group","parent","renderGroup","groupName","groupElt","element","querySelector","document","createElement","setAttribute","component","render","appendChild"],"mappings":"AAAA,MAAMA,YAAY,GAAG;AACnBC,EAAAA,IAAI,EAAE,eADa;AAEnBC,EAAAA,GAAG,EAAE,EAFc;AAGnBC,EAAAA,UAAU,EAAE;AACVC,IAAAA,OAAO,EAAE;AACPC,MAAAA,IAAI,EAAEC,MADC;AAEPC,MAAAA,OAAO,EAAE;AAFF,KADC;AAKVC,IAAAA,WAAW,EAAE;AACXH,MAAAA,IAAI,EAAEC,MADK;AAEXC,MAAAA,OAAO,EAAE;AAFE,KALH;AASVE,IAAAA,UAAU,EAAE;AACVJ,MAAAA,IAAI,EAAEC,MADI;AAEVC,MAAAA,OAAO,EAAE;AAFC;AATF,GAHO;;AAiBnBG,EAAAA,QAAQ,GAAG;AACT,SAAKC,kBAAL,CAAwBC,IAAxB,CAA6B,KAAKC,cAAL,CAAoBC,IAApB,CAAyB,IAAzB,CAA7B;AACD,GAnBkB;;AAoBnB,QAAMD,cAAN,CAAqBE,SAArB,EAA0CJ,kBAA1C,EAA0EK,GAA1E,EAA4FC,OAA5F,EAA6G;AAC3G,UAAMC,aAAa,GAAGP,kBAAkB,CAACQ,KAAnB,EAAtB;;AACA,QAAI,KAAKf,OAAT,EAAkB;AAChB,UAAIgB,MAAM,GAAG,EAAb;;AACA,WAAK,IAAIC,QAAT,IAAqBN,SAArB,EAAgC;AAC9B,cAAMO,UAAU,GAAG,MAAMD,QAAQ,CAAC,KAAKjB,OAAN,CAAjC;AACA,YAAIkB,UAAU,IAAI,IAAlB,EAAwB;AACxB,YAAI,CAACF,MAAM,CAACE,UAAD,CAAX,EAAyBF,MAAM,CAACE,UAAD,CAAN,GAAqB;AAAEP,UAAAA,SAAS,EAAE;AAAb,SAArB,CAHK,CAGmC;;AACjEK,QAAAA,MAAM,CAACE,UAAD,CAAN,CAAmBP,SAAnB,CAA6BH,IAA7B,CAAkCS,QAAlC,EAJ8B,CAIc;AAC7C,OAPe,CAShB;;;AACA,YAAME,OAAO,GAAGC,MAAM,CAACC,IAAP,CAAYL,MAAZ,EAAoBM,GAApB,CAAwBC,CAAC,KAAK;AAAEC,QAAAA,KAAK,EAAED,CAAT;AAAYE,QAAAA,MAAM,EAAE,KAAKC,WAAL,CAAiBH,CAAjB,EAAoBX,GAApB;AAApB,OAAL,CAAzB,CAAhB;;AACA,WAAK,IAAI;AAAEY,QAAAA,KAAF;AAASC,QAAAA;AAAT,OAAT,IAA8BN,OAA9B,EAAuC;AACrC,YAAIL,aAAJ,EAAmB,MAAMA,aAAa,CACpCE,MAAM,CAACQ,KAAD,CAAN,CAAcb,SADsB,EACX;AACzB,SAAC,GAAGJ,kBAAJ,CAFoC,EAEX;AACzBkB,QAAAA,MAHoC,EAG5B;AACRZ,QAAAA,OAAO,GAAG,GAAV,GAAgBW,KAJoB,CAAnB;AAMpB;AACF,KAnBD,MAmBO;AACL,UAAIV,aAAJ,EAAmB,MAAMA,aAAa,CACpCH,SADoC,EAEpCJ,kBAFoC,EAGpCK,GAHoC,EAIpCC,OAJoC,CAAnB;AAMpB;AACF,GAjDkB;;AAkDnB;AACF;AACA;AACA;AACEa,EAAAA,WAAW,CAACC,SAAD,EAAoBf,GAApB,EAAsC;AAC/C,QAAIgB,QAAQ,GAAG,KAAKC,OAAL,CAAaC,aAAb,WAA8B,KAAK1B,WAAnC,sBAAyDuB,SAAzD,SAAf;;AACA,QAAI,CAACC,QAAL,EAAe;AACbA,MAAAA,QAAQ,GAAGG,QAAQ,CAACC,aAAT,CAAuB,KAAK5B,WAA5B,CAAX;AACAwB,MAAAA,QAAQ,CAACK,YAAT,CAAsB,OAAtB,EAA+BN,SAA/B;AACA,UAAI,KAAKtB,UAAT,EAAqBuB,QAAQ,CAACK,YAAT,CAAsB,OAAtB,EAA+B,KAAK5B,UAApC;AACrB,UAAIuB,QAAQ,CAACM,SAAb,EAAwBN,QAAQ,CAACM,SAAT,CAAmBC,MAAnB,GAJX,CAIwC;;AACrDvB,MAAAA,GAAG,CAACwB,WAAJ,CAAgBR,QAAhB,EALa,CAKc;AAC5B;;AACD,WAAOA,QAAQ,CAACE,aAAT,CAAuB,gBAAvB,KAA4CF,QAAnD,CAT+C,CASc;AAC9D;;AAhEkB,CAArB;AAmEA,SACEhC,YADF","sourcesContent":["const GrouperMixin = {\n  name: 'grouper-mixin',\n  use: [],\n  attributes: {\n    groupBy: {\n      type: String,\n      default: null,\n    },\n    groupWidget: {\n      type: String,\n      default: 'solid-group-default'\n    },\n    groupClass: {\n      type: String,\n      default: ''\n    }\n  },\n  attached() {\n    this.listPostProcessors.push(this.groupResources.bind(this));\n  },\n  async groupResources(resources: object[], listPostProcessors: Function[], div: HTMLElement, context: string) {\n    const nextProcessor = listPostProcessors.shift();\n    if (this.groupBy) {\n      let groups = {};\n      for (let resource of resources) {\n        const valueGroup = await resource[this.groupBy];\n        if (valueGroup == null) continue;\n        if (!groups[valueGroup]) groups[valueGroup] = { resources: [] }; // if no group yet, we create one...\n        groups[valueGroup].resources.push(resource) // ...and push corresponding resource into it\n      }\n\n      // For each group, get group widget and call next processors\n      const parents = Object.keys(groups).map(g => ({ group: g, parent: this.renderGroup(g, div) }));\n      for (let { group, parent } of parents) {\n        if (nextProcessor) await nextProcessor(\n          groups[group].resources, // give only resources from group\n          [...listPostProcessors], // copy post processors\n          parent, // parent is group widget\n          context + \"_\" + group\n        );\n      }\n    } else {\n      if (nextProcessor) await nextProcessor(\n        resources,\n        listPostProcessors,\n        div,\n        context\n      );\n    }\n  },\n  /**\n   * Create a group widget or find if it already exists\n   * @param groupName\n   */\n  renderGroup(groupName: string, div: HTMLElement) {\n    let groupElt = this.element.querySelector(`${this.groupWidget}[value=\"${groupName}\"]`);\n    if (!groupElt) {\n      groupElt = document.createElement(this.groupWidget);\n      groupElt.setAttribute('value', groupName);\n      if (this.groupClass) groupElt.setAttribute('class', this.groupClass);\n      if (groupElt.component) groupElt.component.render(); // Force the rendering of the widget\n      div.appendChild(groupElt); // and append it to the parent div\n    }\n    return groupElt.querySelector('[data-content]') || groupElt; // return the node where to insert content\n  }\n}\n\nexport {\n  GrouperMixin\n}"]}

package/dist/mixins/highlighterMixin.js

@@ -0,0 +1,42 @@
+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 };
+//# sourceMappingURL=highlighterMixin.js.map

package/dist/mixins/highlighterMixin.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["highlighterMixin.ts"],"names":["HighlighterMixin","name","use","attached","listPostProcessors","push","hightlightCallback","bind","resources","div","context","attr","element","attributes","startsWith","field","split","Promise","all","map","resource","sortingKey","proxy","sortHighlighted","value","nextProcessor","shift","index","res","entries","splice"],"mappings":"AAAA,MAAMA,gBAAgB,GAAG;AACvBC,EAAAA,IAAI,EAAE,mBADiB;AAEvBC,EAAAA,GAAG,EAAE,EAFkB;;AAGvBC,EAAAA,QAAQ,GAAS;AACf,SAAKC,kBAAL,CAAwBC,IAAxB,CAA6B,KAAKC,kBAAL,CAAwBC,IAAxB,CAA6B,IAA7B,CAA7B;AACD,GALsB;;AAMvB,QAAMD,kBAAN,CAAyBE,SAAzB,EAA8CJ,kBAA9C,EAA8EK,GAA9E,EAAgGC,OAAhG,EAAgI;AAC9H,SAAK,IAAIC,IAAT,IAAiB,KAAKC,OAAL,CAAaC,UAA9B,EAA0C;AACxC,UAAIF,IAAI,CAACV,IAAL,CAAUa,UAAV,CAAqB,YAArB,CAAJ,EAAwC;AACtC,cAAMC,KAAK,GAAGJ,IAAI,CAACV,IAAL,CAAUe,KAAV,CAAgB,YAAhB,EAA8B,CAA9B,CAAd;AACAR,QAAAA,SAAS,GAAG,MAAMS,OAAO,CAACC,GAAR,CAAYV,SAAS,CAACW,GAAV,CAAc,MAAOC,QAAP,KAAqB;AAC/DC,UAAAA,UAAU,EAAE,MAAMD,QAAQ,CAACL,KAAD,CADqC;AAC5B;AACnCO,UAAAA,KAAK,EAAEF,QAFwD,CAE/C;;AAF+C,SAArB,CAAd,CAAZ,CAAlB;AAIAZ,QAAAA,SAAS,GAAG,KAAKe,eAAL,CAAqBf,SAArB,EAAgC,YAAhC,EAA8CG,IAAI,CAACa,KAAnD,CAAZ,CANsC,CAMiC;;AACvEhB,QAAAA,SAAS,GAAGA,SAAS,CAACW,GAAV,CAAcC,QAAQ,IAAUA,QAAN,CAAgBE,KAA1C,CAAZ,CAPsC,CAOwB;AAC/D;AACF;;AAED,UAAMG,aAAa,GAAGrB,kBAAkB,CAACsB,KAAnB,EAAtB;AACA,QAAID,aAAJ,EAAmB,MAAMA,aAAa,CAACjB,SAAD,EAAYJ,kBAAZ,EAAgCK,GAAhC,EAAqCC,OAArC,CAAnB;AACpB,GArBsB;;AAuBvBa,EAAAA,eAAe,CAACf,SAAD,EAAYO,KAAZ,EAAmBS,KAAnB,EAA0B;AACvC,SAAK,IAAI,CAACG,KAAD,EAAQC,GAAR,CAAT,IAAyBpB,SAAS,CAACqB,OAAV,EAAzB,EAA8C;AAC5C,UAAID,GAAG,CAACb,KAAD,CAAH,IAAca,GAAG,CAACb,KAAD,CAAH,IAAcS,KAAhC,EAAuC;AACrC;AACAhB,QAAAA,SAAS,CAACsB,MAAV,CAAiB,CAAjB,EAAoB,CAApB,EAAuBtB,SAAS,CAACsB,MAAV,CAAiBH,KAAjB,EAAwB,CAAxB,EAA2B,CAA3B,CAAvB,EAFqC,CAEkB;AACxD;AACF;;AACD,WAAOnB,SAAP;AACD;;AA/BsB,CAAzB;AAkCA,SACER,gBADF","sourcesContent":["const HighlighterMixin = {\n  name: 'highlighter-mixin',\n  use: [],\n  attached(): void {\n    this.listPostProcessors.push(this.hightlightCallback.bind(this));\n  },\n  async hightlightCallback(resources: object[], listPostProcessors: Function[], div: HTMLElement, context: string): Promise<void> {\n    for (let attr of this.element.attributes) {\n      if (attr.name.startsWith('highlight-')) {\n        const field = attr.name.split('highlight-')[1];\n        resources = await Promise.all(resources.map(async (resource) => ({\n          sortingKey: await resource[field], // fetch sorting value\n          proxy: resource // and keep proxy\n        })));\n        resources = this.sortHighlighted(resources, \"sortingKey\", attr.value); // highlight element\n        resources = resources.map(resource => (<any>resource).proxy); // and re-transform in arra of resources\n      }\n    }\n\n    const nextProcessor = listPostProcessors.shift();\n    if (nextProcessor) await nextProcessor(resources, listPostProcessors, div, context);\n  },\n\n  sortHighlighted(resources, field, value) {\n    for (let [index, res] of resources.entries()) {\n      if (res[field] && res[field] == value) {\n        // put the current element at the beginning of the array\n        resources.splice(0, 0, resources.splice(index, 1)[0]); // TODO : test with sort\n      }\n    }\n    return resources\n  }\n}\n\nexport {\n  HighlighterMixin\n}"]}

package/dist/mixins/interfaces.js

@@ -0,0 +1,8 @@
+export let WidgetType;
+
+(function (WidgetType) {
+  WidgetType["CUSTOM"] = "custom";
+  WidgetType["USER"] = "user";
+  WidgetType["NATIVE"] = "native";
+})(WidgetType || (WidgetType = {}));
+//# sourceMappingURL=interfaces.js.map

package/dist/mixins/interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["interfaces.ts"],"names":["WidgetType"],"mappings":"AAAA,WAAYA,UAAZ;;WAAYA,U;AAAAA,EAAAA,U;AAAAA,EAAAA,U;AAAAA,EAAAA,U;GAAAA,U,KAAAA,U","sourcesContent":["export enum WidgetType {\n  CUSTOM = \"custom\",\n  USER = \"user\",\n  NATIVE = \"native\",\n}\n\nexport interface WidgetInterface {\n  tagName: String\n  type: WidgetType\n}\n\nexport interface Resource {\n  '@id': string\n  clientContext: object\n  isContainer: Function\n  isFullResource: Function\n  properties: string[]\n}"]}

package/dist/mixins/listMixin.js

@@ -0,0 +1,136 @@
+function _templateObject2() {
+  const data = _taggedTemplateLiteral([""]);
+
+  _templateObject2 = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject() {
+  const data = _taggedTemplateLiteral(["\n        <", " value=", "></", ">\n      "]);
+
+  _templateObject = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+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(_templateObject(), this.emptyWidget, ifDefined(this.emptyValue), this.emptyWidget);
+
+      if (!this.emptyWrapper) {
+        this.emptyWrapper = document.createElement('span');
+        this.element.appendChild(this.emptyWrapper);
+      }
+
+      render(resources.length > 0 ? html(_templateObject2()) : emptyWidgetTemplate, this.emptyWrapper);
+    }
+
+    const nextProcessor = listPostProcessors.shift();
+    if (nextProcessor) await nextProcessor(resources, listPostProcessors, div, context);
+  }
+
+};
+export { ListMixin };
+//# sourceMappingURL=listMixin.js.map

package/dist/mixins/listMixin.js.map

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

package/dist/mixins/nextMixin.js

@@ -0,0 +1,26 @@
+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 };
+//# sourceMappingURL=nextMixin.js.map

package/dist/mixins/nextMixin.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["nextMixin.ts"],"names":["NextMixin","name","use","attributes","next","type","String","default","goToNext","resource","element","dispatchEvent","CustomEvent","bubbles","detail","route"],"mappings":"AAEA,MAAMA,SAAS,GAAG;AAChBC,EAAAA,IAAI,EAAE,YADU;AAEhBC,EAAAA,GAAG,EAAE,EAFW;AAGhBC,EAAAA,UAAU,EAAE;AACVC,IAAAA,IAAI,EAAE;AACJC,MAAAA,IAAI,EAAEC,MADF;AAEJC,MAAAA,OAAO,EAAC;AAFJ;AADI,GAHI;;AAUhB;AACAC,EAAAA,QAAQ,CAACC,QAAD,EAA2B;AACjC,QAAI,KAAKL,IAAT,EAAe;AACb,WAAKM,OAAL,CAAaC,aAAb,CACE,IAAIC,WAAJ,CAAgB,mBAAhB,EAAqC;AACnCC,QAAAA,OAAO,EAAE,IAD0B;AAEnCC,QAAAA,MAAM,EAAE;AAAEC,UAAAA,KAAK,EAAE,KAAKX,IAAd;AAAoBK,UAAAA,QAAQ,EAAEA;AAA9B;AAF2B,OAArC,CADF;AAMD;AACF;;AApBe,CAAlB;AAuBA,SACET,SADF","sourcesContent":["import type { Resource } from \"./interfaces.js\";\n\nconst NextMixin = {\n  name: 'next-mixin',\n  use: [],\n  attributes: {\n    next: {\n      type: String,\n      default:''\n    },\n  },\n\n  // Here \"even.target\" points to the content of the widgets of the children of solid-display\n  goToNext(resource: Resource): void {\n    if (this.next) {\n      this.element.dispatchEvent(\n        new CustomEvent('requestNavigation', {\n          bubbles: true,\n          detail: { route: this.next, resource: resource },\n        }),\n      );\n    }\n  }\n}\n\nexport {\n  NextMixin\n}"]}