@3t-transform/threeteeui 0.0.23 → 0.0.25

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

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

package/dist/cjs/tttx.cjs.js

@@ -1,11 +1,9 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-2943e8f8.js');
+const index = require('./index-451f61dd.js');
 
 /*
- Stencil Client Patch Browser v2.22.3 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.20.0 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('tttx.cjs.js', document.baseURI).href));
@@ -17,7 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["tttx-button.cjs",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"design":[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-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);
+  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],"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-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);
 });
-
-exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -4,12 +4,14 @@
     "./components/atoms/tttx-button/tttx-button.js",
     "./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/atoms/tttx-loading-spinner/tttx-loading-spinner.js",
+    "./components/molecules/tttx-form/tttx-form.js",
+    "./components/molecules/tttx-list/tttx-list.js"
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.22.3",
-    "typescriptVersion": "4.9.4"
+    "version": "2.20.0",
+    "typescriptVersion": "4.8.4"
   },
   "collections": [],
   "bundles": []

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,314 @@
+.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;
+  margin-right: 4px;
+}
+
+.icon-left {
+  margin-top: 5px;
+  margin-left: 4px;
+}
+
+.iconleft .input {
+  padding-left: 4px;
+}
+
+.iconright .input {
+  padding-right: 4px;
+}
+
+.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;
+}
+
+label.inputBlock {
+  display: block;
+  position: relative;
+  line-height: 21px;
+}
+
+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 ~ .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;
+}
+
+.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;
+}