@3t-transform/threeteeui 0.1.37 → 0.1.41

package/dist/collection/components/molecules/tttx-list/tttx-list.js

@@ -1,105 +1,105 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { h } from '@stencil/core';
-import * as DOMPurify from 'dompurify';
-import domSanitiserOptions from '../../../shared/domsanitiser.options';
-export class TttxList {
-  constructor() {
-    this.data = undefined;
-    this.name = undefined;
-  }
-  onRowClickHandler(item) {
-    if (!item.clickable || !item.rowData)
-      return;
-    this.rowClick.emit({ name: this.name, data: item.rowData });
-  }
-  renderListItem(item) {
-    const cleanHTML = DOMPurify.sanitize(item.element, domSanitiserOptions);
-    return (h("li", { class: `item  ${item.clickable ? 'clickable' : ''}`, onClick: () => {
-        this.onRowClickHandler(item);
-      } }, item.element && h("span", { class: "item-content", innerHTML: cleanHTML }), item.icon && h("tttx-icon", { class: "align-right ", icon: item.icon })));
-  }
-  render() {
-    if (!this.data)
-      return;
-    if (typeof this.data === 'string') {
-      this._data = JSON.parse(this.data);
-    }
-    else {
-      this._data = this.data;
-    }
-    return h("ul", { class: "list" }, this._data.map((item) => this.renderListItem(item)));
-  }
-  static get is() { return "tttx-list"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["tttx-list.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["tttx-list.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "data": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string | ListItem[]",
-          "resolved": "ListItem[] | string",
-          "references": {
-            "ListItem": {
-              "location": "import",
-              "path": "./interfaces"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "data",
-        "reflect": false
-      },
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "name",
-        "reflect": false
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "rowClick",
-        "name": "listRowClick",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
-}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { h } from '@stencil/core';
+import * as DOMPurify from 'dompurify';
+import domSanitiserOptions from '../../../shared/domsanitiser.options';
+export class TttxList {
+  constructor() {
+    this.data = undefined;
+    this.name = undefined;
+  }
+  onRowClickHandler(item) {
+    if (!item.clickable || !item.rowData)
+      return;
+    this.rowClick.emit({ name: this.name, data: item.rowData });
+  }
+  renderListItem(item) {
+    const cleanHTML = DOMPurify.sanitize(item.element, domSanitiserOptions);
+    return (h("li", { class: `item  ${item.clickable ? 'clickable' : ''}`, onClick: () => {
+        this.onRowClickHandler(item);
+      } }, item.element && h("span", { class: "item-content", innerHTML: cleanHTML }), item.icon && h("tttx-icon", { class: "align-right ", icon: item.icon })));
+  }
+  render() {
+    if (!this.data)
+      return;
+    if (typeof this.data === 'string') {
+      this._data = JSON.parse(this.data);
+    }
+    else {
+      this._data = this.data;
+    }
+    return h("ul", { class: "list" }, this._data.map((item) => this.renderListItem(item)));
+  }
+  static get is() { return "tttx-list"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-list.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-list.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "data": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string | ListItem[]",
+          "resolved": "ListItem[] | string",
+          "references": {
+            "ListItem": {
+              "location": "import",
+              "path": "./interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "data",
+        "reflect": false
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "name",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "rowClick",
+        "name": "listRowClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+}

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

@@ -1,30 +1,30 @@
-import { withActions } from '@storybook/addon-actions/decorator';
-export default {
-  title: 'molecules/List',
-  component: 'tttx-list',
-  parameters: {
-    actions: {
-      handles: ['listRowClick'],
-    },
-  },
-  decorators: [withActions],
-};
+import { withActions } from '@storybook/addon-actions/decorator';
+export default {
+  title: 'molecules/List',
+  component: 'tttx-list',
+  parameters: {
+    actions: {
+      handles: ['listRowClick'],
+    },
+  },
+  decorators: [withActions],
+};
 const TemplateStringList = ({ data }) => `
     <tttx-list
         data='${JSON.stringify(data)}'
         id='list'
         name='stringList'
     ></tttx-list>
-`;
-export const BasicStringList = TemplateStringList.bind({});
-BasicStringList.args = {
-  data: [
-    { icon: 'chevron_right', element: '<span><tttx-icon icon="egg"  color="green" /></span> Demulon 1,000,000' },
-    { icon: 'chevron_right', element: '<span><tttx-icon icon="egg"  color="green" /></span> Patrick' },
-    { icon: 'chevron_right', element: '<span><tttx-icon icon="egg" color="orange" /></span> Lee' },
-    { element: '<span><tttx-icon icon="egg" color="red" /></span> Ben' },
-  ],
-};
+`;
+export const BasicStringList = TemplateStringList.bind({});
+BasicStringList.args = {
+  data: [
+    { icon: 'chevron_right', element: '<span><tttx-icon icon="egg"  color="green" /></span> Demulon 1,000,000' },
+    { icon: 'chevron_right', element: '<span><tttx-icon icon="egg"  color="green" /></span> Patrick' },
+    { icon: 'chevron_right', element: '<span><tttx-icon icon="egg" color="orange" /></span> Lee' },
+    { element: '<span><tttx-icon icon="egg" color="red" /></span> Ben' },
+  ],
+};
 const TemplateObjectList = ({ data }) => `
     <tttx-list
         id='objectList'
@@ -36,16 +36,16 @@ const TemplateObjectList = ({ data }) => `
         }
         objectList.data = ${JSON.stringify(data)};
     </script>
-`;
-export const BasicObjectList = TemplateObjectList.bind({});
-BasicObjectList.args = {
-  data: [
-    { icon: 'chevron_right', element: '<span><tttx-icon icon="egg" /></span> Demulon 1,000,000' },
-    { icon: 'chevron_right', element: '<span><tttx-icon icon="egg" color="red" /></span> Patrick' },
-    { icon: 'chevron_right', element: '<span><tttx-icon icon="add" /></span> Lee' },
-    { icon: 'chevron_right', element: '<span><tttx-icon icon="egg" /></span> Ben' },
-  ],
-};
+`;
+export const BasicObjectList = TemplateObjectList.bind({});
+BasicObjectList.args = {
+  data: [
+    { icon: 'chevron_right', element: '<span><tttx-icon icon="egg" /></span> Demulon 1,000,000' },
+    { icon: 'chevron_right', element: '<span><tttx-icon icon="egg" color="red" /></span> Patrick' },
+    { icon: 'chevron_right', element: '<span><tttx-icon icon="add" /></span> Lee' },
+    { icon: 'chevron_right', element: '<span><tttx-icon icon="egg" /></span> Ben' },
+  ],
+};
 const TemplateClickableList = ({ data }) => `
     <tttx-list
         id='clickableList'
@@ -57,15 +57,15 @@ const TemplateClickableList = ({ data }) => `
         }
         clickableList.data = ${JSON.stringify(data)};
     </script>
-`;
-export const BasicClickableList = TemplateClickableList.bind({});
-BasicClickableList.args = {
-  data: [
-    { clickable: true, icon: 'chevron_right', element: '<span><tttx-icon icon="egg" /></span> Demulon 1,000,000', rowData: '[{ "name": "Demulon 1,000,000" }]' },
-    { clickable: true, icon: 'chevron_right', element: '<span><tttx-icon icon="egg" color="red" /></span> Emma', rowData: [{ name: 'Emma' }] },
-    { clickable: true, icon: 'chevron_right', element: '<span><tttx-icon icon="egg" color="green" /></span> Eulogio', rowData: 'Eulogio' },
-    { clickable: true, icon: 'chevron_right', element: '<span><tttx-icon icon="egg" color="red" /></span> Patrick' },
-    { clickable: false, icon: 'chevron_right', element: '<span><tttx-icon icon="add" /></span> Lee ' },
-    { icon: 'chevron_right', element: '<span><tttx-icon icon="egg" /></span> Ben' },
-  ],
-};
+`;
+export const BasicClickableList = TemplateClickableList.bind({});
+BasicClickableList.args = {
+  data: [
+    { clickable: true, icon: 'chevron_right', element: '<span><tttx-icon icon="egg" /></span> Demulon 1,000,000', rowData: '[{ "name": "Demulon 1,000,000" }]' },
+    { clickable: true, icon: 'chevron_right', element: '<span><tttx-icon icon="egg" color="red" /></span> Emma', rowData: [{ name: 'Emma' }] },
+    { clickable: true, icon: 'chevron_right', element: '<span><tttx-icon icon="egg" color="green" /></span> Eulogio', rowData: 'Eulogio' },
+    { clickable: true, icon: 'chevron_right', element: '<span><tttx-icon icon="egg" color="red" /></span> Patrick' },
+    { clickable: false, icon: 'chevron_right', element: '<span><tttx-icon icon="add" /></span> Lee ' },
+    { icon: 'chevron_right', element: '<span><tttx-icon icon="egg" /></span> Ben' },
+  ],
+};