'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-9a9efa1c.js');

const pnLinkListCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}pn-link-list .link-list__header{display:flex;justify-content:center;flex-direction:column;align-items:center;margin-bottom:0.8rem}pn-link-list .link-list__heading{margin-bottom:0.8rem}@media screen and (min-width: 1140px){pn-link-list .link-list__heading{font-size:3.2rem}}pn-link-list .link-list__preamble{max-width:85rem;text-align:center;margin-bottom:0}@media screen and (min-width: 1140px){pn-link-list .link-list__preamble{text-wrap:balance}}pn-link-list .link-list{display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;margin:0;margin-bottom:2.4rem;padding:0}pn-link-list .link-list__container{overflow-x:auto;text-align:center;white-space:nowrap}pn-link-list .link-list__container.link-list__active a,pn-link-list .link-list__container.link-list__active li,pn-link-list .link-list__container.link-list__active ul{cursor:grab;cursor:-webkit-grab}pn-link-list .link-list__container::-webkit-scrollbar{height:0.4rem;margin-top:2rem;-webkit-appearance:none}@media screen and (min-width: 768px){pn-link-list .link-list__container::-webkit-scrollbar{height:0.6rem}}pn-link-list .link-list__container::-webkit-scrollbar-thumb{background:#005d92;border-radius:2rem}pn-link-list .link-list__container::-webkit-scrollbar-track{background:#d3cecb;border-radius:2rem;width:100%;margin:0 5rem}@media screen and (min-width: 768px){pn-link-list .link-list__container::-webkit-scrollbar-track{margin:0 10rem}}@media screen and (min-width: 1140px){pn-link-list .link-list__container::-webkit-scrollbar-track{margin:0 15rem}}@media screen and (min-width: 1440px){pn-link-list .link-list__container::-webkit-scrollbar-track{margin:0 20rem}}pn-link-list .link-list__container::-webkit-resizer{display:none}pn-link-list .link-list__container::before,pn-link-list .link-list__container::after{content:\"\";position:absolute;top:0;bottom:0;height:85%;width:10%}pn-link-list .link-list__container::before{background:linear-gradient(270deg, rgba(255, 255, 255, 0) 50%, #fff 95%);left:0}pn-link-list .link-list__container::after{background:linear-gradient(90deg, rgba(255, 255, 255, 0) 50%, #fff 95%);right:0}pn-link-list .link-list__scrollable{display:inline-block;padding:2rem 0 1rem}@media screen and (min-width: 992px){pn-link-list .link-list__scrollable{padding:0.5rem 2rem 1rem}}pn-link-list [slot=linklist] ul{display:flex;list-style:none;margin:0;padding:0 1.6rem}pn-link-list [slot=linklist] li>a{display:block;color:#2d2013;font-size:1.4rem;font-weight:500;line-height:140%;text-decoration:none;cursor:pointer;background-color:#ffffff;border:0.1rem solid #d3cecb;border-radius:0.8rem;margin:0 0.8rem;padding:1rem}@media screen and (min-width: 1410px){pn-link-list [slot=linklist] li>a{font-size:1.6rem}}pn-link-list [slot=linklist] li>a:hover,pn-link-list [slot=linklist] li>a:active,pn-link-list [slot=linklist] li>a:focus{color:#fff}pn-link-list [slot=linklist] li>a:hover,pn-link-list [slot=linklist] li>a:focus{background-color:#005d92}pn-link-list [slot=linklist] li>a:active{background-color:#0d234b}pn-link-list [slot=linklist] li>a:focus{outline:2px solid #005d92;outline-offset:2px}pn-link-list .link-list__button{display:flex;justify-content:center}@-moz-document url-prefix(){pn-link-list .link-list__container{scrollbar-color:#005d92 #d3cecb}pn-link-list .link-list__scrollable{padding:0.5rem 2rem 2rem}}";
const PnLinkListStyle0 = pnLinkListCss;

const PnLinkList = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.heading = null;
        this.label = null;
        this.preamble = null;
        this.url = null;
        this.showMoreLabel = null;
        this.showMoreUrl = null;
    }
    slider = null;
    isDragging = false;
    startX = 0;
    scrollLeft = 0;
    componentDidLoad() {
        this.slider = document.querySelector('.link-list__container');
    }
    handleMouseDown = (e) => {
        const target = e.target;
        const isContainerClick = target.classList.contains('link-list__container');
        const isLinkClick = target.tagName === 'A';
        if (isContainerClick || isLinkClick) {
            this.isDragging = true;
            this.slider?.classList.add('link-list__active');
            this.startX = e.pageX - this.slider?.offsetLeft;
            this.scrollLeft = this.slider?.scrollLeft;
            if (isLinkClick) {
                e.preventDefault();
            }
        }
    };
    handleMouseLeave = () => {
        this.isDragging = false;
        this.slider?.classList.remove('link-list__active');
    };
    handleMouseUp = () => {
        this.isDragging = false;
        this.slider?.classList.remove('link-list__active');
    };
    handleMouseMove = (e) => {
        if (this.isDragging) {
            const x = e.pageX - this.slider?.offsetLeft;
            const move = (x - this.startX) * 2;
            this.slider.scrollLeft = this.scrollLeft - move;
        }
    };
    render() {
        return (index.h(index.Host, { key: 'f3391e76bff21c2c457e0f444d8c12ea1c60f68c' }, (this.heading || this.preamble) && (index.h("div", { key: 'e341985c5bcefde571f5455bbe0349155e6c0cdb', class: "link-list__header" }, this.heading && index.h("h2", { key: 'c34e3ce6f6b52ddda60f30f3debebddf5e6d4dac', class: "link-list__heading" }, this.heading), this.preamble && index.h("p", { key: '40324fc42fb7fd41e6599472d7f201baf4f139c5', class: "link-list__preamble" }, this.preamble))), index.h("div", { key: 'f5dd403561b08db47a7914a7bf9c2e2c4ace89fa', class: "link-list" }, index.h("div", { key: '592d66f3bb97e13610fd2190b2e4cff9a4696c1b', class: "link-list__container", onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp, onMouseLeave: this.handleMouseLeave, onMouseMove: this.handleMouseMove }, index.h("div", { key: '072bc4292cd17c1c36303715c9dc1805051ffd63', class: "link-list__scrollable" }, index.h("slot", { key: '83f16bb38622bad50e347a9b8e15c4728d9d490a', name: "linklist" })))), this.showMoreUrl ? (index.h("div", { class: "link-list__button" }, index.h("pn-button", { appearance: "light", href: this.showMoreUrl }, this.showMoreLabel), ' ')) : ('')));
    }
};
PnLinkList.style = PnLinkListStyle0;

exports.pn_link_list = PnLinkList;

//# sourceMappingURL=pn-link-list.cjs.entry.js.map