license import { PositionStrategy } from './position-strategy' ; import { OverlayReference } from '../overlay-reference' ; /** Class to be added to the overlay pane wrapper. */ const wrapperClass = 'cdk-global-overlay-wrapper' ; /**
 * 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 { /** The overlay to which this strategy is attached. */ private _overlayRef : OverlayReference ; private _cssPosition : string = 'static' ; private _topOffset : string = '' ; private _bottomOffset : string = '' ; private _leftOffset : string = '' ; private _rightOffset : string = '' ; private _alignItems : string = '' ; private _justifyContent : string = '' ; private _width : string = '' ; private _height : string = '' ; private _isDisposed : boolean ; attach ( overlayRef ) { const config = overlayRef . getConfig ( ) ; this . _overlayRef = overlayRef ; if ( this . _width && ! config . width ) { overlayRef . updateSize ( { width : this . _width } ) ; } if ( this . _height && ! config . height ) { overlayRef . updateSize ( { height : this . _height } ) ; } overlayRef . hostElement . classList . add ( wrapperClass ) ; this . _isDisposed = false ; } param value top ( value = '' ) { this . _bottomOffset = '' ; this . _topOffset = value ; this . _alignItems = 'flex-start' ; return this ; } param value left ( value = '' ) { this . _rightOffset = '' ; this . _leftOffset = value ; this . _justifyContent = 'flex-start' ; return this ; } param value bottom ( value = '' ) { this . _topOffset = '' ; this . _bottomOffset = value ; this . _alignItems = 'flex-end' ; return this ; } param value right ( value = '' ) { this . _leftOffset = '' ; this . _rightOffset = value ; this . _justifyContent = 'flex-end' ; return this ; } param value deprecated breaking-change width ( value = '' ) { if ( this . _overlayRef ) { this . _overlayRef . updateSize ( { width : value } ) ; } else { this . _width = value ; } return this ; } param value deprecated breaking-change height ( value = '' ) { if ( this . _overlayRef ) { this . _overlayRef . updateSize ( { height : value } ) ; } else { this . _height = value ; } return this ; } param offset centerHorizontally ( offset = '' ) { this . left ( offset ) ; this . _justifyContent = 'center' ; return this ; } param offset centerVertically ( offset = '' ) { this . top ( offset ) ; this . _alignItems = 'center' ; return this ; } docs-private apply ( ) { if ( ! this . _overlayRef || ! this . _overlayRef . hasAttached ( ) ) { return ; } const styles = this . _overlayRef . overlayElement . style ; const parentStyles = this . _overlayRef . hostElement . style ; const config = this . _overlayRef . getConfig ( ) ; const { width , height , maxWidth , maxHeight } = config ; const shouldBeFlushHorizontally = ( width === '100%' || width === '100vw' ) && ( ! maxWidth || maxWidth === '100%' || maxWidth === '100vw' ) ; const shouldBeFlushVertically = ( height === '100%' || height === '100vh' ) && ( ! maxHeight || maxHeight === '100%' || maxHeight === '100vh' ) ; styles . position = this . _cssPosition ; styles . marginLeft = shouldBeFlushHorizontally ? '0' : this . _leftOffset ; styles . marginTop = shouldBeFlushVertically ? '0' : this . _topOffset ; styles . marginBottom = this . _bottomOffset ; styles . marginRight = this . _rightOffset ; if ( shouldBeFlushHorizontally ) { parentStyles . justifyContent = 'flex-start' ; } else if ( this . _justifyContent === 'center' ) { parentStyles . justifyContent = 'center' ; } else if ( this . _overlayRef . getConfig ( ) . direction === 'rtl' ) { if ( this . _justifyContent === 'flex-start' ) { parentStyles . justifyContent = 'flex-end' ; } else if ( this . _justifyContent === 'flex-end' ) { parentStyles . justifyContent = 'flex-start' ; } } else { parentStyles . justifyContent = this . _justifyContent ; } parentStyles . alignItems = shouldBeFlushVertically ? 'flex-start' : this . _alignItems ; } docs-private dispose ( ) { if ( this . _isDisposed || ! this . _overlayRef ) { return ; } const styles = this . _overlayRef . overlayElement . style ; const parent = this . _overlayRef . hostElement ; const parentStyles = parent . style ; parent . classList . remove ( wrapperClass ) ; parentStyles . justifyContent = parentStyles . alignItems = styles . marginTop = styles . marginBottom = styles . marginLeft = styles . marginRight = styles . position = '' ; this . _overlayRef = null ! ; this . _isDisposed = true ; } }