= 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"
+ >