@3t-transform/threeteeui 0.0.6 → 0.0.7

package/dist/collection/components/atoms/tttx-single-input/tttx-single-input.js

@@ -0,0 +1,259 @@
+import { Host, h } from '@stencil/core';
+export class TttxSingleInput {
+  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("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))));
+  }
+  static get is() { return "tttx-single-input"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-single-input.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-single-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/atoms/tttx-single-input/tttx-single-input.stories.js

@@ -0,0 +1,92 @@
+import icons from './../../../icons';
+export default {
+  title: 'Atoms/Single Input',
+  component: 'tttx-single-input',
+  argTypes: {
+    iconleft: {
+      options: icons,
+      control: { type: 'select' },
+    },
+    iconright: {
+      options: icons,
+      control: { type: 'select' },
+    },
+    type: {
+      options: ['text', 'password', 'email', 'number'],
+      control: { type: 'radio' },
+    },
+  },
+};
+const TemplateTest = ({ value, label, iconleft, iconright, type, required, errormsg, placeholder }) => `
+<tttx-single-input
+  placeholder="${placeholder}"
+  iconleft="${iconleft}"
+  iconright="${iconright}"
+  value="${value}"
+  label="${label}"
+  type="${type}"
+  errormsg="${errormsg}"
+  ${required ? `required` : ''}
+></tttx-single-input>
+`;
+export const Default = TemplateTest.bind({});
+Default.args = {
+  value: 'Uh egg',
+  label: 'Please tell me about your egg',
+  icon: 'egg',
+  type: 'text',
+  errormsg: 'Incorrect egg, please egg again.',
+  required: true,
+  valid: true,
+  placeholder: 'Please for the love of god tell me about your egg',
+};
+const TemplateMultiple = () => `
+
+<tttx-single-input
+  iconleft="search"
+  iconright="clear"
+  placeholder="Search for your account"
+  label="Account number"
+  type="text"
+  errormsg="testing123"
+  showerrormsg
+></tttx-single-input>
+
+<tttx-single-input
+  placeholder="Enter first name"
+  label="First name"
+  type="text"
+  errormsg="Your first name is required"
+  required
+  showerrormsg
+></tttx-single-input>
+
+<tttx-single-input
+  placeholder="Enter last name"
+  label="Last name"
+  type="text"
+  errormsg="testing123"
+  required
+  showerrormsg
+></tttx-single-input>
+
+<tttx-single-input
+  placeholder="Enter date of birth"
+  label="Date of birth"
+  type="text"
+  errormsg="testing123"
+  required
+  showerrormsg
+></tttx-single-input>
+
+<tttx-single-input
+  placeholder="Enter email address"
+  label="Email address"
+  type="email"
+  errormsg="testing123"
+  required
+  showerrormsg
+></tttx-single-input>
+
+`;
+export const Example = TemplateMultiple.bind({});

package/dist/collection/components/atoms/tttx-text-box/tttx-text-box.css

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

package/dist/collection/components/atoms/tttx-text-box/tttx-text-box.js

@@ -0,0 +1,150 @@
+import { h, Host } from '@stencil/core';
+export class TttxTextBox {
+  constructor() {
+    this.handleFocus = () => {
+      this.isfocused = true;
+    };
+    this.handleBlur = () => {
+      this.isfocused = false;
+    };
+    this.label = undefined;
+    this.showerrormsg = undefined;
+    this.errormsg = undefined;
+    this.required = undefined;
+    this.value = undefined;
+    this.isfocused = false;
+  }
+  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' : ''].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 }, h("input", { class: "input", type: "text", value: this.value, required: this.required, onInput: event => this.handleChange(event), onFocus: this.handleFocus.bind(this), onBlur: this.handleBlur.bind(this) })), this.showerrormsg && this.errormsg && h("div", { class: "errormsg" }, this.errormsg))));
+  }
+  static get is() { return "tttx-text-box"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-text-box.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-text-box.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
+      },
+      "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
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "required",
+        "reflect": false
+      },
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "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/atoms/tttx-text-box/tttx-text-box.stories.js

@@ -0,0 +1,17 @@
+export default {
+  title: 'Atoms/Text Box',
+  component: 'tttx-text-box'
+};
+const TemplateTest = ({ label, errormsg, required }) => `
+<tttx-text-box
+  label="${label}"
+  errormsg="${errormsg}"
+  ${required ? `required` : ''}
+></tttx-text-box>
+`;
+export const Default = TemplateTest.bind({});
+Default.args = {
+  label: 'Input Label',
+  errormsg: 'Field is required',
+  required: true
+};