@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-08202.0

package/dist/cjs/RecordValidationProcessor-edd23705.js

@@ -0,0 +1,102 @@
+'use strict';
+
+const core = require('@sankhyalabs/core');
+const ApplicationUtils = require('./ApplicationUtils-2e444734.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() {
+    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) {
+          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;
+      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);
+  }
+}
+
+exports.RecordValidationProcessor = RecordValidationProcessor;
+exports.buildFieldMetadata = buildFieldMetadata;

package/dist/cjs/constants-3a1d64fb.js

@@ -0,0 +1,7 @@
+'use strict';
+
+const REQUIRED_INFO = " (obrigatório) *";
+const DISTINCT_FILTER_NAME_PREFIX = 'FILTRO_COLUNA_';
+
+exports.DISTINCT_FILTER_NAME_PREFIX = DISTINCT_FILTER_NAME_PREFIX;
+exports.REQUIRED_INFO = REQUIRED_INFO;

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

@@ -0,0 +1,212 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1064511f.js');
+const core = require('@sankhyalabs/core');
+require('./ApplicationUtils-2e444734.js');
+const CSSVarsUtils = require('./CSSVarsUtils-b136a156.js');
+require('./DialogType-2114c337.js');
+require('./CheckMode-ecb90b87.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__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;z-index:var(--more-visible, 2);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--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(--more-visible, 2) + 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}";
+
+const EzActionsButton = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ezAction = index.createEvent(this, "ezAction", 7);
+    this._arrowOffset = 5;
+    this.innerClickCheck = (floatingContainer, node) => {
+      var _a;
+      if (node && floatingContainer) {
+        if (node === floatingContainer) {
+          return true;
+        }
+        const children = floatingContainer.children;
+        for (let i = 0; i < children.length; i++) {
+          if ((_a = children[i].shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(node)) {
+            return true;
+          }
+        }
+      }
+      return false;
+    };
+    this._selectedAction = undefined;
+    this.enabled = true;
+    this.actions = undefined;
+    this.size = "medium";
+    this.showLabel = false;
+    this.displayIcon = undefined;
+    this.checkOption = false;
+    this.value = undefined;
+    this.isTransparent = false;
+    this.arrowActive = false;
+  }
+  /**
+   * Oculta a lista de ações.
+   */
+  async hideActions() {
+    if (this._floatingID != undefined) {
+      core.FloatingManager.close(this._floatingID);
+    }
+    this._floatingID = undefined;
+  }
+  /**
+   * Verifica se a lista de ações está aberta.
+   */
+  async isOpened() {
+    return this._floatingID != undefined;
+  }
+  getFloatOptions() {
+    return {
+      autoClose: true,
+      innerClickTest: this.innerClickCheck,
+      isFixed: true,
+      top: this.getPositionTop(),
+      left: this.getPositionLeft()
+    };
+  }
+  getSideLimit() {
+    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";
+    }
+    return;
+  }
+  showActions() {
+    if (!this.enabled) {
+      return;
+    }
+    const options = this.getFloatOptions();
+    this._floatingID = core.FloatingManager.float(this._actionsList, this._listContainer, options);
+    const sideLimit = this.getSideLimit();
+    if (sideLimit != undefined) {
+      options.left = sideLimit;
+      core.FloatingManager.updateFloatPosition(this._actionsList, this._listContainer, options);
+    }
+    window.requestAnimationFrame(() => {
+      this._actionsList.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+    });
+  }
+  updatePosition() {
+    if (!this.enabled || this._floatingID == undefined) {
+      return;
+    }
+    const options = this.getFloatOptions();
+    const sideLimit = this.getSideLimit();
+    if (sideLimit != undefined) {
+      options.left = sideLimit;
+    }
+    core.FloatingManager.updateFloatPosition(this._actionsList, this._listContainer, options);
+  }
+  getPositionTop() {
+    var _a;
+    const boundingHost = (_a = this._element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    if (boundingHost == undefined) {
+      return null;
+    }
+    return (boundingHost.y + boundingHost.height) + "px";
+  }
+  getBoundingLeft() {
+    var _a;
+    const boundingHost = (_a = this._element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    if (boundingHost == undefined) {
+      return null;
+    }
+    const arrowOffset = this.arrowActive ? this._arrowOffset : 0;
+    return (boundingHost.x - arrowOffset) + "px";
+  }
+  getPositionLeft() {
+    const boundingLeft = this.getBoundingLeft();
+    if (boundingLeft) {
+      return boundingLeft;
+    }
+    else if (this.arrowActive) {
+      return `-${this._arrowOffset}px`;
+    }
+    return null;
+  }
+  hasLabelOrCheckOption() {
+    var _a;
+    return (this.showLabel || this.checkOption) && ((_a = this.actions) === null || _a === void 0 ? void 0 : _a.length) > 0;
+  }
+  hasIconName() {
+    var _a;
+    return (_a = this.actions) === null || _a === void 0 ? void 0 : _a.some(action => action.iconName != undefined);
+  }
+  controlScrollPage() {
+    window.removeEventListener("scroll", this.updatePosition.bind(this));
+    window.addEventListener("scroll", this.updatePosition.bind(this));
+  }
+  //---------------------------------------------
+  // Event handlers
+  //---------------------------------------------
+  handlerButtonClick() {
+    this.showActions();
+  }
+  actionClick(action) {
+    this._selectedAction = action;
+    this.hideActions();
+    this.ezAction.emit(action);
+  }
+  //---------------------------------------------
+  // Lifecycle web component
+  //---------------------------------------------
+  componentWillLoad() {
+    if (this.actions == undefined) {
+      this.actions = [];
+      const optionsTags = this._element.querySelectorAll("action");
+      if (optionsTags) {
+        optionsTags.forEach((e) => {
+          let label = e.innerText;
+          let value = e.getAttribute("value");
+          let enabled = !(e.getAttribute("enabled") === "false");
+          if (!value) {
+            value = label;
+          }
+          this.actions.push({ label, value, enabled });
+          e.hidden = true;
+        });
+      }
+    }
+  }
+  componentDidLoad() {
+    CSSVarsUtils.CSSVarsUtils.applyVarsButton(this._element, this._button);
+    core.ElementIDUtils.addIDInfo(this._element);
+    this.controlScrollPage();
+  }
+  componentDidRender() {
+    if (this._floatingID == undefined) {
+      this._actionsList.remove();
+    }
+    if (this.hasLabelOrCheckOption()) {
+      if (!!this.value) {
+        this._selectedAction = this.actions.find((action) => action.value === this.value);
+      }
+      else if (!!!this._selectedAction) {
+        this._selectedAction = this.actions[0];
+      }
+    }
+  }
+  render() {
+    var _a;
+    return (index.h(index.Host, null, index.h("ez-button", { ref: elem => this._button = elem, class: (this.isTransparent ? "ez-actions-button__btn-transparent" : "") +
+        (this.showLabel ? " ez-actions-button__btn-label" : ""), label: this.showLabel && ((_a = this._selectedAction) === null || _a === void 0 ? void 0 : _a.label), enabled: this.enabled, mode: this.showLabel ? undefined : "icon", iconName: this.showLabel ? "" : this.displayIcon || "dots-vertical", size: this.size, onClick: () => this.handlerButtonClick() }, this.showLabel &&
+      index.h("ez-icon", { class: "ez-actions-button__icon-right", slot: "rightIcon", iconName: this.displayIcon || "dots-vertical" })), index.h("section", { class: "ez-actions-button__list-container", ref: elem => this._listContainer = elem }, this.arrowActive &&
+      index.h("div", { class: "ez-actions-button__arrow ez-actions-button__arrow--" + (this.size || "small") +
+          (this.isTransparent ? " ez-actions-button__arrow--upped" : "") }), index.h("div", { ref: elem => this._actionsList = elem, class: "ez-actions-button__actions-list" +
+        (this.arrowActive && !this.isTransparent ? " ez-actions-button__actions-list--lowered" : "") }, this.actions.map(action => {
+      var _a;
+      return index.h("ez-button", { size: "small", label: action.label, onClick: () => this.actionClick(action), enabled: action.enabled, class: "ez-actions-button__btn-action" +
+          (this.checkOption || this.hasIconName() ? " ez-actions-button__btn-action--spaced" : "") }, this.checkOption && ((_a = this._selectedAction) === null || _a === void 0 ? void 0 : _a.value) === action.value &&
+        index.h("ez-icon", { class: "ez-actions-button__icon-check", slot: "leftIcon", size: "small", iconName: "check" }), !this.checkOption && action.iconName &&
+        index.h("ez-icon", { class: "ez-actions-button__icon-item", slot: "leftIcon", size: "small", iconName: action.iconName }));
+    })))));
+  }
+  get _element() { return index.getElement(this); }
+};
+EzActionsButton.style = ezActionsButtonCss;
+
+exports.ez_actions_button = EzActionsButton;

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

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1064511f.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)}";
+
+const iconMap = {
+  warn: "warning_triangle",
+  critical: "close",
+  success: "check"
+};
+const EzAlert = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.alertType = 'success';
+  }
+  componentWillRender() {
+    this.dataElementId = core.ElementIDUtils.addIDInfo(this._element);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: `alert-container ${this.alertType}` }, index.h("div", null, index.h("ez-icon", Object.assign({}, { [core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: this.dataElementId }, { class: `alert-container__icon-${this.alertType}`, size: "large", iconName: iconMap[this.alertType] }))), index.h("div", Object.assign({}, { [core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${this.dataElementId}_text` }), index.h("slot", null)))));
+  }
+  get _element() { return index.getElement(this); }
+};
+EzAlert.style = ezAlertCss;
+
+exports.ez_alert = EzAlert;

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

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1064511f.js');
+
+const ezApplicationCss = "";
+
+const EzApplication = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.applicationLoaded = index.createEvent(this, "applicationLoaded", 7);
+  }
+  componentWillLoad() {
+    //Initizalize application
+  }
+  componentDidLoad() {
+    this.applicationLoaded.emit(true);
+  }
+  render() {
+    return (index.h("div", null));
+  }
+};
+EzApplication.style = ezApplicationCss;
+
+exports.ez_application = EzApplication;

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

@@ -0,0 +1,120 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1064511f.js');
+const core = require('@sankhyalabs/core');
+
+var Sizes;
+(function (Sizes) {
+  Sizes["EXTRA_LARGE"] = "extra-large";
+  Sizes["LARGE"] = "large";
+  Sizes["MEDIUM"] = "medium";
+  Sizes["SMALL_MEDIUM"] = "small-medium";
+  Sizes["SMALL"] = "small";
+  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 EzBadge = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this._sizes = {
+      [Sizes.EXTRA_LARGE]: {
+        sufix: "xl",
+      },
+      [Sizes.LARGE]: {
+        sufix: "lg",
+      },
+      [Sizes.MEDIUM]: {
+        sufix: "md",
+      },
+      [Sizes.SMALL_MEDIUM]: {
+        sufix: "sm",
+      },
+      [Sizes.SMALL]: {
+        sufix: "xs",
+      },
+      [Sizes.EXTRA_SMALL]: {
+        sufix: "2xs",
+      },
+    };
+    this.hasSlot = false;
+    this.size = "small";
+    this.label = undefined;
+    this.iconLeft = undefined;
+    this.iconRight = undefined;
+    this.position = { horizontal: "right", vertical: "top" };
+  }
+  getIconSize() {
+    switch (this.size) {
+      case "large":
+        return "large";
+      case "medium":
+      case "small-medium":
+        return "small";
+      case "small":
+        return "x-small";
+      default:
+        return null;
+    }
+  }
+  componentDidLoad() {
+    if (this._element) {
+      core.ElementIDUtils.addIDInfo(this._element);
+    }
+    if (this._badge) {
+      const dataInfo = { id: 'embedded' };
+      core.ElementIDUtils.addIDInfo(this._badge, 'ezBadge', dataInfo);
+    }
+  }
+  handleSlotChange() {
+    this.hasSlot = true;
+  }
+  validateIconLeft() {
+    return (this.iconLeft) && this.iconLeft.trim() !== "";
+  }
+  validateIconRight() {
+    return (this.iconRight) && this.iconRight.trim() !== "";
+  }
+  validateLabel() {
+    return (this.label) && this.label.trim() !== "";
+  }
+  createContainerClassName() {
+    let sizeSufix = this._sizes[this.size].sufix;
+    let containerClassNames = ["badge__content"];
+    if (this.hasSlot) {
+      containerClassNames.push("badge__content--fill-" + sizeSufix);
+      if (this.position.vertical == "bottom" && this.position.horizontal == "right") {
+        containerClassNames.push("badge__content--fill-bottom-right");
+      }
+      if (this.position.vertical == "bottom" && this.position.horizontal == "left") {
+        containerClassNames.push("badge__content--fill-bottom-left");
+      }
+      if (this.position.vertical == "top" && this.position.horizontal == "right") {
+        containerClassNames.push("badge__content--fill-top-right");
+      }
+      if (this.position.vertical == "top" && this.position.horizontal == "left") {
+        containerClassNames.push("badge__content--fill-top-left");
+      }
+    }
+    if (this.label) {
+      containerClassNames.push("badge__content--text-" + sizeSufix);
+    }
+    else if (this.iconLeft || this.iconRight) {
+      containerClassNames.push("badge__content--icon-" + sizeSufix);
+    }
+    else {
+      containerClassNames.push("badge__content--fill-" + sizeSufix);
+    }
+    return containerClassNames.join(" ");
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "badge" }, index.h("div", null, index.h("slot", { name: "child-badge", onSlotchange: () => { this.handleSlotChange(); } })), index.h("div", { class: this.createContainerClassName(), ref: (el) => this._badge = el }, this.validateIconLeft() && index.h("ez-icon", { class: "icon", iconName: this.iconLeft, size: this.getIconSize() }), this.validateLabel() && index.h("label", { title: this.label }, this.label), this.validateIconRight() && index.h("ez-icon", { class: "icon", iconName: this.iconRight, size: this.getIconSize() })))));
+  }
+  get _element() { return index.getElement(this); }
+};
+EzBadge.style = ezBadgeCss;
+
+exports.ez_badge = EzBadge;