{"version":3,"names":["adsBreadcrumbCss","AdsBreadCrumb","render","linkObj","getHyperLinkObject","this","link","TagType","isNullOrUndefined","baseClass","classes","attributes","href","hrefLang","hreflang","rel","target","srLabel","current","onClick","h","Object","assign","class","join","adsBreadcrumbsCss","AdsBreadcrumbs","constructor","hostRef","setDelimiter","newDelimiter","$breadcrumbs","el","querySelectorAll","forEach","$breadcrumb","isNullOrUndefinedOrEmpty","setAttribute","style","setProperty","Dictionary","get","identifier","generateId","component","registerComponent","handleIdentifierChange","newValue","handleDelimiterChange","componentWillLoad","delimiter","componentDidLoad","Pipeline.addComponent","disconnectedCallback","Pipeline.removeComponent","role","name"],"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"],"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"],"mappings":"0OAAA,MAAMA,EAAmB,y9D,MCaZC,EAAa,M,2DAWW,M,2CAazBC,SACR,MAAMC,EAAUC,EAAmBC,KAAKC,MACxC,MAAMC,GAAWC,EAAkBL,GAAW,IAAM,OAEpD,MAAMM,GAAaD,EAAkBL,GAAW,uBAAyB,KACzE,MAAMO,EAAU,CAACD,GAEjB,MAAME,EAAa,CACjBC,KAAMT,IAAO,MAAPA,SAAO,SAAPA,EAASS,KACfC,UAAUV,IAAO,MAAPA,SAAO,SAAPA,EAASW,WAAY,KAC/BC,KAAKZ,IAAO,MAAPA,SAAO,SAAPA,EAASY,MAAO,KACrBC,QAAQb,IAAO,MAAPA,SAAO,SAAPA,EAASa,SAAU,KAC3B,aAAcX,KAAKY,QACnB,eAAgBZ,KAAKa,QAAU,OAAS,KACxCC,SAAShB,IAAO,MAAPA,SAAO,SAAPA,EAASgB,UAAW,MAG/B,OACEC,EAACb,EAAOc,OAAAC,OAAA,CAACC,MAAOb,EAAQc,KAAK,MAAUb,GACrCS,EAAA,a,aCxDR,MAAMK,EAAoB,+2B,MC0BbC,EAAc,MAMzBC,YAAAC,G,UAsDQvB,KAAAwB,aAAgBC,IACtB,MAAMC,EAAe1B,KAAK2B,GAAGC,iBAAiB,kBAC9CF,EAAaG,SAASC,IACpB,IAAKC,EAAyBN,GAAe,CAC3CK,EAAYE,aAAa,iBAAkBP,GAC3CK,EAAYG,MAAMC,YAAY,yBAA0B,IAAIT,K,IAE9D,E,4DAlCuCU,EAAWC,IAAI,kBAAmB,mB,yBA1B3EpC,KAAK2B,GAAGK,aAAa,KAAMhC,KAAKqC,YAAcC,EAAW,oBACzDtC,KAAKuC,UAAY,kBACjBJ,EAAWK,kBAAkBxC,K,CAqC/ByC,uBAAuBC,GACrB1C,KAAK2B,GAAGK,aAAa,KAAMU,GAAYJ,EAAW,mB,CASpDK,sBAAsBD,GACpB1C,KAAKwB,aAAakB,E,CAaVE,oBACR5C,KAAKwB,aAAaxB,KAAK6C,U,CAGfC,mBACRC,EAAsB/C,KAAK2B,G,CAGnBqB,uBACRC,EAAyBjD,KAAK2B,G,CAGtB9B,SACR,MAAMS,EAAa,CACjB4C,KAAM,aACN,aAAclD,KAAKY,SAGrB,MAAMP,EAAU,CAAC,iBAEjB,OACEU,EAAA,MAAAC,OAAAC,OAAA,CAAKC,MAAOb,EAAQc,KAAK,MAAUb,GACjCS,EAAA,QAAMoC,KAAK,e"}