@3t-transform/threeteeui 0.0.9 → 0.0.10

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["tttx-input.cjs",[[1,"tttx-input",{"label":[1],"valid":[4],"showerrormsg":[4],"errormsg":[1],"value":[1025],"type":[1],"placeholder":[1],"pattern":[1],"iconleft":[1],"iconright":[1],"required":[4],"isfocused":[32]}]]],["tttx-button.cjs",[[1,"tttx-button",{"fontColor":[1,"font-color"],"buttonStyle":[1,"button-style"]},[[0,"clickEvent","onClicked"]]]]],["tttx-checkbox.cjs",[[1,"tttx-checkbox",{"value":[4],"label":[1],"required":[4]}]]],["tttx-form.cjs",[[1,"tttx-form",{"dataAttribute":[1,"data-attribute"],"functionAttribute":[1,"function-attribute"]}]]],["tttx-popover-content.cjs",[[1,"tttx-popover-content",{"header":[1],"body":[1],"linkcontext":[1],"linktext":[1]}]]],["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"colour":[1]},[[4,"click","handleDocumentClick"]]]]]], options);
+  return index.bootstrapLazy([["tttx-input.cjs",[[1,"tttx-input",{"label":[1],"valid":[4],"showerrormsg":[4],"errormsg":[1],"value":[1025],"type":[1],"placeholder":[1],"pattern":[1],"iconleft":[1],"iconright":[1],"required":[4],"isfocused":[32]}]]],["tttx-button.cjs",[[1,"tttx-button",{"fontColor":[1,"font-color"],"buttonStyle":[1,"button-style"]},[[0,"clickEvent","onClicked"]]]]],["tttx-checkbox.cjs",[[1,"tttx-checkbox",{"value":[4],"label":[1],"required":[4]}]]],["tttx-form.cjs",[[1,"tttx-form",{"dataAttribute":[1,"data-attribute"],"functionAttribute":[1,"function-attribute"]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-popover-content.cjs",[[1,"tttx-popover-content",{"header":[1],"body":[1],"linkcontext":[1],"linktext":[1]}]]],["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"colour":[1]},[[4,"click","handleDocumentClick"]]]]]], options);
   });
 };
 

package/dist/cjs/tttx-checkbox.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-8a4cb9bc.js');
 
-const tttxCheckboxCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\";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}.field{clear:both}.container{display:flex;flex-wrap:wrap;box-sizing:border-box;height:36px;border:1px solid #c8c8c8;border-radius:4px}.icon-left,.icon-right{flex-basis:24px}.icon-left span,.icon-right span{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left span{margin-left:4px}.icon-right span{margin-right:4px}.input{flex-grow:1;border:none;outline:none;font-size:16px;padding:8px 16px;background-color:transparent}.iconleft .input{padding-left:4px}.iconright .input{padding-right:4px}.label{display:block;font-size:16px;height:18px;font-weight:600;color:#212121;font-size:16px;margin-bottom:4px;z-index:1}.disabled{background:#f0f0f0;color:#9e9e9e;border-color:#c8c8c8}.focused{border-color:#1479c6}.errormsg{height:16px;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;color:white;border-radius:none;z-index:2;color:#DC0000}.errormsg .validationicon{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#DC0000}.danger{color:#DC0000}.optional{color:#757575;font-weight:normal}:host{display:block}.spacing{margin-bottom:16px}";
+const tttxCheckboxCss = ".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}.field{clear:both}.container{display:flex;flex-wrap:wrap;box-sizing:border-box;height:36px;border:1px solid #c8c8c8;border-radius:4px}.icon-left,.icon-right{flex-basis:24px}.icon-left span,.icon-right span{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left span{margin-left:4px}.icon-right span{margin-right:4px}.input{flex-grow:1;border:none;outline:none;font-size:16px;padding:8px 16px;background-color:transparent}.iconleft .input{padding-left:4px}.iconright .input{padding-right:4px}.label{display:block;height:18px;font-weight:600;color:#212121;font-size:16px;margin-bottom:4px;z-index:1}.disabled{background:#f0f0f0;color:#9e9e9e;border-color:#c8c8c8}.focused{border-color:#1479c6}.errormsg{display:flex;justify-content:center;align-items:center;float:left;margin-bottom:16px;box-sizing:border-box;background-color:transparent;height:26px;font-size:14px;border-radius:none;z-index:2;color:#DC0000}.errormsg .validationicon{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#DC0000}.danger{color:#DC0000}.optional{color:#757575;font-weight:normal}:host{display:block}.spacing{margin-bottom:16px}";
 
 const TttxCheckbox = class {
   constructor(hostRef) {

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

@@ -1801,7 +1801,7 @@ var createPopper = /*#__PURE__*/popperGenerator({
   defaultModifiers: defaultModifiers
 }); // eslint-disable-next-line import/no-unused-modules
 
-const tttxIconCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\";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:block}.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}.orange{color:#F59500}.blue{color:#1479c6}.green{color:#A2BB31}.gray{color:#757575}.black{color:#212121}.clickable{cursor:pointer}";
+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:block}.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}.orange{color:#F59500}.blue{color:#1479c6}.green{color:#A2BB31}.gray{color:#757575}.black{color:#212121}.white{color:white}.clickable{cursor:pointer}";
 
 const TttxIcon = class {
   constructor(hostRef) {

package/dist/cjs/tttx-input.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-8a4cb9bc.js');
 
-const tttxInputCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\";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}.field{clear:both}.container{display:flex;flex-wrap:wrap;box-sizing:border-box;height:36px;border:1px solid #c8c8c8;border-radius:4px}.icon-left,.icon-right{flex-basis:24px}.icon-left span,.icon-right span{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left span{margin-left:4px}.icon-right span{margin-right:4px}.input{flex-grow:1;border:none;outline:none;font-size:16px;padding:8px 16px;background-color:transparent}.iconleft .input{padding-left:4px}.iconright .input{padding-right:4px}.label{display:block;font-size:16px;height:18px;font-weight:600;color:#212121;font-size:16px;margin-bottom:4px;z-index:1}.disabled{background:#f0f0f0;color:#9e9e9e;border-color:#c8c8c8}.focused{border-color:#1479c6}.errormsg{height:16px;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;color:white;border-radius:none;z-index:2;color:#DC0000}.errormsg .validationicon{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#DC0000}.danger{color:#DC0000}.optional{color:#757575;font-weight:normal}:host{display:block}.spacing{margin-bottom:16px}.errorstate{border-color:#DC0000}.icon-right{margin-top:5px;margin-right:4px}.icon-left{margin-top:5px;margin-left:4px}";
+const tttxInputCss = ".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}.field{clear:both}.container{display:flex;flex-wrap:wrap;box-sizing:border-box;height:36px;border:1px solid #c8c8c8;border-radius:4px}.icon-left,.icon-right{flex-basis:24px}.icon-left span,.icon-right span{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left span{margin-left:4px}.icon-right span{margin-right:4px}.input{flex-grow:1;border:none;outline:none;font-size:16px;padding:8px 16px;background-color:transparent}.iconleft .input{padding-left:4px}.iconright .input{padding-right:4px}.label{display:block;height:18px;font-weight:600;color:#212121;font-size:16px;margin-bottom:4px;z-index:1}.disabled{background:#f0f0f0;color:#9e9e9e;border-color:#c8c8c8}.focused{border-color:#1479c6}.errormsg{display:flex;justify-content:center;align-items:center;float:left;margin-bottom:16px;box-sizing:border-box;background-color:transparent;height:26px;font-size:14px;border-radius:none;z-index:2;color:#DC0000}.errormsg .validationicon{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#DC0000}.danger{color:#DC0000}.optional{color:#757575;font-weight:normal}:host{display:block}.spacing{margin-bottom:16px}.errorstate{border-color:#DC0000}.icon-right{margin-top:5px;margin-right:4px}.icon-left{margin-top:5px;margin-left:4px}";
 
 const TttxInput = class {
   constructor(hostRef) {

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

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-8a4cb9bc.js');
+
+const tttxLoadingSpinnerCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.spinner-container{position:absolute}.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) {
+    index.registerInstance(this, hostRef);
+    this.loadingMessage = undefined;
+    this.size = 'large';
+  }
+  renderLoadingMessage() {
+    if (!this.loadingMessage)
+      return '';
+    return index.h("div", { class: 'loading-text' }, "Loading, please wait...");
+  }
+  render() {
+    return index.h("div", { class: 'spinner-container' }, index.h("div", { class: "loading-box" }, index.h("span", { class: `spinner ${this.size}` })), this.renderLoadingMessage());
+  }
+};
+TttxLoadingSpinner.style = tttxLoadingSpinnerCss;
+
+exports.tttx_loading_spinner = TttxLoadingSpinner;

package/dist/cjs/tttx.cjs.js

@@ -17,7 +17,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["tttx-input.cjs",[[1,"tttx-input",{"label":[1],"valid":[4],"showerrormsg":[4],"errormsg":[1],"value":[1025],"type":[1],"placeholder":[1],"pattern":[1],"iconleft":[1],"iconright":[1],"required":[4],"isfocused":[32]}]]],["tttx-button.cjs",[[1,"tttx-button",{"fontColor":[1,"font-color"],"buttonStyle":[1,"button-style"]},[[0,"clickEvent","onClicked"]]]]],["tttx-checkbox.cjs",[[1,"tttx-checkbox",{"value":[4],"label":[1],"required":[4]}]]],["tttx-form.cjs",[[1,"tttx-form",{"dataAttribute":[1,"data-attribute"],"functionAttribute":[1,"function-attribute"]}]]],["tttx-popover-content.cjs",[[1,"tttx-popover-content",{"header":[1],"body":[1],"linkcontext":[1],"linktext":[1]}]]],["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"colour":[1]},[[4,"click","handleDocumentClick"]]]]]], options);
+  return index.bootstrapLazy([["tttx-input.cjs",[[1,"tttx-input",{"label":[1],"valid":[4],"showerrormsg":[4],"errormsg":[1],"value":[1025],"type":[1],"placeholder":[1],"pattern":[1],"iconleft":[1],"iconright":[1],"required":[4],"isfocused":[32]}]]],["tttx-button.cjs",[[1,"tttx-button",{"fontColor":[1,"font-color"],"buttonStyle":[1,"button-style"]},[[0,"clickEvent","onClicked"]]]]],["tttx-checkbox.cjs",[[1,"tttx-checkbox",{"value":[4],"label":[1],"required":[4]}]]],["tttx-form.cjs",[[1,"tttx-form",{"dataAttribute":[1,"data-attribute"],"functionAttribute":[1,"function-attribute"]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-popover-content.cjs",[[1,"tttx-popover-content",{"header":[1],"body":[1],"linkcontext":[1],"linktext":[1]}]]],["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"colour":[1]},[[4,"click","handleDocumentClick"]]]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -2,6 +2,7 @@
   "entries": [
     "./components/atoms/tttx-button/tttx-button.js",
     "./components/atoms/tttx-icon/tttx-icon.js",
+    "./components/atoms/tttx-loading-spinner/tttx-loading-spinner.js",
     "./components/atoms/tttx-popover-content/tttx-popover-content.js",
     "./components/atoms/ttx-checkbox/tttx-checkbox.js",
     "./components/molecules/tttx-form/tttx-form.js",

package/dist/collection/components/atoms/tttx-icon/tttx-icon.css

@@ -3,7 +3,7 @@
 }
 
 .material-symbols-rounded {
-  font-family: "Material Symbols Rounded";
+  font-family: "Material Symbols Rounded", sans-serif;
   font-weight: 400;
   font-style: normal;
   font-size: 24px;
@@ -96,6 +96,10 @@
   color: #212121;
 }
 
+.white {
+  color: white;
+}
+
 .clickable {
   cursor: pointer;
 }

package/dist/collection/components/atoms/tttx-loading-spinner/tttx-loading-spinner.css

@@ -0,0 +1,48 @@
+.material-symbols-rounded {
+  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
+}
+
+.spinner-container {
+  position: absolute;
+}
+
+.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);
+  }
+}

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

@@ -0,0 +1,66 @@
+import { h } from '@stencil/core';
+export class TttxLoadingSpinner {
+  constructor() {
+    this.loadingMessage = undefined;
+    this.size = 'large';
+  }
+  renderLoadingMessage() {
+    if (!this.loadingMessage)
+      return '';
+    return h("div", { class: 'loading-text' }, "Loading, please wait...");
+  }
+  render() {
+    return h("div", { class: 'spinner-container' }, h("div", { class: "loading-box" }, h("span", { class: `spinner ${this.size}` })), this.renderLoadingMessage());
+  }
+  static get is() { return "tttx-loading-spinner"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-loading-spinner.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-loading-spinner.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "loadingMessage": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "loading-message",
+        "reflect": false
+      },
+      "size": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "'small' | 'large'",
+          "resolved": "\"large\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'large'"
+      }
+    };
+  }
+}

package/dist/collection/components/atoms/tttx-loading-spinner/tttx-loading-spinner.stories.js

@@ -0,0 +1,17 @@
+export default {
+  title: 'atoms/TTTX Loading Spinner',
+  component: 'tttx-loading-spinner',
+  argTypes: {
+    loadingMessage: {
+      control: 'boolean',
+    },
+    size: {
+      control: { type: 'radio' },
+      options: ['small', 'large'],
+    },
+  },
+};
+export const Example = (args) => {
+  const size = args.size || 'large';
+  return `<tttx-loading-spinner ${args.loadingMessage ? 'loading-message' : ''} size='${size}' />`;
+};

package/dist/collection/components/atoms/ttx-checkbox/tttx-checkbox.css

@@ -3,7 +3,7 @@
 }
 
 .material-symbols-rounded {
-  font-family: "Material Symbols Rounded";
+  font-family: "Material Symbols Rounded", sans-serif;
   font-weight: 400;
   font-style: normal;
   font-size: 24px;
@@ -75,7 +75,6 @@
 
 .label {
   display: block;
-  font-size: 16px;
   height: 18px;
   font-weight: 600;
   color: #212121;
@@ -95,7 +94,6 @@
 }
 
 .errormsg {
-  height: 16px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -105,7 +103,6 @@
   background-color: transparent;
   height: 26px;
   font-size: 14px;
-  color: white;
   border-radius: none;
   z-index: 2;
   color: #DC0000;

package/dist/collection/components/molecules/tttx-input/tttx-input.css

@@ -3,7 +3,7 @@
 }
 
 .material-symbols-rounded {
-  font-family: "Material Symbols Rounded";
+  font-family: "Material Symbols Rounded", sans-serif;
   font-weight: 400;
   font-style: normal;
   font-size: 24px;
@@ -75,7 +75,6 @@
 
 .label {
   display: block;
-  font-size: 16px;
   height: 18px;
   font-weight: 600;
   color: #212121;
@@ -95,7 +94,6 @@
 }
 
 .errormsg {
-  height: 16px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -105,7 +103,6 @@
   background-color: transparent;
   height: 26px;
   font-size: 14px;
-  color: white;
   border-radius: none;
   z-index: 2;
   color: #DC0000;

package/dist/components/index.d.ts

@@ -4,6 +4,7 @@ export { TttxCheckbox as TttxCheckbox } from '../types/components/atoms/ttx-chec
 export { TttxForm as TttxForm } from '../types/components/molecules/tttx-form/tttx-form';
 export { TttxIcon as TttxIcon } from '../types/components/atoms/tttx-icon/tttx-icon';
 export { TttxInput as TttxInput } from '../types/components/molecules/tttx-input/tttx-input';
+export { TttxLoadingSpinner as TttxLoadingSpinner } from '../types/components/atoms/tttx-loading-spinner/tttx-loading-spinner';
 export { TttxPopoverContent as TttxPopoverContent } from '../types/components/atoms/tttx-popover-content/tttx-popover-content';
 
 /**

package/dist/components/index.js

@@ -4,4 +4,5 @@ export { TttxCheckbox, defineCustomElement as defineCustomElementTttxCheckbox }
 export { TttxForm, defineCustomElement as defineCustomElementTttxForm } from './tttx-form.js';
 export { TttxIcon, defineCustomElement as defineCustomElementTttxIcon } from './tttx-icon.js';
 export { TttxInput, defineCustomElement as defineCustomElementTttxInput } from './tttx-input.js';
+export { TttxLoadingSpinner, defineCustomElement as defineCustomElementTttxLoadingSpinner } from './tttx-loading-spinner.js';
 export { TttxPopoverContent, defineCustomElement as defineCustomElementTttxPopoverContent } from './tttx-popover-content.js';

package/dist/components/tttx-checkbox.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
-const tttxCheckboxCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\";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}.field{clear:both}.container{display:flex;flex-wrap:wrap;box-sizing:border-box;height:36px;border:1px solid #c8c8c8;border-radius:4px}.icon-left,.icon-right{flex-basis:24px}.icon-left span,.icon-right span{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left span{margin-left:4px}.icon-right span{margin-right:4px}.input{flex-grow:1;border:none;outline:none;font-size:16px;padding:8px 16px;background-color:transparent}.iconleft .input{padding-left:4px}.iconright .input{padding-right:4px}.label{display:block;font-size:16px;height:18px;font-weight:600;color:#212121;font-size:16px;margin-bottom:4px;z-index:1}.disabled{background:#f0f0f0;color:#9e9e9e;border-color:#c8c8c8}.focused{border-color:#1479c6}.errormsg{height:16px;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;color:white;border-radius:none;z-index:2;color:#DC0000}.errormsg .validationicon{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#DC0000}.danger{color:#DC0000}.optional{color:#757575;font-weight:normal}:host{display:block}.spacing{margin-bottom:16px}";
+const tttxCheckboxCss = ".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}.field{clear:both}.container{display:flex;flex-wrap:wrap;box-sizing:border-box;height:36px;border:1px solid #c8c8c8;border-radius:4px}.icon-left,.icon-right{flex-basis:24px}.icon-left span,.icon-right span{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left span{margin-left:4px}.icon-right span{margin-right:4px}.input{flex-grow:1;border:none;outline:none;font-size:16px;padding:8px 16px;background-color:transparent}.iconleft .input{padding-left:4px}.iconright .input{padding-right:4px}.label{display:block;height:18px;font-weight:600;color:#212121;font-size:16px;margin-bottom:4px;z-index:1}.disabled{background:#f0f0f0;color:#9e9e9e;border-color:#c8c8c8}.focused{border-color:#1479c6}.errormsg{display:flex;justify-content:center;align-items:center;float:left;margin-bottom:16px;box-sizing:border-box;background-color:transparent;height:26px;font-size:14px;border-radius:none;z-index:2;color:#DC0000}.errormsg .validationicon{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#DC0000}.danger{color:#DC0000}.optional{color:#757575;font-weight:normal}:host{display:block}.spacing{margin-bottom:16px}";
 
 const TttxCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/tttx-icon2.js

@@ -1797,7 +1797,7 @@ var createPopper = /*#__PURE__*/popperGenerator({
   defaultModifiers: defaultModifiers
 }); // eslint-disable-next-line import/no-unused-modules
 
-const tttxIconCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\";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:block}.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}.orange{color:#F59500}.blue{color:#1479c6}.green{color:#A2BB31}.gray{color:#757575}.black{color:#212121}.clickable{cursor:pointer}";
+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:block}.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}.orange{color:#F59500}.blue{color:#1479c6}.green{color:#A2BB31}.gray{color:#757575}.black{color:#212121}.white{color:white}.clickable{cursor:pointer}";
 
 const TttxIcon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
   constructor() {

package/dist/components/tttx-input.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './tttx-icon2.js';
 
-const tttxInputCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\";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}.field{clear:both}.container{display:flex;flex-wrap:wrap;box-sizing:border-box;height:36px;border:1px solid #c8c8c8;border-radius:4px}.icon-left,.icon-right{flex-basis:24px}.icon-left span,.icon-right span{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left span{margin-left:4px}.icon-right span{margin-right:4px}.input{flex-grow:1;border:none;outline:none;font-size:16px;padding:8px 16px;background-color:transparent}.iconleft .input{padding-left:4px}.iconright .input{padding-right:4px}.label{display:block;font-size:16px;height:18px;font-weight:600;color:#212121;font-size:16px;margin-bottom:4px;z-index:1}.disabled{background:#f0f0f0;color:#9e9e9e;border-color:#c8c8c8}.focused{border-color:#1479c6}.errormsg{height:16px;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;color:white;border-radius:none;z-index:2;color:#DC0000}.errormsg .validationicon{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#DC0000}.danger{color:#DC0000}.optional{color:#757575;font-weight:normal}:host{display:block}.spacing{margin-bottom:16px}.errorstate{border-color:#DC0000}.icon-right{margin-top:5px;margin-right:4px}.icon-left{margin-top:5px;margin-left:4px}";
+const tttxInputCss = ".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}.field{clear:both}.container{display:flex;flex-wrap:wrap;box-sizing:border-box;height:36px;border:1px solid #c8c8c8;border-radius:4px}.icon-left,.icon-right{flex-basis:24px}.icon-left span,.icon-right span{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left span{margin-left:4px}.icon-right span{margin-right:4px}.input{flex-grow:1;border:none;outline:none;font-size:16px;padding:8px 16px;background-color:transparent}.iconleft .input{padding-left:4px}.iconright .input{padding-right:4px}.label{display:block;height:18px;font-weight:600;color:#212121;font-size:16px;margin-bottom:4px;z-index:1}.disabled{background:#f0f0f0;color:#9e9e9e;border-color:#c8c8c8}.focused{border-color:#1479c6}.errormsg{display:flex;justify-content:center;align-items:center;float:left;margin-bottom:16px;box-sizing:border-box;background-color:transparent;height:26px;font-size:14px;border-radius:none;z-index:2;color:#DC0000}.errormsg .validationicon{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#DC0000}.danger{color:#DC0000}.optional{color:#757575;font-weight:normal}:host{display:block}.spacing{margin-bottom:16px}.errorstate{border-color:#DC0000}.icon-right{margin-top:5px;margin-right:4px}.icon-left{margin-top:5px;margin-left:4px}";
 
 const TttxInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/tttx-loading-spinner.d.ts

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

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

@@ -0,0 +1,43 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const tttxLoadingSpinnerCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.spinner-container{position:absolute}.loading-box{display:flex;align-items:center;justify-content:center}.loading-text{font-size:16px;font-weight:400;padding-top:10px;text-align:center}.spinner{border:solid #1479c6;border-bottom-color:#D5D5D5;border-radius:50%;position:relative;box-sizing:border-box;animation:rotation 1s linear infinite}.spinner.small{height:20px;width:20px;border-width:4px}.spinner.large{height:60px;width:60px;border-width:8px}@keyframes rotation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";
+
+const TttxLoadingSpinner$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.loadingMessage = undefined;
+    this.size = 'large';
+  }
+  renderLoadingMessage() {
+    if (!this.loadingMessage)
+      return '';
+    return h("div", { class: 'loading-text' }, "Loading, please wait...");
+  }
+  render() {
+    return h("div", { class: 'spinner-container' }, h("div", { class: "loading-box" }, h("span", { class: `spinner ${this.size}` })), this.renderLoadingMessage());
+  }
+  static get style() { return tttxLoadingSpinnerCss; }
+}, [1, "tttx-loading-spinner", {
+    "loadingMessage": [1028, "loading-message"],
+    "size": [1025]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tttx-loading-spinner"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tttx-loading-spinner":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TttxLoadingSpinner$1);
+      }
+      break;
+  } });
+}
+
+const TttxLoadingSpinner = TttxLoadingSpinner$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TttxLoadingSpinner, defineCustomElement };

package/dist/esm/loader.js

@@ -11,7 +11,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["tttx-input",[[1,"tttx-input",{"label":[1],"valid":[4],"showerrormsg":[4],"errormsg":[1],"value":[1025],"type":[1],"placeholder":[1],"pattern":[1],"iconleft":[1],"iconright":[1],"required":[4],"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",{"dataAttribute":[1,"data-attribute"],"functionAttribute":[1,"function-attribute"]}]]],["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-input",[[1,"tttx-input",{"label":[1],"valid":[4],"showerrormsg":[4],"errormsg":[1],"value":[1025],"type":[1],"placeholder":[1],"pattern":[1],"iconleft":[1],"iconright":[1],"required":[4],"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",{"dataAttribute":[1,"data-attribute"],"functionAttribute":[1,"function-attribute"]}]]],["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);
   });
 };
 

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-9654537d.js';
 
-const tttxCheckboxCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\";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}.field{clear:both}.container{display:flex;flex-wrap:wrap;box-sizing:border-box;height:36px;border:1px solid #c8c8c8;border-radius:4px}.icon-left,.icon-right{flex-basis:24px}.icon-left span,.icon-right span{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left span{margin-left:4px}.icon-right span{margin-right:4px}.input{flex-grow:1;border:none;outline:none;font-size:16px;padding:8px 16px;background-color:transparent}.iconleft .input{padding-left:4px}.iconright .input{padding-right:4px}.label{display:block;font-size:16px;height:18px;font-weight:600;color:#212121;font-size:16px;margin-bottom:4px;z-index:1}.disabled{background:#f0f0f0;color:#9e9e9e;border-color:#c8c8c8}.focused{border-color:#1479c6}.errormsg{height:16px;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;color:white;border-radius:none;z-index:2;color:#DC0000}.errormsg .validationicon{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#DC0000}.danger{color:#DC0000}.optional{color:#757575;font-weight:normal}:host{display:block}.spacing{margin-bottom:16px}";
+const tttxCheckboxCss = ".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}.field{clear:both}.container{display:flex;flex-wrap:wrap;box-sizing:border-box;height:36px;border:1px solid #c8c8c8;border-radius:4px}.icon-left,.icon-right{flex-basis:24px}.icon-left span,.icon-right span{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left span{margin-left:4px}.icon-right span{margin-right:4px}.input{flex-grow:1;border:none;outline:none;font-size:16px;padding:8px 16px;background-color:transparent}.iconleft .input{padding-left:4px}.iconright .input{padding-right:4px}.label{display:block;height:18px;font-weight:600;color:#212121;font-size:16px;margin-bottom:4px;z-index:1}.disabled{background:#f0f0f0;color:#9e9e9e;border-color:#c8c8c8}.focused{border-color:#1479c6}.errormsg{display:flex;justify-content:center;align-items:center;float:left;margin-bottom:16px;box-sizing:border-box;background-color:transparent;height:26px;font-size:14px;border-radius:none;z-index:2;color:#DC0000}.errormsg .validationicon{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#DC0000}.danger{color:#DC0000}.optional{color:#757575;font-weight:normal}:host{display:block}.spacing{margin-bottom:16px}";
 
 const TttxCheckbox = class {
   constructor(hostRef) {

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

@@ -1797,7 +1797,7 @@ var createPopper = /*#__PURE__*/popperGenerator({
   defaultModifiers: defaultModifiers
 }); // eslint-disable-next-line import/no-unused-modules
 
-const tttxIconCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\";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:block}.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}.orange{color:#F59500}.blue{color:#1479c6}.green{color:#A2BB31}.gray{color:#757575}.black{color:#212121}.clickable{cursor:pointer}";
+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:block}.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}.orange{color:#F59500}.blue{color:#1479c6}.green{color:#A2BB31}.gray{color:#757575}.black{color:#212121}.white{color:white}.clickable{cursor:pointer}";
 
 const TttxIcon = class {
   constructor(hostRef) {

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-9654537d.js';
 
-const tttxInputCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\";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}.field{clear:both}.container{display:flex;flex-wrap:wrap;box-sizing:border-box;height:36px;border:1px solid #c8c8c8;border-radius:4px}.icon-left,.icon-right{flex-basis:24px}.icon-left span,.icon-right span{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left span{margin-left:4px}.icon-right span{margin-right:4px}.input{flex-grow:1;border:none;outline:none;font-size:16px;padding:8px 16px;background-color:transparent}.iconleft .input{padding-left:4px}.iconright .input{padding-right:4px}.label{display:block;font-size:16px;height:18px;font-weight:600;color:#212121;font-size:16px;margin-bottom:4px;z-index:1}.disabled{background:#f0f0f0;color:#9e9e9e;border-color:#c8c8c8}.focused{border-color:#1479c6}.errormsg{height:16px;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;color:white;border-radius:none;z-index:2;color:#DC0000}.errormsg .validationicon{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#DC0000}.danger{color:#DC0000}.optional{color:#757575;font-weight:normal}:host{display:block}.spacing{margin-bottom:16px}.errorstate{border-color:#DC0000}.icon-right{margin-top:5px;margin-right:4px}.icon-left{margin-top:5px;margin-left:4px}";
+const tttxInputCss = ".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}.field{clear:both}.container{display:flex;flex-wrap:wrap;box-sizing:border-box;height:36px;border:1px solid #c8c8c8;border-radius:4px}.icon-left,.icon-right{flex-basis:24px}.icon-left span,.icon-right span{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left span{margin-left:4px}.icon-right span{margin-right:4px}.input{flex-grow:1;border:none;outline:none;font-size:16px;padding:8px 16px;background-color:transparent}.iconleft .input{padding-left:4px}.iconright .input{padding-right:4px}.label{display:block;height:18px;font-weight:600;color:#212121;font-size:16px;margin-bottom:4px;z-index:1}.disabled{background:#f0f0f0;color:#9e9e9e;border-color:#c8c8c8}.focused{border-color:#1479c6}.errormsg{display:flex;justify-content:center;align-items:center;float:left;margin-bottom:16px;box-sizing:border-box;background-color:transparent;height:26px;font-size:14px;border-radius:none;z-index:2;color:#DC0000}.errormsg .validationicon{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#DC0000}.danger{color:#DC0000}.optional{color:#757575;font-weight:normal}:host{display:block}.spacing{margin-bottom:16px}.errorstate{border-color:#DC0000}.icon-right{margin-top:5px;margin-right:4px}.icon-left{margin-top:5px;margin-left:4px}";
 
 const TttxInput = class {
   constructor(hostRef) {

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

@@ -0,0 +1,22 @@
+import { r as registerInstance, h } from './index-9654537d.js';
+
+const tttxLoadingSpinnerCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.spinner-container{position:absolute}.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", { class: 'spinner-container' }, 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.js

@@ -14,5 +14,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["tttx-input",[[1,"tttx-input",{"label":[1],"valid":[4],"showerrormsg":[4],"errormsg":[1],"value":[1025],"type":[1],"placeholder":[1],"pattern":[1],"iconleft":[1],"iconright":[1],"required":[4],"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",{"dataAttribute":[1,"data-attribute"],"functionAttribute":[1,"function-attribute"]}]]],["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-input",[[1,"tttx-input",{"label":[1],"valid":[4],"showerrormsg":[4],"errormsg":[1],"value":[1025],"type":[1],"placeholder":[1],"pattern":[1],"iconleft":[1],"iconright":[1],"required":[4],"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",{"dataAttribute":[1,"data-attribute"],"functionAttribute":[1,"function-attribute"]}]]],["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);
 });

package/dist/tttx/p-317b13d3.entry.js

@@ -0,0 +1 @@
+import{r as i,c as o,h as t,H as e}from"./p-b6cc2780.js";const n=class{constructor(t){i(this,t),this.valueChanged=o(this,"valueChanged",7),this.value=void 0,this.label=void 0,this.required=void 0}handleClick(i){const o=i.target;this.value=o.checked,this.valueChanged.emit(o.checked)}render(){return t(e,null,t("div",{class:"field spacing"},this.label&&t("label",{class:"label"},this.label,this.required?"":t("span",{class:"optional"}," (optional)")),t("input",{type:"checkbox",class:"input",onChange:i=>this.handleClick(i),checked:this.value})))}};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}.field{clear:both}.container{display:flex;flex-wrap:wrap;box-sizing:border-box;height:36px;border:1px solid #c8c8c8;border-radius:4px}.icon-left,.icon-right{flex-basis:24px}.icon-left span,.icon-right span{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left span{margin-left:4px}.icon-right span{margin-right:4px}.input{flex-grow:1;border:none;outline:none;font-size:16px;padding:8px 16px;background-color:transparent}.iconleft .input{padding-left:4px}.iconright .input{padding-right:4px}.label{display:block;height:18px;font-weight:600;color:#212121;font-size:16px;margin-bottom:4px;z-index:1}.disabled{background:#f0f0f0;color:#9e9e9e;border-color:#c8c8c8}.focused{border-color:#1479c6}.errormsg{display:flex;justify-content:center;align-items:center;float:left;margin-bottom:16px;box-sizing:border-box;background-color:transparent;height:26px;font-size:14px;border-radius:none;z-index:2;color:#DC0000}.errormsg .validationicon{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#DC0000}.danger{color:#DC0000}.optional{color:#757575;font-weight:normal}:host{display:block}.spacing{margin-bottom:16px}';export{n as tttx_checkbox}

package/dist/tttx/p-3cd7ad04.entry.js

@@ -0,0 +1 @@
+import{r as i,c as t,h as o,H as n}from"./p-b6cc2780.js";const s=class{constructor(o){i(this,o),this.valueChanged=t(this,"valueChanged",7),this.handleFocus=()=>{this.isfocused=!0},this.handleBlur=()=>{this.isfocused=!1},this.isfocused=!1,this.label=void 0,this.valid=void 0,this.showerrormsg=void 0,this.errormsg=void 0,this.value=void 0,this.type="text",this.placeholder=void 0,this.pattern=void 0,this.iconleft=void 0,this.iconright=void 0,this.required=void 0}handleChange(i){const t=i.target;this.value=t.value,this.valueChanged.emit(t.value)}render(){const i=["container",this.showerrormsg?"errorstate":"",this.isfocused?"focused":"",this.iconleft?"iconleft":""].join(" ");return o(n,null,o("div",{class:"field spacing"},this.label&&o("label",{class:"label"},this.label,this.required?"":o("span",{class:"optional"}," (optional)")),o("div",{class:i},this.iconleft&&o("div",{class:"icon-left"},o("tttx-icon",{icon:this.iconleft,colour:"grey"})),o("input",{class:"input",onFocus:this.handleFocus.bind(this),onBlur:this.handleBlur.bind(this),type:this.type,placeholder:this.placeholder,value:this.value,onInput:i=>this.handleChange(i)}),this.iconright&&o("div",{class:"icon-right"},o("tttx-icon",{icon:this.iconright,colour:"grey"}))),this.showerrormsg&&this.errormsg&&o("div",{class:"errormsg"},o("span",{class:"material-symbols-rounded validationicon"},"warning")," ",this.errormsg)))}};s.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}.field{clear:both}.container{display:flex;flex-wrap:wrap;box-sizing:border-box;height:36px;border:1px solid #c8c8c8;border-radius:4px}.icon-left,.icon-right{flex-basis:24px}.icon-left span,.icon-right span{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left span{margin-left:4px}.icon-right span{margin-right:4px}.input{flex-grow:1;border:none;outline:none;font-size:16px;padding:8px 16px;background-color:transparent}.iconleft .input{padding-left:4px}.iconright .input{padding-right:4px}.label{display:block;height:18px;font-weight:600;color:#212121;font-size:16px;margin-bottom:4px;z-index:1}.disabled{background:#f0f0f0;color:#9e9e9e;border-color:#c8c8c8}.focused{border-color:#1479c6}.errormsg{display:flex;justify-content:center;align-items:center;float:left;margin-bottom:16px;box-sizing:border-box;background-color:transparent;height:26px;font-size:14px;border-radius:none;z-index:2;color:#DC0000}.errormsg .validationicon{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#DC0000}.danger{color:#DC0000}.optional{color:#757575;font-weight:normal}:host{display:block}.spacing{margin-bottom:16px}.errorstate{border-color:#DC0000}.icon-right{margin-top:5px;margin-right:4px}.icon-left{margin-top:5px;margin-left:4px}';export{s as tttx_input}

package/dist/tttx/p-674e2f18.entry.js

@@ -0,0 +1 @@
+import{r as t,h as i}from"./p-b6cc2780.js";const e=class{constructor(i){t(this,i),this.loadingMessage=void 0,this.size="large"}renderLoadingMessage(){return this.loadingMessage?i("div",{class:"loading-text"},"Loading, please wait..."):""}render(){return i("div",{class:"spinner-container"},i("div",{class:"loading-box"},i("span",{class:`spinner ${this.size}`})),this.renderLoadingMessage())}};e.style='.material-symbols-rounded{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24}.spinner-container{position:absolute}.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)}}';export{e as tttx_loading_spinner}

package/dist/tttx/p-f4855113.entry.js

@@ -0,0 +1 @@
+import{r as t,h as n,H as e,g as r}from"./p-b6cc2780.js";var o="top",i="bottom",a="right",f="left",u="auto",c=[o,i,a,f],s="start",l="end",p="viewport",d="popper",v=c.reduce((function(t,n){return t.concat([n+"-"+s,n+"-"+l])}),[]),h=[].concat(c,[u]).reduce((function(t,n){return t.concat([n,n+"-"+s,n+"-"+l])}),[]),b=["beforeRead","read","afterRead","beforeMain","main","afterMain","beforeWrite","write","afterWrite"];function m(t){return t?(t.nodeName||"").toLowerCase():null}function y(t){if(null==t)return window;if("[object Window]"!==t.toString()){var n=t.ownerDocument;return n&&n.defaultView||window}return t}function w(t){return t instanceof y(t).Element||t instanceof Element}function x(t){return t instanceof y(t).HTMLElement||t instanceof HTMLElement}function g(t){return"undefined"!=typeof ShadowRoot&&(t instanceof y(t).ShadowRoot||t instanceof ShadowRoot)}function O(t){return t.split("-")[0]}var j=Math.max,k=Math.min,M=Math.round;function A(){var t=navigator.userAgentData;return null!=t&&t.brands&&Array.isArray(t.brands)?t.brands.map((function(t){return t.brand+"/"+t.version})).join(" "):navigator.userAgent}function L(){return!/^((?!chrome|android).)*safari/i.test(A())}function B(t,n,e){void 0===n&&(n=!1),void 0===e&&(e=!1);var r=t.getBoundingClientRect(),o=1,i=1;n&&x(t)&&(o=t.offsetWidth>0&&M(r.width)/t.offsetWidth||1,i=t.offsetHeight>0&&M(r.height)/t.offsetHeight||1);var a=(w(t)?y(t):window).visualViewport,f=!L()&&e,u=(r.left+(f&&a?a.offsetLeft:0))/o,c=(r.top+(f&&a?a.offsetTop:0))/i,s=r.width/o,l=r.height/i;return{width:s,height:l,top:c,right:u+s,bottom:c+l,left:u,x:u,y:c}}function E(t){var n=B(t),e=t.offsetWidth,r=t.offsetHeight;return Math.abs(n.width-e)<=1&&(e=n.width),Math.abs(n.height-r)<=1&&(r=n.height),{x:t.offsetLeft,y:t.offsetTop,width:e,height:r}}function P(t,n){var e=n.getRootNode&&n.getRootNode();if(t.contains(n))return!0;if(e&&g(e)){var r=n;do{if(r&&t.isSameNode(r))return!0;r=r.parentNode||r.host}while(r)}return!1}function R(t){return y(t).getComputedStyle(t)}function q(t){return["table","td","th"].indexOf(m(t))>=0}function S(t){return((w(t)?t.ownerDocument:t.document)||window.document).documentElement}function W(t){return"html"===m(t)?t:t.assignedSlot||t.parentNode||(g(t)?t.host:null)||S(t)}function z(t){return x(t)&&"fixed"!==R(t).position?t.offsetParent:null}function C(t){for(var n=y(t),e=z(t);e&&q(e)&&"static"===R(e).position;)e=z(e);return e&&("html"===m(e)||"body"===m(e)&&"static"===R(e).position)?n:e||function(t){var n=/firefox/i.test(A());if(/Trident/i.test(A())&&x(t)&&"fixed"===R(t).position)return null;var e=W(t);for(g(e)&&(e=e.host);x(e)&&["html","body"].indexOf(m(e))<0;){var r=R(e);if("none"!==r.transform||"none"!==r.perspective||"paint"===r.contain||-1!==["transform","perspective"].indexOf(r.willChange)||n&&"filter"===r.willChange||n&&r.filter&&"none"!==r.filter)return e;e=e.parentNode}return null}(t)||n}function D(t){return["top","bottom"].indexOf(t)>=0?"x":"y"}function H(t,n,e){return j(t,k(n,e))}function I(t){return Object.assign({},{top:0,right:0,bottom:0,left:0},t)}function T(t,n){return n.reduce((function(n,e){return n[e]=t,n}),{})}function F(t){return t.split("-")[1]}var $={top:"auto",right:"auto",bottom:"auto",left:"auto"};function _(t){var n,e=t.popper,r=t.popperRect,u=t.placement,c=t.variation,s=t.offsets,p=t.position,d=t.gpuAcceleration,v=t.adaptive,h=t.roundOffsets,b=t.isFixed,m=s.x,w=void 0===m?0:m,x=s.y,g=void 0===x?0:x,O="function"==typeof h?h({x:w,y:g}):{x:w,y:g};w=O.x,g=O.y;var j=s.hasOwnProperty("x"),k=s.hasOwnProperty("y"),A=f,L=o,B=window;if(v){var E=C(e),P="clientHeight",q="clientWidth";E===y(e)&&"static"!==R(E=S(e)).position&&"absolute"===p&&(P="scrollHeight",q="scrollWidth"),(u===o||(u===f||u===a)&&c===l)&&(L=i,g-=(b&&E===B&&B.visualViewport?B.visualViewport.height:E[P])-r.height,g*=d?1:-1),u!==f&&(u!==o&&u!==i||c!==l)||(A=a,w-=(b&&E===B&&B.visualViewport?B.visualViewport.width:E[q])-r.width,w*=d?1:-1)}var W,z=Object.assign({position:p},v&&$),D=!0===h?function(t,n){var e=t.y,r=n.devicePixelRatio||1;return{x:M(t.x*r)/r||0,y:M(e*r)/r||0}}({x:w,y:g},y(e)):{x:w,y:g};return w=D.x,g=D.y,Object.assign({},z,d?((W={})[L]=k?"0":"",W[A]=j?"0":"",W.transform=(B.devicePixelRatio||1)<=1?"translate("+w+"px, "+g+"px)":"translate3d("+w+"px, "+g+"px, 0)",W):((n={})[L]=k?g+"px":"",n[A]=j?w+"px":"",n.transform="",n))}var G={passive:!0},U={left:"right",right:"left",bottom:"top",top:"bottom"};function V(t){return t.replace(/left|right|bottom|top/g,(function(t){return U[t]}))}var J={start:"end",end:"start"};function K(t){return t.replace(/start|end/g,(function(t){return J[t]}))}function N(t){var n=y(t);return{scrollLeft:n.pageXOffset,scrollTop:n.pageYOffset}}function Q(t){return B(S(t)).left+N(t).scrollLeft}function X(t){var n=R(t);return/auto|scroll|overlay|hidden/.test(n.overflow+n.overflowY+n.overflowX)}function Y(t){return["html","body","#document"].indexOf(m(t))>=0?t.ownerDocument.body:x(t)&&X(t)?t:Y(W(t))}function Z(t,n){var e;void 0===n&&(n=[]);var r=Y(t),o=r===(null==(e=t.ownerDocument)?void 0:e.body),i=y(r),a=o?[i].concat(i.visualViewport||[],X(r)?r:[]):r,f=n.concat(a);return o?f:f.concat(Z(W(a)))}function tt(t){return Object.assign({},t,{left:t.x,top:t.y,right:t.x+t.width,bottom:t.y+t.height})}function nt(t,n,e){return n===p?tt(function(t,n){var e=y(t),r=S(t),o=e.visualViewport,i=r.clientWidth,a=r.clientHeight,f=0,u=0;if(o){i=o.width,a=o.height;var c=L();(c||!c&&"fixed"===n)&&(f=o.offsetLeft,u=o.offsetTop)}return{width:i,height:a,x:f+Q(t),y:u}}(t,e)):w(n)?function(t,n){var e=B(t,!1,"fixed"===n);return e.top=e.top+t.clientTop,e.left=e.left+t.clientLeft,e.bottom=e.top+t.clientHeight,e.right=e.left+t.clientWidth,e.width=t.clientWidth,e.height=t.clientHeight,e.x=e.left,e.y=e.top,e}(n,e):tt(function(t){var n,e=S(t),r=N(t),o=null==(n=t.ownerDocument)?void 0:n.body,i=j(e.scrollWidth,e.clientWidth,o?o.scrollWidth:0,o?o.clientWidth:0),a=j(e.scrollHeight,e.clientHeight,o?o.scrollHeight:0,o?o.clientHeight:0),f=-r.scrollLeft+Q(t),u=-r.scrollTop;return"rtl"===R(o||e).direction&&(f+=j(e.clientWidth,o?o.clientWidth:0)-i),{width:i,height:a,x:f,y:u}}(S(t)))}function et(t){var n,e=t.reference,r=t.element,u=t.placement,c=u?O(u):null,p=u?F(u):null,d=e.x+e.width/2-r.width/2,v=e.y+e.height/2-r.height/2;switch(c){case o:n={x:d,y:e.y-r.height};break;case i:n={x:d,y:e.y+e.height};break;case a:n={x:e.x+e.width,y:v};break;case f:n={x:e.x-r.width,y:v};break;default:n={x:e.x,y:e.y}}var h=c?D(c):null;if(null!=h){var b="y"===h?"height":"width";switch(p){case s:n[h]=n[h]-(e[b]/2-r[b]/2);break;case l:n[h]=n[h]+(e[b]/2-r[b]/2)}}return n}function rt(t,n){void 0===n&&(n={});var e=n.placement,r=void 0===e?t.placement:e,f=n.strategy,u=void 0===f?t.strategy:f,s=n.boundary,l=void 0===s?"clippingParents":s,v=n.rootBoundary,h=void 0===v?p:v,b=n.elementContext,y=void 0===b?d:b,g=n.altBoundary,O=void 0!==g&&g,M=n.padding,A=void 0===M?0:M,L=I("number"!=typeof A?A:T(A,c)),E=t.rects.popper,q=t.elements[O?y===d?"reference":d:y],z=function(t,n,e,r){var o="clippingParents"===n?function(t){var n=Z(W(t)),e=["absolute","fixed"].indexOf(R(t).position)>=0&&x(t)?C(t):t;return w(e)?n.filter((function(t){return w(t)&&P(t,e)&&"body"!==m(t)})):[]}(t):[].concat(n),i=[].concat(o,[e]),a=i.reduce((function(n,e){var o=nt(t,e,r);return n.top=j(o.top,n.top),n.right=k(o.right,n.right),n.bottom=k(o.bottom,n.bottom),n.left=j(o.left,n.left),n}),nt(t,i[0],r));return a.width=a.right-a.left,a.height=a.bottom-a.top,a.x=a.left,a.y=a.top,a}(w(q)?q:q.contextElement||S(t.elements.popper),l,h,u),D=B(t.elements.reference),H=et({reference:D,element:E,strategy:"absolute",placement:r}),F=tt(Object.assign({},E,H)),$=y===d?F:D,_={top:z.top-$.top+L.top,bottom:$.bottom-z.bottom+L.bottom,left:z.left-$.left+L.left,right:$.right-z.right+L.right},G=t.modifiersData.offset;if(y===d&&G){var U=G[r];Object.keys(_).forEach((function(t){var n=[a,i].indexOf(t)>=0?1:-1,e=[o,i].indexOf(t)>=0?"y":"x";_[t]+=U[e]*n}))}return _}function ot(t,n){void 0===n&&(n={});var e=n.boundary,r=n.rootBoundary,o=n.padding,i=n.flipVariations,a=n.allowedAutoPlacements,f=void 0===a?h:a,u=F(n.placement),s=u?i?v:v.filter((function(t){return F(t)===u})):c,l=s.filter((function(t){return f.indexOf(t)>=0}));0===l.length&&(l=s);var p=l.reduce((function(n,i){return n[i]=rt(t,{placement:i,boundary:e,rootBoundary:r,padding:o})[O(i)],n}),{});return Object.keys(p).sort((function(t,n){return p[t]-p[n]}))}const it={name:"flip",enabled:!0,phase:"main",fn:function(t){var n=t.state,e=t.options,r=t.name;if(!n.modifiersData[r]._skip){for(var c=e.mainAxis,l=void 0===c||c,p=e.altAxis,d=void 0===p||p,v=e.fallbackPlacements,h=e.padding,b=e.boundary,m=e.rootBoundary,y=e.altBoundary,w=e.flipVariations,x=void 0===w||w,g=e.allowedAutoPlacements,j=n.options.placement,k=O(j),M=v||(k!==j&&x?function(t){if(O(t)===u)return[];var n=V(t);return[K(t),n,K(n)]}(j):[V(j)]),A=[j].concat(M).reduce((function(t,e){return t.concat(O(e)===u?ot(n,{placement:e,boundary:b,rootBoundary:m,padding:h,flipVariations:x,allowedAutoPlacements:g}):e)}),[]),L=n.rects.reference,B=n.rects.popper,E=new Map,P=!0,R=A[0],q=0;q<A.length;q++){var S=A[q],W=O(S),z=F(S)===s,C=[o,i].indexOf(W)>=0,D=C?"width":"height",H=rt(n,{placement:S,boundary:b,rootBoundary:m,altBoundary:y,padding:h}),I=C?z?a:f:z?i:o;L[D]>B[D]&&(I=V(I));var T=V(I),$=[];if(l&&$.push(H[W]<=0),d&&$.push(H[I]<=0,H[T]<=0),$.every((function(t){return t}))){R=S,P=!1;break}E.set(S,$)}if(P)for(var _=function(t){var n=A.find((function(n){var e=E.get(n);if(e)return e.slice(0,t).every((function(t){return t}))}));if(n)return R=n,"break"},G=x?3:1;G>0&&"break"!==_(G);G--);n.placement!==R&&(n.modifiersData[r]._skip=!0,n.placement=R,n.reset=!0)}},requiresIfExists:["offset"],data:{_skip:!1}};function at(t,n,e){return void 0===e&&(e={x:0,y:0}),{top:t.top-n.height-e.y,right:t.right-n.width+e.x,bottom:t.bottom-n.height+e.y,left:t.left-n.width-e.x}}function ft(t){return[o,a,i,f].some((function(n){return t[n]>=0}))}function ut(t,n,e){void 0===e&&(e=!1);var r,o,i=x(n),a=x(n)&&function(t){var n=t.getBoundingClientRect(),e=M(n.width)/t.offsetWidth||1,r=M(n.height)/t.offsetHeight||1;return 1!==e||1!==r}(n),f=S(n),u=B(t,a,e),c={scrollLeft:0,scrollTop:0},s={x:0,y:0};return(i||!i&&!e)&&(("body"!==m(n)||X(f))&&(c=(r=n)!==y(r)&&x(r)?{scrollLeft:(o=r).scrollLeft,scrollTop:o.scrollTop}:N(r)),x(n)?((s=B(n,!0)).x+=n.clientLeft,s.y+=n.clientTop):f&&(s.x=Q(f))),{x:u.left+c.scrollLeft-s.x,y:u.top+c.scrollTop-s.y,width:u.width,height:u.height}}function ct(t){var n=new Map,e=new Set,r=[];function o(t){e.add(t.name),[].concat(t.requires||[],t.requiresIfExists||[]).forEach((function(t){if(!e.has(t)){var r=n.get(t);r&&o(r)}})),r.push(t)}return t.forEach((function(t){n.set(t.name,t)})),t.forEach((function(t){e.has(t.name)||o(t)})),r}var st={placement:"bottom",modifiers:[],strategy:"absolute"};function lt(){for(var t=arguments.length,n=new Array(t),e=0;e<t;e++)n[e]=arguments[e];return!n.some((function(t){return!(t&&"function"==typeof t.getBoundingClientRect)}))}function pt(t){void 0===t&&(t={});var n=t.defaultModifiers,e=void 0===n?[]:n,r=t.defaultOptions,o=void 0===r?st:r;return function(t,n,r){void 0===r&&(r=o);var i,a,f={placement:"bottom",orderedModifiers:[],options:Object.assign({},st,o),modifiersData:{},elements:{reference:t,popper:n},attributes:{},styles:{}},u=[],c=!1,s={state:f,setOptions:function(r){var i="function"==typeof r?r(f.options):r;l(),f.options=Object.assign({},o,f.options,i),f.scrollParents={reference:w(t)?Z(t):t.contextElement?Z(t.contextElement):[],popper:Z(n)};var a,c,p=function(t){var n=ct(t);return b.reduce((function(t,e){return t.concat(n.filter((function(t){return t.phase===e})))}),[])}((a=[].concat(e,f.options.modifiers),c=a.reduce((function(t,n){var e=t[n.name];return t[n.name]=e?Object.assign({},e,n,{options:Object.assign({},e.options,n.options),data:Object.assign({},e.data,n.data)}):n,t}),{}),Object.keys(c).map((function(t){return c[t]}))));return f.orderedModifiers=p.filter((function(t){return t.enabled})),f.orderedModifiers.forEach((function(t){var n=t.options,e=t.effect;if("function"==typeof e){var r=e({state:f,name:t.name,instance:s,options:void 0===n?{}:n});u.push(r||function(){})}})),s.update()},forceUpdate:function(){if(!c){var t=f.elements,n=t.reference,e=t.popper;if(lt(n,e)){f.rects={reference:ut(n,C(e),"fixed"===f.options.strategy),popper:E(e)},f.reset=!1,f.placement=f.options.placement,f.orderedModifiers.forEach((function(t){return f.modifiersData[t.name]=Object.assign({},t.data)}));for(var r=0;r<f.orderedModifiers.length;r++)if(!0!==f.reset){var o=f.orderedModifiers[r],i=o.fn,a=o.options;"function"==typeof i&&(f=i({state:f,options:void 0===a?{}:a,name:o.name,instance:s})||f)}else f.reset=!1,r=-1}}},update:(i=function(){return new Promise((function(t){s.forceUpdate(),t(f)}))},function(){return a||(a=new Promise((function(t){Promise.resolve().then((function(){a=void 0,t(i())}))}))),a}),destroy:function(){l(),c=!0}};if(!lt(t,n))return s;function l(){u.forEach((function(t){return t()})),u=[]}return s.setOptions(r).then((function(t){!c&&r.onFirstUpdate&&r.onFirstUpdate(t)})),s}}var dt=pt({defaultModifiers:[{name:"eventListeners",enabled:!0,phase:"write",fn:function(){},effect:function(t){var n=t.state,e=t.instance,r=t.options,o=r.scroll,i=void 0===o||o,a=r.resize,f=void 0===a||a,u=y(n.elements.popper),c=[].concat(n.scrollParents.reference,n.scrollParents.popper);return i&&c.forEach((function(t){t.addEventListener("scroll",e.update,G)})),f&&u.addEventListener("resize",e.update,G),function(){i&&c.forEach((function(t){t.removeEventListener("scroll",e.update,G)})),f&&u.removeEventListener("resize",e.update,G)}},data:{}},{name:"popperOffsets",enabled:!0,phase:"read",fn:function(t){var n=t.state;n.modifiersData[t.name]=et({reference:n.rects.reference,element:n.rects.popper,strategy:"absolute",placement:n.placement})},data:{}},{name:"computeStyles",enabled:!0,phase:"beforeWrite",fn:function(t){var n=t.state,e=t.options,r=e.gpuAcceleration,o=void 0===r||r,i=e.adaptive,a=void 0===i||i,f=e.roundOffsets,u=void 0===f||f,c={placement:O(n.placement),variation:F(n.placement),popper:n.elements.popper,popperRect:n.rects.popper,gpuAcceleration:o,isFixed:"fixed"===n.options.strategy};null!=n.modifiersData.popperOffsets&&(n.styles.popper=Object.assign({},n.styles.popper,_(Object.assign({},c,{offsets:n.modifiersData.popperOffsets,position:n.options.strategy,adaptive:a,roundOffsets:u})))),null!=n.modifiersData.arrow&&(n.styles.arrow=Object.assign({},n.styles.arrow,_(Object.assign({},c,{offsets:n.modifiersData.arrow,position:"absolute",adaptive:!1,roundOffsets:u})))),n.attributes.popper=Object.assign({},n.attributes.popper,{"data-popper-placement":n.placement})},data:{}},{name:"applyStyles",enabled:!0,phase:"write",fn:function(t){var n=t.state;Object.keys(n.elements).forEach((function(t){var e=n.styles[t]||{},r=n.attributes[t]||{},o=n.elements[t];x(o)&&m(o)&&(Object.assign(o.style,e),Object.keys(r).forEach((function(t){var n=r[t];!1===n?o.removeAttribute(t):o.setAttribute(t,!0===n?"":n)})))}))},effect:function(t){var n=t.state,e={popper:{position:n.options.strategy,left:"0",top:"0",margin:"0"},arrow:{position:"absolute"},reference:{}};return Object.assign(n.elements.popper.style,e.popper),n.styles=e,n.elements.arrow&&Object.assign(n.elements.arrow.style,e.arrow),function(){Object.keys(n.elements).forEach((function(t){var r=n.elements[t],o=n.attributes[t]||{},i=Object.keys(n.styles.hasOwnProperty(t)?n.styles[t]:e[t]).reduce((function(t,n){return t[n]="",t}),{});x(r)&&m(r)&&(Object.assign(r.style,i),Object.keys(o).forEach((function(t){r.removeAttribute(t)})))}))}},requires:["computeStyles"]},{name:"offset",enabled:!0,phase:"main",requires:["popperOffsets"],fn:function(t){var n=t.state,e=t.name,r=t.options.offset,i=void 0===r?[0,0]:r,u=h.reduce((function(t,e){return t[e]=function(t,n,e){var r=O(t),i=[f,o].indexOf(r)>=0?-1:1,u="function"==typeof e?e(Object.assign({},n,{placement:t})):e,c=u[0],s=u[1];return c=c||0,s=(s||0)*i,[f,a].indexOf(r)>=0?{x:s,y:c}:{x:c,y:s}}(e,n.rects,i),t}),{}),c=u[n.placement],s=c.y;null!=n.modifiersData.popperOffsets&&(n.modifiersData.popperOffsets.x+=c.x,n.modifiersData.popperOffsets.y+=s),n.modifiersData[e]=u}},it,{name:"preventOverflow",enabled:!0,phase:"main",fn:function(t){var n=t.state,e=t.options,r=t.name,u=e.mainAxis,c=void 0===u||u,l=e.altAxis,p=void 0!==l&&l,d=e.tether,v=void 0===d||d,h=e.tetherOffset,b=void 0===h?0:h,m=rt(n,{boundary:e.boundary,rootBoundary:e.rootBoundary,padding:e.padding,altBoundary:e.altBoundary}),y=O(n.placement),w=F(n.placement),x=!w,g=D(y),M="x"===g?"y":"x",A=n.modifiersData.popperOffsets,L=n.rects.reference,B=n.rects.popper,P="function"==typeof b?b(Object.assign({},n.rects,{placement:n.placement})):b,R="number"==typeof P?{mainAxis:P,altAxis:P}:Object.assign({mainAxis:0,altAxis:0},P),q=n.modifiersData.offset?n.modifiersData.offset[n.placement]:null,S={x:0,y:0};if(A){if(c){var W,z="y"===g?o:f,I="y"===g?i:a,T="y"===g?"height":"width",$=A[g],_=$+m[z],G=$-m[I],U=v?-B[T]/2:0,V=w===s?L[T]:B[T],J=w===s?-B[T]:-L[T],K=n.elements.arrow,N=v&&K?E(K):{width:0,height:0},Q=n.modifiersData["arrow#persistent"]?n.modifiersData["arrow#persistent"].padding:{top:0,right:0,bottom:0,left:0},X=Q[z],Y=Q[I],Z=H(0,L[T],N[T]),tt=x?L[T]/2-U-Z-X-R.mainAxis:V-Z-X-R.mainAxis,nt=x?-L[T]/2+U+Z+Y+R.mainAxis:J+Z+Y+R.mainAxis,et=n.elements.arrow&&C(n.elements.arrow),ot=null!=(W=null==q?void 0:q[g])?W:0,it=$+nt-ot,at=H(v?k(_,$+tt-ot-(et?"y"===g?et.clientTop||0:et.clientLeft||0:0)):_,$,v?j(G,it):G);A[g]=at,S[g]=at-$}if(p){var ft,ut=A[M],ct="y"===M?"height":"width",st=ut+m["x"===g?o:f],lt=ut-m["x"===g?i:a],pt=-1!==[o,f].indexOf(y),dt=null!=(ft=null==q?void 0:q[M])?ft:0,vt=pt?st:ut-L[ct]-B[ct]-dt+R.altAxis,ht=pt?ut+L[ct]+B[ct]-dt-R.altAxis:lt,bt=v&&pt?function(t,n,e){var r=H(t,n,e);return r>e?e:r}(vt,ut,ht):H(v?vt:st,ut,v?ht:lt);A[M]=bt,S[M]=bt-ut}n.modifiersData[r]=S}},requiresIfExists:["offset"]},{name:"arrow",enabled:!0,phase:"main",fn:function(t){var n,e=t.state,r=t.name,u=t.options,s=e.elements.arrow,l=e.modifiersData.popperOffsets,p=O(e.placement),d=D(p),v=[f,a].indexOf(p)>=0?"height":"width";if(s&&l){var h=function(t,n){return I("number"!=typeof(t="function"==typeof t?t(Object.assign({},n.rects,{placement:n.placement})):t)?t:T(t,c))}(u.padding,e),b=E(s),m="y"===d?o:f,y="y"===d?i:a,w=e.rects.reference[v]+e.rects.reference[d]-l[d]-e.rects.popper[v],x=l[d]-e.rects.reference[d],g=C(s),j=g?"y"===d?g.clientHeight||0:g.clientWidth||0:0,k=j/2-b[v]/2+(w/2-x/2),M=H(h[m],k,j-b[v]-h[y]);e.modifiersData[r]=((n={})[d]=M,n.centerOffset=M-k,n)}},effect:function(t){var n=t.state,e=t.options.element,r=void 0===e?"[data-popper-arrow]":e;null!=r&&("string"!=typeof r||(r=n.elements.popper.querySelector(r)))&&P(n.elements.popper,r)&&(n.elements.arrow=r)},requires:["popperOffsets"],requiresIfExists:["preventOverflow"]},{name:"hide",enabled:!0,phase:"main",requiresIfExists:["preventOverflow"],fn:function(t){var n=t.state,e=t.name,r=n.rects.reference,o=n.rects.popper,i=n.modifiersData.preventOverflow,a=rt(n,{elementContext:"reference"}),f=rt(n,{altBoundary:!0}),u=at(a,r),c=at(f,o,i),s=ft(u),l=ft(c);n.modifiersData[e]={referenceClippingOffsets:u,popperEscapeOffsets:c,isReferenceHidden:s,hasPopperEscaped:l},n.attributes.popper=Object.assign({},n.attributes.popper,{"data-popper-reference-hidden":s,"data-popper-escaped":l})}}]});const vt=class{constructor(n){t(this,n),this.icon=void 0,this.colour="grey"}handleDocumentClick(t){t.composedPath().includes(this.referenceElement)||(this.popperElement&&this.popperElement.removeAttribute("data-show"),this.popperInstance&&this.popperInstance.update())}componentWillLoad(){this.hasPopoverSlot=!!this.el.querySelector('[slot="popover"]')}componentDidLoad(){this.popperInstance=dt(this.referenceElement,this.popperElement,{placement:"top",modifiers:[{name:"flip",options:{fallbackPlacements:["bottom"]}},{name:"offset",options:{offset:[0,12]}}]})}disconnectedCallback(){this.popperInstance.destroy()}render(){return n(e,null,n("span",{onClick:()=>{this.popperElement&&this.popperElement.setAttribute("data-show",""),this.popperInstance&&this.popperInstance.update()},ref:t=>this.referenceElement=t,class:`material-symbols-rounded ${this.colour?this.colour:""} ${this.hasPopoverSlot?"clickable":""}`},this.icon),this.hasPopoverSlot&&n("div",{ref:t=>this.popperElement=t,class:"tooltip"},n("slot",{name:"popover"}),n("div",{class:"arrow","data-popper-arrow":!0})))}get el(){return r(this)}};vt.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:block}.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}.orange{color:#F59500}.blue{color:#1479c6}.green{color:#A2BB31}.gray{color:#757575}.black{color:#212121}.white{color:white}.clickable{cursor:pointer}';export{vt as tttx_icon}

package/dist/tttx/tttx.esm.js

@@ -1 +1 @@
-import{p as t,b as e}from"./p-b6cc2780.js";export{s as setNonce}from"./p-b6cc2780.js";(()=>{const e=import.meta.url,o={};return""!==e&&(o.resourcesUrl=new URL(".",e).href),t(o)})().then((t=>e([["p-8e977b49",[[1,"tttx-input",{label:[1],valid:[4],showerrormsg:[4],errormsg:[1],value:[1025],type:[1],placeholder:[1],pattern:[1],iconleft:[1],iconright:[1],required:[4],isfocused:[32]}]]],["p-3cb692d6",[[1,"tttx-button",{fontColor:[1,"font-color"],buttonStyle:[1,"button-style"]},[[0,"clickEvent","onClicked"]]]]],["p-ece1c722",[[1,"tttx-checkbox",{value:[4],label:[1],required:[4]}]]],["p-f30a0e84",[[1,"tttx-form",{dataAttribute:[1,"data-attribute"],functionAttribute:[1,"function-attribute"]}]]],["p-1884203f",[[1,"tttx-popover-content",{header:[1],body:[1],linkcontext:[1],linktext:[1]}]]],["p-beb8e3fc",[[1,"tttx-icon",{icon:[1],colour:[1]},[[4,"click","handleDocumentClick"]]]]]],t)));
+import{p as t,b as e}from"./p-b6cc2780.js";export{s as setNonce}from"./p-b6cc2780.js";(()=>{const e=import.meta.url,o={};return""!==e&&(o.resourcesUrl=new URL(".",e).href),t(o)})().then((t=>e([["p-3cd7ad04",[[1,"tttx-input",{label:[1],valid:[4],showerrormsg:[4],errormsg:[1],value:[1025],type:[1],placeholder:[1],pattern:[1],iconleft:[1],iconright:[1],required:[4],isfocused:[32]}]]],["p-3cb692d6",[[1,"tttx-button",{fontColor:[1,"font-color"],buttonStyle:[1,"button-style"]},[[0,"clickEvent","onClicked"]]]]],["p-317b13d3",[[1,"tttx-checkbox",{value:[4],label:[1],required:[4]}]]],["p-f30a0e84",[[1,"tttx-form",{dataAttribute:[1,"data-attribute"],functionAttribute:[1,"function-attribute"]}]]],["p-674e2f18",[[1,"tttx-loading-spinner",{loadingMessage:[1028,"loading-message"],size:[1025]}]]],["p-1884203f",[[1,"tttx-popover-content",{header:[1],body:[1],linkcontext:[1],linktext:[1]}]]],["p-f4855113",[[1,"tttx-icon",{icon:[1],colour:[1]},[[4,"click","handleDocumentClick"]]]]]],t)));

package/dist/types/components/atoms/tttx-loading-spinner/tttx-loading-spinner.d.ts

@@ -0,0 +1,6 @@
+export declare class TttxLoadingSpinner {
+  loadingMessage: boolean;
+  size: 'small' | 'large';
+  renderLoadingMessage(): any;
+  render(): any;
+}

package/dist/types/components/atoms/tttx-loading-spinner/tttx-loading-spinner.stories.d.ts

@@ -0,0 +1,17 @@
+declare const _default: {
+  title: string;
+  component: string;
+  argTypes: {
+    loadingMessage: {
+      control: string;
+    };
+    size: {
+      control: {
+        type: string;
+      };
+      options: string[];
+    };
+  };
+};
+export default _default;
+export declare const Example: (args: any) => string;

package/dist/types/components.d.ts

@@ -36,6 +36,10 @@ export namespace Components {
         "valid": boolean;
         "value": string;
     }
+    interface TttxLoadingSpinner {
+        "loadingMessage": boolean;
+        "size": 'small' | 'large';
+    }
     interface TttxPopoverContent {
         "body": string;
         "header": string;
@@ -90,6 +94,12 @@ declare global {
         prototype: HTMLTttxInputElement;
         new (): HTMLTttxInputElement;
     };
+    interface HTMLTttxLoadingSpinnerElement extends Components.TttxLoadingSpinner, HTMLStencilElement {
+    }
+    var HTMLTttxLoadingSpinnerElement: {
+        prototype: HTMLTttxLoadingSpinnerElement;
+        new (): HTMLTttxLoadingSpinnerElement;
+    };
     interface HTMLTttxPopoverContentElement extends Components.TttxPopoverContent, HTMLStencilElement {
     }
     var HTMLTttxPopoverContentElement: {
@@ -102,6 +112,7 @@ declare global {
         "tttx-form": HTMLTttxFormElement;
         "tttx-icon": HTMLTttxIconElement;
         "tttx-input": HTMLTttxInputElement;
+        "tttx-loading-spinner": HTMLTttxLoadingSpinnerElement;
         "tttx-popover-content": HTMLTttxPopoverContentElement;
     }
 }
@@ -140,6 +151,10 @@ declare namespace LocalJSX {
         "valid"?: boolean;
         "value"?: string;
     }
+    interface TttxLoadingSpinner {
+        "loadingMessage"?: boolean;
+        "size"?: 'small' | 'large';
+    }
     interface TttxPopoverContent {
         "body"?: string;
         "header"?: string;
@@ -152,6 +167,7 @@ declare namespace LocalJSX {
         "tttx-form": TttxForm;
         "tttx-icon": TttxIcon;
         "tttx-input": TttxInput;
+        "tttx-loading-spinner": TttxLoadingSpinner;
         "tttx-popover-content": TttxPopoverContent;
     }
 }
@@ -164,6 +180,7 @@ declare module "@stencil/core" {
             "tttx-form": LocalJSX.TttxForm & JSXBase.HTMLAttributes<HTMLTttxFormElement>;
             "tttx-icon": LocalJSX.TttxIcon & JSXBase.HTMLAttributes<HTMLTttxIconElement>;
             "tttx-input": LocalJSX.TttxInput & JSXBase.HTMLAttributes<HTMLTttxInputElement>;
+            "tttx-loading-spinner": LocalJSX.TttxLoadingSpinner & JSXBase.HTMLAttributes<HTMLTttxLoadingSpinnerElement>;
             "tttx-popover-content": LocalJSX.TttxPopoverContent & JSXBase.HTMLAttributes<HTMLTttxPopoverContentElement>;
         }
     }

package/package.json

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

package/dist/tttx/p-8e977b49.entry.js

@@ -1 +0,0 @@
-import{r as i,c as t,h as o,H as n}from"./p-b6cc2780.js";const e=class{constructor(o){i(this,o),this.valueChanged=t(this,"valueChanged",7),this.handleFocus=()=>{this.isfocused=!0},this.handleBlur=()=>{this.isfocused=!1},this.isfocused=!1,this.label=void 0,this.valid=void 0,this.showerrormsg=void 0,this.errormsg=void 0,this.value=void 0,this.type="text",this.placeholder=void 0,this.pattern=void 0,this.iconleft=void 0,this.iconright=void 0,this.required=void 0}handleChange(i){const t=i.target;this.value=t.value,this.valueChanged.emit(t.value)}render(){const i=["container",this.showerrormsg?"errorstate":"",this.isfocused?"focused":"",this.iconleft?"iconleft":""].join(" ");return o(n,null,o("div",{class:"field spacing"},this.label&&o("label",{class:"label"},this.label,this.required?"":o("span",{class:"optional"}," (optional)")),o("div",{class:i},this.iconleft&&o("div",{class:"icon-left"},o("tttx-icon",{icon:this.iconleft,colour:"grey"})),o("input",{class:"input",onFocus:this.handleFocus.bind(this),onBlur:this.handleBlur.bind(this),type:this.type,placeholder:this.placeholder,value:this.value,onInput:i=>this.handleChange(i)}),this.iconright&&o("div",{class:"icon-right"},o("tttx-icon",{icon:this.iconright,colour:"grey"}))),this.showerrormsg&&this.errormsg&&o("div",{class:"errormsg"},o("span",{class:"material-symbols-rounded validationicon"},"warning")," ",this.errormsg)))}};e.style='.material-symbols-rounded{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24}.material-symbols-rounded{font-family:"Material Symbols Rounded";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}.field{clear:both}.container{display:flex;flex-wrap:wrap;box-sizing:border-box;height:36px;border:1px solid #c8c8c8;border-radius:4px}.icon-left,.icon-right{flex-basis:24px}.icon-left span,.icon-right span{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left span{margin-left:4px}.icon-right span{margin-right:4px}.input{flex-grow:1;border:none;outline:none;font-size:16px;padding:8px 16px;background-color:transparent}.iconleft .input{padding-left:4px}.iconright .input{padding-right:4px}.label{display:block;font-size:16px;height:18px;font-weight:600;color:#212121;font-size:16px;margin-bottom:4px;z-index:1}.disabled{background:#f0f0f0;color:#9e9e9e;border-color:#c8c8c8}.focused{border-color:#1479c6}.errormsg{height:16px;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;color:white;border-radius:none;z-index:2;color:#DC0000}.errormsg .validationicon{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#DC0000}.danger{color:#DC0000}.optional{color:#757575;font-weight:normal}:host{display:block}.spacing{margin-bottom:16px}.errorstate{border-color:#DC0000}.icon-right{margin-top:5px;margin-right:4px}.icon-left{margin-top:5px;margin-left:4px}';export{e as tttx_input}

package/dist/tttx/p-beb8e3fc.entry.js

@@ -1 +0,0 @@
-import{r as t,h as n,H as e,g as r}from"./p-b6cc2780.js";var o="top",i="bottom",a="right",f="left",u="auto",c=[o,i,a,f],s="start",l="end",p="viewport",d="popper",v=c.reduce((function(t,n){return t.concat([n+"-"+s,n+"-"+l])}),[]),h=[].concat(c,[u]).reduce((function(t,n){return t.concat([n,n+"-"+s,n+"-"+l])}),[]),b=["beforeRead","read","afterRead","beforeMain","main","afterMain","beforeWrite","write","afterWrite"];function m(t){return t?(t.nodeName||"").toLowerCase():null}function y(t){if(null==t)return window;if("[object Window]"!==t.toString()){var n=t.ownerDocument;return n&&n.defaultView||window}return t}function x(t){return t instanceof y(t).Element||t instanceof Element}function w(t){return t instanceof y(t).HTMLElement||t instanceof HTMLElement}function g(t){return"undefined"!=typeof ShadowRoot&&(t instanceof y(t).ShadowRoot||t instanceof ShadowRoot)}function O(t){return t.split("-")[0]}var j=Math.max,k=Math.min,M=Math.round;function A(){var t=navigator.userAgentData;return null!=t&&t.brands&&Array.isArray(t.brands)?t.brands.map((function(t){return t.brand+"/"+t.version})).join(" "):navigator.userAgent}function L(){return!/^((?!chrome|android).)*safari/i.test(A())}function B(t,n,e){void 0===n&&(n=!1),void 0===e&&(e=!1);var r=t.getBoundingClientRect(),o=1,i=1;n&&w(t)&&(o=t.offsetWidth>0&&M(r.width)/t.offsetWidth||1,i=t.offsetHeight>0&&M(r.height)/t.offsetHeight||1);var a=(x(t)?y(t):window).visualViewport,f=!L()&&e,u=(r.left+(f&&a?a.offsetLeft:0))/o,c=(r.top+(f&&a?a.offsetTop:0))/i,s=r.width/o,l=r.height/i;return{width:s,height:l,top:c,right:u+s,bottom:c+l,left:u,x:u,y:c}}function E(t){var n=B(t),e=t.offsetWidth,r=t.offsetHeight;return Math.abs(n.width-e)<=1&&(e=n.width),Math.abs(n.height-r)<=1&&(r=n.height),{x:t.offsetLeft,y:t.offsetTop,width:e,height:r}}function P(t,n){var e=n.getRootNode&&n.getRootNode();if(t.contains(n))return!0;if(e&&g(e)){var r=n;do{if(r&&t.isSameNode(r))return!0;r=r.parentNode||r.host}while(r)}return!1}function R(t){return y(t).getComputedStyle(t)}function q(t){return["table","td","th"].indexOf(m(t))>=0}function S(t){return((x(t)?t.ownerDocument:t.document)||window.document).documentElement}function W(t){return"html"===m(t)?t:t.assignedSlot||t.parentNode||(g(t)?t.host:null)||S(t)}function z(t){return w(t)&&"fixed"!==R(t).position?t.offsetParent:null}function C(t){for(var n=y(t),e=z(t);e&&q(e)&&"static"===R(e).position;)e=z(e);return e&&("html"===m(e)||"body"===m(e)&&"static"===R(e).position)?n:e||function(t){var n=/firefox/i.test(A());if(/Trident/i.test(A())&&w(t)&&"fixed"===R(t).position)return null;var e=W(t);for(g(e)&&(e=e.host);w(e)&&["html","body"].indexOf(m(e))<0;){var r=R(e);if("none"!==r.transform||"none"!==r.perspective||"paint"===r.contain||-1!==["transform","perspective"].indexOf(r.willChange)||n&&"filter"===r.willChange||n&&r.filter&&"none"!==r.filter)return e;e=e.parentNode}return null}(t)||n}function D(t){return["top","bottom"].indexOf(t)>=0?"x":"y"}function H(t,n,e){return j(t,k(n,e))}function I(t){return Object.assign({},{top:0,right:0,bottom:0,left:0},t)}function T(t,n){return n.reduce((function(n,e){return n[e]=t,n}),{})}function F(t){return t.split("-")[1]}var $={top:"auto",right:"auto",bottom:"auto",left:"auto"};function _(t){var n,e=t.popper,r=t.popperRect,u=t.placement,c=t.variation,s=t.offsets,p=t.position,d=t.gpuAcceleration,v=t.adaptive,h=t.roundOffsets,b=t.isFixed,m=s.x,x=void 0===m?0:m,w=s.y,g=void 0===w?0:w,O="function"==typeof h?h({x,y:g}):{x,y:g};x=O.x,g=O.y;var j=s.hasOwnProperty("x"),k=s.hasOwnProperty("y"),A=f,L=o,B=window;if(v){var E=C(e),P="clientHeight",q="clientWidth";E===y(e)&&"static"!==R(E=S(e)).position&&"absolute"===p&&(P="scrollHeight",q="scrollWidth"),(u===o||(u===f||u===a)&&c===l)&&(L=i,g-=(b&&E===B&&B.visualViewport?B.visualViewport.height:E[P])-r.height,g*=d?1:-1),u!==f&&(u!==o&&u!==i||c!==l)||(A=a,x-=(b&&E===B&&B.visualViewport?B.visualViewport.width:E[q])-r.width,x*=d?1:-1)}var W,z=Object.assign({position:p},v&&$),D=!0===h?function(t,n){var e=t.y,r=n.devicePixelRatio||1;return{x:M(t.x*r)/r||0,y:M(e*r)/r||0}}({x,y:g},y(e)):{x,y:g};return x=D.x,g=D.y,Object.assign({},z,d?((W={})[L]=k?"0":"",W[A]=j?"0":"",W.transform=(B.devicePixelRatio||1)<=1?"translate("+x+"px, "+g+"px)":"translate3d("+x+"px, "+g+"px, 0)",W):((n={})[L]=k?g+"px":"",n[A]=j?x+"px":"",n.transform="",n))}var G={passive:!0},U={left:"right",right:"left",bottom:"top",top:"bottom"};function V(t){return t.replace(/left|right|bottom|top/g,(function(t){return U[t]}))}var J={start:"end",end:"start"};function K(t){return t.replace(/start|end/g,(function(t){return J[t]}))}function N(t){var n=y(t);return{scrollLeft:n.pageXOffset,scrollTop:n.pageYOffset}}function Q(t){return B(S(t)).left+N(t).scrollLeft}function X(t){var n=R(t);return/auto|scroll|overlay|hidden/.test(n.overflow+n.overflowY+n.overflowX)}function Y(t){return["html","body","#document"].indexOf(m(t))>=0?t.ownerDocument.body:w(t)&&X(t)?t:Y(W(t))}function Z(t,n){var e;void 0===n&&(n=[]);var r=Y(t),o=r===(null==(e=t.ownerDocument)?void 0:e.body),i=y(r),a=o?[i].concat(i.visualViewport||[],X(r)?r:[]):r,f=n.concat(a);return o?f:f.concat(Z(W(a)))}function tt(t){return Object.assign({},t,{left:t.x,top:t.y,right:t.x+t.width,bottom:t.y+t.height})}function nt(t,n,e){return n===p?tt(function(t,n){var e=y(t),r=S(t),o=e.visualViewport,i=r.clientWidth,a=r.clientHeight,f=0,u=0;if(o){i=o.width,a=o.height;var c=L();(c||!c&&"fixed"===n)&&(f=o.offsetLeft,u=o.offsetTop)}return{width:i,height:a,x:f+Q(t),y:u}}(t,e)):x(n)?function(t,n){var e=B(t,!1,"fixed"===n);return e.top=e.top+t.clientTop,e.left=e.left+t.clientLeft,e.bottom=e.top+t.clientHeight,e.right=e.left+t.clientWidth,e.width=t.clientWidth,e.height=t.clientHeight,e.x=e.left,e.y=e.top,e}(n,e):tt(function(t){var n,e=S(t),r=N(t),o=null==(n=t.ownerDocument)?void 0:n.body,i=j(e.scrollWidth,e.clientWidth,o?o.scrollWidth:0,o?o.clientWidth:0),a=j(e.scrollHeight,e.clientHeight,o?o.scrollHeight:0,o?o.clientHeight:0),f=-r.scrollLeft+Q(t),u=-r.scrollTop;return"rtl"===R(o||e).direction&&(f+=j(e.clientWidth,o?o.clientWidth:0)-i),{width:i,height:a,x:f,y:u}}(S(t)))}function et(t){var n,e=t.reference,r=t.element,u=t.placement,c=u?O(u):null,p=u?F(u):null,d=e.x+e.width/2-r.width/2,v=e.y+e.height/2-r.height/2;switch(c){case o:n={x:d,y:e.y-r.height};break;case i:n={x:d,y:e.y+e.height};break;case a:n={x:e.x+e.width,y:v};break;case f:n={x:e.x-r.width,y:v};break;default:n={x:e.x,y:e.y}}var h=c?D(c):null;if(null!=h){var b="y"===h?"height":"width";switch(p){case s:n[h]=n[h]-(e[b]/2-r[b]/2);break;case l:n[h]=n[h]+(e[b]/2-r[b]/2)}}return n}function rt(t,n){void 0===n&&(n={});var e=n.placement,r=void 0===e?t.placement:e,f=n.strategy,u=void 0===f?t.strategy:f,s=n.boundary,l=void 0===s?"clippingParents":s,v=n.rootBoundary,h=void 0===v?p:v,b=n.elementContext,y=void 0===b?d:b,g=n.altBoundary,O=void 0!==g&&g,M=n.padding,A=void 0===M?0:M,L=I("number"!=typeof A?A:T(A,c)),E=t.rects.popper,q=t.elements[O?y===d?"reference":d:y],z=function(t,n,e,r){var o="clippingParents"===n?function(t){var n=Z(W(t)),e=["absolute","fixed"].indexOf(R(t).position)>=0&&w(t)?C(t):t;return x(e)?n.filter((function(t){return x(t)&&P(t,e)&&"body"!==m(t)})):[]}(t):[].concat(n),i=[].concat(o,[e]),a=i.reduce((function(n,e){var o=nt(t,e,r);return n.top=j(o.top,n.top),n.right=k(o.right,n.right),n.bottom=k(o.bottom,n.bottom),n.left=j(o.left,n.left),n}),nt(t,i[0],r));return a.width=a.right-a.left,a.height=a.bottom-a.top,a.x=a.left,a.y=a.top,a}(x(q)?q:q.contextElement||S(t.elements.popper),l,h,u),D=B(t.elements.reference),H=et({reference:D,element:E,strategy:"absolute",placement:r}),F=tt(Object.assign({},E,H)),$=y===d?F:D,_={top:z.top-$.top+L.top,bottom:$.bottom-z.bottom+L.bottom,left:z.left-$.left+L.left,right:$.right-z.right+L.right},G=t.modifiersData.offset;if(y===d&&G){var U=G[r];Object.keys(_).forEach((function(t){var n=[a,i].indexOf(t)>=0?1:-1,e=[o,i].indexOf(t)>=0?"y":"x";_[t]+=U[e]*n}))}return _}function ot(t,n){void 0===n&&(n={});var e=n.boundary,r=n.rootBoundary,o=n.padding,i=n.flipVariations,a=n.allowedAutoPlacements,f=void 0===a?h:a,u=F(n.placement),s=u?i?v:v.filter((function(t){return F(t)===u})):c,l=s.filter((function(t){return f.indexOf(t)>=0}));0===l.length&&(l=s);var p=l.reduce((function(n,i){return n[i]=rt(t,{placement:i,boundary:e,rootBoundary:r,padding:o})[O(i)],n}),{});return Object.keys(p).sort((function(t,n){return p[t]-p[n]}))}const it={name:"flip",enabled:!0,phase:"main",fn:function(t){var n=t.state,e=t.options,r=t.name;if(!n.modifiersData[r]._skip){for(var c=e.mainAxis,l=void 0===c||c,p=e.altAxis,d=void 0===p||p,v=e.fallbackPlacements,h=e.padding,b=e.boundary,m=e.rootBoundary,y=e.altBoundary,x=e.flipVariations,w=void 0===x||x,g=e.allowedAutoPlacements,j=n.options.placement,k=O(j),M=v||(k!==j&&w?function(t){if(O(t)===u)return[];var n=V(t);return[K(t),n,K(n)]}(j):[V(j)]),A=[j].concat(M).reduce((function(t,e){return t.concat(O(e)===u?ot(n,{placement:e,boundary:b,rootBoundary:m,padding:h,flipVariations:w,allowedAutoPlacements:g}):e)}),[]),L=n.rects.reference,B=n.rects.popper,E=new Map,P=!0,R=A[0],q=0;q<A.length;q++){var S=A[q],W=O(S),z=F(S)===s,C=[o,i].indexOf(W)>=0,D=C?"width":"height",H=rt(n,{placement:S,boundary:b,rootBoundary:m,altBoundary:y,padding:h}),I=C?z?a:f:z?i:o;L[D]>B[D]&&(I=V(I));var T=V(I),$=[];if(l&&$.push(H[W]<=0),d&&$.push(H[I]<=0,H[T]<=0),$.every((function(t){return t}))){R=S,P=!1;break}E.set(S,$)}if(P)for(var _=function(t){var n=A.find((function(n){var e=E.get(n);if(e)return e.slice(0,t).every((function(t){return t}))}));if(n)return R=n,"break"},G=w?3:1;G>0&&"break"!==_(G);G--);n.placement!==R&&(n.modifiersData[r]._skip=!0,n.placement=R,n.reset=!0)}},requiresIfExists:["offset"],data:{_skip:!1}};function at(t,n,e){return void 0===e&&(e={x:0,y:0}),{top:t.top-n.height-e.y,right:t.right-n.width+e.x,bottom:t.bottom-n.height+e.y,left:t.left-n.width-e.x}}function ft(t){return[o,a,i,f].some((function(n){return t[n]>=0}))}function ut(t,n,e){void 0===e&&(e=!1);var r,o,i=w(n),a=w(n)&&function(t){var n=t.getBoundingClientRect(),e=M(n.width)/t.offsetWidth||1,r=M(n.height)/t.offsetHeight||1;return 1!==e||1!==r}(n),f=S(n),u=B(t,a,e),c={scrollLeft:0,scrollTop:0},s={x:0,y:0};return(i||!i&&!e)&&(("body"!==m(n)||X(f))&&(c=(r=n)!==y(r)&&w(r)?{scrollLeft:(o=r).scrollLeft,scrollTop:o.scrollTop}:N(r)),w(n)?((s=B(n,!0)).x+=n.clientLeft,s.y+=n.clientTop):f&&(s.x=Q(f))),{x:u.left+c.scrollLeft-s.x,y:u.top+c.scrollTop-s.y,width:u.width,height:u.height}}function ct(t){var n=new Map,e=new Set,r=[];function o(t){e.add(t.name),[].concat(t.requires||[],t.requiresIfExists||[]).forEach((function(t){if(!e.has(t)){var r=n.get(t);r&&o(r)}})),r.push(t)}return t.forEach((function(t){n.set(t.name,t)})),t.forEach((function(t){e.has(t.name)||o(t)})),r}var st={placement:"bottom",modifiers:[],strategy:"absolute"};function lt(){for(var t=arguments.length,n=new Array(t),e=0;e<t;e++)n[e]=arguments[e];return!n.some((function(t){return!(t&&"function"==typeof t.getBoundingClientRect)}))}function pt(t){void 0===t&&(t={});var n=t.defaultModifiers,e=void 0===n?[]:n,r=t.defaultOptions,o=void 0===r?st:r;return function(t,n,r){void 0===r&&(r=o);var i,a,f={placement:"bottom",orderedModifiers:[],options:Object.assign({},st,o),modifiersData:{},elements:{reference:t,popper:n},attributes:{},styles:{}},u=[],c=!1,s={state:f,setOptions:function(r){var i="function"==typeof r?r(f.options):r;l(),f.options=Object.assign({},o,f.options,i),f.scrollParents={reference:x(t)?Z(t):t.contextElement?Z(t.contextElement):[],popper:Z(n)};var a,c,p=function(t){var n=ct(t);return b.reduce((function(t,e){return t.concat(n.filter((function(t){return t.phase===e})))}),[])}((a=[].concat(e,f.options.modifiers),c=a.reduce((function(t,n){var e=t[n.name];return t[n.name]=e?Object.assign({},e,n,{options:Object.assign({},e.options,n.options),data:Object.assign({},e.data,n.data)}):n,t}),{}),Object.keys(c).map((function(t){return c[t]}))));return f.orderedModifiers=p.filter((function(t){return t.enabled})),f.orderedModifiers.forEach((function(t){var n=t.options,e=t.effect;if("function"==typeof e){var r=e({state:f,name:t.name,instance:s,options:void 0===n?{}:n});u.push(r||function(){})}})),s.update()},forceUpdate:function(){if(!c){var t=f.elements,n=t.reference,e=t.popper;if(lt(n,e)){f.rects={reference:ut(n,C(e),"fixed"===f.options.strategy),popper:E(e)},f.reset=!1,f.placement=f.options.placement,f.orderedModifiers.forEach((function(t){return f.modifiersData[t.name]=Object.assign({},t.data)}));for(var r=0;r<f.orderedModifiers.length;r++)if(!0!==f.reset){var o=f.orderedModifiers[r],i=o.fn,a=o.options;"function"==typeof i&&(f=i({state:f,options:void 0===a?{}:a,name:o.name,instance:s})||f)}else f.reset=!1,r=-1}}},update:(i=function(){return new Promise((function(t){s.forceUpdate(),t(f)}))},function(){return a||(a=new Promise((function(t){Promise.resolve().then((function(){a=void 0,t(i())}))}))),a}),destroy:function(){l(),c=!0}};if(!lt(t,n))return s;function l(){u.forEach((function(t){return t()})),u=[]}return s.setOptions(r).then((function(t){!c&&r.onFirstUpdate&&r.onFirstUpdate(t)})),s}}var dt=pt({defaultModifiers:[{name:"eventListeners",enabled:!0,phase:"write",fn:function(){},effect:function(t){var n=t.state,e=t.instance,r=t.options,o=r.scroll,i=void 0===o||o,a=r.resize,f=void 0===a||a,u=y(n.elements.popper),c=[].concat(n.scrollParents.reference,n.scrollParents.popper);return i&&c.forEach((function(t){t.addEventListener("scroll",e.update,G)})),f&&u.addEventListener("resize",e.update,G),function(){i&&c.forEach((function(t){t.removeEventListener("scroll",e.update,G)})),f&&u.removeEventListener("resize",e.update,G)}},data:{}},{name:"popperOffsets",enabled:!0,phase:"read",fn:function(t){var n=t.state;n.modifiersData[t.name]=et({reference:n.rects.reference,element:n.rects.popper,strategy:"absolute",placement:n.placement})},data:{}},{name:"computeStyles",enabled:!0,phase:"beforeWrite",fn:function(t){var n=t.state,e=t.options,r=e.gpuAcceleration,o=void 0===r||r,i=e.adaptive,a=void 0===i||i,f=e.roundOffsets,u=void 0===f||f,c={placement:O(n.placement),variation:F(n.placement),popper:n.elements.popper,popperRect:n.rects.popper,gpuAcceleration:o,isFixed:"fixed"===n.options.strategy};null!=n.modifiersData.popperOffsets&&(n.styles.popper=Object.assign({},n.styles.popper,_(Object.assign({},c,{offsets:n.modifiersData.popperOffsets,position:n.options.strategy,adaptive:a,roundOffsets:u})))),null!=n.modifiersData.arrow&&(n.styles.arrow=Object.assign({},n.styles.arrow,_(Object.assign({},c,{offsets:n.modifiersData.arrow,position:"absolute",adaptive:!1,roundOffsets:u})))),n.attributes.popper=Object.assign({},n.attributes.popper,{"data-popper-placement":n.placement})},data:{}},{name:"applyStyles",enabled:!0,phase:"write",fn:function(t){var n=t.state;Object.keys(n.elements).forEach((function(t){var e=n.styles[t]||{},r=n.attributes[t]||{},o=n.elements[t];w(o)&&m(o)&&(Object.assign(o.style,e),Object.keys(r).forEach((function(t){var n=r[t];!1===n?o.removeAttribute(t):o.setAttribute(t,!0===n?"":n)})))}))},effect:function(t){var n=t.state,e={popper:{position:n.options.strategy,left:"0",top:"0",margin:"0"},arrow:{position:"absolute"},reference:{}};return Object.assign(n.elements.popper.style,e.popper),n.styles=e,n.elements.arrow&&Object.assign(n.elements.arrow.style,e.arrow),function(){Object.keys(n.elements).forEach((function(t){var r=n.elements[t],o=n.attributes[t]||{},i=Object.keys(n.styles.hasOwnProperty(t)?n.styles[t]:e[t]).reduce((function(t,n){return t[n]="",t}),{});w(r)&&m(r)&&(Object.assign(r.style,i),Object.keys(o).forEach((function(t){r.removeAttribute(t)})))}))}},requires:["computeStyles"]},{name:"offset",enabled:!0,phase:"main",requires:["popperOffsets"],fn:function(t){var n=t.state,e=t.name,r=t.options.offset,i=void 0===r?[0,0]:r,u=h.reduce((function(t,e){return t[e]=function(t,n,e){var r=O(t),i=[f,o].indexOf(r)>=0?-1:1,u="function"==typeof e?e(Object.assign({},n,{placement:t})):e,c=u[0],s=u[1];return c=c||0,s=(s||0)*i,[f,a].indexOf(r)>=0?{x:s,y:c}:{x:c,y:s}}(e,n.rects,i),t}),{}),c=u[n.placement],s=c.y;null!=n.modifiersData.popperOffsets&&(n.modifiersData.popperOffsets.x+=c.x,n.modifiersData.popperOffsets.y+=s),n.modifiersData[e]=u}},it,{name:"preventOverflow",enabled:!0,phase:"main",fn:function(t){var n=t.state,e=t.options,r=t.name,u=e.mainAxis,c=void 0===u||u,l=e.altAxis,p=void 0!==l&&l,d=e.tether,v=void 0===d||d,h=e.tetherOffset,b=void 0===h?0:h,m=rt(n,{boundary:e.boundary,rootBoundary:e.rootBoundary,padding:e.padding,altBoundary:e.altBoundary}),y=O(n.placement),x=F(n.placement),w=!x,g=D(y),M="x"===g?"y":"x",A=n.modifiersData.popperOffsets,L=n.rects.reference,B=n.rects.popper,P="function"==typeof b?b(Object.assign({},n.rects,{placement:n.placement})):b,R="number"==typeof P?{mainAxis:P,altAxis:P}:Object.assign({mainAxis:0,altAxis:0},P),q=n.modifiersData.offset?n.modifiersData.offset[n.placement]:null,S={x:0,y:0};if(A){if(c){var W,z="y"===g?o:f,I="y"===g?i:a,T="y"===g?"height":"width",$=A[g],_=$+m[z],G=$-m[I],U=v?-B[T]/2:0,V=x===s?L[T]:B[T],J=x===s?-B[T]:-L[T],K=n.elements.arrow,N=v&&K?E(K):{width:0,height:0},Q=n.modifiersData["arrow#persistent"]?n.modifiersData["arrow#persistent"].padding:{top:0,right:0,bottom:0,left:0},X=Q[z],Y=Q[I],Z=H(0,L[T],N[T]),tt=w?L[T]/2-U-Z-X-R.mainAxis:V-Z-X-R.mainAxis,nt=w?-L[T]/2+U+Z+Y+R.mainAxis:J+Z+Y+R.mainAxis,et=n.elements.arrow&&C(n.elements.arrow),ot=null!=(W=null==q?void 0:q[g])?W:0,it=$+nt-ot,at=H(v?k(_,$+tt-ot-(et?"y"===g?et.clientTop||0:et.clientLeft||0:0)):_,$,v?j(G,it):G);A[g]=at,S[g]=at-$}if(p){var ft,ut=A[M],ct="y"===M?"height":"width",st=ut+m["x"===g?o:f],lt=ut-m["x"===g?i:a],pt=-1!==[o,f].indexOf(y),dt=null!=(ft=null==q?void 0:q[M])?ft:0,vt=pt?st:ut-L[ct]-B[ct]-dt+R.altAxis,ht=pt?ut+L[ct]+B[ct]-dt-R.altAxis:lt,bt=v&&pt?function(t,n,e){var r=H(t,n,e);return r>e?e:r}(vt,ut,ht):H(v?vt:st,ut,v?ht:lt);A[M]=bt,S[M]=bt-ut}n.modifiersData[r]=S}},requiresIfExists:["offset"]},{name:"arrow",enabled:!0,phase:"main",fn:function(t){var n,e=t.state,r=t.name,u=t.options,s=e.elements.arrow,l=e.modifiersData.popperOffsets,p=O(e.placement),d=D(p),v=[f,a].indexOf(p)>=0?"height":"width";if(s&&l){var h=function(t,n){return I("number"!=typeof(t="function"==typeof t?t(Object.assign({},n.rects,{placement:n.placement})):t)?t:T(t,c))}(u.padding,e),b=E(s),m="y"===d?o:f,y="y"===d?i:a,x=e.rects.reference[v]+e.rects.reference[d]-l[d]-e.rects.popper[v],w=l[d]-e.rects.reference[d],g=C(s),j=g?"y"===d?g.clientHeight||0:g.clientWidth||0:0,k=j/2-b[v]/2+(x/2-w/2),M=H(h[m],k,j-b[v]-h[y]);e.modifiersData[r]=((n={})[d]=M,n.centerOffset=M-k,n)}},effect:function(t){var n=t.state,e=t.options.element,r=void 0===e?"[data-popper-arrow]":e;null!=r&&("string"!=typeof r||(r=n.elements.popper.querySelector(r)))&&P(n.elements.popper,r)&&(n.elements.arrow=r)},requires:["popperOffsets"],requiresIfExists:["preventOverflow"]},{name:"hide",enabled:!0,phase:"main",requiresIfExists:["preventOverflow"],fn:function(t){var n=t.state,e=t.name,r=n.rects.reference,o=n.rects.popper,i=n.modifiersData.preventOverflow,a=rt(n,{elementContext:"reference"}),f=rt(n,{altBoundary:!0}),u=at(a,r),c=at(f,o,i),s=ft(u),l=ft(c);n.modifiersData[e]={referenceClippingOffsets:u,popperEscapeOffsets:c,isReferenceHidden:s,hasPopperEscaped:l},n.attributes.popper=Object.assign({},n.attributes.popper,{"data-popper-reference-hidden":s,"data-popper-escaped":l})}}]});const vt=class{constructor(n){t(this,n),this.icon=void 0,this.colour="grey"}handleDocumentClick(t){t.composedPath().includes(this.referenceElement)||(this.popperElement&&this.popperElement.removeAttribute("data-show"),this.popperInstance&&this.popperInstance.update())}componentWillLoad(){this.hasPopoverSlot=!!this.el.querySelector('[slot="popover"]')}componentDidLoad(){this.popperInstance=dt(this.referenceElement,this.popperElement,{placement:"top",modifiers:[{name:"flip",options:{fallbackPlacements:["bottom"]}},{name:"offset",options:{offset:[0,12]}}]})}disconnectedCallback(){this.popperInstance.destroy()}render(){return n(e,null,n("span",{onClick:()=>{this.popperElement&&this.popperElement.setAttribute("data-show",""),this.popperInstance&&this.popperInstance.update()},ref:t=>this.referenceElement=t,class:`material-symbols-rounded ${this.colour?this.colour:""} ${this.hasPopoverSlot?"clickable":""}`},this.icon),this.hasPopoverSlot&&n("div",{ref:t=>this.popperElement=t,class:"tooltip"},n("slot",{name:"popover"}),n("div",{class:"arrow","data-popper-arrow":!0})))}get el(){return r(this)}};vt.style='.material-symbols-rounded{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24}.material-symbols-rounded{font-family:"Material Symbols Rounded";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:block}.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}.orange{color:#F59500}.blue{color:#1479c6}.green{color:#A2BB31}.gray{color:#757575}.black{color:#212121}.clickable{cursor:pointer}';export{vt as tttx_icon}

package/dist/tttx/p-ece1c722.entry.js

@@ -1 +0,0 @@
-import{r as i,c as o,h as t,H as e}from"./p-b6cc2780.js";const n=class{constructor(t){i(this,t),this.valueChanged=o(this,"valueChanged",7),this.value=void 0,this.label=void 0,this.required=void 0}handleClick(i){const o=i.target;this.value=o.checked,this.valueChanged.emit(o.checked)}render(){return t(e,null,t("div",{class:"field spacing"},this.label&&t("label",{class:"label"},this.label,this.required?"":t("span",{class:"optional"}," (optional)")),t("input",{type:"checkbox",class:"input",onChange:i=>this.handleClick(i),checked:this.value})))}};n.style='.material-symbols-rounded{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24}.material-symbols-rounded{font-family:"Material Symbols Rounded";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}.field{clear:both}.container{display:flex;flex-wrap:wrap;box-sizing:border-box;height:36px;border:1px solid #c8c8c8;border-radius:4px}.icon-left,.icon-right{flex-basis:24px}.icon-left span,.icon-right span{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left span{margin-left:4px}.icon-right span{margin-right:4px}.input{flex-grow:1;border:none;outline:none;font-size:16px;padding:8px 16px;background-color:transparent}.iconleft .input{padding-left:4px}.iconright .input{padding-right:4px}.label{display:block;font-size:16px;height:18px;font-weight:600;color:#212121;font-size:16px;margin-bottom:4px;z-index:1}.disabled{background:#f0f0f0;color:#9e9e9e;border-color:#c8c8c8}.focused{border-color:#1479c6}.errormsg{height:16px;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;color:white;border-radius:none;z-index:2;color:#DC0000}.errormsg .validationicon{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#DC0000}.danger{color:#DC0000}.optional{color:#757575;font-weight:normal}:host{display:block}.spacing{margin-bottom:16px}';export{n as tttx_checkbox}