@3t-transform/threeteeui 0.0.13 → 0.0.15

package/dist/cjs/tttx-list.cjs.entry.js

@@ -1,198 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-bf39be87.js');
-
-const tttxListCss = ".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}:host{display:flex;flex-direction:column}.tttx-list__row{min-height:52px;line-height:36px;padding:8px;display:flex;flex-direction:row;align-items:center;cursor:pointer;border-bottom:1px solid #d5d5d5}.tttx-list__row .generic-template__content{width:100%;display:flex;align-items:center;gap:8px}.tttx-list__row:first-of-type{border-top:1px solid #d5d5d5}.tttx-list__row:focus,.tttx-list__row:active{background-color:#e6e6e6}.tttx-list__row.selected{background-color:#e7f1f9}.load-indicator{display:flex;justify-content:center}";
-
-const TttxList = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.listPaginate = index.createEvent(this, "listPaginate", 7);
-    this.listSelectedEvent = index.createEvent(this, "listSelectedEvent", 7);
-    this.listItemClick = index.createEvent(this, "listItemClick", 7);
-    this.rowCount = 0;
-    this.name = undefined;
-    this.selectable = undefined;
-    this.items = [];
-    this.selectedIds = [];
-    this.loading = true;
-    this.lastPage = false;
-  }
-  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;
-  }
-  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)
-      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;
-    }
-    else {
-      return this.isScrollable(node) ? node : this.getScrollableParent(node.parentElement);
-    }
-  }
-  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 index.h("div", { class: "load-indicator" }, index.h("tttx-loading-spinner", { size: 'large' }));
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("div", { class: "list-item-container", tabindex: "0" }, !this.loading && this.items.length === 0 ? "No data to display" : undefined), this.loadIndicator()));
-  }
-  get host() { return index.getElement(this); }
-};
-TttxList.style = tttxListCss;
-
-exports.tttx_list = TttxList;

package/dist/cjs/tttx-loading-spinner.cjs.entry.js

@@ -1,26 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-bf39be87.js');
-
-const tttxLoadingSpinnerCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.spinner-container{position:absolute}.loading-box{display:flex;align-items:center;justify-content:center}.loading-text{font-size:16px;font-weight:400;padding-top:10px;text-align:center}.spinner{border:solid #1479c6;border-bottom-color:#d5d5d5;border-radius:50%;position:relative;box-sizing:border-box;animation:rotation 1s linear infinite}.spinner.small{height:20px;width:20px;border-width:4px}.spinner.large{height:60px;width:60px;border-width:8px}@keyframes rotation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";
-
-const TttxLoadingSpinner = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.loadingMessage = undefined;
-    this.size = 'large';
-  }
-  renderLoadingMessage() {
-    if (!this.loadingMessage)
-      return '';
-    return index.h("div", { class: "loading-text" }, "Loading, please wait...");
-  }
-  render() {
-    return (index.h("div", { class: "spinner-container" }, index.h("div", { class: "loading-box" }, index.h("span", { class: `spinner ${this.size}` })), this.renderLoadingMessage()));
-  }
-};
-TttxLoadingSpinner.style = tttxLoadingSpinnerCss;
-
-exports.tttx_loading_spinner = TttxLoadingSpinner;

package/dist/cjs/tttx-popover-content.cjs.entry.js

@@ -1,23 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-bf39be87.js');
-
-const tttxPopoverContentCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}:host{display:block;max-width:400px}h4{margin:0;font-size:15px;font-weight:700;color:black;margin-bottom:4px}p{margin:0;font-size:14px;font-weight:normal;color:black;margin-bottom:4px}.linky{color:#1479c6;text-decoration:none;cursor:pointer}";
-
-const TttxPopoverContent = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.header = undefined;
-    this.body = undefined;
-    this.linkcontext = undefined;
-    this.linktext = undefined;
-  }
-  render() {
-    return (index.h(index.Host, null, this.header && index.h("h4", null, this.header), this.body && index.h("p", null, this.body), this.linkcontext && (index.h("span", { class: "linky", onClick: evt => console.log(this.linkcontext, evt) }, this.linktext || 'More Information'))));
-  }
-};
-TttxPopoverContent.style = tttxPopoverContentCss;
-
-exports.tttx_popover_content = TttxPopoverContent;

package/dist/cjs/tttx-standalone-input.cjs.entry.js

@@ -1,136 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-bf39be87.js');
-
-const tttxStandaloneInputCss = ".material-symbols-rounded.sc-tttx-standalone-input{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded.sc-tttx-standalone-input{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}.icon-left.sc-tttx-standalone-input,.icon-right.sc-tttx-standalone-input{flex-basis:24px}.icon-left.sc-tttx-standalone-input span.sc-tttx-standalone-input,.icon-right.sc-tttx-standalone-input span.sc-tttx-standalone-input{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left.sc-tttx-standalone-input span.sc-tttx-standalone-input{margin-left:4px}.icon-right.sc-tttx-standalone-input span.sc-tttx-standalone-input{margin-right:4px}.icon-right.sc-tttx-standalone-input{margin-top:5px;margin-right:4px}.icon-left.sc-tttx-standalone-input{margin-top:5px;margin-left:4px}.iconleft.sc-tttx-standalone-input .input.sc-tttx-standalone-input{padding-left:4px}.iconright.sc-tttx-standalone-input .input.sc-tttx-standalone-input{padding-right:4px}.focused.sc-tttx-standalone-input{border-color:#1479c6}.errormsg.sc-tttx-standalone-input{display:flex;justify-content:center;align-items:center;float:left;margin-bottom:16px;box-sizing:border-box;background-color:transparent;height:26px;font-size:14px;border-radius:none;z-index:2;color:#dc0000}.errormsg.sc-tttx-standalone-input .validationicon.sc-tttx-standalone-input{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#dc0000}.danger.sc-tttx-standalone-input{color:#dc0000}.optional.sc-tttx-standalone-input{color:#757575;font-weight:normal}label.inputBlock.sc-tttx-standalone-input{display:block;position:relative;line-height:21px}label.sc-tttx-standalone-input{font-weight:500;font-size:16px}input.sc-tttx-standalone-input:not([type=submit]){font-family:\"Roboto\", serif;box-sizing:border-box;width:100%;height:36px;padding:0 16px;font-size:16px;border:1px solid #d5d5d5;border-radius:4px;margin-top:4px}input[type=date].sc-tttx-standalone-input{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}input.invalid.sc-tttx-standalone-input:invalid,input.standalone.invalid.sc-tttx-standalone-input{border:1px solid #dc0000}input.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input{min-height:27px;position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center}input.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input:not(.visible){visibility:hidden}input.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input span.sc-tttx-standalone-input{color:#dc0000;font-size:16px;margin-right:4px;height:16px}input.invalid.sc-tttx-standalone-input:invalid~.errorBubble.sc-tttx-standalone-input{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;visibility:visible}input.sc-tttx-standalone-input:focus{border-color:#1479c6}.sc-tttx-standalone-input-h{display:block}";
-
-const TttxInput = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.valueChanged = index.createEvent(this, "valueChanged", 7);
-    this.focusChanged = index.createEvent(this, "focusChanged", 7);
-    this.blurChanged = index.createEvent(this, "blurChanged", 7);
-    this.label = undefined;
-    this.showerrormsg = undefined;
-    this.errormsg = undefined;
-    this.iconleft = undefined;
-    this.iconright = undefined;
-    this.autocapitalize = undefined;
-    this.autocomplete = undefined;
-    this.autofocus = undefined;
-    this.checked = undefined;
-    this.disabled = undefined;
-    this.max = undefined;
-    this.maxlength = undefined;
-    this.min = undefined;
-    this.minlength = undefined;
-    this.name = undefined;
-    this.pattern = undefined;
-    this.placeholder = undefined;
-    this.readonly = undefined;
-    this.required = undefined;
-    this.step = undefined;
-    this.type = 'text';
-    this.value = undefined;
-  }
-  handleChange(event) {
-    const target = event.target;
-    this.value = target.value;
-    this.valueChanged.emit(target.value);
-  }
-  handleFocus(event) {
-    const target = event.target;
-    this.valueChanged.emit(target.value);
-  }
-  handleBlur(event) {
-    const target = event.target;
-    this.valueChanged.emit(target.value);
-  }
-  render() {
-    const classNames = ['standalone', this.showerrormsg ? 'invalid' : ''].join(' ');
-    return (index.h(index.Host, null, index.h("label", { class: 'inputBlock' }, this.label, !this.required ? index.h("span", { class: "optional" }, "\u00A0(optional)") : '', this.iconleft && (index.h("div", { class: "icon-left" }, index.h("tttx-icon", { icon: this.iconleft, colour: "grey" }))), index.h("input", { class: classNames, autocapitalize: this.type === 'url' || this.type === 'email' || this.type === 'password' ? this.autocapitalize : null, autofocus: this.autofocus, autocomplete: this.type === 'text' ||
-        this.type === 'search' ||
-        this.type === 'url' ||
-        this.type === 'tel' ||
-        this.type === 'email' ||
-        this.type === 'password' ||
-        this.type === 'datepickers' ||
-        this.type === 'range' ||
-        this.type === 'color'
-        ? this.autocomplete
-        : null, checked: this.type === 'checkbox' || this.type === 'radio' ? this.checked : null, disabled: !this.required ? this.disabled : null, max: this.type === 'date' ||
-        this.type === 'month' ||
-        this.type === 'week' ||
-        this.type === 'time' ||
-        this.type === 'datetime-local' ||
-        this.type === 'number' ||
-        this.type === 'range'
-        ? this.max
-        : null, maxlength: this.maxlength, min: this.type === 'date' ||
-        this.type === 'month' ||
-        this.type === 'week' ||
-        this.type === 'time' ||
-        this.type === 'datetime-local' ||
-        this.type === 'number' ||
-        this.type === 'range'
-        ? this.min
-        : null, minlength: this.minlength, name: this.name, pattern: this.type === 'text' ||
-        this.type === 'date' ||
-        this.type === 'search' ||
-        this.type === 'url' ||
-        this.type === 'tel' ||
-        this.type === 'email' ||
-        this.type === 'password'
-        ? this.pattern
-        : null, placeholder: this.type === 'text' ||
-        this.type === 'tel' ||
-        this.type === 'email' ||
-        this.type === 'url' ||
-        this.type === 'password' ||
-        this.type === 'search'
-        ? this.placeholder
-        : null, readonly: this.type === 'text' ||
-        this.type === 'search' ||
-        this.type === 'url' ||
-        this.type === 'tel' ||
-        this.type === 'email' ||
-        this.type === 'password' ||
-        this.type === 'date' ||
-        this.type === 'month' ||
-        this.type === 'week' ||
-        this.type === 'time' ||
-        this.type === 'datetime-local' ||
-        this.type === 'number'
-        ? this.readonly
-        : null, required: this.type === 'text' ||
-        this.type === 'search' ||
-        this.type === 'url' ||
-        this.type === 'tel' ||
-        this.type === 'email' ||
-        this.type === 'password' ||
-        this.type === 'date' ||
-        this.type === 'month' ||
-        this.type === 'week' ||
-        this.type === 'time' ||
-        this.type === 'datetime-local' ||
-        this.type === 'number' ||
-        this.type === 'checkbox' ||
-        this.type === 'radio' ||
-        this.type === 'file'
-        ? this.required
-        : null, step: this.type === 'date' ||
-        this.type === 'month' ||
-        this.type === 'week' ||
-        this.type === 'time' ||
-        this.type === 'datetime-local' ||
-        this.type === 'number' ||
-        this.type === 'range'
-        ? this.step
-        : null, type: this.type, value: this.value, onBlur: this.handleBlur.bind(this), onFocus: this.handleFocus.bind(this), onInput: this.handleChange.bind(this) }), this.iconright && (index.h("div", { class: "icon-right" }, index.h("tttx-icon", { icon: this.iconright, colour: "grey" }))), index.h("span", { class: ['errorBubble', this.showerrormsg && this.errormsg ? 'visible' : ''].join(' ') }, index.h("span", { class: "material-symbols-rounded validationicon" }, "warning"), " ", this.errormsg))));
-  }
-};
-TttxInput.style = tttxStandaloneInputCss;
-
-exports.tttx_standalone_input = TttxInput;

package/dist/cjs/tttx.cjs.js

@@ -1,23 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-bf39be87.js');
-
-/*
- Stencil Client Patch Browser v2.22.3 | MIT Licensed | https://stenciljs.com
- */
-const patchBrowser = () => {
-    const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('tttx.cjs.js', document.baseURI).href));
-    const opts = {};
-    if (importMeta !== '') {
-        opts.resourcesUrl = new URL('.', importMeta).href;
-    }
-    return index.promiseResolve(opts);
-};
-
-patchBrowser().then(options => {
-  return index.bootstrapLazy([["tttx-list.cjs",[[1,"tttx-list",{"name":[1],"selectable":[4],"items":[32],"selectedIds":[32],"loading":[32],"lastPage":[32]},[[4,"listPageLoad","listLoadHandler"],[4,"listClearDataCache","listClearDataCacheHandler"],[4,"listActionSelectedEvent","listActionSelectedEventHandler"]]]]],["tttx-standalone-input.cjs",[[2,"tttx-standalone-input",{"label":[1],"showerrormsg":[4],"errormsg":[1],"iconleft":[1],"iconright":[1],"autocapitalize":[1],"autocomplete":[1],"autofocus":[4],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-button.cjs",[[1,"tttx-button",{"fontColor":[1,"font-color"],"buttonStyle":[1,"button-style"]},[[0,"clickEvent","onClicked"]]]]],["tttx-checkbox.cjs",[[1,"tttx-checkbox",{"value":[4],"label":[1],"required":[4]}]]],["tttx-form.cjs",[[1,"tttx-form",{"formschema":[8],"submitValue":[8,"submit-value"]}]]],["tttx-popover-content.cjs",[[1,"tttx-popover-content",{"header":[1],"body":[1],"linkcontext":[1],"linktext":[1]}]]],["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"colour":[1]},[[4,"click","handleDocumentClick"]]]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]]], options);
-});
-
-exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -1,19 +0,0 @@
-{
-  "entries": [
-    "./components/molecules/tttx-standalone-input/tttx-standalone-input.js",
-    "./components/atoms/tttx-button/tttx-button.js",
-    "./components/atoms/tttx-icon/tttx-icon.js",
-    "./components/atoms/tttx-loading-spinner/tttx-loading-spinner.js",
-    "./components/atoms/tttx-popover-content/tttx-popover-content.js",
-    "./components/atoms/ttx-checkbox/tttx-checkbox.js",
-    "./components/molecules/tttx-form/tttx-form.js",
-    "./components/molecules/tttx-list/tttx-list.js"
-  ],
-  "compiler": {
-    "name": "@stencil/core",
-    "version": "2.22.3",
-    "typescriptVersion": "4.9.4"
-  },
-  "collections": [],
-  "bundles": []
-}

package/dist/collection/components/atoms/tttx-button/tttx-button.css

@@ -1,62 +0,0 @@
-.material-symbols-rounded {
-  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
-}
-
-.button {
-  height: 36px;
-  padding: 8px 16px;
-  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:hover {
-  background: #f0f0f0;
-}
-
-.button:active {
-  background: #e3e3e3;
-}
-
-.primary-blue {
-  background: #1479c6;
-  border: 1px solid #1479c6;
-  color: white;
-}
-
-.primary-blue:hover {
-  background: #1169ba;
-}
-
-.primary-blue:active {
-  background: #0951a8;
-}
-
-.secondary-white {
-  background: white;
-  border: 1px solid #212121;
-}
-
-:host {
-  display: inline-block;
-}
-
-.spacingleft {
-  margin-left: 8px;
-}
-
-.font-white {
-  color: white;
-}
-
-.font-black {
-  color: #212121;
-}

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

@@ -1,93 +0,0 @@
-import { Host, h } from '@stencil/core';
-export class TttxButton {
-  constructor() {
-    this.fontColor = undefined;
-    this.buttonStyle = undefined;
-  }
-  onClick() {
-    this.clickEvent.emit('clicked');
-  }
-  onClicked(event) {
-    console.log('Picked up a clickEvent', event);
-  }
-  render() {
-    return (h(Host, null, h("button", { onClick: this.onClick.bind(this), class: `button ${this.fontColor} ${this.buttonStyle}` }, h("span", null, h("slot", null)))));
-  }
-  static get is() { return "tttx-button"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["tttx-button.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["tttx-button.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "fontColor": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "font-color",
-        "reflect": false
-      },
-      "buttonStyle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "button-style",
-        "reflect": false
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "clickEvent",
-        "name": "clickEvent",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        }
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "clickEvent",
-        "method": "onClicked",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
-}

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

@@ -1,27 +0,0 @@
-export default {
-  title: 'Atoms/Button',
-  component: 'tttx-button',
-  argTypes: {
-    fontColor: {
-      control: {
-        type: 'select',
-        options: ['font-white', 'font-black'],
-      },
-    },
-    buttonStyle: {
-      control: {
-        type: 'select',
-        options: ['primary-blue', 'secondary-white'],
-      },
-    },
-  },
-};
-const Template = ({ content, fontColor, buttonStyle }) => `
-<tttx-button font-color=${fontColor} button-style=${buttonStyle}>${content}</tttx-button>
-`;
-export const Default = Template.bind({});
-Default.args = {
-  content: 'My Button',
-  fontColor: 'font-white',
-  buttonStyle: 'primary-blue',
-};