web: small fixes for elements and forms (#11546)

* web: small fixes for wdio and lint

- Roll back another dependabot breaking change, this time to WebdriverIO
- Remove the redundant scripts wrapping ESLint for Precommit mode. Access to those modes is
  available through the flags to the `./web/scripts/eslint.mjs` script.
- Remove SonarJS checks until SonarJS is ESLint 9 compatible.
- Minor nitpicking.

* package-lock.json update

* web: small fixes for wdio and lint

**PLEASE** Stop trying to upgrade WebdriverIO following Dependabot's instructions. The changes
between wdio8 and wdio9 are extensive enough to require a lot more manual intervention. The unit
tests fail in wdio 9, with the testbed driver Wdio uses to compile content to push to the browser
([vite](https://vitejs.dev) complaining:

```
2024-09-27T15:30:03.672Z WARN @wdio/browser-runner:vite: warning: Unrecognized default export in file /Users/ken/projects/dev/web/node_modules/@patternfly/patternfly/components/Dropdown/dropdown.css
  Plugin: postcss-lit
  File: /Users/ken/projects/dev/web/node_modules/@patternfly/patternfly/components/Dropdown/dropdown.css
[0-6] 2024-09-27T15:30:04.083Z INFO webdriver: BIDI COMMAND script.callFunction {"functionDeclaration":"<Function[976 bytes]>","awaitPromise":true,"arguments":[],"target":{"context":"8E608E6D13E355DFFC28112C236B73AF"}}
[0-6]  Error:  Test failed due to following error(s):
  - ak-search-select.test.ts: The requested module '/src/common/styles/authentik.css' does not provide an export named 'default': SyntaxError: The requested module '/src/common/styles/authentik.css' does not provide an export named 'default'

```

So until we can figure out why the Vite installation isn't liking our CSS import scheme, we'll
have to soldier on with what we have.  At least with Wdio 8, we get:

```
Spec Files:      7 passed, 7 total (100% completed) in 00:00:19
```

* Forgot to run prettier.

* web: small fixes for elements and forms

- provides a new utility, `_isSlug_`, used to verify a user input
- extends the ak-horizontal-component wrapper to have a stronger identity and available value
- updates the types that use the wrapper to be typed more strongly
  - (Why) The above are used in the wizard to get and store values
- fixes a bug in SearchSelectEZ that broke the display if the user didn't supply a `groupBy` field.
- Adds `@wdio/types` to the package file so eslint is satisfied wdio builds correctly
- updates the end-to-end test to understand the revised button identities on the login page
  - Running the end-to-end tests verifies that changes to the components listed above did not break
    the semantics of those components.

* Removing SonarJS comments.

* Reverting to log level  for tests.

web/src/components/HorizontalLightComponent.ts

@@ -1,11 +1,12 @@
 import { AKElement } from "@goauthentik/elements/Base";
+import "@goauthentik/elements/forms/HorizontalFormElement.js";
 
 import { TemplateResult, html, nothing } from "lit";
 import { property } from "lit/decorators.js";
 
 type HelpType = TemplateResult | typeof nothing;
 
-export class HorizontalLightComponent extends AKElement {
+export class HorizontalLightComponent<T> extends AKElement {
     // Render into the lightDOM. This effectively erases the shadowDOM nature of this component, but
     // we're not actually using that and, for the meantime, we need the form handlers to be able to
     // find the children of this component.
@@ -41,6 +42,9 @@ export class HorizontalLightComponent extends AKElement {
     @property({ attribute: false })
     errorMessages: string[] = [];
 
+    @property({ attribute: false })
+    value?: T;
+
     renderControl() {
         throw new Error("Must be implemented in a subclass");
     }

web/src/components/ak-number-input.ts

@@ -5,13 +5,19 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import { HorizontalLightComponent } from "./HorizontalLightComponent";
 
 @customElement("ak-number-input")
-export class AkNumberInput extends HorizontalLightComponent {
+export class AkNumberInput extends HorizontalLightComponent<number> {
     @property({ type: Number, reflect: true })
-    value = 0;
+    value = NaN;
 
     renderControl() {
+        const setValue = (ev: InputEvent) => {
+            const value = (ev.target as HTMLInputElement).value;
+            this.value = value.trim() === "" ? NaN : parseInt(value, 10);
+        };
+
         return html`<input
             type="number"
+            @input=${setValue}
             value=${ifDefined(this.value)}
             class="pf-c-form-control"
             ?required=${this.required}

web/src/components/ak-radio-input.ts

@@ -7,7 +7,7 @@ import { customElement, property } from "lit/decorators.js";
 import { HorizontalLightComponent } from "./HorizontalLightComponent";
 
 @customElement("ak-radio-input")
-export class AkRadioInput<T> extends HorizontalLightComponent {
+export class AkRadioInput<T> extends HorizontalLightComponent<T> {
     @property({ type: Object })
     value!: T;
 

web/src/components/ak-slug-input.ts

@@ -7,7 +7,7 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import { HorizontalLightComponent } from "./HorizontalLightComponent";
 
 @customElement("ak-slug-input")
-export class AkSlugInput extends HorizontalLightComponent {
+export class AkSlugInput extends HorizontalLightComponent<string> {
     @property({ type: String, reflect: true })
     value = "";
 

web/src/components/ak-text-input.ts

@@ -5,13 +5,18 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import { HorizontalLightComponent } from "./HorizontalLightComponent";
 
 @customElement("ak-text-input")
-export class AkTextInput extends HorizontalLightComponent {
+export class AkTextInput extends HorizontalLightComponent<string> {
     @property({ type: String, reflect: true })
     value = "";
 
     renderControl() {
+        const setValue = (ev: InputEvent) => {
+            this.value = (ev.target as HTMLInputElement).value;
+        };
+
         return html` <input
             type="text"
+            @input=${setValue}
             value=${ifDefined(this.value)}
             class="pf-c-form-control"
             ?required=${this.required}

web/src/components/ak-textarea-input.ts

@@ -4,7 +4,7 @@ import { customElement, property } from "lit/decorators.js";
 import { HorizontalLightComponent } from "./HorizontalLightComponent";
 
 @customElement("ak-textarea-input")
-export class AkTextareaInput extends HorizontalLightComponent {
+export class AkTextareaInput extends HorizontalLightComponent<string> {
     @property({ type: String, reflect: true })
     value = "";