Deploy cookbook by merging develop into main

.vscode/settings.json

@@ -0,0 +1,16 @@
+{
+  "[html]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": true
+    },
+    "editor.formatOnSave": true
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": true
+    },
+    "editor.formatOnSave": true
+  }
+}

CHANGELOG.md

@@ -2,6 +2,29 @@
 
 Notable changes to the project will be documented in this file.
 
+## [7.2.1](https://github.com/kirbydesign/designsystem/compare/v7.1.1...v7.2.1) (28-10-2022)
+
+### Features
+
+- **data table** - introduce new Kirby Data Table component ([#2517](https://github.com/kirbydesign/designsystem/pull/2517))
+- **dropdown** - enable keyboard navigation in the dropdown ([#2424](https://github.com/kirbydesign/designsystem/pull/2424))
+- **formfield** - introduce affix functionality (pre- and suffix) ([#2545](https://github.com/kirbydesign/designsystem/pull/2545))
+- **icon** - add update icon ([#2558](https://github.com/kirbydesign/designsystem/pull/2558))
+- **local navigation** - introduce **experimental** local navigation component ([#2501](https://github.com/kirbydesign/designsystem/pull/2501))
+- **modal** - Add option to show an alert before dismissing modal ([#2514](https://github.com/kirbydesign/designsystem/pull/2514))
+- **tabs** - change position of badges([#2555](https://github.com/kirbydesign/designsystem/pull/2555))
+
+### Bugfixes
+
+- **chart** - upgrade Chart.js dependency to avoid chart-annotations version warning ([#2548 ](https://github.com/kirbydesign/designsystem/pull/2548))
+- **dropdown** - prevent dropdown focus ring on click ([#2544](https://github.com/kirbydesign/designsystem/pull/2544))
+- **dropdown** - fix opening direction when button intersects bottom of viewport ([#2544](https://github.com/kirbydesign/designsystem/pull/2544))
+- **fab-sheet** - fix no automatic close of fab-sheet on item click([#2472](https://github.com/kirbydesign/designsystem/pull/2472))
+
+## [7.1.1](https://github.com/kirbydesign/designsystem/compare/v7.1.0...v7.1.1) (12-10-2022)
+
+Fixes missing stylesheets in core packages. Due to modified publish flow made in v7.1.0. This only affects the published npm packages.
+
 ## [7.1.0](https://github.com/kirbydesign/designsystem/compare/v7.0.0...v7.1.0) (07-10-2022)
 
 ### Features

apps/cookbook/src/app/app.module.ts

@@ -6,7 +6,7 @@ import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
-import { KirbyModule } from '@kirbydesign/designsystem';
+import { KirbyExperimentalModule, KirbyModule } from '@kirbydesign/designsystem';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -34,6 +34,7 @@ registerLocaleData(localeData);
     HttpClientModule,
     FormsModule,
     KirbyModule,
+    KirbyExperimentalModule,
   ],
 
   providers: [

apps/cookbook/src/app/examples/data-table-example/data-table-example.component.html

@@ -0,0 +1,7 @@
+<h1>Data table</h1>
+
+<h2>Data table</h2>
+<cookbook-data-table-default-example></cookbook-data-table-default-example>
+
+<h2>Data table in card</h2>
+<cookbook-data-table-card-example></cookbook-data-table-card-example>

apps/cookbook/src/app/examples/data-table-example/data-table-example.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'cookbook-data-table-example',
+  templateUrl: './data-table-example.component.html',
+})
+export class DataTableExampleComponent {}

apps/cookbook/src/app/examples/data-table-example/examples/card.ts

@@ -0,0 +1,54 @@
+import { Component } from '@angular/core';
+import { ToastController } from '@kirbydesign/designsystem';
+import { Person, table_example_data } from '../table_example_data';
+
+const config = {
+  selector: 'cookbook-data-table-card-example',
+  template: `<kirby-card>
+  <table kirby-table>
+    <thead>
+      <tr>
+        <th>Name</th>
+        <th>Eyes</th>
+        <th>Gender</th>
+        <th>Hair</th>
+        <th>Skin</th>
+        <th>Birth year</th>
+        <th style="text-align:right;">Height (cm)</th>
+        <th style="text-align:right;">Weight (kg)</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr kirby-tr *ngFor="let rowData of tableData; let i = index" [selectable]="true" (click)="onClickRow(i)">
+          <td>{{rowData.name}}</td>
+          <td>{{rowData.eye_color}}</td>
+          <td>{{rowData.gender}}</td>
+          <td>{{rowData.hair_color}}</td>
+          <td>{{rowData.skin_color}}</td>
+          <td>{{rowData.birth_year}}</td>
+          <td style="text-align:right;">{{rowData.height}}</td>
+          <td style="text-align:right;">{{rowData.mass}}</td>
+      </tr>
+    </tbody>
+  </table>
+</kirby-card>`,
+};
+
+@Component({
+  selector: config.selector,
+  template: config.template,
+})
+export class DataTableCardExampleComponent {
+  tableData: Person[] = table_example_data;
+  template: string = config.template;
+
+  constructor(private toastController: ToastController) {}
+
+  onClickRow(index: number) {
+    this.toastController.showToast({
+      message: `You pressed row number ${index}`,
+      messageType: 'success',
+      durationInMs: 2000,
+    });
+  }
+}

apps/cookbook/src/app/examples/data-table-example/examples/default.ts

@@ -0,0 +1,31 @@
+import { Component } from '@angular/core';
+import { Person, table_example_data } from '../table_example_data';
+
+const config = {
+  selector: 'cookbook-data-table-default-example',
+  template: `<table kirby-table [fixedLayout]="true">
+    <thead>
+      <tr>
+        <th>Name</th>
+        <th style="text-align:right;">Height (cm)</th>
+        <th style="text-align:right;">Weight (kg)</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr kirby-tr *ngFor="let rowData of tableData">
+          <td>{{rowData.name}}</td>
+          <td style="text-align:right;">{{rowData.height}}</td>
+          <td style="text-align:right;">{{rowData.mass}}</td>
+      </tr>
+    </tbody>
+  </table>`,
+};
+
+@Component({
+  selector: config.selector,
+  template: config.template,
+})
+export class DataTableDefaultExampleComponent {
+  template: string = config.template;
+  tableData: Person[] = table_example_data.slice(0, 3);
+}

apps/cookbook/src/app/examples/data-table-example/table-example.module.ts

@@ -0,0 +1,16 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { KirbyModule } from '@kirbydesign/designsystem';
+
+import { DataTableCardExampleComponent } from './examples/card';
+import { DataTableDefaultExampleComponent } from './examples/default';
+
+const COMPONENT_DECLARATIONS = [DataTableCardExampleComponent, DataTableDefaultExampleComponent];
+
+@NgModule({
+  imports: [CommonModule, KirbyModule],
+  declarations: COMPONENT_DECLARATIONS,
+  exports: COMPONENT_DECLARATIONS,
+})
+export class DataTableExampleModule {}

apps/cookbook/src/app/examples/data-table-example/table_example_data.ts

@@ -0,0 +1,73 @@
+export interface Person {
+  name: string;
+  eye_color: string;
+  gender: string;
+  hair_color: string;
+  skin_color: string;
+  birth_year: string;
+  height: string;
+  mass: string;
+}
+
+export const table_example_data: Person[] = [
+  {
+    name: 'Luke Skywalker',
+    height: '172',
+    mass: '77',
+    hair_color: 'blond',
+    skin_color: 'fair',
+    eye_color: 'blue',
+    birth_year: '19BBY',
+    gender: 'male',
+  },
+  {
+    name: 'C-3PO',
+    height: '167',
+    mass: '75',
+    hair_color: 'n/a',
+    skin_color: 'gold',
+    eye_color: 'yellow',
+    birth_year: '112BBY',
+    gender: 'n/a',
+  },
+  {
+    name: 'R2-D2',
+    height: '96',
+    mass: '32',
+    hair_color: 'n/a',
+    skin_color: 'white, blue',
+    eye_color: 'red',
+    birth_year: '33BBY',
+    gender: 'n/a',
+  },
+  {
+    name: 'Darth Vader',
+    height: '202',
+    mass: '136',
+    hair_color: 'none',
+    skin_color: 'white',
+    eye_color: 'yellow',
+    birth_year: '41.9BBY',
+    gender: 'male',
+  },
+  {
+    name: 'Leia Organa',
+    height: '150',
+    mass: '49',
+    hair_color: 'brown',
+    skin_color: 'light',
+    eye_color: 'brown',
+    birth_year: '19BBY',
+    gender: 'female',
+  },
+  {
+    name: 'Obi-Wan Kenobi',
+    height: '182',
+    mass: '77',
+    hair_color: 'auburn, white',
+    skin_color: 'fair',
+    eye_color: 'blue-gray',
+    birth_year: '57BBY',
+    gender: 'male',
+  },
+];

apps/cookbook/src/app/examples/dropdown-example/examples/custom-item-template.ts

@@ -8,9 +8,11 @@ const config = {
   [items]="items"
   itemTextProperty="title">
   <kirby-item
-    *kirbyListItemTemplate="let item; let selected = selected"
+    *kirbyListItemTemplate="let item; let selected = selected; let focused = focused"
     selectable="true"
-    [selected]="selected">
+    [selected]="selected"
+    [class.focused]="focused"
+  >
     <kirby-icon *ngIf="selected" name="checkmark-selected" slot="start"></kirby-icon>
     <kirby-label>
       <h3>{{ item.title }}</h3>

apps/cookbook/src/app/examples/empty-state-example/empty-state-example.component.html

@@ -14,7 +14,7 @@
 </kirby-empty-state>
 <hr />
 <kirby-empty-state
-  iconName="help"
+  customIconName="football"
   title="No items"
   subtitle="You don't have any items. Call support to add some items to your account."
 ></kirby-empty-state>

apps/cookbook/src/app/examples/examples.common.ts

@@ -47,6 +47,7 @@ import { ToastExampleComponent } from './toast-example/toast-example.component';
 import { ToggleExampleComponent } from './toggle-example/toggle-example.component';
 import { PagePullToRefreshExampleComponent } from './page-example/pull-to-refresh/page-pull-to-refresh-example.component';
 import { DropdownExampleComponent } from './dropdown-example/dropdown-example.component';
+import { DataTableExampleComponent } from './data-table-example/data-table-example.component';
 
 export const COMPONENT_DECLARATIONS: any[] = [
   ExamplesComponent,
@@ -99,4 +100,5 @@ export const COMPONENT_DECLARATIONS: any[] = [
   ItemGroupExampleComponent,
   SectionHeaderExampleComponent,
   ListExperimentalExampleComponent,
+  DataTableExampleComponent,
 ];

apps/cookbook/src/app/examples/examples.module.ts

@@ -2,17 +2,23 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { IconRegistryService, KirbyModule } from '@kirbydesign/designsystem';
+import {
+  IconRegistryService,
+  KirbyExperimentalModule,
+  KirbyModule,
+} from '@kirbydesign/designsystem';
 
 import { AccordionExampleModule } from './accordion-example/accordion-example.module';
 import { AvatarExampleModule } from './avatar-example/avatar-example.module';
 import { BadgeExampleModule } from './badge-example/badge-example.module';
 import { CardExampleModule } from './card-example/card-example.module';
 import { ChartsExampleModule } from './charts-example/charts-example.module';
 import { CheckboxExampleModule } from './checkbox-example/checkbox-example.module';
+import { DataTableExampleModule } from './data-table-example/table-example.module';
 import { DropdownExampleModule } from './dropdown-example/dropdown-example.module';
 import { COMPONENT_DECLARATIONS } from './examples.common';
 import { ExamplesSharedModule } from './examples.shared.module';
+import { ExperimentalExamplesModule } from './experimental-examples/experimental-examples.module';
 import { FlagExampleModule } from './flag-example/flag-example.module';
 import { FormFieldExamplesModule } from './form-field-example/form-field-example.module';
 import { GridLayoutExamplesModule } from './grid-layout-example/grid-layout-example.module';
@@ -57,10 +63,12 @@ const IMPORTS = [
   ItemGroupExampleModule,
   ListExperimentalExampleModule,
   VirtualScrollExampleModule,
+  ExperimentalExamplesModule,
+  DataTableExampleModule,
 ];
 
 @NgModule({
-  imports: [CommonModule, RouterModule, KirbyModule, ...IMPORTS],
+  imports: [CommonModule, RouterModule, KirbyModule, KirbyExperimentalModule, ...IMPORTS],
   declarations: COMPONENT_DECLARATIONS,
   exports: [...COMPONENT_DECLARATIONS, ...IMPORTS],
 })

apps/cookbook/src/app/examples/examples.routes.ts

@@ -72,6 +72,7 @@ import { ToggleExampleComponent } from './toggle-example/toggle-example.componen
 import { VirtualScrollListExampleComponent } from './virtual-scroll-example/virtual-scroll-list-example/virtual-scroll-list-example.component';
 import { PagePullToRefreshExampleComponent } from './page-example/pull-to-refresh/page-pull-to-refresh-example.component';
 import { DropdownExampleComponent } from './dropdown-example/dropdown-example.component';
+import { DataTableExampleComponent } from './data-table-example/data-table-example.component';
 
 VirtualScrollListExampleComponent;
 export const routes: Routes = [
@@ -258,6 +259,13 @@ export const routes: Routes = [
           },
         ],
       },
+      {
+        path: 'experimental',
+        loadChildren: () =>
+          import('./experimental-examples/experimental-examples.module').then(
+            (m) => m.ExperimentalExamplesModule
+          ),
+      },
     ],
   },
   {
@@ -478,4 +486,8 @@ export const routes: Routes = [
     path: 'styling-HTML-lists',
     component: StylingHtmlListsExampleComponent,
   },
+  {
+    path: 'data-table',
+    component: DataTableExampleComponent,
+  },
 ];

apps/cookbook/src/app/examples/experimental-examples/components/index.ts

@@ -0,0 +1 @@
+export { PageLocalNavigationExampleComponent } from './page-local-navigation/page-local-navigation-example.component';