IntelliJ Idea: If filename doesn't match the custom element name, designer can't open a .ts file

[OlliTietavainenVaadin]

Steps to reproduce

• Create a file named custom-element.ts in the frontend folder of a Vaadin 14.5.0.alpha3 project
• Insert the following content:

import {LitElement, html} from 'lit-element';
import '@vaadin/vaadin-text-field/vaadin-text-field.js';
import '@vaadin/vaadin-button/vaadin-button.js';

class HelloWorld extends LitElement {

    render() {
        return html`
            <div>
                <vaadin-text-field id="firstInput"></vaadin-text-field>
                <vaadin-button id="helloButton">Click me!</vaadin-button>
            </div>`;
    }
}

customElements.define('hello-world', HelloWorld);

Actual behavior

While the file gets the "Designer" icon, the "Open in Vaadin Designer" button doesn't appear.
If you rename the class to CustomElement and the tag to custom-element, and close and reopen the editor, the Open in Vaadin Designer button appears.

Expected behavior

Either the file can be opened up in Designer, or there's an error indicating that the tag / customelement name must match the filename.

IDE, Designer and OS version

IntelliJ Idea
Designer version: 4.6.2
OS: Windows 10

[tanbt]

This case may happen when creating the template manually (i.e when TS template hasn't been supported in "New Vaadin 10+ Design" dialog yet #2382), when the template name or content doesn't match LitElement syntaxes, the template isn't recognized by Designer.

I also saw a case when VSCode formats a TS/Lit template from Starter and Designer also can't recognize it anymore.

I would like to follow Vaadin 8 practice: opening an invalid design will show a dialog that indicating the error.

[anssit]

Tested with a Vaadin 14.6.7 project from Vaadin Start and Designer 4.6.7. Could not reproduce the issue. Closing.