import { Host, h } from "@stencil/core";
export class PnLinkList {
    constructor() {
        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 (h(Host, { key: 'f3391e76bff21c2c457e0f444d8c12ea1c60f68c' }, (this.heading || this.preamble) && (h("div", { key: 'e341985c5bcefde571f5455bbe0349155e6c0cdb', class: "link-list__header" }, this.heading && h("h2", { key: 'c34e3ce6f6b52ddda60f30f3debebddf5e6d4dac', class: "link-list__heading" }, this.heading), this.preamble && h("p", { key: '40324fc42fb7fd41e6599472d7f201baf4f139c5', class: "link-list__preamble" }, this.preamble))), h("div", { key: 'f5dd403561b08db47a7914a7bf9c2e2c4ace89fa', class: "link-list" }, h("div", { key: '592d66f3bb97e13610fd2190b2e4cff9a4696c1b', class: "link-list__container", onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp, onMouseLeave: this.handleMouseLeave, onMouseMove: this.handleMouseMove }, h("div", { key: '072bc4292cd17c1c36303715c9dc1805051ffd63', class: "link-list__scrollable" }, h("slot", { key: '83f16bb38622bad50e347a9b8e15c4728d9d490a', name: "linklist" })))), this.showMoreUrl ? (h("div", { class: "link-list__button" }, h("pn-button", { appearance: "light", href: this.showMoreUrl }, this.showMoreLabel), ' ')) : ('')));
    }
    static get is() { return "pn-link-list"; }
    static get originalStyleUrls() {
        return {
            "$": ["pn-link-list.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pn-link-list.css"]
        };
    }
    static get properties() {
        return {
            "heading": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "heading",
                "reflect": false,
                "defaultValue": "null"
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "label",
                "reflect": false,
                "defaultValue": "null"
            },
            "preamble": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "preamble",
                "reflect": false,
                "defaultValue": "null"
            },
            "url": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "url",
                "reflect": false,
                "defaultValue": "null"
            },
            "showMoreLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "show-more-label",
                "reflect": false,
                "defaultValue": "null"
            },
            "showMoreUrl": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "show-more-url",
                "reflect": false,
                "defaultValue": "null"
            }
        };
    }
}
//# sourceMappingURL=pn-link-list.js.map
