{"version":3,"sources":["src/components/ads-breadcrumbs/components/ads-breadcrumb/ads-breadcrumb.scss?tag=ads-breadcrumb&encapsulation=shadow","src/components/ads-breadcrumbs/components/ads-breadcrumb/ads-breadcrumb.tsx","src/components/ads-breadcrumbs/ads-breadcrumbs.scss?tag=ads-breadcrumbs&encapsulation=shadow","src/components/ads-breadcrumbs/ads-breadcrumbs.tsx"],"names":["adsBreadcrumbCss","AdsBreadCrumb","[object Object]","hostRef","this","current","linkObj","getHyperLinkObject","link","TagType","isNullOrUndefined","baseClass","classes","attributes","href","hrefLang","hreflang","rel","target","aria-label","srLabel","aria-current","onClick","h","Object","assign","class","join","adsBreadcrumbsCss","AdsBreadcrumbs","Dictionary","get","setDelimiter","newDelimiter","$breadcrumbs","el","querySelectorAll","forEach","$breadcrumb","isNullOrUndefinedOrEmpty","setAttribute","style","setProperty","identifier","generateId","component","registerComponent","newValue","delimiter","Pipeline.addComponent","Pipeline.removeComponent","role","name"],"mappings":"0OAAA,MAAMA,EAAmB,u8DCaZC,EAAa,MAL1BC,YAAAC,aAgB2BC,KAAAC,QAAU,MAazBH,SACR,MAAMI,EAAUC,EAAmBH,KAAKI,MACxC,MAAMC,GAAWC,EAAkBJ,GAAW,IAAM,OAEpD,MAAMK,GAAaD,EAAkBJ,GAAW,uBAAyB,KACzE,MAAMM,EAAU,CAACD,GAEjB,MAAME,EAAa,CACjBC,KAAMR,IAAO,MAAPA,SAAO,OAAA,EAAPA,EAASQ,KACfC,UAAUT,IAAO,MAAPA,SAAO,OAAA,EAAPA,EAASU,WAAY,KAC/BC,KAAKX,IAAO,MAAPA,SAAO,OAAA,EAAPA,EAASW,MAAO,KACrBC,QAAQZ,IAAO,MAAPA,SAAO,OAAA,EAAPA,EAASY,SAAU,KAC3BC,aAAcf,KAAKgB,QACnBC,eAAgBjB,KAAKC,QAAU,OAAS,KACxCiB,SAAShB,IAAO,MAAPA,SAAO,OAAA,EAAPA,EAASgB,UAAW,MAG/B,OACEC,EAACd,EAAOe,OAAAC,OAAA,CAACC,MAAOd,EAAQe,KAAK,MAAUd,GACrCU,EAAA,OAAA,mBCxDR,MAAMK,EAAoB,61BC0BbC,EAAc,MAMzB3B,YAAAC,aA2ByBC,KAAAgB,QAAkBU,EAAWC,IAAI,kBAAmB,mBA2BrE3B,KAAA4B,aAAgBC,IACtB,MAAMC,EAAe9B,KAAK+B,GAAGC,iBAAiB,kBAC9CF,EAAaG,SAASC,IACpB,IAAKC,EAAyBN,GAAe,CAC3CK,EAAYE,aAAa,iBAAkBP,GAC3CK,EAAYG,MAAMC,YAAY,yBAA0B,IAAIT,WA1DhE7B,KAAK+B,GAAGK,aAAa,KAAMpC,KAAKuC,YAAcC,EAAW,oBACzDxC,KAAKyC,UAAY,kBACjBf,EAAWgB,kBAAkB1C,MAqC/BF,uBAAuB6C,GACrB3C,KAAK+B,GAAGK,aAAa,KAAMO,GAAYH,EAAW,oBASpD1C,sBAAsB6C,GACpB3C,KAAK4B,aAAae,GAaV7C,oBACRE,KAAK4B,aAAa5B,KAAK4C,WAGf9C,mBACR+C,EAAsB7C,KAAK+B,IAGnBjC,uBACRgD,EAAyB9C,KAAK+B,IAGtBjC,SACR,MAAMW,EAAa,CACjBsC,KAAM,aACNhC,aAAcf,KAAKgB,SAGrB,MAAMR,EAAU,CAAC,iBAEjB,OACEW,EAAA,MAAAC,OAAAC,OAAA,CAAKC,MAAOd,EAAQe,KAAK,MAAUd,GACjCU,EAAA,OAAA,CAAM6B,KAAK","sourcesContent":["@import 'core';\n\n$properties: (\n  breadcrumb-delimiter: \"'/'\",\n  breadcrumb-delimiter-margin-left: 8px,\n  breadcrumb-delimiter-margin-right: 8px,\n);\n\n:host {\n  @each $key, $value in $properties {\n    --#{$key}: #{$value};\n  }\n}\n\n:host([theme='default']) {\n  @include ads-vars-component-breadcrumbs-default;\n}\n\n:host([theme='dark']) {\n  @include ads-vars-component-breadcrumbs-dark;\n}\n\n:host([theme='light']) {\n  @include ads-vars-component-breadcrumbs-light;\n}\n\n// Safari hack\n:host(:not(:last-child)) {\n  &::after {\n    content: var(--breadcrumb-delimiter);\n    margin-left: var(--breadcrumb-delimiter-margin-left);\n    margin-right: var(--breadcrumb-delimiter-margin-right);\n  }\n}\n\n.c-breadcrumb {\n  font-family: var(--ads-font-family);\n  font-size: inherit;\n  font-weight: inherit;\n\n  &__anchor {\n    @include ads-anchor;\n    color: var(--ads-breadcrumbs-link-color, $ads-breadcrumbs-link-color);\n    font-family: inherit;\n    text-decoration: var(--ads-breadcrumbs-text-decoration, $ads-breadcrumbs-text-decoration);\n\n    &:visited {\n      color: var(--ads-breadcrumbs-link-color-visited, $ads-breadcrumbs-link-color-visited);\n    }\n\n    &:focus,\n    &:hover {\n      --ads-anchor-text-decoration-hover: var(--ads-breadcrumbs-text-decoration-hover, $ads-breadcrumbs-text-decoration-hover);\n      color: var(--ads-breadcrumbs-link-color-hover, $ads-breadcrumbs-link-color-hover);\n    }\n  }\n}\n","import { Component, Prop, VNode, h } from '@stencil/core';\nimport { Hyperlink, getHyperLinkObject } from '../../../core/interfaces/Hyperlink';\nimport { Theme } from '../../../core/types/globalTypes';\nimport { isNullOrUndefined } from 'utils/collection';\n\n/**\n * @hidden\n */\n@Component({\n  tag: 'ads-breadcrumb',\n  styleUrl: 'ads-breadcrumb.scss',\n  shadow: true,\n})\nexport class AdsBreadCrumb {\n  /**\n   * The theme for this component instance (optional)\n   * Values: \"default\", \"dark\"\n   */\n  @Prop({ reflect: true }) theme?: Theme;\n\n  /**\n   * Defines an aria-current attribute for the component (optional)\n   * @default false\n   */\n  @Prop({ reflect: true }) current = false;\n\n  /**\n   * Contains a URL (fragment).\n   * If this property is set, an anchor tag will be rendered (optional)\n   */\n  @Prop({ reflect: true }) link?: Hyperlink;\n\n  /**\n   * Defines an aria-label attribute for the component (optional)\n   */\n  @Prop({ reflect: true }) srLabel?: string;\n\n  protected render(): VNode {\n    const linkObj = getHyperLinkObject(this.link);\n    const TagType = !isNullOrUndefined(linkObj) ? 'a' : 'span';\n\n    const baseClass = !isNullOrUndefined(linkObj) ? 'c-breadcrumb__anchor' : null;\n    const classes = [baseClass];\n\n    const attributes = {\n      href: linkObj?.href,\n      hrefLang: linkObj?.hreflang || null,\n      rel: linkObj?.rel || null,\n      target: linkObj?.target || null,\n      'aria-label': this.srLabel,\n      'aria-current': this.current ? 'page' : null,\n      onClick: linkObj?.onClick || null,\n    };\n\n    return (\n      <TagType class={classes.join(' ')} {...attributes}>\n        <slot />\n      </TagType>\n    ) as VNode;\n  }\n}\n","@import 'core';\n\n/**\n * @prop --ads-breadcrumbs-color: Default text color\n * @prop --ads-breadcrumbs-link-color: Default link text color\n * @prop --ads-breadcrumbs-link-color-hover: Hovered link text color\n * @prop --ads-breadcrumbs-link-color-visited: Visited link text color\n * @prop --ads-breadcrumbs-text-decoration: Text decoration\n * @prop --ads-breadcrumbs-text-decoration-hover: Text decoration hover\n */\n\n$properties: (\n  ads-breadcrumbs-font-size: 12px,\n);\n\n::slotted(*) {\n  display: inline-block !important;\n}\n\n:host {\n  @each $key, $value in $properties {\n    --#{$key}: #{$value};\n  }\n  font-family: var(--ads-font-family);\n  font-size: var(--ads-breadcrumbs-font-size);\n}\n\n:host([theme='default']) {\n  @include ads-vars-component-breadcrumbs-default;\n}\n\n:host([theme='dark']) {\n  @include ads-vars-component-breadcrumbs-dark;\n}\n\n:host([theme='light']) {\n  @include ads-vars-component-breadcrumbs-light;\n}\n\n.c-breadcrumbs {\n  color: var(--ads-breadcrumbs-color, $ads-breadcrumbs-color);\n  display: block !important;\n  font-family: var(--ads-font-family);\n  font-size: var(--ads-breadcrumbs-font-size);\n}\n","import { Component, Element, Prop, VNode, Watch, h } from '@stencil/core';\n\nimport * as Pipeline from '../core/utils/pipeline';\nimport { BaseComponent } from '../core/interfaces/BaseComponent';\nimport { Dictionary } from '../core/classes/Dictionary';\nimport { Theme } from '../core/types/globalTypes';\nimport { generateId } from '../core/utils/components';\nimport { isNullOrUndefinedOrEmpty } from 'utils/collection';\n\n/**\n * Breadcrumbs help users keep track of the active and current navigational state.\n * @tag `<ads-breadcrumbs>`\n * @slot breadcrumbs - The breadcrumbs displayed inside the component\n * @example\n * <ads-breadcrumbs sr-label=\"Breadcrumbs\">\n *   <ads-breadcrumb slot=\"breadcrumb\" link=\"#\" sr-label=\"Link to Text1\">Text1</ads-breadcrumb>\n *   <ads-breadcrumb slot=\"breadcrumb\" link=\"#\" sr-label=\"Link to Text2\">Text2</ads-breadcrumb>\n *   <ads-breadcrumb slot=\"breadcrumb\" link=\"#\" sr-label=\"Link to Text3\">Text3</ads-breadcrumb>\n *   <ads-breadcrumb slot=\"breadcrumb\" link=\"#\" sr-label=\"Link to Text4\" aria-current=\"true\">Text4</ads-breadcrumb>\n * </ads-breadcrumbs>\n */\n@Component({\n  tag: 'ads-breadcrumbs',\n  styleUrl: 'ads-breadcrumbs.scss',\n  shadow: true,\n})\nexport class AdsBreadcrumbs implements BaseComponent {\n  /**\n   * @hidden\n   */\n  public component: string;\n\n  constructor() {\n    this.el.setAttribute('id', this.identifier || generateId('ads-breadcrumbs'));\n    this.component = 'ads-breadcrumbs';\n    Dictionary.registerComponent(this);\n  }\n\n  /**\n   * The component element\n   */\n  @Element() private el: HTMLAdsBreadcrumbsElement;\n\n  /**\n   * The unique identifier (optional)\n   */\n  @Prop({ attribute: 'id' }) identifier?: string;\n\n  /**\n   * The theme for this component instance (optional)\n   * Values: \"default\", \"dark\", \"light\"\n   */\n  @Prop({ reflect: true }) theme?: Theme;\n\n  /**\n   * The value for the aria-label, to describe the purpose of the breadcrumbs component (optional).\n   * Translations for the default value can be configured, if required, via the `NAVIGATION_MENU` key.\n   * @default \"Navigation Menu\"\n   */\n  @Prop({ reflect: true }) srLabel: string = Dictionary.get('Navigation Menu', 'NAVIGATION_MENU');\n\n  /**\n   * The breadcrumb delimiter (optional)\n   */\n  @Prop({ reflect: true }) delimiter?: string;\n\n  /**\n   * Handle identifier property changes\n   * @param {string} newValue The new value for \"identifier\"\n   * @hidden\n   */\n  @Watch('identifier')\n  handleIdentifierChange(newValue: string): void {\n    this.el.setAttribute('id', newValue || generateId('ads-breadcrumbs'));\n  }\n\n  /**\n   * Handle delimiter change\n   * @param {string}   newValue  The new value for 'delimiter'\n   * @hidden\n   */\n  @Watch('delimiter')\n  handleDelimiterChange(newValue: string): void {\n    this.setDelimiter(newValue);\n  }\n\n  private setDelimiter = (newDelimiter: string) => {\n    const $breadcrumbs = this.el.querySelectorAll('ads-breadcrumb');\n    $breadcrumbs.forEach(($breadcrumb) => {\n      if (!isNullOrUndefinedOrEmpty(newDelimiter)) {\n        $breadcrumb.setAttribute('data-delimiter', newDelimiter);\n        $breadcrumb.style.setProperty('--breadcrumb-delimiter', `'${newDelimiter}'`);\n      }\n    });\n  };\n\n  protected componentWillLoad(): void {\n    this.setDelimiter(this.delimiter);\n  }\n\n  protected componentDidLoad(): void {\n    Pipeline.addComponent(this.el);\n  }\n\n  protected disconnectedCallback(): void {\n    Pipeline.removeComponent(this.el);\n  }\n\n  protected render(): VNode {\n    const attributes = {\n      role: 'navigation',\n      'aria-label': this.srLabel,\n    };\n\n    const classes = ['c-breadcrumbs'];\n\n    return (\n      <nav class={classes.join(' ')} {...attributes}>\n        <slot name=\"breadcrumb\" />\n      </nav>\n    ) as VNode;\n  }\n}\n"]}