carbon-components-angular 3.15.2 → 3.15.3

package/dialog/dialog.component.js

@@ -19,11 +19,12 @@
 
 
 import { Component, Input, Output, EventEmitter, ElementRef, ViewChild, HostListener } from "@angular/core";
-import { Subscription, fromEvent, merge } from "rxjs";
+import { Subscription, fromEvent } from "rxjs";
 import { throttleTime } from "rxjs/operators";
 // the AbsolutePosition is required to import the declaration correctly
 import Position, { position } from "@carbon/utils-position";
 import { cycleTabs, getFocusElementList } from "./../common/tab.service";
+import { scrollableParentsObservable, isVisibleInContainer } from "./../utils/scroll";
 /**
  * Implements a `Dialog` that can be positioned anywhere on the page.
  * Used to implement a popover or tooltip.
@@ -93,7 +94,7 @@ var Dialog = /** @class */ (function () {
     Dialog.prototype.ngAfterViewInit = function () {
         var _this = this;
         var dialogElement = this.dialog.nativeElement;
-        // split the wrapper class list and apply separately to avoid IE from
+        // split the wrapper class list and apply separately to avoid IE
         // 1. throwing an error due to assigning a readonly property (classList)
         // 2. throwing a SyntaxError due to passing an empty string to `add`
         if (this.dialogConfig.wrapperClass) {
@@ -106,38 +107,13 @@ var Dialog = /** @class */ (function () {
         if (getFocusElementList(this.dialog.nativeElement).length > 0) {
             dialogElement.focus();
         }
-        var parentEl = this.dialogConfig.parentRef.nativeElement;
-        var node = parentEl;
-        var observables = [];
-        // if the element has an overflow set as part of
-        // its computed style it can scroll
-        var isScrollableElement = function (element) {
-            var computedStyle = getComputedStyle(element);
-            return (computedStyle.overflow === "auto" ||
-                computedStyle.overflow === "scroll" ||
-                computedStyle["overflow-y"] === "auto" ||
-                computedStyle["overflow-y"] === "scroll" ||
-                computedStyle["overflow-x"] === "auto" ||
-                computedStyle["overflow-x"] === "scroll");
-        };
-        var isVisibleInContainer = function (element, container) {
-            var elementRect = element.getBoundingClientRect();
-            var containerRect = container.getBoundingClientRect();
-            return elementRect.bottom <= containerRect.bottom && elementRect.top >= containerRect.top;
-        };
+        var parentElement = this.dialogConfig.parentRef.nativeElement;
         var placeDialogInContainer = function () {
             // only do the work to find the scroll containers if we're appended to body
             // or skip this work if we're inline
             if (!_this.dialogConfig.appendInline) {
-                // walk the parents and subscribe to all the scroll events we can
-                while (node.parentElement && node !== document.body) {
-                    if (isScrollableElement(node)) {
-                        observables.push(fromEvent(node, "scroll"));
-                    }
-                    node = node.parentElement;
-                }
                 // subscribe to the observable, and update the position and visibility
-                var scrollObservable = merge.apply(void 0, observables);
+                var scrollObservable = scrollableParentsObservable(parentElement);
                 _this.scrollSubscription = scrollObservable.subscribe(function (event) {
                     _this.placeDialog();
                     if (!isVisibleInContainer(_this.dialogConfig.parentRef.nativeElement, event.target)) {

package/dialog/dialog.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.component.js","sourceRoot":"","sources":["../src/dialog/dialog.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tElementRef,\n\tViewChild,\n\tOnInit,\n\tAfterViewInit,\n\tOnDestroy,\n\tHostListener\n} from \"@angular/core\";\nimport {\n\tObservable,\n\tSubscription,\n\tfromEvent,\n\tmerge\n} from \"rxjs\";\nimport { throttleTime } from \"rxjs/operators\";\n// the AbsolutePosition is required to import the declaration correctly\nimport Position, { position, AbsolutePosition, Positions } from \"@carbon/utils-position\";\nimport { cycleTabs, getFocusElementList } from \"./../common/tab.service\";\nimport { DialogConfig } from \"./dialog-config.interface\";\n\n\n/**\n * Implements a `Dialog` that can be positioned anywhere on the page.\n * Used to implement a popover or tooltip.\n *\n * @export\n * @class Dialog\n * @implements {OnInit}\n * @implements {AfterViewInit}\n * @implements {OnDestroy}\n */\n@Component({\n\tselector: \"ibm-dialog\",\n\ttemplate: \"\"\n})\nexport class Dialog implements OnInit, AfterViewInit, OnDestroy {\n\t/**\n\t * One static event observable to handle window resizing.\n\t */\n\tprotected static resizeObservable: Observable<any> = fromEvent(window, \"resize\").pipe(throttleTime(100));\n\t/**\n\t * Emits event that handles the closing of a `Dialog` object.\n\t */\n\t@Output() close: EventEmitter<any> = new EventEmitter();\n\t/**\n\t * Receives `DialogConfig` interface object with properties of `Dialog`\n\t * explicitly defined.\n\t */\n\t@Input() dialogConfig: DialogConfig;\n\t/**\n\t * Maintains a reference to the view DOM element of the `Dialog`.\n\t */\n\t@ViewChild(\"dialog\") dialog: ElementRef;\n\n\t/**\n\t * Stores the data received from `dialogConfig`.\n\t */\n\tpublic data = {};\n\n\t/**\n\t * The placement of the `Dialog` is received from the `Position` service.\n\t */\n\tpublic placement: string;\n\n\t/**\n\t * `Subscription` used to update placement in the event of a window resize.\n\t */\n\tprotected resizeSubscription: Subscription;\n\t/**\n\t * Subscription to all the scrollable parents `scroll` event\n\t */\n\t// add a new subscription temporarily so that contexts (such as tests)\n\t// that don't run ngAfterViewInit have something to unsubscribe in ngOnDestroy\n\tprotected scrollSubscription: Subscription = new Subscription();\n\t/**\n\t * Handles offsetting the `Dialog` item based on the defined position\n\t * to not obscure the content beneath.\n\t */\n\tprotected addGap = {\n\t\t\"left\": pos => position.addOffset(pos, 0, -this.dialogConfig.gap),\n\t\t\"right\": pos => position.addOffset(pos, 0, this.dialogConfig.gap),\n\t\t\"top\": pos => position.addOffset(pos, -this.dialogConfig.gap),\n\t\t\"bottom\": pos => position.addOffset(pos, this.dialogConfig.gap),\n\t\t\"left-bottom\": pos => position.addOffset(pos, 0, -this.dialogConfig.gap),\n\t\t\"right-bottom\": pos => position.addOffset(pos, 0, this.dialogConfig.gap)\n\t};\n\n\t/**\n\t * Extra placements. Child classes can add to this for use in `placeDialog`.\n\t */\n\tprotected placements: Positions = {};\n\n\t/**\n\t * Creates an instance of `Dialog`.\n\t * @param {ElementRef} elementRef\n\t */\n\tconstructor(protected elementRef: ElementRef) {\t}\n\n\t/**\n\t * Initialize the `Dialog`, set the placement and gap, and add a `Subscription` to resize events.\n\t */\n\tngOnInit() {\n\t\tthis.placement = this.dialogConfig.placement.split(\",\")[0];\n\t\tthis.data = this.dialogConfig.data;\n\n\t\tthis.resizeSubscription = Dialog.resizeObservable.subscribe(() => {\n\t\t\tthis.placeDialog();\n\t\t});\n\n\t\t// run any additional initialization code that consuming classes may have\n\t\tthis.onDialogInit();\n\t}\n\n\t/**\n\t * After the DOM is ready, focus is set and dialog is placed\n\t * in respect to the parent element.\n\t */\n\tngAfterViewInit() {\n\t\tconst dialogElement = this.dialog.nativeElement;\n\t\t// split the wrapper class list and apply separately to avoid IE from\n\t\t// 1. throwing an error due to assigning a readonly property (classList)\n\t\t// 2. throwing a SyntaxError due to passing an empty string to `add`\n\t\tif (this.dialogConfig.wrapperClass) {\n\t\t\tfor (const extraClass of this.dialogConfig.wrapperClass.split(\" \")) {\n\t\t\t\tdialogElement.classList.add(extraClass);\n\t\t\t}\n\t\t}\n\t\tthis.placeDialog();\n\t\tif (getFocusElementList(this.dialog.nativeElement).length > 0) {\n\t\t\tdialogElement.focus();\n\t\t}\n\t\tconst parentEl: HTMLElement = this.dialogConfig.parentRef.nativeElement;\n\t\tlet node = parentEl;\n\t\tlet observables = [];\n\n\t\t// if the element has an overflow set as part of\n\t\t// its computed style it can scroll\n\t\tconst isScrollableElement = (element: HTMLElement) => {\n\t\t\tconst computedStyle = getComputedStyle(element);\n\t\t\treturn (\n\t\t\t\tcomputedStyle.overflow === \"auto\" ||\n\t\t\t\tcomputedStyle.overflow === \"scroll\" ||\n\t\t\t\tcomputedStyle[\"overflow-y\"] === \"auto\" ||\n\t\t\t\tcomputedStyle[\"overflow-y\"] === \"scroll\" ||\n\t\t\t\tcomputedStyle[\"overflow-x\"] === \"auto\" ||\n\t\t\t\tcomputedStyle[\"overflow-x\"] === \"scroll\"\n\t\t\t);\n\t\t};\n\n\t\tconst isVisibleInContainer = (element, container) => {\n\t\t\tconst elementRect = element.getBoundingClientRect();\n\t\t\tconst containerRect = container.getBoundingClientRect();\n\t\t\treturn elementRect.bottom <= containerRect.bottom && elementRect.top >= containerRect.top;\n\t\t};\n\n\t\tconst placeDialogInContainer = () => {\n\t\t\t// only do the work to find the scroll containers if we're appended to body\n\t\t\t// or skip this work if we're inline\n\t\t\tif (!this.dialogConfig.appendInline) {\n\t\t\t\t// walk the parents and subscribe to all the scroll events we can\n\t\t\t\twhile (node.parentElement && node !== document.body) {\n\t\t\t\t\tif (isScrollableElement(node)) {\n\t\t\t\t\t\tobservables.push(fromEvent(node, \"scroll\"));\n\t\t\t\t\t}\n\t\t\t\t\tnode = node.parentElement;\n\t\t\t\t}\n\t\t\t\t// subscribe to the observable, and update the position and visibility\n\t\t\t\tconst scrollObservable = merge(...observables);\n\t\t\t\tthis.scrollSubscription = scrollObservable.subscribe((event: any) => {\n\t\t\t\t\tthis.placeDialog();\n\t\t\t\t\tif (!isVisibleInContainer(this.dialogConfig.parentRef.nativeElement, event.target)) {\n\t\t\t\t\t\tthis.doClose();\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t}\n\t\t};\n\n\t\t// settimeout to let the DOM settle before attempting to place the dialog\n\t\t// and before notifying components that the DOM is ready\n\t\tsetTimeout(() => {\n\t\t\tplaceDialogInContainer();\n\t\t\tthis.afterDialogViewInit();\n\t\t});\n\t}\n\n\t/**\n\t * Empty method to be overridden by consuming classes to run any additional initialization code.\n\t */\n\tonDialogInit() {}\n\n\t/**\n\t * Empty method to be overridden by consuming classes to run any additional initialization code after the view is available.\n\t * NOTE: this does _not_ guarantee the dialog will be positioned, simply that it will exist in the DOM\n\t */\n\tafterDialogViewInit() {}\n\n\t/**\n\t * Uses the position service to position the `Dialog` in screen space\n\t */\n\tplaceDialog(): void {\n\t\tconst positionService = new Position(this.placements);\n\t\t// helper to find the position based on the current/given environment\n\t\tconst findPosition = (reference, target, placement) => {\n\t\t\tlet pos;\n\t\t\tif (this.dialogConfig.appendInline) {\n\t\t\t\tpos = this.addGap[placement](positionService.findRelative(reference, target, placement));\n\t\t\t} else {\n\t\t\t\tpos = this.addGap[placement](positionService.findAbsolute(reference, target, placement));\n\t\t\t}\n\t\t\treturn pos;\n\t\t};\n\n\t\tlet parentEl = this.dialogConfig.parentRef.nativeElement;\n\t\tlet el = this.dialog.nativeElement;\n\t\tlet dialogPlacement = this.placement;\n\n\t\t// split always returns an array, so we can just use the auto position logic\n\t\t// for single positions too\n\t\tconst placements = this.dialogConfig.placement.split(\",\");\n\n\t\t// find the best placement\n\t\tdialogPlacement = positionService.findBestPlacement(parentEl, el, placements);\n\n\t\t// calculate the final position\n\t\tconst pos = findPosition(parentEl, el, dialogPlacement);\n\n\t\t// update the element\n\t\tpositionService.setElement(el, pos);\n\t\tsetTimeout(() => { this.placement = dialogPlacement; });\n\t}\n\n\t/**\n\t * Sets up a KeyboardEvent to close `Dialog` with Escape key.\n\t * @param {KeyboardEvent} event\n\t */\n\t@HostListener(\"keydown\", [\"$event\"])\n\tescapeClose(event: KeyboardEvent) {\n\t\tswitch (event.key) {\n\t\t\tcase \"Esc\": // IE specific value\n\t\t\tcase \"Escape\": {\n\t\t\t\tevent.stopImmediatePropagation();\n\t\t\t\tthis.doClose();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"Tab\": {\n\t\t\t\tcycleTabs(event, this.elementRef.nativeElement);\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Sets up a event Listener to close `Dialog` if click event occurs outside\n\t * `Dialog` object.\n\t * @param {any} event\n\t */\n\t@HostListener(\"document:click\", [\"$event\"])\n\tclickClose(event) {\n\t\tif (!this.elementRef.nativeElement.contains(event.target)\n\t\t\t&& !this.dialogConfig.parentRef.nativeElement.contains(event.target) ) {\n\t\t\tthis.doClose();\n\t\t}\n\t}\n\n\t/**\n\t * Closes `Dialog` object by emitting the close event upwards to parents.\n\t */\n\tpublic doClose() {\n\t\tthis.close.emit();\n\t}\n\n\t/**\n\t * At destruction of component, `Dialog` unsubscribes from handling window resizing changes.\n\t */\n\tngOnDestroy() {\n\t\tthis.resizeSubscription.unsubscribe();\n\t\tthis.scrollSubscription.unsubscribe();\n\t}\n}\n"]}
+{"version":3,"file":"dialog.component.js","sourceRoot":"","sources":["../src/dialog/dialog.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tElementRef,\n\tViewChild,\n\tOnInit,\n\tAfterViewInit,\n\tOnDestroy,\n\tHostListener\n} from \"@angular/core\";\nimport {\n\tObservable,\n\tSubscription,\n\tfromEvent,\n\tmerge\n} from \"rxjs\";\nimport { throttleTime, map } from \"rxjs/operators\";\n// the AbsolutePosition is required to import the declaration correctly\nimport Position, { position, AbsolutePosition, Positions } from \"@carbon/utils-position\";\nimport { cycleTabs, getFocusElementList } from \"./../common/tab.service\";\nimport { DialogConfig } from \"./dialog-config.interface\";\nimport { scrollableParentsObservable, isVisibleInContainer } from \"./../utils/scroll\";\n\n/**\n * Implements a `Dialog` that can be positioned anywhere on the page.\n * Used to implement a popover or tooltip.\n *\n * @export\n * @class Dialog\n * @implements {OnInit}\n * @implements {AfterViewInit}\n * @implements {OnDestroy}\n */\n@Component({\n\tselector: \"ibm-dialog\",\n\ttemplate: \"\"\n})\nexport class Dialog implements OnInit, AfterViewInit, OnDestroy {\n\t/**\n\t * One static event observable to handle window resizing.\n\t */\n\tprotected static resizeObservable: Observable<any> = fromEvent(window, \"resize\").pipe(throttleTime(100));\n\t/**\n\t * Emits event that handles the closing of a `Dialog` object.\n\t */\n\t@Output() close: EventEmitter<any> = new EventEmitter();\n\t/**\n\t * Receives `DialogConfig` interface object with properties of `Dialog`\n\t * explicitly defined.\n\t */\n\t@Input() dialogConfig: DialogConfig;\n\t/**\n\t * Maintains a reference to the view DOM element of the `Dialog`.\n\t */\n\t@ViewChild(\"dialog\") dialog: ElementRef;\n\n\t/**\n\t * Stores the data received from `dialogConfig`.\n\t */\n\tpublic data = {};\n\n\t/**\n\t * The placement of the `Dialog` is received from the `Position` service.\n\t */\n\tpublic placement: string;\n\n\t/**\n\t * `Subscription` used to update placement in the event of a window resize.\n\t */\n\tprotected resizeSubscription: Subscription;\n\t/**\n\t * Subscription to all the scrollable parents `scroll` event\n\t */\n\t// add a new subscription temporarily so that contexts (such as tests)\n\t// that don't run ngAfterViewInit have something to unsubscribe in ngOnDestroy\n\tprotected scrollSubscription: Subscription = new Subscription();\n\t/**\n\t * Handles offsetting the `Dialog` item based on the defined position\n\t * to not obscure the content beneath.\n\t */\n\tprotected addGap = {\n\t\t\"left\": pos => position.addOffset(pos, 0, -this.dialogConfig.gap),\n\t\t\"right\": pos => position.addOffset(pos, 0, this.dialogConfig.gap),\n\t\t\"top\": pos => position.addOffset(pos, -this.dialogConfig.gap),\n\t\t\"bottom\": pos => position.addOffset(pos, this.dialogConfig.gap),\n\t\t\"left-bottom\": pos => position.addOffset(pos, 0, -this.dialogConfig.gap),\n\t\t\"right-bottom\": pos => position.addOffset(pos, 0, this.dialogConfig.gap)\n\t};\n\n\t/**\n\t * Extra placements. Child classes can add to this for use in `placeDialog`.\n\t */\n\tprotected placements: Positions = {};\n\n\t/**\n\t * Creates an instance of `Dialog`.\n\t * @param {ElementRef} elementRef\n\t */\n\tconstructor(protected elementRef: ElementRef) {\t}\n\n\t/**\n\t * Initialize the `Dialog`, set the placement and gap, and add a `Subscription` to resize events.\n\t */\n\tngOnInit() {\n\t\tthis.placement = this.dialogConfig.placement.split(\",\")[0];\n\t\tthis.data = this.dialogConfig.data;\n\n\t\tthis.resizeSubscription = Dialog.resizeObservable.subscribe(() => {\n\t\t\tthis.placeDialog();\n\t\t});\n\n\t\t// run any additional initialization code that consuming classes may have\n\t\tthis.onDialogInit();\n\t}\n\n\t/**\n\t * After the DOM is ready, focus is set and dialog is placed\n\t * in respect to the parent element.\n\t */\n\tngAfterViewInit() {\n\t\tconst dialogElement = this.dialog.nativeElement;\n\t\t// split the wrapper class list and apply separately to avoid IE\n\t\t// 1. throwing an error due to assigning a readonly property (classList)\n\t\t// 2. throwing a SyntaxError due to passing an empty string to `add`\n\t\tif (this.dialogConfig.wrapperClass) {\n\t\t\tfor (const extraClass of this.dialogConfig.wrapperClass.split(\" \")) {\n\t\t\t\tdialogElement.classList.add(extraClass);\n\t\t\t}\n\t\t}\n\t\tthis.placeDialog();\n\t\tif (getFocusElementList(this.dialog.nativeElement).length > 0) {\n\t\t\tdialogElement.focus();\n\t\t}\n\t\tconst parentElement = this.dialogConfig.parentRef.nativeElement;\n\n\t\tconst placeDialogInContainer = () => {\n\t\t\t// only do the work to find the scroll containers if we're appended to body\n\t\t\t// or skip this work if we're inline\n\t\t\tif (!this.dialogConfig.appendInline) {\n\t\t\t\t// subscribe to the observable, and update the position and visibility\n\t\t\t\tconst scrollObservable = scrollableParentsObservable(parentElement);\n\t\t\t\tthis.scrollSubscription = scrollObservable.subscribe((event: any) => {\n\t\t\t\t\tthis.placeDialog();\n\t\t\t\t\tif (!isVisibleInContainer(this.dialogConfig.parentRef.nativeElement, event.target)) {\n\t\t\t\t\t\tthis.doClose();\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t}\n\t\t};\n\n\t\t// settimeout to let the DOM settle before attempting to place the dialog\n\t\t// and before notifying components that the DOM is ready\n\t\tsetTimeout(() => {\n\t\t\tplaceDialogInContainer();\n\t\t\tthis.afterDialogViewInit();\n\t\t});\n\t}\n\n\t/**\n\t * Empty method to be overridden by consuming classes to run any additional initialization code.\n\t */\n\tonDialogInit() {}\n\n\t/**\n\t * Empty method to be overridden by consuming classes to run any additional initialization code after the view is available.\n\t * NOTE: this does _not_ guarantee the dialog will be positioned, simply that it will exist in the DOM\n\t */\n\tafterDialogViewInit() {}\n\n\t/**\n\t * Uses the position service to position the `Dialog` in screen space\n\t */\n\tplaceDialog(): void {\n\t\tconst positionService = new Position(this.placements);\n\t\t// helper to find the position based on the current/given environment\n\t\tconst findPosition = (reference, target, placement) => {\n\t\t\tlet pos;\n\t\t\tif (this.dialogConfig.appendInline) {\n\t\t\t\tpos = this.addGap[placement](positionService.findRelative(reference, target, placement));\n\t\t\t} else {\n\t\t\t\tpos = this.addGap[placement](positionService.findAbsolute(reference, target, placement));\n\t\t\t}\n\t\t\treturn pos;\n\t\t};\n\n\t\tlet parentEl = this.dialogConfig.parentRef.nativeElement;\n\t\tlet el = this.dialog.nativeElement;\n\t\tlet dialogPlacement = this.placement;\n\n\t\t// split always returns an array, so we can just use the auto position logic\n\t\t// for single positions too\n\t\tconst placements = this.dialogConfig.placement.split(\",\");\n\n\t\t// find the best placement\n\t\tdialogPlacement = positionService.findBestPlacement(parentEl, el, placements);\n\n\t\t// calculate the final position\n\t\tconst pos = findPosition(parentEl, el, dialogPlacement);\n\n\t\t// update the element\n\t\tpositionService.setElement(el, pos);\n\t\tsetTimeout(() => { this.placement = dialogPlacement; });\n\t}\n\n\t/**\n\t * Sets up a KeyboardEvent to close `Dialog` with Escape key.\n\t * @param {KeyboardEvent} event\n\t */\n\t@HostListener(\"keydown\", [\"$event\"])\n\tescapeClose(event: KeyboardEvent) {\n\t\tswitch (event.key) {\n\t\t\tcase \"Esc\": // IE specific value\n\t\t\tcase \"Escape\": {\n\t\t\t\tevent.stopImmediatePropagation();\n\t\t\t\tthis.doClose();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"Tab\": {\n\t\t\t\tcycleTabs(event, this.elementRef.nativeElement);\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Sets up a event Listener to close `Dialog` if click event occurs outside\n\t * `Dialog` object.\n\t * @param {any} event\n\t */\n\t@HostListener(\"document:click\", [\"$event\"])\n\tclickClose(event) {\n\t\tif (!this.elementRef.nativeElement.contains(event.target)\n\t\t\t&& !this.dialogConfig.parentRef.nativeElement.contains(event.target) ) {\n\t\t\tthis.doClose();\n\t\t}\n\t}\n\n\t/**\n\t * Closes `Dialog` object by emitting the close event upwards to parents.\n\t */\n\tpublic doClose() {\n\t\tthis.close.emit();\n\t}\n\n\t/**\n\t * At destruction of component, `Dialog` unsubscribes from handling window resizing changes.\n\t */\n\tngOnDestroy() {\n\t\tthis.resizeSubscription.unsubscribe();\n\t\tthis.scrollSubscription.unsubscribe();\n\t}\n}\n"]}

package/dialog/dialog.component.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"Dialog":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":35,"character":1},"arguments":[{"selector":"ibm-dialog","template":""}]}],"members":{"close":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":47,"character":2}}]}],"dialogConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":2}}]}],"dialog":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":56,"character":2},"arguments":["dialog"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":100,"character":35}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"onDialogInit":[{"__symbolic":"method"}],"afterDialogViewInit":[{"__symbolic":"method"}],"placeDialog":[{"__symbolic":"method"}],"escapeClose":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":239,"character":2},"arguments":["keydown",["$event"]]}]}],"clickClose":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":260,"character":2},"arguments":["document:click",["$event"]]}]}],"doClose":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]},"statics":{"resizeObservable":{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"rxjs","name":"fromEvent","line":43,"character":54},"arguments":[{"__symbolic":"reference","name":"window"},"resize"]},"member":"pipe"},"arguments":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"rxjs/operators","name":"throttleTime","line":43,"character":87},"arguments":[100]}]}}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"Dialog":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":35,"character":1},"arguments":[{"selector":"ibm-dialog","template":""}]}],"members":{"close":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":47,"character":2}}]}],"dialogConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":2}}]}],"dialog":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":56,"character":2},"arguments":["dialog"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":100,"character":35}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"onDialogInit":[{"__symbolic":"method"}],"afterDialogViewInit":[{"__symbolic":"method"}],"placeDialog":[{"__symbolic":"method"}],"escapeClose":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":210,"character":2},"arguments":["keydown",["$event"]]}]}],"clickClose":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":231,"character":2},"arguments":["document:click",["$event"]]}]}],"doClose":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]},"statics":{"resizeObservable":{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"rxjs","name":"fromEvent","line":43,"character":54},"arguments":[{"__symbolic":"reference","name":"window"},"resize"]},"member":"pipe"},"arguments":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"rxjs/operators","name":"throttleTime","line":43,"character":87},"arguments":[100]}]}}}}}]

package/docs/documentation/components/Dialog.html

@@ -384,7 +384,7 @@ explicitly defined.</p>
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="262" class="link-to-prism">src/dialog/dialog.component.ts:262</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="233" class="link-to-prism">src/dialog/dialog.component.ts:233</a></div>
                             </td>
                         </tr>
 
@@ -426,7 +426,7 @@ explicitly defined.</p>
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="241" class="link-to-prism">src/dialog/dialog.component.ts:241</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="212" class="link-to-prism">src/dialog/dialog.component.ts:212</a></div>
                             </td>
                         </tr>
 
@@ -469,7 +469,7 @@ explicitly defined.</p>
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="199" class="link-to-prism">src/dialog/dialog.component.ts:199</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="170" class="link-to-prism">src/dialog/dialog.component.ts:170</a></div>
                             </td>
                         </tr>
 
@@ -512,7 +512,7 @@ NOTE: this does <em>not</em> guarantee the dialog will be positioned, simply tha
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="272" class="link-to-prism">src/dialog/dialog.component.ts:272</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="243" class="link-to-prism">src/dialog/dialog.component.ts:243</a></div>
                             </td>
                         </tr>
 
@@ -593,7 +593,7 @@ in respect to the parent element.</p>
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="279" class="link-to-prism">src/dialog/dialog.component.ts:279</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="250" class="link-to-prism">src/dialog/dialog.component.ts:250</a></div>
                             </td>
                         </tr>
 
@@ -673,7 +673,7 @@ in respect to the parent element.</p>
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="193" class="link-to-prism">src/dialog/dialog.component.ts:193</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="164" class="link-to-prism">src/dialog/dialog.component.ts:164</a></div>
                             </td>
                         </tr>
 
@@ -713,7 +713,7 @@ in respect to the parent element.</p>
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="204" class="link-to-prism">src/dialog/dialog.component.ts:204</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="175" class="link-to-prism">src/dialog/dialog.component.ts:175</a></div>
                             </td>
                         </tr>
 
@@ -1132,12 +1132,12 @@ import {
 	fromEvent,
 	merge
 } from &quot;rxjs&quot;;
-import { throttleTime } from &quot;rxjs/operators&quot;;
+import { throttleTime, map } from &quot;rxjs/operators&quot;;
 // the AbsolutePosition is required to import the declaration correctly
 import Position, { position, AbsolutePosition, Positions } from &quot;@carbon/utils-position&quot;;
 import { cycleTabs, getFocusElementList } from &quot;./../common/tab.service&quot;;
 import { DialogConfig } from &quot;./dialog-config.interface&quot;;
-
+import { scrollableParentsObservable, isVisibleInContainer } from &quot;./../utils/scroll&quot;;
 
 /**
  * Implements a &#x60;Dialog&#x60; that can be positioned anywhere on the page.
@@ -1237,7 +1237,7 @@ export class Dialog implements OnInit, AfterViewInit, OnDestroy {
 	 */
 	ngAfterViewInit() {
 		const dialogElement &#x3D; this.dialog.nativeElement;
-		// split the wrapper class list and apply separately to avoid IE from
+		// split the wrapper class list and apply separately to avoid IE
 		// 1. throwing an error due to assigning a readonly property (classList)
 		// 2. throwing a SyntaxError due to passing an empty string to &#x60;add&#x60;
 		if (this.dialogConfig.wrapperClass) {
@@ -1249,43 +1249,14 @@ export class Dialog implements OnInit, AfterViewInit, OnDestroy {
 		if (getFocusElementList(this.dialog.nativeElement).length &gt; 0) {
 			dialogElement.focus();
 		}
-		const parentEl: HTMLElement &#x3D; this.dialogConfig.parentRef.nativeElement;
-		let node &#x3D; parentEl;
-		let observables &#x3D; [];
-
-		// if the element has an overflow set as part of
-		// its computed style it can scroll
-		const isScrollableElement &#x3D; (element: HTMLElement) &#x3D;&gt; {
-			const computedStyle &#x3D; getComputedStyle(element);
-			return (
-				computedStyle.overflow &#x3D;&#x3D;&#x3D; &quot;auto&quot; ||
-				computedStyle.overflow &#x3D;&#x3D;&#x3D; &quot;scroll&quot; ||
-				computedStyle[&quot;overflow-y&quot;] &#x3D;&#x3D;&#x3D; &quot;auto&quot; ||
-				computedStyle[&quot;overflow-y&quot;] &#x3D;&#x3D;&#x3D; &quot;scroll&quot; ||
-				computedStyle[&quot;overflow-x&quot;] &#x3D;&#x3D;&#x3D; &quot;auto&quot; ||
-				computedStyle[&quot;overflow-x&quot;] &#x3D;&#x3D;&#x3D; &quot;scroll&quot;
-			);
-		};
-
-		const isVisibleInContainer &#x3D; (element, container) &#x3D;&gt; {
-			const elementRect &#x3D; element.getBoundingClientRect();
-			const containerRect &#x3D; container.getBoundingClientRect();
-			return elementRect.bottom &lt;&#x3D; containerRect.bottom &amp;&amp; elementRect.top &gt;&#x3D; containerRect.top;
-		};
+		const parentElement &#x3D; this.dialogConfig.parentRef.nativeElement;
 
 		const placeDialogInContainer &#x3D; () &#x3D;&gt; {
 			// only do the work to find the scroll containers if we&#x27;re appended to body
 			// or skip this work if we&#x27;re inline
 			if (!this.dialogConfig.appendInline) {
-				// walk the parents and subscribe to all the scroll events we can
-				while (node.parentElement &amp;&amp; node !&#x3D;&#x3D; document.body) {
-					if (isScrollableElement(node)) {
-						observables.push(fromEvent(node, &quot;scroll&quot;));
-					}
-					node &#x3D; node.parentElement;
-				}
 				// subscribe to the observable, and update the position and visibility
-				const scrollObservable &#x3D; merge(...observables);
+				const scrollObservable &#x3D; scrollableParentsObservable(parentElement);
 				this.scrollSubscription &#x3D; scrollObservable.subscribe((event: any) &#x3D;&gt; {
 					this.placeDialog();
 					if (!isVisibleInContainer(this.dialogConfig.parentRef.nativeElement, event.target)) {