@startinblox/core 0.0.0

package/dist/new-widgets/templatesDependencies/formFileMixin.js

@@ -0,0 +1,82 @@
+import { store } from "../../libs/store/store.js";
+const FormFileMixin = {
+  name: 'form-file-mixin',
+  attributes: {
+    uploadUrl: {
+      type: String,
+      default: ''
+    }
+  },
+  initialState: {
+    initialValue: ''
+  },
+  created() {
+    this.listAttributes['output'] = '';
+    this.listAttributes['resetButtonHidden'] = true;
+    this.listAttributes['selectFile'] = this.selectFile.bind(this);
+    this.listAttributes['resetFile'] = this.resetFile.bind(this);
+  },
+  attached() {
+    document.addEventListener('reset', e => {
+      if (e.target && e.target.contains(this.element)) {
+        this.value = this.initialValue;
+        this.listAttributes['resetButtonHidden'] = true;
+        this.planRender();
+        const dataHolder = this.element.querySelector('input[data-holder]');
+        dataHolder.value = this.value;
+        dataHolder.dispatchEvent(new Event('change'));
+      }
+    });
+  },
+  selectFile() {
+    if (this.uploadUrl === null) return;
+    if (this.initialValue === '') {
+      this.initialValue = this.value;
+    }
+    const filePicker = this.element.querySelector('input[type="file"]');
+    if (filePicker.files.length < 1) return;
+    const dataHolder = this.element.querySelector('input[data-holder]');
+    this.listAttributes['output'] = '⏳';
+    this.planRender();
+    const file = filePicker.files[0];
+    const formData = new FormData();
+    formData.append('file', file);
+    store.fetchAuthn(this.uploadUrl, {
+      method: 'POST',
+      body: formData
+    }).then(response => this.updateFile(dataHolder, response)).catch(error => {
+      this.listAttributes['fileValue'] = '';
+      this.listAttributes['output'] = 'upload error';
+      this.planRender();
+      console.error(error);
+    });
+  },
+  updateFile(dataHolder, response) {
+    const location = response.headers.get('location');
+    if (location == null) {
+      this.listAttributes['output'] = 'header location not found!';
+    } else {
+      this.value = location;
+      this.listAttributes['output'] = '';
+      this.listAttributes['resetButtonHidden'] = false;
+      dataHolder.value = location;
+      dataHolder.dispatchEvent(new Event('change'));
+      this.planRender();
+    }
+  },
+  resetFile(event) {
+    event.preventDefault();
+    this.value = '';
+    const filePicker = this.element.querySelector('input[type="file"]');
+    const dataHolder = this.element.querySelector('input[data-holder]');
+    if (filePicker && dataHolder) {
+      filePicker.value = dataHolder.value = '';
+    }
+    this.listAttributes['fileValue'] = '';
+    this.listAttributes['output'] = '';
+    this.listAttributes['resetButtonHidden'] = true;
+    dataHolder.dispatchEvent(new Event('change'));
+    this.planRender();
+  }
+};
+export { FormFileMixin };

package/dist/new-widgets/templatesDependencies/formLengthMixin.js

@@ -0,0 +1,18 @@
+const FormLengthMixin = {
+  name: 'form-length-mixin',
+  attributes: {
+    maxlength: {
+      type: Number,
+      callback: function (newValue) {
+        this.addToAttributes(newValue, 'maxlength');
+      }
+    },
+    minlength: {
+      type: Number,
+      callback: function (newValue) {
+        this.addToAttributes(newValue, 'minlength');
+      }
+    }
+  }
+};
+export { FormLengthMixin };

package/dist/new-widgets/templatesDependencies/formMinMaxMixin.js

@@ -0,0 +1,18 @@
+const FormMinMaxMixin = {
+  name: 'form-min-max-mixin',
+  attributes: {
+    min: {
+      type: Number,
+      callback: function (newValue) {
+        this.addToAttributes(newValue, 'min');
+      }
+    },
+    max: {
+      type: Number,
+      callback: function (newValue) {
+        this.addToAttributes(newValue, 'max');
+      }
+    }
+  }
+};
+export { FormMinMaxMixin };

package/dist/new-widgets/templatesDependencies/formMixin.js

@@ -0,0 +1,56 @@
+const FormMixin = {
+  name: 'form-mixin',
+  attributes: {
+    required: {
+      type: Boolean,
+      default: false,
+      callback: function () {
+        this.listAttributes['required'] = true;
+      }
+    },
+    autocomplete: {
+      type: String,
+      default: '',
+      callback: function (value) {
+        this.addToAttributes(value, "autocomplete");
+      }
+    }
+  },
+  attached() {
+    this.listAttributes['onChange'] = this.onChange.bind(this);
+  },
+  onChange(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    this.element.dispatchEvent(new Event('change', {
+      bubbles: true
+    }));
+  },
+  getValue() {
+    if (!this.dataHolder || this.dataHolder.length === 0) return this.value;
+    if (this.dataHolder.length > 1) this.showDataHolderError(1, this.dataHolder.length);
+    return this.getValueFromElement(this.dataHolder[0]);
+  },
+  get type() {
+    return 'string';
+  },
+  get multiple() {
+    return false;
+  },
+  get dataHolder() {
+    const dataHolders = Array.from(this.element.querySelectorAll('[data-holder]'));
+    const widgetDataHolders = dataHolders.filter(element => {
+      const dataHolderAncestor = element.parentElement ? element.parentElement.closest('[data-holder]') : null;
+      // get the dataHolder of the widget only if no dataHolder ancestor in the current widget
+      return dataHolderAncestor === this.element || !dataHolderAncestor || !this.element.contains(dataHolderAncestor);
+    });
+    return widgetDataHolders.length ? widgetDataHolders : null;
+  },
+  getValueFromElement(element) {
+    return element.component ? element.component.getValue() : element.value;
+  },
+  showDataHolderError(expected, found) {
+    console.warn(`Expected ${expected} data-holder element in ${this.element.tagName}. Found ${found}`);
+  }
+};
+export { FormMixin };

package/dist/new-widgets/templatesDependencies/formNumberMixin.js

@@ -0,0 +1,10 @@
+const FormNumberMixin = {
+  name: 'form-number-mixin',
+  getValueFromElement(element) {
+    return element.value ? Number(element.value) : '';
+  },
+  get type() {
+    return 'number';
+  }
+};
+export { FormNumberMixin };

package/dist/new-widgets/templatesDependencies/formRadioMixin.js

@@ -0,0 +1,12 @@
+import { uniqID } from '../../libs/helpers.js';
+const FormRadioMixin = {
+  name: 'form-radio-mixin',
+  created() {
+    this.listAttributes['id'] = uniqID();
+  },
+  getValue() {
+    const checkedElement = this.element.querySelector('input[type=radio]:checked');
+    return checkedElement ? checkedElement.value : '';
+  }
+};
+export { FormRadioMixin };

package/dist/new-widgets/templatesDependencies/formStepMixin.js

@@ -0,0 +1,12 @@
+const FormStepMixin = {
+  name: 'form-time-mixin',
+  attributes: {
+    step: {
+      type: Number,
+      callback: function (newValue) {
+        this.addToAttributes(newValue, 'step');
+      }
+    }
+  }
+};
+export { FormStepMixin };

package/dist/new-widgets/templatesDependencies/linkTextMixin.js

@@ -0,0 +1,13 @@
+const LinkTextMixin = {
+  name: 'link-text-mixin',
+  attributes: {
+    linkText: {
+      type: String,
+      default: '',
+      callback: function (newValue) {
+        this.addToAttributes(newValue, 'linkText');
+      }
+    }
+  }
+};
+export { LinkTextMixin };

package/dist/new-widgets/templatesDependencies/multipleFormMixin.js

@@ -0,0 +1,112 @@
+import { StoreMixin } from '../../mixins/storeMixin.js';
+const MultipleFormMixin = {
+  name: 'multiple-form-mixin',
+  use: [StoreMixin],
+  attributes: {
+    widget: {
+      type: String,
+      default: 'solid-form-text'
+    },
+    addLabel: {
+      type: String,
+      default: '+',
+      callback: function (value) {
+        if (value !== this.listAttributes['addLabel']) this.listAttributes['addLabel'] = value;
+        this.planRender();
+      }
+    },
+    removeLabel: {
+      type: String,
+      default: '×',
+      callback: function (value) {
+        if (value !== this.listAttributes['removeLabel']) this.listAttributes['removeLabel'] = value;
+        this.planRender();
+      }
+    },
+    range: {
+      type: String,
+      default: ''
+    },
+    addClass: {
+      type: String,
+      default: undefined,
+      callback: function (value) {
+        if (value !== this.listAttributes['addClass']) this.listAttributes['addClass'] = value;
+        this.planRender();
+      }
+    },
+    removeClass: {
+      type: String,
+      default: undefined,
+      callback: function (value) {
+        if (value !== this.listAttributes['removeClass']) this.listAttributes['removeClass'] = value;
+        this.planRender();
+      }
+    }
+  },
+  created() {
+    this.listValueTransformations.push(this.setDataSrc.bind(this));
+    this.listAttributes['children'] = [];
+    this.listAttributes['addLabel'] = this.addLabel;
+    this.listAttributes['removeLabel'] = this.removeLabel;
+    this.listAttributes['addClass'] = this.addClass;
+    this.listAttributes['removeClass'] = this.removeClass;
+    this.listAttributes['addItem'] = () => {
+      this.insertWidget();
+      this.planRender();
+    };
+    this.listAttributes['removeItem'] = index => {
+      this.element.querySelector(`[data-index="${this.name + index}"]`).remove();
+      this.element.dispatchEvent(new Event('change', {
+        bubbles: true
+      }));
+    };
+  },
+  setDataSrc(value, listValueTransformations) {
+    if (value && value !== this.dataSrc) this.dataSrc = value;
+    const nextProcessor = listValueTransformations.shift();
+    if (nextProcessor) nextProcessor(value, listValueTransformations);
+  },
+  populate() {
+    if (!this.resource || !this.resource['ldp:contains']) return;
+    this.listAttributes['children'] = []; // reset list
+
+    // set value in form
+    for (let resource of this.resource['ldp:contains']) {
+      // for each resource
+      this.insertWidget(resource['@id']); // create a widget
+    }
+
+    this.planRender();
+  },
+  insertWidget() {
+    let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    if (!this.widget) return;
+    const widget = document.createElement(this.widget);
+    const attributes = {
+      'data-holder': true,
+      'name': this.name,
+      'value': value,
+      'range': this.range
+    };
+    for (let name of Object.keys(attributes)) {
+      if (typeof attributes[name] === "boolean") widget.toggleAttribute(name, attributes[name]);else widget.setAttribute(name, attributes[name]);
+    }
+    this.listAttributes['children'].push(widget);
+  },
+  empty() {
+    this.listAttributes['children'] = [];
+    this.planRender();
+  },
+  getValue() {
+    if (!this.dataHolder) return [];
+    return Array.from(this.dataHolder).map(element => this.getValueFromElement(element));
+  },
+  get type() {
+    return 'resource';
+  },
+  get multiple() {
+    return true;
+  }
+};
+export { MultipleFormMixin };

package/dist/new-widgets/templatesDependencies/multipleselectFormMixin.js

@@ -0,0 +1,65 @@
+import { StoreMixin } from '../../mixins/storeMixin.js';
+const MultipleselectFormMixin = {
+  name: 'multipleselect-form-mixin',
+  use: [StoreMixin],
+  attributes: {
+    range: {
+      // range attribute is passed to the solid-dropdown
+      type: String,
+      default: '',
+      callback: function (value) {
+        if (value && value !== this.listAttributes['range']) this.listAttributes['range'] = value;
+      }
+    },
+    enum: {
+      // enum attribute is passed to the solid-dropdown
+      type: String,
+      default: '',
+      callback: function (value) {
+        if (value && value !== this.listAttributes['enum']) this.listAttributes['enum'] = value;
+      }
+    },
+    orderAsc: {
+      type: String,
+      default: 'name',
+      callback: function (newValue) {
+        this.addToAttributes(newValue, 'orderAsc');
+      }
+    },
+    orderDesc: {
+      type: String,
+      default: 'name',
+      callback: function (newValue) {
+        this.addToAttributes(newValue, 'orderDesc');
+      }
+    }
+  },
+  created() {
+    this.listValueTransformations.push(this.setDataSrc.bind(this));
+  },
+  setDataSrc(value, listValueTransformations) {
+    if (value && value !== this.dataSrc) this.dataSrc = value;
+    const nextProcessor = listValueTransformations.shift();
+    if (nextProcessor) nextProcessor(value, listValueTransformations);
+  },
+  populate() {
+    if (!this.resource || !this.resource['ldp:contains']) return;
+    this.setValue(this.resource['ldp:contains']);
+    this.planRender();
+  },
+  setValue(values) {
+    // set the values to the dropdown
+    this.listAttributes['values'] = JSON.stringify(values.map(r => r['@id']));
+  },
+  empty() {
+    this.listAttributes['values'] = [];
+    this.planRender();
+  },
+  get type() {
+    return this.enum === '' ? 'resource' : 'string';
+  },
+  get multiple() {
+    return true;
+  }
+};
+export { MultipleselectFormMixin };

package/dist/new-widgets/templatesDependencies/patternMixin.js

@@ -0,0 +1,18 @@
+const PatternMixin = {
+  name: 'pattern-mixin',
+  attributes: {
+    pattern: {
+      type: String,
+      callback: function (newValue) {
+        this.addToAttributes(newValue, 'pattern');
+      }
+    },
+    title: {
+      type: String,
+      callback: function (newValue) {
+        this.addToAttributes(newValue, 'title');
+      }
+    }
+  }
+};
+export { PatternMixin };

package/dist/new-widgets/templatesDependencies/rangeMixin.js

@@ -0,0 +1,100 @@
+import { StoreMixin } from '../../mixins/storeMixin.js';
+import { SorterMixin } from '../../mixins/sorterMixin.js';
+import { FederationMixin } from '../../mixins/federationMixin.js';
+const RangeMixin = {
+  name: 'range-mixin',
+  use: [StoreMixin, SorterMixin, FederationMixin],
+  attributes: {
+    range: {
+      type: String,
+      default: '',
+      callback: function (value) {
+        if (value !== this.dataSrc) this.dataSrc = value;
+      }
+    },
+    enum: {
+      type: String,
+      default: '',
+      callback: function (value) {
+        if (value !== null) {
+          const optional = value.trim().split(",");
+          let key;
+          let keyValue;
+          const list = {};
+          optional.forEach(element => {
+            if (element.includes("=")) {
+              const option = element.trim().split("=");
+              key = option[1].trim();
+              keyValue = option[0].trim();
+              list[key] = keyValue;
+            } else {
+              const elem = element.trim();
+              list[elem] = elem;
+            }
+          });
+          this.addToAttributes(list, 'enum');
+        }
+        ;
+      }
+    },
+    optionLabel: {
+      type: String,
+      default: 'name',
+      callback: function (newValue) {
+        this.addToAttributes(newValue, 'optionLabel');
+      }
+    },
+    optionValue: {
+      type: String,
+      default: '@id',
+      callback: function (newValue) {
+        this.addToAttributes(newValue, 'optionValue');
+      }
+    }
+  },
+  initialState: {
+    listPostProcessors: []
+  },
+  created() {
+    this.listPostProcessors = [];
+    this.listAttributes['optionLabel'] = this.optionLabel;
+    this.listAttributes['optionValue'] = this.optionValue;
+  },
+  async populate() {
+    const resources = this.resource ? this.resource['ldp:contains'] : [];
+    const listPostProcessors = [...this.listPostProcessors];
+    listPostProcessors.push(this.setRangeAttribute.bind(this));
+    const nextProcessor = listPostProcessors.shift();
+    await nextProcessor(resources, listPostProcessors, null, this.dataSrc);
+  },
+  async setRangeAttribute(resources) {
+    if (resources) {
+      // process resources to create the template
+      const getRangeValue = async resource => {
+        const selectedValue = await resource[this.optionValue]; // value used for selected options
+        const value = this.optionValue.includes('@id') || selectedValue['@id'] ?
+        // value of the option
+        `{"@id": "${selectedValue}"}` :
+        //  resource
+        selectedValue; // literal
+        const label = await resource[this.optionLabel]; // label of the option
+
+        return {
+          value,
+          label,
+          selectedValue
+        };
+      };
+      this.listAttributes['range'] = await Promise.all(resources.filter(el => el !== null).map(r => getRangeValue(r)));
+    }
+    this.planRender();
+  },
+  empty() {
+    this.listAttributes['range'] = [];
+    this.planRender();
+  },
+  get type() {
+    return this.enum === '' ? 'resource' : 'string';
+  }
+};
+export { RangeMixin };

package/dist/new-widgets/templatesDependencies/setMixin.js

@@ -0,0 +1,9 @@
+const SetMixin = {
+  name: 'set-mixin',
+  /**
+   * For sets and group widgets, remove auto rendering
+   * function to allow only manual renders
+   */
+  planRender() {}
+};
+export { SetMixin };

package/dist/new-widgets/templatesDependencies/valueRichtextMixin.js

@@ -0,0 +1,9 @@
+import qdtm from '../../_snowpack/pkg/quill-delta-to-markdown.js';
+const ValueRichtextMixin = {
+  name: 'valuerichtext-mixin',
+  getValue() {
+    const markdown = qdtm.deltaToMarkdown(this.quill.getContents().ops);
+    return markdown;
+  }
+};
+export { ValueRichtextMixin };

package/dist/new-widgets/valueTransformationMixins/autolinkMixin.js

@@ -0,0 +1,14 @@
+import { Autolinker } from '../../_snowpack/pkg/autolinker.js';
+const AutolinkMixin = {
+  name: 'autolink-mixin',
+  created() {
+    this.listValueTransformations.push(this.transformValue.bind(this));
+  },
+  transformValue(value, listValueTransformations) {
+    const template = document.createElement('template');
+    template.innerHTML = Autolinker.link(value);
+    const nextProcessor = listValueTransformations.shift();
+    if (nextProcessor) nextProcessor(template.content, listValueTransformations);
+  }
+};
+export { AutolinkMixin };

package/dist/new-widgets/valueTransformationMixins/dateMixin.js

@@ -0,0 +1,29 @@
+const DateMixin = {
+  name: 'date-mixin',
+  created() {
+    this.listValueTransformations.push(this.transformValue.bind(this));
+  },
+  transformValue(value, listValueTransformations) {
+    try {
+      // workaround for giving a specific-formatted value to the form widget
+      this.listAttributes['originalValue'] = this.formatDateForInput(value);
+    } catch (e) {
+      console.warn('Invalid date format for widget', this.name);
+      this.listAttributes['originalValue'] = '';
+    }
+    const newValue = value ? new Date(value).toLocaleDateString() : value;
+    const nextProcessor = listValueTransformations.shift();
+    if (nextProcessor) nextProcessor(newValue, listValueTransformations);
+  },
+  formatDateForInput(date) {
+    let d = new Date(date);
+    if (isNaN(d.getTime())) throw new Error('Invalid date');
+    let month = `${d.getMonth() + 1}`;
+    let day = `${d.getDate()}`;
+    let year = d.getFullYear();
+    if (month.length < 2) month = `0${month}`;
+    if (day.length < 2) day = `0${day}`;
+    return [year, month, day].join('-');
+  }
+};
+export { DateMixin };

package/dist/new-widgets/valueTransformationMixins/dateTimeMixin.js

@@ -0,0 +1,12 @@
+const DateTimeMixin = {
+  name: 'date-time-mixin',
+  created() {
+    this.listValueTransformations.push(this.transformValue.bind(this));
+  },
+  transformValue(value, listValueTransformations) {
+    const newValue = value ? new Date(value).toLocaleString() : value;
+    const nextProcessor = listValueTransformations.shift();
+    if (nextProcessor) nextProcessor(newValue, listValueTransformations);
+  }
+};
+export { DateTimeMixin };

package/dist/new-widgets/valueTransformationMixins/index.js

@@ -0,0 +1,15 @@
+import { DateMixin } from './dateMixin.js';
+import { DateTimeMixin } from './dateTimeMixin.js';
+import { MultilineMixin } from './multilineMixin.js';
+import { MarkdownMixin } from './markdownMixin.js';
+import { OembedMixin } from './oembedMixin.js';
+import { AutolinkMixin } from './autolinkMixin.js';
+const valueTransformationDirectory = {
+  date: DateMixin,
+  datetime: DateTimeMixin,
+  multiline: MultilineMixin,
+  markdown: MarkdownMixin,
+  oembed: OembedMixin,
+  autolink: AutolinkMixin
+};
+export { valueTransformationDirectory, DateMixin, DateTimeMixin, MultilineMixin, MarkdownMixin, OembedMixin, AutolinkMixin };

package/dist/new-widgets/valueTransformationMixins/markdownMixin.js

@@ -0,0 +1,30 @@
+import { unsafeHTML } from '../../_snowpack/pkg/lit-html/directives/unsafe-html.js';
+import markdownit from '../../_snowpack/pkg/markdown-it.js';
+import mila from '../../_snowpack/pkg/markdown-it-link-attributes.js';
+const MarkdownMixin = {
+  name: 'markdown-mixin',
+  created() {
+    this.listValueTransformations.push(this.transformValue.bind(this));
+  },
+  transformValue(value, listValueTransformations) {
+    let newValue = '';
+    if (value) {
+      const md = markdownit({
+        breaks: true,
+        html: false,
+        linkify: true
+      });
+      md.use(mila, {
+        attrs: {
+          target: '_blank',
+          rel: 'noopener'
+        }
+      });
+      const html = md.render(value);
+      newValue = unsafeHTML(html);
+    }
+    const nextProcessor = listValueTransformations.shift();
+    if (nextProcessor) nextProcessor(newValue, listValueTransformations);
+  }
+};
+export { MarkdownMixin };

package/dist/new-widgets/valueTransformationMixins/multilineMixin.js

@@ -0,0 +1,13 @@
+import { unsafeHTML } from '../../_snowpack/pkg/lit-html/directives/unsafe-html.js';
+const MultilineMixin = {
+  name: 'multiline-mixin',
+  created() {
+    this.listValueTransformations.push(this.transformValue.bind(this));
+  },
+  transformValue(value, listValueTransformations) {
+    const newValue = value ? unsafeHTML(value.replace(/\n/g, "<br/>")) : value;
+    const nextProcessor = listValueTransformations.shift();
+    if (nextProcessor) nextProcessor(newValue, listValueTransformations);
+  }
+};
+export { MultilineMixin };