@3t-transform/threeteeui 0.1.52 → 0.1.58

package/dist/components/tttx-icon2.js

@@ -2,34 +2,34 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 
 const tttxIconCss = ".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:inline-block;cursor:default;user-select:none}.icon-size{width:24px;height:24px}.tooltip{background:#ffffff;color:#343434;font-weight:bold;padding:8px 16px;font-size:13px;border-radius:4px;box-shadow:0 0 5px 1px rgba(0, 0, 0, 0.3);display:none}.tooltip[data-show]{display:block}.arrow,.arrow::before{position:absolute;width:8px;height:8px;background:inherit}.arrow{visibility:hidden}.arrow::before{visibility:visible;content:\"\";transform:rotate(45deg)}.tooltip[data-popper-placement^=top]>.arrow{bottom:-4px}.tooltip[data-popper-placement^=bottom]>.arrow{top:-4px}.tooltip[data-popper-placement^=left]>.arrow{right:-4px}.tooltip[data-popper-placement^=right]>.arrow{left:-4px}.red{color:#dc0000}.darkred{color:#A20000}.orange{color:#f59500}.blue{color:#1479c6}.green{color:#a2bb31}.gray{color:#757575}.black{color:#212121}.white{color:white}";
 
-const TttxIcon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.icon = undefined;
-    this.color = 'grey';
-  }
-  render() {
-    return (h(Host, null, h("span", { class: `material-symbols-rounded ${this.color ? this.color : ''}` }, this.icon)));
-  }
-  static get style() { return tttxIconCss; }
-}, [1, "tttx-icon", {
-    "icon": [1],
-    "color": [1]
-  }]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["tttx-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "tttx-icon":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TttxIcon);
-      }
-      break;
-  } });
+const TttxIcon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.icon = undefined;
+    this.color = 'grey';
+  }
+  render() {
+    return (h(Host, null, h("span", { class: `material-symbols-rounded ${this.color ? this.color : ''}` }, this.icon)));
+  }
+  static get style() { return tttxIconCss; }
+}, [1, "tttx-icon", {
+    "icon": [1],
+    "color": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tttx-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tttx-icon":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TttxIcon);
+      }
+      break;
+  } });
 }
 
 export { TttxIcon as T, defineCustomElement as d };

package/dist/components/tttx-keyvalue-block.js

@@ -2,82 +2,82 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 
 const tttxKeyvalueBlockCss = ":host{display:block}dl{margin:0;padding:0;font-family:\"Roboto\", sans-serif;cursor:default}dt{font-weight:400;line-height:21px;font-size:16px}dt,dt.subTitle{color:#757575}dt.mainTitle{color:#212121}dt,dd{overflow-wrap:anywhere}dd{margin:0;font-weight:400;font-size:16px;color:#212121;line-height:21px;margin-bottom:18px}dl.horizontal{display:flex;flex-direction:row;width:100%}dl.horizontal div{flex-grow:1}@media (max-width: 769px){dl.horizontal{flex-wrap:wrap}dl.horizontal div{width:50%;max-width:50% !important}}@media (max-width: 600px){dl.horizontal div{width:100%;max-width:100% !important}}";
 
-const TttxKeyvalueBlock$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.keyvalues = undefined;
-    this.horizontal = undefined;
-  }
-  renderSingleElements(values) {
-    const keys = Object.keys(values);
-    const elements = [];
-    const divSize = (100 / keys.length).toString() + '%';
-    for (let i = 0; i < keys.length; i++) {
-      if (this.horizontal) {
-        elements.push(h("div", { style: { maxWidth: divSize } }, h("dt", null, keys[i]), h("dd", null, values[keys[i]])));
-      }
-      else {
-        elements.push(h("dt", null, keys[i]));
-        elements.push(h("dd", null, values[keys[i]]));
-      }
-    }
-    return elements;
-  }
-  renderArrayElements(values) {
-    const elements = [];
-    const divSize = (100 / values.length).toString() + '%';
-    for (let i = 0; i < values.length; i++) {
-      const value = values[i];
-      if (this.horizontal) {
-        elements.push(h("div", { style: { maxWidth: divSize } }, h("dt", { class: 'mainTitle' }, value.title), h("dt", { class: 'subTitle' }, value.subTitle), h("dd", null, value.data)));
-      }
-      else {
-        elements.push(h("dt", { class: 'mainTitle' }, value.title));
-        elements.push(h("dt", { class: 'subTitle' }, value.subTitle));
-        elements.push(h("dd", null, value.data));
-      }
-    }
-    return elements;
-  }
-  render() {
-    if (!this.keyvalues) {
-      return;
-    }
-    let values;
-    if (typeof this.keyvalues === 'string') {
-      values = JSON.parse(this.keyvalues);
-    }
-    else {
-      values = this.keyvalues;
-    }
-    let elements;
-    if (Array.isArray(values)) {
-      elements = this.renderArrayElements(values);
-    }
-    else {
-      elements = this.renderSingleElements(values);
-    }
-    return (h(Host, null, h("dl", { class: this.horizontal ? 'horizontal' : null }, elements)));
-  }
-  static get style() { return tttxKeyvalueBlockCss; }
-}, [1, "tttx-keyvalue-block", {
-    "keyvalues": [8],
-    "horizontal": [4]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["tttx-keyvalue-block"];
-  components.forEach(tagName => { switch (tagName) {
-    case "tttx-keyvalue-block":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TttxKeyvalueBlock$1);
-      }
-      break;
-  } });
+const TttxKeyvalueBlock$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.keyvalues = undefined;
+    this.horizontal = undefined;
+  }
+  renderSingleElements(values) {
+    const keys = Object.keys(values);
+    const elements = [];
+    const divSize = (100 / keys.length).toString() + '%';
+    for (let i = 0; i < keys.length; i++) {
+      if (this.horizontal) {
+        elements.push(h("div", { style: { maxWidth: divSize } }, h("dt", null, keys[i]), h("dd", null, values[keys[i]])));
+      }
+      else {
+        elements.push(h("dt", null, keys[i]));
+        elements.push(h("dd", null, values[keys[i]]));
+      }
+    }
+    return elements;
+  }
+  renderArrayElements(values) {
+    const elements = [];
+    const divSize = (100 / values.length).toString() + '%';
+    for (let i = 0; i < values.length; i++) {
+      const value = values[i];
+      if (this.horizontal) {
+        elements.push(h("div", { style: { maxWidth: divSize } }, h("dt", { class: 'mainTitle' }, value.title), h("dt", { class: 'subTitle' }, value.subTitle), h("dd", null, value.data)));
+      }
+      else {
+        elements.push(h("dt", { class: 'mainTitle' }, value.title));
+        elements.push(h("dt", { class: 'subTitle' }, value.subTitle));
+        elements.push(h("dd", null, value.data));
+      }
+    }
+    return elements;
+  }
+  render() {
+    if (!this.keyvalues) {
+      return;
+    }
+    let values;
+    if (typeof this.keyvalues === 'string') {
+      values = JSON.parse(this.keyvalues);
+    }
+    else {
+      values = this.keyvalues;
+    }
+    let elements;
+    if (Array.isArray(values)) {
+      elements = this.renderArrayElements(values);
+    }
+    else {
+      elements = this.renderSingleElements(values);
+    }
+    return (h(Host, null, h("dl", { class: this.horizontal ? 'horizontal' : null }, elements)));
+  }
+  static get style() { return tttxKeyvalueBlockCss; }
+}, [1, "tttx-keyvalue-block", {
+    "keyvalues": [8],
+    "horizontal": [4]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tttx-keyvalue-block"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tttx-keyvalue-block":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TttxKeyvalueBlock$1);
+      }
+      break;
+  } });
 }
 
 const TttxKeyvalueBlock = TttxKeyvalueBlock$1;

package/dist/components/tttx-list.js

@@ -4,59 +4,59 @@ import { d as defineCustomElement$2 } from './tttx-icon2.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}.list{margin:0;padding:0}.item{list-style:none;margin:0;padding:8px;border-bottom:1px solid #d5d5d5;min-height:36px;display:flex;align-items:center}.item:first-of-type{border-top:1px solid #d5d5d5}.item.clickable:hover{cursor:pointer}.item.clickable:active{background-color:#e6e6e6}.align-right{margin-left:auto}.item-content{display:flex;align-items:center}";
 
-const TttxList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.rowClick = createEvent(this, "listRowClick", 7);
-    this.data = undefined;
-    this.name = undefined;
-  }
-  onRowClickHandler(item) {
-    if (!item.clickable || !item.rowData)
-      return;
-    this.rowClick.emit({ name: this.name, data: item.rowData });
-  }
-  renderListItem(item) {
-    const cleanHTML = purify.sanitize(item.element, domSanitiserOptions);
-    return (h("li", { class: `item  ${item.clickable ? 'clickable' : ''}`, onClick: () => {
-        this.onRowClickHandler(item);
-      } }, item.element && h("span", { class: "item-content", innerHTML: cleanHTML }), item.icon && h("tttx-icon", { class: "align-right ", icon: item.icon })));
-  }
-  render() {
-    if (!this.data)
-      return;
-    if (typeof this.data === 'string') {
-      this._data = JSON.parse(this.data);
-    }
-    else {
-      this._data = this.data;
-    }
-    return h("ul", { class: "list" }, this._data.map((item) => this.renderListItem(item)));
-  }
-  static get style() { return tttxListCss; }
-}, [1, "tttx-list", {
-    "data": [1025],
-    "name": [1]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["tttx-list", "tttx-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "tttx-list":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TttxList$1);
-      }
-      break;
-    case "tttx-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+const TttxList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.rowClick = createEvent(this, "listRowClick", 7);
+    this.data = undefined;
+    this.name = undefined;
+  }
+  onRowClickHandler(item) {
+    if (!item.clickable || !item.rowData)
+      return;
+    this.rowClick.emit({ name: this.name, data: item.rowData });
+  }
+  renderListItem(item) {
+    const cleanHTML = purify.sanitize(item.element, domSanitiserOptions);
+    return (h("li", { class: `item  ${item.clickable ? 'clickable' : ''}`, onClick: () => {
+        this.onRowClickHandler(item);
+      } }, item.element && h("span", { class: "item-content", innerHTML: cleanHTML }), item.icon && h("tttx-icon", { class: "align-right ", icon: item.icon })));
+  }
+  render() {
+    if (!this.data)
+      return;
+    if (typeof this.data === 'string') {
+      this._data = JSON.parse(this.data);
+    }
+    else {
+      this._data = this.data;
+    }
+    return h("ul", { class: "list" }, this._data.map((item) => this.renderListItem(item)));
+  }
+  static get style() { return tttxListCss; }
+}, [1, "tttx-list", {
+    "data": [1025],
+    "name": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tttx-list", "tttx-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tttx-list":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TttxList$1);
+      }
+      break;
+    case "tttx-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
 }
 
 const TttxList = TttxList$1;

package/dist/components/tttx-loading-spinner.js

@@ -2,39 +2,39 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 
 const tttxLoadingSpinnerCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.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$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.loadingMessage = undefined;
-    this.size = 'large';
-  }
-  renderLoadingMessage() {
-    if (!this.loadingMessage)
-      return '';
-    return h("div", { class: "loading-text" }, "Loading, please wait...");
-  }
-  render() {
-    return (h("div", null, h("div", { class: "loading-box" }, h("span", { class: `spinner ${this.size}` })), this.renderLoadingMessage()));
-  }
-  static get style() { return tttxLoadingSpinnerCss; }
-}, [1, "tttx-loading-spinner", {
-    "loadingMessage": [1028, "loading-message"],
-    "size": [1025]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["tttx-loading-spinner"];
-  components.forEach(tagName => { switch (tagName) {
-    case "tttx-loading-spinner":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TttxLoadingSpinner$1);
-      }
-      break;
-  } });
+const TttxLoadingSpinner$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.loadingMessage = undefined;
+    this.size = 'large';
+  }
+  renderLoadingMessage() {
+    if (!this.loadingMessage)
+      return '';
+    return h("div", { class: "loading-text" }, "Loading, please wait...");
+  }
+  render() {
+    return (h("div", null, h("div", { class: "loading-box" }, h("span", { class: `spinner ${this.size}` })), this.renderLoadingMessage()));
+  }
+  static get style() { return tttxLoadingSpinnerCss; }
+}, [1, "tttx-loading-spinner", {
+    "loadingMessage": [1028, "loading-message"],
+    "size": [1025]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tttx-loading-spinner"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tttx-loading-spinner":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TttxLoadingSpinner$1);
+      }
+      break;
+  } });
 }
 
 const TttxLoadingSpinner = TttxLoadingSpinner$1;

package/dist/components/tttx-qrcode.js

@@ -7,51 +7,51 @@ var qrcode_min = createCommonjsModule(function (module, exports) {
 
 const tttxQrcodeCss = "";
 
-const TttxQrCode = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.link = 'https://example.com';
-    this.size = 258;
-  }
-  componentDidLoad() {
-    const options = {
-      width: this.size,
-      height: this.size,
-      correctLevel: qrcode_min.QRErrorCorrectLevel.H,
-      background: '#ffffff',
-      foreground: '#000000',
-      text: this.link,
-    };
-    this.setShadowCanvas('qrcode', options);
-  }
-  setShadowCanvas(id, options) {
-    const parent = this.hostElement.shadowRoot.getElementById(id);
-    parent.innerHTML = '';
-    parent.appendChild(qrcode_min.QRCode.createCanvas(options));
-  }
-  render() {
-    return h("div", { id: "qrcode" });
-  }
-  get hostElement() { return this; }
-  static get style() { return tttxQrcodeCss; }
-}, [1, "tttx-qrcode", {
-    "link": [1025],
-    "size": [1026]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["tttx-qrcode"];
-  components.forEach(tagName => { switch (tagName) {
-    case "tttx-qrcode":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TttxQrCode);
-      }
-      break;
-  } });
+const TttxQrCode = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.link = 'https://example.com';
+    this.size = 258;
+  }
+  componentDidLoad() {
+    const options = {
+      width: this.size,
+      height: this.size,
+      correctLevel: qrcode_min.QRErrorCorrectLevel.H,
+      background: '#ffffff',
+      foreground: '#000000',
+      text: this.link,
+    };
+    this.setShadowCanvas('qrcode', options);
+  }
+  setShadowCanvas(id, options) {
+    const parent = this.hostElement.shadowRoot.getElementById(id);
+    parent.innerHTML = '';
+    parent.appendChild(qrcode_min.QRCode.createCanvas(options));
+  }
+  render() {
+    return h("div", { id: "qrcode" });
+  }
+  get hostElement() { return this; }
+  static get style() { return tttxQrcodeCss; }
+}, [1, "tttx-qrcode", {
+    "link": [1025],
+    "size": [1026]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tttx-qrcode"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tttx-qrcode":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TttxQrCode);
+      }
+      break;
+  } });
 }
 
 const TttxQrcode = TttxQrCode;