import { r as registerInstance, h, H as Host, g as getElement } from './index-baa5e267.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}.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) {
    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" };
    this.alignItems = "center";
  }
  getIconSize() {
    switch (this.size) {
      case "large":
        return "large";
      case "medium":
      case "small-medium":
        return "small";
      case "small":
        return "x-small";
      default:
        return null;
    }
  }
  getAlignItemsClass() {
    switch (this.alignItems) {
      case "flex-end":
        return "end";
      case "flex-start":
        return "start";
      default:
        return "center";
    }
  }
  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 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") {
        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 };
