@3t-transform/threeteeui 0.2.106 → 0.2.108

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

@@ -171,6 +171,59 @@ export class TttxForm {
     // Return the input element
     return input;
   }
+  createStartEndDateComponent(formKey, formProperties) {
+    const startDate = document.createElement('input');
+    const endDate = document.createElement('input');
+    startDate.type = endDate.type = 'date';
+    startDate.name = `${formKey}-startdate`;
+    endDate.name = `${formKey}-enddate`;
+    startDate.setAttribute('data-formkey', formKey);
+    endDate.setAttribute('data-formkey', formKey);
+    if (formProperties.readonly) {
+      startDate.readOnly = true;
+      endDate.readOnly = true;
+    }
+    this.applyValidation(startDate, { required: { message: 'Please enter a start date' }, dateCompare: { to: endDate.name } });
+    this.applyValidation(endDate, { required: { message: 'Please enter an end date' }, dateCompare: { with: startDate.name, message: 'End date cannot be before the start date' } });
+    let startTime;
+    let endTime;
+    if (formProperties.includeTime) {
+      startTime = document.createElement('input');
+      endTime = document.createElement('input');
+      startTime.type = endTime.type = 'time';
+      startTime.name = `${formKey}-starttime`;
+      endTime.name = `${formKey}-endtime`;
+      startTime.setAttribute('data-formkey', formKey);
+      endTime.setAttribute('data-formkey', formKey);
+      if (formProperties.readonly) {
+        startTime.readOnly = true;
+        endTime.readOnly = true;
+      }
+      this.applyValidation(startTime, { required: { message: 'Please enter a start time' } });
+      this.applyValidation(endTime, { required: { message: 'Please enter an end time' } });
+    }
+    const startLabel = document.createElement('label');
+    startLabel.innerText = 'Start date';
+    const endLabel = document.createElement('label');
+    endLabel.innerText = 'End date';
+    const startContainer = document.createElement('div');
+    const endContainer = document.createElement('div');
+    startContainer.className = endContainer.className = 'outer-container inputBlock';
+    startLabel.className = endLabel.className = 'flex-label';
+    startContainer.append(startDate);
+    if (startTime) {
+      startContainer.append(startTime);
+    }
+    startLabel.append(startContainer);
+    startLabel.append(this.createErrorBubble());
+    endContainer.append(endDate);
+    if (endTime) {
+      endContainer.append(endTime);
+    }
+    endLabel.append(endContainer);
+    endLabel.append(this.createErrorBubble());
+    return { start: startLabel, end: endLabel };
+  }
   /**
    * Applies validation attributes to an input element based on the specified validation object.
    * If a certain property is present in the object, it will set the corresponding attribute on
@@ -191,6 +244,7 @@ export class TttxForm {
    * @param {string} [validation.minmax.max]
    * @param {string} [validation.minmax.message]
    * @param {string} [validation.maxlength] - The maximum length of the input field.
+   * @param {string} [validation.datecompare] - To compare start and end date fields.
    * @return {void}
    */
   applyValidation(input, validation) {
@@ -223,6 +277,16 @@ export class TttxForm {
     if (validation.maxlength) {
       input.setAttribute('maxlength', validation.maxlength);
     }
+    // Custom validation parameters for start date and end date comparison
+    if (validation.dateCompare) {
+      if (validation.dateCompare.message && validation.dateCompare.with) {
+        input.setAttribute('data-compare', validation.dateCompare.message);
+        input.setAttribute('data-compare-with', validation.dateCompare.with);
+      }
+      if (validation.dateCompare.to) {
+        input.setAttribute('data-compare-to', validation.dateCompare.to);
+      }
+    }
   }
   // Create a new error bubble element
   createErrorBubble() {
@@ -339,6 +403,7 @@ export class TttxForm {
    * @return {void}
    */
   populateFormFromSchema() {
+    var _a;
     // If there is no form schema, return early
     if (!this._formSchema)
       return;
@@ -346,9 +411,17 @@ export class TttxForm {
     const properties = this._formSchema.properties;
     const propertyKeys = Object.keys(properties);
     // Loop through each property key and create an input, label, and error bubble for it
-    propertyKeys.forEach(formKey => {
+    for (const formKey of propertyKeys) {
       const formItem = properties[formKey];
       const formProperties = formItem.form;
+      // complex form types which require
+      // custom HTML should be done here
+      if (formProperties.type === 'startenddate') {
+        const { start, end } = this.createStartEndDateComponent(formKey, formProperties);
+        this.template.content.append(start);
+        this.template.content.append(end);
+        continue;
+      }
       let input;
       switch (formProperties.type) {
         case 'select':
@@ -361,15 +434,22 @@ export class TttxForm {
           input = this.createInput(formKey, formProperties);
       }
       // If the form property has validation, apply it to the input
-      if (formProperties.validation && formProperties.type !== 'radio') {
+      if (formProperties.validation &&
+        formProperties.type !== 'radio') {
         this.applyValidation(input, formProperties.validation);
       }
       // Create an error bubble and label element for the input
       const errorBubble = this.createErrorBubble();
       const label = this.createLabel(formProperties, input, errorBubble);
+      // If explicitly setting input as invalid, set invalid state and error message on render
+      if ((_a = formProperties.validation) === null || _a === void 0 ? void 0 : _a.invalid) {
+        const errorMessage = formProperties.validation.invalid.message;
+        input.setCustomValidity(errorMessage); // Prevents the invalid styling from resetting on blur
+        setErrorState(input, true, errorMessage);
+      }
       // Append the label element to the form template
       this.template.content.append(label);
-    });
+    }
   }
   /**
    * Clones the form template and binds event listeners to its input elements. First, it checks if
@@ -390,47 +470,121 @@ export class TttxForm {
     // Bind event listeners to form elements
     const properties = this._formSchema.properties;
     const propertyKeys = Object.keys(properties);
-    propertyKeys.forEach(formKey => {
-      var _a, _b;
-      const formInputs = formItems.querySelectorAll(`[name=${formKey}]`);
-      for (const formInput of formInputs) {
+    for (const formKey of propertyKeys) {
+      const formItemsByKey = formItems.querySelectorAll(`[name^=${formKey}]`);
+      for (const formInput of formItemsByKey) {
         // 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 ((_a = this._data) === null || _a === void 0 ? void 0 : _a[formKey]) {
-          switch (formInput.type) {
+        if (properties[formKey].form.type === 'select' && formInput.classList.contains('placeholder')) {
+          formInput.addEventListener('change', () => {
+            formInput.classList.remove('placeholder');
+          });
+        }
+        if (properties[formKey].form.type === 'startenddate' && formInput.hasAttribute('data-compare-with')) {
+          formInput.oninvalid = this.endDateComparisonValidator.bind(this);
+          formInput.onblur = this.endDateComparisonValidator.bind(this);
+        }
+        if (properties[formKey].form.type === 'startenddate' && formInput.type === 'time') {
+          formInput.oninvalid = this.startEndTimeComparitor.bind(this);
+          formInput.onblur = this.startEndTimeComparitor.bind(this);
+        }
+        if (properties[formKey].form.type === 'startenddate' && formInput.hasAttribute('data-compare-to')) {
+          formInput.oninvalid = this.startDateComparisonValidator.bind(this);
+          formInput.onblur = this.startDateComparisonValidator.bind(this);
+        }
+      }
+    }
+    // populate with existing form data if available
+    if (this._data && Object.keys(this._data).length > 0) {
+      const dataKeys = Object.keys(this._data);
+      for (const key of dataKeys) {
+        const formItemsByKey = formItems.querySelectorAll(`[name=${key}]`);
+        for (const formItem of formItemsByKey) {
+          switch (formItem.type) {
             case 'checkbox':
-              if (this._data[formKey] === 'on') {
-                formInput.checked = true;
+              if (this._data[key] === 'on') {
+                formItem.checked = true;
               }
               break;
             case 'radio':
-              if (formInput.value === this._data[formKey]) {
-                formInput.checked = true;
+              if (formItem.value === this._data[key]) {
+                formItem.checked = true;
               }
               break;
             default:
-              formInput.value = this._data[formKey];
+              formItem.value = this._data[key];
           }
         }
-        // If explicitly setting input as invalid, set invalid state and error message on render
-        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);
-        }
-        if (properties[formKey].form.type === 'select' && formInput.classList.contains('placeholder')) {
-          formInput.addEventListener('change', () => {
-            formInput.classList.remove('placeholder');
-          });
-        }
       }
-    });
+    }
     // Append the cloned form elements to the fieldset
     this.fieldset.replaceChildren(formItems);
   }
+  startEndTimeComparitor(event) {
+    var _a, _b;
+    const target = event.target;
+    const formKey = target.getAttribute('data-formkey');
+    const timeFields = Array.from(target.parentElement.parentElement.parentElement.querySelectorAll(`[data-formkey=${formKey}]`));
+    if (timeFields.length === 4) {
+      const startTime = timeFields.find(t => t.name.endsWith('starttime'));
+      const endTime = timeFields.find(t => t.name.endsWith('endtime'));
+      const startDate = timeFields.find(t => t.name.endsWith('startdate'));
+      const endDate = timeFields.find(t => t.name.endsWith('enddate'));
+      if (startTime.valueAsNumber >= endTime.valueAsNumber && ((_a = startDate.valueAsDate) === null || _a === void 0 ? void 0 : _a.valueOf()) === ((_b = endDate.valueAsDate) === null || _b === void 0 ? void 0 : _b.valueOf())) {
+        setErrorState(endTime, true, 'End time cannot be the same or before the start time');
+        if (target.name.endsWith('starttime')) {
+          this.validityCheckWrapper(event);
+        }
+      }
+      else {
+        // clear any end time comparitor errors and perform the standard validity check on the event
+        endTime.setCustomValidity('');
+        setErrorState(endTime, false, null);
+        this.validityCheckWrapper(event);
+      }
+    }
+  }
+  clearTimeComparitor(event) {
+    const target = event.target;
+    const formKey = target.getAttribute('data-formkey');
+    const timeFields = Array.from(target.parentElement.parentElement.parentElement.querySelectorAll(`[type=time][data-formkey=${formKey}]`));
+    if (timeFields.length) {
+      const endTime = timeFields.find(t => t.name.endsWith('endtime'));
+      endTime.setCustomValidity('');
+      setErrorState(endTime, false, null);
+    }
+  }
+  startDateComparisonValidator(event) {
+    const startDate = event.target;
+    const compareToName = startDate.getAttribute('data-compare-to');
+    const endDate = startDate.parentElement.parentElement.parentElement.querySelector(`[name=${compareToName}]`);
+    this.endDateComparisonValidator({ target: endDate }, true);
+    this.validityCheckWrapper(event);
+  }
+  endDateComparisonValidator(event, triggeredByStartDate = false) {
+    var _a, _b, _c, _d;
+    const endDate = event.target;
+    if (!endDate.value && triggeredByStartDate)
+      return;
+    const compareWithName = endDate.getAttribute('data-compare-with');
+    const startDate = endDate.parentElement.parentElement.parentElement.querySelector(`[name=${compareWithName}]`);
+    if (((_a = endDate.valueAsDate) === null || _a === void 0 ? void 0 : _a.valueOf()) < ((_b = startDate.valueAsDate) === null || _b === void 0 ? void 0 : _b.valueOf())) {
+      endDate.setCustomValidity(endDate.getAttribute('data-compare'));
+      setErrorState(endDate, true, endDate.getAttribute('data-compare'));
+    }
+    else if (((_c = endDate.valueAsDate) === null || _c === void 0 ? void 0 : _c.valueOf()) === ((_d = startDate.valueAsDate) === null || _d === void 0 ? void 0 : _d.valueOf())) {
+      endDate.setCustomValidity('');
+      this.validityCheckWrapper(event);
+      this.startEndTimeComparitor(event);
+    }
+    else {
+      this.clearTimeComparitor(event);
+      this.validityCheckWrapper(event);
+    }
+  }
   validityCheckWrapper(event) {
     const { target, hasError, errorMessage } = validityCheck(event);
     setErrorState(target, hasError, errorMessage);

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

@@ -121,6 +121,30 @@ const formSchema = {
         },
       },
     },
+    startend: {
+      type: 'string',
+      format: 'string',
+      form: {
+        type: 'startenddate',
+        includeTime: true
+      },
+    },
+    expiration: {
+      type: 'radio',
+      form: {
+        type: 'radio',
+        label: 'Expiration',
+        options: [
+          { label: 'Never expires', value: 'neverExpires' },
+          { label: 'Will expire', value: 'willExpire' },
+        ],
+        validation: {
+          required: {
+            message: 'Please select validity',
+          },
+        },
+      },
+    },
     permissions: {
       form: {
         type: 'checkbox',
@@ -146,6 +170,9 @@ SingleFormItem.args = {
           type: 'text',
           label: 'Input Field',
           validation: {
+            invalid: {
+              message: "This field is invalid"
+            },
             required: {
               message: 'Please enter something',
             },
@@ -155,6 +182,21 @@ SingleFormItem.args = {
     },
   },
 };
+export const StartAndEndDateWithoutTime = args => `<tttx-form formSchema='${JSON.stringify(args.formSchema)}'></tttx-form>`;
+StartAndEndDateWithoutTime.args = {
+  formSchema: {
+    properties: {
+      startend: {
+        type: 'string',
+        format: 'string',
+        form: {
+          type: 'startenddate',
+          includeTime: false
+        },
+      },
+    },
+  },
+};
 export const ExampleFormFromJSON = args => `<tttx-form id='form' formSchema='${JSON.stringify(args.formSchema)}'></tttx-form>
 <hr/>
 <button type='button' id='button'>Submit Form</button>
@@ -289,16 +331,12 @@ const formSchemaWithReadonly = {
         },
       },
     },
-    permissions: {
+    startend: {
+      type: 'string',
+      format: 'string',
       form: {
-        type: 'checkbox',
-        label: 'Permissions',
-        inlineLabel: 'Please grant permissions to use data',
-        validation: {
-          required: {
-            message: 'Please grant permissions to use data',
-          },
-        },
+        type: 'startenddate',
+        includeTime: true
       },
     },
     expiration: {
@@ -317,6 +355,18 @@ const formSchemaWithReadonly = {
         },
       },
     },
+    permissions: {
+      form: {
+        type: 'checkbox',
+        label: 'Permissions',
+        inlineLabel: 'Please grant permissions to use data',
+        validation: {
+          required: {
+            message: 'Please grant permissions to use data',
+          },
+        },
+      },
+    },
   },
 };
 const data = {
@@ -328,7 +378,11 @@ const data = {
   dob: '1973-06-02',
   dropdown: 'chicken',
   permissions: 'on',
-  expiration: 'willExpire'
+  expiration: 'willExpire',
+  'startend-startdate': '2021-09-01',
+  'startend-starttime': '09:00',
+  'startend-enddate': '2024-10-15',
+  'startend-endtime': '17:00'
 };
 export const PrePopulateForm = args => `<tttx-form id='form' formSchema='${JSON.stringify(args.formSchema)}' data='${JSON.stringify(args.data)}'></tttx-form>
 <hr/>

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

@@ -69,15 +69,12 @@ export class TttxTabs {
     if (!this.tabs || this.tabs.length == 0) {
       return;
     }
-    let currentTab = this._tabs[0];
-    if (this.tabFocus > -1) {
-      currentTab = this._tabs[this.tabFocus];
-    }
+    const selectedTab = this._tabs.find(tab => tab.selected);
     return (h(Host, null, h("div", null, h("div", { class: "tab-bar", role: "tablist", "aria-label": this.tabsName, ref: el => (this.tabList = el) }, this.navigation && (h("div", { class: "left-navigation", tabindex: "0", onClick: this.handleLeftNavigation.bind(this) }, h("tttx-icon", { icon: "navigate_before", color: "black" }))), h("div", { class: 'tabs-container' + (this.wide ? ' wide' : '') }, this._tabs.map(tab => {
       return (h("a", { key: tab.id, id: tab.id, role: "tab", "aria-controls": tab.controls, tabindex: tab.tabIndex, "aria-selected": tab.selected, onClick: () => {
           this.handleTabClick(tab);
         } }, tab.tabName));
-    })), this.navigation && (h("div", { class: "right-navigation", tabindex: "0", onClick: this.handleRightNavigation.bind(this) }, h("tttx-icon", { icon: "navigate_next", color: "black" })))), h("article", { key: currentTab.id, id: currentTab.controls, role: "tabpanel", tabindex: "0", "aria-labelledby": currentTab.id, "aria-expanded": currentTab.selected, innerHTML: DOMPurify.sanitize(currentTab.pageContent, domSanitiserOptions), hidden: !currentTab.selected }))));
+    })), this.navigation && (h("div", { class: "right-navigation", tabindex: "0", onClick: this.handleRightNavigation.bind(this) }, h("tttx-icon", { icon: "navigate_next", color: "black" })))), selectedTab && (h("article", { key: selectedTab.id, id: selectedTab.controls, role: "tabpanel", tabindex: "0", "aria-labelledby": selectedTab.id, "aria-expanded": selectedTab.selected, innerHTML: DOMPurify.sanitize(selectedTab.pageContent, domSanitiserOptions), hidden: !selectedTab.selected })))));
   }
   static get is() { return "tttx-tabs"; }
   static get encapsulation() { return "scoped"; }

package/dist/components/tttx-checkbox.js

@@ -30,7 +30,7 @@ const TttxCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   render() {
     const checkBoxIcon = this.checked ? 'check_box' : 'check_box_outline_blank';
     const renderedIcon = this.indeterminate ? 'indeterminate_check_box' : checkBoxIcon;
-    return (h(Host, null, h("label", { class: `tttx-checkbox ${this.inline ? '--inline' : ''}` }, h("input", { class: "tttx-checkbox__input", type: "checkbox", id: this.checkboxId, checked: this.checked, ref: (el) => this.checkbox = el }), h("tttx-icon", { color: this.checked ? 'blue' : null, icon: renderedIcon, onClick: this.onClick.bind(this) }), h("span", { class: "tttx-checkbox__label" }, this.label))));
+    return (h(Host, null, h("label", { class: `tttx-checkbox ${this.inline ? '--inline' : ''}` }, h("input", { class: "tttx-checkbox__input", type: "checkbox", id: this.checkboxId, checked: this.checked, ref: (el) => this.checkbox = el }), h("tttx-icon", { color: this.checked ? 'blue' : 'grey', icon: renderedIcon, onClick: this.onClick.bind(this) }), h("span", { class: "tttx-checkbox__label" }, this.label))));
   }
   static get watchers() { return {
     "indeterminate": ["watchIndeterminateChange"]

package/dist/components/tttx-dialog-box.js

@@ -3,7 +3,7 @@ import { p as purify, d as domSanitiserOptions } from './domsanitiser.options.js
 import { d as defineCustomElement$3 } from './tttx-button2.js';
 import { d as defineCustomElement$2 } from './tttx-icon2.js';
 
-const tttxDialogBoxCss = ".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}h3{margin-block-start:0em;margin-block-end:0em}.dialog-box{background-color:#ffffff;border:1px solid #d5d5d5;border-radius:4px;box-shadow:0px 1px 5px #1111114d;padding:0}.overflow-visible{overflow-y:auto}.overflow-hidden{overflow:hidden}dialog::backdrop{background-color:#75757580}.dialog-box.small{width:400px;min-height:200px}.dialog-box.regular{width:600px;min-height:200px}.dialog-box.large{width:900px;min-height:200px}.dialog-box.mobile{max-width:424px;width:calc(100vw - 20px)}.dialog-box-clickable{cursor:pointer}.contents{display:flex;flex-direction:column;min-height:inherit}.dialog-box-padding{padding:8px 16px}.dialog-box-align-right{margin-left:auto;display:flex}.dialog-box-header-box{border-bottom:1px solid #d5d5d5;display:flex;flex-direction:row;height:36px;position:sticky;top:0;background:white}.dialog-box-header{display:flex;align-items:center;width:100%}.dialog-box-title{font-size:18;font-weight:500;font-family:\"Roboto\", serif}.dialog-box-icon{padding-right:8px;width:24px;height:24px}.dialog-box-icon-close{margin-left:auto;padding-top:3px;width:24px;height:24px}.dialog-box-content{font-size:16;font-weight:400;font-family:\"Roboto\", serif}.dialog-box-body{text-overflow:ellipsis}.dialog-box-body-box{padding:16px}.dialog-box-footer-box{display:flex;flex-direction:row;margin-top:auto;border-top:1px solid #d5d5d5;height:36px;position:sticky;bottom:0;background:white}.dialog-box-footer{display:flex;align-items:center;width:100%}.dialog-box-spacing-button{margin-right:8px}.dialog-box-header-box.info{border-bottom:1px solid #1479c6}.dialog-box-header-box.success{border-bottom:1px solid #a2bb31}.dialog-box-header-box.warning{border-bottom:1px solid #f59500}.dialog-box-header-box.critical{border-bottom:1px solid #dc0000}";
+const tttxDialogBoxCss = ".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}h3{margin-block-start:0em;margin-block-end:0em}.dialog-box{background-color:#ffffff;border:1px solid #d5d5d5;border-radius:4px;box-shadow:0px 1px 5px #1111114d;padding:0}.overflow-visible{overflow-y:auto}.overflow-hidden{overflow:hidden}dialog::backdrop{background-color:#75757580}.dialog-box.small{width:400px;min-height:200px}.dialog-box.regular{width:600px;min-height:200px}.dialog-box.large{width:900px;min-height:200px}.dialog-box.mobile{max-width:424px;width:calc(100vw - 20px)}.dialog-box-clickable{cursor:pointer}.contents{display:flex;flex-direction:column;min-height:inherit}.dialog-box-padding{padding:8px 16px}.dialog-box-align-right{margin-left:auto;display:flex}.dialog-box-header-box{border-bottom:1px solid #d5d5d5;display:flex;flex-direction:row;height:36px;position:sticky;top:0;background:white;z-index:2}.dialog-box-header{display:flex;align-items:center;width:100%}.dialog-box-title{font-size:18;font-weight:500;font-family:\"Roboto\", serif}.dialog-box-icon{padding-right:8px;width:24px;height:24px}.dialog-box-icon-close{margin-left:auto;padding-top:3px;width:24px;height:24px}.dialog-box-content{font-size:16;font-weight:400;font-family:\"Roboto\", serif}.dialog-box-body{text-overflow:ellipsis}.dialog-box-body-box{padding:16px}.dialog-box-footer-box{display:flex;flex-direction:row;margin-top:auto;border-top:1px solid #d5d5d5;height:36px;position:sticky;bottom:0;background:white}.dialog-box-footer{display:flex;align-items:center;width:100%}.dialog-box-spacing-button{margin-right:8px}.dialog-box-header-box.info{border-bottom:1px solid #1479c6}.dialog-box-header-box.success{border-bottom:1px solid #a2bb31}.dialog-box-header-box.warning{border-bottom:1px solid #f59500}.dialog-box-header-box.critical{border-bottom:1px solid #dc0000}";
 
 const TttxDialogBox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/tttx-dialog.js

@@ -8,7 +8,7 @@ const ICON_TYPES = {
   warning: { iconName: 'warning', iconColor: 'orange' },
 };
 
-const tttxDialogCss = ".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}h3{margin-block-start:0em;margin-block-end:0em}.dialog-box{background-color:#ffffff;border:1px solid #d5d5d5;border-radius:4px;box-shadow:0px 1px 5px #1111114d;padding:0}.dialog-box.small{width:400px;min-height:200px}.dialog-box.regular{width:600px;min-height:200px}.dialog-box.large{width:900px;min-height:200px}.dialog-box.mobile{max-width:424px;width:calc(100vw - 20px)}.overflow-visible{overflow-y:auto}.overflow-hidden{overflow:hidden}dialog::backdrop{background-color:#75757580}.clickable{cursor:pointer}.contents{display:flex;flex-direction:column;min-height:inherit}.padding{padding:8px 16px}.align-right{margin-left:auto;display:flex}.header{border-bottom:1px solid #d5d5d5;display:flex;flex-direction:row;align-items:center;height:36px;position:sticky;top:0;background:white}.title{font-size:18;font-weight:500;font-family:\"Roboto\", serif;text-overflow:ellipsis;overflow-x:hidden;white-space:nowrap}.icon{padding-right:8px;width:24px;height:24px}.icon-close{margin-left:auto;padding-top:3px;width:24px;height:24px}.body-content{font-size:16;font-weight:400;font-family:\"Roboto\", serif}.body{text-overflow:ellipsis;padding:16px}.footer{display:flex;flex-direction:row;margin-top:auto;border-top:1px solid #d5d5d5;height:36px;position:sticky;background:white;bottom:0}::slotted([slot=buttons]){display:flex;gap:8px}.header.info{border-bottom:1px solid #1479c6}.header.success{border-bottom:1px solid #a2bb31}.header.warning{border-bottom:1px solid #f59500}.header.critical{border-bottom:1px solid #dc0000}";
+const tttxDialogCss = ".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}h3{margin-block-start:0em;margin-block-end:0em}.dialog-box{background-color:#ffffff;border:1px solid #d5d5d5;border-radius:4px;box-shadow:0px 1px 5px #1111114d;padding:0}.dialog-box.small{width:400px;min-height:200px}.dialog-box.regular{width:600px;min-height:200px}.dialog-box.large{width:900px;min-height:200px}.dialog-box.mobile{max-width:424px;width:calc(100vw - 20px)}.overflow-visible{overflow-y:auto}.overflow-hidden{overflow:hidden}dialog::backdrop{background-color:#75757580}.clickable{cursor:pointer}.contents{display:flex;flex-direction:column;min-height:inherit}.padding{padding:8px 16px}.align-right{margin-left:auto;display:flex}.header{border-bottom:1px solid #d5d5d5;display:flex;flex-direction:row;align-items:center;height:36px;position:sticky;top:0;background:white;z-index:2}.title{font-size:18;font-weight:500;font-family:\"Roboto\", serif;text-overflow:ellipsis;overflow-x:hidden;white-space:nowrap}.icon{padding-right:8px;width:24px;height:24px}.icon-close{margin-left:auto;padding-top:3px;width:24px;height:24px}.body-content{font-size:16;font-weight:400;font-family:\"Roboto\", serif}.body{text-overflow:ellipsis;padding:16px}.footer{display:flex;flex-direction:row;margin-top:auto;border-top:1px solid #d5d5d5;height:36px;position:sticky;background:white;bottom:0}::slotted([slot=buttons]){display:flex;gap:8px}.header.info{border-bottom:1px solid #1479c6}.header.success{border-bottom:1px solid #a2bb31}.header.warning{border-bottom:1px solid #f59500}.header.critical{border-bottom:1px solid #dc0000}";
 
 const TttxDialog$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {