Page: add option to subscribe to toolbar title click (#3111)

kirbydesign · Jun 22, 2023 · 3abd42c · 3abd42c
1 parent 15777f1
commit 3abd42c
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git a/libs/designsystem/header/src/header.component.html b/libs/designsystem/header/src/header.component.html
@@ -8,7 +8,7 @@
 
 <div class="container">
     <!-- Title and value - title: -->
-  <h1 *ngIf="!!title && !!value" #titleElement class="title kirby-text-medium" [class.clickable]="titleClick.observed" [class.has-icon]="!!titleActionIconTemplate" (click)="onTitleClick($event)">
+  <h1 *ngIf="!!title && !!value" #titleElement class="title kirby-text-medium" [class.clickable]="hasInteractiveTitle !== false && titleClick.observed" [class.has-icon]="!!titleActionIconTemplate" (click)="onTitleClick($event)">
     {{ title }}
     <ng-container *ngTemplateOutlet="titleActionIconTemplate"></ng-container>
   </h1>

diff --git a/libs/designsystem/header/src/header.component.ts b/libs/designsystem/header/src/header.component.ts
@@ -81,6 +81,7 @@ export class HeaderComponent implements AfterContentInit, OnInit {
   @Input() valueUnit: string = null;
   @Input() subtitle1: string = null;
   @Input() subtitle2: string = null;
+  @Input() hasInteractiveTitle?: boolean;
 
   @Output() titleClick = new EventEmitter<PointerEvent>();
 

diff --git a/libs/designsystem/page/src/page.component.ts b/libs/designsystem/page/src/page.component.ts
@@ -215,6 +215,7 @@ export class PageComponent
   @Input() hideBackButton: boolean;
   @Input() titleMaxLines: number;
   @Input() maxWidth: 'default' | 'standard' | 'optimized' | 'full' = 'default';
+  @Input() hasInteractiveTitle: boolean;
 
   private _tabBarBottomHidden: boolean;
   public get tabBarBottomHidden(): boolean {
@@ -233,6 +234,7 @@ export class PageComponent
   @Output() leave = new EventEmitter<void>();
   @Output() refresh = new EventEmitter<PullToRefreshEvent>();
   @Output() backButtonClick = new EventEmitter<Event>();
+  @Output() toolbarTitleClick = new EventEmitter<PointerEvent>();
 
   @ViewChild(IonContent, { static: true }) private content?: IonContent;
   @ViewChild(IonContent, { static: true, read: ElementRef })
@@ -289,8 +291,6 @@ export class PageComponent
   stickyContentTemplate: TemplateRef<PageStickyContentDirective>;
   headerActionsTemplate: TemplateRef<HeaderActionsDirective>;
   titleActionIconTemplate: TemplateRef<HeaderTitleActionIconDirective>;
-  headerTitleClick?: EventEmitter<PointerEvent>;
-  hasInteractiveTitle = false;
 
   private titleIntersectionObserver?: IntersectionObserver;
   private stickyActionsIntersectionObserver?: IntersectionObserver;
@@ -457,7 +457,11 @@ export class PageComponent
   }
 
   onTitleClick(event: PointerEvent) {
-    this.headerTitleClick?.emit(event);
+    if (this.toolbarTitleClick.observed) {
+      this.toolbarTitleClick.emit(event);
+    } else {
+      this.header?.titleClick.emit(event);
+    }
   }
 
   private removeWrapper() {
@@ -541,9 +545,8 @@ export class PageComponent
       // Header could later be removed from DOM (e.g. in virtual scrolling scenarios),
       // so store a reference to `header.titleActionIconTemplate` and `header.titleClick`:
       this.titleActionIconTemplate = this.header.titleActionIconTemplate;
-      if (this.header.titleClick.observed) {
+      if (this.header.titleClick.observed && this.hasInteractiveTitle === undefined) {
         this.hasInteractiveTitle = true;
-        this.headerTitleClick = this.header.titleClick;
       }
     }
   }
@@ -583,6 +586,10 @@ export class PageComponent
       : typeof this.toolbarTitle === 'string'
         ? this.simpleToolbarTitleTemplate
         : defaultTitleTemplate;
+
+    if (this.toolbarTitleClick.observed && this.hasInteractiveTitle === undefined) {
+      this.hasInteractiveTitle = true;
+    }
   }
 
   private observeTitle() {