/*!
 * Built with Stencil
 * By PostNord.
 */
import { h, Host } from "@stencil/core";
/** The `pn-tag` is a non-interactive visual marker designed to emphasize important aspects of an item, such as its status. */
export class PnTag {
    /** The label of the tag. */
    label;
    /**
     * Select icon from out `pn-design-assets` list. Works with any SVG content.
     *
     * **Please note**: Can not be used with the `xsmall` prop due to the small size.
     *
     * @see {@link https://portal.postnord.com/web-components/?path=/docs/docs-assets--docs Get started with PostNord assets.}
     */
    icon;
    /** Set tag appearance: `discrete`, `positive`, `warning` & `error`. @category Visual */
    appearance = '';
    /**
     * Set darker background-color on the tag.
     *
     * This is intended for better tag visibility on colored background.
     *
     * @category Visual
     * @deprecated Will be removed in v8.0.0
     */
    dark = false;
    /** Set larger tag. @category Size */
    large = false;
    /** Set smaller tag. @category Size */
    small = false;
    /** Set extra small tag. @since v7.11.0 @category Size */
    xsmall = false;
    componentWillRender() {
        if (!!this.icon && this.xsmall)
            console.warn(`pn-tag: Icon was not rendered because tag size is set to xsmall`);
    }
    showIcon() {
        return !!this.icon && !this.xsmall;
    }
    render() {
        return (h(Host, { key: '25baf496ed00dccf72f5eb7cb8f8623814c67452' }, h("div", { key: 'beee7ac3dc693e1c8cb5653e2fce3af01566c4e9', class: "pn-tag", "data-appearance": this.appearance, "data-icon": !!this.icon, "data-dark": this.dark, "data-small": this.small, "data-xsmall": this.xsmall, "data-large": this.large }, this.showIcon() && h("pn-icon", { key: '64f9df4e0906c8897045a08edce51f8015a1be56', icon: this.icon }), h("span", { key: 'a43a26db7b5e7b28eb49f8ac76eab9ebd8b7ee25', class: "pn-tag-label" }, this.label))));
    }
    static get is() { return "pn-tag"; }
    static get originalStyleUrls() {
        return {
            "$": ["pn-tag.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pn-tag.css"]
        };
    }
    static get properties() {
        return {
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The label of the tag."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "label"
            },
            "icon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "see",
                            "text": "{@link https://portal.postnord.com/web-components/?path=/docs/docs-assets--docs Get started with PostNord assets.}"
                        }],
                    "text": "Select icon from out `pn-design-assets` list. Works with any SVG content.\n\n**Please note**: Can not be used with the `xsmall` prop due to the small size."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "icon"
            },
            "appearance": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'' | 'discrete' | 'positive' | 'warning' | 'error'",
                    "resolved": "\"\" | \"discrete\" | \"error\" | \"positive\" | \"warning\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "Visual"
                        }],
                    "text": "Set tag appearance: `discrete`, `positive`, `warning` & `error`."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "appearance",
                "defaultValue": "''"
            },
            "dark": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "Visual"
                        }, {
                            "name": "deprecated",
                            "text": "Will be removed in v8.0.0"
                        }],
                    "text": "Set darker background-color on the tag.\n\nThis is intended for better tag visibility on colored background."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "dark",
                "defaultValue": "false"
            },
            "large": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "Size"
                        }],
                    "text": "Set larger tag."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "large",
                "defaultValue": "false"
            },
            "small": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "Size"
                        }],
                    "text": "Set smaller tag."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "small",
                "defaultValue": "false"
            },
            "xsmall": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "since",
                            "text": "v7.11.0"
                        }, {
                            "name": "category",
                            "text": "Size"
                        }],
                    "text": "Set extra small tag."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "xsmall",
                "defaultValue": "false"
            }
        };
    }
}
