class Greeting extends Craft.UI.View {
    constructor() {
        super();
        this.views = {
            local: new Local(),
            world: new World()
        };
    }
    viewDidLoad(callback) {
        this.appendView({
            id: "whom",
            component: this.views.local
        });
        if (callback) { callback(); }
    }
    greet() {
        this.replaceView({
            id: "whom",
            component: this.views.world
        });
    }
    style(componentId) {
        return `
            .container { display: flex; flex-direction: row; }
        `;
    }
    template(componentId) {
        return `
            <div class="root">
                <div class="container>
                    <div>Hello</div>
                    <div id="whom"></div>
                </div>
                <button onclick="${componentId}.greet()">Greet</button>
            </div>
        `;
    }
}

class HelloPlace extends Craft.UI.View {
    constructor() {
        super();
        this.data = { place: "Any Where" };
    }
    style(componentId) {
        return `
            .msg { color: blue; }
        `;
    }
    template(componentId) {
        return `
            <div class="root">
                <span class="msg">${this.data.place}<\span>
            </div>
        `;
    }
}

class Local extends HelloPlace {
    constructor() {
        super();
        this.data = { place: "Local" };
    }
}

class World extends HelloPlace {
    constructor() {
        super();
        this.data = { place: "World!" };
    }
    style(componentId) {
        return super.style(componentId) + `
            .msg { color: red; }
        `;
    }
}