@kirbydesign/designsystem 0.0.0

package/src/lib/components/page/page.component.spec.ts

@@ -0,0 +1,224 @@
+import { Component, NgZone } from '@angular/core';
+import { fakeAsync, flush, tick } from '@angular/core/testing';
+import { Router } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
+import { IonRefresher } from '@ionic/angular';
+import { createHostFactory, mockProvider, SpectatorHost, SpyObject } from '@ngneat/spectator';
+import { MockDirective } from 'ng-mocks';
+
+import { DesignTokenHelper } from '@kirbydesign/core';
+
+import { FitHeadingDirective } from '../../directives/fit-heading/fit-heading.directive';
+import { TestHelper } from '../../testing/test-helper';
+import { WindowRef } from '../../types/window-ref';
+import { ModalNavigationService } from '../modal/services/modal-navigation.service';
+import { TabsComponent } from '../tabs';
+
+import { PageComponent, PageContentComponent } from './page.component';
+
+const size = DesignTokenHelper.size;
+const fatFingerSize = DesignTokenHelper.fatFingerSize();
+
+@Component({})
+class DummyComponent {}
+
+describe('PageComponent', () => {
+  const titleText = 'Test Page';
+  const subtitleText = 'Page subtitle';
+  let spectator: SpectatorHost<PageComponent>;
+  let ionToolbar: HTMLElement;
+  let ionContent: HTMLElement;
+  let tabBar: SpyObject<TabsComponent>;
+  let router: SpyObject<Router>;
+  let modalNavigationService: SpyObject<ModalNavigationService>;
+  let zone: NgZone;
+
+  const dummyContent = `<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci animi aperiam deserunt dolore error esse
+            laborum magni natus nihil optio perferendis placeat, quae sed, sequi sunt totam voluptatem! Dicta,
+            quaerat!</p>
+        <p>Aut, dignissimos dolorum ducimus et rem reprehenderit rerum sunt ut! Ad aliquid beatae cum esse et eveniet
+            facere natus numquam obcaecati qui quia quisquam quo repellat repudiandae sit, soluta voluptatibus!</p>
+        <p>Aspernatur dolore enim incidunt libero molestiae nostrum quasi? Accusamus aut culpa dolores doloribus laborum
+            nesciunt voluptates! Consectetur cumque doloremque eius esse et excepturi hic, inventore mollitia nisi,
+            reiciendis, tempora unde!</p>
+        <p>Blanditiis, cupiditate distinctio earum illo impedit laborum velit veritatis. Accusamus adipisci alias
+            aperiam, assumenda corporis culpa cum debitis exercitationem impedit laborum possimus quam qui repellat,
+            saepe similique sint soluta. Unde.</p>`;
+
+  const createHost = createHostFactory({
+    component: PageComponent,
+    declarations: [PageContentComponent, MockDirective(FitHeadingDirective)],
+    imports: [
+      TestHelper.ionicModuleForTest,
+      RouterTestingModule.withRoutes([
+        {
+          path: '',
+          component: PageComponent,
+        },
+        {
+          path: 'someUrl',
+          component: DummyComponent,
+        },
+      ]),
+    ],
+    providers: [
+      {
+        provide: WindowRef,
+        useValue: <WindowRef>{ nativeWindow: window },
+      },
+      mockProvider(TabsComponent, { tabBarBottomHidden: false }),
+      mockProvider(ModalNavigationService),
+    ],
+  });
+
+  beforeEach(() => {
+    spectator = createHost(
+      `<kirby-page title="${titleText}" subtitle="${subtitleText}">
+        <kirby-page-content>
+          ${dummyContent}
+        </kirby-page-content>
+      </kirby-page>`
+    );
+    zone = spectator.inject(NgZone);
+    ionToolbar = spectator.queryHost('ion-toolbar');
+    tabBar = spectator.inject(TabsComponent);
+    ionContent = spectator.queryHost('ion-content');
+    modalNavigationService = spectator.inject(ModalNavigationService);
+    modalNavigationService.isModalRoute.and.returnValue(false);
+    router = spectator.inject(Router);
+  });
+
+  describe('having a title and subtitle', () => {
+    it('should have the configured title', async () => {
+      await TestHelper.whenReady(ionContent);
+      const pageTitleHeading = ionContent.querySelector('.page-title > h1');
+
+      expect(spectator.component.title).toEqual(titleText);
+      expect(pageTitleHeading).toHaveText(titleText, true);
+    });
+
+    it('should render title with correct margin and padding', async () => {
+      await TestHelper.whenReady(ionContent);
+      const pageTitle = ionContent.querySelector('.page-title');
+      const pageTitleHeading = pageTitle.querySelector(':scope > h1');
+
+      expect(pageTitle).toHaveComputedStyle({
+        'margin-left': '0px',
+        'margin-right': '0px',
+        'margin-top': '0px',
+        'margin-bottom': '0px',
+        'padding-left': '0px',
+        'padding-right': '0px',
+        'padding-top': '0px',
+        'padding-bottom': '0px',
+      });
+      expect(pageTitleHeading).toHaveComputedStyle({
+        'margin-left': '0px',
+        'margin-right': '0px',
+        'margin-top': '0px',
+        'margin-bottom': '0px',
+        'padding-left': '0px',
+        'padding-right': '0px',
+        'padding-top': '0px',
+        'padding-bottom': '0px',
+      });
+    });
+
+    it('should have the configured subtitle', async () => {
+      await TestHelper.whenReady(ionContent);
+      const pageSubtitle = ionContent.querySelector('.page-subtitle');
+
+      expect(spectator.component.subtitle).toEqual(subtitleText);
+      expect(pageSubtitle).toHaveText(subtitleText, true);
+    });
+
+    it('should render subitle with correct margin and padding', async () => {
+      await TestHelper.whenReady(ionContent);
+      const pageSubtitle = ionContent.querySelector('.page-subtitle');
+
+      expect(pageSubtitle).toHaveComputedStyle({
+        'margin-left': '0px',
+        'margin-right': '0px',
+        'margin-top': size('xxs'),
+        'margin-bottom': '0px',
+        'padding-left': '0px',
+        'padding-right': '0px',
+        'padding-top': '0px',
+        'padding-bottom': '0px',
+      });
+    });
+  });
+
+  it('should render toolbar with correct padding', async () => {
+    await TestHelper.whenReady(ionToolbar);
+    const toolbarContainer = ionToolbar.shadowRoot.querySelector('.toolbar-container');
+    expect(toolbarContainer).toBeTruthy();
+    expect(toolbarContainer).toHaveComputedStyle({
+      'padding-left': size('xxxs'),
+      'padding-right': size('xxxs'),
+      'padding-top': '0px',
+      'padding-bottom': '0px',
+    });
+  });
+
+  it('should render back button with correct size', async () => {
+    await TestHelper.whenReady(ionToolbar);
+    const ionBackButton = spectator.queryHost('ion-toolbar ion-buttons ion-back-button');
+    expect(ionBackButton).toHaveComputedStyle({
+      width: fatFingerSize,
+      height: fatFingerSize,
+    });
+  });
+
+  it('should hide tab bar when tabBarBottomHidden is true', fakeAsync(() => {
+    expect(tabBar.tabBarBottomHidden).toBe(false);
+
+    spectator.setInput('tabBarBottomHidden', true);
+    spectator.detectChanges();
+    tick();
+
+    expect(tabBar.tabBarBottomHidden).toBe(true);
+  }));
+
+  it('should show tab bar when tabBarBottomHidden is false', fakeAsync(() => {
+    // hide tab bar
+    spectator.setInput('tabBarBottomHidden', true);
+    spectator.detectChanges();
+    tick();
+    expect(tabBar.tabBarBottomHidden).toBe(true);
+
+    // show tab bar
+    spectator.setInput('tabBarBottomHidden', false);
+    spectator.detectChanges();
+    tick();
+
+    expect(tabBar.tabBarBottomHidden).toBe(false);
+  }));
+
+  it('should show tab bar when tabBarBottomHidden is true on leave', fakeAsync(async () => {
+    spectator.setInput('tabBarBottomHidden', true);
+    tick();
+    expect(tabBar.tabBarBottomHidden).toBe(true);
+
+    await triggerOnLeave(router);
+
+    expect(tabBar.tabBarBottomHidden).toBe(false);
+    flush();
+  }));
+
+  describe('pull-to-refresh', () => {
+    it('should be available when "refresh" is subscribed to', () => {
+      spectator.output('refresh').subscribe(() => {});
+      spectator.detectComponentChanges();
+      expect(spectator.query(IonRefresher)).not.toBeNull();
+    });
+
+    it('should not be available when "refresh" is not subscribed to', () => {
+      expect(spectator.query(IonRefresher)).toBeNull();
+    });
+  });
+
+  async function triggerOnLeave(router: SpyObject<Router>) {
+    await zone.run(() => router.navigate(['someUrl']));
+  }
+});

package/src/lib/components/page/page.component.ts

@@ -0,0 +1,415 @@
+import {
+  AfterContentChecked,
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ContentChild,
+  ContentChildren,
+  Directive,
+  ElementRef,
+  EventEmitter,
+  HostBinding,
+  HostListener,
+  Input,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  Optional,
+  Output,
+  QueryList,
+  Renderer2,
+  SimpleChanges,
+  SkipSelf,
+  TemplateRef,
+  ViewChild,
+} from '@angular/core';
+import { NavigationEnd, NavigationStart, Router, RouterEvent } from '@angular/router';
+import { IonContent, IonFooter, IonHeader } from '@ionic/angular';
+import { Observable, Subject } from 'rxjs';
+import { filter, takeUntil } from 'rxjs/operators';
+
+import { KirbyAnimation } from '../../animation/kirby-animation';
+import { FitHeadingConfig } from '../../directives/fit-heading/fit-heading.directive';
+import { WindowRef } from '../../types/window-ref';
+import { ModalWrapperComponent } from '../modal/modal-wrapper/modal-wrapper.component';
+import { ModalNavigationService } from '../modal/services/modal-navigation.service';
+import { selectedTabClickEvent } from '../tabs/tab-button/tab-button.events';
+import { TabsComponent } from '../tabs/tabs.component';
+
+type stickyConfig = { sticky: boolean };
+type fixedConfig = { fixed: boolean };
+
+/**
+ * Event emitted when "pull-to-refresh" begins.
+ */
+export interface PullToRefreshEvent {
+  /**
+   * Invoke this callback-method when action to perform upon "pull-to-refresh" completes.
+   */
+  complete();
+}
+
+@Directive({
+  selector: '[kirbyPageTitle]',
+})
+export class PageTitleDirective {}
+
+@Directive({
+  selector: '[kirbyPageSubtitle]',
+})
+export class PageSubtitleDirective {}
+
+@Directive({
+  selector: '[kirbyPageToolbarTitle]',
+})
+export class PageToolbarTitleDirective {}
+
+@Directive({
+  selector: '[kirbyPageActions]',
+})
+export class PageActionsDirective {
+  @Input('kirbyPageActions') config: stickyConfig | fixedConfig;
+  private readonly stickyDefault = true;
+  private readonly fixedDefault = false;
+
+  constructor(public template: TemplateRef<any>) {}
+
+  get isSticky(): boolean {
+    return this.config ? (this.config as stickyConfig).sticky : this.stickyDefault;
+  }
+
+  get isFixed(): boolean {
+    return this.config ? (this.config as fixedConfig).fixed : this.fixedDefault;
+  }
+}
+
+@Directive({
+  selector: '[kirbyPageContent]',
+})
+export class PageContentDirective {
+  @Input('kirbyPageContent') config: fixedConfig;
+
+  constructor(public template: TemplateRef<any>) {}
+
+  get isFixed(): boolean {
+    return this.config && this.config.fixed;
+  }
+}
+
+@Component({
+  selector: 'kirby-page-progress',
+  template: ` <ng-content></ng-content> `,
+  styles: [':host {display: flex}'],
+})
+export class PageProgressComponent implements OnInit {
+  // TODO: Find alternative implementation, which aligns with future page configuration / consumption
+  // This implementation was chosen over expanding `moveChild` method in component wrapper with yet another scenario
+  @HostBinding('attr.slot') slot = 'start';
+
+  constructor(@Optional() @SkipSelf() private modalWrapper: ModalWrapperComponent) {}
+
+  ngOnInit(): void {
+    if (this.modalWrapper && this.modalWrapper.config.flavor === 'drawer') {
+      this.slot = 'end';
+    }
+  }
+}
+
+@Component({
+  selector: 'kirby-page-title',
+  template: ` <ng-content></ng-content> `,
+})
+export class PageTitleComponent {}
+
+@Component({
+  selector: 'kirby-page-content',
+  template: ` <ng-content></ng-content> `,
+})
+export class PageContentComponent {}
+
+@Component({
+  selector: 'kirby-page-actions',
+  template: ` <ng-content select="button[kirby-button]"></ng-content> `,
+})
+export class PageActionsComponent {}
+
+@Component({
+  selector: 'kirby-page',
+  templateUrl: './page.component.html',
+  styleUrls: ['./page.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PageComponent
+  implements OnInit, OnDestroy, AfterViewInit, AfterContentChecked, OnChanges
+{
+  @Input() title: string;
+  @Input() subtitle: string;
+  @Input() toolbarTitle: string;
+  @Input() titleAlignment: 'left' | 'center' | 'right' = 'left';
+  @Input() defaultBackHref: string;
+  @Input() hideBackButton: boolean;
+  @Input() titleMaxLines: number;
+
+  private _tabBarBottomHidden: boolean;
+  public get tabBarBottomHidden(): boolean {
+    return this._tabBarBottomHidden;
+  }
+  @Input()
+  public set tabBarBottomHidden(value: boolean) {
+    if (this.tabsComponent) {
+      // as we are setting a class on tabs, we need this to happen in a separate cd cycle
+      setTimeout(() => (this.tabsComponent.tabBarBottomHidden = value));
+    }
+    this._tabBarBottomHidden = value;
+  }
+
+  @Output() enter = new EventEmitter<void>();
+  @Output() leave = new EventEmitter<void>();
+  @Output() refresh = new EventEmitter<PullToRefreshEvent>();
+
+  @ViewChild(IonContent, { static: true }) private content: IonContent;
+  @ViewChild(IonContent, { static: true, read: ElementRef })
+  private ionContentElement: ElementRef<HTMLIonContentElement>;
+  @ViewChild(IonHeader, { static: true, read: ElementRef })
+  ionHeaderElement: ElementRef<HTMLIonHeaderElement>;
+  @ViewChild(IonFooter, { static: true, read: ElementRef })
+  private ionFooterElement: ElementRef<HTMLIonFooterElement>;
+
+  @ViewChild('pageTitle', { static: false, read: ElementRef })
+  private pageTitle: ElementRef;
+
+  @ViewChild('simpleTitleTemplate', { static: true, read: TemplateRef })
+  private simpleTitleTemplate: TemplateRef<any>;
+  @ViewChild('simpleToolbarTitleTemplate', { static: true, read: TemplateRef })
+  private simpleToolbarTitleTemplate: TemplateRef<any>;
+  @ContentChild(PageToolbarTitleDirective, { static: false, read: TemplateRef })
+  private customToolbarTitleTemplate: TemplateRef<any>;
+  @ContentChild(PageTitleDirective, { static: false, read: TemplateRef })
+  customTitleTemplate: TemplateRef<any>;
+  @ContentChild(PageSubtitleDirective, { static: false, read: TemplateRef })
+  customSubtitleTemplate: TemplateRef<any>;
+  @ContentChildren(PageActionsDirective)
+  customActions: QueryList<PageActionsDirective>;
+  @ContentChildren(PageContentDirective)
+  private customContent: QueryList<PageContentDirective>;
+
+  hasPageTitle: boolean;
+  hasPageSubtitle: boolean;
+  hasActionsInPage: boolean;
+  toolbarTitleVisible: boolean;
+  toolbarFixedActionsVisible: boolean;
+  toolbarStickyActionsVisible: boolean;
+
+  fitHeadingConfig: FitHeadingConfig;
+
+  toolbarTitleTemplate: TemplateRef<any>;
+  customContentTemplate: TemplateRef<any>;
+  pageActionsTemplate: TemplateRef<any>;
+  fixedContentTemplate: TemplateRef<any>;
+  stickyActionsTemplate: TemplateRef<any>;
+  fixedActionsTemplate: TemplateRef<any>;
+  private pageTitleIntersectionObserverRef: IntersectionObserver =
+    this.pageTitleIntersectionObserver();
+  private urls: string[] = [];
+  private hasEntered: boolean;
+
+  private ngOnDestroy$ = new Subject();
+  private navigationStart$: Observable<RouterEvent> = this.router.events.pipe(
+    takeUntil(this.ngOnDestroy$),
+    filter((event: RouterEvent) => event instanceof NavigationStart)
+  );
+
+  private navigationEnd$: Observable<RouterEvent> = this.router.events.pipe(
+    takeUntil(this.ngOnDestroy$),
+    filter((event: RouterEvent) => event instanceof NavigationEnd)
+  );
+
+  constructor(
+    private elementRef: ElementRef,
+    private renderer: Renderer2,
+    private router: Router,
+    private changeDetectorRef: ChangeDetectorRef,
+    private windowRef: WindowRef,
+    private modalNavigationService: ModalNavigationService,
+    @Optional() @SkipSelf() private tabsComponent: TabsComponent
+  ) {}
+
+  ngOnInit(): void {
+    this.removeWrapper();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.titleMaxLines) {
+      this.fitHeadingConfig = {
+        ...this.fitHeadingConfig,
+        maxLines: changes.titleMaxLines.currentValue,
+      };
+    }
+    if (changes.subtitle && !changes.subtitle.isFirstChange) {
+      this.subtitle = changes.title.currentValue;
+      this.hasPageSubtitle = this.subtitle !== undefined;
+    }
+  }
+
+  ngAfterViewInit(): void {
+    this.navigationStart$.subscribe((event: NavigationStart) => {
+      if (
+        !this.urls.includes(event.url) &&
+        !this.modalNavigationService.isModalRoute(event.url) &&
+        !this.modalNavigationService.isModalRoute(this.router.url)
+      ) {
+        this.onLeave();
+      }
+    });
+
+    this.navigationEnd$.subscribe((event: NavigationEnd) => {
+      if (this.urls.includes(event.urlAfterRedirects)) {
+        this.onEnter();
+      }
+    });
+
+    this.windowRef.nativeWindow.addEventListener(selectedTabClickEvent, () => {
+      this.content.scrollToTop(KirbyAnimation.Duration.LONG);
+    });
+  }
+
+  ngAfterContentChecked(): void {
+    if (!this.urls.includes(this.router.url)) {
+      this.urls.push(this.router.url);
+      this.onEnter();
+    }
+
+    this.initializeTitle();
+    this.initializeActions();
+    this.initializeContent();
+    this.changeDetectorRef.detectChanges();
+  }
+
+  ngOnDestroy(): void {
+    this.ngOnDestroy$.next();
+    this.ngOnDestroy$.complete();
+
+    this.pageTitleIntersectionObserverRef.disconnect();
+    this.windowRef.nativeWindow.removeEventListener(selectedTabClickEvent, () => {
+      this.content.scrollToTop(KirbyAnimation.Duration.LONG);
+    });
+  }
+
+  delegateRefreshEvent(event: any): void {
+    this.refresh.emit({
+      complete: event.target.complete.bind(event.target),
+    });
+  }
+
+  private onEnter() {
+    if (this.hasEntered) return;
+    this.hasEntered = true;
+
+    this.enter.emit();
+    if (this.pageTitle) {
+      this.pageTitleIntersectionObserverRef.observe(this.pageTitle.nativeElement);
+    }
+  }
+
+  private onLeave() {
+    this.leave.emit();
+    if (this.pageTitle) {
+      this.pageTitleIntersectionObserverRef.unobserve(this.pageTitle.nativeElement);
+    }
+    this.hasEntered = false;
+
+    if (this.tabBarBottomHidden && this.tabsComponent) {
+      this.tabsComponent.tabBarBottomHidden = false;
+    }
+  }
+
+  private initializeTitle() {
+    // Ensures initializeTitle() won't run, if already initialized
+    if (this.hasPageTitle) return;
+    this.hasPageTitle = this.title !== undefined || !!this.customTitleTemplate;
+    this.toolbarTitleVisible = !this.hasPageTitle;
+    this.hasPageSubtitle = this.subtitle !== undefined || !!this.customSubtitleTemplate;
+
+    if (this.hasPageTitle) {
+      setTimeout(() => {
+        this.pageTitleIntersectionObserverRef.observe(this.pageTitle.nativeElement);
+      });
+    }
+
+    const defaultTitleTemplate = this.customTitleTemplate || this.simpleTitleTemplate;
+    // tslint:disable:prettier
+    // prettier-ignore
+    this.toolbarTitleTemplate = this.customToolbarTitleTemplate
+      ? this.customToolbarTitleTemplate
+      : typeof this.toolbarTitle === 'string'
+        ? this.simpleToolbarTitleTemplate
+        : defaultTitleTemplate;
+  }
+
+  private initializeActions() {
+    this.customActions.forEach((pageAction) => {
+      if (pageAction.isFixed) {
+        this.fixedActionsTemplate = pageAction.template;
+        this.toolbarFixedActionsVisible = true;
+      } else {
+        this.pageActionsTemplate = pageAction.template;
+        if (pageAction.isSticky) {
+          this.stickyActionsTemplate = pageAction.template;
+        }
+      }
+    });
+    this.hasActionsInPage = !!this.pageActionsTemplate;
+  }
+
+  private initializeContent() {
+    this.customContent.forEach((content) => {
+      if (content.isFixed) {
+        this.fixedContentTemplate = content.template;
+      } else {
+        this.customContentTemplate = content.template;
+      }
+    });
+  }
+
+  private removeWrapper() {
+    const parent = this.elementRef.nativeElement.parentNode;
+    this.renderer.removeChild(parent, this.elementRef.nativeElement);
+    this.renderer.appendChild(parent, this.ionHeaderElement.nativeElement);
+    this.renderer.appendChild(parent, this.ionContentElement.nativeElement);
+    this.renderer.appendChild(parent, this.ionFooterElement.nativeElement);
+  }
+
+  private pageTitleIntersectionObserver() {
+    const options = {
+      rootMargin: '0px',
+    };
+
+    let initialized = false;
+    const callback = (entries) => {
+      if (initialized) {
+        this.toolbarTitleVisible = !entries[0].isIntersecting;
+        this.toolbarStickyActionsVisible = !entries[0].isIntersecting;
+        this.changeDetectorRef.detectChanges();
+      } else {
+        initialized = true;
+      }
+    };
+    return new IntersectionObserver(callback, options);
+  }
+
+  @HostListener('window:keyboardWillShow', ['$event'])
+  _onKeyboardWillShow(info?: { keyboardHeight: number }) {
+    if (info && info.keyboardHeight) {
+      this.ionContentElement.nativeElement.style.setProperty(
+        '--keyboard-offset',
+        `${info.keyboardHeight}px`
+      );
+    }
+  }
+
+  @HostListener('window:keyboardWillHide')
+  _onKeyboardWillHide() {
+    this.ionContentElement.nativeElement.style.setProperty('--keyboard-offset', '0px');
+  }
+}

package/src/lib/components/page/page.module.ts

@@ -0,0 +1,52 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+
+import { FitHeadingModule } from '../../directives/fit-heading/fit-heading.module';
+import { SpinnerModule } from '../spinner/spinner.module';
+
+import { PageFooterComponent } from './page-footer/page-footer.component';
+import {
+  PageActionsComponent,
+  PageActionsDirective,
+  PageComponent,
+  PageContentComponent,
+  PageContentDirective,
+  PageProgressComponent,
+  PageSubtitleDirective,
+  PageTitleComponent,
+  PageTitleDirective,
+  PageToolbarTitleDirective,
+} from './page.component';
+
+@NgModule({
+  declarations: [
+    PageComponent,
+    PageActionsComponent,
+    PageActionsDirective,
+    PageContentComponent,
+    PageFooterComponent,
+    PageContentDirective,
+    PageProgressComponent,
+    PageTitleComponent,
+    PageTitleDirective,
+    PageSubtitleDirective,
+    PageToolbarTitleDirective,
+  ],
+  imports: [CommonModule, IonicModule, FitHeadingModule, SpinnerModule],
+  exports: [
+    PageComponent,
+    PageActionsComponent,
+    PageActionsDirective,
+    PageContentComponent,
+    PageFooterComponent,
+    PageContentDirective,
+    PageProgressComponent,
+    PageTitleComponent,
+    PageTitleDirective,
+    PageSubtitleDirective,
+    PageToolbarTitleDirective,
+    FitHeadingModule,
+  ],
+})
+export class PageModule {}