{"version":3,"names":["pnlHeaderCss","Header","LogLevel","warn","location","origin","async","this","navigation","fetchNavigation","domain","locale","mobileMq","window","matchMedia","mobileView","matches","addEventListener","mq","loadMenus","changeLocale","detail","render","h","header","logLevel","availableLocales","stsType","stsServer","clientId","audience","scope","silentRenewPage","silentRenewScript","redirectUri","postLogoutRedirectUri","bpStsServer","bpClientId","class"],"sources":["./src/components/pnl-header/pnl-header.scss?tag=pnl-header&encapsulation=shadow","./src/components/pnl-header/pnl-header.tsx"],"sourcesContent":["@import '../../assets/styles/variables';\n@import '../../assets/styles/components/component.button';\n@import '../../../node_modules/@postnl/pci/postnl-styles/settings';\n@import '../../../node_modules/@postnl/pci/postnl-styles/tools/utilities';\n@import '../../../node_modules/@postnl/pci/postnl-styles/layout/containers';\n\n[hidden] {\n    display: none;\n}\n\n.pnl-header {\n    display: block;\n    box-sizing: border-box;\n    padding: 1.5em 0;\n\n    @media (min-width: $bp-nav) {\n        padding: 0;\n    }\n}\n\n//sass-lint:disable no-mergeable-selectors\n.pci-inner-container {\n    .pnl-header__utility & {\n        display: flex;\n        justify-content: flex-end;\n    }\n}\n\n.pci-inner-container {\n    .pnl-header__main--mobile & {\n        display: flex;\n        justify-content: space-between;\n    }\n}\n\n.pci-inner-container {\n    .pnl-header__main--desktop {\n        display: flex;\n        align-items: center;\n    }\n}\n\n//sass-lint: enable no-mergeable-selectors\n.pnl-header__utility {\n    display: none;\n    display: block;\n    border-bottom: 1px solid $light-grey;\n    background-color: $white;\n}\n\n.pnl-header__main {\n    position: relative;\n}\n\n//When search is focused all else is hidden from view on mobile\n@media (min-width: $bp-nav) {\n    .search-focus {\n        .pnl-user-menu,\n        .pnl-navigation {\n            width: 0;\n            height: 0;\n            white-space: nowrap;\n            opacity: 0;\n            overflow: hidden;\n        }\n    }\n}\n\n//the main toggle button on mobile\n.pnl-navigation__toggle--mobile {\n    display: flex;\n    justify-content: center;\n    height: 24px;\n    width: 24px;\n    padding: 0.675rem;\n    border: none;\n    background: transparent;\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n\n    &:focus-visible {\n        outline: 2px solid $color-border-focus-outline;\n        outline-offset: 2px;\n        border-radius: 0.25rem;\n    }\n\n    @media (min-width: calc($bp-nav + 0.0625em)) {\n        // At this point navigation breaks.\n        display: none;\n    }\n}\n\n.pnl-navigation__toggle-icon {\n    color: $color-icon-default;\n}\n\n//specific overwrites for shadow dom\n.pci-alert {\n    padding: 0.5em 1em;\n    border-radius: 0.25em;\n}\n\n.pci-alert__text {\n    padding-left: 2em;\n}\n\n.pnl-user-menu-container {\n    margin-right: 1em;\n}\n\n.pnl-menu-spacer {\n    margin-right: auto;\n}\n","import { Component, h, Prop, Listen, Watch, State } from '@stencil/core';\nimport { StsType } from '../../services/authentication/authentication.models';\nimport { fetchNavigation } from '../menu-service';\nimport { NavigationStructure } from '../navigation-structure.models';\nimport { LogLevel } from '../pnl-user-menu/utility/logging.service';\n\n@Component({\n    tag: 'pnl-header',\n    styleUrl: 'pnl-header.scss',\n    shadow: true\n})\nexport class Header {\n\n    @Watch('locale')\n    @Watch('domain')\n    async loadMenus() {\n        this.navigation = await fetchNavigation(this.domain, this.locale);\n    }\n\n    @State() mobileView: boolean;\n\n    @State() navigation: NavigationStructure;\n\n    /** (optional) the loglevel: 0=trace 1=debug 2=info 3=warn (default) 4=error */\n    @Prop() logLevel: LogLevel = LogLevel.warn;\n\n    /** The domain whose navigation should be rendered. */\n    @Prop() domain: 'postnl.nl' | 'postnl.be' = 'postnl.nl';\n\n    /** Comma-separated list of available locales that the user can choose from in the pnl-language-selector.\n    * For example: `nl_NL,en_GB` or `nl_BE,fr_BE,en_GB`.\n    * If none or only one is specified, the language selector will not be visible  */\n    @Prop() availableLocales = 'nl_NL';\n\n    /** The locale the menu is rendered in. */\n    @Prop({ mutable: true, reflect: true }) locale = 'nl_NL';\n\n    /** (optional) set the type of security token service. Supported values: 'identity' or 'akamai'. Defaults to 'identity'. */\n    @Prop() stsType: StsType;\n\n    /** (optional) The Security Token service for the consumer portal to connect to.\n    * The user menu will not be shown if this is not specified.\n    */\n    @Prop() stsServer: string;\n\n    /** (optional) The client id for the consumer portal to use when requested a token. Mandatory if a sts-server is specified */\n    @Prop() clientId: string;\n\n    /** (optional) extra audience(s) for which to request access. This will be added to the JWT token's audience, next to the default 'poa-profiles-api' */\n    @Prop() audience: string;\n\n    /** (optional) extra scope(s) to request access for. This will be added to the default OpenID scopes 'openid' and 'profile', and the scope 'poa-profiles-api' */\n    @Prop() scope: string;\n\n    /** (optional) the absolute URI to the silent-redirect.html that hosts the silent redirect script */\n    @Prop() silentRenewPage: string;\n\n    /** (optional) this property will be added to the first element in the iframe, as 'data-silent-renew-script' attribute, so that the silentRenewPage can use that to configure which script to load */\n    @Prop() silentRenewScript: string;\n\n    /** (optional) the relative URI to redirect users to after authenication is finished. Defaults to the root of the current origin  */\n    @Prop() redirectUri: string = location.origin;\n\n    /** (optional) the url to which the sts will redirect after logout. Defaults to the root of the current origin */\n    @Prop() postLogoutRedirectUri: string = location.origin;\n\n    /** (optional) The Security Token service for the businessportal to connect to */\n    @Prop() bpStsServer: string;\n\n    /** (optional) The client id for the businessportal to use when requested a token */\n    @Prop() bpClientId: string;\n\n    async componentWillLoad() {\n        const mobileMq = window.matchMedia('screen and (max-width: 57em)');\n        this.mobileView = mobileMq.matches;\n        mobileMq.addEventListener('change', mq => this.mobileView = mq.matches);\n\n        await this.loadMenus();\n    }\n\n    @Listen('onLocaleChanged')\n    changeLocale(locale: CustomEvent) {\n        this.locale = locale.detail;\n    }\n\n    render() {\n        if (!this.navigation) {\n            return;\n        }\n\n        const navigation = this.mobileView\n            ? <pnl-mobile-navigation navigation={this.navigation.header} log-level={this.logLevel} domain={this.domain} locale={this.locale} available-locales={this.availableLocales} sts-type={this.stsType} sts-server={this.stsServer} client-id={this.clientId} audience={this.audience} scope={this.scope} silent-renew-page={this.silentRenewPage} silent-renew-script={this.silentRenewScript} redirect-uri={this.redirectUri} post-logout-redirect-uri={this.postLogoutRedirectUri} bp-sts-server={this.bpStsServer} bp-client-id={this.bpClientId}></pnl-mobile-navigation>\n            : <pnl-desktop-navigation navigation={this.navigation.header} log-level={this.logLevel} domain={this.domain} locale={this.locale} available-locales={this.availableLocales} sts-type={this.stsType} sts-server={this.stsServer} client-id={this.clientId} audience={this.audience} scope={this.scope} silent-renew-page={this.silentRenewPage} silent-renew-script={this.silentRenewScript} redirect-uri={this.redirectUri} post-logout-redirect-uri={this.postLogoutRedirectUri} bp-sts-server={this.bpStsServer} bp-client-id={this.bpClientId}></pnl-desktop-navigation>\n\n        return (\n            <div class=\"pnl-header\">\n                <pnl-ie11-warning locale={this.locale}></pnl-ie11-warning>\n                {navigation}\n            </div>\n        );\n    }\n}\n"],"mappings":"2IAAA,MAAMA,EAAe,soK,MCWRC,EAAM,M,2FAacC,EAASC,K,YAGM,Y,sBAKjB,Q,YAGsB,Q,sMA0BnBC,SAASC,O,2BAGCD,SAASC,O,qDAjDjDC,kBACIC,KAAKC,iBAAmBC,EAAgBF,KAAKG,OAAQH,KAAKI,O,CAwD9DL,0BACI,MAAMM,EAAWC,OAAOC,WAAW,gCACnCP,KAAKQ,WAAaH,EAASI,QAC3BJ,EAASK,iBAAiB,UAAUC,GAAMX,KAAKQ,WAAaG,EAAGF,gBAEzDT,KAAKY,W,CAIfC,aAAaT,GACTJ,KAAKI,OAASA,EAAOU,M,CAGzBC,SACI,IAAKf,KAAKC,WAAY,CAClB,M,CAGJ,MAAMA,EAAaD,KAAKQ,WAClBQ,EAAA,yBAAuBf,WAAYD,KAAKC,WAAWgB,OAAM,YAAajB,KAAKkB,SAAUf,OAAQH,KAAKG,OAAQC,OAAQJ,KAAKI,OAAM,oBAAqBJ,KAAKmB,iBAAgB,WAAYnB,KAAKoB,QAAO,aAAcpB,KAAKqB,UAAS,YAAarB,KAAKsB,SAAUC,SAAUvB,KAAKuB,SAAUC,MAAOxB,KAAKwB,MAAK,oBAAqBxB,KAAKyB,gBAAe,sBAAuBzB,KAAK0B,kBAAiB,eAAgB1B,KAAK2B,YAAW,2BAA4B3B,KAAK4B,sBAAqB,gBAAiB5B,KAAK6B,YAAW,eAAgB7B,KAAK8B,aACngBd,EAAA,0BAAwBf,WAAYD,KAAKC,WAAWgB,OAAM,YAAajB,KAAKkB,SAAUf,OAAQH,KAAKG,OAAQC,OAAQJ,KAAKI,OAAM,oBAAqBJ,KAAKmB,iBAAgB,WAAYnB,KAAKoB,QAAO,aAAcpB,KAAKqB,UAAS,YAAarB,KAAKsB,SAAUC,SAAUvB,KAAKuB,SAAUC,MAAOxB,KAAKwB,MAAK,oBAAqBxB,KAAKyB,gBAAe,sBAAuBzB,KAAK0B,kBAAiB,eAAgB1B,KAAK2B,YAAW,2BAA4B3B,KAAK4B,sBAAqB,gBAAiB5B,KAAK6B,YAAW,eAAgB7B,KAAK8B,aAE1gB,OACId,EAAA,OAAKe,MAAM,cACPf,EAAA,oBAAkBZ,OAAQJ,KAAKI,SAC9BH,E"}