Add demo for chip autocomplete component. Fix serving demo app, new b…

.claude/settings.local.json

@@ -0,0 +1,7 @@
+{
+  "permissions": {
+    "allow": ["Bash(npm run serve:demo:*)"],
+    "deny": [],
+    "ask": []
+  }
+}

angular.json

@@ -56,11 +56,11 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
             "outputPath": "dist/demo-app",
             "index": "projects/demo-app/src/index.html",
-            "main": "projects/demo-app/src/main.ts",
+            "browser": "projects/demo-app/src/main.ts",
             "polyfills": ["zone.js"],
             "tsConfig": "projects/demo-app/tsconfig.app.json",
             "inlineStyleLanguage": "scss",
@@ -103,12 +103,9 @@
               "outputHashing": "all"
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
-              "sourceMap": true,
-              "namedChunks": true
+              "sourceMap": true
             }
           },
           "defaultConfiguration": "production"

projects/demo-app/src/app/app.routes.ts

@@ -27,6 +27,13 @@ export const routes: Routes = [
             c => c.DataTableComponent
           ),
       },
+      {
+        path: 'chip-autocomplete',
+        loadComponent: () =>
+          import(
+            './pages/components/chip-autocomplete/chip-autocomplete.component'
+          ).then(c => c.ChipAutocompleteComponent),
+      },
       { path: '', redirectTo: 'header', pathMatch: 'full' },
     ],
   },

projects/demo-app/src/app/pages/components/autocomplete/autocomplete.component.html

@@ -16,7 +16,7 @@ <h2>Example</h2>
       [searchFunction]="searchCountries"
       displayPattern="${name} (${code})"
       [showClearIcon]="true"
-      (onOptionSelected)="onCountrySelected($event)">
+      (optionSelected)="onCountrySelected($any($event))">
     </inbo-autocomplete>
 
     <div *ngIf="selectedCountry" class="selected-value">
@@ -42,7 +42,7 @@ <h2>Example with Input Mask</h2>
       mask="cc-cc-cc"
       displayPattern="${code} - ${name}"
       [showClearIcon]="true"
-      (onOptionSelected)="onProductSelected($event)">
+      (optionSelected)="onProductSelected($any($event))">
     </inbo-autocomplete>
 
     <div *ngIf="selectedProduct" class="selected-value">

projects/demo-app/src/app/pages/components/autocomplete/autocomplete.component.ts

@@ -3,18 +3,20 @@ import { Component } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
-import { NgInboModule } from 'ng-inbo';
+import { InboAutocompleteComponent } from 'projects/ng-inbo/src/public-api';
 import { of } from 'rxjs';
 import { delay } from 'rxjs/operators';
 
 interface Country {
   name: string;
   code: string;
+  [key: string]: unknown;
 }
 
 interface Product {
   code: string;
   name: string;
+  [key: string]: unknown;
 }
 
 @Component({
@@ -26,7 +28,7 @@ interface Product {
     ReactiveFormsModule,
     MatFormFieldModule,
     MatInputModule,
-    NgInboModule,
+    InboAutocompleteComponent,
   ],
   templateUrl: 'autocomplete.component.html',
   styleUrls: ['autocomplete.component.scss'],

projects/demo-app/src/app/pages/components/chip-autocomplete/chip-autocomplete.component.html

@@ -0,0 +1,127 @@
+<div class="component-container">
+  <h1>Chip Autocomplete Component</h1>
+  <div class="component-description">
+    <p>
+      The INBO Chip Autocomplete component combines a Material chips input with
+      autocomplete functionality. Users can select multiple items that are
+      displayed as removable chips.
+    </p>
+  </div>
+
+  <div class="example-container">
+    <h2>Example - Tags Selection</h2>
+
+    <inbo-chip-autocomplete
+      [placeholder]="'Add tags...'"
+      [(inputText)]="tagInput"
+      [(filteredValues)]="filteredTags"
+      valueProperty="id">
+      <ng-template #selectedTemplate let-tagId>
+        {{ getTagById(tagId)?.name }}
+      </ng-template>
+      <ng-template #optionTemplate let-tag>
+        <span class="option-content">
+          <span class="tag-color" [style.background-color]="tag.color"></span>
+          {{ tag.name }}
+        </span>
+      </ng-template>
+    </inbo-chip-autocomplete>
+
+    @if (selectedTagsData().length > 0) {
+      <div class="selected-value">
+        <p><strong>Selected tags:</strong></p>
+        <ul>
+          @for (tag of selectedTagsData(); track tag.id) {
+            <li>{{ tag.name }}</li>
+          }
+        </ul>
+      </div>
+    }
+  </div>
+
+  <div class="example-container">
+    <h2>Example - User Selection</h2>
+
+    <inbo-chip-autocomplete
+      [placeholder]="'Add users...'"
+      [(inputText)]="userInput"
+      [(filteredValues)]="filteredUsers"
+      valueProperty="id">
+      <ng-template #selectedTemplate let-userId>
+        {{ getUserById(userId)?.name }}
+      </ng-template>
+      <ng-template #optionTemplate let-user>
+        <div class="user-option">
+          <div class="user-name">{{ user.name }}</div>
+          <div class="user-email">{{ user.email }}</div>
+        </div>
+      </ng-template>
+    </inbo-chip-autocomplete>
+
+    @if (selectedUsersData().length > 0) {
+      <div class="selected-value">
+        <p><strong>Selected users:</strong></p>
+        <ul>
+          @for (user of selectedUsersData(); track user.id) {
+            <li>{{ user.name }} ({{ user.email }})</li>
+          }
+        </ul>
+      </div>
+    }
+  </div>
+
+  <div class="usage-container">
+    <h2>Usage</h2>
+    <pre>
+&lt;inbo-chip-autocomplete
+  [placeholder]="'Add items...'"
+  [(inputText)]="inputValue"
+  [(filteredValues)]="filteredItems"
+  valueProperty="id"&gt;
+  &lt;ng-template #selectedTemplate let-itemId&gt;
+    {{ '{Display selected item}' }}
+  &lt;/ng-template&gt;
+  &lt;ng-template #optionTemplate let-item&gt;
+    {{ '{Display option item}' }}
+  &lt;/ng-template&gt;
+&lt;/inbo-chip-autocomplete&gt;
+    </pre>
+
+    <h3>Inputs</h3>
+    <ul>
+      <li><code>placeholder</code> - Placeholder text for the input field</li>
+      <li>
+        <code>inputText</code> - Two-way binding for the input field text
+        (signal)
+      </li>
+      <li>
+        <code>filteredValues</code> - Two-way binding for the filtered options
+        array (computed signal)
+      </li>
+      <li>
+        <code>valueProperty</code> - Property name to use as the value (default:
+        'id')
+      </li>
+    </ul>
+
+    <h3>Templates</h3>
+    <ul>
+      <li>
+        <code>selectedTemplate</code> - Template for displaying selected chips
+        (receives the value property)
+      </li>
+      <li>
+        <code>optionTemplate</code> - Template for displaying autocomplete
+        options (receives the full option object)
+      </li>
+    </ul>
+
+    <h3>Best Practices</h3>
+    <ul>
+      <li>Use signals for reactive state management</li>
+      <li>Use computed signals for derived state (filtering)</li>
+      <li>Use the new &#64;if and &#64;for control flow syntax</li>
+      <li>Remove CommonModule import when using new control flow</li>
+    </ul>
+  </div>
+</div>

projects/demo-app/src/app/pages/components/chip-autocomplete/chip-autocomplete.component.scss

@@ -0,0 +1,24 @@
+@import '../../../shared/styles/component-demo.scss';
+
+.option-content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  .tag-color {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+  }
+}
+
+.user-option {
+  .user-name {
+    font-weight: 500;
+  }
+
+  .user-email {
+    font-size: 0.875rem;
+    color: rgba(0, 0, 0, 0.6);
+  }
+}