@3t-transform/threeteeui 0.0.9 → 0.0.11

package/readme.md

@@ -1,86 +1,89 @@
-## TTTX Library Vision
-
-- To create versioned components where each micro-frontend may use any version it chooses.
-	- Why? - Our root frontend contains many micro-frontends. Each one might have a diffrent version of these components loaded at any time. We must not let a change in one MFE affect another MFE loaded at the same time.
-- To keep the components extremely lightweight, use as few dependencies as possible. Keep the individual components in the low KB, not the MB.
-	- Why? - When there are multiple versions of the same component loaded, we need to keep them extremely lightweight. Most simple components can be executed in a few dozen KB.
-- No CSS frameworks. Use only the minimum styles to get the job done.
-	- Why? - This means we can be sure that we only load code we are actually using.
-- No external styles. A component must style itself and be inside a shadow DOM so that styles from the external application cannot leak inside.
-	- Why? - We cannot have any components being affected by the styles of the surrunding application. The component must be entirely self-contained.
-- No leaking styles. A component must not infect the application with its styles.
-	- Why? - The same goes both ways, the component styles must not affect the surrounding application.
-- Create only components as we need them. YAGNI applies.
-	- Why? - It's about Agile. We need to deliver value to the customer (our develoeprs) as soon as possible for their feedback, and so they can deliver value to their customer (our users). If a certain component is required, it will crop up, and then we will make it.
-
-## Getting Started
-
-Pull down this repo and run:
-
-```bash
-npm install
-npm start
-```
-
-To build the component for production, run:
-
-```bash
-npm run build
-```
-
-To run the unit tests for the components, run:
-
-```bash
-npm test
-```
-To see the components in Storybook, run:
-
-```
-npm run build
-npm run storybook
-```
-
-Need help? Check out our [docs](https://stenciljs.com/docs/my-first-component).
-
-## Naming Components
-
-When creating new component tags, we recommend _not_ using `stencil` in the component name (ex: `<stencil-datepicker>`). This is because the generated component has little to nothing to do with Stencil; it's just a web component!
-
-Instead, use a prefix that fits your company or any name for a group of related components. For example, all of the Ionic generated web components use the prefix `ion`.
-
-We suggest: `<tttx-button>` for example.
-
-## Testing Components
-
-Stencil uses a testing framework built using Jest and Puppeteer. It provides support for two types of test: Unit and End-to-End.
-
-You can find out more form their [docs](https://stenciljs.com/docs/testing-overview)
-
-For our purposes, if you are creating a component that consumes a devextreme component which is itself a container for other components (e.g. a devextreme toolbar that contains a devextreme button), you will want to create an End-to-End test for that.
-
-This is because the helper method that builds a test page in the unit tests mocks out HTML elements, and the mock class it provides doesn't define all the methods that devextreme uses when attaching the component to the container, which causes the render to fail. The End-to-End tests build the component in the browser, so we're able to render them there. 
-
-## Using this component
-
-There are three strategies we recommend for using web components built with Stencil.
-
-The first step for all three of these strategies is to [publish to NPM](https://docs.npmjs.com/getting-started/publishing-npm-packages).
-
-- First, you need to [sign up](https://www.npmjs.com/signup) for an npm account. You will also need to ask an organisation owner to add you as a member of the @3t-transform organisation.
-- Update the `version` in the package.json.
-- Publish the new version with `npm publish @3t-transform/threeteeui`
-
-### Script tag
-
-- Put a script tag similar to this `<script type='module' src='https://unpkg.com/my-component@0.0.1/dist/my-component.esm.js'></script>` in the head of your index.html
-- Then you can use the element anywhere in your template, JSX, html etc
-
-### Node Modules
-- Run `npm install my-component --save`
-- Put a script tag similar to this `<script type='module' src='node_modules/my-component/dist/my-component.esm.js'></script>` in the head of your index.html
-- Then you can use the element anywhere in your template, JSX, html etc
-
-### In a stencil-starter app
-- Run `npm install my-component --save`
-- Add an import to the npm packages `import my-component;`
-- Then you can use the element anywhere in your template, JSX, html etc
+## TTTX Library Vision
+
+-   To create versioned components where each micro-frontend may use any version it chooses.
+    -   Why? - Our root frontend contains many micro-frontends. Each one might have a diffrent version of these components loaded at any time. We must not let a change in one MFE affect another MFE loaded at the same time.
+-   To keep the components extremely lightweight, use as few dependencies as possible. Keep the individual components in the low KB, not the MB.
+    -   Why? - When there are multiple versions of the same component loaded, we need to keep them extremely lightweight. Most simple components can be executed in a few dozen KB.
+-   No CSS frameworks. Use only the minimum styles to get the job done.
+    -   Why? - This means we can be sure that we only load code we are actually using.
+-   No external styles. A component must style itself and be inside a shadow DOM so that styles from the external application cannot leak inside.
+    -   Why? - We cannot have any components being affected by the styles of the surrunding application. The component must be entirely self-contained.
+-   No leaking styles. A component must not infect the application with its styles.
+    -   Why? - The same goes both ways, the component styles must not affect the surrounding application.
+-   Create only components as we need them. YAGNI applies.
+    -   Why? - It's about Agile. We need to deliver value to the customer (our develoeprs) as soon as possible for their feedback, and so they can deliver value to their customer (our users). If a certain component is required, it will crop up, and then we will make it.
+
+## Getting Started
+
+Pull down this repo and run:
+
+```bash
+npm install
+npm start
+```
+
+To build the component for production, run:
+
+```bash
+npm run build
+```
+
+To run the unit tests for the components, run:
+
+```bash
+npm test
+```
+
+To see the components in Storybook, run:
+
+```
+npm run build
+npm run storybook
+```
+
+Need help? Check out our [docs](https://stenciljs.com/docs/my-first-component).
+
+## Naming Components
+
+When creating new component tags, we recommend _not_ using `stencil` in the component name (ex: `<stencil-datepicker>`). This is because the generated component has little to nothing to do with Stencil; it's just a web component!
+
+Instead, use a prefix that fits your company or any name for a group of related components. For example, all of the Ionic generated web components use the prefix `ion`.
+
+We suggest: `<tttx-button>` for example.
+
+## Testing Components
+
+Stencil uses a testing framework built using Jest and Puppeteer. It provides support for two types of test: Unit and End-to-End.
+
+You can find out more form their [docs](https://stenciljs.com/docs/testing-overview)
+
+For our purposes, if you are creating a component that consumes a devextreme component which is itself a container for other components (e.g. a devextreme toolbar that contains a devextreme button), you will want to create an End-to-End test for that.
+
+This is because the helper method that builds a test page in the unit tests mocks out HTML elements, and the mock class it provides doesn't define all the methods that devextreme uses when attaching the component to the container, which causes the render to fail. The End-to-End tests build the component in the browser, so we're able to render them there.
+
+## Using this component
+
+There are three strategies we recommend for using web components built with Stencil.
+
+The first step for all three of these strategies is to [publish to NPM](https://docs.npmjs.com/getting-started/publishing-npm-packages).
+
+-   First, you need to [sign up](https://www.npmjs.com/signup) for an npm account. You will also need to ask an organisation owner to add you as a member of the @3t-transform organisation.
+-   Update the `version` in the package.json.
+-   Publish the new version with `npm publish @3t-transform/threeteeui`
+
+### Script tag
+
+-   Put a script tag similar to this `<script type='module' src='https://unpkg.com/my-component@0.0.1/dist/my-component.esm.js'></script>` in the head of your index.html
+-   Then you can use the element anywhere in your template, JSX, html etc
+
+### Node Modules
+
+-   Run `npm install my-component --save`
+-   Put a script tag similar to this `<script type='module' src='node_modules/my-component/dist/my-component.esm.js'></script>` in the head of your index.html
+-   Then you can use the element anywhere in your template, JSX, html etc
+
+### In a stencil-starter app
+
+-   Run `npm install my-component --save`
+-   Add an import to the npm packages `import my-component;`
+-   Then you can use the element anywhere in your template, JSX, html etc

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

@@ -1,44 +0,0 @@
-'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/collection/components/molecules/tttx-input/tttx-input.js

@@ -1,259 +0,0 @@
-import { Host, h } from '@stencil/core';
-export class TttxInput {
-  constructor() {
-    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 (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-input"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["tttx-input.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["tttx-input.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "label",
-        "reflect": false
-      },
-      "valid": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "valid",
-        "reflect": false
-      },
-      "showerrormsg": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "showerrormsg",
-        "reflect": false
-      },
-      "errormsg": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "errormsg",
-        "reflect": false
-      },
-      "value": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "value",
-        "reflect": false
-      },
-      "type": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "type",
-        "reflect": false,
-        "defaultValue": "'text'"
-      },
-      "placeholder": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "placeholder",
-        "reflect": false
-      },
-      "pattern": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "pattern",
-        "reflect": false
-      },
-      "iconleft": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "iconleft",
-        "reflect": false
-      },
-      "iconright": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "iconright",
-        "reflect": false
-      },
-      "required": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "required",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "isfocused": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "valueChanged",
-        "name": "valueChanged",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        }
-      }];
-  }
-}

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

@@ -1,106 +0,0 @@
-import icons from '../../../icons';
-export default {
-  title: 'Molecules/Text Input',
-  component: 'tttx-input',
-  argTypes: {
-    iconleft: {
-      options: icons,
-      control: { type: 'select' },
-    },
-    iconright: {
-      options: icons,
-      control: { type: 'select' },
-    },
-    type: {
-      options: ['text', 'password', 'email', 'number'],
-      control: { type: 'radio' },
-    },
-    value: {
-      control: { type: 'text' },
-    },
-    label: {
-      control: { type: 'text' },
-    },
-    required: {
-      control: { type: 'boolean' },
-    },
-    errormsg: {
-      control: { type: 'text' },
-    },
-    showerrormsg: {
-      control: { type: 'boolean' },
-    },
-    placeholder: {
-      control: { type: 'text' },
-    },
-  },
-};
-const TemplateTextInput = ({ value, label, iconleft, iconright, type, required, errormsg, showerrormsg, placeholder }) => `
-<tttx-input
-  placeholder="${placeholder}"
-  iconleft="${iconleft || ''}"
-  iconright="${iconright || ''}"
-  value="${value}"  
-  label="${label}"
-  type="${type}"
-  errormsg="${errormsg}"
-  ${required ? `required` : ''}
-  ${showerrormsg ? `showerrormsg` : ''}
-></tttx-input>
-`;
-export const TextInputBasic = TemplateTextInput.bind({});
-TextInputBasic.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/components/tttx-input.js

@@ -1,77 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './tttx-icon2.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$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.valueChanged = 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 (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 style() { return tttxInputCss; }
-}, [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]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["tttx-input", "tttx-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "tttx-input":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TttxInput$1);
-      }
-      break;
-    case "tttx-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-
-const TttxInput = TttxInput$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { TttxInput, defineCustomElement };