feat(theme): add cdk (#679)

Add Nebular cdk module, which is a wrapper over Angular cdk and provides some Nebular specific features, such as overrides of the overlay module.

Closes #661, closes #660.

package.json

@@ -110,6 +110,7 @@
  "@angular/cli": "^6.0.0",
  "@angular/compiler-cli": "6.0.0",
  "@angular/language-service": "6.0.0",
+ "@angular/cdk": "6.0.0",
  "@types/gulp": "3.8.36",
  "@types/highlight.js": "9.12.2",
  "@types/jasmine": "2.8.3",

scripts/gulp/tasks/bundle/rollup-config.ts

@@ -17,6 +17,9 @@ const ROLLUP_GLOBALS = {
  '@angular/core/testing': 'ng.core.testing',
  '@angular/common/testing': 'ng.common.testing',
  '@angular/common/http/testing': 'ng.common.http.testing',
+ '@angular/cdk/overlay': 'ng.cdk.overlay',
+ '@angular/cdk/platform': 'ng.cdk.platform',
+ '@angular/cdk/portal': 'ng.cdk.portal',
 
 
  // RxJS dependencies

src/framework/theme/components/cdk/adapter/adapter.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { OverlayContainer, ScrollDispatcher } from '@angular/cdk/overlay';
+
+import { NbOverlayContainerAdapter } from './overlay-container-adapter';
+import { NbScrollDispatcherAdapter } from './scroll-dispatcher-adapter';
+import { NbViewportRulerAdapter } from './viewport-ruler-adapter';
+
+
+@NgModule({
+ providers: [
+ NbViewportRulerAdapter,
+ { provide: OverlayContainer, useClass: NbOverlayContainerAdapter },
+ { provide: ScrollDispatcher, useClass: NbScrollDispatcherAdapter },
+ ],
+})
+export class NbCdkAdapterModule {
+}

src/framework/theme/components/cdk/adapter/overlay-container-adapter.ts

@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+
+import { NbOverlayContainer } from '../overlay/mapping';
+
+
+@Injectable()
+export class NbOverlayContainerAdapter extends NbOverlayContainer {
+ protected _createContainer(): void {
+ const container = this._document.createElement('div');
+
+ container.classList.add('cdk-overlay-container');
+ this._document.querySelector('nb-layout').appendChild(container);
+ this._containerElement = container;
+ }
+}

src/framework/theme/components/cdk/adapter/scroll-dispatcher-adapter.ts

@@ -0,0 +1,18 @@
+import { Injectable, NgZone } from '@angular/core';
+import { CdkScrollable, ScrollDispatcher } from '@angular/cdk/overlay';
+import { Observable } from 'rxjs';
+
+import { NbPlatform } from '../overlay/mapping';
+import { NbLayoutScrollService } from '../../../services/scroll.service';
+
+@Injectable()
+export class NbScrollDispatcherAdapter extends ScrollDispatcher {
+ constructor(ngZone: NgZone, platform: NbPlatform, protected scrollService: NbLayoutScrollService) {
+ super(ngZone, platform);
+ }
+
+ scrolled(auditTimeInMs?: number): Observable<CdkScrollable | void> {
+ return this.scrollService.onScroll();
+ }
+}
+

src/framework/theme/components/cdk/adapter/viewport-ruler-adapter.ts

@@ -0,0 +1,41 @@
+import { Injectable, NgZone } from '@angular/core';
+import { ViewportRuler } from '@angular/cdk/overlay';
+import { map } from 'rxjs/operators';
+
+import { NbPlatform } from '../overlay/mapping';
+import { NbLayoutRulerService } from '../../../services/ruler.service';
+import { NbLayoutScrollService, NbScrollPosition } from '../../../services/scroll.service';
+
+
+@Injectable()
+export class NbViewportRulerAdapter extends ViewportRuler {
+ constructor(platform: NbPlatform, ngZone: NgZone,
+ protected ruler: NbLayoutRulerService,
+ protected scroll: NbLayoutScrollService) {
+ super(platform, ngZone);
+ }
+
+ getViewportSize(): Readonly<{ width: number; height: number; }> {
+ let res;
+ /*
+ * getDimensions call is really synchronous operation.
+ * And we have to conform with the interface of the original service.
+ * */
+ this.ruler.getDimensions()
+ .pipe(map(dimensions => ({ width: dimensions.clientWidth, height: dimensions.clientHeight })))
+ .subscribe(rect => res = rect);
+ return res;
+ }
+
+ getViewportScrollPosition(): { left: number; top: number } {
+ let res;
+ /*
+ * getPosition call is really synchronous operation.
+ * And we have to conform with the interface of the original service.
+ * */
+ this.scroll.getPosition()
+ .pipe(map((position: NbScrollPosition) => ({ top: position.y, left: position.x })))
+ .subscribe(position => res = position);
+ return res;
+ }
+}

src/framework/theme/components/cdk/index.ts

@@ -0,0 +1,2 @@
+export * from './overlay/mapping';
+export * from './overlay';

src/framework/theme/components/cdk/overlay/_overlay.theme.scss

@@ -0,0 +1,7 @@
+@import '~@angular/cdk/overlay-prebuilt.css';
+
+@mixin nb-overlay-theme {
+ .overlay-backdrop {
+ background: nb-theme(overlay-backdrop-bg);
+ }
+}

src/framework/theme/components/cdk/overlay/index.ts

@@ -0,0 +1,6 @@
+export * from './overlay.module';
+export * from './overlay';
+export * from './overlay-position';
+export * from './overlay-container';
+export * from './overlay-trigger';
+export * from './mapping';

src/framework/theme/components/cdk/overlay/mapping.ts

@@ -0,0 +1,82 @@
+import { Directive, Injectable, NgModule, TemplateRef, ViewContainerRef } from '@angular/core';
+import { CdkPortal, ComponentPortal, Portal, PortalModule, TemplatePortal } from '@angular/cdk/portal';
+import {
+ ComponentType,
+ ConnectedOverlayPositionChange,
+ ConnectedPosition,
+ ConnectionPositionPair,
+ FlexibleConnectedPositionStrategy,
+ GlobalPositionStrategy,
+ Overlay,
+ OverlayContainer,
+ OverlayModule,
+ OverlayPositionBuilder,
+ OverlayRef,
+ PositionStrategy,
+} from '@angular/cdk/overlay';
+import { Platform } from '@angular/cdk/platform';
+
+
+@Directive({ selector: '[nbPortal]' })
+export class NbPortalDirective extends CdkPortal {
+}
+
+@Injectable()
+export class NbOverlayService extends Overlay {
+}
+
+@Injectable()
+export class NbPlatform extends Platform {
+}
+
+@Injectable()
+export class NbOverlayPositionBuilder extends OverlayPositionBuilder {
+}
+
+export class NbComponentPortal<T = any> extends ComponentPortal<T> {
+}
+
+export class NbTemplatePortal<T = any> extends TemplatePortal<T> {
+ constructor(template: TemplateRef<T>, viewContainerRef?: ViewContainerRef, context?: T) {
+ super(template, viewContainerRef, context);
+ }
+}
+
+export class NbOverlayContainer extends OverlayContainer {
+}
+
+export class NbFlexibleConnectedPositionStrategy extends FlexibleConnectedPositionStrategy {
+}
+
+export type NbPortal<T = any> = Portal<T>;
+export type NbOverlayRef = OverlayRef;
+export type NbComponentType<T = any> = ComponentType<T>;
+export type NbGlobalPositionStrategy = GlobalPositionStrategy;
+export type NbPositionStrategy = PositionStrategy;
+export type NbConnectedPosition = ConnectedPosition;
+export type NbConnectedOverlayPositionChange = ConnectedOverlayPositionChange;
+export type NbConnectionPositionPair = ConnectionPositionPair;
+
+const CDK_MODULES = [OverlayModule, PortalModule];
+
+const CDK_PROVIDERS = [
+ NbOverlayService,
+ NbPlatform,
+ NbOverlayPositionBuilder,
+];
+
+/**
+ * This module helps us to keep all angular/cdk deps inside our cdk module via providing aliases.
+ * Approach will help us move cdk in separate npm package and refactor nebular/theme code.
+ * */
+@NgModule({
+ imports: [...CDK_MODULES],
+ exports: [
+ ...CDK_MODULES,
+ NbPortalDirective,
+ ],
+ declarations: [NbPortalDirective],
+ providers: [...CDK_PROVIDERS],
+})
+export class NbCdkMappingModule {
+}

src/framework/theme/components/cdk/overlay/overlay-container.ts

@@ -0,0 +1,90 @@
+import { ChangeDetectorRef, Component, HostBinding, Input, TemplateRef, Type, ViewChild } from '@angular/core';
+import { NgComponentOutlet } from '@angular/common';
+
+import { NbPosition } from './overlay-position';
+
+export abstract class NbPositionedContainer {
+ @Input() position: NbPosition;
+
+ @HostBinding('class.nb-overlay-top')
+ get top(): boolean {
+ return this.position === NbPosition.TOP
+ }
+
+ @HostBinding('class.nb-overlay-right')
+ get right(): boolean {
+ return this.position === NbPosition.RIGHT
+ }
+
+ @HostBinding('class.nb-overlay-bottom')
+ get bottom(): boolean {
+ return this.position === NbPosition.BOTTOM
+ }
+
+ @HostBinding('class.nb-overlay-left')
+ get left(): boolean {
+ return this.position === NbPosition.LEFT
+ }
+}
+
+@Component({
+ selector: 'nb-overlay-container',
+ template: `
+ <ng-container *ngIf="isTemplate">
+ <ng-container *ngTemplateOutlet="content; context: context"></ng-container>
+ </ng-container>
+ <ng-container *ngIf="isComponent" [ngComponentOutlet]="content"></ng-container>
+ <ng-container *ngIf="isPrimitive">
+ <div class="primitive-overlay">{{content}}</div>
+ </ng-container>
+ `,
+})
+export class NbOverlayContainerComponent {
+ @Input()
+ content: any;
+
+ @Input()
+ context: Object;
+
+ constructor(private cd: ChangeDetectorRef) {
+ }
+
+ @ViewChild(NgComponentOutlet)
+ set componentOutlet(el) {
+ if (this.isComponent) {
+ Object.assign(el._componentRef.instance, this.context);
+ /**
+ * Change detection has to be performed here, because another way applied context
+ * will be rendered on the next change detection loop and
+ * we'll have incorrect positioning. Because rendered component may change its size
+ * based on the context.
+ * */
+ this.cd.detectChanges();
+ }
+ }
+
+ /**
+ * Check that content is a TemplateRef.
+ *
+ * @return boolean
+ * */
+ get isTemplate(): boolean {
+ return this.content instanceof TemplateRef;
+ }
+
+ /**
+ * Check that content is an angular component.
+ *
+ * @return boolean
+ * */
+ get isComponent(): boolean {
+ return this.content instanceof Type;
+ }
+
+ /**
+ * Check that if content is not a TemplateRef or an angular component it means a primitive.
+ * */
+ get isPrimitive(): boolean {
+ return !this.isTemplate && !this.isComponent;
+ }
+}