@3t-transform/threeteeui 0.0.22 → 0.0.24

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

@@ -1,185 +1,24 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { h, Host } from '@stencil/core';
+import { h } from '@stencil/core';
 export class TttxList {
   constructor() {
-    this.rowCount = 0;
-    this.name = undefined;
-    this.selectable = undefined;
-    this.items = [];
-    this.selectedIds = [];
-    this.loading = true;
-    this.lastPage = false;
+    this.data = undefined;
   }
-  listLoadHandler(event) {
-    if (event.detail.name !== this.name)
-      return;
-    this.items = [...this.items, ...event.detail.items];
-    this.loading = false;
-    this.lastPage = event.detail.lastPage;
-    this.renderRows(event.detail.items);
-    if (this.scrollableParent.clientHeight === this.scrollableParent.scrollHeight)
-      this.listPaginateHandler();
-  }
-  listPaginateHandler() {
-    // We don't want to emit an event to load the next page if this is the last page, or if we're already loading
-    if (this.lastPage || this.loading)
-      return;
-    this.loading = true;
-    this.listPaginate.emit({ name: this.name });
-  }
-  listClearDataCacheHandler(event) {
-    if (event.detail.name !== this.name)
-      return;
-    this.items = [];
-    this.selectedIds = [];
-    this.listItemContainer()
-      .querySelectorAll('.tttx-list__row')
-      .forEach((node) => {
-      node.remove();
-    });
-    this.rowCount = 0;
-    this.lastPage = false;
-    this.loading = false;
+  renderListItem(item) {
+    // Onclick should return some row data. May need to rethink how we handle data, since we don't want to return a template
+    // Alternatively, could return some sort of row id/index instead
+    return h("li", { class: "item", onClick: () => { this.listSelectedEvent.emit({}); } }, item.element && h("span", { class: "item-content", innerHTML: item.element }), item.chevron && h("tttx-icon", { class: "align-right", icon: "chevron_right" }));
   }
-  listActionSelectedEventHandler(event) {
-    if (event.detail.name !== this.name || !this.selectable || this.selectedIds.length === 0)
-      return;
-    const selectedRows = this.selectedIds.map(id => {
-      return this.items[id];
-    });
-    if (event.detail.removeRows)
-      this.removeSelectedRows();
-    this.listSelectedEvent.emit({
-      name: this.name,
-      eventName: event.detail.eventName,
-      selectedRows,
-    });
-  }
-  removeSelectedRows() {
-    const orderedSelectedIds = [...this.selectedIds].sort((a, b) => {
-      return b - a;
-    });
-    orderedSelectedIds.forEach(itemIndex => {
-      this.items.splice(itemIndex, 1);
-      this.listItemContainer().removeChild(this.listItemContainer().querySelector(`[data-row-id="${itemIndex}"]`));
-      // If this removes the scrollbar and we're not on the last page, load in a new page
-      if (this.scrollableParent.clientHeight === this.scrollableParent.scrollHeight)
-        this.listPaginateHandler();
-    });
-    // Empty selected ids with mutation rather than assignment to avoid unecessary component rerender
-    this.selectedIds.splice(0, this.selectedIds.length);
-  }
-  listItemClickHandler(itemData) {
-    if (this.selectedIds.length !== 0)
+  render() {
+    if (!this.data)
       return;
-    this.listItemClick.emit({ itemData, name: this.name });
-  }
-  componentWillLoad() {
-    this.template = this.host.querySelector('template');
-    this.scrollableParent = this.getScrollableParent(this.host);
-    const scrollableContext = this.scrollableParent === document.scrollingElement ? document : this.scrollableParent;
-    scrollableContext.addEventListener('scroll', this.scrollHandler.bind(this));
-    window.addEventListener('resize', this.scrollHandler.bind(this));
-  }
-  componentDidLoad() {
-    // Emit event to load first page
-    this.listPaginate.emit({ name: this.name });
-  }
-  listItemContainer() {
-    return this.host.shadowRoot.querySelector('.list-item-container');
-  }
-  async scrollHandler() {
-    const { clientHeight, scrollTop, scrollHeight } = this.scrollableParent;
-    if (Math.abs(scrollHeight - clientHeight - scrollTop) < 26)
-      this.listPaginateHandler();
-  }
-  isScrollable(node) {
-    const hasScrollbar = ['scroll', 'auto'].includes(node.style.overflowY);
-    return hasScrollbar;
-  }
-  getScrollableParent(node) {
-    if (!node || node === document.body) {
-      return document.scrollingElement;
+    if (typeof this.data === 'string') {
+      this._data = JSON.parse(this.data);
     }
     else {
-      return this.isScrollable(node) ? node : this.getScrollableParent(node.parentElement);
+      this._data = this.data;
     }
-  }
-  appendRowCheckbox(rowContainer) {
-    if (!this.selectable)
-      return;
-    const rowId = this.rowCount;
-    const checkbox = document.createElement('input');
-    checkbox.setAttribute('type', 'checkbox');
-    checkbox.addEventListener('click', e => {
-      e.stopPropagation();
-      if (e.target.checked) {
-        this.selectedIds = [...this.selectedIds, rowId];
-        rowContainer.classList.add('selected');
-      }
-      else {
-        this.selectedIds = this.selectedIds.filter(id => {
-          return id !== rowId;
-        });
-        rowContainer.classList.remove('selected');
-      }
-    });
-    rowContainer.setAttribute('data-row-id', `${rowId}`);
-    this.rowCount++;
-    rowContainer.appendChild(checkbox);
-  }
-  appendSeededTemplate(rowData, rowContainer) {
-    this.template.childNodes.forEach(child => {
-      const clone = child.cloneNode(false);
-      if (clone.getAttribute('data-fields')) {
-        const fields = clone.getAttribute('data-fields').replace(/\s/g, '').split(',');
-        const filteredRowData = Object.fromEntries(fields.map((field) => {
-          return [field, rowData[field]];
-        }));
-        clone.setAttribute('row-data', JSON.stringify(filteredRowData));
-      }
-      else {
-        clone.setAttribute('row-data', JSON.stringify(rowData));
-      }
-      rowContainer.appendChild(clone);
-    });
-  }
-  appendGenericTemplate(rowData, rowContainer) {
-    const row = document.createElement('div');
-    row.classList.add('generic-template__content');
-    row.textContent = rowData.text;
-    rowContainer.appendChild(row);
-    if (!rowData.icon)
-      return;
-    const icon = document.createElement('span');
-    icon.classList.add('material-symbols-rounded');
-    icon.textContent = rowData.icon;
-    if (rowData.iconColor)
-      icon.style['color'] = rowData.iconColor;
-    row.prepend(icon);
-  }
-  row(rowData) {
-    const rowContainer = document.createElement('div');
-    rowContainer.classList.add('tttx-list__row');
-    rowContainer.addEventListener('click', () => {
-      this.listItemClickHandler(rowData);
-    });
-    this.appendRowCheckbox(rowContainer);
-    this.template ? this.appendSeededTemplate(rowData, rowContainer) : this.appendGenericTemplate(rowData, rowContainer);
-    return rowContainer;
-  }
-  renderRows(batchData) {
-    batchData.forEach(rowData => {
-      this.listItemContainer().appendChild(this.row(rowData));
-    });
-  }
-  loadIndicator() {
-    if (!this.loading)
-      return;
-    return h("div", { class: "load-indicator" }, h("tttx-loading-spinner", { size: 'large' }));
-  }
-  render() {
-    return (h(Host, null, h("div", { class: "list-item-container", tabindex: "0" }, !this.loading && this.items.length === 0 ? 'No data to display' : undefined), this.loadIndicator()));
+    return (h("ul", { class: "list" }, this._data && this._data.map((item) => this.renderListItem(item))));
   }
   static get is() { return "tttx-list"; }
   static get encapsulation() { return "shadow"; }
@@ -195,30 +34,18 @@ export class TttxList {
   }
   static get properties() {
     return {
-      "name": {
+      "data": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "name",
-        "reflect": false
-      },
-      "selectable": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
+          "original": "string | ListItem[]",
+          "resolved": "ListItem[] | string",
+          "references": {
+            "ListItem": {
+              "location": "import",
+              "path": "./interfaces"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -226,52 +53,14 @@ export class TttxList {
           "tags": [],
           "text": ""
         },
-        "attribute": "selectable",
+        "attribute": "data",
         "reflect": false
       }
     };
   }
-  static get states() {
-    return {
-      "items": {},
-      "selectedIds": {},
-      "loading": {},
-      "lastPage": {}
-    };
-  }
   static get events() {
     return [{
-        "method": "listPaginate",
-        "name": "listPaginate",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }, {
         "method": "listSelectedEvent",
-        "name": "listSelectedEvent",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }, {
-        "method": "listItemClick",
         "name": "listItemClick",
         "bubbles": true,
         "cancelable": true,
@@ -287,26 +76,4 @@ export class TttxList {
         }
       }];
   }
-  static get elementRef() { return "host"; }
-  static get listeners() {
-    return [{
-        "name": "listPageLoad",
-        "method": "listLoadHandler",
-        "target": "document",
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "listClearDataCache",
-        "method": "listClearDataCacheHandler",
-        "target": "document",
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "listActionSelectedEvent",
-        "method": "listActionSelectedEventHandler",
-        "target": "document",
-        "capture": false,
-        "passive": false
-      }];
-  }
 }

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

@@ -1,37 +1,39 @@
 export default {
   title: 'molecules/List',
   component: 'tttx-list',
-  argTypes: {
-    selectable: {
-      control: {
-        type: 'boolean'
-      }
-    }
-  }
 };
-export const ListWithGenericTemplate = (args) => {
-  return `
-<script>
-  function loadPage (event) {
-    const page = new CustomEvent('listPageLoad', {
-      detail: {
-        name: 'listWithGenericTemplate',
-        lastPage: true,
-        items: [
-          { text: 'Row with only text' },
-          { text: 'Row with text and an icon', icon: 'sentiment_calm' },
-          { text: 'Row with text and a coloured icon', icon: 'check_circle', iconColor: 'blue' },
-        ]
-      }
-    });
-    document.dispatchEvent(page);
-
-    // Stop this event handler from being duplicated every time the storybook iframe is reloaded
-    document.removeEventListener("listPaginate", loadPage);
-  }
-  document.addEventListener("listPaginate", loadPage);
-</script>
-
-<tttx-list ${args.selectable ? 'selectable' : ''} name='listWithGenericTemplate' />
-  `;
+const TemplateStringList = ({ data }) => `
+    <tttx-list
+        data='${JSON.stringify(data)}'
+        id='list'
+    ></tttx-list>
+`;
+export const BasicStringList = TemplateStringList.bind({});
+BasicStringList.args = {
+  data: [
+    { chevron: true, element: '<span><tttx-icon icon="egg" /></span> Demulon 1,000,000' },
+    { chevron: true, element: '<span><tttx-icon icon="egg" color="red" /></span> Patrick' },
+    { chevron: true, element: '<span><tttx-icon icon="add" /></span> Lee' },
+    { chevron: false, element: '<span><tttx-icon icon="egg" /></span> Ben' },
+  ]
+};
+const TemplateObjectList = ({ data }) => `
+    <tttx-list
+        id='list'
+    ></tttx-list>
+    <script>
+        if(!list) {
+            const list = document.getElementId('list');
+        }
+        list.data = ${JSON.stringify(data)};
+    </script>
+`;
+export const BasicObjectList = TemplateObjectList.bind({});
+BasicObjectList.args = {
+  data: [
+    { chevron: true, element: '<span><tttx-icon icon="egg" /></span> Demulon 1,000,000' },
+    { chevron: true, element: '<span><tttx-icon icon="egg" color="red" /></span> Patrick' },
+    { chevron: true, element: '<span><tttx-icon icon="add" /></span> Lee' },
+    { chevron: true, element: '<span><tttx-icon icon="egg" /></span> Ben' },
+  ]
 };

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

@@ -0,0 +1,9 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('tttx-standalone-input', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<tttx-standalone-input></tttx-standalone-input>');
+    const element = await page.find('tttx-standalone-input');
+    expect(element).toHaveClass('hydrated');
+  });
+});

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

@@ -0,0 +1,146 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { TttxInput } from '../tttx-standalone-input';
+describe('tttx-standalone-input', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [TttxInput],
+      html: '<tttx-standalone-input />',
+    });
+    expect(page.root).toEqualHtml(`
+        <tttx-standalone-input>
+            <label class="inputBlock">
+              <span class="optional">
+                (optional)
+              </span>
+              <input class="standalone" type="text">
+              <span class="errorBubble">
+                <span class="material-symbols-rounded validationicon">
+                  warning
+                </span>
+              </span>
+            </label>
+        </tttx-standalone-input>
+        `);
+  });
+  it('renders the input field with the left icon', async () => {
+    const page = await newSpecPage({
+      components: [TttxInput],
+      html: '<tttx-standalone-input iconleft="info" />',
+    });
+    expect(page.root).toEqualHtml(`
+        <tttx-standalone-input iconleft="info">
+            <label class="inputBlock">
+              <span class="optional">
+                (optional)
+              </span>
+              <div class="icon-left">
+                <tttx-icon color="grey" icon="info"></tttx-icon>
+              </div>
+              <input class="standalone" type="text">
+              <span class="errorBubble">
+                <span class="material-symbols-rounded validationicon">
+                  warning
+                </span>
+              </span>
+            </label>
+        </tttx-standalone-input>
+        `);
+  });
+  it('renders the input field with the right icon', async () => {
+    const page = await newSpecPage({
+      components: [TttxInput],
+      html: '<tttx-standalone-input iconright="info" />',
+    });
+    expect(page.root).toEqualHtml(`
+        <tttx-standalone-input iconright="info">
+            <label class="inputBlock">
+              <span class="optional">
+                (optional)
+              </span>
+              <input class="standalone" type="text">
+              <div class="icon-right">
+                <tttx-icon color="grey" icon="info"></tttx-icon>
+              </div>
+              <span class="errorBubble">
+                <span class="material-symbols-rounded validationicon">
+                  warning
+                </span>
+              </span>
+            </label>
+        </tttx-standalone-input>
+        `);
+  });
+  it('renders the input field with an error message', async () => {
+    const page = await newSpecPage({
+      components: [TttxInput],
+      html: '<tttx-standalone-input required showerrormsg errormsg="The field is required" />',
+    });
+    expect(page.root).toEqualHtml(`
+        <tttx-standalone-input errormsg="The field is required" required="" showerrormsg="">
+            <label class="inputBlock">
+              <input class="invalid standalone" required="" type="text">
+              <span class="errorBubble visible">
+                <span class="material-symbols-rounded validationicon">
+                  warning
+                </span>
+                The field is required
+              </span>
+            </label>
+        </tttx-standalone-input>
+        `);
+  });
+  it('can trigger onInput handler', async () => {
+    const page = await newSpecPage({
+      components: [TttxInput],
+      html: '<tttx-standalone-input />',
+    });
+    const callbackFn = jest.fn();
+    page.doc.addEventListener('valueChanged', callbackFn);
+    const input = page.root.querySelector('input');
+    input.value = 'a';
+    const event = new CustomEvent('input', { composed: true, bubbles: true });
+    input.dispatchEvent(event);
+    expect(callbackFn).toHaveBeenCalled();
+  });
+  it('can trigger onFocus handler', async () => {
+    const page = await newSpecPage({
+      components: [TttxInput],
+      html: '<tttx-standalone-input />',
+    });
+    const callbackFn = jest.fn();
+    page.doc.addEventListener('focusChanged', callbackFn);
+    const input = page.root.querySelector('input');
+    input.focus();
+    const event = new CustomEvent('focus', { composed: true, bubbles: true });
+    input.dispatchEvent(event);
+    expect(callbackFn).toHaveBeenCalled();
+  });
+  it('can trigger onBlur handler', async () => {
+    const page = await newSpecPage({
+      components: [TttxInput],
+      html: '<tttx-standalone-input />',
+    });
+    const callbackFn = jest.fn();
+    page.doc.addEventListener('blurChanged', callbackFn);
+    const input = page.root.querySelector('input');
+    input.blur();
+    const event = new CustomEvent('blur', { composed: true, bubbles: true });
+    input.dispatchEvent(event);
+    expect(callbackFn).toHaveBeenCalled();
+  });
+  it('can trigger onInvalid handler', async () => {
+    const page = await newSpecPage({
+      components: [TttxInput],
+      html: '<tttx-standalone-input />',
+    });
+    const callbackFn = jest.fn();
+    page.doc.addEventListener('invalidChanged', callbackFn);
+    const input = page.root.querySelector('input');
+    // Doesn't work:
+    // input.setCustomValidity('required');
+    // input.checkValidity();
+    const event = new CustomEvent('invalid', { composed: true, bubbles: true });
+    input.dispatchEvent(event);
+    expect(callbackFn).toHaveBeenCalled();
+  });
+});

package/dist/collection/components/molecules/tttx-table/test/tttx-table.e2e.js

@@ -0,0 +1,9 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('tttx-table', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<tttx-table></tttx-table>');
+    const element = await page.find('tttx-table');
+    expect(element).toHaveClass('hydrated');
+  });
+});

package/dist/components/index.d.ts

@@ -1,13 +1,9 @@
 /* tttx custom elements */
 export { TttxButton as TttxButton } from '../types/components/atoms/tttx-button/tttx-button';
-export { TttxCheckbox as TttxCheckbox } from '../types/components/atoms/ttx-checkbox/tttx-checkbox';
-export { TttxForm as TttxForm } from '../types/components/molecules/tttx-form/tttx-form';
 export { TttxIcon as TttxIcon } from '../types/components/atoms/tttx-icon/tttx-icon';
-export { TttxInputCalendar as TttxInputCalendar } from '../types/components/molecules/tttx-input-calendar/tttx-input-calendar';
 export { TttxKeyvalueBlock as TttxKeyvalueBlock } from '../types/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block';
 export { TttxList as TttxList } from '../types/components/molecules/tttx-list/tttx-list';
 export { TttxLoadingSpinner as TttxLoadingSpinner } from '../types/components/atoms/tttx-loading-spinner/tttx-loading-spinner';
-export { TttxPopoverContent as TttxPopoverContent } from '../types/components/atoms/tttx-popover-content/tttx-popover-content';
 export { TttxInput as TttxStandaloneInput } from '../types/components/molecules/tttx-standalone-input/tttx-standalone-input';
 export { TttxTable as TttxTable } from '../types/components/molecules/tttx-table/tttx-table';
 
@@ -23,15 +19,6 @@ export { TttxTable as TttxTable } from '../types/components/molecules/tttx-table
  */
 export declare const setAssetPath: (path: string) => void;
 
-/**
- * Used to specify a nonce value that corresponds with an application's CSP.
- * When set, the nonce will be added to all dynamically created script and style tags at runtime.
- * Alternatively, the nonce value can be set on a meta tag in the DOM head
- * (<meta name="csp-nonce" content="{ nonce value here }" />) which
- * will result in the same behavior.
- */
-export declare const setNonce: (nonce: string) => void
-
 export interface SetPlatformOptions {
   raf?: (c: FrameRequestCallback) => number;
   ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;

package/dist/components/index.js

@@ -1,12 +1,8 @@
-export { setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
+export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
 export { TttxButton, defineCustomElement as defineCustomElementTttxButton } from './tttx-button.js';
-export { TttxCheckbox, defineCustomElement as defineCustomElementTttxCheckbox } from './tttx-checkbox.js';
-export { TttxForm, defineCustomElement as defineCustomElementTttxForm } from './tttx-form.js';
 export { TttxIcon, defineCustomElement as defineCustomElementTttxIcon } from './tttx-icon.js';
-export { TttxInputCalendar, defineCustomElement as defineCustomElementTttxInputCalendar } from './tttx-input-calendar.js';
 export { TttxKeyvalueBlock, defineCustomElement as defineCustomElementTttxKeyvalueBlock } from './tttx-keyvalue-block.js';
 export { TttxList, defineCustomElement as defineCustomElementTttxList } from './tttx-list.js';
 export { TttxLoadingSpinner, defineCustomElement as defineCustomElementTttxLoadingSpinner } from './tttx-loading-spinner.js';
-export { TttxPopoverContent, defineCustomElement as defineCustomElementTttxPopoverContent } from './tttx-popover-content.js';
 export { TttxStandaloneInput, defineCustomElement as defineCustomElementTttxStandaloneInput } from './tttx-standalone-input.js';
 export { TttxTable, defineCustomElement as defineCustomElementTttxTable } from './tttx-table.js';

package/dist/components/tttx-button.js

@@ -1,4 +1,57 @@
-import { T as TttxButton$1, d as defineCustomElement$1 } from './tttx-button2.js';
+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{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}.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;
+  } });
+}
 
 const TttxButton = TttxButton$1;
 const defineCustomElement = defineCustomElement$1;