Bugfix/documentation

projects/material-addons/src/lib/quick-list/quick-list.component.html

@@ -3,7 +3,7 @@ <h3>
 </h3>
 <ng-container *ngFor="let item of allItems">
   <div *ngIf="itemTemplate" #row>
-    <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item }"> </ng-container>
+    <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item }"></ng-container>
     <mad-icon-button *ngIf="!(readonly || readonly === '')" [disabled]="!isDeleteAllowed()" (click)="removeItem(item)">
       <mat-icon>delete</mat-icon>
     </mad-icon-button>

projects/material-addons/src/lib/table/table.component.html

@@ -21,7 +21,7 @@
 <!-- Table filter -->
 <mat-form-field *ngIf="isFilterEnabled">
   <mat-label>{{ filterLabel }}</mat-label>
-  <input matInput (keyup)="onFilter($event)" placeholder="{{ filterPlaceholder }}" />
+  <input matInput (keyup)="onFilter($event?.target?.value)" placeholder="{{ filterPlaceholder }}" />
 </mat-form-field>
 
 <!-- Table -->

projects/material-addons/src/lib/table/table.component.ts

@@ -71,10 +71,14 @@ export class TableComponent implements OnInit, AfterViewInit {
   ngAfterViewInit(): void {
     this.dataSource.paginator = this.paginator;
     this.dataSource.sort = this.sort;
+    // set custom filter predicate to enable search for multiple search strings:
+    // e.g. "one two three"
+    this.dataSource.filterPredicate = (data: any, filter: string) => 
+      !filter || filter.split(/\s+/).every(term => !!Object.keys(data).find(key => data[key].includes(term)));
   }
 
-  onFilter(event: Event): void {
-    this.setFilterValue((event.target as HTMLInputElement)?.value);
+  onFilter(value: string): void {
+    this.setFilterValue(value);
   }
 
   onRowEvent(event: MouseEvent, row: any, action = this.defaultAction): void {

src/app/app-routing.module.ts

@@ -1,8 +1,6 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { IntroComponent } from './intro/intro.component';
-import { TableDemoComponent } from './demos/table-demo/table-demo.component';
-import { DetailComponent } from './demos/table-demo/detail/detail.component';
 import { HomeComponent } from './home/home.component';
 import { ReadOnlyDemoComponent } from './component-demos/read-only-demo/read-only-demo.component';
 import { InternationalizationComponent } from './internationalization/internationalization.component';
@@ -11,7 +9,7 @@ import { ActionButtonDemoComponent } from './component-demos/action-button-demo/
 import { NumericFieldDemoComponent } from './component-demos/numeric-field-demo/numeric-field-demo.component';
 import { CardDemoComponent } from './component-demos/card-demo/card-demo.component';
 import { QuickListDemoComponent } from './component-demos/quick-list-demo/quick-list-demo.component';
-import { ActionTableDemoComponent } from './component-demos/action-table-demo/action-table-demo.component';
+import { TableDemoComponent } from './component-demos/table-demo/table-demo.component';
 import {MadButtonsDemoComponent} from "./component-demos/mad-buttons-demo/mad-buttons-demo.component";
 
 const routes: Routes = [
@@ -31,28 +29,6 @@ const routes: Routes = [
       i18n: 'internationalization.title',
     },
   },
-  {
-    path: 'tableDemo',
-    component: TableDemoComponent,
-    pathMatch: 'full',
-    data: {
-      i18n: 'demos.tableDemo',
-    },
-  },
-  {
-    path: 'tableDemo/new',
-    component: DetailComponent,
-    data: {
-      i18n: 'demos.tableDemoCreate',
-    },
-  },
-  {
-    path: 'tableDemo/:demoId',
-    component: DetailComponent,
-    data: {
-      i18n: 'demos.tableDemoEdit',
-    },
-  },
   {
     path: 'readonly',
     component: ReadOnlyDemoComponent,
@@ -110,11 +86,11 @@ const routes: Routes = [
     },
   },
   {
-    path: 'action-table',
-    component: ActionTableDemoComponent,
+    path: 'table',
+    component: TableDemoComponent,
     pathMatch: 'full',
     data: {
-      i18n: 'components.demos.action-table',
+      i18n: 'components.demos.table',
     },
   },
   {

src/app/app.module.ts

@@ -10,8 +10,6 @@ import { UserIdComponent } from './components/navigation/user-id/user-id.compone
 import { MainNavigationComponent } from './components/navigation/main-navigation.component';
 import { LinkCardComponent } from './home/link-card/link-card.component';
 import { HomeComponent } from './home/home.component';
-import { TableDemoComponent } from './demos/table-demo/table-demo.component';
-import { DetailComponent } from './demos/table-demo/detail/detail.component';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
@@ -66,10 +64,13 @@ import { CardEditableComponent } from './example-components/card-editable/card-e
 import { CardReadonlyComponent } from './example-components/card-readonly/card-readonly.component';
 import { CardDemoComponent } from './component-demos/card-demo/card-demo.component';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { QuickListComponent } from './example-components/quick-list/quick-list.component';
+import { QuickListBasicComponent } from './example-components/quick-list-basic/quick-list-basic.component';
 import { QuickListDemoComponent } from './component-demos/quick-list-demo/quick-list-demo.component';
-import { ActionTableDemoComponent } from './component-demos/action-table-demo/action-table-demo.component';
-import { ActionTableComponent } from './example-components/action-table/action-table.component';
+import { TableDemoComponent } from './component-demos/table-demo/table-demo.component';
+import { TableComponent } from './example-components/table/table.component';
+import { CardExpandableComponent } from './example-components/card-expandable/card-expandable.component';
+import { ReadOnlyFieldErrorComponent } from './example-components/read-only-field-error/read-only-field-error.component';
+import { QuickListExtendedComponent } from './example-components/quick-list-extended/quick-list-extended.component';
 import { MadButtonsComponent } from './example-components/mad-buttons/mad-buttons.component';
 import { MadButtonsDemoComponent } from './component-demos/mad-buttons-demo/mad-buttons-demo.component';
 
@@ -88,8 +89,6 @@ export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
     LinkCardComponent,
     HomeComponent,
     IntroComponent,
-    TableDemoComponent,
-    DetailComponent,
     ReadOnlyDemoComponent,
     ExampleViewerComponent,
     ReadOnlyFieldComponent,
@@ -107,10 +106,13 @@ export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
     CardReadonlyComponent,
     MadButtonsComponent,
     QuickListDemoComponent,
-    QuickListComponent,
-    ActionTableDemoComponent,
-    ActionTableComponent,
-    MadButtonsDemoComponent,
+    QuickListBasicComponent,
+    QuickListExtendedComponent,
+    TableDemoComponent,
+    TableComponent,
+    CardExpandableComponent,
+    ReadOnlyFieldErrorComponent,
+    MadButtonsDemoComponent
   ],
   imports: [
     CommonModule,

src/app/component-demos/card-demo/card-demo.component.html

@@ -1,7 +1,20 @@
 <p>
-  Cards are used to group information.
+  The Addons extend the default Clarity cards by providing following additional types:
+  <ul>
+    <li>Editable card. The Editable card provides an additonal action to trigger an edit action.</li>
+    <li>Expandable card. The card can be expanded or closed.</li>
+  </ul>
+  <p>
+    Import the <app-text-code>CardModule</app-text-code> in your app.module.ts and use it via
+    <app-text-code>&lt;mad-card&gt;</app-text-code>
+  </p>
+  <p>
 </p>
-
 <example-viewer [example]="cardEditableComponent"></example-viewer>
 
 <example-viewer [example]="cardReadonlyComponent"></example-viewer>
+
+<p>
+  You can also enable collapse / expand
+</p>
+<example-viewer [example]="cardExpandableComponent"></example-viewer>

src/app/component-demos/card-demo/card-demo.component.ts

@@ -1,7 +1,8 @@
 import { Component } from '@angular/core';
 import { Example } from '../../components/example-viewer/example.class';
-import { CardEditableComponent } from 'src/app/example-components/card-editable/card-editable.component';
-import { CardReadonlyComponent } from 'src/app/example-components/card-readonly/card-readonly.component';
+import { CardEditableComponent } from '../../example-components/card-editable/card-editable.component';
+import { CardReadonlyComponent } from '../../example-components/card-readonly/card-readonly.component';
+import { CardExpandableComponent } from '../../example-components/card-expandable/card-expandable.component';
 
 @Component({
   selector: 'app-card-demo',
@@ -11,4 +12,5 @@ import { CardReadonlyComponent } from 'src/app/example-components/card-readonly/
 export class CardDemoComponent {
   cardEditableComponent = new Example(CardEditableComponent, 'card-editable', 'Editable Card wrapper');
   cardReadonlyComponent = new Example(CardReadonlyComponent, 'card-readonly', 'Readonly Card wrapper');
+  cardExpandableComponent = new Example(CardExpandableComponent, 'card-expandable', 'Expandable Card wrapper');
 }

src/app/component-demos/numeric-field-demo/numeric-field-demo.component.html

@@ -1,15 +1,22 @@
 <p>
   The Numeric Field is used to enter numeric values of a certain type.
 </p>
-<p>Usage</p>
-<p>
-  Import the <app-text-code>NumericFieldModule.forRoot()</app-text-code> in your app.module.ts and use it via the directive
-  <app-text-code>madNumericField</app-text-code>.
-</p>
+<h2>Usage</h2>
 <ul>
   <li>Invalid characters are ignored during input.</li>
   <li>Amount of decimal places should be defined according to the input type and usecase.</li>
   <li>Decimal separator and grouping separator should be set according to locale.</li>
 </ul>
+<p>
+  Because the numeric field is a directive, it can be applied on any input element.
+</p>
+<p>
+  Import the <app-text-code>NumericFieldModule.forRoot()</app-text-code> in your app.module.ts and use it via the directive
+  <app-text-code>madNumericField</app-text-code>.
+</p>
 
+<h2>Use when</h2>
+<ul>
+  <li>One of the following inputs is required from the user:</li>
+</ul>
 <example-viewer [example]="numericFieldWrapperComponent"></example-viewer>

src/app/component-demos/numeric-field-demo/numeric-field-demo.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { Example } from '../../components/example-viewer/example.class';
-import { NumericFieldWrapperComponent } from 'src/app/example-components/numeric-field-wrapper/numeric-field-wrapper.component';
+import { NumericFieldWrapperComponent } from '../../example-components/numeric-field-wrapper/numeric-field-wrapper.component';
 
 @Component({
   selector: 'app-numeric-field-demo',
@@ -9,4 +9,4 @@ import { NumericFieldWrapperComponent } from 'src/app/example-components/numeric
 })
 export class NumericFieldDemoComponent {
   numericFieldWrapperComponent = new Example(NumericFieldWrapperComponent, 'numeric-field-wrapper', 'Numeric form field wrapper');
-}
+}

src/app/component-demos/quick-list-demo/quick-list-demo.component.html

@@ -1,6 +1,31 @@
+<p>
+  Use to input an extensible list of input allItems
+</p>
+<h2>Use When</h2>
+<ul>
+  <li>Extensible list of input types (select boxes, inputs, ...) is needed</li>
+</ul>
+<h2>Behavior</h2>
+<ul>
+  <li>initially one select box is displayed</li>
+  <li>click on "Add option", adds another empty input-row</li>
+  <li>click on "trashbin-icon", removes input-row</li>
+  <ul>
+    <li>last item, input mandatory: "trashbin-icon" is disabled</li>
+    <li>last item, input optional: input-row is removed, only "ADD OPTION" remains.</li>
+  </ul>
+</ul>
 <p>
   Import the <app-text-code>QuickListModule</app-text-code> in your app.module.ts and use it via
   <app-text-code>&lt;mad-quick-list&gt;</app-text-code>.
 </p>
 
-<example-viewer [example]="quickListComponent"></example-viewer>
+<p>
+  Basic usage with optional values and no limits
+</p>
+<example-viewer [example]="basicQuickListComponent"></example-viewer> 
+
+<p>
+  Required value for last name and minimal 2 and maximal 5 entries set.
+</p>
+<example-viewer [example]="extendedQuickListComponent"></example-viewer> 

src/app/component-demos/quick-list-demo/quick-list-demo.component.ts

@@ -1,12 +1,15 @@
 import { Component } from '@angular/core';
-import { QuickListComponent } from 'src/app/example-components/quick-list/quick-list.component';
+import { QuickListBasicComponent } from '../../example-components/quick-list-basic/quick-list-basic.component';
 import { Example } from '../../components/example-viewer/example.class';
+import { QuickListExtendedComponent } from '../../example-components/quick-list-extended/quick-list-extended.component';
 
 @Component({
   selector: 'app-quick-list-demo',
   templateUrl: './quick-list-demo.component.html',
   styleUrls: ['./quick-list-demo.component.scss'],
 })
 export class QuickListDemoComponent {
-  quickListComponent = new Example(QuickListComponent, 'quick-list', 'Quick List');
+  basicQuickListComponent = new Example(QuickListBasicComponent, 'quick-list-basic', 'Quick List Basic');
+  extendedQuickListComponent = new Example(QuickListExtendedComponent, 'quick-list-extended', 'Quick List Extended');
+
 }

src/app/component-demos/read-only-demo/read-only-demo.component.html

@@ -1,9 +1,16 @@
 <p>
   Import the <app-text-code>ReadOnlyFormFieldModule</app-text-code> in your app.module.ts and use it via
-  <app-text-code>&lt;mad-readonly-form-field&gt;</app-text-code>. You can either make a readonly form field unchangeable or changeable
+  <app-text-code>&lt;mad-readonly-form-field&gt;</app-text-code>
+  You can either make a readonly form field unchangeable or changeable by using the readonly flag.
+</p>
+<p>
+  Undefined or null values are automatically handled from the readonly form field. Fields where not data is inputted are shown with an "-".
 </p>
 
 <example-viewer [example]="readOnlyFormFieldComponent"></example-viewer>
 
+<p>There is als an option to set error messages for the readonly field</p>
+<example-viewer [example]="readOnlyFormFieldErrorComponent"></example-viewer>
+
 <p>The changeable version needs a wrapper around the form field, therefore, it is a different component.</p>
 <example-viewer [example]="readOnlyFormFieldWrapperComponent"></example-viewer>

src/app/component-demos/read-only-demo/read-only-demo.component.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { ReadOnlyFieldComponent } from '../../example-components/read-only-field/read-only-field.component';
 import { Example } from '../../components/example-viewer/example.class';
 import { ReadOnlyFieldWrapperComponent } from '../../example-components/read-only-field-wrapper/read-only-field-wrapper.component';
+import { ReadOnlyFieldErrorComponent } from '../../example-components/read-only-field-error/read-only-field-error.component';
 
 @Component({
   selector: 'app-read-only-demo',
@@ -10,6 +11,7 @@ import { ReadOnlyFieldWrapperComponent } from '../../example-components/read-onl
 })
 export class ReadOnlyDemoComponent {
   readOnlyFormFieldComponent = new Example(ReadOnlyFieldComponent, 'read-only-field', 'Read only form field - unchangeable');
+  readOnlyFormFieldErrorComponent = new Example(ReadOnlyFieldErrorComponent, 'read-only-field-error', 'Read only form field - error');
   readOnlyFormFieldWrapperComponent = new Example(
     ReadOnlyFieldWrapperComponent,
     'read-only-field-wrapper',

src/app/component-demos/table-demo/table-demo.component.html

@@ -0,0 +1,13 @@
+<p>
+  Tables are for organizing large volumes of data that users can scan, compare and perform actions on.
+</p>
+<p>
+  Please find the main documentation here: <a href="https://material.angular.io/components/table/overview" title="Material Design Table">Material Design table</a><br>
+  In the following only additional features are documented
+</p>
+<p>
+  Import the <app-text-code>TableModule</app-text-code> in your app.module.ts and use it via
+  <app-text-code>&lt;mad-table&gt;</app-text-code>.
+</p>
+
+<example-viewer [example]="tableComponent"></example-viewer>

src/app/component-demos/table-demo/table-demo.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { Example } from '../../components/example-viewer/example.class';
+import { TableComponent } from '../../example-components/table/table.component';
+
+@Component({
+  selector: 'app-table-demo',
+  templateUrl: './table-demo.component.html',
+  styleUrls: ['./table-demo.component.scss'],
+})
+export class TableDemoComponent {
+  tableComponent = new Example(TableComponent, 'table', 'Table');
+}