@sankhyalabs/ezui 5.22.0-dev.8 → 5.22.0-dev.81

package/dist/cjs/{CSSVarsUtils-10c9d5b4.js → CSSVarsUtils-f20973d1.js}

@@ -30,6 +30,7 @@ class CSSVarsUtils {
       CSSVarsUtils.applyIfExists(host, child, '--ez-text-input__input--focus--border-color');
       CSSVarsUtils.applyIfExists(host, child, '--ez-text-input__icon--width');
       CSSVarsUtils.applyIfExists(host, child, '--ez-text-input__input--focus--icon-color');
+      CSSVarsUtils.applyIfExists(host, child, '--ez-text-input__margin-bottom');
     }
   }
   static applyVarsButton(host, child) {

package/dist/cjs/DataBinder-e92314c2.js

@@ -0,0 +1,445 @@
+'use strict';
+
+const core = require('@sankhyalabs/core');
+const ApplicationUtils = require('./ApplicationUtils-c9d1205c.js');
+
+const buildFieldMetadata = (descriptor, config) => {
+  let { name, label, group } = Object.assign({}, config);
+  let { readOnly, required } = Object.assign({}, config);
+  let props;
+  let userInterface;
+  if (descriptor) {
+    label = label || descriptor.label;
+    name = name || descriptor.name;
+    required = descriptor.required || (config === null || config === void 0 ? void 0 : config.required);
+    readOnly = descriptor.readOnly || (config === null || config === void 0 ? void 0 : config.readOnly);
+    props = descriptor.properties;
+    userInterface = descriptor.userInterface;
+  }
+  return {
+    name, label, group,
+    readOnly, required,
+    props,
+    userInterface: userInterface || core.UserInterface.SHORTTEXT,
+  };
+};
+
+class RecordValidationProcessor {
+  constructor(dataUnit, validationSource, validator) {
+    this._dataUnit = dataUnit;
+    this._validationSource = validationSource;
+    this._validator = validator;
+  }
+  validate(isSaving = true) {
+    return new Promise((accept, reject) => {
+      const records = this._dataUnit.getModifiedRecords();
+      for (let i = 0; i < records.length; i++) {
+        const record = records[i];
+        const invalidResults = [];
+        let validationResult = this.validateRequired(record);
+        if (validationResult && !validationResult.isValid) {
+          invalidResults.push(validationResult);
+        }
+        if (this._validator) {
+          validationResult = this._validator.validateRecord(record);
+          if (validationResult && !validationResult.isValid) {
+            invalidResults.push(validationResult);
+          }
+        }
+        if (invalidResults.length > 0) {
+          if (!isSaving && invalidResults[0].invalidFields.length > 0) {
+            this._validationSource.markAsInvalid(invalidResults[0].invalidFields[0], record.__record__id__);
+            reject();
+            break;
+          }
+          this.processValidationResult(invalidResults, record.__record__id__);
+          reject();
+          break;
+        }
+      }
+      return accept();
+    });
+  }
+  validateRequired(record) {
+    const requiredFields = this._validationSource.getRequiredFields();
+    const invalidFields = [];
+    new Set(requiredFields).forEach(field => {
+      const value = record[field];
+      if (value == undefined || value === "") {
+        const errorMessage = this._validationSource.getMessageForField(field, record.__record__id__);
+        if (errorMessage) {
+          invalidFields.push({ name: field, message: errorMessage });
+        }
+        else {
+          invalidFields.push({ name: field, message: "Essa informação é obrigatória" });
+        }
+      }
+    });
+    if (invalidFields.length > 0) {
+      return { isValid: false, invalidFields, infoMessage: "Há pelo menos um campo obrigatório não preenchido." };
+    }
+    return undefined;
+  }
+  processValidationResult(validationResult, recordId) {
+    validationResult.forEach(invalidResult => {
+      const invalidFields = invalidResult.invalidFields;
+      this._dataUnit.savingCanceled(invalidFields, recordId);
+      if (invalidFields) {
+        invalidFields.forEach(field => {
+          this.markAsInvalid(field, recordId);
+        });
+      }
+      if (invalidResult.infoMessage) {
+        ApplicationUtils.ApplicationUtils.info(invalidResult.infoMessage);
+      }
+      if (invalidResult.errorMessage) {
+        const { errorTitle, errorMessage } = invalidResult;
+        ApplicationUtils.ApplicationUtils.error(errorTitle, errorMessage);
+      }
+    });
+  }
+  markAsInvalid(field, recordId) {
+    this._dataUnit.setInvalidField(field.name, field.message, recordId);
+    this._validationSource.markAsInvalid(field, recordId);
+  }
+}
+
+class DataBinder {
+  constructor(dataUnit) {
+    this.onDataUnitEvent = (action) => {
+      var _a, _b;
+      switch (action.type) {
+        case core.Action.DATA_LOADED:
+        case core.Action.DATA_SAVED:
+        case core.Action.RECORDS_REMOVED:
+        case core.Action.RECORDS_ADDED:
+        case core.Action.RECORDS_COPIED:
+        case core.Action.EDITION_CANCELED:
+        case core.Action.SELECTION_CHANGED:
+        case core.Action.NEXT_SELECTED:
+        case core.Action.PREVIOUS_SELECTED:
+          this.clearInvalid();
+        case core.Action.DATA_CHANGED:
+        case core.Action.CHANGE_UNDONE:
+        case core.Action.CHANGE_REDONE:
+        case core.Action.RECORD_LOADED:
+          (_a = this._fields) === null || _a === void 0 ? void 0 : _a.forEach(field => {
+            this.updateValue(field.fieldName, field.field);
+          });
+          this.clearFieldError(Object.keys(action.payload)[0]);
+          break;
+        case core.Action.FIELD_INVALIDATED:
+          (_b = this._fields) === null || _b === void 0 ? void 0 : _b.forEach(field => {
+            this.updateErrorMessage(field.fieldName, field.field);
+          });
+          break;
+      }
+    };
+    this._uuid = core.StringUtils.generateUUID();
+    this._fields = new Map();
+    this._dataUnit = dataUnit;
+    this.applyDefaultValues();
+    this._dataUnit.subscribe(this.onDataUnitEvent);
+    this._dataUnit.addInterceptor(this);
+    this.setContextDataBinder(dataUnit);
+  }
+  get dataBinderId() {
+    return this._uuid;
+  }
+  setContextDataBinder(dataUnit) {
+    const dataBindersByDataUnit = core.ApplicationContext.getContextValue("__DATABINDER_BY_DATAUNIT__") || new Map();
+    const dataBinders = [...(dataBindersByDataUnit.get(dataUnit.dataUnitId) || []), this];
+    dataBindersByDataUnit.set(dataUnit.dataUnitId, dataBinders);
+    core.ApplicationContext.setContextValue("__DATABINDER_BY_DATAUNIT__", dataBindersByDataUnit);
+  }
+  applyDefaultValues() {
+    const recordIds = (this._dataUnit.getAddedRecords() || []).map(r => r.__record__id__);
+    if (recordIds.length > 0) {
+      const defaultValues = this.getDefaultValues();
+      if (defaultValues) {
+        Object.keys(defaultValues).forEach(field => {
+          this._dataUnit.setFieldValue(field, defaultValues[field], recordIds);
+        });
+      }
+    }
+  }
+  bind(fields, currentContextName, formMetadata, recordsValidator) {
+    fields.forEach(fieldElement => {
+      const { fieldName, contextName } = fieldElement.dataset;
+      if (contextName == undefined || contextName === currentContextName) {
+        this.updateBind(fieldName, fieldElement);
+      }
+    });
+    this._formMetadata = formMetadata;
+    this._recordValidatorProcessor = new RecordValidationProcessor(this._dataUnit, {
+      getRequiredFields: () => this.getFormRequiredFields(),
+      markAsInvalid: field => this.markInvalid(field),
+      getMessageForField: field => this.getErrorMessage(field),
+    }, recordsValidator);
+  }
+  getFormRequiredFields() {
+    return this._formMetadata.getRequiredFields();
+  }
+  disconnectDataUnit() {
+    const dataBindersByDataUnit = core.ApplicationContext.getContextValue("__DATABINDER_BY_DATAUNIT__") || new Map();
+    const dataBinders = dataBindersByDataUnit.get(this._dataUnit.dataUnitId);
+    const dataBindersFiltered = dataBinders.filter((dataBinder) => dataBinder.dataBinderId !== this.dataBinderId);
+    dataBindersByDataUnit.set(this._dataUnit.dataUnitId, dataBindersFiltered);
+    core.ApplicationContext.setContextValue("__DATABINDER_BY_DATAUNIT__", dataBindersByDataUnit);
+  }
+  onDisconnectedCallback() {
+    this._dataUnit.unsubscribe(this.onDataUnitEvent);
+    this._dataUnit.removeInterceptor(this);
+    this.disconnectDataUnit();
+  }
+  getCurrentRecordId() {
+    const record = this._dataUnit.getSelectedRecord();
+    return record === null || record === void 0 ? void 0 : record.__record__id__;
+  }
+  markInvalid(field) {
+    if (this._fields.has(field.name)) {
+      const fieldElement = this._fields.get(field.name).field;
+      this.updateErrorMessage(field.name, fieldElement, field.message);
+    }
+  }
+  setFocus(fieldName) {
+    if (!this._fields.has(fieldName)) {
+      return;
+    }
+    const fieldElement = this._fields.get(fieldName).field;
+    if (typeof fieldElement["setFocus"] != "function") {
+      return;
+    }
+    fieldElement["setFocus"]();
+  }
+  clearInvalid(recordId) {
+    this._dataUnit.clearInvalid(recordId);
+    this._fields.forEach(fieldBinder => {
+      const fieldElement = fieldBinder.field;
+      fieldElement["errorMessage"] = "";
+    });
+  }
+  clearFieldError(fieldName) {
+    var _a;
+    const field = (_a = this._fields.get(fieldName)) === null || _a === void 0 ? void 0 : _a.field;
+    if (field["errorMessage"]) {
+      field["errorMessage"] = "";
+      this._dataUnit.clearInvalid(this.getCurrentRecordId(), fieldName);
+    }
+  }
+  updateValue(fieldName, field) {
+    const bind = this._fields.get(fieldName);
+    try {
+      if (bind) {
+        bind.listen = false;
+      }
+      field["value"] = this._dataUnit.getFieldValue(fieldName);
+      this.updateErrorMessage(fieldName, field);
+    }
+    finally {
+      if (bind) {
+        bind.listen = true;
+      }
+    }
+  }
+  validate() {
+    return this._recordValidatorProcessor.validate();
+  }
+  static async validateByDataunit(dataUnit) {
+    try {
+      const dataBinders = this.getDataBindersByDataUnit(dataUnit);
+      await Promise.all(dataBinders.map((dataBinder) => dataBinder.validate()));
+      return true;
+    }
+    catch (_a) {
+      return false;
+    }
+  }
+  static getDataBindersByDataUnit(dataUnit) {
+    const dataBindersByDataUnit = core.ApplicationContext.getContextValue("__DATABINDER_BY_DATAUNIT__");
+    return (dataBindersByDataUnit === null || dataBindersByDataUnit === void 0 ? void 0 : dataBindersByDataUnit.get(dataUnit.dataUnitId)) || [];
+  }
+  updateErrorMessage(fieldName, field, message) {
+    if (message == undefined) {
+      message = this._dataUnit.getInvalidMessage(this.getCurrentRecordId(), fieldName);
+    }
+    if (!field["errorMessage"]) {
+      field["errorMessage"] = message;
+    }
+  }
+  getErrorMessage(fieldName) {
+    if (this._fields.has(fieldName)) {
+      const fieldElement = this._fields.get(fieldName).field;
+      return fieldElement["errorMessage"];
+    }
+    return undefined;
+  }
+  updateBind(fieldName, field) {
+    const oldBind = this._fields.get(fieldName);
+    if (oldBind) {
+      oldBind.destroy();
+    }
+    this.bindSearchOptionsLoader(fieldName, field);
+    field["value"] = this._dataUnit.getFieldValue(fieldName);
+    this.updateErrorMessage(fieldName, field);
+    this._fields.set(fieldName, Bind.create(fieldName, field, (fieldName, waitingChange) => this.changeStarted(fieldName, waitingChange), (fieldName) => this.cancelWaitingChange(fieldName), (fieldName, newValue) => this.setFieldValue(fieldName, newValue)));
+    this.applyEzUploadContext(fieldName, field);
+  }
+  changeStarted(fieldName, waitingChange) {
+    /**
+     * se o waitingChange não é blocante, add um event listener pra
+     * fazer o accept da promise
+     *
+     * se não tiver promise no waitingChange, eu crio uma e resolvo no bind
+     *
+     *
+     */
+    if (this._dataUnit.records.length === 0) {
+      this._dataUnit.addRecord();
+    }
+    if (!waitingChange.blocking && waitingChange.promise == undefined) {
+      const bind = this._fields.get(fieldName);
+      if (bind) {
+        waitingChange.promise = new Promise((resolve, reject) => {
+          bind.waitingChangePromiseResolve = resolve;
+          bind.waitingChangePromiseReject = reject;
+        });
+      }
+    }
+    this._dataUnit.startChange(fieldName, waitingChange);
+  }
+  cancelWaitingChange(fieldName) {
+    if (this._dataUnit.waitingForChange(fieldName)) {
+      this._dataUnit.cancelWaitingChange(fieldName);
+      const bind = this._fields.get(fieldName);
+      if (bind) {
+        bind.rejectWaitingChange(new core.WaitingChangeException("Change canceled", fieldName));
+      }
+    }
+  }
+  setFieldValue(fieldName, newValue) {
+    if (this._dataUnit.records.length === 0) {
+      this._dataUnit.addRecord();
+    }
+    this._dataUnit.clearInvalid(this.getCurrentRecordId(), fieldName);
+    const record = this._dataUnit.getSelectedRecord();
+    this._dataUnit.setFieldValue(fieldName, newValue, record ? [record.__record__id__] : undefined);
+    if (this._dataUnit.waitingForChange(fieldName)) {
+      const bind = this._fields.get(fieldName);
+      if (bind) {
+        bind.acceptWaitingChange();
+      }
+    }
+  }
+  bindSearchOptionsLoader(fieldName, field) {
+    if (field.nodeName === "EZ-SEARCH" && field["optionLoader"] == undefined) {
+      const loader = core.ApplicationContext.getContextValue("__EZUI__SEARCH__OPTION__LOADER__");
+      if (loader) {
+        field["optionLoader"] = (arg, ctxOptions) => {
+          return loader(arg, fieldName, this._dataUnit, ctxOptions);
+        };
+      }
+    }
+  }
+  applyEzUploadContext(fieldName, field) {
+    var _a, _b;
+    if (field.nodeName === "EZ-UPLOAD") {
+      field["urlUpload"] = core.ApplicationContext.getContextValue("__EZUI__UPLOAD__ADD__URL__");
+      field["urlDelete"] = core.ApplicationContext.getContextValue("__EZUI__UPLOAD__DEL__URL__");
+      const descriptor = this._dataUnit.getField(fieldName);
+      const destination = (_a = descriptor.properties) === null || _a === void 0 ? void 0 : _a.DESTINATION;
+      if (destination) {
+        field["requestHeaders"] = { XTRAINF: `{"destination": "${destination}"}` };
+      }
+      field["maxFiles"] = ((_b = descriptor.properties) === null || _b === void 0 ? void 0 : _b.MAX_FILES) || 0;
+    }
+  }
+  interceptAction(action) {
+    if (action.type === core.Action.RECORDS_COPIED) {
+      const cleanFields = this._formMetadata.getCleanOnCopyFields();
+      if (cleanFields) {
+        const records = action.payload;
+        return new core.DataUnitAction(core.Action.RECORDS_COPIED, records.map(record => {
+          const newRecord = Object.assign({}, record);
+          cleanFields.forEach(fieldName => delete newRecord[fieldName]);
+          return newRecord;
+        }));
+      }
+    }
+    if (action.type === core.Action.SAVING_DATA) {
+      return new Promise((resolve) => {
+        this.validate()
+          .then(() => resolve(action))
+          .catch(() => { });
+      });
+    }
+    if (action.type === core.Action.RECORDS_ADDED) {
+      const defaultValues = this.getDefaultValues();
+      if (defaultValues) {
+        const records = action.payload;
+        return new core.DataUnitAction(core.Action.RECORDS_ADDED, records.map(record => {
+          return Object.assign(Object.assign({}, record), defaultValues);
+        }));
+      }
+    }
+    return action;
+  }
+  getDefaultValues() {
+    var _a;
+    const rawDefaultValues = (_a = this._formMetadata) === null || _a === void 0 ? void 0 : _a.getDefaultValues();
+    if (rawDefaultValues) {
+      const defaultValues = {};
+      for (const field in rawDefaultValues) {
+        defaultValues[field] = this._dataUnit.valueFromString(field, rawDefaultValues[field]);
+      }
+      return defaultValues;
+    }
+    return undefined;
+  }
+}
+class Bind {
+  constructor() {
+    this.listen = true;
+    this.startChangeEventName = "ezStartChange";
+    this.cancelWaitingChangeEventName = "ezCancelWaitingChange";
+    this.changeEventName = "ezChange";
+  }
+  destroy() {
+    this.field.removeEventListener(this.startChangeEventName, this.startChangeListener);
+    this.field.removeEventListener(this.cancelWaitingChangeEventName, this.cancelWaitingChangeListener);
+    this.field.removeEventListener(this.changeEventName, this.changeListener);
+  }
+  acceptWaitingChange() {
+    if (this.waitingChangePromiseResolve) {
+      this.waitingChangePromiseResolve();
+      this.waitingChangePromiseReject = undefined;
+      this.waitingChangePromiseResolve = undefined;
+    }
+  }
+  rejectWaitingChange(reason) {
+    if (this.waitingChangePromiseReject) {
+      this.waitingChangePromiseReject(reason);
+      this.waitingChangePromiseReject = undefined;
+      this.waitingChangePromiseResolve = undefined;
+    }
+  }
+  static create(fieldName, field, startChangeCallback, cancelWaitingChangeCallback, changeCallback) {
+    const b = new Bind();
+    b.field = field;
+    b.fieldName = fieldName;
+    b.startChangeListener = (evt) => { if (b.listen)
+      startChangeCallback(fieldName, evt.detail); };
+    b.field.addEventListener(b.startChangeEventName, b.startChangeListener);
+    b.cancelWaitingChangeListener = () => { if (b.listen)
+      cancelWaitingChangeCallback(fieldName); };
+    b.field.addEventListener(b.cancelWaitingChangeEventName, b.cancelWaitingChangeListener);
+    b.changeListener = (evt) => { if (b.listen)
+      changeCallback(fieldName, evt.detail); };
+    b.field.addEventListener(b.changeEventName, b.changeListener);
+    return b;
+  }
+}
+
+exports.DataBinder = DataBinder;
+exports.RecordValidationProcessor = RecordValidationProcessor;
+exports.buildFieldMetadata = buildFieldMetadata;

package/dist/cjs/FocusResolver-885f2173.js

@@ -0,0 +1,35 @@
+'use strict';
+
+class FocusResolver {
+  static resolveFocus(element, selectText = true) {
+    var _a;
+    if (!element)
+      return;
+    (_a = element.focus) === null || _a === void 0 ? void 0 : _a.call(element);
+    if (element.setFocus) {
+      element.setFocus({ selectText });
+      return;
+    }
+    this.resolveFocusOnChild(element, selectText);
+  }
+  static resolveFocusOnChild(element, selectText = true) {
+    var _a, _b;
+    if (this.isGridCell(element) && element.firstElementChild) {
+      this.resolveFocusOnChild(element.firstElementChild);
+      return;
+    }
+    if (!element || !element.classList.contains('hydrated'))
+      return;
+    const firstChild = element.firstElementChild;
+    if (!(firstChild === null || firstChild === void 0 ? void 0 : firstChild.focus) && !(firstChild === null || firstChild === void 0 ? void 0 : firstChild.setFocus))
+      return;
+    (_a = firstChild === null || firstChild === void 0 ? void 0 : firstChild.focus) === null || _a === void 0 ? void 0 : _a.call(firstChild);
+    (_b = firstChild === null || firstChild === void 0 ? void 0 : firstChild.setFocus) === null || _b === void 0 ? void 0 : _b.call(firstChild, { selectText });
+  }
+  static isGridCell(element) {
+    var _a;
+    return ((_a = element === null || element === void 0 ? void 0 : element.getAttribute) === null || _a === void 0 ? void 0 : _a.call(element, "role")) === 'gridcell';
+  }
+}
+
+exports.FocusResolver = FocusResolver;

package/dist/cjs/ez-actions-button.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a7b0c73d.js');
+const index = require('./index-9e5554cb.js');
 const core = require('@sankhyalabs/core');
 require('./ApplicationUtils-c9d1205c.js');
-const CSSVarsUtils = require('./CSSVarsUtils-10c9d5b4.js');
+const CSSVarsUtils = require('./CSSVarsUtils-f20973d1.js');
 require('./DialogType-2114c337.js');
 require('./CheckMode-ecb90b87.js');
 require('./ICustomRender-6fafffce.js');
@@ -99,8 +99,9 @@ const EzActionsButton = class {
     var _a;
     const docWidth = document.body.clientWidth;
     const boundingList = (_a = this._actionsList) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-    if ((boundingList === null || boundingList === void 0 ? void 0 : boundingList.right) > docWidth) {
-      return (docWidth - boundingList.width) + "px";
+    const rightOffset = docWidth - this._button.getBoundingClientRect().right;
+    if ((boundingList === null || boundingList === void 0 ? void 0 : boundingList.right) >= docWidth || (boundingList === null || boundingList === void 0 ? void 0 : boundingList.right) === (docWidth - rightOffset)) {
+      return (docWidth - boundingList.width - rightOffset) + "px";
     }
     return;
   }

package/dist/cjs/ez-alert-list.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a7b0c73d.js');
+const index = require('./index-9e5554cb.js');
 const core = require('@sankhyalabs/core');
 
 const ezAlertListCss = ":host {\n  display: flex;\n\n  /* Alert List */\n  \n  /*@doc Define a largura da lista minimizado */\n  --ez-alert-list__container--width: 680px;\n  /*@doc Define a altura da lista minimizado */\n  --ez-alert-list__container--height: 220px;\n  \n  /*@doc Define a largura da lista maximizada */\n  --ez-alert-list__container--width--expanded: 920px;\n  /*@doc Define a altura da lista maximizada */\n  --ez-alert-list__container--height--expanded: 540px;\n\n  /* Title */\n  /*@doc Define a fonte do título do componente */\n  --ez-alert-list__title--font-family: var(--font-pattern, \"Roboto\");\n  /*@doc Define o tamanho da fonte do título do popup.*/\n  --ez-alert-list__title--font-size: var(--title--large, 20px);\n  /*@doc Define a cor da fonte do título do popup.*/\n  --ez-alert-list__title--color: var(--title--primary, #2b3a54);\n  /*@doc Define o peso da fonte do título do popup.*/\n  --ez-alert-list__title--font-weight: var(--text-weight--extra-large, 700);\n\n  /* @doc Define a borda inferior do item da lista. */\n  --ez-list__item--border-bottom: var(--border--small, 1px solid);\n\n  /* @doc Define a cor da borda inferior do item da lista. */\n  --ez-list__item--border-bottom-color: var(--color--strokes, #DCE0E8);\n\n  /* @doc Define o tipo da quebra de linha do item da lista. */\n  --ez-list__item--white-space: break-space;\n}\n\n.alert-list__content {\n  display: flex;\n  flex-direction: column;\n  \n  gap: var(--space--xs);\n  margin: var(--space--large, 24px);\n  width: 100%;\n}\n\n.alert-list__container {\n  z-index: var(--ez-elevation--8, 8);\n  display: flex;\n  height: var(--ez-alert-list__container--height);\n  width: var(--ez-alert-list__container--width);\n  border-radius: var(--border--radius-medium);\n  background-color: var(--background--xlight);\n  box-shadow: var(--shadow--medium);\n\n  &.expanded {\n    height: var(--ez-alert-list__container--height--expanded);\n    width: var(--ez-alert-list__container--width--expanded);\n  }\n\n  @media (max-height: 640px) {\n    max-height: calc(100vh - var(--space--3xl));\n  }  \n}\n\n.alert-list__header {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.alert-list__title {\n  font-family: var(--ez-alert-list__title--font-family);\n  font-size: var(--ez-alert-list__title--font-size);\n  font-weight: var(--ez-alert-list__title--font-weight);\n  color: var(--ez-alert-list__title--color);\n}\n\n.alert-list__header__buttons {\n  display: flex;\n  gap: var(--space--xs);\n}\n\n.alert-list__expandable-content {\n  overflow-y: auto;\n  scrollbar-width: thin;\n}\n\n";

package/dist/cjs/ez-alert.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a7b0c73d.js');
+const index = require('./index-9e5554cb.js');
 const core = require('@sankhyalabs/core');
 
 const ezAlertCss = ":host{--ez-alert-alert-container--padding-up-down:var(--space--small, 6px);--ez-alert-alert-container--padding-right-left:var(--space--medium, 12px);--ez-alert-alert-container--gap:var(--space--medium, 12px);--ez-alert-alert-container--border-radius:var(--border--radius-medium, 12px);--ez-alert-alert-container--font-color-warn:var(--color--alert-warning-900, #8C6B00);--ez-alert-alert-container--icon-warn:var(--color--alert-warning-900, #8C6B00);--ez-alert-alert-container--background-color-warn:var(--color--alert-warning-200, #FFF7D5);--ez-alert-alert-container--font-color-critical:var(--color--alert-error, #BD0025);--ez-alert-alert-container--icon-critical:var(--color--alert-error, #BD0025);--ez-alert-alert-container--background-color-critical:var(--color--alert-error-200, #F7E0E5);--ez-alert-alert-container--font-color-success:var(--color--alert-success, #157A00);--ez-alert-alert-container--icon-success:var(--color--alert-success, #157A00);--ez-alert-alert-container--background-color-success:var(--color--alert-success-200, #E7F6E0);font-size:var(--text--small, 12px);font-family:var(--font-pattern, \"Roboto\");width:100%;hyphens:auto;display:block}.alert-container{display:flex;align-items:center;gap:var(--ez-alert-alert-container--gap);padding:var(--ez-alert-alert-container--padding-up-down) var(--ez-alert-alert-container--padding-right-left);border-radius:var(--ez-alert-alert-container--border-radius)}.warn{background-color:var(--ez-alert-alert-container--background-color-warn);color:var(--ez-alert-alert-container--font-color-warn)}.critical{background-color:var(--ez-alert-alert-container--background-color-critical);color:var(--ez-alert-alert-container--font-color-critical)}.success{background-color:var(--ez-alert-alert-container--background-color-success);color:var(--ez-alert-alert-container--font-color-success)}ez-icon{--ez-icon--color:inherit}.alert-container__icon-warn{--ez-icon--color:var(--ez-alert-alert-container--icon-warn)}.alert-container__icon-critical{--ez-icon--color:var(--ez-alert-alert-container--icon-critical)}.alert-container__icon-success{--ez-icon--color:var(--ez-alert-alert-container--icon-success)}";

package/dist/cjs/ez-application.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a7b0c73d.js');
+const index = require('./index-9e5554cb.js');
 
 const ezApplicationCss = "";
 

package/dist/cjs/ez-badge.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a7b0c73d.js');
+const index = require('./index-9e5554cb.js');
 const core = require('@sankhyalabs/core');
 
 var Sizes;

package/dist/cjs/ez-breadcrumb.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a7b0c73d.js');
+const index = require('./index-9e5554cb.js');
 const core = require('@sankhyalabs/core');
 
 const BreadcrumbItem = (props) => {

package/dist/cjs/ez-button.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a7b0c73d.js');
+const index = require('./index-9e5554cb.js');
 const core = require('@sankhyalabs/core');
 
-const ezButtonCss = ":host{--ez-button--min-width:100px;--ez-button--width:'auto';--ez-button--height:42px;--ez-button__icon--width:18px;--ez-button__inline__icon--padding:12px;--ez-button--padding-top:0px;--ez-button--padding-bottom:0px;--ez-button--padding-right:var(--space--large, 24px);--ez-button--padding-left:var(--space--large, 24px);--ez-button--color:var(--title--primary, #FFF);--ez-button--font-size:var(--text--medium, 14px);--ez-button--font-family:var(--font-pattern, Arial);--ez-button--font-weight:var(--text-weight--large);--ez-button--background-color:var(--background--medium, #c0c0c0);--ez-button--border-radius:var(--border--radius-large, 12px);--ez-button--border:none;--ez-button--justify-content:center;--ez-button--hover-color:var(--color--primary-600);--ez-button--hover--background-color:var(--background--medium, var(--ez-button--background-color));--ez-button--disabled-color:var(--text--disable);--ez-button--disabled--background-color:var(--color--disable-secondary);--ez-button--focus--border:var(--border--xlarge, 4px solid) var(--color--primary-300);--ez-button--focus--box-shadow:none;--ez-button--active-color:var(--color--primary-700);--ez-button--active--background-color:var(--background--strong);--ez-button--link-color:var(--color--primary, '#008561');--ez-button--link--hover-color:var(--color--primary-700, '#1C1D22');--ez-button--link-disabled-color:var(--color--disable-primary, '#e5eaf0');--ez-button--link--small--font-size:var(--text--small, 12px);--ez-button--link--medium--font-size:var(--text--medium, 14px);--ez-button--link--large--font-size:var(--text--large, 16px)}ez-icon{--ez-icon--color:inherit}button{position:relative;display:flex;align-items:center;margin:0;cursor:pointer;transition:background-color 0.2s linear;white-space:nowrap;min-width:var(--ez-button--min-width);width:var(--ez-button--width);height:var(--ez-button--height);font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);padding:var(--ez-button--padding-top) var(--ez-button--padding-right) var(--ez-button--padding-bottom) var(--ez-button--padding-left);border-radius:var(--ez-button--border-radius);background-color:var(--ez-button--background-color);color:var(--ez-button--color);fill:var(--ez-button--color);border:var(--ez-button--border);justify-content:var(--ez-button--justify-content)}button:focus{outline:var(--ez-button--focus--border);box-shadow:var(--ez-button--focus--box-shadow)}button:hover{outline:none;background-color:var(--ez-button--hover--background-color);color:var(--ez-button--hover-color);fill:var(--ez-button--hover-color);--ez-icon--color:var(--ez-button--hover-color)}button:active{outline:none;box-shadow:none;background-color:var(--ez-button--active--background-color);color:var(--ez-button--active-color);fill:var(--ez-button--active-color);--ez-icon--color:var(--ez-button--active-color)}button:disabled{background-color:var(--ez-button--disabled--background-color);color:var(--ez-button--disabled-color);fill:var(--ez-button--disabled-color);border:none;--ez-icon--color:var(--ez-button--disabled-color);cursor:no-drop}.small{height:32px;--ez-button--font-size:var(--text--small, 12px)}.medium{height:42px}.large{height:46px}.btn-icon{padding:0px}.btn-icon--medium{width:42px;min-width:42px;height:42px}.btn-icon--small{width:32px;min-width:32px;height:32px}.btn-icon--large{width:46px;min-width:46px;height:46px}.label-icon{display:flex;flex-direction:column;align-items:center;color:var(--ez-button--color)}.label-icon:hover{color:var(--ez-button--hover-color);fill:var(--ez-button--hover-color);--ez-icon--color:var(--ez-button--hover-color)}.label-icon:active{color:var(--ez-button--active-color);fill:var(--ez-button--active-color);--ez-icon--color:var(--ez-button--active-color)}.label-icon label{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);user-select:none}button:disabled+label{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);color:var(--ez-button--disabled-color);cursor:no-drop}div.label-icon{cursor:pointer}div.label-icon,button:disabled{cursor:no-drop}a{font-family:var(--ez-button--font-family);font-weight:var(--ez-button--font-weight);color:var(--ez-button--link-color);cursor:pointer;display:flex;align-items:center;justify-content:center;}a:hover{color:var(--ez-button--link--hover-color)}a.small{font-size:var(--ez-button--link--small--font-size);line-height:var(--ez-button--link--small--font-size)}a.medium{font-size:var(--ez-button--link--medium--font-size);line-height:var(--ez-button--link--medium--font-size)}a.large{font-size:var(--ez-button--link--large--font-size);line-height:var(--ez-button--link--large--font-size)}a.disabled{color:var(--ez-button--link-disabled-color);cursor:not-allowed}";
+const ezButtonCss = ":host{--ez-button--min-width:100px;--ez-button--width:'auto';--ez-button--height:42px;--ez-button__icon--width:18px;--ez-button__inline__icon--padding:12px;--ez-button--padding-top:0px;--ez-button--padding-bottom:0px;--ez-button--padding-right:var(--space--large, 24px);--ez-button--padding-left:var(--space--large, 24px);--ez-button--color:var(--title--primary, #2B3A54);--ez-button--font-size:var(--text--medium, 14px);--ez-button--font-family:var(--font-pattern, Arial);--ez-button--font-weight:var(--text-weight--large);--ez-button--background-color:var(--background--light, #ffffff);--ez-button--border-radius:var(--border--radius-large, 24px);--ez-button--border:1px solid var(--color--strokes);--ez-button--justify-content:center;--ez-button--hover-color:var(--color--primary-600, #007a5a);--ez-button--hover--background-color:var(--background--light, #ffffff);--ez-button--disabled-color:var(--text--primary);--ez-button--disabled--background-color:var(--background--medium);--ez-button--focus--border:var(--border--medium, 2px solid) var(--color--primary-300);--ez-button--focus--box-shadow:var(--color--primary-300) 0px 0px 0px 2px;--ez-button--active-color:var(--color--primary-700);--ez-button--active--background-color:var(--background--strong);--ez-button--link-color:var(--color--primary, '#008561');--ez-button--link--hover-color:var(--color--primary-700, '#1C1D22');--ez-button--link-disabled-color:var(--text--secondary, #a2abb9);--ez-button--link--small--font-size:var(--text--small, 12px);--ez-button--link--medium--font-size:var(--text--medium, 14px);--ez-button--link--large--font-size:var(--text--large, 16px)}ez-icon{--ez-icon--color:inherit}button{position:relative;display:flex;align-items:center;margin:0;cursor:pointer;transition:background-color 0.2s linear;white-space:nowrap;min-width:var(--ez-button--min-width);width:var(--ez-button--width);height:var(--ez-button--height);font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);padding:var(--ez-button--padding-top) var(--ez-button--padding-right) var(--ez-button--padding-bottom) var(--ez-button--padding-left);border-radius:var(--ez-button--border-radius);background-color:var(--ez-button--background-color);color:var(--ez-button--color);fill:var(--ez-button--color);border:var(--ez-button--border);justify-content:var(--ez-button--justify-content)}button:focus{outline:var(--ez-button--focus--border);box-shadow:none}button:hover{outline:none;background-color:var(--ez-button--hover--background-color);color:var(--ez-button--hover-color);fill:var(--ez-button--hover-color);--ez-icon--color:var(--ez-button--hover-color)}button:active{outline:none;box-shadow:none;background-color:var(--ez-button--active--background-color);color:var(--ez-button--active-color);fill:var(--ez-button--active-color);--ez-icon--color:var(--ez-button--active-color)}button:disabled{background-color:var(--ez-button--disabled--background-color);color:var(--ez-button--disabled-color);fill:var(--ez-button--disabled-color);--ez-icon--color:var(--ez-button--disabled-color);cursor:no-drop}.x-small{height:28px;--ez-button--font-size:var(--text--small, 12px)}.small{height:32px;--ez-button--font-size:var(--text--small, 12px)}.medium{height:42px}.large{height:46px}.btn-icon{padding:0px}.btn-icon--medium{width:42px;min-width:42px;height:42px}.btn-icon--x-small{width:28px;min-width:28px;height:28px}.btn-icon--small{width:32px;min-width:32px;height:32px}.btn-icon--large{width:46px;min-width:46px;height:46px}.label-icon{display:flex;flex-direction:column;align-items:center;color:var(--ez-button--color)}.label-icon:hover{color:var(--ez-button--hover-color);fill:var(--ez-button--hover-color);--ez-icon--color:var(--ez-button--hover-color)}.label-icon:active{color:var(--ez-button--active-color);fill:var(--ez-button--active-color);--ez-icon--color:var(--ez-button--active-color)}.label-icon label{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);user-select:none}button:disabled+label{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);color:var(--ez-button--disabled-color);cursor:no-drop}div.label-icon{cursor:pointer}div.label-icon,button:disabled{cursor:no-drop}a{font-family:var(--ez-button--font-family);font-weight:var(--ez-button--font-weight);color:var(--ez-button--link-color);cursor:pointer;display:flex;align-items:center;justify-content:center;}a:hover{color:var(--ez-button--link--hover-color)}a.small{font-size:var(--ez-button--link--small--font-size);line-height:var(--ez-button--link--small--font-size)}a.medium{font-size:var(--ez-button--link--medium--font-size);line-height:var(--ez-button--link--medium--font-size)}a.large{font-size:var(--ez-button--link--large--font-size);line-height:var(--ez-button--link--large--font-size)}a.disabled{color:var(--ez-button--link-disabled-color);cursor:not-allowed}";
 
 const EzButton = class {
   constructor(hostRef) {
@@ -43,10 +43,16 @@ const EzButton = class {
       core.ElementIDUtils.addIDInfo(this._button, 'button', dataInfo);
     }
   }
+  getButtonSize(sizeParam = "medium") {
+    const sizeList = ["x-small", "small", "medium", "large"];
+    const sizeLowerCase = this.size && this.size.toLowerCase();
+    return sizeList.includes(sizeLowerCase) ? sizeLowerCase : sizeParam;
+  }
   getIconSize(sizeParam = "medium") {
     const sizeList = ["small", "medium", "large"];
     const sizeLowerCase = this.size && this.size.toLowerCase();
-    return sizeList.includes(sizeLowerCase) ? sizeLowerCase : sizeParam;
+    const sizeMapped = sizeLowerCase === "x-small" ? "small" : sizeLowerCase;
+    return sizeList.includes(sizeMapped) ? sizeMapped : sizeParam;
   }
   handleSlotChange(ev) {
     const slot = ev.target;
@@ -68,16 +74,16 @@ const EzButton = class {
   }
   render() {
     if (this.mode == "icon") {
-      return (index.h("button", { class: "btn-icon " + ((this.getIconSize()) ? `btn-icon--${this.getIconSize()}` : ""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, index.h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size: this.getIconSize() })));
+      return (index.h("button", { class: "btn-icon " + ((this.getButtonSize()) ? `btn-icon--${this.getButtonSize()}` : ""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, index.h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size: this.getIconSize() })));
     }
     else if (this.mode == "label-icon") {
-      return (index.h("div", { class: "label-icon" }, index.h("button", { class: "btn-icon " + ((this.getIconSize()) ? `btn-icon--${this.getIconSize()}` : ""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, index.h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size: this.getIconSize() })), index.h("label", { title: this.label }, this.label)));
+      return (index.h("div", { class: "label-icon" }, index.h("button", { class: "btn-icon " + ((this.getButtonSize()) ? `btn-icon--${this.getButtonSize()}` : ""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, index.h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size: this.getIconSize() })), index.h("label", { title: this.label }, this.label)));
     }
     else if (this.mode == "link") {
       return (index.h("a", { class: `${this.getIconSize()} ${!this.enabled ? "disabled" : ""}`, ref: (el) => this._button = el }, index.h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, index.h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
     }
     else {
-      return (index.h("button", { class: this.getIconSize(""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, index.h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, index.h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
+      return (index.h("button", { class: this.getButtonSize(""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, index.h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, index.h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
     }
   }
   get _element() { return index.getElement(this); }