diff --git a/integration/angular-cli/package.json b/integration/angular-cli/package.json index b509e27c7c5..653d8d77fe5 100644 --- a/integration/angular-cli/package.json +++ b/integration/angular-cli/package.json @@ -15,16 +15,16 @@ }, "private": true, "dependencies": { - "@angular/animations": "^4.2.4", - "@angular/cdk": "2.0.0-beta.8", - "@angular/common": "^4.2.4", - "@angular/compiler": "^4.2.4", - "@angular/core": "^4.2.4", - "@angular/forms": "^4.2.4", - "@angular/http": "^4.2.4", - "@angular/platform-browser": "^4.2.4", - "@angular/platform-browser-dynamic": "^4.2.4", - "@angular/router": "^4.2.4", + "@angular/animations": "^4.4.3", + "@angular/cdk": "2.0.0-beta.11", + "@angular/common": "^4.4.3", + "@angular/compiler": "^4.4.3", + "@angular/core": "^4.4.3", + "@angular/forms": "^4.4.3", + "@angular/http": "^4.4.3", + "@angular/platform-browser": "^4.4.3", + "@angular/platform-browser-dynamic": "^4.4.3", + "@angular/router": "^4.4.3", "core-js": "^2.4.1", "moment": "^2.18.1", "ng-zorro-antd": "file:lib/ng-zorro-antd", @@ -32,9 +32,9 @@ "zone.js": "^0.8.14" }, "devDependencies": { - "@angular/cli": "1.3.2", - "@angular/compiler-cli": "^4.2.4", - "@angular/language-service": "^4.2.4", + "@angular/cli": "1.3.0", + "@angular/compiler-cli": "^4.4.3", + "@angular/language-service": "^4.4.3", "typescript": "~2.3.3" } } diff --git a/integration/rollup/package.json b/integration/rollup/package.json index 39f2685ac0f..fcae77c805c 100644 --- a/integration/rollup/package.json +++ b/integration/rollup/package.json @@ -20,16 +20,16 @@ }, "private": true, "dependencies": { - "@angular/animations": "^4.2.4", - "@angular/cdk": "2.0.0-beta.8", - "@angular/common": "^4.2.4", - "@angular/compiler": "^4.2.4", - "@angular/core": "^4.2.4", - "@angular/forms": "^4.2.4", - "@angular/http": "^4.2.4", - "@angular/platform-browser": "^4.2.4", - "@angular/platform-browser-dynamic": "^4.2.4", - "@angular/router": "^4.2.4", + "@angular/animations": "^4.4.3", + "@angular/cdk": "2.0.0-beta.11", + "@angular/common": "^4.4.3", + "@angular/compiler": "^4.4.3", + "@angular/core": "^4.4.3", + "@angular/forms": "^4.4.3", + "@angular/http": "^4.4.3", + "@angular/platform-browser": "^4.4.3", + "@angular/platform-browser-dynamic": "^4.4.3", + "@angular/router": "^4.4.3", "core-js": "^2.4.1", "moment": "^2.18.1", "ng-zorro-antd": "file:lib/ng-zorro-antd", @@ -37,9 +37,9 @@ "zone.js": "^0.8.14" }, "devDependencies": { - "@angular/cli": "1.3.2", - "@angular/compiler-cli": "^4.2.4", - "@angular/language-service": "^4.2.4", + "@angular/cli": "1.3.0", + "@angular/compiler-cli": "^4.4.3", + "@angular/language-service": "^4.4.3", "http-server": "^0.10.0", "rimraf": "^2.6.1", "rollup": "^0.49.2", diff --git a/integration/webpack/package.json b/integration/webpack/package.json index 503fc2b14e4..a61939c34d9 100644 --- a/integration/webpack/package.json +++ b/integration/webpack/package.json @@ -14,16 +14,16 @@ }, "private": true, "dependencies": { - "@angular/animations": "^4.2.4", - "@angular/cdk": "2.0.0-beta.8", - "@angular/common": "^4.2.4", - "@angular/compiler": "^4.2.4", - "@angular/core": "^4.2.4", - "@angular/forms": "^4.2.4", - "@angular/http": "^4.2.4", - "@angular/platform-browser": "^4.2.4", - "@angular/platform-browser-dynamic": "^4.2.4", - "@angular/router": "^4.2.4", + "@angular/animations": "^4.4.3", + "@angular/cdk": "2.0.0-beta.11", + "@angular/common": "^4.4.3", + "@angular/compiler": "^4.4.3", + "@angular/core": "^4.4.3", + "@angular/forms": "^4.4.3", + "@angular/http": "^4.4.3", + "@angular/platform-browser": "^4.4.3", + "@angular/platform-browser-dynamic": "^4.4.3", + "@angular/router": "^4.4.3", "core-js": "^2.4.1", "moment": "^2.18.1", "ng-zorro-antd": "file:lib/ng-zorro-antd", @@ -32,9 +32,9 @@ }, "devDependencies": { "@angular-devkit/build-optimizer": "0.0.18", - "@angular/cli": "1.3.2", - "@angular/compiler-cli": "^4.2.4", - "@angular/language-service": "^4.2.4", + "@angular/cli": "1.3.0", + "@angular/compiler-cli": "^4.4.3", + "@angular/language-service": "^4.4.3", "@ngtools/webpack": "^1.6.2", "html-webpack-plugin": "^2.30.1", "typescript": "~2.3.3", diff --git a/package.json b/package.json index 4de47b09006..d7ada75bf2e 100644 --- a/package.json +++ b/package.json @@ -35,23 +35,23 @@ "url": "https://github.com/NG-ZORRO/ng-zorro-antd/issues" }, "dependencies": { - "@angular/cdk": "2.0.0-beta.8", + "@angular/cdk": "2.0.0-beta.11", "moment": "^2.18.1", "tslib": "^1.7.1" }, "devDependencies": { - "@angular/animations": "^4.0.0", "@angular/cli": "1.3.0", - "@angular/common": "^4.0.0", - "@angular/compiler": "^4.0.0", - "@angular/compiler-cli": "^4.0.0", - "@angular/core": "^4.0.0", - "@angular/forms": "^4.0.0", - "@angular/http": "^4.0.0", - "@angular/language-service": "^4.0.0", - "@angular/platform-browser": "^4.0.0", - "@angular/platform-browser-dynamic": "^4.0.0", - "@angular/router": "^4.0.0", + "@angular/animations": "^4.4.3", + "@angular/common": "^4.4.3", + "@angular/compiler": "^4.4.3", + "@angular/compiler-cli": "^4.4.3", + "@angular/core": "^4.4.3", + "@angular/forms": "^4.4.3", + "@angular/http": "^4.4.3", + "@angular/platform-browser": "^4.4.3", + "@angular/platform-browser-dynamic": "^4.4.3", + "@angular/router": "^4.4.3", + "@angular/language-service": "^4.4.3", "@types/jasmine": "~2.5.53", "@types/jasminewd2": "~2.0.2", "@types/node": "~6.0.60", @@ -74,6 +74,7 @@ "rollup": "^0.49.2", "rollup-plugin-node-resolve": "^3.0.0", "rollup-plugin-replace": "^2.0.0", + "rollup-plugin-commonjs": "^8.2.1", "rxjs": "^5.0.1", "ts-node": "~3.2.0", "tslint": "~5.3.2", @@ -83,11 +84,11 @@ "zone.js": "^0.8.14" }, "peerDependencies": { - "@angular/animations": "^4.0.0", - "@angular/cdk": "2.0.0-beta.8", - "@angular/common": "^4.0.0", - "@angular/core": "^4.0.0", - "@angular/forms": "^4.0.0", + "@angular/animations": "^4.4.3", + "@angular/cdk": "2.0.0-beta.11", + "@angular/common": "^4.4.3", + "@angular/core": "^4.4.3", + "@angular/forms": "^4.4.3", "moment": "^2.18.1" } } diff --git a/rollup.config.js b/rollup.config.js index d17ce95c67b..baac8b3c3e4 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -1,5 +1,6 @@ -import resolve from 'rollup-plugin-node-resolve' -import replace from 'rollup-plugin-replace' +import resolve from 'rollup-plugin-node-resolve'; +import replace from 'rollup-plugin-replace'; +import commonjs from 'rollup-plugin-commonjs'; const format = process.env.ROLLUP_FORMAT || 'es' @@ -68,7 +69,11 @@ export default { }, exports: 'named', name: 'ngZorro.antd', - plugins: [replace({ "import * as moment": "import moment" }), resolve()], + plugins: [ + replace({ "import * as moment": "import moment" }), + resolve(), + commonjs(), // For rxjs currently + ], external: Object.keys(globals), globals, } diff --git a/src/components/affix/nz-affix.component.ts b/src/components/affix/nz-affix.component.ts index cc2b86b2b75..337b4c6dfc2 100644 --- a/src/components/affix/nz-affix.component.ts +++ b/src/components/affix/nz-affix.component.ts @@ -12,13 +12,13 @@ import { HostBinding } from '@angular/core'; // import { Observable } from 'rxjs/Observable'; -import { RxChain } from '@angular/cdk'; +import { RxChain } from '@angular/cdk/rxjs'; import { fromEvent } from 'rxjs/observable/fromEvent'; import { throttleTime } from 'rxjs/operator/throttleTime'; import { distinctUntilChanged } from 'rxjs/operator/distinctUntilChanged'; import { Subscription } from 'rxjs/Subscription'; -import { NzScrollService } from "../core/scroll/nz-scroll.service"; +import { NzScrollService } from '../core/scroll/nz-scroll.service'; @Component({ selector: 'nz-affix', diff --git a/src/components/anchor/nz-anchor.component.ts b/src/components/anchor/nz-anchor.component.ts index dc829eb373c..52d5f04db1d 100644 --- a/src/components/anchor/nz-anchor.component.ts +++ b/src/components/anchor/nz-anchor.component.ts @@ -12,14 +12,14 @@ import { Inject } from '@angular/core'; import { DOCUMENT } from '@angular/platform-browser'; -import { RxChain } from '@angular/cdk'; +import { RxChain } from '@angular/cdk/rxjs'; import { fromEvent } from 'rxjs/observable/fromEvent'; import { throttleTime } from 'rxjs/operator/throttleTime'; import { distinctUntilChanged } from 'rxjs/operator/distinctUntilChanged'; import { Subscription } from 'rxjs/Subscription'; -import { NzScrollService } from "../core/scroll/nz-scroll.service"; -import { NzAnchorLinkComponent } from "./nz-anchor-link.component"; +import { NzScrollService } from '../core/scroll/nz-scroll.service'; +import { NzAnchorLinkComponent } from './nz-anchor-link.component'; type Section = { comp: NzAnchorLinkComponent, diff --git a/src/components/back-top/nz-back-top.component.ts b/src/components/back-top/nz-back-top.component.ts index 001c646e96a..7b008e72e7e 100644 --- a/src/components/back-top/nz-back-top.component.ts +++ b/src/components/back-top/nz-back-top.component.ts @@ -18,13 +18,13 @@ import { animate } from '@angular/animations'; // import { Observable } from 'rxjs/Observable'; -import { RxChain } from '@angular/cdk'; +import { RxChain } from '@angular/cdk/rxjs'; import { fromEvent } from 'rxjs/observable/fromEvent'; import { throttleTime } from 'rxjs/operator/throttleTime'; import { distinctUntilChanged } from 'rxjs/operator/distinctUntilChanged'; import { Subscription } from 'rxjs/Subscription'; -import { NzScrollService } from "../core/scroll/nz-scroll.service"; +import { NzScrollService } from '../core/scroll/nz-scroll.service'; @Component({ selector: 'nz-back-top', diff --git a/src/components/cascader/nz-cascader.component.ts b/src/components/cascader/nz-cascader.component.ts index f83a86dad2a..79370a23592 100644 --- a/src/components/cascader/nz-cascader.component.ts +++ b/src/components/cascader/nz-cascader.component.ts @@ -27,11 +27,11 @@ import { UP_ARROW, DOWN_ARROW, ENTER, -} from '@angular/cdk'; +} from '@angular/cdk/keycodes'; const ESC = 27; import { DropDownAnimation } from '../core/animation/dropdown-animations'; -import { ConnectionPositionPair } from '../core/overlay/index'; +import { ConnectionPositionPair } from '@angular/cdk/overlay'; function noop(): void { } @@ -85,8 +85,8 @@ export interface CascaderOption { ], template : `
@@ -122,13 +122,13 @@ export interface CascaderOption {
= TemplateRef | ComponentType; - -export type PositionStrategyType = 'connected' | 'free'; - -export type PositionStrategyOptions = ConnectedPositionOptions | FreePositionOptions; - -export type FloaterOrigin = OverlayOrigin | ElementRef; - -export interface ConnectedPositionOptions { - // Origin for the connected overlay - origin: FloaterOrigin; - - // Registered connected position pairs - positions?: ConnectionPositionPair[]; - - // The offset in pixels for the overlay connection point on the x-axis - offsetX?: number; - - // The offset in pixels for the overlay connection point on the y-axis - offsetY?: number; -} - -export interface FreePositionOptions { - [index: string]: any; // Fake - // TODO -} - -// Options for floater (NOTE: don't like ConnectedOverlayDirective's @Input, normally, these options will be only used once at the initializing time) -export class FloaterOptions { - // --------------------------------------------------------- - // | Configurations - // --------------------------------------------------------- - - // Current position strategy - positionStrategyType?: PositionStrategyType = 'connected'; - - // Position strategy options - positionStrategyOptions?: PositionStrategyOptions; - - // Used for: - // 1. The element's layout direction - // 2. The direction of the text in the overlay panel - dir?: Directionality; - - // The width of the overlay panel - width?: number | string; - - // The height of the overlay panel - height?: number | string; - - // The min width of the overlay panel - minWidth?: number | string; - - // The min height of the overlay panel - minHeight?: number | string; - - // The custom class to be set on the backdrop element - backdropClass?: string; - - // The custom class to be set on the pane element - paneClass?: string; - - // Strategy to be used when handling scroll events while the overlay is open - scrollStrategy?: ScrollStrategy; - - // Whether or not the overlay should attach a backdrop - hasBackdrop?: boolean; - - // Content to be floated - content?: FloaterContent; - - // View container that the content will appended to - viewContainerRef?: ViewContainerRef; - - // [ONLY under "content"=ComponentType] Injector for dynamic creating component - injector?: Injector; - - // [ONLY under "content"=ComponentType] Callback at the moment the component is dynamiclly created (before its ngOnInit()) - afterComponentCreated?: (instance: T) => void; - - // Whether keep overlay existing except call detach() or destroy() manually - persist? = false; - - // --------------------------------------------------------- - // | Emitters - // --------------------------------------------------------- - - // Event emitted when the backdrop is clicked - backdropClick? = new EventEmitter(); - - // Event emitted when the position has changed - positionChange? = new EventEmitter(); - - // Event emitted when the overlay has been attached - attach? = new EventEmitter(); - - // Event emitted when the overlay has been detached - detach? = new EventEmitter(); - - // --------------------------------------------------------- - // | Event listener (against to Emitters, normally used when provide floater as service) - // --------------------------------------------------------- - onBackdropClick?: () => void; - onPositionChange?: (change: ConnectedOverlayPositionChange) => void; - onAttach?: () => void; - onDetach?: () => void; -} - -// Inner properties manager for floater -export class FloaterProps extends FloaterOptions { - private _hasBackdrop = false; - private _position: PositionStrategy; - private _emitterSubscriptions: Subscription[] = []; - - get hasBackdrop() { - return this._hasBackdrop; - } - set hasBackdrop(value: any) { - this._hasBackdrop = coerceBooleanProperty(value); - } - - // Options validator - constructor(options: FloaterOptions) { - super(); - - // Validating - this._validateOptions(options); - - // Merge options - Object.assign(this, options); - - // Default values - this._initDefaultOptions(); - - // Event listeners - this._initEventListeners(); - } - - private _validateOptions(options: FloaterOptions) { - if (!options.content) { - throw new Error('[FloaterOptions] "content" is required.'); - } - if (options.content instanceof TemplateRef && !options.viewContainerRef) { - throw new Error('[FloaterOptions] "viewContainerRef" is required for "content" of TemplateRef.'); - } - if (options.positionStrategyType === 'connected' && !options.positionStrategyOptions) { - throw new Error('[FloaterOptions] "positionStrategyOptions" can\'t be empty when position strategy type is "connected".'); - } - } - - private _initDefaultOptions() { - const strategyOptions = this.positionStrategyOptions as ConnectedPositionOptions; - if (this.positionStrategyType === 'connected') { - if (!strategyOptions.positions || !strategyOptions.positions.length) { - strategyOptions.positions = defaultPositionList; - } - } - } - - private _initEventListeners() { - const subscriptions = this._emitterSubscriptions; - if (this.onBackdropClick) { - subscriptions.push(this.backdropClick.subscribe(this.onBackdropClick)); - } - if (this.onPositionChange) { - subscriptions.push(this.positionChange.subscribe(this.onPositionChange)); - } - if (this.onAttach) { - subscriptions.push(this.attach.subscribe(this.onAttach)); - } - if (this.onDetach) { - subscriptions.push(this.detach.subscribe(this.onDetach)); - } - } - - // --------------------------------------------------------- - // | Public methods - // --------------------------------------------------------- - - // Set current position strategy - setPositionStrategy(position: PositionStrategy) { - this._position = position; - } - getPositionStrategy(): PositionStrategy { - return this._position; - } - - // Destory all resources - destroy() { - this._emitterSubscriptions.forEach(subscription => subscription.unsubscribe()); - this._emitterSubscriptions = null; - } -} diff --git a/src/components/core/floater/floater.service.ts b/src/components/core/floater/floater.service.ts deleted file mode 100644 index 6bcbe135d34..00000000000 --- a/src/components/core/floater/floater.service.ts +++ /dev/null @@ -1,79 +0,0 @@ -import { - Injectable, - Inject, - Injector, - ViewContainerRef, - Provider, - Optional, - SkipSelf -} from '@angular/core'; -import { DOCUMENT } from '@angular/platform-browser'; -import { ComponentType } from '@angular/cdk'; -import { - Floater -} from './floater'; -import { - FloaterOptions, - FloaterContent, - ConnectedPositionOptions, - FreePositionOptions, - PositionStrategyOptions, - PositionStrategyType, -} from './floater-props'; -import { Overlay } from '../overlay/index'; - -Injectable() - -export class FloaterService { - - constructor(private _overlay: Overlay, @Inject(DOCUMENT) private _document: Document) { - // console.log('[FloaterService] constructed once.'); - } - - create(strategyType: PositionStrategyType, - content: FloaterContent, - viewContainerRef?: ViewContainerRef, - strategyOptions?: PositionStrategyOptions, - options?: FloaterOptions) { - options = Object.assign(options || {}, { - content : content, - viewContainerRef : viewContainerRef, - positionStrategyType : strategyType, - positionStrategyOptions: strategyOptions - }); - return new Floater(this._overlay, this._document, options); - } - - createConnected(content: FloaterContent, viewContainerRef?: ViewContainerRef, strategyOptions?: ConnectedPositionOptions, options?: FloaterOptions) { - return this.create('connected', content, viewContainerRef, strategyOptions, options); - } - - createFree(content: FloaterContent, viewContainerRef?: ViewContainerRef, strategyOptions?: FreePositionOptions, options?: FloaterOptions) { - return this.create('free', content, viewContainerRef, strategyOptions, options); - } - - /** - * Persistently create/initialize a Component and append it's DOM to body(under overlay) - * NOTE: the attaching operation is persistent, means that it is no methods to detach the component while attached (no relative resources can be released), SO take care of using it! - * @param component Component class - * @param viewContainerRef Container reference that component will created and append to - * @param injector Injector that will be used while creating component dynamically - * @return Instance of the component - */ - persistAttachComponent(component: ComponentType, viewContainerRef?: ViewContainerRef, injector?: Injector) { - return this.createFree(component, viewContainerRef, null, { - injector: injector, - persist : true - }).attach().getComponentInstance(); - } -} - -export function FLOATER_SERVICE_PROVIDER_FACTORY(overlay, doc, floaterService) { - return floaterService || new FloaterService(overlay, doc); -} - -export const FLOATER_SERVICE_PROVIDER: Provider = { - provide : FloaterService, - useFactory: FLOATER_SERVICE_PROVIDER_FACTORY, - deps : [ Overlay, DOCUMENT, [ new Optional(), new SkipSelf(), FloaterService ] ] -}; diff --git a/src/components/core/floater/floater.ts b/src/components/core/floater/floater.ts deleted file mode 100644 index 281eada711e..00000000000 --- a/src/components/core/floater/floater.ts +++ /dev/null @@ -1,304 +0,0 @@ -import { TemplateRef, ComponentRef, Renderer2 } from '@angular/core'; -import { - OverlayRef, - Overlay, - OverlayState, - OverlayOrigin, - ConnectedPositionStrategy, - PositionStrategy -} from '../overlay/index'; -import { - TemplatePortal, - ComponentPortal, - Portal, - Direction, - ESCAPE -} from '@angular/cdk'; -import { Subscription } from 'rxjs/Subscription'; -import { - FloaterProps, - FloaterOptions, - ConnectedPositionOptions, -} from './floater-props'; - -/** - * Floater object to manage overlay (Enhanced verion of ConnectedOverlayDirective) - * NOTE: don't like ConnectedOverlayDirective, Floater has no dependencies with directive (such as Component, Directive ...) - * but this will means that you should destroy it and incidental resources manually using destroy() method! - */ -export class Floater { - private _props: FloaterProps; - private _overlayRef: OverlayRef; - private _attachedResult: ComponentRef | Map; - private _contentPortal: Portal; - private _backdropSubscription: Subscription | null; - private _positionSubscription: Subscription; - private _escapeListener: Function; - private _stateAttached = false; // State to prevent duplicated attaching/detaching - private _stateDestroyed = false; // State to prevent duplicated destroying - - // The associated overlay reference - get overlayRef(): OverlayRef { - return this._overlayRef; - } - - // The attached component ref or template locals(haven't done yet) - get attachedResult() { - return this._attachedResult; - } - - // The element's layout direction && The direction of the text in the overlay panel - get dir(): Direction { - return this._props.dir ? this._props.dir.value : 'ltr'; - } - - constructor(private _overlay: Overlay, - private _renderer: Renderer2 | Document, - options: FloaterOptions) { - - this._props = new FloaterProps(options); - const { content, viewContainerRef, injector } = this._props; - - if (content instanceof TemplateRef) { - this._contentPortal = new TemplatePortal(content, viewContainerRef); - } else if (typeof content === 'function') { // Assume all functions stand as component - this._contentPortal = new ComponentPortal(content, viewContainerRef, injector); - } else { - throw new Error('[Floater] Not support "content" type.'); - } - } - - // Get attached component's instance - getComponentInstance() { - if (!this._isCreatedByComponent()) { - throw new Error(`Cant't get ComponentRef when created without ComponentType (Should fill the "content" option with value of ComponentType)`); - } - return (>this.attachedResult).instance; - } - - attach(): this { - if (!this._stateAttached) { - this._stateAttached = true; - this._attachOverlay(); - } - return this; - } - - detach(): this { - if (this._stateAttached) { - this._stateAttached = false; - this._detachOverlay(); - } - return this; - } - - destroy(): this { - if (!this._stateDestroyed) { - this._stateDestroyed = true; - this._destroyOverlay(); - } - return this; - } - - // Attaches the overlay and subscribes to backdrop clicks if backdrop exists - private _attachOverlay() { - // console.log('[Floater] Attach overlay'); - - const { hasBackdrop, backdropClick, attach, persist } = this._props; - if (!this._overlayRef) { - this._createOverlay(); - } - - const position = this._props.getPositionStrategy(); - if (position instanceof ConnectedPositionStrategy) { - position.withDirection(this.dir); - } - - this._overlayRef.getState().direction = this.dir; - if (!persist) { - this._initEscapeListener(); - } - - if (!this._overlayRef.hasAttached()) { - this._attachedResult = this._overlayRef.attach(this._contentPortal); - if (this._isCreatedByComponent()) { - this._handleAttachedComponent(this._attachedResult as ComponentRef); - } - if (attach) { - attach.emit(); - } - } - - if (hasBackdrop && backdropClick) { - this._backdropSubscription = this._overlayRef.backdropClick().subscribe(() => { - backdropClick.emit(); - }); - } - } - - // Detaches the overlay and unsubscribes to backdrop clicks if backdrop exists - private _detachOverlay() { - // console.log('[Floater] Detach overlay'); - - const { detach } = this._props; - if (this._overlayRef) { - this._overlayRef.detach(); - if (detach) { - detach.emit(); - } - } - - if (this._backdropSubscription) { - this._backdropSubscription.unsubscribe(); - this._backdropSubscription = null; - } - - if (this._escapeListener) { - this._escapeListener(); - this._escapeListener = null; - } - } - - // Destroys the overlay created by this directive - private _destroyOverlay() { - // console.log('[Floater] Destroy overlay'); - - if (this._overlayRef) { - this.overlayRef.dispose(); - } - - if (this._backdropSubscription) { - this._backdropSubscription.unsubscribe(); - } - - if (this._positionSubscription) { - this._positionSubscription.unsubscribe(); - } - - if (this._escapeListener) { - this._escapeListener(); - } - - this._props.destroy(); - } - - // Creates an overlay - private _createOverlay() { - this._overlayRef = this._overlay.create(this._buildConfig(), this._props.paneClass); - } - - // Builds the overlay config based on the directive's inputs - private _buildConfig(): OverlayState { - const overlayConfig = new OverlayState(); - const { width, height, minWidth, minHeight, hasBackdrop, backdropClass } = this._props; - - if (width || width === 0) { - overlayConfig.width = width; - } - if (height || height === 0) { - overlayConfig.height = height; - } - if (minWidth || minWidth === 0) { - overlayConfig.minWidth = minWidth; - } - if (minHeight || minHeight === 0) { - overlayConfig.minHeight = minHeight; - } - - overlayConfig.hasBackdrop = hasBackdrop; - - if (backdropClass) { - overlayConfig.backdropClass = backdropClass; - } - - const strategy = this._createPositionStrategy(); - if (strategy) { - this._props.setPositionStrategy(strategy); - overlayConfig.positionStrategy = strategy; - // Use noop scroll strategy by default - overlayConfig.scrollStrategy = - this._props.scrollStrategy ? this._props.scrollStrategy : this._overlay.scrollStrategies.noop(); - } - - return overlayConfig; - } - - // Returns the position strategy of the overlay to be set on the overlay config - private _createPositionStrategy(): PositionStrategy { - const { positionStrategyType: strategyType, positionStrategyOptions: strategyOptions } = this._props; - - let strategy = null; - if (strategyType === 'connected') { // Using ConnectedPositionStrategy - const { positions, origin, offsetX, offsetY } = strategyOptions as ConnectedPositionOptions; - const pos = positions[0]; - const originPoint = { originX: pos.originX, originY: pos.originY }; - const overlayPoint = { overlayX: pos.overlayX, overlayY: pos.overlayY }; - const elementRef = origin instanceof OverlayOrigin ? origin.elementRef : origin; - strategy = this._overlay.position() - .connectedTo(elementRef, originPoint, overlayPoint) - .withOffsetX(offsetX || 0) - .withOffsetY(offsetY || 0); - - this._handlePositionChanges(strategy); - - if (!this._props.scrollStrategy) { // Default scroll strategy for ConnectedPositionStrategy - this._props.scrollStrategy = this._overlay.scrollStrategies.reposition(); - } - } else if (strategyType === 'free') { // Using FreePositionStrategy - strategy = this._overlay.position().free(); - } - - return strategy; - } - - // For ConnectedPositionStrategy ONLY - private _handlePositionChanges(strategy: ConnectedPositionStrategy): void { - const { positionStrategyOptions: strategyOptions, positionChange } = this._props; - const positions = (strategyOptions).positions; - for (let i = 1; i < positions.length; i++) { - strategy.withFallbackPosition( - { originX: positions[i].originX, originY: positions[i].originY }, - { overlayX: positions[i].overlayX, overlayY: positions[i].overlayY } - ); - } - - if (positionChange) { - this._positionSubscription = - strategy.onPositionChange.subscribe(pos => positionChange.emit(pos)); - } - } - - // Return if the floater is initialized by dynamic Component - private _isCreatedByComponent() { - return this._contentPortal instanceof ComponentPortal; - } - - // Other works after creating component - private _handleAttachedComponent(componentRef: ComponentRef) { - const instance = componentRef.instance, afterComponentCreated = this._props.afterComponentCreated; - - if (afterComponentCreated) { - afterComponentCreated(instance); - } - } - - // Sets the event listener that closes the overlay when pressing Escape - private _initEscapeListener() { - const listener = (event: KeyboardEvent) => { - if (event.keyCode === ESCAPE) { - this._detachOverlay(); - } - }; - - if (this._renderer instanceof Renderer2) { - this._escapeListener = this._renderer.listen('document', 'keydown', listener); - } else if (this._renderer instanceof Document) { - // console.log('[Floater/_initEscapeListener]use document', this._renderer); - this._renderer.addEventListener('keydown', listener); - this._escapeListener = () => { - (this._renderer).removeEventListener('keydown', listener); - }; - } - } - -} diff --git a/src/components/core/floater/index.ts b/src/components/core/floater/index.ts deleted file mode 100644 index 97c37d26da7..00000000000 --- a/src/components/core/floater/index.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { NgModule, Provider } from '@angular/core'; -import { OverlayModule } from '../overlay/index'; -import { FLOATER_SERVICE_PROVIDER } from './floater.service'; - -const providers: Provider[] = [ - FLOATER_SERVICE_PROVIDER -]; - -@NgModule({ - imports: [ OverlayModule ], - providers: providers -}) -export class FloaterModule {} - -export * from './floater-props'; -export { Floater } from './floater'; -export { FloaterService } from './floater.service'; diff --git a/src/components/core/overlay/fullscreen-overlay-container.ts b/src/components/core/overlay/fullscreen-overlay-container.ts deleted file mode 100755 index 5c9a34e8436..00000000000 --- a/src/components/core/overlay/fullscreen-overlay-container.ts +++ /dev/null @@ -1,61 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import {Injectable} from '@angular/core'; -import {OverlayContainer} from './overlay-container'; - -/** - * The FullscreenOverlayContainer is the alternative to OverlayContainer - * that supports correct displaying of overlay elements in Fullscreen mode - * https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen - * It should be provided in the root component that way: - * providers: [ - * {provide: OverlayContainer, useClass: FullscreenOverlayContainer} - * ], - */ -@Injectable() -export class FullscreenOverlayContainer extends OverlayContainer { - protected _createContainer(): void { - super._createContainer(); - this._adjustParentForFullscreenChange(); - this._addFullscreenChangeListener(() => this._adjustParentForFullscreenChange()); - } - - private _adjustParentForFullscreenChange(): void { - if (!this._containerElement) { - return; - } - const fullscreenElement = this.getFullscreenElement(); - const parent = fullscreenElement || document.body; - parent.appendChild(this._containerElement); - } - - private _addFullscreenChangeListener(fn: () => void) { - if (document.fullscreenEnabled) { - document.addEventListener('fullscreenchange', fn); - } else if (document.webkitFullscreenEnabled) { - document.addEventListener('webkitfullscreenchange', fn); - } else if ((document as any).mozFullScreenEnabled) { - document.addEventListener('mozfullscreenchange', fn); - } else if ((document as any).msFullscreenEnabled) { - document.addEventListener('MSFullscreenChange', fn); - } - } - - /** - * When the page is put into fullscreen mode, a specific element is specified. - * Only that element and its children are visible when in fullscreen mode. - */ - getFullscreenElement(): Element { - return document.fullscreenElement || - document.webkitFullscreenElement || - (document as any).mozFullScreenElement || - (document as any).msFullscreenElement || - null; - } -} diff --git a/src/components/core/overlay/generic-component-type.ts b/src/components/core/overlay/generic-component-type.ts deleted file mode 100755 index e4c7688dba2..00000000000 --- a/src/components/core/overlay/generic-component-type.ts +++ /dev/null @@ -1,11 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -export interface ComponentType { - new (...args: any[]): T; -} diff --git a/src/components/core/overlay/index.ts b/src/components/core/overlay/index.ts deleted file mode 100755 index 0aaf01fbcdc..00000000000 --- a/src/components/core/overlay/index.ts +++ /dev/null @@ -1,47 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ -import {NgModule, Provider} from '@angular/core'; -import {Overlay} from './overlay'; -import {ScrollDispatchModule} from './scroll/index'; -import {ConnectedOverlayDirective, OverlayOrigin} from './overlay-directives'; -import {OverlayPositionBuilder} from './position/overlay-position-builder'; -import {VIEWPORT_RULER_PROVIDER} from './position/viewport-ruler'; -import {OVERLAY_CONTAINER_PROVIDER} from './overlay-container'; - - -export const OVERLAY_PROVIDERS: Provider[] = [ - Overlay, - OverlayPositionBuilder, - VIEWPORT_RULER_PROVIDER, - OVERLAY_CONTAINER_PROVIDER, -]; - -@NgModule({ - imports: [ScrollDispatchModule], - exports: [ConnectedOverlayDirective, OverlayOrigin, ScrollDispatchModule], - declarations: [ConnectedOverlayDirective, OverlayOrigin], - providers: [OVERLAY_PROVIDERS], -}) -export class OverlayModule {} - - -export {Overlay} from './overlay'; -export {OverlayContainer} from './overlay-container'; -export {FullscreenOverlayContainer} from './fullscreen-overlay-container'; -export {OverlayRef} from './overlay-ref'; -export {OverlayState} from './overlay-state'; -export {ConnectedOverlayDirective, OverlayOrigin} from './overlay-directives'; -export {ViewportRuler} from './position/viewport-ruler'; - -export * from './position/connected-position'; -export * from './scroll/index'; - -// Export pre-defined position strategies and interface to build custom ones. -export {PositionStrategy} from './position/position-strategy'; -export {GlobalPositionStrategy} from './position/global-position-strategy'; -export {ConnectedPositionStrategy} from './position/connected-position-strategy'; diff --git a/src/components/core/overlay/overlay-container.ts b/src/components/core/overlay/overlay-container.ts deleted file mode 100755 index 23980e2308f..00000000000 --- a/src/components/core/overlay/overlay-container.ts +++ /dev/null @@ -1,75 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import {Injectable, Optional, SkipSelf} from '@angular/core'; - - -/** - * The OverlayContainer is the container in which all overlays will load. - * It should be provided in the root component to ensure it is properly shared. - */ -@Injectable() -export class OverlayContainer { - protected _containerElement: HTMLElement; - - private _themeClass: string; - - /** - * Base theme to be applied to all overlay-based components. - */ - get themeClass(): string { return this._themeClass; } - set themeClass(value: string) { - if (this._containerElement) { - this._containerElement.classList.remove(this._themeClass); - - if (value) { - this._containerElement.classList.add(value); - } - } - - this._themeClass = value; - } - - /** - * This method returns the overlay container element. It will lazily - * create the element the first time it is called to facilitate using - * the container in non-browser environments. - * @returns the container element - */ - getContainerElement(): HTMLElement { - if (!this._containerElement) { this._createContainer(); } - return this._containerElement; - } - - /** - * Create the overlay container element, which is simply a div - * with the 'cdk-overlay-container' class on the document body. - */ - protected _createContainer(): void { - const container = document.createElement('div'); - container.classList.add('nz-overlay-container'); - - if (this._themeClass) { - container.classList.add(this._themeClass); - } - - document.body.appendChild(container); - this._containerElement = container; - } -} - -export function OVERLAY_CONTAINER_PROVIDER_FACTORY(parentContainer: OverlayContainer) { - return parentContainer || new OverlayContainer(); -} - -export const OVERLAY_CONTAINER_PROVIDER = { - // If there is already an OverlayContainer available, use that. Otherwise, provide a new one. - provide: OverlayContainer, - deps: [[new Optional(), new SkipSelf(), OverlayContainer]], - useFactory: OVERLAY_CONTAINER_PROVIDER_FACTORY -}; diff --git a/src/components/core/overlay/overlay-directives.ts b/src/components/core/overlay/overlay-directives.ts deleted file mode 100755 index f6bb4a218c4..00000000000 --- a/src/components/core/overlay/overlay-directives.ts +++ /dev/null @@ -1,329 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import { - Directive, - EventEmitter, - TemplateRef, - ViewContainerRef, - Optional, - Input, - OnDestroy, - Output, - ElementRef, - Renderer2, - OnChanges, - SimpleChanges, -} from '@angular/core'; -import { Overlay } from './overlay'; -import { OverlayRef } from './overlay-ref'; -import { TemplatePortal } from '@angular/cdk'; -import { OverlayState } from './overlay-state'; -import { - ConnectionPositionPair, - ConnectedOverlayPositionChange -} from './position/connected-position'; -import { ConnectedPositionStrategy } from './position/connected-position-strategy'; -import { Directionality, Direction } from '@angular/cdk'; -import { ScrollStrategy } from './scroll/scroll-strategy'; -import { ESCAPE } from '@angular/cdk'; -import { Subscription } from 'rxjs/Subscription'; -/** Coerces a data-bound value (typically a string) to a boolean. */ -export function coerceBooleanProperty(value: any): boolean { - return value != null && `${value}` !== 'false'; -} - - -/** Default set of positions for the overlay. Follows the behavior of a dropdown. */ -const defaultPositionList = [ - new ConnectionPositionPair( - { originX: 'start', originY: 'bottom' }, - { overlayX: 'start', overlayY: 'top' }), - new ConnectionPositionPair( - { originX: 'start', originY: 'top' }, - { overlayX: 'start', overlayY: 'bottom' }), -]; - - -/** - * Directive applied to an element to make it usable as an origin for an Overlay using a - * ConnectedPositionStrategy. - */ -@Directive({ - selector: '[nz-overlay-origin]', - exportAs: 'nzOverlayOrigin', -}) -export class OverlayOrigin { - constructor(public elementRef: ElementRef) { - } -} - - -/** - * Directive to facilitate declarative creation of an Overlay using a ConnectedPositionStrategy. - */ -@Directive({ - selector: '[nz-connected-overlay]', - exportAs: 'nzConnectedOverlay' -}) -export class ConnectedOverlayDirective implements OnDestroy, OnChanges { - private _overlayRef: OverlayRef; - private _templatePortal: TemplatePortal; - private _hasBackdrop = false; - private _backdropSubscription: Subscription | null; - private _positionSubscription: Subscription; - private _offsetX = 0; - private _offsetY = 0; - private _position: ConnectedPositionStrategy; - private _escapeListener: Function; - - /** Origin for the connected overlay. */ - @Input() origin: OverlayOrigin; - - /** Registered connected position pairs. */ - @Input() positions: ConnectionPositionPair[]; - - /** The offset in pixels for the overlay connection point on the x-axis */ - @Input() - get offsetX(): number { - return this._offsetX; - } - - set offsetX(offsetX: number) { - this._offsetX = offsetX; - if (this._position) { - this._position.withOffsetX(offsetX); - } - } - - /** The offset in pixels for the overlay connection point on the y-axis */ - @Input() - get offsetY() { - return this._offsetY; - } - - set offsetY(offsetY: number) { - this._offsetY = offsetY; - if (this._position) { - this._position.withOffsetY(offsetY); - } - } - - /** The width of the overlay panel. */ - @Input() width: number | string; - - /** The height of the overlay panel. */ - @Input() height: number | string; - - /** The min width of the overlay panel. */ - @Input() minWidth: number | string; - - /** The min height of the overlay panel. */ - @Input() minHeight: number | string; - - /** The custom class to be set on the backdrop element. */ - @Input() backdropClass: string; - - /** The custom class to be set on the pane element. */ - @Input() paneClass: string; - - /** Strategy to be used when handling scroll events while the overlay is open. */ - @Input() scrollStrategy: ScrollStrategy = this._overlay.scrollStrategies.reposition(); - - /** Whether the overlay is open. */ - @Input() open = false; - - /** Whether or not the overlay should attach a backdrop. */ - @Input() - get hasBackdrop() { - return this._hasBackdrop; - } - - set hasBackdrop(value: any) { - this._hasBackdrop = coerceBooleanProperty(value); - } - - /** Event emitted when the backdrop is clicked. */ - @Output() backdropClick = new EventEmitter(); - - /** Event emitted when the position has changed. */ - @Output() positionChange = new EventEmitter(); - - /** Event emitted when the overlay has been attached. */ - @Output() attach = new EventEmitter(); - - /** Event emitted when the overlay has been detached. */ - @Output() detach = new EventEmitter(); - - // TODO(jelbourn): inputs for size, scroll behavior, animation, etc. - - constructor(private _overlay: Overlay, - private _renderer: Renderer2, - templateRef: TemplateRef, - viewContainerRef: ViewContainerRef, - @Optional() private _dir: Directionality) { - this._templatePortal = new TemplatePortal(templateRef, viewContainerRef); - } - - /** The associated overlay reference. */ - get overlayRef(): OverlayRef { - return this._overlayRef; - } - - /** The element's layout direction. */ - get dir(): Direction { - return this._dir ? this._dir.value : 'ltr'; - } - - ngOnDestroy() { - this._destroyOverlay(); - } - - ngOnChanges(changes: SimpleChanges) { - if (changes[ 'open' ]) { - this.open ? this._attachOverlay() : this._detachOverlay(); - } - } - - /** Creates an overlay */ - private _createOverlay() { - if (!this.positions || !this.positions.length) { - this.positions = defaultPositionList; - } - - this._overlayRef = this._overlay.create(this._buildConfig(), this.paneClass); - } - - /** Builds the overlay config based on the directive's inputs */ - private _buildConfig(): OverlayState { - const overlayConfig = new OverlayState(); - - if (this.width || this.width === 0) { - overlayConfig.width = this.width; - } - - if (this.height || this.height === 0) { - overlayConfig.height = this.height; - } - - if (this.minWidth || this.minWidth === 0) { - overlayConfig.minWidth = this.minWidth; - } - - if (this.minHeight || this.minHeight === 0) { - overlayConfig.minHeight = this.minHeight; - } - - overlayConfig.hasBackdrop = this.hasBackdrop; - - if (this.backdropClass) { - overlayConfig.backdropClass = this.backdropClass; - } - - this._position = this._createPositionStrategy() as ConnectedPositionStrategy; - overlayConfig.positionStrategy = this._position; - overlayConfig.scrollStrategy = this.scrollStrategy; - - return overlayConfig; - } - - /** Returns the position strategy of the overlay to be set on the overlay config */ - private _createPositionStrategy(): ConnectedPositionStrategy { - const pos = this.positions[ 0 ]; - const originPoint = { originX: pos.originX, originY: pos.originY }; - const overlayPoint = { overlayX: pos.overlayX, overlayY: pos.overlayY }; - - const strategy = this._overlay.position() - .connectedTo(this.origin.elementRef, originPoint, overlayPoint) - .withOffsetX(this.offsetX) - .withOffsetY(this.offsetY); - - this._handlePositionChanges(strategy); - - return strategy; - } - - private _handlePositionChanges(strategy: ConnectedPositionStrategy): void { - for (let i = 1; i < this.positions.length; i++) { - strategy.withFallbackPosition( - { originX: this.positions[ i ].originX, originY: this.positions[ i ].originY }, - { overlayX: this.positions[ i ].overlayX, overlayY: this.positions[ i ].overlayY } - ); - } - - this._positionSubscription = - strategy.onPositionChange.subscribe(pos => this.positionChange.emit(pos)); - } - - /** Attaches the overlay and subscribes to backdrop clicks if backdrop exists */ - private _attachOverlay() { - if (!this._overlayRef) { - this._createOverlay(); - } - - this._position.withDirection(this.dir); - this._overlayRef.getState().direction = this.dir; - this._initEscapeListener(); - - if (!this._overlayRef.hasAttached()) { - this._overlayRef.attach(this._templatePortal); - this.attach.emit(); - } - - if (this.hasBackdrop) { - this._backdropSubscription = this._overlayRef.backdropClick().subscribe(() => { - this.backdropClick.emit(); - }); - } - } - - /** Detaches the overlay and unsubscribes to backdrop clicks if backdrop exists */ - private _detachOverlay() { - if (this._overlayRef) { - this._overlayRef.detach(); - this.detach.emit(); - } - - if (this._backdropSubscription) { - this._backdropSubscription.unsubscribe(); - this._backdropSubscription = null; - } - - if (this._escapeListener) { - this._escapeListener(); - } - } - - /** Destroys the overlay created by this directive. */ - private _destroyOverlay() { - if (this._overlayRef) { - this._overlayRef.dispose(); - } - - if (this._backdropSubscription) { - this._backdropSubscription.unsubscribe(); - } - - if (this._positionSubscription) { - this._positionSubscription.unsubscribe(); - } - - if (this._escapeListener) { - this._escapeListener(); - } - } - - /** Sets the event listener that closes the overlay when pressing Escape. */ - private _initEscapeListener() { - this._escapeListener = this._renderer.listen('document', 'keydown', (event: KeyboardEvent) => { - if (event.keyCode === ESCAPE) { - this._detachOverlay(); - } - }); - } -} diff --git a/src/components/core/overlay/overlay-position-map.ts b/src/components/core/overlay/overlay-position-map.ts index 0eeedd9a36e..88eb19b0d4a 100644 --- a/src/components/core/overlay/overlay-position-map.ts +++ b/src/components/core/overlay/overlay-position-map.ts @@ -1,4 +1,4 @@ -import { ConnectionPositionPair } from './index'; +import { ConnectionPositionPair } from '@angular/cdk/overlay'; export const POSITION_MAP = { 'top' : { diff --git a/src/components/core/overlay/overlay-ref.ts b/src/components/core/overlay/overlay-ref.ts deleted file mode 100755 index c71e366cfe3..00000000000 --- a/src/components/core/overlay/overlay-ref.ts +++ /dev/null @@ -1,264 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import {NgZone} from '@angular/core'; -import {PortalHost, Portal} from '@angular/cdk'; -import {OverlayState} from './overlay-state'; -import {ScrollStrategy} from './scroll/scroll-strategy'; -import {Observable} from 'rxjs/Observable'; -import {Subject} from 'rxjs/Subject'; - - -/** - * Reference to an overlay that has been created with the Overlay service. - * Used to manipulate or dispose of said overlay. - */ -export class OverlayRef implements PortalHost { - private _backdropElement: HTMLElement | null = null; - private _backdropClick: Subject = new Subject(); - private _attachments = new Subject(); - private _detachments = new Subject(); - - constructor( - private _portalHost: PortalHost, - private _pane: HTMLElement, - private _state: OverlayState, - private _scrollStrategy: ScrollStrategy, - private _ngZone: NgZone) { - - _scrollStrategy.attach(this); - } - - /** The overlay's HTML element */ - get overlayElement(): HTMLElement { - return this._pane; - } - - /** - * Attaches the overlay to a portal instance and adds the backdrop. - * @param portal Portal instance to which to attach the overlay. - * @returns The portal attachment result. - */ - attach(portal: Portal): any { - const attachResult = this._portalHost.attach(portal); - - // Update the pane element with the given state configuration. - this._updateStackingOrder(); - this.updateSize(); - this.updateDirection(); - this.updatePosition(); - this._scrollStrategy.enable(); - - // Enable pointer events for the overlay pane element. - this._togglePointerEvents(true); - - if (this._state.hasBackdrop) { - this._attachBackdrop(); - } - - if (this._state.panelClass) { - this._pane.classList.add(this._state.panelClass); - } - - // Only emit the `attachments` event once all other setup is done. - this._attachments.next(); - - return attachResult; - } - - /** - * Detaches an overlay from a portal. - * @returns Resolves when the overlay has been detached. - */ - detach(): Promise { - this.detachBackdrop(); - - // When the overlay is detached, the pane element should disable pointer events. - // This is necessary because otherwise the pane element will cover the page and disable - // pointer events therefore. Depends on the position strategy and the applied pane boundaries. - this._togglePointerEvents(false); - this._scrollStrategy.disable(); - - const detachmentResult = this._portalHost.detach(); - - // Only emit after everything is detached. - this._detachments.next(); - - return detachmentResult; - } - - /** - * Cleans up the overlay from the DOM. - */ - dispose(): void { - if (this._state.positionStrategy) { - this._state.positionStrategy.dispose(); - } - - if (this._scrollStrategy) { - this._scrollStrategy.disable(); - } - - this.detachBackdrop(); - this._portalHost.dispose(); - this._attachments.complete(); - this._backdropClick.complete(); - this._detachments.next(); - this._detachments.complete(); - } - - /** - * Checks whether the overlay has been attached. - */ - hasAttached(): boolean { - return this._portalHost.hasAttached(); - } - - /** - * Returns an observable that emits when the backdrop has been clicked. - */ - backdropClick(): Observable { - return this._backdropClick.asObservable(); - } - - /** Returns an observable that emits when the overlay has been attached. */ - attachments(): Observable { - return this._attachments.asObservable(); - } - - /** Returns an observable that emits when the overlay has been detached. */ - detachments(): Observable { - return this._detachments.asObservable(); - } - - /** - * Gets the current state config of the overlay. - */ - getState(): OverlayState { - return this._state; - } - - /** Updates the position of the overlay based on the position strategy. */ - updatePosition() { - if (this._state.positionStrategy) { - this._state.positionStrategy.apply(this._pane); - } - } - - /** Updates the text direction of the overlay panel. */ - private updateDirection() { - this._pane.setAttribute('dir', this._state.direction); - } - - - /** Updates the size of the overlay based on the overlay config. */ - updateSize() { - if (this._state.width || this._state.width === 0) { - this._pane.style.width = formatCssUnit(this._state.width); - } - - if (this._state.height || this._state.height === 0) { - this._pane.style.height = formatCssUnit(this._state.height); - } - - if (this._state.minWidth || this._state.minWidth === 0) { - this._pane.style.minWidth = formatCssUnit(this._state.minWidth); - } - - if (this._state.minHeight || this._state.minHeight === 0) { - this._pane.style.minHeight = formatCssUnit(this._state.minHeight); - } - } - - /** Toggles the pointer events for the overlay pane element. */ - private _togglePointerEvents(enablePointer: boolean) { - this._pane.style.pointerEvents = enablePointer ? 'auto' : 'none'; - } - - /** Attaches a backdrop for this overlay. */ - private _attachBackdrop() { - this._backdropElement = document.createElement('div'); - this._backdropElement.classList.add('nz-overlay-backdrop'); - - if (this._state.backdropClass) { - this._backdropElement.classList.add(this._state.backdropClass); - } - - // Insert the backdrop before the pane in the DOM order, - // in order to handle stacked overlays properly. - this._pane.parentElement.insertBefore(this._backdropElement, this._pane); - - // Forward backdrop clicks such that the consumer of the overlay can perform whatever - // action desired when such a click occurs (usually closing the overlay). - this._backdropElement.addEventListener('click', () => this._backdropClick.next(null)); - - // Add class to fade-in the backdrop after one frame. - requestAnimationFrame(() => { - if (this._backdropElement) { - this._backdropElement.classList.add('nz-overlay-backdrop-showing'); - } - }); - } - - /** - * Updates the stacking order of the element, moving it to the top if necessary. - * This is required in cases where one overlay was detached, while another one, - * that should be behind it, was destroyed. The next time both of them are opened, - * the stacking will be wrong, because the detached element's pane will still be - * in its original DOM position. - */ - private _updateStackingOrder() { - if (this._pane.nextSibling) { - this._pane.parentNode.appendChild(this._pane); - } - } - - /** Detaches the backdrop (if any) associated with the overlay. */ - detachBackdrop(): void { - const backdropToDetach = this._backdropElement; - - if (backdropToDetach) { - const finishDetach = () => { - // It may not be attached to anything in certain cases (e.g. unit tests). - if (backdropToDetach && backdropToDetach.parentNode) { - backdropToDetach.parentNode.removeChild(backdropToDetach); - } - - // It is possible that a new portal has been attached to this overlay since we started - // removing the backdrop. If that is the case, only clear the backdrop reference if it - // is still the same instance that we started to remove. - if (this._backdropElement === backdropToDetach) { - this._backdropElement = null; - } - }; - - backdropToDetach.classList.remove('nz-overlay-backdrop-showing'); - - if (this._state.backdropClass) { - backdropToDetach.classList.remove(this._state.backdropClass); - } - - backdropToDetach.addEventListener('transitionend', finishDetach); - - // If the backdrop doesn't have a transition, the `transitionend` event won't fire. - // In this case we make it unclickable and we try to remove it after a delay. - backdropToDetach.style.pointerEvents = 'none'; - - // Run this outside the Angular zone because there's nothing that Angular cares about. - // If it were to run inside the Angular zone, every test that used Overlay would have to be - // either async or fakeAsync. - this._ngZone.runOutsideAngular(() => { - setTimeout(finishDetach, 500); - }); - } - } -} - -function formatCssUnit(value: number | string) { - return typeof value === 'string' ? value as string : `${value}px`; -} diff --git a/src/components/core/overlay/overlay-state.ts b/src/components/core/overlay/overlay-state.ts deleted file mode 100755 index bec124ed51a..00000000000 --- a/src/components/core/overlay/overlay-state.ts +++ /dev/null @@ -1,53 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import {PositionStrategy} from './position/position-strategy'; -import {Direction} from '@angular/cdk'; -import {ScrollStrategy} from './scroll/scroll-strategy'; - - -/** - * OverlayState is a bag of values for either the initial configuration or current state of an - * overlay. - */ -export class OverlayState { - /** Strategy with which to position the overlay. */ - positionStrategy: PositionStrategy; - - /** Strategy to be used when handling scroll events while the overlay is open. */ - scrollStrategy: ScrollStrategy; - - /** Custom class to add to the overlay pane. */ - panelClass = ''; - - /** Whether the overlay has a backdrop. */ - hasBackdrop = false; - - /** Custom class to add to the backdrop */ - backdropClass = 'cdk-overlay-dark-backdrop'; - - /** The width of the overlay panel. If a number is provided, pixel units are assumed. */ - width?: number | string; - - /** The height of the overlay panel. If a number is provided, pixel units are assumed. */ - height?: number | string; - - /** The min-width of the overlay panel. If a number is provided, pixel units are assumed. */ - minWidth?: number | string; - - /** The min-height of the overlay panel. If a number is provided, pixel units are assumed. */ - minHeight?: number | string; - - /** The direction of the text in the overlay panel. */ - direction?: Direction = 'ltr'; - - // TODO(jelbourn): configuration still to add - // - focus trap - // - disable pointer events - // - z-index -} diff --git a/src/components/core/overlay/overlay.ts b/src/components/core/overlay/overlay.ts deleted file mode 100755 index 40d277754f1..00000000000 --- a/src/components/core/overlay/overlay.ts +++ /dev/null @@ -1,106 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import { - ComponentFactoryResolver, - Injectable, - ApplicationRef, - Injector, - NgZone, -} from '@angular/core'; -import { OverlayState } from './overlay-state'; -import { DomPortalHost } from '@angular/cdk'; -import { OverlayRef } from './overlay-ref'; -import { OverlayPositionBuilder } from './position/overlay-position-builder'; -import { OverlayContainer } from './overlay-container'; -import { ScrollStrategyOptions } from './scroll/index'; - - -/** Next overlay unique ID. */ -let nextUniqueId = 0; - -/** The default state for newly created overlays. */ -const defaultState = new OverlayState(); - - -/** - * Service to create Overlays. Overlays are dynamically added pieces of floating UI, meant to be - * used as a low-level building building block for other components. Dialogs, tooltips, menus, - * selects, etc. can all be built using overlays. The service should primarily be used by authors - * of re-usable components rather than developers building end-user applications. - * - * An overlay *is* a PortalHost, so any kind of Portal can be loaded into one. - */ -@Injectable() -export class Overlay { - constructor(public scrollStrategies: ScrollStrategyOptions, - private _overlayContainer: OverlayContainer, - private _componentFactoryResolver: ComponentFactoryResolver, - private _positionBuilder: OverlayPositionBuilder, - private _appRef: ApplicationRef, - private _injector: Injector, - private _ngZone: NgZone) { - } - - /** - * Creates an overlay. - * @param state State to apply to the overlay. - * @returns Reference to the created overlay. - */ - create(state: OverlayState = defaultState, paneClassName?: string): OverlayRef { - return this._createOverlayRef(this._createPaneElement(paneClassName), state); - } - - /** - * Returns a position builder that can be used, via fluent API, - * to construct and configure a position strategy. - */ - position(): OverlayPositionBuilder { - return this._positionBuilder; - } - - /** - * Creates the DOM element for an overlay and appends it to the overlay container. - * @returns Newly-created pane element - */ - private _createPaneElement(className?: string): HTMLElement { - const pane = document.createElement('div'); - - pane.id = `nz-overlay-${nextUniqueId++}`; - pane.classList.add('nz-overlay-pane'); - if (className) { - const classList = className.split(' '); - classList.forEach(c => { - pane.classList.add(c); - }) - } - this._overlayContainer.getContainerElement().appendChild(pane); - - return pane; - } - - /** - * Create a DomPortalHost into which the overlay content can be loaded. - * @param pane The DOM element to turn into a portal host. - * @returns A portal host for the given DOM element. - */ - private _createPortalHost(pane: HTMLElement): DomPortalHost { - return new DomPortalHost(pane, this._componentFactoryResolver, this._appRef, this._injector); - } - - /** - * Creates an OverlayRef for an overlay in the given DOM element. - * @param pane DOM element for the overlay - * @param state - */ - private _createOverlayRef(pane: HTMLElement, state: OverlayState): OverlayRef { - const scrollStrategy = state.scrollStrategy || this.scrollStrategies.noop(); - const portalHost = this._createPortalHost(pane); - return new OverlayRef(portalHost, pane, state, scrollStrategy, this._ngZone); - } -} diff --git a/src/components/core/overlay/position/connected-position-strategy.ts b/src/components/core/overlay/position/connected-position-strategy.ts deleted file mode 100755 index a9619424311..00000000000 --- a/src/components/core/overlay/position/connected-position-strategy.ts +++ /dev/null @@ -1,435 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import {PositionStrategy} from './position-strategy'; -import {ElementRef} from '@angular/core'; -import {ViewportRuler} from './viewport-ruler'; -import { - ConnectionPositionPair, - OriginConnectionPosition, - OverlayConnectionPosition, - ConnectedOverlayPositionChange, ScrollableViewProperties -} from './connected-position'; -import {Subject} from 'rxjs/Subject'; -import {Observable} from 'rxjs/Observable'; -import {Scrollable} from '../scroll/scrollable'; - -/** - * Container to hold the bounding positions of a particular element with respect to the viewport, - * where top and bottom are the y-axis coordinates of the bounding rectangle and left and right are - * the x-axis coordinates. - */ -interface ElementBoundingPositions { - top: number; - right: number; - bottom: number; - left: number; -} - -/** - * A strategy for positioning overlays. Using this strategy, an overlay is given an - * implicit position relative some origin element. The relative position is defined in terms of - * a point on the origin element that is connected to a point on the overlay element. For example, - * a basic dropdown is connecting the bottom-left corner of the origin to the top-left corner - * of the overlay. - */ -export class ConnectedPositionStrategy implements PositionStrategy { - private _dir = 'ltr'; - - /** The offset in pixels for the overlay connection point on the x-axis */ - private _offsetX = 0; - - /** The offset in pixels for the overlay connection point on the y-axis */ - private _offsetY = 0; - - /** The Scrollable containers used to check scrollable view properties on position change. */ - private scrollables: Scrollable[] = []; - - /** Whether the we're dealing with an RTL context */ - get _isRtl() { - return this._dir === 'rtl'; - } - - /** Ordered list of preferred positions, from most to least desirable. */ - _preferredPositions: ConnectionPositionPair[] = []; - - /** The origin element against which the overlay will be positioned. */ - private _origin: HTMLElement; - - /** The overlay pane element. */ - private _pane: HTMLElement; - - /** The last position to have been calculated as the best fit position. */ - private _lastConnectedPosition: ConnectionPositionPair; - - _onPositionChange: - Subject = new Subject(); - - /** Emits an event when the connection point changes. */ - get onPositionChange(): Observable { - return this._onPositionChange.asObservable(); - } - - constructor( - private _connectedTo: ElementRef, - private _originPos: OriginConnectionPosition, - private _overlayPos: OverlayConnectionPosition, - private _viewportRuler: ViewportRuler) { - this._origin = this._connectedTo.nativeElement; - this.withFallbackPosition(_originPos, _overlayPos); - } - - /** Ordered list of preferred positions, from most to least desirable. */ - get positions() { - return this._preferredPositions; - } - - /** - * To be used to for any cleanup after the element gets destroyed. - */ - dispose() { } - - /** - * Updates the position of the overlay element, using whichever preferred position relative - * to the origin fits on-screen. - * @docs-private - * - * @param element Element to which to apply the CSS styles. - * @returns Resolves when the styles have been applied. - */ - apply(element: HTMLElement): void { - // Cache the overlay pane element in case re-calculating position is necessary - this._pane = element; - - // We need the bounding rects for the origin and the overlay to determine how to position - // the overlay relative to the origin. - const originRect = this._origin.getBoundingClientRect(); - const overlayRect = element.getBoundingClientRect(); - - // We use the viewport rect to determine whether a position would go off-screen. - const viewportRect = this._viewportRuler.getViewportRect(); - - // Fallback point if none of the fallbacks fit into the viewport. - let fallbackPoint: OverlayPoint | undefined; - let fallbackPosition: ConnectionPositionPair | undefined; - - // We want to place the overlay in the first of the preferred positions such that the - // overlay fits on-screen. - for (const pos of this._preferredPositions) { - // Get the (x, y) point of connection on the origin, and then use that to get the - // (top, left) coordinate for the overlay at `pos`. - const originPoint = this._getOriginConnectionPoint(originRect, pos); - const overlayPoint = this._getOverlayPoint(originPoint, overlayRect, viewportRect, pos); - - // If the overlay in the calculated position fits on-screen, put it there and we're done. - if (overlayPoint.fitsInViewport) { - this._setElementPosition(element, overlayRect, overlayPoint, pos); - - // Save the last connected position in case the position needs to be re-calculated. - this._lastConnectedPosition = pos; - - // Notify that the position has been changed along with its change properties. - const scrollableViewProperties = this.getScrollableViewProperties(element); - const positionChange = new ConnectedOverlayPositionChange(pos, scrollableViewProperties); - this._onPositionChange.next(positionChange); - - return; - } else if (!fallbackPoint || fallbackPoint.visibleArea < overlayPoint.visibleArea) { - fallbackPoint = overlayPoint; - fallbackPosition = pos; - } - } - - // If none of the preferred positions were in the viewport, take the one - // with the largest visible area. - this._setElementPosition(element, overlayRect, fallbackPoint, fallbackPosition); - } - - /** - * This re-aligns the overlay element with the trigger in its last calculated position, - * even if a position higher in the "preferred positions" list would now fit. This - * allows one to re-align the panel without changing the orientation of the panel. - */ - recalculateLastPosition(): void { - const originRect = this._origin.getBoundingClientRect(); - const overlayRect = this._pane.getBoundingClientRect(); - const viewportRect = this._viewportRuler.getViewportRect(); - const lastPosition = this._lastConnectedPosition || this._preferredPositions[0]; - - const originPoint = this._getOriginConnectionPoint(originRect, lastPosition); - const overlayPoint = this._getOverlayPoint(originPoint, overlayRect, viewportRect, lastPosition); - this._setElementPosition(this._pane, overlayRect, overlayPoint, lastPosition); - } - - /** - * Sets the list of Scrollable containers that host the origin element so that - * on reposition we can evaluate if it or the overlay has been clipped or outside view. Every - * Scrollable must be an ancestor element of the strategy's origin element. - */ - withScrollableContainers(scrollables: Scrollable[]) { - this.scrollables = scrollables; - } - - /** - * Adds a new preferred fallback position. - * @param originPos - * @param overlayPos - */ - withFallbackPosition( - originPos: OriginConnectionPosition, - overlayPos: OverlayConnectionPosition): this { - this._preferredPositions.push(new ConnectionPositionPair(originPos, overlayPos)); - return this; - } - - /** - * Sets the layout direction so the overlay's position can be adjusted to match. - * @param dir New layout direction. - */ - withDirection(dir: 'ltr' | 'rtl'): this { - this._dir = dir; - return this; - } - - /** - * Sets an offset for the overlay's connection point on the x-axis - * @param offset New offset in the X axis. - */ - withOffsetX(offset: number): this { - this._offsetX = offset; - return this; - } - - /** - * Sets an offset for the overlay's connection point on the y-axis - * @param offset New offset in the Y axis. - */ - withOffsetY(offset: number): this { - this._offsetY = offset; - return this; - } - - /** - * Gets the horizontal (x) "start" dimension based on whether the overlay is in an RTL context. - * @param rect - */ - private _getStartX(rect: ClientRect): number { - return this._isRtl ? rect.right : rect.left; - } - - /** - * Gets the horizontal (x) "end" dimension based on whether the overlay is in an RTL context. - * @param rect - */ - private _getEndX(rect: ClientRect): number { - return this._isRtl ? rect.left : rect.right; - } - - - /** - * Gets the (x, y) coordinate of a connection point on the origin based on a relative position. - * @param originRect - * @param pos - */ - private _getOriginConnectionPoint(originRect: ClientRect, pos: ConnectionPositionPair): Point { - const originStartX = this._getStartX(originRect); - const originEndX = this._getEndX(originRect); - - let x: number; - if (pos.originX === 'center') { - x = originStartX + (originRect.width / 2); - } else { - x = pos.originX === 'start' ? originStartX : originEndX; - } - - let y: number; - if (pos.originY === 'center') { - y = originRect.top + (originRect.height / 2); - } else { - y = pos.originY === 'top' ? originRect.top : originRect.bottom; - } - - return {x, y}; - } - - - /** - * Gets the (x, y) coordinate of the top-left corner of the overlay given a given position and - * origin point to which the overlay should be connected, as well as how much of the element - * would be inside the viewport at that position. - */ - private _getOverlayPoint( - originPoint: Point, - overlayRect: ClientRect, - viewportRect: ClientRect, - pos: ConnectionPositionPair): OverlayPoint { - // Calculate the (overlayStartX, overlayStartY), the start of the potential overlay position - // relative to the origin point. - let overlayStartX: number; - if (pos.overlayX === 'center') { - overlayStartX = -overlayRect.width / 2; - } else if (pos.overlayX === 'start') { - overlayStartX = this._isRtl ? -overlayRect.width : 0; - } else { - overlayStartX = this._isRtl ? 0 : -overlayRect.width; - } - - let overlayStartY: number; - if (pos.overlayY === 'center') { - overlayStartY = -overlayRect.height / 2; - } else { - overlayStartY = pos.overlayY === 'top' ? 0 : -overlayRect.height; - } - - // The (x, y) coordinates of the overlay. - const x = originPoint.x + overlayStartX + this._offsetX; - const y = originPoint.y + overlayStartY + this._offsetY; - - // How much the overlay would overflow at this position, on each side. - const leftOverflow = 0 - x; - const rightOverflow = (x + overlayRect.width) - viewportRect.width; - const topOverflow = 0 - y; - const bottomOverflow = (y + overlayRect.height) - viewportRect.height; - - // Visible parts of the element on each axis. - const visibleWidth = this._subtractOverflows(overlayRect.width, leftOverflow, rightOverflow); - const visibleHeight = this._subtractOverflows(overlayRect.height, topOverflow, bottomOverflow); - - // The area of the element that's within the viewport. - const visibleArea = visibleWidth * visibleHeight; - const fitsInViewport = (overlayRect.width * overlayRect.height) === visibleArea; - - return {x, y, fitsInViewport, visibleArea}; - } - - /** - * Gets the view properties of the trigger and overlay, including whether they are clipped - * or completely outside the view of any of the strategy's scrollables. - */ - private getScrollableViewProperties(overlay: HTMLElement): ScrollableViewProperties { - const originBounds = this._getElementBounds(this._origin); - const overlayBounds = this._getElementBounds(overlay); - const scrollContainerBounds = this.scrollables.map((scrollable: Scrollable) => { - return this._getElementBounds(scrollable.getElementRef().nativeElement); - }); - - return { - isOriginClipped: this.isElementClipped(originBounds, scrollContainerBounds), - isOriginOutsideView: this.isElementOutsideView(originBounds, scrollContainerBounds), - isOverlayClipped: this.isElementClipped(overlayBounds, scrollContainerBounds), - isOverlayOutsideView: this.isElementOutsideView(overlayBounds, scrollContainerBounds), - }; - } - - /** Whether the element is completely out of the view of any of the containers. */ - private isElementOutsideView( - elementBounds: ElementBoundingPositions, - containersBounds: ElementBoundingPositions[]): boolean { - return containersBounds.some((containerBounds: ElementBoundingPositions) => { - const outsideAbove = elementBounds.bottom < containerBounds.top; - const outsideBelow = elementBounds.top > containerBounds.bottom; - const outsideLeft = elementBounds.right < containerBounds.left; - const outsideRight = elementBounds.left > containerBounds.right; - - return outsideAbove || outsideBelow || outsideLeft || outsideRight; - }); - } - - /** Whether the element is clipped by any of the containers. */ - private isElementClipped( - elementBounds: ElementBoundingPositions, - containersBounds: ElementBoundingPositions[]): boolean { - return containersBounds.some((containerBounds: ElementBoundingPositions) => { - const clippedAbove = elementBounds.top < containerBounds.top; - const clippedBelow = elementBounds.bottom > containerBounds.bottom; - const clippedLeft = elementBounds.left < containerBounds.left; - const clippedRight = elementBounds.right > containerBounds.right; - - return clippedAbove || clippedBelow || clippedLeft || clippedRight; - }); - } - - /** Physically positions the overlay element to the given coordinate. */ - private _setElementPosition( - element: HTMLElement, - overlayRect: ClientRect, - overlayPoint: Point, - pos: ConnectionPositionPair) { - - // We want to set either `top` or `bottom` based on whether the overlay wants to appear above - // or below the origin and the direction in which the element will expand. - const verticalStyleProperty = pos.overlayY === 'bottom' ? 'bottom' : 'top'; - - // When using `bottom`, we adjust the y position such that it is the distance - // from the bottom of the viewport rather than the top. - const y = verticalStyleProperty === 'top' ? - overlayPoint.y : - document.documentElement.clientHeight - (overlayPoint.y + overlayRect.height); - - // We want to set either `left` or `right` based on whether the overlay wants to appear "before" - // or "after" the origin, which determines the direction in which the element will expand. - // For the horizontal axis, the meaning of "before" and "after" change based on whether the - // page is in RTL or LTR. - let horizontalStyleProperty: string; - if (this._dir === 'rtl') { - horizontalStyleProperty = pos.overlayX === 'end' ? 'left' : 'right'; - } else { - horizontalStyleProperty = pos.overlayX === 'end' ? 'right' : 'left'; - } - - // When we're setting `right`, we adjust the x position such that it is the distance - // from the right edge of the viewport rather than the left edge. - const x = horizontalStyleProperty === 'left' ? - overlayPoint.x : - document.documentElement.clientWidth - (overlayPoint.x + overlayRect.width); - - - // Reset any existing styles. This is necessary in case the preferred position has - // changed since the last `apply`. - ['top', 'bottom', 'left', 'right'].forEach(p => element.style[p] = null); - - element.style[verticalStyleProperty] = `${y}px`; - element.style[horizontalStyleProperty] = `${x}px`; - } - - /** Returns the bounding positions of the provided element with respect to the viewport. */ - private _getElementBounds(element: HTMLElement): ElementBoundingPositions { - const boundingClientRect = element.getBoundingClientRect(); - return { - top: boundingClientRect.top, - right: boundingClientRect.left + boundingClientRect.width, - bottom: boundingClientRect.top + boundingClientRect.height, - left: boundingClientRect.left - }; - } - - /** - * Subtracts the amount that an element is overflowing on an axis from it's length. - */ - private _subtractOverflows(length: number, ...overflows: number[]): number { - return overflows.reduce((currentValue: number, currentOverflow: number) => { - return currentValue - Math.max(currentOverflow, 0); - }, length); - } -} - -/** A simple (x, y) coordinate. */ -interface Point { - x: number; - y: number; -} - -/** - * Expands the simple (x, y) coordinate by adding info about whether the - * element would fit inside the viewport at that position, as well as - * how much of the element would be visible. - */ -interface OverlayPoint extends Point { - visibleArea: number; - fitsInViewport: boolean; -} diff --git a/src/components/core/overlay/position/connected-position.ts b/src/components/core/overlay/position/connected-position.ts deleted file mode 100755 index 02021649d23..00000000000 --- a/src/components/core/overlay/position/connected-position.ts +++ /dev/null @@ -1,78 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -/** Horizontal dimension of a connection point on the perimeter of the origin or overlay element. */ -import {Optional} from '@angular/core'; -export type HorizontalConnectionPos = 'start' | 'center' | 'end'; - -/** Vertical dimension of a connection point on the perimeter of the origin or overlay element. */ -export type VerticalConnectionPos = 'top' | 'center' | 'bottom'; - - -/** A connection point on the origin element. */ -export interface OriginConnectionPosition { - originX: HorizontalConnectionPos; - originY: VerticalConnectionPos; -} - -/** A connection point on the overlay element. */ -export interface OverlayConnectionPosition { - overlayX: HorizontalConnectionPos; - overlayY: VerticalConnectionPos; -} - -/** The points of the origin element and the overlay element to connect. */ -export class ConnectionPositionPair { - originX: HorizontalConnectionPos; - originY: VerticalConnectionPos; - overlayX: HorizontalConnectionPos; - overlayY: VerticalConnectionPos; - - constructor(origin: OriginConnectionPosition, overlay: OverlayConnectionPosition) { - this.originX = origin.originX; - this.originY = origin.originY; - this.overlayX = overlay.overlayX; - this.overlayY = overlay.overlayY; - } -} - -/** - * Set of properties regarding the position of the origin and overlay relative to the viewport - * with respect to the containing Scrollable elements. - * - * The overlay and origin are clipped if any part of their bounding client rectangle exceeds the - * bounds of any one of the strategy's Scrollable's bounding client rectangle. - * - * The overlay and origin are outside view if there is no overlap between their bounding client - * rectangle and any one of the strategy's Scrollable's bounding client rectangle. - * - * ----------- ----------- - * | outside | | clipped | - * | view | -------------------------- - * | | | | | | - * ---------- | ----------- | - * -------------------------- | | - * | | | Scrollable | - * | | | | - * | | -------------------------- - * | Scrollable | - * | | - * -------------------------- - */ -export class ScrollableViewProperties { - isOriginClipped: boolean; - isOriginOutsideView: boolean; - isOverlayClipped: boolean; - isOverlayOutsideView: boolean; -} - -/** The change event emitted by the strategy when a fallback position is used. */ -export class ConnectedOverlayPositionChange { - constructor(public connectionPair: ConnectionPositionPair, - @Optional() public scrollableViewProperties: ScrollableViewProperties) {} -} diff --git a/src/components/core/overlay/position/fake-viewport-ruler.ts b/src/components/core/overlay/position/fake-viewport-ruler.ts deleted file mode 100755 index b2f894ab3f0..00000000000 --- a/src/components/core/overlay/position/fake-viewport-ruler.ts +++ /dev/null @@ -1,20 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -/** @docs-private */ -export class FakeViewportRuler { - getViewportRect() { - return { - left: 0, top: 0, width: 1014, height: 686, bottom: 686, right: 1014 - }; - } - - getViewportScrollPosition() { - return {top: 0, left: 0}; - } -} diff --git a/src/components/core/overlay/position/free-position-strategy.ts b/src/components/core/overlay/position/free-position-strategy.ts deleted file mode 100644 index 182e3797bcf..00000000000 --- a/src/components/core/overlay/position/free-position-strategy.ts +++ /dev/null @@ -1,80 +0,0 @@ - import { PositionStrategy } from './position-strategy'; - - /** - * Free position strategy for overlay without origin - * @author lingyi.zcs - */ -export class FreePositionStrategy implements PositionStrategy { - private _wrapper: HTMLElement; - // private _cssPosition: string = ''; - // private _top: string = ''; - // private _left: string = ''; - // private _width: string = ''; - // private _height: string = ''; - - // cssPosition(value: string) { - // this._cssPosition = value; - // return this; - // } - - // top(value: number | string): this { - // this._top = this._toCssValue(value); - // return this; - // } - - // left(value: number | string): this { - // this._left = this._toCssValue(value); - // return this; - // } - - // width(value: number | string): this { - // this._width = this._toCssValue(value); - // return this; - // } - - // height(value: number | string): this { - // this._height = this._toCssValue(value); - // return this; - // } - - /** - * Apply the position to the element. (NOTE: normally will triggered by scrolling) - * @docs-private - * - * @param element Element to which to apply the CSS. - * @returns Resolved when the styles have been applied. - */ - apply(element: HTMLElement): void { - if (!this._wrapper) { - this._wrapper = document.createElement('div'); - this._wrapper.classList.add('cdk-free-overlay-wrapper'); - element.parentNode.insertBefore(this._wrapper, element); - this._wrapper.appendChild(element); - - // // Initialized style once - // const style = element.style; - // style.position = this._cssPosition; - // style.top = this._top; - // style.left = this._left; - // style.width = this._width; - // style.height = this._height; - } - - // TODO: do somethings while triggered (eg. by scrolling) - } - - /** - * Removes the wrapper element from the DOM. - */ - dispose(): void { - if (this._wrapper && this._wrapper.parentNode) { - this._wrapper.parentNode.removeChild(this._wrapper); - this._wrapper = null; - } - } - - // private _toCssValue(value: number | string) { - // return typeof value === 'number' ? value + 'px' : value; - // } - -} diff --git a/src/components/core/overlay/position/global-position-strategy.ts b/src/components/core/overlay/position/global-position-strategy.ts deleted file mode 100755 index c2d5266dd71..00000000000 --- a/src/components/core/overlay/position/global-position-strategy.ts +++ /dev/null @@ -1,171 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import {PositionStrategy} from './position-strategy'; - - -/** - * A strategy for positioning overlays. Using this strategy, an overlay is given an - * explicit position relative to the browser's viewport. We use flexbox, instead of - * transforms, in order to avoid issues with subpixel rendering which can cause the - * element to become blurry. - */ -export class GlobalPositionStrategy implements PositionStrategy { - private _cssPosition = 'static'; - private _topOffset = ''; - private _bottomOffset = ''; - private _leftOffset = ''; - private _rightOffset = ''; - private _alignItems = ''; - private _justifyContent = ''; - private _width = ''; - private _height = ''; - - /* A lazily-created wrapper for the overlay element that is used as a flex container. */ - private _wrapper: HTMLElement | null = null; - - /** - * Sets the top position of the overlay. Clears any previously set vertical position. - * @param value New top offset. - */ - top(value = ''): this { - this._bottomOffset = ''; - this._topOffset = value; - this._alignItems = 'flex-start'; - return this; - } - - /** - * Sets the left position of the overlay. Clears any previously set horizontal position. - * @param value New left offset. - */ - left(value = ''): this { - this._rightOffset = ''; - this._leftOffset = value; - this._justifyContent = 'flex-start'; - return this; - } - - /** - * Sets the bottom position of the overlay. Clears any previously set vertical position. - * @param value New bottom offset. - */ - bottom(value = ''): this { - this._topOffset = ''; - this._bottomOffset = value; - this._alignItems = 'flex-end'; - return this; - } - - /** - * Sets the right position of the overlay. Clears any previously set horizontal position. - * @param value New right offset. - */ - right(value = ''): this { - this._leftOffset = ''; - this._rightOffset = value; - this._justifyContent = 'flex-end'; - return this; - } - - /** - * Sets the overlay width and clears any previously set width. - * @param value New width for the overlay - */ - width(value = ''): this { - this._width = value; - - // When the width is 100%, we should reset the `left` and the offset, - // in order to ensure that the element is flush against the viewport edge. - if (value === '100%') { - this.left('0px'); - } - - return this; - } - - /** - * Sets the overlay height and clears any previously set height. - * @param value New height for the overlay - */ - height(value = ''): this { - this._height = value; - - // When the height is 100%, we should reset the `top` and the offset, - // in order to ensure that the element is flush against the viewport edge. - if (value === '100%') { - this.top('0px'); - } - - return this; - } - - /** - * Centers the overlay horizontally with an optional offset. - * Clears any previously set horizontal position. - * - * @param offset Overlay offset from the horizontal center. - */ - centerHorizontally(offset = ''): this { - this.left(offset); - this._justifyContent = 'center'; - return this; - } - - /** - * Centers the overlay vertically with an optional offset. - * Clears any previously set vertical position. - * - * @param offset Overlay offset from the vertical center. - */ - centerVertically(offset = ''): this { - this.top(offset); - this._alignItems = 'center'; - return this; - } - - /** - * Apply the position to the element. - * @docs-private - * - * @param element Element to which to apply the CSS. - * @returns Resolved when the styles have been applied. - */ - apply(element: HTMLElement): void { - if (!this._wrapper && element.parentNode) { - this._wrapper = document.createElement('div'); - this._wrapper.classList.add('cdk-global-overlay-wrapper'); - element.parentNode.insertBefore(this._wrapper, element); - this._wrapper.appendChild(element); - } - - const styles = element.style; - const parentStyles = (element.parentNode as HTMLElement).style; - - styles.position = this._cssPosition; - styles.marginTop = this._topOffset; - styles.marginLeft = this._leftOffset; - styles.marginBottom = this._bottomOffset; - styles.marginRight = this._rightOffset; - styles.width = this._width; - styles.height = this._height; - - parentStyles.justifyContent = this._justifyContent; - parentStyles.alignItems = this._alignItems; - } - - /** - * Removes the wrapper element from the DOM. - */ - dispose(): void { - if (this._wrapper && this._wrapper.parentNode) { - this._wrapper.parentNode.removeChild(this._wrapper); - this._wrapper = null; - } - } -} diff --git a/src/components/core/overlay/position/overlay-position-builder.ts b/src/components/core/overlay/position/overlay-position-builder.ts deleted file mode 100755 index 10169e1453b..00000000000 --- a/src/components/core/overlay/position/overlay-position-builder.ts +++ /dev/null @@ -1,49 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import {ViewportRuler} from './viewport-ruler'; -import {ConnectedPositionStrategy} from './connected-position-strategy'; -import {ElementRef, Injectable} from '@angular/core'; -import {GlobalPositionStrategy} from './global-position-strategy'; -import {FreePositionStrategy} from './free-position-strategy'; -import {OverlayConnectionPosition, OriginConnectionPosition} from './connected-position'; - - - -/** Builder for overlay position strategy. */ -@Injectable() -export class OverlayPositionBuilder { - constructor(private _viewportRuler: ViewportRuler) { } - - /** - * Creates a free position strategy - */ - free(): FreePositionStrategy { - return new FreePositionStrategy(); - } - - /** - * Creates a global position strategy. - */ - global(): GlobalPositionStrategy { - return new GlobalPositionStrategy(); - } - - /** - * Creates a relative position strategy. - * @param elementRef - * @param originPos - * @param overlayPos - */ - connectedTo( - elementRef: ElementRef, - originPos: OriginConnectionPosition, - overlayPos: OverlayConnectionPosition): ConnectedPositionStrategy { - return new ConnectedPositionStrategy(elementRef, originPos, overlayPos, this._viewportRuler); - } -} diff --git a/src/components/core/overlay/position/position-strategy.ts b/src/components/core/overlay/position/position-strategy.ts deleted file mode 100755 index abc90be7300..00000000000 --- a/src/components/core/overlay/position/position-strategy.ts +++ /dev/null @@ -1,17 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -/** Strategy for setting the position on an overlay. */ -export interface PositionStrategy { - - /** Updates the position of the overlay element. */ - apply(element: Element): void; - - /** Cleans up any DOM modifications made by the position strategy, if necessary. */ - dispose(): void; -} diff --git a/src/components/core/overlay/position/viewport-ruler.ts b/src/components/core/overlay/position/viewport-ruler.ts deleted file mode 100755 index 60ffb3cf9dd..00000000000 --- a/src/components/core/overlay/position/viewport-ruler.ts +++ /dev/null @@ -1,103 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import {Injectable, Optional, SkipSelf} from '@angular/core'; -import {ScrollDispatcher} from '../scroll/scroll-dispatcher'; - - -/** - * Simple utility for getting the bounds of the browser viewport. - * @docs-private - */ -@Injectable() -export class ViewportRuler { - - /** Cached document client rectangle. */ - private _documentRect?: ClientRect; - - constructor(scrollDispatcher: ScrollDispatcher) { - // Subscribe to scroll and resize events and update the document rectangle on changes. - scrollDispatcher.scrolled(0, () => this._cacheViewportGeometry()); - } - - /** Gets a ClientRect for the viewport's bounds. */ - getViewportRect(documentRect = this._documentRect): ClientRect { - // Cache the document bounding rect so that we don't recompute it for multiple calls. - if (!documentRect) { - this._cacheViewportGeometry(); - documentRect = this._documentRect; - } - - // Use the document element's bounding rect rather than the window scroll properties - // (e.g. pageYOffset, scrollY) due to in issue in Chrome and IE where window scroll - // properties and client coordinates (boundingClientRect, clientX/Y, etc.) are in different - // conceptual viewports. Under most circumstances these viewports are equivalent, but they - // can disagree when the page is pinch-zoomed (on devices that support touch). - // See https://bugs.chromium.org/p/chromium/issues/detail?id=489206#c4 - // We use the documentElement instead of the body because, by default (without a css reset) - // browsers typically give the document body an 8px margin, which is not included in - // getBoundingClientRect(). - const scrollPosition = this.getViewportScrollPosition(documentRect); - const height = window.innerHeight; - const width = window.innerWidth; - - return { - top: scrollPosition.top, - left: scrollPosition.left, - bottom: scrollPosition.top + height, - right: scrollPosition.left + width, - height, - width, - }; - } - - - /** - * Gets the (top, left) scroll position of the viewport. - * @param documentRect - */ - getViewportScrollPosition(documentRect = this._documentRect) { - // Cache the document bounding rect so that we don't recompute it for multiple calls. - if (!documentRect) { - this._cacheViewportGeometry(); - documentRect = this._documentRect; - } - - // The top-left-corner of the viewport is determined by the scroll position of the document - // body, normally just (scrollLeft, scrollTop). However, Chrome and Firefox disagree about - // whether `document.body` or `document.documentElement` is the scrolled element, so reading - // `scrollTop` and `scrollLeft` is inconsistent. However, using the bounding rect of - // `document.documentElement` works consistently, where the `top` and `left` values will - // equal negative the scroll position. - const top = -documentRect.top || document.body.scrollTop || window.scrollY || - document.documentElement.scrollTop || 0; - - const left = -documentRect.left || document.body.scrollLeft || window.scrollX || - document.documentElement.scrollLeft || 0; - - return {top, left}; - } - - /** Caches the latest client rectangle of the document element. */ - _cacheViewportGeometry() { - this._documentRect = document.documentElement.getBoundingClientRect(); - } - -} - -export function VIEWPORT_RULER_PROVIDER_FACTORY(parentRuler: ViewportRuler, - scrollDispatcher: ScrollDispatcher) { - return parentRuler || new ViewportRuler(scrollDispatcher); -} - -export const VIEWPORT_RULER_PROVIDER = { - // If there is already a ViewportRuler available, use that. Otherwise, provide a new one. - provide: ViewportRuler, - deps: [[new Optional(), new SkipSelf(), ViewportRuler], ScrollDispatcher], - useFactory: VIEWPORT_RULER_PROVIDER_FACTORY -}; diff --git a/src/components/core/overlay/scroll/block-scroll-strategy.ts b/src/components/core/overlay/scroll/block-scroll-strategy.ts deleted file mode 100755 index ef60e7d6084..00000000000 --- a/src/components/core/overlay/scroll/block-scroll-strategy.ts +++ /dev/null @@ -1,65 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import {ScrollStrategy} from './scroll-strategy'; -import {ViewportRuler} from '../position/viewport-ruler'; - -/** - * Strategy that will prevent the user from scrolling while the overlay is visible. - */ -export class BlockScrollStrategy implements ScrollStrategy { - private _previousHTMLStyles = { top: '', left: '' }; - private _previousScrollPosition: { top: number, left: number }; - private _isEnabled = false; - - constructor(private _viewportRuler: ViewportRuler) { } - - attach() { } - - enable() { - if (this._canBeEnabled()) { - const root = document.documentElement; - - this._previousScrollPosition = this._viewportRuler.getViewportScrollPosition(); - - // Cache the previous inline styles in case the user had set them. - this._previousHTMLStyles.left = root.style.left || ''; - this._previousHTMLStyles.top = root.style.top || ''; - - // Note: we're using the `html` node, instead of the `body`, because the `body` may - // have the user agent margin, whereas the `html` is guaranteed not to have one. - root.style.left = `${-this._previousScrollPosition.left}px`; - root.style.top = `${-this._previousScrollPosition.top}px`; - root.classList.add('cdk-global-scrollblock'); - this._isEnabled = true; - } - } - - disable() { - if (this._isEnabled) { - this._isEnabled = false; - document.documentElement.style.left = this._previousHTMLStyles.left; - document.documentElement.style.top = this._previousHTMLStyles.top; - document.documentElement.classList.remove('cdk-global-scrollblock'); - window.scroll(this._previousScrollPosition.left, this._previousScrollPosition.top); - } - } - - private _canBeEnabled(): boolean { - // Since the scroll strategies can't be singletons, we have to use a global CSS class - // (`cdk-global-scrollblock`) to make sure that we don't try to disable global - // scrolling multiple times. - if (document.documentElement.classList.contains('cdk-global-scrollblock') || this._isEnabled) { - return false; - } - - const body = document.body; - const viewport = this._viewportRuler.getViewportRect(); - return body.scrollHeight > viewport.height || body.scrollWidth > viewport.width; - } -} diff --git a/src/components/core/overlay/scroll/close-scroll-strategy.ts b/src/components/core/overlay/scroll/close-scroll-strategy.ts deleted file mode 100755 index edcf2c76574..00000000000 --- a/src/components/core/overlay/scroll/close-scroll-strategy.ts +++ /dev/null @@ -1,50 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import {ScrollStrategy, getMdScrollStrategyAlreadyAttachedError} from './scroll-strategy'; -import {OverlayRef} from '../overlay-ref'; -import {Subscription} from 'rxjs/Subscription'; -import {ScrollDispatcher} from './scroll-dispatcher'; - - -/** - * Strategy that will close the overlay as soon as the user starts scrolling. - */ -export class CloseScrollStrategy implements ScrollStrategy { - private _scrollSubscription: Subscription|null = null; - private _overlayRef: OverlayRef; - - constructor(private _scrollDispatcher: ScrollDispatcher) { } - - attach(overlayRef: OverlayRef) { - if (this._overlayRef) { - throw getMdScrollStrategyAlreadyAttachedError(); - } - - this._overlayRef = overlayRef; - } - - enable() { - if (!this._scrollSubscription) { - this._scrollSubscription = this._scrollDispatcher.scrolled(0, () => { - if (this._overlayRef.hasAttached()) { - this._overlayRef.detach(); - } - - this.disable(); - }); - } - } - - disable() { - if (this._scrollSubscription) { - this._scrollSubscription.unsubscribe(); - this._scrollSubscription = null; - } - } -} diff --git a/src/components/core/overlay/scroll/index.ts b/src/components/core/overlay/scroll/index.ts deleted file mode 100755 index 686294b9ad2..00000000000 --- a/src/components/core/overlay/scroll/index.ts +++ /dev/null @@ -1,32 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import {NgModule} from '@angular/core'; -import {SCROLL_DISPATCHER_PROVIDER} from './scroll-dispatcher'; -import {Scrollable} from './scrollable'; -import {PlatformModule} from '@angular/cdk'; -import {ScrollStrategyOptions} from './scroll-strategy-options'; - -export {Scrollable} from './scrollable'; -export {ScrollDispatcher} from './scroll-dispatcher'; - -// Export pre-defined scroll strategies and interface to build custom ones. -export {ScrollStrategy} from './scroll-strategy'; -export {ScrollStrategyOptions} from './scroll-strategy-options'; -export {RepositionScrollStrategy} from './reposition-scroll-strategy'; -export {CloseScrollStrategy} from './close-scroll-strategy'; -export {NoopScrollStrategy} from './noop-scroll-strategy'; -export {BlockScrollStrategy} from './block-scroll-strategy'; - -@NgModule({ - imports: [PlatformModule], - exports: [Scrollable], - declarations: [Scrollable], - providers: [SCROLL_DISPATCHER_PROVIDER, ScrollStrategyOptions], -}) -export class ScrollDispatchModule { } diff --git a/src/components/core/overlay/scroll/noop-scroll-strategy.ts b/src/components/core/overlay/scroll/noop-scroll-strategy.ts deleted file mode 100755 index 64a4bfb1276..00000000000 --- a/src/components/core/overlay/scroll/noop-scroll-strategy.ts +++ /dev/null @@ -1,18 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import {ScrollStrategy} from './scroll-strategy'; - -/** - * Scroll strategy that doesn't do anything. - */ -export class NoopScrollStrategy implements ScrollStrategy { - enable() { } - disable() { } - attach() { } -} diff --git a/src/components/core/overlay/scroll/reposition-scroll-strategy.ts b/src/components/core/overlay/scroll/reposition-scroll-strategy.ts deleted file mode 100755 index b35f4232b68..00000000000 --- a/src/components/core/overlay/scroll/reposition-scroll-strategy.ts +++ /dev/null @@ -1,56 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import {Subscription} from 'rxjs/Subscription'; -import {ScrollStrategy, getMdScrollStrategyAlreadyAttachedError} from './scroll-strategy'; -import {OverlayRef} from '../overlay-ref'; -import {ScrollDispatcher} from './scroll-dispatcher'; - -/** - * Config options for the RepositionScrollStrategy. - */ -export interface RepositionScrollStrategyConfig { - scrollThrottle?: number; -} - -/** - * Strategy that will update the element position as the user is scrolling. - */ -export class RepositionScrollStrategy implements ScrollStrategy { - private _scrollSubscription: Subscription|null = null; - private _overlayRef: OverlayRef; - - constructor( - private _scrollDispatcher: ScrollDispatcher, - private _config?: RepositionScrollStrategyConfig) { } - - attach(overlayRef: OverlayRef) { - if (this._overlayRef) { - throw getMdScrollStrategyAlreadyAttachedError(); - } - - this._overlayRef = overlayRef; - } - - enable() { - if (!this._scrollSubscription) { - const throttle = this._config ? this._config.scrollThrottle : 0; - - this._scrollSubscription = this._scrollDispatcher.scrolled(throttle, () => { - this._overlayRef.updatePosition(); - }); - } - } - - disable() { - if (this._scrollSubscription) { - this._scrollSubscription.unsubscribe(); - this._scrollSubscription = null; - } - } -} diff --git a/src/components/core/overlay/scroll/scroll-dispatcher.ts b/src/components/core/overlay/scroll/scroll-dispatcher.ts deleted file mode 100755 index 67bd96936ac..00000000000 --- a/src/components/core/overlay/scroll/scroll-dispatcher.ts +++ /dev/null @@ -1,156 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import {ElementRef, Injectable, NgZone, Optional, SkipSelf} from '@angular/core'; -import {Platform} from '@angular/cdk'; -import {Scrollable} from './scrollable'; -import {Subject} from 'rxjs/Subject'; -import {Subscription} from 'rxjs/Subscription'; -import {fromEvent} from 'rxjs/observable/fromEvent'; -import {merge} from 'rxjs/observable/merge'; -import {auditTime} from 'rxjs/operator/auditTime'; - - -/** Time in ms to throttle the scrolling events by default. */ -export const DEFAULT_SCROLL_TIME = 20; - -/** - * Service contained all registered Scrollable references and emits an event when any one of the - * Scrollable references emit a scrolled event. - */ -@Injectable() -export class ScrollDispatcher { - - /** Subject for notifying that a registered scrollable reference element has been scrolled. */ - _scrolled: Subject = new Subject(); - - /** Keeps track of the global `scroll` and `resize` subscriptions. */ - _globalSubscription: Subscription | null = null; - - /** Keeps track of the amount of subscriptions to `scrolled`. Used for cleaning up afterwards. */ - private _scrolledCount = 0; - - /** - * Map of all the scrollable references that are registered with the service and their - * scroll event subscriptions. - */ - scrollableReferences: Map = new Map(); - constructor(private _ngZone: NgZone, private _platform: Platform) { } - - /** - * Registers a Scrollable with the service and listens for its scrolled events. When the - * scrollable is scrolled, the service emits the event in its scrolled observable. - * @param scrollable Scrollable instance to be registered. - */ - register(scrollable: Scrollable): void { - const scrollSubscription = scrollable.elementScrolled().subscribe(() => this._notify()); - - this.scrollableReferences.set(scrollable, scrollSubscription); - } - - /** - * Deregisters a Scrollable reference and unsubscribes from its scroll event observable. - * @param scrollable Scrollable instance to be deregistered. - */ - deregister(scrollable: Scrollable): void { - const scrollableReference = this.scrollableReferences.get(scrollable); - - if (scrollableReference) { - scrollableReference.unsubscribe(); - this.scrollableReferences.delete(scrollable); - } - } - - /** - * Subscribes to an observable that emits an event whenever any of the registered Scrollable - * references (or window, document, or body) fire a scrolled event. Can provide a time in ms - * to override the default "throttle" time. - */ - scrolled(auditTimeInMs: number = DEFAULT_SCROLL_TIME, callback: () => any): Subscription { - // Scroll events can only happen on the browser, so do nothing if we're not on the browser. - if (!this._platform.isBrowser) { - return Subscription.EMPTY; - } - - // In the case of a 0ms delay, use an observable without auditTime - // since it does add a perceptible delay in processing overhead. - const observable = auditTimeInMs > 0 ? - auditTime.call(this._scrolled.asObservable(), auditTimeInMs) : - this._scrolled.asObservable(); - - this._scrolledCount++; - - if (!this._globalSubscription) { - this._globalSubscription = this._ngZone.runOutsideAngular(() => { - return merge( - fromEvent(window.document, 'scroll'), - fromEvent(window, 'resize') - ).subscribe(() => this._notify()); - }); - } - - // Note that we need to do the subscribing from here, in order to be able to remove - // the global event listeners once there are no more subscriptions. - const subscription = observable.subscribe(callback); - - subscription.add(() => { - this._scrolledCount--; - - if (this._globalSubscription && !this.scrollableReferences.size && !this._scrolledCount) { - this._globalSubscription.unsubscribe(); - this._globalSubscription = null; - } - }); - - return subscription; - } - - /** Returns all registered Scrollables that contain the provided element. */ - getScrollContainers(elementRef: ElementRef): Scrollable[] { - const scrollingContainers: Scrollable[] = []; - - this.scrollableReferences.forEach((_subscription: Subscription, scrollable: Scrollable) => { - if (this.scrollableContainsElement(scrollable, elementRef)) { - scrollingContainers.push(scrollable); - } - }); - - return scrollingContainers; - } - - /** Returns true if the element is contained within the provided Scrollable. */ - scrollableContainsElement(scrollable: Scrollable, elementRef: ElementRef): boolean { - let element = elementRef.nativeElement; - const scrollableElement = scrollable.getElementRef().nativeElement; - - // Traverse through the element parents until we reach null, checking if any of the elements - // are the scrollable's element. - do { - if (element === scrollableElement) { return true; } - } while (element = element.parentElement); - - return false; - } - - /** Sends a notification that a scroll event has been fired. */ - _notify() { - this._scrolled.next(); - } -} - -export function SCROLL_DISPATCHER_PROVIDER_FACTORY( - parentDispatcher: ScrollDispatcher, ngZone: NgZone, platform: Platform) { - return parentDispatcher || new ScrollDispatcher(ngZone, platform); -} - -export const SCROLL_DISPATCHER_PROVIDER = { - // If there is already a ScrollDispatcher available, use that. Otherwise, provide a new one. - provide: ScrollDispatcher, - deps: [[new Optional(), new SkipSelf(), ScrollDispatcher], NgZone, Platform], - useFactory: SCROLL_DISPATCHER_PROVIDER_FACTORY -}; diff --git a/src/components/core/overlay/scroll/scroll-strategy-options.ts b/src/components/core/overlay/scroll/scroll-strategy-options.ts deleted file mode 100755 index be6a2dec0b8..00000000000 --- a/src/components/core/overlay/scroll/scroll-strategy-options.ts +++ /dev/null @@ -1,50 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import {Injectable} from '@angular/core'; -import {ScrollStrategy} from './scroll-strategy'; -import {CloseScrollStrategy} from './close-scroll-strategy'; -import {NoopScrollStrategy} from './noop-scroll-strategy'; -import {BlockScrollStrategy} from './block-scroll-strategy'; -import {ScrollDispatcher} from './scroll-dispatcher'; -import {ViewportRuler} from '../position/viewport-ruler'; -import { - RepositionScrollStrategy, - RepositionScrollStrategyConfig, -} from './reposition-scroll-strategy'; - - -/** - * Options for how an overlay will handle scrolling. - * - * Users can provide a custom value for `ScrollStrategyOptions` to replace the default - * behaviors. This class primarily acts as a factory for ScrollStrategy instances. - */ -@Injectable() -export class ScrollStrategyOptions { - constructor( - private _scrollDispatcher: ScrollDispatcher, - private _viewportRuler: ViewportRuler) { } - - /** Do nothing on scroll. */ - noop = () => new NoopScrollStrategy(); - - /** Close the overlay as soon as the user scrolls. */ - close = () => new CloseScrollStrategy(this._scrollDispatcher); - - /** Block scrolling. */ - block = () => new BlockScrollStrategy(this._viewportRuler); - - /** - * Update the overlay's position on scroll. - * @param config Configuration to be used inside the scroll strategy. - * Allows debouncing the reposition calls. - */ - reposition = (config?: RepositionScrollStrategyConfig) => - new RepositionScrollStrategy(this._scrollDispatcher, config) -} diff --git a/src/components/core/overlay/scroll/scroll-strategy.md b/src/components/core/overlay/scroll/scroll-strategy.md deleted file mode 100755 index b141bd5fbba..00000000000 --- a/src/components/core/overlay/scroll/scroll-strategy.md +++ /dev/null @@ -1,39 +0,0 @@ -# Scroll strategies - -## What is a scroll strategy? -A scroll strategy is a way of describing how an overlay should behave if the user scrolls -while the overlay is open. The strategy has a reference to the `OverlayRef`, allowing it to -recalculate the position, close the overlay, block scrolling, etc. - -## Usage -To associate an overlay with a scroll strategy, you have to pass in a function, that returns a -scroll strategy, to the `OverlayState`. By default, all overlays will use the `noop` strategy which -doesn't do anything. The other available strategies are `reposition`, `block` and `close`: - -```ts -let overlayState = new OverlayState(); - -overlayState.scrollStrategy = overlay.scrollStrategies.block(); -this._overlay.create(overlayState).attach(yourPortal); -``` - -## Creating a custom scroll strategy -To set up a custom scroll strategy, you have to create a class that implements the `ScrollStrategy` -interface. There are three stages of a scroll strategy's life cycle: - -1. When an overlay is created, it'll call the strategy's `attach` method with a reference to itself. -2. When an overlay is attached to the DOM, it'll call the `enable` method on its scroll strategy, -3. When an overlay is detached from the DOM or destroyed, it'll call the `disable` method on its -scroll strategy, allowing it to clean up after itself. - -Afterwards you can pass in the new scroll strategy to your overlay state: - -```ts -// Your custom scroll strategy. -export class CustomScrollStrategy implements ScrollStrategy { - // your implementation -} - -overlayState.scrollStrategy = new CustomScrollStrategy(); -this._overlay.create(overlayState).attach(yourPortal); -``` diff --git a/src/components/core/overlay/scroll/scroll-strategy.ts b/src/components/core/overlay/scroll/scroll-strategy.ts deleted file mode 100755 index 72c9eee70fa..00000000000 --- a/src/components/core/overlay/scroll/scroll-strategy.ts +++ /dev/null @@ -1,26 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import {OverlayRef} from '../overlay-ref'; - -/** - * Describes a strategy that will be used by an overlay - * to handle scroll events while it is open. - */ -export abstract class ScrollStrategy { - enable: () => void; - disable: () => void; - attach: (overlayRef: OverlayRef) => void; -} - -/** - * Returns an error to be thrown when attempting to attach an already-attached scroll strategy. - */ -export function getMdScrollStrategyAlreadyAttachedError(): Error { - return Error(`Scroll strategy has already been attached.`); -} diff --git a/src/components/core/overlay/scroll/scrollable.ts b/src/components/core/overlay/scroll/scrollable.ts deleted file mode 100755 index 17e185e75a6..00000000000 --- a/src/components/core/overlay/scroll/scrollable.ts +++ /dev/null @@ -1,61 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import {Directive, ElementRef, OnInit, OnDestroy, NgZone, Renderer2} from '@angular/core'; -import {Observable} from 'rxjs/Observable'; -import {Subject} from 'rxjs/Subject'; -import {ScrollDispatcher} from './scroll-dispatcher'; - - -/** - * Sends an event when the directive's element is scrolled. Registers itself with the - * ScrollDispatcher service to include itself as part of its collection of scrolling events that it - * can be listened to through the service. - */ -@Directive({ - selector: '[cdk-scrollable], [cdkScrollable]' -}) -export class Scrollable implements OnInit, OnDestroy { - private _elementScrolled: Subject = new Subject(); - private _scrollListener: Function | null; - - constructor(private _elementRef: ElementRef, - private _scroll: ScrollDispatcher, - private _ngZone: NgZone, - private _renderer: Renderer2) {} - - ngOnInit() { - this._scrollListener = this._ngZone.runOutsideAngular(() => { - return this._renderer.listen(this.getElementRef().nativeElement, 'scroll', (event: Event) => { - this._elementScrolled.next(event); - }); - }); - - this._scroll.register(this); - } - - ngOnDestroy() { - this._scroll.deregister(this); - - if (this._scrollListener) { - this._scrollListener(); - this._scrollListener = null; - } - } - - /** - * Returns observable that emits when a scroll event is fired on the host element. - */ - elementScrolled(): Observable { - return this._elementScrolled.asObservable(); - } - - getElementRef(): ElementRef { - return this._elementRef; - } -} diff --git a/src/components/datepicker/nz-datepicker.component.ts b/src/components/datepicker/nz-datepicker.component.ts index 31d0e5d8a9a..d1e4af2e9f9 100644 --- a/src/components/datepicker/nz-datepicker.component.ts +++ b/src/components/datepicker/nz-datepicker.component.ts @@ -13,7 +13,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { DropDownAnimation } from '../core/animation/dropdown-animations'; import { NzTimePickerInnerComponent } from '../time-picker/nz-timepicker-inner.component'; import { DEFAULT_DATEPICKER_POSITIONS } from '../core/overlay/overlay-position-map'; -import { ConnectionPositionPair } from '../core/overlay/index'; +import { ConnectionPositionPair } from '@angular/cdk/overlay'; @Component({ selector : 'nz-datepicker', @@ -24,8 +24,8 @@ import { ConnectionPositionPair } from '../core/overlay/index'; template : ` + [cdkConnectedOverlayOpen]="_open" + >
+ [cdkConnectedOverlayOpen]="nzVisible" + >
+ [cdkConnectedOverlayOpen]="nzVisible" + >
{ beforeEach(async(() => { diff --git a/src/components/message/nz-message.module.ts b/src/components/message/nz-message.module.ts index 7fcc18d8281..c1974742dd0 100644 --- a/src/components/message/nz-message.module.ts +++ b/src/components/message/nz-message.module.ts @@ -3,14 +3,14 @@ import { NZ_MESSAGE_DEFAULT_CONFIG_PROVIDER } from './nz-message-config'; import { NzMessageContainerComponent } from './nz-message-container.component'; import { NzMessageComponent } from './nz-message.component'; import { CommonModule } from '@angular/common'; -import { FloaterModule } from '../core/floater/index'; +import { OverlayModule } from '@angular/cdk/overlay'; const providers = [ NZ_MESSAGE_DEFAULT_CONFIG_PROVIDER ]; @NgModule({ - imports: [ CommonModule, FloaterModule ], + imports: [ CommonModule, OverlayModule ], declarations: [ NzMessageContainerComponent, NzMessageComponent ], providers: providers, entryComponents: [ NzMessageContainerComponent ] diff --git a/src/components/message/nz-message.service.ts b/src/components/message/nz-message.service.ts index 46c2323b054..a6aed7e267e 100644 --- a/src/components/message/nz-message.service.ts +++ b/src/components/message/nz-message.service.ts @@ -1,5 +1,6 @@ import { Injectable, ComponentRef, Type } from '@angular/core'; -import { FloaterService } from '../core/floater/index'; +import { Overlay } from '@angular/cdk/overlay'; +import { ComponentPortal } from '@angular/cdk/portal'; import { NzMessageConfig } from './nz-message-config'; import { NzMessageData, NzMessageDataFilled, NzMessageDataOptions } from './nz-message.definitions'; import { NzMessageContainerComponent } from './nz-message-container.component'; @@ -8,8 +9,8 @@ export class NzMessageBaseService, private _idPrefix: string = '') { - this._container = floaterService.persistAttachComponent(containerClass); + constructor(overlay: Overlay, containerClass: Type, private _idPrefix: string = '') { + this._container = overlay.create().attach(new ComponentPortal(containerClass)).instance; } remove(messageId?: string): void { @@ -39,8 +40,8 @@ export class NzMessageBaseService, NzMessageData> { - constructor(floaterService: FloaterService) { - super(floaterService, NzMessageContainerComponent, 'message-'); + constructor(overlay: Overlay) { + super(overlay, NzMessageContainerComponent, 'message-'); } // Shortcut methods diff --git a/src/components/notification/nz-notification.module.ts b/src/components/notification/nz-notification.module.ts index 4b6e6883b1b..5aaa6378b13 100644 --- a/src/components/notification/nz-notification.module.ts +++ b/src/components/notification/nz-notification.module.ts @@ -3,16 +3,12 @@ import { NZ_NOTIFICATION_DEFAULT_CONFIG_PROVIDER } from './nz-notification-confi import { NzNotificationContainerComponent } from './nz-notification-container.component'; import { NzNotificationComponent } from './nz-notification.component'; import { CommonModule } from '@angular/common'; -import { FloaterModule } from '../core/floater/index'; - -const providers = [ - NZ_NOTIFICATION_DEFAULT_CONFIG_PROVIDER -]; +import { OverlayModule } from '@angular/cdk/overlay'; @NgModule({ - imports: [ CommonModule, FloaterModule ], + imports: [ CommonModule, OverlayModule ], declarations: [ NzNotificationComponent, NzNotificationContainerComponent ], - providers: providers, + providers: [ NZ_NOTIFICATION_DEFAULT_CONFIG_PROVIDER ], entryComponents: [ NzNotificationContainerComponent ], }) export class NzNotificationModule { } diff --git a/src/components/notification/nz-notification.service.ts b/src/components/notification/nz-notification.service.ts index 8df04200d0e..d5db76dbb29 100644 --- a/src/components/notification/nz-notification.service.ts +++ b/src/components/notification/nz-notification.service.ts @@ -1,5 +1,5 @@ import { Injectable, EventEmitter } from '@angular/core'; -import { FloaterService } from '../core/floater/index'; +import { Overlay } from '@angular/cdk/overlay'; import { NzNotificationData, NzNotificationDataFilled } from './nz-notification.definitions'; import { NzMessageBaseService } from '../message/nz-message.service'; import { NzMessageDataOptions } from '../message/nz-message.definitions'; @@ -8,8 +8,8 @@ import { NzNotificationContainerComponent } from './nz-notification-container.co @Injectable() export class NzNotificationService extends NzMessageBaseService { - constructor(floaterService: FloaterService) { - super(floaterService, NzNotificationContainerComponent, 'notification-'); + constructor(overlay: Overlay) { + super(overlay, NzNotificationContainerComponent, 'notification-'); } // Shortcut methods diff --git a/src/components/popconfirm/nz-popconfirm.component.ts b/src/components/popconfirm/nz-popconfirm.component.ts index af9e0406003..2cf52138617 100644 --- a/src/components/popconfirm/nz-popconfirm.component.ts +++ b/src/components/popconfirm/nz-popconfirm.component.ts @@ -19,14 +19,14 @@ import { NzToolTipComponent } from '../tooltip/nz-tooltip.component'; template : ` + [cdkConnectedOverlayPositions]="_positions" + [cdkConnectedOverlayOpen]="visible$ | async">
diff --git a/src/components/popconfirm/nz-popconfirm.module.ts b/src/components/popconfirm/nz-popconfirm.module.ts index 7a522a60c69..f0f8ca674aa 100644 --- a/src/components/popconfirm/nz-popconfirm.module.ts +++ b/src/components/popconfirm/nz-popconfirm.module.ts @@ -3,7 +3,7 @@ import { NzPopconfirmComponent } from './nz-popconfirm.component'; import { NzPopconfirmDirective } from './nz-popconfirm.directive'; import { CommonModule } from '@angular/common'; import { NzButtonModule } from '../button/nz-button.module'; -import { OverlayModule } from '../core/overlay/index'; +import { OverlayModule } from '@angular/cdk/overlay'; @NgModule({ diff --git a/src/components/popover/nz-popover.component.ts b/src/components/popover/nz-popover.component.ts index 2716014d50b..fb9073647af 100644 --- a/src/components/popover/nz-popover.component.ts +++ b/src/components/popover/nz-popover.component.ts @@ -16,14 +16,14 @@ import { NzToolTipComponent } from '../tooltip/nz-tooltip.component'; template : ` + [cdkConnectedOverlayPositions]="_positions" + [cdkConnectedOverlayOpen]="visible$ | async">
diff --git a/src/components/popover/nz-popover.module.ts b/src/components/popover/nz-popover.module.ts index 77c70a5edc0..ba23254213d 100644 --- a/src/components/popover/nz-popover.module.ts +++ b/src/components/popover/nz-popover.module.ts @@ -2,7 +2,7 @@ import { NgModule } from '@angular/core'; import { NzPopoverDirective } from './nz-popover.directive'; import { NzPopoverComponent } from './nz-popover.component'; import { CommonModule } from '@angular/common'; -import { OverlayModule } from '../core/overlay/index'; +import { OverlayModule } from '@angular/cdk/overlay'; @NgModule({ entryComponents: [ NzPopoverComponent ], diff --git a/src/components/root/style/index.less b/src/components/root/style/index.less index fe775975e9a..83f9c00003a 100644 --- a/src/components/root/style/index.less +++ b/src/components/root/style/index.less @@ -1,9 +1,9 @@ /** - * Global styles for all components (NOTE: antd's global style is at components/style) + * Global styles for all components (WANT antd's global style? SEE at components/style) */ -// For all overlays (SEE ./core/overlay) -.nz-overlay-container { +////// Override all cdk overlays (SEE @angular/cdk/overlay) +.cdk-overlay-container { pointer-events: none; top: 0; left: 0; @@ -13,7 +13,7 @@ z-index: 1000; } -.nz-overlay-backdrop { +.cdk-overlay-backdrop { top: 0; bottom: 0; left: 0; @@ -26,7 +26,7 @@ z-index: 1000; } -.nz-overlay-pane { +.cdk-overlay-pane { position: absolute; pointer-events: auto; z-index: 1000; diff --git a/src/components/select/nz-select.component.ts b/src/components/select/nz-select.component.ts index 6ee64d9c854..06ad1d97292 100644 --- a/src/components/select/nz-select.component.ts +++ b/src/components/select/nz-select.component.ts @@ -17,7 +17,7 @@ import { ViewChild, forwardRef } from '@angular/core'; -import { DOWN_ARROW, ENTER, TAB } from '@angular/cdk'; +import { DOWN_ARROW, ENTER, TAB } from '@angular/cdk/keycodes'; import { NzOptionComponent } from './nz-option.component'; import { NzOptionPipe } from './nz-option.pipe'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; @@ -42,8 +42,8 @@ import { TagAnimation } from '../core/animation/tag-animations';
+ [cdkConnectedOverlayWidth]="_triggerWidth" + [cdkConnectedOverlayOpen]="_isOpen" + >
diff --git a/src/components/select/nz-select.module.ts b/src/components/select/nz-select.module.ts index 75ac936cceb..ee6e303d6fa 100644 --- a/src/components/select/nz-select.module.ts +++ b/src/components/select/nz-select.module.ts @@ -1,7 +1,7 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; -import { OverlayModule } from '../core/overlay/index'; +import { OverlayModule } from '@angular/cdk/overlay'; import { NzSelectComponent } from './nz-select.component'; import { NzOptionComponent } from './nz-option.component'; import { NzOptionPipe } from './nz-option.pipe'; diff --git a/src/components/slider/nz-slider.component.ts b/src/components/slider/nz-slider.component.ts index 01ccabcdc37..5ef0ba15c91 100644 --- a/src/components/slider/nz-slider.component.ts +++ b/src/components/slider/nz-slider.component.ts @@ -13,7 +13,7 @@ import { forwardRef, } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; -import { RxChain } from '@angular/cdk' +import { RxChain } from '@angular/cdk/rxjs'; import { Observable } from 'rxjs/Observable'; import { Subscription } from 'rxjs/Subscription'; import { fromEvent } from 'rxjs/observable/fromEvent'; diff --git a/src/components/tabs/nz-tabs-nav.component.ts b/src/components/tabs/nz-tabs-nav.component.ts index 9e720616399..87229e65495 100644 --- a/src/components/tabs/nz-tabs-nav.component.ts +++ b/src/components/tabs/nz-tabs-nav.component.ts @@ -16,7 +16,7 @@ import { ContentChild, HostBinding } from '@angular/core'; -import { Directionality, Direction } from '@angular/cdk'; +import { Directionality, Direction } from '@angular/cdk/bidi'; import { Subscription } from 'rxjs/Subscription'; import { NzTabsInkBarDirective } from './nz-tabs-ink-bar.directive'; import { NzTabLabelDirective } from './nz-tab-label.directive'; diff --git a/src/components/tabs/nz-tabs.module.ts b/src/components/tabs/nz-tabs.module.ts index 3a3e8141bf5..af0da55fc6b 100644 --- a/src/components/tabs/nz-tabs.module.ts +++ b/src/components/tabs/nz-tabs.module.ts @@ -6,13 +6,13 @@ import { NzTabsNavComponent } from './nz-tabs-nav.component'; import { NzTabBodyComponent } from './nz-tab-body.component'; import { NzTabLabelDirective } from './nz-tab-label.directive'; import { CommonModule } from '@angular/common'; -import { PortalModule } from '@angular/cdk'; -import { ObserveContentModule } from '@angular/cdk'; +// import { PortalModule } from '@angular/cdk/portal'; +import { ObserversModule } from '@angular/cdk/observers'; @NgModule({ declarations: [ NzTabComponent, NzTabSetComponent, NzTabsNavComponent, NzTabLabelDirective, NzTabsInkBarDirective, NzTabBodyComponent ], exports : [ NzTabComponent, NzTabSetComponent, NzTabsNavComponent, NzTabLabelDirective, NzTabsInkBarDirective, NzTabBodyComponent ], - imports : [ CommonModule, PortalModule, ObserveContentModule ] + imports : [ CommonModule, ObserversModule ] }) export class NzTabsModule { diff --git a/src/components/time-picker/nz-timepicker.component.ts b/src/components/time-picker/nz-timepicker.component.ts index 09e96d78601..1843ff1fcd2 100644 --- a/src/components/time-picker/nz-timepicker.component.ts +++ b/src/components/time-picker/nz-timepicker.component.ts @@ -10,7 +10,7 @@ import * as moment from 'moment'; import { DropDownAnimation } from '../core/animation/dropdown-animations'; import { NzTimePickerInnerComponent } from './nz-timepicker-inner.component'; import { DEFAULT_DATEPICKER_POSITIONS } from '../core/overlay/overlay-position-map'; -import { ConnectionPositionPair } from '../core/overlay/index'; +import { ConnectionPositionPair } from '@angular/cdk/overlay'; @Component({ selector : 'nz-timepicker', @@ -23,7 +23,7 @@ import { ConnectionPositionPair } from '../core/overlay/index'; class="ant-time-picker" [class.ant-time-picker-large]="nzSize=='large'" [class.ant-time-picker-small]="nzSize=='small'" - nz-overlay-origin #origin="nzOverlayOrigin" + cdkOverlayOrigin #origin="cdkOverlayOrigin" #trigger> + [cdkConnectedOverlayOpen]="_open" + >
+ [cdkConnectedOverlayPositions]="_positions" + [cdkConnectedOverlayOpen]="visible$ | async">
@@ -81,7 +81,7 @@ export class NzToolTipComponent implements AfterViewInit { get nzVisible() { return this.visibleSource.value; } - + visibleSource = new BehaviorSubject(false); visible$ = this.visibleSource.asObservable(); diff --git a/src/components/tooltip/nz-tooltip.module.ts b/src/components/tooltip/nz-tooltip.module.ts index 7a177aa6221..a709d8f8e17 100644 --- a/src/components/tooltip/nz-tooltip.module.ts +++ b/src/components/tooltip/nz-tooltip.module.ts @@ -2,7 +2,7 @@ import { NgModule } from '@angular/core'; import { NzToolTipComponent } from './nz-tooltip.component'; import { NzTooltipDirective } from './nz-tooltip.directive'; import { CommonModule } from '@angular/common'; -import { OverlayModule } from '../core/overlay/index'; +import { OverlayModule } from '@angular/cdk/overlay'; @NgModule({ declarations : [ NzToolTipComponent, NzTooltipDirective ], exports : [ NzToolTipComponent, NzTooltipDirective ],