import { r as registerInstance, h } from './index-c269755a.js';

const BreadcrumbVariants = {
  DESKTOP: 'desktop',
  MOBILE: 'mobile',
};
Object.values(BreadcrumbVariants);

const teliaBreadcrumbsCss = ".telia-breadcrumbs__breadcrumbs{display:flex;flex-wrap:wrap;flex-direction:row;list-style-type:none;margin:0;padding:0}.telia-breadcrumbs__breadcrumbs ::slotted(li){display:flex}.telia-breadcrumbs__home-icon{color:#29003e;margin-right:calc((0.4rem * var(--voca-rem-multiplier)) + (0.2rem * var(--voca-rem-multiplier)))}.telia-breadcrumbs__home-icon .telia-icon{height:calc(4.4rem * var(--voca-rem-multiplier))}.telia-breadcrumbs__home-icon .telia-icon__container{display:flex}.telia-breadcrumbs--dark-background .telia-breadcrumbs__home-icon{color:#fbf0ff}.telia-breadcrumbs--mobile[data-mobile-items] ::slotted(telia-breadcrumbs-item){display:none}.telia-breadcrumbs--mobile:not([data-mobile-items=\"2\"]):not([data-mobile-items=\"3\"]) ::slotted(telia-breadcrumbs-item:nth-last-child(-n+3)){display:block}.telia-breadcrumbs--mobile[data-mobile-items=\"2\"] ::slotted(telia-breadcrumbs-item:nth-last-child(-n+2)){display:block}.telia-breadcrumbs--mobile[data-mobile-items=\"3\"] ::slotted(telia-breadcrumbs-item:nth-last-child(-n+3)){display:block}";

const TeliaBreadcrumbs = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    /** Variant */
    this.variant = BreadcrumbVariants.DESKTOP;
    /** Set the number of breadcrum items show on "mobile" variant */
    this.numberOfItemsShownOnMobile = 2;
    /** Home icon toggle, only considered on "desktop" variant */
    this.disableHomeIcon = false;
    /**
     * When used on a dark background, set this property to true.
     * This will adjust the styling of the "Home icon" if used.
     */
    this.darkBackground = false;
    /** Tracking id is used to identify and count Component usage */
    this.dataTrackingId = 'telia-breadcrumbs';
    this.classname = 'telia-breadcrumbs';
    this.renderHomeIcon = () => {
      return (h("li", { class: `${this.classname}__home-icon` }, h("telia-icon", { name: "home", size: "sm" })));
    };
  }
  render() {
    const classes = {
      [this.classname]: true,
      [`${this.classname}--${this.variant}`]: !!this.variant,
      [`${this.classname}--dark-background`]: this.darkBackground,
    };
    return (h("nav", { class: classes, "aria-label": this.ariaLabel, "data-testid": this.dataTestid, "data-mobile-items": this.numberOfItemsShownOnMobile }, h("ol", { class: `${this.classname}__breadcrumbs` }, this.variant === BreadcrumbVariants.DESKTOP &&
      !this.disableHomeIcon &&
      this.renderHomeIcon(), h("slot", null)), h("telia-vst", { dataTrackingId: this.dataTrackingId })));
  }
};
TeliaBreadcrumbs.style = teliaBreadcrumbsCss;

export { TeliaBreadcrumbs as telia_breadcrumbs };
