{"version":3,"sources":["src/components/ads-masthead/ads-masthead.scss?tag=ads-masthead&encapsulation=shadow","src/components/ads-masthead/ads-masthead.tsx"],"names":["adsMastheadCss","AdsMasthead","[object Object]","hostRef","this","el","setAttribute","identifier","generateId","component","newValue","Pipeline.addComponent","Pipeline.removeComponent","$breadcrumbsEl","getAllElementsWithSlotAttribute","$breadcrumbs","isNullOrUndefined","h","class","name","$headingEl","$heading"],"mappings":"uNAAA,MAAMA,EAAiB,ohEC+BVC,EAAW,MAMtBC,YAAAC,aACEC,KAAKC,GAAGC,aAAa,KAAMF,KAAKG,YAAcC,EAAW,iBACzDJ,KAAKK,UAAY,eAsBnBP,uBAAuBQ,GACrBN,KAAKC,GAAGC,aAAa,KAAMI,GAAYF,EAAW,iBAG1CN,mBACRS,EAAsBP,KAAKC,IAGnBH,uBACRU,EAAyBR,KAAKC,IAGtBH,SACR,MAAMW,EAAiBC,EAAgCV,KAAKC,GAAI,eAAe,GAC/E,MAAMU,GAAgBC,EAAkBH,GAElCI,EAAA,MAAA,CAAKC,MAAM,2BACTD,EAAA,OAAA,CAAME,KAAK,iBAGf,KAEJ,MAAMC,EAAaN,EAAgCV,KAAKC,GAAI,WAAW,GACvE,MAAMgB,GAAYL,EAAkBI,GAE9BH,EAAA,MAAA,CAAKC,MAAM,uBACTD,EAAA,OAAA,CAAME,KAAK,aAGf,KAEJ,OACEF,EAAA,MAAA,CAAKC,MAAM,cACTD,EAAA,MAAA,CAAKC,MAAM,mBAAmBH,GAC7BM,EACDJ,EAAA,OAAA","sourcesContent":["@import 'core';\n\n/**\n * @prop --ads-masthead-background-color: Background color\n * @prop --ads-masthead-border-bottom-color: Border bottom color\n * @prop --ads-masthead-color: Text color\n * @prop --ads-masthead-horizontal-padding: Horizontal padding\n * @prop --ads-masthead-text-align: Text alignment\n */\n\n::slotted(*) {\n box-sizing: border-box;\n display: block !important;\n margin: 0 !important;\n padding: 0 !important;\n}\n\n::slotted([slot='heading']) {\n color: var(--ads-masthead-color, $ads-masthead-color) !important;\n justify-content: inherit;\n line-height: 1.25em !important;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n:host {\n background-color: var(--ads-masthead-background-color, $ads-masthead-background-color);\n background-position: center center;\n background-repeat: no-repeat;\n background-size: cover;\n display: block;\n position: relative;\n width: 100%;\n}\n\n:host([theme='default']) {\n @include ads-vars-component-masthead-default;\n}\n\n:host([theme='dark']) {\n @include ads-vars-component-masthead-dark;\n}\n\n:host([theme='light']) {\n @include ads-vars-component-masthead-light;\n}\n\n:host([dir='ltr']) {\n @include ads-vars-component-masthead-ltr;\n}\n\n:host([dir='rtl']) {\n @include ads-vars-component-masthead-rtl;\n}\n\n.c-masthead {\n align-items: flex-start;\n border: 0;\n border-bottom: 1px solid var(--ads-masthead-border-bottom-color, $ads-masthead-border-bottom-color);\n box-sizing: border-box;\n display: flex !important;\n flex-direction: column;\n font-family: var(--ads-font-family);\n justify-content: center;\n min-height: 90px;\n padding: 0 var(--ads-masthead-horizontal-padding, $ads-masthead-horizontal-padding);\n position: relative;\n\n @include media-query(md-up) {\n justify-content: flex-start;\n min-height: 105px;\n padding: 0 calc(var(--ads-masthead-horizontal-padding, $ads-masthead-horizontal-padding) * 2);\n }\n\n &__top {\n display: flex !important;\n margin: 0;\n max-height: 30px;\n\n @include media-query(md-up) {\n flex-direction: row;\n position: absolute;\n top: 10px;\n width: calc(100% - 32px);\n }\n }\n\n &__heading {\n margin: 0;\n width: calc(100% - 32px);\n\n @include media-query(md-up) {\n padding-top: 4px;\n position: absolute;\n text-align: var(--ads-masthead-text-align, $ads-masthead-text-align-ltr);\n top: 30px;\n }\n }\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 { Theme } from '../core/types/globalTypes';\nimport { generateId } from '../core/utils/components';\nimport { getAllElementsWithSlotAttribute, isNullOrUndefined } from 'utils/index';\n\n/**\n * The masthead is a customisable site-wide header that contains main navigation breadcrumbs (see ads-breadcrumb component) and the page title.\n * The masthead is displayed full width at the top of the page. The background can be configured to use colours or images by using utility classes.\n * @tag ``\n * @slot breadcrumbs - The breadcrumbs that will be displayed inside the component\n * @slot heading - The heading that will be displayed inside the component\n * @slot - Content rendered as rich text inside the component\n * @example\n * \n * \n * Text1\n * Text2\n * Text3\n * Text4\n * \n *

Lorem ipsum dolor sit amet

\n * \n */\n@Component({\n tag: 'ads-masthead',\n styleUrl: 'ads-masthead.scss',\n shadow: true,\n})\nexport class AdsMasthead implements BaseComponent {\n /**\n * @hidden\n */\n public component: string;\n\n constructor() {\n this.el.setAttribute('id', this.identifier || generateId('ads-masthead'));\n this.component = 'ads-masthead';\n }\n\n @Element() private el: HTMLAdsMastheadElement;\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\"\n */\n @Prop({ reflect: true }) theme?: Theme;\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-masthead'));\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 $breadcrumbsEl = getAllElementsWithSlotAttribute(this.el, 'breadcrumbs')[0];\n const $breadcrumbs = !isNullOrUndefined($breadcrumbsEl)\n ? ((\n
\n \n
\n ) as HTMLElement)\n : null;\n\n const $headingEl = getAllElementsWithSlotAttribute(this.el, 'heading')[0];\n const $heading = !isNullOrUndefined($headingEl)\n ? ((\n
\n \n
\n ) as HTMLElement)\n : null;\n\n return (\n
\n
{$breadcrumbs}
\n {$heading}\n \n
\n ) as VNode;\n }\n}\n"]}