replace lit-element with lit

Author: daniellacosse

package-lock.json

@@ -49,7 +49,11 @@
     "google-auth-library": "^8.0.2",
     "intl-messageformat": "^7",
     "jsonic": "^0.3.1",
+<<<<<<< Updated upstream
     "lit-element": "^2.3.1",
+=======
+    "lit": "^3.1.1",
+>>>>>>> Stashed changes
     "node-forge": "^1.3.1",
     "request": "^2.87.0",
     "web-animations-js": "^2.3.1"

src/server_manager/package.json

@@ -26,7 +26,8 @@ import '@polymer/paper-checkbox/paper-checkbox';
 
 import {PaperCheckboxElement} from '@polymer/paper-checkbox/paper-checkbox';
 import IntlMessageFormat from 'intl-messageformat';
-import {css, customElement, html, LitElement, property} from 'lit-element';
+import {css, html, LitElement} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
 
 import * as gcp from '../../model/gcp';
 import {FakeManagedServer, FakeGcpAccount} from '../testing/models';
@@ -101,7 +102,7 @@ export class TestApp extends LitElement {
   @property({type: String}) gcpRefreshToken = '';
   @property({type: Boolean}) gcpAccountHasBillingAccounts = false;
 
-  static get styles() {
+  static get css() {
     return [
       COMMON_STYLES,
       css`

src/server_manager/web_app/gallery_app/main.ts

@@ -20,8 +20,9 @@ import '@polymer/paper-item/paper-item';
 import './ui_components/outline-step-view';
 import './ui_components/outline-region-picker-step';
 
-import {css, customElement, html, internalProperty, LitElement, property} from 'lit-element';
-import {unsafeHTML} from 'lit-html/directives/unsafe-html';
+import {css, html, LitElement} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {unsafeHTML} from 'lit/directives/unsafe-html.js';
 
 import {AppRoot} from './ui_components/app-root';
 import {BillingAccount, Project, Zone, Account} from '../model/gcp';
@@ -35,18 +36,18 @@ import {CloudLocation} from '../model/location';
 export class GcpCreateServerApp extends LitElement {
   @property({type: Function}) localize: (msgId: string, ...params: string[]) => string;
   @property({type: String}) language: string;
-  @internalProperty() private currentPage = '';
-  @internalProperty() private selectedProjectId = '';
-  @internalProperty() private selectedBillingAccountId = '';
-  @internalProperty() private isProjectBeingCreated = false;
+  @property() private currentPage = '';
+  @property() private selectedProjectId = '';
+  @property() private selectedBillingAccountId = '';
+  @property() private isProjectBeingCreated = false;
 
   private account: GcpAccount;
   private project: Project;
   private billingAccounts: BillingAccount[] = [];
   private regionPicker: OutlineRegionPicker;
   private billingAccountsRefreshLoop: number = null;
 
-  static get styles() {
+  static get css() {
     return [
       COMMON_STYLES,
       css`

src/server_manager/web_app/outline-gcp-create-server-app.ts

@@ -15,7 +15,7 @@
 */
 
 import {html} from '@polymer/polymer/lib/utils/html-tag';
-import {unsafeCSS} from 'lit-element';
+import {unsafeCSS} from 'lit';
 
 // Polymer style module to share styles between steps
 // https://polymer-library.polymer-project.org/3.0/docs/devguide/style-shadow-dom#share-styles-between-elements

src/server_manager/web_app/ui_components/cloud-install-styles.ts

@@ -16,15 +16,16 @@ import '@polymer/polymer/polymer-legacy';
 import '@polymer/iron-pages/iron-pages';
 import './outline-step-view';
 
-import {css, customElement, html, LitElement, property} from 'lit-element';
+import {css, html, LitElement} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
 import {COMMON_STYLES} from '../ui_components/cloud-install-styles';
 
 @customElement('outline-gcp-oauth-step')
 export class GcpConnectAccountApp extends LitElement {
   @property({type: Function}) onCancel: Function;
   @property({type: Function}) localize: Function;
 
-  static get styles() {
+  static get css() {
     return [
       COMMON_STYLES,
       css`

src/server_manager/web_app/ui_components/outline-gcp-oauth-step.ts

@@ -25,7 +25,8 @@ import '@polymer/paper-listbox/paper-listbox';
 import {PaperDialogElement} from '@polymer/paper-dialog/paper-dialog';
 import {PaperInputElement} from '@polymer/paper-input/paper-input';
 import {PaperListboxElement} from '@polymer/paper-listbox/paper-listbox';
-import {css, customElement, html, internalProperty, LitElement, property} from 'lit-element';
+import {css, html, LitElement} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
 
 import {
   bytesToDisplayDataAmount,
@@ -46,7 +47,7 @@ import {COMMON_STYLES} from './cloud-install-styles';
  */
 @customElement('outline-per-key-data-limit-dialog')
 export class OutlinePerKeyDataLimitDialog extends LitElement {
-  static get styles() {
+  static get css() {
     return [
       COMMON_STYLES,
       css`
@@ -132,21 +133,21 @@ export class OutlinePerKeyDataLimitDialog extends LitElement {
   /**
    * @member _keyName The displayed name of the UI access key representing the key we're working on.
    */
-  @internalProperty() _keyName = '';
+  @property() private _keyName = '';
   /**
    * @member _activeDataLimitBytes The data limit, if it exists, on the access key we're working on.
    */
-  @internalProperty() _initialDataLimitBytes: number = undefined;
+  @property() private _initialDataLimitBytes: number = undefined;
   /**
    * @member _showDataLimit Whether the menu for inputting the data limit should be shown.
    * Controlled by the checkbox.
    */
-  @internalProperty() _showDataLimit = false;
+  @property() private _showDataLimit = false;
   /**
    * @member _enableSave Whether the save button is enabled.  Controlled by the validator on the
    * input.
    */
-  @internalProperty() _enableSave = false;
+  @property() private _enableSave = false;
 
   /**
    * @member language The ISO 3166-1 alpha-2 language code used for i18n.

src/server_manager/web_app/ui_components/outline-per-key-data-limit-dialog.ts

@@ -17,7 +17,8 @@ import '@polymer/paper-button/paper-button';
 import '@polymer/paper-progress/paper-progress';
 import './outline-step-view';
 
-import {css, customElement, html, LitElement, property} from 'lit-element';
+import {css, html, LitElement} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
 
 import {COMMON_STYLES} from './cloud-install-styles';
 import {CloudLocationOption} from '../../model/location';
@@ -39,7 +40,7 @@ export class OutlineRegionPicker extends LitElement {
   @property({type: Function}) localize: (msgId: string, ...params: string[]) => string;
   @property({type: String}) language: string;
 
-  static get styles() {
+  static get css() {
     return [
       COMMON_STYLES,
       css`

src/server_manager/web_app/ui_components/outline-region-picker-step.ts

@@ -14,8 +14,9 @@
 
 import './outline-server-view';
 
-import {customElement, html, LitElement, property} from 'lit-element';
-import {repeat} from 'lit-html/directives/repeat';
+import {html, LitElement} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {repeat} from 'lit/directives/repeat.js';
 
 import type {DisplayCloudId} from './cloud-assets';
 import type {ServerView} from './outline-server-view';

src/server_manager/web_app/ui_components/outline-server-list.ts

@@ -17,7 +17,8 @@ import '@polymer/paper-progress/paper-progress';
 import '@polymer/paper-button/paper-button';
 import './outline-progress-spinner';
 import './outline-step-view';
-import {css, customElement, html, LitElement, property} from 'lit-element';
+import {css, html, LitElement} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
 import {COMMON_STYLES} from './cloud-install-styles';
 
 @customElement('outline-server-progress-step')
@@ -26,7 +27,7 @@ export class OutlineServerProgressStep extends LitElement {
   @property({type: Number}) progress = 0;
   @property({type: Function}) localize: Function;
 
-  static get styles() {
+  static get css() {
     return [
       COMMON_STYLES,
       css`

src/server_manager/web_app/ui_components/outline-server-progress-step.ts

@@ -15,7 +15,7 @@
 import '@polymer/iron-icon/iron-icon';
 import '@polymer/iron-icons/iron-icons';
 
-import {css, html, LitElement, PropertyDeclarations} from 'lit-element';
+import {css, html, LitElement, PropertyDeclarations} from 'lit';
 
 export class SortSpan extends LitElement {
   static get styles() {