@3t-transform/threeteeui 0.0.15 → 0.0.16

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

@@ -0,0 +1,451 @@
+import { h, Host } from '@stencil/core';
+export class TttxForm {
+  constructor() {
+    // Create a new template element using the HTMLTemplateElement interface.
+    this.template = document.createElement('template');
+    this.formschema = undefined;
+    this.submitValue = undefined;
+  }
+  // This method is called whenever the "formschema" property changes
+  onFormSchemaChange(newValue) {
+    // Check if the new value is a string, indicating that it needs to be parsed
+    if (typeof newValue === 'string') {
+      // Parse the string and set the "_formSchema" property
+      this._formSchema = JSON.parse(newValue);
+    }
+    else {
+      // If the new value is already an object, set the "_formSchema" property directly
+      this._formSchema = newValue;
+    }
+  }
+  /**
+   * Handles the focus event for a form field and emits a "dataChanged" event
+   * to the parent component with the field name and its new value.
+   *
+   * @param {FocusEvent} event - The focus event triggered by the field.
+   * @return {void}
+   */
+  fieldChanged(event) {
+    // Extract the name and value of the field from the event
+    const fieldName = event.target.name;
+    const fieldValue = event.target.value;
+    // Emit an event to signal that the field's data has changed
+    this.dataChanged.emit({ name: fieldName, value: fieldValue });
+  }
+  /**
+   * Validates the input field on focusout event by checking its validity state,
+   * sets an error message if there's an issue, and emits a "dataChanged" event to
+   * the parent component with the field name and its new value.
+   *
+   * @param {FocusEvent} event - The focusout event triggered by the input field.
+   * @return {void}
+   */
+  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('');
+    // Check the validity of the input field and set an error message if needed
+    switch (true) {
+      // The field is required, but has no value
+      case target.validity.valueMissing:
+        errorMessage = (_a = target.dataset.required) !== null && _a !== void 0 ? _a : 'This field is required';
+        break;
+      // The field's value does not match the expected pattern
+      case target.validity.patternMismatch:
+        errorMessage = (_b = target.dataset.pattern) !== null && _b !== void 0 ? _b : 'Incorrect format';
+        break;
+      // The field's value is not of the correct input type
+      case target.validity.badInput:
+        // IE string in a number field
+        errorMessage = (_c = target.dataset.badinput) !== null && _c !== void 0 ? _c : 'Wrong input type';
+        break;
+      // The field's value is above or below the range set in the "min" and "max" attributes
+      case 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';
+        break;
+      // No error detected
+      default:
+        hasError = false;
+    }
+    // Set the error state of the input field based on the error message and whether an error was detected
+    this.setErrorState(target, hasError, errorMessage);
+  }
+  /**
+   * Sets the error state of an input field by updating its class and error message.
+   * If an error was detected, it sets the input field's class to "invalid" and
+   * displays the error message in an error bubble. If no error was detected,
+   * it removes the "invalid" class from the input field and clears the error bubble.
+   *
+   * @param {HTMLInputElement} target - The input field to update.
+   * @param {boolean} hasError - Whether an error was detected in the field.
+   * @param {string} errorMessage - The error message to display (if any).
+   * @return {void}
+   */
+  setErrorState(target, hasError, errorMessage) {
+    // Find the error bubble element for the input field
+    const errorBubble = target.parentElement.querySelector('.errorBubble');
+    // If an error was detected, set the input field's class to "invalid" and display the error message in the error bubble
+    if (hasError) {
+      target.className = 'invalid';
+      const errorIcon = this.createErrorIcon();
+      errorBubble.replaceChildren(errorIcon, errorMessage);
+    }
+    // If no error was detected, remove the "invalid" class from the input field and clear the error bubble
+    else {
+      target.className = '';
+      errorBubble.replaceChildren();
+    }
+  }
+  // Create an error icon element to display in the error bubble of an input field
+  createErrorIcon() {
+    // Create a new <span> element to serve as the error icon
+    const errorIcon = document.createElement('span');
+    // Set the class of the error icon to a pre-defined CSS class that specifies the icon's appearance
+    errorIcon.className = 'material-symbols-rounded';
+    // Set the text content of the error icon to the word "warning"
+    errorIcon.textContent = 'warning';
+    // Return the error icon element
+    return errorIcon;
+  }
+  /**
+   * Submits the form data to the server.
+   *
+   * @param {SubmitEvent} event - The event object for the form submission.
+   * @returns {void}
+   *
+   * @example
+   * const form = document.getElementById('myForm');
+   * form.addEventListener('submit', (event) => {
+   *   doSubmit(event);
+   * });
+   */
+  doSubmit(event) {
+    // prevent the form from submitting normally
+    event.preventDefault();
+    // create a new FormData object with the form data
+    const formData = new FormData(event.target);
+    // emit the form data through the `dataSubmitted` event
+    this.dataSubmitted.emit(formData);
+  }
+  // This method is called before the component is loaded into the DOM
+  componentWillLoad() {
+    // Initialize the form schema by calling the "onFormSchemaChange" method with the current "formschema" property
+    this.onFormSchemaChange(this.formschema);
+  }
+  // This method is called before the component is rendered
+  componentWillRender() {
+    // Clear the template to account for a potential re-render scenario
+    this.template = document.createElement('template');
+    // Populate the form from the form schema
+    this.populateFormFromSchema();
+  }
+  /**
+   * Creates a new HTMLInputElement with the specified name, type, and placeholder (if any),
+   * and sets its autocomplete and autocapitalization properties to off.
+   *
+   * @param {string} formKey - The name of the input field, as specified in the form schema.
+   * @param {Object} formProperties - An object containing additional properties for the input field, such as its type and placeholder value.
+   * @param {string} formProperties.type - The type of the input field (e.g., "text", "email", "number", etc.).
+   * @param {string} [formProperties.placeholder] - An optional placeholder value to display in the input field.
+   * @return {HTMLInputElement} - The new input element.
+   */
+  createInput(formKey, formProperties) {
+    var _a;
+    // Create a new <input> element with the specified name and type
+    const input = document.createElement('input');
+    input.name = formKey;
+    input.type = formProperties.type;
+    // Set the placeholder attribute to the specified value (if any)
+    input.placeholder = (_a = formProperties.placeholder) !== null && _a !== void 0 ? _a : '';
+    // Disable autocomplete and autocapitalization
+    input.autocomplete = 'off';
+    input.autocapitalize = 'off';
+    // Return the input element
+    return input;
+  }
+  /**
+   * Applies validation attributes to an input element based on the specified validation object.
+   * If a certain property is present in the object, it will set the corresponding attribute on
+   * the input element (e.g., "required" will set the "required" and "data-required" attributes,
+   * "pattern" will set the "pattern" and "data-pattern" attributes, etc.).
+   *
+   * @param {HTMLInputElement} input - The input element to apply validation attributes to.
+   * @param {Object} validation - An object containing the validation rules for the input field.
+   * @param {Object} [validation.required] - An object containing a "message" property to display if the field is required.
+   * @param {Object} [validation.pattern] - An object containing a "pattern" property to match against the field value, and a "message" property to display if the pattern doesn't match.
+   * @param {Object} [validation.badInput] - An object containing a "message" property to display if the field value is invalid.
+   * @param {Object} [validation.minmax] - An object containing "min" and "max" properties to validate the field value against, and a "message" property to display if the value is out of range.
+   * @param {string} [validation.maxlength] - The maximum length of the input field.
+   * @return {void}
+   */
+  applyValidation(input, validation) {
+    var _a, _b;
+    // If the "required" property is present, add the "required" attribute to the input element and
+    // set its "data-required" attribute to the specified message (if any)
+    if (validation.required) {
+      input.setAttribute('required', '');
+      input.setAttribute('data-required', (_a = validation.required.message) !== null && _a !== void 0 ? _a : '');
+    }
+    // If the "pattern" property is present, add the "pattern" attribute to the input element and set
+    // its "data-pattern" attribute to the specified message (if any)
+    if (validation.pattern) {
+      input.setAttribute('pattern', validation.pattern.pattern);
+      input.setAttribute('data-pattern', (_b = validation.pattern.message) !== null && _b !== void 0 ? _b : '');
+    }
+    // If the "badInput" property is present, set the input element's "data-badinput" attribute to
+    // the specified message
+    if (validation.badInput) {
+      input.setAttribute('data-badinput', validation.badInput.message);
+    }
+    // If the "minmax" property is present, add the "min" and "max" attributes to the input element
+    // and set its "data-range" attribute to the specified message (if any)
+    if (validation.minmax) {
+      input.setAttribute('min', validation.minmax.min);
+      input.setAttribute('max', validation.minmax.max);
+      input.setAttribute('data-range', validation.minmax.message);
+    }
+    // If the "maxlength" property is present, add the "maxlength" attribute to the input element
+    if (validation.maxlength) {
+      input.setAttribute('maxlength', validation.maxlength);
+    }
+  }
+  // Create a new error bubble element
+  createErrorBubble() {
+    // Create a new <div> element with the "errorBubble" class
+    const errorBubble = document.createElement('div');
+    errorBubble.className = 'errorBubble';
+    // Return the error bubble element
+    return errorBubble;
+  }
+  /**
+   * Creates a new <label> element with the "inputBlock" class and the specified label text,
+   * and appends the input element and error bubble element to it. If the form property has
+   * no validation object, it adds an "optional" span element to the label.
+   *
+   * @param {Object} formProperties - An object containing properties for the form field, including its label text and validation rules.
+   * @param {HTMLInputElement} input - The input element to associate with the label.
+   * @param {HTMLDivElement} errorBubble - The error bubble element to display error messages in.
+   * @return {HTMLLabelElement} - The new label element.
+   */
+  createLabel(formProperties, input, errorBubble) {
+    // Create a new <label> element with the "inputBlock" class and the specified text
+    const label = document.createElement('label');
+    label.className = 'inputBlock';
+    label.innerText = formProperties.label;
+    // If the form property has no validation object, add an "optional" span element to the label
+    if (!formProperties.validation) {
+      const optionalSpan = document.createElement('span');
+      optionalSpan.className = 'optional';
+      optionalSpan.innerHTML = '&nbsp;(optional)';
+      label.appendChild(optionalSpan);
+    }
+    // Append the input element and error bubble element to the label
+    label.appendChild(input);
+    label.appendChild(errorBubble);
+    // Return the label element
+    return label;
+  }
+  /**
+   * Creates a new <input> element with the "submit" type, the "primary-blue" class, and the
+   * specified label text (i.e., "Save" by default), and returns the new submit button element.
+   *
+   * @return {HTMLInputElement} - The new submit button element.
+   */
+  createSubmitButton() {
+    // Create a new <input> element with the "submit" type and the specified class and value
+    const submitButton = document.createElement('input');
+    submitButton.type = 'submit';
+    submitButton.className = 'button primary-blue';
+    submitButton.value = 'Save';
+    // Return the submit button element
+    return submitButton;
+  }
+  /**
+   * Populates the form template with input fields and labels based on the properties of the
+   * current form schema. For each property in the schema, it creates an input element, applies
+   * any validation rules to it, creates an error bubble and label element, and appends them
+   * to the form template. Finally, it creates and appends a submit button element to the form.
+   *
+   * @return {void}
+   */
+  populateFormFromSchema() {
+    // If there is no form schema, return early
+    if (!this._formSchema)
+      return;
+    // Get the properties of the form schema and their keys
+    const properties = this._formSchema.properties;
+    const propertyKeys = Object.keys(properties);
+    // Loop through each property key and create an input, label, and error bubble for it
+    propertyKeys.forEach(formKey => {
+      const formItem = properties[formKey];
+      const formProperties = formItem.form;
+      const input = this.createInput(formKey, formProperties);
+      // If the form property has validation, apply it to the input
+      if (formProperties.validation) {
+        this.applyValidation(input, formProperties.validation);
+      }
+      // Create an error bubble and label element for the input
+      const errorBubble = this.createErrorBubble();
+      const label = this.createLabel(formProperties, input, errorBubble);
+      // Append the label element to the form template
+      this.template.content.append(label);
+    });
+    // Create and append a submit button element to the form template
+    const submitButton = this.createSubmitButton();
+    this.template.content.append(submitButton);
+  }
+  /**
+   * Clones the form template and binds event listeners to its input elements. First, it checks if
+   * there is a form schema present. If so, it clones the template's content, binds events to form
+   * input elements, and appends the cloned form elements to the fieldset. The event listeners include
+   * "oninvalid" (to check input validity on submit), "onblur" (to check input validity on blur),
+   * "onkeyup" (to handle changes in input fields), and "onchange" (to handle changes in select fields).
+   *
+   * @return {void}
+   */
+  componentDidRender() {
+    // If there's no form schema, return
+    if (!this._formSchema) {
+      return;
+    }
+    // Clone the template's content and store it in a variable
+    const formItems = this.template.content.cloneNode(true);
+    // Bind event listeners to form elements
+    const properties = this._formSchema.properties;
+    const propertyKeys = Object.keys(properties);
+    propertyKeys.forEach((formKey) => {
+      const formInput = formItems.querySelector(`[name=${formKey}]`);
+      // Bind events to form input elements
+      formInput.oninvalid = this.validityCheck.bind(this);
+      formInput.onblur = this.validityCheck.bind(this);
+      formInput.onkeyup = this.fieldChanged.bind(this);
+      formInput.onchange = this.fieldChanged.bind(this);
+    });
+    // Append the cloned form elements to the fieldset
+    this.fieldset.appendChild(formItems);
+  }
+  /**
+   * Renders the component's template as a form element with a fieldset container. The form's
+   * "onSubmit" event is bound to the "doSubmit" function, which handles the form submission
+   * and emits a "dataSubmitted" event with the form data. The fieldset element is assigned
+   * to the "fieldset" instance variable using a ref, so it can be populated with form elements
+   * later on.
+   *
+   * @return {JSX.Element} - The rendered form template as a JSX element.
+   */
+  render() {
+    return (h(Host, null, h("form", { onSubmit: this.doSubmit.bind(this) }, h("fieldset", { 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": "dataSubmitted",
+        "name": "dataSubmitted",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "FormData",
+          "resolved": "FormData",
+          "references": {
+            "FormData": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "dataChanged",
+        "name": "dataChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ name: string, value: any }",
+          "resolved": "{ name: string; value: any; }",
+          "references": {}
+        }
+      }];
+  }
+  static get watchers() {
+    return [{
+        "propName": "formschema",
+        "methodName": "onFormSchemaChange"
+      }];
+  }
+}

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

@@ -0,0 +1,109 @@
+import { withActions } from '@storybook/addon-actions/decorator';
+export default {
+  title: 'molecules/Form',
+  component: 'tttx-form',
+  parameters: {
+    actions: {
+      handles: ['dataSubmitted', 'dataChanged'],
+    },
+  },
+  decorators: [withActions],
+};
+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

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