@skyux/core 5.9.5 → 5.10.0

package/bundles/skyux-core.umd.js

@@ -45,225 +45,545 @@
                     args: [{}]
                 }] });
 
-        exports.SkyMediaBreakpoints = void 0;
-        (function (SkyMediaBreakpoints) {
-            /**
-             * Indicates screen widths of 767px or less.
-             */
-            SkyMediaBreakpoints[SkyMediaBreakpoints["xs"] = 1] = "xs";
-            /**
-             * Indicates screen widths of 768px to 991px.
-             */
-            SkyMediaBreakpoints[SkyMediaBreakpoints["sm"] = 2] = "sm";
-            /**
-             * Indicates screen widths of 992px to 1199px.
-             */
-            SkyMediaBreakpoints[SkyMediaBreakpoints["md"] = 3] = "md";
-            /**
-             * Indicates screen widths of 1200px or greater.
-             */
-            SkyMediaBreakpoints[SkyMediaBreakpoints["lg"] = 4] = "lg";
-        })(exports.SkyMediaBreakpoints || (exports.SkyMediaBreakpoints = {}));
+        /*! *****************************************************************************
+        Copyright (c) Microsoft Corporation.
 
-        var SKY_TABBABLE_SELECTOR = [
-            'a[href]',
-            'area[href]',
-            'input:not([disabled])',
-            'button:not([disabled])',
-            'select:not([disabled])',
-            'textarea:not([disabled])',
-            'iframe',
-            'object',
-            'embed',
-            '*[contenteditable=true]:not([disabled])',
-            '*[tabindex]:not([disabled])',
-        ].join(', ');
-        var SkyCoreAdapterService = /** @class */ (function () {
-            function SkyCoreAdapterService(rendererFactory) {
-                this.rendererFactory = rendererFactory;
-                this.renderer = this.rendererFactory.createRenderer(undefined, undefined);
-            }
-            /**
-             * Set the responsive container CSS class for a given element.
-             *
-             * @param elementRef - The element that will recieve the new CSS class.
-             * @param breakpoint - The SkyMediaBreakpoint will determine which class
-             * gets set. For example a SkyMediaBreakpoint of `xs` will set a CSS class of `sky-responsive-container-xs`.
-             */
-            SkyCoreAdapterService.prototype.setResponsiveContainerClass = function (elementRef, breakpoint) {
-                var nativeEl = elementRef.nativeElement;
-                this.renderer.removeClass(nativeEl, 'sky-responsive-container-xs');
-                this.renderer.removeClass(nativeEl, 'sky-responsive-container-sm');
-                this.renderer.removeClass(nativeEl, 'sky-responsive-container-md');
-                this.renderer.removeClass(nativeEl, 'sky-responsive-container-lg');
-                var newClass;
-                switch (breakpoint) {
-                    case exports.SkyMediaBreakpoints.xs: {
-                        newClass = 'sky-responsive-container-xs';
-                        break;
-                    }
-                    case exports.SkyMediaBreakpoints.sm: {
-                        newClass = 'sky-responsive-container-sm';
-                        break;
-                    }
-                    case exports.SkyMediaBreakpoints.md: {
-                        newClass = 'sky-responsive-container-md';
-                        break;
-                    }
-                    default: {
-                        newClass = 'sky-responsive-container-lg';
-                        break;
-                    }
+        Permission to use, copy, modify, and/or distribute this software for any
+        purpose with or without fee is hereby granted.
+
+        THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+        REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+        AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+        INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+        LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+        OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+        PERFORMANCE OF THIS SOFTWARE.
+        ***************************************************************************** */
+        /* global Reflect, Promise */
+        var extendStatics = function (d, b) {
+            extendStatics = Object.setPrototypeOf ||
+                ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+                function (d, b) { for (var p in b)
+                    if (Object.prototype.hasOwnProperty.call(b, p))
+                        d[p] = b[p]; };
+            return extendStatics(d, b);
+        };
+        function __extends(d, b) {
+            if (typeof b !== "function" && b !== null)
+                throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+            extendStatics(d, b);
+            function __() { this.constructor = d; }
+            d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+        }
+        var __assign = function () {
+            __assign = Object.assign || function __assign(t) {
+                for (var s, i = 1, n = arguments.length; i < n; i++) {
+                    s = arguments[i];
+                    for (var p in s)
+                        if (Object.prototype.hasOwnProperty.call(s, p))
+                            t[p] = s[p];
                 }
-                this.renderer.addClass(nativeEl, newClass);
+                return t;
             };
-            /**
-             * This method temporarily enables/disables pointer events.
-             * This is helpful to prevent iFrames from interfering with drag events.
-             *
-             * @param enable - Set to `true` to enable pointer events. Set to `false` to disable.
-             */
-            SkyCoreAdapterService.prototype.toggleIframePointerEvents = function (enable) {
-                var iframes = document.querySelectorAll('iframe');
-                for (var i = 0; i < iframes.length; i++) {
-                    // Setting to empty string will allow iframe to fall back to its prior CSS assignment.
-                    iframes[i].style.pointerEvents = enable ? '' : 'none';
+            return __assign.apply(this, arguments);
+        };
+        function __rest(s, e) {
+            var t = {};
+            for (var p in s)
+                if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+                    t[p] = s[p];
+            if (s != null && typeof Object.getOwnPropertySymbols === "function")
+                for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+                    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                        t[p[i]] = s[p[i]];
                 }
-            };
-            /**
-             * Focuses on the first element found with an `autofocus` attribute inside the supplied `elementRef`.
-             *
-             * @param elementRef - The element to search within.
-             * @return Returns `true` if a child element with autofocus is found.
-             */
-            SkyCoreAdapterService.prototype.applyAutoFocus = function (elementRef) {
-                if (!elementRef) {
-                    return false;
+            return t;
+        }
+        function __decorate(decorators, target, key, desc) {
+            var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+            if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+                r = Reflect.decorate(decorators, target, key, desc);
+            else
+                for (var i = decorators.length - 1; i >= 0; i--)
+                    if (d = decorators[i])
+                        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+            return c > 3 && r && Object.defineProperty(target, key, r), r;
+        }
+        function __param(paramIndex, decorator) {
+            return function (target, key) { decorator(target, key, paramIndex); };
+        }
+        function __metadata(metadataKey, metadataValue) {
+            if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+                return Reflect.metadata(metadataKey, metadataValue);
+        }
+        function __awaiter(thisArg, _arguments, P, generator) {
+            function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+            return new (P || (P = Promise))(function (resolve, reject) {
+                function fulfilled(value) { try {
+                    step(generator.next(value));
                 }
-                var elementWithAutoFocus = elementRef.nativeElement.querySelector('[autofocus]');
-                // Child was found with the autofocus property. Set focus and return true.
-                if (elementWithAutoFocus) {
-                    elementWithAutoFocus.focus();
-                    return true;
+                catch (e) {
+                    reject(e);
+                } }
+                function rejected(value) { try {
+                    step(generator["throw"](value));
                 }
-                // No children were found with autofocus property. Return false.
-                return false;
-            };
-            /**
-             * Sets focus on the first focusable child of the `elementRef` parameter.
-             * If no focusable children are found, and `focusOnContainerIfNoChildrenFound` is `true`,
-             * focus will be set on the container element.
-             *
-             * @param elementRef - The element to search within.
-             * @param containerSelector - A CSS selector indicating the container that should
-             * recieve focus if no focusable children are found.
-             * @param focusOnContainerIfNoChildrenFound - It set to `true`, the container will
-             * recieve focus if no focusable children are found.
-             */
-            SkyCoreAdapterService.prototype.getFocusableChildrenAndApplyFocus = function (elementRef, containerSelector, focusOnContainerIfNoChildrenFound) {
-                if (focusOnContainerIfNoChildrenFound === void 0) { focusOnContainerIfNoChildrenFound = false; }
-                var containerElement = elementRef.nativeElement.querySelector(containerSelector);
-                if (containerElement) {
-                    var focusableChildren = this.getFocusableChildren(containerElement);
-                    // Focus first focusable child if available. Otherwise, set focus on container.
-                    if (!this.focusFirstElement(focusableChildren) &&
-                        focusOnContainerIfNoChildrenFound) {
-                        containerElement.focus();
+                catch (e) {
+                    reject(e);
+                } }
+                function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+                step((generator = generator.apply(thisArg, _arguments || [])).next());
+            });
+        }
+        function __generator(thisArg, body) {
+            var _ = { label: 0, sent: function () { if (t[0] & 1)
+                    throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+            return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
+            function verb(n) { return function (v) { return step([n, v]); }; }
+            function step(op) {
+                if (f)
+                    throw new TypeError("Generator is already executing.");
+                while (_)
+                    try {
+                        if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
+                            return t;
+                        if (y = 0, t)
+                            op = [op[0] & 2, t.value];
+                        switch (op[0]) {
+                            case 0:
+                            case 1:
+                                t = op;
+                                break;
+                            case 4:
+                                _.label++;
+                                return { value: op[1], done: false };
+                            case 5:
+                                _.label++;
+                                y = op[1];
+                                op = [0];
+                                continue;
+                            case 7:
+                                op = _.ops.pop();
+                                _.trys.pop();
+                                continue;
+                            default:
+                                if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                                    _ = 0;
+                                    continue;
+                                }
+                                if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
+                                    _.label = op[1];
+                                    break;
+                                }
+                                if (op[0] === 6 && _.label < t[1]) {
+                                    _.label = t[1];
+                                    t = op;
+                                    break;
+                                }
+                                if (t && _.label < t[2]) {
+                                    _.label = t[2];
+                                    _.ops.push(op);
+                                    break;
+                                }
+                                if (t[2])
+                                    _.ops.pop();
+                                _.trys.pop();
+                                continue;
+                        }
+                        op = body.call(thisArg, _);
                     }
+                    catch (e) {
+                        op = [6, e];
+                        y = 0;
+                    }
+                    finally {
+                        f = t = 0;
+                    }
+                if (op[0] & 5)
+                    throw op[1];
+                return { value: op[0] ? op[1] : void 0, done: true };
+            }
+        }
+        var __createBinding = Object.create ? (function (o, m, k, k2) {
+            if (k2 === undefined)
+                k2 = k;
+            Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
+        }) : (function (o, m, k, k2) {
+            if (k2 === undefined)
+                k2 = k;
+            o[k2] = m[k];
+        });
+        function __exportStar(m, o) {
+            for (var p in m)
+                if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
+                    __createBinding(o, m, p);
+        }
+        function __values(o) {
+            var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+            if (m)
+                return m.call(o);
+            if (o && typeof o.length === "number")
+                return {
+                    next: function () {
+                        if (o && i >= o.length)
+                            o = void 0;
+                        return { value: o && o[i++], done: !o };
+                    }
+                };
+            throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+        }
+        function __read(o, n) {
+            var m = typeof Symbol === "function" && o[Symbol.iterator];
+            if (!m)
+                return o;
+            var i = m.call(o), r, ar = [], e;
+            try {
+                while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
+                    ar.push(r.value);
+            }
+            catch (error) {
+                e = { error: error };
+            }
+            finally {
+                try {
+                    if (r && !r.done && (m = i["return"]))
+                        m.call(i);
                 }
-            };
-            /**
-             * Returns an array of all focusable children of provided `element`.
-             *
-             * @param element - The HTMLElement to search within.
-             * @param options - Options for getting focusable children.
-             */
-            SkyCoreAdapterService.prototype.getFocusableChildren = function (element, options) {
-                var _this = this;
-                if (!element) {
-                    return [];
-                }
-                var elements = Array.prototype.slice.call(element.querySelectorAll(SKY_TABBABLE_SELECTOR));
-                // Unless ignoreTabIndex = true, filter out elements with tabindex = -1.
-                if (!options || !options.ignoreTabIndex) {
-                    elements = elements.filter(function (el) {
-                        return el.tabIndex !== -1;
-                    });
+                finally {
+                    if (e)
+                        throw e.error;
                 }
-                // Unless ignoreVisibility = true, filter out elements that are not visible.
-                if (!options || !options.ignoreVisibility) {
-                    elements = elements.filter(function (el) {
-                        return _this.isVisible(el);
-                    });
+            }
+            return ar;
+        }
+        /** @deprecated */
+        function __spread() {
+            for (var ar = [], i = 0; i < arguments.length; i++)
+                ar = ar.concat(__read(arguments[i]));
+            return ar;
+        }
+        /** @deprecated */
+        function __spreadArrays() {
+            for (var s = 0, i = 0, il = arguments.length; i < il; i++)
+                s += arguments[i].length;
+            for (var r = Array(s), k = 0, i = 0; i < il; i++)
+                for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+                    r[k] = a[j];
+            return r;
+        }
+        function __spreadArray(to, from, pack) {
+            if (pack || arguments.length === 2)
+                for (var i = 0, l = from.length, ar; i < l; i++) {
+                    if (ar || !(i in from)) {
+                        if (!ar)
+                            ar = Array.prototype.slice.call(from, 0, i);
+                        ar[i] = from[i];
+                    }
                 }
-                return elements;
-            };
+            return to.concat(ar || Array.prototype.slice.call(from));
+        }
+        function __await(v) {
+            return this instanceof __await ? (this.v = v, this) : new __await(v);
+        }
+        function __asyncGenerator(thisArg, _arguments, generator) {
+            if (!Symbol.asyncIterator)
+                throw new TypeError("Symbol.asyncIterator is not defined.");
+            var g = generator.apply(thisArg, _arguments || []), i, q = [];
+            return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
+            function verb(n) { if (g[n])
+                i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
+            function resume(n, v) { try {
+                step(g[n](v));
+            }
+            catch (e) {
+                settle(q[0][3], e);
+            } }
+            function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
+            function fulfill(value) { resume("next", value); }
+            function reject(value) { resume("throw", value); }
+            function settle(f, v) { if (f(v), q.shift(), q.length)
+                resume(q[0][0], q[0][1]); }
+        }
+        function __asyncDelegator(o) {
+            var i, p;
+            return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
+            function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
+        }
+        function __asyncValues(o) {
+            if (!Symbol.asyncIterator)
+                throw new TypeError("Symbol.asyncIterator is not defined.");
+            var m = o[Symbol.asyncIterator], i;
+            return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
+            function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
+            function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
+        }
+        function __makeTemplateObject(cooked, raw) {
+            if (Object.defineProperty) {
+                Object.defineProperty(cooked, "raw", { value: raw });
+            }
+            else {
+                cooked.raw = raw;
+            }
+            return cooked;
+        }
+        ;
+        var __setModuleDefault = Object.create ? (function (o, v) {
+            Object.defineProperty(o, "default", { enumerable: true, value: v });
+        }) : function (o, v) {
+            o["default"] = v;
+        };
+        function __importStar(mod) {
+            if (mod && mod.__esModule)
+                return mod;
+            var result = {};
+            if (mod != null)
+                for (var k in mod)
+                    if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
+                        __createBinding(result, mod, k);
+            __setModuleDefault(result, mod);
+            return result;
+        }
+        function __importDefault(mod) {
+            return (mod && mod.__esModule) ? mod : { default: mod };
+        }
+        function __classPrivateFieldGet(receiver, state, kind, f) {
+            if (kind === "a" && !f)
+                throw new TypeError("Private accessor was defined without a getter");
+            if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+                throw new TypeError("Cannot read private member from an object whose class did not declare it");
+            return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+        }
+        function __classPrivateFieldSet(receiver, state, value, kind, f) {
+            if (kind === "m")
+                throw new TypeError("Private method is not writable");
+            if (kind === "a" && !f)
+                throw new TypeError("Private accessor was defined without a setter");
+            if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+                throw new TypeError("Cannot write private member to an object whose class did not declare it");
+            return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+        }
+
+        exports.SkyMediaBreakpoints = void 0;
+        (function (SkyMediaBreakpoints) {
             /**
-             * Returns the clientWidth of the provided elementRef.
-             * @param elementRef - The element to calculate width from.
+             * Indicates screen widths of 767px or less.
              */
-            SkyCoreAdapterService.prototype.getWidth = function (elementRef) {
-                return elementRef.nativeElement.clientWidth;
-            };
+            SkyMediaBreakpoints[SkyMediaBreakpoints["xs"] = 1] = "xs";
             /**
-             * Checks if an event target has a higher z-index than a given element.
-             * @param target The event target element.
-             * @param element The element to test against. A z-index must be explicitly set for this element.
+             * Indicates screen widths of 768px to 991px.
              */
-            SkyCoreAdapterService.prototype.isTargetAboveElement = function (target, element) {
-                var zIndex = getComputedStyle(element).zIndex;
-                var el = target;
-                while (el) {
-                    // Getting the computed style only works for elements that exist in the DOM.
-                    // In certain scenarios, an element is removed after a click event; by the time the event
-                    // bubbles up to other elements, however, the element has been removed and the computed style returns empty.
-                    // In this case, we'll need to check the z-index directly, via the style property.
-                    var targetZIndex = getComputedStyle(el).zIndex || el.style.zIndex;
-                    if (targetZIndex !== '' &&
-                        targetZIndex !== 'auto' &&
-                        +targetZIndex > +zIndex) {
-                        return true;
-                    }
-                    el = el.parentElement;
-                }
-                return false;
-            };
+            SkyMediaBreakpoints[SkyMediaBreakpoints["sm"] = 2] = "sm";
             /**
-             * Remove inline height styles from the provided elements.
-             * @param elementRef - The element to search within.
-             * @param selector - The CSS selector to use when finding elements for removing height.
+             * Indicates screen widths of 992px to 1199px.
              */
-            SkyCoreAdapterService.prototype.resetHeight = function (elementRef, selector) {
-                var children = elementRef.nativeElement.querySelectorAll(selector);
-                /* istanbul ignore else */
-                if (children.length > 0) {
-                    for (var i = 0; i < children.length; i++) {
-                        // Setting style attributes with Web API requires null instead of undefined.
-                        // tslint:disable-next-line: no-null-keyword
-                        children[i].style.height = null;
-                    }
-                }
-            };
+            SkyMediaBreakpoints[SkyMediaBreakpoints["md"] = 3] = "md";
             /**
-             * Sets all element heights to match the height of the tallest element.
-             * @param elementRef - The element to search within.
-             * @param selector - The CSS selector to use when finding elements for syncing height.
+             * Indicates screen widths of 1200px or greater.
              */
-            SkyCoreAdapterService.prototype.syncMaxHeight = function (elementRef, selector) {
-                var children = elementRef.nativeElement.querySelectorAll(selector);
-                /* istanbul ignore else */
-                if (children.length > 0) {
-                    var maxHeight = 0;
-                    for (var i = 0; i < children.length; i++) {
-                        maxHeight = Math.max(maxHeight, children[i].offsetHeight);
-                    }
-                    for (var i = 0; i < children.length; i++) {
-                        children[i].style.height = maxHeight + 'px';
-                    }
-                }
-            };
-            SkyCoreAdapterService.prototype.focusFirstElement = function (list) {
-                if (list.length > 0) {
+            SkyMediaBreakpoints[SkyMediaBreakpoints["lg"] = 4] = "lg";
+        })(exports.SkyMediaBreakpoints || (exports.SkyMediaBreakpoints = {}));
+
+        var _SkyCoreAdapterService_renderer;
+        var SKY_TABBABLE_SELECTOR = [
+            'a[href]',
+            'area[href]',
+            'input:not([disabled])',
+            'button:not([disabled])',
+            'select:not([disabled])',
+            'textarea:not([disabled])',
+            'iframe',
+            'object',
+            'embed',
+            '*[contenteditable=true]:not([disabled])',
+            '*[tabindex]:not([disabled])',
+        ].join(', ');
+        var SkyCoreAdapterService = /** @class */ (function () {
+            function SkyCoreAdapterService(rendererFactory) {
+                this.rendererFactory = rendererFactory;
+                _SkyCoreAdapterService_renderer.set(this, void 0);
+                __classPrivateFieldSet(this, _SkyCoreAdapterService_renderer, this.rendererFactory.createRenderer(undefined, null), "f");
+            }
+            /**
+             * Set the responsive container CSS class for a given element.
+             *
+             * @param elementRef - The element that will recieve the new CSS class.
+             * @param breakpoint - The SkyMediaBreakpoint will determine which class
+             * gets set. For example a SkyMediaBreakpoint of `xs` will set a CSS class of `sky-responsive-container-xs`.
+             */
+            SkyCoreAdapterService.prototype.setResponsiveContainerClass = function (elementRef, breakpoint) {
+                var nativeEl = elementRef.nativeElement;
+                __classPrivateFieldGet(this, _SkyCoreAdapterService_renderer, "f").removeClass(nativeEl, 'sky-responsive-container-xs');
+                __classPrivateFieldGet(this, _SkyCoreAdapterService_renderer, "f").removeClass(nativeEl, 'sky-responsive-container-sm');
+                __classPrivateFieldGet(this, _SkyCoreAdapterService_renderer, "f").removeClass(nativeEl, 'sky-responsive-container-md');
+                __classPrivateFieldGet(this, _SkyCoreAdapterService_renderer, "f").removeClass(nativeEl, 'sky-responsive-container-lg');
+                var newClass;
+                switch (breakpoint) {
+                    case exports.SkyMediaBreakpoints.xs: {
+                        newClass = 'sky-responsive-container-xs';
+                        break;
+                    }
+                    case exports.SkyMediaBreakpoints.sm: {
+                        newClass = 'sky-responsive-container-sm';
+                        break;
+                    }
+                    case exports.SkyMediaBreakpoints.md: {
+                        newClass = 'sky-responsive-container-md';
+                        break;
+                    }
+                    default: {
+                        newClass = 'sky-responsive-container-lg';
+                        break;
+                    }
+                }
+                __classPrivateFieldGet(this, _SkyCoreAdapterService_renderer, "f").addClass(nativeEl, newClass);
+            };
+            /**
+             * This method temporarily enables/disables pointer events.
+             * This is helpful to prevent iFrames from interfering with drag events.
+             *
+             * @param enable - Set to `true` to enable pointer events. Set to `false` to disable.
+             */
+            SkyCoreAdapterService.prototype.toggleIframePointerEvents = function (enable) {
+                var iframes = document.querySelectorAll('iframe');
+                for (var i = 0; i < iframes.length; i++) {
+                    // Setting to empty string will allow iframe to fall back to its prior CSS assignment.
+                    iframes[i].style.pointerEvents = enable ? '' : 'none';
+                }
+            };
+            /**
+             * Focuses on the first element found with an `autofocus` attribute inside the supplied `elementRef`.
+             *
+             * @param elementRef - The element to search within.
+             * @return Returns `true` if a child element with autofocus is found.
+             */
+            SkyCoreAdapterService.prototype.applyAutoFocus = function (elementRef) {
+                if (!elementRef) {
+                    return false;
+                }
+                var elementWithAutoFocus = elementRef.nativeElement.querySelector('[autofocus]');
+                // Child was found with the autofocus property. Set focus and return true.
+                if (elementWithAutoFocus) {
+                    elementWithAutoFocus.focus();
+                    return true;
+                }
+                // No children were found with autofocus property. Return false.
+                return false;
+            };
+            /**
+             * Sets focus on the first focusable child of the `elementRef` parameter.
+             * If no focusable children are found, and `focusOnContainerIfNoChildrenFound` is `true`,
+             * focus will be set on the container element.
+             *
+             * @param elementRef - The element to search within.
+             * @param containerSelector - A CSS selector indicating the container that should
+             * recieve focus if no focusable children are found.
+             * @param focusOnContainerIfNoChildrenFound - It set to `true`, the container will
+             * recieve focus if no focusable children are found.
+             */
+            SkyCoreAdapterService.prototype.getFocusableChildrenAndApplyFocus = function (elementRef, containerSelector, focusOnContainerIfNoChildrenFound) {
+                if (focusOnContainerIfNoChildrenFound === void 0) { focusOnContainerIfNoChildrenFound = false; }
+                var containerElement = elementRef.nativeElement.querySelector(containerSelector);
+                if (containerElement) {
+                    var focusableChildren = this.getFocusableChildren(containerElement);
+                    // Focus first focusable child if available. Otherwise, set focus on container.
+                    if (!this.focusFirstElement(focusableChildren) &&
+                        focusOnContainerIfNoChildrenFound) {
+                        containerElement.focus();
+                    }
+                }
+            };
+            /**
+             * Returns an array of all focusable children of provided `element`.
+             *
+             * @param element - The HTMLElement to search within.
+             * @param options - Options for getting focusable children.
+             */
+            SkyCoreAdapterService.prototype.getFocusableChildren = function (element, options) {
+                var _this = this;
+                if (!element) {
+                    return [];
+                }
+                var elements = Array.prototype.slice.call(element.querySelectorAll(SKY_TABBABLE_SELECTOR));
+                // Unless ignoreTabIndex = true, filter out elements with tabindex = -1.
+                if (!options || !options.ignoreTabIndex) {
+                    elements = elements.filter(function (el) {
+                        return el.tabIndex !== -1;
+                    });
+                }
+                // Unless ignoreVisibility = true, filter out elements that are not visible.
+                if (!options || !options.ignoreVisibility) {
+                    elements = elements.filter(function (el) {
+                        return _this.isVisible(el);
+                    });
+                }
+                return elements;
+            };
+            /**
+             * Returns the clientWidth of the provided elementRef.
+             * @param elementRef - The element to calculate width from.
+             */
+            SkyCoreAdapterService.prototype.getWidth = function (elementRef) {
+                return elementRef.nativeElement.clientWidth;
+            };
+            /**
+             * Checks if an event target has a higher z-index than a given element.
+             * @param target The event target element.
+             * @param element The element to test against. A z-index must be explicitly set for this element.
+             */
+            SkyCoreAdapterService.prototype.isTargetAboveElement = function (target, element) {
+                var zIndex = getComputedStyle(element).zIndex;
+                var el = target;
+                while (el) {
+                    // Getting the computed style only works for elements that exist in the DOM.
+                    // In certain scenarios, an element is removed after a click event; by the time the event
+                    // bubbles up to other elements, however, the element has been removed and the computed style returns empty.
+                    // In this case, we'll need to check the z-index directly, via the style property.
+                    var targetZIndex = getComputedStyle(el).zIndex || el.style.zIndex;
+                    if (targetZIndex !== '' &&
+                        targetZIndex !== 'auto' &&
+                        +targetZIndex > +zIndex) {
+                        return true;
+                    }
+                    el = el.parentElement;
+                }
+                return false;
+            };
+            /**
+             * Remove inline height styles from the provided elements.
+             * @param elementRef - The element to search within.
+             * @param selector - The CSS selector to use when finding elements for removing height.
+             */
+            SkyCoreAdapterService.prototype.resetHeight = function (elementRef, selector) {
+                var children = elementRef.nativeElement.querySelectorAll(selector);
+                /* istanbul ignore else */
+                if (children.length > 0) {
+                    for (var i = 0; i < children.length; i++) {
+                        // Setting style attributes with Web API requires null instead of undefined.
+                        // tslint:disable-next-line: no-null-keyword
+                        children[i].style.height = null;
+                    }
+                }
+            };
+            /**
+             * Sets all element heights to match the height of the tallest element.
+             * @param elementRef - The element to search within.
+             * @param selector - The CSS selector to use when finding elements for syncing height.
+             */
+            SkyCoreAdapterService.prototype.syncMaxHeight = function (elementRef, selector) {
+                var children = elementRef.nativeElement.querySelectorAll(selector);
+                /* istanbul ignore else */
+                if (children.length > 0) {
+                    var maxHeight = 0;
+                    for (var i = 0; i < children.length; i++) {
+                        maxHeight = Math.max(maxHeight, children[i].offsetHeight);
+                    }
+                    for (var i = 0; i < children.length; i++) {
+                        children[i].style.height = maxHeight + 'px';
+                    }
+                }
+            };
+            SkyCoreAdapterService.prototype.focusFirstElement = function (list) {
+                if (list.length > 0) {
                     list[0].focus();
                     return true;
                 }
@@ -282,6 +602,7 @@
             };
             return SkyCoreAdapterService;
         }());
+        _SkyCoreAdapterService_renderer = new WeakMap();
         SkyCoreAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCoreAdapterService, deps: [{ token: i0__namespace.RendererFactory2 }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
         SkyCoreAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCoreAdapterService, providedIn: 'root' });
         i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCoreAdapterService, decorators: [{
@@ -763,19 +1084,22 @@
             return SkyAffixer;
         }());
 
+        var _SkyAffixService_renderer;
         var SkyAffixService = /** @class */ (function () {
             function SkyAffixService(rendererFactory) {
-                this.renderer = rendererFactory.createRenderer(undefined, undefined);
+                _SkyAffixService_renderer.set(this, void 0);
+                __classPrivateFieldSet(this, _SkyAffixService_renderer, rendererFactory.createRenderer(undefined, null), "f");
             }
             /**
              * Creates an instance of [[SkyAffixer]].
              * @param affixed The element to be affixed.
              */
             SkyAffixService.prototype.createAffixer = function (affixed) {
-                return new SkyAffixer(affixed.nativeElement, this.renderer);
+                return new SkyAffixer(affixed.nativeElement, __classPrivateFieldGet(this, _SkyAffixService_renderer, "f"));
             };
             return SkyAffixService;
         }());
+        _SkyAffixService_renderer = new WeakMap();
         SkyAffixService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAffixService, deps: [{ token: i0__namespace.RendererFactory2 }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
         SkyAffixService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAffixService, providedIn: 'root' });
         i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAffixService, decorators: [{
@@ -1618,477 +1942,159 @@
                     var mq = matchMedia(breakpoint.mediaQueryString);
                     var listener = function (event) {
                         // Run the check outside of Angular's change detection since Angular
-                        // does not wrap matchMedia listeners in NgZone.
-                        // See: https://blog.assaf.co/angular-2-change-detection-zones-and-an-example/
-                        _this.zone.run(function () {
-                            if (event.matches) {
-                                _this.notifyBreakpointChange(breakpoint.name);
-                            }
-                        });
-                    };
-                    mq.addListener(listener);
-                    if (mq.matches) {
-                        _this.notifyBreakpointChange(breakpoint.name);
-                    }
-                    return {
-                        mediaQueryList: mq,
-                        listener: listener,
-                    };
-                });
-            };
-            SkyMediaQueryService.prototype.removeListeners = function () {
-                this.mediaQueries.forEach(function (mediaQuery) {
-                    mediaQuery.mediaQueryList.removeListener(mediaQuery.listener);
-                });
-                this.mediaQueries = [];
-            };
-            SkyMediaQueryService.prototype.notifyBreakpointChange = function (breakpoint) {
-                this._current = breakpoint;
-                this.currentSubject.next(breakpoint);
-            };
-            return SkyMediaQueryService;
-        }());
-        /**
-         * The size for the `xs` breakpoint.
-         * @default "(max-width: 767px)"
-         */
-        SkyMediaQueryService.xs = '(max-width: 767px)';
-        /**
-         * The size for the `sm` breakpoint.
-         * @default "(min-width: 768px) and (max-width: 991px)"
-         */
-        SkyMediaQueryService.sm = '(min-width: 768px) and (max-width: 991px)';
-        /**
-         * The size for the `md` breakpoint.
-         * @default "(min-width: 992px) and (max-width: 1199px)"
-         */
-        SkyMediaQueryService.md = '(min-width: 992px) and (max-width: 1199px)';
-        /**
-         * The size for the `lg` breakpoint.
-         * @default "(min-width: 1200px)"
-         */
-        SkyMediaQueryService.lg = '(min-width: 1200px)';
-        SkyMediaQueryService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyMediaQueryService, deps: [{ token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-        SkyMediaQueryService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyMediaQueryService, providedIn: 'root' });
-        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyMediaQueryService, decorators: [{
-                    type: i0.Injectable,
-                    args: [{
-                            providedIn: 'root',
-                        }]
-                }], ctorParameters: function () { return [{ type: i0__namespace.NgZone }]; } });
-
-        /**
-         * NOTICE: DO NOT MODIFY THIS FILE!
-         * The contents of this file were automatically generated by
-         * the 'ng generate @skyux/i18n:lib-resources-module lib/modules/shared/sky-core' schematic.
-         * To update this file, simply rerun the command.
-         */
-        var RESOURCES = {
-            'EN-US': {
-                skyux_numeric_billions_symbol: { message: 'B' },
-                skyux_numeric_millions_symbol: { message: 'M' },
-                skyux_numeric_thousands_symbol: { message: 'K' },
-                skyux_numeric_trillions_symbol: { message: 'T' },
-            },
-        };
-        var SkyCoreResourcesProvider = /** @class */ (function () {
-            function SkyCoreResourcesProvider() {
-            }
-            SkyCoreResourcesProvider.prototype.getString = function (localeInfo, name) {
-                return i1.getLibStringForLocale(RESOURCES, localeInfo.locale, name);
-            };
-            return SkyCoreResourcesProvider;
-        }());
-        /**
-         * Import into any component library module that needs to use resource strings.
-         */
-        var SkyCoreResourcesModule = /** @class */ (function () {
-            function SkyCoreResourcesModule() {
-            }
-            return SkyCoreResourcesModule;
-        }());
-        SkyCoreResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCoreResourcesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-        SkyCoreResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCoreResourcesModule, exports: [i1.SkyI18nModule] });
-        SkyCoreResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCoreResourcesModule, providers: [
-                {
-                    provide: i1.SKY_LIB_RESOURCES_PROVIDERS,
-                    useClass: SkyCoreResourcesProvider,
-                    multi: true,
-                },
-            ], imports: [i1.SkyI18nModule] });
-        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCoreResourcesModule, decorators: [{
-                    type: i0.NgModule,
-                    args: [{
-                            exports: [i1.SkyI18nModule],
-                            providers: [
-                                {
-                                    provide: i1.SKY_LIB_RESOURCES_PROVIDERS,
-                                    useClass: SkyCoreResourcesProvider,
-                                    multi: true,
-                                },
-                            ],
-                        }]
-                }] });
-
-        /**
-         * Provides arguments for the number to format.
-         */
-        var NumericOptions = /** @class */ (function () {
-            function NumericOptions() {
-                /**
-                 * Specifies the maximum number of digits after the decimal separator.
-                 * @default 1
-                 */
-                this.digits = 1;
-                /**
-                 * Specifies how to format the number. Options are `currency` or `number`.
-                 * @default "number"
-                 */
-                this.format = 'number';
-                /**
-                 * Specifies the format of the currency.
-                 * @default "standard"
-                 */
-                this.currencySign = 'standard';
-                /**
-                 * Specifies the ISO4217 currency code to use for currency formatting. If you do not specify a
-                 * currency code, the component uses the browser's culture to determine the currency unless your
-                 * SPA provides a different culture with `SkyAppLocaleProvider`.
-                 * @default "USD"
-                 */
-                this.iso = 'USD';
-                /**
-                 * Indicates whether to shorten numbers to rounded numbers and abbreviation characters
-                 * such as K for thousands, M for millions, B for billions, and T for trillions.
-                 */
-                this.truncate = true;
-                /**
-                 * Specifies the starting point after which numbers are shortened to rounded numbers
-                 * and abbreviation characters.
-                 * @default 0
-                 */
-                this.truncateAfter = 0;
-            }
-            return NumericOptions;
-        }());
-
-        /*! *****************************************************************************
-        Copyright (c) Microsoft Corporation.
-
-        Permission to use, copy, modify, and/or distribute this software for any
-        purpose with or without fee is hereby granted.
-
-        THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-        REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-        AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-        INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-        LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-        OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-        PERFORMANCE OF THIS SOFTWARE.
-        ***************************************************************************** */
-        /* global Reflect, Promise */
-        var extendStatics = function (d, b) {
-            extendStatics = Object.setPrototypeOf ||
-                ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-                function (d, b) { for (var p in b)
-                    if (Object.prototype.hasOwnProperty.call(b, p))
-                        d[p] = b[p]; };
-            return extendStatics(d, b);
-        };
-        function __extends(d, b) {
-            if (typeof b !== "function" && b !== null)
-                throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-            extendStatics(d, b);
-            function __() { this.constructor = d; }
-            d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-        }
-        var __assign = function () {
-            __assign = Object.assign || function __assign(t) {
-                for (var s, i = 1, n = arguments.length; i < n; i++) {
-                    s = arguments[i];
-                    for (var p in s)
-                        if (Object.prototype.hasOwnProperty.call(s, p))
-                            t[p] = s[p];
-                }
-                return t;
-            };
-            return __assign.apply(this, arguments);
-        };
-        function __rest(s, e) {
-            var t = {};
-            for (var p in s)
-                if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-                    t[p] = s[p];
-            if (s != null && typeof Object.getOwnPropertySymbols === "function")
-                for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-                    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                        t[p[i]] = s[p[i]];
-                }
-            return t;
-        }
-        function __decorate(decorators, target, key, desc) {
-            var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-            if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-                r = Reflect.decorate(decorators, target, key, desc);
-            else
-                for (var i = decorators.length - 1; i >= 0; i--)
-                    if (d = decorators[i])
-                        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-            return c > 3 && r && Object.defineProperty(target, key, r), r;
-        }
-        function __param(paramIndex, decorator) {
-            return function (target, key) { decorator(target, key, paramIndex); };
-        }
-        function __metadata(metadataKey, metadataValue) {
-            if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
-                return Reflect.metadata(metadataKey, metadataValue);
-        }
-        function __awaiter(thisArg, _arguments, P, generator) {
-            function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-            return new (P || (P = Promise))(function (resolve, reject) {
-                function fulfilled(value) { try {
-                    step(generator.next(value));
-                }
-                catch (e) {
-                    reject(e);
-                } }
-                function rejected(value) { try {
-                    step(generator["throw"](value));
-                }
-                catch (e) {
-                    reject(e);
-                } }
-                function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-                step((generator = generator.apply(thisArg, _arguments || [])).next());
-            });
-        }
-        function __generator(thisArg, body) {
-            var _ = { label: 0, sent: function () { if (t[0] & 1)
-                    throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-            return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
-            function verb(n) { return function (v) { return step([n, v]); }; }
-            function step(op) {
-                if (f)
-                    throw new TypeError("Generator is already executing.");
-                while (_)
-                    try {
-                        if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
-                            return t;
-                        if (y = 0, t)
-                            op = [op[0] & 2, t.value];
-                        switch (op[0]) {
-                            case 0:
-                            case 1:
-                                t = op;
-                                break;
-                            case 4:
-                                _.label++;
-                                return { value: op[1], done: false };
-                            case 5:
-                                _.label++;
-                                y = op[1];
-                                op = [0];
-                                continue;
-                            case 7:
-                                op = _.ops.pop();
-                                _.trys.pop();
-                                continue;
-                            default:
-                                if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
-                                    _ = 0;
-                                    continue;
-                                }
-                                if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
-                                    _.label = op[1];
-                                    break;
-                                }
-                                if (op[0] === 6 && _.label < t[1]) {
-                                    _.label = t[1];
-                                    t = op;
-                                    break;
-                                }
-                                if (t && _.label < t[2]) {
-                                    _.label = t[2];
-                                    _.ops.push(op);
-                                    break;
-                                }
-                                if (t[2])
-                                    _.ops.pop();
-                                _.trys.pop();
-                                continue;
-                        }
-                        op = body.call(thisArg, _);
-                    }
-                    catch (e) {
-                        op = [6, e];
-                        y = 0;
-                    }
-                    finally {
-                        f = t = 0;
-                    }
-                if (op[0] & 5)
-                    throw op[1];
-                return { value: op[0] ? op[1] : void 0, done: true };
-            }
-        }
-        var __createBinding = Object.create ? (function (o, m, k, k2) {
-            if (k2 === undefined)
-                k2 = k;
-            Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
-        }) : (function (o, m, k, k2) {
-            if (k2 === undefined)
-                k2 = k;
-            o[k2] = m[k];
-        });
-        function __exportStar(m, o) {
-            for (var p in m)
-                if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
-                    __createBinding(o, m, p);
-        }
-        function __values(o) {
-            var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-            if (m)
-                return m.call(o);
-            if (o && typeof o.length === "number")
-                return {
-                    next: function () {
-                        if (o && i >= o.length)
-                            o = void 0;
-                        return { value: o && o[i++], done: !o };
-                    }
-                };
-            throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
-        }
-        function __read(o, n) {
-            var m = typeof Symbol === "function" && o[Symbol.iterator];
-            if (!m)
-                return o;
-            var i = m.call(o), r, ar = [], e;
-            try {
-                while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
-                    ar.push(r.value);
-            }
-            catch (error) {
-                e = { error: error };
-            }
-            finally {
-                try {
-                    if (r && !r.done && (m = i["return"]))
-                        m.call(i);
-                }
-                finally {
-                    if (e)
-                        throw e.error;
-                }
-            }
-            return ar;
-        }
-        /** @deprecated */
-        function __spread() {
-            for (var ar = [], i = 0; i < arguments.length; i++)
-                ar = ar.concat(__read(arguments[i]));
-            return ar;
-        }
-        /** @deprecated */
-        function __spreadArrays() {
-            for (var s = 0, i = 0, il = arguments.length; i < il; i++)
-                s += arguments[i].length;
-            for (var r = Array(s), k = 0, i = 0; i < il; i++)
-                for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-                    r[k] = a[j];
-            return r;
-        }
-        function __spreadArray(to, from, pack) {
-            if (pack || arguments.length === 2)
-                for (var i = 0, l = from.length, ar; i < l; i++) {
-                    if (ar || !(i in from)) {
-                        if (!ar)
-                            ar = Array.prototype.slice.call(from, 0, i);
-                        ar[i] = from[i];
+                        // does not wrap matchMedia listeners in NgZone.
+                        // See: https://blog.assaf.co/angular-2-change-detection-zones-and-an-example/
+                        _this.zone.run(function () {
+                            if (event.matches) {
+                                _this.notifyBreakpointChange(breakpoint.name);
+                            }
+                        });
+                    };
+                    mq.addListener(listener);
+                    if (mq.matches) {
+                        _this.notifyBreakpointChange(breakpoint.name);
                     }
-                }
-            return to.concat(ar || Array.prototype.slice.call(from));
-        }
-        function __await(v) {
-            return this instanceof __await ? (this.v = v, this) : new __await(v);
-        }
-        function __asyncGenerator(thisArg, _arguments, generator) {
-            if (!Symbol.asyncIterator)
-                throw new TypeError("Symbol.asyncIterator is not defined.");
-            var g = generator.apply(thisArg, _arguments || []), i, q = [];
-            return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
-            function verb(n) { if (g[n])
-                i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
-            function resume(n, v) { try {
-                step(g[n](v));
+                    return {
+                        mediaQueryList: mq,
+                        listener: listener,
+                    };
+                });
+            };
+            SkyMediaQueryService.prototype.removeListeners = function () {
+                this.mediaQueries.forEach(function (mediaQuery) {
+                    mediaQuery.mediaQueryList.removeListener(mediaQuery.listener);
+                });
+                this.mediaQueries = [];
+            };
+            SkyMediaQueryService.prototype.notifyBreakpointChange = function (breakpoint) {
+                this._current = breakpoint;
+                this.currentSubject.next(breakpoint);
+            };
+            return SkyMediaQueryService;
+        }());
+        /**
+         * The size for the `xs` breakpoint.
+         * @default "(max-width: 767px)"
+         */
+        SkyMediaQueryService.xs = '(max-width: 767px)';
+        /**
+         * The size for the `sm` breakpoint.
+         * @default "(min-width: 768px) and (max-width: 991px)"
+         */
+        SkyMediaQueryService.sm = '(min-width: 768px) and (max-width: 991px)';
+        /**
+         * The size for the `md` breakpoint.
+         * @default "(min-width: 992px) and (max-width: 1199px)"
+         */
+        SkyMediaQueryService.md = '(min-width: 992px) and (max-width: 1199px)';
+        /**
+         * The size for the `lg` breakpoint.
+         * @default "(min-width: 1200px)"
+         */
+        SkyMediaQueryService.lg = '(min-width: 1200px)';
+        SkyMediaQueryService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyMediaQueryService, deps: [{ token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+        SkyMediaQueryService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyMediaQueryService, providedIn: 'root' });
+        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyMediaQueryService, decorators: [{
+                    type: i0.Injectable,
+                    args: [{
+                            providedIn: 'root',
+                        }]
+                }], ctorParameters: function () { return [{ type: i0__namespace.NgZone }]; } });
+
+        /**
+         * NOTICE: DO NOT MODIFY THIS FILE!
+         * The contents of this file were automatically generated by
+         * the 'ng generate @skyux/i18n:lib-resources-module lib/modules/shared/sky-core' schematic.
+         * To update this file, simply rerun the command.
+         */
+        var RESOURCES = {
+            'EN-US': {
+                skyux_numeric_billions_symbol: { message: 'B' },
+                skyux_numeric_millions_symbol: { message: 'M' },
+                skyux_numeric_thousands_symbol: { message: 'K' },
+                skyux_numeric_trillions_symbol: { message: 'T' },
+            },
+        };
+        var SkyCoreResourcesProvider = /** @class */ (function () {
+            function SkyCoreResourcesProvider() {
             }
-            catch (e) {
-                settle(q[0][3], e);
-            } }
-            function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
-            function fulfill(value) { resume("next", value); }
-            function reject(value) { resume("throw", value); }
-            function settle(f, v) { if (f(v), q.shift(), q.length)
-                resume(q[0][0], q[0][1]); }
-        }
-        function __asyncDelegator(o) {
-            var i, p;
-            return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
-            function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
-        }
-        function __asyncValues(o) {
-            if (!Symbol.asyncIterator)
-                throw new TypeError("Symbol.asyncIterator is not defined.");
-            var m = o[Symbol.asyncIterator], i;
-            return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
-            function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
-            function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
-        }
-        function __makeTemplateObject(cooked, raw) {
-            if (Object.defineProperty) {
-                Object.defineProperty(cooked, "raw", { value: raw });
+            SkyCoreResourcesProvider.prototype.getString = function (localeInfo, name) {
+                return i1.getLibStringForLocale(RESOURCES, localeInfo.locale, name);
+            };
+            return SkyCoreResourcesProvider;
+        }());
+        /**
+         * Import into any component library module that needs to use resource strings.
+         */
+        var SkyCoreResourcesModule = /** @class */ (function () {
+            function SkyCoreResourcesModule() {
             }
-            else {
-                cooked.raw = raw;
+            return SkyCoreResourcesModule;
+        }());
+        SkyCoreResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCoreResourcesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+        SkyCoreResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCoreResourcesModule, exports: [i1.SkyI18nModule] });
+        SkyCoreResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCoreResourcesModule, providers: [
+                {
+                    provide: i1.SKY_LIB_RESOURCES_PROVIDERS,
+                    useClass: SkyCoreResourcesProvider,
+                    multi: true,
+                },
+            ], imports: [i1.SkyI18nModule] });
+        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCoreResourcesModule, decorators: [{
+                    type: i0.NgModule,
+                    args: [{
+                            exports: [i1.SkyI18nModule],
+                            providers: [
+                                {
+                                    provide: i1.SKY_LIB_RESOURCES_PROVIDERS,
+                                    useClass: SkyCoreResourcesProvider,
+                                    multi: true,
+                                },
+                            ],
+                        }]
+                }] });
+
+        /**
+         * Provides arguments for the number to format.
+         */
+        var NumericOptions = /** @class */ (function () {
+            function NumericOptions() {
+                /**
+                 * Specifies the maximum number of digits after the decimal separator.
+                 * @default 1
+                 */
+                this.digits = 1;
+                /**
+                 * Specifies how to format the number. Options are `currency` or `number`.
+                 * @default "number"
+                 */
+                this.format = 'number';
+                /**
+                 * Specifies the format of the currency.
+                 * @default "standard"
+                 */
+                this.currencySign = 'standard';
+                /**
+                 * Specifies the ISO4217 currency code to use for currency formatting. If you do not specify a
+                 * currency code, the component uses the browser's culture to determine the currency unless your
+                 * SPA provides a different culture with `SkyAppLocaleProvider`.
+                 * @default "USD"
+                 */
+                this.iso = 'USD';
+                /**
+                 * Indicates whether to shorten numbers to rounded numbers and abbreviation characters
+                 * such as K for thousands, M for millions, B for billions, and T for trillions.
+                 */
+                this.truncate = true;
+                /**
+                 * Specifies the starting point after which numbers are shortened to rounded numbers
+                 * and abbreviation characters.
+                 * @default 0
+                 */
+                this.truncateAfter = 0;
             }
-            return cooked;
-        }
-        ;
-        var __setModuleDefault = Object.create ? (function (o, v) {
-            Object.defineProperty(o, "default", { enumerable: true, value: v });
-        }) : function (o, v) {
-            o["default"] = v;
-        };
-        function __importStar(mod) {
-            if (mod && mod.__esModule)
-                return mod;
-            var result = {};
-            if (mod != null)
-                for (var k in mod)
-                    if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
-                        __createBinding(result, mod, k);
-            __setModuleDefault(result, mod);
-            return result;
-        }
-        function __importDefault(mod) {
-            return (mod && mod.__esModule) ? mod : { default: mod };
-        }
-        function __classPrivateFieldGet(receiver, state, kind, f) {
-            if (kind === "a" && !f)
-                throw new TypeError("Private accessor was defined without a getter");
-            if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-                throw new TypeError("Cannot read private member from an object whose class did not declare it");
-            return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-        }
-        function __classPrivateFieldSet(receiver, state, value, kind, f) {
-            if (kind === "m")
-                throw new TypeError("Private method is not writable");
-            if (kind === "a" && !f)
-                throw new TypeError("Private accessor was defined without a setter");
-            if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-                throw new TypeError("Cannot write private member to an object whose class did not declare it");
-            return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-        }
+            return NumericOptions;
+        }());
 
         /* tslint:disable:no-null-keyword */
         function isNumeric(value) {
@@ -2187,7 +2193,7 @@
                 configurable: true
             });
             /**
-             * Shortens with or without symbol (K/M/B/T) depending on value of number.
+             * Formats a number based on the provided options.
              * @param value The number to format.
              * @param options Format options.
              */
@@ -2357,10 +2363,6 @@
          * M for millions, B for billions, and T for trillions. The pipe also formats for currency.
          * Be sure you have a space after the two curly brackets opening the pipe and
          * a space before the two curly brackets closing the pipe or it will not work.
-         * Usage:
-         * ```
-         * {{ value | skyNumeric(config) }}
-         * ```
          */
         var SkyNumericPipe = /** @class */ (function () {
             function SkyNumericPipe(localeProvider, numericService, changeDetector) {
@@ -2382,6 +2384,9 @@
                 this.ngUnsubscribe.next();
                 this.ngUnsubscribe.complete();
             };
+            /**
+             * Formats a number based on the provided options.
+             */
             SkyNumericPipe.prototype.transform = function (value, config) {
                 var _a;
                 var newCacheKey = (config ? JSON.stringify(config, Object.keys(config).sort()) : '') +
@@ -2912,6 +2917,7 @@
                         }]
                 }] });
 
+        var _SkyResizeObserverService_resizeObserver, _SkyResizeObserverService_tracking;
         /**
          * Service to create rxjs observables for changes to the content box dimensions of elements.
          */
@@ -2919,13 +2925,14 @@
             function SkyResizeObserverService(zone) {
                 var _this = this;
                 this.zone = zone;
-                this._tracking = [];
-                this._resizeObserver = new ResizeObserver(function (entries) {
+                _SkyResizeObserverService_resizeObserver.set(this, void 0);
+                _SkyResizeObserverService_tracking.set(this, []);
+                __classPrivateFieldSet(this, _SkyResizeObserverService_resizeObserver, new ResizeObserver(function (entries) {
                     entries.forEach(function (entry) { return _this.callback(entry); });
-                });
+                }), "f");
             }
             SkyResizeObserverService.prototype.ngOnDestroy = function () {
-                this._resizeObserver.disconnect();
+                __classPrivateFieldGet(this, _SkyResizeObserverService_resizeObserver, "f").disconnect();
             };
             /**
              * Create rxjs observable to get size changes for an element ref.
@@ -2935,22 +2942,22 @@
             };
             SkyResizeObserverService.prototype.observeAndTrack = function (element) {
                 var _this = this;
-                var checkTracking = this._tracking.findIndex(function (value) {
+                var checkTracking = __classPrivateFieldGet(this, _SkyResizeObserverService_tracking, "f").findIndex(function (value) {
                     return !value.subject.closed && value.element === element.nativeElement;
                 });
                 if (checkTracking === -1) {
-                    this._resizeObserver.observe(element.nativeElement);
+                    __classPrivateFieldGet(this, _SkyResizeObserverService_resizeObserver, "f").observe(element.nativeElement);
                 }
                 var subject = new rxjs.Subject();
                 var subjectObservable = subject.pipe(operators.finalize(function () {
                     // Are there any other tracking entries still watching this element?
-                    var checkTracking = _this._tracking.findIndex(function (value) {
+                    var checkTracking = __classPrivateFieldGet(_this, _SkyResizeObserverService_tracking, "f").findIndex(function (value) {
                         return (value.subject !== subject &&
                             !value.subject.closed &&
                             value.element === element.nativeElement);
                     });
                     if (checkTracking === -1) {
-                        _this._resizeObserver.unobserve(element.nativeElement);
+                        __classPrivateFieldGet(_this, _SkyResizeObserverService_resizeObserver, "f").unobserve(element.nativeElement);
                     }
                 }));
                 var tracking = {
@@ -2958,16 +2965,18 @@
                     subject: subject,
                     subjectObservable: subjectObservable,
                 };
-                this._tracking.push(tracking);
+                __classPrivateFieldGet(this, _SkyResizeObserverService_tracking, "f").push(tracking);
                 return tracking;
             };
             SkyResizeObserverService.prototype.callback = function (entry) {
                 var _this = this;
-                this._tracking
+                __classPrivateFieldGet(this, _SkyResizeObserverService_tracking, "f")
                     .filter(function (value) { return !(value.subject.closed || value.subject.isStopped); })
                     .forEach(function (value) {
                     /* istanbul ignore else */
                     if (value.element === entry.target) {
+                        // Execute the callback within NgZone because Angular does not "monkey patch"
+                        // ResizeObserver like it does for other features in the DOM.
                         _this.zone.run(function () {
                             value.subject.next(entry);
                         });
@@ -2976,6 +2985,7 @@
             };
             return SkyResizeObserverService;
         }());
+        _SkyResizeObserverService_resizeObserver = new WeakMap(), _SkyResizeObserverService_tracking = new WeakMap();
         SkyResizeObserverService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyResizeObserverService, deps: [{ token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
         SkyResizeObserverService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyResizeObserverService, providedIn: 'any' });
         i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyResizeObserverService, decorators: [{
@@ -2985,6 +2995,7 @@
                         }]
                 }], ctorParameters: function () { return [{ type: i0__namespace.NgZone }]; } });
 
+        var _SkyResizeObserverMediaQueryService_breakpoints, _SkyResizeObserverMediaQueryService_currentBreakpointObservable, _SkyResizeObserverMediaQueryService_stopListening, _SkyResizeObserverMediaQueryService_target;
         /**
          * Acts like `SkyMediaQueryService` for a container element, emitting the same responsive breakpoints.
          */
@@ -2992,9 +3003,9 @@
             function SkyResizeObserverMediaQueryService(resizeObserverService) {
                 var _this = this;
                 this.resizeObserverService = resizeObserverService;
-                this._breakpoints = [
+                _SkyResizeObserverMediaQueryService_breakpoints.set(this, [
                     {
-                        check: function (width) { return width <= 767; },
+                        check: function (width) { return width > 0 && width <= 767; },
                         name: exports.SkyMediaBreakpoints.xs,
                     },
                     {
@@ -3009,11 +3020,12 @@
                         check: function (width) { return width > 1199; },
                         name: exports.SkyMediaBreakpoints.lg,
                     },
-                ];
-                this._currentBreakpointObservable = new rxjs.ReplaySubject(1);
-                this._stopListening = new rxjs.Subject();
-                this._stopListening.subscribe(function () {
-                    _this._target = undefined;
+                ]);
+                _SkyResizeObserverMediaQueryService_currentBreakpointObservable.set(this, new rxjs.ReplaySubject(1));
+                _SkyResizeObserverMediaQueryService_stopListening.set(this, new rxjs.Subject());
+                _SkyResizeObserverMediaQueryService_target.set(this, void 0);
+                __classPrivateFieldGet(this, _SkyResizeObserverMediaQueryService_stopListening, "f").subscribe(function () {
+                    __classPrivateFieldSet(_this, _SkyResizeObserverMediaQueryService_target, undefined, "f");
                     _this.updateBreakpoint(undefined);
                 });
             }
@@ -3028,10 +3040,10 @@
                 configurable: true
             });
             SkyResizeObserverMediaQueryService.prototype.ngOnDestroy = function () {
-                this._stopListening.next();
+                __classPrivateFieldGet(this, _SkyResizeObserverMediaQueryService_stopListening, "f").next();
                 this._currentBreakpoint = undefined;
-                this._stopListening.complete();
-                this._currentBreakpointObservable.complete();
+                __classPrivateFieldGet(this, _SkyResizeObserverMediaQueryService_stopListening, "f").complete();
+                __classPrivateFieldGet(this, _SkyResizeObserverMediaQueryService_currentBreakpointObservable, "f").complete();
             };
             /**
              * @internal
@@ -3045,25 +3057,21 @@
              */
             SkyResizeObserverMediaQueryService.prototype.observe = function (element) {
                 var _this = this;
-                if (this._target) {
-                    if (this._target === element) {
+                if (__classPrivateFieldGet(this, _SkyResizeObserverMediaQueryService_target, "f")) {
+                    if (__classPrivateFieldGet(this, _SkyResizeObserverMediaQueryService_target, "f") === element) {
                         return this;
                     }
-                    this._stopListening.next();
-                }
-                this._target = element;
-                var width = element.nativeElement.offsetWidth;
-                if (width) {
-                    var breakpoint = this.checkBreakpoint(width);
-                    this.updateBreakpoint(breakpoint);
+                    __classPrivateFieldGet(this, _SkyResizeObserverMediaQueryService_stopListening, "f").next();
                 }
-                this._resizeSubscription = this.resizeObserverService
+                __classPrivateFieldSet(this, _SkyResizeObserverMediaQueryService_target, element, "f");
+                this.checkWidth(element);
+                this.resizeObserverService
                     .observe(element)
-                    .pipe(operators.takeUntil(this._stopListening))
+                    .pipe(operators.takeUntil(__classPrivateFieldGet(this, _SkyResizeObserverMediaQueryService_stopListening, "f")))
                     .subscribe(function (value) {
                     var breakpoint = _this.checkBreakpoint(value.contentRect.width);
                     /* istanbul ignore else */
-                    if (breakpoint !== _this._currentBreakpoint) {
+                    if (breakpoint !== _this.current) {
                         _this.updateBreakpoint(breakpoint);
                     }
                 });
@@ -3073,26 +3081,40 @@
              * Stop watching the container element.
              */
             SkyResizeObserverMediaQueryService.prototype.unobserve = function () {
-                this._stopListening.next();
+                __classPrivateFieldGet(this, _SkyResizeObserverMediaQueryService_stopListening, "f").next();
             };
             /**
              * Subscribes to element size changes that cross breakpoints.
              */
             SkyResizeObserverMediaQueryService.prototype.subscribe = function (listener) {
-                return this._currentBreakpointObservable
-                    .pipe(operators.takeUntil(this._stopListening))
-                    .subscribe(listener);
+                return __classPrivateFieldGet(this, _SkyResizeObserverMediaQueryService_currentBreakpointObservable, "f")
+                    .pipe(operators.takeUntil(__classPrivateFieldGet(this, _SkyResizeObserverMediaQueryService_stopListening, "f")))
+                    .subscribe(function (value) {
+                    listener(value);
+                });
             };
             SkyResizeObserverMediaQueryService.prototype.updateBreakpoint = function (breakpoint) {
                 this._currentBreakpoint = breakpoint;
-                this._currentBreakpointObservable.next(breakpoint);
+                __classPrivateFieldGet(this, _SkyResizeObserverMediaQueryService_currentBreakpointObservable, "f").next(breakpoint);
             };
             SkyResizeObserverMediaQueryService.prototype.checkBreakpoint = function (width) {
-                var _a;
-                return (_a = this._breakpoints.find(function (breakpoint) { return breakpoint.check(width); })) === null || _a === void 0 ? void 0 : _a.name;
+                var breakpoint = __classPrivateFieldGet(this, _SkyResizeObserverMediaQueryService_breakpoints, "f").find(function (breakpoint) { return breakpoint.check(width); });
+                /* istanbul ignore else */
+                if (breakpoint) {
+                    return breakpoint.name;
+                }
+            };
+            SkyResizeObserverMediaQueryService.prototype.checkWidth = function (element) {
+                var width = element.nativeElement.offsetWidth || 0;
+                var breakpoint = this.checkBreakpoint(width);
+                /* istanbul ignore else */
+                if (breakpoint !== this._currentBreakpoint) {
+                    this.updateBreakpoint(breakpoint);
+                }
             };
             return SkyResizeObserverMediaQueryService;
         }());
+        _SkyResizeObserverMediaQueryService_breakpoints = new WeakMap(), _SkyResizeObserverMediaQueryService_currentBreakpointObservable = new WeakMap(), _SkyResizeObserverMediaQueryService_stopListening = new WeakMap(), _SkyResizeObserverMediaQueryService_target = new WeakMap();
         SkyResizeObserverMediaQueryService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyResizeObserverMediaQueryService, deps: [{ token: SkyResizeObserverService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
         SkyResizeObserverMediaQueryService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyResizeObserverMediaQueryService, providedIn: 'any' });
         i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyResizeObserverMediaQueryService, decorators: [{
@@ -3134,8 +3156,7 @@
             /**
              * Returns an observable which emits the given element's current scrollable host
              * @param elementRef The element whose scrollable host is being requested
-             * @param completionObservable An observable which alerts the internal observers that they should complete
-             * @returns An observable which emits the current scrollable host
+             * @returns An observable which emits the current scrollable host element.
              * @internal
              */
             SkyScrollableHostService.prototype.watchScrollableHost = function (elementRef) {
@@ -3146,11 +3167,13 @@
                 return new rxjs.Observable(function (subscriber) {
                     subscribers.push(subscriber);
                     var scrollableHost = _this.findScrollableHost(elementRef.nativeElement);
+                    // Setup mutation observers only once, for all subscribers.
                     if (subscribers.length === 1) {
                         parentMutationObserver = _this.mutationObserverSvc.create(function () {
                             var newScrollableHost = _this.findScrollableHost(elementRef.nativeElement);
+                            // Reset observer if scrollable host changes.
                             if (newScrollableHost !== scrollableHost &&
-                                elementRef.nativeElement.offsetParent) {
+                                _this.isElementVisible(elementRef)) {
                                 scrollableHost = newScrollableHost;
                                 _this.observeForScrollableHostChanges(scrollableHost, parentMutationObserver);
                                 notifySubscribers(subscribers, scrollableHost);
@@ -3158,7 +3181,9 @@
                         });
                         _this.observeForScrollableHostChanges(scrollableHost, parentMutationObserver);
                         documentHiddenElementMutationObserver = _this.mutationObserverSvc.create(function () {
-                            if (scrollableHost && !elementRef.nativeElement.offsetParent) {
+                            if (scrollableHost && !_this.isElementVisible(elementRef)) {
+                                // If the scrollable host is not visible, set it to undefined and unsubscribe from its mutation changes.
+                                // Then, observe the document element so that a new scrollable host can be found.
                                 scrollableHost = undefined;
                                 _this.observeForScrollableHostChanges(scrollableHost, parentMutationObserver);
                                 notifySubscribers(subscribers, scrollableHost);
@@ -3166,10 +3191,11 @@
                         });
                         _this.observeDocumentHiddenElementChanges(documentHiddenElementMutationObserver);
                     }
+                    // Emit the scrollable host to the subscriber.
                     subscriber.next(scrollableHost);
+                    // Teardown callback for the subscription.
                     subscriber.add(function () {
                         var subIndex = subscribers.indexOf(subscriber);
-                        /* sanity check */
                         /* istanbul ignore else */
                         if (subIndex >= 0) {
                             subscribers.splice(subIndex, 1);
@@ -3184,7 +3210,6 @@
             /**
              * Returns an observable which emits whenever the element's scrollable host emits a scroll event. The observable will always emit the scroll events from the elements current scrollable host and will update based on any scrollable host changes. The observable will also emit once whenever the scrollable host changes.
              * @param elementRef The element whose scrollable host scroll events are being requested
-             * @param completionObservable An observable which alerts the internal observers that they should complete
              * @returns An observable which emits when the elements scrollable host is scrolled or is changed
              */
             SkyScrollableHostService.prototype.watchScrollableHostScrollEvents = function (elementRef) {
@@ -3196,6 +3221,7 @@
                 var scrollEventSubscription;
                 return new rxjs.Observable(function (subscriber) {
                     subscribers.push(subscriber);
+                    // Setup mutation observers only once, for all subscribers.
                     if (subscribers.length === 1) {
                         scrollableHostSubscription = _this.watchScrollableHost(elementRef).subscribe(function (newScrollableHost) {
                             newScrollableHostObservable.next();
@@ -3205,6 +3231,8 @@
                             }
                             scrollableHost = newScrollableHost;
                             newScrollableHostObservable = new rxjs.Subject();
+                            // Only subscribe to scroll events if the host element is defined.
+                            /* istanbul ignore else */
                             if (newScrollableHost) {
                                 scrollEventSubscription = rxjs.fromEvent(newScrollableHost, 'scroll')
                                     .pipe(operators.takeUntil(newScrollableHostObservable))
@@ -3214,9 +3242,9 @@
                             }
                         });
                     }
+                    // Teardown callback for the subscription.
                     subscriber.add(function () {
                         var subIndex = subscribers.indexOf(subscriber);
-                        /* sanity check */
                         /* istanbul ignore else */
                         if (subIndex >= 0) {
                             subscribers.splice(subIndex, 1);
@@ -3233,7 +3261,6 @@
                 var regex = /(auto|scroll)/;
                 var windowObj = this.windowRef.nativeWindow;
                 var bodyObj = windowObj.document.body;
-                /* Sanity check */
                 if (!element) {
                     return windowObj;
                 }
@@ -3241,7 +3268,7 @@
                 var parent = element;
                 do {
                     parent = parent.parentNode;
-                    /* Sanity check for if this function is called for an element which has been removed from the DOM */
+                    // Return `window` if the parent element has been removed from the DOM.
                     if (!(parent instanceof HTMLElement)) {
                         return windowObj;
                     }
@@ -3264,22 +3291,20 @@
             };
             SkyScrollableHostService.prototype.observeForScrollableHostChanges = function (element, mutationObserver) {
                 mutationObserver.disconnect();
-                if (element instanceof HTMLElement) {
-                    mutationObserver.observe(element, {
-                        attributes: true,
-                        attributeFilter: ['class', 'style'],
-                        childList: true,
-                        subtree: true,
-                    });
-                }
-                else {
-                    mutationObserver.observe(document.documentElement, {
-                        attributes: true,
-                        attributeFilter: ['class', 'style'],
-                        childList: true,
-                        subtree: true,
-                    });
-                }
+                var target = element instanceof HTMLElement ? element : document.documentElement;
+                mutationObserver.observe(target, {
+                    attributes: true,
+                    attributeFilter: ['class', 'style'],
+                    childList: true,
+                    subtree: true,
+                });
+            };
+            /**
+             * Determines if an element is "visible" in the DOM.
+             * @see https://stackoverflow.com/a/11639664/6178885
+             */
+            SkyScrollableHostService.prototype.isElementVisible = function (elementRef) {
+                return elementRef.nativeElement.offsetParent;
             };
             return SkyScrollableHostService;
         }());