@sankhyalabs/ezui 4.2.0 → 4.3.0

package/dist/collection/components/ez-badge/ez-badge.js

@@ -0,0 +1,211 @@
+import { ElementIDUtils } from "@sankhyalabs/core";
+import { h, Host } from "@stencil/core";
+import { Sizes } from "./enum/sizes";
+export class EzBadge {
+  constructor() {
+    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) {
+      ElementIDUtils.addIDInfo(this._element);
+    }
+    if (this._badge) {
+      const dataInfo = { id: 'embedded' };
+      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 (h(Host, null, h("div", { class: "badge" }, h("div", null, h("slot", { name: "child-badge", onSlotchange: () => { this.handleSlotChange(); } })), h("div", { class: this.createContainerClassName(), ref: (el) => this._badge = el }, this.validateIconLeft() && h("ez-icon", { class: "icon", iconName: this.iconLeft, size: this.getIconSize() }), this.validateLabel() && h("label", { title: this.label }, this.label), this.validateIconRight() && h("ez-icon", { class: "icon", iconName: this.iconRight, size: this.getIconSize() })))));
+  }
+  static get is() { return "ez-badge"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-badge.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-badge.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"extra-large\" | \"large\" | \"medium\" | \"small-medium\" | \"small\" | \"extra-small\"",
+          "resolved": "\"extra-large\" | \"extra-small\" | \"large\" | \"medium\" | \"small\" | \"small-medium\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o tamanho de acordo com o tipo utilizado pelo componente."
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "\"small\""
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o conte\u00FAdo textual ou num\u00E9rico do componente."
+        },
+        "attribute": "label",
+        "reflect": true
+      },
+      "iconLeft": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o \u00EDcone a ser usado no lado esquerdo do badge: [ez-icons](https://sankhyalabs-storybook.herokuapp.com/themes/default/icons/fonts/index.html)"
+        },
+        "attribute": "icon-left",
+        "reflect": true
+      },
+      "iconRight": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o \u00EDcone a ser usado no lado direito do badge: [ez-icons](https://sankhyalabs-storybook.herokuapp.com/themes/default/icons/fonts/index.html)"
+        },
+        "attribute": "icon-right",
+        "reflect": true
+      },
+      "position": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "IPosition",
+          "resolved": "IPosition",
+          "references": {
+            "IPosition": {
+              "location": "import",
+              "path": "./interfaces/IPosition"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define a posi\u00E7\u00E3o do \u00EDcone em rela\u00E7\u00E3o ao elemento filho."
+        },
+        "defaultValue": "{ horizontal: \"right\", vertical: \"top\" }"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "hasSlot": {}
+    };
+  }
+  static get elementRef() { return "_element"; }
+}

package/dist/collection/components/ez-badge/interfaces/IPosition.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/ez-grid/controller/DataUnitBridge.js

@@ -20,7 +20,7 @@ export default class DataUnitBridge {
           break;
         case Action.SELECTION_REMOVED:
           const { unselection } = action.payload;
-          const filteredRecords = this._dataUnit.getAllSelection()
+          const filteredRecords = this._dataUnit.getSelection()
             .filter((selectedRecord) => {
             return !unselection.some((unselectedRecord) => {
               return unselectedRecord.__record__id__ === selectedRecord.__record__id__;
@@ -35,7 +35,7 @@ export default class DataUnitBridge {
           break;
         case Action.NEXT_SELECTED:
         case Action.PREVIOUS_SELECTED:
-          this._gridController.selectRows(this._dataUnit.getAllSelection());
+          this._gridController.selectRows(this._dataUnit.getSelection());
           break;
         case Action.DATA_CHANGED:
           const changes = Object.assign({}, action.payload);

package/dist/collection/components/ez-grid/controller/ag-grid/AgGridController.js

@@ -88,7 +88,7 @@ export default class AgGridController {
       else {
         this._grid = new Grid(container, this._gridOptions);
       }
-      const selection = (_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.getAllSelection();
+      const selection = (_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.getSelection();
       if (selection) {
         this.selectRows(selection);
       }
@@ -172,7 +172,7 @@ export default class AgGridController {
     if (records && records.length === 0) {
       return false;
     }
-    const allSelection = this._dataUnit.getAllSelection();
+    const allSelection = this._dataUnit.getSelection();
     if (allSelection == undefined || allSelection.length === 0) {
       return false;
     }
@@ -202,14 +202,14 @@ export default class AgGridController {
     if (this._dataUnit == undefined) {
       return;
     }
-    let allSelection = this._dataUnit.getAllSelection();
+    let allSelection = this._dataUnit.getSelection();
     if (allSelection === null || allSelection === void 0 ? void 0 : allSelection.some((sel) => sel.__record__id__ === ALL_RECORD)) {
       await this._dataUnit.clearSelection();
     }
     let updateSelection = [];
     const records = this._dataUnit.records;
     const selectedRecords = this._dataUnit.getSelectedRecords();
-    allSelection = this._dataUnit.getAllSelection();
+    allSelection = this._dataUnit.getSelection();
     if (selectAll && selectedRecords.length < records.length) {
       updateSelection = records;
       allSelection.forEach((selectedRecord) => {

package/dist/collection/components/ez-grid/controller/ag-grid/DataSource.js

@@ -40,7 +40,7 @@ export default class DataSource {
   }
   updateSelection() {
     var _a;
-    const selection = (_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.getAllSelection();
+    const selection = (_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.getSelection();
     if ((selection === null || selection === void 0 ? void 0 : selection.length) > 0) {
       this._controller.selectRows(selection);
     }

package/dist/collection/components/ez-grid/ez-grid.js

@@ -100,7 +100,7 @@ export class EzGrid {
   }
   isAllRecordSetted() {
     var _a;
-    const allSelection = (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.getAllSelection();
+    const allSelection = (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.getSelection();
     return allSelection === null || allSelection === void 0 ? void 0 : allSelection.some((selectedRecord) => {
       return selectedRecord.__record__id__ === ALL_RECORD;
     });
@@ -128,7 +128,7 @@ export class EzGrid {
   }
   controlSelectionCounter() {
     var _a, _b;
-    const allSelection = (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.getAllSelection();
+    const allSelection = (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.getSelection();
     const counter = (_b = allSelection === null || allSelection === void 0 ? void 0 : allSelection.length) !== null && _b !== void 0 ? _b : 0;
     if (this.isAllRecordSetted()) {
       this.setAutoSelectAll();

package/dist/custom-elements/index.d.ts

@@ -20,6 +20,12 @@ export const EzApplication: {
   new (): EzApplication;
 };
 
+interface EzBadge extends Components.EzBadge, HTMLElement {}
+export const EzBadge: {
+  prototype: EzBadge;
+  new (): EzBadge;
+};
+
 interface EzBreadcrumb extends Components.EzBreadcrumb, HTMLElement {}
 export const EzBreadcrumb: {
   prototype: EzBreadcrumb;

package/dist/custom-elements/index.js

@@ -926,6 +926,120 @@ const EzApplication$1 = class extends HTMLElement$1 {
   static get style() { return ezApplicationCss; }
 };
 
+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$1 = class extends HTMLElement$1 {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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) {
+      ElementIDUtils.addIDInfo(this._element);
+    }
+    if (this._badge) {
+      const dataInfo = { id: 'embedded' };
+      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 (h(Host, null, h("div", { class: "badge" }, h("div", null, h("slot", { name: "child-badge", onSlotchange: () => { this.handleSlotChange(); } })), h("div", { class: this.createContainerClassName(), ref: (el) => this._badge = el }, this.validateIconLeft() && h("ez-icon", { class: "icon", iconName: this.iconLeft, size: this.getIconSize() }), this.validateLabel() && h("label", { title: this.label }, this.label), this.validateIconRight() && h("ez-icon", { class: "icon", iconName: this.iconRight, size: this.getIconSize() })))));
+  }
+  get _element() { return this; }
+  static get style() { return ezBadgeCss; }
+};
+
 const BreadcrumbItem = (props) => {
   const { items, selectedItem, itemsHidden, showDropdown, handleShowDropdown, collapseConfigPosition, ellipsesPositionedEnd } = props;
   const formatDropdownItems = () => {
@@ -123165,7 +123279,7 @@ class DataSource {
   }
   updateSelection() {
     var _a;
-    const selection = (_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.getAllSelection();
+    const selection = (_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.getSelection();
     if ((selection === null || selection === void 0 ? void 0 : selection.length) > 0) {
       this._controller.selectRows(selection);
     }
@@ -123373,7 +123487,7 @@ class AgGridController {
       else {
         this._grid = new Grid(container, this._gridOptions);
       }
-      const selection = (_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.getAllSelection();
+      const selection = (_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.getSelection();
       if (selection) {
         this.selectRows(selection);
       }
@@ -123457,7 +123571,7 @@ class AgGridController {
     if (records && records.length === 0) {
       return false;
     }
-    const allSelection = this._dataUnit.getAllSelection();
+    const allSelection = this._dataUnit.getSelection();
     if (allSelection == undefined || allSelection.length === 0) {
       return false;
     }
@@ -123487,14 +123601,14 @@ class AgGridController {
     if (this._dataUnit == undefined) {
       return;
     }
-    let allSelection = this._dataUnit.getAllSelection();
+    let allSelection = this._dataUnit.getSelection();
     if (allSelection === null || allSelection === void 0 ? void 0 : allSelection.some((sel) => sel.__record__id__ === ALL_RECORD)) {
       await this._dataUnit.clearSelection();
     }
     let updateSelection = [];
     const records = this._dataUnit.records;
     const selectedRecords = this._dataUnit.getSelectedRecords();
-    allSelection = this._dataUnit.getAllSelection();
+    allSelection = this._dataUnit.getSelection();
     if (selectAll && selectedRecords.length < records.length) {
       updateSelection = records;
       allSelection.forEach((selectedRecord) => {
@@ -124032,7 +124146,7 @@ const EzGrid$1 = class extends HTMLElement$1 {
   }
   isAllRecordSetted() {
     var _a;
-    const allSelection = (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.getAllSelection();
+    const allSelection = (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.getSelection();
     return allSelection === null || allSelection === void 0 ? void 0 : allSelection.some((selectedRecord) => {
       return selectedRecord.__record__id__ === ALL_RECORD;
     });
@@ -124060,7 +124174,7 @@ const EzGrid$1 = class extends HTMLElement$1 {
   }
   controlSelectionCounter() {
     var _a, _b;
-    const allSelection = (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.getAllSelection();
+    const allSelection = (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.getSelection();
     const counter = (_b = allSelection === null || allSelection === void 0 ? void 0 : allSelection.length) !== null && _b !== void 0 ? _b : 0;
     if (this.isAllRecordSetted()) {
       this.setAutoSelectAll();
@@ -127732,6 +127846,7 @@ const EzViewStack$1 = class extends HTMLElement$1 {
 const EzActionsButton = /*@__PURE__*/proxyCustomElement(EzActionsButton$1, [1,"ez-actions-button",{"enabled":[516],"actions":[1040],"size":[513],"showLabel":[516,"show-label"],"displayIcon":[513,"display-icon"],"checkOption":[516,"check-option"],"value":[513],"isTransparent":[516,"is-transparent"],"arrowActive":[516,"arrow-active"],"_selectedAction":[32]}]);
 const EzAlert = /*@__PURE__*/proxyCustomElement(EzAlert$1, [1,"ez-alert",{"alertType":[513,"alert-type"]}]);
 const EzApplication = /*@__PURE__*/proxyCustomElement(EzApplication$1, [0,"ez-application"]);
+const EzBadge = /*@__PURE__*/proxyCustomElement(EzBadge$1, [1,"ez-badge",{"size":[513],"label":[513],"iconLeft":[513,"icon-left"],"iconRight":[513,"icon-right"],"position":[1040],"hasSlot":[32]}]);
 const EzBreadcrumb = /*@__PURE__*/proxyCustomElement(EzBreadcrumb$1, [1,"ez-breadcrumb",{"items":[1040],"fillMode":[1025,"fill-mode"],"maxItems":[1026,"max-items"],"positionEllipsis":[1026,"position-ellipsis"],"visibleItems":[32],"hiddenItems":[32],"showDropdown":[32],"collapseConfigPosition":[32]}]);
 const EzButton = /*@__PURE__*/proxyCustomElement(EzButton$1, [1,"ez-button",{"label":[513],"enabled":[516],"mode":[513],"image":[513],"iconName":[513,"icon-name"],"size":[513]},[[2,"click","clickListener"]]]);
 const EzCalendar = /*@__PURE__*/proxyCustomElement(EzCalendar$1, [1,"ez-calendar",{"value":[1040],"floating":[516],"time":[516],"showSeconds":[516,"show-seconds"]}]);
@@ -127777,6 +127892,7 @@ const defineCustomElements = (opts) => {
       EzActionsButton,
   EzAlert,
   EzApplication,
+  EzBadge,
   EzBreadcrumb,
   EzButton,
   EzCalendar,
@@ -127824,4 +127940,4 @@ const defineCustomElements = (opts) => {
   }
 };
 
-export { EzActionsButton, EzAlert, EzApplication, EzBreadcrumb, EzButton, EzCalendar, EzCardItem, EzCheck, EzChip, EzCollapsibleBox, EzComboBox, EzDateInput, EzDateTimeInput, EzDialog, EzDropdown, EzFileItem, EzFilterInput, EzForm, EzFormView, EzGrid, EzGuideNavigator, EzIcon, EzList, EzLoadingBar, EzModal, EzModalContainer, EzNumberInput, EzPopover, EzPopup, EzRadioButton, EzScroller, EzSearch, EzSidebarButton, EzTabselector, EzTextArea, EzTextEdit, EzTextInput, EzTimeInput, EzToast, EzTree, EzUpload, EzViewStack, defineCustomElements };
+export { EzActionsButton, EzAlert, EzApplication, EzBadge, EzBreadcrumb, EzButton, EzCalendar, EzCardItem, EzCheck, EzChip, EzCollapsibleBox, EzComboBox, EzDateInput, EzDateTimeInput, EzDialog, EzDropdown, EzFileItem, EzFilterInput, EzForm, EzFormView, EzGrid, EzGuideNavigator, EzIcon, EzList, EzLoadingBar, EzModal, EzModalContainer, EzNumberInput, EzPopover, EzPopup, EzRadioButton, EzScroller, EzSearch, EzSidebarButton, EzTabselector, EzTextArea, EzTextEdit, EzTextInput, EzTimeInput, EzToast, EzTree, EzUpload, EzViewStack, defineCustomElements };

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

@@ -0,0 +1,116 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-de655f48.js';
+import { ElementIDUtils } from '@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) {
+    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) {
+      ElementIDUtils.addIDInfo(this._element);
+    }
+    if (this._badge) {
+      const dataInfo = { id: 'embedded' };
+      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 (h(Host, null, h("div", { class: "badge" }, h("div", null, h("slot", { name: "child-badge", onSlotchange: () => { this.handleSlotChange(); } })), h("div", { class: this.createContainerClassName(), ref: (el) => this._badge = el }, this.validateIconLeft() && h("ez-icon", { class: "icon", iconName: this.iconLeft, size: this.getIconSize() }), this.validateLabel() && h("label", { title: this.label }, this.label), this.validateIconRight() && h("ez-icon", { class: "icon", iconName: this.iconRight, size: this.getIconSize() })))));
+  }
+  get _element() { return getElement(this); }
+};
+EzBadge.style = ezBadgeCss;
+
+export { EzBadge as ez_badge };