Merge branch 'develop'

apps/docs/src/app/components/copy-button/copy-button.component.scss

@@ -1,5 +1,5 @@
 :host {
   position: absolute;
-  top: 0;
-  right: 0;
+  top: 4px;
+  right: 4px;
 }

apps/docs/src/app/components/inputs-table/inputs-table.component.html

@@ -1,4 +1,4 @@
-<anglify-item-group [mandatory]="true" [formControl]="selection">
+<anglify-item-group [mandatory]="true" [value]="(selection$ | async) ?? []" (valueChange)="selection$.next($event)">
   <ng-template *ngFor="let c of selectables$ | async" slot="item-group-item" let-active="active" let-toggle>
     <anglify-chip [active]="active" (click)="toggle()">{{ c }}</anglify-chip>
   </ng-template>

apps/docs/src/app/components/inputs-table/inputs-table.component.ts

@@ -2,10 +2,10 @@ import { ChipComponent, ItemGroupComponent, SlotDirective } from '@anglify/compo
 import { AsyncPipe, NgForOf, NgIf } from '@angular/common';
 import { HttpClient, HttpClientModule } from '@angular/common/http';
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
 import { UntilDestroy } from '@ngneat/until-destroy';
 import { BehaviorSubject, combineLatest, type Observable } from 'rxjs';
-import { map, startWith, take } from 'rxjs/operators';
+import { map, take } from 'rxjs/operators';
 import type { APIConfig, Documentation } from '../../app.interface';
 import { ComponentAPIComponent } from '../component-api/component-api.component';
 import { DirectiveAPIComponent } from '../directive-api/directive-api.component';
@@ -50,7 +50,7 @@ export class InputsTableComponent {
     this._interfaces$.next(value);
   }
 
-  public selection = new FormControl(0);
+  protected selection$ = new BehaviorSubject([0]);
 
   public constructor(private readonly httpClient: HttpClient) {
     this.httpClient
@@ -94,9 +94,7 @@ export class InputsTableComponent {
     })
   );
 
-  public selectedName$ = combineLatest([this.selection.valueChanges.pipe(startWith(this.selection.value)), this.selectables$]).pipe(
-    map(([index, selectables]) => selectables[index!])
-  );
+  public selectedName$ = combineLatest([this.selection$, this.selectables$]).pipe(map(([index, selectables]) => selectables[index[0]!]));
 
   public components$ = combineLatest([this.documentation$, this.config$]).pipe(
     map(([documentation, config]) => {

apps/docs/src/app/examples/autocomplete/access-value/access-value.component.html

@@ -0,0 +1,25 @@
+<div class="objects">
+  <anglify-autocomplete
+    [(value)]="selection1"
+    [items]="top10Movies"
+    itemTextKey="label"
+    itemValueKey="id"
+    appearance="outlined"
+    [multiple]="true"
+    label="Your favourite movies"
+  >
+  </anglify-autocomplete>
+  Selected IDs: {{ selection1 }}
+</div>
+
+<div class="primitives">
+  <anglify-autocomplete
+    [(value)]="selection2"
+    [items]="top10MovieNames"
+    appearance="outlined"
+    [multiple]="true"
+    label="Your favourite movies"
+  >
+  </anglify-autocomplete>
+  Selected Names: {{ selection2 }}
+</div>

apps/docs/src/app/examples/autocomplete/access-value/access-value.component.scss

@@ -0,0 +1,6 @@
+:host {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: 48px;
+}

apps/docs/src/app/examples/autocomplete/access-value/access-value.component.ts

@@ -0,0 +1,36 @@
+import {
+  AutocompleteComponent,
+  SlotDirective,
+  ListItemComponent,
+  ListItemTitleComponent,
+  ListItemDescriptionComponent,
+  CheckboxComponent,
+} from '@anglify/components';
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { top10MovieNames, top10Movies } from '../../examples';
+
+@Component({
+  standalone: true,
+  imports: [
+    CommonModule,
+    AutocompleteComponent,
+    SlotDirective,
+    ListItemComponent,
+    ListItemTitleComponent,
+    ListItemDescriptionComponent,
+    CheckboxComponent,
+  ],
+  templateUrl: './access-value.component.html',
+  styleUrls: ['./access-value.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export default class AccessValueComponent {
+  protected top10Movies = top10Movies;
+
+  protected selection1 = ['1010', '1004'];
+
+  protected top10MovieNames = top10MovieNames;
+
+  protected selection2 = ['The Godfather'];
+}

apps/docs/src/app/examples/autocomplete/chips/chips.component.html

@@ -0,0 +1,5 @@
+<anglify-autocomplete appearance="outlined" label="Your favourite movies" [multiple]="true" [items]="top10Movies" itemTextKey="label">
+  <ng-template slot="selection" let-context>
+    <anglify-chip *ngFor="let item of context.selectedItems">{{ item.label }}</anglify-chip>
+  </ng-template>
+</anglify-autocomplete>

apps/docs/src/app/examples/autocomplete/chips/chips.component.scss

@@ -0,0 +1,8 @@
+:host {
+  width: 100%;
+
+  anglify-chip {
+    --anglify-chip-height: 14px;
+    --anglify-chip-padding: 5px 10px;
+  }
+}

apps/docs/src/app/examples/autocomplete/chips/chips.component.ts

@@ -0,0 +1,15 @@
+import { AutocompleteComponent, ChipComponent, SlotDirective } from '@anglify/components';
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { top10Movies } from '../../examples';
+
+@Component({
+  standalone: true,
+  imports: [CommonModule, AutocompleteComponent, SlotDirective, ChipComponent],
+  templateUrl: './chips.component.html',
+  styleUrls: ['./chips.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export default class ChipsComponent {
+  protected top10Movies = top10Movies;
+}

apps/docs/src/app/examples/autocomplete/control-values-manually/control-values-manually.component.html

@@ -0,0 +1,12 @@
+<anglify-autocomplete
+  [(value)]="selection"
+  [items]="top10Movies"
+  itemTextKey="label"
+  itemValueKey="id"
+  appearance="outlined"
+  [multiple]="true"
+  label="Your favourite movies"
+>
+</anglify-autocomplete>
+Selected IDs: {{ selection }}
+<button anglifyButton type="button" (click)="toggleFightClub()">Toggle Fight Club</button>

apps/docs/src/app/examples/autocomplete/control-values-manually/control-values-manually.component.scss

@@ -0,0 +1,11 @@
+:host {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+
+  anglify-autocomplete {
+    min-width: 100%;
+  }
+}

apps/docs/src/app/examples/autocomplete/control-values-manually/control-values-manually.component.ts

@@ -0,0 +1,25 @@
+import { AutocompleteComponent, ButtonComponent, SlotDirective } from '@anglify/components';
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { top10Movies } from '../../examples';
+
+@Component({
+  standalone: true,
+  imports: [CommonModule, AutocompleteComponent, SlotDirective, ButtonComponent],
+  templateUrl: './control-values-manually.component.html',
+  styleUrls: ['./control-values-manually.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export default class ControlValuesManuallyComponent {
+  protected top10Movies = top10Movies;
+
+  protected selection = ['1010', '1004'];
+
+  protected toggleFightClub() {
+    if (this.selection.includes('1010')) {
+      this.selection = this.selection.filter(id => id !== '1010');
+    } else {
+      this.selection = [...this.selection, '1010'];
+    }
+  }
+}

apps/docs/src/app/examples/autocomplete/items-slot/items-slot.component.html

@@ -0,0 +1,20 @@
+<anglify-autocomplete [items]="top10Movies" itemTextKey="label" appearance="outlined" [multiple]="true" label="Your favourite movies">
+  <ng-template slot="items" let-context let-onItemClick="onItemClick">
+    <anglify-list-item
+      *ngFor="let item of context.filteredItems; let i = index"
+      [focusable]="false"
+      [state]="!item.disabled"
+      [ripple]="!item.disabled"
+      [disabled]="item.disabled"
+      [active]="context.selectedItems.includes(item)"
+      [highlight]="context.highlightedIndex === i"
+      (click)="onItemClick(item)"
+    >
+      <anglify-list-item-title>{{ item.label }}</anglify-list-item-title>
+      <anglify-list-item-description>{{ item.year }}</anglify-list-item-description>
+      <ng-template slot="prepend">
+        <anglify-checkbox [readonly]="true" [checked]="context.selectedItems.includes(item)"></anglify-checkbox>
+      </ng-template>
+    </anglify-list-item>
+  </ng-template>
+</anglify-autocomplete>

apps/docs/src/app/examples/autocomplete/items-slot/items-slot.component.scss

@@ -0,0 +1,3 @@
+:host {
+  width: 100%;
+}

apps/docs/src/app/examples/autocomplete/items-slot/items-slot.component.ts

@@ -0,0 +1,30 @@
+import {
+  AutocompleteComponent,
+  CheckboxComponent,
+  ListItemComponent,
+  ListItemDescriptionComponent,
+  ListItemTitleComponent,
+  SlotDirective,
+} from '@anglify/components';
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { top10Movies } from '../../examples';
+
+@Component({
+  standalone: true,
+  imports: [
+    CommonModule,
+    AutocompleteComponent,
+    SlotDirective,
+    ListItemComponent,
+    ListItemTitleComponent,
+    ListItemDescriptionComponent,
+    CheckboxComponent,
+  ],
+  templateUrl: './items-slot.component.html',
+  styleUrls: ['./items-slot.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export default class ItemsSlotComponent {
+  protected top10Movies = top10Movies;
+}

apps/docs/src/app/examples/autocomplete/no-data-with-chips/no-data-with-chips.component.html

@@ -0,0 +1,16 @@
+<anglify-autocomplete [items]="top10Movies" itemTextKey="label" appearance="outlined" [multiple]="true" label="Your favourite movies">
+  <ng-template slot="selection" let-context>
+    <anglify-chip *ngFor="let item of context.selectedItems">{{ item.label }}</anglify-chip>
+  </ng-template>
+  <ng-template slot="no-data">
+    <anglify-list-item [state]="false" [ripple]="false" [disabled]="true">
+      <ng-template slot="prepend">
+        <anglify-icon icon="mdi-alert-circle-outline"></anglify-icon>
+      </ng-template>
+      <anglify-list-item-title>No data available</anglify-list-item-title>
+      <ng-template slot="append">
+        <button type="button" anglifyButton appearance="text" (click)="openDocs()">View Docs</button>
+      </ng-template>
+    </anglify-list-item>
+  </ng-template>
+</anglify-autocomplete>

apps/docs/src/app/examples/autocomplete/no-data-with-chips/no-data-with-chips.component.scss

@@ -0,0 +1,3 @@
+:host {
+  width: 100%;
+}

apps/docs/src/app/examples/autocomplete/no-data-with-chips/no-data-with-chips.component.ts

@@ -0,0 +1,41 @@
+import {
+  AutocompleteComponent,
+  ButtonComponent,
+  ChipComponent,
+  ClickStopPropagationDirective,
+  IconComponent,
+  ListItemComponent,
+  ListItemTitleComponent,
+  SlotDirective,
+  SnackbarService,
+} from '@anglify/components';
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { top10Movies } from '../../examples';
+
+@Component({
+  standalone: true,
+  imports: [
+    CommonModule,
+    AutocompleteComponent,
+    SlotDirective,
+    ListItemComponent,
+    ListItemTitleComponent,
+    ChipComponent,
+    IconComponent,
+    ButtonComponent,
+    ClickStopPropagationDirective,
+  ],
+  templateUrl: './no-data-with-chips.component.html',
+  styleUrls: ['./no-data-with-chips.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export default class NoDataWithChipsComponent {
+  protected top10Movies = top10Movies;
+
+  public constructor(private readonly snackbar: SnackbarService) {}
+
+  protected openDocs() {
+    this.snackbar.open({ data: { label: 'Open docs clicked' } });
+  }
+}

apps/docs/src/app/examples/combobox/access-value/access-value.component.html

@@ -0,0 +1,19 @@
+<div class="objects">
+  <anglify-combobox
+    [(value)]="selection1"
+    [items]="top10Movies"
+    itemTextKey="label"
+    itemValueKey="id"
+    appearance="outlined"
+    [multiple]="true"
+    label="Your favourite movies"
+  >
+  </anglify-combobox>
+  Selected IDs: {{ selection1 }}
+</div>
+
+<div class="primitives">
+  <anglify-combobox [(value)]="selection2" [items]="top10MovieNames" appearance="outlined" [multiple]="true" label="Your favourite movies">
+  </anglify-combobox>
+  Selected Names: {{ selection2 }}
+</div>

apps/docs/src/app/examples/combobox/access-value/access-value.component.scss

@@ -0,0 +1,6 @@
+:host {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: 48px;
+}

apps/docs/src/app/examples/combobox/access-value/access-value.component.ts

@@ -0,0 +1,36 @@
+import {
+  CheckboxComponent,
+  ComboboxComponent,
+  ListItemComponent,
+  ListItemDescriptionComponent,
+  ListItemTitleComponent,
+  SlotDirective,
+} from '@anglify/components';
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { top10MovieNames, top10Movies } from '../../examples';
+
+@Component({
+  standalone: true,
+  imports: [
+    CommonModule,
+    ComboboxComponent,
+    SlotDirective,
+    ListItemComponent,
+    ListItemTitleComponent,
+    ListItemDescriptionComponent,
+    CheckboxComponent,
+  ],
+  templateUrl: './access-value.component.html',
+  styleUrls: ['./access-value.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export default class AccessValueComponent {
+  protected top10Movies = top10Movies;
+
+  protected selection1 = ['1010', '1004'];
+
+  protected top10MovieNames = top10MovieNames;
+
+  protected selection2 = ['The Godfather'];
+}

apps/docs/src/app/examples/combobox/chips/chips.component.html

@@ -0,0 +1,5 @@
+<anglify-combobox appearance="outlined" label="Your favourite movies" [multiple]="true" [items]="top10Movies" itemTextKey="label">
+  <ng-template slot="selection" let-context>
+    <anglify-chip *ngFor="let item of context.selectedItems">{{ item.label }}</anglify-chip>
+  </ng-template>
+</anglify-combobox>

apps/docs/src/app/examples/combobox/chips/chips.component.scss

@@ -0,0 +1,8 @@
+:host {
+  width: 100%;
+
+  anglify-chip {
+    --anglify-chip-height: 14px;
+    --anglify-chip-padding: 5px 10px;
+  }
+}