fix(docs): update examples after Eva migration (#1448)

docs/app/blocks/components/components-overview-block/components-overview-block.component.html

@@ -1,6 +1,6 @@
 <nb-card class="header-card">
  <nb-card-header>
- <h2 class="h4">Components Overview</h2>
+ <h2 class="h4 page-heading">Components Overview</h2>
  </nb-card-header>
 </nb-card>
 

docs/app/blocks/components/components-overview-block/components-overview-block.component.scss

@@ -2,6 +2,10 @@
 
 @include nb-install-component() {
 
+ .header-card .page-heading {
+ margin-bottom: 0;
+ }
+
  .components-list {
  display: flex;
  flex-wrap: wrap;

src/framework/theme/components/button/button.component.ts

@@ -74,7 +74,7 @@ export type NbButtonAppearance = 'filled' | 'outline' | 'ghost' | 'hero';
  * Icon can be placed inside of a button as a child element:
  * @stacked-example(Icon Button, button/button-icon.component.html)
  *
- * @additional-example(Interactive example, button/button-interactive.component))
+ * @additional-example(Interactive example, button/button-interactive.component)
  *
  * @styles
  *

src/framework/theme/components/chat/chat.component.ts

@@ -83,6 +83,7 @@ import { NbChatMessageComponent } from './chat-message.component';
  * ],
  * })
  * export class AppModule { }
+ * ```
  *
  * ### Usage
  *

src/framework/theme/components/search/_search.component.theme.scss

@@ -7,6 +7,9 @@
 @mixin nb-search-theme() {
 
  nb-search-field {
+ .close-button {
+ z-index: 1;
+ }
 
  .search {
  background: nb-theme(search-background-color);

src/framework/theme/components/search/search.component.ts

@@ -47,7 +47,7 @@ import { NbOverlayService, NbOverlayRef, NbPortalDirective } from '../cdk';
  ],
  template: `
  <div class="search" (keyup.esc)="emitClose()">
- <button (click)="emitClose()" nbButton ghost>
+ <button (click)="emitClose()" nbButton ghost class="close-button">
  <nb-icon icon="close-outline" pack="nebular-essentials"></nb-icon>
  </button>
  <div class="form-wrapper">

src/framework/theme/components/tree-grid/data-source/tree-grid-filter.service.ts

@@ -21,9 +21,12 @@ export class NbTreeGridFilterService<T> {
  }
 
  return data.reduce((filtered: NbTreeGridPresentationNode<T>[], node: NbTreeGridPresentationNode<T>) => {
- const filteredChildren = this.filter(query, node.children);
+ let filteredChildren: NbTreeGridPresentationNode<T>[];
 
- node.children = filteredChildren;
+ if (node.children) {
+ filteredChildren = this.filter(query, node.children);
+ node.children = filteredChildren;
+ }
 
  node.expanded = false;
 

src/playground/with-layout/calendar/calendar-bounding-month.component.ts

@@ -9,7 +9,7 @@ import { Component } from '@angular/core';
 @Component({
  selector: 'nb-calendar-bounding-month',
  template: `
- <h1>Selected date: {{ date | date }}</h1>
+ <h1 class="h5">Selected date: {{ date | date }}</h1>
  <nb-calendar [(date)]="date" [boundingMonth]="false">
  </nb-calendar>
  `,

src/playground/with-layout/calendar/calendar-custom-day-cell-showcase.component.ts

@@ -10,7 +10,7 @@ import { CalendarCustomDayCellComponent } from './components/calendar-custom-day
 @Component({
  selector: 'nb-calendar-custom-day-cell-showcase',
  template: `
- <h1>Selected date: {{ date | date }}</h1>
+ <h1 class="h5">Selected date: {{ date | date }}</h1>
  <nb-calendar
  [(date)]="date"
  [dayCellComponent]="dayCellComponent"

src/playground/with-layout/calendar/calendar-filter.component.ts

@@ -9,7 +9,7 @@ import { Component } from '@angular/core';
 @Component({
  selector: 'nb-calendar-filter',
  template: `
- <h1>Selected date: {{ date | date }}</h1>
+ <h1 class="h5">Selected date: {{ date | date }}</h1>
  <nb-calendar [(date)]="date" [filter]="filter">
  </nb-calendar>
  `,

src/playground/with-layout/calendar/calendar-min-max.component.ts

@@ -9,7 +9,7 @@ import { Component } from '@angular/core';
 @Component({
  selector: 'nb-calendar-min-max',
  template: `
- <h1>Selected date: {{ date | date }}</h1>
+ <h1 class="h5">Selected date: {{ date | date }}</h1>
  <nb-calendar [(date)]="date" [min]="min" [max]="max">
  </nb-calendar>
  `,

src/playground/with-layout/calendar/calendar-range-showcase.component.ts

@@ -12,7 +12,7 @@ import { NbCalendarRange, NbDateService } from '@nebular/theme';
 @Component({
  selector: 'nb-calendar-range-showcase',
  template: `
- <h1>Selected range: {{ range.start | date }} - {{ range.end | date }}</h1>
+ <h1 class="h5">Selected range: {{ range.start | date }} - {{ range.end | date }}</h1>
  <nb-calendar-range [(range)]="range">
  </nb-calendar-range>
  `,

src/playground/with-layout/calendar/calendar-showcase.component.ts

@@ -9,7 +9,7 @@ import { Component } from '@angular/core';
 @Component({
  selector: 'nb-calendar-showcase',
  template: `
- <h1>Selected date: {{ date | date }}</h1>
+ <h1 class="h5">Selected date: {{ date | date }}</h1>
  <nb-calendar [(date)]="date">
  </nb-calendar>
  `,

src/playground/with-layout/calendar/calendar-size.component.ts

@@ -9,7 +9,7 @@ import { Component } from '@angular/core';
 @Component({
  selector: 'nb-calendar-size',
  template: `
- <h1>Selected date: {{ date | date }}</h1>
+ <h1 class="h5">Selected date: {{ date | date }}</h1>
  <nb-calendar [(date)]="date" size="large">
  </nb-calendar>
  `,

src/playground/with-layout/calendar/calendar-start-view.component.ts

@@ -9,7 +9,7 @@ import { Component } from '@angular/core';
 @Component({
  selector: 'nb-calendar-start-view',
  template: `
- <h1>Selected date: {{ date | date }}</h1>
+ <h1 class="h5">Selected date: {{ date | date }}</h1>
  <nb-calendar [(date)]="date" startView="month">
  </nb-calendar>
  `,

src/playground/with-layout/calendar/calendar-without-header.component.ts

@@ -9,7 +9,7 @@ import { Component } from '@angular/core';
 @Component({
  selector: 'nb-calendar-without-header',
  template: `
- <h1>Selected date: {{ date | date }}</h1>
+ <h1 class="h5">Selected date: {{ date | date }}</h1>
  <nb-calendar [(date)]="date" [showHeader]="false">
  </nb-calendar>
  `,

src/playground/with-layout/checkbox/checkbox-indeterminate.component.ts

@@ -5,7 +5,7 @@ import { Component } from '@angular/core';
  <nb-checkbox indeterminate #checkbox>Indeterminate</nb-checkbox>
 
  <div *ngIf="!checkbox.indeterminate">
- <button nbButton (click)="checkbox.indeterminate = true">Set indetermiate</button>
+ <button nbButton size="small" (click)="checkbox.indeterminate = true">Set indetermiate</button>
  </div>
  `,
  styleUrls: ['./checkbox-indeterminate.component.scss'],

src/playground/with-layout/checkbox/checkbox.module.ts

@@ -6,7 +6,7 @@
 
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { NbCardModule, NbCheckboxModule } from '@nebular/theme';
+import { NbButtonModule, NbCardModule, NbCheckboxModule } from '@nebular/theme';
 import { CheckboxRoutingModule } from './checkbox-routing.module';
 import { CheckboxDisabledComponent } from './checkbox-disabled.component';
 import { CheckboxShowcaseComponent } from './checkbox-showcase.component';
@@ -22,6 +22,12 @@ import { CheckboxIndeterminateComponent } from './checkbox-indeterminate.compone
  CheckboxTestComponent,
  CheckboxIndeterminateComponent,
  ],
- imports: [ CommonModule, NbCardModule, NbCheckboxModule, CheckboxRoutingModule ],
+ imports: [
+ CommonModule,
+ NbCardModule,
+ NbButtonModule,
+ NbCheckboxModule,
+ CheckboxRoutingModule,
+ ],
 })
 export class CheckboxModule {}

src/playground/with-layout/dialog/dialog-result.component.ts

@@ -7,7 +7,7 @@ import { DialogNamePromptComponent } from './components/name-prompt-dialog.compo
  template: `
  <button nbButton hero status="primary" (click)="open()">Enter Name</button>
  <br>
- <h3>Names:</h3>
+ <h3 class="h5">Names:</h3>
  <ul>
  <li *ngFor="let name of names">{{ name }}</li>
  </ul>

src/playground/with-layout/infinite-list/components/news-post.component.ts

@@ -5,7 +5,7 @@ import { NewsPost } from '../news.service';
  selector: 'nb-news-post',
  template: `
  <article>
- <h2>{{post.title}}</h2>
+ <h2 class="h5">{{post.title}}</h2>
  <p>{{post.text}}</p>
  <a [attr.href]="post.link">Read full article</a>
  </article>

src/playground/with-layout/infinite-list/news-post-placeholder.component.scss

@@ -20,7 +20,6 @@
 
 @include nb-install-component() {
  [class$='placeholder'] {
- background: nb-theme(layout-bg);
- opacity: 0.6;
+ background: nb-theme(background-primary-color-4);
  }
 }

src/playground/with-layout/menu/menu-service-children.ts

@@ -9,15 +9,15 @@ import { Component} from '@angular/core';
 @Component({
  selector: 'nb-menu-item1',
  template: `
- <h1>Home</h1>
+ <h1 class="h4">Home</h1>
  `,
 })
 export class MenuServiceItem1Component { }
 
 @Component({
  selector: 'nb-menu-item2',
  template: `
- <h1>User account</h1>
+ <h1 class="h4">User account</h1>
  `,
 })
 export class MenuServiceItem2Component { }
@@ -33,15 +33,15 @@ export class MenuServiceItem3Component { }
 @Component({
  selector: 'nb-menu-item31',
  template: `
- <h1>Services</h1>
+ <h1 class="h4">Services</h1>
  `,
 })
 export class MenuServiceItem31Component { }
 
 @Component({
  selector: 'nb-menu-item32',
  template: `
- <h1>Hardware</h1>
+ <h1 class="h4">Hardware</h1>
  `,
 })
 export class MenuServiceItem32Component { }
@@ -57,15 +57,15 @@ export class MenuServiceItem33Component { }
 @Component({
  selector: 'nb-menu-item331',
  template: `
- <h1>Open Source Software</h1>
+ <h1 class="h4">Open Source Software</h1>
  `,
 })
 export class MenuServiceItem331Component { }
 
 @Component({
  selector: 'nb-menu-item332',
  template: `
- <h1>Commercial Software</h1>
+ <h1 class="h4">Commercial Software</h1>
  `,
 })
 export class MenuServiceItem332Component { }

src/playground/with-layout/menu/menu-service.component.ts

@@ -16,7 +16,7 @@ import { MENU_ITEMS } from './menu-service-items';
  <nb-card-body>
  <nb-menu tag="menu" [items]="menuItems"></nb-menu>
  <router-outlet></router-outlet>
- <h3>Selected item: {{ selectedItem }}</h3>
+ <h3 class="h4">Selected item: {{ selectedItem }}</h3>
  <button nbButton (click)="addMenuItem()">Add Menu Item</button>
  <button nbButton (click)="collapseAll()">Collapse all menu items</button>
  <button nbButton (click)="navigateHome()">Home</button>