(chore): Upgraded lit and TS (#193)

* (chore): Upgraded lit and TS

For some reason the @query decorator is bugging out, so have reverted to the old fashioned way for now until I can figure out why.

* (core): Upgrading deps to fix testing

* (chore): re-run prettier to fix pipeline,

html-report/ui/package.json

@@ -20,8 +20,8 @@
     "@types/chart.js": "^2.9.37",
     "@typescript-eslint/eslint-plugin": "^5.38.1",
     "@typescript-eslint/parser": "^5.38.1",
+    "@web/dev-server-esbuild": "^0.3.3",
     "@web/test-runner": "^0.14.0",
-    "@web/dev-server-esbuild": "^0.3.1",
     "@web/test-runner-commands": "^0.6.5",
     "@web/test-runner-playwright": "^0.8.10",
     "copy-webpack-plugin": "^11.0.0",
@@ -38,14 +38,14 @@
     "webpack-dev-server": "^4.11.1"
   },
   "dependencies": {
-    "@open-wc/testing": "^3.1.6",
+    "@open-wc/testing": "^3.1.7",
     "chart.js": "^3.9.1",
     "css-loader": "^6.7.1",
-    "lit": "^2.2.8",
+    "lit": "^2.4.1",
     "style-loader": "^3.3.1",
     "terminal.css": "^0.7.2",
     "ts-loader": "^9.4.1",
-    "typescript": "^4.7.4"
+    "typescript": "^4.9.3"
   },
   "eslintConfig": {
     "parser": "@typescript-eslint/parser",

html-report/ui/src/components/html-report/category-rules/category-rule-component.ts

@@ -1,6 +1,6 @@
 import { BaseComponent } from '../../../ts/base-component';
 import { html, TemplateResult } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 import {
   RuleSelected,
   RuleSelectedEvent,
@@ -39,14 +39,15 @@ export class CategoryRuleComponent extends BaseComponent {
   @property()
   open: boolean;
 
-  @query('.violations')
-  _violations: HTMLElement;
+  // @query('.violations')
+  private violations: HTMLElement;
 
   private _expandState: boolean;
 
   otherRuleSelected() {
     this.open = false;
-    this._violations.style.display = 'none';
+    this.violations = this.renderRoot.querySelector('.violations');
+    this.violations.style.display = 'none';
     this._expandState = false;
     this._slottedChildren.forEach((result: CategoryRuleResultComponent) => {
       result.selected = false;
@@ -55,6 +56,7 @@ export class CategoryRuleComponent extends BaseComponent {
   }
 
   render() {
+    this.violations = this.renderRoot.querySelector('.violations');
     let truncatedAlert: TemplateResult;
     if (this.truncated) {
       truncatedAlert = html`
@@ -88,15 +90,15 @@ export class CategoryRuleComponent extends BaseComponent {
 
   private _ruleSelected() {
     if (!this.open) {
-      this._violations.style.display = 'block';
+      this.violations.style.display = 'block';
       // use some intelligence to resize this in a responsive way.
       const heightCalc =
         this.parentElement.parentElement.offsetHeight -
         this.totalRulesViolated * 60;
-      this._violations.style.maxHeight = heightCalc + 'px';
+      this.violations.style.maxHeight = heightCalc + 'px';
       this._expandState = true;
     } else {
-      this._violations.style.display = 'none';
+      this.violations.style.display = 'none';
       this._expandState = false;
     }