Feature/local navigation

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/examples.module.ts

@@ -2,7 +2,11 @@ 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';
@@ -14,6 +18,7 @@ import { DataTableExampleModule } from './data-table-example/table-example.modul
 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';
@@ -58,11 +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

@@ -259,6 +259,13 @@ export const routes: Routes = [
           },
         ],
       },
+      {
+        path: 'experimental',
+        loadChildren: () =>
+          import('./experimental-examples/experimental-examples.module').then(
+            (m) => m.ExperimentalExamplesModule
+          ),
+      },
     ],
   },
   {

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

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

apps/cookbook/src/app/examples/experimental-examples/components/page-local-navigation/page-local-navigation-example.component.ts

@@ -0,0 +1,49 @@
+import { Component } from '@angular/core';
+import { LocalNavigationItem } from '@kirbydesign/designsystem';
+import { BasePageExampleComponent } from '../../../page-example/base-page-example.component';
+
+const config = {
+  template: `<kirby-page title="Simple Page" subtitle="Subtitle of simple page" defaultBackHref="/">
+  <kirby-page-local-navigation *kirbyPageStickyContent [items]="items" [selectedIndex]="0"></kirby-page-local-navigation>
+  <kirby-page-content>
+    <div [innerHTML]="content"></div>
+  </kirby-page-content>
+</kirby-page>`,
+};
+@Component({
+  template: config.template,
+})
+export class PageLocalNavigationExampleComponent extends BasePageExampleComponent {
+  items: LocalNavigationItem[] = [
+    {
+      text: 'Item 1',
+    },
+    {
+      text: 'Item 2',
+      badge: {
+        content: { name: 'attach', isCustom: false },
+        themeColor: 'warning',
+      },
+    },
+    {
+      text: 'Item 3',
+      badge: {
+        themeColor: 'success',
+        content: { text: '2' },
+      },
+    },
+    {
+      text: 'Item 4',
+    },
+    {
+      text: 'Item 5 longer',
+    },
+    {
+      text: 'Item 6 longer',
+    },
+  ];
+
+  static readonly template = config.template
+    .replace(' defaultBackHref="/"', '')
+    .replace('<div [innerHTML]="content"></div>', '...');
+}

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

@@ -0,0 +1,33 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { KirbyExperimentalModule, KirbyModule } from '@kirbydesign/designsystem';
+import { PageLocalNavigationExampleComponent } from './components';
+import { ExamplesSharedModule } from '~/app/examples/examples.shared.module';
+
+const COMPONENT_DECLARATIONS = [PageLocalNavigationExampleComponent];
+
+const routes: Routes = [
+  {
+    path: '',
+    children: [
+      {
+        path: 'local-navigation',
+        component: PageLocalNavigationExampleComponent,
+      },
+    ],
+  },
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    RouterModule.forChild(routes),
+    KirbyModule,
+    KirbyExperimentalModule,
+    ExamplesSharedModule,
+  ],
+  exports: COMPONENT_DECLARATIONS,
+  declarations: COMPONENT_DECLARATIONS,
+})
+export class ExperimentalExamplesModule {}

libs/designsystem/src/lib/components/index.ts

@@ -65,3 +65,5 @@ export { ToggleComponent } from './toggle/toggle.component';
 
 export { ProgressCircleComponent } from './progress-circle/progress-circle.component';
 export * from './toggle-button';
+
+export * from './page-local-navigation';

libs/designsystem/src/lib/components/page-local-navigation/index.ts

@@ -0,0 +1,2 @@
+export { PageLocalNavigationComponent } from './page-local-navigation.component';
+export { LocalNavigationItem } from './page-local-navigation-item';

libs/designsystem/src/lib/components/page-local-navigation/page-local-navigation-item.ts

@@ -0,0 +1,28 @@
+import { ThemeColor } from '@kirbydesign/core';
+
+type BadgeIcon = {
+  name: string;
+  isCustom: boolean;
+};
+
+type BadgeText = {
+  text: string;
+};
+
+type ItemBadge = {
+  content: BadgeIcon | BadgeText;
+  description?: string;
+  themeColor: ThemeColor;
+};
+
+export interface LocalNavigationItem {
+  /**
+   * Text of the item
+   */
+  text: string;
+
+  /**
+   * Optional badge to show with the item
+   */
+  badge?: ItemBadge;
+}

libs/designsystem/src/lib/components/page-local-navigation/page-local-navigation.component.html

@@ -0,0 +1,38 @@
+<div class="container">
+  <div class="tab-bar" #tabBar>
+    <div
+      class="tab-item"
+      *ngFor="let item of items; let i = index"
+      (click)="onTabChange(i)"
+      [ngClass]="i === selectedIndex ? 'selected' : ''"
+      [tabIndex]="0"
+      (keydown.enter)="onTabChange(i)"
+      (keydown.arrowLeft)="focusNext(i - 1)"
+      (keydown.arrowRight)="focusNext(i + 1)"
+    >
+      <div class="tab-item-inner" [class.extended]="!!item.badge">
+        <span [attr.text]="item.text">{{ item.text }}</span>
+        <ng-container *ngIf="item.badge; let badge">
+          <kirby-badge
+            role="text"
+            [attr.aria-label]="badge.description"
+            [themeColor]="badge.themeColor"
+          >
+            <ng-container *ngIf="badge.content.name; else badgeTextContent">
+              <kirby-icon
+                *ngIf="badge.content.isCustom; else defaultIconName"
+                [customName]="badge.content.name"
+              ></kirby-icon>
+              <ng-template #defaultIconName>
+                <kirby-icon [name]="badge.content.name"></kirby-icon>
+              </ng-template>
+            </ng-container>
+            <ng-template #badgeTextContent>
+              {{ badge.content.text }}
+            </ng-template>
+          </kirby-badge>
+        </ng-container>
+      </div>
+    </div>
+  </div>
+</div>

libs/designsystem/src/lib/components/page-local-navigation/page-local-navigation.component.scss

@@ -0,0 +1,117 @@
+@use '~@kirbydesign/core/src/scss/utils';
+
+$tab-item-text-max-width: 100px;
+$bottom-border-height: 1px;
+$border-color-standard: utils.get-color('medium');
+$border-color-selected: utils.get-color('dark');
+$divider-max-width-breakpoint: utils.$page-content-max-width + (utils.size('s') * 2);
+
+.tab-bar {
+  position: relative;
+  margin: 0 auto;
+  display: flex;
+  gap: utils.size('xs');
+  align-items: center;
+  justify-content: left;
+  flex-wrap: nowrap;
+  overflow-y: hidden;
+  overflow-x: scroll;
+
+  // Ensures that the .container divider pseudo-element does not overlap the .selected divider pseudo-element.
+  // There seems be a weird bug with the iOS browser where z-index of scrollable elements are not respected with momentum scrolling active - so we disable it for now.
+  -webkit-overflow-scrolling: auto;
+
+  // Hide scrollbar for Firefox
+  scrollbar-width: none;
+
+  // Hide scrollbar for Chrome, Edge, Safari and Opera
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.container {
+  position: relative;
+  background-color: utils.get-color('background-color');
+  max-width: var(--page-content-max-width, utils.$page-content-max-width);
+
+  // Divider
+  &::before {
+    content: '';
+    background-color: $border-color-standard;
+    position: absolute;
+    height: $bottom-border-height;
+    bottom: 0;
+    z-index: 1;
+    left: 0;
+    width: 100%;
+
+    @include utils.media('<=#{$divider-max-width-breakpoint}') {
+      left: -#{utils.size('s')};
+      width: calc(100% + (#{utils.size('s')} * 2));
+    }
+  }
+}
+
+.tab-item {
+  position: relative;
+  cursor: pointer;
+  box-sizing: border-box;
+  outline: none;
+  padding-bottom: $bottom-border-height * 2;
+
+  // Selected divider
+  &.selected::before {
+    content: '';
+    width: 100%;
+    background-color: $border-color-selected;
+    position: absolute;
+    border-radius: 1px;
+    height: $bottom-border-height * 2;
+    bottom: 0;
+    z-index: 2;
+  }
+
+  &.selected,
+  &:focus,
+  &:hover {
+    font-weight: utils.font-weight('bold');
+  }
+}
+
+.tab-item-inner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  margin: utils.size('s');
+
+  // Disable text selection on tab items
+  user-select: none;
+
+  kirby-badge {
+    margin-left: utils.size('xxxs');
+  }
+
+  & > span {
+    max-width: $tab-item-text-max-width;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    // The larger line-height ensures no vertical layout shifts when changing the span's text content from bold to normal font-weight.
+    // See lines 75-79
+    line-height: utils.size('m');
+  }
+
+  // Using the before selector to insert a hidden pseudo-element with the same text content in bold,
+  // ensures no horizontal layout shifts when changing the visible span's text content from bold to normal font-weight.
+  // See lines 75-79
+  & > span::before {
+    display: block;
+    content: attr(text);
+    font-weight: bold;
+    height: 0;
+    overflow: hidden;
+    visibility: hidden;
+  }
+}