{"version":3,"names":["PnlCookieWidgetOverview","render","showLanguageSelector","this","availableLocales","split","length","h","role","tabindex","class","id","locale","content","pageTitle","innerHTML","onKeyUp","e","key","openSettings","onClick","changeCookiesText","images","chevronRight","saveSettings","acceptCookiesText","refuseOptionalCookiesText","settingsSelected","emit","acceptAll","settings","categories","forEach","category","checked","document","body","classList","remove","saved","PnlCookieWidgetSettings","domain","map","c","required","title","description","type","onInput","setPreference","target","htmlFor","consentText","saveButtonText","selectedCategory","find","f","console","error","_a","navigateToOverview","cancelled"],"sources":["./src/components/pnl-cookie-widget/pnl-cookie-widget-overview/pnl-cookie-widget-overview.tsx","./src/components/pnl-cookie-widget/pnl-cookie-widget-settings/pnl-cookie-widget-settings.tsx"],"sourcesContent":["import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n} from '@stencil/core';\nimport { images } from '../../../helpers/inline-images.service';\nimport { CookieWallSettings, LandingPage } from '../models/cookie-wall.models';\n\n@Component({\n    tag: 'pnl-cookie-widget-overview',\n})\nexport class PnlCookieWidgetOverview {\n    @Prop() content: LandingPage;\n    @Prop() settings: CookieWallSettings;\n    @Prop() locale: string;\n    @Prop() availableLocales: string;\n\n    @Event() settingsSelected: EventEmitter<void>;\n    @Event() saved: EventEmitter<void>;\n\n    @Element() component: HTMLElement;\n\n    render() {\n        const showLanguageSelector =\n            this.availableLocales.split(',').length > 1;\n\n        return (\n            <section role=\"region\" tabindex=\"0\" aria-label=\"Cookie settings\">\n                <div\n                    class=\"pci-modal\"\n                    role=\"dialog\"\n                    aria-modal=\"true\"\n                    id=\"cookiewall\"\n                    aria-label=\"Cookie settings\"\n                >\n                    <div class=\"pci-modal__content overview wide\">\n                        <div class=\"pci-modal__body\">\n                            <div class=\"pci-modal__body-inner\">\n                                {showLanguageSelector && (\n                                    <pnl-language-selector\n                                        available-locales={\n                                            this.availableLocales\n                                        }\n                                        locale={this.locale}\n                                    ></pnl-language-selector>\n                                )}\n                                <h1 class=\"h1\">{this.content.pageTitle}</h1>\n                                <div innerHTML={this.content.content}></div>\n                                <div class=\"whitespace\"></div>\n                            </div>\n                        </div>\n\n                        <div class=\"pci-modal__footer\">\n                            <div class=\"pci-cookie-button-container\">\n                                <button\n                                    id=\"first-focusable-item\"\n                                    class=\"stamp-button first-focusable-item\"\n                                    onKeyUp={(e) =>\n                                        e.key === 'Enter'\n                                            ? this.openSettings()\n                                            : null\n                                    }\n                                    onClick={() => this.openSettings()}\n                                >\n                                    {this.content.changeCookiesText}\n\n                                    <span\n                                        class=\"stamp-button__chevron\"\n                                        innerHTML={images.chevronRight}\n                                    ></span>\n                                </button>\n                                <div class=\"pci-cookie-button-inner\">\n                                    <button\n                                        class=\"pci-button pci-button--primary pci-widget-actions\"\n                                        onClick={() => this.saveSettings(true)}\n                                    >\n                                        <span class=\"pci-button__text\">\n                                            {this.content.acceptCookiesText}\n                                        </span>\n                                    </button>\n                                    <button\n                                        class=\"pci-button pci-button--secondary pci-widget-actions\"\n                                        onClick={() => this.saveSettings(false)}\n                                    >\n                                        <span class=\"pci-button__text\">\n                                            {\n                                                this.content\n                                                    .refuseOptionalCookiesText\n                                            }\n                                        </span>\n                                    </button>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </section>\n        );\n    }\n\n    openSettings() {\n        this.settingsSelected.emit();\n    }\n\n    saveSettings(acceptAll: boolean) {\n        if (acceptAll) {\n            this.settings.categories.forEach((category) => {\n                category.checked = true;\n            });\n        }\n\n        document.body.classList.remove('noscroll');\n\n        this.saved.emit();\n    }\n}\n","import {\n    Component,\n    Event,\n    EventEmitter,\n    h,\n    Listen,\n    Prop,\n    State,\n} from '@stencil/core';\nimport { CookieWallSettings, SettingsPage } from '../models/cookie-wall.models';\n\n@Component({\n    tag: 'pnl-cookie-widget-settings',\n})\nexport class PnlCookieWidgetSettings {\n    @Prop() content: SettingsPage;\n    @Prop() settings: CookieWallSettings;\n    @Prop() locale: string;\n    @Prop() availableLocales: string;\n\n    @State() value: string;\n    @State() selectValue: string;\n    @State() categoryContent: string;\n\n    @Event() cancelled: EventEmitter<void>;\n    @Event() saved: EventEmitter<void>;\n\n    render() {\n        return (\n            <section role=\"region\" tabindex=\"0\" aria-label=\"Cookie settings\">\n                <div\n                    class=\"pci-modal\"\n                    role=\"dialog\"\n                    aria-modal=\"true\"\n                    aria-label=\"Cookie settings\"\n                >\n                    <div class=\"pci-modal__content settings\">\n                        <pnl-focus-header\n                            domain=\"postnl.nl\"\n                            locale={this.locale}\n                            availableLocales={this.availableLocales}\n                        ></pnl-focus-header>\n                        <div class=\"pci-modal__body\">\n                            <div class=\"pci-inner-container\">\n                                <h1 class=\"h1\">{this.content.pageTitle}</h1>\n                                <div innerHTML={this.content.content}></div>\n\n                                <ul class=\"pci-checkbox__ul\">\n                                    {this.settings.categories.map((c) => {\n                                        return (\n                                            <li class=\"pci-checkbox__li\">\n                                                {c.required && (\n                                                    <div>\n                                                        <span\n                                                            innerHTML={c.title}\n                                                        ></span>\n                                                        <div\n                                                            class=\"pci-checkbox__content\"\n                                                            innerHTML={\n                                                                c.description\n                                                            }\n                                                        ></div>\n                                                    </div>\n                                                )}\n                                                {!c.required && (\n                                                    <div>\n                                                        <div class=\"pci-checkbox\">\n                                                            <input\n                                                                type=\"checkbox\"\n                                                                class=\"pci-checkbox__input\"\n                                                                id={c.category}\n                                                                onInput={(e) =>\n                                                                    this.setPreference(\n                                                                        e.target as HTMLInputElement\n                                                                    )\n                                                                }\n                                                                checked={\n                                                                    c.checked\n                                                                }\n                                                            />\n                                                            <label\n                                                                class=\"pci-checkbox__label\"\n                                                                htmlFor={\n                                                                    c.category\n                                                                }\n                                                            >\n                                                                <span\n                                                                    innerHTML={\n                                                                        c.title\n                                                                    }\n                                                                ></span>\n                                                            </label>\n                                                        </div>\n                                                        <div\n                                                            class=\"pci-checkbox__content\"\n                                                            innerHTML={\n                                                                c.description\n                                                            }\n                                                        ></div>\n                                                    </div>\n                                                )}\n                                            </li>\n                                        );\n                                    })}\n                                </ul>\n                                <div\n                                    class=\"pci-consent__paragraph\"\n                                    innerHTML={this.content.consentText}\n                                ></div>\n                                <div class=\"pci-cookie-button-container\">\n                                    <button\n                                        type=\"submit\"\n                                        class=\"pci-button pci-button--primary\"\n                                        onClick={() => this.saveSettings()}\n                                    >\n                                        <span class=\"pci-button__text\">\n                                            {this.content.saveButtonText}\n                                        </span>\n                                    </button>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </section>\n        );\n    }\n\n    setPreference(target: HTMLInputElement) {\n        const selectedCategory = this.settings.categories.find(\n            (f) => f.category === target.id\n        );\n        if (!selectedCategory) {\n            console.error(\n                'Given category is not implemented:',\n                target.id ?? 'null'\n            );\n        } else {\n            selectedCategory.checked = target.checked;\n        }\n    }\n\n    saveSettings() {\n        this.saved.emit();\n    }\n\n    @Listen('cancel')\n    navigateToOverview() {\n        this.cancelled.emit();\n    }\n}\n"],"mappings":"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"}