@3t-transform/threeteeui 0.2.75 → 0.2.76

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

@@ -6,168 +6,120 @@
   font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
 }
 
-.material-symbols-rounded {
-  font-family: "Material Symbols Rounded", sans-serif;
+label {
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 19px;
+  color: #212121;
+}
+label .optional {
+  color: #757575;
   font-weight: normal;
-  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;
+label .outer-container {
+  position: relative;
 }
-
-.icon-left span,
-.icon-right span {
-  font-size: 24px;
-  line-height: 24px;
-  text-align: center;
-  display: block;
-  width: 24px;
+label .outer-container .left-icons,
+label .outer-container .right-icons {
+  display: flex;
+  position: absolute;
   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;
+  gap: 8px;
 }
-
-.iconleft .input {
-  padding-left: 4px;
+label .outer-container .left-icons tttx-icon,
+label .outer-container .right-icons tttx-icon {
+  height: 24px;
+  width: 24px;
 }
-
-.iconright .input {
-  padding-right: 4px;
+label .outer-container .left-icons {
+  left: 8px;
 }
-
-.input-icon {
-  position: absolute;
-  margin-top: 9px;
-  margin-left: 4px;
+label .outer-container .right-icons {
+  right: 8px;
 }
-
-.errormsg {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  float: left;
-  margin-bottom: 16px;
+label .outer-container input {
+  color: #212121;
   box-sizing: border-box;
-  background-color: transparent;
-  height: 26px;
-  font-size: 14px;
-  line-height: 16px;
-  border-radius: none;
-  z-index: 2;
-  color: #dc0000;
-}
-
-.errormsg .validationicon {
-  width: 16px;
-  height: 16px;
-  font-size: 16px;
-  line-height: 19px;
-  margin-right: 4px;
-  vertical-align: middle;
-  color: #dc0000;
-}
-
-.danger {
-  color: #dc0000;
+  border: 1px solid #d5d5d5;
+  border-radius: 4px;
+  padding: 0;
+  padding-left: 16px;
+  padding-right: 16px;
+  margin-top: 4px;
+  /* iPhone OS fix */
 }
-
-.optional {
-  color: #757575;
-  font-weight: normal;
+label .outer-container input.has-input-icon {
+  padding-left: 40px;
 }
-
-label.inputBlock {
-  display: block;
-  position: relative;
-  line-height: 21px;
+label .outer-container input.has-input-icon.has-left-icon {
+  padding-left: 72px;
 }
-
-label.inputInline {
-  display: flex;
-  white-space: nowrap;
-  align-items: center;
+label .outer-container input.has-left-icon {
+  padding-left: 40px;
 }
-label.inputInline .input-container {
-  margin: 0 4px;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  position: relative;
+label .outer-container input.has-right-icon {
+  padding-right: 40px;
 }
-
-label {
-  font-weight: 500;
-  font-size: 16px;
-  line-height: 19px;
-  margin-bottom: 16px;
+label .outer-container input.invalid {
+  border: 1px solid #dc0000;
 }
-
-input:not([type=submit]) {
+label .outer-container input:not([type=submit]) {
   font-family: "Roboto", serif;
-  box-sizing: border-box;
   width: 100%;
   height: 36px;
-  padding: 0 16px;
   font-size: 16px;
   line-height: 19px;
-  border: 1px solid #d5d5d5;
-  border-radius: 4px;
-  margin-top: 4px;
 }
-
-/* iPhone OS fix */
-input[type=date] {
+label .outer-container input[type=date] {
   background: white;
   display: block;
   min-width: calc(100% - 18px);
   line-height: 37px;
 }
-
-/* Android device date alignment fix */
-@media (max-width: 600px) {
-  input[type=date] {
-    padding-top: 6px;
-  }
+label .outer-container input[readonly] {
+  cursor: default;
+  pointer-events: none;
+  user-select: none;
+  color: gray;
 }
-input.invalid:invalid, input.standalone.invalid {
-  border: 1px solid #dc0000;
+label .outer-container input:focus {
+  border-color: #1479c6;
 }
-
-.input-icon ~ input {
-  padding: 0 32px;
+label .outer-container input:focus-visible {
+  outline: none;
 }
-
-input ~ .errorBubble {
+label .outer-container.inputBlock {
+  display: flex;
+  align-items: center;
+  line-height: 21px;
+}
+label .outer-container.inputBlock .left-icons,
+label .outer-container.inputBlock .right-icons {
+  margin-top: 4px;
+}
+label .outer-container.inputBlock.readonly {
+  pointer-events: none;
+  user-select: none;
+  color: gray;
+}
+label .outer-container.inputInline {
+  display: flex;
+  white-space: nowrap;
+  align-items: center;
+  margin: 0;
+}
+label .outer-container.inputInline input {
+  margin-top: 0;
+}
+label .secondarylabel {
+  color: #757575;
+  font-size: 14px;
+  line-height: 16px;
+  font-weight: normal;
+  display: flex;
+  margin-top: 4px;
+}
+label .errorBubble {
   position: relative;
   font-size: 14px;
   line-height: 16px;
@@ -181,54 +133,30 @@ input ~ .errorBubble {
   justify-items: center;
   margin-top: 4px;
 }
-
-input ~ .errorBubble:not(.visible) {
+label .errorBubble:not(.visible) {
   display: none;
 }
-
-input ~ .errorBubble span {
+label .errorBubble span {
   color: #dc0000;
   font-size: 16px;
   margin-right: 4px;
 }
 
-input.invalid:invalid ~ .errorBubble {
-  position: relative;
-  font-size: 14px;
-  font-weight: normal;
-  width: 100%;
-  font-family: "Roboto", sans-serif;
-  color: #dc0000;
-}
-
-input:focus {
-  border-color: #1479c6;
-}
-
-input:focus-visible {
-  outline: none;
-}
-
-.secondarylabel {
-  color: #757575;
-  font-size: 14px;
-  line-height: 16px;
-  font-weight: normal;
-  display: flex;
-  margin-top: 4px;
-}
-
-label.inputBlock.readonly {
-  pointer-events: none;
-  user-select: none;
-  color: gray;
-}
-
-input[readonly] {
-  cursor: default;
-  pointer-events: none;
-  user-select: none;
-  color: gray;
+.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;
 }
 
 button {
@@ -251,7 +179,7 @@ button {
   justify-content: left;
   align-items: center;
   font-size: 14px;
-  font-weight: 400;
+  font-weight: 500;
 }
 
 .button-content {
@@ -394,8 +322,10 @@ fieldset {
   border: none;
 }
 
-label.inputBlock.inlineBlock {
-  display: inline-block;
+label {
+  display: block;
+  position: relative;
+  margin-bottom: 16px;
 }
 
 .inlineLabel {

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

@@ -18,11 +18,8 @@ export class TttxForm {
     // If the formSchema changes and the form data is uncontrolled, store the data since the fields will be removed to avoid form duplication
     if (!this.data && this.form && this._formSchema) {
       const formData = new FormData(this.form);
-      this._data = Object.fromEntries(Object.keys(this._formSchema.properties).map((formKey) => {
-        return [
-          formKey,
-          formData.get(formKey)
-        ];
+      this._data = Object.fromEntries(Object.keys(this._formSchema.properties).map(formKey => {
+        return [formKey, formData.get(formKey)];
       }));
     }
     // Check if the new value is a string, indicating that it needs to be parsed
@@ -47,7 +44,7 @@ export class TttxForm {
    * Handles the focus event for a form field and emits a "dataChanged" event
    * to the parent component with the field name and its new value.
    *
-   * @param {ChangeEvent} event - The focus event triggered by the field.
+   * @param {KeyboardEvent | Event} event - The focus event triggered by the field.
    * @return {void}
    */
   fieldChanged(event) {
@@ -99,20 +96,22 @@ export class TttxForm {
    * Creates a new HTMLSelectElement with a set of options.
    *
    * @param {string} formKey - The name of the dropdown field, as specified in the form schema.
-   * @param {Object} formProperties - An object containing additional properties, such as the field type and options properties.
+   * @param {object} formProperties - An object containing additional properties, such as the field type and options properties.
    * @param {'select'} formProperties.type - The type of form field. In this case, it will always be "select".
-   * @param {Object} formProperties.validation - A set of validation rules for the field.
-   * @param {Object[]} formProperties.options - A list of properties to pass to the select options.
-   * @param {string} formProperties.options.label - The visible value of the option.
-   * @param {string} formProperties.options.value - The actual value of the option.
+   * @param {object} formProperties.validation - A set of validation rules for the field.
+   * @param {Array<{label:string, value:string, placeholder?:boolean}>} formProperties.options - A list of properties to pass to the select options.
+   * @param {string} formProperties.options[].label - The visible value of the option.
+   * @param {string} formProperties.options[].value - The actual value of the option.
+   * @param {boolean} [formProperties.options[].placeholder]
    */
   createSelect(formKey, formProperties) {
+    var _a;
     const select = document.createElement('select');
     select.setAttribute('name', formKey);
     formProperties.options.forEach(optionProperties => {
       this.appendOption(select, optionProperties);
     });
-    if (this._data && this._data[formKey])
+    if ((_a = this._data) === null || _a === void 0 ? void 0 : _a[formKey])
       select.classList.remove('placeholder');
     return select;
   }
@@ -120,8 +119,10 @@ export class TttxForm {
    * Appends an option to a select element
    *
    * @param {HTMLSelectElement} select - The select elements to attach the option to.
-   * @param {value} value - The value of the option.
-   * @param {label} label - The label which will be displayed on the form for the option.
+   * @param {Object} optionProperties
+   * @param {string} optionProperties.value - The value of the option.
+   * @param {string} optionProperties.label - The label which will be displayed on the form for the option.
+   * @param {boolean} [optionProperties.placeholder]
    */
   appendOption(select, optionProperties) {
     const option = document.createElement('option');
@@ -141,7 +142,7 @@ export class TttxForm {
    * and sets its autocomplete and autocapitalization properties to off.
    *
    * @param {string} formKey - The name of the input field, as specified in the form schema.
-   * @param {Object} formProperties - An object containing additional properties for the input field, such as its type and placeholder value.
+   * @param {Record<string, any>} formProperties - An object containing additional properties for the input field, such as its type and placeholder value.
    * @param {string} formProperties.type - The type of the input field (e.g., "text", "email", "number", etc.).
    * @param {string} [formProperties.placeholder] - An optional placeholder value to display in the input field.
    * @return {HTMLInputElement} - The new input element.
@@ -169,12 +170,19 @@ export class TttxForm {
    * the input element (e.g., "required" will set the "required" and "data-required" attributes,
    * "pattern" will set the "pattern" and "data-pattern" attributes, etc.).
    *
-   * @param {HTMLInputElement} input - The input element to apply validation attributes to.
-   * @param {Object} validation - An object containing the validation rules for the input field.
-   * @param {Object} [validation.required] - An object containing a "message" property to display if the field is required.
-   * @param {Object} [validation.pattern] - An object containing a "pattern" property to match against the field value, and a "message" property to display if the pattern doesn't match.
-   * @param {Object} [validation.badInput] - An object containing a "message" property to display if the field value is invalid.
-   * @param {Object} [validation.minmax] - An object containing "min" and "max" properties to validate the field value against, and a "message" property to display if the value is out of range.
+   * @param {FormField} input - The input element to apply validation attributes to.
+   * @param {object} validation - An object containing the validation rules for the input field.
+   * @param {object} [validation.required] - An object containing a "message" property to display if the field is required.
+   * @param {string} [validation.required.message]
+   * @param {object} [validation.pattern] - An object containing a "pattern" property to match against the field value, and a "message" property to display if the pattern doesn't match.
+   * @param {string} [validation.pattern.pattern]
+   * @param {string} [validation.pattern.message]
+   * @param {object} [validation.badInput] - An object containing a "message" property to display if the field value is invalid.
+   * @param {string} [validation.badInput.message]
+   * @param {object} [validation.minmax] - An object containing "min" and "max" properties to validate the field value against, and a "message" property to display if the value is out of range.
+   * @param {string} [validation.minmax.min]
+   * @param {string} [validation.minmax.max]
+   * @param {string} [validation.minmax.message]
    * @param {string} [validation.maxlength] - The maximum length of the input field.
    * @return {void}
    */
@@ -217,6 +225,13 @@ export class TttxForm {
     // Return the error bubble element
     return errorBubble;
   }
+  /**
+   *
+   * @param {Record<string, any>} formProperties
+   * @param {HTMLInputElement | HTMLSelectElement} input
+   * @param {HTMLLabelElement} label
+   * @returns {void}
+   */
   appendCheckboxInput(formProperties, input, label) {
     if (formProperties.label) {
       const lineBreak = document.createElement('br');
@@ -236,15 +251,16 @@ export class TttxForm {
    * and appends the input element and error bubble element to it. If the form property has
    * no validation object, it adds an "optional" span element to the label.
    *
-   * @param {Object} formProperties - An object containing properties for the form field, including its label text and validation rules.
-   * @param {HTMLInputElement} input - The input element to associate with the label.
+   * @param {Record<string, any>} formProperties - An object containing properties for the form field, including its label text and validation rules.
+   * @param {HTMLInputElement | HTMLSelectElement} input - The input element to associate with the label.
    * @param {HTMLDivElement} errorBubble - The error bubble element to display error messages in.
    * @return {HTMLLabelElement} - The new label element.
    */
   createLabel(formProperties, input, errorBubble) {
+    const outerContainer = document.createElement('div');
+    outerContainer.className = 'outer-container inputBlock';
     // Create a new <label> element with the "inputBlock" class and the specified text
     const label = document.createElement('label');
-    label.className = 'inputBlock';
     label.innerText = formProperties.label;
     // If the form property has no validation object, add an "optional" span element to the label
     if (!formProperties.validation) {
@@ -257,12 +273,14 @@ export class TttxForm {
       label.classList.add('readonly');
     }
     if (formProperties.type === 'checkbox') {
-      label.className += ' inlineBlock';
       this.appendCheckboxInput(formProperties, input, label);
     }
     else {
-      // Append the input element and error bubble element to the label
-      label.appendChild(input);
+      // Append the input element and error bubble element to the outerContainer
+      outerContainer.appendChild(input);
+    }
+    if (formProperties.type !== 'checkbox') {
+      label.appendChild(outerContainer);
     }
     label.appendChild(errorBubble);
     // Return the label element
@@ -319,18 +337,18 @@ export class TttxForm {
     const properties = this._formSchema.properties;
     const propertyKeys = Object.keys(properties);
     propertyKeys.forEach(formKey => {
-      var _a;
+      var _a, _b;
       const formInput = formItems.querySelector(`[name=${formKey}]`);
       // Bind events to form input elements
       formInput.oninvalid = this.validityCheckWrapper.bind(this);
       formInput.onblur = this.validityCheckWrapper.bind(this);
       formInput.onkeyup = this.fieldChanged.bind(this);
       formInput.onchange = this.fieldChanged.bind(this);
-      if (this._data && this._data[formKey] !== undefined && this._data[formKey] !== null) {
+      if (((_a = this._data) === null || _a === void 0 ? void 0 : _a[formKey]) !== undefined && this._data[formKey] !== null) {
         formInput.value = this._data[formKey];
       }
       // If explicitly setting input as invalid, set invalid state and error message on render
-      if ((_a = properties[formKey].form.validation) === null || _a === void 0 ? void 0 : _a.invalid) {
+      if ((_b = properties[formKey].form.validation) === null || _b === void 0 ? void 0 : _b.invalid) {
         const errorMessage = properties[formKey].form.validation.invalid.message;
         formInput.setCustomValidity(errorMessage); // Prevents the invalid styling from resetting on blur
         setErrorState(formInput, true, errorMessage);
@@ -354,8 +372,6 @@ export class TttxForm {
    * and emits a "dataSubmitted" event with the form data. The fieldset element is assigned
    * to the "fieldset" instance variable using a ref, so it can be populated with form elements
    * later on.
-   *
-   * @return {JSX.Element} - The rendered form template as a JSX element.
    */
   render() {
     return (h(Host, null, h("form", { ref: el => (this.form = el), onSubmit: this.doSubmit.bind(this) }, h("fieldset", { ref: el => (this.fieldset = el) }), h("input", { type: "submit", ref: el => (this.submitButton = el), style: { display: 'none' } }))));
@@ -375,12 +391,16 @@ export class TttxForm {
   static get properties() {
     return {
       "formschema": {
-        "type": "any",
+        "type": "string",
         "mutable": true,
         "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
+          "original": "Record<string, any> | string",
+          "resolved": "string | { [x: string]: any; }",
+          "references": {
+            "Record": {
+              "location": "global"
+            }
+          }
         },
         "required": false,
         "optional": false,

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

@@ -80,7 +80,7 @@ li.item .icons tttx-icon:hover {
 li.item .icons * {
   display: flex;
 }
-li:hover {
+li.item:hover {
   background-color: rgba(17, 17, 17, 0.05);
 }