@3t-transform/threeteeui 1.9.101 → 1.9.103

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

@@ -1,143 +1,143 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$1 } from './tttx-icon.js';
 
-const tttxStandaloneInputCss = ".material-symbols-rounded.sc-tttx-standalone-input_1_9_101{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded.sc-tttx-standalone-input_1_9_101{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}label.sc-tttx-standalone-input_1_9_101{font-weight:500;font-size:16px;line-height:18.752px;color:#212121}label.sc-tttx-standalone-input_1_9_101 .optional.sc-tttx-standalone-input_1_9_101{color:#757575;font-weight:normal}label.sc-tttx-standalone-input_1_9_101 .outer-container.sc-tttx-standalone-input_1_9_101{position:relative}label.sc-tttx-standalone-input_1_9_101 .outer-container.sc-tttx-standalone-input_1_9_101 .left-icons.sc-tttx-standalone-input_1_9_101,label.sc-tttx-standalone-input_1_9_101 .outer-container.sc-tttx-standalone-input_1_9_101 .right-icons.sc-tttx-standalone-input_1_9_101{display:flex;position:absolute;height:24px;gap:8px}label.sc-tttx-standalone-input_1_9_101 .outer-container.sc-tttx-standalone-input_1_9_101 .left-icons.sc-tttx-standalone-input_1_9_101 tttx-icon.sc-tttx-standalone-input_1_9_101,label.sc-tttx-standalone-input_1_9_101 .outer-container.sc-tttx-standalone-input_1_9_101 .right-icons.sc-tttx-standalone-input_1_9_101 tttx-icon.sc-tttx-standalone-input_1_9_101{height:24px;width:24px}label.sc-tttx-standalone-input_1_9_101 .outer-container.sc-tttx-standalone-input_1_9_101 .left-icons.sc-tttx-standalone-input_1_9_101{left:8px}label.sc-tttx-standalone-input_1_9_101 .outer-container.sc-tttx-standalone-input_1_9_101 .right-icons.sc-tttx-standalone-input_1_9_101{right:8px}label.sc-tttx-standalone-input_1_9_101 .outer-container.sc-tttx-standalone-input_1_9_101 input.sc-tttx-standalone-input_1_9_101,label.sc-tttx-standalone-input_1_9_101 .outer-container.sc-tttx-standalone-input_1_9_101 textarea.sc-tttx-standalone-input_1_9_101{color:#212121;box-sizing:border-box;border:1px solid #d5d5d5;border-radius:4px;margin-top:4px;padding:0;padding-left:16px;padding-right:16px}label.sc-tttx-standalone-input_1_9_101 .outer-container.sc-tttx-standalone-input_1_9_101 input.has-input-icon.sc-tttx-standalone-input_1_9_101,label.sc-tttx-standalone-input_1_9_101 .outer-container.sc-tttx-standalone-input_1_9_101 textarea.has-input-icon.sc-tttx-standalone-input_1_9_101{padding-left:40px}label.sc-tttx-standalone-input_1_9_101 .outer-container.sc-tttx-standalone-input_1_9_101 input.has-input-icon.has-left-icon.sc-tttx-standalone-input_1_9_101,label.sc-tttx-standalone-input_1_9_101 .outer-container.sc-tttx-standalone-input_1_9_101 textarea.has-input-icon.has-left-icon.sc-tttx-standalone-input_1_9_101{padding-left:72px}label.sc-tttx-standalone-input_1_9_101 .outer-container.sc-tttx-standalone-input_1_9_101 input.has-left-icon.sc-tttx-standalone-input_1_9_101,label.sc-tttx-standalone-input_1_9_101 .outer-container.sc-tttx-standalone-input_1_9_101 textarea.has-left-icon.sc-tttx-standalone-input_1_9_101{padding-left:40px}label.sc-tttx-standalone-input_1_9_101 .outer-container.sc-tttx-standalone-input_1_9_101 input.has-right-icon.sc-tttx-standalone-input_1_9_101,label.sc-tttx-standalone-input_1_9_101 .outer-container.sc-tttx-standalone-input_1_9_101 textarea.has-right-icon.sc-tttx-standalone-input_1_9_101{padding-right:40px}label.sc-tttx-standalone-input_1_9_101 .outer-container.sc-tttx-standalone-input_1_9_101 input.invalid.sc-tttx-standalone-input_1_9_101,label.sc-tttx-standalone-input_1_9_101 .outer-container.sc-tttx-standalone-input_1_9_101 textarea.invalid.sc-tttx-standalone-input_1_9_101{border:1px solid #dc0000}label.sc-tttx-standalone-input_1_9_101 .outer-container.sc-tttx-standalone-input_1_9_101 input.sc-tttx-standalone-input_1_9_101:not([type=submit]),label.sc-tttx-standalone-input_1_9_101 .outer-container.sc-tttx-standalone-input_1_9_101 textarea.sc-tttx-standalone-input_1_9_101:not([type=submit]){font-family:\"Roboto\", serif;width:100%;height:36px;font-size:16px;line-height:18.752px}label.sc-tttx-standalone-input_1_9_101 .outer-container.sc-tttx-standalone-input_1_9_101 input[type=radio].sc-tttx-standalone-input_1_9_101,label.sc-tttx-standalone-input_1_9_101 .outer-container.sc-tttx-standalone-input_1_9_101 textarea[type=radio].sc-tttx-standalone-input_1_9_101{width:20px;height:20px}label.sc-tttx-standalone-input_1_9_101 .outer-container.sc-tttx-standalone-input_1_9_101 input[type=date].sc-tttx-standalone-input_1_9_101,label.sc-tttx-standalone-input_1_9_101 .outer-container.sc-tttx-standalone-input_1_9_101 textarea[type=date].sc-tttx-standalone-input_1_9_101{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}label.sc-tttx-standalone-input_1_9_101 .outer-container.sc-tttx-standalone-input_1_9_101 input[readonly].sc-tttx-standalone-input_1_9_101,label.sc-tttx-standalone-input_1_9_101 .outer-container.sc-tttx-standalone-input_1_9_101 textarea[readonly].sc-tttx-standalone-input_1_9_101{cursor:default;pointer-events:none;user-select:none;color:gray}label.sc-tttx-standalone-input_1_9_101 .outer-container.sc-tttx-standalone-input_1_9_101 input.sc-tttx-standalone-input_1_9_101:focus,label.sc-tttx-standalone-input_1_9_101 .outer-container.sc-tttx-standalone-input_1_9_101 textarea.sc-tttx-standalone-input_1_9_101:focus{border-color:#1479c6}label.sc-tttx-standalone-input_1_9_101 .outer-container.sc-tttx-standalone-input_1_9_101 input.sc-tttx-standalone-input_1_9_101:focus-visible,label.sc-tttx-standalone-input_1_9_101 .outer-container.sc-tttx-standalone-input_1_9_101 textarea.sc-tttx-standalone-input_1_9_101:focus-visible{outline:none}label.sc-tttx-standalone-input_1_9_101 .outer-container.sc-tttx-standalone-input_1_9_101 textarea.sc-tttx-standalone-input_1_9_101{padding:8px;height:auto;min-height:100px;resize:vertical}label.sc-tttx-standalone-input_1_9_101 .outer-container.sc-tttx-standalone-input_1_9_101 textarea.resize-none.sc-tttx-standalone-input_1_9_101{resize:none}label.sc-tttx-standalone-input_1_9_101 .outer-container.inputBlock.sc-tttx-standalone-input_1_9_101{display:flex;align-items:center;line-height:21px}label.sc-tttx-standalone-input_1_9_101 .outer-container.inputBlock.sc-tttx-standalone-input_1_9_101 .left-icons.sc-tttx-standalone-input_1_9_101,label.sc-tttx-standalone-input_1_9_101 .outer-container.inputBlock.sc-tttx-standalone-input_1_9_101 .right-icons.sc-tttx-standalone-input_1_9_101{margin-top:4px}label.sc-tttx-standalone-input_1_9_101 .outer-container.inputBlock.readonly.sc-tttx-standalone-input_1_9_101{pointer-events:none;user-select:none;color:gray}label.sc-tttx-standalone-input_1_9_101 .outer-container.inputBlock.radioBlock.sc-tttx-standalone-input_1_9_101{display:block}label.sc-tttx-standalone-input_1_9_101 .outer-container.inputInline.sc-tttx-standalone-input_1_9_101{display:flex;white-space:nowrap;align-items:center;margin:0}label.sc-tttx-standalone-input_1_9_101 .outer-container.inputInline.sc-tttx-standalone-input_1_9_101 input.sc-tttx-standalone-input_1_9_101{margin-top:0}label.sc-tttx-standalone-input_1_9_101 .secondarylabel.sc-tttx-standalone-input_1_9_101{color:#757575;font-size:14px;line-height:16.408px;font-weight:normal;display:flex;margin-top:4px}label.sc-tttx-standalone-input_1_9_101 .errorBubble.sc-tttx-standalone-input_1_9_101{position:relative;font-size:14px;line-height:16.408px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center;margin-top:4px}label.sc-tttx-standalone-input_1_9_101 .errorBubble.sc-tttx-standalone-input_1_9_101:not(.visible){display:none}label.sc-tttx-standalone-input_1_9_101 .errorBubble.sc-tttx-standalone-input_1_9_101 span.sc-tttx-standalone-input_1_9_101{color:#dc0000;font-size:16px;margin-right:4px}.material-symbols-rounded.sc-tttx-standalone-input_1_9_101{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}.sc-tttx-standalone-input_1_9_101-h{display:block}";
+const tttxStandaloneInputCss = ".material-symbols-rounded.sc-tttx-standalone-input_1_9_103{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded.sc-tttx-standalone-input_1_9_103{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}label.sc-tttx-standalone-input_1_9_103{font-weight:500;font-size:16px;line-height:18.752px;color:#212121}label.sc-tttx-standalone-input_1_9_103 .optional.sc-tttx-standalone-input_1_9_103{color:#757575;font-weight:normal}label.sc-tttx-standalone-input_1_9_103 .outer-container.sc-tttx-standalone-input_1_9_103{position:relative}label.sc-tttx-standalone-input_1_9_103 .outer-container.sc-tttx-standalone-input_1_9_103 .left-icons.sc-tttx-standalone-input_1_9_103,label.sc-tttx-standalone-input_1_9_103 .outer-container.sc-tttx-standalone-input_1_9_103 .right-icons.sc-tttx-standalone-input_1_9_103{display:flex;position:absolute;height:24px;gap:8px}label.sc-tttx-standalone-input_1_9_103 .outer-container.sc-tttx-standalone-input_1_9_103 .left-icons.sc-tttx-standalone-input_1_9_103 tttx-icon.sc-tttx-standalone-input_1_9_103,label.sc-tttx-standalone-input_1_9_103 .outer-container.sc-tttx-standalone-input_1_9_103 .right-icons.sc-tttx-standalone-input_1_9_103 tttx-icon.sc-tttx-standalone-input_1_9_103{height:24px;width:24px}label.sc-tttx-standalone-input_1_9_103 .outer-container.sc-tttx-standalone-input_1_9_103 .left-icons.sc-tttx-standalone-input_1_9_103{left:8px}label.sc-tttx-standalone-input_1_9_103 .outer-container.sc-tttx-standalone-input_1_9_103 .right-icons.sc-tttx-standalone-input_1_9_103{right:8px}label.sc-tttx-standalone-input_1_9_103 .outer-container.sc-tttx-standalone-input_1_9_103 input.sc-tttx-standalone-input_1_9_103,label.sc-tttx-standalone-input_1_9_103 .outer-container.sc-tttx-standalone-input_1_9_103 textarea.sc-tttx-standalone-input_1_9_103{color:#212121;box-sizing:border-box;border:1px solid #d5d5d5;border-radius:4px;margin-top:4px;padding:0;padding-left:16px;padding-right:16px}label.sc-tttx-standalone-input_1_9_103 .outer-container.sc-tttx-standalone-input_1_9_103 input.has-input-icon.sc-tttx-standalone-input_1_9_103,label.sc-tttx-standalone-input_1_9_103 .outer-container.sc-tttx-standalone-input_1_9_103 textarea.has-input-icon.sc-tttx-standalone-input_1_9_103{padding-left:40px}label.sc-tttx-standalone-input_1_9_103 .outer-container.sc-tttx-standalone-input_1_9_103 input.has-input-icon.has-left-icon.sc-tttx-standalone-input_1_9_103,label.sc-tttx-standalone-input_1_9_103 .outer-container.sc-tttx-standalone-input_1_9_103 textarea.has-input-icon.has-left-icon.sc-tttx-standalone-input_1_9_103{padding-left:72px}label.sc-tttx-standalone-input_1_9_103 .outer-container.sc-tttx-standalone-input_1_9_103 input.has-left-icon.sc-tttx-standalone-input_1_9_103,label.sc-tttx-standalone-input_1_9_103 .outer-container.sc-tttx-standalone-input_1_9_103 textarea.has-left-icon.sc-tttx-standalone-input_1_9_103{padding-left:40px}label.sc-tttx-standalone-input_1_9_103 .outer-container.sc-tttx-standalone-input_1_9_103 input.has-right-icon.sc-tttx-standalone-input_1_9_103,label.sc-tttx-standalone-input_1_9_103 .outer-container.sc-tttx-standalone-input_1_9_103 textarea.has-right-icon.sc-tttx-standalone-input_1_9_103{padding-right:40px}label.sc-tttx-standalone-input_1_9_103 .outer-container.sc-tttx-standalone-input_1_9_103 input.invalid.sc-tttx-standalone-input_1_9_103,label.sc-tttx-standalone-input_1_9_103 .outer-container.sc-tttx-standalone-input_1_9_103 textarea.invalid.sc-tttx-standalone-input_1_9_103{border:1px solid #dc0000}label.sc-tttx-standalone-input_1_9_103 .outer-container.sc-tttx-standalone-input_1_9_103 input.sc-tttx-standalone-input_1_9_103:not([type=submit]),label.sc-tttx-standalone-input_1_9_103 .outer-container.sc-tttx-standalone-input_1_9_103 textarea.sc-tttx-standalone-input_1_9_103:not([type=submit]){font-family:\"Roboto\", serif;width:100%;height:36px;font-size:16px;line-height:18.752px}label.sc-tttx-standalone-input_1_9_103 .outer-container.sc-tttx-standalone-input_1_9_103 input[type=radio].sc-tttx-standalone-input_1_9_103,label.sc-tttx-standalone-input_1_9_103 .outer-container.sc-tttx-standalone-input_1_9_103 textarea[type=radio].sc-tttx-standalone-input_1_9_103{width:20px;height:20px}label.sc-tttx-standalone-input_1_9_103 .outer-container.sc-tttx-standalone-input_1_9_103 input[type=date].sc-tttx-standalone-input_1_9_103,label.sc-tttx-standalone-input_1_9_103 .outer-container.sc-tttx-standalone-input_1_9_103 textarea[type=date].sc-tttx-standalone-input_1_9_103{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}label.sc-tttx-standalone-input_1_9_103 .outer-container.sc-tttx-standalone-input_1_9_103 input[readonly].sc-tttx-standalone-input_1_9_103,label.sc-tttx-standalone-input_1_9_103 .outer-container.sc-tttx-standalone-input_1_9_103 textarea[readonly].sc-tttx-standalone-input_1_9_103{cursor:default;pointer-events:none;user-select:none;color:gray}label.sc-tttx-standalone-input_1_9_103 .outer-container.sc-tttx-standalone-input_1_9_103 input.sc-tttx-standalone-input_1_9_103:focus,label.sc-tttx-standalone-input_1_9_103 .outer-container.sc-tttx-standalone-input_1_9_103 textarea.sc-tttx-standalone-input_1_9_103:focus{border-color:#1479c6}label.sc-tttx-standalone-input_1_9_103 .outer-container.sc-tttx-standalone-input_1_9_103 input.sc-tttx-standalone-input_1_9_103:focus-visible,label.sc-tttx-standalone-input_1_9_103 .outer-container.sc-tttx-standalone-input_1_9_103 textarea.sc-tttx-standalone-input_1_9_103:focus-visible{outline:none}label.sc-tttx-standalone-input_1_9_103 .outer-container.sc-tttx-standalone-input_1_9_103 textarea.sc-tttx-standalone-input_1_9_103{padding:8px;height:auto;min-height:100px;resize:vertical}label.sc-tttx-standalone-input_1_9_103 .outer-container.sc-tttx-standalone-input_1_9_103 textarea.resize-none.sc-tttx-standalone-input_1_9_103{resize:none}label.sc-tttx-standalone-input_1_9_103 .outer-container.inputBlock.sc-tttx-standalone-input_1_9_103{display:flex;align-items:center;line-height:21px}label.sc-tttx-standalone-input_1_9_103 .outer-container.inputBlock.sc-tttx-standalone-input_1_9_103 .left-icons.sc-tttx-standalone-input_1_9_103,label.sc-tttx-standalone-input_1_9_103 .outer-container.inputBlock.sc-tttx-standalone-input_1_9_103 .right-icons.sc-tttx-standalone-input_1_9_103{margin-top:4px}label.sc-tttx-standalone-input_1_9_103 .outer-container.inputBlock.readonly.sc-tttx-standalone-input_1_9_103{pointer-events:none;user-select:none;color:gray}label.sc-tttx-standalone-input_1_9_103 .outer-container.inputBlock.radioBlock.sc-tttx-standalone-input_1_9_103{display:block}label.sc-tttx-standalone-input_1_9_103 .outer-container.inputInline.sc-tttx-standalone-input_1_9_103{display:flex;white-space:nowrap;align-items:center;margin:0}label.sc-tttx-standalone-input_1_9_103 .outer-container.inputInline.sc-tttx-standalone-input_1_9_103 input.sc-tttx-standalone-input_1_9_103{margin-top:0}label.sc-tttx-standalone-input_1_9_103 .secondarylabel.sc-tttx-standalone-input_1_9_103{color:#757575;font-size:14px;line-height:16.408px;font-weight:normal;display:flex;margin-top:4px}label.sc-tttx-standalone-input_1_9_103 .errorBubble.sc-tttx-standalone-input_1_9_103{position:relative;font-size:14px;line-height:16.408px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center;margin-top:4px}label.sc-tttx-standalone-input_1_9_103 .errorBubble.sc-tttx-standalone-input_1_9_103:not(.visible){display:none}label.sc-tttx-standalone-input_1_9_103 .errorBubble.sc-tttx-standalone-input_1_9_103 span.sc-tttx-standalone-input_1_9_103{color:#dc0000;font-size:16px;margin-right:4px}.material-symbols-rounded.sc-tttx-standalone-input_1_9_103{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}.sc-tttx-standalone-input_1_9_103-h{display:block}";
 
-const TttxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.valueChanged = createEvent(this, "valueChanged", 7);
-    this.focusChanged = createEvent(this, "focusChanged", 7);
-    this.blurChanged = createEvent(this, "blurChanged", 7);
-    this.invalidChanged = createEvent(this, "invalidChanged", 7);
-    this.inputIconClick = createEvent(this, "inputIconClick", 7);
-    this.leftIconClick = createEvent(this, "leftIconClick", 7);
-    this.rightIconClick = createEvent(this, "rightIconClick", 7);
-    this.label = undefined;
-    this.secondarylabel = undefined;
-    this.showerrormsg = undefined;
-    this.showerrorbubble = true;
-    this.errormsg = undefined;
-    this.iconleft = undefined;
-    this.iconleftcolor = 'grey';
-    this.iconright = undefined;
-    this.iconrightcolor = 'grey';
-    this.inputicon = undefined;
-    this.inputiconcolor = 'grey';
-    this.inline = undefined;
-    this.inputautocapitalize = undefined;
-    this.inputautofocus = undefined;
-    this.inputkeyhint = undefined;
-    this.inputindex = undefined;
-    this.inputtitle = undefined;
-    this.autocomplete = 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);
-  }
-  handleInvalid(event) {
-    event.preventDefault();
-    const target = event.target;
-    this.invalidChanged.emit(target.value);
-  }
-  handleInputIconClick(event) {
-    event.preventDefault();
-    this.inputIconClick.emit();
-  }
-  handleLeftIconClick(event) {
-    event.preventDefault();
-    this.leftIconClick.emit();
-  }
-  handleRightIconClick(event) {
-    event.preventDefault();
-    this.rightIconClick.emit();
-  }
-  render() {
-    const classNames = [
-      this.showerrormsg ? 'invalid' : '',
-      this.inputicon ? 'has-input-icon' : '',
-      this.iconleft ? 'has-left-icon' : '',
-      this.iconright ? 'has-right-icon' : '',
-    ].join(' ');
-    return (h(Host, null, h("label", null, this.label, !this.required ? h("span", { class: "optional" }, "\u00A0(optional)") : '', h("div", { class: ['outer-container', this.inline ? 'inputInline' : 'inputBlock'].join(' ') }, h("input", { class: classNames, autocapitalize: this.inputautocapitalize, autofocus: this.inputautofocus, enterkeyhint: this.inputkeyhint, tabindex: this.inputindex, title: this.inputtitle, autocomplete: this.autocomplete, checked: this.checked, disabled: this.disabled, max: this.max, maxlength: this.maxlength, min: this.min, minlength: this.minlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readonly: this.readonly, required: this.required, step: this.step, type: this.type, value: this.value, onBlur: this.handleBlur.bind(this), onFocus: this.handleFocus.bind(this), onInput: this.handleChange.bind(this), onInvalid: this.handleInvalid.bind(this) }), (this.inputicon || this.iconleft) && (h("span", { class: "left-icons" }, this.inputicon && (h("tttx-icon_1_9_101", { class: "input-icon", icon: this.inputicon, color: this.inputiconcolor, onClick: this.handleInputIconClick.bind(this) })), this.iconleft && (h("tttx-icon_1_9_101", { class: "left-icon", icon: this.iconleft, color: this.iconleftcolor, onClick: this.handleLeftIconClick.bind(this) })))), this.iconright && (h("span", { class: "right-icons" }, h("tttx-icon_1_9_101", { class: "right-icon", icon: this.iconright, color: this.iconrightcolor, onClick: this.handleRightIconClick.bind(this) })))), this.secondarylabel && h("span", { class: "secondarylabel" }, this.secondarylabel), this.showerrorbubble && (h("span", { class: ['errorBubble', this.showerrormsg && this.errormsg ? 'visible' : ''].join(' ') }, h("span", { class: "material-symbols-rounded" }, "warning"), " ", this.errormsg)))));
-  }
-  static get style() { return tttxStandaloneInputCss; }
-}, [2, "tttx-standalone-input_1_9_101", {
-    "label": [1],
-    "secondarylabel": [1],
-    "showerrormsg": [4],
-    "showerrorbubble": [4],
-    "errormsg": [1],
-    "iconleft": [1],
-    "iconleftcolor": [1],
-    "iconright": [1],
-    "iconrightcolor": [1],
-    "inputicon": [1],
-    "inputiconcolor": [1],
-    "inline": [4],
-    "inputautocapitalize": [1],
-    "inputautofocus": [4],
-    "inputkeyhint": [1],
-    "inputindex": [8],
-    "inputtitle": [1],
-    "autocomplete": [1],
-    "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() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["tttx-standalone-input_1_9_101", "tttx-icon_1_9_101"];
-  components.forEach(tagName => { switch (tagName) {
-    case "tttx-standalone-input_1_9_101":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TttxInput);
-      }
-      break;
-    case "tttx-icon_1_9_101":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
+const TttxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.valueChanged = createEvent(this, "valueChanged", 7);
+    this.focusChanged = createEvent(this, "focusChanged", 7);
+    this.blurChanged = createEvent(this, "blurChanged", 7);
+    this.invalidChanged = createEvent(this, "invalidChanged", 7);
+    this.inputIconClick = createEvent(this, "inputIconClick", 7);
+    this.leftIconClick = createEvent(this, "leftIconClick", 7);
+    this.rightIconClick = createEvent(this, "rightIconClick", 7);
+    this.label = undefined;
+    this.secondarylabel = undefined;
+    this.showerrormsg = undefined;
+    this.showerrorbubble = true;
+    this.errormsg = undefined;
+    this.iconleft = undefined;
+    this.iconleftcolor = 'grey';
+    this.iconright = undefined;
+    this.iconrightcolor = 'grey';
+    this.inputicon = undefined;
+    this.inputiconcolor = 'grey';
+    this.inline = undefined;
+    this.inputautocapitalize = undefined;
+    this.inputautofocus = undefined;
+    this.inputkeyhint = undefined;
+    this.inputindex = undefined;
+    this.inputtitle = undefined;
+    this.autocomplete = 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);
+  }
+  handleInvalid(event) {
+    event.preventDefault();
+    const target = event.target;
+    this.invalidChanged.emit(target.value);
+  }
+  handleInputIconClick(event) {
+    event.preventDefault();
+    this.inputIconClick.emit();
+  }
+  handleLeftIconClick(event) {
+    event.preventDefault();
+    this.leftIconClick.emit();
+  }
+  handleRightIconClick(event) {
+    event.preventDefault();
+    this.rightIconClick.emit();
+  }
+  render() {
+    const classNames = [
+      this.showerrormsg ? 'invalid' : '',
+      this.inputicon ? 'has-input-icon' : '',
+      this.iconleft ? 'has-left-icon' : '',
+      this.iconright ? 'has-right-icon' : '',
+    ].join(' ');
+    return (h(Host, null, h("label", null, this.label, !this.required ? h("span", { class: "optional" }, "\u00A0(optional)") : '', h("div", { class: ['outer-container', this.inline ? 'inputInline' : 'inputBlock'].join(' ') }, h("input", { class: classNames, autocapitalize: this.inputautocapitalize, autofocus: this.inputautofocus, enterkeyhint: this.inputkeyhint, tabindex: this.inputindex, title: this.inputtitle, autocomplete: this.autocomplete, checked: this.checked, disabled: this.disabled, max: this.max, maxlength: this.maxlength, min: this.min, minlength: this.minlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readonly: this.readonly, required: this.required, step: this.step, type: this.type, value: this.value, onBlur: this.handleBlur.bind(this), onFocus: this.handleFocus.bind(this), onInput: this.handleChange.bind(this), onInvalid: this.handleInvalid.bind(this) }), (this.inputicon || this.iconleft) && (h("span", { class: "left-icons" }, this.inputicon && (h("tttx-icon_1_9_103", { class: "input-icon", icon: this.inputicon, color: this.inputiconcolor, onClick: this.handleInputIconClick.bind(this) })), this.iconleft && (h("tttx-icon_1_9_103", { class: "left-icon", icon: this.iconleft, color: this.iconleftcolor, onClick: this.handleLeftIconClick.bind(this) })))), this.iconright && (h("span", { class: "right-icons" }, h("tttx-icon_1_9_103", { class: "right-icon", icon: this.iconright, color: this.iconrightcolor, onClick: this.handleRightIconClick.bind(this) })))), this.secondarylabel && h("span", { class: "secondarylabel" }, this.secondarylabel), this.showerrorbubble && (h("span", { class: ['errorBubble', this.showerrormsg && this.errormsg ? 'visible' : ''].join(' ') }, h("span", { class: "material-symbols-rounded" }, "warning"), " ", this.errormsg)))));
+  }
+  static get style() { return tttxStandaloneInputCss; }
+}, [2, "tttx-standalone-input_1_9_103", {
+    "label": [1],
+    "secondarylabel": [1],
+    "showerrormsg": [4],
+    "showerrorbubble": [4],
+    "errormsg": [1],
+    "iconleft": [1],
+    "iconleftcolor": [1],
+    "iconright": [1],
+    "iconrightcolor": [1],
+    "inputicon": [1],
+    "inputiconcolor": [1],
+    "inline": [4],
+    "inputautocapitalize": [1],
+    "inputautofocus": [4],
+    "inputkeyhint": [1],
+    "inputindex": [8],
+    "inputtitle": [1],
+    "autocomplete": [1],
+    "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() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tttx-standalone-input_1_9_103", "tttx-icon_1_9_103"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tttx-standalone-input_1_9_103":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TttxInput);
+      }
+      break;
+    case "tttx-icon_1_9_103":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
 }
 
 export { TttxInput as T, defineCustomElement as d };

package/dist/components/tttx-standalone-input_1_9_103.d.ts

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

package/dist/components/{tttx-standalone-input_1_9_101.js → tttx-standalone-input_1_9_103.js}

@@ -1,6 +1,6 @@
 import { T as TttxInput, d as defineCustomElement$1 } from './tttx-standalone-input.js';
 
-const TttxStandaloneInput_1_9_101 = TttxInput;
+const TttxStandaloneInput_1_9_103 = TttxInput;
 const defineCustomElement = defineCustomElement$1;
 
-export { TttxStandaloneInput_1_9_101, defineCustomElement };
+export { TttxStandaloneInput_1_9_103, defineCustomElement };

package/dist/components/{tttx-chart_1_9_101.d.ts → tttx-table_1_9_103.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface TttxChart_1_9_101 extends Components.TttxChart_1_9_101, HTMLElement {}
-export const TttxChart_1_9_101: {
-  prototype: TttxChart_1_9_101;
-  new (): TttxChart_1_9_101;
+interface TttxTable_1_9_103 extends Components.TttxTable_1_9_103, HTMLElement {}
+export const TttxTable_1_9_103: {
+  prototype: TttxTable_1_9_103;
+  new (): TttxTable_1_9_103;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/{tttx-table_1_9_101.js → tttx-table_1_9_103.js}

@@ -3,117 +3,117 @@ import { p as purify, d as domSanitiserOptions } from './domsanitiser.options.js
 import { d as defineCustomElement$3 } from './tttx-button-v2.js';
 import { d as defineCustomElement$2 } from './tttx-icon.js';
 
-const tttxTableCss = ".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:#c2cfd6}100%{background-color:#f0f3f5}}:host{display:block}table{width:100%;border-collapse:collapse;table-layout:fixed;box-sizing:border-box;min-width:600px}thead tr{height:52px}thead tr td{text-align:left;padding-left:8px 16px;min-width:40px}tbody tr{height:52px}tr{border-bottom:1px solid #D4D4D4}.selected{background-color:#ebfbfc}th{text-align:left;padding:8px 0;min-width:40px}td{text-align:left;padding:16px 0;min-width:40px}.cell-spacing a.table-link{color:#000000;text-decoration:none;cursor:pointer}.cell-spacing a.table-link:hover{text-decoration:underline}.skeleton{height:24px;display:block}.header-typography,.cell-typography{font-family:\"Roboto\", sans-serif;font-size:14px;font-style:normal;line-height:normal}.header-typography{font-weight:600}.cell-typography{font-weight:normal;color:#212121}.clickable{cursor:pointer}.pagination-footer{margin-top:12px;padding:8px 4px;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#4c4c4c}.pagination-text{opacity:0.75}.pagination-buttons{display:flex;align-items:center;gap:10px}.pagination-buttons tttx-button-v2_1_9_101{--button-bg:#ffffff;--button-border:#d4d4d4;--button-color:#525252;--button-bg-hover:#f5f5f5;--button-border-hover:#d4d4d4;--button-bg-active:#f5f5f5;--button-border-active:#d4d4d4;--button-focus-outline:none;--button-bg-disabled:#e5e5e5;--button-color-disabled:#737373;--button-border-disabled:#d4d4d4;--button-opacity-disabled:1}.nav-btn{width:32px;height:32px;border-radius:8px;background:#fff;border:1px solid #d5d5d5;cursor:pointer;font-size:14px;line-height:0;display:flex;justify-content:center;align-items:center;transition:background 0.15s ease, border 0.15s ease}.nav-btn:hover:not(:disabled){background:#f0f0f0}.nav-btn:disabled{opacity:0.35;cursor:not-allowed}tbody tr:hover{background-color:#f5f5f5}";
+const tttxTableCss = ".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:#c2cfd6}100%{background-color:#f0f3f5}}:host{display:block}table{width:100%;border-collapse:collapse;table-layout:fixed;box-sizing:border-box;min-width:600px}thead tr{height:52px}thead tr td{text-align:left;padding-left:8px 16px;min-width:40px}tbody tr{height:52px}tr{border-bottom:1px solid #D4D4D4}.selected{background-color:#ebfbfc}th{text-align:left;padding:8px 0;min-width:40px}td{text-align:left;padding:16px 0;min-width:40px}.cell-spacing a.table-link{color:#000000;text-decoration:none;cursor:pointer}.cell-spacing a.table-link:hover{text-decoration:underline}.skeleton{height:24px;display:block}.header-typography,.cell-typography{font-family:\"Roboto\", sans-serif;font-size:14px;font-style:normal;line-height:normal}.header-typography{font-weight:600}.cell-typography{font-weight:normal;color:#212121}.clickable{cursor:pointer}.pagination-footer{margin-top:12px;padding:8px 4px;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#4c4c4c}.pagination-text{opacity:0.75}.pagination-buttons{display:flex;align-items:center;gap:10px}.pagination-buttons tttx-button-v2_1_9_103{--button-bg:#ffffff;--button-border:#d4d4d4;--button-color:#525252;--button-bg-hover:#f5f5f5;--button-border-hover:#d4d4d4;--button-bg-active:#f5f5f5;--button-border-active:#d4d4d4;--button-focus-outline:none;--button-bg-disabled:#e5e5e5;--button-color-disabled:#737373;--button-border-disabled:#d4d4d4;--button-opacity-disabled:1}.nav-btn{width:32px;height:32px;border-radius:8px;background:#fff;border:1px solid #d5d5d5;cursor:pointer;font-size:14px;line-height:0;display:flex;justify-content:center;align-items:center;transition:background 0.15s ease, border 0.15s ease}.nav-btn:hover:not(:disabled){background:#f0f0f0}.nav-btn:disabled{opacity:0.35;cursor:not-allowed}tbody tr:hover{background-color:#f5f5f5}";
 
-const TttxTable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.rowClicked = createEvent(this, "rowClicked", 7);
-    this.headerClicked = createEvent(this, "headerClicked", 7);
-    this.headerOrderChanged = createEvent(this, "headerOrderChanged", 7);
-    this.pageChanged = createEvent(this, "pageChanged", 7);
-    this.headers = [];
-    this.data = [];
-    this.selectable = false;
-    this.loading = false;
-    this.draggableHeaders = false;
-    this.rowsPerPage = 5;
-    this.totalRecords = 0;
-    this.selected = -1;
-    this.page = 0;
-    this.currentPage = 0;
-    this.draggedHeaderIndex = null;
-  }
-  onPagePropChange(newPage) {
-    this.currentPage = newPage;
-  }
-  componentWillLoad() {
-    this.currentPage = this.page;
-  }
-  get totalPages() {
-    return Math.ceil(this.totalRecords / this.rowsPerPage);
-  }
-  changePage(nextPage) {
-    if (nextPage < 0 || nextPage >= this.totalPages)
-      return;
-    this.currentPage = nextPage;
-    this.pageChanged.emit({
-      page: nextPage,
-      rowsPerPage: this.rowsPerPage,
-      offset: nextPage * this.rowsPerPage,
-    });
-  }
-  headerClickedHandler(header) {
-    this.headerClicked.emit(header);
-  }
-  handleDragStart(index) {
-    this.draggedHeaderIndex = index;
-  }
-  handleDragOver(event) {
-    event.preventDefault();
-  }
-  handleDrop(index) {
-    if (this.draggedHeaderIndex !== null && this.draggedHeaderIndex !== index) {
-      const newOrder = [...this.headers];
-      const draggedHeader = newOrder[this.draggedHeaderIndex];
-      newOrder.splice(this.draggedHeaderIndex, 1);
-      newOrder.splice(index, 0, draggedHeader);
-      this.headerOrderChanged.emit(newOrder.map((header) => header.key));
-    }
-    this.draggedHeaderIndex = null;
-  }
-  render() {
-    const start = this.totalRecords === 0
-      ? 0
-      : this.currentPage * this.rowsPerPage + 1;
-    const end = Math.min(start + this.data.length - 1, this.totalRecords);
-    const showPagination = this.totalPages > 1;
-    return (h(Host, null, h("div", { style: { width: '100%', overflowX: 'auto' } }, h("table", null, h("thead", null, h("tr", null, this.headers.map((header, index) => (h("th", { class: "header-typography", onClick: () => this.headerClickedHandler(header), innerHTML: purify.sanitize(header.label, domSanitiserOptions), draggable: this.draggableHeaders, onDragStart: () => (this.draggedHeaderIndex = index), onDragOver: (e) => e.preventDefault(), onDrop: () => this.headerOrderChanged.emit(this.headers.map((h) => h.key)) }))))), h("tbody", null, this.loading ? (h("tr", null, h("td", { class: "cell-spacing", colSpan: this.headers.length }, "Loading\u2026"))) : (this.data.map((row) => (h("tr", { onClick: () => this.rowClicked.emit(row) }, this.headers.map((header) => (h("td", { class: "cell-spacing", innerHTML: purify.sanitize(row[header.key], domSanitiserOptions) })))))))))), showPagination && (h("div", { class: "pagination-footer" }, h("div", { class: "pagination-text" }, "Showing ", start, " \u2013 ", end, " of ", this.totalRecords), h("div", { class: "pagination-buttons" }, h("tttx-button-v2_1_9_101", { design: "default", size: "S", iconStart: "keyboard_arrow_left", iconcolor: this.currentPage === 0 ? '#737373' : '#525252', notext: true, disabled: this.currentPage === 0, onClick: () => this.changePage(this.currentPage - 1) }), h("tttx-button-v2_1_9_101", { design: "default", size: "S", iconStart: "keyboard_arrow_right", iconcolor: this.currentPage === this.totalPages - 1 ? '#737373' : '#525252', notext: true, disabled: this.currentPage === this.totalPages - 1, onClick: () => this.changePage(this.currentPage + 1) }))))));
-  }
-  static get watchers() { return {
-    "page": ["onPagePropChange"]
-  }; }
-  static get style() { return tttxTableCss; }
-}, [1, "tttx-table_1_9_101", {
-    "headers": [16],
-    "data": [16],
-    "selectable": [4],
-    "loading": [4],
-    "draggableHeaders": [4, "draggable-headers"],
-    "rowsPerPage": [2, "rows-per-page"],
-    "totalRecords": [2, "total-records"],
-    "selected": [2],
-    "page": [2],
-    "currentPage": [32],
-    "draggedHeaderIndex": [32]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["tttx-table_1_9_101", "tttx-button-v2_1_9_101", "tttx-icon_1_9_101"];
-  components.forEach(tagName => { switch (tagName) {
-    case "tttx-table_1_9_101":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TttxTable);
-      }
-      break;
-    case "tttx-button-v2_1_9_101":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "tttx-icon_1_9_101":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+const TttxTable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.rowClicked = createEvent(this, "rowClicked", 7);
+    this.headerClicked = createEvent(this, "headerClicked", 7);
+    this.headerOrderChanged = createEvent(this, "headerOrderChanged", 7);
+    this.pageChanged = createEvent(this, "pageChanged", 7);
+    this.headers = [];
+    this.data = [];
+    this.selectable = false;
+    this.loading = false;
+    this.draggableHeaders = false;
+    this.rowsPerPage = 5;
+    this.totalRecords = 0;
+    this.selected = -1;
+    this.page = 0;
+    this.currentPage = 0;
+    this.draggedHeaderIndex = null;
+  }
+  onPagePropChange(newPage) {
+    this.currentPage = newPage;
+  }
+  componentWillLoad() {
+    this.currentPage = this.page;
+  }
+  get totalPages() {
+    return Math.ceil(this.totalRecords / this.rowsPerPage);
+  }
+  changePage(nextPage) {
+    if (nextPage < 0 || nextPage >= this.totalPages)
+      return;
+    this.currentPage = nextPage;
+    this.pageChanged.emit({
+      page: nextPage,
+      rowsPerPage: this.rowsPerPage,
+      offset: nextPage * this.rowsPerPage,
+    });
+  }
+  headerClickedHandler(header) {
+    this.headerClicked.emit(header);
+  }
+  handleDragStart(index) {
+    this.draggedHeaderIndex = index;
+  }
+  handleDragOver(event) {
+    event.preventDefault();
+  }
+  handleDrop(index) {
+    if (this.draggedHeaderIndex !== null && this.draggedHeaderIndex !== index) {
+      const newOrder = [...this.headers];
+      const draggedHeader = newOrder[this.draggedHeaderIndex];
+      newOrder.splice(this.draggedHeaderIndex, 1);
+      newOrder.splice(index, 0, draggedHeader);
+      this.headerOrderChanged.emit(newOrder.map((header) => header.key));
+    }
+    this.draggedHeaderIndex = null;
+  }
+  render() {
+    const start = this.totalRecords === 0
+      ? 0
+      : this.currentPage * this.rowsPerPage + 1;
+    const end = Math.min(start + this.data.length - 1, this.totalRecords);
+    const showPagination = this.totalPages > 1;
+    return (h(Host, null, h("div", { style: { width: '100%', overflowX: 'auto' } }, h("table", null, h("thead", null, h("tr", null, this.headers.map((header, index) => (h("th", { class: "header-typography", onClick: () => this.headerClickedHandler(header), innerHTML: purify.sanitize(header.label, domSanitiserOptions), draggable: this.draggableHeaders, onDragStart: () => (this.draggedHeaderIndex = index), onDragOver: (e) => e.preventDefault(), onDrop: () => this.headerOrderChanged.emit(this.headers.map((h) => h.key)) }))))), h("tbody", null, this.loading ? (h("tr", null, h("td", { class: "cell-spacing", colSpan: this.headers.length }, "Loading\u2026"))) : (this.data.map((row) => (h("tr", { onClick: () => this.rowClicked.emit(row) }, this.headers.map((header) => (h("td", { class: "cell-spacing", innerHTML: purify.sanitize(row[header.key], domSanitiserOptions) })))))))))), showPagination && (h("div", { class: "pagination-footer" }, h("div", { class: "pagination-text" }, "Showing ", start, " \u2013 ", end, " of ", this.totalRecords), h("div", { class: "pagination-buttons" }, h("tttx-button-v2_1_9_103", { design: "default", size: "S", iconStart: "keyboard_arrow_left", iconcolor: this.currentPage === 0 ? '#737373' : '#525252', notext: true, disabled: this.currentPage === 0, onClick: () => this.changePage(this.currentPage - 1) }), h("tttx-button-v2_1_9_103", { design: "default", size: "S", iconStart: "keyboard_arrow_right", iconcolor: this.currentPage === this.totalPages - 1 ? '#737373' : '#525252', notext: true, disabled: this.currentPage === this.totalPages - 1, onClick: () => this.changePage(this.currentPage + 1) }))))));
+  }
+  static get watchers() { return {
+    "page": ["onPagePropChange"]
+  }; }
+  static get style() { return tttxTableCss; }
+}, [1, "tttx-table_1_9_103", {
+    "headers": [16],
+    "data": [16],
+    "selectable": [4],
+    "loading": [4],
+    "draggableHeaders": [4, "draggable-headers"],
+    "rowsPerPage": [2, "rows-per-page"],
+    "totalRecords": [2, "total-records"],
+    "selected": [2],
+    "page": [2],
+    "currentPage": [32],
+    "draggedHeaderIndex": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tttx-table_1_9_103", "tttx-button-v2_1_9_103", "tttx-icon_1_9_103"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tttx-table_1_9_103":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TttxTable);
+      }
+      break;
+    case "tttx-button-v2_1_9_103":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "tttx-icon_1_9_103":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
 }
 
-const TttxTable_1_9_101 = TttxTable;
+const TttxTable_1_9_103 = TttxTable;
 const defineCustomElement = defineCustomElement$1;
 
-export { TttxTable_1_9_101, defineCustomElement };
+export { TttxTable_1_9_103, defineCustomElement };

package/dist/components/{tttx-icon_1_9_101.d.ts → tttx-tabs_1_9_103.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface TttxIcon_1_9_101 extends Components.TttxIcon_1_9_101, HTMLElement {}
-export const TttxIcon_1_9_101: {
-  prototype: TttxIcon_1_9_101;
-  new (): TttxIcon_1_9_101;
+interface TttxTabs_1_9_103 extends Components.TttxTabs_1_9_103, HTMLElement {}
+export const TttxTabs_1_9_103: {
+  prototype: TttxTabs_1_9_103;
+  new (): TttxTabs_1_9_103;
 };
 /**
  * Used to define this component and all nested components recursively.