@3t-transform/threeteeui 0.2.75 → 0.2.76

package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.css

@@ -11,11 +11,12 @@ dl {
 
 dt {
   font-weight: 400;
-  line-height: 21px;
   font-size: 16px;
+  margin-bottom: 4px;
 }
 
-dt, dt.subTitle {
+dt,
+dt.subTitle {
   color: #757575;
 }
 
@@ -23,7 +24,8 @@ dt.mainTitle {
   color: #212121;
 }
 
-dt, dd {
+dt,
+dd {
   overflow-wrap: anywhere;
 }
 
@@ -32,16 +34,23 @@ dd {
   font-weight: 400;
   font-size: 16px;
   color: #212121;
-  line-height: 21px;
-  margin-bottom: 18px;
 }
 
+dd:not(:last-child) {
+  margin-bottom: 16px;
+}
+
+dl.spacedout,
 dl.horizontal {
   display: flex;
   flex-direction: row;
   width: 100%;
 }
 
+dl.spacedout {
+  justify-content: space-between;
+}
+
 dl.horizontal div {
   flex-grow: 1;
 }

package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.js

@@ -1,21 +1,22 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { h, Host } from '@stencil/core';
 export class TttxKeyvalueBlock {
   constructor() {
     this.keyvalues = undefined;
     this.horizontal = undefined;
+    this.spacedout = undefined;
+    this._elements = undefined;
   }
   renderSingleElements(values) {
     const keys = Object.keys(values);
     const elements = [];
     const divSize = (100 / keys.length).toString() + '%';
-    for (let i = 0; i < keys.length; i++) {
-      if (this.horizontal) {
-        elements.push(h("div", { style: { maxWidth: divSize } }, h("dt", null, keys[i]), h("dd", null, values[keys[i]])));
+    for (const element of keys) {
+      if (this.horizontal || this.spacedout) {
+        elements.push(h("div", { style: { maxWidth: divSize } }, h("dt", null, element), h("dd", null, values[element])));
       }
       else {
-        elements.push(h("dt", null, keys[i]));
-        elements.push(h("dd", null, values[keys[i]]));
+        elements.push(h("dt", null, element));
+        elements.push(h("dd", null, values[element]));
       }
     }
     return elements;
@@ -23,9 +24,9 @@ export class TttxKeyvalueBlock {
   renderArrayElements(values) {
     const elements = [];
     const divSize = (100 / values.length).toString() + '%';
-    for (let i = 0; i < values.length; i++) {
-      const value = values[i];
-      if (this.horizontal) {
+    for (const element of values) {
+      const value = element;
+      if (this.horizontal || this.spacedout) {
         elements.push(h("div", { style: { maxWidth: divSize } }, h("dt", { class: 'mainTitle' }, value.title), h("dt", { class: 'subTitle' }, value.subTitle), h("dd", null, value.data)));
       }
       else {
@@ -36,7 +37,7 @@ export class TttxKeyvalueBlock {
     }
     return elements;
   }
-  render() {
+  componentWillRender() {
     if (!this.keyvalues) {
       return;
     }
@@ -47,14 +48,15 @@ export class TttxKeyvalueBlock {
     else {
       values = this.keyvalues;
     }
-    let elements;
     if (Array.isArray(values)) {
-      elements = this.renderArrayElements(values);
+      this._elements = this.renderArrayElements(values);
     }
     else {
-      elements = this.renderSingleElements(values);
+      this._elements = this.renderSingleElements(values);
     }
-    return (h(Host, null, h("dl", { class: this.horizontal ? 'horizontal' : null }, elements)));
+  }
+  render() {
+    return (h(Host, null, h("dl", { class: [this.horizontal ? 'horizontal' : undefined, this.spacedout ? ' spacedout' : undefined].join(' ').trim() }, this._elements)));
   }
   static get is() { return "tttx-keyvalue-block"; }
   static get encapsulation() { return "shadow"; }
@@ -71,12 +73,16 @@ export class TttxKeyvalueBlock {
   static get properties() {
     return {
       "keyvalues": {
-        "type": "any",
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "any | any[] | string",
-          "resolved": "any",
-          "references": {}
+          "original": "KeyBlockValues | KeyBlockValues[] | string",
+          "resolved": "KeyBlockValues | KeyBlockValues[] | string",
+          "references": {
+            "KeyBlockValues": {
+              "location": "local"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -103,7 +109,29 @@ export class TttxKeyvalueBlock {
         },
         "attribute": "horizontal",
         "reflect": false
+      },
+      "spacedout": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "spacedout",
+        "reflect": false
       }
     };
   }
+  static get states() {
+    return {
+      "_elements": {}
+    };
+  }
 }

package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.stories.js

@@ -1,38 +1,94 @@
 export default {
   title: 'atoms/Key Value Block',
-  component: 'tttx-keyvalue-block'
+  component: 'tttx-keyvalue-block',
 };
-const keyValues = {
-  'Name': 'John Doe',
-  'Date of birth': '14 Jan 1981',
-  'Start of postcode': 'AB10'
-};
-export const KeyValueBlock = () => {
-  return `<tttx-keyvalue-block keyvalues='${JSON.stringify(keyValues)}' />`;
-};
-const keyValueArray = [
-  {
-    title: "Electrical Designer",
-    subTitle: "Satchwell",
-    data: "18 Oct 2021 - Present"
+const TemplateKeyValueBlock = ({ keyValues }) => `<tttx-keyvalue-block keyvalues='${JSON.stringify(keyValues)}' />`;
+export const BasicKeyValueBlock = TemplateKeyValueBlock.bind({});
+BasicKeyValueBlock.args = {
+  keyValues: {
+    'Name': 'John Doe',
+    'Date of birth': '14 Jan 1981',
+    'Start of postcode': 'AB10',
   },
-  {
-    title: "Electrical Inspector",
-    subTitle: "Fastned",
-    data: "20 Dec 2016 - 10 Oct 2021"
+};
+const TemplateHorizontalKeyValueBlock = ({ keyValues }) => `<tttx-keyvalue-block horizontal='true' keyvalues='${JSON.stringify(keyValues)}' />`;
+export const HorizontalKeyValueBlock = TemplateHorizontalKeyValueBlock.bind({});
+HorizontalKeyValueBlock.args = {
+  keyValues: {
+    'Name': 'John Doe',
+    'Date of birth': '14 Jan 1981',
+    'Start of postcode': 'AB10',
   },
-  {
-    title: "Electrical Tech Prof I - Eng",
-    subTitle: "Voltech",
-    data: "20 Dec 2009 - 20 Nov 2016"
+};
+const TemplateSpacedoutKeyValueBlock = ({ keyValues }) => `<tttx-keyvalue-block spacedout='true' keyvalues='${JSON.stringify(keyValues)}' />`;
+export const SpacedoutKeyValueBlock = TemplateSpacedoutKeyValueBlock.bind({});
+SpacedoutKeyValueBlock.args = {
+  keyValues: {
+    'Name': 'John Doe',
+    'Date of birth': '14 Jan 1981',
+    'Start of postcode': 'AB10',
   },
-];
-export const KeyValueSubtitleBlock = () => {
-  return `<tttx-keyvalue-block keyvalues='${JSON.stringify(keyValueArray)}' />`;
 };
-export const HorizontalKeyValueBlock = () => {
-  return `<tttx-keyvalue-block horizontal='true' keyvalues='${JSON.stringify(keyValues)}' />`;
+const TemplateKeyValueBlockArray = ({ keyValueArray }) => `<tttx-keyvalue-block keyvalues='${JSON.stringify(keyValueArray)}' />`;
+export const BasicKeyValueBlockArray = TemplateKeyValueBlockArray.bind({});
+BasicKeyValueBlockArray.args = {
+  keyValueArray: [
+    {
+      title: 'Electrical Designer',
+      subTitle: 'Satchwell',
+      data: '18 Oct 2021 - Present',
+    },
+    {
+      title: 'Electrical Inspector',
+      subTitle: 'Fastned',
+      data: '20 Dec 2016 - 10 Oct 2021',
+    },
+    {
+      title: 'Electrical Tech Prof I - Eng',
+      subTitle: 'Voltech',
+      data: '20 Dec 2009 - 20 Nov 2016',
+    },
+  ],
+};
+const TemplateHorizontalKeyValueBlockArray = ({ keyValueArray }) => `<tttx-keyvalue-block horizontal='true' keyvalues='${JSON.stringify(keyValueArray)}' />`;
+export const HorizontalKeyValueBlockArray = TemplateHorizontalKeyValueBlockArray.bind({});
+HorizontalKeyValueBlockArray.args = {
+  keyValueArray: [
+    {
+      title: 'Electrical Designer',
+      subTitle: 'Satchwell',
+      data: '18 Oct 2021 - Present',
+    },
+    {
+      title: 'Electrical Inspector',
+      subTitle: 'Fastned',
+      data: '20 Dec 2016 - 10 Oct 2021',
+    },
+    {
+      title: 'Electrical Tech Prof I - Eng',
+      subTitle: 'Voltech',
+      data: '20 Dec 2009 - 20 Nov 2016',
+    },
+  ],
 };
-export const HorizontalKeyValueSubtitleBlock = () => {
-  return `<tttx-keyvalue-block horizontal='true' keyvalues='${JSON.stringify(keyValueArray)}' />`;
+const TemplateSpacedoutKeyValueBlockArray = ({ keyValueArray }) => `<tttx-keyvalue-block spacedout='true' keyvalues='${JSON.stringify(keyValueArray)}' />`;
+export const SpacedoutKeyValueBlockArray = TemplateSpacedoutKeyValueBlockArray.bind({});
+SpacedoutKeyValueBlockArray.args = {
+  keyValueArray: [
+    {
+      title: 'Electrical Designer',
+      subTitle: 'Satchwell',
+      data: '18 Oct 2021 - Present',
+    },
+    {
+      title: 'Electrical Inspector',
+      subTitle: 'Fastned',
+      data: '20 Dec 2016 - 10 Oct 2021',
+    },
+    {
+      title: 'Electrical Tech Prof I - Eng',
+      subTitle: 'Voltech',
+      data: '20 Dec 2009 - 20 Nov 2016',
+    },
+  ],
 };

package/dist/collection/components/atoms/tttx-tag/tttx-tag.css

@@ -22,7 +22,7 @@ button {
   justify-content: left;
   align-items: center;
   font-size: 14px;
-  font-weight: 400;
+  font-weight: 500;
 }
 
 .button-content {

package/dist/collection/components/atoms/tttx-tag/tttx-tag.js

@@ -1,4 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { Host, h } from '@stencil/core';
 export class TttxTag {
   constructor() {

package/dist/collection/components/atoms/tttx-tag/tttx-tag.stories.js

@@ -9,7 +9,7 @@ export default {
     color: {
       control: { type: 'text' },
       default: '#d5d5d5',
-    }
+    },
   },
 };
 const Template = ({ text, color }) => {

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

@@ -4,14 +4,25 @@
  * 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 {FormField} 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}
  */
-function setErrorState(target, hasError, errorMessage) {
+function setErrorState(target, hasError, errorMessage, parent = undefined) {
   // Find the error bubble element for the input field
-  const errorBubble = target.parentElement.querySelector('.errorBubble');
+  let errorBubble;
+  if (parent !== undefined) {
+    errorBubble = parent.querySelector('.errorBubble');
+  }
+  else {
+    if (target.parentElement.nodeName.toLowerCase() === 'label') {
+      errorBubble = target.parentElement.querySelector('.errorBubble');
+    }
+    else {
+      errorBubble = target.parentElement.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.classList.add('invalid');

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

@@ -3,8 +3,8 @@
  * 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 {Event} event - The focusout event triggered by the input field.
- * @return {void}
+ * @param {Event | FocusEvent} event - The focusout event triggered by the input field.
+ * @return {{ target: FormField; hasError: boolean; errorMessage: string; }}
  */
 function validityCheck(event) {
   var _a, _b, _c, _d;
@@ -13,17 +13,19 @@ function validityCheck(event) {
   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
+  /*
+      badInput
+      customError
+      patternMismatch
+      rangeOverflow
+      rangeUnderflow
+      stepMismatch
+      tooLong
+      tooShort
+      typeMismatch
+      valid
+      valueMissing
+  */
   // customErrors can be set with
   // target.setCustomValidity('custom error!');
   // and cleared with