@3t-transform/threeteeui 0.0.13 → 0.0.15

package/dist/collection/components/molecules/tttx-form/tttx-form.js

@@ -1,249 +0,0 @@
-import { h, Host } from '@stencil/core';
-export class TttxForm {
-  constructor() {
-    this.template = document.createElement('template');
-    this.formschema = undefined;
-    this.submitValue = undefined;
-  }
-  onFormSchemaChange(newValue) {
-    if (typeof newValue === 'string') {
-      this._formSchema = JSON.parse(newValue);
-    }
-    else {
-      this._formSchema = newValue;
-    }
-  }
-  validityCheck(event) {
-    var _a, _b, _c, _d;
-    event.preventDefault();
-    const target = event.target;
-    let hasError = true;
-    let errorMessage = '';
-    // validity object on HTML5 inputs has the following options
-    // badInput
-    // customError
-    // patternMismatch
-    // rangeOverflow
-    // rangeUnderflow
-    // stepMismatch
-    // tooLong
-    // tooShort
-    // typeMismatch
-    // valid
-    // valueMissing
-    // customErrors can be set with
-    // target.setCustomValidity('custom error!');
-    // and cleared with
-    // target.setCustomValidity('');
-    if (target.validity.valueMissing) {
-      errorMessage = (_a = target.dataset.required) !== null && _a !== void 0 ? _a : 'This field is required';
-    }
-    else if (target.validity.patternMismatch) {
-      errorMessage = (_b = target.dataset.pattern) !== null && _b !== void 0 ? _b : 'Incorrect format';
-    }
-    else if (target.validity.badInput) {
-      // IE string in a number field
-      errorMessage = (_c = target.dataset.badinput) !== null && _c !== void 0 ? _c : 'Wrong input type';
-    }
-    else if (target.validity.rangeOverflow || target.validity.rangeUnderflow) {
-      // IE date or number is above or below value set in min or max tags
-      errorMessage = (_d = target.dataset.range) !== null && _d !== void 0 ? _d : 'Invalid value';
-    }
-    else {
-      // no error
-      hasError = false;
-    }
-    if (hasError) {
-      target.className = 'invalid';
-      const errorIcon = document.createElement('span');
-      errorIcon.className = 'material-symbols-rounded';
-      errorIcon.textContent = 'warning';
-      target.parentElement.querySelector('.errorBubble').replaceChildren();
-      target.parentElement.querySelector('.errorBubble').append(errorIcon);
-      target.parentElement.querySelector('.errorBubble').append(errorMessage);
-    }
-    else {
-      target.className = '';
-      target.parentElement.querySelector('.errorBubble').replaceChildren();
-    }
-  }
-  doSubmit(event) {
-    event.preventDefault();
-    const formData = new FormData(event.target);
-    // Key value pair matching the key names given by the JSON schema will be output line by line
-    // TODO: Emit an event so external components can handle the resulting form data
-    // let output = "";
-    // for (var [key, value] of formData.entries()) {
-    //     output += `${key} -> ${value}\n`;
-    // }
-    // console.log(output);
-    this.submitEvent.emit(formData);
-  }
-  fieldsetChange(event) {
-    console.log(event.target.name + ' has changed');
-    // The correct input box will always be the target of the incoming event
-    // TODO: Emit an event so external components can change based on form values input
-  }
-  componentWillLoad() {
-    // set proper on initial render
-    this.onFormSchemaChange(this.formschema);
-  }
-  componentWillRender() {
-    this.template.content.replaceChildren(); // clear the template to account for a potential re-render scenario
-    this.populateFormFromSchema();
-  }
-  populateFormFromSchema() {
-    if (!this._formSchema)
-      return;
-    const properties = this._formSchema.properties;
-    const propertyKeys = Object.keys(properties);
-    propertyKeys.forEach(formKey => {
-      var _a, _b, _c;
-      const formItem = properties[formKey];
-      const formProperties = formItem.form;
-      const input = document.createElement('input');
-      input.name = formKey;
-      input.type = formProperties.type;
-      input.placeholder = (_a = formProperties.placeholder) !== null && _a !== void 0 ? _a : '';
-      input.autocomplete = 'off';
-      input.autocapitalize = 'off';
-      if (formProperties.validation) {
-        const validation = formProperties.validation;
-        if (validation.required) {
-          input.setAttribute('required', '');
-          input.setAttribute('data-required', (_b = validation.required.message) !== null && _b !== void 0 ? _b : '');
-        }
-        if (validation.pattern) {
-          input.setAttribute('pattern', validation.pattern.pattern);
-          input.setAttribute('data-pattern', (_c = validation.pattern.message) !== null && _c !== void 0 ? _c : '');
-        }
-        if (validation.badInput) {
-          input.setAttribute('data-badinput', validation.badInput.message);
-        }
-        if (validation.minmax) {
-          input.setAttribute('min', validation.minmax.min);
-          input.setAttribute('max', validation.minmax.max);
-          input.setAttribute('data-range', validation.minmax.message);
-        }
-        if (validation.maxlength) {
-          input.setAttribute('maxlength', validation.maxlength);
-        }
-      }
-      const errorBubble = document.createElement('div');
-      errorBubble.className = 'errorBubble';
-      const label = document.createElement('label');
-      label.className = 'inputBlock';
-      label.innerText = formProperties.label;
-      if (!formProperties.validation) {
-        const optionalSpan = document.createElement('span');
-        optionalSpan.className = 'optional';
-        optionalSpan.innerHTML = ' (optional)';
-        label.appendChild(optionalSpan);
-      }
-      label.appendChild(input);
-      label.appendChild(errorBubble);
-      this.template.content.append(label);
-    });
-    const submitButton = document.createElement('input');
-    submitButton.type = 'submit';
-    submitButton.className = 'button primary-blue';
-    console.log(this.submitValue);
-    submitButton.value = 'Save';
-    this.template.content.append(submitButton);
-  }
-  componentDidRender() {
-    if (!this._formSchema)
-      return;
-    const formItems = this.template.content.cloneNode(true);
-    // bind to events here as you can't do it in a template in stencil
-    const properties = this._formSchema.properties;
-    const propertyKeys = Object.keys(properties);
-    propertyKeys.forEach(formKey => {
-      formItems.querySelector(`[name=${formKey}]`).oninvalid = this.validityCheck.bind(this);
-      formItems.querySelector(`[name=${formKey}]`).onblur = this.validityCheck.bind(this);
-    });
-    // append to the fieldset
-    this.fieldset.appendChild(formItems);
-  }
-  render() {
-    return (h(Host, null, h("form", { onSubmit: this.doSubmit.bind(this) }, h("fieldset", { onChange: this.fieldsetChange, ref: el => (this.fieldset = el) }))));
-  }
-  static get is() { return "tttx-form"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["tttx-form.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["tttx-form.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "formschema": {
-        "type": "any",
-        "mutable": false,
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "formschema",
-        "reflect": false
-      },
-      "submitValue": {
-        "type": "any",
-        "mutable": false,
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "submit-value",
-        "reflect": false
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "submitEvent",
-        "name": "submitEvent",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "FormData",
-          "resolved": "FormData",
-          "references": {
-            "FormData": {
-              "location": "global"
-            }
-          }
-        }
-      }];
-  }
-  static get watchers() {
-    return [{
-        "propName": "formschema",
-        "methodName": "onFormSchemaChange"
-      }];
-  }
-}

package/dist/collection/components/molecules/tttx-form/tttx-form.stories.js

@@ -1,102 +0,0 @@
-export default {
-  title: 'molecules/tttx Form',
-  component: 'tttx-form',
-};
-const formSchema = {
-  properties: {
-    Title: {
-      type: 'string',
-      format: 'string',
-      form: {
-        type: 'text',
-        placeholder: 'Mr, Mrs, Dr, Hon Rev',
-        label: 'Title',
-      },
-    },
-    forename: {
-      type: 'string',
-      format: 'string',
-      form: {
-        type: 'text',
-        placeholder: 'John',
-        label: 'Forename',
-        validation: {
-          required: {
-            message: 'Please enter your forename',
-          },
-        },
-      },
-    },
-    surname: {
-      type: 'string',
-      format: 'string',
-      form: {
-        type: 'text',
-        placeholder: 'Doe',
-        label: 'Surname',
-        validation: {
-          required: {
-            message: 'Please enter your surname',
-          },
-        },
-      },
-    },
-    postcode: {
-      type: 'string',
-      format: 'string',
-      form: {
-        type: 'text',
-        placeholder: 'AB10',
-        label: 'Start of postcode',
-        validation: {
-          required: {
-            message: 'Please enter the beginning of your postcode',
-          },
-          pattern: {
-            pattern: '^([A-Za-z][0-9])$|^([A-Za-z][0-9]{2})$|^([A-Za-z]{2}[0-9])$|^([A-Za-z]{2}[0-9]{2})$|^([A-Za-z][0-9][A-Za-z])$|^([A-Za-z]{2}[0-9][A-Za-z])$|^(GIR|BF|BX|XX)$',
-            message: 'Please enter the first half of your postcode. EG: ZZ99',
-          },
-          maxlength: 4,
-        },
-      },
-    },
-    age: {
-      type: 'number',
-      format: 'number',
-      form: {
-        type: 'number',
-        placeholder: '',
-        label: 'Age',
-        validation: {
-          required: {
-            message: 'Please enter your age',
-          },
-          badInput: {
-            message: 'Please enter a number',
-          },
-        },
-      },
-    },
-    dob: {
-      type: 'string',
-      format: 'date-time',
-      form: {
-        type: 'date',
-        placeholder: '',
-        label: 'Date of birth',
-        validation: {
-          required: {
-            message: 'Please enter your date of birth',
-          },
-          minmax: {
-            min: '1900-01-01',
-            max: '2100-12-31',
-            message: 'Please enter a date between 1900 and 2100',
-          },
-        },
-      },
-    },
-  },
-};
-const jsonFormSchema = JSON.stringify(formSchema);
-export const ExampleFormFromJSON = () => `<tttx-form formSchema='${jsonFormSchema}'></tttx-form>`;

package/dist/collection/components/molecules/tttx-list/tttx-list.css

@@ -1,56 +0,0 @@
-.material-symbols-rounded {
-  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
-}
-
-.material-symbols-rounded {
-  font-family: "Material Symbols Rounded", sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-size: 24px;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  color: #9e9e9e;
-}
-
-:host {
-  display: flex;
-  flex-direction: column;
-}
-
-.tttx-list__row {
-  min-height: 52px;
-  line-height: 36px;
-  padding: 8px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  cursor: pointer;
-  border-bottom: 1px solid #d5d5d5;
-}
-.tttx-list__row .generic-template__content {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.tttx-list__row:first-of-type {
-  border-top: 1px solid #d5d5d5;
-}
-.tttx-list__row:focus, .tttx-list__row:active {
-  background-color: #e6e6e6;
-}
-.tttx-list__row.selected {
-  background-color: #e7f1f9;
-}
-
-.load-indicator {
-  display: flex;
-  justify-content: center;
-}