@3t-transform/threeteeui 0.0.11 → 0.0.13

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

@@ -0,0 +1,194 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-63c4d25e.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) {
+    registerInstance(this, hostRef);
+    this.listPaginate = createEvent(this, "listPaginate", 7);
+    this.listSelectedEvent = createEvent(this, "listSelectedEvent", 7);
+    this.listItemClick = 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 h("div", { class: "load-indicator" }, h("tttx-loading-spinner", { size: 'large' }));
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "list-item-container", tabindex: "0" }, !this.loading && this.items.length === 0 ? "No data to display" : undefined), this.loadIndicator()));
+  }
+  get host() { return getElement(this); }
+};
+TttxList.style = tttxListCss;
+
+export { TttxList as tttx_list };

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

@@ -6,9 +6,9 @@ const TttxInput = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.valueChanged = createEvent(this, "valueChanged", 7);
-    this.isfocused = false;
+    this.focusChanged = createEvent(this, "focusChanged", 7);
+    this.blurChanged = createEvent(this, "blurChanged", 7);
     this.label = undefined;
-    this.valid = undefined;
     this.showerrormsg = undefined;
     this.errormsg = undefined;
     this.iconleft = undefined;
@@ -36,11 +36,13 @@ const TttxInput = class {
     this.value = target.value;
     this.valueChanged.emit(target.value);
   }
-  handleFocus() {
-    this.isfocused = true;
+  handleFocus(event) {
+    const target = event.target;
+    this.valueChanged.emit(target.value);
   }
-  handleBlur() {
-    this.isfocused = false;
+  handleBlur(event) {
+    const target = event.target;
+    this.valueChanged.emit(target.value);
   }
   render() {
     const classNames = ['standalone', this.showerrormsg ? 'invalid' : ''].join(' ');
@@ -70,7 +72,7 @@ const TttxInput = class {
         this.type === 'number' ||
         this.type === 'range'
         ? this.min
-        : null, minlength: this.maxlength, name: this.name, pattern: this.type === 'text' ||
+        : null, minlength: this.minlength, name: this.name, pattern: this.type === 'text' ||
         this.type === 'date' ||
         this.type === 'search' ||
         this.type === 'url' ||

package/dist/esm/tttx.js

@@ -14,5 +14,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["tttx-standalone-input",[[2,"tttx-standalone-input",{"label":[1],"valid":[4],"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],"isfocused":[32]}]]],["tttx-button",[[1,"tttx-button",{"fontColor":[1,"font-color"],"buttonStyle":[1,"button-style"]},[[0,"clickEvent","onClicked"]]]]],["tttx-checkbox",[[1,"tttx-checkbox",{"value":[4],"label":[1],"required":[4]}]]],["tttx-form",[[1,"tttx-form",{"formschema":[8],"submitValue":[8,"submit-value"]}]]],["tttx-loading-spinner",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-popover-content",[[1,"tttx-popover-content",{"header":[1],"body":[1],"linkcontext":[1],"linktext":[1]}]]],["tttx-icon",[[1,"tttx-icon",{"icon":[1],"colour":[1]},[[4,"click","handleDocumentClick"]]]]]], options);
+  return bootstrapLazy([["tttx-list",[[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",[[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",[[1,"tttx-button",{"fontColor":[1,"font-color"],"buttonStyle":[1,"button-style"]},[[0,"clickEvent","onClicked"]]]]],["tttx-checkbox",[[1,"tttx-checkbox",{"value":[4],"label":[1],"required":[4]}]]],["tttx-form",[[1,"tttx-form",{"formschema":[8],"submitValue":[8,"submit-value"]}]]],["tttx-popover-content",[[1,"tttx-popover-content",{"header":[1],"body":[1],"linkcontext":[1],"linktext":[1]}]]],["tttx-icon",[[1,"tttx-icon",{"icon":[1],"colour":[1]},[[4,"click","handleDocumentClick"]]]]],["tttx-loading-spinner",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]]], options);
 });

package/dist/tttx/p-25953f82.entry.js

@@ -0,0 +1 @@
+import{r as t,c as i,h as s,H as n}from"./p-bec472d8.js";const e=class{constructor(s){t(this,s),this.valueChanged=i(this,"valueChanged",7),this.focusChanged=i(this,"focusChanged",7),this.blurChanged=i(this,"blurChanged",7),this.label=void 0,this.showerrormsg=void 0,this.errormsg=void 0,this.iconleft=void 0,this.iconright=void 0,this.autocapitalize=void 0,this.autocomplete=void 0,this.autofocus=void 0,this.checked=void 0,this.disabled=void 0,this.max=void 0,this.maxlength=void 0,this.min=void 0,this.minlength=void 0,this.name=void 0,this.pattern=void 0,this.placeholder=void 0,this.readonly=void 0,this.required=void 0,this.step=void 0,this.type="text",this.value=void 0}handleChange(t){const i=t.target;this.value=i.value,this.valueChanged.emit(i.value)}handleFocus(t){this.valueChanged.emit(t.target.value)}handleBlur(t){this.valueChanged.emit(t.target.value)}render(){const t=["standalone",this.showerrormsg?"invalid":""].join(" ");return s(n,null,s("label",{class:"inputBlock"},this.label,this.required?"":s("span",{class:"optional"}," (optional)"),this.iconleft&&s("div",{class:"icon-left"},s("tttx-icon",{icon:this.iconleft,colour:"grey"})),s("input",{class:t,autocapitalize:"url"===this.type||"email"===this.type||"password"===this.type?this.autocapitalize:null,autofocus:this.autofocus,autocomplete:"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.type?this.autocomplete:null,checked:"checkbox"===this.type||"radio"===this.type?this.checked:null,disabled:this.required?null:this.disabled,max:"date"===this.type||"month"===this.type||"week"===this.type||"time"===this.type||"datetime-local"===this.type||"number"===this.type||"range"===this.type?this.max:null,maxlength:this.maxlength,min:"date"===this.type||"month"===this.type||"week"===this.type||"time"===this.type||"datetime-local"===this.type||"number"===this.type||"range"===this.type?this.min:null,minlength:this.minlength,name:this.name,pattern:"text"===this.type||"date"===this.type||"search"===this.type||"url"===this.type||"tel"===this.type||"email"===this.type||"password"===this.type?this.pattern:null,placeholder:"text"===this.type||"tel"===this.type||"email"===this.type||"url"===this.type||"password"===this.type||"search"===this.type?this.placeholder:null,readonly:"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?this.readonly:null,required:"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.type?this.required:null,step:"date"===this.type||"month"===this.type||"week"===this.type||"time"===this.type||"datetime-local"===this.type||"number"===this.type||"range"===this.type?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&&s("div",{class:"icon-right"},s("tttx-icon",{icon:this.iconright,colour:"grey"})),s("span",{class:["errorBubble",this.showerrormsg&&this.errormsg?"visible":""].join(" ")},s("span",{class:"material-symbols-rounded validationicon"},"warning")," ",this.errormsg)))}};e.style='.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}';export{e as tttx_standalone_input}

package/dist/tttx/p-2b6720ac.entry.js

@@ -0,0 +1 @@
+import{r as t,c as i,h as s,H as e,g as o}from"./p-bec472d8.js";const n=class{constructor(s){t(this,s),this.listPaginate=i(this,"listPaginate",7),this.listSelectedEvent=i(this,"listSelectedEvent",7),this.listItemClick=i(this,"listItemClick",7),this.rowCount=0,this.name=void 0,this.selectable=void 0,this.items=[],this.selectedIds=[],this.loading=!0,this.lastPage=!1}listLoadHandler(t){t.detail.name===this.name&&(this.items=[...this.items,...t.detail.items],this.loading=!1,this.lastPage=t.detail.lastPage,this.renderRows(t.detail.items),this.scrollableParent.clientHeight===this.scrollableParent.scrollHeight&&this.listPaginateHandler())}listPaginateHandler(){this.lastPage||this.loading||(this.loading=!0,this.listPaginate.emit({name:this.name}))}listClearDataCacheHandler(t){t.detail.name===this.name&&(this.items=[],this.selectedIds=[],this.listItemContainer().querySelectorAll(".tttx-list__row").forEach((t=>{t.remove()})),this.rowCount=0,this.lastPage=!1,this.loading=!1)}listActionSelectedEventHandler(t){if(t.detail.name!==this.name||!this.selectable||0===this.selectedIds.length)return;const i=this.selectedIds.map((t=>this.items[t]));t.detail.removeRows&&this.removeSelectedRows(),this.listSelectedEvent.emit({name:this.name,eventName:t.detail.eventName,selectedRows:i})}removeSelectedRows(){[...this.selectedIds].sort(((t,i)=>i-t)).forEach((t=>{this.items.splice(t,1),this.listItemContainer().removeChild(this.listItemContainer().querySelector(`[data-row-id="${t}"]`)),this.scrollableParent.clientHeight===this.scrollableParent.scrollHeight&&this.listPaginateHandler()})),this.selectedIds.splice(0,this.selectedIds.length)}listItemClickHandler(t){0===this.selectedIds.length&&this.listItemClick.emit({itemData:t,name:this.name})}componentWillLoad(){this.template=this.host.querySelector("template"),this.scrollableParent=this.getScrollableParent(this.host),(this.scrollableParent===document.scrollingElement?document:this.scrollableParent).addEventListener("scroll",this.scrollHandler.bind(this)),window.addEventListener("resize",this.scrollHandler.bind(this))}componentDidLoad(){this.listPaginate.emit({name:this.name})}listItemContainer(){return this.host.shadowRoot.querySelector(".list-item-container")}async scrollHandler(){const{clientHeight:t,scrollTop:i,scrollHeight:s}=this.scrollableParent;Math.abs(s-t-i)<26&&this.listPaginateHandler()}isScrollable(t){return["scroll","auto"].includes(t.style.overflowY)}getScrollableParent(t){return t&&t!==document.body?this.isScrollable(t)?t:this.getScrollableParent(t.parentElement):document.scrollingElement}appendRowCheckbox(t){if(!this.selectable)return;const i=this.rowCount,s=document.createElement("input");s.setAttribute("type","checkbox"),s.addEventListener("click",(s=>{s.stopPropagation(),s.target.checked?(this.selectedIds=[...this.selectedIds,i],t.classList.add("selected")):(this.selectedIds=this.selectedIds.filter((t=>t!==i)),t.classList.remove("selected"))})),t.setAttribute("data-row-id",`${i}`),this.rowCount++,t.appendChild(s)}appendSeededTemplate(t,i){this.template.childNodes.forEach((s=>{const e=s.cloneNode(!1);if(e.getAttribute("data-fields")){const i=e.getAttribute("data-fields").replace(/\s/g,"").split(","),s=Object.fromEntries(i.map((i=>[i,t[i]])));e.setAttribute("row-data",JSON.stringify(s))}else e.setAttribute("row-data",JSON.stringify(t));i.appendChild(e)}))}appendGenericTemplate(t,i){const s=document.createElement("div");if(s.classList.add("generic-template__content"),s.textContent=t.text,i.appendChild(s),!t.icon)return;const e=document.createElement("span");e.classList.add("material-symbols-rounded"),e.textContent=t.icon,t.iconColor&&(e.style.color=t.iconColor),s.prepend(e)}row(t){const i=document.createElement("div");return i.classList.add("tttx-list__row"),i.addEventListener("click",(()=>{this.listItemClickHandler(t)})),this.appendRowCheckbox(i),this.template?this.appendSeededTemplate(t,i):this.appendGenericTemplate(t,i),i}renderRows(t){t.forEach((t=>{this.listItemContainer().appendChild(this.row(t))}))}loadIndicator(){if(this.loading)return s("div",{class:"load-indicator"},s("tttx-loading-spinner",{size:"large"}))}render(){return s(e,null,s("div",{class:"list-item-container",tabindex:"0"},this.loading||0!==this.items.length?void 0:"No data to display"),this.loadIndicator())}get host(){return o(this)}};n.style='.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}';export{n as tttx_list}

package/dist/tttx/tttx.esm.js

@@ -1 +1 @@
-import{p as t,b as e}from"./p-bec472d8.js";export{s as setNonce}from"./p-bec472d8.js";(()=>{const e=import.meta.url,o={};return""!==e&&(o.resourcesUrl=new URL(".",e).href),t(o)})().then((t=>e([["p-338b3976",[[2,"tttx-standalone-input",{label:[1],valid:[4],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],isfocused:[32]}]]],["p-1a4eb1f3",[[1,"tttx-button",{fontColor:[1,"font-color"],buttonStyle:[1,"button-style"]},[[0,"clickEvent","onClicked"]]]]],["p-2d54f8aa",[[1,"tttx-checkbox",{value:[4],label:[1],required:[4]}]]],["p-95a29e09",[[1,"tttx-form",{formschema:[8],submitValue:[8,"submit-value"]}]]],["p-4c57bcbd",[[1,"tttx-loading-spinner",{loadingMessage:[1028,"loading-message"],size:[1025]}]]],["p-ad0c3fe4",[[1,"tttx-popover-content",{header:[1],body:[1],linkcontext:[1],linktext:[1]}]]],["p-709246f5",[[1,"tttx-icon",{icon:[1],colour:[1]},[[4,"click","handleDocumentClick"]]]]]],t)));
+import{p as e,b as t}from"./p-bec472d8.js";export{s as setNonce}from"./p-bec472d8.js";(()=>{const t=import.meta.url,a={};return""!==t&&(a.resourcesUrl=new URL(".",t).href),e(a)})().then((e=>t([["p-2b6720ac",[[1,"tttx-list",{name:[1],selectable:[4],items:[32],selectedIds:[32],loading:[32],lastPage:[32]},[[4,"listPageLoad","listLoadHandler"],[4,"listClearDataCache","listClearDataCacheHandler"],[4,"listActionSelectedEvent","listActionSelectedEventHandler"]]]]],["p-25953f82",[[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]}]]],["p-1a4eb1f3",[[1,"tttx-button",{fontColor:[1,"font-color"],buttonStyle:[1,"button-style"]},[[0,"clickEvent","onClicked"]]]]],["p-2d54f8aa",[[1,"tttx-checkbox",{value:[4],label:[1],required:[4]}]]],["p-95a29e09",[[1,"tttx-form",{formschema:[8],submitValue:[8,"submit-value"]}]]],["p-ad0c3fe4",[[1,"tttx-popover-content",{header:[1],body:[1],linkcontext:[1],linktext:[1]}]]],["p-709246f5",[[1,"tttx-icon",{icon:[1],colour:[1]},[[4,"click","handleDocumentClick"]]]]],["p-4c57bcbd",[[1,"tttx-loading-spinner",{loadingMessage:[1028,"loading-message"],size:[1025]}]]]],e)));

package/dist/types/components/molecules/tttx-list/tttx-list.d.ts

@@ -0,0 +1,51 @@
+import { EventEmitter } from "../../../stencil-public-runtime";
+interface LoadEventOptions {
+  name: string;
+  items: object[];
+  lastPage: boolean;
+}
+interface ActionSelectedEventOptions {
+  name: string;
+  eventName: string;
+  removeRows: boolean;
+}
+interface GenericTemplateData {
+  text: string;
+  icon?: string;
+  iconColor?: string;
+}
+export declare class TttxList {
+  host: HTMLElement;
+  name: string;
+  selectable: boolean;
+  items: object[];
+  selectedIds: number[];
+  loading: boolean;
+  lastPage: boolean;
+  private template;
+  private scrollableParent;
+  private rowCount;
+  listLoadHandler(event: CustomEvent<LoadEventOptions>): void;
+  listPaginate: EventEmitter;
+  listPaginateHandler(): void;
+  listClearDataCacheHandler(event: CustomEvent): void;
+  listActionSelectedEventHandler(event: CustomEvent<ActionSelectedEventOptions>): void;
+  listSelectedEvent: EventEmitter;
+  removeSelectedRows(): void;
+  listItemClick: EventEmitter;
+  listItemClickHandler(itemData: object): void;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  listItemContainer(): Element;
+  scrollHandler(): Promise<void>;
+  isScrollable(node: HTMLElement): boolean;
+  getScrollableParent(node: HTMLElement): any;
+  appendRowCheckbox(rowContainer: HTMLElement): void;
+  appendSeededTemplate(rowData: object, rowContainer: HTMLElement): void;
+  appendGenericTemplate(rowData: GenericTemplateData, rowContainer: HTMLElement): void;
+  row(rowData: object): HTMLDivElement;
+  renderRows(batchData: object[]): void;
+  loadIndicator(): any;
+  render(): any;
+}
+export {};

package/dist/types/components/molecules/tttx-list/tttx-list.stories.d.ts

@@ -0,0 +1,13 @@
+declare const _default: {
+  title: string;
+  component: string;
+  argTypes: {
+    selectable: {
+      control: {
+        type: string;
+      };
+    };
+  };
+};
+export default _default;
+export declare const ListWithGenericTemplate: (args: any) => string;

package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.d.ts

@@ -6,9 +6,7 @@ export type TimeSyntax = `${number}${number}:${number}${number}`;
 export type DateTimeLocalSyntax = `${number}${number}${number}${number}-${number}${number}-${number}${number}T${number}${number}:${number}${number}`;
 export type MinMaxDates = DateSyntax | MonthSyntax | WeekSyntax | TimeSyntax | DateTimeLocalSyntax;
 export declare class TttxInput {
-  isfocused: boolean;
   label: string;
-  valid: boolean;
   showerrormsg: boolean;
   errormsg: string;
   iconleft: string;
@@ -32,7 +30,9 @@ export declare class TttxInput {
   value: string | number;
   valueChanged: EventEmitter<string>;
   handleChange(event: Event | InputEvent): void;
-  handleFocus(): void;
-  handleBlur(): void;
+  focusChanged: EventEmitter<string>;
+  handleFocus(event: Event | InputEvent): void;
+  blurChanged: EventEmitter<string>;
+  handleBlur(event: Event | InputEvent): void;
   render(): any;
 }

package/dist/types/components.d.ts

@@ -24,6 +24,10 @@ export namespace Components {
         "colour": string;
         "icon": string;
     }
+    interface TttxList {
+        "name": string;
+        "selectable": boolean;
+    }
     interface TttxLoadingSpinner {
         "loadingMessage": boolean;
         "size": 'small' | 'large';
@@ -56,7 +60,6 @@ export namespace Components {
         "showerrormsg": boolean;
         "step": string | number;
         "type": string;
-        "valid": boolean;
         "value": string | number;
     }
 }
@@ -72,6 +75,10 @@ export interface TttxFormCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLTttxFormElement;
 }
+export interface TttxListCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLTttxListElement;
+}
 export interface TttxStandaloneInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLTttxStandaloneInputElement;
@@ -101,6 +108,12 @@ declare global {
         prototype: HTMLTttxIconElement;
         new (): HTMLTttxIconElement;
     };
+    interface HTMLTttxListElement extends Components.TttxList, HTMLStencilElement {
+    }
+    var HTMLTttxListElement: {
+        prototype: HTMLTttxListElement;
+        new (): HTMLTttxListElement;
+    };
     interface HTMLTttxLoadingSpinnerElement extends Components.TttxLoadingSpinner, HTMLStencilElement {
     }
     var HTMLTttxLoadingSpinnerElement: {
@@ -124,6 +137,7 @@ declare global {
         "tttx-checkbox": HTMLTttxCheckboxElement;
         "tttx-form": HTMLTttxFormElement;
         "tttx-icon": HTMLTttxIconElement;
+        "tttx-list": HTMLTttxListElement;
         "tttx-loading-spinner": HTMLTttxLoadingSpinnerElement;
         "tttx-popover-content": HTMLTttxPopoverContentElement;
         "tttx-standalone-input": HTMLTttxStandaloneInputElement;
@@ -150,6 +164,13 @@ declare namespace LocalJSX {
         "colour"?: string;
         "icon"?: string;
     }
+    interface TttxList {
+        "name"?: string;
+        "onListItemClick"?: (event: TttxListCustomEvent<any>) => void;
+        "onListPaginate"?: (event: TttxListCustomEvent<any>) => void;
+        "onListSelectedEvent"?: (event: TttxListCustomEvent<any>) => void;
+        "selectable"?: boolean;
+    }
     interface TttxLoadingSpinner {
         "loadingMessage"?: boolean;
         "size"?: 'small' | 'large';
@@ -175,6 +196,8 @@ declare namespace LocalJSX {
         "min"?: MinMaxDates | number;
         "minlength"?: string | number;
         "name"?: string;
+        "onBlurChanged"?: (event: TttxStandaloneInputCustomEvent<string>) => void;
+        "onFocusChanged"?: (event: TttxStandaloneInputCustomEvent<string>) => void;
         "onValueChanged"?: (event: TttxStandaloneInputCustomEvent<string>) => void;
         "pattern"?: string;
         "placeholder"?: string;
@@ -183,7 +206,6 @@ declare namespace LocalJSX {
         "showerrormsg"?: boolean;
         "step"?: string | number;
         "type"?: string;
-        "valid"?: boolean;
         "value"?: string | number;
     }
     interface IntrinsicElements {
@@ -191,6 +213,7 @@ declare namespace LocalJSX {
         "tttx-checkbox": TttxCheckbox;
         "tttx-form": TttxForm;
         "tttx-icon": TttxIcon;
+        "tttx-list": TttxList;
         "tttx-loading-spinner": TttxLoadingSpinner;
         "tttx-popover-content": TttxPopoverContent;
         "tttx-standalone-input": TttxStandaloneInput;
@@ -204,6 +227,7 @@ declare module "@stencil/core" {
             "tttx-checkbox": LocalJSX.TttxCheckbox & JSXBase.HTMLAttributes<HTMLTttxCheckboxElement>;
             "tttx-form": LocalJSX.TttxForm & JSXBase.HTMLAttributes<HTMLTttxFormElement>;
             "tttx-icon": LocalJSX.TttxIcon & JSXBase.HTMLAttributes<HTMLTttxIconElement>;
+            "tttx-list": LocalJSX.TttxList & JSXBase.HTMLAttributes<HTMLTttxListElement>;
             "tttx-loading-spinner": LocalJSX.TttxLoadingSpinner & JSXBase.HTMLAttributes<HTMLTttxLoadingSpinnerElement>;
             "tttx-popover-content": LocalJSX.TttxPopoverContent & JSXBase.HTMLAttributes<HTMLTttxPopoverContentElement>;
             "tttx-standalone-input": LocalJSX.TttxStandaloneInput & JSXBase.HTMLAttributes<HTMLTttxStandaloneInputElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@3t-transform/threeteeui",
-    "version": "0.0.11",
+    "version": "0.0.13",
     "description": "3t Design System",
     "main": "dist/index.cjs.js",
     "module": "dist/index.js",

package/dist/tttx/p-338b3976.entry.js

@@ -1 +0,0 @@
-import{r as t,c as i,h as s,H as n}from"./p-bec472d8.js";const e=class{constructor(s){t(this,s),this.valueChanged=i(this,"valueChanged",7),this.isfocused=!1,this.label=void 0,this.valid=void 0,this.showerrormsg=void 0,this.errormsg=void 0,this.iconleft=void 0,this.iconright=void 0,this.autocapitalize=void 0,this.autocomplete=void 0,this.autofocus=void 0,this.checked=void 0,this.disabled=void 0,this.max=void 0,this.maxlength=void 0,this.min=void 0,this.minlength=void 0,this.name=void 0,this.pattern=void 0,this.placeholder=void 0,this.readonly=void 0,this.required=void 0,this.step=void 0,this.type="text",this.value=void 0}handleChange(t){const i=t.target;this.value=i.value,this.valueChanged.emit(i.value)}handleFocus(){this.isfocused=!0}handleBlur(){this.isfocused=!1}render(){const t=["standalone",this.showerrormsg?"invalid":""].join(" ");return s(n,null,s("label",{class:"inputBlock"},this.label,this.required?"":s("span",{class:"optional"}," (optional)"),this.iconleft&&s("div",{class:"icon-left"},s("tttx-icon",{icon:this.iconleft,colour:"grey"})),s("input",{class:t,autocapitalize:"url"===this.type||"email"===this.type||"password"===this.type?this.autocapitalize:null,autofocus:this.autofocus,autocomplete:"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.type?this.autocomplete:null,checked:"checkbox"===this.type||"radio"===this.type?this.checked:null,disabled:this.required?null:this.disabled,max:"date"===this.type||"month"===this.type||"week"===this.type||"time"===this.type||"datetime-local"===this.type||"number"===this.type||"range"===this.type?this.max:null,maxlength:this.maxlength,min:"date"===this.type||"month"===this.type||"week"===this.type||"time"===this.type||"datetime-local"===this.type||"number"===this.type||"range"===this.type?this.min:null,minlength:this.maxlength,name:this.name,pattern:"text"===this.type||"date"===this.type||"search"===this.type||"url"===this.type||"tel"===this.type||"email"===this.type||"password"===this.type?this.pattern:null,placeholder:"text"===this.type||"tel"===this.type||"email"===this.type||"url"===this.type||"password"===this.type||"search"===this.type?this.placeholder:null,readonly:"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?this.readonly:null,required:"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.type?this.required:null,step:"date"===this.type||"month"===this.type||"week"===this.type||"time"===this.type||"datetime-local"===this.type||"number"===this.type||"range"===this.type?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&&s("div",{class:"icon-right"},s("tttx-icon",{icon:this.iconright,colour:"grey"})),s("span",{class:["errorBubble",this.showerrormsg&&this.errormsg?"visible":""].join(" ")},s("span",{class:"material-symbols-rounded validationicon"},"warning")," ",this.errormsg)))}};e.style='.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}';export{e as tttx_standalone_input}