/*!
 * (C) Ionic http://ionicframework.com - MIT License
 */
import { Host, h } from "@stencil/core";
import { createColorClasses, hostContext } from "../../utils/theme";
import { getIonTheme } from "../../global/ionic-global";
/**
 * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
 * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
 */
export class Badge {
    getShape() {
        const theme = getIonTheme(this);
        const { shape } = this;
        // TODO(ROU-10777): Remove theme check when shapes are defined for all themes.
        if (theme !== 'ionic') {
            return undefined;
        }
        if (shape === undefined) {
            return 'round';
        }
        return shape;
    }
    getSize() {
        const theme = getIonTheme(this);
        const { size } = this;
        // TODO(FW-6355): Remove theme check when sizes are defined for all themes.
        if (theme !== 'ionic') {
            return undefined;
        }
        if (size === undefined) {
            return 'small';
        }
        return size;
    }
    // The 'subtle' hue is the default for badges containing text or icons
    // The 'bold' hue is used when inside of an avatar, button, tab button,
    // or when the badge is empty (no text or icon).
    getHue() {
        var _a;
        const { hue } = this;
        if (hue !== undefined) {
            return hue;
        }
        const inAvatar = hostContext('ion-avatar', this.el);
        const inButton = hostContext('ion-button', this.el);
        const inTabButton = hostContext('ion-tab-button', this.el);
        const hasContent = ((_a = this.el.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== '' || this.el.querySelector('ion-icon') !== null;
        // Return 'bold' if the badge is inside an avatar, button, tab button,
        // or has no content
        if (inAvatar || inButton || inTabButton || !hasContent) {
            return 'bold';
        }
        // Return 'subtle' if the badge contains visible text or an icon
        return 'subtle';
    }
    render() {
        var _a, _b;
        const hue = this.getHue();
        const shape = this.getShape();
        const size = this.getSize();
        const theme = getIonTheme(this);
        return (h(Host, { key: '4a447df7171ebcf4a649ebde14f0275b26c39c32', class: createColorClasses(this.color, {
                [theme]: true,
                [`badge-${hue}`]: hue !== undefined,
                [`badge-${shape}`]: shape !== undefined,
                [`badge-${size}`]: size !== undefined,
                [`badge-vertical-${this.vertical}`]: this.vertical !== undefined,
                'in-button': hostContext('ion-button', this.el),
                'in-tab-button': hostContext('ion-tab-button', this.el),
                'long-badge': ((_b = (_a = this.el.textContent) === null || _a === void 0 ? void 0 : _a.trim().length) !== null && _b !== void 0 ? _b : 0) > 2,
            }) }, h("slot", { key: '37d692d72315e305b656bb1b7bf44438da2704f7' })));
    }
    static get is() { return "ion-badge"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "ios": ["badge.ios.scss"],
            "md": ["badge.md.scss"],
            "ionic": ["badge.ionic.scss"]
        };
    }
    static get styleUrls() {
        return {
            "ios": ["badge.ios.css"],
            "md": ["badge.md.css"],
            "ionic": ["badge.ionic.css"]
        };
    }
    static get properties() {
        return {
            "color": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "Color",
                    "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
                    "references": {
                        "Color": {
                            "location": "import",
                            "path": "../../interface",
                            "id": "src/interface.d.ts::Color"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics)."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "color"
            },
            "hue": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'bold' | 'subtle'",
                    "resolved": "\"bold\" | \"subtle\" | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Set to `\"bold\"` for a badge with vibrant, bold colors or to `\"subtle\"` for\na badge with muted, subtle colors.\n\nOnly applies to the `ionic` theme."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "hue"
            },
            "shape": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'soft' | 'round | rectangular'",
                    "resolved": "\"round | rectangular\" | \"soft\" | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Set to `\"rectangular\"` for non-rounded corners.\nSet to `\"soft\"` for slightly rounded corners.\nSet to `\"round\"` for fully rounded corners.\n\nDefaults to `\"round\"` for the `ionic` theme, undefined for all other themes."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "shape"
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'small' | 'medium' | 'large'",
                    "resolved": "\"large\" | \"medium\" | \"small\" | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Set to `\"small\"` for a small badge.\nSet to `\"medium\"` for a medium badge.\nSet to `\"large\"` for a large badge, when it is empty (no text or icon).\n\nDefaults to `\"small\"` for the `ionic` theme, undefined for all other themes."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "size"
            },
            "vertical": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'top' | 'bottom'",
                    "resolved": "\"bottom\" | \"top\" | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Set to `\"top\"` to position the badge on top right absolute position of the parent element.\nSet to `\"bottom\"` to position the badge on bottom right absolute position of the parent element."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "vertical"
            }
        };
    }
    static get elementRef() { return "el"; }
}
