/*!
 * (C) Ionic http://ionicframework.com - MIT License
 */
import { Host, h } from "@stencil/core";
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 Avatar {
    constructor() {
        /**
         * If `true`, the user cannot interact with the avatar.
         */
        this.disabled = false;
    }
    get hasImage() {
        return !!this.el.querySelector('ion-img') || !!this.el.querySelector('img');
    }
    get hasIcon() {
        return !!this.el.querySelector('ion-icon');
    }
    getSize() {
        const theme = getIonTheme(this);
        const { size } = this;
        // TODO(ROU-10752): Remove theme check when sizes are defined for all themes.
        if (theme !== 'ionic') {
            return undefined;
        }
        if (size === undefined) {
            return 'medium';
        }
        return size;
    }
    getShape() {
        const theme = getIonTheme(this);
        const { shape } = this;
        // TODO(ROU-10755): Remove theme check when shapes are defined for all themes.
        if (theme !== 'ionic') {
            return undefined;
        }
        if (shape === undefined) {
            return 'round';
        }
        return shape;
    }
    render() {
        const { hasImage, hasIcon, disabled } = this;
        const theme = getIonTheme(this);
        const size = this.getSize();
        const shape = this.getShape();
        return (h(Host, { key: '78ff5863d80f0e334b679a1ba530008dee4e0e69', class: {
                [theme]: true,
                [`avatar-${size}`]: size !== undefined,
                [`avatar-${shape}`]: shape !== undefined,
                [`avatar-image`]: hasImage,
                [`avatar-icon`]: hasIcon,
                [`avatar-disabled`]: disabled,
            } }, h("slot", { key: '7f82734af2338a2afca67e1c600c64352a52e8a2' })));
    }
    static get is() { return "ion-avatar"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "ios": ["avatar.ios.scss"],
            "md": ["avatar.md.scss"],
            "ionic": ["avatar.ionic.scss"]
        };
    }
    static get styleUrls() {
        return {
            "ios": ["avatar.ios.css"],
            "md": ["avatar.md.css"],
            "ionic": ["avatar.ionic.css"]
        };
    }
    static get properties() {
        return {
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'",
                    "resolved": "\"large\" | \"medium\" | \"small\" | \"xlarge\" | \"xsmall\" | \"xxsmall\" | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Set to `\"xxsmall\"` for the smallest size.\nSet to `\"xsmall\"` for a very small size.\nSet to `\"small\"` for a compact size.\nSet to `\"medium\"` for the default height and width.\nSet to `\"large\"` for a larger size.\nSet to `\"xlarge\"` for the largest dimensions.\n\nDefaults to `\"medium\"` for the `ionic` theme, undefined for all other themes."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "size"
            },
            "shape": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'soft' | 'round' | 'rectangular'",
                    "resolved": "\"rectangular\" | \"round\" | \"soft\" | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Set to `\"soft\"` for an avatar with slightly rounded corners,\n`\"round\"` for an avatar with fully rounded corners, or `\"rectangular\"`\nfor an avatar without rounded corners.\n\nDefaults to `\"round\"` for the `ionic` theme, undefined for all other themes."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "shape"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the user cannot interact with the avatar."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "disabled",
                "defaultValue": "false"
            }
        };
    }
    static get elementRef() { return "el"; }
}
