import { Component, Prop, h } from '@stencil/core';
export class TeliaBreadcrumbsItem {
  constructor() {
    /**
     * When used on a dark background, set this
     * property to true. This will change color of text,
     * borders and hover to something suitable.
     */
    this.darkBackground = false;
    /** Tracking id is used to identify and count Component usage */
    this.dataTrackingId = 'telia-breadcrumbs-item';
    this.classname = 'telia-breadcrumbs-item';
    this.renderDivider = () => (h("span", { class: `${this.classname}__item-divider`, "aria-hidden": true }, "/"));
  }
  render() {
    const classes = {
      [this.classname]: true,
      [`${this.classname}--dark-background`]: this.darkBackground,
    };
    return (h("li", { "aria-current": this.current ? 'page' : false, class: classes, "data-testid": this.dataTestid },
      h("slot", null),
      !this.current && this.renderDivider(),
      h("telia-vst", { dataTrackingId: this.dataTrackingId })));
  }
  static get is() { return "telia-breadcrumbs-item"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["telia-breadcrumbs-item.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["telia-breadcrumbs-item.css"]
  }; }
  static get properties() { return {
    "current": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Set true if this item is the current page"
      },
      "attribute": "current",
      "reflect": false
    },
    "dataTestid": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Test id set for web component host"
      },
      "attribute": "data-testid",
      "reflect": false
    },
    "darkBackground": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "When used on a dark background, set this\nproperty to true. This will change color of text,\nborders and hover to something suitable."
      },
      "attribute": "dark-background",
      "reflect": false,
      "defaultValue": "false"
    }
  }; }
}
