{"file":"vds-breadcrumb.vds-breadcrumbs.entry.js","mappings":"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","names":[],"sources":["src/components/vds-breadcrumb/vds-breadcrumb.scss?tag=vds-breadcrumb&encapsulation=shadow","src/components/vds-breadcrumb/vds-breadcrumb.tsx","src/components/vds-breadcrumbs/vds-breadcrumbs.scss?tag=vds-breadcrumbs&encapsulation=shadow","src/components/vds-breadcrumbs/vds-breadcrumbs.tsx"],"sourcesContent":[":host {\r\n  @apply block w-auto;\r\n}\r\n\r\na.wrapper {\r\n  @apply flex flex-row w-fit transition-transform duration-200 ease-out;\r\n\r\n  &:hover:not(.last) {\r\n    div.link-wrapper {\r\n      @apply bg-berry border-berry;\r\n      span {\r\n        @apply text-white font-bold tracking-[-.3px];\r\n      }\r\n    }\r\n\r\n    svg.arrow {\r\n      @apply text-berry stroke-berry;\r\n    }\r\n  }\r\n\r\n  &:active:not(.last) {\r\n    div.link-wrapper {\r\n      @apply bg-grey text-white border-grey;\r\n    }\r\n\r\n    svg.arrow {\r\n      @apply text-grey stroke-grey;\r\n    }\r\n  }\r\n\r\n}\r\n\r\na.wrapper.first > div.link-wrapper {\r\n  @apply rounded-l-full;\r\n\r\n  > span {\r\n    @apply pl-[10px];\r\n  }\r\n}\r\n\r\na.wrapper:not(.first):not(.expanded) {\r\n  @apply translate-x-[-50px];\r\n}\r\n\r\na.wrapper.first:not(.expanded) {\r\n  @apply mr-[50px];\r\n}\r\n\r\na.wrapper:not(.first):not(.last):not(.expanded) {\r\n  @apply w-[30px];\r\n  .link-wrapper {\r\n    @apply w-[17px];\r\n  }\r\n}\r\n\r\na.wrapper:not(.first) {\r\n  .link-wrapper {\r\n    @apply border-l-0;\r\n  }\r\n}\r\n\r\na.wrapper.last {\r\n  -webkit-user-select: text;\r\n  -moz-user-select: text;\r\n  -o-user-select: text;\r\n  user-select: text;\r\n  @apply cursor-text;\r\n  span {\r\n    @apply text-grey font-bold;\r\n  }\r\n}\r\n\r\na.wrapper:not(.first).expanded {\r\n  @apply translate-x-0;\r\n}\r\na.wrapper:not(.first):not(.last).expanded {\r\n  @apply w-auto;\r\n  .link-wrapper {\r\n    @apply w-auto;\r\n  }\r\n}\r\n\r\ndiv.link-wrapper {\r\n  @apply\r\n    flex flex-col justify-start w-auto\r\n    border-y border-l border-r-0 border-solid border-grey-lighter\r\n    text-grey-light bg-white overflow-hidden;\r\n}\r\n\r\nspan {\r\n  @apply block relative pr-[7px] pl-5 leading-[1.4rem] text-[12px] whitespace-nowrap tracking-normal;\r\n}\r\n\r\nsvg.arrow {\r\n  @apply relative left-[-2px] text-white stroke-grey-lighter;\r\n}\r\n\r\nsvg.back {\r\n  @apply md:hidden text-grey-light min-w-[9px] h-[26px] pl-[12px] pr-[7px] py-[7px];\r\n}\r\n","import { Component, Host, h, Prop, Element } from '@stencil/core';\r\nimport { HTMLAnchorElementTarget, stringTruncate } from '../../utils/helpers';\r\n\r\n@Component({\r\n  tag: 'vds-breadcrumb',\r\n  styleUrl: 'vds-breadcrumb.scss',\r\n  shadow: true,\r\n})\r\nexport class VdsBreadcrumb {\r\n\r\n  @Element() el!: HTMLElement;\r\n\r\n  /**\r\n   * Displayed text\r\n   */\r\n  @Prop() label: string;\r\n\r\n  /**\r\n   * The URL that the hyperlink points to.\r\n   */\r\n  @Prop() href: string;\r\n\r\n  /**\r\n   * Where to display the linked URL,\r\n   * as the name for a browsing context (a tab, window, or iframe).\r\n   */\r\n  @Prop() target: HTMLAnchorElementTarget = '_self';\r\n\r\n  /**\r\n   * First item in collection\r\n   */\r\n  @Prop({ mutable: true, reflect: true }) first = false;\r\n\r\n  /**\r\n   * Last item in collection\r\n   */\r\n  @Prop({ mutable: true, reflect: true }) last = false;\r\n\r\n  /**\r\n   * Interactive state\r\n   */\r\n  @Prop({ mutable: true, reflect: true }) interactive = false;\r\n\r\n  /**\r\n   * Expanded state\r\n   */\r\n  @Prop({ mutable: true, reflect: true }) expanded = true;\r\n\r\n  /**\r\n   * wether to display home icon or back icon in first breadcrumb\r\n   * on small devices\r\n   */\r\n  @Prop() icon: undefined | 'back' = undefined;\r\n\r\n  render() {\r\n    const { first, last, expanded, interactive, href, target, label, icon } = this;\r\n\r\n    return (\r\n      <Host>\r\n        <a class={{\r\n          'wrapper': true,\r\n          'first': first,\r\n          'last': last,\r\n          'expanded': expanded,\r\n          'interactive': interactive\r\n          }}\r\n          href={href}\r\n          target={target}>\r\n\r\n          <div class={{\r\n              'link-wrapper': true\r\n            }}>\r\n\r\n            { this.renderBackIcon() }\r\n            <span class={{\r\n                  '': true,\r\n                  'hidden md:block': first && icon == 'back',\r\n                  }}>\r\n              { stringTruncate(label, 30) }\r\n            </span>\r\n          </div>\r\n\r\n          { this.renderBreadcrumb() }\r\n\r\n        </a>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  renderBreadcrumb(): string {\r\n    return (\r\n      <svg width=\"13px\" height=\"28px\" viewBox=\"0 0 13 28\" class=\"arrow\">\r\n        <defs>\r\n            <path id=\"path-1\" fill='currentColor' stroke=\"inherit\" d=\"M0,0 C1.3558498,0 2.6394265,0.61132976 3.4939006,1.66404177 L10.7990954,10.6640418 C11.2061454,11.1655274 11.4897445,11.7327164 11.6497458,12.3257839 L11.6497458,14.6742161 C11.4897445,15.2672836 11.2061454,15.8344726 10.7990954,16.3359582 L3.4939006,25.3359582 C2.6394265,26.3886702 1.3558498,27 0,27\"></path>\r\n        </defs>\r\n        <g stroke=\"inherit\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n            <g transform=\"translate(0.850886, 0.500000)\">\r\n                <mask fill=\"white\">\r\n                    <use xlinkHref=\"#path-1\"></use>\r\n                </mask>\r\n                <use xlinkHref=\"#path-1\"></use>\r\n            </g>\r\n        </g>\r\n      </svg>\r\n    );\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    this.disableLastItem();\r\n  }\r\n\r\n  private disableLastItem() {\r\n    const lastItem = this.el.shadowRoot.querySelector(\".last\");\r\n    if (lastItem) {\r\n      lastItem.removeAttribute(\"href\");\r\n      lastItem.removeAttribute(\"target\");\r\n    }\r\n  }\r\n\r\n  private renderBackIcon() {\r\n    if(this.icon == 'back') {\r\n      return (\r\n        <svg class=\"back\" x=\"0px\" y=\"0px\" viewBox=\"0 0 14 29\">\r\n          <path fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'\r\n                d=\"M13,1L2.5,11.5c-1.7,1.3-1.9,3.7-0.6,5.4c0.2,0.2,0.4,0.4,0.6,0.6L13,28\"/>\r\n        </svg>\r\n      );\r\n    }\r\n  }\r\n\r\n}\r\n",":host {\r\n  @apply block overflow-x-auto overflow-y-hidden whitespace-nowrap;\r\n  -webkit-overflow-scrolling: touch;\r\n  -ms-overflow-style: -ms-autohiding-scrollbar;\r\n  scrollbar-width: thin;\r\n  &::-webkit-scrollbar {\r\n    @apply hidden;\r\n  }\r\n}\r\n\r\n::slotted(*:not(:first-of-type)) {\r\n  margin-left: -15px;\r\n}\r\n\r\n::slotted(li) {\r\n  list-style-type: none;\r\n}\r\n","import { Component, Host, h, Element, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'vds-breadcrumbs',\r\n  styleUrl: 'vds-breadcrumbs.scss',\r\n  shadow: true,\r\n})\r\nexport class VdsBreadcrumbs {\r\n\r\n  @Element() el!: HTMLElement;\r\n\r\n  /**\r\n   * Toggles expansion on mouseenter on/off\r\n   */\r\n  @Prop() expansion: boolean = false;\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <ul class=\"flex\" onMouseEnter={() => this.toggleExpansion(true)} onMouseLeave={() => this.toggleExpansion(false)}>\r\n          <slot></slot>\r\n        </ul>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  componentDidRender(): void {\r\n    this.setupChildren();\r\n  }\r\n\r\n  private async setupChildren(): Promise<void> {\r\n    await this.wrapElementsInHTMLLIElement();\r\n    await this.setElementsZIndex();\r\n  }\r\n\r\n  private wrapElementsInHTMLLIElement(): Promise<void> {\r\n    return new Promise((resolve) => {\r\n      const elements = this.el.querySelectorAll('vds-breadcrumb');\r\n      elements.forEach((element) => {\r\n        const li = document.createElement('li');\r\n        element.insertAdjacentElement('afterend', li);\r\n        li.appendChild(element);\r\n        if(this.expansion) {\r\n          element.expanded = false;\r\n        }\r\n      });\r\n      resolve();\r\n    });\r\n  }\r\n\r\n  private setElementsZIndex(): Promise<void> {\r\n    return new Promise((resolve) => {\r\n      const elements = this.el.querySelectorAll('li');\r\n      elements.forEach((element, index) => {\r\n        const zIndex = elements.length - index;\r\n        element.style.zIndex = `${zIndex}`;\r\n      });\r\n      resolve();\r\n    });\r\n  }\r\n\r\n  private toggleExpansion(expanded: boolean): void {\r\n    if(this.expansion) {\r\n      const elements = this.el.querySelectorAll('vds-breadcrumb');\r\n      elements.forEach(x => x.expanded = expanded);\r\n    }\r\n  }\r\n\r\n}\r\n"],"version":3}