import { Host, h } from "@stencil/core";
import Sortable from "sortablejs";
export class PdsSortable {
    constructor() {
        /**
         * Determines whether `sortable` should have a border.
         * @defaultValue false
         */
        this.border = false;
        /**
         * Determines whether or not the sortable is disabled.
         * @defaultValue false
         */
        this.disabled = false;
        /**
         * Determines whether `sortable` items should be divided with border.
         */
        this.dividers = false;
        /**
         * Determines the grabbable area for the `pds-sortable-item`.
         */
        this.handleType = 'row';
    }
    handleDisabledChange() {
        var _a;
        (_a = this.sortableInstance) === null || _a === void 0 ? void 0 : _a.option('disabled', this.disabled);
    }
    classNames() {
        const classNames = ['pds-sortable'];
        if (this.border) {
            classNames.push('pds-sortable--bordered');
        }
        if (this.disabled) {
            classNames.push('pds-sortable--disabled');
        }
        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,
            disabled: this.disabled,
            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' });
        }
        this.sortableInstance = Sortable.create(this.el, sortableOptions);
    }
    render() {
        return (h(Host, { key: '562bfb1ecea0b3a3f246b2e277b71f70d14b854c', class: this.classNames(), id: this.componentId }, h("slot", { key: 'a1ff894a9cd6049e532d2fa744429cec6d97e280' })));
    }
    static get is() { return "pds-sortable"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() {
        return {
            "$": ["pds-sortable.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["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."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "border",
                "defaultValue": "false"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "false"
                        }],
                    "text": "Determines whether or not the sortable is disabled."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "disabled",
                "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."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "component-id"
            },
            "dividers": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Determines whether `sortable` items should be divided with border."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "dividers",
                "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`."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "handle-type",
                "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": "SortableEvent",
                    "resolved": "SortableEvent",
                    "references": {
                        "SortableEvent": {
                            "location": "import",
                            "path": "sortablejs",
                            "id": "../../node_modules/@types/sortablejs/index.d.ts::SortableEvent"
                        }
                    }
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "disabled",
                "methodName": "handleDisabledChange"
            }];
    }
}
//# sourceMappingURL=pds-sortable.js.map
