@startinblox/core 0.19.0-beta.2 → 0.19.0-beta.21

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 };

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

@@ -1,37 +0,0 @@
-import Quill from '../../_snowpack/pkg/quill.js';
-import deltaMd from '../../_snowpack/pkg/delta-markdown-for-quill.js';
-const RichtextMixin = {
-  name: 'richtext-mixin',
-  initialState: {
-    quill: null
-  },
-  created() {
-    //@ts-ignore
-    import("../../_snowpack/pkg/quill/dist/quill.snow.css.proxy.js");
-    this.quill = null;
-    this.listCallbacks.push(this.addCallback.bind(this));
-  },
-  addCallback(value, listCallbacks) {
-    if (this.quill == null) {
-      var toolbarOptions = [['bold', 'italic'], ['blockquote'], [{
-        'header': [1, 2, 3, 4, 5, 6, false]
-      }], [{
-        'list': 'ordered'
-      }, {
-        'list': 'bullet'
-      }], ['link'], ['clean']];
-      const richtext = this.element.querySelector('[data-richtext]');
-      this.quill = new Quill(richtext, {
-        modules: {
-          toolbar: toolbarOptions
-        },
-        theme: 'snow'
-      });
-    }
-    const ops = deltaMd.toDelta(this.value);
-    this.quill.setContents(ops);
-    const nextProcessor = listCallbacks.shift();
-    if (nextProcessor) nextProcessor(value, listCallbacks);
-  }
-};
-export { RichtextMixin };

package/dist/new-widgets/callbackMixins/slimselect.css.proxy.js

@@ -1,10 +0,0 @@
-// [snowpack] add styles to the page (skip if no document exists)
-if (typeof document !== 'undefined') {
-  const code = ".ss-main{position:relative;display:inline-block;user-select:none;color:#666;width:100%}.ss-main .ss-single-selected{display:flex;cursor:pointer;width:100%;height:30px;padding:6px;border:1px solid #dcdee2;border-radius:4px;background-color:#fff;outline:0;box-sizing:border-box;transition:background-color .2s}.ss-main .ss-single-selected.ss-disabled{background-color:#dcdee2;cursor:not-allowed}.ss-main .ss-single-selected.ss-open-above{border-top-left-radius:0px;border-top-right-radius:0px}.ss-main .ss-single-selected.ss-open-below{border-bottom-left-radius:0px;border-bottom-right-radius:0px}.ss-main .ss-single-selected .placeholder{display:flex;flex:1 1 100%;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;width:calc(100% - 30px);line-height:1em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ss-main .ss-single-selected .placeholder *{display:flex;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:auto}.ss-main .ss-single-selected .placeholder .ss-disabled{color:#dedede}.ss-main .ss-single-selected .ss-deselect{display:flex;align-items:center;justify-content:flex-end;flex:0 1 auto;margin:0 6px 0 6px;font-weight:bold}.ss-main .ss-single-selected .ss-deselect.ss-hide{display:none}.ss-main .ss-single-selected .ss-arrow{display:flex;align-items:center;justify-content:flex-end;flex:0 1 auto;margin:0 6px 0 6px}.ss-main .ss-single-selected .ss-arrow span{border:solid #666;border-width:0 2px 2px 0;display:inline-block;padding:3px;transition:transform .2s, margin .2s}.ss-main .ss-single-selected .ss-arrow span.arrow-up{transform:rotate(-135deg);margin:3px 0 0 0}.ss-main .ss-single-selected .ss-arrow span.arrow-down{transform:rotate(45deg);margin:-3px 0 0 0}.ss-main .ss-multi-selected{display:flex;flex-direction:row;cursor:pointer;min-height:30px;width:100%;padding:0 0 0 3px;border:1px solid #dcdee2;border-radius:4px;background-color:#fff;outline:0;box-sizing:border-box;transition:background-color .2s}.ss-main .ss-multi-selected.ss-disabled{background-color:#dcdee2;cursor:not-allowed}.ss-main .ss-multi-selected.ss-disabled .ss-values .ss-disabled{color:#666}.ss-main .ss-multi-selected.ss-disabled .ss-values .ss-value .ss-value-delete{cursor:not-allowed}.ss-main .ss-multi-selected.ss-open-above{border-top-left-radius:0px;border-top-right-radius:0px}.ss-main .ss-multi-selected.ss-open-below{border-bottom-left-radius:0px;border-bottom-right-radius:0px}.ss-main .ss-multi-selected .ss-values{display:flex;flex-wrap:wrap;justify-content:flex-start;flex:1 1 100%;width:calc(100% - 30px)}.ss-main .ss-multi-selected .ss-values .ss-disabled{display:flex;padding:4px 5px;margin:2px 0px;line-height:1em;align-items:center;width:100%;color:#dedede;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes scaleIn{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}@keyframes scaleOut{0%{transform:scale(1);opacity:1}100%{transform:scale(0);opacity:0}}.ss-main .ss-multi-selected .ss-values .ss-value{display:flex;user-select:none;align-items:center;font-size:12px;padding:3px 5px;margin:3px 5px 3px 0px;color:#fff;background-color:#5897fb;border-radius:4px;animation-name:scaleIn;animation-duration:.2s;animation-timing-function:ease-out;animation-fill-mode:both}.ss-main .ss-multi-selected .ss-values .ss-value.ss-out{animation-name:scaleOut;animation-duration:.2s;animation-timing-function:ease-out}.ss-main .ss-multi-selected .ss-values .ss-value .ss-value-delete{margin:0 0 0 5px;cursor:pointer}.ss-main .ss-multi-selected .ss-add{display:flex;flex:0 1 3px;margin:9px 12px 0 5px}.ss-main .ss-multi-selected .ss-add .ss-plus{display:flex;justify-content:center;align-items:center;background:#666;position:relative;height:10px;width:2px;transition:transform .2s}.ss-main .ss-multi-selected .ss-add .ss-plus:after{background:#666;content:\"\";position:absolute;height:2px;width:10px;left:-4px;top:4px}.ss-main .ss-multi-selected .ss-add .ss-plus.ss-cross{transform:rotate(45deg)}.ss-content{position:absolute;width:100%;margin:-1px 0 0 0;box-sizing:border-box;border:solid 1px #dcdee2;z-index:1010;background-color:#fff;transform-origin:center top;transition:transform .2s, opacity .2s;opacity:0;transform:scaleY(0)}.ss-content.ss-open{display:block;opacity:1;transform:scaleY(1)}.ss-content .ss-search{display:flex;flex-direction:row;padding:8px 8px 6px 8px}.ss-content .ss-search.ss-hide{height:0px;opacity:0;padding:0px 0px 0px 0px;margin:0px 0px 0px 0px}.ss-content .ss-search.ss-hide input{height:0px;opacity:0;padding:0px 0px 0px 0px;margin:0px 0px 0px 0px}.ss-content .ss-search input{display:inline-flex;font-size:inherit;line-height:inherit;flex:1 1 auto;width:100%;min-width:0px;height:30px;padding:6px 8px;margin:0;border:1px solid #dcdee2;border-radius:4px;background-color:#fff;outline:0;text-align:left;box-sizing:border-box;-webkit-box-sizing:border-box;-webkit-appearance:textfield}.ss-content .ss-search input::placeholder{color:#8a8a8a;vertical-align:middle}.ss-content .ss-search input:focus{box-shadow:0 0 5px #5897fb}.ss-content .ss-search .ss-addable{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;font-size:22px;font-weight:bold;flex:0 0 30px;height:30px;margin:0 0 0 8px;border:1px solid #dcdee2;border-radius:4px;box-sizing:border-box}.ss-content .ss-addable{padding-top:0px}.ss-content .ss-list{max-height:200px;overflow-x:hidden;overflow-y:auto;text-align:left}.ss-content .ss-list .ss-optgroup .ss-optgroup-label{padding:6px 10px 6px 10px;font-weight:bold}.ss-content .ss-list .ss-optgroup .ss-option{padding:6px 6px 6px 25px}.ss-content .ss-list .ss-optgroup-label-selectable{cursor:pointer}.ss-content .ss-list .ss-optgroup-label-selectable:hover{color:#fff;background-color:#5897fb}.ss-content .ss-list .ss-option{padding:6px 10px 6px 10px;cursor:pointer;user-select:none}.ss-content .ss-list .ss-option *{display:inline-block}.ss-content .ss-list .ss-option:hover,.ss-content .ss-list .ss-option.ss-highlighted{color:#fff;background-color:#5897fb}.ss-content .ss-list .ss-option.ss-disabled{cursor:not-allowed;color:#dedede;background-color:#fff}.ss-content .ss-list .ss-option:not(.ss-disabled).ss-option-selected{color:#666;background-color:rgba(88,151,251,0.1)}.ss-content .ss-list .ss-option.ss-hide{display:none}.ss-content .ss-list .ss-option .ss-search-highlight{background-color:#fffb8c}\n\n";
-
-  const styleEl = document.createElement("style");
-  const codeEl = document.createTextNode(code);
-  styleEl.type = 'text/css';
-  styleEl.appendChild(codeEl);
-  document.head.appendChild(styleEl);
-}

package/dist/new-widgets/interfaces.js

@@ -1 +0,0 @@
-export {};

package/dist/new-widgets/new-widget-factory.js

@@ -1,91 +0,0 @@
-import { Sib } from '../libs/Sib.js';
-import { BaseWidgetMixin } from './baseWidgetMixin.js';
-import { defaultTemplates, displayTemplates, formTemplates, setTemplates, groupTemplates } from './templates/index.js';
-import { valueTransformationDirectory } from './valueTransformationMixins/index.js';
-import { templateAdditionDirectory } from './templateAdditionMixins/index.js';
-import { attributeDirectory } from './attributeMixins/index.js';
-import { callbackDirectory } from './callbackMixins/index.js';
-const valueTransformationKeys = Object.keys(valueTransformationDirectory);
-const attributeKeys = Object.keys(attributeDirectory);
-const templateAdditionKeys = Object.keys(templateAdditionDirectory);
-const callbackKeys = Object.keys(callbackDirectory);
-
-/**
- * Create and register a widget based on its tagName
- * @param tagName - string
- */
-export const newWidgetFactory = tagName => {
-  let widgetMixins;
-  try {
-    widgetMixins = getWidgetMixins(tagName);
-  } // get mixins and template
-  catch (e) {
-    console.error(e);
-    return;
-  }
-  const newWidget = {
-    // compose widget
-    name: tagName,
-    use: [...widgetMixins.mixins, BaseWidgetMixin // at the end so created() is called first
-    ],
-
-    get template() {
-      return widgetMixins.templateMixin.template;
-    }
-  };
-  Sib.register(newWidget); // and register component
-};
-
-/**
- * Returns mixins and the template of a widget, depending of its tagName
- * @param tagName - string
- */
-function getWidgetMixins(tagName) {
-  const valueTransformations = [];
-  const attributes = [];
-  const templateAdditions = [];
-  const callbacks = [];
-  let template = null;
-
-  // decompose widget name
-  const mixinNames = tagName.split('-').filter(t => t !== 'solid');
-
-  // choose widget type (default or set)
-  let widgetType = defaultTemplates;
-  if (mixinNames.includes('display')) widgetType = displayTemplates;else if (mixinNames.includes('form')) widgetType = formTemplates;else if (mixinNames.includes('set')) widgetType = setTemplates;else if (mixinNames.includes('group')) widgetType = groupTemplates;
-  const templateKeys = Object.keys(widgetType);
-
-  // build mixins array
-  for (const mixin of mixinNames) {
-    // features
-    if (valueTransformationKeys.includes(mixin)) {
-      valueTransformations.push(valueTransformationDirectory[mixin]);
-    }
-    if (attributeKeys.includes(mixin)) {
-      attributes.push(attributeDirectory[mixin]);
-    }
-    if (templateAdditionKeys.includes(mixin)) {
-      templateAdditions.push(templateAdditionDirectory[mixin]);
-    }
-    if (callbackKeys.includes(mixin)) {
-      callbacks.push(callbackDirectory[mixin]);
-    }
-
-    // template
-    if (templateKeys.includes(mixin)) {
-      template = widgetType[mixin];
-    }
-  }
-  if (!template) throw `No template found for widget "${tagName}"`;
-  return {
-    templateMixin: template,
-    mixins: [...valueTransformations, ...attributes, ...templateAdditions, ...(template.dependencies || []), ...callbacks]
-  };
-}
-
-// create default widgets
-newWidgetFactory('solid-form-dropdown');
-newWidgetFactory('solid-form-multicheckbox');
-newWidgetFactory('solid-form-file-label');
-newWidgetFactory('solid-action');
-newWidgetFactory('solid-group-default');

package/dist/new-widgets/templateAdditionMixins/addableMixin.js

@@ -1,26 +0,0 @@
-import { spread } from '../../libs/lit-helpers.js';
-import { html } from '../../_snowpack/pkg/lit-html.js';
-const AddableMixin = {
-  name: 'addable-mixin',
-  created() {
-    this.listTemplateAdditions.push(this.addableValue.bind(this));
-  },
-  getAddableAttributes() {
-    const addableAttr = Array.from(this.element.attributes).filter(a => a.name.startsWith('addable-'));
-    const cleanAddableAttr = {};
-    for (let attr of addableAttr) cleanAddableAttr[attr.name.replace('addable-', '')] = attr.value;
-    if (!cleanAddableAttr.hasOwnProperty('data-src')) cleanAddableAttr['data-src'] = this.range;
-    return cleanAddableAttr;
-  },
-  addableValue(template, listTemplateAdditions, attributes) {
-    const addables = this.getAddableAttributes(attributes);
-    const newTemplate = html`
-      ${template}
-      <solid-form ...=${spread(addables)}>
-      </solid-form>
-    `;
-    const nextProcessor = listTemplateAdditions.shift();
-    if (nextProcessor) nextProcessor(newTemplate, listTemplateAdditions);
-  }
-};
-export { AddableMixin };

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

@@ -1,13 +0,0 @@
-import { LabelMixin } from './labelMixin.js';
-import { LabelLastMixin } from './labelLastMixin.js';
-import { AddableMixin } from './addableMixin.js';
-
-/**
- * DOM Additions
- */
-const templateAdditionDirectory = {
-  label: LabelMixin,
-  labellast: LabelLastMixin,
-  addable: AddableMixin
-};
-export { templateAdditionDirectory, LabelMixin, LabelLastMixin, AddableMixin };

package/dist/new-widgets/templateAdditionMixins/labelLastMixin.js

@@ -1,16 +0,0 @@
-import { html } from '../../_snowpack/pkg/lit-html.js';
-const LabelLastMixin = {
-  name: 'label-last-mixin',
-  created() {
-    this.listTemplateAdditions.push(this.addLabelLast.bind(this));
-  },
-  addLabelLast(template, listTemplateAdditions) {
-    const newTemplate = html`
-      ${template}
-      <label>${this.label || this.name}</label>
-    `;
-    const nextProcessor = listTemplateAdditions.shift();
-    if (nextProcessor) nextProcessor(newTemplate, listTemplateAdditions);
-  }
-};
-export { LabelLastMixin };

package/dist/new-widgets/templateAdditionMixins/labelMixin.js

@@ -1,18 +0,0 @@
-import { html } from '../../_snowpack/pkg/lit-html.js';
-import { uniqID } from '../../libs/helpers.js';
-const LabelMixin = {
-  name: 'label-mixin',
-  created() {
-    this.listAttributes['id'] = uniqID();
-    this.listTemplateAdditions.push(this.addLabel.bind(this));
-  },
-  addLabel(template, listTemplateAdditions) {
-    const newTemplate = html`
-      <label for="${this.listAttributes['id']}">${this.label || this.name}</label>
-      ${template}
-    `;
-    const nextProcessor = listTemplateAdditions.shift();
-    if (nextProcessor) nextProcessor(newTemplate, listTemplateAdditions);
-  }
-};
-export { LabelMixin };

package/dist/new-widgets/templates/defaultTemplatesDirectory.js

@@ -1,29 +0,0 @@
-import { html } from '../../_snowpack/pkg/lit-html.js';
-import { ifDefined } from '../../_snowpack/pkg/lit-html/directives/if-defined.js';
-import { LinkTextMixin } from '../templatesDependencies/linkTextMixin.js';
-export const defaultTemplates = {
-  action: {
-    template: (value, attributes) => html`
-      <solid-link
-        data-src=${ifDefined(attributes.src)}
-        next=${ifDefined(value)}
-        id=${ifDefined(attributes.id)}
-        link-text=${ifDefined(attributes.linkText)}
-      >
-        ${attributes.linkText == null ? attributes.name || '' : attributes.linkText}
-      </solid-link>
-    `,
-    dependencies: [LinkTextMixin]
-  },
-  multiple: {
-    template: (value, attributes) => html`
-      <solid-display
-        data-src=${value || ''}
-        fields=${ifDefined(attributes.fields)}
-        next=${ifDefined(attributes.next)}
-        empty-widget=${ifDefined(attributes.emptyWidget)}
-      ></solid-display>
-    `,
-    dependencies: []
-  }
-};

package/dist/new-widgets/templates/displayTemplatesDirectory.js

@@ -1,54 +0,0 @@
-import { EditableMixin } from '../templatesDependencies/editableMixin.js';
-import { AltMixin } from '../templatesDependencies/altMixin.js';
-import { LinkTextMixin } from '../templatesDependencies/linkTextMixin.js';
-import { html } from '../../_snowpack/pkg/lit-html.js';
-import { ifDefined } from '../../_snowpack/pkg/lit-html/directives/if-defined.js';
-export const displayTemplates = {
-  value: {
-    template: value => html`${value}`,
-    dependencies: []
-  },
-  div: {
-    template: (value, attributes) => html`
-      <div
-        name=${ifDefined(attributes.name)}
-        ?data-editable=${attributes.editable}
-      >
-        ${value}
-      </div>
-    `,
-    dependencies: [EditableMixin]
-  },
-  link: {
-    template: (value, attributes) => html`
-      <a
-        name=${ifDefined(attributes.name)}
-        href=${(attributes.mailto || attributes.tel || '') + (value || '#')}
-        target=${ifDefined(attributes.target)}
-        ?data-editable=${attributes.editable}
-        id=${ifDefined(attributes.id)}
-        link-text=${ifDefined(attributes.linkText)}
-      >
-        ${attributes.linkText || value || ''}
-      </a>
-    `,
-    dependencies: [EditableMixin, LinkTextMixin]
-  },
-  img: {
-    template: (value, attributes) => html`
-      <img
-        name=${ifDefined(attributes.name)}
-        src=${ifDefined(value)}
-        alt=${ifDefined(attributes.alt)}
-        style="max-width: 100%; max-height: 100%;"
-      />
-    `,
-    dependencies: [AltMixin]
-  },
-  boolean: {
-    template: (value, attributes) => html`
-      ${value === 'true' ? html`<label>${attributes.label || attributes.name || ''}</label>` : ''}
-    `,
-    dependencies: []
-  }
-};