@3t-transform/threeteeui 0.0.9 → 0.0.11

package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.js

@@ -0,0 +1,156 @@
+import icons from '../../../icons';
+export default {
+  title: 'Molecules/Standalone Input',
+  component: 'tttx-standalone-input',
+  argTypes: {
+    iconleft: {
+      options: icons,
+      control: { type: 'select' },
+    },
+    iconright: {
+      options: icons,
+      control: { type: 'select' },
+    },
+    label: {
+      control: { type: 'text' },
+    },
+    errormsg: {
+      control: { type: 'text' },
+    },
+    showerrormsg: {
+      control: { type: 'boolean' },
+    },
+    checked: {
+      control: { type: 'boolean' },
+    },
+    disabled: {
+      control: { type: 'boolean' },
+    },
+    max: {
+      control: { type: 'text' },
+    },
+    maxlength: {
+      control: { type: 'text' },
+    },
+    min: {
+      control: { type: 'text' },
+    },
+    minlength: {
+      control: { type: 'text' },
+    },
+    name: {
+      control: { type: 'text' },
+    },
+    pattern: {
+      control: { type: 'text' },
+    },
+    placeholder: {
+      control: { type: 'text' },
+    },
+    readonly: {
+      control: { type: 'boolean' },
+    },
+    required: {
+      control: { type: 'boolean' },
+    },
+    step: {
+      control: { type: 'text' },
+    },
+    type: {
+      options: ['text', 'password', 'email', 'number'],
+      control: { type: 'radio' },
+    },
+    value: {
+      control: { type: 'text' },
+    },
+  },
+};
+const TemplateTextInput = ({ iconleft, iconright, label, errormsg, showerrormsg, checked, disabled, max, maxlength, min, minlength, name, pattern, placeholder, readonly, required, step, type, value, }) => `
+<tttx-standalone-input
+  iconleft="${iconleft || ''}"
+  iconright="${iconright || ''}"
+  label="${label}"
+  errormsg="${errormsg}"
+  ${showerrormsg ? 'showerrormsg' : ''}
+  ${checked ? 'checked' : ''}
+  ${disabled ? 'disabled' : ''}
+  ${max ? `max=${max}` : ''}
+  ${maxlength ? `maxlength=${maxlength}` : ''}
+  ${min ? `min=${min}` : ''}
+  ${minlength ? `minlength=${minlength}` : ''}
+  ${name ? `name=${name}` : ''}
+  ${pattern ? `pattern=${pattern}` : ''}
+  ${placeholder ? `placeholder=${placeholder}` : ''}
+  ${readonly ? 'readonly' : ''}
+  ${required ? 'required' : ''}
+  ${step ? 'step' : ''}
+  type="${type}"
+  value="${value}"  
+/>
+`;
+export const InputField = TemplateTextInput.bind({});
+InputField.args = {
+  value: '',
+  label: 'First name',
+  type: 'text',
+  errormsg: 'Please enter your first name',
+  required: false,
+  showerrormsg: false,
+  placeholder: 'Enter first name',
+};
+// export const TextInputIconLeft = TemplateTextInput.bind({});
+// TextInputIconLeft.args = {
+//   value: 'Uh egg',
+//   label: 'Please tell me about your egg',
+//   iconleft: 'egg',
+//   type: 'text',
+//   errormsg: 'Incorrect egg, please egg again.',
+//   required: true,
+//   showerrormsg: true,
+//   placeholder: 'Please for the love of god tell me about your egg',
+// };
+// export const TextInputIconRight = TemplateTextInput.bind({});
+// TextInputIconRight.args = {
+//   value: 'Uh egg',
+//   label: 'Please tell me about your egg',
+//   iconright: 'egg',
+//   type: 'text',
+//   errormsg: 'Incorrect egg, please egg again.',
+//   required: true,
+//   showerrormsg: true,
+//   placeholder: 'Please for the love of god tell me about your egg',
+// };
+// export const PasswordInputBasic = TemplateTextInput.bind({});
+// PasswordInputBasic.args = {
+//   value: 'qwefdweferg',
+//   label: 'Input your Password',
+//   iconleft: 'lock',
+//   type: 'password',
+//   errormsg: 'Password is not strong enough',
+//   required: true,
+//   showerrormsg: true,
+//   placeholder: 'Your password',
+// };
+// export const EmailInputBasic = TemplateTextInput.bind({});
+// EmailInputBasic.args = {
+//   value: 'email.address@website.com',
+//   label: 'Choose an email address',
+//   iconleft: 'mail',
+//   type: 'email',
+//   errormsg: 'This email smells funny',
+//   required: true,
+//   valid: false,
+//   showerrormsg: true,
+//   placeholder: 'Your email address',
+// };
+// export const NumberInputBasic = TemplateTextInput.bind({});
+// NumberInputBasic.args = {
+//   value: '42069',
+//   label: 'What is your favourite number?',
+//   iconleft: '123',
+//   type: 'number',
+//   errormsg: 'This number feels wrong',
+//   required: true,
+//   showerrormsg: true,
+//   placeholder: 'Your favourite number',
+// };

package/dist/collection/components/palette.stories.js

@@ -2,87 +2,87 @@ export default {
   title: 'Foundations/Palette',
   component: 'tttx-palette',
 };
-const Swatch = (colour, name = "") => `
-<div class="swatch">
-  <div class="swatchcontent" style="background-color:${colour};">
-    <div class="pill">${colour}</div>
-  </div>
-  <p>${name}</p>  
-</div>
+const Swatch = (colour, name = '') => `
+<div class="swatch">
+  <div class="swatchcontent" style="background-color:${colour};">
+    <div class="pill">${colour}</div>
+  </div>
+  <p>${name}</p>  
+</div>
 `;
-const Template = () => `
-
-<style>
-h2 { clear:both; margin-top: 2em; display: block; }
-.swatch { width:130px; height:130px; float:left; font-size: 12px; }
-.swatchcontent { width:120px; height:80px;  }
-.pill {
-  margin: 0.5em;
-  display: inline-block;
-  padding: 0.25em 0.5em;
-  border-radius: 1em;
-  background-color: #FFFFFF;
-  color: #000000;
-  font-size: 1em;
-  font-weight: bold;
-}
-p { margin: 8px 0 0 0; }
-</style>
-
-<h2>Primary</h2>
-${Swatch("#111111", "$black")}
-${Swatch("#FFFFFF", "$white")}
-${Swatch("#00187C", "$brand")}
-${Swatch("#1579C6", "$accent")}
-${Swatch("#E7F1F9", "$selected")}
-
-<h2>Text and icons</h2>
-${Swatch("#212121", "$ui-primary")}
-${Swatch("#757575", "$ui-secondary")}
-${Swatch("#9E9E9E", "$ui-placeholder")}
-${Swatch("#4C4C4C", "$ui-disabled")}
-
-<h2>Layout</h2>
-${Swatch("#F0F0F0", "$background")}
-${Swatch("#FAFAFA", "$backround-secondary")}
-${Swatch("#D5D5D5", "$ui-border")}
-
-<h2>Buttons</h2>
-${Swatch("#1579C6", "$btn-accent")}
-${Swatch("#146EB3", "$btn-accent-hover")}
-${Swatch("#10609D", "$btn-accent-active")}
-<div style="clear:both;"></div>
-${Swatch("#FFFFFF", "$btn-default")}
-${Swatch("#e6e6e6", "$btn-hover")}
-${Swatch("#cccccc", "$btn-active")}
-<div style="clear:both;"></div>
-${Swatch("#DC0000", "$btn-danger")}
-${Swatch("#C70101", "$btn-danger-hover")}
-${Swatch("#B30303", "$btn-danger-active")}
-<div style="clear:both;"></div>
-${Swatch("#BDBDBD", "$btn-disabled")}
-
-<h2>Severity</h2>
-${Swatch("#DC0000", "$severity-critical")}
-${Swatch("#F59500", "$severity-warning")}
-${Swatch("#A2BB31", "$severity-success")}
-${Swatch("#00187C", "$severity-info")}
-<div style="clear:both;"></div>
-${Swatch("#F2BEBE", "$message-critical")}
-${Swatch("#F9E1BE", "$message-warning")}
-${Swatch("#E4EBC9", "$message-success")}
-${Swatch("#C2DAEE", "$message-info")}
-
-<h2>Diverging</h2>
-${Swatch("#0373A5", "$dv-lowest")}
-${Swatch("#00C2D1", "$dv-very-low")}
-${Swatch("#50A472", "$dv-low")}
-${Swatch("#A2BB31", "$dv-med-low")}
-${Swatch("#FDC500", "$dv-medium")}
-${Swatch("#F59500", "$dv-med-high")}
-${Swatch("#EA6100", "$dv-high")}
-${Swatch("#DC0000", "$dv-very-high")}
-${Swatch("#A20000", "$dv-highest")}
-
+const Template = () => `
+
+<style>
+h2 { clear:both; margin-top: 2em; display: block; }
+.swatch { width:130px; height:130px; float:left; font-size: 12px; }
+.swatchcontent { width:120px; height:80px;  }
+.pill {
+  margin: 0.5em;
+  display: inline-block;
+  padding: 0.25em 0.5em;
+  border-radius: 1em;
+  background-color: #FFFFFF;
+  color: #000000;
+  font-size: 1em;
+  font-weight: bold;
+}
+p { margin: 8px 0 0 0; }
+</style>
+
+<h2>Primary</h2>
+${Swatch('#111111', '$black')}
+${Swatch('#FFFFFF', '$white')}
+${Swatch('#00187C', '$brand')}
+${Swatch('#1579C6', '$accent')}
+${Swatch('#E7F1F9', '$selected')}
+
+<h2>Text and icons</h2>
+${Swatch('#212121', '$ui-primary')}
+${Swatch('#757575', '$ui-secondary')}
+${Swatch('#9E9E9E', '$ui-placeholder')}
+${Swatch('#4C4C4C', '$ui-disabled')}
+
+<h2>Layout</h2>
+${Swatch('#F0F0F0', '$background')}
+${Swatch('#FAFAFA', '$backround-secondary')}
+${Swatch('#D5D5D5', '$ui-border')}
+
+<h2>Buttons</h2>
+${Swatch('#1579C6', '$btn-accent')}
+${Swatch('#146EB3', '$btn-accent-hover')}
+${Swatch('#10609D', '$btn-accent-active')}
+<div style="clear:both;"></div>
+${Swatch('#FFFFFF', '$btn-default')}
+${Swatch('#e6e6e6', '$btn-hover')}
+${Swatch('#cccccc', '$btn-active')}
+<div style="clear:both;"></div>
+${Swatch('#DC0000', '$btn-danger')}
+${Swatch('#C70101', '$btn-danger-hover')}
+${Swatch('#B30303', '$btn-danger-active')}
+<div style="clear:both;"></div>
+${Swatch('#BDBDBD', '$btn-disabled')}
+
+<h2>Severity</h2>
+${Swatch('#DC0000', '$severity-critical')}
+${Swatch('#F59500', '$severity-warning')}
+${Swatch('#A2BB31', '$severity-success')}
+${Swatch('#00187C', '$severity-info')}
+<div style="clear:both;"></div>
+${Swatch('#F2BEBE', '$message-critical')}
+${Swatch('#F9E1BE', '$message-warning')}
+${Swatch('#E4EBC9', '$message-success')}
+${Swatch('#C2DAEE', '$message-info')}
+
+<h2>Diverging</h2>
+${Swatch('#0373A5', '$dv-lowest')}
+${Swatch('#00C2D1', '$dv-very-low')}
+${Swatch('#50A472', '$dv-low')}
+${Swatch('#A2BB31', '$dv-med-low')}
+${Swatch('#FDC500', '$dv-medium')}
+${Swatch('#F59500', '$dv-med-high')}
+${Swatch('#EA6100', '$dv-high')}
+${Swatch('#DC0000', '$dv-very-high')}
+${Swatch('#A20000', '$dv-highest')}
+
 `;
 export const Default = Template.bind({});

package/dist/collection/docs/gettingstarted-developer.stories.js

@@ -1,9 +1,9 @@
 export default {
   title: 'Getting Started/Developer',
 };
-const Template = () => `
-<tttx-typography>
-    <p>Quick start guide for developers</p>
-</tttx-typography>
+const Template = () => `
+<tttx-typography>
+    <p>Quick start guide for developers</p>
+</tttx-typography>
 `;
 export const Default = Template.bind({});

package/dist/components/index.d.ts

@@ -3,8 +3,9 @@ export { TttxButton as TttxButton } from '../types/components/atoms/tttx-button/
 export { TttxCheckbox as TttxCheckbox } from '../types/components/atoms/ttx-checkbox/tttx-checkbox';
 export { TttxForm as TttxForm } from '../types/components/molecules/tttx-form/tttx-form';
 export { TttxIcon as TttxIcon } from '../types/components/atoms/tttx-icon/tttx-icon';
-export { TttxInput as TttxInput } from '../types/components/molecules/tttx-input/tttx-input';
+export { TttxLoadingSpinner as TttxLoadingSpinner } from '../types/components/atoms/tttx-loading-spinner/tttx-loading-spinner';
 export { TttxPopoverContent as TttxPopoverContent } from '../types/components/atoms/tttx-popover-content/tttx-popover-content';
+export { TttxInput as TttxStandaloneInput } from '../types/components/molecules/tttx-standalone-input/tttx-standalone-input';
 
 /**
  * Used to manually set the base path where assets can be found.

package/dist/components/index.js

@@ -3,5 +3,6 @@ export { TttxButton, defineCustomElement as defineCustomElementTttxButton } from
 export { TttxCheckbox, defineCustomElement as defineCustomElementTttxCheckbox } from './tttx-checkbox.js';
 export { TttxForm, defineCustomElement as defineCustomElementTttxForm } from './tttx-form.js';
 export { TttxIcon, defineCustomElement as defineCustomElementTttxIcon } from './tttx-icon.js';
-export { TttxInput, defineCustomElement as defineCustomElementTttxInput } from './tttx-input.js';
+export { TttxLoadingSpinner, defineCustomElement as defineCustomElementTttxLoadingSpinner } from './tttx-loading-spinner.js';
 export { TttxPopoverContent, defineCustomElement as defineCustomElementTttxPopoverContent } from './tttx-popover-content.js';
+export { TttxStandaloneInput, defineCustomElement as defineCustomElementTttxStandaloneInput } from './tttx-standalone-input.js';

package/dist/components/tttx-button.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
-const tttxButtonCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.button{height:36px;padding:8px 16px;margin:0;background:transparent;color:#212121;border:1px solid #c8c8c8;border-radius:4px;text-transform:uppercase;display:flex;justify-content:left;align-items:center;font-size:14px;font-weight:400}.button:hover{background:#f0f0f0}.button:active{background:#e3e3e3}.primary-blue{background:#1479c6;border:1px solid #1479c6}.primary-blue:hover{background:#1169ba}.primary-blue:active{background:#0951a8}.secondary-white{background:white;border:1px solid #212121}:host{display:inline-block}.spacingleft{margin-left:8px}.font-white{color:white}.font-black{color:#212121}";
+const tttxButtonCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.button{height:36px;padding:8px 16px;margin:0;background:transparent;color:#212121;border:1px solid #c8c8c8;border-radius:4px;text-transform:uppercase;display:flex;justify-content:left;align-items:center;font-size:14px;font-weight:400}.button:hover{background:#f0f0f0}.button:active{background:#e3e3e3}.primary-blue{background:#1479c6;border:1px solid #1479c6;color:white}.primary-blue:hover{background:#1169ba}.primary-blue:active{background:#0951a8}.secondary-white{background:white;border:1px solid #212121}:host{display:inline-block}.spacingleft{margin-left:8px}.font-white{color:white}.font-black{color:#212121}";
 
 const TttxButton$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/tttx-checkbox.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
-const tttxCheckboxCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\";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}.field{clear:both}.container{display:flex;flex-wrap:wrap;box-sizing:border-box;height:36px;border:1px solid #c8c8c8;border-radius:4px}.icon-left,.icon-right{flex-basis:24px}.icon-left span,.icon-right span{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left span{margin-left:4px}.icon-right span{margin-right:4px}.input{flex-grow:1;border:none;outline:none;font-size:16px;padding:8px 16px;background-color:transparent}.iconleft .input{padding-left:4px}.iconright .input{padding-right:4px}.label{display:block;font-size:16px;height:18px;font-weight:600;color:#212121;font-size:16px;margin-bottom:4px;z-index:1}.disabled{background:#f0f0f0;color:#9e9e9e;border-color:#c8c8c8}.focused{border-color:#1479c6}.errormsg{height:16px;display:flex;justify-content:center;align-items:center;float:left;margin-bottom:16px;box-sizing:border-box;background-color:transparent;height:26px;font-size:14px;color:white;border-radius:none;z-index:2;color:#DC0000}.errormsg .validationicon{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#DC0000}.danger{color:#DC0000}.optional{color:#757575;font-weight:normal}:host{display:block}.spacing{margin-bottom:16px}";
+const tttxCheckboxCss = ".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}.icon-left,.icon-right{flex-basis:24px}.icon-left span,.icon-right span{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left span{margin-left:4px}.icon-right span{margin-right:4px}.icon-right{margin-top:5px;margin-right:4px}.icon-left{margin-top:5px;margin-left:4px}.iconleft .input{padding-left:4px}.iconright .input{padding-right:4px}.focused{border-color:#1479c6}.errormsg{display:flex;justify-content:center;align-items:center;float:left;margin-bottom:16px;box-sizing:border-box;background-color:transparent;height:26px;font-size:14px;border-radius:none;z-index:2;color:#dc0000}.errormsg .validationicon{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#dc0000}.danger{color:#dc0000}.optional{color:#757575;font-weight:normal}label.inputBlock{display:block;position:relative;line-height:21px}label{font-weight:500;font-size:16px}input:not([type=submit]){font-family:\"Roboto\", serif;box-sizing:border-box;width:100%;height:36px;padding:0 16px;font-size:16px;border:1px solid #d5d5d5;border-radius:4px;margin-top:4px}input[type=date]{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}input.invalid:invalid,input.standalone.invalid{border:1px solid #dc0000}input~.errorBubble{min-height:27px;position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center}input~.errorBubble:not(.visible){visibility:hidden}input~.errorBubble span{color:#dc0000;font-size:16px;margin-right:4px;height:16px}input.invalid:invalid~.errorBubble{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;visibility:visible}input:focus{border-color:#1479c6}:host{display:block}.spacing{margin-bottom:16px}";
 
 const TttxCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -18,7 +18,7 @@ const TttxCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     this.valueChanged.emit(target.checked);
   }
   render() {
-    return (h(Host, null, h("div", { class: "field spacing" }, this.label && h("label", { class: "label" }, this.label, !this.required ? h("span", { class: "optional" }, " (optional)") : ''), h("input", { type: "checkbox", class: "input", onChange: event => this.handleClick(event), checked: this.value }))));
+    return (h(Host, null, h("div", { class: "field spacing" }, this.label && (h("label", { class: "label" }, this.label, !this.required ? h("span", { class: "optional" }, " (optional)") : '')), h("input", { type: "checkbox", class: "input", onChange: event => this.handleClick(event), checked: this.value }))));
   }
   static get style() { return tttxCheckboxCss; }
 }, [1, "tttx-checkbox", {

package/dist/components/tttx-form.js

@@ -1,59 +1,187 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const tttxFormCss = ".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}.icon-left,.icon-right{flex-basis:24px}.icon-left span,.icon-right span{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left span{margin-left:4px}.icon-right span{margin-right:4px}.icon-right{margin-top:5px;margin-right:4px}.icon-left{margin-top:5px;margin-left:4px}.iconleft .input{padding-left:4px}.iconright .input{padding-right:4px}.focused{border-color:#1479c6}.errormsg{display:flex;justify-content:center;align-items:center;float:left;margin-bottom:16px;box-sizing:border-box;background-color:transparent;height:26px;font-size:14px;border-radius:none;z-index:2;color:#dc0000}.errormsg .validationicon{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#dc0000}.danger{color:#dc0000}.optional{color:#757575;font-weight:normal}label.inputBlock{display:block;position:relative;line-height:21px}label{font-weight:500;font-size:16px}input:not([type=submit]){font-family:\"Roboto\", serif;box-sizing:border-box;width:100%;height:36px;padding:0 16px;font-size:16px;border:1px solid #d5d5d5;border-radius:4px;margin-top:4px}input[type=date]{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}input.invalid:invalid,input.standalone.invalid{border:1px solid #dc0000}input~.errorBubble{min-height:27px;position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center}input~.errorBubble:not(.visible){visibility:hidden}input~.errorBubble span{color:#dc0000;font-size:16px;margin-right:4px;height:16px}input.invalid:invalid~.errorBubble{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;visibility:visible}input:focus{border-color:#1479c6}.button{height:36px;padding:8px 16px;margin:0;background:transparent;color:#212121;border:1px solid #c8c8c8;border-radius:4px;text-transform:uppercase;display:flex;justify-content:left;align-items:center;font-size:14px;font-weight:400}.button:hover{background:#f0f0f0}.button:active{background:#e3e3e3}.primary-blue{background:#1479c6;border:1px solid #1479c6;color:white}.primary-blue:hover{background:#1169ba}.primary-blue:active{background:#0951a8}.secondary-white{background:white;border:1px solid #212121}:host{display:block}fieldset{margin:0;padding:0;border:none}input[type=submit]{margin-left:auto}";
 
 const TttxForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.formSubmit = createEvent(this, "formSubmit", 7);
-    this.fetchFormData = () => {
-      let validForm = true;
-      const formData = {};
-      const elements = this.el.querySelectorAll(`[${this.dataAttribute}]`);
-      elements.forEach((element) => {
-        const inputElement = element;
-        validForm = validForm ? this.validateFormField(inputElement) : false;
-        formData[inputElement.getAttribute(this.dataAttribute)] = inputElement.value;
-      });
-      return validForm ? formData : null;
-    };
-    this.dataAttribute = 'form-data';
-    this.functionAttribute = 'function-data';
+    this.submitEvent = createEvent(this, "submitEvent", 7);
+    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;
+    }
   }
-  validateFormField(element) {
-    let isValid = true;
-    const isRequired = element.hasAttribute("required");
-    if (isRequired && !element.value) {
-      // required and not set, show error
-      element.setAttribute("showerrormsg", "true");
-      isValid = false;
+  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 {
-      // required and set, ensure error does not show
-      element.removeAttribute("showerrormsg");
+      target.className = '';
+      target.parentElement.querySelector('.errorBubble').replaceChildren();
     }
-    return isValid;
   }
-  componentDidLoad() {
-    const elements = this.el.querySelectorAll(`[${this.functionAttribute}]`);
-    elements.forEach((element) => {
-      element.addEventListener('click', event => {
-        event.preventDefault();
-        const formData = this.fetchFormData();
-        if (formData) {
-          // only emit event if form data is valid
-          this.formSubmit.emit(this.fetchFormData());
+  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("div", null, h("slot", null)));
+    return (h(Host, null, h("form", { onSubmit: this.doSubmit.bind(this) }, h("fieldset", { onChange: this.fieldsetChange, ref: el => (this.fieldset = el) }))));
   }
-  get el() { return this; }
+  static get watchers() { return {
+    "formschema": ["onFormSchemaChange"]
+  }; }
+  static get style() { return tttxFormCss; }
 }, [1, "tttx-form", {
-    "dataAttribute": [1, "data-attribute"],
-    "functionAttribute": [1, "function-attribute"]
+    "formschema": [8],
+    "submitValue": [8, "submit-value"]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/components/tttx-icon2.js

@@ -1797,7 +1797,7 @@ var createPopper = /*#__PURE__*/popperGenerator({
   defaultModifiers: defaultModifiers
 }); // eslint-disable-next-line import/no-unused-modules
 
-const tttxIconCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\";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:block}.tooltip{background:#ffffff;color:#343434;font-weight:bold;padding:8px 16px;font-size:13px;border-radius:4px;box-shadow:0 0 5px 1px rgba(0, 0, 0, 0.3);display:none}.tooltip[data-show]{display:block}.arrow,.arrow::before{position:absolute;width:8px;height:8px;background:inherit}.arrow{visibility:hidden}.arrow::before{visibility:visible;content:\"\";transform:rotate(45deg)}.tooltip[data-popper-placement^=top]>.arrow{bottom:-4px}.tooltip[data-popper-placement^=bottom]>.arrow{top:-4px}.tooltip[data-popper-placement^=left]>.arrow{right:-4px}.tooltip[data-popper-placement^=right]>.arrow{left:-4px}.red{color:#DC0000}.orange{color:#F59500}.blue{color:#1479c6}.green{color:#A2BB31}.gray{color:#757575}.black{color:#212121}.clickable{cursor:pointer}";
+const tttxIconCss = ".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:block}.tooltip{background:#ffffff;color:#343434;font-weight:bold;padding:8px 16px;font-size:13px;border-radius:4px;box-shadow:0 0 5px 1px rgba(0, 0, 0, 0.3);display:none}.tooltip[data-show]{display:block}.arrow,.arrow::before{position:absolute;width:8px;height:8px;background:inherit}.arrow{visibility:hidden}.arrow::before{visibility:visible;content:\"\";transform:rotate(45deg)}.tooltip[data-popper-placement^=top]>.arrow{bottom:-4px}.tooltip[data-popper-placement^=bottom]>.arrow{top:-4px}.tooltip[data-popper-placement^=left]>.arrow{right:-4px}.tooltip[data-popper-placement^=right]>.arrow{left:-4px}.red{color:#dc0000}.orange{color:#f59500}.blue{color:#1479c6}.green{color:#a2bb31}.gray{color:#757575}.black{color:#212121}.white{color:white}.clickable{cursor:pointer}";
 
 const TttxIcon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
   constructor() {