import { Component, Element, h, Prop } from "@stencil/core";
import { modifiersToClass } from "../../utils/utils";
export class IbkBreadcrumb {
  constructor() {
    /** 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))));
  }
  static get is() { return "ibk-breadcrumb"; }
  static get originalStyleUrls() { return {
    "$": ["breadcrumb.css"]
  }; }
  static get styleUrls() { return {
    "$": ["breadcrumb.css"]
  }; }
  static get properties() { return {
    "separators": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "El breadcrumb se enmarcar\u00E1 con dos separadores, arriba y abajo."
      },
      "attribute": "separators",
      "reflect": false
    },
    "negative": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "El breadcrumb se mostrar\u00E1 con un fondo oscuro"
      },
      "attribute": "negative",
      "reflect": false
    }
  }; }
  static get elementRef() { return "host"; }
}
