@3t-transform/threeteeui 0.0.7 → 0.0.9

package/dist/cjs/tttx-input.cjs.entry.js

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-8a4cb9bc.js');
+
+const tttxInputCss = ".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}.errorstate{border-color:#DC0000}.icon-right{margin-top:5px;margin-right:4px}.icon-left{margin-top:5px;margin-left:4px}";
+
+const TttxInput = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.valueChanged = index.createEvent(this, "valueChanged", 7);
+    this.handleFocus = () => {
+      this.isfocused = true;
+    };
+    this.handleBlur = () => {
+      this.isfocused = false;
+    };
+    this.isfocused = false;
+    this.label = undefined;
+    this.valid = undefined;
+    this.showerrormsg = undefined;
+    this.errormsg = undefined;
+    this.value = undefined;
+    this.type = 'text';
+    this.placeholder = undefined;
+    this.pattern = undefined;
+    this.iconleft = undefined;
+    this.iconright = undefined;
+    this.required = undefined;
+  }
+  handleChange(event) {
+    const target = event.target;
+    this.value = target.value;
+    this.valueChanged.emit(target.value);
+  }
+  render() {
+    const inputClass = ['container', this.showerrormsg ? 'errorstate' : '', this.isfocused ? 'focused' : '', this.iconleft ? 'iconleft' : ''].join(' ');
+    return (index.h(index.Host, null, index.h("div", { class: "field spacing" }, this.label && index.h("label", { class: "label" }, this.label, !this.required ? index.h("span", { class: "optional" }, " (optional)") : ''), index.h("div", { class: inputClass }, this.iconleft && (index.h("div", { class: "icon-left" }, index.h("tttx-icon", { icon: this.iconleft, colour: "grey" }))), index.h("input", { class: "input", onFocus: this.handleFocus.bind(this), onBlur: this.handleBlur.bind(this), type: this.type, placeholder: this.placeholder, value: this.value, onInput: event => this.handleChange(event) }), this.iconright && (index.h("div", { class: "icon-right" }, index.h("tttx-icon", { icon: this.iconright, colour: "grey" })))), this.showerrormsg && this.errormsg && index.h("div", { class: "errormsg" }, index.h("span", { class: "material-symbols-rounded validationicon" }, "warning"), " ", this.errormsg))));
+  }
+};
+TttxInput.style = tttxInputCss;
+
+exports.tttx_input = TttxInput;

package/dist/cjs/tttx-popover-content.cjs.entry.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-8a4cb9bc.js');
+
+const tttxPopoverContentCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}:host{display:block;max-width:400px}h4{margin:0;font-size:15px;font-weight:700;color:black;margin-bottom:4px}p{margin:0;font-size:14px;font-weight:normal;color:black;margin-bottom:4px}.linky{color:#1479c6;text-decoration:none;cursor:pointer}";
+
+const TttxPopoverContent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.header = undefined;
+    this.body = undefined;
+    this.linkcontext = undefined;
+    this.linktext = undefined;
+  }
+  render() {
+    return (index.h(index.Host, null, this.header && index.h("h4", null, this.header), this.body && index.h("p", null, this.body), this.linkcontext && index.h("span", { class: "linky", onClick: (evt) => console.log(this.linkcontext, evt) }, this.linktext || 'More Information')));
+  }
+};
+TttxPopoverContent.style = tttxPopoverContentCss;
+
+exports.tttx_popover_content = TttxPopoverContent;

package/dist/cjs/tttx.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-253ca97c.js');
+const index = require('./index-8a4cb9bc.js');
 
 /*
  Stencil Client Patch Browser v2.22.3 | MIT Licensed | https://stenciljs.com
@@ -17,7 +17,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["tttx-button.cjs",[[1,"tttx-button",{"fontColor":[1,"font-color"],"buttonStyle":[1,"button-style"]},[[0,"clickEvent","onClicked"]]]]],["tttx-checkbox.cjs",[[1,"tttx-checkbox",{"value":[4],"label":[1],"required":[4]}]]],["tttx-form.cjs",[[1,"tttx-form",{"dataAttribute":[1,"data-attribute"],"functionAttribute":[1,"function-attribute"]}]]],["tttx-single-input.cjs",[[1,"tttx-single-input",{"label":[1],"valid":[4],"showerrormsg":[4],"errormsg":[1],"value":[1025],"type":[1],"placeholder":[1],"pattern":[1],"iconleft":[1],"iconright":[1],"required":[4],"isfocused":[32]}]]],["tttx-text-box.cjs",[[1,"tttx-text-box",{"label":[1],"showerrormsg":[4],"errormsg":[1],"required":[4],"value":[1025],"isfocused":[32]}]]]], options);
+  return index.bootstrapLazy([["tttx-input.cjs",[[1,"tttx-input",{"label":[1],"valid":[4],"showerrormsg":[4],"errormsg":[1],"value":[1025],"type":[1],"placeholder":[1],"pattern":[1],"iconleft":[1],"iconright":[1],"required":[4],"isfocused":[32]}]]],["tttx-button.cjs",[[1,"tttx-button",{"fontColor":[1,"font-color"],"buttonStyle":[1,"button-style"]},[[0,"clickEvent","onClicked"]]]]],["tttx-checkbox.cjs",[[1,"tttx-checkbox",{"value":[4],"label":[1],"required":[4]}]]],["tttx-form.cjs",[[1,"tttx-form",{"dataAttribute":[1,"data-attribute"],"functionAttribute":[1,"function-attribute"]}]]],["tttx-popover-content.cjs",[[1,"tttx-popover-content",{"header":[1],"body":[1],"linkcontext":[1],"linktext":[1]}]]],["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"colour":[1]},[[4,"click","handleDocumentClick"]]]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -1,10 +1,11 @@
 {
   "entries": [
     "./components/atoms/tttx-button/tttx-button.js",
-    "./components/atoms/tttx-single-input/tttx-single-input.js",
-    "./components/atoms/tttx-text-box/tttx-text-box.js",
+    "./components/atoms/tttx-icon/tttx-icon.js",
+    "./components/atoms/tttx-popover-content/tttx-popover-content.js",
     "./components/atoms/ttx-checkbox/tttx-checkbox.js",
-    "./components/molecules/tttx-form/tttx-form.js"
+    "./components/molecules/tttx-form/tttx-form.js",
+    "./components/molecules/tttx-input/tttx-input.js"
   ],
   "compiler": {
     "name": "@stencil/core",

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

@@ -17,10 +17,7 @@ export default {
   },
 };
 const Template = ({ content, fontColor, buttonStyle }) => `
-<tttx-button font-color=${fontColor} button-style=${buttonStyle}
->
-  ${content}
-</tttx-button>
+<tttx-button font-color=${fontColor} button-style=${buttonStyle}>${content}</tttx-button>
 `;
 export const Default = Template.bind({});
 Default.args = {

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

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

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

@@ -0,0 +1,114 @@
+import { Host, h } from '@stencil/core';
+import { createPopper } from '@popperjs/core';
+export class TttxIcon {
+  constructor() {
+    this.icon = undefined;
+    this.colour = 'grey';
+  }
+  handleDocumentClick(event) {
+    if (!event.composedPath().includes(this.referenceElement)) {
+      if (this.popperElement) {
+        this.popperElement.removeAttribute('data-show');
+      }
+      if (this.popperInstance) {
+        this.popperInstance.update();
+      }
+    }
+  }
+  componentWillLoad() {
+    this.hasPopoverSlot = !!this.el.querySelector('[slot="popover"]');
+  }
+  componentDidLoad() {
+    this.popperInstance = createPopper(this.referenceElement, this.popperElement, {
+      placement: 'top',
+      modifiers: [
+        {
+          name: 'flip',
+          options: {
+            fallbackPlacements: ['bottom'],
+          },
+        },
+        {
+          name: 'offset',
+          options: {
+            offset: [0, 12],
+          },
+        },
+      ],
+    });
+  }
+  disconnectedCallback() {
+    this.popperInstance.destroy();
+  }
+  render() {
+    return (h(Host, null, h("span", { onClick: () => {
+        if (this.popperElement) {
+          this.popperElement.setAttribute('data-show', '');
+        }
+        if (this.popperInstance) {
+          this.popperInstance.update();
+        }
+      }, ref: el => (this.referenceElement = el), class: `material-symbols-rounded ${this.colour ? this.colour : ''} ${this.hasPopoverSlot ? 'clickable' : ''}` }, this.icon), this.hasPopoverSlot && (h("div", { ref: el => (this.popperElement = el), class: "tooltip" }, h("slot", { name: "popover" }), h("div", { class: "arrow", "data-popper-arrow": true })))));
+  }
+  static get is() { return "tttx-icon"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-icon.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-icon.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "icon",
+        "reflect": false
+      },
+      "colour": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "colour",
+        "reflect": false,
+        "defaultValue": "'grey'"
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "handleDocumentClick",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

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

@@ -0,0 +1,47 @@
+import icons from './../../../icons';
+const colours = ['red', 'blue', 'black', 'grey', 'green'];
+export default {
+  title: 'Atoms/Icons',
+  component: 'tttx-icon',
+  argTypes: {
+    icon: {
+      control: {
+        type: 'select',
+        options: icons,
+      },
+    },
+    colour: {
+      control: {
+        type: 'select',
+        options: colours,
+      },
+    },
+  },
+};
+const Template = ({ icon, colour }) => `<tttx-icon icon="${icon}" colour="${colour}" />`;
+export const Basic = Template.bind({});
+Basic.args = {
+  icon: 'warning',
+  colour: 'red',
+};
+const WithPopoverTemplate = ({ icon, colour }) => `
+<div style="overflow: auto; height: 300px;">
+  <div style="margin-top:150px; height:300px;">
+    <tttx-icon icon="${icon}" colour="${colour}">
+      <div slot="popover">
+        <tttx-popover-content
+          header="The humble egg"
+          body="Most arthropods such as insects, vertebrates (excluding live-bearing mammals), and mollusks lay eggs, although some, such as scorpions, do not."
+          linkcontext="Wikipedia_egg"
+          linktext="Learn more about eggs"
+        />
+      </div>
+    </tttx-icon>
+  </div>
+</div>
+`;
+export const WithPopover = WithPopoverTemplate.bind({});
+WithPopover.args = {
+  icon: 'warning',
+  colour: 'red',
+};

package/dist/collection/components/atoms/tttx-popover-content/tttx-popover-content.css

@@ -0,0 +1,30 @@
+.material-symbols-rounded {
+  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
+}
+
+:host {
+  display: block;
+  max-width: 400px;
+}
+
+h4 {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 700;
+  color: black;
+  margin-bottom: 4px;
+}
+
+p {
+  margin: 0;
+  font-size: 14px;
+  font-weight: normal;
+  color: black;
+  margin-bottom: 4px;
+}
+
+.linky {
+  color: #1479c6;
+  text-decoration: none;
+  cursor: pointer;
+}

package/dist/collection/components/atoms/tttx-popover-content/tttx-popover-content.js

@@ -0,0 +1,96 @@
+import { Host, h } from '@stencil/core';
+export class TttxPopoverContent {
+  constructor() {
+    this.header = undefined;
+    this.body = undefined;
+    this.linkcontext = undefined;
+    this.linktext = undefined;
+  }
+  render() {
+    return (h(Host, null, this.header && h("h4", null, this.header), this.body && h("p", null, this.body), this.linkcontext && h("span", { class: "linky", onClick: (evt) => console.log(this.linkcontext, evt) }, this.linktext || 'More Information')));
+  }
+  static get is() { return "tttx-popover-content"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-popover-content.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-popover-content.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "header": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "header",
+        "reflect": false
+      },
+      "body": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "body",
+        "reflect": false
+      },
+      "linkcontext": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "linkcontext",
+        "reflect": false
+      },
+      "linktext": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "linktext",
+        "reflect": false
+      }
+    };
+  }
+}

package/dist/collection/components/atoms/tttx-popover-content/tttx-popover-content.stories.js

@@ -0,0 +1,23 @@
+export default {
+  title: 'Atoms/PopoverContent',
+  component: 'tttx-popover-content',
+  argTypes: {
+    header: {
+      control: {
+        type: 'text',
+      }
+    },
+    body: {
+      control: {
+        type: 'text',
+      }
+    },
+  },
+};
+const Template = ({ header, body, linkcontext }) => `<tttx-popover-content header="${header}" body="${body}" linkcontext="${linkcontext}" />`;
+export const Basic = Template.bind({});
+Basic.args = {
+  header: 'HEADER',
+  body: 'BODY',
+  linkcontext: 'TESTING123'
+};

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

@@ -8,30 +8,26 @@ export default {
   },
 };
 export const CreateUserTemplate = () => `
-  <tttx-form>
-  <tttx-single-input label="Name" form-data="name" errormsg="You need a name please" required showerrormsg></tttx-single-input>
-  <tttx-single-input label="Email Address" form-data="email" errormsg="Email is required" required showerrormsg></tttx-single-input>
-  <tttx-single-input label="Password" form-data="password" type="password" errormsg="Enter a password" required showerrormsg></tttx-single-input>
-    <tttx-single-input label="Repeat Password" form-data="repeatpassword" type="password" errormsg="Repeat your password" required showerrormsg></tttx-single-input>
-    <tttx-checkbox label="Has Signed GDPR" form-data="gdpr" required></tttx-checkbox>
-
-    <tttx-button font-color="font-white" button-style="primary-blue" function-data="submit">Create User</tttx-button>
-  </tttx-form>
+<tttx-form>
+  <tttx-input label="Email Address" form-data="email" errormsg="Email is required" required showerrormsg></tttx-input>
+  <tttx-input label="Password" form-data="password" type="password" errormsg="Enter a password" required showerrormsg></tttx-input>
+  <tttx-input label="Repeat Password" form-data="repeatpassword" type="password" errormsg="Repeat your password" required showerrormsg></tttx-input>
+  <tttx-checkbox label="Has Signed GDPR" form-data="gdpr" required></tttx-checkbox>
+  <tttx-button font-color="font-white" button-style="primary-blue" function-data="submit">Create User</tttx-button>
+</tttx-form>
 `;
 export const LoginTemplate = () => `
-  <tttx-form>
-    <tttx-single-input label="Email" form-data="email" errormsg="email is required" required></tttx-single-input>
-    <tttx-single-input label="Password" form-data="password" type="password" errormsg="password is required" required></tttx-single-input>
-    <tttx-checkbox label="Remember my Password" form-data="rememberpassword" required></tttx-checkbox>
-
-    <tttx-button font-color="font-white" button-style="primary-blue" function-data="submit">Log In</tttx-button>
-  </tttx-form>
+<tttx-form>
+  <tttx-input label="Email" form-data="email" errormsg="email is required" required></tttx-input>
+  <tttx-input label="Password" form-data="password" type="password" errormsg="password is required" required></tttx-input>
+  <tttx-checkbox label="Remember my Password" form-data="rememberpassword" required></tttx-checkbox>
+  <tttx-button font-color="font-white" button-style="primary-blue" function-data="submit">Log In</tttx-button>
+</tttx-form>
 `;
 export const TextBoxExample = () => `
-  <tttx-form>
-    <tttx-text-box form-data="firstname" label="First Name" errormsg="Field is required" required></tttx-text-box>
-    <tttx-text-box form-data="lastname" label="Last Name"></tttx-text-box>
-
-    <tttx-button font-color="font-white" button-style="primary-blue" function-data="submit">Submit</tttx-button>
-  </tttx-form>
+<tttx-form>
+  <tttx-text-box form-data="firstname" label="First Name" errormsg="Field is required" required></tttx-text-box>
+  <tttx-text-box form-data="lastname" label="Last Name"></tttx-text-box>
+  <tttx-button font-color="font-white" button-style="primary-blue" function-data="submit">Submit</tttx-button>
+</tttx-form>
 `;

package/dist/collection/components/{atoms/tttx-text-box/tttx-text-box.css → molecules/tttx-input/tttx-input.css}

@@ -139,4 +139,14 @@
 
 .errorstate {
   border-color: #DC0000;
+}
+
+.icon-right {
+  margin-top: 5px;
+  margin-right: 4px;
+}
+
+.icon-left {
+  margin-top: 5px;
+  margin-left: 4px;
 }

package/dist/collection/components/{atoms/tttx-single-input/tttx-single-input.js → molecules/tttx-input/tttx-input.js}

@@ -1,5 +1,5 @@
 import { Host, h } from '@stencil/core';
-export class TttxSingleInput {
+export class TttxInput {
   constructor() {
     this.handleFocus = () => {
       this.isfocused = true;
@@ -27,18 +27,18 @@ export class TttxSingleInput {
   }
   render() {
     const inputClass = ['container', this.showerrormsg ? 'errorstate' : '', this.isfocused ? 'focused' : '', this.iconleft ? 'iconleft' : ''].join(' ');
-    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("div", { class: inputClass }, this.iconleft && (h("div", { class: "icon-left" }, h("span", { class: "material-symbols-rounded" }, this.iconleft))), h("input", { class: "input", onFocus: this.handleFocus.bind(this), onBlur: this.handleBlur.bind(this), type: this.type, placeholder: this.placeholder, value: this.value, onInput: event => this.handleChange(event) }), this.iconright && (h("div", { class: "icon-right" }, h("span", { class: "material-symbols-rounded" }, this.iconright)))), this.showerrormsg && this.errormsg && h("div", { class: "errormsg" }, h("span", { class: "material-symbols-rounded validationicon" }, "warning"), " ", this.errormsg))));
+    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("div", { class: inputClass }, this.iconleft && (h("div", { class: "icon-left" }, h("tttx-icon", { icon: this.iconleft, colour: "grey" }))), h("input", { class: "input", onFocus: this.handleFocus.bind(this), onBlur: this.handleBlur.bind(this), type: this.type, placeholder: this.placeholder, value: this.value, onInput: event => this.handleChange(event) }), this.iconright && (h("div", { class: "icon-right" }, h("tttx-icon", { icon: this.iconright, colour: "grey" })))), this.showerrormsg && this.errormsg && h("div", { class: "errormsg" }, h("span", { class: "material-symbols-rounded validationicon" }, "warning"), " ", this.errormsg))));
   }
-  static get is() { return "tttx-single-input"; }
+  static get is() { return "tttx-input"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["tttx-single-input.scss"]
+      "$": ["tttx-input.scss"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["tttx-single-input.css"]
+      "$": ["tttx-input.css"]
     };
   }
   static get properties() {