1 files changed, 178 insertions, 0 deletions
diff --git a/sdc-workflow-designer-ui/src/app/paletx/core/overlay/position/global-position-strategy.ts b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/position/global-position-strategy.ts
new file mode 100644
index 00000000..8e3204a9
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/position/global-position-strategy.ts
@@ -0,0 +1,178 @@
+/**
+ * @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
+ */
+/* tslint:disable:array-type member-access variable-name typedef
+ only-arrow-functions directive-class-suffix component-class-suffix
+ component-selector no-unnecessary-type-assertion arrow-parens*/
+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;
+	}
+  }
+}