/**
 * @fileoverview They're red, they're white, they're brown,
 * they get that way under-ground...
 *
 * This defines a custom module, which we'll import in main.ts to include in
 * the LIT app.
 */

// tslint:disable:no-new-decorators
import {customElement} from 'lit/decorators';
import { html} from 'lit';
import {styleMap} from 'lit/directives/style-map';

import {LitModule} from '../../client/core/lit_module';
import {ModelInfoMap, Spec} from '../../client/lib/types';

/** Custom LIT module. Delicious baked, mashed, or fried. */
@customElement('potato-module')
export class PotatoModule extends LitModule {
  static override title = 'Potato';
  static override numCols = 4;
  static override template = () => {
    return html`<potato-module></potato-module>`;
  };

  override render() {
    const style = styleMap({'width': '100%', 'height': '100%'});
    // clang-format off
    return html`
      <a href="https://potato.io/">
        <img src="static/potato.svg" style=${style}>
      </a>`;
    // clang-format on
  }

  static override shouldDisplayModule(modelSpecs: ModelInfoMap, datasetSpec: Spec) {
    return true;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'potato-module': PotatoModule;
  }
}

/**
 * @fileoverview They're red, they're white, they're brown,
 * they get that way under-ground...
 *
 * This defines a custom module, which we'll import in main.ts to include in
 * the LIT app.
 */

// tslint:disable:no-new-decorators
import {customElement} from 'lit/decorators';
import { html} from 'lit';
import {styleMap} from 'lit/directives/style-map';

import {LitModule} from '../../client/core/lit_module';
import {ModelInfoMap, Spec} from '../../client/lib/types';

/** Custom LIT module. Delicious baked, mashed, or fried. */
@customElement('potato-module')
export class PotatoModule extends LitModule {
  static title = 'Potato';
  static override numCols = 4;
  static template = () => {
    return html`<potato-module></potato-module>`;
  };

  override render() {
    const style = styleMap({'width': '100%', 'height': '100%'});
    // clang-format off
    return html`
      <a href="https://potato.io/">
        <img src="static/potato.svg" style=${style}>
      </a>`;
    // clang-format on
  }

  static shouldDisplayModule(modelSpecs: ModelInfoMap, datasetSpec: Spec) {
    return true;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'potato-module': PotatoModule;
  }
}

--- 
+++ 
@@ -17,9 +17,9 @@
 /** Custom LIT module. Delicious baked, mashed, or fried. */
 @customElement('potato-module')
 export class PotatoModule extends LitModule {
-  static title = 'Potato';
+  static override title = 'Potato';
   static override numCols = 4;
-  static template = () => {
+  static override template = () => {
     return html`<potato-module></potato-module>`;
   };
 
@@ -33,7 +33,7 @@
     // clang-format on
   }
 
-  static shouldDisplayModule(modelSpecs: ModelInfoMap, datasetSpec: Spec) {
+  static override shouldDisplayModule(modelSpecs: ModelInfoMap, datasetSpec: Spec) {
     return true;
   }
 }
Add the override keyword to class members in TypeScript files

TypeScript’s override keyword (added in 4.3) works similarly to @Override in Java. It makes the intention clear and ensures there is actually a member in the base class with the same name. This helps with things like:
- Typos in the overriding member name
- Remember to rename members in sub classes when renaming an overridden member in a base class

class Parent {
  foo() {}
}

class Child extends Parent {
  override bar() {}
  //       ~~~ This member cannot have an 'override' modifier because it is not declared in the base class 'Parent'.
}

This change will not cause a runtime change: the override keyword is not present in the resulting JavaScript.

PiperOrigin-RevId: 405900549
