@sankhyalabs/ezui 7.3.4-dev.1 → 7.3.4

package/dist/cjs/ez-classic-combo-box.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
 
-const ezClassicComboBoxCss = ":host{display:block;box-sizing:border-box;font-family:var(--font--pattern, 'Roboto', Arial, sans-serif);font-size:var(--font-size--default, 14px);color:var(--color--gray-500, #494A4E);--ez-classic-combo-box-highlighted-bg-color:var(--color--gray-90, #EAEAEA);--ez-classic-combo-box-max-height:180px;--ez-classic-combo-box-list-bg-color:var(--color--gray-70, #FFFFFF);--ez-classic-combo-box-item-hover-bg-color:var(--color--gray-100, #DEDEDE);--ez-classic-combo-box-selected-bg-color:var(--color--ocean-green-90, #E6F3EF);--ez-classic-combo-box-selected-text-color:var(--color--ocean-green-600, #008561);--ez-classic-combo-box-selected-font-weight:var(--font-weight--medium, 500);--ez-classic-combo-box-item-padding:var(--space--8, 8px) var(--space--4, 4px);--ez-classic-combo-box-item-border-radius:var(--border--radius-8, 8px);--ez-classic-combo-box-list-margin:var(--space--6, 6px);--ez-classic-combo-box-transition-duration:150ms;--ez-classic-combo-box-scrollbar-color:var(--color--gray-300, #C4C4C4);--ez-classic-combo-box-no-results-margin:var(--space--52, 52px) 0;--ez-classic-combo-box-item-text-color:inherit;--ez-classic-combo-box-item-min-height:auto;--ez-classic-combo-box-width:100%;width:var(--ez-classic-combo-box-width)}ul{list-style:none;padding:0;margin:var(--ez-classic-combo-box-list-margin);display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--ez-classic-combo-box-scrollbar-color) transparent;max-height:var(--ez-classic-combo-box-max-height);scroll-behavior:smooth;background-color:var(--ez-classic-combo-box-list-bg-color)}li{cursor:pointer;border-radius:var(--ez-classic-combo-box-item-border-radius);padding:var(--ez-classic-combo-box-item-padding);transition:var(--ez-classic-combo-box-transition-duration) background-color linear;color:var(--ez-classic-combo-box-item-text-color);min-height:var(--ez-classic-combo-box-item-min-height)}li:hover{background-color:var(--ez-classic-combo-box-item-hover-bg-color)}li.highlighted{background-color:var(--ez-classic-combo-box-highlighted-bg-color)}li.selected{background-color:var(--ez-classic-combo-box-selected-bg-color);color:var(--ez-classic-combo-box-selected-text-color);font-weight:var(--ez-classic-combo-box-selected-font-weight)}span.no-results{margin:var(--ez-classic-combo-box-no-results-margin);cursor:default;text-align:center;display:flex;align-items:center;justify-content:center}";
+const ezClassicComboBoxCss = ":host{display:block;box-sizing:border-box;font-family:var(--font--pattern, 'Roboto', Arial, sans-serif);font-size:var(--font-size--default, 14px);color:var(--color--gray-500, #494A4E);--ez-classic-combo-box-highlighted-bg-color:var(--color--gray-90, #EAEAEA);--ez-classic-combo-box-max-height:180px;--ez-classic-combo-box-list-bg-color:var(--color--gray-70, #FFFFFF);--ez-classic-combo-box-item-hover-bg-color:var(--color--gray-100, #DEDEDE);--ez-classic-combo-box-selected-bg-color:var(--color--ocean-green-90, #E6F3EF);--ez-classic-combo-box-selected-text-color:var(--color--ocean-green-600, #008561);--ez-classic-combo-box-selected-font-weight:var(--font-weight--medium, 500);--ez-classic-combo-box-item-padding:var(--space--8, 8px) var(--space--4, 4px);--ez-classic-combo-box-item-border-radius:var(--border--radius-8, 8px);--ez-classic-combo-box-list-margin:var(--space--6, 6px);--ez-classic-combo-box-transition-duration:150ms;--ez-classic-combo-box-scrollbar-color:var(--color--gray-300, #C4C4C4);--ez-classic-combo-box-no-results-margin:var(--space--52, 52px) 0;--ez-classic-combo-box-item-text-color:inherit;--ez-classic-combo-box-item-min-height:auto}ul{list-style:none;padding:0;margin:var(--ez-classic-combo-box-list-margin);display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--ez-classic-combo-box-scrollbar-color) transparent;max-height:var(--ez-classic-combo-box-max-height);scroll-behavior:smooth;background-color:var(--ez-classic-combo-box-list-bg-color)}li{cursor:pointer;border-radius:var(--ez-classic-combo-box-item-border-radius);padding:var(--ez-classic-combo-box-item-padding);transition:var(--ez-classic-combo-box-transition-duration) background-color linear;color:var(--ez-classic-combo-box-item-text-color);min-height:var(--ez-classic-combo-box-item-min-height)}li:hover{background-color:var(--ez-classic-combo-box-item-hover-bg-color)}li.highlighted{background-color:var(--ez-classic-combo-box-highlighted-bg-color)}li.selected{background-color:var(--ez-classic-combo-box-selected-bg-color);color:var(--ez-classic-combo-box-selected-text-color);font-weight:var(--ez-classic-combo-box-selected-font-weight)}span.no-results{margin:var(--ez-classic-combo-box-no-results-margin);cursor:default;text-align:center;display:flex;align-items:center;justify-content:center}";
 
 const EzClassicComboBox = class {
   constructor(hostRef) {
@@ -26,13 +26,10 @@ const EzClassicComboBox = class {
     this.label = undefined;
     this.placeholder = undefined;
     this.enabled = true;
-    this.required = false;
     this.readonly = false;
     this.name = undefined;
     this.state = "default";
-    this.size = "default";
     this.helpText = undefined;
-    this.errorMessage = undefined;
     this.iconName = undefined;
     this.titleIcon = undefined;
     this.iconClickable = false;
@@ -76,23 +73,9 @@ const EzClassicComboBox = class {
     this.popoverVisible = false;
     await ((_a = this._popoverElem) === null || _a === void 0 ? void 0 : _a.hide());
   }
-  getFullOption(option) {
-    if (typeof option === 'string') {
-      return this.options.find(opt => opt.value === option);
-    }
-    return option;
-  }
-  getOptionValue(option) {
-    if (!option) {
-      return null;
-    }
-    if (typeof option === 'string') {
-      return option;
-    }
-    return option.value;
-  }
   compareOptionValues(option1, option2) {
-    return this.getOptionValue(option1) === this.getOptionValue(option2);
+    var _a, _b;
+    return JSON.stringify((_a = option1 === null || option1 === void 0 ? void 0 : option1.value) !== null && _a !== void 0 ? _a : null) === JSON.stringify((_b = option2 === null || option2 === void 0 ? void 0 : option2.value) !== null && _b !== void 0 ? _b : null);
   }
   setEmptyValue() {
     this.value = null;
@@ -108,11 +91,10 @@ const EzClassicComboBox = class {
       await this.hidePopover();
       return;
     }
-    if (!this.getOptionValue(option)) {
+    if (!option.value) {
       this.setEmptyValue();
     }
     else {
-      option = this.getFullOption(option);
       this.value = option;
       this.inputValue = option.label;
     }
@@ -122,14 +104,9 @@ const EzClassicComboBox = class {
   async optionsChanged() {
     this.filterOptions('');
   }
-  async valueChanged(newValue, oldValue) {
-    var _a;
-    if (this.compareOptionValues(newValue, oldValue)) {
-      return;
-    }
+  async valueChanged(newValue) {
     if (newValue) {
-      this.value = this.getFullOption(newValue);
-      this.inputValue = (_a = this.value) === null || _a === void 0 ? void 0 : _a.label;
+      this.inputValue = newValue.label;
       this.setHighlightedIndexToValue();
     }
     else {
@@ -163,12 +140,12 @@ const EzClassicComboBox = class {
     this.filterOptions(this.inputValue);
   }
   async handleEzBlur(event) {
+    var _a, _b;
     event.stopPropagation();
-    const optionValue = this.getFullOption(this.value);
-    if ((optionValue === null || optionValue === void 0 ? void 0 : optionValue.label) !== this.inputValue) {
-      this.inputValue = (optionValue === null || optionValue === void 0 ? void 0 : optionValue.label) || '';
+    if (((_a = this.value) === null || _a === void 0 ? void 0 : _a.label) !== this.inputValue) {
+      this.inputValue = ((_b = this.value) === null || _b === void 0 ? void 0 : _b.label) || '';
     }
-    this.ezBlur.emit(optionValue);
+    this.ezBlur.emit(this.value);
   }
   filterOptions(searchTerm) {
     if (!this.options) {
@@ -269,7 +246,7 @@ const EzClassicComboBox = class {
   }
   setHighlightedIndexToValue() {
     if (this.value && this.filteredOptions) {
-      const index = this.filteredOptions.findIndex(opt => opt.value === this.getOptionValue(this.value));
+      const index = this.filteredOptions.findIndex(opt => opt.value === this.value.value);
       if (index >= 0) {
         this.highlightedIndex = index;
         return;
@@ -320,17 +297,17 @@ const EzClassicComboBox = class {
     this.addInfoId();
     this.checkSlotContent();
     if (this.value) {
-      this.inputValue = this.getFullOption(this.value).label;
+      this.inputValue = this.value.label;
       this.setHighlightedIndexToValue();
     }
   }
   render() {
     var _a;
-    return (index.h(index.Host, null, index.h("ez-classic-input", { ref: ref => this._inputElem = ref, name: this.name, label: this.label, placeholder: this.placeholder, value: this.inputValue, state: this.state, enabled: this.enabled, required: this.required, size: this.size, readonly: this.readonly || this.suppressSearch, leftIconName: this.iconName, leftIconTooltip: this.titleIcon, leftIconClickable: this.iconClickable, rightIconClickable: true, helpText: this.helpText, errorMessage: this.errorMessage, rightIconName: this.popoverVisible ? 'chevron-up' : 'chevron-down', onIconClick: this.handleIconClick.bind(this), onEzChange: this.handleEzChange.bind(this), onEzFocus: this.showPopover.bind(this), onEzBlur: this.handleEzBlur.bind(this) }), index.h("ez-popover-core", { ref: ref => this._popoverElem = ref, useAnchorSize: true, onEzVisibilityChange: this.handleVisibilityChange.bind(this), overlayType: "none", options: { verticalGap: 2, horizontalGap: 0 }, autoClose: false }, index.h("slot", { onSlotchange: this.checkSlotContent.bind(this) }), !this.hasSlotContent && (((_a = this.filteredOptions) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (index.h("ul", { ref: ref => this._listElem = ref, tabIndex: -1 }, this.filteredOptions.map((option, index$1) => {
-      var _a;
+    return (index.h(index.Host, null, index.h("ez-classic-input", { ref: ref => this._inputElem = ref, name: this.name, label: this.label, placeholder: this.placeholder, value: this.inputValue, state: this.state, enabled: this.enabled, readonly: this.readonly || this.suppressSearch, leftIconName: this.iconName, leftIconTooltip: this.titleIcon, leftIconClickable: this.iconClickable, rightIconClickable: true, helpText: this.helpText, rightIconName: this.popoverVisible ? 'chevron-up' : 'chevron-down', onIconClick: this.handleIconClick.bind(this), onEzChange: this.handleEzChange.bind(this), onEzFocus: this.showPopover.bind(this), onEzBlur: this.handleEzBlur.bind(this) }), index.h("ez-popover-core", { ref: ref => this._popoverElem = ref, useAnchorSize: true, onEzVisibilityChange: this.handleVisibilityChange.bind(this), overlayType: "none", options: { verticalGap: 2, horizontalGap: 0 }, autoClose: false }, index.h("slot", { onSlotchange: this.checkSlotContent.bind(this) }), !this.hasSlotContent && (((_a = this.filteredOptions) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (index.h("ul", { ref: ref => this._listElem = ref, tabIndex: -1 }, this.filteredOptions.map((option, index$1) => {
+      var _a, _b;
       return (index.h("li", { key: (_a = option.value) !== null && _a !== void 0 ? _a : '__empty__', value: option.value, class: {
           'highlighted': this.highlightedIndex === index$1,
-          'selected': this.getOptionValue(this.value) === option.value
+          'selected': ((_b = this.value) === null || _b === void 0 ? void 0 : _b.value) === option.value
         }, onMouseDown: () => this.selectOption(option) }, option.label));
     }))) : (index.h("span", { class: "no-results" }, "Nenhum resultado encontrado"))))));
   }

package/dist/cjs/ez-classic-input.cjs.entry.js

@@ -201,7 +201,7 @@ class MaskFormatter {
   }
 }
 
-const ezClassicInputCss = ":host{display:flex;flex-direction:column;align-items:flex-start;box-sizing:border-box;font-family:var(--font--pattern, Arial, sans-serif);font-size:var(--font-size--default, 14px);color:var(--color--ocean-green-1000, #00281D);border:none;padding:0;padding-inline:var(--space--2, 2px);width:100%;--ez-classic-input--label-color:var(--color--ocean-green-1000, #00281D);--ez-classic-input--border-color-default:var(--color--gray-200, #D2D2D3);--ez-classic-input--border-color-focus:var(--color--gray-300, #A4A5A7);--ez-classic-input--border-color-success:var(--color--green-600, #157A00);--ez-classic-input--border-color-error:var(--color--red-600, #BD0025);--ez-classic-input--border-color-warning:var(--color--yellow-600, #EFB103);--ez-classic-input--background-color:var(--color--gray-70, #FFFFFF);--ez-classic-input--background-color-disabled:var(--color--gray-90, #EAEAEA);--ez-classic-input--text-color:var(--color--ocean-green-1000, #00281D);--ez-classic-input--placeholder-color:#bdbdbd;--ez-classic-input--icon-color:var(--color--gray-400, #77777A);--ez-classic-input--helptext-color:var(--color--ocean-green-1000, #00281D);--ez-classic-input--height:var(--space--56, 56px);--ez-classic-input--height-small:var(--space--48, 48px);--ez-classic-input--height-xsmall:var(--space--40, 40px);--ez-classic-input--gap:var(--space--10, 10px);--ez-classic-input--padding-inline:var(--space--16, 16px)}.input-container{display:flex;flex-direction:row;align-items:center;width:100%;border:none;border-radius:var(--border--radius-8, 8px);padding-inline:var(--ez-classic-input--padding-inline);box-sizing:border-box;gap:var(--ez-classic-input--gap);margin-block:var(--space--4, 4px);transition:box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);height:var(--ez-classic-input--height);background-color:var(--ez-classic-input--background-color)}.input-container--small{height:var(--ez-classic-input--height-small)}.input-container--xsmall{height:var(--ez-classic-input--height-xsmall)}.input-container,.input-container[data-state=\"default\"]{box-shadow:0 0 0 1px var(--ez-classic-input--border-color-default)}.input-container[data-state=\"success\"]{box-shadow:0 0 0 var(--space--2, 2px) var(--ez-classic-input--border-color-success)}.input-container[data-state=\"error\"]{box-shadow:0 0 0 var(--space--2, 2px) var(--ez-classic-input--border-color-error)}.input-container[data-state=\"warning\"]{box-shadow:0 0 0 var(--space--2, 2px) var(--ez-classic-input--border-color-warning)}.input-container:focus-within{box-shadow:0 0 0 var(--space--2, 2px) var(--ez-classic-input--border-color-focus)}ez-icon{min-width:var(--space--24, 24px);color:var(--ez-classic-input--icon-color)}input{flex:1;border:none;outline:none;background:transparent;height:100%;width:100%;padding:0;font-family:var(--font--pattern, Arial, sans-serif);font-size:var(--font-size--default, 14px);color:var(--color--ocean-green-1000, #00281D);text-overflow:ellipsis;color:var(--ez-classic-input--text-color)}input::placeholder{color:var(--ez-classic-input--placeholder-color)}.input-container[data-disabled=\"true\"]{cursor:not-allowed;background:var(--ez-classic-input--background-color-disabled);border-color:var(--ez-classic-input--border-color-default)}.input-container[data-disabled=\"true\"]>*{cursor:not-allowed}.input-container input:read-only{cursor:default}@keyframes ez-helptext-fadein{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}span{font-size:var(--font-size--xsmall, 10px);line-height:var(--line-height--16, 16px);overflow:hidden;text-overflow:ellipsis;animation:ez-helptext-fadein 0.3s ease;color:var(--ez-classic-input--helptext-color)}label{display:block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ez-classic-input--label-color)}.icon-clickable{cursor:pointer}.required-indicator{font-size:var(--font--size--default, 14px);font-family:var(--font--pattern, 'Roboto');color:var(--color--red-600, #BD0025);margin-left:var(--space--4, 4px);vertical-align:top}";
+const ezClassicInputCss = ":host{display:flex;flex-direction:column;align-items:flex-start;box-sizing:border-box;font-family:var(--font--pattern, Arial, sans-serif);font-size:var(--font-size--default, 14px);color:var(--color--ocean-green-1000, #00281D);border:none;padding:0;--ez-classic-input--label-color:var(--color--ocean-green-1000, #00281D);--ez-classic-input--border-color-default:var(--color--gray-200, #D2D2D3);--ez-classic-input--border-color-focus:var(--color--gray-300, #A4A5A7);--ez-classic-input--border-color-success:var(--color--green-600, #157A00);--ez-classic-input--border-color-error:var(--color--red-600, #BD0025);--ez-classic-input--border-color-warning:var(--color--yellow-600, #EFB103);--ez-classic-input--background-color:var(--color--gray-70, #FFFFFF);--ez-classic-input--background-color-disabled:var(--color--gray-90, #EAEAEA);--ez-classic-input--text-color:var(--color--ocean-green-1000, #00281D);--ez-classic-input--placeholder-color:#bdbdbd;--ez-classic-input--icon-color:var(--color--gray-400, #77777A);--ez-classic-input--helptext-color:var(--color--ocean-green-1000, #00281D);--ez-classic-input--height:56px}.input-container{display:flex;flex-direction:row;align-items:center;width:100%;border:none;border-radius:var(--border--radius-8, 8px);padding:var(--space--16, 16px);box-sizing:border-box;gap:var(--space--10, 10px);margin:var(--space--4, 4px) var(--space--2, 2px);transition:box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);height:var(--ez-classic-input--height);background-color:var(--ez-classic-input--background-color)}.input-container,.input-container[data-state=\"default\"]{box-shadow:0 0 0 1px var(--ez-classic-input--border-color-default)}.input-container[data-state=\"success\"]{box-shadow:0 0 0 var(--space--2, 2px) var(--ez-classic-input--border-color-success)}.input-container[data-state=\"error\"]{box-shadow:0 0 0 var(--space--2, 2px) var(--ez-classic-input--border-color-error)}.input-container[data-state=\"warning\"]{box-shadow:0 0 0 var(--space--2, 2px) var(--ez-classic-input--border-color-warning)}.input-container:focus-within{box-shadow:0 0 0 var(--space--2, 2px) var(--ez-classic-input--border-color-focus)}ez-icon{min-width:var(--space--24, 24px);color:var(--ez-classic-input--icon-color)}input{flex:1;border:none;outline:none;background:transparent;height:100%;width:100%;padding:0;font-family:var(--font--pattern, Arial, sans-serif);font-size:var(--font-size--default, 14px);color:var(--color--ocean-green-1000, #00281D);text-overflow:ellipsis;color:var(--ez-classic-input--text-color)}input::placeholder{color:var(--ez-classic-input--placeholder-color)}.input-container[data-disabled=\"true\"]{cursor:not-allowed;background:var(--ez-classic-input--background-color-disabled);border-color:var(--ez-classic-input--border-color-default)}.input-container[data-disabled=\"true\"]>*{cursor:not-allowed}.input-container input:read-only{cursor:default}@keyframes ez-helptext-fadein{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}span{font-size:var(--font-size--xsmall, 10px);line-height:var(--line-height--16, 16px);overflow:hidden;text-overflow:ellipsis;animation:ez-helptext-fadein 0.3s ease;color:var(--ez-classic-input--helptext-color)}label{display:block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:var(--line-height--20, 20px);color:var(--ez-classic-input--label-color)}.icon-clickable{cursor:pointer}";
 
 const EzClassicInput = class {
   constructor(hostRef) {
@@ -215,13 +215,10 @@ const EzClassicInput = class {
     this.value = undefined;
     this.label = undefined;
     this.helpText = undefined;
-    this.errorMessage = undefined;
     this.placeholder = undefined;
     this.enabled = true;
     this.readonly = false;
-    this.required = false;
     this.name = undefined;
-    this.size = "default";
     this.minlength = undefined;
     this.maxlength = undefined;
     this.leftIconName = undefined;
@@ -265,112 +262,29 @@ const EzClassicInput = class {
       this._inputElem.value = this.value || '';
     }
   }
-  async observeErrorMessage(newValue) {
-    if (newValue && newValue.trim() !== '') {
-      this.state = "error";
-      return;
-    }
-    this.state = "default";
-  }
   onInput(event) {
     try {
       const inputElement = event.target;
-      const inputValue = inputElement.value;
+      let inputValue = inputElement.value;
       if (this._maskFormatter) {
-        const { formattedValue, cleanValue } = this.processInputWithMask(inputValue);
-        this.updateInputValue(inputElement, formattedValue, cleanValue);
+        const formattedValue = this._maskFormatter.format(inputValue);
+        const cleanValue = this._maskFormatter.removeMask(formattedValue);
+        inputElement.value = formattedValue;
+        this._internalValueChange = true;
+        this.value = cleanValue;
+        const emitValue = this.emitMaskedValue ? formattedValue : cleanValue;
+        this.ezChange.emit(emitValue);
       }
       else {
-        this.updateInputValueWithoutMask(inputValue);
+        this._internalValueChange = true;
+        this.value = inputValue;
+        this.ezChange.emit(inputValue);
       }
     }
     catch (error) {
       console.error("Error processing input event:", error);
     }
   }
-  processInputWithMask(inputValue) {
-    if (this.mask === "cgc_cpf") {
-      return this.processCgcCpfMask(inputValue);
-    }
-    else {
-      return this.processRegularMask(inputValue);
-    }
-  }
-  processCgcCpfMask(inputValue) {
-    const numericOnly = inputValue.replace(/\D/g, '');
-    if (numericOnly.length === 11 || numericOnly.length === 14) {
-      const maskToUse = numericOnly.length === 11
-        ? core.MaskFormatter.DEFAULT_MASKS.cpf
-        : core.MaskFormatter.DEFAULT_MASKS.cnpj;
-      this._maskFormatter = new MaskFormatter(maskToUse);
-      const formattedValue = this._maskFormatter.format(numericOnly);
-      return { formattedValue, cleanValue: numericOnly };
-    }
-    // Se não tem o tamanho correto, mantém apenas os números
-    return { formattedValue: numericOnly, cleanValue: numericOnly };
-  }
-  processRegularMask(inputValue) {
-    const formattedValue = this._maskFormatter.format(inputValue);
-    const cleanValue = this._maskFormatter.removeMask(formattedValue);
-    return { formattedValue, cleanValue };
-  }
-  isDataChar(char) {
-    return /[a-zA-Z0-9]/.test(char);
-  }
-  countDataCharsBefore(value, pos) {
-    let count = 0;
-    for (let i = 0; i < pos && i < value.length; i++) {
-      if (this.isDataChar(value[i]))
-        count++;
-    }
-    return count;
-  }
-  skipLeadingSeparators(value, pos) {
-    while (pos < value.length && !this.isDataChar(value[pos])) {
-      pos++;
-    }
-    return pos;
-  }
-  findPositionAfterDataChars(formattedValue, targetCount) {
-    let count = 0;
-    for (let i = 0; i <= formattedValue.length; i++) {
-      if (count === targetCount) {
-        return this.skipLeadingSeparators(formattedValue, i);
-      }
-      if (i < formattedValue.length && this.isDataChar(formattedValue[i])) {
-        count++;
-      }
-    }
-    return formattedValue.length;
-  }
-  getCursorPositionAfterFormat(rawValue, formattedValue, cursorPos) {
-    const dataCharCount = this.countDataCharsBefore(rawValue, cursorPos);
-    return this.findPositionAfterDataChars(formattedValue, dataCharCount);
-  }
-  restoreCursorSelection(inputElement, rawValue, formattedValue, savedStart, savedEnd) {
-    const newStart = this.getCursorPositionAfterFormat(rawValue, formattedValue, savedStart);
-    const newEnd = savedStart === savedEnd
-      ? newStart
-      : this.getCursorPositionAfterFormat(rawValue, formattedValue, savedEnd);
-    inputElement.setSelectionRange(newStart, newEnd);
-  }
-  updateInputValue(inputElement, formattedValue, cleanValue) {
-    const rawValue = inputElement.value;
-    const savedStart = inputElement.selectionStart;
-    const savedEnd = inputElement.selectionEnd;
-    inputElement.value = formattedValue;
-    if (savedStart !== null && savedEnd !== null) {
-      this.restoreCursorSelection(inputElement, rawValue, formattedValue, savedStart, savedEnd);
-    }
-    this._internalValueChange = true;
-    this.value = cleanValue;
-    this.ezChange.emit(this.emitMaskedValue ? formattedValue : cleanValue);
-  }
-  updateInputValueWithoutMask(inputValue) {
-    this._internalValueChange = true;
-    this.value = inputValue;
-    this.ezChange.emit(inputValue);
-  }
   onBlur() {
     this.ezBlur.emit(this.value);
   }
@@ -397,64 +311,24 @@ const EzClassicInput = class {
       core.ElementIDUtils.addIDInfo(this._inputElem, 'classic-input', dataInfo);
     }
   }
-  buildPlaceholder() {
+  componentWillLoad() {
+    if (this.mask && !this._maskFormatter) {
+      this._maskFormatter = new MaskFormatter(this.mask);
+    }
     if (!this.placeholder && this._maskFormatter) {
       this.placeholder = this._maskFormatter.generatePlaceholder();
     }
   }
-  buildMaskFormatter() {
-    if (this.mask && (!this._maskFormatter || this.mask === 'cgc_cpf')) {
-      const maskToBuilder = this.getMaskToBuilder();
-      this._maskFormatter = maskToBuilder ? new MaskFormatter(maskToBuilder) : undefined;
-    }
-  }
-  getMaskToBuilder() {
-    if (this.mask === "cgc_cpf") {
-      return this.getCGCCpfMask();
-    }
-    if (this.mask === 'phone') {
-      return this.getPhoneMask();
-    }
-    if (this.mask in core.MaskFormatter.DEFAULT_MASKS) {
-      return core.MaskFormatter.DEFAULT_MASKS[this.mask];
-    }
-    return this.mask;
-  }
-  getPhoneMask() {
-    if (this.value && this.value.length === 10) {
-      return MaskFormatter.DEFAULT_MASKS ? MaskFormatter.DEFAULT_MASKS.phone : undefined;
-    }
-    if (this.value && this.value.length === 11) {
-      return MaskFormatter.DEFAULT_MASKS ? MaskFormatter.DEFAULT_MASKS.phone_mobile : undefined;
-    }
-    return undefined;
-  }
-  getCGCCpfMask() {
-    var _a, _b;
-    if (((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) === 11) {
-      return core.MaskFormatter.DEFAULT_MASKS.cpf;
-    }
-    if (((_b = this.value) === null || _b === void 0 ? void 0 : _b.length) === 14) {
-      return core.MaskFormatter.DEFAULT_MASKS.cnpj;
-    }
-    return undefined;
-  }
-  componentDidRender() {
-    this.buildMaskFormatter();
-    this.buildPlaceholder();
-    this.syncValue();
-  }
   componentDidLoad() {
     this.syncValue();
     this.addInfoId();
   }
   render() {
-    return (index.h(index.Host, null, index.h("label", { title: this.label, htmlFor: this.name }, this.label, this.required && index.h("span", { class: "required-indicator" }, "*")), index.h("div", { class: "input-container " + (this.size ? `input-container--${this.size}` : ""), "data-state": this.state, "data-disabled": (!this.enabled).toString(), onClick: () => this.setFocus({ preventScroll: true }) }, this.leftIconName && (index.h("ez-icon", { iconName: this.leftIconName, title: this.leftIconTooltip, onClick: (event) => this.handleIconClick(event, "left"), class: { 'icon-clickable': this.leftIconClickable } })), index.h("input", { ref: el => this._inputElem = el, id: this.name, type: this.type, title: this.value, placeholder: this.placeholder, disabled: !this.enabled, readonly: this.readonly, name: this.name, minlength: this.minlength, maxlength: this.maxlength, onInput: (event) => this.onInput(event), onBlur: this.onBlur.bind(this), onFocus: this.onFocus.bind(this) }), this.rightIconName && (index.h("ez-icon", { iconName: this.rightIconName, title: this.rightIconTooltip, onClick: (event) => this.handleIconClick(event, "right"), class: { 'icon-clickable': this.rightIconClickable } }))), (this.helpText || this.errorMessage) && (index.h("span", { id: "input_helpText", title: this.errorMessage || this.helpText }, this.errorMessage || this.helpText))));
+    return (index.h(index.Host, null, index.h("label", { title: this.label, htmlFor: this.name }, this.label), index.h("div", { class: "input-container", "data-state": this.state, "data-disabled": (!this.enabled).toString(), onClick: () => this.setFocus({ preventScroll: true }) }, this.leftIconName && (index.h("ez-icon", { iconName: this.leftIconName, title: this.leftIconTooltip, onClick: (event) => this.handleIconClick(event, "left"), class: { 'icon-clickable': this.leftIconClickable } })), index.h("input", { ref: el => this._inputElem = el, id: this.name, type: this.type, title: this.value, placeholder: this.placeholder, disabled: !this.enabled, readonly: this.readonly, name: this.name, minlength: this.minlength, maxlength: this.maxlength, onInput: (event) => this.onInput(event), onBlur: this.onBlur.bind(this), onFocus: this.onFocus.bind(this) }), this.rightIconName && (index.h("ez-icon", { iconName: this.rightIconName, title: this.rightIconTooltip, onClick: (event) => this.handleIconClick(event, "right"), class: { 'icon-clickable': this.rightIconClickable } }))), this.helpText && (index.h("span", { title: this.helpText }, this.helpText))));
   }
   get _element() { return index.getElement(this); }
   static get watchers() { return {
-    "value": ["syncValue"],
-    "errorMessage": ["observeErrorMessage"]
+    "value": ["syncValue"]
   }; }
 };
 EzClassicInput.style = ezClassicInputCss;

package/dist/cjs/ez-classic-text-area.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
 
-const ezClassicTextAreaCss = ":host{display:flex;flex-direction:column;align-items:flex-start;box-sizing:border-box;font-family:var(--font--pattern, Arial, sans-serif);font-size:var(--font-size--default, 14px);color:var(--color--ocean-green-1000, #00281D);border:none;padding:var(--space--2, 2px);width:100%;--ez-classic-text-area--label-color:var(--color--ocean-green-1000, #00281D);--ez-classic-text-area--border-color-default:var(--color--gray-200, #D2D2D3);--ez-classic-text-area--border-color-focus:var(--color--gray-300, #A4A5A7);--ez-classic-text-area--border-color-success:var(--color--green-600, #157A00);--ez-classic-text-area--border-color-error:var(--color--red-600, #BD0025);--ez-classic-text-area--border-color-warning:var(--color--yellow-600, #EFB103);--ez-classic-text-area--background-color:var(--color--gray-70, #FFFFFF);--ez-classic-text-area--background-color-disabled:var(--color--gray-90, #EAEAEA);--ez-classic-text-area--text-color:var(--color--ocean-green-1000, #00281D);--ez-classic-text-area--placeholder-color:#bdbdbd;--ez-classic-text-area--icon-color:var(--color--gray-400, #77777A);--ez-classic-text-area--helptext-color:var(--color--ocean-green-1000, #00281D)}.text-area-container{display:flex;flex-direction:row;align-items:start;width:100%;border:none;border-radius:var(--border--radius-8, 8px);padding:var(--space--16, 16px);box-sizing:border-box;gap:var(--space--10, 10px);margin-block:var(--space--4, 4px);transition:box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);resize:vertical;overflow:auto;background-color:var(--ez-classic-text-area--background-color)}.text-area-container,.text-area-container[data-state=\"default\"]{box-shadow:0 0 0 1px var(--ez-classic-text-area--border-color-default)}.text-area-container[data-state=\"success\"]{box-shadow:0 0 0 var(--space--2, 2px) var(--ez-classic-text-area--border-color-success)}.text-area-container[data-state=\"error\"]{box-shadow:0 0 0 var(--space--2, 2px) var(--ez-classic-text-area--border-color-error)}.text-area-container[data-state=\"warning\"]{box-shadow:0 0 0 var(--space--2, 2px) var(--ez-classic-text-area--border-color-warning)}.text-area-container:focus-within{box-shadow:0 0 0 var(--space--2, 2px) var(--ez-classic-text-area--border-color-focus)}ez-icon{min-width:var(--space--24, 24px);color:var(--ez-classic-text-area--icon-color)}textarea{flex:1;border:none;outline:none;background:transparent;height:100%;width:100%;padding:0;font-family:var(--font--pattern, Arial, sans-serif);font-size:var(--font-size--default, 14px);color:var(--color--ocean-green-1000, #00281D);text-overflow:ellipsis;min-height:calc(var(--ez-classic-text-area--min-height) - var(--space--32, 32px));resize:none;scrollbar-width:thin;color:var(--ez-classic-text-area--text-color)}.text-area-container[data-disabled=\"true\"]{cursor:not-allowed;background:var(--ez-classic-text-area--background-color-disabled);border-color:var(--ez-classic-text-area--border-color-default)}.text-area-container[data-disabled=\"true\"]>*{cursor:not-allowed}@keyframes ez-helptext-fadein{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}span{font-size:var(--font-size--xsmall, 10px);line-height:var(--line-height--16, 16px);overflow:hidden;text-overflow:ellipsis;animation:ez-helptext-fadein 0.3s ease;color:var(--ez-classic-text-area--helptext-color)}label{display:block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:var(--line-height--20, 20px);color:var(--ez-classic-text-area--label-color)}.icon-clickable{cursor:pointer}.text-area-container[data-resize=\"none\"]{resize:none}.text-area-container[data-resize=\"both\"]{resize:both}.text-area-container[data-resize=\"horizontal\"]{resize:horizontal}.text-area-container[data-resize=\"vertical\"]{resize:vertical}.text-area-container::-webkit-resizer{display:none}.text-area-container::-moz-resizer{display:none}.text-area-container:not([data-resize=\"none\"]){position:relative}.text-area-container:not([data-resize=\"none\"])::after{content:'';position:absolute;bottom:var(--space--2, 2px);right:var(--space--2, 2px);width:var(--space--10, 10px);height:var(--space--10, 10px);background:linear-gradient(135deg, transparent 0% 50%, var(--ez-classic-text-area--border-color-default) 50% 58%, transparent 58% 70%, var(--ez-classic-text-area--border-color-default) 70% 78%, transparent 78% 100%);pointer-events:none}";
+const ezClassicTextAreaCss = ":host{display:flex;flex-direction:column;align-items:flex-start;box-sizing:border-box;font-family:var(--font--pattern, Arial, sans-serif);font-size:var(--font-size--default, 14px);color:var(--color--ocean-green-1000, #00281D);border:none;padding:0;--ez-classic-text-area--label-color:var(--color--ocean-green-1000, #00281D);--ez-classic-text-area--border-color-default:var(--color--gray-200, #D2D2D3);--ez-classic-text-area--border-color-focus:var(--color--gray-300, #A4A5A7);--ez-classic-text-area--border-color-success:var(--color--green-600, #157A00);--ez-classic-text-area--border-color-error:var(--color--red-600, #BD0025);--ez-classic-text-area--border-color-warning:var(--color--yellow-600, #EFB103);--ez-classic-text-area--background-color:var(--color--gray-70, #FFFFFF);--ez-classic-text-area--background-color-disabled:var(--color--gray-90, #EAEAEA);--ez-classic-text-area--text-color:var(--color--ocean-green-1000, #00281D);--ez-classic-text-area--placeholder-color:#bdbdbd;--ez-classic-text-area--icon-color:var(--color--gray-400, #77777A);--ez-classic-text-area--helptext-color:var(--color--ocean-green-1000, #00281D)}.text-area-container{display:flex;flex-direction:row;align-items:start;width:100%;border:none;border-radius:var(--border--radius-8, 8px);padding:var(--space--16, 16px);box-sizing:border-box;gap:var(--space--10, 10px);margin:var(--space--4, 4px) var(--space--2, 2px);transition:box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);resize:vertical;overflow:auto;background-color:var(--ez-classic-text-area--background-color)}.text-area-container,.text-area-container[data-state=\"default\"]{box-shadow:0 0 0 1px var(--ez-classic-text-area--border-color-default)}.text-area-container[data-state=\"success\"]{box-shadow:0 0 0 var(--space--2, 2px) var(--ez-classic-text-area--border-color-success)}.text-area-container[data-state=\"error\"]{box-shadow:0 0 0 var(--space--2, 2px) var(--ez-classic-text-area--border-color-error)}.text-area-container[data-state=\"warning\"]{box-shadow:0 0 0 var(--space--2, 2px) var(--ez-classic-text-area--border-color-warning)}.text-area-container:focus-within{box-shadow:0 0 0 var(--space--2, 2px) var(--ez-classic-text-area--border-color-focus)}ez-icon{min-width:var(--space--24, 24px);color:var(--ez-classic-text-area--icon-color)}textarea{flex:1;border:none;outline:none;background:transparent;height:100%;width:100%;padding:0;font-family:var(--font--pattern, Arial, sans-serif);font-size:var(--font-size--default, 14px);color:var(--color--ocean-green-1000, #00281D);text-overflow:ellipsis;min-height:calc(var(--ez-classic-text-area--min-height) - var(--space--32, 32px));resize:none;scrollbar-width:thin;color:var(--ez-classic-text-area--text-color)}.text-area-container[data-disabled=\"true\"]{cursor:not-allowed;background:var(--ez-classic-text-area--background-color-disabled);border-color:var(--ez-classic-text-area--border-color-default)}.text-area-container[data-disabled=\"true\"]>*{cursor:not-allowed}@keyframes ez-helptext-fadein{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}span{font-size:var(--font-size--xsmall, 10px);line-height:var(--line-height--16, 16px);overflow:hidden;text-overflow:ellipsis;animation:ez-helptext-fadein 0.3s ease;color:var(--ez-classic-text-area--helptext-color)}label{display:block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:var(--line-height--20, 20px);color:var(--ez-classic-text-area--label-color)}.icon-clickable{cursor:pointer}.text-area-container[data-resize=\"none\"]{resize:none}.text-area-container[data-resize=\"both\"]{resize:both}.text-area-container[data-resize=\"horizontal\"]{resize:horizontal}.text-area-container[data-resize=\"vertical\"]{resize:vertical}.text-area-container::-webkit-resizer{display:none}.text-area-container::-moz-resizer{display:none}.text-area-container:not([data-resize=\"none\"]){position:relative}.text-area-container:not([data-resize=\"none\"])::after{content:'';position:absolute;bottom:var(--space--2, 2px);right:var(--space--2, 2px);width:var(--space--10, 10px);height:var(--space--10, 10px);background:linear-gradient(135deg, transparent 0% 50%, var(--ez-classic-text-area--border-color-default) 50% 58%, transparent 58% 70%, var(--ez-classic-text-area--border-color-default) 70% 78%, transparent 78% 100%);pointer-events:none}";
 
 const EzClassicTextArea = class {
   constructor(hostRef) {
@@ -18,7 +18,6 @@ const EzClassicTextArea = class {
     this.placeholder = '';
     this.value = '';
     this.helpText = undefined;
-    this.errorMessage = undefined;
     this.state = "default";
     this.enabled = true;
     this.readonly = false;
@@ -46,13 +45,6 @@ const EzClassicTextArea = class {
   async setBlur() {
     this._textAreaElem.blur();
   }
-  async observeErrorMessage(newValue) {
-    if (newValue && newValue.trim() !== '') {
-      this.state = "error";
-      return;
-    }
-    this.state = "default";
-  }
   onBlur() {
     this.ezBlur.emit(this.value);
   }
@@ -85,12 +77,9 @@ const EzClassicTextArea = class {
     this.addInfoId();
   }
   render() {
-    return (index.h(index.Host, null, this.label && (index.h("label", { title: this.label, htmlFor: this.name }, this.label)), index.h("div", { class: "text-area-container", "data-state": this.state, "data-disabled": (!this.enabled).toString(), "data-resize": this.resize, onClick: () => this.setFocus({ preventScroll: true }) }, this.leftIconName && (index.h("ez-icon", { iconName: this.leftIconName, title: this.leftIconTooltip, onClick: (event) => this.handleIconClick(event, "left"), class: { 'icon-clickable': this.leftIconClickable } })), index.h("textarea", { ref: (el) => (this._textAreaElem = el), id: this.name, name: this.name, placeholder: this.placeholder, value: this.value, disabled: !this.enabled, readOnly: this.readonly, maxLength: this.maxlength, rows: this.rows, onInput: this.handleInput.bind(this), onBlur: this.onBlur.bind(this) }), this.rightIconName && (index.h("ez-icon", { iconName: this.rightIconName, title: this.rightIconTooltip, onClick: (event) => this.handleIconClick(event, "right"), class: { 'icon-clickable': this.rightIconClickable } }))), (this.helpText || this.errorMessage) && (index.h("span", { id: "textArea_helpText", title: this.errorMessage || this.helpText }, this.errorMessage || this.helpText))));
+    return (index.h(index.Host, null, this.label && (index.h("label", { title: this.label, htmlFor: this.name }, this.label)), index.h("div", { class: "text-area-container", "data-state": this.state, "data-disabled": (!this.enabled).toString(), "data-resize": this.resize, onClick: () => this.setFocus({ preventScroll: true }) }, this.leftIconName && (index.h("ez-icon", { iconName: this.leftIconName, title: this.leftIconTooltip, onClick: (event) => this.handleIconClick(event, "left"), class: { 'icon-clickable': this.leftIconClickable } })), index.h("textarea", { ref: (el) => (this._textAreaElem = el), id: this.name, name: this.name, placeholder: this.placeholder, value: this.value, disabled: !this.enabled, readOnly: this.readonly, maxLength: this.maxlength, rows: this.rows, onInput: this.handleInput.bind(this), onBlur: this.onBlur.bind(this) }), this.rightIconName && (index.h("ez-icon", { iconName: this.rightIconName, title: this.rightIconTooltip, onClick: (event) => this.handleIconClick(event, "right"), class: { 'icon-clickable': this.rightIconClickable } }))), this.helpText && (index.h("span", { title: this.helpText }, this.helpText))));
   }
   get _element() { return index.getElement(this); }
-  static get watchers() { return {
-    "errorMessage": ["observeErrorMessage"]
-  }; }
 };
 EzClassicTextArea.style = ezClassicTextAreaCss;
 

package/dist/cjs/ez-collapsible-box.cjs.entry.js

@@ -4,12 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
-const ApplicationUtils = require('./ApplicationUtils-9a9185fc.js');
+const ApplicationUtils = require('./ApplicationUtils-999d2366.js');
 require('./DialogType-2114c337.js');
 require('./CheckMode-ecb90b87.js');
-const index$1 = require('./index-d4a1cad8.js');
-require('./types-6a5df0c7.js');
-require('./FormLayout-fe8da83c.js');
+const index$1 = require('./index-637af219.js');
+require('./FormLayout-18853e70.js');
 
 const ezCollapsibleBoxCss = ":host{--ez-collapsible-box--font-size:var(--title--medium, 14px);--ez-collapsible-box--font-family:var(--font-pattern, Arial);--ez-collapsible-box--font-weight:var(--text-weight--large, 600);--ez-collapsible-box--color:var(--title--primary);--ez-collapsible-box--subtitle--font-size:var(--text--medium, 14px);--ez-collapsible-box--subtitle--font-family:var(--font-pattern, 'Roboto');--ez-collapsible-box--subtitle--font-weight:var(--text-weight--medium, 400);--ez-collapsible-box--subtitle--color:var(--text--primary);--ez-collapsible-box--subtitle--margin-bottom:var(--space--medium, 12px);--ez-collapsible-box--focus--color:var(--color--primary-600);--ez-collapsible-box__icon--color:var(--ez-collapsible-box--color);--ez-collapsible-box__header--padding-top:0px;--ez-collapsible-box__header--padding-bottom:0px;--ez-collapsible-box__header--padding-right:0px;--ez-collapsible-box__header--padding-left:0px;display:flex;flex-wrap:wrap;width:100%}ez-icon{--ez-icon--color:inherit}.collapsible-box{display:flex;flex-direction:column;width:100%;overflow:hidden}.collapsable-box--bordered{border:var(--border--small);border-color:var(--color--strokes);border-radius:var(--border--radius-medium);padding:var(--space--xs)}.collapsible-box__header{display:flex;box-sizing:border-box;padding-top:var(--ez-collapsible-box__header--padding-top);padding-bottom:var(--ez-collapsible-box__header--padding-bottom);padding-right:var(--ez-collapsible-box__header--padding-right);padding-left:var(--ez-collapsible-box__header--padding-left)}.collapsible-box__title{position:relative;width:100%;display:flex;box-sizing:border-box;align-items:center;outline:none;border:none;background-color:unset;cursor:pointer;padding:0px;text-align:left;color:var(--ez-collapsible-box--color);--ez-icon--color:var(--ez-collapsible-box__icon--color);margin-bottom:var(--space--medium, 12px)}.collapsible-box__title:focus{color:var(--ez-collapsible-box--focus--color);--ez-icon--color:var(--ez-collapsible-box--focus--color)}.collapsible-box__label{display:flex;white-space:nowrap;overflow:hidden;cursor:pointer;text-overflow:ellipsis;box-sizing:border-box;margin-left:6px;gap:6px;font-family:var(--ez-collapsible-box--font-family);font-size:var(--ez-collapsible-box--font-size);font-weight:var(--ez-collapsible-box--font-weight)}.subtitle-box__label{display:flex;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;font-family:var(--ez-collapsible-box--subtitle--font-family);font-size:var(--ez-collapsible-box--subtitle--font-size);font-weight:var(--ez-collapsible-box--subtitle--font-weight);color:var(--ez-collapsible-box--subtitle--color);margin-bottom:var(--ez-collapsible-box--subtitle--margin-bottom)}.subtitle-box__content{width:100%}.collapsible-box__label ez-icon{visibility:hidden;transition:2s all ease-in-out}.collapsible-box__label:hover ez-icon{visibility:visible}.collapsible-box__text-edit{margin-left:6px}.collapsible-box__icon{transform:rotate(90deg) translate(0px, 14%);transition:transform var(--transition)}.collapsible-box__icon--collapsed{transform:rotate(0deg) translate(-14%, 0px)}.collapsible-box__title--icon-right{flex-direction:row-reverse}.collapsible-box__title--icon-right .collapsible-box__icon{transform:rotate(90deg) translate(0px, -14%)}.collapsible-box__title--icon-right .collapsible-box__icon--collapsed{transform:rotate(0deg) translate(14%, 0px)}.collapsible-box__title--icon-right .collapsible-box__label{margin-left:0px;margin-right:6px}.collapsible-box__title--left{margin-right:auto}.collapsible-box__title--right{margin-left:auto}.collapsible-box__title--center{margin-left:auto;margin-right:auto}.collapsible-box__title--stretch{justify-content:space-between;width:100%}.collapsible-box__title--no-margin{margin-bottom:0}.collapsible-box__content{display:flex;flex-wrap:wrap;width:100%;height:0px;max-height:0px;opacity:0;overflow:hidden;transition:all var(--transition, 0.5s)}.collapsible-box__content--show{height:100%;max-height:none;opacity:1;overflow:visible;transition:all var(--transition, 0.5s)}.font--x-small{font-size:10px}.font--small{font-size:12px}.font--medium{font-size:14px}.font--large{font-size:16px}.font--x-large{font-size:20px}";