import { Host, h } from "@stencil/core";
/**
 * A split button is a button with two components:
 * a button and a side-menu attached to it.
 *
 * Clicking on the button runs a default action,
 * and clicking on the arrow opens up a list of other possible actions.
 *
 * :::warning
 * - Never use a split button for navigation purposes, such as going to next page.
 * The button should only be used for performing commands!
 * - Never use this component instead of a Select or Menu component!
 * :::
 *
 * @exampleComponent limel-example-split-button-basic
 * @exampleComponent limel-example-split-button-loading
 * @exampleComponent limel-example-split-button-repeat-default-command
 */
export class SplitButton {
    constructor() {
        /**
         * Set to `true` to make the button primary.
         */
        this.primary = false;
        /**
         * Set to `true` to disable the button.
         */
        this.disabled = false;
        /**
         * Set to `true` to put the button in the `loading` state.
         * This also disables the button.
         */
        this.loading = false;
        /**
         * Set to `true` to indicate failure instead of success when the button is
         * no longer in the `loading` state.
         */
        this.loadingFailed = false;
        /**
         * A list of items and separators to show in the menu.
         */
        this.items = [];
        this.renderMenu = () => {
            if (this.items.length === 0) {
                return;
            }
            return (h("limel-menu", { class: {
                    primary: this.primary,
                }, disabled: this.disabled || this.loading, items: this.items, openDirection: "bottom" }, h("button", { class: "menu-trigger", slot: "trigger", disabled: this.disabled }, "\u22EE")));
        };
        this.filterClickWhenDisabled = (e) => {
            if (this.disabled) {
                e.preventDefault();
            }
        };
    }
    render() {
        return (h(Host, { key: '4d795d0bc0bb80a5b489bb60af7962ae0f527943', class: {
                'has-menu': this.items.length > 0,
            }, onClick: this.filterClickWhenDisabled }, h("limel-button", { key: '85b94eef97a460419273c3e09a8b4f27d75e7f8b', label: this.label, primary: this.primary, icon: this.icon, disabled: this.disabled, loading: this.loading, loadingFailed: this.loadingFailed }), this.renderMenu()));
    }
    static get is() { return "limel-split-button"; }
    static get encapsulation() { return "shadow"; }
    static get delegatesFocus() { return true; }
    static get originalStyleUrls() {
        return {
            "$": ["split-button.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["split-button.css"]
        };
    }
    static get properties() {
        return {
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The text to show on the default action part of the button."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "label"
            },
            "primary": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Set to `true` to make the button primary."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "primary",
                "defaultValue": "false"
            },
            "icon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Set icon for the button"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "icon"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Set to `true` to disable the button."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "disabled",
                "defaultValue": "false"
            },
            "loading": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Set to `true` to put the button in the `loading` state.\nThis also disables the button."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "loading",
                "defaultValue": "false"
            },
            "loadingFailed": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Set to `true` to indicate failure instead of success when the button is\nno longer in the `loading` state."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "loading-failed",
                "defaultValue": "false"
            },
            "items": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "Array<MenuItem | ListSeparator>",
                    "resolved": "(ListSeparator | MenuItem<any>)[]",
                    "references": {
                        "Array": {
                            "location": "global",
                            "id": "global::Array"
                        },
                        "MenuItem": {
                            "location": "import",
                            "path": "../menu/menu.types",
                            "id": "src/components/menu/menu.types.ts::MenuItem",
                            "referenceLocation": "MenuItem"
                        },
                        "ListSeparator": {
                            "location": "import",
                            "path": "../list-item/list-item.types",
                            "id": "src/components/list-item/list-item.types.ts::ListSeparator",
                            "referenceLocation": "ListSeparator"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "A list of items and separators to show in the menu."
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[]"
            }
        };
    }
    static get events() {
        return [{
                "method": "select",
                "name": "select",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Is emitted when a menu item is selected."
                },
                "complexType": {
                    "original": "MenuItem",
                    "resolved": "MenuItem<any>",
                    "references": {
                        "MenuItem": {
                            "location": "import",
                            "path": "../menu/menu.types",
                            "id": "src/components/menu/menu.types.ts::MenuItem",
                            "referenceLocation": "MenuItem"
                        }
                    }
                }
            }];
    }
}
