import { h, Host } from "@stencil/core";
/**
 * A good design is self-explanatory! However, sometimes concepts are
 * too complex to understand, no matter how well-designed a user interface is.
 * In such cases, contextual help can be a great way to provide users with
 * help precisely where and when users need it.
 *
 * In app interface design, providing contextual help emerges as a viable practice
 * for enhancing user experience and usability.
 * Contextual help serves as a quick-to-access guiding,
 * empowering users to more easily understand and navigate through
 * the intricacies of an application.
 *
 * Using this component designers empower users to grasp the functionality
 * of an app more effortlessly, minimizes the learning curve,
 * transforming complex features into accessible opportunities for exploration.
 *
 * @exampleComponent limel-example-help-basic
 * @exampleComponent limel-example-read-more
 * @exampleComponent limel-example-open-direction
 * @exampleComponent limel-example-placement
 */
export class HelpComponent {
    constructor() {
        /**
         * {@inheritdoc Help.trigger}
         */
        this.trigger = '?';
        /**
         * {@inheritdoc Help.openDirection}
         */
        this.openDirection = 'top-start';
        this.isOpen = false;
        this.openPopover = (event) => {
            event.stopPropagation();
            this.isOpen = true;
        };
        this.onPopoverClose = (event) => {
            event.stopPropagation();
            this.isOpen = false;
        };
    }
    render() {
        return (h(Host, { key: 'a52d9b4c220e21005011449735b97599cffb542e' }, h("limel-popover", { key: '8b6690894351ec32f5b982ca5d3aeac7300f5576', open: this.isOpen, onClose: this.onPopoverClose, openDirection: this.openDirection }, h("button", { key: '98e5dc4abcff54df74b02c737e4889e17639ddc6', slot: "trigger", type: "button", onClick: this.openPopover, class: {
                'is-open': this.isOpen,
            } }, this.trigger), h("limel-help-content", { key: '10b2d483aa459403b3d922add805bf6f64ae66e3', value: this.value, readMoreLink: this.readMoreLink }))));
    }
    static get is() { return "limel-help"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["help.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["help.css"]
        };
    }
    static get properties() {
        return {
            "value": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "{@inheritdoc Help.value}"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "value"
            },
            "trigger": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "{@inheritdoc Help.trigger}"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "trigger",
                "defaultValue": "'?'"
            },
            "readMoreLink": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "Link",
                    "resolved": "Link",
                    "references": {
                        "Link": {
                            "location": "import",
                            "path": "../../global/shared-types/link.types",
                            "id": "src/global/shared-types/link.types.ts::Link",
                            "referenceLocation": "Link"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "{@inheritdoc Help.readMoreLink}"
                },
                "getter": false,
                "setter": false
            },
            "openDirection": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "OpenDirection",
                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
                    "references": {
                        "OpenDirection": {
                            "location": "import",
                            "path": "../menu/menu.types",
                            "id": "src/components/menu/menu.types.ts::OpenDirection",
                            "referenceLocation": "OpenDirection"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "{@inheritdoc Help.openDirection}"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "open-direction",
                "defaultValue": "'top-start'"
            }
        };
    }
    static get states() {
        return {
            "isOpen": {}
        };
    }
}
