@3t-transform/threeteeui 0.1.43 → 0.1.45

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

@@ -1,17 +1,17 @@
-import { r as registerInstance, h, H as Host } from './index-d784fb3e.js';
+import { r as registerInstance, h, H as Host } from './index-a848bfb4.js';
 
 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 = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.icon = undefined;
-    this.color = 'grey';
-  }
-  render() {
-    return (h(Host, null, h("span", { class: `material-symbols-rounded ${this.color ? this.color : ''}` }, this.icon)));
-  }
-};
+const TttxIcon = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.icon = undefined;
+    this.color = 'grey';
+  }
+  render() {
+    return (h(Host, null, h("span", { class: `material-symbols-rounded ${this.color ? this.color : ''}` }, this.icon)));
+  }
+};
 TttxIcon.style = tttxIconCss;
 
 export { TttxIcon as tttx_icon };

package/dist/esm/tttx-keyvalue-block.entry.js

@@ -1,65 +1,65 @@
-import { r as registerInstance, h, H as Host } from './index-d784fb3e.js';
+import { r as registerInstance, h, H as Host } from './index-a848bfb4.js';
 
 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 = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    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)));
-  }
-};
+const TttxKeyvalueBlock = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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)));
+  }
+};
 TttxKeyvalueBlock.style = tttxKeyvalueBlockCss;
 
 export { TttxKeyvalueBlock as tttx_keyvalue_block };

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

@@ -1,38 +1,39 @@
-import { r as registerInstance, c as createEvent, h } from './index-d784fb3e.js';
-import { p as purify, d as domSanitiserOptions } from './domsanitiser.options-3c7ded83.js';
+import { r as registerInstance, c as createEvent, h } from './index-a848bfb4.js';
+import { p as purify, d as domSanitiserOptions } from './domsanitiser.options-81611f82.js';
+import './_commonjsHelpers-9943807e.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 = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    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)));
-  }
-};
+const TttxList = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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)));
+  }
+};
 TttxList.style = tttxListCss;
 
 export { TttxList as tttx_list };

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

@@ -1,22 +1,22 @@
-import { r as registerInstance, h } from './index-d784fb3e.js';
+import { r as registerInstance, h } from './index-a848bfb4.js';
 
 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 = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    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()));
-  }
-};
+const TttxLoadingSpinner = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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()));
+  }
+};
 TttxLoadingSpinner.style = tttxLoadingSpinnerCss;
 
 export { TttxLoadingSpinner as tttx_loading_spinner };

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

@@ -0,0 +1,33 @@
+import { r as registerInstance, h } from './index-a848bfb4.js';
+import { c as createCommonjsModule } from './_commonjsHelpers-9943807e.js';
+
+var qrcode_min = createCommonjsModule(function (module, exports) {
+!function(t,e){module.exports=e();}(window,(function(){return function(t){var e={};function r(o){if(e[o])return e[o].exports;var n=e[o]={i:o,l:!1,exports:{}};return t[o].call(n.exports,n,n.exports,r),n.l=!0,n.exports}return r.m=t,r.c=e,r.d=function(t,e,o){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o});},r.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0});},r.t=function(t,e){if(1&e&&(t=r(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(r.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var n in t)r.d(o,n,function(e){return t[e]}.bind(null,n));return o},r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="",r(r.s=3)}([function(t,e,r){Object.defineProperty(e,"__esModule",{value:!0}),e.QRMode={MODE_NUMBER:1,MODE_ALPHA_NUM:2,MODE_8BIT_BYTE:4,MODE_KANJI:8},e.QRErrorCorrectLevel={L:1,M:0,Q:3,H:2},e.QRMaskPattern={PATTERN000:0,PATTERN001:1,PATTERN010:2,PATTERN011:3,PATTERN100:4,PATTERN101:5,PATTERN110:6,PATTERN111:7};},function(t,e,r){Object.defineProperty(e,"__esModule",{value:!0}),e.QRMath={glog:function(t){if(t<1)throw new Error("glog("+t+")");return e.QRMath.LOG_TABLE[t]},gexp:function(t){for(;t<0;)t+=255;for(;t>=256;)t-=255;return e.QRMath.EXP_TABLE[t]},EXP_TABLE:new Array(256),LOG_TABLE:new Array(256)};for(var o=0;o<8;o++)e.QRMath.EXP_TABLE[o]=1<<o;for(o=8;o<256;o++)e.QRMath.EXP_TABLE[o]=e.QRMath.EXP_TABLE[o-4]^e.QRMath.EXP_TABLE[o-5]^e.QRMath.EXP_TABLE[o-6]^e.QRMath.EXP_TABLE[o-8];for(o=0;o<255;o++)e.QRMath.LOG_TABLE[e.QRMath.EXP_TABLE[o]]=o;},function(t,e,r){Object.defineProperty(e,"__esModule",{value:!0});var o=r(1),n=function(){function t(t,e){if(null==t.length)throw new Error(t.length+"/"+e);for(var r=0;r<t.length&&0===t[r];)r++;this.num=new Array(t.length-r+e);for(var o=0;o<t.length-r;o++)this.num[o]=t[o+r];}return t.prototype.get=function(t){return this.num[t]},t.prototype.getLength=function(){return this.num.length},t.prototype.multiply=function(e){for(var r=new Array(this.getLength()+e.getLength()-1),n=0;n<this.getLength();n++)for(var i=0;i<e.getLength();i++)r[n+i]^=o.QRMath.gexp(o.QRMath.glog(this.get(n))+o.QRMath.glog(e.get(i)));return new t(r,0)},t.prototype.mod=function(e){if(this.getLength()-e.getLength()<0)return this;for(var r=o.QRMath.glog(this.get(0))-o.QRMath.glog(e.get(0)),n=new Array(this.getLength()),i=0;i<this.getLength();i++)n[i]=this.get(i);for(i=0;i<e.getLength();i++)n[i]^=o.QRMath.gexp(o.QRMath.glog(e.get(i))+r);return new t(n,0).mod(e)},t}();e.default=n;},function(t,e,r){Object.defineProperty(e,"__esModule",{value:!0});var o=r(4),n=r(5),i=r(6),u=r(7),a=r(2),s=r(0),l=r(0);e.QRErrorCorrectLevel=l.QRErrorCorrectLevel;var h=function(){function t(t,e){this.typeNumber=t,this.errorCorrectLevel=e,this.modules=null,this.moduleCount=0,this.dataCache=null,this.dataList=[];}return t.prototype.addData=function(t){var e=new n.default(t);this.dataList.push(e),this.dataCache=null;},t.prototype.isDark=function(t,e){if(t<0||this.moduleCount<=t||e<0||this.moduleCount<=e)throw new Error(t+","+e);return this.modules[t][e]},t.prototype.getModuleCount=function(){return this.moduleCount},t.prototype.make=function(){if(this.typeNumber<1){var t=void 0;for(t=1;t<40;t++){for(var e=u.default.getRSBlocks(t,this.errorCorrectLevel),r=new i.default,n=0,a=0;a<e.length;a++)n+=e[a].dataCount;for(a=0;a<this.dataList.length;a++){var s=this.dataList[a];r.put(s.mode,4),r.put(s.getLength(),o.QRUtil.getLengthInBits(s.mode,t)),s.write(r);}if(r.getLengthInBits()<=8*n)break}this.typeNumber=t;}this.makeImpl(!1,this.getBestMaskPattern());},t.prototype.makeImpl=function(e,r){this.moduleCount=4*this.typeNumber+17,this.modules=new Array(this.moduleCount);for(var o=0;o<this.moduleCount;o++){this.modules[o]=new Array(this.moduleCount);for(var n=0;n<this.moduleCount;n++)this.modules[o][n]=null;}this.setupPositionProbePattern(0,0),this.setupPositionProbePattern(this.moduleCount-7,0),this.setupPositionProbePattern(0,this.moduleCount-7),this.setupPositionAdjustPattern(),this.setupTimingPattern(),this.setupTypeInfo(e,r),this.typeNumber>=7&&this.setupTypeNumber(e),null==this.dataCache&&(this.dataCache=t.createData(this.typeNumber,this.errorCorrectLevel,this.dataList)),this.mapData(this.dataCache,r);},t.prototype.setupPositionProbePattern=function(t,e){for(var r=-1;r<=7;r++)if(!(t+r<=-1||this.moduleCount<=t+r))for(var o=-1;o<=7;o++)e+o<=-1||this.moduleCount<=e+o||(this.modules[t+r][e+o]=r>=0&&r<=6&&(0===o||6===o)||o>=0&&o<=6&&(0===r||6===r)||r>=2&&r<=4&&o>=2&&o<=4);},t.prototype.getBestMaskPattern=function(){for(var t=0,e=0,r=0;r<8;r++){this.makeImpl(!0,r);var n=o.QRUtil.getLostPoint(this);(0===r||t>n)&&(t=n,e=r);}return e},t.prototype.createMovieClip=function(t,e,r){var o=t.createEmptyMovieClip(e,r);this.make();for(var n=0;n<this.modules.length;n++)for(var i=1*n,u=0;u<this.modules[n].length;u++){var a=1*u;this.modules[n][u]&&(o.beginFill(0,100),o.moveTo(a,i),o.lineTo(a+1,i),o.lineTo(a+1,i+1),o.lineTo(a,i+1),o.endFill());}return o},t.prototype.setupTimingPattern=function(){for(var t=8;t<this.moduleCount-8;t++)null==this.modules[t][6]&&(this.modules[t][6]=t%2==0);for(var e=8;e<this.moduleCount-8;e++)null==this.modules[6][e]&&(this.modules[6][e]=e%2==0);},t.prototype.setupPositionAdjustPattern=function(){for(var t=o.QRUtil.getPatternPosition(this.typeNumber),e=0;e<t.length;e++)for(var r=0;r<t.length;r++){var n=t[e],i=t[r];if(null==this.modules[n][i])for(var u=-2;u<=2;u++)for(var a=-2;a<=2;a++)this.modules[n+u][i+a]=-2===u||2===u||-2===a||2===a||0===u&&0===a;}},t.prototype.setupTypeNumber=function(t){for(var e=o.QRUtil.getBCHTypeNumber(this.typeNumber),r=0;r<18;r++){var n=!t&&1==(e>>r&1);this.modules[Math.floor(r/3)][r%3+this.moduleCount-8-3]=n;}for(r=0;r<18;r++){n=!t&&1==(e>>r&1);this.modules[r%3+this.moduleCount-8-3][Math.floor(r/3)]=n;}},t.prototype.setupTypeInfo=function(t,e){for(var r=this.errorCorrectLevel<<3|e,n=o.QRUtil.getBCHTypeInfo(r),i=0;i<15;i++){var u=!t&&1==(n>>i&1);i<6?this.modules[i][8]=u:i<8?this.modules[i+1][8]=u:this.modules[this.moduleCount-15+i][8]=u;}for(i=0;i<15;i++){u=!t&&1==(n>>i&1);i<8?this.modules[8][this.moduleCount-i-1]=u:i<9?this.modules[8][15-i-1+1]=u:this.modules[8][15-i-1]=u;}this.modules[this.moduleCount-8][8]=!t;},t.prototype.mapData=function(t,e){for(var r=-1,n=this.moduleCount-1,i=7,u=0,a=this.moduleCount-1;a>0;a-=2)for(6===a&&a--;;){for(var s=0;s<2;s++)if(null==this.modules[n][a-s]){var l=!1;u<t.length&&(l=1==(t[u]>>>i&1)),o.QRUtil.getMask(e,n,a-s)&&(l=!l),this.modules[n][a-s]=l,-1===--i&&(u++,i=7);}if((n+=r)<0||this.moduleCount<=n){n-=r,r=-r;break}}},t.createData=function(e,r,n){for(var a=u.default.getRSBlocks(e,r),s=new i.default,l=0;l<n.length;l++){var h=n[l];s.put(h.mode,4),s.put(h.getLength(),o.QRUtil.getLengthInBits(h.mode,e)),h.write(s);}var f=0;for(l=0;l<a.length;l++)f+=a[l].dataCount;if(s.getLengthInBits()>8*f)throw new Error("code length overflow. ("+s.getLengthInBits()+">"+8*f+")");for(s.getLengthInBits()+4<=8*f&&s.put(0,4);s.getLengthInBits()%8!=0;)s.putBit(!1);for(;!(s.getLengthInBits()>=8*f||(s.put(t.PAD0,8),s.getLengthInBits()>=8*f));)s.put(t.PAD1,8);return t.createBytes(s,a)},t.createBytes=function(t,e){for(var r=0,n=0,i=0,u=new Array(e.length),s=new Array(e.length),l=0;l<e.length;l++){var h=e[l].dataCount,f=e[l].totalCount-h;n=Math.max(n,h),i=Math.max(i,f),u[l]=new Array(h);for(var d=0;d<u[l].length;d++)u[l][d]=255&t.buffer[d+r];r+=h;var g=o.QRUtil.getErrorCorrectPolynomial(f),c=new a.default(u[l],g.getLength()-1).mod(g);s[l]=new Array(g.getLength()-1);for(d=0;d<s[l].length;d++){var p=d+c.getLength()-s[l].length;s[l][d]=p>=0?c.get(p):0;}}var v=0;for(d=0;d<e.length;d++)v+=e[d].totalCount;var m=new Array(v),M=0;for(d=0;d<n;d++)for(l=0;l<e.length;l++)d<u[l].length&&(m[M++]=u[l][d]);for(d=0;d<i;d++)for(l=0;l<e.length;l++)d<s[l].length&&(m[M++]=s[l][d]);return m},t.createCanvas=function(e){var r=Object.assign({width:256,height:256,correctLevel:s.QRErrorCorrectLevel.H,background:"#ffffff",foreground:"#000000"},e),o=new t(-1,r.correctLevel);o.addData(r.text),o.make();var n=document.createElement("canvas");n.width=r.width,n.height=r.height;for(var i=n.getContext("2d"),u=r.width/o.getModuleCount(),a=r.height/o.getModuleCount(),l=0;l<o.getModuleCount();l++)for(var h=0;h<o.getModuleCount();h++){i.fillStyle=o.isDark(l,h)?r.foreground:r.background;var f=Math.ceil((h+1)*u)-Math.floor(h*u),d=Math.ceil((l+1)*a)-Math.floor(l*a);i.fillRect(Math.round(h*u),Math.round(l*a),f,d);}return n},t.setCanvas=function(e,r){var o=document.getElementById(e);o.innerHTML="",o.appendChild(t.createCanvas(r));},t.PAD0=236,t.PAD1=17,t}();e.QRCode=h;},function(t,e,r){Object.defineProperty(e,"__esModule",{value:!0});var o=r(0),n=r(1),i=r(2);e.QRUtil={PATTERN_POSITION_TABLE:[[],[6,18],[6,22],[6,26],[6,30],[6,34],[6,22,38],[6,24,42],[6,26,46],[6,28,50],[6,30,54],[6,32,58],[6,34,62],[6,26,46,66],[6,26,48,70],[6,26,50,74],[6,30,54,78],[6,30,56,82],[6,30,58,86],[6,34,62,90],[6,28,50,72,94],[6,26,50,74,98],[6,30,54,78,102],[6,28,54,80,106],[6,32,58,84,110],[6,30,58,86,114],[6,34,62,90,118],[6,26,50,74,98,122],[6,30,54,78,102,126],[6,26,52,78,104,130],[6,30,56,82,108,134],[6,34,60,86,112,138],[6,30,58,86,114,142],[6,34,62,90,118,146],[6,30,54,78,102,126,150],[6,24,50,76,102,128,154],[6,28,54,80,106,132,158],[6,32,58,84,110,136,162],[6,26,54,82,110,138,166],[6,30,58,86,114,142,170]],G15:1335,G18:7973,G15_MASK:21522,getBCHTypeInfo:function(t){for(var r=t<<10;e.QRUtil.getBCHDigit(r)-e.QRUtil.getBCHDigit(e.QRUtil.G15)>=0;)r^=e.QRUtil.G15<<e.QRUtil.getBCHDigit(r)-e.QRUtil.getBCHDigit(e.QRUtil.G15);return (t<<10|r)^e.QRUtil.G15_MASK},getBCHTypeNumber:function(t){for(var r=t<<12;e.QRUtil.getBCHDigit(r)-e.QRUtil.getBCHDigit(e.QRUtil.G18)>=0;)r^=e.QRUtil.G18<<e.QRUtil.getBCHDigit(r)-e.QRUtil.getBCHDigit(e.QRUtil.G18);return t<<12|r},getBCHDigit:function(t){for(var e=0;0!==t;)e++,t>>>=1;return e},getPatternPosition:function(t){return e.QRUtil.PATTERN_POSITION_TABLE[t-1]},getMask:function(t,e,r){switch(t){case o.QRMaskPattern.PATTERN000:return (e+r)%2==0;case o.QRMaskPattern.PATTERN001:return e%2==0;case o.QRMaskPattern.PATTERN010:return r%3==0;case o.QRMaskPattern.PATTERN011:return (e+r)%3==0;case o.QRMaskPattern.PATTERN100:return (Math.floor(e/2)+Math.floor(r/3))%2==0;case o.QRMaskPattern.PATTERN101:return e*r%2+e*r%3==0;case o.QRMaskPattern.PATTERN110:return (e*r%2+e*r%3)%2==0;case o.QRMaskPattern.PATTERN111:return (e*r%3+(e+r)%2)%2==0;default:throw new Error("bad maskPattern:"+t)}},getErrorCorrectPolynomial:function(t){for(var e=new i.default([1],0),r=0;r<t;r++)e=e.multiply(new i.default([1,n.QRMath.gexp(r)],0));return e},getLengthInBits:function(t,e){if(e>=1&&e<10)switch(t){case o.QRMode.MODE_NUMBER:return 10;case o.QRMode.MODE_ALPHA_NUM:return 9;case o.QRMode.MODE_8BIT_BYTE:case o.QRMode.MODE_KANJI:return 8;default:throw new Error("mode:"+t)}else if(e<27)switch(t){case o.QRMode.MODE_NUMBER:return 12;case o.QRMode.MODE_ALPHA_NUM:return 11;case o.QRMode.MODE_8BIT_BYTE:return 16;case o.QRMode.MODE_KANJI:return 10;default:throw new Error("mode:"+t)}else {if(!(e<41))throw new Error("type:"+e);switch(t){case o.QRMode.MODE_NUMBER:return 14;case o.QRMode.MODE_ALPHA_NUM:return 13;case o.QRMode.MODE_8BIT_BYTE:return 16;case o.QRMode.MODE_KANJI:return 12;default:throw new Error("mode:"+t)}}},getLostPoint:function(t){for(var e=t.getModuleCount(),r=0,o=0;o<e;o++)for(var n=0;n<e;n++){for(var i=0,u=t.isDark(o,n),a=-1;a<=1;a++)if(!(o+a<0||e<=o+a))for(var s=-1;s<=1;s++)n+s<0||e<=n+s||0===a&&0===s||u===t.isDark(o+a,n+s)&&i++;i>5&&(r+=3+i-5);}for(o=0;o<e-1;o++)for(n=0;n<e-1;n++){var l=0;t.isDark(o,n)&&l++,t.isDark(o+1,n)&&l++,t.isDark(o,n+1)&&l++,t.isDark(o+1,n+1)&&l++,0!==l&&4!==l||(r+=3);}for(o=0;o<e;o++)for(n=0;n<e-6;n++)t.isDark(o,n)&&!t.isDark(o,n+1)&&t.isDark(o,n+2)&&t.isDark(o,n+3)&&t.isDark(o,n+4)&&!t.isDark(o,n+5)&&t.isDark(o,n+6)&&(r+=40);for(n=0;n<e;n++)for(o=0;o<e-6;o++)t.isDark(o,n)&&!t.isDark(o+1,n)&&t.isDark(o+2,n)&&t.isDark(o+3,n)&&t.isDark(o+4,n)&&!t.isDark(o+5,n)&&t.isDark(o+6,n)&&(r+=40);var h=0;for(n=0;n<e;n++)for(o=0;o<e;o++)t.isDark(o,n)&&h++;return r+=10*(Math.abs(100*h/e/e-50)/5)}};},function(t,e,r){Object.defineProperty(e,"__esModule",{value:!0});var o=r(0),n=function(){function t(t){this.mode=o.QRMode.MODE_8BIT_BYTE,this.data=t;}return t.prototype.getLength=function(){return this.data.length},t.prototype.write=function(t){for(var e=0;e<this.data.length;e++)t.put(this.data.charCodeAt(e),8);},t}();e.default=n;},function(t,e,r){Object.defineProperty(e,"__esModule",{value:!0});var o=function(){function t(){this.buffer=[],this.length=0;}return t.prototype.get=function(t){var e=Math.floor(t/8);return 1==(this.buffer[e]>>>7-t%8&1)},t.prototype.put=function(t,e){for(var r=0;r<e;r++)this.putBit(1==(t>>>e-r-1&1));},t.prototype.getLengthInBits=function(){return this.length},t.prototype.putBit=function(t){var e=Math.floor(this.length/8);this.buffer.length<=e&&this.buffer.push(0),t&&(this.buffer[e]|=128>>>this.length%8),this.length++;},t}();e.default=o;},function(t,e,r){Object.defineProperty(e,"__esModule",{value:!0});var o=r(0),n=function(){function t(t,e){this.totalCount=t,this.dataCount=e;}return t.getRSBlocks=function(e,r){var o=this.getRsBlockTable(e,r);if(void 0===o)throw new Error("bad rs block @ typeNumber:"+e+"/errorCorrectLevel:"+r);for(var n=o.length/3,i=[],u=0;u<n;u++)for(var a=o[3*u],s=o[3*u+1],l=o[3*u+2],h=0;h<a;h++)i.push(new t(s,l));return i},t.getRsBlockTable=function(t,e){switch(e){case o.QRErrorCorrectLevel.L:return this.RS_BLOCK_TABLE[4*(t-1)];case o.QRErrorCorrectLevel.M:return this.RS_BLOCK_TABLE[4*(t-1)+1];case o.QRErrorCorrectLevel.Q:return this.RS_BLOCK_TABLE[4*(t-1)+2];case o.QRErrorCorrectLevel.H:return this.RS_BLOCK_TABLE[4*(t-1)+3];default:return}},t.RS_BLOCK_TABLE=[[1,26,19],[1,26,16],[1,26,13],[1,26,9],[1,44,34],[1,44,28],[1,44,22],[1,44,16],[1,70,55],[1,70,44],[2,35,17],[2,35,13],[1,100,80],[2,50,32],[2,50,24],[4,25,9],[1,134,108],[2,67,43],[2,33,15,2,34,16],[2,33,11,2,34,12],[2,86,68],[4,43,27],[4,43,19],[4,43,15],[2,98,78],[4,49,31],[2,32,14,4,33,15],[4,39,13,1,40,14],[2,121,97],[2,60,38,2,61,39],[4,40,18,2,41,19],[4,40,14,2,41,15],[2,146,116],[3,58,36,2,59,37],[4,36,16,4,37,17],[4,36,12,4,37,13],[2,86,68,2,87,69],[4,69,43,1,70,44],[6,43,19,2,44,20],[6,43,15,2,44,16],[4,101,81],[1,80,50,4,81,51],[4,50,22,4,51,23],[3,36,12,8,37,13],[2,116,92,2,117,93],[6,58,36,2,59,37],[4,46,20,6,47,21],[7,42,14,4,43,15],[4,133,107],[8,59,37,1,60,38],[8,44,20,4,45,21],[12,33,11,4,34,12],[3,145,115,1,146,116],[4,64,40,5,65,41],[11,36,16,5,37,17],[11,36,12,5,37,13],[5,109,87,1,110,88],[5,65,41,5,66,42],[5,54,24,7,55,25],[11,36,12],[5,122,98,1,123,99],[7,73,45,3,74,46],[15,43,19,2,44,20],[3,45,15,13,46,16],[1,135,107,5,136,108],[10,74,46,1,75,47],[1,50,22,15,51,23],[2,42,14,17,43,15],[5,150,120,1,151,121],[9,69,43,4,70,44],[17,50,22,1,51,23],[2,42,14,19,43,15],[3,141,113,4,142,114],[3,70,44,11,71,45],[17,47,21,4,48,22],[9,39,13,16,40,14],[3,135,107,5,136,108],[3,67,41,13,68,42],[15,54,24,5,55,25],[15,43,15,10,44,16],[4,144,116,4,145,117],[17,68,42],[17,50,22,6,51,23],[19,46,16,6,47,17],[2,139,111,7,140,112],[17,74,46],[7,54,24,16,55,25],[34,37,13],[4,151,121,5,152,122],[4,75,47,14,76,48],[11,54,24,14,55,25],[16,45,15,14,46,16],[6,147,117,4,148,118],[6,73,45,14,74,46],[11,54,24,16,55,25],[30,46,16,2,47,17],[8,132,106,4,133,107],[8,75,47,13,76,48],[7,54,24,22,55,25],[22,45,15,13,46,16],[10,142,114,2,143,115],[19,74,46,4,75,47],[28,50,22,6,51,23],[33,46,16,4,47,17],[8,152,122,4,153,123],[22,73,45,3,74,46],[8,53,23,26,54,24],[12,45,15,28,46,16],[3,147,117,10,148,118],[3,73,45,23,74,46],[4,54,24,31,55,25],[11,45,15,31,46,16],[7,146,116,7,147,117],[21,73,45,7,74,46],[1,53,23,37,54,24],[19,45,15,26,46,16],[5,145,115,10,146,116],[19,75,47,10,76,48],[15,54,24,25,55,25],[23,45,15,25,46,16],[13,145,115,3,146,116],[2,74,46,29,75,47],[42,54,24,1,55,25],[23,45,15,28,46,16],[17,145,115],[10,74,46,23,75,47],[10,54,24,35,55,25],[19,45,15,35,46,16],[17,145,115,1,146,116],[14,74,46,21,75,47],[29,54,24,19,55,25],[11,45,15,46,46,16],[13,145,115,6,146,116],[14,74,46,23,75,47],[44,54,24,7,55,25],[59,46,16,1,47,17],[12,151,121,7,152,122],[12,75,47,26,76,48],[39,54,24,14,55,25],[22,45,15,41,46,16],[6,151,121,14,152,122],[6,75,47,34,76,48],[46,54,24,10,55,25],[2,45,15,64,46,16],[17,152,122,4,153,123],[29,74,46,14,75,47],[49,54,24,10,55,25],[24,45,15,46,46,16],[4,152,122,18,153,123],[13,74,46,32,75,47],[48,54,24,14,55,25],[42,45,15,32,46,16],[20,147,117,4,148,118],[40,75,47,7,76,48],[43,54,24,22,55,25],[10,45,15,67,46,16],[19,148,118,6,149,119],[18,75,47,31,76,48],[34,54,24,34,55,25],[20,45,15,61,46,16]],t}();e.default=n;}])}));
+});
+
+const tttxQrcodeCss = "";
+
+const TttxQrCode = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.link = 'https://example.com';
+    this.size = 258;
+  }
+  componentDidRender() {
+    const options = {
+      width: this.size,
+      height: this.size,
+      correctLevel: qrcode_min.QRErrorCorrectLevel.H,
+      background: '#ffffff',
+      foreground: '#000000',
+      text: this.link,
+    };
+    qrcode_min.QRCode.setCanvas('qrcode', options);
+  }
+  render() {
+    return h("div", { id: "qrcode" });
+  }
+};
+TttxQrCode.style = tttxQrcodeCss;
+
+export { TttxQrCode as tttx_qrcode };

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

@@ -1,108 +1,108 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-d784fb3e.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a848bfb4.js';
 
 const tttxSorterCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.sorter-container{display:flex;flex-direction:row;position:relative;border:1px solid #d5d5d5;border-radius:4px;font-weight:400;box-sizing:border-box;height:36px}@media (max-width: 475px){.sorter-container{width:68px}}.sorter-container .arrow-toggle-button{display:inline-flex;justify-content:center;align-items:center;flex-direction:column;background-color:white;border:none;border-bottom-left-radius:4px;border-top-left-radius:4px}@media (max-width: 475px){.sorter-container .arrow-toggle-button{padding-right:0px;padding-left:8px}}.sorter-container .arrow-toggle-button .hydrated{display:flex;justify-content:center;align-items:center}.sorter-container .arrow-toggle-button span{display:block;margin:auto;line-height:16px}.sorter-container .arrow-toggle-button .material-symbols-rounded{color:#212121}.sorter-container .dropdown-selector{display:inline-flex;position:relative;flex-grow:1}.sorter-container .dropdown-selector .dropdown-selector-button{display:inline-flex;flex-direction:row;gap:4px;padding-right:4px;align-items:center;color:#212121;width:100%}@media (max-width: 475px){.sorter-container .dropdown-selector .dropdown-selector-button .dropdown-selector-text{display:none}}.sorter-container .dropdown-selector .dropdown-selector-chevron{display:inline-flex;margin-left:auto;right:0;top:0;flex-direction:row;align-items:center;height:36px}.sorter-container .dropdown-selector .dropdown-selector-chevron .hydrated{height:24px}@media (max-width: 475px){.sorter-container .dropdown-selector .dropdown-selector-chevron{padding-right:2px}}.sorter-container .dropdown-options-list{position:absolute;top:36px;left:0;z-index:1;width:100%;line-height:21px;font-size:16px;border-radius:4px;padding-top:8px;padding-bottom:7px;box-shadow:0px 1px 5px #1111114D;box-sizing:border-box;background-color:white}@media (max-width: 475px){.sorter-container .dropdown-options-list{width:220px;padding-top:8px}}.sorter-container .dropdown-options-list .dropdown-option{padding:8px 16px;font-size:16px;line-height:21px}.sorter-container .dropdown-options-list .dropdown-option:hover,.sorter-container .dropdown-options-list .dropdown-option:focus{background-color:#e7f1f9}.sorter-container.--expanded{border-color:#1579c6}@media (max-width: 475px){.sorter-container.--expanded{border:none}}";
 
-const TttxSorter = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.sorterChangeEvent = createEvent(this, "sorterChangeEvent", 7);
-    this.sorterKey = undefined;
-    this.defaultSortDirection = 'descending';
-    this.fieldOptionsData = null;
-    this.defaultOption = '';
-    this.selectedField = this.defaultOption;
-    this.sortDirection = this.defaultSortDirection;
-    this.dropdownExpand = false;
-    this.dropdownOptions = undefined;
-  }
-  emitSortEvent() {
-    this.sorterChangeEvent.emit({
-      sorterDirection: this.sortDirection,
-      sorterKey: this.sorterKey,
-      sortField: this.selectedField,
-    });
-  }
-  onSortToggleClick(event) {
-    event.preventDefault();
-    if (this.sortDirection == 'ascending') {
-      this.sortDirection = 'descending';
-    }
-    else {
-      this.sortDirection = 'ascending';
-    }
-    this.emitSortEvent();
-  }
-  onDropdownClicked() {
-    this.dropdownExpand = !this.dropdownExpand;
-  }
-  onDropdownSelected(event) {
-    this.dropdownExpand = false;
-    const target = event.target;
-    this.selectedField = target.innerHTML;
-    this.emitSortEvent();
-  }
-  // getOptionsList() {
-  //     return this.el.shadowRoot.querySelectorAll('.dropdown-option');
-  // }
-  // /* istanbul ignore next */
-  // @Listen('keyup')
-  // handleKeyDown(ev: KeyboardEvent) {
-  //     const keyboardEventValue = ev.key;
-  //     if (document.activeElement.id != `sorter__${this.sorterKey}`) return;
-  //     switch (keyboardEventValue) {
-  //         case 'Enter':
-  //             if (this._focussedElementIndex > -1) {
-  //                 const options = this.el.shadowRoot.querySelectorAll('.dropdown-option');
-  //                 this.selectedField = options[this._focussedElementIndex].innerHTML;
-  //                 this.emitSortEvent();
-  //             }
-  //             this.dropdownExpand = false;
-  //             break;
-  //         case 'Escape':
-  //             this.dropdownExpand = false;
-  //             break;
-  //         case 'ArrowDown':
-  //             this.dropdownExpand = true;
-  //             if (this._focussedElementIndex > -1) {
-  //                 const options = this.getOptionsList();
-  //                 const currentOption = options[this._focussedElementIndex] as HTMLElement;
-  //                 currentOption.blur();
-  //                 options[this._focussedElementIndex].focus();
-  //                 this._focussedElementIndex + 1 < options.length ? this._focussedElementIndex++ : (this._focussedElementIndex = 0);
-  //             } else {
-  //                 this._focussedElementIndex++;
-  //             }
-  //             break;
-  //         case 'ArrowUp':
-  //             this.dropdownExpand = true;
-  //             if (this._focussedElementIndex == -1) {
-  //                 const options = this.getOptionsList();
-  //                 this._focussedElementIndex = options.length - 1;
-  //             } else {
-  //                 const options = this.getOptionsList();
-  //                 const currentOption = options[this._focussedElementIndex] as HTMLElement;
-  //                 currentOption.blur();
-  //                 this._focussedElementIndex > 0 ? this._focussedElementIndex-- : (this._focussedElementIndex = options.length - 1);
-  //                 options[this._focussedElementIndex].focus();
-  //             }
-  //             break;
-  //     }
-  // }
-  render() {
-    const parsedFieldOptionsData = typeof this.fieldOptionsData === 'string' ? JSON.parse(this.fieldOptionsData) : this.fieldOptionsData;
-    if (!this.fieldOptionsData)
-      return;
-    const arrowIcon = this.sortDirection == 'ascending' ? 'arrow_upward' : 'arrow_downward';
-    const chevronIcon = this.dropdownExpand ? 'expand_less' : 'expand_more';
-    const selectedOption = this.selectedField;
-    const dropdownSelectorClassNameModifier = this.dropdownExpand ? '--expanded' : '';
-    const sorterKey = `sorter__${this.sorterKey}`;
-    return (h(Host, { id: sorterKey }, h("div", { tabindex: 0, class: `sorter-container ${dropdownSelectorClassNameModifier}` }, h("button", { class: "arrow-toggle-button", type: "button", onClick: this.onSortToggleClick.bind(this) }, h("tttx-icon", { icon: arrowIcon, color: "black" })), h("div", { class: "dropdown-selector", onClick: this.onDropdownClicked.bind(this) }, h("div", { class: "dropdown-selector-button" }, h("div", { class: "dropdown-selector-text" }, selectedOption), h("div", { class: "dropdown-selector-chevron" }, h("tttx-icon", { icon: chevronIcon, color: "black" })))), this.dropdownExpand && (h("div", { class: "dropdown-options-list" }, parsedFieldOptionsData.sorterOptions.map(option => {
-      return (h("div", { class: "dropdown-option", tabIndex: -1, onClick: this.onDropdownSelected.bind(this), key: option.optionLabel }, option.optionLabel));
-    }))))));
-  }
-  get el() { return getElement(this); }
-};
+const TttxSorter = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.sorterChangeEvent = createEvent(this, "sorterChangeEvent", 7);
+    this.sorterKey = undefined;
+    this.defaultSortDirection = 'descending';
+    this.fieldOptionsData = null;
+    this.defaultOption = '';
+    this.selectedField = this.defaultOption;
+    this.sortDirection = this.defaultSortDirection;
+    this.dropdownExpand = false;
+    this.dropdownOptions = undefined;
+  }
+  emitSortEvent() {
+    this.sorterChangeEvent.emit({
+      sorterDirection: this.sortDirection,
+      sorterKey: this.sorterKey,
+      sortField: this.selectedField,
+    });
+  }
+  onSortToggleClick(event) {
+    event.preventDefault();
+    if (this.sortDirection == 'ascending') {
+      this.sortDirection = 'descending';
+    }
+    else {
+      this.sortDirection = 'ascending';
+    }
+    this.emitSortEvent();
+  }
+  onDropdownClicked() {
+    this.dropdownExpand = !this.dropdownExpand;
+  }
+  onDropdownSelected(event) {
+    this.dropdownExpand = false;
+    const target = event.target;
+    this.selectedField = target.innerHTML;
+    this.emitSortEvent();
+  }
+  // getOptionsList() {
+  //     return this.el.shadowRoot.querySelectorAll('.dropdown-option');
+  // }
+  // /* istanbul ignore next */
+  // @Listen('keyup')
+  // handleKeyDown(ev: KeyboardEvent) {
+  //     const keyboardEventValue = ev.key;
+  //     if (document.activeElement.id != `sorter__${this.sorterKey}`) return;
+  //     switch (keyboardEventValue) {
+  //         case 'Enter':
+  //             if (this._focussedElementIndex > -1) {
+  //                 const options = this.el.shadowRoot.querySelectorAll('.dropdown-option');
+  //                 this.selectedField = options[this._focussedElementIndex].innerHTML;
+  //                 this.emitSortEvent();
+  //             }
+  //             this.dropdownExpand = false;
+  //             break;
+  //         case 'Escape':
+  //             this.dropdownExpand = false;
+  //             break;
+  //         case 'ArrowDown':
+  //             this.dropdownExpand = true;
+  //             if (this._focussedElementIndex > -1) {
+  //                 const options = this.getOptionsList();
+  //                 const currentOption = options[this._focussedElementIndex] as HTMLElement;
+  //                 currentOption.blur();
+  //                 options[this._focussedElementIndex].focus();
+  //                 this._focussedElementIndex + 1 < options.length ? this._focussedElementIndex++ : (this._focussedElementIndex = 0);
+  //             } else {
+  //                 this._focussedElementIndex++;
+  //             }
+  //             break;
+  //         case 'ArrowUp':
+  //             this.dropdownExpand = true;
+  //             if (this._focussedElementIndex == -1) {
+  //                 const options = this.getOptionsList();
+  //                 this._focussedElementIndex = options.length - 1;
+  //             } else {
+  //                 const options = this.getOptionsList();
+  //                 const currentOption = options[this._focussedElementIndex] as HTMLElement;
+  //                 currentOption.blur();
+  //                 this._focussedElementIndex > 0 ? this._focussedElementIndex-- : (this._focussedElementIndex = options.length - 1);
+  //                 options[this._focussedElementIndex].focus();
+  //             }
+  //             break;
+  //     }
+  // }
+  render() {
+    const parsedFieldOptionsData = typeof this.fieldOptionsData === 'string' ? JSON.parse(this.fieldOptionsData) : this.fieldOptionsData;
+    if (!this.fieldOptionsData)
+      return;
+    const arrowIcon = this.sortDirection == 'ascending' ? 'arrow_upward' : 'arrow_downward';
+    const chevronIcon = this.dropdownExpand ? 'expand_less' : 'expand_more';
+    const selectedOption = this.selectedField;
+    const dropdownSelectorClassNameModifier = this.dropdownExpand ? '--expanded' : '';
+    const sorterKey = `sorter__${this.sorterKey}`;
+    return (h(Host, { id: sorterKey }, h("div", { tabindex: 0, class: `sorter-container ${dropdownSelectorClassNameModifier}` }, h("button", { class: "arrow-toggle-button", type: "button", onClick: this.onSortToggleClick.bind(this) }, h("tttx-icon", { icon: arrowIcon, color: "black" })), h("div", { class: "dropdown-selector", onClick: this.onDropdownClicked.bind(this) }, h("div", { class: "dropdown-selector-button" }, h("div", { class: "dropdown-selector-text" }, selectedOption), h("div", { class: "dropdown-selector-chevron" }, h("tttx-icon", { icon: chevronIcon, color: "black" })))), this.dropdownExpand && (h("div", { class: "dropdown-options-list" }, parsedFieldOptionsData.sorterOptions.map(option => {
+      return (h("div", { class: "dropdown-option", tabIndex: -1, onClick: this.onDropdownSelected.bind(this), key: option.optionLabel }, option.optionLabel));
+    }))))));
+  }
+  get el() { return getElement(this); }
+};
 TttxSorter.style = tttxSorterCss;
 
 export { TttxSorter as tttx_sorter };