import { h, Host } from '@stencil/core';
import { Sort, SortDirection } from '../sort';
export class DatatableHeaderColumn {
    constructor() {
        this.align = 'start';
        this.direction = SortDirection.ASC;
    }
    sortData() {
        if (this.sortable) {
            this.sort.emit(new Sort(this.value, this.direction));
            this.direction = this.direction === SortDirection.DESC ? SortDirection.ASC : SortDirection.DESC;
        }
    }
    getColumnClasses() {
        return {
            'header-column': true,
            'non-sortable-column': !this.sortable,
            'sortable-column': this.sortable,
            'sorted': this.sortable && this.sorted,
        };
    }
    render() {
        return (h(Host, { class: {
                'align-start': this.align === 'start',
                'align-end': this.align === 'end',
                'align-center': this.align === 'center',
                'sortable': this.sortable
            }, style: {
                'flex': this.width ? `0 0 ${this.width}` : null,
                'width': this.width ? this.width : null
            } },
            h("div", { class: this.getColumnClasses(), title: this.description ? this.description : this.label, onClick: () => this.sortData() },
                h("div", { class: "label" }, this.label),
                this.sortable && h("materials-icon", { class: "sort-direction", name: this.direction === SortDirection.DESC ? 'arrow_upward' : 'arrow_downward' }))));
    }
    static get is() { return "materials-datatable-header-column"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["datatable-header-column.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["datatable-header-column.css"]
    }; }
    static get properties() { return {
        "label": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "label",
            "reflect": false
        },
        "value": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "value",
            "reflect": false
        },
        "description": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "description",
            "reflect": false
        },
        "sortable": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "sortable",
            "reflect": false
        },
        "sorted": {
            "type": "boolean",
            "mutable": true,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "sorted",
            "reflect": false
        },
        "align": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "'start' | 'end' | 'center'",
                "resolved": "\"center\" | \"end\" | \"start\"",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "align",
            "reflect": false,
            "defaultValue": "'start'"
        },
        "width": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "width",
            "reflect": false
        }
    }; }
    static get states() { return {
        "direction": {}
    }; }
    static get events() { return [{
            "method": "sort",
            "name": "sort",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "Sort",
                "resolved": "Sort",
                "references": {
                    "Sort": {
                        "location": "import",
                        "path": "../sort"
                    }
                }
            }
        }]; }
    static get elementRef() { return "host"; }
}
