import { r as registerInstance, h, g as getElement } from './index-cdf8e526.js';
import { m as modifiersToClass } from './utils-f909044c.js';

const badgeCss = ".ibk-badge{display:inline-block;position:absolute;font-family:var(--fontGeometria);font-size:10px;text-transform:uppercase;color:white;padding:7px 10px;font-weight:500;top:0}.ibk-badge--info{background-color:var(--secondaryBlue1)}.ibk-badge--promo{background-color:var(--extendedWatermelon1)}.ibk-badge--left{border-radius:4px 0 4px 0;left:0}.ibk-badge--right{border-radius:0 4px 0 4px;right:0}";

const IbkBadge = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    /** <strong>Info: </strong> color azul<br>
     * <strong>Promo: </strong>color rojo
     */
    this.type = 'info';
    /** Posición en la que se encuentra ubicado el badge */
    this.position = "left";
    /** Le agrega el estilo position relative al contenedor del badge para posicionarlo correctamente */
    this.setPositionRelativeToParent = () => {
      this.host.parentElement.style.position = 'relative';
    };
  }
  componentWillLoad() {
    this.setPositionRelativeToParent();
  }
  /** Configura la clase del componente basado en estados y modificadores */
  containerClass() {
    return modifiersToClass('ibk-badge', [
      this.type,
      this.position
    ]);
  }
  render() {
    return (h("div", { class: this.containerClass(), innerHTML: this.text }));
  }
  get host() { return getElement(this); }
};
IbkBadge.style = badgeCss;

export { IbkBadge as ibk_badge };
