@startinblox/core 0.18.1 → 0.19.0-beta.10

package/dist/mixins/widgetMixin.js

@@ -1,351 +0,0 @@
-import { spread, preHTML } from '../libs/lit-helpers.js';
-import { parseFieldsString, findClosingBracketMatchIndex } from '../libs/helpers.js';
-import { newWidgetFactory } from '../new-widgets/new-widget-factory.js';
-import { WidgetType } from './interfaces.js';
-import { html, render } from '../_snowpack/pkg/lit-html.js';
-import { ifDefined } from '../_snowpack/pkg/lit-html/directives/if-defined.js';
-const WidgetMixin = {
-  name: 'widget-mixin',
-  use: [],
-  attributes: {
-    fields: {
-      type: String,
-      default: undefined
-    }
-  },
-  initialState: {
-    nameWidgets: null,
-    _div: null
-  },
-  created() {
-    this.nameWidgets = [];
-  },
-  attached() {
-    if (!this.dataSrc && !this.resource && this.noRender === null) this.populate();
-  },
-  get parentElement() {
-    return 'div';
-  },
-  get div() {
-    if (this._div) return this._div;
-    this._div = document.createElement(this.parentElement);
-    this.element.appendChild(this._div);
-    return this._div;
-  },
-  set div(value) {
-    this._div = value;
-  },
-  get widgets() {
-    return this.nameWidgets.map(name => this.element.querySelector(`[name="${name}"]`));
-  },
-  /**
-   * Return field list of the component
-   */
-  async getFields() {
-    // TODO : improve code
-    const attr = this.fields;
-    if (attr === '') return [];
-    if (attr) return parseFieldsString(attr);
-    let resource = this.resource;
-    if (resource && resource.isContainer?.()) {
-      // If container, keep the 1rst resource
-      for (let res of resource['ldp:contains']) {
-        resource = res;
-        break;
-      }
-    }
-    if (!this.dataSrc) console.error(new Error('You must provide a "fields" attribute'));
-    if (!resource) return [];
-    let fields = [];
-    for (const prop of resource.properties) {
-      if (!prop.startsWith('@') && !(prop === "permissions") && (await resource[prop])) fields.push(prop);
-    }
-    return fields;
-  },
-  /**
-   * return attribute if "field" is an action
-   * @param field - string
-   */
-  getAction(field) {
-    const action = this.element.getAttribute('action-' + field);
-    return action;
-  },
-  /**
-   * return true if "field" is editable
-   * @param field - string
-   */
-  editable(field) {
-    return this.element.hasAttribute('editable-' + field);
-  },
-  /**
-   * Return regexp to check if "field" is a set
-   * @param field - string
-   */
-  getSetRegexp(field) {
-    return new RegExp(`(^|\\,|\\(|\\s)\\s*${field}\\s*\\(`, 'g');
-  },
-  /**
-   * Return fields contained in set "field"
-   * @param field - string
-   */
-  getSet(field) {
-    const setString = this.fields.match(this.getSetRegexp(field));
-    if (!setString) return [];
-    const firstSetBracket = this.fields.indexOf(setString[0]) + setString[0].length - 1;
-    const lastSetBracket = findClosingBracketMatchIndex(this.fields, firstSetBracket);
-    const set = this.fields.substring(firstSetBracket + 1, lastSetBracket);
-    return parseFieldsString(set);
-  },
-  /**
-   * Return true if "field" is a set
-   * @param field - string
-   */
-  isSet(field) {
-    if (!this.fields) return false;
-    let foundSets = this.fields.match(this.getSetRegexp(field));
-    return foundSets ? foundSets.length > 0 : false;
-  },
-  isString(field) {
-    return field.startsWith('\'') || field.startsWith('\"');
-  },
-  /**
-   * Return the value of "resource" for predicate "field"
-   * @param field - string
-   * @param resource - Resource
-   */
-  async fetchValue(field, resource) {
-    return resource && !resource.isContainer?.() ? await resource[field] : undefined;
-  },
-  /**
-   * Return the value of the field
-   * @param field - field
-   */
-  async getValue(field, resource) {
-    const escapedField = this.getEscapedField(field);
-    if (this.getAction(escapedField)) {
-      return this.getAction(escapedField);
-    }
-    if (this.element.hasAttribute('value-' + field)) {
-      return this.element.getAttribute('value-' + field);
-    }
-    let resourceValue = await this.fetchValue(field, resource);
-
-    // Empty value
-    if (resourceValue === undefined || resourceValue === '' || resourceValue === null)
-      // If null or empty, return field default value
-      return this.element.hasAttribute('default-' + field) ? this.element.getAttribute('default-' + field) : '';
-    return resourceValue;
-  },
-  empty() {},
-  /**
-   * Return a widget from a tagName, and create it if necessary
-   * @param tagName - string
-   */
-  widgetFromTagName(tagName) {
-    let type = tagName.startsWith('solid') ? WidgetType.CUSTOM : WidgetType.USER;
-    if (!customElements.get(tagName)) {
-      // component does not exist
-      if (tagName.startsWith('solid')) newWidgetFactory(tagName); // solid- -> create it
-      else type = WidgetType.NATIVE; // or use a native tag
-    }
-
-    return {
-      tagName,
-      type
-    }; // return tagName
-  },
-
-  /**
-   * Return widget for field "field"
-   * @param field - string
-   * @param isSet - boolean
-   */
-  getWidget(field) {
-    let isSet = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-    const widget = this.element.getAttribute('widget-' + field);
-    if (widget) return this.widgetFromTagName(widget);
-    if (this.getAction(field)) return this.widgetFromTagName('solid-action');
-    return !isSet ? this.widgetFromTagName(this.defaultWidget) : this.widgetFromTagName(this.defaultSetWidget);
-  },
-  /**
-   * Return multiple widget if "field" is a multiple, false if it's not
-   * @param field - string
-   */
-  multiple(field) {
-    const attribute = 'multiple-' + field;
-    if (!this.element.hasAttribute(attribute)) return null;
-    const widget = this.element.getAttribute(attribute) || this.defaultMultipleWidget;
-    return this.widgetFromTagName(widget);
-  },
-  /**
-   * If attribute "lookForAttr" is set on element, add "attrKey" to the "attributes" list
-   * @param lookForAttr - string
-   * @param setAttrKey - string
-   * @param attributes - object
-   */
-  addToAttributes(lookForAttr, setAttrKey, attributes) {
-    const attribute = this.element.getAttribute(lookForAttr);
-    if (attribute == null) return;
-    attributes[setAttrKey] = attribute;
-  },
-  /**
-   * Return all the attributes of widget "field"
-   * @param field - string
-   * @param resource - Resource
-   */
-  widgetAttributes(field, resource) {
-    const attrs = {
-      name: field
-    };
-    const escapedField = this.getEscapedField(field);
-
-    // transfer all multiple-[field]-[attr] attributes as [attr] for multiple widget [field]
-    const multipleAttributes = ['fields', 'label', 'widget', 'add-label', 'remove-label', 'next', 'empty-widget', 'add-class', 'remove-class'];
-    for (let attr of multipleAttributes) this.addToAttributes(`multiple-${escapedField}-${attr}`, attr, attrs);
-
-    // transfer all [attr]-[field] attributes as [attr] attribute for widget [field]
-    const defaultAttributes = ['range', 'enum', 'label', 'placeholder', 'class',
-
-      /* 'widget', */
-    , 'required', 'editable', 'autocomplete', 'upload-url', 'option-label', 'option-value', 'order-by',
-    // deprecated. Remove in 0.15
-    'each-label', 'order-asc', 'order-desc', 'min', 'max', 'pattern', 'title', 'start-value', 'end-value', 'alt', 'step', 'maxlength', 'minlength', 'search-text', 'search-placeholder', 'link-text'];
-    for (let attr of defaultAttributes) this.addToAttributes(`${attr}-${escapedField}`, attr, attrs);
-    const addableAttributes = Array.from(this.element.attributes).filter(a => a.name.startsWith(`addable-${escapedField}`));
-    for (let attr of addableAttributes) this.addToAttributes(attr.name, attr.name.replace(`addable-${escapedField}`, 'addable'), attrs);
-    const resourceId = resource ? resource['@id'] : null;
-    if (this.multiple(escapedField)) attrs['widget'] = this.getWidget(escapedField).tagName;
-    if (this.getAction(escapedField) && resourceId) attrs['src'] = this.element.getAttribute('src-' + escapedField) || resourceId;
-    if (this.editable(escapedField) && resourceId) attrs['value-id'] = resourceId;
-    return attrs;
-  },
-  /**
-   * Creates and return a widget for field + add it to the widget list
-   * @param field - string
-   */
-  async createWidgetTemplate(field) {
-    let resource = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-    let transformAttributes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-    if (this.isString(field)) return this.createString(field); // field is a static string
-    if (this.isSet(field)) return await this.createSet(field);
-    const currentResource = resource || this.resource;
-    let attributes = this.widgetAttributes(field, currentResource);
-    const escapedField = this.getEscapedField(field);
-    const widgetMeta = this.multiple(escapedField) || this.getWidget(escapedField);
-    let tagName = widgetMeta.tagName;
-    let widgetTemplate = html``;
-
-    // Set attributes
-    let value = await this.getValue(field, currentResource);
-    if (widgetMeta.type === WidgetType.NATIVE) {
-      // native widget (ie: h1)
-      widgetTemplate = preHTML`
-        <${tagName}
-          name="${ifDefined(attributes.name)}"
-          class="${ifDefined(attributes.class)}"
-        >${value}</${tagName}>
-      `;
-    } else {
-      // custom widget (ie: solid-display-value)
-      // Check if value is defined, and if the default widget is needed
-      if ((value === null || value === '') && this.element.hasAttribute('default-widget-' + field)) {
-        tagName = this.element.getAttribute('default-widget-' + field);
-      }
-      // Set attributes to the widget
-      // setAttribute set a string. Make sure null values are empty
-      if (value === null || value === undefined) attributes.value = '';
-      if (widgetMeta.type === WidgetType.USER && value['@id']) {
-        // if value is a resource and solid-widget used, set data-src
-        attributes['data-src'] = value['@id'];
-      } else {
-        // otherwise, set value attribute
-        attributes['value'] = value;
-      }
-
-      // Subscribe widgets if they show a resource
-      if (value && value['@id']) attributes['auto-subscribe'] = value['@id'];
-
-      // Transform store://XXX attributes
-      if (transformAttributes) attributes = await this.transformAttributes(attributes, currentResource);
-      widgetTemplate = preHTML`<${tagName} ...=${spread(attributes)}></${tagName}>`;
-    }
-    this.nameWidgets.push(field);
-    return widgetTemplate;
-  },
-  defineAttribute(widget, attribute, value) {
-    if (widget.getAttribute(attribute) !== value) {
-      // if attribute is different than previous one
-      widget.setAttribute(attribute, value); // set it
-    }
-  },
-
-  /**
-   * Create a set and add fields to it
-   * @param field - string
-   */
-  async createSet(field) {
-    const setWidget = this.getWidget(field, true);
-
-    // Get set attributes
-    const attrs = {
-      name: field
-    };
-    const setAttributes = ['class', 'label'];
-    for (let attr of setAttributes) this.addToAttributes(`${attr}-${field}`, attr, attrs);
-
-    // Create widget if not already existing
-    let widget = this.element.querySelector(`${setWidget.tagName}[name="${field}"]`);
-    let initializing = false; // used to render widget only first time
-    if (!widget) {
-      widget = document.createElement(setWidget.tagName);
-      initializing = true;
-    }
-    for (let name of Object.keys(attrs)) {
-      this.defineAttribute(widget, name, attrs[name], setWidget.type);
-    }
-    if (widget.component && initializing) widget.component.render();
-    let setFields = this.getSet(field);
-    // Catch widget for the set if all these fields are empty
-    if (this.element.hasAttribute('empty-' + field)) {
-      let hasOnlyEmpty = true;
-      for (let field of setFields) {
-        let value = await this.getValue(field, this.resource);
-        if (value !== '') {
-          // if one not empty
-          hasOnlyEmpty = false;
-          continue; // break loop
-        }
-      }
-
-      ;
-      if (hasOnlyEmpty) {
-        // if only empty values, return empty-widget
-        const attributes = this.widgetAttributes(field, this.resource);
-        const tagName = this.element.getAttribute(`empty-${field}`);
-        const valueSet = this.element.getAttribute(`empty-${field}-value`);
-        if (valueSet) attributes.value = valueSet;
-        return preHTML`<${tagName} ...=${spread(attributes)}></${tagName}>`;
-      }
-      ;
-    }
-
-    // Render template
-    const widgetsTemplate = await Promise.all(setFields.map(field => this.createWidgetTemplate(field)));
-    const template = html`${widgetsTemplate}`;
-    render(template, widget.querySelector('[data-content]') || widget);
-    return widget;
-  },
-  createString(value) {
-    return html`
-      <span>${value.slice(1, -1).replace(/\\(['"])/g, '$1')}</span>
-    `;
-  },
-  /**
-   * Returns field name without starting "@"
-   * @param field
-   */
-  getEscapedField(field) {
-    return field.startsWith('@') ? field.slice(1, field.length) : field;
-  }
-};
-export { WidgetMixin };

package/dist/new-widgets/attributeMixins/actionMixin.js

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

package/dist/new-widgets/attributeMixins/blankMixin.js

@@ -1,7 +0,0 @@
-const BlankMixin = {
-  name: 'blank-mixin',
-  created() {
-    this.listAttributes['target'] = '_blank';
-  }
-};
-export { BlankMixin };

package/dist/new-widgets/attributeMixins/booleanMixin.js

@@ -1,7 +0,0 @@
-const BooleanMixin = {
-  name: 'boolean-mixin',
-  get type() {
-    return 'boolean';
-  }
-};
-export { BooleanMixin };

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

@@ -1,19 +0,0 @@
-import { MultipleMixin } from './multipleMixin.js';
-import { ActionMixin } from './actionMixin.js';
-import { BlankMixin } from './blankMixin.js';
-import { MailtoMixin } from './mailtoMixin.js';
-import { TelMixin } from './telMixin.js';
-import { PlaceholderMixin } from './placeholderMixin.js';
-import { BooleanMixin } from './booleanMixin.js';
-import { NumberMixin } from './numberMixin.js';
-const attributeDirectory = {
-  multiple: MultipleMixin,
-  action: ActionMixin,
-  blank: BlankMixin,
-  mailto: MailtoMixin,
-  tel: TelMixin,
-  placeholder: PlaceholderMixin,
-  bool: BooleanMixin,
-  num: NumberMixin
-};
-export { attributeDirectory, MultipleMixin, ActionMixin, BlankMixin, MailtoMixin, TelMixin, PlaceholderMixin };

package/dist/new-widgets/attributeMixins/mailtoMixin.js

@@ -1,7 +0,0 @@
-const MailtoMixin = {
-  name: 'mailto-mixin',
-  created() {
-    this.listAttributes['mailto'] = 'mailto:';
-  }
-};
-export { MailtoMixin };

package/dist/new-widgets/attributeMixins/multipleMixin.js

@@ -1,27 +0,0 @@
-const MultipleMixin = {
-  name: 'multiple-mixin',
-  attributes: {
-    fields: {
-      type: String,
-      default: '',
-      callback: function (newValue) {
-        this.addToAttributes(newValue, 'fields');
-      }
-    },
-    next: {
-      type: String,
-      default: '',
-      callback: function (newValue) {
-        this.addToAttributes(newValue, 'next');
-      }
-    },
-    emptyWidget: {
-      type: String,
-      default: '',
-      callback: function (newValue) {
-        this.addToAttributes(newValue, 'emptyWidget');
-      }
-    }
-  }
-};
-export { MultipleMixin };

package/dist/new-widgets/attributeMixins/numberMixin.js

@@ -1,7 +0,0 @@
-const NumberMixin = {
-  name: 'number-mixin',
-  get type() {
-    return 'number';
-  }
-};
-export { NumberMixin };

package/dist/new-widgets/attributeMixins/placeholderMixin.js

@@ -1,16 +0,0 @@
-const PlaceholderMixin = {
-  name: 'placeholder-mixin',
-  attributes: {
-    placeholder: {
-      type: String,
-      default: '',
-      callback: function (newValue) {
-        this.addToAttributes(newValue, 'placeholder');
-      }
-    }
-  },
-  attached() {
-    this.listAttributes['placeholder'] = this.placeholder || this.label || this.name || '';
-  }
-};
-export { PlaceholderMixin };

package/dist/new-widgets/attributeMixins/telMixin.js

@@ -1,7 +0,0 @@
-const TelMixin = {
-  name: 'tel-mixin',
-  created() {
-    this.listAttributes['tel'] = 'tel:';
-  }
-};
-export { TelMixin };

package/dist/new-widgets/baseWidgetMixin.js

@@ -1,109 +0,0 @@
-import { render } from '../_snowpack/pkg/lit-html.js';
-const BaseWidgetMixin = {
-  name: 'widget-mixin',
-  use: [],
-  attributes: {
-    value: {
-      type: String,
-      default: '',
-      callback: function () {
-        this.planRender();
-      }
-    },
-    name: {
-      type: String,
-      default: '',
-      callback: function (newValue) {
-        this.addToAttributes(newValue, 'name');
-      }
-    },
-    label: {
-      type: String,
-      default: null,
-      callback: function (newValue) {
-        this.addToAttributes(newValue, 'label');
-      }
-    },
-    autoSubscribe: {
-      type: String,
-      default: null,
-      callback: function (newValue) {
-        if (this.subscription) PubSub.unsubscribe(this.subscription);
-        this.subscribe(newValue);
-      }
-    }
-  },
-  initialState: {
-    listValueTransformations: [],
-    listTemplateAdditions: [],
-    listAttributes: {},
-    listCallbacks: [],
-    renderPlanned: false
-  },
-  get template() {
-    return null;
-  },
-  created() {
-    this.listValueTransformations = [];
-    this.listAttributes = {};
-    this.listTemplateAdditions = [];
-    this.listCallbacks = [];
-    this.subscription = null;
-  },
-  attached() {
-    this.planRender();
-  },
-  detached() {
-    if (this.subscription) PubSub.unsubscribe(this.subscription);
-  },
-  planRender() {
-    if (!this.renderPlanned && document.body.contains(this.element)) {
-      this.renderPlanned = true;
-      setTimeout(() => {
-        this.render();
-        this.renderPlanned = false;
-      });
-    }
-  },
-  render() {
-    const listValueTransformations = [...this.listValueTransformations];
-    listValueTransformations.push(this.renderTemplate.bind(this));
-    const nextProcessor = listValueTransformations.shift();
-    nextProcessor(this.value, listValueTransformations);
-
-    // Callbacks
-    const listCallbacks = [...this.listCallbacks];
-    if (listCallbacks.length) {
-      const nextCallback = listCallbacks.shift();
-      nextCallback(this.value, listCallbacks);
-    }
-    this.element.dispatchEvent(new CustomEvent('widgetRendered', {
-      bubbles: true
-    }));
-  },
-  renderTemplate(value) {
-    const template = this.template(value, {
-      ...this.listAttributes
-    });
-    const listTemplateAdditions = [...this.listTemplateAdditions];
-    listTemplateAdditions.push(this.templateToDOM.bind(this));
-    const nextProcessor = listTemplateAdditions.shift();
-    nextProcessor(template, listTemplateAdditions);
-  },
-  templateToDOM(template) {
-    render(template, this.element);
-  },
-  addToAttributes(value, attrKey) {
-    if (value !== null && value !== this.listAttributes[attrKey]) {
-      this.listAttributes[attrKey] = value;
-      this.planRender();
-    }
-  },
-  subscribe(event) {
-    this.subscription = PubSub.subscribe(event, () => this.planRender());
-  },
-  update() {
-    this.planRender();
-  }
-};
-export { BaseWidgetMixin };

package/dist/new-widgets/callbackMixins/autocompletionMixin.js

@@ -1,96 +0,0 @@
-import { fuzzyCompare } from '../../libs/helpers.js';
-import SlimSelect from '../../_snowpack/pkg/slim-select.js';
-import { TranslationMixin } from '../../mixins/translationMixin.js';
-const AutocompletionMixin = {
-  name: 'autocompletion-mixin',
-  use: [TranslationMixin],
-  attributes: {
-    searchText: {
-      type: String,
-      default: null,
-      callback: function (newValue) {
-        this.addToAttributes(newValue, 'searchText');
-      }
-    },
-    searchPlaceholder: {
-      type: String,
-      default: null,
-      callback: function (newValue) {
-        this.addToAttributes(newValue, 'searchPlaceholder');
-      }
-    }
-  },
-  initialState: {
-    slimSelect: null,
-    mutationObserver: null
-  },
-  created() {
-    //@ts-ignore
-    import("./slimselect.css.proxy.js");
-    this.slimSelect = null;
-    this.addToAttributes(true, 'autocomplete');
-    this.listCallbacks.push(this.addCallback.bind(this));
-  },
-  detached() {
-    if (this.slimSelect) this.slimSelect.destroy();
-    if (this.mutationObserver) this.mutationObserver.disconnect();
-  },
-  addCallback(value, listCallbacks) {
-    if (this.slimSelect) return;
-    let select = this.element.querySelector('select');
-    if (select) {
-      this.initSlimSelect(select);
-    } else {
-      // if no select available, wait for one and init slimSelect
-      new MutationObserver((_m, observer) => {
-        const select = this.element.querySelector('select');
-        if (select) {
-          this.initSlimSelect(select);
-          observer.disconnect(); // then disconnect mutationObserver
-        }
-      }).observe(this.element, {
-        childList: true,
-        characterData: true,
-        subtree: true
-      });
-    }
-    const nextProcessor = listCallbacks.shift();
-    if (nextProcessor) nextProcessor(value, listCallbacks);
-  },
-  initSlimSelect(select) {
-    const slimSelect = new SlimSelect({
-      select
-    });
-    this.slimSelect = slimSelect;
-    select.addEventListener('change', () => {
-      this.slimSelect.render();
-      this.element.dispatchEvent(new Event('input', {
-        bubbles: true
-      }));
-    });
-    this.element.addEventListener('input', e => {
-      if (e.target !== this.element) {
-        // avoid update search result when search in slimSelect suggestions
-        e.stopPropagation();
-      }
-    });
-
-    // when data changes, re-build slimSelect
-    if (this.mutationObserver) this.mutationObserver.disconnect();
-    this.mutationObserver = new MutationObserver(() => {
-      this.slimSelect.destroy();
-      this.slimSelect = new SlimSelect({
-        select,
-        placeholder: this.placeholder || this.t("autocompletion.placeholder"),
-        searchText: this.searchText || this.t("autocompletion.searchText"),
-        searchPlaceholder: this.searchPlaceholder || this.t("autocompletion.searchPlaceholder"),
-        searchFilter: (option, filterValue) => fuzzyCompare(option.text, filterValue)
-      });
-    }).observe(select, {
-      childList: true,
-      characterData: true,
-      subtree: true
-    });
-  }
-};
-export { AutocompletionMixin };

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

@@ -1,7 +0,0 @@
-import { AutocompletionMixin } from './autocompletionMixin.js';
-import { RichtextMixin } from './richtextMixin.js';
-const callbackDirectory = {
-  autocompletion: AutocompletionMixin,
-  richtext: RichtextMixin
-};
-export { callbackDirectory, AutocompletionMixin, RichtextMixin };