import { h } from "../../utils/renderer";
/**
 * Tags provide a quick visual clue about the content, and help to organise and group content based on shared attributes.
 *
 * @status new
 * @version 8.0.0
 * @type CSS Only
 * @supportedTags a, button
 */
export class NanoTag {
    /**
     * Whether the tag is closable or not.
     * If true, a close button will be displayed.
     */
    closable = false;
    /**
     * The size of the tag.
     */
    size = 'regular';
    /**
     * If true, the tag will have a different background color.
     */
    selected = false;
    el;
    /**
     * Fires when close button is clicked
     */
    nanoClose;
    onKeyDown = (e) => {
        switch (e.key) {
            case 'Enter':
            case ' ':
                e.preventDefault();
                this.close();
                break;
        }
    };
    handleClick = (_e) => {
        this.close();
    };
    close() {
        this.nanoClose.emit();
    }
    containsAnchor = () => !!this.el.querySelector('a');
    render() {
        return this.closable && !this.containsAnchor() ? ([
            h("slot", null),
            h("nano-icon-button", { label: "Close", "icon-name": "light/xmark-large", onKeyDown: this.onKeyDown, onClick: this.handleClick }),
        ]) : (h("slot", null));
    }
    static get is() { return "nano-tag"; }
    static get originalStyleUrls() {
        return {
            "$": ["tag.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["tag.css"]
        };
    }
    static get properties() {
        return {
            "closable": {
                "type": "boolean",
                "attribute": "closable",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Whether the tag is closable or not.\nIf true, a close button will be displayed."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "defaultValue": "false"
            },
            "size": {
                "type": "string",
                "attribute": "size",
                "mutable": false,
                "complexType": {
                    "original": "'regular' | 'large'",
                    "resolved": "\"large\" | \"regular\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The size of the tag."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "defaultValue": "'regular'"
            },
            "selected": {
                "type": "boolean",
                "attribute": "selected",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If true, the tag will have a different background color."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "defaultValue": "false"
            }
        };
    }
    static get events() {
        return [{
                "method": "nanoClose",
                "name": "nanoClose",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Fires when close button is clicked"
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
}
