#821 Migrate PhotoCapture component

src/components/combobox/Combobox.ts

@@ -1,9 +1,8 @@
-import { customElement, WebComponent } from '@/lib/components'
+import { customElement, FormControlComponent, FormControlValue } from '@/lib/components'
 import { Task } from '@lit/task'
 import { html, nothing, TemplateResult, type PropertyValues } from 'lit'
 import { property, query, state } from 'lit/decorators.js'
 import { debounce } from '@/lib/timing'
-import FormControlTrait from '@/lib/components/traits/FormControlTrait'
 import type ComboboxOption from '@/components/combobox-option/ComboboxOption'
 
 import '~icons/lucide/chevron-down'
@@ -15,7 +14,7 @@ import styles from './Combobox.styles.css'
 class AsyncOptionsInfo extends Error {}
 
 export type ComboboxOptionData = {
-  value: unknown;
+  value: FormControlValue;
   label: string;
   template?: TemplateResult;
   selectable?: boolean;
@@ -30,24 +29,8 @@ export function defineAsyncComboboxOptionsProvider<T extends AsyncComboboxOption
 }
 
 @customElement('solid-ui-combobox')
-export default class Combobox extends WebComponent {
+export default class Combobox extends FormControlComponent {
   static styles = styles
-  static formAssociated = true
-
-  @property({ type: String, reflect: true })
-  accessor label = ''
-
-  @property({ type: String, reflect: true })
-  accessor name = ''
-
-  @property()
-  accessor value = ''
-
-  @property({ type: String, reflect: true })
-  accessor placeholder = ''
-
-  @property({ type: Boolean, reflect: true })
-  accessor required = false
 
   @property({ type: Boolean, reflect: true, attribute: 'select-only' })
   accessor selectOnly = false
@@ -71,7 +54,7 @@ export default class Combobox extends WebComponent {
   accessor optionsFallback: ComboboxOptionData[] | null = null
 
   @query('input')
-  private accessor inputElement: HTMLInputElement | null = null
+  protected accessor controlElement: HTMLInputElement | null = null
 
   @state()
   private accessor filter = ''
@@ -85,7 +68,6 @@ export default class Combobox extends WebComponent {
   @state()
   private accessor activeIndex = -1
 
-  private controlTrait: FormControlTrait
   private openListenersAttached = false
   private updateDebouncedFilter = debounce(300, (value) => (this.filter = value))
   private asyncOptionsTask?: Task<readonly [string], ComboboxOptionData[]>
@@ -95,13 +77,6 @@ export default class Combobox extends WebComponent {
   constructor () {
     super()
 
-    this.controlTrait = this.addTrait(
-      new FormControlTrait(this, {
-        getControlElement: () => this.inputElement,
-        getInternals: () => this.getInternals(),
-      })
-    )
-
     this.listboxId = `listbox-${this.controlTrait.controlId}`
   }
 
@@ -180,7 +155,7 @@ export default class Combobox extends WebComponent {
             .value=${this.displayValue}
             @keydown=${this.onInputKeyDown}
             @focus=${this.onInputFocus}
-            @input=${() => this.selectOnly ? this.updateDisplayValue(this.inputElement?.value ?? '') : this.controlTrait.onInput()}
+            @input=${() => this.selectOnly ? this.updateDisplayValue(this.controlElement?.value ?? '') : this.controlTrait.onInput()}
           />
           <icon-lucide-chevron-down></icon-lucide-chevron-down>
         </div>
@@ -288,7 +263,7 @@ export default class Combobox extends WebComponent {
   }
 
   private updateDisplayValue (value: unknown) {
-    this.displayValue = String(value)
+    this.displayValue = value ? String(value) : ''
 
     if (this.open) {
       const filter = this.displayValue.toLowerCase()
@@ -386,7 +361,7 @@ export default class Combobox extends WebComponent {
 
     this.hide()
     this.controlTrait.setValue(option.value)
-    this.inputElement?.focus({ preventScroll: true })
+    this.controlElement?.focus({ preventScroll: true })
     this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: { option } }))
 
     if (previousValue === this.value) {
@@ -455,12 +430,12 @@ export default class Combobox extends WebComponent {
   }
 
   private onAnchorMouseDown (event: MouseEvent) {
-    if (event.target === this.inputElement) {
+    if (event.target === this.controlElement) {
       return
     }
 
     event.preventDefault()
-    this.inputElement?.focus({ preventScroll: true })
+    this.controlElement?.focus({ preventScroll: true })
   }
 
   private onInputFocus () {
@@ -511,7 +486,7 @@ export default class Combobox extends WebComponent {
           event.preventDefault()
           event.stopPropagation()
           this.hide()
-          this.inputElement?.focus({ preventScroll: true })
+          this.controlElement?.focus({ preventScroll: true })
         }
         break
       case 'Tab':

src/components/input/Input.ts

@@ -1,46 +1,18 @@
-import { customElement, WebComponent } from '@/lib/components'
+import { customElement, FormControlComponent } from '@/lib/components'
 import { html } from 'lit'
 import { property, query } from 'lit/decorators.js'
-import FormControlTrait from '@/lib/components/traits/FormControlTrait'
 
 import styles from './Input.styles.css'
 
 @customElement('solid-ui-input')
-export default class Input extends WebComponent {
+export default class Input extends FormControlComponent {
   static styles = styles
-  static formAssociated = true
-
-  @property({ type: String, reflect: true })
-  accessor label = '';
-
-  @property({ type: String, reflect: true })
-  accessor name = '';
-
-  @property({ type: String })
-  accessor value = '';
 
   @property({ type: String, reflect: true })
   accessor type = 'text';
 
-  @property({ type: String, reflect: true })
-  accessor placeholder = '';
-
-  @property({ type: Boolean, reflect: true })
-  accessor required = false;
-
   @query('input')
-  private accessor inputElement: HTMLInputElement | null = null;
-
-  private controlTrait: FormControlTrait
-
-  constructor () {
-    super()
-
-    this.controlTrait = this.addTrait(new FormControlTrait(this, {
-      getControlElement: () => this.inputElement,
-      getInternals: () => this.getInternals(),
-    }))
-  }
+  protected accessor controlElement: HTMLInputElement | null = null;
 
   protected render () {
     return html`

src/components/login-modal/LoginModal.ts

@@ -80,7 +80,7 @@ export default class LoginModal extends WebComponent {
   }
 
   private onIssuerInputChange (e: Event) {
-    this.issuerInputValue = (e.target as Combobox).value
+    this.issuerInputValue = String((e.target as Combobox).value)
   }
 
   private async onSubmit (e: Event) {

src/components/photo-capture-modal/PhotoCaptureModal.styles.css

@@ -0,0 +1,32 @@
+.viewport {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    min-height: 200px;
+    border-radius: 0.5rem;
+    overflow: hidden;
+    background: color-mix(in srgb, #ffffff 92%, #000 8%);
+}
+
+.viewport video,
+.viewport img {
+    display: block;
+    width: 100%;
+    max-width: 260px;
+    height: auto;
+    border-radius: 0.5rem;
+    margin: 0 auto;
+    object-fit: cover;
+}
+
+.status {
+    width: 100%;
+    text-align: center;
+    color: var(--photo-capture-muted-text);
+    font-size: 0.875rem;
+}
+
+.status.error {
+    color: var(--color-error, #b00020);
+}