@3t-transform/threeteeui 0.1.43 → 0.1.45

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

@@ -0,0 +1,74 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { h } from '@stencil/core';
+import { QRCode, QRErrorCorrectLevel } from 'ts-qrcode';
+export class TttxQrCode {
+  constructor() {
+    this.link = 'https://example.com';
+    this.size = 258;
+  }
+  componentDidRender() {
+    const options = {
+      width: this.size,
+      height: this.size,
+      correctLevel: QRErrorCorrectLevel.H,
+      background: '#ffffff',
+      foreground: '#000000',
+      text: this.link,
+    };
+    QRCode.setCanvas('qrcode', options);
+  }
+  render() {
+    return h("div", { id: "qrcode" });
+  }
+  static get is() { return "tttx-qrcode"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-qrcode.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-qrcode.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "link": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "link",
+        "reflect": false,
+        "defaultValue": "'https://example.com'"
+      },
+      "size": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "258"
+      }
+    };
+  }
+}

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

@@ -0,0 +1,22 @@
+export default {
+  title: 'Atoms/QRCode',
+  component: 'tttx-qrcode',
+  argTypes: {
+    url: {
+      control: { type: 'text' },
+    },
+    size: {
+      control: 'number',
+      default: 258
+    },
+  },
+};
+export const basicQRCode = args => {
+  const url = args.url;
+  const size = args.size;
+  return `<tttx-qrcode link='${url}' size='${size}'></tttx-qrcode>`;
+};
+basicQRCode.args = {
+  url: 'https://example.com',
+  size: 258
+};

package/dist/collection/components/molecules/tttx-dialog-box/tttx-dialog-box.css

@@ -0,0 +1,146 @@
+.material-symbols-rounded {
+  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
+}
+
+.material-symbols-rounded {
+  font-family: "Material Symbols Rounded", sans-serif;
+  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;
+}
+
+h3 {
+  margin-block-start: 0em;
+  margin-block-end: 0em;
+}
+
+.dialog-box {
+  background-color: #ffffff;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #d5d5d5;
+  border-radius: 4px;
+  box-shadow: 0px 1px 5px #1111114d;
+}
+
+.dialog-box.small {
+  width: 400px;
+  min-height: 200px;
+  max-height: 500px;
+}
+
+.dialog-box.regular {
+  width: 600px;
+  min-height: 200px;
+  max-height: 500px;
+}
+
+.dialog-box.large {
+  width: 900px;
+  min-height: 200px;
+  max-height: 500px;
+}
+
+.dialog-box.mobile {
+  max-width: 424px;
+  max-height: 510px;
+}
+
+.dialog-box-clickable {
+  cursor: pointer;
+}
+
+.dialog-box-padding {
+  padding: 8px 16px;
+}
+
+.dialog-box-align-right {
+  margin-left: auto;
+  display: flex;
+}
+
+.dialog-box-header-box {
+  border-bottom: 1px solid #d5d5d5;
+  display: flex;
+  flex-direction: row;
+  height: 36px;
+}
+
+.dialog-box-header {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.dialog-box-title {
+  font-size: 18;
+  font-weight: 600;
+  font-family: "Roboto", serif;
+}
+
+.dialog-box-icon {
+  padding-right: 8px;
+  width: 24px;
+  height: 24px;
+}
+
+.dialog-box-icon-close {
+  margin-left: auto;
+  padding-top: 3px;
+  width: 24px;
+  height: 24px;
+}
+
+.dialog-box-content {
+  font-size: 16;
+  font-weight: 400;
+  font-family: "Roboto", serif;
+}
+
+.dialog-box-body-box {
+  padding: 16px;
+}
+
+.dialog-box-footer-box {
+  display: flex;
+  flex-direction: row;
+  margin-top: auto;
+  border-top: 1px solid #d5d5d5;
+  height: 36px;
+}
+
+.dialog-box-footer {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.dialog-box-spacing-button {
+  margin-right: 8px;
+}
+
+.dialog-box-header-box.info {
+  border-bottom: 1px solid #1479c6;
+}
+
+.dialog-box-header-box.success {
+  border-bottom: 1px solid #a2bb31;
+}
+
+.dialog-box-header-box.warning {
+  border-bottom: 1px solid #f59500;
+}
+
+.dialog-box-header-box.critical {
+  border-bottom: 1px solid #dc0000;
+}

package/dist/collection/components/molecules/tttx-dialog-box/tttx-dialog-box.js

@@ -0,0 +1,172 @@
+// 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 TttxDialogBox {
+  constructor() {
+    this.data = undefined;
+    this.size = 'regular';
+    this.elementSize = undefined;
+  }
+  handleResize() {
+    if (window.innerWidth < 698) {
+      this.elementSize = 'mobile';
+    }
+    else {
+      this.elementSize = this.size;
+    }
+  }
+  onCloseClickHandler() {
+    this.closeButtonClick.emit({ close: true });
+  }
+  onButtonClickHandler(index) {
+    this.buttonClick.emit({ buttonNumber: index, buttonClicked: true });
+  }
+  renderHeader(header) {
+    const title = header.title;
+    const iconName = header.iconName;
+    const iconColor = header.iconColor;
+    const iconEnabled = header.hasIcon ? true : false;
+    const closeEnabled = header.hasClose ? true : false;
+    return (h("div", { class: "dialog-box-header" }, iconEnabled && h("tttx-icon", { class: "dialog-box-icon", icon: iconName, color: iconColor }), h("h3", { class: "dialog-box-title" }, title), closeEnabled && (h("div", { class: "dialog-box-align-right close-button", onClick: () => this.onCloseClickHandler() }, h("tttx-icon", { class: "dialog-box-icon-close dialog-box-clickable", icon: "close", color: "black" })))));
+  }
+  renderContent(content) {
+    if (content.isCustomHtml) {
+      const cleanHTML = DOMPurify.sanitize(content.customHtml, domSanitiserOptions);
+      return (h("div", { class: "dialog-box-body" }, h("div", { innerHTML: cleanHTML })));
+    }
+    else {
+      return (h("div", { class: "dialog-box-body" }, h("span", { class: "dialog-box-content" }, content.contentText)));
+    }
+  }
+  renderFooter(footer) {
+    const button = footer.buttons;
+    const button1Enabled = button.length > 0;
+    const button2Enabled = button.length > 1;
+    const button3Enabled = button.length == 3;
+    const isMobile = this.elementSize === 'mobile';
+    return (h("div", { class: "dialog-box-footer" }, h("div", { class: "dialog-box-align-right" }, button3Enabled && (h("tttx-button", { class: "dialog-box-spacing-button", onClick: () => this.onButtonClickHandler(3), design: button[2].type, notext: isMobile, icon: button[2].icon }, !isMobile && button[2].name)), button2Enabled && (h("tttx-button", { class: "dialog-box-spacing-button", onClick: () => this.onButtonClickHandler(2), design: button[1].type, icon: button[1].icon }, button[1].name)), button1Enabled && (h("tttx-button", { onClick: () => this.onButtonClickHandler(1), design: button[0].type, icon: button[0].icon }, button[0].name)))));
+  }
+  componentWillLoad() {
+    if (window.innerWidth < 698) {
+      this.elementSize = 'mobile';
+    }
+    else {
+      this.elementSize = this.size;
+    }
+  }
+  render() {
+    if (!this.data)
+      return;
+    if (typeof this.data === 'string') {
+      this._data = JSON.parse(this.data);
+    }
+    else {
+      this._data = this.data;
+    }
+    return (h("div", { class: `dialog-box ${this.elementSize}` }, h("div", { class: `dialog-box-padding dialog-box-header-box ${this._data.type || ''}` }, this.renderHeader(this._data.header)), h("div", { class: "dialog-box-padding dialog-box-body-box" }, this.renderContent(this._data.body)), h("div", { class: "dialog-box-padding dialog-box-footer-box" }, this.renderFooter(this._data.footer))));
+  }
+  static get is() { return "tttx-dialog-box"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-dialog-box.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-dialog-box.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "data": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string | DialogItems",
+          "resolved": "DialogItems | string",
+          "references": {
+            "DialogItems": {
+              "location": "import",
+              "path": "./interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "data",
+        "reflect": false
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'regular' | 'mobile' | 'large' | 'small'",
+          "resolved": "\"large\" | \"mobile\" | \"regular\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'regular'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "elementSize": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "closeButtonClick",
+        "name": "closeButtonClick",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "buttonClick",
+        "name": "buttonClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "handleResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}