/*!
 * (C) Ionic http://ionicframework.com - MIT License
 */
import { Host, h } from "@stencil/core";
import { printIonWarning } from "../../utils/logging/index";
import { createColorClasses } 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 Chip {
    constructor() {
        /**
         * Display an outline style button.
         */
        this.outline = false;
        /**
         * If `true`, the user cannot interact with the chip.
         */
        this.disabled = false;
        /**
         * Set to `"bold"` for a chip with vibrant, bold colors or to `"subtle"` for
         * a chip with muted, subtle colors.
         *
         * Only applies to the `ionic` theme.
         */
        this.hue = 'subtle';
    }
    /**
     * Set the shape based on the theme
     */
    getShape() {
        const theme = getIonTheme(this);
        const { shape } = this;
        if (shape === undefined) {
            return theme === 'ionic' ? 'round' : 'soft';
        }
        return shape;
    }
    getSize() {
        const theme = getIonTheme(this);
        const { size } = this;
        if (theme === 'ionic') {
            return size !== undefined ? size : 'large';
            // TODO(ROU-10695): remove the size !== undefined when we add support for
            // the `ios` and `md` themes.
        }
        else if (size !== undefined) {
            printIonWarning(`The "${size}" size is not supported in the ${theme} theme.`);
        }
        return undefined;
    }
    render() {
        const { hue } = this;
        const theme = getIonTheme(this);
        const size = this.getSize();
        const shape = this.getShape();
        return (h(Host, { key: 'ec10528929fb43fcae7d2d7c9cc52bcf67d9823e', "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
                [theme]: true,
                [`chip-${shape}`]: true,
                'chip-outline': this.outline,
                'chip-disabled': this.disabled,
                'ion-activatable': true,
                'ion-focusable': !this.disabled,
                [`chip-${size}`]: size !== undefined,
                [`chip-${hue}`]: hue !== undefined,
            }) }, h("slot", { key: 'c88e9a90b9de62fded05d4323c5b4f86f2f3e96d' }), theme === 'md' && h("ion-ripple-effect", { key: 'f0395345064db0e02cbc886386b07d0d01cb02be' })));
    }
    static get is() { return "ion-chip"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "ios": ["chip.ios.scss"],
            "md": ["chip.md.scss"],
            "ionic": ["chip.ionic.scss"]
        };
    }
    static get styleUrls() {
        return {
            "ios": ["chip.ios.css"],
            "md": ["chip.md.css"],
            "ionic": ["chip.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"
            },
            "outline": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Display an outline style button."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "outline",
                "defaultValue": "false"
            },
            "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 chip."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "disabled",
                "defaultValue": "false"
            },
            "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 chip with vibrant, bold colors or to `\"subtle\"` for\na chip with muted, subtle colors.\n\nOnly applies to the `ionic` theme."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "hue",
                "defaultValue": "'subtle'"
            },
            "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 a chip with slightly rounded corners, `\"round\"` for a chip with fully\nrounded corners, or `\"rectangular\"` for a chip without rounded corners.\nDefaults to `\"round\"` for the `\"ionic\"` theme and `\"soft\"` for all other themes."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "shape"
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'small' | 'large'",
                    "resolved": "\"large\" | \"small\" | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Set to `\"small\"` for a chip with less height and padding.\n\nDefaults to `\"large\"` for the ionic theme, and  undefined for all other themes."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "size"
            }
        };
    }
}
