fix: change onMessage method visibility from private to protected in several components

Dropped "app-page-header" component from grid-dynamic-chart-data.component.html and replaced it with an h1 tag.

Author: rkaraivanov

projects/app-lob/src/app/app.component.ts

@@ -40,7 +40,7 @@ export class AppComponent implements OnInit {
 
     // eslint-disable-next-line @typescript-eslint/member-ordering
     @HostListener('window:message', ['$event'])
-    private onMessage(e: MessageEvent) {
+    protected onMessage(e: MessageEvent) {
         if (e.origin === e.data.origin && typeof e.data.themeStyle === 'string') {
             this.styleElem.textContent = e.data.themeStyle;
 

projects/app-lob/src/app/grid-dynamic-chart-data/grid-dynamic-chart-data.component.html

@@ -1,7 +1,7 @@
 
-<app-page-header title="Data Analysis Grid">
+<h1>
     Excel like data analysis showcase application with Ignite UI Angular components and extras
-</app-page-header>
+</h1>
 <div class="grid-chart-contextmenu-wrapper">
     <igx-grid #grid igxChartIntegration igxConditionalFormatting igxContextMenu primaryKey='id' [data]="data">
         <igx-column field="id" [hidden]="true"></igx-column>

projects/app-lob/src/app/grid-dynamic-chart-data/grid-dynamic-chart-data.component.ts

@@ -1,6 +1,6 @@
 /* eslint-disable max-len */
 import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
-import { IgxChartIntegrationDirective, IgxContextMenuDirective, IgxConditionalFormattingDirective,  OPTIONS_TYPE, CHART_TYPE, PageHeaderComponent } from 'igniteui-angular-extras';
+import { IgxChartIntegrationDirective, IgxContextMenuDirective, IgxConditionalFormattingDirective,  OPTIONS_TYPE, CHART_TYPE } from 'igniteui-angular-extras';
 
 import { FinancialData } from '../data/financialData';
 import { IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular';
@@ -10,7 +10,7 @@ import { DecimalPipe, CurrencyPipe } from '@angular/common';
     selector: 'app-grid-dynamic-chart-data',
     templateUrl: './grid-dynamic-chart-data.component.html',
     styleUrls: ['./grid-dynamic-chart-data.component.scss'],
-    imports: [IgxGridComponent, PageHeaderComponent, IgxChartIntegrationDirective, IgxConditionalFormattingDirective, IgxContextMenuDirective, IgxColumnComponent, IgxCellTemplateDirective, DecimalPipe, CurrencyPipe]
+    imports: [IgxGridComponent, IgxChartIntegrationDirective, IgxConditionalFormattingDirective, IgxContextMenuDirective, IgxColumnComponent, IgxCellTemplateDirective, DecimalPipe, CurrencyPipe]
 })
 export class GridDynamicChartDataComponent implements OnInit, AfterViewInit {
 
@@ -42,4 +42,4 @@ export class GridDynamicChartDataComponent implements OnInit, AfterViewInit {
     public formatCurrency(value: number) {
         return '$' + value.toFixed(3);
     }
-}
+}

projects/app-lob/src/app/index/docs-layout.component.ts

@@ -18,7 +18,7 @@ export class DocsLayoutComponent implements OnInit {
     private typefaceUrl = 'https://fonts.googleapis.com/css?family=';
 
     @HostListener('window:message', ['$event'])
-    private onMessage(e: MessageEvent) {
+    protected onMessage(e: MessageEvent) {
         if (e.origin === e.data.origin && typeof e.data.themeStyle === 'string') {
             this.styleElem.textContent = e.data.themeStyle;