{"version":3,"names":["pnlFooterCss","PnlFooter","async","this","navigation","fetchNavigation","domain","locale","loadFooter","toggleExpansion","itemIndex","expandedElementIndex","footer","global","categories","map","_","index","ulElement","document","getElementById","getIdForListItem","style","height","scrollHeight","renderMain","items","h","class","item","renderListItem","renderLegal","renderListItemLine","toString","title","onClick","innerHTML","images","arrow_up","id","href","link","image","undefined","src","alt","imageAlt","render","legalOnly","legal"],"sources":["./src/components/pnl-footer/pnl-footer.scss?tag=pnl-footer&encapsulation=shadow","./src/components/pnl-footer/pnl-footer.tsx"],"sourcesContent":["@import '../../../node_modules/@postnl/pci/postnl-styles/settings';\n@import '../../../node_modules/@postnl/pci/postnl-styles/layout/containers';\n@import '../../../node_modules/@postnl/pci/postnl-styles/tools/utilities';\n\n:host(*) {\n    all: initial;\n    font-size: 16px;\n    font-family: $font-stack;\n}\n\n.pci-footer {\n    font-family: $font-stack;\n}\n\n.pci-footer--general {\n    background-color: $lightest-grey;\n}\n\n.pci-footer--legal {\n    background-color: $dark-grey;\n}\n\n.pci-footer__list {\n    display: flex;\n    margin: 0;\n    padding: 1.5em 0;\n    list-style: none;\n}\n\n.pci-footer__list--general {\n    flex-direction: column;\n    padding-bottom: 3em;\n\n    @media (min-width: 48em) {\n        flex-direction: row;\n    }\n}\n\n.pci-footer__list--legal {\n    flex-wrap: wrap;\n\n    @media (min-width: 48em) {\n        flex-wrap: nowrap;\n        align-items: baseline;\n        justify-content: flex-end;\n    }\n}\n\n.pci-footer__list--nested {\n    flex-direction: column;\n    max-height: 0;\n    padding: 0 0 0 1em;\n    transition: max-height 250ms cubic-bezier(0.4, 0, 0.2, 1);\n    overflow: hidden;\n\n    [aria-expanded='true'] & {\n        max-height: 10em;\n    }\n\n    @media (min-width: 48em) {\n        height: auto;\n        max-height: unset;\n        padding: 0;\n        overflow: visible;\n    }\n}\n\n.pci-footer__list-title {\n    display: flex;\n    position: relative;\n    align-items: center;\n    margin-bottom: 0;\n    padding: 0.75em 0;\n    color: $dark-grey;\n    font-size: 1em;\n    font-weight: normal;\n}\n\n.pci-footer__toggle-button {\n    display: flex;\n    position: absolute;\n    top: 0;\n    left: 0;\n    align-items: center;\n    width: 100%;\n    height: 100%;\n    border: 0;\n    outline: 0;\n    background: transparent;\n\n    @media (min-width: 48em) {\n        display: none;\n    }\n\n    .pci-icon {\n        position: absolute;\n        right: 0.5em;\n        transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);\n        color: $dark-grey;\n        font-size: 1em;\n\n        [aria-expanded='false'] & {\n            transform: rotate(-180deg);\n        }\n    }\n\n    .pci-icon--inline > svg {\n        width: 1em;\n    }\n}\n\n.pci-footer__listitem {\n    .pci-footer--general & {\n        flex: 1;\n    }\n\n    .pci-footer--legal & {\n        margin-right: 1.5em;\n\n        @media (min-width: 48em) {\n            margin-right: 0;\n            margin-left: 1.5em;\n        }\n    }\n}\n\n.pci-footer__list--nested .pci-footer__listitem {\n    padding: 0.25em 0;\n\n    &:last-child {\n        padding-bottom: 0.75em;\n\n        @media (min-width: 48em) {\n            padding-bottom: 0.25em;\n        }\n    }\n}\n\n.pci-footer__listitem + .pci-footer__listitem {\n    .pci-footer__list--general > & {\n        border-top: 1px solid $light-grey;\n\n        @media (min-width: 48em) {\n            border-top: 0;\n        }\n    }\n}\n\n.pci-footer__link {\n    border-bottom: 1px solid transparent;\n    font-weight: 300;\n    text-decoration: none;\n\n    .pci-footer__list--general & {\n        color: $dark-grey;\n\n        &:hover,\n        &:focus:not(:focus-visible) {\n            border-bottom-color: $dark-grey;\n        }\n    }\n\n    .pci-footer__list--legal & {\n        color: $white;\n        font-size: 0.875em;\n        font-weight: normal;\n\n        &:hover,\n        &:focus:not(:focus-visible) {\n            border-bottom-color: $white;\n        }\n    }\n}\n\n.pci-footer__image {\n    display: inline;\n    position: relative;\n    margin-right: 0.75em;\n    vertical-align: middle;\n\n    .pci-footer__list--legal & {\n        //only for the PostNL logo because it has whitespace :(\n        margin-left: -7px;\n    }\n}\n\n//Homelink in the footer\n.pci-footer--legal .pci-footer__listitem:first-child {\n    flex: 0 0 100%;\n    margin-right: 0;\n\n    @media (min-width: 48em) {\n        flex: 0 0 auto;\n        margin-right: auto;\n        margin-left: 0;\n    }\n\n    .pci-footer__link:hover,\n    .pci-footer__link:focus {\n        border-bottom-color: transparent;\n    }\n}\n","import { Component, h, Prop, Watch, State } from '@stencil/core';\nimport { fetchNavigation } from '../menu-service';\nimport { Category, CategoryItem, NavigationStructure } from '../navigation-structure.models';\nimport { images } from '../../helpers/inline-images.service'\n\n\n@Component({\n    tag: 'pnl-footer',\n    styleUrl: 'pnl-footer.scss',\n    shadow: true\n})\nexport class PnlFooter {\n\n    @State() navigation: NavigationStructure;\n    @State() expandedElementIndex = -1;\n\n    /** The domain of the client application */\n    @Prop() domain: 'postnl.nl' | 'postnl.be' = 'postnl.nl';\n    /** The language to show the footer in (en_GB, nl_NL, nl_BE and fr_BE) */\n    @Prop() locale = 'nl_NL';\n    /** If true, only the bottom most part of the footer will be rendered */\n    @Prop() legalOnly: boolean;\n\n    @Watch('locale')\n    @Watch('domain')\n    async loadFooter() {\n        this.navigation = await fetchNavigation(this.domain, this.locale);\n    }\n\n    async componentWillLoad() {\n        this.loadFooter();\n    }\n\n    toggleExpansion(itemIndex: number): void {\n        this.expandedElementIndex = this.expandedElementIndex !== itemIndex ? itemIndex : -1;\n        this.navigation.footer.global.categories.map((_, index) => {\n            const ulElement = document.getElementById(this.getIdForListItem(index));\n            if (ulElement) {\n                ulElement.style.height = `${itemIndex === index && index === this.expandedElementIndex ? ulElement.scrollHeight : 0}px`;\n            }\n        })\n    }\n\n    private getIdForListItem(itemIndex: number) {\n        return `footerRenderedListItem${itemIndex}`;\n    }\n\n    private renderMain(items: Category[]) {\n        return (\n            <div class=\"pci-footer--general\">\n                <div class=\"pci-inner-container\">\n                    <ul class=\"pci-footer__list pci-footer__list--general\">\n                        {items.map((item, index) => this.renderListItem(item, index))}\n                    </ul>\n                </div>\n            </div>\n        );\n    }\n\n    private renderLegal(items: CategoryItem[]) {\n        return (\n            <div class=\"pci-footer--legal\">\n                <div class=\"pci-inner-container\">\n                    <ul class=\"pci-footer__list pci-footer__list--legal\">\n                        {items.map(item => this.renderListItemLine(item))}\n                    </ul>\n                </div>\n            </div>\n        );\n    }\n\n    private renderListItem(item: Category, itemIndex: number) {\n        return (\n            <li class=\"pci-footer__listitem\" aria-expanded={(this.expandedElementIndex === itemIndex).toString()}>\n                <h2 class=\"pci-footer__list-title\">{item.title}\n                    <button class=\"pci-footer__toggle-button\" onClick={() => this.toggleExpansion(itemIndex)}>\n                        <span class=\"visually-hidden\">Open submenu</span>\n                        <span class=\"pci-icon pci-icon--inline\" innerHTML={images.arrow_up}></span>\n                    </button>\n                </h2>\n                <ul id={this.getIdForListItem(itemIndex)} class=\"pci-footer__list pci-footer__list--nested\">\n                    {item.items.map(item => this.renderListItemLine(item))}\n                </ul>\n            </li>\n        );\n    }\n\n    private renderListItemLine(item: CategoryItem) {\n        return (\n            <li class=\"pci-footer__listitem\">\n                <a class=\"pci-footer__link\" href={item.link}>\n                    {item.image !== undefined && item.image !== null && <img class=\"pci-footer__image\" src={item.image} alt={item.imageAlt}></img>}\n                    {(item.title)}\n                </a>\n            </li>\n        )\n    }\n\n    render() {\n        if (!this.navigation) {\n            return;\n        }\n\n        return (\n            <footer class=\"pci-footer\">\n                {!this.legalOnly && this.renderMain(this.navigation.footer.global.categories)}\n                {this.renderLegal(this.navigation.footer.legal.items)}\n            </footer>\n        );\n    }\n}\n"],"mappings":"2IAAA,MAAMA,EAAe,0xK,MCWRC,EAAS,M,8EAGe,E,YAGW,Y,YAE3B,Q,yBAMjBC,mBACIC,KAAKC,iBAAmBC,EAAgBF,KAAKG,OAAQH,KAAKI,O,CAG9DL,0BACIC,KAAKK,Y,CAGTC,gBAAgBC,GACZP,KAAKQ,qBAAuBR,KAAKQ,uBAAyBD,EAAYA,GAAa,EACnFP,KAAKC,WAAWQ,OAAOC,OAAOC,WAAWC,KAAI,CAACC,EAAGC,KAC7C,MAAMC,EAAYC,SAASC,eAAejB,KAAKkB,iBAAiBJ,IAChE,GAAIC,EAAW,CACXA,EAAUI,MAAMC,OAAS,GAAGb,IAAcO,GAASA,IAAUd,KAAKQ,qBAAuBO,EAAUM,aAAe,K,KAKtHH,iBAAiBX,GACrB,MAAO,yBAAyBA,G,CAG5Be,WAAWC,GACf,OACIC,EAAA,OAAKC,MAAM,uBACPD,EAAA,OAAKC,MAAM,uBACPD,EAAA,MAAIC,MAAM,8CACLF,EAAMX,KAAI,CAACc,EAAMZ,IAAUd,KAAK2B,eAAeD,EAAMZ,O,CAOlEc,YAAYL,GAChB,OACIC,EAAA,OAAKC,MAAM,qBACPD,EAAA,OAAKC,MAAM,uBACPD,EAAA,MAAIC,MAAM,4CACLF,EAAMX,KAAIc,GAAQ1B,KAAK6B,mBAAmBH,O,CAOvDC,eAAeD,EAAgBnB,GACnC,OACIiB,EAAA,MAAIC,MAAM,uBAAsB,iBAAiBzB,KAAKQ,uBAAyBD,GAAWuB,YACtFN,EAAA,MAAIC,MAAM,0BAA0BC,EAAKK,MACrCP,EAAA,UAAQC,MAAM,4BAA4BO,QAAS,IAAMhC,KAAKM,gBAAgBC,IAC1EiB,EAAA,QAAMC,MAAM,mBAAiB,gBAC7BD,EAAA,QAAMC,MAAM,4BAA4BQ,UAAWC,EAAOC,aAGlEX,EAAA,MAAIY,GAAIpC,KAAKkB,iBAAiBX,GAAYkB,MAAM,6CAC3CC,EAAKH,MAAMX,KAAIc,GAAQ1B,KAAK6B,mBAAmBH,M,CAMxDG,mBAAmBH,GACvB,OACIF,EAAA,MAAIC,MAAM,wBACND,EAAA,KAAGC,MAAM,mBAAmBY,KAAMX,EAAKY,MAClCZ,EAAKa,QAAUC,WAAad,EAAKa,QAAU,MAAQf,EAAA,OAAKC,MAAM,oBAAoBgB,IAAKf,EAAKa,MAAOG,IAAKhB,EAAKiB,WAC5GjB,EAAU,O,CAM5BkB,SACI,IAAK5C,KAAKC,WAAY,CAClB,M,CAGJ,OACIuB,EAAA,UAAQC,MAAM,eACRzB,KAAK6C,WAAa7C,KAAKsB,WAAWtB,KAAKC,WAAWQ,OAAOC,OAAOC,YACjEX,KAAK4B,YAAY5B,KAAKC,WAAWQ,OAAOqC,MAAMvB,O"}