From 6ac3ffed86a8aa8bf8f54d0d09dcfa8c8b90ecb2 Mon Sep 17 00:00:00 2001 From: Felix Schulze Sindern Date: Thu, 22 Jul 2021 21:52:23 +0200 Subject: [PATCH] Switch to lit --- client/package-lock.json | 46 +++++++++++++++---- client/package.json | 2 +- client/src/helpers/back-button.ts | 2 +- client/src/pages/app.component.ts | 17 ++----- .../pages/group-details/group-details.page.ts | 7 +-- client/src/pages/groups/groups.page.ts | 7 +-- client/src/pages/intro/intro.page.ts | 3 +- .../src/pages/meal-detail/meal-detail.page.ts | 15 ++---- .../pages/meals-future/meals-future.page.ts | 19 ++------ .../src/pages/meals-today/meals-today.page.ts | 9 ++-- client/src/pages/page.mixin.ts | 5 +- client/src/pages/settings/settings.page.ts | 14 ++---- client/src/pages/sign-in/sign-in.page.spec.ts | 2 +- client/src/pages/sign-in/sign-in.page.ts | 3 +- client/src/pages/sign-up/sign-up.page.ts | 15 ++---- client/src/widgets/back-button/back-button.ts | 3 +- .../chip-select-none-chip.ts | 5 +- .../widgets/chip-select/chip-select.widget.ts | 3 +- .../chip-toggle-show-more.ts | 3 +- .../connection-status-bar.widget.ts | 3 +- .../date-chip-select/date-chip-select.ts | 9 ++-- .../date-filter-modal/date-filter-modal.ts | 7 +-- .../filter-modal/filter-modal.widget.ts | 5 +- .../group-create-modal.widget.ts | 7 +-- .../group-date-add-modal.ts | 3 +- .../group-date-add/group-date-add.widget.ts | 3 +- .../widgets/group-date/group-date.widget.ts | 11 +++-- .../group-join-modal.widget.ts | 6 ++- client/src/widgets/group/group.widget.ts | 3 +- .../horizontal-scroller.widget.ts | 8 ++-- .../image-select/image-select.widget.ts | 7 +-- client/src/widgets/meal-review/meal-review.ts | 3 +- .../src/widgets/meal-reviews/meal-reviews.ts | 3 +- client/src/widgets/meal/meal.widget.ts | 3 +- client/src/widgets/profile/profile.widget.ts | 6 +-- .../rating-stars-pick/rating-stars-pick.ts | 6 ++- .../src/widgets/rating-stars/rating-stars.ts | 4 +- .../widgets/share-modal/share-modal.widget.ts | 7 +-- 38 files changed, 149 insertions(+), 135 deletions(-) diff --git a/client/package-lock.json b/client/package-lock.json index 2807d596..04a3dd18 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -1240,6 +1240,11 @@ "resolved": "https://registry.npmjs.org/@ionic/pwa-elements/-/pwa-elements-3.0.2.tgz", "integrity": "sha512-Wwb8/NgzeX1GA8MDPvcis7nx1vqtWdEaDz3t0tTbtUduR/oCNkWZkY2PFL49ET0+/lRhcqE2jZwXvTVn0R1UGw==" }, + "@lit/reactive-element": { + "version": "1.0.0-rc.2", + "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.0.0-rc.2.tgz", + "integrity": "sha512-cujeIl5Ei8FC7UHf4/4Q3bRJOtdTe1vpJV/JEBYCggedmQ+2P8A2oz7eE+Vxi6OJ4nc0X+KZxXnBoH4QrEbmEQ==" + }, "@nodelib/fs.scandir": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz", @@ -1434,6 +1439,11 @@ "integrity": "sha512-W+bw9ds02rAQaMvaLYxAbJ6cvguW/iJXNT6lTssS1ps6QdrMKttqEAMEG/b5CR8TZl3/L7/lH0ZV5nNR1LXikA==", "dev": true }, + "@types/trusted-types": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-1.0.6.tgz", + "integrity": "sha512-230RC8sFeHoT6sSUlRO6a8cAnclO06eeiq1QDfiv2FGCLWFvvERWgwIQD4FWqD9A69BN7Lzee4OXwoMVnnsWDw==" + }, "@types/uglify-js": { "version": "3.11.0", "resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.11.0.tgz", @@ -8207,19 +8217,35 @@ "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=", "dev": true }, - "lit-element": { - "version": "2.5.1", - "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-2.5.1.tgz", - "integrity": "sha512-ogu7PiJTA33bEK0xGu1dmaX5vhcRjBXCFexPja0e7P7jqLhTpNKYRPmE+GmiCaRVAbiQKGkUgkh/i6+bh++dPQ==", + "lit": { + "version": "2.0.0-rc.2", + "resolved": "https://registry.npmjs.org/lit/-/lit-2.0.0-rc.2.tgz", + "integrity": "sha512-BOCuoJR04WaTV8UqTKk09cNcQA10Aq2LCcBOiHuF7TzWH5RNDsbCBP5QM9sLBSotGTXbDug/gFO08jq6TbyEtw==", "requires": { - "lit-html": "^1.1.1" + "@lit/reactive-element": "^1.0.0-rc.2", + "lit-element": "^3.0.0-rc.2", + "lit-html": "^2.0.0-rc.3" + }, + "dependencies": { + "lit-element": { + "version": "3.0.0-rc.2", + "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.0.0-rc.2.tgz", + "integrity": "sha512-2Z7DabJ3b5K+p5073vFjMODoaWqy5PIaI4y6ADKm+fCGc8OnX9fU9dMoUEBZjFpd/bEFR9PBp050tUtBnT9XTQ==", + "requires": { + "@lit/reactive-element": "^1.0.0-rc.2", + "lit-html": "^2.0.0-rc.3" + } + }, + "lit-html": { + "version": "2.0.0-rc.3", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.0.0-rc.3.tgz", + "integrity": "sha512-Y6P8LlAyQuqvzq6l/Nc4z5/P5M/rVLYKQIRxcNwSuGajK0g4kbcBFQqZmgvqKG+ak+dHZjfm2HUw9TF5N/pkCw==", + "requires": { + "@types/trusted-types": "^1.0.1" + } + } } }, - "lit-html": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-1.4.1.tgz", - "integrity": "sha512-B9btcSgPYb1q4oSOb/PrOT6Z/H+r6xuNzfH4lFli/AWhYwdtrgQkQWBbIc6mdnf6E2IL3gDXdkkqNktpU0OZQA==" - }, "load-json-file": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz", diff --git a/client/package.json b/client/package.json index 7fbe5512..9e025f95 100644 --- a/client/package.json +++ b/client/package.json @@ -85,7 +85,7 @@ "@ionic/pwa-elements": "^3.0.2", "@open-wc/lit-helpers": "^0.3.12", "bootstrap": "^4.6.0", - "lit-element": "^2.5.1", + "lit": "^2.0.0-rc.2", "localforage": "^1.9.0", "macro-carousel": "^1.0.0", "uuid": "^8.3.2" diff --git a/client/src/helpers/back-button.ts b/client/src/helpers/back-button.ts index c68ba1d6..e8b38e2b 100644 --- a/client/src/helpers/back-button.ts +++ b/client/src/helpers/back-button.ts @@ -1,4 +1,4 @@ -import { html, TemplateResult } from 'lit-element'; +import { html, TemplateResult } from 'lit'; import { Routes } from '../routes'; import { goBackTo } from './go-back-to'; import { popFromRootNav } from './nav-util'; diff --git a/client/src/pages/app.component.ts b/client/src/pages/app.component.ts index 153584f3..e7d8b6da 100644 --- a/client/src/pages/app.component.ts +++ b/client/src/pages/app.component.ts @@ -1,14 +1,5 @@ -import { - css, - customElement, - html, - internalProperty, - LitElement, - property, - query, - TemplateResult, - unsafeCSS -} from 'lit-element'; +import { css, html, LitElement, TemplateResult, unsafeCSS } from 'lit'; +import { customElement, state, property, query } from 'lit/decorators.js'; import { routerService } from '../services/router.service'; import { Routes } from '../routes'; import { LanguageStrings } from '../models/language-strings'; @@ -60,10 +51,10 @@ export class AppComponent extends LitElement { @property() protected appTitle = 'mensa-app'; - @internalProperty() + @state() protected currentRoute!: Routes; - @internalProperty() + @state() protected i18n!: LanguageStrings; @query('ion-tabs') diff --git a/client/src/pages/group-details/group-details.page.ts b/client/src/pages/group-details/group-details.page.ts index edd411c6..332d1992 100644 --- a/client/src/pages/group-details/group-details.page.ts +++ b/client/src/pages/group-details/group-details.page.ts @@ -1,4 +1,5 @@ -import { customElement, html, internalProperty, LitElement, property, query, TemplateResult } from 'lit-element'; +import { html, LitElement, TemplateResult } from 'lit'; +import { customElement, state, property, query } from 'lit/decorators.js'; import { PageMixin } from '../page.mixin'; import { LanguageStrings } from '../../models/language-strings'; import { groupService, GroupService } from '../../services/group.service'; @@ -19,9 +20,9 @@ import { modalController } from '@ionic/core'; class GroupDetailsPage extends PageMixin(LitElement) { protected groupService: GroupService = groupService; protected groupID = routerService.getQueryParameter('id'); - @internalProperty() + @state() protected group?: Group; - @internalProperty() + @state() protected members: User[] | undefined; @property({ type: Object, attribute: false }) protected i18n!: LanguageStrings; diff --git a/client/src/pages/groups/groups.page.ts b/client/src/pages/groups/groups.page.ts index 65a63e0f..89343455 100644 --- a/client/src/pages/groups/groups.page.ts +++ b/client/src/pages/groups/groups.page.ts @@ -1,4 +1,5 @@ -import { customElement, html, internalProperty, LitElement, property, TemplateResult } from 'lit-element'; +import { html, LitElement, TemplateResult } from 'lit'; +import { customElement, state, property } from 'lit/decorators.js'; import { PageMixin } from '../page.mixin'; import { LanguageStrings } from '../../models/language-strings'; import { groupService, GroupService } from '../../services/group.service'; @@ -6,7 +7,7 @@ import { Group } from '../../../../server/src/models/group'; import { modalController } from '@ionic/core'; import { routerService } from '../../services/router.service'; import { Routes } from '../../routes'; -import { until } from 'lit-html/directives/until'; +import { until } from 'lit/directives/until'; import { sleep } from '../../helpers/sleep'; import { userService } from '../../services/user.service'; @@ -16,7 +17,7 @@ class GroupsPage extends PageMixin(LitElement) { @property({ type: Array }) protected groups: Group[] = []; - @internalProperty() + @state() protected loaded!: Promise; protected groupService: GroupService = groupService; diff --git a/client/src/pages/intro/intro.page.ts b/client/src/pages/intro/intro.page.ts index d34d6d21..0c424179 100644 --- a/client/src/pages/intro/intro.page.ts +++ b/client/src/pages/intro/intro.page.ts @@ -1,4 +1,5 @@ -import { css, customElement, html, LitElement, property, query, TemplateResult, unsafeCSS } from 'lit-element'; +import { css, html, LitElement, TemplateResult, unsafeCSS } from 'lit'; +import { customElement, property, query } from 'lit/decorators.js'; import { PageMixin } from '../page.mixin'; import { LanguageStrings } from '../../models/language-strings'; import { intro } from '../../models/intro'; diff --git a/client/src/pages/meal-detail/meal-detail.page.ts b/client/src/pages/meal-detail/meal-detail.page.ts index ae172d0e..6ff9abb7 100644 --- a/client/src/pages/meal-detail/meal-detail.page.ts +++ b/client/src/pages/meal-detail/meal-detail.page.ts @@ -1,14 +1,5 @@ -import { - css, - customElement, - html, - internalProperty, - LitElement, - property, - query, - TemplateResult, - unsafeCSS -} from 'lit-element'; +import { css, html, LitElement, TemplateResult, unsafeCSS } from 'lit'; +import { customElement, state, property, query } from 'lit/decorators.js'; import { PageMixin } from '../page.mixin'; import { Meal } from '../../../../server/src/models/meal'; import { routerService } from '../../services/router.service'; @@ -35,7 +26,7 @@ class MealDetailPage extends PageMixin(LitElement) { @property({ type: Object }) public meal?: Meal; - @internalProperty() + @state() protected isBookmark: boolean = false; @query('macro-carousel') diff --git a/client/src/pages/meals-future/meals-future.page.ts b/client/src/pages/meals-future/meals-future.page.ts index b6a5ff9b..ddf186da 100644 --- a/client/src/pages/meals-future/meals-future.page.ts +++ b/client/src/pages/meals-future/meals-future.page.ts @@ -1,14 +1,5 @@ -import { - css, - customElement, - html, - internalProperty, - LitElement, - property, - query, - TemplateResult, - unsafeCSS -} from 'lit-element'; +import { css, html, LitElement, TemplateResult, unsafeCSS } from 'lit'; +import { customElement, state, property, query } from 'lit/decorators.js'; import { PageMixin } from '../page.mixin'; import { Meal } from '../../../../server/src/models/meal'; import { routerService } from '../../services/router.service'; @@ -40,17 +31,17 @@ export class MealsFuturePage extends PageMixin(LitElement) { @query('ion-infinite-scroll') protected infiniteScrollElem!: HTMLIonInfiniteScrollElement; - @internalProperty() + @state() protected scrollIndex: number = 0; @property({ attribute: false }) protected displayMeals: Meal[] = []; protected mealsBeforeTextSearch: Meal[] = []; protected allMeals: Meal[] = []; - @internalProperty() + @state() protected userInfo?: User = userService.userInfo; protected mealFilterConfig: MealFilterConfig = this.userInfo?.filterConfig ?? DEFAULT_MEAL_FILTER_CONFIG; - @internalProperty() + @state() protected dateFilterConfig: MealDateFilterConfig = DEFAULT_DATE_FILTER; protected searchInput = ''; diff --git a/client/src/pages/meals-today/meals-today.page.ts b/client/src/pages/meals-today/meals-today.page.ts index 131026a6..b6bdfbff 100644 --- a/client/src/pages/meals-today/meals-today.page.ts +++ b/client/src/pages/meals-today/meals-today.page.ts @@ -1,5 +1,6 @@ /* eslint-disable @typescript-eslint/member-ordering */ -import { css, customElement, html, internalProperty, LitElement, property, query, TemplateResult } from 'lit-element'; +import { css, html, LitElement, TemplateResult } from 'lit'; +import { customElement, state, property, query } from 'lit/decorators.js'; import { PageMixin } from '../page.mixin'; import { routerService } from '../../services/router.service'; import { Routes } from '../../routes'; @@ -21,17 +22,17 @@ import { ShareParameter } from '../../helpers/share-api'; export class MealsTodayPage extends PageMixin(LitElement) { @query('ion-infinite-scroll') protected infiniteScrollElem!: HTMLIonInfiniteScrollElement; - @internalProperty() + @state() protected scrollIndex: number = 0; @property({ attribute: false }) protected displayMeals: Meal[] = []; protected mealsBeforeTextSearch: Meal[] = []; protected allMeals: Meal[] = []; - @internalProperty() + @state() protected userInfo?: User = userService.userInfo; protected mealFilterConfig: MealFilterConfig = this.userInfo?.filterConfig ?? DEFAULT_MEAL_FILTER_CONFIG; - @internalProperty() + @state() protected dateFilterConfig: MealDateFilterConfig = { start: getToday().getTime(), end: getToday().getTime() }; protected searchInput = ''; diff --git a/client/src/pages/page.mixin.ts b/client/src/pages/page.mixin.ts index a8004aca..6c60b35f 100644 --- a/client/src/pages/page.mixin.ts +++ b/client/src/pages/page.mixin.ts @@ -1,4 +1,5 @@ -import { LitElement, property, html, TemplateResult, internalProperty } from 'lit-element'; +import { LitElement, html, TemplateResult } from 'lit'; +import { property, state } from 'lit/decorators.js'; import { User } from '../../../server/src/models/user'; import { LanguageStrings } from '../models/language-strings'; import { i18nService } from '../services/i18n.service'; @@ -14,7 +15,7 @@ export const PageMixin = LitElement>(base: T) @property() private successMessage = ''; - @internalProperty() + @state() protected i18n!: LanguageStrings; @property() diff --git a/client/src/pages/settings/settings.page.ts b/client/src/pages/settings/settings.page.ts index 588e741e..c1237db9 100644 --- a/client/src/pages/settings/settings.page.ts +++ b/client/src/pages/settings/settings.page.ts @@ -1,13 +1,5 @@ -import { - css, - customElement, - html, - internalProperty, - LitElement, - property, - TemplateResult, - unsafeCSS -} from 'lit-element'; +import { css, html, LitElement, TemplateResult, unsafeCSS } from 'lit'; +import { customElement, state, property } from 'lit/decorators.js'; import { goBackTo } from '../../helpers/go-back-to'; import { toggleIosMd } from '../../helpers/toggle-ios-md'; import { LanguageStrings } from '../../models/language-strings'; @@ -37,7 +29,7 @@ class SignUpPage extends PageMixin(LitElement) { return this; } - @internalProperty() + @state() protected i18n!: LanguageStrings; @property() diff --git a/client/src/pages/sign-in/sign-in.page.spec.ts b/client/src/pages/sign-in/sign-in.page.spec.ts index f35d9d4e..53acbf33 100644 --- a/client/src/pages/sign-in/sign-in.page.spec.ts +++ b/client/src/pages/sign-in/sign-in.page.spec.ts @@ -1,4 +1,4 @@ -import { LitElement } from 'lit-element'; +import { LitElement } from 'lit'; import './sign-in.page'; describe('app-sign-in', () => { diff --git a/client/src/pages/sign-in/sign-in.page.ts b/client/src/pages/sign-in/sign-in.page.ts index f5e2266a..ddea1c69 100644 --- a/client/src/pages/sign-in/sign-in.page.ts +++ b/client/src/pages/sign-in/sign-in.page.ts @@ -1,4 +1,5 @@ -import { css, customElement, html, LitElement, property, query, TemplateResult, unsafeCSS } from 'lit-element'; +import { css, html, LitElement, TemplateResult, unsafeCSS } from 'lit'; +import { customElement, property, query } from 'lit/decorators.js'; import { PageMixin } from '../page.mixin'; import { SignInData } from '../../models/sign-in-data'; import { userService } from '../../services/user.service'; diff --git a/client/src/pages/sign-up/sign-up.page.ts b/client/src/pages/sign-up/sign-up.page.ts index 25aa3d80..873a11b4 100644 --- a/client/src/pages/sign-up/sign-up.page.ts +++ b/client/src/pages/sign-up/sign-up.page.ts @@ -1,14 +1,5 @@ -import { - css, - customElement, - html, - internalProperty, - LitElement, - property, - query, - TemplateResult, - unsafeCSS -} from 'lit-element'; +import { css, html, LitElement, TemplateResult, unsafeCSS } from 'lit'; +import { customElement, state, property, query } from 'lit/decorators.js'; import { PageMixin } from '../page.mixin'; import { SignUpData } from '../../models/sign-up-data'; import { userService } from '../../services/user.service'; @@ -69,7 +60,7 @@ class SignUpPage extends PageMixin(LitElement) { @property({ type: Object, attribute: false }) protected i18n!: LanguageStrings; - @internalProperty() + @state() protected currentStep: number = 1; protected signUpData: Partial = { diff --git a/client/src/widgets/back-button/back-button.ts b/client/src/widgets/back-button/back-button.ts index 45ba92b4..7f2f8743 100644 --- a/client/src/widgets/back-button/back-button.ts +++ b/client/src/widgets/back-button/back-button.ts @@ -1,4 +1,5 @@ -import { customElement, html, LitElement, property, TemplateResult } from 'lit-element'; +import { html, LitElement, TemplateResult } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; import { LanguageStrings } from '../../models/language-strings'; import { i18nService } from '../../services/i18n.service'; diff --git a/client/src/widgets/chip-select-none-chip/chip-select-none-chip.ts b/client/src/widgets/chip-select-none-chip/chip-select-none-chip.ts index 0d0008cd..86d62bc2 100644 --- a/client/src/widgets/chip-select-none-chip/chip-select-none-chip.ts +++ b/client/src/widgets/chip-select-none-chip/chip-select-none-chip.ts @@ -1,4 +1,5 @@ -import { customElement, html, internalProperty, LitElement, query, TemplateResult } from 'lit-element'; +import { html, LitElement, TemplateResult } from 'lit'; +import { customElement, state, query } from 'lit/decorators.js'; import { LanguageStrings } from '../../models/language-strings'; import { i18nService } from '../../services/i18n.service'; @@ -10,7 +11,7 @@ export class ChipSelectNoneChipWidget extends LitElement { protected isSelected = true; - @internalProperty() + @state() protected i18n!: LanguageStrings; @query('ion-chip') diff --git a/client/src/widgets/chip-select/chip-select.widget.ts b/client/src/widgets/chip-select/chip-select.widget.ts index 942b4890..5cf09a1c 100644 --- a/client/src/widgets/chip-select/chip-select.widget.ts +++ b/client/src/widgets/chip-select/chip-select.widget.ts @@ -1,4 +1,5 @@ -import { css, customElement, html, LitElement, property, query, TemplateResult, unsafeCSS } from 'lit-element'; +import { css, html, LitElement, TemplateResult, unsafeCSS } from 'lit'; +import { customElement, property, query } from 'lit/decorators.js'; import { LanguageStrings } from '../../models/language-strings'; import { ChipSelectNoneChipWidget } from '../chip-select-none-chip/chip-select-none-chip'; diff --git a/client/src/widgets/chip-toggle-show-more/chip-toggle-show-more.ts b/client/src/widgets/chip-toggle-show-more/chip-toggle-show-more.ts index add61cc3..87b5109a 100644 --- a/client/src/widgets/chip-toggle-show-more/chip-toggle-show-more.ts +++ b/client/src/widgets/chip-toggle-show-more/chip-toggle-show-more.ts @@ -1,4 +1,5 @@ -import { css, customElement, html, LitElement, property, TemplateResult, unsafeCSS } from 'lit-element'; +import { css, html, LitElement, TemplateResult, unsafeCSS } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; import { ChipSelectWidget } from '../chip-select/chip-select.widget'; const componentCSS = require('./chip-toggle-show-more.scss'); diff --git a/client/src/widgets/connection-status-bar/connection-status-bar.widget.ts b/client/src/widgets/connection-status-bar/connection-status-bar.widget.ts index 5d381cc0..07337e8c 100644 --- a/client/src/widgets/connection-status-bar/connection-status-bar.widget.ts +++ b/client/src/widgets/connection-status-bar/connection-status-bar.widget.ts @@ -1,4 +1,5 @@ -import { css, customElement, html, LitElement, property, TemplateResult, unsafeCSS } from 'lit-element'; +import { css, html, LitElement, TemplateResult, unsafeCSS } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; import { LanguageStrings } from '../../models/language-strings'; import { connectionStatusService } from '../../services/connection-status.service'; import { i18nService } from '../../services/i18n.service'; diff --git a/client/src/widgets/date-chip-select/date-chip-select.ts b/client/src/widgets/date-chip-select/date-chip-select.ts index a37dcb6f..a86d2092 100644 --- a/client/src/widgets/date-chip-select/date-chip-select.ts +++ b/client/src/widgets/date-chip-select/date-chip-select.ts @@ -1,5 +1,6 @@ import { modalController } from '@ionic/core'; -import { customElement, html, internalProperty, LitElement, PropertyValues, query, TemplateResult } from 'lit-element'; +import { html, LitElement, PropertyValues, TemplateResult } from 'lit'; +import { customElement, state, query } from 'lit/decorators.js'; import { getToday } from '../../helpers/get-today'; import { getTomorrow } from '../../helpers/get-tomorrow'; import { LanguageStrings } from '../../models/language-strings'; @@ -13,13 +14,13 @@ export class DateChipSelectWidget extends LitElement { return this; } - @internalProperty() + @state() protected activeChip: DateFilterType = 'all'; - @internalProperty() + @state() protected dateFilterConfig!: MealDateFilterConfig; - @internalProperty() + @state() protected i18n!: LanguageStrings; @query('.chip-wrapper') diff --git a/client/src/widgets/date-filter-modal/date-filter-modal.ts b/client/src/widgets/date-filter-modal/date-filter-modal.ts index 97b27af9..2928c404 100644 --- a/client/src/widgets/date-filter-modal/date-filter-modal.ts +++ b/client/src/widgets/date-filter-modal/date-filter-modal.ts @@ -1,4 +1,5 @@ -import { LitElement, customElement, TemplateResult, html, internalProperty, property } from 'lit-element'; +import { LitElement, TemplateResult, html } from 'lit'; +import { customElement, state, property } from 'lit/decorators.js'; import { truncateToDay } from '../../helpers/truncate-to-day'; import { LanguageStrings } from '../../models/language-strings'; import { DEFAULT_DATE_FILTER, MealDateFilterConfig } from '../../models/meal-date-filter-config'; @@ -10,12 +11,12 @@ export class DateFilterModalWidget extends LitElement { return this; } - @internalProperty() + @state() protected i18n!: LanguageStrings; public dateFilterConfig!: MealDateFilterConfig; - @internalProperty() + @state() protected dateTab: 'day' | 'period' = 'day'; constructor() { diff --git a/client/src/widgets/filter-modal/filter-modal.widget.ts b/client/src/widgets/filter-modal/filter-modal.widget.ts index 7a2d9a7c..35ca5b8a 100644 --- a/client/src/widgets/filter-modal/filter-modal.widget.ts +++ b/client/src/widgets/filter-modal/filter-modal.widget.ts @@ -1,4 +1,5 @@ -import { LitElement, customElement, TemplateResult, html, internalProperty, property } from 'lit-element'; +import { LitElement, TemplateResult, html } from 'lit'; +import { customElement, state, property } from 'lit/decorators.js'; import { AdditivesKeys } from '../../../../server/src/models/additives'; import { AllergenesKeys } from '../../../../server/src/models/allergenes'; import { OtherMealInfoKeys } from '../../../../server/src/models/other-meal-info'; @@ -16,7 +17,7 @@ export class FilterModalWidget extends LitElement { return this; } - @internalProperty() + @state() protected i18n!: LanguageStrings; protected allContents: Array = getAllContents(); diff --git a/client/src/widgets/group-create-modal/group-create-modal.widget.ts b/client/src/widgets/group-create-modal/group-create-modal.widget.ts index eddc6a26..2e1f4df4 100644 --- a/client/src/widgets/group-create-modal/group-create-modal.widget.ts +++ b/client/src/widgets/group-create-modal/group-create-modal.widget.ts @@ -1,4 +1,5 @@ -import { customElement, html, internalProperty, LitElement, property, query, TemplateResult } from 'lit-element'; +import { html, LitElement, TemplateResult } from 'lit'; +import { customElement, state, property, query } from 'lit/decorators.js'; import { LanguageStrings } from '../../models/language-strings'; import { groupService, GroupService } from '../../services/group.service'; import { Image } from '../../models/image'; @@ -28,10 +29,10 @@ class GroupCreateModalWidget extends LitElement { @property() protected mode: 'create' | 'edit' = 'create'; - @internalProperty() + @state() protected imageSetOnce: boolean = false; - @internalProperty() + @state() protected imagesrc: string | null = null; constructor() { diff --git a/client/src/widgets/group-date-add-modal/group-date-add-modal.ts b/client/src/widgets/group-date-add-modal/group-date-add-modal.ts index b039142e..a2bfe8dd 100644 --- a/client/src/widgets/group-date-add-modal/group-date-add-modal.ts +++ b/client/src/widgets/group-date-add-modal/group-date-add-modal.ts @@ -1,4 +1,5 @@ -import { customElement, html, LitElement, property, query, TemplateResult } from 'lit-element'; +import { html, LitElement, TemplateResult } from 'lit'; +import { customElement, property, query } from 'lit/decorators.js'; import { LanguageStrings } from '../../models/language-strings'; import { groupService } from '../../services/group.service'; import { i18nService } from '../../services/i18n.service'; diff --git a/client/src/widgets/group-date-add/group-date-add.widget.ts b/client/src/widgets/group-date-add/group-date-add.widget.ts index 9079dc5e..89bfe4f9 100644 --- a/client/src/widgets/group-date-add/group-date-add.widget.ts +++ b/client/src/widgets/group-date-add/group-date-add.widget.ts @@ -1,5 +1,6 @@ import { modalController } from '@ionic/core'; -import { LitElement, customElement, property, TemplateResult, html } from 'lit-element'; +import { LitElement, TemplateResult, html } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; import { LanguageStrings } from '../../models/language-strings'; import { i18nService } from '../../services/i18n.service'; diff --git a/client/src/widgets/group-date/group-date.widget.ts b/client/src/widgets/group-date/group-date.widget.ts index 92e7e61b..4697b954 100644 --- a/client/src/widgets/group-date/group-date.widget.ts +++ b/client/src/widgets/group-date/group-date.widget.ts @@ -1,5 +1,6 @@ import { group } from 'console'; -import { LitElement, customElement, internalProperty, property, TemplateResult, html, query } from 'lit-element'; +import { LitElement, TemplateResult, html } from 'lit'; +import { customElement, state, property, query } from 'lit/decorators.js'; import { Group } from '../../../../server/src/models/group'; import { MensaVisit } from '../../../../server/src/models/mensa-visit'; import { User } from '../../../../server/src/models/user'; @@ -15,7 +16,7 @@ export class GroupDateWidget extends LitElement { return this; } - @internalProperty() + @state() protected i18n!: LanguageStrings; @property({ type: Object, attribute: false }) @@ -26,17 +27,17 @@ export class GroupDateWidget extends LitElement { @property({ type: Array, attribute: false }) protected members!: User[]; - @internalProperty() + @state() protected attending!: boolean; protected numberOfParticipants: number = 3; - @internalProperty() + @state() protected chipColor!: 'success' | 'danger'; @property({ type: Boolean }) protected large: boolean = false; - @internalProperty() + @state() protected userInfo!: User; constructor() { diff --git a/client/src/widgets/group-join-modal/group-join-modal.widget.ts b/client/src/widgets/group-join-modal/group-join-modal.widget.ts index 22851561..33a2e98d 100644 --- a/client/src/widgets/group-join-modal/group-join-modal.widget.ts +++ b/client/src/widgets/group-join-modal/group-join-modal.widget.ts @@ -1,4 +1,6 @@ -import { LitElement, customElement, TemplateResult, html, internalProperty, property } from 'lit-element'; +import { LitElement, TemplateResult, html } from 'lit'; + +import { customElement, state, property } from 'lit/decorators.js'; import { Group } from '../../../../server/src/models/group'; import { LanguageStrings } from '../../models/language-strings'; @@ -11,7 +13,7 @@ export class FilterModalWidget extends LitElement { return this; } - @internalProperty() + @state() protected i18n!: LanguageStrings; @property({ type: Array }) protected groups: Group[] = []; diff --git a/client/src/widgets/group/group.widget.ts b/client/src/widgets/group/group.widget.ts index 26108038..4212e46c 100644 --- a/client/src/widgets/group/group.widget.ts +++ b/client/src/widgets/group/group.widget.ts @@ -1,4 +1,5 @@ -import { LitElement, customElement, property, TemplateResult, html } from 'lit-element'; +import { LitElement, TemplateResult, html } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; import { Group } from '../../../../server/src/models/group'; import { MensaVisit } from '../../../../server/src/models/mensa-visit'; import { LanguageStrings } from '../../models/language-strings'; diff --git a/client/src/widgets/horizontal-scroller/horizontal-scroller.widget.ts b/client/src/widgets/horizontal-scroller/horizontal-scroller.widget.ts index c5a79bf4..60e47bc4 100644 --- a/client/src/widgets/horizontal-scroller/horizontal-scroller.widget.ts +++ b/client/src/widgets/horizontal-scroller/horizontal-scroller.widget.ts @@ -1,6 +1,8 @@ -import { unsafeCSS } from 'lit-element'; -import { css } from 'lit-element'; -import { LitElement, customElement, property, TemplateResult, html, query } from 'lit-element'; +import { unsafeCSS } from 'lit'; +import { css } from 'lit'; +import { LitElement, TemplateResult, html } from 'lit'; + +import { customElement, property, query } from 'lit/decorators.js'; const componentCSS = require('./horizontal-scroller.widget.scss'); const sharedCSS = require('../../shared.scss'); diff --git a/client/src/widgets/image-select/image-select.widget.ts b/client/src/widgets/image-select/image-select.widget.ts index 0e52cfe6..2fdd7c37 100644 --- a/client/src/widgets/image-select/image-select.widget.ts +++ b/client/src/widgets/image-select/image-select.widget.ts @@ -1,5 +1,6 @@ /* eslint-disable @typescript-eslint/member-ordering */ -import { LitElement, customElement, TemplateResult, html, internalProperty } from 'lit-element'; +import { LitElement, TemplateResult, html } from 'lit'; +import { customElement, state } from 'lit/decorators.js'; import { LanguageStrings } from '../../models/language-strings'; import { i18nService } from '../../services/i18n.service'; import { actionSheetController } from '@ionic/core'; @@ -11,10 +12,10 @@ export class ImageSelect extends LitElement { // eslint-disable-next-line @typescript-eslint/no-empty-function protected handleImageUpload: (img: Image) => void = () => {}; - @internalProperty() + @state() protected i18n!: LanguageStrings; - @internalProperty() + @state() protected actionSheetElement: HTMLIonActionSheetElement | undefined; constructor() { super(); diff --git a/client/src/widgets/meal-review/meal-review.ts b/client/src/widgets/meal-review/meal-review.ts index b367806f..11c6a9d9 100644 --- a/client/src/widgets/meal-review/meal-review.ts +++ b/client/src/widgets/meal-review/meal-review.ts @@ -1,4 +1,5 @@ -import { LitElement, customElement, property, TemplateResult, html, query } from 'lit-element'; +import { LitElement, TemplateResult, html } from 'lit'; +import { customElement, property, query } from 'lit/decorators.js'; import { Meal } from '../../../../server/src/models/meal'; import { LanguageStrings } from '../../models/language-strings'; diff --git a/client/src/widgets/meal-reviews/meal-reviews.ts b/client/src/widgets/meal-reviews/meal-reviews.ts index e59c86ec..f02d815c 100644 --- a/client/src/widgets/meal-reviews/meal-reviews.ts +++ b/client/src/widgets/meal-reviews/meal-reviews.ts @@ -1,4 +1,5 @@ -import { LitElement, customElement, property, TemplateResult, html, query } from 'lit-element'; +import { LitElement, TemplateResult, html } from 'lit'; +import { customElement, property, query } from 'lit/decorators.js'; import { Meal } from '../../../../server/src/models/meal'; import { LanguageStrings } from '../../models/language-strings'; diff --git a/client/src/widgets/meal/meal.widget.ts b/client/src/widgets/meal/meal.widget.ts index 671dd12c..ee386f87 100644 --- a/client/src/widgets/meal/meal.widget.ts +++ b/client/src/widgets/meal/meal.widget.ts @@ -1,4 +1,5 @@ -import { LitElement, customElement, property, TemplateResult, html, query } from 'lit-element'; +import { LitElement, TemplateResult, html } from 'lit'; +import { customElement, property, query } from 'lit/decorators.js'; import { Meal } from '../../../../server/src/models/meal'; import { Status } from '../../../../server/src/models/status'; import { getSlidesPerView } from '../../helpers/get-slides-per-view'; diff --git a/client/src/widgets/profile/profile.widget.ts b/client/src/widgets/profile/profile.widget.ts index aecaf152..e6b5982b 100644 --- a/client/src/widgets/profile/profile.widget.ts +++ b/client/src/widgets/profile/profile.widget.ts @@ -1,4 +1,4 @@ -import { LitElement, customElement, property, TemplateResult, html } from 'lit-element'; +import { LitElement, TemplateResult, html } from 'lit'; import { Group } from '../../../../server/src/models/group'; import { MensaVisit } from '../../../../server/src/models/mensa-visit'; import { LanguageStrings } from '../../models/language-strings'; @@ -10,7 +10,7 @@ import { createShareModal } from '../../helpers/create-share-modal'; import { userService } from '../../services/user.service'; import { User } from '../../../../server/src/models/user'; import { mediaService } from '../../services/media.service'; -import { internalProperty } from 'lit-element'; +import { customElement, property, state } from 'lit/decorators.js'; import { ImageSelect } from '../image-select/image-select.widget'; @customElement('app-profile') export class ProfileWidget extends LitElement { @@ -28,7 +28,7 @@ export class ProfileWidget extends LitElement { protected setNotification!: (e: any) => void; protected uploadedImage: Image | undefined; - @internalProperty() + @state() protected imagesrc: string | null = null; constructor() { diff --git a/client/src/widgets/rating-stars-pick/rating-stars-pick.ts b/client/src/widgets/rating-stars-pick/rating-stars-pick.ts index 0d2df849..5604ed3e 100644 --- a/client/src/widgets/rating-stars-pick/rating-stars-pick.ts +++ b/client/src/widgets/rating-stars-pick/rating-stars-pick.ts @@ -1,4 +1,6 @@ -import { LitElement, customElement, TemplateResult, property, html, internalProperty } from 'lit-element'; +import { LitElement, TemplateResult, html } from 'lit'; + +import { customElement, property, state } from 'lit/decorators.js'; @customElement('app-rating-starts-pick') export class RatingStarsPickWidget extends LitElement { @@ -6,7 +8,7 @@ export class RatingStarsPickWidget extends LitElement { return this; } - @internalProperty() + @state() protected displayRating: number = 0; protected rating: number = 0; diff --git a/client/src/widgets/rating-stars/rating-stars.ts b/client/src/widgets/rating-stars/rating-stars.ts index fb16b392..77a37efd 100644 --- a/client/src/widgets/rating-stars/rating-stars.ts +++ b/client/src/widgets/rating-stars/rating-stars.ts @@ -1,4 +1,6 @@ -import { LitElement, customElement, TemplateResult, property, html } from 'lit-element'; +import { LitElement, TemplateResult, html } from 'lit'; + +import { customElement, property } from 'lit/decorators.js'; @customElement('app-rating-starts') export class RatingStarsWidget extends LitElement { diff --git a/client/src/widgets/share-modal/share-modal.widget.ts b/client/src/widgets/share-modal/share-modal.widget.ts index 3a782243..a5cb8aea 100644 --- a/client/src/widgets/share-modal/share-modal.widget.ts +++ b/client/src/widgets/share-modal/share-modal.widget.ts @@ -1,4 +1,5 @@ -import { LitElement, customElement, TemplateResult, html, internalProperty, property } from 'lit-element'; +import { LitElement, TemplateResult, html } from 'lit'; +import { customElement, state, property } from 'lit/decorators.js'; import { copyToClipboard } from '../../helpers/copy-to-clipboard'; import { LanguageStrings } from '../../models/language-strings'; import { i18nService } from '../../services/i18n.service'; @@ -12,7 +13,7 @@ export class ShareModalWidget extends LitElement { return this; } - @internalProperty() + @state() protected i18n!: LanguageStrings; @property({ type: Object }) @@ -21,7 +22,7 @@ export class ShareModalWidget extends LitElement { @property({ type: Object, attribute: false }) protected setNotification!: (e: any) => void; - @internalProperty() + @state() protected shareText = ''; protected toEmail = '';