@3t-transform/threeteeui 0.0.16 → 0.0.17

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

@@ -1,70 +1,70 @@
-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' },
-    },
-  },
-};
+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 || ''}"
@@ -87,70 +87,70 @@ const TemplateTextInput = ({ iconleft, iconright, label, errormsg, showerrormsg,
   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',
-// };
+`;
+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/molecules/tttx-table/tttx-table.js

@@ -1,177 +1,174 @@
-import { Host, h } from '@stencil/core';
-export class TttxTable {
-  constructor() {
-    this.headers = [];
-    this.data = {};
-    this.loading = false;
-    this.selected = -1;
-  }
-  handleKeyDown(ev) {
-    if (ev.key === 'ArrowDown' || ev.key === 'ArrowUp') {
-      this.updateSelectedIndex(ev.key);
-      this.emitRowSelected();
-    }
-  }
-  updateSelectedIndex(key) {
-    if (this.selected === -1) {
-      this.selected = 0;
-    }
-    else {
-      const isArrowDown = key === 'ArrowDown';
-      const isArrowUp = key === 'ArrowUp';
-      if (isArrowDown && this.selected < this.data.length - 1) {
-        this.selected++;
-      }
-      else if (isArrowUp && this.selected > 0) {
-        this.selected--;
-      }
-    }
-  }
-  emitRowSelected() {
-    this.rowSelected.emit(this.data[this.selected]);
-  }
-  rowSelectedHandler(row) {
-    this.rowSelected.emit(row);
-    this.selected = this.data.findIndex((item) => item === row);
-  }
-  headerClickedHandler(key) {
-    this.headerClicked.emit(key);
-  }
-  render() {
-    return (h(Host, null, h("table", null, h("thead", null, h("tr", null, this.loading ?
-      [1, 2, 3].map(() => (h("th", null, h("div", { class: "skeleton" })))) :
-      this.headers && this.headers.map((header) => (h("th", { scope: "col", onClick: () => this.headerClickedHandler(header.key) }, header.label))))), h("tbody", null, this.loading ?
-      [1, 2, 3].map(() => (h("tr", null, h("td", null, h("div", { class: "skeleton" })), h("td", null, h("div", { class: "skeleton" })), h("td", null, h("div", { class: "skeleton" }))))) :
-      Object.keys(this.data).map((key, index) => (h("tr", { class: index === this.selected ? 'selected' : '', onClick: () => this.rowSelectedHandler(this.data[key]) }, this.headers.map((header) => (h("td", null, this.data[key][header.key], " ", header.actions && h("tttx-icon", { class: "align-right", icon: "more_vert" }, h("div", { slot: "popover" }, h("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" })))))))))))));
-  }
-  static get is() { return "tttx-table"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["tttx-table.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["tttx-table.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "headers": {
-        "type": "any",
-        "mutable": false,
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "headers",
-        "reflect": false,
-        "defaultValue": "[]"
-      },
-      "data": {
-        "type": "any",
-        "mutable": false,
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "data",
-        "reflect": false,
-        "defaultValue": "{}"
-      },
-      "loading": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "loading",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "selected": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "selected",
-        "reflect": false,
-        "defaultValue": "-1"
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "rowSelected",
-        "name": "rowSelected",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }, {
-        "method": "headerClicked",
-        "name": "headerClicked",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "keydown",
-        "method": "handleKeyDown",
-        "target": "document",
-        "capture": false,
-        "passive": false
-      }];
-  }
-}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { Host, h } from '@stencil/core';
+export class TttxTable {
+  constructor() {
+    this.headers = [];
+    this.data = [];
+    this.loading = false;
+    this.selected = -1;
+  }
+  handleKeyDown(ev) {
+    if (ev.key === 'ArrowDown' || ev.key === 'ArrowUp') {
+      this.updateSelectedIndex(ev.key);
+      this.emitRowSelected();
+    }
+  }
+  updateSelectedIndex(key) {
+    if (this.selected === -1) {
+      this.selected = 0;
+    }
+    else {
+      const isArrowDown = key === 'ArrowDown';
+      const isArrowUp = key === 'ArrowUp';
+      if (isArrowDown && this.selected < this.data.length - 1) {
+        this.selected++;
+      }
+      else if (isArrowUp && this.selected > 0) {
+        this.selected--;
+      }
+    }
+  }
+  emitRowSelected() {
+    this.rowSelected.emit(this.data[this.selected]);
+  }
+  rowSelectedHandler(row) {
+    this.rowSelected.emit(row);
+    this.selected = this.data.findIndex((item) => item === row);
+  }
+  headerClickedHandler(key) {
+    this.headerClicked.emit(key);
+  }
+  render() {
+    return (h(Host, null, h("table", null, h("thead", null, h("tr", null, this.loading ?
+      [1, 2, 3].map(() => (h("th", null, h("div", { class: "skeleton" })))) :
+      this.headers && this.headers.map((header) => (h("th", { scope: "col", onClick: () => this.headerClickedHandler(header.key) }, header.label))))), h("tbody", null, this.loading ?
+      [1, 2, 3].map(() => (h("tr", null, h("td", null, h("div", { class: "skeleton" })), h("td", null, h("div", { class: "skeleton" })), h("td", null, h("div", { class: "skeleton" }))))) :
+      Object.keys(this.data).map((key, index) => (h("tr", { class: index === this.selected ? 'selected' : '', onClick: () => this.rowSelectedHandler(this.data[key]) }, this.headers.map((header) => (h("td", null, this.data[key][header.key], " ", header.actions && h("tttx-icon", { class: "align-right", icon: "more_vert" }, h("div", { slot: "popover" }, h("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" })))))))))))));
+  }
+  static get is() { return "tttx-table"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-table.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-table.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "headers": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "any[]",
+          "resolved": "any[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "[]"
+      },
+      "data": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "any[]",
+          "resolved": "any[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "[]"
+      },
+      "loading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "loading",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "selected": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "selected",
+        "reflect": false,
+        "defaultValue": "-1"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "rowSelected",
+        "name": "rowSelected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "headerClicked",
+        "name": "headerClicked",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "keydown",
+        "method": "handleKeyDown",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}