Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(overlay): add prefixed inputs, deprecate old ones #5957

Merged
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
104 changes: 78 additions & 26 deletions src/lib/core/overlay/overlay-directives.ts
Original file line number Diff line number Diff line change
Expand Up @@ -102,17 +102,14 @@ export class ConnectedOverlayDirective implements OnDestroy, OnChanges {
private _escapeListener: Function;

/** Origin for the connected overlay. */
@Input() origin: OverlayOrigin;
@Input('cdkConnectedOverlayOrigin') origin: OverlayOrigin;

/** Registered connected position pairs. */
@Input() positions: ConnectionPositionPair[];
@Input('cdkConnectedOverlayPositions') positions: ConnectionPositionPair[];

/** The offset in pixels for the overlay connection point on the x-axis */
@Input()
get offsetX(): number {
return this._offsetX;
}

@Input('cdkConnectedOverlayOffsetX')
get offsetX(): number { return this._offsetX; }
set offsetX(offsetX: number) {
this._offsetX = offsetX;
if (this._position) {
Expand All @@ -121,11 +118,8 @@ export class ConnectedOverlayDirective implements OnDestroy, OnChanges {
}

/** The offset in pixels for the overlay connection point on the y-axis */
@Input()
get offsetY() {
return this._offsetY;
}

@Input('cdkConnectedOverlayOffsetY')
get offsetY() { return this._offsetY; }
set offsetY(offsetY: number) {
this._offsetY = offsetY;
if (this._position) {
Expand All @@ -134,35 +128,93 @@ export class ConnectedOverlayDirective implements OnDestroy, OnChanges {
}

/** The width of the overlay panel. */
@Input() width: number | string;
@Input('cdkConnectedOverlayWidth') width: number | string;

/** The height of the overlay panel. */
@Input() height: number | string;
@Input('cdkConnectedOverlayHeight') height: number | string;

/** The min width of the overlay panel. */
@Input() minWidth: number | string;
@Input('cdkConnectedOverlayMinWidth') minWidth: number | string;

/** The min height of the overlay panel. */
@Input() minHeight: number | string;
@Input('cdkConnectedOverlayMinHeight') minHeight: number | string;

/** The custom class to be set on the backdrop element. */
@Input() backdropClass: string;
@Input('cdkConnectedOverlayBackdropClass') backdropClass: string;

/** Strategy to be used when handling scroll events while the overlay is open. */
@Input() scrollStrategy: ScrollStrategy = this._scrollStrategy();
@Input('cdkConnectedOverlayScrollStrategy') scrollStrategy: ScrollStrategy =
this._scrollStrategy();

/** Whether the overlay is open. */
@Input() open: boolean = false;
@Input('cdkConnectedOverlayOpen') open: boolean = false;

/** Whether or not the overlay should attach a backdrop. */
@Input()
get hasBackdrop() {
return this._hasBackdrop;
@Input('cdkConnectedOverlayHasBackdrop')
get hasBackdrop() { return this._hasBackdrop; }
set hasBackdrop(value: any) { this._hasBackdrop = coerceBooleanProperty(value); }

/** @deprecated */
@Input('origin')
get _deprecatedOrigin(): OverlayOrigin { return this.origin; }
set _deprecatedOrigin(_origin: OverlayOrigin) { this.origin = _origin; }

/** @deprecated */
@Input('positions')
get _deprecatedPositions(): ConnectionPositionPair[] { return this.positions; }
set _deprecatedPositions(_positions: ConnectionPositionPair[]) { this.positions = _positions; }

/** @deprecated */
@Input('offsetX')
get _deprecatedOffsetX(): number { return this.offsetX; }
set _deprecatedOffsetX(_offsetX: number) { this.offsetX = _offsetX; }

/** @deprecated */
@Input('offsetY')
get _deprecatedOffsetY(): number { return this.offsetY; }
set _deprecatedOffsetY(_offsetY: number) { this.offsetY = _offsetY; }

/** @deprecated */
@Input('width')
get _deprecatedWidth(): number | string { return this.width; }
set _deprecatedWidth(_width: number | string) { this.width = _width; }

/** @deprecated */
@Input('height')
get _deprecatedHeight(): number | string { return this.height; }
set _deprecatedHeight(_height: number | string) { this.height = _height; }

/** @deprecated */
@Input('minWidth')
get _deprecatedMinWidth(): number | string { return this.minWidth; }
set _deprecatedMinWidth(_minWidth: number | string) { this.minWidth = _minWidth; }

/** @deprecated */
@Input('minHeight')
get _deprecatedMinHeight(): number | string { return this.minHeight; }
set _deprecatedMinHeight(_minHeight: number | string) { this.minHeight = _minHeight; }

/** @deprecated */
@Input('backdropClass')
get _deprecatedBackdropClass(): string { return this.backdropClass; }
set _deprecatedBackdropClass(_backdropClass: string) { this.backdropClass = _backdropClass; }

/** @deprecated */
@Input('scrollStrategy')
get _deprecatedScrollStrategy(): ScrollStrategy { return this.scrollStrategy; }
set _deprecatedScrollStrategy(_scrollStrategy: ScrollStrategy) {
this.scrollStrategy = _scrollStrategy;
}

set hasBackdrop(value: any) {
this._hasBackdrop = coerceBooleanProperty(value);
}
/** @deprecated */
@Input('open')
get _deprecatedOpen(): boolean { return this.open; }
set _deprecatedOpen(_open: boolean) { this.open = _open; }

/** @deprecated */
@Input('hasBackdrop')
get _deprecatedHasBackdrop() { return this.hasBackdrop; }
set _deprecatedHasBackdrop(_hasBackdrop: any) { this.hasBackdrop = _hasBackdrop; }

/** Event emitted when the backdrop is clicked. */
@Output() backdropClick = new EventEmitter<void>();
Expand Down Expand Up @@ -203,7 +255,7 @@ export class ConnectedOverlayDirective implements OnDestroy, OnChanges {
}

ngOnChanges(changes: SimpleChanges) {
if (changes['open']) {
if (changes['open'] || changes['_deprecatedOpen']) {
this.open ? this._attachOverlay() : this._detachOverlay();
}
}
Expand Down