@startinblox/core 0.0.0

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

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

@@ -0,0 +1,2 @@
+.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}
+

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

@@ -0,0 +1,10 @@
+// [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

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

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

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

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

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

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

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

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

@@ -0,0 +1,54 @@
+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: []
+  }
+};