export class EdelLinklistItemComponent {
    constructor() {
        this.label = null;
        this.icon = null;
        this.note = null;
        this.description = null;
        this.on = false;
        this.class = 'linklist-item';
    }
    didChange(nextClass, previousClass) {
        if (hasActiveClass(nextClass)) {
            this.on = true;
        }
        else if (hasActiveClass(previousClass)) {
            this.on = false;
        }
    }
    render() {
        return (h("a", { class: `linklist-anchor ${this.on ? 'linklist-anchor--on' : ''}`, onClick: event => this.handleClick(event) },
            this.getIcon(this.icon),
            h("span", { class: "linklist-anchor-label" }, this.label),
            this.getDescription(this.description),
            this.getNote(this.note)));
    }
    getIcon(content) {
        return content == null ? null : (h("span", { class: "linklist-anchor-icon" },
            h("i", { class: `fas fa-${content}` })));
    }
    getDescription(content) {
        return content == null ? null : (h("span", { class: "linklist-anchor-description" }, content));
    }
    getNote(content) {
        return content == null ? null : (h("span", { class: "linklist-anchor-note" }, content));
    }
    handleClick(event) {
        this.emit.emit(event);
    }
    handleKeyDown(event) {
        if (event.which !== 13)
            return;
        this.handleClick();
    }
    static get is() { return "edel-linklist-item"; }
    static get properties() { return {
        "class": {
            "type": String,
            "attr": "class",
            "reflectToAttr": true,
            "mutable": true,
            "watchCallbacks": ["didChange"]
        },
        "description": {
            "type": String,
            "attr": "description"
        },
        "icon": {
            "type": String,
            "attr": "icon"
        },
        "label": {
            "type": String,
            "attr": "label"
        },
        "note": {
            "type": String,
            "attr": "note"
        },
        "on": {
            "type": Boolean,
            "attr": "on",
            "reflectToAttr": true,
            "mutable": true
        }
    }; }
    static get events() { return [{
            "name": "emit",
            "method": "emit",
            "bubbles": true,
            "cancelable": true,
            "composed": true
        }]; }
    static get listeners() { return [{
            "name": "keydown",
            "method": "handleKeyDown"
        }]; }
    static get style() { return "/**style-placeholder:edel-linklist-item:**/"; }
}
function hasActiveClass(allClasses) {
    if (allClasses == null)
        return false;
    const theme = 'active';
    if (typeof allClasses === 'string') {
        return allClasses.split(' ').indexOf(theme) !== -1;
    }
    else {
        return allClasses[theme] || false;
    }
}
