@3t-transform/threeteeui 0.0.24 → 0.1.0

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-bc080fb4.js');
+const index = require('./index-451f61dd.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)}}";
 

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-bc080fb4.js');
+const index = require('./index-451f61dd.js');
 
-const tttxStandaloneInputCss = ".material-symbols-rounded.sc-tttx-standalone-input{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded.sc-tttx-standalone-input{font-family:\"Material Symbols Rounded\", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}.icon-left.sc-tttx-standalone-input,.icon-right.sc-tttx-standalone-input{flex-basis:24px}.icon-left.sc-tttx-standalone-input span.sc-tttx-standalone-input,.icon-right.sc-tttx-standalone-input span.sc-tttx-standalone-input{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left.sc-tttx-standalone-input span.sc-tttx-standalone-input{margin-left:4px}.icon-right.sc-tttx-standalone-input span.sc-tttx-standalone-input{margin-right:4px}.icon-right.sc-tttx-standalone-input{margin-top:5px;margin-right:4px}.icon-left.sc-tttx-standalone-input{margin-top:5px;margin-left:4px}.iconleft.sc-tttx-standalone-input .input.sc-tttx-standalone-input{padding-left:4px}.iconright.sc-tttx-standalone-input .input.sc-tttx-standalone-input{padding-right:4px}.focused.sc-tttx-standalone-input{border-color:#1479c6}.errormsg.sc-tttx-standalone-input{display:flex;justify-content:center;align-items:center;float:left;margin-bottom:16px;box-sizing:border-box;background-color:transparent;height:26px;font-size:14px;border-radius:none;z-index:2;color:#dc0000}.errormsg.sc-tttx-standalone-input .validationicon.sc-tttx-standalone-input{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#dc0000}.danger.sc-tttx-standalone-input{color:#dc0000}.optional.sc-tttx-standalone-input{color:#757575;font-weight:normal}label.inputBlock.sc-tttx-standalone-input{display:block;position:relative;line-height:21px}label.sc-tttx-standalone-input{font-weight:500;font-size:16px}input.sc-tttx-standalone-input:not([type=submit]){font-family:\"Roboto\", serif;box-sizing:border-box;width:100%;height:36px;padding:0 16px;font-size:16px;border:1px solid #d5d5d5;border-radius:4px;margin-top:4px}input[type=date].sc-tttx-standalone-input{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}input.invalid.sc-tttx-standalone-input:invalid,input.standalone.invalid.sc-tttx-standalone-input{border:1px solid #dc0000}input.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input{min-height:27px;position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center}input.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input:not(.visible){visibility:hidden}input.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input span.sc-tttx-standalone-input{color:#dc0000;font-size:16px;margin-right:4px;height:16px}input.invalid.sc-tttx-standalone-input:invalid~.errorBubble.sc-tttx-standalone-input{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;visibility:visible}input.sc-tttx-standalone-input:focus{border-color:#1479c6}.sc-tttx-standalone-input-h{display:block}";
+const tttxStandaloneInputCss = ".material-symbols-rounded.sc-tttx-standalone-input{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded.sc-tttx-standalone-input{font-family:\"Material Symbols Rounded\", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}.icon-left.sc-tttx-standalone-input,.icon-right.sc-tttx-standalone-input{flex-basis:24px}.icon-left.sc-tttx-standalone-input span.sc-tttx-standalone-input,.icon-right.sc-tttx-standalone-input span.sc-tttx-standalone-input{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left.sc-tttx-standalone-input span.sc-tttx-standalone-input{margin-left:4px}.icon-right.sc-tttx-standalone-input span.sc-tttx-standalone-input{margin-right:4px}.icon-right.sc-tttx-standalone-input{margin-top:5px}.icon-left.sc-tttx-standalone-input{margin-top:5px;margin-left:4px}.iconleft.sc-tttx-standalone-input .input.sc-tttx-standalone-input{padding-left:4px}.iconright.sc-tttx-standalone-input .input.sc-tttx-standalone-input{padding-right:4px}.input-icon.sc-tttx-standalone-input{position:absolute;margin-top:9px;margin-left:4px}.errormsg.sc-tttx-standalone-input{display:flex;justify-content:center;align-items:center;float:left;margin-bottom:16px;box-sizing:border-box;background-color:transparent;height:26px;font-size:14px;border-radius:none;z-index:2;color:#dc0000}.errormsg.sc-tttx-standalone-input .validationicon.sc-tttx-standalone-input{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#dc0000}.danger.sc-tttx-standalone-input{color:#dc0000}.optional.sc-tttx-standalone-input{color:#757575;font-weight:normal}label.inputBlock.sc-tttx-standalone-input{display:block;position:relative;line-height:21px}label.inputInline.sc-tttx-standalone-input{display:flex;white-space:nowrap;align-items:center}label.inputInline.sc-tttx-standalone-input .input-container.sc-tttx-standalone-input{margin:0 4px;width:100%;display:flex;align-items:center;gap:4px}label.sc-tttx-standalone-input{font-weight:500;font-size:16px}input.sc-tttx-standalone-input:not([type=submit]){font-family:\"Roboto\", serif;box-sizing:border-box;width:100%;height:36px;padding:0 16px;font-size:16px;border:1px solid #d5d5d5;border-radius:4px;margin-top:4px}input[type=date].sc-tttx-standalone-input{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}input.invalid.sc-tttx-standalone-input:invalid,input.standalone.invalid.sc-tttx-standalone-input{border:1px solid #dc0000}.input-icon.sc-tttx-standalone-input~input.sc-tttx-standalone-input{padding:0 32px}input.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input{min-height:27px;position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center}input.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input:not(.visible){visibility:hidden}input.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input span.sc-tttx-standalone-input{color:#dc0000;font-size:16px;margin-right:4px;height:16px}input.invalid.sc-tttx-standalone-input:invalid~.errorBubble.sc-tttx-standalone-input{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;visibility:visible}input.sc-tttx-standalone-input:focus{border-color:#1479c6}input.sc-tttx-standalone-input:focus-visible{outline:none}.sc-tttx-standalone-input-h{display:block}";
 
 const TttxInput = class {
   constructor(hostRef) {
@@ -15,9 +15,12 @@ const TttxInput = class {
     this.invalidChanged = index.createEvent(this, "invalidChanged", 7);
     this.label = undefined;
     this.showerrormsg = undefined;
+    this.showerrorbubble = true;
     this.errormsg = undefined;
     this.iconleft = undefined;
     this.iconright = undefined;
+    this.inputicon = undefined;
+    this.inline = undefined;
     this.inputAutocapitalize = undefined;
     this.inputAutofocus = undefined;
     this.inputKeyhint = undefined;
@@ -53,12 +56,13 @@ const TttxInput = class {
     this.blurChanged.emit(target.value);
   }
   handleInvalid(event) {
+    event.preventDefault();
     const target = event.target;
     this.invalidChanged.emit(target.value);
   }
   render() {
     const classNames = ['standalone', this.showerrormsg ? 'invalid' : ''].join(' ');
-    return (index.h(index.Host, null, index.h("label", { class: 'inputBlock' }, this.label, !this.required ? index.h("span", { class: "optional" }, "\u00A0(optional)") : '', this.iconleft && (index.h("div", { class: "icon-left" }, index.h("tttx-icon", { icon: this.iconleft, color: "grey" }))), index.h("input", { class: classNames, autocapitalize: this.inputAutocapitalize, autofocus: this.inputAutofocus, enterkeyhint: this.inputKeyhint, tabindex: this.inputIndex, title: this.inputTitle, autocomplete: this.autocomplete, checked: this.checked, disabled: this.disabled, max: this.max, maxlength: this.maxlength, min: this.min, minlength: this.minlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readonly: this.readonly, required: this.required, step: this.step, type: this.type, value: this.value, onBlur: this.handleBlur.bind(this), onFocus: this.handleFocus.bind(this), onInput: this.handleChange.bind(this), onInvalid: this.handleInvalid.bind(this) }), this.iconright && (index.h("div", { class: "icon-right" }, index.h("tttx-icon", { icon: this.iconright, color: "grey" }))), index.h("span", { class: ['errorBubble', this.showerrormsg && this.errormsg ? 'visible' : ''].join(' ') }, index.h("span", { class: "material-symbols-rounded validationicon" }, "warning"), " ", this.errormsg))));
+    return (index.h(index.Host, null, index.h("label", { class: this.inline ? 'inputInline' : 'inputBlock' }, this.label, !this.required ? index.h("span", { class: "optional" }, "\u00A0(optional)") : '', this.iconleft && (index.h("div", { class: "icon-left" }, index.h("tttx-icon", { icon: this.iconleft, color: "grey" }))), index.h("div", { class: "input-container" }, this.inputicon && (index.h("tttx-icon", { class: "input-icon", icon: this.inputicon, color: "grey" })), index.h("input", { class: classNames, autocapitalize: this.inputAutocapitalize, autofocus: this.inputAutofocus, enterkeyhint: this.inputKeyhint, tabindex: this.inputIndex, title: this.inputTitle, autocomplete: this.autocomplete, checked: this.checked, disabled: this.disabled, max: this.max, maxlength: this.maxlength, min: this.min, minlength: this.minlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readonly: this.readonly, required: this.required, step: this.step, type: this.type, value: this.value, onBlur: this.handleBlur.bind(this), onFocus: this.handleFocus.bind(this), onInput: this.handleChange.bind(this), onInvalid: this.handleInvalid.bind(this) }), this.iconright && (index.h("div", { class: "icon-right" }, index.h("tttx-icon", { icon: this.iconright, color: "grey" }))), this.showerrorbubble && (index.h("span", { class: ['errorBubble', this.showerrormsg && this.errormsg ? 'visible' : ''].join(' ') }, index.h("span", { class: "material-symbols-rounded validationicon" }, "warning"), " ", this.errormsg))))));
   }
 };
 TttxInput.style = tttxStandaloneInputCss;

package/dist/cjs/tttx.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-bc080fb4.js');
+const index = require('./index-451f61dd.js');
 
 /*
  Stencil Client Patch Browser v2.20.0 | MIT Licensed | https://stenciljs.com
@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["tttx-button.cjs",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"design":[1]}]]],["tttx-list.cjs",[[1,"tttx-list",{"data":[1]}]]],["tttx-standalone-input.cjs",[[2,"tttx-standalone-input",{"label":[1],"showerrormsg":[4],"errormsg":[1],"iconleft":[1],"iconright":[1],"inputAutocapitalize":[1,"input-autocapitalize"],"inputAutofocus":[4,"input-autofocus"],"inputKeyhint":[1,"input-keyhint"],"inputIndex":[8,"input-index"],"inputTitle":[1,"input-title"],"autocomplete":[1],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-table.cjs",[[1,"tttx-table",{"headers":[16],"data":[16],"loading":[4],"selected":[2]},[[4,"keydown","handleKeyDown"]]]]],["tttx-keyvalue-block.cjs",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]]], options);
+  return index.bootstrapLazy([["tttx-button.cjs",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"design":[1]}]]],["tttx-list.cjs",[[1,"tttx-list",{"data":[1025],"name":[1]}]]],["tttx-standalone-input.cjs",[[2,"tttx-standalone-input",{"label":[1],"showerrormsg":[4],"showerrorbubble":[4],"errormsg":[1],"iconleft":[1],"iconright":[1],"inputicon":[1],"inline":[4],"inputAutocapitalize":[1,"input-autocapitalize"],"inputAutofocus":[4,"input-autofocus"],"inputKeyhint":[1,"input-keyhint"],"inputIndex":[8,"input-index"],"inputTitle":[1,"input-title"],"autocomplete":[1],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-form.cjs",[[1,"tttx-form",{"formschema":[1032],"submitValue":[1032,"submit-value"]}]]],["tttx-keyvalue-block.cjs",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]]], options);
 });

package/dist/collection/collection-manifest.json

@@ -5,8 +5,8 @@
     "./components/atoms/tttx-icon/tttx-icon.js",
     "./components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.js",
     "./components/atoms/tttx-loading-spinner/tttx-loading-spinner.js",
-    "./components/molecules/tttx-list/tttx-list.js",
-    "./components/molecules/tttx-table/tttx-table.js"
+    "./components/molecules/tttx-form/tttx-form.js",
+    "./components/molecules/tttx-list/tttx-list.js"
   ],
   "compiler": {
     "name": "@stencil/core",

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

@@ -83,6 +83,10 @@
   color: #dc0000;
 }
 
+.darkred {
+  color: #A20000;
+}
+
 .orange {
   color: #f59500;
 }

package/dist/collection/components/atoms/tttx-icon/tttx-icon.stories.js

@@ -1,5 +1,5 @@
 import icons from './../../../icons';
-const colors = ['red', 'blue', 'black', 'grey', 'green'];
+const colors = ['red', 'blue', 'black', 'white', 'gray', 'green', 'orange', 'darkred'];
 export default {
   title: 'Atoms/Icons',
   component: 'tttx-icon',

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

@@ -24,17 +24,20 @@ export class TttxKeyvalueBlock {
     for (let i = 0; i < values.length; i++) {
       const value = values[i];
       if (this.horizontal) {
-        elements.push(h("div", null, h("dt", { class: "mainTitle" }, value.title), h("dt", { class: "subTitle" }, value.subTitle), h("dd", null, value.data)));
+        elements.push(h("div", null, h("dt", { class: 'mainTitle' }, value.title), h("dt", { class: 'subTitle' }, value.subTitle), h("dd", null, value.data)));
       }
       else {
-        elements.push(h("dt", { class: "mainTitle" }, value.title));
-        elements.push(h("dt", { class: "subTitle" }, value.subTitle));
+        elements.push(h("dt", { class: 'mainTitle' }, value.title));
+        elements.push(h("dt", { class: 'subTitle' }, value.subTitle));
         elements.push(h("dd", null, value.data));
       }
     }
     return elements;
   }
   render() {
+    if (!this.keyvalues) {
+      return;
+    }
     let values;
     if (typeof this.keyvalues === 'string') {
       values = JSON.parse(this.keyvalues);
@@ -49,7 +52,7 @@ export class TttxKeyvalueBlock {
     else {
       elements = this.renderSingleElements(values);
     }
-    return (h(Host, null, h("dl", { class: this.horizontal ? "horizontal" : null }, elements)));
+    return (h(Host, null, h("dl", { class: this.horizontal ? 'horizontal' : null }, elements)));
   }
   static get is() { return "tttx-keyvalue-block"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/molecules/tttx-form/lib/setErrorState.js

@@ -0,0 +1,35 @@
+/**
+ * Sets the error state of an input field by updating its class and error message.
+ * If an error was detected, it sets the input field's class to "invalid" and
+ * displays the error message in an error bubble. If no error was detected,
+ * it removes the "invalid" class from the input field and clears the error bubble.
+ *
+ * @param {HTMLInputElement} target - The input field to update.
+ * @param {boolean} hasError - Whether an error was detected in the field.
+ * @param {string} errorMessage - The error message to display (if any).
+ * @return {void}
+ */
+function setErrorState(target, hasError, errorMessage) {
+  // Find the error bubble element for the input field
+  const errorBubble = target.parentElement.querySelector('.errorBubble');
+  // If an error was detected, set the input field's class to "invalid" and display the error message in the error bubble
+  if (hasError) {
+    target.className = 'invalid';
+    const errorIcon = document.createElement('span');
+    // Set the class of the error icon to a pre-defined CSS class that specifies the icon's appearance
+    errorIcon.className = 'material-symbols-rounded';
+    // Set the text content of the error icon to the word "warning"
+    errorIcon.textContent = 'warning';
+    // errorBubble.replaceChildren cannot be used here because the tests don't support this new feature :(
+    errorBubble.innerHTML = '';
+    errorBubble.append(errorIcon);
+    errorBubble.append(errorMessage);
+    // errorBubble.replaceChildren(errorIcon, errorMessage);
+  }
+  // If no error was detected, remove the "invalid" class from the input field and clear the error bubble
+  else {
+    target.className = '';
+    errorBubble.innerHTML = '';
+  }
+}
+export default setErrorState;

package/dist/collection/components/molecules/tttx-form/lib/validityCheck.js

@@ -0,0 +1,58 @@
+/**
+ * Validates the input field on focusout event by checking its validity state,
+ * sets an error message if there's an issue, and emits a "dataChanged" event to
+ * the parent component with the field name and its new value.
+ *
+ * @param {Event} event - The focusout event triggered by the input field.
+ * @return {void}
+ */
+function validityCheck(event) {
+  var _a, _b, _c, _d;
+  event.preventDefault();
+  const target = event.target;
+  let hasError = true;
+  let errorMessage = '';
+  // validity object on HTML5 inputs has the following options
+  // badInput
+  // customError
+  // patternMismatch
+  // rangeOverflow
+  // rangeUnderflow
+  // stepMismatch
+  // tooLong
+  // tooShort
+  // typeMismatch
+  // valid
+  // valueMissing
+  // customErrors can be set with
+  // target.setCustomValidity('custom error!');
+  // and cleared with
+  // target.setCustomValidity('');
+  // Check the validity of the input field and set an error message if needed
+  switch (true) {
+    // The field is required, but has no value
+    case target.validity.valueMissing:
+      errorMessage = (_a = target.dataset.required) !== null && _a !== void 0 ? _a : 'This field is required';
+      break;
+    // The field's value does not match the expected pattern
+    case target.validity.patternMismatch:
+      errorMessage = (_b = target.dataset.pattern) !== null && _b !== void 0 ? _b : 'Incorrect format';
+      break;
+    // The field's value is not of the correct input type
+    case target.validity.badInput:
+      // IE string in a number field
+      errorMessage = (_c = target.dataset.badinput) !== null && _c !== void 0 ? _c : 'Wrong input type';
+      break;
+    // The field's value is above or below the range set in the "min" and "max" attributes
+    case target.validity.rangeOverflow || target.validity.rangeUnderflow:
+      // IE date or number is above or below value set in min or max tags
+      errorMessage = (_d = target.dataset.range) !== null && _d !== void 0 ? _d : 'Invalid value';
+      break;
+    // No error detected
+    default:
+      hasError = false;
+  }
+  // Return the error state
+  return { target, hasError, errorMessage };
+}
+export default validityCheck;

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

@@ -0,0 +1,336 @@
+.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;
+}
+
+.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;
+}
+
+.icon-right {
+  margin-top: 5px;
+}
+
+.icon-left {
+  margin-top: 5px;
+  margin-left: 4px;
+}
+
+.iconleft .input {
+  padding-left: 4px;
+}
+
+.iconright .input {
+  padding-right: 4px;
+}
+
+.input-icon {
+  position: absolute;
+  margin-top: 9px;
+  margin-left: 4px;
+}
+
+.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;
+}
+
+label.inputBlock {
+  display: block;
+  position: relative;
+  line-height: 21px;
+}
+
+label.inputInline {
+  display: flex;
+  white-space: nowrap;
+  align-items: center;
+}
+label.inputInline .input-container {
+  margin: 0 4px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+label {
+  font-weight: 500;
+  font-size: 16px;
+}
+
+input:not([type=submit]) {
+  font-family: "Roboto", serif;
+  box-sizing: border-box;
+  width: 100%;
+  height: 36px;
+  padding: 0 16px;
+  font-size: 16px;
+  border: 1px solid #d5d5d5;
+  border-radius: 4px;
+  margin-top: 4px;
+}
+
+/* iPhone OS fix */
+input[type=date] {
+  background: white;
+  display: block;
+  min-width: calc(100% - 18px);
+  line-height: 37px;
+}
+
+input.invalid:invalid, input.standalone.invalid {
+  border: 1px solid #dc0000;
+}
+
+.input-icon ~ input {
+  padding: 0 32px;
+}
+
+input ~ .errorBubble {
+  min-height: 27px;
+  position: relative;
+  font-size: 14px;
+  font-weight: normal;
+  width: 100%;
+  font-family: "Roboto", sans-serif;
+  color: #dc0000;
+  display: flex;
+  align-content: center;
+  align-items: center;
+  justify-items: center;
+}
+
+input ~ .errorBubble:not(.visible) {
+  visibility: hidden;
+}
+
+input ~ .errorBubble span {
+  color: #dc0000;
+  font-size: 16px;
+  margin-right: 4px;
+  height: 16px;
+}
+
+input.invalid:invalid ~ .errorBubble {
+  position: relative;
+  font-size: 14px;
+  font-weight: normal;
+  width: 100%;
+  font-family: "Roboto", sans-serif;
+  color: #dc0000;
+  visibility: visible;
+}
+
+input:focus {
+  border-color: #1479c6;
+}
+
+input:focus-visible {
+  outline: none;
+}
+
+.button {
+  font-family: Roboto, serif;
+  box-sizing: border-box;
+  height: 36px;
+  min-width: 36px;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  color: #212121;
+  border: 1px solid #c8c8c8;
+  border-radius: 4px;
+  text-transform: uppercase;
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.button-content {
+  display: block;
+  padding: 0 16px;
+}
+
+.icon-left, .icon-right {
+  margin-top: 4px;
+}
+
+.iconleft {
+  padding-left: 8px;
+}
+
+.iconleft .button-content {
+  padding-left: 4px;
+}
+
+.iconright {
+  padding-right: 8px;
+}
+
+.iconright .button-content {
+  padding-right: 4px;
+}
+
+.notext {
+  padding: 0 6px;
+}
+
+.button:hover {
+  background: rgba(17, 17, 17, 0.1);
+  border: 1px solid #D5D5D5;
+}
+
+.button:active {
+  background: rgba(17, 17, 17, 0.2);
+  border: 1px solid #D5D5D5;
+}
+
+.primary {
+  background: #1479c6;
+  border: 1px solid #1479c6;
+  color: white;
+}
+
+.primary:hover {
+  background: #146EB3;
+  border: 1px solid #146EB3;
+}
+
+.primary:active {
+  background: #1464A2;
+  border: 1px solid #1464A2;
+}
+
+.borderless {
+  background: transparent;
+  border: none;
+  color: #212121;
+}
+
+.borderless:hover {
+  background: rgba(17, 17, 17, 0.1);
+  border: none;
+}
+
+.borderless:active {
+  background: rgba(17, 17, 17, 0.2);
+  border: none;
+}
+
+.danger {
+  background: #DC0000;
+  border: 1px solid #DC0000;
+  color: white;
+}
+
+.danger:hover {
+  background: #C60000;
+  border: 1px solid #C60000;
+}
+
+.danger:active {
+  background: #B00000;
+  border: 1px solid #B00000;
+}
+
+.disabled {
+  background: #aeaeae;
+  border: none;
+  color: #4c4c4c;
+  cursor: not-allowed;
+}
+
+.disabled:hover {
+  background: #aeaeae;
+  border: none;
+  color: #4c4c4c;
+  cursor: not-allowed;
+}
+
+.disabled:active {
+  background: #aeaeae;
+  border: none;
+  color: #4c4c4c;
+  cursor: not-allowed;
+}
+
+:host {
+  display: block;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+input[type=submit] {
+  margin-left: auto;
+}