@3t-transform/threeteeui 0.0.15 → 0.0.17

package/dist/components/tttx-standalone-input.js

@@ -0,0 +1,179 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './tttx-icon2.js';
+
+const tttxStandaloneInputCss = ".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}.icon-left,.icon-right{flex-basis:24px}.icon-left span,.icon-right span{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left span{margin-left:4px}.icon-right span{margin-right:4px}.icon-right{margin-top:5px;margin-right:4px}.icon-left{margin-top:5px;margin-left:4px}.iconleft .input{padding-left:4px}.iconright .input{padding-right:4px}.focused{border-color:#1479c6}.errormsg{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 .validationicon{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#dc0000}.danger{color:#dc0000}.optional{color:#757575;font-weight:normal}label.inputBlock{display:block;position:relative;line-height:21px}label{font-weight:500;font-size:16px}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]{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}input.invalid:invalid,input.standalone.invalid{border:1px solid #dc0000}input~.errorBubble{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~.errorBubble:not(.visible){visibility:hidden}input~.errorBubble span{color:#dc0000;font-size:16px;margin-right:4px;height:16px}input.invalid:invalid~.errorBubble{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;visibility:visible}input:focus{border-color:#1479c6}:host{display:block}";
+
+const TttxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.valueChanged = createEvent(this, "valueChanged", 7);
+    this.focusChanged = createEvent(this, "focusChanged", 7);
+    this.blurChanged = 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.focusChanged.emit(target.value);
+  }
+  handleBlur(event) {
+    const target = event.target;
+    this.blurChanged.emit(target.value);
+  }
+  render() {
+    const classNames = ['standalone', this.showerrormsg ? 'invalid' : ''].join(' ');
+    return (h(Host, null, h("label", { class: 'inputBlock' }, this.label, !this.required ? h("span", { class: "optional" }, "\u00A0(optional)") : '', this.iconleft && (h("div", { class: "icon-left" }, h("tttx-icon", { icon: this.iconleft, color: "grey" }))), 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 && (h("div", { class: "icon-right" }, h("tttx-icon", { icon: this.iconright, color: "grey" }))), h("span", { class: ['errorBubble', this.showerrormsg && this.errormsg ? 'visible' : ''].join(' ') }, h("span", { class: "material-symbols-rounded validationicon" }, "warning"), " ", this.errormsg))));
+  }
+  static get style() { return tttxStandaloneInputCss; }
+}, [1, "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]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tttx-standalone-input", "tttx-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tttx-standalone-input":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TttxInput);
+      }
+      break;
+    case "tttx-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const TttxStandaloneInput = TttxInput;
+const defineCustomElement = defineCustomElement$1;
+
+export { TttxStandaloneInput, defineCustomElement };

package/dist/components/tttx-table.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface TttxTable extends Components.TttxTable, HTMLElement {}
+export const TttxTable: {
+  prototype: TttxTable;
+  new (): TttxTable;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/tttx-table.js

@@ -0,0 +1,91 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './tttx-icon2.js';
+import { d as defineCustomElement$2 } from './tttx-popover-content2.js';
+
+const tttxTableCss = "// SPACING $spacing-unit: 4px; // REGULAR $horizontal-spacing: $spacing-unit * 4; $vertical-spacing: $spacing-unit * 2; $base-padding: $vertical-spacing $horizontal-spacing; $base-height: $spacing-unit * 9; $component-spacing: $spacing-unit * 4; // SMALL $horizontal-spacing-sm: $spacing-unit * 2; $vertical-spacing-sm: $spacing-unit * 1; $base-padding-sm: $vertical-spacing-sm $horizontal-spacing-sm; $base-height-sm: $spacing-unit * 7; // COLOURS $grey-0: #212121; $grey-1: #363636; $grey-2: #4c4c4c; $grey-3: #636363; $grey-4: #757575; $grey-5: #9e9e9e; $grey-6: #aeaeae; $grey-7: #c8c8c8; $grey-8: #e3e3e3; $grey-9: #f0f0f0; $white: white; $black: $grey-0; $transparent: transparent; $blue-0: #00187c; $blue-1: #032e8c; $blue-2: #0849a3; $blue-3: #0951a8; $blue-4: #1169ba; $blue-5: #1479c6; $blue-6: #5194d2; $blue-7: #7aacdd; $blue-8: #b9d5ed; $blue-9: #e7f1f9; $red-0: #7c0000; $red-1: #8c0000; $red-2: #a30000; $red-3: #a80000; $red-4: #ba0000; $red-5: #dc0000; $red-6: #d25151; $red-7: #dd7a7a; $red-8: #edc1c1; $red-9: #f9e7e7; $black-1: #e6e6e6; $brand: $blue-0; $accent: $blue-5; $accent-selected: $blue-9; $error: $red-5; $severity-critical: #dc0000; $severity-warning: #f59500; $severity-success: #a2bb31; $severity-info: $accent; $ui-primary: $black; $ui-secondary: $grey-4; $ui-disabled: $grey-2; $ui-placeholder: $grey-5; $ui-background: $grey-9; $ui-sheet: $white; $ui-border: #d5d5d5; // BORDERS $ui-border-radius: 4px; $ui-border-width: 1px; // TYPOGRAPHY $font-size-default: 16px; $font-size-small: 14px; .material-symbols-rounded{font-variation-settings:'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24}.skeleton{animation:skeleton-loading 1s linear infinite alternate;border-radius:4px;width:100%}@keyframes skeleton-loading{0%{background-color:hsl(200, 20%, 80%)}100%{background-color:hsl(200, 20%, 95%)}}:host{display:block}table{box-sizing:border-box;width:100%;border-collapse:collapse;border-spacing:0;border:1px solid #ddd;border-bottom:none}thead tr{height:52px;color:#757575}tbody tr{height:48px;color:#212121}tr{font-family:'Roboto', sans-serif;font-weight:400;font-size:16px;display:flex;align-items:center;border-bottom:1px solid #ddd}.selected{background-color:#F0F0F0}.checked{background-color:#e7f1f9}td,th{min-width:300px;margin-left:16px;display:flex;align-items:left}.skeleton{height:24px;display:block}.align-right{margin-left:auto}";
+
+const TttxTable$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.rowSelected = createEvent(this, "rowSelected", 7);
+    this.headerClicked = createEvent(this, "headerClicked", 7);
+    this.headers = [];
+    this.data = [];
+    this.loading = false;
+    this.selected = -1;
+  }
+  handleKeyDown(ev) {
+    if (ev.key === 'ArrowDown' || ev.key === 'ArrowUp') {
+      this.updateSelectedIndex(ev.key);
+      this.emitRowSelected();
+    }
+  }
+  updateSelectedIndex(key) {
+    if (this.selected === -1) {
+      this.selected = 0;
+    }
+    else {
+      const isArrowDown = key === 'ArrowDown';
+      const isArrowUp = key === 'ArrowUp';
+      if (isArrowDown && this.selected < this.data.length - 1) {
+        this.selected++;
+      }
+      else if (isArrowUp && this.selected > 0) {
+        this.selected--;
+      }
+    }
+  }
+  emitRowSelected() {
+    this.rowSelected.emit(this.data[this.selected]);
+  }
+  rowSelectedHandler(row) {
+    this.rowSelected.emit(row);
+    this.selected = this.data.findIndex((item) => item === row);
+  }
+  headerClickedHandler(key) {
+    this.headerClicked.emit(key);
+  }
+  render() {
+    return (h(Host, null, h("table", null, h("thead", null, h("tr", null, this.loading ?
+      [1, 2, 3].map(() => (h("th", null, h("div", { class: "skeleton" })))) :
+      this.headers && this.headers.map((header) => (h("th", { scope: "col", onClick: () => this.headerClickedHandler(header.key) }, header.label))))), h("tbody", null, this.loading ?
+      [1, 2, 3].map(() => (h("tr", null, h("td", null, h("div", { class: "skeleton" })), h("td", null, h("div", { class: "skeleton" })), h("td", null, h("div", { class: "skeleton" }))))) :
+      Object.keys(this.data).map((key, index) => (h("tr", { class: index === this.selected ? 'selected' : '', onClick: () => this.rowSelectedHandler(this.data[key]) }, this.headers.map((header) => (h("td", null, this.data[key][header.key], " ", header.actions && h("tttx-icon", { class: "align-right", icon: "more_vert" }, h("div", { slot: "popover" }, h("tttx-popover-content", { header: "The humble egg", body: "Most arthropods such as insects, vertebrates (excluding live-bearing mammals), and mollusks lay eggs, although some, such as scorpions, do not.", linkcontext: "Wikipedia_egg", linktext: "Learn more about eggs" })))))))))))));
+  }
+  static get style() { return tttxTableCss; }
+}, [1, "tttx-table", {
+    "headers": [16],
+    "data": [16],
+    "loading": [4],
+    "selected": [2]
+  }, [[4, "keydown", "handleKeyDown"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tttx-table", "tttx-icon", "tttx-popover-content"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tttx-table":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TttxTable$1);
+      }
+      break;
+    case "tttx-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "tttx-popover-content":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const TttxTable = TttxTable$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TttxTable, defineCustomElement };