/**
 * CTAs (Call To Actions) invite the user to take action.
 * They are used to highlight important content and interactions and are often used in conjunction with other components like cards, modals, and forms.
 *
 * @status new
 * @version 8.0.0
 * @type CSS Only
 */
export class NanoCta {
    host;
    /** The semantic theme of the button. Defaults to primary / brand blue  */
    theme;
    /** Turn on the secondary style. Every theme also has a secondary style */
    secondary;
    /** The size of the button. Defaults to large */
    size;
    /** Show a loading spinner */
    loading;
    /**
     * A predefined icon to show. Defaults to no icon.
     * *note* Will be overruled if a `<nano-icon />` or `<svg />` is detected
     */
    icon;
    /** Predefined styles when displaying a number of CTAs together */
    group;
    componentWillLoad() {
        if (!this.host.querySelector('button, a, div')) {
            const button = document.createElement('button');
            button.classList.add('nano-internal-cta');
            button.type = 'button';
            this.host.childNodes.forEach((node) => {
                button.appendChild(node);
            });
            this.host.appendChild(button);
        }
    }
    static get is() { return "nano-cta"; }
    static get originalStyleUrls() {
        return {
            "$": ["cta.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["cta.css"]
        };
    }
    static get properties() {
        return {
            "theme": {
                "type": "string",
                "attribute": "theme",
                "mutable": false,
                "complexType": {
                    "original": "Color",
                    "resolved": "\"danger\" | \"neutral\" | \"primary\" | \"success\" | \"warning\"",
                    "references": {
                        "Color": {
                            "location": "import",
                            "path": "../../types/shared",
                            "id": "src/types/shared.ts::Color"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The semantic theme of the button. Defaults to primary / brand blue"
                },
                "getter": false,
                "setter": false,
                "reflect": true
            },
            "secondary": {
                "type": "boolean",
                "attribute": "secondary",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Turn on the secondary style. Every theme also has a secondary style"
                },
                "getter": false,
                "setter": false,
                "reflect": true
            },
            "size": {
                "type": "string",
                "attribute": "size",
                "mutable": false,
                "complexType": {
                    "original": "'small' | 'medium' | 'large'",
                    "resolved": "\"large\" | \"medium\" | \"small\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The size of the button. Defaults to large"
                },
                "getter": false,
                "setter": false,
                "reflect": true
            },
            "loading": {
                "type": "boolean",
                "attribute": "loading",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Show a loading spinner"
                },
                "getter": false,
                "setter": false,
                "reflect": true
            },
            "icon": {
                "type": "string",
                "attribute": "icon",
                "mutable": false,
                "complexType": {
                    "original": "| 'false'\n    | 'forward'\n    | 'back'\n    | 'up'\n    | 'down'\n    | 'download'\n    | 'open'",
                    "resolved": "\"back\" | \"down\" | \"download\" | \"false\" | \"forward\" | \"open\" | \"up\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "A predefined icon to show. Defaults to no icon.\n*note* Will be overruled if a `<nano-icon />` or `<svg />` is detected"
                },
                "getter": false,
                "setter": false,
                "reflect": true
            },
            "group": {
                "type": "string",
                "attribute": "group",
                "mutable": false,
                "complexType": {
                    "original": "'balanced' | 'stacked'",
                    "resolved": "\"balanced\" | \"stacked\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Predefined styles when displaying a number of CTAs together"
                },
                "getter": false,
                "setter": false,
                "reflect": true
            }
        };
    }
    static get elementRef() { return "host"; }
}
