import { Host, h } from "@stencil/core";
import Sortable from "sortablejs";
export class PdsSortable {
    constructor() {
        this.border = false;
        this.componentId = undefined;
        this.dividers = false;
        this.handleType = 'row';
    }
    classNames() {
        const classNames = ['pds-sortable'];
        if (this.border) {
            classNames.push('pds-sortable--bordered');
        }
        if (this.dividers) {
            classNames.push('pds-sortable--divided');
        }
        if (this.handleType !== undefined) {
            classNames.push(`pds-sortable--handle-type-${this.handleType}`);
        }
        return classNames.join('  ');
    }
    componentDidLoad() {
        let sortableOptions = {
            animation: 150,
            ghostClass: 'pds-sortable-item--ghost',
            dragClass: 'pds-sortable-item--drag',
            onEnd: (evt) => {
                this.pdsSortableItemMoved.emit(evt);
            },
        };
        if (this.handleType === 'handle') {
            sortableOptions = Object.assign(Object.assign({}, sortableOptions), { handle: '.pds-sortable-item__handle' });
        }
        Sortable.create(this.el, sortableOptions);
    }
    render() {
        return (h(Host, { key: 'e215bbd858767d4c5e5e85bd12352e6a50b7d594', class: this.classNames(), id: this.componentId }, h("slot", { key: 'bd4a58c7ceb78432c77615987e16e979d7240eb4' })));
    }
    static get is() { return "pds-sortable"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() {
        return {
            "$": ["../../global/styles/base.scss", "pds-sortable.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["../../global/styles/base.css", "pds-sortable.css"]
        };
    }
    static get properties() {
        return {
            "border": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "false"
                        }],
                    "text": "Determines whether `sortable` should have a border."
                },
                "attribute": "border",
                "reflect": true,
                "defaultValue": "false"
            },
            "componentId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "A unique identifier used for the sortable container `id` attribute."
                },
                "attribute": "component-id",
                "reflect": false
            },
            "dividers": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Deternines whether `sortable` items should be divided with border."
                },
                "attribute": "dividers",
                "reflect": true,
                "defaultValue": "false"
            },
            "handleType": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'handle' | 'row'",
                    "resolved": "\"handle\" | \"row\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Determines the grabbable area for the `pds-sortable-item`."
                },
                "attribute": "handle-type",
                "reflect": false,
                "defaultValue": "'row'"
            }
        };
    }
    static get events() {
        return [{
                "method": "pdsSortableItemMoved",
                "name": "pdsSortableItemMoved",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Event emitted when a sortable item is moved."
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=pds-sortable.js.map
