@sankhyalabs/ezui 5.22.0-dev.11 → 5.22.0-dev.111

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-c2060474.js

@@ -0,0 +1,446 @@
+'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.nodeName === "EZ-SEARCH-PLUS") && field["optionLoader"] == undefined) {
+      const isSearchPlus = field.nodeName === "EZ-SEARCH-PLUS";
+      const loader = isSearchPlus ? core.ApplicationContext.getContextValue("__EZUI__SEARCH__PLUS__OPTION__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/FormLayout-c2451c7f.js

@@ -0,0 +1,7 @@
+'use strict';
+
+exports.FormLayout = void 0;
+(function (FormLayout) {
+  FormLayout[FormLayout["CASCADE"] = 0] = "CASCADE";
+  FormLayout[FormLayout["SIDE_BY_SIDE"] = 1] = "SIDE_BY_SIDE";
+})(exports.FormLayout || (exports.FormLayout = {}));

package/dist/cjs/{constants-2714478b.js → constants-569271bc.js}

@@ -3,7 +3,11 @@
 const REQUIRED_INFO = " (obrigatório) *";
 const DISTINCT_FILTER_NAME_PREFIX = 'FILTRO_COLUNA_';
 const EZ_GRID_LOADING_SOURCE = "EZ_GRID_LOADING_SOURCE";
+const PRESENTATION_COL_ID_PROP_NAME = "gridDescriptionColID";
+const PRESENTATION_FROM_COL_PROP_NAME = "presentationFieldFrom";
 
 exports.DISTINCT_FILTER_NAME_PREFIX = DISTINCT_FILTER_NAME_PREFIX;
 exports.EZ_GRID_LOADING_SOURCE = EZ_GRID_LOADING_SOURCE;
+exports.PRESENTATION_COL_ID_PROP_NAME = PRESENTATION_COL_ID_PROP_NAME;
+exports.PRESENTATION_FROM_COL_PROP_NAME = PRESENTATION_FROM_COL_PROP_NAME;
 exports.REQUIRED_INFO = REQUIRED_INFO;

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

@@ -5,10 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-a7b0c73d.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');
+require('./types-6a5df0c7.js');
+require('./FormLayout-c2451c7f.js');
 
 const ezActionsButtonCss = ":host{--ez-actions-button__actions-list--border-radius:var(--border--radius-medium, 12px);--ez-actions-button__actions-list--box-shadow:var(--shadow, 0px 0px 16px 0px #000);--ez-actions-button__actions-list--background-color:var(--background--xlight, #fff);--ez-actions-button__actions-list--padding:var(--space--small, 6px);--ez-actions-button__actions-list--top-margin:var(--space-small, 6px);--ez-actions-button__actions-list--z-index:var(--ez-elevation--8, 8);--ez-actions-button__actions-max-height:415px;--ez-actions-button__btn-action--min-width:'auto';--ez-actions-button__btn-action--background-color:var(--background--xlight, #fff);display:flex;flex-direction:column;height:fit-content;user-select:none}.ez-actions-button__actions-list{display:flex;flex-direction:column;position:fixed;width:fit-content;height:fit-content;overflow-y:auto;scrollbar-width:thin;z-index:var(--ez-actions-button__actions-list--z-index);padding:var(--ez-actions-button__actions-list--padding);margin-top:var(--ez-actions-button__actions-list--top-margin);background-color:var(--ez-actions-button__actions-list--background-color);border-radius:var(--ez-actions-button__actions-list--border-radius);box-shadow:var(--ez-actions-button__actions-list--box-shadow)}.ez-actions-button__actions-list--max-height{max-height:var(--ez-actions-button__actions-max-height)}.ez-actions-button__actions-list--lowered{margin-top:calc(var(--ez-actions-button__actions-list--top-margin) + 6px)}.ez-actions-button__btn-action{--ez-button--justify-content:flex-start;--ez-button--width:100%;--ez-button--min-width:var(--ez-actions-button__btn-action--min-width);--ez-button--background-color:var(--ez-actions-button__btn-action--background-color);--ez-button--font-weight:var(--text-weight--medium, 400);--ez-button--padding-left:var(--space--medium, 12px);--ez-button--padding-right:var(--space--medium, 12px)}.ez-actions-button__btn-action--spaced{--ez-button--padding-left:calc(var(--space--medium, 12px) + 24px)}.ez-actions-button__icon-right{margin-left:var(--space--small, 6px)}.ez-actions-button__icon-check,.ez-actions-button__icon-item{position:absolute;left:var(--space--medium, 12px)}.ez-actions-button__icon-check{color:var(--ez-button--hover-color)}.ez-actions-button__arrow{position:absolute;border-left:10px solid transparent;border-right:10px solid transparent;width:0;height:0;z-index:calc(var(--ez-actions-button__actions-list--z-index) + 1);border-bottom:15px solid var(--ez-actions-button__btn-action--background-color)}.ez-actions-button__arrow--upped{margin-top:calc((var(--ez-actions-button__actions-list--top-margin) + 2px) * -1)}.ez-actions-button__arrow--small{margin-left:6px}.ez-actions-button__arrow--medium{margin-left:11px}.ez-actions-button__arrow--large{margin-left:13px}.ez-actions-button__arrow:only-child{display:none}.ez-actions-button__btn-transparent{--ez-button--background-color:transparent;--ez-button--hover--background-color:transparent;--ez-button--active--background-color:transparent;--ez-button--focus--border:none}.ez-actions-button__btn-label{--ez-button--padding-left:var(--space--medium, 12px);--ez-button--padding-right:var(--space--medium, 12px)}.ez-actions-button__list-container{position:relative}.ez-actions-button--bottom-padding{padding-bottom:var(--space--small, 6px)}";
 
@@ -99,8 +100,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-badge.cjs.entry.js

@@ -15,7 +15,7 @@ var Sizes;
   Sizes["EXTRA_SMALL"] = "extra-small";
 })(Sizes || (Sizes = {}));
 
-const ezBadgeCss = ":host{--ez-badge--size-2xs:var(--space--2xs, 8px);--ez-badge--size-xs:var(--space--xs, 12px);--ez-badge--size-sm:var(--space--sm, 16px);--ez-badge--size-md:var(--space--md, 20px);--ez-badge--size-lg:var(--space--lg, 24px);--ez-badge--size-xl:var(--space--xl, 32px);--ez-badge--padding-2xs:0;--ez-badge--padding-xs:var(--space--nano, 2px);--ez-badge--padding-sm:calc(var(--space--nano, 2px) + 1px);--ez-badge--padding-md:var(--space--3xs, 4px);--ez-badge--padding-lg:calc(var(--space--3xs, 4px) + 2px);--ez-badge--padding-xl:var(--space--2xs);--ez-badge--border-radius:calc(var(--border--radius-medium, 12px) + 8px);--ez-badge--font-family:var(--font-pattern, Roboto);--ez-badge--font-weight-medium:var(--text-weight--medium, 400);--ez-badge--background-color:var(--color--primary, #008561);--ez-badge--border-none:0;--ez-badge--color:var(--text--inverted, #ffffff);--ez-badge--gap:calc(var(--ez-badge--padding-xs) + 1px);--ez-badge--font-size-md:var(--text--medium);--ez-badge--font-size-sm:var(--text--medium);--ez-badge--font-size-xs:var(--text--small)}ez-icon{--ez-icon--color:inherit}.badge{display:flex;justify-content:center;align-items:center;position:relative}.badge__content{font-family:var(--ez-badge--font-family, Roboto);font-weight:var(--ez-badge--font-weight-medium, 400);background-color:var(--ez-badge--background-color, #008561);border:var(--ez-badge--border-none, 0);color:var(--ez-badge--color, #ffffff);border-radius:var(--ez-badge--border-radius, 20px);gap:var(--ez-badge--gap, 3px);display:flex;justify-content:center;align-items:center}.badge__content--fill-xs{height:var(--ez-badge--size-xs, 12px);min-width:var(--ez-badge--size-xs, 12px)}.badge__content--fill-2xs{height:var(--ez-badge--size-2xs, 8px);min-width:var(--ez-badge--size-2xs, 8px)}.badge__content--text-md{height:calc(var(--ez-badge--size-md, 20px) - 2px);min-width:var(--ez-badge--size-sm, 20px);padding-top:var(--ez-badge--padding-sm);padding-bottom:var(--ez-badge--padding-sm);padding-right:var(--ez-badge--padding-xl);padding-left:var(--ez-badge--padding-xl);font-size:var(--ez-badge--font-size-md)}.badge__content--text-sm{height:calc(var(--ez-badge--size-sm, 16px) - 2px);min-width:var(--ez-badge--size-sm, 16px);padding-top:var(--ez-badge--padding-sm);padding-bottom:var(--ez-badge--padding-sm);padding-right:var(--ez-badge--padding-xl);padding-left:var(--ez-badge--padding-xl);font-size:var(--ez-badge--font-size-sm)}.badge__content--text-xs{height:var(--ez-badge--size-sm, 16px);min-width:var(--ez-badge--size-sm, 16px);padding-top:var(--ez-badge--padding-2xs);padding-bottom:var(--ez-badge--padding-2xs);padding-right:var(--ez-badge--padding-lg);padding-left:var(--ez-badge--padding-lg);font-size:var(--ez-badge--font-size-xs)}.badge__content--icon-lg{height:var(--ez-badge--size-lg, 24px);min-width:var(--ez-badge--size-lg, 24px);padding:var(--ez-badge--padding-md)}.badge__content--icon-md{height:var(--ez-badge--size-sm, 16px);min-width:var(--ez-badge--size-sm, 16px);padding:var(--ez-badge--padding-md)}.badge__content--icon-sm{height:var(--ez-badge--size-sm, 16px);min-width:var(--ez-badge--size-sm, 16px);padding:var(--ez-badge--padding-xs)}.badge__content--icon-xs{height:var(--ez-badge--size-xs, 12px);min-width:var(--ez-badge--size-xs, 12px);padding:var(--ez-badge--padding-xs)}.badge__content--fill{position:absolute;top:0;inset-inline-end:0;z-index:var(--most-visible, 2)}.badge__content--fill-top-right{transform:translate(50%, -50%);position:absolute;top:0;right:0}.badge__content--fill-top-left{transform:translate(-50%, -50%);position:absolute;top:0;left:0}.badge__content--fill-bottom-left{transform:translate(-50%, 50%);position:absolute;bottom:0;left:0}.badge__content--fill-bottom-right{transform:translate(50%, 50%);position:absolute;bottom:0;right:0}";
+const ezBadgeCss = ":host{--ez-badge--size-2xs:var(--space--2xs, 8px);--ez-badge--size-xs:var(--space--xs, 12px);--ez-badge--size-sm:var(--space--sm, 16px);--ez-badge--size-md:var(--space--md, 20px);--ez-badge--size-lg:var(--space--lg, 24px);--ez-badge--size-xl:var(--space--xl, 32px);--ez-badge--padding-2xs:0;--ez-badge--padding-xs:var(--space--nano, 2px);--ez-badge--padding-sm:calc(var(--space--nano, 2px) + 1px);--ez-badge--padding-md:var(--space--3xs, 4px);--ez-badge--padding-lg:calc(var(--space--3xs, 4px) + 2px);--ez-badge--padding-xl:var(--space--2xs);--ez-badge--border-radius:calc(var(--border--radius-medium, 12px) + 8px);--ez-badge--font-family:var(--font-pattern, Roboto);--ez-badge--font-weight-medium:var(--text-weight--medium, 400);--ez-badge--background-color:var(--color--primary, #008561);--ez-badge--border-none:0;--ez-badge--color:var(--text--inverted, #ffffff);--ez-badge--gap:calc(var(--ez-badge--padding-xs) + 1px);--ez-badge--font-size-md:var(--text--medium);--ez-badge--font-size-sm:var(--text--medium);--ez-badge--font-size-xs:var(--text--small)}ez-icon{--ez-icon--color:inherit}.badge{display:flex;justify-content:center;align-items:center;position:relative}.badge__content{font-family:var(--ez-badge--font-family, Roboto);font-weight:var(--ez-badge--font-weight-medium, 400);background-color:var(--ez-badge--background-color, #008561);border:var(--ez-badge--border-none, 0);color:var(--ez-badge--color, #ffffff);border-radius:var(--ez-badge--border-radius, 20px);gap:var(--ez-badge--gap, 3px);display:flex;justify-content:center}.badge__content--fill-xs{height:var(--ez-badge--size-xs, 12px);min-width:var(--ez-badge--size-xs, 12px)}.badge__content--fill-2xs{height:var(--ez-badge--size-2xs, 8px);min-width:var(--ez-badge--size-2xs, 8px)}.badge__content--text-md{height:calc(var(--ez-badge--size-md, 20px) - 2px);min-width:var(--ez-badge--size-sm, 20px);padding-top:var(--ez-badge--padding-sm);padding-bottom:var(--ez-badge--padding-sm);padding-right:var(--ez-badge--padding-xl);padding-left:var(--ez-badge--padding-xl);font-size:var(--ez-badge--font-size-md)}.badge__content--text-sm{height:calc(var(--ez-badge--size-sm, 16px) - 2px);min-width:var(--ez-badge--size-sm, 16px);padding-top:var(--ez-badge--padding-sm);padding-bottom:var(--ez-badge--padding-sm);padding-right:var(--ez-badge--padding-xl);padding-left:var(--ez-badge--padding-xl);font-size:var(--ez-badge--font-size-sm)}.badge__content--text-xs{height:var(--ez-badge--size-sm, 16px);min-width:var(--ez-badge--size-sm, 16px);padding-top:var(--ez-badge--padding-2xs);padding-bottom:var(--ez-badge--padding-2xs);padding-right:var(--ez-badge--padding-lg);padding-left:var(--ez-badge--padding-lg);font-size:var(--ez-badge--font-size-xs)}.badge__content--icon-lg{height:var(--ez-badge--size-lg, 24px);min-width:var(--ez-badge--size-lg, 24px);padding:var(--ez-badge--padding-md)}.badge__content--icon-md{height:var(--ez-badge--size-sm, 16px);min-width:var(--ez-badge--size-sm, 16px);padding:var(--ez-badge--padding-md)}.badge__content--icon-sm{height:var(--ez-badge--size-sm, 16px);min-width:var(--ez-badge--size-sm, 16px);padding:var(--ez-badge--padding-xs)}.badge__content--icon-xs{height:var(--ez-badge--size-xs, 12px);min-width:var(--ez-badge--size-xs, 12px);padding:var(--ez-badge--padding-xs)}.badge__content--icon-align-center{align-items:center}.badge__content--icon-align-start{align-items:flex-start}.badge__content--icon-align-end{align-items:flex-end}.badge__content--fill{position:absolute;top:0;inset-inline-end:0;z-index:var(--most-visible, 2)}.badge__content--fill-top-right{transform:translate(50%, -50%);position:absolute;top:0;right:0}.badge__content--fill-top-left{transform:translate(-50%, -50%);position:absolute;top:0;left:0}.badge__content--fill-bottom-left{transform:translate(-50%, 50%);position:absolute;bottom:0;left:0}.badge__content--fill-bottom-right{transform:translate(50%, 50%);position:absolute;bottom:0;right:0}";
 
 const EzBadge = class {
   constructor(hostRef) {
@@ -46,6 +46,7 @@ const EzBadge = class {
     this.iconLeft = undefined;
     this.iconRight = undefined;
     this.position = { horizontal: "right", vertical: "top" };
+    this.alignItems = "center";
   }
   getIconSize() {
     switch (this.size) {
@@ -60,6 +61,16 @@ const EzBadge = class {
         return null;
     }
   }
+  getAlignItemsClass() {
+    switch (this.alignItems) {
+      case "flex-end":
+        return "end";
+      case "flex-start":
+        return "start";
+      default:
+        return "center";
+    }
+  }
   componentDidLoad() {
     if (this._element) {
       core.ElementIDUtils.addIDInfo(this._element);
@@ -83,7 +94,8 @@ const EzBadge = class {
   }
   createContainerClassName() {
     let sizeSufix = this._sizes[this.size].sufix;
-    let containerClassNames = ["badge__content"];
+    let alignItemsClass = "badge__content--icon-align-" + this.getAlignItemsClass();
+    let containerClassNames = ["badge__content", alignItemsClass];
     if (this.hasSlot) {
       containerClassNames.push("badge__content--fill-" + sizeSufix);
       if (this.position.vertical == "bottom" && this.position.horizontal == "right") {