{"version":3,"names":["pnlFocusHeaderCss","FocusHeader","this","cancelText","nl_NL","nl_BE","fr_BE","en_GB","homePageUrl","location","origin","changeLocale","locale","detail","componentWillLoad","mobileMq","window","matchMedia","mobileView","matches","addEventListener","mq","homeUrl","domain","substring","renderUserMenu","visible","stsServer","h","class","hidden","language","stsType","clientId","audience","scope","silentRenewPage","silentRenewScript","redirectUri","postLogoutRedirectUri","undefined","render","showHeaderUtility","showUserMenu","availableLocales","split","length","href","src","alt","hideCancel","type","onClick","cancel","emit","innerHTML","images","closeMenuThick"],"sources":["./src/components/pnl-focus-header/pnl-focus-header.scss?tag=pnl-focus-header&encapsulation=shadow","./src/components/pnl-focus-header/pnl-focus-header.tsx"],"sourcesContent":["@import '../../assets/styles/variables';\n@import '../../assets/styles/typography';\n@import '../../../node_modules/@postnl/pci/postnl-styles/settings';\n@import '../pnl-header/pnl-header.scss';\n\n.pnl-header--desktop {\n    background-color: $color-background-variant;\n\n    @media (max-width: $bp-nav) {\n        .pci-icon {\n            margin: 0;\n            padding: 0;\n        }\n    }\n}\n\n.pci-inner-container {\n    height: 80px;\n    display: flex;\n    position: relative;\n    align-items: center;\n}\n\n.pci-inner-container--alt {\n    justify-content: flex-end;\n    height: 2.5rem;\n    position: static;\n\n    .pci-flyout .pci-button {\n        position: static;\n    }\n}\n\n.pnl-navigation__link--replacement {\n    width: 3.5em;\n    height: 3.5em;\n}\n\n.pnl-focus-link {\n    margin: unset;\n}\n\n.pnl-header__button {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 0.5rem;\n    color: $color-icon-button-secondary-default;\n    font-size: 1rem;\n    font-family: $font-family-bodytext, sans-serif;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    font-feature-settings: 'ss03' on, 'ss01' on;\n    background: none;\n    border: none;\n    border-radius: 0.25rem;\n    margin-left: auto;\n\n    &:hover {\n        text-decoration: underline;\n        text-underline-offset: 0.15em;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n\n    &:focus-visible {\n        outline-color: $color-border-focus-outline;\n        outline-style: solid;\n        outline-width: 2px;\n        outline-offset: 1px;\n    }\n\n    &:active {\n        color: $color-border-focus-outline;\n        text-decoration: underline;\n        text-underline-offset: 0.15em;\n        background-color: #ffffff00;\n\n        > span svg path {\n            fill: $color-border-focus-outline;\n        }\n    }\n}\n\n.pnl-header__button-icon {\n    display: flex;\n    align-items: center;\n    height: 12px;\n    width: 12px;\n\n    > svg {\n        path {\n            fill: $color-icon-button-secondary-default;\n        }\n    }\n}\n\n.pnl-header__utility {\n    position: relative;\n    background-color: $color-background-variant;\n}\n\n.pnl-header__utility--focus {\n    display: block;\n}\n\n.pnl-header__nav {\n    display: flex;\n    gap: 2.5rem;\n    margin-left: auto;\n\n    > ul {\n        display: flex;\n        align-items: center;\n        list-style-type: none;\n        margin: 0;\n    }\n}\n\n.pnl-header__nav-item {\n    max-block-size: 25px;\n    border-right: 1px solid $color-border-default;\n}\n\n.pci-flyout__list {\n    .pnl-header__nav-item & {\n        width: unset !important;\n        max-inline-size: 20vw;\n    }\n\n    .pnl-header__utility--focus & {\n        left: -50% !important;\n    }\n\n    .pnl-user-menu__login & {\n        right: -70% !important;\n    }\n}\n\n// Overrides from widgets\n.pnl-user-menu-container {\n    .pnl-header & {\n        margin-right: 0;\n    }\n}\n\n.pnl-user-menu__simpleloginbutton {\n    margin-left: auto !important;\n}\n\n.pnl-user-menu__simpleloginbutton {\n    &.pci-flyout__trigger {\n        margin-left: auto;\n        min-width: unset;\n        font-weight: 500;\n        background-color: transparent;\n    }\n\n    .pnl-header & {\n        padding: 0 1rem;\n    }\n}\n","import {\n    Component,\n    Event,\n    EventEmitter,\n    Listen,\n    Prop,\n    State,\n    h,\n} from '@stencil/core';\nimport { images } from '../../helpers/inline-images.service';\nimport { StsType } from '../../services/authentication/authentication.models';\n\n@Component({\n    tag: 'pnl-focus-header',\n    styleUrl: 'pnl-focus-header.scss',\n    shadow: true,\n})\nexport class FocusHeader {\n    cancelText = {\n        nl_NL: 'Annuleren',\n        nl_BE: 'Annuleren',\n        fr_BE: 'Annuler',\n        en_GB: 'Cancel',\n    };\n\n    homePageUrl = {\n        'postnl.nl': 'https://www.postnl.nl',\n        'postnl.be': 'https://www.postnl.be',\n    };\n\n    @State() mobileView: boolean;\n\n    /** The domain of the client application */\n    @Prop() domain: 'postnl.nl' | 'postnl.be' = 'postnl.nl';\n\n    /** The language to show the footer in (en_GB, nl_NL, nl_BE and fr_BE) */\n    @Prop() locale = 'nl_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    /** (optional) if set, the cancel button will not be visible */\n    @Prop() hideCancel: boolean = false;\n\n    /** (optional) if set, it will show the user-menu in focus-mode */\n    @Prop() showUserMenu: boolean = false;\n\n    /** (optional) set the type of security token service. Supported values: 'identity' or 'akamai'. */\n    @Prop() stsType: StsType;\n\n    /** (optional) The Security Token service to connect to. e.g. http://jouw.postnl.nl/identity.\n     * The user menu will not be included if this is not specified.\n     */\n    @Prop() stsServer: string;\n\n    /** (optional) The client id 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    /** This event will fire when the user clicks the cancel button */\n    @Event() cancel: EventEmitter;\n\n    @Listen('onLocaleChanged')\n    changeLocale(locale: CustomEvent) {\n        this.locale = locale.detail;\n    }\n\n    componentWillLoad() {\n        const mobileMq = window.matchMedia('screen and (max-width: 57em)');\n        this.mobileView = mobileMq.matches;\n        mobileMq.addEventListener(\n            'change',\n            (mq) => (this.mobileView = mq.matches)\n        );\n    }\n\n    private homeUrl() {\n        return `${this.homePageUrl[this.domain]}/${this.locale.substring(\n            0,\n            2\n        )}`;\n    }\n\n    private renderUserMenu(visible: boolean = true) {\n        return this.stsServer ? (\n            <pnl-user-menu\n                class={'pnl-user-menu-container'}\n                hidden={!visible}\n                language={this.locale}\n                domain={this.domain}\n                sts-type={this.stsType}\n                sts-server={this.stsServer}\n                client-id={this.clientId}\n                audience={this.audience}\n                scope={this.scope}\n                silentRenewPage={this.silentRenewPage}\n                silentRenewScript={this.silentRenewScript}\n                redirect-uri={this.redirectUri}\n                post-logout-redirect-uri={this.postLogoutRedirectUri}\n                menu-style=\"minimal\"\n            ></pnl-user-menu>\n        ) : undefined;\n    }\n\n    render() {\n        const showHeaderUtility =\n            this.showUserMenu || this.availableLocales.split(',').length > 1;\n        return (\n            <div class=\"pnl-header--desktop\">\n                <div class=\"pnl-header__main pnl-header__main--desktop\">\n                    {showHeaderUtility && (\n                        <div class=\"pnl-header__utility pnl-header__utility--focus\">\n                            <div class=\"pci-inner-container pci-inner-container--alt\">\n                                {this.renderUserMenu(this.showUserMenu)}\n                                <pnl-language-selector\n                                    availableLocales={this.availableLocales}\n                                    locale={this.locale}\n                                ></pnl-language-selector>\n                            </div>\n                        </div>\n                    )}\n                    {!showHeaderUtility && this.renderUserMenu(false)}\n\n                    <div class=\"pci-inner-container pnl-navigation-container\">\n                        <a class=\"pnl-focus-link\" href={this.homeUrl()}>\n                            <img\n                                class=\"pnl-navigation__link--replacement\"\n                                src=\"https://cdn.postnl.nl/images/icons/svg/logo-postnl-outline.svg\"\n                                alt=\"PostNL logo\"\n                            />\n                        </a>\n                        {!this.hideCancel && (\n                            <button\n                                class=\"pnl-header__button\"\n                                type=\"button\"\n                                onClick={() => this.cancel.emit()}\n                            >\n                                {this.cancelText[this.locale]}\n\n                                <span\n                                    class=\"pnl-header__button-icon\"\n                                    innerHTML={images.closeMenuThick}\n                                ></span>\n                            </button>\n                        )}\n                    </div>\n                </div>\n            </div>\n        );\n    }\n}\n"],"mappings":"sFAAA,MAAMA,EAAoB,q0Q,MCiBbC,EAAW,M,wDACpBC,KAAAC,WAAa,CACTC,MAAO,YACPC,MAAO,YACPC,MAAO,UACPC,MAAO,UAGXL,KAAAM,YAAc,CACV,YAAa,wBACb,YAAa,yB,sCAM2B,Y,YAG3B,Q,sBAKU,Q,gBAGG,M,kBAGE,M,sMA0BFC,SAASC,O,2BAGCD,SAASC,M,CAMjDC,aAAaC,GACTV,KAAKU,OAASA,EAAOC,M,CAGzBC,oBACI,MAAMC,EAAWC,OAAOC,WAAW,gCACnCf,KAAKgB,WAAaH,EAASI,QAC3BJ,EAASK,iBACL,UACCC,GAAQnB,KAAKgB,WAAaG,EAAGF,S,CAI9BG,UACJ,MAAO,GAAGpB,KAAKM,YAAYN,KAAKqB,WAAWrB,KAAKU,OAAOY,UACnD,EACA,I,CAIAC,eAAeC,EAAmB,MACtC,OAAOxB,KAAKyB,UACRC,EAAA,iBACIC,MAAO,0BACPC,QAASJ,EACTK,SAAU7B,KAAKU,OACfW,OAAQrB,KAAKqB,OAAM,WACTrB,KAAK8B,QAAO,aACV9B,KAAKyB,UAAS,YACfzB,KAAK+B,SAChBC,SAAUhC,KAAKgC,SACfC,MAAOjC,KAAKiC,MACZC,gBAAiBlC,KAAKkC,gBACtBC,kBAAmBnC,KAAKmC,kBAAiB,eAC3BnC,KAAKoC,YAAW,2BACJpC,KAAKqC,sBAAqB,aACzC,YAEfC,S,CAGRC,SACI,MAAMC,EACFxC,KAAKyC,cAAgBzC,KAAK0C,iBAAiBC,MAAM,KAAKC,OAAS,EACnE,OACIlB,EAAA,OAAKC,MAAM,uBACPD,EAAA,OAAKC,MAAM,8CACNa,GACGd,EAAA,OAAKC,MAAM,kDACPD,EAAA,OAAKC,MAAM,gDACN3B,KAAKuB,eAAevB,KAAKyC,cAC1Bf,EAAA,yBACIgB,iBAAkB1C,KAAK0C,iBACvBhC,OAAQV,KAAKU,YAK3B8B,GAAqBxC,KAAKuB,eAAe,OAE3CG,EAAA,OAAKC,MAAM,gDACPD,EAAA,KAAGC,MAAM,iBAAiBkB,KAAM7C,KAAKoB,WACjCM,EAAA,OACIC,MAAM,oCACNmB,IAAI,iEACJC,IAAI,kBAGV/C,KAAKgD,YACHtB,EAAA,UACIC,MAAM,qBACNsB,KAAK,SACLC,QAAS,IAAMlD,KAAKmD,OAAOC,QAE1BpD,KAAKC,WAAWD,KAAKU,QAEtBgB,EAAA,QACIC,MAAM,0BACN0B,UAAWC,EAAOC,oB"}