@3t-transform/threeteeui 0.1.43 → 0.1.44

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
+      }];
+  }
+}

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

@@ -0,0 +1,380 @@
+export default {
+  title: 'molecules/Dialog box',
+  component: 'tttx-dialog-box',
+  parameters: {
+    docs: {
+      description: {
+        component: 'A magical storybook story about Tttx Dialog Box.',
+      },
+    },
+  },
+};
+const TttxDialogBoxStory = ({ data }) => `
+  <tttx-dialog-box
+    id='dialogBox'
+  ></tttx-dialog-box>
+  <script>
+    if(!dialogBox) {
+      const dialogBox = document.getElementById('dialogBox');
+    }
+    dialogBox.data = ${JSON.stringify(data)};
+  </script>
+`;
+export const Default = TttxDialogBoxStory.bind({});
+Default.args = {
+  data: {
+    header: {
+      title: 'Dialog Title',
+      hasIcon: false,
+      hasClose: true,
+    },
+    body: {
+      isCustomHtml: false,
+      contentText: 'this is the default dialog',
+    },
+    footer: {
+      buttons: [
+        { name: 'primary', type: 'primary' },
+        { name: 'default', type: 'default' },
+        { name: 'No border', type: 'borderless' },
+      ],
+    },
+  },
+};
+const TttxDialogBoxMobile = ({ data }) => `
+  <tttx-dialog-box
+    id='dialogBoxMobile'
+  ></tttx-dialog-box>
+  <script>
+    if(!dialogBoxMobile) {
+      const dialogBoxMobile = document.getElementById('dialogBoxMobile');
+    }
+    dialogBoxMobile.data = ${JSON.stringify(data)};
+    dialogBoxMobile.size = "mobile"
+  </script>
+`;
+export const Mobile = TttxDialogBoxMobile.bind({});
+Mobile.args = {
+  data: {
+    header: {
+      title: 'Mobile Dialog',
+      hasIcon: false,
+      hasClose: true,
+    },
+    body: {
+      isCustomHtml: false,
+      contentText: 'this is a Mobile dialog',
+    },
+    footer: {
+      buttons: [
+        { name: 'primary', type: 'primary' },
+        { name: 'default', type: 'default' },
+        { name: 'copy', icon: 'content_copy', type: 'default' },
+      ],
+    },
+  },
+};
+const TttxDialogBoxSmall = ({ data }) => `
+  <tttx-dialog-box
+    id='dialogBoxSmall'
+  ></tttx-dialog-box>
+  <script>
+    if(!dialogBoxSmall) {
+      const dialogBoxSmall = document.getElementById('dialogBoxSmall');
+    }
+    dialogBoxSmall.data = ${JSON.stringify(data)};
+    dialogBoxSmall.size = "small"
+  </script>
+`;
+export const Small = TttxDialogBoxSmall.bind({});
+Small.args = {
+  data: {
+    header: {
+      title: 'Small Dialog',
+      hasIcon: false,
+      hasClose: true,
+    },
+    body: {
+      isCustomHtml: false,
+      contentText: 'this is a small dialog',
+    },
+    footer: {
+      buttons: [
+        { name: 'primary', type: 'primary' },
+        { name: 'default', type: 'default' },
+        { name: 'No border', type: 'borderless' },
+      ],
+    },
+  },
+};
+const TttxDialogBoxLarge = ({ data }) => `
+  <tttx-dialog-box
+    id='dialogBoxLarge'
+  ></tttx-dialog-box>
+  <script>
+    if(!dialogBoxLarge) {
+      const dialogBoxLarge = document.getElementById('dialogBoxLarge');
+    }
+    dialogBoxLarge.data = ${JSON.stringify(data)};
+    dialogBoxLarge.size = "large"
+  </script>
+`;
+export const Large = TttxDialogBoxLarge.bind({});
+Large.args = {
+  data: {
+    header: {
+      title: 'Large Dialog',
+      hasIcon: false,
+      hasClose: true,
+    },
+    body: {
+      isCustomHtml: false,
+      contentText: 'this is a large dialog',
+    },
+    footer: {
+      buttons: [
+        { name: 'primary', type: 'primary' },
+        { name: 'default', type: 'default' },
+        { name: 'No border', type: 'borderless' },
+      ],
+    },
+  },
+};
+const TttxDialogBoxWithoutCloseButton = ({ data }) => `
+  <tttx-dialog-box
+    id='dialogBoxNoClose'
+  ></tttx-dialog-box>
+  <script>
+    if(!dialogBoxNoClose) {
+      const dialogBoxNoClose = document.getElementById('dialogBoxNoClose');
+    }
+    dialogBoxNoClose.data = ${JSON.stringify(data)};
+  </script>
+`;
+export const closeDisabled = TttxDialogBoxWithoutCloseButton.bind({});
+closeDisabled.args = {
+  data: {
+    header: {
+      title: 'Dialog Without Close Button',
+      hasIcon: false,
+      hasClose: false,
+    },
+    body: {
+      isCustomHtml: false,
+      contentText: 'this is a dialog box without a close buttons',
+    },
+    footer: {
+      buttons: [
+        { name: 'primary', type: 'primary' },
+        { name: 'default', type: 'default' },
+        { name: 'No border', type: 'borderless' },
+      ],
+    },
+  },
+};
+const TttxDialogBoxWithIcon = ({ data }) => `
+  <tttx-dialog-box
+    id='dialogBoxIcon'
+  ></tttx-dialog-box>
+  <script>
+    if(!dialogBoxIcon) {
+      const dialogBoxIcon = document.getElementById('dialogBoxIcon');
+    }
+    dialogBoxIcon.data = ${JSON.stringify(data)};
+  </script>
+`;
+export const Icon = TttxDialogBoxWithIcon.bind({});
+Icon.args = {
+  data: {
+    header: {
+      title: 'Icons Dialog',
+      hasIcon: true,
+      iconName: 'egg',
+      iconColor: 'green',
+      hasClose: true,
+    },
+    body: {
+      isCustomHtml: false,
+      contentText: 'this is a dialog box with an icon in the header and on the buttonss',
+    },
+    footer: {
+      buttons: [
+        { name: 'Primary Icon', icon: 'egg', type: 'primary' },
+        { name: 'default Icon', icon: 'egg', type: 'default' },
+        { name: 'boderless Icon', icon: 'egg', type: 'borderless' },
+      ],
+    },
+  },
+};
+const TttxDialogBoxInfo = ({ data }) => `
+  <tttx-dialog-box
+    id='dialogBoxInfo'
+  ></tttx-dialog-box>
+  <script>
+    if(!dialogBoxInfo) {
+      const dialogBoxInfo = document.getElementById('dialogBoxInfo');
+    }
+    dialogBoxInfo.data = ${JSON.stringify(data)};
+  </script>
+`;
+export const Info = TttxDialogBoxInfo.bind({});
+Info.args = {
+  data: {
+    type: 'info',
+    header: {
+      title: 'Info',
+      hasIcon: true,
+      iconName: 'info',
+      iconColor: 'blue',
+      hasClose: true,
+    },
+    body: {
+      isCustomHtml: false,
+      contentText: 'there is some info',
+    },
+    footer: {
+      buttons: [
+        { name: 'primary', type: 'primary' },
+        { name: 'default', type: 'default' },
+        { name: 'No border', type: 'borderless' },
+      ],
+    },
+  },
+};
+const TttxDialogBoxSuccess = ({ data }) => `
+  <tttx-dialog-box
+    id='dialogBoxSuccess'
+  ></tttx-dialog-box>
+  <script>
+    if(!dialogBoxSuccess) {
+      const dialogBoxSuccess = document.getElementById('dialogBoxSuccess');
+    }
+    dialogBoxSuccess.data = ${JSON.stringify(data)};
+  </script>
+`;
+export const Success = TttxDialogBoxSuccess.bind({});
+Success.args = {
+  data: {
+    type: 'success',
+    header: {
+      title: 'Success',
+      hasIcon: true,
+      iconName: 'check_circle',
+      iconColor: 'green',
+      hasClose: true,
+    },
+    body: {
+      isCustomHtml: false,
+      contentText: 'there is no content',
+    },
+    footer: {
+      buttons: [
+        { name: 'primary', type: 'primary' },
+        { name: 'default', type: 'default' },
+        { name: 'No border', type: 'borderless' },
+      ],
+    },
+  },
+};
+const TttxDialogBoxWarning = ({ data }) => `
+  <tttx-dialog-box
+    id='dialogBoxWarning'
+  ></tttx-dialog-box>
+  <script>
+    if(!dialogBoxWarning) {
+      const dialogBoxWarning = document.getElementById('dialogBoxWarning');
+    }
+    dialogBoxWarning.data = ${JSON.stringify(data)};
+  </script>
+`;
+export const Warning = TttxDialogBoxWarning.bind({});
+Warning.args = {
+  data: {
+    type: 'warning',
+    header: {
+      title: 'Warning',
+      hasIcon: true,
+      iconName: 'warning',
+      iconColor: 'orange',
+      hasClose: true,
+    },
+    body: {
+      isCustomHtml: false,
+      contentText: 'there is a warning',
+    },
+    footer: {
+      buttons: [
+        { name: 'primary', type: 'primary' },
+        { name: 'default', type: 'default' },
+        { name: 'No border', type: 'borderless' },
+      ],
+    },
+  },
+};
+const TttxDialogBoxCritical = ({ data }) => `
+  <tttx-dialog-box
+    id='dialogBoxCritical'
+  ></tttx-dialog-box>
+  <script>
+    if(!dialogBoxCritical) {
+      const dialogBoxCritical = document.getElementById('dialogBoxCritical');
+    }
+    dialogBoxCritical.data = ${JSON.stringify(data)};
+  </script>
+`;
+export const Critical = TttxDialogBoxCritical.bind({});
+Critical.args = {
+  data: {
+    type: 'critical',
+    header: {
+      title: 'Critical',
+      hasIcon: true,
+      iconName: 'report',
+      iconColor: 'red',
+      hasClose: true,
+    },
+    body: {
+      isCustomHtml: false,
+      contentText: 'there is a critical error',
+    },
+    footer: {
+      buttons: [
+        { name: 'primary', type: 'primary' },
+        { name: 'default', type: 'default' },
+        { name: 'No border', type: 'borderless' },
+      ],
+    },
+  },
+};
+const TttxDialogBoxHTML = ({ data }) => `
+  <tttx-dialog-box
+    id='dialogBoxHTML'
+  ></tttx-dialog-box>
+  <script>
+    if(!dialogBoxHTML) {
+      const dialogBoxHTML = document.getElementById('dialogBoxHTML');
+    }
+    dialogBoxHTML.data = ${JSON.stringify(data)};
+  </script>
+`;
+export const CustomHTML = TttxDialogBoxHTML.bind({});
+CustomHTML.args = {
+  data: {
+    header: {
+      title: 'html Dialog',
+      hasIcon: false,
+      hasClose: true,
+    },
+    body: {
+      isCustomHtml: true,
+      customHtml: '<div><div>This is a custom html</div><a href="https://example.com/">Click here</a></div>',
+    },
+    footer: {
+      buttons: [
+        { name: 'primary', type: 'primary' },
+        { name: 'default', type: 'default' },
+        { name: 'No border', type: 'borderless' },
+      ],
+    },
+  },
+};

package/dist/components/index.d.ts

@@ -1,5 +1,6 @@
 /* tttx custom elements */
 export { TttxButton as TttxButton } from '../types/components/atoms/tttx-button/tttx-button';
+export { TttxDialogBox as TttxDialogBox } from '../types/components/molecules/tttx-dialog-box/tttx-dialog-box';
 export { TttxFilter as TttxFilter } from '../types/components/molecules/tttx-filter/tttx-filter';
 export { TttxForm as TttxForm } from '../types/components/molecules/tttx-form/tttx-form';
 export { TttxIcon as TttxIcon } from '../types/components/atoms/tttx-icon/tttx-icon';

package/dist/components/index.js

@@ -1,5 +1,6 @@
 export { setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
 export { TttxButton, defineCustomElement as defineCustomElementTttxButton } from './tttx-button.js';
+export { TttxDialogBox, defineCustomElement as defineCustomElementTttxDialogBox } from './tttx-dialog-box.js';
 export { TttxFilter, defineCustomElement as defineCustomElementTttxFilter } from './tttx-filter.js';
 export { TttxForm, defineCustomElement as defineCustomElementTttxForm } from './tttx-form.js';
 export { TttxIcon, defineCustomElement as defineCustomElementTttxIcon } from './tttx-icon.js';

package/dist/components/tttx-button.js

@@ -1,57 +1,4 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './tttx-icon2.js';
-
-const tttxButtonCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}button{cursor:pointer}.button{font-family:Roboto, serif;box-sizing:border-box;height:36px;min-width:36px;padding:0;margin:0;background:transparent;color:#212121;border:1px solid #c8c8c8;border-radius:4px;text-transform:uppercase;display:flex;justify-content:left;align-items:center;font-size:14px;font-weight:400}.button-content{display:block;padding:0 16px}.icon-left,.icon-right{margin-top:4px}.iconleft{padding-left:8px}.iconleft .button-content{padding-left:4px}.iconright{padding-right:8px}.iconright .button-content{padding-right:4px}.notext{padding:0 6px}.button:hover{background:rgba(17, 17, 17, 0.1);border:1px solid #D5D5D5}.button:active{background:rgba(17, 17, 17, 0.2);border:1px solid #D5D5D5}.primary{background:#1479c6;border:1px solid #1479c6;color:white}.primary:hover{background:#146EB3;border:1px solid #146EB3}.primary:active{background:#1464A2;border:1px solid #1464A2}.borderless{background:transparent;border:none;color:#212121}.borderless:hover{background:rgba(17, 17, 17, 0.1);border:none}.borderless:active{background:rgba(17, 17, 17, 0.2);border:none}.danger{background:#DC0000;border:1px solid #DC0000;color:white}.danger:hover{background:#C60000;border:1px solid #C60000}.danger:active{background:#B00000;border:1px solid #B00000}.disabled{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:hover{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:active{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}:host{display:inline-block}tttx-icon{cursor:inherit}.spacingleft{margin-left:8px}";
-
-const TttxButton$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this._iconcolor = 'black';
-    this.notext = undefined;
-    this.icon = undefined;
-    this.iconposition = 'left';
-    this.design = 'default';
-  }
-  componentWillLoad() {
-    this._design = this.design;
-    const designs = ['primary', 'default', 'disabled', 'danger', 'borderless'];
-    if (!designs.includes(this.design)) {
-      this._design = 'default';
-    }
-    if (this._design === 'primary' || this._design === 'danger') {
-      this._iconcolor = 'white';
-    }
-  }
-  render() {
-    return (h(Host, null, h("button", { class: `button ${this._design} ${this.icon ? 'withicon' : ''} ${this.icon && this.iconposition ? 'icon' + this.iconposition : ''}  ${this.notext ? 'notext' : ''}` }, this.icon && this.iconposition === 'left' && (h("div", { class: "icon-left" }, h("tttx-icon", { icon: this.icon, color: this._iconcolor }))), !this.notext && h("div", { class: "button-content" }, h("slot", null)), this.icon && this.iconposition === 'right' && (h("div", { class: "icon-right" }, h("tttx-icon", { icon: this.icon, color: this._iconcolor }))))));
-  }
-  static get style() { return tttxButtonCss; }
-}, [1, "tttx-button", {
-    "notext": [4],
-    "icon": [1],
-    "iconposition": [1],
-    "design": [1]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["tttx-button", "tttx-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "tttx-button":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TttxButton$1);
-      }
-      break;
-    case "tttx-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
+import { T as TttxButton$1, d as defineCustomElement$1 } from './tttx-button2.js';
 
 const TttxButton = TttxButton$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/tttx-button2.js

@@ -0,0 +1,56 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$1 } from './tttx-icon2.js';
+
+const tttxButtonCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}button{cursor:pointer}.button{font-family:Roboto, serif;box-sizing:border-box;height:36px;min-width:36px;padding:0;margin:0;background:transparent;color:#212121;border:1px solid #c8c8c8;border-radius:4px;text-transform:uppercase;display:flex;justify-content:left;align-items:center;font-size:14px;font-weight:400}.button-content{display:block;padding:0 16px}.icon-left,.icon-right{margin-top:4px}.iconleft{padding-left:8px}.iconleft .button-content{padding-left:4px}.iconright{padding-right:8px}.iconright .button-content{padding-right:4px}.notext{padding:0 6px}.button:hover{background:rgba(17, 17, 17, 0.1);border:1px solid #D5D5D5}.button:active{background:rgba(17, 17, 17, 0.2);border:1px solid #D5D5D5}.primary{background:#1479c6;border:1px solid #1479c6;color:white}.primary:hover{background:#146EB3;border:1px solid #146EB3}.primary:active{background:#1464A2;border:1px solid #1464A2}.borderless{background:transparent;border:none;color:#212121}.borderless:hover{background:rgba(17, 17, 17, 0.1);border:none}.borderless:active{background:rgba(17, 17, 17, 0.2);border:none}.danger{background:#DC0000;border:1px solid #DC0000;color:white}.danger:hover{background:#C60000;border:1px solid #C60000}.danger:active{background:#B00000;border:1px solid #B00000}.disabled{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:hover{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:active{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}:host{display:inline-block}tttx-icon{cursor:inherit}.spacingleft{margin-left:8px}";
+
+const TttxButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this._iconcolor = 'black';
+    this.notext = undefined;
+    this.icon = undefined;
+    this.iconposition = 'left';
+    this.design = 'default';
+  }
+  componentWillLoad() {
+    this._design = this.design;
+    const designs = ['primary', 'default', 'disabled', 'danger', 'borderless'];
+    if (!designs.includes(this.design)) {
+      this._design = 'default';
+    }
+    if (this._design === 'primary' || this._design === 'danger') {
+      this._iconcolor = 'white';
+    }
+  }
+  render() {
+    return (h(Host, null, h("button", { class: `button ${this._design} ${this.icon ? 'withicon' : ''} ${this.icon && this.iconposition ? 'icon' + this.iconposition : ''}  ${this.notext ? 'notext' : ''}` }, this.icon && this.iconposition === 'left' && (h("div", { class: "icon-left" }, h("tttx-icon", { icon: this.icon, color: this._iconcolor }))), !this.notext && h("div", { class: "button-content" }, h("slot", null)), this.icon && this.iconposition === 'right' && (h("div", { class: "icon-right" }, h("tttx-icon", { icon: this.icon, color: this._iconcolor }))))));
+  }
+  static get style() { return tttxButtonCss; }
+}, [1, "tttx-button", {
+    "notext": [4],
+    "icon": [1],
+    "iconposition": [1],
+    "design": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tttx-button", "tttx-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tttx-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TttxButton);
+      }
+      break;
+    case "tttx-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { TttxButton as T, defineCustomElement as d };