import { Host, h } from "@stencil/core";
import Movinwords from "../../utils/movinwords";
export class XMovinwords {
    constructor() {
        /**
         * Drawer state of the content
         */
        this.movinInstance = null;
        this.sentence = undefined;
        this.highlight = '';
    }
    /**
     * Watcher hook on sentence change
     */
    watchSentenceHandler() {
        if (this.el) {
            this.el.classList.remove('--v');
            this.movinInstance = new Movinwords({
                el: this.el,
                sentence: this.sentence,
                events: {
                    start: () => {
                        this.onTypingStart.emit();
                    },
                    end: () => {
                        this.onTypingEnd.emit();
                    },
                },
                highlight: {
                    classname: 'highlight',
                    tag: 'strong',
                    words: this.highlight.split(',').map((word) => word.trim()),
                },
            });
            this.movinInstance.start();
        }
    }
    /**
     * On component did loaded hook
     */
    componentDidLoad() {
        this.movinInstance = new Movinwords({
            el: this.el,
            autostart: true,
            sentence: this.sentence,
            events: {
                start: () => {
                    this.onTypingStart.emit();
                },
                end: () => {
                    this.onTypingEnd.emit();
                },
            },
            highlight: {
                classname: 'highlight',
                tag: 'strong',
                words: this.highlight.split(',').map((word) => word.trim()),
            },
        });
    }
    /**
     * Render component
     */
    render() {
        return h(Host, { key: '58cd8f4a184f44dcde6f7ab064d1884de48c9187' }, h("slot", { key: '3cfbc449e309943d38d20c8ffa1697ab50c38161' }));
    }
    static get is() { return "x-movinwords"; }
    static get originalStyleUrls() {
        return {
            "$": ["./style.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["style.css"]
        };
    }
    static get properties() {
        return {
            "sentence": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Element sentence to animate"
                },
                "attribute": "sentence",
                "reflect": false
            },
            "highlight": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Words to highlight"
                },
                "attribute": "highlight",
                "reflect": false,
                "defaultValue": "''"
            }
        };
    }
    static get events() {
        return [{
                "method": "onTypingStart",
                "name": "typingstart",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "On animation start event"
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "onTypingEnd",
                "name": "typingend",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "On animation end event"
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "sentence",
                "methodName": "watchSentenceHandler"
            }];
    }
}
