Updated to lit 3

babel.config.json

@@ -20,7 +20,7 @@
 		[
 			"@babel/plugin-proposal-decorators",
 			{
-				"version": "2018-09",
+				"version": "2023-05",
 				"decoratorsBeforeExport": true
 			}
 		],
@@ -42,4 +42,4 @@
 			}
 		]
 	]
-}
+}

package.json

@@ -26,18 +26,19 @@
 	"license": "Apache-2.0",
 	"devDependencies": {
 		"@alienfast/i18next-loader": "^2.0.2",
-		"@babel/cli": "^7.23.4",
-		"@babel/core": "^7.23.5",
-		"@babel/plugin-proposal-decorators": "^7.23.5",
-		"@babel/plugin-transform-class-properties": "^7.23.3",
-		"@babel/plugin-transform-object-rest-spread": "^7.23.4",
-		"@babel/plugin-transform-runtime": "^7.23.4",
-		"@babel/preset-env": "^7.23.5",
-		"@babel/preset-typescript": "^7.23.3",
+		"@babel/cli": "^7.24.6",
+		"@babel/core": "^7.24.6",
+		"@babel/plugin-proposal-decorators": "^7.24.6",
+		"@babel/plugin-transform-class-properties": "^7.24.6",
+		"@babel/plugin-transform-object-rest-spread": "^7.24.6",
+		"@babel/plugin-transform-runtime": "^7.24.6",
+		"@babel/preset-env": "^7.24.6",
+		"@babel/preset-typescript": "^7.24.6",
 		"@open-wc/building-rollup": "^3.0.2",
 		"@open-wc/testing": "^4.0.0",
 		"@rollup/plugin-commonjs": "^25.0.8",
 		"@rollup/plugin-replace": "^5.0.5",
+		"@types/mocha": "^10.0.6",
 		"@types/node": "^20.12.13",
 		"@typescript-eslint/eslint-plugin": "^7.11.0",
 		"@typescript-eslint/parser": "^7.11.0",
@@ -48,19 +49,20 @@
 		"babel-loader": "^9.1.3",
 		"clean-css": "^5.3.3",
 		"copy-webpack-plugin": "^12.0.2",
-		"css-loader": "^6.8.1",
+		"css-loader": "^7.1.2",
 		"esbuild-plugin-babel": "^0.2.3",
 		"esbuild-plugin-copy": "^2.1.1",
 		"esbuild-plugin-lit-css": "^3.0.0",
 		"esbuild-plugin-umd-wrapper": "^2.0.0",
 		"eslint": "^8.57.0",
 		"eslint-plugin-lit": "^1.14.0",
 		"jspdf": "^2.5.1",
-		"lit-css-loader": "^2.0.1",
+		"lit-css-loader": "^3.0.0",
 		"mini-css-extract-plugin": "^2.9.0",
 		"rollup-plugin-lit-css": "^5.0.0",
-		"style-loader": "^3.3.3",
+		"style-loader": "^4.0.0",
 		"terser-webpack-plugin": "^5.3.10",
+		"ts-lit-plugin": "^2.0.2",
 		"typescript": "^5.4.5",
 		"webpack": "^5.91.0",
 		"webpack-cli": "^5.1.4",
@@ -73,7 +75,7 @@
 		"i18next": "^23.11.5",
 		"i18next-browser-languagedetector": "^8.0.0",
 		"janus-gateway": "^1.2.3",
-		"lit": "^2.8.0",
+		"lit": "^3.1.3",
 		"mobx": "^6.12.3",
 		"pdfjs-dist": "^4.3.136",
 		"typescript-event-target": "^1.1.1"

src/component/chat-box/chat-box.ts

@@ -21,14 +21,14 @@ export class ChatBox extends Component {
 		chatBoxStyles,
 	];
 
-	@property()
-	chatService: ChatService;
+	@property({ attribute: false })
+	accessor chatService: ChatService;
 
 	@query(".chat-history-log")
-	messageContainer: HTMLElement;
+	accessor messageContainer: HTMLElement;
 
 	@query("chat-form")
-	chatForm: ChatForm;
+	accessor chatForm: ChatForm;
 
 	messageObserver: IntersectionObserver;
 
@@ -136,7 +136,7 @@ export class ChatBox extends Component {
 					${when(privilegeStore.canReadMessages(), () => html`
 						${repeat(chatStore.messages, (message) => message.messageId, (message) => html`
 							${when(!message.deleted, () => html`
-								<chat-box-message .message="${message}" .chatService="${this.chatService}" .chatForm="${this.renderRoot.querySelector("chat-form")}"></chat-box-message>
+								<chat-box-message .message="${message}" .chatService="${this.chatService}" .chatForm="${this.renderRoot.querySelector<ChatForm>("chat-form")}"></chat-box-message>
 							`)}
 						`)}
 					`)}
@@ -179,15 +179,15 @@ export class ChatBox extends Component {
 	private onMessageIntersection(entries: IntersectionObserverEntry[]) {
 		for (const entry of entries) {
 			if (entry.isIntersecting) {
-				// Message is visible to the user. Mark it as read.
+				// The Message is visible to the user. Mark it as read.
 				const message = (entry.target as ChatBoxMessage).message;
 				message.read = true;
 
-				// Not necessary to observe any more.
+				// Not necessary to observe anymore.
 				this.messageObserver.unobserve(entry.target);
 			}
 			else {
-				// Message was added to the container but is not visible.
+				// The Message was added to the container but is not visible.
 				if (chatStore.unreadMessages < 2) {
 					// Show the recent message only if there are no other unread messages left.
 					this.messageContainer.scrollTo({ top: this.messageContainer.scrollHeight, left: 0, behavior: "smooth" });

src/component/chat-box/chat-message.ts

@@ -20,35 +20,35 @@ export class ChatBoxMessage extends Component {
 		chatMessageStyles,
 	];
 
-	@property()
-	message: ChatMessage;
+	@property({ type: Object })
+	accessor message: ChatMessage;
 
-	@property()
-	chatService: ChatService;
+	@property({ type: Object })
+	accessor chatService: ChatService;
 
-	@property()
-	chatForm: ChatForm;
+	@property({ type: Object })
+	accessor chatForm: ChatForm;
 
 	@property({ type: Boolean, reflect: true })
-	myself: boolean;
+	accessor myself: boolean;
 
 	@property({ type: Boolean, reflect: true })
-	private: boolean;
+	accessor private: boolean;
 
 	@property({ type: Boolean })
-	editing: boolean = false;
+	accessor editing: boolean = false;
 
 	@property({ type: Boolean, reflect: true })
-	edited: boolean = false;
+	accessor edited: boolean = false;
 
 	@query('#delete-tooltip')
-	deleteTooltip: SlTooltip;
+	accessor deleteTooltip: SlTooltip;
 
 	@query('#edit-tooltip')
-	editTooltip: SlTooltip;
+	accessor editTooltip: SlTooltip;
 
 	@query(".chat-message-boxed")
-	chatMessageBoxed: HTMLElement;
+	accessor chatMessageBoxed: HTMLElement;
 
 	editedText: string = "";
 

src/component/chat-form/chat-form.ts

@@ -20,16 +20,16 @@ export class ChatForm extends Component {
 	];
 
 	@property({ type: Boolean, reflect: true })
-	replying: boolean = false;
+	accessor replying: boolean = false;
 
-	@property()
-	chatService: ChatService;
+	@property({ attribute: false })
+	accessor chatService: ChatService;
 
 	@query('#recipients')
-	private recipientSelect: HTMLSelectElement;
+	private accessor recipientSelect: HTMLSelectElement;
 
 	@query('form')
-	private form: HTMLFormElement;
+	private accessor form: HTMLFormElement;
 
 	private selectedRecipient: string;
 

src/component/chat-modal/chat.modal.ts

@@ -13,8 +13,8 @@ export class ChatModal extends Modal {
 		chatModalStyles
 	];
 
-	@property()
-	chatService: ChatService;
+	@property({ attribute: false })
+	accessor chatService: ChatService;
 
 
 	protected override render() {
@@ -26,4 +26,4 @@ export class ChatModal extends Modal {
 			</sl-dialog>
 		`;
 	}
-}
+}

src/component/conference-view/conference-view.ts

@@ -33,49 +33,49 @@ export class ConferenceView extends I18nLitElement {
 
 	/** Specifies how many tiles should be shown at a given time.  */
 	@property({ type: Number, attribute: 'tiles-per-page' })
-	tilesPerPage = 1;
+	accessor tilesPerPage = 1;
 
 	@property({ type: Number, attribute: 'tile-height' })
-	tileHeight: number;
+	accessor tileHeight: number;
 
 	@property({ type: Number, attribute: 'tile-width' })
-	tileWidth: number;
+	accessor tileWidth: number;
 
-	@property({ reflect: true })
-	layout: ContentLayout;
+	@property({ type: Number, reflect: true })
+	accessor layout: ContentLayout;
 
-	@property({ reflect: true })
-	contentFocus: ContentFocus;
+	@property({ type: Number, reflect: true })
+	accessor contentFocus: ContentFocus;
 
 	@state()
-	gridCounter: number = 0;
+	accessor gridCounter: number = 0;
 
 	@state()
-	gridColumns: number = 0;
+	accessor gridColumns: number = 0;
 
 	@state()
-	gridRows: number = 0;
+	accessor gridRows: number = 0;
 
-	@property()
-	gridElementsLimit: number = 20;
+	@property({ type: Number })
+	accessor gridElementsLimit: number = 20;
 
-	@property()
-	columnLimit: number = 5;
+	@property({ type: Number })
+	accessor columnLimit: number = 5;
 
-	@property()
-	rowsLimit: number = 3;
+	@property({ type: Number })
+	accessor rowsLimit: number = 3;
 
 	@property({ type: Boolean, reflect: true })
-	isSpeaker: boolean = false;
+	accessor isSpeaker: boolean = false;
 
 	@query('.grid-container')
-	gridContainer: HTMLElement;
+	accessor gridContainer: HTMLElement;
 
 	@query('.presentation-container')
-	presentationContainer: HTMLElement;
+	accessor presentationContainer: HTMLElement;
 
 	@query("screen-view")
-	screenView: ScreenView;
+	accessor screenView: ScreenView;
 
 
 	public addGridElement(view: ParticipantView) {
@@ -436,4 +436,4 @@ export class ConferenceView extends I18nLitElement {
 		const layout = e.detail;
 		this.setContentLayout(ContentLayout[layout as keyof typeof ContentLayout]);
 	}
-}
+}

src/component/controller/modal.controller.ts

@@ -15,7 +15,7 @@ export class ModalController extends Controller {
 
 		modal.container = this.context.host.renderRoot;
 
-		// Close potentially opened modal of same type to prevent modal overlapping.
+		// Close potentially opened modal of the same type to prevent modal overlapping.
 		this.closeModal(name);
 
 		this.modals.set(name, modal);
@@ -61,4 +61,4 @@ export class ModalController extends Controller {
 	hasModalRegistered(name: string) {
 		return this.modals.has(name);
 	}
-}
+}

src/component/controls/audio-volume-button.ts

@@ -15,21 +15,21 @@ export class AudioVolumeButton extends I18nLitElement {
 	];
 
 	@property({ type: Number, reflect: true })
-	volume: number = 100;
+	accessor volume: number = 100;
 
 	@property({ type: Number, reflect: true })
-	volumeState: number;
+	accessor volumeState: number;
 
 	@property({ type: Boolean, reflect: true })
-	muted: boolean = false;
-
-	mutedVolume: number | undefined;
+	accessor muted: boolean = false;
 
 	@query('sl-menu')
-	menu: SlMenu;
+	accessor menu: SlMenu;
 
 	@query('#button-tooltip')
-	tooltip: SlTooltip;
+	accessor tooltip: SlTooltip;
+
+	mutedVolume: number | undefined;
 
 
 	protected override firstUpdated(): void {
@@ -117,4 +117,4 @@ export class AudioVolumeButton extends I18nLitElement {
 	private onButton() {
 		this.tooltip.hide();
 	}
-}
+}

src/component/controls/document-navigation.ts

@@ -19,10 +19,10 @@ export class DocumentNavigation extends I18nLitElement {
 	private readonly pageChangeListener = this.onPageChanged.bind(this);
 
 	@query("sl-color-picker")
-	colorPicker: SlColorPicker;
+	accessor colorPicker: SlColorPicker;
 
 	@state()
-	toolType: ToolType | null;
+	accessor toolType: ToolType | null;
 
 
 	override connectedCallback(): void {
@@ -164,4 +164,4 @@ export class DocumentNavigation extends I18nLitElement {
 
 		return null;
 	}
-}
+}

src/component/controls/documents-button.ts

@@ -17,16 +17,16 @@ export class DocumentsButton extends Component {
 	];
 
 	@state()
-	disabled: boolean;
+	accessor disabled: boolean;
 
 	@query('sl-menu')
-	menu: SlMenu;
+	accessor menu: SlMenu;
 
 	@query('sl-tooltip')
-	tooltip: SlTooltip;
+	accessor tooltip: SlTooltip;
 
-	@property()
-	documents: Map<bigint, CourseStateDocument>;
+	@property({ type: Object })
+	accessor documents: Map<bigint, CourseStateDocument>;
 
 	selectedDocId: string;
 
@@ -65,7 +65,7 @@ export class DocumentsButton extends Component {
 				this.selectedDocId = docId.toString();
 			}
 
-			itemTemplates.push(html`<sl-menu-item type="checkbox" value="${docId}" ?checked="${selected}">${doc.getDocumentName()}</sl-menu-item>`);
+			itemTemplates.push(html`<sl-menu-item type="checkbox" value="${docId.toString()}" ?checked="${selected}">${doc.getDocumentName()}</sl-menu-item>`);
 		}
 
 		if (itemTemplates.length > 0) {
@@ -117,4 +117,4 @@ export class DocumentsButton extends Component {
 			documentId: docId
 		}));
 	}
-}
+}