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

const breadcrumbCss = ".ibk-breadcrumb__container{display:inline-flex;align-items:center}.ibk-breadcrumb--separators .ibk-breadcrumb__container{border:solid var(--gray4);border-width:1px 0 1px 0;padding:30px 0}.ibk-breadcrumb__arrow{font-size:8px;color:var(--gray2);padding:3px 7px 0 7px}.ibk-breadcrumb--negative.ibk-breadcrumb--separators .ibk-breadcrumb__container{border-color:rgba(255,255,255,0.25)}.ibk-breadcrumb--negative .ibk-breadcrumb__arrow{color:rgba(255,255,255,0.25)}";

const IbkBreadcrumb = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    /** Se agregarán las flechas entre cada item del breadcrum */
    this.addingArrows = () => {
      const items = this.host.querySelectorAll('ibk-breadcrumb-item');
      const parent = this.host.querySelector('.ibk-breadcrumb__container');
      Array.from(items, (item, index) => {
        if (index > 0) {
          const arrow = document.createElement('i');
          arrow.setAttribute('class', 'ibk-breadcrumb__arrow icon-xs-arrow-right');
          parent.insertBefore(arrow, item);
        }
        if (this.negative) {
          item.setAttribute('negative', '');
        }
      });
    };
  }
  componentDidLoad() {
    this.addingArrows();
  }
  /** Configura la clase del componente basado en estados y modificadores */
  containerClass() {
    return modifiersToClass('ibk-breadcrumb', [
      { separators: this.separators },
      { negative: this.negative }
    ]);
  }
  render() {
    return (h("div", { class: this.containerClass() }, h("div", { class: "ibk-breadcrumb__container" }, h("slot", null))));
  }
  get host() { return getElement(this); }
};
IbkBreadcrumb.style = breadcrumbCss;

export { IbkBreadcrumb as ibk_breadcrumb };
