@startinblox/core 0.17.31 → 0.18.0-beta.1

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

@@ -1,295 +1,3 @@
-function _templateObject29() {
-  const data = _taggedTemplateLiteral(["\n      <input\n        type=\"time\"\n        placeholder=", "\n        name=", "\n        id=", "\n        value=", "\n        min=", "\n        max=", "\n        step=", "\n        ?required=", "\n        data-holder\n        @change=", "\n      />\n    "]);
-
-  _templateObject29 = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject28() {
-  const data = _taggedTemplateLiteral(["\n      <input\n        type=\"password\"\n        placeholder=", "\n        id=", "\n        name=", "\n        value=", "\n        ?required=", "\n        pattern=", "\n        title=", "\n        data-holder\n        maxlength=", "\n        minlength=", "\n        @change=", "\n      />\n    "]);
-
-  _templateObject28 = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject27() {
-  const data = _taggedTemplateLiteral(["\n      <input\n        type=\"email\"\n        placeholder=", "\n        id=", "\n        name=", "\n        value=", "\n        ?required=", "\n        data-holder\n        maxlength=", "\n        minlength=", "\n        @change=", "\n      />\n    "]);
-
-  _templateObject27 = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject26() {
-  const data = _taggedTemplateLiteral(["\n      <input\n        type=\"color\"\n        placeholder=", "\n        id=", "\n        name=", "\n        ?required=", "\n        value=", "\n        data-holder\n        @change=", "\n      />\n    "]);
-
-  _templateObject26 = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject25() {
-  const data = _taggedTemplateLiteral(["\n      <div \n        data-richtext\n        name=", "\n        data-holder\n      ></div>\n    "]);
-
-  _templateObject25 = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject24() {
-  const data = _taggedTemplateLiteral(["\n      <div>\n        <input\n          data-holder\n          type=\"text\"\n          name=", "\n          value=", "\n          ?required=", "\n        >\n        <input\n          type=\"file\"\n          accept=\"image/*\"\n          id=", "\n          value=", "\n          @change=", "\n        />\n        <img\n          src=", "\n          ?hidden=", "\n        />\n        <button\n          ?hidden=", "\n          @click=", "\n        >\xD7</button>\n        <span>", "</span>\n      </div>\n    "]);
-
-  _templateObject24 = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject23() {
-  const data = _taggedTemplateLiteral(["\n      <div>\n        <input\n          data-holder\n          type=\"text\"\n          ?required=", "\n          name=", "\n          value=", "\n        >\n        <input\n          type=\"file\"\n          id=", "\n          value=", "\n          @change=", "\n        />\n        <button\n          ?hidden=", "\n          @click=", "\n        >\xD7</button>\n        <span>", "</span>\n      </div>\n    "]);
-
-  _templateObject23 = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject22() {
-  const data = _taggedTemplateLiteral(["\n      <solid-form-dropdown\n        data-holder\n        name=", "\n        data-id=", "\n        range=", "\n        values=", "\n        order-asc=", "\n        order-desc=", "\n        ?required=", "\n        multiple\n      ></solid-form-dropdown>\n    "]);
-
-  _templateObject22 = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject21() {
-  const data = _taggedTemplateLiteral(["\n        <div data-index=", ">\n          ", "\n          <button type=\"button\" @click=", ">", "</button>\n        </div>\n      "]);
-
-  _templateObject21 = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject20() {
-  const data = _taggedTemplateLiteral(["\n      ", "\n      <button type=\"button\" @click=", ">", "</button>\n    "]);
-
-  _templateObject20 = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject19() {
-  const data = _taggedTemplateLiteral(["\n      <solid-form-multicheckbox\n        data-holder\n        name=", "\n        range=", "\n        enum=", "\n        values=", "\n        order-asc=", "\n        order-desc=", "\n        ?required=", "\n      ></solid-form-multicheckbox>\n    "]);
-
-  _templateObject19 = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject18() {
-  const data = _taggedTemplateLiteral(["\n          <label>\n            <input type=\"checkbox\"\n              value=\"", "\"\n            /> <span>", "</span>\n          </label>\n        "]);
-
-  _templateObject18 = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject17() {
-  const data = _taggedTemplateLiteral(["\n          <label>\n            <input\n              type=\"checkbox\"\n              value=", "\n              ?checked=", "\n            /> <span>", "</span>\n          </label>\n        "]);
-
-  _templateObject17 = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject16() {
-  const data = _taggedTemplateLiteral(["\n      <div\n        name=", "\n      >\n        ", "\n        ", "\n      </select>\n    "]);
-
-  _templateObject16 = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject15() {
-  const data = _taggedTemplateLiteral(["\n          <label>\n            <input\n              type=\"radio\"\n              value=\"", "\"\n              name=", "\n              ?required=", "\n              ?checked=", "\n            > <span>", "</span>\n          </label>\n        "]);
-
-  _templateObject15 = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject14() {
-  const data = _taggedTemplateLiteral(["\n          <label>\n            <input\n              type=\"radio\"\n              name=", "\n              value=", "\n              ?required=", "\n              ?checked=", "\n            > <span>", "</span>\n          </label>\n        "]);
-
-  _templateObject14 = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject13() {
-  const data = _taggedTemplateLiteral(["\n      <div\n        name=", "\n      >\n        ", "\n        ", "\n    "]);
-
-  _templateObject13 = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject12() {
-  const data = _taggedTemplateLiteral(["\n          <option\n            value=\"", "\"\n            ?selected=", "\n          >\n            ", "\n          </option>\n        "]);
-
-  _templateObject12 = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject11() {
-  const data = _taggedTemplateLiteral(["\n          <option\n            value=", "\n            ?selected=", "\n          >\n            ", "\n          </option>\n        "]);
-
-  _templateObject11 = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject10() {
-  const data = _taggedTemplateLiteral(["\n        <option value=\"\" ?selected=", ">\n          ", "\n        </option>\n        "]);
-
-  _templateObject10 = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject9() {
-  const data = _taggedTemplateLiteral(["\n      <select\n        name=", "\n        id=", "\n        data-holder\n        ?required=", "\n        ?multiple=", "\n        autocomplete=", "\n        @change=", "\n      >\n        ", "\n        ", "\n        ", "\n      </select>\n    "]);
-
-  _templateObject9 = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject8() {
-  const data = _taggedTemplateLiteral(["\n      <input\n        type=\"hidden\"\n        name=", "\n        value=", "\n        data-holder\n        @change=", "\n      />\n    "]);
-
-  _templateObject8 = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject7() {
-  const data = _taggedTemplateLiteral(["\n      <input\n        data-holder\n        type=\"number\"\n        name=\"", "-start\"\n        @change=", "\n        value=", "\n      />\n      <input\n        data-holder\n        type=\"number\"\n        name=\"", "-end\"\n        @change=", "\n        value=", "\n      />\n    "]);
-
-  _templateObject7 = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject6() {
-  const data = _taggedTemplateLiteral(["\n      <input\n        type=\"number\"\n        placeholder=", "\n        name=", "\n        id=", "\n        value=", "\n        min=", "\n        max=", "\n        step=", "\n        ?required=", "\n        data-holder\n        @change=", "\n      />\n    "]);
-
-  _templateObject6 = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5() {
-  const data = _taggedTemplateLiteral(["\n      <input\n        data-holder\n        type=\"date\"\n        name=\"", "-start\"\n        @change=", "\n        value=", "\n        />\n        <input\n        data-holder\n        type=\"date\"\n        name=\"", "-end\"\n        @change=", "\n        value=", "\n      />\n    "]);
-
-  _templateObject5 = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  const data = _taggedTemplateLiteral(["\n      <input\n        type=\"date\"\n        placeholder=", "\n        name=", "\n        id=", "\n        ?required=", "\n        value=", "\n        data-holder\n        @change=", "\n      />\n    "]);
-
-  _templateObject4 = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  const data = _taggedTemplateLiteral(["\n      <label>\n        <input\n          data-holder\n          type=\"checkbox\"\n          name=", "\n          ?required=", "\n          ?checked=", "\n          @change=", "\n        >\n        <div>", "</div>\n      </label>\n    "]);
-
-  _templateObject3 = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  const data = _taggedTemplateLiteral(["\n      <textarea\n        name=", "\n        id=", "\n        placeholder=", "\n        data-holder\n        ?required=", "\n        autocomplete=", "\n        maxlength=", "\n        minlength=", "\n        @change=", "\n      >", "</textarea>\n    "]);
-
-  _templateObject2 = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  const data = _taggedTemplateLiteral(["\n      <input\n        type=\"text\"\n        placeholder=", "\n        name=", "\n        id=", "\n        value=", "\n        pattern=", "\n        title=", "\n        ?required=", "\n        autocomplete=", "\n        data-holder\n        maxlength=", "\n        minlength=", "\n        @change=", "\n      />\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 { FormMixin } from '../templatesDependencies/formMixin.js';
 import { FormCheckboxMixin } from '../templatesDependencies/formCheckboxMixin.js';
 import { FormMinMaxMixin } from '../templatesDependencies/formMinMaxMixin.js';
@@ -310,88 +18,415 @@ import { html } from '../../_snowpack/pkg/lit-html.js';
 import { ifDefined } from '../../_snowpack/pkg/lit-html/directives/if-defined.js';
 export const formTemplates = {
   text: {
-    template: (value, attributes) => html(_templateObject(), ifDefined(attributes.placeholder), ifDefined(attributes.name), ifDefined(attributes.id), value || '', ifDefined(attributes.pattern), ifDefined(attributes.title), attributes.required, ifDefined(attributes.autocomplete), ifDefined(attributes.maxlength), ifDefined(attributes.minlength), attributes.onChange),
+    template: (value, attributes) => html`
+      <input
+        type="text"
+        placeholder=${ifDefined(attributes.placeholder)}
+        name=${ifDefined(attributes.name)}
+        id=${ifDefined(attributes.id)}
+        value=${value || ''}
+        pattern=${ifDefined(attributes.pattern)}
+        title=${ifDefined(attributes.title)}
+        ?required=${attributes.required}
+        autocomplete=${ifDefined(attributes.autocomplete)}
+        data-holder
+        maxlength=${ifDefined(attributes.maxlength)}
+        minlength=${ifDefined(attributes.minlength)}
+        @change=${attributes.onChange}
+      />
+    `,
     dependencies: [FormMixin, PatternMixin, FormLengthMixin]
   },
   textarea: {
-    template: (value, attributes) => html(_templateObject2(), ifDefined(attributes.name), ifDefined(attributes.id), ifDefined(attributes.placeholder), attributes.required, ifDefined(attributes.autocomplete), ifDefined(attributes.maxlength), ifDefined(attributes.minlength), attributes.onChange, value),
+    template: (value, attributes) => html`
+      <textarea
+        name=${ifDefined(attributes.name)}
+        id=${ifDefined(attributes.id)}
+        placeholder=${ifDefined(attributes.placeholder)}
+        data-holder
+        ?required=${attributes.required}
+        autocomplete=${ifDefined(attributes.autocomplete)}
+        maxlength=${ifDefined(attributes.maxlength)}
+        minlength=${ifDefined(attributes.minlength)}
+        @change=${attributes.onChange}
+      >${value}</textarea>
+    `,
     dependencies: [FormMixin, FormLengthMixin]
   },
   checkbox: {
-    template: (value, attributes) => html(_templateObject3(), ifDefined(attributes.name), attributes.required, value === 'true', attributes.onChange, attributes.label || attributes.name),
+    template: (value, attributes) => html`
+      <label>
+        <input
+          data-holder
+          type="checkbox"
+          name=${ifDefined(attributes.name)}
+          ?required=${attributes.required}
+          ?checked=${value === 'true'}
+          @change=${attributes.onChange}
+        >
+        <div>${attributes.label || attributes.name}</div>
+      </label>
+    `,
     dependencies: [FormCheckboxMixin, FormMixin]
   },
   date: {
-    template: (_value, attributes) => html(_templateObject4(), ifDefined(attributes.placeholder), ifDefined(attributes.name), ifDefined(attributes.id), attributes.required, ifDefined(attributes.originalValue), attributes.onChange),
+    template: (_value, attributes) => html`
+      <input
+        type="date"
+        placeholder=${ifDefined(attributes.placeholder)}
+        name=${ifDefined(attributes.name)}
+        id=${ifDefined(attributes.id)}
+        ?required=${attributes.required}
+        value=${ifDefined(attributes.originalValue)}
+        data-holder
+        @change=${attributes.onChange}
+      />
+    `,
     dependencies: [FormMixin]
   },
   rangedate: {
-    template: (_value, attributes) => html(_templateObject5(), attributes.name || '', attributes.onChange, ifDefined(attributes.startValue), attributes.name || '', attributes.onChange, ifDefined(attributes.endValue)),
+    template: (_value, attributes) => html`
+      <input
+        data-holder
+        type="date"
+        name="${attributes.name || ''}-start"
+        @change=${attributes.onChange}
+        value=${ifDefined(attributes.startValue)}
+        />
+        <input
+        data-holder
+        type="date"
+        name="${attributes.name || ''}-end"
+        @change=${attributes.onChange}
+        value=${ifDefined(attributes.endValue)}
+      />
+    `,
     dependencies: [FilterRangeFormMixin, FormMixin]
   },
   number: {
-    template: (value, attributes) => html(_templateObject6(), ifDefined(attributes.placeholder), ifDefined(attributes.name), ifDefined(attributes.id), value, ifDefined(attributes.min), ifDefined(attributes.max), ifDefined(attributes.step), attributes.required, attributes.onChange),
+    template: (value, attributes) => html`
+      <input
+        type="number"
+        placeholder=${ifDefined(attributes.placeholder)}
+        name=${ifDefined(attributes.name)}
+        id=${ifDefined(attributes.id)}
+        value=${value}
+        min=${ifDefined(attributes.min)}
+        max=${ifDefined(attributes.max)}
+        step=${ifDefined(attributes.step)}
+        ?required=${attributes.required}
+        data-holder
+        @change=${attributes.onChange}
+      />
+    `,
     dependencies: [FormNumberMixin, FormMinMaxMixin, FormMixin, FormStepMixin]
   },
   rangenumber: {
-    template: (_value, attributes) => html(_templateObject7(), attributes.name || '', attributes.onChange, ifDefined(attributes.startValue), attributes.name || '', attributes.onChange, ifDefined(attributes.endValue)),
+    template: (_value, attributes) => html`
+      <input
+        data-holder
+        type="number"
+        name="${attributes.name || ''}-start"
+        @change=${attributes.onChange}
+        value=${ifDefined(attributes.startValue)}
+      />
+      <input
+        data-holder
+        type="number"
+        name="${attributes.name || ''}-end"
+        @change=${attributes.onChange}
+        value=${ifDefined(attributes.endValue)}
+      />
+    `,
     dependencies: [FilterRangeFormMixin, FormNumberMixin, FormMixin]
   },
   hidden: {
-    template: (value, attributes) => html(_templateObject8(), ifDefined(attributes.name), value, attributes.onChange),
+    template: (value, attributes) => html`
+      <input
+        type="hidden"
+        name=${ifDefined(attributes.name)}
+        value=${value}
+        data-holder
+        @change=${attributes.onChange}
+      />
+    `,
     dependencies: [FormMixin]
   },
   dropdown: {
-    template: (value, attributes) => html(_templateObject9(), ifDefined(attributes.name), ifDefined(attributes.id), attributes.required, attributes.multiple, ifDefined(attributes.autocomplete), attributes.onChange, !(attributes.multiple || attributes.autocomplete) ? html(_templateObject10(), value === "", attributes.placeholder || '-') : '', (attributes.range || []).map(el => html(_templateObject11(), el.value, !attributes.multiple ? value === el.selectedValue : attributes.values.includes(el.selectedValue), el.label)), Object.entries(attributes.enum || []).map(([key, val]) => html(_templateObject12(), key, !attributes.multiple ? value === key : attributes.values.includes(key), val))),
+    template: (value, attributes) => html`
+      <select
+        name=${ifDefined(attributes.name)}
+        id=${ifDefined(attributes.id)}
+        data-holder
+        ?required=${attributes.required}
+        ?multiple=${attributes.multiple}
+        autocomplete=${ifDefined(attributes.autocomplete)}
+        @change=${attributes.onChange}
+      >
+        ${!(attributes.multiple || attributes.autocomplete) ? html`
+        <option value="" ?selected=${value === ""}>
+          ${attributes.placeholder || '-'}
+        </option>
+        ` : ''}
+        ${(attributes.range || []).map(el => html`
+          <option
+            value=${el.value}
+            ?selected=${!attributes.multiple ? value === el.selectedValue : attributes.values.includes(el.selectedValue)}
+          >
+            ${el.label}
+          </option>
+        `)}
+        ${Object.entries(attributes.enum || []).map(_ref => {
+      let [key, val] = _ref;
+      return html`
+          <option
+            value="${key}"
+            ?selected=${!attributes.multiple ? value === key : attributes.values.includes(key)}
+          >
+            ${val}
+          </option>
+        `;
+    })}
+      </select>
+    `,
     dependencies: [FormDropdownMixin, FormMixin, RangeMixin]
   },
   radio: {
-    template: (value, attributes) => html(_templateObject13(), ifDefined(attributes.name), (attributes.range || []).map(el => html(_templateObject14(), ifDefined(attributes.id), el.value, attributes.required, value === el.selectedValue, el.label)), Object.entries(attributes.enum || []).map(([key, val]) => html(_templateObject15(), key, ifDefined(attributes.id), attributes.required, value === key, val))),
+    template: (value, attributes) => html`
+      <div
+        name=${ifDefined(attributes.name)}
+      >
+        ${(attributes.range || []).map(el => html`
+          <label>
+            <input
+              type="radio"
+              name=${ifDefined(attributes.id)}
+              value=${el.value}
+              ?required=${attributes.required}
+              ?checked=${value === el.selectedValue}
+            > <span>${el.label}</span>
+          </label>
+        `)}
+        ${Object.entries(attributes.enum || []).map(_ref2 => {
+      let [key, val] = _ref2;
+      return html`
+          <label>
+            <input
+              type="radio"
+              value="${key}"
+              name=${ifDefined(attributes.id)}
+              ?required=${attributes.required}
+              ?checked=${value === key}
+            > <span>${val}</span>
+          </label>
+        `;
+    })}
+    `,
     dependencies: [FormRadioMixin, FormMixin, RangeMixin]
   },
   multicheckbox: {
-    template: (_value, attributes) => html(_templateObject16(), ifDefined(attributes.name), (attributes.range || []).map(el => html(_templateObject17(), el.value, attributes.values.includes(el.selectedValue), el.label)), Object.entries(attributes.enum || []).map(([key, val]) => html(_templateObject18(), key, val))),
+    template: (_value, attributes) => html`
+      <div
+        name=${ifDefined(attributes.name)}
+      >
+        ${(attributes.range || []).map(el => html`
+          <label>
+            <input
+              type="checkbox"
+              value=${el.value}
+              ?checked=${attributes.values.includes(el.selectedValue)}
+            /> <span>${el.label}</span>
+          </label>
+        `)}
+        ${Object.entries(attributes.enum || []).map(_ref3 => {
+      let [key, val] = _ref3;
+      return html`
+          <label>
+            <input type="checkbox"
+              value="${key}"
+            /> <span>${val}</span>
+          </label>
+        `;
+    })}
+      </select>
+    `,
     dependencies: [FormCheckboxesMixin, FormMixin, RangeMixin]
   },
   checkboxes: {
-    template: (_value, attributes) => html(_templateObject19(), ifDefined(attributes.name), ifDefined(attributes.range), ifDefined(attributes.enum), ifDefined(attributes.values), ifDefined(attributes.orderAsc), ifDefined(attributes.orderDesc), attributes.required),
+    template: (_value, attributes) => html`
+      <solid-form-multicheckbox
+        data-holder
+        name=${ifDefined(attributes.name)}
+        range=${ifDefined(attributes.range)}
+        enum=${ifDefined(attributes.enum)}
+        values=${ifDefined(attributes.values)}
+        order-asc=${ifDefined(attributes.orderAsc)}
+        order-desc=${ifDefined(attributes.orderDesc)}
+        ?required=${attributes.required}
+      ></solid-form-multicheckbox>
+    `,
     dependencies: [MultipleselectFormMixin, FormMixin]
   },
   multiple: {
-    template: (_value, attributes) => html(_templateObject20(), (attributes.children || []).map((child, index) => html(_templateObject21(), attributes.name + index, child, () => attributes.removeItem(index), attributes.removeLabel)), attributes.addItem, attributes.addLabel),
+    template: (_value, attributes) => html`
+      ${(attributes.children || []).map((child, index) => html`
+        <div data-index=${attributes.name + index}>
+          ${child}
+          <button type="button" class=${ifDefined(attributes.removeClass)} @click=${() => attributes.removeItem(index)}>${attributes.removeLabel}</button>
+        </div>
+      `)}
+      <button type="button" class=${ifDefined(attributes.addClass)} @click=${attributes.addItem}>${attributes.addLabel}</button>
+    `,
     dependencies: [MultipleFormMixin, FormMixin]
   },
   multipleselect: {
-    template: (_value, attributes) => html(_templateObject22(), ifDefined(attributes.name), ifDefined(attributes.id), ifDefined(attributes.range), ifDefined(attributes.values), ifDefined(attributes.orderAsc), ifDefined(attributes.orderDesc), attributes.required),
+    template: (_value, attributes) => html`
+      <solid-form-dropdown
+        data-holder
+        name=${ifDefined(attributes.name)}
+        data-id=${ifDefined(attributes.id)}
+        range=${ifDefined(attributes.range)}
+        values=${ifDefined(attributes.values)}
+        order-asc=${ifDefined(attributes.orderAsc)}
+        order-desc=${ifDefined(attributes.orderDesc)}
+        ?required=${attributes.required}
+        multiple
+      ></solid-form-dropdown>
+    `,
     dependencies: [MultipleselectFormMixin, FormMixin]
   },
   file: {
-    template: (value, attributes) => html(_templateObject23(), attributes.required, ifDefined(attributes.name), value || '', ifDefined(attributes.id), ifDefined(attributes.fileValue), attributes.selectFile, attributes.resetButtonHidden, attributes.resetFile, attributes.output),
+    template: (value, attributes) => html`
+      <div>
+        <input
+          data-holder
+          type="text"
+          ?required=${attributes.required}
+          name=${ifDefined(attributes.name)}
+          value=${value || ''}
+        >
+        <input
+          type="file"
+          id=${ifDefined(attributes.id)}
+          value=${ifDefined(attributes.fileValue)}
+          @change=${attributes.selectFile}
+        />
+        <button
+          ?hidden=${attributes.resetButtonHidden}
+          @click=${attributes.resetFile}
+        >×</button>
+        <span>${attributes.output}</span>
+      </div>
+    `,
     dependencies: [FormFileMixin, FormMixin]
   },
   image: {
-    template: (value, attributes) => html(_templateObject24(), ifDefined(attributes.name), value || '', attributes.required, ifDefined(attributes.id), ifDefined(attributes.fileValue), attributes.selectFile, value || '', value === '', attributes.resetButtonHidden, attributes.resetFile, attributes.output),
+    template: (value, attributes) => html`
+      <div>
+        <input
+          data-holder
+          type="text"
+          name=${ifDefined(attributes.name)}
+          value=${value || ''}
+          ?required=${attributes.required}
+        >
+        <input
+          type="file"
+          accept="image/*"
+          id=${ifDefined(attributes.id)}
+          value=${ifDefined(attributes.fileValue)}
+          @change=${attributes.selectFile}
+        />
+        <img
+          src=${value || ''}
+          ?hidden=${value === ''}
+        />
+        <button
+          ?hidden=${attributes.resetButtonHidden}
+          @click=${attributes.resetFile}
+        >×</button>
+        <span>${attributes.output}</span>
+      </div>
+    `,
     dependencies: [FormFileMixin, FormMixin]
   },
   richtext: {
-    template: (_value, attributes) => html(_templateObject25(), ifDefined(attributes.name)),
+    template: (_value, attributes) => html`
+      <div 
+        data-richtext
+        name=${ifDefined(attributes.name)}
+        data-holder
+      ></div>
+    `,
     dependencies: [ValueRichtextMixin, FormMixin]
   },
   color: {
-    template: (_value, attributes) => html(_templateObject26(), ifDefined(attributes.placeholder), ifDefined(attributes.id), ifDefined(attributes.name), attributes.required, ifDefined(attributes.originalValue), attributes.onChange),
+    template: (_value, attributes) => html`
+      <input
+        type="color"
+        placeholder=${ifDefined(attributes.placeholder)}
+        id=${ifDefined(attributes.id)}
+        name=${ifDefined(attributes.name)}
+        ?required=${attributes.required}
+        value=${ifDefined(attributes.originalValue)}
+        data-holder
+        @change=${attributes.onChange}
+      />
+    `,
     dependencies: [FormMixin]
   },
   email: {
-    template: (value, attributes) => html(_templateObject27(), ifDefined(attributes.placeholder), ifDefined(attributes.id), ifDefined(attributes.name), value || '', attributes.required, ifDefined(attributes.maxlength), ifDefined(attributes.minlength), attributes.onChange),
+    template: (value, attributes) => html`
+      <input
+        type="email"
+        placeholder=${ifDefined(attributes.placeholder)}
+        id=${ifDefined(attributes.id)}
+        name=${ifDefined(attributes.name)}
+        value=${value || ''}
+        ?required=${attributes.required}
+        data-holder
+        maxlength=${ifDefined(attributes.maxlength)}
+        minlength=${ifDefined(attributes.minlength)}
+        @change=${attributes.onChange}
+      />
+    `,
     dependencies: [FormMixin, FormLengthMixin]
   },
   password: {
-    template: (value, attributes) => html(_templateObject28(), ifDefined(attributes.placeholder), ifDefined(attributes.id), ifDefined(attributes.name), value || '', attributes.required, ifDefined(attributes.pattern), ifDefined(attributes.title), ifDefined(attributes.maxlength), ifDefined(attributes.minlength), attributes.onChange),
+    template: (value, attributes) => html`
+      <input
+        type="password"
+        placeholder=${ifDefined(attributes.placeholder)}
+        id=${ifDefined(attributes.id)}
+        name=${ifDefined(attributes.name)}
+        value=${value || ''}
+        ?required=${attributes.required}
+        pattern=${ifDefined(attributes.pattern)}
+        title=${ifDefined(attributes.title)}
+        data-holder
+        maxlength=${ifDefined(attributes.maxlength)}
+        minlength=${ifDefined(attributes.minlength)}
+        @change=${attributes.onChange}
+      />
+    `,
     dependencies: [FormMixin, PatternMixin, FormLengthMixin]
   },
   time: {
-    template: (value, attributes) => html(_templateObject29(), ifDefined(attributes.placeholder), ifDefined(attributes.name), ifDefined(attributes.id), value || '', ifDefined(attributes.min), ifDefined(attributes.max), ifDefined(attributes.step), attributes.required, attributes.onChange),
+    template: (value, attributes) => html`
+      <input
+        type="time"
+        placeholder=${ifDefined(attributes.placeholder)}
+        name=${ifDefined(attributes.name)}
+        id=${ifDefined(attributes.id)}
+        value=${value || ''}
+        min=${ifDefined(attributes.min)}
+        max=${ifDefined(attributes.max)}
+        step=${ifDefined(attributes.step)}
+        ?required=${attributes.required}
+        data-holder
+        @change=${attributes.onChange}
+      />
+    `,
     dependencies: [FormMixin, FormMinMaxMixin, FormStepMixin]
   }
-};
-//# sourceMappingURL=formTemplatesDirectory.js.map
+};