# Angular Components

This is the Angular wrapper library generated from the LMVZ-DS Components package via [Stencil](https://stenciljs.com/).

## Angular project stub

The Angular project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.2.8 and upgraded to 20.3.7.

## Build

Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory and published from there (during the root project's `pnpm publish` run).

## lmvz-select Value Accessor

The `LmvzSelectValueChangeHelper` directive provides automatic `ControlValueAccessor` integration for `lmvz-select`, supporting both single-select and multiselect modes on the same component via `formControlName`, `[(ngModel)]`, or manual `FormControl` binding.

### Value Type

The resulting `FormControl`/`FormGroup` value type is **`string | string[] | null`** regardless of mode. This intentionally looser type reflects the component's runtime behavior:
- **Single-select mode** (`multiple` false or unset): `value` is `string | null`
- **Multiselect mode** (`multiple` true): `values` is `string[]`

The accessor branches in `writeValue` on the shape of the incoming value; your app must set compatible values. See [`lmvz-select` `value` and `values` props](https://github.com/lmvz/lmvz-ds/blob/main/packages/components/src/components/lmvz-select/lmvz-select.tsx#L150-L168) for full prop documentation.

### Property Binding for `values` (Multiselect)

The `values` prop is a **JS property only** — it is not attribute-reflected. Template attribute bindings do not work:

```typescript
// ❌ Silently fails
<lmvz-select [multiple]="true" values="['ch', 'de']"></lmvz-select>

// ✓ Correct: property binding
<lmvz-select [multiple]="true" [values]="selectedValues"></lmvz-select>

// ✓ Correct: form control binding (recommended for form integration)
<lmvz-select [formControl]="myControl"></lmvz-select>
```

### Runtime `multiple` Mode Switching

Toggling the `multiple` prop at runtime is an **app-level responsibility**. The component does not automatically reset the control's value when switching modes. If you toggle `multiple` dynamically:

1. The stale value left in the now-inactive field (`value` in single→multi, `values` in multi→single) is ignored.
2. **You must explicitly reset the control's value** to match the new shape:

```typescript
// When switching from single to multiselect
this.selectControl.setValue([this.selectControl.value]);

// When switching from multiselect to single
this.selectControl.setValue(this.selectControl.value[0]);
```

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.